astro-tractstack 2.0.0-rc.0

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

@@ -0,0 +1,189 @@
+import { memo, useMemo, useState } from 'react';
+import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
+import {
+  isTemplateToolAddModes,
+  toolAddModes,
+  toolAddModesIcons,
+  toolAddModeTitles,
+} from '@/constants';
+import { settingsPanelStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import { getTemplateNode } from '@/utils/compositor/nodesHelper';
+import allowInsert from '@/utils/compositor/allowInsert';
+import type { ToolAddMode, FlatNode, Tag } from '@/types/compositorTypes';
+import type { NodeProps } from '@/types/nodeProps';
+
+type GhostInsertBlockProps = NodeProps & {
+  isEmpty: boolean;
+  lastChildId: string | null;
+};
+
+export const GhostInsertBlock = memo((props: GhostInsertBlockProps) => {
+  const { isEmpty, lastChildId } = props;
+  const [showInsertOptions, setShowInsertOptions] = useState(false);
+
+  const isTemplate = getCtx(props).isTemplate.get();
+  const $toolAddModes = isTemplate ? isTemplateToolAddModes : toolAddModes;
+  const parentNode = getCtx(props).allNodes.get().get(props.nodeId) as FlatNode;
+  const lastChildNode = lastChildId
+    ? (getCtx(props).allNodes.get().get(lastChildId) as FlatNode)
+    : null;
+
+  const allowedModes = useMemo(() => {
+    if (isEmpty) {
+      return $toolAddModes.filter((mode): mode is ToolAddMode =>
+        toolAddModeTitles.hasOwnProperty(mode)
+      );
+    }
+    const contextNode = lastChildNode;
+    if (!contextNode) return [];
+    return $toolAddModes.filter((mode) =>
+      typeof contextNode.tagName === `string`
+        ? allowInsert(
+            contextNode,
+            contextNode.tagName as Tag,
+            mode as Tag,
+            undefined
+          )
+        : false
+    ) as ToolAddMode[];
+  }, [isEmpty, lastChildId, parentNode, lastChildNode, $toolAddModes]);
+
+  const handleInsert = (mode: ToolAddMode, e: React.MouseEvent) => {
+    e.stopPropagation();
+    const templateNode = getTemplateNode(mode);
+    let newNodeId: string | null = null;
+    try {
+      if (isEmpty) {
+        if (!allowedModes.includes(mode)) {
+          console.warn(`Insertion of ${mode} not allowed in empty container`);
+          return;
+        }
+        newNodeId = getCtx(props).addTemplateNode(props.nodeId, templateNode);
+      } else if (lastChildId && lastChildNode) {
+        if (!allowedModes.includes(mode)) {
+          console.warn(
+            `Insertion of ${mode} after ${lastChildNode.tagName} not allowed`
+          );
+          return;
+        }
+        newNodeId = getCtx(props).addTemplateNode(
+          lastChildId,
+          templateNode,
+          lastChildId,
+          'after'
+        );
+      }
+      if (newNodeId && templateNode.tagName) {
+        getCtx(props).handleInsertSignal(templateNode.tagName, newNodeId);
+      }
+    } catch (error) {
+      console.error('Insertion failed:', error);
+    }
+    setShowInsertOptions(false);
+  };
+
+  const handleClose = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    getCtx(props).setPanelMode('', '', '');
+    setShowInsertOptions(false);
+  };
+
+  const TextElementButtons = () => (
+    <div className="flex flex-wrap gap-2 p-2">
+      {['p', 'h2', 'h3', 'h4']
+        .filter((mode) => allowedModes.includes(mode as ToolAddMode))
+        .map((mode) => (
+          <button
+            key={mode}
+            onClick={(e) => handleInsert(mode as ToolAddMode, e)}
+            className="rounded border border-gray-300 bg-white px-3 py-2 text-gray-800 shadow-sm transition-colors hover:border-cyan-700 hover:bg-cyan-600 hover:text-white"
+          >
+            {toolAddModeTitles[mode as ToolAddMode]}
+          </button>
+        ))}
+    </div>
+  );
+
+  const ElementButtons = () => (
+    <div className="grid grid-cols-2 gap-2 p-2 sm:grid-cols-3">
+      {$toolAddModes
+        .filter((mode) => !['p', 'h2', 'h3', 'h4'].includes(mode))
+        .filter((mode) => allowedModes.includes(mode as ToolAddMode))
+        .map((mode) => (
+          <button
+            key={mode}
+            onClick={(e) => handleInsert(mode as ToolAddMode, e)}
+            className="flex flex-col items-center rounded border border-gray-300 bg-white p-2 text-gray-800 shadow-sm transition-colors hover:border-cyan-700 hover:bg-cyan-600 hover:text-white"
+          >
+            {toolAddModesIcons[mode] ? (
+              <img
+                src={`/icons/${toolAddModesIcons[mode]}`}
+                alt={toolAddModeTitles[mode as ToolAddMode]}
+                className="mb-1 h-8 w-8"
+              />
+            ) : (
+              <span className="mb-1 text-3xl">+</span>
+            )}
+            <span className="text-xs font-bold">
+              {toolAddModeTitles[mode as ToolAddMode]}
+            </span>
+          </button>
+        ))}
+    </div>
+  );
+
+  // Check if there are any allowed non-text elements
+  const hasAllowedElements = $toolAddModes
+    .filter((mode) => !['p', 'h2', 'h3', 'h4'].includes(mode))
+    .some((mode) => allowedModes.includes(mode as ToolAddMode));
+
+  if (!isEmpty) {
+    return null;
+  }
+
+  return (
+    <div className="my-4">
+      {showInsertOptions ? (
+        <div className="rounded-lg border-2 border-cyan-600 bg-white p-3 text-gray-800 shadow-lg">
+          <div className="mb-3 flex items-center justify-between border-b pb-2">
+            <h3 className="text-lg font-bold">Add content</h3>
+            <button
+              onClick={handleClose}
+              className="rounded-full bg-gray-200 p-1 hover:bg-gray-300"
+              title="Close"
+            >
+              <XMarkIcon className="h-5 w-5 text-gray-700" />
+            </button>
+          </div>
+          <TextElementButtons />
+          {hasAllowedElements && (
+            <>
+              <div className="my-2 text-center text-sm text-gray-500">or</div>
+              <ElementButtons />
+            </>
+          )}
+        </div>
+      ) : (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            settingsPanelStore.set(null);
+            setShowInsertOptions(true);
+          }}
+          className="group w-full rounded-lg border-2 border-dashed border-cyan-500 bg-cyan-50 p-6 transition-colors hover:bg-cyan-100 dark:border-cyan-600 dark:bg-cyan-900 dark:hover:bg-cyan-800"
+        >
+          <div className="flex flex-col items-center justify-center space-y-2">
+            <div className="rounded-full bg-cyan-100 p-2 group-hover:bg-cyan-200 dark:bg-cyan-800 dark:group-hover:bg-cyan-700">
+              <PlusIcon className="h-6 w-6 text-cyan-700 dark:text-cyan-300" />
+            </div>
+            <div className="font-bold text-cyan-800 dark:text-cyan-300">
+              Add content
+            </div>
+          </div>
+        </button>
+      )}
+    </div>
+  );
+});

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

