@lodashventure/medusa-brand 1.2.20 → 1.2.23

package/.medusa/server/src/admin/index.mjs

@@ -1,17 +1,254 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useCallback, useEffect, useMemo } from "react";
 import { defineWidgetConfig, defineRouteConfig } from "@medusajs/admin-sdk";
-import Medusa, { FetchError } from "@medusajs/js-sdk";
-import { Container, Heading, Alert, Text, Button, Label, Select, Badge, Input, Textarea, Switch, clx, Table, DropdownMenu, IconButton } from "@medusajs/ui";
-import { BuildingStorefront, Trash, Link, X, CloudArrowUp, PhotoSolid, Plus, MagnifyingGlass, EllipsisHorizontal, PencilSquare } from "@medusajs/icons";
-import { useState, useEffect, useCallback } from "react";
+import { Container, Heading, Alert, Text, Button, Label, Input, Select, Badge, Switch, Textarea, clx, toast, usePrompt, DropdownMenu, Table, IconButton } from "@medusajs/ui";
+import { BuildingStorefront, Trash, MagnifyingGlass, Link, XMark, CloudArrowUp, PhotoSolid, Plus, EllipsisHorizontal, PencilSquare, ChevronLeft, ChevronRight } from "@medusajs/icons";
+import { useForm, Controller } from "react-hook-form";
 import "@medusajs/admin-shared";
