astro-tractstack 2.0.19 → 2.0.21

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