jspsych-tangram 0.0.1

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "jspsych-tangram",
+  "version": "0.0.1",
+  "description": "Tangram tasks for jsPsych: prep and construct.",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "unpkg": "tangram-prep.min.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./prep": {
+      "types": "./dist/prep/index.d.ts",
+      "import": "./dist/prep/index.js",
+      "require": "./dist/prep/index.cjs"
+    },
+    "./construct": {
+      "types": "./dist/construct/index.d.ts",
+      "import": "./dist/construct/index.js",
+      "require": "./dist/construct/index.cjs"
+    }
+  },
+  "files": [
+    "src",
+    "dist",
+    "tangram-prep.min.js",
+    "tangram-construct.min.js"
+  ],
+  "source": "src/index.ts",
+  "scripts": {
+    "build": "rollup --config",
+    "postbuild": "cp dist/prep/index.browser.min.js tangram-prep.min.js && cp dist/construct/index.browser.min.js tangram-construct.min.js",
+    "build:watch": "npm run build -- --watch",
+    "dev": "vite",
+    "test": "jest",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "check-all": "npm run type-check && npm run lint"
+  },
+  "dependencies": {
+    "@citation-js/core": "^0.7.14",
+    "@citation-js/plugin-bibtex": "^0.7.14",
+    "@citation-js/plugin-cff": "^0.6.1",
+    "@citation-js/plugin-software-formats": "^0.6.1",
+    "jspsych": "^8.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "uuid": "^11.1.0"
+  },
+  "devDependencies": {
+    "@jspsych/config": "^3.2.2",
+    "@jspsych/test-utils": "^1.0.0",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-url": "^8.0.2",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.46.1",
+    "@typescript-eslint/parser": "^8.46.1",
+    "@vitejs/plugin-react": "^4.4.1",
+    "eslint": "^9.35.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-unused-imports": "^4.3.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "typescript": "^5.7.0",
+    "vite": "^6.3.5"
+  }
+}

package/src/core/components/README.md

