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

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

@@ -17,13 +17,13 @@ const SettingsPanel = ({ config, availableCodeHooks }: SettingsPanelProps) => {
   const ctx = getCtx();
   const { value: toolModeVal } = useStore(ctx.toolModeValStore);
 
-  if (toolModeVal !== `styles` || !signal) {
+  if (toolModeVal !== 'styles' || !signal) {
     return null;
   }
 
   return (
     <div
-      className="bg-mydarkgrey rounded-xl bg-opacity-20 p-0.5 backdrop-blur-sm"
+      className="bg-mydarkgrey flex h-full max-w-sm flex-col rounded-xl bg-opacity-20 p-0.5 backdrop-blur-sm"
       style={
         {
           animation: window.matchMedia(
@@ -37,23 +37,30 @@ const SettingsPanel = ({ config, availableCodeHooks }: SettingsPanelProps) => {
       }
     >
       <style>{`
-    @keyframes fadeInFromHalf {
-      0% { opacity: var(--fade-start, 0.5); }
-      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="mb-4 flex items-center justify-between">
-          <h3 className="text-myblue text-lg font-bold">{panelTitle}</h3>
-          <button
-            onClick={() => settingsPanelStore.set(null)}
-            className="hover:text-myblue text-gray-500"
-          >
-            <XMarkIcon className="h-5 w-5" />
-          </button>
+        @keyframes fadeInFromHalf {
+          0% { opacity: var(--fade-start, 0.5); }
+          100% { opacity: var(--fade-end, 1); }
+        }
+      `}</style>
+      <div
+        className="flex h-full min-h-0 w-full flex-col rounded-lg border border-gray-200 bg-white bg-opacity-85 shadow-xl"
+        style={{ maxWidth: '90vw' }}
+      >
+        {/* Header Section (fixed height) */}
+        <div className="flex-shrink-0 p-1.5 md:p-2.5">
+          <div className="mb-4 flex items-center justify-between">
+            <h3 className="text-myblue text-lg font-bold">{panelTitle}</h3>
+            <button
+              onClick={() => settingsPanelStore.set(null)}
+              className="hover:text-myblue text-gray-500"
+            >
+              <XMarkIcon className="h-5 w-5" />
+            </button>
+          </div>
         </div>
 
-        <div className="space-y-4">
+        {/* Scrollable Content Section */}
+        <div className="min-h-0 flex-1 space-y-4 overflow-y-auto p-1.5 pt-0 md:p-2.5 md:pt-0">
           <div className="rounded bg-gray-50 p-1.5 md:p-2.5">
             <PanelSwitch
               config={config}

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

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useStore } from '@nanostores/react';
 import PencilSquareIcon from '@heroicons/react/24/outline/PencilSquareIcon';
 import PaintBrushIcon from '@heroicons/react/24/outline/PaintBrushIcon';
@@ -8,8 +8,11 @@ import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import BugAntIcon from '@heroicons/react/24/outline/BugAntIcon';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
+import { debounce } from '@/utils/helpers';
 import type { ToolModeVal } from '@/types/compositorTypes';
 
+const SHORT_THRESHOLD = 650;
+
 const storykeepToolModes = [
   {
     key: 'styles' as const,
@@ -41,12 +44,6 @@ const storykeepToolModes = [
     title: 'Move',
     description: 'Keyboard accessible re-order',
   },
-  {
-    key: 'debug' as const,
-    Icon: BugAntIcon,
-    title: 'Debug',
-    description: 'Debug node ids',
-  },
 ] as const;
 
 interface StoryKeepToolModeProps {
@@ -54,9 +51,10 @@ interface StoryKeepToolModeProps {
 }
 
 const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
-  //const signal = useStore(settingsPanelStore);
   const ctx = getCtx();
   const { value: toolModeVal } = useStore(ctx.toolModeValStore);
+  const showGuids = useStore(ctx.showGuids);
+  const navRef = useRef<HTMLElement>(null);
 
   const hasTitle = useStore(ctx.hasTitle);
   const hasPanes = useStore(ctx.hasPanes);
@@ -64,6 +62,8 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
   const className =
     'w-8 h-8 py-1 rounded-xl bg-white text-myblue hover:bg-mygreen/20 hover:text-black hover:rotate-3 cursor-pointer transition-all';
   const classNameActive = 'w-8 h-8 py-1.5 rounded-md bg-myblue text-white';
+  const classNameDebugActive =
+    'w-8 h-8 py-1.5 rounded-md bg-orange-500 text-white';
 
   const currentToolMode =
     storykeepToolModes.find((mode) => mode.key === toolModeVal) ??
@@ -72,49 +72,109 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
   const handleClick = (mode: ToolModeVal) => {
     settingsPanelStore.set(null);
     ctx.toolModeValStore.set({ value: mode });
-    ctx.showGuids.set(mode === `debug`);
     ctx.notifyNode('root');
   };
 
-  // Escape key listener
+  const handleDebugToggle = () => {
+    ctx.showGuids.set(!showGuids);
+    ctx.notifyNode('root');
+  };
+
   useEffect(() => {
     const handleEscapeKey = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         ctx.toolModeValStore.set({ value: 'text' });
-        console.log('Tool mode reset to text via Escape');
       }
     };
+
+    const toolModeNav = navRef.current;
+
+    // If the <nav> element hasn't been rendered yet, do nothing.
+    // The hook will re-run when hasTitle/hasPanes changes and it does render.
+    if (!toolModeNav) {
+      return;
+    }
+
+    const updateToolbarLayout = debounce(() => {
+      const isWideAndShort =
+        window.innerWidth >= 801 && window.innerHeight <= SHORT_THRESHOLD;
+      toolModeNav.classList.toggle('is-compact-widget', isWideAndShort);
+    }, 50);
+
     document.addEventListener('keydown', handleEscapeKey);
+    window.addEventListener('resize', updateToolbarLayout);
+
+    updateToolbarLayout(); // Initial check
+
     return () => {
       document.removeEventListener('keydown', handleEscapeKey);
+      window.removeEventListener('resize', updateToolbarLayout);
     };
-  }, [ctx]);
+    // This dependency array is the key. The effect will re-run when the render conditions change.
+  }, [ctx, hasTitle, hasPanes, isContext]);
 
-  if (!hasTitle || (!hasPanes && !isContext)) return null;
+  if (!hasTitle || (!hasPanes && !isContext)) {
+    return null;
+  }
 
   return (
-    <nav
-      id="mainNav"
-      className="z-102 bg-mywhite fixed bottom-0 left-0 right-0 pt-1.5 md:sticky md:bottom-auto md:left-0 md:top-24 md:h-screen md:w-16 md:pt-0"
-    >
-      <div className="flex flex-wrap justify-around gap-4 py-3.5 md:mt-0 md:flex-col md:items-center md:gap-8 md:space-x-0 md:space-y-2 md:py-2">
-        <div className="text-mydarkgrey h-16 text-center text-sm font-bold">
-          mode:
-          <div className="font-action text-myblue pt-1.5 text-center text-xs">
-            {currentToolMode.title}
+    <>
+      <style>{`
+        #mainNav.is-compact-widget {
+          position: fixed;
+          bottom: 0.25rem;
+          left: 0rem;
+          top: auto;
+          right: auto;
+          height: auto;
+          width: auto;
+          padding: 0.5rem;
+          border-radius: 0 0.75rem 0.75rem 0;
+          box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+          background-color: rgba(252, 252, 252, 0.7);
+          backdrop-filter: blur(4px);
+          border: 1px solid rgba(0, 0, 0, 0.05);
+        }
+        #mainNav.is-compact-widget > div {
+          flex-direction: row;
+          flex-wrap: nowrap;
+          align-items: center;
+          gap: 1rem;
+          margin: 0;
+          padding: 0;
+          height: auto;
+        }
+      `}</style>
+      <nav
+        id="mainNav"
+        ref={navRef}
+        className="z-102 bg-mywhite fixed bottom-0 left-0 right-0 pt-1.5 md:sticky md:bottom-auto md:left-0 md:top-24 md:h-screen md:w-16 md:pt-0"
+      >
+        <div className="flex flex-wrap justify-around gap-4 py-0.5 md:mt-0 md:flex-col md:items-center md:gap-8 md:space-x-0 md:space-y-2 md:py-2">
+          <div className="text-mydarkgrey text-center text-sm font-bold">
+            mode:
+            <div className="font-action text-myblue pt-1.5 text-center text-xs">
+              {currentToolMode.title}
+            </div>
           </div>
-        </div>
-        {storykeepToolModes.map(({ key, Icon, description }) => (
-          <div title={description} key={key}>
-            {key === toolModeVal ? (
-              <Icon className={classNameActive} />
-            ) : (
-              <Icon className={className} onClick={() => handleClick(key)} />
-            )}
+          {storykeepToolModes.map(({ key, Icon, description }) => (
+            <div title={description} key={key}>
+              {key === toolModeVal ? (
+                <Icon className={classNameActive} />
+              ) : (
+                <Icon className={className} onClick={() => handleClick(key)} />
+              )}
+            </div>
+          ))}
+          <div title="Toggle debug node ids" key="debug">
+            <BugAntIcon
+              className={showGuids ? classNameDebugActive : className}
+              onClick={handleDebugToggle}
+            />
           </div>
-        ))}
-      </div>
-    </nav>
+        </div>
+      </nav>
+    </>
   );
 };
 

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