astro-tractstack 2.2.6 → 2.2.7

package/dist/index.js

@@ -1,6 +1,6 @@
 import { fileURLToPath as d } from "node:url";
 import { dirname as i, resolve as l } from "node:path";
-import { existsSync as o, mkdirSync as x, copyFileSync as k, writeFileSync as u } from "node:fs";
+import { existsSync as n, mkdirSync as x, copyFileSync as k, writeFileSync as u } from "node:fs";
 import { resolve as a } from "path";
 function b(t) {
   const e = i(d(t));
@@ -94,6 +94,10 @@ async function w(t, e, c) {
       src: t("../templates/src/components/compositor/Node.tsx"),
       dest: "src/components/compositor/Node.tsx"
     },
+    {
+      src: t("../templates/src/components/compositor/ToolDragLayer.tsx"),
+      dest: "src/components/compositor/ToolDragLayer.tsx"
+    },
     {
       src: t(
         "../templates/src/components/compositor/tools/NodeOverlay.tsx"
@@ -574,6 +578,10 @@ async function w(t, e, c) {
       src: t("../templates/src/stores/backend.ts"),
       dest: "src/stores/backend.ts"
     },
+    {
+      src: t("../templates/src/stores/toolDrag.ts"),
+      dest: "src/stores/toolDrag.ts"
+    },
     {
       src: t("../templates/src/stores/resources.ts"),
       dest: "src/stores/resources.ts"
@@ -617,6 +625,10 @@ async function w(t, e, c) {
       src: t("../templates/src/utils/compositor/savePipeline.ts"),
       dest: "src/utils/compositor/savePipeline.ts"
     },
+    {
+      src: t("../templates/src/utils/compositor/toolDragManager.ts"),
+      dest: "src/utils/compositor/toolDragManager.ts"
+    },
     {
       src: t("../templates/src/utils/compositor/aiPaneParser.ts"),
       dest: "src/utils/compositor/aiPaneParser.ts"
@@ -2195,10 +2207,10 @@ async function w(t, e, c) {
   for (const s of r)
     try {
       const p = i(s.dest);
-      o(p) || x(p, { recursive: !0 });
-      const n = !s.protected && (s.dest === "tailwind.config.cjs" || s.dest.startsWith("src/components/codehooks/") || s.dest.startsWith("src/components/widgets/") || s.dest.startsWith("src/") || s.dest.startsWith("public/client/") || s.dest === ".gitignore");
-      if (!o(s.dest) || n)
-        if (o(s.src))
+      n(p) || x(p, { recursive: !0 });
+      const o = !s.protected && (s.dest === "tailwind.config.cjs" || s.dest.startsWith("src/components/codehooks/") || s.dest.startsWith("src/components/widgets/") || s.dest.startsWith("src/") || s.dest.startsWith("public/client/") || s.dest === ".gitignore");
+      if (!n(s.dest) || o)
+        if (n(s.src))
           k(s.src, s.dest), e.info(`Updated ${s.dest}`);
         else {
           const m = y(s.dest);
@@ -2206,8 +2218,8 @@ async function w(t, e, c) {
         }
       else s.protected ? e.info(`Protected: ${s.dest} (skipped overwrite)`) : e.info(`Skipped existing ${s.dest}`);
     } catch (p) {
-      const n = p instanceof Error ? p.message : String(p);
-      e.error(`Failed to create ${s.dest}: ${n}`);
+      const o = p instanceof Error ? p.message : String(p);
+      e.error(`Failed to create ${s.dest}: ${o}`);
     }
 }
 function y(t) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "Astro integration for TractStack - the free web press by At Risk Media",
   "type": "module",
   "main": "dist/index.js",

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

@@ -0,0 +1,38 @@
+import { useStore } from '@nanostores/react';
+import { toolDragStore } from '@/stores/toolDrag';
+import { toolAddModeTitles } from '@/constants';
+import type { ToolAddMode } from '@/types/compositorTypes';
+import ArrowsUpDownIcon from '@heroicons/react/24/outline/ArrowsUpDownIcon';
+
+const ToolDragLayer = () => {
+  const { isDragging, pointer, payload, dragType } = useStore(toolDragStore);
+
+  if (!isDragging || !payload) return null;
+
+  const style = {
+    transform: `translate(${pointer.x}px, ${pointer.y}px)`,
+    position: 'fixed' as const,
+    left: 0,
+    top: 0,
+    zIndex: 9999,
+    pointerEvents: 'none' as const,
+    marginTop: '-20px',
+    marginLeft: '-20px',
+  };
+
+  return (
+    <div style={style} className="pointer-events-none flex items-center gap-2">
+      {dragType === 'insert' ? (
+        <div className="rounded-lg border-2 border-myblue bg-white px-4 py-2 font-bold text-myblue opacity-90 shadow-xl">
+          {toolAddModeTitles[payload as ToolAddMode] || payload}
+        </div>
+      ) : (
+        <div className="flex h-10 w-10 items-center justify-center rounded-full border-2 border-myblue bg-white text-myblue opacity-90 shadow-xl">
+          <ArrowsUpDownIcon className="h-6 w-6" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ToolDragLayer;

package/templates/src/components/compositor/tools/NodeOverlay.tsx

@@ -11,6 +11,8 @@ import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import { getCtx } from '@/stores/nodes';
 import { settingsPanelStore } from '@/stores/storykeep';
+import { toolDragStore, startToolDrag } from '@/stores/toolDrag';
+import { initToolDragListeners } from '@/utils/compositor/toolDragManager';
 import { handleClickEventDefault } from '@/utils/compositor/handleClickEvent';
 import { getTemplateNode } from '@/utils/compositor/nodesHelper';
 import { classNames } from '@/utils/helpers';
@@ -44,9 +46,9 @@ export const NodeOverlay = ({
   const toolMode = useStore(ctx.toolModeValStore).value;
   const toolAddMode = useStore(ctx.toolAddModeStore).value;
   const settingsPanel = useStore(settingsPanelStore);
+  const dragStore = useStore(toolDragStore);
   const [hoverZone, setHoverZone] = useState<'before' | 'after' | null>(null);
 
-  // put a contentEditable={false} component inside a tree that inherits contentEditable={true}.
   const chromeRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -92,11 +94,30 @@ export const NodeOverlay = ({
     }
   };
 
+  const handleReorderStart = (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    startToolDrag('reorder', nodeId, e.clientX, e.clientY);
+    initToolDragListeners();
+  };
+
   const canInsert =
     toolMode === 'insert'
       ? ctx.allowInsert(nodeId, toolAddMode || 'p')
       : { allowInsertBefore: false, allowInsertAfter: false };
 
+  const isReorderMode = toolMode === 'reorder';
+  const isDragging = dragStore.isDragging;
+
+  const showZones =
+    (toolMode === 'insert' && toolAddMode !== `span`) ||
+    (isReorderMode && isDragging);
+
+  const isDragTarget = dragStore.activeDropZone?.nodeId === nodeId;
+  const activeLocation = isDragTarget
+    ? dragStore.activeDropZone?.location
+    : null;
+
   const iconSrc = getIconForTag(node.tagName);
 
   return (
@@ -104,14 +125,19 @@ export const NodeOverlay = ({
       className={classNames(
         'compositor-wrapper group relative transition-all duration-200',
         zIndexClass,
-        toolMode === 'text' ? outlineClass : ''
+        toolMode === 'text' ? outlineClass : '',
+        isReorderMode && !isDragging
+          ? 'cursor-grab hover:outline hover:outline-dotted hover:outline-2 hover:outline-offset-2 hover:outline-cyan-500'
+          : ''
       )}
       style={isInline ? { display: 'inline-block' } : {}}
       data-node-overlay={nodeId}
+      onMouseDown={
+        isReorderMode && !isDragging ? handleReorderStart : undefined
+      }
     >
       {children}
 
-      {/* Text Mode: Tool Cart */}
       {toolMode === 'text' && (
         <div
           ref={chromeRef}
@@ -156,18 +182,19 @@ export const NodeOverlay = ({
         </div>
       )}
 
-      {/* Insert Mode: Split Drop Zones */}
-      {toolMode === 'insert' && toolAddMode !== `span` && (
+      {showZones && (
         <div
           className="compositor-chrome absolute inset-0 z-50 flex flex-col"
           data-attr="exclude"
         >
-          {/* Top / Before Zone */}
           <div
             className={classNames(
               'flex-1 transition-colors duration-200',
-              canInsert.allowInsertBefore
-                ? 'cursor-pointer hover:bg-blue-500/10'
+              activeLocation === 'before'
+                ? 'bg-blue-500 bg-opacity-10'
+                : 'hover:bg-blue-500 hover:bg-opacity-10',
+              canInsert.allowInsertBefore || isReorderMode
+                ? 'cursor-pointer'
                 : 'cursor-not-allowed opacity-0'
             )}
             onMouseEnter={() => setHoverZone('before')}
@@ -176,7 +203,7 @@ export const NodeOverlay = ({
               canInsert.allowInsertBefore && handleInsert('before', e)
             }
           >
-            {canInsert.allowInsertBefore && (
+            {toolMode === 'insert' && canInsert.allowInsertBefore && (
               <div
                 className={classNames(
                   'absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 transform transition-opacity duration-200',
@@ -190,12 +217,14 @@ export const NodeOverlay = ({
             )}
           </div>
 
-          {/* Bottom / After Zone */}
           <div
             className={classNames(
               'flex-1 transition-colors duration-200',
-              canInsert.allowInsertAfter
-                ? 'cursor-pointer hover:bg-blue-500/10'
+              activeLocation === 'after'
+                ? 'bg-blue-500 bg-opacity-10'
+                : 'hover:bg-blue-500 hover:bg-opacity-10',
+              canInsert.allowInsertAfter || isReorderMode
+                ? 'cursor-pointer'
                 : 'cursor-not-allowed opacity-0'
             )}
             onMouseEnter={() => setHoverZone('after')}
@@ -204,7 +233,7 @@ export const NodeOverlay = ({
               canInsert.allowInsertAfter && handleInsert('after', e)
             }
           >
-            {canInsert.allowInsertAfter && (
+            {toolMode === 'insert' && canInsert.allowInsertAfter && (
               <div
                 className={classNames(
                   'absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 transform transition-opacity duration-200',

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

@@ -3,6 +3,8 @@ import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import { getCtx } from '@/stores/nodes';
 import { toggleSettingsPanel } from '@/stores/storykeep';
 import { toolAddModeTitles, toolAddModes } from '@/constants';
+import { startToolDrag } from '@/stores/toolDrag';
+import { initToolDragListeners } from '@/utils/compositor/toolDragManager';
 
 import type { ToolAddMode } from '@/types/compositorTypes';
 
@@ -18,11 +20,18 @@ const AddElementsPanel = ({
     ctx.notifyNode('root');
   };
 
+  const handleMouseDown = (e: React.MouseEvent, mode: ToolAddMode) => {
+    e.preventDefault();
+    startToolDrag('insert', mode, e.clientX, e.clientY);
+    initToolDragListeners();
+  };
+
   return (
     <>
       {toolAddModes.map((mode) => (
         <button
           key={mode}
+          onMouseDown={(e) => handleMouseDown(e, mode)}
           onClick={() => handleElementClick(mode)}
           className={`rounded px-3 py-1.5 text-sm font-bold transition-colors ${
             currentToolAddMode === mode
@@ -39,12 +48,9 @@ const AddElementsPanel = ({
 
 const StoryKeepToolBar = () => {
   const ctx = getCtx();
-
-  // Connect to stores
   const { value: toolModeVal } = useStore(ctx.toolModeValStore);
   const { value: toolAddModeVal } = useStore(ctx.toolAddModeStore);
 
-  // Only show when in insert mode
   if (toolModeVal !== 'insert') {
     return null;
   }
@@ -67,6 +73,9 @@ const StoryKeepToolBar = () => {
       <div className="flex flex-wrap gap-x-2 gap-y-1">
         <AddElementsPanel currentToolAddMode={toolAddModeVal} />
       </div>
+      <p className="px-2 pt-4 text-xs">
+        Drag and drop, or select element and click the + to insert into a pane.
+      </p>
     </div>
   );
 };

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

@@ -2,11 +2,8 @@ import { useRef, useEffect } from 'react';
 import { useStore } from '@nanostores/react';
 import PencilSquareIcon from '@heroicons/react/24/outline/PencilSquareIcon';
 import PaintBrushIcon from '@heroicons/react/24/outline/PaintBrushIcon';
-import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
-import SparklesIcon from '@heroicons/react/24/outline/SparklesIcon';
 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';
@@ -29,6 +26,12 @@ const storykeepToolModes = [
     title: 'Add',
     description: 'Add new element, e.g. paragraph or image',
   },
+  {
+    key: 'reorder',
+    Icon: ArrowsUpDownIcon,
+    title: 'Reorder',
+    description: 'Drag and drop to reorder elements',
+  },
 ] as const;
 
 interface StoryKeepToolModeProps {

package/templates/src/pages/[...slug]/edit.astro

@@ -12,6 +12,7 @@ import StoryKeepToolBar from '@/components/edit/ToolBar';
 import StoryKeepToolMode from '@/components/edit/ToolMode';
 import SettingsPanel from '@/components/edit/SettingsPanel';
 import { Compositor } from '@/components/compositor/Compositor';
+import ToolDragLayer from '@/components/compositor/ToolDragLayer';
 import { requireAdminOrEditor } from '@/utils/auth';
 import { preHealthCheck } from '@/utils/backend';
 
@@ -217,6 +218,7 @@ for (const [key, value] of Astro.url.searchParams) {
       />
     </div>
   </aside>
+  <ToolDragLayer client:only="react" />
 </Layout>
 
 <script>

package/templates/src/stores/toolDrag.ts

@@ -0,0 +1,57 @@
+import { map } from 'nanostores';
+
+export type DragType = 'insert' | 'reorder';
+
+export interface ToolDragState {
+  isDragging: boolean;
+  dragType: DragType | null;
+  payload: string | null;
+  pointer: { x: number; y: number };
+  activeDropZone: {
+    nodeId: string;
+    location: 'before' | 'after';
+  } | null;
+}
+
+export const toolDragStore = map<ToolDragState>({
+  isDragging: false,
+  dragType: null,
+  payload: null,
+  pointer: { x: 0, y: 0 },
+  activeDropZone: null,
+});
+
+export const startToolDrag = (
+  type: DragType,
+  payload: string,
+  startX: number,
+  startY: number
+) => {
+  toolDragStore.set({
+    isDragging: true,
+    dragType: type,
+    payload,
+    pointer: { x: startX, y: startY },
+    activeDropZone: null,
+  });
+};
+
+export const updateToolDragPosition = (x: number, y: number) => {
+  toolDragStore.setKey('pointer', { x, y });
+};
+
+export const updateActiveDropZone = (
+  zone: { nodeId: string; location: 'before' | 'after' } | null
+) => {
+  toolDragStore.setKey('activeDropZone', zone);
+};
+
+export const endToolDrag = () => {
+  toolDragStore.set({
+    isDragging: false,
+    dragType: null,
+    payload: null,
+    pointer: { x: 0, y: 0 },
+    activeDropZone: null,
+  });
+};

package/templates/src/types/compositorTypes.ts

@@ -4,7 +4,7 @@ export type LispToken = string | number | LispToken[];
 
 export type ViewportKey = 'mobile' | 'tablet' | 'desktop' | 'auto';
 export type ViewportAuto = 'mobile' | 'tablet' | 'desktop';
-export type ToolModeVal = 'text' | 'insert';
+export type ToolModeVal = 'text' | 'insert' | 'reorder';
 
 export const toolAddModes = [
   'p',

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

@@ -0,0 +1,69 @@
+import {
+  toolDragStore,
+  updateToolDragPosition,
+  updateActiveDropZone,
+  endToolDrag,
+} from '@/stores/toolDrag';
+import { getCtx } from '@/stores/nodes';
+import { getTemplateNode } from '@/utils/compositor/nodesHelper';
+import type { ToolAddMode } from '@/types/compositorTypes';
+
+export const initToolDragListeners = () => {
+  const handleMouseMove = (e: MouseEvent) => {
+    const state = toolDragStore.get();
+    if (!state.isDragging) return;
+
+    e.preventDefault();
+    updateToolDragPosition(e.clientX, e.clientY);
+
+    const elements = document.elementsFromPoint(e.clientX, e.clientY);
+    const targetOverlay = elements.find((el) =>
+      el.hasAttribute('data-node-overlay')
+    );
+
+    if (!targetOverlay) {
+      updateActiveDropZone(null);
+      return;
+    }
+
+    const nodeId = targetOverlay.getAttribute('data-node-overlay');
+    if (!nodeId) return;
+
+    if (state.dragType === 'reorder' && state.payload === nodeId) {
+      updateActiveDropZone(null);
+      return;
+    }
+
+    const rect = targetOverlay.getBoundingClientRect();
+    const midPoint = rect.top + rect.height / 2;
+    const location = e.clientY < midPoint ? 'before' : 'after';
+
+    updateActiveDropZone({ nodeId, location });
+  };
+
+  const handleMouseUp = (_: MouseEvent) => {
+    const state = toolDragStore.get();
+    if (!state.isDragging) return;
+
+    if (state.activeDropZone) {
+      const ctx = getCtx();
+      const { nodeId, location } = state.activeDropZone;
+
+      if (state.dragType === 'reorder' && state.payload) {
+        ctx.moveNodeTo(state.payload, nodeId, location);
+      } else if (state.dragType === 'insert' && state.payload) {
+        const template = getTemplateNode(state.payload as ToolAddMode);
+        if (template) {
+          ctx.addTemplateNode(nodeId, template, nodeId, location);
+        }
+      }
+    }
+
+    endToolDrag();
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', handleMouseUp);
+  };
+
+  window.addEventListener('mousemove', handleMouseMove);
+  window.addEventListener('mouseup', handleMouseUp);
+};

package/utils/inject-files.ts

@@ -95,6 +95,10 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/components/compositor/Node.tsx'),
       dest: 'src/components/compositor/Node.tsx',
     },
+    {
+      src: resolve('../templates/src/components/compositor/ToolDragLayer.tsx'),
+      dest: 'src/components/compositor/ToolDragLayer.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/compositor/tools/NodeOverlay.tsx'
@@ -576,6 +580,10 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/stores/backend.ts'),
       dest: 'src/stores/backend.ts',
     },
+    {
+      src: resolve('../templates/src/stores/toolDrag.ts'),
+      dest: 'src/stores/toolDrag.ts',
+    },
     {
       src: resolve('../templates/src/stores/resources.ts'),
       dest: 'src/stores/resources.ts',
@@ -621,6 +629,10 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/utils/compositor/savePipeline.ts'),
       dest: 'src/utils/compositor/savePipeline.ts',
     },
+    {
+      src: resolve('../templates/src/utils/compositor/toolDragManager.ts'),
+      dest: 'src/utils/compositor/toolDragManager.ts',
+    },
     {
       src: resolve('../templates/src/utils/compositor/aiPaneParser.ts'),
       dest: 'src/utils/compositor/aiPaneParser.ts',