@dxos/keyboard 0.3.10-main.08c6b67

package/LICENSE

@@ -0,0 +1,8 @@
+MIT License 
+Copyright (c) 2022 DXOS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+## React Async
+
+### Configuration
+
+Add the following to `package.json`.
+
+```json
+  "toolchain": {
+    "forceCloseTests": true,
+    "jsdom": true,
+    "testingFramework": "mocha"
+  }
+```
+
+The `react-dom/test-utils` requires the `raf` (RequestAnimationFrame) polyfill to run headless.
+
+```ts
+import 'raf/polyfill';
+import { act } from 'react-dom/test-utils';
+```
+
+### Next
+
+Evaluate the following:
+
+- https://www.npmjs.com/package/react-async-hook (popular)
+- https://www.npmjs.com/package/use-enhanced-state
+- https://www.npmjs.com/package/react-hooks-lib

package/dist/lib/browser/index.mjs

@@ -0,0 +1,166 @@
+import "@dxos/node-std/globals";
+
+// inject-globals:@inject-globals
+import {
+  global,
+  Buffer,
+  process
+} from "@dxos/node-std/inject-globals";
+
+// packages/common/keyboard/src/keyboard.ts
+import { invariant } from "@dxos/invariant";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/common/keyboard/src/keyboard.ts";
+var modifiers = [
+  "alt",
+  "ctrl",
+  "shift",
+  "meta"
+];
+var KeyboardContext = class {
+  constructor() {
+    this._keyMap = /* @__PURE__ */ new Map();
+  }
+  get bindings() {
+    return Array.from(this._keyMap.values());
+  }
+  get(binding) {
+    return this._keyMap.get(binding);
+  }
+  bind(config) {
+    const { binding } = config;
+    const parts = binding.split("+");
+    const mods = modifiers.filter((key) => parts.includes(key));
+    invariant(mods.length === 0 || mods.length === parts.length - 1, void 0, {
+      F: __dxlog_file,
+      L: 40,
+      S: this,
+      A: [
+        "mods.length === 0 || mods.length === parts.length - 1",
+        ""
+      ]
+    });
+    if (mods.length) {
+      config.binding = [
+        ...mods,
+        parts[parts.length - 1]
+      ].join("+");
+    }
+    this._keyMap.set(config.binding, config);
+  }
+  unbind(binding) {
+    this._keyMap.delete(binding);
+  }
+};
+var ROOT = "";
+var Keyboard = class _Keyboard {
+  constructor() {
+    this._root = new KeyboardContext();
+    this._keyMap = /* @__PURE__ */ new Map([
+      [
+        ROOT,
+        this._root
+      ]
+    ]);
+    this._contexts = [
+      ROOT
+    ];
+    this._keyHandler = this.handleKeyDown.bind(this);
+    this._path = ROOT;
+    this.bind = this._root.bind.bind(this._root);
+    this.unbind = this._root.unbind.bind(this._root);
+  }
+  static {
+    this.singleton = new _Keyboard();
+  }
+  initialize() {
+    document.addEventListener("keydown", this._keyHandler);
+  }
+  destroy() {
+    document.removeEventListener("keydown", this._keyHandler);
+  }
+  setCurrentContext(path = ROOT) {
+    this._path = path;
+  }
+  getCurrentContext() {
+    return this._path;
+  }
+  getContext(path = ROOT) {
+    let context = this._keyMap.get(path);
+    if (!context) {
+      context = new KeyboardContext();
+      this._keyMap.set(path, context);
+      this._contexts.push(path);
+      this._contexts.sort();
+    }
+    return context;
+  }
+  getBindings() {
+    const bindings = /* @__PURE__ */ new Map();
+    for (let i = 0; i < this._contexts.length; ++i) {
+      const path = this._contexts[i];
+      if (this._path.startsWith(path)) {
+        this.getContext(path).bindings.forEach((binding) => {
+          bindings.set(binding.binding, binding);
+        });
+      }
+    }
+    return Array.from(bindings.values());
+  }
+  handleKeyDown(event) {
+    const { altKey, ctrlKey, metaKey, shiftKey, key } = event;
+    if (key !== "Alt" && key !== "Control" && key !== "Meta" && key !== "Shift") {
+      const tagName = event.target?.tagName;
+      const isInput = tagName === "INPUT" || tagName === "TEXTAREA" || event.target?.getAttribute("contenteditable");
+      const str = [
+        altKey && "alt",
+        ctrlKey && "ctrl",
+        shiftKey && "shift",
+        metaKey && "meta",
+        key
+      ].filter(Boolean).join("+");
+      for (let i = this._contexts.length - 1; i >= 0; --i) {
+        const path = this._contexts[i];
+        if (this._path.startsWith(path)) {
+          const { data, handler, disableInput } = this.getContext(path).get(str) ?? {};
+          if (handler && (!isInput || !disableInput)) {
+            const result = handler({
+              context: path,
+              binding: str,
+              data,
+              event
+            });
+            if (result !== false) {
+              event.preventDefault();
+              event.stopPropagation();
+            }
+            return;
+          }
+        }
+      }
+    }
+  }
+};
+
+// packages/common/keyboard/src/util.ts
+var symbols = {
+  // Mods.
+  ctrl: "\u2303",
+  shift: "\u21E7",
+  alt: "\u2325",
+  meta: "\u2318",
+  // Special keys.
+  Backspace: "\u232B",
+  Enter: "\u23CE",
+  Escape: "\u238B",
+  Space: "\u2423",
+  Tab: "\u21E5"
+};
+var keySymbols = (keyBinding) => {
+  const parts = keyBinding.split("+");
+  return parts.map((part) => symbols[part] ?? part.toUpperCase());
+};
+export {
+  Keyboard,
+  keySymbols
+};
+//# sourceMappingURL=index.mjs.map

