reactodia · AlexeyMz · Nov 8, 2025 · Nov 6, 2025
diff --git a/.editorconfig b/.editorconfig
@@ -7,7 +7,7 @@ root = true
 charset = utf-8
 insert_final_newline = true
 
-[*.{js,jsx,ts,tsx}]
+[*.{js,jsx,mjs,ts,tsx,mts}]
 indent_style = space
 indent_size = 4
 

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -67,28 +67,26 @@ export default tseslint.config(
         },
     },
     {
-        files: ['**/eslint.config.mjs', '**/*.config.mts'],
+        files: ['**/eslint.config.mjs'],
         languageOptions: {
             globals: {
                 ...globals.node,
             },
         },
+        rules: {
+            '@typescript-eslint/no-require-imports': 'off',
+            '@typescript-eslint/no-unsafe-argument': 'off',
+            '@typescript-eslint/no-unsafe-assignment': 'off',
+            '@typescript-eslint/no-unsafe-call': 'off',
+            '@typescript-eslint/no-unsafe-member-access': 'off',
+        },
     },
     {
-        files: ['**/*.config.js', '**/webpackServe.js'],
+        files: ['**/vite.config.mts'],
         languageOptions: {
             globals: {
                 ...globals.node,
             },
         },
-        rules: {
-            'indent': ['warn', 2, {
-                flatTernaryExpressions: true,
-                SwitchCase: 1,
-            }],
-            '@typescript-eslint/no-require-imports': 'off',
-            '@typescript-eslint/no-unsafe-assignment': 'off',
-            '@typescript-eslint/no-unsafe-call': 'off',
-        },
-    }
+    },
 );
diff --git a/examples/basic.html b/examples/basic.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
+    <link  rel="stylesheet" href="./resources/pageStyles.css" />
+    <title>Reactodia: basic</title>
+  </head>
+  <body>
+    <script type="module" src="./resources/pageControls.tsx"></script>
+    <script type="module" src="./basic.tsx"></script>
+  </body>
+</html>
diff --git a/examples/basic.tsx b/examples/basic.tsx
@@ -9,7 +9,10 @@ const GRAPH_DATA =
     'https://raw.githubusercontent.com/reactodia/reactodia-workspace/' +
     'master/examples/resources/orgOntology.ttl';
 
