astro-tractstack 2.0.0-rc.9 → 2.0.0

package/templates/src/hooks/useSearch.ts

@@ -0,0 +1,228 @@
+import { useState, useCallback, useRef, useMemo } from 'react';
+import { TractStackAPI } from '@/utils/api';
+import type {
+  DiscoverySuggestion,
+  CategorizedResults,
+} from '@/types/tractstack';
+
+interface UseSearchReturn {
+  // Discovery phase
+  suggestions: DiscoverySuggestion[];
+  isDiscovering: boolean;
+  discoverError: string | null;
+
+  // Retrieve phase
+  searchResults: CategorizedResults | null;
+  isRetrieving: boolean;
+  retrieveError: string | null;
+
+  // Actions
+  discoverTerms: (query: string) => void;
+  selectSuggestion: (suggestion: DiscoverySuggestion) => void;
+  selectExactMatch: (term: string) => void;
+  clearAll: () => void;
+}
+
+const DEBOUNCE_MS = 150;
+const BACKEND_THROTTLE_MS = 1200;
+
+export function useSearch(): UseSearchReturn {
+  // Discovery state
+  const [suggestions, setSuggestions] = useState<DiscoverySuggestion[]>([]);
+  const [isDiscovering, setIsDiscovering] = useState(false);
+  const [discoverError, setDiscoverError] = useState<string | null>(null);
+
+  // Retrieve state
+  const [searchResults, setSearchResults] = useState<CategorizedResults | null>(
+    null
+  );
+  const [isRetrieving, setIsRetrieving] = useState(false);
+  const [retrieveError, setRetrieveError] = useState<string | null>(null);
+
+  // --- REVISED STATE FOR SEARCH LOGIC ---
+  const searchTimerRef = useRef<NodeJS.Timeout>();
+  const lastExecutionTimeRef = useRef<number>(0);
+  const pendingQueryRef = useRef<string | null>(null);
+  const inflightQueryRef = useRef<string | null>(null);
+  const api = useMemo(() => new TractStackAPI(), []);
+
+  const performDiscovery = useCallback(
+    async (query: string) => {
+      if (!query.trim()) {
+        setSuggestions([]);
+        return;
+      }
+
+      if (inflightQueryRef.current === query.trim()) {
+        return;
+      }
+
+      inflightQueryRef.current = query.trim();
+      setIsDiscovering(true);
+      setDiscoverError(null);
+
+      try {
+        const response = await api.discover(query.trim());
+
+        if (inflightQueryRef.current === query.trim()) {
+          if (response.success && response.data) {
+            setSuggestions(response.data.suggestions);
+          } else {
+            setDiscoverError(response.error || 'Discovery failed');
+            setSuggestions([]);
+          }
+        }
+      } catch (err) {
+        if (inflightQueryRef.current === query.trim()) {
+          setDiscoverError(
+            err instanceof Error ? err.message : 'Discovery failed'
+          );
+          setSuggestions([]);
+        }
+      } finally {
+        if (inflightQueryRef.current === query.trim()) {
+          inflightQueryRef.current = null;
+          setIsDiscovering(false);
+        }
+      }
+    },
+    [api]
+  );
+
+  const performRetrieve = useCallback(
+    async (term: string, isTopic: boolean = false) => {
+      setIsRetrieving(true);
+      setRetrieveError(null);
+
+      try {
+        const response = await api.retrieve(term, isTopic);
+
+        if (response.success && response.data) {
+          setSearchResults(response.data);
+        } else {
+          setRetrieveError(response.error || 'Retrieval failed');
+          setSearchResults(null);
+        }
+      } catch (err) {
+        setRetrieveError(
+          err instanceof Error ? err.message : 'Retrieval failed'
+        );
+        setSearchResults(null);
+      } finally {
+        setIsRetrieving(false);
+      }
+    },
+    [api]
+  );
+
+  const discoverTerms = useCallback(
+    (query: string) => {
+      // Clear any existing timer.
+      if (searchTimerRef.current) {
+        clearTimeout(searchTimerRef.current);
+      }
+
+      // Clear results when starting new discovery
+      setSearchResults(null);
+      setRetrieveError(null);
+
+      // Handle empty queries immediately
+      if (!query.trim()) {
+        setSuggestions([]);
+        setDiscoverError(null);
+        setIsDiscovering(false);
+        pendingQueryRef.current = null;
+        inflightQueryRef.current = null;
+        return;
+      }
+
+      // Always store the latest query for the next execution
+      pendingQueryRef.current = query;
+
+      const now = Date.now();
+      const timeSinceLastSearch = now - lastExecutionTimeRef.current;
+
+      // Start with the basic debounce delay
+      let delay = DEBOUNCE_MS;
+
+      // If we are inside the throttle window, we must wait longer
+      if (timeSinceLastSearch < BACKEND_THROTTLE_MS) {
+        const remainingThrottle = BACKEND_THROTTLE_MS - timeSinceLastSearch;
+        delay = Math.max(delay, remainingThrottle);
+      }
+
+      searchTimerRef.current = setTimeout(() => {
+        // Double check there's a query to run
+        if (pendingQueryRef.current !== null) {
+          const queryToExecute = pendingQueryRef.current;
+
+          // Update execution time as soon as the search is initiated
+          lastExecutionTimeRef.current = Date.now();
+          performDiscovery(queryToExecute);
+        }
+      }, delay);
+    },
+    [performDiscovery]
+  );
+
+  const selectSuggestion = useCallback(
+    (suggestion: DiscoverySuggestion) => {
+      // Clear suggestions
+      setSuggestions([]);
+      setDiscoverError(null);
+
+      // Perform retrieve based on suggestion type
+      const isTopic = suggestion.type === 'TOPIC';
+      performRetrieve(suggestion.term, isTopic);
+    },
+    [performRetrieve]
+  );
+
+  const selectExactMatch = useCallback(
+    (term: string) => {
+      // Clear suggestions
+      setSuggestions([]);
+      setDiscoverError(null);
+
+      // Check if term exists in current suggestions to determine if it's a topic
+      const matchingSuggestion = suggestions.find(
+        (s) => s.term.toLowerCase() === term.toLowerCase()
+      );
+      const isTopic = matchingSuggestion?.type === 'TOPIC';
+
+      performRetrieve(term, isTopic);
+    },
+    [suggestions, performRetrieve]
+  );
+
+  const clearAll = useCallback(() => {
+    // Clear the main search timer
+    if (searchTimerRef.current) {
+      clearTimeout(searchTimerRef.current);
+    }
+
+    // Reset all state
+    setSuggestions([]);
+    setIsDiscovering(false);
+    setDiscoverError(null);
+    setSearchResults(null);
+    setIsRetrieving(false);
+    setRetrieveError(null);
+    pendingQueryRef.current = null;
+    inflightQueryRef.current = null;
+    lastExecutionTimeRef.current = 0; // Reset throttle timer
+  }, []);
+
+  return {
+    suggestions,
+    isDiscovering,
+    discoverError,
+    searchResults,
+    isRetrieving,
+    retrieveError,
+    discoverTerms,
+    selectSuggestion,
+    selectExactMatch,
+    clearAll,
+  };
+}

