@tscircuit/fake-snippets 0.0.109 → 0.0.110

package/src/lib/ts-lib-cache.ts

@@ -8,6 +8,7 @@ import ts from "typescript"
 
 const TS_LIB_VERSION = "5.6.3"
 const CACHE_PREFIX = `ts-lib-${TS_LIB_VERSION}-`
+const CACHE_TTL = 7 * 24 * 60 * 60 * 1000 // 7 days
 
 export async function loadDefaultLibMap(): Promise<Map<string, string>> {
   const fsMap = new Map<string, string>()
@@ -18,9 +19,23 @@ export async function loadDefaultLibMap(): Promise<Map<string, string>> {
   const missing: string[] = []
 
   for (const lib of libs) {
-    const cached = await get(CACHE_PREFIX + lib)
-    if (cached) {
-      fsMap.set("/" + lib, decompressFromUTF16(cached as string))
+    const cacheKey = CACHE_PREFIX + lib
+    const cached = await get(cacheKey)
+    if (
+      cached &&
+      typeof cached === "object" &&
+      "compressedFileContent" in cached &&
+      "timestamp" in cached
+    ) {
+      const { compressedFileContent, timestamp } = cached as {
+        compressedFileContent: string
+        timestamp: number
+      }
+      if (Date.now() - timestamp < CACHE_TTL) {
+        fsMap.set("/" + lib, decompressFromUTF16(compressedFileContent))
+      } else {
+        missing.push(lib)
+      }
     } else {
       missing.push(lib)
     }
@@ -36,12 +51,112 @@ export async function loadDefaultLibMap(): Promise<Map<string, string>> {
     )
     for (const [filename, content] of fetched) {
       fsMap.set(filename, content)
-      await set(
-        CACHE_PREFIX + filename.replace(/^\//, ""),
-        compressToUTF16(content),
-      )
+      const cacheKey = CACHE_PREFIX + filename.replace(/^\//, "")
+      const compressed = compressToUTF16(content)
+      await set(cacheKey, {
+        compressedFileContent: compressed,
+        timestamp: Date.now(),
+      }).catch(() => {})
     }
   }
 
   return fsMap
 }
+
+export async function fetchWithPackageCaching(
+  input: RequestInfo | URL,
+  init?: RequestInit,
+): Promise<Response> {
+  const url = typeof input === "string" ? input : input.toString()
+
+  // Only cache GET requests for packages
+  if (init?.method && init.method !== "GET") {
+    return fetch(input, init)
+  }
+
+  // Check if this should be cached
+  const shouldCache =
+    url.includes("jsdelivr.net") ||
+    url.includes("unpkg.com") ||
+    url.includes("@types/") ||
+    url.includes("@tsci/")
+
+  if (!shouldCache) {
+    return fetch(input, init)
+  }
+
+  const cacheKey = `package-cache-${url}`
+
+  // Check cache
+  const cached = await get(cacheKey).catch(() => null)
+  if (
+    cached &&
+    typeof cached === "object" &&
+    "compressedFileContent" in cached &&
+    "timestamp" in cached
+  ) {
+    const { compressedFileContent, timestamp } = cached as {
+      compressedFileContent: string
+      timestamp: number
+    }
+    if (Date.now() - timestamp < CACHE_TTL) {
+      return new Response(decompressFromUTF16(compressedFileContent), {
+        status: 200,
+        statusText: "OK",
+      })
+    }
+  }
+
+  // Handle @tsci packages
+  let fetchUrl = url
+  if (
+    url.includes("@tsci/") &&
+    (url.includes("jsdelivr.net") || url.includes("data.jsdelivr.com"))
+  ) {
+    let packagePath = ""
+    if (url.includes("jsdelivr.net")) {
+      packagePath = url.replace("https://cdn.jsdelivr.net/npm/@tsci/", "")
+    } else if (url.includes("/v1/package/resolve/npm/@tsci/")) {
+      const resolveIndex = url.indexOf("/v1/package/resolve/npm/@tsci/")
+      packagePath = url.substring(
+        resolveIndex + "/v1/package/resolve/npm/@tsci/".length,
+      )
+    } else if (url.includes("/v1/package/npm/@tsci/")) {
+      const npmIndex = url.indexOf("/v1/package/npm/@tsci/")
+      packagePath = url.substring(npmIndex + "/v1/package/npm/@tsci/".length)
+    }
+
+    if (packagePath) {
+      // Convert dots to slashes in the package name part (like original logic)
+      const parts = packagePath.split("/")
+      if (parts.length > 0) {
+        parts[0] = parts[0].replace(/\./, "/")
+      }
+      const transformedPackagePath = parts.join("/")
+
+      const apiUrl = import.meta.env.VITE_SNIPPETS_API_URL ?? "/api"
+      const isResolve = url.includes("/resolve/")
+      fetchUrl = `${apiUrl}/snippets/download?jsdelivr_resolve=${isResolve}&jsdelivr_path=${encodeURIComponent(
+        transformedPackagePath,
+      )}`
+    }
+  }
+
+  // Fetch and cache
+  const response = await fetch(fetchUrl, init)
+  if (response.ok) {
+    const text = await response.text()
+    const compressed = compressToUTF16(text)
+    await set(cacheKey, {
+      compressedFileContent: compressed,
+      timestamp: Date.now(),
+    }).catch(() => {})
+    return new Response(text, {
+      status: response.status,
+      statusText: response.statusText,
+      headers: response.headers,
+    })
+  }
+
+  return response
+}

package/src/lib/utils/checkIfManualEditsImported.ts

@@ -5,10 +5,10 @@ export const checkIfManualEditsImported = (
   file: string = "index.tsx",
 ) => {
   if (!files[file]) return false
-  const targetFile = findTargetFile(
-    Object.keys(files).map((f) => ({ path: f, content: files[f] })),
-    null,
-  )
+  const targetFile = findTargetFile({
+    files: Object.keys(files).map((f) => ({ path: f, content: files[f] })),
+    filePathFromUrl: null,
+  })
   if (targetFile && file !== targetFile.path) {
     return false
   }

package/src/lib/utils/findTargetFile.ts

@@ -1,4 +1,6 @@
+import { isHiddenFile } from "@/components/ViewPackagePage/utils/is-hidden-file"
 import { PackageFile } from "@/types/package"
+import { isComponentExported } from "./isComponentExported"
 
 export const findMainEntrypointFileFromTscircuitConfig = (
   files: PackageFile[],
@@ -24,37 +26,70 @@ export const findMainEntrypointFileFromTscircuitConfig = (
   return null
 }
 
-export const findTargetFile = (
-  files: PackageFile[],
-  filePathFromUrl: string | null,
-): PackageFile | null => {
+export const findTargetFile = ({
+  files,
+  filePathFromUrl,
+  fallbackToAnyFile = true,
+}: {
+  files: PackageFile[]
+  filePathFromUrl: string | null
+  fallbackToAnyFile?: boolean
+}): PackageFile | null => {
   if (files.length === 0) {
     return null
   }
 
-  let targetFile: PackageFile | null = null
+  let targetFile: PackageFile | undefined | null = null
+  if (!filePathFromUrl) {
+    files = files.filter((x) => !isHiddenFile(x.path))
+  }
 
   if (filePathFromUrl) {
-    targetFile = files.find((file) => file.path === filePathFromUrl) ?? null
+    const file = files.find((file) => file.path === filePathFromUrl)?.path
+    if (
+      file &&
+      !file.endsWith(".ts") &&
+      !file.endsWith(".tsx") &&
+      fallbackToAnyFile
+    ) {
+      targetFile = files.find((file) => file.path === filePathFromUrl) ?? null
+    } else {
+      const _isComponentExported = isComponentExported(
+        files.find((file) => file.path === filePathFromUrl)?.content || "",
+      )
+      if (_isComponentExported) {
+        targetFile = files.find((file) => file.path === filePathFromUrl) ?? null
+      }
+    }
   }
 
   if (!targetFile) {
     targetFile = findMainEntrypointFileFromTscircuitConfig(files)
   }
+  if (!targetFile) {
+    targetFile =
+      files.find(
+        (file) => file.path === "index.tsx" || file.path === "index.ts",
+      ) ?? null
+  }
 
   if (!targetFile) {
-    targetFile = files.find((file) => file.path === "index.tsx") ?? null
+    targetFile =
+      files.find((file) => file.path.endsWith(".circuit.tsx")) ?? null
   }
 
   if (!targetFile) {
-    targetFile = files.find((file) => file.path.endsWith(".tsx")) ?? null
+    targetFile =
+      files.find(
+        (file) => file.path === "main.tsx" || file.path === "main.ts",
+      ) ?? null
   }
 
   if (!targetFile) {
-    targetFile = files.find((file) => file.path === "index.ts") ?? null
+    targetFile = files.find((file) => file.path.endsWith(".tsx")) ?? null
   }
 
-  if (!targetFile && files[0]) {
+  if (!targetFile && files[0] && fallbackToAnyFile) {
     targetFile = files[0]
   }
 

package/src/lib/utils/isComponentExported.ts

@@ -4,6 +4,7 @@ export const isComponentExported = (code: string) => {
     /export const\s+\w+\s*=/.test(code) ||
     /export default\s+\w+/.test(code) ||
     /export default\s+function\s*(\w*)\s*\(/.test(code) ||
-    /export default\s*\(\s*\)\s*=>/.test(code)
+    /export default\s*\(\s*\)\s*=>/.test(code) ||
+    /export default\s*\(.*?\)\s*=>/.test(code)
   )
 }

package/src/main.tsx

@@ -1,11 +1,12 @@
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 import App from "./App.tsx"
+import "./lib/sentry"
+import "./index.css"
 
 if (typeof window !== "undefined" && !window.__APP_LOADED_AT) {
   window.__APP_LOADED_AT = Date.now()
 }
-import "./index.css"
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

package/src/pages/create-organization.tsx

@@ -0,0 +1,168 @@
+import React, { useState } from "react"
+import { useLocation } from "wouter"
+import { Helmet } from "react-helmet-async"
+import Header from "@/components/Header"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import toast from "react-hot-toast"
+import { useCreateOrgMutation } from "@/hooks/use-create-org-mutation"
+
+interface FormErrors {
+  name?: string
+}
+
+export const CreateOrganizationPage = () => {
+  const [, setLocation] = useLocation()
+
+  const [formData, setFormData] = useState({
+    name: "",
+  })
+
+  const [errors, setErrors] = useState<FormErrors>({})
+  const [isLoading, setIsLoading] = useState(false)
+
+  const { mutate: createOrganization, isLoading: isMutating } =
+    useCreateOrgMutation({
+      onSuccess: (newOrganization) => {
+        toast.success(
+          `Organization "${newOrganization.name || formData.name}" created successfully!`,
+        )
+        setLocation(`/${newOrganization.name || formData.name}`)
+        setIsLoading(false)
+      },
+    })
+
+  const validateForm = (): boolean => {
+    const newErrors: FormErrors = {}
+
+    if (!formData.name) {
+      newErrors.name = "Organization name is required"
+    } else if (formData.name.length > 30) {
+      newErrors.name = "Organization name must be less than 30 characters"
+    } else if (!/^[a-zA-Z0-9-_]+$/.test(formData.name)) {
+      newErrors.name =
+        "Organization name can only contain letters, numbers, hyphens, and underscores"
+    }
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    if (!validateForm()) {
+      return
+    }
+
+    setIsLoading(true)
+    createOrganization(
+      { name: formData.name },
+      {
+        onError: (error: any) => {
+          console.error("Failed to create organization:", error)
+          toast.error(
+            error?.response?.data?.error?.message ||
+              "Failed to create organization. Please try again.",
+          )
+          setIsLoading(false)
+        },
+      },
+    )
+  }
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const name = e.target.value
+    setFormData((prev) => ({ ...prev, name }))
+    if (errors.name) {
+      setErrors({})
+    }
+  }
+
+  const handleCancel = () => {
+    setLocation("/dashboard")
+  }
+
+  return (
+    <div className="min-h-screen bg-white">
+      <Helmet>
+        <title>Create Organization - tscircuit</title>
+        <meta
+          name="description"
+          content="Create a new organization to collaborate with others and manage shared projects."
+        />
+      </Helmet>
+
+      <Header />
+
+      <div className="flex items-center justify-center min-h-[calc(100vh-80px)] px-4 sm:px-6 lg:px-8">
+        <div className="w-full max-w-lg mx-auto">
+          <div className="text-center mb-8">
+            <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-2">
+              Set up your organization
+            </h1>
+            <p className="text-gray-600 text-sm">
+              Tell us about your organization
+            </p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="space-y-2">
+              <Label
+                htmlFor="org-name"
+                className="text-sm font-semibold text-gray-900"
+              >
+                Organization Name
+                <span className="text-red-500">*</span>
+              </Label>
+              <Input
+                spellCheck={false}
+                id="org-handle"
+                type="text"
+                placeholder="tscircuit"
+                value={formData.name}
+                onChange={handleNameChange}
+                className={`h-10 sm:h-11 ${
+                  errors.name
+                    ? "border-red-300 focus:border-red-500 focus:ring-red-500"
+                    : "border-gray-300 focus:border-blue-500 focus:ring-blue-500"
+                }`}
+                disabled={isLoading || isMutating}
+              />
+              {errors.name && (
+                <p className="text-sm text-red-600">{errors.name}</p>
+              )}
+              <p className="text-xs text-gray-500">
+                This will be the name of your organization on tscircuit.
+                <br />
+                Your URL will be:{" "}
+                <span className="font-mono text-gray-700">
+                  tscircuit.com/{formData.name || "orgname"}
+                </span>
+              </p>
+            </div>
+
+            <div>
+              <Button
+                type="submit"
+                disabled={isLoading || isMutating || !formData.name}
+                className="w-full h-10 sm:h-11 bg-blue-600 hover:bg-blue-700 text-white font-medium text-sm sm:text-base"
+              >
+                {isLoading || isMutating ? (
+                  <>
+                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
+                    Creating organization...
+                  </>
+                ) : (
+                  "Create organization"
+                )}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CreateOrganizationPage

package/src/pages/dashboard.tsx

@@ -3,12 +3,11 @@ import { useQuery } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
-import { Package, Snippet } from "fake-snippets-api/lib/db/schema"
-import { Link } from "wouter"
+import { Package } from "fake-snippets-api/lib/db/schema"
 import { Edit2, KeyRound } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { useGlobalStore } from "@/hooks/use-global-store"
-import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import { Link } from "wouter"
 import { PackagesList } from "@/components/PackagesList"
 import { Helmet } from "react-helmet-async"
 import { useSignIn } from "@/hooks/use-sign-in"
@@ -16,9 +15,12 @@ import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import { useConfirmDeletePackageDialog } from "@/components/dialogs/confirm-delete-package-dialog"
 import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
 import { PackageCard } from "@/components/PackageCard"
+import { useListUserOrgs } from "@/hooks/use-list-user-orgs"
+import { OrganizationCard } from "@/components/organization/OrganizationCard"
 
 export const DashboardPage = () => {
   const axios = useAxios()
+  const { data: organizations } = useListUserOrgs()
 
   const currentUser = useGlobalStore((s) => s.session?.github_username)
   const isLoggedIn = Boolean(currentUser)
@@ -99,7 +101,9 @@ export const DashboardPage = () => {
       </Helmet>
       <Header />
       <div className="container mx-auto px-4 py-8 min-h-[80vh]">
-        <h1 className="text-3xl font-bold mb-6">Dashboard</h1>
+        <div className="flex items-center justify-between mb-6">
+          <h1 className="text-3xl font-bold">Dashboard</h1>
+        </div>
         <div className="flex md:flex-row flex-col">
           <div className="md:w-3/4 p-0 md:pr-6">
             {!isLoggedIn ? (
@@ -129,7 +133,7 @@ export const DashboardPage = () => {
                       {myPackages &&
                         myPackages.slice(0, 3).map((pkg) => (
                           <div key={pkg.package_id}>
-                            <PrefetchPageLink
+                            <Link
                               href={`/editor?package_id=${pkg.package_id}`}
                               className="text-blue-600 hover:underline"
                             >
@@ -141,7 +145,7 @@ export const DashboardPage = () => {
                                 {pkg.unscoped_name}
                                 <Edit2 className="w-3 h-3 ml-2" />
                               </Button>
-                            </PrefetchPageLink>
+                            </Link>
                           </div>
                         ))}
                     </div>
@@ -188,6 +192,34 @@ export const DashboardPage = () => {
                     View all packages
                   </Link>
                 )}
+
+                {/* Organizations Section */}
+                {organizations && organizations.length > 0 && (
+                  <div className="mt-8">
+                    <h2 className="text-sm font-bold mb-2 text-gray-700 border-b border-gray-200">
+                      Your Organizations
+                    </h2>
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                      {organizations?.slice(0, 4).map((org: any, i: number) => (
+                        <OrganizationCard
+                          key={i}
+                          organization={org}
+                          withLink={true}
+                          showStats={true}
+                          showMembers={true}
+                        />
+                      ))}
+                    </div>
+                    {organizations && organizations.length > 4 && (
+                      <Link
+                        href="/organizations"
+                        className="text-sm text-blue-600 hover:underline mt-2 inline-block"
+                      >
+                        View all organizations
+                      </Link>
+                    )}
+                  </div>
+                )}
               </>
             )}
           </div>

package/src/pages/datasheet.tsx

@@ -55,7 +55,7 @@ export const DatasheetPage = () => {
         </div>
 
         {datasheetQuery.isLoading ? (
-          <div className="flex flex-col items-center justify-center py-16">
+          <div className="flex flex-col items-center justify-center py-20">
             <Loader2 className="w-10 h-10 animate-spin text-blue-500 mb-4" />
             <h3 className="text-xl font-semibold mb-2">Loading Datasheet...</h3>
             <p className="text-gray-500 max-w-md text-center">

package/src/pages/datasheets.tsx

@@ -5,7 +5,7 @@ import { useCreateDatasheet } from "@/hooks/use-create-datasheet"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import { Input } from "@/components/ui/input"
-import { Search } from "lucide-react"
+import { Loader2, Search } from "lucide-react"
 import { Link, useLocation } from "wouter"
 
 interface DatasheetSummary {
@@ -72,9 +72,9 @@ export const DatasheetsPage: React.FC = () => {
         </div>
 
         {isLoading ? (
-          <div className="text-center py-12 px-4">
+          <div className="text-center py-20 px-4">
             <div className="bg-slate-50 inline-flex rounded-full p-4 mb-4">
-              <Search className="w-8 h-8 text-slate-400" />
+              <Loader2 className="size-8 animate-spin text-slate-400" />
             </div>
             <h3 className="text-xl font-medium text-slate-900 mb-2">
               Loading Datasheets

package/src/pages/editor.tsx

@@ -2,12 +2,10 @@ import { CodeAndPreview } from "@/components/package-port/CodeAndPreview"
 import Footer from "@/components/Footer"
 import Header from "@/components/Header"
 import { Helmet } from "react-helmet-async"
-import { useCurrentPackageId } from "@/hooks/use-current-package-id"
-import { usePackage } from "@/hooks/use-package"
+import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
 
 export const EditorPage = () => {
-  const { packageId } = useCurrentPackageId()
-  const { data: pkg, isLoading, error } = usePackage(packageId)
+  const { packageInfo: pkg, error } = useCurrentPackageInfo()
 
   const projectUrl = pkg
     ? `https://tscircuit.com/${pkg.owner_github_username}/${pkg.unscoped_name}`
@@ -27,12 +25,12 @@ export const EditorPage = () => {
             />
             <meta
               property="og:image"
-              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
+              content={`https://api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
             />
             <meta name="twitter:card" content="summary_large_image" />
             <meta
               name="twitter:image"
-              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
+              content={`https://api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
             />
           </>
         )}

package/src/pages/landing.tsx

@@ -18,7 +18,7 @@ import { useGlobalStore } from "@/hooks/use-global-store"
 import { navigate } from "wouter/use-browser-location"
 import { FAQ } from "@/components/FAQ"
 import { TrendingPackagesCarousel } from "@/components/TrendingPackagesCarousel"
-import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import { Link } from "wouter"
 
 export function LandingPage() {
   const signIn = useSignIn()
@@ -35,8 +35,8 @@ export function LandingPage() {
         <link rel="preconnect" href="https://tscircuit.com" />
         <link rel="dns-prefetch" href="https://tscircuit.com" />
 
-        <link rel="preconnect" href="https://registry-api.tscircuit.com" />
-        <link rel="dns-prefetch" href="https://registry-api.tscircuit.com" />
+        <link rel="preconnect" href="https://api.tscircuit.com" />
+        <link rel="dns-prefetch" href="https://api.tscircuit.com" />
       </Helmet>
       <Header2 />
       <main className="flex-1">
@@ -53,7 +53,7 @@ export function LandingPage() {
                       AI codes electronics with tscircuit
                     </h1>
                     <p className="max-w-[600px] text-muted-foreground md:text-xl">
-                      Build electronics with code, AI, and drag'n'drop tools.
+                      Build electronics with code and AI tools.
                       <br />
                       Render code into schematics, PCBs, 3D, fabrication files,
                       and more.
@@ -72,7 +72,7 @@ export function LandingPage() {
                         Get Started
                       </Button>
                     </a>
-                    <PrefetchPageLink
+                    <Link
                       href="/seveibar/led-water-accelerometer#3d"
                       className="w-[70vw] min-[500px]:w-auto"
                     >
@@ -84,7 +84,7 @@ export function LandingPage() {
                       >
                         Open Online Example
                       </Button>
-                    </PrefetchPageLink>
+                    </Link>
                     <a
                       href="https://github.com/tscircuit/tscircuit"
                       target="_blank"

package/src/pages/latest.tsx

@@ -35,6 +35,9 @@ const LatestPage: React.FC = () => {
     },
     {
       keepPreviousData: true,
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
     },
   )