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

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

@@ -505,62 +505,56 @@ export default function SaveModal({
           const { dirtyPaneIds, classes: dirtyClasses } =
             ctx.getDirtyNodesClassData();
 
-          if (dirtyClasses.length === 0) {
-            addDebugMessage(
-              'No dirty classes to process, skipping Tailwind update'
-            );
-          } else {
-            // 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}`
-              );
-            }
+          // 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),
+          });
 
-            const astroResult = await astroResponse.json();
+          if (!astroResponse.ok) {
+            throw new Error(
+              `CSS generation failed! status: ${astroResponse.status}`
+            );
+          }
 
-            if (!astroResult.success || !astroResult.generatedCss) {
-              throw new Error('CSS generation failed: no CSS returned');
-            }
+          const astroResult = await astroResponse.json();
 
-            addDebugMessage(
-              `CSS generated: ${astroResult.generatedCss.length} bytes for ${dirtyClasses.length} classes`
-            );
+          if (!astroResult.success || !astroResult.generatedCss) {
+            throw new Error('CSS generation failed: no CSS returned');
+          }
 
-            // 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),
-            });
+          addDebugMessage(
+            `CSS generated: ${astroResult.generatedCss.length} bytes for ${dirtyClasses.length} classes`
+          );
 
-            if (!goResponse.ok) {
-              throw new Error(`CSS save failed! status: ${goResponse.status}`);
-            }
+          // 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),
+          });
 
-            const goResult = await goResponse.json();
-            addDebugMessage(
-              `CSS saved successfully: stylesVer ${goResult.stylesVer}`
-            );
+          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';

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

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

@@ -238,7 +238,7 @@ export default function StoryKeepDashboard_Analytics({
       )}
 
       {/* Stats Cards Grid */}
