jspsych-tangram 0.0.1

package/src/core/types/plugin-interfaces.ts

@@ -0,0 +1,101 @@
+// Clean jsPsych plugin interfaces - JSON input/output contracts
+import { Sector, Blueprint, ActionEvent, LayoutMode, PlacementTarget, InputMode, BlueprintView, PrimitiveBlueprint, SectorState } from '../domain/types';
+
+// CRITICAL: These interfaces define the plugin boundaries
+// NO hardcoded data, NO default values - everything injected
+
+// Plugin 1: Construction Trial (main game)
+export interface ConstructionTrialParams {
+  tangrams: TangramSpec[];            // Target tangrams to construct (sectors in UI)
+  quickstash_macros: MacroSpec[];     // Pre-made macros from prep trial
+  time_limit_ms: number;
+  target: PlacementTarget;            // "workspace" | "silhouette" - CRITICAL
+  input: InputMode;                   // "click" | "drag" - CRITICAL
+  layout: LayoutMode;                 // "circle" | "semicircle"
+}
+
+export interface ConstructionTrialData {
+  events: ActionEvent[];              // All interactions
+  completion_times: number[];         // Time per sector
+  final_state: CompletionState[];     // Final state of each sector
+  macros_used: MacroUsageData[];      // Macro usage tracking
+}
+
+// Plugin 2: Prep Trial (macro creation) 
+export interface PrepTrialParams {
+  num_quickstash_slots: number;       // How many macros user can create
+  time_limit_ms?: number;             // Optional time limit
+  instructions?: string;              // Custom instructions
+  // NOTE: primitives are NOT passed in - they are unchanging/hardcoded
+}
+
+export interface PrepTrialData {
+  created_macros: MacroSpec[];        // The macros user created
+  creation_events: MacroEvent[];      // Step-by-step creation process
+  completion_time_ms: number;
+}
+
+// Supporting types for plugin interfaces
+export interface TangramSpec {
+  id: string;
+  silhouette: {
+    mask: number[][][];               // Polygon arrays as numbers
+    requiredCount: number;
+  };
+}
+
+export interface MacroSpec {
+  id: string;
+  parts: Array<{
+    kind: string;                     // TanKind as string
+    offset: { x: number; y: number };
+  }>;
+  shape: number[][][];                // Union shape as number arrays
+  colorHint?: string;
+}
+
+// NOTE: PrimitiveSpec removed - primitives are unchanging and not passed to plugins
+
+export interface CompletionState {
+  sectorId: string;
+  completed: boolean;
+  completedAt?: number;
+  pieceCount: number;
+}
+
+export interface MacroUsageData {
+  macroId: string;
+  usedAt: number;
+  sectorId: string;
+}
+
+export interface MacroEvent {
+  t: number;
+  type: "start_macro" | "add_piece" | "complete_macro" | "discard_macro";
+  macroId?: string;
+  pieceId?: string;
+}
+
+// Legacy configuration interface (will be removed during refactoring)
+export type RoundConfig = {
+  n: number;
+  layout: LayoutMode;
+  target: PlacementTarget;
+  input: InputMode;
+  maxQuickstashSlots: number;
+  timeLimitMs: number;
+  snapRadiusPx?: number;
+  maxCompositeSize: number;
+  sectors: Sector[];                  // REMOVE: Should be injected via plugin params
+};
+
+// Legacy state interface (will be refactored)
+export type RoundState = {
+  cfg: RoundConfig;                   // REMOVE: Config should not contain data
+  blueprintView: BlueprintView;
+  primitives: PrimitiveBlueprint[];     // REMOVE: Should be injected
+  quickstash: Blueprint[];            // REMOVE: Should be injected  
+  sectors: Record<string, SectorState>;
+  startedAt: number;
+  endedAt?: number;
+};

package/src/index.spec.ts

@@ -0,0 +1,19 @@
+import { startTimeline } from "@jspsych/test-utils";
+
+import { TangramConstructPlugin } from ".";
+
+jest.useFakeTimers();
+
+describe("my plugin", () => {
+  it("should load", async () => {
+    const { expectFinished } = await startTimeline([
+      {
+        type: TangramConstructPlugin,
+        parameter_name: 1,
+        parameter_name2: "img.png",
+      },
+    ]);
+
+    await expectFinished();
+  });
+});

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default as TangramConstructPlugin } from "./plugins/tangram-construct";
+export { default as TangramPrepPlugin } from "./plugins/tangram-prep";