-const sdk = new Medusa({
-  baseUrl: "/",
-  debug: false,
-  auth: {
-    type: "session"
+const DEFAULT_BASE_URL = typeof window !== "undefined" ? window.location.origin : "/";
+const resolveUrl = (input) => {
+  if (input instanceof URL) {
+    return input;
   }
-});
+  try {
+    return new URL(input);
+  } catch {
+    const sanitizedPath = input.replace(/^[\/]+/, "");
+    const base = DEFAULT_BASE_URL.replace(/\/$/, "");
+    return new URL(`${base}/${sanitizedPath}`);
+  }
+};
+class FetchError extends Error {
+  constructor(message, statusText, status) {
+    super(message);
+    this.statusText = statusText;
+    this.status = status;
+  }
+}
+const buildHeaders = (headers) => {
+  const resolved = new Headers();
+  if (!headers) {
+    return resolved;
+  }
+  if (headers instanceof Headers) {
+    headers.forEach((value, key) => {
+      if (value != null) {
+        resolved.append(key, value);
+      }
+    });
+    return resolved;
+  }
+  const appendEntry = (key, value) => {
+    if (value === void 0 || value === null) {
+      return;
+    }
+    resolved.append(key, String(value));
+  };
+  if (Array.isArray(headers)) {
+    headers.forEach(([key, value]) => appendEntry(key, value));
+    return resolved;
+  }
+  Object.entries(headers).forEach(
+    ([key, value]) => appendEntry(key, value)
+  );
+  return resolved;
+};
+const normalizeRequestInit = (init, resolvedHeaders) => {
+  var _a;
+  const requestInit = {
+    ...init,
+    headers: resolvedHeaders,
+    credentials: "include"
+  };
+  const body = init == null ? void 0 : init.body;
+  const isFormData = typeof FormData !== "undefined" && body instanceof FormData;
+  if (!resolvedHeaders.has("accept")) {
+    resolvedHeaders.set("accept", "application/json");
+  }
+  if (!isFormData && body && typeof body === "object") {
+    if (!resolvedHeaders.has("content-type")) {
+      resolvedHeaders.set("content-type", "application/json");
+    }
+    if (((_a = resolvedHeaders.get("content-type")) == null ? void 0 : _a.includes("application/json")) && !(body instanceof ArrayBuffer) && !(body instanceof Blob)) {
+      requestInit.body = JSON.stringify(body);
+      return requestInit;
+    }
+  }
+  requestInit.body = body;
+  return requestInit;
+};
+const parseResponse = async (response, requestHeaders) => {
+  var _a;
+  if (!response.ok) {
+    let message = response.statusText || "Request failed";
+    try {
+      const errorBody = await response.clone().json();
+      if (errorBody == null ? void 0 : errorBody.message) {
+        message = errorBody.message;
+      }
+    } catch {
+    }
+    throw new FetchError(message, response.statusText, response.status);
+  }
+  const wantsJson = ((_a = requestHeaders.get("accept")) == null ? void 0 : _a.includes("application/json")) ?? false;
+  if (!wantsJson) {
+    return response;
+  }
+  if (response.status === 204) {
+    return null;
+  }
+  try {
+    return await response.json();
+  } catch {
+    return null;
+  }
+};
+const clientFetch = async (input, init) => {
+  const url = resolveUrl(input);
+  const headers = buildHeaders(init == null ? void 0 : init.headers);
+  const requestInit = normalizeRequestInit(init, headers);
+  const response = await fetch(url, requestInit);
+  return await parseResponse(response, headers);
+};
+const sdk = {
+  client: {
+    fetch: clientFetch
+  }
+};
+const SLUG_REGEX$1 = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+const generateSlug$1 = (value) => value.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+const cleanSlug$1 = (value) => value.toLowerCase().replace(/[^a-z0-9-]/g, "").replace(/--+/g, "-");
+const QuickCreateBrandModal = ({
+  onClose,
+  onCreated
+}) => {
+  const [name, setName] = useState("");
+  const [slug, setSlug] = useState("");
+  const [isActive, setIsActive] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [slugManuallyEdited, setSlugManuallyEdited] = useState(false);
+  useEffect(() => {
+    if (!slugManuallyEdited) {
+      setSlug(generateSlug$1(name));
+    }
+  }, [name, slugManuallyEdited]);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setError(null);
+    if (!name.trim()) {
+      setError("Brand name is required");
+      return;
+    }
+    if (!slug || !SLUG_REGEX$1.test(slug)) {
+      setError(
+        "Slug must contain only lowercase letters, numbers, and hyphens"
+      );
+      return;
+    }
+    setLoading(true);
+    try {
+      const response = await sdk.client.fetch("/admin/brands", {
+        method: "POST",
+        body: {
+          name: name.trim(),
+          slug: slug.trim(),
+          is_active: isActive
+        }
+      });
+      if (!(response == null ? void 0 : response.brand)) {
+        throw new Error("Unexpected response from server");
+      }
+      await onCreated(response.brand);
+      onClose();
+    } catch (err) {
+      const message = err instanceof FetchError ? err.message : err instanceof Error ? err.message : "Failed to create brand";
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-lg rounded-lg bg-ui-bg-base p-6 shadow-lg", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Create Brand" }),
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", onClick: onClose, children: /* @__PURE__ */ jsx(XMark, {}) })
+    ] }),
+    error && /* @__PURE__ */ jsx(Alert, { variant: "error", dismissible: true, onDismiss: () => setError(null), children: error }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "quick-brand-name", className: "mb-2", children: "Brand name *" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "quick-brand-name",
+            value: name,
+            placeholder: "e.g., Nike",
+            onChange: (event) => {
+              setName(event.target.value);
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "quick-brand-slug", children: "Slug *" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "small",
+              onClick: () => {
+                setSlug(generateSlug$1(name));
+                setSlugManuallyEdited(false);
+              },
+              children: "Reset to name"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "quick-brand-slug",
+            value: slug,
+            placeholder: "e.g., nike",
+            onChange: (event) => {
+              setSlug(cleanSlug$1(event.target.value));
+              setSlugManuallyEdited(true);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { className: "mt-1 text-xs text-ui-fg-subtle", children: "Used in URLs and must be unique." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-lg border p-3", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { className: "font-medium", children: "Active" }),
+          /* @__PURE__ */ jsx(Text, { className: "text-sm text-ui-fg-subtle", children: "Active brands appear on the storefront." })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: isActive,
+            onCheckedChange: (value) => setIsActive(Boolean(value))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            onClick: onClose,
+            disabled: loading,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { type: "submit", disabled: loading, children: loading ? "Creating…" : "Create brand" })
+      ] })
+    ] })
+  ] }) });
+};
 const ProductBrandWidget = ({ data: product }) => {
   const [brands, setBrands] = useState([]);
   const [currentBrand, setCurrentBrand] = useState(null);
@@ -19,20 +256,20 @@ const ProductBrandWidget = ({ data: product }) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [success, setSuccess] = useState(null);
-  useEffect(() => {
-    fetchBrands();
-    fetchProductBrand();
-  }, [product.id]);
-  const fetchBrands = async () => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const fetchBrands = useCallback(async (query = "") => {
     try {
-      const response = await sdk.client.fetch(
-        "/admin/brands?is_active=true&limit=100",
-        {}
-      );
-      if (response.ok) {
-        const data = await response.json();
-        setBrands(data.brands || []);
+      const params = new URLSearchParams({ limit: "100" });
+      if (query) {
+        params.set("q", query);
       }
+      const data = await sdk.client.fetch(
+        `/admin/brands?${params.toString()}`,
+        { method: "GET" }
+      );
+      setBrands((data == null ? void 0 : data.brands) ?? []);
     } catch (err) {
       if (err instanceof FetchError && err.status === 404) {
         setBrands([]);
@@ -40,22 +277,21 @@ const ProductBrandWidget = ({ data: product }) => {
       }
       console.error("Error fetching brands:", err);
     }
-  };
-  const fetchProductBrand = async () => {
+  }, []);
+  const fetchProductBrand = useCallback(async () => {
     try {
-      const response = await sdk.client.fetch(
+      const data = await sdk.client.fetch(
         `/admin/products/${product.id}/brand`,
-        {}
-      );
-      if (response.ok) {
-        const data = await response.json();
-        if (data.brand) {
-          setCurrentBrand(data.brand);
-          setSelectedBrandId(data.brand.id);
-        } else {
-          setCurrentBrand(null);
-          setSelectedBrandId("none");
+        {
+          method: "GET"
         }
+      );
+      if (data == null ? void 0 : data.brand) {
+        setCurrentBrand(data.brand);
+        setSelectedBrandId(data.brand.id);
+      } else {
+        setCurrentBrand(null);
+        setSelectedBrandId("none");
       }
     } catch (err) {
       if (err instanceof FetchError && err.status === 404) {
@@ -65,372 +301,619 @@ const ProductBrandWidget = ({ data: product }) => {
       }
       console.error("Error fetching product brand:", err);
     }
-  };
-  const handleBrandChange = (brandId) => {
-    setSelectedBrandId(brandId);
-    setError(null);
-    setSuccess(null);
-  };
-  const handleSaveBrand = async () => {
-    if (!selectedBrandId || selectedBrandId === "none") {
-      if (currentBrand) {
-        await handleRemoveBrand();
-      }
-      return;
-    }
-    setLoading(true);
-    setError(null);
-    setSuccess(null);
-    try {
-      const response = await sdk.client.fetch(
-        `/admin/products/${product.id}/brand`,
-        {
+  }, [product.id]);
+  useEffect(() => {
+    fetchBrands();
+    fetchProductBrand();
+  }, [fetchBrands, fetchProductBrand]);
+  useEffect(() => {
+    const handle = window.setTimeout(() => {
+      setDebouncedSearch(searchTerm.trim());
+    }, 250);
+    return () => window.clearTimeout(handle);
+  }, [searchTerm]);
+  useEffect(() => {
+    fetchBrands(debouncedSearch);
+  }, [debouncedSearch, fetchBrands]);
+  const assignBrand = useCallback(
+    async (brandId, brandData) => {
+      setLoading(true);
+      setError(null);
+      setSuccess(null);
+      try {
+        if (!brandId) {
+          await sdk.client.fetch(`/admin/products/${product.id}/brand`, {
+            method: "DELETE"
+          });
+          setSuccess("Brand removed successfully");
+          setCurrentBrand(null);
+          setSelectedBrandId("none");
+          return;
+        }
+        await sdk.client.fetch(`/admin/products/${product.id}/brand`, {
           method: "POST",
-          headers: {
-            "Content-Type": "application/json"
-          },
-          body: JSON.stringify({ brand_id: selectedBrandId })
+          body: { brand_id: brandId }
+        });
+        const brandToPersist = brandData || brands.find((brand) => brand.id === brandId) || null;
+        if (brandToPersist) {
+          setCurrentBrand(brandToPersist);
+        } else {
+          await fetchProductBrand();
         }
-      );
-      if (response.ok) {
+        setSelectedBrandId(brandId);
         setSuccess("Brand updated successfully");
-        fetchProductBrand();
-      } else {
-        const data = await response.json();
-        setError(data.error || "Failed to update brand");
+      } catch (err) {
+        if (err instanceof FetchError) {
+          const responseBody = err == null ? void 0 : err.body;
+          setError(
+            (responseBody == null ? void 0 : responseBody.error) || (responseBody == null ? void 0 : responseBody.message) || err.message || "Failed to update brand"
+          );
+        } else {
+          setError("Failed to update brand");
+        }
+        console.error("Error assigning brand:", err);
+      } finally {
+        setLoading(false);
       }
-    } catch (err) {
-      setError("Error updating brand");
-      console.error("Error updating brand:", err);
-    } finally {
-      setLoading(false);
+    },
+    [brands, fetchProductBrand, product.id]
+  );
+  const handleSaveBrand = async () => {
+    if (selectedBrandId === "none") {
+      await assignBrand(null);
+      return;
     }
+    await assignBrand(selectedBrandId);
   };
   const handleRemoveBrand = async () => {
-    if (!confirm("Are you sure you want to remove the brand from this product?")) {
+    const confirmed = window.confirm(
+      "Are you sure you want to remove the brand from this product?"
+    );
+    if (!confirmed) {
       return;
     }
-    setLoading(true);
-    setError(null);
-    setSuccess(null);
-    try {
-      const response = await sdk.client.fetch(
-        `/admin/products/${product.id}/brand`,
-        {
-          method: "DELETE"
-        }
-      );
-      if (response.ok) {
-        setSuccess("Brand removed successfully");
-        setCurrentBrand(null);
-        setSelectedBrandId("");
-      } else {
-        const data = await response.json();
-        setError(data.error || "Failed to remove brand");
-      }
-    } catch (err) {
-      setError("Error removing brand");
-      console.error("Error removing brand:", err);
-    } finally {
-      setLoading(false);
-    }
+    await assignBrand(null);
   };
+  const filteredBrands = useMemo(() => {
+    if (!debouncedSearch) {
+      return brands;
+    }
+    const query = debouncedSearch.toLowerCase();
+    return brands.filter(
+      (brand) => brand.name.toLowerCase().includes(query) || brand.slug.toLowerCase().includes(query)
+    );
+  }, [brands, debouncedSearch]);
   const hasChanges = selectedBrandId !== ((currentBrand == null ? void 0 : currentBrand.id) || "none");
-  return /* @__PURE__ */ jsx(Container, { className: "divide-y px-0 pb-0 pt-0", children: /* @__PURE__ */ jsxs("div", { className: "px-6 py-6", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
-      /* @__PURE__ */ jsx(BuildingStorefront, { className: "text-ui-fg-subtle" }),
-      /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Brand" })
-    ] }),
-    error && /* @__PURE__ */ jsx(Alert, { variant: "error", dismissible: true, className: "mb-4", children: error }),
-    success && /* @__PURE__ */ jsx(Alert, { variant: "success", dismissible: true, className: "mb-4", children: success }),
-    currentBrand && !hasChanges && /* @__PURE__ */ jsx("div", { className: "mb-4 p-4 rounded-lg border bg-ui-bg-subtle", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        currentBrand.logo ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: currentBrand.logo,
-            alt: currentBrand.name,
-            className: "h-10 w-10 object-contain rounded"
-          }
-        ) : /* @__PURE__ */ jsx("div", { className: "h-10 w-10 rounded bg-ui-bg-base flex items-center justify-center", children: /* @__PURE__ */ jsx(BuildingStorefront, { className: "h-5 w-5 text-ui-fg-subtle" }) }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Text, { className: "font-medium", children: currentBrand.name }),
-          /* @__PURE__ */ jsxs(Text, { className: "text-sm text-ui-fg-subtle", children: [
-            "/",
-            currentBrand.slug
-          ] })
-        ] })
+  const handleBrandCreated = async (brand) => {
+    setBrands((prev) => [brand, ...prev.filter((b) => b.id !== brand.id)]);
+    setSelectedBrandId(brand.id);
+    await assignBrand(brand.id, brand);
+  };
+  return /* @__PURE__ */ jsxs(Container, { className: "divide-y px-0 pb-0 pt-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-6 py-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(BuildingStorefront, { className: "text-ui-fg-subtle" }),
+        /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Brand" })
       ] }),
-      /* @__PURE__ */ jsxs(
-        Button,
+      error && /* @__PURE__ */ jsx(Alert, { variant: "error", dismissible: true, onDismiss: () => setError(null), children: error }),
+      success && /* @__PURE__ */ jsx(
+        Alert,
         {
-          variant: "danger",
-          size: "small",
-          onClick: handleRemoveBrand,
-          disabled: loading,
-          children: [
-            /* @__PURE__ */ jsx(Trash, { className: "mr-1" }),
-            "Remove"
-          ]
+          variant: "success",
+          dismissible: true,
+          onDismiss: () => setSuccess(null),
+          children: success
         }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "brand", className: "mb-2", children: "Select Brand" }),
+      ),
+      currentBrand && !hasChanges && /* @__PURE__ */ jsx("div", { className: "mb-4 rounded-lg border bg-ui-bg-subtle p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          currentBrand.logo ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: currentBrand.logo,
+              alt: currentBrand.name,
+              className: "h-10 w-10 rounded object-contain"
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded bg-ui-bg-base", children: /* @__PURE__ */ jsx(BuildingStorefront, { className: "h-5 w-5 text-ui-fg-subtle" }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Text, { className: "font-medium", children: currentBrand.name }),
+            /* @__PURE__ */ jsxs(Text, { className: "text-sm text-ui-fg-subtle", children: [
+              "/",
+              currentBrand.slug
+            ] })
+          ] })
+        ] }),
         /* @__PURE__ */ jsxs(
-          Select,
+          Button,
           {
-            value: selectedBrandId,
-            onValueChange: handleBrandChange,
+            variant: "danger",
+            size: "small",
+            onClick: handleRemoveBrand,
             disabled: loading,
             children: [
-              /* @__PURE__ */ jsx(Select.Trigger, { id: "brand", children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Choose a brand..." }) }),
-              /* @__PURE__ */ jsxs(Select.Content, { children: [
-                /* @__PURE__ */ jsx(Select.Item, { value: "none", children: /* @__PURE__ */ jsx("span", { className: "text-ui-fg-muted", children: "No brand" }) }),
-                brands.map((brand) => /* @__PURE__ */ jsx(Select.Item, { value: brand.id, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  brand.logo && /* @__PURE__ */ jsx(
-                    "img",
-                    {
-                      src: brand.logo,
-                      alt: brand.name,
-                      className: "h-5 w-5 object-contain rounded"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { children: brand.name }),
-                  /* @__PURE__ */ jsx(Badge, { size: "xsmall", color: "blue", className: "ml-auto", children: brand.slug })
-                ] }) }, brand.id))
-              ] })
+              /* @__PURE__ */ jsx(Trash, { className: "mr-1" }),
+              " Remove"
             ]
           }
-        ),
-        /* @__PURE__ */ jsx(Text, { className: "mt-1 text-xs text-ui-fg-subtle", children: "Assign a brand to help customers find products by their favorite brands" })
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "brand-search", className: "mb-2", children: "Find a brand" }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "brand-search",
+                value: searchTerm,
+                placeholder: "Search by name or slug",
+                onChange: (event) => setSearchTerm(event.target.value),
+                className: "pl-10"
+              }
+            ),
+            /* @__PURE__ */ jsx(MagnifyingGlass, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-ui-fg-muted" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "brand", className: "mb-2", children: "Select brand" }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: selectedBrandId,
+              onValueChange: (value) => {
+                setSelectedBrandId(value);
+                setError(null);
+                setSuccess(null);
+              },
+              disabled: loading,
+              children: [
+                /* @__PURE__ */ jsx(Select.Trigger, { id: "brand", children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Choose a brand" }) }),
+                /* @__PURE__ */ jsxs(Select.Content, { children: [
+                  /* @__PURE__ */ jsx(Select.Item, { value: "none", children: /* @__PURE__ */ jsx("span", { className: "text-ui-fg-muted", children: "No brand" }) }),
+                  filteredBrands.map((brand) => /* @__PURE__ */ jsx(Select.Item, { value: brand.id, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    brand.logo && /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: brand.logo,
+                        alt: brand.name,
+                        className: "h-5 w-5 rounded object-contain"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { children: brand.name }),
+                    /* @__PURE__ */ jsx(Badge, { size: "xsmall", color: "blue", className: "ml-auto", children: brand.slug })
+                  ] }) }, brand.id)),
+                  filteredBrands.length === 0 && /* @__PURE__ */ jsx(Select.Item, { value: "__no-results", disabled: true, children: /* @__PURE__ */ jsx("span", { className: "text-ui-fg-muted", children: "No brands found" }) })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { className: "mt-1 text-xs text-ui-fg-subtle", children: "Assigning a brand helps customers filter products by manufacturer." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "primary",
+              size: "small",
+              onClick: handleSaveBrand,
+              disabled: loading || !hasChanges && selectedBrandId !== "none",
+              children: loading ? "Saving…" : "Save brand"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              size: "small",
+              onClick: () => setShowCreateModal(true),
+              disabled: loading,
+              children: "Create new brand"
+            }
+          )
+        ] })
       ] }),
