astro-tractstack 2.0.26 → 2.0.28

package/dist/index.js

@@ -1394,6 +1394,12 @@ async function w(t, e, c) {
       src: t("../templates/src/components/edit/state/StylesMemory.tsx"),
       dest: "src/components/edit/state/StylesMemory.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/edit/panels/StyleWordCarouselPanel.tsx"
+      ),
+      dest: "src/components/edit/panels/StyleWordCarouselPanel.tsx"
+    },
     {
       src: t(
         "../templates/src/components/edit/panels/StyleBreakPanel.tsx"

package/package.json

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

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

@@ -26,7 +26,7 @@ import {
   resetSelectionStore,
   type SelectionStoreState,
 } from '@/stores/selection';
-import type { LoadData } from '@/types/compositorTypes';
+import type { LoadData, FlatNode } from '@/types/compositorTypes';
 import type {
   Theme,
   BrandConfig,
@@ -410,6 +410,38 @@ export const Compositor = (props: CompositorProps) => {
           });
         }
         resetSelectionStore();
+      } else if ($selection.pendingAction === 'carousel') {
+        if (VERBOSE) console.log(LOG_PREFIX + 'useEffect acting on: carousel');
+        const newSpanNodeId = await ctx.wrapRangeInSpan(
+          range as SelectionStoreState,
+          'span'
+        );
+
+        if (newSpanNodeId) {
+          const node = ctx.allNodes.get().get(newSpanNodeId);
+          const childIds = ctx.getChildNodeIDs(newSpanNodeId);
+          let initialText = '';
+          childIds.forEach((childId) => {
+            const child = ctx.allNodes.get().get(childId) as FlatNode;
+            if (child && child.copy) initialText += child.copy;
+          });
+          const words = initialText ? [initialText] : [];
+          if (node) {
+            ctx.modifyNodes([
+              {
+                ...node,
+                wordCarouselPayload: { words, speed: 2 },
+                isChanged: true,
+              } as FlatNode,
+            ]);
+            settingsPanelStore.set({
+              action: 'style-word-carousel',
+              nodeId: newSpanNodeId,
+              expanded: true,
+            });
+          }
+        }
+        resetSelectionStore();
       }
       ctx.notifyNode('root');
     };

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

