astro-tractstack 2.0.19 → 2.0.20

package/templates/src/components/fields/BackgroundImageWrapper.tsx

@@ -8,7 +8,6 @@ import ColorPickerCombo from './ColorPickerCombo';
 import { getCtx } from '@/stores/nodes';
 import { hasArtpacksStore, settingsPanelStore } from '@/stores/storykeep';
 import { cloneDeep } from '@/utils/helpers';
-import type { BrandConfig } from '@/types/tractstack';
 import type {
   BgImageNode,
   ArtpackImageNode,
@@ -18,7 +17,6 @@ import { isArtpackImageNode } from '@/utils/compositor/typeGuards';
 
 export interface BackgroundImageWrapperProps {
   paneId: string;
-  config?: BrandConfig;
 }
 
 const CheckIcon = () => (
@@ -51,10 +49,7 @@ const ChevronDownIcon = () => (
   </svg>
 );
 
-const BackgroundImageWrapper = ({
-  paneId,
-  config,
-}: BackgroundImageWrapperProps) => {
+const BackgroundImageWrapper = ({ paneId }: BackgroundImageWrapperProps) => {
   const ctx = getCtx();
   const allNodes = useStore(ctx.allNodes);
   const $artpacks = useStore(hasArtpacksStore);
@@ -165,7 +160,6 @@ const BackgroundImageWrapper = ({
         title="Pane Background Color"
         defaultColor={(allNodes.get(paneId) as PaneNode)?.bgColour || ''}
         onColorChange={handleColorChange}
-        config={config!}
         allowNull={true}
       />
       {!bgNode && (

package/templates/src/components/fields/ColorPickerCombo.tsx

@@ -12,12 +12,11 @@ import {
   findClosestTailwindColor,
   getComputedColor,
 } from '@/utils/compositor/tailwindColors';
+import { brandConfigStore } from '@/stores/storykeep';
 import { debounce, useDropdownDirection } from '@/utils/helpers';
-import type { BrandConfig } from '@/types/tractstack';
 
 export interface ColorPickerProps {
   title: string;
-  config: BrandConfig;
   defaultColor: string;
   onColorChange: (color: string) => void;
   skipTailwind?: boolean;
@@ -28,14 +27,14 @@ const ColorPickerCombo = ({
   title,
   defaultColor,
   onColorChange,
-  config,
   skipTailwind = false,
   allowNull = false,
 }: ColorPickerProps) => {
+  const brandColors = brandConfigStore.get()?.BRAND_COLOURS || '';
   const [hexColor, setHexColor] = useState(defaultColor);
   const initialTailwindColor = skipTailwind
     ? ''
-    : hexToTailwind(defaultColor, config.BRAND_COLOURS) || '';
+    : hexToTailwind(defaultColor, brandColors) || '';
   const [selectedTailwindColor, setSelectedTailwindColor] =
     useState(initialTailwindColor);
   const [query, setQuery] = useState('');
@@ -79,10 +78,7 @@ const ColorPickerCombo = ({
       setHexColor(computedColor);
 
       if (!skipTailwind) {
-        const exactTailwindColor = hexToTailwind(
-          computedColor,
-          config.BRAND_COLOURS
-        );
+        const exactTailwindColor = hexToTailwind(computedColor, brandColors);
         if (exactTailwindColor) {
           setSelectedTailwindColor(exactTailwindColor);
           setQuery('');
@@ -101,7 +97,7 @@ const ColorPickerCombo = ({
 
       onColorChange(computedColor);
     }, 16),
-    [onColorChange, skipTailwind, config.BRAND_COLOURS]
+    [onColorChange, skipTailwind, brandColors]
   );
 
   // Handle Tailwind color selection
@@ -114,12 +110,12 @@ const ColorPickerCombo = ({
       setQuery(''); // Clear query after selection
 
       const newHexColor = getComputedColor(
-        tailwindToHex(`bg-${newTailwindColor}`, config.BRAND_COLOURS || null)
+        tailwindToHex(`bg-${newTailwindColor}`, brandColors || null)
       );
       setHexColor(newHexColor);
       onColorChange(newHexColor);
     },
-    [onColorChange, config, skipTailwind]
+    [onColorChange, brandColors, skipTailwind]
   );
 
   // New function to handle color removal
@@ -259,7 +255,7 @@ const ColorPickerCombo = ({
                               style={{
                                 backgroundColor: tailwindToHex(
                                   `bg-${color}`,
-                                  config.BRAND_COLOURS || null
+                                  brandColors
                                 ),
                               }}
                             />

package/templates/src/components/fields/ViewportComboBox.tsx

@@ -13,9 +13,8 @@ import DevicePhoneMobileIcon from '@heroicons/react/24/outline/DevicePhoneMobile
 import DeviceTabletIcon from '@heroicons/react/24/outline/DeviceTabletIcon';
 import ComputerDesktopIcon from '@heroicons/react/24/outline/ComputerDesktopIcon';
 import { classNames } from '@/utils/helpers';
-import { settingsPanelStore } from '@/stores/storykeep';
+import { brandConfigStore, settingsPanelStore } from '@/stores/storykeep';
 import { tailwindToHex, colorValues } from '@/utils/compositor/tailwindColors';
-import type { BrandConfig } from '@/types/tractstack';
 
 interface ViewportComboBoxProps {
   value: string;
@@ -29,7 +28,6 @@ interface ViewportComboBoxProps {
   allowNegative?: boolean;
   isNegative?: boolean;
   isInferred?: boolean;
-  config: BrandConfig;
 }
 
 const ViewportComboBox = ({
@@ -40,8 +38,8 @@ const ViewportComboBox = ({
   allowNegative = false,
   isNegative = false,
   isInferred = false,
-  config,
 }: ViewportComboBoxProps) => {
+  const brandColors = brandConfigStore.get()?.BRAND_COLOURS || '';
   const [internalValue, setInternalValue] = useState(value);
   const [query, setQuery] = useState('');
   const [isNowNegative, setIsNowNegative] = useState(isNegative);
@@ -174,7 +172,7 @@ const ViewportComboBox = ({
                       style={{
                         backgroundColor: tailwindToHex(
                           internalValue,
-                          config.BRAND_COLOURS || null
+                          brandColors
                         ),
                       }}
                     />
@@ -218,7 +216,7 @@ const ViewportComboBox = ({
                                 style={{
                                   backgroundColor: tailwindToHex(
                                     item,
-                                    config.BRAND_COLOURS || null
+                                    brandColors
                                   ),
                                 }}
                               />

package/templates/src/stores/nodes.ts

@@ -103,7 +103,6 @@ export class NodesContext {
   toolAddModeStore = map<{ value: ToolAddMode }>({
     value: 'p',
   });
-  showGuids = atom<boolean>(false);
 
   /**
    * Sets an edit lock on a specific node to prevent re-renders during editing
@@ -1784,10 +1783,15 @@ export class NodesContext {
       ownerId
     );
 
-    // Remove bgPane from the pane object if it exists, as it's now a separate node
     if (duplicatedPane.bgPane) {
       delete duplicatedPane.bgPane;
     }
+    if (duplicatedPane.markdown) {
+      delete duplicatedPane.markdown;
+    }
+    if (duplicatedPane.gridLayout) {
+      delete duplicatedPane.gridLayout;
+    }
 
     this.addNode(duplicatedPane as PaneNode);
     this.addNodes(allNodes);
@@ -1837,11 +1841,15 @@ export class NodesContext {
       duplicatedPaneId
     );
 
-    // Remove bgPane from the pane object if it exists, as it's now a separate node
-    // This preserves the original logic
     if (duplicatedPane.bgPane) {
       delete duplicatedPane.bgPane;
     }
+    if (duplicatedPane.markdown) {
+      delete duplicatedPane.markdown;
+    }
+    if (duplicatedPane.gridLayout) {
+      delete duplicatedPane.gridLayout;
+    }
 
     const storyFragmentNode = ownerNode as StoryFragmentNode;
     let specificIdx = -1;
@@ -2009,7 +2017,7 @@ export class NodesContext {
 
     let autoCreatedMarkdownNode: MarkdownPaneFragmentNode | null = null;
 
-    console.log(`--- [TRAP - TEMPLATE BEFORE] ---`, cloneDeep(node));
+    //console.log(`--- [TRAP - TEMPLATE BEFORE] ---`, cloneDeep(node));
     // 3. HANDLE EMPTY PANE BY AUTO-CREATING A MARKDOWN NODE
     if (targetNode.nodeType === 'Pane') {
       // Create a minimal markdown node to act as the container
@@ -2087,7 +2095,7 @@ export class NodesContext {
       );
     }
 
-    console.log(`--- [TRAP - FLATTENED AFTER] ---`, cloneDeep(flattenedNodes));
+    //console.log(`--- [TRAP - FLATTENED AFTER] ---`, cloneDeep(flattenedNodes));
 
     // 5. PERFORM REMAINING STATE MUTATIONS
     if (originalPaneNode) {

package/templates/src/stores/storykeep.ts

@@ -6,6 +6,7 @@ import type {
   FullContentMapItem,
   Theme,
   ArtpacksStore,
+  BrandConfig,
 } from '@/types/tractstack';
 import type { SettingsPanelSignal, ViewportKey } from '@/types/compositorTypes';
 import type {
@@ -21,9 +22,6 @@ export const fullContentMapStore = atom<FullContentMapItem[]>([]);
 export const hasArtpacksStore = map<ArtpacksStore>({});
 export const urlParamsStore = atom<Record<string, string | boolean>>({});
 export const canonicalURLStore = atom<string>('');
-export const brandColourStore = atom<string>(
-  '10120d,fcfcfc,f58333,c8df8c,293f58,a7b1b7,393d34,e3e3e3'
-);
 export const preferredThemeStore = atom<Theme>('light');
 
 export const hasAssemblyAIStore = atom<boolean>(false);
@@ -156,6 +154,8 @@ export const resetStoryKeepState = () => {
   canRedoStore.set(false);
 };
 
+export const brandConfigStore = atom<BrandConfig | null>(null);
+
 export const settingsPanelStore = atom<SettingsPanelSignal | null>(null);
 export const stylePanelTargetMemoryStore = atom<Map<string, number>>(
   new Map<string, number>()

package/templates/src/types/compositorTypes.ts

@@ -43,6 +43,7 @@ export enum PaneAddMode {
   BREAK = 'BREAK',
   REUSE = 'REUSE',
   CODEHOOK = 'CODEHOOK',
+  PASTE = 'PASTE',
 }
 
 export enum PaneConfigMode {
@@ -478,6 +479,7 @@ export type StorageGridLayoutNode = {
     tablet: number;
     desktop: number;
   };
+  nodes?: StorageMarkdown[];
 };
 
 export type StoragePane = Omit<

package/templates/src/utils/compositor/TemplatePanes.ts

@@ -1,13 +1,4 @@
-import {
-  //TemplateAsideNode,
-  TemplateH2Node,
-  TemplateH3Node,
-  TemplatePNode,
-} from './TemplateNodes';
-import { getTemplateSimpleMarkdown } from './TemplateMarkdowns';
-import { getColor, tailwindToHex } from './tailwindColors';
 import type { TemplatePane } from '@/types/compositorTypes';
-import type { Theme } from '@/types/tractstack';
 
 export const getTemplateVisualBreakPane = (variant: string) => {
   // colour will be set on insert based on adjacent nodes
@@ -31,70 +22,3 @@ export const getTemplateVisualBreakPane = (variant: string) => {
     },
   } as TemplatePane;
 };
-
-export const getTemplateSimplePane = (
-  theme: Theme,
-  brand: string,
-  useOdd: boolean = false
-) => {
-  return {
-    nodeType: 'Pane',
-    title: '',
-    slug: '',
-    bgColour: tailwindToHex(
-      getColor(
-        {
-          light: !useOdd ? 'brand-2' : 'white',
-          'light-bw': !useOdd ? 'white' : 'brand-2',
-          'light-bold': !useOdd ? 'brand-2' : 'white',
-          dark: !useOdd ? 'black' : 'brand-1',
-          'dark-bw': !useOdd ? 'black' : 'brand-1',
-          'dark-bold': !useOdd ? 'brand-1' : 'black',
-        },
-        theme
-      ),
-      brand
-    ),
-    markdown: {
-      ...getTemplateSimpleMarkdown(theme),
-      nodes: [
-        { ...TemplateH2Node, copy: 'H2 node in simple pane' },
-        { ...TemplatePNode, copy: 'P node in simple pane' },
-        { ...TemplateH3Node, copy: 'H3 node in simple pane' },
-        //{ ...TemplateAsideNode, copy: "Aside node in simple pane" },
-      ],
-    },
-  } as TemplatePane;
-};
-
-export const getTemplateMarkdownPane = (
-  theme: Theme,
-  variant: string,
-  brand: string,
-  useOdd: boolean = false
-) => {
-  console.log(`variant: ${variant}`);
-  return {
-    nodeType: 'Pane',
-    title: '',
-    slug: '',
-    bgColour: tailwindToHex(
-      getColor(
-        {
-          light: !useOdd ? 'brand-2' : 'white',
-          'light-bw': !useOdd ? 'white' : 'brand-2',
-          'light-bold': !useOdd ? 'brand-2' : 'white',
-          dark: !useOdd ? 'black' : 'brand-1',
-          'dark-bw': !useOdd ? 'black' : 'brand-1',
-          'dark-bold': !useOdd ? 'brand-1' : 'black',
-        },
-        theme
-      ),
-      brand
-    ),
-    markdown: {
-      ...getTemplateSimpleMarkdown(theme),
-      markdownBody: `## add a catchy title here\n\nyour story continues... and continues... and continues... and continues... and continues... and continues... with nice layout and typography.\n\n[Try it now!](try)   [Learn more](learn)\n`,
-    },
-  } as TemplatePane;
-};

package/templates/src/utils/compositor/aiPaneParser.ts

@@ -642,7 +642,7 @@ export const parseAiPane = (
 ): Omit<TemplatePane, 'nodes'> & {
   nodes?: (TemplateMarkdown | GridLayoutNode)[];
 } => {
-  console.log('--- ENTERING parseAiPane ---', { shellJson, copyHtml, layout });
+  //console.log('--- ENTERING parseAiPane ---', { shellJson, copyHtml, layout });
 
   const shell: ShellJson = JSON.parse(shellJson);
   const paneId = ulid();
@@ -697,6 +697,7 @@ export const parseAiPane = (
       isDecorative: false,
       gridLayout: gridLayoutNode,
     };
+    /*
     console.log({
       shellDefaults: shellDefaults,
       transformedParentClasses: transformedParentClasses,
@@ -704,6 +705,7 @@ export const parseAiPane = (
       gridLayoutNode: gridLayoutNode,
       templatePane: templatePane,
     });
+    */
     return templatePane;
   }
 

package/templates/src/utils/compositor/designLibraryHelper.ts

@@ -1,19 +1,21 @@
 import { ulid } from 'ulid';
 import { getCtx, type NodesContext } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import {
-  type PaneNode,
-  type FlatNode,
-  type MarkdownPaneFragmentNode,
-  type StoragePane,
-  type StorageNode,
-  type StorageMarkdown,
-  type StorageBgPane,
-  type ArtpackImageNode,
-  type BgImageNode,
-  type VisualBreakNode,
-  type TemplatePane,
-  type TemplateNode,
+import type {
+  PaneNode,
+  FlatNode,
+  MarkdownPaneFragmentNode,
+  GridLayoutNode,
+  StoragePane,
+  StorageNode,
+  StorageMarkdown,
+  StorageBgPane,
+  StorageGridLayoutNode,
+  ArtpackImageNode,
+  BgImageNode,
+  VisualBreakNode,
+  TemplatePane,
+  TemplateNode,
 } from '@/types/compositorTypes';
 import type {
   BrandConfig,
@@ -108,14 +110,14 @@ export async function savePaneToLibrary(
     category: string;
     copyMode: CopyMode;
   }
-): Promise<boolean> {
+): Promise<BrandConfigState | null> {
   const ctx = getCtx();
   const { title, category, copyMode } = formData;
   const paneNode = ctx.allNodes.get().get(paneId) as PaneNode;
 
   if (!paneNode) {
     console.error('savePaneToLibrary: PaneNode not found.');
-    return false;
+    return null;
   }
 
   const childNodes = ctx
@@ -208,10 +210,10 @@ export async function savePaneToLibrary(
 
   try {
     await saveBrandConfig(tenantId, backendDTO);
-    return true;
+    return updatedState;
   } catch (error) {
     console.error('Failed to save design library:', error);
-    return false;
+    return null;
   }
 }
 
@@ -417,3 +419,224 @@ export function convertTemplateToAIShell(template: TemplatePane): string {
 
   return JSON.stringify(shell, null, 2);
 }
+
+export async function copyPaneToClipboard(paneId: string): Promise<boolean> {
+  const ctx = getCtx();
+  const paneNode = ctx.allNodes.get().get(paneId) as PaneNode;
+
+  const storagePane = convertLivePaneToStoragePane(paneId, ctx, {
+    title: paneNode?.title || 'Pasted Pane',
+    copyMode: 'retain',
+  });
+
+  if (!storagePane) {
+    return false;
+  }
+
+  try {
+    const jsonPayload = JSON.stringify(storagePane, null, 2);
+    await navigator.clipboard.writeText(jsonPayload);
+    return true;
+  } catch (error) {
+    console.error('Failed to copy pane to clipboard:', error);
+    return false;
+  }
+}
+
+function buildIdMap(node: any, map: Map<string, string>) {
+  if (!node || typeof node !== 'object') return;
+
+  if (node.id && !map.has(node.id)) {
+    map.set(node.id, ulid());
+  }
+  // Markdown nodes have a second unique identifier
+  if (node.markdownId && !map.has(node.markdownId)) {
+    map.set(node.markdownId, ulid());
+  }
+
+  // Recursively traverse all possible child arrays/objects
+  if (node.markdowns) {
+    node.markdowns.forEach((n: any) => buildIdMap(n, map));
+  }
+  if (node.gridLayout) {
+    buildIdMap(node.gridLayout, map);
+  }
+  if (node.nodes) {
+    node.nodes.forEach((n: any) => buildIdMap(n, map));
+  }
+  if (node.bgPane) {
+    buildIdMap(node.bgPane, map);
+  }
+}
+
+function applyIdMap(node: any, map: Map<string, string>) {
+  if (!node || typeof node !== 'object') return;
+
+  if (node.id && map.has(node.id)) {
+    node.id = map.get(node.id);
+  }
+  if (node.parentId && map.has(node.parentId)) {
+    node.parentId = map.get(node.parentId);
+  }
+  if (node.markdownId && map.has(node.markdownId)) {
+    node.markdownId = map.get(node.markdownId);
+  }
+
+  // Recursively traverse all possible child arrays/objects
+  if (node.markdowns) {
+    node.markdowns.forEach((n: any) => applyIdMap(n, map));
+  }
+  if (node.gridLayout) {
+    applyIdMap(node.gridLayout, map);
+  }
+  if (node.nodes) {
+    node.nodes.forEach((n: any) => applyIdMap(n, map));
+  }
+  if (node.bgPane) {
+    applyIdMap(node.bgPane, map);
+  }
+}
+
+export function remapPaneIds(pane: StoragePane): StoragePane {
+  const idMap = new Map<string, string>();
+  // The input object may have come from JSON.parse, so we treat it as 'any' internally
+  const clone = JSON.parse(JSON.stringify(pane as any));
+
+  // First pass: Traverse the entire structure to build a complete map of old IDs to new IDs.
+  buildIdMap(clone, idMap);
+
+  // Second pass: Traverse again to apply the new IDs, ensuring parent-child relationships are correct.
+  applyIdMap(clone, idMap);
+
+  return clone as StoragePane;
+}
+
+function convertLivePaneToStoragePane(
+  paneId: string,
+  ctx: NodesContext,
+  options: {
+    title: string;
+    copyMode: CopyMode;
+  }
+): StoragePane | null {
+  const paneNode = ctx.allNodes.get().get(paneId) as PaneNode;
+  if (!paneNode) {
+    console.error('convertLivePaneToStoragePane: PaneNode not found.');
+    return null;
+  }
+
+  const { title, copyMode } = options;
+  const childNodes = ctx
+    .getChildNodeIDs(paneId)
+    .map((id) => ctx.allNodes.get().get(id));
+
+  const markdownNode = childNodes.find((n) => n?.nodeType === 'Markdown') as
+    | MarkdownPaneFragmentNode
+    | undefined;
+
+  const gridLayoutNode = childNodes.find(
+    (n) => n?.nodeType === 'GridLayoutNode'
+  ) as GridLayoutNode | undefined;
+
+  const bgPaneNode = childNodes.find((n) => n?.nodeType === 'BgPane') as
+    | ArtpackImageNode
+    | BgImageNode
+    | VisualBreakNode
+    | undefined;
+
+  let storageMarkdown: StorageMarkdown | undefined;
+  let storageGridLayout: StorageGridLayoutNode | undefined;
+
+  if (markdownNode) {
+    storageMarkdown = {
+      nodeType: 'Markdown',
+      type: 'markdown',
+      defaultClasses: markdownNode.defaultClasses || {},
+      parentClasses: markdownNode.parentClasses || [],
+      nodes:
+        copyMode !== 'blank'
+          ? ctx
+              .getChildNodeIDs(markdownNode.id)
+              .map((childId) => {
+                const childNode = ctx.allNodes.get().get(childId) as FlatNode;
+                return convertLiveNodeToStorageNode(childNode, ctx, copyMode);
+              })
+              .filter((n): n is StorageNode => n !== null)
+          : [],
+    };
+  } else if (gridLayoutNode) {
+    const { id, parentId, isChanged, ...restOfGrid } = gridLayoutNode;
+    storageGridLayout = {
+      ...restOfGrid,
+      nodes: ctx
+        .getChildNodeIDs(gridLayoutNode.id)
+        .map((columnId) => {
+          const columnNode = ctx.allNodes
+            .get()
+            .get(columnId) as MarkdownPaneFragmentNode;
+          if (!columnNode) return null;
+
+          const {
+            id,
+            parentId,
+            isChanged,
+            markdownId,
+            parentCss,
+            ...restOfColumn
+          } = columnNode;
+
+          const storageColumn: StorageMarkdown = {
+            ...restOfColumn,
+            nodeType: 'Markdown',
+            type: 'markdown',
+            nodes:
+              copyMode !== 'blank'
+                ? ctx
+                    .getChildNodeIDs(columnNode.id)
+                    .map((childId) => {
+                      const childNode = ctx.allNodes
+                        .get()
+                        .get(childId) as FlatNode;
+                      return convertLiveNodeToStorageNode(
+                        childNode,
+                        ctx,
+                        copyMode
+                      );
+                    })
+                    .filter((n): n is StorageNode => n !== null)
+                : [],
+          };
+          return storageColumn;
+        })
+        .filter((n): n is StorageMarkdown => n !== null),
+    };
+  }
+
+  const storageBgPane: StorageBgPane | undefined = bgPaneNode
+    ? { ...bgPaneNode }
+    : undefined;
+
+  if (storageBgPane) {
+    delete (storageBgPane as any).id;
+    delete (storageBgPane as any).parentId;
+  }
+
+  const storagePane: StoragePane = {
+    nodeType: 'Pane',
+    title: title,
+    slug: '',
+    bgColour: paneNode.bgColour,
+    isDecorative: paneNode.isDecorative,
+    heightOffsetDesktop: paneNode.heightOffsetDesktop,
+    heightOffsetMobile: paneNode.heightOffsetMobile,
+    heightOffsetTablet: paneNode.heightOffsetTablet,
+    heightRatioDesktop: paneNode.heightRatioDesktop,
+    heightRatioMobile: paneNode.heightRatioMobile,
+    heightRatioTablet: paneNode.heightRatioTablet,
+    ...(storageMarkdown ? { markdowns: [storageMarkdown] } : {}),
+    ...(storageGridLayout ? { gridLayout: storageGridLayout } : {}),
+    ...(storageBgPane ? { bgPane: storageBgPane } : {}),
+  };
+
+  return storagePane;
+}

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;
 }