@ikas/code-components-mcp 0.32.0 → 0.34.0

package/data/storefront-api.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-02-19T17:37:32.598Z",
+  "generatedAt": "2026-02-20T13:11:41.692Z",
   "functions": [
     {
       "name": "apiListBlog",
@@ -15810,17 +15810,6 @@
       "isClass": true,
       "className": "I18n"
     },
-    {
-      "name": "testSetup",
-      "signature": "function testSetup(): void",
-      "description": "",
-      "params": [],
-      "returnType": "void",
-      "categories": [],
-      "related": [],
-      "isAsync": false,
-      "isClass": false
-    },
     {
       "name": "Router.navigate",
       "signature": "static Router.navigate(path: string, shallow: boolean = false, newTab: boolean = false): void",
@@ -16161,6 +16150,36 @@
     }
   ],
   "codeExamples": [
+    {
+      "id": "404-section",
+      "title": "404 Page Section",
+      "description": "Page not found section with message and navigation back to home.",
+      "code": "import { Router } from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport function NotFoundSection({\n  heading = \"Page Not Found\",\n  message = \"The page you're looking for doesn't exist or has been moved.\",\n  buttonText = \"Back to Home\",\n}: Props) {\n  return (\n    <section className=\"not-found-section\">\n      <div className=\"not-found-inner\">\n        <span className=\"not-found-code\">404</span>\n        <h1 className=\"not-found-heading\">{heading}</h1>\n        <p className=\"not-found-message\">{message}</p>\n        <button\n          className=\"not-found-btn\"\n          onClick={() => Router.navigate(\"/\")}\n        >\n          {buttonText}\n        </button>\n      </div>\n    </section>\n  );\n}\n\nexport default NotFoundSection;\n",
+      "relatedFunctions": [
+        "Router.navigate"
+      ],
+      "categories": [
+        "Navigation"
+      ],
+      "files": [
+        {
+          "filename": "index.tsx",
+          "content": "import { Router } from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport function NotFoundSection({\n  heading = \"Page Not Found\",\n  message = \"The page you're looking for doesn't exist or has been moved.\",\n  buttonText = \"Back to Home\",\n}: Props) {\n  return (\n    <section className=\"not-found-section\">\n      <div className=\"not-found-inner\">\n        <span className=\"not-found-code\">404</span>\n        <h1 className=\"not-found-heading\">{heading}</h1>\n        <p className=\"not-found-message\">{message}</p>\n        <button\n          className=\"not-found-btn\"\n          onClick={() => Router.navigate(\"/\")}\n        >\n          {buttonText}\n        </button>\n      </div>\n    </section>\n  );\n}\n\nexport default NotFoundSection;\n"
+        },
+        {
+          "filename": "types.ts",
+          "content": "export interface Props {\n  heading?: string;\n  message?: string;\n  buttonText?: string;\n}\n"
+        },
+        {
+          "filename": "styles.css",
+          "content": ".not-found-section {\n  width: 100%;\n  padding: 80px 24px;\n  text-align: center;\n}\n\n.not-found-inner {\n  max-width: 480px;\n  margin: 0 auto;\n}\n\n.not-found-code {\n  font-size: 96px;\n  font-weight: 800;\n  color: #eee;\n  line-height: 1;\n  display: block;\n  margin-bottom: 16px;\n}\n\n.not-found-heading {\n  font-size: 28px;\n  font-weight: 700;\n  color: #111;\n  margin: 0 0 12px 0;\n}\n\n.not-found-message {\n  font-size: 16px;\n  color: #666;\n  margin: 0 0 32px 0;\n  line-height: 1.5;\n}\n\n.not-found-btn {\n  display: inline-block;\n  padding: 14px 32px;\n  font-size: 16px;\n  font-weight: 600;\n  color: #fff;\n  background: #111;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n.not-found-btn:hover {\n  background: #333;\n}\n"
+        },
+        {
+          "filename": "ikas-config-snippet.json",
+          "content": "{\n  \"id\": \"not-found\",\n  \"name\": \"404 Page\",\n  \"type\": \"section\",\n  \"props\": [\n    { \"name\": \"heading\", \"displayName\": \"Heading\", \"type\": \"TEXT\", \"defaultValue\": \"Page Not Found\" },\n    { \"name\": \"message\", \"displayName\": \"Message\", \"type\": \"TEXT\", \"defaultValue\": \"The page you're looking for doesn't exist or has been moved.\" },\n    { \"name\": \"buttonText\", \"displayName\": \"Button Text\", \"type\": \"TEXT\", \"defaultValue\": \"Back to Home\" }\n  ]\n}\n"
+        }
+      ]
+    },
     {
       "id": "account-addresses-section",
       "title": "Account Addresses Section (Complete)",
@@ -16361,6 +16380,37 @@
         }
       ]
     },
