astro-tractstack 2.0.0-rc.0

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

@@ -0,0 +1,415 @@
+import { memo, type ReactElement, useEffect, useState } from 'react';
+import { useStore } from '@nanostores/react';
+import { getCtx } from '@/stores/nodes';
+import { styleElementInfoStore } from '@/stores/storykeep';
+import { getType } from '@/utils/compositor/typeGuards';
+import { NodeWithGuid } from './NodeWithGuid';
+import PanelVisibilityWrapper from './PanelVisibilityWrapper';
+import { Pane } from './nodes/Pane';
+import { PaneEraser } from './nodes/Pane_eraser';
+import { PaneLayout } from './nodes/Pane_layout';
+import { Markdown } from './nodes/Markdown';
+import { BgPaneWrapper } from './nodes/BgPaneWrapper';
+import { StoryFragment } from './nodes/StoryFragment';
+import { TagElement } from './nodes/TagElement';
+import { Widget } from './nodes/Widget';
+import { NodeText } from './nodes/tagElements/NodeText';
+import { NodeA } from './nodes/tagElements/NodeA';
+import { NodeAEraser } from './nodes/tagElements/NodeA_eraser';
+import { NodeButton } from './nodes/tagElements/NodeButton';
+import { NodeButtonEraser } from './nodes/tagElements/NodeButton_eraser';
+import { NodeImg } from './nodes/tagElements/NodeImg';
+import { NodeBasicTag } from './nodes/tagElements/NodeBasicTag';
+import { NodeBasicTagInsert } from './nodes/tagElements/NodeBasicTag_insert';
+import { NodeBasicTagEraser } from './nodes/tagElements/NodeBasicTag_eraser';
+import { NodeBasicTagSettings } from './nodes/tagElements/NodeBasicTag_settings';
+import AddPanePanel from '@/components/edit/pane/AddPanePanel';
+import PageCreationSelector from '@/components/edit/pane/PageGenSelector';
+import ConfigPanePanel from '@/components/edit/pane/ConfigPanePanel';
+import StoryFragmentConfigPanel from '@/components/edit/storyfragment/StoryFragmentConfigPanel';
+import StoryFragmentTitlePanel from '@/components/edit/storyfragment/StoryFragmentPanel_title';
+import ContextPanePanel from '@/components/edit/context/ContextPaneConfig';
+import ContextPaneTitlePanel from '@/components/edit/context/ContextPaneConfig_title';
+import type {
+  StoryFragmentNode,
+  PaneNode,
+  BaseNode,
+  FlatNode,
+} from '@/types/compositorTypes';
+import type { NodeProps } from '@/types/nodeProps';
+
+function parseCodeHook(node: BaseNode | FlatNode) {
+  if ('codeHookParams' in node && Array.isArray(node.codeHookParams)) {
+    const regexpHook =
+      /^(identifyAs|youtube|bunny|bunnyContext|toggle|resource|belief|signup)\((.*)\)$/;
+    const hookMatch = node.copy?.match(regexpHook);
+
+    if (!hookMatch) return null;
+
+    return {
+      hook: hookMatch[1],
+      value1: node.codeHookParams[0] || null,
+      value2: node.codeHookParams[1] || null,
+      value3: node.codeHookParams[2] || '',
+    };
+  }
+
+  if ('children' in node && Array.isArray(node.children)) {
+    const firstChild = node.children[0];
+    if (!firstChild?.value) return null;
+
+    const regexpHook =
+      /(identifyAs|youtube|bunny|bunnyContext|toggle|resource|belief|signup)\((.*?)\)/;
+    const regexpValues = /((?:[^\\|]+|\\\|?)+)/g;
+    const hookMatch = firstChild.value.match(regexpHook);
+
+    if (!hookMatch) return null;
+
+    const hook = hookMatch[1];
+    const hookValuesRaw = hookMatch[2].match(regexpValues);
+
+    return {
+      hook,
+      value1: hookValuesRaw?.[0] || null,
+      value2: hookValuesRaw?.[1] || null,
+      value3: hookValuesRaw?.[2] || '',
+    };
+  }
+
+  return null;
+}
+
+const getElement = (
+  node: BaseNode | FlatNode,
+  props: NodeProps
+): ReactElement => {
+  if (node === undefined) return <></>;
+  const isPreview = getCtx(props).rootNodeId.get() === `tmp`;
+  const hasPanes = useStore(getCtx(props).hasPanes);
+  const isTemplate = useStore(getCtx(props).isTemplate);
+  const sharedProps = { nodeId: node.id, ctx: props.ctx };
+  const type = getType(node);
+
+  switch (type) {
+    case 'Markdown':
+      return <Markdown {...sharedProps} />;
+
+    case 'StoryFragment': {
+      const sf = node as StoryFragmentNode;
+      if (!isPreview) getCtx(props).hasTitle.set(!(!sf.slug || !sf.title));
+
+      return (
+        <>
+          {!(sf.slug && sf.title) ? (
+            <div
+              className="fixed inset-0 overflow-y-auto bg-black bg-opacity-75"
+              style={{ zIndex: 9005 }}
+            >
+              <div className="flex min-h-screen items-center justify-center p-1.5">
+                <div
+                  className="fixed inset-0 bg-black opacity-65"
+                  onClick={() => (window.location.href = '/storykeep')}
+                />
+
+                <div className="relative w-full max-w-4xl rounded-lg bg-white shadow-xl">
+                  <div className="absolute right-4 top-4 z-10">
+                    <button
+                      onClick={() => (window.location.href = '/storykeep')}
+                      className="flex h-10 w-10 items-center justify-center rounded-full bg-white bg-opacity-90 shadow-lg transition-all duration-200 hover:bg-opacity-100"
+                      title="Cancel and return to StoryKeep"
+                      aria-label="Cancel and return to StoryKeep"
+                    >
+                      <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <line x1="18" y1="6" x2="6" y2="18" />
+                        <line x1="6" y1="6" x2="18" y2="18" />
+                      </svg>
+                    </button>
+                  </div>
+
+                  <div className="p-6">
+                    <StoryFragmentTitlePanel nodeId={props.nodeId} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          ) : !hasPanes && sf.slug && sf.title && !isPreview ? (
+            <PageCreationSelector
+              nodeId={props.nodeId}
+              ctx={getCtx(props)}
+              isTemplate={isTemplate}
+            />
+          ) : (
+            <>
+              <PanelVisibilityWrapper
+                nodeId={props.nodeId}
+                panelType="storyfragment"
+                ctx={getCtx(props)}
+              >
+                <StoryFragmentConfigPanel
+                  nodeId={props.nodeId}
+                  config={props.config!}
+                />
+              </PanelVisibilityWrapper>
+              <StoryFragment {...sharedProps} />
+            </>
+          )}
+        </>
+      );
+    }
+
+    case 'Pane': {
+      const toolModeVal = getCtx(props).toolModeValStore.get().value;
+      const paneNodes = getCtx(props).getChildNodeIDs(node.id);
+      const paneNode = node as PaneNode;
+      if (paneNode.isContextPane) {
+        if (!isPreview)
+          getCtx(props).hasTitle.set(!(!paneNode.slug || !paneNode.title));
+        return (
+          <>
+            {!isPreview && !(paneNode.slug && paneNode.title) ? (
+              <div
+                className="fixed inset-0 overflow-y-auto bg-black bg-opacity-75"
+                style={{ zIndex: 9005 }}
+              >
+                <div className="flex min-h-screen items-center justify-center p-1.5">
+                  <div className="relative w-full max-w-4xl rounded-lg bg-white shadow-xl">
+                    <div className="p-6">
+                      <ContextPaneTitlePanel nodeId={props.nodeId} />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ) : !isPreview ? (
+              <ContextPanePanel nodeId={node.id} />
+            ) : null}
+            <div>
+              <Pane {...sharedProps} />
+              {!isPreview &&
+                paneNode.slug &&
+                paneNode.title &&
+                paneNodes.length === 0 && (
+                  <PanelVisibilityWrapper
+                    nodeId={node.id}
+                    panelType="add"
+                    ctx={getCtx(props)}
+                  >
+                    <AddPanePanel
+                      nodeId={node.id}
+                      first={true}
+                      ctx={getCtx(props)}
+                      isContextPane={true}
+                    />
+                  </PanelVisibilityWrapper>
+                )}
+            </div>
+          </>
+        );
+      }
+
+      const storyFragmentId = getCtx(props).getClosestNodeTypeFromId(
+        node.id,
+        'StoryFragment'
+      );
+      const storyFragment = getCtx(props)
+        .allNodes.get()
+        .get(storyFragmentId) as StoryFragmentNode;
+      const firstPane =
+        storyFragment?.paneIds?.length && storyFragment.paneIds[0];
+      if (isPreview) return <Pane {...sharedProps} />;
+      return (
+        <>
+          {storyFragment && firstPane === node.id && (
+            <PanelVisibilityWrapper
+              nodeId={`${node.id}-0`}
+              panelType="add"
+              ctx={getCtx(props)}
+            >
+              <AddPanePanel nodeId={node.id} first={true} ctx={getCtx(props)} />
+            </PanelVisibilityWrapper>
+          )}
+          <div className="py-0.5">
+            <PanelVisibilityWrapper
+              nodeId={node.id}
+              panelType="settings"
+              ctx={getCtx(props)}
+            >
+              <ConfigPanePanel nodeId={node.id} />
+            </PanelVisibilityWrapper>
+            {toolModeVal === `eraser` ? (
+              <PaneEraser {...sharedProps} />
+            ) : toolModeVal === `layout` ? (
+              <PaneLayout {...sharedProps} />
+            ) : (
+              <Pane {...sharedProps} />
+            )}
+          </div>
+          <PanelVisibilityWrapper
+            nodeId={node.id}
+            panelType="add"
+            ctx={getCtx(props)}
+          >
+            <AddPanePanel nodeId={node.id} first={false} ctx={getCtx(props)} />
+          </PanelVisibilityWrapper>
+        </>
+      );
+    }
+
+    case 'BgPane':
+      return <BgPaneWrapper {...sharedProps} />;
+    case 'TagElement':
+      return <TagElement {...sharedProps} />;
+    // tag elements
+    case 'h2':
+    case 'h3':
+    case 'h4':
+    case 'ol':
+    case 'ul':
+    case 'li':
+    case 'aside':
+    case 'p': {
+      const toolModeVal = getCtx(props).toolModeValStore.get().value;
+      if (toolModeVal === `insert`)
+        return <NodeBasicTagInsert {...sharedProps} tagName={type} />;
+      else if (toolModeVal === `eraser`)
+        return <NodeBasicTagEraser {...sharedProps} tagName={type} />;
+      else if (toolModeVal === `move`)
+        return <NodeBasicTagSettings {...sharedProps} tagName={type} />;
+      return <NodeBasicTag {...sharedProps} tagName={type} />;
+    }
+
+    case 'strong':
+    case 'em':
+      return <NodeBasicTag {...sharedProps} tagName={type} />;
+
+    case 'text':
+      return <NodeText {...sharedProps} />;
+    case 'button': {
+      const toolModeVal = getCtx(props).toolModeValStore.get().value;
+      if (toolModeVal === `eraser`)
+        return <NodeButtonEraser {...sharedProps} />;
+      return <NodeButton {...sharedProps} />;
+    }
+    case 'a': {
+      const toolModeVal = getCtx(props).toolModeValStore.get().value;
+      if (toolModeVal === `eraser`) return <NodeAEraser {...sharedProps} />;
+      return <NodeA {...sharedProps} />;
+    }
+    case 'img':
+      return <NodeImg {...sharedProps} />;
+    case 'code': {
+      const hookData = parseCodeHook(node);
+      return hookData ? <Widget {...hookData} {...sharedProps} /> : <></>;
+    }
+    case 'impression':
+      return <></>;
+    default:
+      console.warn(`Node.tsx miss on ${type}`);
+      return <></>;
+  }
+};
+
+const Node = memo((props: NodeProps) => {
+  const node = getCtx(props).allNodes.get().get(props.nodeId) as FlatNode;
+  const isPreview = getCtx(props).rootNodeId.get() === `tmp`;
+
+  const {
+    markdownParentId,
+    tagName: styleTagName,
+    overrideNodeId,
+  } = useStore(styleElementInfoStore, {
+    keys: ['markdownParentId', 'tagName', 'overrideNodeId'],
+  });
+
+  // Subscribe to edit lock state for this node
+  const [isEditLocked, setIsEditLocked] = useState(false);
+
+  useEffect(() => {
+    // Check initial state
+    setIsEditLocked(getCtx(props).isEditLocked(props.nodeId));
+
+    // Subscribe to changes in edit lock
+    const unsubscribe = getCtx(props).editingNodeId.subscribe((editingId) => {
+      setIsEditLocked(editingId === props.nodeId);
+    });
+
+    return () => unsubscribe();
+  }, [props.nodeId]);
+
+  useEffect(() => {
+    // Only subscribe to notifications if not edit-locked
+    if (!isEditLocked) {
+      const unsubscribe = getCtx(props).notifications.subscribe(
+        props.nodeId,
+        () => {}
+      );
+      return () => unsubscribe();
+    }
+  }, [props.nodeId, isEditLocked]);
+
+  const nodeTagName = node?.tagName || '';
+  const isBlockTag = ['h2', 'h3', 'h4', 'ol', 'ul', 'li', 'p'].includes(
+    nodeTagName
+  );
+
+  const parentNode = node?.parentId
+    ? getCtx(props).allNodes.get().get(node.parentId)
+    : null;
+  const isTopLevelBlock = isBlockTag && parentNode?.nodeType === 'Markdown';
+
+  const closestMarkdownId = getCtx(props).getClosestNodeTypeFromId(
+    props.nodeId,
+    'Markdown'
+  );
+  const isEditableMode = [`text`].includes(
+    getCtx(props).toolModeValStore.get().value
+  );
+  const isStylesMode = [`styles`].includes(
+    getCtx(props).toolModeValStore.get().value
+  );
+
+  const isHighlighted =
+    isTopLevelBlock &&
+    closestMarkdownId === markdownParentId &&
+    nodeTagName === styleTagName &&
+    !isEditableMode;
+
+  const isOverride = overrideNodeId === props.nodeId;
+
+  const highlightStyle = isHighlighted
+    ? {
+        outline: isOverride
+          ? '3.5px dotted rgba(255, 165, 0, 0.85)'
+          : '2.5px dashed rgba(0, 0, 0, 0.3)',
+      }
+    : {};
+  const hoverClasses = isStylesMode
+    ? 'hover:outline hover:outline-2 hover:outline-black'
+    : '';
+
+  const element = getElement(node, props);
+
+  if (!isPreview && getCtx(props).showGuids.get()) {
+    return <NodeWithGuid {...props} element={element} />;
+  }
+
+  if (isTopLevelBlock) {
+    return (
+      <div className={hoverClasses} style={highlightStyle}>
+        {element}
+      </div>
+    );
+  }
+
+  return element;
+});
+
+export default Node;

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

