@ikas/code-components-mcp 1.4.0-beta.174 → 1.4.0-beta.175

package/data/framework.json

@@ -243,14 +243,17 @@
     "form-handling": {
       "title": "Form Handling",
       "description": "How to use the form model pattern for login, registration, address, and other forms",
-      "content": "## Form Handling Pattern\n\nikas storefront uses a consistent form model pattern across all form types: `init*Form()` → `set*FormField()` → `submit*Form()`.\n\n### Form Model Structure\n\nEach form field has:\n```typescript\n{\n  value: string;       // Current field value\n  hasError: boolean;   // Whether validation failed\n  message?: string;    // Error message to display\n  label: string;       // Display label\n  placeholder: string; // Input placeholder\n}\n```\n\nEach form tracks:\n```typescript\n{\n  isSubmitted: boolean;    // Has submit been attempted\n  isSubmitting: boolean;   // Is submission in progress\n  isSuccess?: boolean;     // Did last submit succeed\n  isFailure?: boolean;     // Did last submit fail\n  responseMessage?: string; // Server response message\n}\n```\n\n### Login Form Example\n\n```tsx\nimport { useEffect } from \"preact/hooks\";\nimport {\n  customerStore,\n  getLoginForm,\n  initLoginForm,\n  setLoginFormEmail,\n  setLoginFormPassword,\n  submitLoginForm,\n  Router,\n} from \"@ikas/bp-storefront\";\n\n// Root export — no observer() needed, ikas runtime handles reactivity via autorun()\nexport function LoginForm() {\n  // Forms are reached through get*Form(customerStore) accessors — the store\n  // holds them in private fields (`_loginForm`), so `customerStore.loginForm`\n  // does not compile.\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(\"/account\");\n    }\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      {loginForm.isFailure && <div>{loginForm.responseMessage}</div>}\n\n      <input\n        type=\"email\"\n        value={loginForm.email.value}\n        onInput={(e) => setLoginFormEmail(loginForm, e.target.value)}\n      />\n      {loginForm.email.hasError && <span>{loginForm.email.message}</span>}\n\n      <input\n        type=\"password\"\n        value={loginForm.password.value}\n        onInput={(e) => setLoginFormPassword(loginForm, e.target.value)}\n      />\n      {loginForm.password.hasError && <span>{loginForm.password.message}</span>}\n\n      <button type=\"submit\" disabled={loginForm.isSubmitting}>\n        {loginForm.isSubmitting ? \"Signing in...\" : \"Sign In\"}\n      </button>\n    </form>\n  );\n}\n\nexport default LoginForm;\n```\n\n### Available Form Types\n\n| Form | Init | Setter Functions | Submit |\n|------|------|-----------------|--------|\n| Login | `initLoginForm(form)` | `setLoginFormEmail()`, `setLoginFormPassword()` | `submitLoginForm(form)` |\n| Register | `initRegisterForm(form)` | `setRegisterFormEmail()`, `setRegisterFormPassword()`, `setRegisterFormFirstName()`, `setRegisterFormLastName()` | `submitRegisterForm(form)` |\n| Forgot Password | `initForgotPasswordForm(form)` | `setForgotPasswordFormEmail()` | `submitForgotPasswordForm(form)` |\n| Address | `initAddressForm(form)` | `setAddressFormField()` for each field | `submitAddressForm(form)` |\n| Contact | `initContactForm(form)` | `setContactFormField()` for each field | `submitContactForm(form)` |\n| Account Info | `initAccountInfoForm(form)` | `setAccountInfoFormField()` for each field | `submitAccountInfoForm(form)` |\n| Newsletter | `initNewsletterSubscriptionForm(form)` | `setNewsletterEmail()` | `submitNewsletterSubscriptionForm(form)` |\n| Coupon Code | `getCouponCodeForm(customerStore)` → `initCouponCodeForm(form)` | `setCouponCodeFormCouponCode(form, value)` | `submitCouponCodeForm(form)` (remove with `removeCouponCodeForm(form)`) |\n\n**Address is the exception to this page.** It follows the same init/set/submit contract, but its\nfield set and row layout are resolved from the selected country at runtime via\n`addressForm.addressFormat` -- you cannot lay it out statically. Call\n`get_framework_guide({ topic: \"address-form-patterns\" })` before building any address form.\n\n### Key Rules\n\n1. **Always call init first** — `init*Form()` sets up default field values, labels, and placeholders\n2. **Setter functions auto-validate** — if `form.isSubmitted` is true, calling any setter re-validates the form automatically\n3. **Check field.hasError for display** — show error messages only when `field.hasError` is true\n4. **Root components are automatically reactive** — forms use MobX observables which are automatically tracked in root components via `autorun()`. Use `observer()` only if you extract form logic into a sub-component\n5. **Submit returns boolean** — `submit*Form()` returns `true` on success, `false` on validation error or server failure",
+      "content": "## Form Handling Pattern\n\nikas storefront uses a consistent form model pattern across all form types: `init*Form()` → `set*FormField()` → `submit*Form()`.\n\n### Form Model Structure\n\nEach form field has:\n```typescript\n{\n  value: string;       // Current field value\n  hasError: boolean;   // Whether validation failed\n  message?: string;    // Error message to display\n  label: string;       // Display label\n  placeholder: string; // Input placeholder\n}\n```\n\nEach form tracks:\n```typescript\n{\n  isSubmitted: boolean;    // Has submit been attempted\n  isSubmitting: boolean;   // Is submission in progress\n  isSuccess?: boolean;     // Did last submit succeed\n  isFailure?: boolean;     // Did last submit fail\n  responseMessage?: string; // Server response message\n}\n```\n\n### Login Form Example\n\n```tsx\nimport { useEffect } from \"preact/hooks\";\nimport {\n  customerStore,\n  getLoginForm,\n  initLoginForm,\n  setLoginFormEmail,\n  setLoginFormPassword,\n  submitLoginForm,\n  Router,\n} from \"@ikas/bp-storefront\";\n\n// Root export — no observer() needed, ikas runtime handles reactivity via autorun()\nexport function LoginForm() {\n  // Forms are reached through get*Form(customerStore) accessors — the store\n  // holds them in private fields (`_loginForm`), so `customerStore.loginForm`\n  // does not compile.\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(\"/account\");\n    }\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      {loginForm.isFailure && <div>{loginForm.responseMessage}</div>}\n\n      <input\n        type=\"email\"\n        value={loginForm.email.value}\n        onInput={(e) => setLoginFormEmail(loginForm, e.target.value)}\n      />\n      {loginForm.email.hasError && <span>{loginForm.email.message}</span>}\n\n      <input\n        type=\"password\"\n        value={loginForm.password.value}\n        onInput={(e) => setLoginFormPassword(loginForm, e.target.value)}\n      />\n      {loginForm.password.hasError && <span>{loginForm.password.message}</span>}\n\n      <button type=\"submit\" disabled={loginForm.isSubmitting}>\n        {loginForm.isSubmitting ? \"Signing in...\" : \"Sign In\"}\n      </button>\n    </form>\n  );\n}\n\nexport default LoginForm;\n```\n\n### Available Form Types\n\n| Form | Init | Setter Functions | Submit |\n|------|------|-----------------|--------|\n| Login | `initLoginForm(form)` | `setLoginFormEmail()`, `setLoginFormPassword()` | `submitLoginForm(form)` |\n| Register | `initRegisterForm(form)` | `setRegisterFormEmail()`, `setRegisterFormPassword()`, `setRegisterFormFirstName()`, `setRegisterFormLastName()` | `submitRegisterForm(form)` |\n| Forgot Password | `initForgotPasswordForm(form)` | `setForgotPasswordFormEmail()` | `submitForgotPasswordForm(form)` |\n| Address | `initAddressForm(form)` | `setAddressFormField()` for each field | `submitAddressForm(form)` |\n| Contact | `initContactForm(form)` | `setContactFormField()` for each field | `submitContactForm(form)` |\n| Account Info | `initAccountInfoForm(form)` | `setAccountInfoFormField()` for each field | `submitAccountInfoForm(form)` |\n| Newsletter | `initNewsletterSubscriptionForm(form)` | `setNewsletterEmail()` | `submitNewsletterSubscriptionForm(form)` |\n| Coupon Code | `getCouponCodeForm(customerStore)` → `initCouponCodeForm(form)` | `setCouponCodeFormCouponCode(form, value)` | `submitCouponCodeForm(form)` (remove with `removeCouponCodeForm(form)`) |\n| Deactivate Customer | `getDeactivateCustomerForm(customerStore)` → `initDeactivateCustomerForm(form)` | `setDeactivateCustomerFormPassword(form, value)` | `submitDeactivateCustomerForm(form)` (call `logout(customerStore)` after success) |\n\n**Address is the exception to this page.** It follows the same init/set/submit contract, but its\nfield set and row layout are resolved from the selected country at runtime via\n`addressForm.addressFormat` -- you cannot lay it out statically. Call\n`get_framework_guide({ topic: \"address-form-patterns\" })` before building any address form.\n\n### Key Rules\n\n1. **Always call init first** — `init*Form()` sets up default field values, labels, and placeholders\n2. **Setter functions auto-validate** — if `form.isSubmitted` is true, calling any setter re-validates the form automatically\n3. **Check field.hasError for display** — show error messages only when `field.hasError` is true\n4. **Root components are automatically reactive** — forms use MobX observables which are automatically tracked in root components via `autorun()`. Use `observer()` only if you extract form logic into a sub-component\n5. **Submit returns boolean** — `submit*Form()` returns `true` on success, `false` on validation error or server failure",
       "tags": [
         "form",
         "login",
         "register",
         "address",
         "validation",
-        "input"
+        "input",
+        "password",
+        "account",
+        "deactivate"
       ]
     },
     "async-data-patterns": {
@@ -376,7 +379,7 @@
     "account-patterns": {
       "title": "Account & Dashboard Patterns",
       "description": "Orders list, order detail, address management, favorites, and account info forms",
-      "content": "## Account & Dashboard Patterns\n\nAccount sections typically use a tab-based layout with orders, addresses, favorites, and account info.\n\n> **`customerStore` has exactly one public field: `customer`.** Everything else on the store is\n> underscore-prefixed internal state. Order and favorite lists are **not** fields on the store —\n> they come from the `Promise` that `getOrders()` / `getFavoriteProducts()` return. Reading\n> `customerStore.orders` or `customerStore.favoriteProducts` is a TypeScript error (TS2339 /\n> TS2551), not a silent empty list.\n>\n> This is the one place where copying data into `useState` is correct. The\n> \"don't mirror store data in `useState`\" rule in `async-data-patterns` §5 is about\n> store-backed observable fields; orders and favorites have no such field to observe.\n\n### Orders List\n\n```tsx\nimport { useEffect, useState } from \"preact/hooks\";\nimport {\n  customerStore,\n  getOrders,\n  IkasOrder,\n  getIkasOrderFormattedTotalFinalPrice,\n  getIkasOrderTotalItemCount,\n  getIkasOrderFormattedOrderedAt,\n  getIkasOrderPackageStatusTranslation,\n  getIkasOrderHref,\n} from \"@ikas/bp-storefront\";\n\n// getOrders() RESOLVES with the orders — it writes nothing to the store.\n// Keep the result in local state; there is no `customerStore.orders`.\nconst [orders, setOrders] = useState<IkasOrder[]>([]);\nconst [loading, setLoading] = useState(true);\n\nuseEffect(() => {\n  let cancelled = false;\n  getOrders(customerStore)\n    .then((result) => {\n      if (!cancelled) setOrders(result ?? []);\n    })\n    .finally(() => {\n      if (!cancelled) setLoading(false);\n    });\n  return () => {\n    cancelled = true;\n  };\n}, []);\n\n{orders.map((order) => (\n  <a key={order.id} href={getIkasOrderHref(order)} className=\"order-card\">\n    <span>Order #{order.orderNumber}</span>\n    <span>{getIkasOrderFormattedOrderedAt(order)}</span>\n    <span>{getIkasOrderTotalItemCount(order)} items</span>\n    <span>{getIkasOrderFormattedTotalFinalPrice(order)}</span>\n    <span>{getIkasOrderPackageStatusTranslation(order)}</span>\n  </a>\n))}\n```\n\n### Order Detail\n\n```tsx\nimport {\n  getIkasOrderLineVariantMainImage,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\n\n// order.orderLineItems contains line items\n{order.orderLineItems.map((item) => {\n  const image = item.variant\n    ? getIkasOrderLineVariantMainImage(item.variant)\n    : null;\n  return (\n    <div key={item.id}>\n      {image && <img src={getDefaultSrc(image)} />}\n      <span>{item.variant?.name}</span>\n      <span>Qty: {item.quantity}</span>\n    </div>\n  );\n})}\n```\n\n### Address Management\n\nAddress forms are country-driven: the field set and the row layout come from\n`addressForm.addressFormat`, not from a list you write. Call\n`get_framework_guide({ topic: \"address-form-patterns\" })` before building one.\n\n```tsx\nimport {\n  getEmptyAddressForm,\n  getIkasCustomerAddressForm,\n  initAddressForm,\n  submitAddressForm,\n  deleteCustomerAddress,\n  customerStore,\n} from \"@ikas/bp-storefront\";\n\nconst addresses = customerStore.customer?.addresses ?? [];\n\n// Create: getEmptyAddressForm takes the STORE.\n// Edit:   getIkasCustomerAddressForm takes the ADDRESS.\nconst addressForm = address ? getIkasCustomerAddressForm(address) : getEmptyAddressForm(customerStore);\n\n// init is async and loads the country format + location lists; gate render on it.\nawait initAddressForm(addressForm, address);\n\n// Render rows from addressForm.addressFormat, set values via setAddressForm*(addressForm, value),\n// then submit (it validates and returns a boolean):\nconst ok = await submitAddressForm(addressForm);\n\n// Delete takes the ADDRESS OBJECT, not an id:\nawait deleteCustomerAddress(customerStore, address);\n```\n\n### Favorites\n\n```tsx\nimport { useEffect, useState } from \"preact/hooks\";\nimport {\n  customerStore,\n  getFavoriteProducts,\n  IkasProduct,\n} from \"@ikas/bp-storefront\";\n\n// Same rule as orders: getFavoriteProducts() resolves with the products.\n// There is no `customerStore.favoriteProducts` field.\nconst [favorites, setFavorites] = useState<IkasProduct[]>([]);\nconst [loading, setLoading] = useState(true);\n\nuseEffect(() => {\n  let cancelled = false;\n  getFavoriteProducts(customerStore)\n    .then((result) => {\n      if (!cancelled) setFavorites(result ?? []);\n    })\n    .finally(() => {\n      if (!cancelled) setLoading(false);\n    });\n  return () => {\n    cancelled = true;\n  };\n}, []);\n```\n\nThe favorites **list** is a fetched snapshot, but the favorite **flag** is store-backed and\nreactive — `isFavoriteIkasProduct(product)` reads the store synchronously, so heart icons inside\nan `observer()` sub-component update on their own:\n\n```tsx\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  isFavoriteIkasProduct,\n  addIkasProductToFavorites,\n  removeIkasProductFromFavorites,\n} from \"@ikas/bp-storefront\";\n\nconst FavoriteButton = observer(function FavoriteButton({ product }: { product: IkasProduct }) {\n  const isFavorite = isFavoriteIkasProduct(product);\n  return (\n    <button\n      onClick={() =>\n        isFavorite\n          ? removeIkasProductFromFavorites(product)\n          : addIkasProductToFavorites(product)\n      }\n    >\n      {isFavorite ? \"\\u2665\" : \"\\u2661\"}\n    </button>\n  );\n});\n```\n\nBecause the list is a snapshot, removing a favorite does **not** re-render it. Drop the item from\nyour local array as well:\n\n```tsx\nonFavoriteRemove={() => setFavorites((prev) => prev.filter((f) => f.id !== product.id))}\n```\n\nNote: `getFavoriteProducts` fetches at most 100 products in one call.\n\n### Account Info Form\n\n```tsx\nimport {\n  getAccountInfoForm,\n  initAccountInfoForm,\n  setAccountInfoFormFirstName,\n  setAccountInfoFormLastName,\n  setAccountInfoFormPhone,\n  submitAccountInfoForm,\n} from \"@ikas/bp-storefront\";\n\nconst accountForm = getAccountInfoForm(customerStore);\n\nuseEffect(() => {\n  initAccountInfoForm(accountForm);\n}, []);\n\nconst handleSave = async (e: Event) => {\n  e.preventDefault();\n  await submitAccountInfoForm(accountForm);\n};\n```\n\n### Tab Navigation Pattern\n\nProduction themes use a tab-based layout:\n\n```tsx\nconst [activeTab, setActiveTab] = useState(\"orders\");\n\nconst tabs = [\n  { id: \"orders\", label: \"Orders\" },\n  { id: \"addresses\", label: \"Addresses\" },\n  { id: \"favorites\", label: \"Favorites\" },\n  { id: \"account\", label: \"Account Info\" },\n];\n\n<div className=\"account-tabs\">\n  {tabs.map((tab) => (\n    <button\n      key={tab.id}\n      className={activeTab === tab.id ? \"active\" : \"\"}\n      onClick={() => setActiveTab(tab.id)}\n    >\n      {tab.label}\n    </button>\n  ))}\n</div>\n\n{activeTab === \"orders\" && <OrdersList />}\n{activeTab === \"addresses\" && <AddressList />}\n{activeTab === \"favorites\" && <FavoritesList />}\n{activeTab === \"account\" && <AccountInfoForm />}\n```",
+      "content": "## Account & Dashboard Patterns\n\nAccount sections typically use a tab-based layout with orders, addresses, favorites, and account info.\n\n> **`customerStore` has exactly one public field: `customer`.** Everything else on the store is\n> underscore-prefixed internal state. Order and favorite lists are **not** fields on the store —\n> they come from the `Promise` that `getOrders()` / `getFavoriteProducts()` return. Reading\n> `customerStore.orders` or `customerStore.favoriteProducts` is a TypeScript error (TS2339 /\n> TS2551), not a silent empty list.\n>\n> This is the one place where copying data into `useState` is correct. The\n> \"don't mirror store data in `useState`\" rule in `async-data-patterns` §5 is about\n> store-backed observable fields; orders and favorites have no such field to observe.\n\n### Orders List\n\n```tsx\nimport { useEffect, useState } from \"preact/hooks\";\nimport {\n  customerStore,\n  getOrders,\n  IkasOrder,\n  getIkasOrderFormattedTotalFinalPrice,\n  getIkasOrderTotalItemCount,\n  getIkasOrderFormattedOrderedAt,\n  getIkasOrderPackageStatusTranslation,\n  getIkasOrderHref,\n} from \"@ikas/bp-storefront\";\n\n// getOrders() RESOLVES with the orders — it writes nothing to the store.\n// Keep the result in local state; there is no `customerStore.orders`.\nconst [orders, setOrders] = useState<IkasOrder[]>([]);\nconst [loading, setLoading] = useState(true);\n\nuseEffect(() => {\n  let cancelled = false;\n  getOrders(customerStore)\n    .then((result) => {\n      if (!cancelled) setOrders(result ?? []);\n    })\n    .finally(() => {\n      if (!cancelled) setLoading(false);\n    });\n  return () => {\n    cancelled = true;\n  };\n}, []);\n\n{orders.map((order) => (\n  <a key={order.id} href={getIkasOrderHref(order)} className=\"order-card\">\n    <span>Order #{order.orderNumber}</span>\n    <span>{getIkasOrderFormattedOrderedAt(order)}</span>\n    <span>{getIkasOrderTotalItemCount(order)} items</span>\n    <span>{getIkasOrderFormattedTotalFinalPrice(order)}</span>\n    <span>{getIkasOrderPackageStatusTranslation(order)}</span>\n  </a>\n))}\n```\n\n### Order Detail\n\n```tsx\nimport {\n  getIkasOrderLineVariantMainImage,\n  getDefaultSrc,\n} from \"@ikas/bp-storefront\";\n\n// order.orderLineItems contains line items\n{order.orderLineItems.map((item) => {\n  const image = item.variant\n    ? getIkasOrderLineVariantMainImage(item.variant)\n    : null;\n  return (\n    <div key={item.id}>\n      {image && <img src={getDefaultSrc(image)} />}\n      <span>{item.variant?.name}</span>\n      <span>Qty: {item.quantity}</span>\n    </div>\n  );\n})}\n```\n\n### Address Management\n\nAddress forms are country-driven: the field set and the row layout come from\n`addressForm.addressFormat`, not from a list you write. Call\n`get_framework_guide({ topic: \"address-form-patterns\" })` before building one.\n\n```tsx\nimport {\n  getEmptyAddressForm,\n  getIkasCustomerAddressForm,\n  initAddressForm,\n  submitAddressForm,\n  deleteCustomerAddress,\n  customerStore,\n} from \"@ikas/bp-storefront\";\n\nconst addresses = customerStore.customer?.addresses ?? [];\n\n// Create: getEmptyAddressForm takes the STORE.\n// Edit:   getIkasCustomerAddressForm takes the ADDRESS.\nconst addressForm = address ? getIkasCustomerAddressForm(address) : getEmptyAddressForm(customerStore);\n\n// init is async and loads the country format + location lists; gate render on it.\nawait initAddressForm(addressForm, address);\n\n// Render rows from addressForm.addressFormat, set values via setAddressForm*(addressForm, value),\n// then submit (it validates and returns a boolean):\nconst ok = await submitAddressForm(addressForm);\n\n// Delete takes the ADDRESS OBJECT, not an id:\nawait deleteCustomerAddress(customerStore, address);\n```\n\n### Favorites\n\n```tsx\nimport { useEffect, useState } from \"preact/hooks\";\nimport {\n  customerStore,\n  getFavoriteProducts,\n  IkasProduct,\n} from \"@ikas/bp-storefront\";\n\n// Same rule as orders: getFavoriteProducts() resolves with the products.\n// There is no `customerStore.favoriteProducts` field.\nconst [favorites, setFavorites] = useState<IkasProduct[]>([]);\nconst [loading, setLoading] = useState(true);\n\nuseEffect(() => {\n  let cancelled = false;\n  getFavoriteProducts(customerStore)\n    .then((result) => {\n      if (!cancelled) setFavorites(result ?? []);\n    })\n    .finally(() => {\n      if (!cancelled) setLoading(false);\n    });\n  return () => {\n    cancelled = true;\n  };\n}, []);\n```\n\nThe favorites **list** is a fetched snapshot, but the favorite **flag** is store-backed and\nreactive — `isFavoriteIkasProduct(product)` reads the store synchronously, so heart icons inside\nan `observer()` sub-component update on their own:\n\n```tsx\nimport { observer } from \"@ikas/component-utils\";\nimport {\n  isFavoriteIkasProduct,\n  addIkasProductToFavorites,\n  removeIkasProductFromFavorites,\n} from \"@ikas/bp-storefront\";\n\nconst FavoriteButton = observer(function FavoriteButton({ product }: { product: IkasProduct }) {\n  const isFavorite = isFavoriteIkasProduct(product);\n  return (\n    <button\n      onClick={() =>\n        isFavorite\n          ? removeIkasProductFromFavorites(product)\n          : addIkasProductToFavorites(product)\n      }\n    >\n      {isFavorite ? \"\\u2665\" : \"\\u2661\"}\n    </button>\n  );\n});\n```\n\nBecause the list is a snapshot, removing a favorite does **not** re-render it. Drop the item from\nyour local array as well:\n\n```tsx\nonFavoriteRemove={() => setFavorites((prev) => prev.filter((f) => f.id !== product.id))}\n```\n\nNote: `getFavoriteProducts` fetches at most 100 products in one call.\n\n### Account Info Form\n\n```tsx\nimport {\n  getAccountInfoForm,\n  initAccountInfoForm,\n  setAccountInfoFormFirstName,\n  setAccountInfoFormLastName,\n  setAccountInfoFormPhone,\n  submitAccountInfoForm,\n} from \"@ikas/bp-storefront\";\n\nconst accountForm = getAccountInfoForm(customerStore);\n\nuseEffect(() => {\n  initAccountInfoForm(accountForm);\n}, []);\n\nconst handleSave = async (e: Event) => {\n  e.preventDefault();\n  await submitAccountInfoForm(accountForm);\n};\n```\n\n### Delete Account (Deactivate Customer)\n\nAccount deletion is a form like any other — the customer confirms with their password. The form\ndoes **not** clear the session, so call `logout(customerStore)` yourself once it succeeds.\n\n```tsx\nimport {\n  customerStore,\n  getDeactivateCustomerForm,\n  initDeactivateCustomerForm,\n  setDeactivateCustomerFormPassword,\n  submitDeactivateCustomerForm,\n  logout,\n  Router,\n} from \"@ikas/bp-storefront\";\n\nconst deactivateForm = getDeactivateCustomerForm(customerStore);\n\nuseEffect(() => {\n  initDeactivateCustomerForm(deactivateForm);\n}, []);\n\nconst handleDelete = async (e: Event) => {\n  e.preventDefault();\n  const success = await submitDeactivateCustomerForm(deactivateForm);\n  if (success) {\n    await logout(customerStore);\n    Router.navigateToPage(\"INDEX\");\n  }\n};\n\n<form onSubmit={handleDelete}>\n  {deactivateForm.isFailure && <div>{deactivateForm.responseMessage}</div>}\n\n  <input\n    type=\"password\"\n    value={deactivateForm.password.value}\n    onInput={(e) => setDeactivateCustomerFormPassword(deactivateForm, e.target.value)}\n  />\n  {deactivateForm.password.hasError && <span>{deactivateForm.password.message}</span>}\n\n  <button type=\"submit\" disabled={deactivateForm.isSubmitting}>\n    {deactivateForm.isSubmitting ? \"Deleting...\" : \"Delete Account\"}\n  </button>\n</form>\n```\n\n`submit` already turns the API error for an existing deletion request into a translated\n`responseMessage` — render `responseMessage` rather than inspecting the API response yourself.\nDeletion is irreversible, so gate the form behind a confirmation step in your own UI.\n\n### Tab Navigation Pattern\n\nProduction themes use a tab-based layout:\n\n```tsx\nconst [activeTab, setActiveTab] = useState(\"orders\");\n\nconst tabs = [\n  { id: \"orders\", label: \"Orders\" },\n  { id: \"addresses\", label: \"Addresses\" },\n  { id: \"favorites\", label: \"Favorites\" },\n  { id: \"account\", label: \"Account Info\" },\n];\n\n<div className=\"account-tabs\">\n  {tabs.map((tab) => (\n    <button\n      key={tab.id}\n      className={activeTab === tab.id ? \"active\" : \"\"}\n      onClick={() => setActiveTab(tab.id)}\n    >\n      {tab.label}\n    </button>\n  ))}\n</div>\n\n{activeTab === \"orders\" && <OrdersList />}\n{activeTab === \"addresses\" && <AddressList />}\n{activeTab === \"favorites\" && <FavoritesList />}\n{activeTab === \"account\" && <AccountInfoForm />}\n```",
       "tags": [
         "account",
         "orders",
@@ -384,7 +387,10 @@
         "favorites",
         "dashboard",
         "customer",
-        "tabs"
+        "tabs",
+        "deactivate",
+        "delete account",
+        "password"
       ]
     },
     "header-footer-patterns": {

package/data/storefront-api.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-08-20T09:36:42.821Z",
+  "generatedAt": "2026-08-24T11:34:54.069Z",
   "functions": [
     {
       "name": "apiListProductBrand",
@@ -10746,6 +10746,88 @@
       "isAsync": true,
       "isClass": false
     },
+    {
+      "name": "initDeactivateCustomerForm",
+      "displayName": "init",
+      "signature": "function initDeactivateCustomerForm(deactivateCustomerForm: DeactivateCustomerForm): void",
+      "description": "Initializes the deactivate customer form with default password field values, labels, and placeholders.",
+      "params": [
+        {
+          "name": "deactivateCustomerForm",
+          "description": "- The deactivate customer form model to initialize"
+        }
+      ],
+      "returns": "void",
+      "returnType": "void",
+      "example": "```typescript\nimport { initDeactivateCustomerForm } from \"@ikas/bp-storefront\";\ninitDeactivateCustomerForm(deactivateCustomerForm);\n```",
+      "categories": [
+        "Validation",
+        "DeactivateCustomer",
+        "Form"
+      ],
+      "related": [
+        "setDeactivateCustomerFormPassword",
+        "submitDeactivateCustomerForm"
+      ],
+      "isAsync": false,
+      "isClass": false
+    },
+    {
+      "name": "setDeactivateCustomerFormPassword",
+      "displayName": "setPassword",
+      "signature": "function setDeactivateCustomerFormPassword(deactivateCustomerForm: DeactivateCustomerForm, value: string): void",
+      "description": "Sets the password value on the deactivate customer form and re-validates if the form has already been submitted.",
+      "params": [
+        {
+          "name": "deactivateCustomerForm",
+          "description": "- The deactivate customer form model to update"
+        },
+        {
+          "name": "value",
+          "description": "- The new password string to set"
+        }
+      ],
+      "returns": "void",
+      "returnType": "void",
+      "example": "```typescript\nimport { setDeactivateCustomerFormPassword } from \"@ikas/bp-storefront\";\nsetDeactivateCustomerFormPassword(deactivateCustomerForm, \"mySecurePassword123\");\n```",
+      "categories": [
+        "Validation",
+        "DeactivateCustomer",
+        "Form"
+      ],
+      "related": [
+        "initDeactivateCustomerForm",
+        "submitDeactivateCustomerForm"
+      ],
+      "isAsync": false,
+      "isClass": false
+    },
+    {
+      "name": "submitDeactivateCustomerForm",
+      "displayName": "submit",
+      "signature": "async function submitDeactivateCustomerForm(deactivateCustomerForm: DeactivateCustomerForm): Promise<boolean>",
+      "description": "Validates and submits the deactivate customer form, deleting the current customer's account after password verification.\nThe customer session is not cleared automatically, call `logout` after a successful submission.",
+      "params": [
+        {
+          "name": "deactivateCustomerForm",
+          "description": "- The deactivate customer form model to submit"
+        }
+      ],
+      "returns": "A promise that resolves to true if the account was deactivated successfully, or false on validation error or API failure",
+      "returnType": "Promise<boolean>",
+      "example": "```typescript\nimport { customerStore, logout, submitDeactivateCustomerForm } from \"@ikas/bp-storefront\";\nconst success = await submitDeactivateCustomerForm(deactivateCustomerForm);\nif (success) {\n  await logout(customerStore);\n}\n```",
+      "categories": [
+        "Validation",
+        "DeactivateCustomer",
+        "Form"
+      ],
+      "related": [
+        "initDeactivateCustomerForm",
+        "setDeactivateCustomerFormPassword"
+      ],
+      "isAsync": true,
+      "isClass": false
+    },
     {
       "name": "initForgotPasswordForm",
       "displayName": "init",
@@ -13986,7 +14068,8 @@
       ],
       "related": [
         "hasCustomer",
-        "logout"
+        "logout",
+        "getDeactivateCustomerForm"
       ],
       "isAsync": true,
       "isClass": false,
@@ -14557,6 +14640,58 @@
         "IkasCustomerStore"
       ]
     },
+    {
+      "name": "getDeactivateCustomerForm",
+      "signature": "function getDeactivateCustomerForm(customerStore: IkasCustomerStore): DeactivateCustomerForm",
+      "description": "Get or initialize the deactivate customer form with validation for deleting the current customer's account.",
+      "params": [
+        {
+          "name": "customerStore",
+          "description": "- The customer store instance"
+        }
+      ],
+      "returns": "The deactivate customer form object with validated fields",
+      "returnType": "DeactivateCustomerForm",
+      "example": "```typescript\nimport {\n  customerStore,\n  getDeactivateCustomerForm,\n  setDeactivateCustomerFormPassword,\n  submitDeactivateCustomerForm,\n  logout,\n} from \"@ikas/bp-storefront\";\n\nfunction DeleteAccountPage() {\n  const form = getDeactivateCustomerForm(customerStore);\n\n  const handleSubmit = async () => {\n    const isSuccess = await submitDeactivateCustomerForm(form);\n    if (isSuccess) {\n      await logout(customerStore);\n      Router.navigateToPage(\"INDEX\");\n    }\n  };\n\n  return (\n    <form>\n      <input\n        type=\"password\"\n        value={form.password.value}\n        onChange={e => setDeactivateCustomerFormPassword(form, e.target.value)}\n      />\n      <button onClick={handleSubmit}>Delete Account</button>\n    </form>\n  );\n}\n```",
+      "categories": [
+        "Customer",
+        "Account"
+      ],
+      "related": [
+        "clearDeactivateCustomerForm",
+        "deactivateCustomer"
+      ],
+      "isAsync": false,
+      "isClass": false,
+      "parameterTypes": [
+        "IkasCustomerStore"
+      ]
+    },
+    {
+      "name": "clearDeactivateCustomerForm",
+      "signature": "function clearDeactivateCustomerForm(customerStore: IkasCustomerStore): void",
+      "description": "Clear the cached deactivate customer form, forcing a fresh form on next retrieval.",
+      "params": [
+        {
+          "name": "customerStore",
+          "description": "- The customer store instance"
+        }
+      ],
+      "returnType": "void",
+      "example": "```typescript\nimport { customerStore, clearDeactivateCustomerForm } from \"@ikas/bp-storefront\";\n\nfunction handleDeactivateCustomerReset() {\n  clearDeactivateCustomerForm(customerStore);\n}\n```",
+      "categories": [
+        "Customer",
+        "Account"
+      ],
+      "related": [
+        "getDeactivateCustomerForm"
+      ],
+      "isAsync": false,
+      "isClass": false,
+      "parameterTypes": [
+        "IkasCustomerStore"
+      ]
+    },
     {
       "name": "getForgotPasswordForm",
       "signature": "function getForgotPasswordForm(customerStore: IkasCustomerStore): ForgotPasswordForm",

package/data/storefront-types.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-08-20T09:36:42.849Z",
+  "generatedAt": "2026-08-24T11:34:54.098Z",
   "types": [
     {
       "name": "TextElementTagTypes",
@@ -13831,6 +13831,22 @@
       ],
       "filePath": "validator/customer-review/index.ts"
     },
+    {
+      "name": "DeactivateCustomerForm",
+      "kind": "type",
+      "domain": "validator",
+      "properties": [
+        {
+          "name": "password",
+          "type": "IkasFormItem",
+          "optional": false
+        }
+      ],
+      "extends": [
+        "IkasForm"
+      ],
+      "filePath": "validator/deactivate-customer/index.ts"
+    },
     {
       "name": "ForgotPasswordForm",
       "kind": "type",

package/package.json

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