package/templates/src/layouts/Layout.astro

@@ -45,48 +45,42 @@ const {
   impressions = [],
 } = Astro.props;
 
-const isDev = import.meta.env.DEV;
-
-// Get site status from the store
 const isInitialized = !freshInstallStore.get().needsSetup;
-
-// Conditionally set asset paths based on initialization status
+const goBackend = import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+const tenantId =
+  Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+const brandConfig = propBrandConfig || (await getBrandConfig(tenantId));
 const cssBasePath = isInitialized ? '/media/css' : '/styles';
 const fontBasePath = isInitialized ? '/media/fonts' : '/fonts';
-const mainStylesUrl =
-  isStoryKeep || isDev
+const mainStylesUrl = (() => {
+  const baseUrl = isStoryKeep
     ? `${cssBasePath}/storykeep.css`
     : `${cssBasePath}/frontend.css`;
-const goBackend = import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
-const tenantId =
-  Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+  if (!isStoryKeep && brandConfig?.STYLES_VER) {
+    return `${baseUrl}?v=${brandConfig.STYLES_VER}`;
+  }
+  return baseUrl;
+})();
 
-// Social media and SEO setup
-const brandConfig = propBrandConfig || (await getBrandConfig(tenantId));
 const defaultFavIcon = brandConfig.FAVICON || `/brand/favicon.ico`;
 const defaultSocialImageURL = ogImage || brandConfig.OG || `/brand/og.png`;
 const defaultSocialLogoURL = brandConfig.OGLOGO || `/brand/oglogo.png`;
 const defaultSocialTitle =
