@tscircuit/fake-snippets 0.0.109 → 0.0.110

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>
     </>

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

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button"
-import { GitFork, Star } from "lucide-react"
+import { GitFork, Loader2, Star } from "lucide-react"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -42,7 +42,6 @@ import { useViewTsFilesDialog } from "@/components/dialogs/view-ts-files-dialog"
 import { DownloadButtonAndMenu } from "@/components/DownloadButtonAndMenu"
 import { TypeBadge } from "@/components/TypeBadge"
 import { useForkPackageMutation } from "@/hooks/useForkPackageMutation"
-import tscircuitCorePkg from "@tscircuit/core/package.json"
 import { useRenamePackageDialog } from "../dialogs/rename-package-dialog"
 import { useUpdatePackageDescriptionDialog } from "../dialogs/update-package-description-dialog"
 import { useCreateReleaseDialog } from "@/hooks/use-create-release-dialog"
@@ -295,52 +294,37 @@ export default function EditorNav({
               Not logged in, can't save
             </div>
           )}
-          <Button
-            variant="outline"
-            size="sm"
-            className={"ml-1 h-6 px-2 text-xs save-button"}
-            disabled={canSavePackage && pkg ? !hasUnsavedChanges : !isLoggedIn}
-            onClick={canSavePackage ? onSave : () => forkSnippet()}
-          >
-            {canSavePackage ? (
-              <>
-                <Save className="mr-1 h-3 w-3" />
-                Save
-              </>
-            ) : (
-              <>
-                <GitFork className="mr-1 h-3 w-3" />
-                Fork
-              </>
-            )}
-          </Button>
+          {(canSavePackage || (isLoggedIn && pkg)) && (
+            <Button
+              variant="outline"
+              size="sm"
+              className={"ml-1 h-6 px-2 text-xs save-button"}
+              disabled={
+                canSavePackage && pkg ? !hasUnsavedChanges : !isLoggedIn
+              }
+              onClick={canSavePackage ? onSave : () => forkSnippet()}
+            >
+              {canSavePackage ? (
+                <>
+                  <Save className="mr-1 h-3 w-3" />
+                  Save
+                </>
+              ) : (
+                <>
+                  <GitFork className="mr-1 h-3 w-3" />
+                  Fork
+                </>
+              )}
+            </Button>
+          )}
           {isSaving && (
-            <div className="animate-fadeIn bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-              <svg
-                className="animate-spin h-3 w-3 mr-2 text-blue-600"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <circle
-                  className="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  strokeWidth="4"
-                ></circle>
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                ></path>
-              </svg>
+            <div className="animate-fadeIn bg-blue-100 select-none text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
+              <Loader2 className="animate-spin h-3 w-3 mr-2 text-blue-600" />
               Saving...
             </div>
           )}
           {hasUnsavedChanges && !isSaving && isLoggedIn && (
-            <div className="animate-fadeIn bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">
+            <div className="animate-fadeIn bg-yellow-100 select-none text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">
               {pkg ? "unsaved changes" : "unsaved"}
             </div>
           )}
@@ -359,7 +343,6 @@ export default function EditorNav({
       </div>
       <div className="flex items-center justify-end -space-x-1">
         <div className="flex mx-2 items-center space-x-1">
-          {pkg && <TypeBadge type={`${packageType ?? pkg.snippet_type}`} />}
           {/* <Button
             variant="ghost"
             size="sm"
@@ -481,9 +464,6 @@ export default function EditorNav({
                     </DropdownMenuItem>
                   </>
                 )}
-              <DropdownMenuItem className="text-xs text-gray-500" disabled>
-                @tscircuit/core@{tscircuitCorePkg.version}
-              </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
 
@@ -505,7 +485,7 @@ export default function EditorNav({
             )}
           </Button>
         </div>
-        <div className="flex items-center ">
+        <div className="flex items-center">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <div className="md:hidden rounded-full p-1 hover:bg-gray-100 cursor-pointer">
@@ -514,7 +494,7 @@ export default function EditorNav({
                 </Button>
               </div>
             </DropdownMenuTrigger>
-            <DropdownMenuContent>
+            <DropdownMenuContent className="z-[101]">
               {hasUnsavedChanges && onDiscard && (
                 <DropdownMenuItem
                   className="text-xs text-red-600"
@@ -601,6 +581,9 @@ export default function EditorNav({
       <RenameDialog
         packageId={pkg?.package_id ?? ""}
         currentName={pkg?.unscoped_name ?? ""}
+        onRename={() => {
+          qc.invalidateQueries({ queryKey: ["package", pkg?.package_id] })
+        }}
       />
       <DeleteDialog
         packageId={pkg?.package_id ?? ""}