@hydranium/glsp-client 1.0.0-next.301 → 1.0.0-next.303

package/README.md

@@ -8,8 +8,9 @@ VS Code webview, or a plain browser page. It builds on `@eclipse-glsp/client`.
 
 ## What it gives you
 
-- Load failures reported through your logger and shown on the diagram's
-  status overlay, instead of vanishing as an uncaught rejection.
+- Load failures reported through your logger and, unless the action
+  dispatcher itself failed, on the diagram's status overlay, instead of
+  vanishing as an uncaught rejection.
 - Action traffic and bounds measurements in your log, so a slow diagram names
   its cost.
 - Edge routes repaired before they go to the server while sprotty has not
@@ -22,6 +23,10 @@ VS Code webview, or a plain browser page. It builds on `@eclipse-glsp/client`.
   pending, so two quick clicks on different elements leave only the second
   selected.
 - One binder that mounts all of it in a diagram container.
+- For a plain page, one call that builds the container, loads the model and
+  supplies what a shell would: framing, canvas bounds that follow the
+  element's size and position, touch input, and a context menu GLSP stops
+  warning about.
 
 ## Install
 
@@ -71,16 +76,56 @@ without bendpoints `NaN` bounds, and a fit to screen over such a label blanks
 the canvas. The class is fixed per registered type, so a type registered with
 `GEdge` keeps the defect.
 
