@ikas/bp-storefront 1.4.0-beta.86 → 1.4.0-beta.88

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 n(n){return(String(n).match(e)||[]).map(function(e,n){var l=e.toLowerCase();return 0===n?l:l.charAt(0).toUpperCase()+l.slice(1)}).join("")}var l={settings:{},colors:[],typography:[],breakpoints:[],keyframes:[],colorSchemes:{schemes:[],values:[]}},r=function(e){return"var(--".concat(n(e),")")},i=function(e){return"_".concat(e)},t=function(e){return"bp(".concat(e,")")},o=function(e){return e.map(function(e){return{id:e.id,width:Number(e.width)||0}})};function u(e,n){return e&&e.includes("bp(")?n.reduce(function(e,n){return e.split(t(n.id)).join("".concat(n.width,"px"))},e):e}var a=function(e){var n;if(e)return Array.isArray(e)?null===(n=e[0])||void 0===n?void 0:n.value:e},d=function(e){var n,l=e;if(!l)return null;if(l.patternValueId)return r(l.patternValueId);if(l.colorSchemeId)return r(l.colorSchemeId);if(l.keyframeValueId)return i(l.keyframeValueId);var t=l.value;return null==t?null:"object"==typeof t?"string"==typeof t.css?t.css:null!=t.value?"".concat(t.value).concat(null!==(n=t.unit)&&void 0!==n?n:""):null:String(t)},v=/^__.+__$/,s=function(e){return v.test(null!=e?e:"")};function c(e){var t,o,u,v,c,f,p,m,y,h,b,g,S,A,I;if(!e)return l;for(var k=null===(t=e.theme)||void 0===t?void 0:t.pattern,N={},V=0,w=null!==(v=null===(u=null===(o=e.globalsBlueprint)||void 0===o?void 0:o.module)||void 0===u?void 0:u.variables)&&void 0!==v?v:[];V<w.length;V++){var _=w[V];if(!1!==_.isGlobal&&_.variableName&&(!s(_.id)&&!s(_.variableName))){var D=null!==(c=_.variableType)&&void 0!==c?c:"TEXT";N[_.variableName]={name:_.variableName,type:D,value:"BOOLEAN"===D?!!_.defaultValue:null!==(f=_.defaultValue)&&void 0!==f?f:null}}}var T=(null!==(p=null==k?void 0:k.values)&&void 0!==p?p:[]).map(function(e){var n;return{id:e.id,resolved:d(a(null===(n=e.style)||void 0===n?void 0:n.value)),cssVar:r(e.id)}}),j=function(e){return(null!=e?e:[]).map(function(e){return{property:e.property,value:d(a(e.value))}}).filter(function(e){return null!=e.value})},Z=(null!==(m=null==k?void 0:k.elements)&&void 0!==m?m:[]).map(function(e){for(var l={},r=0,t=j(e.styles);r<t.length;r++){var o=t[r],u=o.property,a=o.value;l[n(u)]=a}return{id:e.id,resolved:l,className:i(e.id)}}),x=(null!==(h=null===(y=e.theme)||void 0===y?void 0:y.breakpoints)&&void 0!==h?h:[]).map(function(e){var n;return{id:e.id,width:null!==(n=e.width)&&void 0!==n?n:0}}),z=(null!==(g=null===(b=e.theme)||void 0===b?void 0:b.keyframes)&&void 0!==g?g:[]).map(function(e){var n,l;return{id:e.id,type:null!==(n=e.type)&&void 0!==n?n:"keyframe",ref:i(e.id),settings:j(e.styles),points:(null!==(l=e.points)&&void 0!==l?l:[]).map(function(e){return{point:e.point,styles:j(e.styles)}})}}),B=(null!==(S=null==k?void 0:k.colorSchemes)&&void 0!==S?S:[]).map(function(e){return{id:e.id}}),E=null!==(A=null==k?void 0:k.colorSchemes)&&void 0!==A?A:[],C=null!==(I=null==k?void 0:k.colorSchemeValues)&&void 0!==I?I:[],L=C.map(function(e){for(var n,l,t,o=function(e){var n,l;return null!==(l=null===(n=C.find(function(n){return n.isDefault&&(e?n.designAssetId===e:!n.designAssetId)}))||void 0===n?void 0:n.colors)&&void 0!==l?l:[]}(e.designAssetId),u={},a=function(i){var a=null===(n=e.colors)||void 0===n?void 0:n.find(function(e){return e.colorSchemeId===i.id}),v=a?void 0:o.find(function(e){return e.colorSchemeId===i.id});u[i.id]={resolved:null!==(t=d(null!==(l=null==a?void 0:a.style)&&void 0!==l?l:null==v?void 0:v.style))&&void 0!==t?t:"#ffffff",cssVar:r(i.id)}},v=0,s=E;v<s.length;v++){a(s[v])}return{id:e.id,isDefault:!!e.isDefault,className:i(e.id),colorsByScheme:u}});return{settings:N,colors:T,typography:Z,breakpoints:x,keyframes:z,colorSchemes:{schemes:B,values:L}}}export{l as EMPTY_THEME_GLOBALS,t as breakpointCssToken,n as cssVarCamelCase,r as cssVarRef,s as isReservedVariableId,i as rawClassRef,u as resolveBreakpointMediaTokens,c as serializeThemeGlobals,o as toResolverBreakpoints};
+var n=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 e(e){return(String(e).match(n)||[]).map(function(n,e){var l=n.toLowerCase();return 0===e?l:l.charAt(0).toUpperCase()+l.slice(1)}).join("")}var l={settings:{},colors:[],typography:[],breakpoints:[],keyframes:[],colorSchemes:{schemes:[],values:[]}},i=function(n){return"var(--".concat(e(n),")")},r=function(n){return"_".concat(n)},o=function(n){return"bp(".concat(n,")")},u=function(n){return n.map(function(n){return{id:n.id,width:Number(n.width)||0}})};function t(n,e){return n&&n.includes("bp(")?e.reduce(function(n,e){return n.split(o(e.id)).join("".concat(e.width,"px"))},n):n}var a=function(n){var e;if(n)return Array.isArray(n)?null===(e=n[0])||void 0===e?void 0:e.value:n},d=function(n){var e,l=n;if(!l)return null;if(l.patternValueId)return i(l.patternValueId);if(l.colorSchemeId)return i(l.colorSchemeId);if(l.keyframeValueId)return r(l.keyframeValueId);var o=l.value;return null==o?null:"object"==typeof o?"string"==typeof o.css?o.css:null!=o.value?"".concat(o.value).concat(null!==(e=o.unit)&&void 0!==e?e:""):null:String(o)},v=/^__.+__$/,s=function(n){return v.test(null!=n?n:"")};function c(n){var o,u,t,v,c,f,m,p,y,h,b,g,S,N,A,I;if(!n)return l;for(var k=null===(o=n.theme)||void 0===o?void 0:o.pattern,V={},w=0,_=null!==(v=null===(t=null===(u=n.globalsBlueprint)||void 0===u?void 0:u.module)||void 0===t?void 0:t.variables)&&void 0!==v?v:[];w<_.length;w++){var D=_[w];if(!1!==D.isGlobal&&D.variableName&&(!s(D.id)&&!s(D.variableName))){var T=null!==(c=D.variableType)&&void 0!==c?c:"TEXT";V[D.variableName]={name:D.variableName,displayName:null!==(f=D.displayName)&&void 0!==f?f:D.variableName,type:T,value:"BOOLEAN"===T?!!D.defaultValue:null!==(m=D.defaultValue)&&void 0!==m?m:null}}}var j=(null!==(p=null==k?void 0:k.values)&&void 0!==p?p:[]).map(function(n){var e,l;return{id:n.id,name:null!==(e=n.name)&&void 0!==e?e:n.id,resolved:d(a(null===(l=n.style)||void 0===l?void 0:l.value)),cssVar:i(n.id)}}),Z=function(n){return(null!=n?n:[]).map(function(n){return{property:n.property,value:d(a(n.value))}}).filter(function(n){return null!=n.value})},x=(null!==(y=null==k?void 0:k.elements)&&void 0!==y?y:[]).map(function(n){for(var l,i={},o=0,u=Z(n.styles);o<u.length;o++){var t=u[o],a=t.property,d=t.value;i[e(a)]=d}return{id:n.id,name:null!==(l=n.name)&&void 0!==l?l:n.id,resolved:i,className:r(n.id)}}),z=(null!==(b=null===(h=n.theme)||void 0===h?void 0:h.breakpoints)&&void 0!==b?b:[]).map(function(n){var e,l;return{id:n.id,name:null!==(e=n.name)&&void 0!==e?e:n.id,width:null!==(l=n.width)&&void 0!==l?l:0}}),B=(null!==(S=null===(g=n.theme)||void 0===g?void 0:g.keyframes)&&void 0!==S?S:[]).map(function(n){var e,l,i;return{id:n.id,name:null!==(e=n.name)&&void 0!==e?e:n.id,type:null!==(l=n.type)&&void 0!==l?l:"keyframe",ref:r(n.id),settings:Z(n.styles),points:(null!==(i=n.points)&&void 0!==i?i:[]).map(function(n){return{point:n.point,styles:Z(n.styles)}})}}),E=(null!==(N=null==k?void 0:k.colorSchemes)&&void 0!==N?N:[]).map(function(n){var e;return{id:n.id,name:null!==(e=n.name)&&void 0!==e?e:n.id}}),C=null!==(A=null==k?void 0:k.colorSchemes)&&void 0!==A?A:[],L=null!==(I=null==k?void 0:k.colorSchemeValues)&&void 0!==I?I:[],O=L.map(function(n){for(var e,l,o,u,t=function(n){var e,l;return null!==(l=null===(e=L.find(function(e){return e.isDefault&&(n?e.designAssetId===n:!e.designAssetId)}))||void 0===e?void 0:e.colors)&&void 0!==l?l:[]}(n.designAssetId),a={},v=function(r){var u=null===(e=n.colors)||void 0===e?void 0:e.find(function(n){return n.colorSchemeId===r.id}),v=u?void 0:t.find(function(n){return n.colorSchemeId===r.id});a[r.id]={resolved:null!==(o=d(null!==(l=null==u?void 0:u.style)&&void 0!==l?l:null==v?void 0:v.style))&&void 0!==o?o:"#ffffff",cssVar:i(r.id)}},s=0,c=C;s<c.length;s++){v(c[s])}return{id:n.id,name:null!==(u=n.name)&&void 0!==u?u:n.id,isDefault:!!n.isDefault,className:r(n.id),colorsByScheme:a}});return{settings:V,colors:j,typography:x,breakpoints:z,keyframes:B,colorSchemes:{schemes:E,values:O}}}export{l as EMPTY_THEME_GLOBALS,o as breakpointCssToken,e as cssVarCamelCase,i as cssVarRef,s as isReservedVariableId,r as rawClassRef,t as resolveBreakpointMediaTokens,c as serializeThemeGlobals,u as toResolverBreakpoints};

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

