astro-tractstack 2.0.0-rc.0

package/templates/src/components/compositor/preview/PanesPreviewGenerator.tsx

@@ -0,0 +1,123 @@
+import { useEffect, useState } from 'react';
+import { transformLivePaneForPreview } from '@/utils/etl';
+import type { NodesContext } from '@/stores/nodes';
+
+export interface PanePreviewRequest {
+  id: string;
+  ctx: NodesContext;
+}
+
+export interface PaneFragmentResult {
+  id: string;
+  htmlString: string;
+  error?: string;
+}
+
+export interface PanesPreviewGeneratorProps {
+  requests: PanePreviewRequest[];
+  onComplete: (results: PaneFragmentResult[]) => void;
+  onError?: (error: string) => void;
+}
+
+export const PanesPreviewGenerator = ({
+  requests,
+  onComplete,
+  onError,
+}: PanesPreviewGeneratorProps) => {
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  useEffect(() => {
+    if (requests.length === 0) return;
+    if (isGenerating) return;
+
+    const generateFragments = async () => {
+      setIsGenerating(true);
+
+      try {
+        const previewPayloads = [];
+        const requestMap = new Map<string, string>();
+
+        for (const request of requests) {
+          const rootNodeId = request.ctx.rootNodeId.get();
+
+          let actualPaneId = rootNodeId;
+          const rootNode = request.ctx.allNodes.get().get(rootNodeId);
+
+          if (rootNode?.nodeType === 'StoryFragment') {
+            const allNodes = Array.from(request.ctx.allNodes.get().values());
+            const childPanes = allNodes.filter(
+              (node) => node.nodeType === 'Pane' && node.parentId === rootNodeId
+            );
+
+            if (childPanes.length > 0) {
+              actualPaneId = childPanes[0].id;
+            } else {
+              throw new Error(
+                `No Pane found under StoryFragment ${rootNodeId}`
+              );
+            }
+          }
+
+          const previewPayload = transformLivePaneForPreview(
+            request.ctx,
+            actualPaneId
+          );
+
+          previewPayloads.push(previewPayload);
+          requestMap.set(previewPayload.id, request.id);
+        }
+
+        const goBackend =
+          import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+        const response = await fetch(`${goBackend}/api/v1/fragments/preview`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-Tenant-ID': import.meta.env.PUBLIC_TENANTID || 'default',
+          },
+          body: JSON.stringify({ panes: previewPayloads }),
+        });
+
+        if (!response.ok) {
+          throw new Error(`Preview API failed: ${response.status}`);
+        }
+
+        const { fragments, errors } = await response.json();
+
+        const results: PaneFragmentResult[] = [];
+
+        for (const [paneId, requestId] of requestMap.entries()) {
+          if (fragments[paneId]) {
+            results.push({
+              id: requestId,
+              htmlString: fragments[paneId],
+            });
+          } else if (errors && errors[paneId]) {
+            results.push({
+              id: requestId,
+              htmlString: '',
+              error: errors[paneId],
+            });
+          } else {
+            results.push({
+              id: requestId,
+              htmlString: '',
+              error: 'No fragment returned',
+            });
+          }
+        }
+
+        onComplete(results);
+      } catch (error) {
+        console.error('Batch fragment generation failed:', error);
+        onError?.(error instanceof Error ? error.message : 'Unknown error');
+      } finally {
+        setIsGenerating(false);
+      }
+    };
+
+    generateFragments();
+  }, [requests, isGenerating, onComplete, onError]);
+
+  return null;
+};

