astro-tractstack 2.0.0-rc.0

package/templates/src/utils/layout.ts

@@ -0,0 +1,209 @@
+import {
+  settingsPanelOpenStore,
+  headerPositionStore,
+  setHeaderPosition,
+  setMobileHeaderFaded,
+} from '@/stores/storykeep';
+
+// Track whether initial scroll adjustment has been made for settings panel
+let hasScrolledForSettingsPanel = false;
+
+/**
+ * Sets up CSS custom properties for dynamic layout positioning
+ */
+export function setupLayoutStyles(): void {
+  // Calculate and set CSS custom properties for positioning
+  const updateBottomOffset = () => {
+    const mobileNavHeight = window.innerWidth < 801 ? 80 : 0;
+    const padding = 16;
+    const offset = `${mobileNavHeight + padding}px`;
+
+    document.documentElement.style.setProperty(
+      '--bottom-right-controls-bottom-offset',
+      offset
+    );
+  };
+
+  // Set initial values
+  updateBottomOffset();
+
+  // Update on resize
+  window.addEventListener('resize', updateBottomOffset);
+}
+
+/**
+ * Sets up scroll observers for header positioning behavior
+ */
+export function setupLayoutObservers(): void {
+  const header = document.getElementById('storykeepHeader');
+  const toolModeNav = document.getElementById('mainNav');
+  const mainContent = document.getElementById('mainContent');
+  const settingsControls = document.getElementById('settingsControls');
+  const standardHeader = document.querySelector('header');
+
+  if (!header) return;
+
+  let headerHeight = 0;
+  const updateHeaderHeight = () => {
+    if (standardHeader) {
+      headerHeight = standardHeader.offsetHeight;
+    }
+  };
+
+  const updateSettingsMargin = () => {
+    if (settingsControls && header) {
+      const storyKeepHeaderHeight = header.offsetHeight;
+      const viewportHeight = window.innerHeight;
+      const bottomOffset = window.innerWidth < 801 ? 96 : 16; // Mobile nav + padding
+
+      // Set top margin to avoid StoryKeep header overlap only
+      settingsControls.style.marginTop = `${storyKeepHeaderHeight + 20}px`;
+
+      // Set max height for inner scroll
+      const maxHeight =
+        viewportHeight - storyKeepHeaderHeight - bottomOffset - 20;
+      settingsControls.style.maxHeight = `${maxHeight}px`;
+    }
+  };
+
+  const handleScroll = () => {
+    const scrollY = window.scrollY;
+    const shouldBeSticky = scrollY > headerHeight;
+
+    // Only update header position if it actually needs to change
+    const currentPosition = headerPositionStore.get();
+    const newPosition = shouldBeSticky ? 'sticky' : 'normal';
+
+    if (currentPosition !== newPosition) {
+      setHeaderPosition(newPosition);
+
+      if (shouldBeSticky) {
+        if (header) {
+          const headerHeight = header.offsetHeight;
+          // Add padding to body to prevent layout shift
+          document.body.style.paddingTop = `${headerHeight}px`;
+
+          header.style.position = 'fixed';
+          header.style.top = '0';
+          header.style.left = '0';
+          header.style.right = '0';
+          header.style.zIndex = '101';
+        }
+      } else {
+        if (header) {
+          // Remove padding when header is not fixed
+          document.body.style.paddingTop = '';
+
+          header.style.position = '';
+          header.style.top = '';
+          header.style.left = '';
+          header.style.right = '';
+          header.style.zIndex = '';
+        }
+      }
+    }
+
+    // Update tool mode nav position and main content margin
+    if (toolModeNav && window.innerWidth >= 801) {
+      if (shouldBeSticky) {
+        // On desktop, make nav fixed when header is sticky
+        toolModeNav.classList.remove('md:static');
+        toolModeNav.classList.add('md:fixed');
+        toolModeNav.style.top = '60px'; // Below fixed header
+        toolModeNav.style.left = '0';
+
+        // Add margin to main content when nav becomes fixed (nav no longer takes flex space)
+        if (mainContent) {
+          mainContent.classList.add('md:ml-16');
+        }
+      } else {
+        // Normal static positioning when header is visible
+        toolModeNav.classList.remove('md:fixed');
+        toolModeNav.classList.add('md:static');
+        toolModeNav.style.top = '';
+        toolModeNav.style.left = '';
+
+        // Remove margin from main content when nav is static (nav takes flex space naturally)
+        if (mainContent) {
+          mainContent.classList.remove('md:ml-16');
+        }
+      }
+    }
+  };
+
+  // Handle resize events
+  const handleResize = () => {
+    updateHeaderHeight();
+    updateSettingsMargin();
+
+    // Handle desktop/mobile breakpoint transitions
+    const isMobile = window.innerWidth < 801;
+
+    if (isMobile && toolModeNav && mainContent) {
+      // Force reset to mobile layout
+      toolModeNav.classList.remove('md:fixed', 'md:static');
+      toolModeNav.style.top = '';
+      toolModeNav.style.left = '';
+
+      // Remove desktop margin
+      mainContent.classList.remove('md:ml-16');
+    }
+
+    // Re-run scroll logic to handle desktop/mobile transitions
+    handleScroll();
+  };
+
+  // Listen for settings panel state changes
+  const handleSettingsPanelChange = () => {
+    const isSettingsOpen = settingsPanelOpenStore.get();
+
+    // Reset scroll flag when panel state changes
+    if (!isSettingsOpen) {
+      hasScrolledForSettingsPanel = false;
+    }
+  };
+
+  // Set up event listeners
+  window.addEventListener('scroll', handleScroll, { passive: true });
+  window.addEventListener('resize', handleResize);
+
+  // Subscribe to settings panel state changes
+  settingsPanelOpenStore.subscribe(handleSettingsPanelChange);
+
+  // Initial setup
+  updateHeaderHeight();
+  updateSettingsMargin();
+  handleScroll();
+}
+
+/**
+ * Handle settings panel mobile behavior
+ * This is called when the settings panel is toggled
+ */
+export function handleSettingsPanelMobile(isOpen: boolean): void {
+  const isMobile = window.innerWidth < 801;
+
+  if (!isMobile) return;
+
+  if (isOpen) {
+    const header = document.querySelector('header');
+    const headerHeight = header?.offsetHeight || 0;
+    const currentScrollY = window.scrollY;
+
+    // Only scroll if we're near the top and haven't already scrolled
+    if (currentScrollY <= headerHeight && !hasScrolledForSettingsPanel) {
+      window.scrollTo({
+        top: headerHeight + 10,
+        behavior: 'smooth',
+      });
+      hasScrolledForSettingsPanel = true;
+    }
+
+    // Fade the header
+    setMobileHeaderFaded(true);
+  } else {
+    // Unfade the header and reset scroll flag
+    setMobileHeaderFaded(false);
+    hasScrolledForSettingsPanel = false;
+  }
+}

