@tscircuit/fake-snippets 0.0.109 → 0.0.111

package/src/components/organization/OrganizationHeader.tsx

@@ -0,0 +1,154 @@
+import React, { useState } from "react"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Building2, Users, Package, Lock, Globe2, Settings } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { useLocation } from "wouter"
+import { useOrganization } from "@/hooks/use-organization"
+
+interface OrganizationHeaderProps {
+  organization: PublicOrgSchema
+  isCurrentUserOrganization?: boolean
+  className?: string
+  showActions?: boolean
+}
+
+export const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
+  organization,
+  className,
+  showActions = true,
+}) => {
+  const session = useGlobalStore((s) => s.session)
+  const [, navigate] = useLocation()
+  const canManageOrg =
+    organization.user_permissions?.can_manage_org ||
+    organization.owner_account_id === session?.account_id
+
+  const { membersCount, packagesCount, isLoading } = useOrganization({
+    orgId: organization.org_id,
+    orgName: organization.name!,
+  })
+
+  const handleSettingsClick = () => {
+    navigate(`/${organization.name}/settings`)
+  }
+  return (
+    <div className={cn("bg-white border-b border-gray-200", className)}>
+      <div className="container mx-auto px-6 py-6">
+        {/* Mobile Layout */}
+        <div className="block sm:hidden">
+          <div className="flex flex-col items-center text-center space-y-4">
+            <Avatar className="border-4 border-gray-100 shadow-sm size-16 md:size-20 lg:size-24">
+              <AvatarImage
+                src={`https://github.com/${organization.name}.png`}
+                alt={`${organization.name} avatar`}
+                className="object-cover"
+              />
+              <AvatarFallback className="bg-blue-100 text-blue-600 font-bold text-xl md:text-2xl lg:text-3xl">
+                {(organization.name || "")
+                  .split(" ")
+                  .map((word) => word[0])
+                  .join("")
+                  .toUpperCase()
+                  .slice(0, 2)}
+              </AvatarFallback>
+            </Avatar>
+
+            <div>
+              <div className="flex flex-col items-center gap-3 mb-3">
+                <h1 className="font-bold text-gray-900 text-xl">
+                  {organization.name}
+                </h1>
+                {canManageOrg && showActions && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleSettingsClick}
+                  >
+                    <Settings className="mr-2 h-4 w-4" />
+                    Settings
+                  </Button>
+                )}
+              </div>
+
+              <div className="grid grid-cols-2 md:flex flex-wrap justify-center gap-4 text-sm">
+                <div className="flex items-center gap-1.5 text-gray-600">
+                  <Users className="h-3.5 w-3.5" />
+                  <span className="font-medium">
+                    {isLoading ? "..." : membersCount}
+                  </span>
+                  <span>members</span>
+                </div>
+                <div className="flex items-center gap-1.5 text-gray-600">
+                  <Package className="h-3.5 w-3.5" />
+                  <span className="font-medium">
+                    {isLoading ? "..." : packagesCount}
+                  </span>
+                  <span>packages</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Desktop Layout */}
+        <div className="hidden sm:block">
+          <div className="flex items-center gap-6">
+            <Avatar className="border-4 border-gray-100 shadow-sm size-16 md:size-20 lg:size-24 flex-shrink-0">
+              <AvatarImage
+                src={`https://github.com/${organization.name}.png`}
+                alt={`${organization.name} avatar`}
+                className="object-cover"
+              />
+              <AvatarFallback className="bg-blue-100 text-blue-600 font-bold text-xl md:text-2xl lg:text-3xl">
+                {(organization.name || "")
+                  .split(" ")
+                  .map((word) => word[0])
+                  .join("")
+                  .toUpperCase()
+                  .slice(0, 2)}
+              </AvatarFallback>
+            </Avatar>
+
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center justify-between mb-3">
+                <h1 className="font-bold text-gray-900 text-2xl md:text-3xl truncate">
+                  {organization.name}
+                </h1>
+                {canManageOrg && showActions && (
+                  <Button variant="outline" onClick={handleSettingsClick}>
+                    <Settings className="mr-2 h-4 w-4" />
+                    Settings
+                  </Button>
+                )}
+              </div>
+
+              <div className="flex flex-wrap items-center gap-6 text-sm text-gray-600">
+                <div className="flex items-center gap-2">
+                  <Users className="h-4 w-4" />
+                  <span className="font-medium text-gray-900">
+                    {isLoading ? "..." : membersCount}
+                  </span>
+                  <span>members</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Package className="h-4 w-4" />
+                  <span className="font-medium text-gray-900">
+                    {isLoading ? "..." : packagesCount}
+                  </span>
+                  <span>packages</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Building2 className="h-4 w-4" />
+                  <span>Organization</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/organization/OrganizationMembers.tsx

