@tscircuit/fake-snippets 0.0.87 → 0.0.89

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

@@ -0,0 +1,241 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import {
+  Search,
+  Code,
+  Braces,
+  FileIcon,
+  Hash,
+  BookOpen,
+  FileText,
+} from "lucide-react"
+import type { PackageFile } from "./CodeAndPreview"
+import { fuzzyMatch } from "../ViewPackagePage/utils/fuzz-search"
+
+interface ScoredFile extends PackageFile {
+  score: number
+  matches: number[]
+}
+
+interface QuickOpenProps {
+  files: PackageFile[]
+  currentFile: string | null
+  onFileSelect: (path: string) => void
+  onClose: () => void
+}
+
+const QuickOpen = ({
+  files,
+  currentFile,
+  onFileSelect,
+  onClose,
+}: QuickOpenProps) => {
+  const [query, setQuery] = useState("")
+  const [selected, setSelected] = useState(0)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const selectedItemRef = useRef<HTMLDivElement>(null)
+
+  const scoredFiles = useMemo((): ScoredFile[] => {
+    if (!query) return files.map((f) => ({ ...f, score: 0, matches: [] }))
+
+    return files
+      .map((file) => {
+        const { score, matches } = fuzzyMatch(query, file.path)
+        return { ...file, score, matches }
+      })
+      .filter((f) => f.score >= 0)
+      .sort((a, b) => {
+        // Current file gets priority
+        if (a.path === currentFile) return -1
+        if (b.path === currentFile) return 1
+        // Then by score
+        return b.score - a.score
+      })
+  }, [files, query, currentFile])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault()
+          setSelected((prev) => Math.min(prev + 1, scoredFiles.length - 1))
+          break
+        case "ArrowUp":
+          e.preventDefault()
+          setSelected((prev) => Math.max(prev - 1, 0))
+          break
+        case "Enter":
+          e.preventDefault()
+          if (scoredFiles[selected]) {
+            onFileSelect(scoredFiles[selected].path)
+            onClose()
+          }
+          break
+        case "Escape":
+          e.preventDefault()
+          onClose()
+          break
+      }
+    },
+    [scoredFiles, selected, onFileSelect, onClose],
+  )
+
+  useEffect(() => {
+    inputRef.current?.focus()
+  }, [])
+
+  useEffect(() => {
+    setSelected(0)
+  }, [query])
+
+  useEffect(() => {
+    if (selectedItemRef.current) {
+      selectedItemRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+      })
+    }
+  }, [selected])
+
+  const getFileIcon = useCallback((path: string) => {
+    const ext = path.split(".").pop()?.toLowerCase()
+    const iconProps = { size: 16, className: "" }
+
+    switch (ext) {
+      case "tsx":
+        iconProps.className = "text-blue-500"
+        return <Code {...iconProps} />
+      case "ts":
+        iconProps.className = "text-blue-600"
+        return <Code {...iconProps} />
+      case "jsx":
+        iconProps.className = "text-cyan-500"
+        return <Code {...iconProps} />
+      case "js":
+        iconProps.className = "text-yellow-500"
+        return <Code {...iconProps} />
+      case "json":
+        iconProps.className = "text-orange-500"
+        return <Braces {...iconProps} />
+      case "md":
+        iconProps.className = "text-gray-600"
+        return <BookOpen {...iconProps} />
+      case "css":
+        iconProps.className = "text-pink-500"
+        return <Hash {...iconProps} />
+      case "html":
+        iconProps.className = "text-red-500"
+        return <FileText {...iconProps} />
+      default:
+        iconProps.className = "text-gray-400"
+        return <FileIcon {...iconProps} />
+    }
+  }, [])
+
+  const renderHighlighted = useCallback(
+    (file: ScoredFile) => {
+      if (!query) return file.path
+
+      const chars = file.path.split("")
+      return chars.map((char, i) => (
+        <span key={i} className={file.matches.includes(i) ? "bg-blue-200" : ""}>
+          {char}
+        </span>
+      ))
+    },
+    [query],
+  )
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/20 backdrop-blur-sm flex items-start justify-center pt-16 sm:pt-20 z-50 p-4"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) {
+          onClose()
+        }
+      }}
+    >
+      <div
+        className="bg-white/95 backdrop-blur-md rounded-xl shadow-2xl border border-slate-200/50 w-full max-w-lg mx-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="p-4 border-b border-slate-100">
+          <div className="relative">
+            <Search
+              size={16}
+              className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
+            />
+            <input
+              ref={inputRef}
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Search files..."
+              className="w-full pl-10 pr-4 py-2.5 text-sm bg-slate-50/80 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-slate-950/10 focus:border-slate-400 transition-all duration-200"
+            />
+          </div>
+        </div>
+
+        <div className="max-h-80 overflow-y-auto py-2">
+          {scoredFiles.length === 0 ? (
+            <div className="p-6 text-center select-none text-slate-400 text-sm">
+              {query ? "No matching files" : "No files"}
+            </div>
+          ) : (
+            scoredFiles.map((file, index) => (
+              <div
+                key={file.path}
+                ref={index === selected ? selectedItemRef : null}
+                onClick={() => {
+                  onFileSelect(file.path)
+                  onClose()
+                }}
+                className={`px-4 py-2 cursor-pointer flex items-center gap-3 transition-all duration-150 ${
+                  index === selected
+                    ? "bg-slate-100 border-r-2 border-slate-500"
+                    : "hover:bg-slate-50"
+                }`}
+              >
+                <div className="flex-shrink-0">{getFileIcon(file.path)}</div>
+                <div className="flex-1 min-w-0 text-sm font-mono text-slate-900 truncate">
+                  {renderHighlighted(file)}
+                </div>
+                {file.path === currentFile && (
+                  <span className="text-xs px-2 py-0.5 rounded-full bg-slate-100 text-slate-700">
+                    current
+                  </span>
+                )}
+              </div>
+            ))
+          )}
+        </div>
+
+        <div className="px-4 select-none py-3 text-xs border-t border-slate-100 bg-slate-50/50 rounded-b-xl">
+          <div className="flex items-center justify-between text-slate-500">
+            <div className="flex gap-4">
+              <span className="flex items-center gap-1.5">
+                <kbd className="px-2 py-1 font-mono bg-white border border-slate-200 rounded shadow-sm">
+                  ↑↓
+                </kbd>
+                navigate
+              </span>
+              <span className="flex items-center gap-1.5">
+                <kbd className="px-2 py-1 font-mono bg-white border border-slate-200 rounded shadow-sm">
+                  ↵
+                </kbd>
+                select
+              </span>
+            </div>
+            <span className="flex items-center gap-1.5">
+              <kbd className="px-2 py-1 font-mono bg-white border border-slate-200 rounded shadow-sm">
+                esc
+              </kbd>
+              close
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default QuickOpen

