jspsych-tangram 0.0.11 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jspsych-tangram",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "Tangram tasks for jsPsych: prep and construct.",
   "type": "module",
   "main": "dist/index.cjs",

package/src/core/components/board/BoardView.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Poly, TanKind, Blueprint, PrimitiveBlueprint } from "@/core/domain/types";
 import { wedgePath, rectForBand, type CircleLayout } from "@/core/domain/layout";
-import { boundsOfBlueprint, placeSilhouetteGridAlignedAsPolys } from "@/core/engine/geometry";
+import { boundsOfBlueprint, placeSilhouetteGridAlignedAsPolys, polysAABB } from "@/core/engine/geometry";
 import { CONFIG } from "@/core/config/config";
 import { generateEdgeStrokePaths, shouldUseSelectiveBorders, shouldShowBorders, getHiddenEdgesForPolygon } from "@/core/engine/validation/border-rendering";
 
@@ -34,6 +34,9 @@ export type BoardViewProps = {
   dragInvalid: boolean;
   lockedPieceId: string | null;
   showTangramDecomposition?: boolean;  // whether to show tangram decomposed into primitives
+  usePrimitiveColorsBlueprints?: boolean;  // whether to use distinct colors for blueprints in dock
+  usePrimitiveColorsTargets?: boolean;  // whether to use distinct colors for target tangrams
+  primitiveColorIndices?: number[];  // array of 5 integers mapping primitives to color indices
 
   // refs + handlers wired by the container
   svgRef: React.RefObject<SVGSVGElement>;
@@ -57,124 +60,138 @@ function pathD(poly: Poly) {
   return `M ${poly.map((pt) => `${pt.x} ${pt.y}`).join(" L ")} Z`;
 }
 
+/**
+ * Get the fill color for a piece or blueprint based on its type
+ *
+ * REQUIRES: blueprint is valid, primitiveColorIndices is an array of 5 valid indices
+ * EFFECTS: Returns color based on primitive type if usePrimitiveColors is true,
+ *          otherwise returns the default color. Composites always use default color.
+ */
+function getPieceColor(
+  blueprint: Blueprint,
+  usePrimitiveColors: boolean,
+  defaultColor: string,
+  primitiveColorIndices: number[]
+): string {
+  if (!usePrimitiveColors) {
+    return defaultColor;
+  }
+
+  // For primitive blueprints, use the mapped color from CONFIG
+  if ('kind' in blueprint) {
+    const kind = blueprint.kind as TanKind;
+    // Map primitive kind to index: square=0, smalltriangle=1, parallelogram=2, medtriangle=3, largetriangle=4
+    const kindToIndex: Record<TanKind, number> = {
+      'square': 0,
+      'smalltriangle': 1,
+      'parallelogram': 2,
+      'medtriangle': 3,
+      'largetriangle': 4
+    };
+    const primitiveIndex = kindToIndex[kind];
+    if (primitiveIndex !== undefined && primitiveColorIndices[primitiveIndex] !== undefined) {
+      const colorIndex = primitiveColorIndices[primitiveIndex];
+      const color = CONFIG.color.primitiveColors[colorIndex];
+      if (color) {
+        return color;
+      }
+    }
+    return defaultColor;
+  }
+
+  // For composite blueprints, always use the default color
+  return defaultColor;
+}
+
 export default function BoardView(props: BoardViewProps) {
   const {
     controller, layout, viewBox, width, height,
     badgeR, badgeCenter,
     placedSilBySector, anchorDots, pieces, scaleS,
     clickMode, draggingId, selectedPieceId, dragInvalid, lockedPieceId, showTangramDecomposition,
+    usePrimitiveColorsBlueprints, usePrimitiveColorsTargets, primitiveColorIndices,
     svgRef, setPieceRef,
     onPiecePointerDown, onBlueprintPointerDown, onRootPointerDown, onPointerMove, onPointerUp, onCenterBadgePointerDown,
   } = props;
 
   const VW = viewBox.w, VH = viewBox.h;
 
-  // blueprint ring geometry
-  const centerView = controller.state.blueprintView;
-  const bps: Blueprint[] =
-    centerView === "primitives"
-      ? (controller.state.primitives as PrimitiveBlueprint[])
-      : (controller.state.quickstash as Blueprint[]);
-
-  const QS_SLOTS   = controller.state.cfg.maxQuickstashSlots;
-  const PRIM_SLOTS = controller.state.primitives.length;
-  const slotsForView = centerView === "primitives" ? Math.max(1, PRIM_SLOTS) : Math.max(1, QS_SLOTS);
-  const sweep = layout.mode === "circle" ? Math.PI * 2 : Math.PI;
-  const delta = sweep / slotsForView;
-
-  const start = layout.mode === "circle" ? -Math.PI / 2 : Math.PI;
-  const blueprintTheta = (i: number) => start + (i + 0.5) * delta;
-
-  // chord requirement (reuse same logic as container already used for radii)
-  const anchorsDiameterToPx = (anchorsDiag: number, gridPx: number = CONFIG.layout.grid.stepPx) =>
-    anchorsDiag * Math.SQRT2 * gridPx;
-  const reqAnchors = centerView === "primitives"
-    ? CONFIG.layout.constraints.primitiveDiamAnchors
-    : CONFIG.layout.constraints.quickstashDiamAnchors;
-  const D_slot = anchorsDiameterToPx(reqAnchors);
-  const R_needed = D_slot / (2 * Math.max(1e-9, Math.sin(delta / 2)));
-
-  // Minimum radius to avoid overlapping with badge
-  // Badge takes up: badgeR + margin, plus we need half the slot diameter for clearance
-  const R_min = badgeR + CONFIG.size.centerBadge.marginPx + D_slot / 2;
-  const ringMax = layout.innerR - (badgeR + CONFIG.size.centerBadge.marginPx);
-
-  // Clamp to [R_min, ringMax]
-  const blueprintRingR = Math.min(Math.max(R_needed, R_min), ringMax);
-
-  const renderBlueprintGlyph = (bp: Blueprint, bx: number, by: number) => {
-    const bb = boundsOfBlueprint(bp, (k: string) => controller.getPrimitive(k as TanKind)!);
-    const cx = bb.min.x + bb.width / 2;
-    const cy = bb.min.y + bb.height / 2;
-    const selected = false; // container highlights via pending state; optional
-
-    return (
-      <g
-        key={bp.id}
-        transform={`translate(${bx}, ${by}) scale(1) translate(${-cx}, ${-cy})`}
-      >
-        {("shape" in bp ? bp.shape : []).map((poly, idx) => (
-          <path
-            key={idx}
-            d={pathD(poly)}
-            fill={CONFIG.color.blueprint.fill}
-            opacity={CONFIG.opacity.blueprint}
-            stroke={selected ? CONFIG.color.blueprint.selectedStroke : "none"}
-            strokeWidth={selected ? 2 : 0}
-            pointerEvents="visiblePainted"
-            style={{ cursor: "pointer" }}
-            onPointerDown={(e) => onBlueprintPointerDown(e as any, bp, { bx, by, cx, cy })}
-          />
-        ))}
-      </g>
-    );
-  };
-
-  return (
-    <svg
-      ref={svgRef}
-      width={width}
-      height={height}
-      viewBox={`0 0 ${VW} ${VH}`}
-      preserveAspectRatio="xMidYMid meet"
-      onPointerMove={onPointerMove}
-      onPointerUp={onPointerUp}
-      onPointerDown={(e) => {
-        onRootPointerDown(e);
-      }}
-      style={{ background: "#f5f5f5", touchAction: "none", userSelect: "none" }}
-    >
-      {/* bands as wedges */}
-      {layout.sectors.map((s, i) => {
-        const done = !!controller.state.sectors[s.id].completedAt;
-        const baseSil = i % 2 ? CONFIG.color.bands.silhouette.fillOdd : CONFIG.color.bands.silhouette.fillEven;
-        const baseWork = i % 2 ? CONFIG.color.bands.workspace.fillOdd : CONFIG.color.bands.workspace.fillEven;
-        const sil = layout.bands.silhouette;
-        const work = layout.bands.workspace;
-        return (
-          <g key={`bands-${s.id}`}>
-            {controller.state.cfg.target === "workspace" ? (
-              <>
-                <path d={wedgePath(layout.cx, layout.cy, sil[0], sil[1], s.start, s.end)} fill={baseSil} stroke={CONFIG.color.bands.silhouette.stroke} strokeWidth={CONFIG.size.stroke.bandPx} pointerEvents="none" />
-                <path d={wedgePath(layout.cx, layout.cy, work[0], work[1], s.start, s.end)} fill={done ? CONFIG.color.completion.fill : baseWork} stroke={done ? CONFIG.color.completion.stroke : CONFIG.color.bands.workspace.stroke} strokeWidth={CONFIG.size.stroke.bandPx} pointerEvents="none" />
-              </>
-            ) : (
-              <path d={wedgePath(layout.cx, layout.cy, sil[0], sil[1], s.start, s.end)} fill={done ? CONFIG.color.completion.fill : baseSil} stroke={done ? CONFIG.color.completion.stroke : CONFIG.color.bands.silhouette.stroke} strokeWidth={CONFIG.size.stroke.bandPx} pointerEvents="none" />
-            )}
-          </g>
-        );
-      })}
-
-
-      {/* live pieces - MOVED ABOVE SILHOUETTES FOR TESTING */}
-      {pieces
-        .sort((a, b) => {
-          // Sort so that dragged piece is rendered last (on top)
-          if (draggingId === a.id) return 1;
-          if (draggingId === b.id) return -1;
-          return 0;
-        })
-        .map((p) => {
+  // Helper function to render silhouettes
+  const renderSilhouettes = () => layout.sectors.map((s) => {
+    const sectorCfg = controller.state.cfg.sectors.find((ss: any) => ss.id === s.id);
+
+    // Check if we should render decomposed primitives
+    if (showTangramDecomposition && sectorCfg?.silhouette.primitiveDecomposition) {
+      const primitiveDecomposition = sectorCfg.silhouette.primitiveDecomposition;
+
+      // Use same positioning logic as unified silhouette
+      const rect = rectForBand(layout, s, "silhouette", 1.0);
+      const rawPolys = primitiveDecomposition.map((primInfo: any) => primInfo.polygon);
+      const placedPolys = placeSilhouetteGridAlignedAsPolys(rawPolys, scaleS, { cx: rect.cx, cy: rect.cy });
+
+      return (
+        <g key={`sil-decomposed-${s.id}`} pointerEvents="none">
+          {placedPolys.map((scaledPoly, i) => {
+            // Get color for this primitive based on its kind
+            const primInfo = primitiveDecomposition[i];
+            let fillColor = CONFIG.color.silhouetteMask;
+
+            if (usePrimitiveColorsTargets && primInfo?.kind && primitiveColorIndices) {
+              // Map primitive kind to index
+              const kindToIndex: Record<TanKind, number> = {
+                'square': 0,
+                'smalltriangle': 1,
+                'parallelogram': 2,
+                'medtriangle': 3,
+                'largetriangle': 4
+              };
+              const primitiveIndex = kindToIndex[primInfo.kind as TanKind];
+              if (primitiveIndex !== undefined && primitiveColorIndices[primitiveIndex] !== undefined) {
+                const colorIndex = primitiveColorIndices[primitiveIndex];
+                const color = CONFIG.color.primitiveColors[colorIndex];
+                if (color) {
+                  fillColor = color;
+                }
+              }
+            }
+
+            return (
+              <path
+                key={`prim-fill-${i}`}
+                d={pathD(scaledPoly)}
+                fill={fillColor}
+                opacity={CONFIG.opacity.silhouetteMask}
+                stroke="none"
+              />
+            );
+          })}
+        </g>
+      );
+    } else {
+      // Default: render unified silhouette
+      const placedPolys = placedSilBySector.get(s.id) ?? [];
+      if (!placedPolys.length) return null;
+      return (
+        <g key={`sil-${s.id}`} pointerEvents="none">
+          {placedPolys.map((poly, i) => (
+            <path key={i} d={pathD(poly)} fill={CONFIG.color.silhouetteMask} opacity={CONFIG.opacity.silhouetteMask} />
+          ))}
+        </g>
+      );
+    }
+  });
+
+  // Helper function to render pieces (with optional filter)
+  const renderPieces = (piecesFilter?: (p: PieceView) => boolean) => {
+    const piecesToRender = piecesFilter ? pieces.filter(piecesFilter) : pieces;
+    return piecesToRender
+      .sort((a, b) => {
+        // Sort so that dragged piece is rendered last (on top)
+        if (draggingId === a.id) return 1;
+        if (draggingId === b.id) return -1;
+        return 0;
+      })
+      .map((p) => {
         const bp = controller.getBlueprint(p.blueprintId)!;
         const bb = boundsOfBlueprint(bp, (k: string) => controller.getPrimitive(k as TanKind)!);
         const isDragging = draggingId === p.id;
@@ -184,6 +201,20 @@ export default function BoardView(props: BoardViewProps) {
         const isCarriedInvalid = isDragging && dragInvalid;
         const translateX = p.x - bb.min.x;
         const translateY = p.y - bb.min.y;
+
+        const validFillColor = getPieceColor(
+          bp,
+          usePrimitiveColorsBlueprints || false,
+          CONFIG.color.piece.validFill,
+          primitiveColorIndices || [0, 1, 2, 3, 4]
+        );
+        const draggingFillColor = getPieceColor(
+          bp,
+          usePrimitiveColorsBlueprints || false,
+          CONFIG.color.piece.draggingFill,
+          primitiveColorIndices || [0, 1, 2, 3, 4]
+        );
+
         return (
           <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: any, idx: number) => {
@@ -194,7 +225,7 @@ export default function BoardView(props: BoardViewProps) {
                   {/* Fill path - always rendered with no borders */}
                   <path
                     d={pathD(poly)}
-                    fill={isConnectivityLocked ? CONFIG.color.piece.invalidFill : (isCarriedInvalid ? CONFIG.color.piece.invalidFill : (isDragging ? CONFIG.color.piece.draggingFill : CONFIG.color.piece.validFill))}
+                    fill={isConnectivityLocked ? CONFIG.color.piece.invalidFill : (isCarriedInvalid ? CONFIG.color.piece.invalidFill : (isDragging ? draggingFillColor : validFillColor))}
                     opacity={isConnectivityLocked ? CONFIG.opacity.piece.invalid : (isCarriedInvalid ? CONFIG.opacity.piece.invalid : (isDragging ? CONFIG.opacity.piece.dragging : (locked ? CONFIG.opacity.piece.locked : CONFIG.opacity.piece.normal)))}
                     stroke="none"
                     onPointerDown={(e) => onPiecePointerDown(e, p)}
@@ -272,11 +303,188 @@ export default function BoardView(props: BoardViewProps) {
                 </React.Fragment>
               );
             })}
+
+            {/* Invalid marker 'X' - shown at piece center when dragging invalid piece */}
+            {isDragging && isCarriedInvalid && "shape" in bp && bp.shape.length > 0 && (() => {
+              const { cx, cy } = polysAABB(bp.shape);
+              const size = CONFIG.size.invalidMarker.sizePx;
+              const strokeWidth = CONFIG.size.invalidMarker.strokePx;
+              const borderWidth = strokeWidth + 2;
+
+              return (
+                <g key="invalid-marker">
+                  {/* White border for first line */}
+                  <line
+                    x1={cx - size}
+                    y1={cy - size}
+                    x2={cx + size}
+                    y2={cy + size}
+                    stroke="white"
+                    strokeWidth={borderWidth}
+                    strokeLinecap="round"
+                  />
+                  {/* Red interior for first line */}
+                  <line
+                    x1={cx - size}
+                    y1={cy - size}
+                    x2={cx + size}
+                    y2={cy + size}
+                    stroke={CONFIG.color.piece.invalidStroke}
+                    strokeWidth={strokeWidth}
+                    strokeLinecap="round"
+                  />
+                  {/* White border for second line */}
+                  <line
+                    x1={cx + size}
+                    y1={cy - size}
+                    x2={cx - size}
+                    y2={cy + size}
+                    stroke="white"
+                    strokeWidth={borderWidth}
+                    strokeLinecap="round"
+                  />
+                  {/* Red interior for second line */}
+                  <line
+                    x1={cx + size}
+                    y1={cy - size}
+                    x2={cx - size}
+                    y2={cy + size}
+                    stroke={CONFIG.color.piece.invalidStroke}
+                    strokeWidth={strokeWidth}
+                    strokeLinecap="round"
+                  />
+                </g>
+              );
+            })()}
+          </g>
+        );
+      });
+  };
+
+  // blueprint ring geometry
+  const centerView = controller.state.blueprintView;
+  const bps: Blueprint[] =
+    centerView === "primitives"
+      ? (controller.state.primitives as PrimitiveBlueprint[])
+      : (controller.state.quickstash as Blueprint[]);
+
+  const QS_SLOTS   = controller.state.cfg.maxQuickstashSlots;
+  const PRIM_SLOTS = controller.state.primitives.length;
+  const slotsForView = centerView === "primitives" ? Math.max(1, PRIM_SLOTS) : Math.max(1, QS_SLOTS);
+  const sweep = layout.mode === "circle" ? Math.PI * 2 : Math.PI;
+  const delta = sweep / slotsForView;
+
+  const start = layout.mode === "circle" ? -Math.PI / 2 : Math.PI;
+  const blueprintTheta = (i: number) => start + (i + 0.5) * delta;
+
+  // chord requirement (reuse same logic as container already used for radii)
+  const anchorsDiameterToPx = (anchorsDiag: number, gridPx: number = CONFIG.layout.grid.stepPx) =>
+    anchorsDiag * Math.SQRT2 * gridPx;
+  const reqAnchors = centerView === "primitives"
+    ? CONFIG.layout.constraints.primitiveDiamAnchors
+    : CONFIG.layout.constraints.quickstashDiamAnchors;
+  const D_slot = anchorsDiameterToPx(reqAnchors);
+  const R_needed = D_slot / (2 * Math.max(1e-9, Math.sin(delta / 2)));
+
+  // Minimum radius to avoid overlapping with badge
+  // Badge takes up: badgeR + margin, plus we need half the slot diameter for clearance
+  const R_min = badgeR + CONFIG.size.centerBadge.marginPx + D_slot / 2;
+  const ringMax = layout.innerR - (badgeR + CONFIG.size.centerBadge.marginPx);
+
+  // Clamp to [R_min, ringMax]
+  const blueprintRingR = Math.min(Math.max(R_needed, R_min), ringMax);
+
+  const renderBlueprintGlyph = (bp: Blueprint, bx: number, by: number) => {
+    const bb = boundsOfBlueprint(bp, (k: string) => controller.getPrimitive(k as TanKind)!);
+    const cx = bb.min.x + bb.width / 2;
+    const cy = bb.min.y + bb.height / 2;
+    const selected = false; // container highlights via pending state; optional
+
+    const fillColor = getPieceColor(
+      bp,
+      usePrimitiveColorsBlueprints || false,
+      CONFIG.color.blueprint.fill,
+      primitiveColorIndices || [0, 1, 2, 3, 4]
+    );
+
+    return (
+      <g
+        key={bp.id}
+        transform={`translate(${bx}, ${by}) scale(1) translate(${-cx}, ${-cy})`}
+      >
+        {("shape" in bp ? bp.shape : []).map((poly, idx) => (
+          <path
+            key={idx}
+            d={pathD(poly)}
+            fill={fillColor}
+            opacity={CONFIG.opacity.blueprint}
+            stroke={selected ? CONFIG.color.blueprint.selectedStroke : "none"}
+            strokeWidth={selected ? 2 : 0}
+            pointerEvents="visiblePainted"
+            style={{ cursor: "pointer" }}
+            onPointerDown={(e) => onBlueprintPointerDown(e as any, bp, { bx, by, cx, cy })}
+          />
+        ))}
+      </g>
+    );
+  };
+
+  return (
+    <svg
+      ref={svgRef}
+      width={width}
+      height={height}
+      viewBox={`0 0 ${VW} ${VH}`}
+      preserveAspectRatio="xMidYMid meet"
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerDown={(e) => {
+        onRootPointerDown(e);
+      }}
+      style={{ background: CONFIG.color.background, touchAction: "none", userSelect: "none" }}
+    >
+      {/* bands as wedges */}
+      {layout.sectors.map((s, i) => {
+        const done = !!controller.state.sectors[s.id].completedAt;
+        const baseSil = i % 2 ? CONFIG.color.bands.silhouette.fillOdd : CONFIG.color.bands.silhouette.fillEven;
+        const baseWork = i % 2 ? CONFIG.color.bands.workspace.fillOdd : CONFIG.color.bands.workspace.fillEven;
+        const sil = layout.bands.silhouette;
+        const work = layout.bands.workspace;
+        return (
+          <g key={`bands-${s.id}`}>
+            {controller.state.cfg.target === "workspace" ? (
+              <>
+                <path d={wedgePath(layout.cx, layout.cy, sil[0], sil[1], s.start, s.end)} fill={baseSil} stroke={CONFIG.color.bands.silhouette.stroke} strokeWidth={CONFIG.size.stroke.bandPx} pointerEvents="none" />
+                <path d={wedgePath(layout.cx, layout.cy, work[0], work[1], s.start, s.end)} fill={done ? CONFIG.color.completion.fill : baseWork} stroke={done ? CONFIG.color.completion.stroke : CONFIG.color.bands.workspace.stroke} strokeWidth={CONFIG.size.stroke.bandPx} pointerEvents="none" />
+              </>
+            ) : (
+              <path d={wedgePath(layout.cx, layout.cy, sil[0], sil[1], s.start, s.end)} fill={done ? CONFIG.color.completion.fill : baseSil} stroke={done ? CONFIG.color.completion.stroke : CONFIG.color.bands.silhouette.stroke} strokeWidth={CONFIG.size.stroke.bandPx} pointerEvents="none" />
+            )}
           </g>
         );
       })}
 
-      {/* silhouettes (use pre-placed polys) */}
+
+      {/* Conditional rendering based on silhouettesBelowPieces config */}
+      {CONFIG.game.silhouettesBelowPieces ? (
+        <>
+          {/* Render silhouettes first (below all pieces) */}
+          {renderSilhouettes()}
+
+          {/* Then all pieces */}
+          {renderPieces()}
+        </>
+      ) : (
+        <>
+          {/* Render all pieces first */}
+          {renderPieces()}
+
+          {/* Then silhouettes (above all pieces) */}
+          {renderSilhouettes()}
+        </>
+      )}
+
+      {/* silhouettes (use pre-placed polys) - rendered first so pieces appear on top */}
       {layout.sectors.map((s) => {
         const sectorCfg = controller.state.cfg.sectors.find((ss: any) => ss.id === s.id);
 
@@ -291,25 +499,40 @@ export default function BoardView(props: BoardViewProps) {
 
           return (
             <g key={`sil-decomposed-${s.id}`} pointerEvents="none">
-              {placedPolys.map((scaledPoly, i) => (
-                <React.Fragment key={`prim-${i}`}>
-                  {/* Fill path */}
-                  <path
-                    d={pathD(scaledPoly)}
-                    fill={CONFIG.color.silhouetteMask}
-                    opacity={CONFIG.opacity.silhouetteMask}
-                    stroke="none"
-                  />
-
-                  {/* Full perimeter border */}
+              {placedPolys.map((scaledPoly, i) => {
+                // Get color for this primitive based on its kind
+                const primInfo = primitiveDecomposition[i];
+                let fillColor = CONFIG.color.silhouetteMask;
+
+                if (usePrimitiveColorsTargets && primInfo?.kind && primitiveColorIndices) {
+                  // Map primitive kind to index
+                  const kindToIndex: Record<TanKind, number> = {
+                    'square': 0,
+                    'smalltriangle': 1,
+                    'parallelogram': 2,
+                    'medtriangle': 3,
+                    'largetriangle': 4
+                  };
+                  const primitiveIndex = kindToIndex[primInfo.kind as TanKind];
+                  if (primitiveIndex !== undefined && primitiveColorIndices[primitiveIndex] !== undefined) {
+                    const colorIndex = primitiveColorIndices[primitiveIndex];
+                    const color = CONFIG.color.primitiveColors[colorIndex];
+                    if (color) {
+                      fillColor = color;
+                    }
+                  }
+                }
+
+                return (
                   <path
+                    key={`prim-fill-${i}`}
                     d={pathD(scaledPoly)}
                     fill="none"
-                    stroke={CONFIG.color.tangramDecomposition.stroke}
-                    strokeWidth={CONFIG.size.stroke.tangramDecompositionPx}
+                    opacity={0}
+                    stroke="none"
                   />
-                </React.Fragment>
-              ))}
+                );
+              })}
             </g>
           );
         } else {
@@ -429,6 +652,31 @@ export default function BoardView(props: BoardViewProps) {
           </circle>
         </g>
       )}
+
+      {/* tangram decomposition borders - rendered last so they appear on top of pieces */}
+      {showTangramDecomposition && layout.sectors.map((s) => {
+        const sectorCfg = controller.state.cfg.sectors.find((ss: any) => ss.id === s.id);
+        if (!sectorCfg?.silhouette.primitiveDecomposition) return null;
+
+        const primitiveDecomposition = sectorCfg.silhouette.primitiveDecomposition;
+        const rect = rectForBand(layout, s, "silhouette", 1.0);
+        const rawPolys = primitiveDecomposition.map((primInfo: any) => primInfo.polygon);
+        const placedPolys = placeSilhouetteGridAlignedAsPolys(rawPolys, scaleS, { cx: rect.cx, cy: rect.cy });
+
+        return (
+          <g key={`sil-borders-${s.id}`} pointerEvents="none">
+            {placedPolys.map((scaledPoly, i) => (
+              <path
+                key={`prim-border-${i}`}
+                d={pathD(scaledPoly)}
+                fill="none"
+                stroke={CONFIG.color.tangramDecomposition.stroke}
+                strokeWidth={CONFIG.size.stroke.tangramDecompositionPx}
+              />
+            ))}
+          </g>
+        );
+      })}
     </svg>
   );
 }