astro-tractstack 2.0.0-rc.8 → 2.0.0

package/templates/src/utils/compositor/nodesHelper.ts

@@ -2,6 +2,7 @@ import { ulid } from 'ulid';
 import {
   TemplateBeliefNode,
   TemplateBunnyNode,
+  TemplateDisclosureNode,
   TemplateEmailSignUpNode,
   TemplateH2Node,
   TemplateH3Node,
@@ -56,6 +57,9 @@ export const getTemplateNode = (value: ToolAddMode): TemplateNode => {
     case 'identify':
       templateNode = cloneDeep(TemplateIdentifyAsNode);
       break;
+    case 'interactiveDisclosure':
+      templateNode = cloneDeep(TemplateDisclosureNode);
+      break;
     case 'p':
     default:
       templateNode = cloneDeep(TemplatePNode);

package/templates/src/utils/compositor/processMarkdown.ts

@@ -1,6 +1,8 @@
 import { ulid } from 'ulid';
 import { NodesContext } from '@/stores/nodes';
 import { fullContentMapStore } from '@/stores/storykeep';
+import { tailwindToHex } from './tailwindColors';
+import { SvgBreaks } from '@/constants/shapes';
 import { findUniqueSlug } from '@/utils/helpers';
 import type {
   PageDesign,
@@ -276,8 +278,20 @@ export async function createPagePanes(
         const aboveColor = abovePane?.bgColour || 'white';
         const nextContentPane = design.contentDesign(!useOdd);
         const belowColor = nextContentPane.bgColour;
-        breakTemplate.bgColour = aboveColor;
-        const svgFill = belowColor;
+        const breakData = breakTemplate.bgPane?.breakDesktop;
+        const shapeName = breakData
+          ? `${breakData.collection}${breakData.image}`
+          : '';
+        const isFlipped = (shapeName && SvgBreaks[shapeName]?.flipped) || false;
+
+        breakTemplate.bgColour = tailwindToHex(
+          isFlipped ? belowColor : aboveColor,
+          null
+        );
+        const svgFill = tailwindToHex(
+          isFlipped ? aboveColor : belowColor,
+          null
+        );
         if (breakTemplate.bgPane) {
           if (breakTemplate.bgPane.breakDesktop) {
             breakTemplate.bgPane.breakDesktop.svgFill = svgFill;

package/templates/src/utils/compositor/reduceNodesClassNames.ts

@@ -85,6 +85,10 @@ const reduceClassName = (
   if (useKeyAsClass && typeof v === 'string')
     return `${modifier}${applyPrefix(v)}`;
   if (typeof v === 'string' || typeof v === 'number') {
+    // Add check for empty string
+    if (typeof v === 'string' && v.trim() === '') {
+      return '';
+    }
     if (typeof v === 'string' && v.startsWith('-')) {
       return `${modifier}-${applyPrefix(`${thisSelector}${v}`)}`;
     }

package/templates/src/utils/compositor/templateMarkdownStyles.ts

@@ -360,6 +360,7 @@ export function getJustCopyDesign(
       baseClasses[2].mobile.maxW = '3xl';
       if (bordered) {
         baseClasses[2].mobile.rounded = 'lg';
+        baseClasses[2].mobile.shadow = 'md';
         baseClasses[2].mobile.bgCOLOR = getColor(
           {
             light: useOdd ? 'brand-2' : 'white',
@@ -371,7 +372,6 @@ export function getJustCopyDesign(
           },
           theme
         );
-        baseClasses[2].mobile.shadow = 'md';
       }
       break;
     }
@@ -385,6 +385,7 @@ export function getJustCopyDesign(
       baseClasses[2].mobile.textWRAP = 'balance';
       if (bordered) {
         baseClasses[2].mobile.rounded = 'lg';
+        baseClasses[2].mobile.shadow = 'md';
         baseClasses[2].mobile.bgCOLOR = getColor(
           {
             light: useOdd ? 'brand-2' : 'white',
@@ -396,7 +397,6 @@ export function getJustCopyDesign(
           },
           theme
         );
-        baseClasses[2].mobile.shadow = 'md';
       }
       break;
     }
@@ -408,6 +408,7 @@ export function getJustCopyDesign(
       baseClasses[2].mobile.textWRAP = 'pretty';
       if (bordered) {
         baseClasses[2].mobile.rounded = 'lg';
+        baseClasses[2].mobile.shadow = 'md';
         baseClasses[2].mobile.bgCOLOR = getColor(
           {
             light: useOdd ? 'brand-2' : 'white',
@@ -419,7 +420,6 @@ export function getJustCopyDesign(
           },
           theme
         );
-        baseClasses[2].mobile.shadow = 'md';
       }
     }
   }
@@ -507,6 +507,7 @@ export function getSubTitleDesign(
       baseClasses[2].mobile.maxW = '3xl';
       if (bordered) {
         baseClasses[2].mobile.rounded = 'lg';
+        baseClasses[2].mobile.shadow = 'md';
         baseClasses[2].mobile.bgCOLOR = getColor(
           {
             light: useOdd ? 'brand-2' : 'white',
@@ -518,7 +519,6 @@ export function getSubTitleDesign(
           },
           theme
         );
-        baseClasses[2].mobile.shadow = 'md';
       }
       break;
     }
@@ -557,6 +557,7 @@ export function getSubTitleDesign(
       baseClasses[2].mobile.textWRAP = 'balance';
       if (bordered) {
         baseClasses[2].mobile.rounded = 'lg';
+        baseClasses[2].mobile.shadow = 'md';
         baseClasses[2].mobile.bgCOLOR = getColor(
           {
             light: useOdd ? 'brand-2' : 'white',
@@ -568,7 +569,6 @@ export function getSubTitleDesign(
           },
           theme
         );
-        baseClasses[2].mobile.shadow = 'md';
       }
       break;
     }
@@ -605,6 +605,7 @@ export function getSubTitleDesign(
       baseClasses[2].mobile.textWRAP = 'pretty';
       baseClasses[2].mobile.maxW = '3xl';
       if (bordered) {
+        baseClasses[2].mobile.shadow = 'md';
         baseClasses[2].mobile.bgCOLOR = getColor(
           {
             light: useOdd ? 'brand-2' : 'white',
@@ -616,7 +617,6 @@ export function getSubTitleDesign(
           },
           theme
         );
-        baseClasses[2].mobile.shadow = 'md';
       }
       break;
     }
@@ -653,6 +653,7 @@ export function getSubTitleDesign(
       baseClasses[2].mobile.textWRAP = 'balance';
       if (bordered) {
         baseClasses[2].mobile.rounded = 'lg';
+        baseClasses[2].mobile.shadow = 'md';
         baseClasses[2].mobile.bgCOLOR = getColor(
           {
             light: useOdd ? 'brand-2' : 'white',
@@ -664,7 +665,6 @@ export function getSubTitleDesign(
           },
           theme
         );
-        baseClasses[2].mobile.shadow = 'md';
       }
       break;
     }
@@ -700,6 +700,7 @@ export function getSubTitleDesign(
       baseClasses[2].mobile.textALIGN = 'left';
       baseClasses[2].mobile.textWRAP = 'pretty';
       if (bordered) {
+        baseClasses[2].mobile.shadow = 'md';
         baseClasses[2].mobile.bgCOLOR = getColor(
           {
             light: useOdd ? 'brand-2' : 'white',
@@ -711,7 +712,6 @@ export function getSubTitleDesign(
           },
           theme
         );
-        baseClasses[2].mobile.shadow = 'md';
       }
       break;
     }
@@ -748,6 +748,7 @@ export function getSubTitleDesign(
       baseClasses[2].mobile.textWRAP = 'pretty';
       if (bordered) {
         baseClasses[2].mobile.rounded = 'lg';
+        baseClasses[2].mobile.shadow = 'md';
         baseClasses[2].mobile.bgCOLOR = getColor(
           {
             light: useOdd ? 'brand-2' : 'white',
@@ -759,7 +760,6 @@ export function getSubTitleDesign(
           },
           theme
         );
-        baseClasses[2].mobile.shadow = 'md';
       }
     }
   }
@@ -994,6 +994,7 @@ export const getIntroDesign = (
       parentClasses[2].mobile.textWRAP = 'balance';
       if (bordered) {
         parentClasses[2].mobile.rounded = 'lg';
+        parentClasses[2].mobile.shadow = 'lg';
         parentClasses[2].mobile.bgCOLOR = getColor(
           {
             light: useOdd ? 'brand-2' : 'white',
@@ -1005,7 +1006,6 @@ export const getIntroDesign = (
           },
           theme
         );
-        parentClasses[2].mobile.shadow = 'lg';
       }
       break;
     }
@@ -1019,6 +1019,7 @@ export const getIntroDesign = (
       parentClasses[2].mobile.textWRAP = 'pretty';
       parentClasses[2].mobile.maxW = '3xl';
       if (bordered) {
+        parentClasses[2].mobile.shadow = 'lg';
         parentClasses[2].mobile.bgCOLOR = getColor(
           {
             light: useOdd ? 'brand-2' : 'white',
@@ -1030,7 +1031,6 @@ export const getIntroDesign = (
           },
           theme
         );
-        parentClasses[2].mobile.shadow = 'lg';
       }
       break;
     }
@@ -1041,6 +1041,7 @@ export const getIntroDesign = (
         (parentClasses[2].mobile.textALIGN = 'left');
       parentClasses[2].mobile.textWRAP = 'pretty';
       if (bordered) {
+        parentClasses[2].mobile.shadow = 'lg';
         parentClasses[2].mobile.bgCOLOR = getColor(
           {
             light: useOdd ? 'brand-2' : 'white',
@@ -1052,7 +1053,6 @@ export const getIntroDesign = (
           },
           theme
         );
-        parentClasses[2].mobile.shadow = 'lg';
       }
     }
   }
@@ -1101,6 +1101,7 @@ export const getImageHeroSectionDefault = (
   parentClasses[2].mobile.textALIGN = 'left';
   parentClasses[2].mobile.textWRAP = 'pretty';
   if (bordered) {
+    parentClasses[2].mobile.shadow = 'lg';
     parentClasses[2].mobile.bgCOLOR = getColor(
       {
         light: useOdd ? 'brand-2' : 'white',
@@ -1112,7 +1113,6 @@ export const getImageHeroSectionDefault = (
       },
       theme
     );
-    parentClasses[2].mobile.shadow = 'lg';
   }
 
   return {

package/templates/src/utils/compositor/typeGuards.ts

@@ -136,6 +136,7 @@ export function isValidTag(tagName: string): tagName is Tag {
     'yt',
     'bunny',
     'belief',
+    'interactiveDisclosure',
     'identify',
     'toggle',
     'code',

package/templates/src/utils/customHelpers.ts

@@ -0,0 +1,38 @@
+// URL Helper: Strip category prefix from slug
+// e.g., "people-bleako" -> "bleako"
+export function getCleanSlug(categorySlug: string, fullSlug: string): string {
+  const prefix = `${categorySlug}-`;
+  return fullSlug.startsWith(prefix) ? fullSlug.slice(prefix.length) : fullSlug;
+}
+
+// Build proper URL for resource
+// e.g., category="people", slug="people-bleako" -> "/people/bleako"
+export function getResourceUrl(categorySlug: string, fullSlug: string): string {
+  const cleanSlug = getCleanSlug(categorySlug, fullSlug);
+  return `/${categorySlug}/${cleanSlug}`;
+}
+
+// Image Helper: Placeholder implementation
+export function getResourceImage(
+  id: string,
+  slug: string,
+  category: string
+): string {
+  console.log(`please define getResourceImage`, id, slug, category);
+  return '/static.jpg';
+}
+
+export function getResourceDescription(
+  id: string,
+  slug: string,
+  category: string
+): string | null {
+  console.log(`please define getResourceDescription`, id, slug, category);
+  return null;
+}
+
+// Initialize search data - override in custom implementation
+export function initSearch(): void {
+  // Default implementation does nothing
+  // Override this function in your custom implementation to load search data
+}

package/templates/src/utils/helpers.ts

@@ -328,8 +328,8 @@ export function useDropdownDirection(
       const spaceAbove = rect.top;
       const newOpenAbove = spaceBelow < 300 && spaceAbove > spaceBelow;
       const newMaxHeight = newOpenAbove
-        ? Math.min(spaceAbove - 10, 300)
-        : Math.min(spaceBelow - 10, 300);
+        ? Math.max(0, Math.min(spaceAbove - 20, 400))
+        : Math.max(0, Math.min(spaceBelow - 20, 400));
       setState({ openAbove: newOpenAbove, maxHeight: newMaxHeight });
     }
   }, [triggerRef]);

package/templates/src/utils/layout.ts

@@ -1,188 +1,116 @@
 import {
   settingsPanelOpenStore,
+  settingsPanelStore,
   headerPositionStore,
   setHeaderPosition,
   setMobileHeaderFaded,
 } from '@/stores/storykeep';
+import { debounce } from '@/utils/helpers';
 
-// Track whether initial scroll adjustment has been made for settings panel
 let hasScrolledForSettingsPanel = false;
 
-/**
- * Sets up CSS custom properties for dynamic layout positioning
- */
-export function setupLayoutStyles(): void {
-  // Calculate and set CSS custom properties for positioning
-  const updateBottomOffset = () => {
-    const mobileNavHeight = window.innerWidth < 801 ? 80 : 0;
-    const padding = 16;
-    const offset = `${mobileNavHeight + padding}px`;
-
-    document.documentElement.style.setProperty(
-      '--bottom-right-controls-bottom-offset',
-      offset
-    );
-  };
+// Replace your existing setupPaneObserver with this one.
+function setupPaneObserver() {
+  let currentObserver: IntersectionObserver | null = null;
 
-  // Set initial values
-  updateBottomOffset();
+  settingsPanelStore.subscribe((signalValue) => {
+    if (currentObserver) {
+      currentObserver.disconnect();
+      currentObserver = null;
+    }
 
-  // Update on resize
-  window.addEventListener('resize', updateBottomOffset);
+    if (signalValue && signalValue.nodeId) {
+      setTimeout(() => {
+        const { nodeId } = signalValue;
+
+        const targetElement =
+          document.getElementById(`pane-${nodeId}`) ||
+          document.querySelector(`[data-node-id="${nodeId}"]`);
+
+        if (targetElement) {
+          currentObserver = new IntersectionObserver(
+            ([entry]) => {
+              const signal = settingsPanelStore.get();
+              const now = Date.now();
+              if (signal?.editLock && now - signal.editLock < 100) {
+                return;
+              }
+              if (!entry.isIntersecting) {
+                settingsPanelStore.set(null);
+              }
+            },
+            { threshold: 0 }
+          );
+          currentObserver.observe(targetElement);
+        }
+      }, 100);
+    }
+  });
 }
 
-/**
- * Sets up scroll observers for header positioning behavior
- */
 export function setupLayoutObservers(): void {
-  const header = document.getElementById('storykeepHeader');
-  const toolModeNav = document.getElementById('mainNav');
-  const mainContent = document.getElementById('mainContent');
+  const storykeepHeader = document.getElementById('storykeepHeader');
   const settingsControls = document.getElementById('settingsControls');
   const standardHeader = document.querySelector('header');
 
-  if (!header) return;
+  if (!storykeepHeader || !settingsControls || !standardHeader) return;
 
-  let headerHeight = 0;
-  const updateHeaderHeight = () => {
-    if (standardHeader) {
-      headerHeight = standardHeader.offsetHeight;
-    }
+  let standardHeaderHeight = 0;
+  const updateStandardHeaderHeight = () => {
+    standardHeaderHeight = standardHeader.offsetHeight;
   };
 
-  const updateSettingsMargin = () => {
-    if (settingsControls && header) {
-      const storyKeepHeaderHeight = header.offsetHeight;
-      const viewportHeight = window.innerHeight;
-      const bottomOffset = window.innerWidth < 801 ? 96 : 16; // Mobile nav + padding
-
-      // Set top margin to avoid StoryKeep header overlap only
-      settingsControls.style.marginTop = `${storyKeepHeaderHeight + 20}px`;
-
-      // Set max height for inner scroll
-      const maxHeight =
-        viewportHeight - storyKeepHeaderHeight - bottomOffset - 20;
-      settingsControls.style.maxHeight = `${maxHeight}px`;
-    }
+  const updatePanelPosition = () => {
+    const headerRect = storykeepHeader.getBoundingClientRect();
+    const panelTop = headerRect.bottom;
+    settingsControls.style.top = `${panelTop}px`;
   };
 
   const handleScroll = () => {
     const scrollY = window.scrollY;
-    const shouldBeSticky = scrollY > headerHeight;
-
-    // Only update header position if it actually needs to change
+    const shouldBeSticky = scrollY > standardHeaderHeight;
     const currentPosition = headerPositionStore.get();
     const newPosition = shouldBeSticky ? 'sticky' : 'normal';
 
     if (currentPosition !== newPosition) {
       setHeaderPosition(newPosition);
-
-      if (shouldBeSticky) {
-        if (header) {
-          const headerHeight = header.offsetHeight;
-          // Add padding to body to prevent layout shift
-          document.body.style.paddingTop = `${headerHeight}px`;
-
-          header.style.position = 'fixed';
-          header.style.top = '0';
-          header.style.left = '0';
-          header.style.right = '0';
-          header.style.zIndex = '101';
-        }
-      } else {
-        if (header) {
-          // Remove padding when header is not fixed
-          document.body.style.paddingTop = '';
-
-          header.style.position = '';
-          header.style.top = '';
-          header.style.left = '';
-          header.style.right = '';
-          header.style.zIndex = '';
-        }
-      }
-    }
-
-    // Update tool mode nav position and main content margin
-    if (toolModeNav && window.innerWidth >= 801) {
       if (shouldBeSticky) {
-        // On desktop, make nav fixed when header is sticky
-        toolModeNav.classList.remove('md:static');
-        toolModeNav.classList.add('md:fixed');
-        toolModeNav.style.top = '60px'; // Below fixed header
-        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');
-        }
+        document.body.style.paddingTop = `${storykeepHeader.offsetHeight}px`;
+        storykeepHeader.style.position = 'fixed';
+        storykeepHeader.style.top = '0';
       } else {
-        // Normal static positioning when header is visible
-        toolModeNav.classList.remove('md:fixed');
-        toolModeNav.classList.add('md:static');
-        toolModeNav.style.top = '';
-        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');
-        }
+        document.body.style.paddingTop = '';
+        storykeepHeader.style.position = '';
+        storykeepHeader.style.top = '';
       }
     }
   };
 
-  // Handle resize events
-  const handleResize = () => {
-    updateHeaderHeight();
-    updateSettingsMargin();
-
-    // Handle desktop/mobile breakpoint transitions
-    const isMobile = window.innerWidth < 801;
-
-    if (isMobile && toolModeNav && mainContent) {
-      // Force reset to mobile layout
-      toolModeNav.classList.remove('md:fixed', 'md:static');
-      toolModeNav.style.top = '';
-      toolModeNav.style.left = '';
-
-      // Remove desktop margin
-      mainContent.classList.remove('md:ml-16');
-    }
-
-    // Re-run scroll logic to handle desktop/mobile transitions
+  const debouncedUpdate = debounce(() => {
+    updateStandardHeaderHeight();
     handleScroll();
-  };
+    updatePanelPosition();
+  }, 50);
 
-  // Listen for settings panel state changes
   const handleSettingsPanelChange = () => {
-    const isSettingsOpen = settingsPanelOpenStore.get();
-
-    // Reset scroll flag when panel state changes
-    if (!isSettingsOpen) {
+    if (!settingsPanelOpenStore.get()) {
       hasScrolledForSettingsPanel = false;
     }
   };
 
-  // Set up event listeners
-  window.addEventListener('scroll', handleScroll, { passive: true });
-  window.addEventListener('resize', handleResize);
-
-  // Subscribe to settings panel state changes
+  window.addEventListener('scroll', debouncedUpdate, { passive: true });
+  window.addEventListener('resize', debouncedUpdate);
   settingsPanelOpenStore.subscribe(handleSettingsPanelChange);
 
-  // Initial setup
-  updateHeaderHeight();
-  updateSettingsMargin();
+  setupPaneObserver();
+
+  updateStandardHeaderHeight();
   handleScroll();
+  updatePanelPosition();
 }
 
-/**
- * Handle settings panel mobile behavior
- * This is called when the settings panel is toggled
- */
 export function handleSettingsPanelMobile(isOpen: boolean): void {
   const isMobile = window.innerWidth < 801;
-
   if (!isMobile) return;
 
   if (isOpen) {
@@ -190,19 +118,12 @@ export function handleSettingsPanelMobile(isOpen: boolean): void {
     const headerHeight = header?.offsetHeight || 0;
     const currentScrollY = window.scrollY;
 
-    // Only scroll if we're near the top and haven't already scrolled
     if (currentScrollY <= headerHeight && !hasScrolledForSettingsPanel) {
-      window.scrollTo({
-        top: headerHeight + 10,
-        behavior: 'smooth',
-      });
+      window.scrollTo({ top: headerHeight + 10, behavior: 'smooth' });
       hasScrolledForSettingsPanel = true;
     }
-
-    // Fade the header
     setMobileHeaderFaded(true);
   } else {
-    // Unfade the header and reset scroll flag
     setMobileHeaderFaded(false);
     hasScrolledForSettingsPanel = false;
   }