@dxos/plugin-mermaid 0.8.4-main.9735255 → 0.8.4-main.abd8ff62ef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-mermaid",
-  "version": "0.8.4-main.9735255",
+  "version": "0.8.4-main.abd8ff62ef",
   "description": "Mermaid markdown plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -12,6 +12,10 @@
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
+  "imports": {
+    "#plugin": "./src/MermaidPlugin.tsx",
+    "#meta": "./src/meta.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -20,9 +24,6 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
@@ -32,32 +33,32 @@
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.4",
     "mermaid": "^10.9.4",
-    "@dxos/app-framework": "0.8.4-main.9735255",
-    "@dxos/operation": "0.8.4-main.9735255",
-    "@dxos/plugin-markdown": "0.8.4-main.9735255",
-    "@dxos/react-ui-editor": "0.8.4-main.9735255",
-    "@dxos/ui-editor": "0.8.4-main.9735255",
-    "@dxos/plugin-space": "0.8.4-main.9735255",
-    "@dxos/util": "0.8.4-main.9735255"
+    "@dxos/app-framework": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-markdown": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-space": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-editor": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-editor": "0.8.4-main.abd8ff62ef",
+    "@dxos/util": "0.8.4-main.abd8ff62ef",
+    "@dxos/operation": "0.8.4-main.abd8ff62ef"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.11",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/echo": "0.8.4-main.9735255",
-    "@dxos/react-ui": "0.8.4-main.9735255",
-    "@dxos/storybook-utils": "0.8.4-main.9735255",
-    "@dxos/ui-theme": "0.8.4-main.9735255"
+    "vite": "^8.0.10",
+    "@dxos/echo": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/storybook-utils": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef"
   },
   "peerDependencies": {
-    "effect": "3.19.11",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.9735255",
-    "@dxos/ui-theme": "0.8.4-main.9735255"
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef"
   },
   "publishConfig": {
     "access": "public"

package/src/MermaidPlugin.test.ts

@@ -0,0 +1,30 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { createTestApp } from '@dxos/app-framework/testing';
+import { MarkdownEvents } from '@dxos/plugin-markdown';
+
+import { MermaidPlugin } from '#plugin';
+
+import { meta } from './meta';
+
+const moduleId = (name: string) => `${meta.id}.module.${name}`;
+
+describe('MermaidPlugin', () => {
+  test('modules activate on the expected events', async ({ expect }) => {
+    // Use createTestApp directly — only RuntimePlugin and OperationPlugin are needed.
+    // MermaidPlugin has no surface module so SetupReactSurface firing harmlessly is fine.
+    await using harness = await createTestApp({
+      plugins: [OperationPlugin(), RuntimePlugin(), MermaidPlugin()],
+    });
+
+    // The markdown module activates on MarkdownEvents.SetupExtensions,
+    // which is fired by MarkdownPlugin before its ReactSurface activates.
+    await harness.fire(MarkdownEvents.SetupExtensions);
+    expect(harness.manager.getActive()).toContain(moduleId('markdown'));
+  });
+});

package/src/MermaidPlugin.tsx

@@ -5,10 +5,11 @@
 import * as Effect from 'effect/Effect';
 
 import { Capability, Plugin } from '@dxos/app-framework';
-import { MarkdownCapabilities, MarkdownEvents } from '@dxos/plugin-markdown';
+import { MarkdownCapabilities, MarkdownEvents } from '@dxos/plugin-markdown/types';
+
+import { meta } from '#meta';
 
 import { mermaid } from './extensions';
-import { meta } from './meta';
 
 export const MermaidPlugin = Plugin.define(meta).pipe(
   Plugin.addModule({
@@ -18,3 +19,5 @@ export const MermaidPlugin = Plugin.define(meta).pipe(
   }),
   Plugin.make,
 );
+
+export default MermaidPlugin;

package/src/extensions/mermaid-extension.ts

@@ -112,18 +112,18 @@ export const mermaid = (_options: MermaidOptions = {}): Extension => {
         maring: '4px 0',
         padding: '16px',
         justifyContent: 'center',
-        backgroundColor: 'var(--dx-groupSurface)',
+        backgroundColor: 'var(--color-group-surface)',
         borderRadius: '8px',
       },
       '& .cm-mermaid-label': {
         position: 'absolute',
         right: '16px',
         fontFamily: 'unset',
-        color: 'var(--dx-subdued)',
+        color: 'var(--color-subdued)',
       },
       '& .cm-mermaid-error': {
         display: 'inline-block',
-        color: 'var(--dx-errorText)',
+        color: 'var(--color-error)',
       },
       '& .cm-mermaid-hidden': {
         display: 'none !important',

package/src/extensions/mermaid.stories.tsx

@@ -6,8 +6,8 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { useThemeContext } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { useTextEditor } from '@dxos/react-ui-editor';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import {
   createBasicExtensions,
   createMarkdownExtensions,
@@ -19,11 +19,11 @@ import { mermaid } from './mermaid-extension';
 
 const str = (...lines: string[]) => lines.join('\n');
 
-type StoryProps = {
+type DefaultStoryProps = {
   text?: string;
 };
 
-const DefaultStory = ({ text }: StoryProps) => {
+const DefaultStory = ({ text }: DefaultStoryProps) => {
   const { themeMode } = useThemeContext();
   const { parentRef, focusAttributes } = useTextEditor(
     () => ({
@@ -39,13 +39,13 @@ const DefaultStory = ({ text }: StoryProps) => {
     [themeMode],
   );
 
-  return <div className='is-[50rem]' ref={parentRef} {...focusAttributes} />;
+  return <div className='w-[50rem]' ref={parentRef} {...focusAttributes} />;
 };
 
 const meta = {
-  title: 'plugins/plugin-mermaid/extensions',
+  title: 'plugins/plugin-mermaid/extensions/mermaid',
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ layout: 'column' })],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/index.ts

@@ -2,5 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './MermaidPlugin';
+import { Plugin } from '@dxos/app-framework';
+
+import { meta } from './meta';
+
+export const MermaidPlugin = Plugin.lazy(meta, () => import('./MermaidPlugin'));
+
 export * from './meta';

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/mermaid',
+  id: 'org.dxos.plugin.mermaid',
   name: 'Mermaid',
   description: trim`
     Generate diagrams from simple text-based definitions using Mermaid syntax.