astro-tractstack 2.0.0-rc.0

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

@@ -0,0 +1,69 @@
+import { type CSSProperties, useEffect, useState } from 'react';
+import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
+import { viewportKeyStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import { RenderChildren } from './RenderChildren';
+import { CodeHookContainer } from './Pane';
+import type { NodeProps } from '@/types/nodeProps';
+
+export const PaneEraser = (props: NodeProps) => {
+  const wrapperClasses = `grid ${getCtx(props).getNodeClasses(props.nodeId, viewportKeyStore.get().value)}`;
+  const contentClasses = 'relative w-full h-auto justify-self-start';
+  const contentStyles: CSSProperties = {
+    ...getCtx(props).getNodeCSSPropertiesStyles(props.nodeId),
+    gridArea: '1/1/1/1',
+  };
+  const codeHookPayload = getCtx(props).getNodeCodeHookPayload(props.nodeId);
+  const [children, setChildren] = useState<string[]>([
+    ...getCtx(props).getChildNodeIDs(props.nodeId),
+  ]);
+
+  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)]);
+      }
+    );
+    return unsubscribe;
+  }, []);
+
+  return (
+    <div id={getPaneId()} className="pane min-h-16">
+      <div
+        id={getCtx(props).getNodeSlug(props.nodeId)}
+        className={wrapperClasses}
+      >
+        <div
+          className={contentClasses}
+          style={contentStyles}
+          onClick={(e) => {
+            getCtx(props).setClickedNodeId(props.nodeId);
+            e.stopPropagation();
+          }}
+        >
+          <button
+            title="Delete Pane"
+            onClick={(e) => {
+              getCtx(props).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>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,77 @@
+import { type CSSProperties, useEffect, useState } from 'react';
+import PuzzlePieceIcon from '@heroicons/react/24/outline/PuzzlePieceIcon';
+import { viewportKeyStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import { RenderChildren } from './RenderChildren';
+import { CodeHookContainer } from './Pane';
+import { type NodeProps } from '@/types/nodeProps';
+
+export const PaneLayout = (props: NodeProps) => {
+  const wrapperClasses = `grid ${getCtx(props).getNodeClasses(props.nodeId, viewportKeyStore.get().value)}`;
+  const contentClasses = 'relative w-full h-auto justify-self-start';
+  const contentStyles: CSSProperties = {
+    ...getCtx(props).getNodeCSSPropertiesStyles(props.nodeId),
+    gridArea: '1/1/1/1',
+  };
+  const codeHookPayload = getCtx(props).getNodeCodeHookPayload(props.nodeId);
+  const [children, setChildren] = useState<string[]>([
+    ...getCtx(props).getChildNodeIDs(props.nodeId),
+  ]);
+
+  const getPaneId = (): string => `pane-${props.nodeId}`;
+
+  useEffect(() => {
+    const unsubscribe = getCtx(props).notifications.subscribe(
+      props.nodeId,
+      () => {
+        console.log(
+          'notification received data update for page node: ' + props.nodeId
+        );
+        setChildren([...getCtx(props).getChildNodeIDs(props.nodeId)]);
+      }
+    );
+    return unsubscribe;
+  }, []);
+
+  return (
+    <div id={getPaneId()} className="pane min-h-16">
+      <div
+        id={getCtx(props).getNodeSlug(props.nodeId)}
+        className={wrapperClasses}
+      >
+        <div
+          className={contentClasses}
+          style={contentStyles}
+          onClick={(e) => {
+            getCtx(props).setClickedNodeId(props.nodeId);
+            e.stopPropagation();
+          }}
+          onDoubleClick={(e) => {
+            getCtx(props).setClickedNodeId(props.nodeId, true);
+            e.stopPropagation();
+          }}
+        >
+          <button
+            title="Apply New Layout"
+            onClick={(e) => {
+              getCtx(props).setClickedNodeId(props.nodeId);
+              e.stopPropagation();
+            }}
+            onDoubleClick={(e) => {
+              getCtx(props).setClickedNodeId(props.nodeId, true);
+              e.stopPropagation();
+            }}
+            className="absolute right-2 top-2 z-10 rounded-full bg-cyan-700 p-1.5 hover:bg-black"
+          >
+            <PuzzlePieceIcon className="h-10 w-10 text-white" />
+          </button>
+          {codeHookPayload ? (
+            <CodeHookContainer payload={codeHookPayload} />
+          ) : (
+            <RenderChildren children={children} nodeProps={props} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,19 @@
+import Node from '../Node';
+import type { NodeProps } from '@/types/nodeProps';
+import type { CompositorProps } from '../Compositor';
+
+export type RenderChildrenProps = {
+  children: string[];
+  nodeProps: NodeProps | CompositorProps;
+};
+
+export const RenderChildren = (props: RenderChildrenProps) => {
+  const { children, nodeProps } = props;
+  return (
+    <>
+      {children.map((id: string) => (
+        <Node nodeId={id} key={id} ctx={nodeProps.ctx} />
+      ))}
+    </>
+  );
+};

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

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import { getCtx } from '@/stores/nodes';
+import { viewportKeyStore } from '@/stores/storykeep';
+import { RenderChildren } from './RenderChildren';
+import type { NodeProps } from '@/types/nodeProps';
+
+export const StoryFragment = (props: NodeProps) => {
+  //console.log(`Rendering StoryFragment with id: ${props.nodeId}`);
+  const [children, setChildren] = useState<string[]>([
+    ...getCtx(props).getChildNodeIDs(props.nodeId),
+  ]);
+
+  useEffect(() => {
+    const unsubscribe = getCtx(props).notifications.subscribe(
+      props.nodeId,
+      () => {
+        //console.log(" !! StoryFragment received notification:", props.nodeId);
+        setChildren([...getCtx(props).getChildNodeIDs(props.nodeId)]);
+      }
+    );
+    return unsubscribe;
+  }, [props.nodeId]);
+
+  return (
+    <div
+      className={getCtx(props).getNodeClasses(
+        props.nodeId,
+        viewportKeyStore.get().value
+      )}
+      style={getCtx(props).getNodeCSSPropertiesStyles(props.nodeId)}
+    >
+      <RenderChildren children={children} nodeProps={props} />
+    </div>
+  );
+};

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

@@ -0,0 +1,14 @@
+import { getCtx } from '@/stores/nodes';
+import { RenderChildren } from './RenderChildren';
+import type { NodeProps } from '@/types/nodeProps';
+
+export const TagElement = (props: NodeProps) => {
+  return (
+    <>
+      <RenderChildren
+        children={getCtx(props).getChildNodeIDs(props.nodeId)}
+        nodeProps={props}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,115 @@
+import { memo, type ReactElement } from 'react';
+import { getCtx, NodesContext } from '@/stores/nodes';
+import { viewportKeyStore } from '@/stores/storykeep';
+import { Belief } from '@/components/compositor/elements/Belief';
+import { IdentifyAs } from '@/components/compositor/elements/IdentifyAs';
+import { ToggleBelief } from '@/components/compositor/elements/ToggleBelief';
+import { YouTubeWrapper } from '@/components/compositor/elements/YouTubeWrapper';
+import { SignUp } from '@/components/compositor/elements/SignUp';
+import BunnyVideo from '@/components/compositor/elements/BunnyVideo';
+
+export interface WidgetProps {
+  nodeId: string;
+  ctx?: NodesContext;
+  hook: string | null;
+  value1: string | null;
+  value2: string | null;
+  value3: string;
+}
+
+const getWidgetElement = (
+  props: WidgetProps,
+  classNames: string
+): ReactElement | null => {
+  const { hook, value1, value2, value3, nodeId } = props;
+  if (!hook || !value1) return null;
+
+  switch (hook) {
+    case 'youtube':
+      return value2 ? (
+        <div className={`${classNames} pointer-events-none`}>
+          <YouTubeWrapper embedCode={value1} title={value2} />
+        </div>
+      ) : null;
+
+    case 'signup':
+      return (
+        <div className={`${classNames} pointer-events-none`}>
+          <SignUp
+            id={nodeId}
+            persona={value1 ?? 'Major Updates Only'}
+            prompt={value2 ?? 'Keep in touch!'}
+            clarifyConsent={value3 === 'true'}
+          />
+        </div>
+      );
+
+    case 'belief':
+      return value2 ? (
+        <div className={`${classNames} pointer-events-none`}>
+          <Belief value={{ slug: value1, scale: value2, extra: value3 }} />
+        </div>
+      ) : null;
+
+    case 'identifyAs':
+      return value2 ? (
+        <IdentifyAs
+          classNames={`${classNames} pointer-events-none`}
+          value={{ slug: value1, target: value2, extra: value3 || `` }}
+        />
+      ) : null;
+
+    case 'toggle':
+      return value2 ? (
+        <div className={`${classNames} pointer-events-none`}>
+          <ToggleBelief prompt={value2} />
+        </div>
+      ) : null;
+
+    case 'resource':
+      return (
+        <div className={`${classNames} pointer-events-none`}>
+          <div>
+            <strong>Resource Template (not yet implemented):</strong> {value1},{' '}
+            {value2}
+          </div>
+        </div>
+      );
+
+    case 'bunny':
+      return value1 ? (
+        <div className={`${classNames} pointer-events-none`}>
+          <BunnyVideo embedUrl={value1} title={value2 || 'Bunny Video'} />
+        </div>
+      ) : null;
+
+    default:
+      return null;
+  }
+};
+
+export const Widget = memo((props: WidgetProps) => {
+  const classNames = getCtx(props).getNodeClasses(
+    props.nodeId,
+    viewportKeyStore.get().value
+  );
+  const content = getWidgetElement(props, classNames);
+  if (!content) return null;
+
+  return (
+    <div
+      contentEditable={false}
+      suppressContentEditableWarning={true}
+      onClick={(e) => {
+        getCtx(props).setClickedNodeId(props.nodeId);
+        e.stopPropagation();
+      }}
+      onDoubleClick={(e) => {
+        getCtx(props).setClickedNodeId(props.nodeId, true);
+        e.stopPropagation();
+      }}
+    >
+      {content}
+    </div>
+  );
+});

package/templates/src/components/compositor/nodes/tagElements/NodeA.tsx

@@ -0,0 +1,4 @@
+import { NodeAnchorComponent } from './NodeAnchorComponent';
+import type { NodeProps } from '@/types/nodeProps';
+
+export const NodeA = (props: NodeProps) => NodeAnchorComponent(props, 'a');

package/templates/src/components/compositor/nodes/tagElements/NodeA_eraser.tsx

@@ -0,0 +1,26 @@
+import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
+import { getCtx } from '@/stores/nodes';
+import { viewportKeyStore } from '@/stores/storykeep';
+import { RenderChildren } from '../RenderChildren';
+import type { NodeProps } from '@/types/nodeProps';
+
+export const NodeAEraser = (props: NodeProps) => {
+  return (
+    <button
+      className={` ${getCtx(props).getNodeClasses(props.nodeId, viewportKeyStore.get().value)} eraser-child group relative transition-all before:pointer-events-none before:absolute before:inset-0 before:opacity-50 before:outline-dashed before:outline-4 before:outline-red-700 hover:before:bg-red-600/50 hover:before:opacity-100 focus:before:bg-red-600/50 focus:before:opacity-100`}
+      title="Delete Link"
+      onClick={(e) => {
+        getCtx(props).setClickedNodeId(props.nodeId);
+        e.stopPropagation();
+      }}
+    >
+      <div className="absolute right-2 top-2 rounded-full bg-red-700 p-0.5">
+        <TrashIcon className="h-5 w-5 text-white" />
+      </div>
+      <RenderChildren
+        children={getCtx(props).getChildNodeIDs(props.nodeId)}
+        nodeProps={props}
+      />
+    </button>
+  );
+};

package/templates/src/components/compositor/nodes/tagElements/NodeAnchorComponent.tsx

@@ -0,0 +1,248 @@
+import { useEffect, useRef, type RefObject, type MouseEvent } from 'react';
+import { getCtx } from '@/stores/nodes';
+import { viewportKeyStore } from '@/stores/storykeep';
+import { RenderChildren } from '../RenderChildren';
+import { PlayButton } from '@/components/compositor/elements/PlayButton';
+import type { FlatNode } from '@/types/compositorTypes';
+import type { NodeProps } from '@/types/nodeProps';
+
+export const NodeAnchorComponent = (props: NodeProps, tagName: string) => {
+  const nodeId = props.nodeId;
+  const ctx = getCtx(props);
+  const node = ctx.allNodes.get().get(nodeId) as FlatNode;
+  const childNodeIDs = ctx.getChildNodeIDs(node?.parentId ?? '');
+  const linkRef = useRef<HTMLAnchorElement | HTMLButtonElement>(null);
+
+  // Check if this is a video link
+  const isVideo = !!node.buttonPayload?.bunnyPayload;
+
+  // Get previous and next siblings for spacing logic
+  const currentIndex = childNodeIDs.indexOf(nodeId);
+  const nextNode =
+    currentIndex < childNodeIDs.length - 1
+      ? (ctx.allNodes.get().get(childNodeIDs[currentIndex + 1]) as FlatNode)
+      : null;
+
+  // Add space after links/buttons unless followed by punctuation
+  const needsTrailingSpace =
+    nextNode &&
+    nextNode.tagName === 'text' &&
+    !(
+      nextNode.copy?.startsWith('.') ||
+      nextNode.copy?.startsWith(',') ||
+      nextNode.copy?.startsWith(';') ||
+      nextNode.copy?.startsWith(':')
+    );
+
+  useEffect(() => {
+    // Only apply in editable mode
+    if (
+      !linkRef.current ||
+      !['text'].includes(ctx.toolModeValStore.get().value)
+    ) {
+      return;
+    }
+
+    const el = linkRef.current;
+
+    // Add zero-width spaces to beginning and end of text nodes to assist with cursor positioning
+    const processTextNodes = (node: Node) => {
+      if (node.nodeType === Node.TEXT_NODE && node.textContent) {
+        // Only add if not already present
+        if (!node.textContent.startsWith('\u200B')) {
+          node.textContent = '\u200B' + node.textContent;
+        }
+        if (!node.textContent.endsWith('\u200B')) {
+          node.textContent = node.textContent + '\u200B';
+        }
+      } else if (node.childNodes && node.childNodes.length > 0) {
+        Array.from(node.childNodes).forEach(processTextNodes);
+      }
+    };
+
+    // Process all text nodes in the link/button when entering edit mode
+    processTextNodes(el);
+
+    // Fix arrow key navigation
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Only handle arrow keys and specific conditions
+      if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+
+      const selection = window.getSelection();
+      if (!selection || selection.rangeCount === 0) return;
+
+      const range = selection.getRangeAt(0);
+      const isCollapsed = range.collapsed;
+      if (!isCollapsed) return; // Don't interfere with text selection
+
+      // Check if selection is at edge of the link
+      if (e.key === 'ArrowLeft') {
+        // Get the first text node in the link
+        let firstTextNode: Node | null = null;
+        const findFirstTextNode = (node: Node): Node | null => {
+          if (node.nodeType === Node.TEXT_NODE) return node;
+          if (!node.firstChild) return null;
+
+          let result: Node | null = null;
+          let child = node.firstChild;
+          while (child && !result) {
+            result = findFirstTextNode(child);
+            child = child.nextSibling as ChildNode;
+          }
+          return result;
+        };
+
+        firstTextNode = findFirstTextNode(el);
+        if (!firstTextNode) return;
+
+        // Check if cursor is at start of first text node (after zero-width space)
+        if (range.startContainer === firstTextNode && range.startOffset <= 1) {
+          // Cursor at beginning of link - place outside before link
+          e.preventDefault();
+          const newRange = document.createRange();
+          newRange.setStartBefore(el);
+          newRange.collapse(true);
+          selection.removeAllRanges();
+          selection.addRange(newRange);
+        }
+      } else if (e.key === 'ArrowRight') {
+        // Get the last text node in the link
+        let lastTextNode: Node | null = null;
+        const findLastTextNode = (node: Node): Node | null => {
+          if (node.nodeType === Node.TEXT_NODE) return node;
+          if (!node.lastChild) return null;
+
+          let result: Node | null = null;
+          let child = node.lastChild;
+          while (child && !result) {
+            result = findLastTextNode(child);
+            child = child.previousSibling as ChildNode;
+          }
+          return result;
+        };
+
+        lastTextNode = findLastTextNode(el);
+        if (!lastTextNode) return;
+
+        // Check if cursor is at end of last text node (before zero-width space)
+        const contentLength = lastTextNode.textContent?.length || 0;
+        if (
+          range.startContainer === lastTextNode &&
+          range.startOffset >= contentLength - 1
+        ) {
+          // Cursor at end of link - place outside after link
+          e.preventDefault();
+          const newRange = document.createRange();
+          newRange.setStartAfter(el);
+          newRange.collapse(true);
+          selection.removeAllRanges();
+          selection.addRange(newRange);
+        }
+      }
+    };
+
+    // Get parent contentEditable element
+    let parent = el.parentElement;
+    while (parent && !parent.hasAttribute('contenteditable')) {
+      parent = parent.parentElement;
+    }
+
+    if (parent) {
+      parent.addEventListener('keydown', handleKeyDown);
+
+      return () => {
+        parent.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [ctx.toolModeValStore.get().value]);
+
+  const handleClick = (e: MouseEvent) => {
+    // Check if in edit mode
+    const isEditMode = [`text`].includes(ctx.toolModeValStore.get().value);
+
+    if (isEditMode) {
+      // Allow normal cursor positioning in edit mode
+    } else {
+      // In non-edit mode, prevent navigation until we handle the click
+      e.preventDefault();
+    }
+
+    e.stopPropagation();
+
+    // Set clicked node with slight delay to avoid race conditions
+    setTimeout(() => {
+      ctx.setClickedNodeId(nodeId);
+    }, 10);
+  };
+
+  const handleDoubleClick = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Handle double click with slight delay
+    setTimeout(() => {
+      ctx.setClickedNodeId(nodeId, true);
+    }, 10);
+  };
+
+  const isEditMode = [`text`].includes(ctx.toolModeValStore.get().value);
+
+  // Create appropriate element based on tagName
+  if (tagName === 'a') {
+    return (
+      <>
+        <a
+          ref={linkRef as RefObject<HTMLAnchorElement>}
+          className={ctx.getNodeClasses(nodeId, viewportKeyStore.get().value)}
+          href={node.href}
+          onClick={handleClick}
+          onDoubleClick={handleDoubleClick}
+          data-editable-link="true"
+          // Preserve display mode
+          style={{ display: 'inline' }}
+        >
+          <RenderChildren
+            children={ctx.getChildNodeIDs(nodeId)}
+            nodeProps={props}
+          />
+          {isVideo && (
+            <>
+              {` `}
+              <PlayButton />
+            </>
+          )}
+        </a>
+        {needsTrailingSpace && ' '}
+      </>
+    );
+  } else {
+    return (
+      <>
+        <button
+          ref={linkRef as RefObject<HTMLButtonElement>}
+          className={ctx.getNodeClasses(nodeId, viewportKeyStore.get().value)}
+          onClick={handleClick}
+          onDoubleClick={handleDoubleClick}
+          data-editable-button="true"
+          // Preserve display mode
+          style={{
+            display: 'inline',
+            cursor: isEditMode ? 'text' : 'crosshair',
+          }}
+        >
+          <RenderChildren
+            children={ctx.getChildNodeIDs(nodeId)}
+            nodeProps={props}
+          />
+          {isVideo && (
+            <>
+              {` `}
+              <PlayButton />
+            </>
+          )}
+        </button>
+        {needsTrailingSpace && ' '}
+      </>
+    );
+  }
+};