@shadow-garden/bapbong-input-bridge 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Le Phuoc Minh
+
+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,35 @@
+# @shadow-garden/bapbong-input-bridge
+
+The canvas can't receive text input, so this package wraps a **hidden
+ProseMirror `EditorView`** (a real, visually-invisible contenteditable) as the
+input sink. The browser delivers keyboard and **IME composition** (Vietnamese,
+CJK, …) to it; ProseMirror owns the document, undo history and clipboard. Every
+transaction fires `onUpdate`, where the host re-runs layout and repaints.
+
+- **Scope:** `scope:input`
+- **Depends on:** `@shadow-garden/bapbong-model`, `prosemirror-{state,view,model,commands,keymap,history,transform}`
+
+## What it provides
+
+- **`InputBridge`** — the hidden editor: `state`, `dispatch(tr)`, `setSelection`,
+  `selectWordAt`, `place(x, y, h)` (anchors the IME popup at the caret), `focus`.
+- **Layout-aware commands:** `moveCaretCommand`, `splitListItem`, `wordRangeAt`.
+- **Comment authoring** (undoable transactions on `doc.attrs.comments`):
+  `addCommentTr`, `replyCommentTr`, `resolveCommentTr`, `editCommentTr`,
+  `deleteCommentTr`.
+- **`CommentComposer`** — a small standalone PM editor for comment bodies, with an
+  optional **@mention** suggestion plugin (`MentionHandlers` / `MentionUser` /
+  `MentionCoords`), a `placeholder`, and `onEnter` / `onEscape` hooks.
+
+```ts
+const bridge = new InputBridge({ doc, keys: { ArrowUp, ArrowDown }, onUpdate: repaint });
+container.appendChild(bridge.dom);
+bridge.setSelection(pos); bridge.focus(); bridge.place(x, y, h);
+```
+
+## Build / test
+
+```sh
+pnpm nx build @shadow-garden/bapbong-input-bridge
+pnpm nx test  @shadow-garden/bapbong-input-bridge
+```

package/dist/index.cjs

