@tscircuit/fake-snippets 0.0.101 → 0.0.103

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

@@ -1,4 +1,4 @@
-import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
+import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import { useHotkeyCombo } from "@/hooks/use-hotkey"
 import { basicSetup } from "@/lib/codemirror/basic-setup"
 import {
@@ -49,7 +49,7 @@ import {
 } from "@/hooks/useFileManagement"
 import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
 import { inlineCopilot } from "codemirror-copilot"
-import { resolveRelativePath } from "@/lib/utils/resolveRelativePath"
+import { useViewTsFilesDialog } from "@/components/dialogs/view-ts-files-dialog"
 
 const defaultImports = `
 import React from "@types/react/jsx-runtime"
@@ -92,7 +92,7 @@ export const CodeEditor = ({
   const viewRef = useRef<EditorView | null>(null)
   const ataRef = useRef<ReturnType<typeof setupTypeAcquisition> | null>(null)
   const lastReceivedTsFileTimeRef = useRef<number>(0)
-  const apiUrl = usePackagesBaseApiUrl()
+  const apiUrl = useApiBaseUrl()
   const [cursorPosition, setCursorPosition] = useState<number | null>(null)
   const [code, setCode] = useState(files[0]?.content || "")
   const [fontSize, setFontSize] = useState(14)
@@ -108,6 +108,8 @@ export const CodeEditor = ({
   const filePathFromUrl = urlParams.get("file_path")
   const lineNumberFromUrl = urlParams.get("line")
   const [aiAutocompleteEnabled, setAiAutocompleteEnabled] = useState(false)
+  const { Dialog: ViewTsFilesDialog, openDialog: openViewTsFilesDialog } =
+    useViewTsFilesDialog()
 
   const entryPointFileName = useMemo(() => {
     const entryPointFile = findTargetFile(files, null)
@@ -519,42 +521,47 @@ export const CodeEditor = ({
                     }
                   }
                 }
-
-                // Check for local file imports
-                const localFileMatches = Array.from(
-                  lineText.matchAll(LOCAL_FILE_IMPORT_PATTERN),
-                )
-                for (const match of localFileMatches) {
-                  if (match.index !== undefined) {
-                    const start = lineStart + match.index
-                    const end = start + match[0].length
-                    if (pos >= start && pos <= end) {
-                      const relativePath = match[0]
-                      const resolvedPath = resolveRelativePath(
-                        relativePath,
-                        currentFile || "",
-                      )
-
-                      // Add common extensions if not present
-                      let targetPath = resolvedPath
-                      if (!targetPath.includes(".")) {
-                        const extensions = [".tsx", ".ts", ".js", ".jsx"]
-                        for (const ext of extensions) {
-                          if (fileMap[`${targetPath}${ext}`]) {
-                            targetPath = `${targetPath}${ext}`
-                            break
-                          }
-                        }
-                      }
-
-                      if (fileMap[targetPath]) {
-                        onFileSelect(targetPath)
+                // TypeScript "Go to Definition" functionality
+                const facet = view.state.facet(tsFacet)
+                if (facet) {
+                  const { env, path } = facet
+                  const definitions =
+                    env.languageService.getDefinitionAtPosition(path, pos)
+                  if (definitions && definitions.length > 0) {
+                    const definition = definitions[0]
+                    const definitionFileName = definition.fileName
+                    if (definitionFileName) {
+                      const localFilePath = definitionFileName.startsWith("/")
+                        ? definitionFileName.replace("/", "")
+                        : definitionFileName
+                      if (fileMap[localFilePath]) {
+                        const definitionContent = fileMap[localFilePath]
+                        const lines = definitionContent
+                          ?.substring(0, definition.textSpan.start)
+                          .split("\n")
+                        const lineNumber = lines?.length
+
+                        onFileSelect(localFilePath, lineNumber)
+                        return true
+                      } else {
+                        const definitionContent =
+                          env
+                            .getSourceFile(definitionFileName)
+                            ?.getFullText() || ""
+                        const lines = definitionContent
+                          .substring(0, definition.textSpan.start)
+                          .split("\n")
+                        const lineNumber = lines.length
+                        openViewTsFilesDialog({
+                          initialFile: definitionFileName,
+                          initialLine: lineNumber,
+                        })
                         return true
                       }
-                      return !!fileMap[targetPath]
                     }
                   }
                 }
+
                 return false
               },
               keydown: (event) => {
@@ -660,7 +667,6 @@ export const CodeEditor = ({
   }, [
     !isStreaming,
     currentFile,
-    code !== "",
     Boolean(highlighter),
     isSaving,
     fontSize,
@@ -867,6 +873,7 @@ export const CodeEditor = ({
           onClose={() => setShowGlobalFindReplace(false)}
         />
       )}
+      <ViewTsFilesDialog />
     </div>
   )
 }

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

@@ -27,7 +27,7 @@ import {
 } from "@/components/ui/tooltip"
 import { convertRawEasyToTsx, fetchEasyEDAComponent } from "easyeda/browser"
 import { ComponentSearchResult } from "@tscircuit/runframe/runner"
-import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
+import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import { ICreateFileProps, ICreateFileResult } from "@/hooks/useFileManagement"
 import { useGlobalStore } from "@/hooks/use-global-store"
 
@@ -60,7 +60,7 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
     useImportComponentDialog()
   const { toast, toastLibrary } = useToast()
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
-  const API_BASE = usePackagesBaseApiUrl()
+  const API_BASE = useApiBaseUrl()
   const [aiAutocompleteEnabled, setAiAutocompleteEnabled] = aiAutocompleteState
   const session = useGlobalStore((s) => s.session)
 
@@ -184,11 +184,13 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
       )
       const tsxComponent = await convertRawEasyToTsx(jlcpcbComponent)
       let componentName = component.name.replace(/ /g, "-")
-      if (files[`${componentName}.tsx`] || files[`./${componentName}.tsx`]) {
+      let componentPath = `imports/${componentName}.tsx`
+      if (files[componentPath] || files[`./${componentPath}`]) {
         componentName = `${componentName}-1`
+        componentPath = `imports/${componentName}.tsx`
       }
       const createFileResult = createFile({
-        newFileName: `${componentName}.tsx`,
+        newFileName: componentPath,
         content: tsxComponent,
         onError: (error) => {
           throw error

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

@@ -45,6 +45,9 @@ import { useForkPackageMutation } from "@/hooks/useForkPackageMutation"
 import tscircuitCorePkg from "@tscircuit/core/package.json"
 import { useRenamePackageDialog } from "../dialogs/rename-package-dialog"
 import { useUpdatePackageDescriptionDialog } from "../dialogs/update-package-description-dialog"
+import { useCreateReleaseDialog } from "@/hooks/use-create-release-dialog"
+import { Tag } from "lucide-react"
+import { CreateReleaseDialog } from "../CreateReleaseDialog"
 
 export default function EditorNav({
   circuitJson,
@@ -58,6 +61,8 @@ export default function EditorNav({
   onDiscard,
   packageType,
   isSaving,
+  files,
+  packageFilesMeta,
 }: {
   pkg?: Package | null
   circuitJson?: AnyCircuitElement[] | null
@@ -70,6 +75,13 @@ export default function EditorNav({
   isSaving: boolean
   onSave: () => void
   onDiscard?: () => void
+  files?: { path: string; content: string }[]
+  packageFilesMeta?: {
+    created_at: string
+    file_path: string
+    package_file_id: string
+    package_release_id: string
+  }[]
 }) {
   const [, navigate] = useLocation()
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
@@ -84,6 +96,18 @@ export default function EditorNav({
     useConfirmDeletePackageDialog()
   const { Dialog: ViewTsFilesDialog, openDialog: openViewTsFilesDialog } =
     useViewTsFilesDialog()
+  const createReleaseDialog = useCreateReleaseDialog({
+    packageId: pkg?.package_id ?? "",
+    packageName: pkg?.unscoped_name ?? "",
+    currentVersion: pkg?.latest_version || undefined,
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["packages"] })
+      qc.invalidateQueries({ queryKey: ["packages", pkg?.package_id] })
+    },
+    files: files || [],
+    currentPackage: pkg || undefined,
+    packageFilesMeta: packageFilesMeta || [],
+  })
 
   const [isChangingType, setIsChangingType] = useState(false)
   const [currentType, setCurrentType] = useState(
@@ -229,14 +253,25 @@ export default function EditorNav({
                 </span>
               )}
               {pkg.owner_github_username === session?.github_username && (
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-6 w-6 ml-2"
-                  onClick={() => openRenameDialog()}
-                >
-                  <Pencil className="h-3 w-3 text-gray-700" />
-                </Button>
+                <>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6 ml-2"
+                    onClick={() => openRenameDialog()}
+                  >
+                    <Pencil className="h-3 w-3 text-gray-700" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6 ml-2"
+                    onClick={() => createReleaseDialog.openDialog()}
+                    disabled={hasUnsavedChanges || isSaving}
+                  >
+                    <Tag className="h-3 w-3 text-gray-700" />
+                  </Button>
+                </>
               )}
               {isPrivate && (
                 <div className="relative group">
@@ -363,22 +398,23 @@ export default function EditorNav({
             <Eye className="mr-1 h-3 w-3" />
             Public
           </Button> */}
-          {pkg && (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon" className="hidden md:flex">
-                  <MoreVertical className="h-3 w-3" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuItem
-                  className="text-xs"
-                  onClick={() => openViewTsFilesDialog()}
-                >
-                  <File className="mr-2 h-3 w-3" />
-                  View Files
-                </DropdownMenuItem>
-                {session?.github_username === pkg.owner_github_username && (
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="hidden md:flex">
+                <MoreVertical className="h-3 w-3" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem
+                className="text-xs"
+                onClick={() => openViewTsFilesDialog()}
+              >
+                <File className="mr-2 h-3 w-3" />
+                View Files
+              </DropdownMenuItem>
+              {pkg &&
+                session?.github_username === pkg?.owner_github_username && (
                   <>
                     <DropdownMenuItem
                       className="text-xs"
@@ -436,21 +472,21 @@ export default function EditorNav({
                         </DropdownMenuItem>
                       </DropdownMenuSubContent>
                     </DropdownMenuSub>
+                    <DropdownMenuItem
+                      className="text-xs text-red-600"
+                      onClick={() => openDeleteDialog()}
+                    >
+                      <Trash2 className="mr-2 h-3 w-3" />
+                      Delete Package
+                    </DropdownMenuItem>
                   </>
                 )}
-                <DropdownMenuItem
-                  className="text-xs text-red-600"
-                  onClick={() => openDeleteDialog()}
-                >
-                  <Trash2 className="mr-2 h-3 w-3" />
-                  Delete Package
-                </DropdownMenuItem>
-                <DropdownMenuItem className="text-xs text-gray-500" disabled>
-                  @tscircuit/core@{tscircuitCorePkg.version}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )}
+              <DropdownMenuItem className="text-xs text-gray-500" disabled>
+                @tscircuit/core@{tscircuitCorePkg.version}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
           <Button
             variant="ghost"
             size="icon"
@@ -488,6 +524,17 @@ export default function EditorNav({
                   Discard Changes
                 </DropdownMenuItem>
               )}
+              {pkg &&
+                session?.github_username === pkg?.owner_github_username && (
+                  <DropdownMenuItem
+                    className="text-xs"
+                    onClick={() => createReleaseDialog.openDialog()}
+                    disabled={hasUnsavedChanges || isSaving}
+                  >
+                    <Tag className="mr-1 h-3 w-3" />
+                    Create Release
+                  </DropdownMenuItem>
+                )}
               <DropdownMenuItem
                 className="text-xs"
                 onClick={() => {
@@ -561,6 +608,16 @@ export default function EditorNav({
         packageOwner={pkg?.owner_github_username ?? ""}
       />
       <ViewTsFilesDialog />
+      <CreateReleaseDialog
+        isOpen={createReleaseDialog.isOpen}
+        onClose={createReleaseDialog.closeDialog}
+        currentVersion={createReleaseDialog.currentVersion}
+        version={createReleaseDialog.version}
+        setVersion={createReleaseDialog.setVersion}
+        isLoading={createReleaseDialog.isLoading}
+        error={createReleaseDialog.error}
+        onCreateRelease={createReleaseDialog.handleCreateRelease}
+      />
     </nav>
   )
 }

package/src/components/preview/BuildsList.tsx

@@ -0,0 +1,241 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Clock,
+  GitBranch,
+  AlertCircle,
+  CheckCircle,
+  Loader2,
+  MoreHorizontal,
+  GitCommit,
+  Plus,
+} from "lucide-react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { getBuildStatus, MOCK_DEPLOYMENTS, PackageBuild, StatusIcon } from "."
+import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
+import { Package } from "fake-snippets-api/lib/db/schema"
+
+export const BuildsList = ({
+  pkg,
+  onSelectBuild,
+}: {
+  pkg: Package
+  onSelectBuild?: (build: PackageBuild) => void
+}) => {
+  const builds = MOCK_DEPLOYMENTS
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-900">Builds</h2>
+          <p className="text-gray-600">Manage and monitor your builds</p>
+        </div>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Recent Deployments</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Build ID</TableHead>
+                  <TableHead>Branch</TableHead>
+                  <TableHead>Commit</TableHead>
+                  <TableHead>Author</TableHead>
+                  <TableHead>Created</TableHead>
+                  <TableHead>Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {builds.map((build) => {
+                  const { status, label } = getBuildStatus(build)
+
+                  return (
+                    <TableRow
+                      key={build.package_build_id}
+                      className="cursor-pointer hover:bg-gray-50"
+                      onClick={() => onSelectBuild?.(build)}
+                    >
+                      <TableCell>
+                        <div className="flex items-center gap-2">
+                          <StatusIcon status={status} />
+                          <Badge
+                            variant={
+                              status === "success"
+                                ? "default"
+                                : status === "error"
+                                  ? "destructive"
+                                  : "secondary"
+                            }
+                            className="text-xs"
+                          >
+                            {label}
+                          </Badge>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <code className="text-sm bg-gray-100 px-2 py-1 rounded">
+                          {build.package_build_id.slice(-8)}
+                        </code>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-2">
+                          {build.branch_name?.includes("/") ? (
+                            <GitBranch className="w-3 h-3 text-gray-500" />
+                          ) : (
+                            <GitCommit className="w-3 h-3 text-gray-500" />
+                          )}
+                          <Badge variant="outline" className="text-xs">
+                            {build.branch_name || "main"}
+                          </Badge>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div className="max-w-xs">
+                          <p className="text-sm font-medium truncate">
+                            {build.commit_message || "No commit message"}
+                          </p>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-gray-600">
+                          {build.commit_author || "Unknown"}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <span className="text-sm text-gray-600">
+                          {formatTimeAgo(build.created_at)}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-2">
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={(e) => e.stopPropagation()}
+                              >
+                                <MoreHorizontal className="w-3 h-3" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                              <DropdownMenuItem
+                                onClick={() => onSelectBuild?.(build)}
+                              >
+                                View Details
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                onClick={() => onSelectBuild?.(build)}
+                              >
+                                View Logs
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  )
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-green-100 rounded-lg">
+                <CheckCircle className="w-5 h-5 text-green-600" />
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Successful</p>
+                <p className="text-2xl font-bold text-gray-900">
+                  {
+                    builds.filter((d) => getBuildStatus(d).status === "success")
+                      .length
+                  }
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-red-100 rounded-lg">
+                <AlertCircle className="w-5 h-5 text-red-600" />
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Failed</p>
+                <p className="text-2xl font-bold text-gray-900">
+                  {
+                    builds.filter((d) => getBuildStatus(d).status === "error")
+                      .length
+                  }
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-blue-100 rounded-lg">
+                <Loader2 className="w-5 h-5 text-blue-600 animate-spin" />
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Building</p>
+                <p className="text-2xl font-bold text-gray-900">
+                  {
+                    builds.filter(
+                      (d) => getBuildStatus(d).status === "building",
+                    ).length
+                  }
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-gray-100 rounded-lg">
+                <Clock className="w-5 h-5 text-gray-600" />
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Total</p>
+                <p className="text-2xl font-bold text-gray-900">
+                  {builds.length}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}