jspsych-tangram 0.0.8 → 0.0.10

package/dist/index.js

@@ -1,5 +1,5 @@
 import { ParameterType } from 'jspsych';
-import React from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 import { v4 } from 'uuid';
 
@@ -12,9 +12,8 @@ const CONFIG = {
     completion: { fill: "#ccfff2", stroke: "#13da57" },
     silhouetteMask: "#374151",
     anchors: { invalid: "#7dd3fc", valid: "#475569" },
-    piece: { draggingFill: "#8e7cc3ff", validFill: "#8e7cc3ff", invalidFill: "#ef4444", invalidStroke: "#dc2626", selectedStroke: "#674ea7", allGreenStroke: "#86efac", borderStroke: "#674ea7" },
-    ui: { light: "#60a5fa", dark: "#1d4ed8" },
-    blueprint: { fill: "#374151", selectedStroke: "#111827", badgeFill: "#000000", labelFill: "#ffffff" },
+    piece: { draggingFill: "#8e7cc3ff", validFill: "#8e7cc3ff", invalidFill: "#ef4444", allGreenStroke: "#86efac"},
+    blueprint: { fill: "#374151", badgeFill: "#000000", labelFill: "#ffffff" },
     tangramDecomposition: { stroke: "#fef2cc" }
   },
   opacity: {
@@ -25,7 +24,7 @@ const CONFIG = {
     piece: { invalid: 0.35, dragging: 0.75, locked: 1, normal: 1 }
   },
   size: {
-    stroke: { bandPx: 5, pieceSelectedPx: 3, allGreenStrokePx: 10, pieceBorderPx: 2, tangramDecompositionPx: 1 },
+    stroke: { bandPx: 5, allGreenStrokePx: 10, tangramDecompositionPx: 1 },
     anchorRadiusPx: { valid: 1, invalid: 1 },
     badgeFontPx: 16,
     centerBadge: { fractionOfOuterR: 0.15, minPx: 20, marginPx: 4 }
@@ -45,9 +44,7 @@ const CONFIG = {
   },
   game: {
     snapRadiusPx: 15,
-    showBorders: false,
-    hideTouchingBorders: true
-  }
+    showBorders: false}
 };
 
 function isComposite(bp) {
@@ -823,6 +820,10 @@ function shouldUseSelectiveBorders(blueprintId) {
   return CONFIG.game.showBorders;
 }
 
+var lockedIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAACXBIWXMAAAsSAAALEgHS3X78AAAFY0lEQVR4nO2d7XXrNgyGH/r0f7zB9QbXnaDqBt6gvhM0I2SE3A2UDXwnqLKBPEHdDewJ0B+kYieWZEoiQfrjPQcnjqOI0GuYAAFQMiJCLjDGLIEFsHQyB/7w/Pd397MCamAnInVgFUfDpCTaGLMACmDlfj4FHuKAJX4DVCKyC3x+b6gTbYyZA2sn31UHhy1QAqWI7FVHFhEVwVpsCUgmUgKF2vUrEVxlQGyXVBqE3zPBqoTHIHhOXlPEUCmBedZEY6OHfQZkTZU9sMqO6Buw4ujWHYLkJXaBkJqUWFIDy6REYx3eLUwVl2TPREc5heR1BgRoy1qV6DsleRLZD5KVyH6QrET2UMeX+uJyE28H6UvykvuILobKHs/Qz4fkObcdJ0+VGo9FzcV8tDGmBP7qPSg+DtgLqrFWBLYSs8C/AhMTbyKy7j3igjWvSPu1LPH4ajo9y4S6ChdyI5emjFTz8isjcgxYC98kNIxOnfuUTmEhk5e6Tvd1IiMpBxFNmlDOy6kMIDtVpNRqKK3O0BhToetk/sPOxZ0FU1cxX2CNAGxFZCc9lW3XvlARvrreh3cRKc7ezcSaOx0e1tH1hZc1PY6INA79zKrbFKuUlXrpccZDdKnomHqwzlXzmqpeotG35l0PyWMWSa3zPGkiqKKP6FJZmXUH0VVIa0pk1WUr0e5T11REaLe+dYwPEOtIk13fqSLPykp0Wd4uwLm7piTtnM1zM/aMI9boovr6hgvHvgU49zdjTNHyvnZ36bp5MYOPGFW74bDtoouA52871y7g+X3w3XH7YdGFsgJwzMKdYh55zCry+dtQwJHoVQIF7gUrSGvR94ICYOYckGYu4N7wZIxZzLDx5QNxsZxh04kPxMUS9JNINfBChB7kS4KNal4JsygaIhtNooNUTwKS/oxeoqky7kVsbB3JujuhLkCzMKBF9O+S0ebKU7il+j+xx5ldPmQyfuZKMoCIVMCv2ONoEP2qMMZUlLEHiD11HEQkdv4iCIwxUafQ2Bad7ZShjd9SK+CLkz3kTQJsQ4o93RMQNX4MFPN2NcN4t816jBE1ltZwhpPgLLmiPdZ9Aip3TNbInmjsdNG3oHhCvww3GDOOd27JFT5FidwLF+8z2ktKD4TFfkb+Idgm0DEpUV8L0Yeevx94ED0dYttyC9rJPmCzgjtFlcagnjkl+ywmOVxSasHn5M8vYJFzwsrhICK7JryrUmriA7cCPCW1vpJVYQXHODr3Oe6asYEj0VU6PW4eFTii3Ty9TajMrWLbOOrTJXiZRJXbRtm8eBAdF2Xz4oNo58HfUmhzo3g7jYq+Zu9KXV0Go+54nSPKT7+1JMArwiW86wiNL2sm3ERKKfF/VvA42zkbus9BREyoc8WC68r/N+Ap/3RtDB84S/y7A4LlqI0xueeKIWx/+PtXkoHzqeOkRpdV3TCmELbpsbWG2Td4yA2QwefUgCS/BLzO185xehSYB/6ksyObsLeX2zHmxihOkdB3Biixqc3UBC8If6eaom9Mn5tXvQJ/9x40HFtsGKmd5pxjHV/oPZU/ReS57wCvp1YYY2r0N3xeC7YicnF7im9fx4rMqzCJcMCz1cGLaDnW7R74jEI865XenUpia3M/xmp0g/ghQ+qViUOia5XBoWoO8ee1yaj1QC7B/rXIKJK94ug+JLqvXAo0jTqjc+CT2nbdwEtuu7C7xSaKphUaAi1pm62/qb/aoWXUzWiDztEdhD8e4aRB9I1YdzArjkr0CeGNo0xNnK9UBNp4pEr0CeFF5oRXXPODIzsILzMgtpFSg+BGHg/3VcLjcdVKSEr0Vzjil4x/AHvTrF5jm3d2wZUcif8BqSLxz8FiAOgAAAAASUVORK5CYII=";
+
+var unlockedIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAACXBIWXMAAAsSAAALEgHS3X78AAAFYklEQVR4nO1d0ZGjOBB9ct3/+iJYMlg2giODcwjeDCYEbwbeDNgMvBloIjgmAyYDHEHfh4SHsQUIaLVk7FfVNTblkZpHq1u0GqGICKlAKZUDyADkVrYA/vH891f7VwOoANREVDGrOBsqJtFKqQxAAWBn/35h7uIMQ/wJgCaimrl9b4gTrZTaAthb+SbaOfAGoARQElEj2jMRiQiMxZYAKBEpARRi5y9EsE6A2D7REoQ/MsGihIcgeIu0XMRUKQFskyYaZvbQJEDWUmkA7JIjegVWHNy6OUjOYW4QYpMSSioAeVSiYQLeGlzFmDRYGCiXkLxPgABp2YsS/aAkLyL7SbIQ2U+ShcieGvhin1xq4h0gvbJ3Nk+swZ/G9MEZZooFmKlkDB36cIYhezzv7WHJW8jOkxsAR5i7TOfNAszoOgKoBfXqk6pPz0muA3J3fDXmBBkTN2ITXi4i2lqVhKJHH6sYGXXHyGQP5kbGlJe465tsxSPWHYvoZshYYrsMNpITIbvXhfQpWwgo9eJB2AmfR1Vjjw1eoMhkF1OI1oGV0SNxofZoo8aAX7QXJAbRznOLZc1ZDzlzAtqxp60sEtEEh1XHsGanHwNwWNCm0w0h3mLEjVUnYc1M/d4k55GQVUtbQBUwJpx62q4jEV06iYaZN4fu/MafgtfqXKMlFtGEzrx6gw/sER6u5MuOsf1D94tS6gXAV8b2p2J/+dS58hKJo9tovCwIukTbNrXA+YxJ9cl1QC5ouIiONd+VkqzrOgrEQzI1zIFQALgQzeknh5AJ9ZMSdgDELTpzHDsJ9R0LRfshR4TgkNAUTMRPbyA7nL/ZxymuoQV1iIF8A2PRknDFg7W7j3wD+RnHTX9EdIJZUV4r8r8idPqvUmpLtw/rHBH+oscqV9gCskGhgblrY6+o9xWYmHSAfBWsWEenmAQ7CN9C9q5UpJMyNrEDhGsJDlTLdkC8wyTlZR+g9IR9wLRGYN+9Gf/JYhxSJRkArG7H0P1IWPTfKRMNXIo4/wvaB8IS/U5EWcD22aCUCmpwoV1HHbj9u4GEj2aBUmqnlKqUUmSlUkpJpXdZEHJao5mmYEOFNc4Cmhl9BJ9H65SJhl/NR5E40XoDcyuaMnzcwz60EgvRbJD+mp1PGjcLrcRCVPdAtM+IS31U3gXRPosCqS8cVG0gCJUy5Jp1DBX3ONchEwqGDdFHXYdmuGohUQD44zj+B3FrUnyggY8blqSHHhE1RLQD8LNz+CcR7VLPo8Byey8Wfc/QgCWazA6HbxGVWSveLLefch1lFFXWjbL98CQ6LMr2w4VoG1R+x9BmpfjdDdTXadJSVpdVo+x++UQ0EWl87MP8xHy8Wi4vcCX+DyKqzENbOnZG2nP/w/UB5w40SikN/53Ih8C+ZmgXUkHMu50zrhm+ElFx034P0Zyrwo+2Cv7dZQTONUP7w19MHd/Duh6Xjr96R9pANqut4FmavaqRUM1dz3lyZC8Hz7N3FdwO95cJV7MPXyFQCbQAJ/CUg+0HXaTHFefaq6hEQpYN3mrS0ZV4X6W4nqqtYRZS11Qf7bXw4LvBYGbJ5qy4fId8JRN3xf8ZplK2Hvuh93tYJAoB7xDOqZwL3iVhtsEfs1VaH374kgzAz0df+bg9eHzbPct+Mm8zA8ojkz2Z5NlEPzDZs0j2nnX0IfJ2x5Lw3764B4vqo23HOda9sPsGM4Vbli1kuglIYbfbELJoF2AWH91D+PMVThJEr8S62aw4KNEdwttAGZs4X9FgeFWTONEdwovECde45xdH9hBeJkBsK6UEwa08X+4rhOfrqoUQlehrWOJzzH8BewOTN69gEvI1u5Iz8T+TOcUtjzRRXwAAAABJRU5ErkJggg==";
+
 function pathD(poly) {
   return `M ${poly.map((pt) => `${pt.x} ${pt.y}`).join(" L ")} Z`;
 }
@@ -993,10 +994,20 @@ function BoardView(props) {
         }
       )));
     }),