-      hasChanges && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "mt-6 border-t pt-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx(Link, { className: "text-ui-fg-subtle" }),
         /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "primary",
-            size: "small",
-            onClick: handleSaveBrand,
-            disabled: loading,
-            children: loading ? "Saving..." : "Save Brand"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
+          "a",
           {
-            variant: "secondary",
-            size: "small",
-            onClick: () => {
-              setSelectedBrandId((currentBrand == null ? void 0 : currentBrand.id) || "none");
-              setError(null);
-              setSuccess(null);
-            },
-            disabled: loading,
-            children: "Cancel"
+            href: "/app/brands",
+            className: "text-ui-fg-interactive transition-colors hover:text-ui-fg-interactive-hover",
+            children: "Manage all brands"
           }
         )
-      ] })
+      ] }) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "mt-6 pt-6 border-t", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
-      /* @__PURE__ */ jsx(Link, { className: "text-ui-fg-subtle" }),
-      /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: "/app/brands",
-          className: "text-ui-fg-interactive hover:text-ui-fg-interactive-hover transition-colors",
-          children: "Manage all brands"
-        }
-      )
-    ] }) })
-  ] }) });
+    showCreateModal && /* @__PURE__ */ jsx(
+      QuickCreateBrandModal,
+      {
+        onClose: () => setShowCreateModal(false),
+        onCreated: handleBrandCreated
+      }
+    )
+  ] });
 };
 defineWidgetConfig({
   zone: "product.details.side.after"
 });
