astro-tractstack 2.0.0-rc.3 → 2.0.0-rc.31

package/templates/src/components/Footer.astro

@@ -176,7 +176,7 @@ const createdDate = created ? new Date(created) : new Date();
         >
           Tract Stack</a
         >
-        &ndash; no-code community engine from{` `}
+        &ndash; the &#8220;free web press&#8221; by{` `}
         <a
           href="https://atriskmedia.com/?utm_source=tractstack&utm_medium=www&utm_campaign=community"
           class="font-bold underline hover:text-black"

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"
@@ -335,7 +336,13 @@ const authStatus = {
 }
 
 <script>
-  document.addEventListener('DOMContentLoaded', function () {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', setupAdminModal);
+  } else {
+    setupAdminModal();
+  }
+
+  function setupAdminModal() {
     const logoutBtn = document.getElementById(
       'logout-btn'
     ) as HTMLButtonElement | null;
@@ -394,65 +401,61 @@ const authStatus = {
       });
     }
 
-    // Admin Modal JavaScript - Only runs when admin elements exist
-    const heartBtn = document.getElementById('admin-heart-btn');
-    const modal = document.getElementById('admin-modal');
-    const closeBtn = document.getElementById('admin-modal-close');
-    const iframe = document.getElementById('admin-sysop-iframe');
-
-    if (heartBtn && modal && closeBtn && iframe) {
-      // Open modal when heart icon is clicked
-      heartBtn.addEventListener('click', function (e) {
+    // Admin Modal JavaScript - Use event delegation
+    document.addEventListener('click', function (e) {
+      if (e.target && (e.target as Element).closest('#admin-heart-btn')) {
         e.preventDefault();
-        modal.classList.remove('hidden');
-        modal.setAttribute('aria-hidden', 'false');
-
-        // Focus management for accessibility
-        closeBtn.focus();
-
-        // Prevent body scroll when modal is open
-        document.body.style.overflow = 'hidden';
-      });
+        const modal = document.getElementById('admin-modal');
+        const closeBtn = document.getElementById('admin-modal-close');
+
+        if (modal && closeBtn) {
+          modal.classList.remove('hidden');
+          modal.setAttribute('aria-hidden', 'false');
+          closeBtn.focus();
+          document.body.style.overflow = 'hidden';
+        }
+        return;
+      }
 
-      // Close modal when X button is clicked
-      closeBtn.addEventListener('click', function (e) {
+      if (e.target && (e.target as Element).closest('#admin-modal-close')) {
         e.preventDefault();
         closeModal();
-      });
+        return;
+      }
 
-      // Close modal when clicking outside the iframe
-      modal.addEventListener('click', function (e) {
-        if (e.target === modal) {
-          closeModal();
-        }
-      });
+      if (e.target && (e.target as Element).id === 'admin-modal') {
+        closeModal();
+        return;
+      }
+    });
 
-      // Close modal with Escape key
-      document.addEventListener('keydown', function (e) {
-        if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') {
+        const modal = document.getElementById('admin-modal');
+        if (modal && !modal.classList.contains('hidden')) {
           closeModal();
         }
-      });
-
-      function closeModal() {
-        modal?.classList.add('hidden');
-        modal?.setAttribute('aria-hidden', 'true');
-
-        // Restore body scroll
-        document.body.style.overflow = '';
-
-        // Return focus to heart button for accessibility
-        heartBtn?.focus();
       }
+    });
 
-      // Handle iframe load events for better UX
-      //iframe.addEventListener('load', function () {
-      //  console.log('Admin panel loaded successfully');
-      //});
+    function closeModal() {
+      const modal = document.getElementById('admin-modal');
+      const heartBtn = document.getElementById('admin-heart-btn');
 
-      iframe.addEventListener('error', function () {
-        console.error('Failed to load admin panel');
-      });
+      modal?.classList.add('hidden');
+      modal?.setAttribute('aria-hidden', 'true');
+      document.body.style.overflow = '';
+      heartBtn?.focus();
     }
-  });
+
+    // iframe error handling
+    document.addEventListener('DOMContentLoaded', function () {
+      const iframe = document.getElementById('admin-sysop-iframe');
+      if (iframe) {
+        iframe.addEventListener('error', function () {
+          console.error('Failed to load admin panel');
+        });
+      }
+    });
+  }
 </script>

package/templates/src/components/codehooks/EpinetDurationSelector.tsx