+    /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("filter", { id: "invert-to-white" }, /* @__PURE__ */ React.createElement(
+      "feColorMatrix",
+      {
+        type: "matrix",
+        values: "-1 0 0 0 1\n                     0 -1 0 0 1\n                     0 0 -1 0 1\n                     0 0 0 1 0"
+      }
+    ))),
     (() => {
       const isPrep = controller.state.cfg.mode === "prep";
       const isSubmitEnabled = isPrep ? controller.isSubmitEnabled() : true;
       const isClickable = !draggingId && (!isPrep || isSubmitEnabled);
+      const [imageError, setImageError] = React.useState(false);
+      const iconSize = badgeR * 1.6;
+      const iconOffset = iconSize / 2;
       return /* @__PURE__ */ React.createElement(
         "g",
         {
@@ -1012,7 +1023,7 @@ function BoardView(props) {
             opacity: isSubmitEnabled ? 1 : 0.5
           }
         ),
-        /* @__PURE__ */ React.createElement(
+        isPrep ? /* @__PURE__ */ React.createElement(
           "text",
           {
             textAnchor: "middle",
@@ -1021,7 +1032,29 @@ function BoardView(props) {
             fill: isSubmitEnabled ? CONFIG.color.blueprint.labelFill : "#888",
             pointerEvents: "none"
           },
-          isPrep ? "Submit" : controller.state.blueprintView
+          "Submit"
+        ) : imageError ? /* @__PURE__ */ React.createElement(
+          "text",
+          {
+            textAnchor: "middle",
+            dominantBaseline: "middle",
+            fontSize: CONFIG.size.badgeFontPx,
+            fill: CONFIG.color.blueprint.labelFill,
+            pointerEvents: "none"
+          },
+          "inventory"
+        ) : /* @__PURE__ */ React.createElement(
+          "image",
+          {
+            href: controller.state.blueprintView === "quickstash" ? lockedIcon : unlockedIcon,
+            x: -iconOffset,
+            y: -iconOffset,
+            width: iconSize,
+            height: iconSize,
+            pointerEvents: "none",
+            onError: () => setImageError(true),
+            filter: "url(#invert-to-white)"
+          }
         )
       );
     })(),
@@ -2609,6 +2642,7 @@ class InteractionTracker {
     const trialEndTime = Date.now();
     const totalDuration = trialEndTime - this.trialStartTime;
     const finalSnapshot = this.buildStateSnapshot();
+    const anchorToStimuliRatio = CONFIG.layout.grid.stepPx / CONFIG.layout.grid.unitPx;
     const mode = this.controller.state.cfg.mode;
     if (mode === "construction") {
       const finalBlueprintState = this.buildFinalBlueprintState(finalSnapshot);
@@ -2623,6 +2657,7 @@ class InteractionTracker {
         trialStartTime: this.trialStartTime,
         trialEndTime,
         totalDuration,
+        anchorToStimuliRatio,
         trialParams: this.trialParams,
         endReason,
         completionTimes: this.completionTimes,
@@ -2645,6 +2680,7 @@ class InteractionTracker {
         trialStartTime: this.trialStartTime,
         trialEndTime,
         totalDuration,
+        anchorToStimuliRatio,
         trialParams: this.trialParams,
         endReason: "submit",
         createdMacros: finalMacros,
@@ -3522,7 +3558,7 @@ function startConstructionTrial(display_element, params, _jsPsych) {
   return { root, display_element, jsPsych: _jsPsych };
 }
 
-const info$1 = {
+const info$2 = {
   name: "tangram-construct",
   version: "1.0.0",
   parameters: {
@@ -3636,7 +3672,7 @@ class TangramConstructPlugin {
     this.jsPsych = jsPsych;
   }
   static {
-    this.info = info$1;
+    this.info = info$2;
   }
   /**
    * Launches the trial by invoking startConstructionTrial
@@ -3780,7 +3816,7 @@ function startPrepTrial(display_element, params, jsPsych) {
   return { root, display_element, jsPsych };
 }
 
-const info = {
+const info$1 = {
   name: "tangram-prep",
   version: "1.0.0",
   parameters: {
@@ -3856,7 +3892,7 @@ class TangramPrepPlugin {
     this.jsPsych = jsPsych;
   }
   static {
-    this.info = info;
+    this.info = info$1;
   }
   /**
    * Launches the trial by invoking startPrepTrial
@@ -3892,5 +3928,328 @@ class TangramPrepPlugin {
   }
 }
 
-export { TangramConstructPlugin, TangramPrepPlugin };
+function startNBackTrial(display_element, params, _jsPsych) {
+  const root = createRoot(display_element);
+  root.render(React.createElement(NBackView, { params }));
+  return { root, display_element, jsPsych: _jsPsych };
+}
+function NBackView({ params }) {
+  const {
+    tangram,
+    isMatch,
+    show_tangram_decomposition,
+    instructions,
+    button_text,
+    duration,
+    onTrialEnd
+  } = params;
+  const trialStartTime = useRef(Date.now());
+  const buttonEnabledRef = useRef(true);
+  const timeoutIdRef = useRef(null);
+  const hasRespondedRef = useRef(false);
+  const responseDataRef = useRef(null);
+  const [buttonDisabled, setButtonDisabled] = useState(false);
+  const CANON = /* @__PURE__ */ new Set([
+    "square",
+    "smalltriangle",
+    "parallelogram",
+    "medtriangle",
+    "largetriangle"
+  ]);
+  const filteredTans = tangram.solutionTans.filter((tan) => {
+    const tanName = tan.name ?? tan.kind;
+    return CANON.has(tanName);
+  });
+  const mask = filteredTans.map((tan) => {
+    const polygon = tan.vertices.map(([x, y]) => ({ x: x ?? 0, y: -(y ?? 0) }));
+    return polygon;
+  });
+  const primitiveDecomposition = filteredTans.map((tan) => ({
+    kind: tan.name ?? tan.kind,
+    polygon: tan.vertices.map(([x, y]) => ({ x: x ?? 0, y: -(y ?? 0) }))
+  }));
+  const DISPLAY_SIZE = 400;
+  const viewport = {
+    w: DISPLAY_SIZE,
+    h: DISPLAY_SIZE
+  };
+  const scaleS = React.useMemo(() => {
+    const u = inferUnitFromPolys$1(mask);
+    return u ? CONFIG.layout.grid.unitPx / u : 1;
+  }, [mask]);
+  const centerPos = {
+    cx: viewport.w / 2,
+    cy: viewport.h / 2
+  };
+  const pathD = (poly) => {
+    if (!poly || poly.length === 0) return "";
+    const moves = poly.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`);
+    return moves.join(" ") + " Z";
+  };
+  const endTrial = (data) => {
+    if (timeoutIdRef.current) {
+      clearTimeout(timeoutIdRef.current);
+      timeoutIdRef.current = null;
+    }
+    const accuracy = isMatch !== void 0 ? isMatch === data.responded_match ? 1 : 0 : NaN;
+    const trialData = {
+      ...data,
+      accuracy,
+      tangram_id: tangram.tangramID,
+      is_match: isMatch
+    };
+    if (onTrialEnd) {
+      onTrialEnd(trialData);
+    }
+  };
+  const handleButtonClick = () => {
+    if (!buttonEnabledRef.current) {
+      const rt_late = Date.now() - trialStartTime.current;
+      hasRespondedRef.current = true;
+      responseDataRef.current = {
+        responded_match: true,
+        rt: NaN,
+        responded_after_duration: true,
+        rt_after_duration: rt_late
+      };
+      endTrial(responseDataRef.current);
+    } else {
+      const rt = Date.now() - trialStartTime.current;
+      buttonEnabledRef.current = false;
+      setButtonDisabled(true);
+      hasRespondedRef.current = true;
+      responseDataRef.current = {
+        responded_match: true,
+        rt,
+        responded_after_duration: false,
+        rt_after_duration: NaN
+      };
+    }
+  };
+  useEffect(() => {
+    timeoutIdRef.current = setTimeout(() => {
+      buttonEnabledRef.current = false;
+      if (hasRespondedRef.current && responseDataRef.current) {
+        endTrial(responseDataRef.current);
+      } else {
+        endTrial({
+          responded_match: false,
+          rt: NaN,
+          responded_after_duration: false,
+          rt_after_duration: NaN
+        });
+      }
+    }, duration);
+    return () => {
+      if (timeoutIdRef.current) {
+        clearTimeout(timeoutIdRef.current);
+      }
+    };
+  }, []);
+  const renderSilhouette = () => {
+    if (show_tangram_decomposition) {
+      const rawPolys = primitiveDecomposition.map((primInfo) => primInfo.polygon);
+      const placedPolys = placeSilhouetteGridAlignedAsPolys(rawPolys, scaleS, centerPos);
+      return /* @__PURE__ */ React.createElement("g", { key: "sil-decomposed", pointerEvents: "none" }, placedPolys.map((scaledPoly, i) => /* @__PURE__ */ React.createElement(React.Fragment, { key: `prim-${i}` }, /* @__PURE__ */ React.createElement(
+        "path",
+        {
+          d: pathD(scaledPoly),
+          fill: CONFIG.color.silhouetteMask,
+          opacity: CONFIG.opacity.silhouetteMask,
+          stroke: "none"
+        }
+      ), /* @__PURE__ */ React.createElement(
+        "path",
+        {
+          d: pathD(scaledPoly),
+          fill: "none",
+          stroke: CONFIG.color.tangramDecomposition.stroke,
+          strokeWidth: CONFIG.size.stroke.tangramDecompositionPx
+        }
+      ))));
+    } else {
+      const placedPolys = placeSilhouetteGridAlignedAsPolys(mask, scaleS, centerPos);
+      return /* @__PURE__ */ React.createElement("g", { key: "sil-unified", pointerEvents: "none" }, placedPolys.map((scaledPoly, i) => /* @__PURE__ */ React.createElement(
+        "path",
+        {
+          key: `sil-${i}`,
+          d: pathD(scaledPoly),
+          fill: CONFIG.color.silhouetteMask,
+          opacity: CONFIG.opacity.silhouetteMask,
+          stroke: "none"
+        }
+      )));
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    minHeight: "100vh",
+    padding: "40px 20px",
+    background: "#f5f5f5"
+  } }, instructions && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        maxWidth: "800px",
+        width: "100%",
+        marginBottom: "30px",
+        textAlign: "center",
+        fontSize: "18px",
+        lineHeight: "1.5"
+      },
+      dangerouslySetInnerHTML: { __html: instructions }
+    }
+  ), /* @__PURE__ */ React.createElement("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "30px"
+  } }, /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width: viewport.w,
+      height: viewport.h,
+      viewBox: `0 0 ${viewport.w} ${viewport.h}`,
+      style: {
+        display: "block",
+        background: CONFIG.color.bands.silhouette.fillEven,
+        border: `${CONFIG.size.stroke.bandPx}px solid ${CONFIG.color.bands.silhouette.stroke}`,
+        borderRadius: "8px"
+      }
+    },
+    renderSilhouette()
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "jspsych-btn",
+      onClick: handleButtonClick,
+      disabled: buttonDisabled,
+      style: {
+        padding: "12px 30px",
+        fontSize: "16px",
+        cursor: buttonDisabled ? "not-allowed" : "pointer",
+        opacity: buttonDisabled ? 0.5 : 1
+      }
+    },
+    button_text
+  )));
+}
+
+const info = {
+  name: "tangram-nback",
+  version: "1.0.0",
+  parameters: {
+    /** Single tangram specification to display */
+    tangram: {
+      type: ParameterType.COMPLEX,
+      default: void 0,
+      description: "TangramSpec object defining target shape to display"
+    },
+    /** Whether this trial is a match (for computing accuracy) */
+    isMatch: {
+      type: ParameterType.BOOL,
+      default: void 0,
+      description: "Whether this tangram matches the previous one (optional)"
+    },
+    /** Whether to show tangram decomposed into individual primitives with borders */
+    show_tangram_decomposition: {
+      type: ParameterType.BOOL,
+      default: false,
+      description: "Whether to show tangram decomposed into individual primitives with borders"
+    },
+    /** HTML content to display above the tangram as instructions */
+    instructions: {
+      type: ParameterType.STRING,
+      default: "",
+      description: "HTML content to display above the tangram as instructions"
+    },
+    /** Text to display on response button */
+    button_text: {
+      type: ParameterType.STRING,
+      default: "Same as previous!",
+      description: "Text to display on response button"
+    },
+    /** Duration to display tangram and accept responses (milliseconds) */
+    duration: {
+      type: ParameterType.INT,
+      default: 3e3,
+      description: "Duration in milliseconds to display tangram and accept responses"
+    },
+    /** Callback fired when trial ends */
+    onTrialEnd: {
+      type: ParameterType.FUNCTION,
+      default: void 0,
+      description: "Callback when trial completes with full data"
+    }
+  },
+  data: {
+    /** Whether participant clicked the response button before duration expired */
+    responded_match: {
+      type: ParameterType.BOOL,
+      description: "True if participant clicked response button, false otherwise"
+    },
+    /** Reaction time in milliseconds (NaN if no response or response after duration) */
+    rt: {
+      type: ParameterType.INT,
+      description: "Milliseconds between trial start and button click (NaN if no response or late response)"
+    },
+    /** Accuracy: 1 if correct, 0 if incorrect, NaN if isMatch not provided */
+    accuracy: {
+      type: ParameterType.FLOAT,
+      description: "1 if response matches isMatch parameter, 0 otherwise (NaN if isMatch not provided)"
+    },
+    /** Whether response occurred after duration expired */
+    responded_after_duration: {
+      type: ParameterType.BOOL,
+      description: "True if button clicked after duration expired, false otherwise"
+    },
+    /** Time of late response (NaN if no late response) */
+    rt_after_duration: {
+      type: ParameterType.INT,
+      description: "Milliseconds between trial start and late button click (NaN if no late response)"
+    }
+  },
+  citations: ""
+};
+class TangramNBackPlugin {
+  constructor(jsPsych) {
+    this.jsPsych = jsPsych;
+  }
+  static {
+    this.info = info;
+  }
+  /**
+   * Launches the trial by invoking startNBackTrial
+   * with the display element, parameters, and jsPsych instance.
+   */
+  trial(display_element, trial) {
+    const wrappedOnTrialEnd = (data) => {
+      if (trial.onTrialEnd) {
+        trial.onTrialEnd(data);
+      }
+      const reactContext = display_element.__reactContext;
+      if (reactContext?.root) {
+        reactContext.root.unmount();
+      }
+      display_element.innerHTML = "";
+      this.jsPsych.finishTrial(data);
+    };
+    const params = {
+      tangram: trial.tangram,
+      isMatch: trial.isMatch,
+      show_tangram_decomposition: trial.show_tangram_decomposition,
+      instructions: trial.instructions,
+      button_text: trial.button_text,
+      duration: trial.duration,
+      onTrialEnd: wrappedOnTrialEnd
+    };
+    const { root, display_element: element, jsPsych } = startNBackTrial(display_element, params, this.jsPsych);
+    element.__reactContext = { root, jsPsych };
+  }
+}
+
+export { TangramConstructPlugin, TangramNBackPlugin, TangramPrepPlugin };
 //# sourceMappingURL=index.js.map