Added rendering and documentation for treemap

2025-08-15 06:19:24 +02:00 · 2025-05-12 15:47:58 +02:00
parent 680d65114c
commit f0c3dfe3b3
11 changed files with 615 additions and 148 deletions
--- a/.cspell/code-terms.txt
+++ b/.cspell/code-terms.txt
@@ -87,6 +87,7 @@ NODIR
 NSTR
 outdir
 Qcontrolx
+QSTR
 reinit
 rels
 reqs
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -32,8 +32,26 @@
      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
      rel="stylesheet"
    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
+      rel="stylesheet"
+    />

    <style>
+      .recursive-mermaid {
+        font-family: 'Recursive', sans-serif;
+        font-optical-sizing: auto;
+        font-weight: 500;
+        font-style: normal;
+        font-variation-settings:
+          'slnt' 0,
+          'CASL' 0,
+          'CRSV' 0.5,
+          'MONO' 0;
+      }
+
      body {
        /* background: rgb(221, 208, 208); */
        /* background: #333; */
@@ -45,7 +63,9 @@
      h1 {
        color: grey;
      }
-
+      .mermaid {
+        border: 0px solid red;
+      }
      .mermaid2 {
        display: none;
      }
@@ -83,6 +103,11 @@
        width: 100%;
      }

+      .class2 {
+        fill: red;
+        fill-opacity: 1;
+      }
+
      /* tspan {
              font-size: 6px !important;
            } */
@@ -106,15 +131,51 @@

  <body>
    <pre id="diagram4" class="mermaid">
+treemap
+"Section 1"
+    "Leaf 1.1": 12
+    "Section 1.2":::class1
+      "Leaf 1.2.1": 12
+"Section 2"
+    "Leaf 2.1": 20:::class1
+    "Leaf 2.2": 25
+    "Leaf 2.3": 12
+
+classDef class1   fill:red,color:blue,stroke:#FFD600;
+
+
+</pre
+    >
+    <pre id="diagram4" class="mermaid2">
+stateDiagram
+  direction TB
+  classDef apa   classDef apa fill:red, color: blue;
+
+  [*] --> Still
+  Still --> [*]
+  Still --> Moving
+  Moving --> Still
+  Moving --> Crash
+  Crash --> [*]
+  Still --> s1
+  class Still apa
+
+
+</pre
+    >
+    <pre id="diagram4" class="mermaid2">
 treemap
    "Root"
        "Branch 1"
-            "Leaf 1.1": 10
-            "Leaf 1.2": 15
+            "Leaf 1.1": 12
+            "Branch 1.2"
+                "Leaf 1.2.1": 110
+                "Leaf 1.2.2": 12
+                "Leaf 1.2.3": 13
        "Branch 2"
            "Leaf 2.1": 20
            "Leaf 2.2": 25
-            "Leaf 2.3": 30
+            "Leaf 2.3": 12
    </pre>
    <pre id="diagram4" class="mermaid2">
      flowchart LR
