@kya-os/consent 0.1.0

package/dist/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_1 = require("./css-variables");
+/**
+ * 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_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_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/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,mDAAuD;AAEvD;;;;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,oCAAoB,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,oCAAoB,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/styles/tokens.d.ts

@@ -0,0 +1,141 @@
+/**
+ * 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
+ */
+/**
+ * CONSENT_CLASSES - Canonical CSS classes for consent UI components
+ *
+ * All classes are Tailwind CSS utilities that match AgentShield exactly.
+ */
+export declare const CONSENT_CLASSES: {
+    /** Main container wrapper - background with centered content */
+    readonly 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) */
+    readonly 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 */
+    readonly header: "p-6 pb-0";
+    /** Main content area */
+    readonly content: "p-6 pt-4 space-y-6";
+    /** Footer with buttons */
+    readonly footer: "p-6 pt-0 flex gap-3";
+    /** Primary action button (Allow access) */
+    readonly 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) */
+    readonly 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 */
+    readonly 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 */
+    readonly 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) */
+    readonly buttonIcon: "p-2 rounded-lg hover:bg-gray-100 transition-colors";
+    /** Button group container (for multiple buttons) */
+    readonly buttonGroup: "flex gap-3 mt-6";
+    /** Checkbox input - custom styled */
+    readonly 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 */
+    readonly checkboxContainer: "flex items-start gap-3 cursor-pointer";
+    /** Checkbox label text */
+    readonly checkboxLabel: "text-sm text-gray-700 select-none";
+    /** Checkbox wrapper for proper alignment */
+    readonly checkboxWrapper: "flex items-center h-5";
+    /** Checkbox text (alias for checkboxLabel) */
+    readonly checkboxText: "text-sm text-gray-700 select-none";
+    /** Input field (text, email, password) */
+    readonly 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 */
+    readonly 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 */
+    readonly label: "block text-sm font-medium text-gray-700 mb-1.5";
+    /** Form field container */
+    readonly fieldGroup: "space-y-1.5";
+    /** Error message text */
+    readonly errorText: "text-sm text-red-600 mt-1";
+    /** Help text */
+    readonly helpText: "text-sm text-gray-500 mt-1";
+    /** Input focus ring class */
+    readonly inputFocus: "focus:outline-none focus:ring-2 focus:ring-[var(--consent-primary)] focus:border-transparent";
+    /** Page title */
+    readonly title: "text-xl font-semibold text-gray-900";
+    /** Page description / subtitle */
+    readonly description: "text-sm text-gray-600 mt-1";
+    /** Subtitle (alternative name for description) */
+    readonly subtitle: "text-sm text-gray-600 mt-1";
+    /** Section header */
+    readonly sectionHeader: "text-sm font-medium text-gray-700";
+    /** Body text */
+    readonly bodyText: "text-sm text-gray-700";
+    /** Muted / secondary text */
+    readonly mutedText: "text-sm text-gray-500";
+    /** Link styling */
+    readonly link: "text-[var(--consent-primary)] hover:underline cursor-pointer";
+    /** Header centered text */
+    readonly headerCenter: "text-center";
+    /** Permissions section container */
+    readonly permissionsContainer: "space-y-2";
+    /** Permissions header text */
+    readonly permissionsHeader: "text-sm font-medium text-gray-700 mb-2";
+    /** Permissions list wrapper */
+    readonly permissionsList: "space-y-2";
+    /** Single permission item */
+    readonly permissionItem: "flex items-center gap-2 text-sm text-gray-700 bg-gray-50 px-3 py-2 rounded-lg";
+    /** Permission icon */
+    readonly permissionIcon: "w-4 h-4 text-[var(--consent-primary)] flex-shrink-0";
+    /** Scope badge */
+    readonly 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 container */
+    readonly agentContainer: "flex items-start gap-4";
+    /** Agent info wrapper (alternative name) */
+    readonly agentWrapper: "flex items-start gap-4";
+    /** Agent avatar/logo */
+    readonly 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) */
+    readonly agentIcon: "w-12 h-12 rounded-xl bg-gray-100 flex items-center justify-center text-gray-400 flex-shrink-0";
+    /** Agent details wrapper */
+    readonly agentDetails: "flex-1 min-w-0";
+    /** Agent name */
+    readonly agentName: "font-medium text-gray-900 truncate";
+    /** Agent description text */
+    readonly agentDescription: "text-sm text-gray-600 mt-1";
+    /** Agent DID (truncated) */
+    readonly agentDid: "text-xs text-gray-500 font-mono truncate";
+    /** Success icon container */
+    readonly successIcon: "w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4";
+    /** Success checkmark */
+    readonly successCheck: "w-8 h-8 text-green-600";
+    /** Credential display box */
+    readonly credentialBox: "bg-gray-50 rounded-lg p-4 font-mono text-sm text-gray-700 break-all";
+    /** Loading spinner */
+    readonly spinner: "animate-spin w-5 h-5 text-white";
+    /** Loading overlay */
+    readonly loadingOverlay: "absolute inset-0 bg-white/80 flex items-center justify-center";
+    /** Horizontal divider */
+    readonly divider: "border-t border-gray-200";
+    /** Divider with text (OR) */
+    readonly dividerWithText: "relative flex items-center my-4";
+    /** Divider text styling */
+    readonly dividerText: "absolute inset-0 flex items-center justify-center text-sm text-gray-500 bg-white px-4";
+    /** Info alert */
+    readonly alertInfo: "bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800";
+    /** Warning alert */
+    readonly alertWarning: "bg-amber-50 border border-amber-200 rounded-lg p-4 text-sm text-amber-800";
+    /** Error alert */
+    readonly alertError: "bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-800";
+    /** Success alert */
+    readonly alertSuccess: "bg-green-50 border border-green-200 rounded-lg p-4 text-sm text-green-800";
+    /** Expiration notice wrapper */
+    readonly expirationWrapper: "flex items-center gap-2 text-sm text-gray-500 mt-4";
+    /** Error container (hidden by default) */
+    readonly errorContainer: "hidden";
+};
+export type ConsentClassesType = typeof CONSENT_CLASSES;
+export type ConsentClassKey = keyof typeof CONSENT_CLASSES;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/styles/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/styles/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH;;;;GAIG;AACH,eAAO,MAAM,eAAe;IAI1B,gEAAgE;;IAGhE,kEAAkE;;IAIlE,8CAA8C;;IAG9C,wBAAwB;;IAGxB,0BAA0B;;IAO1B,2CAA2C;;IAI3C,uCAAuC;;IAIvC,gCAAgC;;IAIhC,gCAAgC;;IAIhC,0BAA0B;;IAG1B,oDAAoD;;IAOpD,qCAAqC;;IAIrC,oCAAoC;;IAGpC,0BAA0B;;IAG1B,4CAA4C;;IAG5C,8CAA8C;;IAM9C,0CAA0C;;IAI1C,6BAA6B;;IAI7B,iBAAiB;;IAGjB,2BAA2B;;IAG3B,yBAAyB;;IAGzB,gBAAgB;;IAGhB,6BAA6B;;IAM7B,iBAAiB;;IAGjB,kCAAkC;;IAGlC,kDAAkD;;IAGlD,qBAAqB;;IAGrB,gBAAgB;;IAGhB,6BAA6B;;IAG7B,mBAAmB;;IAGnB,2BAA2B;;IAM3B,oCAAoC;;IAGpC,8BAA8B;;IAG9B,+BAA+B;;IAG/B,6BAA6B;;IAI7B,sBAAsB;;IAGtB,kBAAkB;;IAOlB,2BAA2B;;IAG3B,4CAA4C;;IAG5C,wBAAwB;;IAIxB,mDAAmD;;IAInD,4BAA4B;;IAG5B,iBAAiB;;IAGjB,6BAA6B;;IAG7B,4BAA4B;;IAM5B,6BAA6B;;IAI7B,wBAAwB;;IAGxB,6BAA6B;;IAO7B,sBAAsB;;IAGtB,sBAAsB;;IAOtB,yBAAyB;;IAGzB,6BAA6B;;IAG7B,2BAA2B;;IAO3B,iBAAiB;;IAGjB,oBAAoB;;IAIpB,kBAAkB;;IAGlB,oBAAoB;;IAOpB,gCAAgC;;IAMhC,0CAA0C;;CAElC,CAAC;AAEX,MAAM,MAAM,kBAAkB,GAAG,OAAO,eAAe,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC"}

