astro-tractstack 2.0.0-rc.8 → 2.0.0

package/templates/src/components/edit/ToolMode.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 import { useStore } from '@nanostores/react';
 import PencilSquareIcon from '@heroicons/react/24/outline/PencilSquareIcon';
 import PaintBrushIcon from '@heroicons/react/24/outline/PaintBrushIcon';
@@ -41,12 +41,6 @@ const storykeepToolModes = [
     title: 'Move',
     description: 'Keyboard accessible re-order',
   },
-  {
-    key: 'debug' as const,
-    Icon: BugAntIcon,
-    title: 'Debug',
-    description: 'Debug node ids',
-  },
 ] as const;
 
 interface StoryKeepToolModeProps {
@@ -54,9 +48,10 @@ interface StoryKeepToolModeProps {
 }
 
 const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
-  //const signal = useStore(settingsPanelStore);
   const ctx = getCtx();
   const { value: toolModeVal } = useStore(ctx.toolModeValStore);
+  const showGuids = useStore(ctx.showGuids);
+  const navRef = useRef<HTMLElement>(null);
 
   const hasTitle = useStore(ctx.hasTitle);
   const hasPanes = useStore(ctx.hasPanes);
@@ -64,6 +59,8 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
   const className =
     'w-8 h-8 py-1 rounded-xl bg-white text-myblue hover:bg-mygreen/20 hover:text-black hover:rotate-3 cursor-pointer transition-all';
   const classNameActive = 'w-8 h-8 py-1.5 rounded-md bg-myblue text-white';
+  const classNameDebugActive =
+    'w-8 h-8 py-1.5 rounded-md bg-orange-500 text-white';
 
   const currentToolMode =
     storykeepToolModes.find((mode) => mode.key === toolModeVal) ??
@@ -72,49 +69,65 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
   const handleClick = (mode: ToolModeVal) => {
     settingsPanelStore.set(null);
     ctx.toolModeValStore.set({ value: mode });
-    ctx.showGuids.set(mode === `debug`);
     ctx.notifyNode('root');
   };
 
-  // Escape key listener
+  const handleDebugToggle = () => {
+    ctx.showGuids.set(!showGuids);
+    ctx.notifyNode('root');
+  };
+
   useEffect(() => {
     const handleEscapeKey = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         ctx.toolModeValStore.set({ value: 'text' });
-        console.log('Tool mode reset to text via Escape');
+        ctx.notifyNode('root');
       }
     };
+
     document.addEventListener('keydown', handleEscapeKey);
+
     return () => {
       document.removeEventListener('keydown', handleEscapeKey);
     };
   }, [ctx]);
 
-  if (!hasTitle || (!hasPanes && !isContext)) return null;
+  if (!hasTitle || (!hasPanes && !isContext)) {
+    return null;
+  }
 
   return (
-    <nav
-      id="mainNav"
-      className="z-102 bg-mywhite fixed bottom-0 left-0 right-0 pt-1.5 md:sticky md:bottom-auto md:left-0 md:top-24 md:h-screen md:w-16 md:pt-0"
-    >
-      <div className="flex flex-wrap justify-around gap-4 py-3.5 md:mt-0 md:flex-col md:items-center md:gap-8 md:space-x-0 md:space-y-2 md:py-2">
-        <div className="text-mydarkgrey h-16 text-center text-sm font-bold">
-          mode:
-          <div className="font-action text-myblue pt-1.5 text-center text-xs">
-            {currentToolMode.title}
+    <>
+      <nav
+        id="mainNav"
+        ref={navRef}
+        className="z-102 bg-mywhite md:bg-mywhite/70 fixed bottom-0 left-0 right-0 p-1.5 md:bottom-2 md:right-auto md:h-auto md:w-auto md:rounded-r-xl md:border md:border-black/5 md:p-2 md:shadow-lg md:backdrop-blur-sm"
+      >
+        <div className="flex flex-wrap justify-around gap-4 py-0.5 md:flex-nowrap md:justify-start md:gap-4 md:p-0">
+          <div className="text-mydarkgrey text-center text-sm font-bold">
+            mode:
+            <div className="font-action text-myblue pt-1.5 text-center text-xs">
+              {currentToolMode.title}
+            </div>
           </div>
-        </div>
-        {storykeepToolModes.map(({ key, Icon, description }) => (
-          <div title={description} key={key}>
-            {key === toolModeVal ? (
-              <Icon className={classNameActive} />
-            ) : (
-              <Icon className={className} onClick={() => handleClick(key)} />
-            )}
+          {storykeepToolModes.map(({ key, Icon, description }) => (
+            <div title={description} key={key}>
+              {key === toolModeVal ? (
+                <Icon className={classNameActive} />
+              ) : (
+                <Icon className={className} onClick={() => handleClick(key)} />
+              )}
+            </div>
+          ))}
+          <div title="Toggle debug node ids" key="debug">
+            <BugAntIcon
+              className={showGuids ? classNameDebugActive : className}
+              onClick={handleDebugToggle}
+            />
           </div>
-        ))}
-      </div>
-    </nav>
+        </div>
+      </nav>
+    </>
   );
 };
 

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

