@wordpress/global-styles-ui 1.1.0

package/build/screen-header.js

@@ -0,0 +1,61 @@
+"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);
+var screen_header_exports = {};
+__export(screen_header_exports, {
+  ScreenHeader: () => ScreenHeader
+});
+module.exports = __toCommonJS(screen_header_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_icons = require("@wordpress/icons");
+function ScreenHeader({
+  title,
+  description,
+  onBack
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalView, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalSpacer, { marginBottom: 0, paddingX: 4, paddingY: 3, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.Navigator.BackButton,
+        {
+          icon: (0, import_i18n.isRTL)() ? import_icons.chevronRight : import_icons.chevronLeft,
+          size: "small",
+          label: (0, import_i18n.__)("Back"),
+          onClick: onBack
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalSpacer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.__experimentalHeading,
+        {
+          className: "global-styles-ui-header",
+          level: 2,
+          size: 13,
+          children: title
+        }
+      ) })
+    ] }) }) }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "global-styles-ui-header__description", children: description })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ScreenHeader
+});
+//# sourceMappingURL=screen-header.js.map

package/build/screen-header.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/screen-header.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHeading as Heading,\n\t__experimentalView as View,\n\tNavigator,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\n\ninterface ScreenHeaderProps {\n\ttitle: string;\n\tdescription?: string | React.ReactElement;\n\tonBack?: () => void;\n}\n\nexport function ScreenHeader( {\n\ttitle,\n\tdescription,\n\tonBack,\n}: ScreenHeaderProps ) {\n\treturn (\n\t\t<VStack spacing={ 0 }>\n\t\t\t<View>\n\t\t\t\t<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>\n\t\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t\t<Navigator.BackButton\n\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\tonClick={ onBack }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Spacer>\n\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-header\"\n\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t</HStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"global-styles-ui-header__description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BK;AA1BL,wBAOO;AACP,kBAA0B;AAC1B,mBAA0C;AAQnC,SAAS,aAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACD,GAAuB;AACtB,SACC,6CAAC,kBAAAA,sBAAA,EAAO,SAAU,GACjB;AAAA,gDAAC,kBAAAC,oBAAA,EACA,sDAAC,kBAAAC,sBAAA,EAAO,cAAe,GAAI,UAAW,GAAI,UAAW,GACpD,uDAAC,kBAAAC,sBAAA,EAAO,SAAU,GACjB;AAAA;AAAA,QAAC,4BAAU;AAAA,QAAV;AAAA,UACA,UAAO,mBAAM,IAAI,4BAAe;AAAA,UAChC,MAAK;AAAA,UACL,WAAQ,gBAAI,MAAO;AAAA,UACnB,SAAU;AAAA;AAAA,MACX;AAAA,MACA,4CAAC,kBAAAD,sBAAA,EACA;AAAA,QAAC,kBAAAE;AAAA,QAAA;AAAA,UACA,WAAU;AAAA,UACV,OAAQ;AAAA,UACR,MAAO;AAAA,UAEL;AAAA;AAAA,MACH,GACD;AAAA,OACD,GACD,GACD;AAAA,IACE,eACD,4CAAC,OAAE,WAAU,wCACV,uBACH;AAAA,KAEF;AAEF;",
+  "names": ["VStack", "View", "Spacer", "HStack", "Heading"]
+}

package/build/screen-layout.js

@@ -0,0 +1,54 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var screen_layout_exports = {};
+__export(screen_layout_exports, {
+  default: () => screen_layout_default
+});
+module.exports = __toCommonJS(screen_layout_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_i18n = require("@wordpress/i18n");
+var import_block_editor = require("@wordpress/block-editor");
+var import_screen_header = require("./screen-header");
+var import_dimensions_panel = __toESM(require("./dimensions-panel"));
+var import_hooks = require("./hooks");
+var import_lock_unlock = require("./lock-unlock");
+const { useHasDimensionsPanel, useSettingsForBlockElement } = (0, import_lock_unlock.unlock)(
+  import_block_editor.privateApis
+);
+function ScreenLayout() {
+  const [rawSettings] = (0, import_hooks.useSetting)("");
+  const settings = useSettingsForBlockElement(rawSettings);
+  const hasDimensionsPanel = useHasDimensionsPanel(settings);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_header.ScreenHeader, { title: (0, import_i18n.__)("Layout") }),
+    hasDimensionsPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dimensions_panel.default, {})
+  ] });
+}
+var screen_layout_default = ScreenLayout;
+//# sourceMappingURL=screen-layout.js.map

