astro-tractstack 2.0.19 → 2.0.21

package/templates/src/utils/helpers.ts

@@ -291,14 +291,15 @@ export function titleToSlug(title: string, maxLength: number = 50): string {
 }
 
 export function findUniqueSlug(slug: string, existingSlugs: string[]): string {
-  if (!existingSlugs.includes(slug)) {
-    return slug;
+  const tempSlug = slug || `story`;
+  if (!existingSlugs.includes(tempSlug)) {
+    return tempSlug;
   }
   let counter = 1;
-  let newSlug = `${slug}-${counter}`;
+  let newSlug = `${tempSlug}-${counter}`;
   while (existingSlugs.includes(newSlug)) {
     counter++;
-    newSlug = `${slug}-${counter}`;
+    newSlug = `${tempSlug}-${counter}`;
   }
   return newSlug;
 }

package/utils/inject-files.ts

@@ -453,6 +453,12 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/components/edit/pane/AddPanePanel.tsx'),
       dest: 'src/components/edit/pane/AddPanePanel.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/edit/pane/AddPanePanel_paste.tsx'
+      ),
+      dest: 'src/components/edit/pane/AddPanePanel_paste.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/edit/pane/AddPanePanel_break.tsx'
@@ -549,22 +555,6 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/edit/context/ContextPaneConfig_slug.tsx',
     },
-    {
-      src: resolve('../templates/src/components/edit/pane/PageGenSelector.tsx'),
-      dest: 'src/components/edit/pane/PageGenSelector.tsx',
-    },
-    {
-      src: resolve('../templates/src/components/edit/pane/PageGenSpecial.tsx'),
-      dest: 'src/components/edit/pane/PageGenSpecial.tsx',
-    },
-    {
-      src: resolve('../templates/src/components/edit/pane/PageGen.tsx'),
-      dest: 'src/components/edit/pane/PageGen.tsx',
-    },
-    {
-      src: resolve('../templates/src/components/edit/pane/PageGen_preview.tsx'),
-      dest: 'src/components/edit/pane/PageGen_preview.tsx',
-    },
     // Compositor previews
     {
       src: resolve(
@@ -584,12 +574,6 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/compositor/preview/OgImagePreview.tsx',
     },
-    {
-      src: resolve(
-        '../templates/src/components/compositor/preview/VisualBreakPreview.tsx'
-      ),
-      dest: 'src/components/compositor/preview/VisualBreakPreview.tsx',
-    },
     {
       src: resolve(
         '../templates/src/components/compositor/preview/ListContentPreview.tsx'
@@ -653,16 +637,6 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/utils/compositor/aiPaneParser.ts'),
       dest: 'src/utils/compositor/aiPaneParser.ts',
     },
-    {
-      src: resolve('../templates/src/utils/compositor/processMarkdown.ts'),
-      dest: 'src/utils/compositor/processMarkdown.ts',
-    },
-    {
-      src: resolve(
-        '../templates/src/utils/compositor/templateMarkdownStyles.ts'
-      ),
-      dest: 'src/utils/compositor/templateMarkdownStyles.ts',
-    },
     {
       src: resolve(
         '../templates/src/utils/compositor/nodesMarkdownGenerator.ts'

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

@@ -1,154 +0,0 @@
-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;