+In a plain page, call `mountGlspDiagram` instead of building the container
+yourself. It takes the element, your `HydraniumGlspClient` over the head's
+connection, and your diagram module's initializer in GLSP's own shape, and it
+calls `createGlspClientModule` for you:
+
+<!-- snippet-preamble
+import type { GlspDiagramMountOptions } from '@hydranium/glsp-client';
+import type { Logger } from '@hydranium/protocol';
+import type { MessageConnection } from 'vscode-jsonrpc';
+declare const connection: MessageConnection;
+declare const logger: Logger;
+declare const initializeMyDiagramContainer: GlspDiagramMountOptions['initializeDiagramContainer'];
+-->
+
+```ts
+import { HydraniumGlspClient, mountGlspDiagram } from '@hydranium/glsp-client';
+import { sendByMethodName } from '@hydranium/protocol';
+
+const glspClient = new HydraniumGlspClient({ id: 'my-app', connectionProvider: sendByMethodName(connection) });
+const diagram = await mountGlspDiagram({
+   mount: document.getElementById('my-diagram')!,
+   diagramType: 'my-diagram',
+   sourceUri: 'file:///workspace/my.model',
+   glspClient,
+   initializeDiagramContainer: initializeMyDiagramContainer,
+   logger
+});
+```
+
+Wrap the connection with `sendByMethodName`: GLSP's client sends message
+types built by its own copy of `vscode-jsonrpc`, which another copy rejects.
+One client serves every diagram on the page, each mounted as its own session.
+The element's `id` is the diagram's `clientId`, so it needs one; give it a
+height, `position: relative` so the palette stays on it, `touch-action: none`
+for touch, and size its `<svg>` to it, or sprotty draws into 300×150. The
+first render replaces the element with sprotty's own under the same id, so
+keep no reference to it and find it by id when you need it. A failed load
+resolves the mount; read `diagram.loadOutcome` to report it, since the status
+overlay cannot show a failure of the action dispatcher itself.
+
 For a browser page, see *Host in a browser* in
 [Adopting Hydranium](https://github.com/eclipse-emfcloud/hydranium/blob/main/docs/ADOPTING.md).
 
 ## Entry points
 
-| Subpath      | Use it for                                        | Runs in         |
-| ------------ | ------------------------------------------------- | --------------- |
-| `.`          | The classes, the binder and the DI tokens         | browser         |
-| `./messages` | The codes of the messages this package raises     | browser-neutral |
-| `./testing`  | A binding recorder for testing your modules       | browser-neutral |
+| Subpath      | Use it for                                                | Runs in         |
+| ------------ | --------------------------------------------------------- | --------------- |
+| `.`          | The classes, the binder, the DI tokens and the page mount | browser         |
+| `./messages` | The codes of the messages this package raises             | browser-neutral |
+| `./testing`  | A binding recorder for testing your modules               | browser-neutral |
 
 The root loads `@eclipse-glsp/client`, whose graph imports stylesheets, so
 your bundler needs a CSS loader. The subpaths need a TypeScript

package/lib/diagram-mount.d.ts

@@ -0,0 +1,100 @@
+/********************************************************************************
+ * Copyright (c) 2026 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the MIT License which is available in the project root.
+ *
+ * SPDX-License-Identifier: MIT
+ ********************************************************************************/
+import { type ContainerConfiguration } from '@eclipse-glsp/client';
+import { type Disposable, type Logger } from '@hydranium/protocol';
+import { Container } from 'inversify';
+import { type DiagramLoadOutcome } from './diagram-loader';
+import type { HydraniumGlspClient } from './glsp-client';
+/** Options for {@link mountGlspDiagram}. */
+export interface GlspDiagramMountOptions {
+    /** The element the diagram renders into. Its `id` becomes the diagram's
+     *  `clientId`, from which sprotty derives its base div, so an element
+     *  without one is refused rather than left as an empty page. sprotty's
+     *  first render replaces the element with one of its own under the same
+     *  id, so keep no reference to it: the mount watches the live one. */
+    readonly mount: HTMLElement;
+    /** The diagram type the GLSP head serves. */
+    readonly diagramType: string;
+    /** The document the diagram shows. */
+    readonly sourceUri: string;
+    /** The client over the GLSP head's connection. One client serves every
+     *  diagram on the page, each as its own client session. */
+    readonly glspClient: HydraniumGlspClient;
+    /** The diagram definition's initializer in GLSP's own shape: it receives the
+     *  host's modules and appends the definition last, since GLSP's registries
+     *  give an element type to whichever module registered it last. */
+    readonly initializeDiagramContainer: (container: Container, ...configuration: ContainerConfiguration) => Container;
+    /** The host's logger, as {@link createGlspClientModule} takes it. */
+    readonly logger?: Logger;
+}
+/** A diagram {@link mountGlspDiagram} put on a page. */
+export interface GlspDiagramMount extends Disposable {
+    /** The diagram container, for the services a page reads after the mount. */
+    readonly container: Container;
+    /** How the load ended. A failed load resolves the mount, so this is where
+     *  the caller learns of it; when the failure is not `surfaced`, no overlay
+     *  shows it and the caller is the only report left. */
+    readonly loadOutcome: DiagramLoadOutcome;
+    /** Ends the client session on the server and stops watching the element;
+     *  what is drawn in it is left to the host to remove. */
+    dispose(): void;
+}
+/**
+ * The canvas kept around the model when it is fitted, in model units before
+ * the zoom. Enough that the outermost shape's border is not the edge of the
+ * pane and no more, since the padding is taken from the space the fit has.
+ */
+export declare const DIAGRAM_FIT_PADDING = 24;
+/**
+ * Mount a GLSP diagram in a page element: build the container over GLSP's
+ * standalone modules and the framework's binder, load the model, and supply
+ * what a shell would. Resolves once the model is loaded and framed, so a caller
+ * that then reads the model sees the viewport it is drawn in.
+ *
+ * The accommodations a page needs from whatever hosts the diagram, each silent
+ * when missing, so none is optional:
+ *
+ * - **Framing.** sprotty leaves the viewport at scale 1 and the origin top-left
+ *   after a load, so a model wider than the pane is cut off at the right with
+ *   no sign anything is missing. The model is fitted with
+ *   {@link DIAGRAM_FIT_PADDING}, zooming out only: a fit that zooms in makes a
+ *   two-node diagram render four times the size of a ten-node one. To frame
+ *   differently, dispatch your own viewport action on the container after the
+ *   mount resolves. Register edges with `HydraniumGEdge`: GLSP's own
+ *   gives the labels of an edge without bendpoints no finite bounds, and the
+ *   fit then blanks the canvas.
+ * - **Bounds tracking.** After the first render, sprotty reads its canvas
+ *   bounds again on `window.resize` and on nothing else. It culls every shape
+ *   outside the bounds it believes it has, so a pane widened by a divider
+ *   stays empty in the new space, and it maps pointer positions through their
+ *   corner, so after a region above the element folds, a palette drop and a
+ *   wheel zoom land off by the distance the element moved. A `ResizeObserver`
+ *   on the element and each ancestor, and a `scroll` listener for a container
+ *   that scrolls, send the element's box in page coordinates whenever it
+ *   differs from the model's. A zero-sized box, which a pane dragged shut
+ *   reports, is skipped: a zero canvas culls the whole model.
+ * - **Touch input.** sprotty binds mouse events only; see
+ *   {@link enableTouchDragging}. Give the element `touch-action: none`.
+ * - **The context menu.** GLSP warns on every container built without a
+ *   `TYPES.IContextMenuService`, and the console is a page's only log. A no-op
+ *   is bound when the host bound none; a menu the host binds, in its
+ *   initializer or a module of its own, is left alone.
+ *
+ * A failed load does not reject: the loader reports it through the logger and,
+ * unless the action dispatcher is what failed, on the diagram's status
+ * overlay. The mount resolves without the accommodations, which a model that
+ * never arrived has no use for, and with the outcome in
+ * {@link GlspDiagramMount.loadOutcome}. Any other failure unbinds the
+ * container and rejects.
+ *
+ * The element also needs a height, `position: relative` so the palette stays
+ * on it, and its `<svg>` sized to it, or sprotty draws into 300×150.
+ */
+export declare function mountGlspDiagram(options: GlspDiagramMountOptions): Promise<GlspDiagramMount>;
+//# sourceMappingURL=diagram-mount.d.ts.map

package/lib/diagram-mount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagram-mount.d.ts","sourceRoot":"","sources":["../src/diagram-mount.ts"],"names":[],"mappings":"AAAA;;;;;;;kFAOkF;AAElF,OAAO,EAEJ,KAAK,sBAAsB,EAU7B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,KAAK,UAAU,EAAwB,KAAK,MAAM,EAAE,MAAM,qBAAqB,CAAC;AACzF,OAAO,EAAE,SAAS,EAAmB,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,KAAK,kBAAkB,EAA0B,MAAM,kBAAkB,CAAC;AACnF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAKzD,4CAA4C;AAC5C,MAAM,WAAW,uBAAuB;IACrC;;;;0EAIsE;IACtE,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC;IAC5B,6CAA6C;IAC7C,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,sCAAsC;IACtC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B;+DAC2D;IAC3D,QAAQ,CAAC,UAAU,EAAE,mBAAmB,CAAC;IACzC;;uEAEmE;IACnE,QAAQ,CAAC,0BAA0B,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE,sBAAsB,KAAK,SAAS,CAAC;IACnH,qEAAqE;IACrE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wDAAwD;AACxD,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IACjD,4EAA4E;IAC5E,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9B;;2DAEuD;IACvD,QAAQ,CAAC,WAAW,EAAE,kBAAkB,CAAC;IACzC;6DACyD;IACzD,OAAO,IAAI,IAAI,CAAC;CAClB;AAED;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,wBAAsB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAiElG"}

package/lib/diagram-mount.js

@@ -0,0 +1,157 @@
+"use strict";
+/********************************************************************************
+ * Copyright (c) 2026 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the MIT License which is available in the project root.
+ *
+ * SPDX-License-Identifier: MIT
+ ********************************************************************************/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DIAGRAM_FIT_PADDING = void 0;
+exports.mountGlspDiagram = mountGlspDiagram;
+const client_1 = require("@eclipse-glsp/client");
+const protocol_1 = require("@hydranium/protocol");
+const inversify_1 = require("inversify");
+const diagram_loader_1 = require("./diagram-loader");
+const glsp_client_module_1 = require("./glsp-client-module");
+const touch_input_1 = require("./touch-input");
+const types_1 = require("./types");
+/**
+ * The canvas kept around the model when it is fitted, in model units before
+ * the zoom. Enough that the outermost shape's border is not the edge of the
+ * pane and no more, since the padding is taken from the space the fit has.
+ */
+exports.DIAGRAM_FIT_PADDING = 24;
+/**
+ * Mount a GLSP diagram in a page element: build the container over GLSP's
+ * standalone modules and the framework's binder, load the model, and supply
+ * what a shell would. Resolves once the model is loaded and framed, so a caller
+ * that then reads the model sees the viewport it is drawn in.
+ *
+ * The accommodations a page needs from whatever hosts the diagram, each silent
+ * when missing, so none is optional:
+ *
+ * - **Framing.** sprotty leaves the viewport at scale 1 and the origin top-left
+ *   after a load, so a model wider than the pane is cut off at the right with
+ *   no sign anything is missing. The model is fitted with
+ *   {@link DIAGRAM_FIT_PADDING}, zooming out only: a fit that zooms in makes a
+ *   two-node diagram render four times the size of a ten-node one. To frame
+ *   differently, dispatch your own viewport action on the container after the
+ *   mount resolves. Register edges with `HydraniumGEdge`: GLSP's own
+ *   gives the labels of an edge without bendpoints no finite bounds, and the
+ *   fit then blanks the canvas.
+ * - **Bounds tracking.** After the first render, sprotty reads its canvas
+ *   bounds again on `window.resize` and on nothing else. It culls every shape
+ *   outside the bounds it believes it has, so a pane widened by a divider
+ *   stays empty in the new space, and it maps pointer positions through their
+ *   corner, so after a region above the element folds, a palette drop and a
+ *   wheel zoom land off by the distance the element moved. A `ResizeObserver`
+ *   on the element and each ancestor, and a `scroll` listener for a container
+ *   that scrolls, send the element's box in page coordinates whenever it
+ *   differs from the model's. A zero-sized box, which a pane dragged shut
+ *   reports, is skipped: a zero canvas culls the whole model.
+ * - **Touch input.** sprotty binds mouse events only; see
+ *   {@link enableTouchDragging}. Give the element `touch-action: none`.
+ * - **The context menu.** GLSP warns on every container built without a
+ *   `TYPES.IContextMenuService`, and the console is a page's only log. A no-op
+ *   is bound when the host bound none; a menu the host binds, in its
+ *   initializer or a module of its own, is left alone.
+ *
+ * A failed load does not reject: the loader reports it through the logger and,
+ * unless the action dispatcher is what failed, on the diagram's status
+ * overlay. The mount resolves without the accommodations, which a model that
+ * never arrived has no use for, and with the outcome in
+ * {@link GlspDiagramMount.loadOutcome}. Any other failure unbinds the
+ * container and rejects.
+ *
+ * The element also needs a height, `position: relative` so the palette stays
+ * on it, and its `<svg>` sized to it, or sprotty draws into 300×150.
+ */
+async function mountGlspDiagram(options) {
+    const { mount } = options;
+    if (mount.id === '') {
+        throw new Error("mountGlspDiagram: the mount element needs an id, which becomes the diagram's clientId");
+    }
+    const diagramOptions = {
+        clientId: mount.id,
+        diagramType: options.diagramType,
+        glspClientProvider: async () => options.glspClient,
+        sourceUri: options.sourceUri
+    };
+    // After the standalone modules, since every class the binder binds replaces
+    // a token those modules bind.
+    const hydraniumModule = new inversify_1.ContainerModule((bind, unbind, isBound, rebind) => {
+        (0, glsp_client_module_1.createGlspClientModule)({ bind, unbind, isBound, rebind }, { logger: options.logger });
+    });
+    const container = options.initializeDiagramContainer(new inversify_1.Container(), (0, client_1.createDiagramOptionsModule)(diagramOptions), client_1.STANDALONE_MODULE_CONFIG, hydraniumModule);
+    // After the container is built rather than in a module, so the host's own
+    // binding wins wherever its module sits in the order.
+    if (!container.isBound(client_1.TYPES.IContextMenuService)) {
+        container.bind(client_1.TYPES.IContextMenuService).toConstantValue({ show: () => undefined });
+    }
+    const toDispose = new protocol_1.DisposableCollection();
+    // Pushed first, so it runs last: `unbindAll` reaches `disposeClientSession`
+    // through the model source's pre-destroy hook, after the listeners are gone.
+    toDispose.push({ dispose: () => container.unbindAll() });
+    const dispose = () => toDispose.dispose();
+    try {
+        const loader = container.get(client_1.DiagramLoader);
+        await loader.load();
+        // A loader that is not the framework's rejects on a failure instead.
+        const loadOutcome = (loader instanceof diagram_loader_1.HydraniumDiagramLoader ? loader.loadOutcome : undefined) ?? { status: 'loaded' };
+        // A model that never arrived has no use for the accommodations, and when
+        // the dispatcher is what failed, every later dispatch rejects too.
+        if (loadOutcome.status === 'failed') {
+            return { container, loadOutcome, dispose };
+        }
+        const dispatcher = container.get(client_1.TYPES.IActionDispatcher);
+        // The bounds the fit measures come from the hidden rendering pass inside
+        // `load`; a fit dispatched before it has nothing to measure and leaves the
+        // viewport where it was.
+        await dispatcher.dispatch(client_1.FitToScreenAction.create([], { padding: exports.DIAGRAM_FIT_PADDING, maxZoom: 1, animate: false }));
+        // By id and not through `mount`: the load's first render replaced that
+        // element, and a listener on the replaced one never fires.
+        const live = document.getElementById(mount.id);
+        if (live === null) {
+            throw new Error(`mountGlspDiagram: the element '${mount.id}' left the document while the diagram loaded`);
+        }
+        toDispose.push(trackCanvasBounds(live, dispatcher, container.get(client_1.EditorContextService), container.get(types_1.HydraniumClientTypes.Logger)));
+        toDispose.push((0, touch_input_1.enableTouchDragging)(live));
+        return { container, loadOutcome, dispose };
+    }
+    catch (err) {
+        // The caller gets no mount to dispose, so the session would outlive it.
+        toDispose.dispose();
+        throw err;
+    }
+}
+function trackCanvasBounds(mount, dispatcher, editorContext, logger) {
+    const update = () => {
+        const box = mount.getBoundingClientRect();
+        if (box.width === 0 || box.height === 0) {
+            return;
+        }
+        const bounds = { x: box.left + window.scrollX, y: box.top + window.scrollY, width: box.width, height: box.height };
+        // Against the model's bounds rather than the last ones sent, since sprotty
+        // sets them too on `window.resize`; and skipped when equal, since every
+        // page scroll lands here and each dispatch redraws the diagram.
+        if (!client_1.Bounds.equals(bounds, editorContext.canvasBounds)) {
+            dispatcher
+                .dispatch(client_1.InitializeCanvasBoundsAction.create(bounds))
+                .catch((err) => logger.error("Failed to update the diagram's canvas bounds", err));
+        }
+    };
+    const observer = new ResizeObserver(update);
+    for (let element = mount; element !== null; element = element.parentElement) {
+        observer.observe(element);
+    }
+    document.addEventListener('scroll', update, { capture: true, passive: true });
+    return {
+        dispose: () => {
+            observer.disconnect();
+            document.removeEventListener('scroll', update, { capture: true });
+        }
+    };
+}
+//# sourceMappingURL=diagram-mount.js.map

package/lib/diagram-mount.js.map

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

package/lib/index.d.ts

@@ -9,6 +9,7 @@
 export * from './action-dispatcher';
 export * from './diagram-load-failed';
 export * from './diagram-loader';
+export * from './diagram-mount';
 export * from './edge';
 export * from './glsp-client';
 export * from './glsp-client-module';
@@ -16,5 +17,6 @@ export * from './hidden-bounds-updater';
 export * from './select-mouse-listener';
 export * from './sprotty-logger-adapter';
 export * from './status-overlay';
+export * from './touch-input';
 export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;kFAOkF;AAOlF,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;kFAOkF;AAOlF,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}

