@tscircuit/fake-snippets 0.0.109 → 0.0.110

package/src/hooks/use-warn-user-on-page-change.ts

@@ -1,23 +1,90 @@
-import { useEffect } from "react"
+import { useEffect, useRef } from "react"
+
 export default function useWarnUserOnPageChange({
   hasUnsavedChanges,
+  isPackageThere,
 }: {
   hasUnsavedChanges: boolean
+  isPackageThere: Boolean
 }) {
+  const originalTitleRef = useRef<string>("")
+
   useEffect(() => {
+    if (!hasUnsavedChanges || !originalTitleRef.current) {
+      originalTitleRef.current = document.title.replace(/^⚠️\s*/, "")
+    }
+
     const handleBeforeUnload = (event: BeforeUnloadEvent) => {
       if (hasUnsavedChanges) {
+        const message =
+          "You have unsaved changes. Are you sure you want to leave?"
         event.preventDefault()
-        event.returnValue = "" // Shows the confirmation dialog on reload or close if there are unsaved changes
+        event.returnValue = message
+        return message
+      }
+    }
+
+    const handleVisibilityChange = () => {
+      if (document.hidden && hasUnsavedChanges) {
+        if (!document.title.startsWith("⚠️")) {
+          document.title = "⚠️ " + originalTitleRef.current
+        }
+      } else if (!document.hidden) {
+        document.title = originalTitleRef.current
+      }
+    }
+
+    const handlePopState = (event: PopStateEvent) => {
+      if (hasUnsavedChanges && isPackageThere) {
+        const shouldLeave = window.confirm(
+          "You have unsaved changes. Are you sure you want to leave this page?",
+        )
+        if (!shouldLeave) {
+          window.history.pushState(null, "", window.location.href)
+        }
+      }
+    }
+
+    const handleLinkClick = (event: MouseEvent) => {
+      if (!hasUnsavedChanges) return
+
+      const target = event.target as HTMLElement
+      const link = target.closest("a[href]") as HTMLAnchorElement
+
+      if (link && link.href) {
+        try {
+          const linkUrl = new URL(link.href)
+          const currentUrl = new URL(window.location.href)
+
+          if (linkUrl.origin === currentUrl.origin) {
+            event.preventDefault()
+            event.stopPropagation()
+
+            const shouldLeave = window.confirm(
+              "You have unsaved changes. Are you sure you want to leave this page?",
+            )
+
+            if (shouldLeave) {
+              window.location.href = link.href
+            }
+          }
+        } catch (error) {
+          console.warn("Failed to parse link URL:", error)
+        }
       }
     }
 
-    // Attach event listeners
     window.addEventListener("beforeunload", handleBeforeUnload)
+    document.addEventListener("visibilitychange", handleVisibilityChange)
+    window.addEventListener("popstate", handlePopState)
+    document.addEventListener("click", handleLinkClick, true)
 
-    // Cleanup event listeners on component unmount
     return () => {
       window.removeEventListener("beforeunload", handleBeforeUnload)
+      document.removeEventListener("visibilitychange", handleVisibilityChange)
+      window.removeEventListener("popstate", handlePopState)
+      document.removeEventListener("click", handleLinkClick, true)
+      document.title = originalTitleRef.current
     }
   }, [hasUnsavedChanges])
 }

package/src/hooks/useFileManagement.ts

@@ -73,11 +73,7 @@ export function useFileManagement({
     totalFilesCount,
     loadedFilesCount,
     isPriorityFileFetched,
-  } = useOptimizedPackageFilesLoader(
-    currentPackage,
-    fileChosen,
-    urlParams.package_id,
-  )
+  } = useOptimizedPackageFilesLoader(currentPackage, fileChosen)
 
   const { data: packageFilesMeta, isLoading: isLoadingPackageFiles } =
     usePackageFiles(currentPackage?.latest_package_release_id)
@@ -148,7 +144,10 @@ export function useFileManagement({
             content: String(content),
           }),
         )
-        const targetFile = findTargetFile(filesFromUrl, fileChosen)
+        const targetFile = findTargetFile({
+          files: filesFromUrl,
+          filePathFromUrl: fileChosen,
+        })
         setLocalFiles(filesFromUrl)
         setInitialFiles([])
         setCurrentFile(targetFile?.path || filesFromUrl[0]?.path || null)
