@wordpress/global-styles-engine 1.17.1-next.v.202607070741.0 → 1.18.0

package/build/index.cjs

@@ -46,6 +46,7 @@ __export(index_exports, {
   getTypographyFontSizeValue: () => import_typography.getTypographyFontSizeValue,
   getValueFromVariable: () => import_common.getValueFromVariable,
   mergeGlobalStyles: () => import_merge.mergeGlobalStyles,
+  privateApis: () => import_private_apis.privateApis,
   processCSSNesting: () => import_render2.processCSSNesting,
   setSetting: () => import_set_setting.setSetting,
   setStyle: () => import_set_style.setStyle,
@@ -67,6 +68,7 @@ var import_selectors = require("./core/selectors.cjs");
 var import_typography = require("./utils/typography.cjs");
 var import_dimensions = require("./utils/dimensions.cjs");
 var import_common = require("./utils/common.cjs");
+var import_private_apis = require("./private-apis.cjs");
 var import_preview_state_styles = require("./preview-state-styles.cjs");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -86,6 +88,7 @@ var import_preview_state_styles = require("./preview-state-styles.cjs");
   getTypographyFontSizeValue,
   getValueFromVariable,
   mergeGlobalStyles,
+  privateApis,
   processCSSNesting,
   setSetting,
   setStyle,

package/build/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["// High-level Settings API\nexport { getSetting } from './settings/get-setting';\nexport { setSetting } from './settings/set-setting';\nexport { getStyle } from './settings/get-style';\nexport { setStyle } from './settings/set-style';\nexport { default as getPalettes } from './settings/get-palette';\n\n// Utilities\nexport { areGlobalStylesEqual } from './core/equal';\nexport { mergeGlobalStyles } from './core/merge';\nexport { default as getGlobalStylesChanges } from './utils/get-global-styles-changes';\n\n// Core rendering\nexport { generateGlobalStyles } from './core/render';\nexport {\n\ttransformToStyles as toStyles,\n\tgetBlockSelectors,\n\tgetLayoutStyles,\n\tprocessCSSNesting,\n} from './core/render';\nexport { getBlockSelector } from './core/selectors';\n\n// Utilities (Ideally these shouldn't be exposed)\nexport { getTypographyFontSizeValue } from './utils/typography';\nexport { getDimensionPresetCssVar } from './utils/dimensions';\nexport {\n\tgetValueFromVariable,\n\tgetPresetVariableFromValue,\n\tgetResolvedValue,\n\tsplitSelectorList,\n} from './utils/common';\n\n// Types\nexport type * from './types';\n\nexport { generatePreviewStateStyles as __unstableGeneratePreviewStateStyles } from './preview-state-styles';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,yBAA2B;AAC3B,yBAA2B;AAC3B,uBAAyB;AACzB,uBAAyB;AACzB,yBAAuC;AAGvC,mBAAqC;AACrC,mBAAkC;AAClC,uCAAkD;AAGlD,oBAAqC;AACrC,IAAAA,iBAKO;AACP,uBAAiC;AAGjC,wBAA2C;AAC3C,wBAAyC;AACzC,oBAKO;AAKP,kCAAmF;",
+  "sourcesContent": ["// High-level Settings API\nexport { getSetting } from './settings/get-setting';\nexport { setSetting } from './settings/set-setting';\nexport { getStyle } from './settings/get-style';\nexport { setStyle } from './settings/set-style';\nexport { default as getPalettes } from './settings/get-palette';\n\n// Utilities\nexport { areGlobalStylesEqual } from './core/equal';\nexport { mergeGlobalStyles } from './core/merge';\nexport { default as getGlobalStylesChanges } from './utils/get-global-styles-changes';\n\n// Core rendering\nexport { generateGlobalStyles } from './core/render';\nexport {\n\ttransformToStyles as toStyles,\n\tgetBlockSelectors,\n\tgetLayoutStyles,\n\tprocessCSSNesting,\n} from './core/render';\nexport { getBlockSelector } from './core/selectors';\n\n// Utilities (Ideally these shouldn't be exposed)\nexport { getTypographyFontSizeValue } from './utils/typography';\nexport { getDimensionPresetCssVar } from './utils/dimensions';\nexport {\n\tgetValueFromVariable,\n\tgetPresetVariableFromValue,\n\tgetResolvedValue,\n\tsplitSelectorList,\n} from './utils/common';\nexport { privateApis } from './private-apis';\n\n// Types\nexport type * from './types';\n\nexport { generatePreviewStateStyles as __unstableGeneratePreviewStateStyles } from './preview-state-styles';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,yBAA2B;AAC3B,yBAA2B;AAC3B,uBAAyB;AACzB,uBAAyB;AACzB,yBAAuC;AAGvC,mBAAqC;AACrC,mBAAkC;AAClC,uCAAkD;AAGlD,oBAAqC;AACrC,IAAAA,iBAKO;AACP,uBAAiC;AAGjC,wBAA2C;AAC3C,wBAAyC;AACzC,oBAKO;AACP,0BAA4B;AAK5B,kCAAmF;",
   "names": ["import_render"]
 }

package/build/lock-unlock.cjs

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-engine/src/lock-unlock.ts
+var lock_unlock_exports = {};
+__export(lock_unlock_exports, {
+  lock: () => lock,
+  unlock: () => unlock
+});
+module.exports = __toCommonJS(lock_unlock_exports);
+var import_private_apis = require("@wordpress/private-apis");
+var { lock, unlock } = (0, import_private_apis.__dangerousOptInToUnstableAPIsOnlyForCoreModules)(
+  "I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.",
+  "@wordpress/global-styles-engine"
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  lock,
+  unlock
+});
+//# sourceMappingURL=lock-unlock.cjs.map

package/build/lock-unlock.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/lock-unlock.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',\n\t\t'@wordpress/global-styles-engine'\n\t);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAAiE;AAE1D,IAAM,EAAE,MAAM,OAAO,QAC3B;AAAA,EACC;AAAA,EACA;AACD;",
+  "names": []
+}

package/build/private-apis.cjs

@@ -0,0 +1,38 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-engine/src/private-apis.ts
+var private_apis_exports = {};
+__export(private_apis_exports, {
+  privateApis: () => privateApis
+});
+module.exports = __toCommonJS(private_apis_exports);
+var import_viewport = require("./utils/viewport.cjs");
+var import_lock_unlock = require("./lock-unlock.cjs");
+var privateApis = {};
+(0, import_lock_unlock.lock)(privateApis, {
+  getResponsiveMediaQueries: import_viewport.getResponsiveMediaQueries,
+  getViewportBreakpoints: import_viewport.getViewportBreakpoints,
+  getViewportBreakpointValueInPixels: import_viewport.getViewportBreakpointValueInPixels
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  privateApis
+});
+//# sourceMappingURL=private-apis.cjs.map

package/build/private-apis.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/private-apis.ts"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport {\n\tgetResponsiveMediaQueries,\n\tgetViewportBreakpoints,\n\tgetViewportBreakpointValueInPixels,\n} from './utils/viewport';\nimport { lock } from './lock-unlock';\n\nexport const privateApis = {};\nlock( privateApis, {\n\tgetResponsiveMediaQueries,\n\tgetViewportBreakpoints,\n\tgetViewportBreakpointValueInPixels,\n} );\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,sBAIO;AACP,yBAAqB;AAEd,IAAM,cAAc,CAAC;AAAA,IAC5B,yBAAM,aAAa;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACD,CAAE;",
+  "names": []
+}

package/build/settings/get-setting.cjs

