@ikas/bp-storefront 1.4.0-beta.60 → 1.4.0-beta.62

package/dist/packages/storefront-config/src/theme-globals.js

@@ -1 +1 @@
-var e=new RegExp(["[A-Z]?[a-z]+","[0-9]*(?:1ST|2ND|3RD|(?![123])[0-9]TH)(?=\\b|[a-z_])","[0-9]*(?:1st|2nd|3rd|(?![123])[0-9]th)(?=\\b|[A-Z_])","[A-Z]+(?![a-z])","[0-9]+","[A-Z]"].join("|"),"g");function l(l){return(String(l).match(e)||[]).map(function(e,l){var n=e.toLowerCase();return 0===l?n:n.charAt(0).toUpperCase()+n.slice(1)}).join("")}var n={settings:{},colors:[],typography:[],breakpoints:[],keyframes:[],colorSchemes:{schemes:[],values:[]}},o=function(e){return"var(--".concat(l(e),")")},i=function(e){return"_".concat(e)},r=function(e){var l;if(e)return Array.isArray(e)?null===(l=e[0])||void 0===l?void 0:l.value:e},a=function(e){var l,n=e;if(!n)return null;if(n.patternValueId)return o(n.patternValueId);if(n.colorSchemeId)return o(n.colorSchemeId);if(n.keyframeValueId)return i(n.keyframeValueId);var r=n.value;return null==r?null:"object"==typeof r?"string"==typeof r.css?r.css:null!=r.value?"".concat(r.value).concat(null!==(l=r.unit)&&void 0!==l?l:""):null:String(r)},u=/^__.+__$/;function t(e){var t,d,v,s,c,m,f,p,h,y,S,b,g,I,N,V,k,A,_;if(!e)return n;for(var D=null===(t=e.theme)||void 0===t?void 0:t.pattern,T={},w=0,Z=null!==(s=null===(v=null===(d=e.globalsBlueprint)||void 0===d?void 0:d.module)||void 0===v?void 0:v.variables)&&void 0!==s?s:[];w<Z.length;w++){var j=Z[w];!1!==j.isGlobal&&j.variableName&&(u.test(null!==(c=j.id)&&void 0!==c?c:"")||u.test(j.variableName)||(T[j.variableName]={name:j.variableName,displayName:null!==(m=j.displayName)&&void 0!==m?m:j.variableName,type:null!==(f=j.variableType)&&void 0!==f?f:"TEXT",value:null!==(p=j.defaultValue)&&void 0!==p?p:null}))}var z=(null!==(h=null==D?void 0:D.values)&&void 0!==h?h:[]).map(function(e){var l,n;return{id:e.id,name:null!==(l=e.name)&&void 0!==l?l:e.id,resolved:a(r(null===(n=e.style)||void 0===n?void 0:n.value)),cssVar:o(e.id)}}),x=(null!==(y=null==D?void 0:D.elements)&&void 0!==y?y:[]).map(function(e){for(var n,o,u={},t=0,d=null!==(n=e.styles)&&void 0!==n?n:[];t<d.length;t++){var v=d[t],s=a(r(v.value));null!=s&&(u[l(v.property)]=s)}return{id:e.id,name:null!==(o=e.name)&&void 0!==o?o:e.id,resolved:u,className:i(e.id)}}),B=(null!==(b=null===(S=e.theme)||void 0===S?void 0:S.breakpoints)&&void 0!==b?b:[]).map(function(e){var l,n;return{id:e.id,name:null!==(l=e.name)&&void 0!==l?l:e.id,width:null!==(n=e.width)&&void 0!==n?n:0}}),C=(null!==(I=null===(g=e.theme)||void 0===g?void 0:g.keyframes)&&void 0!==I?I:[]).map(function(e){var l,n,o;return{id:e.id,name:null!==(l=e.name)&&void 0!==l?l:e.id,type:null!==(n=e.type)&&void 0!==n?n:"keyframe",ref:i(e.id),points:(null!==(o=e.points)&&void 0!==o?o:[]).map(function(e){return{point:e.point}})}}),E=(null!==(N=null==D?void 0:D.colorSchemes)&&void 0!==N?N:[]).map(function(e){var l;return{id:e.id,name:null!==(l=e.name)&&void 0!==l?l:e.id}}),R=null!==(A=null===(k=(null!==(V=null==D?void 0:D.colorSchemeValues)&&void 0!==V?V:[]).find(function(e){return e.isDefault}))||void 0===k?void 0:k.colors)&&void 0!==A?A:[],G=(null!==(_=null==D?void 0:D.colorSchemeValues)&&void 0!==_?_:[]).map(function(e){for(var l,n,r={},u=0,t=null!==(l=e.colors)&&void 0!==l?l:[];u<t.length;u++){var d=t[u];r[d.colorSchemeId]={resolved:a(d.style),cssVar:o(d.colorSchemeId)}}if(!e.isDefault)for(var v=0,s=R;v<s.length;v++){var c=s[v];r[c.colorSchemeId]||(r[c.colorSchemeId]={resolved:a(c.style),cssVar:o(c.colorSchemeId)})}return{id:e.id,name:null!==(n=e.name)&&void 0!==n?n:e.id,isDefault:!!e.isDefault,className:i(e.id),colorsByScheme:r}});return{settings:T,colors:z,typography:x,breakpoints:B,keyframes:C,colorSchemes:{schemes:E,values:G}}}export{n as EMPTY_THEME_GLOBALS,l as cssVarCamelCase,t as serializeThemeGlobals};
+var e=new RegExp(["[A-Z]?[a-z]+","[0-9]*(?:1ST|2ND|3RD|(?![123])[0-9]TH)(?=\\b|[a-z_])","[0-9]*(?:1st|2nd|3rd|(?![123])[0-9]th)(?=\\b|[A-Z_])","[A-Z]+(?![a-z])","[0-9]+","[A-Z]"].join("|"),"g");function l(l){return(String(l).match(e)||[]).map(function(e,l){var n=e.toLowerCase();return 0===l?n:n.charAt(0).toUpperCase()+n.slice(1)}).join("")}var n={settings:{},colors:[],typography:[],breakpoints:[],keyframes:[],colorSchemes:{schemes:[],values:[]}},i=function(e){return"var(--".concat(l(e),")")},o=function(e){return"_".concat(e)},r=function(e){var l;if(e)return Array.isArray(e)?null===(l=e[0])||void 0===l?void 0:l.value:e},a=function(e){var l,n=e;if(!n)return null;if(n.patternValueId)return i(n.patternValueId);if(n.colorSchemeId)return i(n.colorSchemeId);if(n.keyframeValueId)return o(n.keyframeValueId);var r=n.value;return null==r?null:"object"==typeof r?"string"==typeof r.css?r.css:null!=r.value?"".concat(r.value).concat(null!==(l=r.unit)&&void 0!==l?l:""):null:String(r)},u=/^__.+__$/;function t(e){var t,d,v,s,c,m,f,p,y,h,g,b,S,A,I,N,k;if(!e)return n;for(var V=null===(t=e.theme)||void 0===t?void 0:t.pattern,_={},D=0,T=null!==(s=null===(v=null===(d=e.globalsBlueprint)||void 0===d?void 0:d.module)||void 0===v?void 0:v.variables)&&void 0!==s?s:[];D<T.length;D++){var w=T[D];if(!1!==w.isGlobal&&w.variableName&&(!u.test(null!==(c=w.id)&&void 0!==c?c:"")&&!u.test(w.variableName))){var Z=null!==(m=w.variableType)&&void 0!==m?m:"TEXT";_[w.variableName]={name:w.variableName,displayName:null!==(f=w.displayName)&&void 0!==f?f:w.variableName,type:Z,value:"BOOLEAN"===Z?!!w.defaultValue:null!==(p=w.defaultValue)&&void 0!==p?p:null}}}var j=(null!==(y=null==V?void 0:V.values)&&void 0!==y?y:[]).map(function(e){var l,n;return{id:e.id,name:null!==(l=e.name)&&void 0!==l?l:e.id,resolved:a(r(null===(n=e.style)||void 0===n?void 0:n.value)),cssVar:i(e.id)}}),z=(null!==(h=null==V?void 0:V.elements)&&void 0!==h?h:[]).map(function(e){for(var n,i,u={},t=0,d=null!==(n=e.styles)&&void 0!==n?n:[];t<d.length;t++){var v=d[t],s=a(r(v.value));null!=s&&(u[l(v.property)]=s)}return{id:e.id,name:null!==(i=e.name)&&void 0!==i?i:e.id,resolved:u,className:o(e.id)}}),B=(null!==(b=null===(g=e.theme)||void 0===g?void 0:g.breakpoints)&&void 0!==b?b:[]).map(function(e){var l,n;return{id:e.id,name:null!==(l=e.name)&&void 0!==l?l:e.id,width:null!==(n=e.width)&&void 0!==n?n:0}}),E=(null!==(A=null===(S=e.theme)||void 0===S?void 0:S.keyframes)&&void 0!==A?A:[]).map(function(e){var l,n,i;return{id:e.id,name:null!==(l=e.name)&&void 0!==l?l:e.id,type:null!==(n=e.type)&&void 0!==n?n:"keyframe",ref:o(e.id),points:(null!==(i=e.points)&&void 0!==i?i:[]).map(function(e){return{point:e.point}})}}),x=(null!==(I=null==V?void 0:V.colorSchemes)&&void 0!==I?I:[]).map(function(e){var l;return{id:e.id,name:null!==(l=e.name)&&void 0!==l?l:e.id}}),C=null!==(N=null==V?void 0:V.colorSchemes)&&void 0!==N?N:[],L=null!==(k=null==V?void 0:V.colorSchemeValues)&&void 0!==k?k:[],O=L.map(function(e){for(var l,n,r,u,t=function(e){var l,n;return null!==(n=null===(l=L.find(function(l){return l.isDefault&&(e?l.designAssetId===e:!l.designAssetId)}))||void 0===l?void 0:l.colors)&&void 0!==n?n:[]}(e.designAssetId),d={},v=function(o){var u=null===(l=e.colors)||void 0===l?void 0:l.find(function(e){return e.colorSchemeId===o.id}),v=u?void 0:t.find(function(e){return e.colorSchemeId===o.id});d[o.id]={resolved:null!==(r=a(null!==(n=null==u?void 0:u.style)&&void 0!==n?n:null==v?void 0:v.style))&&void 0!==r?r:"#ffffff",cssVar:i(o.id)}},s=0,c=C;s<c.length;s++){v(c[s])}return{id:e.id,name:null!==(u=e.name)&&void 0!==u?u:e.id,isDefault:!!e.isDefault,className:o(e.id),colorsByScheme:d}});return{settings:_,colors:j,typography:z,breakpoints:B,keyframes:E,colorSchemes:{schemes:x,values:O}}}export{n as EMPTY_THEME_GLOBALS,l as cssVarCamelCase,t as serializeThemeGlobals};

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

@@ -18,7 +18,14 @@ export type ThemeSetting = {
     /** Human-facing label. */
     displayName: string;
     type: GlobalVariableType;
-    /** Concrete value (string/number/boolean for primitives, object/null for IMAGE/BORDER/SHADOW). */
+    /**
+     * 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. */
@@ -54,13 +61,22 @@ export type KeyframeToken = {
         point: 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;
-    /** Per-scheme color overrides, keyed by color-scheme id. */
+    /**
+     * 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;
@@ -116,6 +132,8 @@ 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 = {

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

@@ -11,6 +11,9 @@ 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. */
@@ -23,7 +26,26 @@ export declare function getThemeTypography(): TypographyToken[];
 export declare function getThemeBreakpoints(): BreakpointToken[];
 /** Theme keyframe/transition animations. Use `ref` as the CSS animation name. */
 export declare function getThemeKeyframes(): KeyframeToken[];
-/** Theme color schemes — the available schemes plus per-scheme color values. */
+/**
+ * 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;

package/package.json

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