astro-tractstack 2.0.0-rc.2 → 2.0.0-rc.21

package/templates/src/layouts/Layout.astro

@@ -50,22 +50,33 @@ 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 cssBasePath = isInitialized ? '/media/css' : '/styles';
-const fontBasePath = isInitialized ? '/media/fonts' : '/fonts';
-const mainStylesUrl =
-  isStoryKeep || isDev
-    ? `${cssBasePath}/storykeep.css`
-    : `${cssBasePath}/frontend.css`;
+// ensure we have brand config!
 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));
+
+// Conditionally set asset paths based on initialization status
+const cssBasePath = isInitialized ? '/media/css' : '/styles';
+const fontBasePath = isInitialized ? '/media/fonts' : '/fonts';
+const mainStylesUrl = (() => {
+  const baseUrl =
+    isStoryKeep || isDev
+      ? `${cssBasePath}/storykeep.css`
+      : `${cssBasePath}/frontend.css`;
+
+  // Only add version for frontend.css (the dynamic one)
+  if (!isStoryKeep && !isDev && 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 || `/favicon.ico`;
-const defaultSocialImageURL = ogImage || brandConfig.OG || `/og.png`;
-const defaultSocialLogoURL = brandConfig.OGLOGO || `/oglogo.png`;
+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
@@ -264,8 +275,10 @@ const fullCanonicalUrl = brandConfig?.SITE_URL
     <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"
+      style="opacity: 0.5; filter: blur(0.5px);"
     >
     </div>
+
     <div id="content" class="transition-opacity duration-300">
       <slot />
     </div>
@@ -286,5 +299,101 @@ const fullCanonicalUrl = brandConfig?.SITE_URL
       import '/client/belief-events.js';
       import '/client/analytics-events.js';
     </script>
+
+    <script is:inline is:persist>
+      // Navigation loading animation - exact copy of helpers.ts implementation
+      let navProgressInterval = null;
+      let navSafetyTimeout = null;
+
+      function startNavLoadingAnimation() {
+        const loadingIndicator = document.getElementById('loading-indicator');
+
+        if (
+          window.matchMedia('(prefers-reduced-motion: no-preference)')
+            .matches &&
+          loadingIndicator
+        ) {
+          // Clear any existing safety timeout
+          if (navSafetyTimeout !== null) {
+            clearTimeout(navSafetyTimeout);
+            navSafetyTimeout = null;
+          }
+
+          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);
+
+          // AUTOMATIC SHUTOFF: Always stop after 10 seconds
+          navSafetyTimeout = setTimeout(() => {
+            stopNavLoadingAnimation();
+          }, 10000);
+        }
+      }
+
+      function stopNavLoadingAnimation() {
+        const loadingIndicator = document.getElementById('loading-indicator');
+        const content = document.getElementById('content');
+
+        // Clear safety timeout
+        if (navSafetyTimeout !== null) {
+          clearTimeout(navSafetyTimeout);
+          navSafetyTimeout = null;
+        }
+
+        if (
+          window.matchMedia('(prefers-reduced-motion: no-preference)')
+            .matches &&
+          loadingIndicator
+        ) {
+          if (navProgressInterval !== null) {
+            clearInterval(navProgressInterval);
+            navProgressInterval = null;
+          }
+          loadingIndicator.style.transform = 'scaleX(1)';
+          content.style.opacity = '1';
+
+          setTimeout(() => {
+            loadingIndicator.style.display = 'none';
+            loadingIndicator.style.transform = 'scaleX(0)';
+          }, 300);
+        }
+      }
+
+      // Set up navigation loading
+      function setupNavigationLoading() {
+        document.addEventListener('astro:before-preparation', () => {
+          startNavLoadingAnimation();
+        });
+
+        document.addEventListener('astro:page-load', () => {
+          stopNavLoadingAnimation();
+        });
+
+        document.addEventListener('astro:after-swap', () => {
+          stopNavLoadingAnimation();
+        });
+      }
+
+      // Initialize
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', setupNavigationLoading);
+      } else {
+        setupNavigationLoading();
+      }
+
+      // Re-setup after navigation
+      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,6 +7,7 @@ export interface StoryData {
   slug: string;
   paneIds: string[];
   codeHookTargets: Record<string, string>;
+  resourcesPayload: Record<string, ResourceNode[]>;
   impressions: ImpressionNode[];
   fragments: Record<string, string>;
   menu: any;

package/templates/src/pages/[...slug]/edit.astro

@@ -168,7 +168,13 @@ for (const [key, value] of Astro.url.searchParams) {
     <StoryKeepToolMode isContext={false} client:only="react" />
 
     <!-- Main Content Area -->
-    <main id="mainContent" class="relative flex-1">
+    <main
+      id="mainContent"
+      class="relative flex-1"
+      style={{
+        paddingBottom: 'var(--bottom-right-controls-bottom-offset, 16px)',
+      }}
+    >
       <div class="bg-myblue/20 bg-mylightgrey h-full p-1.5">
         <div
           class="h-fit min-h-screen"
@@ -195,7 +201,7 @@ for (const [key, value] of Astro.url.searchParams) {
   <!-- Floating Controls (Settings Panel & HUD OR ToolBar) -->
   <aside
     id="settingsControls"
-    class="z-101 pointer-events-none fixed bottom-24 right-0 flex max-h-screen flex-col items-end gap-2 overflow-y-auto p-4 md:bottom-0"
+    class="z-101 pointer-events-none fixed bottom-24 right-0 flex max-h-screen flex-col items-end gap-2 overflow-visible p-4 md:bottom-0"
   >
     <div class="pointer-events-auto">
       <StoryKeepToolBar client:only="react" />
@@ -203,7 +209,7 @@ for (const [key, value] of Astro.url.searchParams) {
     <div class="pointer-events-auto">
       <SettingsPanel
         config={brandConfig}
-        availableCodeHooks={['featured-content', 'list-content', 'bunny-video']}
+        availableCodeHooks={Object.keys(codeHookComponents)}
         client:only="react"
       />
     </div>

package/templates/src/pages/[...slug].astro

@@ -43,6 +43,7 @@ const storyfragmentId = storyData.id;
 const storyfragmentTitle = storyData.title || 'Untitled Story';
 const paneIds = storyData.paneIds || [];
 const codeHookTargets = storyData.codeHookTargets || {};
+const resourcesPayload = storyData.resourcesPayload || {};
 
 if (paneIds.length === 0) {
   console.log(`Empty Story Fragment. Redirecting to /storykeep`);
@@ -116,7 +117,7 @@ if (!brandConfig.SITE_INIT) {
   impressions={storyData.impressions || []}
   storyfragmentId={storyfragmentId}
 >
-  <main id="main-content" class="min-h-screen w-full">
+  <main id="main-content" class="w-full">
     <div class="panes-container">
       {
         paneIds.map((paneId: string) => (
@@ -134,6 +135,7 @@ if (!brandConfig.SITE_INIT) {
                   target={codeHookTargets[paneId]}
                   paneId={paneId}
                   fullContentMap={fullContentMap}
+                  resourcesPayload={resourcesPayload}
                   noPaneId={true}
                 />
               </div>

package/templates/src/pages/api/tailwind.ts

@@ -65,7 +65,16 @@ export const POST: APIRoute = async ({ request }) => {
 
     // Generate CSS using JIT
     const tailwindCss = createTailwindcss({ tailwindConfig });
-    const htmlContent = [`<span class="${allClasses.join(' ')}"></span>`];
+    const baseClasses = allClasses.filter(
+      (c) => !c.startsWith('md:') && !c.startsWith('xl:')
+    );
+    const mdClasses = allClasses.filter((c) => c.startsWith('md:'));
+    const xlClasses = allClasses.filter((c) => c.startsWith('xl:'));
+    const htmlContent = [
+      `<div class="${baseClasses.join(' ')}"></div>`,
+      `<div class="md:block ${mdClasses.join(' ')}"></div>`,
+      `<div class="xl:block ${xlClasses.join(' ')}"></div>`,
+    ];
     const generatedCss = await tailwindCss.generateStylesFromContent(
       `@tailwind base; @tailwind utilities;`,
       htmlContent

package/templates/src/pages/context/[...contextSlug]/edit.astro

@@ -159,7 +159,13 @@ for (const [key, value] of Astro.url.searchParams) {
     <StoryKeepToolMode isContext={true} client:only="react" />
 
     <!-- Main Content Area -->
-    <main id="mainContent" class="relative flex-1">
+    <main
+      id="mainContent"
+      class="relative flex-1"
+      style={{
+        paddingBottom: 'var(--bottom-right-controls-bottom-offset, 16px)',
+      }}
+    >
       <div class="bg-myblue/20 bg-mylightgrey h-full p-1.5">
         <div
           class="h-fit min-h-screen"
@@ -194,7 +200,7 @@ for (const [key, value] of Astro.url.searchParams) {
     <div class="pointer-events-auto">
       <SettingsPanel
         config={brandConfig}
-        availableCodeHooks={['featured-content', 'list-content', 'bunny-video']}
+        availableCodeHooks={Object.keys(codeHookComponents)}
         client:only="react"
       />
     </div>

package/templates/src/pages/context/[...contextSlug].astro

@@ -59,6 +59,7 @@ try {
 const paneId = contextPaneData.id;
 const paneTitle = contextPaneData.title || 'Context';
 const codeHookTarget = contextPaneData.codeHookTarget || null;
+const resourcesPayload = storyData.resourcesPayload || {};
 
 // Get rendered fragment for the context pane
 let fragmentData = '';
@@ -112,7 +113,7 @@ if (!brandConfig.SITE_INIT) {
   brandConfig={brandConfig}
   storyfragmentId={paneId}
 >
-  <main id="main-content" class="min-h-screen w-full">
+  <main id="main-content" class="w-full">
     <div
       id={`pane-${paneId}`}
       data-pane-id={paneId}
@@ -123,7 +124,11 @@ if (!brandConfig.SITE_INIT) {
     >
       {
         codeHookTarget ? (
-          <CodeHook target={codeHookTarget} fullContentMap={fullContentMap} />
+          <CodeHook
+            target={codeHookTarget}
+            resourcesPayload={resourcesPayload}
+            fullContentMap={fullContentMap}
+          />
         ) : (
           <Fragment set:html={fragmentData} />
         )

package/templates/src/pages/storykeep/advanced.astro

@@ -54,7 +54,7 @@ try {
 
 <Layout title={title} slug="storykeep" isStoryKeep={true}>
   <main id="main-content" class="min-h-screen w-full">
-    <div class="p-8">
+    <div class="max-w-5xl p-3.5 md:p-8">
       <StoryKeepDashboard
         client:only="react"
         fullContentMap={fullContentMap}

package/templates/src/pages/storykeep/branding.astro

@@ -43,7 +43,7 @@ try {
 
 <Layout title={title} slug="storykeep" isStoryKeep={true}>
   <main id="main-content" class="min-h-screen w-full">
-    <div class="p-8">
+    <div class="max-w-5xl p-3.5 md:p-8">
       <BrandingPageWrapper
         client:only="react"
         fullContentMap={fullContentMap}

package/templates/src/pages/storykeep/content.astro

@@ -50,7 +50,7 @@ try {
 
 <Layout title={title} slug="storykeep" isStoryKeep={true}>
   <main id="main-content" class="min-h-screen w-full">
-    <div class="p-8">
+    <div class="max-w-5xl p-3.5 md:p-8">
       <StoryKeepDashboard
         client:only="react"
         fullContentMap={fullContentMap}

package/templates/src/pages/storykeep/init.astro

@@ -31,6 +31,45 @@ const mainStylesUrl = isDev
     <link rel="stylesheet" href={mainStylesUrl} />
   </head>
   <body class="h-full">
-    <RegistrationForm client:load isInitMode={true} />
+    <div class="max-w-5xl p-3.5 md:p-8">
+      <RegistrationForm client:load isInitMode={true} />
+    </div>
+
+    <script>
+      // Ensure clean slate for fresh installation
+      (function initCleanSlate() {
+        try {
+          // Clear admin/editor auth cookies
+          document.cookie =
+            'admin_auth=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
+          document.cookie =
+            'editor_auth=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
+
+          // Clear all TractStack localStorage items
+          const tractStackKeys = [];
+          for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            if (key && key.startsWith('tractstack_')) {
+              tractStackKeys.push(key);
+            }
+          }
+          tractStackKeys.forEach((key) => localStorage.removeItem(key));
+
+          // Clear session-related items
+          localStorage.removeItem('tractstack_session_id');
+          localStorage.removeItem('tractstack_fingerprint');
+          localStorage.removeItem('tractstack_visit');
+          localStorage.removeItem('tractstack_entered_tracked');
+
+          // Clear session cookie
+          document.cookie =
+            'tractstack_session_id=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
+
+          console.log('TractStack: Clean slate initialization complete');
+        } catch (error) {
+          console.warn('TractStack: Error during clean slate init:', error);
+        }
+      })();
+    </script>
   </body>
 </html>

package/templates/src/pages/storykeep.astro

@@ -52,7 +52,7 @@ try {
 
 <Layout title={title} isStoryKeep={true} slug="storykeep">
   <main id="main-content" class="min-h-screen w-full">
-    <div class="p-3.5 md:p-8">
+    <div class="max-w-5xl p-3.5 md:p-8">
       <StoryKeepDashboard
         client:only="react"
         fullContentMap={fullContentMap}

package/templates/src/stores/nodes.ts

@@ -2316,10 +2316,41 @@ export class NodesContext {
 
   getDirtyNodesClassData(): { dirtyPaneIds: string[]; classes: string[] } {
     const dirtyNodes = this.getDirtyNodes();
+
     const dirtyPaneIds = dirtyNodes
       .filter((node) => node.nodeType === 'Pane')
       .map((node) => node.id);
-    const classes = extractClassesFromNodes(dirtyNodes);
+
+    // Collect all nodes that need class extraction
+    const allNodesToExtract: BaseNode[] = [];
+
+    // Find root dirty nodes (dirty nodes whose parents are NOT dirty)
+    const dirtyNodeIds = new Set(dirtyNodes.map((n) => n.id));
+    const rootDirtyNodes = dirtyNodes.filter(
+      (node) => !node.parentId || !dirtyNodeIds.has(node.parentId)
+    );
+
+    // For each root dirty node, traverse all descendants
+    rootDirtyNodes.forEach((rootNode) => {
+      // Add the root node itself
+      allNodesToExtract.push(rootNode);
+
+      // Traverse all descendants using breadth-first
+      const queue = [...this.getChildNodeIDs(rootNode.id)];
+      while (queue.length > 0) {
+        const currentId = queue.shift();
+        if (!currentId) continue;
+
+        const currentNode = this.allNodes.get().get(currentId);
+        if (currentNode) {
+          allNodesToExtract.push(currentNode);
+          const childrenIds = this.getChildNodeIDs(currentId);
+          queue.push(...childrenIds);
+        }
+      }
+    });
+
+    const classes = extractClassesFromNodes(allNodesToExtract);
 
     return { dirtyPaneIds, classes };
   }

package/templates/src/stores/storykeep.ts

@@ -1,6 +1,7 @@
 import { atom, map } from 'nanostores';
 import { persistentAtom } from '@nanostores/persistent';
 import { handleSettingsPanelMobile } from '@/utils/layout';
+import { getCtx, ROOT_NODE_NAME } from '@/stores/nodes';
 import type {
   FullContentMapItem,
   Theme,
@@ -116,6 +117,10 @@ export const setViewportMode = (mode: ViewportKey) => {
   } else {
     viewportKeyStore.setKey('value', mode);
   }
+
+  // Notify root node to trigger coordinated re-render
+  const ctx = getCtx();
+  ctx.notifyNode(ROOT_NODE_NAME);
 };
 
 export const toggleShowAnalytics = () => {