+    {
+      "id": "blog-post-section",
+      "title": "Blog Post Section",
+      "description": "Single blog post detail page with image, title, date, and HTML content.",
+      "code": "import {\n  getIkasBlogFormattedDate,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport function BlogPostSection({\n  blogPost,\n}: Props) {\n  if (!blogPost) return null;\n\n  return (\n    <section className=\"blog-post-section\">\n      <div className=\"blog-post-inner\">\n        {blogPost.image && (\n          <img src={getDefaultSrc(blogPost.image)} alt={blogPost.title} className=\"blog-post-hero\" />\n        )}\n        <h1 className=\"blog-post-title\">{blogPost.title}</h1>\n        <span className=\"blog-post-date\">{getIkasBlogFormattedDate(blogPost)}</span>\n        <div className=\"blog-post-content\" dangerouslySetInnerHTML={{ __html: blogPost.blogContent.content }} />\n      </div>\n    </section>\n  );\n}\n\nexport default BlogPostSection;\n",
+      "relatedFunctions": [
+        "getIkasBlogFormattedDate",
+        "getDefaultSrc"
+      ],
+      "categories": [
+        "Blog"
+      ],
+      "files": [
+        {
+          "filename": "index.tsx",
+          "content": "import {\n  getIkasBlogFormattedDate,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport function BlogPostSection({\n  blogPost,\n}: Props) {\n  if (!blogPost) return null;\n\n  return (\n    <section className=\"blog-post-section\">\n      <div className=\"blog-post-inner\">\n        {blogPost.image && (\n          <img src={getDefaultSrc(blogPost.image)} alt={blogPost.title} className=\"blog-post-hero\" />\n        )}\n        <h1 className=\"blog-post-title\">{blogPost.title}</h1>\n        <span className=\"blog-post-date\">{getIkasBlogFormattedDate(blogPost)}</span>\n        <div className=\"blog-post-content\" dangerouslySetInnerHTML={{ __html: blogPost.blogContent.content }} />\n      </div>\n    </section>\n  );\n}\n\nexport default BlogPostSection;\n"
+        },
+        {
+          "filename": "types.ts",
+          "content": "import { IkasBlog } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n  blogPost: IkasBlog;\n}\n"
+        },
+        {
+          "filename": "styles.css",
+          "content": ".blog-post-section {\n  width: 100%;\n  padding: 40px 24px;\n}\n\n.blog-post-inner {\n  max-width: 720px;\n  margin: 0 auto;\n}\n\n.blog-post-hero { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; margin-bottom: 32px; }\n.blog-post-title { font-size: 32px; font-weight: 700; color: #111; margin: 0 0 8px 0; line-height: 1.3; }\n.blog-post-date { font-size: 14px; color: #999; display: block; margin-bottom: 32px; }\n.blog-post-content { font-size: 16px; line-height: 1.8; color: #333; }\n.blog-post-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 24px 0; }\n.blog-post-content h2 { font-size: 24px; font-weight: 700; margin: 32px 0 16px; }\n.blog-post-content h3 { font-size: 20px; font-weight: 600; margin: 24px 0 12px; }\n.blog-post-content p { margin: 0 0 16px 0; }\n"
+        },
+        {
+          "filename": "ikas-config-snippet.json",
+          "content": "{\n  \"id\": \"blog-post\",\n  \"name\": \"Blog Post\",\n  \"type\": \"section\",\n  \"props\": [\n    { \"name\": \"blogPost\", \"displayName\": \"Blog Post\", \"type\": \"BLOG\", \"required\": true }\n  ]\n}\n"
+        }
+      ]
+    },
     {
       "id": "brand-category-list",
       "title": "Brand and Category List",
@@ -16627,7 +16677,7 @@
       "id": "footer-section",
       "title": "Footer Section (Complete)",
       "description": "Complete footer section with logo, navigation link columns, contact info, social media links, and copyright. Uses IkasNavigationLink for editable links.",
-      "code": "import { IkasNavigationLink, getDefaultSrc } from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport default function FooterSection({\n  logo,\n  description,\n  linkColumn1Title = \"Shop\",\n  linkColumn1,\n  linkColumn2Title = \"Company\",\n  linkColumn2,\n  copyright = \"All rights reserved.\",\n}: Props) {\n  return (\n    <footer className=\"footer-section\">\n      <div className=\"footer-inner\">\n        <div className=\"footer-grid\">\n          {/* Brand Column */}\n          <div className=\"footer-brand\">\n            {logo ? (\n              <img src={getDefaultSrc(logo)} alt={logo.altText || \"Logo\"} className=\"footer-logo\" />\n            ) : (\n              <span className=\"footer-logo-text\">Store</span>\n            )}\n            {description && <p className=\"footer-description\">{description}</p>}\n          </div>\n\n          {/* Link Column 1 */}\n          <div className=\"footer-link-column\">\n            <h4 className=\"footer-column-title\">{linkColumn1Title}</h4>\n            <nav className=\"footer-links\">\n              {linkColumn1?.map((link: IkasNavigationLink, i: number) => (\n                <a\n                  key={i}\n                  href={link.href}\n                  className=\"footer-link\"\n                  target={link.isTargetBlank ? \"_blank\" : undefined}\n                >\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n          </div>\n\n          {/* Link Column 2 */}\n          <div className=\"footer-link-column\">\n            <h4 className=\"footer-column-title\">{linkColumn2Title}</h4>\n            <nav className=\"footer-links\">\n              {linkColumn2?.map((link: IkasNavigationLink, i: number) => (\n                <a\n                  key={i}\n                  href={link.href}\n                  className=\"footer-link\"\n                  target={link.isTargetBlank ? \"_blank\" : undefined}\n                >\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n          </div>\n        </div>\n\n        {/* Copyright */}\n        <div className=\"footer-bottom\">\n          <p className=\"footer-copyright\">{copyright}</p>\n        </div>\n      </div>\n    </footer>\n  );\n}\n",
+      "code": "import { IkasNavigationLink, getDefaultSrc } from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport default function FooterSection({\n  logo,\n  description,\n  linkColumn1Title = \"Shop\",\n  linkColumn1,\n  linkColumn2Title = \"Company\",\n  linkColumn2,\n  copyright = \"All rights reserved.\",\n}: Props) {\n  return (\n    <footer className=\"footer-section\">\n      <div className=\"footer-inner\">\n        <div className=\"footer-grid\">\n          {/* Brand Column */}\n          <div className=\"footer-brand\">\n            {logo ? (\n              <img src={getDefaultSrc(logo)} alt={logo.altText || \"Logo\"} className=\"footer-logo\" />\n            ) : (\n              <span className=\"footer-logo-text\">Store</span>\n            )}\n            {description && <p className=\"footer-description\">{description}</p>}\n          </div>\n\n          {/* Link Column 1 */}\n          <div className=\"footer-link-column\">\n            <h4 className=\"footer-column-title\">{linkColumn1Title}</h4>\n            <nav className=\"footer-links\">\n              {(linkColumn1?.links ?? []).map((link: IkasNavigationLink, i: number) => (\n                <a\n                  key={i}\n                  href={link.href}\n                  className=\"footer-link\"\n                  target={link.openInNewTab ? \"_blank\" : undefined}\n                >\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n          </div>\n\n          {/* Link Column 2 */}\n          <div className=\"footer-link-column\">\n            <h4 className=\"footer-column-title\">{linkColumn2Title}</h4>\n            <nav className=\"footer-links\">\n              {(linkColumn2?.links ?? []).map((link: IkasNavigationLink, i: number) => (\n                <a\n                  key={i}\n                  href={link.href}\n                  className=\"footer-link\"\n                  target={link.openInNewTab ? \"_blank\" : undefined}\n                >\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n          </div>\n        </div>\n\n        {/* Copyright */}\n        <div className=\"footer-bottom\">\n          <p className=\"footer-copyright\">{copyright}</p>\n        </div>\n      </div>\n    </footer>\n  );\n}\n",
       "relatedFunctions": [],
       "categories": [
         "Navigation",
@@ -16636,11 +16686,11 @@
       "files": [
         {
           "filename": "index.tsx",
-          "content": "import { IkasNavigationLink, getDefaultSrc } from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport default function FooterSection({\n  logo,\n  description,\n  linkColumn1Title = \"Shop\",\n  linkColumn1,\n  linkColumn2Title = \"Company\",\n  linkColumn2,\n  copyright = \"All rights reserved.\",\n}: Props) {\n  return (\n    <footer className=\"footer-section\">\n      <div className=\"footer-inner\">\n        <div className=\"footer-grid\">\n          {/* Brand Column */}\n          <div className=\"footer-brand\">\n            {logo ? (\n              <img src={getDefaultSrc(logo)} alt={logo.altText || \"Logo\"} className=\"footer-logo\" />\n            ) : (\n              <span className=\"footer-logo-text\">Store</span>\n            )}\n            {description && <p className=\"footer-description\">{description}</p>}\n          </div>\n\n          {/* Link Column 1 */}\n          <div className=\"footer-link-column\">\n            <h4 className=\"footer-column-title\">{linkColumn1Title}</h4>\n            <nav className=\"footer-links\">\n              {linkColumn1?.map((link: IkasNavigationLink, i: number) => (\n                <a\n                  key={i}\n                  href={link.href}\n                  className=\"footer-link\"\n                  target={link.isTargetBlank ? \"_blank\" : undefined}\n                >\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n          </div>\n\n          {/* Link Column 2 */}\n          <div className=\"footer-link-column\">\n            <h4 className=\"footer-column-title\">{linkColumn2Title}</h4>\n            <nav className=\"footer-links\">\n              {linkColumn2?.map((link: IkasNavigationLink, i: number) => (\n                <a\n                  key={i}\n                  href={link.href}\n                  className=\"footer-link\"\n                  target={link.isTargetBlank ? \"_blank\" : undefined}\n                >\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n          </div>\n        </div>\n\n        {/* Copyright */}\n        <div className=\"footer-bottom\">\n          <p className=\"footer-copyright\">{copyright}</p>\n        </div>\n      </div>\n    </footer>\n  );\n}\n"
+          "content": "import { IkasNavigationLink, getDefaultSrc } from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport default function FooterSection({\n  logo,\n  description,\n  linkColumn1Title = \"Shop\",\n  linkColumn1,\n  linkColumn2Title = \"Company\",\n  linkColumn2,\n  copyright = \"All rights reserved.\",\n}: Props) {\n  return (\n    <footer className=\"footer-section\">\n      <div className=\"footer-inner\">\n        <div className=\"footer-grid\">\n          {/* Brand Column */}\n          <div className=\"footer-brand\">\n            {logo ? (\n              <img src={getDefaultSrc(logo)} alt={logo.altText || \"Logo\"} className=\"footer-logo\" />\n            ) : (\n              <span className=\"footer-logo-text\">Store</span>\n            )}\n            {description && <p className=\"footer-description\">{description}</p>}\n          </div>\n\n          {/* Link Column 1 */}\n          <div className=\"footer-link-column\">\n            <h4 className=\"footer-column-title\">{linkColumn1Title}</h4>\n            <nav className=\"footer-links\">\n              {(linkColumn1?.links ?? []).map((link: IkasNavigationLink, i: number) => (\n                <a\n                  key={i}\n                  href={link.href}\n                  className=\"footer-link\"\n                  target={link.openInNewTab ? \"_blank\" : undefined}\n                >\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n          </div>\n\n          {/* Link Column 2 */}\n          <div className=\"footer-link-column\">\n            <h4 className=\"footer-column-title\">{linkColumn2Title}</h4>\n            <nav className=\"footer-links\">\n              {(linkColumn2?.links ?? []).map((link: IkasNavigationLink, i: number) => (\n                <a\n                  key={i}\n                  href={link.href}\n                  className=\"footer-link\"\n                  target={link.openInNewTab ? \"_blank\" : undefined}\n                >\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n          </div>\n        </div>\n\n        {/* Copyright */}\n        <div className=\"footer-bottom\">\n          <p className=\"footer-copyright\">{copyright}</p>\n        </div>\n      </div>\n    </footer>\n  );\n}\n"
         },
         {
           "filename": "types.ts",
-          "content": "import { IkasNavigationLink, IkasImage } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n  logo?: IkasImage | null;\n  description?: string;\n  linkColumn1Title?: string;\n  linkColumn1?: IkasNavigationLink[];\n  linkColumn2Title?: string;\n  linkColumn2?: IkasNavigationLink[];\n  copyright?: string;\n}\n"
+          "content": "import { IkasNavigationLinkList, IkasImage } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n  logo?: IkasImage | null;\n  description?: string;\n  linkColumn1Title?: string;\n  linkColumn1?: IkasNavigationLinkList;\n  linkColumn2Title?: string;\n  linkColumn2?: IkasNavigationLinkList;\n  copyright?: string;\n}\n"
         },
         {
           "filename": "styles.css",
@@ -16692,7 +16742,7 @@
       "id": "header-section",
       "title": "Header Section (Complete)",
       "description": "Complete header section with announcement bar, navigation with subLinks (mega-menu), logo, customer icon, mini-cart sidebar with item images/prices/quantity controls/adjustments/checkout, and mobile menu overlay. Cart badge and customer state are automatically reactive in root components via autorun().",
-      "code": "import { useState } from \"preact/hooks\";\nimport {\n  cartStore,\n  customerStore,\n  hasCustomer,\n  hasCart,\n  getIkasOrderTotalItemCount,\n  getIkasOrderFormattedTotalPrice,\n  getIkasOrderLineVariantMainImage,\n  getIkasOrderLineVariantHref,\n  getOrderLineItemFormattedFinalPrice,\n  getOrderAdjustmentDisplayName,\n  getOrderAdjustmentFormattedAmount,\n  changeItemQuantity,\n  removeItem,\n  getCheckoutUrlFromCartStore,\n  getDefaultSrc,\n  Router,\n  IkasNavigationLink,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport default function HeaderSection({\n  logo,\n  navigationLinks,\n  announcementText,\n  announcementBgColor = \"#111\",\n  announcementTextColor = \"#fff\",\n}: Props) {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const [cartSidebarOpen, setCartSidebarOpen] = useState(false);\n\n  const cart = cartStore.cart;\n  const isCartLoading = cartStore.isCartLoading;\n  const cartHasItems = hasCart(cartStore) as unknown as boolean;\n  const itemCount = cart ? (getIkasOrderTotalItemCount(cart) as unknown as number) : 0;\n  const isLoggedIn = hasCustomer(customerStore) as unknown as boolean;\n  const lineItems = cart?.orderLineItems ?? [];\n  const adjustments = cart?.orderAdjustments ?? [];\n\n  return (\n    <section className=\"header-section\">\n      {/* Announcement Bar */}\n      {announcementText && (\n        <div\n          className=\"header-announcement\"\n          style={{ backgroundColor: announcementBgColor, color: announcementTextColor }}\n        >\n          <span>{announcementText}</span>\n        </div>\n      )}\n\n      {/* Main Header */}\n      <div className=\"header-main\">\n        <div className=\"header-inner\">\n          {/* Mobile Hamburger */}\n          <button\n            className=\"header-hamburger\"\n            onClick={() => setMobileMenuOpen(true)}\n            aria-label=\"Open menu\"\n          >\n            <span /><span /><span />\n          </button>\n\n          {/* Logo */}\n          <a className=\"header-logo\" href=\"/\" onClick={(e) => { e.preventDefault(); Router.navigate(\"/\"); }}>\n            {logo ? (\n              <img src={getDefaultSrc(logo)} alt={logo.altText || \"Store Logo\"} className=\"header-logo-img\" />\n            ) : (\n              <span className=\"header-logo-text\">Store</span>\n            )}\n          </a>\n\n          {/* Desktop Navigation with subLinks */}\n          <nav className=\"header-nav\">\n            {navigationLinks?.map((link: IkasNavigationLink, i: number) => (\n              <div key={i} className=\"header-nav-item\">\n                <a\n                  href={link.href}\n                  className=\"header-nav-link\"\n                  target={link.openInNewTab ? \"_blank\" : undefined}\n                >\n                  {link.label}\n                </a>\n                {/* Mega-menu for subLinks */}\n                {link.subLinks && link.subLinks.length > 0 && (\n                  <div className=\"header-submenu\">\n                    {link.subLinks.map((sub: IkasNavigationLink, j: number) => (\n                      <a\n                        key={j}\n                        href={sub.href}\n                        className=\"header-submenu-link\"\n                        target={sub.openInNewTab ? \"_blank\" : undefined}\n                      >\n                        {sub.label}\n                      </a>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n\n          {/* Utility Icons */}\n          <div className=\"header-icons\">\n            <button\n              className=\"header-icon-btn\"\n              onClick={() => Router.navigateToPage(isLoggedIn ? \"ACCOUNT\" : \"LOGIN\")}\n              aria-label=\"Account\"\n            >\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" />\n                <circle cx=\"12\" cy=\"7\" r=\"4\" />\n              </svg>\n            </button>\n            <button\n              className=\"header-icon-btn header-cart-btn\"\n              onClick={() => setCartSidebarOpen(true)}\n              aria-label=\"Cart\"\n            >\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                <path d=\"M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z\" />\n                <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" />\n                <path d=\"M16 10a4 4 0 01-8 0\" />\n              </svg>\n              {itemCount > 0 && <span className=\"header-cart-badge\">{itemCount}</span>}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      {/* Mini-Cart Sidebar — production uses IkasThemeOverlay for visibility */}\n      {cartSidebarOpen && (\n        <div className=\"cart-sidebar-overlay\">\n          <div className=\"cart-sidebar-backdrop\" onClick={() => setCartSidebarOpen(false)} />\n          <div className=\"cart-sidebar\">\n            <div className=\"cart-sidebar-header\">\n              <h3>Cart ({itemCount})</h3>\n              <button className=\"cart-sidebar-close\" onClick={() => setCartSidebarOpen(false)}>&times;</button>\n            </div>\n\n            {isCartLoading && <div className=\"cart-sidebar-loading\">Loading...</div>}\n\n            {!cartHasItems && !isCartLoading && (\n              <p className=\"cart-sidebar-empty\">Your cart is empty</p>\n            )}\n\n            <div className=\"cart-sidebar-items\">\n              {lineItems.map((item) => {\n                const image = item.variant ? getIkasOrderLineVariantMainImage(item.variant) : null;\n                const href = item.variant ? getIkasOrderLineVariantHref(item.variant) : undefined;\n                return (\n                  <div key={item.id} className=\"cart-sidebar-item\">\n                    {image && (\n                      <a href={href}>\n                        <img className=\"cart-sidebar-item-img\" src={getDefaultSrc(image)} alt={item.variant?.name || \"\"} />\n                      </a>\n                    )}\n                    <div className=\"cart-sidebar-item-info\">\n                      <a href={href} className=\"cart-sidebar-item-name\">{item.variant?.name}</a>\n                      <span className=\"cart-sidebar-item-price\">{getOrderLineItemFormattedFinalPrice(item)}</span>\n                      <div className=\"cart-sidebar-item-qty\">\n                        <button onClick={() => changeItemQuantity(item, Math.max(1, item.quantity - 1))}>-</button>\n                        <span>{item.quantity}</span>\n                        <button onClick={() => changeItemQuantity(item, item.quantity + 1)}>+</button>\n                      </div>\n                    </div>\n                    <button className=\"cart-sidebar-item-remove\" onClick={() => removeItem(item)}>&times;</button>\n                  </div>\n                );\n              })}\n            </div>\n\n            {/* Order Adjustments (discounts, shipping, etc.) */}\n            {adjustments.length > 0 && (\n              <div className=\"cart-sidebar-adjustments\">\n                {adjustments.map((adj: any, i: number) => (\n                  <div key={i} className=\"cart-sidebar-adj-row\">\n                    <span>{getOrderAdjustmentDisplayName(adj)}</span>\n                    <span>{getOrderAdjustmentFormattedAmount(adj)}</span>\n                  </div>\n                ))}\n              </div>\n            )}\n\n            {cartHasItems && cart && (\n              <div className=\"cart-sidebar-footer\">\n                <div className=\"cart-sidebar-total\">\n                  <span>Total</span>\n                  <span>{getIkasOrderFormattedTotalPrice(cart)}</span>\n                </div>\n                <a\n                  href={getCheckoutUrlFromCartStore(cartStore)}\n                  className=\"cart-sidebar-checkout-btn\"\n                >\n                  Checkout\n                </a>\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n\n      {/* Mobile Menu — production uses IkasThemeOverlay visible property */}\n      {mobileMenuOpen && (\n        <div className=\"header-mobile-overlay\">\n          <div className=\"header-mobile-backdrop\" onClick={() => setMobileMenuOpen(false)} />\n          <div className=\"header-mobile-menu\">\n            <button className=\"header-mobile-close\" onClick={() => setMobileMenuOpen(false)}>\n              &times;\n            </button>\n            <nav className=\"header-mobile-nav\">\n              {navigationLinks?.map((link: IkasNavigationLink, i: number) => (\n                <div key={i}>\n                  <a\n                    href={link.href}\n                    className=\"header-mobile-link\"\n                    onClick={() => setMobileMenuOpen(false)}\n                  >\n                    {link.label}\n                  </a>\n                  {link.subLinks?.map((sub: IkasNavigationLink, j: number) => (\n                    <a\n                      key={j}\n                      href={sub.href}\n                      className=\"header-mobile-sublink\"\n                      onClick={() => setMobileMenuOpen(false)}\n                    >\n                      {sub.label}\n                    </a>\n                  ))}\n                </div>\n              ))}\n            </nav>\n          </div>\n        </div>\n      )}\n    </section>\n  );\n}\n\n",
+      "code": "import { useState } from \"preact/hooks\";\nimport {\n  cartStore,\n  customerStore,\n  hasCustomer,\n  hasCart,\n  getIkasOrderTotalItemCount,\n  getIkasOrderFormattedTotalPrice,\n  getIkasOrderLineVariantMainImage,\n  getIkasOrderLineVariantHref,\n  getOrderLineItemFormattedFinalPrice,\n  getOrderAdjustmentDisplayName,\n  getOrderAdjustmentFormattedAmount,\n  changeItemQuantity,\n  removeItem,\n  getCheckoutUrlFromCartStore,\n  getDefaultSrc,\n  Router,\n  IkasNavigationLink,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport default function HeaderSection({\n  logo,\n  navigationLinks,\n  announcementText,\n  announcementBgColor = \"#111\",\n  announcementTextColor = \"#fff\",\n}: Props) {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const [cartSidebarOpen, setCartSidebarOpen] = useState(false);\n\n  const cart = cartStore.cart;\n  const isCartLoading = cartStore.isCartLoading;\n  const cartHasItems = hasCart(cartStore) as unknown as boolean;\n  const itemCount = cart ? (getIkasOrderTotalItemCount(cart) as unknown as number) : 0;\n  const isLoggedIn = hasCustomer(customerStore) as unknown as boolean;\n  const lineItems = cart?.orderLineItems ?? [];\n  const adjustments = cart?.orderAdjustments ?? [];\n\n  return (\n    <section className=\"header-section\">\n      {/* Announcement Bar */}\n      {announcementText && (\n        <div\n          className=\"header-announcement\"\n          style={{ backgroundColor: announcementBgColor, color: announcementTextColor }}\n        >\n          <span>{announcementText}</span>\n        </div>\n      )}\n\n      {/* Main Header */}\n      <div className=\"header-main\">\n        <div className=\"header-inner\">\n          {/* Mobile Hamburger */}\n          <button\n            className=\"header-hamburger\"\n            onClick={() => setMobileMenuOpen(true)}\n            aria-label=\"Open menu\"\n          >\n            <span /><span /><span />\n          </button>\n\n          {/* Logo */}\n          <a className=\"header-logo\" href=\"/\" onClick={(e) => { e.preventDefault(); Router.navigate(\"/\"); }}>\n            {logo ? (\n              <img src={getDefaultSrc(logo)} alt={logo.altText || \"Store Logo\"} className=\"header-logo-img\" />\n            ) : (\n              <span className=\"header-logo-text\">Store</span>\n            )}\n          </a>\n\n          {/* Desktop Navigation with subLinks */}\n          <nav className=\"header-nav\">\n            {(navigationLinks?.links ?? []).map((link: IkasNavigationLink, i: number) => (\n              <div key={i} className=\"header-nav-item\">\n                <a\n                  href={link.href}\n                  className=\"header-nav-link\"\n                  target={link.openInNewTab ? \"_blank\" : undefined}\n                >\n                  {link.label}\n                </a>\n                {/* Mega-menu for subLinks */}\n                {link.subLinks && link.subLinks.length > 0 && (\n                  <div className=\"header-submenu\">\n                    {link.subLinks.map((sub: IkasNavigationLink, j: number) => (\n                      <a\n                        key={j}\n                        href={sub.href}\n                        className=\"header-submenu-link\"\n                        target={sub.openInNewTab ? \"_blank\" : undefined}\n                      >\n                        {sub.label}\n                      </a>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n\n          {/* Utility Icons */}\n          <div className=\"header-icons\">\n            <button\n              className=\"header-icon-btn\"\n              onClick={() => Router.navigateToPage(isLoggedIn ? \"ACCOUNT\" : \"LOGIN\")}\n              aria-label=\"Account\"\n            >\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" />\n                <circle cx=\"12\" cy=\"7\" r=\"4\" />\n              </svg>\n            </button>\n            <button\n              className=\"header-icon-btn header-cart-btn\"\n              onClick={() => setCartSidebarOpen(true)}\n              aria-label=\"Cart\"\n            >\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                <path d=\"M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z\" />\n                <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" />\n                <path d=\"M16 10a4 4 0 01-8 0\" />\n              </svg>\n              {itemCount > 0 && <span className=\"header-cart-badge\">{itemCount}</span>}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      {/* Mini-Cart Sidebar — production uses IkasThemeOverlay for visibility */}\n      {cartSidebarOpen && (\n        <div className=\"cart-sidebar-overlay\">\n          <div className=\"cart-sidebar-backdrop\" onClick={() => setCartSidebarOpen(false)} />\n          <div className=\"cart-sidebar\">\n            <div className=\"cart-sidebar-header\">\n              <h3>Cart ({itemCount})</h3>\n              <button className=\"cart-sidebar-close\" onClick={() => setCartSidebarOpen(false)}>&times;</button>\n            </div>\n\n            {isCartLoading && <div className=\"cart-sidebar-loading\">Loading...</div>}\n\n            {!cartHasItems && !isCartLoading && (\n              <p className=\"cart-sidebar-empty\">Your cart is empty</p>\n            )}\n\n            <div className=\"cart-sidebar-items\">\n              {lineItems.map((item) => {\n                const image = item.variant ? getIkasOrderLineVariantMainImage(item.variant) : null;\n                const href = item.variant ? getIkasOrderLineVariantHref(item.variant) : undefined;\n                return (\n                  <div key={item.id} className=\"cart-sidebar-item\">\n                    {image && (\n                      <a href={href}>\n                        <img className=\"cart-sidebar-item-img\" src={getDefaultSrc(image)} alt={item.variant?.name || \"\"} />\n                      </a>\n                    )}\n                    <div className=\"cart-sidebar-item-info\">\n                      <a href={href} className=\"cart-sidebar-item-name\">{item.variant?.name}</a>\n                      <span className=\"cart-sidebar-item-price\">{getOrderLineItemFormattedFinalPrice(item)}</span>\n                      <div className=\"cart-sidebar-item-qty\">\n                        <button onClick={() => changeItemQuantity(item, Math.max(1, item.quantity - 1))}>-</button>\n                        <span>{item.quantity}</span>\n                        <button onClick={() => changeItemQuantity(item, item.quantity + 1)}>+</button>\n                      </div>\n                    </div>\n                    <button className=\"cart-sidebar-item-remove\" onClick={() => removeItem(item)}>&times;</button>\n                  </div>\n                );\n              })}\n            </div>\n\n            {/* Order Adjustments (discounts, shipping, etc.) */}\n            {adjustments.length > 0 && (\n              <div className=\"cart-sidebar-adjustments\">\n                {adjustments.map((adj: any, i: number) => (\n                  <div key={i} className=\"cart-sidebar-adj-row\">\n                    <span>{getOrderAdjustmentDisplayName(adj)}</span>\n                    <span>{getOrderAdjustmentFormattedAmount(adj)}</span>\n                  </div>\n                ))}\n              </div>\n            )}\n\n            {cartHasItems && cart && (\n              <div className=\"cart-sidebar-footer\">\n                <div className=\"cart-sidebar-total\">\n                  <span>Total</span>\n                  <span>{getIkasOrderFormattedTotalPrice(cart)}</span>\n                </div>\n                <a\n                  href={getCheckoutUrlFromCartStore(cartStore)}\n                  className=\"cart-sidebar-checkout-btn\"\n                >\n                  Checkout\n                </a>\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n\n      {/* Mobile Menu — production uses IkasThemeOverlay visible property */}\n      {mobileMenuOpen && (\n        <div className=\"header-mobile-overlay\">\n          <div className=\"header-mobile-backdrop\" onClick={() => setMobileMenuOpen(false)} />\n          <div className=\"header-mobile-menu\">\n            <button className=\"header-mobile-close\" onClick={() => setMobileMenuOpen(false)}>\n              &times;\n            </button>\n            <nav className=\"header-mobile-nav\">\n              {(navigationLinks?.links ?? []).map((link: IkasNavigationLink, i: number) => (\n                <div key={i}>\n                  <a\n                    href={link.href}\n                    className=\"header-mobile-link\"\n                    onClick={() => setMobileMenuOpen(false)}\n                  >\n                    {link.label}\n                  </a>\n                  {link.subLinks?.map((sub: IkasNavigationLink, j: number) => (\n                    <a\n                      key={j}\n                      href={sub.href}\n                      className=\"header-mobile-sublink\"\n                      onClick={() => setMobileMenuOpen(false)}\n                    >\n                      {sub.label}\n                    </a>\n                  ))}\n                </div>\n              ))}\n            </nav>\n          </div>\n        </div>\n      )}\n    </section>\n  );\n}\n\n",
       "relatedFunctions": [
         "cartStore",
         "customerStore",
@@ -16721,11 +16771,11 @@
       "files": [
         {
           "filename": "index.tsx",
-          "content": "import { useState } from \"preact/hooks\";\nimport {\n  cartStore,\n  customerStore,\n  hasCustomer,\n  hasCart,\n  getIkasOrderTotalItemCount,\n  getIkasOrderFormattedTotalPrice,\n  getIkasOrderLineVariantMainImage,\n  getIkasOrderLineVariantHref,\n  getOrderLineItemFormattedFinalPrice,\n  getOrderAdjustmentDisplayName,\n  getOrderAdjustmentFormattedAmount,\n  changeItemQuantity,\n  removeItem,\n  getCheckoutUrlFromCartStore,\n  getDefaultSrc,\n  Router,\n  IkasNavigationLink,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport default function HeaderSection({\n  logo,\n  navigationLinks,\n  announcementText,\n  announcementBgColor = \"#111\",\n  announcementTextColor = \"#fff\",\n}: Props) {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const [cartSidebarOpen, setCartSidebarOpen] = useState(false);\n\n  const cart = cartStore.cart;\n  const isCartLoading = cartStore.isCartLoading;\n  const cartHasItems = hasCart(cartStore) as unknown as boolean;\n  const itemCount = cart ? (getIkasOrderTotalItemCount(cart) as unknown as number) : 0;\n  const isLoggedIn = hasCustomer(customerStore) as unknown as boolean;\n  const lineItems = cart?.orderLineItems ?? [];\n  const adjustments = cart?.orderAdjustments ?? [];\n\n  return (\n    <section className=\"header-section\">\n      {/* Announcement Bar */}\n      {announcementText && (\n        <div\n          className=\"header-announcement\"\n          style={{ backgroundColor: announcementBgColor, color: announcementTextColor }}\n        >\n          <span>{announcementText}</span>\n        </div>\n      )}\n\n      {/* Main Header */}\n      <div className=\"header-main\">\n        <div className=\"header-inner\">\n          {/* Mobile Hamburger */}\n          <button\n            className=\"header-hamburger\"\n            onClick={() => setMobileMenuOpen(true)}\n            aria-label=\"Open menu\"\n          >\n            <span /><span /><span />\n          </button>\n\n          {/* Logo */}\n          <a className=\"header-logo\" href=\"/\" onClick={(e) => { e.preventDefault(); Router.navigate(\"/\"); }}>\n            {logo ? (\n              <img src={getDefaultSrc(logo)} alt={logo.altText || \"Store Logo\"} className=\"header-logo-img\" />\n            ) : (\n              <span className=\"header-logo-text\">Store</span>\n            )}\n          </a>\n\n          {/* Desktop Navigation with subLinks */}\n          <nav className=\"header-nav\">\n            {navigationLinks?.map((link: IkasNavigationLink, i: number) => (\n              <div key={i} className=\"header-nav-item\">\n                <a\n                  href={link.href}\n                  className=\"header-nav-link\"\n                  target={link.openInNewTab ? \"_blank\" : undefined}\n                >\n                  {link.label}\n                </a>\n                {/* Mega-menu for subLinks */}\n                {link.subLinks && link.subLinks.length > 0 && (\n                  <div className=\"header-submenu\">\n                    {link.subLinks.map((sub: IkasNavigationLink, j: number) => (\n                      <a\n                        key={j}\n                        href={sub.href}\n                        className=\"header-submenu-link\"\n                        target={sub.openInNewTab ? \"_blank\" : undefined}\n                      >\n                        {sub.label}\n                      </a>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n\n          {/* Utility Icons */}\n          <div className=\"header-icons\">\n            <button\n              className=\"header-icon-btn\"\n              onClick={() => Router.navigateToPage(isLoggedIn ? \"ACCOUNT\" : \"LOGIN\")}\n              aria-label=\"Account\"\n            >\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" />\n                <circle cx=\"12\" cy=\"7\" r=\"4\" />\n              </svg>\n            </button>\n            <button\n              className=\"header-icon-btn header-cart-btn\"\n              onClick={() => setCartSidebarOpen(true)}\n              aria-label=\"Cart\"\n            >\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                <path d=\"M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z\" />\n                <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" />\n                <path d=\"M16 10a4 4 0 01-8 0\" />\n              </svg>\n              {itemCount > 0 && <span className=\"header-cart-badge\">{itemCount}</span>}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      {/* Mini-Cart Sidebar — production uses IkasThemeOverlay for visibility */}\n      {cartSidebarOpen && (\n        <div className=\"cart-sidebar-overlay\">\n          <div className=\"cart-sidebar-backdrop\" onClick={() => setCartSidebarOpen(false)} />\n          <div className=\"cart-sidebar\">\n            <div className=\"cart-sidebar-header\">\n              <h3>Cart ({itemCount})</h3>\n              <button className=\"cart-sidebar-close\" onClick={() => setCartSidebarOpen(false)}>&times;</button>\n            </div>\n\n            {isCartLoading && <div className=\"cart-sidebar-loading\">Loading...</div>}\n\n            {!cartHasItems && !isCartLoading && (\n              <p className=\"cart-sidebar-empty\">Your cart is empty</p>\n            )}\n\n            <div className=\"cart-sidebar-items\">\n              {lineItems.map((item) => {\n                const image = item.variant ? getIkasOrderLineVariantMainImage(item.variant) : null;\n                const href = item.variant ? getIkasOrderLineVariantHref(item.variant) : undefined;\n                return (\n                  <div key={item.id} className=\"cart-sidebar-item\">\n                    {image && (\n                      <a href={href}>\n                        <img className=\"cart-sidebar-item-img\" src={getDefaultSrc(image)} alt={item.variant?.name || \"\"} />\n                      </a>\n                    )}\n                    <div className=\"cart-sidebar-item-info\">\n                      <a href={href} className=\"cart-sidebar-item-name\">{item.variant?.name}</a>\n                      <span className=\"cart-sidebar-item-price\">{getOrderLineItemFormattedFinalPrice(item)}</span>\n                      <div className=\"cart-sidebar-item-qty\">\n                        <button onClick={() => changeItemQuantity(item, Math.max(1, item.quantity - 1))}>-</button>\n                        <span>{item.quantity}</span>\n                        <button onClick={() => changeItemQuantity(item, item.quantity + 1)}>+</button>\n                      </div>\n                    </div>\n                    <button className=\"cart-sidebar-item-remove\" onClick={() => removeItem(item)}>&times;</button>\n                  </div>\n                );\n              })}\n            </div>\n\n            {/* Order Adjustments (discounts, shipping, etc.) */}\n            {adjustments.length > 0 && (\n              <div className=\"cart-sidebar-adjustments\">\n                {adjustments.map((adj: any, i: number) => (\n                  <div key={i} className=\"cart-sidebar-adj-row\">\n                    <span>{getOrderAdjustmentDisplayName(adj)}</span>\n                    <span>{getOrderAdjustmentFormattedAmount(adj)}</span>\n                  </div>\n                ))}\n              </div>\n            )}\n\n            {cartHasItems && cart && (\n              <div className=\"cart-sidebar-footer\">\n                <div className=\"cart-sidebar-total\">\n                  <span>Total</span>\n                  <span>{getIkasOrderFormattedTotalPrice(cart)}</span>\n                </div>\n                <a\n                  href={getCheckoutUrlFromCartStore(cartStore)}\n                  className=\"cart-sidebar-checkout-btn\"\n                >\n                  Checkout\n                </a>\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n\n      {/* Mobile Menu — production uses IkasThemeOverlay visible property */}\n      {mobileMenuOpen && (\n        <div className=\"header-mobile-overlay\">\n          <div className=\"header-mobile-backdrop\" onClick={() => setMobileMenuOpen(false)} />\n          <div className=\"header-mobile-menu\">\n            <button className=\"header-mobile-close\" onClick={() => setMobileMenuOpen(false)}>\n              &times;\n            </button>\n            <nav className=\"header-mobile-nav\">\n              {navigationLinks?.map((link: IkasNavigationLink, i: number) => (\n                <div key={i}>\n                  <a\n                    href={link.href}\n                    className=\"header-mobile-link\"\n                    onClick={() => setMobileMenuOpen(false)}\n                  >\n                    {link.label}\n                  </a>\n                  {link.subLinks?.map((sub: IkasNavigationLink, j: number) => (\n                    <a\n                      key={j}\n                      href={sub.href}\n                      className=\"header-mobile-sublink\"\n                      onClick={() => setMobileMenuOpen(false)}\n                    >\n                      {sub.label}\n                    </a>\n                  ))}\n                </div>\n              ))}\n            </nav>\n          </div>\n        </div>\n      )}\n    </section>\n  );\n}\n\n"
+          "content": "import { useState } from \"preact/hooks\";\nimport {\n  cartStore,\n  customerStore,\n  hasCustomer,\n  hasCart,\n  getIkasOrderTotalItemCount,\n  getIkasOrderFormattedTotalPrice,\n  getIkasOrderLineVariantMainImage,\n  getIkasOrderLineVariantHref,\n  getOrderLineItemFormattedFinalPrice,\n  getOrderAdjustmentDisplayName,\n  getOrderAdjustmentFormattedAmount,\n  changeItemQuantity,\n  removeItem,\n  getCheckoutUrlFromCartStore,\n  getDefaultSrc,\n  Router,\n  IkasNavigationLink,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport default function HeaderSection({\n  logo,\n  navigationLinks,\n  announcementText,\n  announcementBgColor = \"#111\",\n  announcementTextColor = \"#fff\",\n}: Props) {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const [cartSidebarOpen, setCartSidebarOpen] = useState(false);\n\n  const cart = cartStore.cart;\n  const isCartLoading = cartStore.isCartLoading;\n  const cartHasItems = hasCart(cartStore) as unknown as boolean;\n  const itemCount = cart ? (getIkasOrderTotalItemCount(cart) as unknown as number) : 0;\n  const isLoggedIn = hasCustomer(customerStore) as unknown as boolean;\n  const lineItems = cart?.orderLineItems ?? [];\n  const adjustments = cart?.orderAdjustments ?? [];\n\n  return (\n    <section className=\"header-section\">\n      {/* Announcement Bar */}\n      {announcementText && (\n        <div\n          className=\"header-announcement\"\n          style={{ backgroundColor: announcementBgColor, color: announcementTextColor }}\n        >\n          <span>{announcementText}</span>\n        </div>\n      )}\n\n      {/* Main Header */}\n      <div className=\"header-main\">\n        <div className=\"header-inner\">\n          {/* Mobile Hamburger */}\n          <button\n            className=\"header-hamburger\"\n            onClick={() => setMobileMenuOpen(true)}\n            aria-label=\"Open menu\"\n          >\n            <span /><span /><span />\n          </button>\n\n          {/* Logo */}\n          <a className=\"header-logo\" href=\"/\" onClick={(e) => { e.preventDefault(); Router.navigate(\"/\"); }}>\n            {logo ? (\n              <img src={getDefaultSrc(logo)} alt={logo.altText || \"Store Logo\"} className=\"header-logo-img\" />\n            ) : (\n              <span className=\"header-logo-text\">Store</span>\n            )}\n          </a>\n\n          {/* Desktop Navigation with subLinks */}\n          <nav className=\"header-nav\">\n            {(navigationLinks?.links ?? []).map((link: IkasNavigationLink, i: number) => (\n              <div key={i} className=\"header-nav-item\">\n                <a\n                  href={link.href}\n                  className=\"header-nav-link\"\n                  target={link.openInNewTab ? \"_blank\" : undefined}\n                >\n                  {link.label}\n                </a>\n                {/* Mega-menu for subLinks */}\n                {link.subLinks && link.subLinks.length > 0 && (\n                  <div className=\"header-submenu\">\n                    {link.subLinks.map((sub: IkasNavigationLink, j: number) => (\n                      <a\n                        key={j}\n                        href={sub.href}\n                        className=\"header-submenu-link\"\n                        target={sub.openInNewTab ? \"_blank\" : undefined}\n                      >\n                        {sub.label}\n                      </a>\n                    ))}\n                  </div>\n                )}\n              </div>\n            ))}\n          </nav>\n\n          {/* Utility Icons */}\n          <div className=\"header-icons\">\n            <button\n              className=\"header-icon-btn\"\n              onClick={() => Router.navigateToPage(isLoggedIn ? \"ACCOUNT\" : \"LOGIN\")}\n              aria-label=\"Account\"\n            >\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" />\n                <circle cx=\"12\" cy=\"7\" r=\"4\" />\n              </svg>\n            </button>\n            <button\n              className=\"header-icon-btn header-cart-btn\"\n              onClick={() => setCartSidebarOpen(true)}\n              aria-label=\"Cart\"\n            >\n              <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                <path d=\"M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z\" />\n                <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" />\n                <path d=\"M16 10a4 4 0 01-8 0\" />\n              </svg>\n              {itemCount > 0 && <span className=\"header-cart-badge\">{itemCount}</span>}\n            </button>\n          </div>\n        </div>\n      </div>\n\n      {/* Mini-Cart Sidebar — production uses IkasThemeOverlay for visibility */}\n      {cartSidebarOpen && (\n        <div className=\"cart-sidebar-overlay\">\n          <div className=\"cart-sidebar-backdrop\" onClick={() => setCartSidebarOpen(false)} />\n          <div className=\"cart-sidebar\">\n            <div className=\"cart-sidebar-header\">\n              <h3>Cart ({itemCount})</h3>\n              <button className=\"cart-sidebar-close\" onClick={() => setCartSidebarOpen(false)}>&times;</button>\n            </div>\n\n            {isCartLoading && <div className=\"cart-sidebar-loading\">Loading...</div>}\n\n            {!cartHasItems && !isCartLoading && (\n              <p className=\"cart-sidebar-empty\">Your cart is empty</p>\n            )}\n\n            <div className=\"cart-sidebar-items\">\n              {lineItems.map((item) => {\n                const image = item.variant ? getIkasOrderLineVariantMainImage(item.variant) : null;\n                const href = item.variant ? getIkasOrderLineVariantHref(item.variant) : undefined;\n                return (\n                  <div key={item.id} className=\"cart-sidebar-item\">\n                    {image && (\n                      <a href={href}>\n                        <img className=\"cart-sidebar-item-img\" src={getDefaultSrc(image)} alt={item.variant?.name || \"\"} />\n                      </a>\n                    )}\n                    <div className=\"cart-sidebar-item-info\">\n                      <a href={href} className=\"cart-sidebar-item-name\">{item.variant?.name}</a>\n                      <span className=\"cart-sidebar-item-price\">{getOrderLineItemFormattedFinalPrice(item)}</span>\n                      <div className=\"cart-sidebar-item-qty\">\n                        <button onClick={() => changeItemQuantity(item, Math.max(1, item.quantity - 1))}>-</button>\n                        <span>{item.quantity}</span>\n                        <button onClick={() => changeItemQuantity(item, item.quantity + 1)}>+</button>\n                      </div>\n                    </div>\n                    <button className=\"cart-sidebar-item-remove\" onClick={() => removeItem(item)}>&times;</button>\n                  </div>\n                );\n              })}\n            </div>\n\n            {/* Order Adjustments (discounts, shipping, etc.) */}\n            {adjustments.length > 0 && (\n              <div className=\"cart-sidebar-adjustments\">\n                {adjustments.map((adj: any, i: number) => (\n                  <div key={i} className=\"cart-sidebar-adj-row\">\n                    <span>{getOrderAdjustmentDisplayName(adj)}</span>\n                    <span>{getOrderAdjustmentFormattedAmount(adj)}</span>\n                  </div>\n                ))}\n              </div>\n            )}\n\n            {cartHasItems && cart && (\n              <div className=\"cart-sidebar-footer\">\n                <div className=\"cart-sidebar-total\">\n                  <span>Total</span>\n                  <span>{getIkasOrderFormattedTotalPrice(cart)}</span>\n                </div>\n                <a\n                  href={getCheckoutUrlFromCartStore(cartStore)}\n                  className=\"cart-sidebar-checkout-btn\"\n                >\n                  Checkout\n                </a>\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n\n      {/* Mobile Menu — production uses IkasThemeOverlay visible property */}\n      {mobileMenuOpen && (\n        <div className=\"header-mobile-overlay\">\n          <div className=\"header-mobile-backdrop\" onClick={() => setMobileMenuOpen(false)} />\n          <div className=\"header-mobile-menu\">\n            <button className=\"header-mobile-close\" onClick={() => setMobileMenuOpen(false)}>\n              &times;\n            </button>\n            <nav className=\"header-mobile-nav\">\n              {(navigationLinks?.links ?? []).map((link: IkasNavigationLink, i: number) => (\n                <div key={i}>\n                  <a\n                    href={link.href}\n                    className=\"header-mobile-link\"\n                    onClick={() => setMobileMenuOpen(false)}\n                  >\n                    {link.label}\n                  </a>\n                  {link.subLinks?.map((sub: IkasNavigationLink, j: number) => (\n                    <a\n                      key={j}\n                      href={sub.href}\n                      className=\"header-mobile-sublink\"\n                      onClick={() => setMobileMenuOpen(false)}\n                    >\n                      {sub.label}\n                    </a>\n                  ))}\n                </div>\n              ))}\n            </nav>\n          </div>\n        </div>\n      )}\n    </section>\n  );\n}\n\n"
         },
         {
           "filename": "types.ts",
-          "content": "import { IkasNavigationLink, IkasImage } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n  logo?: IkasImage | null;\n  navigationLinks?: IkasNavigationLink[];\n  announcementText?: string;\n  announcementBgColor?: string;\n  announcementTextColor?: string;\n}\n"
+          "content": "import { IkasImage, IkasNavigationLinkList } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n  logo?: IkasImage | null;\n  navigationLinks?: IkasNavigationLinkList;\n  announcementText?: string;\n  announcementBgColor?: string;\n  announcementTextColor?: string;\n}\n"
         },
         {
           "filename": "styles.css",
@@ -16737,6 +16787,37 @@
         }
       ]
     },
+    {
+      "id": "hero-banner-section",
+      "title": "Hero Banner Section",
+      "description": "Full-width hero banner with heading, subtitle, CTA button, and background image.",
+      "code": "import { getDefaultSrc, Router } from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport function HeroBannerSection({\n  heading = \"Welcome to Our Store\",\n  subtitle,\n  buttonText = \"Shop Now\",\n  buttonLink = \"/\",\n  backgroundImage,\n  backgroundColor = \"#111\",\n  textColor = \"#fff\",\n}: Props) {\n  const bgStyle: Record<string, string> = { backgroundColor, color: textColor };\n  if (backgroundImage) {\n    bgStyle.backgroundImage = `url(${getDefaultSrc(backgroundImage)})`;\n    bgStyle.backgroundSize = \"cover\";\n    bgStyle.backgroundPosition = \"center\";\n  }\n\n  return (\n    <section className=\"hero-banner\" style={bgStyle}>\n      <div className=\"hero-inner\">\n        <h1 className=\"hero-heading\">{heading}</h1>\n        {subtitle && <p className=\"hero-subtitle\">{subtitle}</p>}\n        {buttonText && (\n          <button\n            className=\"hero-cta\"\n            onClick={() => Router.navigate(buttonLink)}\n          >\n            {buttonText}\n          </button>\n        )}\n      </div>\n    </section>\n  );\n}\n\nexport default HeroBannerSection;\n",
+      "relatedFunctions": [
+        "getDefaultSrc",
+        "Router.navigate"
+      ],
+      "categories": [
+        "Navigation"
+      ],
+      "files": [
+        {
+          "filename": "index.tsx",
+          "content": "import { getDefaultSrc, Router } from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport function HeroBannerSection({\n  heading = \"Welcome to Our Store\",\n  subtitle,\n  buttonText = \"Shop Now\",\n  buttonLink = \"/\",\n  backgroundImage,\n  backgroundColor = \"#111\",\n  textColor = \"#fff\",\n}: Props) {\n  const bgStyle: Record<string, string> = { backgroundColor, color: textColor };\n  if (backgroundImage) {\n    bgStyle.backgroundImage = `url(${getDefaultSrc(backgroundImage)})`;\n    bgStyle.backgroundSize = \"cover\";\n    bgStyle.backgroundPosition = \"center\";\n  }\n\n  return (\n    <section className=\"hero-banner\" style={bgStyle}>\n      <div className=\"hero-inner\">\n        <h1 className=\"hero-heading\">{heading}</h1>\n        {subtitle && <p className=\"hero-subtitle\">{subtitle}</p>}\n        {buttonText && (\n          <button\n            className=\"hero-cta\"\n            onClick={() => Router.navigate(buttonLink)}\n          >\n            {buttonText}\n          </button>\n        )}\n      </div>\n    </section>\n  );\n}\n\nexport default HeroBannerSection;\n"
+        },
+        {
+          "filename": "types.ts",
+          "content": "import { IkasImage } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n  heading?: string;\n  subtitle?: string;\n  buttonText?: string;\n  buttonLink?: string;\n  backgroundImage?: IkasImage | null;\n  backgroundColor?: string;\n  textColor?: string;\n}\n"
+        },
+        {
+          "filename": "styles.css",
+          "content": ".hero-banner {\n  width: 100%;\n  min-height: 480px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 64px 24px;\n}\n\n.hero-inner {\n  max-width: 720px;\n}\n\n.hero-heading {\n  font-size: 48px;\n  font-weight: 800;\n  margin: 0 0 16px 0;\n  line-height: 1.1;\n}\n\n.hero-subtitle {\n  font-size: 18px;\n  opacity: 0.85;\n  margin: 0 0 32px 0;\n  line-height: 1.5;\n}\n\n.hero-cta {\n  display: inline-block;\n  padding: 14px 32px;\n  font-size: 16px;\n  font-weight: 600;\n  color: #111;\n  background: #fff;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: opacity 0.15s;\n}\n\n.hero-cta:hover {\n  opacity: 0.9;\n}\n\n@media (max-width: 768px) {\n  .hero-banner { min-height: 360px; padding: 48px 24px; }\n  .hero-heading { font-size: 32px; }\n  .hero-subtitle { font-size: 16px; }\n}\n"
+        },
+        {
+          "filename": "ikas-config-snippet.json",
+          "content": "{\n  \"id\": \"hero-banner\",\n  \"name\": \"Hero Banner\",\n  \"type\": \"section\",\n  \"props\": [\n    { \"name\": \"heading\", \"displayName\": \"Heading\", \"type\": \"TEXT\", \"defaultValue\": \"Welcome to Our Store\" },\n    { \"name\": \"subtitle\", \"displayName\": \"Subtitle\", \"type\": \"TEXT\" },\n    { \"name\": \"buttonText\", \"displayName\": \"Button Text\", \"type\": \"TEXT\", \"defaultValue\": \"Shop Now\" },\n    { \"name\": \"buttonLink\", \"displayName\": \"Button Link\", \"type\": \"TEXT\", \"defaultValue\": \"/\" },\n    { \"name\": \"backgroundImage\", \"displayName\": \"Background Image\", \"type\": \"IMAGE\" },\n    { \"name\": \"backgroundColor\", \"displayName\": \"Background Color\", \"type\": \"COLOR\", \"defaultValue\": \"#111\" },\n    { \"name\": \"textColor\", \"displayName\": \"Text Color\", \"type\": \"COLOR\", \"defaultValue\": \"#fff\" }\n  ]\n}\n"
+        }
+      ]
+    },
     {
       "id": "image-handling",
       "title": "Image Handling",
@@ -17023,7 +17104,7 @@
       "id": "product-filtering",
       "title": "Product List Filtering",
       "description": "Display-type-aware product filtering: checkboxes for BOX/LIST filters, color swatches for SWATCH filters (using getIkasFilterThumbnailImage and fv.colorCode), range buttons for NUMBER_RANGE_LIST filters (using handleNumberRangeOptionClick), and category-level filtering with onFilterCategoryClick.",
-      "code": "import {\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  handleNumberRangeOptionClick,\n  getProductListFilterCategories,\n  onFilterCategoryClick,\n  isSwatchFilter,\n  getIkasFilterThumbnailImage,\n  getDefaultSrc,\n  IkasProductList,\n  IkasProductFilter,\n} from \"@ikas/bp-storefront\";\n\n/**\n * Display-type-aware product filter.\n *\n * Data flow is the same for every display type:\n *   getFilterDisplayedValues(filter)  → get sorted values\n *   handleFilterValueClick(list, filter, fv) → toggle + refetch\n *\n * Only the **visual rendering** changes based on displayType:\n *   BOX / LIST       → checkboxes\n *   SWATCH           → color circles or thumbnail images\n *   NUMBER_RANGE_LIST → predefined range buttons\n */\nexport default function ProductFilter({\n  productList,\n  filter,\n}: {\n  productList: IkasProductList;\n  filter: IkasProductFilter;\n}) {\n  const values = getFilterDisplayedValues(filter);\n  const filterCategories = getProductListFilterCategories(productList);\n\n  return (\n    <div>\n      <h3>{filter.name}</h3>\n\n      {/* SWATCH: render color circles / thumbnail images */}\n      {isSwatchFilter(filter) ? (\n        <div style={{ display: \"flex\", gap: 8, flexWrap: \"wrap\" }}>\n          {values.map((fv) => {\n            const thumbnail = getIkasFilterThumbnailImage(fv);\n            return (\n              <button\n                key={fv.name}\n                onClick={() => handleFilterValueClick(productList, filter, fv)}\n                title={fv.name}\n                style={{\n                  width: 32,\n                  height: 32,\n                  borderRadius: \"50%\",\n                  border: fv.isSelected ? \"2px solid #000\" : \"2px solid #ddd\",\n                  padding: 0,\n                  cursor: \"pointer\",\n                  overflow: \"hidden\",\n                }}\n              >\n                {thumbnail ? (\n                  <img\n                    src={getDefaultSrc(thumbnail)}\n                    alt={fv.name}\n                    style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }}\n                  />\n                ) : (\n                  <span\n                    style={{\n                      display: \"block\",\n                      width: \"100%\",\n                      height: \"100%\",\n                      backgroundColor: fv.colorCode ?? \"#ccc\",\n                      borderRadius: \"50%\",\n                    }}\n                  />\n                )}\n              </button>\n            );\n          })}\n        </div>\n      ) : (\n        /* BOX / LIST: render checkboxes (default) */\n        <ul>\n          {values.map((fv) => (\n            <li key={fv.name}>\n              <label>\n                <input\n                  type=\"checkbox\"\n                  checked={fv.isSelected ?? false}\n                  onChange={() =>\n                    handleFilterValueClick(productList, filter, fv)\n                  }\n                />\n                {fv.name}\n                {fv.count != null && ` (${fv.count})`}\n              </label>\n            </li>\n          ))}\n        </ul>\n      )}\n\n      {/* NUMBER_RANGE_LIST: render predefined range buttons */}\n      {filter.numberRangeListOptions?.map((option) => (\n        <button\n          key={`${option.from}-${option.to}`}\n          style={{\n            fontWeight: option.isSelected ? \"bold\" : \"normal\",\n            marginRight: 8,\n          }}\n          onClick={() =>\n            handleNumberRangeOptionClick(productList, filter, option)\n          }\n        >\n          {option.from} - {option.to ?? \"+\"}\n        </button>\n      ))}\n\n      {/* Category-level filtering */}\n      {filterCategories.length > 0 && (\n        <div style={{ marginTop: 16 }}>\n          <h4>Categories</h4>\n          {filterCategories.map((cat) => (\n            <button\n              key={cat.name}\n              style={{\n                fontWeight: cat.isSelected ? \"bold\" : \"normal\",\n                marginRight: 8,\n              }}\n              onClick={() => onFilterCategoryClick(productList, cat, true)}\n            >\n              {cat.name}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n",
+      "code": "import {\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  handleNumberRangeOptionClick,\n  getProductListFilterCategories,\n  onFilterCategoryClick,\n  isSwatchFilter,\n  getIkasFilterThumbnailImage,\n  getDefaultSrc,\n  IkasProductList,\n  IkasProductFilter,\n} from \"@ikas/bp-storefront\";\n\n/**\n * Display-type-aware product filter.\n *\n * Data flow is the same for every display type:\n *   getFilterDisplayedValues(filter)  → get sorted values\n *   handleFilterValueClick(list, filter, fv) → toggle + refetch\n *\n * Only the **visual rendering** changes based on displayType:\n *   BOX / LIST       → checkboxes\n *   SWATCH           → color circles or thumbnail images\n *   NUMBER_RANGE_LIST → predefined range buttons\n */\nexport default function ProductFilter({\n  productList,\n  filter,\n}: {\n  productList: IkasProductList;\n  filter: IkasProductFilter;\n}) {\n  const values = getFilterDisplayedValues(filter);\n  const filterCategories = getProductListFilterCategories(productList);\n\n  return (\n    <div>\n      <h3>{filter.name}</h3>\n\n      {/* SWATCH: render color circles / thumbnail images */}\n      {isSwatchFilter(filter) ? (\n        <div style={{ display: \"flex\", gap: 8, flexWrap: \"wrap\" }}>\n          {values.map((fv) => {\n            const thumbnail = getIkasFilterThumbnailImage(fv);\n            return (\n              <button\n                key={fv.name}\n                onClick={() => handleFilterValueClick(productList, filter, fv)}\n                title={fv.name}\n                style={{\n                  width: 32,\n                  height: 32,\n                  borderRadius: \"50%\",\n                  border: fv.isSelected === true ? \"2px solid #000\" : \"2px solid #ddd\",\n                  padding: 0,\n                  cursor: \"pointer\",\n                  overflow: \"hidden\",\n                }}\n              >\n                {thumbnail ? (\n                  <img\n                    src={getDefaultSrc(thumbnail)}\n                    alt={fv.name}\n                    style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }}\n                  />\n                ) : (\n                  <span\n                    style={{\n                      display: \"block\",\n                      width: \"100%\",\n                      height: \"100%\",\n                      backgroundColor: fv.colorCode ?? \"#ccc\",\n                      borderRadius: \"50%\",\n                    }}\n                  />\n                )}\n              </button>\n            );\n          })}\n        </div>\n      ) : (\n        /* BOX / LIST: render checkboxes (default) */\n        <ul>\n          {values.map((fv) => (\n            <li key={fv.name}>\n              <label>\n                <input\n                  type=\"checkbox\"\n                  checked={fv.isSelected === true}\n                  onChange={() =>\n                    handleFilterValueClick(productList, filter, fv)\n                  }\n                />\n                {fv.name}\n                {fv.count != null && ` (${fv.count})`}\n              </label>\n            </li>\n          ))}\n        </ul>\n      )}\n\n      {/* NUMBER_RANGE_LIST: render predefined range buttons */}\n      {filter.numberRangeListOptions?.map((option) => (\n        <button\n          key={`${option.from}-${option.to}`}\n          style={{\n            fontWeight: option.isSelected ? \"bold\" : \"normal\",\n            marginRight: 8,\n          }}\n          onClick={() =>\n            handleNumberRangeOptionClick(productList, filter, option)\n          }\n        >\n          {option.from} - {option.to ?? \"+\"}\n        </button>\n      ))}\n\n      {/* Category-level filtering */}\n      {filterCategories.length > 0 && (\n        <div style={{ marginTop: 16 }}>\n          <h4>Categories</h4>\n          {filterCategories.map((cat) => (\n            <button\n              key={cat.name}\n              style={{\n                fontWeight: cat.isSelected ? \"bold\" : \"normal\",\n                marginRight: 8,\n              }}\n              onClick={() => onFilterCategoryClick(productList, cat, true)}\n            >\n              {cat.name}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n",
       "relatedFunctions": [
         "getFilterDisplayedValues",
         "handleFilterValueClick",
@@ -17047,7 +17128,7 @@
       "id": "product-list-section",
       "title": "Product List Section (Complete)",
       "description": "Complete product list section with category breadcrumb (getCategoryPath + getIkasCategoryHref), filter sidebar with handleFilterValueClick and onFilterCategoryClick, sort via setSortType (not direct mutation), search via searchProductList, product grid, and pagination with setProductListVisiblePage. Data is automatically reactive in root components via autorun().",
-      "code": "import { useState } from \"preact/hooks\";\nimport {\n  IkasProductList,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  handleNumberRangeOptionClick,\n  getProductListFilterCategories,\n  onFilterCategoryClick,\n  isSwatchFilter,\n  getIkasFilterThumbnailImage,\n  getProductListSortOptions,\n  setSortType,\n  hasProductListNextPage,\n  hasProductListPrevPage,\n  getProductListNextPage,\n  getProductListPrevPage,\n  setProductListVisiblePage,\n  searchProductList,\n  getCategoryPath,\n  getIkasCategoryHref,\n  isEmpty,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport default function ProductListSection({\n  productList,\n  title = \"Products\",\n  showFilters = true,\n}: Props) {\n  const [searchKeyword, setSearchKeyword] = useState(\"\");\n\n  if (!productList) return null;\n\n  const products = productList.products ?? [];\n  const filterCategories = getProductListFilterCategories(productList);\n  const sortOptions = getProductListSortOptions(productList);\n  const hasNext = hasProductListNextPage(productList);\n  const hasPrev = hasProductListPrevPage(productList);\n\n  // Category breadcrumb path\n  const category = productList.category;\n  const categoryPath = category ? getCategoryPath(category) : [];\n\n  const handleSort = (value: string) => {\n    const selected = sortOptions.find((opt) => opt.value === value);\n    if (selected) {\n      setSortType(productList, selected.value as any);\n    }\n  };\n\n  const handleSearch = (keyword: string) => {\n    setSearchKeyword(keyword);\n    searchProductList(productList, keyword);\n  };\n\n  return (\n    <section className=\"product-list-section\">\n      <div className=\"product-list-inner\">\n        {/* Category Breadcrumb */}\n        {categoryPath.length > 0 && (\n          <nav className=\"product-list-breadcrumb\">\n            <a href=\"/\">Home</a>\n            {categoryPath.map((cat: any, i: number) => (\n              <span key={i}>\n                <span className=\"breadcrumb-sep\"> / </span>\n                <a href={getIkasCategoryHref(cat)}>{cat.name}</a>\n              </span>\n            ))}\n          </nav>\n        )}\n\n        <div className=\"product-list-header\">\n          <h1 className=\"product-list-title\">\n            {category?.name || title}\n            {category?.description && (\n              <p className=\"product-list-description\">{category.description}</p>\n            )}\n          </h1>\n\n          <div className=\"product-list-controls\">\n            {/* Search */}\n            <input\n              className=\"product-list-search\"\n              type=\"text\"\n              placeholder=\"Search products...\"\n              value={searchKeyword}\n              onInput={(e) => handleSearch((e.target as HTMLInputElement).value)}\n            />\n\n            {/* Sort — use setSortType instead of direct mutation */}\n            {sortOptions.length > 0 && (\n              <select\n                className=\"product-list-sort\"\n                value={sortOptions.find((o) => o.isSelected)?.value ?? \"\"}\n                onChange={(e) => handleSort((e.target as HTMLSelectElement).value)}\n              >\n                {sortOptions.map((opt) => (\n                  <option key={opt.value} value={opt.value}>{opt.label}</option>\n                ))}\n              </select>\n            )}\n          </div>\n        </div>\n\n        <div className=\"product-list-layout\">\n          {/* Filter Sidebar — display-type-aware rendering */}\n          {showFilters && (productList.filters ?? []).length > 0 && (\n            <aside className=\"product-list-filters\">\n              {(productList.filters ?? []).map((filter) => {\n                const values = getFilterDisplayedValues(filter);\n                if (values.length === 0 && !filter.numberRangeListOptions?.length) return null;\n\n                return (\n                  <div key={filter.id} className=\"filter-group\">\n                    <h3 className=\"filter-group-title\">{filter.name}</h3>\n\n                    {/* SWATCH: color circles / thumbnail images */}\n                    {isSwatchFilter(filter) ? (\n                      <div className=\"filter-swatches\">\n                        {values.map((fv) => {\n                          const thumbnail = getIkasFilterThumbnailImage(fv);\n                          return (\n                            <button\n                              key={fv.name}\n                              className={`filter-swatch${fv.isSelected ? \" selected\" : \"\"}`}\n                              onClick={() => handleFilterValueClick(productList, filter, fv)}\n                              title={fv.name}\n                            >\n                              {thumbnail ? (\n                                <img src={getDefaultSrc(thumbnail)} alt={fv.name} />\n                              ) : (\n                                <span\n                                  className=\"filter-swatch-color\"\n                                  style={{ backgroundColor: fv.colorCode ?? \"#ccc\" }}\n                                />\n                              )}\n                            </button>\n                          );\n                        })}\n                      </div>\n                    ) : (\n                      /* BOX / LIST: checkboxes (default) */\n                      <div className=\"filter-values\">\n                        {values.map((fv) => (\n                          <label key={fv.name} className=\"filter-value\">\n                            <input\n                              type=\"checkbox\"\n                              checked={fv.isSelected}\n                              onChange={() =>\n                                handleFilterValueClick(productList, filter, fv)\n                              }\n                            />\n                            <span>{fv.name}</span>\n                            {fv.count != null && (\n                              <span className=\"filter-count\">({fv.count})</span>\n                            )}\n                          </label>\n                        ))}\n                      </div>\n                    )}\n\n                    {/* NUMBER_RANGE_LIST: predefined range buttons */}\n                    {filter.numberRangeListOptions?.map((option) => (\n                      <button\n                        key={`${option.from}-${option.to}`}\n                        className={`filter-range-btn${option.isSelected ? \" selected\" : \"\"}`}\n                        onClick={() => handleNumberRangeOptionClick(productList, filter, option)}\n                      >\n                        {option.from} - {option.to ?? \"+\"}\n                      </button>\n                    ))}\n                  </div>\n                );\n              })}\n\n              {/* Category-level filtering */}\n              {filterCategories.length > 0 && (\n                <div className=\"filter-group\">\n                  <h3 className=\"filter-group-title\">Categories</h3>\n                  {filterCategories.map((cat) => (\n                    <button\n                      key={cat.name}\n                      className=\"filter-category-btn\"\n                      onClick={() => onFilterCategoryClick(productList, cat, true)}\n                    >\n                      {cat.name}\n                    </button>\n                  ))}\n                </div>\n              )}\n            </aside>\n          )}\n\n          {/* Product Grid — IkasThemeInfiniteScroller pattern for infinite scroll */}\n          <div className=\"product-grid\">\n            {isEmpty(products) && (\n              <p className=\"product-grid-empty\">No products found.</p>\n            )}\n            {products.map((product) => {\n              const variant = getSelectedProductVariant(product);\n              const productImage = getProductVariantMainImage(variant);\n              const image = productImage?.image ?? null;\n              const price = getProductVariantFormattedFinalPrice(variant) as unknown as string;\n              const href = getSelectedProductVariantHref(product);\n\n              return (\n                <a key={product.id} href={href} className=\"product-card\">\n                  <div className=\"product-card-image-wrap\">\n                    {image && (\n                      <img\n                        src={getDefaultSrc(image)}\n                        alt={product.name}\n                        className=\"product-card-image\"\n                      />\n                    )}\n                  </div>\n                  <div className=\"product-card-info\">\n                    <h3 className=\"product-card-name\">{product.name}</h3>\n                    <span className=\"product-card-price\">{price}</span>\n                  </div>\n                </a>\n              );\n            })}\n          </div>\n        </div>\n\n        {/* Pagination — includes setProductListVisiblePage for page jumping */}\n        {(hasPrev || hasNext) && (\n          <div className=\"product-list-pagination\">\n            <button\n              className=\"pagination-btn\"\n              disabled={!hasPrev}\n              onClick={() => getProductListPrevPage(productList)}\n            >\n              Previous\n            </button>\n            <span className=\"pagination-info\">\n              Page {productList.page}\n            </span>\n            <button\n              className=\"pagination-btn\"\n              disabled={!hasNext}\n              onClick={() => getProductListNextPage(productList)}\n            >\n              Next\n            </button>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\n",
+      "code": "import { useState } from \"preact/hooks\";\nimport {\n  IkasProductList,\n  IkasProductListSortType,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  handleNumberRangeOptionClick,\n  getProductListFilterCategories,\n  onFilterCategoryClick,\n  isSwatchFilter,\n  getIkasFilterThumbnailImage,\n  getProductListSortOptions,\n  setSortType,\n  hasProductListNextPage,\n  hasProductListPrevPage,\n  getProductListNextPage,\n  getProductListPrevPage,\n  setProductListVisiblePage,\n  searchProductList,\n  getCategoryPath,\n  getIkasCategoryHref,\n  isEmpty,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport default function ProductListSection({\n  productList,\n  title = \"Products\",\n  showFilters = true,\n}: Props) {\n  const [searchKeyword, setSearchKeyword] = useState(\"\");\n\n  if (!productList) return null;\n\n  const products = productList.data ?? [];\n  const filterCategories = getProductListFilterCategories(productList);\n  const sortOptions = getProductListSortOptions(productList);\n  const hasNext = hasProductListNextPage(productList);\n  const hasPrev = hasProductListPrevPage(productList);\n\n  // Category breadcrumb path\n  const category = productList.category;\n  const categoryPath = category ? getCategoryPath(category) : [];\n\n  const handleSort = (value: string) => {\n    const selected = sortOptions.find((opt) => opt.value === value);\n    if (selected) {\n      setSortType(productList, selected.value as IkasProductListSortType);\n    }\n  };\n\n  const handleSearch = (keyword: string) => {\n    setSearchKeyword(keyword);\n    searchProductList(productList, keyword);\n  };\n\n  return (\n    <section className=\"product-list-section\">\n      <div className=\"product-list-inner\">\n        {/* Category Breadcrumb */}\n        {categoryPath.length > 0 && (\n          <nav className=\"product-list-breadcrumb\">\n            <a href=\"/\">Home</a>\n            {categoryPath.map((cat: any, i: number) => (\n              <span key={i}>\n                <span className=\"breadcrumb-sep\"> / </span>\n                <a href={getIkasCategoryHref(cat)}>{cat.name}</a>\n              </span>\n            ))}\n          </nav>\n        )}\n\n        <div className=\"product-list-header\">\n          <h1 className=\"product-list-title\">\n            {category?.name || title}\n            {category?.description && (\n              <p className=\"product-list-description\">{category.description}</p>\n            )}\n          </h1>\n\n          <div className=\"product-list-controls\">\n            {/* Search */}\n            <input\n              className=\"product-list-search\"\n              type=\"text\"\n              placeholder=\"Search products...\"\n              value={searchKeyword}\n              onInput={(e) => handleSearch((e.target as HTMLInputElement).value)}\n            />\n\n            {/* Sort — use setSortType instead of direct mutation */}\n            {sortOptions.length > 0 && (\n              <select\n                className=\"product-list-sort\"\n                value={sortOptions.find((o) => o.isSelected)?.value ?? \"\"}\n                onChange={(e) => handleSort((e.target as HTMLSelectElement).value)}\n              >\n                {sortOptions.map((opt) => (\n                  <option key={opt.value} value={opt.value}>{opt.label}</option>\n                ))}\n              </select>\n            )}\n          </div>\n        </div>\n\n        <div className=\"product-list-layout\">\n          {/* Filter Sidebar — display-type-aware rendering */}\n          {showFilters && (productList.filters ?? []).length > 0 && (\n            <aside className=\"product-list-filters\">\n              {(productList.filters ?? []).map((filter) => {\n                const values = getFilterDisplayedValues(filter);\n                if (values.length === 0 && !filter.numberRangeListOptions?.length) return null;\n\n                return (\n                  <div key={filter.id} className=\"filter-group\">\n                    <h3 className=\"filter-group-title\">{filter.name}</h3>\n\n                    {/* SWATCH: color circles / thumbnail images */}\n                    {isSwatchFilter(filter) ? (\n                      <div className=\"filter-swatches\">\n                        {values.map((fv) => {\n                          const thumbnail = getIkasFilterThumbnailImage(fv);\n                          return (\n                            <button\n                              key={fv.name}\n                              className={`filter-swatch${fv.isSelected === true ? \" selected\" : \"\"}`}\n                              onClick={() => handleFilterValueClick(productList, filter, fv)}\n                              title={fv.name}\n                            >\n                              {thumbnail ? (\n                                <img src={getDefaultSrc(thumbnail)} alt={fv.name} />\n                              ) : (\n                                <span\n                                  className=\"filter-swatch-color\"\n                                  style={{ backgroundColor: fv.colorCode ?? \"#ccc\" }}\n                                />\n                              )}\n                            </button>\n                          );\n                        })}\n                      </div>\n                    ) : (\n                      /* BOX / LIST: checkboxes (default) */\n                      <div className=\"filter-values\">\n                        {values.map((fv) => (\n                          <label key={fv.name} className=\"filter-value\">\n                            <input\n                              type=\"checkbox\"\n                              checked={fv.isSelected === true}\n                              onChange={() =>\n                                handleFilterValueClick(productList, filter, fv)\n                              }\n                            />\n                            <span>{fv.name}</span>\n                            {fv.count != null && (\n                              <span className=\"filter-count\">({fv.count})</span>\n                            )}\n                          </label>\n                        ))}\n                      </div>\n                    )}\n\n                    {/* NUMBER_RANGE_LIST: predefined range buttons */}\n                    {filter.numberRangeListOptions?.map((option) => (\n                      <button\n                        key={`${option.from}-${option.to}`}\n                        className={`filter-range-btn${option.isSelected ? \" selected\" : \"\"}`}\n                        onClick={() => handleNumberRangeOptionClick(productList, filter, option)}\n                      >\n                        {option.from} - {option.to ?? \"+\"}\n                      </button>\n                    ))}\n                  </div>\n                );\n              })}\n\n              {/* Category-level filtering */}\n              {filterCategories.length > 0 && (\n                <div className=\"filter-group\">\n                  <h3 className=\"filter-group-title\">Categories</h3>\n                  {filterCategories.map((cat) => (\n                    <button\n                      key={cat.name}\n                      className=\"filter-category-btn\"\n                      onClick={() => onFilterCategoryClick(productList, cat, true)}\n                    >\n                      {cat.name}\n                    </button>\n                  ))}\n                </div>\n              )}\n            </aside>\n          )}\n\n          {/* Product Grid — IkasThemeInfiniteScroller pattern for infinite scroll */}\n          <div className=\"product-grid\">\n            {isEmpty(products) && (\n              <p className=\"product-grid-empty\">No products found.</p>\n            )}\n            {products.map((product) => {\n              const variant = getSelectedProductVariant(product);\n              const productImage = getProductVariantMainImage(variant);\n              const image = productImage?.image ?? null;\n              const price = getProductVariantFormattedFinalPrice(variant) as unknown as string;\n              const href = getSelectedProductVariantHref(product);\n\n              return (\n                <a key={product.id} href={href} className=\"product-card\">\n                  <div className=\"product-card-image-wrap\">\n                    {image && (\n                      <img\n                        src={getDefaultSrc(image)}\n                        alt={product.name}\n                        className=\"product-card-image\"\n                      />\n                    )}\n                  </div>\n                  <div className=\"product-card-info\">\n                    <h3 className=\"product-card-name\">{product.name}</h3>\n                    <span className=\"product-card-price\">{price}</span>\n                  </div>\n                </a>\n              );\n            })}\n          </div>\n        </div>\n\n        {/* Pagination — includes setProductListVisiblePage for page jumping */}\n        {(hasPrev || hasNext) && (\n          <div className=\"product-list-pagination\">\n            <button\n              className=\"pagination-btn\"\n              disabled={!hasPrev}\n              onClick={() => getProductListPrevPage(productList)}\n            >\n              Previous\n            </button>\n            <span className=\"pagination-info\">\n              Page {productList.page}\n            </span>\n            <button\n              className=\"pagination-btn\"\n              disabled={!hasNext}\n              onClick={() => getProductListNextPage(productList)}\n            >\n              Next\n            </button>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\n",
       "relatedFunctions": [
         "getSelectedProductVariant",
         "getProductVariantFormattedFinalPrice",
@@ -17085,7 +17166,7 @@
       "files": [
         {
           "filename": "index.tsx",
-          "content": "import { useState } from \"preact/hooks\";\nimport {\n  IkasProductList,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  handleNumberRangeOptionClick,\n  getProductListFilterCategories,\n  onFilterCategoryClick,\n  isSwatchFilter,\n  getIkasFilterThumbnailImage,\n  getProductListSortOptions,\n  setSortType,\n  hasProductListNextPage,\n  hasProductListPrevPage,\n  getProductListNextPage,\n  getProductListPrevPage,\n  setProductListVisiblePage,\n  searchProductList,\n  getCategoryPath,\n  getIkasCategoryHref,\n  isEmpty,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport default function ProductListSection({\n  productList,\n  title = \"Products\",\n  showFilters = true,\n}: Props) {\n  const [searchKeyword, setSearchKeyword] = useState(\"\");\n\n  if (!productList) return null;\n\n  const products = productList.products ?? [];\n  const filterCategories = getProductListFilterCategories(productList);\n  const sortOptions = getProductListSortOptions(productList);\n  const hasNext = hasProductListNextPage(productList);\n  const hasPrev = hasProductListPrevPage(productList);\n\n  // Category breadcrumb path\n  const category = productList.category;\n  const categoryPath = category ? getCategoryPath(category) : [];\n\n  const handleSort = (value: string) => {\n    const selected = sortOptions.find((opt) => opt.value === value);\n    if (selected) {\n      setSortType(productList, selected.value as any);\n    }\n  };\n\n  const handleSearch = (keyword: string) => {\n    setSearchKeyword(keyword);\n    searchProductList(productList, keyword);\n  };\n\n  return (\n    <section className=\"product-list-section\">\n      <div className=\"product-list-inner\">\n        {/* Category Breadcrumb */}\n        {categoryPath.length > 0 && (\n          <nav className=\"product-list-breadcrumb\">\n            <a href=\"/\">Home</a>\n            {categoryPath.map((cat: any, i: number) => (\n              <span key={i}>\n                <span className=\"breadcrumb-sep\"> / </span>\n                <a href={getIkasCategoryHref(cat)}>{cat.name}</a>\n              </span>\n            ))}\n          </nav>\n        )}\n\n        <div className=\"product-list-header\">\n          <h1 className=\"product-list-title\">\n            {category?.name || title}\n            {category?.description && (\n              <p className=\"product-list-description\">{category.description}</p>\n            )}\n          </h1>\n\n          <div className=\"product-list-controls\">\n            {/* Search */}\n            <input\n              className=\"product-list-search\"\n              type=\"text\"\n              placeholder=\"Search products...\"\n              value={searchKeyword}\n              onInput={(e) => handleSearch((e.target as HTMLInputElement).value)}\n            />\n\n            {/* Sort — use setSortType instead of direct mutation */}\n            {sortOptions.length > 0 && (\n              <select\n                className=\"product-list-sort\"\n                value={sortOptions.find((o) => o.isSelected)?.value ?? \"\"}\n                onChange={(e) => handleSort((e.target as HTMLSelectElement).value)}\n              >\n                {sortOptions.map((opt) => (\n                  <option key={opt.value} value={opt.value}>{opt.label}</option>\n                ))}\n              </select>\n            )}\n          </div>\n        </div>\n\n        <div className=\"product-list-layout\">\n          {/* Filter Sidebar — display-type-aware rendering */}\n          {showFilters && (productList.filters ?? []).length > 0 && (\n            <aside className=\"product-list-filters\">\n              {(productList.filters ?? []).map((filter) => {\n                const values = getFilterDisplayedValues(filter);\n                if (values.length === 0 && !filter.numberRangeListOptions?.length) return null;\n\n                return (\n                  <div key={filter.id} className=\"filter-group\">\n                    <h3 className=\"filter-group-title\">{filter.name}</h3>\n\n                    {/* SWATCH: color circles / thumbnail images */}\n                    {isSwatchFilter(filter) ? (\n                      <div className=\"filter-swatches\">\n                        {values.map((fv) => {\n                          const thumbnail = getIkasFilterThumbnailImage(fv);\n                          return (\n                            <button\n                              key={fv.name}\n                              className={`filter-swatch${fv.isSelected ? \" selected\" : \"\"}`}\n                              onClick={() => handleFilterValueClick(productList, filter, fv)}\n                              title={fv.name}\n                            >\n                              {thumbnail ? (\n                                <img src={getDefaultSrc(thumbnail)} alt={fv.name} />\n                              ) : (\n                                <span\n                                  className=\"filter-swatch-color\"\n                                  style={{ backgroundColor: fv.colorCode ?? \"#ccc\" }}\n                                />\n                              )}\n                            </button>\n                          );\n                        })}\n                      </div>\n                    ) : (\n                      /* BOX / LIST: checkboxes (default) */\n                      <div className=\"filter-values\">\n                        {values.map((fv) => (\n                          <label key={fv.name} className=\"filter-value\">\n                            <input\n                              type=\"checkbox\"\n                              checked={fv.isSelected}\n                              onChange={() =>\n                                handleFilterValueClick(productList, filter, fv)\n                              }\n                            />\n                            <span>{fv.name}</span>\n                            {fv.count != null && (\n                              <span className=\"filter-count\">({fv.count})</span>\n                            )}\n                          </label>\n                        ))}\n                      </div>\n                    )}\n\n                    {/* NUMBER_RANGE_LIST: predefined range buttons */}\n                    {filter.numberRangeListOptions?.map((option) => (\n                      <button\n                        key={`${option.from}-${option.to}`}\n                        className={`filter-range-btn${option.isSelected ? \" selected\" : \"\"}`}\n                        onClick={() => handleNumberRangeOptionClick(productList, filter, option)}\n                      >\n                        {option.from} - {option.to ?? \"+\"}\n                      </button>\n                    ))}\n                  </div>\n                );\n              })}\n\n              {/* Category-level filtering */}\n              {filterCategories.length > 0 && (\n                <div className=\"filter-group\">\n                  <h3 className=\"filter-group-title\">Categories</h3>\n                  {filterCategories.map((cat) => (\n                    <button\n                      key={cat.name}\n                      className=\"filter-category-btn\"\n                      onClick={() => onFilterCategoryClick(productList, cat, true)}\n                    >\n                      {cat.name}\n                    </button>\n                  ))}\n                </div>\n              )}\n            </aside>\n          )}\n\n          {/* Product Grid — IkasThemeInfiniteScroller pattern for infinite scroll */}\n          <div className=\"product-grid\">\n            {isEmpty(products) && (\n              <p className=\"product-grid-empty\">No products found.</p>\n            )}\n            {products.map((product) => {\n              const variant = getSelectedProductVariant(product);\n              const productImage = getProductVariantMainImage(variant);\n              const image = productImage?.image ?? null;\n              const price = getProductVariantFormattedFinalPrice(variant) as unknown as string;\n              const href = getSelectedProductVariantHref(product);\n\n              return (\n                <a key={product.id} href={href} className=\"product-card\">\n                  <div className=\"product-card-image-wrap\">\n                    {image && (\n                      <img\n                        src={getDefaultSrc(image)}\n                        alt={product.name}\n                        className=\"product-card-image\"\n                      />\n                    )}\n                  </div>\n                  <div className=\"product-card-info\">\n                    <h3 className=\"product-card-name\">{product.name}</h3>\n                    <span className=\"product-card-price\">{price}</span>\n                  </div>\n                </a>\n              );\n            })}\n          </div>\n        </div>\n\n        {/* Pagination — includes setProductListVisiblePage for page jumping */}\n        {(hasPrev || hasNext) && (\n          <div className=\"product-list-pagination\">\n            <button\n              className=\"pagination-btn\"\n              disabled={!hasPrev}\n              onClick={() => getProductListPrevPage(productList)}\n            >\n              Previous\n            </button>\n            <span className=\"pagination-info\">\n              Page {productList.page}\n            </span>\n            <button\n              className=\"pagination-btn\"\n              disabled={!hasNext}\n              onClick={() => getProductListNextPage(productList)}\n            >\n              Next\n            </button>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\n"
+          "content": "import { useState } from \"preact/hooks\";\nimport {\n  IkasProductList,\n  IkasProductListSortType,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  handleNumberRangeOptionClick,\n  getProductListFilterCategories,\n  onFilterCategoryClick,\n  isSwatchFilter,\n  getIkasFilterThumbnailImage,\n  getProductListSortOptions,\n  setSortType,\n  hasProductListNextPage,\n  hasProductListPrevPage,\n  getProductListNextPage,\n  getProductListPrevPage,\n  setProductListVisiblePage,\n  searchProductList,\n  getCategoryPath,\n  getIkasCategoryHref,\n  isEmpty,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport default function ProductListSection({\n  productList,\n  title = \"Products\",\n  showFilters = true,\n}: Props) {\n  const [searchKeyword, setSearchKeyword] = useState(\"\");\n\n  if (!productList) return null;\n\n  const products = productList.data ?? [];\n  const filterCategories = getProductListFilterCategories(productList);\n  const sortOptions = getProductListSortOptions(productList);\n  const hasNext = hasProductListNextPage(productList);\n  const hasPrev = hasProductListPrevPage(productList);\n\n  // Category breadcrumb path\n  const category = productList.category;\n  const categoryPath = category ? getCategoryPath(category) : [];\n\n  const handleSort = (value: string) => {\n    const selected = sortOptions.find((opt) => opt.value === value);\n    if (selected) {\n      setSortType(productList, selected.value as IkasProductListSortType);\n    }\n  };\n\n  const handleSearch = (keyword: string) => {\n    setSearchKeyword(keyword);\n    searchProductList(productList, keyword);\n  };\n\n  return (\n    <section className=\"product-list-section\">\n      <div className=\"product-list-inner\">\n        {/* Category Breadcrumb */}\n        {categoryPath.length > 0 && (\n          <nav className=\"product-list-breadcrumb\">\n            <a href=\"/\">Home</a>\n            {categoryPath.map((cat: any, i: number) => (\n              <span key={i}>\n                <span className=\"breadcrumb-sep\"> / </span>\n                <a href={getIkasCategoryHref(cat)}>{cat.name}</a>\n              </span>\n            ))}\n          </nav>\n        )}\n\n        <div className=\"product-list-header\">\n          <h1 className=\"product-list-title\">\n            {category?.name || title}\n            {category?.description && (\n              <p className=\"product-list-description\">{category.description}</p>\n            )}\n          </h1>\n\n          <div className=\"product-list-controls\">\n            {/* Search */}\n            <input\n              className=\"product-list-search\"\n              type=\"text\"\n              placeholder=\"Search products...\"\n              value={searchKeyword}\n              onInput={(e) => handleSearch((e.target as HTMLInputElement).value)}\n            />\n\n            {/* Sort — use setSortType instead of direct mutation */}\n            {sortOptions.length > 0 && (\n              <select\n                className=\"product-list-sort\"\n                value={sortOptions.find((o) => o.isSelected)?.value ?? \"\"}\n                onChange={(e) => handleSort((e.target as HTMLSelectElement).value)}\n              >\n                {sortOptions.map((opt) => (\n                  <option key={opt.value} value={opt.value}>{opt.label}</option>\n                ))}\n              </select>\n            )}\n          </div>\n        </div>\n\n        <div className=\"product-list-layout\">\n          {/* Filter Sidebar — display-type-aware rendering */}\n          {showFilters && (productList.filters ?? []).length > 0 && (\n            <aside className=\"product-list-filters\">\n              {(productList.filters ?? []).map((filter) => {\n                const values = getFilterDisplayedValues(filter);\n                if (values.length === 0 && !filter.numberRangeListOptions?.length) return null;\n\n                return (\n                  <div key={filter.id} className=\"filter-group\">\n                    <h3 className=\"filter-group-title\">{filter.name}</h3>\n\n                    {/* SWATCH: color circles / thumbnail images */}\n                    {isSwatchFilter(filter) ? (\n                      <div className=\"filter-swatches\">\n                        {values.map((fv) => {\n                          const thumbnail = getIkasFilterThumbnailImage(fv);\n                          return (\n                            <button\n                              key={fv.name}\n                              className={`filter-swatch${fv.isSelected === true ? \" selected\" : \"\"}`}\n                              onClick={() => handleFilterValueClick(productList, filter, fv)}\n                              title={fv.name}\n                            >\n                              {thumbnail ? (\n                                <img src={getDefaultSrc(thumbnail)} alt={fv.name} />\n                              ) : (\n                                <span\n                                  className=\"filter-swatch-color\"\n                                  style={{ backgroundColor: fv.colorCode ?? \"#ccc\" }}\n                                />\n                              )}\n                            </button>\n                          );\n                        })}\n                      </div>\n                    ) : (\n                      /* BOX / LIST: checkboxes (default) */\n                      <div className=\"filter-values\">\n                        {values.map((fv) => (\n                          <label key={fv.name} className=\"filter-value\">\n                            <input\n                              type=\"checkbox\"\n                              checked={fv.isSelected === true}\n                              onChange={() =>\n                                handleFilterValueClick(productList, filter, fv)\n                              }\n                            />\n                            <span>{fv.name}</span>\n                            {fv.count != null && (\n                              <span className=\"filter-count\">({fv.count})</span>\n                            )}\n                          </label>\n                        ))}\n                      </div>\n                    )}\n\n                    {/* NUMBER_RANGE_LIST: predefined range buttons */}\n                    {filter.numberRangeListOptions?.map((option) => (\n                      <button\n                        key={`${option.from}-${option.to}`}\n                        className={`filter-range-btn${option.isSelected ? \" selected\" : \"\"}`}\n                        onClick={() => handleNumberRangeOptionClick(productList, filter, option)}\n                      >\n                        {option.from} - {option.to ?? \"+\"}\n                      </button>\n                    ))}\n                  </div>\n                );\n              })}\n\n              {/* Category-level filtering */}\n              {filterCategories.length > 0 && (\n                <div className=\"filter-group\">\n                  <h3 className=\"filter-group-title\">Categories</h3>\n                  {filterCategories.map((cat) => (\n                    <button\n                      key={cat.name}\n                      className=\"filter-category-btn\"\n                      onClick={() => onFilterCategoryClick(productList, cat, true)}\n                    >\n                      {cat.name}\n                    </button>\n                  ))}\n                </div>\n              )}\n            </aside>\n          )}\n\n          {/* Product Grid — IkasThemeInfiniteScroller pattern for infinite scroll */}\n          <div className=\"product-grid\">\n            {isEmpty(products) && (\n              <p className=\"product-grid-empty\">No products found.</p>\n            )}\n            {products.map((product) => {\n              const variant = getSelectedProductVariant(product);\n              const productImage = getProductVariantMainImage(variant);\n              const image = productImage?.image ?? null;\n              const price = getProductVariantFormattedFinalPrice(variant) as unknown as string;\n              const href = getSelectedProductVariantHref(product);\n\n              return (\n                <a key={product.id} href={href} className=\"product-card\">\n                  <div className=\"product-card-image-wrap\">\n                    {image && (\n                      <img\n                        src={getDefaultSrc(image)}\n                        alt={product.name}\n                        className=\"product-card-image\"\n                      />\n                    )}\n                  </div>\n                  <div className=\"product-card-info\">\n                    <h3 className=\"product-card-name\">{product.name}</h3>\n                    <span className=\"product-card-price\">{price}</span>\n                  </div>\n                </a>\n              );\n            })}\n          </div>\n        </div>\n\n        {/* Pagination — includes setProductListVisiblePage for page jumping */}\n        {(hasPrev || hasNext) && (\n          <div className=\"product-list-pagination\">\n            <button\n              className=\"pagination-btn\"\n              disabled={!hasPrev}\n              onClick={() => getProductListPrevPage(productList)}\n            >\n              Previous\n            </button>\n            <span className=\"pagination-info\">\n              Page {productList.page}\n            </span>\n            <button\n              className=\"pagination-btn\"\n              disabled={!hasNext}\n              onClick={() => getProductListNextPage(productList)}\n            >\n              Next\n            </button>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\n"
         },
         {
           "filename": "types.ts",

package/data/storefront-types.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-02-19T17:37:32.624Z",
+  "generatedAt": "2026-02-20T13:11:41.716Z",
   "types": [
     {
       "name": "IkasProductAttributeDetail",

package/dist/index.js

@@ -405,6 +405,38 @@ server.tool("get_code_example", "Get a code example for a specific task. Availab
 // Tool: get_framework_guide
 server.tool("get_framework_guide", "Get a framework guide on a specific topic. Topics: project-structure, ikas-config, prop-types, component-structure, build-system, css-scoping, dev-server, imports, sections-vs-components, common-pitfalls (13 pitfalls: root component should NOT use observer, observer sub-component naming, mutations, CSS, null safety, forms, events, parameter order), sub-component-patterns (IMPORTANT: how to organize sub-components in src/sub-components/ folders — file structure, CSS @import, inline Props, observer rules), ai-workflow (step-by-step guide for AI agents with CLI commands and MCP tool usage), form-handling, async-data-patterns, product-detail-patterns, product-list-patterns, cart-patterns, account-patterns, header-footer-patterns, review-patterns, slider-overlay-patterns, blog-patterns, navigation-patterns, real-world-architecture.", { topic: z.string().describe("Topic key or keyword (e.g. 'ai-workflow', 'common-pitfalls', 'prop-types', 'css-scoping', 'form-handling', 'async-data-patterns', 'imports')") }, async ({ topic }) => {
     const topicLower = topic.toLowerCase().replace(/\s+/g, "-");
+    // Alias mapping for common alternative topic names
+    const topicAliases = {
+        "form-handling": "form-patterns",
+        "forms": "form-patterns",
+        "data-fetching": "async-data-patterns",
+        "async": "async-data-patterns",
+        "loading": "async-data-patterns",
+        "sub-components": "sub-component-patterns",
+        "subcomponents": "sub-component-patterns",
+        "routing": "navigation-patterns",
+        "router": "navigation-patterns",
+        "observer": "component-structure",
+        "reactivity": "component-structure",
+        "pitfalls": "common-pitfalls",
+        "gotchas": "common-pitfalls",
+        "mistakes": "common-pitfalls",
+        "header": "header-footer-patterns",
+        "footer": "header-footer-patterns",
+        "blog": "blog-patterns",
+        "cart": "cart-patterns",
+        "account": "account-patterns",
+        "product-detail": "product-detail-patterns",
+        "product-list": "product-list-patterns",
+        "filtering": "product-list-patterns",
+        "reviews": "review-patterns",
+        "slider": "slider-overlay-patterns",
+        "overlay": "slider-overlay-patterns",
+        "modal": "slider-overlay-patterns",
+        "architecture": "real-world-architecture",
+        "theme": "real-world-architecture",
+    };
+    const resolvedTopic = topicAliases[topicLower] || topicLower;
     // Topics that involve MobX store reads get a reminder about root reactivity
     const storeTopics = new Set([
         "product-detail-patterns", "product-list-patterns", "cart-patterns",
@@ -413,8 +445,14 @@ server.tool("get_framework_guide", "Get a framework guide on a specific topic. T
         "component-structure", "imports",
     ]);
     const observerReminder = "> **IMPORTANT: Do NOT use `observer()` on root component exports.** The ikas runtime wraps root renders in MobX `autorun()`, making them automatically reactive. All store reads (`cartStore`, `customerStore`, etc.) in root components are tracked automatically. Only use `observer()` on extracted sub-components.\n\n";
-    // Try exact key match
-    if (frameworkData.topics[topicLower]) {
+    // Try exact key match (with alias resolution)
+    if (frameworkData.topics[resolvedTopic]) {
+        const t = frameworkData.topics[resolvedTopic];
+        const prefix = storeTopics.has(resolvedTopic) ? observerReminder : "";
+        return { content: [{ type: "text", text: `## ${t.title}\n\n${prefix}${t.content}` }] };
+    }
+    // Try original topic key (without alias) in case it's a direct key
+    if (resolvedTopic !== topicLower && frameworkData.topics[topicLower]) {
         const t = frameworkData.topics[topicLower];
         const prefix = storeTopics.has(topicLower) ? observerReminder : "";
         return { content: [{ type: "text", text: `## ${t.title}\n\n${prefix}${t.content}` }] };
@@ -523,7 +561,16 @@ server.tool("get_functions_for_type", "Get full documentation for all utility fu
     return { content: [{ type: "text", text: parts.join("\n") }] };
 });
 // Tool: get_model_guide
-server.tool("get_model_guide", "Get a comprehensive guide for working with a storefront model type. Returns the type definition, all utility functions, matching code examples, related types, and import patterns. This is the one-stop-shop tool when you need to work with a model.", { model: z.string().describe("Model type name (e.g. 'IkasImage', 'IkasProduct', 'IkasOrder')") }, async ({ model }) => {
+server.tool("get_model_guide", "Get a comprehensive guide for working with a storefront model type. Returns the type definition, all utility functions, matching code examples, related types, and import patterns. This is the one-stop-shop tool when you need to work with a model.", {
+    model: z.string().optional().describe("Model type name (e.g. 'IkasImage', 'IkasProduct', 'IkasOrder')"),
+    name: z.string().optional().describe("Alias for 'model' — model type name (e.g. 'IkasImage', 'IkasProduct', 'IkasOrder')"),
+}, async ({ model: modelParam, name: nameParam }) => {
+    const model = modelParam || nameParam;
+    if (!model) {
+        return {
+            content: [{ type: "text", text: "Please provide a model name (e.g. 'IkasProduct', 'IkasOrder'). Use the 'model' or 'name' parameter." }],
+        };
+    }
     if (!typesData) {
         return {
             content: [{ type: "text", text: "Type data not available. Run 'npm run docs:generate' in storefront-docs first." }],
@@ -722,32 +769,14 @@ server.tool("get_prop_types", "Get all available ikas.config.json prop types wit
     };
 });
 // Tool: get_section_template
-server.tool("get_section_template", "Get a complete starter template for a common section type. Returns index.tsx, types.ts, styles.css, ikas-config snippet, AND a ready-to-run CLI command with `--props` flag. Available section types: header, footer, product-detail, product-list, cart, login, register, forgot-password, reset-password, account-orders, account-addresses, account-info, favorites, contact-form, faq, blog-list, blog-post, product-reviews, hero-banner, 404, order-detail. Workflow: 1) Call this tool, 2) Run the CLI command (creates component + props + types.ts), 3) Write index.tsx and styles.css from the template. NEVER manually create or edit types.ts.", {
-    sectionType: z
-        .enum([
-        "header",
-        "footer",
-        "product-detail",
-        "product-list",
-        "cart",
-        "login",
-        "register",
-        "forgot-password",
-        "reset-password",
-        "account-orders",
-        "account-addresses",
-        "account-info",
-        "favorites",
-        "contact-form",
-        "faq",
-        "blog-list",
-        "blog-post",
-        "product-reviews",
-        "hero-banner",
-        "404",
-        "order-detail",
-    ])
-        .describe("The section type to generate a template for"),
+// Build the enum dynamically from the loaded section templates data
+const sectionTemplateKeys = sectionTemplatesData
+    ? Object.keys(sectionTemplatesData.templates)
+    : null;
+server.tool("get_section_template", `Get a complete starter template for a common section type. Returns index.tsx, types.ts, styles.css, ikas-config snippet, AND a ready-to-run CLI command with \`--props\` flag.${sectionTemplateKeys ? ` Available section types: ${sectionTemplateKeys.join(", ")}.` : ""} Workflow: 1) Call this tool, 2) Run the CLI command (creates component + props + types.ts), 3) Write index.tsx and styles.css from the template. NEVER manually create or edit types.ts.`, {
+    sectionType: (sectionTemplateKeys
+        ? z.enum(sectionTemplateKeys)
+        : z.string()).describe("The section type to generate a template for"),
 }, async ({ sectionType }) => {
     if (!sectionTemplatesData) {
         return {