astro-tractstack 2.0.0-rc.31 → 2.0.0-rc.32

package/package.json

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

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

@@ -173,10 +173,12 @@ const PanelSwitch = ({
     case 'style-link-remove':
     case 'style-link-remove-hover':
       if (clickedNode && signal.className)
-        <StyleLinkRemovePanel
-          node={clickedNode}
-          className={signal.className}
-        />;
+        return (
+          <StyleLinkRemovePanel
+            node={clickedNode}
+            className={signal.className}
+          />
+        );
       break;
 
     case 'style-link-config':
@@ -317,12 +319,12 @@ const PanelSwitch = ({
     case 'style-code-add':
     case 'style-code-container-add':
     case 'style-code-outer-add':
-      if (clickedNode && markdownNode && signal.childId)
+      if (clickedNode && markdownNode)
         return (
           <StyleWidgetAddPanel
             node={clickedNode}
             parentNode={markdownNode}
-            childId={signal.childId}
+            childId={signal?.childId}
           />
         );
       break;

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

@@ -17,7 +17,11 @@ const SettingsPanel = ({ config, availableCodeHooks }: SettingsPanelProps) => {
   const ctx = getCtx();
   const { value: toolModeVal } = useStore(ctx.toolModeValStore);
 
-  if (toolModeVal !== 'styles' || !signal) {
+  const isLinkInsertSignal = signal?.action === 'style-link';
+  const shouldShow =
+    toolModeVal === 'styles' || (toolModeVal === 'text' && isLinkInsertSignal);
+
+  if (!shouldShow || !signal) {
     return null;
   }
 

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

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
-import { Combobox, Switch } from '@ark-ui/react';
+import { Combobox, Switch, Portal } from '@ark-ui/react';
 import { createListCollection } from '@ark-ui/react/collection';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
@@ -8,7 +8,7 @@ import ExclamationTriangleIcon from '@heroicons/react/24/outline/ExclamationTria
 import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
-import { cloneDeep } from '@/utils/helpers';
+import { cloneDeep, useDropdownDirection } from '@/utils/helpers';
 import { isPaneNode } from '@/utils/compositor/typeGuards';
 import type { PaneNode, BasePanelProps } from '@/types/compositorTypes';
 
@@ -30,7 +30,8 @@ const StyleCodeHookPanel = ({
 
   const [localTarget, setLocalTarget] = useState(node.codeHookTarget || '');
   const [query, setQuery] = useState('');
-  const inputRef = useRef<HTMLInputElement>(null);
+  const comboboxRef = useRef<HTMLDivElement>(null);
+  const { openAbove } = useDropdownDirection(comboboxRef);
 
   // Parse the nested options from JSON string
   const [localOptions, setLocalOptions] = useState<OptionState[]>(() => {
@@ -320,42 +321,52 @@ const StyleCodeHookPanel = ({
               loopFocus={true}
               openOnKeyPress={true}
               composite={true}
+              positioning={{
+                placement: openAbove ? 'top' : 'bottom',
+                gutter: 4,
+                sameWidth: true,
+              }}
             >
-              <div className="relative">
-                <Combobox.Input
-                  ref={inputRef}
-                  className={commonInputClass}
-                  placeholder="Select a code hook..."
-                  onBlur={handleBlur}
-                />
-                <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={commonInputClass}
+                    placeholder="Select a code hook..."
+                    onBlur={handleBlur}
                   />
-                </Combobox.Trigger>
-              </div>
-
-              <Combobox.Content className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                {collection.items.length === 0 ? (
-                  <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
-                    Nothing found.
-                  </div>
-                ) : (
-                  collection.items.map((hook) => (
-                    <Combobox.Item
-                      key={hook}
-                      item={hook}
-                      className="codehook-item relative cursor-default select-none py-2 pl-10 pr-4"
-                    >
-                      <span className="block truncate">{hook}</span>
-                      <span className="codehook-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.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>
+
+              <Portal>
+                <Combobox.Positioner style={{ zIndex: 1002 }}>
+                  <Combobox.Content className="z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                    {collection.items.length === 0 ? (
+                      <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
+                        Nothing found.
+                      </div>
+                    ) : (
+                      collection.items.map((hook) => (
+                        <Combobox.Item
+                          key={hook}
+                          item={hook}
+                          className="codehook-item relative cursor-default select-none py-2 pl-10 pr-4"
+                        >
+                          <span className="block truncate">{hook}</span>
+                          <span className="codehook-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>
           {!isValidCodeHook && localTarget && (

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 */
@@ -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 */
@@ -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>