@@ -91,7 +91,9 @@ var VALID_SETTINGS = [
   "typography.textDecoration",
   "typography.textIndent",
   "typography.textTransform",
-  "typography.writingMode"
+  "typography.writingMode",
+  "viewport.mobile",
+  "viewport.tablet"
 ];
 function getSetting(globalStyles, path, blockName) {
   const appendedBlockPath = blockName ? ".blocks." + blockName : "";

package/build/settings/get-setting.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/settings/get-setting.ts"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { getValueFromObjectPath, setImmutably } from '../utils/object';\nimport type { GlobalStylesConfig } from '../types';\n\nconst VALID_SETTINGS = [\n\t'appearanceTools',\n\t'useRootPaddingAwareAlignments',\n\t'background.backgroundImage',\n\t'background.backgroundRepeat',\n\t'background.backgroundSize',\n\t'background.backgroundPosition',\n\t'background.gradient',\n\t'border.color',\n\t'border.radius',\n\t'border.radiusSizes',\n\t'border.style',\n\t'border.width',\n\t'shadow.presets',\n\t'shadow.defaultPresets',\n\t'color.background',\n\t'color.button',\n\t'color.caption',\n\t'color.custom',\n\t'color.customDuotone',\n\t'color.customGradient',\n\t'color.defaultDuotone',\n\t'color.defaultGradients',\n\t'color.defaultPalette',\n\t'color.duotone',\n\t'color.gradients',\n\t'color.heading',\n\t'color.link',\n\t'color.palette',\n\t'color.text',\n\t'custom',\n\t'dimensions.aspectRatio',\n\t'dimensions.height',\n\t'dimensions.minHeight',\n\t'dimensions.minWidth',\n\t'dimensions.width',\n\t'dimensions.dimensionSizes',\n\t'layout.contentSize',\n\t'layout.definitions',\n\t'layout.wideSize',\n\t'lightbox.enabled',\n\t'lightbox.allowEditing',\n\t'position.fixed',\n\t'position.sticky',\n\t'spacing.customSpacingSize',\n\t'spacing.defaultSpacingSizes',\n\t'spacing.spacingSizes',\n\t'spacing.spacingScale',\n\t'spacing.blockGap',\n\t'spacing.margin',\n\t'spacing.padding',\n\t'spacing.units',\n\t'typography.fluid',\n\t'typography.customFontSize',\n\t'typography.defaultFontSizes',\n\t'typography.dropCap',\n\t'typography.fontFamilies',\n\t'typography.fontSizes',\n\t'typography.fontStyle',\n\t'typography.fontWeight',\n\t'typography.letterSpacing',\n\t'typography.lineHeight',\n\t'typography.textAlign',\n\t'typography.textColumns',\n\t'typography.textDecoration',\n\t'typography.textIndent',\n\t'typography.textTransform',\n\t'typography.writingMode',\n];\n\nexport function getSetting< T = any >(\n\tglobalStyles: GlobalStylesConfig,\n\tpath: string,\n\tblockName?: string\n): T {\n\tconst appendedBlockPath = blockName ? '.blocks.' + blockName : '';\n\tconst appendedPropertyPath = path ? '.' + path : '';\n\tconst contextualPath = `settings${ appendedBlockPath }${ appendedPropertyPath }`;\n\tconst globalPath = `settings${ appendedPropertyPath }`;\n\n\tif ( path ) {\n\t\treturn ( getValueFromObjectPath( globalStyles, contextualPath ) ??\n\t\t\tgetValueFromObjectPath( globalStyles, globalPath ) ) as T;\n\t}\n\n\tlet result = {};\n\tVALID_SETTINGS.forEach( ( setting ) => {\n\t\tconst value =\n\t\t\tgetValueFromObjectPath(\n\t\t\t\tglobalStyles,\n\t\t\t\t`settings${ appendedBlockPath }.${ setting }`\n\t\t\t) ??\n\t\t\tgetValueFromObjectPath( globalStyles, `settings.${ setting }` );\n\t\tif ( value !== undefined ) {\n\t\t\tresult = setImmutably( result, setting.split( '.' ), value );\n\t\t}\n\t} );\n\treturn result as T;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAAqD;AAGrD,IAAM,iBAAiB;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEO,SAAS,WACf,cACA,MACA,WACI;AACJ,QAAM,oBAAoB,YAAY,aAAa,YAAY;AAC/D,QAAM,uBAAuB,OAAO,MAAM,OAAO;AACjD,QAAM,iBAAiB,WAAY,iBAAkB,GAAI,oBAAqB;AAC9E,QAAM,aAAa,WAAY,oBAAqB;AAEpD,MAAK,MAAO;AACX,eAAS,sCAAwB,cAAc,cAAe,SAC7D,sCAAwB,cAAc,UAAW;AAAA,EACnD;AAEA,MAAI,SAAS,CAAC;AACd,iBAAe,QAAS,CAAE,YAAa;AACtC,UAAM,YACL;AAAA,MACC;AAAA,MACA,WAAY,iBAAkB,IAAK,OAAQ;AAAA,IAC5C,SACA,sCAAwB,cAAc,YAAa,OAAQ,EAAG;AAC/D,QAAK,UAAU,QAAY;AAC1B,mBAAS,4BAAc,QAAQ,QAAQ,MAAO,GAAI,GAAG,KAAM;AAAA,IAC5D;AAAA,EACD,CAAE;AACF,SAAO;AACR;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { getValueFromObjectPath, setImmutably } from '../utils/object';\nimport type { GlobalStylesConfig } from '../types';\n\nconst VALID_SETTINGS = [\n\t'appearanceTools',\n\t'useRootPaddingAwareAlignments',\n\t'background.backgroundImage',\n\t'background.backgroundRepeat',\n\t'background.backgroundSize',\n\t'background.backgroundPosition',\n\t'background.gradient',\n\t'border.color',\n\t'border.radius',\n\t'border.radiusSizes',\n\t'border.style',\n\t'border.width',\n\t'shadow.presets',\n\t'shadow.defaultPresets',\n\t'color.background',\n\t'color.button',\n\t'color.caption',\n\t'color.custom',\n\t'color.customDuotone',\n\t'color.customGradient',\n\t'color.defaultDuotone',\n\t'color.defaultGradients',\n\t'color.defaultPalette',\n\t'color.duotone',\n\t'color.gradients',\n\t'color.heading',\n\t'color.link',\n\t'color.palette',\n\t'color.text',\n\t'custom',\n\t'dimensions.aspectRatio',\n\t'dimensions.height',\n\t'dimensions.minHeight',\n\t'dimensions.minWidth',\n\t'dimensions.width',\n\t'dimensions.dimensionSizes',\n\t'layout.contentSize',\n\t'layout.definitions',\n\t'layout.wideSize',\n\t'lightbox.enabled',\n\t'lightbox.allowEditing',\n\t'position.fixed',\n\t'position.sticky',\n\t'spacing.customSpacingSize',\n\t'spacing.defaultSpacingSizes',\n\t'spacing.spacingSizes',\n\t'spacing.spacingScale',\n\t'spacing.blockGap',\n\t'spacing.margin',\n\t'spacing.padding',\n\t'spacing.units',\n\t'typography.fluid',\n\t'typography.customFontSize',\n\t'typography.defaultFontSizes',\n\t'typography.dropCap',\n\t'typography.fontFamilies',\n\t'typography.fontSizes',\n\t'typography.fontStyle',\n\t'typography.fontWeight',\n\t'typography.letterSpacing',\n\t'typography.lineHeight',\n\t'typography.textAlign',\n\t'typography.textColumns',\n\t'typography.textDecoration',\n\t'typography.textIndent',\n\t'typography.textTransform',\n\t'typography.writingMode',\n\t'viewport.mobile',\n\t'viewport.tablet',\n];\n\nexport function getSetting< T = any >(\n\tglobalStyles: GlobalStylesConfig,\n\tpath: string,\n\tblockName?: string\n): T {\n\tconst appendedBlockPath = blockName ? '.blocks.' + blockName : '';\n\tconst appendedPropertyPath = path ? '.' + path : '';\n\tconst contextualPath = `settings${ appendedBlockPath }${ appendedPropertyPath }`;\n\tconst globalPath = `settings${ appendedPropertyPath }`;\n\n\tif ( path ) {\n\t\treturn ( getValueFromObjectPath( globalStyles, contextualPath ) ??\n\t\t\tgetValueFromObjectPath( globalStyles, globalPath ) ) as T;\n\t}\n\n\tlet result = {};\n\tVALID_SETTINGS.forEach( ( setting ) => {\n\t\tconst value =\n\t\t\tgetValueFromObjectPath(\n\t\t\t\tglobalStyles,\n\t\t\t\t`settings${ appendedBlockPath }.${ setting }`\n\t\t\t) ??\n\t\t\tgetValueFromObjectPath( globalStyles, `settings.${ setting }` );\n\t\tif ( value !== undefined ) {\n\t\t\tresult = setImmutably( result, setting.split( '.' ), value );\n\t\t}\n\t} );\n\treturn result as T;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAAqD;AAGrD,IAAM,iBAAiB;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAEO,SAAS,WACf,cACA,MACA,WACI;AACJ,QAAM,oBAAoB,YAAY,aAAa,YAAY;AAC/D,QAAM,uBAAuB,OAAO,MAAM,OAAO;AACjD,QAAM,iBAAiB,WAAY,iBAAkB,GAAI,oBAAqB;AAC9E,QAAM,aAAa,WAAY,oBAAqB;AAEpD,MAAK,MAAO;AACX,eAAS,sCAAwB,cAAc,cAAe,SAC7D,sCAAwB,cAAc,UAAW;AAAA,EACnD;AAEA,MAAI,SAAS,CAAC;AACd,iBAAe,QAAS,CAAE,YAAa;AACtC,UAAM,YACL;AAAA,MACC;AAAA,MACA,WAAY,iBAAkB,IAAK,OAAQ;AAAA,IAC5C,SACA,sCAAwB,cAAc,YAAa,OAAQ,EAAG;AAC/D,QAAK,UAAU,QAAY;AAC1B,mBAAS,4BAAc,QAAQ,QAAQ,MAAO,GAAI,GAAG,KAAM;AAAA,IAC5D;AAAA,EACD,CAAE;AACF,SAAO;AACR;",
   "names": []
 }

