astro-tractstack 2.0.0-rc.24 → 2.0.0-rc.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.0-rc.24",
+  "version": "2.0.0-rc.26",
   "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 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,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
@@ -562,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);
@@ -606,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/layouts/Layout.astro

@@ -45,8 +45,6 @@ const {
   impressions = [],
 } = Astro.props;
 
-const isDev = import.meta.env.DEV;
-
 // Get site status from the store
 const isInitialized = !freshInstallStore.get().needsSetup;
 
@@ -60,13 +58,12 @@ const brandConfig = propBrandConfig || (await getBrandConfig(tenantId));
 const cssBasePath = isInitialized ? '/media/css' : '/styles';
 const fontBasePath = isInitialized ? '/media/fonts' : '/fonts';
 const mainStylesUrl = (() => {
-  const baseUrl =
-    isStoryKeep || isDev
-      ? `${cssBasePath}/storykeep.css`
-      : `${cssBasePath}/frontend.css`;
+  const baseUrl = isStoryKeep // || isDev
+    ? `${cssBasePath}/storykeep.css`
+    : `${cssBasePath}/frontend.css`;
 
   // Only add version for frontend.css (the dynamic one)
-  if (!isStoryKeep && !isDev && brandConfig?.STYLES_VER) {
+  if (!isStoryKeep && brandConfig?.STYLES_VER) {
     return `${baseUrl}?v=${brandConfig.STYLES_VER}`;
   }
 

package/templates/src/pages/[...slug]/edit.astro

@@ -201,12 +201,19 @@ for (const [key, value] of Astro.url.searchParams) {
   <!-- Floating Controls (Settings Panel & HUD OR ToolBar) -->
   <aside
     id="settingsControls"
-    class="z-101 pointer-events-none fixed bottom-24 right-0 flex max-h-screen flex-col items-end gap-2 overflow-visible p-4 md:bottom-0"
+    class="z-101 pointer-events-none fixed bottom-16 right-2 flex flex-col items-end gap-2 md:bottom-2"
   >
-    <div class="pointer-events-auto">
+    <div class="pointer-events-none flex-grow"></div>
+
+    {/* Toolbar's wrapper: Does not grow or shrink */}
+    <div class="pointer-events-auto flex-shrink-0">
       <StoryKeepToolBar client:only="react" />
     </div>
-    <div class="pointer-events-auto">
+
+    {
+      /* Settings Panel's wrapper: Grows, shrinks, and will be positioned by our script */
+    }
+    <div class="pointer-events-auto max-h-full">
       <SettingsPanel
         config={brandConfig}
         availableCodeHooks={Object.keys(codeHookComponents)}

package/templates/src/pages/api/tailwind.ts

@@ -11,24 +11,6 @@ export const POST: APIRoute = async ({ request }) => {
       request.headers.get('X-Tenant-ID') ||
       import.meta.env.PUBLIC_TENANTID ||
       'default';
-    const isMultiTenant =
-      import.meta.env.PUBLIC_ENABLE_MULTI_TENANT === 'true' &&
-      tenantId !== 'default';
-
-    if (isMultiTenant) {
-      return new Response('CSS generation disabled in multi-tenant mode', {
-        status: 403,
-      });
-    }
-
-    // Read tailwind config from project root
-    const configPath = path.join(process.cwd(), 'tailwind.config.cjs');
-    const configContent = await fs.readFile(configPath, 'utf-8');
-    const tailwindConfig = new Function(
-      'module',
-      'exports',
-      configContent + '; return module.exports;'
-    )({ exports: {} }, {});
 
     const goBackend =
       import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
@@ -63,18 +45,29 @@ export const POST: APIRoute = async ({ request }) => {
       ...new Set([...(cleanClasses || []), ...(dirtyClasses || [])]),
     ];
 
-    // Generate CSS using JIT
-    const tailwindCss = createTailwindcss({ tailwindConfig });
-    const baseClasses = allClasses.filter(
-      (c) => !c.startsWith('md:') && !c.startsWith('xl:')
-    );
-    const mdClasses = allClasses.filter((c) => c.startsWith('md:'));
-    const xlClasses = allClasses.filter((c) => c.startsWith('xl:'));
-    const htmlContent = [
-      `<div class="${baseClasses.join(' ')}"></div>`,
-      `<div class="md:block ${mdClasses.join(' ')}"></div>`,
-      `<div class="xl:block ${xlClasses.join(' ')}"></div>`,
-    ];
+    // Read base tailwind config from project root
+    const configPath = path.join(process.cwd(), 'tailwind.config.cjs');
+    const configContent = await fs.readFile(configPath, 'utf-8');
+    const baseTailwindConfig = new Function(
+      'module',
+      'exports',
+      configContent + '; return module.exports;'
+    )({ exports: {} }, {});
+
+    // Create config with safelist
+    const tailwindConfigWithSafelist = {
+      ...baseTailwindConfig,
+      safelist: allClasses,
+    };
+
+    // Generate CSS using JIT with safelist
+    const tailwindCss = createTailwindcss({
+      tailwindConfig: tailwindConfigWithSafelist,
+    });
+
+    // Use simple HTML content since safelist should handle class generation
+    const htmlContent = ['<div>Using the safelist</div>'];
+
     const generatedCss = await tailwindCss.generateStylesFromContent(
       `@tailwind base; @tailwind utilities;`,
       htmlContent

package/templates/src/pages/context/[...contextSlug]/edit.astro

@@ -192,12 +192,19 @@ for (const [key, value] of Astro.url.searchParams) {
   <!-- Floating Controls (Settings Panel & HUD OR ToolBar) -->
   <aside
     id="settingsControls"
-    class="z-101 pointer-events-none fixed bottom-24 right-0 flex max-h-screen flex-col items-end gap-2 overflow-y-auto p-4 md:bottom-0"
+    class="z-101 pointer-events-none fixed bottom-16 right-2 flex flex-col items-end gap-2 md:bottom-2"
   >
-    <div class="pointer-events-auto">
+    <div class="pointer-events-none flex-grow"></div>
+
+    {/* Toolbar's wrapper: Does not grow or shrink */}
+    <div class="pointer-events-auto flex-shrink-0">
       <StoryKeepToolBar client:only="react" />
     </div>
-    <div class="pointer-events-auto">
+
+    {
+      /* Settings Panel's wrapper: Grows, shrinks, and will be positioned by our script */
+    }
+    <div class="pointer-events-auto max-h-full">
       <SettingsPanel
         config={brandConfig}
         availableCodeHooks={Object.keys(codeHookComponents)}

package/templates/src/pages/storykeep/advanced.astro

@@ -40,11 +40,10 @@ if (initializing) {
 const title = 'Advanced | StoryKeep';
 
 let fullContentMap;
-let homeSlug = 'hello';
+const homeSlug = brandConfig.HOME_SLUG || 'hello';
 
 try {
   fullContentMap = await getFullContentMap(tenantId);
-  homeSlug = fullContentMap.find((item) => item.isHome)?.slug || 'hello';
 } catch (error) {
   return Astro.redirect(
     `/maint?from=${encodeURIComponent(Astro.url.pathname)}`

package/templates/src/pages/storykeep/branding.astro

@@ -29,11 +29,10 @@ const initializing = !brandConfig.SITE_INIT;
 const title = 'Branding | StoryKeep';
 
 let fullContentMap;
-let homeSlug = 'hello';
+const homeSlug = brandConfig.HOME_SLUG || 'hello';
 
 try {
   fullContentMap = await getFullContentMap(tenantId);
-  homeSlug = fullContentMap.find((item) => item.isHome)?.slug || 'hello';
 } catch (error) {
   return Astro.redirect(
     `/maint?from=${encodeURIComponent(Astro.url.pathname)}`

package/templates/src/pages/storykeep/content.astro

@@ -36,11 +36,10 @@ const title = 'Content | StoryKeep';
 const createMenu = Astro.url.searchParams.has('create-menu');
 
 let fullContentMap;
-let homeSlug = 'hello';
+const homeSlug = brandConfig.HOME_SLUG || 'hello';
 
 try {
   fullContentMap = await getFullContentMap(tenantId);
-  homeSlug = fullContentMap.find((item) => item.isHome)?.slug || 'hello';
 } catch (error) {
   return Astro.redirect(
     `/maint?from=${encodeURIComponent(Astro.url.pathname)}`

package/templates/src/pages/storykeep.astro

@@ -35,14 +35,13 @@ if (initializing) {
 
 const title = 'Analytics | StoryKeep';
 
+const homeSlug = brandConfig.HOME_SLUG || 'hello';
 let fullContentMap;
-let homeSlug = 'hello';
 
 try {
   fullContentMap = await getFullContentMap(
     Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default'
   );
-  homeSlug = fullContentMap.find((item) => item.isHome)?.slug || 'hello';
 } catch (error) {
   return Astro.redirect(
     `/maint?from=${encodeURIComponent(Astro.url.pathname)}`

package/templates/src/stores/storykeep.ts

@@ -29,6 +29,8 @@ export const preferredThemeStore = atom<Theme>('light');
 export const hasAssemblyAIStore = atom<boolean>(false);
 export const codehookMapStore = atom<string[]>([]);
 
+export const pendingHomePageSlugStore = atom<string | null>(null);
+
 // Tool mode types
 export type ToolModeVal =
   | 'styles'

package/templates/src/utils/layout.ts

@@ -1,188 +1,140 @@
 import {
   settingsPanelOpenStore,
+  settingsPanelStore,
   headerPositionStore,
   setHeaderPosition,
   setMobileHeaderFaded,
 } from '@/stores/storykeep';
+import { debounce } from '@/utils/helpers';
 
-// Track whether initial scroll adjustment has been made for settings panel
 let hasScrolledForSettingsPanel = false;
 
-/**
- * Sets up CSS custom properties for dynamic layout positioning
- */
 export function setupLayoutStyles(): void {
-  // Calculate and set CSS custom properties for positioning
   const updateBottomOffset = () => {
     const mobileNavHeight = window.innerWidth < 801 ? 80 : 0;
-    const padding = 16;
+    const padding = 4;
     const offset = `${mobileNavHeight + padding}px`;
-
     document.documentElement.style.setProperty(
       '--bottom-right-controls-bottom-offset',
       offset
     );
   };
-
-  // Set initial values
   updateBottomOffset();
-
-  // Update on resize
   window.addEventListener('resize', updateBottomOffset);
 }
 
-/**
- * Sets up scroll observers for header positioning behavior
- */
+// Replace your existing setupPaneObserver with this one.
+function setupPaneObserver() {
+  let currentObserver: IntersectionObserver | null = null;
+
+  settingsPanelStore.subscribe((signalValue) => {
+    if (currentObserver) {
+      currentObserver.disconnect();
+      currentObserver = null;
+    }
+
+    if (signalValue && signalValue.nodeId) {
+      setTimeout(() => {
+        const { nodeId } = signalValue;
+
+        const targetElement =
+          document.getElementById(`pane-${nodeId}`) ||
+          document.querySelector(`[data-node-id="${nodeId}"]`);
+
+        if (targetElement) {
+          currentObserver = new IntersectionObserver(
+            ([entry]) => {
+              if (!entry.isIntersecting) {
+                settingsPanelStore.set(null);
+              }
+            },
+            { threshold: 0 }
+          );
+          currentObserver.observe(targetElement);
+        }
+      }, 100);
+    }
+  });
+}
+
 export function setupLayoutObservers(): void {
-  const header = document.getElementById('storykeepHeader');
+  const storykeepHeader = document.getElementById('storykeepHeader');
   const toolModeNav = document.getElementById('mainNav');
-  const mainContent = document.getElementById('mainContent');
   const settingsControls = document.getElementById('settingsControls');
   const standardHeader = document.querySelector('header');
 
-  if (!header) return;
+  if (!storykeepHeader || !settingsControls || !standardHeader) return;
 
-  let headerHeight = 0;
-  const updateHeaderHeight = () => {
-    if (standardHeader) {
-      headerHeight = standardHeader.offsetHeight;
-    }
+  let standardHeaderHeight = 0;
+  const updateStandardHeaderHeight = () => {
+    standardHeaderHeight = standardHeader.offsetHeight;
   };
 
-  const updateSettingsMargin = () => {
-    if (settingsControls && header) {
-      const storyKeepHeaderHeight = header.offsetHeight;
-      const viewportHeight = window.innerHeight;
-      const bottomOffset = window.innerWidth < 801 ? 96 : 16; // Mobile nav + padding
-
-      // Set top margin to avoid StoryKeep header overlap only
-      settingsControls.style.marginTop = `${storyKeepHeaderHeight + 20}px`;
-
-      // Set max height for inner scroll
-      const maxHeight =
-        viewportHeight - storyKeepHeaderHeight - bottomOffset - 20;
-      settingsControls.style.maxHeight = `${maxHeight}px`;
-    }
+  const updatePanelPosition = () => {
+    const headerRect = storykeepHeader.getBoundingClientRect();
+    const panelTop = headerRect.bottom;
+    settingsControls.style.top = `${panelTop}px`;
   };
 
   const handleScroll = () => {
     const scrollY = window.scrollY;
-    const shouldBeSticky = scrollY > headerHeight;
-
-    // Only update header position if it actually needs to change
+    const shouldBeSticky = scrollY > standardHeaderHeight;
     const currentPosition = headerPositionStore.get();
     const newPosition = shouldBeSticky ? 'sticky' : 'normal';
 
     if (currentPosition !== newPosition) {
       setHeaderPosition(newPosition);
-
       if (shouldBeSticky) {
-        if (header) {
-          const headerHeight = header.offsetHeight;
-          // Add padding to body to prevent layout shift
-          document.body.style.paddingTop = `${headerHeight}px`;
-
-          header.style.position = 'fixed';
-          header.style.top = '0';
-          header.style.left = '0';
-          header.style.right = '0';
-          header.style.zIndex = '101';
-        }
+        document.body.style.paddingTop = `${storykeepHeader.offsetHeight}px`;
+        storykeepHeader.style.position = 'fixed';
+        storykeepHeader.style.top = '0';
       } else {
-        if (header) {
-          // Remove padding when header is not fixed
-          document.body.style.paddingTop = '';
-
-          header.style.position = '';
-          header.style.top = '';
-          header.style.left = '';
-          header.style.right = '';
-          header.style.zIndex = '';
-        }
+        document.body.style.paddingTop = '';
+        storykeepHeader.style.position = '';
+        storykeepHeader.style.top = '';
       }
     }
 
-    // Update tool mode nav position and main content margin
     if (toolModeNav && window.innerWidth >= 801) {
       if (shouldBeSticky) {
-        // On desktop, make nav fixed when header is sticky
         toolModeNav.classList.remove('md:static');
         toolModeNav.classList.add('md:fixed');
-        toolModeNav.style.top = '60px'; // Below fixed header
+        toolModeNav.style.top = '60px';
         toolModeNav.style.left = '0';
-
-        // Add margin to main content when nav becomes fixed (nav no longer takes flex space)
-        //if (mainContent) {
-        //  mainContent.classList.add('md:ml-16');
-        //}
       } else {
-        // Normal static positioning when header is visible
         toolModeNav.classList.remove('md:fixed');
         toolModeNav.classList.add('md:static');
         toolModeNav.style.top = '';
         toolModeNav.style.left = '';
-
-        // Remove margin from main content when nav is static (nav takes flex space naturally)
-        //if (mainContent) {
-        //  mainContent.classList.remove('md:ml-16');
-        //}
       }
     }
   };
 
-  // Handle resize events
-  const handleResize = () => {
-    updateHeaderHeight();
-    updateSettingsMargin();
-
-    // Handle desktop/mobile breakpoint transitions
-    const isMobile = window.innerWidth < 801;
-
-    if (isMobile && toolModeNav && mainContent) {
-      // Force reset to mobile layout
-      toolModeNav.classList.remove('md:fixed', 'md:static');
-      toolModeNav.style.top = '';
-      toolModeNav.style.left = '';
-
-      // Remove desktop margin
-      mainContent.classList.remove('md:ml-16');
-    }
-
-    // Re-run scroll logic to handle desktop/mobile transitions
+  const debouncedUpdate = debounce(() => {
+    updateStandardHeaderHeight();
     handleScroll();
-  };
+    updatePanelPosition();
+  }, 50);
 
-  // Listen for settings panel state changes
   const handleSettingsPanelChange = () => {
-    const isSettingsOpen = settingsPanelOpenStore.get();
-
-    // Reset scroll flag when panel state changes
-    if (!isSettingsOpen) {
+    if (!settingsPanelOpenStore.get()) {
       hasScrolledForSettingsPanel = false;
     }
   };
 
-  // Set up event listeners
-  window.addEventListener('scroll', handleScroll, { passive: true });
-  window.addEventListener('resize', handleResize);
-
-  // Subscribe to settings panel state changes
+  window.addEventListener('scroll', debouncedUpdate, { passive: true });
+  window.addEventListener('resize', debouncedUpdate);
   settingsPanelOpenStore.subscribe(handleSettingsPanelChange);
 
-  // Initial setup
-  updateHeaderHeight();
-  updateSettingsMargin();
+  setupPaneObserver();
+
+  updateStandardHeaderHeight();
   handleScroll();
+  updatePanelPosition();
 }
 
-/**
- * Handle settings panel mobile behavior
- * This is called when the settings panel is toggled
- */
 export function handleSettingsPanelMobile(isOpen: boolean): void {
   const isMobile = window.innerWidth < 801;
-
   if (!isMobile) return;
 
   if (isOpen) {
@@ -190,19 +142,12 @@ export function handleSettingsPanelMobile(isOpen: boolean): void {
     const headerHeight = header?.offsetHeight || 0;
     const currentScrollY = window.scrollY;
 
-    // Only scroll if we're near the top and haven't already scrolled
     if (currentScrollY <= headerHeight && !hasScrolledForSettingsPanel) {
-      window.scrollTo({
-        top: headerHeight + 10,
-        behavior: 'smooth',
-      });
+      window.scrollTo({ top: headerHeight + 10, behavior: 'smooth' });
       hasScrolledForSettingsPanel = true;
     }
-
-    // Fade the header
     setMobileHeaderFaded(true);
   } else {
-    // Unfade the header and reset scroll flag
     setMobileHeaderFaded(false);
     hasScrolledForSettingsPanel = false;
   }