@kya-os/consent 0.1.13 → 0.1.14

package/dist/cjs/styles/stylesheet.js

@@ -0,0 +1,204 @@
+"use strict";
+/**
+ * Stylesheet Generation
+ *
+ * Generates complete CSS stylesheets for consent pages.
+ *
+ * @module @kya-os/consent/styles/stylesheet
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TRANSITION_STYLES = exports.SPINNER_STYLES = exports.INPUT_STYLES = exports.CHECKBOX_STYLES = void 0;
+exports.generateStylesheet = generateStylesheet;
+exports.generateInlineStyles = generateInlineStyles;
+exports.generateComponentStyles = generateComponentStyles;
+exports.generateHeadStyles = generateHeadStyles;
+const css_variables_js_1 = require("./css-variables.js");
+/**
+ * Custom checkbox styles that work with Tailwind's appearance-none
+ *
+ * Creates a checkmark using CSS that appears when checked.
+ */
+exports.CHECKBOX_STYLES = `
+/* Custom checkbox checkmark */
+input[type="checkbox"]:checked::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 5px;
+  height: 9px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: translate(-50%, -60%) rotate(45deg);
+}
+
+/* Focus ring for accessibility */
+input[type="checkbox"]:focus-visible {
+  outline: 2px solid var(--consent-primary);
+  outline-offset: 2px;
+}
+`;
+/**
+ * Form input focus styles
+ */
+exports.INPUT_STYLES = `
+/* Input focus states */
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  ring: 2px;
+  ring-color: var(--consent-primary);
+  border-color: transparent;
+}
+
+/* Password visibility toggle button */
+.password-toggle {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: #6B7280;
+}
+
+.password-toggle:hover {
+  color: #374151;
+}
+`;
+/**
+ * Loading spinner animation
+ */
+exports.SPINNER_STYLES = `
+/* Loading spinner */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+`;
+/**
+ * Smooth transitions
+ */
+exports.TRANSITION_STYLES = `
+/* Smooth transitions */
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-colors {
+  transition-property: color, background-color, border-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-shadow {
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+`;
+/**
+ * Generate a complete stylesheet for consent pages
+ *
+ * @param branding - Branding configuration
+ * @returns Complete CSS stylesheet string
+ */
+function generateStylesheet(branding) {
+    const rootVars = (0, css_variables_js_1.generateRootCSSBlock)(branding);
+    return `
+/* Consent Page Styles - Generated by @kya-os/consent */
+
+${rootVars}
+
+${exports.CHECKBOX_STYLES}
+
+${exports.INPUT_STYLES}
+
+${exports.SPINNER_STYLES}
+
+${exports.TRANSITION_STYLES}
+
+/* Button hover states with primary color */
+button[type="submit"]:not(:disabled):hover,
+.btn-primary:not(:disabled):hover {
+  opacity: 0.9;
+}
+
+/* Disabled states */
+button:disabled,
+input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Link with primary color */
+a.consent-link {
+  color: var(--consent-primary);
+  text-decoration: none;
+}
+
+a.consent-link:hover {
+  text-decoration: underline;
+}
+
+/* Scope badge with derived colors */
+.scope-badge {
+  background-color: var(--consent-secondary);
+  color: var(--consent-primary);
+}
+`.trim();
+}
+/**
+ * Generate minimal inline styles (for embedding in HTML)
+ *
+ * @param branding - Branding configuration
+ * @returns Minimal CSS for inline <style> tag
+ */
+function generateInlineStyles(branding) {
+    const rootVars = (0, css_variables_js_1.generateRootCSSBlock)(branding);
+    return `
+${rootVars}
+${exports.CHECKBOX_STYLES}
+input:focus { outline: none; box-shadow: 0 0 0 2px var(--consent-primary); }
+`.trim();
+}
+/**
+ * Generate styles for a specific component
+ *
+ * @param component - Component name
+ * @returns Component-specific CSS
+ */
+function generateComponentStyles(component) {
+    switch (component) {
+        case "checkbox":
+            return exports.CHECKBOX_STYLES;
+        case "input":
+            return exports.INPUT_STYLES;
+        case "spinner":
+            return exports.SPINNER_STYLES;
+        case "all":
+            return [exports.CHECKBOX_STYLES, exports.INPUT_STYLES, exports.SPINNER_STYLES, exports.TRANSITION_STYLES].join("\n");
+    }
+}
+/**
+ * Generate styles for the <head> section of consent pages
+ *
+ * This is an alias for generateStylesheet for compatibility with templates.
+ *
+ * @param branding - Branding configuration
+ * @returns CSS styles for <style> tag in <head>
+ */
+function generateHeadStyles(branding) {
+    return generateStylesheet(branding);
+}
+//# sourceMappingURL=stylesheet.js.map

