/ src / features / tutorial / types.ts
types.ts
  1  /**
  2   * Tutorial Types - Declarative step definitions for MVP onboarding
  3   *
  4   * Design principles:
  5   * - Steps as data, not code (easy to reorder/modify)
  6   * - Each step can have text, golden dot, and actions
  7   * - Segments group related steps for modularity
  8   */
  9  
 10  /**
 11   * A single tutorial step
 12   */
 13  export interface TutorialStep {
 14    /** Unique identifier for this step */
 15    id: string;
 16  
 17    /** Segment this step belongs to */
 18    segment: TutorialSegment;
 19  
 20    /** Text to display via ManimText */
 21    text?: {
 22      content: string;
 23      /** Position in 3D space [x, y, z] */
 24      position: [number, number, number];
 25      /** Font size (default 48) */
 26      fontSize?: number;
 27      /** Duration to show text in ms (before auto-advance) */
 28      duration?: number;
 29    };
 30  
 31    /** Golden dot animation - position-based */
 32    goldenDot?: {
 33      from: [number, number, number];
 34      to: [number, number, number];
 35      /** Optional Bezier control points */
 36      controlPoints?: [number, number, number][];
 37      duration?: number;
 38      easing?: 'linear' | 'easeInOut' | 'easeIn' | 'easeOut';
 39      /** Node IDs to track for hit detection (triggers hover state automatically) */
 40      hitDetectionNodeIds?: string[];
 41    };
 42  
 43    /** Golden dot animation - node-based (resolves positions from store) */
 44    goldenDotNodes?: {
 45      fromNodeId: string;
 46      toNodeId: string;
 47      /** Optional Bezier control points */
 48      controlPoints?: [number, number, number][];
 49      duration?: number;
 50      easing?: 'linear' | 'easeInOut' | 'easeIn' | 'easeOut';
 51      /** Node IDs to track for hit detection (triggers hover state automatically) */
 52      hitDetectionNodeIds?: string[];
 53    };
 54  
 55    /** Node to highlight with golden glow */
 56    highlightNode?: {
 57      /** Node ID to highlight (e.g., 'InterBrain', 'Alice') */
 58      nodeId: string;
 59      /** Duration of highlight in ms */
 60      duration?: number;
 61    };
 62  
 63    /** Action to perform when step starts */
 64    onEnter?: TutorialAction;
 65  
 66    /** Action to perform when step ends */
 67    onExit?: TutorialAction;
 68  
 69    /** How to advance to next step */
 70    advance: {
 71      /** 'auto' = after duration, 'click' = user clicks, 'action' = after action completes */
 72      type: 'auto' | 'click' | 'action';
 73      /** For 'auto': delay in ms after animations complete */
 74      delay?: number;
 75    };
 76  }
 77  
 78  /**
 79   * Tutorial segments - logical groupings of steps
 80   */
 81  export type TutorialSegment =
 82    | 'anchor-point'      // InterBrain introduction
 83    | 'dreamer-nodes'     // Red nodes = people
 84    | 'dreamtalk'         // Symbol/thumbnail side
 85    | 'navigate'          // Click through liminal web
 86    | 'dreamsong'         // Canvas side
 87    | 'edit-canvas'       // Edit mode
 88    | 'relationships'     // Add connections
 89    | 'create-node'       // Drag-drop creation
 90    | 'weaving'           // DreamSong references
 91    | 'copilot'           // Video call intro
 92    | 'invitation';       // Closing message
 93  
 94  /**
 95   * Actions the tutorial can trigger
 96   */
 97  export type TutorialAction =
 98    | { type: 'select-node'; nodeId: string }
 99    | { type: 'focus-node'; nodeId: string }
100    | { type: 'flip-node'; nodeId: string; direction: 'front' | 'back' }
101    | { type: 'set-layout'; layout: 'constellation' | 'liminal-web' }
102    | { type: 'execute-command'; commandId: string }
103    | { type: 'highlight-glow'; nodeId: string; duration: number }
104    | { type: 'wait'; duration: number };
105  
106  /**
107   * Tutorial state for the store
108   */
109  export interface TutorialState {
110    /** Whether tutorial is currently active */
111    isActive: boolean;
112  
113    /** Current step index (-1 if inactive) */
114    currentStepIndex: number;
115  
116    /** Whether tutorial has been completed before */
117    hasCompleted: boolean;
118  
119    /** Current phase: 'download' (Phase 1) or 'personalize' (Phase 2) */
120    phase: 'download' | 'personalize' | null;
121  
122    /** IDs of demo vault nodes (symlinked, removed after tutorial) */
123    demoNodeIds: string[];
124  
125    /** Node currently highlighted with golden glow */
126    highlightedNodeId: string | null;
127  
128    /** Whether the portal overlay is showing (pre-tutorial entry screen) */
129    showPortal: boolean;
130  }
131  
132  /**
133   * Demo vault configuration
134   */
135  export interface DemoVaultConfig {
136    /** Path to bundled demo nodes within plugin */
137    bundlePath: string;
138  
139    /** Node definitions */
140    nodes: DemoNodeConfig[];
141  }
142  
143  export interface DemoNodeConfig {
144    /** Node ID (folder name) */
145    id: string;
146  
147    /** Display name */
148    name: string;
149  
150    /** Node type */
151    type: 'dream' | 'dreamer';
152  
153    /** IDs of connected nodes */
154    connections: string[];
155  
156    /** Whether node has pre-woven DreamSong content */
157    hasDreamSong: boolean;
158  }