package/lib/index.js

@@ -30,6 +30,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./action-dispatcher"), exports);
 __exportStar(require("./diagram-load-failed"), exports);
 __exportStar(require("./diagram-loader"), exports);
+__exportStar(require("./diagram-mount"), exports);
 __exportStar(require("./edge"), exports);
 __exportStar(require("./glsp-client"), exports);
 __exportStar(require("./glsp-client-module"), exports);
@@ -37,5 +38,6 @@ __exportStar(require("./hidden-bounds-updater"), exports);
 __exportStar(require("./select-mouse-listener"), exports);
 __exportStar(require("./sprotty-logger-adapter"), exports);
 __exportStar(require("./status-overlay"), exports);
+__exportStar(require("./touch-input"), exports);
 __exportStar(require("./types"), exports);
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;kFAOkF;;;;;;;;;;;;;;;;AAElF,6EAA6E;AAC7E,6EAA6E;AAC7E,4EAA4E;AAC5E,4EAA4E;AAC5E,SAAS;AACT,sDAAoC;AACpC,wDAAsC;AACtC,mDAAiC;AACjC,yCAAuB;AACvB,gDAA8B;AAC9B,uDAAqC;AACrC,0DAAwC;AACxC,0DAAwC;AACxC,2DAAyC;AACzC,mDAAiC;AACjC,0CAAwB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;kFAOkF;;;;;;;;;;;;;;;;AAElF,6EAA6E;AAC7E,6EAA6E;AAC7E,4EAA4E;AAC5E,4EAA4E;AAC5E,SAAS;AACT,sDAAoC;AACpC,wDAAsC;AACtC,mDAAiC;AACjC,kDAAgC;AAChC,yCAAuB;AACvB,gDAA8B;AAC9B,uDAAqC;AACrC,0DAAwC;AACxC,0DAAwC;AACxC,2DAAyC;AACzC,mDAAiC;AACjC,gDAA8B;AAC9B,0CAAwB"}

