astro-tractstack 2.0.0-rc.11 → 2.0.0-rc.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.0-rc.11",
+  "version": "2.0.0-rc.13",
   "description": "Astro integration for TractStack - redeeming the web from boring experiences",
   "type": "module",
   "main": "dist/index.js",
@@ -85,5 +85,10 @@
   "engines": {
     "node": ">=18.14.1"
   },
-  "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
+  "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0",
+  "pnpm": {
+    "overrides": {
+      "esbuild@<=0.24.2": ">=0.25.0"
+    }
+  }
 }

package/templates/src/components/codehooks/EpinetDurationSelector.tsx

@@ -185,7 +185,7 @@ const EpinetDurationSelector = ({
     const startUTCTime = createUTCDateTime(startDate, localFilters.startHour);
     const endUTCTime = createUTCDateTime(endDate, localFilters.endHour);
 
-    if (endUTCTime <= startUTCTime) {
+    if (endUTCTime < startUTCTime) {
       setErrorMessage('End time must be after start time.');
       return;
     }
@@ -549,7 +549,7 @@ const EpinetDurationSelector = ({
 
   return (
     <>
-      <div className="space-y-4">
+      <div className="space-y-4 overflow-visible">
         {$epinetCustomFilters.enabled && (
           <div
             className={`space-y-4 rounded-lg border-2 border-dashed border-gray-200 bg-gray-50 p-4`}
@@ -865,7 +865,10 @@ const EpinetDurationSelector = ({
                           </Select.Control>
                           <Portal>
                             <Select.Positioner>
-                              <Select.Content className="z-10 mt-2 max-h-96 w-[var(--trigger-width)] overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                              <Select.Content
+                                className="z-10 mt-2 max-h-96 overflow-auto rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+                                style={{ width: 'var(--trigger-width)' }}
+                              >
                                 {paginatedUserCounts.length > 0 ? (
                                   [
                                     <Select.Item

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_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/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_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/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_Analytics.tsx

@@ -369,7 +369,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/pages/[...slug]/edit.astro

@@ -201,7 +201,7 @@ 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-24 right-0 flex max-h-screen flex-col items-end gap-2 overflow-visible p-4 md:bottom-0"
   >
     <div class="pointer-events-auto">
       <StoryKeepToolBar client:only="react" />

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

@@ -54,7 +54,7 @@ try {
 
 <Layout title={title} slug="storykeep" isStoryKeep={true}>
   <main id="main-content" class="min-h-screen w-full">
-    <div class="max-w-5xl p-8">
+    <div class="max-w-5xl p-3.5 md:p-8">
       <StoryKeepDashboard
         client:only="react"
         fullContentMap={fullContentMap}

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

@@ -43,7 +43,7 @@ try {
 
 <Layout title={title} slug="storykeep" isStoryKeep={true}>
   <main id="main-content" class="min-h-screen w-full">
-    <div class="max-w-5xl p-8">
+    <div class="max-w-5xl p-3.5 md:p-8">
       <BrandingPageWrapper
         client:only="react"
         fullContentMap={fullContentMap}

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

@@ -50,7 +50,7 @@ try {
 
 <Layout title={title} slug="storykeep" isStoryKeep={true}>
   <main id="main-content" class="min-h-screen w-full">
-    <div class="max-w-5xl p-8">
+    <div class="max-w-5xl p-3.5 md:p-8">
       <StoryKeepDashboard
         client:only="react"
         fullContentMap={fullContentMap}

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

@@ -31,6 +31,8 @@ const mainStylesUrl = isDev
     <link rel="stylesheet" href={mainStylesUrl} />
   </head>
   <body class="h-full">
-    <RegistrationForm client:load isInitMode={true} />
+    <div class="max-w-5xl p-3.5 md:p-8">
+      <RegistrationForm client:load isInitMode={true} />
+    </div>
   </body>
 </html>

package/templates/src/pages/storykeep.astro

@@ -52,7 +52,7 @@ try {
 
 <Layout title={title} isStoryKeep={true} slug="storykeep">
   <main id="main-content" class="min-h-screen w-full">
-    <div class="p-3.5 md:p-8">
+    <div class="max-w-5xl p-3.5 md:p-8">
       <StoryKeepDashboard
         client:only="react"
         fullContentMap={fullContentMap}

package/templates/src/stores/nodes.ts

@@ -2316,10 +2316,41 @@ export class NodesContext {
 
   getDirtyNodesClassData(): { dirtyPaneIds: string[]; classes: string[] } {
     const dirtyNodes = this.getDirtyNodes();
+
     const dirtyPaneIds = dirtyNodes
       .filter((node) => node.nodeType === 'Pane')
       .map((node) => node.id);
-    const classes = extractClassesFromNodes(dirtyNodes);
+
+    // Collect all nodes that need class extraction
+    const allNodesToExtract: BaseNode[] = [];
+
+    // Find root dirty nodes (dirty nodes whose parents are NOT dirty)
+    const dirtyNodeIds = new Set(dirtyNodes.map((n) => n.id));
+    const rootDirtyNodes = dirtyNodes.filter(
+      (node) => !node.parentId || !dirtyNodeIds.has(node.parentId)
+    );
+
+    // For each root dirty node, traverse all descendants
+    rootDirtyNodes.forEach((rootNode) => {
+      // Add the root node itself
+      allNodesToExtract.push(rootNode);
+
+      // Traverse all descendants using breadth-first
+      const queue = [...this.getChildNodeIDs(rootNode.id)];
+      while (queue.length > 0) {
+        const currentId = queue.shift();
+        if (!currentId) continue;
+
+        const currentNode = this.allNodes.get().get(currentId);
+        if (currentNode) {
+          allNodesToExtract.push(currentNode);
+          const childrenIds = this.getChildNodeIDs(currentId);
+          queue.push(...childrenIds);
+        }
+      }
+    });
+
+    const classes = extractClassesFromNodes(allNodesToExtract);
 
     return { dirtyPaneIds, classes };
   }

package/templates/src/stores/storykeep.ts

@@ -1,6 +1,7 @@
 import { atom, map } from 'nanostores';
 import { persistentAtom } from '@nanostores/persistent';
 import { handleSettingsPanelMobile } from '@/utils/layout';
+import { getCtx, ROOT_NODE_NAME } from '@/stores/nodes';
 import type {
   FullContentMapItem,
   Theme,
@@ -116,6 +117,10 @@ export const setViewportMode = (mode: ViewportKey) => {
   } else {
     viewportKeyStore.setKey('value', mode);
   }
+
+  // Notify root node to trigger coordinated re-render
+  const ctx = getCtx();
+  ctx.notifyNode(ROOT_NODE_NAME);
 };
 
 export const toggleShowAnalytics = () => {