@tscircuit/fake-snippets 0.0.26 → 0.0.28

package/src/components/ViewPackagePage/components/important-files-view.tsx

@@ -0,0 +1,231 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Edit, FileText, Code } from "lucide-react"
+import { Skeleton } from "@/components/ui/skeleton"
+import { usePackageFile, usePackageFileByPath } from "@/hooks/use-package-files"
+import { ShikiCodeViewer } from "./ShikiCodeViewer"
+import { SparklesIcon } from "lucide-react"
+
+interface PackageFile {
+  package_file_id: string
+  package_release_id: string
+  file_path: string
+  created_at: string
+}
+
+interface ImportantFilesViewProps {
+  importantFiles?: PackageFile[]
+  isLoading?: boolean
+  onEditClicked?: () => void
+
+  aiDescription?: string
+  aiUsageInstructions?: string
+}
+
+export default function ImportantFilesView({
+  importantFiles = [],
+  aiDescription,
+  aiUsageInstructions,
+  isLoading = false,
+  onEditClicked,
+}: ImportantFilesViewProps) {
+  const [activeFilePath, setActiveFilePath] = useState<string | null>(null)
+  const [activeTab, setActiveTab] = useState<string | null>(null)
+
+  // Determine if we have AI content
+  const hasAiContent = Boolean(aiDescription || aiUsageInstructions)
+
+  // Select the appropriate tab/file when content changes
+  useEffect(() => {
+    // First priority: README file if it exists
+    const readmeFile = importantFiles.find(
+      (file) =>
+        file.file_path.toLowerCase().endsWith("readme.md") ||
+        file.file_path.toLowerCase().endsWith("readme"),
+    )
+
+    if (readmeFile) {
+      setActiveFilePath(readmeFile.file_path)
+      setActiveTab("file")
+    } else if (hasAiContent) {
+      // Second priority: AI content if available
+      setActiveTab("ai")
+      setActiveFilePath(null)
+    } else if (importantFiles.length > 0) {
+      // Third priority: First important file
+      setActiveFilePath(importantFiles[0].file_path)
+      setActiveTab("file")
+    }
+  }, [importantFiles, aiDescription, aiUsageInstructions, hasAiContent])
+
+  // Get file name from path
+  const getFileName = (path: string) => {
+    const parts = path.split("/")
+    return parts[parts.length - 1]
+  }
+
+  // Get file icon based on extension
+  const getFileIcon = (path: string) => {
+    if (
+      path.endsWith(".js") ||
+      path.endsWith(".jsx") ||
+      path.endsWith(".ts") ||
+      path.endsWith(".tsx")
+    ) {
+      return <Code className="h-3.5 w-3.5 mr-1.5" />
+    }
+    return <FileText className="h-3.5 w-3.5 mr-1.5" />
+  }
+
+  // Render AI content
+  const renderAiContent = () => {
+    return (
+      <div className="markdown-content">
+        {aiDescription && (
+          <div className="mb-6">
+            <h3 className="font-semibold text-lg mb-2">Description</h3>
+            <p className="whitespace-pre-wrap">{aiDescription}</p>
+          </div>
+        )}
+        {aiUsageInstructions && (
+          <div>
+            <h3 className="font-semibold text-lg mb-2">Instructions</h3>
+            <p className="whitespace-pre-wrap">{aiUsageInstructions}</p>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  // Get active file content
+  const partialActiveFile = importantFiles.find(
+    (file) => file.file_path === activeFilePath,
+  )
+  const { data: activeFileFull } = usePackageFile(
+    partialActiveFile
+      ? {
+          file_path: partialActiveFile.file_path,
+          package_release_id: partialActiveFile.package_release_id,
+        }
+      : null,
+  )
+  const activeFileContent = activeFileFull?.content_text || ""
+
+  if (isLoading) {
+    return (
+      <div className="mt-4 border border-gray-200 dark:border-[#30363d] rounded-md overflow-hidden">
+        <div className="flex items-center pl-2 pr-4 py-2 bg-gray-100 dark:bg-[#161b22] border-b border-gray-200 dark:border-[#30363d]">
+          <div className="flex items-center space-x-4">
+            <Skeleton className="h-6 w-24" />
+            <Skeleton className="h-6 w-20" />
+            <Skeleton className="h-6 w-28" />
+          </div>
+          <div className="ml-auto flex items-center">
+            <Skeleton className="h-4 w-4 mr-1" />
+            <Skeleton className="h-4 w-4 ml-2" />
+          </div>
+        </div>
+        <div className="p-4 bg-white dark:bg-[#0d1117]">
+          <Skeleton className="h-8 w-3/4 mb-4" />
+          <Skeleton className="h-4 w-full mb-2" />
+          <Skeleton className="h-4 w-5/6 mb-2" />
+          <Skeleton className="h-4 w-4/5 mb-4" />
+          <Skeleton className="h-4 w-full mb-2" />
+          <Skeleton className="h-4 w-3/4" />
+        </div>
+      </div>
+    )
+  }
+
+  if (importantFiles.length === 0) {
+    return (
+      <div className="mt-4 border border-gray-200 dark:border-[#30363d] rounded-md overflow-hidden">
+        <div className="flex items-center pl-2 pr-4 py-2 bg-gray-100 dark:bg-[#161b22] border-b border-gray-200 dark:border-[#30363d]">
+          <div className="flex items-center">
+            <FileText className="h-4 w-4 mr-2" />
+            <span className="font-semibold">No important files found</span>
+          </div>
+        </div>
+        <div className="p-4 bg-white dark:bg-[#0d1117]">
+          <p className="text-gray-500 dark:text-[#8b949e]">
+            No README, LICENSE, or other important files found in this
+            repository.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mt-4 border border-gray-200 dark:border-[#30363d] rounded-md overflow-hidden">
+      <div className="flex items-center pl-2 pr-4 py-2 bg-gray-100 dark:bg-[#161b22] border-b border-gray-200 dark:border-[#30363d]">
+        <div className="flex items-center space-x-2">
+          {/* AI Description Tab */}
+          {hasAiContent && (
+            <button
+              className={`flex items-center px-3 py-1.5 rounded-md text-xs ${
+                activeTab === "ai"
+                  ? "bg-gray-200 dark:bg-[#30363d] font-medium"
+                  : "text-gray-500 dark:text-[#8b949e] hover:bg-gray-200 dark:hover:bg-[#30363d]"
+              }`}
+              onClick={() => {
+                setActiveTab("ai")
+                setActiveFilePath(null)
+              }}
+            >
+              <SparklesIcon className="h-3.5 w-3.5 mr-1.5" />
+              <span>Description</span>
+            </button>
+          )}
+
+          {/* File Tabs */}
+          {importantFiles.map((file) => (
+            <button
+              key={file.package_file_id}
+              className={`flex items-center px-3 py-1.5 rounded-md text-xs ${
+                activeTab === "file" && activeFilePath === file.file_path
+                  ? "bg-gray-200 dark:bg-[#30363d] font-medium"
+                  : "text-gray-500 dark:text-[#8b949e] hover:bg-gray-200 dark:hover:bg-[#30363d]"
+              }`}
+              onClick={() => {
+                setActiveTab("file")
+                setActiveFilePath(file.file_path)
+              }}
+            >
+              {getFileIcon(file.file_path)}
+              <span>{getFileName(file.file_path)}</span>
+            </button>
+          ))}
+        </div>
+        <div className="ml-auto flex items-center">
+          <button
+            className="hover:bg-gray-200 dark:hover:bg-[#30363d] p-1 rounded-md"
+            onClick={onEditClicked}
+          >
+            <Edit className="h-4 w-4" />
+            <span className="sr-only">Edit</span>
+          </button>
+        </div>
+      </div>
+      <div className="p-4 bg-white dark:bg-[#0d1117]">
+        {activeTab === "ai" ? (
+          renderAiContent()
+        ) : activeFilePath && activeFilePath.endsWith(".md") ? (
+          <div className="markdown-content">
+            {/* In a real app, you'd use a markdown renderer here */}
+            <pre className="whitespace-pre-wrap">{activeFileContent}</pre>
+          </div>
+        ) : activeFilePath &&
+          (activeFilePath.endsWith(".js") ||
+            activeFilePath.endsWith(".jsx") ||
+            activeFilePath.endsWith(".ts") ||
+            activeFilePath.endsWith(".tsx")) ? (
+          <ShikiCodeViewer code={activeFileContent} filePath={activeFilePath} />
+        ) : (
+          <pre className="whitespace-pre-wrap">{activeFileContent}</pre>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/ViewPackagePage/components/main-content-header.tsx

@@ -0,0 +1,172 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import {
+  ChevronDown,
+  CodeIcon,
+  Download,
+  Copy,
+  Check,
+  Hammer,
+} from "lucide-react"
+import MainContentViewSelector from "./main-content-view-selector"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu"
+
+interface PackageInfo {
+  name: string
+  unscoped_name: string
+  owner_github_username: string
+  star_count: string
+  description: string
+  ai_description: string
+  creator_account_id?: string
+  owner_org_id?: string
+}
+
+interface MainContentHeaderProps {
+  activeView: string
+  onViewChange: (view: string) => void
+  onExportClicked?: (exportType: string) => void
+  packageInfo?: PackageInfo
+}
+
+export default function MainContentHeader({
+  activeView,
+  onViewChange,
+  onExportClicked,
+  packageInfo,
+}: MainContentHeaderProps) {
+  const [copyInstallState, setCopyInstallState] = useState<"copy" | "copied">(
+    "copy",
+  )
+  const [copyCloneState, setCopyCloneState] = useState<"copy" | "copied">(
+    "copy",
+  )
+
+  const handleCopyInstall = () => {
+    const command = `tsci add ${packageInfo?.name || "@tscircuit/keyboard-default60"}`
+    navigator.clipboard.writeText(command)
+    setCopyInstallState("copied")
+    setTimeout(() => setCopyInstallState("copy"), 2000)
+  }
+
+  const handleCopyClone = () => {
+    const command = `tsci clone ${packageInfo?.name || "@tscircuit/keyboard-default60"}`
+    navigator.clipboard.writeText(command)
+    setCopyCloneState("copied")
+    setTimeout(() => setCopyCloneState("copy"), 2000)
+  }
+
+  return (
+    <div className="flex items-center justify-between mb-4">
+      <MainContentViewSelector
+        activeView={activeView}
+        onViewChange={onViewChange}
+      />
+
+      <div className="flex space-x-2">
+        {/* Export Dropdown */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-9 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]"
+            >
+              <Download className="h-4 w-4 mr-0.5" />
+              Export
+              <ChevronDown className="h-4 w-4 ml-0.5" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() => onExportClicked && onExportClicked("circuit_json")}
+            >
+              <Download className="h-4 w-4 mr-1.5 text-gray-500 dark:text-[#8b949e]" />
+              Circuit JSON
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() =>
+                onExportClicked && onExportClicked("fabrication_files")
+              }
+            >
+              <Hammer className="h-4 w-4 mr-1.5 text-gray-500 dark:text-[#8b949e]" />
+              Fabrication Files
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        {/* Code Dropdown */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="sm"
+              className="h-9 bg-green-600 hover:bg-green-700 dark:bg-[#238636] dark:hover:bg-[#2ea043] text-white"
+            >
+              <CodeIcon className="h-4 w-4 mr-0.5" />
+              Code
+              <ChevronDown className="h-4 w-4 ml-0.5" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-72">
+            <DropdownMenuItem className="cursor-pointer">
+              Edit Online
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+
+            {/* Install Option */}
+            <div className="p-2">
+              <div className="text-sm font-medium mb-1">Install</div>
+              <div className="flex items-center bg-gray-100 dark:bg-[#161b22] rounded-md p-2 text-sm font-mono">
+                <code className="flex-1 overflow-x-auto">
+                  tsci add{" "}
+                  {packageInfo?.name || "@tscircuit/keyboard-default60"}
+                </code>
+                <button
+                  className="ml-2 p-1 hover:bg-gray-200 dark:hover:bg-[#30363d] rounded"
+                  onClick={handleCopyInstall}
+                >
+                  {copyInstallState === "copy" ? (
+                    <Copy className="h-4 w-4" />
+                  ) : (
+                    <Check className="h-4 w-4 text-green-500" />
+                  )}
+                </button>
+              </div>
+            </div>
+
+            {/* Clone Option */}
+            <div className="p-2">
+              <div className="text-sm font-medium mb-1">Clone</div>
+              <div className="flex items-center bg-gray-100 dark:bg-[#161b22] rounded-md p-2 text-sm font-mono">
+                <code className="flex-1 overflow-x-auto">
+                  tsci clone{" "}
+                  {packageInfo?.name || "@tscircuit/keyboard-default60"}
+                </code>
+                <button
+                  className="ml-2 p-1 hover:bg-gray-200 dark:hover:bg-[#30363d] rounded"
+                  onClick={handleCopyClone}
+                >
+                  {copyCloneState === "copy" ? (
+                    <Copy className="h-4 w-4" />
+                  ) : (
+                    <Check className="h-4 w-4 text-green-500" />
+                  )}
+                </button>
+              </div>
+            </div>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  )
+}

package/src/components/ViewPackagePage/components/main-content-view-selector.tsx

@@ -0,0 +1,106 @@
+"use client"
+import React from "react"
+import {
+  Code,
+  CuboidIcon as Cube,
+  CircuitBoardIcon as Circuit,
+  FileTerminal,
+  ClipboardList,
+} from "lucide-react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Button } from "@/components/ui/button"
+
+interface MainContentViewSelectorProps {
+  activeView: string
+  onViewChange: (view: string) => void
+}
+
+export default function MainContentViewSelector({
+  activeView,
+  onViewChange,
+}: MainContentViewSelectorProps) {
+  const views = [
+    { id: "files", label: "Files", icon: <Code className="h-4 w-4 mr-1" /> },
+    { id: "3d", label: "3D", icon: <Cube className="h-4 w-4 mr-1" /> },
+    { id: "pcb", label: "PCB", icon: <Circuit className="h-4 w-4 mr-1" /> },
+    {
+      id: "schematic",
+      label: "Schematic",
+      icon: <FileTerminal className="h-4 w-4 mr-1" />,
+    },
+    {
+      id: "bom",
+      label: "BOM",
+      icon: <ClipboardList className="h-4 w-4 mr-1" />,
+    },
+  ]
+
+  return (
+    <>
+      {/* Desktop Tabs */}
+      <div className="bg-gray-100 dark:bg-[#161b22] rounded-md p-1 hidden lg:flex">
+        {views.map((view) => (
+          <button
+            key={view.id}
+            className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors flex items-center ${
+              activeView === view.id
+                ? "bg-white dark:bg-[#0d1117] text-gray-800 dark:text-white"
+                : "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white"
+            }`}
+            onClick={() => onViewChange(view.id)}
+          >
+            {React.cloneElement(view.icon, { className: "h-4 w-4 mr-1" })}
+            {view.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Mobile Dropdown */}
+      <div className="lg:hidden">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-9 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]"
+            >
+              {views.find((view) => view.id === activeView)?.icon}
+              {views.find((view) => view.id === activeView)?.label || "View"}
+              <svg
+                className="h-4 w-4 ml-1"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="m6 9 6 6 6-6" />
+              </svg>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            {views.map((view) => (
+              <DropdownMenuItem
+                key={view.id}
+                onClick={() => onViewChange(view.id)}
+                className="flex items-center cursor-pointer"
+              >
+                {view.icon}
+                {view.label}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,130 @@
+import { GitFork, Star, Tag } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Skeleton } from "@/components/ui/skeleton"
+
+interface PackageInfo {
+  name: string
+  unscoped_name: string
+  owner_github_username: string
+  star_count: string
+  description: string
+  ai_description: string
+  creator_account_id?: string
+  owner_org_id?: string
+  is_package?: boolean
+}
+
+interface MobileSidebarProps {
+  packageInfo?: PackageInfo
+  isLoading?: boolean
+}
+
+export default function MobileSidebar({
+  packageInfo,
+  isLoading = false,
+}: MobileSidebarProps) {
+  const topics = packageInfo?.is_package ? ["Package"] : ["Board"]
+
+  if (isLoading) {
+    return (
+      <div className="p-4 bg-white dark:bg-[#0d1117] border-b border-gray-200 dark:border-[#30363d] md:hidden">
+        {/* Description skeleton */}
+        <Skeleton className="h-4 w-full mb-4" />
+
+        {/* Tags/Topics skeleton */}
+        <div className="flex flex-wrap gap-2 mb-4">
+          {[1, 2, 3].map((i) => (
+            <Skeleton key={i} className="h-6 w-20 rounded-full" />
+          ))}
+        </div>
+
+        <div className="flex justify-between text-sm">
+          <Skeleton className="h-4 w-16" />
+          <Skeleton className="h-4 w-16" />
+          <Skeleton className="h-4 w-24" />
+        </div>
+
+        <div className="grid grid-cols-3 gap-2 mt-4">
+          {[1, 2, 3].map((i) => (
+            <Skeleton key={i} className="aspect-square rounded-lg" />
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="p-4 bg-white dark:bg-[#0d1117] border-b border-gray-200 dark:border-[#30363d] md:hidden">
+      {/* Description */}
+      <p className="text-sm mb-4 text-gray-700 dark:text-[#c9d1d9]">
+        {packageInfo?.description ||
+          "A Default 60 keyboard created with tscircuit"}
+      </p>
+
+      {/* Tags/Topics */}
+      <div className="flex flex-wrap gap-2 mb-4">
+        {topics.map((topic, index) => (
+          <Badge
+            key={index}
+            variant="outline"
+            className="text-xs rounded-full px-2 py-0.5 bg-blue-100 dark:bg-[#1f6feb33] text-blue-600 dark:text-[#58a6ff] border-blue-300 dark:border-[#1f6feb66]"
+          >
+            {topic}
+          </Badge>
+        ))}
+      </div>
+
+      <div className="flex justify-between text-sm">
+        <div className="flex items-center">
+          <Star className="h-4 w-4 mr-1 text-gray-500 dark:text-[#8b949e]" />
+          <span className="mr-4">{packageInfo?.star_count || "16"} stars</span>
+        </div>
+        <div className="flex items-center">
+          <GitFork className="h-4 w-4 mr-1 text-gray-500 dark:text-[#8b949e]" />
+          <span className="mr-4">39 forks</span>
+        </div>
+        <div className="flex items-center">
+          <Tag className="h-4 w-4 mr-1 text-gray-500 dark:text-[#8b949e]" />
+          <span>12 Releases</span>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-3 gap-2 mt-4">
+        {["3D View", "PCB View", "Schematic View"].map((view, index) => (
+          <PreviewButton packageInfo={packageInfo} key={index} view={view} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function PreviewButton({
+  packageInfo,
+  view,
+}: {
+  packageInfo?: PackageInfo
+  view: string
+}) {
+  let imageUrl: string | null = null
+  if (packageInfo && view === "PCB View") {
+    imageUrl = `https://registry-api.tscircuit.com/snippets/images/${packageInfo.name}/pcb.png`
+  } else if (packageInfo && view === "Schematic View") {
+    imageUrl = `https://registry-api.tscircuit.com/snippets/images/${packageInfo.name}/schematic.png`
+  }
+
+  if (imageUrl) {
+    return (
+      <button className="aspect-square bg-gray-100 dark:bg-[#161b22] rounded-lg border border-gray-200 dark:border-[#30363d] hover:bg-gray-200 dark:hover:bg-[#21262d] flex items-center justify-center transition-colors">
+        <img src={imageUrl} alt={view} className="w-full h-full object-cover" />
+      </button>
+    )
+  }
+
+  return (
+    <button className="aspect-square bg-gray-100 dark:bg-[#161b22] rounded-lg border border-gray-200 dark:border-[#30363d] hover:bg-gray-200 dark:hover:bg-[#21262d] flex items-center justify-center transition-colors">
+      <span className="text-xs font-medium text-gray-700 dark:text-[#c9d1d9]">
+        {view}
+      </span>
+    </button>
+  )
+}