package/build/screen-layout.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/screen-layout.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport type { GlobalStylesSettings } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { ScreenHeader } from './screen-header';\nimport DimensionsPanel from './dimensions-panel';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useHasDimensionsPanel, useSettingsForBlockElement } = unlock(\n\tblockEditorPrivateApis\n);\n\nfunction ScreenLayout() {\n\tconst [ rawSettings ] = useSetting< GlobalStylesSettings >( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Layout' ) } />\n\t\t\t{ hasDimensionsPanel && <DimensionsPanel /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenLayout;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BE;AAvBF,kBAAmB;AAEnB,0BAAsD;AAMtD,2BAA6B;AAC7B,8BAA4B;AAC5B,mBAA2B;AAC3B,yBAAuB;AAEvB,MAAM,EAAE,uBAAuB,2BAA2B,QAAI;AAAA,EAC7D,oBAAAA;AACD;AAEA,SAAS,eAAe;AACvB,QAAM,CAAE,WAAY,QAAI,yBAAoC,EAAG;AAC/D,QAAM,WAAW,2BAA4B,WAAY;AACzD,QAAM,qBAAqB,sBAAuB,QAAS;AAE3D,SACC,4EACC;AAAA,gDAAC,qCAAa,WAAQ,gBAAI,QAAS,GAAI;AAAA,IACrC,sBAAsB,4CAAC,wBAAAC,SAAA,EAAgB;AAAA,KAC1C;AAEF;AAEA,IAAO,wBAAQ;",
+  "names": ["blockEditorPrivateApis", "DimensionsPanel"]
+}

package/build/screen-revisions/index.js

@@ -0,0 +1,147 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var screen_revisions_exports = {};
+__export(screen_revisions_exports, {
+  default: () => screen_revisions_default
+});
+module.exports = __toCommonJS(screen_revisions_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_global_styles_engine = require("@wordpress/global-styles-engine");
+var import_screen_header = require("../screen-header");
+var import_context = require("../context");
+var import_use_global_styles_revisions = __toESM(require("./use-global-styles-revisions"));
+var import_revisions_buttons = __toESM(require("./revisions-buttons"));
+var import_pagination = __toESM(require("../pagination"));
+const PAGE_SIZE = 10;
+function ScreenRevisions({ onClose } = {}) {
+  const { user: currentEditorGlobalStyles, onChange: setUserConfig } = (0, import_element.useContext)(import_context.GlobalStylesContext);
+  const { params, goTo } = (0, import_components.useNavigator)();
+  const { revisionId } = params;
+  const [currentPage, setCurrentPage] = (0, import_element.useState)(1);
+  const { revisions, isLoading, hasUnsavedChanges, revisionsCount } = (0, import_use_global_styles_revisions.default)({
+    query: {
+      per_page: PAGE_SIZE,
+      page: currentPage
+    }
+  });
+  const numPages = Math.ceil(revisionsCount / PAGE_SIZE);
+  const [
+    isLoadingRevisionWithUnsavedChanges,
+    setIsLoadingRevisionWithUnsavedChanges
+  ] = (0, import_element.useState)(false);
+  const currentlySelectedRevision = (0, import_element.useMemo)(() => {
+    if (!revisionId) {
+      return currentEditorGlobalStyles;
+    }
+    const revision = revisions.find(
+      (rev) => String(rev.id) === String(revisionId)
+    );
+    return revision || currentEditorGlobalStyles;
+  }, [revisionId, revisions, currentEditorGlobalStyles]);
+  const selectedRevisionMatchesEditorStyles = (0, import_global_styles_engine.areGlobalStylesEqual)(
+    currentlySelectedRevision,
+    currentEditorGlobalStyles
+  );
+  const onCloseRevisions = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+  const restoreRevision = (revision) => {
+    setUserConfig(revision);
+    setIsLoadingRevisionWithUnsavedChanges(false);
+    onCloseRevisions();
+  };
+  const handleRevisionSelect = (revision) => {
+    goTo(`/revisions/${revision.id}`);
+  };
+  const currentlySelectedRevisionId = (
+    // @ts-expect-error: revision id is not present in the fallback (default object).
+    currentlySelectedRevision?.id ?? revisions[0]?.id
+  );
+  const isLoadButtonEnabled = !!currentlySelectedRevisionId && currentlySelectedRevisionId !== "unsaved" && !selectedRevisionMatchesEditorStyles;
+  const hasRevisions = !!revisions.length;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_screen_header.ScreenHeader,
+      {
+        title: revisionsCount ? (0, import_i18n.sprintf)(
+          // translators: %d: number of revisions.
+          (0, import_i18n.__)("Revisions (%d)"),
+          revisionsCount
+        ) : (0, import_i18n.__)("Revisions"),
+        description: (0, import_i18n.__)(
+          `Click on previously saved styles to preview them. To restore a selected version to the editor, hit "Apply." When you're ready, use the Save button to save your changes.`
+        ),
+        onBack: onCloseRevisions
+      }
+    ),
+    !hasRevisions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, { className: "global-styles-ui-screen-revisions__loading" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_revisions_buttons.default,
+      {
+        onChange: handleRevisionSelect,
+        selectedRevisionId: currentlySelectedRevisionId,
+        userRevisions: revisions,
+        canApplyRevision: isLoadButtonEnabled,
+        onApplyRevision: () => hasUnsavedChanges ? setIsLoadingRevisionWithUnsavedChanges(true) : restoreRevision(currentlySelectedRevision)
+      }
+    ),
+    numPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "global-styles-ui-screen-revisions__footer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_pagination.default,
+      {
+        className: "global-styles-ui-screen-revisions__pagination",
+        currentPage,
+        numPages,
+        changePage: setCurrentPage,
+        totalItems: revisionsCount,
+        disabled: isLoading,
+        label: (0, import_i18n.__)("Global Styles pagination")
+      }
+    ) }),
+    isLoadingRevisionWithUnsavedChanges && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.__experimentalConfirmDialog,
+      {
+        isOpen: isLoadingRevisionWithUnsavedChanges,
+        confirmButtonText: (0, import_i18n.__)("Apply"),
+        onConfirm: () => restoreRevision(currentlySelectedRevision),
+        onCancel: () => setIsLoadingRevisionWithUnsavedChanges(false),
+        size: "medium",
+        children: (0, import_i18n.__)(
+          "Are you sure you want to apply this revision? Any unsaved changes will be lost."
+        )
+      }
+    )
+  ] });
+}
+var screen_revisions_default = ScreenRevisions;
+//# sourceMappingURL=index.js.map

