@tscircuit/fake-snippets 0.0.44 → 0.0.46

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

package/src/pages/user-profile.tsx

@@ -15,12 +15,20 @@ import type React from "react"
 import { useState } from "react"
 import { useQuery } from "react-query"
 import { useParams } from "wouter"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
 
 export const UserProfilePage = () => {
   const { username } = useParams()
   const axios = useAxios()
   const [searchQuery, setSearchQuery] = useState("")
   const [activeTab, setActiveTab] = useState("all")
+  const [filter, setFilter] = useState("most-recent") // Changed default from "newest" to "most-recent"
   const session = useGlobalStore((s) => s.session)
   const isCurrentUserProfile = username === session?.github_username
   const { Dialog: DeleteDialog, openDialog: openDeleteDialog } =
@@ -55,12 +63,31 @@ export const UserProfilePage = () => {
   const isLoading =
     activeTab === "starred" ? isLoadingStarredSnippets : isLoadingUserSnippets
 
-  const filteredSnippets = snippetsToShow?.filter((snippet) => {
-    return (
-      !searchQuery ||
-      snippet.unscoped_name.toLowerCase().includes(searchQuery.toLowerCase())
-    )
-  })
+  const filteredSnippets = snippetsToShow
+    ?.filter((snippet) => {
+      return (
+        !searchQuery ||
+        snippet.unscoped_name
+          .toLowerCase()
+          .includes(searchQuery.toLowerCase().trim())
+      )
+    })
+    ?.sort((a, b) => {
+      switch (filter) {
+        case "most-recent":
+          return b.updated_at.localeCompare(a.updated_at)
+        case "least-recent":
+          return a.updated_at.localeCompare(b.updated_at)
+        case "most-starred":
+          return (b.star_count || 0) - (a.star_count || 0)
+        case "a-z":
+          return a.unscoped_name.localeCompare(b.unscoped_name)
+        case "z-a":
+          return b.unscoped_name.localeCompare(a.unscoped_name)
+        default:
+          return 0
+      }
+    })
 
   const handleDeleteClick = (e: React.MouseEvent, snippet: Snippet) => {
     e.preventDefault() // Prevent navigation
@@ -105,13 +132,27 @@ export const UserProfilePage = () => {
             <TabsTrigger value="starred">Starred Packages</TabsTrigger>
           </TabsList>
         </Tabs>
-        <Input
-          type="text"
-          placeholder="Searching User Packages..."
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          className="mb-4"
-        />
+        <div className="flex gap-4 mb-4">
+          <Input
+            type="text"
+            placeholder="Searching User Packages..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="mb-4"
+          />
+          <Select value={filter} onValueChange={setFilter}>
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="Sort by" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="most-recent">Most Recent</SelectItem>
+              <SelectItem value="least-recent">Least Recent</SelectItem>
+              <SelectItem value="most-starred">Most Starred</SelectItem>
+              <SelectItem value="a-z">A-Z</SelectItem>
+              <SelectItem value="z-a">Z-A</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
         {isLoading ? (
           <div>
             {activeTab === "starred"
@@ -120,20 +161,18 @@ export const UserProfilePage = () => {
           </div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {filteredSnippets
-              ?.sort((a, b) => b.updated_at.localeCompare(a.updated_at))
-              ?.map((snippet) => (
-                <SnippetCard
-                  key={snippet.snippet_id}
-                  snippet={snippet}
-                  baseUrl={baseUrl}
-                  showOwner={activeTab === "starred"}
-                  isCurrentUserSnippet={
-                    isCurrentUserProfile && activeTab === "all"
-                  }
-                  onDeleteClick={handleDeleteClick}
-                />
-              ))}
+            {filteredSnippets?.map((snippet) => (
+              <SnippetCard
+                key={snippet.snippet_id}
+                snippet={snippet}
+                baseUrl={baseUrl}
+                showOwner={activeTab === "starred"}
+                isCurrentUserSnippet={
+                  isCurrentUserProfile && activeTab === "all"
+                }
+                onDeleteClick={handleDeleteClick}
+              />
+            ))}
           </div>
         )}
       </div>

package/src/components/FootprintDialog.tsx

@@ -1,339 +0,0 @@
-import { Input } from "./ui/input"
-import { useEffect, useMemo, useState } from "react"
-import { parseFootprintParams } from "../lib/utils/parseFootprintParams"
-import ParametersEditor from "./ParametersEditor"
-import { convertCircuitJsonToPcbSvg } from "circuit-to-svg"
-import { fp, getFootprintNamesByType } from "@tscircuit/footprinter"
-import { useToast } from "../hooks/use-toast"
-import { Button } from "./ui/button"
-import { FileName } from "./CodeEditorHeader"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "./ui/dialog"
-import { Copy, Check } from "lucide-react"
-import { Combobox } from "./ui/combobox"
-
-interface FootprintDialogProps {
-  currentFile: FileName
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  updateFileContent: (filename: FileName, content: string) => void
-  files: Record<string, string>
-  cursorPosition?: number | null
-}
-
-const PARAM_NAMES: any = {
-  p: "Pitch",
-  w: "Width",
-  num_pins: "Number of Pins",
-  pl: "Pad Length",
-  pw: "Pad Width",
-  id: "Inner Diameter",
-  od: "Outer Diameter",
-}
-
-export const FootprintDialog = ({
-  currentFile,
-  open,
-  onOpenChange,
-  updateFileContent,
-  files,
-  cursorPosition,
-}: FootprintDialogProps) => {
-  const [footprintString, setFootprintString] = useState("")
-  const [footprintName, setFootprintName] = useState("")
-  const [previewSvg, setPreviewSvg] = useState<string | null>(null)
-  const [chipName, setChipName] = useState("")
-  const [footprintNameError, setFootprintNameError] = useState(false)
-  const [copied, setCopied] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const { toast } = useToast()
-
-  const { normalFootprintNames } = getFootprintNamesByType()
-
-  useEffect(() => {
-    if (copied) {
-      const timeout = setTimeout(() => {
-        setCopied(false)
-      }, 1000)
-      return () => clearTimeout(timeout)
-    }
-  }, [copied])
-
-  const params: any = useMemo(() => {
-    try {
-      return fp.string(footprintString).json()
-    } catch (error) {
-      return null
-    }
-  }, [footprintName, footprintString])
-
-  const updateFootprintString = (baseName: string, currentParams: any) => {
-    try {
-      const parsedParams = parseFootprintParams(currentParams)
-
-      if (parsedParams.missing && Array.isArray(parsedParams.missing)) {
-        parsedParams.missing =
-          parsedParams.missing.length > 0
-            ? `missing(${parsedParams.missing.join(",")})`
-            : "missing()"
-      }
-
-      if (
-        parsedParams.grid === "0x0" ||
-        parsedParams.grid === "0x" ||
-        /^(\d+x0|0x\d+)$/.test(parsedParams.grid as string)
-      ) {
-        delete parsedParams.grid
-      }
-
-      const paramsString = Object.entries(parsedParams)
-        .filter(([key]) => key !== "fn" && key !== "num_pins")
-        .map(([key, val]) => {
-          if (typeof val === "boolean") return val ? key : ""
-          if (key === "missing") return val
-          return `${key}${val}`
-        })
-        .filter((item) => item !== "")
-        .join("_")
-
-      const newFootprintString = paramsString
-        ? `${baseName}_${paramsString}`
-        : baseName
-      setFootprintString(newFootprintString)
-      handleFootprintPreview(newFootprintString)
-    } catch (error) {
-      console.error("Error updating footprint string:", error)
-    }
-  }
-
-  const updateParam = (
-    paramName: string,
-    value: string | number | boolean | string[],
-  ) => {
-    try {
-      let currentParams = parseFootprintParams({ ...params })
-      if (paramName === "num_pins") {
-        if (Number(value) < 1) value = 1
-        if (Number(value) > 4000) value = 4000
-        const baseNameWithoutNumber = footprintName.replace(/\d+$/, "")
-        const newName = `${baseNameWithoutNumber}${value}`
-        updateFootprintString(newName, currentParams)
-        return
-      }
-
-      currentParams[paramName] = value
-      if (currentParams.missing && Array.isArray(currentParams.missing)) {
-        currentParams.missing =
-          currentParams.missing.length > 0
-            ? `missing(${currentParams.missing.join(",")})`
-            : "missing()"
-      }
-      currentParams = parseFootprintParams(currentParams)
-      const pinMatch = footprintString.match(/\d+(?=(_|$))/)
-      const pinNumber = pinMatch ? pinMatch[0] : ""
-      const baseNameWithoutNumber = footprintName.replace(/\d+$/, "")
-      const nameWithNumber = pinNumber
-        ? `${baseNameWithoutNumber}${pinNumber}`
-        : footprintName
-
-      updateFootprintString(nameWithNumber, currentParams)
-    } catch (error) {
-      console.error("Error updating parameter:", error)
-    }
-  }
-
-  const handleFootprintPreview = async (str: string) => {
-    try {
-      const circuitJson = fp.string(str).circuitJson()
-      const svg = convertCircuitJsonToPcbSvg(circuitJson)
-      setFootprintNameError(false)
-      setPreviewSvg(svg)
-      setError(null)
-    } catch (error) {
-      setFootprintNameError(true)
-      setPreviewSvg(null)
-      setError(
-        error instanceof Error
-          ? error.message
-          : "Invalid footprint configuration",
-      )
-    }
-  }
-
-  const handleInsertFootprint = () => {
-    try {
-      const tsxCode = `\n
-    <chip
-      name="${chipName}"
-      footprint="${footprintString}"
-    />\n`
-      const currentContent = files[currentFile]
-
-      if (cursorPosition !== undefined && cursorPosition !== null) {
-        const newContent =
-          currentContent.slice(0, cursorPosition) +
-          tsxCode +
-          currentContent.slice(cursorPosition)
-        updateFileContent(currentFile, newContent)
-      } else {
-        // No cursor position, look for </board> tag
-        const boardClosingTagIndex = currentContent.lastIndexOf("</board>")
-
-        if (boardClosingTagIndex !== -1) {
-          // Insert before the closing board tag
-          const newContent =
-            currentContent.slice(0, boardClosingTagIndex) +
-            tsxCode +
-            currentContent.slice(boardClosingTagIndex)
-          updateFileContent(currentFile, newContent)
-        } else {
-          const lastParenIndex = currentContent.lastIndexOf(")")
-
-          if (lastParenIndex !== -1) {
-            const newContent =
-              currentContent.slice(0, lastParenIndex) +
-              tsxCode +
-              currentContent.slice(lastParenIndex)
-            updateFileContent(currentFile, newContent)
-          } else {
-            // If no closing parenthesis found, append to end of file
-            updateFileContent(currentFile, currentContent + tsxCode)
-          }
-        }
-      }
-
-      setChipName("")
-    } catch (error) {
-      console.error("Error inserting footprint:", error)
-      toast({
-        title: "Error",
-        description: "Failed to insert footprint",
-        variant: "destructive",
-      })
-    }
-  }
-
-  const handleCopyToClipboard = async () => {
-    try {
-      await navigator.clipboard.writeText(footprintString)
-      setCopied(true)
-    } catch (err) {
-      console.error("Failed to copy to clipboard:", err)
-    }
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-[1160px] h-full flex flex-col overflow-x-scroll">
-        <DialogHeader>
-          <DialogTitle>Insert Chip</DialogTitle>
-          <DialogDescription>
-            Choose a footprint type and configure its parameters. The footprint
-            will be inserted at your cursor position.
-          </DialogDescription>
-        </DialogHeader>
-        <div className="w-fit h-fit flex gap-4 pt-4">
-          <div className="space-y-4 min-w-[280px]">
-            <div>
-              <label className="text-sm font-medium">Chip Name</label>
-              <Input
-                value={chipName}
-                onChange={(e) => setChipName(e.target.value)}
-                placeholder="Enter chip name (e.g., U1)..."
-                className="mt-1"
-              />
-            </div>
-            <div>
-              <label className="text-sm font-medium">Footprint Name</label>
-              <Combobox
-                value={footprintName}
-                onChange={(value) => {
-                  setFootprintName(value)
-                  try {
-                    let newParams = fp.string(value).json()
-                    updateFootprintString(value, newParams)
-                  } catch (error) {
-                    console.error("Error updating footprint string:", error)
-                    setFootprintString(value)
-                    handleFootprintPreview(value)
-                  }
-                }}
-                options={normalFootprintNames}
-                placeholder="Select footprint..."
-                searchPlaceholder="Search footprints..."
-                emptyText="No footprints found."
-                className="mt-1"
-              />
-            </div>
-            <div>
-              <label className="text-sm font-medium">Footprint String</label>
-              <div className="flex items-center justify-center mt-1 gap-1">
-                <Input
-                  readOnly
-                  value={footprintString}
-                  onChange={(e) => {
-                    setFootprintString(e.target.value)
-                    handleFootprintPreview(e.target.value)
-                  }}
-                  placeholder="Complete footprint string..."
-                  className={`bg-gray-50 text-gray-500 ${footprintNameError && "bg-red-50 border-red-200"}`}
-                />
-                <Button
-                  size="icon"
-                  variant="outline"
-                  onClick={handleCopyToClipboard}
-                  className={`shrink-0 ${copied && "text-green-500 border-green-500"}`}
-                  title="Copy to clipboard"
-                >
-                  {copied ? (
-                    <Check className="h-4 w-4" />
-                  ) : (
-                    <Copy className="h-4 w-4" />
-                  )}
-                </Button>
-              </div>
-            </div>
-            {params && (
-              <ParametersEditor
-                params={params}
-                updateParam={updateParam}
-                paramNames={PARAM_NAMES}
-              />
-            )}
-            <Button
-              onClick={() => {
-                handleInsertFootprint()
-                onOpenChange(false)
-              }}
-              disabled={!footprintString || !chipName}
-              className="w-full"
-            >
-              Insert Footprint
-            </Button>
-          </div>
-          <div className="flex flex-col">
-            <div className="rounded-xl overflow-hidden w-[800px] h-[600px]">
-              {previewSvg && (
-                <div
-                  dangerouslySetInnerHTML={{
-                    __html: previewSvg,
-                  }}
-                />
-              )}
-            </div>
-            {error && (
-              <div className="mt-2 p-2 text-sm text-red-600 bg-red-50 border border-red-200 rounded">
-                {error}
-              </div>
-            )}
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}