astro-tractstack 2.0.3 → 2.0.5

package/package.json

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

package/templates/src/components/compositor/nodes/Widget.tsx

@@ -22,15 +22,16 @@ const getWidgetElement = (
   classNames: string
 ): ReactElement | null => {
   const { hook, value1, value2, value3, nodeId } = props;
-  if (!hook || !value1) return null;
+  if (!hook) return null;
 
   switch (hook) {
     case 'youtube':
-      return value2 ? (
-        <div className={`${classNames} pointer-events-none`}>
-          <YouTubeWrapper embedCode={value1} title={value2} />
-        </div>
-      ) : null;
+      if (value1)
+        return value2 ? (
+          <div className={`${classNames} pointer-events-none`}>
+            <YouTubeWrapper embedCode={value1} title={value2} />
+          </div>
+        ) : null;
 
     case 'signup':
       return (
@@ -45,19 +46,21 @@ const getWidgetElement = (
       );
 
     case 'belief':
-      return value2 ? (
-        <div className={`${classNames} pointer-events-none`}>
-          <Belief value={{ slug: value1, scale: value2, extra: value3 }} />
-        </div>
-      ) : null;
+      if (value1)
+        return value2 ? (
+          <div className={`${classNames} pointer-events-none`}>
+            <Belief value={{ slug: value1, scale: value2, extra: value3 }} />
+          </div>
+        ) : null;
 
     case 'identifyAs':
-      return value2 ? (
-        <IdentifyAs
-          classNames={`${classNames} pointer-events-none`}
-          value={{ slug: value1, target: value2, extra: value3 || `` }}
-        />
-      ) : null;
+      if (value1)
+        return value2 ? (
+          <IdentifyAs
+            classNames={`${classNames} pointer-events-none`}
+            value={{ slug: value1, target: value2, extra: value3 || `` }}
+          />
+        ) : null;
 
     case 'toggle':
       return value2 ? (
@@ -90,9 +93,16 @@ const getWidgetElement = (
             <p className="text-sm font-bold text-gray-700">
               Interactive Disclosure
             </p>
-            <p className="mt-1 text-xs text-gray-500">
-              Belief Trigger: <code className="font-bold">{value1}</code>
-            </p>
+            {value1 ? (
+              <p className="mt-1 text-xs text-gray-500">
+                Mode: Belief-Driven (<code className="font-bold">{value1}</code>
+                )
+              </p>
+            ) : (
+              <p className="mt-1 text-xs text-gray-500">
+                Mode: Open (Custom Actions)
+              </p>
+            )}
           </div>
         </div>
       );

package/templates/src/components/edit/storyfragment/StoryFragmentPanel_og.tsx

@@ -187,21 +187,27 @@ const StoryFragmentOpenGraphPanel = ({
         (item) => item.type === 'Topic' && item.id === 'all-topics'
       );
 
-      // Convert topic strings to Topic objects with mock IDs (since V2 doesn't expose topic IDs in content map)
+      // Convert topic strings to Topic objects with mock IDs
       const allTopicsArray = topicsContent?.topics || [];
       const topicsWithIds: Topic[] = allTopicsArray.map(
         (topicTitle, index) => ({
-          id: index + 1, // Mock ID - in V2 we don't have access to actual topic IDs from content map
+          id: index + 1,
           title: topicTitle,
         })
       );
 
       setExistingTopics(topicsWithIds);
 
+      // Prioritize the description from the definitive fullContentMap
+      const sfContent = $contentMap.find(
+        (item) => item.type === 'StoryFragment' && item.id === nodeId
+      );
+      const initialDescription = sfContent?.description || '';
+      setDraftDetails(initialDescription);
+
       let initialTopics: Topic[] = [];
-      let initialDescription = '';
 
-      // Check stored draft data first
+      // Check stored draft data for topics
       if (storedData) {
         initialTopics = Array.isArray(storedData.topics)
           ? storedData.topics.map((t) => ({
@@ -209,29 +215,18 @@ const StoryFragmentOpenGraphPanel = ({
               title: t.title,
             }))
           : [];
-        initialDescription = storedData.description || '';
         setDraftTopics(initialTopics);
-        setDraftDetails(initialDescription);
+      } else if (sfContent && sfContent.topics && sfContent.topics.length > 0) {
+        // Fall back to content map data for initial topics if no draft exists
+        initialTopics = sfContent.topics.map((topicTitle) => {
+          const existingTopic = topicsWithIds.find(
+            (t) => t.title.toLowerCase() === topicTitle.toLowerCase()
+          );
+          return existingTopic || { id: -1, title: topicTitle };
+        });
+        setDraftTopics(initialTopics);
       } else {
-        // Fall back to content map data
-        const sfContent = $contentMap.find(
-          (item) => item.type === 'StoryFragment' && item.id === nodeId
-        );
-
-        if (sfContent && sfContent.topics && sfContent.topics.length > 0) {
-          initialTopics = sfContent.topics.map((topicTitle) => {
-            const existingTopic = topicsWithIds.find(
-              (t) => t.title.toLowerCase() === topicTitle.toLowerCase()
-            );
-            return existingTopic || { id: -1, title: topicTitle };
-          });
-          initialDescription = sfContent.description || '';
-          setDraftTopics(initialTopics);
-          setDraftDetails(initialDescription);
-        } else {
-          setDraftTopics([]);
-          setDraftDetails('');
-        }
+        setDraftTopics([]);
       }
 
       if (initialState.current) {

package/templates/src/components/edit/widgets/InteractiveDisclosureWidget.tsx

@@ -124,7 +124,6 @@ const DisclosureItemEditor = ({
   item,
   onUpdate,
   onToggle,
-  config,
   onMoveUp,
   onMoveDown,
   isFirst,
@@ -133,7 +132,6 @@ const DisclosureItemEditor = ({
   item: DisclosureItem;
   onUpdate: (updates: Partial<DisclosureItem>) => void;
   onToggle: () => void;
-  config: BrandConfig;
   onMoveUp: () => void;
   onMoveDown: () => void;
   isFirst: boolean;
@@ -258,6 +256,7 @@ export default function InteractiveDisclosureWidget({
   onUpdate,
   config,
 }: InteractiveDisclosureWidgetProps) {
+  const [mode, setMode] = useState<'belief' | 'open'>('belief');
   const [beliefs, setBeliefs] = useState<BeliefNode[]>([]);
   const [selectedBeliefTag, setSelectedBeliefTag] = useState<string>('');
   const [disclosures, setDisclosures] = useState<DisclosureItem[]>([]);
@@ -276,14 +275,16 @@ export default function InteractiveDisclosureWidget({
     const beliefTag = String(node.codeHookParams?.[0] || '');
     const payloadJson = String(node.codeHookParams?.[1] || '');
 
-    if (beliefs.length === 0 && beliefTag && beliefTag !== 'BELIEF') {
-      return;
+    if (beliefTag && beliefTag !== 'BELIEF') {
+      setMode('belief');
+    } else {
+      setMode('open');
     }
 
     setSelectedBeliefTag(beliefTag && beliefTag !== 'BELIEF' ? beliefTag : '');
     const currentBelief = beliefs.find((b) => b.slug === beliefTag);
 
-    if (payloadJson && currentBelief) {
+    if (payloadJson) {
       try {
         const parsed = JSON.parse(payloadJson);
         setWidgetStyles(
@@ -296,50 +297,62 @@ export default function InteractiveDisclosureWidget({
         const loadedDisclosures =
           (parsed.disclosures as StoredDisclosureItem[]) || [];
 
-        const scaleKeys =
-          currentBelief.scale === 'custom'
-            ? (currentBelief.customValues || []).map((v) => ({
-                slug: v,
-                name: v,
-              }))
-            : heldBeliefsScales[
-                currentBelief.scale as keyof typeof heldBeliefsScales
-              ] || [];
-
-        const actionCommand =
-          currentBelief.scale === 'custom' ? 'identifyAs' : 'declare';
-        const finalDisclosures: DisclosureItem[] = loadedDisclosures.map(
-          (loadedItem) => {
-            const isFromScale = scaleKeys.some(
-              (sk) => sk.slug === loadedItem.beliefValue
-            );
-
-            return {
+        if (currentBelief) {
+          const scaleKeys =
+            currentBelief.scale === 'custom'
+              ? (currentBelief.customValues || []).map((v) => ({
+                  slug: v,
+                  name: v,
+                }))
+              : heldBeliefsScales[
+                  currentBelief.scale as keyof typeof heldBeliefsScales
+                ] || [];
+
+          const actionCommand =
+            currentBelief.scale === 'custom' ? 'identifyAs' : 'declare';
+          const finalDisclosures: DisclosureItem[] = loadedDisclosures.map(
+            (loadedItem) => {
+              const isFromScale = scaleKeys.some(
+                (sk) => sk.slug === loadedItem.beliefValue
+              );
+
+              return {
+                ...loadedItem,
+                id: generateId(),
+                isCustom: !isFromScale,
+                actionLisp: isFromScale
+                  ? `(${actionCommand} ${beliefTag} ${quoteIfNecessary(actionCommand, loadedItem.beliefValue)})`
+                  : loadedItem.actionLisp,
+                isDisabled: false,
+              };
+            }
+          );
+          scaleKeys.forEach(({ slug, name }) => {
+            if (!finalDisclosures.some((d) => d.beliefValue === slug)) {
+              finalDisclosures.push({
+                id: generateId(),
+                beliefValue: slug,
+                title: name,
+                description: '',
+                icon: 'chat-heart-fill',
+                actionLisp: `(${actionCommand} ${beliefTag} ${quoteIfNecessary(actionCommand, slug)})`,
+                isCustom: false,
+                isDisabled: true,
+              });
+            }
+          });
+          setDisclosures(finalDisclosures);
+        } else {
+          const finalDisclosures: DisclosureItem[] = loadedDisclosures.map(
+            (loadedItem) => ({
               ...loadedItem,
               id: generateId(),
-              isCustom: !isFromScale,
-              actionLisp: isFromScale
-                ? `(${actionCommand} ${beliefTag} ${quoteIfNecessary(actionCommand, loadedItem.beliefValue)})`
-                : loadedItem.actionLisp,
+              isCustom: true,
               isDisabled: false,
-            };
-          }
-        );
-        scaleKeys.forEach(({ slug, name }) => {
-          if (!finalDisclosures.some((d) => d.beliefValue === slug)) {
-            finalDisclosures.push({
-              id: generateId(),
-              beliefValue: slug,
-              title: name,
-              description: '',
-              icon: 'chat-heart-fill',
-              actionLisp: `(${actionCommand} ${beliefTag} ${quoteIfNecessary(actionCommand, slug)})`,
-              isCustom: false,
-              isDisabled: true,
-            });
-          }
-        });
-        setDisclosures(finalDisclosures);
+            })
+          );
+          setDisclosures(finalDisclosures);
+        }
       } catch (e) {
         console.error('Error parsing disclosure payload:', e);
       }
@@ -417,6 +430,25 @@ export default function InteractiveDisclosureWidget({
     setDisclosures(newDisclosures);
   };
 
+  const handleModeChange = (newMode: 'belief' | 'open') => {
+    if (mode === newMode) return;
+
+    setMode(newMode);
+    setSelectedBeliefTag('');
+    setDisclosures([]);
+    setWidgetStyles({
+      textColor: '#000000',
+      bgColor: '#ffffff',
+      bgOpacity: 100,
+    });
+
+    if (newMode === 'open') {
+      onUpdate(['', '{}']);
+    } else {
+      onUpdate(['BELIEF', '{}']);
+    }
+  };
+
   const moveDisclosure = (id: string, direction: 'up' | 'down') => {
     const index = disclosures.findIndex((d) => d.id === id);
     if (index === -1) return;
@@ -477,35 +509,66 @@ export default function InteractiveDisclosureWidget({
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center gap-2">
-        <select
-          value={selectedBeliefTag}
-          onChange={(e) => handleBeliefChange(e.target.value)}
-          className="flex-1 rounded-md border-gray-300 shadow-sm"
-          disabled={hasRealSelection}
-        >
-          <option value="">Select a Belief...</option>
-          {beliefs.map((b) => (
-            <option key={b.slug} value={b.slug}>
-              {b.title} ({b.scale})
-            </option>
-          ))}
-        </select>
-        {hasRealSelection && (
+      <div>
+        <label className="block text-xs font-bold text-gray-600">
+          Configuration Mode
+        </label>
+        <div className="isolate mt-1 inline-flex rounded-md shadow-sm">
           <button
             type="button"
-            onClick={() => {
-              setSelectedBeliefTag('');
-              setDisclosures([]);
-              onUpdate(['BELIEF', '{}']);
-            }}
-            className="rounded p-1 text-red-600 hover:bg-gray-100"
+            onClick={() => handleModeChange('belief')}
+            className={`relative inline-flex items-center rounded-l-md px-3 py-2 text-sm font-semibold ring-1 ring-inset ring-gray-300 focus:z-10 ${
+              mode === 'belief'
+                ? 'bg-cyan-600 text-white'
+                : 'bg-white text-gray-900 hover:bg-gray-50'
+            }`}
           >
-            <XMarkIcon className="h-5 w-5" />
+            Belief-Driven
           </button>
-        )}
+          <button
+            type="button"
+            onClick={() => handleModeChange('open')}
+            className={`relative -ml-px inline-flex items-center rounded-r-md px-3 py-2 text-sm font-semibold ring-1 ring-inset ring-gray-300 focus:z-10 ${
+              mode === 'open'
+                ? 'bg-cyan-600 text-white'
+                : 'bg-white text-gray-900 hover:bg-gray-50'
+            }`}
+          >
+            Open
+          </button>
+        </div>
       </div>
-      {hasRealSelection && (
+      {mode === 'belief' && (
+        <div className="flex items-center gap-2">
+          <select
+            value={selectedBeliefTag}
+            onChange={(e) => handleBeliefChange(e.target.value)}
+            className="flex-1 rounded-md border-gray-300 shadow-sm"
+            disabled={hasRealSelection}
+          >
+            <option value="">Select a Belief...</option>
+            {beliefs.map((b) => (
+              <option key={b.slug} value={b.slug}>
+                {b.title} ({b.scale})
+              </option>
+            ))}
+          </select>
+          {hasRealSelection && (
+            <button
+              type="button"
+              onClick={() => {
+                setSelectedBeliefTag('');
+                setDisclosures([]);
+                onUpdate(['BELIEF', '{}']);
+              }}
+              className="rounded p-1 text-red-600 hover:bg-gray-100"
+            >
+              <XMarkIcon className="h-5 w-5" />
+            </button>
+          )}
+        </div>
+      )}
+      {(hasRealSelection || mode === 'open') && (
         <div className="mt-4 border-t border-gray-200 pt-4">
           <button
             type="button"
@@ -513,8 +576,8 @@ export default function InteractiveDisclosureWidget({
             className="flex w-full items-center justify-center rounded-md bg-gray-100 px-3 py-2 text-sm font-bold text-gray-700 hover:bg-gray-200"
           >
             <ChevronDownIcon className="mr-2 h-5 w-5" />
-            Configure {disclosures.filter((d) => !d.isDisabled).length} of{' '}
-            {disclosures.length} Disclosure(s) & Styles
+            Configure {disclosures.filter((d) => !d.isDisabled).length}{' '}
+            Disclosure(s) & Styles
           </button>
         </div>
       )}
@@ -546,7 +609,8 @@ export default function InteractiveDisclosureWidget({
               <div className="flex h-full flex-col">
                 <div className="flex-shrink-0 border-b border-gray-200 bg-white px-6 py-3">
                   <Dialog.Title className="text-lg font-bold text-gray-900">
-                    Disclosure Configuration: {selectedBelief?.title}
+                    Disclosure Configuration
+                    {selectedBelief && `: ${selectedBelief.title}`}
                   </Dialog.Title>
                 </div>
                 <div className="flex-1 space-y-6 overflow-y-auto p-4">
@@ -614,7 +678,6 @@ export default function InteractiveDisclosureWidget({
                             updateDisclosure(item.id, updates)
                           }
                           onToggle={() => toggleDisclosure(item.id)}
-                          config={config}
                           onMoveUp={() => moveDisclosure(item.id, 'up')}
                           onMoveDown={() => moveDisclosure(item.id, 'down')}
                           isFirst={index === 0}

package/templates/src/layouts/Layout.astro

@@ -22,6 +22,7 @@ export interface Props {
   brandConfig?: any;
   storyfragmentId?: string;
   sessionId?: string;
+  description?: string;
   impressions?: ImpressionNode[];
 }
 

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

@@ -125,6 +125,9 @@ const ogImage = storyFragment?.socialImagePath
 const fullContentMap = await getFullContentMap(
   Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default'
 );
+const description = fullContentMap.find(
+  (item) => item.id === storyFragmentID
+)?.description;
 const urlParams: Record<string, string | boolean> = {};
 for (const [key, value] of Astro.url.searchParams) {
   urlParams[key] = value === '' ? true : value;
@@ -133,6 +136,7 @@ for (const [key, value] of Astro.url.searchParams) {
 
 <Layout
   title={title}
+  description={description}
   slug={slug}
   canonicalURL={canonicalURL}
   pubDatetime={pubDatetime}
@@ -219,5 +223,5 @@ for (const [key, value] of Astro.url.searchParams) {
 
 <script>
   import { setupLayoutObservers } from '@/utils/layout';
-  setupLayoutObservers();
+  document.addEventListener('astro:page-load', setupLayoutObservers);
 </script>

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

@@ -99,6 +99,9 @@ if (!fragmentsData) {
 }
 
 const fullContentMap = await getFullContentMap(tenantId);
+const description = fullContentMap.find(
+  (item) => item.id === storyfragmentId
+)?.description;
 const brandConfig = await getBrandConfig(tenantId);
 
 if (!brandConfig.SITE_INIT) {
@@ -118,6 +121,7 @@ paneIds.forEach((paneId: string) => {
 
 <Layout
   title={storyfragmentTitle}
+  description={description}
   slug={lookup || brandConfig.HOME_SLUG}
   ogImage={ogImage}
   menu={storyData.menu || null}

package/templates/src/utils/layout.ts

@@ -8,15 +8,41 @@ import {
 import { debounce } from '@/utils/helpers';
 
 let hasScrolledForSettingsPanel = false;
+let currentPaneObserver: IntersectionObserver | null = null;
+let settingsPanelSubscription: (() => void) | null = null;
+let debouncedUpdateListener: (() => void) | null = null;
+
+function cleanupLayoutObservers() {
+  if (currentPaneObserver) {
+    currentPaneObserver.disconnect();
+    currentPaneObserver = null;
+  }
+  if (settingsPanelSubscription) {
+    settingsPanelSubscription();
+    settingsPanelSubscription = null;
+  }
+  if (debouncedUpdateListener) {
+    window.removeEventListener('scroll', debouncedUpdateListener);
+    window.removeEventListener('resize', debouncedUpdateListener);
+    debouncedUpdateListener = null;
+  }
+  const storykeepHeader = document.getElementById('storykeepHeader');
+  if (storykeepHeader) {
+    document.body.style.paddingTop = '';
+    storykeepHeader.style.position = '';
+    storykeepHeader.style.top = '';
+  }
+}
 
-// Replace your existing setupPaneObserver with this one.
 function setupPaneObserver() {
-  let currentObserver: IntersectionObserver | null = null;
+  if (currentPaneObserver) {
+    currentPaneObserver.disconnect();
+  }
 
-  settingsPanelStore.subscribe((signalValue) => {
-    if (currentObserver) {
-      currentObserver.disconnect();
-      currentObserver = null;
+  settingsPanelSubscription = settingsPanelStore.subscribe((signalValue) => {
+    if (currentPaneObserver) {
+      currentPaneObserver.disconnect();
+      currentPaneObserver = null;
     }
 
     if (signalValue && signalValue.nodeId) {
@@ -28,7 +54,7 @@ function setupPaneObserver() {
           document.querySelector(`[data-node-id="${nodeId}"]`);
 
         if (targetElement) {
-          currentObserver = new IntersectionObserver(
+          currentPaneObserver = new IntersectionObserver(
             ([entry]) => {
               const signal = settingsPanelStore.get();
               const now = Date.now();
@@ -41,7 +67,7 @@ function setupPaneObserver() {
             },
             { threshold: 0 }
           );
-          currentObserver.observe(targetElement);
+          currentPaneObserver.observe(targetElement);
         }
       }, 100);
     }
@@ -49,6 +75,8 @@ function setupPaneObserver() {
 }
 
 export function setupLayoutObservers(): void {
+  cleanupLayoutObservers();
+
   const storykeepHeader = document.getElementById('storykeepHeader');
   const settingsControls = document.getElementById('settingsControls');
   const standardHeader = document.querySelector('header');
@@ -86,7 +114,7 @@ export function setupLayoutObservers(): void {
     }
   };
 
-  const debouncedUpdate = debounce(() => {
+  debouncedUpdateListener = debounce(() => {
     updateStandardHeaderHeight();
     handleScroll();
     updatePanelPosition();
@@ -98,8 +126,8 @@ export function setupLayoutObservers(): void {
     }
   };
 
-  window.addEventListener('scroll', debouncedUpdate, { passive: true });
-  window.addEventListener('resize', debouncedUpdate);
+  window.addEventListener('scroll', debouncedUpdateListener, { passive: true });
+  window.addEventListener('resize', debouncedUpdateListener);
   settingsPanelOpenStore.subscribe(handleSettingsPanelChange);
 
   setupPaneObserver();
@@ -128,3 +156,5 @@ export function handleSettingsPanelMobile(isOpen: boolean): void {
     hasScrolledForSettingsPanel = false;
   }
 }
+
+document.addEventListener('astro:before-swap', cleanupLayoutObservers);