@@ -0,0 +1,300 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/input-bridge/src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CommentComposer: () => CommentComposer,
+  InputBridge: () => InputBridge,
+  createEditingState: () => createEditingState,
+  moveCaretCommand: () => moveCaretCommand,
+  splitListItem: () => splitListItem,
+  wordRangeAt: () => wordRangeAt
+});
+module.exports = __toCommonJS(index_exports);
+
+// packages/input-bridge/src/lib/input-bridge.ts
+var import_prosemirror_commands = require("prosemirror-commands");
+var import_prosemirror_history = require("prosemirror-history");
+var import_prosemirror_keymap = require("prosemirror-keymap");
+var import_prosemirror_state = require("prosemirror-state");
+var import_prosemirror_transform = require("prosemirror-transform");
+var import_prosemirror_view = require("prosemirror-view");
+function moveCaretCommand(compute, extend = false) {
+  return (state, dispatch) => {
+    const pos = compute(state);
+    if (pos == null) return false;
+    const sel = extend ? import_prosemirror_state.TextSelection.create(state.doc, state.selection.anchor, pos) : import_prosemirror_state.TextSelection.create(state.doc, pos);
+    dispatch?.(state.tr.setSelection(sel));
+    return true;
+  };
+}
+var splitListItem = (state, dispatch) => {
+  const { $from, $to } = state.selection;
+  const parent = $from.parent;
+  if (!parent.isTextblock || !parent.attrs["list"]) return false;
+  if ($from.parent !== $to.parent) return false;
+  if (parent.content.size === 0) {
+    dispatch?.(
+      state.tr.setNodeMarkup($from.before(), null, { ...parent.attrs, list: null })
+    );
+    return true;
+  }
+  const tr = state.tr.deleteSelection();
+  const pos = tr.selection.from;
+  if (!(0, import_prosemirror_transform.canSplit)(tr.doc, pos)) return false;
+  tr.split(pos, 1, [{ type: parent.type, attrs: parent.attrs }]);
+  dispatch?.(tr);
+  return true;
+};
+var WORD_CHAR = /[\p{L}\p{N}_]/u;
+function wordRangeAt(doc, pos) {
+  if (pos < 0 || pos > doc.content.size) return null;
+  const $pos = doc.resolve(pos);
+  const parent = $pos.parent;
+  if (!parent.isTextblock) return null;
+  const text = parent.textBetween(0, parent.content.size, void 0, "\uFFFC");
+  const offset = pos - $pos.start();
+  let from = offset;
+  let to = offset;
+  while (from > 0 && WORD_CHAR.test(text[from - 1])) from--;
+  while (to < text.length && WORD_CHAR.test(text[to])) to++;
+  if (from === to) return null;
+  return { from: $pos.start() + from, to: $pos.start() + to };
+}
+function createEditingState(doc, keys = {}) {
+  return import_prosemirror_state.EditorState.create({
+    doc,
+    plugins: [
+      (0, import_prosemirror_history.history)(),
+      (0, import_prosemirror_keymap.keymap)({ "Mod-z": import_prosemirror_history.undo, "Shift-Mod-z": import_prosemirror_history.redo, "Mod-y": import_prosemirror_history.redo }),
+      (0, import_prosemirror_keymap.keymap)(keys),
+      (0, import_prosemirror_keymap.keymap)(import_prosemirror_commands.baseKeymap)
+    ]
+  });
+}
+var InputBridge = class {
+  /** Clip layer appended near the canvas: it fills the positioned ancestor
+   *  and `overflow: hidden`s the 800px-wide host riding the caret inside —
+   *  otherwise that tail pokes past the right page edge and gifts the
+   *  scroll viewport a horizontal scrollbar. */
+  dom;
+  /** The hidden editor's host — the element `place()` actually moves. */
+  host;
+  view;
+  constructor(options) {
+    this.dom = document.createElement("div");
+    this.dom.className = "bapbong-input-bridge";
+    Object.assign(this.dom.style, {
+      position: "absolute",
+      inset: "0",
+      overflow: "hidden",
+      pointerEvents: "none",
+      zIndex: "-1"
+    });
+    this.host = document.createElement("div");
+    Object.assign(this.host.style, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      // MUST be wide: a 1px host makes the hidden document wrap one character
+      // per line (tens of thousands of line boxes), and every DOM-selection
+      // placement then re-runs that layout — ~500ms PER CLICK on multi-page
+      // documents. At a page-ish width the same layout is ~10ms and stays
+      // warm. The host is invisible either way (opacity 0, clipped height).
+      width: "800px",
+      height: "1em",
+      overflow: "hidden",
+      opacity: "0",
+      // Keep it focusable but out of the way of canvas pointer events.
+      pointerEvents: "none"
+    });
+    this.dom.appendChild(this.host);
+    this.view = new import_prosemirror_view.EditorView(this.host, {
+      state: createEditingState(options.doc, options.keys),
+      dispatchTransaction: (tr) => {
+        const state = this.view.state.apply(tr);
+        this.view.updateState(state);
+        options.onUpdate(state, tr);
+      }
+    });
+  }
+  get state() {
+    return this.view.state;
+  }
+  /** Dispatch a transaction (e.g. a comment authoring command) through the
+   *  editor, so it routes through onUpdate + history like any edit. */
+  dispatch(tr) {
+    this.view.dispatch(tr);
+  }
+  focus() {
+    this.view.focus();
+  }
+  /** Set a text selection (collapsed caret or anchor→head range). Positions
+   *  are clamped to the nearest valid text slots. */
+  setSelection(anchor, head = anchor) {
+    const { doc } = this.view.state;
+    const clamp = (p) => Math.max(0, Math.min(p, doc.content.size));
+    const sel = import_prosemirror_state.TextSelection.between(doc.resolve(clamp(anchor)), doc.resolve(clamp(head)));
+    this.view.dispatch(this.view.state.tr.setSelection(sel));
+  }
+  /** Select the word around `pos` (double-click); falls back to a collapsed
+   *  caret when there is no word at that position. */
+  selectWordAt(pos) {
+    const range = wordRangeAt(this.view.state.doc, pos);
+    if (range) this.setSelection(range.from, range.to);
+    else this.setSelection(pos);
+  }
+  /** Move the hidden editor to the painted caret (CSS px, relative to the
+   *  positioned ancestor) so IME popups anchor in the right place. */
+  place(x, y, height) {
+    this.host.style.transform = `translate(${x}px, ${y}px)`;
+    this.host.style.height = `${height}px`;
+  }
+  destroy() {
+    this.view.destroy();
+    this.dom.remove();
+  }
+};
+var mentionKey = new import_prosemirror_state.PluginKey("mention");
+var INACTIVE = { active: false, from: 0, query: "" };
+var MENTION_RE = /(?:^|\s)@([\p{L}\p{N}_]*)$/u;
+function placeholderPlugin(text) {
+  return new import_prosemirror_state.Plugin({
+    props: {
+      decorations(state) {
+        const doc = state.doc;
+        const first = doc.firstChild;
+        if (doc.childCount === 1 && first?.isTextblock && first.content.size === 0) {
+          return import_prosemirror_view.DecorationSet.create(doc, [
+            import_prosemirror_view.Decoration.node(0, first.nodeSize, { class: "is-empty", "data-placeholder": text })
+          ]);
+        }
+        return null;
+      }
+    }
+  });
+}
+function mentionPlugin(handlers) {
+  return new import_prosemirror_state.Plugin({
+    key: mentionKey,
+    state: {
+      init: () => INACTIVE,
+      apply(tr) {
+        const sel = tr.selection;
+        if (!sel.empty) return INACTIVE;
+        const $from = sel.$from;
+        const textBefore = $from.parent.textBetween(0, $from.parentOffset, "\n", "\uFFFC");
+        const m = MENTION_RE.exec(textBefore);
+        if (!m) return INACTIVE;
+        const query = m[1];
+        return { active: true, from: $from.pos - query.length - 1, query };
+      }
+    },
+    view: (editorView) => {
+      const emit = (view) => {
+        const st = mentionKey.getState(view.state);
+        if (!st?.active) return handlers.query(null);
+        const c = view.coordsAtPos(view.state.selection.from);
+        handlers.query({ query: st.query, coords: { left: c.left, top: c.top, bottom: c.bottom } });
+      };
+      emit(editorView);
+      return { update: emit, destroy: () => handlers.query(null) };
+    },
+    props: {
+      handleKeyDown(view, event) {
+        if (!mentionKey.getState(view.state)?.active) return false;
+        const map = {
+          ArrowUp: "up",
+          ArrowDown: "down",
+          Enter: "enter",
+          Tab: "enter",
+          Escape: "esc"
+        };
+        const k = map[event.key];
+        if (k && handlers.key(k)) {
+          event.preventDefault();
+          return true;
+        }
+        return false;
+      }
+    }
+  });
+}
+var CommentComposer = class {
+  constructor(schema, mount, initialDoc, mention, opts) {
+    this.schema = schema;
+    const doc = initialDoc ? schema.nodeFromJSON(initialDoc) : void 0;
+    const plugins = [(0, import_prosemirror_history.history)()];
+    if (opts?.placeholder) plugins.push(placeholderPlugin(opts.placeholder));
+    if (mention && schema.nodes["mention"]) plugins.push(mentionPlugin(mention));
+    const keys = {};
+    if (opts?.onEnter) {
+      keys["Enter"] = () => (opts.onEnter?.(), true);
+      keys["Shift-Enter"] = import_prosemirror_commands.baseKeymap["Enter"];
+    }
+    if (opts?.onEscape) keys["Escape"] = () => (opts.onEscape?.(), true);
+    if (Object.keys(keys).length) plugins.push((0, import_prosemirror_keymap.keymap)(keys));
+    plugins.push((0, import_prosemirror_keymap.keymap)({ "Mod-z": import_prosemirror_history.undo, "Shift-Mod-z": import_prosemirror_history.redo }), (0, import_prosemirror_keymap.keymap)(import_prosemirror_commands.baseKeymap));
+    this.view = new import_prosemirror_view.EditorView(mount, {
+      state: import_prosemirror_state.EditorState.create({ ...doc ? { doc } : { schema }, plugins })
+    });
+  }
+  schema;
+  view;
+  /** Replace the active "@query" with a mention node + trailing space. */
+  applyMention(user) {
+    const st = mentionKey.getState(this.view.state);
+    if (!st?.active) return;
+    const to = this.view.state.selection.from;
+    const node = this.schema.nodes["mention"].create({ id: user.id, label: user.label });
+    const tr = this.view.state.tr.replaceWith(st.from, to, [node, this.schema.text(" ")]);
+    tr.setSelection(import_prosemirror_state.TextSelection.create(tr.doc, st.from + 2));
+    this.view.dispatch(tr);
+    this.view.focus();
+  }
+  /** Whether the composer has no visible text. */
+  isEmpty() {
+    return this.view.state.doc.textContent.trim().length === 0;
+  }
+  /** The composed body as commentSchema doc JSON. */
+  getJSON() {
+    return this.view.state.doc.toJSON();
+  }
+  /** Reset to an empty document. */
+  clear() {
+    const empty = import_prosemirror_state.EditorState.create({ schema: this.schema, plugins: this.view.state.plugins });
+    this.view.updateState(empty);
+  }
+  focus() {
+    this.view.focus();
+  }
+  destroy() {
+    this.view.destroy();
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CommentComposer,
+  InputBridge,
+  createEditingState,
+  moveCaretCommand,
+  splitListItem,
+  wordRangeAt
+});

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/input-bridge.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/index.js