@@ -45,11 +45,13 @@ interface ContentMapItem {
 interface EpinetDurationSelectorProps {
   fullContentMap?: ContentMapItem[];
   isLoading?: boolean;
+  hourlyNodeActivity?: any;
 }
 
 const EpinetDurationSelector = ({
   fullContentMap,
   isLoading,
+  hourlyNodeActivity,
 }: EpinetDurationSelectorProps = {}) => {
   const [startDate, setStartDate] = useState<Date | null>(null);
   const [endDate, setEndDate] = useState<Date | null>(null);
@@ -185,22 +187,12 @@ const EpinetDurationSelector = ({
     const startUTCTime = createUTCDateTime(startDate, localFilters.startHour);
     const endUTCTime = createUTCDateTime(endDate, localFilters.endHour);
 
-    if (endUTCTime <= startUTCTime) {
+    if (endUTCTime < startUTCTime) {
       setErrorMessage('End time must be after start time.');
       return;
     }
 
     const nowUTC = new Date();
-    const maxPastTime = new Date(
-      nowUTC.getTime() - MAX_ANALYTICS_HOURS * 60 * 60 * 1000
-    );
-
-    if (startUTCTime < maxPastTime) {
-      setErrorMessage(
-        `Start time cannot be more than ${MAX_ANALYTICS_HOURS} hours in the past.`
-      );
-      return;
-    }
 
     if (endUTCTime > nowUTC) {
       setErrorMessage('End time cannot be in the future.');
@@ -549,7 +541,7 @@ const EpinetDurationSelector = ({
 
   return (
     <>
-      <div className="space-y-4">
+      <div className="space-y-4 overflow-visible">
         {$epinetCustomFilters.enabled && (
           <div
             className={`space-y-4 rounded-lg border-2 border-dashed border-gray-200 bg-gray-50 p-4`}
@@ -865,7 +857,10 @@ const EpinetDurationSelector = ({
                           </Select.Control>
                           <Portal>
                             <Select.Positioner>
-                              <Select.Content className="z-10 mt-2 max-h-96 w-[var(--trigger-width)] overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                              <Select.Content
+                                className="z-10 mt-2 max-h-96 overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+                                style={{ width: 'var(--trigger-width)' }}
+                              >
                                 {paginatedUserCounts.length > 0 ? (
                                   [
                                     <Select.Item
@@ -930,6 +925,7 @@ const EpinetDurationSelector = ({
               <EpinetTableView
                 fullContentMap={fullContentMap || []}
                 isLoading={isLoading}
+                hourlyNodeActivity={hourlyNodeActivity}
               />
             )}
           </div>

package/templates/src/components/codehooks/EpinetTableView.tsx

@@ -53,13 +53,17 @@ interface ContentMapItem {
   type: string;
 }
 
+interface Props {
+  fullContentMap: ContentMapItem[];
+  isLoading?: boolean;
+  hourlyNodeActivity?: any;
+}
+
 const EpinetTableView = ({
   fullContentMap,
   isLoading = false,
-}: {
-  fullContentMap: ContentMapItem[];
-  isLoading?: boolean;
-}) => {
+  hourlyNodeActivity,
+}: Props) => {
   const $epinetCustomFilters = useStore(epinetCustomFilters);
   const [currentDay, setCurrentDay] = useState<string | null>(null);
   const [availableDays, setAvailableDays] = useState<string[]>([]);
@@ -174,7 +178,7 @@ const EpinetTableView = ({
   };
 
   useEffect(() => {
-    const hourlyActivity = $epinetCustomFilters.hourlyNodeActivity || {};
+    const hourlyActivity = hourlyNodeActivity || {};
     const hourKeys = Object.keys(hourlyActivity);
 
     if (hourKeys.length === 0) {
@@ -192,7 +196,7 @@ const EpinetTableView = ({
     setAvailableDays(days);
     setCurrentDay(days[0] || null);
     setCurrentDayIndex(0);
-  }, [$epinetCustomFilters.hourlyNodeActivity]);
+  }, [hourlyNodeActivity]);
 
   const navigateDay = (direction: 'prev' | 'next') => {
     const newIndex =
@@ -213,7 +217,7 @@ const EpinetTableView = ({
     if (!currentDay)
       return { data: [], dailyTotal: 0, dailyVisitors: 0, maxHourlyTotal: 0 };
 
-    const hourlyActivity = $epinetCustomFilters.hourlyNodeActivity || {};
+    const hourlyActivity = hourlyNodeActivity || {};
     const result: HourData[] = [];
     let emptyRangeStart: number | null = null;
     let dailyTotal = 0;

package/templates/src/components/codehooks/SankeyDiagram.tsx

@@ -234,9 +234,10 @@ const SankeyDiagram = ({ data, isLoading = false }: SankeyDiagramProps) => {
     }
   }, [data, dimensions]);
 
-  const compressedHeight = COMPRESSED_HEIGHT;
-  const needsCompression = compressedHeight && !isExpanded;
-  const displayHeight = needsCompression ? compressedHeight : dimensions.height;
+  const needsCompression = !isExpanded && dimensions.height > COMPRESSED_HEIGHT;
+  const displayHeight = needsCompression
+    ? COMPRESSED_HEIGHT
+    : dimensions.height;
 
   const handleExpand = () => {
     setIsExpanded(!isExpanded);

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

@@ -312,7 +312,7 @@ const getElement = (
     case 'impression':
       return <></>;
     default:
-      console.warn(`Node.tsx miss on ${type}`);
+      console.warn(`Node.tsx miss on ${type}`, node);
       return <></>;
   }
 };

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

@@ -1,4 +1,4 @@
-import { useEffect, useState, memo, type CSSProperties } from 'react';
+import { useEffect, useState, memo, Fragment, type CSSProperties } from 'react';
 import { getCtx } from '@/stores/nodes';
 import { viewportKeyStore } from '@/stores/storykeep';
 import { RenderChildren } from './RenderChildren';
@@ -27,12 +27,19 @@ const CodeHookContainer = ({
         {Object.entries(payload.params).map(
           ([key, value]) =>
             value && (
-              <div key={key} className="flex items-start">
+              <Fragment key={key}>
                 <span className="min-w-24 font-bold text-gray-600">{key}:</span>
-                <span className="ml-2 text-gray-800">
-                  {JSON.stringify(value)}
-                </span>
-              </div>
+                <div className="ml-2 flex flex-wrap gap-1">
+                  {value.split('|').map((item, index) => (
+                    <span
+                      key={index}
+                      className="inline-block rounded bg-gray-200 px-2 py-0.5 text-xs text-gray-800"
+                    >
+                      {item}
+                    </span>
+                  ))}
+                </div>
+              </Fragment>
             )
         )}
       </div>

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

@@ -13,6 +13,7 @@ import {
   viewportModeStore,
   setViewportMode,
   settingsPanelStore,
+  pendingHomePageSlugStore,
 } from '@/stores/storykeep';
 import { getCtx, ROOT_NODE_NAME } from '@/stores/nodes';
 import SaveModal from '@/components/edit/state/SaveModal';
@@ -24,6 +25,7 @@ interface StoryKeepHeaderProps {
 
 const StoryKeepHeader = ({ slug, isContext = false }: StoryKeepHeaderProps) => {
   const viewport = useStore(viewportModeStore);
+  const pendingHomePageSlug = useStore(pendingHomePageSlugStore);
   const ctx = getCtx();
   const hasTitle = useStore(ctx.hasTitle);
   const hasPanes = useStore(ctx.hasPanes);
@@ -61,7 +63,8 @@ const StoryKeepHeader = ({ slug, isContext = false }: StoryKeepHeaderProps) => {
   };
 
   const handleVisitPage = () => {
-    if (canUndo) {
+    const hasChanges = canUndo || pendingHomePageSlug;
+    if (hasChanges) {
       if (
         confirm(
           'You have unsaved changes. Do you want to visit the page anyway?'
@@ -89,6 +92,9 @@ const StoryKeepHeader = ({ slug, isContext = false }: StoryKeepHeaderProps) => {
     { value: 'desktop', Icon: ComputerDesktopIcon, title: 'Desktop Viewport' },
   ];
 
+  // Show save button if there are undo changes OR pending home page change
+  const shouldShowSave = canUndo || pendingHomePageSlug;
+
   if (!hasTitle && !hasPanes) return null;
 
   return (
@@ -127,7 +133,7 @@ const StoryKeepHeader = ({ slug, isContext = false }: StoryKeepHeaderProps) => {
             className={`${iconClassName} relative`}
           >
             <GlobeAltIcon />
-            {canUndo && (
+            {shouldShowSave && (
               <ExclamationTriangleIcon className="absolute -right-1 -top-1 h-3 w-3 rounded-full bg-white text-amber-500" />
             )}
           </button>
@@ -156,7 +162,7 @@ const StoryKeepHeader = ({ slug, isContext = false }: StoryKeepHeaderProps) => {
           </div>
         )}
 
-        {canUndo && (
+        {shouldShowSave && (
           <div className="flex flex-wrap items-center justify-center gap-2 text-sm">
             <button
               onClick={handleSave}

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

@@ -110,13 +110,9 @@ const PanelSwitch = ({
       break;
 
     case 'style-parent-add':
-      if (markdownNode && signal.className)
+      if (markdownNode)
         return (
-          <StyleParentAddPanel
-            node={markdownNode}
-            layer={signal.layer || 0}
-            className={signal.className}
-          />
+          <StyleParentAddPanel node={markdownNode} layer={signal.layer || 0} />
         );
       break;
 
@@ -200,12 +196,11 @@ const PanelSwitch = ({
       break;
 
     case 'style-element-add':
-      if (clickedNode && markdownNode && signal.className)
+      if (clickedNode && markdownNode)
         return (
           <StyleElementAddPanel
             node={clickedNode}
             parentNode={markdownNode}
-            className={signal.className}
             onTitleChange={onTitleChange}
           />
         );
@@ -317,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':