@mercurjs/vendor 2.2.0-canary.5 → 2.2.0-canary.50

package/dist/{[id]-EDPXLUMQ.js → [id]-32GAQIRV.js}

@@ -4,76 +4,77 @@ import {
 import "./chunk-4F5GP7J7.js";
 import {
   useDeletePriceListAction
-} from "./chunk-VRTUSO6M.js";
+} from "./chunk-JLLFEA23.js";
 import {
   getPriceListStatus
 } from "./chunk-XRNDVICA.js";
 import "./chunk-6IJMSVC6.js";
 import {
   useProductTableColumns
-} from "./chunk-VB3FKUFH.js";
-import "./chunk-FYA5XFSG.js";
+} from "./chunk-WQQMCV7M.js";
+import "./chunk-7HLAOLG7.js";
 import {
   useProductTableQuery
-} from "./chunk-H6LZ77GX.js";
-import "./chunk-FQERBIVS.js";
+} from "./chunk-QGZH3D2P.js";
+import "./chunk-FWPGOIFA.js";
 import {
   useProductTableFilters
-} from "./chunk-A3XYCMSV.js";
+} from "./chunk-OOK3BD5Z.js";
 import "./chunk-DB6ANJBO.js";
 import "./chunk-PHOCVOZ5.js";
+import "./chunk-SMQT3ZNO.js";
+import "./chunk-FQERBIVS.js";
 import {
   _DataTable,
   useDataTable
-} from "./chunk-AIF2KTEE.js";
+} from "./chunk-W3UHAQCV.js";
 import "./chunk-YN3FGNJM.js";
-import "./chunk-KAZ5BYTQ.js";
-import "./chunk-3EF54XFY.js";
-import "./chunk-SMQT3ZNO.js";
+import "./chunk-KCHYLLVG.js";
+import "./chunk-634XVU3D.js";
 import {
   TwoColumnPage
 } from "./chunk-YV6MK4PZ.js";
-import "./chunk-LRD242C7.js";
-import "./chunk-QHQWEERJ.js";
 import "./chunk-THHRRYRS.js";
-import "./chunk-F5H5JZQZ.js";
+import "./chunk-LRD242C7.js";
+import "./chunk-VYSB4CTB.js";
 import "./chunk-WIYFXWRI.js";
 import {
   TwoColumnPageSkeleton
 } from "./chunk-INNFZYX2.js";
-import "./chunk-YIZK67RW.js";
-import "./chunk-F4OJN2F2.js";
-import "./chunk-LRARA622.js";
-import "./chunk-M6N4ISXL.js";
-import "./chunk-S7EKBD2C.js";
-import "./chunk-VXMOPVRH.js";
-import "./chunk-VV6IKGCN.js";
-import {
-  priceListsQueryKeys,
-  usePriceList,
-  usePriceListLinkProducts
-} from "./chunk-VIJRMTAH.js";
-import "./chunk-BOZJOOGW.js";
-import "./chunk-LWJF63JW.js";
-import "./chunk-T6LHVNWO.js";
-import "./chunk-4S6XGIC6.js";
-import "./chunk-QT7YFHCA.js";
-import "./chunk-IQWK723D.js";
-import "./chunk-UORPTGV2.js";
-import "./chunk-ZDQSWX6W.js";
-import "./chunk-VXWN37PT.js";
-import "./chunk-NJZQGGY3.js";
-import "./chunk-NBPMNUKZ.js";
-import "./chunk-L2SUH6H5.js";
-import "./chunk-3B34B2M2.js";
 import {
   ActionMenu
 } from "./chunk-BDGZ4EQO.js";
 import "./chunk-LAVHRER2.js";
+import "./chunk-QHQWEERJ.js";
 import "./chunk-Y7QKP6QU.js";
