astro-tractstack 2.1.3 → 2.2.0

package/templates/src/components/compositor/PanelVisibilityWrapper.tsx

@@ -88,6 +88,7 @@ const PanelVisibilityWrapper = ({
       data-panel-type={panelType}
       data-node-id={nodeId}
       data-active={isActive}
+      className="pt-6"
     >
       {children}
     </div>

package/templates/src/components/compositor/elements/SignUp.tsx

@@ -135,7 +135,7 @@ export const SignUp = ({
               </Select.Control>
               <Portal>
                 <Select.Positioner>
-                  <Select.Content className="sm:text-sm z-50 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none">
+                  <Select.Content className="z-50 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none md:text-sm">
                     {personaCollection.items.map((option) => (
                       <Select.Item
                         key={option.id}

package/templates/src/components/compositor/elements/YouTubeWrapper.tsx

@@ -10,8 +10,10 @@ export const YouTubeWrapper = ({
       style={{
         position: 'relative',
         width: '100%',
+        maxWidth: '100%',
         height: '0',
         paddingBottom: '56.25%',
+        margin: '0 auto',
       }}
     >
       <iframe

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

@@ -0,0 +1,262 @@
+import {
+  useEffect,
+  useState,
+  useRef,
+  type FocusEvent,
+  type KeyboardEvent,
+} from 'react';
+import { useStore } from '@nanostores/react';
+import { renderedPreviews, updatePreview } from '@/stores/previews';
+import { settingsPanelStore, viewportKeyStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import type { CreativePanePayload } from '@/types/compositorTypes';
+
+export interface CreativePaneProps {
+  nodeId: string;
+  htmlAst: CreativePanePayload;
+  isProtected?: boolean;
+}
+
+const viewportMap = {
+  mobile: 'xs',
+  tablet: 'md',
+  desktop: 'xl',
+} as const;
+
+export const CreativePane = ({
+  nodeId,
+  htmlAst,
+  isProtected = false,
+}: CreativePaneProps) => {
+  const previews = useStore(renderedPreviews);
+  const { value: viewportKey } = useStore(viewportKeyStore);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const activeViewport = viewportMap[viewportKey];
+  const htmlContent = previews[nodeId];
+
+  useEffect(() => {
+    const controller = new AbortController();
+    const signal = controller.signal;
+    const fetchPreview = async () => {
+      if (!htmlAst?.tree) return;
+      setLoading(true);
+      setError(null);
+      try {
+        const tenantId =
+          (window as any).TRACTSTACK_CONFIG?.tenantId ||
+          import.meta.env.PUBLIC_TENANTID ||
+          'default';
+
+        const goBackend =
+          import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
+        const response = await fetch(
+          `${goBackend}/api/v1/fragments/ast-preview`,
+          {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-Tenant-ID': tenantId,
+            },
+            body: JSON.stringify({
+              id: nodeId,
+              title: 'Editor Preview',
+              tree: htmlAst.tree,
+            }),
+            signal,
+          }
+        );
+
+        if (!response.ok) {
+          const text = await response.text();
+          throw new Error(
+            text || `Preview generation failed: ${response.status}`
+          );
+        }
+
+        const html = await response.text();
+
+        if (!signal.aborted) {
+          updatePreview(nodeId, html);
+        }
+      } catch (err: any) {
+        if (err.name === 'AbortError') return;
+
+        console.error(`CreativePane fetch failed for ${nodeId}:`, err);
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      } finally {
+        if (!signal.aborted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    fetchPreview();
+
+    return () => {
+      controller.abort();
+    };
+  }, [htmlAst?.css, htmlAst?.tree, nodeId]);
+
+  useEffect(() => {
+    const ctx = getCtx();
+    const unsubscribe = ctx.toolModeValStore.subscribe((state) => {
+      const container = contentRef.current;
+      if (!container) return;
+
+      const editables = container.querySelectorAll('[data-ast-id]');
+
+      if (state.value === 'text') {
+        editables.forEach((el) => {
+          const htmlEl = el as HTMLElement;
+          if (htmlEl.isContentEditable) return;
+          htmlEl.style.outline = '2px dotted #06b6d4';
+          htmlEl.style.outlineOffset = '2px';
+
+          const astId = htmlEl.getAttribute('data-ast-id');
+          if (!astId) return;
+
+          const existingIcon = container.querySelector(
+            `[data-proxy-for="${astId}"]`
+          );
+          if (existingIcon) return;
+
+          const icon = document.createElement('div');
+          icon.setAttribute('data-proxy-for', astId);
+          icon.style.position = 'absolute';
+          icon.style.zIndex = '1003';
+          icon.style.width = '24px';
+          icon.style.height = '24px';
+          icon.style.backgroundColor = '#06b6d4';
+          icon.style.borderRadius = '9999px';
+          icon.style.display = 'flex';
+          icon.style.alignItems = 'center';
+          icon.style.justifyContent = 'center';
+          icon.style.color = 'white';
+          icon.style.fontSize = '12px';
+          icon.style.boxShadow = '0 10px 15px -3px rgb(0 0 0 / 0.1)';
+          icon.style.cursor = 'pointer';
+          icon.innerHTML = '✎';
+
+          const rect = htmlEl.getBoundingClientRect();
+          const containerRect = container.getBoundingClientRect();
+          icon.style.top = `${rect.top - containerRect.top - 12}px`;
+          icon.style.left = `${rect.left - containerRect.left - 12}px`;
+
+          icon.onmouseenter = () => {
+            htmlEl.style.outline = '3px solid #06b6d4';
+          };
+          icon.onmouseleave = () => {
+            htmlEl.style.outline = '2px dotted #06b6d4';
+          };
+          icon.onclick = () => {
+            const meta = htmlAst.editableElements?.[astId];
+            if (meta) {
+              let action = '';
+              if (meta.isCssBackground) {
+                action = 'style-creative-bg';
+              } else if (meta.tagName === 'img') {
+                action = 'style-creative-img';
+              } else if (meta.tagName === 'a') {
+                action = 'style-creative-link';
+              } else if (meta.tagName === 'button') {
+                action = 'style-creative-btn';
+              }
+
+              if (action) {
+                settingsPanelStore.set({
+                  action,
+                  nodeId,
+                  childId: astId,
+                  expanded: true,
+                });
+              }
+            }
+          };
+
+          container.appendChild(icon);
+        });
+      } else {
+        editables.forEach((el) => {
+          (el as HTMLElement).style.outline = '';
+          (el as HTMLElement).style.outlineOffset = '';
+          (el as HTMLElement).style.cursor = '';
+        });
+        const icons = container.querySelectorAll('[data-proxy-for]');
+        icons.forEach((icon) => icon.remove());
+      }
+    });
+
+    return () => unsubscribe();
+  }, [htmlContent]);
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    const ctx = getCtx();
+    const mode = ctx.toolModeValStore.get().value;
+    if (mode !== 'text' || isProtected) return;
+
+    if (e.key === 'Enter') {
+      const target = e.target as HTMLElement;
+      if (target.isContentEditable) {
+        e.preventDefault();
+        target.blur();
+      }
+    }
+  };
+
+  const handleBlur = (e: FocusEvent<HTMLDivElement>) => {
+    const ctx = getCtx();
+    const mode = ctx.toolModeValStore.get().value;
+    if (mode !== 'text' || isProtected) return;
+
+    const target = e.target as HTMLElement;
+    const astId = target.getAttribute('data-ast-id');
+
+    if (astId && target.isContentEditable) {
+      const content = target.innerHTML;
+      ctx.updateCreativePane(nodeId, astId, content);
+    }
+  };
+
+  if (error) {
+    return (
+      <div className="flex h-full w-full items-center justify-center border border-dashed border-red-300 bg-red-50 p-4 text-sm text-red-500">
+        Preview Error: {error}
+      </div>
+    );
+  }
+
+  if (!htmlContent && loading) {
+    return (
+      <div
+        className="flex h-full w-full items-center justify-center bg-gray-50"
+        style={{ minHeight: '100px' }}
+      >
+        <div className="h-6 w-6 animate-spin rounded-full border-b-2 border-cyan-600"></div>
+      </div>
+    );
+  }
+
+  if (!htmlContent) return null;
+  const activeCss = htmlAst.viewportCss?.[activeViewport] || htmlAst.css;
+
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: activeCss }} />
+      <div
+        ref={contentRef}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        className="creative-pane-wrapper relative h-full w-full"
+      >
+        {isProtected && (
+          <div className="absolute inset-0 z-50 cursor-crosshair bg-transparent" />
+        )}
+        <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
+      </div>
+    </>
+  );
+};

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

@@ -108,7 +108,7 @@ export const GhostInsertBlock = memo((props: GhostInsertBlockProps) => {
   );
 
   const ElementButtons = () => (
-    <div className="sm:grid-cols-3 grid grid-cols-2 gap-2 p-2">
+    <div className="grid grid-cols-2 gap-2 p-2 md:grid-cols-3">
       {$toolAddModes
         .filter((mode) => !['p', 'h2', 'h3', 'h4'].includes(mode))
         .filter((mode) => allowedModes.includes(mode as ToolAddMode))
@@ -169,11 +169,9 @@ export const GhostInsertBlock = memo((props: GhostInsertBlockProps) => {
       ) : (
         <button
           onClick={(e) => {
-            if (toolModeVal !== `eraser`) {
-              e.stopPropagation();
-              settingsPanelStore.set(null);
-              setShowInsertOptions(true);
-            }
+            e.stopPropagation();
+            settingsPanelStore.set(null);
+            setShowInsertOptions(true);
           }}
           className="group w-full rounded-lg border-2 border-dashed border-cyan-500 bg-cyan-50 p-6 transition-colors hover:bg-cyan-100 dark:border-cyan-600 dark:bg-cyan-900 dark:hover:bg-cyan-800"
         >

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

@@ -3,6 +3,7 @@ import { useStore } from '@nanostores/react';
 import { getCtx } from '@/stores/nodes';
 import { RenderChildren } from './RenderChildren';
 import { isGridLayoutNode } from '@/utils/compositor/typeGuards';
+import { PaneOverlay } from '@/components/compositor/tools/PaneOverlay';
 import type { NodeProps } from '@/types/nodeProps';
 import type { ParentClassesPayload } from '@/types/compositorTypes';
 import { viewportKeyStore, settingsPanelStore } from '@/stores/storykeep';
@@ -108,17 +109,18 @@ export const GridLayout = (props: NodeProps) => {
             getCtx(props).setClickedNodeId(props.nodeId, true);
             e.stopPropagation();
           }}
-          className={getCtx(props).getNodeClasses(
+          className={`${getCtx(props).getNodeClasses(
             props.nodeId,
             currentViewport,
             i - 1
-          )}
+          )} group relative`}
           style={
             i === parentClassesLength
               ? { position: 'relative', zIndex: 10 }
               : undefined
           }
         >
+          <PaneOverlay {...props} layer={i} />
           {nodesToRender}
         </div>
       );

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

@@ -3,7 +3,9 @@ import { getCtx } from '@/stores/nodes';
 import { viewportKeyStore } from '@/stores/storykeep';
 import { RenderChildren } from './RenderChildren';
 import { GhostInsertBlock } from './GhostInsertBlock';
+import { PaneOverlay } from '@/components/compositor/tools/PaneOverlay';
 import { processClassesForViewports } from '@/utils/compositor/reduceNodesClassNames';
+import { isGridLayoutNode } from '@/utils/compositor/typeGuards';
 import type { NodeProps } from '@/types/nodeProps';
 import type {
   MarkdownPaneFragmentNode,
@@ -35,6 +37,11 @@ export const Markdown = (props: NodeProps) => {
 
   if (!node) return null;
 
+  // Context Check: Are we inside a Grid?
+  const allNodes = ctx.allNodes.get();
+  const parentNode = node.parentId ? allNodes.get(node.parentId) : null;
+  const isGridChild = parentNode ? isGridLayoutNode(parentNode) : false;
+
   let isHidden = false;
   switch (currentViewport) {
     case 'mobile':
@@ -65,7 +72,6 @@ export const Markdown = (props: NodeProps) => {
     );
   }
 
-  const allNodes = ctx.allNodes.get();
   const parentPaneId = ctx.getClosestNodeTypeFromId(id, 'Pane');
   const bgNode = parentPaneId
     ? (() => {
@@ -185,7 +191,11 @@ export const Markdown = (props: NodeProps) => {
     </>
   );
 
+  // Conditional Layer Rendering:
+  // If we are NOT in a grid (standard Pane mode), we render the parentClasses loop.
+  // If we ARE in a grid, we skip this (the grid handles the outer layers, we handle the column style).
   if (
+    !isGridChild &&
     'parentClasses' in node &&
     (node.parentClasses as ParentClassesPayload)?.length > 0
   ) {
@@ -210,13 +220,14 @@ export const Markdown = (props: NodeProps) => {
             ctx.setClickedNodeId(props.nodeId, true);
             e.stopPropagation();
           }}
-          className={ctx.getNodeClasses(id, currentViewport, i - 1)}
+          className={`${ctx.getNodeClasses(id, currentViewport, i - 1)} group relative`}
           style={
             i === parentClassesLength
               ? { position: 'relative', zIndex: 10 }
               : undefined
           }
         >
+          <PaneOverlay {...props} layer={i} />
           {nodesToRender}
         </div>
       );
@@ -224,7 +235,11 @@ export const Markdown = (props: NodeProps) => {
   }
 
   return (
-    <div className={gridClassName} style={{ position: 'relative', zIndex: 10 }}>
+    <div
+      className={`${gridClassName} group relative`}
+      style={{ position: 'relative', zIndex: 10 }}
+    >
+      <PaneOverlay {...props} isColumn={isGridChild} />
       {nodesToRender}
     </div>
   );

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

@@ -7,7 +7,12 @@ 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 { PaneOverlay } from '@/components/compositor/tools/PaneOverlay';
+import type {
+  PaneNode,
+  BgImageNode,
+  ArtpackImageNode,
+} from '@/types/compositorTypes';
 import type { NodeProps } from '@/types/nodeProps';
 
 const TARGETS = [
@@ -95,7 +100,7 @@ const Pane = memo(
       return () => unsubscribeViewport();
     }, []);
 
-    const wrapperClasses = `grid ${getCtx(props).getNodeClasses(props.nodeId, currentViewport)}`;
+    const wrapperClasses = `grid pt-6 ${getCtx(props).getNodeClasses(props.nodeId, currentViewport)}`;
 
     const contentClasses = 'relative w-full h-auto justify-self-start';
     const contentStyles: CSSProperties = {
@@ -119,6 +124,8 @@ const Pane = memo(
 
     // Get background node if it exists
     const allNodes = getCtx(props).allNodes.get();
+    const getPaneId = () => `pane-${props.nodeId}`;
+
     const bgNode = children
       .map((id) => allNodes.get(id))
       .find(
@@ -143,8 +150,6 @@ const Pane = memo(
           ? 'flex-row-reverse'
           : 'flex-row';
 
-    const getPaneId = () => `pane-${props.nodeId}`;
-
     const handleNotification = () => {
       const newChildren = [...getCtx(props).getChildNodeIDs(props.nodeId)];
       setChildren(newChildren); // Fresh copy
@@ -160,7 +165,8 @@ const Pane = memo(
     }, [props.nodeId]);
 
     return (
-      <div id={getPaneId()} className="pane">
+      <div id={getPaneId()} className="pane group relative">
+        <PaneOverlay {...props} hasBackground={!!bgNode} />
         <div
           id={getCtx(props).getNodeSlug(props.nodeId)}
           className={useFlexLayout ? '' : wrapperClasses}

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

@@ -1,6 +1,6 @@
 // templates/src/components/compositor/nodes/RenderChildren.tsx
 
-import Node from '../Node';
+import { Node } from '../Node';
 import type { NodeProps } from '@/types/nodeProps';
 import type { CompositorProps } from '../Compositor';
 

package/templates/src/components/compositor/nodes/tagElements/NodeAnchorComponent.tsx

@@ -195,7 +195,7 @@ export const NodeAnchorComponent = (props: NodeProps, tagName: string) => {
   // Create appropriate element based on tagName
   let baseClasses = ctx.getNodeClasses(nodeId, viewportKeyStore.get().value);
 
-  if (toolMode === 'styles' && settingsPanel?.nodeId != nodeId) {
+  if (toolMode === 'text' && settingsPanel?.nodeId != nodeId) {
     baseClasses += ' outline outline-1 outline-dotted outline-black';
   } else if (settingsPanel?.nodeId === nodeId) {
     baseClasses +=
@@ -213,9 +213,9 @@ export const NodeAnchorComponent = (props: NodeProps, tagName: string) => {
           onClick={handleClick}
           onDoubleClick={handleDoubleClick}
           data-editable-link="true"
-          // Preserve display mode
+          data-node-id={nodeId}
+          data-tag="a"
           style={{
-            display: 'inline',
             cursor: isEditMode ? 'text' : 'pointer',
           }}
         >
@@ -237,9 +237,9 @@ export const NodeAnchorComponent = (props: NodeProps, tagName: string) => {
           onClick={handleClick}
           onDoubleClick={handleDoubleClick}
           data-editable-button="true"
-          // Preserve display mode
+          data-node-id={nodeId}
+          data-tag="button"
           style={{
-            display: 'inline',
             cursor: isEditMode ? 'text' : 'crosshair',
           }}
         >