@ikas/bp-storefront 1.4.0-beta.17 → 1.4.0-beta.171

package/dist/router/index.d.ts

@@ -181,4 +181,32 @@ export declare class Router {
     private static ensurePathPrefix;
 }
 export declare const router: Router;
+/**
+ * Put the visitor's storefront routing in front of a path you wrote yourself.
+ *
+ * Entity links (`getProductHref`, `getIkasOrderHref`, …) and LINK props already carry the prefix.
+ * A literal path in your own markup does not: `href="/cart"` sends a visitor browsing `/en` to the
+ * default language. Wrap it, and a store with no extra routings gets the path back unchanged.
+ *
+ * Idempotent — a path that already starts with a supported routing segment is returned as-is.
+ * Anything that is not a path on this storefront — an absolute URL, `mailto:`, `tel:` — is returned
+ * untouched, so a merchant-authored prop can be wrapped without checking it first.
+ *
+ * @ai-category Navigation
+ * @ai-related navigate, navigateToPage
+ *
+ * @param path - A path on this storefront, starting with `/`
+ * @returns The path under the current routing (e.g. `/cart` → `/en/cart`)
+ *
+ * @example
+ * ```tsx
+ * import { Router, withRoutePrefix } from "@ikas/bp-storefront";
+ *
+ * // Correct href for crawlers, middle-click and open-in-new-tab...
+ * <a href={withRoutePrefix("/cart")} onClick={e => {
+ *   e.preventDefault();
+ *   Router.navigateToPage("CART"); // ...and this prefixes on its own.
+ * }}>Cart</a>
+ * ```
+ */
 export declare function withRoutePrefix(path: string): string;

package/dist/router/index.js

