astro-tractstack 2.1.2 → 2.2.0

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

@@ -1,269 +0,0 @@
-import { type CSSProperties, useEffect, useState } from 'react';
-import { useStore } from '@nanostores/react';
-import ArchiveBoxArrowDownIcon from '@heroicons/react/24/outline/ArchiveBoxArrowDownIcon';
-import ArrowPathRoundedSquareIcon from '@heroicons/react/24/outline/ArrowPathRoundedSquareIcon';
-import ArrowDownTrayIcon from '@heroicons/react/24/outline/ArrowDownTrayIcon';
-import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
-import SparklesIcon from '@heroicons/react/24/solid/SparklesIcon';
-import { viewportKeyStore } from '@/stores/storykeep';
-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 { AiRestylePaneModal } from '@/components/edit/pane/AiRestylePaneModal';
-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, isAiRestyleModalOpen } = useStore(
-    selectionStore,
-    {
-      keys: ['isRestyleModalOpen', 'isAiRestyleModalOpen'],
-    }
-  );
-  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[]>([
-    ...ctx.getChildNodeIDs(props.nodeId),
-  ]);
-  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]);
-
-  const handleRestyleClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    selectionStore.setKey('paneToRestyleId', props.nodeId);
-    selectionStore.setKey('isRestyleModalOpen', true);
-  };
-
-  const handleAiRestyleClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    selectionStore.setKey('paneToRestyleId', props.nodeId);
-    selectionStore.setKey('isAiRestyleModalOpen', true);
-  };
-
-  const handleSaveClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsSaveModalOpen(true);
-  };
-
-  const handleCopyToClipboard = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    const success = await copyPaneToClipboard(props.nodeId);
-    if (success) {
-      setWasCopied(true);
-      setTimeout(() => setWasCopied(false), 2000);
-    }
-  };
-
-  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="Re-Color"
-        onClick={handleAiRestyleClick}
-        className="flex h-10 w-10 items-center justify-center rounded-full bg-purple-600 p-1.5 shadow-lg hover:bg-purple-700"
-      >
-        <SparklesIcon className="h-5 w-5 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={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)}`}
-            >
-              <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();
-              }}
-            >
-              <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>
-        ) : 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
-          paneId={props.nodeId}
-          onClose={() => setIsSaveModalOpen(false)}
-        />
-      )}
-
-      {isRestyleModalOpen && <RestylePaneModal />}
-      {isAiRestyleModalOpen && (
-        <AiRestylePaneModal isSandboxMode={props.isSandboxMode} />
-      )}
-    </div>
-  );
-};

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

@@ -1,186 +0,0 @@
-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';
-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 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 = {
-    ...ctx.getNodeCSSPropertiesStyles(props.nodeId),
-    gridArea: '1/1/1/1',
-    position: 'relative',
-    zIndex: 1,
-  };
-  const codeHookPayload = ctx.getNodeCodeHookPayload(props.nodeId);
-  const [children, setChildren] = useState<string[]>([
-    ...ctx.getChildNodeIDs(props.nodeId),
-  ]);
-  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]);
-
-  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={ctx.getNodeSlug(props.nodeId)}
-        className={useFlexLayout ? '' : wrapperClasses}
-      >
-        {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) => {
-              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
-            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>
-  );
-};

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

@@ -1,79 +0,0 @@
-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();
-          }}
-        >
-          {!props.isSandboxMode && (
-            <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/tagElements/NodeA_eraser.tsx

@@ -1,26 +0,0 @@
-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/NodeBasicTag_eraser.tsx

@@ -1,61 +0,0 @@
-import { type JSX, type MouseEvent, type KeyboardEvent } from 'react';
-import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
-import { getCtx } from '@/stores/nodes';
-import { viewportKeyStore } from '@/stores/storykeep';
-import { RenderChildren } from '../RenderChildren';
-import { tagTitles } from '@/types/compositorTypes';
-import type { NodeProps } from '@/types/nodeProps';
-
-type NodeTagProps = NodeProps & { tagName: keyof JSX.IntrinsicElements };
-
-export const NodeBasicTagEraser = (props: NodeTagProps) => {
-  const nodeId = props.nodeId;
-  const children = getCtx(props).getChildNodeIDs(props.nodeId);
-
-  const Tag = props.tagName;
-  const tagTitle =
-    tagTitles[props.tagName as keyof typeof tagTitles] || props.tagName;
-
-  const handleClick = (e: MouseEvent) => {
-    e.stopPropagation();
-    getCtx(props).setClickedNodeId(nodeId);
-  };
-
-  const EraserUI = () => (
-    <div
-      className={`pointer-events-none absolute left-2 top-2 z-50 flex items-center gap-2 transition-opacity`}
-    >
-      <div className="rounded-full bg-gray-200 px-2 py-1 text-sm text-gray-800">
-        {tagTitle}
-      </div>
-      <div className="flex items-center gap-1 rounded bg-white px-2 py-1 text-sm text-red-700 shadow-sm transition-colors group-focus-within:bg-red-700 group-focus-within:text-white group-hover:bg-red-700 group-hover:text-white">
-        <TrashIcon className="h-4 w-4" />
-      </div>
-    </div>
-  );
-
-  return (
-    <div
-      className="group relative cursor-pointer"
-      onClick={handleClick}
-      role="button"
-      tabIndex={0}
-      onKeyDown={(e: KeyboardEvent) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          handleClick(e as unknown as MouseEvent);
-        }
-      }}
-    >
-      <div className="absolute inset-0">
-        <div className="h-full w-full opacity-50 mix-blend-difference outline-dashed outline-4 outline-red-700 group-focus-within:opacity-100 group-hover:opacity-100" />
-      </div>
-      <EraserUI />
-      <Tag
-        className={`${getCtx(props).getNodeClasses(nodeId, viewportKeyStore.get().value)} pt-12`}
-      >
-        <RenderChildren children={children} nodeProps={props} />
-      </Tag>
-    </div>
-  );
-};