@tscircuit/fake-snippets 0.0.49 → 0.0.51

package/dist/index.d.ts

@@ -16,6 +16,7 @@ declare const snippetSchema: z.ZodObject<{
     manual_edits_json_content: z.ZodNullable<z.ZodOptional<z.ZodString>>;
     created_at: z.ZodString;
     updated_at: z.ZodString;
+    starred_at: z.ZodOptional<z.ZodString>;
     snippet_type: z.ZodEnum<["board", "package", "model", "footprint"]>;
     description: z.ZodOptional<z.ZodString>;
     version: z.ZodDefault<z.ZodString>;
@@ -44,6 +45,7 @@ declare const snippetSchema: z.ZodObject<{
     compiled_js?: string | null | undefined;
     circuit_json?: Record<string, any>[] | null | undefined;
     manual_edits_json_content?: string | null | undefined;
+    starred_at?: string | undefined;
     description?: string | undefined;
     tags?: string[] | undefined;
 }, {
@@ -61,6 +63,7 @@ declare const snippetSchema: z.ZodObject<{
     compiled_js?: string | null | undefined;
     circuit_json?: Record<string, any>[] | null | undefined;
     manual_edits_json_content?: string | null | undefined;
+    starred_at?: string | undefined;
     description?: string | undefined;
     version?: string | undefined;
     star_count?: number | undefined;
@@ -676,6 +679,7 @@ declare const createDatabase: ({ seed }?: {
         compiled_js?: string | null | undefined;
         circuit_json?: Record<string, any>[] | null | undefined;
         manual_edits_json_content?: string | null | undefined;
+        starred_at?: string | undefined;
         description?: string | undefined;
         tags?: string[] | undefined;
     }[];
@@ -960,6 +964,7 @@ declare const createDatabase: ({ seed }?: {
         compiled_js?: string | null | undefined;
         circuit_json?: Record<string, any>[] | null | undefined;
         manual_edits_json_content?: string | null | undefined;
+        starred_at?: string | undefined;
         description?: string | undefined;
         tags?: string[] | undefined;
     }[];

package/dist/index.js

@@ -26,6 +26,7 @@ var snippetSchema = z.object({
   manual_edits_json_content: z.string().optional().nullable(),
   created_at: z.string(),
   updated_at: z.string(),
+  starred_at: z.string().optional(),
   snippet_type: z.enum(["board", "package", "model", "footprint"]),
   description: z.string().optional(),
   version: z.string().default("0.0.1"),

package/dist/schema.d.ts

@@ -50,6 +50,7 @@ declare const snippetSchema: z.ZodObject<{
     manual_edits_json_content: z.ZodNullable<z.ZodOptional<z.ZodString>>;
     created_at: z.ZodString;
     updated_at: z.ZodString;
+    starred_at: z.ZodOptional<z.ZodString>;
     snippet_type: z.ZodEnum<["board", "package", "model", "footprint"]>;
     description: z.ZodOptional<z.ZodString>;
     version: z.ZodDefault<z.ZodString>;
@@ -78,6 +79,7 @@ declare const snippetSchema: z.ZodObject<{
     compiled_js?: string | null | undefined;
     circuit_json?: Record<string, any>[] | null | undefined;
     manual_edits_json_content?: string | null | undefined;
+    starred_at?: string | undefined;
     description?: string | undefined;
     tags?: string[] | undefined;
 }, {
@@ -95,6 +97,7 @@ declare const snippetSchema: z.ZodObject<{
     compiled_js?: string | null | undefined;
     circuit_json?: Record<string, any>[] | null | undefined;
     manual_edits_json_content?: string | null | undefined;
+    starred_at?: string | undefined;
     description?: string | undefined;
     version?: string | undefined;
     star_count?: number | undefined;
@@ -792,6 +795,7 @@ declare const databaseSchema: z.ZodObject<{
         manual_edits_json_content: z.ZodNullable<z.ZodOptional<z.ZodString>>;
         created_at: z.ZodString;
         updated_at: z.ZodString;
+        starred_at: z.ZodOptional<z.ZodString>;
         snippet_type: z.ZodEnum<["board", "package", "model", "footprint"]>;
         description: z.ZodOptional<z.ZodString>;
         version: z.ZodDefault<z.ZodString>;
@@ -820,6 +824,7 @@ declare const databaseSchema: z.ZodObject<{
         compiled_js?: string | null | undefined;
         circuit_json?: Record<string, any>[] | null | undefined;
         manual_edits_json_content?: string | null | undefined;
+        starred_at?: string | undefined;
         description?: string | undefined;
         tags?: string[] | undefined;
     }, {
@@ -837,6 +842,7 @@ declare const databaseSchema: z.ZodObject<{
         compiled_js?: string | null | undefined;
         circuit_json?: Record<string, any>[] | null | undefined;
         manual_edits_json_content?: string | null | undefined;
+        starred_at?: string | undefined;
         description?: string | undefined;
         version?: string | undefined;
         star_count?: number | undefined;
@@ -1455,6 +1461,7 @@ declare const databaseSchema: z.ZodObject<{
         compiled_js?: string | null | undefined;
         circuit_json?: Record<string, any>[] | null | undefined;
         manual_edits_json_content?: string | null | undefined;
+        starred_at?: string | undefined;
         description?: string | undefined;
         tags?: string[] | undefined;
     }[];
@@ -1661,6 +1668,7 @@ declare const databaseSchema: z.ZodObject<{
         compiled_js?: string | null | undefined;
         circuit_json?: Record<string, any>[] | null | undefined;
         manual_edits_json_content?: string | null | undefined;
+        starred_at?: string | undefined;
         description?: string | undefined;
         version?: string | undefined;
         star_count?: number | undefined;

package/dist/schema.js

@@ -21,6 +21,7 @@ var snippetSchema = z.object({
   manual_edits_json_content: z.string().optional().nullable(),
   created_at: z.string(),
   updated_at: z.string(),
+  starred_at: z.string().optional(),
   snippet_type: z.enum(["board", "package", "model", "footprint"]),
   description: z.string().optional(),
   version: z.string().default("0.0.1"),

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

@@ -25,6 +25,7 @@ export const snippetSchema = z.object({
   manual_edits_json_content: z.string().optional().nullable(),
   created_at: z.string(),
   updated_at: z.string(),
+  starred_at: z.string().optional(),
   snippet_type: z.enum(["board", "package", "model", "footprint"]),
   description: z.string().optional(),
   version: z.string().default("0.0.1"),

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

@@ -9,11 +9,23 @@ export default withRouteSpec({
     vendor_name: z.string(),
   }),
   jsonResponse: z.object({
-    order_quote_id: z.string(),
+    order_quote_id: z.string().optional(),
+    error: z.string().optional(),
   }),
 })(async (req, ctx) => {
   const { package_release_id, vendor_name } = req.jsonBody
 
+  // check package release exists
+  const packageRelease = ctx.db.getPackageReleaseById(package_release_id)
+  if (!packageRelease) {
+    return ctx.json(
+      {
+        error: "Package release not found",
+      },
+      { status: 404 },
+    )
+  }
+
   const orderQuoteId = ctx.db.addOrderQuote({
     account_id: ctx.auth.account_id,
     package_release_id,

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

@@ -66,12 +66,14 @@ export default withRouteSpec({
     existing.updated_at = new Date().toISOString()
   } else {
     // Add star by creating a new account_package record
+    const newTimestamp = new Date().toISOString()
     const newAccountPackage = {
+      account_package_id: `ap_${Date.now()}`,
       account_id: ctx.auth.account_id,
       package_id: packageId,
       is_starred: true,
-      created_at: new Date().toISOString(),
-      updated_at: new Date().toISOString(),
+      created_at: newTimestamp,
+      updated_at: newTimestamp,
     }
     ctx.db.addAccountPackage(newAccountPackage)
   }

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

@@ -49,11 +49,22 @@ export default withRouteSpec({
     packages = packages.filter((p) => p.owner_org_id === auth.personal_org_id)
   }
 
+  // Get star timestamps for authenticated user
+  const starTimestamps = new Map<string, string>()
+  if (auth) {
+    ctx.db.accountPackages
+      .filter((ap) => ap.account_id === auth.account_id && ap.is_starred)
+      .forEach((ap) => {
+        starTimestamps.set(ap.package_id, ap.updated_at)
+      })
+  }
+
   return ctx.json({
     ok: true,
     packages: packages.map((p) => ({
       ...p,
       latest_package_release_id: p.latest_package_release_id || null,
+      starred_at: starTimestamps.get(p.package_id) || null,
     })),
   })
 })

package/fake-snippets-api/routes/api/snippets/list.ts

@@ -1,6 +1,6 @@
 import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
 import { z } from "zod"
-import { snippetSchema } from "fake-snippets-api/lib/db/schema"
+import { snippetSchema, type Account } from "fake-snippets-api/lib/db/schema"
 
 export default withRouteSpec({
   methods: ["GET", "POST"],
@@ -17,7 +17,7 @@ export default withRouteSpec({
   }),
 })(async (req, ctx) => {
   const { owner_name, unscoped_name, starred_by } = req.commonParams
-
+  let starredByAccount: Account | null = null
   // Get all packages that are snippets
   let packages = ctx.db.packages.filter((pkg) => pkg.is_snippet === true)
 
@@ -38,25 +38,44 @@ export default withRouteSpec({
 
   // Filter by starred_by if provided
   if (starred_by) {
-    // Get the account ID for the starred_by username
-    const starredByAccount = ctx.db.accounts.find(
-      (acc) => acc.github_username.toLowerCase() === starred_by.toLowerCase(),
-    )
+    starredByAccount =
+      ctx.db.accounts.find(
+        (acc) => acc.github_username.toLowerCase() === starred_by.toLowerCase(),
+      ) || null
+
     if (starredByAccount) {
-      // Filter packages to only include those that are starred by this account
-      packages = packages.filter((pkg) =>
-        ctx.db.hasStarred(starredByAccount.account_id, pkg.package_id),
+      const accountPackages = ctx.db.accountPackages.filter(
+        (ap) => ap.account_id === starredByAccount?.account_id && ap.is_starred,
       )
+
+      const starTimestamps = new Map(
+        accountPackages.map((ap) => [ap.package_id, ap.updated_at]),
+      )
+
+      // Filter packages to only include starred ones
+      packages = packages.filter((pkg) => starTimestamps.has(pkg.package_id))
     } else {
-      // If we can't find the account, return no snippets
       packages = []
     }
   }
 
+  // Convert packages to snippets
   const snippets = packages.map((pkg) => {
     const packageRelease = ctx.db.getPackageReleaseById(
       pkg.latest_package_release_id || "",
     )
+
+    let starTimestamp
+    if (starred_by && starredByAccount) {
+      const accountPackage = ctx.db.accountPackages.find(
+        (ap) =>
+          ap.account_id === starredByAccount.account_id &&
+          ap.package_id === pkg.package_id &&
+          ap.is_starred,
+      )
+      starTimestamp = accountPackage?.updated_at
+    }
+
     if (!packageRelease) {
       return {
         snippet_id: pkg.package_id,
@@ -71,6 +90,7 @@ export default withRouteSpec({
         compiled_js: "",
         created_at: pkg.created_at,
         updated_at: pkg.updated_at,
+        starred_at: starTimestamp, // Add star timestamp
         star_count: ctx.db.getStarCount(pkg.package_id),
         is_starred: ctx.auth
           ? ctx.db.hasStarred(ctx.auth.account_id, pkg.package_id)
@@ -81,6 +101,7 @@ export default withRouteSpec({
         is_unlisted: pkg.is_unlisted || false,
       }
     }
+
     const packageFiles = ctx.db.getPackageFilesByReleaseId(
       packageRelease.package_release_id,
     )
@@ -88,12 +109,8 @@ export default withRouteSpec({
       (file: { file_path: string }) =>
         file.file_path === "index.ts" || file.file_path === "index.tsx",
     )
-    const starCount = ctx.db.getStarCount(pkg.package_id)
-    const isStarred = ctx.auth
-      ? ctx.db.hasStarred(ctx.auth.account_id, pkg.package_id)
-      : false
 
-    return {
+    const snippet = {
       snippet_id: pkg.package_id,
       package_release_id: pkg.latest_package_release_id || "",
       unscoped_name: pkg.unscoped_name,
@@ -113,13 +130,18 @@ export default withRouteSpec({
         )?.content_text || "",
       created_at: pkg.created_at,
       updated_at: pkg.updated_at,
-      star_count: starCount,
-      is_starred: isStarred,
+      starred_at: starTimestamp, // Add star timestamp
+      star_count: ctx.db.getStarCount(pkg.package_id),
+      is_starred: ctx.auth
+        ? ctx.db.hasStarred(ctx.auth.account_id, pkg.package_id)
+        : false,
       version: pkg.latest_version || "0.0.1",
       is_private: pkg.is_private || false,
       is_public: pkg.is_public || true,
       is_unlisted: pkg.is_unlisted || false,
     }
+
+    return snippet
   })
 
   return ctx.json({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "type": "module",
   "repository": {
     "type": "git",
@@ -18,7 +18,7 @@
     "playwright": "bunx playwright test",
     "playwright:update": "bunx playwright test --update-snapshots",
     "start:playwright-server": "bun run build:fake-api && vite --port 5177",
-    "dev": "bun run build:fake-api && AUTOLOAD_SNIPPETS=true vite",
+    "dev": "bun run build:fake-api && AUTOLOAD_PACKAGES=true vite",
     "dev:registry": "SNIPPETS_API_URL=http://localhost:3100 vite",
     "build": "bun run generate-images && bun run generate-sitemap && bun run build:fake-api && tsc -b && vite build",
     "preview": "vite preview",
@@ -120,9 +120,11 @@
     "react-hook-form": "^7.53.0",
     "react-hot-toast": "^2.5.2",
     "react-intersection-observer": "^9.14.1",
+    "react-markdown": "^10.1.0",
     "react-query": "^3.39.3",
     "react-resizable-panels": "^2.1.3",
     "recharts": "^2.12.7",
+    "remark-gfm": "^4.0.1",
     "rollup-plugin-visualizer": "^5.12.0",
     "sitemap": "^8.0.0",
     "sonner": "^1.5.0",
@@ -140,9 +142,10 @@
     "@babel/standalone": "^7.26.2",
     "@biomejs/biome": "^1.9.2",
     "@playwright/test": "^1.48.0",
+    "@tailwindcss/typography": "^0.5.16",
     "@tscircuit/core": "^0.0.370",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "^0.0.361",
+    "@tscircuit/runframe": "^0.0.370",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",

package/src/ContextProviders.tsx

@@ -1,12 +1,67 @@
 import { QueryClient, QueryClientProvider } from "react-query"
 import { HelmetProvider } from "react-helmet-async"
+import { useEffect } from "react"
+import { useGlobalStore } from "./hooks/use-global-store"
+import { posthog } from "./lib/posthog"
+
+const staffGithubUsernames = [
+  "imrishabh18",
+  "seveibar",
+  "testuser",
+  ...(import.meta.env.VITE_STAFF_GITHUB_USERNAMES?.split(",") || []),
+]
 
 const queryClient = new QueryClient()
 
+const isInternalGithubUser = (githubUsername?: string | null) => {
+  if (!githubUsername) return false
+  return staffGithubUsernames.some(
+    (internalGithubUsername: string) =>
+      internalGithubUsername.toLowerCase() === githubUsername.toLowerCase(),
+  )
+}
+
+function PostHogIdentifier() {
+  const session = useGlobalStore((s) => s.session)
+
+  useEffect(() => {
+    if (!posthog.__loaded) {
+      const checkInterval = setInterval(() => {
+        if (posthog.__loaded) {
+          clearInterval(checkInterval)
+          identifyUser()
+        }
+      }, 100)
+      return () => clearInterval(checkInterval)
+    }
+
+    const identifyUser = async () => {
+      try {
+        const githubUsername = session?.github_username
+
+        if (isInternalGithubUser(githubUsername)) {
+          posthog.identify(session?.github_username, {
+            is_tscircuit_staff: true,
+          })
+        }
+      } catch (error) {
+        // Error handling silently fails
+      }
+    }
+
+    identifyUser()
+  }, [session])
+
+  return null
+}
+
 export const ContextProviders = ({ children }: any) => {
   return (
     <QueryClientProvider client={queryClient}>
-      <HelmetProvider>{children}</HelmetProvider>
+      <HelmetProvider>
+        <PostHogIdentifier />
+        {children}
+      </HelmetProvider>
     </QueryClientProvider>
   )
 }

package/src/components/Analytics.tsx

@@ -1,11 +1,4 @@
 import { Analytics as VercelAnalytics } from "@vercel/analytics/react"
-import posthog from "posthog-js"
-import CookieConsent from "react-cookie-consent"
-
-posthog.init("phc_htd8AQjSfVEsFCLQMAiUooG4Q0DKBCjqYuQglc9V3Wo", {
-  api_host: "https://postpig.tscircuit.com",
-  person_profiles: "always",
-})
 
 export const Analytics = () => {
   return (

package/src/components/CodeEditor.tsx

@@ -33,6 +33,9 @@ import React from "@types/react/jsx-runtime"
 import { Circuit, createUseComponent } from "@tscircuit/core"
 import type { CommonLayoutProps } from "@tscircuit/props"
 `
+import { getSingletonHighlighter, Highlighter } from "shiki"
+import { useShikiHighlighter } from "@/hooks/use-shiki-highlighter"
+
 export const CodeEditor = ({
   onCodeChange,
   onDtsChange,
@@ -58,6 +61,8 @@ export const CodeEditor = ({
   const apiUrl = useSnippetsBaseApiUrl()
   const codeCompletionApi = useCodeCompletionApi()
 
+  const { highlighter, isLoading } = useShikiHighlighter()
+
   const [cursorPosition, setCursorPosition] = useState<number | null>(null)
   const [code, setCode] = useState(initialCode)
 
@@ -256,32 +261,33 @@ export const CodeEditor = ({
             tsSync(),
             tsLinter(),
             autocompletion({ override: [tsAutocomplete()] }),
-            tsHover(),
             hoverTooltip((view, pos) => {
-              const line = view.state.doc.lineAt(pos)
-              const lineStart = line.from
-              const lineEnd = line.to
-              const lineText = view.state.sliceDoc(lineStart, lineEnd)
-              const matches = Array.from(
-                lineText.matchAll(TSCI_PACKAGE_PATTERN),
-              )
-
-              for (const match of matches) {
-                if (match.index !== undefined) {
-                  const start = lineStart + match.index
-                  const end = start + match[0].length
-                  if (pos >= start && pos <= end) {
-                    return {
-                      pos: start,
-                      end: end,
-                      above: true,
-                      create() {
-                        const dom = document.createElement("div")
-                        dom.textContent = "Ctrl/Cmd+Click to open snippet"
-                        return { dom }
-                      },
-                    }
-                  }
+              const facet = view.state.facet(tsFacet)
+              if (!facet) return null
+
+              const { env, path } = facet
+              const info = env.languageService.getQuickInfoAtPosition(path, pos)
+              if (!info) return null
+
+              const start = info.textSpan.start
+              const end = start + info.textSpan.length
+              const content = ts.displayPartsToString(info.displayParts || [])
+
+              const dom = document.createElement("div")
+              if (highlighter) {
+                dom.innerHTML = highlighter.codeToHtml(content, {
+                  lang: "typescript",
+                  themes: {
+                    light: "github-light",
+                    dark: "github-dark",
+                  },
+                })
+
+                return {
+                  pos: start,
+                  end,
+                  above: true,
+                  create: () => ({ dom }),
                 }
               }
               return null
@@ -321,10 +327,21 @@ export const CodeEditor = ({
               },
             }),
             EditorView.theme({
-              ".cm-content .cm-underline": {
-                textDecoration: "underline",
-                textDecorationColor: "rgba(0, 0, 255, 0.3)",
-                cursor: "pointer",
+              ".shiki": {
+                maxWidth: "600px",
+                padding: "12px",
+                maxHeight: "400px",
+                borderRadius: "0.5rem",
+                backgroundColor: "#fff",
+                color: "#0f172a",
+                border: "1px solid #e2e8f0",
+                boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
+                fontSize: "14px",
+                fontFamily: "monospace",
+                whiteSpace: "pre-wrap",
+                lineHeight: "1.6",
+                overflow: "auto",
+                zIndex: "9999",
               },
             }),
             EditorView.decorations.of((view) => {

package/src/components/SearchComponent.tsx

@@ -48,6 +48,7 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
   const [showResults, setShowResults] = useState(false)
   const axios = useAxios()
   const resultsRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
   const [location] = useLocation()
   const { snippetsBaseApiUrl } = useSnippetsBaseApiUrl()
 
@@ -71,6 +72,11 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
     setShowResults(!!searchQuery)
   }
 
+  // Focus input on mount
+  useEffect(() => {
+    inputRef.current?.focus()
+  }, [])
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -93,6 +99,7 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
   return (
     <form onSubmit={handleSearch} className="relative">
       <Input
+        ref={inputRef}
         type="search"
         placeholder="Search"
         className="pl-4 focus:border-blue-500 placeholder-gray-400 text-sm"

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

@@ -6,6 +6,7 @@ import { Skeleton } from "@/components/ui/skeleton"
 import { usePackageFile, usePackageFileByPath } from "@/hooks/use-package-files"
 import { ShikiCodeViewer } from "./ShikiCodeViewer"
 import { SparklesIcon } from "lucide-react"
+import MarkdownViewer from "./markdown-viewer"
 
 interface PackageFile {
   package_file_id: string
@@ -86,13 +87,13 @@ export default function ImportantFilesView({
         {aiDescription && (
           <div className="mb-6">
             <h3 className="font-semibold text-lg mb-2">Description</h3>
-            <p className="whitespace-pre-wrap">{aiDescription}</p>
+            <MarkdownViewer markdownContent={aiDescription} />
           </div>
         )}
         {aiUsageInstructions && (
           <div>
             <h3 className="font-semibold text-lg mb-2">Instructions</h3>
-            <p className="whitespace-pre-wrap">{aiUsageInstructions}</p>
+            <MarkdownViewer markdownContent={aiUsageInstructions} />
           </div>
         )}
       </div>
@@ -213,10 +214,7 @@ export default function ImportantFilesView({
         {activeTab === "ai" ? (
           renderAiContent()
         ) : activeFilePath && activeFilePath.endsWith(".md") ? (
-          <div className="markdown-content">
-            {/* In a real app, you'd use a markdown renderer here */}
-            <pre className="whitespace-pre-wrap">{activeFileContent}</pre>
-          </div>
+          <MarkdownViewer markdownContent={activeFileContent} />
         ) : activeFilePath &&
           (activeFilePath.endsWith(".js") ||
             activeFilePath.endsWith(".jsx") ||

package/src/components/ViewPackagePage/components/markdown-viewer.tsx

@@ -0,0 +1,37 @@
+import Markdown from "react-markdown"
+import remarkGfm from "remark-gfm"
+
+export default function MarkdownViewer({
+  markdownContent,
+}: {
+  markdownContent: string
+}) {
+  return (
+    <div className="prose dark:prose-invert prose-pre:bg-gray-100 dark:prose-pre:bg-gray-800 prose-code:font-mono markdown-content">
+      <Markdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          code({ node, className, children, ...props }) {
+            const isCodeBlock =
+              className?.includes("language-") || /\n/.test(String(children))
+
+            // Don't use code tags cause of it's backticks not being removed
+            return isCodeBlock ? (
+              <div className="bg-gray-100 dark:bg-gray-800 rounded overflow-auto w-full">
+                <span className="text-gray-800 dark:text-gray-200 font-mono whitespace-pre">
+                  {children}
+                </span>
+              </div>
+            ) : (
+              <span className="bg-gray-100 dark:bg-gray-800 text-gray-800 font-semibold font-mono dark:text-gray-200 px-1 py-0.5 rounded">
+                {children}
+              </span>
+            )
+          },
+        }}
+      >
+        {markdownContent}
+      </Markdown>
+    </div>
+  )
+}

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

@@ -8,9 +8,9 @@ import { Button } from "@/components/ui/button"
 import { useEditPackageDetailsDialog } from "@/components/dialogs/edit-package-details-dialog"
 import { useState, useEffect, useMemo } from "react"
 import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
-import { PackageInfo } from "./sidebar-about-section"
 import { usePackageFile } from "@/hooks/use-package-files"
 import { getLicenseFromLicenseContent } from "@/lib/getLicenseFromLicenseContent"
+import { PackageInfo } from "@/lib/types"
 
 interface MobileSidebarProps {
   isLoading?: boolean