+import "./chunk-BQHVM46E.js";
+import "./chunk-QIF4QE7T.js";
+import "./chunk-VE6GRIIN.js";
+import "./chunk-7MARNXFG.js";
+import "./chunk-MNHP6YRC.js";
+import "./chunk-NTJ3BMOE.js";
+import {
+  priceListsQueryKeys,
+  usePriceList,
+  usePriceListLinkProducts
+} from "./chunk-CLS6PNZY.js";
+import "./chunk-JIXW4WHZ.js";
+import "./chunk-GZ4KTAWS.js";
+import "./chunk-PUAWN7SS.js";
+import "./chunk-4NADEZZQ.js";
+import "./chunk-XWHHBJGS.js";
+import "./chunk-5NVY7JZC.js";
+import "./chunk-KIURBTC4.js";
+import "./chunk-4EAC3GT7.js";
+import "./chunk-JR7AABT5.js";
+import "./chunk-ZQCCVCHB.js";
+import "./chunk-MABIMRLS.js";
+import "./chunk-ULEW54ED.js";
+import "./chunk-UEPUKWD7.js";
+import "./chunk-JJP6AKMV.js";
 import {
   useProducts
-} from "./chunk-ZNG4GXMP.js";
+} from "./chunk-744GLNZW.js";
 import "./chunk-A5DJIOHN.js";
 import {
   queryClient
@@ -81,16 +82,21 @@ import {
 import "./chunk-ZA2KFUFR.js";
 import {
   fetchQuery
-} from "./chunk-RIN4CBRB.js";
+} from "./chunk-LXZXXOJ3.js";
 import "./chunk-NBMM2TZK.js";
 
 // src/pages/price-lists/[id]/loader.tsx
-var pricingDetailQuery = (id) => ({
-  queryKey: priceListsQueryKeys.detail(id),
-  queryFn: async () => await fetchQuery(`/vendor/price-lists/${id}`, {
-    method: "GET"
-  })
-});
+import { getLinkQuery } from "@mercurjs/dashboard-shared";
+var pricingDetailQuery = (id) => {
+  const query = getLinkQuery("price_list");
+  return {
+    queryKey: priceListsQueryKeys.detail(id, query),
+    queryFn: async () => await fetchQuery(`/vendor/price-lists/${id}`, {
+      method: "GET",
+      query
+    })
+  };
+};
 var loader = async ({ params }) => {
   const id = params.id;
   const query = pricingDetailQuery(id);
@@ -100,11 +106,13 @@ var loader = async ({ params }) => {
 // src/pages/price-lists/[id]/price-list-detail-page.tsx
 import { Children } from "react";
 import { useLoaderData, useParams } from "react-router-dom";
+import { useLinkQuery, WidgetZone } from "@mercurjs/dashboard-shared";
 
 // src/pages/price-lists/[id]/_components/price-list-configuration-section/price-list-configuration-section.tsx
 import { PencilSquare } from "@medusajs/icons";
 import { Container, Heading } from "@medusajs/ui";
 import { useTranslation } from "react-i18next";
+import { DisplayExtensionZone } from "@mercurjs/dashboard-shared";
 import { jsx, jsxs } from "react/jsx-runtime";
 var PriceListConfigurationSection = ({
   priceList
@@ -137,6 +145,14 @@ var PriceListConfigurationSection = ({
         startsAt: priceList.starts_at,
         showTime: true
       }
+    ),
+    /* @__PURE__ */ jsx(
+      DisplayExtensionZone,
+      {
+        model: "price_list",
+        zone: "configuration",
+        data: priceList
+      }
     )
   ] });
 };
@@ -145,6 +161,7 @@ var PriceListConfigurationSection = ({
 import { PencilSquare as PencilSquare2, Trash } from "@medusajs/icons";
 import { Container as Container2, Heading as Heading2, StatusBadge, Text } from "@medusajs/ui";
 import { useTranslation as useTranslation2 } from "react-i18next";
+import { DisplayExtensionZone as DisplayExtensionZone2, DisplayField } from "@mercurjs/dashboard-shared";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var PriceListGeneralSection = ({
   priceList
@@ -156,9 +173,9 @@ var PriceListGeneralSection = ({
   const type = priceList.type === "sale" ? t("priceLists.fields.type.options.sale.label") : t("priceLists.fields.type.options.override.label");
   return /* @__PURE__ */ jsxs2(Container2, { className: "divide-y p-0", children: [
     /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ jsx2(Heading2, { children: priceList.title }),
+      /* @__PURE__ */ jsx2(DisplayField, { model: "price_list", zone: "general", id: "title", data: priceList, children: /* @__PURE__ */ jsx2(Heading2, { children: priceList.title }) }),
       /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-4", children: [
-        /* @__PURE__ */ jsx2(StatusBadge, { color, children: text }),
+        /* @__PURE__ */ jsx2(DisplayField, { model: "price_list", zone: "general", id: "status", data: priceList, children: /* @__PURE__ */ jsx2(StatusBadge, { color, children: text }) }),
         /* @__PURE__ */ jsx2(
           ActionMenu,
           {
@@ -186,18 +203,33 @@ var PriceListGeneralSection = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+    /* @__PURE__ */ jsx2(DisplayField, { model: "price_list", zone: "general", id: "type", data: priceList, children: /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
       /* @__PURE__ */ jsx2(Text, { leading: "compact", size: "small", weight: "plus", children: t("fields.type") }),
       /* @__PURE__ */ jsx2(Text, { size: "small", className: "text-pretty", children: type })
-    ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+    ] }) }),
+    /* @__PURE__ */ jsx2(DisplayField, { model: "price_list", zone: "general", id: "description", data: priceList, children: /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
       /* @__PURE__ */ jsx2(Text, { leading: "compact", size: "small", weight: "plus", children: t("fields.description") }),
       /* @__PURE__ */ jsx2(Text, { size: "small", className: "text-pretty", children: priceList.description })
-    ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
+    ] }) }),
+    /* @__PURE__ */ jsx2(DisplayField, { model: "price_list", zone: "general", id: "price_overrides", data: priceList, children: /* @__PURE__ */ jsxs2("div", { className: "text-ui-fg-subtle grid grid-cols-2 items-center px-6 py-4", children: [
       /* @__PURE__ */ jsx2(Text, { leading: "compact", size: "small", weight: "plus", children: t("priceLists.fields.priceOverrides.label") }),
       /* @__PURE__ */ jsx2(Text, { size: "small", className: "text-pretty", children: overrideCount || "-" })
-    ] })
+    ] }) }),
+    /* @__PURE__ */ jsx2(
+      DisplayExtensionZone2,
+      {
+        model: "price_list",
+        zone: "general",
+        data: priceList,
+        builtInFieldIds: [
+          "title",
+          "status",
+          "type",
+          "description",
+          "price_overrides"
+        ]
+      }
+    )
   ] });
 };
 