@@ -0,0 +1,268 @@
+// packages/input-bridge/src/lib/input-bridge.ts
+import { baseKeymap } from "prosemirror-commands";
+import { history, redo, undo } from "prosemirror-history";
+import { keymap } from "prosemirror-keymap";
+import { EditorState, Plugin, PluginKey, TextSelection } from "prosemirror-state";
+import { canSplit } from "prosemirror-transform";
+import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
+function moveCaretCommand(compute, extend = false) {
+  return (state, dispatch) => {
+    const pos = compute(state);
+    if (pos == null) return false;
+    const sel = extend ? TextSelection.create(state.doc, state.selection.anchor, pos) : TextSelection.create(state.doc, pos);
+    dispatch?.(state.tr.setSelection(sel));
+    return true;
+  };
+}
+var splitListItem = (state, dispatch) => {
+  const { $from, $to } = state.selection;
+  const parent = $from.parent;
+  if (!parent.isTextblock || !parent.attrs["list"]) return false;
+  if ($from.parent !== $to.parent) return false;
+  if (parent.content.size === 0) {
+    dispatch?.(
+      state.tr.setNodeMarkup($from.before(), null, { ...parent.attrs, list: null })
+    );
+    return true;
+  }
+  const tr = state.tr.deleteSelection();
+  const pos = tr.selection.from;
+  if (!canSplit(tr.doc, pos)) return false;
+  tr.split(pos, 1, [{ type: parent.type, attrs: parent.attrs }]);
+  dispatch?.(tr);
+  return true;
+};
+var WORD_CHAR = /[\p{L}\p{N}_]/u;
+function wordRangeAt(doc, pos) {
+  if (pos < 0 || pos > doc.content.size) return null;
+  const $pos = doc.resolve(pos);
+  const parent = $pos.parent;
+  if (!parent.isTextblock) return null;
+  const text = parent.textBetween(0, parent.content.size, void 0, "\uFFFC");
+  const offset = pos - $pos.start();
+  let from = offset;
+  let to = offset;
+  while (from > 0 && WORD_CHAR.test(text[from - 1])) from--;
+  while (to < text.length && WORD_CHAR.test(text[to])) to++;
+  if (from === to) return null;
+  return { from: $pos.start() + from, to: $pos.start() + to };
+}
+function createEditingState(doc, keys = {}) {
+  return EditorState.create({
+    doc,
+    plugins: [
+      history(),
+      keymap({ "Mod-z": undo, "Shift-Mod-z": redo, "Mod-y": redo }),
+      keymap(keys),
+      keymap(baseKeymap)
+    ]
+  });
+}
+var InputBridge = class {
+  /** Clip layer appended near the canvas: it fills the positioned ancestor
+   *  and `overflow: hidden`s the 800px-wide host riding the caret inside —
+   *  otherwise that tail pokes past the right page edge and gifts the
+   *  scroll viewport a horizontal scrollbar. */
+  dom;
+  /** The hidden editor's host — the element `place()` actually moves. */
+  host;
+  view;
+  constructor(options) {
+    this.dom = document.createElement("div");
+    this.dom.className = "bapbong-input-bridge";
+    Object.assign(this.dom.style, {
+      position: "absolute",
+      inset: "0",
+      overflow: "hidden",
+      pointerEvents: "none",
+      zIndex: "-1"
+    });
+    this.host = document.createElement("div");
+    Object.assign(this.host.style, {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      // MUST be wide: a 1px host makes the hidden document wrap one character
+      // per line (tens of thousands of line boxes), and every DOM-selection
+      // placement then re-runs that layout — ~500ms PER CLICK on multi-page
+      // documents. At a page-ish width the same layout is ~10ms and stays
+      // warm. The host is invisible either way (opacity 0, clipped height).
+      width: "800px",
+      height: "1em",
+      overflow: "hidden",
+      opacity: "0",
+      // Keep it focusable but out of the way of canvas pointer events.
+      pointerEvents: "none"
+    });
+    this.dom.appendChild(this.host);
+    this.view = new EditorView(this.host, {
+      state: createEditingState(options.doc, options.keys),
+      dispatchTransaction: (tr) => {
+        const state = this.view.state.apply(tr);
+        this.view.updateState(state);
+        options.onUpdate(state, tr);
+      }
+    });
+  }
+  get state() {
+    return this.view.state;
+  }
+  /** Dispatch a transaction (e.g. a comment authoring command) through the
+   *  editor, so it routes through onUpdate + history like any edit. */
+  dispatch(tr) {
+    this.view.dispatch(tr);
+  }
+  focus() {
+    this.view.focus();
+  }
+  /** Set a text selection (collapsed caret or anchor→head range). Positions
+   *  are clamped to the nearest valid text slots. */
+  setSelection(anchor, head = anchor) {
+    const { doc } = this.view.state;
+    const clamp = (p) => Math.max(0, Math.min(p, doc.content.size));
+    const sel = TextSelection.between(doc.resolve(clamp(anchor)), doc.resolve(clamp(head)));
+    this.view.dispatch(this.view.state.tr.setSelection(sel));
+  }
+  /** Select the word around `pos` (double-click); falls back to a collapsed
+   *  caret when there is no word at that position. */
+  selectWordAt(pos) {
+    const range = wordRangeAt(this.view.state.doc, pos);
+    if (range) this.setSelection(range.from, range.to);
+    else this.setSelection(pos);
+  }
+  /** Move the hidden editor to the painted caret (CSS px, relative to the
+   *  positioned ancestor) so IME popups anchor in the right place. */
+  place(x, y, height) {
+    this.host.style.transform = `translate(${x}px, ${y}px)`;
+    this.host.style.height = `${height}px`;
+  }
+  destroy() {
+    this.view.destroy();
+    this.dom.remove();
+  }
+};
+var mentionKey = new PluginKey("mention");
+var INACTIVE = { active: false, from: 0, query: "" };
+var MENTION_RE = /(?:^|\s)@([\p{L}\p{N}_]*)$/u;
+function placeholderPlugin(text) {
+  return new Plugin({
+    props: {
+      decorations(state) {
+        const doc = state.doc;
+        const first = doc.firstChild;
+        if (doc.childCount === 1 && first?.isTextblock && first.content.size === 0) {
+          return DecorationSet.create(doc, [
+            Decoration.node(0, first.nodeSize, { class: "is-empty", "data-placeholder": text })
+          ]);
+        }
+        return null;
+      }
+    }
+  });
+}
+function mentionPlugin(handlers) {
+  return new Plugin({
+    key: mentionKey,
+    state: {
+      init: () => INACTIVE,
+      apply(tr) {
+        const sel = tr.selection;
+        if (!sel.empty) return INACTIVE;
+        const $from = sel.$from;
+        const textBefore = $from.parent.textBetween(0, $from.parentOffset, "\n", "\uFFFC");
+        const m = MENTION_RE.exec(textBefore);
+        if (!m) return INACTIVE;
+        const query = m[1];
+        return { active: true, from: $from.pos - query.length - 1, query };
+      }
+    },
+    view: (editorView) => {
+      const emit = (view) => {
+        const st = mentionKey.getState(view.state);
+        if (!st?.active) return handlers.query(null);
+        const c = view.coordsAtPos(view.state.selection.from);
+        handlers.query({ query: st.query, coords: { left: c.left, top: c.top, bottom: c.bottom } });
+      };
+      emit(editorView);
+      return { update: emit, destroy: () => handlers.query(null) };
+    },
+    props: {
+      handleKeyDown(view, event) {
+        if (!mentionKey.getState(view.state)?.active) return false;
+        const map = {
+          ArrowUp: "up",
+          ArrowDown: "down",
+          Enter: "enter",
+          Tab: "enter",
+          Escape: "esc"
+        };
+        const k = map[event.key];
+        if (k && handlers.key(k)) {
+          event.preventDefault();
+          return true;
+        }
+        return false;
+      }
+    }
+  });
+}
+var CommentComposer = class {
+  constructor(schema, mount, initialDoc, mention, opts) {
+    this.schema = schema;
+    const doc = initialDoc ? schema.nodeFromJSON(initialDoc) : void 0;
+    const plugins = [history()];
+    if (opts?.placeholder) plugins.push(placeholderPlugin(opts.placeholder));
+    if (mention && schema.nodes["mention"]) plugins.push(mentionPlugin(mention));
+    const keys = {};
+    if (opts?.onEnter) {
+      keys["Enter"] = () => (opts.onEnter?.(), true);
+      keys["Shift-Enter"] = baseKeymap["Enter"];
+    }
+    if (opts?.onEscape) keys["Escape"] = () => (opts.onEscape?.(), true);
+    if (Object.keys(keys).length) plugins.push(keymap(keys));
+    plugins.push(keymap({ "Mod-z": undo, "Shift-Mod-z": redo }), keymap(baseKeymap));
+    this.view = new EditorView(mount, {
+      state: EditorState.create({ ...doc ? { doc } : { schema }, plugins })
+    });
+  }
+  schema;
+  view;
+  /** Replace the active "@query" with a mention node + trailing space. */
+  applyMention(user) {
+    const st = mentionKey.getState(this.view.state);
+    if (!st?.active) return;
+    const to = this.view.state.selection.from;
+    const node = this.schema.nodes["mention"].create({ id: user.id, label: user.label });
+    const tr = this.view.state.tr.replaceWith(st.from, to, [node, this.schema.text(" ")]);
+    tr.setSelection(TextSelection.create(tr.doc, st.from + 2));
+    this.view.dispatch(tr);
+    this.view.focus();
+  }
+  /** Whether the composer has no visible text. */
+  isEmpty() {
+    return this.view.state.doc.textContent.trim().length === 0;
+  }
+  /** The composed body as commentSchema doc JSON. */
+  getJSON() {
+    return this.view.state.doc.toJSON();
+  }
+  /** Reset to an empty document. */
+  clear() {
+    const empty = EditorState.create({ schema: this.schema, plugins: this.view.state.plugins });
+    this.view.updateState(empty);
+  }
+  focus() {
+    this.view.focus();
+  }
+  destroy() {
+    this.view.destroy();
+  }
+};
+export {
+  CommentComposer,
+  InputBridge,
+  createEditingState,
+  moveCaretCommand,
+  splitListItem,
+  wordRangeAt
+};