@@ -0,0 +1,249 @@
+# Core Components - jsPsych Plugin Development
+
+This directory contains the core reusable components for building tangram-based jsPsych plugins. All components follow dependency injection principles with no hardcoded defaults.
+
+## Main Components
+
+### GameBoard
+**File**: `GameBoard.tsx` (180+ lines)  
+**Purpose**: Complete tangram game functionality for plugin reuse  
+**Features**: 
+- Dependency injection for all game content
+- Support for click and drag interaction modes
+- Circle and semicircle layout modes  
+- Comprehensive event tracking for research data
+- Responsive sizing for different display contexts
+
+```typescript
+import { GameBoard } from "@/core/components";
+
+// In jsPsych plugin trial method:
+root.render(React.createElement(GameBoard, {
+  sectors: convertedTangrams,
+  quickstash: convertedMacros,
+  primitives: PRIMITIVE_BLUEPRINTS,
+  layout: "semicircle",
+  target: "silhouette", 
+  input: "drag",
+  onComplete: handleTrialComplete
+}));
+```
+
+### BlueprintRing  
+**File**: `BlueprintRing.tsx` (140+ lines)  
+**Purpose**: Blueprint selection interface with center toggle badge  
+**Features**:
+- Displays primitives and quickstash in circular arrangement
+- Interactive center badge for switching collections
+- Automatic geometry calculation based on content
+- Pure presentation component (no internal state)
+
+```typescript
+import { BlueprintRing } from "@/core/components";
+
+<BlueprintRing
+  primitives={primitiveBlueprints}
+  quickstash={macroBlueprints}
+  currentView="primitives"
+  layout={computedLayout}
+  onBlueprintPointerDown={handleSelection}
+  onCenterBadgePointerDown={handleToggle}
+/>
+```
+
+## Hook System
+
+### Individual Hooks
+**Directory**: `board/`  
+**Purpose**: Granular state management for advanced plugin development
+
+- **usePieceState**: Piece data management and polygon computation
+- **useAnchorGrid**: Grid validation and anchor point calculation  
+- **useDragController**: Complete drag interaction handling (447 lines)
+- **useClickController**: Click-based interaction with selection state
+
+```typescript
+import { 
+  usePieceState, 
+  useAnchorGrid, 
+  useDragController, 
+  useClickController 
+} from "@/core/components";
+
+// Advanced usage - building custom board components
+const pieceState = usePieceState(controller);
+const anchorGrid = useAnchorGrid(controller, layout);
+const dragController = useDragController(
+  controller, layout, pieces, /* ... callbacks */
+);
+```
+
+## Architecture Principles
+
+### Dependency Injection
+All components receive their data and behavior through props:
+- **No hardcoded defaults** - everything must be provided
+- **No global state** - all state managed through props/hooks
+- **No singletons** - components can be instantiated multiple times
+
+### Plugin Integration
+Components are designed specifically for jsPsych plugin development:
+- **JSON interfaces** - Accept data in jsPsych-compatible formats
+- **Event callbacks** - Provide structured data for plugin data collection
+- **Flexible sizing** - Support different display contexts and screen sizes
+- **Clean lifecycle** - Components can be unmounted/remounted cleanly
+
+### State Management
+Uses modern React patterns with functional components:
+- **Hook-based architecture** - All state logic in custom hooks
+- **BaseGameController integration** - Consistent state management
+- **Pure components** - Presentation separated from state logic
+- **Predictable updates** - Clear data flow and update patterns
+
+## Usage Patterns
+
+### Basic Plugin Development
+For most jsPsych plugins, use GameBoard directly:
+
+```typescript
+import { GameBoard } from "@/core/components";
+import { PRIMITIVE_BLUEPRINTS } from "@/core/domain/primitives";
+
+class MyTangramPlugin implements JsPsychPlugin<Info> {
+  trial(display_element: HTMLElement, trial: TrialType<Info>) {
+    const root = createRoot(display_element);
+    root.render(React.createElement(GameBoard, {
+      sectors: trial.tangrams, // Convert from JSON
+      quickstash: trial.macros, // Convert from JSON  
+      primitives: PRIMITIVE_BLUEPRINTS,
+      layout: trial.layout,
+      target: trial.target,
+      input: trial.input,
+      onComplete: (snapshot) => {
+        // Process trial data
+        this.jsPsych.finishTrial(snapshot);
+      }
+    }));
+  }
+}
+```
+
+### Advanced Plugin Development
+For custom functionality, use individual hooks:
+
+```typescript
+import { usePieceState, useDragController } from "@/core/components";
+
+function CustomGameInterface({ controller, layout }) {
+  const pieces = usePieceState(controller);
+  const dragState = useDragController(controller, layout, /* ... */);
+  
+  // Build custom UI using hook state
+  return (
+    <div>
+      {/* Custom rendering using pieces and dragState */}
+    </div>
+  );
+}
+```
+
+### Component Composition
+Combine components for specialized interfaces:
+
+```typescript
+import { BlueprintRing, GameBoard } from "@/core/components";
+
+function PrepPluginInterface() {
+  return (
+    <div>
+      <GameBoard /* construction area */ />
+      <BlueprintRing /* macro creation */ />
+      {/* Additional prep-specific UI */}
+    </div>
+  );
+}
+```
+
+## Data Flow
+
+### Plugin → GameBoard
+1. Plugin receives JSON parameters from jsPsych
+2. Plugin converts JSON to internal types (Sector[], Blueprint[])
+3. Plugin passes converted data to GameBoard via props
+4. GameBoard creates BaseGameController with injected data
+
+### GameBoard → Plugin  
+1. User interactions trigger game events
+2. BaseGameController updates state and logs events
+3. GameBoard calls plugin callbacks (onComplete, onSectorComplete, etc.)
+4. Plugin processes events and calls jsPsych.finishTrial()
+
+### Internal Component Flow
+1. GameBoard creates BaseGameController and computes layout
+2. GameBoard renders Board component with computed state
+3. Board uses hooks for interaction handling (drag/click controllers)
+4. Hook events trigger BaseGameController state updates
+5. State changes cause React re-renders with updated visual state
+
+## Type Safety
+
+All components are fully typed with TypeScript:
+- **Strict interfaces** - All props and state are strongly typed
+- **Generic support** - Components work with plugin-specific data types  
+- **JSDoc documentation** - Comprehensive inline documentation
+- **Export types** - All interfaces available for plugin development
+
+```typescript
+import type { 
+  GameBoardProps, 
+  GameBoardConfig,
+  BlueprintRingProps 
+} from "@/core/components";
+```
+
+## Performance Considerations
+
+### Optimized for Interactive Use
+- **Efficient re-rendering** - Components use React.memo and useMemo appropriately
+- **Event handling** - Pointer events optimized for both mouse and touch
+- **Geometry caching** - Layout calculations cached to prevent redundant computation  
+- **Memory management** - No memory leaks in event handlers or timers
+
+### Scalable Architecture
+- **Large piece counts** - Handles many primitive and macro pieces efficiently
+- **Complex layouts** - Supports both simple and complex sector arrangements
+- **Real-time updates** - Smooth interaction even with complex collision detection
+
+## Testing & Development
+
+### Development Environment
+Use the provided test files for component development:
+- `dev/plugin-test.html` - Test complete plugin functionality
+- `dev/checkpoint-test.html` - Validate component architecture
+
+### Plugin Testing
+Create jsPsych trials to test component integration:
+
+```typescript
+const testTrial = {
+  type: YourTangramPlugin,
+  sectors: mockSectors,
+  quickstash: mockMacros,
+  layout: "circle",
+  target: "workspace",
+  input: "click"
+};
+```
+
+---
+
+## Migration from Legacy Code
+
+If migrating from the original monolithic Board.tsx:
+- Replace Board usage with GameBoard
+- Convert hardcoded data to props
+- Replace RoundController with BaseGameController  
+- Update event handling to use callback props
+- Test thoroughly with both click and drag modes
+
+The components in this directory represent the completed Phase 3-4 refactoring that transformed 838 lines of monolithic code into a clean, reusable plugin architecture.

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