package/lib/touch-input.d.ts

@@ -0,0 +1,31 @@
+/********************************************************************************
+ * Copyright (c) 2026 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the MIT License which is available in the project root.
+ *
+ * SPDX-License-Identifier: MIT
+ ********************************************************************************/
+import { type Disposable } from '@hydranium/protocol';
+/**
+ * Re-emit touch gestures over `mount` as the mouse events its canvas binds.
+ *
+ * sprotty's `MouseTool` registers `mousedown`, `mousemove` and `mouseup` and no
+ * pointer or touch listener, and a browser synthesizes mouse events for a tap
+ * and not for a drag, so a finger drag reaches the diagram as a complete
+ * pointer stream that moves nothing, with a clean console and a full model.
+ *
+ * A shim on the host rather than a change to the diagram client, because the
+ * gap is in which event family is bound: re-emitting the gesture as the bound
+ * family needs nothing from the model, the tools or the container. Pairs with
+ * `touch-action: none` on the same element, without which the browser takes the
+ * drag as a pan and cancels the pointer stream before the second move.
+ *
+ * Mouse and pen pointers are left alone: the canvas already hears those, and
+ * forwarding them would run every gesture twice. So is a second finger while
+ * one drags, since the canvas knows one mouse and its press would end the drag,
+ * and a press on a text field, which needs the browser's own press to take the
+ * focus and the caret.
+ */
+export declare function enableTouchDragging(mount: HTMLElement): Disposable;
+//# sourceMappingURL=touch-input.d.ts.map

