graphwise-reactodia 0.0.1-TR13 → 0.0.1-TR14

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

@@ -31376,8 +31376,10 @@ let DiagramService = DiagramService_1 = class DiagramService {
                 clearTimeout(notifyTimer);
             }
             notifyTimer = setTimeout(() => {
+                if (notifyTimer) {
+                    onChangeCallback(model.exportLayout());
+                }
                 notifyTimer = undefined;
-                onChangeCallback(model.exportLayout());
             }, DiagramService_1.NOTIFY_DEBOUNCE_MS);
         };
         model.history.events.on(DiagramService_1.HISTORY_CHANGED_EVENT, onHistoryChange);
@@ -31385,6 +31387,7 @@ let DiagramService = DiagramService_1 = class DiagramService {
             model.history.events.off(DiagramService_1.HISTORY_CHANGED_EVENT, onHistoryChange);
             if (notifyTimer) {
                 clearTimeout(notifyTimer);
+                notifyTimer = undefined;
             }
         };
     }
@@ -31526,34 +31529,33 @@ class SubscriptionList {
     }
 }
 
-const NODE_COLOR_VARIABLES = [
-    '--gw-foreground-visual-diagram-categorical-01',
-    '--gw-foreground-visual-diagram-categorical-02',
-    '--gw-foreground-visual-diagram-categorical-03',
-    '--gw-foreground-visual-diagram-categorical-04',
-    '--gw-foreground-visual-diagram-categorical-05',
-    '--gw-foreground-visual-diagram-categorical-06',
-    '--gw-foreground-visual-diagram-categorical-07',
-    '--gw-foreground-visual-diagram-categorical-08',
-    '--gw-foreground-visual-diagram-categorical-09',
-    '--gw-foreground-visual-diagram-categorical-10',
-    '--gw-foreground-visual-diagram-categorical-11',
-    '--gw-foreground-visual-diagram-categorical-12',
-    '--gw-foreground-visual-diagram-categorical-13',
-    '--gw-foreground-visual-diagram-categorical-14',
-    '--gw-foreground-visual-diagram-categorical-15',
-    '--gw-foreground-visual-diagram-categorical-16',
-    '--gw-foreground-visual-diagram-categorical-17',
-    '--gw-foreground-visual-diagram-categorical-18',
-    '--gw-foreground-visual-diagram-categorical-19',
-    '--gw-foreground-visual-diagram-categorical-20'
-];
 /**
  * Color slot assigned to each type, in the order the types are first seen.
  */
 const typeToIndex = new Map();
