astro-tractstack 2.0.19 → 2.0.20

package/dist/index.js

@@ -452,6 +452,12 @@ async function w(t, e, c) {
       src: t("../templates/src/components/edit/pane/AddPanePanel.tsx"),
       dest: "src/components/edit/pane/AddPanePanel.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/edit/pane/AddPanePanel_paste.tsx"
+      ),
+      dest: "src/components/edit/pane/AddPanePanel_paste.tsx"
+    },
     {
       src: t(
         "../templates/src/components/edit/pane/AddPanePanel_break.tsx"
@@ -548,22 +554,6 @@ async function w(t, e, c) {
       ),
       dest: "src/components/edit/context/ContextPaneConfig_slug.tsx"
     },
-    {
-      src: t("../templates/src/components/edit/pane/PageGenSelector.tsx"),
-      dest: "src/components/edit/pane/PageGenSelector.tsx"
-    },
-    {
-      src: t("../templates/src/components/edit/pane/PageGenSpecial.tsx"),
-      dest: "src/components/edit/pane/PageGenSpecial.tsx"
-    },
-    {
-      src: t("../templates/src/components/edit/pane/PageGen.tsx"),
-      dest: "src/components/edit/pane/PageGen.tsx"
-    },
-    {
-      src: t("../templates/src/components/edit/pane/PageGen_preview.tsx"),
-      dest: "src/components/edit/pane/PageGen_preview.tsx"
-    },
     // Compositor previews
     {
       src: t(
@@ -583,12 +573,6 @@ async function w(t, e, c) {
       ),
       dest: "src/components/compositor/preview/OgImagePreview.tsx"
     },
-    {
-      src: t(
-        "../templates/src/components/compositor/preview/VisualBreakPreview.tsx"
-      ),
-      dest: "src/components/compositor/preview/VisualBreakPreview.tsx"
-    },
     {
       src: t(
         "../templates/src/components/compositor/preview/ListContentPreview.tsx"
@@ -649,16 +633,6 @@ async function w(t, e, c) {
       src: t("../templates/src/utils/compositor/aiPaneParser.ts"),
       dest: "src/utils/compositor/aiPaneParser.ts"
     },
-    {
-      src: t("../templates/src/utils/compositor/processMarkdown.ts"),
-      dest: "src/utils/compositor/processMarkdown.ts"
-    },
-    {
-      src: t(
-        "../templates/src/utils/compositor/templateMarkdownStyles.ts"
-      ),
-      dest: "src/utils/compositor/templateMarkdownStyles.ts"
-    },
     {
       src: t(
         "../templates/src/utils/compositor/nodesMarkdownGenerator.ts"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.19",
+  "version": "2.0.20",
   "description": "Astro integration for TractStack - redeeming the web from boring experiences",
   "type": "module",
   "main": "dist/index.js",

package/templates/src/components/codehooks/BunnyVideoSetup.tsx

@@ -11,7 +11,6 @@ import { canonicalURLStore } from '@/stores/storykeep';
 import { cloneDeep } from '@/utils/helpers';
 import ColorPickerCombo from '@/components/fields/ColorPickerCombo';
 import ActionBuilderSlugSelector from '@/components/form/ActionBuilderSlugSelector';
-import type { BrandConfig } from '@/types/tractstack';
 import type {
   PaneNode,
   VideoMoment,
@@ -21,7 +20,6 @@ import type {
 interface BunnyVideoSetupProps {
   nodeId: string;
   params: any;
-  config: BrandConfig;
 }
 
 interface Chapter extends VideoMoment {
@@ -40,7 +38,7 @@ const generateId = (): string => {
   return Math.random().toString(36).substring(2, 9);
 };
 
-const BunnyVideoSetup = ({ nodeId, params, config }: BunnyVideoSetupProps) => {
+const BunnyVideoSetup = ({ nodeId, params }: BunnyVideoSetupProps) => {
   const ctx = getCtx();
   const allNodes = ctx.allNodes.get();
   const canonicalURL = canonicalURLStore.get();
@@ -419,7 +417,6 @@ const BunnyVideoSetup = ({ nodeId, params, config }: BunnyVideoSetupProps) => {
                   setBgColor(color);
                   setTimeout(() => saveChanges(), 100);
                 }}
-                config={config!}
                 allowNull={true}
               />
               <p className="mt-1 text-xs text-gray-500">

package/templates/src/components/codehooks/FeaturedArticleSetup.tsx

@@ -9,12 +9,10 @@ import { getCtx } from '@/stores/nodes';
 import { cloneDeep } from '@/utils/helpers';
 import ColorPickerCombo from '@/components/fields/ColorPickerCombo';
 import type { PaneNode } from '@/types/compositorTypes';
-import type { BrandConfig } from '@/types/tractstack';
 
 interface FeaturedArticleSetupProps {
   params: Record<string, string>;
   nodeId: string;
-  config: BrandConfig;
 }
 
 const comboboxItemStyles = `
@@ -29,7 +27,6 @@ const comboboxItemStyles = `
 const FeaturedArticleSetup = ({
   params,
   nodeId,
-  config,
 }: FeaturedArticleSetupProps) => {
   const $contentMap = useStore(fullContentMapStore);
   const $viewportKey = useStore(viewportKeyStore);
@@ -294,7 +291,6 @@ const FeaturedArticleSetup = ({
               title="Background Color"
               defaultColor={bgColor}
               onColorChange={(color: string) => setBgColor(color)}
-              config={config!}
               allowNull={true}
             />
             <p className="mt-1 text-xs text-gray-500">

package/templates/src/components/codehooks/ListContentSetup.tsx

@@ -4,7 +4,6 @@ import { fullContentMapStore } from '@/stores/storykeep';
 import { classNames, cloneDeep } from '@/utils/helpers';
 import { getCtx } from '@/stores/nodes';
 import ColorPickerCombo from '@/components/fields/ColorPickerCombo';
-import type { BrandConfig } from '@/types/tractstack';
 import type { PaneNode } from '@/types/compositorTypes';
 
 const PER_PAGE = 20;
@@ -12,14 +11,9 @@ const PER_PAGE = 20;
 interface ListContentSetupProps {
   params?: Record<string, string>;
   nodeId: string;
-  config: BrandConfig;
 }
 
-const ListContentSetup = ({
-  params,
-  nodeId,
-  config,
-}: ListContentSetupProps) => {
+const ListContentSetup = ({ params, nodeId }: ListContentSetupProps) => {
   const $contentMap = useStore(fullContentMapStore);
   const [isPanelOpen, setIsPanelOpen] = useState(false);
   const [excludedIds, setExcludedIds] = useState<string[]>(
@@ -327,7 +321,6 @@ const ListContentSetup = ({
               title="Background Color"
               defaultColor={bgColor}
               onColorChange={(color: string) => setBgColor(color)}
-              config={config!}
               allowNull={true}
             />
             <p className="mt-1 text-xs text-gray-500">

package/templates/src/components/codehooks/ProductCardSetup.tsx

@@ -6,12 +6,10 @@ import { useStore } from '@nanostores/react';
 import { fullContentMapStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import type { PaneNode } from '@/types/compositorTypes';
-import type { BrandConfig } from '@/types/tractstack';
 
 interface ProductCardSetupProps {
   nodeId: string;
   params: Record<string, any> | null;
-  config: BrandConfig;
 }
 
 export const ProductCardSetup = (props: ProductCardSetupProps) => {

package/templates/src/components/codehooks/ProductGridSetup.tsx

@@ -11,12 +11,10 @@ import { fullContentMapStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import CheckCircleIcon from '@heroicons/react/20/solid/CheckCircleIcon';
 import type { PaneNode } from '@/types/compositorTypes';
-import type { BrandConfig } from '@/types/tractstack';
 
 interface ProductGridSetupProps {
   nodeId: string;
   params: Record<string, any> | null;
-  config: BrandConfig;
 }
 
 const modes = [

package/templates/src/components/compositor/Compositor.tsx

@@ -13,9 +13,9 @@ import {
   canonicalURLStore,
   preferredThemeStore,
   codehookMapStore,
-  brandColourStore,
   hasArtpacksStore,
   settingsPanelStore,
+  brandConfigStore,
 } from '@/stores/storykeep';
 import { getCtx, ROOT_NODE_NAME, type NodesContext } from '@/stores/nodes';
 import { stopLoadingAnimation } from '@/utils/helpers';
@@ -290,17 +290,14 @@ export const Compositor = (props: CompositorProps) => {
     urlParamsStore.set(props.urlParams);
     canonicalURLStore.set(props.fullCanonicalURL);
     preferredThemeStore.set(props.config.THEME as Theme);
-    if (props.config.BRAND_COLOURS)
-      brandColourStore.set(props.config.BRAND_COLOURS);
     codehookMapStore.set(props.availableCodeHooks);
+    brandConfigStore.set(props.config);
   }, [
     props.fullContentMap,
-    props.config.HAS_AAI,
-    props.config.THEME,
-    props.config.BRAND_COLOURS,
     props.urlParams,
     props.fullCanonicalURL,
     props.availableCodeHooks,
+    props.config,
   ]);
 
   // Initialize nodes tree and set up subscriptions

package/templates/src/components/compositor/Node.tsx

@@ -96,21 +96,18 @@ function parseCodeHook(node: BaseNode | FlatNode) {
   return null;
 }
 
-// Helper component to safely set the panel mode for an empty page
 const EmptyPageHandler = (props: NodeProps) => {
   const ctx = getCtx(props);
   useEffect(() => {
     ctx.setPaneAddMode(props.nodeId, PaneAddMode.NEW);
   }, []);
 
-  // Now that the mode is set, render the panel which will read it.
   return (
     <AddPanePanel
       nodeId={props.nodeId}
       first={true}
       ctx={ctx}
       isStoryFragment={true}
-      config={props.config!}
       isSandboxMode={props.isSandboxMode}
     />
   );
@@ -129,10 +126,10 @@ const getElement = (
     isSandboxMode: props.isSandboxMode,
   };
   const type = getType(node);
+  const toolModeVal = getCtx(props).toolModeValStore.get().value;
 
   switch (type) {
     case 'Markdown': {
-      const toolModeVal = getCtx(props).toolModeValStore.get().value;
       if (toolModeVal === 'eraser') {
         const parentNode = node.parentId
           ? getCtx(props).allNodes.get().get(node.parentId)
@@ -200,10 +197,7 @@ const getElement = (
                 panelType="storyfragment"
                 ctx={getCtx(props)}
               >
-                <StoryFragmentConfigPanel
-                  nodeId={props.nodeId}
-                  config={props.config!}
-                />
+                <StoryFragmentConfigPanel nodeId={props.nodeId} />
               </PanelVisibilityWrapper>
               <StoryFragment {...sharedProps} />
             </>
@@ -213,12 +207,8 @@ const getElement = (
     }
 
     case 'Pane': {
-      const toolModeVal = getCtx(props).toolModeValStore.get().value;
       const paneNodes = getCtx(props).getChildNodeIDs(node.id);
       const paneNode = node as PaneNode;
-      if (toolModeVal === 'designLibrary') {
-        return <Pane_DesignLibrary {...sharedProps} />;
-      }
       if (paneNode.isContextPane) {
         if (!isPreview)
           getCtx(props).hasTitle.set(!(!paneNode.slug || !paneNode.title));
@@ -241,7 +231,11 @@ const getElement = (
               <ContextPanePanel nodeId={node.id} />
             ) : null}
             <div>
-              <Pane {...sharedProps} />
+              {toolModeVal === 'designLibrary' ? (
+                <Pane_DesignLibrary {...sharedProps} />
+              ) : (
+                <Pane {...sharedProps} />
+              )}
               {!isPreview &&
                 paneNode.slug &&
                 paneNode.title &&
@@ -255,7 +249,6 @@ const getElement = (
                       nodeId={node.id}
                       first={true}
                       ctx={getCtx(props)}
-                      config={props.config!}
                       isContextPane={true}
                     />
                   </PanelVisibilityWrapper>
@@ -283,12 +276,7 @@ const getElement = (
               panelType="add"
               ctx={getCtx(props)}
             >
-              <AddPanePanel
-                nodeId={node.id}
-                first={true}
-                ctx={getCtx(props)}
-                config={props.config!}
-              />
+              <AddPanePanel nodeId={node.id} first={true} ctx={getCtx(props)} />
             </PanelVisibilityWrapper>
           )}
           <div className="py-0.5">
@@ -303,6 +291,8 @@ const getElement = (
               <PaneEraser {...sharedProps} />
             ) : toolModeVal === `layout` ? (
               <PaneLayout {...sharedProps} />
+            ) : toolModeVal === 'designLibrary' ? (
+              <Pane_DesignLibrary {...sharedProps} />
             ) : (
               <Pane {...sharedProps} />
             )}
@@ -312,12 +302,7 @@ const getElement = (
             panelType="add"
             ctx={getCtx(props)}
           >
-            <AddPanePanel
-              nodeId={node.id}
-              first={false}
-              ctx={getCtx(props)}
-              config={props.config!}
-            />
+            <AddPanePanel nodeId={node.id} first={false} ctx={getCtx(props)} />
           </PanelVisibilityWrapper>
         </>
       );
@@ -326,7 +311,6 @@ const getElement = (
     case 'BgPane':
       return <BgPaneWrapper {...sharedProps} />;
     case 'GridLayoutNode': {
-      const toolModeVal = getCtx(props).toolModeValStore.get().value;
       if (toolModeVal === 'eraser') {
         return <GridLayoutEraser {...sharedProps} />;
       }
@@ -343,8 +327,6 @@ const getElement = (
     case 'li':
     case 'aside':
     case 'p': {
-      const toolModeVal = getCtx(props).toolModeValStore.get().value;
-
       if (toolModeVal === 'styles') {
         const className = getCtx(props).getNodeClasses(
           node.id,
@@ -443,13 +425,11 @@ const getElement = (
     case 'text':
       return <NodeText {...sharedProps} />;
     case 'button': {
-      const toolModeVal = getCtx(props).toolModeValStore.get().value;
       if (toolModeVal === `eraser`)
         return <NodeButtonEraser {...sharedProps} />;
       return <NodeButton {...sharedProps} isSelectableText={false} />;
     }
     case 'a': {
-      const toolModeVal = getCtx(props).toolModeValStore.get().value;
       if (toolModeVal === `eraser`) return <NodeAEraser {...sharedProps} />;
       return <NodeA {...sharedProps} isSelectableText={false} />;
     }
@@ -471,6 +451,7 @@ const Node = memo((props: NodeProps) => {
   const node = getCtx(props).allNodes.get().get(props.nodeId) as FlatNode;
   const isPreview = getCtx(props).rootNodeId.get() === `tmp`;
   const settingsPanel = useStore(settingsPanelStore);
+  const toolModeVal = getCtx(props).toolModeValStore.get().value;
 
   const {
     markdownParentId,
@@ -560,7 +541,7 @@ const Node = memo((props: NodeProps) => {
     return <div style={highlightStyle}>{element}</div>;
   }
 
-  if (!isPreview && getCtx(props).showGuids.get()) {
+  if (!isPreview && toolModeVal === `debug`) {
     return <NodeWithGuid {...props} element={element} />;
   }
 

package/templates/src/components/compositor/NodeWithGuid.tsx

@@ -1,13 +1,48 @@
 import { memo, type ReactElement } from 'react';
-import { getCtx } from '@/stores/nodes';
+import { getCtx, type NodesContext } from '@/stores/nodes';
 import { getType } from '@/utils/compositor/typeGuards';
-import type { FlatNode } from '@/types/compositorTypes';
+import type { BaseNode, FlatNode } from '@/types/compositorTypes';
 import type { NodeProps } from '@/types/nodeProps';
+import ArrowDownTrayIcon from '@heroicons/react/24/outline/ArrowDownTrayIcon';
+
+const getNodeTree = (nodeId: string, ctx: NodesContext): BaseNode | null => {
+  const allNodesMap = ctx.allNodes.get();
+  const node = allNodesMap.get(nodeId);
+
+  if (!node) {
+    return null;
+  }
+
+  // Use JSON stringify/parse to get a deep clone, breaking any proxies/reactivity
+  const clonedNode = JSON.parse(JSON.stringify(node));
+
+  const childIds = ctx.getChildNodeIDs(nodeId);
+
+  if (childIds.length > 0) {
+    clonedNode.children = childIds
+      .map((childId) => getNodeTree(childId, ctx))
+      .filter((child): child is BaseNode => child !== null);
+  }
+
+  return clonedNode;
+};
 
 export type RenderableNodes = NodeProps & { element: ReactElement };
 
 export const NodeWithGuid = memo((props: RenderableNodes) => {
-  const node = getCtx(props).allNodes.get().get(props.nodeId) as FlatNode;
+  const ctx = getCtx(props);
+  const node = ctx.allNodes.get().get(props.nodeId) as FlatNode;
+
+  const handleDumpTree = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const nodeTree = getNodeTree(props.nodeId, ctx);
+    console.log(
+      `%c--- Dumping Node Tree for ${getType(node)}: ${props.nodeId} ---`,
+      'color: #0891b2; font-weight: bold;'
+    );
+    console.log(nodeTree);
+  };
+
   return (
     <div className="relative">
       <div
@@ -15,8 +50,17 @@ export const NodeWithGuid = memo((props: RenderableNodes) => {
         data-node-id={props.nodeId}
         data-node-type={getType(node)}
       >
-        <div className="border-b border-dotted border-cyan-600 p-1 font-mono text-xs text-cyan-600">
-          {getType(node)}: {props.nodeId}
+        <div className="flex items-center justify-between border-b border-dotted border-cyan-600 p-1 font-mono text-xs text-cyan-600">
+          <span className="truncate pr-2">
+            {getType(node)}: {props.nodeId}
+          </span>
+          <button
+            onClick={handleDumpTree}
+            title={`Log tree for ${props.nodeId}`}
+            className="flex-shrink-0 rounded p-0.5 hover:bg-cyan-100"
+          >
+            <ArrowDownTrayIcon className="h-4 w-4 text-cyan-700" />
+          </button>
         </div>
         <div className="p-0.5">{props.element}</div>
       </div>

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

@@ -166,35 +166,18 @@ const Pane = memo(
           className={useFlexLayout ? '' : wrapperClasses}
         >
           {codeHookPayload && codeHookTarget === 'product-card' ? (
-            <ProductCardSetup
-              nodeId={props.nodeId}
-              params={codeHookParams}
-              config={props.config!}
-            />
+            <ProductCardSetup nodeId={props.nodeId} params={codeHookParams} />
           ) : codeHookPayload && codeHookTarget === 'product-grid' ? (
-            <ProductGridSetup
-              nodeId={props.nodeId}
-              params={codeHookParams}
-              config={props.config!}
-            />
+            <ProductGridSetup nodeId={props.nodeId} params={codeHookParams} />
           ) : codeHookPayload && codeHookTarget === 'featured-article' ? (
             <FeaturedArticleSetup
               nodeId={props.nodeId}
               params={codeHookParams}
-              config={props.config!}
             />
           ) : codeHookPayload && codeHookTarget === 'list-content' ? (
-            <ListContentSetup
-              nodeId={props.nodeId}
-              params={codeHookParams}
-              config={props.config!}
-            />
+            <ListContentSetup nodeId={props.nodeId} params={codeHookParams} />
           ) : codeHookPayload && codeHookTarget === 'bunny-video' ? (
-            <BunnyVideoSetup
-              nodeId={props.nodeId}
-              params={codeHookParams}
-              config={props.config!}
-            />
+            <BunnyVideoSetup nodeId={props.nodeId} params={codeHookParams} />
           ) : codeHookPayload && codeHookTarget ? (
             <CodeHookContainer
               payload={{ target: codeHookTarget, params: codeHookParams }}

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

@@ -2,6 +2,8 @@ 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 { viewportKeyStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { RenderChildren } from './RenderChildren';
@@ -10,6 +12,7 @@ import type { NodeProps } from '@/types/nodeProps';
 import { SaveToLibraryModal } from '@/components/edit/state/SaveToLibraryModal';
 import { RestylePaneModal } from '@/components/edit/pane/RestylePaneModal';
 import { selectionStore } from '@/stores/selection';
+import { copyPaneToClipboard } from '@/utils/compositor/designLibraryHelper';
 
 export const Pane_DesignLibrary = (props: NodeProps) => {
   const ctx = getCtx(props);
@@ -32,6 +35,7 @@ export const Pane_DesignLibrary = (props: NodeProps) => {
     ...ctx.getChildNodeIDs(props.nodeId),
   ]);
   const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
+  const [wasCopied, setWasCopied] = useState(false);
   const getPaneId = (): string => `pane-${props.nodeId}`;
 
   useEffect(() => {
@@ -52,9 +56,14 @@ export const Pane_DesignLibrary = (props: NodeProps) => {
     setIsSaveModalOpen(true);
   };
 
-  if (!props.config || !props.config.TENANT_ID) {
-    return <></>;
-  }
+  const handleCopyToClipboard = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const success = await copyPaneToClipboard(props.nodeId);
+    if (success) {
+      setWasCopied(true);
+      setTimeout(() => setWasCopied(false), 2000);
+    }
+  };
 
   return (
     <div id={getPaneId()} className="pane min-h-16">
@@ -67,7 +76,7 @@ export const Pane_DesignLibrary = (props: NodeProps) => {
             e.stopPropagation();
           }}
         >
-          <div className="absolute left-2 top-2 z-10 flex flex-col gap-y-2">
+          <div className="absolute left-2 top-2 z-10 flex flex-row gap-x-2">
             {!props.isSandboxMode && (
               <button
                 title="Save Pane to Design Library"
@@ -84,6 +93,19 @@ export const Pane_DesignLibrary = (props: NodeProps) => {
             >
               <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>
           {codeHookPayload ? (
             <CodeHookContainer payload={codeHookPayload} />
@@ -95,13 +117,11 @@ export const Pane_DesignLibrary = (props: NodeProps) => {
       {isSaveModalOpen && (
         <SaveToLibraryModal
           paneId={props.nodeId}
-          config={props.config}
-          tenantId={props.config.TENANT_ID}
           onClose={() => setIsSaveModalOpen(false)}
         />
       )}
 
-      {isRestyleModalOpen && <RestylePaneModal config={props.config} />}
+      {isRestyleModalOpen && <RestylePaneModal />}
     </div>
   );
 };

package/templates/src/components/compositor/nodes/tagElements/NodeBasicTag.tsx

@@ -37,7 +37,9 @@ const VERBOSE = false;
 export const NodeBasicTag = (props: NodeTagProps) => {
   const nodeId = props.nodeId;
   const ctx = getCtx(props);
-  const Tag = ctx.showGuids.get() ? `div` : props.tagName;
+  //const Tag = ctx.showGuids.get() ? `div` : props.tagName;
+  const Tag =
+    ctx.toolModeValStore.get().value === `debug` ? `div` : props.tagName;
 
   if (props.tagName === 'span') {
     const node = ctx.allNodes.get().get(props.nodeId);

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

@@ -1,7 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
 import ColorPickerCombo from '@/components/fields/ColorPickerCombo';
 import { setPendingImageOperation } from '@/stores/storykeep';
-import type { BrandConfig } from '@/types/tractstack';
 
 const OG_IMAGE_WIDTH = 1200;
 const OG_IMAGE_HEIGHT = 630;
@@ -12,7 +11,6 @@ interface OgImagePreviewProps {
   nodeId: string;
   title: string;
   socialImagePath: string | null;
-  config: BrandConfig;
   onColorChange?: (textColor: string, bgColor: string) => void;
 }
 
@@ -20,7 +18,6 @@ const OgImagePreview = ({
   nodeId,
   title,
   socialImagePath,
-  config,
   onColorChange,
 }: OgImagePreviewProps) => {
   const [fontSize, setFontSize] = useState<number>(48);
@@ -190,13 +187,11 @@ const OgImagePreview = ({
             title="Text Color"
             defaultColor={textColor}
             onColorChange={handleTextColorChange}
-            config={config}
           />
           <ColorPickerCombo
             title="Background Color"
             defaultColor={bgColor}
             onColorChange={handleBgColorChange}
-            config={config}
           />
         </div>
       )}