astro-tractstack 2.0.0-rc.15 → 2.0.0-rc.17

package/package.json

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

package/templates/custom/minimal/CodeHook.astro

@@ -1,7 +1,4 @@
 ---
-// CodeHook Dispatcher - Minimal Version
-// Framework components are always available, custom components are commented for guidance
-
 import FeaturedContent from '@/components/codehooks/FeaturedContent.astro';
 import ListContent from '@/components/codehooks/ListContent.astro';
 import BunnyVideoWrapper from '@/components/codehooks/BunnyVideoWrapper.astro';
@@ -12,6 +9,7 @@ import type { FullContentMapItem } from '@/types/tractstack';
 export interface Props {
   target: string;
   fullContentMap: FullContentMapItem[];
+  resourcesPayload?: Record<string, any[]>;
   options?: {
     params?: {
       options?: string;
@@ -19,7 +17,7 @@ export interface Props {
   };
 }
 
-const { target, options, fullContentMap } = Astro.props;
+const { target, options, fullContentMap /* resourcesPayload */ } = Astro.props;
 
 export const components = {
   'featured-content': true,

package/templates/custom/minimal/CustomRoutes.astro

@@ -1,7 +1,4 @@
 ---
-// V2 Custom Routes - Minimal Version
-// This is a stub - implement your custom routes here
-
 export interface Props {
   route: string;
   slug: string;
@@ -15,9 +12,6 @@ const { route, slug, resources } = Astro.props;
 export const routes = {
   // collections: true,  // Uncomment to enable collections route
 };
-
-// Example implementation for collections:
-// const payload = resources; // V2 resources are already filtered by backend
 ---
 
 {

package/templates/custom/with-examples/CodeHook.astro

@@ -1,7 +1,4 @@
 ---
-// V2 CodeHook Dispatcher - With Examples
-// Framework components and custom examples are available
-
 import CustomHero from './CustomHero.astro';
 import FeaturedContent from '@/components/codehooks/FeaturedContent.astro';
 import ListContent from '@/components/codehooks/ListContent.astro';
@@ -12,6 +9,7 @@ import type { FullContentMapItem } from '@/types/tractstack';
 export interface Props {
   target: string;
   fullContentMap: FullContentMapItem[];
+  resourcesPayload?: Record<string, any[]>;
   options?: {
     params?: {
       options?: string;
@@ -19,7 +17,7 @@ export interface Props {
   };
 }
 
-const { target, options, fullContentMap } = Astro.props;
+const { target, options, fullContentMap /* resourcesPayload */ } = Astro.props;
 
 export const components = {
   'custom-hero': true,

package/templates/custom/with-examples/CustomRoutes.astro

@@ -1,7 +1,4 @@
 ---
-// V2 Custom Routes - With Examples
-// Full Collections implementation included
-
 import Collections from './pages/Collections.astro';
 
 export interface Props {
@@ -17,7 +14,6 @@ export const routes = {
   collections: true,
 };
 
-// V2: Resources are already filtered by backend, no client-side extraction needed
 const payload = resources;
 ---
 

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/compositor/nodes/Pane.tsx

@@ -29,7 +29,7 @@ const CodeHookContainer = ({
             value && (
               <div key={key} className="flex items-start">
                 <span className="min-w-24 font-bold text-gray-600">{key}:</span>
-                <span className="ml-2 text-gray-800">
+                <span className="ml-2 truncate text-gray-800">
                   {JSON.stringify(value)}
                 </span>
               </div>

package/templates/src/components/edit/PanelSwitch.tsx

@@ -312,6 +312,7 @@ const PanelSwitch = ({
 
     case 'style-code-config':
       if (clickedNode) return <StyleWidgetConfigPanel node={clickedNode} />;
+      break;
 
     case 'style-code-add':
     case 'style-code-container-add':

package/templates/src/components/edit/pane/AddPanePanel_codehook.tsx

@@ -153,7 +153,8 @@ const AddPaneCodeHookPanel = ({
       font-weight: bold;
     }
     .hook-item-available:hover {
-      background-color: rgba(8, 145, 178, 0.1); /* bg-cyan-600/10 */
+      background-color: #0891b2;
+      color: #fff;
     }
     .hook-item-disabled {
       background-color: #f9fafb; /* bg-gray-50 */

package/templates/src/components/edit/pane/ConfigPanePanel.tsx

@@ -68,6 +68,7 @@ const ConfigPanePanel = ({ nodeId }: ConfigPanePanelProps) => {
   };
 
   const handleCodeHookConfig = () => {
+    ctx.toolModeValStore.set({ value: 'styles' });
     settingsPanelStore.set({
       action: 'setup-codehook',
       nodeId: nodeId,

package/templates/src/components/edit/panels/StyleWidgetPanel.tsx

@@ -5,6 +5,7 @@ import { StylesMemory } from '@/components/edit/state/StylesMemory';
 import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
 import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
 import { widgetMeta } from '@/constants';
+import { getCtx } from '@/stores/nodes';
 import type {
   FlatNode,
   MarkdownPaneFragmentNode,
@@ -271,6 +272,7 @@ const StyleWidgetPanel = ({
   };
 
   const handleWidgetConfig = () => {
+    getCtx().toolModeValStore.set({ value: 'styles' });
     settingsPanelStore.set({
       action: `style-code-config`,
       nodeId: node.id,

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/layouts/Layout.astro

@@ -50,19 +50,30 @@ 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 || `/brand/favicon.ico`;
 const defaultSocialImageURL = ogImage || brandConfig.OG || `/brand/og.png`;
 const defaultSocialLogoURL = brandConfig.OGLOGO || `/brand/oglogo.png`;

package/templates/src/lib/storyData.ts

@@ -7,6 +7,7 @@ export interface StoryData {
   slug: string;
   paneIds: string[];
   codeHookTargets: Record<string, string>;
+  resourcesPayload: Record<string, any[]>;
   impressions: ImpressionNode[];
   fragments: Record<string, string>;
   menu: any;

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`);
@@ -134,6 +135,7 @@ if (!brandConfig.SITE_INIT) {
                   target={codeHookTargets[paneId]}
                   paneId={paneId}
                   fullContentMap={fullContentMap}
+                  resourcesPayload={resourcesPayload}
                   noPaneId={true}
                 />
               </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 = '';
@@ -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/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');
+        //}
       }
     }
   };