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

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

@@ -110,13 +110,9 @@ const PanelSwitch = ({
       break;
 
     case 'style-parent-add':
-      if (markdownNode && signal.className)
+      if (markdownNode)
         return (
-          <StyleParentAddPanel
-            node={markdownNode}
-            layer={signal.layer || 0}
-            className={signal.className}
-          />
+          <StyleParentAddPanel node={markdownNode} layer={signal.layer || 0} />
         );
       break;
 
@@ -200,12 +196,11 @@ const PanelSwitch = ({
       break;
 
     case 'style-element-add':
-      if (clickedNode && markdownNode && signal.className)
+      if (clickedNode && markdownNode)
         return (
           <StyleElementAddPanel
             node={clickedNode}
             parentNode={markdownNode}
-            className={signal.className}
             onTitleChange={onTitleChange}
           />
         );
@@ -317,6 +312,7 @@ const PanelSwitch = ({
 
     case 'style-code-config':
       if (clickedNode) return <StyleWidgetConfigPanel node={clickedNode} />;
+      break;
 
     case 'style-code-add':
     case 'style-code-container-add':

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

@@ -42,7 +42,10 @@ const SettingsPanel = ({ config, availableCodeHooks }: SettingsPanelProps) => {
       100% { opacity: var(--fade-end, 1); }
     }
   `}</style>
-      <div className="w-full max-w-lg rounded-lg border border-gray-200 bg-white p-1.5 shadow-xl md:p-2.5">
+      <div
+        className="w-full rounded-lg border border-gray-200 bg-white p-1.5 shadow-xl md:p-2.5"
+        style={{ maxWidth: '90vw' }}
+      >
         <div className="mb-4 flex items-center justify-between">
           <h3 className="text-myblue text-lg font-bold">{panelTitle}</h3>
           <button

package/templates/src/components/edit/pane/AddPanePanel_codehook.tsx

@@ -153,7 +153,8 @@ const AddPaneCodeHookPanel = ({
       font-weight: bold;
     }
     .hook-item-available:hover {
-      background-color: rgba(8, 145, 178, 0.1); /* bg-cyan-600/10 */
+      background-color: #0891b2;
+      color: #fff;
     }
     .hook-item-disabled {
       background-color: #f9fafb; /* bg-gray-50 */

package/templates/src/components/edit/pane/AddPanePanel_new.tsx

@@ -493,7 +493,7 @@ const AddPaneNewPanel = ({
                 <Switch.HiddenInput />
                 <div className="flex h-6 items-center">
                   <Switch.Label className="px-4 text-sm text-gray-700">
-                    Use odd variant
+                    Toggle subtle variation (great for stacking content)
                   </Switch.Label>
                 </div>
               </Switch.Root>

package/templates/src/components/edit/pane/AddPanePanel_newAICopy_modal.tsx

@@ -165,7 +165,7 @@ ${additionalInstructions}`;
                       Content has been generated successfully! Click "Apply
                       Content" to use this content with your selected design.
                     </p>
-                    <div className="max-h-[60vh] overflow-y-auto rounded-md border border-gray-200 bg-gray-50 p-4">
+                    <div className="overflow-y-auto rounded-md border border-gray-200 bg-gray-50 p-4">
                       <pre className="whitespace-pre-wrap font-mono text-sm text-gray-800">
                         {generatedContent}
                       </pre>

package/templates/src/components/edit/pane/ConfigPanePanel.tsx

@@ -68,6 +68,7 @@ const ConfigPanePanel = ({ nodeId }: ConfigPanePanelProps) => {
   };
 
   const handleCodeHookConfig = () => {
+    ctx.toolModeValStore.set({ value: 'styles' });
     settingsPanelStore.set({
       action: 'setup-codehook',
       nodeId: nodeId,

package/templates/src/components/edit/pane/PanePanel_path.tsx

@@ -222,7 +222,7 @@ const PaneMagicPathPanel = ({ nodeId, setMode }: PaneMagicPathPanelProps) => {
         </div>
 
         <div className="flex w-full flex-wrap gap-8">
-          <div className="min-w-[400px] flex-1">
+          <div className="flex-1">
             <MagicPathBuilder
               paths={heldPaths}
               setPaths={handleHeldPathsChange}
@@ -232,7 +232,7 @@ const PaneMagicPathPanel = ({ nodeId, setMode }: PaneMagicPathPanelProps) => {
             />
           </div>
 
-          <div className="min-w-[400px] flex-1">
+          <div className="flex-1">
             <MagicPathBuilder
               paths={withheldPaths}
               setPaths={handleWithheldPathsChange}

package/templates/src/components/edit/panels/StyleElementPanel_add.tsx

@@ -249,7 +249,7 @@ const StyleElementPanelAdd = ({
   `;
 
   return (
-    <div className="min-h-[400px] max-w-md space-y-4">
+    <div className="max-w-md space-y-4">
       <style>{comboboxItemStyles}</style>
 
       <div className="flex flex-row flex-nowrap justify-between">

package/templates/src/components/edit/panels/StyleImagePanel_add.tsx

@@ -195,7 +195,7 @@ const StyleImagePanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
   `;
 
   return (
-    <div className="min-h-[400px] max-w-md space-y-4">
+    <div className="max-w-md space-y-4">
       <style>{comboboxItemStyles}</style>
 
       <div className="flex flex-row flex-nowrap justify-between">

package/templates/src/components/edit/panels/StyleLiElementPanel_add.tsx

@@ -200,7 +200,7 @@ const StyleLiElementAddPanel = ({
   `;
 
   return (
-    <div className="min-h-[400px] max-w-md space-y-4">
+    <div className="max-w-md space-y-4">
       <style>{comboboxItemStyles}</style>
 
       <div className="flex flex-row flex-nowrap justify-between">

package/templates/src/components/edit/panels/StyleLinkPanel_add.tsx

@@ -164,7 +164,7 @@ const StyleLinkPanelAdd = ({ node }: BasePanelProps) => {
   `;
 
   return (
-    <div className="min-h-[400px] max-w-md space-y-4">
+    <div className="max-w-md space-y-4">
       <style>{comboboxItemStyles}</style>
 
       <div className="flex flex-row flex-nowrap justify-between">

package/templates/src/components/edit/panels/StyleLinkPanel_config.tsx

@@ -221,7 +221,7 @@ const StyleLinkConfigPanel = ({ node, config }: StyleLinkConfigPanelProps) => {
         </div>
 
         <div className="space-y-2">
-          <div className="relative max-h-[60vh] min-h-[400px] overflow-y-auto">
+          <div className="relative overflow-y-auto">
             <div className="absolute inset-x-0">
               <label className="text-mydarkgrey mb-2 block text-sm">
                 {actionType === 'goto'

package/templates/src/components/edit/panels/StyleParentPanel_add.tsx

@@ -174,7 +174,7 @@ const StyleParentPanelAdd = ({ node, layer }: BasePanelProps) => {
   `;
 
   return (
-    <div className="min-h-[400px] max-w-md space-y-4">
+    <div className="max-w-md space-y-4">
       <style>{comboboxItemStyles}</style>
 
       <div className="flex flex-row flex-nowrap justify-between">

package/templates/src/components/edit/panels/StyleWidgetPanel.tsx

@@ -5,6 +5,7 @@ import { StylesMemory } from '@/components/edit/state/StylesMemory';
 import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
 import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
 import { widgetMeta } from '@/constants';
+import { getCtx } from '@/stores/nodes';
 import type {
   FlatNode,
   MarkdownPaneFragmentNode,
@@ -271,6 +272,7 @@ const StyleWidgetPanel = ({
   };
 
   const handleWidgetConfig = () => {
+    getCtx().toolModeValStore.set({ value: 'styles' });
     settingsPanelStore.set({
       action: `style-code-config`,
       nodeId: node.id,

package/templates/src/components/edit/panels/StyleWidgetPanel_add.tsx

@@ -191,7 +191,7 @@ const StyleWidgetPanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
   `;
 
   return (
-    <div className="min-h-[400px] max-w-md space-y-4">
+    <div className="max-w-md space-y-4">
       <style>{comboboxItemStyles}</style>
 
       <div className="flex flex-row flex-nowrap justify-between">

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