zelune 1.5.7 → 1.6.2

package/src/canvas/CanvasApp.tsx

@@ -18,6 +18,7 @@ import {
   Sliders,
   Sun,
   Moon,
+  Plus,
 } from 'lucide-react';
 import { SCREEN_COMPONENTS, SCREEN_ORDER } from '../screens';
 import { ScreenArtboard } from './ScreenArtboard';
@@ -31,12 +32,18 @@ import type {
   ScreenMetadata,
   SelectedElementRef,
 } from './types';
-import type { PatchPayload, ReorderPayload } from '../server/astEngine';
+import type {
+  PatchPayload,
+  ReorderPayload,
+  InsertElementPayload,
+  DuplicateElementPayload,
+  DeleteElementPayload,
+} from '../server/astEngine';
 
 const DEFAULT_WIDTH = 393;
 const DEFAULT_HEIGHT = 852;
-const ARTBOARD_GAP = 130;
-const ARTBOARD_ROW_GAP = 140;
+const ARTBOARD_GAP = 160;
+const ARTBOARD_ROW_GAP = 220;
 const INITIAL_OFFSET_X = 80;
 const INITIAL_OFFSET_Y = 70;
 const MIN_ZOOM = 0.08;
@@ -241,6 +248,11 @@ export const CanvasApp: React.FC = () => {
         }
         const sorted = sortScreensByOrder(screensJson.screens);
         setScreens(sorted);
+        setActiveScreenId((prev) => {
+          if (prev && sorted.some((s) => s.id === prev)) return prev;
+          const home = sorted.find((s) => s.id.toLowerCase() === 'home');
+          return home ? home.id : (sorted[0]?.id ?? null);
+        });
         if (screensJson.history) {
           setHistoryState(screensJson.history);
         }
@@ -412,6 +424,132 @@ export const CanvasApp: React.FC = () => {
     [fetchScreens]
   );
 
