@tscircuit/cli 0.0.144 → 0.0.161

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>,
@@ -13,7 +13,7 @@ const NavigationMenu = React.forwardRef<
     ref={ref}
     className={cn(
       "relative z-10 flex max-w-max flex-1 items-center justify-center",
-      className
+      className,
     )}
     {...props}
   >
@@ -31,7 +31,7 @@ const NavigationMenuList = React.forwardRef<
     ref={ref}
     className={cn(
       "group flex flex-1 list-none items-center justify-center space-x-1",
-      className
+      className,
     )}
     {...props}
   />
@@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 const NavigationMenuItem = NavigationMenuPrimitive.Item
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
 )
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -70,7 +70,7 @@ const NavigationMenuContent = React.forwardRef<
     ref={ref}
     className={cn(
       "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
-      className
+      className,
     )}
     {...props}
   />
@@ -87,7 +87,7 @@ const NavigationMenuViewport = React.forwardRef<
     <NavigationMenuPrimitive.Viewport
       className={cn(
         "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
-        className
+        className,
       )}
       ref={ref}
       {...props}
@@ -105,7 +105,7 @@ const NavigationMenuIndicator = React.forwardRef<
     ref={ref}
     className={cn(
       "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-      className
+      className,
     )}
     {...props}
   >

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
 
@@ -20,7 +20,7 @@ const PopoverContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
       )}
       {...props}
     />

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
 
@@ -23,7 +23,7 @@ const SelectTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
+      className,
     )}
     {...props}
   >
@@ -43,7 +43,7 @@ const SelectScrollUpButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className
+      className,
     )}
     {...props}
   >
@@ -60,7 +60,7 @@ const SelectScrollDownButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className
+      className,
     )}
     {...props}
   >
@@ -81,7 +81,7 @@ const SelectContent = React.forwardRef<
         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
+        className,
       )}
       position={position}
       {...props}
@@ -91,7 +91,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
         )}
       >
         {children}
@@ -122,7 +122,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >

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
 
@@ -13,7 +13,7 @@ const TabsList = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-      className
+      className,
     )}
     {...props}
   />
@@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
-      className
+      className,
     )}
     {...props}
   />
@@ -43,7 +43,7 @@ const TabsContent = React.forwardRef<
     ref={ref}
     className={cn(
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
+      className,
     )}
     {...props}
   />

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>
@@ -45,7 +45,7 @@ const ToggleGroupItem = React.forwardRef<
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        className
+        className,
       )}
       {...props}
     >

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",
@@ -23,7 +23,7 @@ const toggleVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 )
 
 const Toggle = React.forwardRef<

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
 
@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      className,
     )}
     {...props}
   />

package/{dev-server-frontend → frontend}/components.json

@@ -14,4 +14,4 @@
     "components": "src/components",
     "utils": "src/lib/utils"
   }
-}
+}

package/{dev-server-frontend/src → frontend}/hooks/use-active-dev-package-example-lite.ts

@@ -31,8 +31,8 @@ export const useActiveDevPackageExampleLite = () => {
   const activeDevExamplePackage = inflatePackageExample(
     examples?.find(
       (ex) =>
-        ex.dev_package_example_id.toString() === active_dev_example_package_id
-    )
+        ex.dev_package_example_id.toString() === active_dev_example_package_id,
+    ),
   )
 
   return activeDevExamplePackage

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"
 
@@ -9,5 +9,5 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
     <GlobalContextProviders>
       <App />
     </GlobalContextProviders>
-  </React.StrictMode>
+  </React.StrictMode>,
 )

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: {
@@ -74,4 +71,4 @@ module.exports = {
     },
   },
   plugins: [require("tailwindcss-animate")],
-}
+}

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,15 +32,13 @@ export const HeaderMenu = () => {
     s.split_mode,
     s.setSplitMode,
   ])
+  const devExamplePackageId = useGlobalStore(
+    (s) => s.active_dev_example_package_id,
+  )
 
-  const {
-    data,
-    isLoading,
-  } = useQuery(
+  const { data, isLoading } = useQuery(
     ["package_info"],
-    async () =>
-      axios
-        .get(`/api/package_info/get`),
+    async () => axios.get("/api/package_info/get"),
     {
       refetchOnWindowFocus: true,
       retry: false,
@@ -78,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">
@@ -93,6 +119,13 @@ export const HeaderMenu = () => {
             >
               New Circuit
             </MenubarItem>
+            <MenubarItem
+              onSelect={() => {
+                handleDebugClick()
+              }}
+            >
+              Debug
+            </MenubarItem>
             <MenubarSeparator />
             <MenubarSub>
               <MenubarSubTrigger>Export</MenubarSubTrigger>
@@ -247,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(
@@ -268,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,
   )
@@ -64,15 +64,15 @@ export const ExampleContentView = () => {
         "relative",
         `h-[${editorHeight}px]`,
         viewMode === "split" &&
-        splitMode === "horizontal" &&
-        "grid grid-cols-2",
+          splitMode === "horizontal" &&
+          "grid grid-cols-2",
         viewMode === "split" && splitMode === "vertical" && "grid grid-rows-2",
       )}
     >
       {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,
+      ],
+    },
+  },
+})