package/templates/src/components/compositor/preview/VisualBreakPreview.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useState } from 'react';
+import { NodesContext } from '@/stores/nodes';
+import { createEmptyStorykeep } from '@/utils/compositor/nodesHelper';
+import { getTemplateVisualBreakPane } from '@/utils/compositor/TemplatePanes';
+import {
+  PanesPreviewGenerator,
+  type PanePreviewRequest,
+  type PaneFragmentResult,
+} from '@/components/compositor/preview/PanesPreviewGenerator';
+import {
+  PaneSnapshotGenerator,
+  type SnapshotData,
+} from '@/components/compositor/preview/PaneSnapshotGenerator';
+
+interface VisualBreakPreviewProps {
+  bgColour: string;
+  fillColour: string;
+  variant?: string; // Optional variant name for the visual break
+  height?: number; // Optional height for the container
+}
+
+// The state is managed as a single object since this component only ever handles one preview at a time.
+// This is slightly simpler than managing an array with a single item.
+type PreviewState = {
+  htmlFragment?: string;
+  snapshot?: SnapshotData;
+  error?: string;
+};
+
+/**
+ * Renders a preview of a single visual break variant.
+ *
+ * This component uses a modern two-step process for efficiency:
+ * 1. It uses PanesPreviewGenerator to fetch an HTML fragment of the break.
+ * 2. It then uses PaneSnapshotGenerator to convert that HTML into an image snapshot.
+ */
+export const VisualBreakPreview = ({
+  bgColour,
+  fillColour,
+  variant = 'cutwide2', // Default to cutwide2 as it's a commonly used break
+  height = 120, // Default height that works well for most breaks
+}: VisualBreakPreviewProps) => {
+  const [previewState, setPreviewState] = useState<PreviewState | null>(null);
+  const [fragmentRequest, setFragmentRequest] = useState<PanePreviewRequest[]>(
+    []
+  );
+
+  useEffect(() => {
+    // Reset state whenever the props change to trigger a full regeneration
+    setPreviewState(null);
+
+    // STEP 1: Create a temporary NodesContext for the preview.
+    const ctx = new NodesContext();
+    ctx.addNode(createEmptyStorykeep('tmp')); // Add root node
+
+    // Get the template for the specified variant and apply the dynamic colours
+    const template = getTemplateVisualBreakPane(variant);
+    if (template) {
+      if (template.bgColour) template.bgColour = bgColour;
+      if (template.bgPane && template.bgPane.type === 'visual-break') {
+        if (template.bgPane.breakDesktop) {
+          template.bgPane.breakDesktop.svgFill = fillColour;
+        }
+        if (template.bgPane.breakTablet) {
+          template.bgPane.breakTablet.svgFill = fillColour;
+        }
+        if (template.bgPane.breakMobile) {
+          template.bgPane.breakMobile.svgFill = fillColour;
+        }
+      }
+      ctx.addTemplatePane('tmp', template); // Add the template to the context
+    }
+
+    // Prepare a request for the PanesPreviewGenerator to get the HTML.
+    setFragmentRequest([{ id: 'visual-break-preview', ctx }]);
+  }, [variant, bgColour, fillColour]);
+
+  // Handler for when the HTML fragment has been generated
+  const handleFragmentComplete = (results: PaneFragmentResult[]) => {
+    const result = results[0];
+    if (result?.htmlString) {
+      setPreviewState({ htmlFragment: result.htmlString });
+    } else {
+      setPreviewState({
+        error: result?.error || 'Failed to generate HTML fragment.',
+      });
+    }
+    setFragmentRequest([]); // Clear the request to prevent re-fetching
+  };
+
+  // Handler for when the image snapshot has been generated from the HTML.
+  // The 'id' parameter is unused here as we only manage one snapshot at a time.
+  const handleSnapshotComplete = (data: SnapshotData) => {
+    setPreviewState((prev) => (prev ? { ...prev, snapshot: data } : null));
+  };
+
+  // Display a pulsing placeholder while the process is running
+  if (!previewState) {
+    return <div className="my-4 h-12 animate-pulse bg-gray-200" />;
+  }
+
+  // Display an error message if something went wrong
+  if (previewState.error) {
+    return (
+      <div className="flex items-center justify-center rounded-md border border-red-200 bg-red-50 p-4 text-sm text-red-700">
+        Preview could not be generated: {previewState.error}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="relative w-full overflow-hidden"
+      style={!previewState.snapshot ? { height: `${height}px` } : undefined}
+    >
+      {/* STEP 2: Render the generator to fetch the HTML fragment. This component renders nothing itself. */}
+      {fragmentRequest.length > 0 && (
+        <PanesPreviewGenerator
+          requests={fragmentRequest}
+          onComplete={handleFragmentComplete}
+          onError={(err) => setPreviewState({ error: err })}
+        />
+      )}
+
+      {/* STEP 3: Once HTML is available, render the snapshot generator to create the image. This component also renders nothing. */}
+      {previewState.htmlFragment && !previewState.snapshot && (
+        <PaneSnapshotGenerator
+          id="visual-break-snapshot"
+          htmlString={previewState.htmlFragment}
+          outputWidth={800} // Matches the original output width
+          onComplete={(_id, data) => handleSnapshotComplete(data)}
+          onError={(_id, err) =>
+            setPreviewState((prev) =>
+              prev ? { ...prev, error: err } : { error: err }
+            )
+          }
+        />
+      )}
+
+      {/* STEP 4: Once the snapshot is complete, display the final image. */}
+      {previewState.snapshot && (
+        <div className="w-full">
+          <img
+            src={previewState.snapshot.imageData}
+            alt={`Visual break ${variant}`}
+            className="w-full"
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default VisualBreakPreview;

package/templates/src/components/edit/Header.tsx

@@ -0,0 +1,181 @@
+import { useState, useEffect } from 'react';
+import { useStore } from '@nanostores/react';
+import { navigate } from 'astro:transitions/client';
+import ArrowUturnLeftIcon from '@heroicons/react/24/outline/ArrowUturnLeftIcon';
+import ArrowUturnRightIcon from '@heroicons/react/24/outline/ArrowUturnRightIcon';
+import ViewfinderCircleIcon from '@heroicons/react/24/outline/ViewfinderCircleIcon';
+import DevicePhoneMobileIcon from '@heroicons/react/24/outline/DevicePhoneMobileIcon';
+import DeviceTabletIcon from '@heroicons/react/24/outline/DeviceTabletIcon';
+import ComputerDesktopIcon from '@heroicons/react/24/outline/ComputerDesktopIcon';
+import GlobeAltIcon from '@heroicons/react/24/outline/GlobeAltIcon';
+import ExclamationTriangleIcon from '@heroicons/react/24/outline/ExclamationTriangleIcon';
+import {
+  viewportModeStore,
+  setViewportMode,
+  settingsPanelStore,
+} from '@/stores/storykeep';
+import { getCtx, ROOT_NODE_NAME } from '@/stores/nodes';
+import SaveModal from '@/components/edit/state/SaveModal';
+
+interface StoryKeepHeaderProps {
+  slug: string;
+  isContext: boolean;
+}
+
+const StoryKeepHeader = ({ slug, isContext = false }: StoryKeepHeaderProps) => {
+  const viewport = useStore(viewportModeStore);
+  const ctx = getCtx();
+  const hasTitle = useStore(ctx.hasTitle);
+  const hasPanes = useStore(ctx.hasPanes);
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const [showSaveModal, setShowSaveModal] = useState(false);
+
+  useEffect(() => {
+    const updateUndoRedo = () => {
+      setCanUndo(ctx.history.canUndo());
+      setCanRedo(ctx.history.canRedo());
+    };
+    ctx.history.headIndex.listen(updateUndoRedo);
+    ctx.history.history.listen(updateUndoRedo);
+  }, [ctx.history]);
+
+  const handleSave = () => {
+    setShowSaveModal(true);
+  };
+
+  const handleCloseSaveModal = () => {
+    setShowSaveModal(false);
+  };
+
+  const handleUndo = () => {
+    settingsPanelStore.set(null);
+    ctx.history.undo();
+    ctx.notifyNode(ROOT_NODE_NAME);
+  };
+
+  const handleRedo = () => {
+    settingsPanelStore.set(null);
+    ctx.history.redo();
+    ctx.notifyNode(ROOT_NODE_NAME);
+  };
+
+  const handleVisitPage = () => {
+    if (canUndo) {
+      if (
+        confirm(
+          'You have unsaved changes. Do you want to visit the page anyway?'
+        )
+      ) {
+        const previewUrl = !isContext ? `/${slug}` : `/context/${slug}`;
+        navigate(previewUrl);
+      }
+    } else {
+      const previewUrl = !isContext ? `/${slug}` : `/context/${slug}`;
+      navigate(previewUrl);
+    }
+  };
+
+  const activeIconClassName =
+    '-rotate-2 w-8 h-8 text-white rounded bg-myblue p-1';
+  const iconClassName =
+    'w-8 h-8 text-myblue hover:text-myblue hover:bg-gray-200 rounded-xl hover:rounded bg-white p-1 cursor-pointer transition-all';
+
+  // Viewport options and their corresponding icons
+  const viewportOptions = [
+    { value: 'auto', Icon: ViewfinderCircleIcon, title: 'Auto Viewport' },
+    { value: 'mobile', Icon: DevicePhoneMobileIcon, title: 'Mobile Viewport' },
+    { value: 'tablet', Icon: DeviceTabletIcon, title: 'Tablet Viewport' },
+    { value: 'desktop', Icon: ComputerDesktopIcon, title: 'Desktop Viewport' },
+  ];
+
+  if (!hasTitle && !hasPanes) return null;
+
+  return (
+    <>
+      <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 p-2">
+        {/* Viewport Section with stacked label */}
+        <div className="flex flex-col items-center">
+          <span className="text-xs font-medium text-gray-600">Viewport:</span>
+          <span className="text-xs text-gray-700">{viewport}</span>
+        </div>
+
+        <div className="flex flex-wrap items-center justify-center gap-1">
+          {viewportOptions.map(({ value, Icon, title }) => (
+            <button
+              key={value}
+              onClick={() =>
+                setViewportMode(
+                  value as 'auto' | 'mobile' | 'tablet' | 'desktop'
+                )
+              }
+              title={title}
+              className={
+                viewport === value ? activeIconClassName : iconClassName
+              }
+            >
+              <Icon />
+            </button>
+          ))}
+        </div>
+
+        {/* Visit Page Icon */}
+        <div className="relative">
+          <button
+            onClick={handleVisitPage}
+            title="Visit Page"
+            className={`${iconClassName} relative`}
+          >
+            <GlobeAltIcon />
+            {canUndo && (
+              <ExclamationTriangleIcon className="absolute -right-1 -top-1 h-3 w-3 rounded-full bg-white text-amber-500" />
+            )}
+          </button>
+        </div>
+
+        {(canUndo || canRedo) && (
+          <div className="flex flex-wrap items-center justify-center gap-2">
+            <ArrowUturnLeftIcon
+              title="Undo"
+              style={{
+                visibility: canUndo ? 'visible' : 'hidden',
+                display: canUndo ? 'block' : 'none',
+              }}
+              className={iconClassName}
+              onClick={handleUndo}
+            />
+            <ArrowUturnRightIcon
+              title="Redo"
+              style={{
+                visibility: canRedo ? 'visible' : 'hidden',
+                display: canRedo ? 'block' : 'none',
+              }}
+              className={iconClassName}
+              onClick={handleRedo}
+            />
+          </div>
+        )}
+
+        {canUndo && (
+          <div className="flex flex-wrap items-center justify-center gap-2 text-sm">
+            <button
+              onClick={handleSave}
+              className="bg-myblue font-action hover:bg-myorange rounded-md px-3.5 py-1.5 font-bold text-white"
+            >
+              Save
+            </button>
+          </div>
+        )}
+      </div>
+
+      <SaveModal
+        slug={slug}
+        isContext={isContext}
+        show={showSaveModal}
+        onClose={handleCloseSaveModal}
+      />
+    </>
+  );
+};
+
+export default StoryKeepHeader;