astro-tractstack 2.0.0-rc.14 → 2.0.0-rc.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.0-rc.14",
+  "version": "2.0.0-rc.16",
   "description": "Astro integration for TractStack - redeeming the web from boring experiences",
   "type": "module",
   "main": "dist/index.js",

package/templates/src/components/Header.astro

@@ -160,12 +160,13 @@ const authStatus = {
 
       {/* Edit Icon */}
       {
-        isEditable ? (
+        isEditable &&
+        (authStatus.isAdmin || authStatus.userRole === 'editor') ? (
           <a
             data-astro-reload
             href={!isContext ? `/${slug}/edit` : `/context/${slug}/edit`}
             class="text-myblue/80 hover:text-myblue hover:rotate-6"
-            title={!isContext ? 'Edit this story' : 'Edit this pane'}
+            title={!isContext ? 'Edit this story' : 'Edit this page'}
           >
             <svg
               class="h-6 w-6"

package/templates/src/components/compositor/PanelVisibilityWrapper.tsx

@@ -51,26 +51,40 @@ const PanelVisibilityWrapper = ({
     const currentWrapper = wrapperRef.current;
     if (!currentWrapper) return;
 
-    // Always observe the panel, regardless of active state
+    // Skip intersection observer for 'add' panels - they behave differently
+    if (panelType === 'add') {
+      return;
+    }
+
     const observer = new IntersectionObserver(
       (entries) => {
-        // Only take action if this panel is currently active and not intersecting
-        if (!entries[0].isIntersecting && isActive) {
-          nodesCtx.closeAllPanels();
+        // Add delay to prevent immediate closing during panel activation
+        if (isActive) {
+          setTimeout(() => {
+            // Double-check the panel is still active before closing
+            const currentActiveMode = nodesCtx.activePaneMode.get();
+            const stillActive =
+              currentActiveMode.panel === panelType &&
+              currentActiveMode.paneId === nodeId;
+            if (!entries[0].isIntersecting && stillActive) {
+              console.log('❌ CLOSING PANEL DUE TO INTERSECTION OBSERVER!', {
+                panelType,
+                nodeId,
+              });
+              nodesCtx.closeAllPanels();
+            }
+          }, 100); // Small delay to allow panel to render
         }
       },
       {
-        threshold: 0.1, // Close when 90% of the panel is out of view
-        rootMargin: '-10px', // Small margin to make detection a bit more forgiving
+        threshold: 0.1,
+        rootMargin: '-10px',
       }
     );
 
     observer.observe(currentWrapper);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [nodeId, panelType, nodesCtx, isActive]); // Include isActive in dependencies
+    return () => observer.disconnect();
+  }, [nodeId, panelType, nodesCtx, isActive]);
 
   return (
     <div

package/templates/src/components/edit/state/SaveModal.tsx

@@ -505,62 +505,56 @@ export default function SaveModal({
           const { dirtyPaneIds, classes: dirtyClasses } =
             ctx.getDirtyNodesClassData();
 
-          if (dirtyClasses.length === 0) {
-            addDebugMessage(
-              'No dirty classes to process, skipping Tailwind update'
-            );
-          } else {
-            // STEP 1: Generate CSS using Astro API
-            const astroEndpoint = `/api/tailwind`;
-            const astroPayload = { dirtyPaneIds, dirtyClasses };
-            const astroResponse = await fetch(astroEndpoint, {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-                'X-Tenant-ID': tenantId,
-              },
-              credentials: 'include',
-              body: JSON.stringify(astroPayload),
-            });
-
-            if (!astroResponse.ok) {
-              throw new Error(
-                `CSS generation failed! status: ${astroResponse.status}`
-              );
-            }
+          // STEP 1: Generate CSS using Astro API
+          const astroEndpoint = `/api/tailwind`;
+          const astroPayload = { dirtyPaneIds, dirtyClasses };
+          const astroResponse = await fetch(astroEndpoint, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-Tenant-ID': tenantId,
+            },
+            credentials: 'include',
+            body: JSON.stringify(astroPayload),
+          });
 
-            const astroResult = await astroResponse.json();
+          if (!astroResponse.ok) {
+            throw new Error(
+              `CSS generation failed! status: ${astroResponse.status}`
+            );
+          }
 
-            if (!astroResult.success || !astroResult.generatedCss) {
-              throw new Error('CSS generation failed: no CSS returned');
-            }
+          const astroResult = await astroResponse.json();
 
-            addDebugMessage(
-              `CSS generated: ${astroResult.generatedCss.length} bytes for ${dirtyClasses.length} classes`
-            );
+          if (!astroResult.success || !astroResult.generatedCss) {
+            throw new Error('CSS generation failed: no CSS returned');
+          }
 
-            // STEP 2: Save CSS to Go backend
-            const goEndpoint = `${goBackend}/api/v1/tailwind/update`;
-            const goPayload = { frontendCss: astroResult.generatedCss };
-            const goResponse = await fetch(goEndpoint, {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-                'X-Tenant-ID': tenantId,
-              },
-              credentials: 'include',
-              body: JSON.stringify(goPayload),
-            });
+          addDebugMessage(
+            `CSS generated: ${astroResult.generatedCss.length} bytes for ${dirtyClasses.length} classes`
+          );
 
-            if (!goResponse.ok) {
-              throw new Error(`CSS save failed! status: ${goResponse.status}`);
-            }
+          // STEP 2: Save CSS to Go backend
+          const goEndpoint = `${goBackend}/api/v1/tailwind/update`;
+          const goPayload = { frontendCss: astroResult.generatedCss };
+          const goResponse = await fetch(goEndpoint, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-Tenant-ID': tenantId,
+            },
+            credentials: 'include',
+            body: JSON.stringify(goPayload),
+          });
 
-            const goResult = await goResponse.json();
-            addDebugMessage(
-              `CSS saved successfully: stylesVer ${goResult.stylesVer}`
-            );
+          if (!goResponse.ok) {
+            throw new Error(`CSS save failed! status: ${goResponse.status}`);
           }
+
+          const goResult = await goResponse.json();
+          addDebugMessage(
+            `CSS saved successfully: stylesVer ${goResult.stylesVer}`
+          );
         } catch (error) {
           const errorMsg =
             error instanceof Error ? error.message : 'Unknown error';

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">

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

@@ -34,5 +34,42 @@ const mainStylesUrl = isDev
     <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/utils/layout.ts

@@ -113,9 +113,9 @@ export function setupLayoutObservers(): void {
         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');
-        }
+        //if (mainContent) {
+        //  mainContent.classList.add('md:ml-16');
+        //}
       } else {
         // Normal static positioning when header is visible
         toolModeNav.classList.remove('md:fixed');
@@ -124,9 +124,9 @@ export function setupLayoutObservers(): void {
         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');
-        }
+        //if (mainContent) {
+        //  mainContent.classList.remove('md:ml-16');
+        //}
       }
     }
   };