@tscircuit/cli 0.0.109 → 0.0.111

package/dev-server-api/index.ts

@@ -0,0 +1,6 @@
+import { createWinterSpecBundleFromDir } from "winterspec/adapters/node"
+import { join } from "node:path"
+
+export default await createWinterSpecBundleFromDir(
+  join(import.meta.dir, "./routes")
+)

package/dev-server-api/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@tscircuit/dev-server-api",
-  "main": "dist/bundle.ts",
+  "main": "index.ts",
   "type": "module",
   "scripts": {
-    "start": "edgespec dev --port 3021",
-    "build": "edgespec bundle -o dist/bundle.ts"
+    "start": "bun server.ts",
+    "build": "echo 'nothing to do'"
   },
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.9",
@@ -18,7 +18,7 @@
     "better-sqlite3": "^11.0.0",
     "kysely": "^0.27.3",
     "kysely-bun-sqlite": "^0.3.2",
-    "winterspec": "0.0.79",
+    "winterspec": "^0.0.80",
     "zod": "^3.22.4"
   }
 }

package/dev-server-api/server.ts

@@ -1,9 +1,20 @@
 import { createFetchHandlerFromDir } from "winterspec/adapters/node"
+import { Request as EdgeRuntimeRequest } from "@edge-runtime/primitives"
+import { join } from "node:path"
 
-const serverFetch = await createFetchHandlerFromDir("./routes")
+const serverFetch = await createFetchHandlerFromDir(
+  join(import.meta.dir, "./routes")
+)
 
 console.log("starting dev-server-api on localhost:3021")
 Bun.serve({
-  fetch: (req) => serverFetch(req),
+  fetch: (bunReq) => {
+    const req = new EdgeRuntimeRequest(bunReq.url, {
+      headers: bunReq.headers,
+      method: bunReq.method,
+      body: bunReq.body,
+    })
+    return serverFetch(req as any)
+  },
   port: 3021,
 })

package/dev-server-frontend/package.json

@@ -13,7 +13,7 @@
     "build": "tsc && vite build --base /preview && rm -f dist/bundle* && make-vfs --dir dist --outfile ./dist/bundle.ts",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 10",
     "preview": "vite preview",
-    "update-deps": "bun add @tscircuit/pcb-viewer@latest @tscircuit/builder@latest @tscircuit/schematic-viewer@latest"
+    "update-deps": "bun add @tscircuit/pcb-viewer@latest @tscircuit/builder@latest @tscircuit/schematic-viewer@latest @tscircuit/3d-viewer@latest"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.18",
@@ -30,8 +30,9 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@tscircuit/builder": "1.5.128",
-    "@tscircuit/pcb-viewer": "^1.3.14",
+    "@tscircuit/3d-viewer": "^0.0.6",
+    "@tscircuit/builder": "^1.5.134",
+    "@tscircuit/pcb-viewer": "^1.4.0",
     "@tscircuit/schematic-viewer": "^1.2.14",
     "@tscircuit/table-viewer": "0.0.8",
     "axios": "^1.6.7",

package/dev-server-frontend/src/ExampleContentView.tsx

@@ -9,10 +9,11 @@ import { SoupTableViewer } from "@tscircuit/table-viewer"
 import "react-data-grid/lib/styles.css"
 import { useEffect, useRef, useState } from "react"
 import type { EditEvent } from "@tscircuit/pcb-viewer"
+import { CadViewer } from "@tscircuit/3d-viewer"
 
 export const ExampleContentView = () => {
   const devExamplePackageId = useGlobalStore(
-    (s) => s.active_dev_example_package_id
+    (s) => s.active_dev_example_package_id,
   )
 
   const {
@@ -33,7 +34,7 @@ export const ExampleContentView = () => {
       refetchIntervalInBackground: true,
       refetchOnWindowFocus: true,
       retry: false,
-    }
+    },
   )
 
   const sentEditEvents = useRef<Record<string, boolean>>({})
@@ -46,7 +47,8 @@ export const ExampleContentView = () => {
   let [editEvents, setEditEvents] = useState<EditEvent[]>([])
 
   editEvents = editEvents.filter(
-    (ee) => ee.created_at > new Date(pkg?.edit_events_last_applied_at).valueOf()
+    (ee) =>
+      ee.created_at > new Date(pkg?.edit_events_last_applied_at).valueOf(),
   )
 
   const editorHeight = window.innerHeight - 52
@@ -64,7 +66,7 @@ export const ExampleContentView = () => {
         viewMode === "split" &&
           splitMode === "horizontal" &&
           "grid grid-cols-2",
-        viewMode === "split" && splitMode === "vertical" && "grid grid-rows-2"
+        viewMode === "split" && splitMode === "vertical" && "grid grid-rows-2",
       )}
     >
       {pkg && (viewMode === "schematic" || viewMode === "split") && (
@@ -101,7 +103,7 @@ export const ExampleContentView = () => {
                 axios.post(`/api/dev_package_examples/update`, {
                   dev_package_example_id: devExamplePackageId,
                   completed_edit_events: changedEditEvents.filter(
-                    (ee) => ee.in_progress === false
+                    (ee) => ee.in_progress === false,
                   ),
                 })
               }
@@ -111,6 +113,22 @@ export const ExampleContentView = () => {
           />
         </ErrorBoundary>
       )}
+      {pkg && viewMode === "3d" && (
+        <ErrorBoundary
+          fallbackRender={(props) => (
+            <div style={{ padding: 20 }}>
+              Failed to render 3d view
+              <div style={{ marginTop: 20, color: "red" }}>
+                {props.error.message}
+              </div>
+            </div>
+          )}
+        >
+          <div style={{ height: itemHeight }}>
+            <CadViewer soup={pkg.tscircuit_soup} />
+          </div>
+        </ErrorBoundary>
+      )}
       {pkg && viewMode === "soup" && (
         <ErrorBoundary fallback={<div>Failed to render Soup</div>}>
           <SoupTableViewer

package/dev-server-frontend/src/Header.tsx

@@ -34,10 +34,12 @@ export const Header = () => {
           <TabsList>
             <TabsTrigger value="schematic">Schematic</TabsTrigger>
             <TabsTrigger value="pcb">PCB</TabsTrigger>
-            <TabsTrigger value="split">Split</TabsTrigger>
+            {/* <TabsTrigger value="split">Split</TabsTrigger> */}
+            <TabsTrigger value="3d">3D</TabsTrigger>
           </TabsList>
         </Tabs>
-        <Button
+        {/* Button is only relevant when the "Split" button is available */}
+        {/* <Button
           variant="outline"
           disabled={viewMode !== "split"}
           className="ml-1 group"
@@ -46,7 +48,7 @@ export const Header = () => {
           }}
         >
           <RotateCounterClockwiseIcon className="scale-x-[-1] group-hover:rotate-[30deg] transition-transform" />
-        </Button>
+        </Button> */}
       </div>
     </div>
   )

package/dev-server-frontend/src/hooks/use-global-store.ts

@@ -4,7 +4,7 @@ import { persist } from "zustand/middleware"
 export interface GlobalState {
   active_dev_example_package_id: string | null
 
-  view_mode: "schematic" | "pcb" | "split" | "soup"
+  view_mode: "schematic" | "pcb" | "split" | "soup" | "3d"
   split_mode: "horizontal" | "vertical"
   in_debug_mode: boolean
 
@@ -37,6 +37,6 @@ export const useGlobalStore = create<GlobalState>()(
     }),
     {
       name: "global-store",
-    }
-  )
+    },
+  ),
 )