@@ -11,15 +11,12 @@ export declare function cssVarCamelCase(str: string): string;
  */
 /** 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.
- * The human-facing `displayName` is intentionally NOT part of this contract — the CC-server AI
- * agent kept referencing display labels instead of stable keys, so labels are dropped from the
- * theme-globals payload entirely (see the design-token types below).
- */
+/** 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`:
@@ -34,6 +31,7 @@ export type ThemeSetting = {
 /** 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)`. */
@@ -42,6 +40,7 @@ export type DesignToken = {
 /** 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>`. */
@@ -49,6 +48,7 @@ export type TypographyToken = {
 };
 export type BreakpointToken = {
     id: string;
+    name: string;
     width: number;
 };
 /** A resolved CSS style entry, e.g. { property: "animation-duration", value: "1.4s" }. */
@@ -58,6 +58,7 @@ export type StyleEntry = {
 };
 export type KeyframeToken = {
     id: string;
+    name: string;
     type: string;
     /** CSS reference — the animation name / class the editor emits, e.g. `_<id>`. */
     ref: string;
@@ -75,12 +76,22 @@ export type KeyframeToken = {
         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`, keyed by color-SLOT id — the top-level `schemes` list holds only slot ids.
+ * `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;
@@ -102,12 +113,40 @@ export type ThemeGlobals = {
     breakpoints: BreakpointToken[];
     keyframes: KeyframeToken[];
     colorSchemes: {
-        schemes: {
-            id: string;
-        }[];
+        schemes: ColorSchemeSlot[];
         values: ColorSchemeToken[];
     };
 };
+/**
+ * Runtime-facing token views returned by the `@ikas/bp-storefront` getters
+ * (`getThemeColors` / `getThemeTypography` / ...). They intentionally OMIT `name`: at runtime
+ * a token must be identified by its STABLE `id` (color → `cssVar` / `var(--<id>)`, typography
+ * & keyframe → `className`/`ref` `_<id>`, color-scheme slot → a `colorsByScheme` key), NEVER by
+ * its human name. Names are non-unique (two design assets can ship the same name) and renaming
+ * them must not break references, so reading `.name` at render is an anti-pattern — hiding it
+ * from the return type turns that into a compile error.
+ *
+ * The full types above (with `name`) are still produced in the serialized {@link ThemeGlobals}
+ * payload and surfaced by the CLI/MCP `list-theme-globals` AUTHORING read, so the agent/editor
+ * can still discover and reuse existing tokens by name. `name` is hidden ONLY from the runtime
+ * getter return types.
+ */
+export type RuntimeDesignToken = Omit<DesignToken, "name">;
+export type RuntimeTypographyToken = Omit<TypographyToken, "name">;
+export type RuntimeBreakpointToken = Omit<BreakpointToken, "name">;
+export type RuntimeKeyframeToken = Omit<KeyframeToken, "name">;
+export type RuntimeColorSchemeToken = Omit<ColorSchemeToken, "name">;
+export type RuntimeColorSchemeSlot = Omit<ColorSchemeSlot, "name">;
+/**
+ * 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;

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

@@ -1,4 +1,4 @@
-import { BreakpointToken, ColorSchemeToken, DesignToken, KeyframeToken, ThemeSetting, TypographyToken } from "../../storefront-config/src";
+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
@@ -9,7 +9,7 @@ export declare function registerThemeSettingValues(values: Record<string, any> |
 export declare function getThemeSettings(): ThemeSetting[];
 /**
  * A single global variable by its stable key (`variableName`, e.g. `_6Q0KV7VGGM`).
- * Discover keys via {@link getThemeSettings}.
+ * 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
@@ -19,33 +19,30 @@ 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[];
+export declare function getThemeColors(): RuntimeDesignToken[];
 /** Theme typography tokens (text styles). Apply `className` or read `resolved` CSS values. */
-export declare function getThemeTypography(): TypographyToken[];
+export declare function getThemeTypography(): RuntimeTypographyToken[];
 /** Theme responsive breakpoints (`{ id, width }`). */
-export declare function getThemeBreakpoints(): BreakpointToken[];
+export declare function getThemeBreakpoints(): RuntimeBreakpointToken[];
 /** Theme keyframe/transition animations. Use `ref` as the CSS animation name. */
-export declare function getThemeKeyframes(): KeyframeToken[];
+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 names live here.
- *   Reference a slot by its id (slot display names are not exposed at runtime or to the agent).
+ * - `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:
+ * 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 → the slot id, cssVar → live var() ref (prefer this), resolved → hex snapshot
+ *       // slotId → stable slot key, cssVar → live var() ref (prefer this), resolved → hex snapshot
  *     })
  *   );
  */
-export declare function getThemeColorSchemes(): {
-    schemes: {
-        id: string;
-    }[];
-    values: ColorSchemeToken[];
-};
+export declare function getThemeColorSchemes(): RuntimeThemeColorSchemes;

package/package.json

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