package/build/types.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/types.ts"],
-  "sourcesContent": ["// =============================================================================\n// CORE PRIMITIVE TYPES\n// =============================================================================\n\n/**\n * Value that can be resolved from various sources (direct value, reference, or URL)\n */\nexport type UnresolvedValue =\n\t| string\n\t| number\n\t| { ref: string }\n\t| { url: string }\n\t| undefined\n\t| null;\n\n/**\n * Origin of a preset (theme, user customizations, or WordPress defaults)\n */\nexport type PresetOrigin = 'theme' | 'custom' | 'default';\n\n/**\n * Common properties for all preset types\n */\nexport interface BasePreset {\n\tname: string;\n\tslug: string;\n}\n\n// =============================================================================\n// COLOR SYSTEM TYPES\n// =============================================================================\n\n/**\n * Color preset definition\n */\nexport interface Color extends BasePreset {\n\tcolor: string;\n}\n\n/**\n * Gradient preset definition\n */\nexport interface Gradient extends BasePreset {\n\tgradient: string;\n}\n\n/**\n * Duotone filter preset definition\n */\nexport interface Duotone extends BasePreset {\n\tcolors: string[];\n}\n\n/**\n * Palette collection for a specific origin (theme, custom, default)\n */\nexport interface Palette {\n\tname: string;\n\tslug: PresetOrigin;\n\tcolors?: Color[];\n\tgradients?: Gradient[];\n\tduotones?: Duotone[];\n}\n\n/**\n * Multi-origin palette structure used by StyleBook\n */\nexport interface MultiOriginPalettes {\n\tcolors?: Palette[];\n\tgradients?: Palette[];\n\tduotones?: Palette[];\n\tdisableCustomColors?: boolean;\n\tdisableCustomGradients?: boolean;\n\thasColorsOrGradients?: boolean;\n}\n\n/**\n * Background style properties\n */\nexport interface BackgroundStyle {\n\tbackgroundColor?: UnresolvedValue;\n\tbackgroundImage?:\n\t\t| {\n\t\t\t\turl: string;\n\t\t\t\tid?: number;\n\t\t  }\n\t\t| UnresolvedValue;\n\tbackgroundSize?: UnresolvedValue;\n\tbackgroundPosition?: UnresolvedValue;\n\tbackgroundRepeat?: UnresolvedValue;\n\tbackgroundAttachment?: UnresolvedValue;\n\tbackgroundBlendMode?: UnresolvedValue;\n\tbackgroundOpacity?: UnresolvedValue;\n}\n\n// =============================================================================\n// TYPOGRAPHY SYSTEM TYPES\n// =============================================================================\n\n/**\n * Fluid typography settings for responsive font sizes\n */\nexport interface FluidTypographyConfig {\n\tmin?: string;\n\tmax?: string;\n}\n\n/**\n * Typography preset (font size) definition\n */\nexport interface TypographyPreset extends BasePreset {\n\tsize: string | number | null;\n\tpreviewFontSize?: string;\n\tfluid?: boolean | FluidTypographyConfig;\n}\n\n/**\n * Font size preset definition (alias for TypographyPreset for clarity)\n */\nexport interface FontSizePreset extends TypographyPreset {}\n\n/**\n * Convenience type alias for font size data\n */\nexport type FontSize = FontSizePreset;\n\n/**\n * Font face definition as found in theme.json\n */\nexport interface FontFace {\n\tfontFamily: string;\n\tfontWeight?: string | number;\n\tfontStyle?: string;\n\tfontStretch?: string;\n\tfontDisplay?: string;\n\tsrc?: string | string[];\n}\n\n/**\n * Font family preset definition as found in theme.json\n */\nexport interface FontFamilyPreset extends BasePreset {\n\tfontFamily: string;\n\tfontFace?: FontFace[];\n}\n\n/**\n * Global fluid typography settings\n */\nexport interface FluidTypographySettings {\n\tmaxViewportWidth?: string;\n\tminFontSize?: string;\n\tminViewportWidth?: string;\n}\n\n/**\n * Typography settings collection\n */\nexport interface TypographySettings {\n\tfluid?: boolean | FluidTypographySettings;\n\tfontSizes?: TypographyPreset[] | Record< string, TypographyPreset[] >;\n\tfontFamilies?: Record< string, FontFamilyPreset[] >;\n\tdefaultFontSizes?: boolean;\n}\n\n// =============================================================================\n// LAYOUT SYSTEM TYPES\n// =============================================================================\n\n/**\n * Layout constraint settings\n */\nexport interface LayoutSettings {\n\twideSize?: string;\n\tcontentSize?: string;\n}\n\n/**\n * Spacing settings\n */\nexport interface SpacingSettings {\n\tpadding?: string | Record< string, string >;\n\tmargin?: string | Record< string, string >;\n\tblockGap?: string;\n}\n\n// =============================================================================\n// GLOBAL STYLES STRUCTURE TYPES\n// =============================================================================\n\n/**\n * Global styles settings node\n */\nexport interface GlobalStylesSettings {\n\tuseRootPaddingAwareAlignments?: boolean;\n\ttypography?: TypographySettings;\n\tlayout?: LayoutSettings;\n\tspacing?: SpacingSettings;\n\tcolor?: {\n\t\tpalette?:\n\t\t\t| Color[]\n\t\t\t| {\n\t\t\t\t\ttheme?: Color[];\n\t\t\t\t\tcustom?: Color[];\n\t\t\t\t\tdefault?: Color[];\n\t\t\t  };\n\t\tgradients?: {\n\t\t\ttheme?: Gradient[];\n\t\t\tcustom?: Gradient[];\n\t\t\tdefault?: Gradient[];\n\t\t};\n\t\tduotone?: {\n\t\t\ttheme?: Duotone[];\n\t\t\tcustom?: Duotone[];\n\t\t\tdefault?: Duotone[];\n\t\t};\n\t\tlink?: boolean;\n\t\tcustom?: boolean;\n\t\tcustomGradient?: boolean;\n\t\tcustomDuotone?: boolean;\n\t\tdefaultPalette?: boolean;\n\t\tdefaultGradients?: boolean;\n\t\tdefaultDuotone?: boolean;\n\t};\n\tcustom?: Record<\n\t\tstring,\n\t\tstring | number | Record< string, string | number >\n\t>;\n\tblocks?: Record< string, Omit< GlobalStylesSettings, 'blocks' > >;\n}\n\n/**\n * Global styles values node\n */\nexport interface GlobalStylesStyles {\n\tcolor?: {\n\t\tbackground?: UnresolvedValue;\n\t\ttext?: UnresolvedValue;\n\t};\n\ttypography?: {\n\t\tfontFamily?: UnresolvedValue;\n\t\tfontSize?: UnresolvedValue;\n\t\tfontWeight?: UnresolvedValue;\n\t\tlineHeight?: UnresolvedValue;\n\t\tletterSpacing?: UnresolvedValue;\n\t\ttextTransform?: UnresolvedValue;\n\t\ttextIndent?: UnresolvedValue;\n\t};\n\tspacing?: {\n\t\tpadding?: UnresolvedValue | Record< string, UnresolvedValue >;\n\t\tmargin?: UnresolvedValue | Record< string, UnresolvedValue >;\n\t\tblockGap?: string;\n\t};\n\tbackground?: BackgroundStyle;\n\tborder?: {\n\t\tcolor?: UnresolvedValue;\n\t\twidth?: UnresolvedValue;\n\t\tstyle?: UnresolvedValue;\n\t\tradius?:\n\t\t\t| UnresolvedValue\n\t\t\t| {\n\t\t\t\t\ttopLeft?: UnresolvedValue;\n\t\t\t\t\ttopRight?: UnresolvedValue;\n\t\t\t\t\tbottomRight?: UnresolvedValue;\n\t\t\t\t\tbottomLeft?: UnresolvedValue;\n\t\t\t  };\n\t\ttop?: {\n\t\t\tcolor?: UnresolvedValue;\n\t\t\twidth?: UnresolvedValue;\n\t\t\tstyle?: UnresolvedValue;\n\t\t};\n\t\tright?: {\n\t\t\tcolor?: UnresolvedValue;\n\t\t\twidth?: UnresolvedValue;\n\t\t\tstyle?: UnresolvedValue;\n\t\t};\n\t\tbottom?: {\n\t\t\tcolor?: UnresolvedValue;\n\t\t\twidth?: UnresolvedValue;\n\t\t\tstyle?: UnresolvedValue;\n\t\t};\n\t\tleft?: {\n\t\t\tcolor?: UnresolvedValue;\n\t\t\twidth?: UnresolvedValue;\n\t\t\tstyle?: UnresolvedValue;\n\t\t};\n\t};\n\tfilter?: {\n\t\tduotone?: UnresolvedValue;\n\t\topacity?: UnresolvedValue;\n\t};\n\tdimensions?: {\n\t\twidth?: UnresolvedValue;\n\t\theight?: UnresolvedValue;\n\t\tminWidth?: UnresolvedValue;\n\t\tminHeight?: UnresolvedValue;\n\t\tmaxWidth?: UnresolvedValue;\n\t\tmaxHeight?: UnresolvedValue;\n\t};\n\telements?: Record<\n\t\tstring,\n\t\tOmit< GlobalStylesStyles, 'blocks' | 'elements' | 'variations' > & {\n\t\t\t':hover'?: Omit<\n\t\t\t\tGlobalStylesStyles,\n\t\t\t\t'blocks' | 'elements' | 'variations'\n\t\t\t>;\n\t\t}\n\t>;\n\tblocks?: Record< string, Omit< GlobalStylesStyles, 'blocks' > >;\n\tvariations?: Record< string, Omit< GlobalStylesStyles, 'blocks' > >;\n\tcss?: string;\n}\n\n/**\n * Complete global styles configuration\n */\nexport interface GlobalStylesConfig {\n\tversion?: number;\n\tsettings?: GlobalStylesSettings;\n\tstyles?: GlobalStylesStyles;\n\t_links?: {\n\t\t[ 'wp:theme-file' ]?: ThemeFileLink[];\n\t\t[ 'wp:action-edit-css' ]?: Array< { href: string } >;\n\t};\n}\n\n/**\n * Style variation (extends GlobalStylesConfig with metadata)\n */\nexport interface StyleVariation extends GlobalStylesConfig {\n\ttitle?: string;\n\tdescription?: string;\n}\n\n/**\n * WordPress theme file link\n */\nexport interface ThemeFileLink {\n\tname: string;\n\thref: string;\n\ttarget?: string;\n}\n\n// =============================================================================\n// UTILITY TYPES\n// =============================================================================\n\n/**\n * Deep partial type for global styles merging\n */\nexport type DeepPartial< T > = {\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n};\n\n/**\n * CSS selector string\n */\nexport type CSSSelector = string;\n\n/**\n * CSS property value\n */\nexport type CSSValue = string | number | undefined;\n\n/**\n * CSS rules object\n */\nexport type CSSRules = Record< string, CSSValue >;\n"],
+  "sourcesContent": ["// =============================================================================\n// CORE PRIMITIVE TYPES\n// =============================================================================\n\n/**\n * Value that can be resolved from various sources (direct value, reference, or URL)\n */\nexport type UnresolvedValue =\n\t| string\n\t| number\n\t| { ref: string }\n\t| { url: string }\n\t| undefined\n\t| null;\n\n/**\n * Origin of a preset (theme, user customizations, or WordPress defaults)\n */\nexport type PresetOrigin = 'theme' | 'custom' | 'default';\n\n/**\n * Common properties for all preset types\n */\nexport interface BasePreset {\n\tname: string;\n\tslug: string;\n}\n\n// =============================================================================\n// COLOR SYSTEM TYPES\n// =============================================================================\n\n/**\n * Color preset definition\n */\nexport interface Color extends BasePreset {\n\tcolor: string;\n}\n\n/**\n * Gradient preset definition\n */\nexport interface Gradient extends BasePreset {\n\tgradient: string;\n}\n\n/**\n * Duotone filter preset definition\n */\nexport interface Duotone extends BasePreset {\n\tcolors: string[];\n}\n\n/**\n * Palette collection for a specific origin (theme, custom, default)\n */\nexport interface Palette {\n\tname: string;\n\tslug: PresetOrigin;\n\tcolors?: Color[];\n\tgradients?: Gradient[];\n\tduotones?: Duotone[];\n}\n\n/**\n * Multi-origin palette structure used by StyleBook\n */\nexport interface MultiOriginPalettes {\n\tcolors?: Palette[];\n\tgradients?: Palette[];\n\tduotones?: Palette[];\n\tdisableCustomColors?: boolean;\n\tdisableCustomGradients?: boolean;\n\thasColorsOrGradients?: boolean;\n}\n\n/**\n * Background style properties\n */\nexport interface BackgroundStyle {\n\tbackgroundColor?: UnresolvedValue;\n\tbackgroundImage?:\n\t\t| {\n\t\t\t\turl: string;\n\t\t\t\tid?: number;\n\t\t  }\n\t\t| UnresolvedValue;\n\tbackgroundSize?: UnresolvedValue;\n\tbackgroundPosition?: UnresolvedValue;\n\tbackgroundRepeat?: UnresolvedValue;\n\tbackgroundAttachment?: UnresolvedValue;\n\tbackgroundBlendMode?: UnresolvedValue;\n\tbackgroundOpacity?: UnresolvedValue;\n}\n\n// =============================================================================\n// TYPOGRAPHY SYSTEM TYPES\n// =============================================================================\n\n/**\n * Fluid typography settings for responsive font sizes\n */\nexport interface FluidTypographyConfig {\n\tmin?: string;\n\tmax?: string;\n}\n\n/**\n * Typography preset (font size) definition\n */\nexport interface TypographyPreset extends BasePreset {\n\tsize: string | number | null;\n\tpreviewFontSize?: string;\n\tfluid?: boolean | FluidTypographyConfig;\n}\n\n/**\n * Font size preset definition (alias for TypographyPreset for clarity)\n */\nexport interface FontSizePreset extends TypographyPreset {}\n\n/**\n * Convenience type alias for font size data\n */\nexport type FontSize = FontSizePreset;\n\n/**\n * Font face definition as found in theme.json\n */\nexport interface FontFace {\n\tfontFamily: string;\n\tfontWeight?: string | number;\n\tfontStyle?: string;\n\tfontStretch?: string;\n\tfontDisplay?: string;\n\tsrc?: string | string[];\n}\n\n/**\n * Font family preset definition as found in theme.json\n */\nexport interface FontFamilyPreset extends BasePreset {\n\tfontFamily: string;\n\tfontFace?: FontFace[];\n}\n\n/**\n * Global fluid typography settings\n */\nexport interface FluidTypographySettings {\n\tmaxViewportWidth?: string;\n\tminFontSize?: string;\n\tminViewportWidth?: string;\n}\n\n/**\n * Typography settings collection\n */\nexport interface TypographySettings {\n\tfluid?: boolean | FluidTypographySettings;\n\tfontSizes?: TypographyPreset[] | Record< string, TypographyPreset[] >;\n\tfontFamilies?: Record< string, FontFamilyPreset[] >;\n\tdefaultFontSizes?: boolean;\n}\n\n// =============================================================================\n// LAYOUT SYSTEM TYPES\n// =============================================================================\n\n/**\n * Layout constraint settings\n */\nexport interface LayoutSettings {\n\twideSize?: string;\n\tcontentSize?: string;\n}\n\n/**\n * Spacing settings\n */\nexport interface SpacingSettings {\n\tpadding?: string | Record< string, string >;\n\tmargin?: string | Record< string, string >;\n\tblockGap?: string;\n}\n\n// =============================================================================\n// GLOBAL STYLES STRUCTURE TYPES\n// =============================================================================\n\n/**\n * Global styles settings node\n */\nexport interface GlobalStylesSettings {\n\tuseRootPaddingAwareAlignments?: boolean;\n\tviewport?: {\n\t\tmobile?: string;\n\t\ttablet?: string;\n\t};\n\ttypography?: TypographySettings;\n\tlayout?: LayoutSettings;\n\tspacing?: SpacingSettings;\n\tcolor?: {\n\t\tpalette?:\n\t\t\t| Color[]\n\t\t\t| {\n\t\t\t\t\ttheme?: Color[];\n\t\t\t\t\tcustom?: Color[];\n\t\t\t\t\tdefault?: Color[];\n\t\t\t  };\n\t\tgradients?: {\n\t\t\ttheme?: Gradient[];\n\t\t\tcustom?: Gradient[];\n\t\t\tdefault?: Gradient[];\n\t\t};\n\t\tduotone?: {\n\t\t\ttheme?: Duotone[];\n\t\t\tcustom?: Duotone[];\n\t\t\tdefault?: Duotone[];\n\t\t};\n\t\tlink?: boolean;\n\t\tcustom?: boolean;\n\t\tcustomGradient?: boolean;\n\t\tcustomDuotone?: boolean;\n\t\tdefaultPalette?: boolean;\n\t\tdefaultGradients?: boolean;\n\t\tdefaultDuotone?: boolean;\n\t};\n\tcustom?: Record<\n\t\tstring,\n\t\tstring | number | Record< string, string | number >\n\t>;\n\tblocks?: Record< string, Omit< GlobalStylesSettings, 'blocks' > >;\n}\n\n/**\n * Global styles values node\n */\nexport interface GlobalStylesStyles {\n\tcolor?: {\n\t\tbackground?: UnresolvedValue;\n\t\ttext?: UnresolvedValue;\n\t};\n\ttypography?: {\n\t\tfontFamily?: UnresolvedValue;\n\t\tfontSize?: UnresolvedValue;\n\t\tfontWeight?: UnresolvedValue;\n\t\tlineHeight?: UnresolvedValue;\n\t\tletterSpacing?: UnresolvedValue;\n\t\ttextTransform?: UnresolvedValue;\n\t\ttextIndent?: UnresolvedValue;\n\t};\n\tspacing?: {\n\t\tpadding?: UnresolvedValue | Record< string, UnresolvedValue >;\n\t\tmargin?: UnresolvedValue | Record< string, UnresolvedValue >;\n\t\tblockGap?: string;\n\t};\n\tbackground?: BackgroundStyle;\n\tborder?: {\n\t\tcolor?: UnresolvedValue;\n\t\twidth?: UnresolvedValue;\n\t\tstyle?: UnresolvedValue;\n\t\tradius?:\n\t\t\t| UnresolvedValue\n\t\t\t| {\n\t\t\t\t\ttopLeft?: UnresolvedValue;\n\t\t\t\t\ttopRight?: UnresolvedValue;\n\t\t\t\t\tbottomRight?: UnresolvedValue;\n\t\t\t\t\tbottomLeft?: UnresolvedValue;\n\t\t\t  };\n\t\ttop?: {\n\t\t\tcolor?: UnresolvedValue;\n\t\t\twidth?: UnresolvedValue;\n\t\t\tstyle?: UnresolvedValue;\n\t\t};\n\t\tright?: {\n\t\t\tcolor?: UnresolvedValue;\n\t\t\twidth?: UnresolvedValue;\n\t\t\tstyle?: UnresolvedValue;\n\t\t};\n\t\tbottom?: {\n\t\t\tcolor?: UnresolvedValue;\n\t\t\twidth?: UnresolvedValue;\n\t\t\tstyle?: UnresolvedValue;\n\t\t};\n\t\tleft?: {\n\t\t\tcolor?: UnresolvedValue;\n\t\t\twidth?: UnresolvedValue;\n\t\t\tstyle?: UnresolvedValue;\n\t\t};\n\t};\n\tfilter?: {\n\t\tduotone?: UnresolvedValue;\n\t\topacity?: UnresolvedValue;\n\t};\n\tdimensions?: {\n\t\twidth?: UnresolvedValue;\n\t\theight?: UnresolvedValue;\n\t\tminWidth?: UnresolvedValue;\n\t\tminHeight?: UnresolvedValue;\n\t\tmaxWidth?: UnresolvedValue;\n\t\tmaxHeight?: UnresolvedValue;\n\t};\n\telements?: Record<\n\t\tstring,\n\t\tOmit< GlobalStylesStyles, 'blocks' | 'elements' | 'variations' > & {\n\t\t\t':hover'?: Omit<\n\t\t\t\tGlobalStylesStyles,\n\t\t\t\t'blocks' | 'elements' | 'variations'\n\t\t\t>;\n\t\t}\n\t>;\n\tblocks?: Record< string, Omit< GlobalStylesStyles, 'blocks' > >;\n\tvariations?: Record< string, Omit< GlobalStylesStyles, 'blocks' > >;\n\tcss?: string;\n}\n\n/**\n * Complete global styles configuration\n */\nexport interface GlobalStylesConfig {\n\tversion?: number;\n\tsettings?: GlobalStylesSettings;\n\tstyles?: GlobalStylesStyles;\n\t_links?: {\n\t\t[ 'wp:theme-file' ]?: ThemeFileLink[];\n\t\t[ 'wp:action-edit-css' ]?: Array< { href: string } >;\n\t};\n}\n\n/**\n * Style variation (extends GlobalStylesConfig with metadata)\n */\nexport interface StyleVariation extends GlobalStylesConfig {\n\ttitle?: string;\n\tdescription?: string;\n}\n\n/**\n * WordPress theme file link\n */\nexport interface ThemeFileLink {\n\tname: string;\n\thref: string;\n\ttarget?: string;\n}\n\n// =============================================================================\n// UTILITY TYPES\n// =============================================================================\n\n/**\n * Deep partial type for global styles merging\n */\nexport type DeepPartial< T > = {\n\t[ P in keyof T ]?: T[ P ] extends object ? DeepPartial< T[ P ] > : T[ P ];\n};\n\n/**\n * CSS selector string\n */\nexport type CSSSelector = string;\n\n/**\n * CSS property value\n */\nexport type CSSValue = string | number | undefined;\n\n/**\n * CSS rules object\n */\nexport type CSSRules = Record< string, CSSValue >;\n"],
   "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/build/utils/viewport.cjs