package/dist/cjs/styles/stylesheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stylesheet.js","sourceRoot":"","sources":["../../../src/styles/stylesheet.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;;AA6GH,gDA6CC;AAQD,oDAQC;AAQD,0DAaC;AAUD,gDAEC;AAxMD,yDAA0D;AAE1D;;;;GAIG;AACU,QAAA,eAAe,GAAG;;;;;;;;;;;;;;;;;;;CAmB9B,CAAC;AAEF;;GAEG;AACU,QAAA,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B3B,CAAC;AAEF;;GAEG;AACU,QAAA,cAAc,GAAG;;;;;;;;;;;CAW7B,CAAC;AAEF;;GAEG;AACU,QAAA,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;CAmBhC,CAAC;AAEF;;;;;GAKG;AACH,SAAgB,kBAAkB,CAAC,QAA0B;IAC3D,MAAM,QAAQ,GAAG,IAAA,uCAAoB,EAAC,QAAQ,CAAC,CAAC;IAEhD,OAAO;;;EAGP,QAAQ;;EAER,uBAAe;;EAEf,oBAAY;;EAEZ,sBAAc;;EAEd,yBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BlB,CAAC,IAAI,EAAE,CAAC;AACT,CAAC;AAED;;;;;GAKG;AACH,SAAgB,oBAAoB,CAAC,QAA0B;IAC7D,MAAM,QAAQ,GAAG,IAAA,uCAAoB,EAAC,QAAQ,CAAC,CAAC;IAEhD,OAAO;EACP,QAAQ;EACR,uBAAe;;CAEhB,CAAC,IAAI,EAAE,CAAC;AACT,CAAC;AAED;;;;;GAKG;AACH,SAAgB,uBAAuB,CACrC,SAAmD;IAEnD,QAAQ,SAAS,EAAE,CAAC;QAClB,KAAK,UAAU;YACb,OAAO,uBAAe,CAAC;QACzB,KAAK,OAAO;YACV,OAAO,oBAAY,CAAC;QACtB,KAAK,SAAS;YACZ,OAAO,sBAAc,CAAC;QACxB,KAAK,KAAK;YACR,OAAO,CAAC,uBAAe,EAAE,oBAAY,EAAE,sBAAc,EAAE,yBAAiB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzF,CAAC;AACH,CAAC;AAED;;;;;;;GAOG;AACH,SAAgB,kBAAkB,CAAC,QAA0B;IAC3D,OAAO,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AACtC,CAAC"}

package/dist/cjs/styles/tokens.js

