astro-tractstack 2.0.0-rc.25 → 2.0.0-rc.27

package/package.json

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

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/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,7 +27,7 @@ const CodeHookContainer = ({
         {Object.entries(payload.params).map(
           ([key, value]) =>
             value && (
-              <>
+              <Fragment key={key}>
                 <span className="min-w-24 font-bold text-gray-600">{key}:</span>
                 <div className="ml-2 flex flex-wrap gap-1">
                   {value.split('|').map((item, index) => (
@@ -39,7 +39,7 @@ const CodeHookContainer = ({
                     </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/SettingsPanel.tsx

@@ -17,13 +17,13 @@ const SettingsPanel = ({ config, availableCodeHooks }: SettingsPanelProps) => {
   const ctx = getCtx();
   const { value: toolModeVal } = useStore(ctx.toolModeValStore);
 
-  if (toolModeVal !== `styles` || !signal) {
+  if (toolModeVal !== 'styles' || !signal) {
     return null;
   }
 
   return (
     <div
-      className="bg-mydarkgrey max-w-md rounded-xl bg-opacity-20 p-0.5 backdrop-blur-sm"
+      className="bg-mydarkgrey flex h-full max-w-sm flex-col rounded-xl bg-opacity-20 p-0.5 backdrop-blur-sm"
       style={
         {
           animation: window.matchMedia(
@@ -37,26 +37,30 @@ const SettingsPanel = ({ config, availableCodeHooks }: SettingsPanelProps) => {
       }
     >
       <style>{`
-    @keyframes fadeInFromHalf {
-      0% { opacity: var(--fade-start, 0.5); }
-      100% { opacity: var(--fade-end, 1); }
-    }
-  `}</style>
+        @keyframes fadeInFromHalf {
+          0% { opacity: var(--fade-start, 0.5); }
+          100% { opacity: var(--fade-end, 1); }
+        }
+      `}</style>
       <div
-        className="w-full rounded-lg border border-gray-200 bg-white p-1.5 shadow-xl md:p-2.5"
+        className="flex h-full min-h-0 w-full flex-col rounded-lg border border-gray-200 bg-white bg-opacity-85 shadow-xl"
         style={{ maxWidth: '90vw' }}
       >
-        <div className="mb-4 flex items-center justify-between">
-          <h3 className="text-myblue text-lg font-bold">{panelTitle}</h3>
-          <button
-            onClick={() => settingsPanelStore.set(null)}
-            className="hover:text-myblue text-gray-500"
-          >
-            <XMarkIcon className="h-5 w-5" />
-          </button>
+        {/* Header Section (fixed height) */}
+        <div className="flex-shrink-0 p-1.5 md:p-2.5">
+          <div className="mb-4 flex items-center justify-between">
+            <h3 className="text-myblue text-lg font-bold">{panelTitle}</h3>
+            <button
+              onClick={() => settingsPanelStore.set(null)}
+              className="hover:text-myblue text-gray-500"
+            >
+              <XMarkIcon className="h-5 w-5" />
+            </button>
+          </div>
         </div>
 
-        <div className="space-y-4">
+        {/* Scrollable Content Section */}
+        <div className="min-h-0 flex-1 space-y-4 overflow-y-auto p-1.5 pt-0 md:p-2.5 md:pt-0">
           <div className="rounded bg-gray-50 p-1.5 md:p-2.5">
             <PanelSwitch
               config={config}

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

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useStore } from '@nanostores/react';
 import PencilSquareIcon from '@heroicons/react/24/outline/PencilSquareIcon';
 import PaintBrushIcon from '@heroicons/react/24/outline/PaintBrushIcon';
@@ -8,8 +8,11 @@ import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import BugAntIcon from '@heroicons/react/24/outline/BugAntIcon';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
+import { debounce } from '@/utils/helpers';
 import type { ToolModeVal } from '@/types/compositorTypes';
 
+const SHORT_THRESHOLD = 650;
+
 const storykeepToolModes = [
   {
     key: 'styles' as const,
@@ -41,12 +44,6 @@ const storykeepToolModes = [
     title: 'Move',
     description: 'Keyboard accessible re-order',
   },
-  {
-    key: 'debug' as const,
-    Icon: BugAntIcon,
-    title: 'Debug',
-    description: 'Debug node ids',
-  },
 ] as const;
 
 interface StoryKeepToolModeProps {
@@ -54,9 +51,10 @@ interface StoryKeepToolModeProps {
 }
 
 const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
-  //const signal = useStore(settingsPanelStore);
   const ctx = getCtx();
   const { value: toolModeVal } = useStore(ctx.toolModeValStore);
+  const showGuids = useStore(ctx.showGuids);
+  const navRef = useRef<HTMLElement>(null);
 
   const hasTitle = useStore(ctx.hasTitle);
   const hasPanes = useStore(ctx.hasPanes);
@@ -64,6 +62,8 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
   const className =
     'w-8 h-8 py-1 rounded-xl bg-white text-myblue hover:bg-mygreen/20 hover:text-black hover:rotate-3 cursor-pointer transition-all';
   const classNameActive = 'w-8 h-8 py-1.5 rounded-md bg-myblue text-white';
+  const classNameDebugActive =
+    'w-8 h-8 py-1.5 rounded-md bg-orange-500 text-white';
 
   const currentToolMode =
     storykeepToolModes.find((mode) => mode.key === toolModeVal) ??
@@ -72,49 +72,109 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
   const handleClick = (mode: ToolModeVal) => {
     settingsPanelStore.set(null);
     ctx.toolModeValStore.set({ value: mode });
-    ctx.showGuids.set(mode === `debug`);
     ctx.notifyNode('root');
   };
 
-  // Escape key listener
+  const handleDebugToggle = () => {
+    ctx.showGuids.set(!showGuids);
+    ctx.notifyNode('root');
+  };
+
   useEffect(() => {
     const handleEscapeKey = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         ctx.toolModeValStore.set({ value: 'text' });
-        console.log('Tool mode reset to text via Escape');
       }
     };
+
+    const toolModeNav = navRef.current;
+
+    // If the <nav> element hasn't been rendered yet, do nothing.
+    // The hook will re-run when hasTitle/hasPanes changes and it does render.
+    if (!toolModeNav) {
+      return;
+    }
+
+    const updateToolbarLayout = debounce(() => {
+      const isWideAndShort =
+        window.innerWidth >= 801 && window.innerHeight <= SHORT_THRESHOLD;
+      toolModeNav.classList.toggle('is-compact-widget', isWideAndShort);
+    }, 50);
+
     document.addEventListener('keydown', handleEscapeKey);
+    window.addEventListener('resize', updateToolbarLayout);
+
+    updateToolbarLayout(); // Initial check
+
     return () => {
       document.removeEventListener('keydown', handleEscapeKey);
+      window.removeEventListener('resize', updateToolbarLayout);
     };
-  }, [ctx]);
+    // This dependency array is the key. The effect will re-run when the render conditions change.
+  }, [ctx, hasTitle, hasPanes, isContext]);
 
-  if (!hasTitle || (!hasPanes && !isContext)) return null;
+  if (!hasTitle || (!hasPanes && !isContext)) {
+    return null;
+  }
 
   return (
-    <nav
-      id="mainNav"
-      className="z-102 bg-mywhite fixed bottom-0 left-0 right-0 pt-1.5 md:sticky md:bottom-auto md:left-0 md:top-24 md:h-screen md:w-16 md:pt-0"
-    >
-      <div className="flex flex-wrap justify-around gap-4 py-3.5 md:mt-0 md:flex-col md:items-center md:gap-8 md:space-x-0 md:space-y-2 md:py-2">
-        <div className="text-mydarkgrey h-16 text-center text-sm font-bold">
-          mode:
-          <div className="font-action text-myblue pt-1.5 text-center text-xs">
-            {currentToolMode.title}
+    <>
+      <style>{`
+        #mainNav.is-compact-widget {
+          position: fixed;
+          bottom: 0.25rem;
+          left: 0rem;
+          top: auto;
+          right: auto;
+          height: auto;
+          width: auto;
+          padding: 0.5rem;
+          border-radius: 0 0.75rem 0.75rem 0;
+          box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+          background-color: rgba(252, 252, 252, 0.7);
+          backdrop-filter: blur(4px);
+          border: 1px solid rgba(0, 0, 0, 0.05);
+        }
+        #mainNav.is-compact-widget > div {
+          flex-direction: row;
+          flex-wrap: nowrap;
+          align-items: center;
+          gap: 1rem;
+          margin: 0;
+          padding: 0;
+          height: auto;
+        }
+      `}</style>
+      <nav
+        id="mainNav"
+        ref={navRef}
+        className="z-102 bg-mywhite fixed bottom-0 left-0 right-0 pt-1.5 md:sticky md:bottom-auto md:left-0 md:top-24 md:h-screen md:w-16 md:pt-0"
+      >
+        <div className="flex flex-wrap justify-around gap-4 py-0.5 md:mt-0 md:flex-col md:items-center md:gap-8 md:space-x-0 md:space-y-2 md:py-2">
+          <div className="text-mydarkgrey text-center text-sm font-bold">
+            mode:
+            <div className="font-action text-myblue pt-1.5 text-center text-xs">
+              {currentToolMode.title}
+            </div>
           </div>
-        </div>
-        {storykeepToolModes.map(({ key, Icon, description }) => (
-          <div title={description} key={key}>
-            {key === toolModeVal ? (
-              <Icon className={classNameActive} />
-            ) : (
-              <Icon className={className} onClick={() => handleClick(key)} />
-            )}
+          {storykeepToolModes.map(({ key, Icon, description }) => (
+            <div title={description} key={key}>
+              {key === toolModeVal ? (
+                <Icon className={classNameActive} />
+              ) : (
+                <Icon className={className} onClick={() => handleClick(key)} />
+              )}
+            </div>
+          ))}
+          <div title="Toggle debug node ids" key="debug">
+            <BugAntIcon
+              className={showGuids ? classNameDebugActive : className}
+              onClick={handleDebugToggle}
+            />
           </div>
-        ))}
-      </div>
-    </nav>
+        </div>
+      </nav>
+    </>
   );
 };
 

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

@@ -11,6 +11,7 @@ import {
   fullContentMapStore,
   getPendingImageOperation,
   clearPendingImageOperation,
+  pendingHomePageSlugStore,
 } from '@/stores/storykeep';
 import { startLoadingAnimation } from '@/utils/helpers';
 import type {
@@ -29,6 +30,7 @@ type SaveStage =
   | 'SAVING_STORY_FRAGMENTS'
   | 'LINKING_FILES'
   | 'PROCESSING_STYLES'
+  | 'UPDATING_HOME_PAGE'
   | 'COMPLETED'
   | 'ERROR';
 
@@ -61,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';
@@ -145,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');
@@ -614,6 +613,67 @@ export default function SaveModal({
           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',
+            });
+
+            if (!response.ok) {
+              throw new Error(
+                `Failed to get current brand config: ${response.status}`
+              );
+            }
+
+            const currentBrandConfig = await response.json();
+
+            // Update HOME_SLUG
+            const updatedBrandConfig = {
+              ...currentBrandConfig,
+              HOME_SLUG: pendingHomePageSlug,
+            };
+
+            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),
+              }
+            );
+
+            if (!updateResponse.ok) {
+              throw new Error(
+                `Failed to update home page: ${updateResponse.status}`
+              );
+            }
+
+            // 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}`);
+          }
+        }
+
         // Success!
         setStage('COMPLETED');
         setProgress(100);
@@ -658,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>