@wordpress/commands 0.2.0

package/build-module/store/reducer.js

@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+import { combineReducers } from '@wordpress/data';
+/**
+ * Reducer returning the registered commands
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+
+function commands() {
+  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let action = arguments.length > 1 ? arguments[1] : undefined;
+
+  switch (action.type) {
+    case 'REGISTER_COMMAND':
+      return { ...state,
+        [action.group]: { ...state[action.group],
+          [action.name]: {
+            name: action.name,
+            label: action.label,
+            group: action.group,
+            callback: action.callback
+          }
+        }
+      };
+
+    case 'UNREGISTER_COMMAND':
+      {
+        const {
+          [action.name]: _,
+          ...remainingState
+        } = state === null || state === void 0 ? void 0 : state[action.group];
+        return { ...state,
+          [action.group]: remainingState
+        };
+      }
+  }
+
+  return state;
+}
+/**
+ * Reducer returning the command loaders
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+
+
+function commandLoaders() {
+  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let action = arguments.length > 1 ? arguments[1] : undefined;
+
+  switch (action.type) {
+    case 'REGISTER_COMMAND_LOADER':
+      return { ...state,
+        [action.group]: { ...state[action.group],
+          [action.name]: {
+            name: action.name,
+            hook: action.hook
+          }
+        }
+      };
+
+    case 'UNREGISTER_COMMAND_LOADER':
+      {
+        const {
+          [action.name]: _,
+          ...remainingState
+        } = state === null || state === void 0 ? void 0 : state[action.group];
+        return { ...state,
+          [action.group]: remainingState
+        };
+      }
+  }
+
+  return state;
+}
+
+const reducer = combineReducers({
+  commands,
+  commandLoaders
+});
+export default reducer;
+//# sourceMappingURL=reducer.js.map

package/build-module/store/reducer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/commands/src/store/reducer.js"],"names":["combineReducers","commands","state","action","type","group","name","label","callback","_","remainingState","commandLoaders","hook","reducer"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,eAAT,QAAgC,iBAAhC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,QAAT,GAAwC;AAAA,MAArBC,KAAqB,uEAAb,EAAa;AAAA,MAATC,MAAS;;AACvC,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,kBAAL;AACC,aAAO,EACN,GAAGF,KADG;AAEN,SAAEC,MAAM,CAACE,KAAT,GAAkB,EACjB,GAAGH,KAAK,CAAEC,MAAM,CAACE,KAAT,CADS;AAEjB,WAAEF,MAAM,CAACG,IAAT,GAAiB;AAChBA,YAAAA,IAAI,EAAEH,MAAM,CAACG,IADG;AAEhBC,YAAAA,KAAK,EAAEJ,MAAM,CAACI,KAFE;AAGhBF,YAAAA,KAAK,EAAEF,MAAM,CAACE,KAHE;AAIhBG,YAAAA,QAAQ,EAAEL,MAAM,CAACK;AAJD;AAFA;AAFZ,OAAP;;AAYD,SAAK,oBAAL;AAA2B;AAC1B,cAAM;AAAE,WAAEL,MAAM,CAACG,IAAT,GAAiBG,CAAnB;AAAsB,aAAGC;AAAzB,YACLR,KADK,aACLA,KADK,uBACLA,KAAK,CAAIC,MAAM,CAACE,KAAX,CADN;AAEA,eAAO,EACN,GAAGH,KADG;AAEN,WAAEC,MAAM,CAACE,KAAT,GAAkBK;AAFZ,SAAP;AAIA;AArBF;;AAwBA,SAAOR,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASS,cAAT,GAA8C;AAAA,MAArBT,KAAqB,uEAAb,EAAa;AAAA,MAATC,MAAS;;AAC7C,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,yBAAL;AACC,aAAO,EACN,GAAGF,KADG;AAEN,SAAEC,MAAM,CAACE,KAAT,GAAkB,EACjB,GAAGH,KAAK,CAAEC,MAAM,CAACE,KAAT,CADS;AAEjB,WAAEF,MAAM,CAACG,IAAT,GAAiB;AAChBA,YAAAA,IAAI,EAAEH,MAAM,CAACG,IADG;AAEhBM,YAAAA,IAAI,EAAET,MAAM,CAACS;AAFG;AAFA;AAFZ,OAAP;;AAUD,SAAK,2BAAL;AAAkC;AACjC,cAAM;AAAE,WAAET,MAAM,CAACG,IAAT,GAAiBG,CAAnB;AAAsB,aAAGC;AAAzB,YACLR,KADK,aACLA,KADK,uBACLA,KAAK,CAAIC,MAAM,CAACE,KAAX,CADN;AAEA,eAAO,EACN,GAAGH,KADG;AAEN,WAAEC,MAAM,CAACE,KAAT,GAAkBK;AAFZ,SAAP;AAIA;AAnBF;;AAsBA,SAAOR,KAAP;AACA;;AAED,MAAMW,OAAO,GAAGb,eAAe,CAAE;AAChCC,EAAAA,QADgC;AAEhCU,EAAAA;AAFgC,CAAF,CAA/B;AAKA,eAAeE,OAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { combineReducers } from '@wordpress/data';\n\n/**\n * Reducer returning the registered commands\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commands( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: {\n\t\t\t\t\t...state[ action.group ],\n\t\t\t\t\t[ action.name ]: {\n\t\t\t\t\t\tname: action.name,\n\t\t\t\t\t\tlabel: action.label,\n\t\t\t\t\t\tgroup: action.group,\n\t\t\t\t\t\tcallback: action.callback,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } =\n\t\t\t\tstate?.[ action.group ];\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: remainingState,\n\t\t\t};\n\t\t}\n\t}\n\n\treturn state;\n}\n\n/**\n * Reducer returning the command loaders\n *\n * @param {Object} state  Current state.\n * @param {Object} action Dispatched action.\n *\n * @return {Object} Updated state.\n */\nfunction commandLoaders( state = {}, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'REGISTER_COMMAND_LOADER':\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: {\n\t\t\t\t\t...state[ action.group ],\n\t\t\t\t\t[ action.name ]: {\n\t\t\t\t\t\tname: action.name,\n\t\t\t\t\t\thook: action.hook,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t};\n\t\tcase 'UNREGISTER_COMMAND_LOADER': {\n\t\t\tconst { [ action.name ]: _, ...remainingState } =\n\t\t\t\tstate?.[ action.group ];\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\t[ action.group ]: remainingState,\n\t\t\t};\n\t\t}\n\t}\n\n\treturn state;\n}\n\nconst reducer = combineReducers( {\n\tcommands,\n\tcommandLoaders,\n} );\n\nexport default reducer;\n"]}

