astro-tractstack 2.0.0-rc.9 → 2.0.0

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

@@ -1,13 +1,23 @@
-import { useEffect, useState, memo, type CSSProperties } from 'react';
+import { useEffect, useState, memo, Fragment, type CSSProperties } from 'react';
 import { getCtx } from '@/stores/nodes';
 import { viewportKeyStore } from '@/stores/storykeep';
 import { RenderChildren } from './RenderChildren';
-import FeaturedContentSetup from '@/components/codehooks/FeaturedContentSetup';
+import FeaturedArticleSetup from '@/components/codehooks/FeaturedArticleSetup';
 import ListContentSetup from '@/components/codehooks/ListContentSetup';
 import BunnyVideoSetup from '@/components/codehooks/BunnyVideoSetup';
+import { ProductCardSetup } from '@/components/codehooks/ProductCardSetup';
+import { ProductGridSetup } from '@/components/codehooks/ProductGridSetup';
 import type { BgImageNode, ArtpackImageNode } from '@/types/compositorTypes';
 import type { NodeProps } from '@/types/nodeProps';
 
+const TARGETS = [
+  'list-content',
+  'featured-article',
+  'bunny-video',
+  'product-card',
+  'product-grid',
+];
+
 const CodeHookContainer = ({
   payload,
 }: {
@@ -27,12 +37,19 @@ const CodeHookContainer = ({
         {Object.entries(payload.params).map(
           ([key, value]) =>
             value && (
-              <div key={key} className="flex items-start">
+              <Fragment key={key}>
                 <span className="min-w-24 font-bold text-gray-600">{key}:</span>
-                <span className="ml-2 text-gray-800">
-                  {JSON.stringify(value)}
-                </span>
-              </div>
+                <div className="ml-2 flex flex-wrap gap-1">
+                  {value.split(/,|\|/).map((item, index) => (
+                    <span
+                      key={index}
+                      className="inline-block rounded bg-gray-200 px-2 py-0.5 text-xs text-gray-800"
+                    >
+                      {item}
+                    </span>
+                  ))}
+                </div>
+              </Fragment>
             )
         )}
       </div>
@@ -148,15 +165,36 @@ const Pane = memo(
           id={getCtx(props).getNodeSlug(props.nodeId)}
           className={useFlexLayout ? '' : wrapperClasses}
         >
-          {codeHookPayload && codeHookTarget === 'featured-content' ? (
-            <FeaturedContentSetup
+          {codeHookPayload && codeHookTarget === 'product-card' ? (
+            <ProductCardSetup
+              nodeId={props.nodeId}
+              params={codeHookParams}
+              config={props.config!}
+            />
+          ) : codeHookPayload && codeHookTarget === 'product-grid' ? (
+            <ProductGridSetup
+              nodeId={props.nodeId}
+              params={codeHookParams}
+              config={props.config!}
+            />
+          ) : codeHookPayload && codeHookTarget === 'featured-article' ? (
+            <FeaturedArticleSetup
               nodeId={props.nodeId}
               params={codeHookParams}
+              config={props.config!}
             />
           ) : codeHookPayload && codeHookTarget === 'list-content' ? (
-            <ListContentSetup nodeId={props.nodeId} params={codeHookParams} />
+            <ListContentSetup
+              nodeId={props.nodeId}
+              params={codeHookParams}
+              config={props.config!}
+            />
           ) : codeHookPayload && codeHookTarget === 'bunny-video' ? (
-            <BunnyVideoSetup nodeId={props.nodeId} params={codeHookParams} />
+            <BunnyVideoSetup
+              nodeId={props.nodeId}
+              params={codeHookParams}
+              config={props.config!}
+            />
           ) : codeHookPayload && codeHookTarget ? (
             <CodeHookContainer
               payload={{ target: codeHookTarget, params: codeHookParams }}
@@ -209,11 +247,7 @@ const Pane = memo(
                   !(
                     codeHookPayload &&
                     typeof codeHookTarget === 'string' &&
-                    [
-                      'list-content',
-                      'featured-content',
-                      'bunny-video',
-                    ].includes(codeHookTarget)
+                    TARGETS.includes(codeHookTarget)
                   )
                 )
                   getCtx(props).setClickedNodeId(props.nodeId, true);
@@ -239,11 +273,7 @@ const Pane = memo(
                   !(
                     codeHookPayload &&
                     typeof codeHookTarget === 'string' &&
-                    [
-                      'list-content',
-                      'featured-content',
-                      'bunny-video',
-                    ].includes(codeHookTarget)
+                    TARGETS.includes(codeHookTarget)
                   )
                 )
                   getCtx(props).setClickedNodeId(props.nodeId, true);

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

@@ -12,7 +12,12 @@ export const RenderChildren = (props: RenderChildrenProps) => {
   return (
     <>
       {children.map((id: string) => (
-        <Node nodeId={id} key={id} ctx={nodeProps.ctx} />
+        <Node
+          nodeId={id}
+          key={id}
+          ctx={nodeProps.ctx}
+          config={nodeProps.config}
+        />
       ))}
     </>
   );

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

@@ -79,12 +79,26 @@ const getWidgetElement = (
     case 'bunny':
       return value1 ? (
         <div className={`${classNames} pointer-events-none`}>
-          <BunnyVideo embedUrl={value1} title={value2 || 'Bunny Video'} />
+          <BunnyVideo videoId={value1} title={value2 || 'Bunny Video'} />
         </div>
       ) : null;
 
+    case 'interactiveDisclosure':
+      return (
+        <div className={`${classNames} pointer-events-none`}>
+          <div className="rounded-md border-2 border-dashed border-gray-300 bg-gray-50 p-4 text-center">
+            <p className="text-sm font-bold text-gray-700">
+              Interactive Disclosure
+            </p>
+            <p className="mt-1 text-xs text-gray-500">
+              Belief Trigger: <code className="font-bold">{value1}</code>
+            </p>
+          </div>
+        </div>
+      );
+
     default:
-      return null;
+      return <div>Widget {hook} not found.</div>;
   }
 };
 

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

@@ -0,0 +1,155 @@
+import { useState, useEffect } from 'react';
+import type { FullContentMapItem } from '@/types/tractstack';
+import {
+  PaneSnapshotGenerator,
+  type SnapshotData,
+} from '@/components/compositor/preview/PaneSnapshotGenerator';
+
+interface FeaturedArticlePreviewProps {
+  story: FullContentMapItem;
+}
+
+const PREVIEW_TIMEOUT = 10000; // 10 seconds
+
+const FeaturedArticlePreview = ({ story }: FeaturedArticlePreviewProps) => {
+  const [htmlFragment, setHtmlFragment] = useState<string | null>(null);
+  const [snapshot, setSnapshot] = useState<SnapshotData | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    let isCancelled = false;
+    setSnapshot(null);
+    setIsLoading(true);
+    setHtmlFragment(null); // Reset HTML fragment as well
+    console.log(
+      `[Preview DEBUG] Starting generation for story: "${story.title}"`
+    );
+
+    const timeoutId = setTimeout(() => {
+      if (!isCancelled) {
+        console.error('[Preview DEBUG] Generation timed out after 10 seconds.');
+        setIsLoading(false);
+      }
+    }, PREVIEW_TIMEOUT);
+
+    const fetchHtml = async () => {
+      try {
+        if (!story.panes || story.panes.length === 0) {
+          throw new Error('Story has no panes to generate a preview from.');
+        }
+        const paneIdsToFetch = story.panes.slice(0, 2);
+        console.log(
+          `[Preview DEBUG] 1. Fetching HTML for panes:`,
+          paneIdsToFetch
+        );
+
+        const goBackend =
+          import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+        const response = await fetch(`${goBackend}/api/v1/fragments/panes`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-Tenant-ID': window.TRACTSTACK_CONFIG?.tenantId || 'default',
+          },
+          body: JSON.stringify({ paneIds: paneIdsToFetch }),
+        });
+
+        if (isCancelled) return;
+        if (!response.ok) {
+          throw new Error(`API fetch failed with status: ${response.status}`);
+        }
+        const data = await response.json();
+        const combinedHtml = paneIdsToFetch
+          .map((id) => data.fragments?.[id] || '')
+          .join('');
+        if (!combinedHtml.trim()) {
+          throw new Error('API returned no HTML content for the panes.');
+        }
+        console.log(
+          `[Preview DEBUG] 2. HTML received (length: ${combinedHtml.length}). Will now render snapshot generator.`
+        );
+        if (!isCancelled) {
+          setHtmlFragment(combinedHtml);
+        }
+      } catch (e) {
+        if (!isCancelled) {
+          const errorMessage = e instanceof Error ? e.message : 'Unknown error';
+          console.error(
+            '[Preview DEBUG] An error occurred while fetching HTML:',
+            errorMessage
+          );
+          setIsLoading(false);
+        }
+      }
+    };
+
+    fetchHtml();
+
+    return () => {
+      isCancelled = true;
+      clearTimeout(timeoutId);
+    };
+  }, [story.id]);
+
+  const handleSnapshotComplete = (id: string, data: SnapshotData) => {
+    console.log('[Preview DEBUG] 3. Snapshot generation successful.');
+    setSnapshot(data);
+    setIsLoading(false);
+  };
+
+  const handleSnapshotError = (id: string, err: string) => {
+    console.error(
+      '[Preview DEBUG] An error occurred during snapshot generation:',
+      err
+    );
+    setIsLoading(false);
+  };
+
+  return (
+    <>
+      {/* This is the invisible worker component. It only renders when its input is ready. */}
+      {htmlFragment && isLoading && (
+        <PaneSnapshotGenerator
+          id={`live-preview-${story.id}`}
+          htmlString={htmlFragment}
+          outputWidth={600}
+          onComplete={handleSnapshotComplete}
+          onError={handleSnapshotError}
+        />
+      )}
+
+      {/* This is the visible UI that reacts to state changes. */}
+      {isLoading && (
+        <div className="flex aspect-[4/3] w-full items-center justify-center rounded-lg bg-gray-200">
+          <div className="h-12 w-12 animate-spin rounded-full border-4 border-solid border-cyan-600 border-t-transparent"></div>
+        </div>
+      )}
+
+      {!isLoading && snapshot && (
+        <img
+          src={snapshot.imageData}
+          alt={`Live preview of ${story.title}`}
+          className="h-auto w-full rounded-lg object-cover shadow-lg"
+        />
+      )}
+
+      {!isLoading && !snapshot && (
+        <>
+          {story.thumbSrc ? (
+            <img
+              src={story.thumbSrc}
+              alt={`Preview of ${story.title}`}
+              className="h-auto w-full rounded-lg object-cover shadow-lg"
+            />
+          ) : (
+            <div className="flex aspect-[4/3] w-full items-center justify-center rounded-lg bg-red-50 p-4 text-center text-sm text-red-700">
+              Could not display preview.
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
+};
+
+export default FeaturedArticlePreview;

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

@@ -18,6 +18,16 @@ export interface PaneSnapshotGeneratorProps {
 
 const snapshotCache = new Map<string, SnapshotData>();
 
+function hashString(str: string): string {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // Convert to 32bit integer
+  }
+  return hash.toString(36);
+}
+
 export const PaneSnapshotGenerator = ({
   id,
   htmlString,
@@ -31,7 +41,7 @@ export const PaneSnapshotGenerator = ({
   useEffect(() => {
     if (!htmlString || isGenerating) return;
 
-    const cacheKey = `${id}-${htmlString.length}-${outputWidth}`;
+    const cacheKey = `${id}-${hashString(htmlString)}-${outputWidth}`;
     if (snapshotCache.has(cacheKey)) {
       const cached = snapshotCache.get(cacheKey)!;
       onComplete(id, cached);
@@ -195,5 +205,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/Header.tsx

@@ -13,6 +13,7 @@ import {
   viewportModeStore,
   setViewportMode,
   settingsPanelStore,
+  pendingHomePageSlugStore,
 } from '@/stores/storykeep';
 import { getCtx, ROOT_NODE_NAME } from '@/stores/nodes';
 import SaveModal from '@/components/edit/state/SaveModal';
@@ -24,6 +25,7 @@ interface StoryKeepHeaderProps {
 
 const StoryKeepHeader = ({ slug, isContext = false }: StoryKeepHeaderProps) => {
   const viewport = useStore(viewportModeStore);
+  const pendingHomePageSlug = useStore(pendingHomePageSlugStore);
   const ctx = getCtx();
   const hasTitle = useStore(ctx.hasTitle);
   const hasPanes = useStore(ctx.hasPanes);
@@ -61,7 +63,8 @@ const StoryKeepHeader = ({ slug, isContext = false }: StoryKeepHeaderProps) => {
   };
 
   const handleVisitPage = () => {
-    if (canUndo) {
+    const hasChanges = canUndo || pendingHomePageSlug;
+    if (hasChanges) {
       if (
         confirm(
           'You have unsaved changes. Do you want to visit the page anyway?'
@@ -89,6 +92,9 @@ const StoryKeepHeader = ({ slug, isContext = false }: StoryKeepHeaderProps) => {
     { value: 'desktop', Icon: ComputerDesktopIcon, title: 'Desktop Viewport' },
   ];
 
+  // Show save button if there are undo changes OR pending home page change
+  const shouldShowSave = canUndo || pendingHomePageSlug;
+
   if (!hasTitle && !hasPanes) return null;
 
   return (
@@ -96,7 +102,7 @@ const StoryKeepHeader = ({ slug, isContext = false }: StoryKeepHeaderProps) => {
       <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 p-2">
         {/* Viewport Section with stacked label */}
         <div className="flex flex-col items-center">
-          <span className="text-xs font-medium text-gray-600">Viewport:</span>
+          <span className="text-xs font-bold text-gray-600">Viewport:</span>
           <span className="text-xs text-gray-700">{viewport}</span>
         </div>
 
@@ -127,7 +133,7 @@ const StoryKeepHeader = ({ slug, isContext = false }: StoryKeepHeaderProps) => {
             className={`${iconClassName} relative`}
           >
             <GlobeAltIcon />
-            {canUndo && (
+            {shouldShowSave && (
               <ExclamationTriangleIcon className="absolute -right-1 -top-1 h-3 w-3 rounded-full bg-white text-amber-500" />
             )}
           </button>
@@ -156,7 +162,7 @@ const StoryKeepHeader = ({ slug, isContext = false }: StoryKeepHeaderProps) => {
           </div>
         )}
 
-        {canUndo && (
+        {shouldShowSave && (
           <div className="flex flex-wrap items-center justify-center gap-2 text-sm">
             <button
               onClick={handleSave}

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

@@ -173,10 +173,12 @@ const PanelSwitch = ({
     case 'style-link-remove':
     case 'style-link-remove-hover':
       if (clickedNode && signal.className)
-        <StyleLinkRemovePanel
-          node={clickedNode}
-          className={signal.className}
-        />;
+        return (
+          <StyleLinkRemovePanel
+            node={clickedNode}
+            className={signal.className}
+          />
+        );
       break;
 
     case 'style-link-config':
@@ -311,17 +313,19 @@ const PanelSwitch = ({
       break;
 
     case 'style-code-config':
-      if (clickedNode) return <StyleWidgetConfigPanel node={clickedNode} />;
+      if (clickedNode)
+        return <StyleWidgetConfigPanel node={clickedNode} config={config} />;
+      break;
 
     case 'style-code-add':
     case 'style-code-container-add':
     case 'style-code-outer-add':
-      if (clickedNode && markdownNode && signal.childId)
+      if (clickedNode && markdownNode)
         return (
           <StyleWidgetAddPanel
             node={clickedNode}
             parentNode={markdownNode}
-            childId={signal.childId}
+            childId={signal?.childId}
           />
         );
       break;

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

@@ -17,19 +17,23 @@ const SettingsPanel = ({ config, availableCodeHooks }: SettingsPanelProps) => {
   const ctx = getCtx();
   const { value: toolModeVal } = useStore(ctx.toolModeValStore);
 
-  if (toolModeVal !== `styles` || !signal) {
+  const isLinkInsertSignal = signal?.action === 'style-link';
+  const shouldShow =
+    toolModeVal === 'styles' || (toolModeVal === 'text' && isLinkInsertSignal);
+
+  if (!shouldShow || !signal) {
     return null;
   }
 
   return (
     <div
-      className="bg-mydarkgrey rounded-xl bg-opacity-20 p-0.5 backdrop-blur-sm"
+      className="bg-mydarkgrey min-w-xs flex h-full max-w-sm flex-col rounded-xl bg-opacity-20 p-0.5 backdrop-blur-sm"
       style={
         {
           animation: window.matchMedia(
             '(prefers-reduced-motion: no-preference)'
           ).matches
-            ? 'fadeInFromHalf 150ms ease-in'
+            ? 'fadeInFromHalf 450ms ease-in'
             : 'none',
           '--fade-start': '0.5',
           '--fade-end': '1',
@@ -37,23 +41,30 @@ const SettingsPanel = ({ config, availableCodeHooks }: SettingsPanelProps) => {
       }
     >
       <style>{`
-    @keyframes fadeInFromHalf {
-      0% { opacity: var(--fade-start, 0.5); }
-      100% { opacity: var(--fade-end, 1); }
-    }
-  `}</style>
-      <div className="w-full max-w-lg rounded-lg border border-gray-200 bg-white p-1.5 shadow-xl md:p-2.5">
-        <div className="mb-4 flex items-center justify-between">
-          <h3 className="text-myblue text-lg font-bold">{panelTitle}</h3>
-          <button
-            onClick={() => settingsPanelStore.set(null)}
-            className="hover:text-myblue text-gray-500"
-          >
-            <XMarkIcon className="h-5 w-5" />
-          </button>
+        @keyframes fadeInFromHalf {
+          0% { opacity: var(--fade-start, 0.5); }
+          100% { opacity: var(--fade-end, 1); }
+        }
+      `}</style>
+      <div
+        className="flex h-full min-h-0 w-full flex-col rounded-lg border border-gray-200 bg-white bg-opacity-85 shadow-xl"
+        style={{ maxWidth: '90vw' }}
+      >
+        {/* Header Section (fixed height) */}
+        <div className="flex-shrink-0 p-1.5 md:p-2.5">
+          <div className="mb-4 flex items-center justify-between">
+            <h3 className="text-myblue text-lg font-bold">{panelTitle}</h3>
+            <button
+              onClick={() => settingsPanelStore.set(null)}
+              className="hover:text-myblue text-gray-500"
+            >
+              <XMarkIcon className="h-5 w-5" />
+            </button>
+          </div>
         </div>
 
-        <div className="space-y-4">
+        {/* Scrollable Content Section */}
+        <div className="min-h-0 flex-1 space-y-4 overflow-y-auto p-1.5 pt-0 md:p-2.5 md:pt-0">
           <div className="rounded bg-gray-50 p-1.5 md:p-2.5">
             <PanelSwitch
               config={config}

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

@@ -2,37 +2,10 @@ import { useStore } from '@nanostores/react';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import { getCtx } from '@/stores/nodes';
 import { toggleSettingsPanel } from '@/stores/storykeep';
+import { toolAddModeTitles, toolAddModes } from '@/constants';
 
 import type { ToolAddMode } from '@/types/compositorTypes';
 
-const toolAddModeTitles: Record<ToolAddMode, string> = {
-  p: 'Paragraph',
-  h2: 'Heading 2',
-  h3: 'Heading 3',
-  h4: 'Heading 4',
-  img: 'Image',
-  signup: 'Email Sign-up Widget',
-  yt: 'YouTube Video',
-  bunny: 'Bunny Video',
-  belief: 'Belief Select',
-  identify: 'Identity As',
-  toggle: 'Toggle Belief',
-};
-
-const toolAddModes: ToolAddMode[] = [
-  'p',
-  'h2',
-  'h3',
-  'h4',
-  'img',
-  'signup',
-  'yt',
-  'bunny',
-  'belief',
-  'identify',
-  'toggle',
-];
-
 const AddElementsPanel = ({
   currentToolAddMode,
 }: {