@@ -0,0 +1,25 @@
+import { memo, type ReactElement } from 'react';
+import { getCtx } from '@/stores/nodes';
+import { getType } from '@/utils/compositor/typeGuards';
+import type { FlatNode } from '@/types/compositorTypes';
+import type { NodeProps } from '@/types/nodeProps';
+
+export type RenderableNodes = NodeProps & { element: ReactElement };
+
+export const NodeWithGuid = memo((props: RenderableNodes) => {
+  const node = getCtx(props).allNodes.get().get(props.nodeId) as FlatNode;
+  return (
+    <div className="relative">
+      <div
+        className="outline-dotted outline-2 outline-cyan-600"
+        data-node-id={props.nodeId}
+        data-node-type={getType(node)}
+      >
+        <div className="border-b border-dotted border-cyan-600 p-1 font-mono text-xs text-cyan-600">
+          {getType(node)}: {props.nodeId}
+        </div>
+        <div className="p-0.5">{props.element}</div>
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { getCtx, type NodesContext } from '@/stores/nodes';
+
+interface PanelVisibilityWrapperProps {
+  nodeId: string;
+  panelType: string;
+  children: ReactNode;
+  ctx?: NodesContext;
+}
+
+/**
+ * Wrapper component that handles automatically closing panels when they scroll out of view
+ */
+const PanelVisibilityWrapper = ({
+  nodeId,
+  panelType,
+  children,
+  ctx,
+}: PanelVisibilityWrapperProps) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const nodesCtx = ctx || getCtx();
+
+  // Track active panel state for this specific component
+  const [isActive, setIsActive] = useState(false);
+
+  // Setup effect to track active panel state
+  useEffect(() => {
+    // Create a function to check if this panel is active
+    const checkIfActive = () => {
+      const activePaneMode = nodesCtx.activePaneMode.get();
+      return (
+        activePaneMode.panel === panelType && activePaneMode.paneId === nodeId
+      );
+    };
+
+    // Set initial state
+    setIsActive(checkIfActive());
+
+    // Subscribe to changes in the active panel mode
+    const unsubscribe = nodesCtx.activePaneMode.subscribe(() => {
+      setIsActive(checkIfActive());
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [nodeId, panelType, nodesCtx]);
+
+  // Setup intersection observer
+  useEffect(() => {
+    const currentWrapper = wrapperRef.current;
+    if (!currentWrapper) return;
+
+    // Always observe the panel, regardless of active state
+    const observer = new IntersectionObserver(
+      (entries) => {
+        // Only take action if this panel is currently active and not intersecting
+        if (!entries[0].isIntersecting && isActive) {
+          nodesCtx.closeAllPanels();
+        }
+      },
+      {
+        threshold: 0.1, // Close when 90% of the panel is out of view
+        rootMargin: '-10px', // Small margin to make detection a bit more forgiving
+      }
+    );
+
+    observer.observe(currentWrapper);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [nodeId, panelType, nodesCtx, isActive]); // Include isActive in dependencies
+
+  return (
+    <div
+      ref={wrapperRef}
+      data-panel-type={panelType}
+      data-node-id={nodeId}
+      data-active={isActive}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default PanelVisibilityWrapper;

package/templates/src/components/compositor/elements/Belief.tsx

@@ -0,0 +1,148 @@
+import { useState, useEffect } from 'react';
+import { Select } from '@ark-ui/react/select';
+import { Portal } from '@ark-ui/react/portal';
+import { createListCollection } from '@ark-ui/react/collection';
+import CheckIcon from '@heroicons/react/20/solid/CheckIcon';
+import ChevronUpDownIcon from '@heroicons/react/20/solid/ChevronUpDownIcon';
+import { heldBeliefsScales, heldBeliefsTitles } from '@/constants/beliefs';
+import { classNames } from '@/utils/helpers';
+import type { BeliefOptionDatum } from '@/types/compositorTypes';
+
+export const Belief = ({
+  value,
+}: {
+  value: { slug: string; scale: string; extra: string };
+}) => {
+  const thisScaleLookup = value.scale as keyof typeof heldBeliefsScales;
+  const extra = value && typeof value.extra === `string` ? value.extra : null;
+  const thisTitle = heldBeliefsTitles[thisScaleLookup];
+  const thisScaleRaw = heldBeliefsScales[thisScaleLookup].sort(function (
+    a: BeliefOptionDatum,
+    b: BeliefOptionDatum
+  ) {
+    return b.id - a.id;
+  });
+  const start = {
+    id: 0,
+    slug: '0',
+    name: thisTitle,
+    color: `bg-myorange`,
+  };
+  const thisScale = [start, ...thisScaleRaw];
+  const [selected, setSelected] = useState(start);
+
+  // Create collection for Ark UI Select component
+  const collection = createListCollection({
+    items: thisScale,
+    itemToValue: (item) => item.slug,
+    itemToString: (item) => item.name,
+  });
+
+  // Always start with the default option since we're in readonly mode
+  useEffect(() => {
+    setSelected(start);
+  }, []);
+
+  // No-op handler since we're in readonly mode
+  const handleClick = () => {
+    // Do nothing - component is effectively readonly
+    return false;
+  };
+
+  // CSS to properly style the select items with hover and selection
+  const selectItemStyles = `
+    .belief-item[data-highlighted] {
+      background-color: #f1f5f9; /* bg-slate-200 */
+      color: #0891b2; /* text-myblue */
+    }
+    .belief-item[data-highlighted] .belief-indicator {
+      color: #0891b2; /* text-myblue */
+    }
+    .belief-item[data-state="checked"] .belief-indicator {
+      display: flex;
+    }
+    .belief-item .belief-indicator {
+      display: none;
+    }
+    .belief-item[data-state="checked"] {
+      text-decoration: underline;
+    }
+  `;
+
+  return (
+    <>
+      <style>{selectItemStyles}</style>
+      {extra ? <span className="mr-2">{extra}</span> : null}
+      <div className="mt-3 block w-fit">
+        <Select.Root
+          collection={collection}
+          value={[selected.slug]}
+          onValueChange={handleClick}
+          defaultValue={[start.slug]}
+          disabled={true}
+        >
+          <Select.Control
+            className={classNames(
+              selected?.color
+                ? `border-${selected.color.substring(3)}`
+                : `bg-slate-200`,
+              `relative w-full cursor-default rounded-md border bg-white py-2 pl-3 pr-10 text-left text-black opacity-75 shadow-sm`
+            )}
+          >
+            <Select.Trigger className="flex w-full items-center justify-between">
+              <span className="flex items-center">
+                <span
+                  aria-label="Color swatch for belief"
+                  className={classNames(
+                    selected?.color ? selected.color : `bg-myorange`,
+                    `inline-block h-2 w-2 flex-shrink-0 rounded-full`
+                  )}
+                />
+                <span className="ml-3 block truncate">
+                  {selected?.name || thisTitle}
+                </span>
+              </span>
+              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronUpDownIcon
+                  className="text-mylightgrey h-5 w-5"
+                  aria-hidden="true"
+                />
+              </span>
+            </Select.Trigger>
+          </Select.Control>
+
+          <Portal>
+            <Select.Positioner>
+              <Select.Content className="absolute z-50 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                {thisScale.map((factor) => (
+                  <Select.Item
+                    key={factor.id}
+                    item={factor}
+                    className="belief-item relative cursor-default select-none py-2 pl-3 pr-9 text-black"
+                  >
+                    <div className="flex items-center">
+                      <span
+                        className={classNames(
+                          factor.color,
+                          `inline-block h-2 w-2 flex-shrink-0 rounded-full`
+                        )}
+                        aria-hidden="true"
+                      />
+                      <Select.ItemText className="ml-3 block truncate">
+                        {factor.name}
+                      </Select.ItemText>
+                    </div>
+
+                    <Select.ItemIndicator className="belief-indicator absolute inset-y-0 right-0 flex items-center px-2 text-black">
+                      <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                    </Select.ItemIndicator>
+                  </Select.Item>
+                ))}
+              </Select.Content>
+            </Select.Positioner>
+          </Portal>
+        </Select.Root>
+      </div>
+    </>
+  );
+};