package/dist/lib/browser/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/keyboard.ts", "../../../src/util.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { invariant } from '@dxos/invariant';\n\nexport type KeyHandler = (props: {\n  context: string;\n  binding: string;\n  data?: any;\n  event: KeyboardEvent;\n}) => boolean | void;\n\nexport type KeyBinding = {\n  binding: string;\n  handler: KeyHandler;\n  disableInput?: boolean;\n  data?: any;\n};\n\n// Keybinding is normalized to this order.\nconst modifiers = ['alt', 'ctrl', 'shift', 'meta'];\n\nclass KeyboardContext {\n  readonly _keyMap = new Map<string, KeyBinding>();\n\n  get bindings() {\n    return Array.from(this._keyMap.values());\n  }\n\n  get(binding: string) {\n    return this._keyMap.get(binding);\n  }\n\n  bind(config: KeyBinding) {\n    // Normalize order of modifiers.\n    const { binding } = config;\n    const parts = binding.split('+');\n    const mods = modifiers.filter((key) => parts.includes(key));\n    invariant(mods.length === 0 || mods.length === parts.length - 1);\n    if (mods.length) {\n      config.binding = [...mods, parts[parts.length - 1]].join('+');\n    }\n\n    this._keyMap.set(config.binding, config);\n  }\n\n  unbind(binding: string) {\n    this._keyMap.delete(binding);\n  }\n}\n\nconst ROOT = '';\n\n/**\n * Manages context-aware key bindings.\n */\nexport class Keyboard {\n  static singleton = new Keyboard();\n\n  private readonly _root = new KeyboardContext();\n  private readonly _keyMap = new Map<string, KeyboardContext>([[ROOT, this._root]]);\n  private readonly _contexts: string[] = [ROOT];\n  private readonly _keyHandler = this.handleKeyDown.bind(this);\n  private _path = ROOT;\n\n  initialize() {\n    document.addEventListener('keydown', this._keyHandler);\n  }\n\n  destroy() {\n    document.removeEventListener('keydown', this._keyHandler);\n  }\n\n  bind = this._root.bind.bind(this._root);\n  unbind = this._root.unbind.bind(this._root);\n\n  setCurrentContext(path = ROOT) {\n    this._path = path;\n  }\n\n  getCurrentContext() {\n    return this._path;\n  }\n\n  getContext(path = ROOT): KeyboardContext {\n    let context = this._keyMap.get(path);\n    if (!context) {\n      context = new KeyboardContext();\n      this._keyMap.set(path, context);\n      this._contexts.push(path);\n      this._contexts.sort();\n    }\n\n    return context;\n  }\n\n  getBindings() {\n    const bindings = new Map<string, KeyBinding>();\n    for (let i = 0; i < this._contexts.length; ++i) {\n      const path = this._contexts[i];\n      if (this._path.startsWith(path)) {\n        this.getContext(path).bindings.forEach((binding) => {\n          bindings.set(binding.binding, binding);\n        });\n      }\n    }\n\n    return Array.from(bindings.values());\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const { altKey, ctrlKey, metaKey, shiftKey, key } = event;\n\n    if (key !== 'Alt' && key !== 'Control' && key !== 'Meta' && key !== 'Shift') {\n      // Binding option to check for input or contenteditable.\n      const tagName = (event.target as any)?.tagName;\n      const isInput =\n        tagName === 'INPUT' || tagName === 'TEXTAREA' || (event.target as any)?.getAttribute('contenteditable');\n\n      // Normalized key binding.\n      const str = [altKey && 'alt', ctrlKey && 'ctrl', shiftKey && 'shift', metaKey && 'meta', key]\n        .filter(Boolean)\n        .join('+');\n\n      // Scan matching contexts.\n      for (let i = this._contexts.length - 1; i >= 0; --i) {\n        const path = this._contexts[i];\n        if (this._path.startsWith(path)) {\n          const { data, handler, disableInput } = this.getContext(path).get(str) ?? {};\n          if (handler && (!isInput || !disableInput)) {\n            const result = handler({ context: path, binding: str, data, event });\n            if (result !== false) {\n              // TODO(burdon): This doesn't prevent actions in markdown editor.\n              //  Reference: https://codemirror.net/docs/ref/#view.KeyBinding\n              event.preventDefault();\n              event.stopPropagation();\n            }\n\n            return;\n          }\n        }\n      }\n    }\n  }\n}\n", "//\n// Copyright 2023 DXOS.org\n//\n\n// https://www.w3.org/TR/DOM-Level-3-Events/#events-keyboardevents\n// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key\n// https://support.apple.com/en-us/HT201236\n// https://support.apple.com/guide/mac-help/what-are-those-symbols-shown-in-menus-cpmh0011/mac\n\n// TODO(burdon): Show Mac/Windows/Linux variants.\nconst symbols: Record<string, string> = {\n  // Mods.\n  ctrl: '⌃',\n  shift: '⇧',\n  alt: '⌥',\n  meta: '⌘',\n\n  // Special keys.\n  Backspace: '⌫',\n  Enter: '⏎',\n  Escape: '⎋',\n  Space: '␣',\n  Tab: '⇥',\n};\n\nexport const keySymbols = (keyBinding: string): string[] => {\n  const parts = keyBinding.split('+');\n  return parts.map((part) => symbols[part] ?? part.toUpperCase());\n};\n"],
+  "mappings": "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",
+  "names": ["invariant", "modifiers", "KeyboardContext", "_keyMap", "Map", "bindings", "Array", "from", "values", "get", "binding", "bind", "config", "parts", "split", "mods", "filter", "key", "includes", "length", "join", "set", "unbind", "delete", "ROOT", "Keyboard", "_root", "_contexts", "_keyHandler", "handleKeyDown", "_path", "singleton", "initialize", "document", "addEventListener", "destroy", "removeEventListener", "setCurrentContext", "path", "getCurrentContext", "getContext", "context", "push", "sort", "getBindings", "i", "startsWith", "forEach", "event", "altKey", "ctrlKey", "metaKey", "shiftKey", "tagName", "target", "isInput", "getAttribute", "str", "Boolean", "data", "handler", "disableInput", "result", "preventDefault", "stopPropagation", "symbols", "ctrl", "shift", "alt", "meta", "Backspace", "Enter", "Escape", "Space", "Tab", "keySymbols", "keyBinding", "parts", "split", "map", "part", "toUpperCase"]
+}

