astro-tractstack 2.0.0-rc.12 → 2.0.0-rc.14

package/package.json

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

package/templates/src/components/Header.astro

@@ -400,60 +400,61 @@ const authStatus = {
       });
     }
 
-    // Admin Modal JavaScript - Only runs when admin elements exist
-    const heartBtn = document.getElementById('admin-heart-btn');
-    const modal = document.getElementById('admin-modal');
-    const closeBtn = document.getElementById('admin-modal-close');
-    const iframe = document.getElementById('admin-sysop-iframe');
-
-    if (heartBtn && modal && closeBtn && iframe) {
-      // Open modal when heart icon is clicked
-      heartBtn.addEventListener('click', function (e) {
+    // Admin Modal JavaScript - Use event delegation
+    document.addEventListener('click', function (e) {
+      if (e.target && (e.target as Element).closest('#admin-heart-btn')) {
         e.preventDefault();
-        modal.classList.remove('hidden');
-        modal.setAttribute('aria-hidden', 'false');
-
-        // Focus management for accessibility
-        closeBtn.focus();
-
-        // Prevent body scroll when modal is open
-        document.body.style.overflow = 'hidden';
-      });
+        const modal = document.getElementById('admin-modal');
+        const closeBtn = document.getElementById('admin-modal-close');
+
+        if (modal && closeBtn) {
+          modal.classList.remove('hidden');
+          modal.setAttribute('aria-hidden', 'false');
+          closeBtn.focus();
+          document.body.style.overflow = 'hidden';
+        }
+        return;
+      }
 
-      // Close modal when X button is clicked
-      closeBtn.addEventListener('click', function (e) {
+      if (e.target && (e.target as Element).closest('#admin-modal-close')) {
         e.preventDefault();
         closeModal();
-      });
+        return;
+      }
 
-      // Close modal when clicking outside the iframe
-      modal.addEventListener('click', function (e) {
-        if (e.target === modal) {
-          closeModal();
-        }
-      });
+      if (e.target && (e.target as Element).id === 'admin-modal') {
+        closeModal();
+        return;
+      }
+    });
 
-      // Close modal with Escape key
-      document.addEventListener('keydown', function (e) {
-        if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') {
+        const modal = document.getElementById('admin-modal');
+        if (modal && !modal.classList.contains('hidden')) {
           closeModal();
         }
-      });
+      }
+    });
 
-      function closeModal() {
-        modal?.classList.add('hidden');
-        modal?.setAttribute('aria-hidden', 'true');
+    function closeModal() {
+      const modal = document.getElementById('admin-modal');
+      const heartBtn = document.getElementById('admin-heart-btn');
 
-        // Restore body scroll
-        document.body.style.overflow = '';
+      modal?.classList.add('hidden');
+      modal?.setAttribute('aria-hidden', 'true');
+      document.body.style.overflow = '';
+      heartBtn?.focus();
+    }
 
-        // Return focus to heart button for accessibility
-        heartBtn?.focus();
+    // iframe error handling
+    document.addEventListener('DOMContentLoaded', function () {
+      const iframe = document.getElementById('admin-sysop-iframe');
+      if (iframe) {
+        iframe.addEventListener('error', function () {
+          console.error('Failed to load admin panel');
+        });
       }
-
-      iframe.addEventListener('error', function () {
-        console.error('Failed to load admin panel');
-      });
-    }
+    });
   }
 </script>

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 = () => {