ultimate-jekyll-manager 1.0.18 → 1.0.20

package/CHANGELOG.md

@@ -14,6 +14,30 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - `Fixed` for any bug fixes.
 - `Security` in case of vulnerabilities.
 
+---
+## [1.0.20] - 2026-04-03
+### Fixed
+- Fix contact form sending `user: map[]` to Slapform by replacing nested `user` object with flat `uid` string field
+- Autofill visible email input from auth state via `data-wm-bind="@value auth.user.email"` for logged-in users
+- Remove redundant hidden `auth.user.email` field
+
+## [1.0.19] - 2026-04-02
+### Security
+- Comprehensive XSS hardening: escape all dynamic data in innerHTML with `webManager.utilities().escapeHTML()`
+- Remove all local `escapeHtml` implementations — single source of truth via web-manager
+- Rebuild `showToast()` and `showNotification()` to use `textContent` instead of `innerHTML`
+- Add `javascript:` protocol blocking in web-manager `@attr` binding directive
+- Add URL scheme validation for vert.js postMessage handler
+- Fix double-escaping in `showSuccess()`/`showError()`/`showNotification()` callers
+- Document zero-trust XSS policy in CLAUDE.md and skills
+
+### Changed
+- Refactor webManager from passed parameter to direct singleton import across all modules
+- Remove `init(wm)` pattern and Manager parameter passing throughout page modules
+- Calendar core/events/renderer use direct imports instead of constructor injection
+- Fix file structure and spacing across all JS files (consistent Libraries/Module pattern)
+- Fix alternatives layout markdown code block rendering issue
+
 ---
 ## [1.0.18] - 2026-03-30
 ### Changed

package/CLAUDE.md

@@ -360,14 +360,11 @@ All page modules must follow this standardized pattern:
  */
 
 // Libraries
-let webManager = null;
+import webManager from 'web-manager';
 
 // Module
