astro-tractstack 2.0.19 → 2.0.21

package/templates/src/components/compositor/preview/PaneSnapshotGenerator.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import * as htmlToImage from 'html-to-image';
-import type { BrandConfig } from '@/types/tractstack';
+import { brandConfigStore } from '@/stores/storykeep';
 
 export type SnapshotData = {
   imageData: string;
@@ -12,7 +12,6 @@ export interface PaneSnapshotGeneratorProps {
   htmlString: string;
   onComplete: (id: string, data: SnapshotData) => void;
   onError?: (id: string, error: string) => void;
-  config?: BrandConfig;
   outputWidth?: number;
 }
 
@@ -33,7 +32,6 @@ export const PaneSnapshotGenerator = ({
   htmlString,
   onComplete,
   onError,
-  config,
   outputWidth = 800,
 }: PaneSnapshotGeneratorProps) => {
   const [isGenerating, setIsGenerating] = useState(false);
@@ -80,7 +78,8 @@ export const PaneSnapshotGenerator = ({
         const customCssUrl = `${cssBasePath}/custom.css`;
         const storykeepCssUrl = `${cssBasePath}/storykeep.css`;
 
-        const brandColors = config?.BRAND_COLOURS?.split(',') || [];
+        const brandColors =
+          brandConfigStore.get()?.BRAND_COLOURS?.split(',') || [];
 
         // Get all existing CSS links from current document
         const existingCssLinks = Array.from(
@@ -100,7 +99,7 @@ export const PaneSnapshotGenerator = ({
   <link rel="stylesheet" href="${storykeepCssUrl}">
   ${existingCssLinks.map((href) => `<link rel="stylesheet" href="${href}">`).join('\n')}
   ${
-    config
+    brandColors
       ? `
   <style>
     :root {
@@ -203,7 +202,7 @@ export const PaneSnapshotGenerator = ({
     };
 
     generateSnapshot();
-  }, [id, htmlString, isGenerating, onComplete, onError, config, outputWidth]);
+  }, [id, htmlString, isGenerating, onComplete, onError, outputWidth]);
 
   // Show spinner while generating
   if (isGenerating) {

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

@@ -36,7 +36,6 @@ import StyleLiElementUpdatePanel from './panels/StyleLiElementPanel_update';
 import StyleLiElementRemovePanel from './panels/StyleLiElementPanel_remove';
 import StyleCodeHookPanel from './panels/StyleCodeHookPanel';
 import { getSettingsPanelTitle } from '@/utils/helpers';
-import type { BrandConfig } from '@/types/tractstack';
 import type {
   FlatNode,
   GridLayoutNode,
@@ -44,13 +43,11 @@ import type {
 } from '@/types/compositorTypes';
 
 interface SettingsPanelProps {
-  config: BrandConfig;
   availableCodeHooks: string[];
   onTitleChange?: (title: string) => void;
 }
 
 const PanelSwitch = ({
-  config,
   availableCodeHooks,
   onTitleChange,
 }: SettingsPanelProps) => {
@@ -101,13 +98,7 @@ const PanelSwitch = ({
   switch (signal.action) {
     case 'style-break':
       if (clickedNode && paneNode)
-        return (
-          <StyleBreakPanel
-            config={config}
-            node={clickedNode}
-            parentNode={paneNode}
-          />
-        );
+        return <StyleBreakPanel node={clickedNode} parentNode={paneNode} />;
       break;
 
     case 'style-parent':
@@ -117,7 +108,6 @@ const PanelSwitch = ({
             node={markdownNode}
             parentNode={paneNode}
             layer={signal.layer || 0}
-            config={config}
           />
         );
       else if (gridLayoutNode && paneNode)
@@ -126,7 +116,6 @@ const PanelSwitch = ({
             node={gridLayoutNode}
             parentNode={paneNode}
             layer={signal.layer || 0}
-            config={config}
           />
         );
       break;
@@ -181,7 +170,6 @@ const PanelSwitch = ({
             node={clickedNode}
             layer={signal.layer || 0}
             className={signal.className}
-            config={config}
             targetProperty={(signal as any).targetProperty}
           />
         );
@@ -215,7 +203,6 @@ const PanelSwitch = ({
           <StyleLinkUpdatePanel
             node={clickedNode}
             className={signal.className}
-            config={config}
           />
         );
       break;
@@ -232,8 +219,7 @@ const PanelSwitch = ({
       break;
 
     case 'style-link-config':
-      if (clickedNode)
-        return <StyleLinkConfigPanel node={clickedNode} config={config} />;
+      if (clickedNode) return <StyleLinkConfigPanel node={clickedNode} />;
       break;
 
     case 'style-element':
@@ -280,7 +266,6 @@ const PanelSwitch = ({
             parentNode={styleContextNode}
             className={signal.className}
             onTitleChange={onTitleChange}
-            config={config}
           />
         );
       break;
@@ -353,7 +338,6 @@ const PanelSwitch = ({
             parentNode={styleContextNode}
             className={signal.className}
             childId={signal.childId}
-            config={config}
           />
         );
       break;
@@ -429,8 +413,7 @@ const PanelSwitch = ({
     }
 
     case 'style-code-config':
-      if (clickedNode)
-        return <StyleWidgetConfigPanel node={clickedNode} config={config} />;
+      if (clickedNode) return <StyleWidgetConfigPanel node={clickedNode} />;
       break;
 
     case 'style-code-add':
@@ -453,7 +436,6 @@ const PanelSwitch = ({
             node={clickedNode}
             parentNode={styleContextNode}
             className={signal.className}
-            config={config}
           />
         );
       break;
@@ -467,7 +449,6 @@ const PanelSwitch = ({
             parentNode={styleContextNode}
             className={signal.className}
             childId={signal.childId}
-            config={config}
           />
         );
       break;
@@ -541,7 +522,6 @@ const PanelSwitch = ({
             node={clickedNode}
             parentNode={styleContextNode}
             className={signal.className}
-            config={config}
           />
         );
       break;
@@ -554,7 +534,6 @@ const PanelSwitch = ({
             parentNode={styleContextNode}
             className={signal.className}
             childId={signal.childId}
-            config={config}
           />
         );
       break;

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

@@ -66,7 +66,6 @@ const SettingsPanel = ({ config, availableCodeHooks }: SettingsPanelProps) => {
         <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}
               availableCodeHooks={availableCodeHooks}
               onTitleChange={setPanelTitle}
             />

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

@@ -52,6 +52,12 @@ const storykeepToolModes = [
     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 {
@@ -62,7 +68,6 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
   const ctx = getCtx();
   const { value: toolModeVal } = useStore(ctx.toolModeValStore);
   const $selection = useStore(selectionStore);
-  const showGuids = useStore(ctx.showGuids);
   const navRef = useRef<HTMLElement>(null);
 
   const hasTitle = useStore(ctx.hasTitle);
@@ -73,8 +78,6 @@ 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) ??
@@ -86,11 +89,6 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
     ctx.notifyNode('root');
   };
 
-  const handleDebugToggle = () => {
-    ctx.showGuids.set(!showGuids);
-    ctx.notifyNode('root');
-  };
-
   const handleStyleClick = () => {
     selectionStore.setKey('pendingAction', 'style');
   };
@@ -156,12 +154,6 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
                 )}
               </div>
             ))}
-            <div title="Toggle debug node ids" key="debug">
-              <BugAntIcon
-                className={showGuids ? classNameDebugActive : className}
-                onClick={handleDebugToggle}
-              />
-            </div>
           </div>
         )}
 

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

@@ -1,13 +1,14 @@
 import { useState } from 'react';
 import { useStore } from '@nanostores/react';
+import PlusCircleIcon from '@heroicons/react/24/outline/PlusCircleIcon';
 import { settingsPanelStore } from '@/stores/storykeep';
 import AddPaneNewPanel from './AddPanePanel_new';
 import AddPaneBreakPanel from './AddPanePanel_break';
 import AddPaneReUsePanel from './AddPanePanel_reuse';
 import AddPaneCodeHookPanel from './AddPanePanel_codehook';
+import AddPanePanel_paste from './AddPanePanel_paste';
 import { NodesContext, ROOT_NODE_NAME, getCtx } from '@/stores/nodes';
 import { PaneAddMode } from '@/types/compositorTypes';
-import type { BrandConfig } from '@/types/tractstack';
 
 interface AddPanePanelProps {
   nodeId: string;
@@ -15,7 +16,6 @@ interface AddPanePanelProps {
   ctx?: NodesContext;
   isStoryFragment?: boolean;
   isContextPane?: boolean;
-  config?: BrandConfig;
   isSandboxMode?: boolean;
 }
 
@@ -25,16 +25,14 @@ const AddPanePanel = ({
   ctx,
   isStoryFragment = false,
   isContextPane = false,
-  config,
   isSandboxMode = false,
 }: AddPanePanelProps) => {
   const [reset, setReset] = useState(false);
-  const lookup = first ? `${nodeId}-0` : nodeId;
+  const [isExpanded, setIsExpanded] = useState(false);
 
-  // Always get a valid context, either from props or the global getter
+  const lookup = first ? `${nodeId}-0` : nodeId;
   const nodesCtx = ctx || getCtx();
 
-  // Use the guaranteed context to subscribe to stores
   const activePaneMode = useStore(nodesCtx.activePaneMode);
   const hasPanes = useStore(nodesCtx.hasPanes);
   const isTemplate = useStore(nodesCtx.isTemplate);
@@ -51,14 +49,31 @@ const AddPanePanel = ({
 
   const setMode = (newMode: PaneAddMode, reset?: boolean) => {
     setReset(true);
-    nodesCtx.setPanelMode(lookup, 'add', newMode); // No longer needs optional chaining
+    nodesCtx.setPanelMode(lookup, 'add', newMode);
+    if (newMode === PaneAddMode.DEFAULT) {
+      setIsExpanded(false);
+    }
     if (reset) nodesCtx.notifyNode(ROOT_NODE_NAME);
     settingsPanelStore.set(null);
   };
 
-  // Always render a stable container div for the intersection observer
   return (
     <div className="add-pane-panel-wrapper border-mydarkgrey border-b-2 border-t-2 border-dotted">
+      {isExpanded && (
+        <div className="border-mylightgrey border-t border-dotted">
+          <div className="group flex w-full flex-wrap items-center gap-2 px-1.5 pb-0.5 pt-1.5">
+            <button
+              onClick={() => {
+                setMode(PaneAddMode.DEFAULT);
+                setIsExpanded(false);
+              }}
+              className="rounded-md bg-gray-200 px-2 py-1 text-sm font-bold text-gray-800"
+            >
+              &lt; Cancel
+            </button>
+          </div>
+        </div>
+      )}
       {mode === PaneAddMode.NEW || (!hasPanes && first && !reset) ? (
         <AddPaneNewPanel
           nodeId={nodeId}
@@ -67,7 +82,6 @@ const AddPanePanel = ({
           ctx={nodesCtx}
           isStoryFragment={isStoryFragment}
           isContextPane={isContextPane}
-          config={config!}
           isSandboxMode={isSandboxMode}
         />
       ) : mode === PaneAddMode.BREAK && !isContextPane ? (
@@ -79,30 +93,31 @@ const AddPanePanel = ({
           isStoryFragment={isStoryFragment}
         />
       ) : mode === PaneAddMode.REUSE && !isContextPane ? (
-        <AddPaneReUsePanel
+        <AddPaneReUsePanel nodeId={nodeId} first={first} setMode={setMode} />
+      ) : mode === PaneAddMode.CODEHOOK ? (
+        <AddPaneCodeHookPanel
           nodeId={nodeId}
           first={first}
           setMode={setMode}
-          //ctx={nodesCtx}
+          isStoryFragment={isStoryFragment}
+          isContextPane={isContextPane}
         />
-      ) : mode === PaneAddMode.CODEHOOK ? (
-        <AddPaneCodeHookPanel
+      ) : mode === PaneAddMode.PASTE ? (
+        <AddPanePanel_paste
           nodeId={nodeId}
           first={first}
           setMode={setMode}
+          ctx={nodesCtx}
           isStoryFragment={isStoryFragment}
           isContextPane={isContextPane}
         />
-      ) : (
+      ) : isExpanded ? (
         <div className="border-mylightgrey border-t border-dotted">
-          <div className="group flex w-full gap-1 px-1.5 pb-0.5 pt-1.5">
-            <div className="rounded-md bg-gray-200 px-2 py-1 text-sm text-gray-800">
-              Insert Pane Here
-            </div>
-            <div className={`flex gap-1 transition-opacity`}>
+          <div className="group flex w-full flex-wrap items-center gap-2 px-1.5 pb-0.5 pt-1.5">
+            <div className={`flex flex-wrap gap-1 transition-opacity`}>
               <button
                 onClick={() => setMode(PaneAddMode.NEW)}
-                className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white focus:bg-cyan-700 focus:text-white"
+                className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white"
               >
                 + Design New
               </button>
@@ -110,16 +125,16 @@ const AddPanePanel = ({
                 <>
                   <button
                     onClick={() => setMode(PaneAddMode.BREAK)}
-                    className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white focus:bg-cyan-700 focus:text-white"
+                    className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white"
                   >
                     + Visual Break
                   </button>
                   {!isTemplate && (
                     <button
                       onClick={() => setMode(PaneAddMode.REUSE)}
-                      className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white focus:bg-cyan-700 focus:text-white"
+                      className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white"
                     >
-                      + Re-use existing pane
+                      + Re-use Pane
                     </button>
                   )}
                 </>
@@ -127,14 +142,32 @@ const AddPanePanel = ({
               {!isTemplate && (
                 <button
                   onClick={() => setMode(PaneAddMode.CODEHOOK)}
-                  className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white focus:bg-cyan-700 focus:text-white"
+                  className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white"
                 >
-                  + Custom Code Hook
+                  + Code Hook
                 </button>
               )}
+              <button
+                onClick={() => setMode(PaneAddMode.PASTE)}
+                className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white"
+              >
+                + Paste Pane
+              </button>
             </div>
           </div>
         </div>
+      ) : (
+        <div className="border-mylightgrey flex border-t border-dotted p-0.5">
+          <button
+            onClick={() => setIsExpanded(true)}
+            title="Insert Pane here"
+            className="group w-full text-gray-500"
+          >
+            <div className="text-mydarkgrey hover:bg-myoffwhite rounded-md transition-colors duration-150 ease-in-out hover:bg-opacity-50 hover:mix-blend-difference">
+              <PlusCircleIcon className="mx-auto h-8 w-8" />
+            </div>
+          </button>
+        </div>
       )}
     </div>
   );