@ikas/bp-storefront 1.4.0-beta.8 → 1.4.0-beta.80

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,211 @@
+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;
+};
+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 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: {
+            id: string;
+            name: string;
+        }[];
+        values: ColorSchemeToken[];
+    };
+};
+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[];
+};
+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) => string;
+export declare const rawClassRef: (id: string) => 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/models/blueprint/prop-value/index.d.ts

@@ -25,5 +25,7 @@ export * from "./product-list";
 export * from "./raffle";
 export * from "./raffle-list";
 export * from "./rich-text";
+export * from "./svg";
+export * from "./svg-list";
 export * from "./text";
 export * from "./video";

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

@@ -0,0 +1,3 @@
+export interface IBlueprintSvgListPropValue {
+    svgs: string[];
+}

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

@@ -0,0 +1,3 @@
+export interface IBlueprintSvgPropValue {
+    value: string;
+}

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

@@ -0,0 +1,55 @@
+import { BreakpointToken, ColorSchemeToken, DesignToken, KeyframeToken, ThemeSetting, TypographyToken } 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(): DesignToken[];
+/** Theme typography tokens (text styles). Apply `className` or read `resolved` CSS values. */
+export declare function getThemeTypography(): TypographyToken[];
+/** Theme responsive breakpoints (`{ id, name, width }`). */
+export declare function getThemeBreakpoints(): BreakpointToken[];
+/** Theme keyframe/transition animations. Use `ref` as the CSS animation name. */
+export declare function getThemeKeyframes(): KeyframeToken[];
+/**
+ * Theme color schemes (palettes). Returns two PARALLEL lists with different jobs:
+ * - `schemes`: the color SLOTS as `{ id, name }` LABELS only — no colors live here.
+ *   Use it to resolve a slot's display name from 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 labels only, so
+ * iterating it renders empty. Look up each swatch's label from `schemes` by its
+ * slot-id key:
+ *
+ *   const { schemes, values } = getThemeColorSchemes();
+ *   const slotName = (id: string) => schemes.find(s => s.id === id)?.name ?? id;
+ *   values.forEach(palette =>
+ *     Object.entries(palette.colorsByScheme).forEach(([slotId, { resolved, cssVar }]) => {
+ *       // slotName(slotId) → label, cssVar → live var() ref (prefer this), resolved → hex snapshot
+ *     })
+ *   );
+ */
+export declare function getThemeColorSchemes(): {
+    schemes: {
+        id: string;
+        name: string;
+    }[];
+    values: ColorSchemeToken[];
+};

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.d.ts

@@ -30,8 +30,9 @@ interface IkasComponentRendererProps {
     /** Optional CSS class name applied to the wrapper div. */
     className?: string;
 }
-export declare function IkasComponentRenderer({ id: baseId, components, style, className, parentProps, map, }: IkasComponentRendererProps): import("preact").VNode<import("preact").ClassAttributes<HTMLElement> & {
+export declare function IkasComponentRenderer({ id: baseId, components, style, className, parentProps, map, }: IkasComponentRendererProps): import("preact").VNode<import("preact").ClassAttributes<HTMLDivElement> & {
     id: string;
+    ref: import("preact/hooks").MutableRef<HTMLDivElement | null>;
     dangerouslySetInnerHTML: {
         __html: string;
     };

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 s(s){var u=s.id,a=s.components,i=s.style,l=s.className,f=s.parentProps,m=void 0===f?c:f,d=s.map,p=void 0===d?c:d,h=n([]),v=n(m),j=n(p);v.current=m,j.current=p,e(function(){if(a&&0!==a.length){h.current.forEach(function(r){return r()}),h.current=[];for(var t=0;t<a.length;t++){var n=a[t];if(n.l){var e="".concat(u,"-").concat(t),o='[id="'.concat(u,'"] [id="').concat(e,'"]'),c=n.l(o,r(r({},v.current),j.current),{},{id:e,key:e});"function"==typeof c&&h.current.push(c)}}return function(){h.current.forEach(function(r){return r()}),h.current=[]}}},[a,u]);var y=o(function(){return a&&0!==a.length?a.map(function(t,n){var e="".concat(u,"-").concat(n);return t.r(r(r({},v.current),j.current),{},{id:e,key:e})}).join(""):""},[a,u]);return a&&0!==a.length?t("div",{id:u,dangerouslySetInnerHTML:{__html:y},style:r({display:"contents"},i),className:l}):null}export{s as IkasComponentRenderer};
+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};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/bp-storefront",
-  "version": "1.4.0-beta.8",
+  "version": "1.4.0-beta.80",
   "description": "A framework for the ikas blueprint storefronts.",
   "author": "ikas",
   "license": "ISC",