@@ -0,0 +1,352 @@
+import React from "react";
+import type { Poly, TanKind, Blueprint, PrimitiveBlueprint } from "@/core/domain/types";
+import { wedgePath, type CircleLayout } from "@/core/domain/layout";
+import { boundsOfBlueprint } from "@/core/engine/geometry";
+import { CONFIG } from "@/core/config/config";
+import { generateEdgeStrokePaths, shouldUseSelectiveBorders, shouldShowBorders, getHiddenEdgesForPolygon } from "@/core/engine/validation/border-rendering";
+
+export type PieceView = { id: string; blueprintId: string; x: number; y: number; sectorId?: string };
+export type AnchorDots = { sectorId: string; valid: {x:number;y:number}[]; invalid: {x:number;y:number}[] };
+
+export type BoardViewProps = {
+  controller: any; // RoundController (kept loose to avoid circular deps here)
+  layout: CircleLayout;
+  viewBox: { w: number; h: number };
+  width?: number;
+  height?: number;
+
+  // derived visuals/geometry
+  badgeR: number;
+  badgeCenter: { x: number; y: number };
+  placedSilBySector: Map<string, Poly[]>;
+  anchorDots: AnchorDots[];
+  pieces: PieceView[];
+
+  // UI state flags
+  clickMode: boolean;
+  draggingId: string | null;
+  selectedPieceId: string | null;
+  dragInvalid: boolean;
+  lockedPieceId: string | null;
+
+  // refs + handlers wired by the container
+  svgRef: React.RefObject<SVGSVGElement>;
+  setPieceRef: (id: string) => (el: SVGGElement | null) => void;
+  onPiecePointerDown: (
+    e: React.PointerEvent<SVGPathElement | SVGGElement>,
+    p: PieceView
+  ) => void;
+  onBlueprintPointerDown: (
+    e: React.PointerEvent,
+    bp: Blueprint,
+    bpGeom: { bx: number; by: number; cx: number; cy: number }
+  ) => void;
+  onRootPointerDown: (e: React.PointerEvent<SVGSVGElement>) => void;
+  onPointerMove: (e: React.PointerEvent<SVGSVGElement>) => void;
+  onPointerUp: () => void;
+  onCenterBadgePointerDown: (e: React.PointerEvent) => void;
+};
+
+function pathD(poly: Poly) {
+  return `M ${poly.map((pt) => `${pt.x} ${pt.y}`).join(" L ")} Z`;
+}
+
+export default function BoardView(props: BoardViewProps) {
+  const {
+    controller, layout, viewBox, width, height,
+    badgeR, badgeCenter,
+    placedSilBySector, anchorDots, pieces,
+    clickMode, draggingId, selectedPieceId, dragInvalid, lockedPieceId,
+    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: "#fff", 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) => {
+        const bp = controller.getBlueprint(p.blueprintId)!;
+        const bb = boundsOfBlueprint(bp, (k: string) => controller.getPrimitive(k as TanKind)!);
+        const isDragging = draggingId === p.id;
+        const locked = p.sectorId && controller.isSectorCompleted(p.sectorId);
+        const isConnectivityLocked = lockedPieceId === p.id;
+        const isSelected = selectedPieceId === p.id;
+        const isCarriedInvalid = isDragging && dragInvalid;
+        const translateX = p.x - bb.min.x;
+        const translateY = p.y - bb.min.y;
+        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) => {
+              const showBorders = shouldShowBorders();
+              const useSelectiveBorders = shouldUseSelectiveBorders(p.blueprintId);
+              return (
+                <React.Fragment key={idx}>
+                  {/* 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))}
+                    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)}
+                  />
+                  
+                  {/* Border paths - only rendered if borders are enabled */}
+                  {showBorders && (
+                    useSelectiveBorders ? (
+                      // 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));
+                        
+                        // Check if this piece's edges were hidden due to touching the dragged piece
+                        const draggedPiece = draggingId ? allPiecesInSector.find(piece => piece.id === draggingId) : null;
+                        
+                        // For composites, we need to distinguish between internal edges (always hidden) and external edges (shown when dragging)
+                        let wasTouchingDraggedPiece: boolean[];
+                        if (p.blueprintId.startsWith('comp:')) {
+                          // For composites, check internal edges separately from external edges
+                          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);
+                          
+                          // Only consider external edges as "touching dragged piece"
+                          wasTouchingDraggedPiece = externalHiddenEdges.map((external, i) => external && !internalHiddenEdges[i]);
+                        } else {
+                          // For primitives, all hidden edges are external
+                          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) => {
+                          // Show border if: 1) it wasn't hidden originally, OR 2) it was hidden due to touching the dragged piece
+                          const wasHiddenDueToDraggedPiece = wasTouchingDraggedPiece[strokeIdx] || false;
+                          
+                          // Special case: if this piece is being dragged and it's a composite, keep internal edges hidden
+                          let isHidden: boolean;
+                          if (isDragging && p.blueprintId.startsWith('comp:')) {
+                            // For dragged composites, only show external edges (not internal ones)
+                            const internalHiddenEdges = getHiddenEdgesForPolygon(pieceAsPiece, idx, [], (id) => controller.getBlueprint(id), (kind) => controller.getPrimitive(kind));
+                            isHidden = internalHiddenEdges[strokeIdx] || false;
+                          } else {
+                            // Normal logic for non-dragged pieces or primitives
+                            isHidden = isDragging ? false : ((hiddenEdges[strokeIdx] || false) && !wasHiddenDueToDraggedPiece);
+                          }
+                          
+                          return (
+                            <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)}
+                            />
+                          );
+                        });
+                      })()
+                    ) : (
+                      // For primitives or composites without selective borders: render full border
+                      <path
+                        d={pathD(poly)}
+                        fill="none"
+                        stroke={isConnectivityLocked ? CONFIG.color.piece.invalidStroke : (isCarriedInvalid ? CONFIG.color.piece.invalidStroke : (isSelected || isDragging ? CONFIG.color.piece.selectedStroke : CONFIG.color.piece.borderStroke))}
+                        strokeWidth={(isSelected || isDragging) ? CONFIG.size.stroke.pieceSelectedPx : CONFIG.size.stroke.pieceBorderPx}
+                        onPointerDown={(e) => onPiecePointerDown(e, p)}
+                      />
+                    )
+                  )}
+                </React.Fragment>
+              );
+            })}
+          </g>
+        );
+      })}
+
+      {/* silhouettes (use pre-placed polys) */}
+      {layout.sectors.map((s) => {
+        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>
+        );
+      })}
+
+      {/* anchor grid */}
+      {anchorDots.map(({ sectorId, valid, invalid }) => {
+        const isInnerRing = sectorId === "inner-ring";
+        return (
+          <g key={`anchors-${sectorId}`} pointerEvents="none">
+            {invalid.map((p, i) => (
+              <circle key={`inv-${i}`} cx={p.x} cy={p.y} r={CONFIG.size.anchorRadiusPx.invalid} fill={CONFIG.color.anchors.invalid} opacity={CONFIG.opacity.anchors.invalid} />
+            ))}
+            {valid.map((p, i) => (
+              <circle
+                key={`val-${i}`}
+                cx={p.x}
+                cy={p.y}
+                r={isInnerRing ? CONFIG.size.anchorRadiusPx.invalid : CONFIG.size.anchorRadiusPx.valid}
+                fill={isInnerRing ? CONFIG.color.anchors.invalid : CONFIG.color.anchors.valid}
+                opacity={isInnerRing ? CONFIG.opacity.anchors.invalid : CONFIG.opacity.anchors.valid}
+              />
+            ))}
+          </g>
+        );
+      })}
+
+      {/* center badge */}
+      {(() => {
+        const isPrep = controller.state.cfg.mode === "prep";
+        const isSubmitEnabled = isPrep ? controller.isSubmitEnabled() : true;
+        const isClickable = !draggingId && (!isPrep || isSubmitEnabled);
+        
+        return (
+          <g transform={`translate(${badgeCenter.x}, ${badgeCenter.y})`} 
+             style={{ cursor: isClickable ? "pointer" : "default" }} 
+             onPointerDown={isClickable ? onCenterBadgePointerDown : undefined}>
+            <circle r={badgeR} 
+                    fill={isSubmitEnabled ? CONFIG.color.blueprint.badgeFill : "#ccc"} 
+                    opacity={isSubmitEnabled ? 1.0 : 0.5} />
+            <text textAnchor="middle" 
+                  dominantBaseline="middle" 
+                  fontSize={CONFIG.size.badgeFontPx} 
+                  fill={isSubmitEnabled ? CONFIG.color.blueprint.labelFill : "#888"} 
+                  pointerEvents="none">
+              {isPrep ? "Submit" : controller.state.blueprintView}
+            </text>
+          </g>
+        );
+      })()}
+
+      {/* blueprint glyphs */}
+      {bps.map((bp: any, i: number) => {
+        const theta = blueprintTheta(i);
+        const bx = layout.cx + blueprintRingR * Math.cos(theta);
+        const by = layout.cy + blueprintRingR * Math.sin(theta);
+        return renderBlueprintGlyph(bp, bx, by);
+      })}
+
+
+      {/* all green pulse */}
+      {controller.state.endedAt && (
+        <g pointerEvents="none">
+          <circle cx={layout.cx} cy={layout.cy} r={layout.outerR - 3} fill="none" stroke={CONFIG.color.piece.allGreenStroke} strokeWidth={CONFIG.size.stroke.allGreenStrokePx} opacity={0}>
+            <animate attributeName="opacity" from="0" to="1" dur="160ms" fill="freeze" />
+            <animate attributeName="opacity" from="1" to="0" begin="560ms" dur="520ms" fill="freeze" />
+          </circle>
+        </g>
+      )}
+    </svg>
+  );
+}