@tscircuit/fake-snippets 0.0.41 → 0.0.43

package/dist/index.d.ts

@@ -258,6 +258,126 @@ declare const orderFileSchema: z.ZodObject<{
     content_bytes: Uint8Array<ArrayBuffer> | null;
 }>;
 type OrderFile = z.infer<typeof orderFileSchema>;
+declare const orderQuoteSchema: z.ZodObject<{
+    order_quote_id: z.ZodString;
+    account_id: z.ZodNullable<z.ZodString>;
+    package_release_id: z.ZodNullable<z.ZodString>;
+    is_completed: z.ZodDefault<z.ZodBoolean>;
+    is_processing: z.ZodDefault<z.ZodBoolean>;
+    vendor_name: z.ZodString;
+    error: z.ZodNullable<z.ZodObject<{
+        error_code: z.ZodString;
+        message: z.ZodString;
+    }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+        error_code: z.ZodString;
+        message: z.ZodString;
+    }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+        error_code: z.ZodString;
+        message: z.ZodString;
+    }, z.ZodTypeAny, "passthrough">>>;
+    has_error: z.ZodDefault<z.ZodBoolean>;
+    created_at: z.ZodString;
+    updated_at: z.ZodString;
+    completed_at: z.ZodNullable<z.ZodString>;
+    quoted_components: z.ZodNullable<z.ZodArray<z.ZodObject<{
+        manufacturer_part_number: z.ZodNullable<z.ZodString>;
+        supplier_part_number: z.ZodNullable<z.ZodString>;
+        quantity: z.ZodDefault<z.ZodNumber>;
+        unit_price: z.ZodDefault<z.ZodNumber>;
+        total_price: z.ZodDefault<z.ZodNumber>;
+        available: z.ZodDefault<z.ZodBoolean>;
+    }, "strip", z.ZodTypeAny, {
+        manufacturer_part_number: string | null;
+        supplier_part_number: string | null;
+        quantity: number;
+        unit_price: number;
+        total_price: number;
+        available: boolean;
+    }, {
+        manufacturer_part_number: string | null;
+        supplier_part_number: string | null;
+        quantity?: number | undefined;
+        unit_price?: number | undefined;
+        total_price?: number | undefined;
+        available?: boolean | undefined;
+    }>, "many">>;
+    bare_pcb_cost: z.ZodDefault<z.ZodNumber>;
+    shipping_options: z.ZodArray<z.ZodObject<{
+        carrier: z.ZodString;
+        service: z.ZodString;
+        cost: z.ZodNumber;
+    }, "strip", z.ZodTypeAny, {
+        carrier: string;
+        service: string;
+        cost: number;
+    }, {
+        carrier: string;
+        service: string;
+        cost: number;
+    }>, "many">;
+    total_cost: z.ZodDefault<z.ZodNumber>;
+}, "strip", z.ZodTypeAny, {
+    error: z.objectOutputType<{
+        error_code: z.ZodString;
+        message: z.ZodString;
+    }, z.ZodTypeAny, "passthrough"> | null;
+    package_release_id: string | null;
+    created_at: string;
+    updated_at: string;
+    account_id: string | null;
+    has_error: boolean;
+    completed_at: string | null;
+    order_quote_id: string;
+    is_completed: boolean;
+    is_processing: boolean;
+    vendor_name: string;
+    quoted_components: {
+        manufacturer_part_number: string | null;
+        supplier_part_number: string | null;
+        quantity: number;
+        unit_price: number;
+        total_price: number;
+        available: boolean;
+    }[] | null;
+    bare_pcb_cost: number;
+    shipping_options: {
+        carrier: string;
+        service: string;
+        cost: number;
+    }[];
+    total_cost: number;
+}, {
+    error: z.objectInputType<{
+        error_code: z.ZodString;
+        message: z.ZodString;
+    }, z.ZodTypeAny, "passthrough"> | null;
+    package_release_id: string | null;
+    created_at: string;
+    updated_at: string;
+    account_id: string | null;
+    completed_at: string | null;
+    order_quote_id: string;
+    vendor_name: string;
+    quoted_components: {
+        manufacturer_part_number: string | null;
+        supplier_part_number: string | null;
+        quantity?: number | undefined;
+        unit_price?: number | undefined;
+        total_price?: number | undefined;
+        available?: boolean | undefined;
+    }[] | null;
+    shipping_options: {
+        carrier: string;
+        service: string;
+        cost: number;
+    }[];
+    has_error?: boolean | undefined;
+    is_completed?: boolean | undefined;
+    is_processing?: boolean | undefined;
+    bare_pcb_cost?: number | undefined;
+    total_cost?: number | undefined;
+}>;
+type OrderQuote = z.infer<typeof orderQuoteSchema>;
 declare const accountPackageSchema: z.ZodObject<{
     account_package_id: z.ZodString;
     account_id: z.ZodString;
@@ -737,10 +857,16 @@ declare const createDatabase: ({ seed }?: {
         }[];
         total_cost: number;
     }[];
-}, "addOrder" | "getOrderById" | "getOrderFilesByOrderId" | "getJlcpcbOrderStatesByOrderId" | "getJlcpcbOrderStepRunsByJlcpcbOrderStateId" | "updateOrder" | "addJlcpcbOrderState" | "updateJlcpcbOrderState" | "addOrderFile" | "getOrderFileById" | "addAccount" | "addAccountPackage" | "getAccountPackageById" | "updateAccountPackage" | "deleteAccountPackage" | "addSnippet" | "getLatestSnippets" | "getTrendingSnippets" | "getPackagesByAuthor" | "getSnippetByAuthorAndName" | "updateSnippet" | "getSnippetById" | "searchSnippets" | "deleteSnippet" | "addSession" | "getSessions" | "createLoginPage" | "getLoginPage" | "updateLoginPage" | "getAccount" | "updateAccount" | "createSession" | "addStar" | "removeStar" | "hasStarred" | "addPackage" | "updatePackage" | "getPackageById" | "getPackageReleaseById" | "addPackageRelease" | "updatePackageRelease" | "deletePackageFile" | "addPackageFile" | "updatePackageFile" | "getStarCount" | "getPackageFilesByReleaseId"> & {
+}, "addOrder" | "getOrderById" | "getOrderFilesByOrderId" | "addOrderQuote" | "getOrderQuoteById" | "getJlcpcbOrderStatesByOrderId" | "getJlcpcbOrderStepRunsByJlcpcbOrderStateId" | "updateOrder" | "addJlcpcbOrderState" | "updateJlcpcbOrderState" | "addOrderFile" | "getOrderFileById" | "addAccount" | "addAccountPackage" | "getAccountPackageById" | "updateAccountPackage" | "deleteAccountPackage" | "addSnippet" | "getLatestSnippets" | "getTrendingSnippets" | "getPackagesByAuthor" | "getSnippetByAuthorAndName" | "updateSnippet" | "getSnippetById" | "searchSnippets" | "deleteSnippet" | "addSession" | "getSessions" | "createLoginPage" | "getLoginPage" | "updateLoginPage" | "getAccount" | "updateAccount" | "createSession" | "addStar" | "removeStar" | "hasStarred" | "addPackage" | "updatePackage" | "getPackageById" | "getPackageReleaseById" | "addPackageRelease" | "updatePackageRelease" | "deletePackageFile" | "addPackageFile" | "updatePackageFile" | "getStarCount" | "getPackageFilesByReleaseId"> & {
     addOrder: (order: Omit<Order, "order_id">) => Order;
     getOrderById: (orderId: string) => Order | undefined;
     getOrderFilesByOrderId: (orderId: string) => OrderFile[];
+    addOrderQuote: ({ account_id, package_release_id, vendor_name, }: {
+        account_id: string;
+        package_release_id: string;
+        vendor_name: string;
+    }) => string;
+    getOrderQuoteById: (orderQuoteId: string) => OrderQuote | undefined;
     getJlcpcbOrderStatesByOrderId: (orderId: string) => JlcpcbOrderState | undefined;
     getJlcpcbOrderStepRunsByJlcpcbOrderStateId: (jlcpcbOrderStateId: string) => JlcpcbOrderStepRun[];
     updateOrder: (orderId: string, updates: Partial<Order>) => void;
@@ -1013,10 +1139,16 @@ declare const createDatabase: ({ seed }?: {
         }[];
         total_cost: number;
     }[];
-}, "addOrder" | "getOrderById" | "getOrderFilesByOrderId" | "getJlcpcbOrderStatesByOrderId" | "getJlcpcbOrderStepRunsByJlcpcbOrderStateId" | "updateOrder" | "addJlcpcbOrderState" | "updateJlcpcbOrderState" | "addOrderFile" | "getOrderFileById" | "addAccount" | "addAccountPackage" | "getAccountPackageById" | "updateAccountPackage" | "deleteAccountPackage" | "addSnippet" | "getLatestSnippets" | "getTrendingSnippets" | "getPackagesByAuthor" | "getSnippetByAuthorAndName" | "updateSnippet" | "getSnippetById" | "searchSnippets" | "deleteSnippet" | "addSession" | "getSessions" | "createLoginPage" | "getLoginPage" | "updateLoginPage" | "getAccount" | "updateAccount" | "createSession" | "addStar" | "removeStar" | "hasStarred" | "addPackage" | "updatePackage" | "getPackageById" | "getPackageReleaseById" | "addPackageRelease" | "updatePackageRelease" | "deletePackageFile" | "addPackageFile" | "updatePackageFile" | "getStarCount" | "getPackageFilesByReleaseId"> & {
+}, "addOrder" | "getOrderById" | "getOrderFilesByOrderId" | "addOrderQuote" | "getOrderQuoteById" | "getJlcpcbOrderStatesByOrderId" | "getJlcpcbOrderStepRunsByJlcpcbOrderStateId" | "updateOrder" | "addJlcpcbOrderState" | "updateJlcpcbOrderState" | "addOrderFile" | "getOrderFileById" | "addAccount" | "addAccountPackage" | "getAccountPackageById" | "updateAccountPackage" | "deleteAccountPackage" | "addSnippet" | "getLatestSnippets" | "getTrendingSnippets" | "getPackagesByAuthor" | "getSnippetByAuthorAndName" | "updateSnippet" | "getSnippetById" | "searchSnippets" | "deleteSnippet" | "addSession" | "getSessions" | "createLoginPage" | "getLoginPage" | "updateLoginPage" | "getAccount" | "updateAccount" | "createSession" | "addStar" | "removeStar" | "hasStarred" | "addPackage" | "updatePackage" | "getPackageById" | "getPackageReleaseById" | "addPackageRelease" | "updatePackageRelease" | "deletePackageFile" | "addPackageFile" | "updatePackageFile" | "getStarCount" | "getPackageFilesByReleaseId"> & {
     addOrder: (order: Omit<Order, "order_id">) => Order;
     getOrderById: (orderId: string) => Order | undefined;
     getOrderFilesByOrderId: (orderId: string) => OrderFile[];
+    addOrderQuote: ({ account_id, package_release_id, vendor_name, }: {
+        account_id: string;
+        package_release_id: string;
+        vendor_name: string;
+    }) => string;
+    getOrderQuoteById: (orderQuoteId: string) => OrderQuote | undefined;
     getJlcpcbOrderStatesByOrderId: (orderId: string) => JlcpcbOrderState | undefined;
     getJlcpcbOrderStepRunsByJlcpcbOrderStateId: (jlcpcbOrderStateId: string) => JlcpcbOrderStepRun[];
     updateOrder: (orderId: string, updates: Partial<Order>) => void;

package/dist/index.js

@@ -2020,6 +2020,42 @@ var initializer = combine(databaseSchema.parse({}), (set, get) => ({
     const state = get();
     return state.orderFiles.filter((file) => file.order_id === orderId);
   },
+  addOrderQuote: ({
+    account_id,
+    package_release_id,
+    vendor_name
+  }) => {
+    const newOrderQuote = {
+      order_quote_id: `order_quote_${get().idCounter + 1}`,
+      account_id,
+      package_release_id,
+      created_at: (/* @__PURE__ */ new Date()).toISOString(),
+      updated_at: (/* @__PURE__ */ new Date()).toISOString(),
+      completed_at: null,
+      error: null,
+      has_error: false,
+      is_completed: false,
+      is_processing: true,
+      vendor_name,
+      quoted_components: [],
+      bare_pcb_cost: 0,
+      shipping_options: [],
+      total_cost: 0
+    };
+    set((state) => {
+      return {
+        orderQuotes: [...state.orderQuotes, newOrderQuote],
+        idCounter: state.idCounter + 1
+      };
+    });
+    return newOrderQuote.order_quote_id;
+  },
+  getOrderQuoteById: (orderQuoteId) => {
+    const state = get();
+    return state.orderQuotes.find(
+      (quote) => quote.order_quote_id === orderQuoteId
+    );
+  },
   getJlcpcbOrderStatesByOrderId: (orderId) => {
     const state = get();
     return state.jlcpcbOrderState.find((state2) => state2.order_id === orderId);

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

@@ -6,11 +6,12 @@ import { combine } from "zustand/middleware"
 import {
   type Account,
   type AccountPackage,
-  JlcpcbOrderState,
-  JlcpcbOrderStepRun,
+  type JlcpcbOrderState,
+  type JlcpcbOrderStepRun,
   type LoginPage,
   type Order,
   type OrderFile,
+  OrderQuote,
   type Package,
   type PackageFile,
   type PackageRelease,
@@ -51,6 +52,47 @@ const initializer = combine(databaseSchema.parse({}), (set, get) => ({
     const state = get()
     return state.orderFiles.filter((file) => file.order_id === orderId)
   },
+  addOrderQuote: ({
+    account_id,
+    package_release_id,
+    vendor_name,
+  }: {
+    account_id: string
+    package_release_id: string
+    vendor_name: string
+  }): string => {
+    // Details for the order quote will be updated by the job with the cost
+    const newOrderQuote = {
+      order_quote_id: `order_quote_${get().idCounter + 1}`,
+      account_id,
+      package_release_id,
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+      completed_at: null,
+      error: null,
+      has_error: false,
+      is_completed: false,
+      is_processing: true,
+      vendor_name,
+      quoted_components: [],
+      bare_pcb_cost: 0,
+      shipping_options: [],
+      total_cost: 0,
+    }
+    set((state) => {
+      return {
+        orderQuotes: [...state.orderQuotes, newOrderQuote],
+        idCounter: state.idCounter + 1,
+      }
+    })
+    return newOrderQuote.order_quote_id
+  },
+  getOrderQuoteById: (orderQuoteId: string): OrderQuote | undefined => {
+    const state = get()
+    return state.orderQuotes.find(
+      (quote) => quote.order_quote_id === orderQuoteId,
+    )
+  },
   getJlcpcbOrderStatesByOrderId: (
     orderId: string,
   ): JlcpcbOrderState | undefined => {

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

@@ -0,0 +1,26 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "session",
+  jsonBody: z.object({
+    package_release_id: z.string(),
+    vendor_name: z.string(),
+  }),
+  jsonResponse: z.object({
+    order_quote_id: z.string(),
+  }),
+})(async (req, ctx) => {
+  const { package_release_id, vendor_name } = req.jsonBody
+
+  const orderQuoteId = ctx.db.addOrderQuote({
+    account_id: ctx.auth.account_id,
+    package_release_id,
+    vendor_name,
+  })
+
+  return ctx.json({
+    order_quote_id: orderQuoteId,
+  })
+})

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

@@ -0,0 +1,30 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "session",
+  jsonBody: z.object({
+    package_release_id: z.string(),
+  }),
+  jsonResponse: z.object({
+    order_quote_ids: z.array(z.string()),
+  }),
+})(async (req, ctx) => {
+  const { package_release_id } = req.jsonBody
+  const vendorNames = ["JLCPCB", "MacroFab"]
+
+  let orderQuoteIds = []
+  for (const vendorName of vendorNames) {
+    const orderQuoteId = ctx.db.addOrderQuote({
+      account_id: ctx.auth.account_id,
+      package_release_id,
+      vendor_name: vendorName,
+    })
+    orderQuoteIds.push(orderQuoteId)
+  }
+
+  return ctx.json({
+    order_quote_ids: orderQuoteIds,
+  })
+})

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

@@ -0,0 +1,32 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+import { orderQuoteSchema } from "fake-snippets-api/lib/db/schema"
+
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "session",
+  jsonBody: z.object({
+    order_quote_id: z.string(),
+  }),
+  jsonResponse: z.object({
+    order_quote: orderQuoteSchema.optional(),
+    error: z.string().optional(),
+  }),
+})(async (req, ctx) => {
+  const { order_quote_id } = req.jsonBody
+
+  const orderQuote = ctx.db.getOrderQuoteById(order_quote_id)
+
+  if (!orderQuote) {
+    return ctx.json(
+      {
+        error: "Order quote not found",
+      },
+      { status: 404 },
+    )
+  }
+
+  return ctx.json({
+    order_quote: orderQuote,
+  })
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "type": "module",
   "repository": {
     "type": "git",
@@ -134,9 +134,9 @@
     "@babel/standalone": "^7.26.2",
     "@biomejs/biome": "^1.9.2",
     "@playwright/test": "^1.48.0",
-    "@tscircuit/core": "^0.0.365",
+    "@tscircuit/core": "^0.0.370",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "^0.0.316",
+    "@tscircuit/runframe": "^0.0.330",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",

package/src/components/EditorNav.tsx

@@ -336,13 +336,16 @@ export default function EditorNav({
                   <File className="mr-2 h-3 w-3" />
                   View Files
                 </DropdownMenuItem>
-                <DropdownMenuItem
-                  className="text-xs"
-                  onClick={() => openupdateDescriptionDialog()}
-                >
-                  <FilePenLine className="mr-2 h-3 w-3" />
-                  Edit Description
-                </DropdownMenuItem>
+                {snippet?.owner_name === session?.github_username && (
+                  <DropdownMenuItem
+                    className="text-xs"
+                    onClick={() => openupdateDescriptionDialog()}
+                  >
+                    <FilePenLine className="mr-2 h-3 w-3" />
+                    Edit Description
+                  </DropdownMenuItem>
+                )}
+
                 <DropdownMenuItem
                   className="text-xs"
                   onClick={() => openViewTsFilesDialog()}
@@ -350,60 +353,67 @@ export default function EditorNav({
                   <File className="mr-2 h-3 w-3" />
                   [Debug] View TS Files
                 </DropdownMenuItem>
-                <DropdownMenuSub>
-                  <DropdownMenuSubTrigger
-                    className="text-xs"
-                    disabled={isChangingType || hasUnsavedChanges}
-                  >
-                    <Edit2 className="mr-2 h-3 w-3" />
-                    {isChangingType ? "Changing..." : "Change Type"}
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuSubContent>
-                    <DropdownMenuItem
-                      className="text-xs"
-                      disabled={currentType === "board" || isChangingType}
-                      onClick={() => handleTypeChange("board")}
-                    >
-                      Board {currentType === "board" && "✓"}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      className="text-xs"
-                      disabled={currentType === "package" || isChangingType}
-                      onClick={() => handleTypeChange("package")}
-                    >
-                      Module {currentType === "package" && "✓"}
-                    </DropdownMenuItem>
-                  </DropdownMenuSubContent>
-                </DropdownMenuSub>
-                <DropdownMenuSub>
-                  <DropdownMenuSubTrigger className="text-xs">
-                    <Edit2 className="mr-2 h-3 w-3" />
-                    Change Package Visibility
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuSubContent>
+                {snippet?.owner_name === session?.github_username && (
+                  <>
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger
+                        className="text-xs"
+                        disabled={isChangingType || hasUnsavedChanges}
+                      >
+                        <Edit2 className="mr-2 h-3 w-3" />
+                        {isChangingType ? "Changing..." : "Change Type"}
+                      </DropdownMenuSubTrigger>
+                      <DropdownMenuSubContent>
+                        <DropdownMenuItem
+                          className="text-xs"
+                          disabled={currentType === "board" || isChangingType}
+                          onClick={() => handleTypeChange("board")}
+                        >
+                          Board {currentType === "board" && "✓"}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          className="text-xs"
+                          disabled={currentType === "package" || isChangingType}
+                          onClick={() => handleTypeChange("package")}
+                        >
+                          Module {currentType === "package" && "✓"}
+                        </DropdownMenuItem>
+                      </DropdownMenuSubContent>
+                    </DropdownMenuSub>
+                    <DropdownMenuSub>
+                      <DropdownMenuSubTrigger className="text-xs">
+                        <Edit2 className="mr-2 h-3 w-3" />
+                        Change Package Visibility
+                      </DropdownMenuSubTrigger>
+                      <DropdownMenuSubContent>
+                        <DropdownMenuItem
+                          className="text-xs"
+                          disabled={isPrivate}
+                          onClick={() => updatePackageVisibilityToPrivate(true)}
+                        >
+                          Private {isPrivate && "✓"}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          className="text-xs"
+                          disabled={!isPrivate}
+                          onClick={() =>
+                            updatePackageVisibilityToPrivate(false)
+                          }
+                        >
+                          Public {!isPrivate && "✓"}
+                        </DropdownMenuItem>
+                      </DropdownMenuSubContent>
+                    </DropdownMenuSub>
                     <DropdownMenuItem
-                      className="text-xs"
-                      disabled={isPrivate}
-                      onClick={() => updatePackageVisibilityToPrivate(true)}
+                      className="text-xs text-red-600"
+                      onClick={() => openDeleteDialog()}
                     >
-                      Private {isPrivate && "✓"}
+                      <Trash2 className="mr-2 h-3 w-3" />
+                      Delete Snippet
                     </DropdownMenuItem>
-                    <DropdownMenuItem
-                      className="text-xs"
-                      disabled={!isPrivate}
-                      onClick={() => updatePackageVisibilityToPrivate(false)}
-                    >
-                      Public {!isPrivate && "✓"}
-                    </DropdownMenuItem>
-                  </DropdownMenuSubContent>
-                </DropdownMenuSub>
-                <DropdownMenuItem
-                  className="text-xs text-red-600"
-                  onClick={() => openDeleteDialog()}
-                >
-                  <Trash2 className="mr-2 h-3 w-3" />
-                  Delete Snippet
-                </DropdownMenuItem>
+                  </>
+                )}
+
                 <DropdownMenuItem className="text-xs text-gray-500" disabled>
                   @tscircuit/core@{tscircuitCorePkg.version}
                 </DropdownMenuItem>

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

@@ -222,7 +222,12 @@ export default function ImportantFilesView({
             activeFilePath.endsWith(".jsx") ||
             activeFilePath.endsWith(".ts") ||
             activeFilePath.endsWith(".tsx")) ? (
-          <ShikiCodeViewer code={activeFileContent} filePath={activeFilePath} />
+          <div className="overflow-x-auto">
+            <ShikiCodeViewer
+              code={activeFileContent}
+              filePath={activeFilePath}
+            />
+          </div>
         ) : (
           <pre className="whitespace-pre-wrap">{activeFileContent}</pre>
         )}

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

@@ -69,17 +69,20 @@ export default function PackageHeader({
   return (
     <header className="bg-white border-b border-gray-200 py-4">
       <div className="max-w-[1200px] mx-auto px-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center">
+        <div className="flex items-center justify-between flex-wrap gap-y-2">
+          <div className="flex items-center min-w-0 flex-wrap">
             {author && packageName ? (
               <>
-                <h1 className="text-xl font-bold mr-2">
-                  <Link href={`/${author}`} className="text-blue-600">
+                <h1 className="text-lg md:text-xl font-bold mr-2 break-words">
+                  <Link
+                    href={`/${author}`}
+                    className="text-blue-600 hover:underline"
+                  >
                     {author}
                   </Link>
                   <span className="px-1 text-gray-500">/</span>
                   <Link
-                    className="text-blue-600"
+                    className="text-blue-600 hover:underline"
                     href={`/${author}/${packageName}`}
                   >
                     {packageName}
@@ -117,6 +120,37 @@ export default function PackageHeader({
               )}
             </Button>
 
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleForkClick}
+              disabled={
+                isCurrentUserAuthor || isForkLoading || !packageInfo?.package_id
+              }
+            >
+              <GitFork className="w-4 h-4 mr-2" />
+              Fork
+            </Button>
+          </div>
+          {/* Mobile buttons - shown below md breakpoint */}
+          <div className="flex items-center space-x-2 md:hidden w-full justify-end pt-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleStarClick}
+              disabled={isStarLoading || !packageInfo?.name}
+            >
+              <Star
+                className={`w-4 h-4 mr-2 ${starData?.is_starred ? "fill-yellow-500 text-yellow-500" : ""}`}
+              />
+              {starData?.is_starred ? "Starred" : "Star"}
+              {(starData?.star_count ?? 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">
+                  {starData?.star_count}
+                </span>
+              )}
+            </Button>
+
             <Button
               variant="outline"
               size="sm"

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

@@ -201,6 +201,7 @@ export default function RepoPageContent({
           {/* Sidebar - Hidden on mobile, shown on md and up */}
           <div className="hidden md:block md:w-[296px] flex-shrink-0">
             <Sidebar
+              packageInfo={packageInfo}
               isLoading={!packageInfo}
               onViewChange={(view) => {
                 setActiveView(view)