astro-tractstack 2.0.0-rc.9 → 2.0.0

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

@@ -1,10 +1,11 @@
-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';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
+import { useDropdownDirection } from '@/utils/helpers';
 import type { BasePanelProps } from '@/types/compositorTypes';
 
 // Recommended styles for button states
@@ -57,6 +58,8 @@ const StyleLinkPanelAdd = ({ node }: 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 || (node.tagName !== 'a' && node.tagName !== 'button'))
     return null;
@@ -64,7 +67,6 @@ const StyleLinkPanelAdd = ({ node }: BasePanelProps) => {
   const currentClasses = new Set<string>();
   const isHoverMode = settingsPanelStore.get()?.action?.endsWith('-hover');
 
-  // Get existing button or hover classes
   if (node.buttonPayload) {
     const classes = isHoverMode
       ? node.buttonPayload.buttonHoverClasses
@@ -76,7 +78,6 @@ const StyleLinkPanelAdd = ({ node }: BasePanelProps) => {
 
   const styles = getFilteredStyles(showAdvanced, currentClasses);
 
-  // Create filtered collection for combobox
   const styleCollection = useMemo(() => {
     const filteredStyles =
       query === ''
@@ -94,7 +95,6 @@ const StyleLinkPanelAdd = ({ node }: BasePanelProps) => {
     });
   }, [styles, query]);
 
-  // Get appropriate recommended styles
   const recommendedStyles = isHoverMode ? HOVER_STYLES : BUTTON_STYLES;
   const availableRecommendedStyles = recommendedStyles.filter(
     (style) => !currentClasses.has(style.key)
@@ -143,7 +143,6 @@ const StyleLinkPanelAdd = ({ node }: BasePanelProps) => {
     });
   };
 
-  // CSS to properly style the combobox items with hover and selection
   const comboboxItemStyles = `
     .style-item[data-highlighted] {
       background-color: #0891b2; /* bg-cyan-600 */
@@ -164,7 +163,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">
@@ -199,46 +198,57 @@ const StyleLinkPanelAdd = ({ node }: 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"
-              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">
-            {styleCollection.items.length === 0 ? (
-              <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
-                Nothing found.
-              </div>
-            ) : (
-              styleCollection.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="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">
+                {styleCollection.items.length === 0 ? (
+                  <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
+                    Nothing found.
+                  </div>
+                ) : (
+                  styleCollection.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/StyleLinkPanel_config.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { settingsPanelStore, fullContentMapStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { cloneDeep } from '@/utils/helpers';
@@ -6,10 +6,9 @@ import { lispLexer } from '@/utils/actions/lispLexer';
 import { preParseAction } from '@/utils/actions/preParse_Action';
 import { preParseBunny } from '@/utils/actions/preParse_Bunny';
 import ActionBuilderField from '@/components/form/ActionBuilderField';
-import BunnyMomentSelector from '@/components/fields/BunnyMomentSelector';
 import { GOTO_TARGETS } from '@/constants';
 import type { BrandConfig } from '@/types/tractstack';
-import type { FlatNode } from '@/types/compositorTypes';
+import type { FlatNode, LispToken } from '@/types/compositorTypes';
 
 interface StyleLinkConfigPanelProps {
   node: FlatNode;
@@ -23,7 +22,6 @@ const StyleLinkConfigPanel = ({ node, config }: StyleLinkConfigPanelProps) => {
 
   const [isInitialized, setIsInitialized] = useState(false);
   const [callbackPayload, setCallbackPayload] = useState('');
-  const [actionType, setActionType] = useState<'goto' | 'bunnyMoment'>('goto');
 
   const ctx = getCtx();
   const allNodes = ctx.allNodes.get();
@@ -42,122 +40,143 @@ const StyleLinkConfigPanel = ({ node, config }: StyleLinkConfigPanelProps) => {
   useEffect(() => {
     const currentPayload = node.buttonPayload?.callbackPayload || '';
     setCallbackPayload(currentPayload);
-    setActionType(
-      currentPayload.startsWith('(bunnyMoment') ? 'bunnyMoment' : 'goto'
-    );
     setIsInitialized(true);
   }, [node]);
 
-  const updateNode = (newCallbackPayload: string) => {
+  const updateNode = useCallback(() => {
     try {
       const linkNode = cloneDeep(allNodes.get(node.id)) as FlatNode;
-      if (!linkNode || !markdownId) return;
-
-      const lexedPayload = lispLexer(newCallbackPayload);
-      let targetUrl = null;
-      if (newCallbackPayload.startsWith('(goto')) {
-        targetUrl =
-          lexedPayload && preParseAction(lexedPayload, slug, isContext, config);
+      if (!linkNode || !markdownId) {
+        return;
       }
-      const bunnyPayload = lexedPayload && preParseBunny(lexedPayload);
-      const isExternalUrl =
-        typeof targetUrl === 'string' && targetUrl.startsWith('https://');
-      const existingButtonPayload = linkNode.buttonPayload || {
-        buttonClasses: {},
-        buttonHoverClasses: {},
-        callbackPayload: '',
+
+      const existingButtonPayload = linkNode.buttonPayload;
+      const newButtonPayload: FlatNode['buttonPayload'] = {
+        callbackPayload: callbackPayload,
+        buttonClasses: existingButtonPayload?.buttonClasses || {},
+        buttonHoverClasses: existingButtonPayload?.buttonHoverClasses || {},
       };
 
-      if (newCallbackPayload.startsWith('(bunnyMoment')) {
+      const [tokens] = lispLexer(callbackPayload);
+      delete linkNode.href;
+
+      if (
+        callbackPayload.startsWith('(declare') ||
+        callbackPayload.startsWith('(identifyAs')
+      ) {
         linkNode.tagName = 'button';
-        linkNode.href = '#';
+      } else if (callbackPayload.startsWith('(bunnyMoment')) {
+        linkNode.tagName = 'button';
+        newButtonPayload.bunnyPayload =
+          (tokens && preParseBunny([tokens])) ?? undefined;
+      } else if (callbackPayload.startsWith('(goto')) {
+        const targetUrl =
+          tokens && preParseAction([tokens], slug, isContext, config);
+        const isExternalUrl =
+          typeof targetUrl === 'string' && targetUrl.startsWith('https://');
+
+        linkNode.href = targetUrl || '#';
+        linkNode.tagName = !targetUrl ? 'button' : 'a';
+        if (isExternalUrl) {
+          newButtonPayload.isExternalUrl = true;
+        }
       } else {
-        linkNode.href = isExternalUrl ? targetUrl : targetUrl || '#';
-        linkNode.tagName = !targetUrl || bunnyPayload ? 'button' : 'a';
+        linkNode.tagName = 'button';
       }
 
-      linkNode.buttonPayload = {
-        ...existingButtonPayload,
-        callbackPayload: newCallbackPayload,
-        buttonClasses: existingButtonPayload.buttonClasses || {},
-        buttonHoverClasses: existingButtonPayload.buttonHoverClasses || {},
-        ...(isExternalUrl ? { isExternalUrl: true } : {}),
-        ...(bunnyPayload ? { bunnyPayload } : {}),
-      };
+      linkNode.buttonPayload = newButtonPayload;
+
+      const currentSignal = settingsPanelStore.get();
+      if (currentSignal) {
+        settingsPanelStore.set({
+          ...currentSignal,
+          editLock: Date.now(),
+        });
+      }
 
       ctx.modifyNodes([{ ...linkNode, isChanged: true }]);
     } catch (error) {
-      console.error('Error updating node:', error);
+      console.error('Error in updateNode:', error);
     }
-  };
+  }, [
+    allNodes,
+    config,
+    ctx,
+    isContext,
+    markdownId,
+    node.id,
+    slug,
+    callbackPayload,
+  ]);
 
   useEffect(() => {
-    if (!isInitialized) return;
-
-    if (callbackPayload.startsWith('(bunnyMoment')) {
-      const match = callbackPayload.match(
-        /\(bunnyMoment\s+\(\s*([^\s]+)\s+(\d+)\s*\)\)/
-      );
-      if (match && match[1] && match[2]) {
-        updateNode(callbackPayload);
-      }
+    if (!isInitialized) {
       return;
     }
 
-    const match = callbackPayload.match(/\(goto\s+\(([^)]+)\)/);
-    if (!match) return;
-
-    const parts = match[1].split(' ').filter(Boolean);
-    if (parts.length === 0) return;
-
-    const target = parts[0];
-    const targetConfig = GOTO_TARGETS[target];
-    if (!targetConfig) return;
-
     let isComplete = false;
 
-    if (target === 'url') {
-      isComplete = parts.length > 1;
-    } else if (targetConfig.subcommands) {
-      isComplete = parts.length > 1;
-    } else if (targetConfig.requiresParam) {
-      if (targetConfig.requiresSecondParam) {
-        isComplete = parts.length > 2;
-      } else {
-        isComplete = parts.length > 1;
-      }
-    } else {
+    if (callbackPayload.trim() === '') {
       isComplete = true;
+    } else {
+      const [tokens] = lispLexer(callbackPayload);
+
+      if (
+        Array.isArray(tokens) &&
+        tokens.length > 0 &&
+        Array.isArray(tokens[0])
+      ) {
+        const mainExpression = tokens[0] as LispToken[];
+
+        if (mainExpression.length > 1) {
+          // Must have a command AND parameters
+          const command = mainExpression[0] as string;
+          const parameters = mainExpression[1] as LispToken[];
+
+          if (Array.isArray(parameters)) {
+            if (command === 'declare' || command === 'identifyAs') {
+              if (parameters.length === 2 && parameters[0] && parameters[1]) {
+                isComplete = true;
+              }
+            } else if (command === 'bunnyMoment') {
+              if (parameters.length === 2) {
+                isComplete = true;
+              }
+            } else if (command === 'goto') {
+              const target = parameters[0] as string;
+              const targetConfig = GOTO_TARGETS[target];
+              if (targetConfig) {
+                if (target === 'url') {
+                  isComplete =
+                    parameters.length > 1 &&
+                    String(parameters[1]).includes('.');
+                } else if (targetConfig.subcommands) {
+                  isComplete = parameters.length > 1;
+                } else if (targetConfig.requiresParam) {
+                  if (targetConfig.requiresSecondParam) {
+                    isComplete = parameters.length > 2;
+                  } else {
+                    isComplete = parameters.length > 1;
+                  }
+                } else {
+                  isComplete = true;
+                }
+              }
+            }
+          }
+        }
+      }
     }
 
     if (isComplete) {
-      updateNode(callbackPayload);
+      updateNode();
     }
-  }, [
-    callbackPayload,
-    isInitialized,
-    node.id,
-    config,
-    allNodes,
-    ctx,
-    markdownId,
-    slug,
-    isContext,
-  ]);
+  }, [callbackPayload, isInitialized, updateNode]);
 
   const handleChange = (value: string) => {
     setCallbackPayload(value);
   };
 
-  const handleActionTypeChange = (type: 'goto' | 'bunnyMoment') => {
-    setActionType(type);
-    if (type === 'bunnyMoment') {
-      setCallbackPayload('(bunnyMoment ( ))');
-    } else {
-      setCallbackPayload('');
-    }
-  };
-
   const handleCloseConfig = () => {
     settingsPanelStore.set({
       nodeId: node.id,
@@ -166,28 +185,6 @@ const StyleLinkConfigPanel = ({ node, config }: StyleLinkConfigPanelProps) => {
     });
   };
 
-  const renderActionBuilder = () => {
-    switch (actionType) {
-      case 'bunnyMoment':
-        return (
-          <BunnyMomentSelector
-            value={callbackPayload}
-            onChange={handleChange}
-          />
-        );
-      case 'goto':
-      default:
-        return (
-          <ActionBuilderField
-            slug={slug}
-            value={callbackPayload}
-            onChange={handleChange}
-            contentMap={fullContentMapStore.get()}
-          />
-        );
-    }
-  };
-
   return (
     <div className="relative">
       <div className="w-full max-w-md space-y-4">
@@ -201,36 +198,14 @@ const StyleLinkConfigPanel = ({ node, config }: StyleLinkConfigPanelProps) => {
           </button>
         </div>
 
-        <div className="mb-4 space-y-2">
-          <label className="block text-sm text-gray-700">Action Type</label>
-          <select
-            value={actionType}
-            onChange={(e) =>
-              handleActionTypeChange(e.target.value as 'goto' | 'bunnyMoment')
-            }
-            className="mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
-          >
-            <option value="goto">Navigation Action</option>
-            <option value="bunnyMoment">Video Moment Action</option>
-          </select>
-          <p className="mt-1 text-sm text-gray-500">
-            {actionType === 'goto'
-              ? 'Create a link to navigate to another page or section'
-              : 'Jump to a specific moment in a video on this page'}
-          </p>
-        </div>
-
         <div className="space-y-2">
-          <div className="relative max-h-[60vh] min-h-[400px] overflow-y-auto">
-            <div className="absolute inset-x-0">
-              <label className="text-mydarkgrey mb-2 block text-sm">
-                {actionType === 'goto'
-                  ? 'Callback Payload'
-                  : 'Video Moment Settings'}
-              </label>
-              {renderActionBuilder()}
-            </div>
-          </div>
+          <ActionBuilderField
+            slug={slug}
+            value={callbackPayload}
+            onChange={handleChange}
+            contentMap={fullContentMapStore.get()}
+            label="Action Configuration"
+          />
         </div>
       </div>
     </div>

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

@@ -1,11 +1,12 @@
-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';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
 import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import { useDropdownDirection } from '@/utils/helpers';
 import type { BasePanelProps, PaneFragmentNode } from '@/types/compositorTypes';
 
 const RECOMMENDED_STYLES = [
@@ -57,6 +58,8 @@ const StyleParentPanelAdd = ({ node, layer }: 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);
 
   const paneFragmentNode = node as PaneFragmentNode | null;
 
@@ -174,7 +177,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">
@@ -209,46 +212,57 @@ const StyleParentPanelAdd = ({ node, layer }: 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"
-              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((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/StyleWidgetPanel.tsx

@@ -4,7 +4,8 @@ import { settingsPanelStore } from '@/stores/storykeep';
 import { StylesMemory } from '@/components/edit/state/StylesMemory';
 import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
 import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
-import { widgetMeta } from '@/constants';
+import { regexpHook, widgetMeta } from '@/constants';
+import { getCtx } from '@/stores/nodes';
 import type {
   FlatNode,
   MarkdownPaneFragmentNode,
@@ -41,8 +42,6 @@ const StyleWidgetPanel = ({
   const outerOverrideClasses = outerContainerNode.overrideClasses;
 
   // Extract the widget type from the node's copy
-  const regexpHook =
-    /^(identifyAs|youtube|bunny|bunnyContext|toggle|resource|belief|signup)\((.*)\)$/;
   const hookMatch = node.copy?.match(regexpHook);
   const widgetId = hookMatch ? hookMatch[1] : 'unknown';
   const widgetName = widgetMeta[widgetId]?.title || `Widget`;
@@ -271,6 +270,7 @@ const StyleWidgetPanel = ({
   };
 
   const handleWidgetConfig = () => {
+    getCtx().toolModeValStore.set({ value: 'styles' });
     settingsPanelStore.set({
       action: `style-code-config`,
       nodeId: node.id,