@@ -12,6 +12,7 @@ import {
 import { useStore } from '@nanostores/react';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import PaintBrushIcon from '@heroicons/react/24/outline/PaintBrushIcon';
+import ChatBubbleBottomCenterTextIcon from '@heroicons/react/24/outline/ChatBubbleBottomCenterTextIcon';
 import { getCtx } from '@/stores/nodes';
 import {
   viewportKeyStore,
@@ -24,7 +25,7 @@ import {
   processRichTextToNodes,
   getTemplateNode,
 } from '@/utils/compositor/nodesHelper';
-import { cloneDeep } from '@/utils/helpers';
+import { cloneDeep, classNames } from '@/utils/helpers';
 import { PatchOp } from '@/stores/nodesHistory';
 import type { FlatNode, PaneNode } from '@/types/compositorTypes';
 import type { NodeProps } from '@/types/nodeProps';
@@ -273,6 +274,15 @@ export const NodeBasicTag = (props: NodeTagProps) => {
       e.stopPropagation();
       ctx.unwrapNode(nodeId);
     };
+    const handleWordCarouselClick = (e: MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      settingsPanelStore.set({
+        action: 'style-word-carousel',
+        nodeId: nodeId,
+        expanded: true,
+      });
+    };
 
     let baseClasses = ctx.getNodeClasses(nodeId, viewportKeyStore.get().value);
     baseClasses += ' outline outline-1 outline-dotted outline-black';
@@ -300,7 +310,7 @@ export const NodeBasicTag = (props: NodeTagProps) => {
         <RenderChildren key="children" children={children} nodeProps={props} />,
         isEditorEnabled && (
           <span
-            key="chip"
+            key={`toolbar-${nodeId}`}
             className="absolute z-10 flex select-none gap-x-1"
             data-attr="exclude"
             style={{ top: '-0.9rem', left: '0' }}
@@ -309,17 +319,34 @@ export const NodeBasicTag = (props: NodeTagProps) => {
               <button
                 type="button"
                 onClick={handleStyleClick}
-                className="flex h-4 w-4 items-center justify-center rounded-full bg-blue-100/90 text-blue-700 shadow-sm hover:bg-blue-300/50 focus:outline-none"
+                className="flex h-4 w-4 items-center justify-center rounded-full bg-blue-100 bg-opacity-90 text-blue-700 shadow-sm hover:bg-blue-300 focus:outline-none"
                 aria-label="Style selection"
                 data-attr="exclude"
               >
                 <PaintBrushIcon className="h-3 w-3" data-attr="exclude" />
               </button>
             )}
+            <button
+              type="button"
+              onClick={handleWordCarouselClick}
+              className={classNames(
+                'flex h-4 w-4 items-center justify-center rounded-full bg-opacity-50 shadow-sm focus:outline-none',
+                node.wordCarouselPayload
+                  ? 'bg-green-100 text-green-700 hover:bg-green-300'
+                  : 'bg-gray-100 bg-opacity-90 text-gray-700 hover:bg-gray-300'
+              )}
+              aria-label="Edit Carousel"
+              data-attr="exclude"
+            >
+              <ChatBubbleBottomCenterTextIcon
+                className="h-3 w-3"
+                data-attr="exclude"
+              />
+            </button>
             <button
               type="button"
               onClick={handleUnwrapClick}
-              className="flex h-4 w-4 items-center justify-center rounded-full bg-gray-100/90 text-gray-700 shadow-sm hover:bg-gray-300/50 focus:outline-none"
+              className="flex h-4 w-4 items-center justify-center rounded-full bg-gray-100 bg-opacity-90 text-gray-700 shadow-sm hover:bg-gray-300 focus:outline-none"
               aria-label="Remove formatting"
               data-attr="exclude"
             >

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

@@ -34,6 +34,7 @@ import StyleLiElementPanel from './panels/StyleLiElementPanel';
 import StyleLiElementAddPanel from './panels/StyleLiElementPanel_add';
 import StyleLiElementUpdatePanel from './panels/StyleLiElementPanel_update';
 import StyleLiElementRemovePanel from './panels/StyleLiElementPanel_remove';
+import StyleWordCarouselPanel from './panels/StyleWordCarouselPanel';
 import StyleCodeHookPanel from './panels/StyleCodeHookPanel';
 import { getSettingsPanelTitle } from '@/utils/helpers';
 import type {
@@ -270,6 +271,10 @@ const PanelSwitch = ({
         );
       break;
 
+    case 'style-word-carousel':
+      if (clickedNode) return <StyleWordCarouselPanel node={clickedNode} />;
+      break;
+
     case 'style-image': {
       let imageNode: FlatNode | undefined;
       let containerNode: FlatNode | undefined;

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

@@ -8,6 +8,7 @@ import ArrowsUpDownIcon from '@heroicons/react/24/outline/ArrowsUpDownIcon';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import BugAntIcon from '@heroicons/react/24/outline/BugAntIcon';
 import LinkIcon from '@heroicons/react/24/solid/LinkIcon';
+import ChatBubbleBottomCenterTextIcon from '@heroicons/react/24/outline/ChatBubbleBottomCenterTextIcon';
 import XMarkIcon from '@heroicons/react/24/solid/XMarkIcon';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
@@ -97,6 +98,10 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
     selectionStore.setKey('pendingAction', 'link');
   };
 
+  const handleCarouselClick = () => {
+    selectionStore.setKey('pendingAction', 'carousel');
+  };
+
   const handleCancelClick = () => {
     resetSelectionStore();
   };
@@ -184,6 +189,15 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
               >
                 <LinkIcon className="h-5 w-5" />
               </button>
+              <button
+                type="button"
+                onClick={handleCarouselClick}
+                className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 text-blue-700 shadow-sm hover:bg-blue-200"
+                aria-label="Create Word Carousel"
+                title="Word Carousel"
+              >
+                <ChatBubbleBottomCenterTextIcon className="h-5 w-5" />
+              </button>
               <button
                 type="button"
                 onClick={handleCancelClick}

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

@@ -1,14 +1,19 @@
-import { useMemo, useEffect } from 'react';
+import { useMemo, useEffect, useState } from 'react';
+import Cog6ToothIcon from '@heroicons/react/24/outline/Cog6ToothIcon';
 import {
   styleElementInfoStore,
   resetStyleElementInfo,
   settingsPanelStore,
 } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
 import { StylesMemory } from '@/components/edit/state/StylesMemory';
 import {
   isMarkdownPaneFragmentNode,
   isGridLayoutNode,
 } from '@/utils/compositor/typeGuards';
+import { getNodeText } from '@/utils/compositor/nodesHelper';
+import { cloneDeep } from '@/utils/helpers';
+import { processClassesForViewports } from '@/utils/compositor/reduceNodesClassNames';
 import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
 import { tagTitles } from '@/types/compositorTypes';
 import type {
@@ -18,6 +23,78 @@ import type {
   GridLayoutNode,
 } from '@/types/compositorTypes';
 
+type SpanOverride = {
+  mobile?: Record<string, string>;
+  tablet?: Record<string, string>;
+  desktop?: Record<string, string>;
+};
+
+const spanStyleClasses: SpanOverride[] = [
+  {
+    mobile: {
+      bgCLIP: 'text',
+      bgGradientDIRECTION: 'r',
+      gradientFrom: 'blue-600',
+      gradientTo: 'teal-500',
+      textCOLOR: 'transparent',
+    },
+  },
+  {
+    mobile: {
+      textCOLOR: 'blue-600',
+    },
+  },
+  {
+    mobile: {
+      bgCOLOR: 'yellow-300',
+      textCOLOR: 'slate-900',
+      px: '1',
+      rounded: 'sm',
+    },
+  },
+  {
+    mobile: {
+      display: 'inline-block',
+      bgCOLOR: 'indigo-100',
+      textCOLOR: 'indigo-700',
+      textSIZE: 'xs',
+      fontWEIGHT: 'bold',
+      px: '2.5',
+      py: '0.5',
+      rounded: 'full',
+    },
+  },
+  {
+    mobile: {
+      bgCLIP: 'text',
+      textCOLOR: 'transparent',
+      bgGradientDIRECTION: 'r',
+      gradientFrom: 'orange-400',
+      gradientVia: 'pink-500',
+      gradientTo: 'purple-600',
+      fontWEIGHT: 'bold',
+    },
+  },
+  {
+    mobile: {
+      textDECORATION: 'underline',
+      textDECORATIONSTYLE: 'wavy',
+      textDECORATIONCOLOR: 'teal-400',
+      textDECORATIONTHICKNESS: '4',
+      textUNDERLINEOFFSET: '4',
+    },
+  },
+  {
+    mobile: {
+      display: 'inline-block',
+      bgCOLOR: 'rose-500',
+      textCOLOR: 'white',
+      px: '2',
+      skew: '-3',
+    },
+  },
+];
+
 export interface StyleElementPanelProps {
   node: FlatNode;
   parentNode: MarkdownPaneFragmentNode | GridLayoutNode;
@@ -29,6 +106,8 @@ const StyleElementPanel = ({
   parentNode,
   onTitleChange,
 }: StyleElementPanelProps) => {
+  const [showPresets, setShowPresets] = useState(true);
+
   if (
     !node?.tagName ||
     (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
@@ -39,6 +118,18 @@ const StyleElementPanel = ({
   const defaultClasses = parentNode.defaultClasses?.[node.tagName];
   const overrideClasses = node.overrideClasses;
 
+  const hasOverrides = useMemo(() => {
+    return (
+      overrideClasses &&
+      ((overrideClasses.mobile &&
+        Object.keys(overrideClasses.mobile).length > 0) ||
+        (overrideClasses.tablet &&
+          Object.keys(overrideClasses.tablet).length > 0) ||
+        (overrideClasses.desktop &&
+          Object.keys(overrideClasses.desktop).length > 0))
+    );
+  }, [overrideClasses]);
+
   const mergedClasses = useMemo(() => {
     const result: {
       [key: string]: {
@@ -48,7 +139,6 @@ const StyleElementPanel = ({
       };
     } = {};
 
-    // First add all default classes
     if (defaultClasses) {
       Object.keys(defaultClasses.mobile).forEach((className) => {
         result[className] = {
@@ -63,7 +153,6 @@ const StyleElementPanel = ({
       });
     }
 
-    // Then overlay any override classes
     if (overrideClasses) {
       ['mobile', 'tablet', 'desktop'].forEach((viewport) => {
         const viewportOverrides =
@@ -113,6 +202,24 @@ const StyleElementPanel = ({
     });
   };
 
+  const applySpanPreset = (styleIndex: number) => {
+    const ctx = getCtx();
+    const allNodes = ctx.allNodes.get();
+    const targetNode = cloneDeep(allNodes.get(node.id)) as FlatNode;
+    if (!targetNode) return;
+
+    const preset = spanStyleClasses[styleIndex];
+
+    targetNode.overrideClasses = {
+      ...targetNode.overrideClasses,
+      ...preset,
+    };
+
+    ctx.modifyNodes([{ ...targetNode, isChanged: true }]);
+
+    setShowPresets(false);
+  };
+
   useEffect(() => {
     if (
       styleElementInfoStore.get().markdownParentId !== parentNode.id ||
@@ -139,44 +246,119 @@ const StyleElementPanel = ({
     }
   }, [node?.tagName, onTitleChange]);
 
+  const shouldShowQuickStyles =
+    node.tagName === 'span' && !hasOverrides && showPresets;
+  const nodeText = shouldShowQuickStyles ? getNodeText(node) : '';
+
   return (
     <div className="space-y-4">
-      {Object.keys(mergedClasses).length > 0 ? (
-        <div className="flex flex-wrap gap-2">
-          {Object.entries(mergedClasses).map(([className, values]) => (
-            <SelectedTailwindClass
-              key={className}
-              name={className}
-              values={values}
-              onRemove={handleRemove}
-              onUpdate={handleUpdate}
-            />
-          ))}
-        </div>
-      ) : (
-        <div className="space-y-4">
-          <em>No styles.</em>
+      {node.wordCarouselPayload && (
+        <div className="pb-2">
+          <div className="text-myblack hover:bg-mygreen/20 w-fit rounded border border-slate-200 p-2 text-sm">
+            <div
+              title="Configure Word Carousel"
+              className="flex items-center gap-2 font-bold"
+            >
+              <Cog6ToothIcon className="h-4 w-4" />
+              <button
+                onClick={() =>
+                  settingsPanelStore.set({
+                    nodeId: node.id,
+                    action: 'style-word-carousel',
+                    expanded: true,
+                  })
+                }
+              >
+                Configure Word Carousel
+              </button>
+            </div>
+          </div>
         </div>
       )}
 
-      <div className="space-y-4">
-        <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
-          <li>
-            <em>Actions:</em>
-          </li>
-          <li>
+      {shouldShowQuickStyles ? (
+        <div className="space-y-6">
+          <div className="space-y-2">
+            <h3 className="text-mydarkgrey text-sm font-bold">
+              Quick Style Selection
+            </h3>
+            <p className="text-xs text-gray-500">
+              Select a preset style for your text selection.
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-4">
+            {spanStyleClasses.map((style, index) => {
+              const [classesPayload] = processClassesForViewports(
+                style as any,
+                {},
+                1
+              );
+              const combinedClasses = classesPayload[0] || '';
+
+              return (
+                <button
+                  key={index}
+                  onClick={() => applySpanPreset(index)}
+                  className="group w-full text-left text-xl transition-colors hover:outline-dotted hover:outline-2 hover:outline-black"
+                >
+                  <span className={combinedClasses}>
+                    {nodeText || 'Sample Text'}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+
+          <div className="border-t border-gray-100 pt-4">
             <button
-              onClick={() => handleClickAdd()}
-              className="text-myblue font-bold underline hover:text-black"
+              onClick={() => setShowPresets(false)}
+              className="text-myblue w-full text-center text-sm underline hover:text-black"
             >
-              Add Style
+              Apply your own styles manually
             </button>
-          </li>
-          <li>
-            <StylesMemory node={node} parentNode={parentNode} />
-          </li>
-        </ul>
-      </div>
+          </div>
+        </div>
+      ) : (
+        <>
+          {Object.keys(mergedClasses).length > 0 ? (
+            <div className="flex flex-wrap gap-2">
+              {Object.entries(mergedClasses).map(([className, values]) => (
+                <SelectedTailwindClass
+                  key={className}
+                  name={className}
+                  values={values}
+                  onRemove={handleRemove}
+                  onUpdate={handleUpdate}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="space-y-4">
+              <em>No styles.</em>
+            </div>
+          )}
+
+          <div className="space-y-4">
+            <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+              <li>
+                <em>Actions:</em>
+              </li>
+              <li>
+                <button
+                  onClick={() => handleClickAdd()}
+                  className="text-myblue font-bold underline hover:text-black"
+                >
+                  Add Style
+                </button>
+              </li>
+              <li>
+                <StylesMemory node={node} parentNode={parentNode} />
+              </li>
+            </ul>
+          </div>
+        </>
+      )}
     </div>
   );
 };

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

@@ -32,10 +32,13 @@ type ButtonStylePair = [ButtonStyle, ButtonStyle];
 
 const buttonStyleOptions = [
   'Plain text inline',
-  'Fancy text inline',
-  'Fancy button',
+  'Primary',
+  'Primary inverse',
+  'Dark',
+  'Dark inverse',
 ];
 const buttonStyleClasses: ButtonStylePair[] = [
+  // Plain text inline
   [
     {
       fontWEIGHT: ['bold'],
@@ -48,32 +51,93 @@ const buttonStyleClasses: ButtonStylePair[] = [
       textCOLOR: ['brand-1'],
     },
   ],
+  // Primary Solid Button
   [
     {
-      bgCOLOR: ['brand-4'],
-      fontWEIGHT: ['bold'],
-      px: ['3.5'],
-      py: ['1.5'],
-      rounded: ['lg'],
-      textCOLOR: ['brand-1'],
+      alignITEMS: ['center'],
+      bgCOLOR: ['blue-600'],
+      borderCOLOR: ['transparent'],
+      display: ['inline-flex'],
+      justifyCONTENT: ['center'],
+      px: ['6'],
+      py: ['3'],
+      rounded: ['md'],
+      textCOLOR: ['white'],
+      textSIZE: ['base'],
+      transition: ['colors'],
+      transitionDURATION: ['200'],
+      w: ['full'],
     },
     {
-      bgCOLOR: ['brand-3'],
+      bgCOLOR: ['blue-700'],
     },
   ],
+  // Secondary Outline Button
   [
     {
-      bgCOLOR: ['brand-4'],
-      display: ['inline-block'],
-      fontWEIGHT: ['bold'],
-      px: ['3.5'],
-      py: ['2.5'],
+      alignITEMS: ['center'],
+      bgCOLOR: ['transparent'],
+      borderCOLOR: ['blue-600'],
+      borderWIDTH: ['2'],
+      display: ['inline-flex'],
+      justifyCONTENT: ['center'],
+      px: ['6'],
+      py: ['3'],
       rounded: ['md'],
-      textCOLOR: ['brand-1'],
+      textCOLOR: ['blue-600'],
+      textSIZE: ['base'],
+      transition: ['colors'],
+      transitionDURATION: ['200'],
+      w: ['full'],
+    },
+    {
+      bgCOLOR: ['blue-50'],
+    },
+  ],
+  [
+    {
+      alignITEMS: ['center'],
+      bgCOLOR: ['black'],
+      borderCOLOR: ['transparent'],
+      borderWIDTH: ['2'],
+      display: ['inline-flex'],
+      justifyCONTENT: ['center'],
+      px: ['6'],
+      py: ['3'],
+      rounded: ['md'],
+      textCOLOR: ['white'],
+      textSIZE: ['base'],
+      transition: ['colors'],
+      transitionDURATION: ['200'],
+      w: ['full'],
+    },
+    {
+      bgCOLOR: ['white'],
+      textCOLOR: ['black'],
+      borderCOLOR: ['black'],
+      borderWIDTH: ['2'],
+    },
+  ],
+  [
+    {
+      alignITEMS: ['center'],
+      bgCOLOR: ['transparent'],
+      borderCOLOR: ['black'],
+      borderWIDTH: ['2'],
+      display: ['inline-flex'],
+      justifyCONTENT: ['center'],
+      px: ['6'],
+      py: ['3'],
+      rounded: ['md'],
+      textCOLOR: ['black'],
+      textSIZE: ['base'],
+      transition: ['colors'],
+      transitionDURATION: ['200'],
+      w: ['full'],
     },
     {
-      bgCOLOR: ['brand-3'],
-      rotate: ['2'],
+      textCOLOR: ['myblack'],
+      bgCOLOR: ['slate-100'],
     },
   ],
 ];

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

@@ -0,0 +1,181 @@
+import { useState, useEffect } from 'react';
+import { getCtx } from '@/stores/nodes';
+import { settingsPanelStore } from '@/stores/storykeep';
+import { processRichTextToNodes } from '@/utils/compositor/nodesHelper';
+import type { FlatNode } from '@/types/compositorTypes';
+
+interface StyleWordCarouselPanelProps {
+  node: FlatNode;
+}
+
+const StyleWordCarouselPanel = ({ node }: StyleWordCarouselPanelProps) => {
+  const ctx = getCtx();
+  const [words, setWords] = useState<string>('');
+  const [speed, setSpeed] = useState<number>(2);
+
+  useEffect(() => {
+    if (node.wordCarouselPayload) {
+      setWords(node.wordCarouselPayload.words.join('\n'));
+      setSpeed(node.wordCarouselPayload.speed);
+    } else {
+      // Initialize from current node text content if payload doesn't exist
+      const childIds = ctx.getChildNodeIDs(node.id);
+      const allNodes = ctx.allNodes.get();
+      const currentText = childIds
+        .map((id) => {
+          const child = allNodes.get(id) as FlatNode | undefined;
+          return child?.text || child?.copy || '';
+        })
+        .join('');
+
+      setWords(currentText || node.copy || '');
+      setSpeed(2);
+    }
+  }, [node.id, node.wordCarouselPayload]);
+
+  const saveChanges = (currentWords: string, currentSpeed: number) => {
+    const wordsArray = currentWords.split('\n').filter((w) => w.trim() !== '');
+
+    // Sync the first word to the node's text content
+    if (wordsArray.length > 0) {
+      const firstWord = wordsArray[0];
+      const childIds = ctx.getChildNodeIDs(node.id);
+      const allNodes = ctx.allNodes.get();
+      const currentText = childIds
+        .map((id) => {
+          const child = allNodes.get(id) as FlatNode | undefined;
+          return child?.text || child?.copy || '';
+        })
+        .join('');
+
+      if (currentText !== firstWord) {
+        ctx.deleteChildren(node.id);
+        // Use processRichTextToNodes to generate proper text nodes compatible with the compositor
+        const newNodes = processRichTextToNodes(
+          firstWord,
+          node.id,
+          [],
+          () => {}
+        );
+        if (newNodes.length > 0) {
+          ctx.addNodes(newNodes);
+        }
+      }
+    }
+
+    ctx.modifyNodes([
+      {
+        ...node,
+        wordCarouselPayload: {
+          words: wordsArray,
+          speed: currentSpeed,
+        },
+        isChanged: true,
+      } as FlatNode,
+    ]);
+  };
+
+  const handleWordsChange = (val: string) => {
+    setWords(val);
+  };
+
+  const handleWordsBlur = () => {
+    saveChanges(words, speed);
+  };
+
+  const handleSpeedChange = (val: number) => {
+    setSpeed(val);
+    saveChanges(words, val);
+  };
+
+  const handleRemove = () => {
+    // Fetch the latest node state to ensure we check current classes/properties
+    const currentNode = ctx.allNodes.get().get(node.id) as FlatNode;
+    if (!currentNode) return;
+
+    // Logic: Only fully unwrap (delete node) if it is a "naked" span
+    // If it has custom classes, overrides, or is a semantic tag (em, strong), we just strip the payload.
+
+    const isSpan = currentNode.tagName === 'span';
+
+    const hasCustomClasses =
+      !!currentNode.elementCss && currentNode.elementCss.trim().length > 0;
+
+    const hasOverrides =
+      currentNode.overrideClasses &&
+      (Object.keys(currentNode.overrideClasses.mobile || {}).length > 0 ||
+        Object.keys(currentNode.overrideClasses.tablet || {}).length > 0 ||
+        Object.keys(currentNode.overrideClasses.desktop || {}).length > 0);
+
+    // Condition: It is a span, and it has NO custom styling or overrides.
+    if (isSpan && !hasCustomClasses && !hasOverrides) {
+      // "Remove outright"
+      ctx.unwrapNode(node.id);
+    } else {
+      // Keep the tag/styles, but remove the carousel functionality
+      ctx.modifyNodes([
+        {
+          ...currentNode,
+          wordCarouselPayload: undefined,
+          isChanged: true,
+        } as FlatNode,
+      ]);
+    }
+
+    settingsPanelStore.set(null);
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div>
+        <label className="mb-1 block text-xs font-bold text-gray-500">
+          Words (one per line)
+        </label>
+        <textarea
+          className="focus:border-myblue focus:ring-myblue w-full rounded border border-gray-300 p-2 text-sm focus:ring-1"
+          rows={5}
+          value={words}
+          onChange={(e) => handleWordsChange(e.target.value)}
+          onBlur={handleWordsBlur}
+          placeholder="Enter words..."
+        />
+      </div>
+      <div>
+        <label className="mb-1 block text-xs font-bold text-gray-500">
+          Speed (seconds)
+        </label>
+        <div className="flex gap-2">
+          {[1, 2, 3].map((s) => (
+            <button
+              key={s}
+              onClick={() => handleSpeedChange(s)}
+              className={`rounded px-3 py-1 text-sm font-bold transition-colors ${
+                speed === s
+                  ? 'bg-myblue text-white'
+                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+              }`}
+            >
+              {s}s
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="mt-2 flex items-center justify-between border-t border-gray-100 pt-2">
+        <button
+          onClick={() => settingsPanelStore.set(null)}
+          className="text-xs text-gray-400 underline hover:text-gray-600"
+        >
+          Done
+        </button>
+        <button
+          onClick={handleRemove}
+          className="text-xs text-red-400 underline hover:text-red-600"
+        >
+          Remove
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default StyleWordCarouselPanel;

package/templates/src/stores/nodes.ts

@@ -1228,27 +1228,6 @@ export class NodesContext {
     }
   }
 
-  //getStyleByViewport(
-  //  defaultClasses:
-  //    | {
-  //        mobile?: Record<string, string> | undefined;
-  //        tablet?: Record<string, string> | undefined;
-  //        desktop?: Record<string, string> | undefined;
-  //      }
-  //    | undefined,
-  //  viewport: ViewportKey
-  //): Record<string, string> {
-  //  switch (viewport) {
-  //    case "desktop":
-  //      return defaultClasses?.desktop || {};
-  //    case "tablet":
-  //      return defaultClasses?.tablet || {};
-  //    default:
-  //    case "mobile":
-  //      return defaultClasses?.mobile || {};
-  //  }
-  //}
-
   getNodeSlug(nodeId: string): string {
     const node = this.allNodes.get().get(nodeId);
     if (!node || !(`slug` in node) || typeof node.slug !== `string`) return '';

package/templates/src/stores/selection.ts

@@ -18,7 +18,7 @@ export interface SelectionStoreState extends SelectionRange {
   isDragging: boolean;
   isActive: boolean;
   selectionBox: SelectionBox | null;
-  pendingAction: 'style' | 'link' | null;
+  pendingAction: 'style' | 'link' | 'carousel' | null;
   isRestyleModalOpen: boolean;
   paneToRestyleId: string | null;
 }

package/templates/src/types/compositorTypes.ts

@@ -399,6 +399,10 @@ export interface FlatNode extends BaseNode {
   };
   elementCss?: string;
   buttonPayload?: ButtonPayload;
+  wordCarouselPayload?: {
+    words: string[];
+    speed: number;
+  };
 }
 export type ButtonPayload = {
   buttonClasses: Record<string, string[]>;

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

@@ -371,8 +371,10 @@ export function processRichTextToNodes(
         } else if (node.tagName === 'span') {
           node.elementCss = matchingOriginalNode.elementCss;
           node.overrideClasses = matchingOriginalNode.overrideClasses;
+          if (matchingOriginalNode.wordCarouselPayload) {
+            node.wordCarouselPayload = matchingOriginalNode.wordCarouselPayload;
+          }
         }
-        console.log(node);
       } else if (onInsertSignal) {
         // New interactive element detected, trigger insert signal
         onInsertSignal(node.tagName, node.id);

package/templates/src/utils/etl/transformer.ts

@@ -83,6 +83,7 @@ export function transformToOptionsPayload(
           codeHookParams: flatNode.codeHookParams,
           buttonPayload: flatNode.buttonPayload,
           overrideClasses: flatNode.overrideClasses,
+          wordCarouselPayload: flatNode.wordCarouselPayload,
         };
 
         if (VERBOSE)

package/utils/inject-files.ts

@@ -1420,6 +1420,12 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/components/edit/state/StylesMemory.tsx'),
       dest: 'src/components/edit/state/StylesMemory.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/edit/panels/StyleWordCarouselPanel.tsx'
+      ),
+      dest: 'src/components/edit/panels/StyleWordCarouselPanel.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/edit/panels/StyleBreakPanel.tsx'