astro-tractstack 2.1.3 → 2.2.0

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useMemo } from 'react';
 import { useStore } from '@nanostores/react';
 import { Portal } from '@ark-ui/react';
 import SparklesIcon from '@heroicons/react/24/outline/SparklesIcon';
@@ -7,10 +7,7 @@ import ArrowUturnLeftIcon from '@heroicons/react/24/outline/ArrowUturnLeftIcon';
 import ChevronLeftIcon from '@heroicons/react/24/outline/ChevronLeftIcon';
 import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
 import { selectionStore } from '@/stores/selection';
-import {
-  settingsPanelStore,
-  stylePanelTargetMemoryStore,
-} from '@/stores/storykeep';
+import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import {
   isMarkdownPaneFragmentNode,
@@ -58,28 +55,20 @@ const StyleParentPanel = ({
   node: initialNode,
   parentNode: paneNode,
   layer,
+  view,
 }: ParentBasePanelProps) => {
-  const [currentView, setCurrentView] = useState<PanelView>('summary');
-  const [currentLayer, setCurrentLayer] = useState<number>(layer || 1);
-  const [styleTargets, setStyleTargets] = useState<StyleableTarget[]>([]);
-  const [selectedTargetIndex, setSelectedTargetIndex] = useState(0);
-
+  const signal = useStore(settingsPanelStore);
+  const currentView = (view as PanelView) || 'summary';
+  const activeLayer = layer || 1;
   const ctx = getCtx();
   const { isAiRestyleModalOpen } = useStore(selectionStore);
 
-  useEffect(() => {
-    if (
-      !initialNode ||
-      !(
-        isMarkdownPaneFragmentNode(initialNode) || isGridLayoutNode(initialNode)
-      ) ||
-      !paneNode ||
-      !isPaneNode(paneNode)
-    ) {
-      return;
-    }
+  // 1. Build the list of available targets (Outer Container + Columns)
+  const styleTargets = useMemo(() => {
+    if (!initialNode || !paneNode) return [];
 
     let effectiveNode = initialNode;
+    // Find the parent grid if we are currently looking at a column
     if (isMarkdownPaneFragmentNode(initialNode) && initialNode.parentId) {
       const parent = ctx.allNodes.get().get(initialNode.parentId);
       if (parent && isGridLayoutNode(parent)) {
@@ -112,38 +101,17 @@ const StyleParentPanel = ({
         });
       });
     }
+    return targets;
+  }, [initialNode, paneNode, ctx]);
 
-    setStyleTargets(targets);
-
-    const rememberedIndex = stylePanelTargetMemoryStore.get().get(paneNode.id);
-
-    if (rememberedIndex != null && rememberedIndex < targets.length) {
-      setSelectedTargetIndex(rememberedIndex);
-    } else if (initialNode.id !== effectiveNode.id) {
-      // If opened on a child column, find and select it in the list
-      const index = targets.findIndex((t) => t.id === initialNode.id);
-      if (index !== -1) setSelectedTargetIndex(index);
-      else setSelectedTargetIndex(0);
-    } else {
-      setSelectedTargetIndex(0);
-    }
-
-    setCurrentView('summary');
-  }, [initialNode, ctx, paneNode]);
-
-  useEffect(() => {
-    setCurrentLayer(layer || 1);
-  }, [layer]);
-
-  useEffect(() => {
-    if (paneNode?.id) {
-      const newMemory = new Map(stylePanelTargetMemoryStore.get());
-      newMemory.set(paneNode.id, selectedTargetIndex);
-      stylePanelTargetMemoryStore.set(newMemory);
-    }
-  }, [selectedTargetIndex, paneNode?.id]);
+  // 2. Identify active index based on global signal nodeId (Source of Truth)
+  const selectedTargetIndex = useMemo(() => {
+    const idx = styleTargets.findIndex((t) => t.id === signal?.nodeId);
+    return idx === -1 ? 0 : idx;
+  }, [styleTargets, signal?.nodeId]);
 
   const selectedTarget = styleTargets[selectedTargetIndex];
+
   if (!selectedTarget || !paneNode || !isPaneNode(paneNode)) {
     return null;
   }
@@ -155,6 +123,7 @@ const StyleParentPanel = ({
     targetProperty,
   } = selectedTarget;
 
+  // 3. Navigation updates the global store directly
   const handleNavigation = (direction: 'prev' | 'next') => {
     const len = styleTargets.length;
     if (len < 2) return;
@@ -164,24 +133,20 @@ const StyleParentPanel = ({
         ? (selectedTargetIndex + 1) % len
         : (selectedTargetIndex - 1 + len) % len;
 
-    setSelectedTargetIndex(newIndex);
-
-    // Dispatch Signal to move the Orange Outline
     const newTarget = styleTargets[newIndex];
-    const currentSettings = settingsPanelStore.get();
 
-    if (currentSettings && newTarget) {
-      settingsPanelStore.set({
-        ...currentSettings,
-        nodeId: newTarget.id,
-        action: 'style-parent',
-      });
-    }
+    settingsPanelStore.set({
+      ...signal!,
+      nodeId: newTarget.id,
+      action: 'style-parent',
+      view: 'summary', // Reset view to summary when switching physical nodes
+      targetProperty: newTarget.targetProperty,
+      expanded: true,
+    });
   };
 
   const handleLayerAdd = (position: 'before' | 'after', layerNum: number) => {
     const targetNode = cloneDeep(selectedTargetNode);
-
     const emptyLayer = { mobile: {}, tablet: {}, desktop: {} };
     let newParentClasses = [...(targetNode.parentClasses || [])];
     const insertIndex = position === 'before' ? layerNum - 1 : layerNum;
@@ -201,7 +166,9 @@ const StyleParentPanel = ({
     ]);
 
     const newLayer = position === 'before' ? layerNum : layerNum + 1;
-    setCurrentLayer(newLayer);
+    if (signal) {
+      settingsPanelStore.set({ ...signal, layer: newLayer });
+    }
   };
 
   const dispatchToSubPanel = (
@@ -209,10 +176,12 @@ const StyleParentPanel = ({
     extraProps: Record<string, any> = {}
   ) => {
     settingsPanelStore.set({
+      ...signal!,
       nodeId: selectedTargetId,
       action,
       ...extraProps,
       targetProperty: targetProperty,
+      view,
       expanded: true,
     });
   };
@@ -232,22 +201,22 @@ const StyleParentPanel = ({
   };
 
   const handleClickDeleteLayer = () => {
-    dispatchToSubPanel('style-parent-delete-layer', { layer: currentLayer });
+    dispatchToSubPanel('style-parent-delete-layer', { layer: activeLayer });
   };
   const handleClickRemove = (name: string) => {
     dispatchToSubPanel('style-parent-remove', {
-      layer: currentLayer,
+      layer: activeLayer,
       className: name,
     });
   };
   const handleClickUpdate = (name: string) => {
     dispatchToSubPanel('style-parent-update', {
-      layer: currentLayer,
+      layer: activeLayer,
       className: name,
     });
   };
   const handleClickAdd = () => {
-    dispatchToSubPanel('style-parent-add', { layer: currentLayer });
+    dispatchToSubPanel('style-parent-add', { layer: activeLayer });
   };
 
   const handleColorChange = (color: string) => {
@@ -275,9 +244,18 @@ const StyleParentPanel = ({
     ctx.notifyNode('root');
   };
 
+  const setView = (newView: PanelView) => {
+    if (signal) {
+      settingsPanelStore.set({
+        ...signal,
+        view: newView,
+      });
+    }
+  };
+
   const BackButton = () => (
     <button
-      onClick={() => setCurrentView('summary')}
+      onClick={() => setView('summary')}
       className="mb-4 flex items-center gap-2 text-sm font-bold text-gray-600 hover:text-black"
     >
       <ArrowUturnLeftIcon className="h-4 w-4" />
@@ -308,8 +286,7 @@ const StyleParentPanel = ({
   );
 
   const renderSummaryView = () => {
-    if (!initialNode) return null;
-    const isGrid = isGridLayoutNode(initialNode);
+    const isGrid = isGridLayoutNode(selectedTargetNode);
     const childNodeIds = ctx.getChildNodeIDs(paneNode.id);
     const bgNode = childNodeIds
       .map((id) => ctx.allNodes.get().get(id))
@@ -319,6 +296,13 @@ const StyleParentPanel = ({
           'type' in n &&
           (n.type === 'background-image' || n.type === 'artpack-image')
       ) as (BgImageNode | ArtpackImageNode) | undefined;
+
+    const preventGrid =
+      !!bgNode &&
+      ['left', 'right', 'leftBleed', 'rightBleed'].includes(
+        bgNode.position || ''
+      );
+
     let bgSummary = 'None';
     if (bgNode) {
       if (isArtpackImageNode(bgNode)) bgSummary = `Artpack: ${bgNode.image}`;
@@ -365,7 +349,7 @@ const StyleParentPanel = ({
               <div className="flex items-center gap-2">
                 <span className="text-sm text-gray-600">{wrapperSummary}</span>
                 <button
-                  onClick={() => setCurrentView('wrapperStyles')}
+                  onClick={() => setView('wrapperStyles')}
                   className="rounded bg-gray-100 px-3 py-1 text-sm font-bold text-gray-700 hover:bg-gray-200"
                 >
                   Edit
@@ -379,7 +363,7 @@ const StyleParentPanel = ({
                   {bgSummary}
                 </span>
                 <button
-                  onClick={() => setCurrentView('backgroundImage')}
+                  onClick={() => setView('backgroundImage')}
                   className="rounded bg-gray-100 px-3 py-1 text-sm font-bold text-gray-700 hover:bg-gray-200"
                 >
                   Edit
@@ -436,14 +420,14 @@ const StyleParentPanel = ({
             </div>
           )}
 
-        {selectedTargetIndex === 0 && (
+        {!preventGrid && selectedTargetIndex === 0 && (
           <div className="space-y-3 border-t border-gray-200 pt-4">
             <h3 className="text-sm font-bold uppercase text-gray-500">
               Layout
             </h3>
             {!isGrid ? (
               <button
-                onClick={() => convertToGrid(initialNode.id)}
+                onClick={() => initialNode && convertToGrid(initialNode.id)}
                 className="w-full rounded bg-cyan-600 px-4 py-2 text-sm font-bold text-white hover:bg-cyan-700"
               >
                 Convert to Grid Layout
@@ -484,13 +468,13 @@ const StyleParentPanel = ({
                   </div>
                 )}
                 <button
-                  onClick={() => revertFromGrid(initialNode.id)}
+                  onClick={() => initialNode && revertFromGrid(initialNode.id)}
                   className="w-full rounded bg-gray-200 px-4 py-2 text-sm font-bold text-gray-700 hover:bg-gray-300"
                 >
                   Revert to Standard Pane
                 </button>
                 <button
-                  onClick={() => addColumn(initialNode.id)}
+                  onClick={() => initialNode && addColumn(initialNode.id)}
                   className="w-full rounded border border-dashed border-gray-400 bg-transparent px-4 py-2 text-sm font-bold text-gray-700 hover:border-gray-600 hover:bg-gray-50"
                 >
                   Add Column
@@ -527,7 +511,7 @@ const StyleParentPanel = ({
         <div className="space-y-3 border-t border-gray-200 pt-4">
           <button
             onClick={() => {
-              ctx.toolModeValStore.set({ value: 'styles' });
+              ctx.toolModeValStore.set({ value: 'text' });
               selectionStore.setKey('paneToRestyleId', paneNode.id);
               selectionStore.setKey('isAiRestyleModalOpen', true);
             }}
@@ -544,7 +528,7 @@ const StyleParentPanel = ({
   const renderWrapperStylesView = () => {
     const layerCount = selectedTargetNode.parentClasses?.length || 0;
     const currentClasses = selectedTargetNode.parentClasses?.[
-      currentLayer - 1
+      activeLayer - 1
     ] || { mobile: {}, tablet: {}, desktop: {} };
     const hasNoClasses = !Object.values(currentClasses).some(
       (breakpoint) => Object.keys(breakpoint).length > 0
@@ -572,16 +556,19 @@ const StyleParentPanel = ({
                 >
                   <button
                     className={`min-w-8 rounded-md px-3 py-1.5 text-sm font-bold transition-colors ${
-                      currentLayer === num
+                      activeLayer === num
                         ? 'bg-myblue text-white shadow-sm'
-                        : 'bg-white text-mydarkgrey hover:bg-mydarkgrey/10 hover:text-black'
+                        : 'bg-white text-mydarkgrey hover:bg-mydarkgrey hover:bg-opacity-10 hover:text-black'
                     }`}
-                    onClick={() => setCurrentLayer(num)}
+                    onClick={() => {
+                      if (signal)
+                        settingsPanelStore.set({ ...signal, layer: num });
+                    }}
                   >
                     {num}
                   </button>
                   <button
-                    className="rounded border border-dashed border-mydarkgrey/30 p-1 text-xs text-mydarkgrey transition-colors hover:bg-white/50 hover:text-black"
+                    className="rounded border border-dashed border-mydarkgrey border-opacity-30 p-1 text-xs text-mydarkgrey transition-colors hover:bg-white/50 hover:text-black"
                     title="Add Layer Here"
                     onClick={() =>
                       handleLayerAdd(
@@ -596,58 +583,63 @@ const StyleParentPanel = ({
               ))}
           </div>
         </div>
-        {hasNoClasses ? (
-          <div>
-            <em>No styles for this layer.</em>
-          </div>
-        ) : (
-          <div className="flex flex-wrap gap-2">
-            {Object.entries(currentClasses.mobile).map(([className]) => (
-              <SelectedTailwindClass
-                key={className}
-                name={className}
-                values={{
-                  mobile: currentClasses.mobile[className],
-                  tablet: currentClasses.tablet?.[className],
-                  desktop: currentClasses.desktop?.[className],
-                }}
-                onRemove={handleClickRemove}
-                onUpdate={handleClickUpdate}
-              />
-            ))}
-          </div>
+        {layerCount > 0 && activeLayer <= layerCount && (
+          <>
+            {hasNoClasses ? (
+              <div>
+                <em>No styles for this layer.</em>
+              </div>
+            ) : (
+              <div className="flex flex-wrap gap-2">
+                {Object.entries(currentClasses.mobile).map(([className]) => (
+                  <SelectedTailwindClass
+                    key={className}
+                    name={className}
+                    values={{
+                      mobile: currentClasses.mobile[className],
+                      tablet: currentClasses.tablet?.[className],
+                      desktop: currentClasses.desktop?.[className],
+                    }}
+                    onRemove={handleClickRemove}
+                    onUpdate={handleClickUpdate}
+                  />
+                ))}
+              </div>
+            )}
+            <div>
+              <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
+                <li>
+                  <em>Actions:</em>
+                </li>
+                <li>
+                  <button
+                    onClick={handleClickAdd}
+                    className="font-bold text-myblue underline hover:text-black"
+                  >
+                    Add Style
+                  </button>
+                </li>
+                <li>
+                  <button
+                    onClick={handleClickDeleteLayer}
+                    className="font-bold text-myblue underline hover:text-black"
+                  >
+                    Delete Layer
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </>
         )}
-        <div>
-          <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
-            <li>
-              <em>Actions:</em>
-            </li>
-            <li>
-              <button
-                onClick={handleClickAdd}
-                className="font-bold text-myblue underline hover:text-black"
-              >
-                Add Style
-              </button>
-            </li>
-            <li>
-              <button
-                onClick={handleClickDeleteLayer}
-                className="font-bold text-myblue underline hover:text-black"
-              >
-                Delete Layer
-              </button>
-            </li>
-          </ul>
-        </div>
       </div>
     );
   };
 
+  const isGrid = isGridLayoutNode(selectedTargetNode);
   const renderBackgroundImageVIew = () => (
     <div className="space-y-4">
       <BackButton />
-      <BackgroundImageWrapper paneId={paneNode.id} />
+      <BackgroundImageWrapper paneId={paneNode.id} isGrid={isGrid} />
     </div>
   );
 

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

@@ -64,9 +64,8 @@ interface StyleOption {
 
 type StyleableNode = MarkdownPaneFragmentNode | GridLayoutNode;
 
-// This custom prop is passed via the settingsPanelStore signal.
 type CustomPanelProps = ParentBasePanelProps & {
-  targetProperty: 'parentClasses' | 'gridClasses';
+  targetProperty: 'parentClasses' | 'gridClasses' | undefined;
 };
 
 const StyleParentPanelAdd = ({
@@ -83,6 +82,7 @@ const StyleParentPanelAdd = ({
   const styleableNode = node as StyleableNode | null;
 
   if (
+    !targetProperty ||
     !styleableNode ||
     (!isMarkdownPaneFragmentNode(styleableNode) &&
       !isGridLayoutNode(styleableNode))
@@ -187,6 +187,7 @@ const StyleParentPanelAdd = ({
     settingsPanelStore.set({
       nodeId: styleableNode.id,
       layer: layer,
+      view: settingsPanelStore.get()?.view,
       action: 'style-parent',
       expanded: true,
     });

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

@@ -43,6 +43,7 @@ const StyleParentDeleteLayerPanel = ({ node, layer }: ParentBasePanelProps) => {
     settingsPanelStore.set({
       nodeId: styleableNode.id,
       action: 'style-parent',
+      view: settingsPanelStore.get()?.view,
       expanded: true,
     });
   };

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

@@ -17,7 +17,7 @@ type StyleableNode = MarkdownPaneFragmentNode | GridLayoutNode;
 
 // This custom prop is passed via the settingsPanelStore signal.
 type CustomPanelProps = ParentBasePanelProps & {
-  targetProperty: 'parentClasses' | 'gridClasses';
+  targetProperty: 'parentClasses' | 'gridClasses' | undefined;
 };
 
 const StyleParentPanelRemove = ({
@@ -32,6 +32,7 @@ const StyleParentPanelRemove = ({
   const styleableNode = node as StyleableNode | null;
 
   if (
+    !targetProperty ||
     !styleableNode ||
     (!isMarkdownPaneFragmentNode(styleableNode) &&
       !isGridLayoutNode(styleableNode))
@@ -71,6 +72,7 @@ const StyleParentPanelRemove = ({
     settingsPanelStore.set({
       nodeId: styleableNode.id,
       layer: layer,
+      view: settingsPanelStore.get()?.view,
       action: 'style-parent',
       expanded: true,
     });

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

@@ -24,7 +24,7 @@ type ViewportValues = {
 };
 
 type CustomPanelProps = ParentBasePanelProps & {
-  targetProperty: 'parentClasses' | 'gridClasses';
+  targetProperty: 'parentClasses' | 'gridClasses' | undefined;
 };
 
 const StyleParentPanelUpdate = ({
@@ -38,6 +38,7 @@ const StyleParentPanelUpdate = ({
   const config = brandConfigStore.get();
 
   if (
+    !targetProperty ||
     !styleableNode ||
     (!isMarkdownPaneFragmentNode(styleableNode) &&
       !isGridLayoutNode(styleableNode)) ||
@@ -100,6 +101,7 @@ const StyleParentPanelUpdate = ({
     settingsPanelStore.set({
       nodeId: styleableNode.id,
       layer: layer,
+      view: settingsPanelStore.get()?.view,
       action: 'style-parent',
       expanded: true,
     });

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

@@ -274,7 +274,7 @@ const StyleWidgetPanel = ({
   };
 
   const handleWidgetConfig = () => {
-    getCtx().toolModeValStore.set({ value: 'styles' });
+    getCtx().toolModeValStore.set({ value: 'text' });
     settingsPanelStore.set({
       action: `style-code-config`,
       nodeId: node.id,