-const BrandForm = ({ brand, isCreating, onClose }) => {
-  const [formData, setFormData] = useState({
-    name: "",
-    slug: "",
-    description: "",
-    website: "",
-    is_active: true,
-    metadata: {}
-  });
+const SLUG_REGEX = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+const generateSlug = (value) => value.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+const cleanSlug = (value) => value.toLowerCase().replace(/[^a-z0-9-]/g, "").replace(/--+/g, "-");
+const formatMetadata = (metadata) => {
+  if (!metadata || Object.keys(metadata).length === 0) {
+    return "";
+  }
+  try {
+    return JSON.stringify(metadata, null, 2);
+  } catch (error) {
+    return "";
+  }
+};
+const BrandForm = ({
+  brand,
+  isCreating,
+  onClose
+}) => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const [slugError, setSlugError] = useState(null);
+  const [slugManuallyEdited, setSlugManuallyEdited] = useState(false);
+  const [isCheckingSlug, setIsCheckingSlug] = useState(false);
+  const [slugFeedback, setSlugFeedback] = useState(null);
+  const {
+    control,
+    handleSubmit,
+    watch,
+    setValue,
+    reset,
+    setError: setFormError,
+    clearErrors,
+    formState: { errors }
+  } = useForm({
+    defaultValues: {
+      name: "",
+      slug: "",
+      description: "",
+      website: "",
+      is_active: true,
+      metadata: ""
+    }
+  });
+  const nameValue = watch("name");
+  const slugValue = watch("slug");
   useEffect(() => {
+    if (isCreating) {
+      reset({
+        name: "",
+        slug: "",
+        description: "",
+        website: "",
+        is_active: true,
+        metadata: ""
+      });
+      setSlugFeedback(null);
+      setSlugManuallyEdited(false);
+      return;
+    }
     if (brand) {
-      setFormData({
-        name: brand.name || "",
-        slug: brand.slug || "",
-        description: brand.description || "",
-        website: brand.website || "",
-        is_active: brand.is_active !== false,
-        metadata: brand.metadata || {}
+      reset({
+        name: brand.name ?? "",
+        slug: brand.slug ?? "",
+        description: brand.description ?? "",
+        website: brand.website ?? "",
+        is_active: brand.is_active,
+        metadata: formatMetadata(brand.metadata)
       });
+      setSlugFeedback(null);
+      setSlugManuallyEdited(false);
     }
-  }, [brand]);
-  const generateSlug = (name) => {
-    return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-  };
-  const handleNameChange = (value) => {
-    setFormData((prev) => ({
-      ...prev,
-      name: value,
-      slug: isCreating ? generateSlug(value) : prev.slug
-    }));
-  };
-  const handleSlugChange = (value) => {
-    const cleanSlug = value.toLowerCase().replace(/[^a-z0-9-]/g, "").replace(/--+/g, "-");
-    setFormData((prev) => ({ ...prev, slug: cleanSlug }));
-    if (slugError) setSlugError(null);
-  };
-  const validateForm = () => {
-    if (!formData.name.trim()) {
-      setError("Brand name is required");
-      return false;
+  }, [brand, isCreating, reset]);
+  useEffect(() => {
+    if (!isCreating) {
+      return;
     }
-    if (!formData.slug.trim()) {
-      setError("Brand slug is required");
-      return false;
+    if (!nameValue) {
+      setValue("slug", "");
+      return;
     }
-    if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(formData.slug)) {
-      setSlugError(
-        "Slug must contain only lowercase letters, numbers, and hyphens"
-      );
-      return false;
+    if (!slugManuallyEdited) {
+      setValue("slug", generateSlug(nameValue), { shouldValidate: true });
     }
-    if (formData.website && !formData.website.match(/^https?:\/\/.+/)) {
-      setError(
-        "Website must be a valid URL (starting with http:// or https://)"
-      );
-      return false;
+  }, [isCreating, nameValue, setValue, slugManuallyEdited]);
+  useEffect(() => {
+    if (!slugValue) {
+      setSlugFeedback(null);
+      clearErrors("slug");
+      return;
     }
-    return true;
-  };
-  const handleSubmit = async (e) => {
+    if (!SLUG_REGEX.test(slugValue)) {
+      setSlugFeedback(null);
+      setFormError("slug", {
+        type: "pattern",
+        message: "Slug must contain only lowercase letters, numbers, and hyphens"
+      });
+      return;
+    }
+    if (!isCreating && slugValue === (brand == null ? void 0 : brand.slug)) {
+      setSlugFeedback(null);
+      clearErrors("slug");
+      return;
+    }
+    setSlugFeedback(null);
+    clearErrors("slug");
+    let cancelled = false;
+    setIsCheckingSlug(true);
+    const handler = window.setTimeout(async () => {
+      var _a;
+      try {
+        const params = new URLSearchParams({ slug: slugValue, limit: "1" });
+        const response = await sdk.client.fetch(
+          `/admin/brands?${params.toString()}`,
+          {
+            method: "GET"
+          }
+        );
+        if (cancelled) {
+          return;
+        }
+        const existing = (_a = response == null ? void 0 : response.brands) == null ? void 0 : _a[0];
+        if (existing && existing.id !== (brand == null ? void 0 : brand.id)) {
+          setFormError("slug", {
+            type: "validate",
+            message: "This slug is already in use"
+          });
+          setSlugFeedback(null);
+        } else {
+          setSlugFeedback("Slug is available");
+        }
+      } catch (validationError) {
+        if (!cancelled) {
+          setSlugFeedback(null);
+        }
+      } finally {
+        if (!cancelled) {
+          setIsCheckingSlug(false);
+        }
+      }
+    }, 300);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(handler);
+      setIsCheckingSlug(false);
+    };
+  }, [
+    slugValue,
+    brand == null ? void 0 : brand.id,
+    brand == null ? void 0 : brand.slug,
+    clearErrors,
+    isCreating,
+    setFormError
+  ]);
+  const onSubmit = async (data) => {
     var _a;
-    e.preventDefault();
-    if (!validateForm()) return;
     setLoading(true);
     setError(null);
+    clearErrors(["slug", "metadata"]);
+    const metadataInput = (_a = data.metadata) == null ? void 0 : _a.trim();
+    let parsedMetadata = {};
+    if (metadataInput) {
+      try {
+        const parsed = JSON.parse(metadataInput);
+        if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+          throw new Error("Metadata must be a valid JSON object");
+        }
+        parsedMetadata = parsed;
+      } catch (parseError) {
+        const message = parseError instanceof Error ? parseError.message : "Metadata must be a valid JSON object";
+        setFormError("metadata", {
+          type: "manual",
+          message
+        });
+        setError(message);
+        setLoading(false);
+        return;
+      }
+    }
     try {
       const url = isCreating ? "/admin/brands" : `/admin/brands/${brand == null ? void 0 : brand.id}`;
       const method = isCreating ? "POST" : "PUT";
-      const response = await sdk.client.fetch(url, {
+      const payload = {
+        name: data.name.trim(),
+        slug: data.slug.trim(),
+        description: data.description.trim() || null,
+        website: data.website.trim() || null,
+        is_active: data.is_active,
+        metadata: parsedMetadata
+      };
+      await sdk.client.fetch(url, {
         method,
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify(formData)
+        body: payload
       });
-      const data = await response.json();
-      if (response.ok) {
-        onClose();
-      } else {
-        setError(data.error || "Failed to save brand");
-        if ((_a = data.error) == null ? void 0 : _a.includes("slug")) {
-          setSlugError("This slug is already in use");
-        }
-      }
+      onClose();
     } catch (err) {
-      setError("An error occurred while saving the brand");
-      console.error("Error saving brand:", err);
+      const message = err instanceof FetchError ? err.message : err instanceof Error ? err.message : "Failed to save brand";
+      setError(message);
+      if (message.toLowerCase().includes("slug")) {
+        setFormError("slug", {
+          type: "manual",
+          message: "This slug is already in use"
+        });
+      }
     } finally {
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-2xl rounded-lg bg-ui-bg-base p-6 max-h-[90vh] overflow-y-auto", children: [
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs("div", { className: "max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-lg bg-ui-bg-base p-6", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Heading, { level: "h2", children: isCreating ? "Create New Brand" : "Edit Brand" }),
+        /* @__PURE__ */ jsx(Heading, { level: "h2", children: isCreating ? "Create Brand" : "Edit Brand" }),
         !isCreating && brand && /* @__PURE__ */ jsxs(Text, { className: "text-ui-fg-subtle", children: [
-          "Editing: ",
+          "Editing ",
           brand.name
         ] })
       ] }),
-      /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", onClick: onClose, children: /* @__PURE__ */ jsx(X, {}) })
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", onClick: onClose, children: /* @__PURE__ */ jsx(XMark, {}) })
     ] }),
     error && /* @__PURE__ */ jsx(Alert, { variant: "error", dismissible: true, className: "mb-4", children: error }),
-    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-4", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "name", className: "mb-2", children: "Brand Name *" }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "name", className: "mb-2", children: "Brand name *" }),
         /* @__PURE__ */ jsx(
-          Input,
+          Controller,
           {
-            id: "name",
-            placeholder: "e.g., Nike",
-            value: formData.name,
-            onChange: (e) => handleNameChange(e.target.value),
-            required: true
+            name: "name",
+            control,
+            rules: {
+              required: "Brand name is required",
+              minLength: {
+                value: 2,
+                message: "Brand name must be at least 2 characters"
+              }
+            },
+            render: ({ field }) => /* @__PURE__ */ jsx(Input, { ...field, id: "name", placeholder: "e.g., Nike" })
           }
-        )
+        ),
+        errors.name && /* @__PURE__ */ jsx(Text, { className: "mt-1 text-sm text-ui-fg-error", children: errors.name.message })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "slug", className: "mb-2", children: "Slug *" }),
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "slug", children: "Slug *" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              size: "small",
+              type: "button",
+              onClick: () => {
+                const fallback = generateSlug(nameValue || (brand == null ? void 0 : brand.name) || "");
+                setValue("slug", fallback, { shouldValidate: true });
+                setSlugManuallyEdited(false);
+              },
+              children: "Reset to name"
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
-          Input,
+          Controller,
           {
-            id: "slug",
-            placeholder: "e.g., nike",
-            value: formData.slug,
-            onChange: (e) => handleSlugChange(e.target.value),
-            required: true
+            name: "slug",
+            control,
+            rules: {
+              required: "Slug is required",
+              pattern: {
+                value: SLUG_REGEX,
+                message: "Slug must contain only lowercase letters, numbers, and hyphens"
+              }
+            },
+            render: ({ field }) => /* @__PURE__ */ jsx(
+              Input,
+              {
+                ...field,
+                id: "slug",
+                placeholder: "e.g., nike",
+                onChange: (event) => {
+                  setSlugManuallyEdited(true);
+                  field.onChange(cleanSlug(event.target.value));
+                }
+              }
+            )
           }
         ),
