astro-tractstack 2.1.3 → 2.2.1

package/templates/src/components/compositor/tools/PaneOverlay.tsx

@@ -0,0 +1,122 @@
+import { type MouseEvent } from 'react';
+import { useStore } from '@nanostores/react';
+import PencilSquareIcon from '@heroicons/react/24/outline/PencilSquareIcon';
+import { settingsPanelStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import { classNames } from '@/utils/helpers';
+import type { NodeProps } from '@/types/nodeProps';
+
+interface PaneOverlayProps extends NodeProps {
+  layer?: number;
+  isColumn?: boolean;
+  hasBackground?: boolean;
+}
+
+export const PaneOverlay = (props: PaneOverlayProps) => {
+  const { nodeId, layer, isColumn, hasBackground } = props;
+  const ctx = getCtx(props);
+  const settingsPanel = useStore(settingsPanelStore);
+  const toolMode = useStore(ctx.toolModeValStore).value;
+  const node = ctx.allNodes.get().get(nodeId);
+
+  if (!node) return null;
+
+  const showButtons = layer || isColumn || hasBackground;
+
+  const handleBgClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    settingsPanelStore.set({
+      nodeId,
+      action: 'style-parent',
+      view: 'backgroundImage',
+      expanded: true,
+    });
+  };
+
+  const handleLayerClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    settingsPanelStore.set({
+      nodeId,
+      action: 'style-parent',
+      view: 'wrapperStyles',
+      layer: layer || 1,
+      expanded: true,
+    });
+  };
+
+  const handleColumnClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    settingsPanelStore.set({
+      nodeId,
+      action: 'style-parent',
+      view: 'summary',
+      expanded: true,
+    });
+  };
+
+  const isSelected = settingsPanel?.nodeId === nodeId;
+
+  const outlineClass = isSelected
+    ? 'outline outline-4 outline-dotted outline-orange-400 outline-offset-2'
+    : 'group-hover:outline group-hover:outline-2 group-hover:outline-dotted group-hover:outline-cyan-500 group-hover:outline-offset-2';
+
+  return (
+    <>
+      <div
+        className={classNames(
+          'pointer-events-none absolute inset-0 z-10 transition-all duration-200',
+          toolMode === 'text' ? outlineClass : ''
+        )}
+      />
+
+      {showButtons && (
+        <div
+          className="pane-overlay compositor-chrome absolute flex gap-1 opacity-10 transition-opacity duration-200 group-hover:opacity-100"
+          style={{
+            top: '-24px',
+            right: 0,
+            zIndex: 10,
+          }}
+          onClick={(e) => e.stopPropagation()}
+          data-attr="exclude"
+          data-node-id={nodeId}
+          data-layer={layer}
+        >
+          {hasBackground && (
+            <button
+              onClick={handleBgClick}
+              className="flex h-6 w-auto min-w-px cursor-help items-center justify-center px-1"
+              title="Edit Background"
+            >
+              <img
+                src="/icons/image.svg"
+                alt="background"
+                className="h-3.5 w-auto"
+              />
+            </button>
+          )}
+
+          {layer && (
+            <button
+              onClick={handleLayerClick}
+              className="flex h-6 w-6 items-center justify-center rounded-full bg-purple-600 text-white shadow-md hover:scale-110 hover:bg-purple-600"
+              title={`Edit Layer ${layer}`}
+            >
+              <PencilSquareIcon className="h-3.5 w-3.5" />
+            </button>
+          )}
+
+          {isColumn && (
+            <button
+              onClick={handleColumnClick}
+              className="flex h-6 w-6 items-center justify-center rounded-full bg-purple-600 text-white shadow-md hover:scale-110 hover:bg-purple-600"
+              title="Edit Column Styles"
+            >
+              <PencilSquareIcon className="h-3.5 w-3.5" />
+            </button>
+          )}
+        </div>
+      )}
+    </>
+  );
+};

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