package/src/components/ui/dialog.tsx

@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-[100] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-slate-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-slate-800 dark:bg-slate-950",
+        "fixed left-[50%] max-w-[95vw] md:max-w-lg top-[50%] z-[100] grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border border-slate-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg dark:border-slate-800 dark:bg-slate-950",
         className,
       )}
       {...props}

package/src/components/ui/tree-view.tsx

@@ -404,7 +404,7 @@ const TreeLeaf = React.forwardRef<
           default={defaultLeafIcon}
         />
         <span className="flex-grow text-sm truncate">{item.name}</span>
-        <div onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center" onClick={(e) => e.stopPropagation()}>
           <TreeActions isSelected={true}>{item.actions}</TreeActions>
         </div>
       </div>

package/src/global.d.ts

@@ -0,0 +1,3 @@
+interface Window {
+  TSC_BUILD_ID?: string
+}

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

@@ -0,0 +1,31 @@
+import type { AiReview } from "fake-snippets-api/lib/db/schema"
+import { useQuery } from "react-query"
+import { useAxios } from "./use-axios"
+
+export const useAiReview = (
+  aiReviewId: string | null,
+  options?: {
+    refetchInterval?:
+      | number
+      | false
+      | ((data: AiReview | undefined) => number | false)
+  },
+) => {
+  const axios = useAxios()
+
+  return useQuery<AiReview, Error & { status: number }>(
+    ["aiReview", aiReviewId],
+    async () => {
+      if (!aiReviewId) throw new Error("aiReviewId is required")
+      const { data } = await axios.get("/ai_reviews/get", {
+        params: { ai_review_id: aiReviewId },
+      })
+      return data.ai_review as AiReview
+    },
+    {
+      enabled: Boolean(aiReviewId),
+      refetchInterval: options?.refetchInterval,
+      refetchOnWindowFocus: false,
+    },
+  )
+}