package/build-module/store/selectors.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import createSelector from 'rememo';
+
+function unique(array) {
+  return array.filter((value, index, current) => current.indexOf(value) === index);
+}
+
+export const getGroups = createSelector(state => unique(Object.keys(state.commands).concat(Object.keys(state.commandLoaders))), state => [state.commands, state.commandLoaders]);
+export const getCommands = createSelector((state, group) => {
+  var _state$commands$group;
+
+  return Object.values((_state$commands$group = state.commands[group]) !== null && _state$commands$group !== void 0 ? _state$commands$group : {});
+}, (state, group) => [state.commands[group]]);
+export const getCommandLoaders = createSelector((state, group) => {
+  var _state$commandLoaders;
+
+  return Object.values((_state$commandLoaders = state.commandLoaders[group]) !== null && _state$commandLoaders !== void 0 ? _state$commandLoaders : {});
+}, (state, group) => [state.commandLoaders[group]]);
+//# sourceMappingURL=selectors.js.map

package/build-module/store/selectors.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/commands/src/store/selectors.js"],"names":["createSelector","unique","array","filter","value","index","current","indexOf","getGroups","state","Object","keys","commands","concat","commandLoaders","getCommands","group","values","getCommandLoaders"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,cAAP,MAA2B,QAA3B;;AAEA,SAASC,MAAT,CAAiBC,KAAjB,EAAyB;AACxB,SAAOA,KAAK,CAACC,MAAN,CACN,CAAEC,KAAF,EAASC,KAAT,EAAgBC,OAAhB,KAA6BA,OAAO,CAACC,OAAR,CAAiBH,KAAjB,MAA6BC,KADpD,CAAP;AAGA;;AAED,OAAO,MAAMG,SAAS,GAAGR,cAAc,CACpCS,KAAF,IACCR,MAAM,CACLS,MAAM,CAACC,IAAP,CAAaF,KAAK,CAACG,QAAnB,EAA8BC,MAA9B,CACCH,MAAM,CAACC,IAAP,CAAaF,KAAK,CAACK,cAAnB,CADD,CADK,CAF+B,EAOpCL,KAAF,IAAa,CAAEA,KAAK,CAACG,QAAR,EAAkBH,KAAK,CAACK,cAAxB,CAPyB,CAAhC;AASP,OAAO,MAAMC,WAAW,GAAGf,cAAc,CACxC,CAAES,KAAF,EAASO,KAAT;AAAA;;AAAA,SAAoBN,MAAM,CAACO,MAAP,0BAAeR,KAAK,CAACG,QAAN,CAAgBI,KAAhB,CAAf,yEAA0C,EAA1C,CAApB;AAAA,CADwC,EAExC,CAAEP,KAAF,EAASO,KAAT,KAAoB,CAAEP,KAAK,CAACG,QAAN,CAAgBI,KAAhB,CAAF,CAFoB,CAAlC;AAKP,OAAO,MAAME,iBAAiB,GAAGlB,cAAc,CAC9C,CAAES,KAAF,EAASO,KAAT;AAAA;;AAAA,SAAoBN,MAAM,CAACO,MAAP,0BAAeR,KAAK,CAACK,cAAN,CAAsBE,KAAtB,CAAf,yEAAgD,EAAhD,CAApB;AAAA,CAD8C,EAE9C,CAAEP,KAAF,EAASO,KAAT,KAAoB,CAAEP,KAAK,CAACK,cAAN,CAAsBE,KAAtB,CAAF,CAF0B,CAAxC","sourcesContent":["/**\n * External dependencies\n */\nimport createSelector from 'rememo';\n\nfunction unique( array ) {\n\treturn array.filter(\n\t\t( value, index, current ) => current.indexOf( value ) === index\n\t);\n}\n\nexport const getGroups = createSelector(\n\t( state ) =>\n\t\tunique(\n\t\t\tObject.keys( state.commands ).concat(\n\t\t\t\tObject.keys( state.commandLoaders )\n\t\t\t)\n\t\t),\n\t( state ) => [ state.commands, state.commandLoaders ]\n);\nexport const getCommands = createSelector(\n\t( state, group ) => Object.values( state.commands[ group ] ?? {} ),\n\t( state, group ) => [ state.commands[ group ] ]\n);\n\nexport const getCommandLoaders = createSelector(\n\t( state, group ) => Object.values( state.commandLoaders[ group ] ?? {} ),\n\t( state, group ) => [ state.commandLoaders[ group ] ]\n);\n"]}