package/lib/touch-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"touch-input.d.ts","sourceRoot":"","sources":["../src/touch-input.ts"],"names":[],"mappings":"AAAA;;;;;;;kFAOkF;AAElF,OAAO,EAAE,KAAK,UAAU,EAAwB,MAAM,qBAAqB,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,WAAW,GAAG,UAAU,CAmElE"}

package/lib/touch-input.js

@@ -0,0 +1,97 @@
+"use strict";
+/********************************************************************************
+ * Copyright (c) 2026 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the MIT License which is available in the project root.
+ *
+ * SPDX-License-Identifier: MIT
+ ********************************************************************************/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.enableTouchDragging = enableTouchDragging;
+const protocol_1 = require("@hydranium/protocol");
+/**
+ * Re-emit touch gestures over `mount` as the mouse events its canvas binds.
+ *
+ * sprotty's `MouseTool` registers `mousedown`, `mousemove` and `mouseup` and no
+ * pointer or touch listener, and a browser synthesizes mouse events for a tap
+ * and not for a drag, so a finger drag reaches the diagram as a complete
+ * pointer stream that moves nothing, with a clean console and a full model.
+ *
+ * A shim on the host rather than a change to the diagram client, because the
+ * gap is in which event family is bound: re-emitting the gesture as the bound
+ * family needs nothing from the model, the tools or the container. Pairs with
+ * `touch-action: none` on the same element, without which the browser takes the
+ * drag as a pan and cancels the pointer stream before the second move.
+ *
+ * Mouse and pen pointers are left alone: the canvas already hears those, and
+ * forwarding them would run every gesture twice. So is a second finger while
+ * one drags, since the canvas knows one mouse and its press would end the drag,
+ * and a press on a text field, which needs the browser's own press to take the
+ * focus and the caret.
+ */
+function enableTouchDragging(mount) {
+    /** The finger that started the drag and the element under it; every event of
+     *  the drag goes to that element. */
+    let drag;
+    const dispatch = (type, source) => {
+        drag?.target?.dispatchEvent(new MouseEvent(type, {
+            bubbles: true,
+            cancelable: true,
+            clientX: source.clientX,
+            clientY: source.clientY,
+            button: 0,
+            buttons: type === 'mouseup' ? 0 : 1,
+            view: window
+        }));
+    };
+    const press = (event) => {
+        if (event.pointerType !== 'touch' || drag !== undefined || isTextField(event.target)) {
+            return;
+        }
+        // Cancelled, or the browser follows a tap with mouse events of its own and
+        // the canvas hears the gesture twice; a `click` still follows.
+        event.preventDefault();
+        // Without the capture the stream stops when the finger leaves the element
+        // it started on, which during a node drag is immediately.
+        mount.setPointerCapture(event.pointerId);
+        drag = { pointerId: event.pointerId, target: document.elementFromPoint(event.clientX, event.clientY) };
+        // A priming move BEFORE the press, or the drag is a silent no-op: sprotty's
+        // `MousePositionTracker` writes the origin the change-bounds tool reads at
+        // `mousedown` on `mousemove` alone, so a pointer that never hovered leaves
+        // it unset and the node is dropped at 0,0.
+        dispatch('mousemove', event);
+        dispatch('mousedown', event);
+    };
+    const move = (event) => {
+        if (event.pointerId === drag?.pointerId) {
+            dispatch('mousemove', event);
+        }
+    };
+    const release = (event) => {
+        if (event.pointerId !== drag?.pointerId) {
+            return;
+        }
+        dispatch('mouseup', event);
+        drag = undefined;
+    };
+    const listeners = [
+        ['pointerdown', press],
+        ['pointermove', move],
+        ['pointerup', release],
+        // The browser fires `pointercancel` instead of `pointerup` when it takes
+        // the pointer over; without a release here the next touch resumes the
+        // abandoned drag.
+        ['pointercancel', release]
+    ];
+    const toDispose = new protocol_1.DisposableCollection();
+    for (const [type, listener] of listeners) {
+        mount.addEventListener(type, listener);
+        toDispose.push({ dispose: () => mount.removeEventListener(type, listener) });
+    }
+    return toDispose;
+}
+function isTextField(target) {
+    return target instanceof Element && target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])') !== null;
+}
+//# sourceMappingURL=touch-input.js.map