package/build/screen-revisions/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/screen-revisions/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\t__experimentalConfirmDialog as ConfirmDialog,\n\tSpinner,\n\tuseNavigator,\n} from '@wordpress/components';\nimport { useContext, useState, useMemo } from '@wordpress/element';\nimport { areGlobalStylesEqual } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { ScreenHeader } from '../screen-header';\nimport { GlobalStylesContext } from '../context';\nimport useGlobalStylesRevisions from './use-global-styles-revisions';\nimport RevisionsButtons from './revisions-buttons';\nimport Pagination from '../pagination';\n\nconst PAGE_SIZE = 10;\n\ninterface ScreenRevisionsProps {\n\tonClose?: () => void;\n}\n\nfunction ScreenRevisions( { onClose }: ScreenRevisionsProps = {} ) {\n\tconst { user: currentEditorGlobalStyles, onChange: setUserConfig } =\n\t\tuseContext( GlobalStylesContext );\n\tconst { params, goTo } = useNavigator();\n\tconst { revisionId } = params;\n\tconst [ currentPage, setCurrentPage ] = useState( 1 );\n\tconst { revisions, isLoading, hasUnsavedChanges, revisionsCount } =\n\t\tuseGlobalStylesRevisions( {\n\t\t\tquery: {\n\t\t\t\tper_page: PAGE_SIZE,\n\t\t\t\tpage: currentPage,\n\t\t\t},\n\t\t} );\n\n\tconst numPages = Math.ceil( revisionsCount / PAGE_SIZE );\n\n\tconst [\n\t\tisLoadingRevisionWithUnsavedChanges,\n\t\tsetIsLoadingRevisionWithUnsavedChanges,\n\t] = useState( false );\n\n\t// Derive the currently selected revision from the path parameter\n\tconst currentlySelectedRevision = useMemo( () => {\n\t\tif ( ! revisionId ) {\n\t\t\treturn currentEditorGlobalStyles;\n\t\t}\n\t\tconst revision = revisions.find(\n\t\t\t( rev ) => String( rev.id ) === String( revisionId )\n\t\t);\n\t\treturn revision || currentEditorGlobalStyles;\n\t}, [ revisionId, revisions, currentEditorGlobalStyles ] );\n\n\tconst selectedRevisionMatchesEditorStyles = areGlobalStylesEqual(\n\t\tcurrentlySelectedRevision,\n\t\tcurrentEditorGlobalStyles\n\t);\n\n\tconst onCloseRevisions = () => {\n\t\tif ( onClose ) {\n\t\t\tonClose();\n\t\t}\n\t};\n\n\tconst restoreRevision = ( revision: any ) => {\n\t\tsetUserConfig( revision );\n\t\tsetIsLoadingRevisionWithUnsavedChanges( false );\n\t\tonCloseRevisions();\n\t};\n\n\tconst handleRevisionSelect = ( revision: any ) => {\n\t\tgoTo( `/revisions/${ revision.id }` );\n\t};\n\n\tconst currentlySelectedRevisionId =\n\t\t// @ts-expect-error: revision id is not present in the fallback (default object).\n\t\tcurrentlySelectedRevision?.id ?? revisions[ 0 ]?.id;\n\n\t// Only display load button if there is a revision to load,\n\t// and it is different from the current editor styles.\n\tconst isLoadButtonEnabled =\n\t\t!! currentlySelectedRevisionId &&\n\t\tcurrentlySelectedRevisionId !== 'unsaved' &&\n\t\t! selectedRevisionMatchesEditorStyles;\n\tconst hasRevisions = !! revisions.length;\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={\n\t\t\t\t\trevisionsCount\n\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t// translators: %d: number of revisions.\n\t\t\t\t\t\t\t\t__( 'Revisions (%d)' ),\n\t\t\t\t\t\t\t\trevisionsCount\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: __( 'Revisions' )\n\t\t\t\t}\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Click on previously saved styles to preview them. To restore a selected version to the editor, hit \"Apply.\" When you\\'re ready, use the Save button to save your changes.'\n\t\t\t\t) }\n\t\t\t\tonBack={ onCloseRevisions }\n\t\t\t/>\n\t\t\t{ ! hasRevisions && (\n\t\t\t\t<Spinner className=\"global-styles-ui-screen-revisions__loading\" />\n\t\t\t) }\n\t\t\t<RevisionsButtons\n\t\t\t\tonChange={ handleRevisionSelect }\n\t\t\t\tselectedRevisionId={ currentlySelectedRevisionId }\n\t\t\t\tuserRevisions={ revisions }\n\t\t\t\tcanApplyRevision={ isLoadButtonEnabled }\n\t\t\t\tonApplyRevision={ () =>\n\t\t\t\t\thasUnsavedChanges\n\t\t\t\t\t\t? setIsLoadingRevisionWithUnsavedChanges( true )\n\t\t\t\t\t\t: restoreRevision( currentlySelectedRevision )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ numPages > 1 && (\n\t\t\t\t<div className=\"global-styles-ui-screen-revisions__footer\">\n\t\t\t\t\t<Pagination\n\t\t\t\t\t\tclassName=\"global-styles-ui-screen-revisions__pagination\"\n\t\t\t\t\t\tcurrentPage={ currentPage }\n\t\t\t\t\t\tnumPages={ numPages }\n\t\t\t\t\t\tchangePage={ setCurrentPage }\n\t\t\t\t\t\ttotalItems={ revisionsCount }\n\t\t\t\t\t\tdisabled={ isLoading }\n\t\t\t\t\t\tlabel={ __( 'Global Styles pagination' ) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isLoadingRevisionWithUnsavedChanges && (\n\t\t\t\t<ConfirmDialog\n\t\t\t\t\tisOpen={ isLoadingRevisionWithUnsavedChanges }\n\t\t\t\t\tconfirmButtonText={ __( 'Apply' ) }\n\t\t\t\t\tonConfirm={ () =>\n\t\t\t\t\t\trestoreRevision( currentlySelectedRevision )\n\t\t\t\t\t}\n\t\t\t\t\tonCancel={ () =>\n\t\t\t\t\t\tsetIsLoadingRevisionWithUnsavedChanges( false )\n\t\t\t\t\t}\n\t\t\t\t\tsize=\"medium\"\n\t\t\t\t>\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Are you sure you want to apply this revision? Any unsaved changes will be lost.'\n\t\t\t\t\t) }\n\t\t\t\t</ConfirmDialog>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenRevisions;\n"],
+  "mappings": "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",
+  "names": ["useGlobalStylesRevisions", "RevisionsButtons", "Pagination", "ConfirmDialog"]
+}

