@tscircuit/fake-snippets 0.0.67 → 0.0.69

package/dist/index.d.ts

@@ -508,6 +508,7 @@ declare const packageSchema: z.ZodObject<{
     ai_description: z.ZodNullable<z.ZodString>;
     latest_license: z.ZodOptional<z.ZodNullable<z.ZodString>>;
     ai_usage_instructions: z.ZodNullable<z.ZodString>;
+    default_view: z.ZodOptional<z.ZodDefault<z.ZodEnum<["files", "3d", "pcb", "schematic"]>>>;
 }, "strip", z.ZodTypeAny, {
     name: string;
     unscoped_name: string;
@@ -536,6 +537,7 @@ declare const packageSchema: z.ZodObject<{
     ai_usage_instructions: string | null;
     snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
     latest_license?: string | null | undefined;
+    default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
 }, {
     name: string;
     unscoped_name: string;
@@ -564,6 +566,7 @@ declare const packageSchema: z.ZodObject<{
     is_source_from_github?: boolean | undefined;
     website?: string | null | undefined;
     latest_license?: string | null | undefined;
+    default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
 }>;
 type Package = z.infer<typeof packageSchema>;
 declare const jlcpcbOrderStateSchema: z.ZodObject<{
@@ -778,6 +781,7 @@ declare const createDatabase: ({ seed }?: {
         ai_usage_instructions: string | null;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
         latest_license?: string | null | undefined;
+        default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
     }[];
     orders: {
         error: z.objectOutputType<{
@@ -1068,6 +1072,7 @@ declare const createDatabase: ({ seed }?: {
         ai_usage_instructions: string | null;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
         latest_license?: string | null | undefined;
+        default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
     }[];
     orders: {
         error: z.objectOutputType<{

package/dist/index.js

@@ -187,7 +187,8 @@ var packageSchema = z.object({
   star_count: z.number().default(0),
   ai_description: z.string().nullable(),
   latest_license: z.string().nullable().optional(),
-  ai_usage_instructions: z.string().nullable()
+  ai_usage_instructions: z.string().nullable(),
+  default_view: z.enum(["files", "3d", "pcb", "schematic"]).default("files").optional()
 });
 var jlcpcbOrderStateSchema = z.object({
   jlcpcb_order_state_id: z.string(),

package/dist/schema.d.ts

@@ -633,6 +633,7 @@ declare const packageSchema: z.ZodObject<{
     ai_description: z.ZodNullable<z.ZodString>;
     latest_license: z.ZodOptional<z.ZodNullable<z.ZodString>>;
     ai_usage_instructions: z.ZodNullable<z.ZodString>;
+    default_view: z.ZodOptional<z.ZodDefault<z.ZodEnum<["files", "3d", "pcb", "schematic"]>>>;
 }, "strip", z.ZodTypeAny, {
     name: string;
     unscoped_name: string;
@@ -661,6 +662,7 @@ declare const packageSchema: z.ZodObject<{
     ai_usage_instructions: string | null;
     snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
     latest_license?: string | null | undefined;
+    default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
 }, {
     name: string;
     unscoped_name: string;
@@ -689,6 +691,7 @@ declare const packageSchema: z.ZodObject<{
     is_source_from_github?: boolean | undefined;
     website?: string | null | undefined;
     latest_license?: string | null | undefined;
+    default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
 }>;
 type Package = z.infer<typeof packageSchema>;
 declare const jlcpcbOrderStateSchema: z.ZodObject<{
@@ -1068,6 +1071,7 @@ declare const databaseSchema: z.ZodObject<{
         ai_description: z.ZodNullable<z.ZodString>;
         latest_license: z.ZodOptional<z.ZodNullable<z.ZodString>>;
         ai_usage_instructions: z.ZodNullable<z.ZodString>;
+        default_view: z.ZodOptional<z.ZodDefault<z.ZodEnum<["files", "3d", "pcb", "schematic"]>>>;
     }, "strip", z.ZodTypeAny, {
         name: string;
         unscoped_name: string;
@@ -1096,6 +1100,7 @@ declare const databaseSchema: z.ZodObject<{
         ai_usage_instructions: string | null;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
         latest_license?: string | null | undefined;
+        default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
     }, {
         name: string;
         unscoped_name: string;
@@ -1124,6 +1129,7 @@ declare const databaseSchema: z.ZodObject<{
         is_source_from_github?: boolean | undefined;
         website?: string | null | undefined;
         latest_license?: string | null | undefined;
+        default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
     }>, "many">>;
     orders: z.ZodDefault<z.ZodArray<z.ZodObject<{
         order_id: z.ZodString;
@@ -1572,6 +1578,7 @@ declare const databaseSchema: z.ZodObject<{
         ai_usage_instructions: string | null;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
         latest_license?: string | null | undefined;
+        default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
     }[];
     orders: {
         error: z.objectOutputType<{
@@ -1788,6 +1795,7 @@ declare const databaseSchema: z.ZodObject<{
         is_source_from_github?: boolean | undefined;
         website?: string | null | undefined;
         latest_license?: string | null | undefined;
+        default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
     }[] | undefined;
     orders?: {
         error: z.objectInputType<{

package/dist/schema.js

@@ -182,7 +182,8 @@ var packageSchema = z.object({
   star_count: z.number().default(0),
   ai_description: z.string().nullable(),
   latest_license: z.string().nullable().optional(),
-  ai_usage_instructions: z.string().nullable()
+  ai_usage_instructions: z.string().nullable(),
+  default_view: z.enum(["files", "3d", "pcb", "schematic"]).default("files").optional()
 });
 var jlcpcbOrderStateSchema = z.object({
   jlcpcb_order_state_id: z.string(),

package/fake-snippets-api/lib/db/schema.ts

@@ -219,6 +219,10 @@ export const packageSchema = z.object({
   ai_description: z.string().nullable(),
   latest_license: z.string().nullable().optional(),
   ai_usage_instructions: z.string().nullable(),
+  default_view: z
+    .enum(["files", "3d", "pcb", "schematic"])
+    .default("files")
+    .optional(),
 })
 export type Package = z.infer<typeof packageSchema>
 

package/fake-snippets-api/routes/api/packages/create.ts

@@ -55,6 +55,7 @@ export default withRouteSpec({
     is_public: is_private === true ? false : true,
     is_unlisted: is_private === true ? true : (is_unlisted ?? false),
     ai_usage_instructions: "placeholder ai usage instructions",
+    default_view: "files",
   })
 
   if (!newPackage) {

package/fake-snippets-api/routes/api/packages/update.ts

@@ -20,6 +20,7 @@ export default withRouteSpec({
       website: z.string().optional(),
       is_private: z.boolean().optional(),
       is_unlisted: z.boolean().optional(),
+      default_view: z.enum(["files", "3d", "pcb", "schematic"]).optional(),
     })
     .transform((data) => ({
       ...data,
@@ -30,8 +31,15 @@ export default withRouteSpec({
     package: packageSchema,
   }),
 })(async (req, ctx) => {
-  const { package_id, name, description, website, is_private, is_unlisted } =
-    req.jsonBody
+  const {
+    package_id,
+    name,
+    description,
+    website,
+    is_private,
+    is_unlisted,
+    default_view,
+  } = req.jsonBody
 
   const packageIndex = ctx.db.packages.findIndex(
     (p) => p.package_id === package_id,
@@ -77,6 +85,7 @@ export default withRouteSpec({
     is_public:
       is_private !== undefined ? !is_private : existingPackage.is_public,
     is_unlisted: is_unlisted ?? existingPackage.is_unlisted,
+    default_view: default_view ?? existingPackage.default_view,
     updated_at: new Date().toISOString(),
   })
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.67",
+  "version": "0.0.69",
   "type": "module",
   "repository": {
     "type": "git",
@@ -70,13 +70,12 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@tscircuit/3d-viewer": "^0.0.142",
     "@tscircuit/eval": "^0.0.198",
     "@tscircuit/footprinter": "^0.0.124",
     "@tscircuit/layout": "^0.0.29",
     "@tscircuit/math-utils": "^0.0.10",
     "@tscircuit/mm": "^0.0.8",
-    "@tscircuit/props": "^0.0.143",
+    "@tscircuit/props": "^0.0.186",
     "@types/file-saver": "^2.0.7",
     "@types/ms": "^0.7.34",
     "@typescript/ata": "^0.9.7",
@@ -148,7 +147,7 @@
     "@tailwindcss/typography": "^0.5.16",
     "@tscircuit/core": "^0.0.384",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "^0.0.461",
+    "@tscircuit/runframe": "^0.0.494",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",

package/src/App.tsx

@@ -61,12 +61,10 @@ const EditorPage = lazyImport(async () => {
 const LandingPage = lazyImport(() => import("@/pages/landing"))
 const MyOrdersPage = lazyImport(() => import("@/pages/my-orders"))
 const LatestPage = lazyImport(() => import("@/pages/latest"))
-const PreviewPage = lazyImport(() => import("@/pages/preview"))
 const QuickstartPage = lazyImport(() => import("@/pages/quickstart"))
 const SearchPage = lazyImport(() => import("@/pages/search"))
 const SettingsPage = lazyImport(() => import("@/pages/settings"))
 const UserProfilePage = lazyImport(() => import("@/pages/user-profile"))
-const ViewOrderPage = lazyImport(() => import("@/pages/view-order"))
 const DevLoginPage = lazyImport(() => import("@/pages/dev-login"))
 const BetaPage = lazyImport(() => import("@/pages/beta"))
 const ViewPackagePage = lazyImport(() => import("@/pages/view-package"))
@@ -123,8 +121,6 @@ function App() {
             <Route path="/trending" component={TrendingPage} />
             <Route path="/authorize" component={AuthenticatePage} />
             <Route path="/my-orders" component={MyOrdersPage} />
-            <Route path="/orders/:orderId" component={ViewOrderPage} />
-            <Route path="/preview" component={PreviewPage} />
             <Route path="/dev-login" component={DevLoginPage} />
             <Route path="/:username" component={UserProfilePage} />
             <Route path="/:author/:packageName" component={ViewPackagePage} />

package/src/components/CmdKMenu.tsx

@@ -7,7 +7,7 @@ import { Package, Snippet } from "fake-snippets-api/lib/db/schema"
 import React from "react"
 import { useQuery } from "react-query"
 
-type SnippetType = "board" | "package" | "model" | "footprint" | "snippet"
+type SnippetType = "board" | "package" | "model" | "footprint"
 
 interface Template {
   name: string
@@ -31,13 +31,13 @@ const CmdKMenu = () => {
 
   // Search results query
   const { data: searchResults = [], isLoading: isSearching } = useQuery(
-    ["snippetSearch", searchQuery],
+    ["packageSearch", searchQuery],
     async () => {
       if (!searchQuery) return []
-      const { data } = await axios.get("/snippets/search", {
-        params: { q: searchQuery },
+      const { data } = await axios.post("/packages/search", {
+        query: searchQuery,
       })
-      return data.snippets || []
+      return data.packages || []
     },
     {
       enabled: Boolean(searchQuery),
@@ -114,7 +114,7 @@ const CmdKMenu = () => {
             />
           </svg>
           <Command.Input
-            placeholder="Search snippets and commands..."
+            placeholder="Search packages and commands..."
             value={searchQuery}
             onValueChange={setSearchQuery}
             className="w-full h-12 bg-transparent border-none outline-none text-gray-900 dark:text-gray-100 placeholder-gray-500"
@@ -133,27 +133,27 @@ const CmdKMenu = () => {
                   heading="Search Results"
                   className="px-2 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400"
                 >
-                  {searchResults.map((snippet: Snippet) => (
+                  {searchResults.map((pkg: Package) => (
                     <Command.Item
-                      key={snippet.snippet_id}
-                      value={snippet.name || snippet.unscoped_name}
+                      key={pkg.package_id}
+                      value={pkg.name}
                       onSelect={() => {
-                        window.location.href = `/editor?snippet_id=${snippet.snippet_id}`
+                        window.location.href = `/editor?package_id=${pkg.package_id}`
                         setOpen(false)
                       }}
                       className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default aria-selected:bg-gray-100 dark:aria-selected:bg-gray-700"
                     >
                       <div className="flex flex-col">
                         <span className="text-gray-900 dark:text-gray-100">
-                          {snippet.name || snippet.unscoped_name}
+                          {pkg.name}
                         </span>
-                        {snippet.description && (
+                        {pkg.description && (
                           <span className="text-sm text-gray-500">
-                            {snippet.description}
+                            {pkg.description}
                           </span>
                         )}
                       </div>
-                      <span className="text-sm text-gray-500">snippet</span>
+                      <span className="text-sm text-gray-500">package</span>
                     </Command.Item>
                   ))}
                 </Command.Group>
@@ -161,7 +161,7 @@ const CmdKMenu = () => {
 
               {!searchQuery && recentPackages.length > 0 && (
                 <Command.Group
-                  heading="Recent Snippets"
+                  heading="Recent Packages"
                   className="px-2 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400"
                 >
                   {recentPackages.slice(0, 6).map((pkg) => (
@@ -169,28 +169,28 @@ const CmdKMenu = () => {
                       key={pkg.package_id}
                       value={pkg.unscoped_name}
                       onSelect={() => {
-                        window.location.href = `/editor?snippet_id=${pkg.package_id}`
+                        window.location.href = `/editor?package_id=${pkg.package_id}`
                         setOpen(false)
                       }}
                       className="flex items-center justify-between px-2 py-1.5 rounded-sm text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default aria-selected:bg-gray-100 dark:aria-selected:bg-gray-700"
                     >
                       <div className="flex flex-col">
                         <span className="text-gray-900 dark:text-gray-100">
-                          {pkg.unscoped_name}
+                          {pkg.name}
                         </span>
                         <span className="text-sm text-gray-500">
                           Last edited:{" "}
                           {new Date(pkg.updated_at).toLocaleDateString()}
                         </span>
                       </div>
-                      <span className="text-sm text-gray-500">snippet</span>
+                      <span className="text-sm text-gray-500">package</span>
                     </Command.Item>
                   ))}
                 </Command.Group>
               )}
 
               <Command.Group
-                heading="Start Blank Snippet"
+                heading="Start Blank Package"
                 className="px-2 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400"
               >
                 {blankTemplates.map((template) => (

package/src/components/FAQ.tsx

@@ -176,7 +176,9 @@ export const FAQ = () => (
         <Accordion type="single" collapsible>
           {QUESTIONS.map((q, i) => (
             <AccordionItem key={i} value={`item-${i + 1}`}>
-              <AccordionTrigger>{q.question}</AccordionTrigger>
+              <AccordionTrigger className="text-left">
+                {q.question}
+              </AccordionTrigger>{" "}
               <AccordionContent>{q.answer}</AccordionContent>
             </AccordionItem>
           ))}

package/src/components/FileSidebar.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from "react"
 import { cn } from "@/lib/utils"
-import { File, Folder, PanelRightOpen } from "lucide-react"
+import { File, Folder, PanelRightOpen, Plus } from "lucide-react"
 import { TreeView, TreeDataItem } from "@/components/ui/tree-view"
 import { isHiddenFile } from "./ViewPackagePage/utils/is-hidden-file"
+import { Input } from "@/components/ui/input"
+import { CreateFileProps } from "./package-port/CodeAndPreview"
 
 type FileName = string
 
@@ -12,6 +14,7 @@ interface FileSidebarProps {
   onFileSelect: (filename: FileName) => void
   className?: string
   fileSidebarState: ReturnType<typeof useState<boolean>>
+  handleCreateFile: (props: CreateFileProps) => void
 }
 
 const FileSidebar: React.FC<FileSidebarProps> = ({
@@ -20,8 +23,13 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   onFileSelect,
   className,
   fileSidebarState,
+  handleCreateFile,
 }) => {
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
+  const [newFileName, setNewFileName] = useState("")
+  const [isCreatingFile, setIsCreatingFile] = useState(false)
+  const [errorMessage, setErrorMessage] = useState("")
+
   const transformFilesToTreeData = (
     files: Record<FileName, string>,
   ): TreeDataItem[] => {
@@ -82,6 +90,17 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   }
 
   const treeData = transformFilesToTreeData(files)
+
+  const handleCreateFileInline = () => {
+    handleCreateFile({
+      newFileName,
+      setErrorMessage,
+      onFileSelect,
+      setNewFileName,
+      setIsCreatingFile,
+    })
+  }
+
   return (
     <div
       className={cn(
@@ -98,6 +117,36 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
       >
         <PanelRightOpen />
       </button>
+      <button
+        onClick={() => setIsCreatingFile(true)}
+        className="absolute top-2 right-2 text-gray-400 hover:text-gray-600"
+        aria-label="Create new file"
+      >
+        <Plus className="w-5 h-5" />
+      </button>
+      {isCreatingFile && (
+        <div className="p-2">
+          <Input
+            autoFocus
+            value={newFileName}
+            onChange={(e) => setNewFileName(e.target.value)}
+            onBlur={handleCreateFileInline}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                handleCreateFileInline()
+              } else if (e.key === "Escape") {
+                setIsCreatingFile(false)
+                setNewFileName("")
+                setErrorMessage("")
+              }
+            }}
+            placeholder="Enter file name"
+          />
+          {errorMessage && (
+            <div className="text-red-500 mt-1">{errorMessage}</div>
+          )}
+        </div>
+      )}
       <TreeView
         data={treeData}
         initialSelectedItemId={currentFile}

package/src/components/Header2.tsx

@@ -29,15 +29,26 @@ const SearchButtonComponent = () => {
           </Button> */}
         </div>
       ) : (
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={() => setIsExpanded(true)}
-          className="h-8 w-8"
-          aria-label="Open search"
-        >
-          <Search className="h-4 w-4" />
-        </Button>
+        <>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setIsExpanded(true)}
+            className="h-8 w-8 hidden sm:flex"
+            aria-label="Open search"
+          >
+            <Search className="size-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => (window.location.href = "/search")}
+            className="h-8 w-8 flex sm:hidden"
+            aria-label="Go to search"
+          >
+            <Search className="size-4" />
+          </Button>
+        </>
       )}
     </div>
   )

package/src/components/JLCPCBImportDialog.tsx

@@ -27,9 +27,8 @@ export function JLCPCBImportDialog({
   const [partNumber, setPartNumber] = useState("")
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
-  const [alreadyImportedPackageId, setAlreadyImportedPackageId] = useState<
-    string | null
-  >(null)
+  const [hasBeenImportedToAccountAlready, setHasBeenImportedToAccountAlready] =
+    useState<boolean>(false)
   const axios = useAxios()
   const { toast } = useToast()
   const [, navigate] = useLocation()
@@ -48,19 +47,17 @@ export function JLCPCBImportDialog({
 
     setIsLoading(true)
     setError(null)
-    setAlreadyImportedPackageId(null)
+    setHasBeenImportedToAccountAlready(false)
 
     try {
-      const existingPackageRes = await axios.get(
-        `/snippets/get?owner_name=${session?.github_username}&unscoped_name=${partNumber}`,
-        {
-          validateStatus: (status) => true,
-        },
-      )
+      const apiUrl = `/snippets/get?owner_name=${session?.github_username}&unscoped_name=${partNumber}`
+
+      const existingPackageRes = await axios.get(apiUrl, {
+        validateStatus: (status) => true,
+      })
 
       if (existingPackageRes.status !== 404) {
-        const packageId = existingPackageRes.data.snippet.snippet_id
-        setAlreadyImportedPackageId(packageId)
+        setHasBeenImportedToAccountAlready(true)
         setIsLoading(false)
         return
       }
@@ -122,14 +119,14 @@ export function JLCPCBImportDialog({
             onChange={(e) => {
               setPartNumber(e.target.value)
               setError(null)
-              setAlreadyImportedPackageId(null)
+              setHasBeenImportedToAccountAlready(false)
             }}
           />
-          {error && !alreadyImportedPackageId && (
+          {error && !hasBeenImportedToAccountAlready && (
             <p className="bg-red-100 p-2 mt-2 pre-wrap">{error}</p>
           )}
 
-          {error && !alreadyImportedPackageId && (
+          {error && !hasBeenImportedToAccountAlready && (
             <div className="flex justify-end mt-2">
               <Button
                 variant="default"
@@ -150,7 +147,7 @@ export function JLCPCBImportDialog({
             </div>
           )}
 
-          {alreadyImportedPackageId && (
+          {hasBeenImportedToAccountAlready && (
             <p className="p-2 mt-2 pre-wrap text-md text-green-600">
               This part number has already been imported to your profile.{" "}
               <PrefetchPageLink

package/src/components/ViewPackagePage/components/important-files-view.tsx

@@ -65,7 +65,7 @@ export default function ImportantFilesView({
       setActiveFilePath(importantFiles[0].file_path)
       setActiveTab("file")
     }
-  }, [aiDescription, aiUsageInstructions, hasAiContent])
+  }, [aiDescription, aiUsageInstructions, hasAiContent, importantFiles])
 
   // Get file name from path
   const getFileName = (path: string) => {

package/src/components/ViewPackagePage/components/mobile-sidebar.tsx

@@ -211,6 +211,7 @@ const MobileSidebar = ({
           packageAuthor={packageInfo.owner_github_username}
           onUpdate={handlePackageUpdate}
           packageName={packageInfo.name}
+          currentDefaultView={packageInfo.default_view}
         />
       )}
     </div>

package/src/components/ViewPackagePage/components/package-header.tsx

@@ -1,7 +1,5 @@
-import React, { useEffect } from "react"
+import { useEffect } from "react"
 import { Link } from "wouter"
-
-import { TypeBadge } from "@/components/TypeBadge"
 import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
 import {
@@ -10,7 +8,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
-import { LockClosedIcon } from "@radix-ui/react-icons"
+import { Lock, Globe } from "lucide-react"
 import { GitFork, Package, Star } from "lucide-react"
 
 import { useForkPackageMutation } from "@/hooks/use-fork-package-mutation"
@@ -45,6 +43,7 @@ export default function PackageHeader({
   const { OrderDialog, isOpen, open, close, stage, setStage } = useOrderDialog({
     onSignIn: signIn,
     isLoggedIn,
+    packageReleaseId: packageInfo?.latest_package_release_id ?? "",
   })
   const { data: starData, isLoading: isStarDataLoading } =
     usePackageStarsByName(packageInfo?.name ?? null)
@@ -105,13 +104,25 @@ export default function PackageHeader({
                     {packageName}
                   </Link>
                 </h1>
-                {packageInfo?.name && <TypeBadge type="package" />}
-                {isPrivate && (
-                  <div className="relative group pl-2">
-                    <LockClosedIcon className="h-4 w-4 text-gray-700" />
-                    <span className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-1 hidden group-hover:block bg-black text-white text-xs rounded py-1 px-2">
-                      private
-                    </span>
+                {packageInfo?.name && (
+                  <div
+                    className={`select-none inline-flex items-center px-2 py-1 rounded text-xs font-medium ${
+                      isPrivate
+                        ? "bg-gray-100 text-gray-700 border border-gray-200"
+                        : "bg-blue-50 text-blue-700 border border-blue-200"
+                    }`}
+                  >
+                    {isPrivate ? (
+                      <>
+                        <Lock className="w-3 h-3 mr-1 flex-shrink-0" />
+                        <span className="leading-none">Private</span>
+                      </>
+                    ) : (
+                      <>
+                        <Globe className="w-3 h-3 mr-1 flex-shrink-0" />
+                        <span className="leading-none">Public</span>
+                      </>
+                    )}
                   </div>
                 )}
               </>
@@ -259,7 +270,6 @@ export default function PackageHeader({
         onClose={close}
         stage={stage}
         setStage={setStage}
-        packageReleaseId={packageInfo?.latest_package_release_id ?? ""}
       />
     </header>
   )