graphwise-reactodia 0.0.1-TR2 → 0.0.1-TR20

package/dist/cjs/graphwise-reactodia.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CII9aUQC.js');
+var index = require('./index-DtzCybH4.js');
 var appGlobals = require('./app-globals-CcJr5lkF.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["graphwise-reactodia.cjs",[[0,"graphwise-reactodia",{"currentRepository":[1,"current-repository"],"queryFunction":[16,"query-function"],"language":[1],"providerSettings":[16,"provider-settings"]},null,{"currentRepository":["onProviderSettingsChange"],"providerSettings":["onProviderSettingsChange"],"language":["onLanguageChange"]}]]]], options);
+  return index.bootstrapLazy([["graphwise-reactodia.cjs",[[0,"graphwise-reactodia",{"currentRepository":[1,"current-repository"],"config":[16],"language":[1],"providerSettings":[16,"provider-settings"],"theme":[1]},null,{"currentRepository":["onCurrentRepositoryChange"],"language":["onLanguageOrSettingsChange"],"providerSettings":["onLanguageOrSettingsChange"],"theme":["onThemeChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{index-CII9aUQC.js → index-DtzCybH4.js}

@@ -289,6 +289,21 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   return propValue;
 };
 var getElement = (ref) => getHostRef(ref).$hostElement$ ;
+
+// src/runtime/event-emitter.ts
+var createEvent = (ref, name, flags) => {
+  const elm = getElement(ref);
+  return {
+    emit: (detail) => {
+      return emitEvent(elm, name, {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail
+      });
+    }
+  };
+};
 var emitEvent = (elm, name, opts) => {
   const ev = plt.ce(name, opts);
   elm.dispatchEvent(ev);
@@ -1205,6 +1220,7 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
 
 exports.Host = Host;
 exports.bootstrapLazy = bootstrapLazy;
+exports.createEvent = createEvent;
 exports.getElement = getElement;
 exports.h = h;
 exports.promiseResolve = promiseResolve;

package/dist/cjs/index.cjs.js

@@ -1,2 +1,31 @@
 'use strict';
 
+var nodeAction = require('./node-action-DkJ5ct17.js');
+
+/**
+ * Name of the DOM event the `graphwise-reactodia` element dispatches for every event.
+ */
+const GRAPHWISE_REACTODIA_EVENT = 'graphwiseReactodiaEvent';
+
+exports.CLEAR_DIAGRAM_STORAGE_EVENT = nodeAction.CLEAR_DIAGRAM_STORAGE_EVENT;
+Object.defineProperty(exports, "ErrorCode", {
+	enumerable: true,
+	get: function () { return nodeAction.ErrorCode; }
+});
+Object.defineProperty(exports, "EventType", {
+	enumerable: true,
+	get: function () { return nodeAction.EventType; }
+});
+Object.defineProperty(exports, "MenuItem", {
+	enumerable: true,
+	get: function () { return nodeAction.MenuItem; }
+});
+Object.defineProperty(exports, "NodeAction", {
+	enumerable: true,
+	get: function () { return nodeAction.NodeAction; }
+});
+Object.defineProperty(exports, "ToolbarDock", {
+	enumerable: true,
+	get: function () { return nodeAction.ToolbarDock; }
+});
+exports.GRAPHWISE_REACTODIA_EVENT = GRAPHWISE_REACTODIA_EVENT;

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-CII9aUQC.js');
+var index = require('./index-DtzCybH4.js');
 var appGlobals = require('./app-globals-CcJr5lkF.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["graphwise-reactodia.cjs",[[0,"graphwise-reactodia",{"currentRepository":[1,"current-repository"],"queryFunction":[16,"query-function"],"language":[1],"providerSettings":[16,"provider-settings"]},null,{"currentRepository":["onProviderSettingsChange"],"providerSettings":["onProviderSettingsChange"],"language":["onLanguageChange"]}]]]], options);
+  return index.bootstrapLazy([["graphwise-reactodia.cjs",[[0,"graphwise-reactodia",{"currentRepository":[1,"current-repository"],"config":[16],"language":[1],"providerSettings":[16,"provider-settings"],"theme":[1]},null,{"currentRepository":["onCurrentRepositoryChange"],"language":["onLanguageOrSettingsChange"],"providerSettings":["onLanguageOrSettingsChange"],"theme":["onThemeChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/node-action-DkJ5ct17.js

@@ -0,0 +1,96 @@
+'use strict';
+
+/**
+ * Event name for clearing the local store state of the diagram. There is an event listener listening for it, which
+ * will clear the local store state, whenever this event is fired.
+ */
+const CLEAR_DIAGRAM_STORAGE_EVENT = 'graphwise-reactodia:clear-diagram-storage';
+
+/**
+ * The kind of event the wrapper announces to the host. It selects the payload of an {@link EventDetail}.
+ */
+exports.EventType = void 0;
+(function (EventType) {
+    EventType["ERROR"] = "error";
+    EventType["TEXT_SEARCH"] = "text-search";
+})(exports.EventType || (exports.EventType = {}));
+
+/**
+ * The stable category of a reported error. The host uses it to choose its own message.
+ */
+exports.ErrorCode = void 0;
+(function (ErrorCode) {
+    /** A required prop is missing. */
+    ErrorCode["MISSING_REQUIRED_PROP"] = "missing-required-prop";
+    /** A SPARQL data provider call failed. */
+    ErrorCode["DATA_FETCH"] = "data-fetch";
+    /** The startup load, a reload or a repository switch failed. */
+    ErrorCode["DIAGRAM_LOAD"] = "diagram-load";
+    /** The uploaded file was rejected or its import failed. */
+    ErrorCode["DIAGRAM_IMPORT"] = "diagram-import";
+    /** Reading the diagram from local storage failed. */
+    ErrorCode["LOCAL_DIAGRAM_READ"] = "local-diagram-read";
+    /** Saving the diagram in local storage failed. */
+    ErrorCode["LOCAL_DIAGRAM_SAVE"] = "local-diagram-save";
+    /** The host's UI configuration has an unknown value, which is skipped. */
+    ErrorCode["UNKNOWN_UI_CONFIG"] = "unknown-ui-config";
+})(exports.ErrorCode || (exports.ErrorCode = {}));
+
+/**
+ * The side or corner of the canvas a toolbar is docked to.
+ */
+exports.ToolbarDock = void 0;
+(function (ToolbarDock) {
+    ToolbarDock["NW"] = "nw";
+    ToolbarDock["N"] = "n";
+    ToolbarDock["NE"] = "ne";
+    ToolbarDock["E"] = "e";
+    ToolbarDock["SE"] = "se";
+    ToolbarDock["S"] = "s";
+    ToolbarDock["SW"] = "sw";
+    ToolbarDock["W"] = "w";
+})(exports.ToolbarDock || (exports.ToolbarDock = {}));
+
+/**
+ * An entry of the workspace main menu.
+ */
+exports.MenuItem = void 0;
+(function (MenuItem) {
+    /** Removes all nodes from the diagram. */
+    MenuItem["CLEAR_ALL"] = "clear-all";
+    /** Exports the diagram as a PNG image. */
+    MenuItem["EXPORT_PNG"] = "export-png";
+    /** Exports the diagram as an SVG image. */
+    MenuItem["EXPORT_SVG"] = "export-svg";
+    /** Prints the diagram. */
+    MenuItem["PRINT"] = "print";
+    /** Exports the diagram as a JSON file. */
+    MenuItem["EXPORT_JSON"] = "export-json";
+    /** Imports a diagram from a JSON file. */
+    MenuItem["IMPORT_JSON"] = "import-json";
+})(exports.MenuItem || (exports.MenuItem = {}));
+
+/**
+ * A button shown around a selected node that acts on it.
+ */
+exports.NodeAction = void 0;
+(function (NodeAction) {
+    /** Groups or ungroups the selected nodes. */
+    NodeAction["GROUP"] = "group";
+    /** Removes the node from the diagram. */
+    NodeAction["REMOVE"] = "remove";
+    /** Expands or collapses the node to show its properties. */
+    NodeAction["EXPAND"] = "expand";
+    /** Opens the node IRI. */
+    NodeAction["OPEN_LINK"] = "open-link";
+    /** Opens the menu to navigate to connected nodes. */
+    NodeAction["CONNECTIONS"] = "connections";
+    /** Searches for nodes connected to this one. */
+    NodeAction["ADD_TO_FILTER"] = "add-to-filter";
+    /** Adds an annotation to the node. */
+    NodeAction["ANNOTATE"] = "annotate";
+    /** Draws a new link from the node; for an entity, only in authoring mode. */
+    NodeAction["ESTABLISH_LINK"] = "establish-link";
+})(exports.NodeAction || (exports.NodeAction = {}));
+
+exports.CLEAR_DIAGRAM_STORAGE_EVENT = CLEAR_DIAGRAM_STORAGE_EVENT;

package/dist/collection/components/graphwise-reactodia/graphwise-reactodia.css

@@ -1,10 +1,66 @@
+graphwise-reactodia {
+  /** @prop --graphwise-reactodia-type-color-01: Color slot 1 of 20 for node types */
+  --_graphwise-reactodia-type-color-01: var(--graphwise-reactodia-type-color-01);
+  /** @prop --graphwise-reactodia-type-color-02: Color slot 2 of 20 for node types */
+  --_graphwise-reactodia-type-color-02: var(--graphwise-reactodia-type-color-02);
+  /** @prop --graphwise-reactodia-type-color-03: Color slot 3 of 20 for node types */
+  --_graphwise-reactodia-type-color-03: var(--graphwise-reactodia-type-color-03);
+  /** @prop --graphwise-reactodia-type-color-04: Color slot 4 of 20 for node types */
+  --_graphwise-reactodia-type-color-04: var(--graphwise-reactodia-type-color-04);
+  /** @prop --graphwise-reactodia-type-color-05: Color slot 5 of 20 for node types */
+  --_graphwise-reactodia-type-color-05: var(--graphwise-reactodia-type-color-05);
+  /** @prop --graphwise-reactodia-type-color-06: Color slot 6 of 20 for node types */
+  --_graphwise-reactodia-type-color-06: var(--graphwise-reactodia-type-color-06);
+  /** @prop --graphwise-reactodia-type-color-07: Color slot 7 of 20 for node types */
+  --_graphwise-reactodia-type-color-07: var(--graphwise-reactodia-type-color-07);
+  /** @prop --graphwise-reactodia-type-color-08: Color slot 8 of 20 for node types */
+  --_graphwise-reactodia-type-color-08: var(--graphwise-reactodia-type-color-08);
+  /** @prop --graphwise-reactodia-type-color-09: Color slot 9 of 20 for node types */
+  --_graphwise-reactodia-type-color-09: var(--graphwise-reactodia-type-color-09);
+  /** @prop --graphwise-reactodia-type-color-10: Color slot 10 of 20 for node types */
+  --_graphwise-reactodia-type-color-10: var(--graphwise-reactodia-type-color-10);
+  /** @prop --graphwise-reactodia-type-color-11: Color slot 11 of 20 for node types */
+  --_graphwise-reactodia-type-color-11: var(--graphwise-reactodia-type-color-11);
+  /** @prop --graphwise-reactodia-type-color-12: Color slot 12 of 20 for node types */
+  --_graphwise-reactodia-type-color-12: var(--graphwise-reactodia-type-color-12);
+  /** @prop --graphwise-reactodia-type-color-13: Color slot 13 of 20 for node types */
+  --_graphwise-reactodia-type-color-13: var(--graphwise-reactodia-type-color-13);
+  /** @prop --graphwise-reactodia-type-color-14: Color slot 14 of 20 for node types */
+  --_graphwise-reactodia-type-color-14: var(--graphwise-reactodia-type-color-14);
+  /** @prop --graphwise-reactodia-type-color-15: Color slot 15 of 20 for node types */
+  --_graphwise-reactodia-type-color-15: var(--graphwise-reactodia-type-color-15);
+  /** @prop --graphwise-reactodia-type-color-16: Color slot 16 of 20 for node types */
+  --_graphwise-reactodia-type-color-16: var(--graphwise-reactodia-type-color-16);
+  /** @prop --graphwise-reactodia-type-color-17: Color slot 17 of 20 for node types */
+  --_graphwise-reactodia-type-color-17: var(--graphwise-reactodia-type-color-17);
+  /** @prop --graphwise-reactodia-type-color-18: Color slot 18 of 20 for node types */
+  --_graphwise-reactodia-type-color-18: var(--graphwise-reactodia-type-color-18);
+  /** @prop --graphwise-reactodia-type-color-19: Color slot 19 of 20 for node types */
+  --_graphwise-reactodia-type-color-19: var(--graphwise-reactodia-type-color-19);
+  /** @prop --graphwise-reactodia-type-color-20: Color slot 20 of 20 for node types */
+  --_graphwise-reactodia-type-color-20: var(--graphwise-reactodia-type-color-20);
+  /** @prop --graphwise-reactodia-type-color-contrast: Contrast color for categorical node styles (the letter inside the circle) */
+  --_graphwise-reactodia-type-color-contrast: var(--graphwise-reactodia-type-color-contrast, #fff);
+}
+
 graphwise-reactodia {
   display: block;
   width: 100%;
-  height: 75vh;
+  height: 100%;
 }
 graphwise-reactodia .reactodia-container {
   position: relative;
   width: 100%;
   height: 100%;
+}
+graphwise-reactodia .reactodia-standard-element__thumbnail:not(:has(img)) {
+  background: var(--reactodia-element-style-color);
+  border-radius: 50%;
+  color: var(--_graphwise-reactodia-type-color-contrast);
+}
+graphwise-reactodia .reactodia-note-annotation {
+  overflow: auto;
+}
+graphwise-reactodia .reactodia-note-annotation__editor {
+  overflow-wrap: anywhere;
 }

package/dist/collection/components/graphwise-reactodia/graphwise-reactodia.js

@@ -1,69 +1,112 @@
 import { h, Host } from "@stencil/core";
-import { exportReactodiaLayout, mountReactodia, unmountReactodia, updateReactodia } from "./reactodia-app";
+import { mountReactodia, unmountReactodia, updateReactodia } from "./reactodia-app";
+import { LanguageKey } from "./i18n/language-key";
+import { ErrorCode } from "./models/error/error-code";
+import { SubscriptionList } from "./models/subscription-list";
+import { service } from "./providers/service/service-inject";
+import { ErrorService } from "./services/error/error.service";
+import { EventService } from "./services/event/event.service";
+import { resetColors } from "./styles/type-style.resolver";
+const errorService = service(ErrorService);
+const eventService = service(EventService);
 /**
  * A web component that renders a graph with the Reactodia workspace.
  *
  * The component is backed by a SPARQL endpoint but is endpoint-agnostic: the host passes
- * the active repository's endpoint via `current-repository` and a `queryFunction` that
- * performs the actual HTTP request. Reactodia fetches all node, link and type data lazily
- * through them; the canvas starts empty and the user populates it via the search bar.
+ * the active repository's endpoint via `current-repository` and a `config.queryFunction`
+ * that performs the actual HTTP request. Reactodia fetches all node, link and type data
+ * lazily through them; the canvas starts empty and the user populates it via the search bar.
  *
  * The component is a thin wrapper around Reactodia: query configuration lives outside the
  * wrapper and is supplied through the `providerSettings` prop.
  */
 export class GraphwiseReactodia {
     constructor() {
+        this.subscriptions = new SubscriptionList();
         /**
          * UI language code (e.g. `en`, `fr`) for the Reactodia interface. Defaults to English.
          */
-        this.language = 'en';
+        this.language = LanguageKey.EN;
+        /**
+         * `connectedCallback` and the watchers can run before all props are set: when the component's
+         * code is already loaded, the instance is created as soon as the
+         * element is attached, and every prop set after that triggers its watcher. Rendering at that
+         * point would initialise the graph without all props. `componentDidLoad` runs once the initial
+         * props are set, so we use it to determine when it's safe to render.
+         */
+        this.isComponentLoaded = false;
     }
-    onProviderSettingsChange() {
+    onCurrentRepositoryChange() {
         this.renderGraph();
     }
-    onLanguageChange() {
+    onLanguageOrSettingsChange() {
         // The translations are evaluated by the workspace at construction, so the only way
-        // to re-translate the UI is to re-create the graph. We carry the
-        // current diagram across the remount so switching languages does not wipe the canvas.
-        const diagram = exportReactodiaLayout();
-        this.renderGraph(diagram);
+        // to re-translate the UI is to re-create the graph.
+        // Setting changes should keep the current diagram despite possible
+        this.renderGraph(true);
+    }
+    onThemeChange() {
+        resetColors();
+        this.renderGraph(true);
+    }
+    connectedCallback() {
+        this.subscribeToEvents();
+        this.renderGraph();
     }
     componentDidLoad() {
+        this.isComponentLoaded = true;
         this.renderGraph();
     }
     disconnectedCallback() {
+        this.subscriptions.unsubscribeAll();
         if (this.reactRoot) {
             unmountReactodia(this.reactRoot);
             this.reactRoot = undefined;
         }
     }
     render() {
-        return (h(Host, { key: '3fca0e2163335fc2cb0fc3c57291e4f29234f2c2' }));
+        return (h(Host, { key: 'b5997ab551d1afe62b4a81166aca98a7d62f4e35' }));
+    }
+    subscribeToEvents() {
+        this.subscriptions.add(eventService.subscribe((detail) => this.eventEmitter.emit(detail)));
     }
-    renderGraph(initialDiagram) {
+    renderGraph(isReloading) {
+        var _a;
+        if (!this.isComponentLoaded) {
+            return;
+        }
         if (!this.currentRepository) {
-            throw new Error('currentRepository is required');
+            throw this.reportMissingPropError('currentRepository is required');
+        }
+        if (!((_a = this.config) === null || _a === void 0 ? void 0 : _a.queryFunction)) {
+            throw this.reportMissingPropError('config.queryFunction is required');
         }
-        if (!this.queryFunction) {
-            throw new Error('queryFunction is required');
+        if (!this.providerSettings) {
+            throw this.reportMissingPropError('providerSettings is required');
         }
         if (!this.hostElement) {
             return;
         }
         const props = {
-            initialDiagram,
+            isReload: isReloading,
             currentRepository: this.currentRepository,
-            queryFunction: this.queryFunction,
+            config: this.config,
             language: this.language,
             providerSettings: this.providerSettings,
+            theme: this.theme,
         };
-        if (this.reactRoot && !initialDiagram) {
+        if (this.reactRoot && !isReloading) {
             void updateReactodia(props);
         }
         else {
             this.reactRoot = mountReactodia(this.hostElement, props);
         }
     }
+    reportMissingPropError(message) {
+        const error = new Error(message);
+        errorService.report(ErrorCode.MISSING_REQUIRED_PROP, error);
+        return error;
+    }
     static get is() { return "graphwise-reactodia"; }
     static get originalStyleUrls() {
         return {
@@ -87,35 +130,35 @@ export class GraphwiseReactodia {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The active repository id. Appended to {@link queryFunction} as the request `url`;\nchanging it re-points the graph at the new repository (and resets the canvas),\nwhich is how runtime repository changes are handled."
+                    "text": "The active repository id. Appended to {@link queryFunction } as the request `url`;\nchanging it re-points the graph at the new repository (and resets the canvas),\nwhich is how runtime repository changes are handled."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false
             },
-            "queryFunction": {
+            "config": {
                 "type": "unknown",
-                "attribute": "query-function",
+                "attribute": "config",
                 "mutable": false,
                 "complexType": {
-                    "original": "SparqlQueryFunction",
-                    "resolved": "(params: { url: string; body?: string; headers: { [header: string]: string; }; method: string; signal?: AbortSignal; }) => Promise<Response>",
+                    "original": "ReactodiaConfig",
+                    "resolved": "ReactodiaConfig",
                     "references": {
-                        "SparqlQueryFunction": {
+                        "ReactodiaConfig": {
                             "location": "import",
-                            "path": "@reactodia/workspace",
-                            "id": "node_modules::SparqlQueryFunction"
+                            "path": "./models/reactodia-config",
+                            "id": "src/components/graphwise-reactodia/models/reactodia-config.ts::ReactodiaConfig"
                         }
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "HTTP transport for the SPARQL requests. Set by the host so requests go through the host's HTTP layer (auth,\ninterceptors) instead of a built-in `fetch`."
+                    "text": "Host-supplied configuration: the SPARQL `queryFunction` transport, an optional `seed`\nset of entities to pre-populate the canvas with and an optional `ui` configuration.\nA DOM property (an object, not an attribute) passed in from outside the wrapper.\n\nRead once on mount; not watched, as it only sets up the data source and initial canvas."
                 },
                 "getter": false,
                 "setter": false
@@ -125,9 +168,15 @@ export class GraphwiseReactodia {
                 "attribute": "language",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "LanguageKey",
+                    "resolved": "LanguageKey.EN | LanguageKey.FR",
+                    "references": {
+                        "LanguageKey": {
+                            "location": "import",
+                            "path": "./i18n/language-key",
+                            "id": "src/components/graphwise-reactodia/i18n/language-key.ts::LanguageKey"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -138,7 +187,7 @@ export class GraphwiseReactodia {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "'en'"
+                "defaultValue": "LanguageKey.EN"
             },
             "providerSettings": {
                 "type": "unknown",
@@ -151,7 +200,7 @@ export class GraphwiseReactodia {
                         "SparqlDataProviderSettings": {
                             "location": "import",
                             "path": "@reactodia/workspace",
-                            "id": "node_modules::SparqlDataProviderSettings"
+                            "id": "reactodia-workspace/dist/typings/workspace.d.ts::SparqlDataProviderSettings"
                         }
                     }
                 },
@@ -159,24 +208,70 @@ export class GraphwiseReactodia {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Query preset for the SPARQL data provider, owned and configured by the host. A DOM\nproperty (an object, not an attribute) passed in from outside the wrapper. When omitted,\nthe data provider falls back to Reactodia's generic OWL/RDFS preset. Changing it rebuilds\nthe data provider and resets the canvas."
+                    "text": "Query preset for the SPARQL data provider, owned and configured by the host. A DOM\nproperty (an object, not an attribute) passed in from outside the wrapper. Required: the\nwrapper has no default preset and throws when it is missing. Changing it rebuilds the data\nprovider and reloads the graph with it, keeping the current diagram."
                 },
                 "getter": false,
                 "setter": false
+            },
+            "theme": {
+                "type": "string",
+                "attribute": "theme",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The reactodia theme to use"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "eventEmitter",
+                "name": "graphwiseReactodiaEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires for every event to the host, differentiated by `detail.type`."
+                },
+                "complexType": {
+                    "original": "EventDetail",
+                    "resolved": "{ type: EventType.ERROR; payload: ErrorReport; } | { type: EventType.TEXT_SEARCH; payload?: undefined; }",
+                    "references": {
+                        "EventDetail": {
+                            "location": "import",
+                            "path": "./models/event/event-detail",
+                            "id": "src/components/graphwise-reactodia/models/event/event-detail.ts::EventDetail"
+                        }
+                    }
+                }
+            }];
+    }
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
                 "propName": "currentRepository",
-                "methodName": "onProviderSettingsChange"
+                "methodName": "onCurrentRepositoryChange"
+            }, {
+                "propName": "language",
+                "methodName": "onLanguageOrSettingsChange"
             }, {
                 "propName": "providerSettings",
-                "methodName": "onProviderSettingsChange"
+                "methodName": "onLanguageOrSettingsChange"
             }, {
-                "propName": "language",
-                "methodName": "onLanguageChange"
+                "propName": "theme",
+                "methodName": "onThemeChange"
             }];
     }
 }

package/dist/collection/components/graphwise-reactodia/i18n/language-key.js

@@ -0,0 +1,5 @@
+export var LanguageKey;
+(function (LanguageKey) {
+    LanguageKey["EN"] = "en";
+    LanguageKey["FR"] = "fr";
+})(LanguageKey || (LanguageKey = {}));

package/dist/collection/components/graphwise-reactodia/i18n/translations.js

@@ -1,4 +1,9 @@
+import enTranslation from "./en.reactodia.translation.json";
 import frTranslation from "./fr.reactodia.translation.json";
+import { LanguageKey } from "./language-key";
+// English is provided by default from reactodia, so the English bundle holds only our own keys and overrides. If
+// A key is missing, reactodia defaults to its own translation.
 export const TRANSLATIONS = {
-    'fr': frTranslation
+    [LanguageKey.EN]: enTranslation,
+    [LanguageKey.FR]: frTranslation
 };

package/dist/collection/components/graphwise-reactodia/menu/export-diagram-action.js

@@ -0,0 +1,19 @@
+import { createElement } from "react";
+import { ToolbarAction, useTranslation, useWorkspace } from "@reactodia/workspace";
+import { service } from "../providers/service/service-inject";
+import { DiagramFileService } from "../services/diagram-file/diagram-file.service";
+/**
+ * Exports the diagram as a JSON file.
+ */
+export function ExportDiagramAction() {
+    const { model } = useWorkspace();
+    const t = useTranslation();
+    const diagramFileService = service(DiagramFileService);
+    const exportDiagram = () => {
+        const timestamp = new Date().toISOString().replace(/[-:]|\.\d+Z$/g, '');
+        diagramFileService.download(model.exportLayout(), `diagram-${timestamp}${DiagramFileService.FILE_EXTENSION}`);
+    };
+    return createElement(ToolbarAction, 
+    // The same icon as ToolbarActionSave. We don't use that action, since it disables saving on refresh
+    { className: 'reactodia-toolbar-action__save', title: t.text('graphwise_toolbar_action.export_json.title'), onSelect: exportDiagram }, t.text('graphwise_toolbar_action.export_json.label'));
+}

package/dist/collection/components/graphwise-reactodia/menu/graphwise-menu.js

@@ -0,0 +1,24 @@
+import { createElement } from "react";
+import { ToolbarActionClearAll, ToolbarActionExport } from "@reactodia/workspace";
+import { MenuItem } from "../models/ui/menu-item";
+import { ExportDiagramAction } from "./export-diagram-action";
+import { ImportDiagramAction } from "./import-diagram-action";
+/**
+ * Each menu entry.
+ *
+ * Passing a `menu` to the `DefaultWorkspace` replaces its default actions, so they are listed here again.
+ */
+const MENU_ITEMS = {
+    [MenuItem.CLEAR_ALL]: (key) => createElement(ToolbarActionClearAll, { key }),
+    [MenuItem.EXPORT_PNG]: (key) => createElement(ToolbarActionExport, { key, kind: 'exportRaster' }),
+    [MenuItem.EXPORT_SVG]: (key) => createElement(ToolbarActionExport, { key, kind: 'exportSvg' }),
+    [MenuItem.PRINT]: (key) => createElement(ToolbarActionExport, { key, kind: 'print' }),
+    [MenuItem.EXPORT_JSON]: (key) => createElement(ExportDiagramAction, { key }),
+    [MenuItem.IMPORT_JSON]: (key) => createElement(ImportDiagramAction, { key })
+};
+/**
+ * The menu entries for the given menu items.
+ */
+export function createMenuItems(items) {
+    return items.map((item) => MENU_ITEMS[item](item));
+}

package/dist/collection/components/graphwise-reactodia/menu/import-diagram-action.js

@@ -0,0 +1,31 @@
+import { createElement } from "react";
+import { ToolbarActionOpen, useTranslation, useWorkspace } from "@reactodia/workspace";
+import { service } from "../providers/service/service-inject";
+import { DiagramService } from "../services/diagram/diagram.service";
+import { DiagramFileService } from "../services/diagram-file/diagram-file.service";
+import { ErrorService } from "../services/error/error.service";
+import { ErrorCode } from "../models/error/error-code";
+/**
+ * Imports a diagram from a JSON file into the workspace.
+ */
+export function ImportDiagramAction() {
+    const { model } = useWorkspace();
+    const t = useTranslation();
+    const diagramFileService = service(DiagramFileService);
+    const diagramService = service(DiagramService);
+    const errorService = service(ErrorService);
+    const importDiagram = async (file) => {
+        try {
+            const diagram = await diagramFileService.read(file);
+            await diagramService.importDiagram(model, model.dataProvider, diagram);
+        }
+        catch (error) {
+            errorService.report(ErrorCode.DIAGRAM_IMPORT, error);
+        }
+    };
+    return createElement(ToolbarActionOpen, {
+        title: t.text('graphwise_toolbar_action.import_json.title'),
+        fileAccept: DiagramFileService.FILE_EXTENSION,
+        onSelect: (file) => void importDiagram(file)
+    }, t.text('graphwise_toolbar_action.import_json.label'));
+}