@ikas/code-components-mcp 0.17.0 → 0.18.0

package/data/storefront-api.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-02-18T07:26:54.736Z",
+  "generatedAt": "2026-02-18T10:46:45.063Z",
   "functions": [
     {
       "name": "apiListBlog",
@@ -16131,15 +16131,147 @@
     }
   ],
   "codeExamples": [
+    {
+      "id": "account-addresses-section",
+      "title": "Account Addresses Section (Complete)",
+      "description": "Complete address management with list display, add/edit form (getIkasCustomerAddressForm/initAddressForm/setAddressForm*/submitAddressForm), and delete (deleteCustomerAddress). Uses isEmpty/isNotEmpty.",
+      "code": "import { useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getIkasCustomerAddressForm,\n  initAddressForm,\n  submitAddressForm,\n  deleteCustomerAddress,\n  setAddressFormFirstName,\n  setAddressFormLastName,\n  setAddressFormPhone,\n  setAddressFormAddressLine1,\n  setAddressFormAddressLine2,\n  setAddressFormCity,\n  setAddressFormDistrict,\n  setAddressFormCountry,\n  setAddressFormPostalCode,\n  setAddressFormTitle,\n  isEmpty,\n  isNotEmpty,\n} from \"@ikas/bp-storefront\";\n\nfunction AccountAddressesSection() {\n  const [showForm, setShowForm] = useState(false);\n  const [editingAddress, setEditingAddress] = useState<any>(null);\n  const addresses = customerStore.customer?.addresses ?? [];\n\n  const handleAddNew = () => {\n    setEditingAddress(null);\n    setShowForm(true);\n  };\n\n  const handleEdit = (address: any) => {\n    setEditingAddress(address);\n    setShowForm(true);\n  };\n\n  const handleDelete = async (address: any) => {\n    await deleteCustomerAddress(customerStore, address);\n  };\n\n  return (\n    <section className=\"addresses-section\">\n      <div className=\"addresses-inner\">\n        <div className=\"addresses-header\">\n          <h1 className=\"addresses-title\">My Addresses</h1>\n          <button className=\"addresses-add-btn\" onClick={handleAddNew}>Add Address</button>\n        </div>\n\n        {showForm && <AddressFormComponent address={editingAddress} onDone={() => setShowForm(false)} />}\n\n        {isEmpty(addresses) && !showForm && (\n          <p className=\"addresses-empty\">No addresses saved yet.</p>\n        )}\n\n        {isNotEmpty(addresses) && (\n          <div className=\"addresses-grid\">\n            {addresses.map((addr: any) => (\n              <div key={addr.id} className=\"address-card\">\n                {addr.title && <h3 className=\"address-card-title\">{addr.title}</h3>}\n                <p className=\"address-name\">{addr.firstName} {addr.lastName}</p>\n                <p className=\"address-line\">{addr.addressLine1}</p>\n                {addr.addressLine2 && <p className=\"address-line\">{addr.addressLine2}</p>}\n                <p className=\"address-line\">{addr.city} {addr.postalCode}</p>\n                <p className=\"address-phone\">{addr.phone}</p>\n                <div className=\"address-actions\">\n                  <button onClick={() => handleEdit(addr)}>Edit</button>\n                  <button className=\"address-delete-btn\" onClick={() => handleDelete(addr)}>Delete</button>\n                </div>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\nfunction AddressFormComponent({ address, onDone }: { address?: any; onDone: () => void }) {\n  const addressForm = address\n    ? getIkasCustomerAddressForm(address)\n    : getIkasCustomerAddressForm({} as any);\n\n  const handleInit = async () => {\n    await initAddressForm(addressForm, address);\n  };\n\n  useState(() => { handleInit(); });\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    const success = await submitAddressForm(addressForm);\n    if (success) onDone();\n  };\n\n  return (\n    <form className=\"address-form\" onSubmit={handleSubmit}>\n      <div className=\"address-form-field\">\n        <label>Title</label>\n        <input value={addressForm.title?.value ?? \"\"} onInput={(e) => setAddressFormTitle(addressForm, (e.target as HTMLInputElement).value)} />\n      </div>\n      <div className=\"address-form-row\">\n        <div className=\"address-form-field\">\n          <label>First Name</label>\n          <input value={addressForm.firstName?.value ?? \"\"} onInput={(e) => setAddressFormFirstName(addressForm, (e.target as HTMLInputElement).value)} />\n        </div>\n        <div className=\"address-form-field\">\n          <label>Last Name</label>\n          <input value={addressForm.lastName?.value ?? \"\"} onInput={(e) => setAddressFormLastName(addressForm, (e.target as HTMLInputElement).value)} />\n        </div>\n      </div>\n      <div className=\"address-form-field\">\n        <label>Phone</label>\n        <input value={addressForm.phone?.value ?? \"\"} onInput={(e) => setAddressFormPhone(addressForm, (e.target as HTMLInputElement).value)} />\n      </div>\n      <div className=\"address-form-field\">\n        <label>Address Line 1</label>\n        <input value={addressForm.addressLine1?.value ?? \"\"} onInput={(e) => setAddressFormAddressLine1(addressForm, (e.target as HTMLInputElement).value)} />\n      </div>\n      <div className=\"address-form-field\">\n        <label>Address Line 2</label>\n        <input value={addressForm.addressLine2?.value ?? \"\"} onInput={(e) => setAddressFormAddressLine2(addressForm, (e.target as HTMLInputElement).value)} />\n      </div>\n      <div className=\"address-form-row\">\n        <div className=\"address-form-field\">\n          <label>City</label>\n          <input value={addressForm.city?.value ?? \"\"} onInput={(e) => setAddressFormCity(addressForm, (e.target as HTMLInputElement).value)} />\n        </div>\n        <div className=\"address-form-field\">\n          <label>District</label>\n          <input value={addressForm.district?.value ?? \"\"} onInput={(e) => setAddressFormDistrict(addressForm, (e.target as HTMLInputElement).value)} />\n        </div>\n      </div>\n      <div className=\"address-form-row\">\n        <div className=\"address-form-field\">\n          <label>Postal Code</label>\n          <input value={addressForm.postalCode?.value ?? \"\"} onInput={(e) => setAddressFormPostalCode(addressForm, (e.target as HTMLInputElement).value)} />\n        </div>\n        <div className=\"address-form-field\">\n          <label>Country</label>\n          <input value={addressForm.country?.value ?? \"\"} onInput={(e) => setAddressFormCountry(addressForm, (e.target as HTMLInputElement).value)} />\n        </div>\n      </div>\n      <div className=\"address-form-actions\">\n        <button type=\"submit\" disabled={addressForm.isSubmitting}>\n          {addressForm.isSubmitting ? \"Saving...\" : \"Save Address\"}\n        </button>\n        <button type=\"button\" onClick={onDone}>Cancel</button>\n      </div>\n    </form>\n  );\n}\n\nexport default observer(AccountAddressesSection);\n",
+      "relatedFunctions": [
+        "getIkasCustomerAddressForm",
+        "initAddressForm",
+        "submitAddressForm",
+        "deleteCustomerAddress",
+        "setAddressFormFirstName",
+        "setAddressFormLastName",
+        "setAddressFormPhone",
+        "setAddressFormAddressLine1",
+        "setAddressFormAddressLine2",
+        "setAddressFormCity",
+        "setAddressFormDistrict",
+        "setAddressFormCountry",
+        "setAddressFormPostalCode",
+        "setAddressFormTitle",
+        "customerStore",
+        "isEmpty",
+        "isNotEmpty"
+      ],
+      "categories": [
+        "Customer",
+        "Account",
+        "Form"
+      ],
+      "files": [
+        {
+          "filename": "index.tsx",
+          "content": "import { useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getIkasCustomerAddressForm,\n  initAddressForm,\n  submitAddressForm,\n  deleteCustomerAddress,\n  setAddressFormFirstName,\n  setAddressFormLastName,\n  setAddressFormPhone,\n  setAddressFormAddressLine1,\n  setAddressFormAddressLine2,\n  setAddressFormCity,\n  setAddressFormDistrict,\n  setAddressFormCountry,\n  setAddressFormPostalCode,\n  setAddressFormTitle,\n  isEmpty,\n  isNotEmpty,\n} from \"@ikas/bp-storefront\";\n\nfunction AccountAddressesSection() {\n  const [showForm, setShowForm] = useState(false);\n  const [editingAddress, setEditingAddress] = useState<any>(null);\n  const addresses = customerStore.customer?.addresses ?? [];\n\n  const handleAddNew = () => {\n    setEditingAddress(null);\n    setShowForm(true);\n  };\n\n  const handleEdit = (address: any) => {\n    setEditingAddress(address);\n    setShowForm(true);\n  };\n\n  const handleDelete = async (address: any) => {\n    await deleteCustomerAddress(customerStore, address);\n  };\n\n  return (\n    <section className=\"addresses-section\">\n      <div className=\"addresses-inner\">\n        <div className=\"addresses-header\">\n          <h1 className=\"addresses-title\">My Addresses</h1>\n          <button className=\"addresses-add-btn\" onClick={handleAddNew}>Add Address</button>\n        </div>\n\n        {showForm && <AddressFormComponent address={editingAddress} onDone={() => setShowForm(false)} />}\n\n        {isEmpty(addresses) && !showForm && (\n          <p className=\"addresses-empty\">No addresses saved yet.</p>\n        )}\n\n        {isNotEmpty(addresses) && (\n          <div className=\"addresses-grid\">\n            {addresses.map((addr: any) => (\n              <div key={addr.id} className=\"address-card\">\n                {addr.title && <h3 className=\"address-card-title\">{addr.title}</h3>}\n                <p className=\"address-name\">{addr.firstName} {addr.lastName}</p>\n                <p className=\"address-line\">{addr.addressLine1}</p>\n                {addr.addressLine2 && <p className=\"address-line\">{addr.addressLine2}</p>}\n                <p className=\"address-line\">{addr.city} {addr.postalCode}</p>\n                <p className=\"address-phone\">{addr.phone}</p>\n                <div className=\"address-actions\">\n                  <button onClick={() => handleEdit(addr)}>Edit</button>\n                  <button className=\"address-delete-btn\" onClick={() => handleDelete(addr)}>Delete</button>\n                </div>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\nfunction AddressFormComponent({ address, onDone }: { address?: any; onDone: () => void }) {\n  const addressForm = address\n    ? getIkasCustomerAddressForm(address)\n    : getIkasCustomerAddressForm({} as any);\n\n  const handleInit = async () => {\n    await initAddressForm(addressForm, address);\n  };\n\n  useState(() => { handleInit(); });\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    const success = await submitAddressForm(addressForm);\n    if (success) onDone();\n  };\n\n  return (\n    <form className=\"address-form\" onSubmit={handleSubmit}>\n      <div className=\"address-form-field\">\n        <label>Title</label>\n        <input value={addressForm.title?.value ?? \"\"} onInput={(e) => setAddressFormTitle(addressForm, (e.target as HTMLInputElement).value)} />\n      </div>\n      <div className=\"address-form-row\">\n        <div className=\"address-form-field\">\n          <label>First Name</label>\n          <input value={addressForm.firstName?.value ?? \"\"} onInput={(e) => setAddressFormFirstName(addressForm, (e.target as HTMLInputElement).value)} />\n        </div>\n        <div className=\"address-form-field\">\n          <label>Last Name</label>\n          <input value={addressForm.lastName?.value ?? \"\"} onInput={(e) => setAddressFormLastName(addressForm, (e.target as HTMLInputElement).value)} />\n        </div>\n      </div>\n      <div className=\"address-form-field\">\n        <label>Phone</label>\n        <input value={addressForm.phone?.value ?? \"\"} onInput={(e) => setAddressFormPhone(addressForm, (e.target as HTMLInputElement).value)} />\n      </div>\n      <div className=\"address-form-field\">\n        <label>Address Line 1</label>\n        <input value={addressForm.addressLine1?.value ?? \"\"} onInput={(e) => setAddressFormAddressLine1(addressForm, (e.target as HTMLInputElement).value)} />\n      </div>\n      <div className=\"address-form-field\">\n        <label>Address Line 2</label>\n        <input value={addressForm.addressLine2?.value ?? \"\"} onInput={(e) => setAddressFormAddressLine2(addressForm, (e.target as HTMLInputElement).value)} />\n      </div>\n      <div className=\"address-form-row\">\n        <div className=\"address-form-field\">\n          <label>City</label>\n          <input value={addressForm.city?.value ?? \"\"} onInput={(e) => setAddressFormCity(addressForm, (e.target as HTMLInputElement).value)} />\n        </div>\n        <div className=\"address-form-field\">\n          <label>District</label>\n          <input value={addressForm.district?.value ?? \"\"} onInput={(e) => setAddressFormDistrict(addressForm, (e.target as HTMLInputElement).value)} />\n        </div>\n      </div>\n      <div className=\"address-form-row\">\n        <div className=\"address-form-field\">\n          <label>Postal Code</label>\n          <input value={addressForm.postalCode?.value ?? \"\"} onInput={(e) => setAddressFormPostalCode(addressForm, (e.target as HTMLInputElement).value)} />\n        </div>\n        <div className=\"address-form-field\">\n          <label>Country</label>\n          <input value={addressForm.country?.value ?? \"\"} onInput={(e) => setAddressFormCountry(addressForm, (e.target as HTMLInputElement).value)} />\n        </div>\n      </div>\n      <div className=\"address-form-actions\">\n        <button type=\"submit\" disabled={addressForm.isSubmitting}>\n          {addressForm.isSubmitting ? \"Saving...\" : \"Save Address\"}\n        </button>\n        <button type=\"button\" onClick={onDone}>Cancel</button>\n      </div>\n    </form>\n  );\n}\n\nexport default observer(AccountAddressesSection);\n"
+        },
+        {
+          "filename": "types.ts",
+          "content": "export interface Props {\n  title?: string;\n}\n"
+        },
+        {
+          "filename": "styles.css",
+          "content": ".addresses-section { width: 100%; padding: 40px 24px; }\n.addresses-inner { max-width: 800px; margin: 0 auto; }\n.addresses-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }\n.addresses-title { font-size: 24px; font-weight: 700; color: #111; margin: 0; }\n.addresses-add-btn { padding: 10px 20px; font-size: 14px; font-weight: 600; color: #fff; background: #111; border: none; border-radius: 8px; cursor: pointer; }\n.addresses-empty { font-size: 16px; color: #666; text-align: center; padding: 48px 0; }\n.addresses-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }\n.address-card { padding: 20px; border: 1px solid #eee; border-radius: 8px; }\n.address-card-title { font-size: 14px; font-weight: 700; color: #111; margin: 0 0 8px 0; text-transform: uppercase; letter-spacing: 0.5px; }\n.address-name { font-size: 15px; font-weight: 600; color: #111; margin: 0 0 8px 0; }\n.address-line { font-size: 14px; color: #555; margin: 0 0 4px 0; }\n.address-phone { font-size: 14px; color: #555; margin: 8px 0; }\n.address-actions { display: flex; gap: 12px; margin-top: 12px; }\n.address-actions button { font-size: 13px; background: none; border: none; cursor: pointer; padding: 0; color: #111; font-weight: 600; }\n.address-delete-btn { color: #e53935 !important; }\n.address-form { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid #eee; border-radius: 8px; margin-bottom: 24px; }\n.address-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }\n.address-form-field { display: flex; flex-direction: column; gap: 4px; }\n.address-form-field label { font-size: 13px; font-weight: 600; color: #333; }\n.address-form-field input { padding: 10px 12px; font-size: 14px; border: 1.5px solid #ddd; border-radius: 6px; outline: none; }\n.address-form-field input:focus { border-color: #111; }\n.address-form-actions { display: flex; gap: 12px; margin-top: 8px; }\n.address-form-actions button { padding: 10px 20px; font-size: 14px; font-weight: 600; border-radius: 6px; cursor: pointer; }\n.address-form-actions button[type=\"submit\"] { color: #fff; background: #111; border: none; }\n.address-form-actions button[type=\"button\"] { color: #333; background: #fff; border: 1.5px solid #ddd; }\n@media (max-width: 768px) { .addresses-grid { grid-template-columns: 1fr; } .address-form-row { grid-template-columns: 1fr; } }\n"
+        },
+        {
+          "filename": "ikas-config-snippet.json",
+          "content": "{ \"id\": \"account-addresses\", \"name\": \"Account Addresses\", \"type\": \"section\", \"props\": [{ \"name\": \"title\", \"displayName\": \"Title\", \"type\": \"TEXT\", \"defaultValue\": \"My Addresses\" }] }\n"
+        }
+      ]
+    },
+    {
+      "id": "account-info-section",
+      "title": "Account Info Section (Complete)",
+      "description": "Complete account info section with first name, last name, and phone fields. Uses getAccountInfoForm/initAccountInfoForm/setAccountInfoForm*/submitAccountInfoForm pattern.",
+      "code": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getAccountInfoForm,\n  initAccountInfoForm,\n  setAccountInfoFormFirstName,\n  setAccountInfoFormLastName,\n  setAccountInfoFormPhone,\n  submitAccountInfoForm,\n} from \"@ikas/bp-storefront\";\n\nfunction AccountInfoSection() {\n  const accountForm = getAccountInfoForm(customerStore);\n\n  useEffect(() => {\n    initAccountInfoForm(accountForm);\n  }, []);\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    await submitAccountInfoForm(accountForm);\n  };\n\n  return (\n    <section className=\"account-info-section\">\n      <div className=\"account-info-inner\">\n        <h1 className=\"account-info-title\">Account Information</h1>\n\n        {accountForm.isSuccess && (\n          <div className=\"account-info-success\">Your information has been updated.</div>\n        )}\n        {accountForm.isFailure && accountForm.responseMessage && (\n          <div className=\"account-info-error\">{accountForm.responseMessage}</div>\n        )}\n\n        <form className=\"account-info-form\" onSubmit={handleSubmit}>\n          <div className=\"account-info-row\">\n            <div className=\"account-info-field\">\n              <label className=\"account-info-label\">{accountForm.firstName.label}</label>\n              <input\n                className={`account-info-input ${accountForm.firstName.hasError ? \"has-error\" : \"\"}`}\n                type=\"text\"\n                value={accountForm.firstName.value}\n                onInput={(e) => setAccountInfoFormFirstName(accountForm, (e.target as HTMLInputElement).value)}\n              />\n              {accountForm.firstName.hasError && accountForm.firstName.message && (\n                <span className=\"account-info-field-error\">{accountForm.firstName.message}</span>\n              )}\n            </div>\n            <div className=\"account-info-field\">\n              <label className=\"account-info-label\">{accountForm.lastName.label}</label>\n              <input\n                className={`account-info-input ${accountForm.lastName.hasError ? \"has-error\" : \"\"}`}\n                type=\"text\"\n                value={accountForm.lastName.value}\n                onInput={(e) => setAccountInfoFormLastName(accountForm, (e.target as HTMLInputElement).value)}\n              />\n              {accountForm.lastName.hasError && accountForm.lastName.message && (\n                <span className=\"account-info-field-error\">{accountForm.lastName.message}</span>\n              )}\n            </div>\n          </div>\n          <div className=\"account-info-field\">\n            <label className=\"account-info-label\">{accountForm.phone.label}</label>\n            <input\n              className={`account-info-input ${accountForm.phone.hasError ? \"has-error\" : \"\"}`}\n              type=\"tel\"\n              value={accountForm.phone.value}\n              onInput={(e) => setAccountInfoFormPhone(accountForm, (e.target as HTMLInputElement).value)}\n            />\n            {accountForm.phone.hasError && accountForm.phone.message && (\n              <span className=\"account-info-field-error\">{accountForm.phone.message}</span>\n            )}\n          </div>\n          <button className=\"account-info-submit\" type=\"submit\" disabled={accountForm.isSubmitting}>\n            {accountForm.isSubmitting ? \"Saving...\" : \"Save Changes\"}\n          </button>\n        </form>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(AccountInfoSection);\n",
+      "relatedFunctions": [
+        "getAccountInfoForm",
+        "initAccountInfoForm",
+        "setAccountInfoFormFirstName",
+        "setAccountInfoFormLastName",
+        "setAccountInfoFormPhone",
+        "submitAccountInfoForm",
+        "customerStore"
+      ],
+      "categories": [
+        "Customer",
+        "Account",
+        "Form"
+      ],
+      "files": [
+        {
+          "filename": "index.tsx",
+          "content": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getAccountInfoForm,\n  initAccountInfoForm,\n  setAccountInfoFormFirstName,\n  setAccountInfoFormLastName,\n  setAccountInfoFormPhone,\n  submitAccountInfoForm,\n} from \"@ikas/bp-storefront\";\n\nfunction AccountInfoSection() {\n  const accountForm = getAccountInfoForm(customerStore);\n\n  useEffect(() => {\n    initAccountInfoForm(accountForm);\n  }, []);\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    await submitAccountInfoForm(accountForm);\n  };\n\n  return (\n    <section className=\"account-info-section\">\n      <div className=\"account-info-inner\">\n        <h1 className=\"account-info-title\">Account Information</h1>\n\n        {accountForm.isSuccess && (\n          <div className=\"account-info-success\">Your information has been updated.</div>\n        )}\n        {accountForm.isFailure && accountForm.responseMessage && (\n          <div className=\"account-info-error\">{accountForm.responseMessage}</div>\n        )}\n\n        <form className=\"account-info-form\" onSubmit={handleSubmit}>\n          <div className=\"account-info-row\">\n            <div className=\"account-info-field\">\n              <label className=\"account-info-label\">{accountForm.firstName.label}</label>\n              <input\n                className={`account-info-input ${accountForm.firstName.hasError ? \"has-error\" : \"\"}`}\n                type=\"text\"\n                value={accountForm.firstName.value}\n                onInput={(e) => setAccountInfoFormFirstName(accountForm, (e.target as HTMLInputElement).value)}\n              />\n              {accountForm.firstName.hasError && accountForm.firstName.message && (\n                <span className=\"account-info-field-error\">{accountForm.firstName.message}</span>\n              )}\n            </div>\n            <div className=\"account-info-field\">\n              <label className=\"account-info-label\">{accountForm.lastName.label}</label>\n              <input\n                className={`account-info-input ${accountForm.lastName.hasError ? \"has-error\" : \"\"}`}\n                type=\"text\"\n                value={accountForm.lastName.value}\n                onInput={(e) => setAccountInfoFormLastName(accountForm, (e.target as HTMLInputElement).value)}\n              />\n              {accountForm.lastName.hasError && accountForm.lastName.message && (\n                <span className=\"account-info-field-error\">{accountForm.lastName.message}</span>\n              )}\n            </div>\n          </div>\n          <div className=\"account-info-field\">\n            <label className=\"account-info-label\">{accountForm.phone.label}</label>\n            <input\n              className={`account-info-input ${accountForm.phone.hasError ? \"has-error\" : \"\"}`}\n              type=\"tel\"\n              value={accountForm.phone.value}\n              onInput={(e) => setAccountInfoFormPhone(accountForm, (e.target as HTMLInputElement).value)}\n            />\n            {accountForm.phone.hasError && accountForm.phone.message && (\n              <span className=\"account-info-field-error\">{accountForm.phone.message}</span>\n            )}\n          </div>\n          <button className=\"account-info-submit\" type=\"submit\" disabled={accountForm.isSubmitting}>\n            {accountForm.isSubmitting ? \"Saving...\" : \"Save Changes\"}\n          </button>\n        </form>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(AccountInfoSection);\n"
+        },
+        {
+          "filename": "types.ts",
+          "content": "export interface Props {}\n"
+        },
+        {
+          "filename": "styles.css",
+          "content": ".account-info-section { width: 100%; padding: 40px 24px; }\n.account-info-inner { max-width: 480px; margin: 0 auto; }\n.account-info-title { font-size: 24px; font-weight: 700; color: #111; margin: 0 0 24px 0; }\n.account-info-success { padding: 12px 16px; font-size: 14px; color: #1b5e20; background: #e8f5e9; border-radius: 8px; margin-bottom: 20px; }\n.account-info-error { padding: 12px 16px; font-size: 14px; color: #b71c1c; background: #ffebee; border-radius: 8px; margin-bottom: 20px; }\n.account-info-form { display: flex; flex-direction: column; gap: 16px; }\n.account-info-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n.account-info-field { display: flex; flex-direction: column; gap: 6px; }\n.account-info-label { font-size: 14px; font-weight: 600; color: #333; }\n.account-info-input { padding: 12px 14px; font-size: 15px; border: 1.5px solid #ddd; border-radius: 8px; outline: none; }\n.account-info-input:focus { border-color: #111; }\n.account-info-input.has-error { border-color: #e53935; }\n.account-info-field-error { font-size: 12px; color: #e53935; }\n.account-info-submit { padding: 14px 24px; font-size: 16px; font-weight: 600; color: #fff; background: #111; border: none; border-radius: 8px; cursor: pointer; margin-top: 8px; }\n.account-info-submit:disabled { background: #ccc; cursor: not-allowed; }\n@media (max-width: 480px) { .account-info-row { grid-template-columns: 1fr; } }\n"
+        },
+        {
+          "filename": "ikas-config-snippet.json",
+          "content": "{ \"id\": \"account-info\", \"name\": \"Account Info\", \"type\": \"section\", \"props\": [] }\n"
+        }
+      ]
+    },
+    {
+      "id": "account-orders-section",
+      "title": "Account Orders Section (Complete)",
+      "description": "Complete account orders section showing order history with order number, date, distinct item count (getIkasOrderDistinctItemCount), total price, package status, and order line item thumbnails (getIkasOrderLineVariantMainImage). Uses isEmpty/isNotEmpty utilities.",
+      "code": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getOrders,\n  getIkasOrderFormattedTotalFinalPrice,\n  getIkasOrderDistinctItemCount,\n  getIkasOrderFormattedOrderedAt,\n  getIkasOrderPackageStatusTranslation,\n  getIkasOrderHref,\n  getIkasOrderLineVariantMainImage,\n  getDefaultSrc,\n  isEmpty,\n  isNotEmpty,\n  Router,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction AccountOrdersSection({\n  title = \"My Orders\",\n  emptyMessage = \"You have no orders yet.\",\n}: Props) {\n  useEffect(() => {\n    getOrders(customerStore);\n  }, []);\n\n  const orders = customerStore.orders ?? [];\n\n  return (\n    <section className=\"orders-section\">\n      <div className=\"orders-inner\">\n        <h1 className=\"orders-title\">{title}</h1>\n\n        {isEmpty(orders) && (\n          <div className=\"orders-empty\">\n            <p>{emptyMessage}</p>\n            <button\n              className=\"orders-shop-btn\"\n              onClick={() => Router.navigate(\"/\")}\n            >\n              Start Shopping\n            </button>\n          </div>\n        )}\n\n        {isNotEmpty(orders) && (\n          <div className=\"orders-list\">\n            {orders.map((order) => {\n              // Show first line item thumbnail\n              const firstItem = order.orderLineItems?.[0];\n              const thumbnail = firstItem?.variant\n                ? getIkasOrderLineVariantMainImage(firstItem.variant)\n                : null;\n\n              return (\n                <a\n                  key={order.id}\n                  href={getIkasOrderHref(order)}\n                  className=\"order-card\"\n                >\n                  <div className=\"order-card-header\">\n                    <span className=\"order-number\">Order #{order.orderNumber}</span>\n                    <span className=\"order-status\">\n                      {getIkasOrderPackageStatusTranslation(order)}\n                    </span>\n                  </div>\n                  <div className=\"order-card-body\">\n                    {thumbnail && (\n                      <img\n                        className=\"order-thumbnail\"\n                        src={getDefaultSrc(thumbnail)}\n                        alt=\"\"\n                      />\n                    )}\n                    <div className=\"order-card-details\">\n                      <span className=\"order-date\">\n                        {getIkasOrderFormattedOrderedAt(order)}\n                      </span>\n                      <span className=\"order-items\">\n                        {getIkasOrderDistinctItemCount(order)} items\n                      </span>\n                      <span className=\"order-total\">\n                        {getIkasOrderFormattedTotalFinalPrice(order)}\n                      </span>\n                    </div>\n                  </div>\n                </a>\n              );\n            })}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\nexport default observer(AccountOrdersSection);\n",
+      "relatedFunctions": [
+        "customerStore",
+        "getOrders",
+        "getIkasOrderFormattedTotalFinalPrice",
+        "getIkasOrderDistinctItemCount",
+        "getIkasOrderFormattedOrderedAt",
+        "getIkasOrderPackageStatusTranslation",
+        "getIkasOrderHref",
+        "getIkasOrderLineVariantMainImage",
+        "getDefaultSrc",
+        "isEmpty",
+        "isNotEmpty"
+      ],
+      "categories": [
+        "Customer",
+        "Order",
+        "Account"
+      ],
+      "files": [
+        {
+          "filename": "index.tsx",
+          "content": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getOrders,\n  getIkasOrderFormattedTotalFinalPrice,\n  getIkasOrderDistinctItemCount,\n  getIkasOrderFormattedOrderedAt,\n  getIkasOrderPackageStatusTranslation,\n  getIkasOrderHref,\n  getIkasOrderLineVariantMainImage,\n  getDefaultSrc,\n  isEmpty,\n  isNotEmpty,\n  Router,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction AccountOrdersSection({\n  title = \"My Orders\",\n  emptyMessage = \"You have no orders yet.\",\n}: Props) {\n  useEffect(() => {\n    getOrders(customerStore);\n  }, []);\n\n  const orders = customerStore.orders ?? [];\n\n  return (\n    <section className=\"orders-section\">\n      <div className=\"orders-inner\">\n        <h1 className=\"orders-title\">{title}</h1>\n\n        {isEmpty(orders) && (\n          <div className=\"orders-empty\">\n            <p>{emptyMessage}</p>\n            <button\n              className=\"orders-shop-btn\"\n              onClick={() => Router.navigate(\"/\")}\n            >\n              Start Shopping\n            </button>\n          </div>\n        )}\n\n        {isNotEmpty(orders) && (\n          <div className=\"orders-list\">\n            {orders.map((order) => {\n              // Show first line item thumbnail\n              const firstItem = order.orderLineItems?.[0];\n              const thumbnail = firstItem?.variant\n                ? getIkasOrderLineVariantMainImage(firstItem.variant)\n                : null;\n\n              return (\n                <a\n                  key={order.id}\n                  href={getIkasOrderHref(order)}\n                  className=\"order-card\"\n                >\n                  <div className=\"order-card-header\">\n                    <span className=\"order-number\">Order #{order.orderNumber}</span>\n                    <span className=\"order-status\">\n                      {getIkasOrderPackageStatusTranslation(order)}\n                    </span>\n                  </div>\n                  <div className=\"order-card-body\">\n                    {thumbnail && (\n                      <img\n                        className=\"order-thumbnail\"\n                        src={getDefaultSrc(thumbnail)}\n                        alt=\"\"\n                      />\n                    )}\n                    <div className=\"order-card-details\">\n                      <span className=\"order-date\">\n                        {getIkasOrderFormattedOrderedAt(order)}\n                      </span>\n                      <span className=\"order-items\">\n                        {getIkasOrderDistinctItemCount(order)} items\n                      </span>\n                      <span className=\"order-total\">\n                        {getIkasOrderFormattedTotalFinalPrice(order)}\n                      </span>\n                    </div>\n                  </div>\n                </a>\n              );\n            })}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\nexport default observer(AccountOrdersSection);\n"
+        },
+        {
+          "filename": "types.ts",
+          "content": "export interface Props {\n  title?: string;\n  emptyMessage?: string;\n}\n"
+        },
+        {
+          "filename": "styles.css",
+          "content": ".orders-section {\n  width: 100%;\n  padding: 40px 24px;\n}\n\n.orders-inner {\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n.orders-title {\n  font-size: 24px;\n  font-weight: 700;\n  color: #111;\n  margin: 0 0 24px 0;\n}\n\n.orders-empty {\n  text-align: center;\n  padding: 48px 0;\n}\n\n.orders-empty p {\n  font-size: 16px;\n  color: #666;\n  margin: 0 0 16px 0;\n}\n\n.orders-shop-btn {\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 600;\n  color: #111;\n  background: #fff;\n  border: 1.5px solid #111;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n.orders-list {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.order-card {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 20px;\n  border: 1px solid #eee;\n  border-radius: 10px;\n  text-decoration: none;\n  color: inherit;\n  transition: border-color 0.15s ease;\n}\n\n.order-card:hover {\n  border-color: #ccc;\n}\n\n.order-card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.order-number {\n  font-size: 15px;\n  font-weight: 600;\n  color: #111;\n}\n\n.order-status {\n  font-size: 12px;\n  font-weight: 600;\n  color: #fff;\n  background: #111;\n  padding: 4px 10px;\n  border-radius: 12px;\n}\n\n.order-card-details {\n  display: flex;\n  gap: 24px;\n  font-size: 14px;\n  color: #666;\n}\n\n.order-total {\n  font-weight: 600;\n  color: #111;\n  margin-left: auto;\n}\n\n@media (max-width: 480px) {\n  .order-card-details {\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .order-total {\n    margin-left: 0;\n  }\n}\n"
+        },
+        {
+          "filename": "ikas-config-snippet.json",
+          "content": "{\n  \"id\": \"account-orders\",\n  \"name\": \"Account Orders\",\n  \"type\": \"section\",\n  \"entry\": \"./src/components/AccountOrders/index.tsx\",\n  \"styles\": \"./src/components/AccountOrders/styles.css\",\n  \"props\": [\n    {\n      \"name\": \"title\",\n      \"displayName\": \"Section Title\",\n      \"type\": \"TEXT\",\n      \"defaultValue\": \"My Orders\"\n    },\n    {\n      \"name\": \"emptyMessage\",\n      \"displayName\": \"Empty State Message\",\n      \"type\": \"TEXT\",\n      \"defaultValue\": \"You have no orders yet.\"\n    }\n  ]\n}\n"
+        }
+      ]
+    },
     {
       "id": "add-to-cart",
       "title": "Adding a Product to Cart",
-      "description": "Check stock and add a product variant to the shopping cart",
-      "code": "import { addItemToCart, getSelectedProductVariant, hasProductVariantStock, IkasProduct } from \"@ikas/bp-storefront\";\n\n\nasync function handleAddToCart(product: IkasProduct) {\n  const variant = getSelectedProductVariant(product);\n  if (!hasProductVariantStock(variant)) {\n    showToast(\"Out of stock\");\n    return;\n  }\n  const result = await addItemToCart(variant, product, 1);\n  if (result.success) {\n    showToast(\"Added to cart!\");\n  } else if (result.validationError === \"INSUFFICIENT_STOCK\") {\n    showToast(\"Out of stock\");\n  } else if (result.validationError === \"INVALID_PRODUCT_OPTION_VALUES\") {\n    showToast(\"Please select all options\");\n  }\n}\n\nexport default handleAddToCart;\n",
+      "description": "Check stock (hasProductVariantStock), verify add-to-cart enabled (isAddToCartEnabled), check bundle settings (hasBundleSettings), then addItemToCart with AddItemOptions returning IkasCartOperationResult with success/validationError. Also shows getSelectedProductVariantHref for product links.",
+      "code": "import {\n  addItemToCart,\n  getSelectedProductVariant,\n  getSelectedProductVariantHref,\n  hasProductVariantStock,\n  isAddToCartEnabled,\n  hasBundleSettings,\n  baseStore,\n  IkasProduct,\n} from \"@ikas/bp-storefront\";\n\n\n/**\n * Add to cart with full validation and result handling.\n * addItemToCart accepts optional AddItemOptions for quantity.\n * Returns IkasCartOperationResult with .success property.\n */\nasync function handleAddToCart(product: IkasProduct, quantity: number = 1) {\n  // Check if add to cart is enabled for this product\n  if (!isAddToCartEnabled(product)) {\n    showToast(\"This product cannot be added to cart\");\n    return;\n  }\n\n  const variant = getSelectedProductVariant(product);\n\n  // Check stock availability\n  if (!hasProductVariantStock(variant)) {\n    showToast(\"Out of stock\");\n    return;\n  }\n\n  // Check for bundle settings\n  const hasBundle = variant ? hasBundleSettings(variant) : false;\n\n  // addItemToCart(variant, product, initialQuantity, options?: AddItemOptions)\n  // Returns IkasCartOperationResult { success: boolean, validationError?: string }\n  const result = await addItemToCart(variant, product, quantity);\n\n  if (result.success) {\n    showToast(\"Added to cart!\");\n  } else if (result.validationError === \"INSUFFICIENT_STOCK\") {\n    showToast(\"Out of stock\");\n  } else if (result.validationError === \"INVALID_PRODUCT_OPTION_VALUES\") {\n    showToast(\"Please select all options\");\n  }\n\n  // Get the product link for \"view product\" functionality\n  const productHref = getSelectedProductVariantHref(product);\n\n  return result;\n}\n\nexport default handleAddToCart;\n",
       "relatedFunctions": [
         "addItemToCart",
         "getSelectedProductVariant",
-        "hasProductVariantStock"
+        "getSelectedProductVariantHref",
+        "hasProductVariantStock",
+        "isAddToCartEnabled",
+        "hasBundleSettings",
+        "baseStore"
       ],
       "categories": [
         "Cart",
@@ -16154,7 +16286,6 @@
       "relatedFunctions": [
         "getIkasBlogHref",
         "getIkasBlogFormattedDate",
-        "getBlogListInitialData",
         "hasBlogListNextPage",
         "hasBlogListPrevPage",
         "getBlogListNextPage",
@@ -16165,6 +16296,41 @@
         "BlogList"
       ]
     },
+    {
+      "id": "blog-list-section",
+      "title": "Blog List Section (Complete)",
+      "description": "Complete blog list section with blog card grid, featured images, formatted dates, and forward-only pagination (infinite scroll pattern with IkasThemeInfiniteScroller). Uses hasBlogListNextPage/getBlogListNextPage only — no prev page in production.",
+      "code": "import { observer } from \"@ikas/component-utils\";\nimport {\n  IkasBlogList,\n  hasBlogListNextPage,\n  getBlogListNextPage,\n  getIkasBlogFormattedDate,\n  getIkasBlogHref,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction BlogListSection({\n  blogList,\n  title = \"Blog\",\n}: Props) {\n  if (!blogList) return null;\n\n  const blogs = blogList.data ?? [];\n  const hasNext = hasBlogListNextPage(blogList);\n  // Note: dynavit uses only forward pagination (infinite scroll with IkasThemeInfiniteScroller)\n  // No hasBlogListPrevPage/getBlogListPrevPage — scroll-only pattern\n\n  return (\n    <section className=\"blog-list-section\">\n      <div className=\"blog-list-inner\">\n        <h1 className=\"blog-list-title\">{title}</h1>\n\n        {blogs.length === 0 && (\n          <p className=\"blog-list-empty\">No blog posts found.</p>\n        )}\n\n        {/* Blog Grid — production uses IkasThemeInfiniteScroller for infinite scroll */}\n        <div className=\"blog-grid\">\n          {blogs.map((blog) => (\n            <a\n              key={blog.id}\n              href={getIkasBlogHref(blog)}\n              className=\"blog-card\"\n            >\n              {blog.image && (\n                <div className=\"blog-card-image-wrap\">\n                  <img\n                    src={getDefaultSrc(blog.image)}\n                    alt={blog.title}\n                    className=\"blog-card-image\"\n                  />\n                </div>\n              )}\n              <div className=\"blog-card-content\">\n                <span className=\"blog-card-date\">\n                  {getIkasBlogFormattedDate(blog)}\n                </span>\n                <h3 className=\"blog-card-title\">{blog.title}</h3>\n                {blog.summary && (\n                  <p className=\"blog-card-summary\">{blog.summary}</p>\n                )}\n                <span className=\"blog-card-read-more\">Read more</span>\n              </div>\n            </a>\n          ))}\n        </div>\n\n        {/* Load More — infinite scroll pattern */}\n        {hasNext && (\n          <div className=\"blog-load-more\">\n            <button\n              className=\"blog-load-more-btn\"\n              onClick={() => getBlogListNextPage(blogList)}\n            >\n              Load More\n            </button>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\nexport default observer(BlogListSection);\n",
+      "relatedFunctions": [
+        "hasBlogListNextPage",
+        "getBlogListNextPage",
+        "getIkasBlogFormattedDate",
+        "getIkasBlogHref",
+        "getDefaultSrc"
+      ],
+      "categories": [
+        "Blog",
+        "Pagination"
+      ],
+      "files": [
+        {
+          "filename": "index.tsx",
+          "content": "import { observer } from \"@ikas/component-utils\";\nimport {\n  IkasBlogList,\n  hasBlogListNextPage,\n  getBlogListNextPage,\n  getIkasBlogFormattedDate,\n  getIkasBlogHref,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction BlogListSection({\n  blogList,\n  title = \"Blog\",\n}: Props) {\n  if (!blogList) return null;\n\n  const blogs = blogList.data ?? [];\n  const hasNext = hasBlogListNextPage(blogList);\n  // Note: dynavit uses only forward pagination (infinite scroll with IkasThemeInfiniteScroller)\n  // No hasBlogListPrevPage/getBlogListPrevPage — scroll-only pattern\n\n  return (\n    <section className=\"blog-list-section\">\n      <div className=\"blog-list-inner\">\n        <h1 className=\"blog-list-title\">{title}</h1>\n\n        {blogs.length === 0 && (\n          <p className=\"blog-list-empty\">No blog posts found.</p>\n        )}\n\n        {/* Blog Grid — production uses IkasThemeInfiniteScroller for infinite scroll */}\n        <div className=\"blog-grid\">\n          {blogs.map((blog) => (\n            <a\n              key={blog.id}\n              href={getIkasBlogHref(blog)}\n              className=\"blog-card\"\n            >\n              {blog.image && (\n                <div className=\"blog-card-image-wrap\">\n                  <img\n                    src={getDefaultSrc(blog.image)}\n                    alt={blog.title}\n                    className=\"blog-card-image\"\n                  />\n                </div>\n              )}\n              <div className=\"blog-card-content\">\n                <span className=\"blog-card-date\">\n                  {getIkasBlogFormattedDate(blog)}\n                </span>\n                <h3 className=\"blog-card-title\">{blog.title}</h3>\n                {blog.summary && (\n                  <p className=\"blog-card-summary\">{blog.summary}</p>\n                )}\n                <span className=\"blog-card-read-more\">Read more</span>\n              </div>\n            </a>\n          ))}\n        </div>\n\n        {/* Load More — infinite scroll pattern */}\n        {hasNext && (\n          <div className=\"blog-load-more\">\n            <button\n              className=\"blog-load-more-btn\"\n              onClick={() => getBlogListNextPage(blogList)}\n            >\n              Load More\n            </button>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\nexport default observer(BlogListSection);\n"
+        },
+        {
+          "filename": "types.ts",
+          "content": "import { IkasBlogList } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n  blogList: IkasBlogList;\n  title?: string;\n}\n"
+        },
+        {
+          "filename": "styles.css",
+          "content": ".blog-list-section {\n  width: 100%;\n  padding: 48px 24px;\n}\n\n.blog-list-inner {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.blog-list-title {\n  font-size: 28px;\n  font-weight: 700;\n  color: #111;\n  margin: 0 0 32px 0;\n}\n\n.blog-list-empty {\n  font-size: 16px;\n  color: #666;\n  text-align: center;\n  padding: 48px 0;\n}\n\n.blog-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 32px;\n}\n\n.blog-card {\n  text-decoration: none;\n  color: inherit;\n  display: flex;\n  flex-direction: column;\n  border-radius: 12px;\n  overflow: hidden;\n  border: 1px solid #eee;\n  transition: box-shadow 0.2s ease;\n}\n\n.blog-card:hover {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n}\n\n.blog-card-image-wrap {\n  aspect-ratio: 16 / 10;\n  overflow: hidden;\n  background: #f5f5f5;\n}\n\n.blog-card-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 0.2s ease;\n}\n\n.blog-card:hover .blog-card-image {\n  transform: scale(1.03);\n}\n\n.blog-card-content {\n  padding: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  flex: 1;\n}\n\n.blog-card-date {\n  font-size: 12px;\n  color: #999;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.blog-card-title {\n  font-size: 18px;\n  font-weight: 600;\n  color: #111;\n  margin: 0;\n  line-height: 1.4;\n}\n\n.blog-card-summary {\n  font-size: 14px;\n  color: #666;\n  line-height: 1.6;\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.blog-card-read-more {\n  font-size: 14px;\n  font-weight: 600;\n  color: #111;\n  margin-top: auto;\n  padding-top: 8px;\n}\n\n/* Pagination */\n.blog-pagination {\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n  margin-top: 40px;\n}\n\n.blog-pagination-btn {\n  padding: 10px 24px;\n  font-size: 14px;\n  font-weight: 500;\n  background: #fff;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  cursor: pointer;\n}\n\n.blog-pagination-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.blog-pagination-btn:hover:not(:disabled) {\n  border-color: #111;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .blog-grid {\n    grid-template-columns: 1fr;\n    gap: 24px;\n  }\n}\n"
+        },
+        {
+          "filename": "ikas-config-snippet.json",
+          "content": "{\n  \"id\": \"blog-list\",\n  \"name\": \"Blog List\",\n  \"type\": \"section\",\n  \"entry\": \"./src/components/BlogList/index.tsx\",\n  \"styles\": \"./src/components/BlogList/styles.css\",\n  \"props\": [\n    {\n      \"name\": \"blogList\",\n      \"displayName\": \"Blog List\",\n      \"type\": \"BLOG_POST_LIST\",\n      \"required\": true\n    },\n    {\n      \"name\": \"title\",\n      \"displayName\": \"Section Title\",\n      \"type\": \"TEXT\",\n      \"defaultValue\": \"Blog\"\n    }\n  ]\n}\n"
+        }
+      ]
+    },
     {
       "id": "brand-category-list",
       "title": "Brand and Category List",
@@ -16172,12 +16338,10 @@
       "code": "import {\n  getIkasBrandHref,\n  hasBrandListNextPage,\n  getBrandListNextPage,\n  getIkasCategoryHref,\n  getCategoryPath,\n  hasCategoryListNextPage,\n  getCategoryListNextPage,\n  IkasBrand,\n  IkasBrandList,\n  IkasCategory,\n  IkasCategoryList,\n} from \"@ikas/bp-storefront\";\n\nfunction BrandList({ brandList }: { brandList: IkasBrandList }) {\n  return (\n    <div>\n      {brandList.data.map((brand: IkasBrand) => (\n        <a key={brand.id} href={getIkasBrandHref(brand)}>\n          {brand.name}\n        </a>\n      ))}\n      {hasBrandListNextPage(brandList) && (\n        <button onClick={() => getBrandListNextPage(brandList)}>Load More</button>\n      )}\n    </div>\n  );\n}\n\nfunction CategoryList({ categoryList }: { categoryList: IkasCategoryList }) {\n  return (\n    <div>\n      {categoryList.data.map((category: IkasCategory) => (\n        <a key={category.id} href={getIkasCategoryHref(category)}>\n          {getCategoryPath(category).map((c) => c.name).join(\" > \")}\n        </a>\n      ))}\n      {hasCategoryListNextPage(categoryList) && (\n        <button onClick={() => getCategoryListNextPage(categoryList)}>Load More</button>\n      )}\n    </div>\n  );\n}\n\nexport { BrandList, CategoryList };\nexport default BrandList;\n",
       "relatedFunctions": [
         "getIkasBrandHref",
-        "getBrandListInitialData",
         "hasBrandListNextPage",
         "getBrandListNextPage",
         "getIkasCategoryHref",
         "getCategoryPath",
-        "getCategoryListInitialData",
         "hasCategoryListNextPage",
         "getCategoryListNextPage"
       ],
@@ -16188,20 +16352,53 @@
         "CategoryList"
       ]
     },
+    {
+      "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",
+      "relatedFunctions": [
+        "hasBundleSettings",
+        "initBundleProducts",
+        "getDisplayedProductGroups",
+        "acceptProductOffer",
+        "rejectProductOffer",
+        "isAcceptedProductOffer",
+        "getDisplayedProductVariantTypes",
+        "selectVariantValue",
+        "isIkasVariantTypeColorSelection",
+        "getSelectedProductVariant",
+        "getProductVariantFormattedFinalPrice",
+        "getProductVariantMainImage",
+        "getDefaultSrc"
+      ],
+      "categories": [
+        "ProductDetail",
+        "Cart"
+      ]
+    },
     {
       "id": "cart-section",
       "title": "Cart Section (Complete)",
-      "description": "Complete cart section with line item display, quantity controls, item removal, price totals, and checkout navigation. Uses observer for reactive cart updates.",
-      "code": "import { observer } from \"@ikas/component-utils\";\nimport {\n  cartStore,\n  changeItemQuantity,\n  removeItem,\n  getIkasOrderFormattedTotalFinalPrice,\n  getIkasOrderFormattedTotalPrice,\n  getOrderLineItemFormattedFinalPrice,\n  getOrderLineItemFormattedUnitPrice,\n  getIkasOrderLineVariantMainImage,\n  getDefaultSrc,\n  Router,\n  IkasOrderLineItem,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction CartSection({ emptyCartMessage = \"Your cart is empty\" }: Props) {\n  const cart = cartStore.cart;\n  const lineItems = cart?.orderLineItems ?? [];\n\n  if (lineItems.length === 0) {\n    return (\n      <section className=\"cart-section\">\n        <div className=\"cart-inner\">\n          <p className=\"cart-empty\">{emptyCartMessage}</p>\n          <button className=\"cart-continue-btn\" onClick={() => Router.navigate(\"/\")}>\n            Continue Shopping\n          </button>\n        </div>\n      </section>\n    );\n  }\n\n  const handleQuantityChange = async (item: IkasOrderLineItem, delta: number) => {\n    const newQty = item.quantity + delta;\n    if (newQty < 1) return;\n    await changeItemQuantity(item, newQty);\n  };\n\n  const handleRemove = async (item: IkasOrderLineItem) => {\n    await removeItem(item);\n  };\n\n  return (\n    <section className=\"cart-section\">\n      <div className=\"cart-inner\">\n        <h1 className=\"cart-title\">Shopping Cart ({lineItems.length})</h1>\n\n        <div className=\"cart-items\">\n          {lineItems.map((item) => {\n            const image = item.variant ? getIkasOrderLineVariantMainImage(item.variant) : null;\n            return (\n              <div key={item.id} className=\"cart-item\">\n                {image && (\n                  <img\n                    className=\"cart-item-image\"\n                    src={getDefaultSrc(image)}\n                    alt={item.variant?.name || \"Product\"}\n                  />\n                )}\n                <div className=\"cart-item-info\">\n                  <span className=\"cart-item-name\">{item.variant?.name}</span>\n                  <span className=\"cart-item-unit-price\">\n                    {getOrderLineItemFormattedUnitPrice(item)}\n                  </span>\n                </div>\n                <div className=\"cart-item-quantity\">\n                  <button onClick={() => handleQuantityChange(item, -1)}>-</button>\n                  <span>{item.quantity}</span>\n                  <button onClick={() => handleQuantityChange(item, 1)}>+</button>\n                </div>\n                <span className=\"cart-item-total\">\n                  {getOrderLineItemFormattedFinalPrice(item)}\n                </span>\n                <button className=\"cart-item-remove\" onClick={() => handleRemove(item)}>\n                  Remove\n                </button>\n              </div>\n            );\n          })}\n        </div>\n\n        <div className=\"cart-summary\">\n          <div className=\"cart-summary-row\">\n            <span>Subtotal</span>\n            <span>{getIkasOrderFormattedTotalPrice(cart!)}</span>\n          </div>\n          <div className=\"cart-summary-row cart-summary-total\">\n            <span>Total</span>\n            <span>{getIkasOrderFormattedTotalFinalPrice(cart!)}</span>\n          </div>\n          <button\n            className=\"cart-checkout-btn\"\n            onClick={() => Router.navigateToPage(\"CHECKOUT\")}\n          >\n            Proceed to Checkout\n          </button>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(CartSection);\n",
+      "description": "Complete cart section with loading state, empty cart handling, line items with variant images/links/discount detection, quantity controls, order adjustments (coupons/discounts), subtotal/total, and checkout via getCheckoutUrlFromCartStore. Uses observer for reactive cart updates.",
+      "code": "import { observer } from \"@ikas/component-utils\";\nimport {\n  cartStore,\n  hasCart,\n  changeItemQuantity,\n  removeItem,\n  getIkasOrderFormattedTotalFinalPrice,\n  getIkasOrderFormattedTotalPrice,\n  getIkasOrderTotalItemCount,\n  getOrderLineItemFormattedFinalPriceWithQuantity,\n  getOrderLineItemFormattedPriceWithQuantity,\n  hasOrderLineItemDiscount,\n  getIkasOrderLineVariantMainImage,\n  getIkasOrderLineVariantHref,\n  getOrderAdjustmentDisplayName,\n  getOrderAdjustmentFormattedAmount,\n  getCheckoutUrlFromCartStore,\n  getDefaultSrc,\n  Router,\n  IkasOrderLineItem,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction CartSection({ emptyCartMessage = \"Your cart is empty\" }: Props) {\n  const cart = cartStore.cart;\n  const isLoading = cartStore.isCartLoading;\n  const cartHasItems = hasCart(cartStore) as unknown as boolean;\n  const lineItems = cart?.orderLineItems ?? [];\n  const adjustments = cart?.orderAdjustments ?? [];\n  const totalItemCount = cart ? (getIkasOrderTotalItemCount(cart) as unknown as number) : 0;\n\n  if (isLoading) {\n    return (\n      <section className=\"cart-section\">\n        <div className=\"cart-inner\">\n          <p className=\"cart-loading\">Loading cart...</p>\n        </div>\n      </section>\n    );\n  }\n\n  if (!cartHasItems) {\n    return (\n      <section className=\"cart-section\">\n        <div className=\"cart-inner\">\n          <p className=\"cart-empty\">{emptyCartMessage}</p>\n          <button className=\"cart-continue-btn\" onClick={() => Router.navigate(\"/\")}>\n            Continue Shopping\n          </button>\n        </div>\n      </section>\n    );\n  }\n\n  const handleQuantityChange = async (item: IkasOrderLineItem, delta: number) => {\n    const newQty = item.quantity + delta;\n    if (newQty < 1) return;\n    await changeItemQuantity(item, newQty);\n  };\n\n  const handleRemove = async (item: IkasOrderLineItem) => {\n    await removeItem(item);\n  };\n\n  return (\n    <section className=\"cart-section\">\n      <div className=\"cart-inner\">\n        <h1 className=\"cart-title\">Shopping Cart ({totalItemCount} items)</h1>\n\n        <div className=\"cart-items\">\n          {lineItems.map((item) => {\n            const image = item.variant ? getIkasOrderLineVariantMainImage(item.variant) : null;\n            const href = item.variant ? getIkasOrderLineVariantHref(item.variant) : undefined;\n            const hasDiscount = hasOrderLineItemDiscount(item) as unknown as boolean;\n            return (\n              <div key={item.id} className=\"cart-item\">\n                {image && (\n                  <a href={href}>\n                    <img\n                      className=\"cart-item-image\"\n                      src={getDefaultSrc(image)}\n                      alt={item.variant?.name || \"Product\"}\n                    />\n                  </a>\n                )}\n                <div className=\"cart-item-info\">\n                  <a href={href} className=\"cart-item-name\">{item.variant?.name}</a>\n                  {hasDiscount && (\n                    <span className=\"cart-item-original-price\">\n                      {getOrderLineItemFormattedPriceWithQuantity(item)}\n                    </span>\n                  )}\n                  <span className={`cart-item-total ${hasDiscount ? \"has-discount\" : \"\"}`}>\n                    {getOrderLineItemFormattedFinalPriceWithQuantity(item)}\n                  </span>\n                </div>\n                <div className=\"cart-item-quantity\">\n                  <button onClick={() => handleQuantityChange(item, -1)}>-</button>\n                  <span>{item.quantity}</span>\n                  <button onClick={() => handleQuantityChange(item, 1)}>+</button>\n                </div>\n                <button className=\"cart-item-remove\" onClick={() => handleRemove(item)}>\n                  Remove\n                </button>\n              </div>\n            );\n          })}\n        </div>\n\n        {/* Order Adjustments (discounts, coupons, shipping fees) */}\n        {adjustments.length > 0 && (\n          <div className=\"cart-adjustments\">\n            {adjustments.map((adj: any, i: number) => (\n              <div key={i} className=\"cart-adjustment-row\">\n                <span>{getOrderAdjustmentDisplayName(adj)}</span>\n                <span>{getOrderAdjustmentFormattedAmount(adj)}</span>\n              </div>\n            ))}\n          </div>\n        )}\n\n        <div className=\"cart-summary\">\n          <div className=\"cart-summary-row\">\n            <span>Subtotal</span>\n            <span>{getIkasOrderFormattedTotalPrice(cart!)}</span>\n          </div>\n          <div className=\"cart-summary-row cart-summary-total\">\n            <span>Total</span>\n            <span>{getIkasOrderFormattedTotalFinalPrice(cart!)}</span>\n          </div>\n          <a\n            className=\"cart-checkout-btn\"\n            href={getCheckoutUrlFromCartStore(cartStore)}\n          >\n            Proceed to Checkout\n          </a>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(CartSection);\n",
       "relatedFunctions": [
         "cartStore",
+        "hasCart",
         "changeItemQuantity",
         "removeItem",
         "getIkasOrderFormattedTotalFinalPrice",
         "getIkasOrderFormattedTotalPrice",
-        "getOrderLineItemFormattedFinalPrice",
-        "getOrderLineItemFormattedUnitPrice",
-        "Router.navigateToPage"
+        "getIkasOrderTotalItemCount",
+        "getOrderLineItemFormattedFinalPriceWithQuantity",
+        "getOrderLineItemFormattedPriceWithQuantity",
+        "hasOrderLineItemDiscount",
+        "getIkasOrderLineVariantMainImage",
+        "getIkasOrderLineVariantHref",
+        "getOrderAdjustmentDisplayName",
+        "getOrderAdjustmentFormattedAmount",
+        "getCheckoutUrlFromCartStore",
+        "getDefaultSrc"
       ],
       "categories": [
         "Cart"
@@ -16209,7 +16406,7 @@
       "files": [
         {
           "filename": "index.tsx",
-          "content": "import { observer } from \"@ikas/component-utils\";\nimport {\n  cartStore,\n  changeItemQuantity,\n  removeItem,\n  getIkasOrderFormattedTotalFinalPrice,\n  getIkasOrderFormattedTotalPrice,\n  getOrderLineItemFormattedFinalPrice,\n  getOrderLineItemFormattedUnitPrice,\n  getIkasOrderLineVariantMainImage,\n  getDefaultSrc,\n  Router,\n  IkasOrderLineItem,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction CartSection({ emptyCartMessage = \"Your cart is empty\" }: Props) {\n  const cart = cartStore.cart;\n  const lineItems = cart?.orderLineItems ?? [];\n\n  if (lineItems.length === 0) {\n    return (\n      <section className=\"cart-section\">\n        <div className=\"cart-inner\">\n          <p className=\"cart-empty\">{emptyCartMessage}</p>\n          <button className=\"cart-continue-btn\" onClick={() => Router.navigate(\"/\")}>\n            Continue Shopping\n          </button>\n        </div>\n      </section>\n    );\n  }\n\n  const handleQuantityChange = async (item: IkasOrderLineItem, delta: number) => {\n    const newQty = item.quantity + delta;\n    if (newQty < 1) return;\n    await changeItemQuantity(item, newQty);\n  };\n\n  const handleRemove = async (item: IkasOrderLineItem) => {\n    await removeItem(item);\n  };\n\n  return (\n    <section className=\"cart-section\">\n      <div className=\"cart-inner\">\n        <h1 className=\"cart-title\">Shopping Cart ({lineItems.length})</h1>\n\n        <div className=\"cart-items\">\n          {lineItems.map((item) => {\n            const image = item.variant ? getIkasOrderLineVariantMainImage(item.variant) : null;\n            return (\n              <div key={item.id} className=\"cart-item\">\n                {image && (\n                  <img\n                    className=\"cart-item-image\"\n                    src={getDefaultSrc(image)}\n                    alt={item.variant?.name || \"Product\"}\n                  />\n                )}\n                <div className=\"cart-item-info\">\n                  <span className=\"cart-item-name\">{item.variant?.name}</span>\n                  <span className=\"cart-item-unit-price\">\n                    {getOrderLineItemFormattedUnitPrice(item)}\n                  </span>\n                </div>\n                <div className=\"cart-item-quantity\">\n                  <button onClick={() => handleQuantityChange(item, -1)}>-</button>\n                  <span>{item.quantity}</span>\n                  <button onClick={() => handleQuantityChange(item, 1)}>+</button>\n                </div>\n                <span className=\"cart-item-total\">\n                  {getOrderLineItemFormattedFinalPrice(item)}\n                </span>\n                <button className=\"cart-item-remove\" onClick={() => handleRemove(item)}>\n                  Remove\n                </button>\n              </div>\n            );\n          })}\n        </div>\n\n        <div className=\"cart-summary\">\n          <div className=\"cart-summary-row\">\n            <span>Subtotal</span>\n            <span>{getIkasOrderFormattedTotalPrice(cart!)}</span>\n          </div>\n          <div className=\"cart-summary-row cart-summary-total\">\n            <span>Total</span>\n            <span>{getIkasOrderFormattedTotalFinalPrice(cart!)}</span>\n          </div>\n          <button\n            className=\"cart-checkout-btn\"\n            onClick={() => Router.navigateToPage(\"CHECKOUT\")}\n          >\n            Proceed to Checkout\n          </button>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(CartSection);\n"
+          "content": "import { observer } from \"@ikas/component-utils\";\nimport {\n  cartStore,\n  hasCart,\n  changeItemQuantity,\n  removeItem,\n  getIkasOrderFormattedTotalFinalPrice,\n  getIkasOrderFormattedTotalPrice,\n  getIkasOrderTotalItemCount,\n  getOrderLineItemFormattedFinalPriceWithQuantity,\n  getOrderLineItemFormattedPriceWithQuantity,\n  hasOrderLineItemDiscount,\n  getIkasOrderLineVariantMainImage,\n  getIkasOrderLineVariantHref,\n  getOrderAdjustmentDisplayName,\n  getOrderAdjustmentFormattedAmount,\n  getCheckoutUrlFromCartStore,\n  getDefaultSrc,\n  Router,\n  IkasOrderLineItem,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction CartSection({ emptyCartMessage = \"Your cart is empty\" }: Props) {\n  const cart = cartStore.cart;\n  const isLoading = cartStore.isCartLoading;\n  const cartHasItems = hasCart(cartStore) as unknown as boolean;\n  const lineItems = cart?.orderLineItems ?? [];\n  const adjustments = cart?.orderAdjustments ?? [];\n  const totalItemCount = cart ? (getIkasOrderTotalItemCount(cart) as unknown as number) : 0;\n\n  if (isLoading) {\n    return (\n      <section className=\"cart-section\">\n        <div className=\"cart-inner\">\n          <p className=\"cart-loading\">Loading cart...</p>\n        </div>\n      </section>\n    );\n  }\n\n  if (!cartHasItems) {\n    return (\n      <section className=\"cart-section\">\n        <div className=\"cart-inner\">\n          <p className=\"cart-empty\">{emptyCartMessage}</p>\n          <button className=\"cart-continue-btn\" onClick={() => Router.navigate(\"/\")}>\n            Continue Shopping\n          </button>\n        </div>\n      </section>\n    );\n  }\n\n  const handleQuantityChange = async (item: IkasOrderLineItem, delta: number) => {\n    const newQty = item.quantity + delta;\n    if (newQty < 1) return;\n    await changeItemQuantity(item, newQty);\n  };\n\n  const handleRemove = async (item: IkasOrderLineItem) => {\n    await removeItem(item);\n  };\n\n  return (\n    <section className=\"cart-section\">\n      <div className=\"cart-inner\">\n        <h1 className=\"cart-title\">Shopping Cart ({totalItemCount} items)</h1>\n\n        <div className=\"cart-items\">\n          {lineItems.map((item) => {\n            const image = item.variant ? getIkasOrderLineVariantMainImage(item.variant) : null;\n            const href = item.variant ? getIkasOrderLineVariantHref(item.variant) : undefined;\n            const hasDiscount = hasOrderLineItemDiscount(item) as unknown as boolean;\n            return (\n              <div key={item.id} className=\"cart-item\">\n                {image && (\n                  <a href={href}>\n                    <img\n                      className=\"cart-item-image\"\n                      src={getDefaultSrc(image)}\n                      alt={item.variant?.name || \"Product\"}\n                    />\n                  </a>\n                )}\n                <div className=\"cart-item-info\">\n                  <a href={href} className=\"cart-item-name\">{item.variant?.name}</a>\n                  {hasDiscount && (\n                    <span className=\"cart-item-original-price\">\n                      {getOrderLineItemFormattedPriceWithQuantity(item)}\n                    </span>\n                  )}\n                  <span className={`cart-item-total ${hasDiscount ? \"has-discount\" : \"\"}`}>\n                    {getOrderLineItemFormattedFinalPriceWithQuantity(item)}\n                  </span>\n                </div>\n                <div className=\"cart-item-quantity\">\n                  <button onClick={() => handleQuantityChange(item, -1)}>-</button>\n                  <span>{item.quantity}</span>\n                  <button onClick={() => handleQuantityChange(item, 1)}>+</button>\n                </div>\n                <button className=\"cart-item-remove\" onClick={() => handleRemove(item)}>\n                  Remove\n                </button>\n              </div>\n            );\n          })}\n        </div>\n\n        {/* Order Adjustments (discounts, coupons, shipping fees) */}\n        {adjustments.length > 0 && (\n          <div className=\"cart-adjustments\">\n            {adjustments.map((adj: any, i: number) => (\n              <div key={i} className=\"cart-adjustment-row\">\n                <span>{getOrderAdjustmentDisplayName(adj)}</span>\n                <span>{getOrderAdjustmentFormattedAmount(adj)}</span>\n              </div>\n            ))}\n          </div>\n        )}\n\n        <div className=\"cart-summary\">\n          <div className=\"cart-summary-row\">\n            <span>Subtotal</span>\n            <span>{getIkasOrderFormattedTotalPrice(cart!)}</span>\n          </div>\n          <div className=\"cart-summary-row cart-summary-total\">\n            <span>Total</span>\n            <span>{getIkasOrderFormattedTotalFinalPrice(cart!)}</span>\n          </div>\n          <a\n            className=\"cart-checkout-btn\"\n            href={getCheckoutUrlFromCartStore(cartStore)}\n          >\n            Proceed to Checkout\n          </a>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(CartSection);\n"
         },
         {
           "filename": "types.ts",
@@ -16217,7 +16414,7 @@
         },
         {
           "filename": "styles.css",
-          "content": ".cart-section {\n  width: 100%;\n  padding: 40px 24px;\n}\n\n.cart-inner {\n  max-width: 960px;\n  margin: 0 auto;\n}\n\n.cart-title {\n  font-size: 24px;\n  font-weight: 700;\n  color: #111;\n  margin: 0 0 24px 0;\n}\n\n.cart-empty {\n  font-size: 16px;\n  color: #666;\n  text-align: center;\n  padding: 48px 0;\n}\n\n.cart-continue-btn {\n  display: block;\n  margin: 0 auto;\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 600;\n  color: #111;\n  background: #fff;\n  border: 1.5px solid #111;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n/* Cart Items */\n.cart-items {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  margin-bottom: 32px;\n}\n\n.cart-item {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 16px;\n  border: 1px solid #eee;\n  border-radius: 8px;\n}\n\n.cart-item-image {\n  width: 80px;\n  height: 80px;\n  object-fit: cover;\n  border-radius: 6px;\n  background-color: #f5f5f5;\n}\n\n.cart-item-info {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.cart-item-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: #111;\n}\n\n.cart-item-unit-price {\n  font-size: 13px;\n  color: #666;\n}\n\n.cart-item-quantity {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.cart-item-quantity button {\n  width: 32px;\n  height: 32px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background: #fff;\n  cursor: pointer;\n  font-size: 16px;\n}\n\n.cart-item-total {\n  font-size: 15px;\n  font-weight: 600;\n  color: #111;\n  min-width: 80px;\n  text-align: right;\n}\n\n.cart-item-remove {\n  padding: 4px 8px;\n  font-size: 12px;\n  color: #e53935;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n\n/* Cart Summary */\n.cart-summary {\n  border-top: 1px solid #eee;\n  padding-top: 24px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: flex-end;\n}\n\n.cart-summary-row {\n  display: flex;\n  justify-content: space-between;\n  width: 280px;\n  font-size: 14px;\n  color: #555;\n}\n\n.cart-summary-total {\n  font-size: 18px;\n  font-weight: 700;\n  color: #111;\n}\n\n.cart-checkout-btn {\n  width: 280px;\n  padding: 14px 24px;\n  font-size: 16px;\n  font-weight: 600;\n  color: #fff;\n  background-color: #111;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  margin-top: 8px;\n}\n\n.cart-checkout-btn:hover {\n  background-color: #333;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .cart-item {\n    flex-wrap: wrap;\n  }\n\n  .cart-summary {\n    align-items: stretch;\n  }\n\n  .cart-summary-row,\n  .cart-checkout-btn {\n    width: 100%;\n  }\n}\n"
+          "content": ".cart-section {\n  width: 100%;\n  padding: 40px 24px;\n}\n\n.cart-inner {\n  max-width: 960px;\n  margin: 0 auto;\n}\n\n.cart-title {\n  font-size: 24px;\n  font-weight: 700;\n  color: #111;\n  margin: 0 0 24px 0;\n}\n\n.cart-empty {\n  font-size: 16px;\n  color: #666;\n  text-align: center;\n  padding: 48px 0;\n}\n\n.cart-loading {\n  font-size: 16px;\n  color: #666;\n  text-align: center;\n  padding: 48px 0;\n}\n\n.cart-continue-btn {\n  display: block;\n  margin: 0 auto;\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 600;\n  color: #111;\n  background: #fff;\n  border: 1.5px solid #111;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n/* Cart Items */\n.cart-items {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  margin-bottom: 32px;\n}\n\n.cart-item {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: 16px;\n  border: 1px solid #eee;\n  border-radius: 8px;\n}\n\n.cart-item-image {\n  width: 80px;\n  height: 80px;\n  object-fit: cover;\n  border-radius: 6px;\n  background-color: #f5f5f5;\n}\n\n.cart-item-info {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.cart-item-name {\n  font-size: 14px;\n  font-weight: 600;\n  color: #111;\n  text-decoration: none;\n}\n\n.cart-item-name:hover {\n  text-decoration: underline;\n}\n\n.cart-item-original-price {\n  font-size: 13px;\n  color: #999;\n  text-decoration: line-through;\n}\n\n.cart-item-total {\n  font-size: 15px;\n  font-weight: 600;\n  color: #111;\n  min-width: 80px;\n}\n\n.cart-item-total.has-discount {\n  color: #e53935;\n}\n\n.cart-item-quantity {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.cart-item-quantity button {\n  width: 32px;\n  height: 32px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background: #fff;\n  cursor: pointer;\n  font-size: 16px;\n}\n\n.cart-item-remove {\n  padding: 4px 8px;\n  font-size: 12px;\n  color: #e53935;\n  background: none;\n  border: none;\n  cursor: pointer;\n}\n\n/* Order Adjustments */\n.cart-adjustments {\n  border-top: 1px solid #eee;\n  padding: 16px 0;\n  margin-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.cart-adjustment-row {\n  display: flex;\n  justify-content: space-between;\n  font-size: 14px;\n  color: #555;\n}\n\n/* Cart Summary */\n.cart-summary {\n  border-top: 1px solid #eee;\n  padding-top: 24px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: flex-end;\n}\n\n.cart-summary-row {\n  display: flex;\n  justify-content: space-between;\n  width: 280px;\n  font-size: 14px;\n  color: #555;\n}\n\n.cart-summary-total {\n  font-size: 18px;\n  font-weight: 700;\n  color: #111;\n}\n\n.cart-checkout-btn {\n  display: block;\n  width: 280px;\n  padding: 14px 24px;\n  font-size: 16px;\n  font-weight: 600;\n  color: #fff;\n  background-color: #111;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  margin-top: 8px;\n  text-align: center;\n  text-decoration: none;\n}\n\n.cart-checkout-btn:hover {\n  background-color: #333;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .cart-item {\n    flex-wrap: wrap;\n  }\n\n  .cart-summary {\n    align-items: stretch;\n  }\n\n  .cart-summary-row,\n  .cart-checkout-btn {\n    width: 100%;\n  }\n}\n"
         },
         {
           "filename": "ikas-config-snippet.json",
@@ -16225,33 +16422,289 @@
         }
       ]
     },
+    {
+      "id": "contact-form-section",
+      "title": "Contact Form Section (Complete)",
+      "description": "Complete contact form section with name, email, phone, and message fields. Uses the initContactForm/setContactForm*/submitContactForm pattern with validation and success state.",
+      "code": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getContactForm,\n  initContactForm,\n  setContactFormEmail,\n  setContactFormFirstName,\n  setContactFormLastName,\n  setContactFormPhone,\n  setContactFormMessage,\n  submitContactForm,\n  clearContactForm,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction ContactFormSection({\n  title = \"Contact Us\",\n  successMessage = \"Thank you! Your message has been sent.\",\n}: Props) {\n  const contactForm = getContactForm(customerStore);\n\n  useEffect(() => {\n    initContactForm(contactForm);\n  }, []);\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    const success = await submitContactForm(contactForm);\n    if (success) {\n      clearContactForm(contactForm);\n    }\n  };\n\n  return (\n    <section className=\"contact-section\">\n      <div className=\"contact-inner\">\n        <h1 className=\"contact-title\">{title}</h1>\n\n        {contactForm.isSuccess && (\n          <div className=\"contact-success-banner\">{successMessage}</div>\n        )}\n\n        {contactForm.isFailure && contactForm.responseMessage && (\n          <div className=\"contact-error-banner\">{contactForm.responseMessage}</div>\n        )}\n\n        <form className=\"contact-form\" onSubmit={handleSubmit}>\n          <div className=\"contact-row\">\n            <div className=\"contact-field\">\n              <label className=\"contact-label\">{contactForm.firstName.label}</label>\n              <input\n                className={`contact-input ${contactForm.firstName.hasError ? \"has-error\" : \"\"}`}\n                type=\"text\"\n                placeholder={contactForm.firstName.placeholder}\n                value={contactForm.firstName.value}\n                onInput={(e) =>\n                  setContactFormFirstName(contactForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {contactForm.firstName.hasError && contactForm.firstName.message && (\n                <span className=\"contact-field-error\">{contactForm.firstName.message}</span>\n              )}\n            </div>\n\n            <div className=\"contact-field\">\n              <label className=\"contact-label\">{contactForm.lastName.label}</label>\n              <input\n                className={`contact-input ${contactForm.lastName.hasError ? \"has-error\" : \"\"}`}\n                type=\"text\"\n                placeholder={contactForm.lastName.placeholder}\n                value={contactForm.lastName.value}\n                onInput={(e) =>\n                  setContactFormLastName(contactForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {contactForm.lastName.hasError && contactForm.lastName.message && (\n                <span className=\"contact-field-error\">{contactForm.lastName.message}</span>\n              )}\n            </div>\n          </div>\n\n          <div className=\"contact-row\">\n            <div className=\"contact-field\">\n              <label className=\"contact-label\">{contactForm.email.label}</label>\n              <input\n                className={`contact-input ${contactForm.email.hasError ? \"has-error\" : \"\"}`}\n                type=\"email\"\n                placeholder={contactForm.email.placeholder}\n                value={contactForm.email.value}\n                onInput={(e) =>\n                  setContactFormEmail(contactForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {contactForm.email.hasError && contactForm.email.message && (\n                <span className=\"contact-field-error\">{contactForm.email.message}</span>\n              )}\n            </div>\n\n            <div className=\"contact-field\">\n              <label className=\"contact-label\">{contactForm.phone.label}</label>\n              <input\n                className={`contact-input ${contactForm.phone.hasError ? \"has-error\" : \"\"}`}\n                type=\"tel\"\n                placeholder={contactForm.phone.placeholder}\n                value={contactForm.phone.value}\n                onInput={(e) =>\n                  setContactFormPhone(contactForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {contactForm.phone.hasError && contactForm.phone.message && (\n                <span className=\"contact-field-error\">{contactForm.phone.message}</span>\n              )}\n            </div>\n          </div>\n\n          <div className=\"contact-field\">\n            <label className=\"contact-label\">{contactForm.message.label}</label>\n            <textarea\n              className={`contact-textarea ${contactForm.message.hasError ? \"has-error\" : \"\"}`}\n              placeholder={contactForm.message.placeholder}\n              value={contactForm.message.value}\n              rows={5}\n              onInput={(e) =>\n                setContactFormMessage(contactForm, (e.target as HTMLTextAreaElement).value)\n              }\n            />\n            {contactForm.message.hasError && contactForm.message.message && (\n              <span className=\"contact-field-error\">{contactForm.message.message}</span>\n            )}\n          </div>\n\n          <button\n            className=\"contact-submit-btn\"\n            type=\"submit\"\n            disabled={contactForm.isSubmitting}\n          >\n            {contactForm.isSubmitting ? \"Sending...\" : \"Send Message\"}\n          </button>\n        </form>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(ContactFormSection);\n",
+      "relatedFunctions": [
+        "initContactForm",
+        "setContactFormEmail",
+        "setContactFormFirstName",
+        "setContactFormLastName",
+        "setContactFormPhone",
+        "setContactFormMessage",
+        "submitContactForm",
+        "clearContactForm"
+      ],
+      "categories": [
+        "Form",
+        "Contact"
+      ],
+      "files": [
+        {
+          "filename": "index.tsx",
+          "content": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getContactForm,\n  initContactForm,\n  setContactFormEmail,\n  setContactFormFirstName,\n  setContactFormLastName,\n  setContactFormPhone,\n  setContactFormMessage,\n  submitContactForm,\n  clearContactForm,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction ContactFormSection({\n  title = \"Contact Us\",\n  successMessage = \"Thank you! Your message has been sent.\",\n}: Props) {\n  const contactForm = getContactForm(customerStore);\n\n  useEffect(() => {\n    initContactForm(contactForm);\n  }, []);\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    const success = await submitContactForm(contactForm);\n    if (success) {\n      clearContactForm(contactForm);\n    }\n  };\n\n  return (\n    <section className=\"contact-section\">\n      <div className=\"contact-inner\">\n        <h1 className=\"contact-title\">{title}</h1>\n\n        {contactForm.isSuccess && (\n          <div className=\"contact-success-banner\">{successMessage}</div>\n        )}\n\n        {contactForm.isFailure && contactForm.responseMessage && (\n          <div className=\"contact-error-banner\">{contactForm.responseMessage}</div>\n        )}\n\n        <form className=\"contact-form\" onSubmit={handleSubmit}>\n          <div className=\"contact-row\">\n            <div className=\"contact-field\">\n              <label className=\"contact-label\">{contactForm.firstName.label}</label>\n              <input\n                className={`contact-input ${contactForm.firstName.hasError ? \"has-error\" : \"\"}`}\n                type=\"text\"\n                placeholder={contactForm.firstName.placeholder}\n                value={contactForm.firstName.value}\n                onInput={(e) =>\n                  setContactFormFirstName(contactForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {contactForm.firstName.hasError && contactForm.firstName.message && (\n                <span className=\"contact-field-error\">{contactForm.firstName.message}</span>\n              )}\n            </div>\n\n            <div className=\"contact-field\">\n              <label className=\"contact-label\">{contactForm.lastName.label}</label>\n              <input\n                className={`contact-input ${contactForm.lastName.hasError ? \"has-error\" : \"\"}`}\n                type=\"text\"\n                placeholder={contactForm.lastName.placeholder}\n                value={contactForm.lastName.value}\n                onInput={(e) =>\n                  setContactFormLastName(contactForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {contactForm.lastName.hasError && contactForm.lastName.message && (\n                <span className=\"contact-field-error\">{contactForm.lastName.message}</span>\n              )}\n            </div>\n          </div>\n\n          <div className=\"contact-row\">\n            <div className=\"contact-field\">\n              <label className=\"contact-label\">{contactForm.email.label}</label>\n              <input\n                className={`contact-input ${contactForm.email.hasError ? \"has-error\" : \"\"}`}\n                type=\"email\"\n                placeholder={contactForm.email.placeholder}\n                value={contactForm.email.value}\n                onInput={(e) =>\n                  setContactFormEmail(contactForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {contactForm.email.hasError && contactForm.email.message && (\n                <span className=\"contact-field-error\">{contactForm.email.message}</span>\n              )}\n            </div>\n\n            <div className=\"contact-field\">\n              <label className=\"contact-label\">{contactForm.phone.label}</label>\n              <input\n                className={`contact-input ${contactForm.phone.hasError ? \"has-error\" : \"\"}`}\n                type=\"tel\"\n                placeholder={contactForm.phone.placeholder}\n                value={contactForm.phone.value}\n                onInput={(e) =>\n                  setContactFormPhone(contactForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {contactForm.phone.hasError && contactForm.phone.message && (\n                <span className=\"contact-field-error\">{contactForm.phone.message}</span>\n              )}\n            </div>\n          </div>\n\n          <div className=\"contact-field\">\n            <label className=\"contact-label\">{contactForm.message.label}</label>\n            <textarea\n              className={`contact-textarea ${contactForm.message.hasError ? \"has-error\" : \"\"}`}\n              placeholder={contactForm.message.placeholder}\n              value={contactForm.message.value}\n              rows={5}\n              onInput={(e) =>\n                setContactFormMessage(contactForm, (e.target as HTMLTextAreaElement).value)\n              }\n            />\n            {contactForm.message.hasError && contactForm.message.message && (\n              <span className=\"contact-field-error\">{contactForm.message.message}</span>\n            )}\n          </div>\n\n          <button\n            className=\"contact-submit-btn\"\n            type=\"submit\"\n            disabled={contactForm.isSubmitting}\n          >\n            {contactForm.isSubmitting ? \"Sending...\" : \"Send Message\"}\n          </button>\n        </form>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(ContactFormSection);\n"
+        },
+        {
+          "filename": "types.ts",
+          "content": "export interface Props {\n  title?: string;\n  successMessage?: string;\n}\n"
+        },
+        {
+          "filename": "styles.css",
+          "content": ".contact-section {\n  width: 100%;\n  padding: 64px 24px;\n}\n\n.contact-inner {\n  max-width: 640px;\n  margin: 0 auto;\n}\n\n.contact-title {\n  font-size: 28px;\n  font-weight: 700;\n  color: #111;\n  margin: 0 0 24px 0;\n  text-align: center;\n}\n\n.contact-success-banner {\n  padding: 12px 16px;\n  font-size: 14px;\n  color: #1b5e20;\n  background-color: #e8f5e9;\n  border-radius: 8px;\n  margin-bottom: 20px;\n  text-align: center;\n}\n\n.contact-error-banner {\n  padding: 12px 16px;\n  font-size: 14px;\n  color: #b71c1c;\n  background-color: #ffebee;\n  border-radius: 8px;\n  margin-bottom: 20px;\n}\n\n.contact-form {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.contact-row {\n  display: flex;\n  gap: 12px;\n}\n\n.contact-row .contact-field {\n  flex: 1;\n}\n\n.contact-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.contact-label {\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n}\n\n.contact-input,\n.contact-textarea {\n  padding: 12px 14px;\n  font-size: 15px;\n  border: 1.5px solid #ddd;\n  border-radius: 8px;\n  outline: none;\n  transition: border-color 0.15s ease;\n  font-family: inherit;\n}\n\n.contact-input:focus,\n.contact-textarea:focus {\n  border-color: #111;\n}\n\n.contact-input.has-error,\n.contact-textarea.has-error {\n  border-color: #e53935;\n}\n\n.contact-textarea {\n  resize: vertical;\n  min-height: 120px;\n}\n\n.contact-field-error {\n  font-size: 12px;\n  color: #e53935;\n}\n\n.contact-submit-btn {\n  padding: 14px 24px;\n  font-size: 16px;\n  font-weight: 600;\n  color: #fff;\n  background-color: #111;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  margin-top: 8px;\n}\n\n.contact-submit-btn:hover:not(:disabled) {\n  background-color: #333;\n}\n\n.contact-submit-btn:disabled {\n  background-color: #ccc;\n  cursor: not-allowed;\n}\n\n@media (max-width: 480px) {\n  .contact-row {\n    flex-direction: column;\n  }\n}\n"
+        },
+        {
+          "filename": "ikas-config-snippet.json",
+          "content": "{\n  \"id\": \"contact-form\",\n  \"name\": \"Contact Form\",\n  \"type\": \"section\",\n  \"entry\": \"./src/components/ContactForm/index.tsx\",\n  \"styles\": \"./src/components/ContactForm/styles.css\",\n  \"props\": [\n    {\n      \"name\": \"title\",\n      \"displayName\": \"Section Title\",\n      \"type\": \"TEXT\",\n      \"defaultValue\": \"Contact Us\"\n    },\n    {\n      \"name\": \"successMessage\",\n      \"displayName\": \"Success Message\",\n      \"type\": \"TEXT\",\n      \"defaultValue\": \"Thank you! Your message has been sent.\"\n    }\n  ]\n}\n"
+        }
+      ]
+    },
+    {
+      "id": "coupon-code",
+      "title": "Coupon Code",
+      "description": "Coupon code input with apply (initCouponCodeForm/setCouponCodeFormCouponCode/submitCouponCodeForm), remove (removeCouponCodeForm), and clear (clearCouponCodeForm). Reads applied coupon from IkasCart.couponCode.",
+      "code": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  cartStore,\n  customerStore,\n  initCouponCodeForm,\n  setCouponCodeFormCouponCode,\n  submitCouponCodeForm,\n  removeCouponCodeForm,\n  clearCouponCodeForm,\n} from \"@ikas/bp-storefront\";\n\nfunction CouponCode() {\n  const cart = cartStore.cart;\n  const couponForm = customerStore.couponCodeForm;\n  const appliedCoupon = cart?.couponCode;\n\n  useEffect(() => {\n    if (couponForm) {\n      initCouponCodeForm(couponForm);\n    }\n  }, [couponForm]);\n\n  if (!couponForm) return null;\n\n  const handleApply = async (e: Event) => {\n    e.preventDefault();\n    await submitCouponCodeForm(couponForm);\n  };\n\n  const handleRemove = async () => {\n    await removeCouponCodeForm(couponForm);\n  };\n\n  const handleClear = () => {\n    clearCouponCodeForm(customerStore);\n  };\n\n  return (\n    <div className=\"coupon-code\">\n      {appliedCoupon ? (\n        <div className=\"coupon-applied\">\n          <span>Coupon applied: <strong>{appliedCoupon}</strong></span>\n          <button onClick={handleRemove}>Remove</button>\n        </div>\n      ) : (\n        <form className=\"coupon-form\" onSubmit={handleApply}>\n          <input\n            type=\"text\"\n            placeholder={couponForm.couponCode?.placeholder ?? \"Enter coupon code\"}\n            value={couponForm.couponCode?.value ?? \"\"}\n            onInput={(e) => setCouponCodeFormCouponCode(couponForm, (e.target as HTMLInputElement).value)}\n            className=\"coupon-input\"\n          />\n          <button type=\"submit\" className=\"coupon-apply-btn\" disabled={couponForm.isSubmitting}>\n            {couponForm.isSubmitting ? \"Applying...\" : \"Apply\"}\n          </button>\n        </form>\n      )}\n      {couponForm.isFailure && couponForm.responseMessage && (\n        <span className=\"coupon-error\">{couponForm.responseMessage}</span>\n      )}\n    </div>\n  );\n}\n\nexport default observer(CouponCode);\n",
+      "relatedFunctions": [
+        "initCouponCodeForm",
+        "setCouponCodeFormCouponCode",
+        "submitCouponCodeForm",
+        "removeCouponCodeForm",
+        "clearCouponCodeForm",
+        "cartStore",
+        "customerStore"
+      ],
+      "categories": [
+        "Cart",
+        "Form"
+      ]
+    },
     {
       "id": "customer-auth",
       "title": "Customer Authentication",
-      "description": "Check login status, login, and logout",
-      "code": "import { customerStore, customerLogin, logout, hasCustomer, Router } from \"@ikas/bp-storefront\";\n\nasync function customerAuthExamples() {\n  // Check if logged in\n  if (hasCustomer(customerStore)) {\n    console.log(\"Welcome,\", customerStore.customer?.firstName);\n  }\n\n  // Login\n  const email = \"user@example.com\";\n  const password = \"password123\";\n  const result = await customerLogin(customerStore, email, password);\n  if (result.isSuccess) {\n    Router.navigateToPage(\"ACCOUNT\");\n  }\n\n  // Logout\n  await logout(customerStore);\n}\n\nexport default customerAuthExamples;\n",
+      "description": "Complete customer auth patterns: waitForCustomerStoreInit for async init, email/password login, social login (socialLogin + SocialLoginProvider), handleSocialLogin callback with HandleSocialLoginReturnType status, logout, and getCurrentPath for routing context.",
+      "code": "import {\n  customerStore,\n  hasCustomer,\n  customerLogin,\n  logout,\n  waitForCustomerStoreInit,\n  handleSocialLogin,\n  socialLogin,\n  getCurrentPath,\n  Router,\n} from \"@ikas/bp-storefront\";\n\n/** Wait for customer store initialization before checking auth state */\nasync function ensureCustomerStoreReady() {\n  await waitForCustomerStoreInit(customerStore);\n  return hasCustomer(customerStore);\n}\n\n/** Standard email/password login */\nasync function loginWithEmail(email: string, password: string) {\n  const result = await customerLogin(customerStore, email, password);\n  if (result.isSuccess) {\n    Router.navigateToPage(\"ACCOUNT\");\n  }\n  return result;\n}\n\n/** Social login — redirect to provider's OAuth page */\nasync function loginWithSocial(provider: \"GOOGLE\" | \"FACEBOOK\" | \"APPLE\") {\n  // SocialLoginProvider enum values: \"GOOGLE\", \"FACEBOOK\", \"APPLE\"\n  await socialLogin(customerStore, provider as any);\n  // User is redirected to provider's login page\n}\n\n/** Handle social login callback — call on your login page to complete OAuth flow */\nasync function handleSocialLoginCallback() {\n  const result = await handleSocialLogin(customerStore);\n  // HandleSocialLoginReturnType has .status (\"success\" | \"fail\") and optional .message\n  if (result.status === \"success\") {\n    Router.navigateToPage(\"ACCOUNT\");\n  } else {\n    console.error(\"Social login failed:\", result.message);\n  }\n  return result;\n}\n\n/** Logout current customer */\nasync function logoutCustomer() {\n  await logout(customerStore);\n  Router.navigateToPage(\"LOGIN\");\n}\n\n/** Get current path for routing context */\nfunction checkCurrentPath() {\n  const path = Router.getCurrentPath();\n  return path;\n}\n\n/** Customer auth usage examples */\nasync function customerAuthExamples() {\n  // 1. Wait for store to initialize before checking state\n  const isReady = await ensureCustomerStoreReady();\n\n  // 2. Check if logged in\n  if (hasCustomer(customerStore)) {\n    console.log(\"Welcome,\", customerStore.customer?.firstName);\n  }\n\n  // 3. Login with email\n  await loginWithEmail(\"user@example.com\", \"password123\");\n\n  // 4. Social login\n  await loginWithSocial(\"GOOGLE\");\n\n  // 5. Handle social login callback (on login page after redirect)\n  await handleSocialLoginCallback();\n\n  // 6. Logout\n  await logoutCustomer();\n}\n\nexport default customerAuthExamples;\n",
       "relatedFunctions": [
+        "customerStore",
         "customerLogin",
         "logout",
-        "hasCustomer"
+        "hasCustomer",
+        "waitForCustomerStoreInit",
+        "handleSocialLogin",
+        "socialLogin",
+        "Router.navigate",
+        "Router.navigateToPage",
+        "Router.getCurrentPath"
       ],
       "categories": [
         "Customer"
       ]
     },
+    {
+      "id": "faq-section",
+      "title": "FAQ Accordion Section (Complete)",
+      "description": "Complete FAQ section with accordion-style question/answer pairs. Uses static TEXT props for questions and answers with toggle state management. Commonly reused across multiple pages (about, contact, product detail).",
+      "code": "import { useState } from \"preact/hooks\";\nimport { Props, FaqItem } from \"./types\";\n\nexport default function FaqSection({\n  title = \"Frequently Asked Questions\",\n  items = [],\n}: Props) {\n  const [openIndex, setOpenIndex] = useState<number | null>(null);\n\n  const handleToggle = (index: number) => {\n    setOpenIndex(openIndex === index ? null : index);\n  };\n\n  return (\n    <section className=\"faq-section\">\n      <div className=\"faq-inner\">\n        <h2 className=\"faq-title\">{title}</h2>\n\n        {items.length === 0 && (\n          <p className=\"faq-empty\">No questions added yet.</p>\n        )}\n\n        <div className=\"faq-list\">\n          {items.map((item: FaqItem, index: number) => {\n            const isOpen = openIndex === index;\n            return (\n              <div\n                key={index}\n                className={`faq-item ${isOpen ? \"faq-item-open\" : \"\"}`}\n              >\n                <button\n                  className=\"faq-question\"\n                  onClick={() => handleToggle(index)}\n                  aria-expanded={isOpen}\n                >\n                  <span>{item.question}</span>\n                  <span className=\"faq-icon\">{isOpen ? \"−\" : \"+\"}</span>\n                </button>\n                {isOpen && (\n                  <div className=\"faq-answer\">\n                    <p>{item.answer}</p>\n                  </div>\n                )}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
+      "relatedFunctions": [],
+      "categories": [
+        "Content",
+        "FAQ"
+      ],
+      "files": [
+        {
+          "filename": "index.tsx",
+          "content": "import { useState } from \"preact/hooks\";\nimport { Props, FaqItem } from \"./types\";\n\nexport default function FaqSection({\n  title = \"Frequently Asked Questions\",\n  items = [],\n}: Props) {\n  const [openIndex, setOpenIndex] = useState<number | null>(null);\n\n  const handleToggle = (index: number) => {\n    setOpenIndex(openIndex === index ? null : index);\n  };\n\n  return (\n    <section className=\"faq-section\">\n      <div className=\"faq-inner\">\n        <h2 className=\"faq-title\">{title}</h2>\n\n        {items.length === 0 && (\n          <p className=\"faq-empty\">No questions added yet.</p>\n        )}\n\n        <div className=\"faq-list\">\n          {items.map((item: FaqItem, index: number) => {\n            const isOpen = openIndex === index;\n            return (\n              <div\n                key={index}\n                className={`faq-item ${isOpen ? \"faq-item-open\" : \"\"}`}\n              >\n                <button\n                  className=\"faq-question\"\n                  onClick={() => handleToggle(index)}\n                  aria-expanded={isOpen}\n                >\n                  <span>{item.question}</span>\n                  <span className=\"faq-icon\">{isOpen ? \"−\" : \"+\"}</span>\n                </button>\n                {isOpen && (\n                  <div className=\"faq-answer\">\n                    <p>{item.answer}</p>\n                  </div>\n                )}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </section>\n  );\n}\n"
+        },
+        {
+          "filename": "types.ts",
+          "content": "export interface FaqItem {\n  question: string;\n  answer: string;\n}\n\nexport interface Props {\n  title?: string;\n  items?: FaqItem[];\n}\n"
+        },
+        {
+          "filename": "styles.css",
+          "content": ".faq-section {\n  width: 100%;\n  padding: 64px 24px;\n}\n\n.faq-inner {\n  max-width: 720px;\n  margin: 0 auto;\n}\n\n.faq-title {\n  font-size: 28px;\n  font-weight: 700;\n  color: #111;\n  margin: 0 0 32px 0;\n  text-align: center;\n}\n\n.faq-empty {\n  font-size: 16px;\n  color: #666;\n  text-align: center;\n}\n\n.faq-list {\n  display: flex;\n  flex-direction: column;\n}\n\n.faq-item {\n  border-bottom: 1px solid #eee;\n}\n\n.faq-question {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 20px 0;\n  font-size: 16px;\n  font-weight: 500;\n  color: #111;\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  gap: 16px;\n}\n\n.faq-question:hover {\n  color: #333;\n}\n\n.faq-icon {\n  font-size: 20px;\n  font-weight: 300;\n  flex-shrink: 0;\n  color: #666;\n}\n\n.faq-answer {\n  padding: 0 0 20px 0;\n}\n\n.faq-answer p {\n  font-size: 15px;\n  line-height: 1.7;\n  color: #555;\n  margin: 0;\n}\n\n.faq-item-open .faq-question {\n  font-weight: 600;\n}\n"
+        },
+        {
+          "filename": "ikas-config-snippet.json",
+          "content": "{\n  \"id\": \"faq\",\n  \"name\": \"FAQ\",\n  \"type\": \"section\",\n  \"entry\": \"./src/components/FAQ/index.tsx\",\n  \"styles\": \"./src/components/FAQ/styles.css\",\n  \"props\": [\n    {\n      \"name\": \"title\",\n      \"displayName\": \"Section Title\",\n      \"type\": \"TEXT\",\n      \"defaultValue\": \"Frequently Asked Questions\"\n    },\n    {\n      \"name\": \"items\",\n      \"displayName\": \"FAQ Items\",\n      \"type\": \"COMPONENT_LIST\",\n      \"componentProps\": [\n        {\n          \"name\": \"question\",\n          \"displayName\": \"Question\",\n          \"type\": \"TEXT\",\n          \"required\": true\n        },\n        {\n          \"name\": \"answer\",\n          \"displayName\": \"Answer\",\n          \"type\": \"TEXT\",\n          \"required\": true\n        }\n      ]\n    }\n  ]\n}\n"
+        }
+      ]
+    },
     {
       "id": "favorites",
       "title": "Favorites / Wishlist",
-      "description": "Add and remove products from the wishlist",
-      "code": "import {\n  isFavoriteIkasProduct,\n  addIkasProductToFavorites,\n  removeIkasProductFromFavorites,\n  IkasProduct,\n} from \"@ikas/bp-storefront\";\n\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\nexport default FavoriteButton;\n",
+      "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",
       "relatedFunctions": [
         "isFavoriteIkasProduct",
         "addIkasProductToFavorites",
-        "removeIkasProductFromFavorites"
+        "removeIkasProductFromFavorites",
+        "getFavoriteProducts",
+        "getSelectedProductVariant",
+        "getSelectedProductVariantHref",
+        "getProductVariantFormattedFinalPrice",
+        "getProductVariantFormattedSellPrice",
+        "hasProductVariantDiscount",
+        "getProductVariantMainImage",
+        "getDefaultSrc",
+        "customerStore"
+      ],
+      "categories": [
+        "Customer",
+        "ProductList"
+      ]
+    },
+    {
+      "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",
+      "relatedFunctions": [
+        "getFavoriteProducts",
+        "removeIkasProductFromFavorites",
+        "getSelectedProductVariant",
+        "getSelectedProductVariantHref",
+        "getProductVariantFormattedFinalPrice",
+        "getProductVariantFormattedSellPrice",
+        "hasProductVariantDiscount",
+        "getProductVariantMainImage",
+        "getDefaultSrc",
+        "customerStore"
       ],
       "categories": [
         "Customer",
         "ProductList"
+      ],
+      "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"
+        },
+        {
+          "filename": "types.ts",
+          "content": "export interface Props {}\n"
+        },
+        {
+          "filename": "styles.css",
+          "content": ".favorites-page { width: 100%; padding: 40px 24px; }\n.favorites-inner { max-width: 1000px; margin: 0 auto; }\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.favorites-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }\n.favorites-card { border: 1px solid #eee; border-radius: 8px; overflow: hidden; }\n.favorites-card-img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #f5f5f5; display: block; }\n.favorites-card-info { padding: 12px; }\n.favorites-card-name { font-size: 14px; font-weight: 600; color: #111; text-decoration: none; display: block; margin-bottom: 4px; }\n.favorites-card-price { font-size: 15px; font-weight: 700; }\n.favorites-card-old-price { text-decoration: line-through; color: #999; margin-right: 8px; font-weight: 400; font-size: 13px; }\n.favorites-card-remove { font-size: 13px; color: #e53935; background: none; border: none; cursor: pointer; padding: 0; margin-top: 8px; }\n@media (max-width: 768px) { .favorites-grid { grid-template-columns: repeat(2, 1fr); } }\n@media (max-width: 480px) { .favorites-grid { grid-template-columns: 1fr; } }\n"
+        },
+        {
+          "filename": "ikas-config-snippet.json",
+          "content": "{ \"id\": \"favorites-page\", \"name\": \"Favorites Page\", \"type\": \"section\", \"props\": [] }\n"
+        }
+      ]
+    },
+    {
+      "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",
+      "relatedFunctions": [],
+      "categories": [
+        "Navigation",
+        "Footer"
+      ],
+      "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"
+        },
+        {
+          "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"
+        },
+        {
+          "filename": "styles.css",
+          "content": ".footer-section {\n  width: 100%;\n  background-color: #f9fafb;\n  border-top: 1px solid #eee;\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: 48px;\n}\n\n/* Brand */\n.footer-brand {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.footer-logo {\n  height: 36px;\n  width: auto;\n}\n\n.footer-logo-text {\n  font-size: 20px;\n  font-weight: 700;\n  color: #111;\n}\n\n.footer-description {\n  font-size: 14px;\n  color: #666;\n  line-height: 1.6;\n  max-width: 300px;\n  margin: 0;\n}\n\n/* Link Columns */\n.footer-link-column {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.footer-column-title {\n  font-size: 14px;\n  font-weight: 700;\n  color: #111;\n  margin: 0;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.footer-links {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.footer-link {\n  font-size: 14px;\n  color: #666;\n  text-decoration: none;\n  transition: color 0.15s ease;\n}\n\n.footer-link:hover {\n  color: #111;\n}\n\n/* Bottom */\n.footer-bottom {\n  border-top: 1px solid #eee;\n  padding-top: 24px;\n}\n\n.footer-copyright {\n  font-size: 13px;\n  color: #999;\n  margin: 0;\n  text-align: center;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .footer-grid {\n    grid-template-columns: 1fr;\n    gap: 32px;\n  }\n}\n"
+        },
+        {
+          "filename": "ikas-config-snippet.json",
+          "content": "{\n  \"id\": \"footer\",\n  \"name\": \"Footer\",\n  \"type\": \"section\",\n  \"entry\": \"./src/components/Footer/index.tsx\",\n  \"styles\": \"./src/components/Footer/styles.css\",\n  \"props\": [\n    {\n      \"name\": \"logo\",\n      \"displayName\": \"Logo\",\n      \"type\": \"IMAGE\"\n    },\n    {\n      \"name\": \"description\",\n      \"displayName\": \"Description\",\n      \"type\": \"TEXT\",\n      \"defaultValue\": \"Your one-stop shop for quality products.\"\n    },\n    {\n      \"name\": \"linkColumn1Title\",\n      \"displayName\": \"Column 1 Title\",\n      \"type\": \"TEXT\",\n      \"defaultValue\": \"Shop\"\n    },\n    {\n      \"name\": \"linkColumn1\",\n      \"displayName\": \"Column 1 Links\",\n      \"type\": \"LIST_OF_LINK\"\n    },\n    {\n      \"name\": \"linkColumn2Title\",\n      \"displayName\": \"Column 2 Title\",\n      \"type\": \"TEXT\",\n      \"defaultValue\": \"Company\"\n    },\n    {\n      \"name\": \"linkColumn2\",\n      \"displayName\": \"Column 2 Links\",\n      \"type\": \"LIST_OF_LINK\"\n    },\n    {\n      \"name\": \"copyright\",\n      \"displayName\": \"Copyright Text\",\n      \"type\": \"TEXT\",\n      \"defaultValue\": \"All rights reserved.\"\n    }\n  ]\n}\n"
+        }
+      ]
+    },
+    {
+      "id": "forgot-password-section",
+      "title": "Forgot Password Section (Complete)",
+      "description": "Complete forgot password section with email input for password recovery. Uses the initForgotPasswordForm/setForgotPasswordFormEmail/submitForgotPasswordForm pattern with success and error states.",
+      "code": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getForgotPasswordForm,\n  initForgotPasswordForm,\n  setForgotPasswordFormEmail,\n  submitForgotPasswordForm,\n  Router,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction ForgotPasswordSection({\n  successMessage = \"Password reset link has been sent to your email.\",\n}: Props) {\n  const forgotForm = getForgotPasswordForm(customerStore);\n\n  useEffect(() => {\n    initForgotPasswordForm(forgotForm);\n  }, []);\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    await submitForgotPasswordForm(forgotForm);\n  };\n\n  return (\n    <section className=\"forgot-section\">\n      <div className=\"forgot-inner\">\n        <h1 className=\"forgot-title\">Forgot Password</h1>\n        <p className=\"forgot-subtitle\">\n          Enter your email address and we'll send you a link to reset your password.\n        </p>\n\n        {forgotForm.isSuccess && (\n          <div className=\"forgot-success-banner\">{successMessage}</div>\n        )}\n\n        {forgotForm.isFailure && forgotForm.responseMessage && (\n          <div className=\"forgot-error-banner\">{forgotForm.responseMessage}</div>\n        )}\n\n        {!forgotForm.isSuccess && (\n          <form className=\"forgot-form\" onSubmit={handleSubmit}>\n            <div className=\"forgot-field\">\n              <label className=\"forgot-label\">{forgotForm.email.label}</label>\n              <input\n                className={`forgot-input ${forgotForm.email.hasError ? \"has-error\" : \"\"}`}\n                type=\"email\"\n                placeholder={forgotForm.email.placeholder}\n                value={forgotForm.email.value}\n                onInput={(e) =>\n                  setForgotPasswordFormEmail(forgotForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {forgotForm.email.hasError && forgotForm.email.message && (\n                <span className=\"forgot-field-error\">{forgotForm.email.message}</span>\n              )}\n            </div>\n\n            <button\n              className=\"forgot-submit-btn\"\n              type=\"submit\"\n              disabled={forgotForm.isSubmitting}\n            >\n              {forgotForm.isSubmitting ? \"Sending...\" : \"Send Reset Link\"}\n            </button>\n          </form>\n        )}\n\n        <p className=\"forgot-back-link\">\n          <a\n            href=\"#\"\n            onClick={(e) => {\n              e.preventDefault();\n              Router.navigateToPage(\"LOGIN\");\n            }}\n          >\n            Back to Sign In\n          </a>\n        </p>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(ForgotPasswordSection);\n",
+      "relatedFunctions": [
+        "initForgotPasswordForm",
+        "setForgotPasswordFormEmail",
+        "submitForgotPasswordForm",
+        "customerStore",
+        "Router.navigate",
+        "Router.navigateToPage"
+      ],
+      "categories": [
+        "Customer",
+        "Form"
+      ],
+      "files": [
+        {
+          "filename": "index.tsx",
+          "content": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getForgotPasswordForm,\n  initForgotPasswordForm,\n  setForgotPasswordFormEmail,\n  submitForgotPasswordForm,\n  Router,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction ForgotPasswordSection({\n  successMessage = \"Password reset link has been sent to your email.\",\n}: Props) {\n  const forgotForm = getForgotPasswordForm(customerStore);\n\n  useEffect(() => {\n    initForgotPasswordForm(forgotForm);\n  }, []);\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    await submitForgotPasswordForm(forgotForm);\n  };\n\n  return (\n    <section className=\"forgot-section\">\n      <div className=\"forgot-inner\">\n        <h1 className=\"forgot-title\">Forgot Password</h1>\n        <p className=\"forgot-subtitle\">\n          Enter your email address and we'll send you a link to reset your password.\n        </p>\n\n        {forgotForm.isSuccess && (\n          <div className=\"forgot-success-banner\">{successMessage}</div>\n        )}\n\n        {forgotForm.isFailure && forgotForm.responseMessage && (\n          <div className=\"forgot-error-banner\">{forgotForm.responseMessage}</div>\n        )}\n\n        {!forgotForm.isSuccess && (\n          <form className=\"forgot-form\" onSubmit={handleSubmit}>\n            <div className=\"forgot-field\">\n              <label className=\"forgot-label\">{forgotForm.email.label}</label>\n              <input\n                className={`forgot-input ${forgotForm.email.hasError ? \"has-error\" : \"\"}`}\n                type=\"email\"\n                placeholder={forgotForm.email.placeholder}\n                value={forgotForm.email.value}\n                onInput={(e) =>\n                  setForgotPasswordFormEmail(forgotForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {forgotForm.email.hasError && forgotForm.email.message && (\n                <span className=\"forgot-field-error\">{forgotForm.email.message}</span>\n              )}\n            </div>\n\n            <button\n              className=\"forgot-submit-btn\"\n              type=\"submit\"\n              disabled={forgotForm.isSubmitting}\n            >\n              {forgotForm.isSubmitting ? \"Sending...\" : \"Send Reset Link\"}\n            </button>\n          </form>\n        )}\n\n        <p className=\"forgot-back-link\">\n          <a\n            href=\"#\"\n            onClick={(e) => {\n              e.preventDefault();\n              Router.navigateToPage(\"LOGIN\");\n            }}\n          >\n            Back to Sign In\n          </a>\n        </p>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(ForgotPasswordSection);\n"
+        },
+        {
+          "filename": "types.ts",
+          "content": "export interface Props {\n  successMessage?: string;\n}\n"
+        },
+        {
+          "filename": "styles.css",
+          "content": ".forgot-section {\n  width: 100%;\n  padding: 64px 24px;\n  min-height: 60vh;\n  display: flex;\n  align-items: center;\n}\n\n.forgot-inner {\n  max-width: 400px;\n  margin: 0 auto;\n  width: 100%;\n}\n\n.forgot-title {\n  font-size: 28px;\n  font-weight: 700;\n  color: #111;\n  margin: 0 0 8px 0;\n  text-align: center;\n}\n\n.forgot-subtitle {\n  font-size: 14px;\n  color: #666;\n  text-align: center;\n  margin: 0 0 24px 0;\n  line-height: 1.5;\n}\n\n.forgot-success-banner {\n  padding: 12px 16px;\n  font-size: 14px;\n  color: #1b5e20;\n  background-color: #e8f5e9;\n  border-radius: 8px;\n  margin-bottom: 20px;\n  text-align: center;\n}\n\n.forgot-error-banner {\n  padding: 12px 16px;\n  font-size: 14px;\n  color: #b71c1c;\n  background-color: #ffebee;\n  border-radius: 8px;\n  margin-bottom: 20px;\n}\n\n.forgot-form {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.forgot-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.forgot-label {\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n}\n\n.forgot-input {\n  padding: 12px 14px;\n  font-size: 15px;\n  border: 1.5px solid #ddd;\n  border-radius: 8px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.forgot-input:focus {\n  border-color: #111;\n}\n\n.forgot-input.has-error {\n  border-color: #e53935;\n}\n\n.forgot-field-error {\n  font-size: 12px;\n  color: #e53935;\n}\n\n.forgot-submit-btn {\n  padding: 14px 24px;\n  font-size: 16px;\n  font-weight: 600;\n  color: #fff;\n  background-color: #111;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  margin-top: 8px;\n}\n\n.forgot-submit-btn:hover:not(:disabled) {\n  background-color: #333;\n}\n\n.forgot-submit-btn:disabled {\n  background-color: #ccc;\n  cursor: not-allowed;\n}\n\n.forgot-back-link {\n  font-size: 14px;\n  text-align: center;\n  margin-top: 24px;\n}\n\n.forgot-back-link a {\n  color: #111;\n  font-weight: 600;\n  text-decoration: none;\n}\n\n.forgot-back-link a:hover {\n  text-decoration: underline;\n}\n"
+        },
+        {
+          "filename": "ikas-config-snippet.json",
+          "content": "{\n  \"id\": \"forgot-password\",\n  \"name\": \"Forgot Password\",\n  \"type\": \"section\",\n  \"entry\": \"./src/components/ForgotPassword/index.tsx\",\n  \"styles\": \"./src/components/ForgotPassword/styles.css\",\n  \"props\": [\n    {\n      \"name\": \"successMessage\",\n      \"displayName\": \"Success Message\",\n      \"type\": \"TEXT\",\n      \"defaultValue\": \"Password reset link has been sent to your email.\"\n    }\n  ]\n}\n"
+        }
+      ]
+    },
+    {
+      "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",
+      "relatedFunctions": [
+        "cartStore",
+        "customerStore",
+        "hasCustomer",
+        "hasCart",
+        "getIkasOrderTotalItemCount",
+        "getIkasOrderFormattedTotalPrice",
+        "getIkasOrderLineVariantMainImage",
+        "getIkasOrderLineVariantHref",
+        "getOrderLineItemFormattedFinalPrice",
+        "getOrderAdjustmentDisplayName",
+        "getOrderAdjustmentFormattedAmount",
+        "changeItemQuantity",
+        "removeItem",
+        "getCheckoutUrlFromCartStore",
+        "getDefaultSrc",
+        "Router.navigate",
+        "Router.navigateToPage"
+      ],
+      "categories": [
+        "Navigation",
+        "Header",
+        "Cart",
+        "Customer"
+      ],
+      "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"
+        },
+        {
+          "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"
+        },
+        {
+          "filename": "styles.css",
+          "content": ".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  font-weight: 500;\n}\n\n.header-main {\n  border-bottom: 1px solid #eee;\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/* Logo */\n.header-logo {\n  text-decoration: none;\n  flex-shrink: 0;\n}\n\n.header-logo-img {\n  height: 40px;\n  width: auto;\n  display: block;\n}\n\n.header-logo-text {\n  font-size: 22px;\n  font-weight: 700;\n  color: #111;\n}\n\n/* Navigation */\n.header-nav {\n  display: flex;\n  gap: 24px;\n  flex: 1;\n  justify-content: center;\n}\n\n.header-nav-link {\n  font-size: 14px;\n  font-weight: 500;\n  color: #333;\n  text-decoration: none;\n  white-space: nowrap;\n  transition: color 0.15s ease;\n}\n\n.header-nav-link:hover {\n  color: #111;\n}\n\n/* Icons */\n.header-icons {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.header-icon-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #333;\n  padding: 4px;\n  position: relative;\n}\n\n.header-cart-badge {\n  position: absolute;\n  top: -4px;\n  right: -6px;\n  background: #111;\n  color: #fff;\n  font-size: 10px;\n  font-weight: 700;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Hamburger */\n.header-hamburger {\n  display: none;\n  flex-direction: column;\n  gap: 4px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px;\n}\n\n.header-hamburger span {\n  display: block;\n  width: 20px;\n  height: 2px;\n  background: #333;\n}\n\n/* Mobile Menu */\n.header-mobile-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 200;\n}\n\n.header-mobile-backdrop {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n}\n\n.header-mobile-menu {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 280px;\n  background: #fff;\n  padding: 24px;\n  overflow-y: auto;\n}\n\n.header-mobile-close {\n  font-size: 28px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #333;\n  margin-bottom: 16px;\n}\n\n.header-mobile-nav {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.header-mobile-link {\n  font-size: 16px;\n  font-weight: 500;\n  color: #333;\n  text-decoration: none;\n  padding: 8px 0;\n  border-bottom: 1px solid #f0f0f0;\n}\n\n/* SubMenu */\n.header-nav-item {\n  position: relative;\n}\n\n.header-submenu {\n  display: none;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  background: #fff;\n  box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n  border-radius: 8px;\n  padding: 12px 0;\n  min-width: 180px;\n  z-index: 50;\n}\n\n.header-nav-item:hover .header-submenu {\n  display: flex;\n  flex-direction: column;\n}\n\n.header-submenu-link {\n  padding: 8px 20px;\n  font-size: 14px;\n  color: #333;\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n.header-submenu-link:hover {\n  background: #f5f5f5;\n  color: #111;\n}\n\n/* Cart Sidebar */\n.cart-sidebar-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 300;\n}\n\n.cart-sidebar-backdrop {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n}\n\n.cart-sidebar {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 380px;\n  max-width: 100%;\n  background: #fff;\n  display: flex;\n  flex-direction: column;\n  box-shadow: -4px 0 12px rgba(0,0,0,0.1);\n}\n\n.cart-sidebar-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #eee;\n}\n\n.cart-sidebar-header h3 {\n  font-size: 18px;\n  font-weight: 700;\n  margin: 0;\n}\n\n.cart-sidebar-close {\n  font-size: 28px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #333;\n}\n\n.cart-sidebar-loading {\n  padding: 24px 20px;\n  text-align: center;\n  color: #666;\n  font-size: 14px;\n}\n\n.cart-sidebar-empty {\n  padding: 48px 20px;\n  text-align: center;\n  color: #666;\n  font-size: 14px;\n}\n\n.cart-sidebar-items {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px 20px;\n}\n\n.cart-sidebar-item {\n  display: flex;\n  gap: 12px;\n  padding: 12px 0;\n  border-bottom: 1px solid #f5f5f5;\n  position: relative;\n}\n\n.cart-sidebar-item-img {\n  width: 64px;\n  height: 64px;\n  object-fit: cover;\n  border-radius: 6px;\n  background: #f5f5f5;\n}\n\n.cart-sidebar-item-info {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.cart-sidebar-item-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: #111;\n  text-decoration: none;\n}\n\n.cart-sidebar-item-price {\n  font-size: 13px;\n  color: #666;\n}\n\n.cart-sidebar-item-qty {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: 4px;\n}\n\n.cart-sidebar-item-qty button {\n  width: 24px;\n  height: 24px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background: #fff;\n  cursor: pointer;\n  font-size: 14px;\n}\n\n.cart-sidebar-item-qty span {\n  font-size: 13px;\n  min-width: 20px;\n  text-align: center;\n}\n\n.cart-sidebar-item-remove {\n  position: absolute;\n  top: 12px;\n  right: 0;\n  background: none;\n  border: none;\n  font-size: 18px;\n  color: #999;\n  cursor: pointer;\n}\n\n.cart-sidebar-adjustments {\n  padding: 8px 20px;\n  border-top: 1px solid #eee;\n}\n\n.cart-sidebar-adj-row {\n  display: flex;\n  justify-content: space-between;\n  font-size: 13px;\n  color: #666;\n  padding: 4px 0;\n}\n\n.cart-sidebar-footer {\n  padding: 16px 20px;\n  border-top: 1px solid #eee;\n}\n\n.cart-sidebar-total {\n  display: flex;\n  justify-content: space-between;\n  font-size: 16px;\n  font-weight: 700;\n  color: #111;\n  margin-bottom: 12px;\n}\n\n.cart-sidebar-checkout-btn {\n  display: block;\n  width: 100%;\n  padding: 14px;\n  font-size: 15px;\n  font-weight: 600;\n  color: #fff;\n  background: #111;\n  border: none;\n  border-radius: 8px;\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n/* Mobile SubLinks */\n.header-mobile-sublink {\n  font-size: 14px;\n  color: #666;\n  text-decoration: none;\n  padding: 6px 0 6px 16px;\n  display: block;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .header-hamburger {\n    display: flex;\n  }\n\n  .header-nav {\n    display: none;\n  }\n}\n"
+        },
+        {
+          "filename": "ikas-config-snippet.json",
+          "content": "{\n  \"id\": \"header\",\n  \"name\": \"Header\",\n  \"type\": \"section\",\n  \"entry\": \"./src/components/Header/index.tsx\",\n  \"styles\": \"./src/components/Header/styles.css\",\n  \"props\": [\n    {\n      \"name\": \"logo\",\n      \"displayName\": \"Logo\",\n      \"type\": \"IMAGE\"\n    },\n    {\n      \"name\": \"navigationLinks\",\n      \"displayName\": \"Navigation Links\",\n      \"type\": \"LIST_OF_LINK\"\n    },\n    {\n      \"name\": \"announcementText\",\n      \"displayName\": \"Announcement Text\",\n      \"type\": \"TEXT\"\n    },\n    {\n      \"name\": \"announcementBgColor\",\n      \"displayName\": \"Announcement Background Color\",\n      \"type\": \"COLOR\",\n      \"defaultValue\": \"#111111\"\n    },\n    {\n      \"name\": \"announcementTextColor\",\n      \"displayName\": \"Announcement Text Color\",\n      \"type\": \"COLOR\",\n      \"defaultValue\": \"#ffffff\"\n    }\n  ]\n}\n"
+        }
       ]
     },
     {
@@ -16273,13 +16726,15 @@
     {
       "id": "login-section",
       "title": "Login Section (Complete)",
-      "description": "Complete login section with form validation, error display, loading state, forgot password link, and register redirect. Uses the initLoginForm/setLoginFormEmail/setLoginFormPassword/submitLoginForm pattern.",
-      "code": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getLoginForm,\n  initLoginForm,\n  setLoginFormEmail,\n  setLoginFormPassword,\n  submitLoginForm,\n  Router,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction LoginSection({\n  redirectAfterLogin = \"/account\",\n  showForgotPassword = true,\n}: Props) {\n  const loginForm = getLoginForm(customerStore);\n\n  useEffect(() => {\n    initLoginForm(loginForm);\n  }, []);\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    const success = await submitLoginForm(loginForm);\n    if (success) {\n      Router.navigate(redirectAfterLogin);\n    }\n  };\n\n  return (\n    <section className=\"login-section\">\n      <div className=\"login-inner\">\n        <h1 className=\"login-title\">Sign In</h1>\n\n        {loginForm.isFailure && loginForm.responseMessage && (\n          <div className=\"login-error-banner\">{loginForm.responseMessage}</div>\n        )}\n\n        <form className=\"login-form\" onSubmit={handleSubmit}>\n          <div className=\"login-field\">\n            <label className=\"login-label\">{loginForm.email.label}</label>\n            <input\n              className={`login-input ${loginForm.email.hasError ? \"has-error\" : \"\"}`}\n              type=\"email\"\n              placeholder={loginForm.email.placeholder}\n              value={loginForm.email.value}\n              onInput={(e) => setLoginFormEmail(loginForm, (e.target as HTMLInputElement).value)}\n            />\n            {loginForm.email.hasError && loginForm.email.message && (\n              <span className=\"login-field-error\">{loginForm.email.message}</span>\n            )}\n          </div>\n\n          <div className=\"login-field\">\n            <label className=\"login-label\">{loginForm.password.label}</label>\n            <input\n              className={`login-input ${loginForm.password.hasError ? \"has-error\" : \"\"}`}\n              type=\"password\"\n              placeholder={loginForm.password.placeholder}\n              value={loginForm.password.value}\n              onInput={(e) => setLoginFormPassword(loginForm, (e.target as HTMLInputElement).value)}\n            />\n            {loginForm.password.hasError && loginForm.password.message && (\n              <span className=\"login-field-error\">{loginForm.password.message}</span>\n            )}\n          </div>\n\n          {showForgotPassword && (\n            <a\n              className=\"login-forgot-link\"\n              href=\"#\"\n              onClick={(e) => {\n                e.preventDefault();\n                Router.navigateToPage(\"FORGOT_PASSWORD\");\n              }}\n            >\n              Forgot password?\n            </a>\n          )}\n\n          <button\n            className=\"login-submit-btn\"\n            type=\"submit\"\n            disabled={loginForm.isSubmitting}\n          >\n            {loginForm.isSubmitting ? \"Signing in...\" : \"Sign In\"}\n          </button>\n        </form>\n\n        <p className=\"login-register-link\">\n          Don't have an account?{\" \"}\n          <a\n            href=\"#\"\n            onClick={(e) => {\n              e.preventDefault();\n              Router.navigateToPage(\"REGISTER\");\n            }}\n          >\n            Create one\n          </a>\n        </p>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(LoginSection);\n",
+      "description": "Complete login section with form validation, error display, loading state, forgot password link, register redirect, social login (socialLogin + SocialLoginProvider), and handleSocialLogin callback with HandleSocialLoginReturnType status handling.",
+      "code": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getLoginForm,\n  initLoginForm,\n  setLoginFormEmail,\n  setLoginFormPassword,\n  submitLoginForm,\n  handleSocialLogin,\n  socialLogin,\n  Router,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction LoginSection({\n  redirectAfterLogin = \"/account\",\n  showForgotPassword = true,\n}: Props) {\n  const loginForm = getLoginForm(customerStore);\n\n  useEffect(() => {\n    initLoginForm(loginForm);\n    // Handle social login callback if returning from OAuth redirect\n    handleSocialLogin(customerStore).then((result) => {\n      // HandleSocialLoginReturnType: { status: \"success\" | \"fail\", message?: string }\n      if (result.status === \"success\") {\n        Router.navigate(redirectAfterLogin);\n      }\n    });\n  }, []);\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    const success = await submitLoginForm(loginForm);\n    if (success) {\n      Router.navigate(redirectAfterLogin);\n    }\n  };\n\n  const handleSocialLoginClick = async (provider: \"GOOGLE\" | \"FACEBOOK\" | \"APPLE\") => {\n    // SocialLoginProvider enum — redirects user to provider's OAuth page\n    await socialLogin(customerStore, provider as any);\n  };\n\n  return (\n    <section className=\"login-section\">\n      <div className=\"login-inner\">\n        <h1 className=\"login-title\">Sign In</h1>\n\n        {loginForm.isFailure && loginForm.responseMessage && (\n          <div className=\"login-error-banner\">{loginForm.responseMessage}</div>\n        )}\n\n        {/* Social Login Buttons */}\n        <div className=\"login-social\">\n          <button className=\"login-social-btn\" onClick={() => handleSocialLoginClick(\"GOOGLE\")}>\n            Continue with Google\n          </button>\n          <button className=\"login-social-btn\" onClick={() => handleSocialLoginClick(\"FACEBOOK\")}>\n            Continue with Facebook\n          </button>\n        </div>\n\n        <div className=\"login-divider\"><span>or</span></div>\n\n        <form className=\"login-form\" onSubmit={handleSubmit}>\n          <div className=\"login-field\">\n            <label className=\"login-label\">{loginForm.email.label}</label>\n            <input\n              className={`login-input ${loginForm.email.hasError ? \"has-error\" : \"\"}`}\n              type=\"email\"\n              placeholder={loginForm.email.placeholder}\n              value={loginForm.email.value}\n              onInput={(e) => setLoginFormEmail(loginForm, (e.target as HTMLInputElement).value)}\n            />\n            {loginForm.email.hasError && loginForm.email.message && (\n              <span className=\"login-field-error\">{loginForm.email.message}</span>\n            )}\n          </div>\n\n          <div className=\"login-field\">\n            <label className=\"login-label\">{loginForm.password.label}</label>\n            <input\n              className={`login-input ${loginForm.password.hasError ? \"has-error\" : \"\"}`}\n              type=\"password\"\n              placeholder={loginForm.password.placeholder}\n              value={loginForm.password.value}\n              onInput={(e) => setLoginFormPassword(loginForm, (e.target as HTMLInputElement).value)}\n            />\n            {loginForm.password.hasError && loginForm.password.message && (\n              <span className=\"login-field-error\">{loginForm.password.message}</span>\n            )}\n          </div>\n\n          {showForgotPassword && (\n            <a\n              className=\"login-forgot-link\"\n              href=\"#\"\n              onClick={(e) => {\n                e.preventDefault();\n                Router.navigateToPage(\"FORGOT_PASSWORD\");\n              }}\n            >\n              Forgot password?\n            </a>\n          )}\n\n          <button\n            className=\"login-submit-btn\"\n            type=\"submit\"\n            disabled={loginForm.isSubmitting}\n          >\n            {loginForm.isSubmitting ? \"Signing in...\" : \"Sign In\"}\n          </button>\n        </form>\n\n        <p className=\"login-register-link\">\n          Don't have an account?{\" \"}\n          <a\n            href=\"#\"\n            onClick={(e) => {\n              e.preventDefault();\n              Router.navigateToPage(\"REGISTER\");\n            }}\n          >\n            Create one\n          </a>\n        </p>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(LoginSection);\n",
       "relatedFunctions": [
         "initLoginForm",
         "setLoginFormEmail",
         "setLoginFormPassword",
         "submitLoginForm",
+        "handleSocialLogin",
+        "socialLogin",
         "customerStore",
         "Router.navigate",
         "Router.navigateToPage"
@@ -16292,7 +16747,7 @@
       "files": [
         {
           "filename": "index.tsx",
-          "content": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getLoginForm,\n  initLoginForm,\n  setLoginFormEmail,\n  setLoginFormPassword,\n  submitLoginForm,\n  Router,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction LoginSection({\n  redirectAfterLogin = \"/account\",\n  showForgotPassword = true,\n}: Props) {\n  const loginForm = getLoginForm(customerStore);\n\n  useEffect(() => {\n    initLoginForm(loginForm);\n  }, []);\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    const success = await submitLoginForm(loginForm);\n    if (success) {\n      Router.navigate(redirectAfterLogin);\n    }\n  };\n\n  return (\n    <section className=\"login-section\">\n      <div className=\"login-inner\">\n        <h1 className=\"login-title\">Sign In</h1>\n\n        {loginForm.isFailure && loginForm.responseMessage && (\n          <div className=\"login-error-banner\">{loginForm.responseMessage}</div>\n        )}\n\n        <form className=\"login-form\" onSubmit={handleSubmit}>\n          <div className=\"login-field\">\n            <label className=\"login-label\">{loginForm.email.label}</label>\n            <input\n              className={`login-input ${loginForm.email.hasError ? \"has-error\" : \"\"}`}\n              type=\"email\"\n              placeholder={loginForm.email.placeholder}\n              value={loginForm.email.value}\n              onInput={(e) => setLoginFormEmail(loginForm, (e.target as HTMLInputElement).value)}\n            />\n            {loginForm.email.hasError && loginForm.email.message && (\n              <span className=\"login-field-error\">{loginForm.email.message}</span>\n            )}\n          </div>\n\n          <div className=\"login-field\">\n            <label className=\"login-label\">{loginForm.password.label}</label>\n            <input\n              className={`login-input ${loginForm.password.hasError ? \"has-error\" : \"\"}`}\n              type=\"password\"\n              placeholder={loginForm.password.placeholder}\n              value={loginForm.password.value}\n              onInput={(e) => setLoginFormPassword(loginForm, (e.target as HTMLInputElement).value)}\n            />\n            {loginForm.password.hasError && loginForm.password.message && (\n              <span className=\"login-field-error\">{loginForm.password.message}</span>\n            )}\n          </div>\n\n          {showForgotPassword && (\n            <a\n              className=\"login-forgot-link\"\n              href=\"#\"\n              onClick={(e) => {\n                e.preventDefault();\n                Router.navigateToPage(\"FORGOT_PASSWORD\");\n              }}\n            >\n              Forgot password?\n            </a>\n          )}\n\n          <button\n            className=\"login-submit-btn\"\n            type=\"submit\"\n            disabled={loginForm.isSubmitting}\n          >\n            {loginForm.isSubmitting ? \"Signing in...\" : \"Sign In\"}\n          </button>\n        </form>\n\n        <p className=\"login-register-link\">\n          Don't have an account?{\" \"}\n          <a\n            href=\"#\"\n            onClick={(e) => {\n              e.preventDefault();\n              Router.navigateToPage(\"REGISTER\");\n            }}\n          >\n            Create one\n          </a>\n        </p>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(LoginSection);\n"
+          "content": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getLoginForm,\n  initLoginForm,\n  setLoginFormEmail,\n  setLoginFormPassword,\n  submitLoginForm,\n  handleSocialLogin,\n  socialLogin,\n  Router,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction LoginSection({\n  redirectAfterLogin = \"/account\",\n  showForgotPassword = true,\n}: Props) {\n  const loginForm = getLoginForm(customerStore);\n\n  useEffect(() => {\n    initLoginForm(loginForm);\n    // Handle social login callback if returning from OAuth redirect\n    handleSocialLogin(customerStore).then((result) => {\n      // HandleSocialLoginReturnType: { status: \"success\" | \"fail\", message?: string }\n      if (result.status === \"success\") {\n        Router.navigate(redirectAfterLogin);\n      }\n    });\n  }, []);\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    const success = await submitLoginForm(loginForm);\n    if (success) {\n      Router.navigate(redirectAfterLogin);\n    }\n  };\n\n  const handleSocialLoginClick = async (provider: \"GOOGLE\" | \"FACEBOOK\" | \"APPLE\") => {\n    // SocialLoginProvider enum — redirects user to provider's OAuth page\n    await socialLogin(customerStore, provider as any);\n  };\n\n  return (\n    <section className=\"login-section\">\n      <div className=\"login-inner\">\n        <h1 className=\"login-title\">Sign In</h1>\n\n        {loginForm.isFailure && loginForm.responseMessage && (\n          <div className=\"login-error-banner\">{loginForm.responseMessage}</div>\n        )}\n\n        {/* Social Login Buttons */}\n        <div className=\"login-social\">\n          <button className=\"login-social-btn\" onClick={() => handleSocialLoginClick(\"GOOGLE\")}>\n            Continue with Google\n          </button>\n          <button className=\"login-social-btn\" onClick={() => handleSocialLoginClick(\"FACEBOOK\")}>\n            Continue with Facebook\n          </button>\n        </div>\n\n        <div className=\"login-divider\"><span>or</span></div>\n\n        <form className=\"login-form\" onSubmit={handleSubmit}>\n          <div className=\"login-field\">\n            <label className=\"login-label\">{loginForm.email.label}</label>\n            <input\n              className={`login-input ${loginForm.email.hasError ? \"has-error\" : \"\"}`}\n              type=\"email\"\n              placeholder={loginForm.email.placeholder}\n              value={loginForm.email.value}\n              onInput={(e) => setLoginFormEmail(loginForm, (e.target as HTMLInputElement).value)}\n            />\n            {loginForm.email.hasError && loginForm.email.message && (\n              <span className=\"login-field-error\">{loginForm.email.message}</span>\n            )}\n          </div>\n\n          <div className=\"login-field\">\n            <label className=\"login-label\">{loginForm.password.label}</label>\n            <input\n              className={`login-input ${loginForm.password.hasError ? \"has-error\" : \"\"}`}\n              type=\"password\"\n              placeholder={loginForm.password.placeholder}\n              value={loginForm.password.value}\n              onInput={(e) => setLoginFormPassword(loginForm, (e.target as HTMLInputElement).value)}\n            />\n            {loginForm.password.hasError && loginForm.password.message && (\n              <span className=\"login-field-error\">{loginForm.password.message}</span>\n            )}\n          </div>\n\n          {showForgotPassword && (\n            <a\n              className=\"login-forgot-link\"\n              href=\"#\"\n              onClick={(e) => {\n                e.preventDefault();\n                Router.navigateToPage(\"FORGOT_PASSWORD\");\n              }}\n            >\n              Forgot password?\n            </a>\n          )}\n\n          <button\n            className=\"login-submit-btn\"\n            type=\"submit\"\n            disabled={loginForm.isSubmitting}\n          >\n            {loginForm.isSubmitting ? \"Signing in...\" : \"Sign In\"}\n          </button>\n        </form>\n\n        <p className=\"login-register-link\">\n          Don't have an account?{\" \"}\n          <a\n            href=\"#\"\n            onClick={(e) => {\n              e.preventDefault();\n              Router.navigateToPage(\"REGISTER\");\n            }}\n          >\n            Create one\n          </a>\n        </p>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(LoginSection);\n"
         },
         {
           "filename": "types.ts",
@@ -16311,31 +16766,117 @@
     {
       "id": "navigation",
       "title": "Navigation",
-      "description": "Navigate between pages using the Router",
-      "code": "import { Router } from \"@ikas/bp-storefront\";\n\nfunction navigationExamples() {\n  // Navigate to cart\n  Router.navigateToPage(\"CART\");\n\n  // Navigate to checkout\n  Router.navigateToPage(\"CHECKOUT\");\n\n  // Navigate to product\n  Router.navigate(\"/products/my-product-slug\");\n\n  // Go to login with redirect\n  Router.navigateToPage(\"LOGIN\", undefined, { redirect: \"/account\" });\n\n  // Go back\n  Router.goBack();\n}\n\nexport default navigationExamples;\n",
+      "description": "Navigate between pages using the Router (navigate, navigateToPage, goBack, getCurrentPath, getPageParams) and get entity href links (getSelectedProductVariantHref, getIkasCategoryHref, getIkasBlogHref, getIkasBrandHref, getIkasCategoryPathItemHref).",
+      "code": "import {\n  Router,\n  getSelectedProductVariantHref,\n  getIkasCategoryHref,\n  getIkasBlogHref,\n  getIkasBrandHref,\n  getIkasCategoryPathItemHref,\n  IkasProduct,\n  IkasCategory,\n  IkasBlog,\n  IkasBrand,\n  IkasCategoryPathItem,\n} from \"@ikas/bp-storefront\";\n\nfunction navigationExamples() {\n  // === Router navigation ===\n\n  // Navigate to cart\n  Router.navigateToPage(\"CART\");\n\n  // Navigate to checkout\n  Router.navigateToPage(\"CHECKOUT\");\n\n  // Navigate to product by slug\n  Router.navigate(\"/products/my-product-slug\");\n\n  // Go to login with redirect\n  Router.navigateToPage(\"LOGIN\", undefined, { redirect: \"/account\" });\n\n  // Go back\n  Router.goBack();\n\n  // Get current path\n  const path = Router.getCurrentPath();\n\n  // Get page parameters\n  const params = Router.getPageParams();\n}\n\n/** Get href for various entity types */\nfunction hrefExamples(\n  product: IkasProduct,\n  category: IkasCategory,\n  blog: IkasBlog,\n  brand: IkasBrand,\n  pathItem: IkasCategoryPathItem,\n) {\n  // Product variant href — includes variant query params\n  const productHref = getSelectedProductVariantHref(product);\n\n  // Category href\n  const categoryHref = getIkasCategoryHref(category);\n\n  // Blog post href\n  const blogHref = getIkasBlogHref(blog);\n\n  // Brand page href\n  const brandHref = getIkasBrandHref(brand);\n\n  // Category breadcrumb path item href\n  const pathItemHref = getIkasCategoryPathItemHref(pathItem);\n\n  return { productHref, categoryHref, blogHref, brandHref, pathItemHref };\n}\n\nexport { navigationExamples, hrefExamples };\nexport default navigationExamples;\n",
       "relatedFunctions": [
         "Router.navigate",
         "Router.navigateToPage",
-        "Router.goBack"
+        "Router.goBack",
+        "Router.getCurrentPath",
+        "Router.getPageParams",
+        "getSelectedProductVariantHref",
+        "getIkasCategoryHref",
+        "getIkasBlogHref",
+        "getIkasBrandHref",
+        "getIkasCategoryPathItemHref"
       ],
       "categories": [
         "Navigation"
       ]
     },
     {
-      "id": "order-display",
-      "title": "Order Summary Display",
-      "description": "Display an order summary with formatted prices, dates, and package status",
-      "code": "import {\n  getIkasOrderFormattedTotalFinalPrice,\n  getIkasOrderFormattedOrderedAt,\n  getIkasOrderDisplayedPackages,\n  getIkasOrderDistinctItemCount,\n  getIkasOrderFormattedShippingTotal,\n  getIkasOrderFormattedTotalTax,\n  getIkasOrderCustomerFullName,\n  getIkasOrderHref,\n  IkasOrder,\n} from \"@ikas/bp-storefront\";\n\nfunction OrderSummary({ order }: { order: IkasOrder }) {\n  const packages = getIkasOrderDisplayedPackages(order);\n  return (\n    <div>\n      <h2>Order #{order.orderNumber}</h2>\n      <p>Customer: {getIkasOrderCustomerFullName(order)}</p>\n      <p>Date: {getIkasOrderFormattedOrderedAt(order)}</p>\n      <p>Items: {getIkasOrderDistinctItemCount(order)}</p>\n      <p>Shipping: {getIkasOrderFormattedShippingTotal(order)}</p>\n      <p>Tax: {getIkasOrderFormattedTotalTax(order)}</p>\n      <p>Total: {getIkasOrderFormattedTotalFinalPrice(order)}</p>\n      <h3>Packages</h3>\n      {packages.map((pkg, i) => (\n        <div key={i}>\n          <p>Package {i + 1}: {pkg.statusTranslation}</p>\n        </div>\n      ))}\n      <a href={getIkasOrderHref(order)}>View Details</a>\n    </div>\n  );\n}\n\nexport default OrderSummary;\n",
+      "id": "order-detail-section",
+      "title": "Order Detail Section (Complete)",
+      "description": "Complete order detail section with getOrder fetch, line items with variant images/links/discount, order adjustments, payment transactions, totals, package status, and refund functionality. Uses getPageParams for order ID from URL.",
+      "code": "import { useEffect, useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getOrder,\n  getIkasOrderFormattedTotalFinalPrice,\n  getIkasOrderFormattedTotalPrice,\n  getIkasOrderFormattedOrderedAt,\n  getIkasOrderFormattedShippingTotal,\n  getIkasOrderFormattedTotalTax,\n  getIkasOrderDisplayedPackages,\n  getIkasOrderPackageStatusTranslation,\n  getIkasOrderLineVariantMainImage,\n  getIkasOrderLineVariantHref,\n  getOrderLineItemFormattedFinalPriceWithQuantity,\n  hasOrderLineItemDiscount,\n  getOrderAdjustmentDisplayName,\n  getOrderAdjustmentFormattedAmount,\n  getOrderAdjustmentIsDecrement,\n  getOrderTransactionFormattedAmount,\n  getOrderTransactionPaymentMethodTranslation,\n  getIkasOrderRefundableItems,\n  isIkasOrderRefundable,\n  getOrderLineItemRefundQuantity,\n  setOrderLineItemRefundQuantity,\n  refundOrder,\n  getDefaultSrc,\n  Router,\n  IkasOrder,\n} from \"@ikas/bp-storefront\";\n\nfunction OrderDetailSection() {\n  const [order, setOrder] = useState<IkasOrder | null>(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    const params = Router.getPageParams();\n    const orderId = params.id;\n    if (orderId) {\n      getOrder(customerStore, orderId).then((o) => {\n        setOrder(o);\n        setLoading(false);\n      });\n    }\n  }, []);\n\n  if (loading) return <div className=\"order-detail-section\"><div className=\"order-detail-inner\"><p>Loading...</p></div></div>;\n  if (!order) return <div className=\"order-detail-section\"><div className=\"order-detail-inner\"><p>Order not found.</p></div></div>;\n\n  const packages = getIkasOrderDisplayedPackages(order);\n  const lineItems = order.orderLineItems ?? [];\n  const adjustments = order.orderAdjustments ?? [];\n  const transactions = order.orderTransactions ?? [];\n  const canRefund = isIkasOrderRefundable(order) as unknown as boolean;\n  const refundableItems = canRefund ? getIkasOrderRefundableItems(order) : [];\n\n  return (\n    <section className=\"order-detail-section\">\n      <div className=\"order-detail-inner\">\n        <h1>Order #{order.orderNumber}</h1>\n        <p>{getIkasOrderFormattedOrderedAt(order)}</p>\n\n        {packages.map((pkg, i) => (\n          <span key={i} className=\"order-status-badge\">{getIkasOrderPackageStatusTranslation(order)}</span>\n        ))}\n\n        <div className=\"order-items\">\n          {lineItems.map((item) => {\n            const image = item.variant ? getIkasOrderLineVariantMainImage(item.variant) : null;\n            const href = item.variant ? getIkasOrderLineVariantHref(item.variant) : undefined;\n            const hasDiscount = hasOrderLineItemDiscount(item) as unknown as boolean;\n            return (\n              <div key={item.id} className=\"order-item\">\n                {image && <a href={href}><img src={getDefaultSrc(image)} width={64} height={64} style={{ objectFit: \"cover\", borderRadius: 4 }} alt=\"\" /></a>}\n                <div>\n                  <a href={href}>{item.variant?.name}</a>\n                  <span> x{item.quantity}</span>\n                  <span> {getOrderLineItemFormattedFinalPriceWithQuantity(item)}</span>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n\n        {adjustments.length > 0 && adjustments.map((adj: any, i: number) => (\n          <div key={i}>\n            <span>{getOrderAdjustmentDisplayName(adj)}: </span>\n            <span style={{ color: getOrderAdjustmentIsDecrement(adj) ? \"green\" : \"inherit\" }}>{getOrderAdjustmentFormattedAmount(adj)}</span>\n          </div>\n        ))}\n\n        {transactions.map((tx: any, i: number) => (\n          <div key={i}>{getOrderTransactionPaymentMethodTranslation(tx)}: {getOrderTransactionFormattedAmount(tx)}</div>\n        ))}\n\n        <div style={{ marginTop: 16, borderTop: \"1px solid #eee\", paddingTop: 16 }}>\n          <div>Shipping: {getIkasOrderFormattedShippingTotal(order)}</div>\n          <div>Tax: {getIkasOrderFormattedTotalTax(order)}</div>\n          <div>Subtotal: {getIkasOrderFormattedTotalPrice(order)}</div>\n          <div style={{ fontWeight: 700, fontSize: 18 }}>Total: {getIkasOrderFormattedTotalFinalPrice(order)}</div>\n        </div>\n\n        {canRefund && (\n          <div style={{ marginTop: 24 }}>\n            <h3>Refund</h3>\n            {refundableItems.map((item: any) => (\n              <div key={item.id}>\n                {item.variant?.name}: <input type=\"number\" min={0} max={item.quantity} value={getOrderLineItemRefundQuantity(item) ?? 0}\n                  onChange={(e) => setOrderLineItemRefundQuantity(Number((e.target as HTMLInputElement).value), item)} style={{ width: 60 }} />\n              </div>\n            ))}\n            <button onClick={() => refundOrder(customerStore, order)} style={{ marginTop: 8 }}>Submit Refund</button>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\nexport default observer(OrderDetailSection);\n",
       "relatedFunctions": [
+        "getOrder",
         "getIkasOrderFormattedTotalFinalPrice",
+        "getIkasOrderFormattedTotalPrice",
         "getIkasOrderFormattedOrderedAt",
+        "getIkasOrderFormattedShippingTotal",
+        "getIkasOrderFormattedTotalTax",
         "getIkasOrderDisplayedPackages",
         "getIkasOrderDistinctItemCount",
+        "getIkasOrderHref",
+        "getIkasOrderPackageStatusTranslation",
+        "getIkasOrderLineVariantMainImage",
+        "getIkasOrderLineVariantHref",
+        "getOrderLineItemFormattedFinalPriceWithQuantity",
+        "getOrderLineItemFormattedPriceWithQuantity",
+        "hasOrderLineItemDiscount",
+        "getOrderAdjustmentDisplayName",
+        "getOrderAdjustmentFormattedAmount",
+        "getOrderAdjustmentIsDecrement",
+        "getOrderTransactionFormattedAmount",
+        "getOrderTransactionPaymentMethodTranslation",
+        "getIkasOrderRefundableItems",
+        "isIkasOrderRefundable",
+        "getOrderLineItemRefundQuantity",
+        "setOrderLineItemRefundQuantity",
+        "refundOrder",
+        "getDefaultSrc",
+        "customerStore",
+        "Router.getPageParams"
+      ],
+      "categories": [
+        "Order",
+        "Customer",
+        "Account"
+      ],
+      "files": [
+        {
+          "filename": "index.tsx",
+          "content": "import { useEffect, useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getOrder,\n  getIkasOrderFormattedTotalFinalPrice,\n  getIkasOrderFormattedTotalPrice,\n  getIkasOrderFormattedOrderedAt,\n  getIkasOrderFormattedShippingTotal,\n  getIkasOrderFormattedTotalTax,\n  getIkasOrderDisplayedPackages,\n  getIkasOrderPackageStatusTranslation,\n  getIkasOrderLineVariantMainImage,\n  getIkasOrderLineVariantHref,\n  getOrderLineItemFormattedFinalPriceWithQuantity,\n  hasOrderLineItemDiscount,\n  getOrderAdjustmentDisplayName,\n  getOrderAdjustmentFormattedAmount,\n  getOrderAdjustmentIsDecrement,\n  getOrderTransactionFormattedAmount,\n  getOrderTransactionPaymentMethodTranslation,\n  getIkasOrderRefundableItems,\n  isIkasOrderRefundable,\n  getOrderLineItemRefundQuantity,\n  setOrderLineItemRefundQuantity,\n  refundOrder,\n  getDefaultSrc,\n  Router,\n  IkasOrder,\n} from \"@ikas/bp-storefront\";\n\nfunction OrderDetailSection() {\n  const [order, setOrder] = useState<IkasOrder | null>(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    const params = Router.getPageParams();\n    const orderId = params.id;\n    if (orderId) {\n      getOrder(customerStore, orderId).then((o) => {\n        setOrder(o);\n        setLoading(false);\n      });\n    }\n  }, []);\n\n  if (loading) return <div className=\"order-detail-section\"><div className=\"order-detail-inner\"><p>Loading...</p></div></div>;\n  if (!order) return <div className=\"order-detail-section\"><div className=\"order-detail-inner\"><p>Order not found.</p></div></div>;\n\n  const packages = getIkasOrderDisplayedPackages(order);\n  const lineItems = order.orderLineItems ?? [];\n  const adjustments = order.orderAdjustments ?? [];\n  const transactions = order.orderTransactions ?? [];\n  const canRefund = isIkasOrderRefundable(order) as unknown as boolean;\n  const refundableItems = canRefund ? getIkasOrderRefundableItems(order) : [];\n\n  return (\n    <section className=\"order-detail-section\">\n      <div className=\"order-detail-inner\">\n        <h1>Order #{order.orderNumber}</h1>\n        <p>{getIkasOrderFormattedOrderedAt(order)}</p>\n\n        {packages.map((pkg, i) => (\n          <span key={i} className=\"order-status-badge\">{getIkasOrderPackageStatusTranslation(order)}</span>\n        ))}\n\n        <div className=\"order-items\">\n          {lineItems.map((item) => {\n            const image = item.variant ? getIkasOrderLineVariantMainImage(item.variant) : null;\n            const href = item.variant ? getIkasOrderLineVariantHref(item.variant) : undefined;\n            const hasDiscount = hasOrderLineItemDiscount(item) as unknown as boolean;\n            return (\n              <div key={item.id} className=\"order-item\">\n                {image && <a href={href}><img src={getDefaultSrc(image)} width={64} height={64} style={{ objectFit: \"cover\", borderRadius: 4 }} alt=\"\" /></a>}\n                <div>\n                  <a href={href}>{item.variant?.name}</a>\n                  <span> x{item.quantity}</span>\n                  <span> {getOrderLineItemFormattedFinalPriceWithQuantity(item)}</span>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n\n        {adjustments.length > 0 && adjustments.map((adj: any, i: number) => (\n          <div key={i}>\n            <span>{getOrderAdjustmentDisplayName(adj)}: </span>\n            <span style={{ color: getOrderAdjustmentIsDecrement(adj) ? \"green\" : \"inherit\" }}>{getOrderAdjustmentFormattedAmount(adj)}</span>\n          </div>\n        ))}\n\n        {transactions.map((tx: any, i: number) => (\n          <div key={i}>{getOrderTransactionPaymentMethodTranslation(tx)}: {getOrderTransactionFormattedAmount(tx)}</div>\n        ))}\n\n        <div style={{ marginTop: 16, borderTop: \"1px solid #eee\", paddingTop: 16 }}>\n          <div>Shipping: {getIkasOrderFormattedShippingTotal(order)}</div>\n          <div>Tax: {getIkasOrderFormattedTotalTax(order)}</div>\n          <div>Subtotal: {getIkasOrderFormattedTotalPrice(order)}</div>\n          <div style={{ fontWeight: 700, fontSize: 18 }}>Total: {getIkasOrderFormattedTotalFinalPrice(order)}</div>\n        </div>\n\n        {canRefund && (\n          <div style={{ marginTop: 24 }}>\n            <h3>Refund</h3>\n            {refundableItems.map((item: any) => (\n              <div key={item.id}>\n                {item.variant?.name}: <input type=\"number\" min={0} max={item.quantity} value={getOrderLineItemRefundQuantity(item) ?? 0}\n                  onChange={(e) => setOrderLineItemRefundQuantity(Number((e.target as HTMLInputElement).value), item)} style={{ width: 60 }} />\n              </div>\n            ))}\n            <button onClick={() => refundOrder(customerStore, order)} style={{ marginTop: 8 }}>Submit Refund</button>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\nexport default observer(OrderDetailSection);\n"
+        },
+        {
+          "filename": "types.ts",
+          "content": "export interface Props {}\n"
+        },
+        {
+          "filename": "styles.css",
+          "content": ".order-detail-section { width: 100%; padding: 40px 24px; }\n.order-detail-inner { max-width: 800px; margin: 0 auto; }\n"
+        },
+        {
+          "filename": "ikas-config-snippet.json",
+          "content": "{ \"id\": \"order-detail\", \"name\": \"Order Detail\", \"type\": \"section\", \"props\": [] }\n"
+        }
+      ]
+    },
+    {
+      "id": "order-display",
+      "title": "Order Detail Display",
+      "description": "Complete order detail with getOrder fetch, line items with variant images/links/discount detection, order adjustments with isDecrement, payment transactions, totals (subtotal/shipping/tax/total), package status, and refund functionality (isIkasOrderRefundable, getIkasOrderRefundableItems, setOrderLineItemRefundQuantity, refundOrder).",
+      "code": "import { useEffect, useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getOrder,\n  getIkasOrderFormattedTotalFinalPrice,\n  getIkasOrderFormattedTotalPrice,\n  getIkasOrderFormattedOrderedAt,\n  getIkasOrderFormattedShippingTotal,\n  getIkasOrderFormattedTotalTax,\n  getIkasOrderDisplayedPackages,\n  getIkasOrderDistinctItemCount,\n  getIkasOrderCustomerFullName,\n  getIkasOrderHref,\n  getIkasOrderPackageStatusTranslation,\n  getIkasOrderLineVariantMainImage,\n  getIkasOrderLineVariantHref,\n  getOrderLineItemFormattedFinalPriceWithQuantity,\n  getOrderLineItemFormattedPriceWithQuantity,\n  hasOrderLineItemDiscount,\n  getOrderAdjustmentDisplayName,\n  getOrderAdjustmentFormattedAmount,\n  getOrderAdjustmentIsDecrement,\n  getOrderTransactionFormattedAmount,\n  getOrderTransactionPaymentMethodTranslation,\n  getIkasOrderRefundableItems,\n  isIkasOrderRefundable,\n  getOrderLineItemRefundQuantity,\n  setOrderLineItemRefundQuantity,\n  refundOrder,\n  getDefaultSrc,\n  IkasOrder,\n} from \"@ikas/bp-storefront\";\n\nfunction OrderDetail({ orderId }: { orderId: string }) {\n  const [order, setOrder] = useState<IkasOrder | null>(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    getOrder(customerStore, orderId).then((o) => {\n      setOrder(o);\n      setLoading(false);\n    });\n  }, [orderId]);\n\n  if (loading) return <p>Loading order...</p>;\n  if (!order) return <p>Order not found.</p>;\n\n  const packages = getIkasOrderDisplayedPackages(order);\n  const lineItems = order.orderLineItems ?? [];\n  const adjustments = order.orderAdjustments ?? [];\n  const transactions = order.orderTransactions ?? [];\n  const canRefund = isIkasOrderRefundable(order) as unknown as boolean;\n  const refundableItems = canRefund ? getIkasOrderRefundableItems(order) : [];\n\n  const handleRefund = async () => {\n    const success = await refundOrder(customerStore, order);\n    if (success) {\n      // Refresh order\n      const updated = await getOrder(customerStore, orderId);\n      if (updated) setOrder(updated);\n    }\n  };\n\n  return (\n    <div>\n      <h2>Order #{order.orderNumber}</h2>\n      <p>Customer: {getIkasOrderCustomerFullName(order)}</p>\n      <p>Date: {getIkasOrderFormattedOrderedAt(order)}</p>\n      <p>Items: {getIkasOrderDistinctItemCount(order)}</p>\n\n      {/* Package Status */}\n      <h3>Packages</h3>\n      {packages.map((pkg, i) => (\n        <div key={i}>\n          <p>Package {i + 1}: {getIkasOrderPackageStatusTranslation(order)}</p>\n        </div>\n      ))}\n\n      {/* Line Items */}\n      <h3>Items</h3>\n      {lineItems.map((item) => {\n        const image = item.variant ? getIkasOrderLineVariantMainImage(item.variant) : null;\n        const href = item.variant ? getIkasOrderLineVariantHref(item.variant) : undefined;\n        const hasDiscount = hasOrderLineItemDiscount(item) as unknown as boolean;\n        return (\n          <div key={item.id} style={{ display: \"flex\", gap: 12, padding: \"8px 0\", borderBottom: \"1px solid #eee\" }}>\n            {image && (\n              <a href={href}>\n                <img src={getDefaultSrc(image)} width={64} height={64} style={{ objectFit: \"cover\", borderRadius: 4 }} alt=\"\" />\n              </a>\n            )}\n            <div>\n              <a href={href} style={{ fontWeight: 600, textDecoration: \"none\", color: \"#111\" }}>\n                {item.variant?.name}\n              </a>\n              <div>Qty: {item.quantity}</div>\n              {hasDiscount && (\n                <span style={{ textDecoration: \"line-through\", color: \"#999\", marginRight: 8 }}>\n                  {getOrderLineItemFormattedPriceWithQuantity(item)}\n                </span>\n              )}\n              <span>{getOrderLineItemFormattedFinalPriceWithQuantity(item)}</span>\n            </div>\n          </div>\n        );\n      })}\n\n      {/* Order Adjustments */}\n      {adjustments.length > 0 && (\n        <div>\n          <h3>Adjustments</h3>\n          {adjustments.map((adj: any, i: number) => (\n            <div key={i} style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"4px 0\" }}>\n              <span>{getOrderAdjustmentDisplayName(adj)}</span>\n              <span style={{ color: getOrderAdjustmentIsDecrement(adj) ? \"#2e7d32\" : \"#111\" }}>\n                {getOrderAdjustmentFormattedAmount(adj)}\n              </span>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Payment Transactions */}\n      {transactions.length > 0 && (\n        <div>\n          <h3>Payment</h3>\n          {transactions.map((tx: any, i: number) => (\n            <div key={i} style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"4px 0\" }}>\n              <span>{getOrderTransactionPaymentMethodTranslation(tx)}</span>\n              <span>{getOrderTransactionFormattedAmount(tx)}</span>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Order Totals */}\n      <div style={{ borderTop: \"1px solid #eee\", paddingTop: 12, marginTop: 12 }}>\n        <div style={{ display: \"flex\", justifyContent: \"space-between\" }}>\n          <span>Subtotal</span>\n          <span>{getIkasOrderFormattedTotalPrice(order)}</span>\n        </div>\n        <div style={{ display: \"flex\", justifyContent: \"space-between\" }}>\n          <span>Shipping</span>\n          <span>{getIkasOrderFormattedShippingTotal(order)}</span>\n        </div>\n        <div style={{ display: \"flex\", justifyContent: \"space-between\" }}>\n          <span>Tax</span>\n          <span>{getIkasOrderFormattedTotalTax(order)}</span>\n        </div>\n        <div style={{ display: \"flex\", justifyContent: \"space-between\", fontWeight: 700, fontSize: 18, marginTop: 8 }}>\n          <span>Total</span>\n          <span>{getIkasOrderFormattedTotalFinalPrice(order)}</span>\n        </div>\n      </div>\n\n      {/* Refund Section */}\n      {canRefund && (\n        <div style={{ marginTop: 24, padding: 16, border: \"1px solid #eee\", borderRadius: 8 }}>\n          <h3>Request Refund</h3>\n          {refundableItems.map((item: any) => (\n            <div key={item.id} style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\", padding: \"8px 0\" }}>\n              <span>{item.variant?.name}</span>\n              <input\n                type=\"number\"\n                min={0}\n                max={item.quantity}\n                value={getOrderLineItemRefundQuantity(item) ?? 0}\n                onChange={(e) => setOrderLineItemRefundQuantity(Number((e.target as HTMLInputElement).value), item)}\n                style={{ width: 60, textAlign: \"center\" }}\n              />\n            </div>\n          ))}\n          <button onClick={handleRefund} style={{ marginTop: 12, padding: \"10px 20px\", background: \"#111\", color: \"#fff\", border: \"none\", borderRadius: 6, cursor: \"pointer\" }}>\n            Submit Refund Request\n          </button>\n        </div>\n      )}\n\n      <a href={getIkasOrderHref(order)} style={{ display: \"inline-block\", marginTop: 16 }}>View on store</a>\n    </div>\n  );\n}\n\nexport default observer(OrderDetail);\n",
+      "relatedFunctions": [
+        "getOrder",
+        "getIkasOrderFormattedTotalFinalPrice",
+        "getIkasOrderFormattedTotalPrice",
+        "getIkasOrderFormattedOrderedAt",
         "getIkasOrderFormattedShippingTotal",
         "getIkasOrderFormattedTotalTax",
+        "getIkasOrderDisplayedPackages",
+        "getIkasOrderDistinctItemCount",
         "getIkasOrderCustomerFullName",
-        "getIkasOrderHref"
+        "getIkasOrderHref",
+        "getIkasOrderPackageStatusTranslation",
+        "getIkasOrderLineVariantMainImage",
+        "getIkasOrderLineVariantHref",
+        "getOrderLineItemFormattedFinalPriceWithQuantity",
+        "getOrderLineItemFormattedPriceWithQuantity",
+        "hasOrderLineItemDiscount",
+        "getOrderAdjustmentDisplayName",
+        "getOrderAdjustmentFormattedAmount",
+        "getOrderAdjustmentIsDecrement",
+        "getOrderTransactionFormattedAmount",
+        "getOrderTransactionPaymentMethodTranslation",
+        "getIkasOrderRefundableItems",
+        "isIkasOrderRefundable",
+        "getOrderLineItemRefundQuantity",
+        "setOrderLineItemRefundQuantity",
+        "refundOrder",
+        "getDefaultSrc",
+        "customerStore"
       ],
       "categories": [
         "Order"
@@ -16344,24 +16885,54 @@
     {
       "id": "price-display",
       "title": "Displaying Product Price with Discount",
-      "description": "Show original price, discount percentage, and final price",
-      "code": "import {\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantFormattedSellPrice,\n  hasProductVariantDiscount,\n  getProductVariantDiscountPercentage,\n  IkasProduct,\n} from \"@ikas/bp-storefront\";\n\nfunction PriceDisplay({ product }: { product: IkasProduct }) {\n  const variant = getSelectedProductVariant(product);\n  const hasDiscount = hasProductVariantDiscount(variant);\n  return (\n    <div>\n      {hasDiscount && (\n        <>\n          <span style={{ textDecoration: \"line-through\" }}>\n            {getProductVariantFormattedSellPrice(variant)}\n          </span>\n          <span>-{getProductVariantDiscountPercentage(variant)}%</span>\n        </>\n      )}\n      <span>{getProductVariantFormattedFinalPrice(variant)}</span>\n    </div>\n  );\n}\n\nexport default PriceDisplay;\n",
+      "description": "Show original price, discount percentage, savings amount (getProductVariantFormattedDiscountAmount), and final price.",
+      "code": "import {\n  getSelectedProductVariant,\n  getProductVariantFormattedFinalPrice,\n  getProductVariantFormattedSellPrice,\n  hasProductVariantDiscount,\n  getProductVariantDiscountPercentage,\n  getProductVariantFormattedDiscountAmount,\n  IkasProduct,\n} from \"@ikas/bp-storefront\";\n\nfunction PriceDisplay({ product }: { product: IkasProduct }) {\n  const variant = getSelectedProductVariant(product);\n  const hasDiscount = hasProductVariantDiscount(variant);\n  return (\n    <div>\n      {hasDiscount && (\n        <>\n          <span style={{ textDecoration: \"line-through\", color: \"#999\", marginRight: 8 }}>\n            {getProductVariantFormattedSellPrice(variant)}\n          </span>\n          <span style={{ color: \"#e53935\", marginRight: 8 }}>\n            -{getProductVariantDiscountPercentage(variant)}%\n          </span>\n          <span style={{ color: \"#2e7d32\", fontSize: 13 }}>\n            Save {getProductVariantFormattedDiscountAmount(variant)}\n          </span>\n        </>\n      )}\n      <div style={{ fontSize: 24, fontWeight: 700, marginTop: 4 }}>\n        {getProductVariantFormattedFinalPrice(variant)}\n      </div>\n    </div>\n  );\n}\n\nexport default PriceDisplay;\n",
       "relatedFunctions": [
         "getSelectedProductVariant",
         "getProductVariantFormattedFinalPrice",
         "getProductVariantFormattedSellPrice",
         "hasProductVariantDiscount",
-        "getProductVariantDiscountPercentage"
+        "getProductVariantDiscountPercentage",
+        "getProductVariantFormattedDiscountAmount"
+      ],
+      "categories": [
+        "ProductDetail"
+      ]
+    },
+    {
+      "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",
+      "relatedFunctions": [
+        "getSelectedProductVariant",
+        "getSelectedProductVariantHref",
+        "getProductVariantFormattedFinalPrice",
+        "getProductVariantFormattedSellPrice",
+        "getProductVariantMainImage",
+        "getMainProductVariantType",
+        "getMainProductVariantValue",
+        "hasProductStock",
+        "hasProductVariantStock",
+        "hasProductVariantDiscount",
+        "hasBundleSettings",
+        "isFavoriteIkasProduct",
+        "addIkasProductToFavorites",
+        "removeIkasProductFromFavorites",
+        "customerStore",
+        "hasCustomer",
+        "getDefaultSrc"
       ],
       "categories": [
+        "ProductList",
         "ProductDetail"
       ]
     },
     {
       "id": "product-detail-section",
       "title": "Product Detail Section (Complete)",
-      "description": "Complete product detail section with image gallery, variant selection, pricing with discounts, add-to-cart with loading state, favorites, and responsive CSS. Based on a real working component.",
-      "code": "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  getProductVariantDiscountPercentage,\n  isAddToCartEnabled,\n  addItemToCart,\n  isFavoriteIkasProduct,\n  addIkasProductToFavorites,\n  removeIkasProductFromFavorites,\n  getProductVariantMainImage,\n  getDefaultSrc,\n  getThumbnailSrc,\n  getSrc,\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\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  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\n  // variant.images is IkasProductImage[] — use .image to get IkasImage for CDN helpers\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\n  const currentImage = images[selectedImageIndex] ?? images[0];\n  const isFavorite = isFavoriteIkasProduct(product);\n\n  const handleAddToCart = async () => {\n    if (!canAddToCart || isAddingToCart) return;\n    setIsAddingToCart(true);\n    try {\n      await addItemToCart(selectedVariant, product, 1);\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      <div className=\"product-detail-inner\">\n        {/* Image Gallery */}\n        <div className=\"product-gallery\">\n          {currentImage && (\n            <img\n              className=\"product-main-image\"\n              src={getDefaultSrc(currentImage)}\n              srcSet={`${getSrc(currentImage, 400)} 400w, ${getSrc(currentImage, 800)} 800w, ${getSrc(currentImage, 1200)} 1200w`}\n              sizes=\"(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px\"\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          {product.brand && <span className=\"product-brand\">{product.brand.name}</span>}\n          <h1 className=\"product-name\">{product.name}</h1>\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          </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          {/* Actions */}\n          <div className=\"product-actions\">\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        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(ProductDetail);\n",
+      "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  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={`${getSrc(currentImage, 400)} 400w, ${getSrc(currentImage, 800)} 800w, ${getSrc(currentImage, 1200)} 1200w`}\n              sizes=\"(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px\"\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",
@@ -16372,6 +16943,7 @@
         "getProductVariantFormattedSellPrice",
         "hasProductVariantDiscount",
         "getProductVariantDiscountPercentage",
+        "getProductVariantFormattedDiscountAmount",
         "isAddToCartEnabled",
         "addItemToCart",
         "isFavoriteIkasProduct",
@@ -16380,17 +16952,26 @@
         "getProductVariantMainImage",
         "getDefaultSrc",
         "getThumbnailSrc",
-        "getSrc"
+        "getSrc",
+        "getProductCategoryPath",
+        "getIkasCategoryPathItemHref",
+        "getIkasBrandHref",
+        "getAttributeListValues",
+        "hasBundleSettings",
+        "initBundleProducts",
+        "getDisplayedProductGroups",
+        "isNotEmpty"
       ],
       "categories": [
         "ProductDetail",
         "Cart",
-        "Image"
+        "Image",
+        "Navigation"
       ],
       "files": [
         {
           "filename": "index.tsx",
-          "content": "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  getProductVariantDiscountPercentage,\n  isAddToCartEnabled,\n  addItemToCart,\n  isFavoriteIkasProduct,\n  addIkasProductToFavorites,\n  removeIkasProductFromFavorites,\n  getProductVariantMainImage,\n  getDefaultSrc,\n  getThumbnailSrc,\n  getSrc,\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\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  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\n  // variant.images is IkasProductImage[] — use .image to get IkasImage for CDN helpers\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\n  const currentImage = images[selectedImageIndex] ?? images[0];\n  const isFavorite = isFavoriteIkasProduct(product);\n\n  const handleAddToCart = async () => {\n    if (!canAddToCart || isAddingToCart) return;\n    setIsAddingToCart(true);\n    try {\n      await addItemToCart(selectedVariant, product, 1);\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      <div className=\"product-detail-inner\">\n        {/* Image Gallery */}\n        <div className=\"product-gallery\">\n          {currentImage && (\n            <img\n              className=\"product-main-image\"\n              src={getDefaultSrc(currentImage)}\n              srcSet={`${getSrc(currentImage, 400)} 400w, ${getSrc(currentImage, 800)} 800w, ${getSrc(currentImage, 1200)} 1200w`}\n              sizes=\"(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px\"\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          {product.brand && <span className=\"product-brand\">{product.brand.name}</span>}\n          <h1 className=\"product-name\">{product.name}</h1>\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          </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          {/* Actions */}\n          <div className=\"product-actions\">\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        </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  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={`${getSrc(currentImage, 400)} 400w, ${getSrc(currentImage, 800)} 800w, ${getSrc(currentImage, 1200)} 1200w`}\n              sizes=\"(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px\"\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",
@@ -16398,7 +16979,7 @@
         },
         {
           "filename": "styles.css",
-          "content": ".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  align-items: start;\n}\n\n/* Image Gallery */\n.product-gallery {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.product-main-image {\n  width: 100%;\n  aspect-ratio: 1;\n  object-fit: cover;\n  border-radius: 8px;\n  background-color: #f5f5f5;\n}\n\n.product-thumbnails {\n  display: flex;\n  gap: 8px;\n  overflow-x: auto;\n}\n\n.product-thumbnail-btn {\n  flex-shrink: 0;\n  width: 72px;\n  height: 72px;\n  padding: 0;\n  border: 2px solid transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  overflow: hidden;\n  background: none;\n}\n\n.product-thumbnail-btn.active {\n  border-color: #111;\n}\n\n.product-thumbnail-btn img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* Product Info */\n.product-info {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.product-brand {\n  font-size: 13px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: #666;\n}\n\n.product-name {\n  font-size: 28px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: #111;\n  margin: 0;\n}\n\n/* Pricing */\n.product-pricing {\n  display: flex;\n  align-items: baseline;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.product-final-price {\n  font-size: 26px;\n  font-weight: 700;\n  color: #111;\n}\n\n.product-original-price {\n  font-size: 18px;\n  color: #999;\n  text-decoration: line-through;\n}\n\n.product-discount-badge {\n  font-size: 13px;\n  font-weight: 600;\n  color: #fff;\n  background-color: #e53935;\n  padding: 2px 8px;\n  border-radius: 4px;\n}\n\n/* Variants */\n.product-variants {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.variant-group {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.variant-group-label {\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n}\n\n.variant-options {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.variant-option-btn {\n  padding: 8px 16px;\n  border: 1.5px solid #ddd;\n  border-radius: 6px;\n  background: #fff;\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  color: #333;\n}\n\n.variant-option-btn:hover:not(:disabled) {\n  border-color: #111;\n}\n\n.variant-option-btn.selected {\n  border-color: #111;\n  background-color: #111;\n  color: #fff;\n}\n\n.variant-option-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  text-decoration: line-through;\n}\n\n/* Actions */\n.product-actions {\n  display: flex;\n  gap: 12px;\n  align-items: stretch;\n}\n\n.add-to-cart-btn {\n  flex: 1;\n  padding: 14px 24px;\n  font-size: 16px;\n  font-weight: 600;\n  color: #fff;\n  background-color: #111;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.add-to-cart-btn:hover:not(:disabled) {\n  background-color: #333;\n}\n\n.add-to-cart-btn:disabled {\n  background-color: #ccc;\n  cursor: not-allowed;\n}\n\n.favorite-btn {\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1.5px solid #ddd;\n  border-radius: 8px;\n  background: #fff;\n  cursor: pointer;\n  font-size: 20px;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.favorite-btn:hover {\n  border-color: #e53935;\n}\n\n.favorite-btn.is-favorite {\n  color: #e53935;\n  border-color: #e53935;\n}\n\n/* Description */\n.product-description {\n  padding-top: 20px;\n  border-top: 1px solid #eee;\n}\n\n.out-of-stock-notice {\n  font-size: 14px;\n  font-weight: 600;\n  color: #e53935;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .product-detail-inner {\n    grid-template-columns: 1fr;\n    gap: 32px;\n  }\n\n  .product-name {\n    font-size: 22px;\n  }\n\n  .product-final-price {\n    font-size: 22px;\n  }\n}\n"
+          "content": ".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  align-items: start;\n}\n\n/* Image Gallery */\n.product-gallery {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.product-main-image {\n  width: 100%;\n  aspect-ratio: 1;\n  object-fit: cover;\n  border-radius: 8px;\n  background-color: #f5f5f5;\n}\n\n.product-thumbnails {\n  display: flex;\n  gap: 8px;\n  overflow-x: auto;\n}\n\n.product-thumbnail-btn {\n  flex-shrink: 0;\n  width: 72px;\n  height: 72px;\n  padding: 0;\n  border: 2px solid transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  overflow: hidden;\n  background: none;\n}\n\n.product-thumbnail-btn.active {\n  border-color: #111;\n}\n\n.product-thumbnail-btn img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* Product Info */\n.product-info {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.product-brand {\n  font-size: 13px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: #666;\n  text-decoration: none;\n}\n\n.product-brand:hover {\n  color: #111;\n}\n\n.product-name {\n  font-size: 28px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: #111;\n  margin: 0;\n}\n\n/* Pricing */\n.product-pricing {\n  display: flex;\n  align-items: baseline;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.product-final-price {\n  font-size: 26px;\n  font-weight: 700;\n  color: #111;\n}\n\n.product-original-price {\n  font-size: 18px;\n  color: #999;\n  text-decoration: line-through;\n}\n\n.product-discount-badge {\n  font-size: 13px;\n  font-weight: 600;\n  color: #fff;\n  background-color: #e53935;\n  padding: 2px 8px;\n  border-radius: 4px;\n}\n\n/* Variants */\n.product-variants {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.variant-group {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.variant-group-label {\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n}\n\n.variant-options {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.variant-option-btn {\n  padding: 8px 16px;\n  border: 1.5px solid #ddd;\n  border-radius: 6px;\n  background: #fff;\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  color: #333;\n}\n\n.variant-option-btn:hover:not(:disabled) {\n  border-color: #111;\n}\n\n.variant-option-btn.selected {\n  border-color: #111;\n  background-color: #111;\n  color: #fff;\n}\n\n.variant-option-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  text-decoration: line-through;\n}\n\n/* Actions */\n.product-actions {\n  display: flex;\n  gap: 12px;\n  align-items: stretch;\n}\n\n.add-to-cart-btn {\n  flex: 1;\n  padding: 14px 24px;\n  font-size: 16px;\n  font-weight: 600;\n  color: #fff;\n  background-color: #111;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.add-to-cart-btn:hover:not(:disabled) {\n  background-color: #333;\n}\n\n.add-to-cart-btn:disabled {\n  background-color: #ccc;\n  cursor: not-allowed;\n}\n\n.favorite-btn {\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1.5px solid #ddd;\n  border-radius: 8px;\n  background: #fff;\n  cursor: pointer;\n  font-size: 20px;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.favorite-btn:hover {\n  border-color: #e53935;\n}\n\n.favorite-btn.is-favorite {\n  color: #e53935;\n  border-color: #e53935;\n}\n\n/* Description */\n.product-description {\n  padding-top: 20px;\n  border-top: 1px solid #eee;\n}\n\n.out-of-stock-notice {\n  font-size: 14px;\n  font-weight: 600;\n  color: #e53935;\n}\n\n/* Breadcrumb */\n.product-breadcrumb {\n  max-width: 1200px;\n  margin: 0 auto 16px;\n  padding: 0 24px;\n  font-size: 13px;\n  color: #666;\n}\n\n.product-breadcrumb a {\n  color: #666;\n  text-decoration: none;\n}\n\n.product-breadcrumb a:hover {\n  color: #111;\n}\n\n.breadcrumb-sep {\n  margin: 0 8px;\n  color: #ccc;\n}\n\n.breadcrumb-current {\n  color: #111;\n}\n\n/* Rating */\n.product-rating {\n  color: #f5a623;\n  font-size: 16px;\n}\n\n.product-rating-value {\n  font-size: 14px;\n  color: #666;\n  margin-left: 8px;\n}\n\n/* Campaigns */\n.product-campaigns {\n  display: flex;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.product-campaign-badge {\n  font-size: 12px;\n  font-weight: 600;\n  color: #fff;\n  background: #1976d2;\n  padding: 4px 10px;\n  border-radius: 4px;\n}\n\n/* Savings */\n.product-savings {\n  font-size: 14px;\n  font-weight: 600;\n  color: #2e7d32;\n}\n\n/* Quantity */\n.product-quantity {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  border: 1.5px solid #ddd;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.product-quantity button {\n  width: 40px;\n  height: 48px;\n  border: none;\n  background: #fff;\n  font-size: 18px;\n  cursor: pointer;\n}\n\n.product-quantity span {\n  width: 32px;\n  text-align: center;\n  font-size: 15px;\n  font-weight: 600;\n}\n\n/* Attributes */\n.product-attributes {\n  padding-top: 20px;\n  border-top: 1px solid #eee;\n}\n\n.attribute-row {\n  display: flex;\n  justify-content: space-between;\n  padding: 8px 0;\n  font-size: 14px;\n  border-bottom: 1px solid #f5f5f5;\n}\n\n.attribute-name {\n  color: #666;\n  font-weight: 500;\n}\n\n.attribute-value {\n  color: #111;\n}\n\n/* Bundle Products */\n.product-bundles {\n  padding-top: 20px;\n  border-top: 1px solid #eee;\n}\n\n.bundle-group {\n  margin-top: 12px;\n}\n\n.bundle-items {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.bundle-item {\n  padding: 12px;\n  border: 1px solid #eee;\n  border-radius: 6px;\n  font-size: 14px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .product-detail-inner {\n    grid-template-columns: 1fr;\n    gap: 32px;\n  }\n\n  .product-name {\n    font-size: 22px;\n  }\n\n  .product-final-price {\n    font-size: 22px;\n  }\n\n  .product-actions {\n    flex-wrap: wrap;\n  }\n}\n"
         },
         {
           "filename": "ikas-config-snippet.json",
@@ -16409,14 +16990,13 @@
     {
       "id": "product-filtering",
       "title": "Product List Filtering",
-      "description": "Display and interact with product filters including value selection and clearing",
-      "code": "import {\n  getFilterDisplayedValues,\n  selectFilterValue,\n  clearFilter,\n  isListFilter,\n  isSwatchFilter,\n  IkasProductFilter,\n} from \"@ikas/bp-storefront\";\n\nfunction ProductFilter({ filter }: { filter: IkasProductFilter }) {\n  const values = getFilterDisplayedValues(filter);\n\n  return (\n    <div>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\" }}>\n        <h3>{filter.name}</h3>\n        <button onClick={() => clearFilter(filter)}>Clear</button>\n      </div>\n\n      {isListFilter(filter) && (\n        <ul>\n          {values.map((v) => (\n            <li key={v.id}>\n              <label>\n                <input\n                  type=\"checkbox\"\n                  checked={v.isSelected ?? false}\n                  onChange={() => selectFilterValue(filter, v)}\n                />\n                {v.name} ({v.resultCount})\n              </label>\n            </li>\n          ))}\n        </ul>\n      )}\n\n      {isSwatchFilter(filter) && (\n        <div style={{ display: \"flex\", gap: 8 }}>\n          {values.map((v) => (\n            <button\n              key={v.id}\n              style={{\n                width: 32,\n                height: 32,\n                borderRadius: \"50%\",\n                border: v.isSelected ? \"2px solid black\" : \"1px solid #ccc\",\n                backgroundColor: v.colorCode || undefined,\n              }}\n              onClick={() => selectFilterValue(filter, v)}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default ProductFilter;\n",
+      "description": "Display and interact with product filters using handleFilterValueClick (toggling deselects), category-level filtering with onFilterCategoryClick, and getProductListFilterCategories for filter categories.",
+      "code": "import { observer } from \"@ikas/component-utils\";\nimport {\n  getFilterDisplayedValues,\n  handleFilterValueClick,\n  getProductListFilterCategories,\n  onFilterCategoryClick,\n  IkasProductList,\n  IkasProductFilter,\n} from \"@ikas/bp-storefront\";\n\nfunction 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\nexport default observer(ProductFilter);\n",
       "relatedFunctions": [
         "getFilterDisplayedValues",
-        "selectFilterValue",
-        "clearFilter",
-        "isListFilter",
-        "isSwatchFilter"
+        "handleFilterValueClick",
+        "getProductListFilterCategories",
+        "onFilterCategoryClick"
       ],
       "categories": [
         "ProductFilter",
@@ -16424,14 +17004,193 @@
         "ProductList"
       ]
     },
+    {
+      "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",
+      "relatedFunctions": [
+        "getSelectedProductVariant",
+        "getProductVariantFormattedFinalPrice",
+        "getProductVariantMainImage",
+        "getSelectedProductVariantHref",
+        "getFilterDisplayedValues",
+        "handleFilterValueClick",
+        "getProductListFilterCategories",
+        "onFilterCategoryClick",
+        "getProductListSortOptions",
+        "setSortType",
+        "hasProductListNextPage",
+        "hasProductListPrevPage",
+        "getProductListNextPage",
+        "getProductListPrevPage",
+        "setProductListVisiblePage",
+        "searchProductList",
+        "getCategoryPath",
+        "getIkasCategoryHref",
+        "isEmpty",
+        "getDefaultSrc"
+      ],
+      "categories": [
+        "ProductList",
+        "Filtering",
+        "Pagination",
+        "Navigation"
+      ],
+      "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"
+        },
+        {
+          "filename": "types.ts",
+          "content": "import { IkasProductList } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n  productList: IkasProductList;\n  title?: string;\n  showFilters?: boolean;\n}\n"
+        },
+        {
+          "filename": "styles.css",
+          "content": ".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 {\n  font-size: 24px;\n  font-weight: 700;\n  color: #111;\n  margin: 0;\n}\n\n.product-list-sort {\n  padding: 8px 12px;\n  font-size: 14px;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  background: #fff;\n  cursor: pointer;\n}\n\n.product-list-layout {\n  display: flex;\n  gap: 32px;\n}\n\n/* Filters */\n.product-list-filters {\n  width: 240px;\n  flex-shrink: 0;\n}\n\n.filter-group {\n  margin-bottom: 24px;\n}\n\n.filter-group-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #111;\n  margin: 0 0 12px 0;\n}\n\n.filter-values {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.filter-value {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  color: #555;\n  cursor: pointer;\n}\n\n.filter-count {\n  color: #999;\n  font-size: 12px;\n}\n\n/* Product Grid */\n.product-grid {\n  flex: 1;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 24px;\n}\n\n.product-grid-empty {\n  grid-column: 1 / -1;\n  text-align: center;\n  color: #666;\n  padding: 48px 0;\n}\n\n.product-card {\n  text-decoration: none;\n  color: inherit;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.product-card-image-wrap {\n  aspect-ratio: 1;\n  overflow: hidden;\n  border-radius: 8px;\n  background: #f5f5f5;\n}\n\n.product-card-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 0.2s ease;\n}\n\n.product-card:hover .product-card-image {\n  transform: scale(1.03);\n}\n\n.product-card-info {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.product-card-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: #111;\n  margin: 0;\n}\n\n.product-card-price {\n  font-size: 15px;\n  font-weight: 600;\n  color: #111;\n}\n\n/* Pagination */\n.product-list-pagination {\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n  margin-top: 40px;\n}\n\n.pagination-btn {\n  padding: 10px 24px;\n  font-size: 14px;\n  font-weight: 500;\n  background: #fff;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  cursor: pointer;\n}\n\n.pagination-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.pagination-btn:hover:not(:disabled) {\n  border-color: #111;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .product-list-layout {\n    flex-direction: column;\n  }\n\n  .product-list-filters {\n    width: 100%;\n  }\n\n  .product-grid {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 16px;\n  }\n}\n"
+        },
+        {
+          "filename": "ikas-config-snippet.json",
+          "content": "{\n  \"id\": \"product-list\",\n  \"name\": \"Product List\",\n  \"type\": \"section\",\n  \"entry\": \"./src/components/ProductList/index.tsx\",\n  \"styles\": \"./src/components/ProductList/styles.css\",\n  \"props\": [\n    {\n      \"name\": \"productList\",\n      \"displayName\": \"Product List\",\n      \"type\": \"PRODUCT_LIST\",\n      \"required\": true\n    },\n    {\n      \"name\": \"title\",\n      \"displayName\": \"Section Title\",\n      \"type\": \"TEXT\",\n      \"defaultValue\": \"Products\"\n    },\n    {\n      \"name\": \"showFilters\",\n      \"displayName\": \"Show Filters\",\n      \"type\": \"BOOLEAN\",\n      \"defaultValue\": true\n    }\n  ]\n}\n"
+        }
+      ]
+    },
+    {
+      "id": "product-reviews-section",
+      "title": "Product Reviews Section (Complete)",
+      "description": "Complete product reviews section with review list display, star ratings, review submission form with login-required check. getProductCustomerReviews supports limit, page, and hasImage params. Uses observer for reactive review data.",
+      "code": "import { useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  IkasProduct,\n  getProductCustomerReviews,\n  getIkasProductCustomerReviewForm,\n  setCustomerReviewFormTitle,\n  setCustomerReviewFormStar,\n  setCustomerReviewFormComment,\n  submitCustomerReviewForm,\n  isCustomerReviewLoginRequired,\n  getIkasCustomerReviewFormattedDate,\n  customerStore,\n  hasCustomer,\n  Router,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction ProductReviewsSection({\n  product,\n  title = \"Customer Reviews\",\n}: Props) {\n  const [showForm, setShowForm] = useState(false);\n\n  if (!product) return null;\n\n  const reviews = getProductCustomerReviews(product) ?? [];\n  const reviewForm = getIkasProductCustomerReviewForm(product);\n  const loginRequired = isCustomerReviewLoginRequired() as unknown as boolean;\n  const isLoggedIn = hasCustomer(customerStore) as unknown as boolean;\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    const success = await submitCustomerReviewForm(reviewForm);\n    if (success) {\n      setShowForm(false);\n    }\n  };\n\n  const StarDisplay = ({ rating }: { rating: number }) => (\n    <div className=\"reviews-stars\">\n      {[1, 2, 3, 4, 5].map((star) => (\n        <span key={star} className={star <= rating ? \"star-filled\" : \"star-empty\"}>\n          ★\n        </span>\n      ))}\n    </div>\n  );\n\n  return (\n    <section className=\"reviews-section\">\n      <div className=\"reviews-inner\">\n        <div className=\"reviews-header\">\n          <h2 className=\"reviews-title\">\n            {title} ({reviews.length})\n          </h2>\n          {!showForm && (\n            <button\n              className=\"reviews-write-btn\"\n              onClick={() => {\n                if (loginRequired && !isLoggedIn) {\n                  Router.navigateToPage(\"LOGIN\");\n                } else {\n                  setShowForm(true);\n                }\n              }}\n            >\n              Write a Review\n            </button>\n          )}\n        </div>\n\n        {/* Review Form */}\n        {showForm && (\n          <form className=\"review-form\" onSubmit={handleSubmit}>\n            {reviewForm.isFailure && reviewForm.responseMessage && (\n              <div className=\"review-form-error\">{reviewForm.responseMessage}</div>\n            )}\n\n            <div className=\"review-form-stars\">\n              <span className=\"review-form-label\">Rating</span>\n              <div className=\"star-input\">\n                {[1, 2, 3, 4, 5].map((star) => (\n                  <button\n                    key={star}\n                    type=\"button\"\n                    className={star <= reviewForm.star.value ? \"star-filled\" : \"star-empty\"}\n                    onClick={() => setCustomerReviewFormStar(reviewForm, star)}\n                  >\n                    ★\n                  </button>\n                ))}\n              </div>\n            </div>\n\n            <div className=\"review-form-field\">\n              <label className=\"review-form-label\">{reviewForm.title.label}</label>\n              <input\n                className=\"review-form-input\"\n                type=\"text\"\n                placeholder={reviewForm.title.placeholder}\n                value={reviewForm.title.value}\n                onInput={(e) =>\n                  setCustomerReviewFormTitle(reviewForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {reviewForm.title.hasError && reviewForm.title.message && (\n                <span className=\"review-form-error-text\">{reviewForm.title.message}</span>\n              )}\n            </div>\n\n            <div className=\"review-form-field\">\n              <label className=\"review-form-label\">{reviewForm.comment.label}</label>\n              <textarea\n                className=\"review-form-textarea\"\n                placeholder={reviewForm.comment.placeholder}\n                value={reviewForm.comment.value}\n                rows={4}\n                onInput={(e) =>\n                  setCustomerReviewFormComment(\n                    reviewForm,\n                    (e.target as HTMLTextAreaElement).value\n                  )\n                }\n              />\n              {reviewForm.comment.hasError && reviewForm.comment.message && (\n                <span className=\"review-form-error-text\">{reviewForm.comment.message}</span>\n              )}\n            </div>\n\n            <div className=\"review-form-actions\">\n              <button\n                type=\"submit\"\n                className=\"review-form-submit\"\n                disabled={reviewForm.isSubmitting}\n              >\n                {reviewForm.isSubmitting ? \"Submitting...\" : \"Submit Review\"}\n              </button>\n              <button\n                type=\"button\"\n                className=\"review-form-cancel\"\n                onClick={() => setShowForm(false)}\n              >\n                Cancel\n              </button>\n            </div>\n          </form>\n        )}\n\n        {/* Review List */}\n        {reviews.length === 0 && !showForm && (\n          <p className=\"reviews-empty\">No reviews yet. Be the first to review!</p>\n        )}\n\n        <div className=\"review-list\">\n          {reviews.map((review) => (\n            <div key={review.id} className=\"review-card\">\n              <div className=\"review-card-header\">\n                <StarDisplay rating={review.star} />\n                <span className=\"review-card-date\">\n                  {getIkasCustomerReviewFormattedDate(review)}\n                </span>\n              </div>\n              <h4 className=\"review-card-title\">{review.title}</h4>\n              <p className=\"review-card-comment\">{review.comment}</p>\n              <span className=\"review-card-author\">{review.customerName}</span>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(ProductReviewsSection);\n",
+      "relatedFunctions": [
+        "getProductCustomerReviews",
+        "getIkasProductCustomerReviewForm",
+        "setCustomerReviewFormTitle",
+        "setCustomerReviewFormStar",
+        "setCustomerReviewFormComment",
+        "submitCustomerReviewForm",
+        "isCustomerReviewLoginRequired",
+        "getIkasCustomerReviewFormattedDate",
+        "customerStore",
+        "hasCustomer",
+        "Router.navigateToPage"
+      ],
+      "categories": [
+        "ProductDetail",
+        "Form",
+        "Customer"
+      ],
+      "files": [
+        {
+          "filename": "index.tsx",
+          "content": "import { useState } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  IkasProduct,\n  getProductCustomerReviews,\n  getIkasProductCustomerReviewForm,\n  setCustomerReviewFormTitle,\n  setCustomerReviewFormStar,\n  setCustomerReviewFormComment,\n  submitCustomerReviewForm,\n  isCustomerReviewLoginRequired,\n  getIkasCustomerReviewFormattedDate,\n  customerStore,\n  hasCustomer,\n  Router,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction ProductReviewsSection({\n  product,\n  title = \"Customer Reviews\",\n}: Props) {\n  const [showForm, setShowForm] = useState(false);\n\n  if (!product) return null;\n\n  const reviews = getProductCustomerReviews(product) ?? [];\n  const reviewForm = getIkasProductCustomerReviewForm(product);\n  const loginRequired = isCustomerReviewLoginRequired() as unknown as boolean;\n  const isLoggedIn = hasCustomer(customerStore) as unknown as boolean;\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    const success = await submitCustomerReviewForm(reviewForm);\n    if (success) {\n      setShowForm(false);\n    }\n  };\n\n  const StarDisplay = ({ rating }: { rating: number }) => (\n    <div className=\"reviews-stars\">\n      {[1, 2, 3, 4, 5].map((star) => (\n        <span key={star} className={star <= rating ? \"star-filled\" : \"star-empty\"}>\n          ★\n        </span>\n      ))}\n    </div>\n  );\n\n  return (\n    <section className=\"reviews-section\">\n      <div className=\"reviews-inner\">\n        <div className=\"reviews-header\">\n          <h2 className=\"reviews-title\">\n            {title} ({reviews.length})\n          </h2>\n          {!showForm && (\n            <button\n              className=\"reviews-write-btn\"\n              onClick={() => {\n                if (loginRequired && !isLoggedIn) {\n                  Router.navigateToPage(\"LOGIN\");\n                } else {\n                  setShowForm(true);\n                }\n              }}\n            >\n              Write a Review\n            </button>\n          )}\n        </div>\n\n        {/* Review Form */}\n        {showForm && (\n          <form className=\"review-form\" onSubmit={handleSubmit}>\n            {reviewForm.isFailure && reviewForm.responseMessage && (\n              <div className=\"review-form-error\">{reviewForm.responseMessage}</div>\n            )}\n\n            <div className=\"review-form-stars\">\n              <span className=\"review-form-label\">Rating</span>\n              <div className=\"star-input\">\n                {[1, 2, 3, 4, 5].map((star) => (\n                  <button\n                    key={star}\n                    type=\"button\"\n                    className={star <= reviewForm.star.value ? \"star-filled\" : \"star-empty\"}\n                    onClick={() => setCustomerReviewFormStar(reviewForm, star)}\n                  >\n                    ★\n                  </button>\n                ))}\n              </div>\n            </div>\n\n            <div className=\"review-form-field\">\n              <label className=\"review-form-label\">{reviewForm.title.label}</label>\n              <input\n                className=\"review-form-input\"\n                type=\"text\"\n                placeholder={reviewForm.title.placeholder}\n                value={reviewForm.title.value}\n                onInput={(e) =>\n                  setCustomerReviewFormTitle(reviewForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {reviewForm.title.hasError && reviewForm.title.message && (\n                <span className=\"review-form-error-text\">{reviewForm.title.message}</span>\n              )}\n            </div>\n\n            <div className=\"review-form-field\">\n              <label className=\"review-form-label\">{reviewForm.comment.label}</label>\n              <textarea\n                className=\"review-form-textarea\"\n                placeholder={reviewForm.comment.placeholder}\n                value={reviewForm.comment.value}\n                rows={4}\n                onInput={(e) =>\n                  setCustomerReviewFormComment(\n                    reviewForm,\n                    (e.target as HTMLTextAreaElement).value\n                  )\n                }\n              />\n              {reviewForm.comment.hasError && reviewForm.comment.message && (\n                <span className=\"review-form-error-text\">{reviewForm.comment.message}</span>\n              )}\n            </div>\n\n            <div className=\"review-form-actions\">\n              <button\n                type=\"submit\"\n                className=\"review-form-submit\"\n                disabled={reviewForm.isSubmitting}\n              >\n                {reviewForm.isSubmitting ? \"Submitting...\" : \"Submit Review\"}\n              </button>\n              <button\n                type=\"button\"\n                className=\"review-form-cancel\"\n                onClick={() => setShowForm(false)}\n              >\n                Cancel\n              </button>\n            </div>\n          </form>\n        )}\n\n        {/* Review List */}\n        {reviews.length === 0 && !showForm && (\n          <p className=\"reviews-empty\">No reviews yet. Be the first to review!</p>\n        )}\n\n        <div className=\"review-list\">\n          {reviews.map((review) => (\n            <div key={review.id} className=\"review-card\">\n              <div className=\"review-card-header\">\n                <StarDisplay rating={review.star} />\n                <span className=\"review-card-date\">\n                  {getIkasCustomerReviewFormattedDate(review)}\n                </span>\n              </div>\n              <h4 className=\"review-card-title\">{review.title}</h4>\n              <p className=\"review-card-comment\">{review.comment}</p>\n              <span className=\"review-card-author\">{review.customerName}</span>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(ProductReviewsSection);\n"
+        },
+        {
+          "filename": "types.ts",
+          "content": "import { IkasProduct } from \"@ikas/bp-storefront\";\n\nexport interface Props {\n  product: IkasProduct;\n  title?: string;\n}\n"
+        },
+        {
+          "filename": "styles.css",
+          "content": ".reviews-section {\n  width: 100%;\n  padding: 48px 24px;\n  border-top: 1px solid #eee;\n}\n\n.reviews-inner {\n  max-width: 800px;\n  margin: 0 auto;\n}\n\n.reviews-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 24px;\n}\n\n.reviews-title {\n  font-size: 22px;\n  font-weight: 700;\n  color: #111;\n  margin: 0;\n}\n\n.reviews-write-btn {\n  padding: 10px 20px;\n  font-size: 14px;\n  font-weight: 600;\n  color: #fff;\n  background: #111;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n.reviews-write-btn:hover {\n  background: #333;\n}\n\n.reviews-empty {\n  text-align: center;\n  color: #666;\n  padding: 32px 0;\n  font-size: 15px;\n}\n\n/* Stars */\n.reviews-stars,\n.star-input {\n  display: flex;\n  gap: 2px;\n}\n\n.star-filled {\n  color: #f59e0b;\n  font-size: 16px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n}\n\n.star-empty {\n  color: #ddd;\n  font-size: 16px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n}\n\n.star-input .star-filled,\n.star-input .star-empty {\n  font-size: 24px;\n}\n\n/* Review Form */\n.review-form {\n  background: #f9fafb;\n  border-radius: 12px;\n  padding: 24px;\n  margin-bottom: 32px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.review-form-error {\n  padding: 10px 14px;\n  font-size: 13px;\n  color: #b71c1c;\n  background: #ffebee;\n  border-radius: 6px;\n}\n\n.review-form-stars {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.review-form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.review-form-label {\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n}\n\n.review-form-input,\n.review-form-textarea {\n  padding: 10px 12px;\n  font-size: 14px;\n  border: 1.5px solid #ddd;\n  border-radius: 6px;\n  outline: none;\n  font-family: inherit;\n}\n\n.review-form-input:focus,\n.review-form-textarea:focus {\n  border-color: #111;\n}\n\n.review-form-textarea {\n  resize: vertical;\n  min-height: 100px;\n}\n\n.review-form-error-text {\n  font-size: 12px;\n  color: #e53935;\n}\n\n.review-form-actions {\n  display: flex;\n  gap: 12px;\n}\n\n.review-form-submit {\n  padding: 10px 20px;\n  font-size: 14px;\n  font-weight: 600;\n  color: #fff;\n  background: #111;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n}\n\n.review-form-submit:disabled {\n  background: #ccc;\n  cursor: not-allowed;\n}\n\n.review-form-cancel {\n  padding: 10px 20px;\n  font-size: 14px;\n  color: #666;\n  background: none;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  cursor: pointer;\n}\n\n/* Review List */\n.review-list {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.review-card {\n  padding: 20px 0;\n  border-bottom: 1px solid #f0f0f0;\n}\n\n.review-card:last-child {\n  border-bottom: none;\n}\n\n.review-card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.review-card-date {\n  font-size: 12px;\n  color: #999;\n}\n\n.review-card-title {\n  font-size: 15px;\n  font-weight: 600;\n  color: #111;\n  margin: 0 0 6px 0;\n}\n\n.review-card-comment {\n  font-size: 14px;\n  color: #555;\n  line-height: 1.6;\n  margin: 0 0 8px 0;\n}\n\n.review-card-author {\n  font-size: 13px;\n  color: #888;\n  font-weight: 500;\n}\n"
+        },
+        {
+          "filename": "ikas-config-snippet.json",
+          "content": "{\n  \"id\": \"product-reviews\",\n  \"name\": \"Product Reviews\",\n  \"type\": \"section\",\n  \"entry\": \"./src/components/ProductReviews/index.tsx\",\n  \"styles\": \"./src/components/ProductReviews/styles.css\",\n  \"props\": [\n    {\n      \"name\": \"product\",\n      \"displayName\": \"Product\",\n      \"type\": \"PRODUCT\",\n      \"required\": true\n    },\n    {\n      \"name\": \"title\",\n      \"displayName\": \"Section Title\",\n      \"type\": \"TEXT\",\n      \"defaultValue\": \"Customer Reviews\"\n    }\n  ]\n}\n"
+        }
+      ]
+    },
+    {
+      "id": "register-section",
+      "title": "Register Section (Complete)",
+      "description": "Complete registration section with first name, last name, email, password, marketing consent (setRegisterFormIsMarketingAccepted), membership agreement (setRegisterFormIsMembershipAgreementAccepted), and social login (socialLogin + SocialLoginProvider). Uses navigateToPage for navigation.",
+      "code": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getRegisterForm,\n  initRegisterForm,\n  setRegisterFormEmail,\n  setRegisterFormFirstName,\n  setRegisterFormLastName,\n  setRegisterFormPassword,\n  submitRegisterForm,\n  setRegisterFormIsMarketingAccepted,\n  setRegisterFormIsMembershipAgreementAccepted,\n  socialLogin,\n  navigateToPage,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction RegisterSection({\n  redirectAfterRegister = \"/account\",\n}: Props) {\n  const registerForm = getRegisterForm(customerStore);\n\n  useEffect(() => {\n    initRegisterForm(registerForm);\n  }, []);\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    const success = await submitRegisterForm(registerForm);\n    if (success) {\n      navigateToPage(\"ACCOUNT\");\n    }\n  };\n\n  const handleSocialRegister = async (provider: \"GOOGLE\" | \"FACEBOOK\" | \"APPLE\") => {\n    await socialLogin(customerStore, provider as any);\n  };\n\n  return (\n    <section className=\"register-section\">\n      <div className=\"register-inner\">\n        <h1 className=\"register-title\">Create Account</h1>\n\n        {registerForm.isFailure && registerForm.responseMessage && (\n          <div className=\"register-error-banner\">{registerForm.responseMessage}</div>\n        )}\n\n        {/* Social Login Buttons */}\n        <div className=\"register-social\">\n          <button className=\"register-social-btn\" onClick={() => handleSocialRegister(\"GOOGLE\")}>\n            Continue with Google\n          </button>\n          <button className=\"register-social-btn\" onClick={() => handleSocialRegister(\"FACEBOOK\")}>\n            Continue with Facebook\n          </button>\n        </div>\n\n        <div className=\"register-divider\"><span>or</span></div>\n\n        <form className=\"register-form\" onSubmit={handleSubmit}>\n          <div className=\"register-row\">\n            <div className=\"register-field\">\n              <label className=\"register-label\">{registerForm.firstName.label}</label>\n              <input\n                className={`register-input ${registerForm.firstName.hasError ? \"has-error\" : \"\"}`}\n                type=\"text\"\n                placeholder={registerForm.firstName.placeholder}\n                value={registerForm.firstName.value}\n                onInput={(e) =>\n                  setRegisterFormFirstName(registerForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {registerForm.firstName.hasError && registerForm.firstName.message && (\n                <span className=\"register-field-error\">{registerForm.firstName.message}</span>\n              )}\n            </div>\n\n            <div className=\"register-field\">\n              <label className=\"register-label\">{registerForm.lastName.label}</label>\n              <input\n                className={`register-input ${registerForm.lastName.hasError ? \"has-error\" : \"\"}`}\n                type=\"text\"\n                placeholder={registerForm.lastName.placeholder}\n                value={registerForm.lastName.value}\n                onInput={(e) =>\n                  setRegisterFormLastName(registerForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {registerForm.lastName.hasError && registerForm.lastName.message && (\n                <span className=\"register-field-error\">{registerForm.lastName.message}</span>\n              )}\n            </div>\n          </div>\n\n          <div className=\"register-field\">\n            <label className=\"register-label\">{registerForm.email.label}</label>\n            <input\n              className={`register-input ${registerForm.email.hasError ? \"has-error\" : \"\"}`}\n              type=\"email\"\n              placeholder={registerForm.email.placeholder}\n              value={registerForm.email.value}\n              onInput={(e) =>\n                setRegisterFormEmail(registerForm, (e.target as HTMLInputElement).value)\n              }\n            />\n            {registerForm.email.hasError && registerForm.email.message && (\n              <span className=\"register-field-error\">{registerForm.email.message}</span>\n            )}\n          </div>\n\n          <div className=\"register-field\">\n            <label className=\"register-label\">{registerForm.password.label}</label>\n            <input\n              className={`register-input ${registerForm.password.hasError ? \"has-error\" : \"\"}`}\n              type=\"password\"\n              placeholder={registerForm.password.placeholder}\n              value={registerForm.password.value}\n              onInput={(e) =>\n                setRegisterFormPassword(registerForm, (e.target as HTMLInputElement).value)\n              }\n            />\n            {registerForm.password.hasError && registerForm.password.message && (\n              <span className=\"register-field-error\">{registerForm.password.message}</span>\n            )}\n          </div>\n\n          {/* Marketing Consent — IkasFormItemBoolean */}\n          <label className=\"register-checkbox\">\n            <input\n              type=\"checkbox\"\n              checked={registerForm.isMarketingAccepted?.value ?? false}\n              onChange={(e) =>\n                setRegisterFormIsMarketingAccepted(registerForm, (e.target as HTMLInputElement).checked)\n              }\n            />\n            <span>I want to receive marketing emails and promotions</span>\n          </label>\n\n          {/* Membership Agreement — IkasFormItemBoolean */}\n          <label className=\"register-checkbox\">\n            <input\n              type=\"checkbox\"\n              checked={registerForm.isMembershipAgreementAccepted?.value ?? false}\n              onChange={(e) =>\n                setRegisterFormIsMembershipAgreementAccepted(registerForm, (e.target as HTMLInputElement).checked)\n              }\n            />\n            <span>I accept the membership agreement</span>\n          </label>\n\n          <button\n            className=\"register-submit-btn\"\n            type=\"submit\"\n            disabled={registerForm.isSubmitting}\n          >\n            {registerForm.isSubmitting ? \"Creating account...\" : \"Create Account\"}\n          </button>\n        </form>\n\n        <p className=\"register-login-link\">\n          Already have an account?{\" \"}\n          <a\n            href=\"#\"\n            onClick={(e) => {\n              e.preventDefault();\n              navigateToPage(\"LOGIN\");\n            }}\n          >\n            Sign in\n          </a>\n        </p>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(RegisterSection);\n",
+      "relatedFunctions": [
+        "initRegisterForm",
+        "setRegisterFormEmail",
+        "setRegisterFormFirstName",
+        "setRegisterFormLastName",
+        "setRegisterFormPassword",
+        "setRegisterFormIsMarketingAccepted",
+        "setRegisterFormIsMembershipAgreementAccepted",
+        "submitRegisterForm",
+        "socialLogin",
+        "customerStore",
+        "navigateToPage"
+      ],
+      "categories": [
+        "Customer",
+        "Register",
+        "Form"
+      ],
+      "files": [
+        {
+          "filename": "index.tsx",
+          "content": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getRegisterForm,\n  initRegisterForm,\n  setRegisterFormEmail,\n  setRegisterFormFirstName,\n  setRegisterFormLastName,\n  setRegisterFormPassword,\n  submitRegisterForm,\n  setRegisterFormIsMarketingAccepted,\n  setRegisterFormIsMembershipAgreementAccepted,\n  socialLogin,\n  navigateToPage,\n} from \"@ikas/bp-storefront\";\nimport { Props } from \"./types\";\n\nfunction RegisterSection({\n  redirectAfterRegister = \"/account\",\n}: Props) {\n  const registerForm = getRegisterForm(customerStore);\n\n  useEffect(() => {\n    initRegisterForm(registerForm);\n  }, []);\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    const success = await submitRegisterForm(registerForm);\n    if (success) {\n      navigateToPage(\"ACCOUNT\");\n    }\n  };\n\n  const handleSocialRegister = async (provider: \"GOOGLE\" | \"FACEBOOK\" | \"APPLE\") => {\n    await socialLogin(customerStore, provider as any);\n  };\n\n  return (\n    <section className=\"register-section\">\n      <div className=\"register-inner\">\n        <h1 className=\"register-title\">Create Account</h1>\n\n        {registerForm.isFailure && registerForm.responseMessage && (\n          <div className=\"register-error-banner\">{registerForm.responseMessage}</div>\n        )}\n\n        {/* Social Login Buttons */}\n        <div className=\"register-social\">\n          <button className=\"register-social-btn\" onClick={() => handleSocialRegister(\"GOOGLE\")}>\n            Continue with Google\n          </button>\n          <button className=\"register-social-btn\" onClick={() => handleSocialRegister(\"FACEBOOK\")}>\n            Continue with Facebook\n          </button>\n        </div>\n\n        <div className=\"register-divider\"><span>or</span></div>\n\n        <form className=\"register-form\" onSubmit={handleSubmit}>\n          <div className=\"register-row\">\n            <div className=\"register-field\">\n              <label className=\"register-label\">{registerForm.firstName.label}</label>\n              <input\n                className={`register-input ${registerForm.firstName.hasError ? \"has-error\" : \"\"}`}\n                type=\"text\"\n                placeholder={registerForm.firstName.placeholder}\n                value={registerForm.firstName.value}\n                onInput={(e) =>\n                  setRegisterFormFirstName(registerForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {registerForm.firstName.hasError && registerForm.firstName.message && (\n                <span className=\"register-field-error\">{registerForm.firstName.message}</span>\n              )}\n            </div>\n\n            <div className=\"register-field\">\n              <label className=\"register-label\">{registerForm.lastName.label}</label>\n              <input\n                className={`register-input ${registerForm.lastName.hasError ? \"has-error\" : \"\"}`}\n                type=\"text\"\n                placeholder={registerForm.lastName.placeholder}\n                value={registerForm.lastName.value}\n                onInput={(e) =>\n                  setRegisterFormLastName(registerForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {registerForm.lastName.hasError && registerForm.lastName.message && (\n                <span className=\"register-field-error\">{registerForm.lastName.message}</span>\n              )}\n            </div>\n          </div>\n\n          <div className=\"register-field\">\n            <label className=\"register-label\">{registerForm.email.label}</label>\n            <input\n              className={`register-input ${registerForm.email.hasError ? \"has-error\" : \"\"}`}\n              type=\"email\"\n              placeholder={registerForm.email.placeholder}\n              value={registerForm.email.value}\n              onInput={(e) =>\n                setRegisterFormEmail(registerForm, (e.target as HTMLInputElement).value)\n              }\n            />\n            {registerForm.email.hasError && registerForm.email.message && (\n              <span className=\"register-field-error\">{registerForm.email.message}</span>\n            )}\n          </div>\n\n          <div className=\"register-field\">\n            <label className=\"register-label\">{registerForm.password.label}</label>\n            <input\n              className={`register-input ${registerForm.password.hasError ? \"has-error\" : \"\"}`}\n              type=\"password\"\n              placeholder={registerForm.password.placeholder}\n              value={registerForm.password.value}\n              onInput={(e) =>\n                setRegisterFormPassword(registerForm, (e.target as HTMLInputElement).value)\n              }\n            />\n            {registerForm.password.hasError && registerForm.password.message && (\n              <span className=\"register-field-error\">{registerForm.password.message}</span>\n            )}\n          </div>\n\n          {/* Marketing Consent — IkasFormItemBoolean */}\n          <label className=\"register-checkbox\">\n            <input\n              type=\"checkbox\"\n              checked={registerForm.isMarketingAccepted?.value ?? false}\n              onChange={(e) =>\n                setRegisterFormIsMarketingAccepted(registerForm, (e.target as HTMLInputElement).checked)\n              }\n            />\n            <span>I want to receive marketing emails and promotions</span>\n          </label>\n\n          {/* Membership Agreement — IkasFormItemBoolean */}\n          <label className=\"register-checkbox\">\n            <input\n              type=\"checkbox\"\n              checked={registerForm.isMembershipAgreementAccepted?.value ?? false}\n              onChange={(e) =>\n                setRegisterFormIsMembershipAgreementAccepted(registerForm, (e.target as HTMLInputElement).checked)\n              }\n            />\n            <span>I accept the membership agreement</span>\n          </label>\n\n          <button\n            className=\"register-submit-btn\"\n            type=\"submit\"\n            disabled={registerForm.isSubmitting}\n          >\n            {registerForm.isSubmitting ? \"Creating account...\" : \"Create Account\"}\n          </button>\n        </form>\n\n        <p className=\"register-login-link\">\n          Already have an account?{\" \"}\n          <a\n            href=\"#\"\n            onClick={(e) => {\n              e.preventDefault();\n              navigateToPage(\"LOGIN\");\n            }}\n          >\n            Sign in\n          </a>\n        </p>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(RegisterSection);\n"
+        },
+        {
+          "filename": "types.ts",
+          "content": "export interface Props {\n  redirectAfterRegister?: string;\n}\n"
+        },
+        {
+          "filename": "styles.css",
+          "content": ".register-section {\n  width: 100%;\n  padding: 64px 24px;\n}\n\n.register-inner {\n  max-width: 480px;\n  margin: 0 auto;\n}\n\n.register-title {\n  font-size: 28px;\n  font-weight: 700;\n  color: #111;\n  margin: 0 0 24px 0;\n  text-align: center;\n}\n\n.register-error-banner {\n  padding: 12px 16px;\n  font-size: 14px;\n  color: #b71c1c;\n  background-color: #ffebee;\n  border-radius: 8px;\n  margin-bottom: 20px;\n}\n\n.register-form {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.register-row {\n  display: flex;\n  gap: 12px;\n}\n\n.register-row .register-field {\n  flex: 1;\n}\n\n.register-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.register-label {\n  font-size: 14px;\n  font-weight: 600;\n  color: #333;\n}\n\n.register-input {\n  padding: 12px 14px;\n  font-size: 15px;\n  border: 1.5px solid #ddd;\n  border-radius: 8px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n\n.register-input:focus {\n  border-color: #111;\n}\n\n.register-input.has-error {\n  border-color: #e53935;\n}\n\n.register-field-error {\n  font-size: 12px;\n  color: #e53935;\n}\n\n.register-submit-btn {\n  padding: 14px 24px;\n  font-size: 16px;\n  font-weight: 600;\n  color: #fff;\n  background-color: #111;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  margin-top: 8px;\n}\n\n.register-submit-btn:hover:not(:disabled) {\n  background-color: #333;\n}\n\n.register-submit-btn:disabled {\n  background-color: #ccc;\n  cursor: not-allowed;\n}\n\n.register-login-link {\n  font-size: 14px;\n  color: #666;\n  text-align: center;\n  margin-top: 24px;\n}\n\n.register-login-link a {\n  color: #111;\n  font-weight: 600;\n  text-decoration: none;\n}\n\n.register-login-link a:hover {\n  text-decoration: underline;\n}\n\n@media (max-width: 480px) {\n  .register-row {\n    flex-direction: column;\n  }\n}\n"
+        },
+        {
+          "filename": "ikas-config-snippet.json",
+          "content": "{\n  \"id\": \"register-page\",\n  \"name\": \"Register Page\",\n  \"type\": \"section\",\n  \"entry\": \"./src/components/RegisterSection/index.tsx\",\n  \"styles\": \"./src/components/RegisterSection/styles.css\",\n  \"props\": [\n    {\n      \"name\": \"redirectAfterRegister\",\n      \"displayName\": \"Redirect After Register\",\n      \"type\": \"TEXT\",\n      \"defaultValue\": \"/account\"\n    }\n  ]\n}\n"
+        }
+      ]
+    },
+    {
+      "id": "reset-password-section",
+      "title": "Reset Password Section (Complete)",
+      "description": "Complete reset password section with new password and confirm password fields. Uses getRecoverPasswordForm/initRecoverPasswordForm/setRecoverPasswordFormPassword/setRecoverPasswordFormPasswordAgain/submitRecoverPasswordForm pattern.",
+      "code": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getRecoverPasswordForm,\n  initRecoverPasswordForm,\n  setRecoverPasswordFormPassword,\n  setRecoverPasswordFormPasswordAgain,\n  submitRecoverPasswordForm,\n  Router,\n} from \"@ikas/bp-storefront\";\n\nfunction ResetPasswordSection() {\n  const recoverForm = getRecoverPasswordForm(customerStore);\n\n  useEffect(() => {\n    initRecoverPasswordForm(recoverForm);\n  }, []);\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    const success = await submitRecoverPasswordForm(recoverForm);\n    if (success) {\n      Router.navigateToPage(\"LOGIN\");\n    }\n  };\n\n  return (\n    <section className=\"reset-section\">\n      <div className=\"reset-inner\">\n        <h1 className=\"reset-title\">Set New Password</h1>\n        <p className=\"reset-subtitle\">Enter your new password below.</p>\n\n        {recoverForm.isSuccess && (\n          <div className=\"reset-success-banner\">Password has been reset successfully!</div>\n        )}\n        {recoverForm.isFailure && recoverForm.responseMessage && (\n          <div className=\"reset-error-banner\">{recoverForm.responseMessage}</div>\n        )}\n\n        {!recoverForm.isSuccess && (\n          <form className=\"reset-form\" onSubmit={handleSubmit}>\n            <div className=\"reset-field\">\n              <label className=\"reset-label\">{recoverForm.password.label}</label>\n              <input\n                className={`reset-input ${recoverForm.password.hasError ? \"has-error\" : \"\"}`}\n                type=\"password\"\n                placeholder={recoverForm.password.placeholder}\n                value={recoverForm.password.value}\n                onInput={(e) =>\n                  setRecoverPasswordFormPassword(recoverForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {recoverForm.password.hasError && recoverForm.password.message && (\n                <span className=\"reset-field-error\">{recoverForm.password.message}</span>\n              )}\n            </div>\n\n            <div className=\"reset-field\">\n              <label className=\"reset-label\">{recoverForm.passwordAgain.label}</label>\n              <input\n                className={`reset-input ${recoverForm.passwordAgain.hasError ? \"has-error\" : \"\"}`}\n                type=\"password\"\n                placeholder={recoverForm.passwordAgain.placeholder}\n                value={recoverForm.passwordAgain.value}\n                onInput={(e) =>\n                  setRecoverPasswordFormPasswordAgain(recoverForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {recoverForm.passwordAgain.hasError && recoverForm.passwordAgain.message && (\n                <span className=\"reset-field-error\">{recoverForm.passwordAgain.message}</span>\n              )}\n            </div>\n\n            <button className=\"reset-submit-btn\" type=\"submit\" disabled={recoverForm.isSubmitting}>\n              {recoverForm.isSubmitting ? \"Resetting...\" : \"Reset Password\"}\n            </button>\n          </form>\n        )}\n\n        <p className=\"reset-back-link\">\n          <a href=\"#\" onClick={(e) => { e.preventDefault(); Router.navigateToPage(\"LOGIN\"); }}>\n            Back to Sign In\n          </a>\n        </p>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(ResetPasswordSection);\n",
+      "relatedFunctions": [
+        "getRecoverPasswordForm",
+        "initRecoverPasswordForm",
+        "setRecoverPasswordFormPassword",
+        "setRecoverPasswordFormPasswordAgain",
+        "submitRecoverPasswordForm",
+        "customerStore",
+        "Router.navigateToPage"
+      ],
+      "categories": [
+        "Customer",
+        "Form"
+      ],
+      "files": [
+        {
+          "filename": "index.tsx",
+          "content": "import { useEffect } from \"preact/hooks\";\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  customerStore,\n  getRecoverPasswordForm,\n  initRecoverPasswordForm,\n  setRecoverPasswordFormPassword,\n  setRecoverPasswordFormPasswordAgain,\n  submitRecoverPasswordForm,\n  Router,\n} from \"@ikas/bp-storefront\";\n\nfunction ResetPasswordSection() {\n  const recoverForm = getRecoverPasswordForm(customerStore);\n\n  useEffect(() => {\n    initRecoverPasswordForm(recoverForm);\n  }, []);\n\n  const handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    const success = await submitRecoverPasswordForm(recoverForm);\n    if (success) {\n      Router.navigateToPage(\"LOGIN\");\n    }\n  };\n\n  return (\n    <section className=\"reset-section\">\n      <div className=\"reset-inner\">\n        <h1 className=\"reset-title\">Set New Password</h1>\n        <p className=\"reset-subtitle\">Enter your new password below.</p>\n\n        {recoverForm.isSuccess && (\n          <div className=\"reset-success-banner\">Password has been reset successfully!</div>\n        )}\n        {recoverForm.isFailure && recoverForm.responseMessage && (\n          <div className=\"reset-error-banner\">{recoverForm.responseMessage}</div>\n        )}\n\n        {!recoverForm.isSuccess && (\n          <form className=\"reset-form\" onSubmit={handleSubmit}>\n            <div className=\"reset-field\">\n              <label className=\"reset-label\">{recoverForm.password.label}</label>\n              <input\n                className={`reset-input ${recoverForm.password.hasError ? \"has-error\" : \"\"}`}\n                type=\"password\"\n                placeholder={recoverForm.password.placeholder}\n                value={recoverForm.password.value}\n                onInput={(e) =>\n                  setRecoverPasswordFormPassword(recoverForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {recoverForm.password.hasError && recoverForm.password.message && (\n                <span className=\"reset-field-error\">{recoverForm.password.message}</span>\n              )}\n            </div>\n\n            <div className=\"reset-field\">\n              <label className=\"reset-label\">{recoverForm.passwordAgain.label}</label>\n              <input\n                className={`reset-input ${recoverForm.passwordAgain.hasError ? \"has-error\" : \"\"}`}\n                type=\"password\"\n                placeholder={recoverForm.passwordAgain.placeholder}\n                value={recoverForm.passwordAgain.value}\n                onInput={(e) =>\n                  setRecoverPasswordFormPasswordAgain(recoverForm, (e.target as HTMLInputElement).value)\n                }\n              />\n              {recoverForm.passwordAgain.hasError && recoverForm.passwordAgain.message && (\n                <span className=\"reset-field-error\">{recoverForm.passwordAgain.message}</span>\n              )}\n            </div>\n\n            <button className=\"reset-submit-btn\" type=\"submit\" disabled={recoverForm.isSubmitting}>\n              {recoverForm.isSubmitting ? \"Resetting...\" : \"Reset Password\"}\n            </button>\n          </form>\n        )}\n\n        <p className=\"reset-back-link\">\n          <a href=\"#\" onClick={(e) => { e.preventDefault(); Router.navigateToPage(\"LOGIN\"); }}>\n            Back to Sign In\n          </a>\n        </p>\n      </div>\n    </section>\n  );\n}\n\nexport default observer(ResetPasswordSection);\n"
+        },
+        {
+          "filename": "types.ts",
+          "content": "export interface Props {}\n"
+        },
+        {
+          "filename": "styles.css",
+          "content": ".reset-section { width: 100%; padding: 64px 24px; }\n.reset-inner { max-width: 400px; margin: 0 auto; }\n.reset-title { font-size: 28px; font-weight: 700; color: #111; margin: 0 0 8px 0; text-align: center; }\n.reset-subtitle { font-size: 15px; color: #666; text-align: center; margin: 0 0 24px 0; }\n.reset-success-banner { padding: 12px 16px; font-size: 14px; color: #1b5e20; background: #e8f5e9; border-radius: 8px; margin-bottom: 20px; }\n.reset-error-banner { padding: 12px 16px; font-size: 14px; color: #b71c1c; background: #ffebee; border-radius: 8px; margin-bottom: 20px; }\n.reset-form { display: flex; flex-direction: column; gap: 16px; }\n.reset-field { display: flex; flex-direction: column; gap: 6px; }\n.reset-label { font-size: 14px; font-weight: 600; color: #333; }\n.reset-input { padding: 12px 14px; font-size: 15px; border: 1.5px solid #ddd; border-radius: 8px; outline: none; }\n.reset-input:focus { border-color: #111; }\n.reset-input.has-error { border-color: #e53935; }\n.reset-field-error { font-size: 12px; color: #e53935; }\n.reset-submit-btn { padding: 14px 24px; font-size: 16px; font-weight: 600; color: #fff; background: #111; border: none; border-radius: 8px; cursor: pointer; margin-top: 8px; }\n.reset-submit-btn:disabled { background: #ccc; cursor: not-allowed; }\n.reset-back-link { font-size: 14px; color: #666; text-align: center; margin-top: 24px; }\n.reset-back-link a { color: #111; font-weight: 600; text-decoration: none; }\n"
+        },
+        {
+          "filename": "ikas-config-snippet.json",
+          "content": "{\n  \"id\": \"reset-password\",\n  \"name\": \"Reset Password\",\n  \"type\": \"section\",\n  \"props\": []\n}\n"
+        }
+      ]
+    },
     {
       "id": "variant-selection",
       "title": "Variant Selection",
-      "description": "Display variant options (size, color) and handle selection",
-      "code": "import { getDisplayedProductVariantTypes, selectVariantValue, IkasProduct } from \"@ikas/bp-storefront\";\n\nfunction VariantSelector({ product }: { product: IkasProduct }) {\n  const variantTypes = getDisplayedProductVariantTypes(product);\n  return (\n    <div>\n      {variantTypes.map((vt) => (\n        <div key={vt.variantType.id}>\n          <label>{vt.variantType.name}</label>\n          <div>\n            {vt.displayedVariantValues.map((dvv) => (\n              <button\n                key={dvv.variantValue.id}\n                className={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\nexport default VariantSelector;\n",
+      "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",
       "relatedFunctions": [
         "getDisplayedProductVariantTypes",
-        "selectVariantValue"
+        "selectVariantValue",
+        "isColorVariantValue",
+        "isImageVariantValue",
+        "isTextVariantValue",
+        "getIkasVariantValueThumbnailImage",
+        "isNotEmpty",
+        "getDefaultSrc"
       ],
       "categories": [
         "ProductDetail"