@tscircuit/fake-snippets 0.0.109 → 0.0.110

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

@@ -12,7 +12,7 @@ import { Lock, Globe } from "lucide-react"
 import { GitFork, Package, Star } from "lucide-react"
 
 import { useForkPackageMutation } from "@/hooks/use-fork-package-mutation"
-import { usePackageStarMutationByName } from "@/hooks/use-package-stars"
+import { usePackageStarringByName } from "@/hooks/use-package-stars"
 import { useOrderDialog } from "@tscircuit/runframe"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { Package as PackageType } from "fake-snippets-api/lib/db/schema"
@@ -29,7 +29,7 @@ export default function PackageHeader({
   isPrivate = false,
   isCurrentUserAuthor = false,
 }: PackageHeaderProps) {
-  const author = packageInfo?.owner_github_username
+  const accountName = packageInfo?.owner_github_username
   const packageName = packageInfo?.unscoped_name
   const sessionToken = useGlobalStore((s) => s.session?.token)
   const isOwner =
@@ -43,8 +43,8 @@ export default function PackageHeader({
     packageReleaseId: packageInfo?.latest_package_release_id ?? "",
   })
 
-  const { addStar, removeStar } = usePackageStarMutationByName(
-    packageInfo?.name ?? "",
+  const { isStarred, starCount, toggleStar } = usePackageStarringByName(
+    packageInfo?.name ?? null,
   )
 
   const { mutateAsync: forkPackage, isLoading: isForkLoading } =
@@ -52,12 +52,7 @@ export default function PackageHeader({
 
   const handleStarClick = async () => {
     if (!packageInfo?.name || !isLoggedIn) return
-
-    if (packageInfo?.is_starred) {
-      await removeStar.mutateAsync()
-    } else {
-      await addStar.mutateAsync()
-    }
+    await toggleStar()
   }
 
   const handleForkClick = async () => {
@@ -65,8 +60,6 @@ export default function PackageHeader({
     await forkPackage(packageInfo.package_id)
   }
 
-  const isStarLoading = addStar.isLoading || removeStar.isLoading
-
   useEffect(() => {
     window.TSCIRCUIT_REGISTRY_API_BASE_URL =
       import.meta.env.VITE_TSCIRCUIT_REGISTRY_API_URL ??
@@ -81,18 +74,18 @@ export default function PackageHeader({
       <div className="max-w-[1200px] mx-auto px-4">
         <div className="flex items-center justify-between flex-wrap gap-y-2">
           <div className="flex items-center min-w-0 flex-wrap">
-            {author && packageName ? (
+            {accountName && packageName ? (
               <>
                 <h1 className="text-lg md:text-xl font-bold mr-2 break-words">
                   <Link
-                    href={`/${author}`}
+                    href={`/${accountName}`}
                     className="text-blue-600 hover:underline"
                   >
-                    {author}
+                    {accountName}
                   </Link>
                   <span className="px-1 text-gray-500">/</span>
                   <Link
-                    href={`/${author}/${packageName}`}
+                    href={`/${accountName}/${packageName}`}
                     className="text-blue-600 hover:underline"
                   >
                     {packageName}
@@ -126,7 +119,12 @@ export default function PackageHeader({
           </div>
 
           <div className="hidden md:flex items-center space-x-2">
-            <Button variant="outline" size="sm" onClick={open}>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={open}
+              disabled={!packageInfo?.latest_package_release_id}
+            >
               <Package className="w-4 h-4 mr-2" />
               Order
             </Button>
@@ -144,21 +142,17 @@ export default function PackageHeader({
                           : ""
                       }
                       onClick={handleStarClick}
-                      disabled={
-                        isStarLoading || !packageInfo?.name || !isLoggedIn
-                      }
+                      disabled={!packageInfo?.name || !isLoggedIn}
                     >
                       <Star
                         className={`w-4 h-4 mr-2 ${
-                          packageInfo?.is_starred
-                            ? "fill-yellow-500 text-yellow-500"
-                            : ""
+                          isStarred ? "fill-yellow-500 text-yellow-500" : ""
                         }`}
                       />
-                      {packageInfo?.is_starred ? "Starred" : "Star"}
-                      {(packageInfo?.star_count ?? 0) > 0 && (
+                      {isStarred ? "Starred" : "Star"}
+                      {(starCount ?? 0) > 0 && (
                         <span className="ml-1.5 bg-gray-100 text-gray-700 rounded-full px-1.5 py-0.5 text-xs font-medium">
-                          {packageInfo?.star_count}
+                          {starCount}
                         </span>
                       )}
                     </Button>
@@ -220,19 +214,17 @@ export default function PackageHeader({
                   : ""
               }
               onClick={handleStarClick}
-              disabled={isStarLoading || !packageInfo?.name}
+              disabled={!packageInfo?.name || !isLoggedIn}
             >
               <Star
                 className={`w-4 h-4 mr-2 ${
-                  packageInfo?.is_starred
-                    ? "fill-yellow-500 text-yellow-500"
-                    : ""
+                  isStarred ? "fill-yellow-500 text-yellow-500" : ""
                 }`}
               />
-              {packageInfo?.is_starred ? "Starred" : "Star"}
-              {(packageInfo?.star_count ?? 0) > 0 && (
+              {isStarred ? "Starred" : "Star"}
+              {(starCount ?? 0) > 0 && (
                 <span className="ml-1.5 bg-gray-100 text-gray-700 rounded-full px-1.5 py-0.5 text-xs font-medium">
-                  {packageInfo?.star_count}
+                  {starCount}
                 </span>
               )}
             </Button>

package/src/components/ViewPackagePage/components/preview-image-squares.tsx

@@ -1,9 +1,11 @@
-import { Skeleton } from "@/components/ui/skeleton"
 import { usePreviewImages } from "@/hooks/use-preview-images"
 import type { Package } from "fake-snippets-api/lib/db/schema"
 
 interface ViewPlaceholdersProps {
-  packageInfo?: Pick<Package, "name" | "latest_package_release_fs_sha">
+  packageInfo?: Pick<
+    Package,
+    "name" | "latest_package_release_fs_sha" | "latest_package_release_id"
+  >
   onViewChange?: (view: "3d" | "pcb" | "schematic") => void
 }
 
@@ -15,7 +17,6 @@ export default function PreviewImageSquares({
     packageName: packageInfo?.name,
     fsMapHash: packageInfo?.latest_package_release_fs_sha ?? "",
   })
-
   const handleViewClick = (viewId: string) => {
     onViewChange?.(viewId as "3d" | "pcb" | "schematic")
   }
@@ -25,24 +26,16 @@ export default function PreviewImageSquares({
       {availableViews.map((view) => (
         <button
           key={view.id}
-          className={`aspect-square bg-gray-100 dark:bg-[#161b22] rounded-lg border border-gray-200 dark:border-[#30363d] hover:bg-gray-200 dark:hover:bg-[#21262d] flex items-center justify-center transition-colors overflow-hidden mb-6`}
+          className={`aspect-square ${view.status == "loading" ? "bg-slate-900/10 animate-pulse" : (view.backgroundClass ?? "bg-gray-100")} rounded-lg border border-gray-200 dark:border-[#30363d] flex items-center justify-center transition-colors overflow-hidden mb-6`}
           onClick={() => handleViewClick(view.id)}
         >
           {view.imageUrl && (
-            <>
-              {view.status === "loading" && (
-                <Skeleton className="w-full h-full rounded-lg" />
-              )}
-              <img
-                src={view.imageUrl}
-                alt={view.label}
-                className={`w-full h-full object-cover rounded-lg ${
-                  view.status === "loaded" ? "block" : "hidden"
-                }`}
-                onLoad={view.onLoad}
-                onError={view.onError}
-              />
-            </>
+            <img
+              src={view.imageUrl}
+              className="w-full h-full object-cover rounded-lg"
+              onLoad={view.onLoad}
+              onError={view.onError}
+            />
           )}
         </button>
       ))}

package/src/components/ViewPackagePage/components/repo-page-content.tsx

@@ -18,12 +18,12 @@ import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import PackageHeader from "./package-header"
 import { useGlobalStore } from "@/hooks/use-global-store"
-import { useLocation } from "wouter"
 import type {
   Package,
   PackageFile as ApiPackageFile,
 } from "fake-snippets-api/lib/db/schema"
 import { useRequestAiReviewMutation } from "@/hooks/use-request-ai-review-mutation"
+import { useUpdateAiDescriptionMutation } from "@/hooks/use-update-ai-description-mutation"
 import { useAiReview } from "@/hooks/use-ai-review"
 import { useQueryClient } from "react-query"
 import SidebarReleasesSection from "./sidebar-releases-section"
@@ -81,6 +81,9 @@ export default function RepoPageContent({
       },
     })
 
+  const { mutate: updateAiDescription, isLoading: isUpdatingAiDescription } =
+    useUpdateAiDescriptionMutation()
+
   const aiReviewRequested =
     Boolean(packageRelease?.ai_review_requested) ||
     Boolean(pendingAiReviewId) ||
@@ -212,15 +215,12 @@ export default function RepoPageContent({
 
             {/* Dynamic Content based on active view */}
             {renderContent()}
-
             {/* Important Files View - Always shown */}
             <ImportantFilesView
               importantFiles={importantFiles}
               isFetched={arePackageFilesFetched}
+              pkg={packageInfo}
               onEditClicked={onEditClicked}
-              packageAuthorOwner={packageInfo?.owner_github_username}
-              aiDescription={packageInfo?.ai_description ?? ""}
-              aiUsageInstructions={packageInfo?.ai_usage_instructions ?? ""}
               aiReviewText={packageRelease?.ai_review_text ?? null}
               aiReviewRequested={aiReviewRequested}
               onRequestAiReview={() => {
@@ -230,6 +230,13 @@ export default function RepoPageContent({
                   })
                 }
               }}
+              onRequestAiDescriptionUpdate={() => {
+                if (packageInfo) {
+                  updateAiDescription({
+                    package_id: packageInfo.package_id,
+                  })
+                }
+              }}
               onLicenseFileRequested={licenseFileRequested}
             />
           </div>

package/src/components/ViewPackagePage/components/sidebar-about-section.tsx

@@ -2,12 +2,12 @@ import { Badge } from "@/components/ui/badge"
 import { GitFork, Star, Settings, LinkIcon, Github, Plus } from "lucide-react"
 import { Skeleton } from "@/components/ui/skeleton"
 import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
-import { usePackageReleaseById } from "@/hooks/use-package-release"
+import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { Button } from "@/components/ui/button"
 import { useEditPackageDetailsDialog } from "@/components/dialogs/edit-package-details-dialog"
 import { useState, useEffect, useMemo } from "react"
-import { usePackageFile } from "@/hooks/use-package-files"
+import { usePackageFileById, usePackageFiles } from "@/hooks/use-package-files"
 import { getLicenseFromLicenseContent } from "@/lib/getLicenseFromLicenseContent"
 import { PackageInfo } from "@/lib/types"
 
@@ -21,23 +21,29 @@ export default function SidebarAboutSection({
   onLicenseClick,
 }: SidebarAboutSectionProps = {}) {
   const { packageInfo, refetch: refetchPackageInfo } = useCurrentPackageInfo()
-  const { data: packageRelease } = usePackageReleaseById(
+  const { packageRelease } = useCurrentPackageRelease({
+    include_ai_review: true,
+  })
+
+  const { data: releaseFiles } = usePackageFiles(
     packageInfo?.latest_package_release_id,
   )
-
-  const { data: licenseFileMeta, refetch: refetchLicense } = usePackageFile({
-    package_release_id: packageInfo?.latest_package_release_id ?? "",
-    file_path: "LICENSE",
-  })
+  const licenseFileId = useMemo(() => {
+    return (
+      releaseFiles?.find((f) => f.file_path === "LICENSE")?.package_file_id ||
+      null
+    )
+  }, [releaseFiles])
+  const { data: licenseFileMeta } = usePackageFileById(licenseFileId)
   const currentLicense = useMemo(() => {
     if (packageInfo?.latest_license) {
       return packageInfo?.latest_license
     }
     if (licenseFileMeta?.content_text) {
-      return getLicenseFromLicenseContent(licenseFileMeta?.content_text)
+      return getLicenseFromLicenseContent(licenseFileMeta.content_text)
     }
     return null
-  }, [licenseFileMeta])
+  }, [licenseFileMeta, packageInfo?.latest_license])
   const topics = packageInfo?.is_package ? ["Package"] : ["Board"]
   const isLoading = !packageInfo || !packageRelease
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))

package/src/components/ViewPackagePage/components/sidebar-releases-section.tsx

@@ -1,12 +1,12 @@
 import { Tag, Clock } from "lucide-react"
 import { Skeleton } from "@/components/ui/skeleton"
 import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
-import { usePackageReleaseById } from "@/hooks/use-package-release"
+import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
 import { timeAgo } from "@/lib/utils/timeAgo"
 import { BuildStatus, BuildStep } from "./build-status"
 import type { PackageRelease } from "fake-snippets-api/lib/db/schema"
 import { getBuildStatus, StatusIcon } from "@/components/preview"
-import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import { Link } from "wouter"
 import { usePackageBuild } from "@/hooks/use-package-builds"
 
 function getTranspilationStatus(
@@ -39,9 +39,9 @@ function getCircuitJsonStatus(pr?: PackageRelease | null): BuildStep["status"] {
 
 export default function SidebarReleasesSection() {
   const { packageInfo } = useCurrentPackageInfo()
-  const { data: packageRelease } = usePackageReleaseById(
-    packageInfo?.latest_package_release_id,
-  )
+  const { packageRelease } = useCurrentPackageRelease({
+    include_ai_review: true,
+  })
   const { data: latestBuild } = usePackageBuild(
     packageRelease?.latest_package_build_id ?? null,
   )
@@ -80,21 +80,21 @@ export default function SidebarReleasesSection() {
   return (
     <div className="mb-6">
       <h2 className="text-lg font-semibold mb-2">
-        <PrefetchPageLink
+        <Link
           href={`/${packageInfo?.owner_github_username}/${packageInfo?.unscoped_name}/releases`}
           className="hover:underline"
         >
           Releases
-        </PrefetchPageLink>
+        </Link>
       </h2>
       <div className="flex flex-col space-y-2">
-        <PrefetchPageLink
+        <Link
           href={`/${packageInfo?.owner_github_username}/${packageInfo?.unscoped_name}/releases`}
           className="flex items-center hover:underline"
         >
           <Tag className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
           <span className="text-sm font-medium">v{packageRelease.version}</span>
-        </PrefetchPageLink>
+        </Link>
         <div className="flex items-center">
           <Clock className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
           <span className="text-sm text-gray-500 dark:text-[#8b949e]">
@@ -109,13 +109,13 @@ export default function SidebarReleasesSection() {
           />
         ))}
         {latestBuild && (
-          <PrefetchPageLink
+          <Link
             href={`/${packageInfo?.name}/releases`}
             className="flex items-center gap-2 text-sm text-gray-500 dark:text-[#8b949e]"
           >
             <StatusIcon status={status} />
             <span>Package Preview {label}</span>
-          </PrefetchPageLink>
+          </Link>
         )}
       </div>
       {/* <a href="#" className="text-blue-600 dark:text-[#58a6ff] hover:underline text-sm">

package/src/components/ViewPackagePage/components/tab-views/pcb-view.tsx

@@ -1,6 +1,4 @@
-import { usePackageFile, usePackageFileByPath } from "@/hooks/use-package-files"
 import { PcbViewerWithContainerHeight } from "@/components/PcbViewerWithContainerHeight"
-import { useEffect, useState } from "react"
 import { useCurrentPackageCircuitJson } from "../../hooks/use-current-package-circuit-json"
 
 export default function PCBView() {
@@ -27,6 +25,7 @@ export default function PCBView() {
   return (
     <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-4 mb-4 bg-white dark:bg-[#0d1117]">
       <PcbViewerWithContainerHeight
+        disablePcbGroups
         clickToInteractEnabled
         circuitJson={circuitJson}
         containerClassName="w-full h-[620px]"

package/src/components/ViewPackagePage/components/tab-views/schematic-view.tsx

@@ -1,5 +1,5 @@
 import { useCurrentPackageCircuitJson } from "../../hooks/use-current-package-circuit-json"
-import { SchematicViewer } from "@tscircuit/runframe"
+import { SchematicViewer } from "@tscircuit/schematic-viewer"
 
 export default function SchematicView() {
   const { circuitJson, isLoading, error } = useCurrentPackageCircuitJson()
@@ -26,6 +26,7 @@ export default function SchematicView() {
   return (
     <div className="h-[620px]">
       <SchematicViewer
+        disableGroups
         clickToInteractEnabled
         circuitJson={circuitJson}
         containerStyle={{

package/src/components/dialogs/GitHubRepositorySelector.tsx

@@ -6,6 +6,7 @@ import {
   CommandGroup,
   CommandInput,
   CommandItem,
+  CommandList,
 } from "@/components/ui/command"
 import {
   Popover,
@@ -203,63 +204,69 @@ export const GitHubRepositorySelector = ({
                   <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                 </Button>
               </PopoverTrigger>
-              <PopoverContent className="w-full p-0 z-[999]">
+              <PopoverContent
+                className="w-[var(--radix-popover-trigger-width)] p-0 z-[999]"
+                align="start"
+              >
                 <Command shouldFilter={false}>
                   <CommandInput
                     value={searchValue}
                     onValueChange={setSearchValue}
                     placeholder="Search repositories..."
                   />
-                  <CommandEmpty className="text-sm text-slate-500 py-6">
-                    No repositories found.
-                  </CommandEmpty>
-                  <CommandGroup className="max-h-[400px] overflow-y-auto">
-                    {filteredOptions.map((option) => (
-                      <CommandItem
-                        key={option.value}
-                        onSelect={() => handleComboboxSelect(option.value)}
-                        className="cursor-pointer"
-                      >
-                        <div className="flex items-center space-x-2 w-full">
-                          {option.type === "repo" ? (
-                            <>
-                              <Check
-                                className={cn(
-                                  "mr-2 h-4 w-4",
-                                  selectedRepository === option.value
-                                    ? "opacity-100"
-                                    : "opacity-0",
+                  <CommandList className="max-h-[400px] overflow-y-auto">
+                    <CommandEmpty className="text-sm text-slate-500 py-6 pl-4">
+                      No repositories found.
+                    </CommandEmpty>
+                    <CommandGroup>
+                      {filteredOptions.map((option) => (
+                        <CommandItem
+                          key={option.value}
+                          value={option.value}
+                          onSelect={() => handleComboboxSelect(option.value)}
+                          className="cursor-pointer hover:bg-slate-100"
+                        >
+                          <div className="flex items-center space-x-2 w-full">
+                            {option.type === "repo" ? (
+                              <>
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    selectedRepository === option.value
+                                      ? "opacity-100"
+                                      : "opacity-0",
+                                  )}
+                                />
+                                <span>{option.label}</span>
+                                {option.isPrivate && (
+                                  <span className="text-xs text-muted-foreground">
+                                    (private)
+                                  </span>
+                                )}
+                              </>
+                            ) : (
+                              <>
+                                {option.icon === "plus" ? (
+                                  <Plus className="w-3 h-3 text-blue-600" />
+                                ) : (
+                                  <Minus className="w-3 h-3 text-red-600" />
                                 )}
-                              />
-                              <span>{option.label}</span>
-                              {option.isPrivate && (
-                                <span className="text-xs text-muted-foreground">
-                                  (private)
+                                <span
+                                  className={
+                                    option.icon === "plus"
+                                      ? "text-blue-600"
+                                      : "text-red-600"
+                                  }
+                                >
+                                  {option.label}
                                 </span>
-                              )}
-                            </>
-                          ) : (
-                            <>
-                              {option.icon === "plus" ? (
-                                <Plus className="w-3 h-3 text-blue-600" />
-                              ) : (
-                                <Minus className="w-3 h-3 text-red-600" />
-                              )}
-                              <span
-                                className={
-                                  option.icon === "plus"
-                                    ? "text-blue-600"
-                                    : "text-red-600"
-                                }
-                              >
-                                {option.label}
-                              </span>
-                            </>
-                          )}
-                        </div>
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
+                              </>
+                            )}
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
                 </Command>
               </PopoverContent>
             </Popover>

package/src/components/dialogs/edit-package-details-dialog.tsx

@@ -133,8 +133,10 @@ export const EditPackageDetailsDialog = ({
       if (response.status !== 200)
         throw new Error("Failed to update package details")
 
-      const filesRes = await axios.post("/package_files/list", {
-        package_name_with_version: `${packageAuthor}/${formData.unscopedPackageName}`,
+      const filesRes = await axios.get("/package_files/list", {
+        params: {
+          package_name_with_version: `${packageAuthor}/${formData.unscopedPackageName}`,
+        },
       })
       const packageFiles: string[] =
         filesRes.status === 200
@@ -194,10 +196,7 @@ export const EditPackageDetailsDialog = ({
     onSuccess: (data) => {
       onUpdate?.(data.description, data.website, data.license, data.defaultView)
       onOpenChange(false)
-      qc.invalidateQueries([
-        "packageFile",
-        { package_release_id: packageReleaseId },
-      ])
+      qc.invalidateQueries("packageFile")
       qc.invalidateQueries(["packageFiles", packageReleaseId])
       toast({
         title: "Package details updated",

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

@@ -1,23 +1,30 @@
 import { createUseDialog } from "./create-use-dialog"
 import {
-  ComponentSearchResult,
-  ImportComponentDialog as RunframeImportComponentDialog,
+  ImportComponentDialog2 as RunframeImportComponentDialog,
+  type ImportComponentDialog2Props,
 } from "@tscircuit/runframe/runner"
 
+export type ImportComponentDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+} & Pick<
+  ImportComponentDialog2Props,
+  | "onTscircuitPackageSelected"
+  | "onJlcpcbComponentTsxLoaded"
+  | "onKicadStringSelected"
+  | "jlcpcbProxyRequestHeaders"
+>
+
 export const ImportComponentDialog = ({
   open,
   onOpenChange,
-  onComponentSelected,
-}: {
-  open: boolean
-  onOpenChange: (open: boolean) => any
-  onComponentSelected: (pkg: ComponentSearchResult) => any
-}) => {
+  ...rest
+}: ImportComponentDialogProps) => {
   return (
     <RunframeImportComponentDialog
       isOpen={open}
       onClose={() => onOpenChange(false)}
-      onImport={(data) => onComponentSelected(data)}
+      {...rest}
     />
   )
 }

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

@@ -7,6 +7,7 @@ import { Button } from "../ui/button"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
 import { Input } from "../ui/input"
 import { createUseDialog } from "./create-use-dialog"
+import { Link } from "wouter"
 
 export const ImportPackageDialog = ({
   open,
@@ -55,13 +56,13 @@ export const ImportPackageDialog = ({
                   className="flex flex-col sm:flex-row items-start sm:items-center my-2 text-sm w-full"
                   key={pkg.package_id}
                 >
-                  <a
+                  <Link
                     href={`/${pkg.name}`}
                     target="_blank"
                     className="text-blue-500 hover:underline cursor-pointer flex-shrink-0 mb-1 sm:mb-0 sm:mr-2"
                   >
                     {pkg.name}
-                  </a>
+                  </Link>
                   <div className="text-gray-500 flex-grow overflow-hidden text-ellipsis whitespace-nowrap mb-1 sm:mb-0">
                     {pkg.description}
                   </div>