@tscircuit/fake-snippets 0.0.101 → 0.0.102

package/src/App.tsx

@@ -79,6 +79,10 @@ const PackageEditorPage = lazyImport(async () => {
   ])
   return editorModule
 })
+const ViewConnectedRepoPage = lazyImport(
+  () => import("@/pages/view-connected-repo"),
+)
+const PreviewBuildPage = lazyImport(() => import("@/pages/preview-build"))
 
 class ErrorBoundary extends React.Component<
   { children: React.ReactNode },
@@ -139,7 +143,7 @@ class ErrorBoundary extends React.Component<
     this.cleanup() // Clean up listeners before reload
     this.setState({ reloading: true })
     this.reloadTimeout = window.setTimeout(() => {
-      window.location.reload()
+      // window.location.reload()
     }, 500)
   }
 
@@ -253,6 +257,11 @@ function App() {
             <Route path="/my-orders" component={MyOrdersPage} />
             <Route path="/dev-login" component={DevLoginPage} />
             <Route path="/:username" component={UserProfilePage} />
+            <Route path="/build/:buildId" component={ViewConnectedRepoPage} />
+            <Route
+              path="/build/:buildId/preview"
+              component={PreviewBuildPage}
+            />
             <Route path="/:author/:packageName" component={ViewPackagePage} />
             <Route
               path="/:author/:packageName/builds"

package/src/components/CreateReleaseDialog.tsx

@@ -0,0 +1,124 @@
+import { useState } from "react"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { Loader2, Tag, AlertCircle } from "lucide-react"
+
+interface CreateReleaseDialogProps {
+  isOpen: boolean
+  onClose: () => void
+  version: string
+  setVersion: (version: string) => void
+  currentVersion?: string
+  isLoading: boolean
+  error: string | null
+  onCreateRelease: () => Promise<void>
+}
+
+export function CreateReleaseDialog({
+  isOpen,
+  onClose,
+  version,
+  setVersion,
+  currentVersion,
+  isLoading,
+  error,
+  onCreateRelease,
+}: CreateReleaseDialogProps) {
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    await onCreateRelease()
+  }
+
+  const handleClose = () => {
+    onClose()
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Tag className="w-5 h-5" />
+            Create New Release
+          </DialogTitle>
+          <DialogDescription>
+            Create a new release. This will make your latest changes available
+            to users.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-3">
+            <div className="flex justify-center">
+              <p className="text-sm text-muted-foreground text-center">
+                {currentVersion ? (
+                  <span className="flex items-center justify-center gap-2">
+                    <span>Current version:</span>
+                    <span className="font-mono font-medium text-foreground bg-muted px-2 py-1 rounded-md text-xs border">
+                      {currentVersion}
+                    </span>
+                  </span>
+                ) : (
+                  "Follow semantic versioning (e.g., 1.0.0)"
+                )}
+              </p>
+            </div>{" "}
+            <Label htmlFor="version" className="text-sm font-medium">
+              Version
+            </Label>
+            <Input
+              id="version"
+              placeholder="e.g., 1.0.0"
+              value={version}
+              onChange={(e) => setVersion(e.target.value)}
+              disabled={isLoading}
+              className="h-10"
+            />
+          </div>
+
+          {error && (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleClose}
+              disabled={isLoading}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={isLoading || !version.trim()}
+              className="min-w-[100px]"
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Creating...
+                </>
+              ) : (
+                "Create Release"
+              )}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/FileSidebar.tsx

@@ -57,16 +57,24 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   handleRenameFile,
   isCreatingFile,
   setIsCreatingFile,
-  pkg,
 }) => {
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
   const [newFileName, setNewFileName] = useState("")
   const [errorMessage, setErrorMessage] = useState("")
   const [renamingFile, setRenamingFile] = useState<string | null>(null)
+  const [selectedFolderForCreation, setSelectedFolderForCreation] = useState<
+    string | null
+  >(null)
+  const [selectedItemId, setSelectedItemId] = React.useState<string>(
+    currentFile || "",
+  )
   const { toast } = useToast()
-  const session = useGlobalStore((s) => s.session)
   const canModifyFiles = true
 
+  const onFolderSelect = (folderPath: string) => {
+    setSelectedFolderForCreation(folderPath)
+  }
+
   const transformFilesToTreeData = (
     files: Record<FileName, string>,
   ): TreeDataItem[] => {
@@ -90,6 +98,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
           : segment
         const absolutePath = hasLeadingSlash ? `/${relativePath}` : relativePath
         const itemId = absolutePath
+
         if (
           !currentNode[segment] &&
           (!isHiddenFile(relativePath) ||
@@ -104,21 +113,17 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
             name: segment,
             isRenaming: renamingFile === itemId,
             onRename: (newFilename: string) => {
-              // Preserve the folder structure when renaming
               const oldPath = itemId
-              const pathParts = oldPath.split("/").filter((part) => part !== "") // Remove empty segments
+              const pathParts = oldPath.split("/").filter((part) => part !== "")
               let newPath: string
 
               if (pathParts.length > 1) {
-                // File is in a folder, preserve the folder structure
                 const folderPath = pathParts.slice(0, -1).join("/")
                 newPath = folderPath + "/" + newFilename
               } else {
-                // File is in root, just use the new filename
                 newPath = newFilename
               }
 
-              // Preserve leading slash if original path had one
               if (oldPath.startsWith("/") && !newPath.startsWith("/")) {
                 newPath = "/" + newPath
               }
@@ -142,7 +147,12 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
               setRenamingFile(null)
             },
             icon: isLeafNode ? File : Folder,
-            onClick: isLeafNode ? () => onFileSelect(absolutePath) : undefined,
+            onClick: isLeafNode
+              ? () => {
+                  onFileSelect(absolutePath)
+                  setSelectedFolderForCreation(null)
+                }
+              : () => onFolderSelect(absolutePath),
             draggable: false,
             droppable: !isLeafNode,
             children: isLeafNode ? undefined : {},
@@ -209,7 +219,6 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
       })
     })
 
