@tscircuit/fake-snippets 0.0.108 → 0.0.110

package/src/hooks/useFileManagement.ts

@@ -6,7 +6,7 @@ import { Package } from "fake-snippets-api/lib/db/schema"
 import { usePackageFiles } from "./use-package-files"
 import { decodeUrlHashToText } from "@/lib/decodeUrlHashToText"
 import { decodeUrlHashToFsMap } from "@/lib/decodeUrlHashToFsMap"
-import { usePackageFilesLoader } from "./usePackageFilesLoader"
+import { useOptimizedPackageFilesLoader } from "./useOptimizedPackageFilesLoader"
 import { useGlobalStore } from "./use-global-store"
 import { useToast } from "@/components/ViewPackagePage/hooks/use-toast"
 import { useUpdatePackageFilesMutation } from "./useUpdatePackageFilesMutation"
@@ -15,6 +15,7 @@ import { useCreatePackageMutation } from "./use-create-package-mutation"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
 import { encodeFsMapToUrlHash } from "@/lib/encodeFsMapToUrlHash"
 import { isHiddenFile } from "@/components/ViewPackagePage/utils/is-hidden-file"
+import { isComponentExported } from "@/lib/utils/isComponentExported"
 
 export interface ICreateFileProps {
   newFileName: string
@@ -47,27 +48,33 @@ export interface IRenameFileResult {
 export function useFileManagement({
   templateCode,
   currentPackage,
-  fileChoosen,
   openNewPackageSaveDialog,
   updateLastUpdated,
+  urlParams,
 }: {
   templateCode?: string
   currentPackage?: Package
-  fileChoosen: string | null
   openNewPackageSaveDialog: () => void
+  urlParams: Record<string, string>
   updateLastUpdated: () => void
 }) {
+  const fileChosen = urlParams.file_path ?? null
   const [localFiles, setLocalFiles] = useState<PackageFile[]>([])
   const [initialFiles, setInitialFiles] = useState<PackageFile[]>([])
   const [currentFile, setCurrentFile] = useState<string | null>(null)
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
-  const loggedInUser = useGlobalStore((s) => s.session)
   const { toast } = useToast()
   const debounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const {
-    data: packageFilesWithContent,
-    isLoading: isLoadingPackageFilesWithContent,
-  } = usePackageFilesLoader(currentPackage)
+    priorityFile,
+    allFiles: packageFilesWithContent,
+    isPriorityLoading,
+    areAllFilesLoading: isLoadingPackageFilesWithContent,
+    totalFilesCount,
+    loadedFilesCount,
+    isPriorityFileFetched,
+  } = useOptimizedPackageFilesLoader(currentPackage, fileChosen)
+
   const { data: packageFilesMeta, isLoading: isLoadingPackageFiles } =
     usePackageFiles(currentPackage?.latest_package_release_id)
   const initialCodeContent = useMemo(() => {
@@ -127,7 +134,7 @@ export function useFileManagement({
   })
 
   useEffect(() => {
-    if (!currentPackage || isLoadingPackageFilesWithContent) {
+    if (!currentPackage || isPriorityLoading) {
       const decodedFsMap = decodeUrlHashToFsMap(window.location.toString())
 
       if (decodedFsMap && Object.keys(decodedFsMap).length > 0) {
@@ -137,38 +144,134 @@ export function useFileManagement({
             content: String(content),
           }),
         )
-        const targetFile = findTargetFile(filesFromUrl, fileChoosen)
+        const targetFile = findTargetFile({
+          files: filesFromUrl,
+          filePathFromUrl: fileChosen,
+        })
         setLocalFiles(filesFromUrl)
         setInitialFiles([])
         setCurrentFile(targetFile?.path || filesFromUrl[0]?.path || null)
         return
       }
 
-      setLocalFiles([
-        {
-          path: "index.tsx",
-          content: initialCodeContent || "",
-        },
-      ])
-      setInitialFiles([])
-      setCurrentFile("index.tsx")
+      if (!urlParams.package_id) {
+        setLocalFiles([
+          {
+            path: "index.tsx",
+            content: initialCodeContent || "",
+          },
+        ])
+        setInitialFiles([])
+        setCurrentFile("index.tsx")
+      }
       return
-    } else {
-      const targetFile = findTargetFile(
-        packageFilesWithContent || [],
-        fileChoosen,
-      )
-      setLocalFiles(packageFilesWithContent || [])
-      setInitialFiles(packageFilesWithContent || [])
-      setCurrentFile(targetFile?.path || null)
     }
-  }, [currentPackage, isLoadingPackageFilesWithContent])
+  }, [currentPackage, isPriorityLoading])
+
+  useEffect(() => {
+    if (priorityFile && !isPriorityLoading && currentPackage) {
+      setLocalFiles((prev) => {
+        const existingIndex = prev.findIndex(
+          (f) => f.path === priorityFile.path,
+        )
+        if (existingIndex >= 0) {
+          const updated = [...prev]
+          updated[existingIndex] = priorityFile
+          return updated
+        }
+        return [...prev, priorityFile]
+      })
+
+      setCurrentFile((prevCurrentFile) => {
+        if (fileChosen && priorityFile.path === fileChosen) {
+          return priorityFile.path
+        } else if (!prevCurrentFile) {
+          return priorityFile.path
+        } else {
+          // If priority file is index.tsx, always update to it
+          const isPriorityFileBetter = priorityFile.path === "index.tsx"
+          if (isPriorityFileBetter) {
+            return priorityFile.path
+          }
+        }
+        return prevCurrentFile
+      })
+    }
+  }, [priorityFile, isPriorityLoading, currentPackage, fileChosen])
+
+  useEffect(() => {
+    if (packageFilesWithContent.length > 0 && currentPackage) {
+      setLocalFiles(packageFilesWithContent)
+      setInitialFiles(packageFilesWithContent)
+
+      if (fileChosen) {
+        const targetFile =
+          packageFilesWithContent.find((f) => f.path === fileChosen) ||
+          findTargetFile({
+            files: packageFilesWithContent,
+            filePathFromUrl: fileChosen,
+          })
+        if (targetFile) {
+          setCurrentFile((prevCurrentFile) => {
+            return targetFile.path !== prevCurrentFile
+              ? targetFile.path
+              : prevCurrentFile
+          })
+        }
+      } else {
+        setCurrentFile((prevCurrentFile) => {
+          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({
+              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 =
+              targetFile && targetFile.path === "index.tsx"
+            const shouldWaitForPriority =
+              isPriorityLoading && !isTopPriorityFile
+
+            if (shouldWaitForPriority) {
+              return prevCurrentFile // Keep null to avoid flicker
+            }
+
+            return targetFile ? targetFile.path : prevCurrentFile
+          }
+          return prevCurrentFile
+        })
+      }
+    }
+  }, [
+    packageFilesWithContent.length,
+    currentPackage,
+    fileChosen,
+    isPriorityLoading,
+  ])
 
   const isLoading = useMemo(() => {
-    return (
-      isLoadingPackageFilesWithContent || isLoadingPackageFiles || !localFiles
-    )
-  }, [isLoadingPackageFilesWithContent, localFiles, 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
+  }, [isLoadingPackageFilesWithContent, isLoadingPackageFiles])
 
   const fsMap = useMemo(() => {
     const map = localFiles.reduce(
@@ -178,6 +281,7 @@ export function useFileManagement({
       },
       {} as Record<string, string>,
     )
+
     return map
   }, [localFiles, manualEditsFileContent])
 
@@ -215,7 +319,6 @@ export function useFileManagement({
       }
     }
 
-    // Check if file already exists
     const fileExists = localFiles?.some((file) => file.path === newFileName)
     if (fileExists) {
       onError(new Error(`File '${newFileName}' already exists`))
@@ -224,7 +327,6 @@ export function useFileManagement({
       }
     }
 
-    // Ensure file name is not empty after path construction
     const fileName = newFileName.split("/").pop() || ""
     if (!fileName.trim()) {
       onError(new Error("File name cannot be empty"))
@@ -282,7 +384,6 @@ export function useFileManagement({
       }
     }
 
-    // Extract just the filename from the path for validation
     const fileNameOnly = newFilename.split("/").pop() || ""
     if (!isValidFileName(fileNameOnly)) {
       onError(new Error("Invalid file name"))
@@ -324,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",
@@ -335,6 +444,8 @@ export function useFileManagement({
 
     await createPackageMutation.mutateAsync({
       is_private: isPrivate,
+      org_id: orgId,
+      ...(name ? { name } : {}),
     })
   }
 
@@ -395,7 +506,6 @@ export function useFileManagement({
 
   const saveFiles = () => {
     if (!isLoggedIn) {
-      // For non-logged-in users, trigger immediate URL save
       if (debounceTimeoutRef.current) {
         clearTimeout(debounceTimeoutRef.current)
       }
@@ -433,20 +543,58 @@ export function useFileManagement({
     isCreatingRelease,
   ])
 
+  const currentFileCode = useMemo(
+    () =>
+      localFiles.find((x) => x.path === currentFile)?.content ?? DEFAULT_CODE,
+    [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)
+
+    const selectedComponent =
+      (currentFile?.endsWith(".tsx") || currentFile?.endsWith(".ts")) &&
+      !!localFiles.some((x) => x.path === currentFile) &&
+      isComponentExportedInCurrentFile
+        ? currentFile
+        : targetFile
+
+    return selectedComponent
+  }, [currentFile, localFiles, currentFileCode])
+
+  const priorityFileFetched = useMemo(() => {
+    return urlParams.package_id && isPriorityFileFetched
+  }, [urlParams.package_id, isPriorityFileFetched])
+
   return {
     fsMap,
     createFile,
+    priorityFileFetched,
     deleteFile,
     renameFile,
     saveFiles,
     localFiles,
+    mainComponentPath,
+    currentFileCode,
     initialFiles,
     currentFile,
     setLocalFiles,
     onFileSelect,
     isLoading,
+    isFullyLoaded,
     isSaving,
     savePackage,
     packageFilesMeta,
+    totalFilesCount,
+    loadedFilesCount,
   }
 }

package/src/hooks/useOptimizedPackageFilesLoader.ts

@@ -0,0 +1,136 @@
+import { useQuery, useQueries } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import { usePackageFiles } from "@/hooks/use-package-files"
+import type { Package } from "fake-snippets-api/lib/db/schema"
+import { useState, useMemo } from "react"
+
+export interface PackageFile {
+  path: string
+  content: string
+}
+
+export interface OptimizedLoadingState {
+  priorityFile: PackageFile | null
+  allFiles: PackageFile[]
+  isPriorityLoading: boolean
+  areAllFilesLoading: boolean
+  error: any
+}
+
+export function useOptimizedPackageFilesLoader(
+  pkg?: Package,
+  priorityFilePath?: string | null,
+) {
+  const axios = useAxios()
+  const [loadedFiles, setLoadedFiles] = useState<Map<string, PackageFile>>(
+    new Map(),
+  )
+
+  const pkgFiles = usePackageFiles(pkg?.latest_package_release_id)
+
+  const targetFilePath = useMemo(() => {
+    if (!pkgFiles.data) return priorityFilePath
+
+    if (priorityFilePath) {
+      const exactMatch = pkgFiles.data.find(
+        (f) => f.file_path === priorityFilePath,
+      )
+      if (exactMatch) return exactMatch.file_path
+
+      const partialMatch = pkgFiles.data.find(
+        (f) =>
+          f.file_path.includes(priorityFilePath) ||
+          priorityFilePath.includes(f.file_path),
+      )
+      if (partialMatch) return partialMatch.file_path
+    }
+
+    // Check for index.tsx first
+    const indexFile = pkgFiles.data.find((f) => f.file_path === "index.tsx")
+    if (indexFile) return indexFile.file_path
+
+    // Fallback to first file
+    return pkgFiles.data[0]?.file_path || null
+  }, [pkgFiles.data, priorityFilePath])
+
+  const priorityFileData = pkgFiles.data?.find(
+    (file) => file.file_path === targetFilePath,
+  )
+
+  const priorityFileQuery = useQuery({
+    queryKey: ["priorityPackageFile", priorityFileData?.package_file_id],
+    queryFn: async () => {
+      if (!priorityFileData) return null
+
+      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 ?? "" }
+
+      setLoadedFiles((prev) => {
+        const newMap = new Map(prev)
+        newMap.set(file.path, file)
+        return newMap
+      })
+
+      return file
+    },
+    enabled: !!priorityFileData,
+    refetchOnWindowFocus: false,
+    refetchOnMount: true,
+    staleTime: 0,
+    cacheTime: Infinity,
+  })
+
+  const remainingFilesQueries = useQueries(
+    pkgFiles.data
+      ?.filter((file) => file.file_path !== targetFilePath)
+      ?.map((file) => ({
+        queryKey: ["packageFile", file.package_file_id],
+        queryFn: async () => {
+          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 ?? "" }
+
+          setLoadedFiles((prev) => {
+            const newMap = new Map(prev)
+            newMap.set(fileData.path, fileData)
+            return newMap
+          })
+
+          return fileData
+        },
+        refetchOnWindowFocus: false,
+        refetchOnMount: true,
+        staleTime: 0,
+        cacheTime: Infinity,
+      })) ?? [],
+  )
+
+  const allFiles = useMemo(() => {
+    const files = Array.from(loadedFiles.values())
+    return files
+  }, [loadedFiles])
+
+  const areAllFilesLoading =
+    remainingFilesQueries.some((q) => q.isLoading) ||
+    priorityFileQuery.isLoading
+  const error =
+    priorityFileQuery.error || remainingFilesQueries.find((q) => q.error)?.error
+
+  return {
+    priorityFile: priorityFileQuery.data || null,
+    priorityFileFetched: priorityFileQuery.isFetched,
+    allFiles,
+    isPriorityLoading: priorityFileQuery.isLoading,
+    areAllFilesLoading,
+    error,
+    isMetaLoading: pkgFiles.isLoading,
+    totalFilesCount: pkgFiles.data?.length || 0,
+    loadedFilesCount: allFiles.length,
+    isPriorityFileFetched: priorityFileQuery.isFetched,
+  }
+}

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,7 +1,8 @@
-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"
+import { isHiddenFile } from "@/components/ViewPackagePage/utils/is-hidden-file"
 
 interface PackageFile {
   path: string
@@ -28,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"> & {
@@ -42,6 +44,7 @@ export function useUpdatePackageFilesMutation({
       let updatedFilesCount = 0
 
       for (const file of localFiles) {
+        if (isHiddenFile(file.path)) continue
         const initialFile = initialFiles.find((x) => x.path === file.path)
         if (file.content !== initialFile?.content) {
           const updatePkgFilePayload = {
@@ -93,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-circuit-png.ts

@@ -1,3 +1,4 @@
+import { convertCircuitJsonToSimple3dSvg } from "circuit-json-to-simple-3d"
 import { AnyCircuitElement } from "circuit-json"
 import {
   convertCircuitJsonToAssemblySvg,
@@ -6,7 +7,7 @@ import {
 } from "circuit-to-svg"
 import { saveAs } from "file-saver"
 
-export type ImageFormat = "schematic" | "pcb" | "assembly"
+export type ImageFormat = "schematic" | "pcb" | "assembly" | "3d"
 
 interface DownloadCircuitPngOptions {
   format: ImageFormat
@@ -65,7 +66,7 @@ export const downloadCircuitPng = async (
     if (options.width) svgOptions.width = options.width
     if (options.height) svgOptions.height = options.height
 
-    switch (options.format) {
+    switch (options.format.toLowerCase()) {
       case "schematic":
         svg = convertCircuitJsonToSchematicSvg(circuitJson, svgOptions)
         break
@@ -76,13 +77,20 @@ export const downloadCircuitPng = async (
         svg = convertCircuitJsonToAssemblySvg(circuitJson, svgOptions)
         break
       default:
-        throw new Error(`Unsupported format: ${options.format}`)
+        svg = await convertCircuitJsonToSimple3dSvg(circuitJson, {
+          background: {
+            color: "#fff",
+            opacity: 0.0,
+          },
+          defaultZoomMultiplier: 1.1,
+        })
     }
 
     blob = await convertSvgToPng(svg)
     const downloadFileName = `${fileName}_${options.format}.png`
     saveAs(blob, downloadFileName)
   } catch (error) {
+    console.error(error)
     throw new Error(`Failed to download ${options.format} PNG: ${error}`)
   }
 }

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

@@ -0,0 +1,44 @@
+import { CircuitJson } from "circuit-json"
+import { saveAs } from "file-saver"
+import {
+  convertCircuitJsonToGltf,
+  type ConversionOptions,
+} from "circuit-json-to-gltf"
+export const downloadGltfFromCircuitJson = async (
+  circuitJson: CircuitJson,
+  fileName: string,
+  options?: ConversionOptions,
+) => {
+  const result = await convertCircuitJsonToGltf(circuitJson, options)
+
+  let blob: Blob
+  let extension = options?.format === "glb" ? ".glb" : ".gltf"
+
+  if (result instanceof ArrayBuffer) {
+    blob = new Blob([result], { type: "model/gltf-binary" })
+    extension = options?.format
+      ? options.format === "glb"
+        ? ".glb"
+        : ".gltf"
+      : ".glb"
+  } else if (
+    typeof ArrayBuffer !== "undefined" &&
+    result &&
+    typeof (result as any).buffer === "object" &&
+    (result as any).byteLength !== undefined
+  ) {
+    const view = result as ArrayBuffer
+    blob = new Blob([view], { type: "model/gltf-binary" })
+    extension = options?.format
+      ? options.format === "glb"
+        ? ".glb"
+        : ".gltf"
+      : ".glb"
+  } else if (typeof result === "string") {
+    blob = new Blob([result], { type: "model/gltf+json" })
+  } else {
+    blob = new Blob([JSON.stringify(result)], { type: "model/gltf+json" })
+  }
+
+  saveAs(blob, fileName + extension)
+}

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`)