package/src/hooks/use-current-package-release.ts

@@ -2,11 +2,15 @@ import { useParams } from "wouter"
 import { useCurrentPackageId } from "./use-current-package-id"
 import { usePackageRelease } from "./use-package-release"
 import { useUrlParams } from "./use-url-params"
+import type { PackageRelease } from "fake-snippets-api/lib/db/schema"
 
 export const useCurrentPackageRelease = (options?: {
   include_ai_review?: boolean
   include_logs?: boolean
-  refetchInterval?: number
+  refetchInterval?:
+    | number
+    | false
+    | ((data: PackageRelease | undefined) => number | false)
 }) => {
   const { packageId } = useCurrentPackageId()
   const urlParams = useUrlParams()

package/src/hooks/use-download-zip.ts

@@ -0,0 +1,50 @@
+import { useCallback } from "react"
+import JSZip from "jszip"
+import { saveAs } from "file-saver"
+import { useAxios } from "@/hooks/use-axios"
+import { Package, PackageFile } from "fake-snippets-api/lib/db/schema"
+import { isHiddenFile } from "@/components/ViewPackagePage/utils/is-hidden-file"
+
+export const useDownloadZip = () => {
+  const axios = useAxios()
+
+  const downloadZip = useCallback(
+    async (packageInfo: Package, packageFiles: PackageFile[]) => {
+      if (!packageInfo || !packageFiles) return
+
+      const zip = new JSZip()
+
+      const visibleFiles = packageFiles.filter(
+        (file) => !isHiddenFile(file.file_path),
+      )
+
+      for (const file of visibleFiles) {
+        try {
+          const response = await axios.post("/package_files/get", {
+            package_file_id: file.package_file_id,
+          })
+
+          const content = response.data.package_file?.content_text || ""
+
+          const cleanPath = file.file_path.startsWith("/")
+            ? file.file_path.slice(1)
+            : file.file_path
+
+          zip.file(cleanPath, content)
+        } catch (error) {
+          console.error(
+            `Failed to fetch content for file ${file.file_path}:`,
+            error,
+          )
+        }
+      }
+
+      const blob = await zip.generateAsync({ type: "blob" })
+      const fileName = `${packageInfo.unscoped_name || packageInfo.name}.zip`
+      saveAs(blob, fileName)
+    },
+    [axios],
+  )
+
+  return { downloadZip }
+}

package/src/hooks/use-hotkey.ts

@@ -0,0 +1,116 @@
+import { useEffect, useRef } from "react"
+
+/**
+ * Efficient hook for handling keyboard shortcuts
+ *
+ * Examples:
+ * - useHotkeyCombo("cmd+b", () => toggleSidebar())
+ * - useHotkeyCombo("ctrl+s", () => save())
+ * - useHotkeyCombo("Escape", () => closeModal())
+ * - useHotkey("Enter", () => submit(), { meta: true })
+ */
+
+type HotkeyModifiers = {
+  ctrl?: boolean
+  alt?: boolean
+  shift?: boolean
+  meta?: boolean
+}
+
+type HotkeyCallback = (event: KeyboardEvent) => void
+
+type HotkeyOptions = {
+  preventDefault?: boolean
+  stopPropagation?: boolean
+  target?: EventTarget | null
+}
+
+export const useHotkey = (
+  key: string,
+  callback: HotkeyCallback,
+  modifiers: HotkeyModifiers = {},
+  options: HotkeyOptions = {},
+) => {
+  const callbackRef = useRef(callback)
+  const {
+    preventDefault = true,
+    stopPropagation = false,
+    target = document,
+  } = options
+
+  useEffect(() => {
+    callbackRef.current = callback
+  }, [callback])
+
+  useEffect(() => {
+    if (!target) return
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const keyMatches = event.key.toLowerCase() === key.toLowerCase()
+
+      // Check that all required modifiers are pressed
+      const ctrlOk = modifiers.ctrl ? event.ctrlKey : true
+      const altOk = modifiers.alt ? event.altKey : true
+      const shiftOk = modifiers.shift ? event.shiftKey : true
+      const metaOk = modifiers.meta ? event.metaKey || event.ctrlKey : true
+
+      if (keyMatches && ctrlOk && altOk && shiftOk && metaOk) {
+        if (preventDefault) {
+          event.preventDefault()
+        }
+        if (stopPropagation) {
+          event.stopPropagation()
+        }
+        callbackRef.current(event)
+      }
+    }
+
+    target.addEventListener("keydown", handleKeyDown as EventListener)
+    return () =>
+      target.removeEventListener("keydown", handleKeyDown as EventListener)
+  }, [
+    key,
+    modifiers.ctrl,
+    modifiers.alt,
+    modifiers.shift,
+    modifiers.meta,
+    preventDefault,
+    stopPropagation,
+    target,
+  ])
+}
+
+export const useHotkeyCombo = (
+  combo: string,
+  callback: HotkeyCallback,
+  options: HotkeyOptions = {},
+) => {
+  const modifiers: HotkeyModifiers = {}
+  const parts = combo
+    .toLowerCase()
+    .split("+")
+    .map((part) => part.trim())
+
+  const keyPart = parts[parts.length - 1]
+  const modifierParts = parts.slice(0, -1)
+
+  modifierParts.forEach((part) => {
+    switch (part) {
+      case "ctrl":
+        modifiers.ctrl = true
+        break
+      case "cmd":
+      case "meta":
+        modifiers.meta = true
+        break
+      case "alt":
+        modifiers.alt = true
+        break
+      case "shift":
+        modifiers.shift = true
+        break
+    }
+  })
+
+  useHotkey(keyPart, callback, modifiers, options)
+}

