@tscircuit/fake-snippets 0.0.44 → 0.0.45

package/fake-snippets-api/routes/api/_fake/received_quotes.ts

@@ -0,0 +1,66 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+import { orderQuoteSchema } from "fake-snippets-api/lib/db/schema"
+
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "session",
+  jsonBody: z.object({
+    order_quote_id: z.string(),
+  }),
+  jsonResponse: z.object({
+    order_quote: orderQuoteSchema.optional(),
+    error: z.string().optional(),
+  }),
+})(async (req, ctx) => {
+  const { order_quote_id } = req.jsonBody
+
+  return ctx.json({
+    order_quote: {
+      order_quote_id,
+      account_id: "123",
+      package_release_id: "123",
+      is_completed: true,
+      is_processing: false,
+      vendor_name: "JLCPCB",
+      error: null,
+      has_error: false,
+      created_at: "2025-04-21",
+      updated_at: "2025-04-21",
+      completed_at: "2025-04-21",
+      quoted_components: [
+        {
+          manufacturer_part_number: "123",
+          supplier_part_number: "123",
+          quantity: 1,
+          unit_price: 100,
+          total_price: 100,
+          available: true,
+        },
+        {
+          manufacturer_part_number: "1234",
+          supplier_part_number: "1234",
+          quantity: 1,
+          unit_price: 200,
+          total_price: 200,
+          available: true,
+        },
+      ],
+      bare_pcb_cost: 300,
+      shipping_options: [
+        {
+          carrier: "DHL",
+          service: "Express",
+          cost: 100,
+        },
+        {
+          carrier: "FedEx",
+          service: "Express",
+          cost: 200,
+        },
+      ],
+      // TODO: shipping cost can vary so do the total cost calculation
+      total_cost: 100,
+    },
+  })
+})

package/fake-snippets-api/routes/api/package_releases/update.ts

@@ -67,28 +67,35 @@ export default withRouteSpec({
     })
   }
 
-  // Handle is_latest updates
-  if (is_latest !== undefined && is_latest) {
-    ctx.db.packageReleases
-      .filter(
-        (pr) =>
-          pr.package_id === release.package_id &&
-          pr.package_release_id !== releaseId &&
-          pr.is_latest,
-      )
-      .forEach((pr) => {
-        pr.is_latest = false
-      })
-  }
-
-  // Update the release
-  Object.assign(release, {
+  // Create updated release object
+  const updatedRelease = {
+    ...release,
     ...(is_locked !== undefined && { is_locked }),
     ...(is_latest !== undefined && { is_latest }),
     ...(license !== undefined && { license }),
-  })
+  }
+
+  // Handle is_latest updates atomically
+  if (is_latest !== undefined && is_latest) {
+    // Get all releases for this package that are currently marked as latest
+    const otherLatestReleases = ctx.db.packageReleases.filter(
+      (pr) =>
+        pr.package_id === release.package_id &&
+        pr.package_release_id !== releaseId &&
+        pr.is_latest,
+    )
+
+    // Update all releases in a single operation
+    for (const latestRelease of otherLatestReleases) {
+      ctx.db.updatePackageRelease({
+        ...latestRelease,
+        is_latest: false,
+      })
+    }
+  }
 
-  ctx.db.updatePackageRelease(release)
+  // Update the target release
+  ctx.db.updatePackageRelease(updatedRelease)
 
   return ctx.json({
     ok: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "type": "module",
   "repository": {
     "type": "git",
@@ -136,7 +136,7 @@
     "@playwright/test": "^1.48.0",
     "@tscircuit/core": "^0.0.370",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "^0.0.330",
+    "@tscircuit/runframe": "^0.0.357",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",

package/src/components/CodeAndPreview.tsx

@@ -10,7 +10,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 { Snippet } from "fake-snippets-api/lib/db/schema"
 import { Loader2 } from "lucide-react"
 import { useEffect, useMemo, useState } from "react"

package/src/components/CodeEditor.tsx

@@ -456,7 +456,6 @@ export const CodeEditor = ({
               ...(args as Parameters<typeof updateFileContent>),
             )
           }}
-          cursorPosition={cursorPosition}
         />
       )}
       <div ref={editorRef} className="flex-1 overflow-auto" />

package/src/components/CodeEditorHeader.tsx

@@ -8,8 +8,6 @@ import {
 } from "@/components/ui/select"
 import { useImportSnippetDialog } from "./dialogs/import-snippet-dialog"
 import { useToast } from "@/hooks/use-toast"