package/build/screen-revisions/revisions-buttons.js

@@ -0,0 +1,198 @@
+"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);
+var revisions_buttons_exports = {};
+__export(revisions_buttons_exports, {
+  default: () => revisions_buttons_default
+});
+module.exports = __toCommonJS(revisions_buttons_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_date = require("@wordpress/date");
+var import_core_data = require("@wordpress/core-data");
+var import_data = require("@wordpress/data");
+var import_global_styles_engine = require("@wordpress/global-styles-engine");
+var import_keycodes = require("@wordpress/keycodes");
+const DAY_IN_MILLISECONDS = 60 * 60 * 1e3 * 24;
+function ChangesSummary({ revision, previousRevision }) {
+  const changes = (0, import_global_styles_engine.getGlobalStylesChanges)(
+    revision,
+    previousRevision,
+    {
+      maxResults: 7
+    }
+  );
+  if (!changes.length) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "ul",
+    {
+      "data-testid": "global-styles-revision-changes",
+      className: "global-styles-ui-screen-revisions__changes",
+      children: changes.map((change) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: change }, change))
+    }
+  );
+}
+function getRevisionLabel(id, authorDisplayName, formattedModifiedDate, areStylesEqual) {
+  if ("parent" === id) {
+    return (0, import_i18n.__)("Reset the styles to the theme defaults");
+  }
+  if ("unsaved" === id) {
+    return (0, import_i18n.sprintf)(
+      /* translators: %s: author display name */
+      (0, import_i18n.__)("Unsaved changes by %s"),
+      authorDisplayName
+    );
+  }
+  return areStylesEqual ? (0, import_i18n.sprintf)(
+    // translators: 1: author display name. 2: revision creation date.
+    (0, import_i18n.__)(
+      "Changes saved by %1$s on %2$s. This revision matches current editor styles."
+    ),
+    authorDisplayName,
+    formattedModifiedDate
+  ) : (0, import_i18n.sprintf)(
+    // translators: 1: author display name. 2: revision creation date.
+    (0, import_i18n.__)("Changes saved by %1$s on %2$s"),
+    authorDisplayName,
+    formattedModifiedDate
+  );
+}
+function RevisionsButtons({
+  userRevisions,
+  selectedRevisionId,
+  onChange,
+  canApplyRevision,
+  onApplyRevision
+}) {
+  const { currentThemeName, currentUser } = (0, import_data.useSelect)((select) => {
+    const { getCurrentTheme, getCurrentUser } = select(import_core_data.store);
+    const currentTheme = getCurrentTheme();
+    return {
+      currentThemeName: currentTheme?.name?.rendered || currentTheme?.stylesheet,
+      currentUser: getCurrentUser()
+    };
+  }, []);
+  const dateNowInMs = (0, import_date.getDate)(null).getTime();
+  const { datetimeAbbreviated } = (0, import_date.getSettings)().formats;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Composite,
+    {
+      orientation: "vertical",
+      className: "global-styles-ui-screen-revisions__revisions-list",
+      "aria-label": (0, import_i18n.__)("Global styles revisions list"),
+      role: "listbox",
+      children: userRevisions.map((revision, index) => {
+        const { id, author, modified } = revision;
+        const isUnsaved = "unsaved" === id;
+        const revisionAuthor = isUnsaved ? currentUser : author;
+        const authorDisplayName = revisionAuthor?.name || (0, import_i18n.__)("User");
+        const authorAvatar = revisionAuthor?.avatar_urls?.["48"];
+        const isFirstItem = index === 0;
+        const isSelected = selectedRevisionId ? selectedRevisionId === id : isFirstItem;
+        const areStylesEqual = !canApplyRevision && isSelected;
+        const isReset = "parent" === id;
+        const modifiedString = modified instanceof Date ? modified.toISOString() : modified;
+        const modifiedDate = (0, import_date.getDate)(modifiedString ?? null);
+        const displayDate = modifiedString && dateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS ? (0, import_date.dateI18n)(datetimeAbbreviated, modifiedDate) : (0, import_date.humanTimeDiff)(
+          modifiedString ?? modifiedDate,
+          void 0
+        );
+        const revisionLabel = getRevisionLabel(
+          id,
+          authorDisplayName,
+          (0, import_date.dateI18n)(datetimeAbbreviated, modifiedDate),
+          areStylesEqual
+        );
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_components.Composite.Item,
+          {
+            className: "global-styles-ui-screen-revisions__revision-item",
+            "aria-current": isSelected,
+            role: "option",
+            onKeyDown: (event) => {
+              const { keyCode } = event;
+              if (keyCode === import_keycodes.ENTER || keyCode === import_keycodes.SPACE) {
+                onChange(revision);
+              }
+            },
+            onClick: (event) => {
+              event.preventDefault();
+              onChange(revision);
+            },
+            "aria-selected": isSelected,
+            "aria-label": revisionLabel,
+            render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "global-styles-ui-screen-revisions__revision-item-wrapper", children: isReset ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "global-styles-ui-screen-revisions__description", children: [
+                (0, import_i18n.__)("Default styles"),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "global-styles-ui-screen-revisions__meta", children: currentThemeName })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "global-styles-ui-screen-revisions__description", children: [
+                isUnsaved ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "global-styles-ui-screen-revisions__date", children: (0, import_i18n.__)("(Unsaved)") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "time",
+                  {
+                    className: "global-styles-ui-screen-revisions__date",
+                    dateTime: modifiedString,
+                    children: displayDate
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "global-styles-ui-screen-revisions__meta", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "img",
+                    {
+                      alt: authorDisplayName,
+                      src: authorAvatar
+                    }
+                  ),
+                  authorDisplayName
+                ] }),
+                isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  ChangesSummary,
+                  {
+                    revision,
+                    previousRevision: index < userRevisions.length ? userRevisions[index + 1] : void 0
+                  }
+                )
+              ] }) }),
+              isSelected && (areStylesEqual ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "global-styles-ui-screen-revisions__applied-text", children: (0, import_i18n.__)(
+                "These styles are already applied to your site."
+              ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.Button,
+                {
+                  size: "compact",
+                  variant: "primary",
+                  className: "global-styles-ui-screen-revisions__apply-button",
+                  onClick: onApplyRevision,
+                  "aria-label": (0, import_i18n.__)(
+                    "Apply the selected revision to your site."
+                  ),
+                  children: isReset ? (0, import_i18n.__)("Reset to defaults") : (0, import_i18n.__)("Apply")
+                }
+              ))
+            ]
+          },
+          id
+        );
+      })
+    }
+  );
+}
+var revisions_buttons_default = RevisionsButtons;
+//# sourceMappingURL=revisions-buttons.js.map

