astro-tractstack 2.0.0-rc.48 → 2.0.0-rc.49

package/dist/index.js

@@ -2062,7 +2062,7 @@ async function w(t, e, c) {
     try {
       const p = i(s.dest);
       r(p) || x(p, { recursive: !0 });
-      const o = !s.protected && (s.dest === "tailwind.config.cjs" || s.dest.startsWith("src/components/codehooks/") || s.dest.startsWith("src/components/widgets/") || s.dest.startsWith("src/") || s.dest === ".gitignore");
+      const o = !s.protected && (s.dest === "tailwind.config.cjs" || s.dest.startsWith("src/components/codehooks/") || s.dest.startsWith("src/components/widgets/") || s.dest.startsWith("src/") || s.dest.startsWith("public/client/") || s.dest === ".gitignore");
       if (!r(s.dest) || o)
         if (r(s.src))
           k(s.src, s.dest), e.info(`Updated ${s.dest}`);

package/package.json

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

package/templates/src/client/sse.js

@@ -25,7 +25,7 @@ function log(...args) {
 }
 
 function logCritical(...args) {
-  if (VERBOSE) console.error('🚨 SSE CRITICAL:', ...args);
+  if (VERBOSE) console.warn('🚨 SSE CRITICAL:', ...args);
 }
 
 function logStoryfragmentChange(action, oldId, newId, source) {
@@ -151,57 +151,6 @@ async function performSSEHandshake(sessionId) {
     localStorage.setItem('tractstack_consent', result.consent);
     log('💾 Set consent:', result.consent);
 
-    if (
-      result.restored &&
-      result.affectedPanes &&
-      result.affectedPanes.length > 0
-    ) {
-      log('🔄 State restoration needed. Affected panes:', result.affectedPanes);
-
-      if (window.htmx && isHtmxReady) {
-        log('✅ HTMX ready, triggering immediate pane refreshes');
-        result.affectedPanes.forEach((paneId) => {
-          const element = document.querySelector(`[data-pane-id="${paneId}"]`);
-          if (element) {
-            log(`🔄 Restoring pane: ${paneId}`);
-            window.htmx.trigger(element, 'refresh');
-          } else {
-            log(`⚠️  Restoration pane element not found: ${paneId}`);
-          }
-        });
-      } else {
-        log(
-          '⚠️  HTMX not ready during restoration, setting up delayed refresh'
-        );
-        document.addEventListener(
-          'astro:page-load',
-          () => {
-            if (window.htmx && result.affectedPanes) {
-              log(
-                '🔄 HTMX now ready after page load, triggering delayed pane refreshes'
-              );
-              result.affectedPanes.forEach((paneId) => {
-                const element = document.querySelector(
-                  `[data-pane-id="${paneId}"]`
-                );
-                if (element) {
-                  log(`🔄 Delayed restoration for pane: ${paneId}`);
-                  window.htmx.trigger(element, 'refresh');
-                } else {
-                  log(
-                    `⚠️  Delayed restoration pane element not found: ${paneId}`
-                  );
-                }
-              });
-            }
-          },
-          { once: true }
-        );
-      }
-    } else {
-      log('ℹ️  No state restoration needed');
-    }
-
     if (window.TRACTSTACK_CONFIG) {
       window.TRACTSTACK_CONFIG.session = { isReady: true };
       log('✅ Marked session as ready in config');
@@ -297,6 +246,7 @@ function initializeSSE(sessionId) {
         for (const update of data.updates) {
           logCritical(`🔍 CHECKING UPDATE:`, {
             updateStoryfragment: update.storyfragmentId,
+            payload: update,
             currentStoryfragment: currentStoryfragmentId,
             configStoryfragment: window.TRACTSTACK_CONFIG?.storyfragmentId,
             willProcess: update.storyfragmentId === currentStoryfragmentId,
@@ -380,6 +330,7 @@ function processStoryfragmentUpdate(update) {
     storyfragmentId: update.storyfragmentId,
     affectedPanes: update.affectedPanes,
     gotoPaneId: update.gotoPaneId,
+    codeHookVisibility: update.CodeHookVisibility,
     currentContext: currentStoryfragmentId,
   });
 
@@ -395,10 +346,111 @@ function processStoryfragmentUpdate(update) {
     return;
   }
 
+  // Split pane IDs: code hooks vs regular panes
+  const codeHookPaneIds = [];
+  const regularPaneIds = [];
+
+  uniquePaneIds.forEach((paneId) => {
+    if (
+      update.CodeHookVisibility &&
+      update.CodeHookVisibility.hasOwnProperty(paneId)
+    ) {
+      codeHookPaneIds.push(paneId);
+    } else {
+      regularPaneIds.push(paneId);
+    }
+  });
+
+  log('🎭 Code hook pane IDs:', codeHookPaneIds);
+  log('📄 Regular pane IDs:', regularPaneIds);
+
+  // Process code hook visibility changes (CSS toggling)
+  if (codeHookPaneIds.length > 0) {
+    log('🎭 Processing code hook visibility changes');
+    codeHookPaneIds.forEach((paneId) => {
+      const element = document.querySelector(`#pane-${paneId}`);
+      if (element) {
+        const visibilityValue = update.CodeHookVisibility[paneId];
+        log(
+          `🎭 Code hook ${paneId} visibility value:`,
+          visibilityValue,
+          typeof visibilityValue
+        );
+
+        // Handle pane visibility
+        if (visibilityValue === false) {
+          element.style.display = 'none';
+          log(`🎭 Code hook pane ${paneId} HIDDEN`);
+        } else if (visibilityValue === true || Array.isArray(visibilityValue)) {
+          element.style.display = 'block';
+          log(`🎭 Code hook pane ${paneId} VISIBLE`);
+        }
+
+        // Handle unset button visibility
+        const unsetDiv = document.querySelector(`#pane-${paneId}-unset`);
+        if (unsetDiv) {
+          if (Array.isArray(visibilityValue)) {
+            // Show unset button - pane is visible and has beliefs to unset
+            const hxValsObject = {
+              unsetBeliefIds: visibilityValue.join(','),
+              paneId: paneId,
+            };
+            const hxValsJson = JSON.stringify(hxValsObject);
+
+            unsetDiv.innerHTML = `
+          <button
+            type="button"
+            class="text-mydarkgrey absolute right-2 top-2 z-10 rounded-full bg-white p-1.5 hover:bg-black hover:text-white"
+            title="Go Back"
+            hx-post="/api/v1/state"
+            hx-trigger="click"
+            hx-swap="none"
+            hx-vals='${hxValsJson}'
+            hx-preserve="true"
+          >
+            <svg
+              class="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"
+              />
+            </svg>
+          </button>
+        `;
+
+            // Tell HTMX to process the new button so hx-post works
+            if (window.htmx) {
+              window.htmx.process(unsetDiv);
+            }
+
+            log(
+              `🔄 Added unset button for pane ${paneId} with beliefs: ${visibilityValue.join(',')}`
+            );
+          } else {
+            // Clear unset button - pane is hidden or visible without unset needs
+            unsetDiv.innerHTML = '';
+            log(`🚫 Cleared unset button for pane ${paneId}`);
+          }
+        } else {
+          log(`⚠️ Unset div not found: pane-${paneId}-unset`);
+        }
+      } else {
+        log(`⚠️ Code hook element not found: pane-${paneId}`);
+      }
+    });
+  }
+
+  // Process regular panes (HTMX refresh)
   let refreshedCount = 0;
   let errorCount = 0;
 
-  uniquePaneIds.forEach((paneId) => {
+  regularPaneIds.forEach((paneId) => {
     const element = document.querySelector(`[data-pane-id="${paneId}"]`);
 
     if (element && window.htmx) {
@@ -431,7 +483,7 @@ function processStoryfragmentUpdate(update) {
   if (update.gotoPaneId) {
     const targetElement = document.getElementById(`pane-${update.gotoPaneId}`);
     if (targetElement) {
-      log(`📍 Scrolling to target pane: ${update.gotoPaneId}`);
+      log(`🔍 Scrolling to target pane: ${update.gotoPaneId}`);
       try {
         targetElement.scrollIntoView({ behavior: 'smooth' });
         log('✅ Scroll completed successfully');

package/templates/src/components/search/SearchModal.tsx

@@ -21,13 +21,11 @@ interface SearchModalProps {
   contentMap: FullContentMapItem[];
 }
 
-// --- CHANGE START ---
 // 1. Define a new type for the selected suggestions to include their type
 interface SelectedSuggestion {
   term: string;
   type: string;
 }
-// --- CHANGE END ---
 
 export default function SearchModal({
   isOpen,
@@ -35,12 +33,10 @@ export default function SearchModal({
   contentMap,
 }: SearchModalProps) {
   const [query, setQuery] = useState('');
-  // --- CHANGE START ---
   // 2. Update state to use the new type instead of just string[]
   const [selectedSuggestions, setSelectedSuggestions] = useState<
     SelectedSuggestion[]
   >([]);
-  // --- CHANGE END ---
   const inputRef = useRef<HTMLInputElement>(null);
   const {
     suggestions,
@@ -64,10 +60,8 @@ export default function SearchModal({
   useEffect(() => {
     if (!isOpen) {
       setQuery('');
-      // --- CHANGE START ---
       // 3. Update cleanup logic to use the new state
       setSelectedSuggestions([]);
-      // --- CHANGE END ---
       clearAll();
     }
   }, [isOpen, clearAll]);
@@ -84,10 +78,8 @@ export default function SearchModal({
 
   const handleClose = () => {
     setQuery('');
-    // --- CHANGE START ---
     // 4. Update cleanup logic to use the new state
     setSelectedSuggestions([]);
-    // --- CHANGE END ---
     clearAll();
     onClose();
   };
@@ -120,7 +112,6 @@ export default function SearchModal({
   };
 
   const handleSuggestionSelect = (suggestion: DiscoverySuggestion) => {
-    // --- CHANGE START ---
     // 5. Update how suggestions are added to the state
     // Check for duplicates before adding
     if (!selectedSuggestions.some((s) => s.term === suggestion.term)) {
@@ -129,32 +120,27 @@ export default function SearchModal({
         { term: suggestion.term, type: suggestion.type },
       ]);
     }
-    // --- CHANGE END ---
 
     setQuery('');
     selectSuggestion(suggestion);
   };
 
   const handleExactMatch = (term: string) => {
-    // --- CHANGE START ---
     // 6. Update exact match handling to add a default type
-    // From the legend, "Exact Match" uses the 'COLLECTION' style
+    // From the legend, "Exact Match" uses the 'EXACT' style
     if (!selectedSuggestions.some((s) => s.term === term)) {
-      setSelectedSuggestions((prev) => [...prev, { term, type: 'COLLECTION' }]);
+      setSelectedSuggestions((prev) => [...prev, { term, type: 'EXACT' }]);
     }
-    // --- CHANGE END ---
 
     setQuery('');
     selectExactMatch(term);
   };
 
   const removeTerm = (indexToRemove: number) => {
-    // --- CHANGE START ---
     // 7. Update remove logic to use the new state
     setSelectedSuggestions((prev) =>
       prev.filter((_, index) => index !== indexToRemove)
     );
-    // --- CHANGE END ---
     clearAll();
     if (inputRef.current) {
       inputRef.current.focus();
@@ -165,30 +151,28 @@ export default function SearchModal({
     switch (type) {
       case 'TOPIC':
         return 'bg-purple-100 text-purple-800 border-purple-200';
-      case 'COLLECTION':
+      case 'EXACT':
         return 'bg-orange-100 text-orange-800 border-orange-200';
-      case 'CONTENT':
+      case 'TEXT':
         return 'bg-green-100 text-green-800 border-green-200';
       default:
         return 'bg-gray-100 text-gray-800 border-gray-200';
     }
   };
 
-  // --- CHANGE START ---
   // 8. (Optional but recommended) Create a helper for the 'X' button color
   const getCloseButtonColor = (type: string) => {
     switch (type) {
       case 'TOPIC':
         return 'text-purple-600 hover:text-purple-800';
-      case 'COLLECTION':
+      case 'EXACT':
         return 'text-orange-600 hover:text-orange-800';
-      case 'CONTENT':
+      case 'TEXT':
         return 'text-green-600 hover:text-green-800';
       default:
         return 'text-gray-600 hover:text-gray-800';
     }
   };
-  // --- CHANGE END ---
 
   const bestCompletion =
     suggestions.length > 0 && query.length >= 3 ? suggestions[0].term : '';
@@ -224,7 +208,6 @@ export default function SearchModal({
             style={{ height: '80vh' }}
           >
             <div className="relative w-full border-b border-gray-200 p-4">
-              {/* --- CHANGE START --- */}
               {/* 9. Update the rendering of selected term pills */}
               {selectedSuggestions.length > 0 && (
                 <div className="mb-3 flex flex-wrap gap-2">
@@ -251,7 +234,6 @@ export default function SearchModal({
                   ))}
                 </div>
               )}
-              {/* --- CHANGE END --- */}
 
               {!showResults && (
                 <div className="relative w-full px-6 py-2">
@@ -289,10 +271,8 @@ export default function SearchModal({
               className="w-full overflow-y-auto"
               style={{ height: 'calc(80vh - 80px)' }}
             >
-              {/* --- CHANGE START --- */}
               {/* 10. Final cleanup logic update */}
               {!query.trim() && selectedSuggestions.length === 0 && (
-                // --- CHANGE END ---
                 <div className="w-full p-8 text-center text-gray-500">
                   <MagnifyingGlassIcon className="mx-auto mb-4 h-16 w-16 text-gray-300" />
                   <p className="text-lg">Search across all content</p>
@@ -356,7 +336,7 @@ export default function SearchModal({
                       <span className="font-bold">Legend:</span>
                       <span
                         className={`inline-flex items-center rounded-lg border px-3 py-1.5 text-sm font-bold ${getTypeColor(
-                          'COLLECTION'
+                          'EXACT'
                         )}`}
                       >
                         Exact Match
@@ -370,7 +350,7 @@ export default function SearchModal({
                       </span>
                       <span
                         className={`inline-flex items-center rounded-lg border px-3 py-1.5 text-sm font-bold ${getTypeColor(
-                          'CONTENT'
+                          'TEXT'
                         )}`}
                       >
                         Text Match

package/templates/src/lib/storyData.ts

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

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

@@ -131,12 +131,19 @@ const ogImage =
             id={`pane-${paneId}`}
             data-pane-id={paneId}
             class="pane-fragment-container"
+            style={
+              !codeHookTargets[paneId]
+                ? undefined
+                : !storyData.codeHookVisibility?.[paneId]
+                  ? 'display:none;'
+                  : 'display:block;'
+            }
             hx-get={`/api/v1/fragments/panes/${paneId}`}
             hx-trigger="refresh"
             hx-swap="innerHTML"
           >
             {codeHookTargets[paneId] ? (
-              <div class="overflow-hidden">
+              <div class="relative overflow-hidden">
                 <CodeHook
                   target={codeHookTargets[paneId]}
                   options={(() => {
@@ -149,6 +156,38 @@ const ogImage =
                   fullContentMap={fullContentMap}
                   resourcesPayload={resourcesPayload}
                 />
+                <div id={`pane-${paneId}-unset`}>
+                  {Array.isArray(storyData.codeHookVisibility?.[paneId]) && (
+                    <button
+                      type="button"
+                      class="text-mydarkgrey absolute right-2 top-2 z-10 rounded-full bg-white p-1.5 hover:bg-black hover:text-white"
+                      title="Go Back"
+                      hx-post="/api/v1/state"
+                      hx-trigger="click"
+                      hx-swap="none"
+                      hx-vals={JSON.stringify({
+                        unsetBeliefIds:
+                          storyData.codeHookVisibility[paneId].join(','),
+                        paneId: paneId,
+                      })}
+                      hx-preserve="true"
+                    >
+                      <svg
+                        class="h-6 w-6"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke-width="1.5"
+                        stroke="currentColor"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"
+                        />
+                      </svg>
+                    </button>
+                  )}
+                </div>
               </div>
             ) : (
               <Fragment set:html={fragmentsData[paneId] || ''} />

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

@@ -75,7 +75,7 @@ const mainStylesUrl = isDev
         </h2>
       </div>
 
-      <div class="mx-auto">
+      <div class="mx-auto max-w-sm">
         <div class="rounded-lg bg-white px-6 py-12 shadow-inner">
           <!-- Error message -->
           <div

package/utils/inject-files.ts

@@ -2119,6 +2119,7 @@ export async function injectTemplateFiles(
           file.dest.startsWith('src/components/codehooks/') ||
           file.dest.startsWith('src/components/widgets/') ||
           file.dest.startsWith('src/') ||
+          file.dest.startsWith('public/client/') ||
           file.dest === '.gitignore');
 
       if (!existsSync(file.dest) || shouldOverwrite) {