package/src/hooks/use-package-by-package-id.ts

@@ -18,6 +18,7 @@ export const usePackageById = (packageId: string | null) => {
     {
       retry: false,
       enabled: Boolean(packageId),
+      refetchOnWindowFocus: false,
     },
   )
 }

package/src/hooks/use-package-by-package-name.ts

@@ -18,6 +18,7 @@ export const usePackageByName = (packageName: string | null) => {
     {
       retry: false,
       enabled: Boolean(packageName),
+      refetchOnWindowFocus: false,
     },
   )
 }

package/src/hooks/use-package-files.ts

@@ -47,6 +47,7 @@ export const usePackageFile = (
     {
       retry: false,
       enabled: Boolean(query),
+      refetchOnWindowFocus: false,
       ...(opts as any),
     },
   )
@@ -112,6 +113,8 @@ export const usePackageFiles = (packageReleaseId?: string | null) => {
     },
     {
       enabled: Boolean(packageReleaseId),
+      refetchOnWindowFocus: false,
+      staleTime: 0,
     },
   )
 }

package/src/hooks/use-package-release.ts

@@ -25,7 +25,10 @@ type PackageReleaseQuery = (
 export const usePackageRelease = (
   query: PackageReleaseQuery | null,
   options?: {
-    refetchInterval?: number
+    refetchInterval?:
+      | number
+      | false
+      | ((data: PackageRelease | undefined) => number | false)
   },
 ) => {
   const axios = useAxios()
@@ -52,6 +55,7 @@ export const usePackageRelease = (
       retry: false,
       enabled: Boolean(query),
       refetchInterval: options?.refetchInterval,
+      refetchOnWindowFocus: false,
     },
   )
 }

package/src/hooks/use-package.ts

@@ -18,6 +18,7 @@ export const usePackage = (packageId: string | null) => {
     {
       enabled: Boolean(packageId),
       retry: false,
+      refetchOnWindowFocus: false,
     },
   )
 }

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

@@ -1,35 +1,43 @@
 import { useMutation, useQueryClient } from "react-query"
 import { useAxios } from "./use-axios"
 import { useToast } from "./use-toast"
