astro-tractstack 2.0.0-rc.57 → 2.0.0-rc.58

package/package.json

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

package/templates/src/components/Header.astro

@@ -185,7 +185,11 @@ const authStatus = {
         ) : null
       }
 
-      <SearchWrapper contentMap={fullContentMap} client:load />
+      {
+        !isStoryKeep && (
+          <SearchWrapper contentMap={fullContentMap} client:load />
+        )
+      }
 
       <script is:inline define:vars={{ sessionId }}>
         function initRememberMe() {

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

@@ -20,8 +20,8 @@ import type {
 
 interface BunnyVideoSetupProps {
   nodeId: string;
-  params?: any;
-  config?: BrandConfig;
+  params: any;
+  config: BrandConfig;
 }
 
 interface Chapter extends VideoMoment {

package/templates/src/components/codehooks/FeaturedArticle.astro

@@ -31,11 +31,15 @@ const featuredStory = contentMap.find(
     item.panes.length > 0 &&
     item.thumbSrc
 );
+const bgColor = parsedOptions.bgColor || '';
 ---
 
 {
   featuredStory ? (
-    <div class="mx-auto w-full max-w-7xl px-8 py-12">
+    <div
+      class="mx-auto w-full max-w-7xl px-8 py-12"
+      style={bgColor ? `background-color: ${bgColor}` : ''}
+    >
       <div class="grid grid-cols-1 items-center gap-x-16 gap-y-12 md:grid-cols-2">
         <div class="w-full">
           <a href={`/${featuredStory.slug}`} class="block">

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

@@ -6,11 +6,14 @@ import { ChevronUpDownIcon, CheckIcon } from '@heroicons/react/20/solid';
 import { fullContentMapStore, viewportKeyStore } from '@/stores/storykeep';
 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>;
+  params: Record<string, string>;
   nodeId: string;
+  config: BrandConfig;
 }
 
 const comboboxItemStyles = `
@@ -25,6 +28,7 @@ const comboboxItemStyles = `
 const FeaturedArticleSetup = ({
   params,
   nodeId,
+  config,
 }: FeaturedArticleSetupProps) => {
   const $contentMap = useStore(fullContentMapStore);
   const $viewportKey = useStore(viewportKeyStore);
@@ -52,6 +56,7 @@ const FeaturedArticleSetup = ({
   const [isPanelOpen, setIsPanelOpen] = useState(false);
   const [selectedSlug, setSelectedSlug] = useState(initialSlug);
   const [query, setQuery] = useState(initialStory?.title || '');
+  const [bgColor, setBgColor] = useState(params?.bgColor || '');
 
   const selectedStory = useMemo(
     () => availableStories.find((story) => story.slug === selectedSlug),
@@ -81,10 +86,20 @@ const FeaturedArticleSetup = ({
         ...paneNode,
         codeHookTarget: 'featured-article',
         codeHookPayload: {
-          options: JSON.stringify({ slug: selectedSlug }),
+          options: JSON.stringify({
+            slug: selectedSlug,
+            bgColor: bgColor,
+          }),
         },
+        bgColour: bgColor || undefined,
         isChanged: true,
       };
+
+      // If bgColor is empty, remove the property
+      if (!bgColor) {
+        delete updatedNode.bgColour;
+      }
+
       ctx.modifyNodes([updatedNode]);
     }
   };
@@ -96,7 +111,7 @@ const FeaturedArticleSetup = ({
     }
     const timeoutId = setTimeout(updatePaneNode, 500);
     return () => clearTimeout(timeoutId);
-  }, [selectedSlug]);
+  }, [selectedSlug, bgColor]);
 
   const handleSelection = (details: { value: string[] }) => {
     const slug = details.value[0] || '';
@@ -268,6 +283,26 @@ const FeaturedArticleSetup = ({
         </Combobox.Root>
       </div>
 
+      <div className="rounded-lg bg-white p-4 shadow">
+        <div className="border-b border-gray-200 pb-4">
+          <h3 className="text-lg font-bold text-gray-900">Display Settings</h3>
+        </div>
+        <div className="space-y-4 pt-4">
+          <div>
+            <ColorPickerCombo
+              title="Background Color"
+              defaultColor={bgColor}
+              onColorChange={(color: string) => setBgColor(color)}
+              config={config!}
+              allowNull={true}
+            />
+            <p className="mt-1 text-xs text-gray-500">
+              Set a background color for the featured article section
+            </p>
+          </div>
+        </div>
+      </div>
+
       {selectedStory && (
         <div className="rounded-lg bg-white p-4 shadow">
           <h3 className="border-b border-gray-200 pb-2 text-lg font-bold">

package/templates/src/components/codehooks/ListContent.astro

@@ -62,9 +62,14 @@ const sortedStories = [...filteredStories].sort((a, b) => {
 // The initial display
 const initialStories = sortedStories.slice(0, pageSize);
 const totalPages = Math.ceil(sortedStories.length / pageSize);
+
+const bgColor = parsedOptions.bgColor || '';
 ---
 
-<div class="mx-auto max-w-7xl p-4 py-12">
+<div
+  class="mx-auto max-w-7xl p-4 py-12"
+  style={bgColor ? `background-color: ${bgColor}` : ''}
+>
   {
     initialStories.length === 0 && (
       <div class="rounded-lg bg-gray-50 px-4 py-12 text-center">

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

@@ -9,24 +9,10 @@ import type { PaneNode } from '@/types/compositorTypes';
 
 const PER_PAGE = 20;
 
-// V2 Analytics Data Structure
-interface StoryfragmentAnalytics {
-  id: string;
-  total_actions: number;
-  unique_visitors: number;
-  last_24h_actions: number;
-  last_7d_actions: number;
-  last_28d_actions: number;
-  last_24h_unique_visitors: number;
-  last_7d_unique_visitors: number;
-  last_28d_unique_visitors: number;
-  total_leads: number;
-}
-
 interface ListContentSetupProps {
   params?: Record<string, string>;
   nodeId: string;
-  config?: BrandConfig;
+  config: BrandConfig;
 }
 
 const ListContentSetup = ({
@@ -34,17 +20,9 @@ const ListContentSetup = ({
   nodeId,
   config,
 }: ListContentSetupProps) => {
-  const [analyticsData, setAnalyticsData] = useState<
-    Record<string, StoryfragmentAnalytics>
-  >({});
-  const [isAnalyticsLoading, setIsAnalyticsLoading] = useState(true);
   const $contentMap = useStore(fullContentMapStore);
-
   const [isPanelOpen, setIsPanelOpen] = useState(false);
 
-  const [selectedMode, setSelectedMode] = useState(
-    params?.defaultMode || 'recent'
-  );
   const [excludedIds, setExcludedIds] = useState<string[]>(
     params?.excludedIds ? params.excludedIds.split(',') : []
   );
@@ -89,47 +67,6 @@ const ListContentSetup = ({
     }
   });
 
-  const fetchAnalyticsData = async () => {
-    try {
-      setIsAnalyticsLoading(true);
-      // Updated to use V2 API endpoint
-      const response = await fetch('/api/v1/analytics/storyfragments', {
-        headers: {
-          'X-Tenant-ID': window.TRACTSTACK_CONFIG?.tenantId || 'default',
-        },
-      });
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-
-      const analyticsArray = await response.json();
-
-      // Transform array to a map keyed by ID for easier lookup
-      // V2 API returns array directly, not wrapped in a success/data structure
-      const analyticsById = Array.isArray(analyticsArray)
-        ? analyticsArray.reduce(
-            (
-              acc: Record<string, StoryfragmentAnalytics>,
-              item: StoryfragmentAnalytics
-            ) => {
-              acc[item.id] = item;
-              return acc;
-            },
-            {}
-          )
-        : {};
-
-      setAnalyticsData(analyticsById);
-    } catch (error) {
-      console.error('Error fetching analytics data:', error);
-      // Set empty analytics on error to prevent blocking the UI
-      setAnalyticsData({});
-    } finally {
-      setIsAnalyticsLoading(false);
-    }
-  };
-
   const topics = Array.from(topicMap.entries())
     .map(([name, { count, pageIds }]) => ({
       name,
@@ -147,12 +84,8 @@ const ListContentSetup = ({
     );
   });
 
+  // Always sort by most recent
   const sortedPages = [...filteredPages].sort((a, b) => {
-    if (selectedMode === 'popular') {
-      const aViews = analyticsData[a.id]?.total_actions || 0;
-      const bViews = analyticsData[b.id]?.total_actions || 0;
-      return bViews - aViews;
-    }
     const bDate = b.changed ? new Date(b.changed) : new Date(0);
     const aDate = a.changed ? new Date(a.changed) : new Date(0);
     return bDate.getTime() - aDate.getTime();
@@ -174,7 +107,6 @@ const ListContentSetup = ({
           codeHookTarget: 'list-content',
           codeHookPayload: {
             options: JSON.stringify({
-              defaultMode: selectedMode,
               excludedIds: excludedIds.join(','),
               topics: selectedTopics.join(','),
               pageSize: pageSize,
@@ -195,10 +127,6 @@ const ListContentSetup = ({
     }
   };
 
-  useEffect(() => {
-    fetchAnalyticsData();
-  }, []);
-
   useEffect(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
@@ -210,7 +138,7 @@ const ListContentSetup = ({
     }, 500);
 
     return () => clearTimeout(timeoutId);
-  }, [selectedMode, excludedIds, selectedTopics, pageSize, bgColor]);
+  }, [excludedIds, selectedTopics, pageSize, bgColor]);
 
   // Toggle a page's exclusion status
   const toggleExclude = (id: string) => {
@@ -336,7 +264,6 @@ const ListContentSetup = ({
     );
   }
 
-  if (isAnalyticsLoading) return null;
   return (
     <div className="w-full space-y-6 bg-slate-50 p-6">
       <div className="flex items-center justify-between">
@@ -377,29 +304,6 @@ const ListContentSetup = ({
             </select>
           </div>
 
-          <div>
-            <label
-              htmlFor="sort-mode"
-              className="block text-sm font-bold text-gray-700"
-            >
-              Default sort order
-            </label>
-            <select
-              id="sort-mode"
-              name="sort-mode"
-              className="mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-cyan-600 focus:outline-none focus:ring-cyan-600 sm:text-sm"
-              value={selectedMode}
-              onChange={(e) => setSelectedMode(e.target.value)}
-            >
-              <option value="recent">Most Recent</option>
-              <option value="popular">Most Popular</option>
-            </select>
-            <p className="mt-1 text-xs text-gray-500">
-              Note: Users can toggle between views regardless of the default
-              setting
-            </p>
-          </div>
-
           <div>
             <ColorPickerCombo
               title="Background Color"
@@ -533,7 +437,6 @@ const ListContentSetup = ({
           <div className="divide-y divide-gray-200">
             {paginatedPages.map((page) => {
               const isExcluded = excludedIds.includes(page.id);
-              const analytics = analyticsData[page.id];
 
               return (
                 <div key={page.id} className="flex items-center p-4">
@@ -586,19 +489,10 @@ const ListContentSetup = ({
                       </div>
                     )}
                     <div className="mt-1 flex items-center text-xs text-gray-500">
-                      {analytics && (
-                        <>
-                          <span>{analytics.total_actions} views</span>
-                          {page.changed && (
-                            <>
-                              <span className="mx-2">•</span>
-                              <span>
-                                Updated{' '}
-                                {new Date(page.changed).toLocaleDateString()}
-                              </span>
-                            </>
-                          )}
-                        </>
+                      {page.changed && (
+                        <span>
+                          Updated {new Date(page.changed).toLocaleDateString()}
+                        </span>
                       )}
                     </div>
                   </div>

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

@@ -161,18 +161,19 @@ const Pane = memo(
             <FeaturedArticleSetup
               nodeId={props.nodeId}
               params={codeHookParams}
+              config={props.config!}
             />
           ) : codeHookPayload && codeHookTarget === 'list-content' ? (
             <ListContentSetup
               nodeId={props.nodeId}
               params={codeHookParams}
-              config={props.config}
+              config={props.config!}
             />
           ) : codeHookPayload && codeHookTarget === 'bunny-video' ? (
             <BunnyVideoSetup
               nodeId={props.nodeId}
               params={codeHookParams}
-              config={props.config}
+              config={props.config!}
             />
           ) : codeHookPayload && codeHookTarget ? (
             <CodeHookContainer

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

@@ -195,5 +195,14 @@ export const PaneSnapshotGenerator = ({
     generateSnapshot();
   }, [id, htmlString, isGenerating, onComplete, onError, config, outputWidth]);
 
+  // Show spinner while generating
+  if (isGenerating) {
+    return (
+      <div className="flex h-24 items-center justify-center">
+        <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-cyan-600"></div>
+      </div>
+    );
+  }
+
   return null;
 };

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/PageGenSpecial.tsx

@@ -7,6 +7,8 @@ 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
@@ -121,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;
             }
           }
         }
@@ -164,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({

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/panels/StyleBreakPanel.tsx

@@ -155,25 +155,23 @@ const StyleBreakPanel = ({ node, parentNode, config }: BasePanelProps) => {
       </div>
 
       <div className="space-y-4">
-        <div className="grid grid-cols-2 gap-4">
-          <ColorPickerCombo
-            title="Shape Color"
-            defaultColor={settings.svgFill}
-            onColorChange={(color: string) =>
-              setSettings((prev) => ({ ...prev, svgFill: color }))
-            }
-            config={config!}
-          />
-          <ColorPickerCombo
-            title="Background Color"
-            defaultColor={settings.bgColor}
-            onColorChange={(color: string) =>
-              setSettings((prev) => ({ ...prev, bgColor: color }))
-            }
-            config={config!}
-            allowNull={true}
-          />
-        </div>
+        <ColorPickerCombo
+          title="Shape Color"
+          defaultColor={settings.svgFill}
+          onColorChange={(color: string) =>
+            setSettings((prev) => ({ ...prev, svgFill: color }))
+          }
+          config={config!}
+        />
+        <ColorPickerCombo
+          title="Background Color"
+          defaultColor={settings.bgColor}
+          onColorChange={(color: string) =>
+            setSettings((prev) => ({ ...prev, bgColor: color }))
+          }
+          config={config!}
+          allowNull={true}
+        />
       </div>
     </div>
   );

package/templates/src/components/fields/ColorPickerCombo.tsx

@@ -236,7 +236,7 @@ const ColorPickerCombo = ({
               <Combobox.Control ref={comboboxRef}>
                 <div className="relative">
                   <Combobox.Input
-                    className="border-mydarkgrey focus:border-myblue focus:ring-myblue xs:text-sm w-full max-w-48 rounded-md py-2 pl-3 pr-10 shadow-sm"
+                    className="border-mydarkgrey focus:border-myblue focus:ring-myblue xs:text-sm w-full max-w-xl rounded-md py-2 pl-3 pr-10 shadow-sm"
                     placeholder="Search Tailwind colors..."
                     autoComplete="off"
                   />

package/templates/src/components/storykeep/controls/content/MenuForm.tsx

@@ -12,6 +12,8 @@ import StringInput from '@/components/form/StringInput';
 import EnumSelect from '@/components/form/EnumSelect';
 import ActionBuilderField from '@/components/form/ActionBuilderField';
 import UnsavedChangesBar from '@/components/form/UnsavedChangesBar';
+import ArrowUpIcon from '@heroicons/react/24/outline/ArrowUpIcon';
+import ArrowDownIcon from '@heroicons/react/24/outline/ArrowDownIcon';
 import type {
   MenuNode,
   MenuNodeState,
@@ -88,6 +90,26 @@ export default function MenuForm({
     formState.updateField('menuLinks', newState.menuLinks);
   };
 
+  const handleMoveUp = (index: number) => {
+    if (index === 0) return;
+    const newMenuLinks = [...formState.state.menuLinks];
+    [newMenuLinks[index - 1], newMenuLinks[index]] = [
+      newMenuLinks[index],
+      newMenuLinks[index - 1],
+    ];
+    formState.updateField('menuLinks', newMenuLinks);
+  };
+
+  const handleMoveDown = (index: number) => {
+    if (index === formState.state.menuLinks.length - 1) return;
+    const newMenuLinks = [...formState.state.menuLinks];
+    [newMenuLinks[index], newMenuLinks[index + 1]] = [
+      newMenuLinks[index + 1],
+      newMenuLinks[index],
+    ];
+    formState.updateField('menuLinks', newMenuLinks);
+  };
+
   const handleCancel = () => {
     onClose?.(false);
   };
@@ -155,13 +177,39 @@ export default function MenuForm({
                   <h4 className="text-sm font-bold text-gray-900">
                     Link {index + 1}
                   </h4>
-                  <button
-                    type="button"
-                    onClick={() => handleRemoveLink(index)}
-                    className="text-sm font-bold text-red-600 hover:text-red-800"
-                  >
-                    Remove
-                  </button>
+                  <div className="flex items-center gap-2">
+                    {/* Reorder buttons */}
+                    <div className="flex items-center gap-1">
+                      {index > 0 && (
+                        <button
+                          type="button"
+                          onClick={() => handleMoveUp(index)}
+                          className="rounded p-1 text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                          title="Move up"
+                        >
+                          <ArrowUpIcon className="h-4 w-4" />
+                        </button>
+                      )}
+                      {index < formState.state.menuLinks.length - 1 && (
+                        <button
+                          type="button"
+                          onClick={() => handleMoveDown(index)}
+                          className="rounded p-1 text-gray-600 hover:bg-gray-100 hover:text-gray-900"
+                          title="Move down"
+                        >
+                          <ArrowDownIcon className="h-4 w-4" />
+                        </button>
+                      )}
+                    </div>
+                    {/* Remove button */}
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveLink(index)}
+                      className="text-sm font-bold text-red-600 hover:text-red-800"
+                    >
+                      Remove
+                    </button>
+                  </div>
                 </div>
 
                 <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">