package/templates/src/utils/profileStorage.ts

@@ -0,0 +1,306 @@
+export interface ProfileData {
+  firstname?: string;
+  contactPersona?: string;
+  email?: string;
+  shortBio?: string;
+}
+
+export interface SessionData {
+  sessionId?: string;
+  consent?: string;
+  encryptedEmail?: string;
+  encryptedCode?: string;
+  hasProfile: boolean;
+}
+
+class StorageManager {
+  static get(key: string): string | null {
+    try {
+      return localStorage.getItem(`tractstack_${key}`);
+    } catch {
+      return null;
+    }
+  }
+
+  static set(key: string, value: string): boolean {
+    try {
+      localStorage.setItem(`tractstack_${key}`, value);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  static remove(key: string): void {
+    try {
+      localStorage.removeItem(`tractstack_${key}`);
+    } catch {
+      // Silently fail
+    }
+  }
+}
+
+export class ProfileStorage {
+  private static readonly STORAGE_KEYS = {
+    consent: 'consent',
+    encryptedEmail: 'encrypted_email',
+    encryptedCode: 'encrypted_code',
+    profileToken: 'profile_token',
+    hasProfile: 'has_profile',
+    unlockedProfile: 'unlocked_profile',
+    showUnlock: 'show_unlock',
+    lastEmail: 'last_email',
+    // Profile data
+    firstname: 'profile_firstname',
+    contactPersona: 'profile_contact_persona',
+    email: 'profile_email',
+    shortBio: 'profile_short_bio',
+  } as const;
+
+  /**
+   * Get current session data (backend controls fingerprint/visit IDs)
+   */
+  static getCurrentSession(): SessionData {
+    return {
+      sessionId: localStorage.getItem('tractstack_session_id') || undefined,
+      consent: StorageManager.get(this.STORAGE_KEYS.consent) || undefined,
+      encryptedEmail:
+        StorageManager.get(this.STORAGE_KEYS.encryptedEmail) || undefined,
+      encryptedCode:
+        StorageManager.get(this.STORAGE_KEYS.encryptedCode) || undefined,
+      hasProfile: !!StorageManager.get(this.STORAGE_KEYS.hasProfile),
+    };
+  }
+
+  /**
+   * Check if profile is unlocked
+   */
+  static isProfileUnlocked(): boolean {
+    return !!StorageManager.get(this.STORAGE_KEYS.unlockedProfile);
+  }
+
+  /**
+   * Check if should show unlock form
+   */
+  static shouldShowUnlock(): boolean {
+    return !!StorageManager.get(this.STORAGE_KEYS.hasProfile);
+  }
+
+  /**
+   * Prepare handshake data for backend calls
+   */
+  static prepareHandshakeData(): {
+    sessionId: string;
+    encryptedEmail?: string;
+    encryptedCode?: string;
+    consent?: string;
+  } {
+    let sessionId = localStorage.getItem('tractstack_session_id');
+
+    // If no session ID exists, generate one client-side
+    if (!sessionId) {
+      sessionId = `client-${Date.now()}-${Math.random()
+        .toString(36)
+        .substring(2, 11)}`;
+      localStorage.setItem('tractstack_session_id', sessionId);
+    }
+
+    const data: any = { sessionId };
+
+    const encryptedEmail = StorageManager.get(this.STORAGE_KEYS.encryptedEmail);
+    const encryptedCode = StorageManager.get(this.STORAGE_KEYS.encryptedCode);
+    const consent = StorageManager.get(this.STORAGE_KEYS.consent);
+
+    if (encryptedEmail) data.encryptedEmail = encryptedEmail;
+    if (encryptedCode) data.encryptedCode = encryptedCode;
+    if (consent) data.consent = consent;
+
+    return data;
+  }
+
+  /**
+   * Store encrypted credentials for profile fast-pass
+   */
+  static storeEncryptedCredentials(email: string, code: string): boolean {
+    const emailStored = StorageManager.set(
+      this.STORAGE_KEYS.encryptedEmail,
+      email
+    );
+    const codeStored = StorageManager.set(
+      this.STORAGE_KEYS.encryptedCode,
+      code
+    );
+    return emailStored && codeStored;
+  }
+
+  /**
+   * Clear encrypted credentials
+   */
+  static clearEncryptedCredentials(): void {
+    StorageManager.remove(this.STORAGE_KEYS.encryptedEmail);
+    StorageManager.remove(this.STORAGE_KEYS.encryptedCode);
+  }
+
+  /**
+   * Store profile token and mark as having profile
+   */
+  static storeProfileToken(token: string): void {
+    StorageManager.set(this.STORAGE_KEYS.profileToken, token);
+    StorageManager.set(this.STORAGE_KEYS.hasProfile, '1');
+    StorageManager.set(this.STORAGE_KEYS.unlockedProfile, '1');
+  }
+
+  /**
+   * Clear profile token and profile state
+   */
+  static clearProfileToken(): void {
+    StorageManager.remove(this.STORAGE_KEYS.profileToken);
+    StorageManager.remove(this.STORAGE_KEYS.hasProfile);
+    StorageManager.remove(this.STORAGE_KEYS.unlockedProfile);
+  }
+
+  /**
+   * Check if user has a profile
+   */
+  static hasProfile(): boolean {
+    return !!StorageManager.get(this.STORAGE_KEYS.hasProfile);
+  }
+
+  /**
+   * Clear entire session (localStorage) INCLUDING session ID
+   */
+  static clearSession(): void {
+    Object.values(this.STORAGE_KEYS).forEach((key) => {
+      StorageManager.remove(key);
+    });
+
+    try {
+      localStorage.removeItem('tractstack_session_id');
+      localStorage.removeItem('tractstack_fingerprint');
+      localStorage.removeItem('tractstack_visit');
+      localStorage.removeItem('tractstack_entered_tracked');
+    } catch {
+      // Silently fail
+    }
+
+    // Clear session cookie
+    try {
+      document.cookie =
+        'tractstack_session_id=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
+    } catch {
+      // Silently fail
+    }
+
+    console.log('TractStack: Session cleared completely including session ID');
+  }
+
+  /**
+   * Clear only profile data (keep session)
+   */
+  static clearProfile(): void {
+    StorageManager.remove(this.STORAGE_KEYS.profileToken);
+    StorageManager.remove(this.STORAGE_KEYS.hasProfile);
+    StorageManager.remove(this.STORAGE_KEYS.unlockedProfile);
+    StorageManager.remove(this.STORAGE_KEYS.firstname);
+    StorageManager.remove(this.STORAGE_KEYS.contactPersona);
+    StorageManager.remove(this.STORAGE_KEYS.email);
+    StorageManager.remove(this.STORAGE_KEYS.shortBio);
+  }
+
+  /**
+   * Debug helper to log current state
+   */
+  static debugProfile(): void {
+    const session = this.getCurrentSession();
+    const profile = this.getProfileData();
+
+    console.group('TractStack Profile Debug');
+    console.log('Current Session:', session);
+    console.log('Profile Data:', profile);
+    console.log('Has Profile:', this.hasProfile());
+    console.log('Profile Unlocked:', this.isProfileUnlocked());
+    console.log('Should Show Unlock:', this.shouldShowUnlock());
+    console.log('TractStack LocalStorage:', {
+      profile_token: !!StorageManager.get('profile_token'),
+      encrypted_email: !!StorageManager.get('encrypted_email'),
+      encrypted_code: !!StorageManager.get('encrypted_code'),
+      consent: StorageManager.get('consent'),
+      session_id: localStorage.getItem('tractstack_session_id'),
+    });
+    console.groupEnd();
+  }
+
+  /**
+   * Get profile data from localStorage
+   */
+  static getProfileData(): ProfileData {
+    return {
+      firstname: StorageManager.get(this.STORAGE_KEYS.firstname) || undefined,
+      contactPersona:
+        StorageManager.get(this.STORAGE_KEYS.contactPersona) || undefined,
+      email: StorageManager.get(this.STORAGE_KEYS.email) || undefined,
+      shortBio: StorageManager.get(this.STORAGE_KEYS.shortBio) || undefined,
+    };
+  }
+
+  /**
+   * Set profile data in localStorage
+   */
+  static setProfileData(data: ProfileData): void {
+    if (data.firstname)
+      StorageManager.set(this.STORAGE_KEYS.firstname, data.firstname);
+    if (data.contactPersona)
+      StorageManager.set(this.STORAGE_KEYS.contactPersona, data.contactPersona);
+    if (data.email) StorageManager.set(this.STORAGE_KEYS.email, data.email);
+    if (data.shortBio)
+      StorageManager.set(this.STORAGE_KEYS.shortBio, data.shortBio);
+  }
+
+  /**
+   * Get consent status
+   */
+  static getConsent(): string | null {
+    return StorageManager.get(this.STORAGE_KEYS.consent);
+  }
+
+  /**
+   * Store consent status
+   */
+  static storeConsent(consent: string): void {
+    StorageManager.set(this.STORAGE_KEYS.consent, consent);
+  }
+
+  /**
+   * Get last used email
+   */
+  static getLastEmail(): string | null {
+    return StorageManager.get(this.STORAGE_KEYS.lastEmail);
+  }
+
+  /**
+   * Store last used email
+   */
+  static storeLastEmail(email: string): void {
+    StorageManager.set(this.STORAGE_KEYS.lastEmail, email);
+  }
+
+  /**
+   * Set show unlock flag
+   */
+  static setShowUnlock(show: boolean): void {
+    if (show) {
+      StorageManager.set(this.STORAGE_KEYS.showUnlock, '1');
+    } else {
+      StorageManager.remove(this.STORAGE_KEYS.showUnlock);
+    }
+  }
+}
+
+// Global debug helper
+if (typeof window !== 'undefined') {
+  (window as any).tractStackProfileDebug = {
+    profile: () => ProfileStorage.debugProfile(),
+    clear: () => ProfileStorage.clearSession(),
+    clearProfile: () => ProfileStorage.clearProfile(),
+  };
+}

package/templates/src/utils/useInterval.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Custom hook for setting up an interval that can be safely used with React's lifecycle
+ * @param callback Function to be called on each interval
+ * @param delay Delay in milliseconds between each interval, or null to stop the interval
+ */
+export function useInterval(callback: () => void, delay: number | null) {
+  const savedCallback = useRef<() => void>(callback);
+
+  // Remember the latest callback
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval
+  useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+}

package/templates/tailwind.config.cjs

@@ -0,0 +1,169 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  //content: ["./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}"],
+  content: [],
+  theme: {
+    screens: {
+      xs: '0px',
+      md: '801px',
+      xl: '1367px',
+    },
+    extend: {
+      maxWidth: {
+        '1/5': '80%',
+      },
+      zIndex: {
+        1: '101',
+        2: '102',
+        3: '103',
+        4: '104',
+        5: '105',
+        6: '106',
+        7: '107',
+        8: '108',
+        9: '109',
+        10: '110',
+        20: '210',
+        30: '310',
+        40: '410',
+        50: '510',
+        70: '700',
+        90: '900',
+        99: '999',
+        101: '1001',
+        102: '1002',
+        103: '1003',
+        104: '1004',
+        105: '1005',
+        999: '9999',
+        9002: '9002',
+      },
+      colors: {
+        mywhite: '#fcfcfc',
+        myoffwhite: '#e3e3e3',
+        mylightgrey: '#a7b1b7',
+        myblue: '#293f58',
+        mygreen: '#c8df8c',
+        myorange: '#f58333',
+        mydarkgrey: '#393d34',
+        myblack: '#10120d',
+        'brand-1': 'var(--brand-1)',
+        'brand-2': 'var(--brand-2)',
+        'brand-3': 'var(--brand-3)',
+        'brand-4': 'var(--brand-4)',
+        'brand-5': 'var(--brand-5)',
+        'brand-6': 'var(--brand-6)',
+        'brand-7': 'var(--brand-7)',
+        'brand-8': 'var(--brand-8)',
+      },
+      fontSize: {
+        xs: '0.75rem',
+        sm: '0.875rem',
+        base: '1rem',
+        lg: '1.125rem',
+        xl: '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.25rem',
+        '5xl': '3rem',
+        '6xl': '3.75rem',
+        '7xl': '4.5rem',
+        '8xl': '6rem',
+        '9xl': '8rem',
+        rxs: 'calc(var(--scale) * 0.75rem)',
+        rsm: 'calc(var(--scale) * 0.875rem)',
+        rbase: 'calc(var(--scale) * 1rem)',
+        rlg: 'calc(var(--scale) * 1.125rem)',
+        rxl: 'calc(var(--scale) * 1.25rem)',
+        r2xl: 'calc(var(--scale) * 1.5rem)',
+        r3xl: 'calc(var(--scale) * 1.875rem)',
+        r4xl: 'calc(var(--scale) * 2.5rem)',
+        r5xl: 'calc(var(--scale) * 3rem)',
+        r6xl: 'calc(var(--scale) * 3.75rem)',
+        r7xl: 'calc(var(--scale) * 4.5rem)',
+        r8xl: 'calc(var(--scale) * 6rem)',
+        r9xl: 'calc(var(--scale) * 8rem)',
+      },
+      animation: {
+        fadeOut: 'fadeOut 1s forwards',
+        fadeIn: 'fadeIn 1s ease-in',
+        fadeInUp: 'fadeInUp 1s ease-in',
+        fadeInRight: 'fadeInRight 1s ease-in',
+        fadeInLeft: 'fadeInLeft 1s ease-in',
+        bounceIn: 'bounce 1s ease-in-out 4.5',
+        wig: 'wiggle 1s ease-in-out infinite',
+      },
+      keyframes: {
+        fadeOut: {
+          '0%': { opacity: '1' },
+          '100%': { opacity: '0' },
+        },
+        fadeIn: {
+          '0%': { opacity: '.25' },
+          '100%': { opacity: '1' },
+        },
+        fadeInUp: {
+          '0%': { transform: 'translate3d(0, 10px, 0)', opacity: '.25' },
+          '100%': { transform: 'translate3d(0, 0, 0)', opacity: '1' },
+        },
+        fadeInRight: {
+          '0%': { transform: 'translate3d(10px,0, 0)', opacity: '.25' },
+          '100%': { transform: 'translate3d(0, 0, 0)', opacity: '1' },
+        },
+        fadeInLeft: {
+          '0%': { transform: 'translate3d(-10px,0, 0)', opacity: '.25' },
+          '100%': { transform: 'translate3d(0, 0, 0)', opacity: '1' },
+        },
+        wiggle: {
+          '0%, 100%': {
+            transform: 'translateX(3%)',
+          },
+          '50%': {
+            transform: 'translateX(0)',
+          },
+        },
+      },
+      lineHeight: {
+        12: '3rem',
+        14: '3.5rem',
+        16: '4rem',
+        20: '5rem',
+      },
+      spacing: {
+        r1: 'calc(var(--scale) * .25rem)',
+        r2: 'calc(var(--scale) * .5rem)',
+        r3: 'calc(var(--scale) * .75rem)',
+        r4: 'calc(var(--scale) * 1rem)',
+        r5: 'calc(var(--scale) * 1.25rem)',
+        r6: 'calc(var(--scale) * 1.5rem)',
+        r7: 'calc(var(--scale) * 1.75rem)',
+        r8: 'calc(var(--scale) * 2rem)',
+        r9: 'calc(var(--scale) * 2.25rem)',
+        r10: 'calc(var(--scale) * 2.5rem)',
+        r11: 'calc(var(--scale) * 2.75rem)',
+        r12: 'calc(var(--scale) * 3rem)',
+        r14: 'calc(var(--scale) * 3.5rem)',
+        r16: 'calc(var(--scale) * 4rem)',
+        r20: 'calc(var(--scale) * 5rem)',
+      },
+      fontFamily: {
+        action: [
+          'var(--font-action)',
+          'Inter',
+          'Georgia',
+          'Times New Roman',
+          'Times',
+          'serif',
+        ],
+        main: [
+          'var(--font-main)',
+          'Inter',
+          'Arial',
+          'Helvetica Neue',
+          'Helvetica',
+          'sans-serif',
+        ],
+      },
+    },
+  },
+};