@ikas/code-components-mcp 1.4.0-beta.16 → 1.4.0-beta.160

package/data/section-templates/product-detail-section/children/ProductDetailFeatures/ikas-config-snippet.json

@@ -10,6 +10,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -18,6 +22,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },
@@ -26,6 +34,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -34,6 +46,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },
@@ -42,6 +58,19 @@
       "displayName": "Specifications",
       "type": "COMPONENT_LIST",
       "required": false,
+      "defaultValue": {
+        "components": [
+          {
+            "codeComponentId": "nb34u3yu-product-detail-feature-item"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-feature-item"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-feature-item"
+          }
+        ]
+      },
       "filteredComponentIds": [
         "<id-of-ProductDetailFeatureItem>"
       ]

package/data/section-templates/product-detail-section/children/ProductDetailNameFavorite/ikas-config-snippet.json

@@ -16,6 +16,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -24,6 +28,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },
@@ -32,6 +40,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -40,6 +52,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },
@@ -47,7 +63,8 @@
       "name": "hideFavoriteButton",
       "displayName": "Hide Favorite Button",
       "type": "BOOLEAN",
-      "required": false
+      "required": false,
+      "defaultValue": false
     }
   ],
   "propGroups": [

package/data/section-templates/product-detail-section/children/ProductDetailOffer/ikas-config-snippet.json

@@ -16,6 +16,7 @@
       "displayName": "Auto Select Offers",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "groupId": "layout"
     },
     {
@@ -71,6 +72,7 @@
       "displayName": "Image Aspect Ratio",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Square",
       "groupId": "image",
       "enumTypeId": "{{ENUM_ID:AspectRatio}}"
     },
@@ -79,6 +81,7 @@
       "displayName": "Image Fit",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Cover",
       "groupId": "image",
       "enumTypeId": "{{ENUM_ID:ObjectFit}}"
     },
@@ -95,6 +98,7 @@
       "displayName": "Compact View",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "groupId": "layout"
     },
     {
@@ -102,6 +106,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -110,6 +118,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },
@@ -118,6 +130,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -126,6 +142,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },

package/data/section-templates/product-detail-section/children/ProductDetailOptionSet/ikas-config-snippet.json

@@ -80,6 +80,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -88,6 +92,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },
@@ -96,6 +104,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -104,6 +116,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },

package/data/section-templates/product-detail-section/children/ProductDetailPrices/ikas-config-snippet.json

@@ -16,6 +16,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -24,6 +28,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },
@@ -32,6 +40,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -40,6 +52,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     }

package/data/section-templates/product-detail-section/children/ProductDetailProductGroup/ikas-config-snippet.json

@@ -16,6 +16,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -24,6 +28,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },
@@ -32,6 +40,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -40,6 +52,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     }

package/data/section-templates/product-detail-section/children/ProductDetailSku/ikas-config-snippet.json

@@ -24,6 +24,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -32,6 +36,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },
@@ -40,6 +48,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -48,6 +60,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     }

package/data/section-templates/product-detail-section/children/ProductDetailVariant/ikas-config-snippet.json

@@ -16,6 +16,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -24,6 +28,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "mobile",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },
@@ -32,6 +40,10 @@
       "displayName": "Top Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginTopStyleType"
     },
@@ -40,6 +52,10 @@
       "displayName": "Bottom Spacing",
       "type": "TYPE",
       "required": false,
+      "defaultValue": {
+        "value": 0,
+        "unit": "px"
+      },
       "groupId": "desktop",
       "typeId": "@ikas/bp-storefront-models-MarginBottomStyleType"
     },
@@ -48,6 +64,7 @@
       "displayName": "Image Variant",
       "type": "BOOLEAN",
       "required": false,
+      "defaultValue": false,
       "description": "Use product images for color variant."
     }
   ],

package/data/section-templates/product-detail-section/hooks/useBundleProducts.ts

@@ -9,15 +9,16 @@ import {
   cartStore,
   waitForCartStoreInit,
 } from "@ikas/bp-storefront";
-import { runInAction } from "mobx";
 import { adjustBundleProductQuantity } from "../utils/bundle";
 
+// No mobx action wrapper needed: adjustments go through the public
+// setBundleProductQuantity API (plain mutation, same as the SDK's own usage
+// examples), and keeping the theme free of direct mobx imports lets the
+// scaffold install cleanly under pnpm's strict node_modules layout.
 function adjustBundleQuantities(products: IkasBundleProduct[]) {
-  runInAction(() => {
-    for (const bp of products) {
-      adjustBundleProductQuantity(bp);
-    }
-  });
+  for (const bp of products) {
+    adjustBundleProductQuantity(bp);
+  }
 }
 
 export function useBundleProducts(product: IkasProduct | null | undefined) {

package/data/section-templates/product-detail-section/ikas-config-snippet.json

@@ -16,6 +16,7 @@
       "displayName": "Aspect Ratio",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Square",
       "groupId": "image-settings",
       "enumTypeId": "{{ENUM_ID:AspectRatio}}"
     },