@@ -209,6 +241,7 @@ import { createColumnHelper } from "@tanstack/react-table";
 import { useMemo, useState } from "react";
 import { useTranslation as useTranslation3 } from "react-i18next";
 import { useNavigate } from "react-router-dom";
+import { DisplayExtensionZone as DisplayExtensionZone3 } from "@mercurjs/dashboard-shared";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var PAGE_SIZE = 10;
 var PREFIX = "p";
@@ -344,6 +377,14 @@ var PriceListProductSection = ({
         prefix: PREFIX,
         queryObject: raw
       }
+    ),
+    /* @__PURE__ */ jsx3(
+      DisplayExtensionZone3,
+      {
+        model: "price_list",
+        zone: "products",
+        data: priceList
+      }
     )
   ] });
 };
@@ -454,7 +495,8 @@ import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var Root = ({ children }) => {
   const initialData = useLoaderData();
   const { id } = useParams();
-  const { price_list, isLoading, isError, error } = usePriceList(id, void 0, {
+  const linkQuery = useLinkQuery("price_list");
+  const { price_list, isLoading, isError, error } = usePriceList(id, linkQuery, {
     placeholderData: initialData
   });
   if (isLoading || !price_list) {
@@ -464,11 +506,11 @@ var Root = ({ children }) => {
     throw error;
   }
   return /* @__PURE__ */ jsx4(Fragment, { children: Children.count(children) > 0 ? children : /* @__PURE__ */ jsxs4(TwoColumnPage, { hasOutlet: true, data: price_list, children: [
-    /* @__PURE__ */ jsxs4(TwoColumnPage.Main, { children: [
+    /* @__PURE__ */ jsx4(TwoColumnPage.Main, { children: /* @__PURE__ */ jsxs4(WidgetZone, { id: "price-lists.detail.main", data: price_list, children: [
       /* @__PURE__ */ jsx4(PriceListGeneralSection, { priceList: price_list }),
       /* @__PURE__ */ jsx4(PriceListProductSection, { priceList: price_list })
-    ] }),
-    /* @__PURE__ */ jsx4(TwoColumnPage.Sidebar, { children: /* @__PURE__ */ jsx4(PriceListConfigurationSection, { priceList: price_list }) })
+    ] }) }),
+    /* @__PURE__ */ jsx4(TwoColumnPage.Sidebar, { children: /* @__PURE__ */ jsx4(WidgetZone, { id: "price-lists.detail.side", data: price_list, children: /* @__PURE__ */ jsx4(PriceListConfigurationSection, { priceList: price_list }) }) })
   ] }) });
 };
 var PriceListDetailPage = Object.assign(Root, {

package/dist/{[id]-WNR2IWCZ.js → [id]-3ETA4Q5L.js}

@@ -5,28 +5,27 @@ import {
   getFormattedCountry
 } from "./chunk-W6Y3PPU5.js";
 import "./chunk-JRTZWK77.js";
-import "./chunk-FQERBIVS.js";
 import {
   PlaceholderCell
 } from "./chunk-PHOCVOZ5.js";
+import {
+  SectionRow
+} from "./chunk-4TLP3TAA.js";
+import "./chunk-FQERBIVS.js";
 import {
   _DataTable,
   useDataTable
-} from "./chunk-AIF2KTEE.js";
+} from "./chunk-W3UHAQCV.js";
 import "./chunk-YN3FGNJM.js";
-import "./chunk-KAZ5BYTQ.js";
-import "./chunk-3EF54XFY.js";
-import {
-  SectionRow
-} from "./chunk-4TLP3TAA.js";
+import "./chunk-KCHYLLVG.js";
+import "./chunk-634XVU3D.js";
 import {
   TwoColumnPage
 } from "./chunk-YV6MK4PZ.js";
-import "./chunk-LRD242C7.js";
-import "./chunk-QHQWEERJ.js";
 import {
   useQueryParams
 } from "./chunk-THHRRYRS.js";
+import "./chunk-LRD242C7.js";
 import {
   Thumbnail
 } from "./chunk-WIYFXWRI.js";
@@ -37,13 +36,14 @@ import {
   ActionMenu
 } from "./chunk-BDGZ4EQO.js";
 import "./chunk-LAVHRER2.js";
+import "./chunk-QHQWEERJ.js";
 import "./chunk-Y7QKP6QU.js";
 import {
   inventoryItemsQueryKeys,
   useDeleteInventoryItemLevel,
   useInventoryItem,
   useInventoryItemLevels
-} from "./chunk-ZNG4GXMP.js";
+} from "./chunk-744GLNZW.js";
 import "./chunk-A5DJIOHN.js";
 import {
   queryClient
@@ -51,17 +51,21 @@ import {
 import "./chunk-ZA2KFUFR.js";
 import {
   fetchQuery
-} from "./chunk-RIN4CBRB.js";
+} from "./chunk-LXZXXOJ3.js";
 import "./chunk-NBMM2TZK.js";
 
 // src/pages/inventory/[id]/loader.tsx
-var inventoryDetailQuery = (id) => ({
-  queryKey: inventoryItemsQueryKeys.detail(id),
-  queryFn: async () => fetchQuery(
-    `/vendor/inventory-items/${id}?fields=${INVENTORY_DETAIL_FIELDS}`,
-    { method: "GET" }
-  )
-});
+import { getLinkQuery } from "@mercurjs/dashboard-shared";
+var inventoryDetailQuery = (id) => {
+  const query = getLinkQuery("inventory_item", INVENTORY_DETAIL_FIELDS);
+  return {
+    queryKey: inventoryItemsQueryKeys.detail(id, query),
+    queryFn: async () => fetchQuery(
+      `/vendor/inventory-items/${id}?fields=${query.fields}`,
+      { method: "GET" }
+    )
+  };
+};
 var loader = async ({ params }) => {
   const id = params.id;
   const query = inventoryDetailQuery(id);
@@ -71,9 +75,11 @@ var loader = async ({ params }) => {
 // src/pages/inventory/[id]/inventory-detail-page.tsx
 import { Children } from "react";
 import { useLoaderData, useParams } from "react-router-dom";
+import { useLinkQuery, WidgetZone } from "@mercurjs/dashboard-shared";
 
 // src/pages/inventory/[id]/_components/inventory-item-attributes/attributes-section.tsx
 import { Container, Heading } from "@medusajs/ui";
+import { DisplayExtensionZone } from "@mercurjs/dashboard-shared";
 import { PencilSquare } from "@medusajs/icons";
 import { useTranslation } from "react-i18next";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -113,6 +119,14 @@ var InventoryItemAttributeSection = ({
         title: t("fields.countryOfOrigin"),
         value: getFormattedCountry(inventoryItem.origin_country)
       }
+    ),
+    /* @__PURE__ */ jsx(
+      DisplayExtensionZone,
+      {
+        model: "inventory_item",
+        zone: "attributes",
+        data: inventoryItem
+      }
     )
   ] });
 };
@@ -121,7 +135,9 @@ var InventoryItemAttributeSection = ({
 import { Container as Container2, Heading as Heading2 } from "@medusajs/ui";
 import { PencilSquare as PencilSquare2 } from "@medusajs/icons";
 import { useTranslation as useTranslation2 } from "react-i18next";
+import { DisplayExtensionZone as DisplayExtensionZone2, DisplayField } from "@mercurjs/dashboard-shared";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var GENERAL_FIELD_IDS = ["title", "sku", "in_stock", "reserved", "available"];
 var InventoryItemGeneralSection = ({
   inventoryItem
 }) => {
@@ -137,11 +153,20 @@ var InventoryItemGeneralSection = ({
   const availableQuantity = stockedQuantity - reservedQuantity;
   return /* @__PURE__ */ jsxs2(Container2, { className: "divide-y p-0", children: [
     /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ jsxs2(Heading2, { children: [
-        inventoryItem.title ?? inventoryItem.sku,
-        " ",
-        t("fields.details")
-      ] }),
+      /* @__PURE__ */ jsx2(
+        DisplayField,
+        {
+          model: "inventory_item",
+          zone: "general",
+          id: "title",
+          data: inventoryItem,
+          children: /* @__PURE__ */ jsxs2(Heading2, { children: [
+            inventoryItem.title ?? inventoryItem.sku,
+            " ",
+            t("fields.details")
+          ] })
+        }
+      ),
       /* @__PURE__ */ jsx2(
         ActionMenu,
         {
@@ -159,36 +184,81 @@ var InventoryItemGeneralSection = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx2(SectionRow, { title: t("fields.sku"), value: inventoryItem.sku ?? "-" }),
     /* @__PURE__ */ jsx2(
-      SectionRow,
+      DisplayField,
+      {
+        model: "inventory_item",
+        zone: "general",
+        id: "sku",
+        data: inventoryItem,
+        children: /* @__PURE__ */ jsx2(SectionRow, { title: t("fields.sku"), value: inventoryItem.sku ?? "-" })
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      DisplayField,
       {
-        title: t("fields.inStock"),
-        value: getQuantityFormat(
-          stockedQuantity,
-          inventoryItem.location_levels?.length
+        model: "inventory_item",
+        zone: "general",
+        id: "in_stock",
+        data: inventoryItem,
+        children: /* @__PURE__ */ jsx2(
+          SectionRow,
+          {
+            title: t("fields.inStock"),
+            value: getQuantityFormat(
+              stockedQuantity,
+              inventoryItem.location_levels?.length
+            )
+          }
         )
       }
     ),
     /* @__PURE__ */ jsx2(
-      SectionRow,
+      DisplayField,
       {
-        title: t("inventory.reserved"),
-        value: getQuantityFormat(
-          reservedQuantity,
-          inventoryItem.location_levels?.length
+        model: "inventory_item",
+        zone: "general",
+        id: "reserved",
+        data: inventoryItem,
+        children: /* @__PURE__ */ jsx2(
+          SectionRow,
+          {
+            title: t("inventory.reserved"),
+            value: getQuantityFormat(
+              reservedQuantity,
+              inventoryItem.location_levels?.length
+            )
+          }
         )
       }
     ),
     /* @__PURE__ */ jsx2(
-      SectionRow,
+      DisplayField,
       {
-        title: t("inventory.available"),
-        value: getQuantityFormat(
-          availableQuantity,
-          inventoryItem.location_levels?.length
+        model: "inventory_item",
+        zone: "general",
+        id: "available",
+        data: inventoryItem,
+        children: /* @__PURE__ */ jsx2(
+          SectionRow,
+          {
+            title: t("inventory.available"),
+            value: getQuantityFormat(
+              availableQuantity,
+              inventoryItem.location_levels?.length
+            )
+          }
         )
       }
+    ),
+    /* @__PURE__ */ jsx2(
+      DisplayExtensionZone2,
+      {
+        model: "inventory_item",
+        zone: "general",
+        data: inventoryItem,
+        builtInFieldIds: GENERAL_FIELD_IDS
+      }
     )
   ] });
 };
@@ -203,6 +273,7 @@ var getQuantityFormat = (quantity, locations) => {
 import { Button, Container as Container3, Heading as Heading3 } from "@medusajs/ui";
 import { useTranslation as useTranslation5 } from "react-i18next";
 import { Link } from "react-router-dom";
+import { DisplayExtensionZone as DisplayExtensionZone3 } from "@mercurjs/dashboard-shared";
 
 // src/pages/inventory/[id]/_components/location-levels-table/use-location-list-table-columns.tsx
 import { createColumnHelper } from "@tanstack/react-table";
@@ -404,7 +475,15 @@ var InventoryItemLocationLevelsSection = ({
       /* @__PURE__ */ jsx6(Heading3, { children: t("inventory.locationLevels") }),
       /* @__PURE__ */ jsx6(Button, { size: "small", variant: "secondary", asChild: true, children: /* @__PURE__ */ jsx6(Link, { to: "locations", children: t("inventory.manageLocations") }) })
     ] }),
-    /* @__PURE__ */ jsx6(ItemLocationListTable, { inventory_item_id: inventoryItem.id })
+    /* @__PURE__ */ jsx6(ItemLocationListTable, { inventory_item_id: inventoryItem.id }),
+    /* @__PURE__ */ jsx6(
+      DisplayExtensionZone3,
+      {
+        model: "inventory_item",
+        zone: "locations",
+        data: inventoryItem
+      }
+    )
   ] });
 };
 
@@ -413,6 +492,7 @@ import { TriangleRightMini } from "@medusajs/icons";
 import { Container as Container4, Heading as Heading4 } from "@medusajs/ui";
 import { useTranslation as useTranslation6 } from "react-i18next";
 import { Link as Link2 } from "react-router-dom";
+import { DisplayExtensionZone as DisplayExtensionZone4 } from "@mercurjs/dashboard-shared";
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var InventoryItemVariantsSection = ({
   variants
@@ -445,7 +525,15 @@ var InventoryItemVariantsSection = ({
         },
         variant.id
       );
-    }) })
+    }) }),
+    /* @__PURE__ */ jsx7(
+      DisplayExtensionZone4,
+      {
+        model: "inventory_item",
+        zone: "variants",
+        data: variants
+      }
+    )
   ] });
 };
 