package/lib/touch-input.js.map

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hydranium/glsp-client",
-  "version": "1.0.0-next.301",
-  "description": "Host-neutral client classes for GLSP heads built on @hydranium/glsp-server, the binder that mounts them in a Theia frontend, a VS Code webview or a plain browser page, and the edge whose labels keep finite bounds without bendpoints.",
+  "version": "1.0.0-next.303",
+  "description": "Host-neutral client classes for GLSP heads built on @hydranium/glsp-server, the binder that mounts them in a Theia frontend, a VS Code webview or a plain browser page, the one call that mounts a diagram in a page, and the edge whose labels keep finite bounds without bendpoints.",
   "keywords": [
     "diagram",
     "glsp",
@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "@eclipse-glsp/client": "2.7.0",
-    "@hydranium/protocol": "1.0.0-next.301",
+    "@hydranium/protocol": "1.0.0-next.303",
     "@types/node": "^22.0.0",
     "inversify": "6.2.2",
     "reflect-metadata": "0.2.2",
@@ -69,7 +69,7 @@
   },
   "peerDependencies": {
     "@eclipse-glsp/client": "^2.6.0",
-    "@hydranium/protocol": "1.0.0-next.301",
+    "@hydranium/protocol": "1.0.0-next.303",
     "inversify": "^6.0.0",
     "snabbdom": "^3.5.1"
   },

package/src/diagram-mount.ts