-export default (Manager) => {
+export default () => {
   return new Promise(async function (resolve) {
-    // Shortcuts
-    webManager = Manager.webManager;
-
     // Initialize when DOM is ready
     await webManager.dom().ready();
 
@@ -386,9 +383,63 @@ function helper1() {
 ```
 
 **Key Points:**
+- `web-manager` is a singleton — `import webManager from 'web-manager'` returns the same initialized instance everywhere. No need to receive it via params or store in module-level variables.
 - Helpers are defined outside the main export function
-- Use `webManager` shortcuts for common operations
 - Always wait for DOM ready before manipulating elements
+- Use `webManager.utilities().escapeHTML()` for XSS prevention — do NOT write your own escape function
+
+## XSS Prevention (ZERO TRUST — MANDATORY)
+
+**TREAT ALL DYNAMIC DATA AS UNTRUSTED.** This is a zero-trust policy: any value that did not come directly from a hardcoded literal in the source file MUST be escaped before being inserted into the DOM via `innerHTML` or attribute interpolation.
+
+This includes — but is not limited to:
+- Firestore document fields (user names, emails, IDs, descriptions, etc.)
+- API response data
+- URL parameters (`location.search`, `URLSearchParams`)
+- User input from form fields
+- OAuth-provided values (displayName, email from Google/GitHub)
+- Any variable whose origin is not a hardcoded source-code constant
+
+### The Rule
+```javascript
+// ✅ ALWAYS escape dynamic data before innerHTML
+$el.innerHTML = `<p>${webManager.utilities().escapeHTML(data.title)}</p>`;
+$el.innerHTML = `<a href="${webManager.utilities().escapeHTML(url)}">${webManager.utilities().escapeHTML(label)}</a>`;
+
+// ✅ textContent is always safe — no escaping needed
+$el.textContent = data.title;
+
+// ❌ NEVER inject dynamic data raw into innerHTML
+$el.innerHTML = `<p>${data.title}</p>`;
+$el.innerHTML = `<a href="${url}">${label}</a>`;
+```
+
+### NEVER Write Your Own Escape Function
+Do NOT create a local `escapeHtml` function or any variant. The ONLY allowed escape method is:
+```javascript
+webManager.utilities().escapeHTML(str)
+```
+
+### When Building DOM Programmatically
+Prefer `document.createElement` + `textContent` for plain text nodes — it is inherently safe:
+```javascript
+const $el = document.createElement('div');
+$el.textContent = data.message; // Safe — no escaping needed
+```
+
+Only use `innerHTML` when you need actual HTML structure (tags, classes, etc.), and escape every dynamic value in it.
+
+### Do NOT Escape Values Passed to textContent-Based APIs
+`showNotification()`, `formManager.showSuccess()`, `formManager.showError()`, and `textContent` assignments use safe text insertion internally. Pre-escaping these causes double-encoding (e.g., `We'll` displays as `We&#039;ll`).
+
+```javascript
+// ✅ CORRECT — these APIs use textContent internally, so they're already safe
+webManager.utilities().showNotification('Thank you! We\'ll be in touch.', 'success');
+formManager.showSuccess('Message sent successfully!');
+
+// ❌ WRONG — double-escapes
+webManager.utilities().showNotification(webManager.utilities().escapeHTML(message), 'success');
+```
 
 ## Layouts and Pages
 
@@ -976,15 +1027,22 @@ webManager.uj().appearance.clear();      // Clear saved preference
 
 ### WebManager
 
-Custom library for site management functionality.
+Custom library for site management functionality. **It's a singleton** — import it directly from any file:
+
+```javascript
+import webManager from 'web-manager';
+```
+
+This returns the same initialized instance everywhere. Do NOT pass it via params, store in module-level variables, or create new instances.
 
 **Documentation:** `/Users/ian/Developer/Repositories/ITW-Creative-Works/web-manager/README.md`
 
 **Available Utilities:**
 - `webManager.auth()` - Authentication management
-- `webManager.utilities()` - Utility functions
+- `webManager.utilities()` - Utility functions (escapeHTML, clipboardCopy, etc.)
 - `webManager.sentry()` - Error tracking
 - `webManager.dom()` - DOM manipulation
+- `webManager.utilities().escapeHTML(text)` - **XSS prevention** — use this instead of writing your own escape function
 
 **Important:** Always check the source code or README before assuming a function exists. Do not guess at API methods.
 

package/dist/assets/css/pages/download/index.scss

@@ -27,7 +27,7 @@
 }
 
 // Mac platform folder styling
-[data-platform="mac"] .folder-icon {
+.platform-instructions[data-platform="mac"] .folder-icon {
   background: linear-gradient(135deg, #6BB6FF 0%, #4A9FFF 100%);
 
   &::before {
@@ -245,22 +245,94 @@
   }
 }
 
+// Folder/app double-click animation (step 1)
+.folder-click-target {
+  .pointer-icon {
+    animation: folder-mouse-move 3s ease-in-out infinite;
+  }
+
+  .click-pulse {
+    animation: folder-click-pulse 3s ease-in-out infinite;
+  }
+}
+
+@keyframes folder-mouse-move {
+  0% {
+    transform: translate(60px, -20px);
+  }
+  20%, 80% {
+    transform: translate(0, 0);
+  }
+  81%, 100% {
+    transform: translate(60px, -20px);
+  }
+}
+
+@keyframes folder-click-pulse {
+  0%, 25% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  // First click
+  30%, 38% {
+    opacity: 0.8;
+    transform: scale(1.3);
+  }
+  42% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  // Second click
+  48%, 56% {
+    opacity: 0.8;
+    transform: scale(1.3);
+  }
+  62%, 100% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+}
+
 // Instruction step container
 .instruction-step-container {
   min-height: 200px;
 }
 
-// Steps slideshow
+// Steps slideshow — uses a grid stack so all slides overlap in the same cell,
+// making the container always the height of the tallest slide (no jitter).
 .steps-slideshow {
   position: relative;
 
-  .step-slide {
-    display: none;
-    text-align: center;
-    animation: step-fade-in 0.35s ease-out;
-
-    &.active {
-      display: block;
+  .steps-slideshow-slides {
+    display: grid;
+
+    > .step-slide {
+      grid-area: 1 / 1;
+      text-align: center;
+      visibility: hidden;
+      opacity: 0;
+      transition: opacity 0.35s ease-out;
+      display: flex;
+      flex-direction: column;
+
+      &.active {
+        visibility: visible;
+        opacity: 1;
+      }
+
+      .step-number-badge,
+      .step-title {
+        align-self: center;
+      }
+
+      // The last child (visual content area) grows to fill remaining space
+      // and centers its content vertically
+      > :last-child {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
     }
   }
 }
@@ -283,7 +355,7 @@
 // Step title
 .step-title {
   font-weight: 600;
-  margin-bottom: 0.25rem;
+  margin-bottom: 1rem;
 }
 
 // Navigation bar

package/dist/assets/css/pages/extension/installed/index.scss

@@ -6,10 +6,6 @@
   animation: success-appear 0.6s ease-out;
 }
 
-body {
-  color: red !important;
-}
-
 @keyframes success-appear {
   0% {
     transform: scale(0);
@@ -24,67 +20,6 @@ body {
   }
 }
 
-// Arrow container positioning and animation
-.extension-arrow-container {
-  top: 80px;
-  right: 40px;
-  animation: arrow-container-appear 0.5s ease-out 0.3s both;
-
-  @media (max-width: 991px) {
-    right: 20px;
-    top: 70px;
-  }
-
-  @media (max-width: 576px) {
-    right: 10px;
-    top: 60px;
-
-    .extension-arrow svg {
-      width: 50px;
-      height: 70px;
-    }
-  }
-}
-
-@keyframes arrow-container-appear {
-  0% {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-// Arrow bounce animation
-.extension-arrow {
-  animation: arrow-bounce 1.5s ease-in-out infinite;
-}
-
-@keyframes arrow-bounce {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-8px);
-  }
-}
-
-// Label glow animation
-.extension-arrow-label {
-  animation: label-glow 2s ease-in-out infinite;
-}
-
-@keyframes label-glow {
-  0%, 100% {
-    box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.4);
-  }
-  50% {
-    box-shadow: 0 4px 25px rgba(var(--bs-primary-rgb), 0.7);
-  }
-}
-
 // URL bar min width
 .extension-url-bar {
   min-width: 100px;
@@ -111,6 +46,13 @@ body {
   object-fit: contain;
 }
 
+// Toolbar brandmark (pinned state in step 4)
+.extension-toolbar-brandmark {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+}
+
 // ============================================================================
 // Click Indicator Animation (same pattern as download page)
 // ============================================================================
@@ -188,15 +130,15 @@ body {
   }
 }
 
-// Step 2: Pin button - mouse moves to target, clicks, snaps back (delayed)
+// Step 3: Pin button - mouse moves to target, clicks, snaps back
 .extension-pin-target {
   .click-indicator {
     .pointer-icon {
-      animation: pin-mouse-move 2.5s ease-out infinite 1.5s;
+      animation: pin-mouse-move 2.5s ease-out infinite;
     }
 
     .click-pulse {
-      animation: pin-click-pulse 2.5s ease-out infinite 1.5s;
+      animation: pin-click-pulse 2.5s ease-out infinite;
     }
   }
 }
@@ -238,3 +180,121 @@ body {
     transform: translate(-5px, -12px) scale(0.5);
   }
 }
+
+// ============================================================================
+// Steps Slideshow (mirrored from download page)
+// ============================================================================
+
+// Instruction step container
+.instruction-step-container {
+  min-height: 200px;
+}
+
+// Steps slideshow — uses a grid stack so all slides overlap in the same cell,
+// making the container always the height of the tallest slide (no jitter).
+.steps-slideshow {
+  position: relative;
+
+  .steps-slideshow-slides {
+    display: grid;
+
+    > .step-slide {
+      grid-area: 1 / 1;
+      text-align: center;
+      visibility: hidden;
+      opacity: 0;
+      transition: opacity 0.35s ease-out;
+      display: flex;
+      flex-direction: column;
+
+      &.active {
+        visibility: visible;
+        opacity: 1;
+      }
+
+      .step-number-badge,
+      .step-title {
+        align-self: center;
+      }
+
+      // The last child (visual content area) grows to fill remaining space
+      // and centers its content vertically
+      > :last-child {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+    }
+  }
+}
+
+// Big step number badge
+.step-number-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--bs-primary);
+  color: #fff;
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+}
+
+// Step title
+.step-title {
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+// Navigation bar
+.steps-slideshow-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 1.25rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--bs-border-color);
+}
+
+// Progress dots
+.steps-dots {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+
+  .step-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--bs-border-color);
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    transition: background 0.2s, transform 0.2s;
+
+    &.active {
+      background: var(--bs-primary);
+      transform: scale(1.3);
+    }
+
+    &:hover:not(.active) {
+      background: var(--bs-secondary);
+    }
+  }
+}
+
+// Slide fade-in animation
+@keyframes step-fade-in {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

package/dist/assets/css/pages/payment/checkout/index.scss

@@ -37,10 +37,12 @@
   overflow: visible;
 }
 
-.btn-check:checked + .btn {
+// Extra :checked specificity to beat classy theme's
+// .btn-check:checked:checked + [class*="btn-outline-"] { background: var(--bs-btn-active-bg) !important }
+.btn-check:checked:checked + .btn {
   border-color: var(--bs-primary) !important;
   color: var(--bs-primary) !important;
-  background-color: transparent !important;
+  background: transparent !important;
 
   // Checkmark circle turns primary when selected
   .rounded-circle {

package/dist/assets/js/core/appearance.js

@@ -2,19 +2,17 @@
  * Appearance Module
  * Handles theme appearance switching (dark, light, system)
  */
+import webManager from 'web-manager';
 
 // Constants
 const STORAGE_KEY = 'appearance.preference';
 const VALID_VALUES = ['dark', 'light', 'system'];
 
 // Module state
-let webManager = null;
 let mediaQuery = null;
 
 // Module
-export default (Manager) => {
-  // Shortcuts
-  webManager = Manager.webManager;
+export default () => {
 
   // Create appearance API
   const appearanceAPI = {

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

@@ -1,13 +1,11 @@
 import authorizedFetch from '__main_assets__/js/libs/authorized-fetch.js';
+import webManager from 'web-manager';
 
 // Constants
 const SIGNUP_MAX_AGE = 5 * 60 * 1000;
 
 // Auth Module
-export default function (Manager, options) {
-  // Shortcuts
-  const { webManager } = Manager;
-
+export default function () {
   // Get auth policy
   const config = webManager.config.auth.config;
   const policy = config.policy;
@@ -47,7 +45,7 @@ export default function (Manager, options) {
       console.log('[Auth] state changed:', state);
 
       // Set user ID for analytics tracking
-      setAnalyticsUserId(user, webManager);
+      setAnalyticsUserId(user);
 
       // Check if we're in the process of signing out
       if (authSignout === 'true' && user) {
@@ -61,7 +59,7 @@ export default function (Manager, options) {
         // User is authenticated
 
         // Send user signup metadata if account is new
-        await sendUserSignupMetadata(user, webManager);
+        await sendUserSignupMetadata(user);
 
         // Check if page requires user to be unauthenticated (e.g., signin page)
         if (policy === 'unauthenticated') {
@@ -160,7 +158,7 @@ function updateAuthLinks() {
   });
 }
 
-function setAnalyticsUserId(user, webManager) {
+function setAnalyticsUserId(user) {
   const userId = user?.uid;
   const email = user?.email;
   const metaPixelId = webManager.config.analytics?.meta;
@@ -206,7 +204,7 @@ function setAnalyticsUserId(user, webManager) {
 }
 
 // Send user metadata to server (affiliate, UTM params, etc.)
-async function sendUserSignupMetadata(user, webManager) {
+async function sendUserSignupMetadata(user) {
   try {
     // Skip on auth pages to avoid blocking redirect (metadata will be sent on destination page)
     const pagePath = document.documentElement.getAttribute('data-page-path');

package/dist/assets/js/core/complete.js

@@ -1,7 +1,5 @@
 // Page Loader Module - Handles page loading state indicator
-export default function (Manager, options) {
-  // Shortcuts
-  const { webManager } = Manager;
+export default function () {
   let removed = false;
 
   // Log

package/dist/assets/js/core/cookieconsent.js

@@ -1,7 +1,7 @@
+import webManager from 'web-manager';
+
 // Cookie Consent Module
-export default function (Manager, options) {
-  // Shortcuts
-  const { webManager } = Manager;
+export default function () {
 
   // Check if user has already consented
   const hasConsented = webManager.storage().get('cookies.consent.accepted') === true;

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

@@ -1,10 +1,9 @@
 // Libraries
 import merge from 'lodash/merge.js';
+import webManager from 'web-manager';
 
 // Exit Popup Module
-export default function (Manager, options) {
-  // Shortcuts
-  const { webManager } = Manager;
+export default function () {
 
   // Get config
   const config = webManager.config.exitPopup.config;

package/dist/assets/js/core/initialize.js

@@ -1,8 +1,5 @@
 // Page Loader Module - Initialization
-export default function (Manager, options) {
-  // Shortcuts
-  const { webManager } = Manager;
-
+export default function () {
   // Log
   console.log('Running initialize()');
 

package/dist/assets/js/core/lazy-loading.js

@@ -1,8 +1,7 @@
-// Lazy Loading Module
-export default function (Manager, options) {
-  // Shortcuts
-  const { webManager } = Manager;
+import webManager from 'web-manager';
 
+// Lazy Loading Module
+export default function () {
   // Constants
   const TRANSPARENT_PLACEHOLDER = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
 

package/dist/assets/js/core/query-strings.js

@@ -1,8 +1,7 @@
-// Query Strings Module
-export default function (Manager, options) {
-  // Shortcuts
-  const { webManager } = Manager;
+import webManager from 'web-manager';
 
+// Query Strings Module
+export default function () {
   // Process query strings when DOM is ready
   webManager.dom().ready().then(() => {
     processQueryStrings();

package/dist/assets/js/core/service-worker.js

@@ -1,8 +1,5 @@
 // Service Worker Core Library
-export default function (Manager, options) {
-  // Shortcuts
-  const { webManager } = Manager;
-
+export default function ({ options } = {}) {
   // Cache visited pages
   if (!('serviceWorker' in navigator) || !navigator.serviceWorker.controller) {
     console.warn('Service Worker not available or not controlled by a Service Worker.');

package/dist/assets/js/core/social-sharing.js

@@ -1,7 +1,7 @@
+import webManager from 'web-manager';
+
 // Social Sharing Module
-export default function (Manager, options) {
-  // Shortcuts
-  const { webManager } = Manager;
+export default function () {
 
   // Configuration with defaults merged with supplied config
   const config = webManager.config.socialSharing.config;

package/dist/assets/js/libs/admin-helpers.js

@@ -33,12 +33,6 @@ export function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
-export function escapeHtml(str) {
-  const div = document.createElement('div');
-  div.textContent = str;
-  return div.innerHTML;
-}
-
 export function setStatValue(id, result) {
   const $el = document.getElementById(id);
   if (!$el) {