astro-tractstack 2.0.0-rc.2 → 2.0.0-rc.20

package/templates/custom/minimal/CodeHook.astro

@@ -1,17 +1,16 @@
 ---
-// 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';
 import EpinetWrapper from '@/components/codehooks/EpinetWrapper';
 import type { FullContentMapItem } from '@/types/tractstack';
+import type { ResourceNode } from '@/types/compositorTypes';
 // import CustomHero from './CustomHero.astro';  // Uncomment to add custom components
 
 export interface Props {
   target: string;
   fullContentMap: FullContentMapItem[];
+  resourcesPayload?: Record<string, ResourceNode[]>;
   options?: {
     params?: {
       options?: string;
@@ -19,7 +18,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,17 +1,16 @@
 ---
-// 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';
 import BunnyVideoWrapper from '@/components/codehooks/BunnyVideoWrapper.astro';
 import EpinetWrapper from '@/components/codehooks/EpinetWrapper';
 import type { FullContentMapItem } from '@/types/tractstack';
+import type { ResourceNode } from '@/types/compositorTypes';
 
 export interface Props {
   target: string;
   fullContentMap: FullContentMapItem[];
+  resourcesPayload?: Record<string, ResourceNode[]>;
   options?: {
     params?: {
       options?: string;
@@ -19,7 +18,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/gitignore

@@ -0,0 +1,42 @@
+# Build output
+dist/
+*.tgz
+#*.d.ts
+
+# Dependencies
+node_modules/
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# Temporary folders
+tmp/
+temp/

package/templates/prettierignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+.astro/
+templates/css/
+templates/fonts/

package/templates/prettierrc

@@ -0,0 +1,19 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "plugins": [
+    "prettier-plugin-astro",
+    "prettier-plugin-tailwindcss"
+  ],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

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

@@ -185,7 +185,7 @@ 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;
     }
@@ -549,7 +549,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 +865,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

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/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>