@@ -14,7 +14,9 @@ import {
   type SnapshotData,
 } from '@/components/compositor/preview/PaneSnapshotGenerator';
 import { createEmptyStorykeep } from '@/utils/compositor/nodesHelper';
+import { tailwindToHex } from '@/utils/compositor/tailwindColors';
 import { getTemplateVisualBreakPane } from '@/utils/compositor/TemplatePanes';
+import { SvgBreaks } from '@/constants/shapes';
 import {
   PaneAddMode,
   type PaneNode,
@@ -243,8 +245,16 @@ const AddPaneBreakPanel = ({
       }
     }
 
-    template.bgColour = belowColor;
-    const svgFill = aboveColor === belowColor ? 'black' : aboveColor;
+    const shapeName = `kCz${variant}`;
+    const isFlipped = SvgBreaks[shapeName]?.flipped || false;
+    template.bgColour = tailwindToHex(
+      isFlipped ? aboveColor : belowColor,
+      null
+    );
+    const svgFill = tailwindToHex(
+      isFlipped ? belowColor : aboveColor === belowColor ? 'black' : aboveColor,
+      null
+    );
 
     if (template.bgPane) {
       if (template.bgPane.type === 'visual-break') {

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

@@ -62,7 +62,12 @@ const AddPaneCodeHookPanel = ({
   }, [filteredHooks]);
 
   const isHookAvailable = (hookName: string) => {
-    if (hookName === 'featured-content' || hookName === 'list-content') {
+    if (
+      (hookName === 'featured-content' ||
+        hookName === 'list-content' ||
+        hookName === 'featured-article') &&
+      !hasStoryFragments
+    ) {
       return hasStoryFragments;
     }
     return true;
@@ -153,7 +158,8 @@ const AddPaneCodeHookPanel = ({
       font-weight: bold;
     }
     .hook-item-available:hover {
-      background-color: rgba(8, 145, 178, 0.1); /* bg-cyan-600/10 */
+      background-color: #0891b2;
+      color: #fff;
     }
     .hook-item-disabled {
       background-color: #f9fafb; /* bg-gray-50 */

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

@@ -165,7 +165,7 @@ ${additionalInstructions}`;
                       Content has been generated successfully! Click "Apply
                       Content" to use this content with your selected design.
                     </p>
-                    <div className="max-h-[60vh] overflow-y-auto rounded-md border border-gray-200 bg-gray-50 p-4">
+                    <div className="overflow-y-auto rounded-md border border-gray-200 bg-gray-50 p-4">
                       <pre className="whitespace-pre-wrap font-mono text-sm text-gray-800">
                         {generatedContent}
                       </pre>

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

@@ -9,10 +9,13 @@ import {
   isContextPaneNode,
   hasBeliefPayload,
 } from '@/utils/compositor/typeGuards';
-import { settingsPanelStore, viewportKeyStore } from '@/stores/storykeep';
+import {
+  settingsPanelStore,
+  viewportKeyStore,
+  fullContentMapStore,
+} from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import PaneTitlePanel from './PanePanel_title';
-import PaneSlugPanel from './PanePanel_slug';
 import PaneMagicPathPanel from './PanePanel_path';
 import PaneImpressionPanel from './PanePanel_impression';
 import { PaneConfigMode, type PaneNode } from '@/types/compositorTypes';
@@ -30,7 +33,7 @@ const ConfigPanePanel = ({ nodeId }: ConfigPanePanelProps) => {
   const reorderMode = toolMode.value === `move`;
   const isActiveMode =
     activePaneMode.panel === 'settings' && activePaneMode.paneId === nodeId;
-
+  const $contentMap = useStore(fullContentMapStore);
   const $viewportKey = useStore(viewportKeyStore);
   const isMobile = $viewportKey.value === `mobile`;
 
@@ -68,6 +71,7 @@ const ConfigPanePanel = ({ nodeId }: ConfigPanePanelProps) => {
   };
 
   const handleCodeHookConfig = () => {
+    ctx.toolModeValStore.set({ value: 'styles' });
     settingsPanelStore.set({
       action: 'setup-codehook',
       nodeId: nodeId,
@@ -103,8 +107,6 @@ const ConfigPanePanel = ({ nodeId }: ConfigPanePanelProps) => {
 
   if (mode === PaneConfigMode.TITLE) {
     return <PaneTitlePanel nodeId={nodeId} setMode={setSaveMode} />;
-  } else if (mode === PaneConfigMode.SLUG) {
-    return <PaneSlugPanel nodeId={nodeId} setMode={setSaveMode} />;
   } else if (mode === PaneConfigMode.PATH) {
     return <PaneMagicPathPanel nodeId={nodeId} setMode={setSaveMode} />;
   } else if (mode === PaneConfigMode.IMPRESSION) {
@@ -136,28 +138,16 @@ const ConfigPanePanel = ({ nodeId }: ConfigPanePanelProps) => {
               <>
                 {!isTemplate && (
                   <>
-                    <button
-                      onClick={() => setSaveMode(PaneConfigMode.TITLE)}
-                      className={buttonClass}
-                    >
-                      Pane Title
-                      {!isMobile && (
-                        <>
-                          : <strong>{paneNode.title}</strong>
-                        </>
-                      )}
-                    </button>
-                    <button
-                      onClick={() => setSaveMode(PaneConfigMode.SLUG)}
-                      className={buttonClass}
-                    >
-                      Slug
-                      {!isMobile && (
-                        <>
-                          : <strong>{paneNode.slug}</strong>
-                        </>
-                      )}
-                    </button>
+                    {$contentMap.some(
+                      (item) => item.type === 'Pane' && item.id === nodeId
+                    ) && (
+                      <button
+                        onClick={() => setSaveMode(PaneConfigMode.TITLE)}
+                        className={buttonClass}
+                      >
+                        ID
+                      </button>
+                    )}
                     <button
                       onClick={() => setSaveMode(PaneConfigMode.IMPRESSION)}
                       className={buttonClass}

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

@@ -4,7 +4,7 @@ import { RadioGroup } from '@ark-ui/react/radio-group';
 import CheckCircleIcon from '@heroicons/react/20/solid/CheckCircleIcon';
 import CubeTransparentIcon from '@heroicons/react/24/outline/CubeTransparentIcon';
 import DocumentIcon from '@heroicons/react/24/outline/DocumentIcon';
-import NewspaperIcon from '@heroicons/react/24/outline/NewspaperIcon';
+//import NewspaperIcon from '@heroicons/react/24/outline/NewspaperIcon';
 import ExclamationTriangleIcon from '@heroicons/react/24/outline/ExclamationTriangleIcon';
 import AddPanePanel from './AddPanePanel';
 import PageCreationGen from './PageGen';
@@ -75,21 +75,21 @@ export const PageCreationSelector = ({
         : []),
     ];
 
-    const featuredMode = {
-      id: 'featured',
-      name: 'Featured Content home page',
-      description:
-        'A layout with a prominent hero section showcasing a featured article and grid of additional top articles',
-      icon: NewspaperIcon,
-      active: true,
-      disabled: validPagesCount < 3,
-      disabledReason:
-        validPagesCount === 0
-          ? 'Not yet available; no pages with SEO metadata found.'
-          : `Not yet available; requires at least 3 pages with SEO metadata (currently ${validPagesCount}).`,
-    };
-
-    return [...baseModesWithoutFeature, featuredMode] as CreationMode[];
+    //const featuredMode = {
+    //  id: 'featured',
+    //  name: 'Featured Content home page',
+    //  description:
+    //    'A layout with a prominent hero section showcasing a featured article and grid of additional top articles',
+    //   icon: NewspaperIcon,
+    //  active: true,
+    //  disabled: validPagesCount < 3,
+    //  disabledReason:
+    //   validPagesCount === 0
+    //     ? 'Not yet available; no pages with SEO metadata found.'
+    //     : `Not yet available; requires at least 3 pages with SEO metadata (currently ${validPagesCount}).`,
+    //};
+
+    return [...baseModesWithoutFeature /*, featuredMode */] as CreationMode[];
   }, [validPagesCount]);
 
   const handleContinue = () => {

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

@@ -2,13 +2,13 @@ import { useState } from 'react';
 import type { ReactNode } from 'react';
 import { RadioGroup } from '@ark-ui/react/radio-group';
 import { ulid } from 'ulid';
-import FeaturedContentPreview from '@/components/compositor/preview/FeaturedContentPreview';
-import ListContentPreview from '@/components/compositor/preview/ListContentPreview';
 import VisualBreakPreview from '@/components/compositor/preview/VisualBreakPreview';
 import { getTemplateVisualBreakPane } from '@/utils/compositor/TemplatePanes';
 import { fullContentMapStore } from '@/stores/storykeep';
 import type { NodesContext } from '@/stores/nodes';
 import { findUniqueSlug } from '@/utils/helpers';
+import { tailwindToHex } from '@/utils/compositor/tailwindColors';
+import { SvgBreaks } from '@/constants/shapes';
 import type { StoryFragmentNode, TemplatePane } from '@/types/compositorTypes';
 
 // Layout options with IDs, labels, and descriptions
@@ -95,19 +95,14 @@ const PageCreationSpecial = ({
       const featuredContentPane: TemplatePane = {
         id: ulid(),
         nodeType: 'Pane',
-        title: 'Featured Content',
-        slug: findUniqueSlug(`featured-content`, existingSlugs),
+        title: 'Featured Article',
+        slug: findUniqueSlug(`featured-article`, existingSlugs),
         isDecorative: false,
         parentId: nodeId,
-        codeHookTarget: 'featured-content',
+        codeHookTarget: 'featured-article',
         codeHookPayload: {
           options: JSON.stringify({
-            title: 'Featured Content',
-            featured: true,
-            slugs: '',
-            category: '',
-            limit: '6',
-            showDate: 'true',
+            title: 'Featured Article',
           }),
         },
       };
@@ -128,24 +123,36 @@ const PageCreationSpecial = ({
         const bgColor = breakVariant?.odd ? 'white' : 'gray-50';
         const fillColor = breakVariant?.odd ? 'gray-50' : 'white';
 
+        const shapeName = `kCz${selectedBreak}`;
+        const isFlipped = SvgBreaks[shapeName]?.flipped || false;
+
+        const finalBgColor = tailwindToHex(
+          isFlipped ? fillColor : bgColor,
+          null
+        );
+        const finalFillColor = tailwindToHex(
+          isFlipped ? bgColor : fillColor,
+          null
+        );
+
         // 2. Create Visual Break pane
         const visualBreakTemplate = getTemplateVisualBreakPane(selectedBreak);
         visualBreakTemplate.id = ulid();
         visualBreakTemplate.title = 'Visual Break';
         visualBreakTemplate.slug = `${storyfragment.slug}-visual-break`;
-        visualBreakTemplate.bgColour = bgColor;
+        visualBreakTemplate.bgColour = finalBgColor;
 
         // Configure the SVG fill color
         if (visualBreakTemplate.bgPane) {
           if (visualBreakTemplate.bgPane.type === 'visual-break') {
             if (visualBreakTemplate.bgPane.breakDesktop) {
-              visualBreakTemplate.bgPane.breakDesktop.svgFill = fillColor;
+              visualBreakTemplate.bgPane.breakDesktop.svgFill = finalFillColor;
             }
             if (visualBreakTemplate.bgPane.breakTablet) {
-              visualBreakTemplate.bgPane.breakTablet.svgFill = fillColor;
+              visualBreakTemplate.bgPane.breakTablet.svgFill = finalFillColor;
             }
             if (visualBreakTemplate.bgPane.breakMobile) {
-              visualBreakTemplate.bgPane.breakMobile.svgFill = fillColor;
+              visualBreakTemplate.bgPane.breakMobile.svgFill = finalFillColor;
             }
           }
         }
@@ -171,7 +178,10 @@ const PageCreationSpecial = ({
           isDecorative: false,
           parentId: nodeId,
           // For complete-home layout, match the background color with the visual break
-          bgColour: selectedLayout === 'complete-home' ? 'gray-50' : 'white',
+          bgColour: tailwindToHex(
+            selectedLayout === 'complete-home' ? 'gray-50' : 'white',
+            null
+          ),
           codeHookTarget: 'list-content',
           codeHookPayload: {
             options: JSON.stringify({
@@ -299,39 +309,6 @@ const PageCreationSpecial = ({
         )}
       </div>
 
-      <div className="mt-8 rounded-lg border bg-white p-4 shadow-md">
-        <h3 className="mb-4 text-lg font-bold">Preview</h3>
-
-        {selectedLayout === 'featured-only' && <FeaturedContentPreview />}
-
-        {selectedLayout === 'featured-list' && (
-          <div>
-            <FeaturedContentPreview />
-            <ListContentPreview bgColour="#ffffff" />
-          </div>
-        )}
-
-        {selectedLayout === 'complete-home' && (
-          <div>
-            <FeaturedContentPreview />
-            <VisualBreakPreview
-              bgColour={
-                breakVariants.find((b) => b.id === selectedBreak)?.odd
-                  ? '#ffffff'
-                  : '#f1f5f9'
-              }
-              fillColour={
-                breakVariants.find((b) => b.id === selectedBreak)?.odd
-                  ? '#f1f5f9'
-                  : '#ffffff'
-              }
-              variant={selectedBreak}
-            />
-            <ListContentPreview bgColour="#f1f5f9" />
-          </div>
-        )}
-      </div>
-
       <div className="mt-6 flex justify-end gap-3">
         <button
           onClick={() => {

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

@@ -12,6 +12,8 @@ import {
   getIntroDesign,
   getWithArtpackImageDesign,
 } from '@/utils/compositor/templateMarkdownStyles';
+import { tailwindToHex } from '@/utils/compositor/tailwindColors';
+import { SvgBreaks } from '@/constants/shapes';
 import {
   parsePageMarkdown,
   validatePageMarkdown,
@@ -243,8 +245,21 @@ export const PageCreationPreview = ({
               ? design.visualBreaks.odd()
               : design.visualBreaks.even();
 
-            breakTemplate.bgColour = aboveColor;
-            const svgFill = belowColor;
+            const breakData = breakTemplate.bgPane?.breakDesktop;
+            const shapeName = breakData
+              ? `${breakData.collection}${breakData.image}`
+              : '';
+            const isFlipped =
+              (shapeName && SvgBreaks[shapeName]?.flipped) || false;
+
+            breakTemplate.bgColour = tailwindToHex(
+              isFlipped ? belowColor : aboveColor,
+              null
+            );
+            const svgFill = tailwindToHex(
+              isFlipped ? aboveColor : belowColor,
+              null
+            );
             if (breakTemplate.bgPane) {
               if (breakTemplate.bgPane.breakDesktop) {
                 breakTemplate.bgPane.breakDesktop.svgFill = svgFill;

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

@@ -60,7 +60,6 @@ const PaneMagicPathPanel = ({ nodeId, setMode }: PaneMagicPathPanelProps) => {
       if (!idsResponse.ok) throw new Error('Failed to fetch belief IDs');
 
       const idsResult = await idsResponse.json();
-      // CORRECTED: The key from the backend is "beliefIds", not "beliefs"
       if (!idsResult.beliefIds || idsResult.beliefIds.length === 0) {
         setAvailableBeliefs([]);
         setIsLoading(false);
@@ -74,7 +73,6 @@ const PaneMagicPathPanel = ({ nodeId, setMode }: PaneMagicPathPanelProps) => {
           'Content-Type': 'application/json',
           'X-Tenant-ID': tenantId,
         },
-        // CORRECTED: Pass the array from the correct key "beliefIds"
         body: JSON.stringify({ beliefIds: idsResult.beliefIds }),
       });
 
@@ -222,7 +220,7 @@ const PaneMagicPathPanel = ({ nodeId, setMode }: PaneMagicPathPanelProps) => {
         </div>
 
         <div className="flex w-full flex-wrap gap-8">
-          <div className="min-w-[400px] flex-1">
+          <div className="flex-1">
             <MagicPathBuilder
               paths={heldPaths}
               setPaths={handleHeldPathsChange}
@@ -232,7 +230,7 @@ const PaneMagicPathPanel = ({ nodeId, setMode }: PaneMagicPathPanelProps) => {
             />
           </div>
 
-          <div className="min-w-[400px] flex-1">
+          <div className="flex-1">
             <MagicPathBuilder
               paths={withheldPaths}
               setPaths={handleWithheldPathsChange}