@@ -456,7 +544,7 @@ var Root = ({ children }) => {
   const initialData = useLoaderData();
   const { inventory_item, isPending: isLoading } = useInventoryItem(
     id,
-    { fields: INVENTORY_DETAIL_FIELDS },
+    useLinkQuery("inventory_item", INVENTORY_DETAIL_FIELDS),
     { initialData }
   );
   if (isLoading || !inventory_item) {
@@ -471,19 +559,29 @@ var Root = ({ children }) => {
     );
   }
   return /* @__PURE__ */ jsx8(Fragment, { children: Children.count(children) > 0 ? children : /* @__PURE__ */ jsxs5(TwoColumnPage, { data: inventory_item, children: [
-    /* @__PURE__ */ jsxs5(TwoColumnPage.Main, { children: [
+    /* @__PURE__ */ jsx8(TwoColumnPage.Main, { children: /* @__PURE__ */ jsxs5(WidgetZone, { id: "inventory.detail.main", data: inventory_item, children: [
       /* @__PURE__ */ jsx8(InventoryItemGeneralSection, { inventoryItem: inventory_item }),
-      /* @__PURE__ */ jsx8(InventoryItemLocationLevelsSection, { inventoryItem: inventory_item })
-    ] }),
-    /* @__PURE__ */ jsxs5(TwoColumnPage.Sidebar, { children: [
+      /* @__PURE__ */ jsx8(
+        InventoryItemLocationLevelsSection,
+        {
+          inventoryItem: inventory_item
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx8(TwoColumnPage.Sidebar, { children: /* @__PURE__ */ jsxs5(WidgetZone, { id: "inventory.detail.side", data: inventory_item, children: [
       /* @__PURE__ */ jsx8(
         InventoryItemVariantsSection,
         {
           variants: inventory_item.variants
         }
       ),
-      /* @__PURE__ */ jsx8(InventoryItemAttributeSection, { inventoryItem: inventory_item })
-    ] })
+      /* @__PURE__ */ jsx8(
+        InventoryItemAttributeSection,
+        {
+          inventoryItem: inventory_item
+        }
+      )
+    ] }) })
   ] }) });
 };
 var InventoryDetailPage = Object.assign(Root, {