@@ -0,0 +1,108 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-engine/src/utils/viewport.ts
+var viewport_exports = {};
+__export(viewport_exports, {
+  getResponsiveMediaQueries: () => getResponsiveMediaQueries,
+  getViewportBreakpointValueInPixels: () => getViewportBreakpointValueInPixels,
+  getViewportBreakpoints: () => getViewportBreakpoints
+});
+module.exports = __toCommonJS(viewport_exports);
+var DEFAULT_VIEWPORT_BREAKPOINTS = {
+  mobile: "480px",
+  tablet: "782px"
+};
+var VIEWPORT_SIZE_REGEXP = /^(\d+|\d*\.\d+)(px|em|rem)$/;
+var DEFAULT_FONT_SIZE = 16;
+function isViewportSettings(configOrSettings) {
+  return "mobile" in configOrSettings || "tablet" in configOrSettings;
+}
+function getViewportSettings(configOrSettings) {
+  if (!configOrSettings || typeof configOrSettings !== "object") {
+    return {};
+  }
+  if (isViewportSettings(configOrSettings)) {
+    return configOrSettings;
+  }
+  return configOrSettings.settings?.viewport ?? {};
+}
+function isValidViewportSize(value) {
+  return typeof value === "string" && VIEWPORT_SIZE_REGEXP.test(value.trim());
+}
+function getViewportBreakpointValueInPixels(value) {
+  if (typeof value === "number") {
+    return value;
+  }
+  if (typeof value !== "string") {
+    return void 0;
+  }
+  const match = value.trim().match(VIEWPORT_SIZE_REGEXP);
+  if (!match) {
+    return void 0;
+  }
+  const numericValue = Number.parseFloat(match[1]);
+  const unit = match[2];
+  return unit === "px" ? numericValue : numericValue * DEFAULT_FONT_SIZE;
+}
+function getViewportBreakpoints(configOrSettings) {
+  const viewportSettings = getViewportSettings(configOrSettings);
+  const breakpoints = {};
+  const breakpointValuesInPixels = {};
+  Object.keys(DEFAULT_VIEWPORT_BREAKPOINTS).forEach((breakpoint) => {
+    const key = breakpoint;
+    const value = viewportSettings[key];
+    const px = getViewportBreakpointValueInPixels(value);
+    if (px !== void 0 && isValidViewportSize(value)) {
+      breakpoints[key] = value.trim();
+      breakpointValuesInPixels[key] = px;
+    }
+  });
+  const breakpointNames = Object.keys(breakpoints);
+  if (!breakpointNames.length) {
+    return { ...DEFAULT_VIEWPORT_BREAKPOINTS };
+  }
+  if (1 === breakpointNames.length) {
+    return breakpoints;
+  }
+  const mobile = breakpoints.mobile;
+  const tablet = breakpoints.tablet;
+  if (breakpointValuesInPixels.mobile >= breakpointValuesInPixels.tablet) {
+    return { mobile };
+  }
+  return { mobile, tablet };
+}
+function getResponsiveMediaQueries(configOrSettings) {
+  const breakpoints = getViewportBreakpoints(configOrSettings);
+  const mediaQueries = {};
+  if (breakpoints.mobile) {
+    mediaQueries["@mobile"] = `@media (width <= ${breakpoints.mobile})`;
+  }
+  if (breakpoints.tablet) {
+    mediaQueries["@tablet"] = breakpoints.mobile ? `@media (${breakpoints.mobile} < width <= ${breakpoints.tablet})` : `@media (width <= ${breakpoints.tablet})`;
+  }
+  return mediaQueries;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getResponsiveMediaQueries,
+  getViewportBreakpointValueInPixels,
+  getViewportBreakpoints
+});
+//# sourceMappingURL=viewport.cjs.map

