astro-tractstack 2.0.0-rc.7 → 2.0.0-rc.71

package/utils/inject-files.ts

@@ -29,7 +29,15 @@ export async function injectTemplateFiles(
       dest: 'env.example',
     },
     {
-      src: resolve('../templates/.gitignore'),
+      src: resolve('../templates/prettierrc'),
+      dest: '.prettierrc',
+    },
+    {
+      src: resolve('../templates/prettierignore'),
+      dest: '.prettierignore',
+    },
+    {
+      src: resolve('../templates/gitignore'),
       dest: '.gitignore',
     },
     {
@@ -222,6 +230,12 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/components/edit/widgets/BeliefWidget.tsx'),
       dest: 'src/components/edit/widgets/BeliefWidget.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/edit/widgets/InteractiveDisclosureWidget.tsx'
+      ),
+      dest: 'src/components/edit/widgets/InteractiveDisclosureWidget.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/edit/widgets/IdentifyAsWidget.tsx'
@@ -471,10 +485,6 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/components/edit/pane/PanePanel_path.tsx'),
       dest: 'src/components/edit/pane/PanePanel_path.tsx',
     },
-    {
-      src: resolve('../templates/src/components/edit/pane/PanePanel_slug.tsx'),
-      dest: 'src/components/edit/pane/PanePanel_slug.tsx',
-    },
     {
       src: resolve('../templates/src/components/edit/pane/PanePanel_title.tsx'),
       dest: 'src/components/edit/pane/PanePanel_title.tsx',
@@ -546,9 +556,9 @@ export async function injectTemplateFiles(
     },
     {
       src: resolve(
-        '../templates/src/components/compositor/preview/FeaturedContentPreview.tsx'
+        '../templates/src/components/compositor/preview/FeaturedArticlePreview.tsx'
       ),
-      dest: 'src/components/compositor/preview/FeaturedContentPreview.tsx',
+      dest: 'src/components/compositor/preview/FeaturedArticlePreview.tsx',
     },
 
     // Server side stores
@@ -902,7 +912,23 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/components/Fragment.astro'),
       dest: 'src/components/Fragment.astro',
     },
