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

package/templates/src/components/storykeep/Dashboard_Analytics.tsx

@@ -238,7 +238,7 @@ export default function StoryKeepDashboard_Analytics({
       )}
 
       {/* Stats Cards Grid */}
-      <div className="mb-6 grid grid-cols-1 gap-4 md:grid-cols-3">
+      <div className="mb-6 grid grid-cols-3 gap-4">
         {stats.map((item) => {
           const period = item.period;
           let firstTimeValue = 0,
@@ -261,11 +261,11 @@ export default function StoryKeepDashboard_Analytics({
           return (
             <div
               key={item.period}
-              className="rounded-lg border border-gray-100 bg-white px-4 py-3 shadow-sm transition-colors hover:border-cyan-100"
+              className="rounded-lg border border-gray-100 bg-white px-2 py-2.5 shadow-sm transition-colors hover:border-cyan-100 md:px-4 md:py-3"
             >
               <dt className="text-sm font-bold text-gray-800">{item.name}</dt>
 
-              <dd className="mt-2">
+              <dd className="mt-1 md:mt-2">
                 <div className="flex items-end justify-between">
                   <div className="flex-1">
                     <div className="text-sm text-gray-600">Events</div>
@@ -276,10 +276,11 @@ export default function StoryKeepDashboard_Analytics({
                 </div>
               </dd>
 
-              <hr className="my-3.5 border-gray-100" />
+              <hr className="my-1.5 border-gray-100 md:my-3.5" />
 
               <dd>
-                <div className="flex items-end justify-between">
+                {/* Desktop: side-by-side layout */}
+                <div className="hidden items-end justify-between md:flex">
                   <div className="flex-1">
                     <div className="text-sm text-gray-600">
                       Anonymous Visitors
@@ -299,13 +300,35 @@ export default function StoryKeepDashboard_Analytics({
                     </div>
                   </div>
                 </div>
+
+                {/* Mobile: stacked layout */}
+                <div className="md:hidden">
+                  <div className="mb-1.5">
+                    <div className="text-sm text-gray-600">
+                      Anonymous Visitors
+                    </div>
+                    <div className="text-2xl font-bold tracking-tight text-cyan-700">
+                      {firstTimeValue === 0
+                        ? '-'
+                        : formatNumber(firstTimeValue)}
+                    </div>
+                  </div>
+                  <div>
+                    <div className="text-sm text-gray-600">Known Leads</div>
+                    <div className="text-2xl font-bold tracking-tight text-cyan-700">
+                      {returningValue === 0
+                        ? '-'
+                        : formatNumber(returningValue)}
+                    </div>
+                  </div>
+                </div>
               </dd>
             </div>
           );
         })}
 
         {/* Total Leads Card */}
-        <div className="rounded-lg border border-gray-100 bg-white px-4 py-3 shadow-sm transition-colors hover:border-cyan-100 md:col-span-3">
+        <div className="col-span-3 rounded-lg border border-gray-100 bg-white px-4 py-3 shadow-sm transition-colors hover:border-cyan-100">
           <div className="flex items-center justify-between">
             <dt className="text-sm font-bold text-gray-800">Total Leads</dt>
             <div className="flex items-center gap-2">
@@ -369,7 +392,7 @@ export default function StoryKeepDashboard_Analytics({
       </div>
 
       {/* User Journey Section */}
-      <div className="mb-6 overflow-hidden">
+      <div className="mb-6 overflow-visible">
         <h3 className="mb-4 text-lg font-bold text-gray-900">
           User Journey Analytics
         </h3>

package/templates/src/components/storykeep/Dashboard_Content.tsx

@@ -64,6 +64,12 @@ const StoryKeepDashboard_Content = ({
     handleContentSubtabChange(tabId as any, setActiveContentTab);
   };
 
+  useEffect(() => {
+    if (createMenu) {
+      setActiveContentTab('manage');
+    }
+  }, [createMenu]);
+
   // Lightweight content summary fetch with retry logic
   useEffect(() => {
     let retryCount = 0;

package/templates/src/components/storykeep/widgets/Wizard.tsx

@@ -1,12 +1,13 @@
 import { useState, useEffect } from 'react';
 import { useStore } from '@nanostores/react';
 import { skipWizard } from '@/stores/navigation';
+import { fullContentMapStore } from '@/stores/analytics';
 import type { FullContentMapItem, BrandConfig } from '@/types/tractstack';
 
 interface StoryKeepWizardProps {
   fullContentMap: FullContentMapItem[];
   homeSlug: string;
-  brandConfig: BrandConfig; // Now received as prop instead of fetched
+  brandConfig: BrandConfig;
 }
 
 interface WizardData {
@@ -50,7 +51,7 @@ const wizardSteps: WizardStep[] = [
     key: 'hasAnyMenu',
     message: "A menu helps visitors navigate. Let's create one now.",
     buttonText: 'Create a Menu',
-    href: '/storykeep/content/menus/create',
+    href: '/storykeep/content?create-menu',
   },
   {
     key: 'hasMenu',
@@ -128,11 +129,18 @@ export default function Wizard({
   const [wizardData, setWizardData] = useState<WizardData | null>(null);
   const [loading, setLoading] = useState(true);
   const $skipWizard = useStore(skipWizard);
+  const $clientContentMap = useStore(fullContentMapStore);
+  const activeContentMap =
+    $clientContentMap?.data?.length > 0
+      ? $clientContentMap.data
+      : fullContentMap;
 
   useEffect(() => {
     const buildWizardData = async () => {
       try {
-        const homePage = fullContentMap.find((item) => item.slug === homeSlug);
+        const homePage = activeContentMap.find(
+          (item) => item.slug === homeSlug
+        );
 
         let homeData = null;
         if (homePage) {
@@ -165,7 +173,7 @@ export default function Wizard({
           hasPanes: !!homePage?.panes?.length,
           hasSeo: !!homePage?.description,
           hasMenu: !!homeData?.menuId,
-          hasAnyMenu: fullContentMap.some((item) => item.type === 'Menu'),
+          hasAnyMenu: activeContentMap.some((item) => item.type === 'Menu'),
         };
 
         setWizardData(data);
@@ -176,11 +184,10 @@ export default function Wizard({
       }
     };
 
-    // Only build wizard data if we have brandConfig
     if (brandConfig) {
       buildWizardData();
     }
-  }, [fullContentMap, homeSlug, brandConfig]); // Added brandConfig to dependencies
+  }, [activeContentMap, homeSlug, brandConfig]);
 
   if (loading || !wizardData || !brandConfig || $skipWizard) {
     return null;

package/templates/src/components/tenant/RegistrationForm.tsx

@@ -175,7 +175,7 @@ export default function RegistrationForm({
 
   return (
     <>
-      <div className="mx-auto max-w-2xl p-6">
+      <div className="mx-auto max-w-2xl p-6" style={{ paddingBottom: '112px' }}>
         <div className="rounded-lg bg-white p-8 shadow-lg">
           <div className="mb-8">
             <div className="h-16">
@@ -291,11 +291,13 @@ export default function RegistrationForm({
                 value={state.email}
                 onChange={(value) => updateField('email', value)}
                 type="email"
-                placeholder="john@example.com"
+                placeholder="susie@amazing.com"
                 error={errors.email}
               />
               <p className="mt-1 text-sm text-gray-500">
-                You'll receive an activation email at this address
+                {isInitMode
+                  ? `Used for password reset, etc.`
+                  : `You'll receive an activation email at this address`}
               </p>
             </div>
 

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}