+  // Surgical AST Component / Section Insertion handler
+  const handleInsertElement = useCallback(
+    async (payload: InsertElementPayload) => {
+      setIsSaving(true);
+      setStatusMessage(null);
+      try {
+        const res = await fetch('/api/insert', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        });
+        const data = (await res.json()) as {
+          ok: boolean;
+          element?: InspectedElement;
+          history?: { undoAvailable: number; redoAvailable: number };
+          error?: string;
+        };
+        if (data.ok && data.element) {
+          setInspectedData(data.element);
+          if (data.history) setHistoryState(data.history);
+          const ownerScreen =
+            screens.find((s) => s.filePath === data.element!.file)?.id ??
+            activeScreenId ??
+            'Home';
+          setSelectedElement({
+            screenId: ownerScreen,
+            file: data.element.file,
+            astPath: data.element.astPath,
+            line: data.element.line,
+            col: data.element.col,
+            tagName: data.element.tagName,
+          });
+          setStatusMessage(`Added <${data.element.tagName}> to .tsx`);
+          void fetchScreens();
+        } else if (data.error) {
+          setStatusMessage(`Error: ${data.error}`);
+        }
+      } catch {
+        setStatusMessage('Failed to insert AST element');
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [fetchScreens, screens, activeScreenId]
+  );
+
+  // Surgical AST Duplicate Element handler
+  const handleDuplicateElement = useCallback(
+    async (payload: DuplicateElementPayload) => {
+      setIsSaving(true);
+      setStatusMessage(null);
+      try {
+        const res = await fetch('/api/duplicate', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        });
+        const data = (await res.json()) as {
+          ok: boolean;
+          element?: InspectedElement;
+          history?: { undoAvailable: number; redoAvailable: number };
+          error?: string;
+        };
+        if (data.ok && data.element) {
+          setInspectedData(data.element);
+          if (data.history) setHistoryState(data.history);
+          setSelectedElement((prev) =>
+            prev
+              ? {
+                  ...prev,
+                  line: data.element!.line,
+                  col: data.element!.col,
+                  astPath: data.element!.astPath,
+                  tagName: data.element!.tagName,
+                }
+              : null
+          );
+          setStatusMessage('Duplicated element in .tsx');
+          void fetchScreens();
+        } else if (data.error) {
+          setStatusMessage(`Error: ${data.error}`);
+        }
+      } catch {
+        setStatusMessage('Failed to duplicate AST element');
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [fetchScreens]
+  );
+
+  // Surgical AST Delete Element handler
+  const handleDeleteElement = useCallback(
+    async (payload: DeleteElementPayload) => {
+      setIsSaving(true);
+      setStatusMessage(null);
+      try {
+        const res = await fetch('/api/delete', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        });
+        const data = (await res.json()) as {
+          ok: boolean;
+          deletedAstPath?: string;
+          history?: { undoAvailable: number; redoAvailable: number };
+          error?: string;
+        };
+        if (data.ok) {
+          if (data.history) setHistoryState(data.history);
+          setSelectedElement(null);
+          setInspectedData(null);
+          setStatusMessage('Deleted element from .tsx');
+          void fetchScreens();
+        } else if (data.error) {
+          setStatusMessage(`Error: ${data.error}`);
+        }
+      } catch {
+        setStatusMessage('Failed to delete AST element');
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [fetchScreens]
+  );
+
   // Undo & Redo handlers
   const handleUndo = useCallback(async () => {
     const res = await fetch('/api/undo', {
@@ -939,6 +1077,32 @@ export const CanvasApp: React.FC = () => {
             <GitCommit size={14} style={{ flexShrink: 0 }} />
             <span className="zelune-reveal-label">Flow Graph</span>
           </button>
+
+          <button
+            type="button"
+            className="zelune-interactive"
+            onClick={() => {
+              setIsRightPanelOpen(true);
+              window.dispatchEvent(new CustomEvent('zelune:open-insert-palette'));
+            }}
+            title="Add Button, Section, Input, or Component to Active Screen"
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: 5,
+              padding: '6px 10px',
+              borderRadius: 7,
+              border: '1px solid rgba(56, 189, 248, 0.4)',
+              backgroundColor: 'rgba(56, 189, 248, 0.12)',
+              color: colorScheme === 'dark' ? '#38BDF8' : '#0284C7',
+              fontSize: 12,
+              fontWeight: 600,
+              cursor: 'pointer',
+            }}
+          >
+            <Plus size={14} style={{ flexShrink: 0 }} />
+            <span>Add Element</span>
+          </button>
         </div>
 
         {/* Right: Undo/Redo, Viewport Controls, Theme Toggle & Right Inspector Toggle */}
@@ -1466,11 +1630,18 @@ export const CanvasApp: React.FC = () => {
         {/* Right: AST Visual Inspector Panel */}
         <InspectorPanel
           inspected={inspectedData}
+          screens={screens}
+          activeScreenId={activeScreenId}
           isOpen={isRightPanelOpen}
           isLoading={isInspecting}
           isSaving={isSaving}
           statusMessage={statusMessage}
           onPatch={handlePatchElement}
+          onInsert={handleInsertElement}
+          onDuplicate={handleDuplicateElement}
+          onDelete={handleDeleteElement}
+          onReorder={handleReorderElement}
+          onSelectScreen={setActiveScreenId}
           onClearSelection={() => {
             setSelectedElement(null);
             setInspectedData(null);

package/src/canvas/FlowArrowsLayer.tsx

@@ -36,7 +36,7 @@ export const FlowArrowsLayer: React.FC<FlowArrowsLayerProps> = React.memo(({
         top: 0,
         left: 0,
         width: 8000,
-        height: 4000,
+        height: 6000,
         pointerEvents: 'none',
         overflow: 'visible',
         zIndex: 5,
@@ -48,8 +48,8 @@ export const FlowArrowsLayer: React.FC<FlowArrowsLayerProps> = React.memo(({
           viewBox="0 0 10 10"
           refX="8"
           refY="5"
-          markerWidth="6"
-          markerHeight="6"
+          markerWidth="6.5"
+          markerHeight="6.5"
           orient="auto-start-reverse"
         >
           <path d="M 0 1.5 L 8.5 5 L 0 8.5 z" fill="#6366F1" />
@@ -63,7 +63,7 @@ export const FlowArrowsLayer: React.FC<FlowArrowsLayerProps> = React.memo(({
           markerHeight="7"
           orient="auto-start-reverse"
         >
-          <path d="M 0 1.5 L 8.5 5 L 0 8.5 z" fill="#34D399" />
+          <path d="M 0 1.5 L 8.5 5 L 0 8.5 z" fill="#10B981" />
         </marker>
       </defs>
 
@@ -72,48 +72,90 @@ export const FlowArrowsLayer: React.FC<FlowArrowsLayerProps> = React.memo(({
         const toBox = layout[edge.toScreen];
         if (!fromBox || !toBox) return null;
 
-        const isForward = toBox.x >= fromBox.x;
+        const sameRow = Math.abs(toBox.y - fromBox.y) < 180;
+        const isExplicitReturn =
+          edge.id.includes(':return') || edge.triggerLabel.startsWith('Back to ');
+        const isReturnOrBackward =
+          isExplicitReturn || (sameRow ? toBox.x < fromBox.x : toBox.y < fromBox.y);
+
         const isHighlighted =
           activeScreenId === edge.fromScreen ||
           highlightedScreenId === edge.toScreen ||
           activeScreenId === edge.toScreen;
 
-        // Vertical staggering so multiple arrows don't overlap
-        const verticalSlot = ((idx % 4) - 1.5) * 56;
+        // Emerald/Green wires for Return/Back flows AND Active/Highlighted flows; Blue/Indigo wires for Forward flows
+        const useEmeraldWire = isHighlighted || isReturnOrBackward;
+
+        const verticalSlot = ((idx % 4) - 1.5) * 52;
+        const horizontalSlot = ((idx % 5) - 2) * 38;
 
         let startX: number;
         let startY: number;
+        let cp1X: number;
+        let cp1Y: number;
+        let cp2X: number;
+        let cp2Y: number;
         let endX: number;
         let endY: number;
-        let pathD: string;
-        let midX: number;
-        let midY: number;
-
-        if (isForward) {
-          startX = fromBox.x + fromBox.width;
-          startY = fromBox.y + ARTBOARD_HEADER_OFFSET + fromBox.height * 0.45 + verticalSlot;
-          endX = toBox.x;
-          endY = toBox.y + ARTBOARD_HEADER_OFFSET + toBox.height * 0.35 + verticalSlot * 0.6;
-
-          const dx = Math.max(80, Math.abs(endX - startX) * 0.45);
-          pathD = `M ${startX} ${startY} C ${startX + dx} ${startY}, ${endX - dx} ${endY}, ${endX} ${endY}`;
-          midX = (startX + endX) / 2;
-          midY = (startY + endY) / 2;
-        } else {
-          // Return loop arched underneath the artboards
-          startX = fromBox.x + fromBox.width * 0.5;
+
+        if (sameRow) {
+          const horizontalGap = toBox.x - (fromBox.x + fromBox.width);
+          const isAdjacentForward = toBox.x > fromBox.x && horizontalGap <= 240;
+
+          if (isAdjacentForward) {
+            // Directly adjacent neighbors in the same row: connect across the empty vertical alley
+            startX = fromBox.x + fromBox.width;
+            startY = fromBox.y + ARTBOARD_HEADER_OFFSET + fromBox.height * 0.45 + verticalSlot;
+            endX = toBox.x;
+            endY = toBox.y + ARTBOARD_HEADER_OFFSET + toBox.height * 0.36 + verticalSlot * 0.6;
+            const dx = Math.max(60, Math.abs(endX - startX) * 0.45);
+            cp1X = startX + dx;
+            cp1Y = startY;
+            cp2X = endX - dx;
+            cp2Y = endY;
+          } else {
+            // Non-adjacent or return in same row: arch cleanly inside the empty horizontal corridor below the row
+            startX = fromBox.x + fromBox.width * 0.5 + horizontalSlot * 0.5;
+            startY = fromBox.y + ARTBOARD_HEADER_OFFSET + fromBox.height;
+            endX = toBox.x + toBox.width * 0.5 - horizontalSlot * 0.5;
+            endY = toBox.y + ARTBOARD_HEADER_OFFSET + toBox.height;
+            const archDepth = 58 + (idx % 4) * 26;
+            cp1X = startX;
+            cp1Y = startY + archDepth;
+            cp2X = endX;
+            cp2Y = endY + archDepth;
+          }
+        } else if (toBox.y > fromBox.y) {
+          // Cross-row downward connection through the horizontal corridor between rows
+          startX = fromBox.x + fromBox.width * 0.5 + horizontalSlot;
           startY = fromBox.y + ARTBOARD_HEADER_OFFSET + fromBox.height;
-          endX = toBox.x + toBox.width * 0.5;
+          endX = toBox.x + toBox.width * 0.5 + horizontalSlot * 0.6;
+          endY = toBox.y;
+          const dy = Math.max(70, Math.min(140, Math.abs(endY - startY) * 0.45));
+          cp1X = startX;
+          cp1Y = startY + dy;
+          cp2X = endX;
+          cp2Y = endY - dy;
+        } else {
+          // Cross-row upward return connection through the horizontal corridor between rows
+          startX = fromBox.x + fromBox.width * 0.5 + horizontalSlot;
+          startY = fromBox.y;
+          endX = toBox.x + toBox.width * 0.5 + horizontalSlot * 0.6;
           endY = toBox.y + ARTBOARD_HEADER_OFFSET + toBox.height;
-
-          const archDepth = 110 + (idx % 3) * 35;
-          pathD = `M ${startX} ${startY} C ${startX} ${startY + archDepth}, ${endX} ${endY + archDepth}, ${endX} ${endY}`;
-          midX = (startX + endX) / 2;
-          midY = Math.max(startY, endY) + archDepth * 0.72;
+          const dy = Math.max(70, Math.min(140, Math.abs(startY - endY) * 0.45));
+          cp1X = startX;
+          cp1Y = startY - dy;
+          cp2X = endX;
+          cp2Y = endY + dy;
         }
 
-        const strokeColor = isHighlighted ? '#34D399' : '#6366F1';
-        const strokeOpacity = isHighlighted ? 0.95 : 0.55;
+        const pathD = `M ${startX} ${startY} C ${cp1X} ${cp1Y}, ${cp2X} ${cp2Y}, ${endX} ${endY}`;
+        // Exact cubic Bezier midpoint at t = 0.5
+        const midX = 0.125 * startX + 0.375 * cp1X + 0.375 * cp2X + 0.125 * endX;
+        const midY = 0.125 * startY + 0.375 * cp1Y + 0.375 * cp2Y + 0.125 * endY;
+
+        const strokeColor = useEmeraldWire ? '#10B981' : '#6366F1';
+        const strokeOpacity = isHighlighted ? 0.98 : 0.82;
 
         return (
           <g key={edge.id}>
@@ -122,9 +164,9 @@ export const FlowArrowsLayer: React.FC<FlowArrowsLayerProps> = React.memo(({
               <path
                 d={pathD}
                 fill="none"
-                stroke="#34D399"
-                strokeWidth={6}
-                strokeOpacity={0.18}
+                stroke={strokeColor}
+                strokeWidth={7}
+                strokeOpacity={0.22}
               />
             )}
 
@@ -133,11 +175,11 @@ export const FlowArrowsLayer: React.FC<FlowArrowsLayerProps> = React.memo(({
               d={pathD}
               fill="none"
               stroke={strokeColor}
-              strokeWidth={isHighlighted ? 2.25 : 1.75}
+              strokeWidth={isHighlighted ? 2.8 : 2.15}
               strokeOpacity={strokeOpacity}
-              strokeDasharray={isForward ? undefined : '6 5'}
+              strokeDasharray={isReturnOrBackward ? '7 5' : undefined}
               markerEnd={
-                isHighlighted ? 'url(#flow-arrow-active)' : 'url(#flow-arrow-default)'
+                useEmeraldWire ? 'url(#flow-arrow-active)' : 'url(#flow-arrow-default)'
               }
             />
 
@@ -145,17 +187,17 @@ export const FlowArrowsLayer: React.FC<FlowArrowsLayerProps> = React.memo(({
             <circle
               cx={startX}
               cy={startY}
-              r={4}
+              r={4.5}
               fill="var(--studio-surface-1)"
               stroke={strokeColor}
-              strokeWidth={2}
+              strokeWidth={2.2}
             />
 
             {/* Interactive Flow Label Pill */}
             <foreignObject
-              x={midX - 75}
+              x={midX - 85}
               y={midY - 13}
-              width={150}
+              width={170}
               height={28}
               style={{ pointerEvents: 'auto', overflow: 'visible' }}
             >
@@ -173,8 +215,8 @@ export const FlowArrowsLayer: React.FC<FlowArrowsLayerProps> = React.memo(({
                   padding: '3px 9px',
                   borderRadius: 999,
                   backgroundColor: 'var(--studio-surface-1)',
-                  border: `1px solid ${isHighlighted ? 'var(--studio-accent-emerald)' : 'var(--studio-badge-indigo-border)'}`,
-                  color: isHighlighted ? 'var(--studio-badge-emerald-text)' : 'var(--studio-badge-indigo-text)',
+                  border: `1px solid ${useEmeraldWire ? 'var(--studio-accent-emerald)' : 'var(--studio-badge-indigo-border)'}`,
+                  color: useEmeraldWire ? 'var(--studio-badge-emerald-text)' : 'var(--studio-badge-indigo-text)',
                   fontSize: 10,
                   fontWeight: 600,
                   fontFamily: 'JetBrains Mono, monospace',