@tscircuit/fake-snippets 0.0.5 → 0.0.7

package/fake-snippets-api/routes/api/package_files/get.ts

@@ -1,24 +1,24 @@
 import { withRouteSpec } from "fake-snippets-api/lib/with-winter-spec"
 import { z } from "zod"
 import * as ZT from "fake-snippets-api/lib/db/schema"
-import { NotFoundError } from "winterspec/middleware"
+import { getPackageFileIdFromFileDescriptor } from "fake-snippets-api/lib/package_file/get-package-file-id-from-file-descriptor"
 
 const routeSpec = {
   methods: ["POST"],
   auth: "none",
   jsonBody: z
     .object({
-      package_file_id: z.string().uuid(),
+      package_file_id: z.string(),
     })
     .or(
       z.object({
-        package_release_id: z.string().uuid(),
+        package_release_id: z.string(),
         file_path: z.string(),
       }),
     )
     .or(
       z.object({
-        package_id: z.string().uuid(),
+        package_id: z.string(),
         version: z.string().optional(),
         file_path: z.string(),
       }),
@@ -45,8 +45,27 @@ const routeSpec = {
 } as const
 
 export default withRouteSpec(routeSpec)(async (req, ctx) => {
+  const packageFileId = await getPackageFileIdFromFileDescriptor(
+    req.jsonBody,
+    ctx,
+  )
+
+  const packageFile = ctx.db.packageFiles.find(
+    (pf: ZT.PackageFile) => pf.package_file_id === packageFileId,
+  )
+
+  if (!packageFile) {
+    return ctx.error(404, {
+      error_code: "package_file_not_found",
+      message: "Package file not found",
+    })
+  }
+
   return ctx.json({
     ok: true,
-    package_file: undefined,
+    package_file: {
+      ...packageFile,
+      created_at: packageFile.created_at.toString(),
+    },
   })
 })

package/fake-snippets-api/routes/api/package_files/list.ts

@@ -1,13 +1,14 @@
 import { withRouteSpec } from "fake-snippets-api/lib/with-winter-spec"
 import { z } from "zod"
 import * as ZT from "fake-snippets-api/lib/db/schema"
+import { findPackageReleaseId } from "fake-snippets-api/lib/package_release/find-package-release-id"
 
 const routeSpec = {
   methods: ["POST"],
   auth: "none",
   jsonBody: z
     .object({
-      package_release_id: z.string().uuid(),
+      package_release_id: z.string(),
     })
     .or(
       z.object({
@@ -27,34 +28,21 @@ const routeSpec = {
 } as const
 
 export default withRouteSpec(routeSpec)(async (req, ctx) => {
-  // const package_release_id = await findPackageReleaseId(req.jsonBody, ctx)
-  // if (!package_release_id) {
-  //   return ctx.error(404, {
-  //     error_code: "package_release_not_found",
-  //     message: "Package release not found",
-  //   })
-  // }
-  // const package_files = await ctx.db
-  //   .selectFrom("main.package_file")
-  //   .select([
-  //     "package_file_id",
-  //     "package_release_id",
-  //     "content_mimetype",
-  //     "file_path",
-  //     "created_at",
-  //   ])
-  //   .where("package_release_id", "=", package_release_id)
-  //   .where("file_path", "not like", ".tscircuit-internal/%")
-  //   .execute()
-  // return ctx.json({
-  //   ok: true,
-  //   package_files: package_files.map((pf) => ({
-  //     ...pf,
-  //     created_at: pf.created_at.toISOString(),
-  //   })),
-  // })
+  const packageReleaseId = await findPackageReleaseId(req.jsonBody, ctx)
+
+  if (!packageReleaseId) {
+    return ctx.error(404, {
+      error_code: "package_release_not_found",
+      message: "Package release not found",
+    })
+  }
+
+  const packageFiles = ctx.db.packageFiles.filter(
+    (file) => file.package_release_id === packageReleaseId,
+  )
+
   return ctx.json({
     ok: true,
-    package_files: [],
+    package_files: packageFiles,
   })
 })

package/fake-snippets-api/routes/api/package_releases/get.ts

@@ -15,7 +15,27 @@ export default withRouteSpec({
     package_release: zt.packageReleaseSchema,
   }),
 })(async (req, ctx) => {
-  const { package_release_id } = req.jsonBody
+  const { package_release_id, package_name_with_version } = req.jsonBody
+
+  if (package_name_with_version && !package_release_id) {
+    const [packageName, parsedVersion] = package_name_with_version.split("@")
+    const pkg = ctx.db.packages.find((x) => x.name === packageName)
+    const pkgRelease = ctx.db.packageReleases.find((x) => {
+      return x.version == parsedVersion && x.package_id == pkg?.package_id
+    })
+
+    if (!pkgRelease) {
+      return ctx.error(404, {
+        error_code: "package_release_not_found",
+        message: "Package release not found",
+      })
+    }
+
+    return ctx.json({
+      ok: true,
+      package_release: publicMapPackageRelease(pkgRelease),
+    })
+  }
 
   const foundRelease =
     package_release_id && ctx.db.getPackageReleaseById(package_release_id)

package/index.html

@@ -1,23 +1,116 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="robots" content="index, follow, NOODP" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16">
-    <title>tscircuit - Code Electronics with React</title>
-    <meta name="description" content="tscircuit is an open-source electronics design tool that lets you create circuits using React components. Design schematics, generate PCB layouts, export and manufacture PCBs online!" />
-    <meta name="keywords" content="electronic design, PCB design, schematic capture, React components, circuit design, electronics CAD, open source EDA" />
-    <meta property="og:title" content="tscircuit - Design Electronics with React Components" />
-    <meta property="og:description" content="Create electronic circuits using React components. Design schematics, generate PCB layouts, and manufacture custom PCBs with this free open-source tool." />
-    <meta property="og:type" content="website" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="tscircuit - Design Electronics with React Components" />
-    <meta name="twitter:description" content="Create electronic circuits using React components. Free open-source electronics design tool." />
-    <link rel="canonical" href="https://tscircuit.com" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="robots" content="index, follow, NOODP" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16" />
+  <title>tscircuit - Code Electronics with React</title>
+  <meta name="description"
+    content="tscircuit is an open-source electronics design tool that lets you create circuits using React components. Design schematics, generate PCB layouts, export and manufacture PCBs online!" />
+  <meta name="keywords"
+    content="electronic design, PCB design, schematic capture, React components, circuit design, electronics CAD, open source EDA" />
+  <meta property="og:title" content="tscircuit - Design Electronics with React Components" />
+  <meta property="og:description"
+    content="Create electronic circuits using React components. Design schematics, generate PCB layouts, and manufacture custom PCBs with this free open-source tool." />
+  <meta property="og:type" content="website" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="tscircuit - Design Electronics with React Components" />
+  <meta name="twitter:description"
+    content="Create electronic circuits using React components. Free open-source electronics design tool." />
+  <link rel="canonical" href="https://tscircuit.com" />
+
+  <style>
+    /* Loader Styles */
+    .loading-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(255, 255, 255, 0.7);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 9999;
+    }
+
+    .loading-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1em;
+    }
+
+    .loading {
+      background-color: lightgrey;
+      height: 2px;
+      overflow: hidden;
+      position: relative;
+      width: 12em;
+      border-radius: 2px;
+    }
+
+    .loading-bar {
+      animation: side2side 2s ease-in-out infinite;
+      background-color: dodgerblue;
+      height: 100%;
+      position: absolute;
+      width: 45%;
+    }
+
+    @keyframes side2side {
+      0%, 100% {
+        transform: translateX(-50%);
+      }
+      50% {
+        transform: translateX(150%);
+      }
+    }
+  </style>
+
+  <script>
+    window.onload = function() {
+      const loader = document.getElementById("loader");
+      const root = document.getElementById("root");
+
+      // Hide the loader and show the root when the page has fully loaded
+      loader.style.transition = "opacity 0.3s ease";
+      loader.style.opacity = "0"; // Fade out the loader
+      setTimeout(function() {
+        loader.style.display = "none"; // Hide loader completely
+        root.style.visibility = "visible"; // Show the root content
+      }, 300); // Match the opacity transition duration
+    };
+  </script>
+
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=AW-16607843883">
+  </script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+  
+    gtag('config', 'AW-16607843883');
+  </script>
+</head>
+
+<body>
+  <div class="loaderanimation">
+    <div id="loader" class="loading-overlay">
+      <div class="loading-container">
+        <div class="loading">
+          <div class="loading-bar"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div id="root" class="loaderanimation" style="visibility: hidden;"></div> <!-- Initially hidden -->
+
+  <script type="module" src="./src/main.tsx"></script>
+</body>
+
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "repository": {
     "type": "git",
@@ -61,13 +61,13 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@tscircuit/3d-viewer": "^0.0.113",
-    "@tscircuit/footprinter": "^0.0.102",
+    "@tscircuit/3d-viewer": "^0.0.142",
+    "@tscircuit/footprinter": "^0.0.124",
     "@tscircuit/layout": "^0.0.29",
     "@tscircuit/math-utils": "^0.0.10",
     "@tscircuit/mm": "^0.0.8",
     "@tscircuit/pcb-viewer": "^1.11.12",
-    "@tscircuit/props": "^0.0.138",
+    "@tscircuit/props": "^0.0.143",
     "@tscircuit/schematic-viewer": "^1.4.3",
     "@types/file-saver": "^2.0.7",
     "@types/ms": "^0.7.34",
@@ -76,12 +76,12 @@
     "@valtown/codemirror-ts": "^2.2.0",
     "@vercel/analytics": "^1.4.1",
     "change-case": "^5.4.4",
-    "circuit-json": "^0.0.135",
+    "circuit-json": "^0.0.136",
     "circuit-json-to-bom-csv": "^0.0.6",
     "circuit-json-to-gerber": "^0.0.16",
     "circuit-json-to-pnp-csv": "^0.0.6",
+    "circuit-json-to-readable-netlist": "^0.0.8",
     "circuit-json-to-tscircuit": "^0.0.4",
-    "circuit-json-to-readable-netlist": "^0.0.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
@@ -97,7 +97,7 @@
     "immer": "^10.1.1",
     "input-otp": "^1.2.4",
     "jose": "^5.9.3",
-    "jscad-electronics": "^0.0.24",
+    "jscad-electronics": "^0.0.25",
     "jszip": "^3.10.1",
     "kicad-converter": "^0.0.16",
     "lucide-react": "^0.445.0",
@@ -130,9 +130,9 @@
     "@babel/standalone": "^7.26.2",
     "@biomejs/biome": "^1.9.2",
     "@playwright/test": "^1.48.0",
-    "@tscircuit/core": "^0.0.296",
+    "@tscircuit/core": "^0.0.315",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "^0.0.139",
+    "@tscircuit/runframe": "^0.0.193",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",

package/playwright-tests/profile-page.spec.ts

@@ -0,0 +1,59 @@
+import { test, expect } from "@playwright/test"
+
+test("test delete functionality in profile", async ({ page }) => {
+  // Go to profile page
+  await page.goto("http://localhost:5177/testuser")
+
+  // Login
+  await page.getByRole("button", { name: "Log in" }).click()
+
+  // Wait for snippets grid to load
+  await page.waitForSelector(".grid")
+  await page.waitForLoadState("networkidle")
+
+  // Verify initial snippet exists
+  const snippetTitle = page.locator(".text-md.font-semibold").first()
+  const snippetName = await snippetTitle.textContent()
+  expect(await snippetTitle.isVisible()).toBe(true)
+
+  // Take screenshot of initial state
+  await expect(page).toHaveScreenshot("profile-page-before-delete.png")
+
+  // Open dropdown menu
+  await page.locator(".lucide-ellipsis-vertical").first().click()
+  await page.waitForTimeout(1000)
+
+  // Take screenshot with dropdown open
+  await expect(page).toHaveScreenshot("profile-page-dropdown-open.png")
+
+  // Click delete option
+  await page.getByRole("menuitem", { name: "Delete Snippet" }).click()
+
+  // Wait for and verify confirmation dialog
+  const dialog = page.locator('[role="dialog"]')
+  await expect(dialog).toBeVisible()
+  const dialogText = await dialog.textContent()
+  expect(dialogText).toContain(
+    `Are you sure you want to delete the snippet "${snippetName}"?`,
+  )
+
+  // Take screenshot of delete dialog
+  await expect(page).toHaveScreenshot("profile-page-delete-dialog.png")
+
+  // Confirm delete
+  await page.getByRole("button", { name: "Delete" }).click()
+
+  // Verify success toast appears
+  await page.waitForSelector('div:has-text("Successfully deleted")', {
+    state: "visible",
+  })
+
+  // Wait for page to update
+  await page.waitForLoadState("networkidle")
+
+  // Verify snippet is removed
+  const remainingSnippets = await page
+    .locator(`.text-md.font-semibold:has-text("${snippetName}")`)
+    .count()
+  expect(remainingSnippets).toBe(0)
+})

package/scripts/generate-image-sizes.ts

@@ -7,7 +7,6 @@ const INPUT_DIR = "src/assets/originals"
 const OUTPUT_DIR = "public/assets"
 
 async function generateImageSizes() {
-  console.log("one")
   if (!fs.existsSync(INPUT_DIR)) {
     fs.mkdirSync(INPUT_DIR, { recursive: true })
   }

package/scripts/generate_bundle_stats.js

@@ -82,11 +82,22 @@ function compareSizes(prData, mainData, dependencies) {
     const mainSize = mainStats.depStats[dep]?.size || 0
     const diff = prSize - mainSize
 
+    let percentChange = "N/A"
+    if (prSize === 0 && mainSize > 0) {
+      percentChange = "Removed"
+    } else if (mainSize !== 0) {
+      percentChange = (diff / mainSize) * 100
+    } else if (prSize > 0 && mainSize === 0) {
+      percentChange = "Added"
+    } else {
+      percentChange = 0
+    }
+
     diffStats[dep] = {
       before: mainSize,
       after: prSize,
       diff,
-      percentChange: (diff / mainSize) * 100 || 0,
+      percentChange,
     }
   })
 
@@ -95,7 +106,10 @@ function compareSizes(prData, mainData, dependencies) {
     totalAfter: prStats.totalSize,
     totalDiff: prStats.totalSize - mainStats.totalSize,
     totalPercentChange:
-      ((prStats.totalSize - mainStats.totalSize) / mainStats.totalSize) * 100,
+      mainStats.totalSize !== 0
+        ? ((prStats.totalSize - mainStats.totalSize) / mainStats.totalSize) *
+          100
+        : 0,
     diffStats,
   }
 }
@@ -107,7 +121,7 @@ function generateDiffMarkdown(prData, mainData, dependencies) {
   markdown += `## Total Bundle Size\n\n`
   markdown += `- Before: **${formatBytes(comparison.totalBefore)}**\n`
   markdown += `- After: **${formatBytes(comparison.totalAfter)}**\n`
-  markdown += `- Change: ${totalDiffSymbol} **${formatBytes(Math.abs(comparison.totalDiff))}** (${comparison.totalPercentChange.toFixed(2)}%)\n\n`
+  markdown += `- Change: ${totalDiffSymbol} **${formatBytes(Math.abs(comparison.totalDiff))}** (${isNaN(comparison.totalPercentChange) ? "N/A" : comparison.totalPercentChange.toFixed(2)}%)\n\n`
 
   markdown += `## Diff\n\n`
 
@@ -117,7 +131,10 @@ function generateDiffMarkdown(prData, mainData, dependencies) {
 
   const significantChanges = sortedDiffs.filter(
     ([, stats]) =>
-      Math.abs(stats.percentChange) > 1 || Math.abs(stats.diff) > 1024,
+      (typeof stats.percentChange === "number" &&
+        (Math.abs(stats.percentChange) > 1 || Math.abs(stats.diff) > 1024)) ||
+      stats.percentChange === "Added" ||
+      stats.percentChange === "Removed",
   )
 
   if (significantChanges.length > 0) {
@@ -127,8 +144,7 @@ function generateDiffMarkdown(prData, mainData, dependencies) {
     for (const [name, stats] of significantChanges) {
       const version = dependencies[name]
       const symbol = stats.diff > 0 ? "📈" : "📉"
-      markdown += `| ${name}@${version} | ${formatBytes(stats.before)} | ${formatBytes(stats.after)} | ${symbol} ${formatBytes(Math.abs(stats.diff))} |     
- ${stats.percentChange.toFixed(2)}% |\n`
+      markdown += `| ${name}@${version} | ${formatBytes(stats.before)} | ${formatBytes(stats.after)} | ${symbol} ${formatBytes(Math.abs(stats.diff))} | ${typeof stats.percentChange === "number" ? stats.percentChange.toFixed(2) + "%" : stats.percentChange} |\n`
     }
   } else {
     markdown += "No significant changes in bundle size.\n"

package/src/App.tsx

@@ -5,9 +5,20 @@ import "./components/CmdKMenu"
 import { ContextProviders } from "./ContextProviders"
 import React from "react"
 
+const FullPageLoader = () => (
+  <div className="fixed inset-0 flex items-center justify-center bg-white z-50">
+    <div className="w-48">
+      <div className="loading">
+        <div className="loading-bar"></div>
+      </div>
+    </div>
+  </div>
+)
+
 const lazyImport = (importFn: () => Promise<any>) =>
   lazy<ComponentType<any>>(async () => {
     try {
+      await new Promise((resolve) => setTimeout(resolve, 500))
       const module = await importFn()
 
       if (module.default) {
@@ -85,7 +96,7 @@ function App() {
   return (
     <ContextProviders>
       <ErrorBoundary>
-        <Suspense fallback={<div>Loading...</div>}>
+        <Suspense fallback={<FullPageLoader />}>
           <Switch>
             <Route path="/" component={LandingPage} />
             <Route path="/editor" component={EditorPage} />

package/src/components/AiChatInterface.tsx

@@ -165,6 +165,14 @@ export default function AIChatInterface({
         {messages.length === 0 && isLoggedIn && (
           <div className="text-gray-500 text-xl text-center pt-[30vh] flex flex-col items-center">
             <div>Submit a prompt to {snippet ? "edit!" : "get started!"}</div>
+            <div className="mt-2">
+              This is our legacy AI chat interface. For a better experience,
+              please use{" "}
+              <PrefetchPageLink href="https://chat.tscircuit.com">
+                chat.tscircuit.com
+              </PrefetchPageLink>
+              .
+            </div>
             <div className="text-6xl mt-4">↓</div>
           </div>
         )}

package/src/components/Analytics.tsx

@@ -3,7 +3,7 @@ import posthog from "posthog-js"
 import CookieConsent from "react-cookie-consent"
 
 posthog.init("phc_htd8AQjSfVEsFCLQMAiUooG4Q0DKBCjqYuQglc9V3Wo", {
-  api_host: "https://us.i.posthog.com",
+  api_host: "https://postpig.tscircuit.com",
   person_profiles: "always",
 })
 

package/src/components/CodeAndPreview.tsx

@@ -166,6 +166,15 @@ export function CodeAndPreview({ snippet }: Props) {
   const [lastSavedAt, setLastSavedAt] = useState(Date.now())
 
   const handleSave = async () => {
+    if (hasUnrunChanges) {
+      toast({
+        title: "Warning",
+        description: "You must run the snippet before saving your changes.",
+        variant: "destructive",
+      })
+      return
+    }
+
     setLastSavedAt(Date.now())
     if (snippet) {
       updateSnippetMutation.mutate()
@@ -197,8 +206,6 @@ export function CodeAndPreview({ snippet }: Props) {
       ...(code.match(/export const (\w+) ?=/)?.slice(1) ?? []),
     ]
 
-    console.log(possibleExportNames)
-
     const exportName = possibleExportNames[0]
 
     let entrypointContent: string
@@ -224,7 +231,6 @@ export function CodeAndPreview({ snippet }: Props) {
       "main.tsx": entrypointContent,
     }
   }, [code, manualEditsFileContent])
-  console.log(fsMap)
 
   if (!snippet && (urlParams.snippet_id || urlParams.should_create_snippet)) {
     return (

package/src/components/CreateNewSnippetWithAiHero.tsx

@@ -12,12 +12,16 @@ export function CreateNewSnippetWithAiHero() {
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
     if (inputValue.trim()) {
-      navigate(`/ai?initial_prompt=${encodeURIComponent(inputValue)}`)
+      navigate(
+        `https://chat.tscircuit.com?initial_prompt=${encodeURIComponent(inputValue)}`,
+      )
     }
   }
 
   const handleQuickPrompt = (prompt: string) => {
-    navigate(`/ai?initial_prompt=${encodeURIComponent(prompt)}`)
+    navigate(
+      `https://chat.tscircuit.com?initial_prompt=${encodeURIComponent(prompt)}`,
+    )
   }
 
   return (

package/src/components/EditorNav.tsx

@@ -48,6 +48,7 @@ import { SnippetLink } from "./SnippetLink"
 import { TypeBadge } from "./TypeBadge"
 import { useUpdateDescriptionDialog } from "./dialogs/edit-description-dialog"
 import { useForkSnippetMutation } from "@/hooks/useForkSnippetMutation"
+import tscircuitCorePkg from "@tscircuit/core/package.json"
 
 export default function EditorNav({
   circuitJson,
@@ -367,6 +368,9 @@ export default function EditorNav({
                 <Trash2 className="mr-2 h-3 w-3" />
                 Delete Snippet
               </DropdownMenuItem>
+              <DropdownMenuItem className="text-xs text-gray-500" disabled>
+                @tscircuit/core@{tscircuitCorePkg.version}
+              </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
           <Button

package/src/components/Footer.tsx

@@ -26,7 +26,7 @@ export default function Footer() {
                 { name: "Home", href: "/" },
                 { name: "Dashboard", href: "/dashboard" },
                 { name: "Editor", href: "/editor" },
-                { name: "Create with AI", href: "/ai" },
+                { name: "Create with AI", href: "https://chat.tscircuit.com" },
                 {
                   name: "My Profile",
                   href: `/${session?.github_username}`,