@tscircuit/fake-snippets 0.0.44 → 0.0.46

package/src/components/NotFound.tsx

@@ -0,0 +1,37 @@
+import { Button } from "@/components/ui/button"
+import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+
+export function NotFound({ heading = "Page not found" }: { heading?: string }) {
+  return (
+    <section 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>
+    </section>
+  )
+}

package/src/components/PreviewContent.tsx

@@ -55,12 +55,6 @@ export interface PreviewContentProps {
   onManualEditsFileContentChange?: (newmanualEditsFileContent: string) => void
 }
 
-declare global {
-  interface Window {
-    TSCIRCUIT_3D_OBJECT_REF: any
-  }
-}
-
 export const PreviewContent = ({
   code,
   triggerRunTsx,

package/src/components/TrendingSnippetCarousel.tsx

@@ -32,7 +32,7 @@ export const TrendingSnippetCarousel = () => {
       {trendingSnippets?.length ? (
         <>
           <div className="container mx-auto px-4">
-            <h2 className="text-2xl font-semibold mb-6">Trending Snippets</h2>
+            <h2 className="text-2xl font-semibold mb-6">Trending Packages</h2>
           </div>
           <div
             className="flex gap-6 overflow-x-hidden relative"

package/src/components/ViewPackagePage/components/package-header.tsx

@@ -8,8 +8,9 @@ import {
 } from "@/hooks/use-package-stars"
 import { LockClosedIcon } from "@radix-ui/react-icons"
 import { GitFork, Star } from "lucide-react"
-import { useToast } from "@/hooks/use-toast"
 import { Link } from "wouter"
+import { useOrderDialog } from "@tscircuit/runframe"
+import { useEffect } from "react"
 
 interface PackageInfo {
   name: string
@@ -37,8 +38,7 @@ export default function PackageHeader({
   const author = packageInfo?.owner_github_username
   const packageName = packageInfo?.unscoped_name
 
-  const { toast } = useToast()
-
+  const { OrderDialog, isOpen, open, close, stage, setStage } = useOrderDialog()
   const { data: starData, isLoading: isStarDataLoading } =
     usePackageStarsByName(packageInfo?.name ?? null)
   const { addStar, removeStar } = usePackageStarMutationByName(
@@ -66,6 +66,12 @@ export default function PackageHeader({
   const isStarLoading =
     isStarDataLoading || addStar.isLoading || removeStar.isLoading
 
+  useEffect(() => {
+    window.TSCIRCUIT_REGISTRY_API_BASE_URL =
+      import.meta.env.VITE_TSCIRCUIT_REGISTRY_API_URL ??
+      `${window.location.origin}/api`
+  }, [])
+
   return (
     <header className="bg-white border-b border-gray-200 py-4">
       <div className="max-w-[1200px] mx-auto px-4">
@@ -103,6 +109,15 @@ export default function PackageHeader({
             )}
           </div>
           <div className="items-center space-x-2 hidden md:flex">
+            {/* WIP: add order button */}
+            {/* <Button
+              size="sm"
+              variant="default"
+              className="bg-blue-600 hover:bg-blue-700"
+              onClick={open}
+            >
+              Place Order
+            </Button> */}
             <Button
               variant="outline"
               size="sm"
@@ -165,6 +180,12 @@ export default function PackageHeader({
           </div>
         </div>
       </div>
+      <OrderDialog
+        isOpen={isOpen}
+        onClose={close}
+        stage={stage}
+        setStage={setStage}
+      />
     </header>
   )
 }

package/src/components/ViewPackagePage/utils/is-hidden-file.ts

@@ -25,7 +25,6 @@ export const isHiddenFile = (filePath: string): boolean => {
     /\.eslintrc(\.[^/]*)?$/,
     /\.prettierrc(\.[^/]*)?$/,
     /\.babelrc$/,
-    /tscircuit\.config\.json/,
     /tsconfig\.json$/,
     /jest\.config\.[^/]*$/,
     /vite\.config\.[^/]*$/,

package/src/components/dialogs/package-visibility-settings-dialog.tsx

@@ -1,6 +1,12 @@
 import { useState } from "react"
 import { Button } from "../ui/button"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "../ui/dialog"
 import { Label } from "../ui/label"
 import { RadioGroup, RadioGroupItem } from "../ui/radio-group"
 import { createUseDialog } from "./create-use-dialog"
@@ -23,6 +29,9 @@ export const PackageVisibilitySettingsDialog = ({
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Package Privacy Settings</DialogTitle>
+          <DialogDescription>
+            Control whether your package is publicly visible or private.
+          </DialogDescription>
         </DialogHeader>
         <div className="py-1">
           <RadioGroup

package/src/components/dialogs/view-ts-files-dialog.tsx

@@ -13,12 +13,6 @@ interface ViewTsFilesDialogProps {
   onOpenChange: (open: boolean) => void
 }
 
-declare global {
-  interface Window {
-    __DEBUG_CODE_EDITOR_FS_MAP: Map<string, string>
-  }
-}
-
 export const ViewTsFilesDialog: React.FC<ViewTsFilesDialogProps> = ({
   open,
   onOpenChange,

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

@@ -9,7 +9,6 @@ import { decodeUrlHashToText } from "@/lib/decodeUrlHashToText"
 import { getSnippetTemplate } from "@/lib/get-snippet-template"
 import { cn } from "@/lib/utils"
 import { parseJsonOrNull } from "@/lib/utils/parseJsonOrNull"
-import "@/prettier"
 import type { Package } from "fake-snippets-api/lib/db/schema"
 import { Loader2 } from "lucide-react"
 import { useEffect, useMemo, useState } from "react"
@@ -23,12 +22,13 @@ import { useCreatePackageReleaseMutation } from "@/hooks/use-create-package-rele
 import { useUpdatePackageFilesMutation } from "@/hooks/useUpdatePackageFilesMutation"
 import { useUpdatePackageMutation } from "@/hooks/useUpdatePackageMutation"
 import { usePackageFilesLoader } from "@/hooks/usePackageFilesLoader"
+import { findTargetFile } from "@/lib/utils/findTargetFile"
 
 interface Props {
   pkg?: Package
 }
 
-interface PackageFile {
+export interface PackageFile {
   path: string
   content: string
 }
@@ -94,6 +94,8 @@ export function CodeAndPreview({ pkg }: Props) {
   const [isPrivate, setIsPrivate] = useState(false)
 
   const entryPointCode = useMemo(() => {
+    const entryPointFile = findTargetFile(pkgFilesWithContent, null)
+    if (entryPointFile && entryPointFile.content) return entryPointFile.content
     return (
       pkgFilesWithContent.find((x) => x.path === "index.tsx")?.content ??
       defaultCode
@@ -147,6 +149,10 @@ export function CodeAndPreview({ pkg }: Props) {
   const { data: loadedFiles, isLoading: isLoadingFiles } =
     usePackageFilesLoader(pkg)
 
+  const [pkgFilesLoaded, setPkgFilesLoaded] = useState<boolean>(
+    urlParams.package_id ? false : true,
+  )
+
   useEffect(() => {
     if (!pkgFiles.data?.length) {
       if (pkg && pkgFilesWithContent.length === 0) {
@@ -171,6 +177,7 @@ export function CodeAndPreview({ pkg }: Props) {
       }
 
       setPkgFilesWithContent(processedResults)
+      setPkgFilesLoaded(true)
       setInitialFilesLoad(processedResults)
       setLastRunCode(
         processedResults.find((x) => x.path === "index.tsx")?.content ??
@@ -185,12 +192,6 @@ export function CodeAndPreview({ pkg }: Props) {
     defaultCode,
   ])
 
-  // useEffect(() => {
-  //   if (pkg && pkgFiles.data) {
-  //     loadPkgFiles()
-  //   }
-  // }, [pkg, pkgFiles.data])
-
   const createPackageMutation = useCreatePackageMutation()
 
   const { mutate: createRelease, isLoading: isCreatingRelease } =
@@ -303,11 +304,24 @@ export function CodeAndPreview({ pkg }: Props) {
         : `${importStatement}\ncircuit.add(\n  <board>\n    <Snippet name="U1" />\n  </board>\n)`
 
     return {
+      ...pkgFilesWithContent.reduce(
+        (acc, file) => {
+          acc[file.path] = file.content
+          return acc
+        },
+        {} as Record<string, string>,
+      ),
       "index.tsx": entryPointCode ?? "// No Default Code Found",
       "manual-edits.json": manualEditsFileContent ?? "{}",
       "main.tsx": entrypointContent.trim(),
     }
-  }, [manualEditsFileContent, entryPointCode, code, packageType])
+  }, [
+    manualEditsFileContent,
+    entryPointCode,
+    code,
+    packageType,
+    pkgFilesWithContent,
+  ])
 
   if ((!pkg && urlParams.package_id) || pkgFiles.isLoading) {
     return (
@@ -355,6 +369,7 @@ export function CodeAndPreview({ pkg }: Props) {
               )
             }}
             onDtsChange={setDts}
+            pkgFilesLoaded={pkgFilesLoaded}
           />
         </div>
         {showPreview && (

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" />