astro-tractstack 2.0.8 → 2.0.10

package/templates/src/components/edit/state/SaveModal.tsx

@@ -8,7 +8,6 @@ import {
   transformStoryFragmentForSave,
 } from '@/utils/etl/index';
 import {
-  fullContentMapStore,
   getPendingImageOperation,
   clearPendingImageOperation,
   pendingHomePageSlugStore,
@@ -55,6 +54,13 @@ const PROGRESS_PHASES = {
   FINALIZATION: 10,
 };
 
+const INDETERMINATE_STAGES: SaveStage[] = [
+  'SAVING_PANES',
+  'LINKING_FILES',
+  'PROCESSING_STYLES',
+  'UPDATING_HOME_PAGE',
+];
+
 export default function SaveModal({
   show,
   slug,
@@ -72,6 +78,8 @@ export default function SaveModal({
   const [debugMessages, setDebugMessages] = useState<string[]>([]);
   const isSaving = useRef(false);
   const [isNavigating, setIsNavigating] = useState(false);
+  const [isIndeterminateStage, setIsIndeterminateStage] = useState(false);
+  const [ellipsis, setEllipsis] = useState('...');
   const isCreateMode = slug === 'create';
   const pendingHomePageSlug = pendingHomePageSlugStore.get();
   const goBackend =
@@ -83,6 +91,15 @@ export default function SaveModal({
     setDebugMessages((prev) => [...prev, `${timestamp}: ${message}`]);
   };
 
+  useEffect(() => {
+    if (isIndeterminateStage) {
+      const interval = setInterval(() => {
+        setEllipsis((prev) => (prev.length < 3 ? prev + '.' : '.'));
+      }, 500);
+      return () => clearInterval(interval);
+    }
+  }, [isIndeterminateStage]);
+
   useEffect(() => {
     if (!show) {
       setStage('PREPARING');
@@ -90,6 +107,7 @@ export default function SaveModal({
       setDebugMessages([]);
       setShowDebug(false);
       isSaving.current = false;
+      setIsIndeterminateStage(false);
       return;
     }
 
@@ -329,6 +347,7 @@ export default function SaveModal({
 
         if (dirtyPanes.length > 0) {
           setStage('SAVING_PANES');
+          setIsIndeterminateStage(true);
           setStageProgress({
             currentStep: 0,
             totalSteps: dirtyPanes.length,
@@ -420,6 +439,8 @@ export default function SaveModal({
                 : 'Unknown bulk save error';
             addDebugMessage(`Bulk pane save failed: ${errorMsg}`);
             throw new Error(`Failed to save panes in bulk: ${errorMsg}`);
+          } finally {
+            setIsIndeterminateStage(false);
           }
 
           setStageProgress({
@@ -524,6 +545,7 @@ export default function SaveModal({
 
         if (dirtyPanes.length > 0) {
           setStage('LINKING_FILES');
+          setIsIndeterminateStage(true);
           setProgress(baseFinalizationProgress);
           addDebugMessage('Starting file-pane relationship linking...');
 
@@ -574,9 +596,11 @@ export default function SaveModal({
           } else {
             addDebugMessage('No file relationships to link');
           }
+          setIsIndeterminateStage(false);
         }
 
         setStage('PROCESSING_STYLES');
+        setIsIndeterminateStage(true);
         setProgress(
           baseFinalizationProgress + PROGRESS_PHASES.FINALIZATION / 2
         );
@@ -639,10 +663,13 @@ export default function SaveModal({
             error instanceof Error ? error.message : 'Unknown error';
           addDebugMessage(`Styles processing failed: ${errorMsg}`);
           throw new Error(`Failed to process styles: ${errorMsg}`);
+        } finally {
+          setIsIndeterminateStage(false);
         }
 
         if (pendingHomePageSlug) {
           setStage('UPDATING_HOME_PAGE');
+          setIsIndeterminateStage(true);
           setProgress(
             baseFinalizationProgress + (PROGRESS_PHASES.FINALIZATION - 2)
           );
@@ -697,6 +724,8 @@ export default function SaveModal({
               error instanceof Error ? error.message : 'Unknown error';
             addDebugMessage(`Home page update failed: ${errorMsg}`);
             throw new Error(`Failed to update home page: ${errorMsg}`);
+          } finally {
+            setIsIndeterminateStage(false);
           }
         }
 
@@ -711,6 +740,7 @@ export default function SaveModal({
             : 'Unknown error occurred';
         setError(errorMessage);
         addDebugMessage(`Save process failed: ${errorMessage}`);
+        setIsIndeterminateStage(false);
       } finally {
         isSaving.current = false;
       }
@@ -736,30 +766,47 @@ export default function SaveModal({
     const modeText = isContext ? 'Context Pane' : 'Story Fragment';
     const actionText = isCreateMode ? 'Creating' : 'Updating';
 
+    let description = '';
     switch (stage) {
       case 'PREPARING':
-        return `Preparing ${actionText.toLowerCase()} ${modeText.toLowerCase()}...`;
+        description = `Preparing ${actionText.toLowerCase()} ${modeText.toLowerCase()}...`;
+        break;
       case 'SAVING_PENDING_FILES':
-        return `Uploading files${getProgressText()}`;
+        description = `Uploading files${getProgressText()}`;
+        break;
       case 'PROCESSING_OG_IMAGES':
-        return `Processing social images${getProgressText()}`;
+        description = `Processing social images${getProgressText()}`;
+        break;
       case 'SAVING_PANES':
-        return `${actionText} pane content...${getProgressText()}`;
+        description = `${actionText} pane content...`;
+        break;
       case 'SAVING_STORY_FRAGMENTS':
-        return `${actionText} story fragments...${getProgressText()}`;
+        description = `${actionText} story fragments...${getProgressText()}`;
+        break;
       case 'LINKING_FILES':
-        return 'Linking file relationships...';
+        description = 'Linking file relationships...';
+        break;
       case 'PROCESSING_STYLES':
-        return 'Processing styles...';
+        description = 'Processing styles...';
+        break;
       case 'UPDATING_HOME_PAGE':
-        return 'Updating home page...';
+        description = 'Updating home page...';
+        break;
       case 'COMPLETED':
-        return `${actionText} ${modeText.toLowerCase()} completed successfully!`;
+        description = `${actionText} ${modeText.toLowerCase()} completed successfully!`;
+        break;
       case 'ERROR':
-        return `Error: ${error}`;
+        description = `Error: ${error}`;
+        break;
       default:
-        return '';
+        description = '';
+    }
+
+    if (isIndeterminateStage && INDETERMINATE_STAGES.includes(stage)) {
+      return description.replace(/\.\.\.$/, '') + ellipsis;
     }
+
+    return description;
   };
 
   const handleOpenChange = (details: { open: boolean }) => {
@@ -832,6 +879,28 @@ export default function SaveModal({
       preventScroll={true}
     >
       <Portal>
+        <style>
+          {`
+            @keyframes stripes-move {
+              from { background-position: 40px 0; }
+              to { background-position: 0 0; }
+            }
+            .animate-stripes {
+              background-image: linear-gradient(
+                45deg,
+                rgba(255, 255, 255, 0.15) 25%,
+                transparent 25%,
+                transparent 50%,
+                rgba(255, 255, 255, 0.15) 50%,
+                rgba(255, 255, 255, 0.15) 75%,
+                transparent 75%,
+                transparent
+              );
+              background-size: 40px 40px;
+              animation: stripes-move 2s linear infinite;
+            }
+          `}
+        </style>
         <Dialog.Backdrop
           className="fixed inset-0 bg-black bg-opacity-75"
           style={{ zIndex: 9005 }}
@@ -875,11 +944,12 @@ export default function SaveModal({
                     </span>
                   )}
                 </div>
-                <div className="h-2 w-full rounded-full bg-gray-200">
+                <div className="h-2 w-full overflow-hidden rounded-full bg-gray-200">
+                  {' '}
                   <div
                     className={`h-2 rounded-full transition-all duration-300 ${
                       stage === 'ERROR' ? 'bg-red-500' : 'bg-green-500'
-                    }`}
+                    } ${isIndeterminateStage ? 'animate-stripes' : ''}`}
                     style={{ width: `${progress}%` }}
                   />
                 </div>

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

@@ -517,7 +517,7 @@ export default function InteractiveDisclosureWidget({
           <button
             type="button"
             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 ${
+            className={`relative inline-flex items-center rounded-l-md px-3 py-2 text-sm font-bold 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'
@@ -528,7 +528,7 @@ export default function InteractiveDisclosureWidget({
           <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 ${
+            className={`relative -ml-px inline-flex items-center rounded-r-md px-3 py-2 text-sm font-bold 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'

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

@@ -8,7 +8,8 @@ import {
 } from 'react';
 import { Dialog } from '@ark-ui/react/dialog';
 import { Portal } from '@ark-ui/react/portal';
-import { MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon';
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import { useSearch } from '@/hooks/useSearch';
 import SearchResults from './SearchResults';
 import type {

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

@@ -1,6 +1,7 @@
 import { useState, useMemo } from 'react';
 import { Pagination } from '@ark-ui/react/pagination';
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
+import ChevronLeftIcon from '@heroicons/react/24/outline/ChevronLeftIcon';
 import type { CategorizedResults, FTSResult } from '@/types/tractstack';
 import type { FullContentMapItem } from '@/types/tractstack';
 import {

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

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon';
 import { initSearch } from '@/utils/customHelpers';
 import SearchModal from './SearchModal';
 import type { FullContentMapItem } from '@/types/tractstack';

package/templates/src/components/storykeep/Dashboard_Analytics.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 import { useStore } from '@nanostores/react';
 import { epinetCustomFilters } from '@/stores/analytics';
 import { classNames } from '@/utils/helpers';
-import { ArrowDownTrayIcon } from '@heroicons/react/24/outline';
+import ArrowDownTrayIcon from '@heroicons/react/24/outline/ArrowDownTrayIcon';
 import DashboardActivity from './Dashboard_Activity';
 import SankeyDiagram from '../codehooks/SankeyDiagram';
 import EpinetDurationSelector from '../codehooks/EpinetDurationSelector';

package/templates/src/components/storykeep/controls/content/BeliefForm.tsx

@@ -1,5 +1,8 @@
 import { useState, useEffect } from 'react';
 import { useStore } from '@nanostores/react';
+import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
+import LockClosedIcon from '@heroicons/react/24/outline/LockClosedIcon';
 import { useFormState } from '@/hooks/useFormState';
 import {
   convertToLocalState,
@@ -18,11 +21,6 @@ import {
 import StringInput from '@/components/form/StringInput';
 import EnumSelect from '@/components/form/EnumSelect';
 import UnsavedChangesBar from '@/components/form/UnsavedChangesBar';
-import {
-  PlusIcon,
-  XMarkIcon,
-  LockClosedIcon,
-} from '@heroicons/react/24/outline';
 import type { BeliefNode, BeliefNodeState } from '@/types/tractstack';
 
 interface BeliefFormProps {

package/templates/src/components/storykeep/controls/content/BeliefTable.tsx

@@ -204,7 +204,7 @@ export default function BeliefTable({
             )}
           </div>
         ) : (
-          <div className="overflow-x-auto">
+          <div className="overflow-hidden">
             <table className="min-w-full divide-y divide-gray-200">
               <thead className="bg-gray-50">
                 <tr>

package/templates/src/components/storykeep/controls/content/MenuTable.tsx

@@ -217,7 +217,7 @@ export default function MenuTable({
             )}
           </div>
         ) : (
-          <div className="overflow-x-auto">
+          <div className="overflow-hidden">
             <table className="min-w-full divide-y divide-gray-200">
               <thead className="bg-gray-50">
                 <tr>

package/templates/src/components/storykeep/controls/content/StoryFragmentTable.tsx

@@ -241,7 +241,7 @@ const StoryFragmentTable = ({
             )}
           </div>
         ) : (
-          <div className="overflow-x-auto">
+          <div className="overflow-hidden">
             <table className="min-w-full divide-y divide-gray-200">
               <thead className="bg-gray-50">
                 <tr>

package/templates/src/components/widgets/ImpressionWrapper.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import Impression from './Impression';
 import type { ImpressionNode } from '@/types/compositorTypes';
 import type { BrandConfig } from '@/types/tractstack';

package/templates/src/hooks/useFormState.ts

@@ -37,12 +37,12 @@ export interface FormStateReturn<T> {
   updateField: (field: keyof T, value: any) => void;
   save: () => Promise<void>;
   cancel: () => void;
-  resetToState: (newState: T) => void; // NEW: Reset form to new baseline state
+  resetToState: (newState: T) => void;
   isDirty: boolean;
   isValid: boolean;
   errors: FieldErrors;
-  saveState: SaveState; // NEW: Track save operation state
-  errorMessage: string | null; // NEW: Save error message
+  saveState: SaveState;
+  errorMessage: string | null;
 }
 
 /**
@@ -179,7 +179,6 @@ export function useFormState<T>(
     setErrorMessage(null);
   }, [originalState]);
 
-  // NEW: Reset to new state (for external state updates)
   const resetToState = useCallback((newState: T) => {
     setOriginalState(newState);
     setState(newState);