-  typeof title === `string` && title
-    ? title
-    : typeof brandConfig.OGTITLE === `string`
-      ? brandConfig.OGTITLE
-      : `TractStack dynamic website`;
+  title || brandConfig.OGTITLE || `TractStack dynamic website`;
 const defaultSocialAuthor = brandConfig.OGAUTHOR || `TractStack`;
 const defaultSocialDesc =
   description ||
   brandConfig.OGDESC ||
   `No-code website builder and content marketing platform`;
-const buildVersion = (() => {
-  if (modDatetime) return modDatetime.getTime();
-  if (pubDatetime) return pubDatetime.getTime();
-  return Date.now();
-})();
-const socialImageWithVersion = `${defaultSocialImageURL}?v=${buildVersion}`;
-const socialLogoWithVersion = `${defaultSocialLogoURL}?v=${buildVersion}`;
+const socialImageFullURL = brandConfig?.SITE_URL
+  ? `${brandConfig.SITE_URL.replace(/\/$/, '')}${defaultSocialImageURL}`
+  : `${defaultSocialImageURL}`;
+const socialLogoFullURL = brandConfig?.SITE_URL
+  ? `${brandConfig.SITE_URL.replace(/\/$/, '')}${defaultSocialLogoURL}`
+  : `${defaultSocialLogoURL}`;
 const gtagId = brandConfig?.GTAG || false;
 const gtagUrl =
-  typeof gtagId === `string` && gtagId.length > 1
+  gtagId && typeof gtagId === `string` && gtagId.length > 1
     ? `https://www.googletagmanager.com/gtag/js?id=${gtagId}`
     : null;
 const fullCanonicalUrl = brandConfig?.SITE_URL
@@ -94,6 +88,8 @@ const fullCanonicalUrl = brandConfig?.SITE_URL
     ? `${brandConfig.SITE_URL.replace(/\/$/, '')}${canonicalURL}`
     : `${brandConfig.SITE_URL.replace(/\/$/, '')}/${canonicalURL}`
   : canonicalURL;
+
+const enableBunny = import.meta.env.PUBLIC_ENABLE_BUNNY === 'true';
 ---
 
 <!doctype html>
@@ -114,6 +110,11 @@ const fullCanonicalUrl = brandConfig?.SITE_URL
     <link rel="stylesheet" href={mainStylesUrl} />
     <link rel="sitemap" href="/sitemap.xml" />
 
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
+    />
+
     <meta name="storyfragment-id" content={storyfragmentId} />
     <meta name="session-id" content={sessionId} />
 
@@ -134,14 +135,14 @@ const fullCanonicalUrl = brandConfig?.SITE_URL
     <meta property="og:type" content="website" />
     <meta property="og:description" content={defaultSocialDesc} />
     <meta property="og:url" content={fullCanonicalUrl} />
-    <meta property="og:image" content={socialImageWithVersion} />
-    <meta property="og:logo" content={socialLogoWithVersion} />
+    <meta property="og:image" content={socialImageFullURL} />
+    <meta property="og:logo" content={socialLogoFullURL} />
 
     <meta property="twitter:card" content="summary_large_image" />
     <meta property="twitter:url" content={fullCanonicalUrl} />
     <meta property="twitter:title" content={defaultSocialTitle} />
     <meta property="twitter:description" content={defaultSocialDesc} />
