astro-tractstack 2.0.20 → 2.0.21

package/templates/src/components/edit/pane/RestylePaneModal.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { useStore } from '@nanostores/react';
 import {
   Dialog,
@@ -59,7 +59,6 @@ const TemplatePreviewItem = ({
   } | null>(null);
 
   const fragmentRequest = useMemo((): PanePreviewRequest[] => {
-    // This preview logic is correct: it creates a *temporary* context.
     const ctx = new NodesContext();
     ctx.addNode(createEmptyStorykeep('tmp'));
     ctx.addTemplatePane('tmp', template);
@@ -145,6 +144,7 @@ export const RestylePaneModal = () => {
     keys: ['isRestyleModalOpen', 'paneToRestyleId'],
   });
   const designLibrary = brandConfigStore.get()?.DESIGN_LIBRARY || [];
+  const contentRef = useRef<HTMLDivElement>(null);
 
   const [selectedCategory, setSelectedCategory] = useState<string>('all');
   const [searchTerm, setSearchTerm] = useState('');
@@ -157,6 +157,33 @@ export const RestylePaneModal = () => {
     return ['all', ...Array.from(allCategories)];
   }, [designLibrary]);
 
+  const [targetMarkdownCount, setTargetMarkdownCount] = useState<number>(0);
+
+  useEffect(() => {
+    if (!paneToRestyleId || !isRestyleModalOpen) {
+      setTargetMarkdownCount(0);
+      return;
+    }
+    const paneChildIds = ctx.getChildNodeIDs(paneToRestyleId);
+    const nodesMap = ctx.allNodes.get();
+    const gridNodeId = paneChildIds.find(
+      (id) => nodesMap.get(id)?.nodeType === 'GridLayoutNode'
+    );
+    if (gridNodeId) {
+      const columns = ctx.getChildNodeIDs(gridNodeId);
+      setTargetMarkdownCount(columns.length);
+      return;
+    }
+    const markdownNodeId = paneChildIds.find(
+      (id) => nodesMap.get(id)?.nodeType === 'Markdown'
+    );
+    if (markdownNodeId) {
+      setTargetMarkdownCount(1);
+      return;
+    }
+    setTargetMarkdownCount(0);
+  }, [paneToRestyleId, isRestyleModalOpen]);
+
   const originalPaneData = useMemo(() => {
     if (!paneToRestyleId) return null;
     const paneNode = ctx.allNodes.get().get(paneToRestyleId) as PaneNode;
@@ -183,9 +210,10 @@ export const RestylePaneModal = () => {
     return designLibrary.filter(
       (entry: DesignLibraryEntry) =>
         (selectedCategory === 'all' || entry.category === selectedCategory) &&
-        entry.title.toLowerCase().includes(searchTerm.toLowerCase())
+        entry.title.toLowerCase().includes(searchTerm.toLowerCase()) &&
+        entry.markdownCount === targetMarkdownCount
     );
-  }, [designLibrary, selectedCategory, searchTerm]);
+  }, [designLibrary, selectedCategory, searchTerm, targetMarkdownCount]);
 
   const paginatedEntries = useMemo(() => {
     const start = (currentPage - 1) * PAGE_SIZE;
@@ -224,123 +252,64 @@ export const RestylePaneModal = () => {
     setSelectedCategory('all');
   };
 
-  const handleSelectTemplate = (template: TemplatePane) => {
-    if (VERBOSE)
-      console.log(
-        '%cDEBUG: handleSelectTemplate CLICKED (Hollow & Replace)',
-        'color: #00A; font-weight: bold;',
-        {
-          templateToApply: template,
-          originalPaneData: originalPaneData,
-        }
-      );
+  const handleDialogStateChange = (details: { open: boolean }) => {
+    if (!details.open) {
+      handleClose();
+    }
+  };
 
+  const handleSelectTemplate = (template: TemplatePane) => {
     if (!originalPaneData) {
-      console.error(
-        '%cDEBUG: handleSelectTemplate FAILED: originalPaneData is null.',
-        'color: red; font-weight: bold;'
-      );
       return;
     }
 
     const originalPane = originalPaneData.paneNode;
     const originalPaneId = originalPane.id;
 
-    if (VERBOSE)
-      console.log(
-        `%cDEBUG: STEP 1 - HOLLOWING OUT original pane ${originalPaneId}`,
-        'color: #A0A; font-weight: bold;'
-      );
-    const oldChildrenNodes = ctx
-      .getChildNodeIDs(originalPaneId)
-      .map((id) => ctx.allNodes.get().get(id));
-    if (VERBOSE)
-      console.log(
-        '%cDEBUG: Original pane children BEFORE delete:',
-        oldChildrenNodes
-      );
-
-    const deletedChildren = ctx.deleteChildren(originalPaneId); // This deletes *children*, not the pane itself
-
-    const childrenAfterDelete = ctx.getChildNodeIDs(originalPaneId);
-    if (VERBOSE) {
-      console.log(
-        `%cDEBUG: Deleted ${deletedChildren.length} old child nodes.`,
-        'color: #A0A;'
-      );
-      console.log(
-        `%cDEBUG: Original pane children IDs AFTER delete: [${childrenAfterDelete.join(', ')}]`,
-        'color: #A0A;'
-      );
-      console.log(
-        `%cDEBUG: STEP 2 - REFILLING pane with new nodes...`,
-        'color: #0A0; font-weight: bold;'
-      );
-    }
+    ctx.deleteChildren(originalPaneId);
 
     const newNodesToAdd: BaseNode[] = [];
     const newMarkdown = template.markdown as TemplateMarkdown | undefined;
+    const newGridLayout = template.gridLayout;
     const newBgPane = template.bgPane;
 
     if (newMarkdown) {
-      // Re-parent the new Markdown node to the original pane
       newMarkdown.parentId = originalPaneId;
       newNodesToAdd.push(newMarkdown);
-
-      // The markdown.nodes are already parented to the newMarkdown.id, which is correct.
-      // We just need to add them to the context.
       if (newMarkdown.nodes) {
         newNodesToAdd.push(...newMarkdown.nodes);
       }
-      if (VERBOSE) {
-        console.log(`%cDEBUG: Prepared new Markdown node:`, newMarkdown);
-        console.log(
-          `%cDEBUG: Prepared ${newMarkdown.nodes?.length || 0} new markdown sub-nodes:`,
-          newMarkdown.nodes
-        );
+    }
+
+    if (newGridLayout) {
+      newGridLayout.parentId = originalPaneId;
+      newNodesToAdd.push(newGridLayout);
+
+      if (newGridLayout.nodes) {
+        newGridLayout.nodes.forEach((column) => {
+          column.parentId = newGridLayout.id;
+          newNodesToAdd.push(column);
+
+          if (column.nodes) {
+            newNodesToAdd.push(...column.nodes);
+          }
+        });
       }
     }
 
     if (newBgPane) {
-      // Re-parent the new BgPane node to the original pane
       newBgPane.parentId = originalPaneId;
       newNodesToAdd.push(newBgPane);
-      if (VERBOSE) console.log(`%cDEBUG: Prepared new BgPane:`, newBgPane);
     }
 
-    ctx.addNodes(newNodesToAdd); // This adds all nodes AND links them in parentNodes map
+    ctx.addNodes(newNodesToAdd);
 
-    const childrenAfterAdd = ctx.getChildNodeIDs(originalPaneId);
-    const childrenNodesAfterAdd = childrenAfterAdd.map((id) =>
-      ctx.allNodes.get().get(id)
-    );
-    if (VERBOSE) {
-      console.log(
-        `%cDEBUG: Original pane children IDs AFTER add: [${childrenAfterAdd.join(', ')}]`,
-        'color: #0A0;'
-      );
-      console.log(
-        `%cDEBUG: Original pane children nodes AFTER add:`,
-        childrenNodesAfterAdd
-      );
-      console.log(
-        `%cDEBUG: STEP 3 - UPDATING original pane properties...`,
-        'color: #00F; font-weight: bold;'
-      );
-    }
-
-    // We must get a fresh reference from the store to modify
     const paneToUpdate = ctx.allNodes.get().get(originalPaneId) as PaneNode;
 
     if (!paneToUpdate) {
-      console.error(
-        `%cDEBUG: FAILED TO FIND PANE ${originalPaneId} IN STORE FOR FINAL UPDATE.`,
-        'color: red; font-weight: bold;'
-      );
       return;
     }
 
-    // Copy all style/config properties from the template, but keep the original ID, parentId, slug, title
     paneToUpdate.bgColour = template.bgColour;
     paneToUpdate.isDecorative = template.isDecorative;
     paneToUpdate.heightOffsetDesktop = template.heightOffsetDesktop;
@@ -349,25 +318,9 @@ export const RestylePaneModal = () => {
     paneToUpdate.heightRatioDesktop = template.heightRatioDesktop;
     paneToUpdate.heightRatioMobile = template.heightRatioMobile;
     paneToUpdate.heightRatioTablet = template.heightRatioTablet;
-    paneToUpdate.isChanged = true; // Mark as dirty
-
-    if (VERBOSE)
-      console.log(
-        `%cDEBUG: Calling modifyNodes with this pane object:`,
-        paneToUpdate
-      );
-    ctx.modifyNodes([paneToUpdate]); // This will save the changes and notify the UI
+    paneToUpdate.isChanged = true;
 
-    if (VERBOSE) {
-      console.log(
-        '%cDEBUG: handleSelectTemplate FINISHED.',
-        'color: #00A; font-weight: bold;'
-      );
-      console.log(
-        '%cDEBUG: Notifying ROOT_NODE to force re-render.',
-        'color: green; font-weight: bold;'
-      );
-    }
+    ctx.modifyNodes([paneToUpdate]);
     ctx.notifyNode('root');
 
     handleClose();
@@ -394,176 +347,179 @@ export const RestylePaneModal = () => {
   );
 
   return (
-    <Dialog.Root open={isRestyleModalOpen} onOpenChange={handleClose} modal>
-      <Portal>
-        <Dialog.Backdrop className="z-103 fixed inset-0 bg-black/70" />
-        <Dialog.Positioner className="z-104 fixed inset-0 flex items-center justify-center">
-          <Dialog.Content
-            className="flex flex-col rounded-lg bg-white shadow-2xl"
-            style={{ maxHeight: '90vw', width: '90vw' }}
-          >
-            <header className="flex items-center justify-between border-b p-4">
-              <Dialog.Title className="text-xl font-bold">
-                Restyle Pane from Design Library
-              </Dialog.Title>
-              <Dialog.CloseTrigger
-                type="button"
-                className="rounded-full p-1 text-gray-600 hover:bg-gray-100"
-              >
-                <XMarkIcon className="h-6 w-6" />
-              </Dialog.CloseTrigger>
-            </header>
-
-            <nav className="flex items-center gap-x-4 border-b bg-gray-50 p-4">
-              <Select.Root
-                collection={selectCollection}
-                value={[selectedCategory]}
-                onValueChange={(details: SelectValueChangeDetails) =>
-                  setSelectedCategory(details.value[0])
+    <Dialog.Root
+      open={isRestyleModalOpen}
+      onOpenChange={handleDialogStateChange}
+      modal={false}
+    >
+      <Dialog.Backdrop className="z-103 fixed inset-0 bg-black/70" />
+      <Dialog.Positioner className="z-104 fixed inset-0 flex items-center justify-center">
+        <Dialog.Content
+          ref={contentRef}
+          className="flex flex-col rounded-lg bg-white shadow-2xl"
+          style={{ maxHeight: '90vw', width: '90vw' }}
+        >
+          <header className="flex items-center justify-between border-b p-4">
+            <Dialog.Title className="text-xl font-bold">
+              Restyle Pane from Design Library
+            </Dialog.Title>
+            <Dialog.CloseTrigger
+              type="button"
+              className="rounded-full p-1 text-gray-600 hover:bg-gray-100"
+            >
+              <XMarkIcon className="h-6 w-6" />
+            </Dialog.CloseTrigger>
+          </header>
+
+          <nav className="flex items-center gap-x-4 border-b bg-gray-50 p-4">
+            <Select.Root
+              collection={selectCollection}
+              value={[selectedCategory]}
+              onValueChange={(details: SelectValueChangeDetails) =>
+                setSelectedCategory(details.value[0])
+              }
+              className="w-48"
+              positioning={{ gutter: 4 }}
+            >
+              <Select.Label className="mb-1 text-sm font-bold">
+                Category
+              </Select.Label>
+              <Select.Control>
+                <Select.Trigger className="flex w-full items-center justify-between rounded border bg-white p-2 text-left">
+                  <Select.ValueText />
+                  <Select.Indicator>▼</Select.Indicator>
+                </Select.Trigger>
+              </Select.Control>
+              <Portal>
+                <Select.Positioner>
+                  <Select.Content className="z-105 rounded border bg-white shadow-lg">
+                    {categories.map((c) => (
+                      <Select.Item
+                        key={c}
+                        item={{ label: c, value: c }}
+                        className="cursor-pointer p-2 hover:bg-gray-100"
+                      >
+                        <Select.ItemText>{c}</Select.ItemText>
+                      </Select.Item>
+                    ))}
+                  </Select.Content>
+                </Select.Positioner>
+              </Portal>
+            </Select.Root>
+
+            <Combobox.Root
+              collection={comboboxCollection}
+              onInputValueChange={(e: ComboboxInputValueChangeDetails) =>
+                setSearchTerm(e.inputValue)
+              }
+              className="flex-1"
+              positioning={{ gutter: 4 }}
+            >
+              <Combobox.Label className="mb-1 text-sm font-bold">
+                Filter by Title
+              </Combobox.Label>
+              <Combobox.Control>
+                <Combobox.Input
+                  placeholder="Search by title..."
+                  className="w-full rounded border p-2"
+                />
+              </Combobox.Control>
+              <Portal>
+                <Combobox.Positioner>
+                  <Combobox.Content className="z-105 rounded border bg-white shadow-lg">
+                    {filteredEntries.map((entry: DesignLibraryEntry) => (
+                      <Combobox.Item
+                        key={entry.title}
+                        item={entry}
+                        className="cursor-pointer p-2 hover:bg-gray-100"
+                      >
+                        <Combobox.ItemText>{entry.title}</Combobox.ItemText>
+                      </Combobox.Item>
+                    ))}
+                  </Combobox.Content>
+                </Combobox.Positioner>
+              </Portal>
+            </Combobox.Root>
+          </nav>
+
+          <main className="flex-1 overflow-y-auto bg-gray-100 p-6">
+            {mergedTemplates.length === 0 ? (
+              <div className="flex h-full items-center justify-center">
+                <p className="text-gray-500">No designs found.</p>
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+                {mergedTemplates.map(({ template }) => (
+                  <TemplatePreviewItem
+                    key={template.id}
+                    template={template}
+                    onClick={() => handleSelectTemplate(template)}
+                  />
+                ))}
+              </div>
+            )}
+          </main>
+
+          {totalPages > 1 && (
+            <footer className="flex items-center justify-center border-t p-4">
+              <Pagination.Root
+                count={totalPages * PAGE_SIZE}
+                pageSize={PAGE_SIZE}
+                siblingCount={1}
+                page={currentPage}
+                onPageChange={(details: PaginationPageChangeDetails) =>
+                  setCurrentPage(details.page)
                 }
-                className="w-48"
-                positioning={{ gutter: 4 }}
+                className="flex items-center gap-x-2"
               >
-                <Select.Label className="mb-1 text-sm font-bold">
-                  Category
-                </Select.Label>
-                <Select.Control>
-                  <Select.Trigger className="flex w-full items-center justify-between rounded border bg-white p-2 text-left">
-                    <Select.ValueText />
-                    <Select.Indicator>▼</Select.Indicator>
-                  </Select.Trigger>
-                </Select.Control>
-                <Portal>
-                  <Select.Positioner>
-                    <Select.Content className="z-105 rounded border bg-white shadow-lg">
-                      {categories.map((c) => (
-                        <Select.Item
-                          key={c}
-                          item={{ label: c, value: c }}
-                          className="cursor-pointer p-2 hover:bg-gray-100"
+                <Pagination.PrevTrigger
+                  type="button"
+                  className="rounded p-2 text-sm hover:bg-gray-100 disabled:text-gray-400"
+                  disabled={currentPage === 1}
+                >
+                  Previous
+                </Pagination.PrevTrigger>
+                <Pagination.Context>
+                  {(pagination) =>
+                    pagination.pages.map((page, index: number) =>
+                      page.type === 'page' ? (
+                        <Pagination.Item
+                          key={index}
+                          {...page}
+                          type="page"
+                          className={classNames(
+                            'flex h-9 w-9 items-center justify-center rounded text-sm',
+                            page.value === currentPage
+                              ? 'bg-blue-600 font-bold text-white'
+                              : 'hover:bg-gray-100'
+                          )}
                         >
-                          <Select.ItemText>{c}</Select.ItemText>
-                        </Select.Item>
-                      ))}
-                    </Select.Content>
-                  </Select.Positioner>
-                </Portal>
-              </Select.Root>
-
-              <Combobox.Root
-                collection={comboboxCollection}
-                onInputValueChange={(e: ComboboxInputValueChangeDetails) =>
-                  setSearchTerm(e.inputValue)
-                }
-                className="flex-1"
-                positioning={{ gutter: 4 }}
-              >
-                <Combobox.Label className="mb-1 text-sm font-bold">
-                  Filter by Title
-                </Combobox.Label>
-                <Combobox.Control>
-                  <Combobox.Input
-                    placeholder="Search by title..."
-                    className="w-full rounded border p-2"
-                  />
-                </Combobox.Control>
-                <Portal>
-                  <Combobox.Positioner>
-                    <Combobox.Content className="z-105 rounded border bg-white shadow-lg">
-                      {filteredEntries.map((entry: DesignLibraryEntry) => (
-                        <Combobox.Item
-                          key={entry.title}
-                          item={entry}
-                          className="cursor-pointer p-2 hover:bg-gray-100"
+                          {page.value}
+                        </Pagination.Item>
+                      ) : (
+                        <Pagination.Ellipsis
+                          key={index}
+                          index={index}
+                          className="px-2 text-sm"
                         >
-                          <Combobox.ItemText>{entry.title}</Combobox.ItemText>
-                        </Combobox.Item>
-                      ))}
-                    </Combobox.Content>
-                  </Combobox.Positioner>
-                </Portal>
-              </Combobox.Root>
-            </nav>
-
-            <main className="flex-1 overflow-y-auto bg-gray-100 p-6">
-              {mergedTemplates.length === 0 ? (
-                <div className="flex h-full items-center justify-center">
-                  <p className="text-gray-500">No designs found.</p>
-                </div>
-              ) : (
-                <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-                  {mergedTemplates.map(({ template }) => (
-                    <TemplatePreviewItem
-                      key={template.id}
-                      template={template}
-                      onClick={() => handleSelectTemplate(template)}
-                    />
-                  ))}
-                </div>
-              )}
-            </main>
-
-            {totalPages > 1 && (
-              <footer className="flex items-center justify-center border-t p-4">
-                <Pagination.Root
-                  count={totalPages * PAGE_SIZE}
-                  pageSize={PAGE_SIZE}
-                  siblingCount={1}
-                  page={currentPage}
-                  onPageChange={(details: PaginationPageChangeDetails) =>
-                    setCurrentPage(details.page)
+                          ...
+                        </Pagination.Ellipsis>
+                      )
+                    )
                   }
-                  className="flex items-center gap-x-2"
+                </Pagination.Context>
+                <Pagination.NextTrigger
+                  type="button"
+                  className="rounded p-2 text-sm hover:bg-gray-100 disabled:text-gray-400"
+                  disabled={currentPage === totalPages}
                 >
-                  <Pagination.PrevTrigger
-                    type="button"
-                    className="rounded p-2 text-sm hover:bg-gray-100 disabled:text-gray-400"
-                    disabled={currentPage === 1}
-                  >
-                    Previous
-                  </Pagination.PrevTrigger>
-                  <Pagination.Context>
-                    {(pagination) =>
-                      pagination.pages.map((page, index: number) =>
-                        page.type === 'page' ? (
-                          <Pagination.Item
-                            key={index}
-                            {...page}
-                            type="page"
-                            className={classNames(
-                              'flex h-9 w-9 items-center justify-center rounded text-sm',
-                              page.value === currentPage
-                                ? 'bg-blue-600 font-bold text-white'
-                                : 'hover:bg-gray-100'
-                            )}
-                          >
-                            {page.value}
-                          </Pagination.Item>
-                        ) : (
-                          <Pagination.Ellipsis
-                            key={index}
-                            index={index}
-                            className="px-2 text-sm"
-                          >
-                            ...
-                          </Pagination.Ellipsis>
-                        )
-                      )
-                    }
-                  </Pagination.Context>
-                  <Pagination.NextTrigger
-                    type="button"
-                    className="rounded p-2 text-sm hover:bg-gray-100 disabled:text-gray-400"
-                    disabled={currentPage === totalPages}
-                  >
-                    Next
-                  </Pagination.NextTrigger>
-                </Pagination.Root>
-              </footer>
-            )}
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Portal>
+                  Next
+                </Pagination.NextTrigger>
+              </Pagination.Root>
+            </footer>
+          )}
+        </Dialog.Content>
+      </Dialog.Positioner>
     </Dialog.Root>
   );
 };

package/templates/src/components/edit/pane/steps/DesignLibraryStep.tsx

@@ -30,7 +30,6 @@ import { classNames } from '@/utils/helpers';
 
 const PAGE_SIZE = 12;
 
-// --- Sub-component for rendering a single preview item ---
 interface TemplatePreviewItemProps {
   storageTemplate: StoragePane;
   onClick: () => void;
@@ -224,7 +223,6 @@ export const DesignLibraryStep = ({ onSelect }: DesignLibraryStepProps) => {
         2. Choose a Design
       </label>
 
-      {/* --- Filters --- */}
       <nav className="flex items-center gap-x-4 rounded-md border bg-white p-3">
         <Select.Root
           collection={selectCollection}

package/templates/src/components/edit/state/SaveToLibraryModal.tsx

@@ -1,6 +1,7 @@
 import { useState, useMemo, useEffect } from 'react';
 import { CheckIcon } from '@heroicons/react/20/solid';
 import { savePaneToLibrary } from '@/utils/compositor/designLibraryHelper';
+import { convertToBackendFormat } from '@/utils/api/brandHelpers';
 import StringInput from '@/components/form/StringInput';
 import { brandConfigStore } from '@/stores/storykeep';
 
@@ -87,8 +88,9 @@ export function SaveToLibraryModal({
         formData
       );
       if (newBrandConfig) {
+        const backendDTO = convertToBackendFormat(newBrandConfig);
         brandConfigStore.set({
-          ...newBrandConfig,
+          ...backendDTO, // Use the converted DTO
           TENANT_ID: brandConfig.TENANT_ID,
         });
         setSaveState('saved');