astro-tractstack 2.0.29 → 2.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.29",
+  "version": "2.0.31",
   "description": "Astro integration for TractStack - redeeming the web from boring experiences",
   "type": "module",
   "main": "dist/index.js",

package/templates/src/components/compositor/Compositor.tsx

@@ -16,6 +16,8 @@ import {
   hasArtpacksStore,
   settingsPanelStore,
   brandConfigStore,
+  viewportModeStore,
+  setViewportMode,
 } from '@/stores/storykeep';
 import { getCtx, ROOT_NODE_NAME, type NodesContext } from '@/stores/nodes';
 import { stopLoadingAnimation } from '@/utils/helpers';
@@ -284,6 +286,12 @@ export const Compositor = (props: CompositorProps) => {
     selectionOrigin.current = null;
   };
 
+  useEffect(() => {
+    if (viewportModeStore.get() === 'auto') {
+      setViewportMode('auto');
+    }
+  }, []);
+
   useEffect(() => {
     fullContentMapStore.set(props.fullContentMap);
     hasAssemblyAIStore.set(props.config?.HAS_AAI || false);

package/templates/src/components/compositor/nodes/Pane_DesignLibrary.tsx

@@ -9,26 +9,53 @@ import { getCtx } from '@/stores/nodes';
 import { RenderChildren } from './RenderChildren';
 import { CodeHookContainer } from './Pane';
 import type { NodeProps } from '@/types/nodeProps';
+import type { BgImageNode, ArtpackImageNode } from '@/types/compositorTypes';
 import { SaveToLibraryModal } from '@/components/edit/state/SaveToLibraryModal';
 import { RestylePaneModal } from '@/components/edit/pane/RestylePaneModal';
 import { selectionStore } from '@/stores/selection';
 import { copyPaneToClipboard } from '@/utils/compositor/designLibraryHelper';
 
+function getSizeClasses(
+  size: string,
+  side: 'image' | 'content',
+  viewport: string
+): string {
+  if (viewport === 'mobile') {
+    return 'w-full';
+  }
+  switch (size) {
+    case 'narrow':
+      return side === 'image' ? 'w-1/3' : 'w-2/3';
+    case 'wide':
+      return side === 'image' ? 'w-2/3' : 'w-1/3';
+    default:
+      return 'w-1/2';
+  }
+}
+
 export const Pane_DesignLibrary = (props: NodeProps) => {
   const ctx = getCtx(props);
-
   const { isRestyleModalOpen } = useStore(selectionStore, {
     keys: ['isRestyleModalOpen'],
   });
-
-  const wrapperClasses = `grid ${ctx.getNodeClasses(
-    props.nodeId,
+  const [currentViewport, setCurrentViewport] = useState(
     viewportKeyStore.get().value
-  )}`;
+  );
+
+  useEffect(() => {
+    const unsubscribeViewport = viewportKeyStore.subscribe((newViewport) => {
+      setCurrentViewport(newViewport.value);
+    });
+    return () => unsubscribeViewport();
+  }, []);
+
+  const wrapperClasses = `grid ${ctx.getNodeClasses(props.nodeId, currentViewport)}`;
   const contentClasses = 'relative w-full h-auto justify-self-start';
   const contentStyles: CSSProperties = {
     ...ctx.getNodeCSSPropertiesStyles(props.nodeId),
     gridArea: '1/1/1/1',
+    position: 'relative',
+    zIndex: 1,
   };
   const codeHookPayload = ctx.getNodeCodeHookPayload(props.nodeId);
   const [children, setChildren] = useState<string[]>([
@@ -36,11 +63,14 @@ export const Pane_DesignLibrary = (props: NodeProps) => {
   ]);
   const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
   const [wasCopied, setWasCopied] = useState(false);
+  const [renderCount, setRenderCount] = useState(0);
+
   const getPaneId = (): string => `pane-${props.nodeId}`;
 
   useEffect(() => {
     const unsubscribe = ctx.notifications.subscribe(props.nodeId, () => {
       setChildren([...ctx.getChildNodeIDs(props.nodeId)]);
+      setRenderCount((prev) => prev + 1);
     });
     return unsubscribe;
   }, [props.nodeId, ctx.notifications]);
@@ -65,54 +95,145 @@ export const Pane_DesignLibrary = (props: NodeProps) => {
     }
   };
 
+  const Buttons = () => (
+    <div className="absolute left-2 top-2 z-10 flex flex-row gap-x-2">
+      {!props.isSandboxMode && (
+        <button
+          title="Save Pane to Design Library"
+          onClick={handleSaveClick}
+          className="flex h-10 w-10 items-center justify-center rounded-full bg-cyan-600 p-1.5 shadow-lg hover:bg-cyan-700"
+        >
+          <ArchiveBoxArrowDownIcon className="h-7 w-7 text-white" />
+        </button>
+      )}
+      <button
+        title="Restyle Pane from Design Library"
+        onClick={handleRestyleClick}
+        className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-600 p-1.5 shadow-lg hover:bg-blue-700"
+      >
+        <ArrowPathRoundedSquareIcon className="h-7 w-7 text-white" />
+      </button>
+      <button
+        title="Copy Pane Design to Clipboard"
+        onClick={handleCopyToClipboard}
+        className={`flex h-10 w-10 items-center justify-center rounded-full p-1.5 shadow-lg transition-colors ${
+          wasCopied ? 'bg-green-500' : 'bg-gray-600 hover:bg-gray-700'
+        }`}
+      >
+        {wasCopied ? (
+          <CheckIcon className="h-7 w-7 text-white" />
+        ) : (
+          <ArrowDownTrayIcon className="h-7 w-7 text-white" />
+        )}
+      </button>
+    </div>
+  );
+
+  const allNodes = ctx.allNodes.get();
+  const bgNode = children
+    .map((id) => allNodes.get(id))
+    .find(
+      (node) =>
+        node?.nodeType === 'BgPane' &&
+        'type' in node &&
+        (node.type === 'background-image' || node.type === 'artpack-image')
+    ) as (BgImageNode | ArtpackImageNode) | undefined;
+
+  const useFlexLayout =
+    bgNode &&
+    (bgNode.position === 'leftBleed' || bgNode.position === 'rightBleed');
+  const deferFlexLayout =
+    bgNode && (bgNode.position === 'left' || bgNode.position === 'right');
+
+  const flexDirection =
+    currentViewport === 'mobile'
+      ? 'flex-col'
+      : bgNode?.position === 'rightBleed'
+        ? 'flex-row-reverse'
+        : 'flex-row';
+
   return (
     <div id={getPaneId()} className="pane min-h-16">
-      <div id={ctx.getNodeSlug(props.nodeId)} className={wrapperClasses}>
-        <div
-          className={contentClasses}
-          style={contentStyles}
-          onClick={(e) => {
-            ctx.setClickedNodeId(props.nodeId);
-            e.stopPropagation();
-          }}
-        >
-          <div className="absolute left-2 top-2 z-10 flex flex-row gap-x-2">
-            {!props.isSandboxMode && (
-              <button
-                title="Save Pane to Design Library"
-                onClick={handleSaveClick}
-                className="flex h-10 w-10 items-center justify-center rounded-full bg-cyan-600 p-1.5 shadow-lg hover:bg-cyan-700"
-              >
-                <ArchiveBoxArrowDownIcon className="h-7 w-7 text-white" />
-              </button>
-            )}
-            <button
-              title="Restyle Pane from Design Library"
-              onClick={handleRestyleClick}
-              className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-600 p-1.5 shadow-lg hover:bg-blue-700"
+      <div
+        id={ctx.getNodeSlug(props.nodeId)}
+        className={useFlexLayout ? '' : wrapperClasses}
+      >
+        {codeHookPayload ? (
+          <div className={contentClasses} style={contentStyles}>
+            <Buttons />
+            <CodeHookContainer payload={codeHookPayload} />
+          </div>
+        ) : useFlexLayout ? (
+          <div
+            className={`flex flex-nowrap ${flexDirection} ${ctx.getNodeClasses(props.nodeId, currentViewport)}`}
+          >
+            <div
+              className={`relative overflow-hidden ${getSizeClasses(bgNode.size || 'equal', 'image', currentViewport)}`}
             >
-              <ArrowPathRoundedSquareIcon className="h-7 w-7 text-white" />
-            </button>
-            <button
-              title="Copy Pane Design to Clipboard"
-              onClick={handleCopyToClipboard}
-              className={`flex h-10 w-10 items-center justify-center rounded-full p-1.5 shadow-lg transition-colors ${
-                wasCopied ? 'bg-green-500' : 'bg-gray-600 hover:bg-gray-700'
-              }`}
+              <RenderChildren
+                children={children.filter((id) => {
+                  const node = allNodes.get(id);
+                  return node?.nodeType === 'BgPane';
+                })}
+                nodeProps={props}
+                key={`bg-children-${props.nodeId}-${renderCount}`}
+              />
+            </div>
+            <div
+              className={`${contentClasses} ${getSizeClasses(bgNode.size || 'equal', 'content', currentViewport)}`}
+              style={ctx.getNodeCSSPropertiesStyles(props.nodeId)}
+              onClick={(e) => {
+                ctx.setClickedNodeId(props.nodeId);
+                e.stopPropagation();
+              }}
             >
-              {wasCopied ? (
-                <CheckIcon className="h-7 w-7 text-white" />
-              ) : (
-                <ArrowDownTrayIcon className="h-7 w-7 text-white" />
-              )}
-            </button>
+              <Buttons />
+              <RenderChildren
+                children={children.filter((id) => {
+                  const node = allNodes.get(id);
+                  return node?.nodeType !== 'BgPane';
+                })}
+                nodeProps={props}
+                key={`content-children-${props.nodeId}-${renderCount}`}
+              />
+            </div>
           </div>
-          {codeHookPayload ? (
-            <CodeHookContainer payload={codeHookPayload} />
-          ) : (
-            <RenderChildren children={children} nodeProps={props} />
-          )}
-        </div>
+        ) : deferFlexLayout ? (
+          <div
+            className={contentClasses}
+            style={contentStyles}
+            onClick={(e) => {
+              ctx.setClickedNodeId(props.nodeId);
+              e.stopPropagation();
+            }}
+          >
+            <Buttons />
+            <RenderChildren
+              children={children.filter((id) => {
+                const node = allNodes.get(id);
+                return node?.nodeType !== 'BgPane';
+              })}
+              nodeProps={props}
+              key={`content-children-${props.nodeId}-${renderCount}`}
+            />
+          </div>
+        ) : (
+          <div
+            className={contentClasses}
+            style={contentStyles}
+            onClick={(e) => {
+              ctx.setClickedNodeId(props.nodeId);
+              e.stopPropagation();
+            }}
+          >
+            <Buttons />
+            <RenderChildren
+              children={children}
+              nodeProps={props}
+              key={`render-children-${props.nodeId}-${renderCount}`}
+            />
+          </div>
+        )}
       </div>
       {isSaveModalOpen && (
         <SaveToLibraryModal

package/templates/src/components/compositor/nodes/Pane_eraser.tsx

@@ -5,64 +5,181 @@ import { getCtx } from '@/stores/nodes';
 import { RenderChildren } from './RenderChildren';
 import { CodeHookContainer } from './Pane';
 import type { NodeProps } from '@/types/nodeProps';
+import type { BgImageNode, ArtpackImageNode } from '@/types/compositorTypes';
+
+function getSizeClasses(
+  size: string,
+  side: 'image' | 'content',
+  viewport: string
+): string {
+  if (viewport === 'mobile') {
+    return 'w-full';
+  }
+  switch (size) {
+    case 'narrow':
+      return side === 'image' ? 'w-1/3' : 'w-2/3';
+    case 'wide':
+      return side === 'image' ? 'w-2/3' : 'w-1/3';
+    default:
+      return 'w-1/2';
+  }
+}
 
 export const PaneEraser = (props: NodeProps) => {
-  const wrapperClasses = `grid ${getCtx(props).getNodeClasses(props.nodeId, viewportKeyStore.get().value)}`;
+  const ctx = getCtx(props);
+  const [currentViewport, setCurrentViewport] = useState(
+    viewportKeyStore.get().value
+  );
+
+  useEffect(() => {
+    const unsubscribeViewport = viewportKeyStore.subscribe((newViewport) => {
+      setCurrentViewport(newViewport.value);
+    });
+    return () => unsubscribeViewport();
+  }, []);
+
+  const wrapperClasses = `grid ${ctx.getNodeClasses(props.nodeId, currentViewport)}`;
   const contentClasses = 'relative w-full h-auto justify-self-start';
   const contentStyles: CSSProperties = {
-    ...getCtx(props).getNodeCSSPropertiesStyles(props.nodeId),
+    ...ctx.getNodeCSSPropertiesStyles(props.nodeId),
     gridArea: '1/1/1/1',
+    position: 'relative',
+    zIndex: 1,
   };
-  const codeHookPayload = getCtx(props).getNodeCodeHookPayload(props.nodeId);
+  const codeHookPayload = ctx.getNodeCodeHookPayload(props.nodeId);
   const [children, setChildren] = useState<string[]>([
-    ...getCtx(props).getChildNodeIDs(props.nodeId),
+    ...ctx.getChildNodeIDs(props.nodeId),
   ]);
+  const [renderCount, setRenderCount] = useState(0);
 
   const getPaneId = (): string => `pane-${props.nodeId}`;
 
   useEffect(() => {
-    const unsubscribe = getCtx(props).notifications.subscribe(
-      props.nodeId,
-      () => {
-        console.log(
-          'notification received data update for pane node: ' + props.nodeId
-        );
-        setChildren([...getCtx(props).getChildNodeIDs(props.nodeId)]);
-      }
-    );
+    const unsubscribe = ctx.notifications.subscribe(props.nodeId, () => {
+      setChildren([...ctx.getChildNodeIDs(props.nodeId)]);
+      setRenderCount((prev) => prev + 1);
+    });
     return unsubscribe;
-  }, []);
+  }, [props.nodeId, ctx.notifications]);
+
+  const DeleteButton = () => (
+    <button
+      title="Delete Pane"
+      onClick={(e) => {
+        ctx.setClickedNodeId(props.nodeId);
+        e.stopPropagation();
+      }}
+      className="absolute right-2 top-2 z-10 rounded-full bg-red-700 p-1.5 hover:bg-black"
+    >
+      <TrashIcon className="h-10 w-10 text-white" />
+    </button>
+  );
+
+  const allNodes = ctx.allNodes.get();
+  const bgNode = children
+    .map((id) => allNodes.get(id))
+    .find(
+      (node) =>
+        node?.nodeType === 'BgPane' &&
+        'type' in node &&
+        (node.type === 'background-image' || node.type === 'artpack-image')
+    ) as (BgImageNode | ArtpackImageNode) | undefined;
+
+  const useFlexLayout =
+    bgNode &&
+    (bgNode.position === 'leftBleed' || bgNode.position === 'rightBleed');
+  const deferFlexLayout =
+    bgNode && (bgNode.position === 'left' || bgNode.position === 'right');
+
+  const flexDirection =
+    currentViewport === 'mobile'
+      ? 'flex-col'
+      : bgNode?.position === 'rightBleed'
+        ? 'flex-row-reverse'
+        : 'flex-row';
 
   return (
     <div id={getPaneId()} className="pane min-h-16">
       <div
-        id={getCtx(props).getNodeSlug(props.nodeId)}
-        className={wrapperClasses}
+        id={ctx.getNodeSlug(props.nodeId)}
+        className={useFlexLayout ? '' : wrapperClasses}
       >
-        <div
-          className={contentClasses}
-          style={contentStyles}
-          onClick={(e) => {
-            getCtx(props).setClickedNodeId(props.nodeId);
-            e.stopPropagation();
-          }}
-        >
-          <button
-            title="Delete Pane"
+        {codeHookPayload ? (
+          <div className={contentClasses} style={contentStyles}>
+            <DeleteButton />
+            <CodeHookContainer payload={codeHookPayload} />
+          </div>
+        ) : useFlexLayout ? (
+          <div
+            className={`flex flex-nowrap ${flexDirection} ${ctx.getNodeClasses(props.nodeId, currentViewport)}`}
+          >
+            <div
+              className={`relative overflow-hidden ${getSizeClasses(bgNode.size || 'equal', 'image', currentViewport)}`}
+            >
+              <RenderChildren
+                children={children.filter((id) => {
+                  const node = allNodes.get(id);
+                  return node?.nodeType === 'BgPane';
+                })}
+                nodeProps={props}
+                key={`bg-children-${props.nodeId}-${renderCount}`}
+              />
+            </div>
+            <div
+              className={`${contentClasses} ${getSizeClasses(bgNode.size || 'equal', 'content', currentViewport)}`}
+              style={ctx.getNodeCSSPropertiesStyles(props.nodeId)}
+              onClick={(e) => {
+                ctx.setClickedNodeId(props.nodeId);
+                e.stopPropagation();
+              }}
+            >
+              <DeleteButton />
+              <RenderChildren
+                children={children.filter((id) => {
+                  const node = allNodes.get(id);
+                  return node?.nodeType !== 'BgPane';
+                })}
+                nodeProps={props}
+                key={`content-children-${props.nodeId}-${renderCount}`}
+              />
+            </div>
+          </div>
+        ) : deferFlexLayout ? (
+          <div
+            className={contentClasses}
+            style={contentStyles}
             onClick={(e) => {
-              getCtx(props).setClickedNodeId(props.nodeId);
+              ctx.setClickedNodeId(props.nodeId);
               e.stopPropagation();
             }}
-            className="absolute right-2 top-2 z-10 rounded-full bg-red-700 p-1.5 hover:bg-black"
           >
-            <TrashIcon className="h-10 w-10 text-white" />
-          </button>
-          {codeHookPayload ? (
-            <CodeHookContainer payload={codeHookPayload} />
-          ) : (
-            <RenderChildren children={children} nodeProps={props} />
-          )}
-        </div>
+            <DeleteButton />
+            <RenderChildren
+              children={children.filter((id) => {
+                const node = allNodes.get(id);
+                return node?.nodeType !== 'BgPane';
+              })}
+              nodeProps={props}
+              key={`content-children-${props.nodeId}-${renderCount}`}
+            />
+          </div>
+        ) : (
+          <div
+            className={contentClasses}
+            style={contentStyles}
+            onClick={(e) => {
+              ctx.setClickedNodeId(props.nodeId);
+              e.stopPropagation();
+            }}
+          >
+            <DeleteButton />
+            <RenderChildren
+              children={children}
+              nodeProps={props}
+              key={`render-children-${props.nodeId}-${renderCount}`}
+            />
+          </div>
+        )}
       </div>
     </div>
   );