-    // Convert the nested object structure to array structure
     const convertToArray = (
       items: Record<string, TreeNode>,
     ): TreeDataItem[] => {
@@ -226,17 +235,70 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
 
   const treeData = transformFilesToTreeData(files)
 
+  const getCurrentFolderPath = (): string => {
+    if (selectedFolderForCreation) {
+      return selectedFolderForCreation
+    }
+
+    if (!selectedItemId || selectedItemId === "") return ""
+
+    const hasLeadingSlash = selectedItemId.startsWith("/")
+    const normalizedPath = hasLeadingSlash
+      ? selectedItemId.slice(1)
+      : selectedItemId
+    const pathParts = selectedItemId.split("/")
+
+    if (pathParts.length > 1) {
+      const folderPath = pathParts.slice(0, -1).join("/")
+      return hasLeadingSlash ? `/${folderPath}` : folderPath
+    }
+
+    return hasLeadingSlash ? "/" : ""
+  }
+
+  const constructFilePath = (fileName: string): string => {
+    const trimmedFileName = fileName.trim()
+
+    if (!trimmedFileName) {
+      return ""
+    }
+
+    const currentFolder = getCurrentFolderPath()
+
+    if (trimmedFileName.startsWith("/")) {
+      return trimmedFileName
+    }
+
+    if (!currentFolder || currentFolder === "/") {
+      const result =
+        currentFolder === "/" ? `/${trimmedFileName}` : trimmedFileName
+      return result
+    }
+
+    const result = `${currentFolder}/${trimmedFileName}`
+    return result
+  }
   const handleCreateFileInline = () => {
+    const finalFileName = constructFilePath(newFileName)
+    if (!finalFileName) {
+      setErrorMessage("File name cannot be empty")
+      return
+    }
+
     const { newFileCreated } = handleCreateFile({
-      newFileName,
+      newFileName: finalFileName,
       onError: (error) => {
         setErrorMessage(error.message)
       },
     })
+
     if (newFileCreated) {
       setIsCreatingFile(false)
       setNewFileName("")
       setErrorMessage("")
+      onFileSelect(finalFileName)
+      setSelectedItemId(finalFileName)
+      setSelectedFolderForCreation(null)
     }
   }
 
@@ -245,6 +307,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
       setIsCreatingFile(false)
       setNewFileName("")
       setErrorMessage("")
+      setSelectedFolderForCreation(null)
       return
     }
     handleCreateFileInline()
@@ -255,6 +318,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
     setErrorMessage("")
     setIsCreatingFile(false)
     setNewFileName("")
