astro-tractstack 2.0.23 → 2.0.25

package/package.json

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

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

@@ -127,6 +127,7 @@ const getElement = (
   };
   const type = getType(node);
   const toolModeVal = getCtx(props).toolModeValStore.get().value;
+  const settingsPanel = useStore(settingsPanelStore);
 
   switch (type) {
     case 'Markdown': {
@@ -328,10 +329,14 @@ const getElement = (
     case 'aside':
     case 'p': {
       if (toolModeVal === 'styles') {
-        const className = getCtx(props).getNodeClasses(
+        let className = getCtx(props).getNodeClasses(
           node.id,
           viewportKeyStore.get().value
         );
+        if (settingsPanel?.nodeId === node.id) {
+          className +=
+            ' outline-4 outline-dotted outline-orange-400 outline-offset-2';
+        }
 
         const handleElementClick = (e: MouseEvent<HTMLElement>) => {
           e.stopPropagation();

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

@@ -1,14 +1,16 @@
 import { useState, useEffect } from 'react';
+import { useStore } from '@nanostores/react';
 import { getCtx } from '@/stores/nodes';
 import { RenderChildren } from './RenderChildren';
 import { isGridLayoutNode } from '@/utils/compositor/typeGuards';
 import type { NodeProps } from '@/types/nodeProps';
 import type { ParentClassesPayload } from '@/types/compositorTypes';
-import { viewportKeyStore } from '@/stores/storykeep';
+import { viewportKeyStore, settingsPanelStore } from '@/stores/storykeep';
 
 export const GridLayout = (props: NodeProps) => {
   const ctx = getCtx(props);
   const node = ctx.allNodes.get().get(props.nodeId);
+  const settingsPanel = useStore(settingsPanelStore);
 
   const [currentViewport, setCurrentViewport] = useState(
     viewportKeyStore.get().value
@@ -65,11 +67,18 @@ export const GridLayout = (props: NodeProps) => {
       break;
   }
   const gridClassName = `grid grid-cols-${gridCols}`;
+  const activeOutline =
+    settingsPanel?.nodeId === props.nodeId
+      ? ' outline-4 outline-dotted outline-orange-400 outline-offset-2'
+      : '';
 
   const children = ctx.getChildNodeIDs(props.nodeId);
 
   let nodesToRender: JSX.Element = (
-    <div className={gridClassName} style={{ position: 'relative', zIndex: 10 }}>
+    <div
+      className={`${gridClassName}${activeOutline}`}
+      style={{ position: 'relative', zIndex: 10 }}
+    >
       <RenderChildren children={children} nodeProps={props} />
     </div>
   );

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

@@ -3,7 +3,7 @@ import { getCtx } from '@/stores/nodes';
 import { viewportKeyStore } from '@/stores/storykeep';
 import { RenderChildren } from './RenderChildren';
 import { GhostInsertBlock } from './GhostInsertBlock';
-import { processGridClassesToString } from '@/utils/compositor/reduceNodesClassNames';
+import { processClassesForViewports } from '@/utils/compositor/reduceNodesClassNames';
 import type { NodeProps } from '@/types/nodeProps';
 import type {
   MarkdownPaneFragmentNode,
@@ -111,7 +111,29 @@ export const Markdown = (props: NodeProps) => {
         ? 'flex-row-reverse'
         : 'flex-row';
 
-  const gridClassName = processGridClassesToString(node.gridClasses);
+  const [all, mobile, tablet, desktop] = processClassesForViewports(
+    node.gridClasses || { mobile: {}, tablet: {}, desktop: {} },
+    {},
+    1
+  );
+
+  let gridClassName = '';
+  if (isPreview) gridClassName = desktop[0];
+  else {
+    switch (currentViewport) {
+      case 'desktop':
+        gridClassName = desktop[0];
+        break;
+      case 'tablet':
+        gridClassName = tablet[0];
+        break;
+      case 'mobile':
+        gridClassName = mobile[0];
+        break;
+      default:
+        gridClassName = all[0];
+    }
+  }
 
   let nodesToRender = (
     <>

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

@@ -1,6 +1,7 @@
 import { useEffect, useRef, type RefObject, type MouseEvent } from 'react';
+import { useStore } from '@nanostores/react';
 import { getCtx } from '@/stores/nodes';
-import { viewportKeyStore } from '@/stores/storykeep';
+import { viewportKeyStore, settingsPanelStore } from '@/stores/storykeep';
 import { RenderChildren } from '../RenderChildren';
 import type { FlatNode } from '@/types/compositorTypes';
 import type { NodeProps } from '@/types/nodeProps';
@@ -12,6 +13,10 @@ export const NodeAnchorComponent = (props: NodeProps, tagName: string) => {
   const childNodeIDs = ctx.getChildNodeIDs(node?.parentId ?? '');
   const linkRef = useRef<HTMLAnchorElement | HTMLButtonElement>(null);
 
+  // Reactivity for outlines
+  const settingsPanel = useStore(settingsPanelStore);
+  const toolMode = useStore(ctx.toolModeValStore).value;
+
   // Get current position and next sibling for spacing logic
   const currentIndex = childNodeIDs.indexOf(nodeId);
 
@@ -189,7 +194,14 @@ export const NodeAnchorComponent = (props: NodeProps, tagName: string) => {
 
   // Create appropriate element based on tagName
   let baseClasses = ctx.getNodeClasses(nodeId, viewportKeyStore.get().value);
-  baseClasses += ' outline outline-1 outline-dotted outline-gray-400/60';
+
+  if (toolMode === 'styles' && settingsPanel?.nodeId != nodeId) {
+    baseClasses += ' outline outline-1 outline-dotted outline-black';
+  } else if (settingsPanel?.nodeId === nodeId) {
+    baseClasses +=
+      ' outline-4 outline-dotted outline-orange-400 outline-offset-2';
+  }
+
   if (tagName === 'a') {
     return (
       <>

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

@@ -37,7 +37,8 @@ const VERBOSE = false;
 export const NodeBasicTag = (props: NodeTagProps) => {
   const nodeId = props.nodeId;
   const ctx = getCtx(props);
-  //const Tag = ctx.showGuids.get() ? `div` : props.tagName;
+  const settingsPanel = useStore(settingsPanelStore);
+  const toolMode = useStore(ctx.toolModeValStore).value;
   const Tag =
     ctx.toolModeValStore.get().value === `debug` ? `div` : props.tagName;
 
@@ -256,7 +257,8 @@ export const NodeBasicTag = (props: NodeTagProps) => {
 
   // For formatting nodes <em> and <strong> and <span>
   if (['em', 'strong', 'span'].includes(props.tagName)) {
-    const isEditorActive = toolModeVal === 'styles';
+    const isEditorActive = ['styles', 'text'].includes(toolModeVal);
+    const isEditorEnabled = toolModeVal === 'styles';
     const handleStyleClick = (e: MouseEvent<HTMLButtonElement>) => {
       e.preventDefault();
       e.stopPropagation();
@@ -273,7 +275,7 @@ export const NodeBasicTag = (props: NodeTagProps) => {
     };
 
     let baseClasses = ctx.getNodeClasses(nodeId, viewportKeyStore.get().value);
-    baseClasses += ' outline outline-1 outline-dotted outline-gray-400/60';
+    baseClasses += ' outline outline-1 outline-dotted outline-black';
 
     return createElement(
       Tag,
@@ -296,7 +298,7 @@ export const NodeBasicTag = (props: NodeTagProps) => {
       },
       [
         <RenderChildren key="children" children={children} nodeProps={props} />,
-        isEditorActive && (
+        isEditorEnabled && (
           <span
             key="chip"
             className="absolute z-10 flex select-none gap-x-1"
@@ -754,13 +756,22 @@ export const NodeBasicTag = (props: NodeTagProps) => {
     ctx.setClickedNodeId(nodeId, true);
   };
 
-  // Determine classes
   const baseClasses = ctx.getNodeClasses(nodeId, viewportKeyStore.get().value);
+  let outlineClasses = '';
+  if (settingsPanel?.nodeId === nodeId) {
+    outlineClasses +=
+      ' outline-4 outline-dotted outline-orange-400 outline-offset-2';
+  } else if (toolMode === 'styles') {
+    outlineClasses += ' hover:outline hover:outline-2 hover:outline-black';
+    if (['span', 'strong', 'em'].includes(props.tagName)) {
+      outlineClasses += ' outline outline-1 outline-dotted outline-black';
+    }
+  }
   const editingClasses =
     editState === 'editing'
       ? 'outline-2 outline-cyan-500 outline-offset-2'
       : '';
-  const className = `${baseClasses} ${editingClasses}`.trim();
+  const className = `${baseClasses} ${outlineClasses} ${editingClasses}`.trim();
 
   return (
     <>

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

@@ -30,7 +30,6 @@ export const NodeBasicTagEraser = (props: NodeTagProps) => {
       </div>
       <div className="flex items-center gap-1 rounded bg-white px-2 py-1 text-sm text-red-700 shadow-sm transition-colors group-focus-within:bg-red-700 group-focus-within:text-white group-hover:bg-red-700 group-hover:text-white">
         <TrashIcon className="h-4 w-4" />
-        Click anywhere to delete
       </div>
     </div>
   );

package/templates/src/components/edit/panels/StyleParentPanel.tsx

@@ -73,19 +73,29 @@ const StyleParentPanel = ({
       return;
     }
 
+    // --- STABILIZATION FIX START ---
+    let effectiveNode = initialNode;
+    if (isMarkdownPaneFragmentNode(initialNode) && initialNode.parentId) {
+      const parent = ctx.allNodes.get().get(initialNode.parentId);
+      if (parent && isGridLayoutNode(parent)) {
+        effectiveNode = parent as GridLayoutNode;
+      }
+    }
+    // --- STABILIZATION FIX END ---
+
     const targets: StyleableTarget[] = [];
-    const isGrid = isGridLayoutNode(initialNode);
+    const isGrid = isGridLayoutNode(effectiveNode);
 
     targets.push({
-      id: initialNode.id,
+      id: effectiveNode.id,
       name: isGrid ? 'Outer Container' : 'Pane Styles',
-      node: initialNode,
+      node: effectiveNode,
       targetProperty: 'parentClasses',
     });
 
     if (isGrid) {
       const columnNodes = ctx
-        .getChildNodeIDs(initialNode.id)
+        .getChildNodeIDs(effectiveNode.id)
         .map((id) => ctx.allNodes.get().get(id) as BaseNode)
         .filter(isMarkdownPaneFragmentNode);
 
@@ -105,6 +115,11 @@ const StyleParentPanel = ({
 
     if (rememberedIndex != null && rememberedIndex < targets.length) {
       setSelectedTargetIndex(rememberedIndex);
+    } else if (initialNode.id !== effectiveNode.id) {
+      // If opened on a child column, find and select it in the list
+      const index = targets.findIndex((t) => t.id === initialNode.id);
+      if (index !== -1) setSelectedTargetIndex(index);
+      else setSelectedTargetIndex(0);
     } else {
       setSelectedTargetIndex(0);
     }
@@ -136,6 +151,30 @@ const StyleParentPanel = ({
     targetProperty,
   } = selectedTarget;
 
+  const handleNavigation = (direction: 'prev' | 'next') => {
+    const len = styleTargets.length;
+    if (len < 2) return;
+
+    const newIndex =
+      direction === 'next'
+        ? (selectedTargetIndex + 1) % len
+        : (selectedTargetIndex - 1 + len) % len;
+
+    setSelectedTargetIndex(newIndex);
+
+    // Dispatch Signal to move the Orange Outline
+    const newTarget = styleTargets[newIndex];
+    const currentSettings = settingsPanelStore.get();
+
+    if (currentSettings && newTarget) {
+      settingsPanelStore.set({
+        ...currentSettings,
+        nodeId: newTarget.id,
+        action: 'style-parent',
+      });
+    }
+  };
+
   const handleLayerAdd = (position: 'before' | 'after', layerNum: number) => {
     const targetNode = cloneDeep(selectedTargetNode);
 
@@ -245,11 +284,7 @@ const StyleParentPanel = ({
   const TargetNavigator = () => (
     <div className="mb-4 flex items-center justify-between rounded-md bg-slate-100 p-2">
       <button
-        onClick={() =>
-          setSelectedTargetIndex(
-            (prev) => (prev - 1 + styleTargets.length) % styleTargets.length
-          )
-        }
+        onClick={() => handleNavigation('prev')}
         className="rounded-full p-1 text-gray-500 hover:bg-gray-200 hover:text-black"
         disabled={styleTargets.length < 2}
       >
@@ -259,9 +294,7 @@ const StyleParentPanel = ({
         {selectedTargetName}
       </span>
       <button
-        onClick={() =>
-          setSelectedTargetIndex((prev) => (prev + 1) % styleTargets.length)
-        }
+        onClick={() => handleNavigation('next')}
         className="rounded-full p-1 text-gray-500 hover:bg-gray-200 hover:text-black"
         disabled={styleTargets.length < 2}
       >

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

@@ -41,6 +41,7 @@ const ViewportComboBox = ({
 }: ViewportComboBoxProps) => {
   const brandColors = brandConfigStore.get()?.BRAND_COLOURS || '';
   const [internalValue, setInternalValue] = useState(value);
+  const [displayValue, setDisplayValue] = useState(value);
   const [query, setQuery] = useState('');
   const [isNowNegative, setIsNowNegative] = useState(isNegative);
 
@@ -54,6 +55,7 @@ const ViewportComboBox = ({
   useEffect(() => {
     if (value !== internalValue) {
       setInternalValue(value);
+      setDisplayValue(value);
       setQuery('');
     }
     if (isNegative !== isNowNegative) {
@@ -61,7 +63,6 @@ const ViewportComboBox = ({
     }
   }, [value, isNegative]);
 
-  // Create collection for combobox
   const collection = useMemo(() => {
     const filteredValues =
       query === ''
@@ -88,6 +89,7 @@ const ViewportComboBox = ({
   const handleInputChange = useCallback(
     (details: Combobox.InputValueChangeDetails) => {
       setQuery(details.inputValue);
+      setDisplayValue(details.inputValue);
     },
     []
   );
@@ -96,6 +98,7 @@ const ViewportComboBox = ({
     (details: { value: string[] }) => {
       const selectedValue = details.value[0] || '';
       setInternalValue(selectedValue);
+      setDisplayValue(selectedValue);
       setQuery('');
       const currentSignal = settingsPanelStore.get();
       if (currentSignal) {
@@ -114,13 +117,13 @@ const ViewportComboBox = ({
       onFinalChange(internalValue, viewport, isNowNegative);
     } else {
       setInternalValue(value);
+      setDisplayValue(value);
     }
     setQuery('');
   }, [internalValue, value, values, onFinalChange, viewport, isNowNegative]);
 
   const isColorValue = colorValues.includes(internalValue);
 
-  // CSS to properly style the combobox items with hover and selection
   const comboboxItemStyles = `
     .viewport-item[data-highlighted] {
       background-color: #0891b2; /* bg-cyan-600 */
@@ -151,6 +154,7 @@ const ViewportComboBox = ({
         <div className="flex items-center">
           <div className="relative flex-grow">
             <Combobox.Root
+              inputValue={displayValue}
               collection={collection}
               value={[internalValue]}
               onValueChange={handleValueChange}

package/templates/src/stores/nodes.ts

@@ -1489,24 +1489,19 @@ export class NodesContext {
             spanNode.overrideClasses || {},
             1
           );
-          const outlineClass =
-            this.toolModeValStore.get().value === 'styles'
-              ? ' outline outline-1 outline-dotted outline-gray-400/60'
-              : '';
-
           const getClassString = (classes: string[]): string =>
             classes && classes.length > 0 ? classes[0] : '';
 
-          if (isPreview) return getClassString(desktop) + outlineClass;
+          if (isPreview) return getClassString(desktop);
           switch (viewport) {
             case 'desktop':
-              return getClassString(desktop) + outlineClass;
+              return getClassString(desktop);
             case 'tablet':
-              return getClassString(tablet) + outlineClass;
+              return getClassString(tablet);
             case 'mobile':
-              return getClassString(mobile) + outlineClass;
+              return getClassString(mobile);
             default:
-              return getClassString(all) + outlineClass;
+              return getClassString(all);
           }
         }
 

package/templates/src/utils/compositor/nodesHelper.ts

@@ -516,6 +516,15 @@ export function extractClassesFromNodes(dirtyNodes: BaseNode[]): string[] {
         if (className.trim()) uniqueClasses.add(className.trim());
       });
     }
+
+    // Extract from gridCss arrays
+    if ('gridCss' in node && Array.isArray(node.gridCss)) {
+      node.gridCss.forEach((classString: string) => {
+        classString.split(' ').forEach((className: string) => {
+          if (className.trim()) uniqueClasses.add(className.trim());
+        });
+      });
+    }
   });
 
   return Array.from(uniqueClasses);

package/templates/src/utils/compositor/reduceNodesClassNames.ts

@@ -198,38 +198,3 @@ function getTailwindClassInfo(selector: string): {
     useKeyAsClass: classInfo.useKeyAsClass,
   };
 }
-
-export function processGridClassesToString(
-  classes?: DefaultClassValue
-): string {
-  if (!classes) {
-    return '';
-  }
-
-  const finalClasses: string[] = [];
-  const mobileStyles = classes.mobile || {};
-  const tabletStyles = classes.tablet || {};
-  const desktopStyles = classes.desktop || {};
-
-  for (const [selector, value] of Object.entries(mobileStyles)) {
-    if (value) {
-      finalClasses.push(reduceClassName(selector, value, 0));
-    }
-  }
-
-  for (const [selector, value] of Object.entries(tabletStyles)) {
-    if (value && mobileStyles[selector] !== value) {
-      finalClasses.push(reduceClassName(selector, value, 1));
-    }
-  }
-
-  for (const [selector, value] of Object.entries(desktopStyles)) {
-    const tabletValue = tabletStyles[selector];
-    const mobileValue = mobileStyles[selector];
-    if (value && tabletValue !== value && mobileValue !== value) {
-      finalClasses.push(reduceClassName(selector, value, 2));
-    }
-  }
-
-  return finalClasses.filter(Boolean).join(' ');
-}