-const Layouts = Reactodia.defineLayoutWorker(() => new Worker('layout.worker.js'));
+const Layouts = Reactodia.defineLayoutWorker(() => new Worker(
+    new URL('../src/layout.worker.ts', import.meta.url),
+    {type: 'module'}
+));
 
 function BasicExample() {
     const {defaultLayout} = Reactodia.useWorker(Layouts);

diff --git a/examples/classicWorkspace.html b/examples/classicWorkspace.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
+    <link  rel="stylesheet" href="./resources/pageStyles.css" />
+    <title>Reactodia: classicWorkspace</title>
+  </head>
+  <body>
+    <script type="module" src="./resources/pageControls.tsx"></script>
+    <script type="module" src="./classicWorkspace.tsx"></script>
+  </body>
+</html>
diff --git a/examples/classicWorkspace.tsx b/examples/classicWorkspace.tsx
@@ -8,9 +8,12 @@ const OntologyLinkTemplates = makeOntologyLinkTemplates(Reactodia);
 import { ExampleMetadataProvider, ExampleValidationProvider } from './resources/exampleMetadata';
 import { ExampleToolbarMenu, mountOnLoad, tryLoadLayoutFromLocalStorage } from './resources/common';
 
-const TURTLE_DATA = require('./resources/orgOntology.ttl') as string;
+import TURTLE_DATA from './resources/orgOntology.ttl?raw';
 
-const Layouts = Reactodia.defineLayoutWorker(() => new Worker('layout.worker.js'));
+const Layouts = Reactodia.defineLayoutWorker(() => new Worker(
+    new URL('../src/layout.worker.ts', import.meta.url),
+    {type: 'module'}
+));
 
 function ClassicWorkspaceExample() {
     const {defaultLayout} = Reactodia.useWorker(Layouts);

diff --git a/examples/graphAuthoring.html b/examples/graphAuthoring.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
+    <link  rel="stylesheet" href="./resources/pageStyles.css" />
+    <title>Reactodia: graphAuthoring</title>
+  </head>
+  <body>
+    <script type="module" src="./resources/pageControls.tsx"></script>
+    <script type="module" src="./graphAuthoring.tsx"></script>
+  </body>
+</html>
diff --git a/examples/graphAuthoring.tsx b/examples/graphAuthoring.tsx
@@ -6,9 +6,12 @@ import * as Reactodia from '../src/workspace';
 import { ExampleMetadataProvider, ExampleValidationProvider } from './resources/exampleMetadata';
 import { ExampleToolbarMenu, mountOnLoad, tryLoadLayoutFromLocalStorage } from './resources/common';
 
-const TURTLE_DATA = require('./resources/orgOntology.ttl') as string;
+import TURTLE_DATA from './resources/orgOntology.ttl?raw';
 
-const Layouts = Reactodia.defineLayoutWorker(() => new Worker('layout.worker.js'));
+const Layouts = Reactodia.defineLayoutWorker(() => new Worker(
+    new URL('../src/layout.worker.ts', import.meta.url),
+    {type: 'module'}
+));
 
 function GraphAuthoringExample() {
     const {defaultLayout} = Reactodia.useWorker(Layouts);

diff --git a/examples/i18n.html b/examples/i18n.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
+    <link  rel="stylesheet" href="./resources/pageStyles.css" />
+    <title>Reactodia: i18n</title>
+  </head>
+  <body>
+    <script type="module" src="./resources/pageControls.tsx"></script>
+    <script type="module" src="./i18n.tsx"></script>
+  </body>
+</html>
diff --git a/examples/i18n.tsx b/examples/i18n.tsx
@@ -5,9 +5,12 @@ import * as Reactodia from '../src/workspace';
 
 import { ExampleToolbarMenu, mountOnLoad, tryLoadLayoutFromLocalStorage } from './resources/common';
 
-const TURTLE_DATA = require('./resources/orgOntology.ttl') as string;
+import TURTLE_DATA from './resources/orgOntology.ttl?raw';
 
-const Layouts = Reactodia.defineLayoutWorker(() => new Worker('layout.worker.js'));
+const Layouts = Reactodia.defineLayoutWorker(() => new Worker(
+    new URL('../src/layout.worker.ts', import.meta.url),
+    {type: 'module'}
+));
 
 function I18nExample() {
     const {defaultLayout} = Reactodia.useWorker(Layouts);

diff --git a/examples/index.tsx b/examples/index.tsx
diff --git a/examples/rdfExplorer.html b/examples/rdfExplorer.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content">
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
+    <link  rel="stylesheet" href="./resources/pageStyles.css" />
+    <title>Reactodia: rdfExplorer</title>
+  </head>
+  <body>
+    <script type="module" src="./resources/pageControls.tsx"></script>
+    <script type="module" src="./rdfExplorer.tsx"></script>
+  </body>
+</html>
diff --git a/examples/rdfExplorer.tsx b/examples/rdfExplorer.tsx
@@ -5,9 +5,12 @@ import * as Reactodia from '../src/workspace';
 
 import { ExampleToolbarMenu, mountOnLoad, tryLoadLayoutFromLocalStorage } from './resources/common';
 
-const TURTLE_DATA = require('./resources/orgOntology.ttl') as string;
+import TURTLE_DATA from './resources/orgOntology.ttl?raw';
 
-const Layouts = Reactodia.defineLayoutWorker(() => new Worker('layout.worker.js'));
+const Layouts = Reactodia.defineLayoutWorker(() => new Worker(
+    new URL('../src/layout.worker.ts', import.meta.url),
+    {type: 'module'}
+));
 
 function RdfExample() {
     const {defaultLayout} = Reactodia.useWorker(Layouts);

diff --git a/examples/resources/pageControls.module.css b/examples/resources/pageControls.module.css
@@ -0,0 +1,29 @@
+.pageSelector {
+  position: absolute;
+  top: 10px;
+  right: 15px;
+  padding: 2px 10px;
+  z-index: 100;
+}
+
+.colorSchemeToggle,
+.borderRadiusToggle {
+  position: absolute;
+  width: 26px;
+  height: 24px;
+  z-index: 100;
+}
+
+.colorSchemeToggle {
+  top: 40px;
+  right: 15px;
+}
+
+.borderRadiusToggle {
+  top: 40px;
+  right: 45px;
+}
+
+:root[data-border-radius-zero] :global(.reactodia-workspace) {
+  --reactodia-border-radius-base: unset;
+}
diff --git a/examples/resources/pageControls.tsx b/examples/resources/pageControls.tsx
@@ -0,0 +1,105 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import styles from './pageControls.module.css';
+
+function PageControls() {
+    return (
+        <>
+            <PageSelector />
+            <ThemeSettings />
+        </>
+    );
+}
+
+declare const __REACTODIA_EXAMPLES__: string[] | undefined;
+
+function PageSelector() {
+    const examples: string[] = __REACTODIA_EXAMPLES__ ?? [];
+
+    const selectedValue = React.useMemo(() => {
+        const pathname = window.location.pathname;
+        const  separatorIndex = pathname.lastIndexOf('/');
+        const page = separatorIndex >= 0 ? pathname.substring(separatorIndex + 1) : pathname;
+        return page || 'index.html';
+    }, []);
+
+    return (
+        <select className={styles.pageSelector}
+            title="Change active example"
+            value={selectedValue}
+            onChange={e => {
+                window.location.href = e.currentTarget.value;
+            }}>
+            {examples.map(example => (
+                <option key={example} value={`${example}.html`}>
+                    {example}
+                </option>
+            ))}
+        </select>
+    );
+}
+
+function ThemeSettings() {
+    const [, forceUpdate] = React.useState({});
+
+    const [isDarkColorQuery] = React.useState(window.matchMedia('(prefers-color-scheme: dark)'));    
+    React.useEffect(() => {
+        const onThemeChange = () => {
+            document.documentElement.removeAttribute('data-theme');
+            forceUpdate({});
+        };
+        isDarkColorQuery.addEventListener('change', onThemeChange);
+        return () => isDarkColorQuery.removeEventListener('change', onThemeChange);
+    }, [isDarkColorQuery]);
+
+    const isDarkColorScheme = () => {
+        return (
+            document.documentElement.getAttribute('data-theme') === 'dark' ||
+            isDarkColorQuery.matches
+        );
+    };
+
+    const hasBorderRadiusZero = () =>
+        document.documentElement.hasAttribute('data-border-radius-zero');
+
+    return (
+        <>
+            <button className={styles.colorSchemeToggle}
+                title="Toggle light or dark color scheme"
+                onClick={() => {
+                    document.documentElement.setAttribute(
+                        'data-theme',
+                        isDarkColorScheme() ? 'light' : 'dark'
+                    );
+                }}>
+                {isDarkColorScheme() ? '☽' : '☼'}
+            </button>
+            <button className={styles.borderRadiusToggle}
+                title="Toggle global border radius style"
+                onClick={() => {
+                    if (hasBorderRadiusZero()) {
+                        document.documentElement.removeAttribute('data-border-radius-zero');
+                    } else {
+                        document.documentElement.setAttribute('data-border-radius-zero', 'true');
+                    }
+                }}>
+                {hasBorderRadiusZero() ? '▭' : '◯'}
+            </button>
+        </>
+    );
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+    const container = document.createElement('div');
+    container.id = 'selector';
+    document.body.appendChild(container);
+
+    try {
+        const {createRoot} = await import('react-dom/client');
+        const root = createRoot(container);
+        root.render(<PageControls />);
+    } catch (err) {
+        ReactDOM.render(<PageControls />, container);
+    }
+});
diff --git a/examples/resources/pageStyles.css b/examples/resources/pageStyles.css
@@ -0,0 +1,12 @@
+html,
+body,
+#root {
+  height: 100dvh;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}
+
+.reactodia-paper-area {
+  outline: none;
+}