@@ -0,0 +1,218 @@
+/********************************************************************************
+ * Copyright (c) 2026 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the MIT License which is available in the project root.
+ *
+ * SPDX-License-Identifier: MIT
+ ********************************************************************************/
+
+import {
+   Bounds,
+   type ContainerConfiguration,
+   createDiagramOptionsModule,
+   DiagramLoader,
+   EditorContextService,
+   FitToScreenAction,
+   type GLSPActionDispatcher,
+   type IDiagramOptions,
+   InitializeCanvasBoundsAction,
+   STANDALONE_MODULE_CONFIG,
+   TYPES
+} from '@eclipse-glsp/client';
+import { type Disposable, DisposableCollection, type Logger } from '@hydranium/protocol';
+import { Container, ContainerModule } from 'inversify';
+import { type DiagramLoadOutcome, HydraniumDiagramLoader } from './diagram-loader';
+import type { HydraniumGlspClient } from './glsp-client';
+import { createGlspClientModule } from './glsp-client-module';
+import { enableTouchDragging } from './touch-input';
+import { HydraniumClientTypes } from './types';
+
+/** Options for {@link mountGlspDiagram}. */
+export interface GlspDiagramMountOptions {
+   /** The element the diagram renders into. Its `id` becomes the diagram's
+    *  `clientId`, from which sprotty derives its base div, so an element
+    *  without one is refused rather than left as an empty page. sprotty's
+    *  first render replaces the element with one of its own under the same
+    *  id, so keep no reference to it: the mount watches the live one. */
+   readonly mount: HTMLElement;
+   /** The diagram type the GLSP head serves. */
+   readonly diagramType: string;
+   /** The document the diagram shows. */
+   readonly sourceUri: string;
+   /** The client over the GLSP head's connection. One client serves every
+    *  diagram on the page, each as its own client session. */
+   readonly glspClient: HydraniumGlspClient;
+   /** The diagram definition's initializer in GLSP's own shape: it receives the
+    *  host's modules and appends the definition last, since GLSP's registries
+    *  give an element type to whichever module registered it last. */
+   readonly initializeDiagramContainer: (container: Container, ...configuration: ContainerConfiguration) => Container;
+   /** The host's logger, as {@link createGlspClientModule} takes it. */
+   readonly logger?: Logger;
+}
+
+/** A diagram {@link mountGlspDiagram} put on a page. */
+export interface GlspDiagramMount extends Disposable {
+   /** The diagram container, for the services a page reads after the mount. */
+   readonly container: Container;
+   /** How the load ended. A failed load resolves the mount, so this is where
+    *  the caller learns of it; when the failure is not `surfaced`, no overlay
+    *  shows it and the caller is the only report left. */
+   readonly loadOutcome: DiagramLoadOutcome;
+   /** Ends the client session on the server and stops watching the element;
+    *  what is drawn in it is left to the host to remove. */
+   dispose(): void;
+}
+
+/**
+ * The canvas kept around the model when it is fitted, in model units before
+ * the zoom. Enough that the outermost shape's border is not the edge of the
+ * pane and no more, since the padding is taken from the space the fit has.
+ */
+export const DIAGRAM_FIT_PADDING = 24;
+
+/**
+ * Mount a GLSP diagram in a page element: build the container over GLSP's
+ * standalone modules and the framework's binder, load the model, and supply
+ * what a shell would. Resolves once the model is loaded and framed, so a caller
+ * that then reads the model sees the viewport it is drawn in.
+ *
+ * The accommodations a page needs from whatever hosts the diagram, each silent
+ * when missing, so none is optional:
+ *
+ * - **Framing.** sprotty leaves the viewport at scale 1 and the origin top-left
+ *   after a load, so a model wider than the pane is cut off at the right with
+ *   no sign anything is missing. The model is fitted with
+ *   {@link DIAGRAM_FIT_PADDING}, zooming out only: a fit that zooms in makes a
+ *   two-node diagram render four times the size of a ten-node one. To frame
+ *   differently, dispatch your own viewport action on the container after the
+ *   mount resolves. Register edges with `HydraniumGEdge`: GLSP's own
+ *   gives the labels of an edge without bendpoints no finite bounds, and the
+ *   fit then blanks the canvas.
+ * - **Bounds tracking.** After the first render, sprotty reads its canvas
+ *   bounds again on `window.resize` and on nothing else. It culls every shape
+ *   outside the bounds it believes it has, so a pane widened by a divider
+ *   stays empty in the new space, and it maps pointer positions through their
+ *   corner, so after a region above the element folds, a palette drop and a
+ *   wheel zoom land off by the distance the element moved. A `ResizeObserver`
+ *   on the element and each ancestor, and a `scroll` listener for a container
+ *   that scrolls, send the element's box in page coordinates whenever it
+ *   differs from the model's. A zero-sized box, which a pane dragged shut
+ *   reports, is skipped: a zero canvas culls the whole model.
+ * - **Touch input.** sprotty binds mouse events only; see
+ *   {@link enableTouchDragging}. Give the element `touch-action: none`.
+ * - **The context menu.** GLSP warns on every container built without a
+ *   `TYPES.IContextMenuService`, and the console is a page's only log. A no-op
+ *   is bound when the host bound none; a menu the host binds, in its
+ *   initializer or a module of its own, is left alone.
+ *
+ * A failed load does not reject: the loader reports it through the logger and,
+ * unless the action dispatcher is what failed, on the diagram's status
+ * overlay. The mount resolves without the accommodations, which a model that
+ * never arrived has no use for, and with the outcome in
+ * {@link GlspDiagramMount.loadOutcome}. Any other failure unbinds the
+ * container and rejects.
+ *
+ * The element also needs a height, `position: relative` so the palette stays
+ * on it, and its `<svg>` sized to it, or sprotty draws into 300×150.
+ */
+export async function mountGlspDiagram(options: GlspDiagramMountOptions): Promise<GlspDiagramMount> {
+   const { mount } = options;
+   if (mount.id === '') {
+      throw new Error("mountGlspDiagram: the mount element needs an id, which becomes the diagram's clientId");
+   }
+   const diagramOptions: IDiagramOptions = {
+      clientId: mount.id,
+      diagramType: options.diagramType,
+      glspClientProvider: async () => options.glspClient,
+      sourceUri: options.sourceUri
+   };
+   // After the standalone modules, since every class the binder binds replaces
+   // a token those modules bind.
+   const hydraniumModule = new ContainerModule((bind, unbind, isBound, rebind) => {
+      createGlspClientModule({ bind, unbind, isBound, rebind }, { logger: options.logger });
+   });
+   const container = options.initializeDiagramContainer(
+      new Container(),
+      createDiagramOptionsModule(diagramOptions),
+      STANDALONE_MODULE_CONFIG,
+      hydraniumModule
+   );
+   // After the container is built rather than in a module, so the host's own
+   // binding wins wherever its module sits in the order.
+   if (!container.isBound(TYPES.IContextMenuService)) {
+      container.bind(TYPES.IContextMenuService).toConstantValue({ show: () => undefined });
+   }
+
+   const toDispose = new DisposableCollection();
+   // Pushed first, so it runs last: `unbindAll` reaches `disposeClientSession`
+   // through the model source's pre-destroy hook, after the listeners are gone.
+   toDispose.push({ dispose: () => container.unbindAll() });
+   const dispose = (): void => toDispose.dispose();
+   try {
+      const loader = container.get(DiagramLoader);
+      await loader.load();
+      // A loader that is not the framework's rejects on a failure instead.
+      const loadOutcome = (loader instanceof HydraniumDiagramLoader ? loader.loadOutcome : undefined) ?? { status: 'loaded' };
+      // A model that never arrived has no use for the accommodations, and when
+      // the dispatcher is what failed, every later dispatch rejects too.
+      if (loadOutcome.status === 'failed') {
+         return { container, loadOutcome, dispose };
+      }
+      const dispatcher = container.get<GLSPActionDispatcher>(TYPES.IActionDispatcher);
+      // The bounds the fit measures come from the hidden rendering pass inside
+      // `load`; a fit dispatched before it has nothing to measure and leaves the
+      // viewport where it was.
+      await dispatcher.dispatch(FitToScreenAction.create([], { padding: DIAGRAM_FIT_PADDING, maxZoom: 1, animate: false }));
+
+      // By id and not through `mount`: the load's first render replaced that
+      // element, and a listener on the replaced one never fires.
+      const live = document.getElementById(mount.id);
+      if (live === null) {
+         throw new Error(`mountGlspDiagram: the element '${mount.id}' left the document while the diagram loaded`);
+      }
+      toDispose.push(
+         trackCanvasBounds(live, dispatcher, container.get(EditorContextService), container.get<Logger>(HydraniumClientTypes.Logger))
+      );
+      toDispose.push(enableTouchDragging(live));
+      return { container, loadOutcome, dispose };
+   } catch (err: unknown) {
+      // The caller gets no mount to dispose, so the session would outlive it.
+      toDispose.dispose();
+      throw err;
+   }
+}
+
+function trackCanvasBounds(
+   mount: HTMLElement,
+   dispatcher: GLSPActionDispatcher,
+   editorContext: EditorContextService,
+   logger: Logger
+): Disposable {
+   const update = (): void => {
+      const box = mount.getBoundingClientRect();
+      if (box.width === 0 || box.height === 0) {
+         return;
+      }
+      const bounds = { x: box.left + window.scrollX, y: box.top + window.scrollY, width: box.width, height: box.height };
+      // Against the model's bounds rather than the last ones sent, since sprotty
+      // sets them too on `window.resize`; and skipped when equal, since every
+      // page scroll lands here and each dispatch redraws the diagram.
+      if (!Bounds.equals(bounds, editorContext.canvasBounds)) {
+         dispatcher
+            .dispatch(InitializeCanvasBoundsAction.create(bounds))
+            .catch((err: unknown) => logger.error("Failed to update the diagram's canvas bounds", err));
+      }
+   };
+   const observer = new ResizeObserver(update);
+   for (let element: HTMLElement | null = mount; element !== null; element = element.parentElement) {
+      observer.observe(element);
+   }
+   document.addEventListener('scroll', update, { capture: true, passive: true });
+   return {
+      dispose: () => {
+         observer.disconnect();
+         document.removeEventListener('scroll', update, { capture: true });
+      }
+   };
+}