package/build-style/style-rtl.css

@@ -0,0 +1,264 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Shadows.
+ */
+/**
+ * Editor widths.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+:root {
+  --wp-admin-theme-color: #007cba;
+  --wp-admin-theme-color--rgb: 0, 124, 186;
+  --wp-admin-theme-color-darker-10: #006ba1;
+  --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
+  --wp-admin-theme-color-darker-20: #005a87;
+  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
+  --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  :root {
+    --wp-admin-border-width-focus: 1.5px;
+  }
+}
+
+.commands-command-menu {
+  padding: 0;
+  width: 100%;
+  max-width: 680px;
+  position: relative;
+  top: 15%;
+}
+.commands-command-menu .components-modal__content {
+  margin: 0;
+  padding: 0;
+}
+
+.commands-command-menu__overlay {
+  display: block;
+  align-items: start;
+}
+
+.commands-command-menu__header {
+  display: flex;
+  align-items: center;
+  margin: 12px 12px 0 12px;
+}
+.commands-command-menu__header .components-button {
+  height: 56px;
+  width: 56px;
+  border: 1px solid #949494;
+  border-left: 0;
+  justify-content: center;
+  border-radius: 0 2px 2px 0;
+}
+.commands-command-menu__header .components-button + [cmdk-input] {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.commands-command-menu__container [cmdk-linear-badge] {
+  height: 24px;
+  padding: 0 8px;
+  font-size: 12px;
+  color: #2f2f2f;
+  background: #ddd;
+  border-radius: 4px;
+  width: -moz-fit-content;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  margin: 16px 16px 0;
+}
+.commands-command-menu__container [cmdk-linear-shortcuts] {
+  display: flex;
+  margin-right: auto;
+  gap: 8px;
+}
+.commands-command-menu__container [cmdk-linear-shortcuts] kbd {
+  color: #2f2f2f;
+}
+.commands-command-menu__container [cmdk-input] {
+  border: 1px solid #949494;
+  width: 100%;
+  padding: 12px 16px;
+  min-height: 56px;
+  outline: none;
+  color: #1e1e1e;
+  margin: 0;
+  border-radius: 2px;
+}
+.commands-command-menu__container [cmdk-input]::placeholder {
+  color: #949494;
+}
+.commands-command-menu__container [cmdk-input]:focus {
+  outline: 2px solid transparent;
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+}
+.commands-command-menu__container [cmdk-item] {
+  content-visibility: auto;
+  border-radius: 2px;
+  cursor: pointer;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 16px;
+  color: #1e1e1e;
+  -webkit-user-select: none;
+          user-select: none;
+  will-change: background, color;
+  transition: all 150ms ease;
+  transition-property: none;
+  position: relative;
+}
+.commands-command-menu__container [cmdk-item][aria-selected=true] {
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+  color: var(--wp-admin-theme-color);
+}
+.commands-command-menu__container [cmdk-item][aria-selected=true] svg {
+  color: var(--wp-admin-theme-color);
+}
+.commands-command-menu__container [cmdk-item][aria-disabled=true] {
+  color: #949494;
+  cursor: not-allowed;
+}
+.commands-command-menu__container [cmdk-item]:active {
+  transition-property: background;
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+}
+.commands-command-menu__container [cmdk-item] + [cmdk-item] {
+  margin-top: 4px;
+}
+.commands-command-menu__container [cmdk-item] svg,
+.commands-command-menu__container [cmdk-item] .dashicon {
+  width: 16px;
+  height: 16px;
+  color: #2f2f2f;
+}
+.commands-command-menu__container [cmdk-root] > [cmdk-list] {
+  min-height: 300px;
+  max-height: 400px;
+  overflow: auto;
+  overscroll-behavior: contain;
+  transition: 100ms ease;
+  transition-property: height;
+  margin: 12px;
+}
+.commands-command-menu__container [cmdk-group-heading] {
+  -webkit-user-select: none;
+          user-select: none;
+  color: #757575;
+  padding: 24px 16px 16px;
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  position: sticky;
+  top: 0;
+  background: #fff;
+  z-index: 1;
+}
+.commands-command-menu__container [cmdk-empty] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 64px;
+  white-space: pre-wrap;
+  color: #2f2f2f;
+}
+.commands-command-menu__container [cmdk-loading] {
+  padding: 16px;
+}
+.commands-command-menu__container [cmdk-list-sizer] {
+  position: relative;
+}
+
+.commands-command-menu__item mark {
+  color: inherit;
+  background: unset;
+  font-weight: 600;
+}

package/build-style/style.css

@@ -0,0 +1,264 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Shadows.
+ */
+/**
+ * Editor widths.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+:root {
+  --wp-admin-theme-color: #007cba;
+  --wp-admin-theme-color--rgb: 0, 124, 186;
+  --wp-admin-theme-color-darker-10: #006ba1;
+  --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
+  --wp-admin-theme-color-darker-20: #005a87;
+  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
+  --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  :root {
+    --wp-admin-border-width-focus: 1.5px;
+  }
+}
+
+.commands-command-menu {
+  padding: 0;
+  width: 100%;
+  max-width: 680px;
+  position: relative;
+  top: 15%;
+}
+.commands-command-menu .components-modal__content {
+  margin: 0;
+  padding: 0;
+}
+
+.commands-command-menu__overlay {
+  display: block;
+  align-items: start;
+}
+
+.commands-command-menu__header {
+  display: flex;
+  align-items: center;
+  margin: 12px 12px 0 12px;
+}
+.commands-command-menu__header .components-button {
+  height: 56px;
+  width: 56px;
+  border: 1px solid #949494;
+  border-right: 0;
+  justify-content: center;
+  border-radius: 2px 0 0 2px;
+}
+.commands-command-menu__header .components-button + [cmdk-input] {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.commands-command-menu__container [cmdk-linear-badge] {
+  height: 24px;
+  padding: 0 8px;
+  font-size: 12px;
+  color: #2f2f2f;
+  background: #ddd;
+  border-radius: 4px;
+  width: -moz-fit-content;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  margin: 16px 16px 0;
+}
+.commands-command-menu__container [cmdk-linear-shortcuts] {
+  display: flex;
+  margin-left: auto;
+  gap: 8px;
+}
+.commands-command-menu__container [cmdk-linear-shortcuts] kbd {
+  color: #2f2f2f;
+}
+.commands-command-menu__container [cmdk-input] {
+  border: 1px solid #949494;
+  width: 100%;
+  padding: 12px 16px;
+  min-height: 56px;
+  outline: none;
+  color: #1e1e1e;
+  margin: 0;
+  border-radius: 2px;
+}
+.commands-command-menu__container [cmdk-input]::placeholder {
+  color: #949494;
+}
+.commands-command-menu__container [cmdk-input]:focus {
+  outline: 2px solid transparent;
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+}
+.commands-command-menu__container [cmdk-item] {
+  content-visibility: auto;
+  border-radius: 2px;
+  cursor: pointer;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 16px;
+  color: #1e1e1e;
+  -webkit-user-select: none;
+          user-select: none;
+  will-change: background, color;
+  transition: all 150ms ease;
+  transition-property: none;
+  position: relative;
+}
+.commands-command-menu__container [cmdk-item][aria-selected=true] {
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+  color: var(--wp-admin-theme-color);
+}
+.commands-command-menu__container [cmdk-item][aria-selected=true] svg {
+  color: var(--wp-admin-theme-color);
+}
+.commands-command-menu__container [cmdk-item][aria-disabled=true] {
+  color: #949494;
+  cursor: not-allowed;
+}
+.commands-command-menu__container [cmdk-item]:active {
+  transition-property: background;
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+}
+.commands-command-menu__container [cmdk-item] + [cmdk-item] {
+  margin-top: 4px;
+}
+.commands-command-menu__container [cmdk-item] svg,
+.commands-command-menu__container [cmdk-item] .dashicon {
+  width: 16px;
+  height: 16px;
+  color: #2f2f2f;
+}
+.commands-command-menu__container [cmdk-root] > [cmdk-list] {
+  min-height: 300px;
+  max-height: 400px;
+  overflow: auto;
+  overscroll-behavior: contain;
+  transition: 100ms ease;
+  transition-property: height;
+  margin: 12px;
+}
+.commands-command-menu__container [cmdk-group-heading] {
+  -webkit-user-select: none;
+          user-select: none;
+  color: #757575;
+  padding: 24px 16px 16px;
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  position: sticky;
+  top: 0;
+  background: #fff;
+  z-index: 1;
+}
+.commands-command-menu__container [cmdk-empty] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 64px;
+  white-space: pre-wrap;
+  color: #2f2f2f;
+}
+.commands-command-menu__container [cmdk-loading] {
+  padding: 16px;
+}
+.commands-command-menu__container [cmdk-list-sizer] {
+  position: relative;
+}
+
+.commands-command-menu__item mark {
+  color: inherit;
+  background: unset;
+  font-weight: 600;
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+	"name": "@wordpress/commands",
+	"version": "0.2.0",
+	"description": "Handles the commands menu.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"commands",
+		"k"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/commands/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/commands"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=12"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"dependencies": {
+		"@babel/runtime": "^7.16.0",
+		"@wordpress/components": "^23.8.0",
+		"@wordpress/data": "^9.1.0",
+		"@wordpress/element": "^5.8.0",
+		"@wordpress/i18n": "^4.31.0",
+		"@wordpress/icons": "^9.22.0",
+		"@wordpress/keyboard-shortcuts": "^4.8.0",
+		"@wordpress/private-apis": "^0.13.0",
+		"cmdk": "^0.2.0",
+		"rememo": "^4.0.0"
+	},
+	"peerDependencies": {
+		"react": "^18.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"gitHead": "d61700b9f1c72ba0b030fc815ef1685b4f4031ec"
+}