@@ -449,7 +510,7 @@ kanban
        alert('It worked');
      }
      await mermaid.initialize({
-        // theme: 'base',
+        theme: 'base',
        // theme: 'default',
        // theme: 'forest',
        // handDrawnSeed: 12,
@@ -460,11 +521,7 @@ kanban
        // layout: 'fixed',
        // htmlLabels: false,
        flowchart: { titleTopMargin: 10 },
-
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        fontFamily: 'arial',
+        fontFamily: "'Recursive', sans-serif",
        sequence: {
          actorFontFamily: 'courier',
          noteFontFamily: 'courier',
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
    "@vitest/spy": "^3.0.6",
    "@vitest/ui": "^3.0.6",
    "ajv": "^8.17.1",
-    "chokidar": "^4.0.3",
+    "chokidar": "3.6.0",
    "concurrently": "^9.1.2",
    "cors": "^2.8.5",
    "cpy-cli": "^5.0.0",
--- a/packages/mermaid/src/diagrams/treemap/db.ts
+++ b/packages/mermaid/src/diagrams/treemap/db.ts
@@ -1,5 +1,8 @@
 import { getConfig as commonGetConfig } from '../../config.js';
 import DEFAULT_CONFIG from '../../defaultConfig.js';
+import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
+import { isLabelStyle } from '../../rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+
 import { cleanAndMerge } from '../../utils.js';
 import {
  clear as commonClear,
@@ -44,10 +47,54 @@ const addNode = (node: TreemapNode, level: number) => {

 const getRoot = (): TreemapNode | undefined => ({ name: '', children: outerNodes });

+let classes = new Map<string, DiagramStyleClassDef>();
+
+const addClass = (id: string, _style: string) => {
+  const styleClass = classes.get(id) ?? { id, styles: [], textStyles: [] };
+  classes.set(id, styleClass);
+
+  const style = _style.replace(/\\,/g, '§§§').replace(/,/g, ';').replace(/§§§/g, ',').split(';');
+
+  if (style) {
+    style.forEach((s) => {
+      if (isLabelStyle(s)) {
+        console.debug('isLabelStyle', s);
+        // const newStyle = s.replace('fill', 'bgFill'); // .replace('color', 'fill');
+        if (styleClass?.textStyles) {
+          styleClass.textStyles.push(s);
+        } else {
+          styleClass.textStyles = [s];
+        }
+      }
+      if (styleClass?.styles) {
+        styleClass.styles.push(s);
+      } else {
+        styleClass.styles = [s];
+      }
+    });
+  }
+
+  // classes.forEach((value) => {
+  //   if (value.cssClasses.includes(id)) {
+  //     value.styles.push(...style.flatMap((s) => s.split(',')));
+  //   }
+  // });
+
+  classes.set(id, styleClass);
+};
+const getClasses = (): Map<string, DiagramStyleClassDef> => {
+  return classes;
+};
+
+const getStylesForClass = (classSelector: string) => {
+  return classes.get(classSelector)?.styles;
+};
+
 const clear = () => {
  commonClear();
  data = structuredClone(defaultTreemapData);
  outerNodes = [];
+  classes = new Map();
 };

 export const db: TreemapDB = {
@@ -62,4 +109,7 @@ export const db: TreemapDB = {
  getDiagramTitle,
  getAccDescription,
  setAccDescription,
+  addClass,
+  getClasses,
+  getStylesForClass,
 };
--- a/packages/mermaid/src/diagrams/treemap/parser.ts
+++ b/packages/mermaid/src/diagrams/treemap/parser.ts
@@ -14,16 +14,36 @@ const populate = (ast: any) => {
  populateCommonDb(ast, db);

  const items = [];
+
+  // Extract classes and styles from the treemap
+  for (const row of ast.TreemapRows || []) {
+    const item = row.item;
+
+    if (row.$type === 'ClassDefStatement') {
+      db.addClass(row.className, row.styleText);
+    }
+  }
+
  // Extract data from each row in the treemap
  for (const row of ast.TreemapRows || []) {
    const item = row.item;
+
    if (!item) {
      continue;
    }

    const level = row.indent ? parseInt(row.indent) : 0;
    const name = getItemName(item);
-    const itemData = { level, name, type: item.$type, value: item.value };
+
+    const itemData = {
+      level,
+      name,
+      type: item.$type,
+      value: item.value,
+      classSelector: item.classSelector,
+      cssCompiledStyles: item.classSelector ? db.getStylesForClass(item.classSelector) : undefined,
+    };
+    console.debug('itemData', item.$type);
    items.push(itemData);
  }

@@ -42,6 +62,9 @@ const populate = (ast: any) => {

  addNodesRecursively(hierarchyNodes, 0);

+  console.debug('ast.ClassDefStatement', ast);
+  // Extract data from each classdefintion in the treemap
+
  log.debug('Processed items:', items);
 };

--- a/packages/mermaid/src/diagrams/treemap/renderer.ts
+++ b/packages/mermaid/src/diagrams/treemap/renderer.ts
@@ -1,11 +1,17 @@
 import type { Diagram } from '../../Diagram.js';
-import type { DiagramRenderer, DrawDefinition } from '../../diagram-api/types.js';
+import type {
+  DiagramRenderer,
+  DiagramStyleClassDef,
+  DrawDefinition,
+} from '../../diagram-api/types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import type { TreemapDB, TreemapNode } from './types.js';
 import { scaleOrdinal, treemap, hierarchy, format, select } from 'd3';
+import { styles2String } from '../../rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import { getConfig } from '../../config.js';
+import type { Node } from '../../rendering-util/types.js';

 const DEFAULT_INNER_PADDING = 10; // Default for inner padding between cells/sections
 const SECTION_INNER_PADDING = 10; // Default for inner padding between cells/sections
@@ -144,22 +150,26 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
    .attr('width', (d) => d.x1 - d.x0)
    .attr('height', SECTION_HEADER_HEIGHT)
    .attr('class', 'treemapSectionHeader')
-    // .attr('fill', (d) => colorScale(d.data.name))
    .attr('fill', 'none')
    .attr('fill-opacity', 0.6)
-    // .attr('stroke', (d) => colorScale(d.data.name))
    .attr('stroke-width', 0.6);

  sections
    .append('rect')
    .attr('width', (d) => d.x1 - d.x0)
    .attr('height', (d) => d.y1 - d.y0)
-    .attr('class', 'treemapSection')
+    .attr('class', (d, i) => {
+      return `treemapSection section${i}`;
+    })
    .attr('fill', (d) => colorScale(d.data.name))
    .attr('fill-opacity', 0.6)
    .attr('stroke', (d) => colorScalePeer(d.data.name))
    .attr('stroke-width', 2.0)
-    .attr('stroke-opacity', 0.4);
+    .attr('stroke-opacity', 0.4)
+    .attr('style', (d) => {
+      const styles = styles2String({ cssCompiledStyles: d.data.cssCompiledStyles } as Node);
+      return styles.nodeStyles + ';' + styles.borderStyles.join(';');
+    });
  // Add section labels
  sections
    .append('text')
@@ -169,8 +179,12 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
    .attr('dominant-baseline', 'middle')
    .text((d) => d.data.name)
    .attr('font-weight', 'bold')
-    .style('font-size', '12px')
-    .style('fill', (d) => colorScaleLabel(d.data.name))
+    .attr('style', (d) => {
+      const labelStyles =
+        'dominant-baseline: middle; font-size: 12px;fill:' + colorScaleLabel(d.data.name) + ';';
+      const styles = styles2String({ cssCompiledStyles: d.data.cssCompiledStyles } as Node);
+      return labelStyles + styles.labelStyles.replace('color:', 'fill:');
+    })
    .each(function (d) {
      const self = select(this);
      const originalText = d.data.name;
@@ -224,8 +238,14 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
      .attr('dominant-baseline', 'middle')
      .text((d) => (d.value ? valueFormat(d.value) : ''))
      .attr('font-style', 'italic')
-      .style('font-size', '10px')
-      .style('fill', (d) => colorScaleLabel(d.data.name));
+      .attr('style', (d) => {
+        const labelStyles =
+          'text-anchor: middle; dominant-baseline: middle; font-size: 10px;fill:' +
+          colorScaleLabel(d.data.name) +
+          ';';
+        const styles = styles2String({ cssCompiledStyles: d.data.cssCompiledStyles } as Node);
+        return labelStyles + styles.labelStyles.replace('color:', 'fill:');
+      });
  }

  // Draw the leaf nodes
@@ -235,7 +255,9 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
    .data(leafNodes)
    .enter()
    .append('g')
-    .attr('class', 'treemapNode treemapLeafGroup')
+    .attr('class', (d, i) => {
+      return `treemapNode treemapLeafGroup leaf${i}${d.data.classSelector ? ` ${d.data.classSelector}` : ''}x`;
+    })
    .attr('transform', (d) => `translate(${d.x0},${d.y0})`);

  // Add rectangle for each leaf node
@@ -249,6 +271,10 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
      // If a leaf is the root itself (no parent), it uses its own name.
      return d.parent ? colorScale(d.parent.data.name) : colorScale(d.data.name);
    })
+    .attr('style', (d) => {
+      const styles = styles2String({ cssCompiledStyles: d.data.cssCompiledStyles } as Node);
+      return styles.nodeStyles;
+    })
    .attr('fill-opacity', 0.2)
    .attr('stroke', (d) => {
      // Leaves inherit color from their immediate parent section's name.
@@ -272,11 +298,15 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
    .attr('class', 'treemapLabel')
    .attr('x', (d) => (d.x1 - d.x0) / 2)
    .attr('y', (d) => (d.y1 - d.y0) / 2)
-    .style('text-anchor', 'middle')
-    .style('dominant-baseline', 'middle')
-    .style('font-size', '38px')
-    .style('fill', (d) => colorScaleLabel(d.data.name))
-    // .style('stroke', (d) => colorScaleLabel(d.data.name))
+    // .style('fill', (d) => colorScaleLabel(d.data.name))
+    .attr('style', (d) => {
+      const labelStyles =
+        'text-anchor: middle; dominant-baseline: middle; font-size: 38px;fill:' +
+        colorScaleLabel(d.data.name) +
+        ';';
+      const styles = styles2String({ cssCompiledStyles: d.data.cssCompiledStyles } as Node);
+      return labelStyles + styles.labelStyles.replace('color:', 'fill:');
+    })
    .attr('clip-path', (d, i) => `url(#clip-${id}-${i})`)
    .text((d) => d.data.name);

@@ -364,10 +394,15 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
        // Y position calculated dynamically in leafValues.each based on final label metrics
        return (d.y1 - d.y0) / 2; // Placeholder, will be overwritten
      })
-      .style('text-anchor', 'middle')
-      .style('dominant-baseline', 'hanging')
-      // Initial font size, will be scaled in .each()
-      .style('font-size', '28px')
+      .attr('style', (d) => {
+        const labelStyles =
+          'text-anchor: middle; dominant-baseline: hanging; font-size: 28px;fill:' +
+          colorScaleLabel(d.data.name) +
+          ';';
+        const styles = styles2String({ cssCompiledStyles: d.data.cssCompiledStyles } as Node);
+        return labelStyles + styles.labelStyles.replace('color:', 'fill:');
+      })
+
      .attr('clip-path', (d, i) => `url(#clip-${id}-${i})`)
      .text((d) => (d.value ? valueFormat(d.value) : ''));

@@ -441,4 +476,7 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
  );
 };

-export const renderer: DiagramRenderer = { draw };
+const getClasses = function (text: string, diagramObj: any): Map<string, DiagramStyleClassDef> {
+  return diagramObj.db.getClasses();
+};
+export const renderer: DiagramRenderer = { draw, getClasses };
--- a/packages/mermaid/src/diagrams/treemap/types.ts
+++ b/packages/mermaid/src/diagrams/treemap/types.ts
@@ -1,4 +1,4 @@
-import type { DiagramDBBase } from '../../diagram-api/types.js';
+import type { DiagramDBBase, DiagramStyleClassDef } from '../../diagram-api/types.js';
 import type { BaseDiagramConfig } from '../../config.type.js';

 export interface TreemapNode {
@@ -6,12 +6,17 @@ export interface TreemapNode {
  children?: TreemapNode[];
  value?: number;
  parent?: TreemapNode;
+  classSelector?: string;
+  cssCompiledStyles?: string[];
 }

 export interface TreemapDB extends DiagramDBBase<TreemapDiagramConfig> {
  getNodes: () => TreemapNode[];
  addNode: (node: TreemapNode, level: number) => void;
  getRoot: () => TreemapNode | undefined;
+  getClasses: () => Map<string, DiagramStyleClassDef>;
+  addClass: (className: string, style: string) => void;
+  getStylesForClass: (classSelector: string) => string[];
 }

 export interface TreemapStyleOptions {
--- a/packages/mermaid/src/diagrams/treemap/utils.ts
+++ b/packages/mermaid/src/diagrams/treemap/utils.ts
@@ -6,7 +6,7 @@ import type { TreemapNode } from './types.js';
 * @returns A hierarchical tree structure
 */
 export function buildHierarchy(
-  items: { level: number; name: string; type: string; value?: number }[]
+  items: { level: number; name: string; type: string; value?: number; classSelector?: string }[]
 ): TreemapNode[] {
  if (!items.length) {
    return [];
@@ -20,6 +20,8 @@ export function buildHierarchy(
      name: item.name,
      children: item.type === 'Leaf' ? undefined : [],
    };
+    node.classSelector = item?.classSelector;
+    node.cssCompiledStyles = item?.cssCompiledStyles;

    if (item.type === 'Leaf' && item.value !== undefined) {
      node.value = item.value;
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -160,6 +160,7 @@ function sidebarSyntax() {
        { text: 'Kanban 🔥', link: '/syntax/kanban' },
        { text: 'Architecture 🔥', link: '/syntax/architecture' },
        { text: 'Radar 🔥', link: '/syntax/radar' },
+        { text: 'Treemap 🔥', link: '/syntax/treemap' },
        { text: 'Other Examples', link: '/syntax/examples' },
      ],
    },
--- a/packages/mermaid/src/docs/syntax/treemap.md
+++ b/packages/mermaid/src/docs/syntax/treemap.md
@@ -0,0 +1,185 @@
+---
+title: Treemap Diagram Syntax
+outline: 'deep' # shows all h3 headings in outline in Vitepress
+---
+
+# Treemap Diagram
+
+> A treemap diagram displays hierarchical data as a set of nested rectangles. Each branch of the tree is represented by a rectangle, which is then tiled with smaller rectangles representing sub-branches.
+
+```warning
+This is a new diagram type in Mermaid. Its syntax may evolve in future versions.
+```
+
+## Introduction
+
+Treemap diagrams are an effective way to visualize hierarchical data and show proportions between categories and subcategories. The size of each rectangle is proportional to the value it represents, making it easy to compare different parts of a hierarchy.
+
+Treemap diagrams are particularly useful for:
+- Visualizing hierarchical data structures
+- Comparing proportions between categories
+- Displaying large amounts of hierarchical data in a limited space
+- Identifying patterns and outliers in hierarchical data
+
+## Syntax
+
+```
+treemap
+"Section 1"
+    "Leaf 1.1": 12
+    "Section 1.2"
+      "Leaf 1.2.1": 12
+"Section 2"
+    "Leaf 2.1": 20
+    "Leaf 2.2": 25
+```
+
+### Node Definition
+
+Nodes in a treemap are defined using the following syntax:
+
+- **Section/Parent nodes**: Defined with quoted text `"Section Name"`
+- **Leaf nodes with values**: Defined with quoted text followed by a colon and value `"Leaf Name": value`
+- **Hierarchy**: Created using indentation (spaces or tabs)
+- **Styling**: Nodes can be styled using the `:::class` syntax
+
+## Examples
+
+### Basic Treemap
+
+```mermaid-example
+treemap
+"Category A"
+    "Item A1": 10
+    "Item A2": 20
+"Category B"
+    "Item B1": 15
+    "Item B2": 25
+```
+
+### Hierarchical Treemap
+
+```mermaid-example
+treemap
+"Products"
+    "Electronics"
+        "Phones": 50
+        "Computers": 30
+        "Accessories": 20
+    "Clothing"
+        "Men's": 40
+        "Women's": 40
+```
+
+### Treemap with Styling
+
+```mermaid-example
+treemap
+"Section 1"
+    "Leaf 1.1": 12
+    "Section 1.2":::class1
+      "Leaf 1.2.1": 12
+"Section 2"
+    "Leaf 2.1": 20:::class1
+    "Leaf 2.2": 25
+    "Leaf 2.3": 12
+
+classDef class1 fill:red,color:blue,stroke:#FFD600;
+```
+
+## Styling and Configuration
+
+Treemap diagrams can be customized using Mermaid's styling and configuration options.
+
+### Using classDef for Styling
+
+You can define custom styles for nodes using the `classDef` syntax, which is a standard feature across many Mermaid diagram types:
+
+```mermaid-example
+treemap
+"Main"
+    "A": 20
+    "B":::important
+        "B1": 10
+        "B2": 15
+    "C": 5
+
+classDef important fill:#f96,stroke:#333,stroke-width:2px;
+```
+
+### Theme Configuration
+
+You can customize the colors of your treemap using the theme configuration:
+
+```mermaid-example
+%%{init: {'theme': 'forest'}}%%
+treemap
+"Category A"
+    "Item A1": 10
+    "Item A2": 20
+"Category B"
+    "Item B1": 15
+    "Item B2": 25
+```
+
+### Directives
+
+You can use directives to customize the appearance of your treemap:
+
+```mermaid-example
+%%{init: {'treemap': {'useWidth': true, 'useHeight': true}}}%%
+treemap
+"Category A"
+    "Item A1": 10
+    "Item A2": 20
+"Category B"
+    "Item B1": 15
+    "Item B2": 25
+```
+
+## Advanced Features
+
+### Value Formatting
+
+Values in treemap diagrams can be formatted to display in different ways:
+
+```mermaid-example
+%%{init: {'treemap': {'valueFormat': '$0,0'}}}%%
+treemap
+"Budget"
+    "Operations"
+        "Salaries": 700000
+        "Equipment": 200000
+        "Supplies": 100000
+    "Marketing"
+        "Advertising": 400000
+        "Events": 100000
+```
+
+## Common Use Cases
+
+Treemap diagrams are commonly used for:
+
+1. **Financial Data**: Visualizing budget allocations, market shares, or portfolio compositions
+2. **File System Analysis**: Showing disk space usage by folders and files
+3. **Population Demographics**: Displaying population distribution across regions and subregions
+4. **Product Hierarchies**: Visualizing product categories and their sales volumes
+5. **Organizational Structures**: Representing departments and team sizes in a company
+
+## Limitations
+
+- Treemap diagrams work best when the data has a natural hierarchy
+- Very small values may be difficult to see or label in a treemap diagram
+- Deep hierarchies (many levels) can be challenging to represent clearly
+- Treemap diagrams are not well suited for representing data with negative values
+
+## Related Diagrams
+
+If treemap diagrams don't suit your needs, consider these alternatives:
+- **Pie Charts**: For simple proportion comparisons without hierarchy
+- **Sunburst Diagrams**: For hierarchical data with a radial layout (yet to be released in Mermaid).
+- **Sankey Diagrams**: For flow-based hierarchical data
+
+## Notes
+
+The treemap diagram implementation in Mermaid is designed to be simple to use while providing powerful visualization capabilities. As this is a newer diagram type, feedback and feature requests are welcome through the Mermaid GitHub repository.
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,7 +30,7 @@ importers:
        version: 8.19.3(eslint@9.25.1(jiti@2.4.2))
      '@cypress/code-coverage':
        specifier: ^3.12.49
-        version: 3.13.4(@babel/core@7.26.9)(@babel/preset-env@7.26.9(@babel/core@7.26.9))(babel-loader@9.2.1(@babel/core@7.26.9)(webpack@5.95.0(esbuild@0.25.0)))(cypress@14.0.3)(webpack@5.95.0(esbuild@0.25.0))
+        version: 3.13.4(@babel/core@7.26.9)(@babel/preset-env@7.27.1(@babel/core@7.26.9))(babel-loader@9.2.1(@babel/core@7.26.9)(webpack@5.95.0(esbuild@0.25.0)))(cypress@14.0.3)(webpack@5.95.0(esbuild@0.25.0))
      '@eslint/js':
        specifier: ^9.25.1
        version: 9.25.1
@@ -74,8 +74,8 @@ importers:
        specifier: ^8.17.1
        version: 8.17.1
      chokidar:
-        specifier: ^4.0.3
-        version: 4.0.3
+        specifier: 3.6.0
+        version: 3.6.0
      concurrently:
        specifier: ^9.1.2
        version: 9.1.2
@@ -327,8 +327,8 @@ importers:
        specifier: ^8.17.1
        version: 8.17.1
      chokidar:
-        specifier: ^4.0.3
-        version: 4.0.3
+        specifier: 3.6.0
+        version: 3.6.0
      concurrently:
        specifier: ^9.1.2
        version: 9.1.2
@@ -508,6 +508,67 @@ importers:
        specifier: ^7.3.0
        version: 7.3.0

+  packages/mermaid/src/vitepress:
+    dependencies:
+      '@mdi/font':
+        specifier: ^7.4.47
+        version: 7.4.47
+      '@vueuse/core':
+        specifier: ^12.7.0
+        version: 12.7.0(typescript@5.7.3)
+      font-awesome:
+        specifier: ^4.7.0
+        version: 4.7.0
+      jiti:
+        specifier: ^2.4.2
+        version: 2.4.2
+      mermaid:
+        specifier: workspace:^
+        version: link:../..
+      vue:
+        specifier: ^3.4.38
+        version: 3.5.13(typescript@5.7.3)
+    devDependencies:
+      '@iconify-json/carbon':
+        specifier: ^1.1.37
+        version: 1.2.1
+      '@unocss/reset':
+        specifier: ^66.0.0
+        version: 66.0.0
+      '@vite-pwa/vitepress':
+        specifier: ^0.5.3
+        version: 0.5.4(vite-plugin-pwa@0.21.2(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.3.0))
+      '@vitejs/plugin-vue':
+        specifier: ^5.0.5
+        version: 5.2.1(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.7.3))
+      fast-glob:
+        specifier: ^3.3.3
+        version: 3.3.3
+      https-localhost:
+        specifier: ^4.7.1
+        version: 4.7.1
+      pathe:
+        specifier: ^2.0.3
+        version: 2.0.3
+      unocss:
+        specifier: ^66.0.0
+        version: 66.0.0(postcss@8.5.3)(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.7.3))
+      unplugin-vue-components:
+        specifier: ^28.4.0
+        version: 28.4.0(@babel/parser@7.27.1)(vue@3.5.13(typescript@5.7.3))
+      vite:
+        specifier: ^6.1.1
+        version: 6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1)
+      vite-plugin-pwa:
+        specifier: ^0.21.1
+        version: 0.21.2(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.3.0)
+      vitepress:
+        specifier: 1.6.3
+        version: 1.6.3(@algolia/client-search@5.20.3)(@types/node@22.13.5)(axios@1.8.4)(postcss@8.5.3)(search-insights@2.17.2)(terser@5.39.0)(typescript@5.7.3)
+      workbox-window:
+        specifier: ^7.3.0
+        version: 7.3.0
+
  packages/parser:
    dependencies:
      langium:
@@ -910,10 +971,6 @@ packages:
    resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
    engines: {node: '>=6.9.0'}

-  '@babel/helper-string-parser@7.25.9':
-    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
-    engines: {node: '>=6.9.0'}
-
  '@babel/helper-string-parser@7.27.1':
    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
    engines: {node: '>=6.9.0'}
@@ -1401,12 +1458,6 @@ packages:
    peerDependencies:
      '@babel/core': ^7.0.0

-  '@babel/preset-env@7.26.9':
-    resolution: {integrity: sha512-vX3qPGE8sEKEAZCWk05k3cpTAE3/nOYca++JA+Rd0z2NCNzabmYvEiSShKzm10zdquOIAVXsy2Ei/DTW34KlKQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
  '@babel/preset-env@7.27.1':
    resolution: {integrity: sha512-TZ5USxFpLgKDpdEt8YWBR7p6g+bZo6sHaXLqP2BY/U0acaoI8FTVflcYCr/v94twM1C5IWFdZ/hscq9WjUeLXA==}
    engines: {node: '>=6.9.0'}
@@ -3621,6 +3672,15 @@ packages:
    peerDependencies:
      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0

+  '@vite-pwa/vitepress@0.5.4':
+    resolution: {integrity: sha512-g57qwG983WTyQNLnOcDVPQEIeN+QDgK/HdqghmygiUFp3a/MzVvmLXC/EVnPAXxWa8W2g9pZ9lE3EiDGs2HjsA==}
+    peerDependencies:
+      '@vite-pwa/assets-generator': ^0.2.6
+      vite-plugin-pwa: '>=0.21.2 <1'
+    peerDependenciesMeta:
+      '@vite-pwa/assets-generator':
+        optional: true
+
  '@vite-pwa/vitepress@1.0.0':
    resolution: {integrity: sha512-i5RFah4urA6tZycYlGyBslVx8cVzbZBcARJLDg5rWMfAkRmyLtpRU6usGfVOwyN9kjJ2Bkm+gBHXF1hhr7HptQ==}
    peerDependencies:
@@ -3934,11 +3994,6 @@ packages:
    engines: {node: '>=0.4.0'}
    hasBin: true

-  acorn@8.14.0:
-    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
  acorn@8.14.1:
    resolution: {integrity: sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==}
    engines: {node: '>=0.4.0'}
@@ -4366,10 +4421,6 @@ packages:
    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
    engines: {node: '>= 0.4'}

-  call-bound@1.0.3:
-    resolution: {integrity: sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==}
-    engines: {node: '>= 0.4'}
-
  call-bound@1.0.4:
    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
    engines: {node: '>= 0.4'}
@@ -4479,10 +4530,6 @@ packages:
    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
    engines: {node: '>= 8.10.0'}

-  chokidar@4.0.3:
-    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
-    engines: {node: '>= 14.16.0'}
-
  chrome-trace-event@1.0.4:
    resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
    engines: {node: '>=6.0'}
@@ -7497,10 +7544,6 @@ packages:
    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
    engines: {node: '>= 0.6'}

-  mime-db@1.53.0:
-    resolution: {integrity: sha512-oHlN/w+3MQ3rba9rqFr6V/ypF10LSkdwUysQL7GkXoTgIWeV+tcXGA852TBxH+gsh8UWoyhR1hKcoMJTuWflpg==}
-    engines: {node: '>= 0.6'}
-
  mime-db@1.54.0:
    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
    engines: {node: '>= 0.6'}
@@ -8333,10 +8376,6 @@ packages:
    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
    engines: {node: '>=8.10.0'}

-  readdirp@4.1.2:
-    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
-    engines: {node: '>= 14.18.0'}
-
  real-require@0.2.0:
    resolution: {integrity: sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==}
    engines: {node: '>= 12.13.0'}
@@ -9564,6 +9603,18 @@ packages:
    peerDependencies:
      vite: '>=4 <=6'

+  vite-plugin-pwa@0.21.2:
+    resolution: {integrity: sha512-vFhH6Waw8itNu37hWUJxL50q+CBbNcMVzsKaYHQVrfxTt3ihk3PeLO22SbiP1UNWzcEPaTQv+YVxe4G0KOjAkg==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      '@vite-pwa/assets-generator': ^0.2.6
+      vite: ^3.1.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
+      workbox-build: ^7.3.0
+      workbox-window: ^7.3.0
+    peerDependenciesMeta:
+      '@vite-pwa/assets-generator':
+        optional: true
+
  vite-plugin-pwa@1.0.0:
    resolution: {integrity: sha512-X77jo0AOd5OcxmWj3WnVti8n7Kw2tBgV1c8MCXFclrSlDV23ePzv2eTDIALXI2Qo6nJ5pZJeZAuX0AawvRfoeA==}
    engines: {node: '>=16.0.0'}
@@ -10610,7 +10661,7 @@ snapshots:

  '@babel/code-frame@7.26.2':
    dependencies:
-      '@babel/helper-validator-identifier': 7.25.9
+      '@babel/helper-validator-identifier': 7.27.1
      js-tokens: 4.0.0
      picocolors: 1.1.1

@@ -10632,10 +10683,10 @@ snapshots:
      '@babel/helper-compilation-targets': 7.26.5
      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.9)
      '@babel/helpers': 7.26.9
-      '@babel/parser': 7.26.9
+      '@babel/parser': 7.27.1
      '@babel/template': 7.26.9
      '@babel/traverse': 7.26.9
-      '@babel/types': 7.26.9
+      '@babel/types': 7.27.1
      convert-source-map: 2.0.0
      debug: 4.4.0(supports-color@8.1.1)
      gensync: 1.0.0-beta.2
@@ -10666,8 +10717,8 @@ snapshots:

  '@babel/generator@7.26.9':
    dependencies:
-      '@babel/parser': 7.26.9
-      '@babel/types': 7.26.9
+      '@babel/parser': 7.27.1
+      '@babel/types': 7.27.1
      '@jridgewell/gen-mapping': 0.3.8
      '@jridgewell/trace-mapping': 0.3.25
      jsesc: 3.1.0
@@ -10772,7 +10823,7 @@ snapshots:
  '@babel/helper-module-imports@7.25.9':
    dependencies:
      '@babel/traverse': 7.26.9
-      '@babel/types': 7.26.9
+      '@babel/types': 7.27.1
    transitivePeerDependencies:
      - supports-color

@@ -10787,7 +10838,7 @@ snapshots:
    dependencies:
      '@babel/core': 7.26.9
      '@babel/helper-module-imports': 7.25.9
-      '@babel/helper-validator-identifier': 7.25.9
+      '@babel/helper-validator-identifier': 7.27.1
      '@babel/traverse': 7.26.9
    transitivePeerDependencies:
      - supports-color
@@ -10863,8 +10914,6 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@babel/helper-string-parser@7.25.9': {}
-
  '@babel/helper-string-parser@7.27.1': {}

  '@babel/helper-validator-identifier@7.25.9': {}
@@ -10886,7 +10935,7 @@ snapshots:
  '@babel/helpers@7.26.9':
    dependencies:
      '@babel/template': 7.26.9
-      '@babel/types': 7.26.9
+      '@babel/types': 7.27.1

  '@babel/helpers@7.27.1':
    dependencies:
@@ -10895,7 +10944,7 @@ snapshots:

  '@babel/parser@7.26.9':
    dependencies:
-      '@babel/types': 7.26.9
+      '@babel/types': 7.27.1

  '@babel/parser@7.27.1':
    dependencies:
@@ -11732,7 +11781,7 @@ snapshots:
      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.27.1)
      '@babel/helper-plugin-utils': 7.27.1

-  '@babel/preset-env@7.26.9(@babel/core@7.26.9)':
+  '@babel/preset-env@7.27.1(@babel/core@7.26.9)':
    dependencies:
      '@babel/compat-data': 7.27.1
      '@babel/core': 7.26.9
@@ -11905,8 +11954,8 @@ snapshots:
  '@babel/template@7.26.9':
    dependencies:
      '@babel/code-frame': 7.26.2
-      '@babel/parser': 7.26.9
-      '@babel/types': 7.26.9
+      '@babel/parser': 7.27.1
+      '@babel/types': 7.27.1

  '@babel/template@7.27.1':
    dependencies:
@@ -11918,9 +11967,9 @@ snapshots:
    dependencies:
      '@babel/code-frame': 7.26.2
      '@babel/generator': 7.26.9
-      '@babel/parser': 7.26.9
+      '@babel/parser': 7.27.1
      '@babel/template': 7.26.9
-      '@babel/types': 7.26.9
+      '@babel/types': 7.27.1
      debug: 4.4.0(supports-color@8.1.1)
      globals: 11.12.0
    transitivePeerDependencies:
@@ -11940,8 +11989,8 @@ snapshots:

  '@babel/types@7.26.9':
    dependencies:
-      '@babel/helper-string-parser': 7.25.9
-      '@babel/helper-validator-identifier': 7.25.9
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1

  '@babel/types@7.27.1':
    dependencies:
@@ -12495,11 +12544,11 @@ snapshots:

  '@csstools/css-tokenizer@3.0.3': {}

-  '@cypress/code-coverage@3.13.4(@babel/core@7.26.9)(@babel/preset-env@7.26.9(@babel/core@7.26.9))(babel-loader@9.2.1(@babel/core@7.26.9)(webpack@5.95.0(esbuild@0.25.0)))(cypress@14.0.3)(webpack@5.95.0(esbuild@0.25.0))':
+  '@cypress/code-coverage@3.13.4(@babel/core@7.26.9)(@babel/preset-env@7.27.1(@babel/core@7.26.9))(babel-loader@9.2.1(@babel/core@7.26.9)(webpack@5.95.0(esbuild@0.25.0)))(cypress@14.0.3)(webpack@5.95.0(esbuild@0.25.0))':
    dependencies:
      '@babel/core': 7.26.9
-      '@babel/preset-env': 7.26.9(@babel/core@7.26.9)
-      '@cypress/webpack-preprocessor': 6.0.2(@babel/core@7.26.9)(@babel/preset-env@7.26.9(@babel/core@7.26.9))(babel-loader@9.2.1(@babel/core@7.26.9)(webpack@5.95.0(esbuild@0.25.0)))(webpack@5.95.0(esbuild@0.25.0))
+      '@babel/preset-env': 7.27.1(@babel/core@7.26.9)
+      '@cypress/webpack-preprocessor': 6.0.2(@babel/core@7.26.9)(@babel/preset-env@7.27.1(@babel/core@7.26.9))(babel-loader@9.2.1(@babel/core@7.26.9)(webpack@5.95.0(esbuild@0.25.0)))(webpack@5.95.0(esbuild@0.25.0))
      babel-loader: 9.2.1(@babel/core@7.26.9)(webpack@5.95.0(esbuild@0.25.0))
      chalk: 4.1.2
      cypress: 14.0.3
@@ -12535,10 +12584,10 @@ snapshots:
      tunnel-agent: 0.6.0
      uuid: 8.3.2

-  '@cypress/webpack-preprocessor@6.0.2(@babel/core@7.26.9)(@babel/preset-env@7.26.9(@babel/core@7.26.9))(babel-loader@9.2.1(@babel/core@7.26.9)(webpack@5.95.0(esbuild@0.25.0)))(webpack@5.95.0(esbuild@0.25.0))':
+  '@cypress/webpack-preprocessor@6.0.2(@babel/core@7.26.9)(@babel/preset-env@7.27.1(@babel/core@7.26.9))(babel-loader@9.2.1(@babel/core@7.26.9)(webpack@5.95.0(esbuild@0.25.0)))(webpack@5.95.0(esbuild@0.25.0))':
    dependencies:
      '@babel/core': 7.26.9
-      '@babel/preset-env': 7.26.9(@babel/core@7.26.9)
+      '@babel/preset-env': 7.27.1(@babel/core@7.26.9)
      babel-loader: 9.2.1(@babel/core@7.26.9)(webpack@5.95.0(esbuild@0.25.0))
      bluebird: 3.7.1
      debug: 4.4.0(supports-color@8.1.1)
@@ -13574,24 +13623,24 @@ snapshots:

  '@types/babel__core@7.20.5':
    dependencies:
-      '@babel/parser': 7.26.9
-      '@babel/types': 7.26.9
+      '@babel/parser': 7.27.1
+      '@babel/types': 7.27.1
      '@types/babel__generator': 7.6.8
      '@types/babel__template': 7.4.4
      '@types/babel__traverse': 7.20.6

  '@types/babel__generator@7.6.8':
    dependencies:
-      '@babel/types': 7.26.9
+      '@babel/types': 7.27.1

  '@types/babel__template@7.4.4':
    dependencies:
-      '@babel/parser': 7.26.9
-      '@babel/types': 7.26.9
+      '@babel/parser': 7.27.1
+      '@babel/types': 7.27.1

  '@types/babel__traverse@7.20.6':
    dependencies:
-      '@babel/types': 7.26.9
+      '@babel/types': 7.27.1

  '@types/body-parser@1.19.5':
    dependencies:
@@ -14131,6 +14180,16 @@ snapshots:
    transitivePeerDependencies:
      - vue

+  '@unocss/astro@66.0.0(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@unocss/core': 66.0.0
+      '@unocss/reset': 66.0.0
+      '@unocss/vite': 66.0.0(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.7.3))
+    optionalDependencies:
+      vite: 6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1)
+    transitivePeerDependencies:
+      - vue
+
  '@unocss/cli@66.0.0':
    dependencies:
      '@ampproject/remapping': 2.3.0
@@ -14266,6 +14325,24 @@ snapshots:
    transitivePeerDependencies:
      - vue

+  '@unocss/vite@66.0.0(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@unocss/config': 66.0.0
+      '@unocss/core': 66.0.0
+      '@unocss/inspector': 66.0.0(vue@3.5.13(typescript@5.7.3))
+      chokidar: 3.6.0
+      magic-string: 0.30.17
+      tinyglobby: 0.2.12
+      unplugin-utils: 0.2.4
+      vite: 6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1)
+    transitivePeerDependencies:
+      - vue
+
+  '@vite-pwa/vitepress@0.5.4(vite-plugin-pwa@0.21.2(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.3.0))':
+    dependencies:
+      vite-plugin-pwa: 0.21.2(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.3.0)
+
  '@vite-pwa/vitepress@1.0.0(vite-plugin-pwa@1.0.0(vite@6.1.1(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.3.0))':
    dependencies:
      vite-plugin-pwa: 1.0.0(vite@6.1.1(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.3.0)
@@ -14280,6 +14357,11 @@ snapshots:
      vite: 6.1.1(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1)
      vue: 3.5.13(typescript@5.7.3)

+  '@vitejs/plugin-vue@5.2.1(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.7.3))':
+    dependencies:
+      vite: 6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1)
+      vue: 3.5.13(typescript@5.7.3)
+
  '@vitest/coverage-v8@3.0.6(vitest@3.0.6)':
    dependencies:
      '@ampproject/remapping': 2.3.0
@@ -14358,7 +14440,7 @@ snapshots:

  '@vue/compiler-core@3.5.13':
    dependencies:
-      '@babel/parser': 7.26.9
+      '@babel/parser': 7.27.1
      '@vue/shared': 3.5.13
      entities: 4.5.0
      estree-walker: 2.0.2
@@ -14371,7 +14453,7 @@ snapshots:

  '@vue/compiler-sfc@3.5.13':
    dependencies:
-      '@babel/parser': 7.26.9
+      '@babel/parser': 7.27.1
      '@vue/compiler-core': 3.5.13
      '@vue/compiler-dom': 3.5.13
      '@vue/compiler-ssr': 3.5.13
@@ -14666,8 +14748,6 @@ snapshots:

  acorn@8.12.1: {}

-  acorn@8.14.0: {}
-
  acorn@8.14.1: {}

  agent-base@6.0.2:
@@ -14824,7 +14904,7 @@ snapshots:

  array-buffer-byte-length@1.0.2:
    dependencies:
-      call-bound: 1.0.3
+      call-bound: 1.0.4
      is-array-buffer: 3.0.5

  array-flatten@1.1.1: {}
@@ -14929,7 +15009,7 @@ snapshots:
  babel-plugin-jest-hoist@29.6.3:
    dependencies:
      '@babel/template': 7.26.9
-      '@babel/types': 7.26.9
+      '@babel/types': 7.27.1
      '@types/babel__core': 7.20.5
      '@types/babel__traverse': 7.20.6

@@ -15173,14 +15253,9 @@ snapshots:
    dependencies:
      call-bind-apply-helpers: 1.0.2
      es-define-property: 1.0.1
-      get-intrinsic: 1.2.7
+      get-intrinsic: 1.3.0
      set-function-length: 1.2.2

-  call-bound@1.0.3:
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      get-intrinsic: 1.2.7
-
  call-bound@1.0.4:
    dependencies:
      call-bind-apply-helpers: 1.0.2
@@ -15290,10 +15365,6 @@ snapshots:
    optionalDependencies:
      fsevents: 2.3.3

-  chokidar@4.0.3:
-    dependencies:
-      readdirp: 4.1.2
-
  chrome-trace-event@1.0.4: {}

  ci-info@3.9.0: {}
@@ -15448,7 +15519,7 @@ snapshots:

  compressible@2.0.18:
    dependencies:
-      mime-db: 1.53.0
+      mime-db: 1.54.0

  compression@1.7.4:
    dependencies:
@@ -16115,7 +16186,7 @@ snapshots:
      array-buffer-byte-length: 1.0.2
      call-bind: 1.0.8
      es-get-iterator: 1.1.3
-      get-intrinsic: 1.2.7
+      get-intrinsic: 1.3.0
      is-arguments: 1.1.1
      is-array-buffer: 3.0.5
      is-date-object: 1.1.0
@@ -16438,7 +16509,7 @@ snapshots:
  es-get-iterator@1.1.3:
    dependencies:
      call-bind: 1.0.8
-      get-intrinsic: 1.2.7
+      get-intrinsic: 1.3.0
      has-symbols: 1.1.0
      is-arguments: 1.1.1
      is-map: 2.0.3
@@ -17142,7 +17213,7 @@ snapshots:

  find-test-names@1.29.5(@babel/core@7.26.9):
    dependencies:
-      '@babel/parser': 7.26.9
+      '@babel/parser': 7.27.1
      '@babel/plugin-syntax-jsx': 7.25.7(@babel/core@7.26.9)
      acorn-walk: 8.3.4
      debug: 4.4.0(supports-color@8.1.1)
@@ -17770,8 +17841,8 @@ snapshots:
  is-array-buffer@3.0.5:
    dependencies:
      call-bind: 1.0.8
-      call-bound: 1.0.3
-      get-intrinsic: 1.2.7
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0

  is-arrayish@0.2.1: {}

@@ -17795,7 +17866,7 @@ snapshots:

  is-boolean-object@1.2.2:
    dependencies:
-      call-bound: 1.0.3
+      call-bound: 1.0.4
      has-tostringtag: 1.0.2

  is-builtin-module@5.0.0:
@@ -17816,7 +17887,7 @@ snapshots:

  is-date-object@1.1.0:
    dependencies:
-      call-bound: 1.0.3
+      call-bound: 1.0.4
      has-tostringtag: 1.0.2

  is-decimal@1.0.4: {}
@@ -17865,7 +17936,7 @@ snapshots:

  is-number-object@1.1.1:
    dependencies:
-      call-bound: 1.0.3
+      call-bound: 1.0.4
      has-tostringtag: 1.0.2

  is-number@7.0.0: {}
@@ -17888,7 +17959,7 @@ snapshots:

  is-regex@1.2.1:
    dependencies:
-      call-bound: 1.0.3
+      call-bound: 1.0.4
      gopd: 1.2.0
      has-tostringtag: 1.0.2
      hasown: 2.0.2
@@ -17899,7 +17970,7 @@ snapshots:

  is-shared-array-buffer@1.0.4:
    dependencies:
-      call-bound: 1.0.3
+      call-bound: 1.0.4

  is-stream@1.1.0: {}

@@ -17909,7 +17980,7 @@ snapshots:

  is-string@1.1.1:
    dependencies:
-      call-bound: 1.0.3
+      call-bound: 1.0.4
      has-tostringtag: 1.0.2

  is-subdir@1.2.0:
@@ -17918,7 +17989,7 @@ snapshots:

  is-symbol@1.1.1:
    dependencies:
-      call-bound: 1.0.3
+      call-bound: 1.0.4
      has-symbols: 1.1.0
      safe-regex-test: 1.1.0

@@ -17943,7 +18014,7 @@ snapshots:
  is-weakset@2.0.3:
    dependencies:
      call-bind: 1.0.8
-      get-intrinsic: 1.2.7
+      get-intrinsic: 1.3.0

  is-what@4.1.16: {}

@@ -17981,7 +18052,7 @@ snapshots:
  istanbul-lib-instrument@5.2.1:
    dependencies:
      '@babel/core': 7.26.9
-      '@babel/parser': 7.26.9
+      '@babel/parser': 7.27.1
      '@istanbuljs/schema': 0.1.3
      istanbul-lib-coverage: 3.2.2
      semver: 6.3.1
@@ -17991,7 +18062,7 @@ snapshots:
  istanbul-lib-instrument@6.0.3:
    dependencies:
      '@babel/core': 7.26.9
-      '@babel/parser': 7.26.9
+      '@babel/parser': 7.27.1
      '@istanbuljs/schema': 0.1.3
      istanbul-lib-coverage: 3.2.2
      semver: 7.7.1
@@ -18310,7 +18381,7 @@ snapshots:
      '@babel/generator': 7.26.9
      '@babel/plugin-syntax-jsx': 7.25.7(@babel/core@7.26.9)
      '@babel/plugin-syntax-typescript': 7.25.7(@babel/core@7.26.9)
-      '@babel/types': 7.26.9
+      '@babel/types': 7.27.1
      '@jest/expect-utils': 29.7.0
      '@jest/transform': 29.7.0
      '@jest/types': 29.6.3
@@ -19174,8 +19245,6 @@ snapshots:

  mime-db@1.52.0: {}

-  mime-db@1.53.0: {}
-
  mime-db@1.54.0: {}

  mime-types@2.1.35:
@@ -19232,7 +19301,7 @@ snapshots:

  mlly@1.7.4:
    dependencies:
-      acorn: 8.14.0
+      acorn: 8.14.1
      pathe: 2.0.3
      pkg-types: 1.3.1
      ufo: 1.5.4
@@ -19320,7 +19389,7 @@ snapshots:

  node-source-walk@7.0.0:
    dependencies:
-      '@babel/parser': 7.26.9
+      '@babel/parser': 7.27.1

  nomnom@1.5.2:
    dependencies:
@@ -19425,7 +19494,7 @@ snapshots:
  object.assign@4.1.7:
    dependencies:
      call-bind: 1.0.8
-      call-bound: 1.0.3
+      call-bound: 1.0.4
      define-properties: 1.2.1
      es-object-atoms: 1.1.1
      has-symbols: 1.1.0
@@ -20001,8 +20070,6 @@ snapshots:
    dependencies:
      picomatch: 2.3.1

-  readdirp@4.1.2: {}
-
  real-require@0.2.0: {}

  rechoir@0.6.2:
@@ -20314,7 +20381,7 @@ snapshots:

  safe-regex-test@1.1.0:
    dependencies:
-      call-bound: 1.0.3
+      call-bound: 1.0.4
      es-errors: 1.3.0
      is-regex: 1.2.1

@@ -20450,7 +20517,7 @@ snapshots:
      define-data-property: 1.1.4
      es-errors: 1.3.0
      function-bind: 1.1.2
-      get-intrinsic: 1.2.7
+      get-intrinsic: 1.3.0
      gopd: 1.2.0
      has-property-descriptors: 1.0.2

@@ -20539,16 +20606,16 @@ snapshots:

  side-channel-map@1.0.1:
    dependencies:
-      call-bound: 1.0.3
+      call-bound: 1.0.4
      es-errors: 1.3.0
-      get-intrinsic: 1.2.7
+      get-intrinsic: 1.3.0
      object-inspect: 1.13.4

  side-channel-weakmap@1.0.2:
    dependencies:
-      call-bound: 1.0.3
+      call-bound: 1.0.4
      es-errors: 1.3.0
-      get-intrinsic: 1.2.7
+      get-intrinsic: 1.3.0
      object-inspect: 1.13.4
      side-channel-map: 1.0.1

@@ -21011,7 +21078,7 @@ snapshots:
  terser@5.34.1:
    dependencies:
      '@jridgewell/source-map': 0.3.6
-      acorn: 8.14.0
+      acorn: 8.14.1
      commander: 2.20.3
      source-map-support: 0.5.21

@@ -21377,6 +21444,33 @@ snapshots:
      - supports-color
      - vue

+  unocss@66.0.0(postcss@8.5.3)(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.7.3)):
+    dependencies:
+      '@unocss/astro': 66.0.0(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.7.3))
+      '@unocss/cli': 66.0.0
+      '@unocss/core': 66.0.0
+      '@unocss/postcss': 66.0.0(postcss@8.5.3)
+      '@unocss/preset-attributify': 66.0.0
+      '@unocss/preset-icons': 66.0.0
+      '@unocss/preset-mini': 66.0.0
+      '@unocss/preset-tagify': 66.0.0
+      '@unocss/preset-typography': 66.0.0
+      '@unocss/preset-uno': 66.0.0
+      '@unocss/preset-web-fonts': 66.0.0
+      '@unocss/preset-wind': 66.0.0
+      '@unocss/preset-wind3': 66.0.0
+      '@unocss/transformer-attributify-jsx': 66.0.0
+      '@unocss/transformer-compile-class': 66.0.0
+      '@unocss/transformer-directives': 66.0.0
+      '@unocss/transformer-variant-group': 66.0.0
+      '@unocss/vite': 66.0.0(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(vue@3.5.13(typescript@5.7.3))
+    optionalDependencies:
+      vite: 6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1)
+    transitivePeerDependencies:
+      - postcss
+      - supports-color
+      - vue
+
  unpipe@1.0.0: {}

  unplugin-utils@0.2.4:
@@ -21402,7 +21496,7 @@ snapshots:

  unplugin@2.2.0:
    dependencies:
-      acorn: 8.14.0
+      acorn: 8.14.1
      webpack-virtual-modules: 0.6.2

  untildify@4.0.0: {}
@@ -21492,6 +21586,17 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

+  vite-plugin-pwa@0.21.2(vite@6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.3.0):
+    dependencies:
+      debug: 4.4.0(supports-color@8.1.1)
+      pretty-bytes: 6.1.1
+      tinyglobby: 0.2.12
+      vite: 6.1.6(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1)
+      workbox-build: 7.1.1(@types/babel__core@7.20.5)
+      workbox-window: 7.3.0
+    transitivePeerDependencies:
+      - supports-color
+
  vite-plugin-pwa@1.0.0(vite@6.1.1(@types/node@22.13.5)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.3.0):
    dependencies:
      debug: 4.4.0(supports-color@8.1.1)
@@ -21957,7 +22062,7 @@ snapshots:
    dependencies:
      available-typed-arrays: 1.0.7
      call-bind: 1.0.8
-      call-bound: 1.0.3
+      call-bound: 1.0.4
      for-each: 0.3.5
      gopd: 1.2.0
      has-tostringtag: 1.0.2