@@ -12,6 +12,7 @@ import ExclamationTriangleIcon from '@heroicons/react/24/outline/ExclamationTria
 import {
   viewportModeStore,
   setViewportMode,
+  viewportKeyStore,
   settingsPanelStore,
   pendingHomePageSlugStore,
   saasModalOpenStore,
@@ -33,6 +34,7 @@ const StoryKeepHeader = ({
   const viewport = useStore(viewportModeStore);
   const pendingHomePageSlug = useStore(pendingHomePageSlugStore);
   const ctx = getCtx();
+  const showSaveBypass = useStore(ctx.showSaveBypass);
   const hasTitle = useStore(ctx.hasTitle);
   const hasPanes = useStore(ctx.hasPanes);
   const [canUndo, setCanUndo] = useState(false);
@@ -48,6 +50,25 @@ const StoryKeepHeader = ({
     ctx.history.history.listen(updateUndoRedo);
   }, [ctx.history]);
 
+  useEffect(() => {
+    if (viewport !== 'auto') return;
+
+    const handleResize = () => {
+      const width = window.innerWidth;
+      if (width >= 1368) {
+        viewportKeyStore.setKey('value', 'desktop');
+      } else if (width >= 801) {
+        viewportKeyStore.setKey('value', 'tablet');
+      } else {
+        viewportKeyStore.setKey('value', 'mobile');
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [viewport]);
+
   const handleSave = () => {
     if (isSandboxMode) {
       saasModalOpenStore.set(true);
@@ -103,7 +124,7 @@ const StoryKeepHeader = ({
   ];
 
   // Show save button if there are undo changes OR pending home page change
-  const shouldShowSave = canUndo || pendingHomePageSlug;
+  const shouldShowSave = canUndo || pendingHomePageSlug || showSaveBypass;
 
   if (!hasTitle && !hasPanes) return null;
 
@@ -172,15 +193,53 @@ const StoryKeepHeader = ({
           </div>
         )}
 
+        {import.meta.env.DEV && (
+          <button
+            onClick={() => {
+              const allNodesMap = ctx.allNodes.get();
+              const allNodesArray = Array.from(allNodesMap.values());
+
+              console.group('Dev Mode: Full Nodes Context Inspection');
+              console.log('Total Nodes in Store:', allNodesArray.length);
+              console.log('Full Nodes Map:', allNodesMap);
+
+              // Specifically audit Creative Panes for large htmlAst payloads
+              // Using type guards/property checks to handle the BaseNode vs PaneNode distinction
+              const creativePanes = allNodesArray.filter(
+                (n) => n.nodeType === 'Pane' && 'htmlAst' in n
+              );
+
+              if (creativePanes.length > 0) {
+                console.group('Creative Panes Detail (htmlAst Audit)');
+                creativePanes.forEach((pane) => {
+                  // Guarding slug access since it is not on BaseNode
+                  const nodeSlug =
+                    'slug' in pane ? (pane as any).slug : 'NO_SLUG';
+
+                  console.log(`Pane ID: ${pane.id} | Slug: ${nodeSlug}`, {
+                    editableElements: (pane as any).htmlAst?.editableElements,
+                    tree: (pane as any).htmlAst?.tree,
+                    css: (pane as any).htmlAst?.css,
+                  });
+                });
+                console.groupEnd();
+              }
+
+              console.groupEnd();
+            }}
+            className="rounded-md bg-myblue px-3.5 py-1.5 font-action font-bold text-white hover:bg-myorange"
+          >
+            Inspect
+          </button>
+        )}
+
         {shouldShowSave && (
-          <div className="flex flex-wrap items-center justify-center gap-2 text-sm">
-            <button
-              onClick={handleSave}
-              className="rounded-md bg-myblue px-3.5 py-1.5 font-action font-bold text-white hover:bg-myorange"
-            >
-              Save
-            </button>
-          </div>
+          <button
+            onClick={handleSave}
+            className="rounded-md bg-myblue px-3.5 py-1.5 font-action font-bold text-white hover:bg-myorange"
+          >
+            Save
+          </button>
         )}
       </div>
 

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

@@ -6,6 +6,8 @@ import {
   isGridLayoutNode,
   isMarkdownPaneFragmentNode,
 } from '@/utils/compositor/typeGuards';
+import CreativeImagePanel from './panels/CreativeImagePanel';
+import CreativeLinkPanel from './panels/CreativeLinkPanel';
 import StyleBreakPanel from './panels/StyleBreakPanel';
 import StyleParentPanel from './panels/StyleParentPanel';
 import StyleParentAddPanel from './panels/StyleParentPanel_add';
@@ -41,6 +43,7 @@ import type {
   FlatNode,
   GridLayoutNode,
   MarkdownPaneFragmentNode,
+  SettingsPanelSignal,
 } from '@/types/compositorTypes';
 
 interface SettingsPanelProps {
@@ -109,6 +112,7 @@ const PanelSwitch = ({
             node={markdownNode}
             parentNode={paneNode}
             layer={signal.layer || 0}
+            view={signal.view}
           />
         );
       else if (gridLayoutNode && paneNode)
@@ -117,6 +121,7 @@ const PanelSwitch = ({
             node={gridLayoutNode}
             parentNode={paneNode}
             layer={signal.layer || 0}
+            view={signal.view}
           />
         );
       break;
@@ -127,7 +132,8 @@ const PanelSwitch = ({
           <StyleParentAddPanel
             node={markdownNode}
             layer={signal.layer || 0}
-            targetProperty={(signal as any).targetProperty}
+            targetProperty={(signal as SettingsPanelSignal).targetProperty}
+            view={signal.view}
           />
         );
       else if (gridLayoutNode)
@@ -135,7 +141,8 @@ const PanelSwitch = ({
           <StyleParentAddPanel
             node={gridLayoutNode}
             layer={signal.layer || 0}
-            targetProperty={(signal as any).targetProperty}
+            targetProperty={(signal as SettingsPanelSignal).targetProperty}
+            view={signal.view}
           />
         );
       break;
@@ -153,7 +160,8 @@ const PanelSwitch = ({
             node={clickedNode}
             layer={signal.layer || 0}
             className={signal.className}
-            targetProperty={(signal as any).targetProperty}
+            targetProperty={(signal as SettingsPanelSignal).targetProperty}
+            view={signal.view}
           />
         );
       break;
@@ -171,7 +179,8 @@ const PanelSwitch = ({
             node={clickedNode}
             layer={signal.layer || 0}
             className={signal.className}
-            targetProperty={(signal as any).targetProperty}
+            targetProperty={(signal as SettingsPanelSignal).targetProperty}
+            view={signal.view}
           />
         );
       break;
@@ -183,6 +192,7 @@ const PanelSwitch = ({
           <StyleParentDeleteLayerPanel
             node={markdownNode}
             layer={signal.layer || 0}
+            view={signal.view}
           />
         );
       break;
@@ -576,6 +586,34 @@ const PanelSwitch = ({
         );
       break;
 
+    case 'style-creative-img':
+      if (paneNode && signal.childId)
+        return (
+          <CreativeImagePanel
+            node={paneNode}
+            childId={signal.childId}
+            mode="img"
+          />
+        );
+      break;
+
+    case 'style-creative-bg':
+      if (paneNode && signal.childId)
+        return (
+          <CreativeImagePanel
+            node={paneNode}
+            childId={signal.childId}
+            mode="bg"
+          />
+        );
+      break;
+
+    case 'style-creative-link':
+    case 'style-creative-btn':
+      if (paneNode && signal.childId)
+        return <CreativeLinkPanel node={paneNode} childId={signal.childId} />;
+      break;
+
     default:
       settingsPanelStore.set(null);
   }

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

@@ -14,9 +14,8 @@ const SettingsPanel = ({ availableCodeHooks }: SettingsPanelProps) => {
   const signal = useStore(settingsPanelStore);
   const ctx = getCtx();
   const { value: toolModeVal } = useStore(ctx.toolModeValStore);
-  const isLinkInsertSignal = signal?.action === 'style-link';
-  const shouldShow =
-    toolModeVal === 'styles' || (toolModeVal === 'text' && isLinkInsertSignal);
+  //const isLinkInsertSignal = signal?.action === 'style-link';
+  const shouldShow = signal !== null && toolModeVal !== 'insert';
 
   if (!shouldShow || !signal) {
     return null;

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

@@ -3,7 +3,7 @@ import { useStore } from '@nanostores/react';
 import PencilSquareIcon from '@heroicons/react/24/outline/PencilSquareIcon';
 import PaintBrushIcon from '@heroicons/react/24/outline/PaintBrushIcon';
 import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
-import ArrowPathRoundedSquareIcon from '@heroicons/react/24/outline/ArrowPathRoundedSquareIcon';
+import SparklesIcon from '@heroicons/react/24/outline/SparklesIcon';
 import ArrowsUpDownIcon from '@heroicons/react/24/outline/ArrowsUpDownIcon';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import BugAntIcon from '@heroicons/react/24/outline/BugAntIcon';
@@ -17,12 +17,6 @@ import type { ToolModeVal } from '@/types/compositorTypes';
 import { selectionStore, resetSelectionStore } from '@/stores/selection';
 
 const storykeepToolModes = [
-  {
-    key: 'styles' as const,
-    Icon: PaintBrushIcon,
-    title: 'Styles',
-    description: 'Click to edit styles',
-  },
   {
     key: 'text' as const,
     Icon: PencilSquareIcon,
@@ -35,30 +29,6 @@ const storykeepToolModes = [
     title: 'Add',
     description: 'Add new element, e.g. paragraph or image',
   },
-  {
-    key: 'eraser' as const,
-    Icon: TrashIcon,
-    title: 'Eraser',
-    description: 'Erase any element(s)',
-  },
-  {
-    key: 'move' as const,
-    Icon: ArrowsUpDownIcon,
-    title: 'Move',
-    description: 'Keyboard accessible re-order',
-  },
-  {
-    key: 'designLibrary' as const,
-    Icon: ArrowPathRoundedSquareIcon,
-    title: 'Design Library',
-    description: 'Save pane to design library',
-  },
-  {
-    key: 'debug' as const,
-    Icon: BugAntIcon,
-    title: 'Debug Mode',
-    description: 'Toggle node tree id reveal',
-  },
 ] as const;
 
 interface StoryKeepToolModeProps {

package/templates/src/components/edit/pane/AddPanePanel_break.tsx

@@ -327,7 +327,7 @@ const AddPaneBreakPanel = ({
               composite={true}
             >
               <div className="relative">
-                <div className="sm:text-sm relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300">
+                <div className="relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 md:text-sm">
                   <Combobox.Input
                     autoComplete="off"
                     className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
@@ -341,7 +341,7 @@ const AddPaneBreakPanel = ({
                   </Combobox.Trigger>
                 </div>
 
-                <Combobox.Content className="sm:text-sm absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none">
+                <Combobox.Content className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none md:text-sm">
                   {collection.items.length === 0 ? (
                     <div className="relative cursor-default select-none px-4 py-2 text-gray-700">
                       Nothing found.

package/templates/src/components/edit/pane/AddPanePanel_codehook.tsx

@@ -212,7 +212,7 @@ const AddPaneCodeHookPanel = ({
                   </Combobox.Trigger>
                 </div>
 
-                <Combobox.Content className="sm:text-sm absolute z-50 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">
+                <Combobox.Content className="absolute z-50 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 md:text-sm">
                   {collection.items.length === 0 ? (
                     <div className="relative cursor-default select-none px-4 py-2 text-gray-700">
                       Nothing found.