@tscircuit/fake-snippets 0.0.109 → 0.0.111

package/src/hooks/use-preview-images.ts

@@ -21,22 +21,25 @@ export function usePreviewImages({
     {
       id: "3d",
       label: "3D View",
+      backgroundClass: "bg-gray-100",
       imageUrl: packageName
-        ? `https://registry-api.tscircuit.com/packages/images/${packageName}/3d.png?fs_sha=${fsMapHash}`
+        ? `https://api.tscircuit.com/packages/images/${packageName}/3d.png?fs_sha=${fsMapHash}`
         : undefined,
     },
     {
       id: "pcb",
       label: "PCB View",
+      backgroundClass: "bg-black",
       imageUrl: packageName
-        ? `https://registry-api.tscircuit.com/packages/images/${packageName}/pcb.png?fs_sha=${fsMapHash}`
+        ? `https://api.tscircuit.com/packages/images/${packageName}/pcb.png?fs_sha=${fsMapHash}`
         : undefined,
     },
     {
       id: "schematic",
       label: "Schematic View",
+      backgroundClass: "bg-[#F5F1ED]",
       imageUrl: packageName
-        ? `https://registry-api.tscircuit.com/packages/images/${packageName}/schematic.png?fs_sha=${fsMapHash}`
+        ? `https://api.tscircuit.com/packages/images/${packageName}/schematic.png?fs_sha=${fsMapHash}`
         : undefined,
     },
   ]

package/src/hooks/use-remove-org-member-mutation.ts

@@ -0,0 +1,32 @@
+import { useMutation, useQueryClient } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import { useGlobalStore } from "@/hooks/use-global-store"
+
+export const useRemoveOrgMemberMutation = ({
+  onSuccess,
+}: { onSuccess?: () => void } = {}) => {
+  const axios = useAxios()
+  const session = useGlobalStore((s) => s.session)
+  const queryClient = useQueryClient()
+
+  return useMutation(
+    ["removeOrgMember"],
+    async ({ orgId, accountId }: { orgId: string; accountId: string }) => {
+      if (!session) throw new Error("No session")
+
+      await axios.post("/orgs/remove_member", {
+        org_id: orgId,
+        account_id: accountId,
+      })
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(["orgs", "members"])
+        onSuccess?.()
+      },
+      onError: (error: any) => {
+        console.error("Error removing organization member:", error)
+      },
+    },
+  )
+}

package/src/hooks/use-update-ai-description-mutation.ts

@@ -0,0 +1,42 @@
+import { useMutation, useQueryClient } from "react-query"
+import { useAxios } from "./use-axios"
+import { useToast } from "./use-toast"
+
+export const useUpdateAiDescriptionMutation = ({
+  onSuccess,
+}: {
+  onSuccess?: () => void
+} = {}) => {
+  const axios = useAxios()
+  const { toast } = useToast()
+  const queryClient = useQueryClient()
+
+  return useMutation(
+    async ({ package_id }: { package_id: string }) => {
+      const { data } = await axios.post("/packages/update_ai_description", {
+        package_id,
+      })
+      return data
+    },
+    {
+      onSuccess: () => {
+        toast({
+          title: "AI description update requested",
+          description: "The AI description will be regenerated shortly.",
+        })
+        queryClient.invalidateQueries(["package"])
+        onSuccess?.()
+      },
+      onError: (error: any) => {
+        toast({
+          title: "Error",
+          description:
+            error?.response?.data?.message ||
+            error?.data?.message ||
+            "Failed to request AI description update.",
+          variant: "destructive",
+        })
+      },
+    },
+  )
+}

package/src/hooks/use-update-org-mutation.ts

@@ -0,0 +1,41 @@
+import { useMutation, useQueryClient } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import type { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
+
+export const useUpdateOrgMutation = ({
+  onSuccess,
+}: { onSuccess?: (org: PublicOrgSchema) => void } = {}) => {
+  const axios = useAxios()
+  const session = useGlobalStore((s) => s.session)
+  const queryClient = useQueryClient()
+
+  return useMutation(
+    ["updateOrg"],
+    async ({ orgId, name }: { orgId: string; name?: string }) => {
+      if (!session) throw new Error("No session")
+
+      const {
+        data: { org: updatedOrg },
+      } = await axios.post("/orgs/update", {
+        org_id: orgId,
+        name,
+      })
+
+      if (!updatedOrg) {
+        throw new Error("Failed to update organization")
+      }
+
+      return updatedOrg
+    },
+    {
+      onSuccess: (org: PublicOrgSchema) => {
+        queryClient.invalidateQueries(["orgs"])
+        onSuccess?.(org)
+      },
+      onError: (error: any) => {
+        console.error("Error updating organization:", error)
+      },
+    },
+  )
+}

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,9 @@
 import { saveAs } from "file-saver"
-import { convertCircuitJsonToKiCadPcb } from "kicad-converter"
-import { convertCircuitJsonToKicadPro } from "kicad-converter"
+import {
+  CircuitJsonToKicadPcbConverter,
+  CircuitJsonToKicadSchConverter,
+  CircuitJsonToKicadProConverter,
+} from "circuit-json-to-kicad"
 import { AnyCircuitElement } from "circuit-json"
 import JSZip from "jszip"
 
@@ -8,18 +11,26 @@ 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 proConverter = new CircuitJsonToKicadProConverter(circuitJson, {
+    projectName: fileName,
+    schematicFilename: `${fileName}.kicad_sch`,
+    pcbFilename: `${fileName}.kicad_pcb`,
+  })
+  proConverter.runUntilFinished()
+  const kicadProContent = proConverter.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.file(`${fileName}.kicad_pro`, kicadProContent)
 
   zip.generateAsync({ type: "blob" }).then((content) => {
     saveAs(content, `${fileName}_kicad.zip`)

package/src/lib/download-fns/download-step.ts

@@ -0,0 +1,12 @@
+import { AnyCircuitElement } from "circuit-json"
+import { saveAs } from "file-saver"
+import { circuitJsonToStep } from "circuit-json-to-step"
+
+export const downloadStepFile = async (
+  circuitJson: AnyCircuitElement[],
+  fileName: string,
+) => {
+  const content = await circuitJsonToStep(circuitJson)
+  const blob = new Blob([content], { type: "text/plain" })
+  saveAs(blob, fileName + ".step")
+}

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",
+      })
+    }
   }
 }