-        slugError && /* @__PURE__ */ jsx(Text, { className: "mt-1 text-sm text-ui-fg-error", children: slugError }),
-        /* @__PURE__ */ jsx(Text, { className: "mt-1 text-xs text-ui-fg-subtle", children: "Used in URLs and must be unique" })
+        errors.slug && /* @__PURE__ */ jsx(Text, { className: "mt-1 text-sm text-ui-fg-error", children: errors.slug.message }),
+        !errors.slug && slugFeedback && /* @__PURE__ */ jsx(Text, { className: "mt-1 text-sm text-ui-fg-positive", children: isCheckingSlug ? "Checking slug availability…" : slugFeedback }),
+        !errors.slug && !slugFeedback && isCheckingSlug && /* @__PURE__ */ jsx(Text, { className: "mt-1 text-sm text-ui-fg-subtle", children: "Checking slug availability…" }),
+        /* @__PURE__ */ jsx(Text, { className: "mt-1 text-xs text-ui-fg-subtle", children: "Slug appears in URLs and must be unique." })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(Label, { htmlFor: "description", className: "mb-2", children: "Description" }),
         /* @__PURE__ */ jsx(
-          Textarea,
+          Controller,
           {
-            id: "description",
-            placeholder: "Enter brand description...",
-            value: formData.description,
-            onChange: (e) => setFormData((prev) => ({
-              ...prev,
-              description: e.target.value
-            })),
-            rows: 4
+            name: "description",
+            control,
+            render: ({ field }) => /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                ...field,
+                id: "description",
+                placeholder: "Tell customers about this brand…",
+                rows: 4
+              }
+            )
           }
         )
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(Label, { htmlFor: "website", className: "mb-2", children: "Website" }),
         /* @__PURE__ */ jsx(
-          Input,
+          Controller,
           {
-            id: "website",
-            type: "url",
-            placeholder: "https://example.com",
-            value: formData.website,
-            onChange: (e) => setFormData((prev) => ({ ...prev, website: e.target.value }))
+            name: "website",
+            control,
+            rules: {
+              pattern: {
+                value: /^https?:\/\/.+/,
+                message: "Website must start with http:// or https://"
+              }
+            },
+            render: ({ field }) => /* @__PURE__ */ jsx(
+              Input,
+              {
+                ...field,
+                id: "website",
+                type: "url",
+                placeholder: "https://example.com"
+              }
+            )
           }
         ),
-        /* @__PURE__ */ jsx(Text, { className: "mt-1 text-xs text-ui-fg-subtle", children: "Include the full URL with http:// or https://" })
+        errors.website && /* @__PURE__ */ jsx(Text, { className: "mt-1 text-sm text-ui-fg-error", children: errors.website.message }),
+        /* @__PURE__ */ jsx(Text, { className: "mt-1 text-xs text-ui-fg-subtle", children: "Provide the full URL including protocol." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "metadata", className: "mb-2", children: "Metadata (JSON)" }),
+        /* @__PURE__ */ jsx(
+          Controller,
+          {
+            name: "metadata",
+            control,
+            render: ({ field }) => /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                ...field,
+                id: "metadata",
+                placeholder: '{"seo_title": "Premium brand"}',
+                rows: 4
+              }
+            )
+          }
+        ),
+        errors.metadata && /* @__PURE__ */ jsx(Text, { className: "mt-1 text-sm text-ui-fg-error", children: errors.metadata.message }),
+        /* @__PURE__ */ jsx(Text, { className: "mt-1 text-xs text-ui-fg-subtle", children: "Store custom data as a JSON object. Leave blank if not needed." })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-lg border p-4", children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "is_active", className: "font-medium", children: "Active Status" }),
-          /* @__PURE__ */ jsx(Text, { className: "text-sm text-ui-fg-subtle", children: "Active brands are visible in your store" })
+          /* @__PURE__ */ jsx(Label, { htmlFor: "is_active", className: "font-medium", children: "Active status" }),
+          /* @__PURE__ */ jsx(Text, { className: "text-sm text-ui-fg-subtle", children: "Inactive brands are hidden from the storefront." })
         ] }),
         /* @__PURE__ */ jsx(
-          Switch,
+          Controller,
           {
-            id: "is_active",
-            checked: formData.is_active,
-            onCheckedChange: (checked) => setFormData((prev) => ({ ...prev, is_active: checked }))
+            name: "is_active",
+            control,
+            render: ({ field }) => /* @__PURE__ */ jsx(
+              Switch,
+              {
+                id: "is_active",
+                checked: field.value,
+                onCheckedChange: field.onChange
+              }
+            )
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3 pt-4 border-t", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3 border-t pt-4", children: [
         /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }),
-        /* @__PURE__ */ jsx(Button, { type: "submit", disabled: loading, children: loading ? "Saving..." : isCreating ? "Create Brand" : "Update Brand" })
+        /* @__PURE__ */ jsx(Button, { type: "submit", disabled: loading, children: loading ? "Saving…" : isCreating ? "Create brand" : "Update brand" })
       ] })
     ] })
   ] }) });