package/src/plugins/tangram-construct/ConstructionApp.tsx

@@ -0,0 +1,105 @@
+/**
+ * ConstructionApp.tsx - React wrapper for tangram construction trials
+ * 
+ * This component handles the React rendering logic for construction trials,
+ * separating it from the pure jsPsych plugin class.
+ */
+
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { JsPsych } from "jspsych";
+import { GameBoard } from "../../core/components";
+import { PRIMITIVE_BLUEPRINTS } from "../../core/domain/primitives";
+import { convertAnchorCompositeToPixels } from "../../core/io/quickstash";
+import type { 
+  Sector, 
+  Blueprint, 
+  PlacementTarget, 
+  InputMode, 
+  LayoutMode,
+  TanKind,
+  PrimitiveBlueprint
+} from "../../core/domain/types";
+import { CONFIG } from "../../core/config/config";
+
+export interface StartConstructionTrialParams {
+  tangrams: any[];
+  quickstash_macros?: Blueprint[] | AnchorComposite[];
+  target?: PlacementTarget;
+  input?: InputMode;
+  layout?: LayoutMode;
+  time_limit_ms: number;
+  onInteraction?: (event: any) => void;
+  onTrialEnd?: (data: any) => void;
+}
+
+// Type for anchor-based composite definitions
+type AnchorComposite = {
+  id: string;
+  parts: Array<{ kind: TanKind; anchorOffset: { x: number; y: number } }>;
+  label?: string;
+};
+
+/**
+ * Start a construction trial by rendering the GameBoard component
+ */
+export function startConstructionTrial(
+  display_element: HTMLElement, 
+  params: StartConstructionTrialParams,
+  _jsPsych: JsPsych
+) {
+  // Convert JSON plugin parameters to internal Sector[] format
+  const sectors: Sector[] = params.tangrams.map(tangramSpec => ({
+    id: tangramSpec.id,
+    silhouette: {
+      id: tangramSpec.id,
+      mask: tangramSpec.silhouette.mask.map((polygonArray: number[][]) => 
+        polygonArray.map(([x, y]: number[]) => ({ x: x ?? 0, y: -(y ?? 0) })) // Convert to SVG coords (flip Y)
+      ),
+      requiredCount: tangramSpec.silhouette.requiredCount,
+    },
+  }));
+
+  // Convert quickstash_macros to Blueprint[] format
+  // Handle both anchor-based composites and pre-converted blueprints
+  let quickstash: Blueprint[] = [];
+  
+  if (params.quickstash_macros && params.quickstash_macros.length > 0) {
+    // Check if the first item has anchorOffset (anchor-based) or offset (pixel-based)
+    const firstMacro = params.quickstash_macros[0];
+    if (firstMacro && 'parts' in firstMacro && firstMacro.parts && firstMacro.parts[0] && 'anchorOffset' in firstMacro.parts[0]) {
+      
+      // Create primitive map for conversion
+      const primsByKind = new Map<TanKind, PrimitiveBlueprint>();
+      PRIMITIVE_BLUEPRINTS.forEach(p => primsByKind.set(p.kind, p));
+      
+      // Convert each anchor composite to pixel-based blueprint
+      quickstash = (params.quickstash_macros as AnchorComposite[]).map(anchorComposite => 
+        convertAnchorCompositeToPixels(anchorComposite, primsByKind, CONFIG.layout.grid.stepPx) // Use current CONFIG grid step
+      );
+    } else {
+      // Already pixel-based blueprints
+      quickstash = params.quickstash_macros as Blueprint[];
+    }
+  }
+
+  // Create React root and render GameBoard
+  const root = createRoot(display_element);
+  root.render(
+    React.createElement(GameBoard, {
+      sectors,
+      quickstash,
+      primitives: PRIMITIVE_BLUEPRINTS,
+      layout: (params.layout || "semicircle") as LayoutMode,
+      target: (params.target || "silhouette") as PlacementTarget,
+      input: (params.input || "drag") as InputMode,
+      timeLimitMs: params.time_limit_ms || 0,
+      maxQuickstashSlots: CONFIG.layout.defaults.maxQuickstashSlots,
+      mode: 'construction', // Explicit construction mode
+      ...(params.onInteraction && { onInteraction: params.onInteraction }),
+      ...(params.onTrialEnd && { onTrialEnd: params.onTrialEnd })
+    })
+  );
+
+  return { root, display_element, jsPsych: _jsPsych };
+}