@@ -1 +1 @@
-import{IkasStorefrontConfig as e}from"../packages/storefront-config/src/index.js";import{getCheckoutUrlFromCartStore as t}from"../functions/stores/cart/index.js";import{cartStore as a}from"../stores/cart/index.js";var r=function(){function r(){}return r.initialize=function(e,t){var a=this;this.window=t||window,this.currentPath=void 0!==this.window?this.window.location.pathname:"/",void 0!==this.window&&(r.pageParams=e,this.window.addEventListener("popstate",r.handlePopState),r.interceptAnchorClicks(),this.window.addEventListener("pageshow",function(e){return a.isFromBFCache=e.persisted}))},r.navigate=function(t,a,n){if(void 0===a&&(a=!1),void 0===n&&(n=!1),void 0!==this.window){var o=r.ensurePathPrefix(t);e.getIsPreview()||(a?this.window.history.replaceState({},"",o):n?this.window.open(o,"_blank"):this.window.location.href=o),r.handleRouteChange(o)}},r.navigateToPage=function(e,n,i,c,s){void 0===c&&(c=!1),void 0===s&&(s=!1);var u=Object.entries(i||{}).map(function(e){var t=e[0],a=e[1];return"".concat(t,"=").concat(encodeURIComponent(a))}).join("&"),h="";switch(e){case"INDEX":h="/";break;case"ACCOUNT":h="/account";break;case"ACTIVATE_CUSTOMER":h="/account/activate";break;case"ADDRESSES":h="/account/addresses";break;case"FAVORITE_PRODUCTS":h="/account/favorite-products";break;case"FORGOT_PASSWORD":h="/account/forgot-password";break;case"LOGIN":h="/account/login";break;case"RAFFLE_ACCOUNT":h="/account/raffles";break;case"RECOVER_PASSWORD":h="/account/recover-password";break;case"REGISTER":h="/account/register";break;case"ORDERS":h="/account/orders";break;case"ORDER_DETAIL":h="/account/orders/".concat(n);break;case"BLOG_INDEX":h="/blog";break;case"BLOG":case"BLOG_CATEGORY":h="/blog/".concat(n);break;case"CART":h="/cart";break;case"CHECKOUT":h=t(a);break;case"CUSTOM":h="/pages/".concat(n);break;case"RAFFLE":h="/raffle";break;case"RAFFLE_DETAIL":h="/raffle/".concat(n);break;case"SEARCH":h="/search";break;case"NOT_FOUND":h="/404"}u&&(h+="?".concat(u)),r.navigate(o(h),c,s)},r.addObserver=function(e){r.observers.push(e)},r.removeObserver=function(e){r.observers=r.observers.filter(function(t){return t!==e})},r.goBack=function(){this.window.history.back()},r.getCurrentPath=function(){return r.currentPath},r.getPageParams=function(){return r.pageParams},r.router_getQueryParams=function(){if(void 0===this.window)return{};var e={};return new URLSearchParams(this.window.location.search).forEach(function(t,a){e[a]=t}),e},r.handleRouteChange=function(e){r.currentPath=e,r.notifyObservers()},r.handlePopState=function(){void 0!==this.window&&r.handleRouteChange(this.window.location.pathname)},r.interceptAnchorClicks=function(){void 0!==this.window&&this.window.addEventListener("click",function(e){var t=e.target.closest("a");if(t&&"A"===t.tagName&&t.getAttribute("href")){var a=t.getAttribute("href");if(e.metaKey||e.ctrlKey)return;if(/^(mailto|tel|sms|javascript):/i.test(a))return;e.preventDefault();var n="_blank"===t.getAttribute("target");r.navigate(a,!1,n)}})},r.notifyObservers=function(){r.observers.forEach(function(e){return e(r.currentPath)})},r.ensurePathPrefix=function(e){return e.startsWith("http")||e.startsWith("/")?e:"/".concat(e)},r.currentPath="undefined"!=typeof window?window.location.pathname:"/",r.observers=[],r.pageParams={},r.isFromBFCache=!1,r}(),n=r;function o(t){var a=e.getCurrentPath(),r=t.split("/").filter(function(e){return""!==e})[0];return r&&e.getSupportedPaths().includes(r)?t:"".concat(a?"/".concat(a):"").concat(t).replace("//","/")}export{r as Router,n as router,o as withRoutePrefix};
+import{IkasStorefrontConfig as e}from"../packages/storefront-config/src/index.js";import{getCheckoutUrlFromCartStore as t}from"../functions/stores/cart/index.js";import{cartStore as a}from"../stores/cart/index.js";var r=function(){function r(){}return r.initialize=function(e,t){var a=this;this.window=t||window,this.currentPath=void 0!==this.window?this.window.location.pathname:"/",void 0!==this.window&&(r.pageParams=e,this.window.addEventListener("popstate",r.handlePopState),r.interceptAnchorClicks(),this.window.addEventListener("pageshow",function(e){return a.isFromBFCache=e.persisted}))},r.navigate=function(t,a,n){if(void 0===a&&(a=!1),void 0===n&&(n=!1),void 0!==this.window){var o=r.ensurePathPrefix(t);e.getIsPreview()||(a?this.window.history.replaceState({},"",o):n?this.window.open(o,"_blank"):this.window.location.href=o),r.handleRouteChange(o)}},r.navigateToPage=function(e,n,i,c,s){void 0===c&&(c=!1),void 0===s&&(s=!1);var u=Object.entries(i||{}).map(function(e){var t=e[0],a=e[1];return"".concat(t,"=").concat(encodeURIComponent(a))}).join("&"),h="";switch(e){case"INDEX":h="/";break;case"ACCOUNT":h="/account";break;case"ACTIVATE_CUSTOMER":h="/account/activate";break;case"ADDRESSES":h="/account/addresses";break;case"FAVORITE_PRODUCTS":h="/account/favorite-products";break;case"FORGOT_PASSWORD":h="/account/forgot-password";break;case"LOGIN":h="/account/login";break;case"RAFFLE_ACCOUNT":h="/account/raffles";break;case"RECOVER_PASSWORD":h="/account/recover-password";break;case"REGISTER":h="/account/register";break;case"ORDERS":h="/account/orders";break;case"ORDER_DETAIL":h="/account/orders/".concat(n);break;case"BLOG_INDEX":h="/blog";break;case"BLOG":case"BLOG_CATEGORY":h="/blog/".concat(n);break;case"CART":h="/cart";break;case"CHECKOUT":h=t(a);break;case"CUSTOM":h="/pages/".concat(n);break;case"RAFFLE":h="/raffle";break;case"RAFFLE_DETAIL":h="/raffle/".concat(n);break;case"SEARCH":h="/search";break;case"NOT_FOUND":h="/404"}u&&(h+="?".concat(u)),r.navigate(o(h),c,s)},r.addObserver=function(e){r.observers.push(e)},r.removeObserver=function(e){r.observers=r.observers.filter(function(t){return t!==e})},r.goBack=function(){this.window.history.back()},r.getCurrentPath=function(){return r.currentPath},r.getPageParams=function(){return r.pageParams},r.router_getQueryParams=function(){if(void 0===this.window)return{};var e={};return new URLSearchParams(this.window.location.search).forEach(function(t,a){e[a]=t}),e},r.handleRouteChange=function(e){r.currentPath=e,r.notifyObservers()},r.handlePopState=function(){void 0!==this.window&&r.handleRouteChange(this.window.location.pathname)},r.interceptAnchorClicks=function(){void 0!==this.window&&this.window.addEventListener("click",function(e){var t=e.target.closest("a");if(t&&"A"===t.tagName&&t.getAttribute("href")){var a=t.getAttribute("href");if(e.metaKey||e.ctrlKey)return;if(/^(mailto|tel|sms|javascript):/i.test(a))return;e.preventDefault();var n="_blank"===t.getAttribute("target");r.navigate(a,!1,n)}})},r.notifyObservers=function(){r.observers.forEach(function(e){return e(r.currentPath)})},r.ensurePathPrefix=function(e){return e.startsWith("http")||e.startsWith("/")?e:"/".concat(e)},r.currentPath="undefined"!=typeof window?window.location.pathname:"/",r.observers=[],r.pageParams={},r.isFromBFCache=!1,r}(),n=r;function o(t){if(/^[a-z][a-z\d+.-]*:/i.test(t)||t.startsWith("//"))return t;var a=e.getCurrentPath(),r=t.split("/").filter(function(e){return""!==e})[0];return r&&e.getSupportedPaths().includes(r)?t:"".concat(a?"/".concat(a):"").concat(t).replace("//","/")}export{r as Router,n as router,o as withRoutePrefix};

package/dist/storefront-api/src/__api/types/index.d.ts

@@ -49,7 +49,7 @@ export type LoyaltyProgramFilterTypeEnum = "LoyaltyProgramFilterTypeEnum" | "CAT
 export type LoyaltyProgramMethodSpendingTypeEnum = "LoyaltyProgramMethodSpendingTypeEnum" | "FIXED_AMOUNT" | "FREE_PRODUCT" | "FREE_SHIPPING" | "RATIO";
 export type LoyaltyProgramOrderStatusToWinPointsEnum = "LoyaltyProgramOrderStatusToWinPointsEnum" | "ORDER_CREATED" | "ORDER_DELIVERED" | "PAYMENT_COMPLETED";
 export type LoyaltyProgramPointEarningTypeEnum = "LoyaltyProgramPointEarningTypeEnum" | "DYNAMIC_ORDER_AMOUNT" | "DYNAMIC_ORDER_QUANTITY" | "STATIC";