@@ -447,14 +930,14 @@ const BrandImageUploader = ({
   const [error, setError] = useState(null);
   const [previewUrl, setPreviewUrl] = useState(null);
   const isLogo = imageType === "logo";
-  const maxSize = isLogo ? 2 : 5;
-  const allowedTypes = isLogo ? ["image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml"] : ["image/jpeg", "image/png", "image/gif", "image/webp"];
+  const maxSize = isLogo ? 5 : 10;
+  const allowedTypes = isLogo ? ["image/jpeg", "image/jpg", "image/png", "image/webp", "image/svg+xml"] : ["image/jpeg", "image/jpg", "image/png", "image/webp"];
   const formatFileTypes = () => {
-    return isLogo ? "JPEG, PNG, GIF, WebP, or SVG" : "JPEG, PNG, GIF, or WebP";
+    return isLogo ? "PNG, JPG, JPEG, WebP, or SVG" : "PNG, JPG, JPEG, or WebP";
   };
   const validateFile = (file) => {
     if (!allowedTypes.includes(file.type)) {
-      setError(`Please upload a valid image file (${formatFileTypes()})`);
+      setError(`Please upload a supported file type (${formatFileTypes()})`);
       return false;
     }
     if (file.size > maxSize * 1024 * 1024) {
@@ -463,18 +946,30 @@ const BrandImageUploader = ({
     }
     return true;
   };
-  const handleFileUpload = async (file) => {
-    if (!validateFile(file)) return;
-    setError(null);
+  const readFileAsDataUrl = (file) => new Promise((resolve, reject) => {
     const reader = new FileReader();
-    reader.onloadend = () => {
-      setPreviewUrl(reader.result);
+    reader.onload = () => {
+      if (typeof reader.result === "string") {
+        resolve(reader.result);
+      } else {
+        reject(new Error("Failed to read file"));
+      }
+    };
+    reader.onerror = () => {
+      reject(reader.error ?? new Error("Failed to read file"));
     };
     reader.readAsDataURL(file);
+  });
+  const handleFileUpload = async (file) => {
+    var _a;
+    if (!validateFile(file)) return;
+    setError(null);
     setIsUploading(true);
-    const formData = new FormData();
-    formData.append("file", file);
     try {
+      const dataUrl = await readFileAsDataUrl(file);
+      setPreviewUrl(dataUrl);
+      const formData = new FormData();
+      formData.append("file", file);
       const response = await sdk.client.fetch(
         `/admin/brands/${brand.id}/${imageType}`,
         {
@@ -482,22 +977,25 @@ const BrandImageUploader = ({
           body: formData
         }
       );
-      if (response.ok) {
-        const result = await response.json();
-        const newImageUrl = result.brand[imageType];
-        setDisplayImage(newImageUrl);
-        setPreviewUrl(null);
-        setTimeout(() => {
-          onClose();
-        }, 1e3);
-      } else {
-        const errorData = await response.json();
-        setError(errorData.error || `Failed to upload ${imageType}`);
+      const newImageUrl = ((_a = response == null ? void 0 : response.brand) == null ? void 0 : _a[imageType]) || null;
+      if (!newImageUrl) {
+        const message = `Failed to upload ${imageType}`;
+        setError(message);
+        toast.error(message);
         setPreviewUrl(null);
+        return;
       }
+      setDisplayImage(newImageUrl);
+      setPreviewUrl(null);
+      toast.success(`${isLogo ? "Logo" : "Image"} uploaded successfully`);
+      setTimeout(() => {
+        onClose();
+      }, 800);
     } catch (err) {
-      setError(`Error uploading ${imageType}`);
+      const message = err instanceof FetchError ? err.message || `Failed to upload ${imageType}` : err instanceof Error ? err.message : `Failed to upload ${imageType}`;
+      setError(message);
       setPreviewUrl(null);
+      toast.error(message);
       console.error(`Error uploading ${imageType}:`, err);
     } finally {
       setIsUploading(false);
@@ -508,24 +1006,19 @@ const BrandImageUploader = ({
     setIsUploading(true);
     setError(null);
     try {
-      const response = await sdk.client.fetch(
-        `/admin/brands/${brand.id}/${imageType}`,
-        {
-          method: "DELETE"
-        }
-      );
-      if (response.ok) {
-        setDisplayImage(null);
-        setPreviewUrl(null);
-        setTimeout(() => {
-          onClose();
-        }, 500);
-      } else {
-        const errorData = await response.json();
-        setError(errorData.error || `Failed to delete ${imageType}`);
-      }
+      await sdk.client.fetch(`/admin/brands/${brand.id}/${imageType}`, {
+        method: "DELETE"
+      });
+      setDisplayImage(null);
+      setPreviewUrl(null);
+      toast.success(`${isLogo ? "Logo" : "Image"} removed successfully`);
+      setTimeout(() => {
+        onClose();
+      }, 500);
     } catch (err) {
-      setError(`Error deleting ${imageType}`);
+      const message = err instanceof FetchError ? err.message || `Failed to delete ${imageType}` : err instanceof Error ? err.message : `Failed to delete ${imageType}`;
+      setError(message);
+      toast.error(message);
       console.error(`Error deleting ${imageType}:`, err);
     } finally {
       setIsUploading(false);
@@ -565,7 +1058,7 @@ const BrandImageUploader = ({
         ] }),
         /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: brand.name })
       ] }),
-      /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", onClick: onClose, children: /* @__PURE__ */ jsx(X, {}) })
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", onClick: onClose, children: /* @__PURE__ */ jsx(XMark, {}) })
     ] }),
     error && /* @__PURE__ */ jsx(Alert, { variant: "error", dismissible: true, className: "mb-4", children: error }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
@@ -640,7 +1133,6 @@ const BrandImageUploader = ({
               maxSize,
               "MB"
             ] }),
-            isLogo && /* @__PURE__ */ jsx(Text, { className: "mt-2 text-xs text-ui-fg-subtle", children: "Recommended: Square image, minimum 200x200px" }),
             isUploading && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(Text, { children: "Uploading..." }) })
           ]
         }
@@ -667,49 +1159,112 @@ const BrandImageUploader = ({
     ] })
   ] }) });
 };
