@wordpress/global-styles-engine 1.8.1-next.v.202603102151.0 → 1.9.0

package/build/index.cjs

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/global-styles-engine/src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  __unstableGeneratePreviewStateStyles: () => import_preview_state_styles.generatePreviewStateStyles,
   areGlobalStylesEqual: () => import_equal.areGlobalStylesEqual,
   generateGlobalStyles: () => import_render.generateGlobalStyles,
   getBlockSelector: () => import_selectors.getBlockSelector,
@@ -65,8 +66,10 @@ 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_preview_state_styles = require("./preview-state-styles.cjs");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  __unstableGeneratePreviewStateStyles,
   areGlobalStylesEqual,
   generateGlobalStyles,
   getBlockSelector,

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} from './utils/common';\n\n// Types\nexport type * from './types';\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;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,oBAIO;",
+  "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} 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;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,oBAIO;AAKP,kCAAmF;",
   "names": ["import_render"]
 }

package/build/preview-state-styles.cjs

@@ -0,0 +1,51 @@
+"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/preview-state-styles.ts
+var preview_state_styles_exports = {};
+__export(preview_state_styles_exports, {
+  generatePreviewStateStyles: () => generatePreviewStateStyles
+});
+module.exports = __toCommonJS(preview_state_styles_exports);
+var import_render = require("./core/render.cjs");
+function generatePreviewStateStyles(stateStyles, blockName) {
+  if (!stateStyles || !blockName) {
+    return "";
+  }
+  const previewConfig = {
+    settings: {},
+    // Empty settings to satisfy the config structure
+    styles: {
+      blocks: {
+        [blockName]: stateStyles
+      }
+    }
+  };
+  try {
+    const [generatedStyles] = (0, import_render.generateGlobalStyles)(previewConfig, []);
+    return generatedStyles.map((style) => style.css).join("\n");
+  } catch (error) {
+    return "";
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  generatePreviewStateStyles
+});
+//# sourceMappingURL=preview-state-styles.cjs.map

package/build/preview-state-styles.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/preview-state-styles.ts"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { generateGlobalStyles } from './core/render';\nimport type { GlobalStylesConfig } from './types';\n\n/**\n * Generates CSS for preview contexts to display a specific state (hover, focus, etc.).\n * Takes state-specific styles and generates CSS as if they were the default styles,\n * allowing previews to show how a block will appear in that state.\n *\n * @param stateStyles - The styles for the specific state (e.g., hover styles)\n * @param blockName   - The block name (e.g., 'core/button')\n * @return CSS string for the state preview\n */\nexport function generatePreviewStateStyles(\n\tstateStyles: any,\n\tblockName: string\n): string {\n\tif ( ! stateStyles || ! blockName ) {\n\t\treturn '';\n\t}\n\n\t// Create a minimal theme.json-like config with the state styles\n\t// positioned as if they were the default styles for this block\n\tconst previewConfig: GlobalStylesConfig = {\n\t\tsettings: {}, // Empty settings to satisfy the config structure\n\t\tstyles: {\n\t\t\tblocks: {\n\t\t\t\t[ blockName ]: stateStyles,\n\t\t\t},\n\t\t},\n\t};\n\n\ttry {\n\t\tconst [ generatedStyles ] = generateGlobalStyles( previewConfig, [] );\n\n\t\treturn generatedStyles.map( ( style ) => style.css ).join( '\\n' );\n\t} catch ( error ) {\n\t\t// If generation fails, return empty string to avoid breaking previews\n\t\treturn '';\n\t}\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAAqC;AAY9B,SAAS,2BACf,aACA,WACS;AACT,MAAK,CAAE,eAAe,CAAE,WAAY;AACnC,WAAO;AAAA,EACR;AAIA,QAAM,gBAAoC;AAAA,IACzC,UAAU,CAAC;AAAA;AAAA,IACX,QAAQ;AAAA,MACP,QAAQ;AAAA,QACP,CAAE,SAAU,GAAG;AAAA,MAChB;AAAA,IACD;AAAA,EACD;AAEA,MAAI;AACH,UAAM,CAAE,eAAgB,QAAI,oCAAsB,eAAe,CAAC,CAAE;AAEpE,WAAO,gBAAgB,IAAK,CAAE,UAAW,MAAM,GAAI,EAAE,KAAM,IAAK;AAAA,EACjE,SAAU,OAAQ;AAEjB,WAAO;AAAA,EACR;AACD;",
+  "names": []
+}

package/build-module/index.mjs

@@ -22,7 +22,9 @@ import {
   getPresetVariableFromValue,
   getResolvedValue
 } from "./utils/common.mjs";
