@tscircuit/fake-snippets 0.0.44 → 0.0.45

package/src/components/package-port/CodeEditor.tsx

@@ -26,19 +26,15 @@ import { EditorView } from "codemirror"
 import { useEffect, useMemo, useRef, useState } from "react"
 import ts from "typescript"
 import CodeEditorHeader from "@/components/package-port/CodeEditorHeader"
-// import { copilotPlugin, Language } from "@valtown/codemirror-codeium"
 import { useCodeCompletionApi } from "@/hooks/use-code-completion-ai-api"
 import FileSidebar from "../FileSidebar"
-
+import { findTargetFile } from "@/lib/utils/findTargetFile"
+import type { PackageFile } from "./CodeAndPreview"
 const defaultImports = `
 import React from "@types/react/jsx-runtime"
 import { Circuit, createUseComponent } from "@tscircuit/core"
 import type { CommonLayoutProps } from "@tscircuit/props"
 `
-export interface FileContent {
-  path: string
-  content: string
-}
 
 export const CodeEditor = ({
   onCodeChange,
@@ -48,12 +44,14 @@ export const CodeEditor = ({
   isStreaming = false,
   showImportAndFormatButtons = true,
   onFileContentChanged,
+  pkgFilesLoaded,
 }: {
   onCodeChange: (code: string, filename?: string) => void
   onDtsChange?: (dts: string) => void
-  files: FileContent[]
+  files: PackageFile[]
   readOnly?: boolean
   isStreaming?: boolean
+  pkgFilesLoaded?: boolean
   showImportAndFormatButtons?: boolean
   onFileContentChanged?: (path: string, content: string) => void
 }) => {
@@ -62,7 +60,6 @@ export const CodeEditor = ({
   const ataRef = useRef<ReturnType<typeof setupTypeAcquisition> | null>(null)
   const apiUrl = useSnippetsBaseApiUrl()
   const codeCompletionApi = useCodeCompletionApi()
-
   const [cursorPosition, setCursorPosition] = useState<number | null>(null)
   const [code, setCode] = useState(files[0]?.content || "")
   const [currentFile, setCurrentFile] = useState<string>("")
@@ -70,35 +67,17 @@ export const CodeEditor = ({
   // Get URL search params for file_path
   const urlParams = new URLSearchParams(window.location.search)
   const filePathFromUrl = urlParams.get("file_path")
-
   // Set current file on component mount
   useEffect(() => {
-    if (files.length > 0 && currentFile === "") {
-      // Priority 1: Use file_path from URL if it exists in files
-      if (
-        filePathFromUrl &&
-        files.some((file) => file.path === filePathFromUrl)
-      ) {
-        setCurrentFile(filePathFromUrl)
-      }
-      // Priority 2: Use index.tsx if it exists in files
-      else if (files.some((file) => file.path === "index.tsx")) {
-        setCurrentFile("index.tsx")
-      }
-      // Priority 3: Use the first file with .tsx extension
-      else {
-        const tsxFile = files.find((file) => file.path.endsWith(".tsx"))
-        if (tsxFile) {
-          setCurrentFile(tsxFile.path)
-        }
-        // Fallback: Use the first file in the array
-        else if (files[0]) {
-          setCurrentFile(files[0].path)
-        }
-      }
-      return
+    if (files.length === 0 || !pkgFilesLoaded || currentFile) return
+
+    const targetFile = findTargetFile(files, filePathFromUrl)
+
+    if (targetFile) {
+      setCurrentFile(targetFile.path)
+      setCode(targetFile.content)
     }
-  }, [files])
+  }, [filePathFromUrl, pkgFilesLoaded])
 
   const fileMap = useMemo(() => {
     const map: Record<string, string> = {}
@@ -448,6 +427,12 @@ export const CodeEditor = ({
 
   const handleFileChange = (path: string) => {
     setCurrentFile(path)
+    try {
+      // Set url query to file path
+      const urlParams = new URLSearchParams(window.location.search)
+      urlParams.set("file_path", path)
+      window.history.replaceState(null, "", `?${urlParams.toString()}`)
+    } catch {}
   }
 
   const updateFileContent = (path: string, newContent: string) => {
@@ -478,7 +463,7 @@ export const CodeEditor = ({
   }
   const [sidebarOpen, setSidebarOpen] = useState(false)
   return (
-    <div className="flex h-full">
+    <div className="flex h-full w-full">
       <FileSidebar
         files={Object.fromEntries(files.map((f) => [f.path, f.content]))}
         currentFile={currentFile}
@@ -487,7 +472,7 @@ export const CodeEditor = ({
         }
         onFileSelect={handleFileChange}
       />
-      <div className="flex flex-col flex-1">
+      <div className="flex flex-col flex-1 w-full min-w-0">
         {showImportAndFormatButtons && (
           <CodeEditorHeader
             fileSidebarState={
@@ -500,10 +485,13 @@ export const CodeEditor = ({
             updateFileContent={(...args) => {
               return updateFileContent(...args)
             }}
-            cursorPosition={cursorPosition}
+            handleFileChange={handleFileChange}
           />
         )}
-        <div ref={editorRef} className="flex-1 overflow-auto max-w-[100%]" />
+        <div
+          ref={editorRef}
+          className="flex-1 overflow-auto [&_.cm-editor]:h-full"
+        />
       </div>
     </div>
   )

package/src/components/package-port/CodeEditorHeader.tsx

@@ -3,7 +3,6 @@ import { Button } from "@/components/ui/button"
 import { handleManualEditsImport } from "@/lib/handleManualEditsImport"
 import { useImportSnippetDialog } from "@/components/dialogs/import-snippet-dialog"
 import { useToast } from "@/hooks/use-toast"
-import { FootprintDialog } from "@/components/FootprintDialog"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -12,36 +11,70 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { AlertTriangle, PanelRightClose } from "lucide-react"
 import { checkIfManualEditsImported } from "@/lib/utils/checkIfManualEditsImported"
-
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select"
+import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
 export type FileName = string
 
 interface CodeEditorHeaderProps {
   currentFile: FileName
   files: Record<FileName, string>
   updateFileContent: (filename: FileName, content: string) => void
-  cursorPosition: number | null
   fileSidebarState: ReturnType<typeof useState<boolean>>
+  handleFileChange: (filename: FileName) => void
 }
 
 export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
   currentFile,
   files,
   updateFileContent,
-  cursorPosition,
   fileSidebarState,
+  handleFileChange,
 }) => {
   const { Dialog: ImportSnippetDialog, openDialog: openImportDialog } =
     useImportSnippetDialog()
-  const [footprintDialogOpen, setFootprintDialogOpen] = useState(false)
   const { toast } = useToast()
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
+
   const handleFormatFile = useCallback(() => {
     if (!window.prettier || !window.prettierPlugins) return
-
     try {
       const currentContent = files[currentFile]
+      let fileExtension = currentFile.split(".").pop()?.toLowerCase()
+      if (currentContent.trim().length === 0) {
+        toast({
+          title: "Empty file",
+          description: "Cannot format an empty file.",
+        })
+        return
+      }
+      if (!fileExtension) {
+        toast({
+          title: "Cannot determine file type",
+          description: "Unable to format file without an extension.",
+        })
+        return
+      }
+
+      if (["readme"].includes(currentFile.toLowerCase())) {
+        fileExtension = "md"
+      }
 
-      if (currentFile.endsWith(".json")) {
+      if (fileExtension === currentFile.toLowerCase()) {
+        toast({
+          title: "Cannot determine file type",
+          description: "Unable to format file without an extension.",
+        })
+        return
+      }
+
+      // Handle JSON formatting separately
+      if (fileExtension === "json") {
         try {
           const jsonObj = JSON.parse(currentContent)
           const formattedJson = JSON.stringify(jsonObj, null, 2)
@@ -52,28 +85,47 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
             description: "Failed to format JSON: invalid syntax.",
             variant: "destructive",
           })
-          return
         }
         return
       }
 
+      const parserMap: Record<string, string> = {
+        js: "babel",
+        jsx: "babel",
+        ts: "typescript",
+        tsx: "typescript",
+        md: "markdown",
+        markdown: "markdown",
+      }
+
+      const parser = parserMap[fileExtension] || "typescript"
       const formattedCode = window.prettier.format(currentContent, {
         semi: false,
-        parser: "typescript",
+        parser: parser,
         plugins: window.prettierPlugins,
       })
 
       updateFileContent(currentFile, formattedCode)
     } catch (error) {
       console.error("Formatting error:", error)
-      toast({
-        title: "Formatting error",
-        description:
-          error instanceof Error
-            ? error.message
-            : "Failed to format the code. Please check for syntax errors.",
-        variant: "destructive",
-      })
+      if (
+        error instanceof Error &&
+        error.message.includes("No parser could be inferred")
+      ) {
+        toast({
+          title: "Unsupported File Type",
+          description: `Formatting not supported for .${currentFile.split(".").pop()?.toLowerCase()} files. Tried default parser.`,
+        })
+      } else {
+        toast({
+          title: "Formatting error",
+          description:
+            error instanceof Error
+              ? error.message
+              : "Failed to format the code. Please check for syntax errors.",
+          variant: "destructive",
+        })
+      }
     }
   }, [currentFile, files, toast, updateFileContent])
 
@@ -81,13 +133,59 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
     <>
       <div className="flex items-center gap-2 px-2 border-b border-gray-200">
         <button
-          className={`text-black/60 scale-90 transition-opacity duration-200 ${sidebarOpen ? "opacity-0 pointer-events-none" : "opacity-100"}`}
+          className={`text-gray-400 scale-90 transition-opacity duration-200 ${
+            sidebarOpen ? "opacity-0 pointer-events-none" : "opacity-100"
+          }`}
           onClick={() => setSidebarOpen(true)}
         >
           <PanelRightClose />
         </button>
+        <div>
+          <Select value={currentFile} onValueChange={handleFileChange}>
+            <SelectTrigger className="h-7 px-3 bg-white">
+              <SelectValue placeholder="Select file" />
+            </SelectTrigger>
+            <SelectContent>
+              {Object.keys(files)
+                .filter(
+                  (filename) =>
+                    !isHiddenFile(
+                      filename.startsWith("/") ? filename.slice(1) : filename,
+                    ),
+                )
+                .map((filename) => (
+                  <SelectItem className="py-1" key={filename} value={filename}>
+                    <span
+                      className={`text-xs pr-1 block truncate ${
+                        sidebarOpen ? "max-w-[5rem]" : "max-w-[10rem]"
+                      }`}
+                    >
+                      {filename}
+                    </span>
+                  </SelectItem>
+                ))}
+              {currentFile &&
+                Object.keys(files).includes(currentFile) &&
+                isHiddenFile(
+                  currentFile.startsWith("/")
+                    ? currentFile.slice(1)
+                    : currentFile,
+                ) && (
+                  <SelectItem className="py-1" value={currentFile}>
+                    <span
+                      className={`text-xs pr-1 block truncate ${
+                        sidebarOpen ? "max-w-[5rem]" : "max-w-[10rem]"
+                      }`}
+                    >
+                      {currentFile}
+                    </span>
+                  </SelectItem>
+                )}
+            </SelectContent>
+          </Select>
+        </div>
 
-        <div className="flex items-center gap-2 px-2 py-1 ml-auto">
+        <div className="flex items-center overflow-x-hidden gap-2 px-2 py-1 ml-auto">
           {checkIfManualEditsImported(files) && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -112,18 +210,6 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
               </DropdownMenuContent>
             </DropdownMenu>
           )}
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button size="sm" variant="ghost">
-                Insert
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-              <DropdownMenuItem onClick={() => setFootprintDialogOpen(true)}>
-                Chip
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
           <Button size="sm" variant="ghost" onClick={() => openImportDialog()}>
             Import
           </Button>
@@ -137,14 +223,6 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
             updateFileContent(currentFile, newContent)
           }}
         />
-        <FootprintDialog
-          currentFile={currentFile as `${string}.${string}`}
-          open={footprintDialogOpen}
-          onOpenChange={setFootprintDialogOpen}
-          updateFileContent={updateFileContent}
-          files={files}
-          cursorPosition={cursorPosition}
-        />
       </div>
     </>
   )

package/src/components/package-port/EditorNav.tsx

@@ -218,14 +218,16 @@ export default function EditorNav({
                   {pkg.star_count}
                 </span>
               )}
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-6 w-6 ml-2"
-                onClick={() => openRenameDialog()}
-              >
-                <Pencil className="h-3 w-3 text-gray-700" />
-              </Button>
+              {pkg.owner_github_username === session?.github_username && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6 ml-2"
+                  onClick={() => openRenameDialog()}
+                >
+                  <Pencil className="h-3 w-3 text-gray-700" />
+                </Button>
+              )}
               {isPrivate && (
                 <div className="relative group">
                   <LockClosedIcon className="h-3 w-3 text-gray-700" />

package/src/components/ui/tree-view.tsx

@@ -9,7 +9,7 @@ const treeVariants = cva(
 )
 
 const selectedTreeVariants = cva(
-  "before:opacity-100 before:bg-slate-100/70 text-accent-foreground' dark:before:bg-slate-800/70",
+  "before:opacity-100 before:bg-slate-100/70 text-accent-foreground dark:before:bg-slate-800/70",
 )
 
 const dragOverVariants = cva(
@@ -58,6 +58,10 @@ const TreeView = React.forwardRef<HTMLDivElement, TreeProps>(
       string | undefined
     >(initialSelectedItemId)
 
+    React.useEffect(() => {
+      setSelectedItemId(initialSelectedItemId)
+    }, [initialSelectedItemId])
+
     const [draggedItem, setDraggedItem] = React.useState<TreeDataItem | null>(
       null,
     )

package/src/{prettier.ts → lib/types.ts}

@@ -1,6 +1,8 @@
-// Prettier is injected into the global scope inside index.html
 declare global {
   interface Window {
+    TSCIRCUIT_REGISTRY_API_BASE_URL: string
+    TSCIRCUIT_3D_OBJECT_REF: any
+    __DEBUG_CODE_EDITOR_FS_MAP: Map<string, string>
     prettier: {
       format: (code: string, options: any) => string
     }

package/src/lib/utils/findTargetFile.ts

@@ -0,0 +1,62 @@
+import { PackageFile } from "@/components/package-port/CodeAndPreview"
+
+export const findMainEntrypointFileFromTscircuitConfig = (
+  files: PackageFile[],
+): PackageFile | null => {
+  const configFile = files.find((file) => file.path === "tscircuit.config.json")
+
+  if (configFile) {
+    try {
+      const config = JSON.parse(configFile.content)
+
+      if (config && typeof config.mainEntrypoint === "string") {
+        const mainComponentPath = config.mainEntrypoint
+
+        const normalizedPath = mainComponentPath.startsWith("./")
+          ? mainComponentPath.substring(2)
+          : mainComponentPath
+
+        return files.find((file) => file.path === normalizedPath) ?? null
+      }
+    } catch {}
+  }
+
+  return null
+}
+
+export const findTargetFile = (
+  files: PackageFile[],
+  filePathFromUrl: string | null,
+): PackageFile | null => {
+  if (files.length === 0) {
+    return null
+  }
+
+  let targetFile: PackageFile | null = null
+
+  if (filePathFromUrl) {
+    targetFile = files.find((file) => file.path === filePathFromUrl) ?? null
+  }
+
+  if (!targetFile) {
+    targetFile = findMainEntrypointFileFromTscircuitConfig(files)
+  }
+
+  if (!targetFile) {
+    targetFile = files.find((file) => file.path === "index.tsx") ?? null
+  }
+
+  if (!targetFile) {
+    targetFile = files.find((file) => file.path.endsWith(".tsx")) ?? null
+  }
+
+  if (!targetFile) {
+    targetFile = files.find((file) => file.path === "index.ts") ?? null
+  }
+
+  if (!targetFile && files[0]) {
+    targetFile = files[0]
+  }
+
+  return targetFile
+}

package/src/lib/utils/load-prettier.ts

@@ -6,6 +6,9 @@ export async function loadPrettier() {
     loadScript(
       "https://cdn.jsdelivr.net/npm/prettier@2.8.8/parser-typescript.js",
     ),
+    loadScript(
+      "https://cdn.jsdelivr.net/npm/prettier@2.8.8/parser-markdown.js",
+    ),
   ])
 }
 

package/src/pages/404.tsx

@@ -1,9 +1,7 @@
-import React from "react"
 import { Helmet } from "react-helmet"
 import { Header2 } from "@/components/Header2"
 import Footer from "@/components/Footer"
-import { Button } from "@/components/ui/button"
-import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import { NotFound } from "@/components/NotFound"
 
 export function NotFoundPage({
   heading = "Page Not Found",
@@ -18,36 +16,7 @@ export function NotFoundPage({
         />
       </Helmet>
       <Header2 />
-      <main className="flex-1 flex items-center justify-center min-h-[90vh]">
-        <div className="container px-4 md:px-6 py-12 flex flex-col items-center text-center max-w-3xl">
-          <div className="mb-8 flex flex-col items-center justify-center">
-            <div className="mb-2">
-              <span className="text-3xl font-bold text-white bg-blue-500 px-4 py-2 rounded-md shadow-md inline-block">
-                404
-              </span>
-            </div>
-          </div>
-          <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl mb-4">
-            {heading}
-          </h1>
-          <p className="text-xl text-muted-foreground mb-8">
-            The page you're looking for doesn't exist or has been moved to
-            another address.
-          </p>
-          <div className="flex flex-col sm:flex-row gap-4">
-            <PrefetchPageLink href="/">
-              <Button size="lg" className="bg-blue-500 hover:bg-blue-600">
-                Return Home
-              </Button>
-            </PrefetchPageLink>
-            <PrefetchPageLink href="/search">
-              <Button size="lg" variant="outline">
-                Search Packages
-              </Button>
-            </PrefetchPageLink>
-          </div>
-        </div>
-      </main>
+      <NotFound heading={heading} />
       <Footer />
     </div>
   )

package/src/pages/package-editor.tsx

@@ -4,10 +4,15 @@ import Header from "@/components/Header"
 import { usePackage } from "@/hooks/use-package"
 import { Helmet } from "react-helmet-async"
 import { useCurrentPackageId } from "@/hooks/use-current-package-id"
+import { NotFound } from "@/components/NotFound"
+import { ErrorOutline } from "@/components/ErrorOutline"
 
 export const EditorPage = () => {
   const { packageId } = useCurrentPackageId()
   const { data: pkg, isLoading, error } = usePackage(packageId)
+  const uuid4RegExp = new RegExp(
+    /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-4[0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$/,
+  )
   return (
     <div className="overflow-x-hidden">
       <Helmet>
@@ -32,10 +37,16 @@ export const EditorPage = () => {
       </Helmet>
       <Header />
       {!error && <CodeAndPreview pkg={pkg} />}
-      {error && error.status === 404 && <h1>"Package Not Found"</h1>}
+      {error &&
+        (error.status === 404 || !uuid4RegExp.test(packageId ?? "")) && (
+          <NotFound heading="Package not found" />
+        )}
       {error && error.status !== 404 && (
-        <div className="flex flex-col">
-          Something strange happened<div>{error.message}</div>
+        <div className="min-h-screen grid place-items-center">
+          <ErrorOutline
+            error={error}
+            description={"There was an error loading the editor page"}
+          />
         </div>
       )}
       <Footer />