@ikas/code-components-mcp 0.25.0 → 0.27.0

package/data/framework.json

@@ -29,7 +29,7 @@
     "prop-types": {
       "title": "Available Prop Types",
       "description": "All prop types that can be used in ikas.config.json",
-      "content": "Props define what the store editor can configure for each component. Each prop has a `type` that determines the editor UI and the TypeScript type received in your component.\n\n| Type | Editor UI | TypeScript Type | Description |\n|------|-----------|----------------|-------------|\n| `TEXT` | Text input | `string` | Single-line text |\n| `NUMBER` | Number input | `number` | Numeric value |\n| `BOOLEAN` | Toggle switch | `boolean` | True/false toggle |\n| `IMAGE` | Image picker | `{ src: string; alt?: string }` | Image with upload/URL |\n| `LINK` | Link editor | `{ href: string; label?: string; target?: string }` | URL link |\n| `LIST_OF_LINK` | Link list editor | `IkasNavigationLinkList` | List of navigation links |\n| `COLOR` | Color picker | `string` | CSS color value (hex, rgb, etc.) |\n| `SELECT` | Dropdown | `string` | Single selection from options list |\n| `PRODUCT` | Product picker | `IkasProduct` | Single product reference |\n| `PRODUCT_LIST` | Product list picker | `IkasProduct[]` | Multiple product references |\n| `CATEGORY` | Category picker | `IkasCategory` | Single category reference |\n| `CATEGORY_LIST` | Category list picker | `IkasCategory[]` | Multiple category references |\n| `BRAND` | Brand picker | `IkasBrand` | Single brand reference |\n| `BRAND_LIST` | Brand list picker | `IkasBrand[]` | Multiple brand references |\n| `BLOG_POST` | Blog post picker | `IkasBlogPost` | Single blog post reference |\n| `BLOG_POST_LIST` | Blog post list picker | `IkasBlogPost[]` | Multiple blog post references |\n| `FONT_STYLE_TYPE` | Font style editor | `IkasFontStyle` | Font family, size, weight, etc. |\n\n### SELECT type example:\n```json\n{\n  \"name\": \"layout\",\n  \"displayName\": \"Layout\",\n  \"type\": \"SELECT\",\n  \"options\": [\n    { \"label\": \"Grid\", \"value\": \"grid\" },\n    { \"label\": \"List\", \"value\": \"list\" }\n  ],\n  \"defaultValue\": \"grid\"\n}\n```\n\n### IMAGE type example:\n```json\n{\n  \"name\": \"heroImage\",\n  \"displayName\": \"Hero Image\",\n  \"type\": \"IMAGE\",\n  \"required\": false\n}\n```\nAccess in component: `props.heroImage?.src`",
+      "content": "Props define what the store editor can configure for each component. Each prop has a `type` that determines the editor UI and the TypeScript type received in your component.\n\n| Type | Editor UI | TypeScript Type | Description |\n|------|-----------|----------------|-------------|\n| `TEXT` | Text input | `string` | Single-line text |\n| `NUMBER` | Number input | `number` | Numeric value |\n| `BOOLEAN` | Toggle switch | `boolean` | True/false toggle |\n| `IMAGE` | Image picker | `IkasImage | null` | Image from editor. Use `getDefaultSrc(image)` for URL |\n| `LINK` | Link editor | `IkasNavigationLink` | Navigation link with href, label, subLinks |\n| `LIST_OF_LINK` | Link list editor | `IkasNavigationLinkList` | List of navigation links |\n| `COLOR` | Color picker | `string` | CSS color value (hex, rgb, etc.) |\n| `SELECT` | Dropdown | `string` | Single selection from options list |\n| `PRODUCT` | Product picker | `IkasProduct` | Single product reference |\n| `PRODUCT_LIST` | Product list picker | `IkasProduct[]` | Multiple product references |\n| `CATEGORY` | Category picker | `IkasCategory` | Single category reference |\n| `CATEGORY_LIST` | Category list picker | `IkasCategory[]` | Multiple category references |\n| `BRAND` | Brand picker | `IkasBrand` | Single brand reference |\n| `BRAND_LIST` | Brand list picker | `IkasBrand[]` | Multiple brand references |\n| `BLOG_POST` | Blog post picker | `IkasBlogPost` | Single blog post reference |\n| `BLOG_POST_LIST` | Blog post list picker | `IkasBlogPost[]` | Multiple blog post references |\n| `FONT_STYLE_TYPE` | Font style editor | `IkasFontStyle` | Font family, size, weight, etc. |\n\n### SELECT type example:\n```json\n{\n  \"name\": \"layout\",\n  \"displayName\": \"Layout\",\n  \"type\": \"SELECT\",\n  \"options\": [\n    { \"label\": \"Grid\", \"value\": \"grid\" },\n    { \"label\": \"List\", \"value\": \"list\" }\n  ],\n  \"defaultValue\": \"grid\"\n}\n```\n\n### IMAGE type example:\n```json\n{\n  \"name\": \"heroImage\",\n  \"displayName\": \"Hero Image\",\n  \"type\": \"IMAGE\",\n  \"required\": false\n}\n```\nAccess in component: `getDefaultSrc(props.heroImage)` (import `getDefaultSrc` from `@ikas/bp-storefront`)",
       "tags": [
         "props",
         "types",
@@ -136,7 +136,7 @@
     "common-pitfalls": {
       "title": "Common Pitfalls",
       "description": "Frequent mistakes LLMs and developers make when building ikas code components",
-      "content": "## Common Pitfalls\n\nThese are the most common mistakes when building ikas code components. Avoid them for correct, working code.\n\n### 1. Observer Naming\n\n**Wrong** — arrow function loses display name:\n```tsx\nconst MyComponent = observer(() => {\n  return <div>...</div>;\n});\nexport default MyComponent;\n```\n\n**Correct** — named function expression:\n```tsx\nconst MyComponent = observer(function MyComponent({ title }: Props) {\n  return <div>{title}</div>;\n});\nexport default MyComponent;\n```\n\nAlways use `const X = observer(function X() {...}); export default X;`. This ensures proper display names in React DevTools and avoids MobX warnings.\n\n### 2. Mutation Semantics\n\nMany storefront functions (122+) return `void` and **mutate their arguments in place**. Do NOT try to capture a return value:\n\n```tsx\n// WRONG — selectVariantValue returns void, not a new product\nconst updated = selectVariantValue(product, value);\n\n// CORRECT — mutates product in place, observer re-renders automatically\nselectVariantValue(product, dvv.variantValue);\n```\n\nOther mutation functions: `initLoginForm()`, `setLoginFormEmail()`, `clearFilter()`, `selectFilterValue()`.\n\n### 3. CSS Scoping Limits\n\nOnly **class selectors** in `styles.css` are reliably scoped. Element selectors are NOT scoped:\n\n```css\n/* SAFE — scoped to your component */\n.product-card { padding: 16px; }\n.product-card .title { font-size: 18px; }\n\n/* UNSAFE — NOT reliably scoped, may affect other components */\ndiv { margin: 0; }\nh1 { font-size: 24px; }\n```\n\nAlways use class selectors for all styles.\n\n### 4. Prop Null Handling\n\nProps from the editor can be `undefined` when the store owner hasn't set them. Always use optional chaining:\n\n```tsx\n// WRONG — will crash if product is undefined\n<h1>{props.product.name}</h1>\n\n// CORRECT\n<h1>{props.product?.name}</h1>\n{props.heroImage?.src && <img src={props.heroImage.src} />}\n```\n\n### 5. IkasProductImage vs IkasImage\n\n`variant.images` is `IkasProductImage[]`, NOT `IkasImage[]`. You must access the `.image` property to get the `IkasImage` needed by CDN helpers:\n\n```tsx\n// WRONG — productImage is IkasProductImage, not IkasImage\ngetDefaultSrc(productImage);\n\n// CORRECT — access .image to get IkasImage\ngetDefaultSrc(productImage.image);\n\n// Full pattern:\nconst images: IkasImage[] = variant.images\n  .map((pi) => pi.image)\n  .filter((img): img is IkasImage => img != null);\n```\n\n### 6. Type Assertion Pattern\n\nSome storefront functions have type inference gaps. Use `as unknown as` casts when needed — this is a known pattern:\n\n```tsx\nconst inStock = hasProductStock(product) as unknown as boolean;\nconst finalPrice = getProductVariantFormattedFinalPrice(variant) as unknown as string;\nconst canAddToCart = isAddToCartEnabled(product) as unknown as boolean;\n```\n\nThis applies to functions like `hasProductStock`, `hasProductVariantStock`, `isAddToCartEnabled`, `hasProductVariantDiscount`, `getProductVariantDiscountPercentage`, `getProductVariantFormattedFinalPrice`, `getProductVariantFormattedSellPrice`, and `getProductVariantMainImage`.\n\n### 7. Store Data Null Safety\n\nStore data (`customerStore.customer`, `cartStore.cart`, `baseStore`) is `null` before initialization completes. Always guard access:\n\n```tsx\n// WRONG — crashes if customer is null\n<h1>{customerStore.customer.firstName}</h1>\n\n// CORRECT — null check first\nif (!customerStore.customer) return <div>Loading...</div>;\n<h1>{customerStore.customer.firstName}</h1>\n\n// Also correct — optional chaining\n<h1>{customerStore.customer?.firstName ?? \"Guest\"}</h1>\n```\n\nSame for `cartStore.cart` — always use `cartStore.cart?.orderLineItems ?? []`.\n\n### 8. ProductList/BlogList Data Access\n\n`productList.products` is the correct way to access products in a product list (NOT `productList.data`). Similarly, `blogList.blogs` for blogs:\n\n```tsx\n// CORRECT\nconst products = productList?.products ?? [];\nconst blogs = blogList?.blogs ?? [];\n\n// WRONG — .data does not exist on these types\nconst products = productList?.data ?? [];\n```\n\n### 9. Form Field Access Pattern\n\nForm fields are objects with `.value`, `.label`, `.hasError`, `.message`. Never access the field directly as a primitive:\n\n```tsx\n// WRONG — loginForm.email is a field object, not a string\n<input value={loginForm.email} />\n\n// CORRECT — access .value for the actual value\n<input value={loginForm.email.value} />\n{loginForm.email.hasError && <span>{loginForm.email.message}</span>}\n```\n\n### 10. Optional Chaining for Editor Props\n\nAll props from `ikas.config.json` can be `undefined` in the editor before the store owner sets them. Always use optional chaining and defaults:\n\n```tsx\n// WRONG — will crash in the editor\n<h1>{props.title}</h1>\n<img src={props.image.src} />\n{props.links.links.map(...)}\n\n// CORRECT — safe access with defaults\n<h1>{props.title ?? \"Default Title\"}</h1>\n{props.image?.src && <img src={props.image.src} />}\n{(props.links?.links ?? []).map(...)}\n```\n\n### 11. Event Handler Typing\n\nPreact uses different event types than React. Use `(e: Event)` not `(e: React.ChangeEvent)`. Access values with casting. Preact uses `onInput` not `onChange` for text inputs:\n\n```tsx\n// WRONG — React patterns don't work in Preact\nonChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)}\n\n// CORRECT — Preact event handling\nonInput={(e: Event) => setValue((e.target as HTMLInputElement).value)}\n```\n\nFor select elements:\n```tsx\nonChange={(e: Event) => setOption((e.target as HTMLSelectElement).value)}\n```\n\n### 12. Function Parameter Order\n\nMany storefront functions take specific parameter orders. Always verify with `get_function_doc()` before using:\n\n```tsx\n// WRONG — submitLoginForm only takes the form, not the store\nsubmitLoginForm(customerStore, loginForm);\n\n// CORRECT\nsubmitLoginForm(loginForm);\n\n// WRONG — wrong parameter order for addItemToCart\naddItemToCart(product, variant, 1);\n\n// CORRECT — variant first, then product, then quantity\naddItemToCart(variant, product, 1);\n\n// WRONG — selectVariantValue takes product and variantValue\nselectVariantValue(variant, value);\n\n// CORRECT\nselectVariantValue(product, dvv.variantValue);\n```\n\nWhen in doubt, use the `get_function_doc(functionName)` MCP tool to check the exact signature.",
+      "content": "## Common Pitfalls\n\nThese are the most common mistakes when building ikas code components. Avoid them for correct, working code.\n\n### 1. Observer Naming\n\n**Wrong** — arrow function loses display name:\n```tsx\nconst MyComponent = observer(() => {\n  return <div>...</div>;\n});\nexport default MyComponent;\n```\n\n**Correct** — named function expression:\n```tsx\nconst MyComponent = observer(function MyComponent({ title }: Props) {\n  return <div>{title}</div>;\n});\nexport default MyComponent;\n```\n\nAlways use `const X = observer(function X() {...}); export default X;`. This ensures proper display names in React DevTools and avoids MobX warnings.\n\n### 2. Mutation Semantics\n\nMany storefront functions (122+) return `void` and **mutate their arguments in place**. Do NOT try to capture a return value:\n\n```tsx\n// WRONG — selectVariantValue returns void, not a new product\nconst updated = selectVariantValue(product, value);\n\n// CORRECT — mutates product in place, observer re-renders automatically\nselectVariantValue(product, dvv.variantValue);\n```\n\nOther mutation functions: `initLoginForm()`, `setLoginFormEmail()`, `clearFilter()`, `selectFilterValue()`.\n\n### 3. CSS Scoping Limits\n\nOnly **class selectors** in `styles.css` are reliably scoped. Element selectors are NOT scoped:\n\n```css\n/* SAFE — scoped to your component */\n.product-card { padding: 16px; }\n.product-card .title { font-size: 18px; }\n\n/* UNSAFE — NOT reliably scoped, may affect other components */\ndiv { margin: 0; }\nh1 { font-size: 24px; }\n```\n\nAlways use class selectors for all styles.\n\n### 4. Prop Null Handling\n\nProps from the editor can be `undefined` when the store owner hasn't set them. Always use optional chaining:\n\n```tsx\n// WRONG — will crash if product is undefined\n<h1>{props.product.name}</h1>\n\n// CORRECT\n<h1>{props.product?.name}</h1>\n{props.heroImage && <img src={getDefaultSrc(props.heroImage)} />}\n```\n\n### 5. IkasProductImage vs IkasImage\n\n`variant.images` is `IkasProductImage[]`, NOT `IkasImage[]`. You must access the `.image` property to get the `IkasImage` needed by CDN helpers:\n\n```tsx\n// WRONG — productImage is IkasProductImage, not IkasImage\ngetDefaultSrc(productImage);\n\n// CORRECT — access .image to get IkasImage\ngetDefaultSrc(productImage.image);\n\n// Full pattern:\nconst images: IkasImage[] = variant.images\n  .map((pi) => pi.image)\n  .filter((img): img is IkasImage => img != null);\n```\n\n### 6. Type Assertion Pattern\n\nSome storefront functions have type inference gaps. Use `as unknown as` casts when needed — this is a known pattern:\n\n```tsx\nconst inStock = hasProductStock(product) as unknown as boolean;\nconst finalPrice = getProductVariantFormattedFinalPrice(variant) as unknown as string;\nconst canAddToCart = isAddToCartEnabled(product) as unknown as boolean;\n```\n\nThis applies to functions like `hasProductStock`, `hasProductVariantStock`, `isAddToCartEnabled`, `hasProductVariantDiscount`, `getProductVariantDiscountPercentage`, `getProductVariantFormattedFinalPrice`, `getProductVariantFormattedSellPrice`, `getProductVariantFormattedDiscountAmount`, and `getProductVariantFormattedCampaignPrice`.\n\nNote: `getProductVariantMainImage` returns `IkasProductImage | undefined` (NOT `IkasImage`). Access `.image` to get the `IkasImage` for CDN helpers like `getDefaultSrc()`.\n\n### 7. Store Data Null Safety\n\nStore data (`customerStore.customer`, `cartStore.cart`, `baseStore`) is `null` before initialization completes. Always guard access:\n\n```tsx\n// WRONG — crashes if customer is null\n<h1>{customerStore.customer.firstName}</h1>\n\n// CORRECT — null check first\nif (!customerStore.customer) return <div>Loading...</div>;\n<h1>{customerStore.customer.firstName}</h1>\n\n// Also correct — optional chaining\n<h1>{customerStore.customer?.firstName ?? \"Guest\"}</h1>\n```\n\nSame for `cartStore.cart` — always use `cartStore.cart?.orderLineItems ?? []`.\n\n### 8. ProductList/BlogList Data Access\n\n`productList.products` is the correct way to access products in a product list (NOT `productList.data`). Similarly, `blogList.blogs` for blogs:\n\n```tsx\n// CORRECT\nconst products = productList?.products ?? [];\nconst blogs = blogList?.blogs ?? [];\n\n// WRONG — .data does not exist on these types\nconst products = productList?.data ?? [];\n```\n\n### 9. Form Field Access Pattern\n\nForm fields are objects with `.value`, `.label`, `.hasError`, `.message`. Never access the field directly as a primitive:\n\n```tsx\n// WRONG — loginForm.email is a field object, not a string\n<input value={loginForm.email} />\n\n// CORRECT — access .value for the actual value\n<input value={loginForm.email.value} />\n{loginForm.email.hasError && <span>{loginForm.email.message}</span>}\n```\n\n### 10. Optional Chaining for Editor Props\n\nAll props from `ikas.config.json` can be `undefined` in the editor before the store owner sets them. Always use optional chaining and defaults:\n\n```tsx\n// WRONG — will crash in the editor\n<h1>{props.title}</h1>\n<img src={getDefaultSrc(props.image)} />\n{props.links.links.map(...)}\n\n// CORRECT — safe access with defaults\n<h1>{props.title ?? \"Default Title\"}</h1>\n{props.image && <img src={getDefaultSrc(props.image)} />}\n{(props.links?.links ?? []).map(...)}\n```\n\n### 11. Event Handler Typing\n\nPreact uses different event types than React. Use `(e: Event)` not `(e: React.ChangeEvent)`. Access values with casting. Preact uses `onInput` not `onChange` for text inputs:\n\n```tsx\n// WRONG — React patterns don't work in Preact\nonChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)}\n\n// CORRECT — Preact event handling\nonInput={(e: Event) => setValue((e.target as HTMLInputElement).value)}\n```\n\nFor select elements:\n```tsx\nonChange={(e: Event) => setOption((e.target as HTMLSelectElement).value)}\n```\n\n### 12. Function Parameter Order\n\nMany storefront functions take specific parameter orders. Always verify with `get_function_doc()` before using:\n\n```tsx\n// WRONG — submitLoginForm only takes the form, not the store\nsubmitLoginForm(customerStore, loginForm);\n\n// CORRECT\nsubmitLoginForm(loginForm);\n\n// WRONG — wrong parameter order for addItemToCart\naddItemToCart(product, variant, 1);\n\n// CORRECT — variant first, then product, then quantity\naddItemToCart(variant, product, 1);\n\n// WRONG — selectVariantValue takes product and variantValue\nselectVariantValue(variant, value);\n\n// CORRECT\nselectVariantValue(product, dvv.variantValue);\n```\n\nWhen in doubt, use the `get_function_doc(functionName)` MCP tool to check the exact signature.",
       "tags": ["pitfalls", "gotchas", "mistakes", "observer", "mutation", "css", "types", "null-safety", "forms", "events", "parameters"]
     },
     "ai-workflow": {
@@ -166,7 +166,7 @@
     "product-list-patterns": {
       "title": "Product List & Filtering Patterns",
       "description": "Category pages, product filtering, sorting, pagination, and search patterns",
-      "content": "## Product List & Filtering Patterns\n\nProduct list sections power category pages, search results, and collection displays. They combine filtering, sorting, and pagination.\n\n### Product List Prop Setup\n\nIn `ikas.config.json`, use the `PRODUCT_LIST` prop type:\n```json\n{\n  \"name\": \"productList\",\n  \"displayName\": \"Product List\",\n  \"type\": \"PRODUCT_LIST\",\n  \"required\": true\n}\n```\n\nThis provides an `IkasProductList` object with products, filters, sorting, and pagination data.\n\n### Displaying Products\n\n```tsx\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  IkasProductList,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\n\n// Inside observer component:\nconst products = productList?.products ?? [];\n\n{products.map((product) => {\n  const variant = getSelectedProductVariant(product);\n  const image = getProductVariantMainImage(variant) as unknown as IkasImage | 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      {image && <img src={getDefaultSrc(image)} alt={product.name} />}\n      <h3>{product.name}</h3>\n      <span>{price}</span>\n    </a>\n  );\n})}\n```\n\n### Filtering\n\nFilters let customers narrow down products by attributes (size, color, price, etc.).\n\n```tsx\nimport {\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  getProductListFilterCategories,\n} from \"@ikas/bp-storefront\";\n\n// Get filter categories (e.g., Size, Color, Price)\nconst filterCategories = getProductListFilterCategories(productList);\n\n{filterCategories.map((category) => {\n  const values = getFilterDisplayedValues(category);\n  return (\n    <div key={category.name}>\n      <h4>{category.name}</h4>\n      {values.map((filterValue) => (\n        <label key={filterValue.name}>\n          <input\n            type=\"checkbox\"\n            checked={filterValue.isSelected}\n            onChange={() => handleFilterValueClick(productList, category, filterValue)}\n          />\n          {filterValue.name} ({filterValue.count})\n        </label>\n      ))}\n    </div>\n  );\n})}\n```\n\n### Sorting\n\n```tsx\nimport { getProductListSortOptions } from \"@ikas/bp-storefront\";\n\nconst sortOptions = getProductListSortOptions(productList);\n\n<select\n  value={productList.sort}\n  onChange={(e) => {\n    productList.sort = (e.target as HTMLSelectElement).value;\n  }}\n>\n  {sortOptions.map((opt) => (\n    <option key={opt.value} value={opt.value}>{opt.label}</option>\n  ))}\n</select>\n```\n\n### Pagination\n\n```tsx\nimport {\n  hasProductListNextPage,\n  hasProductListPrevPage,\n  getProductListNextPage,\n  getProductListPrevPage,\n} from \"@ikas/bp-storefront\";\n\nconst hasNext = hasProductListNextPage(productList);\nconst hasPrev = hasProductListPrevPage(productList);\n\n<div className=\"pagination\">\n  <button disabled={!hasPrev} onClick={() => getProductListPrevPage(productList)}>\n    Previous\n  </button>\n  <button disabled={!hasNext} onClick={() => getProductListNextPage(productList)}>\n    Next\n  </button>\n</div>\n```\n\n### Key Functions Reference\n\n| Function | Purpose |\n|----------|---------|\n| `getProductListFilterCategories(list)` | Get available filter categories |\n| `getFilterDisplayedValues(category)` | Get filter values for a category |\n| `handleFilterValueClick(list, category, value)` | Toggle a filter value |\n| `getProductListSortOptions(list)` | Get sort dropdown options |\n| `hasProductListNextPage(list)` / `getProductListNextPage(list)` | Next page |\n| `hasProductListPrevPage(list)` / `getProductListPrevPage(list)` | Previous page |",
+      "content": "## Product List & Filtering Patterns\n\nProduct list sections power category pages, search results, and collection displays. They combine filtering, sorting, and pagination.\n\n### Product List Prop Setup\n\nIn `ikas.config.json`, use the `PRODUCT_LIST` prop type:\n```json\n{\n  \"name\": \"productList\",\n  \"displayName\": \"Product List\",\n  \"type\": \"PRODUCT_LIST\",\n  \"required\": true\n}\n```\n\nThis provides an `IkasProductList` object with products, filters, sorting, and pagination data.\n\n### Displaying Products\n\n```tsx\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  IkasProductList,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\n\n// Inside observer component:\nconst products = productList?.products ?? [];\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      {image && <img src={getDefaultSrc(image)} alt={product.name} />}\n      <h3>{product.name}</h3>\n      <span>{price}</span>\n    </a>\n  );\n})}\n```\n\n### Filtering\n\nFilters let customers narrow down products by attributes (size, color, price, etc.).\n\n```tsx\nimport {\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  getProductListFilterCategories,\n} from \"@ikas/bp-storefront\";\n\n// Get filter categories (e.g., Size, Color, Price)\nconst filterCategories = getProductListFilterCategories(productList);\n\n{filterCategories.map((category) => {\n  const values = getFilterDisplayedValues(category);\n  return (\n    <div key={category.name}>\n      <h4>{category.name}</h4>\n      {values.map((filterValue) => (\n        <label key={filterValue.name}>\n          <input\n            type=\"checkbox\"\n            checked={filterValue.isSelected}\n            onChange={() => handleFilterValueClick(productList, category, filterValue)}\n          />\n          {filterValue.name} ({filterValue.count})\n        </label>\n      ))}\n    </div>\n  );\n})}\n```\n\n### Sorting\n\n```tsx\nimport { getProductListSortOptions } from \"@ikas/bp-storefront\";\n\nconst sortOptions = getProductListSortOptions(productList);\n\n<select\n  value={productList.sort}\n  onChange={(e) => {\n    productList.sort = (e.target as HTMLSelectElement).value;\n  }}\n>\n  {sortOptions.map((opt) => (\n    <option key={opt.value} value={opt.value}>{opt.label}</option>\n  ))}\n</select>\n```\n\n### Pagination\n\n```tsx\nimport {\n  hasProductListNextPage,\n  hasProductListPrevPage,\n  getProductListNextPage,\n  getProductListPrevPage,\n} from \"@ikas/bp-storefront\";\n\nconst hasNext = hasProductListNextPage(productList);\nconst hasPrev = hasProductListPrevPage(productList);\n\n<div className=\"pagination\">\n  <button disabled={!hasPrev} onClick={() => getProductListPrevPage(productList)}>\n    Previous\n  </button>\n  <button disabled={!hasNext} onClick={() => getProductListNextPage(productList)}>\n    Next\n  </button>\n</div>\n```\n\n### Key Functions Reference\n\n| Function | Purpose |\n|----------|---------|\n| `getProductListFilterCategories(list)` | Get available filter categories |\n| `getFilterDisplayedValues(category)` | Get filter values for a category |\n| `handleFilterValueClick(list, category, value)` | Toggle a filter value |\n| `getProductListSortOptions(list)` | Get sort dropdown options |\n| `hasProductListNextPage(list)` / `getProductListNextPage(list)` | Next page |\n| `hasProductListPrevPage(list)` / `getProductListPrevPage(list)` | Previous page |",
       "tags": ["product-list", "filtering", "sorting", "pagination", "category", "search", "grid"]
     },
     "cart-patterns": {

package/data/section-templates.json

@@ -4,8 +4,8 @@
       "title": "Header Section",
       "description": "Site header with logo, navigation links, cart/account icons, and mobile menu",
       "files": {
-        "index.tsx": "import { useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  cartStore,\n  customerStore,\n  hasCustomer,\n  Router,\n  IkasNavigationLink,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nconst HeaderSection = observer(function HeaderSection({\n  logo,\n  navigationLinks,\n  announcementText,\n}: Props) {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const itemCount = cartStore.cart?.orderLineItems.length ?? 0;\n  const isLoggedIn = hasCustomer(customerStore) as unknown as boolean;\n\n  return (\n    <section className=\"header-section\">\n      {announcementText && (\n        <div className=\"header-announcement\">\n          <span>{announcementText}</span>\n        </div>\n      )}\n      <div className=\"header-main\">\n        <div className=\"header-inner\">\n          <button\n            className=\"header-hamburger\"\n            onClick={() => setMobileMenuOpen(true)}\n            aria-label=\"Open menu\"\n          >\n            <span /><span /><span />\n          </button>\n          <a className=\"header-logo\" href=\"/\">\n            {logo?.src ? (\n              <img src={logo.src} alt={logo.alt || \"Logo\"} className=\"header-logo-img\" />\n            ) : (\n              <span className=\"header-logo-text\">Store</span>\n            )}\n          </a>\n          <nav className=\"header-nav\">\n            {navigationLinks?.map((link: IkasNavigationLink, i: number) => (\n              <a key={i} href={link.href} className=\"header-nav-link\">\n                {link.label}\n              </a>\n            ))}\n          </nav>\n          <div className=\"header-icons\">\n            <button\n              className=\"header-icon-btn\"\n              onClick={() => Router.navigateToPage(isLoggedIn ? \"ACCOUNT\" : \"LOGIN\")}\n            >\n              Account\n            </button>\n            <button className=\"header-icon-btn\" onClick={() => Router.navigateToPage(\"CART\")}>\n              Cart{itemCount > 0 && <span className=\"header-cart-badge\">{itemCount}</span>}\n            </button>\n          </div>\n        </div>\n      </div>\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)}>&times;</button>\n            <nav className=\"header-mobile-nav\">\n              {navigationLinks?.map((link: IkasNavigationLink, i: number) => (\n                <a key={i} href={link.href} className=\"header-mobile-link\" onClick={() => setMobileMenuOpen(false)}>\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n          </div>\n        </div>\n      )}\n    </section>\n  );\n});\n\nexport default HeaderSection;\n",
-        "types.ts": "import { IkasNavigationLink } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n  logo?: { src: string; alt?: string };\n  navigationLinks?: IkasNavigationLink[];\n  announcementText?: string;\n}\n",
+        "index.tsx": "import { useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  cartStore,\n  customerStore,\n  hasCustomer,\n  Router,\n  IkasNavigationLink,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nconst HeaderSection = observer(function HeaderSection({\n  logo,\n  navigationLinks,\n  announcementText,\n}: Props) {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const itemCount = cartStore.cart?.orderLineItems.length ?? 0;\n  const isLoggedIn = hasCustomer(customerStore) as unknown as boolean;\n\n  return (\n    <section className=\"header-section\">\n      {announcementText && (\n        <div className=\"header-announcement\">\n          <span>{announcementText}</span>\n        </div>\n      )}\n      <div className=\"header-main\">\n        <div className=\"header-inner\">\n          <button\n            className=\"header-hamburger\"\n            onClick={() => setMobileMenuOpen(true)}\n            aria-label=\"Open menu\"\n          >\n            <span /><span /><span />\n          </button>\n          <a className=\"header-logo\" href=\"/\">\n            {logo ? (\n              <img src={getDefaultSrc(logo)} alt={logo.altText || \"Logo\"} className=\"header-logo-img\" />\n            ) : (\n              <span className=\"header-logo-text\">Store</span>\n            )}\n          </a>\n          <nav className=\"header-nav\">\n            {navigationLinks?.map((link: IkasNavigationLink, i: number) => (\n              <a key={i} href={link.href} className=\"header-nav-link\">\n                {link.label}\n              </a>\n            ))}\n          </nav>\n          <div className=\"header-icons\">\n            <button\n              className=\"header-icon-btn\"\n              onClick={() => Router.navigateToPage(isLoggedIn ? \"ACCOUNT\" : \"LOGIN\")}\n            >\n              Account\n            </button>\n            <button className=\"header-icon-btn\" onClick={() => Router.navigateToPage(\"CART\")}>\n              Cart{itemCount > 0 && <span className=\"header-cart-badge\">{itemCount}</span>}\n            </button>\n          </div>\n        </div>\n      </div>\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)}>&times;</button>\n            <nav className=\"header-mobile-nav\">\n              {navigationLinks?.map((link: IkasNavigationLink, i: number) => (\n                <a key={i} href={link.href} className=\"header-mobile-link\" onClick={() => setMobileMenuOpen(false)}>\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n          </div>\n        </div>\n      )}\n    </section>\n  );\n});\n\nexport default HeaderSection;\n",
+        "types.ts": "import { IkasNavigationLink, IkasImage } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n  logo?: IkasImage | null;\n  navigationLinks?: IkasNavigationLink[];\n  announcementText?: string;\n}\n",
         "styles.css": ".header-section {\n  width: 100%;\n  position: sticky;\n  top: 0;\n  z-index: 100;\n  background: #fff;\n}\n\n.header-announcement {\n  text-align: center;\n  padding: 8px 16px;\n  font-size: 13px;\n  background: #111;\n  color: #fff;\n}\n\n.header-inner {\n  max-width: 1200px;\n  margin: 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 24px;\n  gap: 24px;\n}\n\n.header-logo { text-decoration: none; flex-shrink: 0; }\n.header-logo-img { height: 40px; width: auto; }\n.header-logo-text { font-size: 22px; font-weight: 700; color: #111; }\n\n.header-nav { display: flex; gap: 24px; flex: 1; justify-content: center; }\n.header-nav-link { font-size: 14px; font-weight: 500; color: #333; text-decoration: none; }\n\n.header-icons { display: flex; gap: 12px; align-items: center; }\n.header-icon-btn { background: none; border: none; cursor: pointer; color: #333; padding: 4px; position: relative; }\n.header-cart-badge { position: absolute; top: -4px; right: -6px; background: #111; color: #fff; font-size: 10px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }\n\n.header-hamburger { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; }\n.header-hamburger span { display: block; width: 20px; height: 2px; background: #333; }\n\n.header-mobile-overlay { position: fixed; inset: 0; z-index: 200; }\n.header-mobile-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }\n.header-mobile-menu { position: absolute; top: 0; left: 0; bottom: 0; width: 280px; background: #fff; padding: 24px; overflow-y: auto; }\n.header-mobile-close { font-size: 28px; background: none; border: none; cursor: pointer; margin-bottom: 16px; }\n.header-mobile-nav { display: flex; flex-direction: column; gap: 16px; }\n.header-mobile-link { font-size: 16px; font-weight: 500; color: #333; text-decoration: none; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }\n\n@media (max-width: 768px) {\n  .header-hamburger { display: flex; }\n  .header-nav { display: none; }\n}\n",
         "ikas-config-snippet.json": "{\n  \"id\": \"header\",\n  \"name\": \"Header\",\n  \"type\": \"section\",\n  \"props\": [\n    { \"name\": \"logo\", \"displayName\": \"Logo\", \"type\": \"IMAGE\" },\n    { \"name\": \"navigationLinks\", \"displayName\": \"Navigation Links\", \"type\": \"LIST_OF_LINK\" },\n    { \"name\": \"announcementText\", \"displayName\": \"Announcement Text\", \"type\": \"TEXT\" }\n  ]\n}\n"
       }
@@ -14,8 +14,8 @@
       "title": "Footer Section",
       "description": "Site footer with logo, link columns, and copyright text",
       "files": {
-        "index.tsx": "import { IkasNavigationLink } 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          <div className=\"footer-brand\">\n            {logo?.src ? (\n              <img src={logo.src} alt={logo.alt || \"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          <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 key={i} href={link.href} className=\"footer-link\" target={link.isTargetBlank ? \"_blank\" : undefined}>\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n          </div>\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 key={i} href={link.href} className=\"footer-link\" target={link.isTargetBlank ? \"_blank\" : undefined}>\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n          </div>\n        </div>\n        <div className=\"footer-bottom\">\n          <p className=\"footer-copyright\">{copyright}</p>\n        </div>\n      </div>\n    </footer>\n  );\n}\n",
-        "types.ts": "import { IkasNavigationLink } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n  logo?: { src: string; alt?: string };\n  description?: string;\n  linkColumn1Title?: string;\n  linkColumn1?: IkasNavigationLink[];\n  linkColumn2Title?: string;\n  linkColumn2?: IkasNavigationLink[];\n  copyright?: string;\n}\n",
+        "index.tsx": "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          <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          <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 key={i} href={link.href} className=\"footer-link\" target={link.isTargetBlank ? \"_blank\" : undefined}>\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n          </div>\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 key={i} href={link.href} className=\"footer-link\" target={link.isTargetBlank ? \"_blank\" : undefined}>\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n          </div>\n        </div>\n        <div className=\"footer-bottom\">\n          <p className=\"footer-copyright\">{copyright}</p>\n        </div>\n      </div>\n    </footer>\n  );\n}\n",
+        "types.ts": "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",
         "styles.css": ".footer-section {\n  width: 100%;\n  background: #111;\n  color: #fff;\n  padding: 48px 24px 24px;\n}\n\n.footer-inner {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.footer-grid {\n  display: grid;\n  grid-template-columns: 2fr 1fr 1fr;\n  gap: 48px;\n  margin-bottom: 32px;\n}\n\n.footer-logo { height: 36px; width: auto; }\n.footer-logo-text { font-size: 20px; font-weight: 700; }\n.footer-description { font-size: 14px; color: #aaa; margin-top: 12px; line-height: 1.6; }\n\n.footer-column-title { font-size: 14px; font-weight: 600; margin: 0 0 16px 0; text-transform: uppercase; letter-spacing: 0.05em; }\n.footer-links { display: flex; flex-direction: column; gap: 10px; }\n.footer-link { font-size: 14px; color: #aaa; text-decoration: none; }\n.footer-link:hover { color: #fff; }\n\n.footer-bottom { border-top: 1px solid #333; padding-top: 20px; }\n.footer-copyright { font-size: 13px; color: #666; margin: 0; }\n\n@media (max-width: 768px) {\n  .footer-grid { grid-template-columns: 1fr; gap: 32px; }\n}\n",
         "ikas-config-snippet.json": "{\n  \"id\": \"footer\",\n  \"name\": \"Footer\",\n  \"type\": \"section\",\n  \"props\": [\n    { \"name\": \"logo\", \"displayName\": \"Logo\", \"type\": \"IMAGE\" },\n    { \"name\": \"description\", \"displayName\": \"Description\", \"type\": \"TEXT\" },\n    { \"name\": \"linkColumn1Title\", \"displayName\": \"Column 1 Title\", \"type\": \"TEXT\", \"defaultValue\": \"Shop\" },\n    { \"name\": \"linkColumn1\", \"displayName\": \"Column 1 Links\", \"type\": \"LIST_OF_LINK\" },\n    { \"name\": \"linkColumn2Title\", \"displayName\": \"Column 2 Title\", \"type\": \"TEXT\", \"defaultValue\": \"Company\" },\n    { \"name\": \"linkColumn2\", \"displayName\": \"Column 2 Links\", \"type\": \"LIST_OF_LINK\" },\n    { \"name\": \"copyright\", \"displayName\": \"Copyright Text\", \"type\": \"TEXT\", \"defaultValue\": \"All rights reserved.\" }\n  ]\n}\n"
       }
@@ -24,7 +24,7 @@
       "title": "Product Detail Section",
       "description": "Product page with image gallery, variant selection, pricing, add-to-cart, and favorites",
       "files": {
-        "index.tsx": "import { useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  getSelectedProductVariant,\n  getDisplayedProductVariantTypes,\n  selectVariantValue,\n  hasProductVariantStock,\n  hasProductStock,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantFormattedSellPrice,\n  hasProductVariantDiscount,\n  isAddToCartEnabled,\n  addItemToCart,\n  isFavoriteIkasProduct,\n  addIkasProductToFavorites,\n  removeIkasProductFromFavorites,\n  getProductVariantMainImage,\n  getDefaultSrc,\n  createMediaSrcset,\n  IkasImage,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nconst ProductDetail = observer(function ProductDetail({\n  product,\n  addToCartButtonText = \"Add to Cart\",\n}: Props) {\n  const [isAddingToCart, setIsAddingToCart] = useState(false);\n\n  if (!product) return null;\n\n  const variant = getSelectedProductVariant(product) as any;\n  const variantTypes = getDisplayedProductVariantTypes(product);\n  const inStock = hasProductStock(product) as unknown as boolean;\n  const variantInStock = hasProductVariantStock(variant) as unknown as boolean;\n  const canAddToCart = isAddToCartEnabled(product) as unknown as boolean;\n  const hasDiscount = hasProductVariantDiscount(variant) as unknown as boolean;\n  const finalPrice = getProductVariantFormattedFinalPrice(variant) as unknown as string;\n  const originalPrice = hasDiscount ? (getProductVariantFormattedSellPrice(variant) as unknown as string) : null;\n  const mainImage = getProductVariantMainImage(variant) as unknown as IkasImage | undefined;\n  const images: IkasImage[] = variant?.images?.length\n    ? variant.images.map((pi: any) => pi.image).filter((img: any): img is IkasImage => img != null)\n    : mainImage ? [mainImage] : [];\n  const isFav = isFavoriteIkasProduct(product);\n\n  const handleAddToCart = async () => {\n    if (!canAddToCart || isAddingToCart) return;\n    setIsAddingToCart(true);\n    try {\n      await addItemToCart(variant, product, 1);\n    } finally {\n      setIsAddingToCart(false);\n    }\n  };\n\n  const toggleFav = async () => {\n    if (isFav) await removeIkasProductFromFavorites(product);\n    else await addIkasProductToFavorites(product);\n  };\n\n  return (\n    <section className=\"product-detail\">\n      <div className=\"product-detail-inner\">\n        <div className=\"product-gallery\">\n          {images[0] && <img className=\"product-main-image\" src={getDefaultSrc(images[0])} srcSet={createMediaSrcset(images[0])} sizes=\"(max-width: 768px) 100vw, 50vw\" alt={product.name} />}\n        </div>\n        <div className=\"product-info\">\n          <h1 className=\"product-name\">{product.name}</h1>\n          <div className=\"product-pricing\">\n            <span className=\"product-final-price\">{finalPrice}</span>\n            {originalPrice && <span className=\"product-original-price\">{originalPrice}</span>}\n          </div>\n          {variantTypes.length > 0 && (\n            <div className=\"product-variants\">\n              {variantTypes.map((vt) => (\n                <div key={vt.variantType.id} className=\"variant-group\">\n                  <span className=\"variant-group-label\">{vt.variantType.name}</span>\n                  <div className=\"variant-options\">\n                    {vt.displayedVariantValues.map((dvv) => (\n                      <button\n                        key={dvv.variantValue.id}\n                        className={`variant-option-btn ${dvv.isSelected ? \"selected\" : \"\"}`}\n                        disabled={!dvv.hasStock}\n                        onClick={() => selectVariantValue(product, dvv.variantValue)}\n                      >\n                        {dvv.variantValue.name}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n          {!inStock && <span className=\"out-of-stock-notice\">Out of Stock</span>}\n          <div className=\"product-actions\">\n            <button className=\"add-to-cart-btn\" disabled={!canAddToCart || isAddingToCart} onClick={handleAddToCart}>\n              {isAddingToCart ? \"Adding...\" : !variantInStock ? \"Out of Stock\" : addToCartButtonText}\n            </button>\n            <button className={`favorite-btn ${isFav ? \"is-favorite\" : \"\"}`} onClick={toggleFav}>\n              {isFav ? \"\\u2665\" : \"\\u2661\"}\n            </button>\n          </div>\n          {product.description && (\n            <div className=\"product-description\" dangerouslySetInnerHTML={{ __html: product.description }} />\n          )}\n        </div>\n      </div>\n    </section>\n  );\n});\n\nexport default ProductDetail;\n",
+        "index.tsx": "import { useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  getSelectedProductVariant,\n  getDisplayedProductVariantTypes,\n  selectVariantValue,\n  hasProductVariantStock,\n  hasProductStock,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantFormattedSellPrice,\n  hasProductVariantDiscount,\n  isAddToCartEnabled,\n  addItemToCart,\n  isFavoriteIkasProduct,\n  addIkasProductToFavorites,\n  removeIkasProductFromFavorites,\n  getProductVariantMainImage,\n  getDefaultSrc,\n  createMediaSrcset,\n  IkasImage,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nconst ProductDetail = observer(function ProductDetail({\n  product,\n  addToCartButtonText = \"Add to Cart\",\n}: Props) {\n  const [isAddingToCart, setIsAddingToCart] = useState(false);\n\n  if (!product) return null;\n\n  const variant = getSelectedProductVariant(product) as any;\n  const variantTypes = getDisplayedProductVariantTypes(product);\n  const inStock = hasProductStock(product) as unknown as boolean;\n  const variantInStock = hasProductVariantStock(variant) as unknown as boolean;\n  const canAddToCart = isAddToCartEnabled(product) as unknown as boolean;\n  const hasDiscount = hasProductVariantDiscount(variant) as unknown as boolean;\n  const finalPrice = getProductVariantFormattedFinalPrice(variant) as unknown as string;\n  const originalPrice = hasDiscount ? (getProductVariantFormattedSellPrice(variant) as unknown as string) : null;\n  const mainProductImage = getProductVariantMainImage(variant);\n  const mainImage = mainProductImage?.image;\n  const images: IkasImage[] = variant?.images?.length\n    ? variant.images.map((pi: any) => pi.image).filter((img: any): img is IkasImage => img != null)\n    : mainImage ? [mainImage] : [];\n  const isFav = isFavoriteIkasProduct(product);\n\n  const handleAddToCart = async () => {\n    if (!canAddToCart || isAddingToCart) return;\n    setIsAddingToCart(true);\n    try {\n      await addItemToCart(variant, product, 1);\n    } finally {\n      setIsAddingToCart(false);\n    }\n  };\n\n  const toggleFav = async () => {\n    if (isFav) await removeIkasProductFromFavorites(product);\n    else await addIkasProductToFavorites(product);\n  };\n\n  return (\n    <section className=\"product-detail\">\n      <div className=\"product-detail-inner\">\n        <div className=\"product-gallery\">\n          {images[0] && <img className=\"product-main-image\" src={getDefaultSrc(images[0])} srcSet={createMediaSrcset(images[0])} sizes=\"(max-width: 768px) 100vw, 50vw\" alt={product.name} />}\n        </div>\n        <div className=\"product-info\">\n          <h1 className=\"product-name\">{product.name}</h1>\n          <div className=\"product-pricing\">\n            <span className=\"product-final-price\">{finalPrice}</span>\n            {originalPrice && <span className=\"product-original-price\">{originalPrice}</span>}\n          </div>\n          {variantTypes.length > 0 && (\n            <div className=\"product-variants\">\n              {variantTypes.map((vt) => (\n                <div key={vt.variantType.id} className=\"variant-group\">\n                  <span className=\"variant-group-label\">{vt.variantType.name}</span>\n                  <div className=\"variant-options\">\n                    {vt.displayedVariantValues.map((dvv) => (\n                      <button\n                        key={dvv.variantValue.id}\n                        className={`variant-option-btn ${dvv.isSelected ? \"selected\" : \"\"}`}\n                        disabled={!dvv.hasStock}\n                        onClick={() => selectVariantValue(product, dvv.variantValue)}\n                      >\n                        {dvv.variantValue.name}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n          {!inStock && <span className=\"out-of-stock-notice\">Out of Stock</span>}\n          <div className=\"product-actions\">\n            <button className=\"add-to-cart-btn\" disabled={!canAddToCart || isAddingToCart} onClick={handleAddToCart}>\n              {isAddingToCart ? \"Adding...\" : !variantInStock ? \"Out of Stock\" : addToCartButtonText}\n            </button>\n            <button className={`favorite-btn ${isFav ? \"is-favorite\" : \"\"}`} onClick={toggleFav}>\n              {isFav ? \"\\u2665\" : \"\\u2661\"}\n            </button>\n          </div>\n          {product.description && (\n            <div className=\"product-description\" dangerouslySetInnerHTML={{ __html: product.description }} />\n          )}\n        </div>\n      </div>\n    </section>\n  );\n});\n\nexport default ProductDetail;\n",
         "types.ts": "import { IkasProduct } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n  product: IkasProduct;\n  addToCartButtonText?: string;\n}\n",
         "styles.css": ".product-detail {\n  width: 100%;\n  padding: 40px 24px;\n}\n\n.product-detail-inner {\n  max-width: 1200px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 48px;\n}\n\n.product-main-image {\n  width: 100%;\n  aspect-ratio: 1;\n  object-fit: cover;\n  border-radius: 8px;\n  background: #f5f5f5;\n}\n\n.product-name { font-size: 28px; font-weight: 700; color: #111; margin: 0 0 16px 0; }\n\n.product-pricing { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }\n.product-final-price { font-size: 22px; font-weight: 700; color: #111; }\n.product-original-price { font-size: 16px; color: #999; text-decoration: line-through; }\n\n.variant-group { margin-bottom: 16px; }\n.variant-group-label { font-size: 14px; font-weight: 600; color: #333; display: block; margin-bottom: 8px; }\n.variant-options { display: flex; gap: 8px; flex-wrap: wrap; }\n.variant-option-btn { padding: 8px 16px; border: 1.5px solid #ddd; border-radius: 6px; background: #fff; cursor: pointer; font-size: 14px; }\n.variant-option-btn.selected { border-color: #111; font-weight: 600; }\n.variant-option-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n\n.out-of-stock-notice { color: #e53935; font-size: 14px; font-weight: 600; }\n\n.product-actions { display: flex; gap: 12px; margin: 24px 0; }\n.add-to-cart-btn { flex: 1; padding: 14px 24px; font-size: 16px; font-weight: 600; color: #fff; background: #111; border: none; border-radius: 8px; cursor: pointer; }\n.add-to-cart-btn:disabled { background: #ccc; cursor: not-allowed; }\n.favorite-btn { width: 48px; height: 48px; border: 1.5px solid #ddd; border-radius: 8px; background: #fff; cursor: pointer; font-size: 20px; }\n.favorite-btn.is-favorite { color: #e53935; border-color: #e53935; }\n\n.product-description { font-size: 15px; line-height: 1.7; color: #555; margin-top: 24px; }\n\n@media (max-width: 768px) {\n  .product-detail-inner { grid-template-columns: 1fr; gap: 24px; }\n}\n",
         "ikas-config-snippet.json": "{\n  \"id\": \"product-detail\",\n  \"name\": \"Product Detail\",\n  \"type\": \"section\",\n  \"props\": [\n    { \"name\": \"product\", \"displayName\": \"Product\", \"type\": \"PRODUCT\", \"required\": true },\n    { \"name\": \"addToCartButtonText\", \"displayName\": \"Add to Cart Button Text\", \"type\": \"TEXT\", \"defaultValue\": \"Add to Cart\" }\n  ]\n}\n"
@@ -34,7 +34,7 @@
       "title": "Product List Section",
       "description": "Product grid with filters, sorting, and pagination for category/search pages",
       "files": {
-        "index.tsx": "import { observer } from \"@ikas/component-utils\";\nimport {\n  IkasImage,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  getProductListFilterCategories,\n  getProductListSortOptions,\n  hasProductListNextPage,\n  hasProductListPrevPage,\n  getProductListNextPage,\n  getProductListPrevPage,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nconst ProductListSection = observer(function ProductListSection({\n  productList,\n  title = \"Products\",\n  showFilters = true,\n}: Props) {\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  return (\n    <section className=\"product-list-section\">\n      <div className=\"product-list-inner\">\n        <div className=\"product-list-header\">\n          <h1 className=\"product-list-title\">{title}</h1>\n          {sortOptions.length > 0 && (\n            <select className=\"product-list-sort\" value={productList.sort} onChange={(e) => { productList.sort = (e.target as HTMLSelectElement).value; }}>\n              {sortOptions.map((opt) => <option key={opt.value} value={opt.value}>{opt.label}</option>)}\n            </select>\n          )}\n        </div>\n        <div className=\"product-list-layout\">\n          {showFilters && filterCategories.length > 0 && (\n            <aside className=\"product-list-filters\">\n              {filterCategories.map((cat) => {\n                const values = getFilterDisplayedValues(cat);\n                return (\n                  <div key={cat.name} className=\"filter-group\">\n                    <h3 className=\"filter-group-title\">{cat.name}</h3>\n                    {values.map((fv) => (\n                      <label key={fv.name} className=\"filter-value\">\n                        <input type=\"checkbox\" checked={fv.isSelected} onChange={() => handleFilterValueClick(productList, cat, fv)} />\n                        <span>{fv.name}</span>\n                      </label>\n                    ))}\n                  </div>\n                );\n              })}\n            </aside>\n          )}\n          <div className=\"product-grid\">\n            {products.length === 0 && <p className=\"product-grid-empty\">No products found.</p>}\n            {products.map((product) => {\n              const variant = getSelectedProductVariant(product);\n              const image = getProductVariantMainImage(variant) as unknown as IkasImage | null;\n              const price = getProductVariantFormattedFinalPrice(variant) as unknown as string;\n              return (\n                <a key={product.id} href={getSelectedProductVariantHref(product)} className=\"product-card\">\n                  {image && <img src={getDefaultSrc(image)} alt={product.name} className=\"product-card-image\" />}\n                  <h3 className=\"product-card-name\">{product.name}</h3>\n                  <span className=\"product-card-price\">{price}</span>\n                </a>\n              );\n            })}\n          </div>\n        </div>\n        {(hasPrev || hasNext) && (\n          <div className=\"product-list-pagination\">\n            <button disabled={!hasPrev} onClick={() => getProductListPrevPage(productList)}>Previous</button>\n            <button disabled={!hasNext} onClick={() => getProductListNextPage(productList)}>Next</button>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n});\n\nexport default ProductListSection;\n",
+        "index.tsx": "import { observer } from \"@ikas/component-utils\";\nimport {\n  IkasImage,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  getProductListFilterCategories,\n  getProductListSortOptions,\n  hasProductListNextPage,\n  hasProductListPrevPage,\n  getProductListNextPage,\n  getProductListPrevPage,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nconst ProductListSection = observer(function ProductListSection({\n  productList,\n  title = \"Products\",\n  showFilters = true,\n}: Props) {\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  return (\n    <section className=\"product-list-section\">\n      <div className=\"product-list-inner\">\n        <div className=\"product-list-header\">\n          <h1 className=\"product-list-title\">{title}</h1>\n          {sortOptions.length > 0 && (\n            <select className=\"product-list-sort\" value={productList.sort} onChange={(e) => { productList.sort = (e.target as HTMLSelectElement).value; }}>\n              {sortOptions.map((opt) => <option key={opt.value} value={opt.value}>{opt.label}</option>)}\n            </select>\n          )}\n        </div>\n        <div className=\"product-list-layout\">\n          {showFilters && filterCategories.length > 0 && (\n            <aside className=\"product-list-filters\">\n              {filterCategories.map((cat) => {\n                const values = getFilterDisplayedValues(cat);\n                return (\n                  <div key={cat.name} className=\"filter-group\">\n                    <h3 className=\"filter-group-title\">{cat.name}</h3>\n                    {values.map((fv) => (\n                      <label key={fv.name} className=\"filter-value\">\n                        <input type=\"checkbox\" checked={fv.isSelected} onChange={() => handleFilterValueClick(productList, cat, fv)} />\n                        <span>{fv.name}</span>\n                      </label>\n                    ))}\n                  </div>\n                );\n              })}\n            </aside>\n          )}\n          <div className=\"product-grid\">\n            {products.length === 0 && <p className=\"product-grid-empty\">No products found.</p>}\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              return (\n                <a key={product.id} href={getSelectedProductVariantHref(product)} className=\"product-card\">\n                  {image && <img src={getDefaultSrc(image)} alt={product.name} className=\"product-card-image\" />}\n                  <h3 className=\"product-card-name\">{product.name}</h3>\n                  <span className=\"product-card-price\">{price}</span>\n                </a>\n              );\n            })}\n          </div>\n        </div>\n        {(hasPrev || hasNext) && (\n          <div className=\"product-list-pagination\">\n            <button disabled={!hasPrev} onClick={() => getProductListPrevPage(productList)}>Previous</button>\n            <button disabled={!hasNext} onClick={() => getProductListNextPage(productList)}>Next</button>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n});\n\nexport default ProductListSection;\n",
         "types.ts": "import { IkasProductList } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n  productList: IkasProductList;\n  title?: string;\n  showFilters?: boolean;\n}\n",
         "styles.css": ".product-list-section {\n  width: 100%;\n  padding: 40px 24px;\n}\n\n.product-list-inner {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.product-list-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 24px;\n}\n\n.product-list-title { font-size: 24px; font-weight: 700; color: #111; margin: 0; }\n.product-list-sort { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; }\n\n.product-list-layout {\n  display: flex;\n  gap: 32px;\n}\n\n.product-list-filters { width: 220px; flex-shrink: 0; }\n.filter-group { margin-bottom: 24px; }\n.filter-group-title { font-size: 14px; font-weight: 600; margin: 0 0 12px 0; }\n.filter-value { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #555; cursor: pointer; padding: 4px 0; }\n\n.product-grid {\n  flex: 1;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 24px;\n}\n\n.product-card { text-decoration: none; color: inherit; }\n.product-card-image { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #f5f5f5; }\n.product-card-name { font-size: 14px; font-weight: 500; color: #111; margin: 10px 0 4px; }\n.product-card-price { font-size: 14px; font-weight: 600; color: #111; }\n\n.product-grid-empty { font-size: 16px; color: #666; grid-column: 1 / -1; text-align: center; padding: 48px 0; }\n\n.product-list-pagination { display: flex; justify-content: center; gap: 12px; margin-top: 32px; }\n.product-list-pagination button { padding: 10px 20px; border: 1px solid #ddd; border-radius: 6px; background: #fff; cursor: pointer; font-size: 14px; }\n.product-list-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }\n\n@media (max-width: 768px) {\n  .product-list-filters { display: none; }\n  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }\n}\n",
         "ikas-config-snippet.json": "{\n  \"id\": \"product-list\",\n  \"name\": \"Product List\",\n  \"type\": \"section\",\n  \"props\": [\n    { \"name\": \"productList\", \"displayName\": \"Product List\", \"type\": \"PRODUCT_LIST\", \"required\": true },\n    { \"name\": \"title\", \"displayName\": \"Title\", \"type\": \"TEXT\", \"defaultValue\": \"Products\" },\n    { \"name\": \"showFilters\", \"displayName\": \"Show Filters\", \"type\": \"BOOLEAN\", \"defaultValue\": true }\n  ]\n}\n"
@@ -104,7 +104,7 @@
       "title": "Favorites Section",
       "description": "Customer favorites/wishlist with product cards and remove functionality",
       "files": {
-        "index.tsx": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getFavoriteProducts,\n  removeIkasProductFromFavorites,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getDefaultSrc,\n  IkasImage,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nconst FavoritesSection = observer(function FavoritesSection({\n  title = \"My Favorites\",\n}: Props) {\n  useEffect(() => {\n    getFavoriteProducts(customerStore);\n  }, []);\n\n  const favorites = customerStore.favoriteProducts ?? [];\n\n  return (\n    <section className=\"favorites-section\">\n      <div className=\"favorites-inner\">\n        <h1 className=\"favorites-title\">{title}</h1>\n        {favorites.length === 0 && (\n          <p className=\"favorites-empty\">You haven't added any favorites yet.</p>\n        )}\n        <div className=\"favorites-grid\">\n          {favorites.map((product) => {\n            const variant = getSelectedProductVariant(product);\n            const image = getProductVariantMainImage(variant) as unknown as IkasImage | null;\n            const price = getProductVariantFormattedFinalPrice(variant) as unknown as string;\n            return (\n              <div key={product.id} className=\"favorites-card\">\n                <a href={getSelectedProductVariantHref(product)} className=\"favorites-card-link\">\n                  {image && <img src={getDefaultSrc(image)} alt={product.name} className=\"favorites-card-image\" />}\n                  <h3 className=\"favorites-card-name\">{product.name}</h3>\n                  <span className=\"favorites-card-price\">{price}</span>\n                </a>\n                <button className=\"favorites-remove-btn\" onClick={() => removeIkasProductFromFavorites(product)}>Remove</button>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n});\n\nexport default FavoritesSection;\n",
+        "index.tsx": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getFavoriteProducts,\n  removeIkasProductFromFavorites,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getDefaultSrc,\n  IkasImage,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nconst FavoritesSection = observer(function FavoritesSection({\n  title = \"My Favorites\",\n}: Props) {\n  useEffect(() => {\n    getFavoriteProducts(customerStore);\n  }, []);\n\n  const favorites = customerStore.favoriteProducts ?? [];\n\n  return (\n    <section className=\"favorites-section\">\n      <div className=\"favorites-inner\">\n        <h1 className=\"favorites-title\">{title}</h1>\n        {favorites.length === 0 && (\n          <p className=\"favorites-empty\">You haven't added any favorites yet.</p>\n        )}\n        <div className=\"favorites-grid\">\n          {favorites.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            return (\n              <div key={product.id} className=\"favorites-card\">\n                <a href={getSelectedProductVariantHref(product)} className=\"favorites-card-link\">\n                  {image && <img src={getDefaultSrc(image)} alt={product.name} className=\"favorites-card-image\" />}\n                  <h3 className=\"favorites-card-name\">{product.name}</h3>\n                  <span className=\"favorites-card-price\">{price}</span>\n                </a>\n                <button className=\"favorites-remove-btn\" onClick={() => removeIkasProductFromFavorites(product)}>Remove</button>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n});\n\nexport default FavoritesSection;\n",
         "types.ts": "export interface Props {\n  title?: string;\n}\n",
         "styles.css": ".favorites-section {\n  width: 100%;\n  padding: 40px 24px;\n}\n\n.favorites-inner {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.favorites-title { font-size: 24px; font-weight: 700; color: #111; margin: 0 0 24px 0; }\n.favorites-empty { font-size: 16px; color: #666; text-align: center; padding: 48px 0; }\n\n.favorites-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 24px;\n}\n\n.favorites-card { position: relative; }\n.favorites-card-link { text-decoration: none; color: inherit; }\n.favorites-card-image { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #f5f5f5; }\n.favorites-card-name { font-size: 14px; font-weight: 500; color: #111; margin: 10px 0 4px; }\n.favorites-card-price { font-size: 14px; font-weight: 600; color: #111; }\n.favorites-remove-btn { font-size: 13px; color: #e53935; background: none; border: none; cursor: pointer; padding: 0; margin-top: 8px; }\n\n@media (max-width: 768px) {\n  .favorites-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }\n}\n",
         "ikas-config-snippet.json": "{\n  \"id\": \"favorites\",\n  \"name\": \"Favorites\",\n  \"type\": \"section\",\n  \"props\": [\n    { \"name\": \"title\", \"displayName\": \"Title\", \"type\": \"TEXT\", \"defaultValue\": \"My Favorites\" }\n  ]\n}\n"
@@ -164,8 +164,8 @@
       "title": "Hero Banner Section",
       "description": "Full-width hero banner with heading, subtitle, CTA button, and background image",
       "files": {
-        "index.tsx": "import { getDefaultSrc, Router } from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport default 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?.src) {\n    bgStyle.backgroundImage = `url(${backgroundImage.src})`;\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",
-        "types.ts": "export interface Props {\n  heading?: string;\n  subtitle?: string;\n  buttonText?: string;\n  buttonLink?: string;\n  backgroundImage?: { src: string; alt?: string };\n  backgroundColor?: string;\n  textColor?: string;\n}\n",
+        "index.tsx": "import { getDefaultSrc, Router } from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport default 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",
+        "types.ts": "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",
         "styles.css": ".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",
         "ikas-config-snippet.json": "{\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"
       }

package/data/storefront-api.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-02-18T13:48:25.655Z",
+  "generatedAt": "2026-02-19T07:52:57.971Z",
   "functions": [
     {
       "name": "apiListBlog",
@@ -8460,9 +8460,9 @@
           "description": "- The product variant"
         }
       ],
-      "returns": "The first image of the variant, or undefined if no images",
+      "returns": "The first IkasProductImage of the variant, or undefined if no images. Access `.image` to get the IkasImage for CDN helpers.",
       "returnType": "IkasProductImage | undefined",
-      "example": "```typescript\nimport { getProductVariantMainImage, getSelectedProductVariant } from \"@ikas/bp-storefront\";\nimport { IkasProduct } from \"@ikas/bp-storefront\";\n\nfunction ProductImage({ product }: { product: IkasProduct }) {\n  const variant = getSelectedProductVariant(product);\n  const mainImage = getProductVariantMainImage(variant);\n\n  if (!mainImage) {\n    return <div className=\"no-image\">No image available</div>;\n  }\n\n  return <img src={mainImage.src} alt={product.name} />;\n}\n```",
+      "example": "```typescript\nimport { getProductVariantMainImage, getSelectedProductVariant, getDefaultSrc } from \"@ikas/bp-storefront\";\nimport { IkasProduct } from \"@ikas/bp-storefront\";\n\nfunction ProductImage({ product }: { product: IkasProduct }) {\n  const variant = getSelectedProductVariant(product);\n  const productImage = getProductVariantMainImage(variant);\n  const image = productImage?.image;\n\n  if (!image) {\n    return <div className=\"no-image\">No image available</div>;\n  }\n\n  return <img src={getDefaultSrc(image)} alt={product.name} />;\n}\n```",
       "categories": [
         "ProductDetail",
         "ProductList"
@@ -16386,7 +16386,7 @@
       "id": "bundle-products",
       "title": "Bundle / Offer Products",
       "description": "Bundle product display with hasBundleSettings check, initBundleProducts initialization, getDisplayedProductGroups for group layout, and offer management (acceptProductOffer/rejectProductOffer/isAcceptedProductOffer). Supports variant selection within offers using isIkasVariantTypeColorSelection.",
-      "code": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  hasBundleSettings,\n  initBundleProducts,\n  getDisplayedProductGroups,\n  acceptProductOffer,\n  rejectProductOffer,\n  isAcceptedProductOffer,\n  getDisplayedProductVariantTypes,\n  selectVariantValue,\n  isIkasVariantTypeColorSelection,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getDefaultSrc,\n  getProductVariantMainImage,\n  IkasProduct,\n  IkasImage,\n} from \"@ikas/bp-storefront\";\n\nfunction BundleProducts({ product }: { product: IkasProduct }) {\n  const variant = getSelectedProductVariant(product);\n  const hasBundle = variant ? (hasBundleSettings(variant) as unknown as boolean) : false;\n\n  useEffect(() => {\n    if (hasBundle) {\n      initBundleProducts(product);\n    }\n  }, [hasBundle]);\n\n  if (!hasBundle) return null;\n\n  const productGroups = getDisplayedProductGroups(product);\n\n  return (\n    <div className=\"bundle-products\">\n      <h3>Complete Your Purchase</h3>\n      {productGroups.map((group: any, gi: number) => (\n        <div key={gi} className=\"bundle-group\">\n          {group.title && <h4>{group.title}</h4>}\n          <div className=\"bundle-offers\">\n            {group.offers?.map((offer: any) => {\n              const isAccepted = isAcceptedProductOffer(offer) as unknown as boolean;\n              const offerProduct = offer.product;\n              if (!offerProduct) return null;\n\n              const offerVariant = getSelectedProductVariant(offerProduct);\n              const offerImage = getProductVariantMainImage(offerVariant) as unknown as IkasImage | null;\n              const offerPrice = getProductVariantFormattedFinalPrice(offerVariant) as unknown as string;\n\n              // Variant types for offer product\n              const offerVariantTypes = getDisplayedProductVariantTypes(offerProduct);\n\n              return (\n                <div key={offer.id || offerProduct.id} className=\"bundle-offer-card\">\n                  {offerImage && (\n                    <img src={getDefaultSrc(offerImage)} alt={offerProduct.name} style={{ width: 80, height: 80, objectFit: \"cover\", borderRadius: 6 }} />\n                  )}\n                  <div className=\"bundle-offer-info\">\n                    <span className=\"bundle-offer-name\">{offerProduct.name}</span>\n                    <span className=\"bundle-offer-price\">{offerPrice}</span>\n\n                    {/* Variant selection for offer products */}\n                    {offerVariantTypes.map((vt: any) => {\n                      const isColor = isIkasVariantTypeColorSelection(vt.variantType);\n                      return (\n                        <div key={vt.variantType.id} style={{ display: \"flex\", gap: 4, marginTop: 4 }}>\n                          {vt.displayedVariantValues.map((dvv: any) => (\n                            <button\n                              key={dvv.variantValue.id}\n                              style={{\n                                width: isColor ? 24 : \"auto\",\n                                height: isColor ? 24 : \"auto\",\n                                borderRadius: isColor ? \"50%\" : 4,\n                                backgroundColor: isColor ? dvv.variantValue.colorCode : \"#fff\",\n                                border: dvv.isSelected ? \"2px solid #111\" : \"1px solid #ddd\",\n                                padding: isColor ? 0 : \"4px 8px\",\n                                fontSize: 12,\n                                cursor: \"pointer\",\n                              }}\n                              onClick={() => selectVariantValue(offerProduct, dvv.variantValue, { disableRoute: true })}\n                            >\n                              {!isColor && dvv.variantValue.name}\n                            </button>\n                          ))}\n                        </div>\n                      );\n                    })}\n                  </div>\n                  <button\n                    className={`bundle-offer-toggle ${isAccepted ? \"accepted\" : \"\"}`}\n                    onClick={() => isAccepted ? rejectProductOffer(offer) : acceptProductOffer(offer)}\n                  >\n                    {isAccepted ? \"Remove\" : \"Add\"}\n                  </button>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport default observer(BundleProducts);\n",
+      "code": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  hasBundleSettings,\n  initBundleProducts,\n  getDisplayedProductGroups,\n  acceptProductOffer,\n  rejectProductOffer,\n  isAcceptedProductOffer,\n  getDisplayedProductVariantTypes,\n  selectVariantValue,\n  isIkasVariantTypeColorSelection,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getDefaultSrc,\n  getProductVariantMainImage,\n  IkasProduct,\n} from \"@ikas/bp-storefront\";\n\nfunction BundleProducts({ product }: { product: IkasProduct }) {\n  const variant = getSelectedProductVariant(product);\n  const hasBundle = variant ? (hasBundleSettings(variant) as unknown as boolean) : false;\n\n  useEffect(() => {\n    if (hasBundle) {\n      initBundleProducts(product);\n    }\n  }, [hasBundle]);\n\n  if (!hasBundle) return null;\n\n  const productGroups = getDisplayedProductGroups(product);\n\n  return (\n    <div className=\"bundle-products\">\n      <h3>Complete Your Purchase</h3>\n      {productGroups.map((group: any, gi: number) => (\n        <div key={gi} className=\"bundle-group\">\n          {group.title && <h4>{group.title}</h4>}\n          <div className=\"bundle-offers\">\n            {group.offers?.map((offer: any) => {\n              const isAccepted = isAcceptedProductOffer(offer) as unknown as boolean;\n              const offerProduct = offer.product;\n              if (!offerProduct) return null;\n\n              const offerVariant = getSelectedProductVariant(offerProduct);\n              const offerProductImage = getProductVariantMainImage(offerVariant);\n              const offerImage = offerProductImage?.image ?? null;\n              const offerPrice = getProductVariantFormattedFinalPrice(offerVariant) as unknown as string;\n\n              // Variant types for offer product\n              const offerVariantTypes = getDisplayedProductVariantTypes(offerProduct);\n\n              return (\n                <div key={offer.id || offerProduct.id} className=\"bundle-offer-card\">\n                  {offerImage && (\n                    <img src={getDefaultSrc(offerImage)} alt={offerProduct.name} style={{ width: 80, height: 80, objectFit: \"cover\", borderRadius: 6 }} />\n                  )}\n                  <div className=\"bundle-offer-info\">\n                    <span className=\"bundle-offer-name\">{offerProduct.name}</span>\n                    <span className=\"bundle-offer-price\">{offerPrice}</span>\n\n                    {/* Variant selection for offer products */}\n                    {offerVariantTypes.map((vt: any) => {\n                      const isColor = isIkasVariantTypeColorSelection(vt.variantType);\n                      return (\n                        <div key={vt.variantType.id} style={{ display: \"flex\", gap: 4, marginTop: 4 }}>\n                          {vt.displayedVariantValues.map((dvv: any) => (\n                            <button\n                              key={dvv.variantValue.id}\n                              style={{\n                                width: isColor ? 24 : \"auto\",\n                                height: isColor ? 24 : \"auto\",\n                                borderRadius: isColor ? \"50%\" : 4,\n                                backgroundColor: isColor ? dvv.variantValue.colorCode : \"#fff\",\n                                border: dvv.isSelected ? \"2px solid #111\" : \"1px solid #ddd\",\n                                padding: isColor ? 0 : \"4px 8px\",\n                                fontSize: 12,\n                                cursor: \"pointer\",\n                              }}\n                              onClick={() => selectVariantValue(offerProduct, dvv.variantValue, { disableRoute: true })}\n                            >\n                              {!isColor && dvv.variantValue.name}\n                            </button>\n                          ))}\n                        </div>\n                      );\n                    })}\n                  </div>\n                  <button\n                    className={`bundle-offer-toggle ${isAccepted ? \"accepted\" : \"\"}`}\n                    onClick={() => isAccepted ? rejectProductOffer(offer) : acceptProductOffer(offer)}\n                  >\n                    {isAccepted ? \"Remove\" : \"Add\"}\n                  </button>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport default observer(BundleProducts);\n",
       "relatedFunctions": [
         "hasBundleSettings",
         "initBundleProducts",
@@ -16563,7 +16563,7 @@
       "id": "favorites",
       "title": "Favorites / Wishlist",
       "description": "Add/remove products from the wishlist with isFavoriteIkasProduct toggle, and display the full favorites list using getFavoriteProducts with product card rendering (pricing, images, links).",
-      "code": "import { useEffect, useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  isFavoriteIkasProduct,\n  addIkasProductToFavorites,\n  removeIkasProductFromFavorites,\n  getFavoriteProducts,\n  getSelectedProductVariant,\n  getSelectedProductVariantHref,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantFormattedSellPrice,\n  hasProductVariantDiscount,\n  getProductVariantMainImage,\n  getDefaultSrc,\n  customerStore,\n  IkasProduct,\n  IkasImage,\n} from \"@ikas/bp-storefront\";\n\n/** Toggle button for adding/removing a product from favorites */\nfunction FavoriteButton({ product }: { product: IkasProduct }) {\n  const isFavorite = isFavoriteIkasProduct(product);\n  const handleClick = async () => {\n    if (isFavorite) {\n      await removeIkasProductFromFavorites(product);\n    } else {\n      await addIkasProductToFavorites(product);\n    }\n  };\n  return (\n    <button onClick={handleClick}>\n      {isFavorite ? \"Remove from wishlist\" : \"Add to wishlist\"}\n    </button>\n  );\n}\n\n/** Full favorites list page */\nfunction FavoritesList() {\n  const [favorites, setFavorites] = useState<IkasProduct[]>([]);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    getFavoriteProducts(customerStore).then((products) => {\n      setFavorites(products ?? []);\n      setLoading(false);\n    });\n  }, []);\n\n  if (loading) return <p>Loading favorites...</p>;\n  if (favorites.length === 0) return <p>No favorites yet.</p>;\n\n  return (\n    <div>\n      {favorites.map((product) => {\n        const variant = getSelectedProductVariant(product);\n        const href = getSelectedProductVariantHref(product);\n        const image = getProductVariantMainImage(variant) as unknown as IkasImage | null;\n        const hasDiscount = hasProductVariantDiscount(variant) as unknown as boolean;\n        const finalPrice = getProductVariantFormattedFinalPrice(variant) as unknown as string;\n        const sellPrice = hasDiscount\n          ? (getProductVariantFormattedSellPrice(variant) as unknown as string)\n          : null;\n\n        return (\n          <div key={product.id} style={{ display: \"flex\", gap: 12, padding: \"12px 0\", borderBottom: \"1px solid #eee\" }}>\n            {image && (\n              <a href={href}>\n                <img src={getDefaultSrc(image)} width={80} height={80} style={{ objectFit: \"cover\", borderRadius: 6 }} alt={product.name} />\n              </a>\n            )}\n            <div>\n              <a href={href} style={{ fontWeight: 600, color: \"#111\", textDecoration: \"none\" }}>{product.name}</a>\n              <div>\n                {sellPrice && <span style={{ textDecoration: \"line-through\", color: \"#999\", marginRight: 8 }}>{sellPrice}</span>}\n                <span>{finalPrice}</span>\n              </div>\n              <button\n                style={{ marginTop: 8, fontSize: 13, color: \"#e53935\", background: \"none\", border: \"none\", cursor: \"pointer\", padding: 0 }}\n                onClick={() => removeIkasProductFromFavorites(product)}\n              >\n                Remove\n              </button>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport { FavoriteButton, FavoritesList };\nexport default observer(FavoriteButton);\n",
+      "code": "import { useEffect, useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  isFavoriteIkasProduct,\n  addIkasProductToFavorites,\n  removeIkasProductFromFavorites,\n  getFavoriteProducts,\n  getSelectedProductVariant,\n  getSelectedProductVariantHref,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantFormattedSellPrice,\n  hasProductVariantDiscount,\n  getProductVariantMainImage,\n  getDefaultSrc,\n  customerStore,\n  IkasProduct,\n} from \"@ikas/bp-storefront\";\n\n/** Toggle button for adding/removing a product from favorites */\nfunction FavoriteButton({ product }: { product: IkasProduct }) {\n  const isFavorite = isFavoriteIkasProduct(product);\n  const handleClick = async () => {\n    if (isFavorite) {\n      await removeIkasProductFromFavorites(product);\n    } else {\n      await addIkasProductToFavorites(product);\n    }\n  };\n  return (\n    <button onClick={handleClick}>\n      {isFavorite ? \"Remove from wishlist\" : \"Add to wishlist\"}\n    </button>\n  );\n}\n\n/** Full favorites list page */\nfunction FavoritesList() {\n  const [favorites, setFavorites] = useState<IkasProduct[]>([]);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    getFavoriteProducts(customerStore).then((products) => {\n      setFavorites(products ?? []);\n      setLoading(false);\n    });\n  }, []);\n\n  if (loading) return <p>Loading favorites...</p>;\n  if (favorites.length === 0) return <p>No favorites yet.</p>;\n\n  return (\n    <div>\n      {favorites.map((product) => {\n        const variant = getSelectedProductVariant(product);\n        const href = getSelectedProductVariantHref(product);\n        const productImage = getProductVariantMainImage(variant);\n        const image = productImage?.image ?? null;\n        const hasDiscount = hasProductVariantDiscount(variant) as unknown as boolean;\n        const finalPrice = getProductVariantFormattedFinalPrice(variant) as unknown as string;\n        const sellPrice = hasDiscount\n          ? (getProductVariantFormattedSellPrice(variant) as unknown as string)\n          : null;\n\n        return (\n          <div key={product.id} style={{ display: \"flex\", gap: 12, padding: \"12px 0\", borderBottom: \"1px solid #eee\" }}>\n            {image && (\n              <a href={href}>\n                <img src={getDefaultSrc(image)} width={80} height={80} style={{ objectFit: \"cover\", borderRadius: 6 }} alt={product.name} />\n              </a>\n            )}\n            <div>\n              <a href={href} style={{ fontWeight: 600, color: \"#111\", textDecoration: \"none\" }}>{product.name}</a>\n              <div>\n                {sellPrice && <span style={{ textDecoration: \"line-through\", color: \"#999\", marginRight: 8 }}>{sellPrice}</span>}\n                <span>{finalPrice}</span>\n              </div>\n              <button\n                style={{ marginTop: 8, fontSize: 13, color: \"#e53935\", background: \"none\", border: \"none\", cursor: \"pointer\", padding: 0 }}\n                onClick={() => removeIkasProductFromFavorites(product)}\n              >\n                Remove\n              </button>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nexport { FavoriteButton, FavoritesList };\nexport default observer(FavoriteButton);\n",
       "relatedFunctions": [
         "isFavoriteIkasProduct",
         "addIkasProductToFavorites",
@@ -16587,7 +16587,7 @@
       "id": "favorites-page-section",
       "title": "Favorites Page Section (Complete)",
       "description": "Complete favorites page with getFavoriteProducts loading, product cards with pricing/images/links, and remove functionality.",
-      "code": "import { useEffect, useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getFavoriteProducts,\n  removeIkasProductFromFavorites,\n  getSelectedProductVariant,\n  getSelectedProductVariantHref,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantFormattedSellPrice,\n  hasProductVariantDiscount,\n  getProductVariantMainImage,\n  getDefaultSrc,\n  IkasProduct,\n  IkasImage,\n} from \"@ikas/bp-storefront\";\n\nfunction FavoritesPageSection() {\n  const [favorites, setFavorites] = useState<IkasProduct[]>([]);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    getFavoriteProducts(customerStore).then((products) => {\n      setFavorites(products ?? []);\n      setLoading(false);\n    });\n  }, []);\n\n  const handleRemove = async (product: IkasProduct) => {\n    await removeIkasProductFromFavorites(product);\n    setFavorites(favorites.filter((f) => f.id !== product.id));\n  };\n\n  if (loading) {\n    return <section className=\"favorites-page\"><div className=\"favorites-inner\"><p>Loading...</p></div></section>;\n  }\n\n  return (\n    <section className=\"favorites-page\">\n      <div className=\"favorites-inner\">\n        <h1 className=\"favorites-title\">My Favorites</h1>\n\n        {favorites.length === 0 && <p className=\"favorites-empty\">No favorites yet.</p>}\n\n        <div className=\"favorites-grid\">\n          {favorites.map((product) => {\n            const variant = getSelectedProductVariant(product);\n            const href = getSelectedProductVariantHref(product);\n            const image = getProductVariantMainImage(variant) as unknown as IkasImage | null;\n            const hasDiscount = hasProductVariantDiscount(variant) as unknown as boolean;\n            const finalPrice = getProductVariantFormattedFinalPrice(variant) as unknown as string;\n            const sellPrice = hasDiscount ? (getProductVariantFormattedSellPrice(variant) as unknown as string) : null;\n\n            return (\n              <div key={product.id} className=\"favorites-card\">\n                {image && (\n                  <a href={href}><img className=\"favorites-card-img\" src={getDefaultSrc(image)} alt={product.name} /></a>\n                )}\n                <div className=\"favorites-card-info\">\n                  <a href={href} className=\"favorites-card-name\">{product.name}</a>\n                  <div className=\"favorites-card-price\">\n                    {sellPrice && <span className=\"favorites-card-old-price\">{sellPrice}</span>}\n                    <span>{finalPrice}</span>\n                  </div>\n                  <button className=\"favorites-card-remove\" onClick={() => handleRemove(product)}>Remove</button>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(FavoritesPageSection);\n",
+      "code": "import { useEffect, useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getFavoriteProducts,\n  removeIkasProductFromFavorites,\n  getSelectedProductVariant,\n  getSelectedProductVariantHref,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantFormattedSellPrice,\n  hasProductVariantDiscount,\n  getProductVariantMainImage,\n  getDefaultSrc,\n  IkasProduct,\n} from \"@ikas/bp-storefront\";\n\nfunction FavoritesPageSection() {\n  const [favorites, setFavorites] = useState<IkasProduct[]>([]);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    getFavoriteProducts(customerStore).then((products) => {\n      setFavorites(products ?? []);\n      setLoading(false);\n    });\n  }, []);\n\n  const handleRemove = async (product: IkasProduct) => {\n    await removeIkasProductFromFavorites(product);\n    setFavorites(favorites.filter((f) => f.id !== product.id));\n  };\n\n  if (loading) {\n    return <section className=\"favorites-page\"><div className=\"favorites-inner\"><p>Loading...</p></div></section>;\n  }\n\n  return (\n    <section className=\"favorites-page\">\n      <div className=\"favorites-inner\">\n        <h1 className=\"favorites-title\">My Favorites</h1>\n\n        {favorites.length === 0 && <p className=\"favorites-empty\">No favorites yet.</p>}\n\n        <div className=\"favorites-grid\">\n          {favorites.map((product) => {\n            const variant = getSelectedProductVariant(product);\n            const href = getSelectedProductVariantHref(product);\n            const productImage = getProductVariantMainImage(variant);\n            const image = productImage?.image ?? null;\n            const hasDiscount = hasProductVariantDiscount(variant) as unknown as boolean;\n            const finalPrice = getProductVariantFormattedFinalPrice(variant) as unknown as string;\n            const sellPrice = hasDiscount ? (getProductVariantFormattedSellPrice(variant) as unknown as string) : null;\n\n            return (\n              <div key={product.id} className=\"favorites-card\">\n                {image && (\n                  <a href={href}><img className=\"favorites-card-img\" src={getDefaultSrc(image)} alt={product.name} /></a>\n                )}\n                <div className=\"favorites-card-info\">\n                  <a href={href} className=\"favorites-card-name\">{product.name}</a>\n                  <div className=\"favorites-card-price\">\n                    {sellPrice && <span className=\"favorites-card-old-price\">{sellPrice}</span>}\n                    <span>{finalPrice}</span>\n                  </div>\n                  <button className=\"favorites-card-remove\" onClick={() => handleRemove(product)}>Remove</button>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(FavoritesPageSection);\n",
       "relatedFunctions": [
         "getFavoriteProducts",
         "removeIkasProductFromFavorites",
@@ -16607,7 +16607,7 @@
       "files": [
         {
           "filename": "index.tsx",
-          "content": "import { useEffect, useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getFavoriteProducts,\n  removeIkasProductFromFavorites,\n  getSelectedProductVariant,\n  getSelectedProductVariantHref,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantFormattedSellPrice,\n  hasProductVariantDiscount,\n  getProductVariantMainImage,\n  getDefaultSrc,\n  IkasProduct,\n  IkasImage,\n} from \"@ikas/bp-storefront\";\n\nfunction FavoritesPageSection() {\n  const [favorites, setFavorites] = useState<IkasProduct[]>([]);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    getFavoriteProducts(customerStore).then((products) => {\n      setFavorites(products ?? []);\n      setLoading(false);\n    });\n  }, []);\n\n  const handleRemove = async (product: IkasProduct) => {\n    await removeIkasProductFromFavorites(product);\n    setFavorites(favorites.filter((f) => f.id !== product.id));\n  };\n\n  if (loading) {\n    return <section className=\"favorites-page\"><div className=\"favorites-inner\"><p>Loading...</p></div></section>;\n  }\n\n  return (\n    <section className=\"favorites-page\">\n      <div className=\"favorites-inner\">\n        <h1 className=\"favorites-title\">My Favorites</h1>\n\n        {favorites.length === 0 && <p className=\"favorites-empty\">No favorites yet.</p>}\n\n        <div className=\"favorites-grid\">\n          {favorites.map((product) => {\n            const variant = getSelectedProductVariant(product);\n            const href = getSelectedProductVariantHref(product);\n            const image = getProductVariantMainImage(variant) as unknown as IkasImage | null;\n            const hasDiscount = hasProductVariantDiscount(variant) as unknown as boolean;\n            const finalPrice = getProductVariantFormattedFinalPrice(variant) as unknown as string;\n            const sellPrice = hasDiscount ? (getProductVariantFormattedSellPrice(variant) as unknown as string) : null;\n\n            return (\n              <div key={product.id} className=\"favorites-card\">\n                {image && (\n                  <a href={href}><img className=\"favorites-card-img\" src={getDefaultSrc(image)} alt={product.name} /></a>\n                )}\n                <div className=\"favorites-card-info\">\n                  <a href={href} className=\"favorites-card-name\">{product.name}</a>\n                  <div className=\"favorites-card-price\">\n                    {sellPrice && <span className=\"favorites-card-old-price\">{sellPrice}</span>}\n                    <span>{finalPrice}</span>\n                  </div>\n                  <button className=\"favorites-card-remove\" onClick={() => handleRemove(product)}>Remove</button>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(FavoritesPageSection);\n"
+          "content": "import { useEffect, useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getFavoriteProducts,\n  removeIkasProductFromFavorites,\n  getSelectedProductVariant,\n  getSelectedProductVariantHref,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantFormattedSellPrice,\n  hasProductVariantDiscount,\n  getProductVariantMainImage,\n  getDefaultSrc,\n  IkasProduct,\n} from \"@ikas/bp-storefront\";\n\nfunction FavoritesPageSection() {\n  const [favorites, setFavorites] = useState<IkasProduct[]>([]);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    getFavoriteProducts(customerStore).then((products) => {\n      setFavorites(products ?? []);\n      setLoading(false);\n    });\n  }, []);\n\n  const handleRemove = async (product: IkasProduct) => {\n    await removeIkasProductFromFavorites(product);\n    setFavorites(favorites.filter((f) => f.id !== product.id));\n  };\n\n  if (loading) {\n    return <section className=\"favorites-page\"><div className=\"favorites-inner\"><p>Loading...</p></div></section>;\n  }\n\n  return (\n    <section className=\"favorites-page\">\n      <div className=\"favorites-inner\">\n        <h1 className=\"favorites-title\">My Favorites</h1>\n\n        {favorites.length === 0 && <p className=\"favorites-empty\">No favorites yet.</p>}\n\n        <div className=\"favorites-grid\">\n          {favorites.map((product) => {\n            const variant = getSelectedProductVariant(product);\n            const href = getSelectedProductVariantHref(product);\n            const productImage = getProductVariantMainImage(variant);\n            const image = productImage?.image ?? null;\n            const hasDiscount = hasProductVariantDiscount(variant) as unknown as boolean;\n            const finalPrice = getProductVariantFormattedFinalPrice(variant) as unknown as string;\n            const sellPrice = hasDiscount ? (getProductVariantFormattedSellPrice(variant) as unknown as string) : null;\n\n            return (\n              <div key={product.id} className=\"favorites-card\">\n                {image && (\n                  <a href={href}><img className=\"favorites-card-img\" src={getDefaultSrc(image)} alt={product.name} /></a>\n                )}\n                <div className=\"favorites-card-info\">\n                  <a href={href} className=\"favorites-card-name\">{product.name}</a>\n                  <div className=\"favorites-card-price\">\n                    {sellPrice && <span className=\"favorites-card-old-price\">{sellPrice}</span>}\n                    <span>{finalPrice}</span>\n                  </div>\n                  <button className=\"favorites-card-remove\" onClick={() => handleRemove(product)}>Remove</button>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(FavoritesPageSection);\n"
         },
         {
           "filename": "types.ts",
@@ -16627,7 +16627,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 } 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?.src ? (\n              <img src={logo.src} alt={logo.alt || \"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?.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",
       "relatedFunctions": [],
       "categories": [
         "Navigation",
@@ -16636,11 +16636,11 @@
       "files": [
         {
           "filename": "index.tsx",
-          "content": "import { IkasNavigationLink } 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?.src ? (\n              <img src={logo.src} alt={logo.alt || \"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?.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"
         },
         {
           "filename": "types.ts",
-          "content": "import { IkasNavigationLink } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n  logo?: { src: string; alt?: string };\n  description?: string;\n  linkColumn1Title?: string;\n  linkColumn1?: IkasNavigationLink[];\n  linkColumn2Title?: string;\n  linkColumn2?: IkasNavigationLink[];\n  copyright?: string;\n}\n"
+          "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"
         },
         {
           "filename": "styles.css",
@@ -16692,7 +16692,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. Uses observer for reactive cart badge and customer state.",
-      "code": "import { useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\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\nfunction 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?.src ? (\n              <img src={logo.src} alt={logo.alt || \"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\nexport default observer(HeaderSection);\n",
+      "code": "import { useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\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\nfunction 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\nexport default observer(HeaderSection);\n",
       "relatedFunctions": [
         "cartStore",
         "customerStore",
@@ -16721,11 +16721,11 @@
       "files": [
         {
           "filename": "index.tsx",
-          "content": "import { useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\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\nfunction 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?.src ? (\n              <img src={logo.src} alt={logo.alt || \"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\nexport default observer(HeaderSection);\n"
+          "content": "import { useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\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\nfunction 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\nexport default observer(HeaderSection);\n"
         },
         {
           "filename": "types.ts",
-          "content": "import { IkasNavigationLink } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n  logo?: { src: string; alt?: string };\n  navigationLinks?: IkasNavigationLink[];\n  announcementText?: string;\n  announcementBgColor?: string;\n  announcementTextColor?: string;\n}\n"
+          "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"
         },
         {
           "filename": "styles.css",
@@ -16934,7 +16934,7 @@
       "id": "product-card",
       "title": "Product Card",
       "description": "Product card component with image, name, main variant display (getMainProductVariantType/getMainProductVariantValue), pricing with discount, stock badge, favorite toggle, and product link. Used in product grids and lists.",
-      "code": "import { observer } from \"@ikas/component-utils\";\nimport {\n  getSelectedProductVariant,\n  getSelectedProductVariantHref,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantFormattedSellPrice,\n  getProductVariantMainImage,\n  getMainProductVariantType,\n  getMainProductVariantValue,\n  hasProductStock,\n  hasProductVariantStock,\n  hasProductVariantDiscount,\n  hasBundleSettings,\n  isFavoriteIkasProduct,\n  addIkasProductToFavorites,\n  removeIkasProductFromFavorites,\n  customerStore,\n  hasCustomer,\n  getDefaultSrc,\n  IkasProduct,\n  IkasImage,\n} from \"@ikas/bp-storefront\";\n\nfunction ProductCard({ product }: { product: IkasProduct }) {\n  const variant = getSelectedProductVariant(product);\n  const href = getSelectedProductVariantHref(product);\n  const image = getProductVariantMainImage(variant) as unknown as IkasImage | null;\n  const finalPrice = getProductVariantFormattedFinalPrice(variant) as unknown as string;\n  const hasDiscount = hasProductVariantDiscount(variant) as unknown as boolean;\n  const sellPrice = hasDiscount ? (getProductVariantFormattedSellPrice(variant) as unknown as string) : null;\n  const inStock = hasProductStock(product) as unknown as boolean;\n  const isFavorite = isFavoriteIkasProduct(product);\n\n  // Main variant type/value (e.g., \"Color: Red\")\n  const mainType = getMainProductVariantType(product);\n  const mainValue = getMainProductVariantValue(product);\n\n  const handleFavorite = async (e: Event) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (isFavorite) {\n      await removeIkasProductFromFavorites(product);\n    } else {\n      await addIkasProductToFavorites(product);\n    }\n  };\n\n  return (\n    <a href={href} className=\"product-card\" style={{ display: \"block\", textDecoration: \"none\", color: \"inherit\" }}>\n      <div style={{ position: \"relative\" }}>\n        {image && (\n          <img src={getDefaultSrc(image)} alt={product.name} style={{ width: \"100%\", aspectRatio: \"1\", objectFit: \"cover\", borderRadius: 8, background: \"#f5f5f5\" }} />\n        )}\n        {!inStock && (\n          <span style={{ position: \"absolute\", top: 8, left: 8, background: \"#111\", color: \"#fff\", fontSize: 11, padding: \"4px 8px\", borderRadius: 4 }}>Out of Stock</span>\n        )}\n        {hasDiscount && (\n          <span style={{ position: \"absolute\", top: 8, right: 8, background: \"#e53935\", color: \"#fff\", fontSize: 11, padding: \"4px 8px\", borderRadius: 4 }}>Sale</span>\n        )}\n        <button\n          onClick={handleFavorite}\n          style={{ position: \"absolute\", bottom: 8, right: 8, background: \"#fff\", border: \"none\", borderRadius: \"50%\", width: 32, height: 32, cursor: \"pointer\", fontSize: 16 }}\n        >\n          {isFavorite ? \"\\u2665\" : \"\\u2661\"}\n        </button>\n      </div>\n      <div style={{ padding: \"8px 0\" }}>\n        <h3 style={{ fontSize: 14, fontWeight: 600, margin: \"0 0 4px 0\" }}>{product.name}</h3>\n        {mainType && mainValue && (\n          <span style={{ fontSize: 12, color: \"#666\" }}>{mainType.name}: {mainValue.name}</span>\n        )}\n        <div style={{ marginTop: 4 }}>\n          {sellPrice && <span style={{ textDecoration: \"line-through\", color: \"#999\", marginRight: 8, fontSize: 13 }}>{sellPrice}</span>}\n          <span style={{ fontSize: 15, fontWeight: 700 }}>{finalPrice}</span>\n        </div>\n      </div>\n    </a>\n  );\n}\n\nexport default observer(ProductCard);\n",
+      "code": "import { observer } from \"@ikas/component-utils\";\nimport {\n  getSelectedProductVariant,\n  getSelectedProductVariantHref,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantFormattedSellPrice,\n  getProductVariantMainImage,\n  getMainProductVariantType,\n  getMainProductVariantValue,\n  hasProductStock,\n  hasProductVariantStock,\n  hasProductVariantDiscount,\n  hasBundleSettings,\n  isFavoriteIkasProduct,\n  addIkasProductToFavorites,\n  removeIkasProductFromFavorites,\n  customerStore,\n  hasCustomer,\n  getDefaultSrc,\n  IkasProduct,\n} from \"@ikas/bp-storefront\";\n\nfunction ProductCard({ product }: { product: IkasProduct }) {\n  const variant = getSelectedProductVariant(product);\n  const href = getSelectedProductVariantHref(product);\n  const productImage = getProductVariantMainImage(variant);\n  const image = productImage?.image ?? null;\n  const finalPrice = getProductVariantFormattedFinalPrice(variant) as unknown as string;\n  const hasDiscount = hasProductVariantDiscount(variant) as unknown as boolean;\n  const sellPrice = hasDiscount ? (getProductVariantFormattedSellPrice(variant) as unknown as string) : null;\n  const inStock = hasProductStock(product) as unknown as boolean;\n  const isFavorite = isFavoriteIkasProduct(product);\n\n  // Main variant type/value (e.g., \"Color: Red\")\n  const mainType = getMainProductVariantType(product);\n  const mainValue = getMainProductVariantValue(product);\n\n  const handleFavorite = async (e: Event) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (isFavorite) {\n      await removeIkasProductFromFavorites(product);\n    } else {\n      await addIkasProductToFavorites(product);\n    }\n  };\n\n  return (\n    <a href={href} className=\"product-card\" style={{ display: \"block\", textDecoration: \"none\", color: \"inherit\" }}>\n      <div style={{ position: \"relative\" }}>\n        {image && (\n          <img src={getDefaultSrc(image)} alt={product.name} style={{ width: \"100%\", aspectRatio: \"1\", objectFit: \"cover\", borderRadius: 8, background: \"#f5f5f5\" }} />\n        )}\n        {!inStock && (\n          <span style={{ position: \"absolute\", top: 8, left: 8, background: \"#111\", color: \"#fff\", fontSize: 11, padding: \"4px 8px\", borderRadius: 4 }}>Out of Stock</span>\n        )}\n        {hasDiscount && (\n          <span style={{ position: \"absolute\", top: 8, right: 8, background: \"#e53935\", color: \"#fff\", fontSize: 11, padding: \"4px 8px\", borderRadius: 4 }}>Sale</span>\n        )}\n        <button\n          onClick={handleFavorite}\n          style={{ position: \"absolute\", bottom: 8, right: 8, background: \"#fff\", border: \"none\", borderRadius: \"50%\", width: 32, height: 32, cursor: \"pointer\", fontSize: 16 }}\n        >\n          {isFavorite ? \"\\u2665\" : \"\\u2661\"}\n        </button>\n      </div>\n      <div style={{ padding: \"8px 0\" }}>\n        <h3 style={{ fontSize: 14, fontWeight: 600, margin: \"0 0 4px 0\" }}>{product.name}</h3>\n        {mainType && mainValue && (\n          <span style={{ fontSize: 12, color: \"#666\" }}>{mainType.name}: {mainValue.name}</span>\n        )}\n        <div style={{ marginTop: 4 }}>\n          {sellPrice && <span style={{ textDecoration: \"line-through\", color: \"#999\", marginRight: 8, fontSize: 13 }}>{sellPrice}</span>}\n          <span style={{ fontSize: 15, fontWeight: 700 }}>{finalPrice}</span>\n        </div>\n      </div>\n    </a>\n  );\n}\n\nexport default observer(ProductCard);\n",
       "relatedFunctions": [
         "getSelectedProductVariant",
         "getSelectedProductVariantHref",
@@ -16963,7 +16963,7 @@
       "id": "product-detail-section",
       "title": "Product Detail Section (Complete)",
       "description": "Complete product detail section with breadcrumb, image gallery (IkasThemeSlider pattern), variant selection, pricing with discount amount, add-to-cart with result handling, favorites, brand link, product attributes, and bundle products. Based on production dynavit.json patterns.",
-      "code": "import { useState, useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  getSelectedProductVariant,\n  getDisplayedProductVariantTypes,\n  selectVariantValue,\n  hasProductVariantStock,\n  hasProductStock,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantFormattedSellPrice,\n  hasProductVariantDiscount,\n  getProductVariantDiscountPercentage,\n  getProductVariantFormattedDiscountAmount,\n  isAddToCartEnabled,\n  addItemToCart,\n  isFavoriteIkasProduct,\n  addIkasProductToFavorites,\n  removeIkasProductFromFavorites,\n  getProductVariantMainImage,\n  getDefaultSrc,\n  getThumbnailSrc,\n  getSrc,\n  createMediaSrcset,\n  getProductCategoryPath,\n  getIkasCategoryPathItemHref,\n  getIkasBrandHref,\n  getAttributeListValues,\n  hasBundleSettings,\n  initBundleProducts,\n  getDisplayedProductGroups,\n  isNotEmpty,\n  IkasImage,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction ProductDetail({\n  product,\n  showFavoriteButton = true,\n  addToCartButtonText = \"Add to Cart\",\n}: Props) {\n  const [selectedImageIndex, setSelectedImageIndex] = useState(0);\n  const [isAddingToCart, setIsAddingToCart] = useState(false);\n  const [quantity, setQuantity] = useState(1);\n\n  useEffect(() => {\n    if (product) {\n      const variant = getSelectedProductVariant(product);\n      if (variant && hasBundleSettings(variant)) {\n        initBundleProducts(product);\n      }\n    }\n  }, [product]);\n\n  if (!product) {\n    return null;\n  }\n\n  const selectedVariant = getSelectedProductVariant(product) as any;\n  const variantTypes = getDisplayedProductVariantTypes(product);\n  const inStock = hasProductStock(product) as unknown as boolean;\n  const variantInStock = hasProductVariantStock(selectedVariant) as unknown as boolean;\n  const canAddToCart = isAddToCartEnabled(product) as unknown as boolean;\n\n  // Pricing\n  const hasDiscount = hasProductVariantDiscount(selectedVariant) as unknown as boolean;\n  const finalPrice = getProductVariantFormattedFinalPrice(selectedVariant) as unknown as string;\n  const originalPrice = hasDiscount\n    ? (getProductVariantFormattedSellPrice(selectedVariant) as unknown as string)\n    : null;\n  const discountPercentage = hasDiscount\n    ? (getProductVariantDiscountPercentage(selectedVariant) as unknown as number)\n    : null;\n  const discountAmount = hasDiscount\n    ? (getProductVariantFormattedDiscountAmount(selectedVariant) as unknown as string)\n    : null;\n\n  // Breadcrumb\n  const categoryPath = getProductCategoryPath(product);\n\n  // Images — in production, dynavit uses IkasThemeSlider for image carousel\n  const mainImage = getProductVariantMainImage(selectedVariant) as unknown as IkasImage | undefined;\n  const variantImages = selectedVariant?.images;\n  const images: IkasImage[] = variantImages?.length\n    ? variantImages\n        .map((pi: any) => pi.image)\n        .filter((img: any): img is IkasImage => img != null)\n    : mainImage\n      ? [mainImage]\n      : [];\n  const currentImage = images[selectedImageIndex] ?? images[0];\n\n  // Favorites\n  const isFavorite = isFavoriteIkasProduct(product);\n\n  // Attributes\n  const attributes = product.attributeList\n    ? getAttributeListValues(product.attributeList)\n    : [];\n\n  // Bundle / Offer products\n  const hasBundle = selectedVariant ? (hasBundleSettings(selectedVariant) as unknown as boolean) : false;\n  const productGroups = hasBundle ? getDisplayedProductGroups(product) : [];\n\n  const handleAddToCart = async () => {\n    if (!canAddToCart || isAddingToCart) return;\n    setIsAddingToCart(true);\n    try {\n      const result = await addItemToCart(selectedVariant, product, quantity);\n      if (result.success) {\n        setQuantity(1);\n      }\n    } finally {\n      setIsAddingToCart(false);\n    }\n  };\n\n  const handleToggleFavorite = async () => {\n    if (isFavorite) {\n      await removeIkasProductFromFavorites(product);\n    } else {\n      await addIkasProductToFavorites(product);\n    }\n  };\n\n  return (\n    <section className=\"product-detail\">\n      {/* Breadcrumb */}\n      {isNotEmpty(categoryPath) && (\n        <nav className=\"product-breadcrumb\">\n          <a href=\"/\">Home</a>\n          {categoryPath.map((pathItem: any, i: number) => (\n            <span key={i}>\n              <span className=\"breadcrumb-sep\">/</span>\n              <a href={getIkasCategoryPathItemHref(pathItem)}>{pathItem.name}</a>\n            </span>\n          ))}\n          <span className=\"breadcrumb-sep\">/</span>\n          <span className=\"breadcrumb-current\">{product.name}</span>\n        </nav>\n      )}\n\n      <div className=\"product-detail-inner\">\n        {/* Image Gallery — production uses IkasThemeSlider for carousel */}\n        <div className=\"product-gallery\">\n          {currentImage && (\n            <img\n              className=\"product-main-image\"\n              src={getDefaultSrc(currentImage)}\n              srcSet={createMediaSrcset(currentImage)}\n              sizes=\"(max-width: 768px) 100vw, 50vw\"\n              alt={currentImage.altText || product.name}\n            />\n          )}\n          {images.length > 1 && (\n            <div className=\"product-thumbnails\">\n              {images.map((img, i) => (\n                <button\n                  key={img.id || i}\n                  className={`product-thumbnail-btn ${i === selectedImageIndex ? \"active\" : \"\"}`}\n                  onClick={() => setSelectedImageIndex(i)}\n                >\n                  <img src={getThumbnailSrc(img)} alt={`${product.name} ${i + 1}`} />\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* Product Info */}\n        <div className=\"product-info\">\n          {/* Brand with link */}\n          {product.brand && (\n            <a className=\"product-brand\" href={getIkasBrandHref(product.brand)}>\n              {product.brand.name}\n            </a>\n          )}\n          <h1 className=\"product-name\">{product.name}</h1>\n\n          {/* Average Rating */}\n          {product.averageRating > 0 && (\n            <div className=\"product-rating\">\n              {\"★\".repeat(Math.round(product.averageRating))}\n              {\"☆\".repeat(5 - Math.round(product.averageRating))}\n              <span className=\"product-rating-value\">({product.averageRating.toFixed(1)})</span>\n            </div>\n          )}\n\n          {/* Campaign badges */}\n          {isNotEmpty(product.campaigns) && (\n            <div className=\"product-campaigns\">\n              {product.campaigns.map((campaign: any) => (\n                <span key={campaign.id} className=\"product-campaign-badge\">\n                  {campaign.name}\n                </span>\n              ))}\n            </div>\n          )}\n\n          {/* Pricing */}\n          <div className=\"product-pricing\">\n            <span className=\"product-final-price\">{finalPrice}</span>\n            {originalPrice && <span className=\"product-original-price\">{originalPrice}</span>}\n            {discountPercentage != null && (\n              <span className=\"product-discount-badge\">-{discountPercentage}%</span>\n            )}\n            {discountAmount && (\n              <span className=\"product-savings\">Save {discountAmount}</span>\n            )}\n          </div>\n\n          {/* Variant Selection */}\n          {variantTypes.length > 0 && (\n            <div className=\"product-variants\">\n              {variantTypes.map((vt) => (\n                <div key={vt.variantType.id} className=\"variant-group\">\n                  <span className=\"variant-group-label\">{vt.variantType.name}</span>\n                  <div className=\"variant-options\">\n                    {vt.displayedVariantValues.map((dvv) => (\n                      <button\n                        key={dvv.variantValue.id}\n                        className={`variant-option-btn ${dvv.isSelected ? \"selected\" : \"\"}`}\n                        disabled={!dvv.hasStock}\n                        onClick={() => selectVariantValue(product, dvv.variantValue)}\n                      >\n                        {dvv.variantValue.name}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n\n          {/* Stock notice */}\n          {!inStock && <span className=\"out-of-stock-notice\">Out of Stock</span>}\n\n          {/* Quantity + Add to Cart */}\n          <div className=\"product-actions\">\n            <div className=\"product-quantity\">\n              <button onClick={() => setQuantity(Math.max(1, quantity - 1))}>-</button>\n              <span>{quantity}</span>\n              <button onClick={() => setQuantity(quantity + 1)}>+</button>\n            </div>\n            <button\n              className=\"add-to-cart-btn\"\n              disabled={!canAddToCart || isAddingToCart}\n              onClick={handleAddToCart}\n            >\n              {isAddingToCart ? \"Adding...\" : !variantInStock ? \"Out of Stock\" : addToCartButtonText}\n            </button>\n            {showFavoriteButton && (\n              <button\n                className={`favorite-btn ${isFavorite ? \"is-favorite\" : \"\"}`}\n                onClick={handleToggleFavorite}\n                aria-label={isFavorite ? \"Remove from favorites\" : \"Add to favorites\"}\n              >\n                {isFavorite ? \"\\u2665\" : \"\\u2661\"}\n              </button>\n            )}\n          </div>\n\n          {/* Description */}\n          {product.description && (\n            <div className=\"product-description\">\n              <h3>Description</h3>\n              <div dangerouslySetInnerHTML={{ __html: product.description }} />\n            </div>\n          )}\n\n          {/* Product Attributes (e.g. ingredients, specs) */}\n          {isNotEmpty(attributes) && (\n            <div className=\"product-attributes\">\n              <h3>Details</h3>\n              {attributes.map((attr: any, i: number) => (\n                <div key={i} className=\"attribute-row\">\n                  <span className=\"attribute-name\">{attr.name}</span>\n                  <span className=\"attribute-value\">{attr.value}</span>\n                </div>\n              ))}\n            </div>\n          )}\n\n          {/* Bundle / Offer Products */}\n          {isNotEmpty(productGroups) && (\n            <div className=\"product-bundles\">\n              <h3>Frequently Bought Together</h3>\n              {productGroups.map((group: any, i: number) => (\n                <div key={i} className=\"bundle-group\">\n                  {group.title && <h4>{group.title}</h4>}\n                  <div className=\"bundle-items\">\n                    {group.products?.map((bp: any) => (\n                      <div key={bp.product?.id} className=\"bundle-item\">\n                        <span>{bp.product?.name}</span>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(ProductDetail);\n",
+      "code": "import { useState, useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  getSelectedProductVariant,\n  getDisplayedProductVariantTypes,\n  selectVariantValue,\n  hasProductVariantStock,\n  hasProductStock,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantFormattedSellPrice,\n  hasProductVariantDiscount,\n  getProductVariantDiscountPercentage,\n  getProductVariantFormattedDiscountAmount,\n  isAddToCartEnabled,\n  addItemToCart,\n  isFavoriteIkasProduct,\n  addIkasProductToFavorites,\n  removeIkasProductFromFavorites,\n  getProductVariantMainImage,\n  getDefaultSrc,\n  getThumbnailSrc,\n  getSrc,\n  createMediaSrcset,\n  getProductCategoryPath,\n  getIkasCategoryPathItemHref,\n  getIkasBrandHref,\n  getAttributeListValues,\n  hasBundleSettings,\n  initBundleProducts,\n  getDisplayedProductGroups,\n  isNotEmpty,\n  IkasImage,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction ProductDetail({\n  product,\n  showFavoriteButton = true,\n  addToCartButtonText = \"Add to Cart\",\n}: Props) {\n  const [selectedImageIndex, setSelectedImageIndex] = useState(0);\n  const [isAddingToCart, setIsAddingToCart] = useState(false);\n  const [quantity, setQuantity] = useState(1);\n\n  useEffect(() => {\n    if (product) {\n      const variant = getSelectedProductVariant(product);\n      if (variant && hasBundleSettings(variant)) {\n        initBundleProducts(product);\n      }\n    }\n  }, [product]);\n\n  if (!product) {\n    return null;\n  }\n\n  const selectedVariant = getSelectedProductVariant(product) as any;\n  const variantTypes = getDisplayedProductVariantTypes(product);\n  const inStock = hasProductStock(product) as unknown as boolean;\n  const variantInStock = hasProductVariantStock(selectedVariant) as unknown as boolean;\n  const canAddToCart = isAddToCartEnabled(product) as unknown as boolean;\n\n  // Pricing\n  const hasDiscount = hasProductVariantDiscount(selectedVariant) as unknown as boolean;\n  const finalPrice = getProductVariantFormattedFinalPrice(selectedVariant) as unknown as string;\n  const originalPrice = hasDiscount\n    ? (getProductVariantFormattedSellPrice(selectedVariant) as unknown as string)\n    : null;\n  const discountPercentage = hasDiscount\n    ? (getProductVariantDiscountPercentage(selectedVariant) as unknown as number)\n    : null;\n  const discountAmount = hasDiscount\n    ? (getProductVariantFormattedDiscountAmount(selectedVariant) as unknown as string)\n    : null;\n\n  // Breadcrumb\n  const categoryPath = getProductCategoryPath(product);\n\n  // Images — in production, dynavit uses IkasThemeSlider for image carousel\n  const mainProductImage = getProductVariantMainImage(selectedVariant);\n  const mainImage = mainProductImage?.image;\n  const variantImages = selectedVariant?.images;\n  const images: IkasImage[] = variantImages?.length\n    ? variantImages\n        .map((pi: any) => pi.image)\n        .filter((img: any): img is IkasImage => img != null)\n    : mainImage\n      ? [mainImage]\n      : [];\n  const currentImage = images[selectedImageIndex] ?? images[0];\n\n  // Favorites\n  const isFavorite = isFavoriteIkasProduct(product);\n\n  // Attributes\n  const attributes = product.attributeList\n    ? getAttributeListValues(product.attributeList)\n    : [];\n\n  // Bundle / Offer products\n  const hasBundle = selectedVariant ? (hasBundleSettings(selectedVariant) as unknown as boolean) : false;\n  const productGroups = hasBundle ? getDisplayedProductGroups(product) : [];\n\n  const handleAddToCart = async () => {\n    if (!canAddToCart || isAddingToCart) return;\n    setIsAddingToCart(true);\n    try {\n      const result = await addItemToCart(selectedVariant, product, quantity);\n      if (result.success) {\n        setQuantity(1);\n      }\n    } finally {\n      setIsAddingToCart(false);\n    }\n  };\n\n  const handleToggleFavorite = async () => {\n    if (isFavorite) {\n      await removeIkasProductFromFavorites(product);\n    } else {\n      await addIkasProductToFavorites(product);\n    }\n  };\n\n  return (\n    <section className=\"product-detail\">\n      {/* Breadcrumb */}\n      {isNotEmpty(categoryPath) && (\n        <nav className=\"product-breadcrumb\">\n          <a href=\"/\">Home</a>\n          {categoryPath.map((pathItem: any, i: number) => (\n            <span key={i}>\n              <span className=\"breadcrumb-sep\">/</span>\n              <a href={getIkasCategoryPathItemHref(pathItem)}>{pathItem.name}</a>\n            </span>\n          ))}\n          <span className=\"breadcrumb-sep\">/</span>\n          <span className=\"breadcrumb-current\">{product.name}</span>\n        </nav>\n      )}\n\n      <div className=\"product-detail-inner\">\n        {/* Image Gallery — production uses IkasThemeSlider for carousel */}\n        <div className=\"product-gallery\">\n          {currentImage && (\n            <img\n              className=\"product-main-image\"\n              src={getDefaultSrc(currentImage)}\n              srcSet={createMediaSrcset(currentImage)}\n              sizes=\"(max-width: 768px) 100vw, 50vw\"\n              alt={currentImage.altText || product.name}\n            />\n          )}\n          {images.length > 1 && (\n            <div className=\"product-thumbnails\">\n              {images.map((img, i) => (\n                <button\n                  key={img.id || i}\n                  className={`product-thumbnail-btn ${i === selectedImageIndex ? \"active\" : \"\"}`}\n                  onClick={() => setSelectedImageIndex(i)}\n                >\n                  <img src={getThumbnailSrc(img)} alt={`${product.name} ${i + 1}`} />\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* Product Info */}\n        <div className=\"product-info\">\n          {/* Brand with link */}\n          {product.brand && (\n            <a className=\"product-brand\" href={getIkasBrandHref(product.brand)}>\n              {product.brand.name}\n            </a>\n          )}\n          <h1 className=\"product-name\">{product.name}</h1>\n\n          {/* Average Rating */}\n          {product.averageRating > 0 && (\n            <div className=\"product-rating\">\n              {\"★\".repeat(Math.round(product.averageRating))}\n              {\"☆\".repeat(5 - Math.round(product.averageRating))}\n              <span className=\"product-rating-value\">({product.averageRating.toFixed(1)})</span>\n            </div>\n          )}\n\n          {/* Campaign badges */}\n          {isNotEmpty(product.campaigns) && (\n            <div className=\"product-campaigns\">\n              {product.campaigns.map((campaign: any) => (\n                <span key={campaign.id} className=\"product-campaign-badge\">\n                  {campaign.name}\n                </span>\n              ))}\n            </div>\n          )}\n\n          {/* Pricing */}\n          <div className=\"product-pricing\">\n            <span className=\"product-final-price\">{finalPrice}</span>\n            {originalPrice && <span className=\"product-original-price\">{originalPrice}</span>}\n            {discountPercentage != null && (\n              <span className=\"product-discount-badge\">-{discountPercentage}%</span>\n            )}\n            {discountAmount && (\n              <span className=\"product-savings\">Save {discountAmount}</span>\n            )}\n          </div>\n\n          {/* Variant Selection */}\n          {variantTypes.length > 0 && (\n            <div className=\"product-variants\">\n              {variantTypes.map((vt) => (\n                <div key={vt.variantType.id} className=\"variant-group\">\n                  <span className=\"variant-group-label\">{vt.variantType.name}</span>\n                  <div className=\"variant-options\">\n                    {vt.displayedVariantValues.map((dvv) => (\n                      <button\n                        key={dvv.variantValue.id}\n                        className={`variant-option-btn ${dvv.isSelected ? \"selected\" : \"\"}`}\n                        disabled={!dvv.hasStock}\n                        onClick={() => selectVariantValue(product, dvv.variantValue)}\n                      >\n                        {dvv.variantValue.name}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n\n          {/* Stock notice */}\n          {!inStock && <span className=\"out-of-stock-notice\">Out of Stock</span>}\n\n          {/* Quantity + Add to Cart */}\n          <div className=\"product-actions\">\n            <div className=\"product-quantity\">\n              <button onClick={() => setQuantity(Math.max(1, quantity - 1))}>-</button>\n              <span>{quantity}</span>\n              <button onClick={() => setQuantity(quantity + 1)}>+</button>\n            </div>\n            <button\n              className=\"add-to-cart-btn\"\n              disabled={!canAddToCart || isAddingToCart}\n              onClick={handleAddToCart}\n            >\n              {isAddingToCart ? \"Adding...\" : !variantInStock ? \"Out of Stock\" : addToCartButtonText}\n            </button>\n            {showFavoriteButton && (\n              <button\n                className={`favorite-btn ${isFavorite ? \"is-favorite\" : \"\"}`}\n                onClick={handleToggleFavorite}\n                aria-label={isFavorite ? \"Remove from favorites\" : \"Add to favorites\"}\n              >\n                {isFavorite ? \"\\u2665\" : \"\\u2661\"}\n              </button>\n            )}\n          </div>\n\n          {/* Description */}\n          {product.description && (\n            <div className=\"product-description\">\n              <h3>Description</h3>\n              <div dangerouslySetInnerHTML={{ __html: product.description }} />\n            </div>\n          )}\n\n          {/* Product Attributes (e.g. ingredients, specs) */}\n          {isNotEmpty(attributes) && (\n            <div className=\"product-attributes\">\n              <h3>Details</h3>\n              {attributes.map((attr: any, i: number) => (\n                <div key={i} className=\"attribute-row\">\n                  <span className=\"attribute-name\">{attr.name}</span>\n                  <span className=\"attribute-value\">{attr.value}</span>\n                </div>\n              ))}\n            </div>\n          )}\n\n          {/* Bundle / Offer Products */}\n          {isNotEmpty(productGroups) && (\n            <div className=\"product-bundles\">\n              <h3>Frequently Bought Together</h3>\n              {productGroups.map((group: any, i: number) => (\n                <div key={i} className=\"bundle-group\">\n                  {group.title && <h4>{group.title}</h4>}\n                  <div className=\"bundle-items\">\n                    {group.products?.map((bp: any) => (\n                      <div key={bp.product?.id} className=\"bundle-item\">\n                        <span>{bp.product?.name}</span>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(ProductDetail);\n",
       "relatedFunctions": [
         "getSelectedProductVariant",
         "getDisplayedProductVariantTypes",
@@ -17003,7 +17003,7 @@
       "files": [
         {
           "filename": "index.tsx",
-          "content": "import { useState, useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  getSelectedProductVariant,\n  getDisplayedProductVariantTypes,\n  selectVariantValue,\n  hasProductVariantStock,\n  hasProductStock,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantFormattedSellPrice,\n  hasProductVariantDiscount,\n  getProductVariantDiscountPercentage,\n  getProductVariantFormattedDiscountAmount,\n  isAddToCartEnabled,\n  addItemToCart,\n  isFavoriteIkasProduct,\n  addIkasProductToFavorites,\n  removeIkasProductFromFavorites,\n  getProductVariantMainImage,\n  getDefaultSrc,\n  getThumbnailSrc,\n  getSrc,\n  createMediaSrcset,\n  getProductCategoryPath,\n  getIkasCategoryPathItemHref,\n  getIkasBrandHref,\n  getAttributeListValues,\n  hasBundleSettings,\n  initBundleProducts,\n  getDisplayedProductGroups,\n  isNotEmpty,\n  IkasImage,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction ProductDetail({\n  product,\n  showFavoriteButton = true,\n  addToCartButtonText = \"Add to Cart\",\n}: Props) {\n  const [selectedImageIndex, setSelectedImageIndex] = useState(0);\n  const [isAddingToCart, setIsAddingToCart] = useState(false);\n  const [quantity, setQuantity] = useState(1);\n\n  useEffect(() => {\n    if (product) {\n      const variant = getSelectedProductVariant(product);\n      if (variant && hasBundleSettings(variant)) {\n        initBundleProducts(product);\n      }\n    }\n  }, [product]);\n\n  if (!product) {\n    return null;\n  }\n\n  const selectedVariant = getSelectedProductVariant(product) as any;\n  const variantTypes = getDisplayedProductVariantTypes(product);\n  const inStock = hasProductStock(product) as unknown as boolean;\n  const variantInStock = hasProductVariantStock(selectedVariant) as unknown as boolean;\n  const canAddToCart = isAddToCartEnabled(product) as unknown as boolean;\n\n  // Pricing\n  const hasDiscount = hasProductVariantDiscount(selectedVariant) as unknown as boolean;\n  const finalPrice = getProductVariantFormattedFinalPrice(selectedVariant) as unknown as string;\n  const originalPrice = hasDiscount\n    ? (getProductVariantFormattedSellPrice(selectedVariant) as unknown as string)\n    : null;\n  const discountPercentage = hasDiscount\n    ? (getProductVariantDiscountPercentage(selectedVariant) as unknown as number)\n    : null;\n  const discountAmount = hasDiscount\n    ? (getProductVariantFormattedDiscountAmount(selectedVariant) as unknown as string)\n    : null;\n\n  // Breadcrumb\n  const categoryPath = getProductCategoryPath(product);\n\n  // Images — in production, dynavit uses IkasThemeSlider for image carousel\n  const mainImage = getProductVariantMainImage(selectedVariant) as unknown as IkasImage | undefined;\n  const variantImages = selectedVariant?.images;\n  const images: IkasImage[] = variantImages?.length\n    ? variantImages\n        .map((pi: any) => pi.image)\n        .filter((img: any): img is IkasImage => img != null)\n    : mainImage\n      ? [mainImage]\n      : [];\n  const currentImage = images[selectedImageIndex] ?? images[0];\n\n  // Favorites\n  const isFavorite = isFavoriteIkasProduct(product);\n\n  // Attributes\n  const attributes = product.attributeList\n    ? getAttributeListValues(product.attributeList)\n    : [];\n\n  // Bundle / Offer products\n  const hasBundle = selectedVariant ? (hasBundleSettings(selectedVariant) as unknown as boolean) : false;\n  const productGroups = hasBundle ? getDisplayedProductGroups(product) : [];\n\n  const handleAddToCart = async () => {\n    if (!canAddToCart || isAddingToCart) return;\n    setIsAddingToCart(true);\n    try {\n      const result = await addItemToCart(selectedVariant, product, quantity);\n      if (result.success) {\n        setQuantity(1);\n      }\n    } finally {\n      setIsAddingToCart(false);\n    }\n  };\n\n  const handleToggleFavorite = async () => {\n    if (isFavorite) {\n      await removeIkasProductFromFavorites(product);\n    } else {\n      await addIkasProductToFavorites(product);\n    }\n  };\n\n  return (\n    <section className=\"product-detail\">\n      {/* Breadcrumb */}\n      {isNotEmpty(categoryPath) && (\n        <nav className=\"product-breadcrumb\">\n          <a href=\"/\">Home</a>\n          {categoryPath.map((pathItem: any, i: number) => (\n            <span key={i}>\n              <span className=\"breadcrumb-sep\">/</span>\n              <a href={getIkasCategoryPathItemHref(pathItem)}>{pathItem.name}</a>\n            </span>\n          ))}\n          <span className=\"breadcrumb-sep\">/</span>\n          <span className=\"breadcrumb-current\">{product.name}</span>\n        </nav>\n      )}\n\n      <div className=\"product-detail-inner\">\n        {/* Image Gallery — production uses IkasThemeSlider for carousel */}\n        <div className=\"product-gallery\">\n          {currentImage && (\n            <img\n              className=\"product-main-image\"\n              src={getDefaultSrc(currentImage)}\n              srcSet={createMediaSrcset(currentImage)}\n              sizes=\"(max-width: 768px) 100vw, 50vw\"\n              alt={currentImage.altText || product.name}\n            />\n          )}\n          {images.length > 1 && (\n            <div className=\"product-thumbnails\">\n              {images.map((img, i) => (\n                <button\n                  key={img.id || i}\n                  className={`product-thumbnail-btn ${i === selectedImageIndex ? \"active\" : \"\"}`}\n                  onClick={() => setSelectedImageIndex(i)}\n                >\n                  <img src={getThumbnailSrc(img)} alt={`${product.name} ${i + 1}`} />\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* Product Info */}\n        <div className=\"product-info\">\n          {/* Brand with link */}\n          {product.brand && (\n            <a className=\"product-brand\" href={getIkasBrandHref(product.brand)}>\n              {product.brand.name}\n            </a>\n          )}\n          <h1 className=\"product-name\">{product.name}</h1>\n\n          {/* Average Rating */}\n          {product.averageRating > 0 && (\n            <div className=\"product-rating\">\n              {\"★\".repeat(Math.round(product.averageRating))}\n              {\"☆\".repeat(5 - Math.round(product.averageRating))}\n              <span className=\"product-rating-value\">({product.averageRating.toFixed(1)})</span>\n            </div>\n          )}\n\n          {/* Campaign badges */}\n          {isNotEmpty(product.campaigns) && (\n            <div className=\"product-campaigns\">\n              {product.campaigns.map((campaign: any) => (\n                <span key={campaign.id} className=\"product-campaign-badge\">\n                  {campaign.name}\n                </span>\n              ))}\n            </div>\n          )}\n\n          {/* Pricing */}\n          <div className=\"product-pricing\">\n            <span className=\"product-final-price\">{finalPrice}</span>\n            {originalPrice && <span className=\"product-original-price\">{originalPrice}</span>}\n            {discountPercentage != null && (\n              <span className=\"product-discount-badge\">-{discountPercentage}%</span>\n            )}\n            {discountAmount && (\n              <span className=\"product-savings\">Save {discountAmount}</span>\n            )}\n          </div>\n\n          {/* Variant Selection */}\n          {variantTypes.length > 0 && (\n            <div className=\"product-variants\">\n              {variantTypes.map((vt) => (\n                <div key={vt.variantType.id} className=\"variant-group\">\n                  <span className=\"variant-group-label\">{vt.variantType.name}</span>\n                  <div className=\"variant-options\">\n                    {vt.displayedVariantValues.map((dvv) => (\n                      <button\n                        key={dvv.variantValue.id}\n                        className={`variant-option-btn ${dvv.isSelected ? \"selected\" : \"\"}`}\n                        disabled={!dvv.hasStock}\n                        onClick={() => selectVariantValue(product, dvv.variantValue)}\n                      >\n                        {dvv.variantValue.name}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n\n          {/* Stock notice */}\n          {!inStock && <span className=\"out-of-stock-notice\">Out of Stock</span>}\n\n          {/* Quantity + Add to Cart */}\n          <div className=\"product-actions\">\n            <div className=\"product-quantity\">\n              <button onClick={() => setQuantity(Math.max(1, quantity - 1))}>-</button>\n              <span>{quantity}</span>\n              <button onClick={() => setQuantity(quantity + 1)}>+</button>\n            </div>\n            <button\n              className=\"add-to-cart-btn\"\n              disabled={!canAddToCart || isAddingToCart}\n              onClick={handleAddToCart}\n            >\n              {isAddingToCart ? \"Adding...\" : !variantInStock ? \"Out of Stock\" : addToCartButtonText}\n            </button>\n            {showFavoriteButton && (\n              <button\n                className={`favorite-btn ${isFavorite ? \"is-favorite\" : \"\"}`}\n                onClick={handleToggleFavorite}\n                aria-label={isFavorite ? \"Remove from favorites\" : \"Add to favorites\"}\n              >\n                {isFavorite ? \"\\u2665\" : \"\\u2661\"}\n              </button>\n            )}\n          </div>\n\n          {/* Description */}\n          {product.description && (\n            <div className=\"product-description\">\n              <h3>Description</h3>\n              <div dangerouslySetInnerHTML={{ __html: product.description }} />\n            </div>\n          )}\n\n          {/* Product Attributes (e.g. ingredients, specs) */}\n          {isNotEmpty(attributes) && (\n            <div className=\"product-attributes\">\n              <h3>Details</h3>\n              {attributes.map((attr: any, i: number) => (\n                <div key={i} className=\"attribute-row\">\n                  <span className=\"attribute-name\">{attr.name}</span>\n                  <span className=\"attribute-value\">{attr.value}</span>\n                </div>\n              ))}\n            </div>\n          )}\n\n          {/* Bundle / Offer Products */}\n          {isNotEmpty(productGroups) && (\n            <div className=\"product-bundles\">\n              <h3>Frequently Bought Together</h3>\n              {productGroups.map((group: any, i: number) => (\n                <div key={i} className=\"bundle-group\">\n                  {group.title && <h4>{group.title}</h4>}\n                  <div className=\"bundle-items\">\n                    {group.products?.map((bp: any) => (\n                      <div key={bp.product?.id} className=\"bundle-item\">\n                        <span>{bp.product?.name}</span>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(ProductDetail);\n"
+          "content": "import { useState, useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  getSelectedProductVariant,\n  getDisplayedProductVariantTypes,\n  selectVariantValue,\n  hasProductVariantStock,\n  hasProductStock,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantFormattedSellPrice,\n  hasProductVariantDiscount,\n  getProductVariantDiscountPercentage,\n  getProductVariantFormattedDiscountAmount,\n  isAddToCartEnabled,\n  addItemToCart,\n  isFavoriteIkasProduct,\n  addIkasProductToFavorites,\n  removeIkasProductFromFavorites,\n  getProductVariantMainImage,\n  getDefaultSrc,\n  getThumbnailSrc,\n  getSrc,\n  createMediaSrcset,\n  getProductCategoryPath,\n  getIkasCategoryPathItemHref,\n  getIkasBrandHref,\n  getAttributeListValues,\n  hasBundleSettings,\n  initBundleProducts,\n  getDisplayedProductGroups,\n  isNotEmpty,\n  IkasImage,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction ProductDetail({\n  product,\n  showFavoriteButton = true,\n  addToCartButtonText = \"Add to Cart\",\n}: Props) {\n  const [selectedImageIndex, setSelectedImageIndex] = useState(0);\n  const [isAddingToCart, setIsAddingToCart] = useState(false);\n  const [quantity, setQuantity] = useState(1);\n\n  useEffect(() => {\n    if (product) {\n      const variant = getSelectedProductVariant(product);\n      if (variant && hasBundleSettings(variant)) {\n        initBundleProducts(product);\n      }\n    }\n  }, [product]);\n\n  if (!product) {\n    return null;\n  }\n\n  const selectedVariant = getSelectedProductVariant(product) as any;\n  const variantTypes = getDisplayedProductVariantTypes(product);\n  const inStock = hasProductStock(product) as unknown as boolean;\n  const variantInStock = hasProductVariantStock(selectedVariant) as unknown as boolean;\n  const canAddToCart = isAddToCartEnabled(product) as unknown as boolean;\n\n  // Pricing\n  const hasDiscount = hasProductVariantDiscount(selectedVariant) as unknown as boolean;\n  const finalPrice = getProductVariantFormattedFinalPrice(selectedVariant) as unknown as string;\n  const originalPrice = hasDiscount\n    ? (getProductVariantFormattedSellPrice(selectedVariant) as unknown as string)\n    : null;\n  const discountPercentage = hasDiscount\n    ? (getProductVariantDiscountPercentage(selectedVariant) as unknown as number)\n    : null;\n  const discountAmount = hasDiscount\n    ? (getProductVariantFormattedDiscountAmount(selectedVariant) as unknown as string)\n    : null;\n\n  // Breadcrumb\n  const categoryPath = getProductCategoryPath(product);\n\n  // Images — in production, dynavit uses IkasThemeSlider for image carousel\n  const mainProductImage = getProductVariantMainImage(selectedVariant);\n  const mainImage = mainProductImage?.image;\n  const variantImages = selectedVariant?.images;\n  const images: IkasImage[] = variantImages?.length\n    ? variantImages\n        .map((pi: any) => pi.image)\n        .filter((img: any): img is IkasImage => img != null)\n    : mainImage\n      ? [mainImage]\n      : [];\n  const currentImage = images[selectedImageIndex] ?? images[0];\n\n  // Favorites\n  const isFavorite = isFavoriteIkasProduct(product);\n\n  // Attributes\n  const attributes = product.attributeList\n    ? getAttributeListValues(product.attributeList)\n    : [];\n\n  // Bundle / Offer products\n  const hasBundle = selectedVariant ? (hasBundleSettings(selectedVariant) as unknown as boolean) : false;\n  const productGroups = hasBundle ? getDisplayedProductGroups(product) : [];\n\n  const handleAddToCart = async () => {\n    if (!canAddToCart || isAddingToCart) return;\n    setIsAddingToCart(true);\n    try {\n      const result = await addItemToCart(selectedVariant, product, quantity);\n      if (result.success) {\n        setQuantity(1);\n      }\n    } finally {\n      setIsAddingToCart(false);\n    }\n  };\n\n  const handleToggleFavorite = async () => {\n    if (isFavorite) {\n      await removeIkasProductFromFavorites(product);\n    } else {\n      await addIkasProductToFavorites(product);\n    }\n  };\n\n  return (\n    <section className=\"product-detail\">\n      {/* Breadcrumb */}\n      {isNotEmpty(categoryPath) && (\n        <nav className=\"product-breadcrumb\">\n          <a href=\"/\">Home</a>\n          {categoryPath.map((pathItem: any, i: number) => (\n            <span key={i}>\n              <span className=\"breadcrumb-sep\">/</span>\n              <a href={getIkasCategoryPathItemHref(pathItem)}>{pathItem.name}</a>\n            </span>\n          ))}\n          <span className=\"breadcrumb-sep\">/</span>\n          <span className=\"breadcrumb-current\">{product.name}</span>\n        </nav>\n      )}\n\n      <div className=\"product-detail-inner\">\n        {/* Image Gallery — production uses IkasThemeSlider for carousel */}\n        <div className=\"product-gallery\">\n          {currentImage && (\n            <img\n              className=\"product-main-image\"\n              src={getDefaultSrc(currentImage)}\n              srcSet={createMediaSrcset(currentImage)}\n              sizes=\"(max-width: 768px) 100vw, 50vw\"\n              alt={currentImage.altText || product.name}\n            />\n          )}\n          {images.length > 1 && (\n            <div className=\"product-thumbnails\">\n              {images.map((img, i) => (\n                <button\n                  key={img.id || i}\n                  className={`product-thumbnail-btn ${i === selectedImageIndex ? \"active\" : \"\"}`}\n                  onClick={() => setSelectedImageIndex(i)}\n                >\n                  <img src={getThumbnailSrc(img)} alt={`${product.name} ${i + 1}`} />\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* Product Info */}\n        <div className=\"product-info\">\n          {/* Brand with link */}\n          {product.brand && (\n            <a className=\"product-brand\" href={getIkasBrandHref(product.brand)}>\n              {product.brand.name}\n            </a>\n          )}\n          <h1 className=\"product-name\">{product.name}</h1>\n\n          {/* Average Rating */}\n          {product.averageRating > 0 && (\n            <div className=\"product-rating\">\n              {\"★\".repeat(Math.round(product.averageRating))}\n              {\"☆\".repeat(5 - Math.round(product.averageRating))}\n              <span className=\"product-rating-value\">({product.averageRating.toFixed(1)})</span>\n            </div>\n          )}\n\n          {/* Campaign badges */}\n          {isNotEmpty(product.campaigns) && (\n            <div className=\"product-campaigns\">\n              {product.campaigns.map((campaign: any) => (\n                <span key={campaign.id} className=\"product-campaign-badge\">\n                  {campaign.name}\n                </span>\n              ))}\n            </div>\n          )}\n\n          {/* Pricing */}\n          <div className=\"product-pricing\">\n            <span className=\"product-final-price\">{finalPrice}</span>\n            {originalPrice && <span className=\"product-original-price\">{originalPrice}</span>}\n            {discountPercentage != null && (\n              <span className=\"product-discount-badge\">-{discountPercentage}%</span>\n            )}\n            {discountAmount && (\n              <span className=\"product-savings\">Save {discountAmount}</span>\n            )}\n          </div>\n\n          {/* Variant Selection */}\n          {variantTypes.length > 0 && (\n            <div className=\"product-variants\">\n              {variantTypes.map((vt) => (\n                <div key={vt.variantType.id} className=\"variant-group\">\n                  <span className=\"variant-group-label\">{vt.variantType.name}</span>\n                  <div className=\"variant-options\">\n                    {vt.displayedVariantValues.map((dvv) => (\n                      <button\n                        key={dvv.variantValue.id}\n                        className={`variant-option-btn ${dvv.isSelected ? \"selected\" : \"\"}`}\n                        disabled={!dvv.hasStock}\n                        onClick={() => selectVariantValue(product, dvv.variantValue)}\n                      >\n                        {dvv.variantValue.name}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n\n          {/* Stock notice */}\n          {!inStock && <span className=\"out-of-stock-notice\">Out of Stock</span>}\n\n          {/* Quantity + Add to Cart */}\n          <div className=\"product-actions\">\n            <div className=\"product-quantity\">\n              <button onClick={() => setQuantity(Math.max(1, quantity - 1))}>-</button>\n              <span>{quantity}</span>\n              <button onClick={() => setQuantity(quantity + 1)}>+</button>\n            </div>\n            <button\n              className=\"add-to-cart-btn\"\n              disabled={!canAddToCart || isAddingToCart}\n              onClick={handleAddToCart}\n            >\n              {isAddingToCart ? \"Adding...\" : !variantInStock ? \"Out of Stock\" : addToCartButtonText}\n            </button>\n            {showFavoriteButton && (\n              <button\n                className={`favorite-btn ${isFavorite ? \"is-favorite\" : \"\"}`}\n                onClick={handleToggleFavorite}\n                aria-label={isFavorite ? \"Remove from favorites\" : \"Add to favorites\"}\n              >\n                {isFavorite ? \"\\u2665\" : \"\\u2661\"}\n              </button>\n            )}\n          </div>\n\n          {/* Description */}\n          {product.description && (\n            <div className=\"product-description\">\n              <h3>Description</h3>\n              <div dangerouslySetInnerHTML={{ __html: product.description }} />\n            </div>\n          )}\n\n          {/* Product Attributes (e.g. ingredients, specs) */}\n          {isNotEmpty(attributes) && (\n            <div className=\"product-attributes\">\n              <h3>Details</h3>\n              {attributes.map((attr: any, i: number) => (\n                <div key={i} className=\"attribute-row\">\n                  <span className=\"attribute-name\">{attr.name}</span>\n                  <span className=\"attribute-value\">{attr.value}</span>\n                </div>\n              ))}\n            </div>\n          )}\n\n          {/* Bundle / Offer Products */}\n          {isNotEmpty(productGroups) && (\n            <div className=\"product-bundles\">\n              <h3>Frequently Bought Together</h3>\n              {productGroups.map((group: any, i: number) => (\n                <div key={i} className=\"bundle-group\">\n                  {group.title && <h4>{group.title}</h4>}\n                  <div className=\"bundle-items\">\n                    {group.products?.map((bp: any) => (\n                      <div key={bp.product?.id} className=\"bundle-item\">\n                        <span>{bp.product?.name}</span>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(ProductDetail);\n"
         },
         {
           "filename": "types.ts",
@@ -17040,7 +17040,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. Uses observer for reactive updates.",
-      "code": "import { useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  IkasProductList,\n  IkasImage,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  getProductListFilterCategories,\n  onFilterCategoryClick,\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\nfunction 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 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 — mobile uses IkasThemeOverlay */}\n          {showFilters && filterCategories.length > 0 && (\n            <aside className=\"product-list-filters\">\n              {filterCategories.map((category) => {\n                const values = getFilterDisplayedValues(category);\n                return (\n                  <div key={category.name} className=\"filter-group\">\n                    <h3 className=\"filter-group-title\">{category.name}</h3>\n                    <div className=\"filter-values\">\n                      {values.map((filterValue) => (\n                        <label key={filterValue.name} className=\"filter-value\">\n                          <input\n                            type=\"checkbox\"\n                            checked={filterValue.isSelected}\n                            onChange={() =>\n                              handleFilterValueClick(productList, category, filterValue)\n                            }\n                          />\n                          <span>{filterValue.name}</span>\n                          {filterValue.count != null && (\n                            <span className=\"filter-count\">({filterValue.count})</span>\n                          )}\n                        </label>\n                      ))}\n                    </div>\n                    {/* Category-level filter click */}\n                    {category.isSelected !== undefined && (\n                      <button\n                        className=\"filter-category-btn\"\n                        onClick={() => onFilterCategoryClick(productList, category as any, true)}\n                      >\n                        {category.isSelected ? \"Clear\" : \"Apply\"}\n                      </button>\n                    )}\n                  </div>\n                );\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 image = getProductVariantMainImage(variant) as unknown as IkasImage | 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\nexport default observer(ProductListSection);\n",
+      "code": "import { useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  IkasProductList,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  getProductListFilterCategories,\n  onFilterCategoryClick,\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\nfunction 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 — mobile uses IkasThemeOverlay */}\n          {showFilters && filterCategories.length > 0 && (\n            <aside className=\"product-list-filters\">\n              {filterCategories.map((category) => {\n                const values = getFilterDisplayedValues(category);\n                return (\n                  <div key={category.name} className=\"filter-group\">\n                    <h3 className=\"filter-group-title\">{category.name}</h3>\n                    <div className=\"filter-values\">\n                      {values.map((filterValue) => (\n                        <label key={filterValue.name} className=\"filter-value\">\n                          <input\n                            type=\"checkbox\"\n                            checked={filterValue.isSelected}\n                            onChange={() =>\n                              handleFilterValueClick(productList, category, filterValue)\n                            }\n                          />\n                          <span>{filterValue.name}</span>\n                          {filterValue.count != null && (\n                            <span className=\"filter-count\">({filterValue.count})</span>\n                          )}\n                        </label>\n                      ))}\n                    </div>\n                    {/* Category-level filter click */}\n                    {category.isSelected !== undefined && (\n                      <button\n                        className=\"filter-category-btn\"\n                        onClick={() => onFilterCategoryClick(productList, category as any, true)}\n                      >\n                        {category.isSelected ? \"Clear\" : \"Apply\"}\n                      </button>\n                    )}\n                  </div>\n                );\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\nexport default observer(ProductListSection);\n",
       "relatedFunctions": [
         "getSelectedProductVariant",
         "getProductVariantFormattedFinalPrice",
@@ -17072,7 +17072,7 @@
       "files": [
         {
           "filename": "index.tsx",
-          "content": "import { useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  IkasProductList,\n  IkasImage,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  getProductListFilterCategories,\n  onFilterCategoryClick,\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\nfunction 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 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 — mobile uses IkasThemeOverlay */}\n          {showFilters && filterCategories.length > 0 && (\n            <aside className=\"product-list-filters\">\n              {filterCategories.map((category) => {\n                const values = getFilterDisplayedValues(category);\n                return (\n                  <div key={category.name} className=\"filter-group\">\n                    <h3 className=\"filter-group-title\">{category.name}</h3>\n                    <div className=\"filter-values\">\n                      {values.map((filterValue) => (\n                        <label key={filterValue.name} className=\"filter-value\">\n                          <input\n                            type=\"checkbox\"\n                            checked={filterValue.isSelected}\n                            onChange={() =>\n                              handleFilterValueClick(productList, category, filterValue)\n                            }\n                          />\n                          <span>{filterValue.name}</span>\n                          {filterValue.count != null && (\n                            <span className=\"filter-count\">({filterValue.count})</span>\n                          )}\n                        </label>\n                      ))}\n                    </div>\n                    {/* Category-level filter click */}\n                    {category.isSelected !== undefined && (\n                      <button\n                        className=\"filter-category-btn\"\n                        onClick={() => onFilterCategoryClick(productList, category as any, true)}\n                      >\n                        {category.isSelected ? \"Clear\" : \"Apply\"}\n                      </button>\n                    )}\n                  </div>\n                );\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 image = getProductVariantMainImage(variant) as unknown as IkasImage | 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\nexport default observer(ProductListSection);\n"
+          "content": "import { useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  IkasProductList,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  getProductListFilterCategories,\n  onFilterCategoryClick,\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\nfunction 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 — mobile uses IkasThemeOverlay */}\n          {showFilters && filterCategories.length > 0 && (\n            <aside className=\"product-list-filters\">\n              {filterCategories.map((category) => {\n                const values = getFilterDisplayedValues(category);\n                return (\n                  <div key={category.name} className=\"filter-group\">\n                    <h3 className=\"filter-group-title\">{category.name}</h3>\n                    <div className=\"filter-values\">\n                      {values.map((filterValue) => (\n                        <label key={filterValue.name} className=\"filter-value\">\n                          <input\n                            type=\"checkbox\"\n                            checked={filterValue.isSelected}\n                            onChange={() =>\n                              handleFilterValueClick(productList, category, filterValue)\n                            }\n                          />\n                          <span>{filterValue.name}</span>\n                          {filterValue.count != null && (\n                            <span className=\"filter-count\">({filterValue.count})</span>\n                          )}\n                        </label>\n                      ))}\n                    </div>\n                    {/* Category-level filter click */}\n                    {category.isSelected !== undefined && (\n                      <button\n                        className=\"filter-category-btn\"\n                        onClick={() => onFilterCategoryClick(productList, category as any, true)}\n                      >\n                        {category.isSelected ? \"Clear\" : \"Apply\"}\n                      </button>\n                    )}\n                  </div>\n                );\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\nexport default observer(ProductListSection);\n"
         },
         {
           "filename": "types.ts",
@@ -17213,7 +17213,7 @@
       "id": "variant-selection",
       "title": "Variant Selection",
       "description": "Display variant options with type-specific rendering: color swatches (isColorVariantValue), image thumbnails (isImageVariantValue + getIkasVariantValueThumbnailImage), or text buttons (isTextVariantValue). Uses selectVariantValue with disableRoute option.",
-      "code": "import { observer } from \"@ikas/component-utils\";\nimport {\n  getDisplayedProductVariantTypes,\n  selectVariantValue,\n  isColorVariantValue,\n  isImageVariantValue,\n  isTextVariantValue,\n  getIkasVariantValueThumbnailImage,\n  getDefaultSrc,\n  isNotEmpty,\n  IkasProduct,\n  IkasImage,\n} from \"@ikas/bp-storefront\";\n\nfunction VariantSelector({ product }: { product: IkasProduct }) {\n  const variantTypes = getDisplayedProductVariantTypes(product);\n\n  if (!isNotEmpty(variantTypes)) return null;\n\n  return (\n    <div className=\"variant-selector\">\n      {variantTypes.map((vt) => (\n        <div key={vt.variantType.id} className=\"variant-group\">\n          <label className=\"variant-group-label\">{vt.variantType.name}</label>\n          <div className=\"variant-options\">\n            {vt.displayedVariantValues.map((dvv) => {\n              const vv = dvv.variantValue;\n\n              // Color variant — show color swatch\n              if (isColorVariantValue(vv)) {\n                return (\n                  <button\n                    key={vv.id}\n                    className={`variant-color-btn ${dvv.isSelected ? \"selected\" : \"\"}`}\n                    disabled={!dvv.hasStock}\n                    onClick={() => selectVariantValue(product, vv, { disableRoute: true })}\n                    title={vv.name}\n                    style={{\n                      backgroundColor: vv.colorCode || \"#ccc\",\n                    }}\n                  />\n                );\n              }\n\n              // Image variant — show thumbnail image\n              if (isImageVariantValue(vv)) {\n                const thumbImage = getIkasVariantValueThumbnailImage(vv) as unknown as IkasImage | undefined;\n                return (\n                  <button\n                    key={vv.id}\n                    className={`variant-image-btn ${dvv.isSelected ? \"selected\" : \"\"}`}\n                    disabled={!dvv.hasStock}\n                    onClick={() => selectVariantValue(product, vv, { disableRoute: true })}\n                    title={vv.name}\n                  >\n                    {thumbImage && (\n                      <img src={getDefaultSrc(thumbImage)} alt={vv.name} />\n                    )}\n                  </button>\n                );\n              }\n\n              // Text variant (default) — show text button\n              return (\n                <button\n                  key={vv.id}\n                  className={`variant-text-btn ${dvv.isSelected ? \"selected\" : \"\"}`}\n                  disabled={!dvv.hasStock}\n                  onClick={() => selectVariantValue(product, vv, { disableRoute: true })}\n                >\n                  {vv.name}\n                </button>\n              );\n            })}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport default observer(VariantSelector);\n",
+      "code": "import { observer } from \"@ikas/component-utils\";\nimport {\n  getDisplayedProductVariantTypes,\n  selectVariantValue,\n  isColorVariantValue,\n  isImageVariantValue,\n  isTextVariantValue,\n  getIkasVariantValueThumbnailImage,\n  getDefaultSrc,\n  isNotEmpty,\n  IkasProduct,\n} from \"@ikas/bp-storefront\";\n\nfunction VariantSelector({ product }: { product: IkasProduct }) {\n  const variantTypes = getDisplayedProductVariantTypes(product);\n\n  if (!isNotEmpty(variantTypes)) return null;\n\n  return (\n    <div className=\"variant-selector\">\n      {variantTypes.map((vt) => (\n        <div key={vt.variantType.id} className=\"variant-group\">\n          <label className=\"variant-group-label\">{vt.variantType.name}</label>\n          <div className=\"variant-options\">\n            {vt.displayedVariantValues.map((dvv) => {\n              const vv = dvv.variantValue;\n\n              // Color variant — show color swatch\n              if (isColorVariantValue(vv)) {\n                return (\n                  <button\n                    key={vv.id}\n                    className={`variant-color-btn ${dvv.isSelected ? \"selected\" : \"\"}`}\n                    disabled={!dvv.hasStock}\n                    onClick={() => selectVariantValue(product, vv, { disableRoute: true })}\n                    title={vv.name}\n                    style={{\n                      backgroundColor: vv.colorCode || \"#ccc\",\n                    }}\n                  />\n                );\n              }\n\n              // Image variant — show thumbnail image\n              if (isImageVariantValue(vv)) {\n                const thumbImage = getIkasVariantValueThumbnailImage(vv);\n                return (\n                  <button\n                    key={vv.id}\n                    className={`variant-image-btn ${dvv.isSelected ? \"selected\" : \"\"}`}\n                    disabled={!dvv.hasStock}\n                    onClick={() => selectVariantValue(product, vv, { disableRoute: true })}\n                    title={vv.name}\n                  >\n                    {thumbImage && (\n                      <img src={getDefaultSrc(thumbImage)} alt={vv.name} />\n                    )}\n                  </button>\n                );\n              }\n\n              // Text variant (default) — show text button\n              return (\n                <button\n                  key={vv.id}\n                  className={`variant-text-btn ${dvv.isSelected ? \"selected\" : \"\"}`}\n                  disabled={!dvv.hasStock}\n                  onClick={() => selectVariantValue(product, vv, { disableRoute: true })}\n                >\n                  {vv.name}\n                </button>\n              );\n            })}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport default observer(VariantSelector);\n",
       "relatedFunctions": [
         "getDisplayedProductVariantTypes",
         "selectVariantValue",

package/data/storefront-types.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-02-18T13:48:25.686Z",
+  "generatedAt": "2026-02-19T07:52:57.995Z",
   "types": [
     {
       "name": "IkasProductAttributeDetail",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/code-components-mcp",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "description": "MCP server for ikas code components documentation",
   "type": "module",
   "main": "dist/index.js",