+import { generatePreviewStateStyles } from "./preview-state-styles.mjs";
 export {
+  generatePreviewStateStyles as __unstableGeneratePreviewStateStyles,
   areGlobalStylesEqual,
   generateGlobalStyles,
   getBlockSelector,

package/build-module/index.mjs.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} from './utils/common';\n\n// Types\nexport type * from './types';\n"],
-  "mappings": ";AACA,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAoB,WAAXA,gBAA8B;AAGvC,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAoB,WAAXA,gBAAyC;AAGlD,SAAS,4BAA4B;AACrC;AAAA,EACsB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,wBAAwB;AAGjC,SAAS,kCAAkC;AAC3C,SAAS,gCAAgC;AACzC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;",
+  "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} from './utils/common';\n\n// Types\nexport type * from './types';\n\nexport { generatePreviewStateStyles as __unstableGeneratePreviewStateStyles } from './preview-state-styles';\n"],
+  "mappings": ";AACA,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAoB,WAAXA,gBAA8B;AAGvC,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAoB,WAAXA,gBAAyC;AAGlD,SAAS,4BAA4B;AACrC;AAAA,EACsB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,wBAAwB;AAGjC,SAAS,kCAAkC;AAC3C,SAAS,gCAAgC;AACzC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAKP,SAAuC,kCAA4C;",
   "names": ["default"]
 }

package/build-module/preview-state-styles.mjs

@@ -0,0 +1,26 @@
+// packages/global-styles-engine/src/preview-state-styles.ts
+import { generateGlobalStyles } from "./core/render.mjs";
+function generatePreviewStateStyles(stateStyles, blockName) {
+  if (!stateStyles || !blockName) {
+    return "";
+  }
+  const previewConfig = {
+    settings: {},
+    // Empty settings to satisfy the config structure
+    styles: {
+      blocks: {
+        [blockName]: stateStyles
+      }
+    }
+  };
+  try {
+    const [generatedStyles] = generateGlobalStyles(previewConfig, []);
+    return generatedStyles.map((style) => style.css).join("\n");
+  } catch (error) {
+    return "";
+  }
+}
+export {
+  generatePreviewStateStyles
+};
+//# sourceMappingURL=preview-state-styles.mjs.map

package/build-module/preview-state-styles.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/preview-state-styles.ts"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { generateGlobalStyles } from './core/render';\nimport type { GlobalStylesConfig } from './types';\n\n/**\n * Generates CSS for preview contexts to display a specific state (hover, focus, etc.).\n * Takes state-specific styles and generates CSS as if they were the default styles,\n * allowing previews to show how a block will appear in that state.\n *\n * @param stateStyles - The styles for the specific state (e.g., hover styles)\n * @param blockName   - The block name (e.g., 'core/button')\n * @return CSS string for the state preview\n */\nexport function generatePreviewStateStyles(\n\tstateStyles: any,\n\tblockName: string\n): string {\n\tif ( ! stateStyles || ! blockName ) {\n\t\treturn '';\n\t}\n\n\t// Create a minimal theme.json-like config with the state styles\n\t// positioned as if they were the default styles for this block\n\tconst previewConfig: GlobalStylesConfig = {\n\t\tsettings: {}, // Empty settings to satisfy the config structure\n\t\tstyles: {\n\t\t\tblocks: {\n\t\t\t\t[ blockName ]: stateStyles,\n\t\t\t},\n\t\t},\n\t};\n\n\ttry {\n\t\tconst [ generatedStyles ] = generateGlobalStyles( previewConfig, [] );\n\n\t\treturn generatedStyles.map( ( style ) => style.css ).join( '\\n' );\n\t} catch ( error ) {\n\t\t// If generation fails, return empty string to avoid breaking previews\n\t\treturn '';\n\t}\n}\n"],
+  "mappings": ";AAGA,SAAS,4BAA4B;AAY9B,SAAS,2BACf,aACA,WACS;AACT,MAAK,CAAE,eAAe,CAAE,WAAY;AACnC,WAAO;AAAA,EACR;AAIA,QAAM,gBAAoC;AAAA,IACzC,UAAU,CAAC;AAAA;AAAA,IACX,QAAQ;AAAA,MACP,QAAQ;AAAA,QACP,CAAE,SAAU,GAAG;AAAA,MAChB;AAAA,IACD;AAAA,EACD;AAEA,MAAI;AACH,UAAM,CAAE,eAAgB,IAAI,qBAAsB,eAAe,CAAC,CAAE;AAEpE,WAAO,gBAAgB,IAAK,CAAE,UAAW,MAAM,GAAI,EAAE,KAAM,IAAK;AAAA,EACjE,SAAU,OAAQ;AAEjB,WAAO;AAAA,EACR;AACD;",
+  "names": []
+}

package/build-types/index.d.ts

@@ -13,4 +13,5 @@ export { getTypographyFontSizeValue } from './utils/typography';
 export { getDimensionPresetCssVar } from './utils/dimensions';
 export { getValueFromVariable, getPresetVariableFromValue, getResolvedValue, } from './utils/common';
 export type * from './types';