+    setSelectedFolderForCreation(null)
   }
 
   return (
@@ -267,9 +331,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
     >
       <button
         onClick={toggleSidebar}
-        className={`z-[99] mt-2 ml-2 text-gray-400 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>
@@ -286,33 +348,76 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
             autoFocus
             value={newFileName}
             spellCheck={false}
-            onChange={(e) => setNewFileName(e.target.value)}
+            onChange={(e) => {
+              setNewFileName(e.target.value)
+              if (errorMessage) {
+                setErrorMessage("")
+              }
+            }}
             onBlur={handleCreateFileBlur}
             onKeyDown={(e) => {
               if (e.key === "Enter") {
+                e.preventDefault()
                 handleCreateFileInline()
               } else if (e.key === "Escape") {
+                e.preventDefault()
                 setIsCreatingFile(false)
                 setNewFileName("")
                 setErrorMessage("")
+                setSelectedFolderForCreation(null)
+              } else if (e.key === "Tab") {
+                e.preventDefault()
+                const currentFolder = getCurrentFolderPath()
+                if (currentFolder && !newFileName.includes("/")) {
+                  const displayPath = currentFolder.startsWith("/")
+                    ? currentFolder.slice(1)
+                    : currentFolder
+                  setNewFileName(`${displayPath}/`)
+                }
               }
             }}
-            placeholder="Enter file name"
+            placeholder={(() => {
+              const currentFolder = getCurrentFolderPath()
+              if (!currentFolder || currentFolder === "/") {
+                return "Enter file name (root folder)"
+              }
+              const displayPath = currentFolder.startsWith("/")
+                ? currentFolder.slice(1)
+                : currentFolder
+              return `Enter file name (${displayPath}/)`
+            })()}
+            className={
+              errorMessage ? "border-red-500 focus:border-red-500" : ""
+            }
           />
           {errorMessage && (
-            <div className="text-red-500 mt-1">{errorMessage}</div>
+            <div className="text-red-500 text-xs mt-1 px-1">{errorMessage}</div>
           )}
+          <div className="text-gray-400 text-xs mt-1 px-1">
+            Tip: Use / for subfolders, Tab to auto-complete current folder
+          </div>
         </div>
       )}
-      <TreeView
-        data={treeData}
-        initialSelectedItemId={currentFile || ""}
-        onSelectChange={(item) => {
-          if (item?.onClick) {
-            item.onClick()
+      <div
+        onClick={(e) => {
+          if (e.target === e.currentTarget) {
+            setSelectedFolderForCreation(null)
+            setSelectedItemId("")
           }
         }}
-      />
+        className="flex-1 border-2 h-full"
+      >
+        <TreeView
+          data={treeData}
+          setSelectedItemId={(value) => setSelectedItemId(value || "")}
+          selectedItemId={selectedItemId}
+          onSelectChange={(item) => {
+            if (item?.onClick) {
+              item.onClick()
+            }
+          }}
+        />
+      </div>
     </div>
   )
 }

package/src/components/PackageBuildsPage/package-build-header.tsx

@@ -5,6 +5,7 @@ import { Github, RefreshCw } from "lucide-react"
 import { useParams } from "wouter"
 import { DownloadButtonAndMenu } from "../DownloadButtonAndMenu"
 import { useGlobalStore } from "@/hooks/use-global-store"
+import { useCurrentPackageCircuitJson } from "../ViewPackagePage/hooks/use-current-package-circuit-json"
 
 export function PackageBuildHeader() {
   const { author, packageName } = useParams()
@@ -15,6 +16,8 @@ export function PackageBuildHeader() {
   const { mutate: rebuildPackage, isLoading } =
     useRebuildPackageReleaseMutation()
 
+  const { circuitJson } = useCurrentPackageCircuitJson()
+
   return (
     <div className="border-b border-gray-200 bg-white px-4 sm:px-6 py-4">
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4 container mx-auto max-w-7xl">
@@ -63,7 +66,12 @@ export function PackageBuildHeader() {
               {isLoading ? "Rebuilding..." : "Rebuild"}
             </Button>
           )}
-          <DownloadButtonAndMenu unscopedName={packageName} author={author} />
+          <DownloadButtonAndMenu
+            offerMultipleImageFormats
+            circuitJson={circuitJson}
+            unscopedName={packageName}
+            author={author}
+          />
         </div>
       </div>
     </div>

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 { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
+import { useApiBaseUrl } 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 = usePackagesBaseApiUrl()
+  const snippetsBaseApiUrl = useApiBaseUrl()
 
   // 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 { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
+import { useApiBaseUrl } 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 = usePackagesBaseApiUrl()
+  const snippetsBaseApiUrl = useApiBaseUrl()
 
   const { data: searchResults, isLoading } = useQuery(
     ["packageSearch", searchQuery],

package/src/components/SuspenseRunFrame.tsx

@@ -6,7 +6,7 @@ const RunFrame = lazy(async () => {
 })
 
 export const SuspenseRunFrame = (
-  props: React.ComponentProps<typeof RunFrame>,
+  props: React.ComponentProps<typeof RunFrame> & { className?: string },
 ) => {
   return (
     <Suspense
@@ -20,7 +20,7 @@ export const SuspenseRunFrame = (
         </div>
       }
     >
-      <div className="h-[98vh]">
+      <div className={`h-[98vh] ${props.className}`}>
         <RunFrame {...props} />
       </div>
     </Suspense>

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 { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
+import { useApiBaseUrl } 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 = usePackagesBaseApiUrl()
+  const apiBaseUrl = useApiBaseUrl()
 
   const { data: trendingPackages } = useQuery<Package[]>(
     "trendingPackages",

package/src/components/ViewPackagePage/components/mobile-sidebar.tsx

@@ -205,6 +205,7 @@ const MobileSidebar = ({
           currentDescription={
             packageInfo.description || packageInfo?.ai_description || ""
           }
+          currentGithubRepoFullName={packageInfo.github_repo_full_name}
           currentLicense={currentLicense}
           currentWebsite={(packageInfo as any)?.website || ""}
           isPrivate={Boolean(packageInfo.is_private)}

package/src/components/ViewPackagePage/components/sidebar-about-section.tsx

@@ -171,6 +171,7 @@ export default function SidebarAboutSection({
           unscopedPackageName={packageInfo.unscoped_name}
           packageReleaseId={packageInfo.latest_package_release_id}
           packageId={packageInfo.package_id}
+          currentGithubRepoFullName={packageInfo.github_repo_full_name}
           currentDescription={
             packageInfo.description || packageInfo?.ai_description || ""
           }

package/src/components/dialogs/GitHubRepositorySelector.tsx

@@ -0,0 +1,123 @@
+import { useState } from "react"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { useAxios } from "@/hooks/use-axios"
+import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
+import { useQuery } from "react-query"
+import { Button } from "../ui/button"
+import { Label } from "../ui/label"
+import { Plus } from "lucide-react"
+
+interface GitHubRepositorySelectorProps {
+  value?: string
+  onValueChange?: (value: string) => void
+  disabled?: boolean
+  open?: boolean
+}
+
+export const GitHubRepositorySelector = ({
+  value,
+  onValueChange,
+  disabled = false,
+  open = false,
+}: GitHubRepositorySelectorProps) => {
+  const axios = useAxios()
+  const apiBaseUrl = useApiBaseUrl()
+  const [selectedRepository, setSelectedRepository] = useState<string>(
+    value || "",
+  )
+
+  // Fetch available repositories
+  const { data: repositoriesData, error: repositoriesError } = useQuery(
+    ["github-repositories"],
+    async () => {
+      const response = await axios.get("/github/repos/list_available")
+      return response.data
+    },
+    {
+      enabled: open, // Only fetch when needed
+      retry: false,
+    },
+  )
+
+  const handleConnectMoreRepos = async () => {
+    window.location.href = `${apiBaseUrl}/github/installations/create_new_installation_redirect?return_to_page=${window.location.pathname}`
+  }
+
+  const handleValueChange = (newValue: string) => {
+    if (newValue === "connect-more") {
+      handleConnectMoreRepos()
+    } else {
+      setSelectedRepository(newValue)
+      onValueChange?.(newValue)
+    }
+  }
+
+  return (
+    <div className="space-y-1">
+      <Label htmlFor="repository">GitHub Repository</Label>
+      {(repositoriesError as any)?.response?.status === 400 &&
+      (repositoriesError as any)?.response?.data?.error_code ===
+        "github_not_connected" ? (
+        <div className="space-y-2">
+          <div className="text-sm text-muted-foreground">
+            Connect your GitHub account to link this package to a repository.
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleConnectMoreRepos}
+            className="w-full"
+            disabled={disabled}
+          >
+            <svg
+              className="w-4 h-4 mr-2"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path d="M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
+            </svg>
+            Connect GitHub Account
+          </Button>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          <Select
+            value={selectedRepository}
+            onValueChange={handleValueChange}
+            disabled={disabled}
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Select a repository" />
+            </SelectTrigger>
+            <SelectContent className="!z-[999]">
+              {repositoriesData?.repos?.map((repo: any) => (
+                <SelectItem key={repo.full_name} value={repo.full_name}>
+                  <div className="flex items-center space-x-2">
+                    <span>{repo.unscoped_name}</span>
+                    {repo.private && (
+                      <span className="text-xs text-muted-foreground">
+                        (private)
+                      </span>
+                    )}
+                  </div>
+                </SelectItem>
+              ))}
+              <SelectItem value="connect-more">
+                <div className="flex items-center space-x-2 text-blue-600">
+                  <Plus className="w-3 h-3" />
+                  <span>Connect More Repos</span>
+                </div>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+    </div>
+  )
+}