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

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/codehooks/SankeyDiagram.tsx

@@ -234,9 +234,10 @@ const SankeyDiagram = ({ data, isLoading = false }: SankeyDiagramProps) => {
     }
   }, [data, dimensions]);
 
-  const compressedHeight = COMPRESSED_HEIGHT;
-  const needsCompression = compressedHeight && !isExpanded;
-  const displayHeight = needsCompression ? compressedHeight : dimensions.height;
+  const needsCompression = !isExpanded && dimensions.height > COMPRESSED_HEIGHT;
+  const displayHeight = needsCompression
+    ? COMPRESSED_HEIGHT
+    : dimensions.height;
 
   const handleExpand = () => {
     setIsExpanded(!isExpanded);

package/templates/src/components/compositor/PanelVisibilityWrapper.tsx

@@ -51,26 +51,40 @@ const PanelVisibilityWrapper = ({
     const currentWrapper = wrapperRef.current;
     if (!currentWrapper) return;
 
-    // Always observe the panel, regardless of active state
+    // Skip intersection observer for 'add' panels - they behave differently
+    if (panelType === 'add') {
+      return;
+    }
+
     const observer = new IntersectionObserver(
       (entries) => {
-        // Only take action if this panel is currently active and not intersecting
-        if (!entries[0].isIntersecting && isActive) {
-          nodesCtx.closeAllPanels();
+        // Add delay to prevent immediate closing during panel activation
+        if (isActive) {
+          setTimeout(() => {
+            // Double-check the panel is still active before closing
+            const currentActiveMode = nodesCtx.activePaneMode.get();
+            const stillActive =
+              currentActiveMode.panel === panelType &&
+              currentActiveMode.paneId === nodeId;
+            if (!entries[0].isIntersecting && stillActive) {
+              console.log('❌ CLOSING PANEL DUE TO INTERSECTION OBSERVER!', {
+                panelType,
+                nodeId,
+              });
+              nodesCtx.closeAllPanels();
+            }
+          }, 100); // Small delay to allow panel to render
         }
       },
       {
-        threshold: 0.1, // Close when 90% of the panel is out of view
-        rootMargin: '-10px', // Small margin to make detection a bit more forgiving
+        threshold: 0.1,
+        rootMargin: '-10px',
       }
     );
 
     observer.observe(currentWrapper);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [nodeId, panelType, nodesCtx, isActive]); // Include isActive in dependencies
+    return () => observer.disconnect();
+  }, [nodeId, panelType, nodesCtx, isActive]);
 
   return (
     <div

package/templates/src/components/compositor/nodes/Pane.tsx

@@ -27,12 +27,19 @@ const CodeHookContainer = ({
         {Object.entries(payload.params).map(
           ([key, value]) =>
             value && (
-              <div key={key} className="flex items-start">
+              <>
                 <span className="min-w-24 font-bold text-gray-600">{key}:</span>
-                <span className="ml-2 text-gray-800">
-                  {JSON.stringify(value)}
-                </span>
-              </div>
+                <div className="ml-2 flex flex-wrap gap-1">
+                  {value.split('|').map((item, index) => (
+                    <span
+                      key={index}
+                      className="inline-block rounded bg-gray-200 px-2 py-0.5 text-xs text-gray-800"
+                    >
+                      {item}
+                    </span>
+                  ))}
+                </div>
+              </>
             )
         )}
       </div>

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