{
  "name": "collection-page",
  "title": "CollectionPage",
  "description": "Curated product collection with header and grid.",
  "type": "component",
  "registryDependencies": [
    "product-grid",
    "cn"
  ],
  "files": [
    {
      "path": "collection-page.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Product, Collection } from \"@cimplify/sdk\";\nimport { useCollection } from \"@cimplify/sdk/react\";\nimport type { CollectionLayoutProps } from \"./collection-layouts/shared\";\nimport { DefaultCollectionLayout } from \"./collection-layouts/default-collection-layout\";\nimport { FeaturedCollectionLayout } from \"./collection-layouts/featured-collection-layout\";\nimport { CatalogueCollectionLayout } from \"./collection-layouts/catalogue-collection-layout\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport type { CollectionLayoutProps };\n\nexport enum CollectionTemplate {\n  Default = \"default\",\n  Featured = \"featured\",\n  Catalogue = \"catalogue\",\n}\n\nexport interface CollectionPageClassNames {\n  root?: string;\n  loading?: string;\n}\n\nexport interface CollectionPageProps {\n  /** Collection slug or ID. */\n  collectionId?: string;\n  /** Pre-fetched collection for SSR. */\n  collection?: Collection;\n  /** Pre-fetched products for SSR. */\n  products?: Product[];\n  /** Per-slug page map. Highest priority — maps a collection slug to a custom layout. */\n  pages?: Record<string, React.ComponentType<CollectionLayoutProps>>;\n  /** Per-type template map. Overrides built-in layouts. */\n  templates?: Partial<Record<CollectionTemplate | string, React.ComponentType<CollectionLayoutProps>>>;\n  /** Custom card renderer. */\n  renderCard?: (product: Product) => React.ReactNode;\n  /** Custom image renderer. */\n  renderImage?: (props: { src: string; alt: string; className?: string }) => React.ReactNode;\n  /** Custom link renderer. */\n  renderLink?: (props: { href: string; className?: string; children: React.ReactNode }) => React.ReactElement;\n  /** Quick add handler for cards. */\n  onQuickAdd?: (product: Product) => void;\n  className?: string;\n  classNames?: CollectionPageClassNames;\n}\n\nconst BUILT_IN_LAYOUTS: Record<string, React.ComponentType<CollectionLayoutProps>> = {\n  [CollectionTemplate.Default]: DefaultCollectionLayout,\n  [CollectionTemplate.Featured]: FeaturedCollectionLayout,\n  [CollectionTemplate.Catalogue]: CatalogueCollectionLayout,\n};\n\nconst LARGE_COLLECTION_THRESHOLD = 30;\n\nfunction resolveTemplateKey(collection: Collection, productCount: number): CollectionTemplate | string {\n  const metaTemplate = collection.metadata?.page_template;\n  if (typeof metaTemplate === \"string\" && metaTemplate.trim()) {\n    return metaTemplate.trim();\n  }\n\n  if (collection.tags?.includes(\"featured\") || collection.metadata?.is_featured === true) {\n    return CollectionTemplate.Featured;\n  }\n\n  if (productCount > LARGE_COLLECTION_THRESHOLD) {\n    return CollectionTemplate.Catalogue;\n  }\n\n  return CollectionTemplate.Default;\n}\n\nfunction resolveLayout(\n  collection: Collection,\n  productCount: number,\n  pages?: Record<string, React.ComponentType<CollectionLayoutProps>>,\n  templates?: Partial<Record<string, React.ComponentType<CollectionLayoutProps>>>,\n): React.ComponentType<CollectionLayoutProps> {\n  if (pages?.[collection.slug]) {\n    return pages[collection.slug];\n  }\n\n  const key = resolveTemplateKey(collection, productCount);\n\n  if (templates?.[key]) {\n    return templates[key]!;\n  }\n\n  if (BUILT_IN_LAYOUTS[key]) {\n    return BUILT_IN_LAYOUTS[key];\n  }\n\n  return DefaultCollectionLayout;\n}\n\nexport function CollectionPage({\n  collectionId,\n  collection: collectionProp,\n  products: productsProp,\n  pages,\n  templates,\n  renderCard,\n  renderImage,\n  renderLink,\n  onQuickAdd,\n  className,\n  classNames,\n}: CollectionPageProps): React.ReactElement {\n  const resolvedId = collectionId || collectionProp?.slug || collectionProp?.id || \"\";\n  const {\n    collection: fetchedCollection,\n    products: fetchedProducts,\n    isLoading,\n  } = useCollection(collectionProp ? null : resolvedId, {\n    enabled: !collectionProp && resolvedId.length > 0,\n  });\n\n  const collection = collectionProp ?? fetchedCollection;\n  const products = productsProp ?? fetchedProducts;\n\n  if (isLoading && !collection) {\n    return (\n      <div\n        data-cimplify-collection-page\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      >\n        <div className=\"animate-pulse space-y-6\">\n          <div className=\"h-64 lg:h-80 bg-muted rounded-2xl\" />\n          <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4\">\n            {Array.from({ length: 8 }).map((_, i) => (\n              <div key={i}>\n                <div className=\"aspect-square bg-muted rounded-[14px]\" />\n                <div className=\"mt-3 space-y-2\">\n                  <div className=\"h-4 w-3/4 bg-muted rounded\" />\n                  <div className=\"h-3 w-1/2 bg-muted rounded\" />\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  if (!collection) {\n    return (\n      <div data-cimplify-collection-page className={cn(className, classNames?.root)}>\n        <p className=\"text-muted-foreground\">Collection not found.</p>\n      </div>\n    );\n  }\n\n  const Layout = resolveLayout(collection, products.length, pages, templates);\n\n  return (\n    <div data-cimplify-collection-page className={cn(className, classNames?.root)}>\n      <Layout\n        collection={collection}\n        products={products}\n        renderCard={renderCard}\n        renderImage={renderImage}\n        renderLink={renderLink}\n        onQuickAdd={onQuickAdd}\n      />\n    </div>\n  );\n}\n"
    }
  ]
}