package/dist/lib/input-bridge.d.ts

@@ -0,0 +1,120 @@
+import type { Node as PMNode, Schema } from 'prosemirror-model';
+import { EditorState, type Command, type Transaction } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+export type { Command, EditorState, Transaction } from 'prosemirror-state';
+/** A command that moves the caret to the position computed by `compute`
+ *  (e.g. layout-aware ArrowUp/ArrowDown from bapbong-selection). With `extend`,
+ *  the anchor stays put and only the head moves (Shift+arrow selection).
+ *  Returns false — leaving the key to the next handler — when `compute`
+ *  yields null. */
+export declare function moveCaretCommand(compute: (state: EditorState) => number | null, extend?: boolean): Command;
+/** Enter inside a list item: split the paragraph KEEPING its list attrs (the
+ *  layout engine recounts markers, so the new item numbers itself and
+ *  everything below renumbers). Enter on an EMPTY item exits the list, like
+ *  Word. Returns false outside lists so the base keymap takes over. */
+export declare const splitListItem: Command;
+/** The word range around `pos` (for double-click selection), or null when the
+ *  position isn't inside a textblock or doesn't touch a word character.
+ *  Unicode-aware: Vietnamese diacritics count as word characters. */
+export declare function wordRangeAt(doc: PMNode, pos: number): {
+    from: number;
+    to: number;
+} | null;
+export interface InputBridgeOptions {
+    /** The initial document (its schema drives the editor). */
+    doc: PMNode;
+    /** Extra bindings, checked before the base keymap — e.g. ArrowUp/ArrowDown
+     *  wired to layout-aware caret motion from bapbong-selection. */
+    keys?: Record<string, Command>;
+    /** Called after every dispatched transaction (typing, IME composition
+     *  steps, undo, selection changes). Re-layout + repaint here. */
+    onUpdate: (state: EditorState, tr: Transaction) => void;
+}
+/** Editing state with history + base keymap; exported for headless tests. */
+export declare function createEditingState(doc: PMNode, keys?: Record<string, Command>): EditorState;
+/**
+ * Hidden ProseMirror editor acting as the canvas's input sink.
+ *
+ * The browser routes keyboard and IME composition into a real (but invisible)
+ * contenteditable; ProseMirror keeps the model, history and clipboard. The
+ * host positions `dom` at the canvas caret via `place()` so IME candidate
+ * popups appear next to the visible (painted) caret.
+ */
+export declare class InputBridge {
+    /** Clip layer appended near the canvas: it fills the positioned ancestor
+     *  and `overflow: hidden`s the 800px-wide host riding the caret inside —
+     *  otherwise that tail pokes past the right page edge and gifts the
+     *  scroll viewport a horizontal scrollbar. */
+    readonly dom: HTMLElement;
+    /** The hidden editor's host — the element `place()` actually moves. */
+    private readonly host;
+    readonly view: EditorView;
+    constructor(options: InputBridgeOptions);
+    get state(): EditorState;
+    /** Dispatch a transaction (e.g. a comment authoring command) through the
+     *  editor, so it routes through onUpdate + history like any edit. */
+    dispatch(tr: Transaction): void;
+    focus(): void;
+    /** Set a text selection (collapsed caret or anchor→head range). Positions
+     *  are clamped to the nearest valid text slots. */
+    setSelection(anchor: number, head?: number): void;
+    /** Select the word around `pos` (double-click); falls back to a collapsed
+     *  caret when there is no word at that position. */
+    selectWordAt(pos: number): void;
+    /** Move the hidden editor to the painted caret (CSS px, relative to the
+     *  positioned ancestor) so IME popups anchor in the right place. */
+    place(x: number, y: number, height: number): void;
+    destroy(): void;
+}
+/** A user the composer can @mention. */
+export interface MentionUser {
+    id: string;
+    label: string;
+}
+/** Where the @query popup should sit (client coords of the caret). */
+export interface MentionCoords {
+    left: number;
+    top: number;
+    bottom: number;
+}
+/** Host hooks for the @mention popup. The composer owns detection + insertion;
+ *  the host owns rendering the popup and choosing the user. */
+export interface MentionHandlers {
+    /** Popup should show/move (state) or hide (null). */
+    query(state: {
+        query: string;
+        coords: MentionCoords;
+    } | null): void;
+    /** A nav key fired while the popup is open; return true if the host consumed
+     *  it (then the composer swallows it instead of editing text). */
+    key(key: 'up' | 'down' | 'enter' | 'esc'): boolean;
+}
+/**
+ * A small standalone ProseMirror editor for composing a comment body. The host
+ * passes the body schema (bapbong-model's commentSchema) so input-bridge stays
+ * schema-agnostic; `getJSON()` returns the composed doc to store on the thread.
+ * Pass `mention` handlers to enable @-mentions (the host renders the popup).
+ * `opts.onEnter` makes Enter submit (Shift-Enter newlines) — used by the inline
+ * reply box; `opts.onEscape` cancels. The mention plugin is ordered first so it
+ * gets Enter/Esc while its popup is open, before these keymaps.
+ */
+export declare class CommentComposer {
+    private readonly schema;
+    readonly view: EditorView;
+    constructor(schema: Schema, mount: HTMLElement, initialDoc?: unknown, mention?: MentionHandlers, opts?: {
+        onEnter?: () => void;
+        onEscape?: () => void;
+        placeholder?: string;
+    });
+    /** Replace the active "@query" with a mention node + trailing space. */
+    applyMention(user: MentionUser): void;
+    /** Whether the composer has no visible text. */
+    isEmpty(): boolean;
+    /** The composed body as commentSchema doc JSON. */
+    getJSON(): unknown;
+    /** Reset to an empty document. */
+    clear(): void;
+    focus(): void;
+    destroy(): void;
+}
+//# sourceMappingURL=input-bridge.d.ts.map