package/dist/lib/browser/meta.json

@@ -0,0 +1 @@
+{"inputs":{"inject-globals:@inject-globals":{"bytes":384,"imports":[{"path":"@dxos/node-std/inject-globals","kind":"import-statement","external":true}],"format":"esm"},"packages/common/keyboard/src/keyboard.ts":{"bytes":15101,"imports":[{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@inject-globals","kind":"import-statement","external":true}],"format":"esm"},"packages/common/keyboard/src/util.ts":{"bytes":2733,"imports":[{"path":"@inject-globals","kind":"import-statement","external":true}],"format":"esm"},"packages/common/keyboard/src/index.ts":{"bytes":544,"imports":[{"path":"packages/common/keyboard/src/keyboard.ts","kind":"import-statement","original":"./keyboard"},{"path":"packages/common/keyboard/src/util.ts","kind":"import-statement","original":"./util"},{"path":"@inject-globals","kind":"import-statement","external":true}],"format":"esm"}},"outputs":{"packages/common/keyboard/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":8722},"packages/common/keyboard/dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/node-std/inject-globals","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true}],"exports":["Keyboard","keySymbols"],"entryPoint":"packages/common/keyboard/src/index.ts","inputs":{"inject-globals:@inject-globals":{"bytesInOutput":79},"packages/common/keyboard/src/keyboard.ts":{"bytesInOutput":3582},"packages/common/keyboard/src/index.ts":{"bytesInOutput":0},"packages/common/keyboard/src/util.ts":{"bytesInOutput":362}},"bytes":4249}}}

package/dist/lib/node/index.cjs