+export { generatePreviewStateStyles as __unstableGeneratePreviewStateStyles } from './preview-state-styles';
 //# sourceMappingURL=index.d.ts.map

package/build-types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGhE,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAGtF,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EACN,iBAAiB,IAAI,QAAQ,EAC7B,iBAAiB,EACjB,eAAe,EACf,iBAAiB,GACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,EAAE,0BAA0B,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EACN,oBAAoB,EACpB,0BAA0B,EAC1B,gBAAgB,GAChB,MAAM,gBAAgB,CAAC;AAGxB,mBAAmB,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGhE,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAGtF,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EACN,iBAAiB,IAAI,QAAQ,EAC7B,iBAAiB,EACjB,eAAe,EACf,iBAAiB,GACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGpD,OAAO,EAAE,0BAA0B,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EACN,oBAAoB,EACpB,0BAA0B,EAC1B,gBAAgB,GAChB,MAAM,gBAAgB,CAAC;AAGxB,mBAAmB,SAAS,CAAC;AAE7B,OAAO,EAAE,0BAA0B,IAAI,oCAAoC,EAAE,MAAM,wBAAwB,CAAC"}

package/build-types/preview-state-styles.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Generates CSS for preview contexts to display a specific state (hover, focus, etc.).
+ * Takes state-specific styles and generates CSS as if they were the default styles,
+ * allowing previews to show how a block will appear in that state.
+ *
+ * @param stateStyles - The styles for the specific state (e.g., hover styles)
+ * @param blockName   - The block name (e.g., 'core/button')
+ * @return CSS string for the state preview
+ */
+export declare function generatePreviewStateStyles(stateStyles: any, blockName: string): string;
+//# sourceMappingURL=preview-state-styles.d.ts.map

package/build-types/preview-state-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-state-styles.d.ts","sourceRoot":"","sources":["../src/preview-state-styles.ts"],"names":[],"mappings":"AAMA;;;;;;;;GAQG;AACH,wBAAgB,0BAA0B,CACzC,WAAW,EAAE,GAAG,EAChB,SAAS,EAAE,MAAM,GACf,MAAM,CAwBR"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/global-styles-engine",
-	"version": "1.8.1-next.v.202603102151.0+59e17f9ec",
+	"version": "1.9.0",
 	"description": "Pure CSS generation engine for WordPress global styles.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -42,10 +42,10 @@
 	"types": "build-types/index.d.ts",
 	"sideEffects": false,
 	"dependencies": {
-		"@wordpress/blocks": "^15.14.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/data": "^10.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/i18n": "^6.14.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/style-engine": "^2.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/blocks": "^15.15.0",
+		"@wordpress/data": "^10.42.0",
+		"@wordpress/i18n": "^6.15.0",
+		"@wordpress/style-engine": "^2.42.0",
 		"colord": "^2.9.2",
 		"deepmerge": "^4.3.0",
 		"fast-deep-equal": "^3.1.3",
@@ -59,5 +59,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "86db21e727d89e8f0dbba9300d2f97fd22b08693"
+	"gitHead": "c20787b1778ae64c2db65643b1c236309d68e6ba"
 }

package/src/index.ts

@@ -31,3 +31,5 @@ export {
 
 // Types
 export type * from './types';
+
+export { generatePreviewStateStyles as __unstableGeneratePreviewStateStyles } from './preview-state-styles';

package/src/preview-state-styles.ts

@@ -0,0 +1,43 @@
+/**
+ * Internal dependencies
+ */
+import { generateGlobalStyles } from './core/render';
+import type { GlobalStylesConfig } from './types';
+
+/**
+ * Generates CSS for preview contexts to display a specific state (hover, focus, etc.).
+ * Takes state-specific styles and generates CSS as if they were the default styles,
+ * allowing previews to show how a block will appear in that state.
+ *
+ * @param stateStyles - The styles for the specific state (e.g., hover styles)
+ * @param blockName   - The block name (e.g., 'core/button')
+ * @return CSS string for the state preview
+ */
+export function generatePreviewStateStyles(
+	stateStyles: any,
+	blockName: string
+): string {
+	if ( ! stateStyles || ! blockName ) {
+		return '';
+	}
+
+	// Create a minimal theme.json-like config with the state styles
+	// positioned as if they were the default styles for this block
+	const previewConfig: GlobalStylesConfig = {
+		settings: {}, // Empty settings to satisfy the config structure
+		styles: {
+			blocks: {
+				[ blockName ]: stateStyles,
+			},
+		},
+	};
+
+	try {
+		const [ generatedStyles ] = generateGlobalStyles( previewConfig, [] );
+
+		return generatedStyles.map( ( style ) => style.css ).join( '\n' );
+	} catch ( error ) {
+		// If generation fails, return empty string to avoid breaking previews
+		return '';
+	}
+}