package/src/plugins/tangram-construct/index.ts

@@ -0,0 +1,156 @@
+import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
+import { startConstructionTrial, StartConstructionTrialParams } from "./ConstructionApp";
+
+const info = {
+  name: "tangram-construct",
+  version: "1.0.0",
+  parameters: {
+    /** Array of tangram specifications defining the puzzles to solve */
+    tangrams: {
+      type: ParameterType.COMPLEX,
+      default: undefined,
+      description: "Array of TangramSpec objects defining target shapes to construct"
+    },
+    /** Array of pre-made macro pieces from prep plugin */
+    quickstash_macros: {
+      type: ParameterType.COMPLEX,
+      default: [],
+      description: "Array of MacroSpec objects created in prep trial"
+    },
+    /** Whether to place pieces in workspace or directly on silhouette */
+    target: {
+      type: ParameterType.SELECT,
+      options: ["workspace", "silhouette"],
+      default: "silhouette",
+      description: "Placement target: workspace (free placement) or silhouette (onto target shape)"
+    },
+    /** Input method for piece manipulation */
+    input: {
+      type: ParameterType.SELECT, 
+      options: ["click", "drag"],
+      default: "drag",
+      description: "Input mode: drag (mouse/touch drag) or click (click to select/place)"
+    },
+    /** Layout style for piece arrangement */
+    layout: {
+      type: ParameterType.SELECT,
+      options: ["circle", "semicircle"], 
+      default: "semicircle",
+      description: "Layout mode: full circle or semicircle piece arrangement"
+    },
+    /** Maximum time allowed for trial in milliseconds */
+    time_limit_ms: {
+      type: ParameterType.INT,
+      default: 0,
+      description: "Time limit in milliseconds (0 = no limit)"
+    },
+    /** Snap radius for piece placement in pixels */
+    snap_radius_px: {
+      type: ParameterType.INT,
+      default: 18,
+      description: "Snap radius for anchor-based piece placement"
+    },
+    /** Callback fired after each interaction (piece pickup + placedown) */
+    onInteraction: {
+      type: ParameterType.FUNCTION,
+      default: undefined,
+      description: "Callback for each interaction event (e.g., socket.emit)"
+    },
+    /** Callback fired when trial ends */
+    onTrialEnd: {
+      type: ParameterType.FUNCTION,
+      default: undefined,
+      description: "Callback when trial completes with full data"
+    }
+  },
+  data: {
+    /** Array of all interaction events during trial */
+    events: {
+      type: ParameterType.COMPLEX,
+      description: "Chronological log of all user interactions and game events"
+    },
+    /** Completion time for each sector/tangram */
+    completion_times: {
+      type: ParameterType.COMPLEX,
+      description: "Array of completion times in milliseconds for each tangram"
+    },
+    /** Final completion state of each sector */
+    final_state: {
+      type: ParameterType.COMPLEX,
+      description: "Array describing completion status of each tangram sector"
+    },
+    /** Usage statistics for macro pieces */
+    macros_used: {
+      type: ParameterType.COMPLEX,
+      description: "Array tracking which macros were used and when"
+    },
+    /** Total trial duration in milliseconds */
+    trial_duration_ms: {
+      type: ParameterType.INT,
+      description: "Total time from trial start to completion"
+    }
+  },
+  citations: ""
+};
+
+type Info = typeof info;
+
+/**
+ * **tangram-construct**
+ *
+ * A jsPsych wrapper around the React-based construction interface.
+ *
+ * @author Justin Yang & Sean Paul Anderson
+ * @see {@link https://github.com/cogtoolslab/tangram_construction.git/tree/main/experiments/jspsych-tangram-prep}
+ */
+class TangramConstructPlugin implements JsPsychPlugin<Info> {
+  static info = info;
+
+  constructor(private jsPsych: JsPsych) {}
+
+  /**
+   * Launches the trial by invoking startConstructionTrial
+   * with the display element, parameters, and jsPsych instance.
+   */
+  trial(display_element: HTMLElement, trial: TrialType<Info>) {
+    // Wrap onTrialEnd to handle React cleanup and jsPsych trial completion
+    const wrappedOnTrialEnd = (data: any) => {
+      // Call user-provided callback if exists
+      if (trial.onTrialEnd) {
+        trial.onTrialEnd(data);
+      }
+
+      // Clean up React first (before clearing DOM)
+      const reactContext = (display_element as any).__reactContext;
+      if (reactContext?.root) {
+        reactContext.root.unmount();
+      }
+
+      // Clear display after React cleanup
+      display_element.innerHTML = '';
+
+      // Finish jsPsych trial with data
+      this.jsPsych.finishTrial(data);
+    };
+
+    // Create parameter object for wrapper
+    const params: StartConstructionTrialParams = {
+      tangrams: trial.tangrams,
+      quickstash_macros: trial.quickstash_macros,
+      target: trial.target,
+      input: trial.input,
+      layout: trial.layout,
+      time_limit_ms: trial.time_limit_ms || 0,
+      onInteraction: trial.onInteraction,
+      onTrialEnd: wrappedOnTrialEnd
+    };
+
+    // Use React wrapper to start the trial
+    const { root, display_element: element, jsPsych } = startConstructionTrial(display_element, params, this.jsPsych);
+    
+    // Store React context for cleanup
+    (element as any).__reactContext = { root, jsPsych };
+  }
+}
+
+export default TangramConstructPlugin;

