@tscircuit/fake-snippets 0.0.89 → 0.0.91

package/fake-snippets-api/routes/api/autocomplete/create_autocomplete.ts

@@ -0,0 +1,135 @@
+import "dotenv/config"
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+import OpenAI from "openai"
+
+// Lazy-loaded client instance
+let openai: OpenAI | null = null
+let cachedReadme: string | null = null
+
+function getOpenAIClient() {
+  const apiKey = process.env.VITE_OPENROUTER_API_KEY
+  if (!apiKey) {
+    throw new Error("Missing Api Key in env")
+  }
+
+  if (!openai) {
+    openai = new OpenAI({
+      apiKey,
+      baseURL: "https://openrouter.ai/api/v1",
+      defaultHeaders: {
+        "HTTP-Referer": "https://tscircuit.com",
+        "X-Title": "TSCircuit Editor",
+      },
+    })
+  }
+
+  return openai
+}
+
+// Cache README
+async function getCachedReadme(): Promise<string> {
+  if (cachedReadme !== null) return cachedReadme
+  const res = await fetch(
+    "https://raw.githubusercontent.com/tscircuit/props/main/README.md",
+  )
+  if (!res.ok) {
+    throw new Error(`Failed to fetch README: ${res.status}`)
+  }
+  cachedReadme = await res.text()
+  return cachedReadme
+}
+
+async function completion(
+  openai: OpenAI,
+  readmeContent: string,
+  prefix: string,
+  suffix: string,
+  model = "openai/gpt-4.1-mini",
+  language?: string,
+) {
+  const systemMessage = `You are an expert ${language ? language + " " : ""}programmer working in a TSX (TypeScript + React JSX) environment.
+
+Below is the README.md for the available components. You MUST use this to determine which components and props are valid. 
+Only use components explicitly documented under Available Components in the README. Never invent or guess new components. If the user partially types a component that does not exist in the README, do NOT try to complete it.
+
+===== README.md START =====
+${readmeContent}
+===== README.md END =====
+
+Special instruction for the <chip> component:
+- Do NOT add chip as a prop (e.g., <chip chip="..."> is invalid).
+- Always use this format: 
+  <chip name="U<number>" footprint="<valid footprint>" pinLabels={{}} pcbX={0} pcbY={0} schX={0} schY={0} />
+- Determine the next sequential name automatically: e.g. U1, U2, U3.
+- Only use valid footprints and pinLabels from the README.
+- Some components like <netlabel> do not have a 'name' prop — do not add it for those.
+
+STRICT rules:
+- If partial like "<capa", only append remaining "citor". Never repeat letters. 
+- If input is "<capacitor", add only props, never repeat tag. 
+- Always produce exactly one JSX component, starting with "<" if needed. 
+- If partial doesn’t match any valid component, output nothing. 
+- Never output two JSX elements. Always end with exactly one "/>". 
+- Never add duplicate closing "/>". 
+- Never output the component name as a prop. 
+- Never add whitespace before your completion.
+- If the input is exactly "<", then start with the component name directly (like "resistor ... />") without adding another "<".
+- So that the final result is "<resistor ... />", not "<<resistor ... />".
+- Never produce a double "<".
+
+Examples:
+- Input: "<FILL_ME>"
+  Output: <resistor name="R1" footprint="0603" pcbX={5} pcbY={7} schX={1} schY={2} resistance={1000} />
+- Input: "<ca<FILL_ME>"
+  Output: pacitor name="C1" footprint="0805" pcbX={10} pcbY={15} schX={3} schY={4} />
+- Input: "<chip<FILL_ME>"
+  Output: name="U1" footprint="SOIC-8" pinLabels={{}} pcbX={0} pcbY={0} schX={0} schY={0} />
+- Input: "<netl<FILL_ME>"
+  Output: abel name="N1" />
+- NEVER output: <capacitor capacitor ... /> or <netnet ... />
+- Input: "<"
+  Output: resistor name="R1" footprint="0603" pcbX={5} pcbY={7} schX={1} schY={2} resistance={1000} />
+- Input: "<ca"
+  Output: pacitor name="C1" footprint="0805" pcbX={10} pcbY={15} schX={3} schY={4} />
+- Input: "<capacitor"
+  Output:  capacitance="1000pF" footprint="0805" name="C1" pcbX={10} pcbY={15} schX={3} schY={4} />`
+
+  const chatCompletion = await openai.chat.completions.create({
+    messages: [
+      { role: "system", content: systemMessage },
+      { role: "user", content: `${prefix}<FILL_ME>${suffix}` },
+    ],
+    model,
+  })
+
+  return chatCompletion.choices[0].message?.content ?? ""
+}
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "session", // ✅ Require user to be signed in
+  jsonBody: z.object({
+    prefix: z.string(),
+    suffix: z.string(),
+    model: z.string().optional(),
+    language: z.string().optional(),
+  }),
+  jsonResponse: z.object({
+    prediction: z.string(),
+  }),
+})(async (req, ctx) => {
+  return ctx.json({ prediction: "mock" })
+  const openai = getOpenAIClient()
+  const { prefix, suffix, model, language } = req.jsonBody
+
+  const readmeContent = await getCachedReadme()
+  const predictionResult = await completion(
+    openai,
+    readmeContent,
+    prefix,
+    suffix,
+    model,
+    language,
+  )
+  return ctx.json({ prediction: predictionResult })
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.89",
+  "version": "0.0.91",
   "type": "module",
   "repository": {
     "type": "git",
@@ -77,17 +77,13 @@
     "@tailwindcss/typography": "^0.5.16",
     "@tscircuit/3d-viewer": "^0.0.279",
     "@tscircuit/assembly-viewer": "^0.0.1",
-    "@tscircuit/core": "^0.0.536",
     "@tscircuit/create-snippet-url": "^0.0.8",
     "@tscircuit/eval": "^0.0.244",
-    "@tscircuit/footprinter": "^0.0.186",
     "@tscircuit/layout": "^0.0.29",
-    "@tscircuit/math-utils": "^0.0.10",
     "@tscircuit/mm": "^0.0.8",
     "@tscircuit/pcb-viewer": "^1.11.194",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/props": "^0.0.246",
-    "@tscircuit/runframe": "^0.0.653",
+    "@tscircuit/runframe": "^0.0.669",
     "@tscircuit/schematic-viewer": "^2.0.21",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
@@ -103,13 +99,11 @@
     "@types/sharp": "^0.32.0",
     "@typescript/ata": "^0.9.7",
     "@typescript/vfs": "^1.6.0",
-    "@valtown/codemirror-codeium": "^1.1.1",
     "@valtown/codemirror-ts": "^2.2.0",
     "@vercel/analytics": "^1.4.1",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
     "change-case": "^5.4.4",
-    "circuit-json": "^0.0.190",
     "circuit-json-to-bom-csv": "^0.0.7",
     "circuit-json-to-gerber": "^0.0.25",
     "circuit-json-to-pnp-csv": "^0.0.7",
@@ -120,10 +114,12 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
     "codemirror": "^6.0.1",
+    "codemirror-copilot": "^0.0.7",
     "country-list": "^2.3.0",
     "date-fns": "^4.1.0",
+    "dotenv": "^16.5.0",
     "dsn-converter": "^0.0.60",
-    "easyeda": "^0.0.195",
+    "easyeda": "^0.0.203",
     "embla-carousel-react": "^8.3.0",
     "extract-codefence": "^0.0.4",
     "fflate": "^0.8.2",
@@ -138,13 +134,14 @@
     "jose": "^5.9.3",
     "jscad-electronics": "^0.0.25",
     "jszip": "^3.10.1",
-    "kicad-converter": "^0.0.16",
+    "kicad-converter": "^0.0.17",
     "ky": "^1.7.5",
     "lucide-react": "^0.488.0",
     "lz-string": "^1.5.0",
     "md5": "^2.3.0",
     "ms": "^2.1.3",
     "next-themes": "^0.3.0",
+    "openai": "^5.6.0",
     "postcss": "^8.4.47",
     "posthog-js": "^1.203.2",
     "prismjs": "^1.29.0",
@@ -177,6 +174,7 @@
     "terser": "^5.27.0",
     "three": "^0.177.0",
     "three-stdlib": "^2.36.0",
+    "tscircuit": "^0.0.522",
     "tsup": "^8.5.0",
     "typescript": "^5.6.3",
     "use-async-memo": "^1.2.5",

package/src/App.tsx

@@ -80,6 +80,9 @@ class ErrorBoundary extends React.Component<
   { children: React.ReactNode },
   { hasError: boolean; reloading: boolean }
 > {
+  private visibilityHandler?: () => void
+  private reloadTimeout?: number
+
   constructor(props: { children: React.ReactNode }) {
     super(props)
     this.state = { hasError: false, reloading: false }
@@ -99,12 +102,54 @@ class ErrorBoundary extends React.Component<
     ) {
       const loadedAt = window.__APP_LOADED_AT || Date.now()
       if (Date.now() - loadedAt >= 10_000) {
-        this.setState({ reloading: true })
-        window.location.reload()
+        this.performReload()
       }
     }
   }
 
+  componentDidUpdate(_prevProps: any, prevState: any) {
+    if (!prevState.hasError && this.state.hasError && !this.state.reloading) {
+      this.setupIdleReload()
+    }
+  }
+
+  componentWillUnmount() {
+    this.cleanup()
+  }
+
+  cleanup = () => {
+    if (this.visibilityHandler) {
+      document.removeEventListener("visibilitychange", this.visibilityHandler)
+      this.visibilityHandler = undefined
+    }
+    if (this.reloadTimeout) {
+      clearTimeout(this.reloadTimeout)
+      this.reloadTimeout = undefined
+    }
+  }
+
+  performReload = () => {
+    if (this.state.reloading) return // Prevent multiple reloads
+
+    this.cleanup() // Clean up listeners before reload
+    this.setState({ reloading: true })
+    this.reloadTimeout = window.setTimeout(() => {
+      window.location.reload()
+    }, 500)
+  }
+
+  setupIdleReload = () => {
+    this.cleanup() // Clean up any existing handlers
+
+    this.visibilityHandler = () => {
+      if (!document.hidden && this.state.hasError && !this.state.reloading) {
+        this.performReload()
+      }
+    }
+
+    document.addEventListener("visibilitychange", this.visibilityHandler)
+  }
+
   render() {
     if (this.state.reloading) {
       return <div>There was a problem loading this page. Reloading…</div>

package/src/ContextProviders.tsx

@@ -4,7 +4,6 @@ import { useEffect } from "react"
 import { useGlobalStore } from "./hooks/use-global-store"
 import { posthog } from "./lib/posthog"
 import { Toaster } from "react-hot-toast"
-import { Toaster as SonnerToaster } from "@/components/ui/sonner"
 import { populateQueryCacheWithSSRData } from "./lib/populate-query-cache-with-ssr-data"
 
 const staffGithubUsernames = [
@@ -66,7 +65,6 @@ export const ContextProviders = ({ children }: any) => {
         <PostHogIdentifier />
         {children}
         <Toaster position="bottom-right" />
-        <SonnerToaster position="bottom-left" />
       </HelmetProvider>
     </QueryClientProvider>
   )

package/src/components/CircuitJsonImportDialog.tsx

@@ -15,7 +15,7 @@ import { useLocation } from "wouter"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { convertCircuitJsonToTscircuit } from "circuit-json-to-tscircuit"
 import { useCreatePackageMutation } from "@/hooks/use-create-package-mutation"
-import { generateRandomPackageName } from "./package-port/CodeAndPreview"
+import { generateRandomPackageName } from "@/lib/utils/package-utils"
 import { useCreatePackageReleaseMutation } from "@/hooks/use-create-package-release-mutation"
 import { useCreatePackageFilesMutation } from "@/hooks/use-create-package-files-mutation"
 

package/src/components/PackageBuildsPage/package-build-header.tsx

@@ -1,13 +1,13 @@
 import { Button } from "@/components/ui/button"
 import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
 import { useRebuildPackageReleaseMutation } from "@/hooks/use-rebuild-package-release-mutation"
-import { Github, RefreshCw, RotateCcw } from "lucide-react"
+import { Github, RefreshCw } from "lucide-react"
 import { useParams } from "wouter"
 import { DownloadButtonAndMenu } from "../DownloadButtonAndMenu"
 
 export function PackageBuildHeader() {
   const { author, packageName } = useParams()
-  const { packageRelease, refetch, isFetching } = useCurrentPackageRelease({
+  const { packageRelease } = useCurrentPackageRelease({
     include_logs: true,
   })
   const { mutate: rebuildPackage, isLoading } =
@@ -59,16 +59,6 @@ export function PackageBuildHeader() {
             <RefreshCw className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
             {isLoading ? "Rebuilding..." : "Rebuild"}
           </Button>
-          <Button
-            variant="outline"
-            size="icon"
-            aria-label="Reload logs"
-            className="border-gray-300 bg-white hover:bg-gray-50"
-            onClick={() => refetch()}
-            disabled={isFetching}
-          >
-            <RotateCcw className="w-3 h-3 sm:w-4 sm:h-4" />
-          </Button>
           <DownloadButtonAndMenu unscopedName={packageName} author={author} />
         </div>
       </div>

package/src/components/PageSearchComponent.tsx

@@ -3,7 +3,7 @@ import { useAxios } from "@/hooks/use-axios"
 import { useLocation } from "wouter"
 import React, { useState } from "react"
 import { useQuery } from "react-query"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import { Search } from "lucide-react"
 import { Button } from "./ui/button"
 import { PackageCardSkeleton } from "./PackageCardSkeleton"
@@ -20,7 +20,7 @@ const PageSearchComponent: React.FC<PageSearchComponentProps> = ({
 }) => {
   const [location, setLocation] = useLocation()
   const axios = useAxios()
-  const snippetsBaseApiUrl = useSnippetsBaseApiUrl()
+  const snippetsBaseApiUrl = usePackagesBaseApiUrl()
 
   // Initialize search query directly from URL
   const [searchQuery, setSearchQuery] = useState(

package/src/components/SearchComponent.tsx

@@ -4,7 +4,7 @@ import { useLocation } from "wouter"
 import React, { useEffect, useRef, useState } from "react"
 import { useQuery } from "react-query"
 import { Alert } from "./ui/alert"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import { PrefetchPageLink } from "./PrefetchPageLink"
 import { CircuitBoard } from "lucide-react"
 import { cn } from "@/lib/utils"
@@ -60,7 +60,7 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
   const resultsRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
   const [location, setLocation] = useLocation()
-  const snippetsBaseApiUrl = useSnippetsBaseApiUrl()
+  const snippetsBaseApiUrl = usePackagesBaseApiUrl()
 
   const { data: searchResults, isLoading } = useQuery(
     ["packageSearch", searchQuery],

package/src/components/TrendingPackagesCarousel.tsx

@@ -4,7 +4,7 @@ import { StarFilledIcon } from "@radix-ui/react-icons"
 import { Link } from "wouter"
 import { Package } from "fake-snippets-api/lib/db/schema"
 import { useRef, useState } from "react"
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 
 const CarouselItem = ({
   pkg,
@@ -36,7 +36,7 @@ export const TrendingPackagesCarousel = () => {
   const axios = useAxios()
   const scrollRef = useRef<HTMLDivElement>(null)
   const [isHovered, setIsHovered] = useState(false)
-  const apiBaseUrl = useSnippetsBaseApiUrl()
+  const apiBaseUrl = usePackagesBaseApiUrl()
 
   const { data: trendingPackages } = useQuery<Package[]>(
     "trendingPackages",

package/src/components/dialogs/import-component-dialog.tsx

@@ -0,0 +1,25 @@
+import { createUseDialog } from "./create-use-dialog"
+import {
+  ComponentSearchResult,
+  ImportComponentDialog as RunframeImportComponentDialog,
+} from "@tscircuit/runframe/runner"
+
+export const ImportComponentDialog = ({
+  open,
+  onOpenChange,
+  onComponentSelected,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => any
+  onComponentSelected: (pkg: ComponentSearchResult) => any
+}) => {
+  return (
+    <RunframeImportComponentDialog
+      isOpen={open}
+      onClose={() => onOpenChange(false)}
+      onImport={(data) => onComponentSelected(data)}
+    />
+  )
+}
+
+export const useImportComponentDialog = createUseDialog(ImportComponentDialog)

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

@@ -15,6 +15,7 @@ import { applyEditEventsToManualEditsFile } from "@tscircuit/core"
 import { toastManualEditConflicts } from "@/lib/utils/toastManualEditConflicts"
 import { ManualEditEvent } from "@tscircuit/props"
 import { useFileManagement } from "@/hooks/useFileManagement"
+import { DEFAULT_CODE } from "@/lib/utils/package-utils"
 
 interface Props {
   pkg?: Package
@@ -25,11 +26,6 @@ interface Props {
   projectUrl?: string
 }
 
-export interface PackageFile {
-  path: string
-  content: string
-}
-
 export interface CodeAndPreviewState {
   showPreview: boolean
   fullScreen: boolean
@@ -40,17 +36,6 @@ export interface CodeAndPreviewState {
   defaultComponentFile?: string
 }
 
-export const DEFAULT_CODE = `
-export default () => (
-  <board width="10mm" height="10mm">
-    {/* write your code here! */}
-  </board>
-)
-`.trim()
-
-export const generateRandomPackageName = () =>
-  `untitled-package-${Math.floor(Math.random() * 900) + 100}`
-
 export function CodeAndPreview({ pkg, projectUrl }: Props) {
   const { toast } = useToast()
   const urlParams = useUrlParams()

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

@@ -1,4 +1,4 @@
-import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
 import { useHotkeyCombo } from "@/hooks/use-hotkey"
 import { basicSetup } from "@/lib/codemirror/basic-setup"
 import {
@@ -32,7 +32,7 @@ import CodeEditorHeader, {
 import { useCodeCompletionApi } from "@/hooks/use-code-completion-ai-api"
 import FileSidebar from "../FileSidebar"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
-import type { PackageFile } from "./CodeAndPreview"
+import type { PackageFile } from "@/types/package"
 import { useShikiHighlighter } from "@/hooks/use-shiki-highlighter"
 import QuickOpen from "./QuickOpen"
 import GlobalFindReplace from "./GlobalFindReplace"
@@ -43,6 +43,7 @@ import {
   IDeleteFileResult,
 } from "@/hooks/useFileManagement"
 import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
+import { inlineCopilot } from "codemirror-copilot"
 
 const defaultImports = `
 import React from "@types/react/jsx-runtime"
@@ -81,7 +82,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 = useSnippetsBaseApiUrl()
+  const apiUrl = usePackagesBaseApiUrl()
   const codeCompletionApi = useCodeCompletionApi()
   const [cursorPosition, setCursorPosition] = useState<number | null>(null)
   const [code, setCode] = useState(files[0]?.content || "")
@@ -94,6 +95,7 @@ export const CodeEditor = ({
   // Get URL search params for file_path
   const urlParams = new URLSearchParams(window.location.search)
   const filePathFromUrl = urlParams.get("file_path")
+  const [aiAutocompleteEnabled, setAiAutocompleteEnabled] = useState(false)
 
   const entryPointFileName = useMemo(() => {
     const entryPointFile = findTargetFile(files, null)
@@ -324,12 +326,27 @@ export const CodeEditor = ({
         },
       }),
     ]
-    if (codeCompletionApi?.apiKey) {
+    if (aiAutocompleteEnabled) {
       baseExtensions.push(
-        // copilotPlugin({
-        //   apiKey: codeCompletionApi.apiKey,
-        //   language: Language.TYPESCRIPT,
-        // }),
+        inlineCopilot(async (prefix, suffix) => {
+          const res = await fetch(
+            `${apiUrl}/autocomplete/create_autocomplete`,
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                prefix,
+                suffix,
+                language: "typescript",
+              }),
+            },
+          )
+
+          const { prediction } = await res.json()
+          return prediction
+        }),
         EditorView.theme({
           ".cm-ghostText, .cm-ghostText *": {
             opacity: "0.6",
@@ -537,6 +554,7 @@ export const CodeEditor = ({
     Boolean(highlighter),
     isSaving,
     fontSize,
+    aiAutocompleteEnabled,
   ])
 
   const updateCurrentEditorContent = (newContent: string) => {
@@ -646,6 +664,10 @@ export const CodeEditor = ({
         {showImportAndFormatButtons && (
           <CodeEditorHeader
             entrypointFileName={entryPointFileName}
+            appendNewFile={(path: string, content: string) => {
+              onFileContentChanged?.(path, content)
+            }}
+            createFile={handleCreateFile}
             fileSidebarState={
               [sidebarOpen, setSidebarOpen] as ReturnType<
                 typeof useState<boolean>
@@ -655,6 +677,10 @@ export const CodeEditor = ({
             files={Object.fromEntries(files.map((f) => [f.path, f.content]))}
             updateFileContent={updateFileContent}
             handleFileChange={handleFileChange}
+            aiAutocompleteState={[
+              aiAutocompleteEnabled,
+              setAiAutocompleteEnabled,
+            ]}
           />
         )}
         <div