@@ -0,0 +1,179 @@
+"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 node_exports = {};
+__export(node_exports, {
+  Keyboard: () => Keyboard,
+  keySymbols: () => keySymbols
+});
+module.exports = __toCommonJS(node_exports);
+var import_invariant = require("@dxos/invariant");
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/common/keyboard/src/keyboard.ts";
+var modifiers = [
+  "alt",
+  "ctrl",
+  "shift",
+  "meta"
+];
+var KeyboardContext = class {
+  constructor() {
+    this._keyMap = /* @__PURE__ */ new Map();
+  }
+  get bindings() {
+    return Array.from(this._keyMap.values());
+  }
+  get(binding) {
+    return this._keyMap.get(binding);
+  }
+  bind(config) {
+    const { binding } = config;
+    const parts = binding.split("+");
+    const mods = modifiers.filter((key) => parts.includes(key));
+    (0, import_invariant.invariant)(mods.length === 0 || mods.length === parts.length - 1, void 0, {
+      F: __dxlog_file,
+      L: 40,
+      S: this,
+      A: [
+        "mods.length === 0 || mods.length === parts.length - 1",
+        ""
+      ]
+    });
+    if (mods.length) {
+      config.binding = [
+        ...mods,
+        parts[parts.length - 1]
+      ].join("+");
+    }
+    this._keyMap.set(config.binding, config);
+  }
+  unbind(binding) {
+    this._keyMap.delete(binding);
+  }
+};
+var ROOT = "";
+var Keyboard = class _Keyboard {
+  constructor() {
+    this._root = new KeyboardContext();
+    this._keyMap = /* @__PURE__ */ new Map([
+      [
+        ROOT,
+        this._root
+      ]
+    ]);
+    this._contexts = [
+      ROOT
+    ];
+    this._keyHandler = this.handleKeyDown.bind(this);
+    this._path = ROOT;
+    this.bind = this._root.bind.bind(this._root);
+    this.unbind = this._root.unbind.bind(this._root);
+  }
+  static {
+    this.singleton = new _Keyboard();
+  }
+  initialize() {
+    document.addEventListener("keydown", this._keyHandler);
+  }
+  destroy() {
+    document.removeEventListener("keydown", this._keyHandler);
+  }
+  setCurrentContext(path = ROOT) {
+    this._path = path;
+  }
+  getCurrentContext() {
+    return this._path;
+  }
+  getContext(path = ROOT) {
+    let context = this._keyMap.get(path);
+    if (!context) {
+      context = new KeyboardContext();
+      this._keyMap.set(path, context);
+      this._contexts.push(path);
+      this._contexts.sort();
+    }
+    return context;
+  }
+  getBindings() {
+    const bindings = /* @__PURE__ */ new Map();
+    for (let i = 0; i < this._contexts.length; ++i) {
+      const path = this._contexts[i];
+      if (this._path.startsWith(path)) {
+        this.getContext(path).bindings.forEach((binding) => {
+          bindings.set(binding.binding, binding);
+        });
+      }
+    }
+    return Array.from(bindings.values());
+  }
+  handleKeyDown(event) {
+    const { altKey, ctrlKey, metaKey, shiftKey, key } = event;
+    if (key !== "Alt" && key !== "Control" && key !== "Meta" && key !== "Shift") {
+      const tagName = event.target?.tagName;
+      const isInput = tagName === "INPUT" || tagName === "TEXTAREA" || event.target?.getAttribute("contenteditable");
+      const str = [
+        altKey && "alt",
+        ctrlKey && "ctrl",
+        shiftKey && "shift",
+        metaKey && "meta",
+        key
+      ].filter(Boolean).join("+");
+      for (let i = this._contexts.length - 1; i >= 0; --i) {
+        const path = this._contexts[i];
+        if (this._path.startsWith(path)) {
+          const { data, handler, disableInput } = this.getContext(path).get(str) ?? {};
+          if (handler && (!isInput || !disableInput)) {
+            const result = handler({
+              context: path,
+              binding: str,
+              data,
+              event
+            });
+            if (result !== false) {
+              event.preventDefault();
+              event.stopPropagation();
+            }
+            return;
+          }
+        }
+      }
+    }
+  }
+};
+var symbols = {
+  // Mods.
+  ctrl: "\u2303",
+  shift: "\u21E7",
+  alt: "\u2325",
+  meta: "\u2318",
+  // Special keys.
+  Backspace: "\u232B",
+  Enter: "\u23CE",
+  Escape: "\u238B",
+  Space: "\u2423",
+  Tab: "\u21E5"
+};
+var keySymbols = (keyBinding) => {
+  const parts = keyBinding.split("+");
+  return parts.map((part) => symbols[part] ?? part.toUpperCase());
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Keyboard,
+  keySymbols
+});
+//# sourceMappingURL=index.cjs.map