+const PAGE_SIZE = 10;
+const SORT_OPTIONS = [
+  {
+    id: "created_desc",
+    label: "Created · Newest",
+    sort_by: "created_at",
+    sort_order: "desc"
+  },
+  {
+    id: "created_asc",
+    label: "Created · Oldest",
+    sort_by: "created_at",
+    sort_order: "asc"
+  },
+  {
+    id: "updated_desc",
+    label: "Updated · Recent",
+    sort_by: "updated_at",
+    sort_order: "desc"
+  },
+  {
+    id: "updated_asc",
+    label: "Updated · Oldest",
+    sort_by: "updated_at",
+    sort_order: "asc"
+  },
+  {
+    id: "name_asc",
+    label: "Name · A → Z",
+    sort_by: "name",
+    sort_order: "asc"
+  },
+  {
+    id: "name_desc",
+    label: "Name · Z → A",
+    sort_by: "name",
+    sort_order: "desc"
+  }
+];
+const statusFilters = [
+  { id: "all", label: "All" },
+  { id: "active", label: "Active" },
+  { id: "inactive", label: "Inactive" }
+];
 const BrandsPage = () => {
   const [brands, setBrands] = useState([]);
+  const [totalCount, setTotalCount] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [statusFilter, setStatusFilter] = useState("all");
+  const [sortOption, setSortOption] = useState(SORT_OPTIONS[0]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [selectedBrand, setSelectedBrand] = useState(null);
   const [showForm, setShowForm] = useState(false);
   const [showImageUploader, setShowImageUploader] = useState(false);
   const [imageType, setImageType] = useState("image");
-  const [searchQuery, setSearchQuery] = useState("");
   const [isCreating, setIsCreating] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const dialog = usePrompt();
   useEffect(() => {
-    fetchBrands();
-  }, []);
-  const fetchBrands = async () => {
+    const handle = window.setTimeout(() => {
+      setDebouncedSearch(searchTerm.trim());
+    }, 300);
+    return () => window.clearTimeout(handle);
+  }, [searchTerm]);
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [debouncedSearch, statusFilter, sortOption.id]);
+  const fetchBrands = useCallback(async () => {
     setLoading(true);
     setError(null);
+    const params = new URLSearchParams({
+      limit: String(PAGE_SIZE),
+      offset: String((currentPage - 1) * PAGE_SIZE),
+      sort_by: sortOption.sort_by,
+      sort_order: sortOption.sort_order
+    });
+    if (debouncedSearch) {
+      params.set("q", debouncedSearch);
+    }
+    if (statusFilter !== "all") {
+      params.set("status", statusFilter);
+    }
     try {
-      const queryParams = new URLSearchParams({ limit: "100" });
-      if (searchQuery) {
-        queryParams.append("q", searchQuery);
-      }
-      const response = await sdk.client.fetch(
-        `/admin/brands?${queryParams}`,
-        {}
+      const data = await sdk.client.fetch(
+        `/admin/brands?${params.toString()}`,
+        {
+          method: "GET"
+        }
       );
-      if (response.ok) {
-        const data = await response.json();
-        setBrands(data.brands || []);
-      } else {
-        setError("Failed to fetch brands");
-      }
+      setBrands((data == null ? void 0 : data.brands) ?? []);
+      setTotalCount((data == null ? void 0 : data.count) ?? 0);
     } catch (err) {
-      if (err instanceof FetchError && err.status === 404) {
-        setBrands([]);
-        setError(null);
-      } else {
-        setError("Error fetching brands");
-        console.error("Error fetching brands:", err);
-      }
+      const message = err instanceof FetchError ? err.message : err instanceof Error ? err.message : "Error fetching brands";
+      setError(message || "Error fetching brands");
+      setBrands([]);
+      setTotalCount(0);
     } finally {
       setLoading(false);
     }
-  };
+  }, [currentPage, debouncedSearch, statusFilter, sortOption]);
+  useEffect(() => {
+    fetchBrands();
+  }, [fetchBrands]);
   const handleCreateBrand = () => {
     setIsCreating(true);
     setSelectedBrand(null);
@@ -721,44 +1276,41 @@ const BrandsPage = () => {
     setShowForm(true);
   };
   const handleDeleteBrand = async (brandId) => {
-    if (!confirm(
-      "Are you sure you want to delete this brand? This action cannot be undone."
-    )) {
+    const confirmed = await dialog({
+      title: "Delete brand",
+      description: "This will remove the brand and detach it from any associated products.",
+      confirmText: "Delete",
+      cancelText: "Cancel",
+      variant: "danger"
+    });
+    if (!confirmed) {
       return;
     }
+    setIsDeleting(true);
     try {
-      const response = await sdk.client.fetch(`/admin/brands/${brandId}`, {
+      await sdk.client.fetch(`/admin/brands/${brandId}`, {
         method: "DELETE"
       });
-      if (response.ok) {
-        fetchBrands();
-      } else {
-        alert("Failed to delete brand");
-      }
+      await fetchBrands();
     } catch (err) {
-      alert("Error deleting brand");
-      console.error("Error deleting brand:", err);
+      const message = err instanceof FetchError ? err.message : err instanceof Error ? err.message : "Error deleting brand";
+      setError(message || "Error deleting brand");
+    } finally {
+      setIsDeleting(false);
     }
   };
   const handleToggleActive = async (brand) => {
     try {
-      const response = await sdk.client.fetch(`/admin/brands/${brand.id}`, {
+      await sdk.client.fetch(`/admin/brands/${brand.id}`, {
         method: "PUT",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
+        body: {
           is_active: !brand.is_active
-        })
+        }
       });
-      if (response.ok) {
-        fetchBrands();
-      } else {
-        alert("Failed to update brand status");
-      }
+      await fetchBrands();
     } catch (err) {
-      alert("Error updating brand status");
-      console.error("Error updating brand status:", err);
+      const message = err instanceof FetchError ? err.message : err instanceof Error ? err.message : "Error updating brand status";
+      setError(message || "Error updating brand status");
     }
   };
   const handleImageUpload = (brand, type) => {
@@ -766,164 +1318,247 @@ const BrandsPage = () => {
     setImageType(type);
     setShowImageUploader(true);
   };
-  const handleFormClose = () => {
+  const handleFormClose = async () => {
     setShowForm(false);
     setSelectedBrand(null);
     setIsCreating(false);
-    fetchBrands();
+    await fetchBrands();
   };
-  const handleImageUploaderClose = () => {
+  const handleImageUploaderClose = async () => {
     setShowImageUploader(false);
     setSelectedBrand(null);
-    fetchBrands();
+    await fetchBrands();
   };
-  const filteredBrands = brands.filter((brand) => {
-    var _a;
-    if (!searchQuery) return true;
-    const query = searchQuery.toLowerCase();
-    return brand.name.toLowerCase().includes(query) || brand.slug.toLowerCase().includes(query) || ((_a = brand.description) == null ? void 0 : _a.toLowerCase().includes(query));
-  });
-  if (loading) {
-    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center", children: /* @__PURE__ */ jsx(Text, { children: "Loading brands..." }) }) });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Alert, { variant: "error", dismissible: true, children: error }) });
+  const totalPages = Math.max(Math.ceil(totalCount / PAGE_SIZE), 1);
+  const pageNumbers = useMemo(() => {
+    const pages = /* @__PURE__ */ new Set([1, totalPages]);
+    pages.add(currentPage);
+    pages.add(currentPage - 1);
+    pages.add(currentPage + 1);
+    pages.add(currentPage - 2);
+    pages.add(currentPage + 2);
+    const filtered = Array.from(pages).filter((page) => page >= 1 && page <= totalPages).sort((a, b) => a - b);
+    return filtered;
+  }, [currentPage, totalPages]);
+  if (loading && brands.length === 0) {
+    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx("div", { className: "flex h-64 items-center justify-center", children: /* @__PURE__ */ jsx(Text, { children: "Loading brands…" }) }) });
   }
   return /* @__PURE__ */ jsxs(Container, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-8 space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Heading, { level: "h1", className: "mb-2", children: "Brands" }),
-          /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: "Manage your product brands and their images" })
+          /* @__PURE__ */ jsx(Heading, { level: "h1", children: "Brands" }),
+          /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: "Organize products by brand, manage visibility, and upload brand assets." })
         ] }),
         /* @__PURE__ */ jsxs(Button, { onClick: handleCreateBrand, children: [
           /* @__PURE__ */ jsx(Plus, { className: "mr-2" }),
           "Create Brand"
         ] })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxs("div", { className: "relative flex-1 max-w-md", children: [
-        /* @__PURE__ */ jsx(
-          Input,
+      error && /* @__PURE__ */ jsx(Alert, { variant: "error", dismissible: true, children: error }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-[220px] max-w-md", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: searchTerm,
+              onChange: (event) => setSearchTerm(event.target.value),
+              placeholder: "Search by name, slug, or description",
+              className: "pl-10"
+            }
+          ),
+          /* @__PURE__ */ jsx(MagnifyingGlass, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-ui-fg-muted" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: statusFilters.map((filter) => /* @__PURE__ */ jsx(
+          Button,
           {
-            placeholder: "Search brands...",
-            value: searchQuery,
-            onChange: (e) => setSearchQuery(e.target.value),
-            className: "pl-10"
-          }
-        ),
-        /* @__PURE__ */ jsx(MagnifyingGlass, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-ui-fg-muted" })
-      ] }) })
+            size: "small",
+            variant: statusFilter === filter.id ? "primary" : "secondary",
+            onClick: () => setStatusFilter(filter.id),
+            children: filter.label
+          },
+          filter.id
+        )) }),
+        /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "small", children: [
+            "Sort: ",
+            sortOption.label
+          ] }) }),
+          /* @__PURE__ */ jsx(DropdownMenu.Content, { children: SORT_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+            DropdownMenu.Item,
+            {
+              onClick: () => setSortOption(option),
+              children: option.label
+            },
+            option.id
+          )) })
+        ] })
+      ] })
     ] }),
-    filteredBrands.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex h-64 flex-col items-center justify-center rounded-lg border-2 border-dashed border-ui-border-base", children: [
+    brands.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex h-64 flex-col items-center justify-center rounded-lg border-2 border-dashed border-ui-border-base text-center", children: [
       /* @__PURE__ */ jsx(BuildingStorefront, { className: "mb-4 h-12 w-12 text-ui-fg-subtle" }),
-      /* @__PURE__ */ jsx(Text, { className: "mb-2 text-lg font-medium", children: searchQuery ? "No brands found" : "No brands yet" }),
-      /* @__PURE__ */ jsx(Text, { className: "mb-4 text-ui-fg-subtle", children: searchQuery ? "Try adjusting your search query" : "Create your first brand to get started" }),
-      !searchQuery && /* @__PURE__ */ jsxs(Button, { onClick: handleCreateBrand, children: [
+      /* @__PURE__ */ jsx(Text, { className: "mb-2 text-lg font-medium", children: debouncedSearch ? "No brands match your filters" : "No brands yet" }),
+      /* @__PURE__ */ jsx(Text, { className: "mb-4 text-ui-fg-subtle max-w-md", children: debouncedSearch ? "Try adjusting your search or filters to see more results." : "Create your first brand to showcase manufacturers and power brand-based merchandising." }),
+      !debouncedSearch && /* @__PURE__ */ jsxs(Button, { onClick: handleCreateBrand, children: [
         /* @__PURE__ */ jsx(Plus, { className: "mr-2" }),
         "Create Brand"
       ] })
-    ] }) : /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border", children: /* @__PURE__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
-        /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Logo" }),
-        /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Name" }),
-        /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Slug" }),
-        /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Status" }),
-        /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Images" }),
-        /* @__PURE__ */ jsx(Table.HeaderCell, { className: "text-right", children: "Actions" })
-      ] }) }),
-      /* @__PURE__ */ jsx(Table.Body, { children: filteredBrands.map((brand) => /* @__PURE__ */ jsxs(Table.Row, { children: [
-        /* @__PURE__ */ jsx(Table.Cell, { children: brand.logo ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: brand.logo,
-            alt: `${brand.name} logo`,
-            className: "h-10 w-10 object-contain rounded"
-          }
-        ) : /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded bg-ui-bg-subtle", children: /* @__PURE__ */ jsx(BuildingStorefront, { className: "h-5 w-5 text-ui-fg-subtle" }) }) }),
-        /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Text, { className: "font-medium", children: brand.name }),
-          brand.website && /* @__PURE__ */ jsx(Text, { className: "text-xs text-ui-fg-subtle", children: brand.website })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-lg border", children: [
+      /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+          /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Logo" }),
+          /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Name" }),
+          /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Slug" }),
+          /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Status" }),
+          /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Assets" }),
+          /* @__PURE__ */ jsx(Table.HeaderCell, { className: "text-right", children: "Actions" })
         ] }) }),
