@tscircuit/fake-snippets 0.0.101 → 0.0.102

package/src/components/dialogs/create-use-dialog.tsx

@@ -5,14 +5,19 @@ export const createUseDialog = <DialogType extends React.ComponentType<any>>(
 ) => {
   return () => {
     const [open, setOpen] = useState(false)
+    const [dialogProps, setDialogProps] = useState<any>({})
 
     return useMemo(
       () => ({
-        openDialog: () => {
+        openDialog: (props?: any) => {
+          if (props) {
+            setDialogProps(props)
+          }
           setOpen(true)
         },
         closeDialog: () => {
           setOpen(false)
+          setDialogProps({})
         },
         Dialog: (
           props: Omit<
@@ -22,13 +27,14 @@ export const createUseDialog = <DialogType extends React.ComponentType<any>>(
         ) => (
           <DialogComponent
             {...(props as any)}
+            {...dialogProps}
             open={open}
             onOpenChange={setOpen}
           />
         ),
         open,
       }),
-      [open],
+      [open, dialogProps],
     )
   }
 }

package/src/components/dialogs/edit-package-details-dialog.tsx

@@ -27,6 +27,7 @@ import { createUseDialog } from "./create-use-dialog"
 import { ChevronDown } from "lucide-react"
 import { useLocation } from "wouter"
 import { useDeletePackage } from "@/hooks/use-delete-package"
+import { GitHubRepositorySelector } from "./GitHubRepositorySelector"
 
 interface EditPackageDetailsDialogProps {
   open: boolean
@@ -36,6 +37,7 @@ interface EditPackageDetailsDialogProps {
   currentWebsite: string
   currentLicense?: string | null
   currentDefaultView?: string
+  currentGithubRepoFullName?: string | null
   isPrivate?: boolean
   packageName: string
   unscopedPackageName: string
@@ -57,6 +59,7 @@ export const EditPackageDetailsDialog = ({
   currentWebsite,
   currentLicense,
   currentDefaultView = "files",
+  currentGithubRepoFullName,
   isPrivate = false,
   unscopedPackageName,
   packageReleaseId,
@@ -75,6 +78,7 @@ export const EditPackageDetailsDialog = ({
     isFormValid,
   } = usePackageDetailsForm({
     initialDescription: currentDescription,
+    initialGithubRepoFullName: currentGithubRepoFullName ?? null,
     initialWebsite: currentWebsite,
     initialLicense: currentLicense || null,
     initialDefaultView: currentDefaultView,
@@ -83,7 +87,6 @@ export const EditPackageDetailsDialog = ({
     initialVisibility: isPrivate ? "private" : "public",
   })
 
-  const [deleting, setDeleting] = useState(false)
   const [showConfirmDelete, setShowConfirmDelete] = useState(false)
   const [dangerOpen, setDangerOpen] = useState(false)
   const [, setLocation] = useLocation()
@@ -114,6 +117,7 @@ export const EditPackageDetailsDialog = ({
         website: formData.website.trim(),
         is_private: formData.visibility == "private",
         default_view: formData.defaultView,
+        github_repo_full_name: formData.githubRepoFullName,
         ...(formData.unscopedPackageName !== unscopedPackageName && {
           name: formData.unscopedPackageName.trim(),
         }),
@@ -371,6 +375,19 @@ export const EditPackageDetailsDialog = ({
                     </SelectContent>
                   </Select>
                 </div>
+                <div className="space-y-1">
+                  <GitHubRepositorySelector
+                    value={formData.githubRepoFullName || ""}
+                    onValueChange={(value) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        githubRepoFullName: value,
+                      }))
+                    }
+                    disabled={updatePackageDetailsMutation.isLoading}
+                    open={open}
+                  />
+                </div>
               </div>
 
               <details
@@ -394,10 +411,12 @@ export const EditPackageDetailsDialog = ({
                       variant="destructive"
                       size="default"
                       onClick={() => setShowConfirmDelete(true)}
-                      disabled={deleting}
+                      disabled={deletePackageMutation.isLoading}
                       className="shrink-0 lg:w-[115px] w-[70px]"
                     >
-                      {deleting ? "Deleting..." : "Delete"}
+                      {deletePackageMutation.isLoading
+                        ? "Deleting..."
+                        : "Delete"}
                     </Button>
                   </div>
                 </div>

package/src/components/dialogs/view-ts-files-dialog.tsx

@@ -21,13 +21,23 @@ import JSZip from "jszip"
 import { saveAs } from "file-saver"
 import { EditorView } from "codemirror"
 import { EditorState } from "@codemirror/state"
+import { autocompletion } from "@codemirror/autocomplete"
 import { basicSetup } from "@/lib/codemirror/basic-setup"
 import { javascript } from "@codemirror/lang-javascript"
 import { json } from "@codemirror/lang-json"
+import { tsAutocomplete, tsFacet, tsSync } from "@valtown/codemirror-ts"
+import {
+  createSystem,
+  createVirtualTypeScriptEnvironment,
+} from "@typescript/vfs"
+import { loadDefaultLibMap } from "@/lib/ts-lib-cache"
+import tsModule from "typescript"
 
 interface ViewTsFilesDialogProps {
   open: boolean
   onOpenChange: (open: boolean) => void
+  initialFile?: string
+  initialLine?: number
 }
 
 interface FileNode {
@@ -41,6 +51,8 @@ interface FileNode {
 export const ViewTsFilesDialog: React.FC<ViewTsFilesDialogProps> = ({
   open,
   onOpenChange,
+  initialFile,
+  initialLine,
 }) => {
   const [files, setFiles] = useState<Map<string, string>>(new Map())
   const [selectedFile, setSelectedFile] = useState<string | null>(null)
@@ -48,8 +60,12 @@ export const ViewTsFilesDialog: React.FC<ViewTsFilesDialogProps> = ({
   const [copiedFile, setCopiedFile] = useState<string | null>(null)
   const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set())
   const [sidebarOpen, setSidebarOpen] = useState(true)
+  const [targetLine, setTargetLine] = useState<number | null>(null)
   const editorRef = useRef<HTMLDivElement>(null)
   const viewRef = useRef<EditorView | null>(null)
+  const [tsEnv, setTsEnv] = useState<ReturnType<
+    typeof createVirtualTypeScriptEnvironment
+  > | null>(null)
 
   const fileTree = useMemo(() => {
     const tree: FileNode[] = []
@@ -159,33 +175,86 @@ export const ViewTsFilesDialog: React.FC<ViewTsFilesDialogProps> = ({
       viewRef.current.destroy()
     }
 
-    const state = EditorState.create({
-      doc: content,
-      extensions: [
-        basicSetup,
-        isJson ? json() : javascript({ typescript: true, jsx: true }),
-        EditorState.readOnly.of(true),
-        EditorView.theme({
-          "&": {
-            height: "100%",
-            fontSize: "14px",
-          },
-          ".cm-content": {
-            padding: "16px",
-            minHeight: "100%",
-          },
-          ".cm-focused": {
-            outline: "none",
-          },
-          ".cm-editor": {
-            height: "100%",
-          },
-          ".cm-scroller": {
-            fontFamily:
-              "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace",
+    const extensions = [
+      basicSetup,
+      isJson ? json() : javascript({ typescript: true, jsx: true }),
+      EditorState.readOnly.of(true),
+      EditorView.theme({
+        "&": {
+          height: "100%",
+          fontSize: "14px",
+        },
+        ".cm-content": {
+          padding: "16px",
+          minHeight: "100%",
+        },
+        ".cm-focused": {
+          outline: "none",
+        },
+        ".cm-editor": {
+          height: "100%",
+        },
+        ".cm-scroller": {
+          fontFamily:
+            "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace",
+        },
+      }),
+    ]
+
+    if (
+      tsEnv &&
+      !isJson &&
+      (selectedFile.endsWith(".ts") || selectedFile.endsWith(".tsx"))
+    ) {
+      extensions.push(
+        tsFacet.of({
+          env: tsEnv,
+          path: selectedFile.startsWith("/")
+            ? selectedFile.slice(1)
+            : selectedFile,
+        }),
+        tsSync(),
+        autocompletion({ override: [tsAutocomplete()] }),
+        EditorView.domEventHandlers({
+          click: (event, view) => {
+            if (event.ctrlKey || event.metaKey) {
+              const pos = view.posAtCoords({
+                x: event.clientX,
+                y: event.clientY,
+              })
+              if (pos !== null) {
+                const path = selectedFile.startsWith("/")
+                  ? selectedFile.slice(1)
+                  : selectedFile
+                const definitions =
+                  tsEnv.languageService.getDefinitionAtPosition(path, pos)
+                if (definitions && definitions.length > 0) {
+                  const definition = definitions[0]
+                  const definitionFileName = definition.fileName
+                  if (definitionFileName && files.has(definitionFileName)) {
+                    const definitionContent =
+                      files.get(definitionFileName) || ""
+                    const lines = definitionContent
+                      .substring(0, definition.textSpan.start)
+                      .split("\n")
+                    const lineNumber = lines.length
+
+                    setSelectedFile(definitionFileName)
+                    setTargetLine(lineNumber)
+                    return true
+                  }
+                }
+              }
+            }
+            return false
           },
         }),
-      ],
+      )
+    }
+
+    const state = EditorState.create({
+      doc: content,
+      extensions,
     })
 
     viewRef.current = new EditorView({
@@ -193,25 +262,85 @@ export const ViewTsFilesDialog: React.FC<ViewTsFilesDialogProps> = ({
       parent: editorRef.current,
     })
 
+    if (targetLine && targetLine > 0) {
+      const scrollToLine = () => {
+        if (viewRef.current) {
+          const doc = viewRef.current.state.doc
+          if (targetLine <= doc.lines) {
+            const line = doc.line(targetLine)
+
+            const performScroll = () => {
+              if (viewRef.current) {
+                viewRef.current.dispatch({
+                  selection: { anchor: line.from, head: line.to },
+                  effects: EditorView.scrollIntoView(line.from, {
+                    y: "center",
+                  }),
+                })
+
+                setTimeout(() => {
+                  if (viewRef.current) {
+                    viewRef.current.dispatch({
+                      effects: EditorView.scrollIntoView(line.from, {
+                        y: "center",
+                      }),
+                    })
+
+                    setTimeout(() => {
+                      if (viewRef.current) {
+                        viewRef.current.dispatch({
+                          effects: EditorView.scrollIntoView(line.from, {
+                            y: "center",
+                          }),
+                        })
+                      }
+                    }, 200)
+                  }
+                }, 150)
+              }
+            }
+
+            requestAnimationFrame(performScroll)
+          }
+        }
+      }
+
+      // Extra delay when TypeScript environment is not ready or for large line numbers
+      // This handles cases when triggered from CodeEditor.tsx with TypeScript definitions
+      const isLargeLine = targetLine > 100
+      const needsExtraDelay = !tsEnv || isLargeLine
+      const initialDelay = needsExtraDelay ? 500 : 200
+
+      setTimeout(scrollToLine, initialDelay)
+      setTargetLine(null)
+    }
+
     return () => {
       if (viewRef.current) {
         viewRef.current.destroy()
         viewRef.current = null
       }
     }
-  }, [selectedFile, files])
+  }, [selectedFile, files, targetLine, tsEnv])
 
   useEffect(() => {
     if (open && window.__DEBUG_CODE_EDITOR_FS_MAP) {
       setFiles(window.__DEBUG_CODE_EDITOR_FS_MAP)
 
       if (window.__DEBUG_CODE_EDITOR_FS_MAP.size > 0) {
-        const firstFile = Array.from(
-          window.__DEBUG_CODE_EDITOR_FS_MAP.keys(),
-        )[0]
-        setSelectedFile(firstFile)
+        let fileToSelect: string
+        if (initialFile && window.__DEBUG_CODE_EDITOR_FS_MAP.has(initialFile)) {
+          fileToSelect = initialFile
+          if (initialLine) {
+            setTargetLine(initialLine)
+          }
+        } else {
+          fileToSelect = Array.from(window.__DEBUG_CODE_EDITOR_FS_MAP.keys())[0]
+        }
 
-        let normalizedPath = firstFile
+        setSelectedFile(fileToSelect)
+
+        let normalizedPath = fileToSelect
         if (normalizedPath.startsWith("/")) {
           normalizedPath = normalizedPath.slice(1)
         }
@@ -225,7 +354,23 @@ export const ViewTsFilesDialog: React.FC<ViewTsFilesDialogProps> = ({
         setExpandedFolders(foldersToExpand)
       }
     }
-  }, [open])
+  }, [open, initialFile, initialLine])
+
+  useEffect(() => {
+    if (files.size > 0) {
+      const setupTsEnv = async () => {
+        try {
+          const libMap = await loadDefaultLibMap()
+          const system = createSystem(new Map([...libMap, ...files]))
+          const env = createVirtualTypeScriptEnvironment(system, [], tsModule)
+          setTsEnv(env)
+        } catch (error) {
+          console.error("Failed to setup TypeScript environment:", error)
+        }
+      }
+      setupTsEnv()
+    }
+  }, [files])
 
   useEffect(() => {
     const handleResize = () => {
@@ -367,7 +512,7 @@ export const ViewTsFilesDialog: React.FC<ViewTsFilesDialogProps> = ({
               </Badge>
             </div>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 mr-4">
             <Button
               variant="outline"
               size="sm"

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

@@ -78,6 +78,7 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
     localFiles,
     initialFiles,
     renameFile,
+    packageFilesMeta,
   } = useFileManagement({
     templateCode: templateFromUrl?.code,
     currentPackage: pkg,
@@ -197,6 +198,8 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
           setState((prev) => ({ ...prev, showPreview: !prev.showPreview }))
         }
         previewOpen={state.showPreview}
+        files={localFiles}
+        packageFilesMeta={packageFilesMeta}
       />
       <div
         className={`flex ${state.showPreview ? "flex-col md:flex-row" : ""}`}
@@ -231,7 +234,7 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
         </div>
         <div
           className={cn(
-            "flex p-0 flex-col min-h-[640px]",
+            "flex p-0 flex-col min-h-[640px] overflow-y-hidden",
             state.fullScreen
               ? "fixed inset-0 z-50 bg-white p-4 overflow-hidden"
               : "w-full md:w-1/2",

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