@tscircuit/fake-snippets 0.0.67 → 0.0.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "type": "module",
   "repository": {
     "type": "git",
@@ -70,7 +70,6 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@tscircuit/3d-viewer": "^0.0.142",
     "@tscircuit/eval": "^0.0.198",
     "@tscircuit/footprinter": "^0.0.124",
     "@tscircuit/layout": "^0.0.29",
@@ -148,7 +147,7 @@
     "@tailwindcss/typography": "^0.5.16",
     "@tscircuit/core": "^0.0.384",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "^0.0.461",
+    "@tscircuit/runframe": "^0.0.485",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",

package/src/App.tsx

@@ -61,12 +61,10 @@ const EditorPage = lazyImport(async () => {
 const LandingPage = lazyImport(() => import("@/pages/landing"))
 const MyOrdersPage = lazyImport(() => import("@/pages/my-orders"))
 const LatestPage = lazyImport(() => import("@/pages/latest"))
-const PreviewPage = lazyImport(() => import("@/pages/preview"))
 const QuickstartPage = lazyImport(() => import("@/pages/quickstart"))
 const SearchPage = lazyImport(() => import("@/pages/search"))
 const SettingsPage = lazyImport(() => import("@/pages/settings"))
 const UserProfilePage = lazyImport(() => import("@/pages/user-profile"))
-const ViewOrderPage = lazyImport(() => import("@/pages/view-order"))
 const DevLoginPage = lazyImport(() => import("@/pages/dev-login"))
 const BetaPage = lazyImport(() => import("@/pages/beta"))
 const ViewPackagePage = lazyImport(() => import("@/pages/view-package"))
@@ -123,8 +121,6 @@ function App() {
             <Route path="/trending" component={TrendingPage} />
             <Route path="/authorize" component={AuthenticatePage} />
             <Route path="/my-orders" component={MyOrdersPage} />
-            <Route path="/orders/:orderId" component={ViewOrderPage} />
-            <Route path="/preview" component={PreviewPage} />
             <Route path="/dev-login" component={DevLoginPage} />
             <Route path="/:username" component={UserProfilePage} />
             <Route path="/:author/:packageName" component={ViewPackagePage} />

package/src/components/CmdKMenu.tsx

@@ -7,7 +7,7 @@ import { Package, Snippet } from "fake-snippets-api/lib/db/schema"
 import React from "react"
 import { useQuery } from "react-query"
 
-type SnippetType = "board" | "package" | "model" | "footprint" | "snippet"
+type SnippetType = "board" | "package" | "model" | "footprint"
 
 interface Template {
   name: string
@@ -31,13 +31,13 @@ const CmdKMenu = () => {
 
   // Search results query
   const { data: searchResults = [], isLoading: isSearching } = useQuery(
-    ["snippetSearch", searchQuery],
+    ["packageSearch", searchQuery],
     async () => {
       if (!searchQuery) return []
-      const { data } = await axios.get("/snippets/search", {
-        params: { q: searchQuery },
+      const { data } = await axios.post("/packages/search", {
+        query: searchQuery,
       })
-      return data.snippets || []
+      return data.packages || []
     },
     {
       enabled: Boolean(searchQuery),
@@ -114,7 +114,7 @@ const CmdKMenu = () => {
             />
           </svg>
           <Command.Input
-            placeholder="Search snippets and commands..."
+            placeholder="Search packages and commands..."
             value={searchQuery}
             onValueChange={setSearchQuery}
             className="w-full h-12 bg-transparent border-none outline-none text-gray-900 dark:text-gray-100 placeholder-gray-500"
@@ -133,27 +133,27 @@ const CmdKMenu = () => {
                   heading="Search Results"
                   className="px-2 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400"
                 >
-                  {searchResults.map((snippet: Snippet) => (
+                  {searchResults.map((pkg: Package) => (
                     <Command.Item
-                      key={snippet.snippet_id}
-                      value={snippet.name || snippet.unscoped_name}
+                      key={pkg.package_id}
+                      value={pkg.name}
                       onSelect={() => {
-                        window.location.href = `/editor?snippet_id=${snippet.snippet_id}`
+                        window.location.href = `/editor?package_id=${pkg.package_id}`
                         setOpen(false)
                       }}
                       className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default aria-selected:bg-gray-100 dark:aria-selected:bg-gray-700"
                     >
                       <div className="flex flex-col">
                         <span className="text-gray-900 dark:text-gray-100">
-                          {snippet.name || snippet.unscoped_name}
+                          {pkg.name}
                         </span>
-                        {snippet.description && (
+                        {pkg.description && (
                           <span className="text-sm text-gray-500">
-                            {snippet.description}
+                            {pkg.description}
                           </span>
                         )}
                       </div>
-                      <span className="text-sm text-gray-500">snippet</span>
+                      <span className="text-sm text-gray-500">package</span>
                     </Command.Item>
                   ))}
                 </Command.Group>
@@ -161,7 +161,7 @@ const CmdKMenu = () => {
 
               {!searchQuery && recentPackages.length > 0 && (
                 <Command.Group
-                  heading="Recent Snippets"
+                  heading="Recent Packages"
                   className="px-2 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400"
                 >
                   {recentPackages.slice(0, 6).map((pkg) => (
@@ -169,28 +169,28 @@ const CmdKMenu = () => {
                       key={pkg.package_id}
                       value={pkg.unscoped_name}
                       onSelect={() => {
-                        window.location.href = `/editor?snippet_id=${pkg.package_id}`
+                        window.location.href = `/editor?package_id=${pkg.package_id}`
                         setOpen(false)
                       }}
                       className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default aria-selected:bg-gray-100 dark:aria-selected:bg-gray-700"
                     >
                       <div className="flex flex-col">
                         <span className="text-gray-900 dark:text-gray-100">
-                          {pkg.unscoped_name}
+                          {pkg.name}
                         </span>
                         <span className="text-sm text-gray-500">
                           Last edited:{" "}
                           {new Date(pkg.updated_at).toLocaleDateString()}
                         </span>
                       </div>
-                      <span className="text-sm text-gray-500">snippet</span>
+                      <span className="text-sm text-gray-500">package</span>
                     </Command.Item>
                   ))}
                 </Command.Group>
               )}
 
               <Command.Group
-                heading="Start Blank Snippet"
+                heading="Start Blank Package"
                 className="px-2 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400"
               >
                 {blankTemplates.map((template) => (

package/src/components/FAQ.tsx

@@ -176,7 +176,9 @@ export const FAQ = () => (
         <Accordion type="single" collapsible>
           {QUESTIONS.map((q, i) => (
             <AccordionItem key={i} value={`item-${i + 1}`}>
-              <AccordionTrigger>{q.question}</AccordionTrigger>
+              <AccordionTrigger className="text-left">
+                {q.question}
+              </AccordionTrigger>{" "}
               <AccordionContent>{q.answer}</AccordionContent>
             </AccordionItem>
           ))}

package/src/components/FileSidebar.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from "react"
 import { cn } from "@/lib/utils"
-import { File, Folder, PanelRightOpen } from "lucide-react"
+import { File, Folder, PanelRightOpen, Plus } from "lucide-react"
 import { TreeView, TreeDataItem } from "@/components/ui/tree-view"
 import { isHiddenFile } from "./ViewPackagePage/utils/is-hidden-file"
+import { Input } from "@/components/ui/input"
+import { CreateFileProps } from "./package-port/CodeAndPreview"
 
 type FileName = string
 
@@ -12,6 +14,7 @@ interface FileSidebarProps {
   onFileSelect: (filename: FileName) => void
   className?: string
   fileSidebarState: ReturnType<typeof useState<boolean>>
+  handleCreateFile: (props: CreateFileProps) => void
 }
 
 const FileSidebar: React.FC<FileSidebarProps> = ({
@@ -20,8 +23,13 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   onFileSelect,
   className,
   fileSidebarState,
+  handleCreateFile,
 }) => {
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
+  const [newFileName, setNewFileName] = useState("")
+  const [isCreatingFile, setIsCreatingFile] = useState(false)
+  const [errorMessage, setErrorMessage] = useState("")
+
   const transformFilesToTreeData = (
     files: Record<FileName, string>,
   ): TreeDataItem[] => {
@@ -82,6 +90,17 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   }
 
   const treeData = transformFilesToTreeData(files)
+
+  const handleCreateFileInline = () => {
+    handleCreateFile({
+      newFileName,
+      setErrorMessage,
+      onFileSelect,
+      setNewFileName,
+      setIsCreatingFile,
+    })
+  }
+
   return (
     <div
       className={cn(
@@ -98,6 +117,36 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
       >
         <PanelRightOpen />
       </button>
+      <button
+        onClick={() => setIsCreatingFile(true)}
+        className="absolute top-2 right-2 text-gray-400 hover:text-gray-600"
+        aria-label="Create new file"
+      >
+        <Plus className="w-5 h-5" />
+      </button>
+      {isCreatingFile && (
+        <div className="p-2">
+          <Input
+            autoFocus
+            value={newFileName}
+            onChange={(e) => setNewFileName(e.target.value)}
+            onBlur={handleCreateFileInline}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                handleCreateFileInline()
+              } else if (e.key === "Escape") {
+                setIsCreatingFile(false)
+                setNewFileName("")
+                setErrorMessage("")
+              }
+            }}
+            placeholder="Enter file name"
+          />
+          {errorMessage && (
+            <div className="text-red-500 mt-1">{errorMessage}</div>
+          )}
+        </div>
+      )}
       <TreeView
         data={treeData}
         initialSelectedItemId={currentFile}

package/src/components/Header2.tsx

@@ -29,15 +29,26 @@ const SearchButtonComponent = () => {
           </Button> */}
         </div>
       ) : (
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={() => setIsExpanded(true)}
-          className="h-8 w-8"
-          aria-label="Open search"
-        >
-          <Search className="h-4 w-4" />
-        </Button>
+        <>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setIsExpanded(true)}
+            className="h-8 w-8 hidden sm:flex"
+            aria-label="Open search"
+          >
+            <Search className="size-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => (window.location.href = "/search")}
+            className="h-8 w-8 flex sm:hidden"
+            aria-label="Go to search"
+          >
+            <Search className="size-4" />
+          </Button>
+        </>
       )}
     </div>
   )

package/src/components/JLCPCBImportDialog.tsx

@@ -27,9 +27,8 @@ export function JLCPCBImportDialog({
   const [partNumber, setPartNumber] = useState("")
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
-  const [alreadyImportedPackageId, setAlreadyImportedPackageId] = useState<
-    string | null
-  >(null)
+  const [hasBeenImportedToAccountAlready, setHasBeenImportedToAccountAlready] =
+    useState<boolean>(false)
   const axios = useAxios()
   const { toast } = useToast()
   const [, navigate] = useLocation()
@@ -48,19 +47,17 @@ export function JLCPCBImportDialog({
 
     setIsLoading(true)
     setError(null)
-    setAlreadyImportedPackageId(null)
+    setHasBeenImportedToAccountAlready(false)
 
     try {
-      const existingPackageRes = await axios.get(
-        `/snippets/get?owner_name=${session?.github_username}&unscoped_name=${partNumber}`,
-        {
-          validateStatus: (status) => true,
-        },
-      )
+      const apiUrl = `/snippets/get?owner_name=${session?.github_username}&unscoped_name=${partNumber}`
+
+      const existingPackageRes = await axios.get(apiUrl, {
+        validateStatus: (status) => true,
+      })
 
       if (existingPackageRes.status !== 404) {
-        const packageId = existingPackageRes.data.snippet.snippet_id
-        setAlreadyImportedPackageId(packageId)
+        setHasBeenImportedToAccountAlready(true)
         setIsLoading(false)
         return
       }
@@ -122,14 +119,14 @@ export function JLCPCBImportDialog({
             onChange={(e) => {
               setPartNumber(e.target.value)
               setError(null)
-              setAlreadyImportedPackageId(null)
+              setHasBeenImportedToAccountAlready(false)
             }}
           />
-          {error && !alreadyImportedPackageId && (
+          {error && !hasBeenImportedToAccountAlready && (
             <p className="bg-red-100 p-2 mt-2 pre-wrap">{error}</p>
           )}
 
-          {error && !alreadyImportedPackageId && (
+          {error && !hasBeenImportedToAccountAlready && (
             <div className="flex justify-end mt-2">
               <Button
                 variant="default"
@@ -150,7 +147,7 @@ export function JLCPCBImportDialog({
             </div>
           )}
 
-          {alreadyImportedPackageId && (
+          {hasBeenImportedToAccountAlready && (
             <p className="p-2 mt-2 pre-wrap text-md text-green-600">
               This part number has already been imported to your profile.{" "}
               <PrefetchPageLink

package/src/components/ViewPackagePage/components/important-files-view.tsx

@@ -65,7 +65,7 @@ export default function ImportantFilesView({
       setActiveFilePath(importantFiles[0].file_path)
       setActiveTab("file")
     }
-  }, [aiDescription, aiUsageInstructions, hasAiContent])
+  }, [aiDescription, aiUsageInstructions, hasAiContent, importantFiles])
 
   // Get file name from path
   const getFileName = (path: string) => {

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

@@ -45,6 +45,7 @@ export default function PackageHeader({
   const { OrderDialog, isOpen, open, close, stage, setStage } = useOrderDialog({
     onSignIn: signIn,
     isLoggedIn,
+    packageReleaseId: packageInfo?.latest_package_release_id ?? "",
   })
   const { data: starData, isLoading: isStarDataLoading } =
     usePackageStarsByName(packageInfo?.name ?? null)
@@ -259,7 +260,6 @@ export default function PackageHeader({
         onClose={close}
         stage={stage}
         setStage={setStage}
-        packageReleaseId={packageInfo?.latest_package_release_id ?? ""}
       />
     </header>
   )

package/src/components/dialogs/confirm-delete-package-dialog.tsx

@@ -2,24 +2,32 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
 import { Button } from "../ui/button"
 import { createUseDialog } from "./create-use-dialog"
 import { useDeletePackage } from "@/hooks/use-delete-package"
+import { useQueryClient } from "react-query"
 
 export const ConfirmDeletePackageDialog = ({
   open,
   onOpenChange,
   packageId,
   packageName,
+  packageOwner,
   refetchUserPackages,
 }: {
   open: boolean
   onOpenChange: (open: boolean) => void
   packageId: string
   packageName: string
+  packageOwner: string
   refetchUserPackages?: () => void
 }) => {
+  const queryClient = useQueryClient()
+
   const { mutate: deletePackage, isLoading } = useDeletePackage({
     onSuccess: () => {
       onOpenChange(false)
       refetchUserPackages?.()
+      queryClient.invalidateQueries({
+        queryKey: ["userPackages", packageOwner],
+      })
     },
   })