package/dist/lib/node/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/keyboard.ts", "../../../src/util.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { invariant } from '@dxos/invariant';\n\nexport type KeyHandler = (props: {\n  context: string;\n  binding: string;\n  data?: any;\n  event: KeyboardEvent;\n}) => boolean | void;\n\nexport type KeyBinding = {\n  binding: string;\n  handler: KeyHandler;\n  disableInput?: boolean;\n  data?: any;\n};\n\n// Keybinding is normalized to this order.\nconst modifiers = ['alt', 'ctrl', 'shift', 'meta'];\n\nclass KeyboardContext {\n  readonly _keyMap = new Map<string, KeyBinding>();\n\n  get bindings() {\n    return Array.from(this._keyMap.values());\n  }\n\n  get(binding: string) {\n    return this._keyMap.get(binding);\n  }\n\n  bind(config: KeyBinding) {\n    // Normalize order of modifiers.\n    const { binding } = config;\n    const parts = binding.split('+');\n    const mods = modifiers.filter((key) => parts.includes(key));\n    invariant(mods.length === 0 || mods.length === parts.length - 1);\n    if (mods.length) {\n      config.binding = [...mods, parts[parts.length - 1]].join('+');\n    }\n\n    this._keyMap.set(config.binding, config);\n  }\n\n  unbind(binding: string) {\n    this._keyMap.delete(binding);\n  }\n}\n\nconst ROOT = '';\n\n/**\n * Manages context-aware key bindings.\n */\nexport class Keyboard {\n  static singleton = new Keyboard();\n\n  private readonly _root = new KeyboardContext();\n  private readonly _keyMap = new Map<string, KeyboardContext>([[ROOT, this._root]]);\n  private readonly _contexts: string[] = [ROOT];\n  private readonly _keyHandler = this.handleKeyDown.bind(this);\n  private _path = ROOT;\n\n  initialize() {\n    document.addEventListener('keydown', this._keyHandler);\n  }\n\n  destroy() {\n    document.removeEventListener('keydown', this._keyHandler);\n  }\n\n  bind = this._root.bind.bind(this._root);\n  unbind = this._root.unbind.bind(this._root);\n\n  setCurrentContext(path = ROOT) {\n    this._path = path;\n  }\n\n  getCurrentContext() {\n    return this._path;\n  }\n\n  getContext(path = ROOT): KeyboardContext {\n    let context = this._keyMap.get(path);\n    if (!context) {\n      context = new KeyboardContext();\n      this._keyMap.set(path, context);\n      this._contexts.push(path);\n      this._contexts.sort();\n    }\n\n    return context;\n  }\n\n  getBindings() {\n    const bindings = new Map<string, KeyBinding>();\n    for (let i = 0; i < this._contexts.length; ++i) {\n      const path = this._contexts[i];\n      if (this._path.startsWith(path)) {\n        this.getContext(path).bindings.forEach((binding) => {\n          bindings.set(binding.binding, binding);\n        });\n      }\n    }\n\n    return Array.from(bindings.values());\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const { altKey, ctrlKey, metaKey, shiftKey, key } = event;\n\n    if (key !== 'Alt' && key !== 'Control' && key !== 'Meta' && key !== 'Shift') {\n      // Binding option to check for input or contenteditable.\n      const tagName = (event.target as any)?.tagName;\n      const isInput =\n        tagName === 'INPUT' || tagName === 'TEXTAREA' || (event.target as any)?.getAttribute('contenteditable');\n\n      // Normalized key binding.\n      const str = [altKey && 'alt', ctrlKey && 'ctrl', shiftKey && 'shift', metaKey && 'meta', key]\n        .filter(Boolean)\n        .join('+');\n\n      // Scan matching contexts.\n      for (let i = this._contexts.length - 1; i >= 0; --i) {\n        const path = this._contexts[i];\n        if (this._path.startsWith(path)) {\n          const { data, handler, disableInput } = this.getContext(path).get(str) ?? {};\n          if (handler && (!isInput || !disableInput)) {\n            const result = handler({ context: path, binding: str, data, event });\n            if (result !== false) {\n              // TODO(burdon): This doesn't prevent actions in markdown editor.\n              //  Reference: https://codemirror.net/docs/ref/#view.KeyBinding\n              event.preventDefault();\n              event.stopPropagation();\n            }\n\n            return;\n          }\n        }\n      }\n    }\n  }\n}\n", "//\n// Copyright 2023 DXOS.org\n//\n\n// https://www.w3.org/TR/DOM-Level-3-Events/#events-keyboardevents\n// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key\n// https://support.apple.com/en-us/HT201236\n// https://support.apple.com/guide/mac-help/what-are-those-symbols-shown-in-menus-cpmh0011/mac\n\n// TODO(burdon): Show Mac/Windows/Linux variants.\nconst symbols: Record<string, string> = {\n  // Mods.\n  ctrl: '⌃',\n  shift: '⇧',\n  alt: '⌥',\n  meta: '⌘',\n\n  // Special keys.\n  Backspace: '⌫',\n  Enter: '⏎',\n  Escape: '⎋',\n  Space: '␣',\n  Tab: '⇥',\n};\n\nexport const keySymbols = (keyBinding: string): string[] => {\n  const parts = keyBinding.split('+');\n  return parts.map((part) => symbols[part] ?? part.toUpperCase());\n};\n"],
+  "mappings": "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",
+  "names": ["modifiers", "KeyboardContext", "_keyMap", "Map", "bindings", "Array", "from", "values", "get", "binding", "bind", "config", "parts", "split", "mods", "filter", "key", "includes", "invariant", "length", "join", "set", "unbind", "delete", "ROOT", "Keyboard", "_root", "_contexts", "_keyHandler", "handleKeyDown", "_path", "singleton", "initialize", "document", "addEventListener", "destroy", "removeEventListener", "setCurrentContext", "path", "getCurrentContext", "getContext", "context", "push", "sort", "getBindings", "i", "startsWith", "forEach", "event", "altKey", "ctrlKey", "metaKey", "shiftKey", "tagName", "target", "isInput", "getAttribute", "str", "Boolean", "data", "handler", "disableInput", "result", "preventDefault", "stopPropagation", "symbols", "ctrl", "shift", "alt", "meta", "Backspace", "Enter", "Escape", "Space", "Tab", "keySymbols", "keyBinding", "map", "part", "toUpperCase"]
+}

