use default exports and not named exports

components/commerce/collection-grid.editor.tsx

@@ -2,7 +2,7 @@ import { ComponentConfig } from "@reacteditor/core";
 import { FolderOpen } from "lucide-react";
 import { CollectionGrid, type CollectionGridProps } from "@/components/commerce/collection-grid";
 
-export const collectionGridEditor: ComponentConfig<CollectionGridProps> = {
+const collectionGridEditor: ComponentConfig<CollectionGridProps> = {
   label: "Collections",
   icon: <FolderOpen size={16} />,
   category: "commerce",
@@ -29,3 +29,5 @@ export const collectionGridEditor: ComponentConfig<CollectionGridProps> = {
   },
   render: (props) => <CollectionGrid {...props} />,
 };
+
+export default collectionGridEditor;

components/commerce/collection.editor.tsx

@@ -4,10 +4,7 @@ import { imageField } from "@reacteditor/plugin-media/field";
 import { frontendAiMediaAdapter } from "@/services/media-adapter";
 import { CollectionView, type CollectionProps } from "@/components/commerce/collection";
 
-export function createCollectionEditor(opts: {
-  collectionField: any;
-}): ComponentConfig<CollectionProps> {
-  return {
+const collectionEditor: ComponentConfig<CollectionProps> = {
     label: "Collection page",
     icon: <FolderOpen size={16} />,
     category: "commerce",
@@ -48,7 +45,7 @@ export function createCollectionEditor(opts: {
       metafieldFilters: [],
     },
     fields: {
-      collection: { label: "Collection", ...opts.collectionField },
+      collection: { label: "Collection", type: "shopifyCollection" } as any,
       showDescription: {
         label: "Description",
         type: "radio",
@@ -247,5 +244,6 @@ export function createCollectionEditor(opts: {
       },
     },
     render: (props) => <CollectionView {...props} />,
-  };
-}
+};
+
+export default collectionEditor;

components/commerce/featured-product.editor.tsx

@@ -2,10 +2,7 @@ import { ComponentConfig } from "@reacteditor/core";
 import { Star } from "lucide-react";
 import { FeaturedProductView, type FeaturedProductProps } from "@/components/commerce/featured-product";
 
-export function createFeaturedProductEditor(opts: {
-  productField: any;
-}): ComponentConfig<FeaturedProductProps> {
-  return {
+const featuredProductEditor: ComponentConfig<FeaturedProductProps> = {
     label: "Featured product",
     icon: <Star size={16} />,
     category: "commerce",
@@ -17,7 +14,7 @@ export function createFeaturedProductEditor(opts: {
       tone: "default",
     },
     fields: {
-      product: { label: "Product", ...opts.productField },
+      product: { label: "Product", type: "shopifyProduct" } as any,
       tagline: { label: "Tagline", type: "text", contentEditable: true },
       ctaLabel: { label: "CTA label", type: "text", contentEditable: true },
       align: {
@@ -38,5 +35,6 @@ export function createFeaturedProductEditor(opts: {
       },
     },
     render: (props) => <FeaturedProductView {...props} />,
-  };
-}
+};
+
+export default featuredProductEditor;

components/commerce/product-details.editor.tsx

@@ -2,15 +2,13 @@ import { ComponentConfig } from "@reacteditor/core";
 import { Package } from "lucide-react";
 import { ProductDetailsView, type ProductDetailsProps } from "@/components/commerce/product-details";
 
-export function createProductDetailsEditor(opts: {
-  productField: any;
-}): ComponentConfig<ProductDetailsProps> {
-  return {
+const productDetailsEditor: ComponentConfig<ProductDetailsProps> = {
     label: "Product details",
     icon: <Package size={16} />,
     category: "commerce",
     defaultProps: { product: null },
-    fields: { product: { label: "Product", ...opts.productField } },
+    fields: { product: { label: "Product", type: "shopifyProduct" } as any },
     render: (props) => <ProductDetailsView {...props} />,
-  };
-}
+};
+
+export default productDetailsEditor;

components/commerce/products-carousel.editor.tsx

@@ -2,10 +2,7 @@ import { ComponentConfig } from "@reacteditor/core";
 import { GalleryHorizontalEnd } from "lucide-react";
 import { ProductsCarousel, type ProductsCarouselProps } from "@/components/commerce/products-carousel";
 
-export function createProductsCarouselEditor(opts: {
-  collectionField: any;
-}): ComponentConfig<ProductsCarouselProps> {
-  return {
+const productsCarouselEditor: ComponentConfig<ProductsCarouselProps> = {
     label: "Products carousel",
     icon: <GalleryHorizontalEnd size={16} />,
     category: "commerce",
@@ -20,7 +17,7 @@ export function createProductsCarouselEditor(opts: {
       ctaHref: "",
     },
     fields: {
-      collection: { label: "Collection", ...opts.collectionField },
+      collection: { label: "Collection", type: "shopifyCollection" } as any,
       tagline: { label: "Tagline", type: "text", contentEditable: true },
       heading: { label: "Heading", type: "text", contentEditable: true },
       subheading: { label: "Subheading", type: "textarea", contentEditable: true },
@@ -38,5 +35,6 @@ export function createProductsCarouselEditor(opts: {
       ctaHref: { label: "CTA link", type: "text" },
     },
     render: (props) => <ProductsCarousel {...props} />,
-  };
-}
+};
+
+export default productsCarouselEditor;

components/commerce/products-grid.editor.tsx

@@ -2,10 +2,7 @@ import { ComponentConfig } from "@reacteditor/core";
 import { LayoutGrid } from "lucide-react";
 import { ProductsGrid, type ProductsGridProps } from "@/components/commerce/products-grid";
 
-export function createProductsGridEditor(opts: {
-  collectionField: any;
-}): ComponentConfig<ProductsGridProps> {
-  return {
+const productsGridEditor: ComponentConfig<ProductsGridProps> = {
     label: "Products grid",
     icon: <LayoutGrid size={16} />,
     category: "commerce",
@@ -20,7 +17,7 @@ export function createProductsGridEditor(opts: {
       ctaHref: "",
     },
     fields: {
-      collection: { label: "Collection", ...opts.collectionField },
+      collection: { label: "Collection", type: "shopifyCollection" } as any,
       tagline: { label: "Tagline", type: "text", contentEditable: true },
       heading: { label: "Heading", type: "text", contentEditable: true },
       subheading: { label: "Subheading", type: "textarea", contentEditable: true },
@@ -37,5 +34,6 @@ export function createProductsGridEditor(opts: {
       ctaHref: { label: "CTA link", type: "text" },
     },
     render: (props) => <ProductsGrid {...props} />,
-  };
-}
+};
+
+export default productsGridEditor;

components/commerce/recommended-products.editor.tsx

@@ -2,10 +2,7 @@ import { ComponentConfig } from "@reacteditor/core";
 import { Sparkles } from "lucide-react";
 import { RecommendedProductsView, type RecommendedProductsProps } from "@/components/commerce/recommended-products";
 
-export function createRecommendedProductsEditor(opts: {
-  productField: any;
-}): ComponentConfig<RecommendedProductsProps> {
-  return {
+const recommendedProductsEditor: ComponentConfig<RecommendedProductsProps> = {
     label: "Recommended products",
     icon: <Sparkles size={16} />,
     category: "commerce",
@@ -16,11 +13,12 @@ export function createRecommendedProductsEditor(opts: {
       limit: 4,
     },
     fields: {
-      product: { label: "Source product", ...opts.productField },
+      product: { label: "Source product", type: "shopifyProduct" } as any,
       tagline: { label: "Tagline", type: "text", contentEditable: true },
       heading: { label: "Heading", type: "text", contentEditable: true },
       limit: { label: "Limit", type: "number", min: 2, max: 8 },
     },
     render: (props) => <RecommendedProductsView {...props} />,
-  };
-}
+};
+
+export default recommendedProductsEditor;

components/commerce/search-products.editor.tsx

@@ -2,7 +2,7 @@ import { ComponentConfig } from '@reacteditor/core';
 import { Search } from 'lucide-react';
 import { SearchProductsView, type SearchProductsProps } from '@/components/commerce/search-products';
 
-export const searchProductsEditor: ComponentConfig<SearchProductsProps> = {
+const searchProductsEditor: ComponentConfig<SearchProductsProps> = {
   label: 'Search & filter',
   icon: <Search size={16} />,
   category: 'commerce',
@@ -240,3 +240,5 @@ export const searchProductsEditor: ComponentConfig<SearchProductsProps> = {
   },
   render: (props) => <SearchProductsView {...props} />,
 };
+
+export default searchProductsEditor;