package/build/utils/viewport.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/viewport.ts"],
+  "sourcesContent": ["import type { GlobalStylesConfig } from '../types';\n\nconst DEFAULT_VIEWPORT_BREAKPOINTS = {\n\tmobile: '480px',\n\ttablet: '782px',\n};\n\ntype ViewportBreakpoint = keyof typeof DEFAULT_VIEWPORT_BREAKPOINTS;\ntype ViewportSettings = Partial< Record< ViewportBreakpoint, string > >;\ntype ViewportBreakpoints = Partial< Record< ViewportBreakpoint, string > >;\n\n// Matches positive CSS length values supported for viewport breakpoints, and\n// captures the numeric value and unit for conversion to pixels.\nconst VIEWPORT_SIZE_REGEXP = /^(\\d+|\\d*\\.\\d+)(px|em|rem)$/;\nconst DEFAULT_FONT_SIZE = 16;\n\nfunction isViewportSettings(\n\tconfigOrSettings: GlobalStylesConfig | ViewportSettings\n): configOrSettings is ViewportSettings {\n\treturn 'mobile' in configOrSettings || 'tablet' in configOrSettings;\n}\n\nfunction getViewportSettings(\n\tconfigOrSettings?: GlobalStylesConfig | ViewportSettings\n): ViewportSettings {\n\tif ( ! configOrSettings || typeof configOrSettings !== 'object' ) {\n\t\treturn {};\n\t}\n\n\tif ( isViewportSettings( configOrSettings ) ) {\n\t\treturn configOrSettings;\n\t}\n\n\treturn configOrSettings.settings?.viewport ?? {};\n}\n\nfunction isValidViewportSize( value: unknown ): value is string {\n\treturn (\n\t\ttypeof value === 'string' && VIEWPORT_SIZE_REGEXP.test( value.trim() )\n\t);\n}\n\n/**\n * Converts a viewport breakpoint value to pixels.\n *\n * Numeric values are returned as-is. CSS length values are only supported when\n * expressed in px, em, or rem units.\n *\n * @param value Breakpoint value as a number or CSS length.\n * @return The breakpoint value in pixels, or undefined when invalid.\n */\nexport function getViewportBreakpointValueInPixels(\n\tvalue: number | string | undefined\n): number | undefined {\n\tif ( typeof value === 'number' ) {\n\t\treturn value;\n\t}\n\n\tif ( typeof value !== 'string' ) {\n\t\treturn undefined;\n\t}\n\n\tconst match = value.trim().match( VIEWPORT_SIZE_REGEXP );\n\tif ( ! match ) {\n\t\treturn undefined;\n\t}\n\n\tconst numericValue = Number.parseFloat( match[ 1 ] );\n\tconst unit = match[ 2 ];\n\n\t// Use the most common browser default font size as the base for em/rem\n\t// media query conversions. This pixel value is used to compare breakpoint\n\t// order and calculate preview sizes; generated media queries keep the\n\t// original units.\n\treturn unit === 'px' ? numericValue : numericValue * DEFAULT_FONT_SIZE;\n}\n\n/**\n * Returns sanitized viewport breakpoints keyed by viewport state.\n *\n * Falls back to default breakpoints when no valid values are provided. If the\n * mobile breakpoint is missing, a valid tablet breakpoint remains keyed as\n * tablet so the editor can present it as a tablet breakpoint. If the tablet\n * breakpoint is missing, invalid, or not larger than the mobile breakpoint, the\n * result only includes the mobile breakpoint.\n *\n * @param configOrSettings Global styles config or viewport settings.\n * @return Sanitized viewport breakpoints.\n */\nexport function getViewportBreakpoints(\n\tconfigOrSettings?: GlobalStylesConfig | ViewportSettings\n): ViewportBreakpoints {\n\tconst viewportSettings = getViewportSettings( configOrSettings );\n\tconst breakpoints: ViewportBreakpoints = {};\n\tconst breakpointValuesInPixels: Partial<\n\t\tRecord< ViewportBreakpoint, number >\n\t> = {};\n\n\tObject.keys( DEFAULT_VIEWPORT_BREAKPOINTS ).forEach( ( breakpoint ) => {\n\t\tconst key = breakpoint as ViewportBreakpoint;\n\t\tconst value = viewportSettings[ key ];\n\t\tconst px = getViewportBreakpointValueInPixels( value );\n\t\tif ( px !== undefined && isValidViewportSize( value ) ) {\n\t\t\tbreakpoints[ key ] = value.trim();\n\t\t\tbreakpointValuesInPixels[ key ] = px;\n\t\t}\n\t} );\n\n\tconst breakpointNames = Object.keys( breakpoints );\n\tif ( ! breakpointNames.length ) {\n\t\treturn { ...DEFAULT_VIEWPORT_BREAKPOINTS };\n\t}\n\n\tif ( 1 === breakpointNames.length ) {\n\t\treturn breakpoints;\n\t}\n\n\tconst mobile = breakpoints.mobile!;\n\tconst tablet = breakpoints.tablet!;\n\tif (\n\t\tbreakpointValuesInPixels.mobile! >= breakpointValuesInPixels.tablet!\n\t) {\n\t\treturn { mobile };\n\t}\n\n\treturn { mobile, tablet };\n}\n\n/**\n * Returns responsive media query aliases for the configured viewport\n * breakpoints.\n *\n * @param configOrSettings Global styles config or viewport settings.\n * @return Responsive media queries keyed by alias.\n */\nexport function getResponsiveMediaQueries(\n\tconfigOrSettings?: GlobalStylesConfig | ViewportSettings\n): Record< string, string > {\n\tconst breakpoints = getViewportBreakpoints( configOrSettings );\n\tconst mediaQueries: Record< string, string > = {};\n\n\tif ( breakpoints.mobile ) {\n\t\tmediaQueries[ '@mobile' ] = `@media (width <= ${ breakpoints.mobile })`;\n\t}\n\n\tif ( breakpoints.tablet ) {\n\t\tmediaQueries[ '@tablet' ] = breakpoints.mobile\n\t\t\t? `@media (${ breakpoints.mobile } < width <= ${ breakpoints.tablet })`\n\t\t\t: `@media (width <= ${ breakpoints.tablet })`;\n\t}\n\n\treturn mediaQueries;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAM,+BAA+B;AAAA,EACpC,QAAQ;AAAA,EACR,QAAQ;AACT;AAQA,IAAM,uBAAuB;AAC7B,IAAM,oBAAoB;AAE1B,SAAS,mBACR,kBACuC;AACvC,SAAO,YAAY,oBAAoB,YAAY;AACpD;AAEA,SAAS,oBACR,kBACmB;AACnB,MAAK,CAAE,oBAAoB,OAAO,qBAAqB,UAAW;AACjE,WAAO,CAAC;AAAA,EACT;AAEA,MAAK,mBAAoB,gBAAiB,GAAI;AAC7C,WAAO;AAAA,EACR;AAEA,SAAO,iBAAiB,UAAU,YAAY,CAAC;AAChD;AAEA,SAAS,oBAAqB,OAAkC;AAC/D,SACC,OAAO,UAAU,YAAY,qBAAqB,KAAM,MAAM,KAAK,CAAE;AAEvE;AAWO,SAAS,mCACf,OACqB;AACrB,MAAK,OAAO,UAAU,UAAW;AAChC,WAAO;AAAA,EACR;AAEA,MAAK,OAAO,UAAU,UAAW;AAChC,WAAO;AAAA,EACR;AAEA,QAAM,QAAQ,MAAM,KAAK,EAAE,MAAO,oBAAqB;AACvD,MAAK,CAAE,OAAQ;AACd,WAAO;AAAA,EACR;AAEA,QAAM,eAAe,OAAO,WAAY,MAAO,CAAE,CAAE;AACnD,QAAM,OAAO,MAAO,CAAE;AAMtB,SAAO,SAAS,OAAO,eAAe,eAAe;AACtD;AAcO,SAAS,uBACf,kBACsB;AACtB,QAAM,mBAAmB,oBAAqB,gBAAiB;AAC/D,QAAM,cAAmC,CAAC;AAC1C,QAAM,2BAEF,CAAC;AAEL,SAAO,KAAM,4BAA6B,EAAE,QAAS,CAAE,eAAgB;AACtE,UAAM,MAAM;AACZ,UAAM,QAAQ,iBAAkB,GAAI;AACpC,UAAM,KAAK,mCAAoC,KAAM;AACrD,QAAK,OAAO,UAAa,oBAAqB,KAAM,GAAI;AACvD,kBAAa,GAAI,IAAI,MAAM,KAAK;AAChC,+BAA0B,GAAI,IAAI;AAAA,IACnC;AAAA,EACD,CAAE;AAEF,QAAM,kBAAkB,OAAO,KAAM,WAAY;AACjD,MAAK,CAAE,gBAAgB,QAAS;AAC/B,WAAO,EAAE,GAAG,6BAA6B;AAAA,EAC1C;AAEA,MAAK,MAAM,gBAAgB,QAAS;AACnC,WAAO;AAAA,EACR;AAEA,QAAM,SAAS,YAAY;AAC3B,QAAM,SAAS,YAAY;AAC3B,MACC,yBAAyB,UAAW,yBAAyB,QAC5D;AACD,WAAO,EAAE,OAAO;AAAA,EACjB;AAEA,SAAO,EAAE,QAAQ,OAAO;AACzB;AASO,SAAS,0BACf,kBAC2B;AAC3B,QAAM,cAAc,uBAAwB,gBAAiB;AAC7D,QAAM,eAAyC,CAAC;AAEhD,MAAK,YAAY,QAAS;AACzB,iBAAc,SAAU,IAAI,oBAAqB,YAAY,MAAO;AAAA,EACrE;AAEA,MAAK,YAAY,QAAS;AACzB,iBAAc,SAAU,IAAI,YAAY,SACrC,WAAY,YAAY,MAAO,eAAgB,YAAY,MAAO,MAClE,oBAAqB,YAAY,MAAO;AAAA,EAC5C;AAEA,SAAO;AACR;",
+  "names": []
+}

