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

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

@@ -11,12 +11,15 @@ import {
   fullContentMapStore,
   getPendingImageOperation,
   clearPendingImageOperation,
+  pendingHomePageSlugStore,
 } from '@/stores/storykeep';
 import { startLoadingAnimation } from '@/utils/helpers';
 import type {
+  FlatNode,
   BaseNode,
   PaneNode,
   StoryFragmentNode,
+  MarkdownPaneFragmentNode,
 } from '@/types/compositorTypes';
 
 type SaveStage =
@@ -27,6 +30,7 @@ type SaveStage =
   | 'SAVING_STORY_FRAGMENTS'
   | 'LINKING_FILES'
   | 'PROCESSING_STYLES'
+  | 'UPDATING_HOME_PAGE'
   | 'COMPLETED'
   | 'ERROR';
 
@@ -59,13 +63,9 @@ export default function SaveModal({
   const [debugMessages, setDebugMessages] = useState<string[]>([]);
   const isSaving = useRef(false);
   const [isNavigating, setIsNavigating] = useState(false);
-
-  // Determine if we're in create mode
   const isCreateMode = slug === 'create';
-
   const contentMap = fullContentMapStore.get();
-
-  // Get backend URL
+  const pendingHomePageSlug = pendingHomePageSlugStore.get();
   const goBackend =
     import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
   const tenantId = import.meta.env.PUBLIC_TENANTID || 'default';
@@ -143,7 +143,8 @@ export default function SaveModal({
         if (
           relevantNodeCount === 0 &&
           nodesWithPendingFiles.length === 0 &&
-          storyFragmentsWithPendingImages.length === 0
+          storyFragmentsWithPendingImages.length === 0 &&
+          !pendingHomePageSlug
         ) {
           addDebugMessage('No changes to save');
           setStage('COMPLETED');
@@ -317,6 +318,56 @@ export default function SaveModal({
                 isContext
               );
 
+              // This ensures css generation in the next phase uses fresh values
+              payload.optionsPayload.nodes.forEach((transformedNode) => {
+                const liveNode = ctx.allNodes.get().get(transformedNode.id);
+                if (!liveNode) return;
+
+                let needsUpdate = false;
+                let updatedNode: BaseNode = { ...liveNode };
+
+                // Update elementCss for TagElement nodes (FlatNode)
+                if (
+                  transformedNode.nodeType === 'TagElement' &&
+                  transformedNode.elementCss
+                ) {
+                  const flatNode = liveNode as FlatNode;
+                  if (flatNode.elementCss !== transformedNode.elementCss) {
+                    (updatedNode as FlatNode).elementCss =
+                      transformedNode.elementCss;
+                    needsUpdate = true;
+                  }
+                }
+
+                // Update parentCss for Markdown nodes (MarkdownPaneFragmentNode)
+                if (
+                  transformedNode.nodeType === 'Markdown' &&
+                  transformedNode.parentCss
+                ) {
+                  const markdownNode = liveNode as MarkdownPaneFragmentNode;
+                  const currentParentCss = markdownNode.parentCss;
+                  const newParentCss = transformedNode.parentCss as string[];
+
+                  const isDifferent =
+                    !currentParentCss ||
+                    currentParentCss.length !== newParentCss.length ||
+                    currentParentCss.some(
+                      (css, index) => css !== newParentCss[index]
+                    );
+
+                  if (isDifferent) {
+                    (updatedNode as MarkdownPaneFragmentNode).parentCss =
+                      newParentCss;
+                    needsUpdate = true;
+                  }
+                }
+
+                // Only update the live node if there are actual changes
+                if (needsUpdate) {
+                  ctx.allNodes.get().set(transformedNode.id, updatedNode);
+                }
+              });
+
               // Check if this pane exists or is new
               const paneExistsInBackend = contentMap.some(
                 (item) => item.type === 'Pane' && item.id === paneNode.id
@@ -505,67 +556,122 @@ export default function SaveModal({
           const { dirtyPaneIds, classes: dirtyClasses } =
             ctx.getDirtyNodesClassData();
 
-          if (dirtyClasses.length === 0) {
-            addDebugMessage(
-              'No dirty classes to process, skipping Tailwind update'
+          // STEP 1: Generate CSS using Astro API
+          const astroEndpoint = `/api/tailwind`;
+          const astroPayload = { dirtyPaneIds, dirtyClasses };
+          const astroResponse = await fetch(astroEndpoint, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-Tenant-ID': tenantId,
+            },
+            credentials: 'include',
+            body: JSON.stringify(astroPayload),
+          });
+
+          if (!astroResponse.ok) {
+            throw new Error(
+              `CSS generation failed! status: ${astroResponse.status}`
             );
-          } else {
-            // STEP 1: Generate CSS using Astro API
-            const astroEndpoint = `/api/tailwind`;
-            const astroPayload = { dirtyPaneIds, dirtyClasses };
-            const astroResponse = await fetch(astroEndpoint, {
-              method: 'POST',
+          }
+
+          const astroResult = await astroResponse.json();
+
+          if (!astroResult.success || !astroResult.generatedCss) {
+            throw new Error('CSS generation failed: no CSS returned');
+          }
+
+          addDebugMessage(
+            `CSS generated: ${astroResult.generatedCss.length} bytes for ${dirtyClasses.length} classes`
+          );
+
+          // STEP 2: Save CSS to Go backend
+          const goEndpoint = `${goBackend}/api/v1/tailwind/update`;
+          const goPayload = { frontendCss: astroResult.generatedCss };
+          const goResponse = await fetch(goEndpoint, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-Tenant-ID': tenantId,
+            },
+            credentials: 'include',
+            body: JSON.stringify(goPayload),
+          });
+
+          if (!goResponse.ok) {
+            throw new Error(`CSS save failed! status: ${goResponse.status}`);
+          }
+
+          const goResult = await goResponse.json();
+          addDebugMessage(
+            `CSS saved successfully: stylesVer ${goResult.stylesVer}`
+          );
+        } catch (error) {
+          const errorMsg =
+            error instanceof Error ? error.message : 'Unknown error';
+          addDebugMessage(`Styles processing failed: ${errorMsg}`);
+          throw new Error(`Failed to process styles: ${errorMsg}`);
+        }
+
+        // Check if we need to update home page
+        if (pendingHomePageSlug) {
+          setStage('UPDATING_HOME_PAGE');
+          setProgress(98);
+          addDebugMessage(`Updating home page to: ${pendingHomePageSlug}`);
+
+          try {
+            // First get current brand config
+            const response = await fetch(`${goBackend}/api/v1/config/brand`, {
+              method: 'GET',
               headers: {
                 'Content-Type': 'application/json',
                 'X-Tenant-ID': tenantId,
               },
               credentials: 'include',
-              body: JSON.stringify(astroPayload),
             });
 
-            if (!astroResponse.ok) {
+            if (!response.ok) {
               throw new Error(
-                `CSS generation failed! status: ${astroResponse.status}`
+                `Failed to get current brand config: ${response.status}`
               );
             }
 
-            const astroResult = await astroResponse.json();
+            const currentBrandConfig = await response.json();
 
-            if (!astroResult.success || !astroResult.generatedCss) {
-              throw new Error('CSS generation failed: no CSS returned');
-            }
+            // Update HOME_SLUG
+            const updatedBrandConfig = {
+              ...currentBrandConfig,
+              HOME_SLUG: pendingHomePageSlug,
+            };
 
-            addDebugMessage(
-              `CSS generated: ${astroResult.generatedCss.length} bytes for ${dirtyClasses.length} classes`
+            const updateResponse = await fetch(
+              `${goBackend}/api/v1/config/brand`,
+              {
+                method: 'PUT',
+                headers: {
+                  'Content-Type': 'application/json',
+                  'X-Tenant-ID': tenantId,
+                },
+                credentials: 'include',
+                body: JSON.stringify(updatedBrandConfig),
+              }
             );
 
-            // STEP 2: Save CSS to Go backend
-            const goEndpoint = `${goBackend}/api/v1/tailwind/update`;
-            const goPayload = { frontendCss: astroResult.generatedCss };
-            const goResponse = await fetch(goEndpoint, {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-                'X-Tenant-ID': tenantId,
-              },
-              credentials: 'include',
-              body: JSON.stringify(goPayload),
-            });
-
-            if (!goResponse.ok) {
-              throw new Error(`CSS save failed! status: ${goResponse.status}`);
+            if (!updateResponse.ok) {
+              throw new Error(
+                `Failed to update home page: ${updateResponse.status}`
+              );
             }
 
-            const goResult = await goResponse.json();
-            addDebugMessage(
-              `CSS saved successfully: stylesVer ${goResult.stylesVer}`
-            );
+            // Clear the pending operation
+            pendingHomePageSlugStore.set(null);
+            addDebugMessage('Home page updated successfully');
+          } catch (error) {
+            const errorMsg =
+              error instanceof Error ? error.message : 'Unknown error';
+            addDebugMessage(`Home page update failed: ${errorMsg}`);
+            throw new Error(`Failed to update home page: ${errorMsg}`);
           }
-        } catch (error) {
-          const errorMsg =
-            error instanceof Error ? error.message : 'Unknown error';
-          addDebugMessage(`Styles processing failed: ${errorMsg}`);
-          throw new Error(`Failed to process styles: ${errorMsg}`);
         }
 
         // Success!
@@ -612,6 +718,8 @@ export default function SaveModal({
         return 'Linking file relationships...';
       case 'PROCESSING_STYLES':
         return 'Processing styles...';
+      case 'UPDATING_HOME_PAGE':
+        return 'Updating home page...';
       case 'COMPLETED':
         return `${actionText} ${modeText.toLowerCase()} completed successfully!`;
       case 'ERROR':

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

@@ -1,8 +1,11 @@
 import { useState, useEffect, type ChangeEvent } from 'react';
+import { useStore } from '@nanostores/react';
 import ExclamationTriangleIcon from '@heroicons/react/24/outline/ExclamationTriangleIcon';
 import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import LockClosedIcon from '@heroicons/react/24/outline/LockClosedIcon';
+import { Switch } from '@ark-ui/react/switch';
 import { getCtx } from '@/stores/nodes';
+import { pendingHomePageSlugStore } from '@/stores/storykeep';
 import { cloneDeep } from '@/utils/helpers';
 import type { BrandConfig } from '@/types/tractstack';
 import {
@@ -28,6 +31,8 @@ const StoryFragmentSlugPanel = ({
   const [validationError, setValidationError] = useState<string | null>(null);
   const [canSave, setCanSave] = useState(false);
   const isHomeSlug = slug === config.HOME_SLUG;
+  const pendingHomePageSlug = useStore(pendingHomePageSlugStore);
+  const isSetAsHomePage = pendingHomePageSlug === slug;
 
   const ctx = getCtx();
   const allNodes = ctx.allNodes.get();
@@ -129,6 +134,14 @@ const StoryFragmentSlugPanel = ({
     }
   };
 
+  const handleSetAsHomePageChange = (details: { checked: boolean }) => {
+    if (details.checked) {
+      pendingHomePageSlugStore.set(slug);
+    } else {
+      pendingHomePageSlugStore.set(null);
+    }
+  };
+
   return (
     <div className="group mb-4 w-full rounded-b-md bg-white px-1.5 py-6">
       <div className="px-3.5">
@@ -194,72 +207,60 @@ const StoryFragmentSlugPanel = ({
             </span>
           </div>
         </div>
+
         {validationError && (
           <div className="mt-2 text-sm text-red-600">
             <ExclamationTriangleIcon className="mr-1 inline h-4 w-4" />
             {validationError}
           </div>
         )}
+
         {isHomeSlug && (
-          <div className="mt-2 text-sm text-gray-600">
-            <LockClosedIcon className="mr-1 inline h-4 w-4" />
-            This is your home page slug and cannot be modified
+          <div className="mt-4">
+            <div className="inline-flex items-center rounded-full bg-blue-100 px-3 py-1.5 text-sm font-medium text-blue-800">
+              <LockClosedIcon className="mr-1.5 h-4 w-4" />
+              Home Page
+            </div>
+            <div className="mt-2 text-sm text-gray-600">
+              This is your current home page
+            </div>
           </div>
         )}
-        <div className="mt-4 text-lg">
-          <div className="text-gray-600">
-            Create a clean, descriptive URL slug that helps users and search
-            engines understand the page content.
-            <ul className="ml-4 mt-1">
-              <li>
-                <CheckIcon className="inline h-4 w-4" /> Use hyphens to separate
-                words
-              </li>
-              <li>
-                <CheckIcon className="inline h-4 w-4" /> Keep it short and
-                descriptive
-              </li>
-              <li>
-                <CheckIcon className="inline h-4 w-4" /> Use only lowercase
-                letters, numbers, and hyphens
-              </li>
-              <li>
-                <CheckIcon className="inline h-4 w-4" /> Must start and end with
-                a letter or number
-              </li>
-            </ul>
-          </div>
-          <div className="py-4">
-            {!isHomeSlug && (
-              <>
-                {charCount < 3 && (
-                  <span className="text-red-500">
-                    Slug must be at least 3 characters
-                  </span>
-                )}
-                {charCount >= 3 && charCount < 5 && !validationError && (
-                  <span className="text-gray-500">
-                    Consider adding more characters for better description
-                  </span>
-                )}
-                {warning && !validationError && (
-                  <span className="text-yellow-500">
-                    Slug is getting long - consider shortening it
-                  </span>
-                )}
-                {isValid && canSave && charCount >= 5 && !validationError && (
-                  <span className="text-green-500">
-                    Good URL length and format!
-                  </span>
-                )}
-                {isValid && !canSave && !validationError && (
-                  <span className="text-gray-500">
-                    Valid characters but needs proper formatting to save
-                  </span>
-                )}
-              </>
+
+        {!isHomeSlug && isValid && canSave && (
+          <div className="mt-4">
+            <div className="flex items-center space-x-3">
+              <Switch.Root
+                checked={isSetAsHomePage}
+                onCheckedChange={handleSetAsHomePageChange}
+                className="flex items-center"
+              >
+                <Switch.Control
+                  className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                    isSetAsHomePage ? 'bg-cyan-600' : 'bg-gray-200'
+                  }`}
+                >
+                  <Switch.Thumb
+                    className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out ${
+                      isSetAsHomePage ? 'translate-x-5' : 'translate-x-0'
+                    }`}
+                  />
+                </Switch.Control>
+                <Switch.HiddenInput />
+              </Switch.Root>
+              <span className="text-sm text-gray-700">Set as Home Page</span>
+            </div>
+            {isSetAsHomePage && (
+              <div className="mt-2 text-sm text-cyan-600">
+                ✓ Will be set as home page when saved
+              </div>
             )}
           </div>
+        )}
+
+        <div className="mt-4 text-sm text-gray-600">
+          Create a clean, descriptive URL slug that helps users and search
+          engines understand the page content.
         </div>
       </div>
     </div>

package/templates/src/components/fields/BackgroundImageWrapper.tsx

@@ -120,7 +120,7 @@ const BackgroundImageWrapper = ({
             <label className="block text-sm font-bold text-gray-700">
               Position
             </label>
-            <div className="flex space-x-4">
+            <div className="flex flex-wrap space-x-4">
               {(
                 [
                   'background',

package/templates/src/components/fields/ViewportComboBox.tsx

@@ -13,7 +13,7 @@ import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import DevicePhoneMobileIcon from '@heroicons/react/24/outline/DevicePhoneMobileIcon';
 import DeviceTabletIcon from '@heroicons/react/24/outline/DeviceTabletIcon';
 import ComputerDesktopIcon from '@heroicons/react/24/outline/ComputerDesktopIcon';
-import { classNames } from '@/utils/helpers';
+import { classNames, useDropdownDirection } from '@/utils/helpers';
 import { tailwindToHex, colorValues } from '@/utils/compositor/tailwindColors';
 import type { BrandConfig } from '@/types/tractstack';
 
@@ -46,6 +46,8 @@ const ViewportComboBox = ({
   const [query, setQuery] = useState('');
   const [isNowNegative, setIsNowNegative] = useState(isNegative);
   const inputRef = useRef<HTMLInputElement>(null);
+  const comboboxRef = useRef<HTMLDivElement>(null);
+  const { openAbove, maxHeight } = useDropdownDirection(comboboxRef);
 
   const Icon =
     viewport === 'mobile'
@@ -155,7 +157,7 @@ const ViewportComboBox = ({
               openOnKeyPress={true}
               composite={true}
             >
-              <div className="relative">
+              <div ref={comboboxRef} className="relative">
                 <div className="relative flex items-center">
                   {isColorValue && (
                     <div
@@ -187,7 +189,12 @@ const ViewportComboBox = ({
                   </Combobox.Trigger>
                 </div>
               </div>
-              <Combobox.Content className="absolute z-50 mt-1 max-h-32 w-full overflow-auto rounded-md bg-white py-1 text-xl shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+              <Combobox.Content
+                className={`absolute z-50 mt-1 w-full overflow-auto rounded-md bg-white py-1 text-xl shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
+                  openAbove ? 'bottom-full mb-1' : 'top-full'
+                }`}
+                style={{ maxHeight: `${maxHeight}px` }}
+              >
                 {collection.items.length === 0 ? (
                   <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
                     Nothing found.

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

@@ -131,7 +131,7 @@ export default function StoryKeepDashboard_Advanced({
   };
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
       {initialize && (
         <div className="rounded-md border border-blue-200 bg-blue-50 p-4">
           <div className="flex">