-import { FootprintDialog } from "./FootprintDialog"
-import { useState } from "react"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -27,7 +25,6 @@ interface CodeEditorHeaderProps {
   files: Record<FileName, string>
   handleFileChange: (filename: FileName) => void
   updateFileContent: (filename: FileName, content: string) => void
-  cursorPosition: number | null
 }
 
 export const CodeEditorHeader = ({
@@ -35,11 +32,9 @@ export const CodeEditorHeader = ({
   files,
   handleFileChange,
   updateFileContent,
-  cursorPosition,
 }: CodeEditorHeaderProps) => {
   const { Dialog: ImportSnippetDialog, openDialog: openImportDialog } =
     useImportSnippetDialog()
-  const [footprintDialogOpen, setFootprintDialogOpen] = useState(false)
   const { toast } = useToast()
 
   const formatCurrentFile = () => {
@@ -120,18 +115,6 @@ export const CodeEditorHeader = ({
             </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>
@@ -145,14 +128,6 @@ export const CodeEditorHeader = ({
           updateFileContent(currentFile, newContent)
         }}
       />
-      <FootprintDialog
-        currentFile={currentFile}
-        open={footprintDialogOpen}
-        onOpenChange={setFootprintDialogOpen}
-        updateFileContent={updateFileContent}
-        files={files}
-        cursorPosition={cursorPosition}
-      />
     </div>
   )
 }

package/src/components/EditorNav.tsx

@@ -195,14 +195,16 @@ export default function EditorNav({
           {snippet && (
             <>
               <SnippetLink snippet={snippet} />
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-6 w-6 ml-2"
-                onClick={() => openRenameDialog()}
-              >
-                <Pencil className="h-3 w-3 text-gray-700" />
-              </Button>
+              {snippet?.owner_name === 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/ErrorOutline.tsx

@@ -0,0 +1,35 @@
+import { AlertCircle } from "lucide-react"
+
+export function ErrorOutline({
+  error,
+  description,
+}: { error?: Error; description?: string; children?: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-center p-4">
+      <div className="max-w-lg w-full mx-auto p-6 sm:p-8 bg-red-100/80 rounded-xl shadow-lg border border-red-500">
+        <div className="flex flex-col items-center text-center">
+          <AlertCircle className="h-10 w-10 text-red-700 mb-4" />
+          <h2 className="text-xl sm:text-2xl font-bold text-red-700 mb-3">
+            Something strange happened
+          </h2>
+          <p className="text-red-600 font-medium mb-6 text-sm sm:text-base">
+            {description ||
+              "An unexpected error occurred while processing your request."}{" "}
+            <br />
+            Please try again or contact support if the problem persists.
+          </p>
+          {error?.message && (
+            <details className="w-full text-left bg-red-50 p-3 rounded-md border border-red-200">
+              <summary className="text-sm font-medium text-red-800 cursor-pointer hover:text-red-900">
+                Show Error Details
+              </summary>
+              <pre className="mt-2 text-xs text-red-700 bg-transparent p-0 rounded overflow-auto whitespace-pre-wrap break-words">
+                {error.message}
+              </pre>
+            </details>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/FileSidebar.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react"
 import { cn } from "@/lib/utils"
 import { File, Folder, PanelRightOpen } from "lucide-react"
 import { TreeView, TreeDataItem } from "@/components/ui/tree-view"
+import { isHiddenFile } from "./ViewPackagePage/utils/is-hidden-file"
 
 type FileName = string
 
@@ -24,35 +25,63 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   const transformFilesToTreeData = (
     files: Record<FileName, string>,
   ): TreeDataItem[] => {
-    const root: { [key: string]: TreeDataItem } = {}
+    type TreeNode = Omit<TreeDataItem, "children"> & {
+      children?: Record<string, TreeNode>
+    }
+    const root: Record<string, TreeNode> = {}
 
     Object.keys(files).forEach((path) => {
-      const parts = path.split("/")
+      const startsWithSlash = path.startsWith("/")
+      const parts = (startsWithSlash ? path.slice(1) : path).trim().split("/")
       let current = root
 
-      let currentPath = ""
       parts.forEach((part, index) => {
-        const id = currentPath ? `${currentPath}/${part}` : part
-        currentPath = id
-
-        if (!current[part]) {
-          const isFile = index === parts.length - 1
+        const isFile = index === parts.length - 1
+        const parentPath = parts.slice(0, index).join("/")
+        const currentPath = parentPath ? `${parentPath}/${part}` : part
+        const evaluatedFilePath = startsWithSlash
+          ? `/${currentPath}`
+          : currentPath
+        if (
+          !current[part] &&
+          (!isHiddenFile(currentPath) ||
+            isHiddenFile(
+              currentFile.startsWith("/") ? currentFile.slice(1) : currentFile,
+            ))
+        ) {
           current[part] = {
-            id: id,
-            name: part,
+            id: currentPath,
+            name: isFile ? part : part,
             icon: isFile ? File : Folder,
-            onClick: isFile ? () => onFileSelect(id) : undefined,
+            onClick: isFile ? () => onFileSelect(evaluatedFilePath) : undefined,
+            draggable: isFile,
+            droppable: !isFile,
+            children: isFile ? undefined : {},
           }
         }
-        current = (current[part] as any).children || (current[part] as any)
+
+        if (!isFile && current[part].children) {
+          current = current[part].children
+        }
       })
     })
 
-    return Object.values(root)
+    // Convert the nested object structure to array structure
+    const convertToArray = (
+      items: Record<string, TreeNode>,
+    ): TreeDataItem[] => {
+      return Object.values(items).map((item) => ({
+        ...item,
+        children: item.children ? convertToArray(item.children) : undefined,
+      }))
+    }
+    return convertToArray(root).filter((x) => {
+      if (x.children?.length === 0) return false
+      return true
+    })
   }
 
   const treeData = transformFilesToTreeData(files)
-
   return (
     <div
       className={cn(
@@ -63,11 +92,12 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
     >
       <button
         onClick={() => setSidebarOpen(!sidebarOpen)}
-        className={`z-[99] mt-2 ml-2 text-black/60 scale-90 transition-opacity duration-200 ${!sidebarOpen ? "opacity-0 pointer-events-none" : "opacity-100"}`}
+        className={`z-[99] mt-2 ml-2 text-gray-400 scale-90 transition-opacity duration-200 ${
+          !sidebarOpen ? "opacity-0 pointer-events-none" : "opacity-100"
+        }`}
       >
         <PanelRightOpen />
       </button>
-
       <TreeView
         data={treeData}
         initialSelectedItemId={currentFile}

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 } =
@@ -355,6 +356,7 @@ export function CodeAndPreview({ pkg }: Props) {
               )
             }}
             onDtsChange={setDts}
+            pkgFilesLoaded={pkgFilesLoaded}
           />
         </div>
         {showPreview && (