-import type { PackageRelease } from "fake-snippets-api/lib/db/schema"
+import type { AiReview, PackageRelease } from "fake-snippets-api/lib/db/schema"
 
 export const useRequestAiReviewMutation = ({
   onSuccess,
-}: { onSuccess?: (packageRelease: PackageRelease) => void } = {}) => {
+}: {
+  onSuccess?: (packageRelease: PackageRelease, aiReview: AiReview) => void
+} = {}) => {
   const axios = useAxios()
   const { toast } = useToast()
   const queryClient = useQueryClient()
 
   return useMutation(
     async ({ package_release_id }: { package_release_id: string }) => {
-      await axios.post("/ai_reviews/create", {
+      const { data: createData } = await axios.post("/ai_reviews/create", {
         package_release_id,
       })
+      const ai_review = createData.ai_review as AiReview
+
       const { data } = await axios.post(
         "/package_releases/get",
         { package_release_id },
         { params: { include_ai_review: true } },
       )
-      return data.package_release as PackageRelease
+
+      return {
+        package_release: data.package_release as PackageRelease,
+        ai_review,
+      }
     },
     {
-      onSuccess: (packageRelease) => {
+      onSuccess: ({ package_release, ai_review }) => {
         toast({
           title: "AI review requested",
           description: "An AI review has been generated.",
         })
         queryClient.invalidateQueries(["packageRelease"])
-        onSuccess?.(packageRelease)
+        onSuccess?.(package_release, ai_review)
       },
       onError: (error: any) => {
         toast({

package/src/hooks/use-snippet.ts

@@ -18,6 +18,7 @@ export const useSnippet = (snippetId: string | null) => {
     {
       enabled: Boolean(snippetId),
       retry: false,
+      refetchOnWindowFocus: false,
     },
   )
 }

package/src/hooks/useFileManagement.ts

@@ -8,6 +8,7 @@ import {
 import { Package } from "fake-snippets-api/lib/db/schema"
 import { usePackageFiles } from "./use-package-files"
 import { decodeUrlHashToText } from "@/lib/decodeUrlHashToText"
+import { decodeUrlHashToFsMap } from "@/lib/decodeUrlHashToFsMap"
 import { usePackageFilesLoader } from "./usePackageFilesLoader"
 import { useGlobalStore } from "./use-global-store"
 import { useToast } from "@/components/ViewPackagePage/hooks/use-toast"
@@ -15,7 +16,7 @@ import { useUpdatePackageFilesMutation } from "./useUpdatePackageFilesMutation"
 import { useCreatePackageReleaseMutation } from "./use-create-package-release-mutation"
 import { useCreatePackageMutation } from "./use-create-package-mutation"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
-import { createSnippetUrl } from "@tscircuit/create-snippet-url"
+import { encodeFsMapToUrlHash } from "@/lib/encodeFsMapToUrlHash"
 
 export interface ICreateFileProps {
   newFileName: string
@@ -117,6 +118,22 @@ export function useFileManagement({
 
   useEffect(() => {
     if (!currentPackage || isLoadingPackageFilesWithContent) {
+      const decodedFsMap = decodeUrlHashToFsMap(window.location.toString())
+
+      if (decodedFsMap && Object.keys(decodedFsMap).length > 0) {
+        const filesFromUrl = Object.entries(decodedFsMap).map(
+          ([path, content]) => ({
+            path,
+            content: String(content),
+          }),
+        )
+        const targetFile = findTargetFile(filesFromUrl, fileChoosen)
+        setLocalFiles(filesFromUrl)
+        setInitialFiles([])
+        setCurrentFile(targetFile?.path || filesFromUrl[0]?.path || null)
+        return
+      }
+
       setLocalFiles([
         {
           path: "index.tsx",
@@ -243,14 +260,15 @@ export function useFileManagement({
 
       debounceTimeoutRef.current = setTimeout(() => {
         try {
-          const mainFile =
-            files.find((f) => f.path === currentFile) ||
-            files.find((f) => f.path === "index.tsx") ||
-            files[0]
-
-          if (mainFile.content.length > 50000) return
+          const map = files.reduce(
+            (acc, f) => {
+              acc[f.path] = f.content || ""
+              return acc
+            },
+            {} as Record<string, string>,
+          )
 
-          const snippetUrl = createSnippetUrl(mainFile.content)
+          const snippetUrl = encodeFsMapToUrlHash(map)
           if (typeof snippetUrl !== "string") return
 
           const currentUrl = new URL(window.location.href)

package/src/hooks/usePackageFilesLoader.ts

@@ -36,7 +36,9 @@ export function usePackageFilesLoader(pkg?: Package) {
         const content = response.data.package_file?.content_text
         return { path: file.file_path, content: content ?? "" }
       },
-      staleTime: 2,
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      cacheTime: 0,
     })) ?? [],
   )