@@ -0,0 +1,146 @@
+import React from "react"
+import { Link } from "wouter"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Users, Crown, Shield, User, Loader2 } from "lucide-react"
+import { timeAgo } from "@/lib/utils/timeAgo"
+import { cn } from "@/lib/utils"
+import { Account } from "fake-snippets-api/lib/db/schema"
+import { useListOrgMembers } from "@/hooks/use-list-org-members"
+
+interface OrganizationMembersProps {
+  orgId: string
+  className?: string
+}
+type MemberRole = "owner" | "admin" | "member" //todo
+const getRoleIcon = (role: MemberRole) => {
+  switch (role) {
+    case "owner":
+      return <Crown className="h-3 w-3" />
+    case "admin":
+      return <Shield className="h-3 w-3" />
+    case "member":
+      return <User className="h-3 w-3" />
+    default:
+      return <User className="h-3 w-3" />
+  }
+}
+
+const getRoleColor = (role: MemberRole) => {
+  switch (role) {
+    case "owner":
+      return "bg-yellow-100 text-yellow-800 border-yellow-200"
+    case "admin":
+      return "bg-purple-100 text-purple-800 border-purple-200"
+    case "member":
+      return "bg-gray-100 text-gray-800 border-gray-200"
+    default:
+      return "bg-gray-100 text-gray-800 border-gray-200"
+  }
+}
+
+export const OrganizationMembers: React.FC<OrganizationMembersProps> = ({
+  orgId,
+  className,
+}) => {
+  const { data: members = [], isLoading } = useListOrgMembers({ orgId })
+
+  if (isLoading) {
+    return (
+      <div
+        className={cn(
+          "bg-white rounded-lg border border-gray-200 p-4 sm:p-6",
+          className,
+        )}
+      >
+        <div className="mb-4">
+          <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+            Members
+          </h2>
+        </div>
+        <div className="text-center py-20 text-gray-500 grid place-items-center">
+          <Loader2 className="w-8 h-8 text-blue-600 dark:text-blue-400 animate-spin" />
+          <p className="mt-2 text-sm select-none">Loading members...</p>
+        </div>
+      </div>
+    )
+  }
+  return (
+    <div
+      className={cn(
+        "bg-white rounded-lg border border-gray-200 p-4 py-20 sm:p-6",
+        className,
+      )}
+    >
+      <div className="mb-4">
+        <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
+          Members ({members.length})
+        </h2>
+      </div>
+
+      <div className="space-y-2 sm:space-y-3">
+        {members.map((member) => (
+          <Link
+            key={member.account_id || member.github_username}
+            href={`/${member.github_username}`}
+            className="block"
+          >
+            <div className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
+              <div className="flex items-center gap-3 min-w-0 flex-1">
+                <Avatar className="h-10 w-10 sm:h-12 sm:w-12 flex-shrink-0">
+                  <AvatarImage
+                    src={`https://github.com/${member.github_username}.png`}
+                    alt={`${member.github_username} avatar`}
+                  />
+                  <AvatarFallback className="text-sm font-medium">
+                    {member.github_username
+                      .split(" ")
+                      .map((word) => word[0])
+                      .join("")
+                      .toUpperCase()
+                      .slice(0, 2)}
+                  </AvatarFallback>
+                </Avatar>
+
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2 mb-1">
+                    <h3 className="font-medium text-gray-900 truncate">
+                      {member.github_username}
+                    </h3>
+                    <Badge
+                      variant="outline"
+                      className={cn(
+                        "text-xs flex items-center gap-1 flex-shrink-0",
+                        getRoleColor("admin"),
+                      )}
+                    >
+                      {getRoleIcon("admin")}
+                      {"admin"}
+                    </Badge>
+                  </div>
+                  <p className="text-sm text-gray-500 truncate">
+                    @{member.github_username}
+                  </p>
+                </div>
+              </div>
+
+              <div className="text-right flex-shrink-0 hidden sm:block">
+                <p className="text-xs text-gray-500">
+                  Joined {timeAgo(new Date())}
+                </p>
+              </div>
+            </div>
+          </Link>
+        ))}
+      </div>
+
+      {members.length === 0 && (
+        <div className="text-center py-6 sm:py-8 text-gray-500">
+          <Users className="h-10 w-10 sm:h-12 sm:w-12 mx-auto mb-3 text-gray-300" />
+          <p className="text-sm sm:text-base">No members found</p>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -1,5 +1,4 @@
 import { CodeEditor } from "@/components/package-port/CodeEditor"
-import { usePackageVisibilitySettingsDialog } from "@/components/dialogs/package-visibility-settings-dialog"
 import { useConfirmDiscardChangesDialog } from "@/components/dialogs/confirm-discard-changes-dialog"
 import { useToast } from "@/hooks/use-toast"
 import { useUrlParams } from "@/hooks/use-url-params"
@@ -15,6 +14,7 @@ import { toastManualEditConflicts } from "@/lib/utils/toastManualEditConflicts"
 import { ManualEditEvent } from "@tscircuit/props"
 import { useFileManagement } from "@/hooks/useFileManagement"
 import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
+import { useNewPackageSavePromptDialog } from "../dialogs/new-package-save-prompt-dialog"
 
 interface Props {
   pkg?: Package
@@ -57,7 +57,7 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
     pkg?.snippet_type ?? templateFromUrl?.type ?? urlParams.snippet_type
 
   const { Dialog: NewPackageSaveDialog, openDialog: openNewPackageSaveDialog } =
-    usePackageVisibilitySettingsDialog()
+    useNewPackageSavePromptDialog()
 
   const { Dialog: DiscardChangesDialog, openDialog: openDiscardChangesDialog } =
     useConfirmDiscardChangesDialog()
@@ -106,8 +106,6 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
     [localFiles, initialFiles, isSaving, state.lastSavedAt],
   )
 
-  useWarnUserOnPageChange({ hasUnsavedChanges })
-
   const handleEditEvent = (event: ManualEditEvent) => {
     const parsedManualEdits = JSON.parse(
       localFiles.find((x) => x.path === "manual-edits.json")?.content || "{}",
@@ -153,12 +151,13 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
     })
   }
 
-  const finalfsMap = useMemo(
-    () => (Object.keys(fsMap).length > 0 ? fsMap : {}),
-    [fsMap],
-  )
+  useWarnUserOnPageChange({
+    hasUnsavedChanges: Boolean(hasUnsavedChanges),
+    isPackageThere: Boolean(pkg),
+  })
+
   return (
-    <div className="flex flex-col min-h-[50vh]">
+    <div className="flex flex-col h-full">
       <EditorNav
         circuitJson={state.circuitJson}
         pkg={pkg}
@@ -177,7 +176,9 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
         packageFilesMeta={packageFilesMeta}
       />
       <div
-        className={`flex ${state.showPreview ? "flex-col md:flex-row" : ""}`}
+        className={`flex flex-1 min-h-0 ${
+          state.showPreview ? "flex-col md:flex-row" : ""
+        }`}
       >
         <div
           className={cn(
@@ -215,7 +216,7 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
         </div>
         <div
           className={cn(
-            "flex p-0 flex-col min-h-[640px] overflow-y-hidden",
+            "flex p-0 flex-col overflow-y-hidden",
             state.fullScreen
               ? "fixed inset-0 z-50 bg-white p-4 overflow-hidden"
               : "w-full md:w-1/2",
@@ -223,8 +224,10 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
           )}
         >
           <SuspenseRunFrame
+            showFileMenu={false}
             showRunButton
             forceLatestEvalVersion
+            isLoadingFiles={isLoading}
             onRenderStarted={() =>
               setState((prev) => ({ ...prev, lastRunCode: currentFileCode }))
             }
@@ -236,7 +239,7 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
             onEditEvent={(event) => {
               handleEditEvent(event)
             }}
-            fsMap={finalfsMap}
+            fsMap={fsMap}
             projectUrl={projectUrl}
           />
         </div>

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

@@ -23,7 +23,7 @@ import {
   createSystem,
   createVirtualTypeScriptEnvironment,
 } from "@typescript/vfs"
-import { loadDefaultLibMap } from "@/lib/ts-lib-cache"
+import { loadDefaultLibMap, fetchWithPackageCaching } from "@/lib/ts-lib-cache"
 import { tsAutocomplete, tsFacet, tsSync } from "@valtown/codemirror-ts"
 import { getLints } from "@valtown/codemirror-ts"
 import { EditorView } from "codemirror"
@@ -121,7 +121,7 @@ export const CodeEditor = ({
     useViewTsFilesDialog()
 
   const entryPointFileName = useMemo(() => {
-    const entryPointFile = findTargetFile(files, null)
+    const entryPointFile = findTargetFile({ files, filePathFromUrl: null })
     if (entryPointFile?.path) return entryPointFile.path
     return files.find((x) => x.path === "index.tsx")?.path || "index.tsx"
   }, [files])
@@ -136,7 +136,7 @@ export const CodeEditor = ({
     // Only run this if there's an explicit file_path in URL - don't auto-select files
     if (!filePathFromUrl) return
 
-    const targetFile = findTargetFile(files, filePathFromUrl)
+    const targetFile = findTargetFile({ files, filePathFromUrl })
     if (targetFile) {
       const lineNumber = lineNumberFromUrl
         ? parseInt(lineNumberFromUrl, 10)
@@ -219,33 +219,7 @@ export const CodeEditor = ({
       projectName: "my-project",
       typescript: tsModule,
       logger: console,
-      fetcher: (async (input: RequestInfo | URL, init?: RequestInit) => {
-        const registryPrefixes = [
-          "https://data.jsdelivr.com/v1/package/resolve/npm/@tsci/",
-          "https://data.jsdelivr.com/v1/package/npm/@tsci/",
-          "https://cdn.jsdelivr.net/npm/@tsci/",
-        ]
-        if (
-          typeof input === "string" &&
-          registryPrefixes.some((prefix) => input.startsWith(prefix))
-        ) {
-          const fullPackageName = input
-            .replace(registryPrefixes[0], "")
-            .replace(registryPrefixes[1], "")
-            .replace(registryPrefixes[2], "")
-          const packageName = fullPackageName.split("/")[0].replace(/\./, "/")
-          const pathInPackage = fullPackageName.split("/").slice(1).join("/")
-          const jsdelivrPath = `${packageName}${
-            pathInPackage ? `/${pathInPackage}` : ""
-          }`
-          return fetch(
-            `${apiUrl}/snippets/download?jsdelivr_resolve=${input.includes(
-              "/resolve/",
-            )}&jsdelivr_path=${encodeURIComponent(jsdelivrPath)}`,
-          )
-        }
-        return fetch(input, init)
-      }) as typeof fetch,
+      fetcher: fetchWithPackageCaching as typeof fetch,
       delegate: {
         started: () => {
           const manualEditsTypeDeclaration = `

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

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react"
+import React, { useState, useCallback, useMemo } from "react"
 import { Button } from "@/components/ui/button"
 import { handleManualEditsImportWithSupportForMultipleFiles } from "@/lib/handleManualEditsImportWithSupportForMultipleFiles"
 import { useImportComponentDialog } from "@/components/dialogs/import-component-dialog"
@@ -25,11 +25,14 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
-import { convertRawEasyToTsx, fetchEasyEDAComponent } from "easyeda/browser"
-import { ComponentSearchResult } from "@tscircuit/runframe/runner"
-import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
+import {
+  JlcpcbComponentTsxLoadedPayload,
+  KicadStringSelectedPayload,
+  TscircuitPackageSelectedPayload,
+} from "@tscircuit/runframe/runner"
 import { ICreateFileProps, ICreateFileResult } from "@/hooks/useFileManagement"
 import { useGlobalStore } from "@/hooks/use-global-store"
+import { openJlcpcbImportIssue } from "@/hooks/use-jlcpcb-component-import"
 
 export type FileName = string
 
@@ -59,12 +62,18 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
 }) => {
   const { Dialog: ImportComponentDialog, openDialog: openImportDialog } =
     useImportComponentDialog()
-  const { toast, toastLibrary } = useToast()
+  const { toast } = useToast()
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
-  const API_BASE = useApiBaseUrl()
   const [aiAutocompleteEnabled, setAiAutocompleteEnabled] = aiAutocompleteState
   const session = useGlobalStore((s) => s.session)
 
+  const jlcpcbProxyRequestHeaders = useMemo(() => {
+    if (!session?.token) return undefined
+    return {
+      Authorization: `Bearer ${session.token}`,
+    }
+  }, [session?.token])
+
   const handleFormatFile = useCallback(() => {
     if (!window.prettier || !window.prettierPlugins) return
     if (!currentFile) return
@@ -154,54 +163,114 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
     }
   }, [currentFile, files, toast, updateFileContent])
 
-  const handleComponentImport = async (component: ComponentSearchResult) => {
-    if (component.source == "tscircuit.com") {
-      const newContent = `import {} from "@tsci/${component.owner}.${component.name}"\n${files[currentFile || ""]}`
-      updateFileContent(currentFile, newContent)
-    }
-    if (component.source == "jlcpcb") {
-      if (!session?.token) {
-        throw new Error("You need to be logged in to import jlcpcb component")
+  const handleTscircuitPackageSelected = useCallback(
+    async ({ fullPackageName }: TscircuitPackageSelectedPayload) => {
+      if (!currentFile) {
+        const message = "Select a file before importing a component."
+        toast({
+          title: "No file selected",
+          description: message,
+          variant: "destructive",
+        })
+        throw new Error(message)
       }
 
-      const jlcpcbComponent = await fetchEasyEDAComponent(
-        component.partNumber ?? component.name,
-        {
-          fetch: ((url, options: any) => {
-            return fetch(`${API_BASE}/proxy`, {
-              body: options.body,
-              method: options.method,
-              headers: {
-                authority: options.headers.authority,
-                Authorization: `Bearer ${session?.token}`,
-                "X-Target-Url": url.toString(),
-                "X-Sender-Host": options.headers.origin,
-                "X-Sender-Origin": options.headers.origin,
-                "content-type": options.headers["content-type"],
-              },
-            })
-          }) as typeof fetch,
-        },
-      )
-      const tsxComponent = await convertRawEasyToTsx(jlcpcbComponent)
-      let componentName = component.name.replace(/ /g, "-")
-      let componentPath = `imports/${componentName}.tsx`
-      if (files[componentPath] || files[`./${componentPath}`]) {
-        componentName = `${componentName}-1`
-        componentPath = `imports/${componentName}.tsx`
-      }
-      const createFileResult = createFile({
-        newFileName: componentPath,
-        content: tsxComponent,
-        onError: (error) => {
-          throw error
-        },
+      const existingContent = files[currentFile] ?? ""
+      const newContent = `import {} from "${fullPackageName}"\n${existingContent}`
+      updateFileContent(currentFile, newContent)
+      toast({
+        title: "Component imported",
+        description: `Added ${fullPackageName} to ${currentFile}.`,
       })
-      if (!createFileResult.newFileCreated) {
-        throw new Error("Failed to create component file")
+    },
+    [currentFile, files, toast, updateFileContent],
+  )
+
+  const handleJlcpcbComponentTsxLoaded = useCallback(
+    async ({ result, tsx }: JlcpcbComponentTsxLoadedPayload) => {
+      const partNumber = result.component.partNumber || "component"
+
+      try {
+        const sanitizedBaseName = partNumber
+          .toLowerCase()
+          .replace(/[^a-z0-9_-]/gi, "-")
+        let componentPath = `imports/${sanitizedBaseName}.tsx`
+        let suffix = 1
+        while (files[componentPath] || files[`./${componentPath}`]) {
+          componentPath = `imports/${sanitizedBaseName}-${suffix}.tsx`
+          suffix += 1
+        }
+
+        const createFileResult = createFile({
+          newFileName: componentPath,
+          content: tsx,
+          onError: (error) => {
+            throw error
+          },
+        })
+
+        if (!createFileResult.newFileCreated) {
+          throw new Error("Failed to create component file")
+        }
+
+        toast({
+          title: "Component imported",
+          description: `${partNumber} saved to ${componentPath}.`,
+        })
+      } catch (error) {
+        const message =
+          error instanceof Error
+            ? error.message
+            : "Failed to import component from JLCPCB"
+
+        toast({
+          title: "JLCPCB import failed",
+          description: (
+            <div className="space-y-2">
+              <p>{message}</p>
+              <button
+                className="text-sm text-blue-500 hover:underline"
+                onClick={(event) => {
+                  event.preventDefault()
+                  openJlcpcbImportIssue(partNumber, message)
+                }}
+              >
+                File issue on GitHub
+              </button>
+            </div>
+          ),
+          variant: "destructive",
+        })
+
+        throw new Error(message)
       }
-    }
-  }
+    },
+    [createFile, files, toast],
+  )
+
+  const handleKicadStringSelected = useCallback(
+    async ({ footprint, result }: KicadStringSelectedPayload) => {
+      try {
+        await navigator.clipboard.writeText(footprint)
+        toast({
+          title: "KiCad footprint copied",
+          description: `${result.footprint.qualifiedName} copied to clipboard.`,
+        })
+      } catch (error) {
+        const message =
+          error instanceof Error
+            ? error.message
+            : "Failed to copy KiCad footprint to clipboard"
+        toast({
+          title: "KiCad import failed",
+          description: message,
+          variant: "destructive",
+        })
+        throw new Error(message)
+      }
+    },
+    [toast],
+  )
 
   return (
     <>
@@ -345,17 +414,10 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
           </Button>
         </div>
         <ImportComponentDialog
-          onComponentSelected={async (component) => {
-            toastLibrary.promise(handleComponentImport(component), {
-              loading: "Importing component...",
-              success: <p>Component imported successfully!</p>,
-              error: (error) => (
-                <p>
-                  Error importing component: {error.message || String(error)}
-                </p>
-              ),
-            })
-          }}
+          onTscircuitPackageSelected={handleTscircuitPackageSelected}
+          onJlcpcbComponentTsxLoaded={handleJlcpcbComponentTsxLoaded}
+          onKicadStringSelected={handleKicadStringSelected}
+          jlcpcbProxyRequestHeaders={jlcpcbProxyRequestHeaders}
         />
       </div>
     </>