astro-tractstack 2.0.28 → 2.0.30

package/templates/src/pages/sandbox.astro

@@ -26,7 +26,6 @@ if (healthCheckRedirect !== undefined) {
 }
 
 const brandConfig = await getBrandConfig(tenantId);
-
 const emptyStoryFragment = {
   id: ulid(),
   nodeType: 'StoryFragment' as const,
@@ -43,12 +42,15 @@ const loadData = {
 };
 const title = 'Sandbox - TractStack Editor';
 const storyFragmentID = emptyStoryFragment.id;
-
 const fullContentMap = await getFullContentMap(tenantId);
 const urlParams: Record<string, string | boolean> = {};
 for (const [key, value] of Astro.url.searchParams) {
   urlParams[key] = value === '' ? true : value;
 }
+
+const hasProfile = Astro.request.headers
+  .get('cookie')
+  ?.includes('tractstack_profile=true');
 ---
 
 <Layout
@@ -59,7 +61,7 @@ for (const [key, value] of Astro.url.searchParams) {
   isStoryKeep={true}
   isEditor={true}
 >
-  <SandboxAuthWrapper client:load />
+  <SandboxAuthWrapper client:load isServerSideAuthenticated={!!hasProfile} />
   <Header
     title={title}
     slug="sandbox"
@@ -70,65 +72,71 @@ for (const [key, value] of Astro.url.searchParams) {
     menu={null}
   />
 
-  <section
-    id="storykeepHeader"
-    role="banner"
-    class="z-101 bg-mywhite left-0 right-0 drop-shadow transition-all duration-200"
-  >
-    <StoryKeepHeader
-      slug="sandbox"
-      isContext={false}
-      isSandboxMode={true}
-      client:only="react"
-    />
-  </section>
-
-  <div class="flex min-h-screen">
-    <StoryKeepToolMode isContext={false} client:only="react" />
-
-    <main id="mainContent" class="relative flex-1 overflow-x-auto">
-      <div class="bg-myblue/20 bg-mylightgrey h-full p-1.5">
-        <div
-          class="h-fit min-h-screen pb-96"
-          style={{
-            backgroundImage:
-              'repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px)',
-          }}
+  {
+    hasProfile && (
+      <>
+        <section
+          id="storykeepHeader"
+          role="banner"
+          class="z-101 bg-mywhite left-0 right-0 drop-shadow transition-all duration-200"
         >
-          <Compositor
-            id={storyFragmentID}
-            nodes={loadData}
-            config={brandConfig}
-            fullContentMap={fullContentMap}
-            fullCanonicalURL="/sandbox"
-            urlParams={urlParams}
-            availableCodeHooks={Object.keys(codeHookComponents)}
+          <StoryKeepHeader
+            slug="sandbox"
+            isContext={false}
             isSandboxMode={true}
             client:only="react"
           />
+        </section>
+
+        <div class="flex min-h-screen">
+          <StoryKeepToolMode isContext={false} client:only="react" />
+
+          <main id="mainContent" class="relative flex-1 overflow-x-auto">
+            <div class="bg-myblue/20 bg-mylightgrey h-full p-1.5">
+              <div
+                class="h-fit min-h-screen pb-96"
+                style={{
+                  backgroundImage:
+                    'repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px)',
+                }}
+              >
+                <Compositor
+                  id={storyFragmentID}
+                  nodes={loadData}
+                  config={brandConfig}
+                  fullContentMap={fullContentMap}
+                  fullCanonicalURL="/sandbox"
+                  urlParams={urlParams}
+                  availableCodeHooks={Object.keys(codeHookComponents)}
+                  isSandboxMode={true}
+                  client:only="react"
+                />
+              </div>
+            </div>
+          </main>
         </div>
-      </div>
-    </main>
-  </div>
 
-  <aside
-    id="settingsControls"
-    class="z-101 pointer-events-none fixed bottom-16 right-2 flex flex-col items-end gap-2 md:bottom-2"
-  >
-    <div class="pointer-events-none flex-grow"></div>
+        <aside
+          id="settingsControls"
+          class="z-101 pointer-events-none fixed bottom-16 right-2 flex flex-col items-end gap-2 md:bottom-2"
+        >
+          <div class="pointer-events-none flex-grow" />
 
-    <div class="pointer-events-auto flex-shrink-0">
-      <StoryKeepToolBar client:only="react" />
-    </div>
+          <div class="pointer-events-auto flex-shrink-0">
+            <StoryKeepToolBar client:only="react" />
+          </div>
 
-    <div class="pointer-events-auto max-h-full">
-      <SettingsPanel
-        config={brandConfig}
-        availableCodeHooks={Object.keys(codeHookComponents)}
-        client:only="react"
-      />
-    </div>
-  </aside>
+          <div class="pointer-events-auto max-h-full">
+            <SettingsPanel
+              config={brandConfig}
+              availableCodeHooks={Object.keys(codeHookComponents)}
+              client:only="react"
+            />
+          </div>
+        </aside>
+      </>
+    )
+  }
 </Layout>
 
 <script>

package/templates/src/stores/nodes.ts

@@ -3199,6 +3199,9 @@ export class NodesContext {
       const allOriginalNodes: TemplateNode[] = [];
       const columnNodes: TemplateMarkdown[] = [];
 
+      // Instantiate generator for column markdown parsing
+      const markdownGen = new MarkdownGenerator(this);
+
       duplicatedGrid.nodes?.forEach((originalColumn) => {
         const newColumn = cloneDeep(originalColumn);
         newColumn.id = ulid();
@@ -3206,12 +3209,22 @@ export class NodesContext {
         oldToNewIdMap.set(originalColumn.id, newColumn.id);
         columnNodes.push(newColumn);
 
-        originalColumn.nodes?.forEach((colNode) => {
-          allOriginalNodes.push(colNode);
-        });
+        if (originalColumn.markdownBody) {
+          const columnContentNodes = markdownGen.markdownToFlatNodes(
+            originalColumn.markdownBody,
+            newColumn.id
+          ) as TemplateNode[];
+          // Add generated nodes directly to allNodes
+          allNodes.push(...columnContentNodes);
+        } else {
+          // Standard flow: collect existing nodes for remapping
+          originalColumn.nodes?.forEach((colNode) => {
+            allOriginalNodes.push(colNode);
+          });
+        }
       });
 
-      // Second pass: Clone all descendant nodes
+      // Second pass: Clone all descendant nodes (only those from the standard flow)
       const allClonedDescendants = allOriginalNodes.map((originalNode) => {
         const newNode = cloneDeep(originalNode);
         newNode.id = ulid();

package/templates/src/types/compositorTypes.ts

@@ -281,12 +281,15 @@ export interface MarkdownPaneFragmentNode extends PaneFragmentNode {
   parentClasses?: ParentClassesPayload;
   parentCss?: string[];
   gridClasses?: DefaultClassValue;
+  gridCss?: string;
 }
 
 export interface GridLayoutNode extends PaneFragmentNode {
   nodeType: 'GridLayoutNode';
   type: 'grid-layout';
   parentClasses?: ParentClassesPayload;
+  parentCss?: string;
+  gridCss?: string;
   defaultClasses?: Record<
     string,
     {

package/templates/src/types/tractstack.ts

@@ -4,6 +4,8 @@ export type DesignLibraryEntry = {
   category: string;
   title: string;
   markdownCount: number;
+  retain?: boolean;
+  locked?: boolean;
   template: StoragePane;
 };
 

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

@@ -62,7 +62,7 @@ function convertLiveNodeToStorageNode(
     fileId: copyMode === 'retain' ? node.fileId : undefined,
     buttonPayload: copyMode === 'retain' ? node.buttonPayload : undefined,
     codeHookParams: copyMode === 'retain' ? node.codeHookParams : undefined,
-    elementCss: copyMode === 'retain' ? node.elementCss : undefined,
+    copy: copyMode === 'retain' ? node.copy : undefined,
   };
 
   const childIds = ctx.getChildNodeIDs(node.id);
@@ -500,7 +500,8 @@ function convertLivePaneToStoragePane(
           : [],
     };
   } else if (gridLayoutNode) {
-    const { id, parentId, isChanged, ...restOfGrid } = gridLayoutNode;
+    const { id, parentId, isChanged, parentCss, gridCss, ...restOfGrid } =
+      gridLayoutNode;
     storageGridLayout = {
       ...restOfGrid,
       nodes: ctx
@@ -517,6 +518,7 @@ function convertLivePaneToStoragePane(
             isChanged,
             markdownId,
             parentCss,
+            gridCss,
             ...restOfColumn
           } = columnNode;
 
@@ -584,10 +586,11 @@ export async function savePaneToLibrary(
     title: string;
     category: string;
     copyMode: CopyMode;
+    locked?: boolean;
   }
 ): Promise<BrandConfigState | null> {
   const ctx = getCtx();
-  const { title, category, copyMode } = formData;
+  const { title, category, copyMode, locked } = formData;
 
   const newStoragePane = convertLivePaneToStoragePane(paneId, ctx, {
     title,
@@ -613,6 +616,8 @@ export async function savePaneToLibrary(
     title: title,
     markdownCount: actualMarkdownCount,
     template: newStoragePane,
+    retain: copyMode === 'retain',
+    locked: !!locked,
   };
 
   const currentState: BrandConfigState = convertToLocalState(config);

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

@@ -93,24 +93,6 @@ export const isMarkdownPaneFragmentNode = (
   );
 };
 
-interface WidgetNode extends FlatNode {
-  tagName: 'code';
-  codeHookParams: (string | string[])[];
-  copy: string;
-}
-
-export const isWidgetNode = (
-  node: BaseNode | FlatNode | null
-): node is WidgetNode => {
-  return (
-    node !== null &&
-    'tagName' in node &&
-    node.tagName === 'code' &&
-    'codeHookParams' in node &&
-    Array.isArray(node.codeHookParams)
-  );
-};
-
 export function hasTagName(
   node: BaseNode | null | undefined
 ): node is FlatNode {