@dxos/plugin-mermaid 0.8.4-main.fd6878d → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/LICENSE +102 -5
  2. package/PLUGIN.mdl +260 -0
  3. package/README.md +1 -1
  4. package/dist/lib/neutral/MermaidPlugin.mjs +29 -0
  5. package/dist/lib/neutral/MermaidPlugin.mjs.map +7 -0
  6. package/dist/lib/neutral/capabilities/index.mjs +7 -0
  7. package/dist/lib/neutral/capabilities/index.mjs.map +7 -0
  8. package/dist/lib/neutral/chunk-WD2YFG2L.mjs +36 -0
  9. package/dist/lib/neutral/chunk-WD2YFG2L.mjs.map +7 -0
  10. package/dist/lib/neutral/index.mjs +7 -0
  11. package/dist/lib/neutral/index.mjs.map +7 -0
  12. package/dist/lib/neutral/markdown-extension-7YWEUNWO.mjs +172 -0
  13. package/dist/lib/neutral/markdown-extension-7YWEUNWO.mjs.map +7 -0
  14. package/dist/lib/neutral/meta.json +1 -0
  15. package/dist/lib/neutral/meta.mjs +7 -0
  16. package/dist/lib/neutral/meta.mjs.map +7 -0
  17. package/dist/lib/neutral/plugin.mjs +11 -0
  18. package/dist/lib/neutral/plugin.mjs.map +7 -0
  19. package/dist/types/src/MermaidPlugin.d.ts +3 -1
  20. package/dist/types/src/MermaidPlugin.d.ts.map +1 -1
  21. package/dist/types/src/MermaidPlugin.test.d.ts +2 -0
  22. package/dist/types/src/MermaidPlugin.test.d.ts.map +1 -0
  23. package/dist/types/src/capabilities/index.d.ts +3 -0
  24. package/dist/types/src/capabilities/index.d.ts.map +1 -0
  25. package/dist/types/src/capabilities/markdown-extension.d.ts +5 -0
  26. package/dist/types/src/capabilities/markdown-extension.d.ts.map +1 -0
  27. package/dist/types/src/extensions/index.d.ts +1 -1
  28. package/dist/types/src/extensions/index.d.ts.map +1 -1
  29. package/dist/types/src/extensions/mermaid-extension.d.ts +7 -0
  30. package/dist/types/src/extensions/mermaid-extension.d.ts.map +1 -0
  31. package/dist/types/src/extensions/mermaid.stories.d.ts +11 -11
  32. package/dist/types/src/extensions/mermaid.stories.d.ts.map +1 -1
  33. package/dist/types/src/index.d.ts +0 -1
  34. package/dist/types/src/index.d.ts.map +1 -1
  35. package/dist/types/src/meta.d.ts +2 -3
  36. package/dist/types/src/meta.d.ts.map +1 -1
  37. package/dist/types/src/plugin.d.ts +3 -0
  38. package/dist/types/src/plugin.d.ts.map +1 -0
  39. package/dist/types/tsconfig.tsbuildinfo +1 -1
  40. package/package.json +59 -31
  41. package/src/MermaidPlugin.test.ts +30 -0
  42. package/src/MermaidPlugin.tsx +21 -12
  43. package/src/capabilities/index.ts +7 -0
  44. package/src/capabilities/markdown-extension.ts +14 -0
  45. package/src/extensions/index.ts +1 -1
  46. package/src/extensions/mermaid-extension.ts +215 -0
  47. package/src/extensions/mermaid.stories.tsx +20 -21
  48. package/src/index.ts +0 -1
  49. package/src/meta.ts +27 -7
  50. package/src/plugin.ts +9 -0
  51. package/src/vite-env.d.ts +10 -0
  52. package/dist/lib/browser/index.mjs +0 -136
  53. package/dist/lib/browser/index.mjs.map +0 -7
  54. package/dist/lib/browser/meta.json +0 -1
  55. package/dist/types/src/extensions/mermaid.d.ts +0 -4
  56. package/dist/types/src/extensions/mermaid.d.ts.map +0 -1
  57. package/src/extensions/mermaid.ts +0 -155
package/LICENSE CHANGED
@@ -1,8 +1,105 @@
1
- MIT License
2
- Copyright (c) 2022 DXOS
1
+ # Functional Source License, Version 1.1, ALv2 Future License
3
2
 
4
- Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
3
+ ## Abbreviation
5
4
 
6
- The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
5
+ FSL-1.1-Apache-2.0
7
6
 