@@ -24,6 +25,7 @@
       "displayName": "Image Fit",
       "type": "ENUM",
       "required": false,
+      "defaultValue": "Cover",
       "groupId": "image-settings",
       "enumTypeId": "{{ENUM_ID:ObjectFit}}"
     },
@@ -32,6 +34,46 @@
       "displayName": "Info Components",
       "type": "COMPONENT_LIST",
       "required": false,
+      "defaultValue": {
+        "components": [
+          {
+            "codeComponentId": "nb34u3yu-product-detail-name-favorite"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-sku"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-prices"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-product-group"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-bundle-product"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-variant"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-option-set"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-add-to-cart"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-back-in-stock"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-offer"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-features"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-description"
+          }
+        ]
+      },
       "filteredComponentIds": [
         "<id-of-ProductDetailNameFavorite>",
         "<id-of-ProductDetailSku>",
@@ -39,6 +81,7 @@
         "<id-of-ProductDetailProductGroup>",
         "<id-of-ProductDetailVariant>",
         "<id-of-ProductDetailAddToCart>",
+        "<id-of-ProductDetailBackInStock>",
         "<id-of-ProductDetailFeatures>",
         "<id-of-ProductDetailDescription>",
         "<id-of-ProductDetailBundleProduct>",
@@ -51,6 +94,16 @@
       "displayName": "Sub Components",
       "type": "COMPONENT_LIST",
       "required": false,
+      "defaultValue": {
+        "components": [
+          {
+            "codeComponentId": "nb34u3yu-product-detail-bundle-furniture"
+          },
+          {
+            "codeComponentId": "nb34u3yu-product-detail-offer"
+          }
+        ]
+      },
       "filteredComponentIds": [
         "<id-of-ProductDetailBundleFurniture>",
         "<id-of-ProductDetailOffer>"

package/data/section-templates/product-detail-section/sub-components/Modal/index.tsx

@@ -0,0 +1,120 @@
+import { useState, useEffect, useRef, useId } from "preact/hooks";
+import { createPortal } from "preact/compat";
+import type { ComponentChildren } from "preact";
+import { useScrollLock } from "../../hooks/useScrollLock";
+import { cx } from "../../utils/cx";
+import { XSVG } from "../icons";
+import Button, { type ButtonProps } from "../Button";
+
+interface Props {
+  onClose: () => void;
+  title: string;
+  maxWidth?: string;
+  children: ComponentChildren;
+  className?: string;
+  okText?: string;
+  cancelText?: string;
+  onOk?: (e: Event) => void;
+  okButtonProps?: ButtonProps;
+  cancelButtonProps?: ButtonProps;
+  footer?: ComponentChildren | null;
+}
+
+export default function Modal({
+  onClose,
+  title,
+  maxWidth = "37.5rem",
+  children,
+  className,
+  okText,
+  cancelText,
+  onOk,
+  okButtonProps,
+  cancelButtonProps,
+  footer,
+}: Props) {
+  const titleId = useId();
+  const [visible, setVisible] = useState(false);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  const handleCloseRef = useRef(() => {});
+  handleCloseRef.current = () => {
+    setVisible(false);
+    setTimeout(() => onCloseRef.current(), 300);
+  };
+
+  useScrollLock();
+
+  useEffect(() => {
+    const rafId = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(rafId);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") handleCloseRef.current();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  return createPortal(
+    <div
+      className={cx("kombos-modal", visible && "kombos-modal--open", className)}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={titleId}
+    >
+      <div className="kombos-modal__panel" style={{ maxWidth }}>
+        <div className="kombos-modal__header">
+          <h2 id={titleId} className="kombos-modal__title text-md-medium">
+            {title}
+          </h2>
+          <button
+            type="button"
+            className="kombos-modal__close"
+            onClick={() => handleCloseRef.current()}
+            aria-label="Close"
+          >
+            <XSVG />
+          </button>
+        </div>
+
+        <div className="kombos-modal__body">{children}</div>
+
+        {footer !== null &&
+          (footer !== undefined ? (
+            <div className="kombos-modal__footer">{footer}</div>
+          ) : (
+            (cancelText || okText) && (
+              <div className="kombos-modal__footer">
+                {cancelText && (
+                  <Button
+                    variant="secondary"
+                    size="s"
+                    type="button"
+                    onClick={() => handleCloseRef.current()}
+                    {...cancelButtonProps}
+                  >
+                    {cancelText}
+                  </Button>
+                )}
+                {okText && (
+                  <Button
+                    variant="primary"
+                    size="s"
+                    onClick={onOk}
+                    {...okButtonProps}
+                  >
+                    {okText}
+                  </Button>
+                )}
+              </div>
+            )
+          ))}
+      </div>
+    </div>,
+    document.body,
+  );
+}