@ikas/code-components-mcp 0.31.0 → 0.32.0

package/data/framework.json

@@ -226,8 +226,8 @@
     },
     "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 {\n  IkasProductList,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\n\n// In your 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 |",
+      "description": "Category pages, product filtering with display-type-aware rendering (swatch, number range, checkbox), 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 {\n  IkasProductList,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\n\n// In your 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.). Each filter has a `displayType` that determines how it should be rendered. **Always check the display type and render accordingly** — do not render all filters as checkboxes.\n\n#### Display Types\n\n- **BOX / LIST** — Standard checkbox filters (size, brand, etc.)\n- **SWATCH** — Color/pattern swatches with `fv.colorCode` or thumbnail images\n- **NUMBER_RANGE_LIST** — Predefined price/number range buttons (e.g., $0-$50, $50-$100)\n\n#### Universal Data Pattern\n\nThe data flow is the same for all display types:\n- `getFilterDisplayedValues(filter)` — get sorted filter values (works for ALL types)\n- `handleFilterValueClick(productList, filter, filterValue)` — toggle selection + auto-refetch (works for BOX/LIST/SWATCH)\n- `handleNumberRangeOptionClick(productList, filter, option)` — toggle a range option + auto-refetch (for NUMBER_RANGE_LIST)\n\n#### Imports\n\n```tsx\nimport {\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  handleNumberRangeOptionClick,\n  getProductListFilterCategories,\n  isBoxFilter,\n  isListFilter,\n  isSwatchFilter,\n  getIkasFilterThumbnailImage,\n  getDefaultSrc,\n  IkasProductList,\n  IkasProductFilter,\n} from \"@ikas/bp-storefront\";\n```\n\n#### Display-Type-Aware Rendering\n\n```tsx\nconst filters = productList.filters ?? [];\n\n{filters.map((filter) => {\n  const values = getFilterDisplayedValues(filter);\n  if (values.length === 0 && !filter.numberRangeListOptions?.length) return null;\n\n  return (\n    <div key={filter.id}>\n      <h4>{filter.name}</h4>\n\n      {/* SWATCH: render color circles / thumbnail images */}\n      {isSwatchFilter(filter) ? (\n        <div className=\"swatch-grid\">\n          {values.map((fv) => {\n            const thumbnail = getIkasFilterThumbnailImage(fv);\n            return (\n              <button\n                key={fv.name}\n                className={fv.isSelected ? \"swatch selected\" : \"swatch\"}\n                onClick={() => handleFilterValueClick(productList, filter, fv)}\n                title={fv.name}\n              >\n                {thumbnail ? (\n                  <img src={getDefaultSrc(thumbnail)} alt={fv.name} />\n                ) : (\n                  <span\n                    className=\"swatch-color\"\n                    style={{ backgroundColor: fv.colorCode ?? \"#ccc\" }}\n                  />\n                )}\n              </button>\n            );\n          })}\n        </div>\n      ) : (\n        /* BOX / LIST: render checkboxes */\n        values.map((fv) => (\n          <label key={fv.name}>\n            <input\n              type=\"checkbox\"\n              checked={fv.isSelected}\n              onChange={() => handleFilterValueClick(productList, filter, fv)}\n            />\n            {fv.name} {fv.count != null && `(${fv.count})`}\n          </label>\n        ))\n      )}\n\n      {/* NUMBER_RANGE_LIST: render predefined range buttons */}\n      {filter.numberRangeListOptions?.map((option) => (\n        <button\n          key={`${option.from}-${option.to}`}\n          className={option.isSelected ? \"range-btn selected\" : \"range-btn\"}\n          onClick={() => handleNumberRangeOptionClick(productList, filter, option)}\n        >\n          {option.from} - {option.to ?? \"+\"}\n        </button>\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(filter)` | Get sorted filter values — works for ALL display types |\n| `handleFilterValueClick(list, filter, value)` | Toggle a filter value + auto-refetch (BOX/LIST/SWATCH) |\n| `handleNumberRangeOptionClick(list, filter, option)` | Toggle a range option + auto-refetch (NUMBER_RANGE_LIST) |\n| `isBoxFilter(filter)` | Check if filter displayType is BOX |\n| `isListFilter(filter)` | Check if filter displayType is LIST |\n| `isSwatchFilter(filter)` | Check if filter displayType is SWATCH |\n| `isCustomValueFilter(filter)` | Check if filter displayType is CUSTOM_VALUE |\n| `getIkasFilterThumbnailImage(fv)` | Get swatch thumbnail IkasImage from 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",
@@ -235,7 +235,9 @@
         "pagination",
         "category",
         "search",
