@tscircuit/fake-snippets 0.0.108 → 0.0.109

package/src/components/ViewPackagePage/components/tab-views/files-view.tsx

@@ -1,11 +1,10 @@
-"use client"
-
 import { Skeleton } from "@/components/ui/skeleton"
 import { FileText, Folder } from "lucide-react"
 import { useMemo, useState } from "react"
 import { isHiddenFile } from "../../utils/is-hidden-file"
 import { isWithinDirectory } from "../../utils/is-within-directory"
 import HiddenFilesDropdown from "@/components/HiddenFilesDropdown"
+import type { PackageFile as ApiPackageFile } from "fake-snippets-api/lib/db/schema"
 
 interface Directory {
   type: "directory"
@@ -21,24 +20,20 @@ interface File {
   created_at: string
 }
 
-interface PackageFile {
-  package_file_id: string
-  package_release_id: string
-  file_path: string
-  file_content: string
-  content_text?: string // Keep for backward compatibility
-  created_at: string // iso-8601
+interface PackageFile extends ApiPackageFile {
+  file_content?: string
+  content_text?: string | null // Keep for backward compatibility
 }
 
 interface FilesViewProps {
   packageFiles?: PackageFile[]
-  isLoading?: boolean
   onFileClicked?: (file: PackageFile) => void
+  arePackageFilesFetched?: boolean
 }
 
 export default function FilesView({
   packageFiles = [],
-  isLoading = false,
+  arePackageFilesFetched = false,
   onFileClicked,
 }: FilesViewProps) {
   const [activeDir, setActiveDir] = useState("")
@@ -106,12 +101,19 @@ export default function FilesView({
   }, [packageFiles, showHiddenFiles])
   // Format date for display
   const formatDate = (dateString: string) => {
-    const date = new Date(dateString)
+    const parsedDate = new Date(dateString)
+    if (Number.isNaN(parsedDate.getTime())) return ""
+
     const now = new Date()
-    const diffTime = Math.abs(now.getTime() - date.getTime())
-    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+    const diffMs = now.getTime() - parsedDate.getTime()
+    const oneDayMs = 1000 * 60 * 60 * 24
+
+    // Treat future dates as today
+    if (diffMs <= 0) return "today"
 
-    if (diffDays < 1) return "today"
+    if (diffMs < oneDayMs) return "today"
+
+    const diffDays = Math.floor(diffMs / oneDayMs)
     if (diffDays === 1) return "yesterday"
     if (diffDays < 7) return `${diffDays} days ago`
     if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`
@@ -160,7 +162,7 @@ export default function FilesView({
 
   const toggleHiddenFiles = () => setShowHiddenFiles((prev) => !prev)
 
-  if (isLoading) {
+  if (!arePackageFilesFetched) {
     return (
       <div className="mb-4 border border-gray-200 dark:border-[#30363d] rounded-md overflow-hidden">
         <div className="flex items-center px-4 py-2 md:py-3 bg-gray-100 dark:bg-[#161b22] border-b border-gray-200 dark:border-[#30363d]">
@@ -225,7 +227,6 @@ export default function FilesView({
           </div>
         </div>
       </div>
-
       {/* Files and Directories */}
       <div className="bg-white dark:bg-[#0d1117]">
         {items.length === 0 && !activeDir ? (

package/src/components/ViewPackagePage/components/theme-toggle.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { useTheme } from "next-themes"
 import { Moon, Sun } from "lucide-react"
 import { Button } from "@/components/ui/button"

package/src/components/ViewPackagePage/hooks/use-toast.tsx

@@ -1,4 +1,3 @@
-"use client"
 import toastLibrary, { Toaster, type Toast } from "react-hot-toast"
 import React from "react"
 

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

@@ -7,7 +7,6 @@ import useWarnUserOnPageChange from "@/hooks/use-warn-user-on-page-change"
 import { getSnippetTemplate } from "@/lib/get-snippet-template"
 import { cn } from "@/lib/utils"
 import type { Package } from "fake-snippets-api/lib/db/schema"
-import { Loader2 } from "lucide-react"
 import { useMemo, useState } from "react"
 import EditorNav from "@/components/package-port/EditorNav"
 import { SuspenseRunFrame } from "../SuspenseRunFrame"
@@ -15,8 +14,7 @@ import { applyEditEventsToManualEditsFile } from "@tscircuit/core"
 import { toastManualEditConflicts } from "@/lib/utils/toastManualEditConflicts"
 import { ManualEditEvent } from "@tscircuit/props"
 import { useFileManagement } from "@/hooks/useFileManagement"
-import { DEFAULT_CODE } from "@/lib/utils/package-utils"
-import { useGlobalStore } from "@/hooks/use-global-store"
+import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
 
 interface Props {
   pkg?: Package
@@ -39,13 +37,13 @@ export interface CodeAndPreviewState {
 
 export function CodeAndPreview({ pkg, projectUrl }: Props) {
   const { toast } = useToast()
-  const session = useGlobalStore((s) => s.session)
   const urlParams = useUrlParams()
 
   const templateFromUrl = useMemo(
     () => (urlParams.template ? getSnippetTemplate(urlParams.template) : null),
     [urlParams.template],
   )
+
   const [state, setState] = useState<CodeAndPreviewState>({
     showPreview: true,
     fullScreen: false,
@@ -69,20 +67,26 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
     isSaving,
     currentFile,
     fsMap,
+    priorityFileFetched,
     isLoading,
     createFile,
+    mainComponentPath,
     deleteFile,
+    isFullyLoaded,
     onFileSelect,
+    totalFilesCount,
     saveFiles,
     setLocalFiles,
+    loadedFilesCount,
     localFiles,
+    currentFileCode,
     initialFiles,
     renameFile,
     packageFilesMeta,
   } = useFileManagement({
     templateCode: templateFromUrl?.code,
     currentPackage: pkg,
-    fileChoosen: urlParams.file_path ?? null,
+    urlParams,
     openNewPackageSaveDialog,
     updateLastUpdated: () => {
       setState((prev) => ({ ...prev, lastSavedAt: Date.now() }))
@@ -94,6 +98,7 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
       (!isSaving &&
         Date.now() - state.lastSavedAt > 1000 &&
         localFiles.some((file) => {
+          if (isHiddenFile(file.path)) return false
           const initialFile = initialFiles.find((x) => x.path === file.path)
           return initialFile?.content !== file.content
         })) ||
@@ -103,29 +108,6 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
 
   useWarnUserOnPageChange({ hasUnsavedChanges })
 
-  const currentFileCode = useMemo(
-    () =>
-      localFiles.find((x) => x.path === currentFile)?.content ??
-      state.defaultComponentFile ??
-      DEFAULT_CODE,
-    [localFiles, currentFile],
-  )
-
-  const mainComponentPath = useMemo(() => {
-    const isReactComponentExported =
-      /export function\s+\w+/.test(currentFileCode) ||
-      /export const\s+\w+\s*=/.test(currentFileCode) ||
-      /export default\s+\w+/.test(currentFileCode) ||
-      /export default\s+function\s*(\w*)\s*\(/.test(currentFileCode) ||
-      /export default\s*\(\s*\)\s*=>/.test(currentFileCode)
-
-    return (currentFile?.endsWith(".tsx") || currentFile?.endsWith(".ts")) &&
-      !!localFiles.some((x) => x.path == currentFile) &&
-      isReactComponentExported
-      ? currentFile
-      : state.defaultComponentFile
-  }, [currentFile, localFiles, currentFileCode])
-
   const handleEditEvent = (event: ManualEditEvent) => {
     const parsedManualEdits = JSON.parse(
       localFiles.find((x) => x.path === "manual-edits.json")?.content || "{}",
@@ -171,17 +153,10 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
     })
   }
 
-  if (urlParams.package_id && (!pkg || isLoading)) {
-    return (
-      <div className="flex items-center justify-center h-[80vh]">
-        <div className="flex flex-col items-center justify-center">
-          <div className="text-lg text-gray-500 mb-4">Loading</div>
-          <Loader2 className="w-16 h-16 animate-spin text-gray-400" />
-        </div>
-      </div>
-    )
-  }
-
+  const finalfsMap = useMemo(
+    () => (Object.keys(fsMap).length > 0 ? fsMap : {}),
+    [fsMap],
+  )
   return (
     <div className="flex flex-col min-h-[50vh]">
       <EditorNav
@@ -213,8 +188,14 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
           <CodeEditor
             isSaving={isSaving}
             handleCreateFile={createFile}
+            totalFilesCount={totalFilesCount}
+            loadedFilesCount={loadedFilesCount}
+            isFullyLoaded={isFullyLoaded}
             handleDeleteFile={deleteFile}
             handleRenameFile={renameFile}
+            isPriorityFileFetched={
+              !priorityFileFetched && Boolean(urlParams.package_id)
+            }
             pkg={pkg}
             currentFile={currentFile}
             onFileSelect={onFileSelect}
@@ -255,7 +236,7 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
             onEditEvent={(event) => {
               handleEditEvent(event)
             }}
-            fsMap={fsMap ?? {}}
+            fsMap={finalfsMap}
             projectUrl={projectUrl}
           />
         </div>
@@ -265,3 +246,5 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
     </div>
   )
 }
+
+export default CodeAndPreview

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

@@ -50,6 +50,7 @@ import {
 import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
 import { inlineCopilot } from "codemirror-copilot"
 import { useViewTsFilesDialog } from "@/components/dialogs/view-ts-files-dialog"
+import { Loader2 } from "lucide-react"
 
 const defaultImports = `
 import React from "@types/react/jsx-runtime"
@@ -59,6 +60,7 @@ import type { CommonLayoutProps } from "@tscircuit/props"
 
 export const CodeEditor = ({
   onCodeChange,
+  isPriorityFileFetched,
   readOnly = false,
   files = [],
   isSaving = false,
@@ -72,9 +74,13 @@ export const CodeEditor = ({
   handleCreateFile,
   handleDeleteFile,
   pkg,
+  isFullyLoaded = false,
+  totalFilesCount = 0,
+  loadedFilesCount = 0,
 }: {
   onCodeChange: (code: string, filename?: string) => void
   files: PackageFile[]
+  isPriorityFileFetched: boolean
   isSaving?: boolean
   handleCreateFile: (props: ICreateFileProps) => ICreateFileResult
   handleDeleteFile: (props: IDeleteFileProps) => IDeleteFileResult
@@ -87,6 +93,9 @@ export const CodeEditor = ({
   onFileContentChanged?: (path: string, content: string) => void
   currentFile: string | null
   onFileSelect: (path: string, lineNumber?: number) => void
+  isFullyLoaded?: boolean
+  totalFilesCount?: number
+  loadedFilesCount?: number
 }) => {
   const editorRef = useRef<HTMLDivElement>(null)
   const viewRef = useRef<EditorView | null>(null)
@@ -120,10 +129,13 @@ export const CodeEditor = ({
   const [sidebarOpen, setSidebarOpen] = useState(false)
   const [isCreatingFile, setIsCreatingFile] = useState(false)
 
-  // Set current file on component mount
+  // Set current file on component mount - only when explicitly requested via URL
   useEffect(() => {
     if (files.length === 0 || !pkgFilesLoaded || currentFile) return
 
+    // Only run this if there's an explicit file_path in URL - don't auto-select files
+    if (!filePathFromUrl) return
+
     const targetFile = findTargetFile(files, filePathFromUrl)
     if (targetFile) {
       const lineNumber = lineNumberFromUrl
@@ -825,10 +837,15 @@ export const CodeEditor = ({
         isCreatingFile={isCreatingFile}
         setIsCreatingFile={setIsCreatingFile}
         pkg={pkg}
+        isLoadingFiles={!isFullyLoaded}
+        loadingProgress={
+          totalFilesCount > 0 ? `${loadedFilesCount}/${totalFilesCount}` : null
+        }
       />
       <div className="flex flex-col flex-1 w-full min-w-0 h-full">
         {showImportAndFormatButtons && (
           <CodeEditorHeader
+            isLoadingFiles={!isFullyLoaded}
             entrypointFileName={entryPointFileName}
             appendNewFile={(path: string, content: string) => {
               onFileContentChanged?.(path, content)
@@ -854,7 +871,13 @@ export const CodeEditor = ({
           className={
             "flex-1 overflow-auto [&_.cm-editor]:h-full [&_.cm-scroller]:!h-full"
           }
+          style={{ display: isPriorityFileFetched ? "none" : "block" }}
         />
+        {isPriorityFileFetched && (
+          <div className="grid place-items-center h-full">
+            <Loader2 className="w-16 h-16 animate-spin text-gray-400" />
+          </div>
+        )}
       </div>
       {showQuickOpen && (
         <QuickOpen

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

@@ -41,6 +41,7 @@ interface CodeEditorHeaderProps {
   handleFileChange: (filename: FileName) => void
   entrypointFileName?: string
   appendNewFile: (path: string, content: string) => void
+  isLoadingFiles: boolean
   createFile: (props: ICreateFileProps) => ICreateFileResult
   aiAutocompleteState: [boolean, React.Dispatch<React.SetStateAction<boolean>>]
 }
@@ -49,8 +50,8 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
   currentFile,
   files,
   updateFileContent,
-  appendNewFile,
   fileSidebarState,
+  isLoadingFiles = true,
   handleFileChange,
   entrypointFileName = "index.tsx",
   createFile,
@@ -230,7 +231,9 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
                     (filename) => !isHiddenFile(filename),
                   ).length > 0
                     ? "Select file"
-                    : "No files"
+                    : isLoadingFiles
+                      ? "Loading files..."
+                      : "No files"
                 }
               />
             </SelectTrigger>

package/src/components/preview/PackageReleasesDashboard.tsx

@@ -91,8 +91,9 @@ export const PackageReleasesDashboard = ({
                   </div>
                   <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mt-2 text-sm text-gray-600">
                     <div
-                      className="flex cursor-pointer items-center gap-1"
+                      className={`flex items-center gap-1 ${pkg.github_repo_full_name ? "cursor-pointer" : ""}`}
                       onClick={() =>
+                        pkg.github_repo_full_name &&
                         window?.open(
                           `https://github.com/${pkg.github_repo_full_name}/tree/${latestRelease?.branch_name || "main"}`,
                           "_blank",
@@ -121,21 +122,23 @@ export const PackageReleasesDashboard = ({
               </div>
 
               <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="flex items-center gap-2 justify-center min-w-[120px] h-9"
-                  onClick={() =>
-                    window.open(
-                      `https://github.com/${pkg.github_repo_full_name}`,
-                      "_blank",
-                    )
-                  }
-                >
-                  <GitHubLogoIcon className="w-4 h-4" />
-                  <span className="hidden sm:inline">Repository</span>
-                  <span className="sm:hidden">Repository</span>
-                </Button>
+                {pkg.github_repo_full_name && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="flex items-center gap-2 justify-center min-w-[120px] h-9"
+                    onClick={() =>
+                      window.open(
+                        `https://github.com/${pkg.github_repo_full_name}`,
+                        "_blank",
+                      )
+                    }
+                  >
+                    <GitHubLogoIcon className="w-4 h-4" />
+                    <span className="hidden sm:inline">Repository</span>
+                    <span className="sm:hidden">Repository</span>
+                  </Button>
+                )}
                 {latestBuild && (
                   <Button
                     variant="outline"
@@ -164,15 +167,17 @@ export const PackageReleasesDashboard = ({
                     </Button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end">
-                    <DropdownMenuItem asChild>
-                      <a
-                        href={`https://github.com/${pkg.github_repo_full_name}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        View Source
-                      </a>
-                    </DropdownMenuItem>
+                    {pkg.github_repo_full_name && (
+                      <DropdownMenuItem asChild>
+                        <a
+                          href={`https://github.com/${pkg.github_repo_full_name}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          View Source
+                        </a>
+                      </DropdownMenuItem>
+                    )}
                     <DropdownMenuItem asChild>
                       <a href="#" download>
                         Download Build

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

@@ -1,41 +1,16 @@
-import { useEffect, useState } from "react"
-import { useParams } from "wouter"
-import { usePackageById } from "./use-package-by-package-id"
-import { usePackageByName } from "./use-package-by-package-name"
-import { useUrlParams } from "./use-url-params"
+import { useCurrentPackageInfo } from "./use-current-package-info"
 
 export const useCurrentPackageId = (): {
   packageId: string | null
   isLoading: boolean
   error: (Error & { status: number }) | null
 } => {
-  const urlParams = useUrlParams()
-  const urlPackageId = urlParams.package_id
-  const wouter = useParams()
-  const [packageIdFromUrl, setPackageId] = useState<string | null>(urlPackageId)
-
-  useEffect(() => {
-    if (urlPackageId) {
-      setPackageId(urlPackageId)
-    }
-  }, [urlPackageId])
-
-  const packageName =
-    wouter.author && wouter.packageName
-      ? `${wouter.author}/${wouter.packageName}`
-      : null
-
-  const {
-    data: packageByName,
-    isLoading: isLoadingPackageByName,
-    error: errorPackageByName,
-  } = usePackageByName(packageName)
-
-  const packageId = packageIdFromUrl ?? packageByName?.package_id ?? null
+  const { packageInfo, isLoading, error } = useCurrentPackageInfo()
+  const packageId = packageInfo?.package_id ?? null
 
   return {
     packageId,
-    isLoading: isLoadingPackageByName,
-    error: errorPackageByName,
+    isLoading,
+    error,
   }
 }

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

@@ -1,8 +1,32 @@
-import { useCurrentPackageId } from "./use-current-package-id"
+import { useParams } from "wouter"
 import { usePackageById } from "./use-package-by-package-id"
+import { usePackageByName } from "./use-package-by-package-name"
+import { useUrlParams } from "./use-url-params"
+import type { Package } from "fake-snippets-api/lib/db/schema"
 
-export const useCurrentPackageInfo = () => {
-  const { packageId } = useCurrentPackageId()
-  const { data: packageInfo, ...rest } = usePackageById(packageId)
-  return { packageInfo, ...rest }
+export const useCurrentPackageInfo = (): {
+  packageInfo: Package | undefined
+  isLoading: boolean
+  error: (Error & { status: number }) | null
+  refetch: () => Promise<unknown>
+} => {
+  const urlParams = useUrlParams()
+  const packageIdFromQuery = urlParams.package_id ?? null
+
+  const { author, packageName } = useParams()
+  const packageSlug = author && packageName ? `${author}/${packageName}` : null
+
+  const queryById = usePackageById(packageIdFromQuery)
+  const queryByName = usePackageByName(packageSlug)
+
+  const data = queryById.data ?? queryByName.data
+  const isLoading = queryById.isLoading || queryByName.isLoading
+  const error =
+    (queryById.error as (Error & { status: number }) | null) ??
+    (queryByName.error as (Error & { status: number }) | null) ??
+    null
+
+  const refetch = packageIdFromQuery ? queryById.refetch : queryByName.refetch
+
+  return { packageInfo: data, isLoading, error, refetch }
 }

package/src/hooks/use-global-store.ts

@@ -28,7 +28,7 @@ export const useGlobalStore = create<Store>()(
   ),
 )
 
-useGlobalStore.subscribe((state, prevState) => {
+useGlobalStore.subscribe((state) => {
   ;(window as any).globalStore = state
   window.TSCIRCUIT_REGISTRY_TOKEN = state.session?.token ?? null
 })