astro-tractstack 2.0.0-rc.9 → 2.0.0

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

@@ -1,5 +1,5 @@
-import { useEffect, useState, useCallback, useMemo } from 'react';
-import { Combobox } from '@ark-ui/react';
+import { useEffect, useState, useCallback, useMemo, useRef } from 'react';
+import { Combobox, Portal } from '@ark-ui/react';
 import { createListCollection } from '@ark-ui/react/collection';
 import ChevronUpDownIcon from '@heroicons/react/24/outline/ChevronUpDownIcon';
 import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
@@ -10,6 +10,7 @@ import {
 } from '@/stores/storykeep';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
 import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import { useDropdownDirection } from '@/utils/helpers';
 import {
   tagTitles,
   type Tag,
@@ -126,6 +127,8 @@ const StyleElementPanelAdd = ({
   const [query, setQuery] = useState('');
   const [showAdvanced, setShowAdvanced] = useState(false);
   const [selectedStyle, setSelectedStyle] = useState<string | null>(null);
+  const comboboxRef = useRef<HTMLDivElement>(null);
+  const { openAbove } = useDropdownDirection(comboboxRef);
 
   if (
     !node ||
@@ -138,7 +141,6 @@ const StyleElementPanelAdd = ({
 
   const currentClasses = new Set<string>();
 
-  // Get existing classes from default classes in parent
   if (parentNode.defaultClasses?.[node.tagName]) {
     const defaults = parentNode.defaultClasses[node.tagName];
     Object.keys(defaults.mobile).forEach((key) => currentClasses.add(key));
@@ -148,33 +150,26 @@ const StyleElementPanelAdd = ({
       Object.keys(defaults.desktop).forEach((key) => currentClasses.add(key));
   }
 
-  // Get existing classes from override classes in node
   if (node.overrideClasses) {
     Object.values(node.overrideClasses).forEach((viewportClasses) => {
       Object.keys(viewportClasses).forEach((key) => currentClasses.add(key));
     });
   }
 
-  // Get filtered styles based on query and existing classes
   const styles = getFilteredStyles(showAdvanced, currentClasses);
-  const filteredStyles =
-    query === ''
-      ? styles
-      : styles.filter(
-          (style) =>
-            style.title.toLowerCase().includes(query.toLowerCase()) ||
-            style.key.toLowerCase().includes(query.toLowerCase())
-        );
 
-  // Create collection for Ark UI Combobox
   const collection = useMemo(
     () =>
       createListCollection({
-        items: filteredStyles,
+        items: styles.filter(
+          (style) =>
+            style.title.toLowerCase().includes(query.toLowerCase()) ||
+            style.key.toLowerCase().includes(query.toLowerCase())
+        ),
         itemToValue: (item: StyleOption) => item.key,
         itemToString: (item: StyleOption) => item.title,
       }),
-    [filteredStyles]
+    [styles, query]
   );
 
   const availableRecommendedStyles =
@@ -228,7 +223,6 @@ const StyleElementPanelAdd = ({
     };
   }, [parentNode.id, node.tagName]);
 
-  // CSS to properly style the combobox items with hover and selection
   const comboboxItemStyles = `
     .style-item[data-highlighted] {
       background-color: #0891b2; /* bg-cyan-600 */
@@ -249,7 +243,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">
@@ -283,46 +277,57 @@ const StyleElementPanelAdd = ({
           loopFocus={true}
           openOnKeyPress={true}
           composite={true}
+          positioning={{
+            placement: openAbove ? 'top' : 'bottom',
+            gutter: 4,
+            sameWidth: true,
+          }}
         >
-          <div className="relative">
-            <Combobox.Input
-              className="border-mydarkgrey focus:border-myblue focus:ring-myblue w-full rounded-md py-2 pl-3 pr-10 text-xl shadow-sm"
-              onChange={(e) => setQuery(e.target.value)}
-              placeholder="Search styles..."
-            />
-            <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
-              <ChevronUpDownIcon
-                className="text-mydarkgrey h-5 w-5"
-                aria-hidden="true"
+          <Combobox.Control ref={comboboxRef}>
+            <div className="relative">
+              <Combobox.Input
+                className="border-mydarkgrey focus:border-myblue focus:ring-myblue w-full rounded-md py-2 pl-3 pr-10 text-xl shadow-sm"
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search styles..."
               />
-            </Combobox.Trigger>
-          </div>
+              <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon
+                  className="text-mydarkgrey h-5 w-5"
+                  aria-hidden="true"
+                />
+              </Combobox.Trigger>
+            </div>
+          </Combobox.Control>
 
-          <Combobox.Content className="absolute z-50 mt-1 max-h-64 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-            {collection.items.length === 0 ? (
-              <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
-                Nothing found.
-              </div>
-            ) : (
-              collection.items.map((style) => (
-                <Combobox.Item
-                  key={style.key}
-                  item={style}
-                  className="style-item relative cursor-default select-none py-2 pl-10 pr-4 text-black"
-                >
-                  <span className="block truncate">
-                    {style.title}
-                    <span className="ml-2 text-sm opacity-60">
-                      {style.className}
-                    </span>
-                  </span>
-                  <span className="style-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">
-                    <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                  </span>
-                </Combobox.Item>
-              ))
-            )}
-          </Combobox.Content>
+          <Portal>
+            <Combobox.Positioner style={{ zIndex: 1002 }}>
+              <Combobox.Content className="max-h-64 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                {collection.items.length === 0 ? (
+                  <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
+                    Nothing found.
+                  </div>
+                ) : (
+                  collection.items.map((style) => (
+                    <Combobox.Item
+                      key={style.key}
+                      item={style}
+                      className="style-item relative cursor-default select-none py-2 pl-10 pr-4 text-black"
+                    >
+                      <span className="block truncate">
+                        {style.title}
+                        <span className="ml-2 text-sm opacity-60">
+                          {style.className}
+                        </span>
+                      </span>
+                      <span className="style-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">
+                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                      </span>
+                    </Combobox.Item>
+                  ))
+                )}
+              </Combobox.Content>
+            </Combobox.Positioner>
+          </Portal>
         </Combobox.Root>
       </div>
 

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

@@ -1,5 +1,5 @@
-import { useState, useCallback, useMemo } from 'react';
-import { Combobox } from '@ark-ui/react';
+import { useState, useCallback, useMemo, useRef } from 'react';
+import { Combobox, Portal } from '@ark-ui/react';
 import { createListCollection } from '@ark-ui/react/collection';
 import ChevronUpDownIcon from '@heroicons/react/24/outline/ChevronUpDownIcon';
 import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
@@ -7,6 +7,7 @@ import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
 import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import { useDropdownDirection } from '@/utils/helpers';
 import type { BasePanelProps } from '@/types/compositorTypes';
 
 // Recommended styles for images
@@ -73,6 +74,8 @@ const StyleImagePanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
   const [query, setQuery] = useState('');
   const [showAdvanced, setShowAdvanced] = useState(false);
   const [selectedStyle, setSelectedStyle] = useState<string | null>(null);
+  const comboboxRef = useRef<HTMLDivElement>(null);
+  const { openAbove } = useDropdownDirection(comboboxRef);
 
   if (!node?.tagName || !parentNode || !isMarkdownPaneFragmentNode(parentNode))
     return null;
@@ -84,13 +87,11 @@ const StyleImagePanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
   const ctx = getCtx();
   const allNodes = ctx.allNodes.get();
 
-  // When styling container or outer container, use their IDs directly
   const targetNode = allNodes.get(node.id);
   if (!targetNode) return null;
 
   const currentClasses = new Set<string>();
 
-  // Get existing classes from default classes in parent for THIS element type
   if (parentNode.defaultClasses?.[node.tagName]) {
     const defaults = parentNode.defaultClasses[node.tagName];
     Object.keys(defaults.mobile).forEach((key) => currentClasses.add(key));
@@ -100,14 +101,12 @@ const StyleImagePanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
       Object.keys(defaults.desktop).forEach((key) => currentClasses.add(key));
   }
 
-  // Get existing override classes for THIS element
   if (`overrideClasses` in targetNode && targetNode.overrideClasses) {
     Object.values(targetNode.overrideClasses).forEach((viewportClasses) => {
       Object.keys(viewportClasses).forEach((key) => currentClasses.add(key));
     });
   }
 
-  // Create collection for combobox with filtered styles
   const styles = getFilteredStyles(showAdvanced, currentClasses);
   const filteredStyles =
     query === ''
@@ -118,7 +117,6 @@ const StyleImagePanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
             style.key.toLowerCase().includes(query.toLowerCase())
         );
 
-  // Create collection for Ark UI Combobox
   const collection = useMemo(() => {
     return createListCollection({
       items: filteredStyles,
@@ -127,7 +125,6 @@ const StyleImagePanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
     });
   }, [filteredStyles]);
 
-  // Get appropriate recommended styles based on element type
   const recommendedStyles = isOuterContainer
     ? OUTER_CONTAINER_STYLES
     : isContainer
@@ -151,7 +148,7 @@ const StyleImagePanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
             ? 'style-img-container-update'
             : 'style-img-update',
         nodeId: node.id,
-        childId, // Preserve childId for container context
+        childId,
         className: styleKey,
         expanded: true,
       });
@@ -160,10 +157,9 @@ const StyleImagePanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
   );
 
   const handleCancel = () => {
-    // Return to main panel with correct context
     settingsPanelStore.set({
       action: 'style-image',
-      nodeId: childId || node.id, // Use childId when available for context
+      nodeId: childId || node.id,
       expanded: true,
     });
   };
@@ -174,7 +170,6 @@ const StyleImagePanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
       ? 'Container'
       : 'Image';
 
-  // CSS to properly style the combobox items with hover and selection
   const comboboxItemStyles = `
     .style-item[data-highlighted] {
       background-color: #0891b2; /* bg-cyan-600 */
@@ -195,7 +190,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">
@@ -230,46 +225,57 @@ const StyleImagePanelAdd = ({ node, parentNode, childId }: BasePanelProps) => {
           loopFocus={true}
           openOnKeyPress={true}
           composite={true}
+          positioning={{
+            placement: openAbove ? 'top' : 'bottom',
+            gutter: 4,
+            sameWidth: true,
+          }}
         >
-          <div className="relative">
-            <Combobox.Input
-              className="border-mydarkgrey focus:border-myblue focus:ring-myblue w-full rounded-md py-2 pl-3 pr-10 text-xl shadow-sm"
-              onChange={(e) => setQuery(e.target.value)}
-              placeholder="Search styles..."
-            />
-            <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
-              <ChevronUpDownIcon
-                className="text-mydarkgrey h-5 w-5"
-                aria-hidden="true"
+          <Combobox.Control ref={comboboxRef}>
+            <div className="relative">
+              <Combobox.Input
+                className="border-mydarkgrey focus:border-myblue focus:ring-myblue w-full rounded-md py-2 pl-3 pr-10 text-xl shadow-sm"
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search styles..."
               />
-            </Combobox.Trigger>
-          </div>
+              <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon
+                  className="text-mydarkgrey h-5 w-5"
+                  aria-hidden="true"
+                />
+              </Combobox.Trigger>
+            </div>
+          </Combobox.Control>
 
-          <Combobox.Content className="absolute z-50 mt-1 max-h-64 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-            {collection.items.length === 0 ? (
-              <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
-                Nothing found.
-              </div>
-            ) : (
-              collection.items.map((style) => (
-                <Combobox.Item
-                  key={style.key}
-                  item={style}
-                  className="style-item relative cursor-default select-none py-2 pl-10 pr-4 text-black"
-                >
-                  <span className="block truncate">
-                    {style.title}
-                    <span className="ml-2 text-sm opacity-60">
-                      {style.className}
-                    </span>
-                  </span>
-                  <span className="style-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">
-                    <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                  </span>
-                </Combobox.Item>
-              ))
-            )}
-          </Combobox.Content>
+          <Portal>
+            <Combobox.Positioner style={{ zIndex: 1002 }}>
+              <Combobox.Content className="max-h-64 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                {collection.items.length === 0 ? (
+                  <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
+                    Nothing found.
+                  </div>
+                ) : (
+                  collection.items.map((style) => (
+                    <Combobox.Item
+                      key={style.key}
+                      item={style}
+                      className="style-item relative cursor-default select-none py-2 pl-10 pr-4 text-black"
+                    >
+                      <span className="block truncate">
+                        {style.title}
+                        <span className="ml-2 text-sm opacity-60">
+                          {style.className}
+                        </span>
+                      </span>
+                      <span className="style-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">
+                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                      </span>
+                    </Combobox.Item>
+                  ))
+                )}
+              </Combobox.Content>
+            </Combobox.Positioner>
+          </Portal>
         </Combobox.Root>
       </div>
 

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

@@ -1,5 +1,5 @@
-import { useState, useCallback, useMemo } from 'react';
-import { Combobox } from '@ark-ui/react';
+import { useState, useCallback, useMemo, useRef } from 'react';
+import { Combobox, Portal } from '@ark-ui/react';
 import { createListCollection } from '@ark-ui/react/collection';
 import ChevronUpDownIcon from '@heroicons/react/24/outline/ChevronUpDownIcon';
 import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
@@ -7,6 +7,7 @@ import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
 import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import { useDropdownDirection } from '@/utils/helpers';
 import type { BasePanelProps, FlatNode } from '@/types/compositorTypes';
 
 // Recommended styles for list items
@@ -66,17 +67,17 @@ const StyleLiElementAddPanel = ({
   const [query, setQuery] = useState('');
   const [showAdvanced, setShowAdvanced] = useState(false);
   const [selectedStyle, setSelectedStyle] = useState<string | null>(null);
+  const comboboxRef = useRef<HTMLDivElement>(null);
+  const { openAbove } = useDropdownDirection(comboboxRef);
 
   if (!node?.tagName || !parentNode || !isMarkdownPaneFragmentNode(parentNode))
     return null;
 
-  // Determine if we're styling a container or list item
   const isContainer = node.tagName === 'ul' || node.tagName === 'ol';
 
   const ctx = getCtx();
   const allNodes = ctx.allNodes.get();
 
-  // Get the correct node based on what we're styling
   const targetNodeId = isContainer ? node.id : childId || node.id;
   const targetNode = allNodes.get(targetNodeId) as FlatNode;
 
@@ -84,7 +85,6 @@ const StyleLiElementAddPanel = ({
 
   const currentClasses = new Set<string>();
 
-  // Get existing classes from default classes in parent
   if (parentNode.defaultClasses?.[targetNode.tagName]) {
     const defaults = parentNode.defaultClasses[targetNode.tagName];
     Object.keys(defaults.mobile).forEach((key) => currentClasses.add(key));
@@ -94,7 +94,6 @@ const StyleLiElementAddPanel = ({
       Object.keys(defaults.desktop).forEach((key) => currentClasses.add(key));
   }
 
-  // Get existing classes from override classes in node
   if (targetNode.overrideClasses) {
     Object.values(targetNode.overrideClasses).forEach((viewportClasses) => {
       Object.keys(viewportClasses).forEach((key) => currentClasses.add(key));
@@ -103,7 +102,6 @@ const StyleLiElementAddPanel = ({
 
   const styles = getFilteredStyles(showAdvanced, currentClasses);
 
-  // Create collection for combobox
   const collection = useMemo(() => {
     const filteredStyles =
       query === ''
@@ -121,7 +119,6 @@ const StyleLiElementAddPanel = ({
     });
   }, [styles, query]);
 
-  // Get appropriate recommended styles based on element type
   const recommendedStyles = isContainer
     ? LIST_CONTAINER_STYLES
     : LIST_ITEM_STYLES;
@@ -179,7 +176,6 @@ const StyleLiElementAddPanel = ({
     });
   };
 
-  // CSS to properly style the combobox items with hover and selection
   const comboboxItemStyles = `
     .style-item[data-highlighted] {
       background-color: #0891b2; /* bg-cyan-600 */
@@ -200,7 +196,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">
@@ -235,46 +231,57 @@ const StyleLiElementAddPanel = ({
           loopFocus={true}
           openOnKeyPress={true}
           composite={true}
+          positioning={{
+            placement: openAbove ? 'top' : 'bottom',
+            gutter: 4,
+            sameWidth: true,
+          }}
         >
-          <div className="relative">
-            <Combobox.Input
-              className="border-mydarkgrey focus:border-myblue focus:ring-myblue w-full rounded-md py-2 pl-3 pr-10 text-xl shadow-sm"
-              placeholder="Search styles..."
-              autoComplete="off"
-            />
-            <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
-              <ChevronUpDownIcon
-                className="text-mydarkgrey h-5 w-5"
-                aria-hidden="true"
+          <Combobox.Control ref={comboboxRef}>
+            <div className="relative">
+              <Combobox.Input
+                className="border-mydarkgrey focus:border-myblue focus:ring-myblue w-full rounded-md py-2 pl-3 pr-10 text-xl shadow-sm"
+                placeholder="Search styles..."
+                autoComplete="off"
               />
-            </Combobox.Trigger>
-          </div>
+              <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon
+                  className="text-mydarkgrey h-5 w-5"
+                  aria-hidden="true"
+                />
+              </Combobox.Trigger>
+            </div>
+          </Combobox.Control>
 
-          <Combobox.Content className="absolute z-50 mt-1 max-h-64 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-            {collection.items.length === 0 ? (
-              <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
-                Nothing found.
-              </div>
-            ) : (
-              collection.items.map((item) => (
-                <Combobox.Item
-                  key={item.key}
-                  item={item}
-                  className="style-item relative cursor-default select-none py-2 pl-10 pr-4"
-                >
-                  <span className="block truncate">
-                    {item.title}
-                    <span className="ml-2 text-sm opacity-60">
-                      {item.className}
-                    </span>
-                  </span>
-                  <span className="style-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">
-                    <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                  </span>
-                </Combobox.Item>
-              ))
-            )}
-          </Combobox.Content>
+          <Portal>
+            <Combobox.Positioner style={{ zIndex: 1002 }}>
+              <Combobox.Content className="absolute z-50 mt-1 max-h-64 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                {collection.items.length === 0 ? (
+                  <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
+                    Nothing found.
+                  </div>
+                ) : (
+                  collection.items.map((item) => (
+                    <Combobox.Item
+                      key={item.key}
+                      item={item}
+                      className="style-item relative cursor-default select-none py-2 pl-10 pr-4"
+                    >
+                      <span className="block truncate">
+                        {item.title}
+                        <span className="ml-2 text-sm opacity-60">
+                          {item.className}
+                        </span>
+                      </span>
+                      <span className="style-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">
+                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                      </span>
+                    </Combobox.Item>
+                  ))
+                )}
+              </Combobox.Content>
+            </Combobox.Positioner>
+          </Portal>
         </Combobox.Root>
       </div>