8
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
7
+ ## Notice
8
+
9
+ Copyright 2026 DXOS
10
+
11
+ ## Terms and Conditions
12
+
13
+ ### Licensor ("We")
14
+
15
+ The party offering the Software under these Terms and Conditions.
16
+
17
+ ### The Software
18
+
19
+ The "Software" is each version of the software that we make available under
20
+ these Terms and Conditions, as indicated by our inclusion of these Terms and
21
+ Conditions with the Software.
22
+
23
+ ### License Grant
24
+
25
+ Subject to your compliance with this License Grant and the Patents,
26
+ Redistribution and Trademark clauses below, we hereby grant you the right to
27
+ use, copy, modify, create derivative works, publicly perform, publicly display
28
+ and redistribute the Software for any Permitted Purpose identified below.
29
+
30
+ ### Permitted Purpose
31
+
32
+ A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
33
+ means making the Software available to others in a commercial product or
34
+ service that:
35
+
36
+ 1. substitutes for the Software;
37
+
38
+ 2. substitutes for any other product or service we offer using the Software
39
+ that exists as of the date we make the Software available; or
40
+
41
+ 3. offers the same or substantially similar functionality as the Software.
42
+
43
+ Permitted Purposes specifically include using the Software:
44
+
45
+ 1. for your internal use and access;
46
+
47
+ 2. for non-commercial education;
48
+
49
+ 3. for non-commercial research; and
50
+
51
+ 4. in connection with professional services that you provide to a licensee
52
+ using the Software in accordance with these Terms and Conditions.
53
+
54
+ ### Patents
55
+
56
+ To the extent your use for a Permitted Purpose would necessarily infringe our
57
+ patents, the license grant above includes a license under our patents. If you
58
+ make a claim against any party that the Software infringes or contributes to
59
+ the infringement of any patent, then your patent license to the Software ends
60
+ immediately.
61
+
62
+ ### Redistribution
63
+
64
+ The Terms and Conditions apply to all copies, modifications and derivatives of
65
+ the Software.
66
+
67
+ If you redistribute any copies, modifications or derivatives of the Software,
68
+ you must include a copy of or a link to these Terms and Conditions and not
69
+ remove any copyright notices provided in or with the Software.
70
+
71
+ ### Disclaimer
72
+
73
+ THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
74
+ IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
75
+ PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.
76
+
77
+ IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
78
+ SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
79
+ EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
80
+
81
+ ### Trademarks
82
+
83
+ Except for displaying the License Details and identifying us as the origin of
84
+ the Software, you have no right under these Terms and Conditions to use our
85
+ trademarks, trade names, service marks or product names.
86
+
87
+ ## Grant of Future License
88
+
89
+ We hereby irrevocably grant you an additional license to use the Software under
90
+ the Apache License, Version 2.0 that is effective on the second anniversary of
91
+ the date we make the Software available. On or after that date, you may use the
92
+ Software under the Apache License, Version 2.0, in which case the following
93
+ will apply:
94
+
95
+ Licensed under the Apache License, Version 2.0 (the "License"); you may not use
96
+ this file except in compliance with the License.
97
+
98
+ You may obtain a copy of the License at
99
+
100
+ http://www.apache.org/licenses/LICENSE-2.0
101
+
102
+ Unless required by applicable law or agreed to in writing, software distributed
103
+ under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
104
+ CONDITIONS OF ANY KIND, either express or implied. See the License for the
105
+ specific language governing permissions and limitations under the License.
package/PLUGIN.mdl ADDED
@@ -0,0 +1,260 @@
1
+ ---
2
+ id: org.dxos.plugin.mermaid
3
+ name: MermaidPlugin
4
+ version: 0.1.0
5
+ ---
6
+
7
+ A CodeMirror extension plugin for DXOS Composer that renders Mermaid diagram
8
+ definitions as live SVG previews inside the markdown editor.
9
+
10
+ ## Extensions
11
+
12
+ The following extension dialects are used in this document.
13
+ Each extension is defined in the Appendix or resolved via its URI.
14
+
15
+ | Term | URI |
16
+ |-------------|-------------------------------|
17
+ | `type` | `org.dxos.mdl.type@1.0` |
18
+ | `feat` | `org.dxos.mdl.feat@1.0` |
19
+ | `test` | `org.dxos.mdl.test@1.0` |
20
+ | `component` | `org.dxos.mdl.component@1.0` |
21
+ | `op` | `org.dxos.mdl.op@1.0` |
22
+
23
+ ## Types
24
+
25
+ ```mdl
26
+ type DiagramKind
27
+ literals: flowchart | sequenceDiagram | classDiagram | stateDiagram | erDiagram | gantt | pie | gitGraph | mindmap | timeline
28
+ ```
29
+
30
+ ```mdl
31
+ type DiagramTheme
32
+ literals: default | neutral | dark | forest | base
33
+ ```
34
+
35
+ ```mdl
36
+ type RenderResult
37
+ fields:
38
+ svg: string # rendered SVG markup
39
+ id: string # unique widget id used by the Mermaid API
40
+ ```
41
+
42
+ ```mdl
43
+ type RenderError
44
+ fields:
45
+ message: string # human-readable parse or render error text
46
+ source: string # the Mermaid source that caused the error
47
+ ```
48
+
49
+ ## Components
50
+
51
+ ```mdl
52
+ component MermaidWidget
53
+ desc: |
54
+ An inline CodeMirror widget that replaces a ```mermaid fenced code block
55
+ with its rendered SVG diagram. The source code block is hidden while the
56
+ cursor is outside it; moving the cursor inside restores the raw text for
57
+ editing.
58
+ props:
59
+ id: string # unique widget id (mermaid-<offset>)
60
+ source: string # raw Mermaid diagram source
61
+ label?: string # first token of source used as a diagram-type badge
62
+ darkMode: boolean # mirrors the editor dark-theme facet
63
+ state:
64
+ svg?: string # last successfully rendered SVG
65
+ error?: string # last render error message; shown in place of diagram
66
+ layout: |
67
+ ┌────────────────────────────────┐
68
+ │ [rendered SVG diagram] │
69
+ │ [label] │
70
+ └────────────────────────────────┘
71
+ (on error)
72
+ ┌────────────────────────────────┐
73
+ │ error text │
74
+ └────────────────────────────────┘
75
+ ```
76
+
77
+ ## Operations
78
+
79
+ ```mdl
80
+ op renderDiagram
81
+ desc: Parses a Mermaid source string and renders it to SVG via the Mermaid JS API.
82
+ input:
83
+ id: string # unique element id required by the Mermaid render API
84
+ source: string # raw Mermaid diagram definition
85
+ darkMode?: boolean # sets darkMode / theme on the Mermaid config
86
+ output: RenderResult
87
+ errors:
88
+ ParseError: source does not conform to Mermaid syntax
89
+ RenderError: SVG generation failed after successful parse
90
+ ```
91
+
92
+ ## Features
93
+
94
+ ```mdl
95
+ feat F-1: Diagram Rendering
96
+
97
+ req F-1.1:
98
+ when: a fenced code block with language tag `mermaid` is present in the document
99
+ then: the block is replaced by a rendered SVG diagram widget
100
+
101
+ req F-1.2:
102
+ when: the cursor moves inside the fenced code block
103
+ then: raw source text is revealed for editing and the widget is hidden
104
+
105
+ req F-1.3:
106
+ when: the cursor moves outside the fenced code block
107
+ then: the widget is restored and the raw text is hidden
108
+
109
+ req F-1.4:
110
+ when: the editor is in read-only mode
111
+ then: widgets are always shown regardless of cursor position
112
+ ```
113
+
114
+ ```mdl
115
+ feat F-2: Error Handling
116
+
117
+ req F-2.1:
118
+ when: Mermaid fails to parse the source
119
+ then: an inline error message is shown in place of the diagram
120
+
121
+ req F-2.2:
122
+ when: a previously failing source is corrected
123
+ then: the widget re-renders and displays the valid diagram
124
+ ```
125
+
126
+ ```mdl
127
+ feat F-3: Theme Integration
128
+
129
+ req F-3.1:
130
+ when: the editor's dark-theme facet is true
131
+ then: the Mermaid diagram is initialized with darkMode enabled
132
+
133
+ req F-3.2: The rendered widget uses the editor's group-surface background token.
134
+ ```
135
+
136
+ ```mdl
137
+ feat F-4: Markdown Editor Integration
138
+
139
+ req F-4.1:
140
+ when: the MermaidPlugin is loaded
141
+ then: it registers the mermaid CodeMirror extension via MarkdownCapabilities.ExtensionProvider
142
+
143
+ req F-4.2: The plugin activates on MarkdownEvents.SetupExtensions.
144
+ ```
145
+
146
+ ## Acceptance
147
+
148
+ ```mdl
149
+ test T-1: Valid flowchart renders
150
+ given: a document containing a ```mermaid fenced block with a valid flowchart definition
151
+ then:
152
+ - the raw code block lines are hidden
153
+ - an SVG widget is injected immediately after the block
154
+ - no error text is visible
155
+ ```
156
+
157
+ ```mdl
158
+ test T-2: Cursor-in/out toggle
159
+ given: a rendered Mermaid widget is visible
160
+ when: the cursor moves inside the fenced code block
161
+ then:
162
+ - the cm-mermaid-hidden class is removed from the block lines
163
+ - the widget is no longer rendered in the viewport
164
+
165
+ when: the cursor moves back outside the block
166
+ then:
167
+ - block lines are hidden again
168
+ - widget is rendered again
169
+ ```
170
+
171
+ ```mdl
172
+ test T-3: Invalid syntax shows error
173
+ given: a document containing a ```mermaid block with invalid syntax
174
+ then:
175
+ - no SVG is rendered
176
+ - an inline error message is shown with class cm-mermaid-error
177
+ ```
178
+
179
+ ```mdl
180
+ test T-4: Read-only always shows widget
181
+ given: the editor is in read-only mode
182
+ when: any cursor position
183
+ then: widgets are rendered and raw source lines remain hidden
184
+ ```
185
+
186
+ ```mdl
187
+ test T-5: Plugin activates on markdown event
188
+ given: MermaidPlugin and ProcessManagerPlugin are loaded
189
+ when: MarkdownEvents.SetupExtensions fires
190
+ then: the markdown module is in the active module list
191
+ ```
192
+
193
+ ---
194
+
195
+ ## Appendix: Extension Definitions
196
+
197
+ Extension block types used in this document are defined below using
198
+ the core `ext` primitive — the only construct the base language provides.
199
+
200
+ ```mdl
201
+ ext type
202
+ uri: org.dxos.mdl.type@1.0
203
+ desc: A named data structure with typed fields and optional literals.
204
+ fields:
205
+ desc?: Prose
206
+ fields?: FieldMap # name[?]: TypeExpr (# inline comment)
207
+ literals?: UnionList # a | b | c
208
+ extends?: TypeRef[]
209
+ ```
210
+
211
+ ```mdl
212
+ ext feat
213
+ uri: org.dxos.mdl.feat@1.0
214
+ desc: A named feature grouping one or more requirements.
215
+ fields:
216
+ desc?: Prose
217
+ req: RequirementList
218
+ nesting: self
219
+ ```
220
+
221
+ ```mdl
222
+ ext test
223
+ uri: org.dxos.mdl.test@1.0
224
+ desc: An acceptance scenario expressed as given / when / then steps.
225
+ fields:
226
+ given?: Step | Step[]
227
+ when?: Step | Step[]
228
+ then: Step | Step[]
229
+ tags?: TagList
230
+ ```
231
+
232
+ ```mdl
233
+ ext component
234
+ uri: org.dxos.mdl.component@1.0
235
+ desc: A UI component with props, internal state, slots, actions, and events.
236
+ fields:
237
+ desc?: Prose
238
+ props?: FieldMap
239
+ state?: FieldMap
240
+ slots?: FieldMap
241
+ actions?: ActionMap
242
+ emits?: EventMap
243
+ layout?: CodeBlock
244
+ ```
245
+
246
+ ```mdl
247
+ ext op
248
+ uri: org.dxos.mdl.op@1.0
249
+ desc: |
250
+ A named operation with typed inputs, outputs, and declared errors.
251
+ Pure ops have no effects or requires. Effectful ops declare both.
252
+ fields:
253
+ desc?: Prose
254
+ input?: FieldMap
255
+ output?: TypeExpr
256
+ errors?: ErrorMap
257
+ effects?: EffectList
258
+ requires?: ServiceList
259
+ note?: Prose
260
+ ```
package/README.md CHANGED
@@ -12,4 +12,4 @@ Plugin mermaid.
12
12
 
13
13
  Your ideas, issues, and code are most welcome. Please take a look at our [community code of conduct](https://github.com/dxos/dxos/blob/main/CODE_OF_CONDUCT.md), the [issue guide](https://github.com/dxos/dxos/blob/main/CONTRIBUTING.md#submitting-issues), and the [PR contribution guide](https://github.com/dxos/dxos/blob/main/CONTRIBUTING.md#submitting-prs).
14
14
 
15
- License: [MIT](./LICENSE) Copyright 2023 © DXOS
15
+ License: [FSL-1.1-Apache-2.0](./LICENSE) Copyright 2023 © DXOS
@@ -0,0 +1,29 @@
1
+ // src/MermaidPlugin.tsx
2
+ import { Plugin } from "@dxos/app-framework";
3
+ import { AppPlugin } from "@dxos/app-toolkit";
4
+ import { MarkdownEvents } from "@dxos/plugin-markdown";
5
+ import { MarkdownExtension } from "#capabilities";
6
+ import { meta } from "#meta";
7
+
8
+ // raw-loader:/__w/dxos/dxos/packages/plugins/plugin-mermaid/PLUGIN.mdl?raw
9
+ var PLUGIN_default = "---\nid: org.dxos.plugin.mermaid\nname: MermaidPlugin\nversion: 0.1.0\n---\n\nA CodeMirror extension plugin for DXOS Composer that renders Mermaid diagram\ndefinitions as live SVG previews inside the markdown editor.\n\n## Extensions\n\nThe following extension dialects are used in this document.\nEach extension is defined in the Appendix or resolved via its URI.\n\n| Term | URI |\n|-------------|-------------------------------|\n| `type` | `org.dxos.mdl.type@1.0` |\n| `feat` | `org.dxos.mdl.feat@1.0` |\n| `test` | `org.dxos.mdl.test@1.0` |\n| `component` | `org.dxos.mdl.component@1.0` |\n| `op` | `org.dxos.mdl.op@1.0` |\n\n## Types\n\n```mdl\ntype DiagramKind\n literals: flowchart | sequenceDiagram | classDiagram | stateDiagram | erDiagram | gantt | pie | gitGraph | mindmap | timeline\n```\n\n```mdl\ntype DiagramTheme\n literals: default | neutral | dark | forest | base\n```\n\n```mdl\ntype RenderResult\n fields:\n svg: string # rendered SVG markup\n id: string # unique widget id used by the Mermaid API\n```\n\n```mdl\ntype RenderError\n fields:\n message: string # human-readable parse or render error text\n source: string # the Mermaid source that caused the error\n```\n\n## Components\n\n```mdl\ncomponent MermaidWidget\n desc: |\n An inline CodeMirror widget that replaces a ```mermaid fenced code block\n with its rendered SVG diagram. The source code block is hidden while the\n cursor is outside it; moving the cursor inside restores the raw text for\n editing.\n props:\n id: string # unique widget id (mermaid-<offset>)\n source: string # raw Mermaid diagram source\n label?: string # first token of source used as a diagram-type badge\n darkMode: boolean # mirrors the editor dark-theme facet\n state:\n svg?: string # last successfully rendered SVG\n error?: string # last render error message; shown in place of diagram\n layout: |\n \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n \u2502 [rendered SVG diagram] \u2502\n \u2502 [label] \u2502\n \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n (on error)\n \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n \u2502 error text \u2502\n \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n```\n\n## Operations\n\n```mdl\nop renderDiagram\n desc: Parses a Mermaid source string and renders it to SVG via the Mermaid JS API.\n input:\n id: string # unique element id required by the Mermaid render API\n source: string # raw Mermaid diagram definition\n darkMode?: boolean # sets darkMode / theme on the Mermaid config\n output: RenderResult\n errors:\n ParseError: source does not conform to Mermaid syntax\n RenderError: SVG generation failed after successful parse\n```\n\n## Features\n\n```mdl\nfeat F-1: Diagram Rendering\n\n req F-1.1:\n when: a fenced code block with language tag `mermaid` is present in the document\n then: the block is replaced by a rendered SVG diagram widget\n\n req F-1.2:\n when: the cursor moves inside the fenced code block\n then: raw source text is revealed for editing and the widget is hidden\n\n req F-1.3:\n when: the cursor moves outside the fenced code block\n then: the widget is restored and the raw text is hidden\n\n req F-1.4:\n when: the editor is in read-only mode\n then: widgets are always shown regardless of cursor position\n```\n\n```mdl\nfeat F-2: Error Handling\n\n req F-2.1:\n when: Mermaid fails to parse the source\n then: an inline error message is shown in place of the diagram\n\n req F-2.2:\n when: a previously failing source is corrected\n then: the widget re-renders and displays the valid diagram\n```\n\n```mdl\nfeat F-3: Theme Integration\n\n req F-3.1:\n when: the editor's dark-theme facet is true\n then: the Mermaid diagram is initialized with darkMode enabled\n\n req F-3.2: The rendered widget uses the editor's group-surface background token.\n```\n\n```mdl\nfeat F-4: Markdown Editor Integration\n\n req F-4.1:\n when: the MermaidPlugin is loaded\n then: it registers the mermaid CodeMirror extension via MarkdownCapabilities.ExtensionProvider\n\n req F-4.2: The plugin activates on MarkdownEvents.SetupExtensions.\n```\n\n## Acceptance\n\n```mdl\ntest T-1: Valid flowchart renders\n given: a document containing a ```mermaid fenced block with a valid flowchart definition\n then:\n - the raw code block lines are hidden\n - an SVG widget is injected immediately after the block\n - no error text is visible\n```\n\n```mdl\ntest T-2: Cursor-in/out toggle\n given: a rendered Mermaid widget is visible\n when: the cursor moves inside the fenced code block\n then:\n - the cm-mermaid-hidden class is removed from the block lines\n - the widget is no longer rendered in the viewport\n\n when: the cursor moves back outside the block\n then:\n - block lines are hidden again\n - widget is rendered again\n```\n\n```mdl\ntest T-3: Invalid syntax shows error\n given: a document containing a ```mermaid block with invalid syntax\n then:\n - no SVG is rendered\n - an inline error message is shown with class cm-mermaid-error\n```\n\n```mdl\ntest T-4: Read-only always shows widget\n given: the editor is in read-only mode\n when: any cursor position\n then: widgets are rendered and raw source lines remain hidden\n```\n\n```mdl\ntest T-5: Plugin activates on markdown event\n given: MermaidPlugin and ProcessManagerPlugin are loaded\n when: MarkdownEvents.SetupExtensions fires\n then: the markdown module is in the active module list\n```\n\n---\n\n## Appendix: Extension Definitions\n\nExtension block types used in this document are defined below using\nthe core `ext` primitive \u2014 the only construct the base language provides.\n\n```mdl\next type\n uri: org.dxos.mdl.type@1.0\n desc: A named data structure with typed fields and optional literals.\n fields:\n desc?: Prose\n fields?: FieldMap # name[?]: TypeExpr (# inline comment)\n literals?: UnionList # a | b | c\n extends?: TypeRef[]\n```\n\n```mdl\next feat\n uri: org.dxos.mdl.feat@1.0\n desc: A named feature grouping one or more requirements.\n fields:\n desc?: Prose\n req: RequirementList\n nesting: self\n```\n\n```mdl\next test\n uri: org.dxos.mdl.test@1.0\n desc: An acceptance scenario expressed as given / when / then steps.\n fields:\n given?: Step | Step[]\n when?: Step | Step[]\n then: Step | Step[]\n tags?: TagList\n```\n\n```mdl\next component\n uri: org.dxos.mdl.component@1.0\n desc: A UI component with props, internal state, slots, actions, and events.\n fields:\n desc?: Prose\n props?: FieldMap\n state?: FieldMap\n slots?: FieldMap\n actions?: ActionMap\n emits?: EventMap\n layout?: CodeBlock\n```\n\n```mdl\next op\n uri: org.dxos.mdl.op@1.0\n desc: |\n A named operation with typed inputs, outputs, and declared errors.\n Pure ops have no effects or requires. Effectful ops declare both.\n fields:\n desc?: Prose\n input?: FieldMap\n output?: TypeExpr\n errors?: ErrorMap\n effects?: EffectList\n requires?: ServiceList\n note?: Prose\n```\n";
10
+
11
+ // src/MermaidPlugin.tsx
12
+ var MermaidPlugin = Plugin.define(meta).pipe(Plugin.addModule({
13
+ id: "markdown",
14
+ activatesOn: MarkdownEvents.SetupExtensions,
15
+ activate: MarkdownExtension
16
+ }), AppPlugin.addPluginAssetModule({
17
+ asset: {
18
+ pluginId: meta.id,
19
+ path: "PLUGIN.mdl",
20
+ content: PLUGIN_default,
21
+ mimeType: "application/x-mdl"
22
+ }
23
+ }), Plugin.make);
24
+ var MermaidPlugin_default = MermaidPlugin;
25
+ export {
26
+ MermaidPlugin,
27
+ MermaidPlugin_default as default
28
+ };
29
+ //# sourceMappingURL=MermaidPlugin.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/MermaidPlugin.tsx", "raw-loader:/__w/dxos/dxos/packages/plugins/plugin-mermaid/PLUGIN.mdl?raw"],
4
+ "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Plugin } from '@dxos/app-framework';\nimport { AppPlugin } from '@dxos/app-toolkit';\nimport { MarkdownEvents } from '@dxos/plugin-markdown';\n\nimport { MarkdownExtension } from '#capabilities';\nimport { meta } from '#meta';\n\n// eslint-disable-next-line import/no-relative-packages\nimport pluginSpec from '../PLUGIN.mdl?raw';\n\nexport const MermaidPlugin = Plugin.define(meta).pipe(\n Plugin.addModule({\n id: 'markdown',\n activatesOn: MarkdownEvents.SetupExtensions,\n activate: MarkdownExtension,\n }),\n AppPlugin.addPluginAssetModule({\n asset: { pluginId: meta.id, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },\n }),\n Plugin.make,\n);\n\nexport default MermaidPlugin;\n", "---\nid: org.dxos.plugin.mermaid\nname: MermaidPlugin\nversion: 0.1.0\n---\n\nA CodeMirror extension plugin for DXOS Composer that renders Mermaid diagram\ndefinitions as live SVG previews inside the markdown editor.\n\n## Extensions\n\nThe following extension dialects are used in this document.\nEach extension is defined in the Appendix or resolved via its URI.\n\n| Term | URI |\n|-------------|-------------------------------|\n| `type` | `org.dxos.mdl.type@1.0` |\n| `feat` | `org.dxos.mdl.feat@1.0` |\n| `test` | `org.dxos.mdl.test@1.0` |\n| `component` | `org.dxos.mdl.component@1.0` |\n| `op` | `org.dxos.mdl.op@1.0` |\n\n## Types\n\n```mdl\ntype DiagramKind\n literals: flowchart | sequenceDiagram | classDiagram | stateDiagram | erDiagram | gantt | pie | gitGraph | mindmap | timeline\n```\n\n```mdl\ntype DiagramTheme\n literals: default | neutral | dark | forest | base\n```\n\n```mdl\ntype RenderResult\n fields:\n svg: string # rendered SVG markup\n id: string # unique widget id used by the Mermaid API\n```\n\n```mdl\ntype RenderError\n fields:\n message: string # human-readable parse or render error text\n source: string # the Mermaid source that caused the error\n```\n\n## Components\n\n```mdl\ncomponent MermaidWidget\n desc: |\n An inline CodeMirror widget that replaces a ```mermaid fenced code block\n with its rendered SVG diagram. The source code block is hidden while the\n cursor is outside it; moving the cursor inside restores the raw text for\n editing.\n props:\n id: string # unique widget id (mermaid-<offset>)\n source: string # raw Mermaid diagram source\n label?: string # first token of source used as a diagram-type badge\n darkMode: boolean # mirrors the editor dark-theme facet\n state:\n svg?: string # last successfully rendered SVG\n error?: string # last render error message; shown in place of diagram\n layout: |\n \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n \u2502 [rendered SVG diagram] \u2502\n \u2502 [label] \u2502\n \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n (on error)\n \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n \u2502 error text \u2502\n \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n```\n\n## Operations\n\n```mdl\nop renderDiagram\n desc: Parses a Mermaid source string and renders it to SVG via the Mermaid JS API.\n input:\n id: string # unique element id required by the Mermaid render API\n source: string # raw Mermaid diagram definition\n darkMode?: boolean # sets darkMode / theme on the Mermaid config\n output: RenderResult\n errors:\n ParseError: source does not conform to Mermaid syntax\n RenderError: SVG generation failed after successful parse\n```\n\n## Features\n\n```mdl\nfeat F-1: Diagram Rendering\n\n req F-1.1:\n when: a fenced code block with language tag `mermaid` is present in the document\n then: the block is replaced by a rendered SVG diagram widget\n\n req F-1.2:\n when: the cursor moves inside the fenced code block\n then: raw source text is revealed for editing and the widget is hidden\n\n req F-1.3:\n when: the cursor moves outside the fenced code block\n then: the widget is restored and the raw text is hidden\n\n req F-1.4:\n when: the editor is in read-only mode\n then: widgets are always shown regardless of cursor position\n```\n\n```mdl\nfeat F-2: Error Handling\n\n req F-2.1:\n when: Mermaid fails to parse the source\n then: an inline error message is shown in place of the diagram\n\n req F-2.2:\n when: a previously failing source is corrected\n then: the widget re-renders and displays the valid diagram\n```\n\n```mdl\nfeat F-3: Theme Integration\n\n req F-3.1:\n when: the editor's dark-theme facet is true\n then: the Mermaid diagram is initialized with darkMode enabled\n\n req F-3.2: The rendered widget uses the editor's group-surface background token.\n```\n\n```mdl\nfeat F-4: Markdown Editor Integration\n\n req F-4.1:\n when: the MermaidPlugin is loaded\n then: it registers the mermaid CodeMirror extension via MarkdownCapabilities.ExtensionProvider\n\n req F-4.2: The plugin activates on MarkdownEvents.SetupExtensions.\n```\n\n## Acceptance\n\n```mdl\ntest T-1: Valid flowchart renders\n given: a document containing a ```mermaid fenced block with a valid flowchart definition\n then:\n - the raw code block lines are hidden\n - an SVG widget is injected immediately after the block\n - no error text is visible\n```\n\n```mdl\ntest T-2: Cursor-in/out toggle\n given: a rendered Mermaid widget is visible\n when: the cursor moves inside the fenced code block\n then:\n - the cm-mermaid-hidden class is removed from the block lines\n - the widget is no longer rendered in the viewport\n\n when: the cursor moves back outside the block\n then:\n - block lines are hidden again\n - widget is rendered again\n```\n\n```mdl\ntest T-3: Invalid syntax shows error\n given: a document containing a ```mermaid block with invalid syntax\n then:\n - no SVG is rendered\n - an inline error message is shown with class cm-mermaid-error\n```\n\n```mdl\ntest T-4: Read-only always shows widget\n given: the editor is in read-only mode\n when: any cursor position\n then: widgets are rendered and raw source lines remain hidden\n```\n\n```mdl\ntest T-5: Plugin activates on markdown event\n given: MermaidPlugin and ProcessManagerPlugin are loaded\n when: MarkdownEvents.SetupExtensions fires\n then: the markdown module is in the active module list\n```\n\n---\n\n## Appendix: Extension Definitions\n\nExtension block types used in this document are defined below using\nthe core `ext` primitive \u2014 the only construct the base language provides.\n\n```mdl\next type\n uri: org.dxos.mdl.type@1.0\n desc: A named data structure with typed fields and optional literals.\n fields:\n desc?: Prose\n fields?: FieldMap # name[?]: TypeExpr (# inline comment)\n literals?: UnionList # a | b | c\n extends?: TypeRef[]\n```\n\n```mdl\next feat\n uri: org.dxos.mdl.feat@1.0\n desc: A named feature grouping one or more requirements.\n fields:\n desc?: Prose\n req: RequirementList\n nesting: self\n```\n\n```mdl\next test\n uri: org.dxos.mdl.test@1.0\n desc: An acceptance scenario expressed as given / when / then steps.\n fields:\n given?: Step | Step[]\n when?: Step | Step[]\n then: Step | Step[]\n tags?: TagList\n```\n\n```mdl\next component\n uri: org.dxos.mdl.component@1.0\n desc: A UI component with props, internal state, slots, actions, and events.\n fields:\n desc?: Prose\n props?: FieldMap\n state?: FieldMap\n slots?: FieldMap\n actions?: ActionMap\n emits?: EventMap\n layout?: CodeBlock\n```\n\n```mdl\next op\n uri: org.dxos.mdl.op@1.0\n desc: |\n A named operation with typed inputs, outputs, and declared errors.\n Pure ops have no effects or requires. Effectful ops declare both.\n fields:\n desc?: Prose\n input?: FieldMap\n output?: TypeExpr\n errors?: ErrorMap\n effects?: EffectList\n requires?: ServiceList\n note?: Prose\n```\n"],
5
+ "mappings": ";AAIA,SAASA,cAAc;AACvB,SAASC,iBAAiB;AAC1B,SAASC,sBAAsB;AAE/B,SAASC,yBAAyB;AAClC,SAASC,YAAY;;;ACTrB;;;ADcO,IAAMC,gBAAgBC,OAAOC,OAAOC,IAAAA,EAAMC,KAC/CH,OAAOI,UAAU;EACfC,IAAI;EACJC,aAAaC,eAAeC;EAC5BC,UAAUC;AACZ,CAAA,GACAC,UAAUC,qBAAqB;EAC7BC,OAAO;IAAEC,UAAUZ,KAAKG;IAAIU,MAAM;IAAcC,SAASC;IAAYC,UAAU;EAAoB;AACrG,CAAA,GACAlB,OAAOmB,IAAI;AAGb,IAAA,wBAAepB;",
6
+ "names": ["Plugin", "AppPlugin", "MarkdownEvents", "MarkdownExtension", "meta", "MermaidPlugin", "Plugin", "define", "meta", "pipe", "addModule", "id", "activatesOn", "MarkdownEvents", "SetupExtensions", "activate", "MarkdownExtension", "AppPlugin", "addPluginAssetModule", "asset", "pluginId", "path", "content", "pluginSpec", "mimeType", "make"]
7
+ }
@@ -0,0 +1,7 @@
1
+ // src/capabilities/index.ts
2
+ import { Capability } from "@dxos/app-framework";
3
+ var MarkdownExtension = Capability.lazy("MarkdownExtension", () => import("../markdown-extension-7YWEUNWO.mjs"));
4
+ export {
5
+ MarkdownExtension
6
+ };
7
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../src/capabilities/index.ts"],
4
+ "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Capability } from '@dxos/app-framework';\n\nexport const MarkdownExtension = Capability.lazy('MarkdownExtension', () => import('./markdown-extension'));\n"],
5
+ "mappings": ";AAIA,SAASA,kBAAkB;AAEpB,IAAMC,oBAAoBD,WAAWE,KAAK,qBAAqB,MAAM,OAAO,oCAAA,CAAA;",
6
+ "names": ["Capability", "MarkdownExtension", "lazy"]
7
+ }
@@ -0,0 +1,36 @@
1
+ // src/meta.ts
2
+ import { Plugin } from "@dxos/app-framework";
3
+ import { DXN } from "@dxos/keys";
4
+ import { trim } from "@dxos/util";
5
+ var meta = Plugin.makeMeta({
6
+ key: DXN.make("org.dxos.plugin.mermaid"),
7
+ name: "Mermaid",
8
+ author: "DXOS",
9
+ description: trim`
10
+ Generate diagrams from simple text-based definitions using Mermaid syntax.
11
+ Create flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship
12
+ diagrams, Gantt charts, pie charts, Git graphs, mindmaps, and timelines — all from
13
+ plain-text source embedded directly in your documents.
14
+
15
+ The plugin integrates with the markdown editor as a CodeMirror extension.
16
+ Any fenced code block tagged with the \`mermaid\` language identifier is automatically
17
+ detected and replaced with a live SVG preview rendered by the Mermaid JS library.
18
+ The raw source is revealed for editing whenever the cursor moves inside the block,
19
+ then the rendered diagram is restored when the cursor moves away, providing a seamless
20
+ live-preview experience without leaving the editor.
21
+
22
+ Diagram rendering adapts to the editor's current color scheme: dark-mode documents
23
+ use Mermaid's dark theme while light-mode documents use the neutral theme.
24
+ Parse and render errors are shown inline in place of the diagram so that
25
+ invalid syntax is immediately visible without disrupting the rest of the document.
26
+ `,
27
+ icon: "ph--anchor-simple--regular",
28
+ iconHue: "cyan",
29
+ source: "https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-mermaid",
30
+ spec: "PLUGIN.mdl"
31
+ });
32
+
33
+ export {
34
+ meta
35
+ };
36
+ //# sourceMappingURL=chunk-WD2YFG2L.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/meta.ts"],
4
+ "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Plugin } from '@dxos/app-framework';\nimport { DXN } from '@dxos/keys';\nimport { trim } from '@dxos/util';\n\nexport const meta = Plugin.makeMeta({\n key: DXN.make('org.dxos.plugin.mermaid'),\n name: 'Mermaid',\n author: 'DXOS',\n description: trim`\n Generate diagrams from simple text-based definitions using Mermaid syntax.\n Create flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship\n diagrams, Gantt charts, pie charts, Git graphs, mindmaps, and timelines — all from\n plain-text source embedded directly in your documents.\n\n The plugin integrates with the markdown editor as a CodeMirror extension.\n Any fenced code block tagged with the \\`mermaid\\` language identifier is automatically\n detected and replaced with a live SVG preview rendered by the Mermaid JS library.\n The raw source is revealed for editing whenever the cursor moves inside the block,\n then the rendered diagram is restored when the cursor moves away, providing a seamless\n live-preview experience without leaving the editor.\n\n Diagram rendering adapts to the editor's current color scheme: dark-mode documents\n use Mermaid's dark theme while light-mode documents use the neutral theme.\n Parse and render errors are shown inline in place of the diagram so that\n invalid syntax is immediately visible without disrupting the rest of the document.\n `,\n icon: 'ph--anchor-simple--regular',\n iconHue: 'cyan',\n source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-mermaid',\n spec: 'PLUGIN.mdl',\n});\n"],
5
+ "mappings": ";AAIA,SAASA,cAAc;AACvB,SAASC,WAAW;AACpB,SAASC,YAAY;AAEd,IAAMC,OAAOH,OAAOI,SAAS;EAClCC,KAAKJ,IAAIK,KAAK,yBAAA;EACdC,MAAM;EACNC,QAAQ;EACRC,aAAaP;;;;;;;;;;;;;;;;;;EAkBbQ,MAAM;EACNC,SAAS;EACTC,QAAQ;EACRC,MAAM;AACR,CAAA;",
6
+ "names": ["Plugin", "DXN", "trim", "meta", "makeMeta", "key", "make", "name", "author", "description", "icon", "iconHue", "source", "spec"]
7
+ }
@@ -0,0 +1,7 @@
1
+ import {
2
+ meta
3
+ } from "./chunk-WD2YFG2L.mjs";
4
+ export {
5
+ meta
6
+ };
7
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": [],
4
+ "sourcesContent": [],
5
+ "mappings": "",
6
+ "names": []
7
+ }