-export type LoyaltyProgramPointHistoryTypeEnum = "LoyaltyProgramPointHistoryTypeEnum" | "EARN" | "SPEND" | "REFUND" | "REFILL";
+export type LoyaltyProgramPointHistoryTypeEnum = "LoyaltyProgramPointHistoryTypeEnum" | "EARN" | "SPEND" | "REFUND" | "REFILL" | "MANUAL_EARN" | "MANUAL_DEDUCT";
 export type MasterPassOperationTypeEnum = "MasterPassOperationTypeEnum" | "CHECK_MASTER_PASS_USER" | "DELETE_CARD" | "DIRECT_PURCHASE" | "FORGOT_PASSWORD" | "LIST_CARDS" | "PURCHASE" | "REGISTER_CARD";
 export type MerchantSettingsAddressTypeEnum = "MerchantSettingsAddressTypeEnum" | "CORPORATE" | "INDIVIDUAL";
 export type OrderAdjustmentEnum = "OrderAdjustmentEnum" | "DECREMENT" | "INCREMENT";

package/dist/storefront-api-client/src/utils/api.d.ts

@@ -5,6 +5,12 @@ export default interface API<T> {
     saveBulk?: (models: T[]) => Promise<APIResponse<any>>;
     delete?: (idList: string[]) => Promise<APIResponse<any>>;
 }
