@tscircuit/fake-snippets 0.0.109 → 0.0.110

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

@@ -1,133 +0,0 @@
-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) => {
-  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/src/components/JLCPCBImportDialog.tsx

@@ -1,280 +0,0 @@
-import React, { useState } from "react"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-  DialogDescription,
-} from "@/components/ui/dialog"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { useAxios } from "@/hooks/use-axios"
-import { useToast } from "@/hooks/use-toast"
-import { useLocation } from "wouter"
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { PrefetchPageLink } from "./PrefetchPageLink"
-
-interface JLCPCBImportDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-}
-
-interface ImportState {
-  isLoading: boolean
-  error: string | null
-  existingComponent: {
-    partNumber: string
-    username: string
-  } | null
-}
-
-interface JLCPCBResponse {
-  ok: boolean
-  package: {
-    package_id: string
-  }
-}
-
-interface APIError {
-  status: number
-  data?: {
-    message?: string
-    existing_part_number?: string
-    part_number?: string
-    error?: {
-      message?: string
-    }
-  }
-}
-
-const extractErrorMessage = (error: APIError): string => {
-  return (
-    error?.data?.message ||
-    error?.data?.error?.message ||
-    "An unexpected error occurred"
-  )
-}
-
-const extractExistingPartNumber = (
-  error: APIError,
-  fallback: string,
-): string => {
-  return error?.data?.message || error?.data?.error?.message || fallback
-}
-
-const useJLCPCBImport = () => {
-  const [state, setState] = useState<ImportState>({
-    isLoading: false,
-    error: null,
-    existingComponent: null,
-  })
-
-  const axios = useAxios()
-  const { toast } = useToast()
-  const [, navigate] = useLocation()
-  const session = useGlobalStore((s) => s.session)
-
-  const resetState = () => {
-    setState({
-      isLoading: false,
-      error: null,
-      existingComponent: null,
-    })
-  }
-
-  const importComponent = async (partNumber: string) => {
-    if (!partNumber.startsWith("C") || partNumber.length < 2) {
-      toast({
-        title: "Invalid Part Number",
-        description:
-          "JLCPCB part numbers should start with 'C' and be at least 2 characters long.",
-        variant: "destructive",
-      })
-      return { success: false }
-    }
-
-    setState((prev) => ({
-      ...prev,
-      isLoading: true,
-      error: null,
-      existingComponent: null,
-    }))
-
-    try {
-      const response = await axios.post<JLCPCBResponse>(
-        "/packages/generate_from_jlcpcb",
-        {
-          jlcpcb_part_number: partNumber,
-        },
-      )
-
-      if (!response.data.ok) {
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          error: "Failed to generate package from JLCPCB part",
-        }))
-        return { success: false }
-      }
-
-      const { package: generatedPackage } = response.data
-
-      toast({
-        title: "Import Successful",
-        description: "JLCPCB component has been imported successfully.",
-      })
-
-      navigate(`/editor?package_id=${generatedPackage.package_id}`)
-      return { success: true }
-    } catch (error: any) {
-      const apiError = error as APIError
-
-      if (apiError.status === 404) {
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          error: `Component with JLCPCB part number ${partNumber} not found`,
-        }))
-      } else if (apiError.status === 409) {
-        const existingPartNumber = extractExistingPartNumber(
-          apiError,
-          partNumber,
-        )
-        setState((prev) => ({
-          ...prev,
-          isLoading: false,
-          existingComponent: {
-            partNumber: existingPartNumber,
-            username: session?.github_username || "",
-          },
-        }))
-      } else {
-        const errorMessage = extractErrorMessage(apiError)
-        setState((prev) => ({ ...prev, isLoading: false, error: errorMessage }))
-
-        toast({
-          title: "Import Failed",
-          description: errorMessage,
-          variant: "destructive",
-        })
-      }
-
-      return { success: false }
-    }
-  }
-
-  return {
-    ...state,
-    importComponent,
-    resetState,
-  }
-}
-
-export function JLCPCBImportDialog({
-  open,
-  onOpenChange,
-}: JLCPCBImportDialogProps) {
-  const [partNumber, setPartNumber] = useState("")
-  const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
-
-  const { isLoading, error, existingComponent, importComponent, resetState } =
-    useJLCPCBImport()
-
-  const handleImport = async () => {
-    const result = await importComponent(partNumber)
-    if (result.success) {
-      onOpenChange(false)
-    }
-  }
-
-  const handleInputChange = (value: string) => {
-    setPartNumber(value)
-    resetState()
-  }
-
-  const createGitHubIssue = () => {
-    const issueTitle = `[${partNumber}] Failed to import from JLCPCB`
-    const issueBody = `I tried to import the part number ${partNumber} from JLCPCB, but it failed. Here's the error I got:\n\`\`\`\n${error}\n\`\`\`\n\nCould be an issue in \`fetchEasyEDAComponent\` or \`convertRawEasyEdaToTs\``
-    const issueLabels = "snippets,good first issue"
-    const url = `https://github.com/tscircuit/easyeda-converter/issues/new?title=${encodeURIComponent(
-      issueTitle,
-    )}&body=${encodeURIComponent(issueBody)}&labels=${encodeURIComponent(issueLabels)}`
-    window.open(url, "_blank")
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Import from JLCPCB</DialogTitle>
-          <DialogDescription>
-            Enter the JLCPCB part number to import the component.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="py-4 text-center">
-          <a
-            href="https://yaqwsx.github.io/jlcparts/#/"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="text-blue-500 hover:underline opacity-80"
-          >
-            JLCPCB Part Search
-          </a>
-
-          <Input
-            className="mt-3"
-            placeholder="Enter JLCPCB part number (e.g., C46749)"
-            value={partNumber}
-            disabled={isLoading}
-            onChange={(e) => handleInputChange(e.target.value)}
-            onKeyDown={(e) => {
-              if (
-                e.key === "Enter" &&
-                !isLoading &&
-                isLoggedIn &&
-                partNumber.trim()
-              ) {
-                handleImport()
-              }
-            }}
-          />
-
-          {error && !existingComponent && (
-            <>
-              <p className="bg-red-100 p-2 mt-2 pre-wrap">{error}</p>
-              <div className="flex justify-end mt-2">
-                <Button variant="default" onClick={createGitHubIssue}>
-                  File Issue on GitHub (prefilled)
-                </Button>
-              </div>
-            </>
-          )}
-
-          {existingComponent && (
-            <p className="p-2 mt-2 pre-wrap text-md text-green-600">
-              This part number has already been imported to your profile.{" "}
-              <PrefetchPageLink
-                className="text-blue-500 hover:underline"
-                href={`/${existingComponent.username}/${existingComponent.partNumber}`}
-              >
-                View it here
-              </PrefetchPageLink>
-            </p>
-          )}
-        </div>
-
-        <DialogFooter>
-          <Button onClick={handleImport} disabled={isLoading || !isLoggedIn}>
-            {!isLoggedIn
-              ? "You must be logged in to import from JLCPCB"
-              : isLoading
-                ? "Importing..."
-                : "Import"}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}

package/src/components/PackageBuildsPage/LogContent.tsx

@@ -1,72 +0,0 @@
-type ErrorObject =
-  | {
-      message: string
-    }
-  | string
-
-const getErrorText = (error: ErrorObject | string) => {
-  if (typeof error === "string") {
-    return error
-  }
-  return error.message
-}
-
-export const LogContent = ({
-  logs,
-  error,
-}: {
-  logs: Array<{
-    type?: "info" | "success" | "error"
-    msg?: string
-    message?: string
-    timestamp?: string | number
-    [key: string]: unknown
-  }>
-  error?: ErrorObject | string | null
-}) => {
-  return (
-    <div className="font-mono text-xs space-y-1 min-w-0">
-      {logs.map((log, i) => {
-        const { type, msg, message, timestamp, ...rest } = log
-        const text = msg ?? message
-        if (!text) return null
-
-        return (
-          <div
-            key={i}
-            className={`break-words whitespace-pre-wrap ${
-              type === "error"
-                ? "text-red-600"
-                : type === "success"
-                  ? "text-green-600"
-                  : "text-gray-600"
-            }`}
-          >
-            {timestamp !== undefined && (
-              <span className="text-gray-500 whitespace-nowrap">
-                {new Date(Number(timestamp)).toLocaleTimeString()}
-              </span>
-            )}
-            {timestamp !== undefined && " "}
-            <span className="break-all">{text}</span>
-            {Object.keys(rest).filter((k) => k !== "package_release_id")
-              .length > 0 && (
-              <span className="text-gray-500">
-                {" "}
-                {Object.entries(rest)
-                  .filter(([key]) => key !== "package_release_id")
-                  .map(([key, value]) => `${key}: ${String(value)}`)
-                  .join(" ")}
-              </span>
-            )}
-          </div>
-        )
-      })}
-      {error && (
-        <div className="text-red-600 break-words whitespace-pre-wrap">
-          {getErrorText(error)}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/PackageBuildsPage/PackageBuildDetailsPage.tsx

@@ -1,113 +0,0 @@
-import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
-import { PackageRelease } from "fake-snippets-api/lib/db/schema"
-import { useState } from "react"
-import { LogContent } from "./LogContent"
-import { BuildPreviewContent } from "./build-preview-content"
-import { CollapsibleSection } from "./collapsible-section"
-import { PackageBuildDetailsPanel } from "./package-build-details-panel"
-import { PackageBuildHeader } from "./package-build-header"
-
-function computeDuration(
-  startedAt: string | null | undefined,
-  completedAt: string | null | undefined,
-) {
-  if (!startedAt || !completedAt) return ""
-  return `${Math.floor((new Date(completedAt).getTime() - new Date(startedAt).getTime()) / 1000)}s`
-}
-
-export const PackageBuildDetailsPage = () => {
-  const { packageRelease } = useCurrentPackageRelease({
-    include_logs: true,
-    refetchInterval: 2000,
-  })
-  const [openSections, setOpenSections] = useState<Record<string, boolean>>({})
-
-  const {
-    circuit_json_build_logs,
-    circuit_json_build_completed_at,
-    circuit_json_build_in_progress,
-    circuit_json_build_is_stale,
-    circuit_json_build_started_at,
-    circuit_json_build_error,
-    circuit_json_build_error_last_updated_at,
-    transpilation_completed_at,
-    transpilation_in_progress,
-    transpilation_is_stale,
-    transpilation_logs,
-    transpilation_started_at,
-    circuit_json_build_display_status,
-    transpilation_display_status,
-    transpilation_error,
-  } = packageRelease ?? ({} as Partial<PackageRelease>)
-
-  const toggleSection = (section: string) => {
-    setOpenSections((prev) => ({
-      ...prev,
-      [section]: !prev[section],
-    }))
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-50 text-gray-900">
-      <PackageBuildHeader />
-
-      <div className="px-4 sm:px-6 py-4 sm:py-6 container mx-auto max-w-7xl">
-        {/* Main Content */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6 mb-6 sm:mb-8 items-start">
-          {/* Preview Section */}
-          <div className="lg:col-span-2">
-            <div className="bg-white border border-gray-200 rounded-lg p-4 flex items-center justify-center min-h-[280px] sm:min-h-[340px] lg:max-h-[420px]">
-              <BuildPreviewContent />
-            </div>
-          </div>
-
-          {/* Details Panel */}
-          <PackageBuildDetailsPanel />
-        </div>
-
-        {/* Collapsible Sections */}
-        <div className="space-y-4 mb-6 sm:mb-8">
-          <CollapsibleSection
-            title="Transpilation Logs"
-            duration={computeDuration(
-              transpilation_started_at,
-              transpilation_completed_at,
-            )}
-            displayStatus={transpilation_display_status}
-            isOpen={openSections.summary}
-            onToggle={() => toggleSection("summary")}
-          >
-            <LogContent
-              logs={
-                transpilation_logs ?? [
-                  { msg: "No transpilation logs available" },
-                ]
-              }
-              error={transpilation_error}
-            />
-          </CollapsibleSection>
-
-          <CollapsibleSection
-            title="Circuit JSON Build Logs"
-            duration={computeDuration(
-              circuit_json_build_started_at,
-              circuit_json_build_completed_at,
-            )}
-            displayStatus={circuit_json_build_display_status}
-            isOpen={openSections.logs}
-            onToggle={() => toggleSection("logs")}
-          >
-            <LogContent
-              logs={
-                circuit_json_build_logs ?? [
-                  { msg: "No Circuit JSON logs available" },
-                ]
-              }
-              error={circuit_json_build_error!}
-            />
-          </CollapsibleSection>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/PackageBuildsPage/build-preview-content.tsx

@@ -1,56 +0,0 @@
-import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
-import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
-import { useState } from "react"
-import { CircuitBoard } from "lucide-react"
-
-export function BuildPreviewContent() {
-  const { packageRelease } = useCurrentPackageRelease({ refetchInterval: 2000 })
-  const { packageInfo } = useCurrentPackageInfo()
-  const [imageError, setImageError] = useState(false)
-  const [imageLoading, setImageLoading] = useState(true)
-
-  if (!packageRelease) {
-    return (
-      <div className="flex items-center justify-center w-full h-full">
-        <div className="w-32 h-32 sm:w-48 sm:h-48 bg-gray-200 rounded animate-pulse-slow"></div>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex items-center justify-center w-full h-full">
-      <div className="rounded overflow-hidden w-full max-w-full">
-        {imageError ? (
-          <div className="flex flex-col items-center justify-center bg-gray-50 border border-gray-300 rounded-lg p-8 sm:p-12 lg:p-16 min-h-[240px] sm:min-h-[300px] lg:min-h-[360px]">
-            <CircuitBoard className="w-12 h-12 sm:w-16 sm:h-16 lg:w-20 lg:h-20 text-gray-400 mb-4" />
-            <h3 className="text-lg sm:text-xl font-medium text-gray-600 mb-2">
-              Preview Not Available
-            </h3>
-            <p className="text-sm sm:text-base text-gray-500 text-center max-w-sm">
-              The build preview image could not be loaded. This may be because
-              the build is still processing or the image is not available.
-            </p>
-          </div>
-        ) : (
-          <>
-            {imageLoading && (
-              <div className="flex items-center justify-center bg-gray-100 rounded-lg min-h-[240px] sm:min-h-[300px] lg:min-h-[360px]">
-                <div className="w-16 h-16 sm:w-20 sm:h-20 bg-gray-200 rounded animate-pulse"></div>
-              </div>
-            )}
-            <img
-              src={`https://api.tscircuit.com/packages/images/${packageInfo?.name}/pcb.png`}
-              alt="Package build preview"
-              className={`object-contain rounded w-full h-auto max-h-[240px] sm:max-h-[300px] lg:max-h-[360px] ${imageLoading ? "hidden" : "block"}`}
-              onLoad={() => setImageLoading(false)}
-              onError={() => {
-                setImageError(true)
-                setImageLoading(false)
-              }}
-            />
-          </>
-        )}
-      </div>
-    </div>
-  )
-}