@tscircuit/fake-snippets 0.0.107 → 0.0.109

package/src/hooks/useOptimizedPackageFilesLoader.ts

@@ -0,0 +1,149 @@
+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
+  content: string
+}
+
+export interface OptimizedLoadingState {
+  priorityFile: PackageFile | null
+  allFiles: PackageFile[]
+  isPriorityLoading: boolean
+  areAllFilesLoading: boolean
+  error: any
+}
+
+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 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.post(`/package_files/get`, {
+        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: false,
+    staleTime: Infinity,
+    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.post(`/package_files/get`, {
+            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: false,
+        staleTime: Infinity,
+        cacheTime: Infinity,
+      })) ?? [],
+  )
+
+  const allFiles = useMemo(() => {
+    return Array.from(loadedFiles.values())
+  }, [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/useUpdatePackageFilesMutation.ts

@@ -2,6 +2,7 @@ import { useMutation } 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
@@ -42,6 +43,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 = {

package/src/index.css

@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 @layer base {
   :root {
     --radius: 0.5rem;
@@ -18,6 +19,10 @@
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
   }
+
+  .shiki {
+    @apply no-scrollbar;
+  }
 }
 
 .shiki {
@@ -82,3 +87,22 @@
 body {
   overflow-x: hidden;
 }
+
+/* Subtle scrollbar styling for html and body */
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
+  width: 6px;
+  background-color: transparent;
+}
+
+html::-webkit-scrollbar-thumb,
+body::-webkit-scrollbar-thumb {
+  background-color: rgba(215, 215, 215, 0.564);
+  border-radius: 8px;
+  transition: background-color 0.2s;
+}
+
+html::-webkit-scrollbar-thumb:hover,
+body::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(193, 193, 193, 0.455);
+}

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 ArrayBufferView
+    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/utils/isComponentExported.ts

@@ -0,0 +1,9 @@
+export const isComponentExported = (code: string) => {
+  return (
+    /export function\s+\w+/.test(code) ||
+    /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)
+  )
+}

package/src/lib/utils/transformFilesToTreeData.tsx

@@ -0,0 +1,195 @@
+import type { TreeDataItem } from "@/components/ui/tree-view"
+import type {
+  IRenameFileProps,
+  IDeleteFileProps,
+} from "@/hooks/useFileManagement"
+import { isHiddenFile } from "@/components/ViewPackagePage/utils/is-hidden-file"
+import { File, Folder, MoreVertical, Pencil, Trash2 } from "lucide-react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { useToast } from "@/hooks/use-toast"
+
+type FileName = string
+type TreeNode = Omit<TreeDataItem, "children"> & {
+  children?: Record<string, TreeNode>
+}
+interface TransformFilesToTreeDataProps {
+  files: Record<FileName, string>
+  currentFile: FileName | null
+  renamingFile: string | null
+  handleRenameFile: (props: IRenameFileProps) => { fileRenamed: boolean }
+  handleDeleteFile: (props: IDeleteFileProps) => { fileDeleted: boolean }
+  setRenamingFile: (filename: string | null) => void
+  onFileSelect: (filename: FileName) => void
+  onFolderSelect: (folderPath: string) => void
+  canModifyFiles: boolean
+  setErrorMessage: (message: string) => void
+  setSelectedFolderForCreation: (folder: string | null) => void
+}
+
+export const transformFilesToTreeData = ({
+  files,
+  currentFile,
+  renamingFile,
+  handleRenameFile,
+  handleDeleteFile,
+  setRenamingFile,
+  onFileSelect,
+  onFolderSelect,
+  canModifyFiles,
+  setErrorMessage,
+  setSelectedFolderForCreation,
+}: TransformFilesToTreeDataProps): TreeDataItem[] => {
+  const { toast } = useToast()
+  const root: Record<string, TreeNode> = {}
+
+  Object.keys(files).forEach((filePath) => {
+    const hasLeadingSlash = filePath.startsWith("/")
+    const pathSegments = (hasLeadingSlash ? filePath.slice(1) : filePath)
+      .trim()
+      .split("/")
+    let currentNode: Record<string, TreeNode> = root
+
+    pathSegments.forEach((segment, segmentIndex) => {
+      const isLeafNode = segmentIndex === pathSegments.length - 1
+      const ancestorPath = pathSegments.slice(0, segmentIndex).join("/")
+      const relativePath = ancestorPath ? `${ancestorPath}/${segment}` : segment
+      const absolutePath = hasLeadingSlash ? `/${relativePath}` : relativePath
+      const itemId = absolutePath
+
+      if (
+        !currentNode[segment] &&
+        (!isHiddenFile(relativePath) ||
+          isHiddenFile(
+            currentFile?.startsWith("/")
+              ? currentFile.slice(1)
+              : currentFile || "",
+          ))
+      ) {
+        currentNode[segment] = {
+          id: itemId,
+          name: segment,
+          isRenaming: renamingFile === itemId,
+          onRename: (newFilename: string) => {
+            const oldPath = itemId
+            const pathParts = oldPath.split("/").filter((part) => part !== "")
+            let newPath: string
+
+            if (pathParts.length > 1) {
+              const folderPath = pathParts.slice(0, -1).join("/")
+              newPath = folderPath + "/" + newFilename
+            } else {
+              newPath = newFilename
+            }
+
+            if (oldPath.startsWith("/") && !newPath.startsWith("/")) {
+              newPath = "/" + newPath
+            }
+
+            const { fileRenamed } = handleRenameFile({
+              oldFilename: itemId,
+              newFilename: newPath,
+              onError: (error) => {
+                toast({
+                  title: `Error renaming file`,
+                  description: error.message,
+                  variant: "destructive",
+                })
+              },
+            })
+            if (fileRenamed) {
+              setRenamingFile(null)
+            }
+          },
+          onCancelRename: () => {
+            setRenamingFile(null)
+          },
+          icon: isLeafNode ? File : Folder,
+          onClick: isLeafNode
+            ? () => {
+                onFileSelect(absolutePath)
+                setSelectedFolderForCreation(null)
+              }
+            : () => onFolderSelect(absolutePath),
+          draggable: false,
+          droppable: !isLeafNode,
+          children: isLeafNode ? undefined : {},
+          actions: canModifyFiles ? (
+            <>
+              <DropdownMenu key={itemId}>
+                <DropdownMenuTrigger asChild>
+                  <MoreVertical className="w-4 h-4 text-gray-500 hover:text-gray-700" />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent
+                  className="w-fit bg-white shadow-lg rounded-md border-4 z-[100] border-white"
+                  style={{
+                    position: "absolute",
+                    top: "100%",
+                    left: "0",
+                    marginTop: "0.5rem",
+                    width: "8rem",
+                    padding: "0.01rem",
+                  }}
+                >
+                  <DropdownMenuGroup>
+                    {isLeafNode && (
+                      <DropdownMenuItem
+                        onClick={() => {
+                          setRenamingFile(itemId)
+                        }}
+                        className="flex items-center px-3 py-1 text-xs text-black hover:bg-gray-100 cursor-pointer"
+                      >
+                        <Pencil className="mr-2 h-3 w-3" />
+                        Rename
+                      </DropdownMenuItem>
+                    )}
+                    <DropdownMenuItem
+                      onClick={() => {
+                        const { fileDeleted } = handleDeleteFile({
+                          filename: itemId,
+                          onError: (error) => {
+                            toast({
+                              title: `Error deleting file ${itemId}`,
+                              description: error.message,
+                            })
+                          },
+                        })
+                        if (fileDeleted) {
+                          setErrorMessage("")
+                        }
+                      }}
+                      className="flex items-center px-3 py-1 text-xs text-red-600 hover:bg-gray-100 cursor-pointer"
+                    >
+                      <Trash2 className="mr-2 h-3 w-3" />
+                      Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </>
+          ) : undefined,
+        }
+      }
+
+      if (!isLeafNode && currentNode[segment]?.children) {
+        currentNode = currentNode[segment].children
+      }
+    })
+  })
+
+  const convertToArray = (items: Record<string, TreeNode>): TreeDataItem[] => {
+    return Object.values(items).map((item) => ({
+      ...item,
+      children: item.children ? convertToArray(item.children) : undefined,
+    }))
+  }
+  return convertToArray(root).filter((x) => {
+    if (x.children?.length === 0) return false
+    return true
+  })
+}

package/src/pages/404.tsx

@@ -5,15 +5,13 @@ import { NotFound } from "@/components/NotFound"
 
 export function NotFoundPage({
   heading = "Page Not Found",
-}: { heading?: string }) {
+  subtitle = "The page you're looking for doesn't exist.",
+}: { heading?: string; subtitle?: string }) {
   return (
     <div className="flex min-h-screen flex-col">
       <Helmet>
         <title>404 - {heading} | tscircuit</title>
-        <meta
-          name="description"
-          content="The page you're looking for doesn't exist."
-        />
+        <meta name="description" content={subtitle} />
       </Helmet>
       <Header2 />
       <NotFound heading={heading} />

package/src/pages/authorize.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import Header from "@/components/Header"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { useEffect, useState } from "react"

package/src/pages/landing.tsx

@@ -232,7 +232,6 @@ export function LandingPage() {
         </section>
       </main>
       <Footer />
-      {/* <Footer2 /> */}
     </div>
   )
 }