-        /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Badge, { color: "blue", children: brand.slug }) }),
-        /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Badge, { color: brand.is_active ? "green" : "grey", children: brand.is_active ? "Active" : "Inactive" }) }),
-        /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-          brand.image && /* @__PURE__ */ jsxs(Badge, { color: "green", size: "xsmall", children: [
-            /* @__PURE__ */ jsx(PhotoSolid, { className: "mr-1" }),
-            "Image"
-          ] }),
-          brand.logo && /* @__PURE__ */ jsxs(Badge, { color: "green", size: "xsmall", children: [
-            /* @__PURE__ */ jsx(BuildingStorefront, { className: "mr-1" }),
-            "Logo"
-          ] }),
-          !brand.image && !brand.logo && /* @__PURE__ */ jsx(Text, { className: "text-sm text-ui-fg-muted", children: "No images" })
-        ] }) }),
-        /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-2", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-          /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "transparent", size: "small", children: /* @__PURE__ */ jsx(EllipsisHorizontal, {}) }) }),
-          /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
-            /* @__PURE__ */ jsxs(
-              DropdownMenu.Item,
-              {
-                onClick: () => handleEditBrand(brand),
-                children: [
-                  /* @__PURE__ */ jsx(PencilSquare, { className: "mr-2" }),
-                  "Edit Details"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
-            /* @__PURE__ */ jsxs(
-              DropdownMenu.Item,
-              {
-                onClick: () => handleImageUpload(brand, "image"),
-                children: [
-                  /* @__PURE__ */ jsx(CloudArrowUp, { className: "mr-2" }),
-                  brand.image ? "Replace Image" : "Upload Image"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              DropdownMenu.Item,
-              {
-                onClick: () => handleImageUpload(brand, "logo"),
-                children: [
-                  /* @__PURE__ */ jsx(CloudArrowUp, { className: "mr-2" }),
-                  brand.logo ? "Replace Logo" : "Upload Logo"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
-            /* @__PURE__ */ jsxs(
-              DropdownMenu.Item,
+        /* @__PURE__ */ jsx(Table.Body, { children: brands.map((brand) => /* @__PURE__ */ jsxs(Table.Row, { children: [
+          /* @__PURE__ */ jsx(Table.Cell, { children: brand.logo ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: brand.logo,
+              alt: `${brand.name} logo`,
+              className: "h-10 w-10 rounded object-contain"
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded bg-ui-bg-subtle", children: /* @__PURE__ */ jsx(BuildingStorefront, { className: "h-5 w-5 text-ui-fg-subtle" }) }) }),
+          /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+            /* @__PURE__ */ jsx(Text, { className: "font-medium", children: brand.name }),
+            brand.website && /* @__PURE__ */ jsx(Text, { className: "text-xs text-ui-fg-subtle truncate max-w-[220px]", children: brand.website })
+          ] }) }),
+          /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Badge, { color: "blue", children: brand.slug }) }),
+          /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Switch,
               {
-                onClick: () => handleToggleActive(brand),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    Switch,
-                    {
-                      checked: brand.is_active,
-                      className: "mr-2 pointer-events-none"
-                    }
-                  ),
-                  brand.is_active ? "Deactivate" : "Activate"
-                ]
+                checked: brand.is_active,
+                onCheckedChange: () => handleToggleActive(brand),
+                "aria-label": `Toggle ${brand.name} visibility`
               }
             ),
-            /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
-            /* @__PURE__ */ jsxs(
-              DropdownMenu.Item,
-              {
-                onClick: () => handleDeleteBrand(brand.id),
-                className: "text-ui-fg-error",
-                children: [
-                  /* @__PURE__ */ jsx(Trash, { className: "mr-2" }),
-                  "Delete Brand"
-                ]
-              }
-            )
-          ] })
-        ] }) }) })
-      ] }, brand.id)) })
-    ] }) }),
+            /* @__PURE__ */ jsx(Text, { className: "text-sm text-ui-fg-subtle", children: brand.is_active ? "Active" : "Inactive" })
+          ] }) }),
+          /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            brand.image && /* @__PURE__ */ jsxs(Badge, { color: "green", size: "xsmall", children: [
+              /* @__PURE__ */ jsx(PhotoSolid, { className: "mr-1" }),
+              " Image"
+            ] }),
+            brand.logo && /* @__PURE__ */ jsxs(Badge, { color: "green", size: "xsmall", children: [
+              /* @__PURE__ */ jsx(BuildingStorefront, { className: "mr-1" }),
+              " Logo"
+            ] }),
+            !brand.image && !brand.logo && /* @__PURE__ */ jsx(Text, { className: "text-sm text-ui-fg-muted", children: "No assets" })
+          ] }) }),
+          /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { variant: "transparent", size: "small", children: /* @__PURE__ */ jsx(EllipsisHorizontal, {}) }) }),
+            /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
+              /* @__PURE__ */ jsxs(
+                DropdownMenu.Item,
+                {
+                  onClick: () => handleEditBrand(brand),
+                  children: [
+                    /* @__PURE__ */ jsx(PencilSquare, { className: "mr-2" }),
+                    " Edit details"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+              /* @__PURE__ */ jsxs(
+                DropdownMenu.Item,
+                {
+                  onClick: () => handleImageUpload(brand, "image"),
+                  children: [
+                    /* @__PURE__ */ jsx(CloudArrowUp, { className: "mr-2" }),
+                    brand.image ? "Replace image" : "Upload image"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                DropdownMenu.Item,
+                {
+                  onClick: () => handleImageUpload(brand, "logo"),
+                  children: [
+                    /* @__PURE__ */ jsx(CloudArrowUp, { className: "mr-2" }),
+                    brand.logo ? "Replace logo" : "Upload logo"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+              /* @__PURE__ */ jsxs(
+                DropdownMenu.Item,
+                {
+                  className: "text-ui-fg-error",
+                  disabled: isDeleting,
+                  onClick: () => handleDeleteBrand(brand.id),
+                  children: [
+                    /* @__PURE__ */ jsx(Trash, { className: "mr-2" }),
+                    " Delete brand"
+                  ]
+                }
+              )
+            ] })
+          ] }) }) })
+        ] }, brand.id)) })
+      ] }),
+      totalCount > PAGE_SIZE && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-t px-4 py-3 text-sm", children: [
+        /* @__PURE__ */ jsxs(Text, { className: "text-ui-fg-subtle", children: [
+          "Showing",
+          " ",
+          Math.min((currentPage - 1) * PAGE_SIZE + 1, totalCount),
+          " to",
+          " ",
+          Math.min(currentPage * PAGE_SIZE, totalCount),
+          " of ",
+          totalCount,
+          " ",
+          "brands"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "secondary",
+              size: "small",
+              disabled: currentPage === 1,
+              onClick: () => setCurrentPage((page) => Math.max(page - 1, 1)),
+              children: [
+                /* @__PURE__ */ jsx(ChevronLeft, {}),
+                " Previous"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: pageNumbers.map((page, index) => {
+            const previous = pageNumbers[index - 1];
+            const showEllipsis = previous && page - previous > 1;
+            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              showEllipsis && /* @__PURE__ */ jsx(Text, { className: "px-1", children: "…" }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: page === currentPage ? "primary" : "secondary",
+                  onClick: () => setCurrentPage(page),
+                  children: page
+                }
+              )
+            ] }, page);
+          }) }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "secondary",
+              size: "small",
+              disabled: currentPage >= totalPages,
+              onClick: () => setCurrentPage((page) => Math.min(page + 1, totalPages)),
+              children: [
+                "Next ",
+                /* @__PURE__ */ jsx(ChevronRight, {})
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
     showForm && /* @__PURE__ */ jsx(
       BrandForm,
       {