-
+    // Search Components
+    {
+      src: resolve('../templates/src/components/search/SearchWrapper.tsx'),
+      dest: 'src/components/search/SearchWrapper.tsx',
+    },
+    {
+      src: resolve('../templates/src/components/search/SearchModal.tsx'),
+      dest: 'src/components/search/SearchModal.tsx',
+    },
+    {
+      src: resolve('../templates/src/components/search/SearchResults.tsx'),
+      dest: 'src/components/search/SearchResults.tsx',
+    },
+    {
+      src: resolve('../templates/src/hooks/useSearch.ts'),
+      dest: 'src/hooks/useSearch.ts',
+    },
     // Profile Components
     {
       src: resolve('../templates/src/components/profile/ProfileConsent.tsx'),
@@ -982,6 +1008,12 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/components/form/ActionBuilderField.tsx'),
       dest: 'src/components/form/ActionBuilderField.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/form/ActionBuilderBeliefSelector.tsx'
+      ),
+      dest: 'src/components/form/ActionBuilderBeliefSelector.tsx',
+    },
     {
       src: resolve('../templates/src/components/form/MagicPathBuilder.tsx'),
       dest: 'src/components/form/MagicPathBuilder.tsx',
@@ -1038,6 +1070,12 @@ export async function injectTemplateFiles(
     },
 
     // StoryKeep Dashboard Components
+    {
+      src: resolve(
+        '../templates/src/components/storykeep/StoryKeepBackdrop.astro'
+      ),
+      dest: 'src/components/storykeep/StoryKeepBackdrop.astro',
+    },
     {
       src: resolve('../templates/src/components/storykeep/Dashboard.tsx'),
       dest: 'src/components/storykeep/Dashboard.tsx',
@@ -1212,17 +1250,21 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/components/codehooks/SankeyDiagram.tsx'),
       dest: 'src/components/codehooks/SankeyDiagram.tsx',
     },
+    {
+      src: resolve('../templates/src/components/codehooks/SearchWidget.tsx'),
+      dest: 'src/components/codehooks/SearchWidget.tsx',
+    },
     {
       src: resolve(
-        '../templates/src/components/codehooks/FeaturedContent.astro'
+        '../templates/src/components/codehooks/FeaturedArticle.astro'
       ),
-      dest: 'src/components/codehooks/FeaturedContent.astro',
+      dest: 'src/components/codehooks/FeaturedArticle.astro',
     },
     {
       src: resolve(
-        '../templates/src/components/codehooks/FeaturedContentSetup.tsx'
+        '../templates/src/components/codehooks/FeaturedArticleSetup.tsx'
       ),
-      dest: 'src/components/codehooks/FeaturedContentSetup.tsx',
+      dest: 'src/components/codehooks/FeaturedArticleSetup.tsx',
     },
     {
       src: resolve('../templates/src/components/codehooks/ListContent.astro'),
@@ -1234,6 +1276,18 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/codehooks/ListContentSetup.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/codehooks/ProductCardSetup.tsx'
+      ),
+      dest: 'src/components/codehooks/ProductCardSetup.tsx',
+    },
+    {
+      src: resolve(
+        '../templates/src/components/codehooks/ProductGridSetup.tsx'
+      ),
+      dest: 'src/components/codehooks/ProductGridSetup.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/codehooks/BunnyVideoWrapper.astro'
@@ -1271,16 +1325,16 @@ export async function injectTemplateFiles(
 
     // Client Scripts
     {
-      src: resolve('../templates/src/client/sse.js'),
-      dest: 'public/client/sse.js',
+      src: resolve('../templates/src/client/htmx.min.js'),
+      dest: 'public/client/htmx.min.js',
     },
     {
-      src: resolve('../templates/src/client/belief-events.js'),
-      dest: 'public/client/belief-events.js',
+      src: resolve('../templates/src/client/view.js'),
+      dest: 'public/client/view.js',
     },
     {
-      src: resolve('../templates/src/client/analytics-events.js'),
-      dest: 'public/client/analytics-events.js',
+      src: resolve('../templates/src/client/app.js'),
+      dest: 'public/client/app.js',
     },
 
     // StoryKeep Editor (add new section)
@@ -2044,6 +2098,11 @@ export async function injectTemplateFiles(
       dest: 'src/custom/CustomRoutes.astro',
       protected: true,
     },
+    {
+      src: resolve('../templates/src/utils/customHelpers.ts'),
+      dest: 'src/utils/customHelpers.ts',
+      protected: true,
+    },
 
     // Example Components (Conditional)
     ...(config?.includeExamples
@@ -2053,6 +2112,23 @@ export async function injectTemplateFiles(
             dest: 'src/custom/CustomHero.astro',
             protected: true,
           },
+          {
+            src: resolve('../templates/custom/with-examples/ProductGrid.astro'),
+            dest: 'src/custom/ProductGrid.astro',
+            protected: true,
+          },
+          {
+            src: resolve(
+              '../templates/custom/with-examples/ProductCardWrapper.astro'
+            ),
+            dest: 'src/custom/ProductCardWrapper.astro',
+            protected: true,
+          },
+          {
+            src: resolve('../templates/custom/with-examples/ProductCard.astro'),
+            dest: 'src/custom/ProductCard.astro',
+            protected: true,
+          },
           {
             src: resolve(
               '../templates/custom/with-examples/pages/Collections.astro'
@@ -2084,6 +2160,7 @@ export async function injectTemplateFiles(
           file.dest.startsWith('src/components/codehooks/') ||
           file.dest.startsWith('src/components/widgets/') ||
           file.dest.startsWith('src/') ||
+          file.dest.startsWith('public/client/') ||
           file.dest === '.gitignore');
 
       if (!existsSync(file.dest) || shouldOverwrite) {

package/templates/src/client/analytics-events.js

@@ -1,207 +0,0 @@
-const THRESHOLD_GLOSSED = 7000; // 7 seconds in ms
-const THRESHOLD_READ = 42000; // 42 seconds in ms
-const VERBOSE = false;
-
-const paneViewTimes = new Map();
-let hasTrackedEntered =
-  localStorage.getItem('tractstack_entered_tracked') === 'true';
-let currentStoryfragmentId = null;
-let isPageInitialized = false;
-let globalObserver = null;
-
-function waitForSessionReady() {
-  return new Promise((resolve) => {
-    if (window.TRACTSTACK_CONFIG?.session?.isReady) {
-      resolve();
-    } else {
-      window.addEventListener('tractstack:session-ready', () => resolve(), {
-        once: true,
-      });
-    }
-  });
-}
-
-export async function initAnalyticsTracking(storyfragmentId) {
-  if (isPageInitialized) return;
-  isPageInitialized = true;
-
-  if (VERBOSE)
-    console.log('📊 ANALYTICS: Initializing tracking for page view.');
-  currentStoryfragmentId = storyfragmentId || null;
-  initPaneVisibilityTracking();
-  await waitForSessionReady();
-  trackEnteredEvent();
-  trackPageViewedEvent();
-}
-
-function trackEnteredEvent() {
-  if (!hasTrackedEntered && currentStoryfragmentId) {
-    sendAnalyticsEvent({
-      contentId: currentStoryfragmentId,
-      contentType: 'StoryFragment',
-      eventVerb: 'ENTERED',
-    });
-    hasTrackedEntered = true;
-    localStorage.setItem('tractstack_entered_tracked', 'true');
-  }
-}
-
-function trackPageViewedEvent() {
-  if (currentStoryfragmentId) {
-    // This event is now PURELY for analytics. It no longer triggers
-    // a synchronization workaround on the backend.
-    sendAnalyticsEvent({
-      contentId: currentStoryfragmentId,
-      contentType: 'StoryFragment',
-      eventVerb: 'PAGEVIEWED',
-    });
-  }
-}
-
-function initPaneVisibilityTracking() {
-  if (globalObserver) {
-    globalObserver.disconnect();
-  }
-  globalObserver = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        const paneId = getPaneIdFromElement(entry.target);
-        if (!paneId) return;
-        if (entry.isIntersecting) {
-          if (!paneViewTimes.has(paneId)) {
-            paneViewTimes.set(paneId, Date.now());
-          }
-        } else {
-          const startTime = paneViewTimes.get(paneId);
-          if (startTime) {
-            const duration = Date.now() - startTime;
-            paneViewTimes.delete(paneId);
-            let eventVerb = null;
-            if (duration >= THRESHOLD_READ) eventVerb = 'READ';
-            else if (duration >= THRESHOLD_GLOSSED) eventVerb = 'GLOSSED';
-            if (eventVerb) {
-              sendAnalyticsEvent({
-                contentId: paneId,
-                contentType: 'Pane',
-                eventVerb,
-                duration,
-              });
-            }
-          }
-        }
-      });
-    },
-    { threshold: 0.1, rootMargin: '0px' }
-  );
-  observeAllPanes();
-}
-
-function observeAllPanes() {
-  if (!globalObserver) return;
-  const panes = document.querySelectorAll('[data-pane-id]');
-  panes.forEach((pane) => globalObserver.observe(pane));
-}
-
-function setupLifecycleListeners() {
-  if (window.ANALYTICS_INITIALIZED) return;
-  window.ANALYTICS_INITIALIZED = true;
-
-  if (VERBOSE)
-    console.log(
-      '📊 ANALYTICS: Setting up lifecycle listeners for the first time.'
-    );
-
-  window.addEventListener('beforeunload', () => {
-    flushPendingPaneEvents();
-  });
-
-  document.addEventListener('astro:page-load', () => {
-    isPageInitialized = false;
-    flushPendingPaneEvents();
-    if (window.TRACTSTACK_CONFIG?.storyfragmentId) {
-      initAnalyticsTracking(window.TRACTSTACK_CONFIG.storyfragmentId);
-    }
-  });
-
-  if (document.readyState === 'complete') {
-    if (window.TRACTSTACK_CONFIG?.storyfragmentId) {
-      initAnalyticsTracking(window.TRACTSTACK_CONFIG.storyfragmentId);
-    }
-  } else {
-    document.addEventListener(
-      'DOMContentLoaded',
-      () => {
-        if (window.TRACTSTACK_CONFIG?.storyfragmentId) {
-          initAnalyticsTracking(window.TRACTSTACK_CONFIG.storyfragmentId);
-        }
-      },
-      { once: true }
-    );
-  }
-}
-
-function flushPendingPaneEvents() {
-  if (paneViewTimes.size === 0) return;
-  const flushTime = Date.now();
-  paneViewTimes.forEach((startTime, paneId) => {
-    const duration = flushTime - startTime;
-    let eventVerb = null;
-    if (duration >= THRESHOLD_READ) eventVerb = 'READ';
-    else if (duration >= THRESHOLD_GLOSSED) eventVerb = 'GLOSSED';
-    if (eventVerb) {
-      sendAnalyticsEvent({
-        contentId: paneId,
-        contentType: 'Pane',
-        eventVerb,
-        duration,
-      });
-    }
-  });
-  paneViewTimes.clear();
-}
-
-async function sendAnalyticsEvent(event) {
-  try {
-    const config = window.TRACTSTACK_CONFIG;
-    if (!config || !config.sessionId) return; // Use server-provided session ID
-
-    const sessionId = config.sessionId;
-    const formData = {
-      beliefId: event.contentId,
-      beliefType: event.contentType,
-      beliefValue: event.eventVerb,
-      paneId: '',
-    };
-
-    if (event.duration !== undefined) {
-      formData.duration = event.duration.toString();
-    }
-
-    await fetch(`${config.backendUrl}/api/v1/state`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        'X-Tenant-ID': config.tenantId,
-        'X-TractStack-Session-ID': sessionId,
-        'X-StoryFragment-ID': config.storyfragmentId,
-      },
-      body: new URLSearchParams(formData),
-    });
-  } catch (error) {
-    console.error('❌ API ERROR: Analytics event failed', error, event);
-  }
-}
-
-function getPaneIdFromElement(element) {
-  return element.getAttribute('data-pane-id');
-}
-
-window.initAnalyticsTracking = initAnalyticsTracking;
-
-setupLifecycleListeners();
-
-if (VERBOSE) {
-  console.log(
-    '📊 ANALYTICS: Analytics events module loaded and is persistent.'
-  );
-}