package/dist/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/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/templates/base/base-template.d.ts

@@ -0,0 +1,81 @@
+/**
+ * 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
+ */
+import type { ResolvedConsentConfig } from "../../types/config.types";
+import type { ExtendedConsentPageConfig } from "../../types/page.types";
+import type { AuthMode } from "../../types/modes.types";
+/**
+ * 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
+ */
+export declare abstract class BaseConsentTemplate {
+    protected config: ExtendedConsentPageConfig;
+    protected resolved: ResolvedConsentConfig;
+    constructor(config: ExtendedConsentPageConfig, resolved: ResolvedConsentConfig);
+    /**
+     * Get the auth mode identifier for this template.
+     */
+    abstract get authMode(): AuthMode;
+    /**
+     * Render the auth-specific content section.
+     * Must be implemented by subclasses.
+     */
+    abstract renderAuthContent(): string;
+    /**
+     * Optional: Render mode-specific scripts.
+     * Override in subclasses if needed.
+     */
+    protected renderModeScript(): string;
+    /**
+     * Main render method - Template Method Pattern.
+     * Defines the overall page structure.
+     */
+    render(): string;
+    /**
+     * Render the <head> section with meta tags, styles, and scripts.
+     */
+    protected renderHead(): string;
+    /**
+     * Get the page title.
+     */
+    protected getPageTitle(): string;
+    /**
+     * Render the page header with logo, company name, and title.
+     */
+    protected renderPageHeader(): string;
+    /**
+     * Render the agent info section with description.
+     * Uses config.toolDescription if provided, otherwise falls back to resolved copy.
+     */
+    protected renderAgentSection(): string;
+    /**
+     * Render custom fields section.
+     */
+    protected renderCustomFields(): string;
+    /**
+     * Render the terms acceptance section.
+     */
+    protected renderTermsSection(): string;
+    /**
+     * Render the action buttons (cancel/submit).
+     */
+    protected renderActionButtons(): string;
+    /**
+     * Render the hidden form with common fields.
+     */
+    protected renderForm(): string;
+    /**
+     * Render the base JavaScript for form handling.
+     */
+    protected renderBaseScript(): string;
+}
+//# sourceMappingURL=base-template.d.ts.map