-      <div className="mb-6 grid grid-cols-1 gap-4 md:grid-cols-3">
+      <div className="mb-6 grid grid-cols-3 gap-4">
         {stats.map((item) => {
           const period = item.period;
           let firstTimeValue = 0,
@@ -261,11 +261,11 @@ export default function StoryKeepDashboard_Analytics({
           return (
             <div
               key={item.period}
-              className="rounded-lg border border-gray-100 bg-white px-4 py-3 shadow-sm transition-colors hover:border-cyan-100"
+              className="rounded-lg border border-gray-100 bg-white px-2 py-2.5 shadow-sm transition-colors hover:border-cyan-100 md:px-4 md:py-3"
             >
               <dt className="text-sm font-bold text-gray-800">{item.name}</dt>
 
-              <dd className="mt-2">
+              <dd className="mt-1 md:mt-2">
                 <div className="flex items-end justify-between">
                   <div className="flex-1">
                     <div className="text-sm text-gray-600">Events</div>
@@ -276,10 +276,11 @@ export default function StoryKeepDashboard_Analytics({
                 </div>
               </dd>
 
-              <hr className="my-3.5 border-gray-100" />
+              <hr className="my-1.5 border-gray-100 md:my-3.5" />
 
               <dd>
-                <div className="flex items-end justify-between">
+                {/* Desktop: side-by-side layout */}
+                <div className="hidden items-end justify-between md:flex">
                   <div className="flex-1">
                     <div className="text-sm text-gray-600">
                       Anonymous Visitors
@@ -299,13 +300,35 @@ export default function StoryKeepDashboard_Analytics({
                     </div>
                   </div>
                 </div>
+
+                {/* Mobile: stacked layout */}
+                <div className="md:hidden">
+                  <div className="mb-1.5">
+                    <div className="text-sm text-gray-600">
+                      Anonymous Visitors
+                    </div>
+                    <div className="text-2xl font-bold tracking-tight text-cyan-700">
+                      {firstTimeValue === 0
+                        ? '-'
+                        : formatNumber(firstTimeValue)}
+                    </div>
+                  </div>
+                  <div>
+                    <div className="text-sm text-gray-600">Known Leads</div>
+                    <div className="text-2xl font-bold tracking-tight text-cyan-700">
+                      {returningValue === 0
+                        ? '-'
+                        : formatNumber(returningValue)}
+                    </div>
+                  </div>
+                </div>
               </dd>
             </div>
           );
         })}
 
         {/* Total Leads Card */}
-        <div className="rounded-lg border border-gray-100 bg-white px-4 py-3 shadow-sm transition-colors hover:border-cyan-100 md:col-span-3">
+        <div className="col-span-3 rounded-lg border border-gray-100 bg-white px-4 py-3 shadow-sm transition-colors hover:border-cyan-100">
           <div className="flex items-center justify-between">
             <dt className="text-sm font-bold text-gray-800">Total Leads</dt>
             <div className="flex items-center gap-2">
@@ -369,7 +392,7 @@ export default function StoryKeepDashboard_Analytics({
       </div>
 
       {/* User Journey Section */}
-      <div className="mb-6 overflow-hidden">
+      <div className="mb-6 overflow-visible">
         <h3 className="mb-4 text-lg font-bold text-gray-900">
           User Journey Analytics
         </h3>

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

@@ -64,6 +64,12 @@ const StoryKeepDashboard_Content = ({
     handleContentSubtabChange(tabId as any, setActiveContentTab);
   };
 
+  useEffect(() => {
+    if (createMenu) {
+      setActiveContentTab('manage');
+    }
+  }, [createMenu]);
+
   // Lightweight content summary fetch with retry logic
   useEffect(() => {
     let retryCount = 0;

package/templates/src/components/storykeep/widgets/Wizard.tsx

@@ -1,12 +1,13 @@
 import { useState, useEffect } from 'react';
 import { useStore } from '@nanostores/react';
 import { skipWizard } from '@/stores/navigation';
+import { fullContentMapStore } from '@/stores/analytics';
 import type { FullContentMapItem, BrandConfig } from '@/types/tractstack';
 
 interface StoryKeepWizardProps {
   fullContentMap: FullContentMapItem[];
   homeSlug: string;
-  brandConfig: BrandConfig; // Now received as prop instead of fetched
+  brandConfig: BrandConfig;
 }
 
 interface WizardData {
@@ -50,7 +51,7 @@ const wizardSteps: WizardStep[] = [
     key: 'hasAnyMenu',
     message: "A menu helps visitors navigate. Let's create one now.",
     buttonText: 'Create a Menu',
-    href: '/storykeep/content/menus/create',
+    href: '/storykeep/content?create-menu',
   },
   {
     key: 'hasMenu',
@@ -128,11 +129,18 @@ export default function Wizard({
   const [wizardData, setWizardData] = useState<WizardData | null>(null);
   const [loading, setLoading] = useState(true);
   const $skipWizard = useStore(skipWizard);
+  const $clientContentMap = useStore(fullContentMapStore);
+  const activeContentMap =
+    $clientContentMap?.data?.length > 0
+      ? $clientContentMap.data
+      : fullContentMap;
 
   useEffect(() => {
     const buildWizardData = async () => {
       try {
-        const homePage = fullContentMap.find((item) => item.slug === homeSlug);
+        const homePage = activeContentMap.find(
+          (item) => item.slug === homeSlug
+        );
 
         let homeData = null;
         if (homePage) {
@@ -165,7 +173,7 @@ export default function Wizard({
           hasPanes: !!homePage?.panes?.length,
           hasSeo: !!homePage?.description,
           hasMenu: !!homeData?.menuId,
-          hasAnyMenu: fullContentMap.some((item) => item.type === 'Menu'),
+          hasAnyMenu: activeContentMap.some((item) => item.type === 'Menu'),
         };
 
         setWizardData(data);
@@ -176,11 +184,10 @@ export default function Wizard({
       }
     };
 
-    // Only build wizard data if we have brandConfig
     if (brandConfig) {
       buildWizardData();
     }
-  }, [fullContentMap, homeSlug, brandConfig]); // Added brandConfig to dependencies
+  }, [activeContentMap, homeSlug, brandConfig]);
 
   if (loading || !wizardData || !brandConfig || $skipWizard) {
     return null;

package/templates/src/components/tenant/RegistrationForm.tsx

@@ -175,7 +175,7 @@ export default function RegistrationForm({
 
   return (
     <>
-      <div className="mx-auto max-w-2xl p-6">
+      <div className="mx-auto max-w-2xl p-6" style={{ paddingBottom: '112px' }}>
         <div className="rounded-lg bg-white p-8 shadow-lg">
           <div className="mb-8">
             <div className="h-16">
@@ -291,11 +291,13 @@ export default function RegistrationForm({
                 value={state.email}
                 onChange={(value) => updateField('email', value)}
                 type="email"
-                placeholder="john@example.com"
+                placeholder="susie@amazing.com"
                 error={errors.email}
               />
               <p className="mt-1 text-sm text-gray-500">
-                You'll receive an activation email at this address
+                {isInitMode
+                  ? `Used for password reset, etc.`
+                  : `You'll receive an activation email at this address`}
               </p>
             </div>