-    <meta property="twitter:image" content={socialImageWithVersion} />
+    <meta property="twitter:image" content={socialImageFullURL} />
 
     {
       pubDatetime && (
@@ -183,16 +184,17 @@ const fullCanonicalUrl = brandConfig?.SITE_URL
 
     <ClientRouter />
 
-    <script
-      is:inline
-      type="text/javascript"
-      src="//assets.mediadelivery.net/playerjs/player-0.1.0.min.js"></script>
+    {
+      enableBunny && (
+        <script
+          is:inline
+          type="text/javascript"
+          src="//assets.mediadelivery.net/playerjs/player-0.1.0.min.js"
+        />
+      )
+    }
 
-    <script
-      src="https://unpkg.com/htmx.org@2.0.4"
-      crossorigin="anonymous"
-      is:inline
-      is:persist></script>
+    <script src="/client/htmx.min.js" is:inline></script>
 
     <script
       define:vars={{
@@ -204,87 +206,194 @@ const fullCanonicalUrl = brandConfig?.SITE_URL
       }}
       is:inline
     >
-      function createTractstackConfig() {
-        window.TRACTSTACK_CONFIG = {
-          configured: true,
-          backendUrl: goBackend,
-          tenantId: tenantId,
-          fontBasePath: fontBasePath,
-          storyfragmentId: storyfragmentId,
-          sessionId: sessionId,
-        };
-      }
+      // Capture the initial, server-rendered values from define:vars into top-level constants.
+      // This makes the scope explicit and resolves the linter error.
+      const initialStoryfragmentId = storyfragmentId;
+      const initialSessionId = sessionId;
 
       function updateTractstackConfig() {
-        // Get current values from meta tags
         const storyfragmentMeta = document.querySelector(
           'meta[name="storyfragment-id"]'
         );
         const sessionMeta = document.querySelector('meta[name="session-id"]');
 
-        const currentStoryfragmentId = storyfragmentMeta
-          ? storyfragmentMeta.content
-          : null;
-        const currentSessionId = sessionMeta ? sessionMeta.content : sessionId;
-        if (window.TRACTSTACK_CONFIG && currentStoryfragmentId) {
-          window.TRACTSTACK_CONFIG.storyfragmentId = currentStoryfragmentId;
-          window.TRACTSTACK_CONFIG.sessionId = currentSessionId;
-        } else {
-          createTractstackConfig();
-        }
-      }
-
-      // Check if config exists.
-      // If not, create it. This handles the very first load.
-      if (!window.TRACTSTACK_CONFIG) {
-        createTractstackConfig();
+        window.TRACTSTACK_CONFIG = {
+          configured: true,
+          backendUrl: goBackend,
+          tenantId: tenantId,
+          fontBasePath: fontBasePath,
+          // Use the meta tag if it exists (for subsequent client-side loads),
+          // otherwise fall back to the initial server-rendered value.
+          storyfragmentId: storyfragmentMeta
+            ? storyfragmentMeta.content
+            : initialStoryfragmentId,
+          sessionId: sessionMeta ? sessionMeta.content : initialSessionId,
+        };
       }
 
-      // Update on subsequent loads, or set for the first time if script runs after initial setup
+      updateTractstackConfig();
       document.addEventListener('astro:page-load', updateTractstackConfig);
     </script>
   </head>
   <body class="font-main w-full">
-    {
-      !isEditor && (
-        <Header
-          title={title}
-          slug={slug}
-          brandConfig={brandConfig}
-          isContext={isContext}
-          isStoryKeep={isStoryKeep}
-          isEditable={isEditable}
-          sessionId={sessionId}
-          menu={menu}
-          storyfragmentId={storyfragmentId}
-          impressions={impressions}
-        />
-      )
-    }
-    <div
-      id="loading-indicator"
-      class="bg-myorange fixed left-0 top-0 z-50 h-1 w-full scale-x-0 transform transition-transform duration-300 ease-out"
-    >
-    </div>
-    <div id="content" class="transition-opacity duration-300">
-      <slot />
+    <div class="overflow-hidden">
+      {
+        !isEditor && (
+          <Header
+            title={title}
+            slug={slug}
+            brandConfig={brandConfig}
+            isContext={isContext}
+            isStoryKeep={isStoryKeep}
+            isEditable={isEditable}
+            sessionId={sessionId}
+            menu={menu}
+            storyfragmentId={storyfragmentId}
+            impressions={impressions}
+          />
+        )
+      }
+      <div
+        id="loading-backdrop"
+        class="pointer-events-none fixed inset-0"
+        style="opacity: 0; z-index: 10069; display: none; background-color: rgba(255, 255, 255, 0.3); backdrop-filter: blur(4px); transition: opacity 300ms;"
+      >
+      </div>
+      <div
+        id="loading-indicator"
+        class="bg-myorange fixed left-0 top-0 h-1 w-full scale-x-0 transform transition-transform duration-300 ease-out"
+        style="opacity: 0.5; filter: blur(0.5px); z-index: 99999;"
+      >
+      </div>
+
+      <div id="content" class="transition-opacity duration-300">
+        <slot />
+      </div>
+      {
+        !isEditor && (
+          <Footer
+            slug={slug}
+            brandConfig={brandConfig}
+            isContext={isContext}
+            menu={menu}
+            created={created}
+            backToTop={true}
+          />
+        )
+      }
     </div>
-    {
-      !isEditor && (
-        <Footer
-          slug={slug}
-          brandConfig={brandConfig}
-          isContext={isContext}
-          menu={menu}
-          created={created}
-          backToTop={true}
-        />
-      )
-    }
-    <script type="module" is:inline is:persist is:raw>
-      import '/client/sse.js';
-      import '/client/belief-events.js';
-      import '/client/analytics-events.js';
+
+    <script type="module" src="/client/app.js" is:inline is:persist></script>
+
+    <script type="module" src="/client/view.js" is:inline></script>
+
+    <script is:inline is:persist>
+      let navProgressInterval = null;
+      let navSafetyTimeout = null;
+
+      function startNavLoadingAnimation() {
+        const loadingIndicator = document.getElementById('loading-indicator');
+        const loadingBackdrop = document.getElementById('loading-backdrop');
+        const content = document.getElementById('content');
+
+        if (
+          window.matchMedia('(prefers-reduced-motion: no-preference)')
+            .matches &&
+          loadingIndicator &&
+          loadingBackdrop
+        ) {
+          if (navSafetyTimeout !== null) {
+            clearTimeout(navSafetyTimeout);
+            navSafetyTimeout = null;
+          }
+
+          loadingBackdrop.style.display = 'block';
+          void loadingBackdrop.offsetHeight;
+          loadingBackdrop.style.opacity = '1';
+
+          if (content) {
+            content.style.opacity = '0.7';
+          }
+
+          loadingIndicator.style.transform = 'scaleX(0)';
+          loadingIndicator.style.display = 'block';
+
+          let progress = 0;
+          navProgressInterval = setInterval(() => {
+            progress += 2;
+            if (progress > 90) {
+              if (navProgressInterval !== null) {
+                clearInterval(navProgressInterval);
+              }
+              return;
+            }
+            loadingIndicator.style.transform = `scaleX(${progress / 100})`;
+          }, 20);
+
+          navSafetyTimeout = setTimeout(() => {
+            stopNavLoadingAnimation();
+          }, 10000);
+        }
+      }
+
+      function stopNavLoadingAnimation() {
+        const loadingIndicator = document.getElementById('loading-indicator');
+        const loadingBackdrop = document.getElementById('loading-backdrop');
+        const content = document.getElementById('content');
+
+        if (navSafetyTimeout !== null) {
+          clearTimeout(navSafetyTimeout);
+          navSafetyTimeout = null;
+        }
+
+        if (
+          window.matchMedia('(prefers-reduced-motion: no-preference)')
+            .matches &&
+          loadingIndicator &&
+          loadingBackdrop
+        ) {
+          if (navProgressInterval !== null) {
+            clearInterval(navProgressInterval);
+            navProgressInterval = null;
+          }
+
+          loadingIndicator.style.transform = 'scaleX(1)';
+
+          if (content) {
+            content.style.opacity = '1';
+          }
+
+          loadingBackdrop.style.opacity = '0';
+
+          setTimeout(() => {
+            loadingIndicator.style.display = 'none';
+            loadingIndicator.style.transform = 'scaleX(0)';
+            loadingBackdrop.style.display = 'none';
+          }, 300);
+        }
+      }
+
+      function setupNavigationLoading() {
+        document.addEventListener('astro:before-preparation', () => {
+          startNavLoadingAnimation();
+        });
+
+        document.addEventListener('astro:page-load', () => {
+          stopNavLoadingAnimation();
+        });
+
+        document.addEventListener('astro:after-swap', () => {
+          stopNavLoadingAnimation();
+        });
+      }
+
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', setupNavigationLoading);
+      } else {
+        setupNavigationLoading();
+      }
+
+      document.addEventListener('astro:page-load', setupNavigationLoading);
     </script>
   </body>
 </html>

package/templates/src/lib/storyData.ts

@@ -1,5 +1,5 @@
 import { handleFailedResponse } from '@/utils/backend';
-import type { ImpressionNode } from '@/types/compositorTypes';
+import type { ImpressionNode, ResourceNode } from '@/types/compositorTypes';
 
 export interface StoryData {
   id: string;
@@ -7,11 +7,14 @@ export interface StoryData {
   slug: string;
   paneIds: string[];
   codeHookTargets: Record<string, string>;
+  codeHookVisibility: Record<string, boolean | string[]>;
+  resourcesPayload: Record<string, ResourceNode[]>;
   impressions: ImpressionNode[];
   fragments: Record<string, string>;
   menu: any;
   isHome: boolean;
   created: string;
+  socialImagePath?: string | null;
 }
 
 export async function getStoryData(