package/templates/src/client/belief-events.js

@@ -1,191 +0,0 @@
-const VERBOSE = false;
-
-// This function now contains all essential one-time and recurring HTMX setup.
-function configureHtmx() {
-  if (!window.htmx) return;
-
-  if (!window.HTMX_CONFIGURED) {
-    window.htmx.config.selfRequestsOnly = false;
-    window.HTMX_CONFIGURED = true;
-  }
-
-  window.htmx.on(document.body, 'htmx:configRequest', function (evt) {
-    const config = window.TRACTSTACK_CONFIG;
-    if (!config || !config.sessionId) return; // Check for config and session ID
-
-    if (evt.detail.path && evt.detail.path.startsWith('/api/v1/')) {
-      evt.detail.path = config.backendUrl + evt.detail.path;
-    }
-
-    // MODIFIED: Use session ID from the global config object
-    const sessionId = config.sessionId;
-    evt.detail.headers['X-Tenant-ID'] = config.tenantId;
-    evt.detail.headers['X-StoryFragment-ID'] = config.storyfragmentId;
-    if (sessionId) {
-      evt.detail.headers['X-TractStack-Session-ID'] = sessionId;
-    }
-  });
-}
-
-const pageBeliefs = {};
-let activeStoryfragmentId = null;
-
-function waitForSessionReady() {
-  return new Promise((resolve) => {
-    // This event is fired by sse.ts after the handshake is complete.
-    if (window.TRACTSTACK_CONFIG?.session?.isReady) {
-      resolve();
-    } else {
-      window.addEventListener('tractstack:session-ready', () => resolve(), {
-        once: true,
-      });
-    }
-  });
-}
-
-function initializeBeliefs() {
-  if (window.BELIEF_INITIALIZED) {
-    return;
-  }
-  window.BELIEF_INITIALIZED = true;
-
-  if (VERBOSE)
-    console.log(
-      '🔧 BELIEF: First-time initialization of belief handlers and HTMX config.'
-    );
-
-  configureHtmx(); // Run config on initial load.
-
-  document.addEventListener('change', function (event) {
-    const target = event.target;
-    if (
-      target.matches &&
-      (target.matches('select[data-belief-id]') ||
-        target.matches('input[type="checkbox"][data-belief-id]'))
-    ) {
-      handleBeliefChange(target);
-    }
-  });
-}
-
-async function handleBeliefChange(element) {
-  const beliefId = element.getAttribute('data-belief-id');
-  const beliefType = element.getAttribute('data-belief-type');
-  const paneId = element.getAttribute('data-pane-id');
-
-  if (!beliefId || !beliefType) {
-    if (VERBOSE)
-      console.error('🔴 BELIEF: Missing required attributes on', element.id);
-    return;
-  }
-
-  let beliefValue;
-  if (element.type === 'checkbox') {
-    beliefValue = element.checked ? 'BELIEVES_YES' : 'BELIEVES_NO';
-  } else {
-    beliefValue = element.value;
-  }
-
-  if (VERBOSE)
-    console.log('🔄 BELIEF: Widget changed', {
-      beliefId,
-      beliefType,
-      beliefValue,
-      paneId,
-    });
-
-  trackBeliefState(beliefId, beliefValue);
-
-  // Pass the current page's beliefs to the backend
-  await sendBeliefUpdate({
-    beliefId,
-    beliefType,
-    beliefValue,
-    paneId: paneId || '',
-  });
-}
-
-async function sendBeliefUpdate(data) {
-  await waitForSessionReady();
-
-  try {
-    const config = window.TRACTSTACK_CONFIG;
-    if (!config || !config.sessionId) return; // Check for config and session ID
-
-    if (VERBOSE)
-      console.log('🚨 FRONTEND DEBUG: Sending belief update with headers:', {
-        'X-StoryFragment-ID': config.storyfragmentId,
-        beliefData: data,
-        currentSSEContext: 'check sse.ts logs',
-      });
-
-    const sessionId = config.sessionId;
-    const headers = {
-      'Content-Type': 'application/x-www-form-urlencoded',
-      'X-Tenant-ID': config.tenantId,
-      'X-StoryFragment-ID': config.storyfragmentId,
-      'X-TractStack-Session-ID': sessionId,
-    };
-
-    if (VERBOSE)
-      console.log('📡 BELIEF: Session ready, sending update.', { data });
-
-    const response = await fetch(`${config.backendUrl}/api/v1/state`, {
-      method: 'POST',
-      headers: headers,
-      body: new URLSearchParams(data),
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-  } catch (error) {
-    const errorMessage =
-      error instanceof Error ? error.message : 'Unknown error';
-    if (VERBOSE)
-      console.error('🔴 BELIEF: Update failed', {
-        error: errorMessage,
-        beliefId: data.beliefId,
-      });
-  }
-}
-
-function trackBeliefState(beliefId, beliefValue) {
-  if (!activeStoryfragmentId) return;
-
-  if (!pageBeliefs[activeStoryfragmentId]) {
-    pageBeliefs[activeStoryfragmentId] = {};
-  }
-  pageBeliefs[activeStoryfragmentId][beliefId] = beliefValue;
-  if (VERBOSE)
-    console.log(`📝 BELIEF: Tracked state for page ${activeStoryfragmentId}`, {
-      ...pageBeliefs[activeStoryfragmentId],
-    });
-}
-
-function setActiveStoryFragment() {
-  if (window.TRACTSTACK_CONFIG?.storyfragmentId) {
-    activeStoryfragmentId = window.TRACTSTACK_CONFIG.storyfragmentId;
-    if (VERBOSE)
-      console.log(
-        `📖 BELIEF: Active story fragment set to ${activeStoryfragmentId}`
-      );
-    // Ensure a state object exists for the newly active page
-    if (!pageBeliefs[activeStoryfragmentId]) {
-      pageBeliefs[activeStoryfragmentId] = {};
-    }
-  }
-}
-
-initializeBeliefs();
-
-document.addEventListener('astro:page-load', () => {
-  configureHtmx();
-  setActiveStoryFragment();
-});
-
-// Also set the active story on the very first page load.
-document.addEventListener('DOMContentLoaded', setActiveStoryFragment);
-
-if (VERBOSE)
-  console.log('🔧 BELIEF: Belief events module loaded and is persistent.');