package/src/index.ts

@@ -15,6 +15,7 @@
 export * from './action-dispatcher';
 export * from './diagram-load-failed';
 export * from './diagram-loader';
+export * from './diagram-mount';
 export * from './edge';
 export * from './glsp-client';
 export * from './glsp-client-module';
@@ -22,4 +23,5 @@ export * from './hidden-bounds-updater';
 export * from './select-mouse-listener';
 export * from './sprotty-logger-adapter';
 export * from './status-overlay';
+export * from './touch-input';
 export * from './types';

package/src/touch-input.ts

@@ -0,0 +1,103 @@
+/********************************************************************************
+ * Copyright (c) 2026 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the MIT License which is available in the project root.
+ *
+ * SPDX-License-Identifier: MIT
+ ********************************************************************************/
+
+import { type Disposable, DisposableCollection } from '@hydranium/protocol';
+
+/**
+ * Re-emit touch gestures over `mount` as the mouse events its canvas binds.
+ *
+ * sprotty's `MouseTool` registers `mousedown`, `mousemove` and `mouseup` and no
+ * pointer or touch listener, and a browser synthesizes mouse events for a tap
+ * and not for a drag, so a finger drag reaches the diagram as a complete
+ * pointer stream that moves nothing, with a clean console and a full model.
+ *
+ * A shim on the host rather than a change to the diagram client, because the
+ * gap is in which event family is bound: re-emitting the gesture as the bound
+ * family needs nothing from the model, the tools or the container. Pairs with
+ * `touch-action: none` on the same element, without which the browser takes the
+ * drag as a pan and cancels the pointer stream before the second move.
+ *
+ * Mouse and pen pointers are left alone: the canvas already hears those, and
+ * forwarding them would run every gesture twice. So is a second finger while
+ * one drags, since the canvas knows one mouse and its press would end the drag,
+ * and a press on a text field, which needs the browser's own press to take the
+ * focus and the caret.
+ */
+export function enableTouchDragging(mount: HTMLElement): Disposable {
+   /** The finger that started the drag and the element under it; every event of
+    *  the drag goes to that element. */
+   let drag: { readonly pointerId: number; readonly target: Element | null } | undefined;
+
+   const dispatch = (type: 'mousedown' | 'mousemove' | 'mouseup', source: PointerEvent): void => {
+      drag?.target?.dispatchEvent(
+         new MouseEvent(type, {
+            bubbles: true,
+            cancelable: true,
+            clientX: source.clientX,
+            clientY: source.clientY,
+            button: 0,
+            buttons: type === 'mouseup' ? 0 : 1,
+            view: window
+         })
+      );
+   };
+
+   const press = (event: PointerEvent): void => {
+      if (event.pointerType !== 'touch' || drag !== undefined || isTextField(event.target)) {
+         return;
+      }
+      // Cancelled, or the browser follows a tap with mouse events of its own and
+      // the canvas hears the gesture twice; a `click` still follows.
+      event.preventDefault();
+      // Without the capture the stream stops when the finger leaves the element
+      // it started on, which during a node drag is immediately.
+      mount.setPointerCapture(event.pointerId);
+      drag = { pointerId: event.pointerId, target: document.elementFromPoint(event.clientX, event.clientY) };
+      // A priming move BEFORE the press, or the drag is a silent no-op: sprotty's
+      // `MousePositionTracker` writes the origin the change-bounds tool reads at
+      // `mousedown` on `mousemove` alone, so a pointer that never hovered leaves
+      // it unset and the node is dropped at 0,0.
+      dispatch('mousemove', event);
+      dispatch('mousedown', event);
+   };
+
+   const move = (event: PointerEvent): void => {
+      if (event.pointerId === drag?.pointerId) {
+         dispatch('mousemove', event);
+      }
+   };
+
+   const release = (event: PointerEvent): void => {
+      if (event.pointerId !== drag?.pointerId) {
+         return;
+      }
+      dispatch('mouseup', event);
+      drag = undefined;
+   };
+
+   const listeners: ['pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel', (event: PointerEvent) => void][] = [
+      ['pointerdown', press],
+      ['pointermove', move],
+      ['pointerup', release],
+      // The browser fires `pointercancel` instead of `pointerup` when it takes
+      // the pointer over; without a release here the next touch resumes the
+      // abandoned drag.
+      ['pointercancel', release]
+   ];
+   const toDispose = new DisposableCollection();
+   for (const [type, listener] of listeners) {
+      mount.addEventListener(type, listener);
+      toDispose.push({ dispose: () => mount.removeEventListener(type, listener) });
+   }
+   return toDispose;
+}
+
+function isTextField(target: EventTarget | null): boolean {
+   return target instanceof Element && target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])') !== null;
+}