@tscircuit/rectdiff 0.0.8 → 0.0.10

package/components/SolverDebugger3d.tsx

@@ -560,7 +560,7 @@ export const SolverDebugger3d: React.FC<SolverDebugger3dProps> = ({
   defaultWireframeOutput = false,
   style,
 }) => {
-  const [show3d, setShow3d] = useState(false)
+  const [renderMode, setRenderMode] = useState<"2d" | "3d">("2d")
   const [rebuildKey, setRebuildKey] = useState(0)
 
   const [showRoot, setShowRoot] = useState(defaultShowRoot)
@@ -610,204 +610,134 @@ export const SolverDebugger3d: React.FC<SolverDebugger3dProps> = ({
     return () => clearInterval(interval)
   }, [updateMeshNodes, solver])
 
-  const toggle3d = useCallback(() => setShow3d((s) => !s), [])
   const rebuild = useCallback(() => setRebuildKey((k) => k + 1), [])
 
   return (
     <>
       <div style={{ display: "grid", gap: 12, ...style }}>
-        <GenericSolverDebugger
-          solver={solver as any}
-          onSolverCompleted={handleSolverCompleted}
-        />
-
+        {/* Topbar with Render dropdown */}
         <div
           style={{
             display: "flex",
-            gap: 8,
+            gap: 12,
             alignItems: "center",
-            flexWrap: "wrap",
+            padding: "12px 16px",
+            background: "#f8fafc",
+            borderRadius: 8,
+            border: "1px solid #e2e8f0",
           }}
         >
-          <button
-            onClick={toggle3d}
-            style={{
-              padding: "8px 10px",
-              borderRadius: 6,
-              border: "1px solid #cbd5e1",
-              background: show3d ? "#1e293b" : "#2563eb",
-              color: "white",
-              cursor: "pointer",
-            }}
-          >
-            {show3d ? "Hide 3D" : "Show 3D"}
-          </button>
-          {show3d && (
-            <button
-              onClick={rebuild}
+          <label style={{ display: "flex", gap: 8, alignItems: "center" }}>
+            <span style={{ fontWeight: 600, fontSize: 14 }}>Render:</span>
+            <select
+              value={renderMode}
+              onChange={(e) => setRenderMode(e.target.value as "2d" | "3d")}
               style={{
-                padding: "8px 10px",
+                padding: "6px 12px",
                 borderRadius: 6,
                 border: "1px solid #cbd5e1",
-                background: "#0f766e",
-                color: "white",
+                background: "white",
                 cursor: "pointer",
+                fontSize: 14,
               }}
-              title="Rebuild 3D scene (use after changing solver params)"
             >
-              Rebuild 3D
-            </button>
-          )}
-
-          {/* experiment-like toggles */}
-          <label
-            style={{
-              display: "inline-flex",
-              gap: 6,
-              alignItems: "center",
-              marginLeft: 8,
-            }}
-          >
-            <input
-              type="checkbox"
-              checked={showRoot}
-              onChange={(e) => setShowRoot(e.target.checked)}
-            />
-            Root
-          </label>
-          <label
-            style={{ display: "inline-flex", gap: 6, alignItems: "center" }}
-          >
-            <input
-              type="checkbox"
-              checked={showObstacles}
-              onChange={(e) => setShowObstacles(e.target.checked)}
-            />
-            Obstacles
+              <option value="2d">2D (Normal)</option>
+              <option value="3d">3D View</option>
+            </select>
           </label>
-          <label
-            style={{ display: "inline-flex", gap: 6, alignItems: "center" }}
-          >
-            <input
-              type="checkbox"
-              checked={showOutput}
-              onChange={(e) => setShowOutput(e.target.checked)}
-            />
-            Output
-          </label>
-          <label
-            style={{ display: "inline-flex", gap: 6, alignItems: "center" }}
-          >
-            <input
-              type="checkbox"
-              checked={wireframeOutput}
-              onChange={(e) => setWireframeOutput(e.target.checked)}
-            />
-            Wireframe Output
-          </label>
-
-          {/* Mesh opacity slider */}
-          {show3d && (
-            <label
-              style={{
-                display: "inline-flex",
-                alignItems: "center",
-                gap: 6,
-                marginLeft: 8,
-                fontSize: 12,
-              }}
-            >
-              Opacity
-              <input
-                type="range"
-                min={0}
-                max={1}
-                step={0.05}
-                value={meshOpacity}
-                onChange={(e) => setMeshOpacity(parseFloat(e.target.value))}
-              />
-              <span style={{ width: 32, textAlign: "right" }}>
-                {meshOpacity.toFixed(2)}
-              </span>
-            </label>
-          )}
 
-          {/* Shrink boxes option */}
-          {show3d && (
+          {renderMode === "3d" && (
             <>
+              <button
+                onClick={rebuild}
+                style={{
+                  padding: "6px 12px",
+                  borderRadius: 6,
+                  border: "1px solid #cbd5e1",
+                  background: "#0f766e",
+                  color: "white",
+                  cursor: "pointer",
+                  fontSize: 14,
+                }}
+                title="Rebuild 3D scene"
+              >
+                Rebuild
+              </button>
+
               <label
                 style={{
                   display: "inline-flex",
                   gap: 6,
                   alignItems: "center",
-                  fontSize: 12,
+                  fontSize: 13,
                 }}
               >
                 <input
                   type="checkbox"
-                  checked={shrinkBoxes}
-                  onChange={(e) => setShrinkBoxes(e.target.checked)}
+                  checked={showRoot}
+                  onChange={(e) => setShowRoot(e.target.checked)}
                 />
-                Shrink boxes
+                Root
               </label>
-              {shrinkBoxes && (
-                <label
-                  style={{
-                    display: "inline-flex",
-                    gap: 4,
-                    alignItems: "center",
-                    fontSize: 12,
-                  }}
-                >
-                  amt
-                  <input
-                    type="number"
-                    value={boxShrinkAmount}
-                    step={0.05}
-                    style={{ width: 60 }}
-                    onChange={(e) => {
-                      const v = parseFloat(e.target.value)
-                      if (Number.isNaN(v)) return
-                      setBoxShrinkAmount(Math.max(0, v))
-                    }}
-                  />
-                </label>
-              )}
-            </>
-          )}
-
-          {/* Show borders option */}
-          {show3d && (
-            <label
-              style={{
-                display: "inline-flex",
-                gap: 6,
-                alignItems: "center",
-                fontSize: 12,
-              }}
-            >
-              <input
-                type="checkbox"
-                checked={showBorders}
-                disabled={wireframeOutput}
-                onChange={(e) => setShowBorders(e.target.checked)}
-              />
-              <span
+              <label
+                style={{
+                  display: "inline-flex",
+                  gap: 6,
+                  alignItems: "center",
+                  fontSize: 13,
+                }}
+              >
+                <input
+                  type="checkbox"
+                  checked={showObstacles}
+                  onChange={(e) => setShowObstacles(e.target.checked)}
+                />
+                Obstacles
+              </label>
+              <label
+                style={{
+                  display: "inline-flex",
+                  gap: 6,
+                  alignItems: "center",
+                  fontSize: 13,
+                }}
+              >
+                <input
+                  type="checkbox"
+                  checked={showOutput}
+                  onChange={(e) => setShowOutput(e.target.checked)}
+                />
+                Output
+              </label>
+              <label
                 style={{
-                  opacity: wireframeOutput ? 0.5 : 1,
+                  display: "inline-flex",
+                  gap: 6,
+                  alignItems: "center",
+                  fontSize: 13,
                 }}
               >
-                Show borders
-              </span>
-            </label>
+                <input
+                  type="checkbox"
+                  checked={wireframeOutput}
+                  onChange={(e) => setWireframeOutput(e.target.checked)}
+                />
+                Wireframe
+              </label>
+            </>
           )}
-
-          <div style={{ fontSize: 12, color: "#334155", marginLeft: 6 }}>
-            Drag to orbit · Wheel to zoom · Right-drag to pan
-          </div>
         </div>
 
-        {show3d && (
+        {/* Render 2D view */}
+        {renderMode === "2d" && (
+          <GenericSolverDebugger
+            solver={solver as any}
+            onSolverCompleted={handleSolverCompleted}
+          />
+        )}
+
+        {/* Render 3D view */}
+        {renderMode === "3d" && (
           <ThreeBoardView
             key={rebuildKey}
             nodes={meshNodes}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import { BaseSolver } from '@tscircuit/solver-utils';
+import * as _tscircuit_solver_utils from '@tscircuit/solver-utils';
+import { BaseSolver, BasePipelineSolver } from '@tscircuit/solver-utils';
 import { GraphicsObject } from 'graphics-debug';
 
 type TraceId = string;
@@ -47,6 +48,23 @@ interface SimpleRouteConnection {
     externallyConnectedPointIds?: string[][];
 }
 
+type GridFill3DOptions = {
+    gridSizes?: number[];
+    initialCellRatio?: number;
+    maxAspectRatio?: number | null;
+    minSingle: {
+        width: number;
+        height: number;
+    };
+    minMulti: {
+        width: number;
+        height: number;
+        minLayers: number;
+    };
+    preferMultiLayer?: boolean;
+    maxMultiLayerSpan?: number;
+};
+
 type CapacityMeshNodeId = string;
 interface CapacityMeshNode {
     capacityMeshNodeId: string;
@@ -69,23 +87,6 @@ interface CapacityMeshNode {
     _parent?: CapacityMeshNode;
 }
 
-type GridFill3DOptions = {
-    gridSizes?: number[];
-    initialCellRatio?: number;
-    maxAspectRatio?: number | null;
-    minSingle: {
-        width: number;
-        height: number;
-    };
-    minMulti: {
-        width: number;
-        height: number;
-        minLayers: number;
-    };
-    preferMultiLayer?: boolean;
-    maxMultiLayerSpan?: number;
-};
-
 /**
  * A streaming, one-step-per-iteration solver for capacity mesh generation.
  */
@@ -106,18 +107,24 @@ declare class RectDiffSolver extends BaseSolver {
     getOutput(): {
         meshNodes: CapacityMeshNode[];
     };
-    /** Get coverage percentage (0-1). */
-    getCoverage(sampleResolution?: number): number;
-    /** Find uncovered points for debugging gaps. */
-    getUncoveredPoints(sampleResolution?: number): Array<{
-        x: number;
-        y: number;
-        z: number;
-    }>;
     /** Get color based on z layer for visualization. */
     private getColorForZLayer;
     /** Streaming visualization: board + obstacles + current placements. */
     visualize(): GraphicsObject;
 }
 
-export { type GridFill3DOptions, RectDiffSolver };
+interface RectDiffPipelineInput {
+    simpleRouteJson: SimpleRouteJson;
+    gridOptions?: Partial<GridFill3DOptions>;
+}
+declare class RectDiffPipeline extends BasePipelineSolver<RectDiffPipelineInput> {
+    rectDiffSolver?: RectDiffSolver;
+    pipelineDef: _tscircuit_solver_utils.PipelineStep<RectDiffSolver>[];
+    getConstructorParams(): RectDiffPipelineInput[];
+    getOutput(): {
+        meshNodes: CapacityMeshNode[];
+    };
+    visualize(): GraphicsObject;
+}
+
+export { RectDiffPipeline, type RectDiffPipelineInput };

package/dist/index.js

@@ -1,3 +1,6 @@
+// lib/RectDiffPipeline.ts
+import { BasePipelineSolver as BasePipelineSolver2, definePipelineStep } from "@tscircuit/solver-utils";
+
 // lib/solvers/RectDiffSolver.ts
 import { BaseSolver } from "@tscircuit/solver-utils";
 
@@ -1114,50 +1117,6 @@ function rectsToMeshNodes(rects) {
   return out;
 }
 
-// lib/solvers/rectdiff/gapfill/engine/calculateCoverage.ts
-function calculateCoverage({ sampleResolution = 0.1 }, ctx) {
-  const { bounds, layerCount, obstaclesByLayer, placedByLayer } = ctx;
-  let totalPoints = 0;
-  let coveredPoints = 0;
-  for (let z = 0; z < layerCount; z++) {
-    const obstacles = obstaclesByLayer[z] ?? [];
-    const placed = placedByLayer[z] ?? [];
-    const allRects = [...obstacles, ...placed];
-    for (let x = bounds.x; x <= bounds.x + bounds.width; x += sampleResolution) {
-      for (let y = bounds.y; y <= bounds.y + bounds.height; y += sampleResolution) {
-        totalPoints++;
-        const isCovered = allRects.some(
-          (r) => x >= r.x && x <= r.x + r.width && y >= r.y && y <= r.y + r.height
-        );
-        if (isCovered) coveredPoints++;
-      }
-    }
-  }
-  return totalPoints > 0 ? coveredPoints / totalPoints : 1;
-}
-
-// lib/solvers/rectdiff/gapfill/engine/findUncoveredPoints.ts
-function findUncoveredPoints({ sampleResolution = 0.05 }, ctx) {
-  const { bounds, layerCount, obstaclesByLayer, placedByLayer } = ctx;
-  const uncovered = [];
-  for (let z = 0; z < layerCount; z++) {
-    const obstacles = obstaclesByLayer[z] ?? [];
-    const placed = placedByLayer[z] ?? [];
-    const allRects = [...obstacles, ...placed];
-    for (let x = bounds.x; x <= bounds.x + bounds.width; x += sampleResolution) {
-      for (let y = bounds.y; y <= bounds.y + bounds.height; y += sampleResolution) {
-        const isCovered = allRects.some(
-          (r) => x >= r.x && x <= r.x + r.width && y >= r.y && y <= r.y + r.height
-        );
-        if (!isCovered) {
-          uncovered.push({ x, y, z });
-        }
-      }
-    }
-  }
-  return uncovered;
-}
-
 // lib/solvers/RectDiffSolver.ts
 var RectDiffSolver = class extends BaseSolver {
   srj;
@@ -1206,30 +1165,6 @@ var RectDiffSolver = class extends BaseSolver {
   getOutput() {
     return { meshNodes: this._meshNodes };
   }
-  /** Get coverage percentage (0-1). */
-  getCoverage(sampleResolution = 0.05) {
-    return calculateCoverage(
-      { sampleResolution },
-      {
-        bounds: this.state.bounds,
-        layerCount: this.state.layerCount,
-        obstaclesByLayer: this.state.obstaclesByLayer,
-        placedByLayer: this.state.placedByLayer
-      }
-    );
-  }
-  /** Find uncovered points for debugging gaps. */
-  getUncoveredPoints(sampleResolution = 0.05) {
-    return findUncoveredPoints(
-      { sampleResolution },
-      {
-        bounds: this.state.bounds,
-        layerCount: this.state.layerCount,
-        obstaclesByLayer: this.state.obstaclesByLayer,
-        placedByLayer: this.state.placedByLayer
-      }
-    );
-  }
   /** Get color based on z layer for visualization. */
   getColorForZLayer(zLayers) {
     const minZ = Math.min(...zLayers);
@@ -1354,6 +1289,95 @@ z:${p.zLayers.join(",")}`
     };
   }
 };
+
+// lib/solvers/rectdiff/visualization.ts
+function createBaseVisualization(srj, title = "RectDiff") {
+  const rects = [];
+  const lines = [];
+  const boardBounds = {
+    minX: srj.bounds.minX,
+    maxX: srj.bounds.maxX,
+    minY: srj.bounds.minY,
+    maxY: srj.bounds.maxY
+  };
+  if (srj.outline && srj.outline.length > 1) {
+    lines.push({
+      points: [...srj.outline, srj.outline[0]],
+      strokeColor: "#111827",
+      strokeWidth: 0.01,
+      label: "outline"
+    });
+  } else {
+    rects.push({
+      center: {
+        x: (boardBounds.minX + boardBounds.maxX) / 2,
+        y: (boardBounds.minY + boardBounds.maxY) / 2
+      },
+      width: boardBounds.maxX - boardBounds.minX,
+      height: boardBounds.maxY - boardBounds.minY,
+      fill: "none",
+      stroke: "#111827",
+      label: "board"
+    });
+  }
+  for (const obstacle of srj.obstacles ?? []) {
+    if (obstacle.type === "rect" || obstacle.type === "oval") {
+      rects.push({
+        center: { x: obstacle.center.x, y: obstacle.center.y },
+        width: obstacle.width,
+        height: obstacle.height,
+        fill: "#fee2e2",
+        stroke: "#ef4444",
+        layer: "obstacle",
+        label: "obstacle"
+      });
+    }
+  }
+  return {
+    title,
+    coordinateSystem: "cartesian",
+    rects,
+    points: [],
+    lines
+  };
+}
+
+// lib/RectDiffPipeline.ts
+var RectDiffPipeline = class extends BasePipelineSolver2 {
+  rectDiffSolver;
+  pipelineDef = [
+    definePipelineStep(
+      "rectDiffSolver",
+      RectDiffSolver,
+      (instance) => [
+        {
+          simpleRouteJson: instance.inputProblem.simpleRouteJson,
+          gridOptions: instance.inputProblem.gridOptions
+        }
+      ],
+      {
+        onSolved: () => {
+        }
+      }
+    )
+  ];
+  getConstructorParams() {
+    return [this.inputProblem];
+  }
+  getOutput() {
+    return this.getSolver("rectDiffSolver").getOutput();
+  }
+  visualize() {
+    const solver = this.getSolver("rectDiffSolver");
+    if (solver) {
+      return solver.visualize();
+    }
+    return createBaseVisualization(
+      this.inputProblem.simpleRouteJson,
+      "RectDiff Pipeline (not started)"
+    );
+  }
+};
 export {
-  RectDiffSolver
+  RectDiffPipeline
 };

package/lib/RectDiffPipeline.ts

@@ -0,0 +1,55 @@
+import { BasePipelineSolver, definePipelineStep } from "@tscircuit/solver-utils"
+import type { SimpleRouteJson } from "./types/srj-types"
+import type { GridFill3DOptions } from "./solvers/rectdiff/types"
+import { RectDiffSolver } from "./solvers/RectDiffSolver"
+import type { CapacityMeshNode } from "./types/capacity-mesh-types"
+import type { GraphicsObject } from "graphics-debug"
+import { createBaseVisualization } from "./solvers/rectdiff/visualization"
+
+export interface RectDiffPipelineInput {
+  simpleRouteJson: SimpleRouteJson
+  gridOptions?: Partial<GridFill3DOptions>
+}
+
+export class RectDiffPipeline extends BasePipelineSolver<RectDiffPipelineInput> {
+  rectDiffSolver?: RectDiffSolver
+
+  override pipelineDef = [
+    definePipelineStep(
+      "rectDiffSolver",
+      RectDiffSolver,
+      (instance) => [
+        {
+          simpleRouteJson: instance.inputProblem.simpleRouteJson,
+          gridOptions: instance.inputProblem.gridOptions,
+        },
+      ],
+      {
+        onSolved: () => {
+          // RectDiff mesh generation completed
+        },
+      },
+    ),
+  ]
+
+  override getConstructorParams() {
+    return [this.inputProblem]
+  }
+
+  override getOutput(): { meshNodes: CapacityMeshNode[] } {
+    return this.getSolver<RectDiffSolver>("rectDiffSolver")!.getOutput()
+  }
+
+  override visualize(): GraphicsObject {
+    const solver = this.getSolver<RectDiffSolver>("rectDiffSolver")
+    if (solver) {
+      return solver.visualize()
+    }
+
+    // Show board and obstacles even before solver is initialized
+    return createBaseVisualization(
+      this.inputProblem.simpleRouteJson,
+      "RectDiff Pipeline (not started)",
+    )
+  }
+}

package/lib/index.ts

@@ -1 +1 @@
-export * from "./solvers/RectDiffSolver"
+export * from "./RectDiffPipeline"

package/lib/solvers/RectDiffSolver.ts

@@ -1,5 +1,5 @@
 // lib/solvers/RectDiffSolver.ts
-import { BaseSolver } from "@tscircuit/solver-utils"
+import { BaseSolver, BasePipelineSolver } from "@tscircuit/solver-utils"
 import type { SimpleRouteJson } from "../types/srj-types"
 import type { GraphicsObject } from "graphics-debug"
 import type { CapacityMeshNode } from "../types/capacity-mesh-types"
@@ -14,11 +14,6 @@ import {
 } from "./rectdiff/engine"
 import { rectsToMeshNodes } from "./rectdiff/rectsToMeshNodes"
 import { overlaps } from "./rectdiff/geometry"
-import type { GapFillOptions } from "./rectdiff/gapfill/types"
-import {
-  findUncoveredPoints,
-  calculateCoverage,
-} from "./rectdiff/gapfill/engine"
 
 /**
  * A streaming, one-step-per-iteration solver for capacity mesh generation.
@@ -82,34 +77,6 @@ export class RectDiffSolver extends BaseSolver {
     return { meshNodes: this._meshNodes }
   }
 
-  /** Get coverage percentage (0-1). */
-  getCoverage(sampleResolution: number = 0.05): number {
-    return calculateCoverage(
-      { sampleResolution },
-      {
-        bounds: this.state.bounds,
-        layerCount: this.state.layerCount,
-        obstaclesByLayer: this.state.obstaclesByLayer,
-        placedByLayer: this.state.placedByLayer,
-      },
-    )
-  }
-
-  /** Find uncovered points for debugging gaps. */
-  getUncoveredPoints(
-    sampleResolution: number = 0.05,
-  ): Array<{ x: number; y: number; z: number }> {
-    return findUncoveredPoints(
-      { sampleResolution },
-      {
-        bounds: this.state.bounds,
-        layerCount: this.state.layerCount,
-        obstaclesByLayer: this.state.obstaclesByLayer,
-        placedByLayer: this.state.placedByLayer,
-      },
-    )
-  }
-
   /** Get color based on z layer for visualization. */
   private getColorForZLayer(zLayers: number[]): {
     fill: string