@tscircuit/fake-snippets 0.0.121 → 0.0.122

package/src/components/ViewPackagePage/components/tab-views/3d-view.tsx

@@ -1,43 +0,0 @@
-import { CadViewer } from "@tscircuit/runframe"
-import { useCurrentPackageCircuitJson } from "../../hooks/use-current-package-circuit-json"
-import { Suspense } from "react"
-
-export default function ThreeDView() {
-  const { circuitJson, isLoading, error } = useCurrentPackageCircuitJson()
-
-  if (isLoading) {
-    return (
-      <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-8 mb-4 bg-white dark:bg-[#0d1117] flex items-center justify-center h-[620px]">
-        <p className="text-gray-500 dark:text-[#8b949e]">Loading 3D view...</p>
-      </div>
-    )
-  }
-
-  if (error || !circuitJson) {
-    return (
-      <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-8 mb-4 bg-white dark:bg-[#0d1117] flex items-center justify-center">
-        <p className="text-red-500 dark:text-red-400">
-          {error || "Circuit JSON not available"}
-        </p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="h-[620px]">
-      <Suspense
-        fallback={
-          <div className="flex justify-center items-center h-full">
-            <div className="w-48">
-              <div className="loading">
-                <div className="loading-bar"></div>
-              </div>
-            </div>
-          </div>
-        }
-      >
-        <CadViewer clickToInteractEnabled circuitJson={circuitJson} />
-      </Suspense>
-    </div>
-  )
-}

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

@@ -1,30 +0,0 @@
-import { BomTable } from "@tscircuit/runframe"
-import { useCurrentPackageCircuitJson } from "../../hooks/use-current-package-circuit-json"
-
-export default function BOMView() {
-  const { circuitJson, isLoading, error } = useCurrentPackageCircuitJson()
-
-  if (isLoading) {
-    return (
-      <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-8 mb-4 bg-white dark:bg-[#0d1117] flex items-center justify-center h-[620px]">
-        <p className="text-gray-500 dark:text-[#8b949e]">Loading BOM view...</p>
-      </div>
-    )
-  }
-
-  if (error || !circuitJson) {
-    return (
-      <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-8 mb-4 bg-white dark:bg-[#0d1117] flex items-center justify-center">
-        <p className="text-red-500 dark:text-red-400">
-          {error || "Circuit JSON not available"}
-        </p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-4 mb-4 bg-white dark:bg-[#0d1117] w-full h-[620px] overflow-y-scroll">
-      <BomTable circuitJson={circuitJson} />
-    </div>
-  )
-}

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

@@ -1,295 +0,0 @@
-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"
-  path: string
-  name: string
-}
-
-interface File {
-  type: "file"
-  path: string
-  name: string
-  content: string
-  created_at: string
-}
-
-interface PackageFile extends ApiPackageFile {
-  file_content?: string
-  content_text?: string | null // Keep for backward compatibility
-}
-
-interface FilesViewProps {
-  packageFiles?: PackageFile[]
-  onFileClicked?: (file: PackageFile) => void
-  arePackageFilesFetched?: boolean
-}
-
-export default function FilesView({
-  packageFiles = [],
-  arePackageFilesFetched = false,
-  onFileClicked,
-}: FilesViewProps) {
-  const [activeDir, setActiveDir] = useState("")
-  const [showHiddenFiles, setShowHiddenFiles] = useState(false)
-
-  // Parse package files to determine directories and files structure
-  const { directories, files } = useMemo(() => {
-    if (!packageFiles.length) {
-      return { directories: [], files: [] }
-    }
-
-    const dirs = new Set<string>()
-    const filesList: File[] = []
-
-    packageFiles
-      .filter((file) => showHiddenFiles || !isHiddenFile(file.file_path))
-      .forEach((file) => {
-        // Extract directory path
-        const pathParts = file.file_path.split("/")
-        const fileName = pathParts.pop() || ""
-
-        // Add all parent directories
-        let currentPath = ""
-        pathParts.forEach((part) => {
-          currentPath += (currentPath ? "/" : "") + part
-          // Only add directory if it contains visible files
-          if (
-            showHiddenFiles ||
-            packageFiles.some(
-              (f) =>
-                f.file_path.startsWith(currentPath + "/") &&
-                !isHiddenFile(f.file_path),
-            )
-          ) {
-            dirs.add(currentPath)
-          }
-        })
-
-        filesList.push({
-          type: "file",
-          path: file.file_path,
-          name: fileName,
-          content: file.file_content || file.content_text || "",
-          created_at: file.created_at,
-        })
-      })
-
-    // Convert directories set to array of directory objects
-    const dirsList = Array.from(dirs)
-      .map((path) => {
-        const pathParts = path.split("/")
-        if (!path) return null
-        return {
-          type: "directory",
-          path,
-          name: pathParts[pathParts.length - 1],
-        }
-      })
-      .filter((dir): dir is Directory => dir !== null)
-
-    return {
-      directories: dirsList,
-      files: filesList,
-    }
-  }, [packageFiles, showHiddenFiles])
-  // Format date for display
-  const formatDate = (dateString: string) => {
-    const parsedDate = new Date(dateString)
-    if (Number.isNaN(parsedDate.getTime())) return ""
-
-    const now = new Date()
-    const diffMs = now.getTime() - parsedDate.getTime()
-    const oneDayMs = 1000 * 60 * 60 * 24
-
-    // Treat future dates as today
-    if (diffMs <= 0) 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`
-    if (diffDays < 365) return `${Math.floor(diffDays / 30)} months ago`
-    return `${Math.floor(diffDays / 365)} years ago`
-  }
-
-  // Combine directories and files for display
-  const items = [
-    ...directories.map((dir) => ({
-      ...dir,
-      message: "", // TODO insert ai description of directory here!
-      time: "",
-    })),
-    ...files.map((file) => ({
-      ...file,
-      message: "", // TODO insert ai description of file here!
-      time: formatDate(file.created_at),
-    })),
-  ].sort((a, b) => {
-    // Sort directories first, then files
-    if (a.type === "directory" && b.type === "file") return -1
-    if (a.type === "file" && b.type === "directory") return 1
-    // Then sort alphabetically by name
-    return a.name.localeCompare(b.name)
-  })
-
-  const handleItemClick = (item: any) => {
-    if (item.type === "directory") {
-      // When directory is clicked, navigate into it by setting it as the active directory
-      setActiveDir(item.path)
-    } else if (item.type === "file" && onFileClicked) {
-      const file = packageFiles.find((f) => f.file_path === item.path)
-      if (file) {
-        onFileClicked(file)
-      }
-    }
-  }
-
-  // Handle navigation to parent directory
-  const handleParentDirectoryClick = () => {
-    // Get the parent directory by removing the last part of the path
-    const parentDir = activeDir.substring(0, activeDir.lastIndexOf("/"))
-    setActiveDir(parentDir)
-  }
-
-  const toggleHiddenFiles = () => setShowHiddenFiles((prev) => !prev)
-
-  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]">
-          <Skeleton className="h-4 w-24" />
-          <div className="ml-auto flex items-center space-x-4">
-            <Skeleton className="h-4 w-20" />
-            <Skeleton className="h-4 w-24" />
-          </div>
-        </div>
-        <div className="bg-white dark:bg-[#0d1117]">
-          {[...Array(5)].map((_, index) => (
-            <div
-              key={index}
-              className="flex items-center px-4 py-2 border-b border-gray-200 dark:border-[#30363d]"
-            >
-              <Skeleton className="h-4 w-4 mr-2" />
-              <Skeleton className="h-4 w-32" />
-              <div className="ml-auto flex items-center space-x-4">
-                <Skeleton className="h-4 w-40" />
-                <Skeleton className="h-4 w-16" />
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    )
-  }
-
-  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]">
-        {/* Desktop view */}
-        <div className="hidden md:flex items-center text-xs">
-          <span className="text-gray-500 dark:text-[#8b949e]">
-            {activeDir ? `Files in ${activeDir}` : "Files"}
-          </span>
-        </div>
-        <div className="hidden md:flex ml-auto items-center text-xs text-gray-500 dark:text-[#8b949e]">
-          <span>
-            {files.length} files, {directories.length} directories
-          </span>
-
-          <HiddenFilesDropdown
-            showHiddenFiles={showHiddenFiles}
-            onToggleHiddenFiles={toggleHiddenFiles}
-          />
-        </div>
-
-        {/* Mobile view */}
-        <div className="md:hidden flex items-center justify-between w-full">
-          <div className="flex items-center">
-            <span className="text-xs text-gray-500 dark:text-[#8b949e]">
-              {activeDir ? `Files in ${activeDir}` : "Files"}
-            </span>
-          </div>
-          <div className="flex items-center text-xs text-gray-500 dark:text-[#8b949e]">
-            <span>{files.length + directories.length} items</span>
-            <HiddenFilesDropdown
-              showHiddenFiles={showHiddenFiles}
-              onToggleHiddenFiles={toggleHiddenFiles}
-            />
-          </div>
-        </div>
-      </div>
-      {/* Files and Directories */}
-      <div className="bg-white dark:bg-[#0d1117]">
-        {items.length === 0 && !activeDir ? (
-          <div className="px-4 py-8 text-center text-gray-500 dark:text-[#8b949e]">
-            No files found
-          </div>
-        ) : (
-          <>
-            {/* Parent directory navigation option */}
-            {activeDir && (
-              <div
-                className="flex items-center px-4 py-2 hover:bg-gray-50 dark:hover:bg-[#161b22] border-b border-gray-200 dark:border-[#30363d] cursor-pointer group"
-                onClick={handleParentDirectoryClick}
-              >
-                <Folder className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
-                <span className="text-sm group-hover:underline">..</span>
-                <span className="ml-auto text-xs text-gray-500 dark:text-[#8b949e]">
-                  Parent directory
-                </span>
-              </div>
-            )}
-
-            {/* Directory contents */}
-            {items
-              .filter((item) =>
-                isWithinDirectory({ dir: activeDir, path: item.path }),
-              )
-              .map((item, index) => (
-                <div
-                  key={index}
-                  className="flex items-center px-4 py-2 hover:bg-gray-50 dark:hover:bg-[#161b22] border-b border-gray-200 dark:border-[#30363d] cursor-pointer group"
-                  onClick={() => handleItemClick(item)}
-                >
-                  {item.type === "directory" ? (
-                    <Folder className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
-                  ) : (
-                    <FileText className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
-                  )}
-                  <span className="text-sm group-hover:underline">
-                    {item.name}
-                  </span>
-                  <span className="ml-auto text-xs text-gray-500 dark:text-[#8b949e]">
-                    {item.message}
-                  </span>
-                  {item.time && (
-                    <span className="ml-4 text-xs text-gray-500 dark:text-[#8b949e]">
-                      {item.time}
-                    </span>
-                  )}
-                </div>
-              ))}
-
-            {/* No files in current directory */}
-            {items.filter((item) =>
-              isWithinDirectory({ dir: activeDir, path: item.path }),
-            ).length === 0 && (
-              <div className="px-4 py-8 text-center text-gray-500 dark:text-[#8b949e]">
-                No files in this directory
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    </div>
-  )
-}

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

@@ -1,35 +0,0 @@
-import { PcbViewerWithContainerHeight } from "@/components/PcbViewerWithContainerHeight"
-import { useCurrentPackageCircuitJson } from "../../hooks/use-current-package-circuit-json"
-
-export default function PCBView() {
-  const { circuitJson, isLoading, error } = useCurrentPackageCircuitJson()
-
-  if (isLoading) {
-    return (
-      <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-8 mb-4 bg-white dark:bg-[#0d1117] flex items-center justify-center">
-        <p className="text-gray-500 dark:text-[#8b949e]">Loading PCB view...</p>
-      </div>
-    )
-  }
-
-  if (error || !circuitJson) {
-    return (
-      <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-8 mb-4 bg-white dark:bg-[#0d1117] flex items-center justify-center">
-        <p className="text-red-500 dark:text-red-400">
-          {error || "Circuit JSON not available"}
-        </p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-4 mb-4 bg-white dark:bg-[#0d1117]">
-      <PcbViewerWithContainerHeight
-        disablePcbGroups
-        clickToInteractEnabled
-        circuitJson={circuitJson}
-        containerClassName="w-full h-[620px]"
-      />
-    </div>
-  )
-}

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

@@ -1,38 +0,0 @@
-import { useCurrentPackageCircuitJson } from "../../hooks/use-current-package-circuit-json"
-import { SchematicViewer } from "@tscircuit/schematic-viewer"
-
-export default function SchematicView() {
-  const { circuitJson, isLoading, error } = useCurrentPackageCircuitJson()
-  if (isLoading) {
-    return (
-      <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-8 mb-4 bg-white dark:bg-[#0d1117] flex items-center justify-center h-[620px]">
-        <p className="text-gray-500 dark:text-[#8b949e]">
-          Loading schematic view...
-        </p>
-      </div>
-    )
-  }
-
-  if (error || !circuitJson) {
-    return (
-      <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-8 mb-4 bg-white dark:bg-[#0d1117] flex items-center justify-center">
-        <p className="text-red-500 dark:text-red-400">
-          {error || "Circuit JSON not available"}
-        </p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="h-[620px]">
-      <SchematicViewer
-        disableGroups
-        clickToInteractEnabled
-        circuitJson={circuitJson}
-        containerStyle={{
-          height: 620,
-        }}
-      />
-    </div>
-  )
-}

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

@@ -1,40 +0,0 @@
-import { useTheme } from "next-themes"
-import { Moon, Sun } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { useEffect, useState } from "react"
-
-export default function ThemeToggle() {
-  const { theme, setTheme } = useTheme()
-  const [mounted, setMounted] = useState(false)
-
-  // Ensure component is mounted before accessing theme
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  if (!mounted) {
-    return (
-      <Button
-        variant="outline"
-        size="icon"
-        className="border-gray-300 dark:border-[#30363d] bg-gray-100 hover:bg-gray-200 dark:bg-[#21262d] dark:hover:bg-[#30363d] text-gray-700 dark:text-[#c9d1d9]"
-      >
-        <Sun className="h-4 w-4" />
-        <span className="sr-only">Toggle theme</span>
-      </Button>
-    )
-  }
-
-  return (
-    <Button
-      variant="outline"
-      size="icon"
-      className="border-gray-300 dark:border-[#30363d] bg-gray-100 hover:bg-gray-200 dark:bg-[#21262d] dark:hover:bg-[#30363d] text-gray-700 dark:text-[#c9d1d9]"
-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-    >
-      <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-      <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-      <span className="sr-only">Toggle theme</span>
-    </Button>
-  )
-}

package/src/components/ViewPackagePage/hooks/use-current-package-circuit-json.ts

@@ -1,46 +0,0 @@
-import { useCurrentPackageId } from "@/hooks/use-current-package-id"
-import { usePackageFile } from "@/hooks/use-package-files"
-import { useEffect, useState } from "react"
-
-export function useCurrentPackageCircuitJson() {
-  const { packageId } = useCurrentPackageId()
-
-  const [circuitJson, setCircuitJson] = useState<any>(null)
-  const [isLoading, setIsLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-
-  // Try to load circuit.json from the standard location
-  const { data: circuitJsonFile, isError } = usePackageFile(
-    packageId
-      ? {
-          package_id: packageId,
-          file_path: "dist/circuit.json",
-        }
-      : null,
-    {
-      cacheTime: 60_000 * 2,
-      staleTime: 60_000 * 2,
-    },
-  )
-
-  useEffect(() => {
-    setIsLoading(true)
-    setError(null)
-
-    if (circuitJsonFile) {
-      try {
-        const parsedCircuitJson = JSON.parse(circuitJsonFile.content_text!)
-        setCircuitJson(parsedCircuitJson)
-        setIsLoading(false)
-      } catch (e) {
-        setError("Invalid circuit.json format")
-        setIsLoading(false)
-      }
-    } else if (isError) {
-      setError("Circuit JSON not found in package")
-      setIsLoading(false)
-    }
-  }, [circuitJsonFile, isError])
-
-  return { circuitJson, isLoading, error }
-}

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

@@ -1,19 +0,0 @@
-import * as React from "react"
-
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
-
-  return !!isMobile
-}

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

@@ -1,69 +0,0 @@
-import toastLibrary, { Toaster, type Toast } from "react-hot-toast"
-import React from "react"
-
-export interface ToasterToast {
-  title?: React.ReactNode
-  description?: React.ReactNode
-  variant?: "default" | "destructive"
-  duration?: number
-}
-
-function ToastContent({
-  title,
-  description,
-  variant,
-  t,
-}: ToasterToast & { t: Toast }) {
-  return (
-    <div
-      className={`rounded-md border p-4 shadow-lg transition-all ${
-        t.visible
-          ? "animate-in fade-in slide-in-from-top-full"
-          : "animate-out fade-out slide-out-to-right-full"
-      } ${
-        variant === "destructive"
-          ? "border-red-500 bg-red-500 text-slate-50"
-          : "border-slate-200 bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50"
-      }`}
-    >
-      {title && <div className="text-sm font-semibold">{title}</div>}
-      {description && <div className="text-sm opacity-90">{description}</div>}
-    </div>
-  )
-}
-
-const toast = ({
-  duration,
-  description,
-  variant = "default",
-  title,
-}: ToasterToast) => {
-  if (description) {
-    return toastLibrary.custom(
-      (t) => (
-        <ToastContent
-          title={title}
-          description={description}
-          variant={variant}
-          t={t}
-        />
-      ),
-      { duration },
-    )
-  }
-
-  if (variant === "destructive") {
-    return toastLibrary.error(<>{title}</>, { duration })
-  }
-
-  return toastLibrary(<>{title}</>, { duration })
-}
-
-function useToast() {
-  return {
-    toast,
-    dismiss: toastLibrary.dismiss,
-  }
-}
-
-export { useToast, toast, Toaster }