package/dist/lib/node/meta.json

@@ -0,0 +1 @@
+{"inputs":{"packages/common/keyboard/src/keyboard.ts":{"bytes":15101,"imports":[{"path":"@dxos/invariant","kind":"import-statement","external":true}],"format":"esm"},"packages/common/keyboard/src/util.ts":{"bytes":2733,"imports":[],"format":"esm"},"packages/common/keyboard/src/index.ts":{"bytes":544,"imports":[{"path":"packages/common/keyboard/src/keyboard.ts","kind":"import-statement","original":"./keyboard"},{"path":"packages/common/keyboard/src/util.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/common/keyboard/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":8713},"packages/common/keyboard/dist/lib/node/index.cjs":{"imports":[{"path":"@dxos/invariant","kind":"import-statement","external":true}],"exports":["Keyboard","keySymbols"],"entryPoint":"packages/common/keyboard/src/index.ts","inputs":{"packages/common/keyboard/src/keyboard.ts":{"bytesInOutput":3582},"packages/common/keyboard/src/index.ts":{"bytesInOutput":0},"packages/common/keyboard/src/util.ts":{"bytesInOutput":362}},"bytes":4101}}}

package/dist/types/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from './keyboard';
+export * from './util';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC"}

package/dist/types/src/keyboard.d.ts

@@ -0,0 +1,41 @@
+export type KeyHandler = (props: {
+    context: string;
+    binding: string;
+    data?: any;
+    event: KeyboardEvent;
+}) => boolean | void;
+export type KeyBinding = {
+    binding: string;
+    handler: KeyHandler;
+    disableInput?: boolean;
+    data?: any;
+};
+declare class KeyboardContext {
+    readonly _keyMap: Map<string, KeyBinding>;
+    get bindings(): KeyBinding[];
+    get(binding: string): KeyBinding | undefined;
+    bind(config: KeyBinding): void;
+    unbind(binding: string): void;
+}
+/**
+ * Manages context-aware key bindings.
+ */
+export declare class Keyboard {
+    static singleton: Keyboard;
+    private readonly _root;
+    private readonly _keyMap;
+    private readonly _contexts;
+    private readonly _keyHandler;
+    private _path;
+    initialize(): void;
+    destroy(): void;
+    bind: (config: KeyBinding) => void;
+    unbind: (binding: string) => void;
+    setCurrentContext(path?: string): void;
+    getCurrentContext(): string;
+    getContext(path?: string): KeyboardContext;
+    getBindings(): KeyBinding[];
+    handleKeyDown(event: KeyboardEvent): void;
+}
+export {};
+//# sourceMappingURL=keyboard.d.ts.map

package/dist/types/src/keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../../src/keyboard.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,UAAU,GAAG,CAAC,KAAK,EAAE;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,aAAa,CAAC;CACtB,KAAK,OAAO,GAAG,IAAI,CAAC;AAErB,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,UAAU,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ,CAAC;AAKF,cAAM,eAAe;IACnB,QAAQ,CAAC,OAAO,0BAAiC;IAEjD,IAAI,QAAQ,iBAEX;IAED,GAAG,CAAC,OAAO,EAAE,MAAM;IAInB,IAAI,CAAC,MAAM,EAAE,UAAU;IAavB,MAAM,CAAC,OAAO,EAAE,MAAM;CAGvB;AAID;;GAEG;AACH,qBAAa,QAAQ;IACnB,MAAM,CAAC,SAAS,WAAkB;IAElC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAyB;IAC/C,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA0D;IAClF,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoB;IAC9C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiC;IAC7D,OAAO,CAAC,KAAK,CAAQ;IAErB,UAAU;IAIV,OAAO;IAIP,IAAI,+BAAoC;IACxC,MAAM,4BAAsC;IAE5C,iBAAiB,CAAC,IAAI,SAAO;IAI7B,iBAAiB;IAIjB,UAAU,CAAC,IAAI,SAAO,GAAG,eAAe;IAYxC,WAAW;IAcX,aAAa,CAAC,KAAK,EAAE,aAAa;CAkCnC"}

package/dist/types/src/keyboard.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import '@dxosTheme';
+declare const _default: {
+    title: string;
+    decorators: import("@storybook/react").Decorator[];
+    render: () => JSX.Element;
+};
+export default _default;
+export declare const Default: {};
+//# sourceMappingURL=keyboard.stories.d.ts.map

package/dist/types/src/keyboard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.stories.d.ts","sourceRoot":"","sources":["../../../src/keyboard.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;;;;;;AAiEpB,wBAIE;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}

package/dist/types/src/keyboard.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=keyboard.test.d.ts.map

package/dist/types/src/keyboard.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.test.d.ts","sourceRoot":"","sources":["../../../src/keyboard.test.ts"],"names":[],"mappings":""}

package/dist/types/src/util.d.ts

@@ -0,0 +1,2 @@
+export declare const keySymbols: (keyBinding: string) => string[];
+//# sourceMappingURL=util.d.ts.map

package/dist/types/src/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/util.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAM,UAAU,eAAgB,MAAM,KAAG,MAAM,EAGrD,CAAC"}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@dxos/keyboard",
+  "version": "0.3.10-main.08c6b67",
+  "description": "Keyboard bindings",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "main": "dist/lib/node/index.cjs",
+  "browser": {
+    "./dist/lib/node/index.cjs": "./dist/lib/browser/index.mjs"
+  },
+  "types": "dist/types/src/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@dxos/invariant": "0.3.10-main.08c6b67",
+    "@dxos/node-std": "0.3.10-main.08c6b67"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@dxos/react-ui": "0.3.10-main.08c6b67",
+    "@dxos/react-ui-theme": "0.3.10-main.08c6b67",
+    "@dxos/storybook-utils": "0.3.10-main.08c6b67"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './keyboard';
+export * from './util';

package/src/keyboard.stories.tsx

@@ -0,0 +1,76 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React, { useEffect, useState } from 'react';
+
+import { Select, Input } from '@dxos/react-ui';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { type KeyHandler, Keyboard } from './keyboard';
+
+const contexts = ['/', '/space/1', '/space/2', '/space/2/a', '/space/2/b'];
+
+const Story = () => {
+  const [context, setContext] = useState<string | undefined>(undefined);
+  const [bindings, setBindings] = useState({});
+
+  useEffect(() => {
+    const handler: KeyHandler = ({ context, binding, data }) => console.log({ context, binding, data });
+
+    Keyboard.singleton.initialize();
+    Keyboard.singleton.bind({ binding: 'meta+k', handler, data: 'commands' });
+    Keyboard.singleton.getContext('/space/2').bind({ binding: 'meta+/', handler, data: 'space 2' });
+    Keyboard.singleton.getContext('/space/2/b').bind({ binding: 'shift+meta+.', handler });
+    Keyboard.singleton.getContext('/space/1').bind({ binding: 'meta+/', handler, data: 'space 1' });
+
+    setBindings(Keyboard.singleton.getBindings());
+
+    return () => Keyboard.singleton.destroy();
+  }, []);
+
+  const handleChange = (path: string) => {
+    Keyboard.singleton.setCurrentContext(path);
+    setContext(path);
+    setBindings(Keyboard.singleton.getBindings());
+  };
+
+  // TODO(burdon): BUG: Error in order of hooks.
+  return (
+    <div className='flex flex-col gap-2'>
+      <div className='flex gap-2'>
+        <Select.Root value={context} onValueChange={handleChange}>
+          <Select.TriggerButton placeholder='Select context' />
+          <Select.Portal>
+            <Select.Content>
+              <Select.ScrollUpButton />
+              <Select.Viewport>
+                {contexts.map((context, i) => (
+                  <Select.Option key={i} value={context}>
+                    {context}
+                  </Select.Option>
+                ))}
+              </Select.Viewport>
+              <Select.ScrollDownButton />
+              <Select.Arrow />
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+        <Input.Root>
+          <Input.TextInput placeholder='Test input' />
+        </Input.Root>
+      </div>
+      <pre>{JSON.stringify(bindings, undefined, 2)}</pre>
+    </div>
+  );
+};
+
+export default {
+  title: 'keyboard/Keyboard',
+  decorators: [withTheme],
+  render: Story,
+};
+
+export const Default = {};

package/src/keyboard.test.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { expect } from 'chai';
+
+import { describe, test } from '@dxos/test';
+
+import { Keyboard } from './keyboard';
+
+describe('keyboard', () => {
+  test('should pass', () => {
+    const keyboard = new Keyboard();
+    keyboard.bind({ binding: 'meta+k', handler: () => true });
+    expect(keyboard.getBindings()).to.have.length(1);
+  });
+});

package/src/keyboard.ts

@@ -0,0 +1,146 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { invariant } from '@dxos/invariant';
+
+export type KeyHandler = (props: {
+  context: string;
+  binding: string;
+  data?: any;
+  event: KeyboardEvent;
+}) => boolean | void;
+
+export type KeyBinding = {
+  binding: string;
+  handler: KeyHandler;
+  disableInput?: boolean;
+  data?: any;
+};
+
+// Keybinding is normalized to this order.
+const modifiers = ['alt', 'ctrl', 'shift', 'meta'];
+
+class KeyboardContext {
+  readonly _keyMap = new Map<string, KeyBinding>();
+
+  get bindings() {
+    return Array.from(this._keyMap.values());
+  }
+
+  get(binding: string) {
+    return this._keyMap.get(binding);
+  }
+
+  bind(config: KeyBinding) {
+    // Normalize order of modifiers.
+    const { binding } = config;
+    const parts = binding.split('+');
+    const mods = modifiers.filter((key) => parts.includes(key));
+    invariant(mods.length === 0 || mods.length === parts.length - 1);
+    if (mods.length) {
+      config.binding = [...mods, parts[parts.length - 1]].join('+');
+    }
+
+    this._keyMap.set(config.binding, config);
+  }
+
+  unbind(binding: string) {
+    this._keyMap.delete(binding);
+  }
+}
+
+const ROOT = '';
+
+/**
+ * Manages context-aware key bindings.
+ */
+export class Keyboard {
+  static singleton = new Keyboard();
+
+  private readonly _root = new KeyboardContext();
+  private readonly _keyMap = new Map<string, KeyboardContext>([[ROOT, this._root]]);
+  private readonly _contexts: string[] = [ROOT];
+  private readonly _keyHandler = this.handleKeyDown.bind(this);
+  private _path = ROOT;
+
+  initialize() {
+    document.addEventListener('keydown', this._keyHandler);
+  }
+
+  destroy() {
+    document.removeEventListener('keydown', this._keyHandler);
+  }
+
+  bind = this._root.bind.bind(this._root);
+  unbind = this._root.unbind.bind(this._root);
+
+  setCurrentContext(path = ROOT) {
+    this._path = path;
+  }
+
+  getCurrentContext() {
+    return this._path;
+  }
+
+  getContext(path = ROOT): KeyboardContext {
+    let context = this._keyMap.get(path);
+    if (!context) {
+      context = new KeyboardContext();
+      this._keyMap.set(path, context);
+      this._contexts.push(path);
+      this._contexts.sort();
+    }
+
+    return context;
+  }
+
+  getBindings() {
+    const bindings = new Map<string, KeyBinding>();
+    for (let i = 0; i < this._contexts.length; ++i) {
+      const path = this._contexts[i];
+      if (this._path.startsWith(path)) {
+        this.getContext(path).bindings.forEach((binding) => {
+          bindings.set(binding.binding, binding);
+        });
+      }
+    }
+
+    return Array.from(bindings.values());
+  }
+
+  handleKeyDown(event: KeyboardEvent) {
+    const { altKey, ctrlKey, metaKey, shiftKey, key } = event;
+
+    if (key !== 'Alt' && key !== 'Control' && key !== 'Meta' && key !== 'Shift') {
+      // Binding option to check for input or contenteditable.
+      const tagName = (event.target as any)?.tagName;
+      const isInput =
+        tagName === 'INPUT' || tagName === 'TEXTAREA' || (event.target as any)?.getAttribute('contenteditable');
+
+      // Normalized key binding.
+      const str = [altKey && 'alt', ctrlKey && 'ctrl', shiftKey && 'shift', metaKey && 'meta', key]
+        .filter(Boolean)
+        .join('+');
+
+      // Scan matching contexts.
+      for (let i = this._contexts.length - 1; i >= 0; --i) {
+        const path = this._contexts[i];
+        if (this._path.startsWith(path)) {
+          const { data, handler, disableInput } = this.getContext(path).get(str) ?? {};
+          if (handler && (!isInput || !disableInput)) {
+            const result = handler({ context: path, binding: str, data, event });
+            if (result !== false) {
+              // TODO(burdon): This doesn't prevent actions in markdown editor.
+              //  Reference: https://codemirror.net/docs/ref/#view.KeyBinding
+              event.preventDefault();
+              event.stopPropagation();
+            }
+
+            return;
+          }
+        }
+      }
+    }
+  }
+}

package/src/util.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+// https://www.w3.org/TR/DOM-Level-3-Events/#events-keyboardevents
+// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
+// https://support.apple.com/en-us/HT201236
+// https://support.apple.com/guide/mac-help/what-are-those-symbols-shown-in-menus-cpmh0011/mac
+
+// TODO(burdon): Show Mac/Windows/Linux variants.
+const symbols: Record<string, string> = {
+  // Mods.
+  ctrl: '⌃',
+  shift: '⇧',
+  alt: '⌥',
+  meta: '⌘',
+
+  // Special keys.
+  Backspace: '⌫',
+  Enter: '⏎',
+  Escape: '⎋',
+  Space: '␣',
+  Tab: '⇥',
+};
+
+export const keySymbols = (keyBinding: string): string[] => {
+  const parts = keyBinding.split('+');
+  return parts.map((part) => symbols[part] ?? part.toUpperCase());
+};