-        "grid"
+        "grid",
+        "swatch",
+        "filter-display-type"
       ]
     },
     "cart-patterns": {

package/data/storefront-api.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-02-19T09:48:49.579Z",
+  "generatedAt": "2026-02-19T17:37:32.598Z",
   "functions": [
     {
       "name": "apiListBlog",
@@ -17022,13 +17022,20 @@
     {
       "id": "product-filtering",
       "title": "Product List Filtering",
-      "description": "Display and interact with product filters using handleFilterValueClick (toggling deselects), category-level filtering with onFilterCategoryClick, and getProductListFilterCategories for filter categories.",
-      "code": "import {\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  getProductListFilterCategories,\n  onFilterCategoryClick,\n  IkasProductList,\n  IkasProductFilter,\n} from \"@ikas/bp-storefront\";\n\nexport default function ProductFilter({\n  productList,\n  filter,\n}: {\n  productList: IkasProductList;\n  filter: IkasProductFilter;\n}) {\n  const values = getFilterDisplayedValues(filter);\n  const filterCategories = getProductListFilterCategories(productList);\n\n  return (\n    <div>\n      <h3>{filter.name}</h3>\n\n      {/* Filter values — toggling a selected value deselects it */}\n      <ul>\n        {values.map((v) => (\n          <li key={v.name}>\n            <label>\n              <input\n                type=\"checkbox\"\n                checked={v.isSelected ?? false}\n                onChange={() => handleFilterValueClick(productList, filter, v)}\n              />\n              {v.name}\n            </label>\n          </li>\n        ))}\n      </ul>\n\n      {/* Category-level filtering */}\n      {filterCategories.length > 0 && (\n        <div style={{ marginTop: 16 }}>\n          <h4>Categories</h4>\n          {filterCategories.map((cat) => (\n            <button\n              key={cat.name}\n              style={{\n                fontWeight: cat.isSelected ? \"bold\" : \"normal\",\n                marginRight: 8,\n              }}\n              onClick={() => onFilterCategoryClick(productList, cat, true)}\n            >\n              {cat.name}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n",
+      "description": "Display-type-aware product filtering: checkboxes for BOX/LIST filters, color swatches for SWATCH filters (using getIkasFilterThumbnailImage and fv.colorCode), range buttons for NUMBER_RANGE_LIST filters (using handleNumberRangeOptionClick), and category-level filtering with onFilterCategoryClick.",
+      "code": "import {\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  handleNumberRangeOptionClick,\n  getProductListFilterCategories,\n  onFilterCategoryClick,\n  isSwatchFilter,\n  getIkasFilterThumbnailImage,\n  getDefaultSrc,\n  IkasProductList,\n  IkasProductFilter,\n} from \"@ikas/bp-storefront\";\n\n/**\n * Display-type-aware product filter.\n *\n * Data flow is the same for every display type:\n *   getFilterDisplayedValues(filter)  → get sorted values\n *   handleFilterValueClick(list, filter, fv) → toggle + refetch\n *\n * Only the **visual rendering** changes based on displayType:\n *   BOX / LIST       → checkboxes\n *   SWATCH           → color circles or thumbnail images\n *   NUMBER_RANGE_LIST → predefined range buttons\n */\nexport default function ProductFilter({\n  productList,\n  filter,\n}: {\n  productList: IkasProductList;\n  filter: IkasProductFilter;\n}) {\n  const values = getFilterDisplayedValues(filter);\n  const filterCategories = getProductListFilterCategories(productList);\n\n  return (\n    <div>\n      <h3>{filter.name}</h3>\n\n      {/* SWATCH: render color circles / thumbnail images */}\n      {isSwatchFilter(filter) ? (\n        <div style={{ display: \"flex\", gap: 8, flexWrap: \"wrap\" }}>\n          {values.map((fv) => {\n            const thumbnail = getIkasFilterThumbnailImage(fv);\n            return (\n              <button\n                key={fv.name}\n                onClick={() => handleFilterValueClick(productList, filter, fv)}\n                title={fv.name}\n                style={{\n                  width: 32,\n                  height: 32,\n                  borderRadius: \"50%\",\n                  border: fv.isSelected ? \"2px solid #000\" : \"2px solid #ddd\",\n                  padding: 0,\n                  cursor: \"pointer\",\n                  overflow: \"hidden\",\n                }}\n              >\n                {thumbnail ? (\n                  <img\n                    src={getDefaultSrc(thumbnail)}\n                    alt={fv.name}\n                    style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }}\n                  />\n                ) : (\n                  <span\n                    style={{\n                      display: \"block\",\n                      width: \"100%\",\n                      height: \"100%\",\n                      backgroundColor: fv.colorCode ?? \"#ccc\",\n                      borderRadius: \"50%\",\n                    }}\n                  />\n                )}\n              </button>\n            );\n          })}\n        </div>\n      ) : (\n        /* BOX / LIST: render checkboxes (default) */\n        <ul>\n          {values.map((fv) => (\n            <li key={fv.name}>\n              <label>\n                <input\n                  type=\"checkbox\"\n                  checked={fv.isSelected ?? false}\n                  onChange={() =>\n                    handleFilterValueClick(productList, filter, fv)\n                  }\n                />\n                {fv.name}\n                {fv.count != null && ` (${fv.count})`}\n              </label>\n            </li>\n          ))}\n        </ul>\n      )}\n\n      {/* NUMBER_RANGE_LIST: render predefined range buttons */}\n      {filter.numberRangeListOptions?.map((option) => (\n        <button\n          key={`${option.from}-${option.to}`}\n          style={{\n            fontWeight: option.isSelected ? \"bold\" : \"normal\",\n            marginRight: 8,\n          }}\n          onClick={() =>\n            handleNumberRangeOptionClick(productList, filter, option)\n          }\n        >\n          {option.from} - {option.to ?? \"+\"}\n        </button>\n      ))}\n\n      {/* Category-level filtering */}\n      {filterCategories.length > 0 && (\n        <div style={{ marginTop: 16 }}>\n          <h4>Categories</h4>\n          {filterCategories.map((cat) => (\n            <button\n              key={cat.name}\n              style={{\n                fontWeight: cat.isSelected ? \"bold\" : \"normal\",\n                marginRight: 8,\n              }}\n              onClick={() => onFilterCategoryClick(productList, cat, true)}\n            >\n              {cat.name}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n",
       "relatedFunctions": [
         "getFilterDisplayedValues",
         "handleFilterValueClick",
+        "handleNumberRangeOptionClick",
         "getProductListFilterCategories",
-        "onFilterCategoryClick"
+        "onFilterCategoryClick",
+        "isBoxFilter",
+        "isListFilter",
+        "isSwatchFilter",
+        "isCustomValueFilter",
+        "getIkasFilterThumbnailImage",
+        "getDefaultSrc"
       ],
       "categories": [
         "ProductFilter",
@@ -17040,7 +17047,7 @@
       "id": "product-list-section",
       "title": "Product List Section (Complete)",
       "description": "Complete product list section with category breadcrumb (getCategoryPath + getIkasCategoryHref), filter sidebar with handleFilterValueClick and onFilterCategoryClick, sort via setSortType (not direct mutation), search via searchProductList, product grid, and pagination with setProductListVisiblePage. Data is automatically reactive in root components via autorun().",
-      "code": "import { useState } from \"preact/hooks\";\nimport {\n  IkasProductList,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  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\nexport default function ProductListSection({\n  productList,\n  title = \"Products\",\n  showFilters = true,\n}: Props) {\n  const [searchKeyword, setSearchKeyword] = useState(\"\");\n\n  if (!productList) return null;\n\n  const products = productList.products ?? [];\n  const filterCategories = getProductListFilterCategories(productList);\n  const sortOptions = getProductListSortOptions(productList);\n  const hasNext = hasProductListNextPage(productList);\n  const hasPrev = hasProductListPrevPage(productList);\n\n  // Category breadcrumb path\n  const category = productList.category;\n  const categoryPath = category ? getCategoryPath(category) : [];\n\n  const handleSort = (value: string) => {\n    const selected = sortOptions.find((opt) => opt.value === value);\n    if (selected) {\n      setSortType(productList, selected.value as any);\n    }\n  };\n\n  const handleSearch = (keyword: string) => {\n    setSearchKeyword(keyword);\n    searchProductList(productList, keyword);\n  };\n\n  return (\n    <section className=\"product-list-section\">\n      <div className=\"product-list-inner\">\n        {/* Category Breadcrumb */}\n        {categoryPath.length > 0 && (\n          <nav className=\"product-list-breadcrumb\">\n            <a href=\"/\">Home</a>\n            {categoryPath.map((cat: any, i: number) => (\n              <span key={i}>\n                <span className=\"breadcrumb-sep\"> / </span>\n                <a href={getIkasCategoryHref(cat)}>{cat.name}</a>\n              </span>\n            ))}\n          </nav>\n        )}\n\n        <div className=\"product-list-header\">\n          <h1 className=\"product-list-title\">\n            {category?.name || title}\n            {category?.description && (\n              <p className=\"product-list-description\">{category.description}</p>\n            )}\n          </h1>\n\n          <div className=\"product-list-controls\">\n            {/* Search */}\n            <input\n              className=\"product-list-search\"\n              type=\"text\"\n              placeholder=\"Search products...\"\n              value={searchKeyword}\n              onInput={(e) => handleSearch((e.target as HTMLInputElement).value)}\n            />\n\n            {/* Sort — use setSortType instead of direct mutation */}\n            {sortOptions.length > 0 && (\n              <select\n                className=\"product-list-sort\"\n                value={sortOptions.find((o) => o.isSelected)?.value ?? \"\"}\n                onChange={(e) => handleSort((e.target as HTMLSelectElement).value)}\n              >\n                {sortOptions.map((opt) => (\n                  <option key={opt.value} value={opt.value}>{opt.label}</option>\n                ))}\n              </select>\n            )}\n          </div>\n        </div>\n\n        <div className=\"product-list-layout\">\n          {/* Filter Sidebar — 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\n",
+      "code": "import { useState } from \"preact/hooks\";\nimport {\n  IkasProductList,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  handleNumberRangeOptionClick,\n  getProductListFilterCategories,\n  onFilterCategoryClick,\n  isSwatchFilter,\n  getIkasFilterThumbnailImage,\n  getProductListSortOptions,\n  setSortType,\n  hasProductListNextPage,\n  hasProductListPrevPage,\n  getProductListNextPage,\n  getProductListPrevPage,\n  setProductListVisiblePage,\n  searchProductList,\n  getCategoryPath,\n  getIkasCategoryHref,\n  isEmpty,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport default function ProductListSection({\n  productList,\n  title = \"Products\",\n  showFilters = true,\n}: Props) {\n  const [searchKeyword, setSearchKeyword] = useState(\"\");\n\n  if (!productList) return null;\n\n  const products = productList.products ?? [];\n  const filterCategories = getProductListFilterCategories(productList);\n  const sortOptions = getProductListSortOptions(productList);\n  const hasNext = hasProductListNextPage(productList);\n  const hasPrev = hasProductListPrevPage(productList);\n\n  // Category breadcrumb path\n  const category = productList.category;\n  const categoryPath = category ? getCategoryPath(category) : [];\n\n  const handleSort = (value: string) => {\n    const selected = sortOptions.find((opt) => opt.value === value);\n    if (selected) {\n      setSortType(productList, selected.value as any);\n    }\n  };\n\n  const handleSearch = (keyword: string) => {\n    setSearchKeyword(keyword);\n    searchProductList(productList, keyword);\n  };\n\n  return (\n    <section className=\"product-list-section\">\n      <div className=\"product-list-inner\">\n        {/* Category Breadcrumb */}\n        {categoryPath.length > 0 && (\n          <nav className=\"product-list-breadcrumb\">\n            <a href=\"/\">Home</a>\n            {categoryPath.map((cat: any, i: number) => (\n              <span key={i}>\n                <span className=\"breadcrumb-sep\"> / </span>\n                <a href={getIkasCategoryHref(cat)}>{cat.name}</a>\n              </span>\n            ))}\n          </nav>\n        )}\n\n        <div className=\"product-list-header\">\n          <h1 className=\"product-list-title\">\n            {category?.name || title}\n            {category?.description && (\n              <p className=\"product-list-description\">{category.description}</p>\n            )}\n          </h1>\n\n          <div className=\"product-list-controls\">\n            {/* Search */}\n            <input\n              className=\"product-list-search\"\n              type=\"text\"\n              placeholder=\"Search products...\"\n              value={searchKeyword}\n              onInput={(e) => handleSearch((e.target as HTMLInputElement).value)}\n            />\n\n            {/* Sort — use setSortType instead of direct mutation */}\n            {sortOptions.length > 0 && (\n              <select\n                className=\"product-list-sort\"\n                value={sortOptions.find((o) => o.isSelected)?.value ?? \"\"}\n                onChange={(e) => handleSort((e.target as HTMLSelectElement).value)}\n              >\n                {sortOptions.map((opt) => (\n                  <option key={opt.value} value={opt.value}>{opt.label}</option>\n                ))}\n              </select>\n            )}\n          </div>\n        </div>\n\n        <div className=\"product-list-layout\">\n          {/* Filter Sidebar — display-type-aware rendering */}\n          {showFilters && (productList.filters ?? []).length > 0 && (\n            <aside className=\"product-list-filters\">\n              {(productList.filters ?? []).map((filter) => {\n                const values = getFilterDisplayedValues(filter);\n                if (values.length === 0 && !filter.numberRangeListOptions?.length) return null;\n\n                return (\n                  <div key={filter.id} className=\"filter-group\">\n                    <h3 className=\"filter-group-title\">{filter.name}</h3>\n\n                    {/* SWATCH: color circles / thumbnail images */}\n                    {isSwatchFilter(filter) ? (\n                      <div className=\"filter-swatches\">\n                        {values.map((fv) => {\n                          const thumbnail = getIkasFilterThumbnailImage(fv);\n                          return (\n                            <button\n                              key={fv.name}\n                              className={`filter-swatch${fv.isSelected ? \" selected\" : \"\"}`}\n                              onClick={() => handleFilterValueClick(productList, filter, fv)}\n                              title={fv.name}\n                            >\n                              {thumbnail ? (\n                                <img src={getDefaultSrc(thumbnail)} alt={fv.name} />\n                              ) : (\n                                <span\n                                  className=\"filter-swatch-color\"\n                                  style={{ backgroundColor: fv.colorCode ?? \"#ccc\" }}\n                                />\n                              )}\n                            </button>\n                          );\n                        })}\n                      </div>\n                    ) : (\n                      /* BOX / LIST: checkboxes (default) */\n                      <div className=\"filter-values\">\n                        {values.map((fv) => (\n                          <label key={fv.name} className=\"filter-value\">\n                            <input\n                              type=\"checkbox\"\n                              checked={fv.isSelected}\n                              onChange={() =>\n                                handleFilterValueClick(productList, filter, fv)\n                              }\n                            />\n                            <span>{fv.name}</span>\n                            {fv.count != null && (\n                              <span className=\"filter-count\">({fv.count})</span>\n                            )}\n                          </label>\n                        ))}\n                      </div>\n                    )}\n\n                    {/* NUMBER_RANGE_LIST: predefined range buttons */}\n                    {filter.numberRangeListOptions?.map((option) => (\n                      <button\n                        key={`${option.from}-${option.to}`}\n                        className={`filter-range-btn${option.isSelected ? \" selected\" : \"\"}`}\n                        onClick={() => handleNumberRangeOptionClick(productList, filter, option)}\n                      >\n                        {option.from} - {option.to ?? \"+\"}\n                      </button>\n                    ))}\n                  </div>\n                );\n              })}\n\n              {/* Category-level filtering */}\n              {filterCategories.length > 0 && (\n                <div className=\"filter-group\">\n                  <h3 className=\"filter-group-title\">Categories</h3>\n                  {filterCategories.map((cat) => (\n                    <button\n                      key={cat.name}\n                      className=\"filter-category-btn\"\n                      onClick={() => onFilterCategoryClick(productList, cat, true)}\n                    >\n                      {cat.name}\n                    </button>\n                  ))}\n                </div>\n              )}\n            </aside>\n          )}\n\n          {/* Product Grid — IkasThemeInfiniteScroller pattern for infinite scroll */}\n          <div className=\"product-grid\">\n            {isEmpty(products) && (\n              <p className=\"product-grid-empty\">No products found.</p>\n            )}\n            {products.map((product) => {\n              const variant = getSelectedProductVariant(product);\n              const productImage = getProductVariantMainImage(variant);\n              const image = productImage?.image ?? null;\n              const price = getProductVariantFormattedFinalPrice(variant) as unknown as string;\n              const href = getSelectedProductVariantHref(product);\n\n              return (\n                <a key={product.id} href={href} className=\"product-card\">\n                  <div className=\"product-card-image-wrap\">\n                    {image && (\n                      <img\n                        src={getDefaultSrc(image)}\n                        alt={product.name}\n                        className=\"product-card-image\"\n                      />\n                    )}\n                  </div>\n                  <div className=\"product-card-info\">\n                    <h3 className=\"product-card-name\">{product.name}</h3>\n                    <span className=\"product-card-price\">{price}</span>\n                  </div>\n                </a>\n              );\n            })}\n          </div>\n        </div>\n\n        {/* Pagination — includes setProductListVisiblePage for page jumping */}\n        {(hasPrev || hasNext) && (\n          <div className=\"product-list-pagination\">\n            <button\n              className=\"pagination-btn\"\n              disabled={!hasPrev}\n              onClick={() => getProductListPrevPage(productList)}\n            >\n              Previous\n            </button>\n            <span className=\"pagination-info\">\n              Page {productList.page}\n            </span>\n            <button\n              className=\"pagination-btn\"\n              disabled={!hasNext}\n              onClick={() => getProductListNextPage(productList)}\n            >\n              Next\n            </button>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\n",
       "relatedFunctions": [
         "getSelectedProductVariant",
         "getProductVariantFormattedFinalPrice",
@@ -17048,8 +17055,14 @@
         "getSelectedProductVariantHref",
         "getFilterDisplayedValues",
         "handleFilterValueClick",
+        "handleNumberRangeOptionClick",
         "getProductListFilterCategories",
         "onFilterCategoryClick",
+        "isBoxFilter",
+        "isListFilter",
+        "isSwatchFilter",
+        "isCustomValueFilter",
+        "getIkasFilterThumbnailImage",
         "getProductListSortOptions",
         "setSortType",
         "hasProductListNextPage",
@@ -17072,7 +17085,7 @@
       "files": [
         {
           "filename": "index.tsx",
-          "content": "import { useState } from \"preact/hooks\";\nimport {\n  IkasProductList,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  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\nexport default function ProductListSection({\n  productList,\n  title = \"Products\",\n  showFilters = true,\n}: Props) {\n  const [searchKeyword, setSearchKeyword] = useState(\"\");\n\n  if (!productList) return null;\n\n  const products = productList.products ?? [];\n  const filterCategories = getProductListFilterCategories(productList);\n  const sortOptions = getProductListSortOptions(productList);\n  const hasNext = hasProductListNextPage(productList);\n  const hasPrev = hasProductListPrevPage(productList);\n\n  // Category breadcrumb path\n  const category = productList.category;\n  const categoryPath = category ? getCategoryPath(category) : [];\n\n  const handleSort = (value: string) => {\n    const selected = sortOptions.find((opt) => opt.value === value);\n    if (selected) {\n      setSortType(productList, selected.value as any);\n    }\n  };\n\n  const handleSearch = (keyword: string) => {\n    setSearchKeyword(keyword);\n    searchProductList(productList, keyword);\n  };\n\n  return (\n    <section className=\"product-list-section\">\n      <div className=\"product-list-inner\">\n        {/* Category Breadcrumb */}\n        {categoryPath.length > 0 && (\n          <nav className=\"product-list-breadcrumb\">\n            <a href=\"/\">Home</a>\n            {categoryPath.map((cat: any, i: number) => (\n              <span key={i}>\n                <span className=\"breadcrumb-sep\"> / </span>\n                <a href={getIkasCategoryHref(cat)}>{cat.name}</a>\n              </span>\n            ))}\n          </nav>\n        )}\n\n        <div className=\"product-list-header\">\n          <h1 className=\"product-list-title\">\n            {category?.name || title}\n            {category?.description && (\n              <p className=\"product-list-description\">{category.description}</p>\n            )}\n          </h1>\n\n          <div className=\"product-list-controls\">\n            {/* Search */}\n            <input\n              className=\"product-list-search\"\n              type=\"text\"\n              placeholder=\"Search products...\"\n              value={searchKeyword}\n              onInput={(e) => handleSearch((e.target as HTMLInputElement).value)}\n            />\n\n            {/* Sort — use setSortType instead of direct mutation */}\n            {sortOptions.length > 0 && (\n              <select\n                className=\"product-list-sort\"\n                value={sortOptions.find((o) => o.isSelected)?.value ?? \"\"}\n                onChange={(e) => handleSort((e.target as HTMLSelectElement).value)}\n              >\n                {sortOptions.map((opt) => (\n                  <option key={opt.value} value={opt.value}>{opt.label}</option>\n                ))}\n              </select>\n            )}\n          </div>\n        </div>\n\n        <div className=\"product-list-layout\">\n          {/* Filter Sidebar — 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\n"
+          "content": "import { useState } from \"preact/hooks\";\nimport {\n  IkasProductList,\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantMainImage,\n  getSelectedProductVariantHref,\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  handleNumberRangeOptionClick,\n  getProductListFilterCategories,\n  onFilterCategoryClick,\n  isSwatchFilter,\n  getIkasFilterThumbnailImage,\n  getProductListSortOptions,\n  setSortType,\n  hasProductListNextPage,\n  hasProductListPrevPage,\n  getProductListNextPage,\n  getProductListPrevPage,\n  setProductListVisiblePage,\n  searchProductList,\n  getCategoryPath,\n  getIkasCategoryHref,\n  isEmpty,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nexport default function ProductListSection({\n  productList,\n  title = \"Products\",\n  showFilters = true,\n}: Props) {\n  const [searchKeyword, setSearchKeyword] = useState(\"\");\n\n  if (!productList) return null;\n\n  const products = productList.products ?? [];\n  const filterCategories = getProductListFilterCategories(productList);\n  const sortOptions = getProductListSortOptions(productList);\n  const hasNext = hasProductListNextPage(productList);\n  const hasPrev = hasProductListPrevPage(productList);\n\n  // Category breadcrumb path\n  const category = productList.category;\n  const categoryPath = category ? getCategoryPath(category) : [];\n\n  const handleSort = (value: string) => {\n    const selected = sortOptions.find((opt) => opt.value === value);\n    if (selected) {\n      setSortType(productList, selected.value as any);\n    }\n  };\n\n  const handleSearch = (keyword: string) => {\n    setSearchKeyword(keyword);\n    searchProductList(productList, keyword);\n  };\n\n  return (\n    <section className=\"product-list-section\">\n      <div className=\"product-list-inner\">\n        {/* Category Breadcrumb */}\n        {categoryPath.length > 0 && (\n          <nav className=\"product-list-breadcrumb\">\n            <a href=\"/\">Home</a>\n            {categoryPath.map((cat: any, i: number) => (\n              <span key={i}>\n                <span className=\"breadcrumb-sep\"> / </span>\n                <a href={getIkasCategoryHref(cat)}>{cat.name}</a>\n              </span>\n            ))}\n          </nav>\n        )}\n\n        <div className=\"product-list-header\">\n          <h1 className=\"product-list-title\">\n            {category?.name || title}\n            {category?.description && (\n              <p className=\"product-list-description\">{category.description}</p>\n            )}\n          </h1>\n\n          <div className=\"product-list-controls\">\n            {/* Search */}\n            <input\n              className=\"product-list-search\"\n              type=\"text\"\n              placeholder=\"Search products...\"\n              value={searchKeyword}\n              onInput={(e) => handleSearch((e.target as HTMLInputElement).value)}\n            />\n\n            {/* Sort — use setSortType instead of direct mutation */}\n            {sortOptions.length > 0 && (\n              <select\n                className=\"product-list-sort\"\n                value={sortOptions.find((o) => o.isSelected)?.value ?? \"\"}\n                onChange={(e) => handleSort((e.target as HTMLSelectElement).value)}\n              >\n                {sortOptions.map((opt) => (\n                  <option key={opt.value} value={opt.value}>{opt.label}</option>\n                ))}\n              </select>\n            )}\n          </div>\n        </div>\n\n        <div className=\"product-list-layout\">\n          {/* Filter Sidebar — display-type-aware rendering */}\n          {showFilters && (productList.filters ?? []).length > 0 && (\n            <aside className=\"product-list-filters\">\n              {(productList.filters ?? []).map((filter) => {\n                const values = getFilterDisplayedValues(filter);\n                if (values.length === 0 && !filter.numberRangeListOptions?.length) return null;\n\n                return (\n                  <div key={filter.id} className=\"filter-group\">\n                    <h3 className=\"filter-group-title\">{filter.name}</h3>\n\n                    {/* SWATCH: color circles / thumbnail images */}\n                    {isSwatchFilter(filter) ? (\n                      <div className=\"filter-swatches\">\n                        {values.map((fv) => {\n                          const thumbnail = getIkasFilterThumbnailImage(fv);\n                          return (\n                            <button\n                              key={fv.name}\n                              className={`filter-swatch${fv.isSelected ? \" selected\" : \"\"}`}\n                              onClick={() => handleFilterValueClick(productList, filter, fv)}\n                              title={fv.name}\n                            >\n                              {thumbnail ? (\n                                <img src={getDefaultSrc(thumbnail)} alt={fv.name} />\n                              ) : (\n                                <span\n                                  className=\"filter-swatch-color\"\n                                  style={{ backgroundColor: fv.colorCode ?? \"#ccc\" }}\n                                />\n                              )}\n                            </button>\n                          );\n                        })}\n                      </div>\n                    ) : (\n                      /* BOX / LIST: checkboxes (default) */\n                      <div className=\"filter-values\">\n                        {values.map((fv) => (\n                          <label key={fv.name} className=\"filter-value\">\n                            <input\n                              type=\"checkbox\"\n                              checked={fv.isSelected}\n                              onChange={() =>\n                                handleFilterValueClick(productList, filter, fv)\n                              }\n                            />\n                            <span>{fv.name}</span>\n                            {fv.count != null && (\n                              <span className=\"filter-count\">({fv.count})</span>\n                            )}\n                          </label>\n                        ))}\n                      </div>\n                    )}\n\n                    {/* NUMBER_RANGE_LIST: predefined range buttons */}\n                    {filter.numberRangeListOptions?.map((option) => (\n                      <button\n                        key={`${option.from}-${option.to}`}\n                        className={`filter-range-btn${option.isSelected ? \" selected\" : \"\"}`}\n                        onClick={() => handleNumberRangeOptionClick(productList, filter, option)}\n                      >\n                        {option.from} - {option.to ?? \"+\"}\n                      </button>\n                    ))}\n                  </div>\n                );\n              })}\n\n              {/* Category-level filtering */}\n              {filterCategories.length > 0 && (\n                <div className=\"filter-group\">\n                  <h3 className=\"filter-group-title\">Categories</h3>\n                  {filterCategories.map((cat) => (\n                    <button\n                      key={cat.name}\n                      className=\"filter-category-btn\"\n                      onClick={() => onFilterCategoryClick(productList, cat, true)}\n                    >\n                      {cat.name}\n                    </button>\n                  ))}\n                </div>\n              )}\n            </aside>\n          )}\n\n          {/* Product Grid — IkasThemeInfiniteScroller pattern for infinite scroll */}\n          <div className=\"product-grid\">\n            {isEmpty(products) && (\n              <p className=\"product-grid-empty\">No products found.</p>\n            )}\n            {products.map((product) => {\n              const variant = getSelectedProductVariant(product);\n              const productImage = getProductVariantMainImage(variant);\n              const image = productImage?.image ?? null;\n              const price = getProductVariantFormattedFinalPrice(variant) as unknown as string;\n              const href = getSelectedProductVariantHref(product);\n\n              return (\n                <a key={product.id} href={href} className=\"product-card\">\n                  <div className=\"product-card-image-wrap\">\n                    {image && (\n                      <img\n                        src={getDefaultSrc(image)}\n                        alt={product.name}\n                        className=\"product-card-image\"\n                      />\n                    )}\n                  </div>\n                  <div className=\"product-card-info\">\n                    <h3 className=\"product-card-name\">{product.name}</h3>\n                    <span className=\"product-card-price\">{price}</span>\n                  </div>\n                </a>\n              );\n            })}\n          </div>\n        </div>\n\n        {/* Pagination — includes setProductListVisiblePage for page jumping */}\n        {(hasPrev || hasNext) && (\n          <div className=\"product-list-pagination\">\n            <button\n              className=\"pagination-btn\"\n              disabled={!hasPrev}\n              onClick={() => getProductListPrevPage(productList)}\n            >\n              Previous\n            </button>\n            <span className=\"pagination-info\">\n              Page {productList.page}\n            </span>\n            <button\n              className=\"pagination-btn\"\n              disabled={!hasNext}\n              onClick={() => getProductListNextPage(productList)}\n            >\n              Next\n            </button>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\n"
         },
         {
           "filename": "types.ts",

package/data/storefront-types.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-02-19T09:48:49.603Z",
+  "generatedAt": "2026-02-19T17:37:32.624Z",
   "types": [
     {
       "name": "IkasProductAttributeDetail",

package/package.json

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