@@ -0,0 +1,183 @@
+"use strict";
+/**
+ * Consent CSS Class Tokens
+ *
+ * Single source of truth for all Tailwind classes used in consent pages.
+ * CRITICAL: These MUST match AgentShield preview components exactly.
+ *
+ * Divergences identified and fixed:
+ * - Button: py-2 → py-3, rounded-md → rounded-lg (match AgentShield)
+ * - Checkbox: w-5 h-5 → w-4 h-4 (match AgentShield)
+ * - Container: max-w-md → max-w-[512px] (match AgentShield)
+ *
+ * @module @kya-os/consent/styles/tokens
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CONSENT_CLASSES = void 0;
+/**
+ * CONSENT_CLASSES - Canonical CSS classes for consent UI components
+ *
+ * All classes are Tailwind CSS utilities that match AgentShield exactly.
+ */
+exports.CONSENT_CLASSES = {
+    // =========================================================================
+    // Container / Shell - Matches AgentShield PreviewShell.tsx
+    // =========================================================================
+    /** Main container wrapper - background with centered content */
+    wrapper: "bg-gray-50 min-h-screen flex items-center justify-center p-4",
+    /** Card container - MUST be max-w-[512px] not max-w-md (448px) */
+    container: "bg-white rounded-[20px] border border-black/10 shadow-xl overflow-hidden max-w-[512px] w-full",
+    /** Header section with logo and agent info */
+    header: "p-6 pb-0",
+    /** Main content area */
+    content: "p-6 pt-4 space-y-6",
+    /** Footer with buttons */
+    footer: "p-6 pt-0 flex gap-3",
+    // =========================================================================
+    // Buttons - Matches AgentShield PreviewButton.tsx
+    // CRITICAL: h-11, py-3, rounded-lg (NOT py-2, rounded-md)
+    // =========================================================================
+    /** Primary action button (Allow access) */
+    buttonPrimary: "px-4 py-3 h-11 rounded-lg text-white font-medium transition-opacity hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed",
+    /** Secondary action button (Cancel) */
+    buttonSecondary: "px-4 py-3 h-11 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors",
+    /** Full width button variant */
+    buttonFull: "w-full py-3 px-4 h-11 rounded-lg text-white font-medium transition-opacity hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed",
+    /** OAuth/Social login button */
+    buttonOAuth: "w-full py-3 px-4 h-11 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors flex items-center justify-center gap-2",
+    /** Icon button (small) */
+    buttonIcon: "p-2 rounded-lg hover:bg-gray-100 transition-colors",
+    /** Button group container (for multiple buttons) */
+    buttonGroup: "flex gap-3 mt-6",
+    // =========================================================================
+    // Checkbox - Matches AgentShield PreviewCheckbox.tsx
+    // CRITICAL: w-4 h-4 (NOT w-5 h-5)
+    // =========================================================================
+    /** Checkbox input - custom styled */
+    checkbox: "w-4 h-4 rounded border border-gray-300 bg-white checked:bg-[var(--consent-primary)] checked:border-[var(--consent-primary)] appearance-none cursor-pointer relative flex-shrink-0",
+    /** Checkbox container with label */
+    checkboxContainer: "flex items-start gap-3 cursor-pointer",
+    /** Checkbox label text */
+    checkboxLabel: "text-sm text-gray-700 select-none",
+    /** Checkbox wrapper for proper alignment */
+    checkboxWrapper: "flex items-center h-5",
+    /** Checkbox text (alias for checkboxLabel) */
+    checkboxText: "text-sm text-gray-700 select-none",
+    // =========================================================================
+    // Form Elements
+    // =========================================================================
+    /** Input field (text, email, password) */
+    input: "w-full px-4 py-3 h-11 rounded-lg border border-gray-300 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[var(--consent-primary)] focus:border-transparent transition-shadow",
+    /** Input with error state */
+    inputError: "w-full px-4 py-3 h-11 rounded-lg border border-red-500 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent",
+    /** Form label */
+    label: "block text-sm font-medium text-gray-700 mb-1.5",
+    /** Form field container */
+    fieldGroup: "space-y-1.5",
+    /** Error message text */
+    errorText: "text-sm text-red-600 mt-1",
+    /** Help text */
+    helpText: "text-sm text-gray-500 mt-1",
+    /** Input focus ring class */
+    inputFocus: "focus:outline-none focus:ring-2 focus:ring-[var(--consent-primary)] focus:border-transparent",
+    // =========================================================================
+    // Typography
+    // =========================================================================
+    /** Page title */
+    title: "text-xl font-semibold text-gray-900",
+    /** Page description / subtitle */
+    description: "text-sm text-gray-600 mt-1",
+    /** Subtitle (alternative name for description) */
+    subtitle: "text-sm text-gray-600 mt-1",
+    /** Section header */
+    sectionHeader: "text-sm font-medium text-gray-700",
+    /** Body text */
+    bodyText: "text-sm text-gray-700",
+    /** Muted / secondary text */
+    mutedText: "text-sm text-gray-500",
+    /** Link styling */
+    link: "text-[var(--consent-primary)] hover:underline cursor-pointer",
+    /** Header centered text */
+    headerCenter: "text-center",
+    // =========================================================================
+    // Permissions List
+    // =========================================================================
+    /** Permissions section container */
+    permissionsContainer: "space-y-2",
+    /** Permissions header text */
+    permissionsHeader: "text-sm font-medium text-gray-700 mb-2",
+    /** Permissions list wrapper */
+    permissionsList: "space-y-2",
+    /** Single permission item */
+    permissionItem: "flex items-center gap-2 text-sm text-gray-700 bg-gray-50 px-3 py-2 rounded-lg",
+    /** Permission icon */
+    permissionIcon: "w-4 h-4 text-[var(--consent-primary)] flex-shrink-0",
+    /** Scope badge */
+    scopeBadge: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800",
+    // =========================================================================
+    // Agent Info Section
+    // =========================================================================
+    /** Agent info container */
+    agentContainer: "flex items-start gap-4",
+    /** Agent info wrapper (alternative name) */
+    agentWrapper: "flex items-start gap-4",
+    /** Agent avatar/logo */
+    agentAvatar: "w-12 h-12 rounded-xl bg-gray-100 flex items-center justify-center text-gray-400 flex-shrink-0",
+    /** Agent icon container (alternative to avatar) */
+    agentIcon: "w-12 h-12 rounded-xl bg-gray-100 flex items-center justify-center text-gray-400 flex-shrink-0",
+    /** Agent details wrapper */
+    agentDetails: "flex-1 min-w-0",
+    /** Agent name */
+    agentName: "font-medium text-gray-900 truncate",
+    /** Agent description text */
+    agentDescription: "text-sm text-gray-600 mt-1",
+    /** Agent DID (truncated) */
+    agentDid: "text-xs text-gray-500 font-mono truncate",
+    // =========================================================================
+    // Success Page
+    // =========================================================================
+    /** Success icon container */
+    successIcon: "w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4",
+    /** Success checkmark */
+    successCheck: "w-8 h-8 text-green-600",
+    /** Credential display box */
+    credentialBox: "bg-gray-50 rounded-lg p-4 font-mono text-sm text-gray-700 break-all",
+    // =========================================================================
+    // Loading States
+    // =========================================================================
+    /** Loading spinner */
+    spinner: "animate-spin w-5 h-5 text-white",
+    /** Loading overlay */
+    loadingOverlay: "absolute inset-0 bg-white/80 flex items-center justify-center",
+    // =========================================================================
+    // Dividers
+    // =========================================================================
+    /** Horizontal divider */
+    divider: "border-t border-gray-200",
+    /** Divider with text (OR) */
+    dividerWithText: "relative flex items-center my-4",
+    /** Divider text styling */
+    dividerText: "absolute inset-0 flex items-center justify-center text-sm text-gray-500 bg-white px-4",
+    // =========================================================================
+    // Alerts / Messages
+    // =========================================================================
+    /** Info alert */
+    alertInfo: "bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800",
+    /** Warning alert */
+    alertWarning: "bg-amber-50 border border-amber-200 rounded-lg p-4 text-sm text-amber-800",
+    /** Error alert */
+    alertError: "bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-800",
+    /** Success alert */
+    alertSuccess: "bg-green-50 border border-green-200 rounded-lg p-4 text-sm text-green-800",
+    // =========================================================================
+    // Expiration Notice
+    // =========================================================================
+    /** Expiration notice wrapper */
+    expirationWrapper: "flex items-center gap-2 text-sm text-gray-500 mt-4",
+    // =========================================================================
+    // Error Container
+    // =========================================================================
+    /** Error container (hidden by default) */
+    errorContainer: "hidden",
+};
+//# sourceMappingURL=tokens.js.map

