jspsych-tangram 0.0.6 → 0.0.8

package/dist/index.js

@@ -6,31 +6,34 @@ import { v4 } from 'uuid';
 const CONFIG = {
   color: {
     bands: {
-      silhouette: { fillEven: "#eef2ff", fillOdd: "#f6f7fb", stroke: "#c7d2fe" },
-      workspace: { fillEven: "#f3f4f6", fillOdd: "#f9fafb", stroke: "#e5e7eb" }
+      silhouette: { fillEven: "#fff2ccff", fillOdd: "#fff2ccff", stroke: "#b1b1b1" },
+      workspace: { fillEven: "#fff2ccff", fillOdd: "#fff2ccff", stroke: "#b1b1b1" }
     },
-    completion: { fill: "#dcfce7", stroke: "#86efac" },
-    silhouetteMask: "#94a3b8",
+    completion: { fill: "#ccfff2", stroke: "#13da57" },
+    silhouetteMask: "#374151",
     anchors: { invalid: "#7dd3fc", valid: "#475569" },
-    piece: { draggingFill: "#1d4ed8", validFill: "#60a5fa", invalidFill: "#ef4444", invalidStroke: "#dc2626", selectedStroke: "#111827", allGreenStroke: "#86efac", borderStroke: "#374151" },
+    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: "#eef2ff", labelFill: "#374151" }
+    blueprint: { fill: "#374151", selectedStroke: "#111827", badgeFill: "#000000", labelFill: "#ffffff" },
+    tangramDecomposition: { stroke: "#fef2cc" }
   },
   opacity: {
-    blueprint: 0.95,
-    silhouetteMask: 0.45,
-    anchors: { valid: 0.8, invalid: 0.5 },
-    piece: { invalid: 0.35, dragging: 0.6, locked: 0.7, normal: 0.95 }
+    blueprint: 0.4,
+    silhouetteMask: 0.25,
+    //anchors: { valid: 0.80, invalid: 0.50 },
+    anchors: { invalid: 0, valid: 0 },
+    piece: { invalid: 0.35, dragging: 0.75, locked: 1, normal: 1 }
   },
   size: {
-    stroke: { bandPx: 1, pieceSelectedPx: 1.5, allGreenStrokePx: 6, pieceBorderPx: 1 },
+    stroke: { bandPx: 5, pieceSelectedPx: 3, allGreenStrokePx: 10, pieceBorderPx: 2, tangramDecompositionPx: 1 },
     anchorRadiusPx: { valid: 1, invalid: 1 },
-    badgeFontPx: 12,
+    badgeFontPx: 16,
     centerBadge: { fractionOfOuterR: 0.15, minPx: 20, marginPx: 4 }
   },
   layout: {
     grid: { stepPx: 20, unitPx: 40 },
     paddingPx: 1,
+    viewportScale: 0.8,
     constraints: {
       workspaceDiamAnchors: 10,
       // num anchors req'd to be on diagonal
@@ -42,7 +45,7 @@ const CONFIG = {
   },
   game: {
     snapRadiusPx: 15,
-    showBorders: true,
+    showBorders: false,
     hideTouchingBorders: true
   }
 };
@@ -813,150 +816,11 @@ function rectForBand(layout, sector, band, pad = 0.85) {
   return { cx, cy, w, h };
 }
 
-function generateEdgeStrokePaths(poly) {
-  const strokePaths = [];
-  for (let i = 0; i < poly.length; i++) {
-    const current = poly[i];
-    const next = poly[(i + 1) % poly.length];
-    if (current && next) {
-      strokePaths.push(`M ${current.x} ${current.y} L ${next.x} ${next.y}`);
-    }
-  }
-  return strokePaths;
-}
-function edgeToUnitSegments$1(start, end, gridSize) {
-  const segments = [];
-  const startGrid = {
-    x: Math.round(start.x / gridSize),
-    y: Math.round(start.y / gridSize)
-  };
-  const endGrid = {
-    x: Math.round(end.x / gridSize),
-    y: Math.round(end.y / gridSize)
-  };
-  const dx = endGrid.x - startGrid.x;
-  const dy = endGrid.y - startGrid.y;
-  if (dx === 0 && dy === 0) return [];
-  const steps = Math.max(Math.abs(dx), Math.abs(dy));
-  const stepX = dx / steps;
-  const stepY = dy / steps;
-  for (let i = 0; i < steps; i++) {
-    const aX = Math.round(startGrid.x + i * stepX);
-    const aY = Math.round(startGrid.y + i * stepY);
-    const bX = Math.round(startGrid.x + (i + 1) * stepX);
-    const bY = Math.round(startGrid.y + (i + 1) * stepY);
-    segments.push({
-      a: { x: aX, y: aY },
-      b: { x: bX, y: bY }
-    });
-  }
-  return segments;
-}
-function getHiddenEdgesForPolygon(piece, polyIndex, allPiecesInSector, getBlueprint, getPrimitive) {
-  let blueprint;
-  try {
-    blueprint = getBlueprint(piece.blueprintId);
-  } catch (error) {
-    console.warn("getBlueprint failed in getHiddenEdgesForPolygon:", error);
-    return [];
-  }
-  if (!blueprint?.shape) {
-    return [];
-  }
-  const poly = blueprint.shape[polyIndex];
-  if (!poly) return [];
-  const gridSize = CONFIG.layout.grid.stepPx;
-  const bb = boundsOfBlueprint(blueprint, getPrimitive);
-  const ox = piece.pos.x - bb.min.x;
-  const oy = piece.pos.y - bb.min.y;
-  const translatedPoly = poly.map((vertex) => ({
-    x: vertex.x + ox,
-    y: vertex.y + oy
-  }));
-  const hiddenEdges = [];
-  for (let i = 0; i < translatedPoly.length; i++) {
-    const current = translatedPoly[i];
-    const next = translatedPoly[(i + 1) % translatedPoly.length];
-    if (!current || !next) {
-      hiddenEdges.push(false);
-      continue;
-    }
-    const edgeSegments = edgeToUnitSegments$1(current, next, gridSize);
-    let isTouching = false;
-    if (piece.blueprintId.startsWith("comp:")) {
-      for (let otherPolyIndex = 0; otherPolyIndex < blueprint.shape.length; otherPolyIndex++) {
-        if (otherPolyIndex === polyIndex) continue;
-        const otherPoly = blueprint.shape[otherPolyIndex];
-        if (!otherPoly) continue;
-        const otherTranslatedPoly = otherPoly.map((vertex) => ({
-          x: vertex.x + ox,
-          y: vertex.y + oy
-        }));
-        for (let j = 0; j < otherTranslatedPoly.length; j++) {
-          const otherCurrent = otherTranslatedPoly[j];
-          const otherNext = otherTranslatedPoly[(j + 1) % otherTranslatedPoly.length];
-          if (!otherCurrent || !otherNext) continue;
-          const otherEdgeSegments = edgeToUnitSegments$1(otherCurrent, otherNext, gridSize);
-          for (const edgeSeg of edgeSegments) {
-            const isShared = otherEdgeSegments.some(
-              (otherSeg) => (
-                // Check if segments share the same endpoints (identical or reversed)
-                edgeSeg.a.x === otherSeg.a.x && edgeSeg.a.y === otherSeg.a.y && edgeSeg.b.x === otherSeg.b.x && edgeSeg.b.y === otherSeg.b.y || edgeSeg.a.x === otherSeg.b.x && edgeSeg.a.y === otherSeg.b.y && edgeSeg.b.x === otherSeg.a.x && edgeSeg.b.y === otherSeg.a.y
-              )
-            );
-            if (isShared) {
-              isTouching = true;
-              break;
-            }
-          }
-          if (isTouching) break;
-        }
-        if (isTouching) break;
-      }
-    }
-    if (!isTouching && CONFIG.game.hideTouchingBorders) {
-      for (const otherPiece of allPiecesInSector) {
-        if (otherPiece.id === piece.id) continue;
-        const otherBlueprint = getBlueprint(otherPiece.blueprintId);
-        if (!otherBlueprint?.shape) continue;
-        const otherBb = boundsOfBlueprint(otherBlueprint, getPrimitive);
-        const otherOx = otherPiece.pos.x - otherBb.min.x;
-        const otherOy = otherPiece.pos.y - otherBb.min.y;
-        for (const otherPoly of otherBlueprint.shape) {
-          const otherTranslatedPoly = otherPoly.map((vertex) => ({
-            x: vertex.x + otherOx,
-            y: vertex.y + otherOy
-          }));
-          for (let j = 0; j < otherTranslatedPoly.length; j++) {
-            const otherCurrent = otherTranslatedPoly[j];
-            const otherNext = otherTranslatedPoly[(j + 1) % otherTranslatedPoly.length];
-            if (!otherCurrent || !otherNext) continue;
-            const otherEdgeSegments = edgeToUnitSegments$1(otherCurrent, otherNext, gridSize);
-            for (const edgeSeg of edgeSegments) {
-              const isShared = otherEdgeSegments.some(
-                (otherSeg) => (
-                  // Check if segments share the same endpoints (identical or reversed)
-                  edgeSeg.a.x === otherSeg.a.x && edgeSeg.a.y === otherSeg.a.y && edgeSeg.b.x === otherSeg.b.x && edgeSeg.b.y === otherSeg.b.y || edgeSeg.a.x === otherSeg.b.x && edgeSeg.a.y === otherSeg.b.y && edgeSeg.b.x === otherSeg.a.x && edgeSeg.b.y === otherSeg.a.y
-                )
-              );
-              if (isShared) {
-                isTouching = true;
-                break;
-              }
-            }
-            if (isTouching) break;
-          }
-          if (isTouching) break;
-        }
-        if (isTouching) break;
-      }
-    }
-    hiddenEdges.push(isTouching);
-  }
-  return hiddenEdges;
+function shouldShowBorders() {
+  return CONFIG.game.showBorders;
 }
 function shouldUseSelectiveBorders(blueprintId) {
-  return (CONFIG.game.hideTouchingBorders);
+  return CONFIG.game.showBorders;
 }
 
 function pathD(poly) {
@@ -974,11 +838,13 @@ function BoardView(props) {
     placedSilBySector,
     anchorDots,
     pieces,
+    scaleS,
     clickMode,
     draggingId,
     selectedPieceId,
     dragInvalid,
     lockedPieceId,
+    showTangramDecomposition,
     svgRef,
     setPieceRef,
     onPiecePointerDown,
@@ -1044,7 +910,7 @@ function BoardView(props) {
       onPointerDown: (e) => {
         onRootPointerDown(e);
       },
-      style: { background: "#fff", touchAction: "none", userSelect: "none" }
+      style: { background: "#f5f5f5", touchAction: "none", userSelect: "none" }
     },
     layout.sectors.map((s, i) => {
       const done = !!controller.state.sectors[s.id].completedAt;
@@ -1064,11 +930,12 @@ function BoardView(props) {
       const isDragging = draggingId === p.id;
       const locked = p.sectorId && controller.isSectorCompleted(p.sectorId);
       const isConnectivityLocked = lockedPieceId === p.id;
-      const isSelected = selectedPieceId === p.id;
+      selectedPieceId === p.id;
       const isCarriedInvalid = isDragging && dragInvalid;
       const translateX = p.x - bb.min.x;
       const translateY = p.y - bb.min.y;
       return /* @__PURE__ */ React.createElement("g", { key: p.id, ref: setPieceRef(p.id), transform: `translate(${translateX}, ${translateY})`, style: { cursor: locked ? "default" : clickMode ? "pointer" : "grab" }, pointerEvents: clickMode && isDragging ? "none" : "auto" }, ("shape" in bp ? bp.shape : []).map((poly, idx) => {
+        const showBorders = shouldShowBorders();
         shouldUseSelectiveBorders(p.blueprintId);
         return /* @__PURE__ */ React.createElement(React.Fragment, { key: idx }, /* @__PURE__ */ React.createElement(
           "path",
@@ -1079,51 +946,38 @@ function BoardView(props) {
             stroke: "none",
             onPointerDown: (e) => onPiecePointerDown(e, p)
           }
-        ), ((
-          // For pieces with selective borders: render individual edge strokes with edge detection
-          (() => {
-            const allPiecesInSector = pieces.filter((piece) => piece.sectorId === p.sectorId);
-            const pieceAsPiece = { ...p, pos: { x: p.x, y: p.y } };
-            const allPiecesAsPieces = allPiecesInSector.map((piece) => ({ ...piece, pos: { x: piece.x, y: piece.y } }));
-            const hiddenEdges = getHiddenEdgesForPolygon(pieceAsPiece, idx, allPiecesAsPieces, (id) => controller.getBlueprint(id), (kind) => controller.getPrimitive(kind));
-            const draggedPiece = draggingId ? allPiecesInSector.find((piece) => piece.id === draggingId) : null;
-            let wasTouchingDraggedPiece;
-            if (p.blueprintId.startsWith("comp:")) {
-              const internalHiddenEdges = getHiddenEdgesForPolygon(pieceAsPiece, idx, [], (id) => controller.getBlueprint(id), (kind) => controller.getPrimitive(kind));
-              const externalHiddenEdges = draggedPiece ? getHiddenEdgesForPolygon(pieceAsPiece, idx, [{ ...draggedPiece, pos: { x: draggedPiece.x, y: draggedPiece.y } }], (id) => controller.getBlueprint(id), (kind) => controller.getPrimitive(kind)) : new Array(hiddenEdges.length).fill(false);
-              wasTouchingDraggedPiece = externalHiddenEdges.map((external, i) => external && !internalHiddenEdges[i]);
-            } else {
-              wasTouchingDraggedPiece = draggedPiece ? getHiddenEdgesForPolygon(pieceAsPiece, idx, [{ ...draggedPiece, pos: { x: draggedPiece.x, y: draggedPiece.y } }], (id) => controller.getBlueprint(id), (kind) => controller.getPrimitive(kind)) : new Array(hiddenEdges.length).fill(false);
-            }
-            return generateEdgeStrokePaths(poly).map((strokePath, strokeIdx) => {
-              const wasHiddenDueToDraggedPiece = wasTouchingDraggedPiece[strokeIdx] || false;
-              let isHidden;
-              if (isDragging && p.blueprintId.startsWith("comp:")) {
-                const internalHiddenEdges = getHiddenEdgesForPolygon(pieceAsPiece, idx, [], (id) => controller.getBlueprint(id), (kind) => controller.getPrimitive(kind));
-                isHidden = internalHiddenEdges[strokeIdx] || false;
-              } else {
-                isHidden = isDragging ? false : (hiddenEdges[strokeIdx] || false) && !wasHiddenDueToDraggedPiece;
-              }
-              return /* @__PURE__ */ React.createElement(
-                "path",
-                {
-                  key: `stroke-${idx}-${strokeIdx}`,
-                  d: strokePath,
-                  fill: "none",
-                  stroke: isHidden ? "none" : isConnectivityLocked ? CONFIG.color.piece.invalidStroke : isCarriedInvalid ? CONFIG.color.piece.invalidStroke : isSelected || isDragging ? CONFIG.color.piece.selectedStroke : CONFIG.color.piece.borderStroke,
-                  strokeWidth: isHidden ? 0 : isSelected || isDragging ? CONFIG.size.stroke.pieceSelectedPx : CONFIG.size.stroke.pieceBorderPx,
-                  onPointerDown: (e) => onPiecePointerDown(e, p)
-                }
-              );
-            });
-          })()
-        ) ));
+        ), showBorders);
       }));
     }),
     layout.sectors.map((s) => {
-      const placedPolys = placedSilBySector.get(s.id) ?? [];
-      if (!placedPolys.length) return null;
-      return /* @__PURE__ */ React.createElement("g", { key: `sil-${s.id}`, pointerEvents: "none" }, placedPolys.map((poly, i) => /* @__PURE__ */ React.createElement("path", { key: i, d: pathD(poly), fill: CONFIG.color.silhouetteMask, opacity: CONFIG.opacity.silhouetteMask })));
+      const sectorCfg = controller.state.cfg.sectors.find((ss) => ss.id === s.id);
+      if (showTangramDecomposition && sectorCfg?.silhouette.primitiveDecomposition) {
+        const primitiveDecomposition = sectorCfg.silhouette.primitiveDecomposition;
+        const rect = rectForBand(layout, s, "silhouette", 1);
+        const rawPolys = primitiveDecomposition.map((primInfo) => primInfo.polygon);
+        const placedPolys = placeSilhouetteGridAlignedAsPolys(rawPolys, scaleS, { cx: rect.cx, cy: rect.cy });
+        return /* @__PURE__ */ React.createElement("g", { key: `sil-decomposed-${s.id}`, 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 = placedSilBySector.get(s.id) ?? [];
+        if (!placedPolys.length) return null;
+        return /* @__PURE__ */ React.createElement("g", { key: `sil-${s.id}`, pointerEvents: "none" }, placedPolys.map((poly, i) => /* @__PURE__ */ React.createElement("path", { key: i, d: pathD(poly), fill: CONFIG.color.silhouetteMask, opacity: CONFIG.opacity.silhouetteMask })));
+      }
     }),
     anchorDots.map(({ sectorId, valid, invalid }) => {
       const isInnerRing = sectorId === "inner-ring";
@@ -2585,7 +2439,7 @@ function useClickController(controller, layout, pieces, clickMode, draggingId, s
 }
 
 class InteractionTracker {
-  constructor(controller, callbacks, trialId, gameId) {
+  constructor(controller, callbacks, trialParams) {
     this.gridStep = CONFIG.layout.grid.stepPx;
     // Interaction state
     this.interactionIndex = 0;
@@ -2602,8 +2456,7 @@ class InteractionTracker {
     this.createdMacros = [];
     this.controller = controller;
     this.callbacks = callbacks;
-    this.trialId = trialId || v4();
-    this.gameId = gameId || v4();
+    this.trialParams = trialParams;
     this.trialStartTime = Date.now();
     this.controller.setTrackingCallbacks({
       onSectorCompleted: (sectorId) => this.recordSectorCompletion(sectorId)
@@ -2651,8 +2504,6 @@ class InteractionTracker {
     const event = {
       // Metadata
       interactionId: v4(),
-      trialId: this.trialId,
-      gameId: this.gameId,
       interactionIndex: this.interactionIndex++,
       // Interaction type
       interactionType,
@@ -2769,13 +2620,10 @@ class InteractionTracker {
       }));
       const data = {
         trialType: "construction",
-        trialId: this.trialId,
-        gameId: this.gameId,
-        trialNum: 0,
-        // TODO: Plugin should provide this
         trialStartTime: this.trialStartTime,
         trialEndTime,
         totalDuration,
+        trialParams: this.trialParams,
         endReason,
         completionTimes: this.completionTimes,
         finalBlueprintState,
@@ -2794,13 +2642,10 @@ class InteractionTracker {
       }));
       const data = {
         trialType: "prep",
-        trialId: this.trialId,
-        gameId: this.gameId,
-        trialNum: 0,
-        // TODO: Plugin should provide this
         trialStartTime: this.trialStartTime,
         trialEndTime,
         totalDuration,
+        trialParams: this.trialParams,
         endReason: "submit",
         createdMacros: finalMacros,
         quickstashMacros,
@@ -3058,6 +2903,9 @@ function GameBoard(props) {
     maxQuickstashSlots,
     maxCompositeSize,
     mode,
+    showTangramDecomposition,
+    instructions,
+    trialParams,
     width: _width,
     height: _height,
     onSectorComplete,
@@ -3067,6 +2915,7 @@ function GameBoard(props) {
     onTrialEnd,
     onControllerReady
   } = props;
+  const [timeRemaining, setTimeRemaining] = React.useState(timeLimitMs > 0 ? Math.floor(timeLimitMs / 1e3) : 0);
   const controller = React.useMemo(() => {
     const gameConfig = {
       n: sectors.length,
@@ -3093,8 +2942,8 @@ function GameBoard(props) {
     const callbacks = {};
     if (onInteraction) callbacks.onInteraction = onInteraction;
     if (onTrialEnd) callbacks.onTrialEnd = onTrialEnd;
-    return new InteractionTracker(controller, callbacks);
-  }, [controller, onInteraction, onTrialEnd]);
+    return new InteractionTracker(controller, callbacks, trialParams);
+  }, [controller, onInteraction, onTrialEnd, trialParams]);
   React.useEffect(() => {
     if (onControllerReady) {
       onControllerReady(controller);
@@ -3174,22 +3023,22 @@ function GameBoard(props) {
   }), [handleSectorComplete, onPiecePlace, onPieceRemove]);
   const getGameboardStyle = () => {
     const baseStyle = {
-      margin: "0 auto",
+      margin: "10px",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       position: "relative"
     };
     if (layoutMode === "circle") {
-      const size = Math.min(window.innerWidth * 0.96, window.innerHeight * 0.96);
+      const size = Math.min(window.innerWidth * CONFIG.layout.viewportScale, window.innerHeight * CONFIG.layout.viewportScale);
       return {
         ...baseStyle,
         width: `${size}px`,
         height: `${size}px`
       };
     } else {
-      const maxWidth = Math.min(window.innerWidth * 0.96, window.innerHeight * 0.96 * 2);
-      const maxHeight = Math.min(window.innerWidth * 0.96 / 2, window.innerHeight * 0.96);
+      const maxWidth = Math.min(window.innerWidth * CONFIG.layout.viewportScale, window.innerHeight * CONFIG.layout.viewportScale * 2);
+      const maxHeight = Math.min(window.innerWidth * CONFIG.layout.viewportScale / 2, window.innerHeight * CONFIG.layout.viewportScale);
       return {
         ...baseStyle,
         width: `${maxWidth}px`,
@@ -3358,7 +3207,68 @@ function GameBoard(props) {
     force();
     e.stopPropagation();
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "tangram-gameboard", style: getGameboardStyle() }, /* @__PURE__ */ React.createElement(
+  React.useEffect(() => {
+    if (timeLimitMs === 0) return;
+    const interval = setInterval(() => {
+      setTimeRemaining((prev) => {
+        if (prev <= 1) {
+          clearInterval(interval);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [timeLimitMs]);
+  const formatTime = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+  };
+  const containerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%"
+    // minHeight: '100vh'
+  };
+  const headerStyle = {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "20px",
+    background: "#f5f5f5",
+    flex: "0 0 auto"
+  };
+  const instructionsStyle = {
+    flexGrow: 1,
+    fontSize: "20px",
+    lineHeight: 1.5,
+    marginRight: "20px"
+  };
+  const timerStyle = {
+    fontSize: "24px",
+    fontWeight: "bold",
+    fontFamily: "monospace",
+    color: "#333",
+    minWidth: "80px",
+    textAlign: "right"
+  };
+  const gameboardWrapperStyle = {
+    flex: "1 1 auto",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "tangram-trial-container", style: containerStyle }, (instructions || timeLimitMs > 0) && /* @__PURE__ */ React.createElement("div", { className: "tangram-header", style: headerStyle }, instructions && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "tangram-instructions",
+      style: instructionsStyle,
+      dangerouslySetInnerHTML: { __html: instructions }
+    }
+  ), timeLimitMs > 0 && /* @__PURE__ */ React.createElement("div", { className: "tangram-timer", style: timerStyle }, formatTime(timeRemaining))), /* @__PURE__ */ React.createElement("div", { className: "tangram-gameboard-wrapper", style: gameboardWrapperStyle }, /* @__PURE__ */ React.createElement("div", { className: "tangram-gameboard", style: getGameboardStyle() }, /* @__PURE__ */ React.createElement(
     BoardView,
     {
       controller,
@@ -3384,9 +3294,11 @@ function GameBoard(props) {
       onPointerMove,
       onPointerUp,
       onCenterBadgePointerDown,
+      showTangramDecomposition: showTangramDecomposition ?? false,
+      scaleS,
       ...eventCallbacks
     }
-  ));
+  ))));
 }
 
 const U = 40;
@@ -3554,17 +3466,22 @@ function startConstructionTrial(display_element, params, _jsPsych) {
       const isCanonical = CANON.has(tanName);
       return isCanonical;
     });
-    const mask = filteredTans.map((tan, tanIndex) => {
+    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 sectorId = `sector${index}`;
     const sector = {
       id: sectorId,
       tangramId: tangramSpec.tangramID,
       silhouette: {
         id: sectorId,
-        mask
+        mask,
+        primitiveDecomposition
       }
     };
     return sector;
@@ -3583,6 +3500,7 @@ function startConstructionTrial(display_element, params, _jsPsych) {
       quickstash = params.quickstash_macros;
     }
   }
+  const { onInteraction, onTrialEnd, ...trialParams } = params;
   const gameBoardProps = {
     sectors,
     quickstash,
@@ -3593,6 +3511,9 @@ function startConstructionTrial(display_element, params, _jsPsych) {
     timeLimitMs: params.time_limit_ms,
     maxQuickstashSlots: CONFIG.layout.defaults.maxQuickstashSlots,
     mode: "construction",
+    showTangramDecomposition: params.show_tangram_decomposition ?? false,
+    trialParams,
+    ...params.instructions && { instructions: params.instructions },
     ...params.onInteraction && { onInteraction: params.onInteraction },
     ...params.onTrialEnd && { onTrialEnd: params.onTrialEnd }
   };
@@ -3656,6 +3577,18 @@ const info$1 = {
       default: 18,
       description: "Snap radius for anchor-based piece placement"
     },
+    /** Whether to show tangram target shapes decomposed into individual primitives with borders */
+    show_tangram_decomposition: {
+      type: ParameterType.BOOL,
+      default: false,
+      description: "Whether to show tangram target shapes decomposed into individual primitives with borders"
+    },
+    /** HTML content to display above the gameboard as instructions */
+    instructions: {
+      type: ParameterType.STRING,
+      default: "",
+      description: "HTML content to display above the gameboard as instructions"
+    },
     /** Callback fired after each interaction (piece pickup + placedown) */
     onInteraction: {
       type: ParameterType.FUNCTION,
@@ -3729,6 +3662,8 @@ class TangramConstructPlugin {
       input: trial.input,
       layout: trial.layout,
       time_limit_ms: trial.time_limit_ms,
+      show_tangram_decomposition: trial.show_tangram_decomposition,
+      instructions: trial.instructions,
       onInteraction: trial.onInteraction,
       onTrialEnd: wrappedOnTrialEnd
     };
@@ -3750,8 +3685,9 @@ function startPrepTrial(display_element, params, jsPsych) {
     onInteraction,
     onTrialEnd
   } = params;
+  const { onInteraction: _, onTrialEnd: __, ...trialParams } = params;
   const PRIMITIVE_BLUEPRINTS_ORDERED = [...PRIMITIVE_BLUEPRINTS].sort((a, b) => primitiveOrder.indexOf(a.kind) - primitiveOrder.indexOf(b.kind));
-  const prepSectors = Array.from({ length: numQuickstashSlots }, (_, i) => ({
+  const prepSectors = Array.from({ length: numQuickstashSlots }, (_2, i) => ({
     id: `prep-sector-${i}`,
     tangramId: `prep-sector-${i}`,
     // dummy value since prep mode doesn't have tangrams
@@ -3835,6 +3771,8 @@ function startPrepTrial(display_element, params, jsPsych) {
     // Enable prep-specific behavior
     minPiecesPerMacro,
     requireAllSlots,
+    trialParams,
+    ...params.instructions && { instructions: params.instructions },
     onControllerReady: handleControllerReady,
     ...onInteraction && { onInteraction },
     ...onTrialEnd && { onTrialEnd }
@@ -3888,6 +3826,12 @@ const info = {
       default: ["square", "smalltriangle", "parallelogram", "medtriangle", "largetriangle"],
       description: "Array of primitive names in the order they should be displayed"
     },
+    /** HTML content to display above the gameboard as instructions */
+    instructions: {
+      type: ParameterType.STRING,
+      default: void 0,
+      description: "HTML content to display above the gameboard as instructions"
+    },
     /** Callback fired after each interaction (optional analytics hook) */
     onInteraction: {
       type: ParameterType.FUNCTION,
@@ -3939,6 +3883,7 @@ class TangramPrepPlugin {
       requireAllSlots: trial.require_all_slots,
       quickstashMacros: trial.quickstash_macros,
       primitiveOrder: trial.primitive_order,
+      instructions: trial.instructions,
       onInteraction: trial.onInteraction,
       onTrialEnd: wrappedOnTrialEnd
     };