+/**
+ * Error codes the SDK itself distinguishes. NOT exhaustive: the APIResponse
+ * constructor copies `extensions.code` from GraphQL errors verbatim, so
+ * `errorCodes` can carry backend codes that are not listed here (e.g.
+ * VARIANT_NOT_FOUND). Never build an exhaustive switch over this enum.
+ */
 export declare enum APIErrorCode {
     ARGUMENT_VALIDATION_ERROR = "ARGUMENT_VALIDATION_ERROR",
     UNAUTHENTICATED = "UNAUTHENTICATED",
@@ -15,6 +21,7 @@ export declare enum APIErrorCode {
     REQUEST_CANCELLED = "REQUEST_CANCELLED",
     DUPLICATE_KEY_ERROR = "DUPLICATE_KEY_ERROR",
     CUSTOMER_ALREADY_SUBSCRIBED = "CUSTOMER_ALREADY_SUBSCRIBED",
+    MAX_QUANTITY_PER_CART_LIMIT_REACHED = "MAX_QUANTITY_PER_CART_LIMIT_REACHED",
     UNKNOWN = "UNKNOWN"
 }
 export declare class APIResponse<T> {

package/dist/storefront-config/src/index.d.ts

@@ -1,4 +1,6 @@
 import { IkasCustomerReviewSettings, IkasCustomerSettings, IkasIndexPageSeoSetting, IkasLoyaltyProgram, IkasMerchantSettings, IkasProductBackInStockSettings, IkasSalesChannelPaymentGateway, IkasStorefontMetaTemplates, IkasStorefrontB2BSettings, IkasStorefrontPopup, IkasStorefrontRouting, IkasStorefrontType, IkasThemeStockPreference } from "../../storefront-models/src";
+import { ThemeGlobals } from "./theme-globals";
+export * from "./theme-globals";
 export declare class IkasStorefrontConfig {
     static themeId?: string;
     static apiUrl?: string;
@@ -27,6 +29,7 @@ export declare class IkasStorefrontConfig {
     static tiktokPixelId?: string;
     static stockPreference?: IkasThemeStockPreference;
     static translations: Record<string, any>;
+    static themeGlobals: ThemeGlobals;
     static storefrontJSScripts: string[];
     static highPriorityStoreFrontJSScripts: string[];
     static customerReviewSettings?: IkasCustomerReviewSettings | null;
@@ -100,6 +103,7 @@ export type IkasStorefrontConfigParams = {
     tiktokPixelId?: string;
     stockPreference?: IkasThemeStockPreference;
     translations: Record<string, any>;
+    themeGlobals: ThemeGlobals;
     storefrontJSScripts: string[];
     highPriorityStoreFrontJSScripts: string[];
     customerReviewSettings?: IkasCustomerReviewSettings | null;

package/dist/storefront-config/src/theme-globals.d.ts

@@ -0,0 +1,305 @@
+export declare function cssVarCamelCase(str: string): string;
+/**
+ * Shared "theme globals" contract — the serialized, runtime-readable form of the editor's
+ * global theme settings (the left "Styles" panel): global variables + design tokens
+ * (colors, typography, breakpoints, keyframes, color schemes).
+ *
+ * This is packed into `IkasStorefrontConfig.themeGlobals` and read by the
+ * `@ikas/bp-storefront` runtime API (getThemeSetting / getThemeColors / ...). The same
+ * payload is produced for SSR, client hydration, and the editor canvas via
+ * {@link serializeThemeGlobals}, and returned by the CLI/MCP `list-theme-globals` reader.
+ */
+/** Global-variable value kinds, mirrored from the editor sidebar `GlobalVariableType`. */
+export type GlobalVariableType = "TEXT" | "RICH_TEXT" | "IMAGE" | "COLOR" | "NUMBER" | "BOOLEAN" | "BORDER" | "SHADOW";
+/** A theme "global variable" (Theme Settings panel). `name` is the stable runtime key. */
+export type ThemeSetting = {
+    /** Stable runtime key — the variable's `variableName` (e.g. `_6Q0KV7VGGM`). */
+    name: string;
+    /** Human-facing label. */
+    displayName: string;
+    type: GlobalVariableType;
+    /**
+     * Concrete value, discriminated by `type`:
+     * - TEXT/RICH_TEXT → string · NUMBER → number · BOOLEAN → boolean · COLOR → hex string.
+     * - IMAGE → an IkasImage REFERENCE, e.g. `{ id: "theme-images/<uuid>" }`. It has NO
+     *   `.url` field — resolve to a URL with `getDefaultSrc(value)` / `getSrc(value, size)`
+     *   from `@ikas/bp-storefront`, never read `value.url`.
+     * - BORDER/SHADOW → object, or `null` when unset.
+     */
+    value: any;
+};
+/** A single-value design token (color). `cssVar` resolves the live, scheme-aware value. */
+export type DesignToken = {
+    id: string;
+    name: string;
+    /** Resolved base/default value (e.g. a hex string), or null when unset. */
+    resolved: string | null;
+    /** CSS custom-property reference, e.g. `var(--primaryColor)`. */
+    cssVar: string;
+};
+/** A typography token (text style). Apply `className` to an element to use it. */
+export type TypographyToken = {
+    id: string;
+    name: string;
+    /** Resolved CSS values keyed by camelCased CSS property (e.g. `fontSize`, `fontWeight`). */
+    resolved: Record<string, string>;
+    /** Class selector the editor emits for this text style, e.g. `_<id>`. */
+    className: string;
+    /** True when this is the theme's default/global text style (the editor's "Make Default Style"). */
+    isDefault: boolean;
+};
+export type BreakpointToken = {
+    id: string;
+    name: string;
+    width: number;
+};
+/** A resolved CSS style entry, e.g. { property: "animation-duration", value: "1.4s" }. */
+export type StyleEntry = {
+    property: string;
+    value: string;
+};
+export type KeyframeToken = {
+    id: string;
+    name: string;
+    type: string;
+    /** CSS reference — the animation name / class the editor emits, e.g. `_<id>`. */
+    ref: string;
+    /**
+     * Keyframe-level animation "settings" (the editor's Settings popover). These are CSS
+     * animation/transition properties and DIFFER BY TYPE: a `keyframe` carries
+     * animation-duration/-iteration-count/-play-state/-delay/-timing-function/-direction/
+     * -fill-mode/-timeline/-range + transform-origin; a `transition` carries `transition`.
+     * Both may carry backface-visibility. Empty when none are set.
+     */
+    settings?: StyleEntry[];
+    /** Animation points; each point may carry its own resolved styles. */
+    points?: {
+        point: string;
+        styles?: StyleEntry[];
+    }[];
+};
+/**
+ * A color SLOT — one entry of the top-level `getThemeColorSchemes().schemes` list. It is a
+ * label only (`id` + display `name`); the actual colors for the slot live in each palette's
+ * `colorsByScheme[id]`.
+ */
+export type ColorSchemeSlot = {
+    id: string;
+    name: string;
+};
+/**
+ * A color palette (one entry of `getThemeColorSchemes().values`). Its colors live in
+ * `colorsByScheme` — the top-level `schemes` list holds only slot id→name labels.
+ */
+export type ColorSchemeToken = {
+    id: string;
+    name: string;
+    isDefault: boolean;
+    /** Class selector to activate this scheme value, e.g. `_<id>`. */
+    className: string;
+    /**
+     * This palette's colors, keyed by color-SLOT id (the ids in
+     * `getThemeColorSchemes().schemes`). THIS — not the top-level `schemes` array — is
+     * the source of truth for swatch colors; iterate it to render a palette. Prefer
+     * `cssVar` for live, in-editor reactivity; `resolved` is a render-time snapshot.
+     */
+    colorsByScheme: Record<string, {
+        resolved: string | null;
+        cssVar: string;
+    }>;
+};
+export type ThemeGlobals = {
+    settings: Record<string, ThemeSetting>;
+    colors: DesignToken[];
+    typography: TypographyToken[];
+    breakpoints: BreakpointToken[];
+    keyframes: KeyframeToken[];
+    colorSchemes: {
+        schemes: ColorSchemeSlot[];
+        values: ColorSchemeToken[];
+    };
+};
+/**
+ * Stamps a theme-token type as its RUNTIME view (what the `@ikas/bp-storefront` getters return).
+ * `name` is authoring-only: it is non-unique (two design assets can ship the same one) and
+ * non-stable (renaming must not break references), so matching a token by name is unsafe.
+ * Identify one by its STABLE `id` instead — color → `cssVar` (`var(--<id>)`), typography &
+ * keyframe → `className` / `ref` (`_<id>`), color-scheme slot → a `colorsByScheme` key. Need a
+ * human-readable label? Read `list_theme_globals` (MCP/CLI) or the editor's Styles panel.
+ *
+ * `name` is REMOVED outright rather than re-added as a documented `@deprecated never`: that was
+ * tried first and only yields a soft strikethrough, so `getThemeTypography().find(t => t.name ===
+ * "…")` still compiled and agents wrote it anyway. A hard `Omit` makes it a compile error, and
+ * `ikas-component build` runs `tsc --noEmit` and exits non-zero on it — so such a component cannot
+ * be built or shipped at all.
+ *
+ * The full {@link ThemeGlobals} (with real names) is still what the config holds and what the
+ * CLI/MCP `list-theme-globals` AUTHORING read returns — that is how an agent resolves "the token
+ * named X" to its id. `name` is hidden only at these runtime getter return types.
+ */
+type RuntimeView<T> = Omit<T, "name">;
+export type RuntimeDesignToken = RuntimeView<DesignToken>;
+export type RuntimeTypographyToken = RuntimeView<TypographyToken>;
+export type RuntimeBreakpointToken = RuntimeView<BreakpointToken>;
+export type RuntimeKeyframeToken = RuntimeView<KeyframeToken>;
+export type RuntimeColorSchemeToken = RuntimeView<ColorSchemeToken>;
+export type RuntimeColorSchemeSlot = RuntimeView<ColorSchemeSlot>;
+/**
+ * Runtime view of {@link ThemeGlobals.colorSchemes} (returned by `getThemeColorSchemes`). The
+ * slot list carries only `{ id }`: slot display LABELS (the slot `name`) are authoring-only —
+ * read them via the CLI/MCP `list-theme-globals` or the editor, not at runtime. Render a palette
+ * by iterating each value's `colorsByScheme`, keyed by slot id.
+ */
+export type RuntimeThemeColorSchemes = {
+    schemes: RuntimeColorSchemeSlot[];
+    values: RuntimeColorSchemeToken[];
+};
+export declare const EMPTY_THEME_GLOBALS: ThemeGlobals;
+type StyleValueLike = {
+    value?: any;
+    patternValueId?: string;
+    keyframeValueId?: string;
+    colorSchemeId?: string;
+};
+type StyleConditionLike = {
+    value?: StyleValueLike;
+};
+type ElementStyleLike = {
+    property: string;
+    value?: StyleValueLike | StyleConditionLike[];
+};
+type PatternValueLike = {
+    id: string;
+    name?: string;
+    style?: ElementStyleLike;
+};
+type PatternElementLike = {
+    id: string;
+    name?: string;
+    styles?: ElementStyleLike[];
+    isDefault?: boolean;
+};
+type ColorSchemeLike = {
+    id: string;
+    name?: string;
+};
+type ColorSchemeValueColorLike = {
+    colorSchemeId: string;
+    style?: StyleValueLike;
+};
+type ColorSchemeValueLike = {
+    id: string;
+    name?: string;
+    isDefault?: boolean;
+    /** Set when this scheme belongs to an installed design asset; groups the default fallback. */
+    designAssetId?: string;
+    colors?: ColorSchemeValueColorLike[];
+};
+type BreakpointLike = {
+    id: string;
+    name?: string;
+    width?: number;
+};
+type KeyframePointLike = {
+    point: string;
+    styles?: ElementStyleLike[];
+};
+type KeyframeLike = {
+    id: string;
+    name?: string;
+    type?: string;
+    styles?: ElementStyleLike[];
+    points?: KeyframePointLike[];
+};
+type VariableLike = {
+    id?: string;
+    variableName?: string;
+    displayName?: string;
+    variableType?: string;
+    defaultValue?: any;
+    isGlobal?: boolean;
+};
+export type SerializableProject = {
+    globalsBlueprint?: {
+        module?: {
+            variables?: VariableLike[];
+        };
+    };
+    theme?: {
+        breakpoints?: BreakpointLike[];
+        keyframes?: KeyframeLike[];
+        pattern?: {
+            values?: PatternValueLike[];
+            elements?: PatternElementLike[];
+            colorSchemes?: ColorSchemeLike[];
+            colorSchemeValues?: ColorSchemeValueLike[];
+        };
+    };
+};
+export declare const cssVarRef: (id: string, fallback?: string) => string;
+export declare const rawClassRef: (id: string) => string;
+/**
+ * CSS function-style token a code component writes to reference a theme breakpoint's width.
+ * Breakpoints can't ship as `var(--…)` because the CSS spec forbids `var()` in a media-query
+ * condition — and a `var()` there fails SILENTLY (it parses as valid-looking CSS but the whole
+ * query is dropped). So a code component writes a deliberately non-standard `bp(<breakpointId>)`
+ * token inside its OWN `min-width` / `max-width` condition; it resolves to a concrete `<width>px`
+ * at render time against the LIVE theme (see {@link resolveBreakpointMediaTokens}). The author
+ * picks the direction, so there is no implicit boundary magic:
+ *   `@media (max-width: bp(_mob))` -> `@media (max-width: 767px)`
+ *   `@media (min-width: bp(_mob))` -> `@media (min-width: 767px)`
+ * id-based, never a human name (the id is stable across renames). The id comes from
+ * `list-theme-globals` / `getThemeBreakpoints()`.
+ */
+export declare const breakpointCssToken: (id: string) => string;
+/**
+ * Coerce a theme's breakpoint list into the `{ id, width }` shape {@link resolveBreakpointMediaTokens}
+ * needs, defaulting a missing/non-numeric width to 0. Shared by both render sites so the coercion
+ * rule lives in one place; the editor passes `breakpoints.map(b => b.toJSON())` (Yjs → plain) first.
+ */
+export declare const toResolverBreakpoints: (breakpoints: {
+    id: string;
+    width?: number | string;
+}[]) => {
+    id: string;
+    width: number;
+}[];
+/**
+ * Replace breakpoint width tokens (`bp(<id>)`) in a CSS string with the breakpoint's concrete
+ * `<width>px`, using the given theme breakpoints. Pure text substitution — the single place
+ * breakpoint resolution lives, called at every render-time CC-CSS composition site
+ * (code-generator, editor canvas). Unknown ids are left untouched (the partner dependency
+ * collector ships referenced breakpoints into the target theme, so a real token always resolves).
+ * The `bp(<id>)` literal carries its own `)` boundary, so one id is never matched inside another.
+ *
+ * A `calc()` containing a bp token (e.g. the documented exclusive boundary
+ * `calc(bp(<id>) + 1px)`, but any pure px arithmetic: `calc(bp(a) * 2 + 10px)`,
+ * `calc(bp(a) - bp(b))`, `-webkit-calc(...)`, …) is folded to a single computed `<width>px`
+ * literal, never emitted as `calc()`: csso — the code-generator's minifier for inline/base
+ * page styles — silently drops a media block whose condition contains `calc()`, and older
+ * browsers (e.g. Safari < 16.4) don't evaluate `calc()` in media conditions either.
+ *
+ * Folding limits (an out-of-limit calc degrades to plain token substitution, keeping its
+ * `calc()` form — which csso will still drop from a media condition): bodies longer than
+ * CALC_SCAN_LIMIT chars; an uppercase `CALC(` keyword (the scan is lowercase, matching every
+ * compiled-CSS emitter); `calc(` inside a string/comment can confuse the plain-text scan.
+ */
+export declare function resolveBreakpointMediaTokens(css: string, breakpoints: {
+    id: string;
+    width: number;
+}[]): string;
+/**
+ * True for system/reserved global variables (e.g. `__breakpointsVar__`) — internal
+ * constructs that live in `module.variables` but are NOT user-facing theme settings.
+ * Single source of truth for the `__name__` reserved-id convention; consumers (theme
+ * serialization here, partner publish dependency collection) share it so a new
+ * synthetic var is excluded everywhere at once.
+ */
+export declare const isReservedVariableId: (id?: string | null) => boolean;
+/**
+ * Build the {@link ThemeGlobals} payload from a project's theme. Pure and dependency-free
+ * (works on plain JSON), so the same function serves SSR (`IProject`) and the editor canvas
+ * (`YjsProject.toJSON()`).
+ */
+export declare function serializeThemeGlobals(project?: SerializableProject | null): ThemeGlobals;
+export {};

package/dist/storefront-models/src/index.d.ts

@@ -157,6 +157,7 @@ export * from "./models/product/campaign/filter";
 export * from "./models/product/campaign/product-buyx-then-gety";
 export * from "./models/product/campaign/product-campaign-date-range-field";
 export * from "./models/product/campaign/product-fixed-discount";
+export * from "./models/product/campaign/product-tiered-discount";
 export * from "./models/product/campaign-offer";
 export * from "./models/product/filter";
 export * from "./models/product/group";

package/dist/storefront-models/src/models/blueprint/prop-value/attribute-list.d.ts

@@ -1,6 +1,8 @@
+import { IBlueprintPropValueVariableBinding } from "./variable-binding";
 export interface IBlueprintAttributeListPropValue {
     productId?: string | null;
     variantId?: string | null;
     attributeIds?: string[] | null;
     usePageData?: boolean | null;
+    productVariable?: IBlueprintPropValueVariableBinding | null;
 }

package/dist/storefront-models/src/models/blueprint/prop-value/attribute.d.ts

@@ -1,6 +1,8 @@
+import { IBlueprintPropValueVariableBinding } from "./variable-binding";
 export interface IBlueprintAttributePropValue {
     productId?: string | null;
     variantId?: string | null;
     attributeId?: string | null;
     usePageData?: boolean | null;
+    productVariable?: IBlueprintPropValueVariableBinding | null;
 }

package/dist/storefront-models/src/models/blueprint/prop-value/color.d.ts

@@ -1,3 +1,5 @@
 export interface IBlueprintColorPropValue {
     value: string;
+    patternValueId?: string;
+    colorSchemeId?: string;
 }

package/dist/storefront-models/src/models/blueprint/prop-value/index.d.ts

@@ -28,4 +28,5 @@ export * from "./rich-text";
 export * from "./svg";
 export * from "./svg-list";
 export * from "./text";
+export * from "./variable-binding";
 export * from "./video";

package/dist/storefront-models/src/models/blueprint/prop-value/variable-binding.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A theme data binding stored INSIDE a prop value, so a single field of that value can follow a
+ * bound variable while the rest of the value stays statically authored (see
+ * `IBlueprintAttributePropValue.productVariable`). `key`/`variableId`/`path` mirror the editor's
+ * `IThemeVariableBinding` and `refId`/`componentId` mirror the surrounding `IThemeDynamicValueValue`
+ * context a COMPONENT_LIST child needs to resolve an ancestor's variable; duplicated here because
+ * storefront-models must not depend on editor-models. Only the editor and the code generators
+ * interpret it — the storefront runtime carries it through untouched.
+ */
+export interface IBlueprintPropValueVariableBinding {
+    key?: string | null;
+    variableId?: string | null;
+    path?: string[] | null;
+    refId?: string | null;
+    componentId?: string | null;
+}

package/dist/storefront-models/src/models/image/index.d.ts

@@ -1,5 +1,12 @@
 export type IkasImage = {
     id: string;
+    /**
+     * True when this media item is a VIDEO, not an image. Product media sets routinely mix both.
+     * getDefaultSrc/getSrc/getThumbnailSrc then return an .mp4 URL, so rendering it in an <img>
+     * produces broken media — branch on this flag and render <video src={getDefaultSrc(item)}>.
+     * Videos have no resized variant and no poster URL: the size argument is ignored, and
+     * createMediaSrcset does not apply.
+     */
     isVideo?: boolean | null;
     altText?: string | null;
     fileName?: string | null;

package/dist/storefront-models/src/models/product/attribute/index.d.ts

@@ -10,4 +10,9 @@ export type IkasProductAttribute = {
     tableTemplate: IkasProductAttributeTableTemplate | null;
     translations?: IkasProductAttributeTranslation[] | null;
 };
-export type IkasProductAttributeType = "CHOICE" | "MULTIPLE_CHOICE" | "TEXT" | "BOOLEAN" | "NUMERIC" | "DATETIME" | "HTML" | "TABLE" | "IMAGE" | "PRODUCT";
+/**
+ * Mirror of the API's `ProductAttributeTypeEnum` (see storefront-api `__api/types`). The API value is
+ * force-cast into this union when products are mapped (`functions/api/product`), so a value missing
+ * here still arrives at runtime — it just stops being visible to the compiler. Keep both lists in sync.
+ */
+export type IkasProductAttributeType = "CHOICE" | "MULTIPLE_CHOICE" | "COLOR_THUMBNAIL_MULTIPLE_CHOICE" | "TEXT" | "BOOLEAN" | "NUMERIC" | "DATE" | "DATETIME" | "HTML" | "TABLE" | "IMAGE" | "PRODUCT";

package/dist/storefront-models/src/models/product/campaign/data/index.d.ts

@@ -1,6 +1,7 @@
 import { IkasProductBuyXThenGetY } from "../product-buyx-then-gety";
 import { IkasProductCampaignDateRangeField } from "../product-campaign-date-range-field";
 import { IkasProductFixedDiscount } from "../product-fixed-discount";
+import { IkasProductTieredDiscount } from "../product-tiered-discount";
 export type IkasProductCampaignData = {
     applicableCustomerGroupIds: string[] | null;
     applicableCustomerIds: string[] | null;
@@ -21,6 +22,7 @@ export type IkasProductCampaignData = {
     usageCount: number;
     usageLimit: number | null;
     usageLimitPerCustomer: number | null;
+    tieredDiscount: IkasProductTieredDiscount | null;
 };
 export type IkasCampaignApplicablePrice = "DISCOUNT_PRICE" | "SELL_PRICE";
 export type IkasCampaignCreatedFor = "ABANDONED_CHECKOUT" | "CART" | "CUSTOMER_REVIEW";

package/dist/storefront-models/src/models/product/campaign/filter/index.d.ts

@@ -2,4 +2,4 @@ export type IkasProductCampaignFilter = {
     idList: string[];
     type: IkasCampaignFilterType;
 };
-export type IkasCampaignFilterType = "CATEGORY" | "PRODUCT" | "PRODUCT_BRAND" | "PRODUCT_TAG" | "VARIANT";
+export type IkasCampaignFilterType = "CATEGORY" | "PRODUCT" | "PRODUCT_BRAND" | "PRODUCT_TAG" | "VARIANT" | "PRODUCT_AND_VARIANT";

package/dist/storefront-models/src/models/product/campaign/product-tiered-discount/index.d.ts

@@ -0,0 +1,13 @@
+import { IkasProductCampaignFilter } from "../filter";
+import { IkasCampaignMinMaxRangeField } from "../product-fixed-discount";
+export type IkasProductTieredDiscountRule = {
+    amount: number | null;
+    lineItemQuantityRange: IkasCampaignMinMaxRangeField | null;
+    priceRange: IkasCampaignMinMaxRangeField | null;
+};
+export type IkasProductTieredDiscount = {
+    filters: IkasProductCampaignFilter[] | null;
+    isApplyByCartAmount: boolean | null;
+    rules: IkasProductTieredDiscountRule[];
+    shouldMatchAllConditions: boolean | null;
+};

package/dist/storefront-models/src/models/product/image/index.d.ts

@@ -3,6 +3,11 @@ export type IkasProductImage = {
     fileName: string | null;
     imageId: string | null;
     isMain: boolean;
+    /**
+     * True when this media item is a VIDEO, not an image. Product galleries, cards, swatches and
+     * line items must branch on it: render <video src={getDefaultSrc(item.image)}> instead of an
+     * <img>, otherwise the .mp4 URL lands in an <img> and the media breaks.
+     */
     isVideo: boolean | null;
     order: number;
     image?: IkasImage | null;

package/dist/storefront-models/src/models/product/variant/index.d.ts

@@ -29,3 +29,20 @@ export type IkasAppliedCampaignAmount = {
     formattedPrice: string | null;
     discountPercentage: string | null;
 };
+export type IkasTieredDiscountProduct = {
+    amount: number | null;
+    lineItemQuantityRange: {
+        min: number;
+        max: number;
+    };
+    type: IkasCampaignType;
+    sellPrice: number;
+    finalPrice: number;
+    sellPriceWithQuantity: number;
+    finalPriceWithQuantity: number;
+    formattedSellPrice: string;
+    formattedSellPriceWithQuantity: string;
+    formattedFinalPrice: string;
+    formattedFinalPriceWithQuantity: string;
+    salesChannelIds: string[] | null;
+};

package/dist/theme/settings/index.d.ts

@@ -0,0 +1,48 @@
+import { RuntimeBreakpointToken, RuntimeDesignToken, RuntimeKeyframeToken, RuntimeThemeColorSchemes, RuntimeTypographyToken, ThemeSetting } from "../../storefront-config/src";
+/**
+ * Register the live global-variable object (`_g_`) so `getThemeSetting`/`getThemeSettings`
+ * return actual runtime values (constants, computed getters, and in-editor edits) instead
+ * of the serialized design-time defaults. Called by generated code, not by component authors.
+ */
+export declare function registerThemeSettingValues(values: Record<string, any> | null): void;
+/** All global variables (Theme Settings) defined for the theme. */
+export declare function getThemeSettings(): ThemeSetting[];
+/**
+ * A single global variable by its stable key (`variableName`, e.g. `_6Q0KV7VGGM`).
+ * Discover keys via {@link getThemeSettings} (each item carries a human `displayName`).
+ * The returned `value` is the live blueprint value when available, else the default.
+ * Its shape is discriminated by `type` (see {@link ThemeSetting.value}); note an
+ * IMAGE setting's value is an image REFERENCE (no `.url`) — resolve with
+ * `getDefaultSrc`/`getSrc`.
+ */
+export declare function getThemeSetting(name: string): ThemeSetting | undefined;
+/** Convenience: the resolved value of a global variable, or `undefined` if not found. */
+export declare function getThemeSettingValue(name: string): any;
+/** Theme color tokens. Each carries a resolved value and a `var(--id)` CSS reference. */
+export declare function getThemeColors(): RuntimeDesignToken[];
+/** Theme typography tokens (text styles). Apply `className` or read `resolved` CSS values. */
+export declare function getThemeTypography(): RuntimeTypographyToken[];
+/** Theme responsive breakpoints (`{ id, width }`). */
+export declare function getThemeBreakpoints(): RuntimeBreakpointToken[];
+/** Theme keyframe/transition animations. Use `ref` as the CSS animation name. */
+export declare function getThemeKeyframes(): RuntimeKeyframeToken[];
+/**
+ * Theme color schemes (palettes). Returns two PARALLEL lists with different jobs:
+ * - `schemes`: the color SLOTS as `{ id }` only — no colors and no display label live here at
+ *   runtime. A slot's human name is authoring-only (read it via the CLI/MCP `list-theme-globals`
+ *   or the editor); at runtime identify a slot solely by its `id`.
+ * - `values`: the actual palettes. A palette's colors live in its `colorsByScheme`
+ *   map, keyed by slot id → `{ resolved, cssVar }`.
+ *
+ * To render swatches, iterate `values[].colorsByScheme` (the source of truth for
+ * colors), NOT the top-level `schemes` array — `schemes` carries slot ids only, so
+ * iterating it renders empty:
+ *
+ *   const { values } = getThemeColorSchemes();
+ *   values.forEach(palette =>
+ *     Object.entries(palette.colorsByScheme).forEach(([slotId, { resolved, cssVar }]) => {
+ *       // slotId → stable slot key, cssVar → live var() ref (prefer this), resolved → hex snapshot
+ *     })
+ *   );
+ */
+export declare function getThemeColorSchemes(): RuntimeThemeColorSchemes;

package/dist/theme/settings/index.js

@@ -0,0 +1 @@
+import{__assign as o}from'./../../ext/tslib/tslib.es6.mjs.js';import{IkasStorefrontConfig as l}from"../../packages/storefront-config/src/index.js";var n=null;function e(o){n=o}function i(l){return n&&l.name in n?o(o({},l),{value:n[l.name]}):l}function r(){var o,n;return Object.values(null!==(n=null===(o=l.themeGlobals)||void 0===o?void 0:o.settings)&&void 0!==n?n:{}).map(i)}function t(o){var n,e,r=null===(e=null===(n=l.themeGlobals)||void 0===n?void 0:n.settings)||void 0===e?void 0:e[o];return r?i(r):void 0}function u(o){var l;return null===(l=t(o))||void 0===l?void 0:l.value}function v(){var o,n;return null!==(n=null===(o=l.themeGlobals)||void 0===o?void 0:o.colors)&&void 0!==n?n:[]}function s(){var o,n;return null!==(n=null===(o=l.themeGlobals)||void 0===o?void 0:o.typography)&&void 0!==n?n:[]}function a(){var o,n;return null!==(n=null===(o=l.themeGlobals)||void 0===o?void 0:o.breakpoints)&&void 0!==n?n:[]}function d(){var o,n;return null!==(n=null===(o=l.themeGlobals)||void 0===o?void 0:o.keyframes)&&void 0!==n?n:[]}function m(){var o,n;return null!==(n=null===(o=l.themeGlobals)||void 0===o?void 0:o.colorSchemes)&&void 0!==n?n:{schemes:[],values:[]}}export{a as getThemeBreakpoints,m as getThemeColorSchemes,v as getThemeColors,d as getThemeKeyframes,t as getThemeSetting,u as getThemeSettingValue,r as getThemeSettings,s as getThemeTypography,e as registerThemeSettingValues};

package/dist/utils/component-renderer.js

@@ -1 +1 @@
-import{__assign as r}from'./../ext/tslib/tslib.es6.mjs.js';import{createElement as t}from'./../ext/preact/dist/preact.mjs.js';import{useRef as n,useEffect as e,useMemo as o}from'./../ext/preact/hooks/dist/hooks.mjs.js';var c={};function u(r,t){for(var n=[],e=r;e;){var o=e.getAttribute("id");o&&n.unshift(o),e=e.parentElement}var c=n.map(function(r){return'[id="'.concat(r,'"]')}).join(" ");return c?"".concat(c,' [id="').concat(t,'"]'):'[id="'.concat(t,'"]')}function a(a){var s=a.id,i=a.components,f=a.style,l=a.className,m=a.parentProps,d=void 0===m?c:m,p=a.map,v=void 0===p?c:p,h=n([]),j=n(d),y=n(v),g=n(null);j.current=d,y.current=v,e(function(){if(i&&0!==i.length){h.current.forEach(function(r){return r()}),h.current=[];for(var t=0;t<i.length;t++){var n=i[t];if(n.l){var e="".concat(s,"-").concat(t),o=u(g.current,e),c=n.l(o,r(r({},j.current),y.current),{},{id:e,key:e});"function"==typeof c&&h.current.push(c)}}return function(){h.current.forEach(function(r){return r()}),h.current=[]}}},[i,s]);var E=o(function(){return i&&0!==i.length?i.map(function(t,n){var e="".concat(s,"-").concat(n);return t.r(r(r({},j.current),y.current),{},{id:e,key:e})}).join(""):""},[i,s]);return i&&0!==i.length?t("div",{id:s,ref:g,dangerouslySetInnerHTML:{__html:E},style:r({display:"contents"},f),className:l}):null}export{a as IkasComponentRenderer};
+import{__assign as t}from'./../ext/tslib/tslib.es6.mjs.js';import{createElement as r}from'./../ext/preact/dist/preact.mjs.js';import{useRef as n,useMemo as e,useEffect as c}from'./../ext/preact/hooks/dist/hooks.mjs.js';var o={},a="data-ikas-ccr",u=0;function i(t,r){if(!t)return function(t,r){for(var n=[],e=t;e;){var c=e.getAttribute("id");c&&n.unshift(c),e=e.parentElement}var o=n.map(function(t){return'[id="'.concat(t,'"]')}).join(" ");return o?"".concat(o,' [id="').concat(r,'"]'):'[id="'.concat(r,'"]')}(t,r);var n=t.getAttribute(a);return n||(n="r".concat(++u),t.setAttribute(a,n)),"[".concat(a,'="').concat(n,'"] > [id="').concat(r,'"]')}function s(a){var u=a.id,s=a.components,f=a.style,l=a.className,d=a.parentProps,m=void 0===d?o:d,p=a.map,v=void 0===p?o:p,h=n([]),y=n(m),j=n(v),g=n(null);y.current=m,j.current=v;var b=e(function(){return(Array.isArray(s)?s:s?[s]:[]).flat().filter(Boolean)},[s]);c(function(){if(0!==b.length){h.current.forEach(function(t){return t()}),h.current=[];for(var r=0;r<b.length;r++){var n=b[r];if(n.l){var e="".concat(u,"-").concat(r),c=i(g.current,e),o=n.l(c,t(t({},y.current),j.current),{},{id:e,key:e});"function"==typeof o&&h.current.push(o)}}return function(){h.current.forEach(function(t){return t()}),h.current=[]}}},[b,u]);var k=e(function(){return 0===b.length?"":b.map(function(r,n){var e="".concat(u,"-").concat(n);return r.r(t(t({},y.current),j.current),{},{id:e,key:e})}).join("")},[b,u]);return 0===b.length?null:r("div",{id:u,ref:g,dangerouslySetInnerHTML:{__html:k},style:t({display:"contents"},f),className:l})}export{s as IkasComponentRenderer};