package/build/screen-revisions/revisions-buttons.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/screen-revisions/revisions-buttons.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Button, Composite } from '@wordpress/components';\nimport { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { getGlobalStylesChanges } from '@wordpress/global-styles-engine';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport type { Revision } from './types';\n\nconst DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24;\n\ninterface ChangesSummaryProps {\n\trevision: Revision;\n\tpreviousRevision?: Revision;\n}\n\nfunction ChangesSummary( { revision, previousRevision }: ChangesSummaryProps ) {\n\tconst changes: string[] = getGlobalStylesChanges(\n\t\trevision,\n\t\tpreviousRevision,\n\t\t{\n\t\t\tmaxResults: 7,\n\t\t}\n\t);\n\n\tif ( ! changes.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ul\n\t\t\tdata-testid=\"global-styles-revision-changes\"\n\t\t\tclassName=\"global-styles-ui-screen-revisions__changes\"\n\t\t>\n\t\t\t{ changes.map( ( change ) => (\n\t\t\t\t<li key={ change }>{ change }</li>\n\t\t\t) ) }\n\t\t</ul>\n\t);\n}\n\n/**\n * Returns a button label for the revision.\n * @param id\n * @param authorDisplayName\n * @param formattedModifiedDate\n * @param areStylesEqual\n */\nfunction getRevisionLabel(\n\tid: string | number,\n\tauthorDisplayName: string,\n\tformattedModifiedDate: string,\n\tareStylesEqual: boolean\n): string {\n\tif ( 'parent' === id ) {\n\t\treturn __( 'Reset the styles to the theme defaults' );\n\t}\n\n\tif ( 'unsaved' === id ) {\n\t\treturn sprintf(\n\t\t\t/* translators: %s: author display name */\n\t\t\t__( 'Unsaved changes by %s' ),\n\t\t\tauthorDisplayName\n\t\t);\n\t}\n\n\treturn areStylesEqual\n\t\t? sprintf(\n\t\t\t\t// translators: 1: author display name. 2: revision creation date.\n\t\t\t\t__(\n\t\t\t\t\t'Changes saved by %1$s on %2$s. This revision matches current editor styles.'\n\t\t\t\t),\n\t\t\t\tauthorDisplayName,\n\t\t\t\tformattedModifiedDate\n\t\t  )\n\t\t: sprintf(\n\t\t\t\t// translators: 1: author display name. 2: revision creation date.\n\t\t\t\t__( 'Changes saved by %1$s on %2$s' ),\n\t\t\t\tauthorDisplayName,\n\t\t\t\tformattedModifiedDate\n\t\t  );\n}\n\ninterface RevisionButtonsProps {\n\tuserRevisions: Revision[];\n\tselectedRevisionId?: string | number;\n\tonChange: ( revision: Revision ) => void;\n\tcanApplyRevision?: boolean;\n\tonApplyRevision?: () => void;\n}\n\n/**\n * Returns a rendered list of revisions buttons.\n * @param root0\n * @param root0.userRevisions\n * @param root0.selectedRevisionId\n * @param root0.onChange\n * @param root0.canApplyRevision\n * @param root0.onApplyRevision\n */\nfunction RevisionsButtons( {\n\tuserRevisions,\n\tselectedRevisionId,\n\tonChange,\n\tcanApplyRevision,\n\tonApplyRevision,\n}: RevisionButtonsProps ) {\n\tconst { currentThemeName, currentUser } = useSelect( ( select ) => {\n\t\tconst { getCurrentTheme, getCurrentUser } = select( coreStore );\n\t\tconst currentTheme = getCurrentTheme();\n\t\treturn {\n\t\t\tcurrentThemeName:\n\t\t\t\tcurrentTheme?.name?.rendered || currentTheme?.stylesheet,\n\t\t\tcurrentUser: getCurrentUser(),\n\t\t};\n\t}, [] );\n\tconst dateNowInMs = getDate( null ).getTime();\n\tconst { datetimeAbbreviated } = getSettings().formats;\n\n\treturn (\n\t\t<Composite\n\t\t\torientation=\"vertical\"\n\t\t\tclassName=\"global-styles-ui-screen-revisions__revisions-list\"\n\t\t\taria-label={ __( 'Global styles revisions list' ) }\n\t\t\trole=\"listbox\"\n\t\t>\n\t\t\t{ userRevisions.map( ( revision, index ) => {\n\t\t\t\tconst { id, author, modified } = revision;\n\t\t\t\tconst isUnsaved = 'unsaved' === id;\n\t\t\t\t// Unsaved changes are created by the current user.\n\t\t\t\tconst revisionAuthor = isUnsaved ? currentUser : author;\n\t\t\t\tconst authorDisplayName = revisionAuthor?.name || __( 'User' );\n\t\t\t\tconst authorAvatar = revisionAuthor?.avatar_urls?.[ '48' ];\n\t\t\t\tconst isFirstItem = index === 0;\n\t\t\t\tconst isSelected = selectedRevisionId\n\t\t\t\t\t? selectedRevisionId === id\n\t\t\t\t\t: isFirstItem;\n\t\t\t\tconst areStylesEqual = ! canApplyRevision && isSelected;\n\t\t\t\tconst isReset = 'parent' === id;\n\t\t\t\t// Convert modified to string if it's a Date, for type compatibility\n\t\t\t\tconst modifiedString =\n\t\t\t\t\tmodified instanceof Date\n\t\t\t\t\t\t? modified.toISOString()\n\t\t\t\t\t\t: modified;\n\t\t\t\tconst modifiedDate = getDate( modifiedString ?? null );\n\t\t\t\tconst displayDate =\n\t\t\t\t\tmodifiedString &&\n\t\t\t\t\tdateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS\n\t\t\t\t\t\t? dateI18n( datetimeAbbreviated, modifiedDate )\n\t\t\t\t\t\t: humanTimeDiff(\n\t\t\t\t\t\t\t\tmodifiedString ?? modifiedDate,\n\t\t\t\t\t\t\t\tundefined\n\t\t\t\t\t\t  );\n\t\t\t\tconst revisionLabel = getRevisionLabel(\n\t\t\t\t\tid,\n\t\t\t\t\tauthorDisplayName,\n\t\t\t\t\tdateI18n( datetimeAbbreviated, modifiedDate ),\n\t\t\t\t\tareStylesEqual\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\tclassName=\"global-styles-ui-screen-revisions__revision-item\"\n\t\t\t\t\t\taria-current={ isSelected }\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\tconst { keyCode } = event;\n\t\t\t\t\t\t\tif ( keyCode === ENTER || keyCode === SPACE ) {\n\t\t\t\t\t\t\t\tonChange( revision );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tonChange( revision );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\taria-selected={ isSelected }\n\t\t\t\t\t\taria-label={ revisionLabel }\n\t\t\t\t\t\trender={ <div /> }\n\t\t\t\t\t>\n\t\t\t\t\t\t<span className=\"global-styles-ui-screen-revisions__revision-item-wrapper\">\n\t\t\t\t\t\t\t{ isReset ? (\n\t\t\t\t\t\t\t\t<span className=\"global-styles-ui-screen-revisions__description\">\n\t\t\t\t\t\t\t\t\t{ __( 'Default styles' ) }\n\t\t\t\t\t\t\t\t\t<span className=\"global-styles-ui-screen-revisions__meta\">\n\t\t\t\t\t\t\t\t\t\t{ currentThemeName }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span className=\"global-styles-ui-screen-revisions__description\">\n\t\t\t\t\t\t\t\t\t{ isUnsaved ? (\n\t\t\t\t\t\t\t\t\t\t<span className=\"global-styles-ui-screen-revisions__date\">\n\t\t\t\t\t\t\t\t\t\t\t{ __( '(Unsaved)' ) }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<time\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-screen-revisions__date\"\n\t\t\t\t\t\t\t\t\t\t\tdateTime={ modifiedString }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ displayDate }\n\t\t\t\t\t\t\t\t\t\t</time>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t<span className=\"global-styles-ui-screen-revisions__meta\">\n\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\talt={ authorDisplayName }\n\t\t\t\t\t\t\t\t\t\t\tsrc={ authorAvatar }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{ authorDisplayName }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{ isSelected && (\n\t\t\t\t\t\t\t\t\t\t<ChangesSummary\n\t\t\t\t\t\t\t\t\t\t\trevision={ revision }\n\t\t\t\t\t\t\t\t\t\t\tpreviousRevision={\n\t\t\t\t\t\t\t\t\t\t\t\tindex < userRevisions.length\n\t\t\t\t\t\t\t\t\t\t\t\t\t? userRevisions[ index + 1 ]\n\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{ isSelected &&\n\t\t\t\t\t\t\t( areStylesEqual ? (\n\t\t\t\t\t\t\t\t<p className=\"global-styles-ui-screen-revisions__applied-text\">\n\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t'These styles are already applied to your site.'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-screen-revisions__apply-button\"\n\t\t\t\t\t\t\t\t\tonClick={ onApplyRevision }\n\t\t\t\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t\t\t\t'Apply the selected revision to your site.'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ isReset\n\t\t\t\t\t\t\t\t\t\t? __( 'Reset to defaults' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Apply' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Composite.Item>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Composite>\n\t);\n}\n\nexport default RevisionsButtons;\n"],
+  "mappings": "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",
+  "names": ["coreStore"]
+}

package/build/screen-revisions/types.js

@@ -0,0 +1,17 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

package/build/screen-revisions/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/screen-revisions/types.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\nexport interface User {\n\tid: number;\n\tname: string;\n\tavatar_urls: Record< string, string >;\n}\n\nexport interface Revision extends GlobalStylesConfig {\n\tid: string | number;\n\tauthor?: User;\n\tmodified?: string | Date;\n\tisLatest?: boolean;\n\t_links?: any;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}