@tscircuit/fake-snippets 0.0.90 → 0.0.91

package/fake-snippets-api/routes/api/autocomplete/create_autocomplete.ts

@@ -118,6 +118,7 @@ export default withRouteSpec({
     prediction: z.string(),
   }),
 })(async (req, ctx) => {
+  return ctx.json({ prediction: "mock" })
   const openai = getOpenAIClient()
   const { prefix, suffix, model, language } = req.jsonBody
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.90",
+  "version": "0.0.91",
   "type": "module",
   "repository": {
     "type": "git",
@@ -77,16 +77,12 @@
     "@tailwindcss/typography": "^0.5.16",
     "@tscircuit/3d-viewer": "^0.0.279",
     "@tscircuit/assembly-viewer": "^0.0.1",
-    "@tscircuit/core": "^0.0.536",
     "@tscircuit/create-snippet-url": "^0.0.8",
     "@tscircuit/eval": "^0.0.244",
-    "@tscircuit/footprinter": "^0.0.186",
     "@tscircuit/layout": "^0.0.29",
-    "@tscircuit/math-utils": "^0.0.10",
     "@tscircuit/mm": "^0.0.8",
     "@tscircuit/pcb-viewer": "^1.11.194",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/props": "^0.0.246",
     "@tscircuit/runframe": "^0.0.669",
     "@tscircuit/schematic-viewer": "^2.0.21",
     "@types/babel__standalone": "^7.1.7",
@@ -108,7 +104,6 @@
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
     "change-case": "^5.4.4",
-    "circuit-json": "^0.0.190",
     "circuit-json-to-bom-csv": "^0.0.7",
     "circuit-json-to-gerber": "^0.0.25",
     "circuit-json-to-pnp-csv": "^0.0.7",
@@ -124,7 +119,7 @@
     "date-fns": "^4.1.0",
     "dotenv": "^16.5.0",
     "dsn-converter": "^0.0.60",
-    "easyeda": "^0.0.195",
+    "easyeda": "^0.0.203",
     "embla-carousel-react": "^8.3.0",
     "extract-codefence": "^0.0.4",
     "fflate": "^0.8.2",
@@ -139,7 +134,7 @@
     "jose": "^5.9.3",
     "jscad-electronics": "^0.0.25",
     "jszip": "^3.10.1",
-    "kicad-converter": "^0.0.16",
+    "kicad-converter": "^0.0.17",
     "ky": "^1.7.5",
     "lucide-react": "^0.488.0",
     "lz-string": "^1.5.0",
@@ -179,6 +174,7 @@
     "terser": "^5.27.0",
     "three": "^0.177.0",
     "three-stdlib": "^2.36.0",
+    "tscircuit": "^0.0.522",
     "tsup": "^8.5.0",
     "typescript": "^5.6.3",
     "use-async-memo": "^1.2.5",

package/src/ContextProviders.tsx

@@ -4,7 +4,6 @@ import { useEffect } from "react"
 import { useGlobalStore } from "./hooks/use-global-store"
 import { posthog } from "./lib/posthog"
 import { Toaster } from "react-hot-toast"
-import { Toaster as SonnerToaster } from "@/components/ui/sonner"
 import { populateQueryCacheWithSSRData } from "./lib/populate-query-cache-with-ssr-data"
 
 const staffGithubUsernames = [
@@ -66,7 +65,6 @@ export const ContextProviders = ({ children }: any) => {
         <PostHogIdentifier />
         {children}
         <Toaster position="bottom-right" />
-        <SonnerToaster position="bottom-left" />
       </HelmetProvider>
     </QueryClientProvider>
   )

package/src/components/PageSearchComponent.tsx

@@ -3,7 +3,7 @@ import { useAxios } from "@/hooks/use-axios"
 import { useLocation } from "wouter"
 import React, { useState } from "react"
 import { useQuery } from "react-query"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import { Search } from "lucide-react"
 import { Button } from "./ui/button"
 import { PackageCardSkeleton } from "./PackageCardSkeleton"
@@ -20,7 +20,7 @@ const PageSearchComponent: React.FC<PageSearchComponentProps> = ({
 }) => {
   const [location, setLocation] = useLocation()
   const axios = useAxios()
-  const snippetsBaseApiUrl = useSnippetsBaseApiUrl()
+  const snippetsBaseApiUrl = usePackagesBaseApiUrl()
 
   // Initialize search query directly from URL
   const [searchQuery, setSearchQuery] = useState(

package/src/components/SearchComponent.tsx

@@ -4,7 +4,7 @@ import { useLocation } from "wouter"
 import React, { useEffect, useRef, useState } from "react"
 import { useQuery } from "react-query"
 import { Alert } from "./ui/alert"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import { PrefetchPageLink } from "./PrefetchPageLink"
 import { CircuitBoard } from "lucide-react"
 import { cn } from "@/lib/utils"
@@ -60,7 +60,7 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
   const resultsRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
   const [location, setLocation] = useLocation()
-  const snippetsBaseApiUrl = useSnippetsBaseApiUrl()
+  const snippetsBaseApiUrl = usePackagesBaseApiUrl()
 
   const { data: searchResults, isLoading } = useQuery(
     ["packageSearch", searchQuery],

package/src/components/TrendingPackagesCarousel.tsx

@@ -4,7 +4,7 @@ import { StarFilledIcon } from "@radix-ui/react-icons"
 import { Link } from "wouter"
 import { Package } from "fake-snippets-api/lib/db/schema"
 import { useRef, useState } from "react"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 
 const CarouselItem = ({
   pkg,
@@ -36,7 +36,7 @@ export const TrendingPackagesCarousel = () => {
   const axios = useAxios()
   const scrollRef = useRef<HTMLDivElement>(null)
   const [isHovered, setIsHovered] = useState(false)
-  const apiBaseUrl = useSnippetsBaseApiUrl()
+  const apiBaseUrl = usePackagesBaseApiUrl()
 
   const { data: trendingPackages } = useQuery<Package[]>(
     "trendingPackages",

package/src/components/dialogs/import-component-dialog.tsx

@@ -0,0 +1,25 @@
+import { createUseDialog } from "./create-use-dialog"
+import {
+  ComponentSearchResult,
+  ImportComponentDialog as RunframeImportComponentDialog,
+} from "@tscircuit/runframe/runner"
+
+export const ImportComponentDialog = ({
+  open,
+  onOpenChange,
+  onComponentSelected,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => any
+  onComponentSelected: (pkg: ComponentSearchResult) => any
+}) => {
+  return (
+    <RunframeImportComponentDialog
+      isOpen={open}
+      onClose={() => onOpenChange(false)}
+      onImport={(data) => onComponentSelected(data)}
+    />
+  )
+}
+
+export const useImportComponentDialog = createUseDialog(ImportComponentDialog)

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

@@ -1,4 +1,4 @@
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import { useHotkeyCombo } from "@/hooks/use-hotkey"
 import { basicSetup } from "@/lib/codemirror/basic-setup"
 import {
@@ -82,7 +82,7 @@ export const CodeEditor = ({
   const viewRef = useRef<EditorView | null>(null)
   const ataRef = useRef<ReturnType<typeof setupTypeAcquisition> | null>(null)
   const lastReceivedTsFileTimeRef = useRef<number>(0)
-  const apiUrl = useSnippetsBaseApiUrl()
+  const apiUrl = usePackagesBaseApiUrl()
   const codeCompletionApi = useCodeCompletionApi()
   const [cursorPosition, setCursorPosition] = useState<number | null>(null)
   const [code, setCode] = useState(files[0]?.content || "")
@@ -329,17 +329,20 @@ export const CodeEditor = ({
     if (aiAutocompleteEnabled) {
       baseExtensions.push(
         inlineCopilot(async (prefix, suffix) => {
-          const res = await fetch("/api/autocomplete/create_autocomplete", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
+          const res = await fetch(
+            `${apiUrl}/autocomplete/create_autocomplete`,
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                prefix,
+                suffix,
+                language: "typescript",
+              }),
             },
-            body: JSON.stringify({
-              prefix,
-              suffix,
-              language: "typescript",
-            }),
-          })
+          )
 
           const { prediction } = await res.json()
           return prediction
@@ -661,6 +664,10 @@ export const CodeEditor = ({
         {showImportAndFormatButtons && (
           <CodeEditorHeader
             entrypointFileName={entryPointFileName}
+            appendNewFile={(path: string, content: string) => {
+              onFileContentChanged?.(path, content)
+            }}
+            createFile={handleCreateFile}
             fileSidebarState={
               [sidebarOpen, setSidebarOpen] as ReturnType<
                 typeof useState<boolean>

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

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from "react"
 import { Button } from "@/components/ui/button"
 import { handleManualEditsImportWithSupportForMultipleFiles } from "@/lib/handleManualEditsImportWithSupportForMultipleFiles"
-import { useImportPackageDialog } from "@/components/dialogs/import-package-dialog"
+import { useImportComponentDialog } from "@/components/dialogs/import-component-dialog"
 import { useToast } from "@/hooks/use-toast"
 import {
   DropdownMenu,
@@ -19,14 +19,16 @@ import {
   SelectValue,
 } from "../ui/select"
 import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
-import { Package } from "fake-snippets-api/lib/db/schema"
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
-import ai from "fake-snippets-api/routes/api/ai"
+import { convertRawEasyToTsx, fetchEasyEDAComponent } from "easyeda/browser"
+import { ComponentSearchResult } from "@tscircuit/runframe/runner"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
+import { ICreateFileProps, ICreateFileResult } from "@/hooks/useFileManagement"
 
 export type FileName = string
 
@@ -37,6 +39,8 @@ interface CodeEditorHeaderProps {
   fileSidebarState: ReturnType<typeof useState<boolean>>
   handleFileChange: (filename: FileName) => void
   entrypointFileName?: string
+  appendNewFile: (path: string, content: string) => void
+  createFile: (props: ICreateFileProps) => ICreateFileResult
   aiAutocompleteState: [boolean, React.Dispatch<React.SetStateAction<boolean>>]
 }
 
@@ -44,15 +48,18 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
   currentFile,
   files,
   updateFileContent,
+  appendNewFile,
   fileSidebarState,
   handleFileChange,
   entrypointFileName = "index.tsx",
+  createFile,
   aiAutocompleteState,
 }) => {
-  const { Dialog: ImportPackageDialog, openDialog: openImportDialog } =
-    useImportPackageDialog()
-  const { toast } = useToast()
+  const { Dialog: ImportComponentDialog, openDialog: openImportDialog } =
+    useImportComponentDialog()
+  const { toast, toastLibrary } = useToast()
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
+  const API_BASE = usePackagesBaseApiUrl()
   const [aiAutocompleteEnabled, setAiAutocompleteEnabled] = aiAutocompleteState
 
   const handleFormatFile = useCallback(() => {
@@ -144,6 +151,49 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
     }
   }, [currentFile, files, toast, updateFileContent])
 
+  const handleComponentImport = async (component: ComponentSearchResult) => {
+    if (component.source == "tscircuit.com") {
+      const newContent = `import {} from "@tsci/${component.owner}.${component.name}"\n${files[currentFile || ""]}`
+      updateFileContent(currentFile, newContent)
+    }
+    if (component.source == "jlcpcb") {
+      const jlcpcbComponent = await fetchEasyEDAComponent("C1", {
+        fetch: ((url, options: any) => {
+          return fetch(`${API_BASE}/proxy`, {
+            ...options,
+            headers: {
+              ...options?.headers,
+              "X-Target-Url": url.toString(),
+              "X-Sender-Origin": options?.headers?.origin ?? "",
+              "X-Sender-Host": options?.headers?.host ?? "https://easyeda.com",
+              "X-Sender-Referer": options?.headers?.referer ?? "",
+              "X-Sender-User-Agent": options?.headers?.userAgent ?? "",
+              "X-Sender-Cookie": options?.headers?.cookie ?? "",
+            },
+          })
+        }) as typeof fetch,
+      })
+      const tsxComponent = await convertRawEasyToTsx(jlcpcbComponent)
+      let componentName = component.name.replace(/ /g, "-")
+      if (files[`${componentName}.tsx`] || files[`./${componentName}.tsx`]) {
+        componentName = `${componentName}-1`
+      }
+      const createFileResult = createFile({
+        newFileName: `${componentName}.tsx`,
+        content: tsxComponent,
+        onError: (error) => {
+          throw error
+        },
+        openFile: false,
+      })
+      if (!createFileResult.newFileCreated) {
+        throw new Error("Failed to create file")
+      }
+      const newContent = `import ${componentName.replace(/-/g, "")} from "./${componentName}.tsx"\n${files[currentFile || ""]}`
+      updateFileContent(currentFile, newContent)
+    }
+  }
+
   return (
     <>
       <div className="flex items-center gap-2 px-2 border-b border-gray-200">
@@ -275,10 +325,17 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
             Format
           </Button>
         </div>
-        <ImportPackageDialog
-          onPackageSelected={(pkg: Package) => {
-            const newContent = `import {} from "@tsci/${pkg.owner_github_username}.${pkg.unscoped_name}"\n${files[currentFile || ""]}`
-            updateFileContent(currentFile, newContent)
+        <ImportComponentDialog
+          onComponentSelected={async (component) => {
+            toastLibrary.promise(handleComponentImport(component), {
+              loading: "Importing component...",
+              success: <p>Component imported successfully!</p>,
+              error: (error) => (
+                <p>
+                  Error importing component: {error.message || String(error)}
+                </p>
+              ),
+            })
           }}
         />
       </div>

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

@@ -385,60 +385,66 @@ export default function EditorNav({
                   <File className="mr-2 h-3 w-3" />
                   View Files
                 </DropdownMenuItem>
-                <DropdownMenuSub>
-                  <DropdownMenuSubTrigger
-                    className="text-xs"
-                    disabled={isChangingType || hasUnsavedChanges}
-                  >
-                    <Edit2 className="mr-2 h-3 w-3" />
-                    {isChangingType ? "Changing..." : "Change Type"}
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuSubContent>
+                {session?.github_username === pkg.owner_github_username && (
+                  <>
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger
+                        className="text-xs"
+                        disabled={isChangingType || hasUnsavedChanges}
+                      >
+                        <Edit2 className="mr-2 h-3 w-3" />
+                        {isChangingType ? "Changing..." : "Change Type"}
+                      </DropdownMenuSubTrigger>
+                      <DropdownMenuSubContent>
+                        <DropdownMenuItem
+                          className="text-xs"
+                          disabled={currentType === "board" || isChangingType}
+                          onClick={() => handleTypeChange("board")}
+                        >
+                          Board {currentType === "board" && "✓"}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          className="text-xs"
+                          disabled={currentType === "package" || isChangingType}
+                          onClick={() => handleTypeChange("package")}
+                        >
+                          Module {currentType === "package" && "✓"}
+                        </DropdownMenuItem>
+                      </DropdownMenuSubContent>
+                    </DropdownMenuSub>
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger className="text-xs">
+                        <Edit2 className="mr-2 h-3 w-3" />
+                        Change Package Visibility
+                      </DropdownMenuSubTrigger>
+                      <DropdownMenuSubContent>
+                        <DropdownMenuItem
+                          className="text-xs"
+                          disabled={isPrivate}
+                          onClick={() => updatePackageVisibilityToPrivate(true)}
+                        >
+                          Private {isPrivate && "✓"}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          className="text-xs"
+                          disabled={!isPrivate}
+                          onClick={() =>
+                            updatePackageVisibilityToPrivate(false)
+                          }
+                        >
+                          Public {!isPrivate && "✓"}
+                        </DropdownMenuItem>
+                      </DropdownMenuSubContent>
+                    </DropdownMenuSub>
                     <DropdownMenuItem
-                      className="text-xs"
-                      disabled={currentType === "board" || isChangingType}
-                      onClick={() => handleTypeChange("board")}
+                      className="text-xs text-red-600"
+                      onClick={() => openDeleteDialog()}
                     >
-                      Board {currentType === "board" && "✓"}
+                      <Trash2 className="mr-2 h-3 w-3" />
+                      Delete Package
                     </DropdownMenuItem>
-                    <DropdownMenuItem
-                      className="text-xs"
-                      disabled={currentType === "package" || isChangingType}
-                      onClick={() => handleTypeChange("package")}
-                    >
-                      Module {currentType === "package" && "✓"}
-                    </DropdownMenuItem>
-                  </DropdownMenuSubContent>
-                </DropdownMenuSub>
-                <DropdownMenuSub>
-                  <DropdownMenuSubTrigger className="text-xs">
-                    <Edit2 className="mr-2 h-3 w-3" />
-                    Change Package Visibility
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuSubContent>
-                    <DropdownMenuItem
-                      className="text-xs"
-                      disabled={isPrivate}
-                      onClick={() => updatePackageVisibilityToPrivate(true)}
-                    >
-                      Private {isPrivate && "✓"}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      className="text-xs"
-                      disabled={!isPrivate}
-                      onClick={() => updatePackageVisibilityToPrivate(false)}
-                    >
-                      Public {!isPrivate && "✓"}
-                    </DropdownMenuItem>
-                  </DropdownMenuSubContent>
-                </DropdownMenuSub>
-                <DropdownMenuItem
-                  className="text-xs text-red-600"
-                  onClick={() => openDeleteDialog()}
-                >
-                  <Trash2 className="mr-2 h-3 w-3" />
-                  Delete Package
-                </DropdownMenuItem>
+                  </>
+                )}
                 <DropdownMenuItem className="text-xs text-gray-500" disabled>
                   @tscircuit/core@{tscircuitCorePkg.version}
                 </DropdownMenuItem>

package/src/hooks/use-axios.ts

@@ -1,10 +1,10 @@
 import axios from "redaxios"
 import { useMemo } from "react"
-import { useSnippetsBaseApiUrl } from "./use-snippets-base-api-url"
 import { useGlobalStore } from "./use-global-store"
+import { usePackagesBaseApiUrl } from "./use-packages-base-api-url"
 
 export const useAxios = () => {
-  const snippetsBaseApiUrl = useSnippetsBaseApiUrl()
+  const snippetsBaseApiUrl = usePackagesBaseApiUrl()
   const session = useGlobalStore((s) => s.session)
   return useMemo(() => {
     const instance = axios.create({

package/src/hooks/use-packages-base-api-url.ts

@@ -0,0 +1,3 @@
+export const usePackagesBaseApiUrl = () => {
+  return import.meta.env.VITE_SNIPPETS_API_URL ?? "/api"
+}

package/src/hooks/use-request-ai-review-mutation.ts

@@ -34,7 +34,7 @@ export const useRequestAiReviewMutation = ({
       onSuccess: ({ package_release, ai_review }) => {
         toast({
           title: "AI review requested",
-          description: "An AI review has been generated.",
+          description: "An AI review has been requested.",
         })
         queryClient.invalidateQueries(["packageRelease"])
         onSuccess?.(package_release, ai_review)

package/src/hooks/use-sign-in.ts

@@ -1,9 +1,9 @@
 import { useGlobalStore } from "./use-global-store"
 import { useIsUsingFakeApi } from "./use-is-using-fake-api"
-import { useSnippetsBaseApiUrl } from "./use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "./use-packages-base-api-url"
 
 export const useSignIn = () => {
-  const snippetsBaseApiUrl = useSnippetsBaseApiUrl()
+  const snippetsBaseApiUrl = usePackagesBaseApiUrl()
   const isUsingFakeApi = useIsUsingFakeApi()
   const setSession = useGlobalStore((s) => s.setSession)
   return () => {

package/src/hooks/use-toast.tsx

@@ -63,6 +63,7 @@ function useToast() {
   return {
     toast,
     dismiss: toastLibrary.dismiss,
+    toastLibrary,
   }
 }
 

package/src/hooks/useFileManagement.ts

@@ -20,7 +20,9 @@ import { encodeFsMapToUrlHash } from "@/lib/encodeFsMapToUrlHash"
 
 export interface ICreateFileProps {
   newFileName: string
+  content?: string
   onError: (error: Error) => void
+  openFile?: boolean
 }
 export interface ICreateFileResult {
   newFileCreated: boolean
@@ -182,6 +184,8 @@ export function useFileManagement({
   const createFile = ({
     newFileName,
     onError,
+    content,
+    openFile = true,
   }: ICreateFileProps): ICreateFileResult => {
     newFileName = newFileName.trim()
     if (!newFileName) {
@@ -206,11 +210,12 @@ export function useFileManagement({
     }
     const updatedFiles = [
       ...(localFiles || []),
-      { path: newFileName, content: "" },
+      { path: newFileName, content: content || "" },
     ]
     setLocalFiles(updatedFiles)
-    // immediately select the newly created file
-    setCurrentFile(newFileName)
+    if (openFile) {
+      setCurrentFile(newFileName)
+    }
     return {
       newFileCreated: true,
     }

package/src/main.tsx

@@ -6,9 +6,6 @@ if (typeof window !== "undefined" && !window.__APP_LOADED_AT) {
   window.__APP_LOADED_AT = Date.now()
 }
 import "./index.css"
-import { setupBuildWatcher } from "./build-watcher"
-
-setupBuildWatcher()
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

package/src/pages/dashboard.tsx

@@ -12,7 +12,7 @@ import { PrefetchPageLink } from "@/components/PrefetchPageLink"
 import { PackagesList } from "@/components/PackagesList"
 import { Helmet } from "react-helmet-async"
 import { useSignIn } from "@/hooks/use-sign-in"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import { useConfirmDeletePackageDialog } from "@/components/dialogs/confirm-delete-package-dialog"
 import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
 import { PackageCard } from "@/components/PackageCard"
@@ -81,7 +81,7 @@ export const DashboardPage = () => {
     },
   )
 
-  const baseUrl = useSnippetsBaseApiUrl()
+  const baseUrl = usePackagesBaseApiUrl()
 
   const handleDeleteClick = (e: React.MouseEvent, pkg: Package) => {
     e.preventDefault() // Prevent navigation

package/src/pages/dev-login.tsx

@@ -1,10 +1,10 @@
 import { useGlobalStore } from "@/hooks/use-global-store"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import { useState } from "react"
 import { useLocation } from "wouter"
 
 export const DevLoginPage = () => {
-  const snippetsBaseApiUrl = useSnippetsBaseApiUrl()
+  const snippetsBaseApiUrl = usePackagesBaseApiUrl()
   const [username, setUsername] = useState("")
   const setSession = useGlobalStore((s) => s.setSession)
   const [, setLocation] = useLocation()

package/src/pages/latest.tsx

@@ -6,7 +6,7 @@ import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import { Search, Keyboard, Cpu, Layers, LucideBellElectric } from "lucide-react"
 import { Input } from "@/components/ui/input"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import {
   Select,
   SelectContent,
@@ -18,7 +18,7 @@ import PackageSearchResults from "@/components/PackageSearchResults"
 
 const LatestPage: React.FC = () => {
   const axios = useAxios()
-  const apiBaseUrl = useSnippetsBaseApiUrl()
+  const apiBaseUrl = usePackagesBaseApiUrl()
   const [searchQuery, setSearchQuery] = useState("")
   const [category, setCategory] = useState("all")
 

package/src/pages/search.tsx

@@ -7,7 +7,7 @@ import Footer from "@/components/Footer"
 import { Input } from "@/components/ui/input"
 import { Search } from "lucide-react"
 import PackageSearchResults from "@/components/PackageSearchResults"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import {
   Select,
   SelectContent,
@@ -19,7 +19,7 @@ import { Package } from "fake-snippets-api/lib/db/schema"
 
 export const SearchPage = () => {
   const axios = useAxios()
-  const apiBaseUrl = useSnippetsBaseApiUrl()
+  const apiBaseUrl = usePackagesBaseApiUrl()
   const [searchParams, setSearchParams] = useSearchParams()
 
   const [searchQuery, setSearchQuery] = useState(searchParams.get("q") || "")

package/src/pages/trending.tsx

@@ -4,7 +4,7 @@ import { useAxios } from "@/hooks/use-axios"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import { useSearchParams } from "wouter"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import { Search, Keyboard, Cpu, Layers, LucideBellElectric } from "lucide-react"
 import { Input } from "@/components/ui/input"
 import {
@@ -19,7 +19,7 @@ import PackageSearchResults from "@/components/PackageSearchResults"
 
 const TrendingPage: React.FC = () => {
   const axios = useAxios()
-  const apiBaseUrl = useSnippetsBaseApiUrl()
+  const apiBaseUrl = usePackagesBaseApiUrl()
   const [searchParams, setSearchParams] = useSearchParams()
 
   const [searchQuery, setSearchQuery] = useState(searchParams.get("q") || "")