package/src/plugins/tangram-prep/PrepApp.tsx

@@ -0,0 +1,182 @@
+/**
+ * PrepApp.tsx - React wrapper for tangram prep trials
+ * 
+ * This component handles the React rendering logic for prep trials,
+ * separating it from the pure jsPsych plugin class.
+ */
+
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { JsPsych } from "jspsych";
+import { GameBoard } from "../../core/components";
+import { PRIMITIVE_BLUEPRINTS } from "../../core/domain/primitives";
+import { convertAnchorCompositeToPixels } from "../../core/io/quickstash";
+import type { Sector, TanKind, PrimitiveBlueprint } from "../../core/domain/types";
+import { BaseGameController } from "../../core/engine/state/BaseGameController";
+import { CONFIG } from "../../core/config/config";
+import { rectForBand } from "../../core/domain/layout";
+import { boundsOfBlueprint } from "../../core/engine/geometry";
+
+// Type for anchor-based composite definitions (matches what convertAnchorCompositeToPixels expects)
+type AnchorComposite = {
+  id: string;
+  parts: Array<{ kind: TanKind; anchorOffset: { x: number; y: number } }>;
+  label?: string;
+};
+
+export interface StartPrepTrialParams {
+  numQuickstashSlots: number;
+  maxPiecesPerMacro: number;
+  minPiecesPerMacro: number;
+  inputMode: "click" | "drag";
+  layoutMode: "circle" | "semicircle";
+  requireAllSlots: boolean;
+  quickstashMacros?: AnchorComposite[];
+  onInteraction?: (event: any) => void;
+  onTrialEnd?: (data: any) => void;
+}
+
+/**
+ * Start a prep trial by rendering the GameBoard component in prep mode
+ */
+export function startPrepTrial(
+  display_element: HTMLElement, 
+  params: StartPrepTrialParams,
+  jsPsych: JsPsych
+) {
+  // Extract parameters (defaults handled at plugin level)
+  const { 
+    numQuickstashSlots, 
+    maxPiecesPerMacro, 
+    minPiecesPerMacro, 
+    inputMode, 
+    layoutMode, 
+    requireAllSlots,
+    quickstashMacros,
+    onInteraction,
+    onTrialEnd,
+  } = params;
+
+  // Create blank prep sectors (no silhouettes)
+  const prepSectors: Sector[] = Array.from({ length: numQuickstashSlots }, (_, i) => ({
+    id: `prep-sector-${i}`,
+    silhouette: {
+      id: `prep-silhouette-${i}`,
+      mask: []
+    }
+  }));
+
+  // Always create a fresh root (don't try to reuse unmounted roots)
+  const root = createRoot(display_element);
+
+  // Callback to spawn macro pieces when controller is ready
+  const handleControllerReady = (controller: BaseGameController, layout?: any, force?: () => void) => {
+    if (quickstashMacros && quickstashMacros.length > 0 && layout) {
+      // Spawn pieces immediately when controller and layout are ready
+      const primsByKind = new Map<TanKind, PrimitiveBlueprint>();
+      PRIMITIVE_BLUEPRINTS.forEach(p => primsByKind.set(p.kind, p));
+      
+      quickstashMacros.forEach((anchorComposite, macroIndex) => {
+        const sectorId = `prep-sector-${macroIndex}`;
+        
+        // Convert anchor composite to pixel-based composite
+        const compositeBlueprint = convertAnchorCompositeToPixels(
+          anchorComposite, 
+          primsByKind, 
+          CONFIG.layout.grid.stepPx
+        );
+        
+        // Get the sector center coordinates using rectForBand
+        const sectorGeom = layout.sectors.find((s: any) => s.id === sectorId);
+        if (!sectorGeom) return;
+        
+        const sectorRect = rectForBand(layout, sectorGeom, "workspace", 1.0);
+        
+        // Calculate the composite's overall bounding box
+        // part.offset is where the primitive's bb.min ends up in the composite (see convertAnchorCompositeToPixels)
+        // So we just need to find the bounds of all pieces at their offsets
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        compositeBlueprint.parts.forEach(part => {
+          const primitiveBlueprint = primsByKind.get(part.kind);
+          if (!primitiveBlueprint) return;
+          const bb = boundsOfBlueprint(primitiveBlueprint, controller.getPrimitive);
+          
+          // part.offset + bb gives us the piece's position in the composite
+          // (since part.offset is added to all vertices, including bb.min)
+          const pieceMinX = part.offset.x + bb.min.x;
+          const pieceMinY = part.offset.y + bb.min.y;
+          const pieceMaxX = part.offset.x + bb.max.x;
+          const pieceMaxY = part.offset.y + bb.max.y;
+          
+          minX = Math.min(minX, pieceMinX);
+          minY = Math.min(minY, pieceMinY);
+          maxX = Math.max(maxX, pieceMaxX);
+          maxY = Math.max(maxY, pieceMaxY);
+        });
+        
+        const compositeCenterX = minX + (maxX - minX) / 2;
+        const compositeCenterY = minY + (maxY - minY) / 2;
+        
+        // Spawn each piece in the composite
+        compositeBlueprint.parts.forEach((part) => {
+          const primitiveBlueprint = primsByKind.get(part.kind);
+          if (!primitiveBlueprint) {
+            console.warn(`Unknown primitive kind: ${part.kind}`);
+            return;
+          }
+          
+          // Get the piece's bounding box
+          const bb = boundsOfBlueprint(primitiveBlueprint, controller.getPrimitive);
+          
+          // In the composite, the piece's bb.min is at (part.offset + bb.min)
+          const compositeBBoxMinX = part.offset.x + bb.min.x;
+          const compositeBBoxMinY = part.offset.y + bb.min.y;
+          
+          // Position relative to composite center, then place at sector center
+          // piece.pos is where bb.min should be, so we use compositeBBoxMinX
+          const worldPosX = sectorRect.cx + (compositeBBoxMinX - compositeCenterX);
+          const worldPosY = sectorRect.cy + (compositeBBoxMinY - compositeCenterY);
+          
+          // Align to grid (like silhouettes do)
+          const gridStep = CONFIG.layout.grid.stepPx;
+          const alignedX = Math.round(worldPosX / gridStep) * gridStep;
+          const alignedY = Math.round(worldPosY / gridStep) * gridStep;
+          
+          // Spawn primitive piece at the grid-aligned position
+          const pieceId = controller.spawnFromBlueprint(
+            primitiveBlueprint, 
+            { x: alignedX, y: alignedY }
+          );
+          
+          // Place the piece in the prep sector
+          controller.drop(pieceId, sectorId);
+        });
+      });
+      
+      // Force a re-render to show the spawned pieces
+      if (force) {
+        force();
+      }
+    }
+  };
+
+  root.render(React.createElement(GameBoard, {
+    sectors: prepSectors,
+    quickstash: [], // No pre-made macros
+    primitives: PRIMITIVE_BLUEPRINTS,
+    layout: layoutMode,
+    target: 'workspace', // Pieces go in sectors
+    input: inputMode,
+    timeLimitMs: 0, // No time limit for prep
+    maxQuickstashSlots: 0, // Primitives only in center
+    maxCompositeSize: maxPiecesPerMacro,
+    mode: 'prep', // Enable prep-specific behavior
+    minPiecesPerMacro: minPiecesPerMacro,
+    requireAllSlots: requireAllSlots,
+    onControllerReady: handleControllerReady,
+    ...(onInteraction && { onInteraction }),
+    ...(onTrialEnd && { onTrialEnd })
+  }));
+
+  return { root, display_element, jsPsych };
+}