package/dist/templates/base/base-template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-template.d.ts","sourceRoot":"","sources":["../../../src/templates/base/base-template.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAYH,OAAO,KAAK,EAAsB,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAC1F,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAExD;;;;;;;GAOG;AACH,8BAAsB,mBAAmB;IACvC,SAAS,CAAC,MAAM,EAAE,yBAAyB,CAAC;IAC5C,SAAS,CAAC,QAAQ,EAAE,qBAAqB,CAAC;gBAGxC,MAAM,EAAE,yBAAyB,EACjC,QAAQ,EAAE,qBAAqB;IAMjC;;OAEG;IACH,QAAQ,KAAK,QAAQ,IAAI,QAAQ,CAAC;IAElC;;;OAGG;IACH,QAAQ,CAAC,iBAAiB,IAAI,MAAM;IAEpC;;;OAGG;IACH,SAAS,CAAC,gBAAgB,IAAI,MAAM;IAIpC;;;OAGG;IACH,MAAM,IAAI,MAAM;IAwBhB;;OAEG;IACH,SAAS,CAAC,UAAU,IAAI,MAAM;IAc9B;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,MAAM;IAIhC;;OAEG;IACH,SAAS,CAAC,gBAAgB,IAAI,MAAM;IAUpC;;;OAGG;IACH,SAAS,CAAC,kBAAkB,IAAI,MAAM;IAQtC;;OAEG;IACH,SAAS,CAAC,kBAAkB,IAAI,MAAM;IA4DtC;;OAEG;IACH,SAAS,CAAC,kBAAkB,IAAI,MAAM;IAoBtC;;OAEG;IACH,SAAS,CAAC,mBAAmB,IAAI,MAAM;IAKvC;;OAEG;IACH,SAAS,CAAC,UAAU,IAAI,MAAM;IAyB9B;;OAEG;IACH,SAAS,CAAC,gBAAgB,IAAI,MAAM;CA6ErC"}