@tscircuit/cli 0.0.145 → 0.0.161

package/example-project/package.json

@@ -1,14 +1,5 @@
 {
   "name": "example-project",
-  "version": "1.2.26",
-  "type": "module",
-  "main": "dist/index.js",
-  "scripts": {
-    "update-deps": "bun add -f @tscircuit/builder@latest @tscircuit/react-fiber@latest @tscircuit/layout@latest"
-  },
-  "dependencies": {
-    "@tscircuit/builder": "^1.5.134",
-    "@tscircuit/layout": "^0.0.25",
-    "@tscircuit/react-fiber": "^1.1.29"
-  }
+  "description": "An example project for tscircuit, this package.json is required",
+  "type": "module"
 }

package/{dev-server-frontend/src → frontend}/components/command-k.tsx

@@ -8,7 +8,7 @@ import {
   CommandList,
   CommandShortcut,
 } from "./ui/command"
-import { useGlobalStore } from "src/hooks/use-global-store"
+import { useGlobalStore } from "frontend/hooks/use-global-store"
 import { useDevPackageExamples } from "../hooks/use-dev-package-examples"
 import { CommandSeparator } from "cmdk"
 

package/{dev-server-frontend/src → frontend}/components/dialogs/generic-export-dialog.tsx

@@ -1,14 +1,10 @@
 import { useMemo, useState } from "react"
 import { Dialog } from "@headlessui/react"
-import { useGlobalStore } from "src/hooks/use-global-store"
-import { useActiveDevPackageExampleLite } from "src/hooks/use-active-dev-package-example-lite"
+import { useGlobalStore } from "frontend/hooks/use-global-store"
+import { useActiveDevPackageExampleLite } from "frontend/hooks/use-active-dev-package-example-lite"
 import { Button } from "../ui/button"
 import axios from "axios"