package/build-module/core/render.mjs

@@ -27,6 +27,7 @@ import { getGapCSSValue } from "../utils/gap.mjs";
 import { setBackgroundStyleDefaults } from "../utils/background.mjs";
 import { LAYOUT_DEFINITIONS } from "../utils/layout.mjs";
 import { getValueFromObjectPath, setImmutably } from "../utils/object.mjs";
+import { getResponsiveMediaQueries } from "../utils/viewport.mjs";
 import { getSetting } from "../settings/get-setting.mjs";
 import { normalizeStyleStateAliases } from "../style-state-back-compat.mjs";
 var ELEMENT_CLASS_NAMES = {
@@ -64,10 +65,6 @@ var VALID_ELEMENT_PSEUDO_SELECTORS = {
     ":active"
   ]
 };
-var RESPONSIVE_BREAKPOINTS = {
-  "@mobile": "@media (width <= 480px)",
-  "@tablet": "@media (480px < width <= 782px)"
-};
 function getPresetsClasses(blockSelector = "*", blockPresets = {}) {
   return PRESET_METADATA.reduce(
     (declarations, { path, cssVarInfix, classes }) => {
@@ -429,17 +426,21 @@ var STYLE_KEYS = [
   "shadow",
   "background"
 ];
-function pickStyleKeys(treeToPickFrom) {
-  return pickStyleAndPseudoKeys(treeToPickFrom);
+function pickStyleKeys(treeToPickFrom, responsiveMediaQueries) {
+  return pickStyleAndPseudoKeys(
+    treeToPickFrom,
+    void 0,
+    responsiveMediaQueries
+  );
 }
-function pickStyleAndPseudoKeys(treeToPickFrom, blockName) {
+function pickStyleAndPseudoKeys(treeToPickFrom, blockName, responsiveMediaQueries) {
   if (!treeToPickFrom) {
     return {};
   }
   const entries = Object.entries(treeToPickFrom);
   const allowedPseudoSelectors = blockName ? VALID_BLOCK_PSEUDO_SELECTORS[blockName] ?? [] : [];
   const pickedEntries = entries.filter(
-    ([key]) => STYLE_KEYS.includes(key) || allowedPseudoSelectors.includes(key) || RESPONSIVE_BREAKPOINTS[key]
+    ([key]) => STYLE_KEYS.includes(key) || allowedPseudoSelectors.includes(key) || responsiveMediaQueries[key]
   );
   const clonedEntries = pickedEntries.map(([key, style]) => [
     key,
@@ -480,11 +481,15 @@ function getPseudoStyleNodes(node) {
     ];
   });
 }
-function getResponsiveStyleNodes(node) {
+function getResponsiveStyleNodes(node, responsiveMediaQueries) {
   const {
     styles,
     selector,
+    fallbackGapValue,
     featureSelectors,
+    hasLayoutSupport,
+    layoutHasBlockGapSupport,
+    layoutSelector,
     name,
     elementName,
     isStyleVariation,
@@ -493,7 +498,7 @@ function getResponsiveStyleNodes(node) {
   if (!name && !elementName) {
     return [];
   }
-  return Object.entries(RESPONSIVE_BREAKPOINTS).flatMap(
+  return Object.entries(responsiveMediaQueries).flatMap(
     ([breakpointKey, mediaQuery]) => {
       const breakpointStyles = styles?.[breakpointKey];
       if (!breakpointStyles || typeof breakpointStyles !== "object") {
@@ -505,10 +510,14 @@ function getResponsiveStyleNodes(node) {
           selector,
           mediaQuery,
           featureSelectors: featureSelectors && typeof featureSelectors !== "string" ? featureSelectors : void 0,
+          fallbackGapValue,
+          hasLayoutSupport,
           name,
           elementName,
           isStyleVariation,
-          variationName
+          variationName,
+          layoutSelector,
+          layoutHasBlockGapSupport
         }
       ];
     }
@@ -519,7 +528,8 @@ var getNodesWithStyles = (tree, blockSelectors) => {
   if (!tree?.styles) {
     return nodes;
   }
-  const styles = pickStyleKeys(tree.styles);
+  const responsiveMediaQueries = getResponsiveMediaQueries(tree);
+  const styles = pickStyleKeys(tree.styles, responsiveMediaQueries);
   if (styles) {
     nodes.push({
       styles,
@@ -543,7 +553,11 @@ var getNodesWithStyles = (tree, blockSelectors) => {
   });
   Object.entries(tree.styles?.blocks ?? {}).forEach(
     ([blockName, node]) => {
-      const blockStyles = pickStyleAndPseudoKeys(node, blockName);
+      const blockStyles = pickStyleAndPseudoKeys(
+        node,
+        blockName,
+        responsiveMediaQueries
+      );
       const typedNode = node;
       const variationNodesToAdd = [];
       const variationStyleNodesToAdd = [];
@@ -553,7 +567,8 @@ var getNodesWithStyles = (tree, blockSelectors) => {
             const typedVariation = variation;
             const variationStyles = pickStyleAndPseudoKeys(
               typedVariation,
-              blockName
+              blockName,
+              responsiveMediaQueries
             );
             if (typedVariation?.css) {
               variationStyles.css = typedVariation.css;
@@ -608,7 +623,8 @@ var getNodesWithStyles = (tree, blockSelectors) => {
                 ) : void 0;
                 const variationBlockStyleNodes = pickStyleAndPseudoKeys(
                   variationBlockStyles,
-                  variationBlockName
+                  variationBlockName,
+                  responsiveMediaQueries
                 );
                 if (variationBlockStyles?.css) {
                   variationBlockStyleNodes.css = variationBlockStyles.css;
@@ -954,11 +970,15 @@ var transformToStyles = (tree, blockSelectors, hasBlockGapSupport, hasFallbackGa
     ruleset += "}";
   }
   if (options.blockStyles) {
+    const responsiveMediaQueries = getResponsiveMediaQueries(tree);
     nodesWithStyles.forEach((node) => {
       if (node.isStyleVariation && !options.variationStyles) {
         return;
       }
-      const responsiveNodes = getResponsiveStyleNodes(node);
+      const responsiveNodes = getResponsiveStyleNodes(
+        node,
+        responsiveMediaQueries
+      );
       [
         node,
         ...responsiveNodes,