@tscircuit/fake-snippets 0.0.109 → 0.0.111

package/src/lib/react-query-api-failure-tracking.ts

@@ -0,0 +1,148 @@
+import type { QueryKey } from "react-query"
+import { posthog } from "./posthog"
+
+const TARGET_HOSTNAMES = new Set(["api.tscircuit.com"])
+
+type FailureContext = {
+  operationType: "query" | "mutation"
+  queryKey?: QueryKey
+  mutationKey?: unknown
+}
+
+type RedaxiosConfig = {
+  url?: string
+  baseURL?: string
+  method?: string
+}
+
+type ResponseLike = {
+  url?: string
+  status?: number
+  statusText?: string
+  config?: RedaxiosConfig
+}
+
+const isPosthogLoaded = () => Boolean((posthog as any)?.__loaded)
+
+const toUpperCaseMethod = (method?: string) => method?.toUpperCase() ?? "GET"
+
+const resolveAbsoluteUrl = (url?: string, baseURL?: string) => {
+  if (!url) return undefined
+
+  try {
+    if (baseURL) {
+      return new URL(url, baseURL).toString()
+    }
+
+    if (typeof window !== "undefined") {
+      return new URL(url, window.location.origin).toString()
+    }
+
+    return new URL(url).toString()
+  } catch (error) {
+    console.warn("Failed to resolve API failure URL", error)
+    return undefined
+  }
+}
+
+const shouldTrackUrl = (resolvedUrl?: string) => {
+  if (!resolvedUrl) return false
+
+  try {
+    const { hostname } = new URL(resolvedUrl)
+    return TARGET_HOSTNAMES.has(hostname)
+  } catch (error) {
+    console.warn("Failed to parse URL for API failure tracking", error)
+    return false
+  }
+}
+
+const serializeKey = (key?: unknown) => {
+  if (!key) return undefined
+
+  try {
+    return JSON.stringify(key)
+  } catch {
+    return String(key)
+  }
+}
+
+const extractFromResponse = (error: unknown): ResponseLike | null => {
+  if (!error || typeof error !== "object") return null
+
+  const maybeResponse = error as Partial<ResponseLike>
+  if (typeof maybeResponse.status !== "number" || !("url" in maybeResponse)) {
+    return null
+  }
+
+  return {
+    url: maybeResponse.url,
+    status: maybeResponse.status,
+    statusText: maybeResponse.statusText,
+    config: maybeResponse.config,
+  }
+}
+
+const extractFromAxiosError = (error: unknown): ResponseLike | null => {
+  if (!error || typeof error !== "object") return null
+
+  const maybeAxiosError = error as {
+    response?: ResponseLike
+    config?: RedaxiosConfig
+    message?: string
+  }
+
+  if (!maybeAxiosError.response && !maybeAxiosError.config) {
+    return null
+  }
+
+  return {
+    url: maybeAxiosError.response?.url,
+    status: maybeAxiosError.response?.status,
+    statusText: maybeAxiosError.response?.statusText,
+    config: maybeAxiosError.response?.config ?? maybeAxiosError.config,
+  }
+}
+
+const captureApiFailure = (
+  response: ResponseLike,
+  error: unknown,
+  context: FailureContext,
+) => {
+  if (!isPosthogLoaded()) return
+
+  const resolvedUrl =
+    resolveAbsoluteUrl(response.url, response.config?.baseURL) ??
+    resolveAbsoluteUrl(response.config?.url, response.config?.baseURL)
+  if (!shouldTrackUrl(resolvedUrl)) return
+
+  const errorMessage =
+    error instanceof Error
+      ? error.message
+      : typeof error === "string"
+        ? error
+        : undefined
+
+  posthog.capture("api_request_failed", {
+    url: resolvedUrl,
+    method: toUpperCaseMethod(response.config?.method),
+    status: response.status,
+    statusText: response.statusText,
+    errorMessage,
+    operationType: context.operationType,
+    queryKey: serializeKey(context.queryKey),
+    mutationKey: serializeKey(context.mutationKey),
+    environment:
+      typeof window !== "undefined" ? window.location.hostname : undefined,
+  })
+}
+
+export const trackReactQueryApiFailure = (
+  error: unknown,
+  context: FailureContext,
+) => {
+  const response = extractFromResponse(error) ?? extractFromAxiosError(error)
+  if (!response) return
+
+  captureApiFailure(response, error, context)
+}

package/src/lib/sentry.ts

@@ -0,0 +1,14 @@
+import * as Sentry from "@sentry/react"
+
+if (
+  typeof window !== "undefined" &&
+  import.meta.env.VITE_SENTRY_DSN &&
+  !window.location.hostname.includes("localhost") &&
+  !window.location.hostname.includes("127.0.0.1")
+) {
+  Sentry.init({
+    dsn: import.meta.env.VITE_SENTRY_DSN,
+  })
+}
+
+export { Sentry }

package/src/lib/templates/blank-circuit-board-template.ts

@@ -7,15 +7,11 @@ export default () => (
       resistance="1k"
       footprint="0402"
       name="R1"
-      schX={3}
-      pcbX={3}
     />
     <capacitor
       capacitance="1000pF"
       footprint="0402"
       name="C1"
-      schX={-3}
-      pcbX={-3}
     />
     <trace from=".R1 > .pin1" to=".C1 > .pin1" />
   </board>

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,169 @@
+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 ||
+              error?.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