ultimate-jekyll-manager 0.0.199 → 0.0.201

package/.claude/settings.local.json

@@ -6,9 +6,10 @@
       "Read(//Users/ian/Developer/Repositories/ITW-Creative-works/ultimate-jekyll-manager/src/**)",
       "Read(//Users/ian/Developer/Repositories/Trusteroo/trusteroo-website/**)",
       "Bash(cat:*)",
-      "Read(//Users/ian/Developer/Repositories/ITW-Creative-Works/ultimate-jekyll-legacy/special/master/pages/admin/notifications/**)"
+      "Read(//Users/ian/Developer/Repositories/ITW-Creative-Works/ultimate-jekyll-legacy/special/master/pages/admin/notifications/**)",
+      "mcp__mcp-router__chrome-devtools__navigate_page"
     ],
     "deny": [],
     "ask": []
   }
-}
+}

package/bin/ultimate-jekyll

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-const argv = require('yargs').argv;
+const argv = require('yargs')(process.argv.slice(2)).parseSync();
 const cli = new (require('../dist/cli.js'))(argv);
 (async function() {
   'use strict';

package/dist/assets/js/core/auth.js

@@ -156,9 +156,16 @@ function setAnalyticsUserId(user, webManager) {
 // Send user metadata to server (affiliate, UTM params, etc.)
 async function sendUserSignupMetadata(user, webManager) {
   try {
-    // Check if this is a new user account (created in last 5 minutes)
+    // Skip on auth pages to avoid blocking redirect (metadata will be sent on destination page)
+    const pagePath = document.documentElement.getAttribute('data-page-path');
+    const authPages = ['/signin', '/signup', '/reset'];
+    if (authPages.includes(pagePath)) {
+      return;
+    }
+
+    // Check if this is a new user account (created in last X minutes)
     const accountAge = Date.now() - new Date(user.metadata.creationTime).getTime();
-    const signupProcessed = webManager.storage().get('flags.signupProcessed', false);
+    const signupProcessed = webManager.storage().get('flags.signupProcessed', null) === user.uid;
 
     /* @dev-only:start */
     {
@@ -202,8 +209,8 @@ async function sendUserSignupMetadata(user, webManager) {
     // Log
     console.log('[Auth] User metadata sent successfully:', response);
 
-    // Mark signup as sent (keep the attribution data for reference)
-    webManager.storage().set('flags.signupProcessed', true);
+    // Mark signup as sent for this user (keep the attribution data for reference)
+    webManager.storage().set('flags.signupProcessed', user.uid);
   } catch (error) {
     console.error('[Auth] Error sending user metadata:', error);
     // Don't throw - we don't want to block the signup flow

package/dist/assets/js/core/exit-popup.js

@@ -71,6 +71,9 @@ export default function (Manager, options) {
         url.searchParams.set('itm_campaign', 'exit-popup');
         url.searchParams.set('itm_content', window.location.pathname);
         $button.href = url.toString();
+
+        // Remove data-bs-dismiss so the link navigation works properly
+        $button.removeAttribute('data-bs-dismiss');
       }
     }
 

package/dist/assets/js/libs/auth.js

@@ -13,6 +13,9 @@ export default function (Manager) {
   const url = new URL(window.location.href);
   const useAuthPopup = url.searchParams.get('authPopup') === 'true' || window !== window.top;
 
+  // Fire wakeup call immediately to prevent cold start on signup API call (fire-and-forget)
+  // wakeupServer(webManager);
+
   // Handle DOM ready
   webManager.dom().ready()
   .then(async () => {
@@ -653,4 +656,13 @@ export default function (Manager) {
       content_name: 'Password Reset'
     });
   }
+
+  // Wakeup server to prevent cold start on signup API call
+  function wakeupServer(webManager) {
+    const serverApiURL = `${webManager.getApiUrl()}/backend-manager/user/signup?wakeup=true`;
+
+    fetch(serverApiURL, { method: 'POST' })
+      .then(() => console.log('[Auth] Server wakeup sent'))
+      .catch(() => {}); // Silently ignore errors
+  }
 }

package/dist/assets/js/libs/form-manager.js

@@ -156,7 +156,7 @@ export class FormManager {
 
     // Focus the field with autofocus attribute if it exists (desktop only)
     const $autofocusField = this.$form.querySelector('[autofocus]');
-    if ($autofocusField && !$autofocusField.disabled && window.Manager?.webManager?.utilities()?.getDeviceType() === 'desktop') {
+    if ($autofocusField && !$autofocusField.disabled && window.Manager?.webManager?.utilities()?.getDevice() === 'desktop') {
       this._focusField($autofocusField);
     }
   }

package/dist/assets/js/pages/account/sections/connections.js

@@ -9,7 +9,7 @@ import authorizedFetch from '__main_assets__/js/libs/authorized-fetch.js';
 let webManager = null;
 let appData = null;
 let accountData = null;
-let connectionForms = new Map(); // Store FormManager instances for each provider
+let connectionForms = new Map();
 
 // Supported providers (must match IDs in HTML)
 const supportedProviders = ['google', 'discord', 'github', 'twitter', 'facebook'];
@@ -38,79 +38,49 @@ export async function loadData(account, sharedAppData) {
 
 // Display available and connected OAuth providers
 function displayConnections() {
-  console.log('[DEBUG] displayConnections() called');
-
-  // Hide loading state
   const $loading = document.getElementById('connections-loading');
+
   if ($loading) {
     $loading.classList.add('d-none');
   }
 
-  // Check if appData is loaded
   if (!appData) {
-    console.log('[DEBUG] No appData, showing loading state');
-    // Show loading if no app data yet
     if ($loading) {
       $loading.classList.remove('d-none');
     }
     return;
   }
 
-  // Get available OAuth providers from app data
   const availableProviders = appData?.oauth2 || {};
   const userConnections = accountData?.oauth2 || {};
 
-  console.log('[DEBUG] Available OAuth providers:', availableProviders);
-  console.log('[DEBUG] User connections:', userConnections);
-
-  // Check if any providers are configured
   let hasEnabledProviders = false;
 
-  // Process each supported provider
   supportedProviders.forEach(providerId => {
-    console.log(`[DEBUG] Processing provider: ${providerId}`);
-
     const providerSettings = availableProviders[providerId];
     const $providerElement = document.getElementById(`connection-${providerId}`);
 
-    console.log(`[DEBUG] ${providerId} - providerSettings:`, providerSettings);
-    console.log(`[DEBUG] ${providerId} - providerSettings.enabled:`, providerSettings?.enabled);
-    console.log(`[DEBUG] ${providerId} - $providerElement exists:`, !!$providerElement);
-
     if (!$providerElement) {
-      console.warn(`[DEBUG] ${providerId} - Provider element not found in DOM`);
       return;
     }
 
-    // Check if provider is enabled
     const isEnabled = providerSettings && providerSettings.enabled !== false;
-    console.log(`[DEBUG] ${providerId} - isEnabled:`, isEnabled);
 
     if (isEnabled) {
       hasEnabledProviders = true;
-
-      // Show the provider element first
-      console.log(`[DEBUG] ${providerId} - Removing d-none class`);
       $providerElement.classList.remove('d-none');
 
-      // Initialize FormManager for this provider before updating status
-      console.log(`[DEBUG] ${providerId} - About to initialize FormManager`);
       initializeProviderForm(providerId);
 
-      // Update provider status based on user connection
       const userConnection = userConnections[providerId];
-      console.log(`[DEBUG] ${providerId} - userConnection:`, userConnection);
-      console.log(`[DEBUG] ${providerId} - About to update provider status`);
       updateProviderStatus(providerId, userConnection, providerSettings);
     } else {
-      // Hide disabled providers
-      console.log(`[DEBUG] ${providerId} - Provider disabled, adding d-none class`);
       $providerElement.classList.add('d-none');
     }
   });
 
-  // Show empty message if no providers are enabled
   const $empty = document.getElementById('connections-empty');
+
   if ($empty) {
     if (hasEnabledProviders) {
       $empty.classList.add('d-none');
@@ -122,30 +92,15 @@ function displayConnections() {
 
 // Update provider status display
 function updateProviderStatus(providerId, userConnection, providerSettings) {
-  console.log(`[DEBUG] updateProviderStatus() called for ${providerId}`);
-  console.log(`[DEBUG] ${providerId} - userConnection:`, userConnection);
-  console.log(`[DEBUG] ${providerId} - userConnection truthy:`, !!userConnection);
-  console.log(`[DEBUG] ${providerId} - userConnection.identity:`, userConnection?.identity);
-  console.log(`[DEBUG] ${providerId} - providerSettings:`, providerSettings);
-
   const $status = document.getElementById(`${providerId}-connection-status`);
   const $description = document.getElementById(`${providerId}-connection-description`);
   const $form = document.getElementById(`connection-form-${providerId}`);
   const $connectButton = $form?.querySelector('button[data-action="connect"]');
   const $disconnectButton = $form?.querySelector('button[data-action="disconnect"]');
 
-  console.log(`[DEBUG] ${providerId} - DOM elements found:`, {
-    $status: !!$status,
-    $description: !!$description,
-    $form: !!$form,
-    $connectButton: !!$connectButton,
-    $disconnectButton: !!$disconnectButton,
-  });
-
   const isConnected = userConnection && userConnection.identity;
-  console.log(`[DEBUG] ${providerId} - isConnected:`, isConnected);
 
-  // Always show description on the left
+  // Set description
   if ($description) {
     const defaultDescriptions = {
       google: 'Enable single sign-on with your Google account',
@@ -155,19 +110,20 @@ function updateProviderStatus(providerId, userConnection, providerSettings) {
       facebook: 'Connect your Facebook account for social features',
     };
 
-    // Use provider description or fallback to default
-    const descriptionText = providerSettings?.description || defaultDescriptions[providerId] || `Connect your ${providerId.charAt(0).toUpperCase() + providerId.slice(1)} account`;
+    const descriptionText = providerSettings?.description
+      || defaultDescriptions[providerId]
+      || `Connect your ${providerId.charAt(0).toUpperCase() + providerId.slice(1)} account`;
+
     $description.textContent = descriptionText;
     $description.classList.remove('d-none');
   }
 
-  // Handle connection status display under the button
+  // Set status
   if ($status) {
     if (isConnected) {
       const displayName = getConnectionDisplayName(userConnection);
       let statusText = `Connected: ${displayName}`;
 
-      // Add last updated date if available
       if (userConnection.updated && userConnection.updated.timestamp) {
         const date = new Date(userConnection.updated.timestamp);
         const dateStr = date.toLocaleDateString('en-US', {
@@ -181,26 +137,19 @@ function updateProviderStatus(providerId, userConnection, providerSettings) {
       $status.textContent = statusText;
       $status.classList.remove('d-none');
     } else {
-      // Not connected - hide status text
       $status.textContent = '';
       $status.classList.add('d-none');
     }
   }
 
-  // Show/hide appropriate button
+  // Toggle buttons
   if ($connectButton && $disconnectButton) {
-    console.log(`[DEBUG] ${providerId} - Updating buttons. isConnected:`, isConnected);
-
     if (isConnected) {
-      // Hide connect button, show disconnect button
       $connectButton.classList.add('d-none');
       $disconnectButton.classList.remove('d-none');
-      console.log(`[DEBUG] ${providerId} - Showing disconnect button`);
     } else {
-      // Show connect button, hide disconnect button
       $connectButton.classList.remove('d-none');
       $disconnectButton.classList.add('d-none');
-      console.log(`[DEBUG] ${providerId} - Showing connect button`);
     }
   }
 }
@@ -211,7 +160,6 @@ function getConnectionDisplayName(connection) {
     return 'Unknown';
   }
 
-  // Try different fields based on provider
   return connection.identity.global_name
     || connection.identity.username
     || connection.identity.name
@@ -223,35 +171,24 @@ function getConnectionDisplayName(connection) {
 // Initialize FormManager for a provider
 function initializeProviderForm(providerId) {
   const formId = `connection-form-${providerId}`;
-  const form = document.getElementById(formId);
+  const $form = document.getElementById(formId);
 
-  if (!form) {
-    console.warn(`Form not found for provider: ${providerId}`);
+  if (!$form) {
     return;
   }
 
-  // Skip if already initialized
   if (connectionForms.has(providerId)) {
-    console.log(`FormManager already initialized for ${providerId}`);
     return;
   }
 
-  console.log(`Initializing FormManager for ${providerId}`);
-
   const formManager = new FormManager(`#${formId}`, {
     submittingText: 'Connecting...',
   });
 
-  // Store the FormManager instance
   connectionForms.set(providerId, formManager);
 
-  // Listen for state changes to update button after FormManager is ready
   formManager.on('statechange', ({ state }) => {
-    console.log(`[DEBUG] ${providerId} - FormManager state changed to:`, state);
-
-    // When FormManager transitions to ready, update the button status
     if (state === 'ready') {
-      console.log(`[DEBUG] ${providerId} - FormManager is ready, updating button status`);
       const userConnection = accountData?.oauth2?.[providerId];
       const providerSettings = appData?.oauth2?.[providerId];
       updateProviderStatus(providerId, userConnection, providerSettings);
@@ -260,18 +197,14 @@ function initializeProviderForm(providerId) {
 
   formManager.on('submit', async ({ data, $submitButton }) => {
     const provider = data.provider;
-
-    // Determine action from the clicked button's data-action attribute
     const action = $submitButton?.getAttribute('data-action');
 
-    console.log(`[DEBUG] ${providerId} - Form submitted. Action:`, action, 'Provider:', provider);
-
     if (action === 'connect') {
       await handleConnect(provider);
     } else if (action === 'disconnect') {
       const success = await handleDisconnect(provider);
+
       if (success) {
-        // Get provider settings to pass for description display
         const providerSettings = appData?.oauth2?.[provider];
         updateProviderStatus(provider, null, providerSettings);
       }
@@ -282,30 +215,25 @@ function initializeProviderForm(providerId) {
 // Handle connect action
 async function handleConnect(providerId) {
   const provider = appData?.oauth2?.[providerId];
+
   if (!provider || provider.enabled === false) {
     throw new Error('This connection service is not available.');
   }
 
-  // Get scope from provider settings (pass as array)
-  const scope = provider.scope || [];
+  // Build URL with query params for GET request
+  // Don't send scope - let the backend use the provider's default scopes
+  const url = new URL(getApiUrl());
+  url.searchParams.set('provider', providerId);
+  url.searchParams.set('action', 'authorize');
+  url.searchParams.set('redirect', 'false');
 
-  const response = await authorizedFetch(getApiUrl(), {
-    method: 'POST',
+  const response = await authorizedFetch(url.toString(), {
+    method: 'GET',
     timeout: 30000,
     response: 'json',
     tries: 2,
-    body: {
-      redirect: false,
-      provider: providerId,
-      state: 'authorize',
-      scope: scope,
-      referrer: window.location.href,
-    },
   });
 
-  console.log('OAuth connect response:', response);
-
-  // For authorize requests, server returns an object with URL to redirect to
   if (response.url) {
     window.location.href = response.url;
   } else {
@@ -317,50 +245,36 @@ async function handleConnect(providerId) {
 async function handleDisconnect(providerId) {
   const providerName = providerId.charAt(0).toUpperCase() + providerId.slice(1);
 
-  // Wait 1 ms
   await new Promise(resolve => setTimeout(resolve, 1));
 
-  // Confirm disconnection
   if (!confirm(`Are you sure you want to disconnect your ${providerName} account?`)) {
     throw new Error('Disconnection cancelled');
   }
 
-  // Get provider settings for scope (pass as array)
-  const provider = appData?.oauth2?.[providerId] || {};
-  const scope = provider.scope || [];
+  // Build URL with query params for DELETE request
+  const url = new URL(getApiUrl());
+  url.searchParams.set('provider', providerId);
 
-  const response = await authorizedFetch(getApiUrl(), {
-    method: 'POST',
+  const response = await authorizedFetch(url.toString(), {
+    method: 'DELETE',
     timeout: 30000,
     response: 'json',
     tries: 2,
-    body: {
-      redirect: false,
-      provider: providerId,
-      state: 'deauthorize',
-      scope: scope,
-      referrer: window.location.href,
-    },
   });
 
-  console.log('OAuth disconnect response:', response);
-
   if (response.success) {
-    // Update local account data
     if (accountData.oauth2 && accountData.oauth2[providerId]) {
       delete accountData.oauth2[providerId];
     }
 
-    // Return success
     return true;
-  } else {
-    throw new Error(response.message || 'Failed to disconnect');
   }
+
+  throw new Error(response.message || 'Failed to disconnect');
 }
 
 // Called when section is shown
 export function onShow() {
-  // Refresh connections display when section is shown
   if (accountData && appData) {
     displayConnections();
   }

package/dist/assets/js/pages/account/sections/delete.js

@@ -62,13 +62,6 @@ function setupDeleteAccountForm() {
       throw new Error('Account deletion cancelled. You must type "DELETE" exactly to confirm.');
     }
 
-    // Final confirmation
-    const finalConfirm = confirm('This is your last chance to cancel.\n\nAre you sure you want to permanently delete your account?');
-
-    if (!finalConfirm) {
-      throw new Error('Account deletion cancelled.');
-    }
-
     // Send delete request to server
     const response = await authorizedFetch(`${webManager.getApiUrl()}/backend-manager/user`, {
       method: 'DELETE',
@@ -108,4 +101,4 @@ export async function loadData() {
 // Called when section is shown
 export function onShow() {
   // Nothing needed
-}
+}

package/dist/assets/js/pages/oauth2/index.js

@@ -1,125 +1,74 @@
 // Libraries
 import authorizedFetch from '__main_assets__/js/libs/authorized-fetch.js';
+
 let webManager = null;
 
 // Module
-export default (Manager, options) => {
+export default (Manager) => {
   return new Promise(async function (resolve) {
-    // Set webManager
     webManager = Manager.webManager;
 
-    // Initialize when DOM is ready
     await webManager.dom().ready();
 
-    // Wait for auth state to be determined before handling OAuth callback
-    // This is REQUIRED because authorizedFetch needs auth.currentUser to be available
+    // Wait for auth state before handling callback
+    // Required because authorizedFetch needs auth.currentUser
     webManager.auth().listen({ once: true }, () => {
-      // Handle OAuth callback after auth state is known
       handleOAuthCallback();
     });
 
-    // Resolve after initialization
     return resolve();
   });
 };
 
-// Parse and validate OAuth callback
+// Handle OAuth callback
 async function handleOAuthCallback() {
-  const $loading = document.getElementById('oauth2-loading');
-  const $result = document.getElementById('oauth2-result');
   const $provider = document.getElementById('oauth2-provider');
-  const $errorMessage = document.getElementById('error-message');
-  const $returnButton = document.getElementById('return-button');
-  const $resultSuccess = document.getElementById('result-success');
-  const $resultError = document.getElementById('result-error');
 
   try {
-    // Get URL parameters
     const urlParams = new URLSearchParams(window.location.search);
     const code = urlParams.get('code');
-    const state = urlParams.get('state');
+    const encryptedState = urlParams.get('state');
     const error = urlParams.get('error');
     const errorDescription = urlParams.get('error_description');
 
-    // Check for OAuth errors
+    // Check for OAuth errors from provider
     if (error) {
       throw new Error(errorDescription || error || 'OAuth authorization was denied');
     }
 
-    // Validate required parameters
     if (!code) {
       throw new Error('Missing authorization code');
     }
 
-    if (!state) {
+    if (!encryptedState) {
       throw new Error('Missing state parameter');
     }
 
-    // Parse state
-    let stateParsed;
-    try {
-      stateParsed = JSON.parse(decodeURIComponent(state));
-    } catch (e) {
-      console.error('Failed to parse state:', e);
-      throw new Error('Invalid state parameter');
-    }
-
-    console.log('OAuth callback state:', stateParsed);
-
-    // Validate state
-    if (!stateParsed.provider) {
-      throw new Error('Missing provider in state');
-    }
-
-    if (!stateParsed.serverUrl) {
-      throw new Error('Missing server URL');
-    }
-
-    // Update provider name
-    const providerName = capitalizeFirstLetter(stateParsed.provider);
-    $provider.textContent = providerName;
-
-    // Validate redirect URL
-    if (stateParsed.redirectUrl && !webManager.isValidRedirectUrl(stateParsed.redirectUrl)) {
-      throw new Error('Invalid redirect URL');
-    }
-
-    // Build tokenize payload
-    const payload = {
-      state: 'tokenize',
-      provider: stateParsed.provider,
-      code: code
-    };
-
-    // Add any additional OAuth parameters
-    urlParams.forEach((value, key) => {
-      if (key !== 'state' && key !== 'code') {
-        payload[key] = value;
-      }
-    });
+    // Update provider display (we can't read encrypted state, so use generic text)
+    $provider.textContent = 'Provider';
 
-    console.log('Tokenize payload:', payload);
+    // Build API URL using webManager (no need to read from state)
+    const apiUrl = `${webManager.getApiUrl()}/backend-manager/user/oauth2`;
 
-    // Build the RESTful URL (replace /backend-manager with /backend-manager/user/oauth2)
-    const serverUrl = stateParsed.serverUrl.replace(/\/backend-manager\/?$/, '/backend-manager/user/oauth2');
-
-    // Call server to complete OAuth flow
-    const response = await authorizedFetch(serverUrl, {
+    // Send tokenize request with encrypted state
+    // Note: tries=1 because auth codes can only be used once
+    const response = await authorizedFetch(apiUrl, {
       method: 'POST',
       timeout: 60000,
       response: 'json',
-      tries: 2,
-      body: payload,
+      tries: 1,
+      body: {
+        action: 'tokenize',
+        code: code,
+        encryptedState: encryptedState,
+      },
     });
 
-    console.log('Tokenize response:', response);
-
     if (!response.success) {
       throw new Error(response.message || 'Failed to complete authorization');
     }
 
-    // Show success
-    showSuccess(stateParsed.redirectUrl || stateParsed.referrer || '/account#connections');
+    showSuccess();
 
   } catch (error) {
     console.error('OAuth callback error:', error);
@@ -128,19 +77,18 @@ async function handleOAuthCallback() {
 }
 
 // Show success state
-function showSuccess(redirectUrl) {
+function showSuccess() {
   const $loading = document.getElementById('oauth2-loading');
   const $result = document.getElementById('oauth2-result');
   const $resultSuccess = document.getElementById('result-success');
 
-  // Hide loading, show result
   $loading.classList.add('d-none');
   $result.classList.remove('d-none');
   $resultSuccess.classList.remove('d-none');
 
-  // Redirect after delay
+  // Redirect to account page after delay
   setTimeout(() => {
-    window.location.href = redirectUrl;
+    window.location.href = '/account#connections';
   }, 500);
 }
 
@@ -152,32 +100,12 @@ function showError(message) {
   const $errorMessage = document.getElementById('error-message');
   const $returnButton = document.getElementById('return-button');
 
-  // Hide loading, show error
   $loading.classList.add('d-none');
   $result.classList.remove('d-none');
   $resultError.classList.remove('d-none');
 
-  // Set error message
   $errorMessage.textContent = message;
 
-  // Set return button href
-  const urlParams = new URLSearchParams(window.location.search);
-  const state = urlParams.get('state');
-
-  if (state) {
-    try {
-      const state = JSON.parse(decodeURIComponent(state));
-      if (state.referrer) {
-        $returnButton.href = state.referrer;
-      }
-    } catch (e) {
-      // Use default
-    }
-  }
-}
-
-// Capitalize first letter
-function capitalizeFirstLetter(string) {
-  if (!string) return '';
-  return string.charAt(0).toUpperCase() + string.slice(1);
+  // Default return URL
+  $returnButton.href = '/account#connections';
 }

package/dist/assets/themes/bootstrap/overrides/_avatars.scss

@@ -9,12 +9,16 @@
 // ============================================
 $avatar-sizes: (
   null: 3rem,    // default
+  2xs: 0.5rem,
   xs: 1.5rem,
   sm: 2rem,
   md: 2.5rem,
   lg: 3.5rem,
   xl: 5rem,
-  xxl: 7.5rem
+  2xl: 7.5rem,
+  3xl: 10rem,
+  4xl: 12.5rem,
+  5xl: 15rem
 ) !default;
 
 // ============================================

package/dist/assets/themes/bootstrap/overrides/_buttons-adaptive.scss

@@ -3,93 +3,66 @@
 // =============================================================================
 // Buttons that automatically flip between light/dark styles based on theme.
 // These are universal utilities available to all UJ themes.
-// Note: Cannot use @extend with Bootstrap classes due to module scoping,
-// so we use CSS custom properties directly.
+// Uses CSS custom properties from _color-shades.scss for hover/active states.
 
 // ============================================
-// Button Style Mixins (DRY)
+// Solid Adaptive Buttons
 // ============================================
-@mixin btn-dark-styles {
+// Dark button in light mode, light button in dark mode
+.btn-adaptive {
   --bs-btn-color: #fff;
   --bs-btn-bg: var(--bs-dark);
   --bs-btn-border-color: var(--bs-dark);
   --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #1c1c1c;
-  --bs-btn-hover-border-color: #1a1a1a;
-  --bs-btn-focus-shadow-rgb: 66, 70, 73;
+  --bs-btn-hover-bg: var(--bs-dark-hover);
+  --bs-btn-hover-border-color: var(--bs-dark-active);
   --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: #1a1a1a;
-  --bs-btn-active-border-color: #181818;
-  --bs-btn-disabled-color: #fff;
-  --bs-btn-disabled-bg: var(--bs-dark);
-  --bs-btn-disabled-border-color: var(--bs-dark);
+  --bs-btn-active-bg: var(--bs-dark-active);
+  --bs-btn-active-border-color: var(--bs-dark-active);
 }
 
-@mixin btn-light-styles {
+[data-bs-theme="dark"] .btn-adaptive {
   --bs-btn-color: #000;
   --bs-btn-bg: var(--bs-light);
   --bs-btn-border-color: var(--bs-light);
   --bs-btn-hover-color: #000;
-  --bs-btn-hover-bg: #e9ecef;
-  --bs-btn-hover-border-color: #e2e6ea;
-  --bs-btn-focus-shadow-rgb: 211, 212, 213;
+  --bs-btn-hover-bg: var(--bs-light-hover);
+  --bs-btn-hover-border-color: var(--bs-light-active);
   --bs-btn-active-color: #000;
-  --bs-btn-active-bg: #e2e6ea;
-  --bs-btn-active-border-color: #dae0e5;
-  --bs-btn-disabled-color: #000;
-  --bs-btn-disabled-bg: var(--bs-light);
-  --bs-btn-disabled-border-color: var(--bs-light);
+  --bs-btn-active-bg: var(--bs-light-active);
+  --bs-btn-active-border-color: var(--bs-light-active);
 }
 
-@mixin btn-outline-dark-styles {
+// ============================================
+// Outline Adaptive Buttons
+// ============================================
+.btn-outline-adaptive {
   --bs-btn-color: var(--bs-dark);
+  --bs-btn-bg: transparent;
   --bs-btn-border-color: var(--bs-dark);
   --bs-btn-hover-color: #fff;
   --bs-btn-hover-bg: var(--bs-dark);
   --bs-btn-hover-border-color: var(--bs-dark);
-  --bs-btn-focus-shadow-rgb: 33, 37, 41;
   --bs-btn-active-color: #fff;
   --bs-btn-active-bg: var(--bs-dark);
   --bs-btn-active-border-color: var(--bs-dark);
-  --bs-btn-disabled-color: var(--bs-dark);
-  --bs-btn-disabled-border-color: var(--bs-dark);
+
+  color: var(--bs-body-color);
+  border-color: var(--bs-dark);
 }
 
-@mixin btn-outline-light-styles {
+[data-bs-theme="dark"] .btn-outline-adaptive {
   --bs-btn-color: var(--bs-light);
+  --bs-btn-bg: transparent;
   --bs-btn-border-color: var(--bs-light);
   --bs-btn-hover-color: #000;
   --bs-btn-hover-bg: var(--bs-light);
   --bs-btn-hover-border-color: var(--bs-light);
-  --bs-btn-focus-shadow-rgb: 248, 249, 250;
   --bs-btn-active-color: #000;
   --bs-btn-active-bg: var(--bs-light);
   --bs-btn-active-border-color: var(--bs-light);
-  --bs-btn-disabled-color: var(--bs-light);
-  --bs-btn-disabled-border-color: var(--bs-light);
-}
 
-// ============================================
-// Solid Adaptive Buttons
-// ============================================
-// Dark button in light mode, light button in dark mode
-.btn-adaptive {
-  @include btn-dark-styles;
-}
-
-[data-bs-theme="dark"] .btn-adaptive {
-  @include btn-light-styles;
-}
-
-// ============================================
-// Outline Adaptive Buttons
-// ============================================
-.btn-outline-adaptive {
-  @include btn-outline-dark-styles;
-}
-
-[data-bs-theme="dark"] .btn-outline-adaptive {
-  @include btn-outline-light-styles;
+  border-color: var(--bs-light);
 }
 
 // ============================================
@@ -97,19 +70,59 @@
 // ============================================
 // The opposite of adaptive - light in light mode, dark in dark mode
 .btn-adaptive-inverse {
-  @include btn-light-styles;
+  --bs-btn-color: #000;
+  --bs-btn-bg: var(--bs-light);
+  --bs-btn-border-color: var(--bs-light);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: var(--bs-light-hover);
+  --bs-btn-hover-border-color: var(--bs-light-active);
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: var(--bs-light-active);
+  --bs-btn-active-border-color: var(--bs-light-active);
 }
 
 [data-bs-theme="dark"] .btn-adaptive-inverse {
-  @include btn-dark-styles;
+  --bs-btn-color: #fff;
+  --bs-btn-bg: var(--bs-dark);
+  --bs-btn-border-color: var(--bs-dark);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--bs-dark-hover);
+  --bs-btn-hover-border-color: var(--bs-dark-active);
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: var(--bs-dark-active);
+  --bs-btn-active-border-color: var(--bs-dark-active);
 }
 
+// ============================================
+// Outline Inverse Adaptive Buttons
+// ============================================
 .btn-outline-adaptive-inverse {
-  @include btn-outline-light-styles;
+  --bs-btn-color: var(--bs-light);
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: var(--bs-light);
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: var(--bs-light);
+  --bs-btn-hover-border-color: var(--bs-light);
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: var(--bs-light);
+  --bs-btn-active-border-color: var(--bs-light);
+
+  color: var(--bs-body-color);
+  border-color: var(--bs-light);
 }
 
 [data-bs-theme="dark"] .btn-outline-adaptive-inverse {
-  @include btn-outline-dark-styles;
+  --bs-btn-color: var(--bs-dark);
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: var(--bs-dark);
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: var(--bs-dark);
+  --bs-btn-hover-border-color: var(--bs-dark);
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: var(--bs-dark);
+  --bs-btn-active-border-color: var(--bs-dark);
+
+  border-color: var(--bs-dark);
 }
 
 // ============================================

package/dist/assets/themes/bootstrap/overrides/_color-shades.scss

@@ -0,0 +1,25 @@
+// =============================================================================
+// Color Shade CSS Custom Properties
+// =============================================================================
+// Provides hover/active shade variants for light and dark colors.
+// These are used by adaptive buttons and can be reused elsewhere.
+
+:root,
+[data-bs-theme="light"] {
+  // Dark color shades (for hover/active states on dark buttons)
+  --bs-dark-hover: #3a3a44;
+  --bs-dark-active: #34343e;
+
+  // Light color shades (for hover/active states on light buttons)
+  --bs-light-hover: #d3d6db;
+  --bs-light-active: #c8ccd1;
+}
+
+[data-bs-theme="dark"] {
+  // In dark mode, the values are the same but semantic meaning is swapped
+  --bs-dark-hover: #3a3a44;
+  --bs-dark-active: #34343e;
+
+  --bs-light-hover: #d3d6db;
+  --bs-light-active: #c8ccd1;
+}

package/dist/assets/themes/bootstrap/overrides/_index.scss

@@ -8,6 +8,7 @@
 @use 'buttons-adaptive';
 
 // Colors
+@use 'color-shades';
 @use 'soft-colors';
 
 // Components

package/dist/assets/themes/classy/css/components/_buttons.scss

@@ -110,11 +110,10 @@
 // Outline Button Overrides
 // ============================================
 [class*="btn-outline-"] {
-  background: transparent !important;
   border-width: 2px !important;
   border-style: solid !important;
 
-  &:not(:hover) {
+  &:not(:hover):not(:active):not(.active) {
     background: transparent !important;
   }
 }

package/dist/build.js

@@ -3,7 +3,7 @@ const path = require('path');
 const jetpack = require('fs-jetpack');
 const fs = require('fs');
 const JSON5 = require('json5');
-const argv = require('yargs').argv;
+const argv = require('yargs')(process.argv.slice(2)).parseSync();
 const { force, execute } = require('node-powertools');
 const yaml = require('js-yaml');
 

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/account/index.html

@@ -208,7 +208,7 @@ badges:
 
       <!-- Profile Section -->
       <section id="profile-section" class="account-section d-none">
-        <h2 class="h3 mb-4" >My Profile</h2>
+        <h2 class="h3 mb-4" >My profile</h2>
 
         <form id="profile-form" novalidate>
           <!-- Avatar and Edit Button -->
@@ -244,7 +244,7 @@ badges:
           <!-- Account Details Section -->
           <div class="card mb-3">
             <div class="card-body">
-              <h5 class="card-title text-body mb-3">Account Details</h5>
+              <h5 class="card-title text-body mb-3">Account details</h5>
 
               <!-- Email and UID Fields Row -->
               <div class="row g-3">
@@ -276,7 +276,7 @@ badges:
           <!-- Personal Information Section -->
           <div class="card mb-3">
             <div class="card-body">
-              <h5 class="card-title text-body mb-3">Personal Information</h5>
+              <h5 class="card-title text-body mb-3">Personal information</h5>
 
               <!-- Name Fields Row -->
               <div class="row g-3 mb-3">
@@ -748,7 +748,7 @@ badges:
 
         <div class="card">
           <div class="card-body">
-            <h5 class="card-title">Email Notifications</h5>
+            <h5 class="card-title">Email notifications</h5>
 
             <div class="form-check form-switch mb-3">
               <input class="form-check-input" type="checkbox" id="marketing-emails" checked>
@@ -779,12 +779,12 @@ badges:
 
       <!-- Security Section -->
       <section id="security-section" class="account-section d-none">
-        <h2 class="h3 mb-4" >Security and Data</h2>
+        <h2 class="h3 mb-4" >Security and data</h2>
 
         <!-- Sign-in Methods Section -->
         <div class="card mb-3">
           <div class="card-body">
-            <h5 class="card-title">Sign-in Methods</h5>
+            <h5 class="card-title">Sign-in methods</h5>
             <p class="text-muted mb-0">Manage how you sign in to your account. You can connect multiple methods for added convenience and security.</p>
 
             <div id="signin-methods-list">
@@ -846,7 +846,7 @@ badges:
         <div class="card">
           <div class="card-body">
             <div class="d-flex justify-content-between align-items-center mb-3">
-              <h5 class="card-title mb-0">Active Sessions</h5>
+              <h5 class="card-title mb-0">Active sessions</h5>
               <form id="signout-all-sessions-form" class="d-inline" novalidate>
                 <input type="hidden" name="action" value="signout-all">
                 <button type="submit" class="btn btn-outline-danger btn-sm">
@@ -873,11 +873,11 @@ badges:
 
       <!-- Connections Section -->
       <section id="connections-section" class="account-section d-none">
-        <h2 class="h3 mb-4" >Connected Accounts</h2>
+        <h2 class="h3 mb-4" >Connected accounts</h2>
 
         <div class="card">
           <div class="card-body">
-            <h5 class="card-title">Manage Connections</h5>
+            <h5 class="card-title">Manage connections</h5>
             <p class="text-muted mb-0">Connect your external accounts to access additional features.</p>
 
             <div id="connections-list" class="list-group list-group-flush">
@@ -933,14 +933,14 @@ badges:
 
       <!-- Billing Section -->
       <section id="billing-section" class="account-section d-none">
-        <h2 class="h3 mb-4" >Billing and Usage</h2>
+        <h2 class="h3 mb-4" >Billing and usage</h2>
 
         <div class="card mb-3">
           <div class="card-body">
             <div class="d-flex justify-content-between align-items-center mb-3">
               <div>
                 <h5 class="card-title mb-1 d-flex align-items-center">
-                  <span class="me-2">Current Plan</span>
+                  <span class="me-2">Current plan</span>
                   <span id="plan-status"></span>
                 </h5>
                 <p class="card-text mb-0">
@@ -980,7 +980,7 @@ badges:
         <div class="card">
           <div class="card-body">
             <div class="d-flex justify-content-between align-items-center mb-3">
-              <h5 class="card-title mb-0">Team Members</h5>
+              <h5 class="card-title mb-0">Team members</h5>
               <button class="btn btn-primary btn-sm" id="invite-team-member-btn">
                 {% uj_icon "user-plus", "me-2" %}
                 <span class="button-text">
@@ -1011,7 +1011,7 @@ badges:
         <!-- Referral Code Card -->
         <div class="card mb-3">
           <div class="card-body">
-            <h5 class="card-title">Your Referral Code</h5>
+            <h5 class="card-title">Your referral code</h5>
             <p class="card-text text-muted">Share your referral code with friends to earn rewards.</p>
 
             <div class="mb-0">
@@ -1030,17 +1030,17 @@ badges:
         <!-- Referrals Stats Card -->
         <div class="card">
           <div class="card-body">
-            <h5 class="card-title">Referral Statistics</h5>
+            <h5 class="card-title">Referral statistics</h5>
 
             <!-- Stats Summary -->
             <div class="row text-center mb-4">
               <div class="col">
                 <div class="h3 mb-0" id="total-referrals">0</div>
-                <div class="text-muted small">Total Referrals</div>
+                <div class="text-muted small">Total referrals</div>
               </div>
               <div class="col">
                 <div class="h3 mb-0" id="recent-referrals">0</div>
-                <div class="text-muted small">This Month</div>
+                <div class="text-muted small">This month</div>
               </div>
             </div>
 
@@ -1050,7 +1050,7 @@ badges:
                 <h2 class="accordion-header" id="referrals-list-heading">
                   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#referrals-list-collapse" aria-expanded="false" aria-controls="referrals-list-collapse">
                     <span class="me-2">{% uj_icon "users", "fa-sm" %}</span>
-                    View Referral Details
+                    View referral details
                     <span class="badge bg-primary ms-2" id="referrals-badge">0</span>
                   </button>
                 </h2>
@@ -1072,12 +1072,12 @@ badges:
 
       <!-- API Keys Section -->
       <section id="api-keys-section" class="account-section d-none">
-        <h2 class="h3 mb-4" >API Keys</h2>
+        <h2 class="h3 mb-4" >API keys</h2>
 
         <div class="card">
           <div class="card-body">
             <div class="d-flex justify-content-between align-items-center mb-3">
-              <h5 class="card-title mb-0">Your API Key</h5>
+              <h5 class="card-title mb-0">Your API key</h5>
               <form id="reset-api-key-form" class="d-inline" novalidate>
                 <button type="submit" class="btn btn-outline-danger btn-sm" id="reset-api-key-btn">
                   {% uj_icon "rotate", "me-1" %}
@@ -1091,7 +1091,7 @@ badges:
 
             <!-- API Key Display -->
             <div class="mb-3">
-              <label for="api-key-input" class="form-label small text-muted">Private API Key</label>
+              <label for="api-key-input" class="form-label small text-muted">Private API key</label>
               <div class="input-group">
                 <input type="text" class="form-control font-monospace" id="api-key-input" readonly value="Loading...">
                 <button type="button" class="btn btn-outline-adaptive" id="copy-api-key-btn">
@@ -1116,7 +1116,7 @@ badges:
 
       <!-- Delete Account Section (Hidden by default) -->
       <section id="delete-section" class="account-section d-none">
-        <h2 class="h3 mb-4 text-danger" >Delete Account</h2>
+        <h2 class="h3 mb-4 text-danger" >Delete account</h2>
 
         <div class="alert alert-danger">
           <h5 class="alert-heading">
@@ -1135,7 +1135,7 @@ badges:
 
         <div class="card border-danger">
           <div class="card-body">
-            <h5 class="card-title text-danger">Confirm Account Deletion</h5>
+            <h5 class="card-title text-danger">Confirm account deletion</h5>
 
             <form id="delete-account-form" novalidate>
               <div class="mb-3">

package/dist/defaults/dist/pages/test/libraries/bootstrap.html

@@ -453,6 +453,13 @@ meta:
     <button type="button" class="btn btn-outline-light">Light</button>
     <button type="button" class="btn btn-outline-dark">Dark</button>
 
+    <h3 class="mt-4 mb-3">Adaptive Buttons (Theme-Aware)</h3>
+    <p class="text-muted">These buttons automatically adapt to light/dark mode. Use instead of btn-light/btn-dark.</p>
+    <button type="button" class="btn btn-adaptive">Adaptive</button>
+    <button type="button" class="btn btn-outline-adaptive">Outline Adaptive</button>
+    <button type="button" class="btn btn-adaptive-inverse">Adaptive Inverse</button>
+    <button type="button" class="btn btn-outline-adaptive-inverse">Outline Adaptive Inverse</button>
+
     <h3 class="mt-4 mb-3">Button Sizes</h3>
     <button type="button" class="btn btn-primary btn-lg">Large button</button>
     <button type="button" class="btn btn-primary">Default button</button>

package/dist/gulp/tasks/defaults.js

@@ -8,7 +8,7 @@ const path = require('path');
 const { minimatch } = require('minimatch');
 const { template } = require('node-powertools');
 const createTemplateTransform = require('./utils/template-transform');
-const argv = require('yargs').argv;
+const argv = require('yargs')(process.argv.slice(2)).parseSync();
 const JSON5 = require('json5');
 
 // Load package

package/dist/gulp/tasks/sass.js

@@ -218,6 +218,10 @@ function sass(complete) {
           /^active$/,
           /^disabled$/,
 
+          // Buttons
+          // /^btn-outline-adaptive$/,
+          // /^btn-adaptive$/,
+
           // Accordion specific
           /^accordion/,
           /^collapsed$/,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultimate-jekyll-manager",
-  "version": "0.0.199",
+  "version": "0.0.201",
   "description": "Ultimate Jekyll dependency manager",
   "main": "dist/index.js",
   "exports": {
@@ -62,7 +62,7 @@
   "dependencies": {
     "@babel/core": "^7.28.6",
     "@babel/preset-env": "^7.28.6",
-    "@fullhuman/postcss-purgecss": "^7.0.2",
+    "@fullhuman/postcss-purgecss": "^8.0.0",
     "@minify-html/node": "^0.18.1",
     "@octokit/rest": "^22.0.1",
     "@popperjs/core": "^2.11.8",
@@ -71,7 +71,7 @@
     "babel-loader": "^10.0.0",
     "browser-sync": "^3.0.4",
     "chalk": "^5.6.2",
-    "cheerio": "^1.1.2",
+    "cheerio": "^1.2.0",
     "chrome-launcher": "^1.2.1",
     "dotenv": "^17.2.3",
     "fast-xml-parser": "^5.3.3",
@@ -84,25 +84,25 @@
     "gulp-responsive-modern": "^1.0.0",
     "gulp-sass": "^6.0.1",
     "html-minifier-terser": "^7.2.0",
-    "html-validate": "^10.5.0",
+    "html-validate": "^10.7.0",
     "itwcw-package-analytics": "^1.0.6",
-    "js-yaml": "^3.14.2",
+    "js-yaml": "^4.1.1",
     "json5": "^2.2.3",
-    "libsodium-wrappers": "^0.8.0",
-    "lodash": "^4.17.21",
+    "libsodium-wrappers": "^0.8.2",
+    "lodash": "^4.17.23",
     "minimatch": "^10.1.1",
     "node-powertools": "^2.3.2",
     "npm-api": "^1.0.1",
     "postcss": "^8.5.6",
-    "prettier": "^3.8.0",
-    "sass": "^1.97.2",
+    "prettier": "^3.8.1",
+    "sass": "^1.97.3",
     "spellchecker": "^3.7.1",
     "through2": "^4.0.2",
     "web-manager": "^4.1.6",
     "webpack": "^5.104.1",
     "wonderful-fetch": "^1.3.4",
     "wonderful-version": "^1.3.2",
-    "yargs": "^17.7.2"
+    "yargs": "^18.0.0"
   },
   "peerDependencies": {
     "gulp": "^5.0.1"