package/dist/lib/input-bridge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-bridge.d.ts","sourceRoot":"","sources":["../../src/lib/input-bridge.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@shadow-garden/bapbong-input-bridge",
+  "version": "0.1.0",
+  "description": "bapbong — hidden ProseMirror editor as the input/IME sink for the canvas",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shadowgarden-app/bapbong.git",
+    "directory": "packages/input-bridge"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "@shadow-garden/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "nx": {
+    "tags": [
+      "scope:input"
+    ],
+    "targets": {
+      "build": {
+        "executor": "@nx/esbuild:esbuild",
+        "outputs": [
+          "{options.outputPath}"
+        ],
+        "options": {
+          "outputPath": "packages/input-bridge/dist",
+          "main": "packages/input-bridge/src/index.ts",
+          "tsConfig": "packages/input-bridge/tsconfig.lib.json",
+          "format": [
+            "esm",
+            "cjs"
+          ],
+          "declarationRootDir": "packages/input-bridge/src"
+        }
+      }
+    }
+  },
+  "dependencies": {
+    "prosemirror-commands": "^1.7.1",
+    "prosemirror-history": "^1.4.1",
+    "prosemirror-keymap": "^1.2.3",
+    "prosemirror-model": "^1.25.7",
+    "prosemirror-state": "^1.4.4",
+    "prosemirror-transform": "^1.10.0",
+    "prosemirror-view": "^1.41.3"
+  }
+}