@tscircuit/rectdiff 0.0.7 → 0.0.9

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.
  */
@@ -120,4 +121,18 @@ declare class RectDiffSolver extends BaseSolver {
     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";
 
@@ -1354,6 +1357,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"

package/lib/solvers/rectdiff/visualization.ts

@@ -0,0 +1,66 @@
+import type { GraphicsObject } from "graphics-debug"
+import type { SimpleRouteJson } from "../../types/srj-types"
+
+/**
+ * Create basic visualization showing board bounds/outline and obstacles.
+ * This can be used before solver initialization to show the problem space.
+ */
+export function createBaseVisualization(
+  srj: SimpleRouteJson,
+  title: string = "RectDiff",
+): GraphicsObject {
+  const rects: NonNullable<GraphicsObject["rects"]> = []
+  const lines: NonNullable<GraphicsObject["lines"]> = []
+
+  const boardBounds = {
+    minX: srj.bounds.minX,
+    maxX: srj.bounds.maxX,
+    minY: srj.bounds.minY,
+    maxY: srj.bounds.maxY,
+  }
+
+  // Draw board outline or bounds rectangle
+  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",
+    })
+  }
+
+  // Draw obstacles
+  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,
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/rectdiff",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "main": "dist/index.js",
   "scripts": {
@@ -13,7 +13,7 @@
   "devDependencies": {
     "@biomejs/biome": "^2.3.5",
     "@react-hook/resize-observer": "^2.0.2",
-    "@tscircuit/solver-utils": "^0.0.3",
+    "@tscircuit/solver-utils": "^0.0.7",
     "@types/bun": "latest",
     "@types/react": "^18",
     "@types/react-dom": "^18",

package/pages/board-with-cutout.page.tsx

@@ -1,11 +1,10 @@
-import { GenericSolverDebugger } from "@tscircuit/solver-utils/react"
 import simpleRouteJson from "../test-assets/board-with-cutout.json"
-import { RectDiffSolver } from "../lib/solvers/RectDiffSolver"
+import { RectDiffPipeline } from "../lib/RectDiffPipeline"
 import { useMemo } from "react"
 import { SolverDebugger3d } from "../components/SolverDebugger3d"
 
 export default () => {
-  const solver = useMemo(() => new RectDiffSolver({ simpleRouteJson }), [])
+  const solver = useMemo(() => new RectDiffPipeline({ simpleRouteJson }), [])
 
-  return <SolverDebugger3d solver={solver} />
+  return <SolverDebugger3d solver={solver} simpleRouteJson={simpleRouteJson} />
 }

package/pages/bugreport11.page.tsx

@@ -1,16 +1,21 @@
 import simpleRouteJson from "../test-assets/bugreport11-b2de3c.json"
-import { RectDiffSolver } from "../lib/solvers/RectDiffSolver"
+import { RectDiffPipeline } from "../lib/RectDiffPipeline"
 import { useMemo } from "react"
 import { SolverDebugger3d } from "../components/SolverDebugger3d"
 
 export default () => {
   const solver = useMemo(
     () =>
-      new RectDiffSolver({
+      new RectDiffPipeline({
         simpleRouteJson: simpleRouteJson.simple_route_json,
       }),
     [],
   )
 
-  return <SolverDebugger3d solver={solver} />
+  return (
+    <SolverDebugger3d
+      solver={solver}
+      simpleRouteJson={simpleRouteJson.simple_route_json}
+    />
+  )
 }