@@ -0,0 +1,179 @@
+import { useState, useEffect } from 'react';
+import { getCtx } from '@/stores/nodes';
+import { viewportKeyStore } from '@/stores/storykeep';
+import { RenderChildren } from './RenderChildren';
+import { GhostInsertBlock } from './GhostInsertBlock';
+import type { NodeProps } from '@/types/nodeProps';
+import type {
+  MarkdownPaneFragmentNode,
+  ParentClassesPayload,
+  BgImageNode,
+  ArtpackImageNode,
+} from '@/types/compositorTypes';
+
+export const Markdown = (props: NodeProps) => {
+  const id = props.nodeId;
+  const toolModeVal = getCtx(props).toolModeValStore.get().value;
+  const node = getCtx(props)
+    .allNodes.get()
+    .get(props.nodeId) as MarkdownPaneFragmentNode;
+  const isPreview = getCtx(props).rootNodeId.get() === `tmp`;
+  const children = getCtx(props).getChildNodeIDs(props.nodeId);
+  const isEmpty = children.length === 0;
+  const lastChildId =
+    children.length > 0 ? children[children.length - 1] : null;
+
+  // Track the viewport value in state so we can react to changes
+  const [currentViewport, setCurrentViewport] = useState(
+    viewportKeyStore.get().value
+  );
+
+  // Subscribe to viewportKeyStore changes
+  useEffect(() => {
+    const unsubscribeViewport = viewportKeyStore.subscribe((newViewport) => {
+      setCurrentViewport(newViewport.value);
+    });
+
+    return () => {
+      unsubscribeViewport();
+    };
+  }, []);
+
+  // Check for positioned background image
+  const allNodes = getCtx(props).allNodes.get();
+  const parentPaneId = node.parentId;
+  const bgNode = parentPaneId
+    ? (() => {
+        const childNodeIds = getCtx(props).getChildNodeIDs(parentPaneId);
+        return childNodeIds
+          .map((id) => allNodes.get(id))
+          .find(
+            (n) =>
+              n?.nodeType === 'BgPane' &&
+              'type' in n &&
+              (n.type === 'background-image' || n.type === 'artpack-image') &&
+              'position' in n &&
+              (n.position === 'left' || n.position === 'right')
+          ) as (BgImageNode | ArtpackImageNode) | undefined;
+      })()
+    : undefined;
+
+  // Helper function for size styles - NO MODIFIERS needed since React rerenders on viewport change
+  function getSizeClasses(
+    size: string,
+    side: 'image' | 'content',
+    viewport: string
+  ): string {
+    // Mobile always gets full width (stacked layout)
+    if (viewport === 'mobile') {
+      return 'w-full';
+    }
+
+    // Desktop/tablet get fractional widths
+    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: // "equal"
+        return 'w-1/2';
+    }
+  }
+
+  const useFlexLayout =
+    bgNode && (bgNode.position === 'left' || bgNode.position === 'right');
+
+  // Set flex direction based on currentViewport
+  const flexDirection =
+    currentViewport === 'mobile'
+      ? 'flex-col'
+      : bgNode?.position === 'right'
+        ? 'flex-row-reverse'
+        : 'flex-row';
+
+  let nodesToRender = (
+    <>
+      {useFlexLayout ? (
+        <div
+          className={`flex flex-nowrap items-center justify-center gap-6 md:gap-10 xl:gap-12 ${flexDirection}`}
+        >
+          {/* Image Side - NO MODIFIERS because React rerenders on viewport change */}
+          <div
+            className={`relative overflow-hidden ${getSizeClasses(bgNode.size || 'equal', 'image', currentViewport)}`}
+          >
+            <RenderChildren children={[bgNode.id]} nodeProps={props} />
+          </div>
+
+          {/* Content Side - NO MODIFIERS because React rerenders on viewport change */}
+          <div
+            className={getSizeClasses(
+              bgNode.size || 'equal',
+              'content',
+              currentViewport
+            )}
+          >
+            <RenderChildren children={children} nodeProps={props} />
+            {!isPreview && [`text`, `insert`].includes(toolModeVal) && (
+              <GhostInsertBlock
+                nodeId={props.nodeId}
+                ctx={props.ctx}
+                isEmpty={isEmpty}
+                lastChildId={lastChildId}
+              />
+            )}
+          </div>
+        </div>
+      ) : (
+        <>
+          <RenderChildren children={children} nodeProps={props} />
+          {!isPreview && [`text`, `insert`].includes(toolModeVal) && (
+            <GhostInsertBlock
+              nodeId={props.nodeId}
+              ctx={props.ctx}
+              isEmpty={isEmpty}
+              lastChildId={lastChildId}
+            />
+          )}
+        </>
+      )}
+    </>
+  );
+
+  if (
+    'parentClasses' in node &&
+    (node.parentClasses as ParentClassesPayload)?.length > 0
+  ) {
+    const parentClassesLength = (node.parentClasses as ParentClassesPayload)
+      .length;
+    for (let i = parentClassesLength; i > 0; --i) {
+      nodesToRender = (
+        <div
+          onClick={(e) => {
+            getCtx(props).setClickedParentLayer(i);
+            getCtx(props).setClickedNodeId(props.nodeId);
+            e.stopPropagation();
+          }}
+          onDoubleClick={(e) => {
+            getCtx(props).setClickedParentLayer(i);
+            getCtx(props).setClickedNodeId(props.nodeId, true);
+            e.stopPropagation();
+          }}
+          className={getCtx(props).getNodeClasses(id, currentViewport, i - 1)}
+          style={
+            i === parentClassesLength
+              ? { position: 'relative', zIndex: 10 }
+              : undefined
+          }
+        >
+          {nodesToRender}
+        </div>
+      );
+    }
+  } else {
+    nodesToRender = (
+      <div style={{ position: 'relative', zIndex: 10 }}>{nodesToRender}</div>
+    );
+  }
+
+  return <>{nodesToRender}</>;
+};

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