package/dist/cjs/styles/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../src/styles/tokens.ts"],"names":[],"mappings":"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"}

package/dist/cjs/templates/base/base-template.js

@@ -0,0 +1,282 @@
+"use strict";
+/**
+ * Base Consent Template
+ *
+ * Abstract class implementing the Template Method pattern.
+ * Defines the overall page structure, subclasses implement auth-specific content.
+ *
+ * @module @kya-os/consent/templates/base/base-template
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseConsentTemplate = void 0;
+const tokens_js_1 = require("../../styles/tokens.js");
+const stylesheet_js_1 = require("../../styles/stylesheet.js");
+const components_js_1 = require("./components.js");
+const escape_js_1 = require("../../security/escape.js");
+/**
+ * Abstract base class for consent page templates.
+ *
+ * Implements the Template Method pattern:
+ * - `render()` defines the overall structure
+ * - Subclasses override `renderAuthContent()` for mode-specific UI
+ * - Other methods can be overridden for customization
+ */
+class BaseConsentTemplate {
+    constructor(config, resolved) {
+        this.config = config;
+        this.resolved = resolved;
+    }
+    /**
+     * Optional: Render mode-specific scripts.
+     * Override in subclasses if needed.
+     */
+    renderModeScript() {
+        return "";
+    }
+    /**
+     * Main render method - Template Method Pattern.
+     * Defines the overall page structure.
+     */
+    render() {
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  ${this.renderHead()}
+</head>
+<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">
+  <div class="${tokens_js_1.CONSENT_CLASSES.container}">
+    ${this.renderPageHeader()}
+    <div class="${tokens_js_1.CONSENT_CLASSES.content}">
+      ${this.renderAgentSection()}
+      ${this.renderAuthContent()}
+      ${this.renderCustomFields()}
+      ${this.renderTermsSection()}
+      ${this.renderActionButtons()}
+    </div>
+  </div>
+  ${this.renderForm()}
+  ${this.renderBaseScript()}
+  ${this.renderModeScript()}
+</body>
+</html>`;
+    }
+    /**
+     * Render the <head> section with meta tags, styles, and scripts.
+     */
+    renderHead() {
+        const { branding } = this.resolved;
+        return `
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com; style-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com; img-src 'self' data: https:; font-src 'self' data:;">
+      <title>${this.getPageTitle()}</title>
+      <script src="https://cdn.tailwindcss.com"></script>
+      <style>
+        ${(0, stylesheet_js_1.generateHeadStyles)(branding)}
+      </style>
+    `;
+    }
+    /**
+     * Get the page title.
+     */
+    getPageTitle() {
+        return `${this.resolved.copy.title} - ${(0, escape_js_1.escapeHtml)(this.config.tool)}`;
+    }
+    /**
+     * Render the page header with logo, company name, and title.
+     */
+    renderPageHeader() {
+        const { copy, branding } = this.resolved;
+        return (0, components_js_1.renderHeader)(copy.title, undefined, branding.logoUrl, branding.companyName);
+    }
+    /**
+     * Render the agent info section with description.
+     * Uses config.toolDescription if provided, otherwise falls back to resolved copy.
+     */
+    renderAgentSection() {
+        const { copy, branding } = this.resolved;
+        // Use toolDescription from page config if provided (backward compatibility)
+        // Otherwise use the resolved description from remote config
+        const description = this.config.toolDescription || copy.resolvedDescription;
+        return (0, components_js_1.renderAgentInfo)(description, branding.logoUrl);
+    }
+    /**
+     * Render custom fields section.
+     */
+    renderCustomFields() {
+        // Custom fields come from resolved config (which gets them from remote config)
+        const customFields = this.resolved.customFields;
+        if (!customFields || customFields.length === 0) {
+            return "";
+        }
+        const fieldsHtml = customFields
+            .map((field) => {
+            if (field.type === "checkbox") {
+                return (0, components_js_1.renderCheckbox)((0, escape_js_1.escapeAttr)(field.name), (0, escape_js_1.escapeHtml)(field.label), field.required ?? false);
+            }
+            else if (field.type === "select" && field.options) {
+                // Render select dropdown
+                const optionsHtml = field.options
+                    .map((opt) => `<option value="${(0, escape_js_1.escapeAttr)(opt.value)}">${(0, escape_js_1.escapeHtml)(opt.label)}</option>`)
+                    .join("");
+                const requiredAttr = field.required ? " required" : "";
+                return `
+            <div class="space-y-2">
+              <label for="${(0, escape_js_1.escapeAttr)(field.name)}" class="block text-sm font-medium text-gray-700">${(0, escape_js_1.escapeHtml)(field.label)}</label>
+              <select
+                id="${(0, escape_js_1.escapeAttr)(field.name)}"
+                name="${(0, escape_js_1.escapeAttr)(field.name)}"
+                class="${tokens_js_1.CONSENT_CLASSES.input}"
+                ${requiredAttr}
+              >
+                <option value="">Select...</option>
+                ${optionsHtml}
+              </select>
+            </div>
+          `;
+            }
+            else {
+                // Use text input for non-checkbox, non-select fields
+                const inputType = field.type === "email" ? "email" : "text";
+                return (0, components_js_1.renderInput)(inputType, field.name, field.label, field.placeholder, field.required ?? false);
+            }
+        })
+            .join("");
+        return `
+      <div class="space-y-4">
+        ${fieldsHtml}
+      </div>
+    `;
+    }
+    /**
+     * Render the terms acceptance section.
+     */
+    renderTermsSection() {
+        const { copy } = this.resolved;
+        if (!copy.termsRequired) {
+            return "";
+        }
+        // Build terms label with optional link
+        let termsLabel = `I agree to the ${(0, escape_js_1.escapeHtml)(copy.termsText)}`;
+        if (copy.termsUrl) {
+            termsLabel = `I agree to the <a href="${(0, escape_js_1.escapeAttr)(copy.termsUrl)}" target="_blank" rel="noopener noreferrer" class="link-primary">${(0, escape_js_1.escapeHtml)(copy.termsText)}</a>`;
+        }
+        return `
+      <div class="space-y-2">
+        ${(0, components_js_1.renderCheckbox)("termsAccepted", termsLabel, true)}
+      </div>
+    `;
+    }
+    /**
+     * Render the action buttons (cancel/submit).
+     */
+    renderActionButtons() {
+        const { copy } = this.resolved;
+        return (0, components_js_1.renderButtonGroup)(copy.cancelButtonText, copy.submitButtonText);
+    }
+    /**
+     * Render the hidden form with common fields.
+     */
+    renderForm() {
+        const { tool, scopes, agentDid, sessionId, projectId, serverUrl, oauthIdentity } = this.config;
+        // Escape HTML entities in JSON to prevent XSS when embedded in HTML attributes
+        const scopesJson = (0, escape_js_1.escapeHtml)(JSON.stringify(scopes));
+        // Include OAuth identity as hidden field if present (for approval with identity)
+        const oauthIdentityField = oauthIdentity
+            ? `<input type="hidden" name="oauth_identity_json" value="${(0, escape_js_1.escapeHtml)(JSON.stringify(oauthIdentity))}" />`
+            : "";
+        return `
+      <form id="consent-form" method="POST" action="${(0, escape_js_1.escapeAttr)(serverUrl)}/consent/approve" style="display:none;">
+        ${oauthIdentityField}
+        <input type="hidden" name="tool" value="${(0, escape_js_1.escapeAttr)(tool)}" />
+        <input type="hidden" name="scopes" value="${scopesJson}" />
+        <input type="hidden" name="agent_did" value="${(0, escape_js_1.escapeAttr)(agentDid)}" />
+        <input type="hidden" name="session_id" value="${(0, escape_js_1.escapeAttr)(sessionId)}" />
+        <input type="hidden" name="project_id" value="${(0, escape_js_1.escapeAttr)(projectId)}" />
+        <input type="hidden" name="auth_mode" value="${this.authMode}" />
+        <input type="hidden" name="provider_type" value="none" />
+      </form>
+    `;
+    }
+    /**
+     * Render the base JavaScript for form handling.
+     */
+    renderBaseScript() {
+        const serverUrl = (0, escape_js_1.escapeJs)(this.config.serverUrl);
+        return `
+<script>
+(function() {
+  const form = document.getElementById('consent-form');
+  if (!form) return;
+
+  const serverUrl = ${serverUrl};
+
+  // Find all checkboxes and inputs in the visible content
+  const contentDiv = document.querySelector('.${tokens_js_1.CONSENT_CLASSES.content.split(" ")[0]}');
+
+  // Handle form submission for consent-only mode
+  // NOTE: Mode-specific templates (credentials, oauth, etc.) have their own form handlers
+  // This handler only applies to buttons within the hidden consent-form
+  form.addEventListener('submit', async function(e) {
+    e.preventDefault();
+
+    // Validate required checkboxes
+    const termsCheckbox = document.querySelector('input[name="termsAccepted"]');
+    if (termsCheckbox && termsCheckbox.required && !termsCheckbox.checked) {
+      alert('Please accept the terms and conditions to continue.');
+      return;
+    }
+
+    // Collect form data
+    const formData = new FormData(form);
+    const data = Object.fromEntries(formData.entries());
+
+    // Add checkbox values from visible form
+    if (termsCheckbox) {
+      data.termsAccepted = termsCheckbox.checked;
+    }
+
+    // Parse scopes
+    try {
+      data.scopes = JSON.parse(data.scopes);
+    } catch (e) {
+      data.scopes = [];
+    }
+
+    try {
+      const response = await fetch(serverUrl + '/consent/approve', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data)
+      });
+
+      const result = await response.json();
+
+      if (result.success) {
+        const successUrl = serverUrl + '/consent/success?delegation_id=' +
+          encodeURIComponent(result.delegation_id || 'unknown') +
+          '&project_id=' + encodeURIComponent(data.project_id || '');
+        window.location.href = successUrl;
+      } else {
+        alert('Authorization failed: ' + (result.error || 'Unknown error'));
+      }
+    } catch (error) {
+      console.error('Error:', error);
+      alert('Error: ' + (error instanceof Error ? error.message : String(error)));
+    }
+  });
+
+  // Handle cancel button
+  document.querySelectorAll('button[type="button"]').forEach(btn => {
+    if (btn.textContent && btn.textContent.toLowerCase().includes('cancel')) {
+      btn.addEventListener('click', function() {
+        window.close();
+      });
+    }
+  });
+})();
+</script>`;
+    }
+}
+exports.BaseConsentTemplate = BaseConsentTemplate;
+//# sourceMappingURL=base-template.js.map