-function getColor(variable) {
-    return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+/**
+ * Returns the internal property of the given palette slot, numbered from 1 and padded to two digits as in `_theme.scss`.
+ */
+function getTypeColorProperty(slot) {
+    return `--_graphwise-reactodia-type-color-${String(slot).padStart(2, '0')}`;
+}
+/**
+ * Reads the type palette of the Theme API: the internal properties `_theme.scss` resolves from the ones
+ * the host declares, in slot order up to the first empty one.
+ */
+function getPalette() {
+    const host = document.querySelector('graphwise-reactodia');
+    if (!host) {
+        return [];
+    }
+    const style = getComputedStyle(host);
+    const palette = [];
+    let color = style.getPropertyValue(getTypeColorProperty(1)).trim();
+    while (color) {
+        palette.push(color);
+        color = style.getPropertyValue(getTypeColorProperty(palette.length + 1)).trim();
+    }
+    return palette;
 }
 /**
  * Colors an element by its type: each type takes the next color from the palette, which wraps
@@ -31573,8 +31575,8 @@ const resolveTypeStyle = (types) => {
         index = typeToIndex.size;
         typeToIndex.set(type, index);
     }
-    const color = getColor(NODE_COLOR_VARIABLES[index % NODE_COLOR_VARIABLES.length]);
-    return color ? { color } : undefined;
+    const colors = getPalette();
+    return colors.length ? { color: colors[index % colors.length] } : undefined;
 };
 const resetColors = () => {
     typeToIndex.clear();
@@ -31697,6 +31699,10 @@ let workspaceContext = null;
  * the React root.
  */
 const subscriptions = new SubscriptionList();
+let diagramStorageSubscription;
+const diagramService = service(DiagramService);
+const diagramStorageService = service(DiagramStorageService);
+const eventService = service(EventService);
 /**
  * Builds a Reactodia {@link SparqlDataProvider} for the given endpoint using the supplied
  * query preset. The host owns the query configuration and always passes it in via props.
@@ -31756,20 +31762,30 @@ async function seedGraphToCanvas(context, dataProvider, links, signal) {
  * root in {@link unmountReactodia}.
  */
 function onDiagramChange(model) {
-    const storage = service(DiagramStorageService);
-    const diagramService = service(DiagramService);
-    subscriptions.add(diagramService.subscribeToDiagramChange(model, (diagram) => storage.save(diagram)));
+    subscribeToDiagramChange(model);
+}
+/**
+ * Starts persisting the model's edits to local storage, keeping the subscription in {@link diagramStorageSubscription}.
+ */
+function subscribeToDiagramChange(model) {
+    diagramStorageSubscription === null || diagramStorageSubscription === void 0 ? void 0 : diagramStorageSubscription();
+    diagramStorageSubscription = diagramService.subscribeToDiagramChange(model, (diagram) => diagramStorageService.save(diagram));
+    subscriptions.add(diagramStorageSubscription);
 }
 /**
  * Subscribes to the host's "clear persisted diagram" command so the saved layout is dropped on
  * request (e.g. before a fresh seed should take precedence over previously saved edits). The
  * subscription is tracked in {@link subscriptions} so it is released together with the React
  * root in {@link unmountReactodia}.
+ *
+ * @param model The diagram model whose edits are persisted
  */
-function onClearDiagramStorage() {
-    const storage = service(DiagramStorageService);
-    const eventService = service(EventService);
-    subscriptions.add(eventService.subscribeToClearDiagramStorage(() => storage.clear()));
+function onClearDiagramStorage(model) {
+    subscriptions.add(eventService.subscribeToClearDiagramStorage(() => {
+        // re-subscribe, to avoid any pending debounced saves, which may write over the cleared diagram
+        subscribeToDiagramChange(model);
+        diagramStorageService.clear();
+    }));
 }
 /**
  * The Reactodia workspace React component.
@@ -31788,11 +31804,10 @@ function ReactodiaApp(props) {
         workspaceContext = context;
         const { model } = context;
         onDiagramChange(model);
-        onClearDiagramStorage();
+        onClearDiagramStorage(model);
         const dataProvider = createDataProvider(props);
         const isReload = props.isReload;
-        const savedDiagram = service(DiagramStorageService).load();
-        const diagramService = service(DiagramService);
+        const savedDiagram = diagramStorageService.load();
         if (isReload) {
             // Reload the diagram that is currently on the canvas. This may happen when the host changes the provider
             // settings, or when the user switches the language at runtime, since there is no existing mechanism to
@@ -31828,6 +31843,7 @@ function ReactodiaApp(props) {
         translations: translationsForLanguage(language),
         typeStyleResolver: resolveTypeStyle
     }, reactExports.createElement(DefaultWorkspace, {
+        colorScheme: props.theme,
         menu: reactExports.createElement(GraphwiseMenu),
         // place Undo/redo/layout actions in top right corner.
         actionsToolbar: { dock: 'ne' }
@@ -31869,7 +31885,7 @@ function unmountReactodia(root) {
     root.unmount();
 }
 
-const graphwiseReactodiaCss = "graphwise-reactodia{display:block;width:100%;height:75vh}graphwise-reactodia .reactodia-container{position:relative;width:100%;height:100%}graphwise-reactodia .reactodia-selection-action__link{display:none}";
+const graphwiseReactodiaCss = "graphwise-reactodia{--_graphwise-reactodia-type-color-01:var(--graphwise-reactodia-type-color-01);--_graphwise-reactodia-type-color-02:var(--graphwise-reactodia-type-color-02);--_graphwise-reactodia-type-color-03:var(--graphwise-reactodia-type-color-03);--_graphwise-reactodia-type-color-04:var(--graphwise-reactodia-type-color-04);--_graphwise-reactodia-type-color-05:var(--graphwise-reactodia-type-color-05);--_graphwise-reactodia-type-color-06:var(--graphwise-reactodia-type-color-06);--_graphwise-reactodia-type-color-07:var(--graphwise-reactodia-type-color-07);--_graphwise-reactodia-type-color-08:var(--graphwise-reactodia-type-color-08);--_graphwise-reactodia-type-color-09:var(--graphwise-reactodia-type-color-09);--_graphwise-reactodia-type-color-10:var(--graphwise-reactodia-type-color-10);--_graphwise-reactodia-type-color-11:var(--graphwise-reactodia-type-color-11);--_graphwise-reactodia-type-color-12:var(--graphwise-reactodia-type-color-12);--_graphwise-reactodia-type-color-13:var(--graphwise-reactodia-type-color-13);--_graphwise-reactodia-type-color-14:var(--graphwise-reactodia-type-color-14);--_graphwise-reactodia-type-color-15:var(--graphwise-reactodia-type-color-15);--_graphwise-reactodia-type-color-16:var(--graphwise-reactodia-type-color-16);--_graphwise-reactodia-type-color-17:var(--graphwise-reactodia-type-color-17);--_graphwise-reactodia-type-color-18:var(--graphwise-reactodia-type-color-18);--_graphwise-reactodia-type-color-19:var(--graphwise-reactodia-type-color-19);--_graphwise-reactodia-type-color-20:var(--graphwise-reactodia-type-color-20)}graphwise-reactodia{display:block;width:100%;height:100%}graphwise-reactodia .reactodia-container{position:relative;width:100%;height:100%}graphwise-reactodia .reactodia-selection-action__link{display:none}";
 
 const GraphwiseReactodia = class {
     constructor(hostRef) {
@@ -31904,7 +31920,7 @@ const GraphwiseReactodia = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '6f1115b91eac308ef155978dfe1482f152c38b1b' }));
+        return (index$1.h(index$1.Host, { key: 'b2e584a0f1de975692197473d516219a7aa0f42f' }));
     }
     renderGraph(isReloading) {
         var _a;
@@ -31926,6 +31942,7 @@ const GraphwiseReactodia = class {
             config: this.config,
             language: this.language,
             providerSettings: this.providerSettings,
+            theme: this.theme,
         };
         if (this.reactRoot && !isReloading) {
             void updateReactodia(props);

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

@@ -1,7 +1,50 @@
+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);
+}
+
 graphwise-reactodia {
   display: block;
   width: 100%;
-  height: 75vh;
+  height: 100%;
 }
 graphwise-reactodia .reactodia-container {
   position: relative;

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

@@ -45,7 +45,7 @@ export class GraphwiseReactodia {
         }
     }
     render() {
-        return (h(Host, { key: '6f1115b91eac308ef155978dfe1482f152c38b1b' }));
+        return (h(Host, { key: 'b2e584a0f1de975692197473d516219a7aa0f42f' }));
     }
     renderGraph(isReloading) {
         var _a;
@@ -67,6 +67,7 @@ export class GraphwiseReactodia {
             config: this.config,
             language: this.language,
             providerSettings: this.providerSettings,
+            theme: this.theme,
         };
         if (this.reactRoot && !isReloading) {
             void updateReactodia(props);
@@ -186,15 +187,15 @@ export class GraphwiseReactodia {
                 "attribute": "theme",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The theme currently applied by the host (e.g. `light`, `dark`). The value itself is never read -\nthe node colors are taken from the host's CSS custom properties - it only signals that those\nvalues have changed. The host owns the theme, including whether it follows the OS color scheme,\nso the change is passed in instead of being detected here."
+                    "text": "The reactodia theme to use"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -33,6 +33,10 @@ let workspaceContext = null;
  * the React root.
  */
 const subscriptions = new SubscriptionList();
+let diagramStorageSubscription;
+const diagramService = service(DiagramService);
+const diagramStorageService = service(DiagramStorageService);
+const eventService = service(EventService);
 /**
  * Builds a Reactodia {@link SparqlDataProvider} for the given endpoint using the supplied
  * query preset. The host owns the query configuration and always passes it in via props.
@@ -92,20 +96,30 @@ async function seedGraphToCanvas(context, dataProvider, links, signal) {
  * root in {@link unmountReactodia}.
  */
 function onDiagramChange(model) {
-    const storage = service(DiagramStorageService);
-    const diagramService = service(DiagramService);
-    subscriptions.add(diagramService.subscribeToDiagramChange(model, (diagram) => storage.save(diagram)));
+    subscribeToDiagramChange(model);
+}
+/**
+ * Starts persisting the model's edits to local storage, keeping the subscription in {@link diagramStorageSubscription}.
+ */
+function subscribeToDiagramChange(model) {
+    diagramStorageSubscription === null || diagramStorageSubscription === void 0 ? void 0 : diagramStorageSubscription();
+    diagramStorageSubscription = diagramService.subscribeToDiagramChange(model, (diagram) => diagramStorageService.save(diagram));
+    subscriptions.add(diagramStorageSubscription);
 }
 /**
  * Subscribes to the host's "clear persisted diagram" command so the saved layout is dropped on
  * request (e.g. before a fresh seed should take precedence over previously saved edits). The
  * subscription is tracked in {@link subscriptions} so it is released together with the React
  * root in {@link unmountReactodia}.
+ *
+ * @param model The diagram model whose edits are persisted
  */
-function onClearDiagramStorage() {
-    const storage = service(DiagramStorageService);
-    const eventService = service(EventService);
-    subscriptions.add(eventService.subscribeToClearDiagramStorage(() => storage.clear()));
+function onClearDiagramStorage(model) {
+    subscriptions.add(eventService.subscribeToClearDiagramStorage(() => {
+        // re-subscribe, to avoid any pending debounced saves, which may write over the cleared diagram
+        subscribeToDiagramChange(model);
+        diagramStorageService.clear();
+    }));
 }
 /**
  * The Reactodia workspace React component.
@@ -124,11 +138,10 @@ function ReactodiaApp(props) {
         workspaceContext = context;
         const { model } = context;
         onDiagramChange(model);
-        onClearDiagramStorage();
+        onClearDiagramStorage(model);
         const dataProvider = createDataProvider(props);
         const isReload = props.isReload;
-        const savedDiagram = service(DiagramStorageService).load();
-        const diagramService = service(DiagramService);
+        const savedDiagram = diagramStorageService.load();
         if (isReload) {
             // Reload the diagram that is currently on the canvas. This may happen when the host changes the provider
             // settings, or when the user switches the language at runtime, since there is no existing mechanism to
@@ -164,6 +177,7 @@ function ReactodiaApp(props) {
         translations: translationsForLanguage(language),
         typeStyleResolver: resolveTypeStyle
     }, createElement(DefaultWorkspace, {
+        colorScheme: props.theme,
         menu: createElement(GraphwiseMenu),
         // place Undo/redo/layout actions in top right corner.
         actionsToolbar: { dock: 'ne' }

package/dist/collection/components/graphwise-reactodia/services/diagram/diagram.service.js

@@ -46,8 +46,10 @@ let DiagramService = DiagramService_1 = class DiagramService {
                 clearTimeout(notifyTimer);
             }
             notifyTimer = setTimeout(() => {
+                if (notifyTimer) {
+                    onChangeCallback(model.exportLayout());
+                }
                 notifyTimer = undefined;
-                onChangeCallback(model.exportLayout());
             }, DiagramService_1.NOTIFY_DEBOUNCE_MS);
         };
         model.history.events.on(DiagramService_1.HISTORY_CHANGED_EVENT, onHistoryChange);
@@ -55,6 +57,7 @@ let DiagramService = DiagramService_1 = class DiagramService {
             model.history.events.off(DiagramService_1.HISTORY_CHANGED_EVENT, onHistoryChange);
             if (notifyTimer) {
                 clearTimeout(notifyTimer);
+                notifyTimer = undefined;
             }
         };
     }

package/dist/collection/components/graphwise-reactodia/styles/type-style.resolver.js

@@ -1,31 +1,30 @@
-const NODE_COLOR_VARIABLES = [
-    '--gw-foreground-visual-diagram-categorical-01',
-    '--gw-foreground-visual-diagram-categorical-02',
-    '--gw-foreground-visual-diagram-categorical-03',
-    '--gw-foreground-visual-diagram-categorical-04',
-    '--gw-foreground-visual-diagram-categorical-05',
-    '--gw-foreground-visual-diagram-categorical-06',
-    '--gw-foreground-visual-diagram-categorical-07',
-    '--gw-foreground-visual-diagram-categorical-08',
-    '--gw-foreground-visual-diagram-categorical-09',
-    '--gw-foreground-visual-diagram-categorical-10',
-    '--gw-foreground-visual-diagram-categorical-11',
-    '--gw-foreground-visual-diagram-categorical-12',
-    '--gw-foreground-visual-diagram-categorical-13',
-    '--gw-foreground-visual-diagram-categorical-14',
-    '--gw-foreground-visual-diagram-categorical-15',
-    '--gw-foreground-visual-diagram-categorical-16',
-    '--gw-foreground-visual-diagram-categorical-17',
-    '--gw-foreground-visual-diagram-categorical-18',
-    '--gw-foreground-visual-diagram-categorical-19',
-    '--gw-foreground-visual-diagram-categorical-20'
-];
 /**
  * Color slot assigned to each type, in the order the types are first seen.
  */
 const typeToIndex = new Map();
-function getColor(variable) {
-    return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+/**
+ * Returns the internal property of the given palette slot, numbered from 1 and padded to two digits as in `_theme.scss`.
+ */
+function getTypeColorProperty(slot) {
+    return `--_graphwise-reactodia-type-color-${String(slot).padStart(2, '0')}`;
+}
+/**
+ * Reads the type palette of the Theme API: the internal properties `_theme.scss` resolves from the ones
+ * the host declares, in slot order up to the first empty one.
+ */
+function getPalette() {
+    const host = document.querySelector('graphwise-reactodia');
+    if (!host) {
+        return [];
+    }
+    const style = getComputedStyle(host);
+    const palette = [];
+    let color = style.getPropertyValue(getTypeColorProperty(1)).trim();
+    while (color) {
+        palette.push(color);
+        color = style.getPropertyValue(getTypeColorProperty(palette.length + 1)).trim();
+    }
+    return palette;
 }
 /**
  * Colors an element by its type: each type takes the next color from the palette, which wraps
@@ -45,8 +44,8 @@ export const resolveTypeStyle = (types) => {
         index = typeToIndex.size;
         typeToIndex.set(type, index);
     }
-    const color = getColor(NODE_COLOR_VARIABLES[index % NODE_COLOR_VARIABLES.length]);
-    return color ? { color } : undefined;
+    const colors = getPalette();
+    return colors.length ? { color: colors[index % colors.length] } : undefined;
 };
 export const resetColors = () => {
     typeToIndex.clear();

package/dist/collection/pages/graphwise-reactodia/main.js

@@ -49,6 +49,10 @@ function setLanguage(language) {
   reactodia.language = language;
 }
 
+function setTheme(theme) {
+  reactodia.theme = theme;
+}
+
 // The host asks the component to drop its persisted diagram by dispatching a namespaced window
 // event, rather than holding an element reference and calling a method on it.
 function clearDiagramStorage() {

package/dist/esm/graphwise-reactodia.entry.js

@@ -31374,8 +31374,10 @@ let DiagramService = DiagramService_1 = class DiagramService {
                 clearTimeout(notifyTimer);
             }
             notifyTimer = setTimeout(() => {
+                if (notifyTimer) {
+                    onChangeCallback(model.exportLayout());
+                }
                 notifyTimer = undefined;
-                onChangeCallback(model.exportLayout());
             }, DiagramService_1.NOTIFY_DEBOUNCE_MS);
         };
         model.history.events.on(DiagramService_1.HISTORY_CHANGED_EVENT, onHistoryChange);
@@ -31383,6 +31385,7 @@ let DiagramService = DiagramService_1 = class DiagramService {
             model.history.events.off(DiagramService_1.HISTORY_CHANGED_EVENT, onHistoryChange);
             if (notifyTimer) {
                 clearTimeout(notifyTimer);
+                notifyTimer = undefined;
             }
         };
     }
@@ -31524,34 +31527,33 @@ class SubscriptionList {
     }
 }
 
-const NODE_COLOR_VARIABLES = [
-    '--gw-foreground-visual-diagram-categorical-01',
-    '--gw-foreground-visual-diagram-categorical-02',
-    '--gw-foreground-visual-diagram-categorical-03',
-    '--gw-foreground-visual-diagram-categorical-04',
-    '--gw-foreground-visual-diagram-categorical-05',
-    '--gw-foreground-visual-diagram-categorical-06',
-    '--gw-foreground-visual-diagram-categorical-07',
-    '--gw-foreground-visual-diagram-categorical-08',
-    '--gw-foreground-visual-diagram-categorical-09',
-    '--gw-foreground-visual-diagram-categorical-10',
-    '--gw-foreground-visual-diagram-categorical-11',
-    '--gw-foreground-visual-diagram-categorical-12',
-    '--gw-foreground-visual-diagram-categorical-13',
-    '--gw-foreground-visual-diagram-categorical-14',
-    '--gw-foreground-visual-diagram-categorical-15',
-    '--gw-foreground-visual-diagram-categorical-16',
-    '--gw-foreground-visual-diagram-categorical-17',
-    '--gw-foreground-visual-diagram-categorical-18',
-    '--gw-foreground-visual-diagram-categorical-19',
-    '--gw-foreground-visual-diagram-categorical-20'
-];
 /**
  * Color slot assigned to each type, in the order the types are first seen.
  */
 const typeToIndex = new Map();
-function getColor(variable) {
-    return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+/**
+ * Returns the internal property of the given palette slot, numbered from 1 and padded to two digits as in `_theme.scss`.
+ */
+function getTypeColorProperty(slot) {
+    return `--_graphwise-reactodia-type-color-${String(slot).padStart(2, '0')}`;
+}
+/**
+ * Reads the type palette of the Theme API: the internal properties `_theme.scss` resolves from the ones
+ * the host declares, in slot order up to the first empty one.
+ */
+function getPalette() {
+    const host = document.querySelector('graphwise-reactodia');
+    if (!host) {
+        return [];
+    }
+    const style = getComputedStyle(host);
+    const palette = [];
+    let color = style.getPropertyValue(getTypeColorProperty(1)).trim();
+    while (color) {
+        palette.push(color);
+        color = style.getPropertyValue(getTypeColorProperty(palette.length + 1)).trim();
+    }
+    return palette;
 }
 /**
  * Colors an element by its type: each type takes the next color from the palette, which wraps
@@ -31571,8 +31573,8 @@ const resolveTypeStyle = (types) => {
         index = typeToIndex.size;
         typeToIndex.set(type, index);
     }
-    const color = getColor(NODE_COLOR_VARIABLES[index % NODE_COLOR_VARIABLES.length]);
-    return color ? { color } : undefined;
+    const colors = getPalette();
+    return colors.length ? { color: colors[index % colors.length] } : undefined;
 };
 const resetColors = () => {
     typeToIndex.clear();
@@ -31695,6 +31697,10 @@ let workspaceContext = null;
  * the React root.
  */
 const subscriptions = new SubscriptionList();
+let diagramStorageSubscription;
+const diagramService = service(DiagramService);
+const diagramStorageService = service(DiagramStorageService);
+const eventService = service(EventService);
 /**
  * Builds a Reactodia {@link SparqlDataProvider} for the given endpoint using the supplied
  * query preset. The host owns the query configuration and always passes it in via props.
@@ -31754,20 +31760,30 @@ async function seedGraphToCanvas(context, dataProvider, links, signal) {
  * root in {@link unmountReactodia}.
  */
 function onDiagramChange(model) {
-    const storage = service(DiagramStorageService);
-    const diagramService = service(DiagramService);
-    subscriptions.add(diagramService.subscribeToDiagramChange(model, (diagram) => storage.save(diagram)));
+    subscribeToDiagramChange(model);
+}
+/**
+ * Starts persisting the model's edits to local storage, keeping the subscription in {@link diagramStorageSubscription}.
+ */
+function subscribeToDiagramChange(model) {
+    diagramStorageSubscription === null || diagramStorageSubscription === void 0 ? void 0 : diagramStorageSubscription();
+    diagramStorageSubscription = diagramService.subscribeToDiagramChange(model, (diagram) => diagramStorageService.save(diagram));
+    subscriptions.add(diagramStorageSubscription);
 }
 /**
  * Subscribes to the host's "clear persisted diagram" command so the saved layout is dropped on
  * request (e.g. before a fresh seed should take precedence over previously saved edits). The
  * subscription is tracked in {@link subscriptions} so it is released together with the React
  * root in {@link unmountReactodia}.
+ *
+ * @param model The diagram model whose edits are persisted
  */
-function onClearDiagramStorage() {
-    const storage = service(DiagramStorageService);
-    const eventService = service(EventService);
-    subscriptions.add(eventService.subscribeToClearDiagramStorage(() => storage.clear()));
+function onClearDiagramStorage(model) {
+    subscriptions.add(eventService.subscribeToClearDiagramStorage(() => {
+        // re-subscribe, to avoid any pending debounced saves, which may write over the cleared diagram
+        subscribeToDiagramChange(model);
+        diagramStorageService.clear();
+    }));
 }
 /**
  * The Reactodia workspace React component.
@@ -31786,11 +31802,10 @@ function ReactodiaApp(props) {
         workspaceContext = context;
         const { model } = context;
         onDiagramChange(model);
-        onClearDiagramStorage();
+        onClearDiagramStorage(model);
         const dataProvider = createDataProvider(props);
         const isReload = props.isReload;
-        const savedDiagram = service(DiagramStorageService).load();
-        const diagramService = service(DiagramService);
+        const savedDiagram = diagramStorageService.load();
         if (isReload) {
             // Reload the diagram that is currently on the canvas. This may happen when the host changes the provider
             // settings, or when the user switches the language at runtime, since there is no existing mechanism to
@@ -31826,6 +31841,7 @@ function ReactodiaApp(props) {
         translations: translationsForLanguage(language),
         typeStyleResolver: resolveTypeStyle
     }, reactExports.createElement(DefaultWorkspace, {
+        colorScheme: props.theme,
         menu: reactExports.createElement(GraphwiseMenu),
         // place Undo/redo/layout actions in top right corner.
         actionsToolbar: { dock: 'ne' }
@@ -31867,7 +31883,7 @@ function unmountReactodia(root) {
     root.unmount();
 }
 
-const graphwiseReactodiaCss = "graphwise-reactodia{display:block;width:100%;height:75vh}graphwise-reactodia .reactodia-container{position:relative;width:100%;height:100%}graphwise-reactodia .reactodia-selection-action__link{display:none}";
+const graphwiseReactodiaCss = "graphwise-reactodia{--_graphwise-reactodia-type-color-01:var(--graphwise-reactodia-type-color-01);--_graphwise-reactodia-type-color-02:var(--graphwise-reactodia-type-color-02);--_graphwise-reactodia-type-color-03:var(--graphwise-reactodia-type-color-03);--_graphwise-reactodia-type-color-04:var(--graphwise-reactodia-type-color-04);--_graphwise-reactodia-type-color-05:var(--graphwise-reactodia-type-color-05);--_graphwise-reactodia-type-color-06:var(--graphwise-reactodia-type-color-06);--_graphwise-reactodia-type-color-07:var(--graphwise-reactodia-type-color-07);--_graphwise-reactodia-type-color-08:var(--graphwise-reactodia-type-color-08);--_graphwise-reactodia-type-color-09:var(--graphwise-reactodia-type-color-09);--_graphwise-reactodia-type-color-10:var(--graphwise-reactodia-type-color-10);--_graphwise-reactodia-type-color-11:var(--graphwise-reactodia-type-color-11);--_graphwise-reactodia-type-color-12:var(--graphwise-reactodia-type-color-12);--_graphwise-reactodia-type-color-13:var(--graphwise-reactodia-type-color-13);--_graphwise-reactodia-type-color-14:var(--graphwise-reactodia-type-color-14);--_graphwise-reactodia-type-color-15:var(--graphwise-reactodia-type-color-15);--_graphwise-reactodia-type-color-16:var(--graphwise-reactodia-type-color-16);--_graphwise-reactodia-type-color-17:var(--graphwise-reactodia-type-color-17);--_graphwise-reactodia-type-color-18:var(--graphwise-reactodia-type-color-18);--_graphwise-reactodia-type-color-19:var(--graphwise-reactodia-type-color-19);--_graphwise-reactodia-type-color-20:var(--graphwise-reactodia-type-color-20)}graphwise-reactodia{display:block;width:100%;height:100%}graphwise-reactodia .reactodia-container{position:relative;width:100%;height:100%}graphwise-reactodia .reactodia-selection-action__link{display:none}";
 
 const GraphwiseReactodia = class {
     constructor(hostRef) {
@@ -31902,7 +31918,7 @@ const GraphwiseReactodia = class {
         }
     }
     render() {
-        return (h(Host, { key: '6f1115b91eac308ef155978dfe1482f152c38b1b' }));
+        return (h(Host, { key: 'b2e584a0f1de975692197473d516219a7aa0f42f' }));
     }
     renderGraph(isReloading) {
         var _a;
@@ -31924,6 +31940,7 @@ const GraphwiseReactodia = class {
             config: this.config,
             language: this.language,
             providerSettings: this.providerSettings,
+            theme: this.theme,
         };
         if (this.reactRoot && !isReloading) {
             void updateReactodia(props);

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

@@ -1 +1 @@
-import{p as e,b as r}from"./p-Cypw7ydc.js";export{s as setNonce}from"./p-Cypw7ydc.js";import{g as t}from"./p-CalY52z6.js";(()=>{const r=import.meta.url,t={};return""!==r&&(t.resourcesUrl=new URL(".",r).href),e(t)})().then((async e=>(await t(),r([["p-420b9dce",[[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"]}]]]],e))));
+import{p as e,b as r}from"./p-Cypw7ydc.js";export{s as setNonce}from"./p-Cypw7ydc.js";import{g as t}from"./p-CalY52z6.js";(()=>{const r=import.meta.url,t={};return""!==r&&(t.resourcesUrl=new URL(".",r).href),e(t)})().then((async e=>(await t(),r([["p-0cb06f14",[[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"]}]]]],e))));