@tscircuit/fake-snippets 0.0.107 → 0.0.109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.107",
+  "version": "0.0.109",
   "type": "module",
   "repository": {
     "type": "git",
@@ -75,6 +75,7 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
+    "@resvg/resvg-wasm": "^2.6.2",
     "@tailwindcss/typography": "^0.5.16",
     "@tscircuit/3d-viewer": "^0.0.303",
     "@tscircuit/assembly-viewer": "^0.0.1",
@@ -84,8 +85,9 @@
     "@tscircuit/mm": "^0.0.8",
     "@tscircuit/pcb-viewer": "^1.11.194",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "0.0.764",
+    "@tscircuit/runframe": "^0.0.781",
     "@tscircuit/schematic-viewer": "^2.0.21",
+    "@tscircuit/simple-3d-svg": "^0.0.41",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",
@@ -93,7 +95,6 @@
     "@types/md5": "^2.3.5",
     "@types/ms": "^0.7.34",
     "@types/node": "^22.13.0",
-    "@types/prismjs": "^1.26.4",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
@@ -104,11 +105,12 @@
     "@vercel/analytics": "^1.4.1",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
-    "change-case": "^5.4.4",
     "circuit-json-to-bom-csv": "^0.0.7",
     "circuit-json-to-gerber": "^0.0.29",
+    "circuit-json-to-gltf": "^0.0.4",
     "circuit-json-to-pnp-csv": "^0.0.7",
     "circuit-json-to-readable-netlist": "^0.0.13",
+    "circuit-json-to-simple-3d": "^0.0.6",
     "circuit-json-to-spice": "^0.0.6",
     "circuit-json-to-tscircuit": "^0.0.4",
     "circuit-to-svg": "^0.0.167",
@@ -117,8 +119,6 @@
     "cmdk": "^1.0.4",
     "codemirror": "^6.0.1",
     "codemirror-copilot": "^0.0.7",
-    "country-list": "^2.3.0",
-    "date-fns": "^4.1.0",
     "dotenv": "^16.5.0",
     "dsn-converter": "^0.0.60",
     "easyeda": "^0.0.203",
@@ -131,7 +131,6 @@
     "he": "^1.2.0",
     "idb-keyval": "^6.2.2",
     "immer": "^10.1.1",
-    "input-otp": "^1.2.4",
     "javascript-time-ago": "^2.5.11",
     "jose": "^5.9.3",
     "jscad-electronics": "^0.0.25",
@@ -147,7 +146,6 @@
     "openai": "^5.6.0",
     "postcss": "^8.4.47",
     "posthog-js": "^1.203.2",
-    "prismjs": "^1.29.0",
     "prompts": "^2.4.2",
     "react": "^18.3.1",
     "react-cookie-consent": "^9.0.0",
@@ -172,6 +170,7 @@
     "sitemap": "^8.0.0",
     "sonner": "^1.5.0",
     "states-us": "^1.1.1",
+    "svgo": "^4.0.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.13",
     "tailwindcss-animate": "^1.0.7",

package/src/App.tsx

@@ -64,7 +64,6 @@ const MyOrdersPage = lazyImport(() => import("@/pages/my-orders"))
 const LatestPage = lazyImport(() => import("@/pages/latest"))
 const QuickstartPage = lazyImport(() => import("@/pages/quickstart"))
 const SearchPage = lazyImport(() => import("@/pages/search"))
-const SettingsPage = lazyImport(() => import("@/pages/settings"))
 const UserProfilePage = lazyImport(() => import("@/pages/user-profile"))
 const DevLoginPage = lazyImport(() => import("@/pages/dev-login"))
 const ViewPackagePage = lazyImport(() => import("@/pages/view-package"))
@@ -82,7 +81,7 @@ const PackageEditorPage = lazyImport(async () => {
 const ReleasesPage = lazyImport(() => import("@/pages/releases"))
 const ReleaseDetailPage = lazyImport(() => import("@/pages/release-detail"))
 const ReleaseBuildsPage = lazyImport(() => import("@/pages/release-builds"))
-const PreviewBuildPage = lazyImport(() => import("@/pages/preview-build"))
+const ReleasePreviewPage = lazyImport(() => import("@/pages/preview-release"))
 
 class ErrorBoundary extends React.Component<
   { children: React.ReactNode },
@@ -109,7 +108,7 @@ class ErrorBoundary extends React.Component<
       )
     ) {
       const loadedAt = window.__APP_LOADED_AT || Date.now()
-      if (Date.now() - loadedAt >= 10_000) {
+      if (Date.now() - loadedAt >= 180_000) {
         this.performReload()
       }
     }
@@ -144,6 +143,7 @@ class ErrorBoundary extends React.Component<
     this.setState({ reloading: true })
     this.reloadTimeout = window.setTimeout(() => {
       if (window?.location.href.includes("localhost:")) return
+      if (window?.location.href.includes("127.0.0.1:")) return
       window.location.reload()
     }, 500)
   }
@@ -152,10 +152,12 @@ class ErrorBoundary extends React.Component<
     this.cleanup() // Clean up any existing handlers
 
     this.visibilityHandler = () => {
+      const loadedAt = window.__APP_LOADED_AT || Date.now()
       if (
         document.visibilityState === "visible" &&
         this.state.hasError &&
-        !this.state.reloading
+        !this.state.reloading &&
+        Date.now() - loadedAt >= 180_000
       ) {
         this.performReload()
       }
@@ -249,7 +251,6 @@ function App() {
             <Route path="/quickstart" component={QuickstartPage} />
             <Route path="/dashboard" component={DashboardPage} />
             <Route path="/latest" component={LatestPage} />
-            <Route path="/settings" component={SettingsPage} />
             <Route path="/search" component={SearchPage} />
             <Route path="/trending" component={TrendingPage} />
             <Route path="/datasheets" component={DatasheetsPage} />
@@ -259,13 +260,17 @@ function App() {
             <Route path="/dev-login" component={DevLoginPage} />
             <Route path="/:username" component={UserProfilePage} />
             <Route
-              path="/:author/:packageName/release/:releaseId/builds"
+              path="/:author/:packageName/releases/:releaseId/builds"
               component={ReleaseBuildsPage}
             />
             <Route
-              path="/:author/:packageName/release/:releaseId"
+              path="/:author/:packageName/releases/:releaseId"
               component={ReleaseDetailPage}
             />
+            <Route
+              path="/:author/:packageName/releases/:packageReleaseId/preview"
+              component={ReleasePreviewPage}
+            />
             <Route
               path="/:author/:packageName/releases/:packageReleaseId"
               component={ReleaseDetailPage}
@@ -274,10 +279,6 @@ function App() {
               path="/:author/:packageName/releases"
               component={ReleasesPage}
             />
-            <Route
-              path="/build/:buildId/preview"
-              component={PreviewBuildPage}
-            />
             <Route path="/:author/:packageName" component={ViewPackagePage} />
             <Route
               path="/:author/:packageName/builds"

package/src/components/DownloadButtonAndMenu.tsx

@@ -18,18 +18,22 @@ import { usePcbDownloadDialog } from "@/components/dialogs/pcb-download-dialog"
 import { downloadKicadFiles } from "@/lib/download-fns/download-kicad-files"
 import { AnyCircuitElement } from "circuit-json"
 import { ChevronDown, Download, Hammer } from "lucide-react"
-import { downloadGltf } from "@/lib/download-fns/download-gltf"
+import { downloadGltfFromCircuitJson } from "@/lib/download-fns/download-gltf-from-circuit-json"
 import { downloadPngImage } from "@/lib/download-fns/download-png-utils"
 import { ImageFormat } from "@/lib/download-fns/download-circuit-png"
 import { CubeIcon } from "@radix-ui/react-icons"
+import { useState } from "react"
+import { useAxios } from "@/hooks/use-axios"
+import { useCurrentPackageId } from "@/hooks/use-current-package-id"
 
 interface DownloadButtonAndMenuProps {
   className?: string
   unscopedName?: string
   author?: string
-  circuitJson?: AnyCircuitElement[] | null
+  hasCircuitJson?: boolean
   desiredImageType?: string
   offerMultipleImageFormats?: boolean
+  circuitJson?: AnyCircuitElement[] | null
 }
 
 export function DownloadButtonAndMenu({
@@ -37,14 +41,52 @@ export function DownloadButtonAndMenu({
   unscopedName,
   author,
   desiredImageType = "pcb",
-  circuitJson,
+  hasCircuitJson,
   offerMultipleImageFormats = false,
+  circuitJson,
 }: DownloadButtonAndMenuProps) {
   const notImplemented = useNotImplementedToast()
   const { Dialog: PcbDownloadDialog, openDialog: openPcbDownloadDialog } =
     usePcbDownloadDialog()
+  const axios = useAxios()
+  const { packageId } = useCurrentPackageId()
+  const [fetchedCircuitJson, setFetchedCircuitJson] = useState<
+    AnyCircuitElement[] | null
+  >(null)
+  const [isFetchingCircuitJson, setIsFetchingCircuitJson] = useState(false)
+
+  const canDownload = Boolean(
+    hasCircuitJson || (circuitJson && circuitJson.length),
+  )
+
+  const getCircuitJson = async (): Promise<AnyCircuitElement[]> => {
+    if (circuitJson && circuitJson.length) return circuitJson
+    if (fetchedCircuitJson && fetchedCircuitJson.length)
+      return fetchedCircuitJson
+    setIsFetchingCircuitJson(true)
+    try {
+      const { data } = await axios.post("/package_files/get", {
+        package_id: packageId,
+        file_path: "dist/circuit.json",
+      })
+      const content = data?.package_file?.content_text
+      if (!content) throw new Error("Circuit JSON not found")
+      const parsed = JSON.parse(content)
+      setFetchedCircuitJson(parsed)
+      return parsed
+    } catch (error: any) {
+      toast({
+        title: "Failed to fetch Circuit JSON",
+        description: error?.message || error?.toString?.() || "Unknown error",
+        variant: "destructive",
+      })
+      throw error
+    } finally {
+      setIsFetchingCircuitJson(false)
+    }
+  }
 
-  if (!circuitJson) {
+  if (!canDownload) {
     return (
       <div className={className}>
         <Button
@@ -76,11 +118,9 @@ export function DownloadButtonAndMenu({
         <DropdownMenuContent className="!z-[101]">
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadCircuitJson(
-                circuitJson,
-                unscopedName || "circuit" + ".json",
-              )
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadCircuitJson(cj, unscopedName || "circuit" + ".json")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -93,7 +133,12 @@ export function DownloadButtonAndMenu({
             className="text-xs"
             onClick={async () => {
               try {
-                await downloadGltf(unscopedName || "circuit")
+                const cj = await getCircuitJson()
+                await downloadGltfFromCircuitJson(
+                  cj,
+                  unscopedName || "circuit",
+                  { format: "glb", boardTextureResolution: 2048 },
+                )
               } catch (error: any) {
                 toast({
                   title: "Error Downloading 3D Model",
@@ -112,8 +157,34 @@ export function DownloadButtonAndMenu({
           <DropdownMenuItem
             className="text-xs"
             onClick={async () => {
+              try {
+                const cj = await getCircuitJson()
+                await downloadGltfFromCircuitJson(
+                  cj,
+                  unscopedName || "circuit",
+                  { format: "gltf", boardTextureResolution: 2048 },
+                )
+              } catch (error: any) {
+                toast({
+                  title: "Error Downloading 3D Model (GLTF)",
+                  description: error.toString(),
+                  variant: "destructive",
+                })
+              }
+            }}
+          >
+            <CubeIcon className="mr-1 h-3 w-3" />
+            <span className="flex-grow  mr-6">3D Model</span>
+            <span className="text-[0.6rem] bg-green-500 opacity-80 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
+              gltf
+            </span>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            className="text-xs"
+            onClick={async () => {
+              const cj = await getCircuitJson()
               await downloadFabricationFiles({
-                circuitJson,
+                circuitJson: cj,
                 snippetUnscopedName: unscopedName || "snippet",
               }).catch((error) => {
                 console.error(error)
@@ -144,8 +215,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadKicadFiles(circuitJson, unscopedName || "kicad_project")
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadKicadFiles(cj, unscopedName || "kicad_project")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -157,8 +229,9 @@ export function DownloadButtonAndMenu({
 
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadSchematicSvg(circuitJson, unscopedName || "circuit")
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadSchematicSvg(cj, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -169,8 +242,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadAssemblySvg(circuitJson, unscopedName || "circuit")
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadAssemblySvg(cj, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -181,7 +255,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              setFetchedCircuitJson(cj)
               openPcbDownloadDialog()
             }}
           >
@@ -193,8 +269,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadDsnFile(circuitJson, unscopedName || "circuit")
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadDsnFile(cj, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -205,8 +282,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onClick={() => {
-              downloadReadableNetlist(circuitJson, unscopedName || "circuit")
+            onClick={async () => {
+              const cj = await getCircuitJson()
+              downloadReadableNetlist(cj, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -217,8 +295,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadSpiceFile(circuitJson, unscopedName || "circuit")
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadSpiceFile(cj, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -229,8 +308,9 @@ export function DownloadButtonAndMenu({
           </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
-            onSelect={() => {
-              downloadSimpleRouteJson(circuitJson, unscopedName || "circuit")
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadSimpleRouteJson(cj, unscopedName || "circuit")
             }}
           >
             <Download className="mr-1 h-3 w-3" />
@@ -243,7 +323,7 @@ export function DownloadButtonAndMenu({
           {!offerMultipleImageFormats && (
             <DropdownMenuItem
               className="text-xs"
-              onClick={() => {
+              onClick={async () => {
                 const desiredImageFormat = [
                   "pcb",
                   "schematic",
@@ -252,8 +332,9 @@ export function DownloadButtonAndMenu({
                 ].includes(desiredImageType)
                   ? desiredImageType
                   : "pcb"
+                const cj = await getCircuitJson()
                 downloadPngImage({
-                  circuitJson,
+                  circuitJson: cj,
                   unscopedName,
                   author,
                   format: desiredImageFormat as ImageFormat,
@@ -271,9 +352,9 @@ export function DownloadButtonAndMenu({
             <>
               <DropdownMenuItem
                 className="text-xs"
-                onClick={() =>
+                onClick={async () =>
                   downloadPngImage({
-                    circuitJson,
+                    circuitJson: await getCircuitJson(),
                     unscopedName,
                     author,
                     format: "schematic",
@@ -288,9 +369,9 @@ export function DownloadButtonAndMenu({
               </DropdownMenuItem>
               <DropdownMenuItem
                 className="text-xs"
-                onClick={() =>
+                onClick={async () =>
                   downloadPngImage({
-                    circuitJson,
+                    circuitJson: await getCircuitJson(),
                     unscopedName,
                     author,
                     format: "pcb",
@@ -305,9 +386,9 @@ export function DownloadButtonAndMenu({
               </DropdownMenuItem>
               <DropdownMenuItem
                 className="text-xs"
-                onClick={() =>
+                onClick={async () =>
                   downloadPngImage({
-                    circuitJson,
+                    circuitJson: await getCircuitJson(),
                     unscopedName,
                     author,
                     format: "assembly",
@@ -320,12 +401,29 @@ export function DownloadButtonAndMenu({
                   png
                 </span>
               </DropdownMenuItem>
+              <DropdownMenuItem
+                className="text-xs"
+                onClick={async () =>
+                  downloadPngImage({
+                    circuitJson: await getCircuitJson(),
+                    unscopedName,
+                    author,
+                    format: "3d",
+                  })
+                }
+              >
+                <Download className="mr-1 h-3 w-3" />
+                <span className="flex-grow mr-6">3D PNG</span>
+                <span className="text-[0.6rem] opacity-80 bg-teal-600 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
+                  png
+                </span>
+              </DropdownMenuItem>
             </>
           )}
         </DropdownMenuContent>
       </DropdownMenu>
       <PcbDownloadDialog
-        circuitJson={circuitJson}
+        circuitJson={fetchedCircuitJson || circuitJson || []}
         fileName={unscopedName || "circuit"}
       />
     </div>