@@ -0,0 +1,277 @@
+import { useEffect, useState, memo, type CSSProperties } from 'react';
+import { getCtx } from '@/stores/nodes';
+import { viewportKeyStore } from '@/stores/storykeep';
+import { RenderChildren } from './RenderChildren';
+import FeaturedContentSetup from '@/components/codehooks/FeaturedContentSetup';
+import ListContentSetup from '@/components/codehooks/ListContentSetup';
+import BunnyVideoSetup from '@/components/codehooks/BunnyVideoSetup';
+import type { BgImageNode, ArtpackImageNode } from '@/types/compositorTypes';
+import type { NodeProps } from '@/types/nodeProps';
+
+const CodeHookContainer = ({
+  payload,
+}: {
+  payload: { target: string; params?: Record<string, string> };
+}) => (
+  <div className="my-4 w-full bg-gray-50 p-6">
+    <div className="mb-4 rounded-lg border-2 border-dashed border-gray-300 bg-slate-50 p-6">
+      <h3 className="text-lg text-gray-700">
+        Code Hook:{' '}
+        <span className="font-action font-bold">
+          {payload.target || 'CodeHook not found!'}
+        </span>
+      </h3>
+    </div>
+    {payload.params && (
+      <div className="space-y-2">
+        {Object.entries(payload.params).map(
+          ([key, value]) =>
+            value && (
+              <div key={key} className="flex items-start">
+                <span className="min-w-24 font-bold text-gray-600">{key}:</span>
+                <span className="ml-2 text-gray-800">
+                  {JSON.stringify(value)}
+                </span>
+              </div>
+            )
+        )}
+      </div>
+    )}
+  </div>
+);
+
+// Helper function for size classes - NO MODIFIERS needed since React rerenders on viewport change
+function getSizeClasses(
+  size: string,
+  side: 'image' | 'content',
+  viewport: string
+): string {
+  // Mobile always gets full width (stacked layout)
+  if (viewport === 'mobile') {
+    return 'w-full';
+  }
+
+  // Desktop/tablet get fractional widths
+  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: // "equal"
+      return 'w-1/2';
+  }
+}
+
+const Pane = memo(
+  (props: NodeProps) => {
+    // Track the viewport value in state so we can react to changes
+    const [currentViewport, setCurrentViewport] = useState(
+      viewportKeyStore.get().value
+    );
+
+    // Update component state when viewport changes
+    useEffect(() => {
+      const unsubscribeViewport = viewportKeyStore.subscribe((newViewport) => {
+        setCurrentViewport(newViewport.value);
+      });
+
+      return () => unsubscribeViewport();
+    }, []);
+
+    const wrapperClasses = `grid ${getCtx(props).getNodeClasses(props.nodeId, currentViewport)}`;
+
+    const contentClasses = 'relative w-full h-auto justify-self-start';
+    const contentStyles: CSSProperties = {
+      ...getCtx(props).getNodeCSSPropertiesStyles(props.nodeId),
+      gridArea: '1/1/1/1',
+      position: 'relative',
+      zIndex: 1,
+    };
+    const codeHookPayload = getCtx(props).getNodeCodeHookPayload(props.nodeId);
+    const codeHookTarget = codeHookPayload?.target;
+    const codeHookParams =
+      codeHookPayload?.params?.options &&
+      typeof codeHookPayload.params.options === 'string'
+        ? JSON.parse(codeHookPayload.params.options)
+        : null;
+
+    const [children, setChildren] = useState<string[]>([
+      ...getCtx(props).getChildNodeIDs(props.nodeId),
+    ]);
+    const [renderCount, setRenderCount] = useState(0); // Force rerender with counter
+
+    // Get background node if it exists
+    const allNodes = getCtx(props).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;
+
+    // Check if we should use flexbox layout
+    const useFlexLayout =
+      bgNode &&
+      (bgNode.position === 'leftBleed' || bgNode.position === 'rightBleed');
+    const deferFlexLayout =
+      bgNode && (bgNode.position === 'left' || bgNode.position === 'right');
+
+    // Set flex direction based on currentViewport
+    const flexDirection =
+      currentViewport === 'mobile'
+        ? 'flex-col'
+        : bgNode?.position === 'rightBleed'
+          ? 'flex-row-reverse'
+          : 'flex-row';
+
+    const getPaneId = () => `pane-${props.nodeId}`;
+
+    const handleNotification = () => {
+      const newChildren = [...getCtx(props).getChildNodeIDs(props.nodeId)];
+      setChildren(newChildren); // Fresh copy
+      setRenderCount((prev) => prev + 1); // Increment to force rerender
+    };
+
+    useEffect(() => {
+      const unsubscribe = getCtx(props).notifications.subscribe(
+        props.nodeId,
+        handleNotification
+      );
+      return unsubscribe;
+    }, [props.nodeId]);
+
+    return (
+      <div id={getPaneId()} className="pane">
+        <div
+          id={getCtx(props).getNodeSlug(props.nodeId)}
+          className={useFlexLayout ? '' : wrapperClasses}
+        >
+          {codeHookPayload && codeHookTarget === 'featured-content' ? (
+            <FeaturedContentSetup
+              nodeId={props.nodeId}
+              params={codeHookParams}
+            />
+          ) : codeHookPayload && codeHookTarget === 'list-content' ? (
+            <ListContentSetup nodeId={props.nodeId} params={codeHookParams} />
+          ) : codeHookPayload && codeHookTarget === 'bunny-video' ? (
+            <BunnyVideoSetup nodeId={props.nodeId} params={codeHookParams} />
+          ) : codeHookPayload && codeHookTarget ? (
+            <CodeHookContainer
+              payload={{ target: codeHookTarget, params: codeHookParams }}
+            />
+          ) : useFlexLayout ? (
+            // Flexbox Layout for left/right positioned images
+            <div
+              className={`flex flex-nowrap ${flexDirection} ${getCtx(props).getNodeClasses(props.nodeId, currentViewport)}`}
+            >
+              {/* Image Side */}
+              <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>
+
+              {/* Content Side */}
+              <div
+                className={`${contentClasses} ${getSizeClasses(bgNode.size || 'equal', 'content', currentViewport)}`}
+                style={getCtx(props).getNodeCSSPropertiesStyles(props.nodeId)}
+                onClick={(e) => {
+                  getCtx(props).setClickedNodeId(props.nodeId, true);
+                  e.stopPropagation();
+                }}
+              >
+                <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 ? (
+            // Current Grid Layout (default)
+            <div
+              className={contentClasses}
+              style={contentStyles}
+              onClick={(e) => {
+                if (
+                  !(
+                    codeHookPayload &&
+                    typeof codeHookTarget === 'string' &&
+                    [
+                      'list-content',
+                      'featured-content',
+                      'bunny-video',
+                    ].includes(codeHookTarget)
+                  )
+                )
+                  getCtx(props).setClickedNodeId(props.nodeId, true);
+                e.stopPropagation();
+              }}
+            >
+              <RenderChildren
+                children={children.filter((id) => {
+                  const node = allNodes.get(id);
+                  return node?.nodeType !== 'BgPane';
+                })}
+                nodeProps={props}
+                key={`content-children-${props.nodeId}-${renderCount}`}
+              />
+            </div>
+          ) : (
+            // Current Grid Layout (default)
+            <div
+              className={contentClasses}
+              style={contentStyles}
+              onClick={(e) => {
+                if (
+                  !(
+                    codeHookPayload &&
+                    typeof codeHookTarget === 'string' &&
+                    [
+                      'list-content',
+                      'featured-content',
+                      'bunny-video',
+                    ].includes(codeHookTarget)
+                  )
+                )
+                  getCtx(props).setClickedNodeId(props.nodeId, true);
+                e.stopPropagation();
+              }}
+            >
+              <RenderChildren
+                children={children}
+                nodeProps={props}
+                key={`render-children-${props.nodeId}-${renderCount}`}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  },
+  (prevProps: NodeProps, nextProps: NodeProps) => {
+    const isEqual =
+      prevProps.nodeId === nextProps.nodeId && prevProps.ctx === nextProps.ctx;
+    if (!isEqual) {
+      console.log(
+        ` !! Pane rerender triggered by props change: ${prevProps.nodeId} -> ${nextProps.nodeId}`
+      );
+    }
+    return isEqual;
+  }
+);
+
+Pane.displayName = 'Pane';
+export { Pane, CodeHookContainer };