@@ -208,7 +207,10 @@ export function useFileManagement({
       if (fileChosen) {
         const targetFile =
           packageFilesWithContent.find((f) => f.path === fileChosen) ||
-          findTargetFile(packageFilesWithContent, fileChosen)
+          findTargetFile({
+            files: packageFilesWithContent,
+            filePathFromUrl: fileChosen,
+          })
         if (targetFile) {
           setCurrentFile((prevCurrentFile) => {
             return targetFile.path !== prevCurrentFile
@@ -221,10 +223,10 @@ export function useFileManagement({
           if (!prevCurrentFile) {
             // Wait for priority file to load before making selection to avoid flicker
             // Only select if we have a good candidate (tsx/ts file) or priority file isn't loading
-            const targetFile = findTargetFile(
-              packageFilesWithContent,
-              fileChosen,
-            )
+            const targetFile = findTargetFile({
+              files: packageFilesWithContent,
+              filePathFromUrl: fileChosen,
+            })
             // Only consider it a "good enough" candidate if it's index.tsx
             // Otherwise, wait for the actual priority file (index.tsx) to load
             const isTopPriorityFile =
@@ -250,8 +252,22 @@ export function useFileManagement({
   ])
 
   const isLoading = useMemo(() => {
-    return isPriorityLoading || isLoadingPackageFiles
-  }, [isPriorityLoading, isLoadingPackageFiles])
+    const waitingForPriorityFile =
+      Boolean(urlParams.package_id) && !isPriorityFileFetched
+
+    const hasPackageWithFilesButNoneLoaded =
+      Boolean(urlParams.package_id) &&
+      isPriorityFileFetched &&
+      totalFilesCount > 0 &&
+      localFiles.length === 0
+
+    return waitingForPriorityFile || hasPackageWithFilesButNoneLoaded
+  }, [
+    isPriorityFileFetched,
+    urlParams.package_id,
+    totalFilesCount,
+    localFiles.length,
+  ])
 
   const isFullyLoaded = useMemo(() => {
     return !isLoadingPackageFilesWithContent && !isLoadingPackageFiles
@@ -409,7 +425,15 @@ export function useFileManagement({
     }
   }
 
-  const savePackage = async (isPrivate: boolean) => {
+  const savePackage = async ({
+    name,
+    isPrivate,
+    orgId,
+  }: {
+    name?: string
+    isPrivate: boolean
+    orgId: string
+  }) => {
     if (!isLoggedIn) {
       toast({
         title: "Not Logged In",
@@ -420,6 +444,8 @@ export function useFileManagement({
 
     await createPackageMutation.mutateAsync({
       is_private: isPrivate,
+      org_id: orgId,
+      ...(name ? { name } : {}),
     })
   }
 
@@ -523,6 +549,15 @@ export function useFileManagement({
     [localFiles, currentFile],
   )
   const mainComponentPath = useMemo(() => {
+    const targetFile = findTargetFile({
+      files: localFiles,
+      filePathFromUrl: fileChosen,
+      fallbackToAnyFile: false,
+    })?.path
+    if (targetFile && !fileChosen && !currentFile) {
+      return targetFile
+    }
+
     const isComponentExportedInCurrentFile =
       isComponentExported(currentFileCode)
 
@@ -531,16 +566,10 @@ export function useFileManagement({
       !!localFiles.some((x) => x.path === currentFile) &&
       isComponentExportedInCurrentFile
         ? currentFile
-        : localFiles.find((x) => {
-            const isComponentExportedInFile = isComponentExported(x.content)
-            return (
-              x.path.endsWith(".tsx") ||
-              (x.path.endsWith(".ts") && isComponentExportedInFile)
-            )
-          })?.path || localFiles[0]?.path
+        : targetFile
 
     return selectedComponent
-  }, [currentFile, localFiles, currentFileCode, packageFilesWithContent])
+  }, [currentFile, localFiles, currentFileCode])
 
   const priorityFileFetched = useMemo(() => {
     return urlParams.package_id && isPriorityFileFetched

package/src/hooks/useOptimizedPackageFilesLoader.ts

@@ -1,10 +1,8 @@
 import { useQuery, useQueries } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
 import { usePackageFiles } from "@/hooks/use-package-files"
-import { usePackageFileById } from "@/hooks/use-package-files"
 import type { Package } from "fake-snippets-api/lib/db/schema"
 import { useState, useMemo } from "react"
-import { findTargetFile } from "@/lib/utils/findTargetFile"
 
 export interface PackageFile {
   path: string
@@ -22,25 +20,13 @@ export interface OptimizedLoadingState {
 export function useOptimizedPackageFilesLoader(
   pkg?: Package,
   priorityFilePath?: string | null,
-  packageId?: string | null,
 ) {
   const axios = useAxios()
   const [loadedFiles, setLoadedFiles] = useState<Map<string, PackageFile>>(
     new Map(),
   )
 
-  const pkgFilesRaw = usePackageFiles(pkg?.latest_package_release_id)
-
-  // Filter out dist/ files to avoid downloading build artifacts
-  const pkgFiles = useMemo(
-    () => ({
-      ...pkgFilesRaw,
-      data: pkgFilesRaw.data?.filter(
-        (file) => !file.file_path.startsWith("dist/"),
-      ),
-    }),
-    [pkgFilesRaw.data, pkgFilesRaw.isLoading, pkgFilesRaw.error],
-  )
+  const pkgFiles = usePackageFiles(pkg?.latest_package_release_id)
 
   const targetFilePath = useMemo(() => {
     if (!pkgFiles.data) return priorityFilePath
@@ -76,8 +62,8 @@ export function useOptimizedPackageFilesLoader(
     queryFn: async () => {
       if (!priorityFileData) return null
 
-      const response = await axios.post(`/package_files/get`, {
-        package_file_id: priorityFileData.package_file_id,
+      const response = await axios.get(`/package_files/get`, {
+        params: { package_file_id: priorityFileData.package_file_id },
       })
       const content = response.data.package_file?.content_text
       const file = { path: priorityFileData.file_path, content: content ?? "" }
@@ -92,8 +78,8 @@ export function useOptimizedPackageFilesLoader(
     },
     enabled: !!priorityFileData,
     refetchOnWindowFocus: false,
-    refetchOnMount: false,
-    staleTime: Infinity,
+    refetchOnMount: true,
+    staleTime: 0,
     cacheTime: Infinity,
   })
 
@@ -103,8 +89,8 @@ export function useOptimizedPackageFilesLoader(
       ?.map((file) => ({
         queryKey: ["packageFile", file.package_file_id],
         queryFn: async () => {
-          const response = await axios.post(`/package_files/get`, {
-            package_file_id: file.package_file_id,
+          const response = await axios.get(`/package_files/get`, {
+            params: { package_file_id: file.package_file_id },
           })
           const content = response.data.package_file?.content_text
           const fileData = { path: file.file_path, content: content ?? "" }
@@ -118,14 +104,15 @@ export function useOptimizedPackageFilesLoader(
           return fileData
         },
         refetchOnWindowFocus: false,
-        refetchOnMount: false,
-        staleTime: Infinity,
+        refetchOnMount: true,
+        staleTime: 0,
         cacheTime: Infinity,
       })) ?? [],
   )
 
   const allFiles = useMemo(() => {
-    return Array.from(loadedFiles.values())
+    const files = Array.from(loadedFiles.values())
+    return files
   }, [loadedFiles])
 
   const areAllFilesLoading =

package/src/hooks/usePackageFilesLoader.ts

@@ -30,8 +30,8 @@ export function usePackageFilesLoader(pkg?: Package) {
           }
         }
 
-        const response = await axios.post(`/package_files/get`, {
-          package_file_id: file.package_file_id,
+        const response = await axios.get(`/package_files/get`, {
+          params: { package_file_id: file.package_file_id },
         })
         const content = response.data.package_file?.content_text
         return { path: file.file_path, content: content ?? "" }

package/src/hooks/useUpdatePackageFilesMutation.ts

@@ -1,4 +1,4 @@
-import { useMutation } from "react-query"
+import { useMutation, useQueryClient } from "react-query"
 import type { Package } from "fake-snippets-api/lib/db/schema"
 import { useAxios } from "./use-axios"
 import { useToast } from "@/components/ViewPackagePage/hooks/use-toast"
@@ -29,6 +29,7 @@ export function useUpdatePackageFilesMutation({
 }: UseUpdatePackageFilesMutationProps) {
   const axios = useAxios()
   const { toast } = useToast()
+  const queryClient = useQueryClient()
   return useMutation({
     mutationFn: async (
       newPackage: Pick<Package, "package_id" | "name"> & {
@@ -95,6 +96,17 @@ export function useUpdatePackageFilesMutation({
           title: `Package's ${updatedFilesCount} files saved`,
           description: "Your changes have been saved successfully.",
         })
+        queryClient.invalidateQueries({
+          predicate: (q) => {
+            const key = q.queryKey as any
+            return (
+              Array.isArray(key) &&
+              (key[0] === "packageFiles" ||
+                key[0] === "packageFile" ||
+                key[0] === "priorityPackageFile")
+            )
+          },
+        })
       }
     },
     onError: (error: any) => {

package/src/lib/download-fns/download-gltf-from-circuit-json.ts

@@ -27,7 +27,7 @@ export const downloadGltfFromCircuitJson = async (
     typeof (result as any).buffer === "object" &&
     (result as any).byteLength !== undefined
   ) {
-    const view = result as ArrayBufferView
+    const view = result as ArrayBuffer
     blob = new Blob([view], { type: "model/gltf-binary" })
     extension = options?.format
       ? options.format === "glb"

package/src/lib/download-fns/download-kicad-files.ts

@@ -1,6 +1,8 @@
 import { saveAs } from "file-saver"
-import { convertCircuitJsonToKiCadPcb } from "kicad-converter"
-import { convertCircuitJsonToKicadPro } from "kicad-converter"
+import {
+  CircuitJsonToKicadPcbConverter,
+  CircuitJsonToKicadSchConverter,
+} from "circuit-json-to-kicad"
 import { AnyCircuitElement } from "circuit-json"
 import JSZip from "jszip"
 
@@ -8,18 +10,17 @@ export const downloadKicadFiles = (
   circuitJson: AnyCircuitElement[],
   fileName: string,
 ) => {
-  const kicadPcbString = convertCircuitJsonToKiCadPcb(circuitJson as any)
-  const pcbContent =
-    typeof kicadPcbString === "object"
-      ? JSON.stringify(kicadPcbString)
-      : kicadPcbString
+  const pcbConverter = new CircuitJsonToKicadPcbConverter(circuitJson)
+  pcbConverter.runUntilFinished()
+  const kicadPcbContent = pcbConverter.getOutputString()
 
-  const kicadProContent = convertCircuitJsonToKicadPro(circuitJson as any)
-  const proContent = JSON.stringify(kicadProContent)
+  const schConverter = new CircuitJsonToKicadSchConverter(circuitJson)
+  schConverter.runUntilFinished()
+  const kicadSchContent = schConverter.getOutputString()
 
   const zip = new JSZip()
-  zip.file(`${fileName}.kicad_pcb`, pcbContent)
-  zip.file(`${fileName}.kicad_pro`, proContent)
+  zip.file(`${fileName}.kicad_pcb`, kicadPcbContent)
+  zip.file(`${fileName}.kicad_sch`, kicadSchContent)
 
   zip.generateAsync({ type: "blob" }).then((content) => {
     saveAs(content, `${fileName}_kicad.zip`)

package/src/lib/normalize-svg-for-tile.ts

@@ -0,0 +1,50 @@
+export function normalizeSvgForSquareTile(svg: string): string {
+  try {
+    const openTagMatch = svg.match(/<svg[^>]*>/i)
+    if (!openTagMatch) return svg
+
+    const openTag = openTagMatch[0]
+
+    const hasViewBox = /viewBox="[^"]+"/i.test(openTag)
+    const widthMatch = openTag.match(/\swidth="([0-9.]+)"/i)
+    const heightMatch = openTag.match(/\sheight="([0-9.]+)"/i)
+
+    let newOpenTag = openTag
+
+    // Remove explicit width/height so CSS can control sizing
+    newOpenTag = newOpenTag.replace(/\swidth="[^"]*"/i, "")
+    newOpenTag = newOpenTag.replace(/\sheight="[^"]*"/i, "")
+
+    // Ensure viewBox is present for proper scaling
+    if (!hasViewBox && widthMatch && heightMatch) {
+      const w = widthMatch[1]
+      const h = heightMatch[1]
+      newOpenTag = newOpenTag.replace(/<svg/i, `<svg viewBox="0 0 ${w} ${h}"`)
+    }
+
+    // Force preserveAspectRatio to fit within square without distortion
+    if (/preserveAspectRatio="[^"]+"/i.test(newOpenTag)) {
+      newOpenTag = newOpenTag.replace(
+        /preserveAspectRatio="[^"]+"/i,
+        'preserveAspectRatio="xMidYMid meet"',
+      )
+    } else {
+      newOpenTag = newOpenTag.replace(
+        /<svg(\s|>)/i,
+        (_m, p1) => `<svg preserveAspectRatio="xMidYMid meet"${p1}`,
+      )
+    }
+
+    return svg.replace(openTag, newOpenTag)
+  } catch {
+    return svg
+  }
+}
+
+export function svgToDataUrl(svg: string): string {
+  try {
+    return `data:image/svg+xml,${encodeURIComponent(svg)}`
+  } catch {
+    return `data:image/svg+xml,${svg}`
+  }
+}

package/src/lib/posthog.ts

@@ -1,14 +1,16 @@
 import posthog from "posthog-js"
 
-if (
-  !window.location.hostname.includes("localhost") &&
-  !window.location.hostname.includes("127.0.0.1")
-) {
-  if (!posthog.__loaded) {
-    posthog.init("phc_htd8AQjSfVEsFCLQMAiUooG4Q0DKBCjqYuQglc9V3Wo", {
-      api_host: "https://postpig.tscircuit.com",
-      person_profiles: "always",
-    })
+if (typeof window !== "undefined") {
+  if (
+    !window.location.hostname.includes("localhost") &&
+    !window.location.hostname.includes("127.0.0.1")
+  ) {
+    if (!posthog.__loaded) {
+      posthog.init("phc_htd8AQjSfVEsFCLQMAiUooG4Q0DKBCjqYuQglc9V3Wo", {
+        api_host: "https://postpig.tscircuit.com",
+        person_profiles: "always",
+      })
+    }
   }
 }
 

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>