package/src/plugins/tangram-prep/index.ts

@@ -0,0 +1,122 @@
+import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
+import { startPrepTrial, StartPrepTrialParams } from "./PrepApp";
+
+const info = {
+  name: "tangram-prep",
+  version: "1.0.0",
+  parameters: {
+    /** Number of quickstash slots for macro creation */
+    num_quickstash_slots: {
+      type: ParameterType.INT,
+      default: undefined
+    },
+    /** Maximum pieces allowed per macro */
+    max_pieces_per_macro: {
+      type: ParameterType.INT,
+      default: 2
+    },
+    /** Minimum pieces required per macro */
+    min_pieces_per_macro: {
+      type: ParameterType.INT,
+      default: 2
+    },
+    /** Input mode: click or drag */
+    input: {
+      type: ParameterType.STRING,
+      default: "click"
+    },
+    /** Layout mode: circle or semicircle */
+    layout: {
+      type: ParameterType.STRING,
+      default: "semicircle"
+    },
+    /** Whether all slots must be filled to complete trial */
+    require_all_slots: {
+      type: ParameterType.BOOL,
+      default: undefined
+    },
+    /** Array of pre-made macro pieces to edit */
+    quickstash_macros: {
+      type: ParameterType.COMPLEX,
+      default: [],
+      description: "Array of AnchorComposite objects to edit as primitive pieces"
+    },
+    /** Callback fired after each interaction (optional analytics hook) */
+    onInteraction: {
+      type: ParameterType.FUNCTION,
+      default: undefined
+    },
+    /** Callback fired when prep trial ends */
+    onTrialEnd: {
+      type: ParameterType.FUNCTION,
+      default: undefined
+    }
+  },
+  data: {
+    /** Completion status */
+    completed: {
+      type: ParameterType.BOOL
+    }
+  },
+  citations: ""
+};
+
+type Info = typeof info;
+
+/**
+ * **tangram-prep**
+ *
+ * A jsPsych wrapper around the React-based prep interface.
+ *
+ * @author Justin Yang & Sean Paul Anderson
+ */
+class TangramPrepPlugin implements JsPsychPlugin<Info> {
+  static info = info;
+
+  constructor(private jsPsych: JsPsych) {}
+
+  /**
+   * Launches the trial by invoking startPrepTrial
+   * with the display element, parameters, and jsPsych instance.
+   */
+  trial(display_element: HTMLElement, trial: TrialType<Info>) {
+    // Wrap onTrialEnd to handle React cleanup and jsPsych trial completion
+    const wrappedOnTrialEnd = (data: any) => {
+      // Call user-provided callback if exists
+      if (trial.onTrialEnd) {
+        trial.onTrialEnd(data);
+      }
+
+      // Clean up React
+      const reactContext = (display_element as any).__reactContext;
+      if (reactContext?.root) {
+        reactContext.root.unmount();
+      }
+
+      // Clear display
+      display_element.innerHTML = '';
+
+      // Finish jsPsych trial with data
+      this.jsPsych.finishTrial(data);
+    };
+
+    const params: StartPrepTrialParams = {
+      numQuickstashSlots: trial.num_quickstash_slots || 4,
+      maxPiecesPerMacro: trial.max_pieces_per_macro,
+      minPiecesPerMacro: trial.min_pieces_per_macro,
+      inputMode: trial.input as "click" | "drag",
+      layoutMode: trial.layout as "circle" | "semicircle",
+      requireAllSlots: trial.require_all_slots,
+      quickstashMacros: trial.quickstash_macros,
+      onInteraction: trial.onInteraction,
+      onTrialEnd: wrappedOnTrialEnd,
+    };
+    
+    const { root, display_element: element, jsPsych } = startPrepTrial(display_element, params, this.jsPsych);
+    
+    // Store React context for cleanup
+    (element as any).__reactContext = { root, jsPsych };
+  }
+}
+
+export default TangramPrepPlugin;