@tscircuit/fake-snippets 0.0.97 → 0.0.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.97",
+  "version": "0.0.98",
   "type": "module",
   "repository": {
     "type": "git",

package/src/App.tsx

@@ -122,6 +122,7 @@ class ErrorBoundary extends React.Component<
   cleanup = () => {
     if (this.visibilityHandler) {
       document.removeEventListener("visibilitychange", this.visibilityHandler)
+      window.removeEventListener("focus", this.visibilityHandler)
       this.visibilityHandler = undefined
     }
     if (this.reloadTimeout) {
@@ -144,12 +145,20 @@ class ErrorBoundary extends React.Component<
     this.cleanup() // Clean up any existing handlers
 
     this.visibilityHandler = () => {
-      if (!document.hidden && this.state.hasError && !this.state.reloading) {
+      if (
+        document.visibilityState === "visible" &&
+        this.state.hasError &&
+        !this.state.reloading
+      ) {
         this.performReload()
       }
     }
 
     document.addEventListener("visibilitychange", this.visibilityHandler)
+    window.addEventListener("focus", this.visibilityHandler)
+
+    // In case the tab is already visible when the error occurs
+    this.visibilityHandler()
   }
 
   render() {

package/src/components/ViewPackagePage/components/ShikiCodeViewer.tsx

@@ -1,11 +1,18 @@
 import { useShikiHighlighter } from "@/hooks/use-shiki-highlighter"
 import { useEffect, useMemo } from "react"
 import { useQuery } from "react-query"
+import { Skeleton } from "@/components/ui/skeleton"
+
+// Pre-randomized array to avoid flickering on re-renders
+const SKELETON_WIDTHS = ["w-2/3", "w-1/4", "w-5/6", "w-1/3", "w-1/2", "w-3/4"]
 
 export const ShikiCodeViewer = ({
   code,
   filePath,
-}: { code: string; filePath: string }) => {
+}: {
+  code: string
+  filePath: string
+}) => {
   const { highlighter } = useShikiHighlighter()
 
   const html = useMemo(
@@ -18,7 +25,13 @@ export const ShikiCodeViewer = ({
   )
 
   if (!html) {
-    return <div>Loading...</div>
+    return (
+      <div className="text-sm p-4">
+        {SKELETON_WIDTHS.map((w, i) => (
+          <Skeleton key={i} className={`h-4 mb-2 ${w}`} />
+        ))}
+      </div>
+    )
   }
 
   return (

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

@@ -1,5 +1,6 @@
 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()
@@ -24,7 +25,19 @@ export default function ThreeDView() {
 
   return (
     <div className="h-[620px]">
-      <CadViewer clickToInteractEnabled circuitJson={circuitJson} />
+      <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/package-port/CodeEditor.tsx

@@ -15,7 +15,10 @@ import { getImportsFromCode } from "@tscircuit/prompt-benchmarks/code-runner-uti
 import type { ATABootstrapConfig } from "@typescript/ata"
 import { setupTypeAcquisition } from "@typescript/ata"
 import { linter } from "@codemirror/lint"
-import { TSCI_PACKAGE_PATTERN } from "@/lib/constants"
+import {
+  TSCI_PACKAGE_PATTERN,
+  LOCAL_FILE_IMPORT_PATTERN,
+} from "@/lib/constants"
 import {
   createSystem,
   createVirtualTypeScriptEnvironment,
@@ -29,7 +32,6 @@ import tsModule from "typescript"
 import CodeEditorHeader, {
   FileName,
 } from "@/components/package-port/CodeEditorHeader"
-import { useCodeCompletionApi } from "@/hooks/use-code-completion-ai-api"
 import FileSidebar from "../FileSidebar"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
 import type { PackageFile } from "@/types/package"
@@ -44,6 +46,7 @@ import {
 } from "@/hooks/useFileManagement"
 import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
 import { inlineCopilot } from "codemirror-copilot"
+import { resolveRelativePath } from "@/lib/utils/resolveRelativePath"
 
 const defaultImports = `
 import React from "@types/react/jsx-runtime"
@@ -417,11 +420,13 @@ export const CodeEditor = ({
               const lineStart = line.from
               const lineEnd = line.to
               const lineText = view.state.sliceDoc(lineStart, lineEnd)
-              const matches = Array.from(
+
+              // Check for TSCI package imports
+              const packageMatches = Array.from(
                 lineText.matchAll(TSCI_PACKAGE_PATTERN),
               )
 
-              for (const match of matches) {
+              for (const match of packageMatches) {
                 if (match.index !== undefined) {
                   const start = lineStart + match.index
                   const end = start + match[0].length
@@ -484,10 +489,12 @@ export const CodeEditor = ({
                 const lineStart = line.from
                 const lineEnd = line.to
                 const lineText = view.state.sliceDoc(lineStart, lineEnd)
-                const matches = Array.from(
+
+                // Check for TSCI package imports first
+                const packageMatches = Array.from(
                   lineText.matchAll(TSCI_PACKAGE_PATTERN),
                 )
-                for (const match of matches) {
+                for (const match of packageMatches) {
                   if (match.index !== undefined) {
                     const start = lineStart + match.index
                     const end = start + match[0].length
@@ -502,6 +509,42 @@ 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)
+                        return true
+                      }
+                      return !!fileMap[targetPath]
+                    }
+                  }
+                }
                 return false
               },
               keydown: (event) => {
@@ -529,6 +572,12 @@ export const CodeEditor = ({
                 overflow: "auto",
                 zIndex: "9999",
               },
+              ".cm-import:hover": {
+                textDecoration: "underline",
+                textDecorationColor: "#aa1111",
+                textUnderlineOffset: "1px",
+                filter: "brightness(0.7)",
+              },
             }),
             EditorView.decorations.of((view) => {
               const decorations = []
@@ -536,14 +585,32 @@ export const CodeEditor = ({
                 for (let pos = from; pos < to; ) {
                   const line = view.state.doc.lineAt(pos)
                   const lineText = line.text
-                  const matches = lineText.matchAll(TSCI_PACKAGE_PATTERN)
-                  for (const match of matches) {
+
+                  // Add decorations for TSCI package imports
+                  const packageMatches = lineText.matchAll(TSCI_PACKAGE_PATTERN)
+                  for (const match of packageMatches) {
+                    if (match.index !== undefined) {
+                      const start = line.from + match.index
+                      const end = start + match[0].length
+                      decorations.push(
+                        Decoration.mark({
+                          class: "cm-import cursor-pointer",
+                        }).range(start, end),
+                      )
+                    }
+                  }
+
+                  // Add decorations for local file imports
+                  const localFileMatches = lineText.matchAll(
+                    LOCAL_FILE_IMPORT_PATTERN,
+                  )
+                  for (const match of localFileMatches) {
                     if (match.index !== undefined) {
                       const start = line.from + match.index
                       const end = start + match[0].length
                       decorations.push(
                         Decoration.mark({
-                          class: "cm-underline cursor-pointer",
+                          class: "cm-import cursor-pointer",
                         }).range(start, end),
                       )
                     }

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

@@ -29,6 +29,7 @@ import { convertRawEasyToTsx, fetchEasyEDAComponent } from "easyeda/browser"
 import { ComponentSearchResult } from "@tscircuit/runframe/runner"
 import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import { ICreateFileProps, ICreateFileResult } from "@/hooks/useFileManagement"
+import { useGlobalStore } from "@/hooks/use-global-store"
 
 export type FileName = string
 
@@ -61,6 +62,7 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
   const API_BASE = usePackagesBaseApiUrl()
   const [aiAutocompleteEnabled, setAiAutocompleteEnabled] = aiAutocompleteState
+  const session = useGlobalStore((s) => s.session)
 
   const handleFormatFile = useCallback(() => {
     if (!window.prettier || !window.prettierPlugins) return
@@ -157,18 +159,21 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
       updateFileContent(currentFile, newContent)
     }
     if (component.source == "jlcpcb") {
+      if (!session?.token) {
+        throw new Error("You need to be logged in to import jlcpcb component")
+      }
       const jlcpcbComponent = await fetchEasyEDAComponent("C1", {
         fetch: ((url, options: any) => {
           return fetch(`${API_BASE}/proxy`, {
-            ...options,
+            body: options.body,
+            method: options.method,
             headers: {
-              ...options?.headers,
+              authority: options.headers.authority,
+              Authorization: `Bearer ${session?.token}`,
               "X-Target-Url": url.toString(),
-              "X-Sender-Origin": options?.headers?.origin ?? "",
-              "X-Sender-Host": options?.headers?.host ?? "https://easyeda.com",
-              "X-Sender-Referer": options?.headers?.referer ?? "",
-              "X-Sender-User-Agent": options?.headers?.userAgent ?? "",
-              "X-Sender-Cookie": options?.headers?.cookie ?? "",
+              "X-Sender-Host": options.headers.origin,
+              "X-Sender-Origin": options.headers.origin,
+              "content-type": options.headers["content-type"],
             },
           })
         }) as typeof fetch,

package/src/hooks/use-create-package-release-mutation.ts

@@ -42,9 +42,9 @@ export const useCreatePackageReleaseMutation = ({
         resolvedPkgName = pkgName
       }
 
-      // Default version to 1.0.0 when it contains no digits
+      // Default version to 0.0.1 when it contains no digits
       if (!resolvedVersion || !/[0-9]/.test(resolvedVersion)) {
-        resolvedVersion = "1.0.0"
+        resolvedVersion = "0.0.1"
       }
 
       const normalizedPackageNameWithVersion =

package/src/lib/constants.ts

@@ -10,3 +10,14 @@
  */
 export const TSCI_PACKAGE_PATTERN =
   /@tsci\/[a-zA-Z][a-zA-Z0-9]*(?:--?[a-zA-Z0-9]+)*(?:\.[a-zA-Z][a-zA-Z0-9_]*(?:--?[a-zA-Z0-9_]+)*)*/g
+
+/**
+ * Regular expression pattern for matching local file imports
+ * Rules:
+ * - Must start with ./ or ../
+ * - Can contain letters, numbers, dots, dashes, underscores, and forward slashes
+ * - Can optionally end with file extensions like .ts, .tsx, .js, .jsx, .json
+ * - Captures the full relative path
+ */
+export const LOCAL_FILE_IMPORT_PATTERN =
+  /(?:\.\.?\/[a-zA-Z0-9._\-\/]*(?:\.(?:ts|tsx|js|jsx|json))?)/g

package/src/lib/utils/resolveRelativePath.ts

@@ -0,0 +1,40 @@
+/**
+ * Resolves a relative file path to an absolute path based on the current file
+ */
+export const resolveRelativePath = (
+  relativePath: string,
+  currentFilePath: string,
+): string => {
+  if (!currentFilePath) return relativePath
+
+  const currentDir = currentFilePath.includes("/")
+    ? currentFilePath.substring(0, currentFilePath.lastIndexOf("/"))
+    : ""
+
+  if (relativePath.startsWith("./")) {
+    return currentDir
+      ? `${currentDir}/${relativePath.slice(2)}`
+      : relativePath.slice(2)
+  }
+
+  if (relativePath.startsWith("../")) {
+    const parts = currentDir.split("/").filter((p) => p !== "")
+    const relativeParts = relativePath.split("/").filter((p) => p !== "")
+
+    let upCount = 0
+    for (const part of relativeParts) {
+      if (part === "..") {
+        upCount++
+      } else {
+        break
+      }
+    }
+
+    const resultParts = parts.slice(0, Math.max(0, parts.length - upCount))
+    const remainingParts = relativeParts.slice(upCount)
+
+    return [...resultParts, ...remainingParts].join("/")
+  }
+
+  return relativePath
+}