-import {
-  ExportParameters,
-  ExportParametersInput,
-  export_parameters,
-} from "@server/lib/zod/export_parameters"
+import type { ExportParametersInput } from "api/lib/zod/export_parameters"
 
 export const useGenericExportDialog = ({
   exportFileName,

package/{dev-server-frontend/src → frontend}/components/dialogs/gerber-export-dialog.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from "react"
 import { Dialog } from "@headlessui/react"
-import { useGlobalStore } from "src/hooks/use-global-store"
-import { useActiveDevPackageExampleLite } from "src/hooks/use-active-dev-package-example-lite"
+import { useGlobalStore } from "frontend/hooks/use-global-store"
+import { useActiveDevPackageExampleLite } from "frontend/hooks/use-active-dev-package-example-lite"
 import { Button } from "../ui/button"
 import axios from "axios"
 

package/{dev-server-frontend/src → frontend}/components/select-example-search.tsx

@@ -3,8 +3,8 @@
 import * as React from "react"
 import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
 
-import { cn } from "src/lib/utils"
-import { Button } from "src/components/ui/button"
+import { cn } from "frontend/lib/utils"
+import { Button } from "frontend/components/ui/button"
 import {
   Command,
   CommandEmpty,
@@ -13,15 +13,15 @@ import {
   CommandItem,
   CommandList,
   CommandShortcut,
-} from "src/components/ui/command"
+} from "frontend/components/ui/command"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "src/components/ui/popover"
-import { useGlobalStore } from "src/hooks/use-global-store"
+} from "frontend/components/ui/popover"
+import { useGlobalStore } from "frontend/hooks/use-global-store"
 import { useDevPackageExamples } from "../hooks/use-dev-package-examples"
-import { useActiveDevPackageExampleLite } from "src/hooks/use-active-dev-package-example-lite"
+import { useActiveDevPackageExampleLite } from "frontend/hooks/use-active-dev-package-example-lite"
 
 export function inflatePackageExample(ex: any) {
   if (!ex) return ex

package/{dev-server-frontend/src → frontend}/components/ui/alert-dialog.tsx

@@ -1,8 +1,8 @@
 import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
 
-import { cn } from "src/lib/utils"
-import { buttonVariants } from "src/components/ui/button"
+import { cn } from "frontend/lib/utils"
+import { buttonVariants } from "frontend/components/ui/button"
 
 const AlertDialog = AlertDialogPrimitive.Root
 

package/{dev-server-frontend/src → frontend}/components/ui/alert.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "src/lib/utils"
+import { cn } from "frontend/lib/utils"
 
 const alertVariants = cva(
   "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",

package/{dev-server-frontend/src → frontend}/components/ui/breadcrumb.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"
 import { Slot } from "@radix-ui/react-slot"
 
-import { cn } from "src/lib/utils"
+import { cn } from "frontend/lib/utils"
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,

package/{dev-server-frontend/src → frontend}/components/ui/button.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "src/lib/utils"
+import { cn } from "frontend/lib/utils"
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",

package/{dev-server-frontend/src → frontend}/components/ui/card.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import { cn } from "src/lib/utils"
+import { cn } from "frontend/lib/utils"
 
 const Card = React.forwardRef<
   HTMLDivElement,

package/{dev-server-frontend/src → frontend}/components/ui/command.tsx

@@ -3,8 +3,8 @@ import { type DialogProps } from "@radix-ui/react-dialog"
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
 import { Command as CommandPrimitive } from "cmdk"
 
-import { cn } from "src/lib/utils"
-import { Dialog, DialogContent } from "src/components/ui/dialog"
+import { cn } from "frontend/lib/utils"
+import { Dialog, DialogContent } from "frontend/components/ui/dialog"
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,

package/{dev-server-frontend/src → frontend}/components/ui/context-menu.tsx

@@ -6,7 +6,7 @@ import {
   DotFilledIcon,
 } from "@radix-ui/react-icons"
 
-import { cn } from "src/lib/utils"
+import { cn } from "frontend/lib/utils"
 
 const ContextMenu = ContextMenuPrimitive.Root
 

package/{dev-server-frontend/src → frontend}/components/ui/dialog.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import { Cross2Icon } from "@radix-ui/react-icons"
 
-import { cn } from "src/lib/utils"
+import { cn } from "frontend/lib/utils"
 
 const Dialog = DialogPrimitive.Root
 

package/{dev-server-frontend/src → frontend}/components/ui/menubar.tsx

@@ -6,7 +6,7 @@ import {
 } from "@radix-ui/react-icons"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
 
-import { cn } from "src/lib/utils"
+import { cn } from "frontend/lib/utils"
 
 const MenubarMenu = MenubarPrimitive.Menu
 

package/{dev-server-frontend/src → frontend}/components/ui/navigation-menu.tsx

@@ -3,7 +3,7 @@ import { ChevronDownIcon } from "@radix-ui/react-icons"
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
 import { cva } from "class-variance-authority"
 
-import { cn } from "src/lib/utils"
+import { cn } from "frontend/lib/utils"
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,

package/{dev-server-frontend/src → frontend}/components/ui/popover.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
 
-import { cn } from "src/lib/utils"
+import { cn } from "frontend/lib/utils"
 
 const Popover = PopoverPrimitive.Root
 

package/{dev-server-frontend/src → frontend}/components/ui/select.tsx

@@ -7,7 +7,7 @@ import {
 } from "@radix-ui/react-icons"
 import * as SelectPrimitive from "@radix-ui/react-select"
 
-import { cn } from "src/lib/utils"
+import { cn } from "frontend/lib/utils"
 
 const Select = SelectPrimitive.Root
 

package/{dev-server-frontend/src → frontend}/components/ui/tabs.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import * as TabsPrimitive from "@radix-ui/react-tabs"
 
-import { cn } from "src/lib/utils"
+import { cn } from "frontend/lib/utils"
 
 const Tabs = TabsPrimitive.Root
 

package/{dev-server-frontend/src → frontend}/components/ui/toggle-group.tsx

@@ -2,8 +2,8 @@ import * as React from "react"
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
 import { VariantProps } from "class-variance-authority"
 
-import { cn } from "src/lib/utils"
-import { toggleVariants } from "src/components/ui/toggle"
+import { cn } from "frontend/lib/utils"
+import { toggleVariants } from "frontend/components/ui/toggle"
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants>

package/{dev-server-frontend/src → frontend}/components/ui/toggle.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import * as TogglePrimitive from "@radix-ui/react-toggle"
 import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "src/lib/utils"
+import { cn } from "frontend/lib/utils"
 
 const toggleVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",

package/{dev-server-frontend/src → frontend}/components/ui/tooltip.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
-import { cn } from "src/lib/utils"
+import { cn } from "frontend/lib/utils"
 
 const TooltipProvider = TooltipPrimitive.Provider
 

package/{dev-server-frontend → frontend}/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/main.tsx"></script>
   </body>
 </html>

package/{dev-server-frontend/src → frontend}/main.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import ReactDOM from "react-dom/client"
-import App from "./App.tsx"
+import App from "./views/App.tsx"
 import "./index.css"
 import { GlobalContextProviders } from "./components/global-context-providers.tsx"
 

package/{dev-server-frontend → frontend}/tailwind.config.js

@@ -1,12 +1,9 @@
+const path = require("node:path")
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
-  content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
-  ],
+  content: [path.join(__dirname, "./{src,components,lib,views}/**/*.{ts,tsx}")],
   prefix: "",
   theme: {
     container: {

package/frontend/views/App.tsx

@@ -0,0 +1,22 @@
+import { TabsContent } from "frontend/components/ui/tabs"
+import { MenubarShortcut } from "frontend/components/ui/menubar"
+import { CommandK } from "frontend/components/command-k"
+import { useToastIfApiNotConnected } from "frontend/hooks/toast-if-api-not-connected"
+import { Header } from "./Header"
+import { MainContentView } from "./MainContentView"
+
+function App() {
+  useToastIfApiNotConnected()
+
+  return (
+    <div className="">
+      <Header />
+      <div className="">
+        <MainContentView />
+      </div>
+      <CommandK />
+    </div>
+  )
+}
+
+export default App

package/{dev-server-frontend/src → frontend/views}/Header.tsx

@@ -1,11 +1,11 @@
 import { useState } from "react"
-import { SelectExampleSearch } from "./components/select-example-search"
-import { Button } from "./components/ui/button"
-import { Tabs, TabsList, TabsTrigger } from "./components/ui/tabs"
+import { SelectExampleSearch } from "frontend/components/select-example-search"
+import { Button } from "frontend/components/ui/button"
+import { Tabs, TabsList, TabsTrigger } from "frontend/components/ui/tabs"
 import { RotateCounterClockwiseIcon } from "@radix-ui/react-icons"
-import { useGlobalStore } from "./hooks/use-global-store"
+import { useGlobalStore } from "frontend/hooks/use-global-store"
 import { HeaderMenu } from "./HeaderMenu"
-import { CommandShortcut } from "./components/ui/command"
+import { CommandShortcut } from "frontend/components/ui/command"
 
 export const Header = () => {
   const [viewMode, setViewMode] = useGlobalStore((s) => [

package/{dev-server-frontend/src → frontend/views}/HeaderMenu.tsx

@@ -15,12 +15,13 @@ import {
   MenubarSubContent,
   MenubarSubTrigger,
   MenubarTrigger,
-} from "src/components/ui/menubar"
+} from "frontend/components/ui/menubar"
 import cliPackageJson from "../../package.json"
-import frontendPackageJson from "../package.json"
-import { useGenericExportDialog } from "./components/dialogs/generic-export-dialog"
-import { useGerberExportDialog } from "./components/dialogs/gerber-export-dialog"
-import { useGlobalStore } from "./hooks/use-global-store"
+import { useGenericExportDialog } from "frontend/components/dialogs/generic-export-dialog"
+import { useGerberExportDialog } from "frontend/components/dialogs/gerber-export-dialog"
+import { useGlobalStore } from "frontend/hooks/use-global-store"
+
+const DEBUG_URL = "https://debug.tscircuit.com"
 
 export const HeaderMenu = () => {
   const [viewMode, setViewMode] = useGlobalStore((s) => [
@@ -31,10 +32,13 @@ export const HeaderMenu = () => {
     s.split_mode,
     s.setSplitMode,
   ])
+  const devExamplePackageId = useGlobalStore(
+    (s) => s.active_dev_example_package_id,
+  )
 
   const { data, isLoading } = useQuery(
     ["package_info"],
-    async () => axios.get(`/api/package_info/get`),
+    async () => axios.get("/api/package_info/get"),
     {
       refetchOnWindowFocus: true,
       retry: false,
@@ -73,6 +77,33 @@ export const HeaderMenu = () => {
     },
   })
 
+  const handleDebugClick = async () => {
+    const soupData = await axios
+      .post("/api/dev_package_examples/get", {
+        dev_package_example_id: devExamplePackageId,
+      })
+      .then((r) => r.data.dev_package_example.tscircuit_soup)
+
+    // logSoup module is giving cors error
+    await axios.post(
+      `${DEBUG_URL}/api/soup_group/add_soup`,
+      {
+        soup_group_name: name,
+        soup_name: name,
+        username: "tmp",
+        content: {
+          elements: soupData,
+        },
+      },
+      {
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+          "Content-Type": "application/json",
+        },
+      },
+    )
+  }
+
   return (
     <>
       <Menubar className="border-none shadow-none">
@@ -88,6 +119,13 @@ export const HeaderMenu = () => {
             >
               New Circuit
             </MenubarItem>
+            <MenubarItem
+              onSelect={() => {
+                handleDebugClick()
+              }}
+            >
+              Debug
+            </MenubarItem>
             <MenubarSeparator />
             <MenubarSub>
               <MenubarSubTrigger>Export</MenubarSubTrigger>
@@ -242,18 +280,12 @@ export const HeaderMenu = () => {
               @tscircuit/cli v{cliPackageJson.version}
             </MenubarItem>
             <MenubarItem disabled>
-              @tscircuit/builder (cli) v
+              @tscircuit/builder v
               {cliPackageJson.devDependencies?.["@tscircuit/builder"]?.replace(
                 /\^/g,
                 "",
               )}
             </MenubarItem>
-            <MenubarItem disabled>
-              @tscircuit/builder (ui) v
-              {frontendPackageJson.dependencies?.[
-                "@tscircuit/builder"
-              ]?.replace(/\^/g, "")}
-            </MenubarItem>
             <MenubarItem disabled>
               @tscircuit/react-fiber v
               {cliPackageJson.devDependencies["@tscircuit/react-fiber"].replace(
@@ -263,15 +295,16 @@ export const HeaderMenu = () => {
             </MenubarItem>
             <MenubarItem disabled>
               @tscircuit/schematic-viewer v
-              {frontendPackageJson.dependencies[
+              {cliPackageJson.devDependencies[
                 "@tscircuit/schematic-viewer"
               ].replace(/\^/g, "")}
             </MenubarItem>
             <MenubarItem disabled>
               @tscircuit/pcb-viewer v
-              {frontendPackageJson.dependencies[
-                "@tscircuit/pcb-viewer"
-              ].replace(/\^/g, "")}
+              {cliPackageJson.devDependencies["@tscircuit/pcb-viewer"].replace(
+                /\^/g,
+                "",
+              )}
             </MenubarItem>
           </MenubarContent>
         </MenubarMenu>

package/{dev-server-frontend/src/ExampleContentView.tsx → frontend/views/MainContentView.tsx}

@@ -1,9 +1,9 @@
 import { useQuery } from "react-query"
-import { useGlobalStore } from "./hooks/use-global-store"
+import { useGlobalStore } from "frontend/hooks/use-global-store"
 import axios from "axios"
 import { Schematic } from "@tscircuit/schematic-viewer"
 import { PCBViewer } from "@tscircuit/pcb-viewer"
-import { cn } from "./lib/utils"
+import { cn } from "frontend/lib/utils"
 import { ErrorBoundary } from "react-error-boundary"
 import { SoupTableViewer } from "@tscircuit/table-viewer"
 import "react-data-grid/lib/styles.css"
@@ -11,7 +11,7 @@ import { useEffect, useRef, useState } from "react"
 import type { EditEvent } from "@tscircuit/pcb-viewer"
 import { CadViewer } from "@tscircuit/3d-viewer"
 
-export const ExampleContentView = () => {
+export const MainContentView = () => {
   const devExamplePackageId = useGlobalStore(
     (s) => s.active_dev_example_package_id,
   )
@@ -72,7 +72,7 @@ export const ExampleContentView = () => {
       {pkg && (viewMode === "schematic" || viewMode === "split") && (
         <ErrorBoundary fallback={<div>Failed to render Schematic</div>}>
           <Schematic
-            key={`sch-${pkg?.soup_last_updated_at}`}
+            key={`sch-${pkg?.dev_package_example_id}-${pkg?.soup_last_updated_at}`}
             style={{ height: itemHeight }}
             soup={pkg.tscircuit_soup}
             showTable={false}
@@ -82,7 +82,7 @@ export const ExampleContentView = () => {
       {pkg && (viewMode === "pcb" || viewMode === "split") && (
         <ErrorBoundary fallback={<div>Failed to render PCB</div>}>
           <PCBViewer
-            key={`pcb-${pkg?.soup_last_updated_at}`}
+            key={`pcb-${pkg?.soup_last_updated_at}-${pkg?.edit_events_last_applied_at}`}
             height={itemHeight}
             allowEditing
             editEvents={editEvents}

package/frontend/vite.config.ts

@@ -0,0 +1,50 @@
+import react from "@vitejs/plugin-react"
+import path from "node:path"
+import { defineConfig } from "vite"
+import tailwindcss from "tailwindcss"
+import autoprefixer from "autoprefixer"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  root: path.resolve(__dirname),
+  plugins: [react()],
+  resolve: {
+    alias: [
+      {
+        find: "frontend",
+        replacement: path.resolve(__dirname),
+      },
+      {
+        find: "src",
+        replacement: path.resolve(__dirname),
+      },
+    ],
+  },
+  server: {
+    proxy: {
+      "/api": "http://127.0.0.1:3020",
+    },
+  },
+  optimizeDeps: {
+    needsInterop: ["@tscircuit/schematic-viewer"],
+  },
+  define: {
+    // Global var used by some dep inside schematic-viewer
+    global: {},
+  },
+  build: {
+    outDir: path.resolve(__dirname, "dist"),
+    rollupOptions: {
+      input: path.resolve(__dirname, "index.html"),
+    },
+  },
+  base: "/preview",
+  css: {
+    postcss: {
+      plugins: [
+        tailwindcss(path.resolve(__dirname, "tailwind.config.js")),
+        autoprefixer,
+      ],
+    },
+  },
+})