feat: Guided Tours Framework 2

Author: camielvs

src/components/Learn/tours/registry.ts

@@ -3,8 +3,33 @@ import type { StepType } from "@reactour/tour";
 import { publicAsset } from "@/utils/publicAsset";
 
 export type TourStep = StepType & {
-  interaction?: "undock-window" | "redock-window" | "select-task";
+  interaction?:
+    | "undock-window"
+    | "redock-window"
+    | "select-task"
+    | "add-task"
+    | "add-input"
+    | "add-output"
+    | "connect-edge"
+    | "expand-folder"
+    | "library-search"
+    | "set-argument";
   targetWindowId?: string;
+  targetFolderName?: string;
+  targetArgumentName?: string;
+  targetSearchTerm?: string;
+  targetTaskName?: string;
+  targetComponentName?: string;
+  targetEdge?: {
+    sourceTaskName: string;
+    sourcePortName: string;
+    targetTaskName?: string;
+    targetPortName?: string;
+  };
+  ringSelectors?: string[];
+  resetLibrarySearch?: boolean;
+  ensureWindowRestored?: string;
+  requiresTaskSelected?: string;
   fallbackContent?: string;
 };
 

src/providers/TourProvider/TourPopover.tsx

@@ -42,6 +42,10 @@ export const POPOVER_STYLES = {
     ...base,
     rx: 6,
   }),
+  clickArea: (base: object) => ({
+    ...base,
+    pointerEvents: "none" as const,
+  }),
   highlightedArea: (
     base: object,
     state?: { width?: number; height?: number },
@@ -86,20 +90,30 @@ export function computeDefaultPopoverPosition(
   props: PositionProps,
 ): ResolvedPosition {
   const targetHeight = props.bottom - props.top;
+  const isTallStrip = targetHeight > props.windowHeight * 0.5;
+  const margin = 16;
 
-  const isFullHeightRightStrip =
-    props.right >= props.windowWidth - 4 &&
-    targetHeight > props.windowHeight * 0.5;
-
-  if (isFullHeightRightStrip) {
+  // Right-anchored full-height strip (e.g. right sidebar): place popover to
+  // its LEFT. Reactour's "left" fallback can swap to "top"/"bottom" for tall
+  // targets, so we return explicit coords.
+  if (isTallStrip && props.right >= props.windowWidth - 4) {
     const popoverWidth = props.width || 380;
-    const margin = 16;
     return [
       Math.max(margin, props.left - popoverWidth - margin),
       Math.max(props.top + margin, 64),
     ];
   }
 
+  // Left-anchored full-height strip (e.g. left dock): place popover to its
+  // RIGHT. Same reason — reactour's "right" fallback drops to "top" for tall
+  // targets even when there's plenty of room horizontally. We test the
+  // target's right edge against the viewport midline rather than its left
+  // edge against zero, so a dock that isn't flush to the window edge still
+  // qualifies.
+  if (isTallStrip && props.right < props.windowWidth * 0.5) {
+    return [props.right + margin, Math.max(props.top + margin, 64)];
+  }
+
   return "bottom";
 }