diff --git a/eslint.config.js b/eslint.config.js
index dd83a4b..708b516 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -8,7 +8,6 @@ export default antfu(
   {
     rules: {
       'unused-imports/no-unused-vars': 'warn',
-
     },
   },
 )
diff --git a/package.json b/package.json
index 5782595..a436456 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,9 @@
     "prepare": "simple-git-hooks",
     "preview": "pnpm vite ./test"
   },
+  "dependencies": {
+    "mermaid": "^11.8.0"
+  },
   "devDependencies": {
     "@antfu/eslint-config": "catalog:",
     "@antfu/ni": "catalog:",
diff --git a/packages/math/src/angle/arc.ts b/packages/math/src/angle/arc.ts
index 6538330..a8a0b68 100644
--- a/packages/math/src/angle/arc.ts
+++ b/packages/math/src/angle/arc.ts
@@ -1,6 +1,6 @@
 import { theme } from '@sciux/utils-theme'
 import { type } from 'arktype'
-import { defineComponent } from 'sciux-laplace'
+import { defineAnimation, defineComponent } from 'sciux-laplace'
 import { LineType } from '../shared'
 import { describeArc } from '../utils/arc-path'
 import { resolveDasharray } from '../utils/line'
@@ -24,26 +24,99 @@ export const arc = defineComponent<'arc', typeof T.infer, {
     attrs: T,
     defaults: {
       value: '',
+      type: 'solid',
     },
     setup() {
       const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
-      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
-      path.setAttribute('d', describeArc([context.x, context.y], (context.startSide ?? context.endSide) / 3, context.from, context.to))
-      path.setAttribute('stroke', theme.pallete('primary'))
-      path.setAttribute('fill', 'none')
-      path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value))
-      const texElement = generateTexNode(attrs.value?.value)
-      const length = (context.startSide ?? context.endSide) / 3
-      const angle = context.from + (context.to - context.from) / 2
-      const position = [
-        length * Math.cos(angle * Math.PI / 180),
-        length * Math.sin(angle * Math.PI / 180),
-      ]
-      const texContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g')
-      texContainer.setAttribute('transform', `translate(${position[0]}, ${position[1]})`)
-      texContainer.append(texElement)
-      container.append(path, texContainer)
-      return container
+      container.id = 'canvas-angle-arc'
+      const angleValue = Math.abs((context.to - context.from + 360) % 360)
+      const isRightAngle = Math.abs(angleValue - 90) < 1e-2
+      if (isRightAngle) {
+        const length = Math.min(context.startSide ?? 0, context.endSide ?? 0) / 3
+        const radFrom = context.from * Math.PI / 180
+        const radTo = context.to * Math.PI / 180
+        const p1 = [length * Math.cos(radFrom), length * Math.sin(radFrom)]
+        const p2 = [length * Math.cos(radTo), length * Math.sin(radTo)]
+        const line1 = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+        line1.setAttribute('x1', '0')
+        line1.setAttribute('y1', '0')
+        line1.setAttribute('x2', p1[0].toString())
+        line1.setAttribute('y2', p1[1].toString())
+        line1.setAttribute('stroke', theme.pallete('primary'))
+        line1.setAttribute('stroke-width', '1')
+        line1.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value))
+        const line2 = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+        line2.setAttribute('x1', '0')
+        line2.setAttribute('y1', '0')
+        line2.setAttribute('x2', p2[0].toString())
+        line2.setAttribute('y2', p2[1].toString())
+        line2.setAttribute('stroke', theme.pallete('primary'))
+        line2.setAttribute('stroke-width', '1')
+        line2.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value))
+        const l1 = [length * 0.6 * Math.cos(radFrom), length * 0.6 * Math.sin(radFrom)]
+        const l2 = [length * 0.6 * Math.cos(radTo), length * 0.6 * Math.sin(radTo)]
+        const l3 = [l1[0] + (l2[0]), l1[1] + (l2[1])]
+        const lPath = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+        lPath.setAttribute('d', `M ${l1[0]} ${l1[1]} L ${l3[0]} ${l3[1]} L ${l2[0]} ${l2[1]}`)
+        lPath.setAttribute('stroke', theme.pallete('primary'))
+        lPath.setAttribute('fill', 'none')
+        lPath.setAttribute('stroke-width', '1')
+        lPath.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value))
+        const texElement = generateTexNode(attrs.value?.value)
+        const labelPos = [
+          (l1[0] + l2[0] + l3[0]) / 3,
+          (l1[1] + l2[1] + l3[1]) / 3,
+        ]
+        const texContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+        texContainer.setAttribute('transform', `translate(${labelPos[0]}, ${labelPos[1]})`)
+        texContainer.append(texElement)
+        container.append(line1)
+        container.append(line2)
+        container.append(lPath)
+        container.append(texContainer)
+        return container
+      }
+      else {
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+        path.id = 'angle-arc'
+        path.setAttribute('d', describeArc([0, 0], Math.min(context.startSide ?? 0, context.endSide ?? 0) / 3, context.from, context.to))
+        path.setAttribute('stroke', theme.pallete('primary'))
+        path.setAttribute('fill', 'none')
+        path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value))
+        const texElement = generateTexNode(attrs.value?.value)
+        const length = Math.min(context.startSide ?? 0, context.endSide ?? 0) / 3
+        const angle = context.from + (context.to - context.from) / 2
+        const position = [
+          length * Math.cos(angle * Math.PI / 180),
+          length * Math.sin(angle * Math.PI / 180),
+        ]
+        const texContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+        texContainer.setAttribute('transform', `translate(${position[0]}, ${position[1]})`)
+        texContainer.append(texElement)
+        container.append(path, texContainer)
+        return container
+      }
     },
   }
 })
+
+export const angleArcCreation = defineAnimation((node: Node, _, { context }: {
+  context: {
+    from: number
+    to: number
+    startSide: number
+    endSide: number
+  }
+}) => {
+  const el = node as HTMLElement
+  if (el.id !== 'canvas-angle-arc')
+    return
+  const path = el.querySelector('#angle-arc') as SVGPathElement
+  return (progress) => {
+    if (progress > 1) {
+      return true
+    }
+    path.setAttribute('d', describeArc([0, 0], Math.min(context.startSide ?? 0, context.endSide ?? 0) / 3, context.from, context.from - (context.from - context.to) * progress))
+    return false
+  }
+})
diff --git a/packages/math/src/angle/bouding.ts b/packages/math/src/angle/bouding.ts
index 026f1cd..fde84f8 100644
--- a/packages/math/src/angle/bouding.ts
+++ b/packages/math/src/angle/bouding.ts
@@ -1,6 +1,6 @@
 import { theme } from '@sciux/utils-theme'
 import { type } from 'arktype'
-import { defineComponent } from 'sciux-laplace'
+import { defineAnimation, defineComponent } from 'sciux-laplace'
 import { LineType } from '../shared'
 import { describeArc } from '../utils/arc-path'
 import { resolveDasharray } from '../utils/line'
@@ -28,6 +28,7 @@ export const bounding = defineComponent<'bounding', typeof T.infer, {
     },
     setup() {
       const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      container.id = 'canvas-bounding'
       const pathString = describeArc([context.x, context.y], context.startSide ?? context.endSide, context.from, context.to)
       const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
       path.setAttribute('d', pathString)
@@ -50,3 +51,23 @@ export const bounding = defineComponent<'bounding', typeof T.infer, {
     },
   }
 })
+
+export const boundingCreation = defineAnimation((node: Node, _, { context }: { context: {
+  x: number
+  y: number
+  from: number
+  to: number
+  startSide?: number
+  endSide: number
+} }) => {
+  const el = node as HTMLElement
+  if (el.id !== 'canvas-bounding')
+    return
+  const path = el.querySelector('#canvas-bounding-path') as SVGPathElement
+  return (progress) => {
+    if (progress > 1)
+      return true
+    path.setAttribute('d', describeArc([0, 0], Math.min(context.startSide ?? 0, context.endSide ?? 0), context.from, context.from - (context.from - context.to) * progress))
+    return false
+  }
+})
diff --git a/packages/math/src/angle/index.ts b/packages/math/src/angle/index.ts
index ec1a7df..c7e2065 100644
--- a/packages/math/src/angle/index.ts
+++ b/packages/math/src/angle/index.ts
@@ -1,8 +1,9 @@
 import { theme } from '@sciux/utils-theme'
 import { type } from 'arktype'
-import { defineComponent } from 'sciux-laplace'
+import { defineAnimation, defineComponent } from 'sciux-laplace'
 import { LineType } from '../shared'
 import { resolveDasharray } from '../utils/line'
+import { generateTexNode } from '../utils/tex'
 import { arc } from './arc'
 import { bounding } from './bouding'
 import { angleEndPoint, angleStartPoint, origin } from './points'
@@ -38,6 +39,7 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => {
     },
     setup(children) {
       const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      container.id = 'canvas-angle'
       container.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`)
       const resolve = (value: number, length: number): { x1: number, y1: number, x2: number, y2: number } => {
         const radian = value * Math.PI / 180
@@ -51,6 +53,7 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => {
       const startSide = resolve(attrs.from.value, attrs.startSide.value)
       const endSide = resolve(attrs.to.value, attrs.endSide.value)
       const startSideLine = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+      startSideLine.id = 'angle-start-side'
       startSideLine.setAttribute('x1', startSide.x1.toString())
       startSideLine.setAttribute('y1', startSide.y1.toString())
       startSideLine.setAttribute('x2', startSide.x2.toString())
@@ -60,6 +63,7 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => {
       startSideLine.setAttribute('stroke-dasharray', resolveDasharray(attrs.startSideType.value))
       container.append(startSideLine)
       const endSideLine = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+      endSideLine.id = 'angle-end-side'
       endSideLine.setAttribute('x1', endSide.x1.toString())
       endSideLine.setAttribute('y1', endSide.y1.toString())
       endSideLine.setAttribute('x2', endSide.x2.toString())
@@ -67,6 +71,25 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => {
       endSideLine.setAttribute('stroke', theme.pallete('primary'))
       endSideLine.setAttribute('stroke-width', '1')
       endSideLine.setAttribute('stroke-dasharray', resolveDasharray(attrs.endSideType.value))
+
+      const startSideTexPosition = [
+        startSide.x1 + (startSide.x2 - startSide.x1) / 2,
+        startSide.y1 + (startSide.y2 - startSide.y1) / 2,
+      ]
+      const startSideTex = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      startSideTex.setAttribute('transform', `translate(${startSideTexPosition[0]}, ${startSideTexPosition[1]})`)
+      startSideTex.append(generateTexNode(attrs.startSideValue?.value ?? ''))
+      container.append(startSideTex)
+
+      const endSideTexPosition = [
+        endSide.x1 + (endSide.x2 - endSide.x1) / 2,
+        endSide.y1 + (endSide.y2 - endSide.y1) / 2,
+      ]
+      const endSideTex = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      endSideTex.setAttribute('transform', `translate(${endSideTexPosition[0]}, ${endSideTexPosition[1]})`)
+      endSideTex.append(generateTexNode(attrs.endSideValue?.value ?? ''))
+      container.append(endSideTex)
+
       container.append(endSideLine)
       container.append(...children())
       return container
@@ -82,3 +105,25 @@ export const angle = defineComponent<'angle', typeof T.infer>((attrs) => {
     space,
   }
 })
+
+export const angleCreation = defineAnimation((node: Node) => {
+  const el = node as HTMLElement
+  if (el.id !== 'canvas-angle')
+    return
+  const startSide = el.querySelector('#angle-start-side')
+  const endSide = el.querySelector('#angle-end-side')
+  const start = [Number(startSide?.getAttribute('x2')), Number(startSide?.getAttribute('y2'))]
+  const end = [Number(endSide?.getAttribute('x2')), Number(endSide?.getAttribute('y2'))]
+  return (progress) => {
+    if (progress > 1) {
+      return true
+    }
+    startSide?.setAttribute('x2', (start[0] * progress).toString())
+    startSide?.setAttribute('y2', (start[1] * progress).toString())
+    endSide?.setAttribute('x2', (end[0] * progress).toString())
+    endSide?.setAttribute('y2', (end[1] * progress).toString())
+    return false
+  }
+})
+
+export { angleArcCreation } from './arc'
diff --git a/packages/math/src/angle/points.ts b/packages/math/src/angle/points.ts
index 2063fea..b8911d1 100644
--- a/packages/math/src/angle/points.ts
+++ b/packages/math/src/angle/points.ts
@@ -1,5 +1,6 @@
 import { defineComponent } from 'sciux-laplace'
 import { InfoPointType } from '../shared'
+import { generateTexNode } from '../utils/tex'
 
 export const angleStartPoint = defineComponent<'start-point', typeof InfoPointType.infer, {
   x: number
@@ -7,14 +8,25 @@ export const angleStartPoint = defineComponent<'start-point', typeof InfoPointTy
   startSide: number
   from: number
 }>((attrs, context) => {
+  const position = [
+    context.startSide * Math.cos(context.from * Math.PI / 180) + context.x,
+    context.startSide * Math.sin(context.from * Math.PI / 180) + context.y,
+  ]
   return {
     name: 'start-point',
     attrs: InfoPointType,
     globals: {
-      [attrs.as.value]: [
-        context.startSide * Math.cos(context.from * Math.PI / 180),
-        context.startSide * Math.sin(context.from * Math.PI / 180),
-      ],
+      [attrs.as.value]: position,
+    },
+    defaults: {
+      value: '',
+    },
+    setup() {
+      const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      container.setAttribute('transform', `translate(${position[0] - context.x}, ${position[1] - context.y})`)
+      const texElement = generateTexNode(attrs.value.value)
+      container.append(texElement)
+      return container
     },
   }
 })
@@ -25,14 +37,25 @@ export const angleEndPoint = defineComponent<'end-point', typeof InfoPointType.i
   endSide: number
   to: number
 }>((attrs, context) => {
+  const position = [
+    context.endSide * Math.cos(context.to * Math.PI / 180) + context.x,
+    context.endSide * Math.sin(context.to * Math.PI / 180) + context.y,
+  ]
   return {
     name: 'end-point',
     attrs: InfoPointType,
     globals: {
-      [attrs.as.value]: [
-        context.endSide * Math.cos(context.to * Math.PI / 180),
-        context.endSide * Math.sin(context.to * Math.PI / 180),
-      ],
+      [attrs.as.value]: position,
+    },
+    defaults: {
+      value: '',
+    },
+    setup() {
+      const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      container.setAttribute('transform', `translate(${position[0] - context.x}, ${position[1] - context.y})`)
+      const texElement = generateTexNode(attrs.value.value)
+      container.append(texElement)
+      return container
     },
   }
 })
@@ -47,5 +70,14 @@ export const origin = defineComponent<'origin', typeof InfoPointType.infer, {
     globals: {
       [attrs.as.value]: [context.x, context.y],
     },
+    defaults: {
+      value: '',
+    },
+    setup() {
+      const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      const texElement = generateTexNode(attrs.value.value)
+      container.append(texElement)
+      return container
+    },
   }
 })
diff --git a/packages/math/src/axis/index.ts b/packages/math/src/axis/index.ts
index 1b9395f..fc26c8d 100644
--- a/packages/math/src/axis/index.ts
+++ b/packages/math/src/axis/index.ts
@@ -1,6 +1,7 @@
+import type { ToRefs } from 'sciux-laplace'
 import { theme } from '@sciux/utils-theme'
 import { type } from 'arktype'
-import { defineComponent } from 'sciux-laplace'
+import { defineAnimation, defineComponent } from 'sciux-laplace'
 
 const T = type({
   x: type.number,
@@ -23,27 +24,33 @@ export const axis = defineComponent<'axis', typeof T.infer>((attrs) => {
       division: attrs.division,
     },
     defaults: {
-      division: 20,
+      // division: 20,
       label: (count: number) => count.toString(),
       direction: 'right',
     },
     setup(children) {
       const root = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      root.id = 'canvas-axis'
       root.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`)
       const axes = document.createElementNS('http://www.w3.org/2000/svg', 'g')
       // axis line
       const line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+      line.id = 'canvas-axis-line'
       line.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x1' : 'y1', (attrs.range.value[0] * attrs.division.value * resolveDirection(attrs.direction.value)).toString())
       line.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x2' : 'y2', (attrs.range.value[1] * attrs.division.value * resolveDirection(attrs.direction.value)).toString())
       axes.append(line)
       // axis arrow
       const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'polygon')
-      arrow.setAttribute('points', '0,0 -7,5 10,0 -7,-5 0,0')
+      arrow.id = 'canvas-axis-arrow'
+      arrow.setAttribute('points', '-7,5 10,0 -7,-5 0,0')
       arrow.setAttribute('transform', `translate(${['left', 'right'].includes(attrs.direction.value) ? '' : '0,'} ${attrs.range.value[1] * attrs.division.value * resolveDirection(attrs.direction.value)}${['top', 'bottom'].includes(attrs.direction.value) ? '' : ' ,0'})
         rotate(${attrs.direction.value === 'left' ? '180' : attrs.direction.value === 'top' ? '270' : attrs.direction.value === 'bottom' ? '90' : '0'})`)
+      arrow.setAttribute('stroke', theme.pallete('primary'))
+      arrow.setAttribute('fill', theme.pallete('primary'))
       axes.append(arrow)
       // axis ticks
       const ticks = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      ticks.id = 'canvas-axis-ticks'
       for (let i = attrs.range.value[0]; i < attrs.range.value[1]; i += 1) {
         const tick = document.createElementNS('http://www.w3.org/2000/svg', 'line')
         tick.setAttribute(['left', 'right'].includes(attrs.direction.value) ? 'x1' : 'y1', (i * attrs.division.value * resolveDirection(attrs.direction.value)).toString())
@@ -77,3 +84,30 @@ export const axis = defineComponent<'axis', typeof T.infer>((attrs) => {
     },
   }
 })
+
+export const axisCreation = defineAnimation((node: Node, _, { attrs, context }: { attrs: ToRefs<typeof T.infer>, context: { division: number } }) => {
+  const el = node as HTMLElement
+  if (el.id !== 'canvas-axis')
+    return
+  const line = el.querySelector('#canvas-axis-line') as SVGLineElement
+  const arrow = el.querySelector('#canvas-axis-arrow') as SVGPolygonElement
+  const ticks = el.querySelector('#canvas-axis-ticks') as SVGGElement
+  const length = (attrs.range.value[1] - attrs.range.value[0]) * (context.division ?? attrs.division.value)
+  const height = 4
+  const arrowRound = 2 * (Math.sqrt(5 * 5 + 7 * 7) + Math.sqrt(5 * 5 + 17 * 17))
+  arrow.setAttribute('fill-opacity', '0')
+
+  return (progress) => {
+    if (progress > 1)
+      return true
+    line.setAttribute('stroke-dasharray', `${length * progress},${length * (1 - progress)}`)
+    ticks.setAttribute('stroke-dasharray', `${height * progress},${height * (1 - progress)}`)
+    if (progress < 0.5) {
+      arrow.setAttribute('stroke-dasharray', `${arrowRound * (progress * 2)},${arrowRound * (1 - progress * 2)}`)
+    }
+    else {
+      arrow.setAttribute('fill-opacity', `${(progress - 0.5) * 2}`)
+    }
+    return false
+  }
+})
diff --git a/packages/math/src/circle/index.ts b/packages/math/src/circle/index.ts
index 90bb515..4111dd5 100644
--- a/packages/math/src/circle/index.ts
+++ b/packages/math/src/circle/index.ts
@@ -1,6 +1,7 @@
+import type { ToRefs } from 'sciux-laplace'
 import { theme } from '@sciux/utils-theme'
 import { type } from 'arktype'
-import { defineComponent } from 'sciux-laplace'
+import { defineAnimation, defineComponent } from 'sciux-laplace'
 import { LineType } from '../shared'
 import { describeArc } from '../utils/arc-path'
 import { resolveDasharray } from '../utils/line'
@@ -33,7 +34,9 @@ export const circle = defineComponent<'circle', typeof T.infer>((attrs) => {
       const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
       container.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`)
       const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
-      path.setAttribute('d', describeArc([attrs.x.value, attrs.y.value], attrs.radius.value, attrs.from.value, attrs.to.value))
+      path.id = 'circle-path'
+      container.id = 'canvas-circle'
+      path.setAttribute('d', describeArc([0, 0], attrs.radius.value, attrs.from.value, attrs.to.value))
       path.setAttribute('stroke', theme.pallete('primary'))
       path.setAttribute('fill', 'none')
       path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value))
@@ -43,3 +46,17 @@ export const circle = defineComponent<'circle', typeof T.infer>((attrs) => {
     space,
   }
 })
+
+export const circleCreation = defineAnimation((node: Node, _, { attrs }: { attrs: ToRefs<typeof T.infer> }) => {
+  const el = node as HTMLElement
+  if (el.id !== 'canvas-circle')
+    return
+  const path = el.querySelector('#circle-path') as SVGPathElement
+  return (progress) => {
+    if (progress > 1) {
+      return true
+    }
+    path.setAttribute('d', describeArc([0, 0], attrs.radius.value, attrs.from.value, attrs.from.value + (attrs.to.value - attrs.from.value) * progress))
+    return false
+  }
+})
diff --git a/packages/math/src/function/index.ts b/packages/math/src/function/index.ts
index 961e161..7894da4 100644
--- a/packages/math/src/function/index.ts
+++ b/packages/math/src/function/index.ts
@@ -43,10 +43,12 @@ export const func = defineComponent<'function', typeof T.infer, {
     },
     provides: {
       expr: attrs.expr,
+      division: context.division ?? attrs.division,
     },
     setup: (children) => {
       const { domain, division, expr } = attrs
       const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      container.id = 'canvas-function'
       const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
       path.setAttribute('stroke', theme.pallete('info'))
       path.setAttribute('fill', 'none')
@@ -62,15 +64,15 @@ export const func = defineComponent<'function', typeof T.infer, {
 })
 
 export const funcCreation = defineAnimation<[], typeof T.infer>((node, _, { attrs }) => {
+  const el = node as HTMLElement
+  if (el.id !== 'canvas-function')
+    return
   const { length } = describeImage(attrs.expr.value as (x: number) => number, attrs.domain.value, 25)
-  return {
-    validator: name => name === 'function',
-    setup(progress) {
-      if (progress >= 1) {
-        return true
-      }
-      ;(<SVGGElement>node).style.strokeDasharray = `${length * progress},${length * (1 - progress)}`
-      return false
-    },
+  return (progress) => {
+    if (progress >= 1) {
+      return true
+    }
+    ; (<SVGGElement>node).style.strokeDasharray = `${length * progress},${length * (1 - progress)}`
+    return false
   }
 })
diff --git a/packages/math/src/function/point-on.ts b/packages/math/src/function/point-on.ts
index c0448d7..85c06bf 100644
--- a/packages/math/src/function/point-on.ts
+++ b/packages/math/src/function/point-on.ts
@@ -8,12 +8,16 @@ const T = type({
 
 export const pointOn = defineComponent<'point-on', typeof T.infer, {
   expr: (x: number) => number
+  division?: number
 }>((attrs, context) => {
       return {
         name: 'point-on',
         attrs: T,
         globals: {
-          [attrs.as.value]: context.expr(attrs.x.value),
+          [attrs.as.value]: [
+            attrs.x.value * (context.division ?? 1),
+            context.expr(attrs.x.value) * (context.division ?? 1),
+          ],
         },
       }
     })
diff --git a/packages/math/src/index.ts b/packages/math/src/index.ts
index f9ae6ec..09621eb 100644
--- a/packages/math/src/index.ts
+++ b/packages/math/src/index.ts
@@ -4,5 +4,9 @@ export * from './circle'
 export * from './figure'
 export * from './function'
 export * from './line'
+export * from './parametric'
 export * from './plane'
 export * from './shared'
+export * as tools from './tools'
+
+export * from './vector'
diff --git a/packages/math/src/line/index.ts b/packages/math/src/line/index.ts
index 2c44fae..5f0fad7 100644
--- a/packages/math/src/line/index.ts
+++ b/packages/math/src/line/index.ts
@@ -1,6 +1,7 @@
+import type { ToRefs } from 'sciux-laplace'
 import { theme } from '@sciux/utils-theme'
 import { type } from 'arktype'
-import { defineComponent } from 'sciux-laplace'
+import { defineAnimation, defineComponent } from 'sciux-laplace'
 import { LineType } from '../shared'
 import { resolveDasharray } from '../utils/line'
 import { generateTexNode } from '../utils/tex'
@@ -30,8 +31,10 @@ export const line = defineComponent<'line', typeof T.infer>((attrs, context) =>
     attrs: T,
     setup(_children) {
       const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      container.id = 'canvas-line'
       const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
       path.setAttribute('d', `M ${attrs.from.value[0]} ${attrs.from.value[1]} L ${attrs.to.value[0]} ${attrs.to.value[1]}`)
+      path.id = 'line-path'
       path.setAttribute('stroke', theme.pallete('primary'))
       path.setAttribute('stroke-dasharray', resolveDasharray(attrs.type.value))
       const texElement = generateTexNode(attrs.value?.value)
@@ -49,4 +52,21 @@ export const line = defineComponent<'line', typeof T.infer>((attrs, context) =>
   }
 })
 
+export const lineCreation = defineAnimation((node: Node, _, { attrs }: { attrs: ToRefs<typeof T.infer> }) => {
+  const el = node as HTMLElement
+  if (el.id !== 'canvas-line')
+    return
+  const line = el.querySelector('#line-path') as SVGPathElement
+  const from = attrs.from.value
+  const to = attrs.to.value
+  return (progress) => {
+    if (!line)
+      return true
+    if (progress > 1)
+      return true
+    line.setAttribute('d', `M ${from[0]} ${from[1]} L ${(from[0] + (to[0] - from[0]) * progress)} ${(from[1] + (to[1] - from[1]) * progress)}`)
+    return false
+  }
+})
+
 export * from './points'
diff --git a/packages/math/src/parametric/index.ts b/packages/math/src/parametric/index.ts
new file mode 100644
index 0000000..7b6692e
--- /dev/null
+++ b/packages/math/src/parametric/index.ts
@@ -0,0 +1,90 @@
+import { theme } from '@sciux/utils-theme'
+import { type } from 'arktype'
+import { defineAnimation, defineComponent } from 'sciux-laplace'
+
+const T = type({
+  domain: type('number[]'),
+  range: type('number[]'),
+  division: type.number,
+  expr: type.unknown,
+})
+
+function describeImage(
+  expr: (t: number) => [number, number],
+  domain: number[],
+  range: number[],
+  division: number,
+): { points: number[][], length: number } {
+  const [tMin, tMax] = domain
+  const step = (tMax - tMin) / division
+
+  const points: number[][] = []
+  let length = 0
+  let lastPoint: number[] | null = null
+
+  for (let i = 0; i <= division; i += 1 / division) {
+    const t = tMin + i * step
+    const [x, y] = expr(t)
+    const scaledPoint = [x * division, y * division]
+
+    if (lastPoint !== null) {
+      const dx = scaledPoint[0] - lastPoint[0]
+      const dy = scaledPoint[1] - lastPoint[1]
+      length += Math.sqrt(dx * dx + dy * dy)
+    }
+
+    points.push(scaledPoint)
+    lastPoint = scaledPoint
+  }
+
+  return {
+    points,
+    length,
+  }
+}
+
+export const parametric = defineComponent<'parametric', typeof T.infer, {
+  division: number
+}>((attrs, context) => {
+  return {
+    name: 'parametric',
+    attrs: T,
+    defaults: {
+      division: 25,
+      domain: [-5, 5],
+      range: [-5, 5],
+    },
+    setup(children) {
+      const { domain, range, expr, division } = attrs
+      const { points } = describeImage(expr.value as (t: number) => [number, number], domain.value, range.value, context.division ?? division.value)
+      const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      container.id = 'canvas-parametric'
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+      path.setAttribute('stroke', theme.pallete('primary'))
+      path.setAttribute('fill', 'none')
+      path.setAttribute('stroke-width', '2')
+      path.id = 'parametric-path'
+      path.setAttribute('d', `M ${points.map(([x, y]) => `${x},${y}`).join(' ')}`)
+      container.append(path, ...children())
+      return container
+    },
+    provides: {
+      expr: attrs.expr,
+      division: context.division ?? attrs.division,
+    },
+  }
+})
+
+export const parametricCreation = defineAnimation<[], typeof T.infer>((node, _, { attrs }) => {
+  const el = node as HTMLElement
+  if (el.id !== 'canvas-parametric')
+    return
+  const { length } = describeImage(attrs.expr.value as (t: number) => [number, number], attrs.domain.value, attrs.range.value, 25)
+  return (progress) => {
+    if (progress >= 1) {
+      return true
+    }
+    ; (<SVGGElement>node).style.strokeDasharray = `${length * progress},${length * (1 - progress)}`
+    return false
+  }
+})
diff --git a/packages/math/src/parametric/point-on.ts b/packages/math/src/parametric/point-on.ts
new file mode 100644
index 0000000..b3c55ca
--- /dev/null
+++ b/packages/math/src/parametric/point-on.ts
@@ -0,0 +1,32 @@
+import { type } from 'arktype'
+import { defineComponent } from 'sciux-laplace'
+import { generateTexNode } from '../utils/tex'
+
+const T = type({
+  x: type.number,
+  y: type.number,
+  as: type.string,
+  asMax: type.string,
+  asMin: type.string,
+  value: type.string,
+})
+
+export const pointOn = defineComponent<'point-on', typeof T.infer, {
+  expr: (t: number) => [number, number]
+}>((attrs, context) => {
+      const positions: [number, number][] = []
+      if (attrs.x && attrs.y) {
+        console.warn('<point-on>: x and y cannot be used together')
+      }
+      return {
+        name: 'point-on',
+        attrs: T,
+        setup() {
+          const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+          container.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`)
+          const texElement = generateTexNode(attrs.value.value)
+          container.append(texElement)
+          return container
+        },
+      }
+    })
diff --git a/packages/math/src/plane/index.ts b/packages/math/src/plane/index.ts
index cfcd258..cb43295 100644
--- a/packages/math/src/plane/index.ts
+++ b/packages/math/src/plane/index.ts
@@ -1,7 +1,9 @@
+import type { ToRefs } from 'sciux-laplace'
 import { theme } from '@sciux/utils-theme'
 import { type } from 'arktype'
-import { defineComponent, ref } from 'sciux-laplace'
+import { defineAnimation, defineComponent, ref } from 'sciux-laplace'
 import { axis } from '../axis'
+import { projection } from './projection'
 
 const T = type({
   x: type.number,
@@ -20,13 +22,16 @@ interface withLabelT {
 }
 
 export const plane = defineComponent<'plane', typeof T.infer>((attrs) => {
+  const space = new Map()
+  space.set('projection', projection)
   return {
+    space,
     name: 'plane',
     provides: {
-      division: attrs.division,
+      division: attrs.division.value,
     },
     defaults: {
-      division: 20,
+      // division: 20,
       xLabel: (count: number) => count.toString(),
       yLabel: (count: number) => count.toString(),
       xDirection: 'right',
@@ -34,6 +39,7 @@ export const plane = defineComponent<'plane', typeof T.infer>((attrs) => {
     },
     setup(children) {
       const root = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      root.id = 'canvas-plane'
       root.setAttribute('transform', `translate(${attrs.x.value}, ${attrs.y.value})`)
       // x-axis
       const xAxis = axis({
@@ -44,7 +50,9 @@ export const plane = defineComponent<'plane', typeof T.infer>((attrs) => {
         label: ref((count: number) => count === 0 ? '' : (attrs.xLabel.value as (count: number) => string)(count)),
         direction: attrs.xDirection,
       }, {})
-      root.append(<Node> xAxis.setup?.(() => []))
+      const xAxisNode = <SVGGElement> xAxis.setup?.(() => [])
+      xAxisNode.id = 'canvas-plane-x-axis'
+      root.append(xAxisNode)
       // y-axis
       const yAxis = axis({
         x: attrs.x,
@@ -67,9 +75,15 @@ export const plane = defineComponent<'plane', typeof T.infer>((attrs) => {
 
       // Grid
       const grid = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      grid.id = 'canvas-plane-grid'
       grid.setAttribute('stroke', theme.pallete('primary'))
       grid.setAttribute('stroke-width', '0.5')
       grid.setAttribute('fill', 'none')
+
+      const xGrid = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      xGrid.id = 'canvas-plane-x-grid'
+      const yGrid = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      yGrid.id = 'canvas-plane-y-grid'
       for (let i = attrs.domain.value[0]; i < attrs.domain.value[1]; i += 1) {
         if (i === attrs.domain.value[0])
           continue
@@ -78,7 +92,7 @@ export const plane = defineComponent<'plane', typeof T.infer>((attrs) => {
         line.setAttribute('y1', (attrs.range.value[0] * attrs.division.value).toString())
         line.setAttribute('x2', (i * attrs.division.value).toString())
         line.setAttribute('y2', (attrs.range.value[1] * attrs.division.value).toString())
-        grid.append(line)
+        xGrid.append(line)
       }
       for (let i = attrs.range.value[0]; i < attrs.range.value[1]; i += 1) {
         if (i === attrs.range.value[0])
@@ -88,15 +102,61 @@ export const plane = defineComponent<'plane', typeof T.infer>((attrs) => {
         line.setAttribute('y1', (i * attrs.division.value).toString())
         line.setAttribute('x2', (attrs.domain.value[1] * attrs.division.value).toString())
         line.setAttribute('y2', (i * attrs.division.value).toString())
-        grid.append(line)
+        yGrid.append(line)
       }
+      grid.append(xGrid, yGrid)
 
       // Root
       root.append(origin, grid)
-      root.append(<Node> yAxis.setup?.(() => []))
+      const yAxisNode = <SVGGElement> yAxis.setup?.(() => [])
+      yAxisNode.id = 'canvas-plane-y-axis'
+      root.append(yAxisNode)
       root.append(...children())
 
       return root
     },
   }
 })
+
+export const planeCreation = defineAnimation((node: Node, _, { attrs, context }: { attrs: ToRefs<typeof T.infer>, context: { division: number } }) => {
+  const el = node as HTMLElement
+  if (el.id !== 'canvas-plane')
+    return
+  const xAxis = el.querySelector('#canvas-plane-x-axis') as SVGGElement
+  const yAxis = el.querySelector('#canvas-plane-y-axis') as SVGGElement
+  const xAxisLine = xAxis.querySelector('#canvas-axis-line') as SVGLineElement
+  const yAxisLine = yAxis.querySelector('#canvas-axis-line') as SVGLineElement
+  const xAxisArrow = xAxis.querySelector('#canvas-axis-arrow') as SVGPolygonElement
+  const yAxisArrow = yAxis.querySelector('#canvas-axis-arrow') as SVGPolygonElement
+  xAxisArrow.setAttribute('fill-opacity', '0')
+  yAxisArrow.setAttribute('fill-opacity', '0')
+  const xAxisTicks = xAxis.querySelector('#canvas-axis-ticks') as SVGGElement
+  const yAxisTicks = yAxis.querySelector('#canvas-axis-ticks') as SVGGElement
+  const xGrid = el.querySelector('#canvas-plane-x-grid') as SVGGElement
+  const yGrid = el.querySelector('#canvas-plane-y-grid') as SVGGElement
+  const xAxisLength = (attrs.domain.value[1] - attrs.domain.value[0]) * (context.division ?? attrs.division.value)
+  const yAxisLength = (attrs.range.value[1] - attrs.range.value[0]) * (context.division ?? attrs.division.value)
+  const axisArrowRound = 2 * (Math.sqrt(5 * 5 + 7 * 7) + Math.sqrt(5 * 5 + 17 * 17))
+
+  return (progress) => {
+    if (progress > 1)
+      return true
+    xAxisLine.setAttribute('stroke-dasharray', `${xAxisLength * progress},${xAxisLength * (1 - progress)}`)
+    yAxisLine.setAttribute('stroke-dasharray', `${yAxisLength * progress},${yAxisLength * (1 - progress)}`)
+    if (progress < 0.5) {
+      xAxisArrow.setAttribute('stroke-dasharray', `${axisArrowRound * progress * 2},${axisArrowRound * (1 - progress * 2)}`)
+      yAxisArrow.setAttribute('stroke-dasharray', `${axisArrowRound * progress * 2},${axisArrowRound * (1 - progress * 2)}`)
+    }
+    else {
+      xAxisArrow.setAttribute('fill-opacity', `${(progress - 0.5) * 2}`)
+      yAxisArrow.setAttribute('fill-opacity', `${(progress - 0.5) * 2}`)
+    }
+    xAxisTicks.setAttribute('stroke-dasharray', `${xAxisLength * progress},${xAxisLength * (1 - progress)}`)
+    yAxisTicks.setAttribute('stroke-dasharray', `${yAxisLength * progress},${yAxisLength * (1 - progress)}`)
+    xGrid.setAttribute('stroke-dasharray', `${xAxisLength * progress},${xAxisLength * (1 - progress)}`)
+    yGrid.setAttribute('stroke-dasharray', `${yAxisLength * progress},${yAxisLength * (1 - progress)}`)
+    return false
+  }
+})
+
+export { projectionCreation } from './projection'
diff --git a/packages/math/src/plane/projection.ts b/packages/math/src/plane/projection.ts
new file mode 100644
index 0000000..df0342f
--- /dev/null
+++ b/packages/math/src/plane/projection.ts
@@ -0,0 +1,78 @@
+import type { ToRefs } from 'sciux-laplace'
+import { theme } from '@sciux/utils-theme'
+import { type } from 'arktype'
+import { defineAnimation, defineComponent } from 'sciux-laplace'
+import { generateTexNode } from '../utils/tex'
+
+const T = type({
+  x: 'number',
+  y: 'number',
+  type: '\'horizontal\' | \'vertical\' | \'both\'',
+  value: 'string',
+})
+
+export const projection = defineComponent<'projection', typeof T.infer, {
+  division: number
+}>((attrs, context) => {
+  return {
+    name: 'projection',
+    attrs: T,
+    defaults: {
+      type: 'both',
+      value: '',
+    },
+    setup() {
+      const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      container.id = 'canvas-plane-projection'
+      container.setAttribute('transform', `translate(${attrs.x.value * context.division}, ${attrs.y.value * context.division})`)
+      if (attrs.type.value === 'horizontal' || attrs.type.value === 'both') {
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+        line.id = 'canvas-plane-projection-horizontal-line'
+        line.setAttribute('x1', '0')
+        line.setAttribute('y1', '0')
+        line.setAttribute('x2', '0')
+        line.setAttribute('y2', (-context.division * attrs.y.value).toString())
+        line.setAttribute('stroke', theme.pallete('info'))
+        line.setAttribute('stroke-dasharray', theme.dasharray('dashed'))
+        container.append(line)
+      }
+      if (attrs.type.value === 'vertical' || attrs.type.value === 'both') {
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+        line.id = 'canvas-plane-projection-vertical-line'
+        line.setAttribute('x1', '0')
+        line.setAttribute('y1', '0')
+        line.setAttribute('x2', (-context.division * attrs.x.value).toString())
+        line.setAttribute('y2', '0')
+        line.setAttribute('stroke', theme.pallete('info'))
+        line.setAttribute('stroke-dasharray', theme.dasharray('dashed'))
+        container.append(line)
+      }
+      const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
+      dot.id = 'canvas-plane-projection-dot'
+      dot.setAttribute('r', '3')
+      dot.setAttribute('fill', theme.pallete('info'))
+      container.append(dot)
+      const texContainer = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      texContainer.style.color = theme.pallete('info')
+      const tex = generateTexNode(attrs.value.value)
+      texContainer.append(tex)
+      container.append(texContainer)
+      return container
+    },
+  }
+})
+
+export const projectionCreation = defineAnimation((node: Node, _, { attrs, context }: { attrs: ToRefs<typeof T.infer>, context: { division: number } }) => {
+  const el = node as HTMLElement
+  if (el.id !== 'canvas-plane-projection')
+    return
+  const horizontalLine = el.querySelector('#canvas-plane-projection-horizontal-line') as SVGLineElement
+  const verticalLine = el.querySelector('#canvas-plane-projection-vertical-line') as SVGLineElement
+  return (progress) => {
+    if (progress > 1)
+      return true
+    horizontalLine.setAttribute('y2', `${-context.division * attrs.y.value * progress}`)
+    verticalLine.setAttribute('x2', `${-context.division * attrs.x.value * progress}`)
+    return false
+  }
+})
diff --git a/packages/math/src/tools.ts b/packages/math/src/tools.ts
new file mode 100644
index 0000000..d395d33
--- /dev/null
+++ b/packages/math/src/tools.ts
@@ -0,0 +1,26 @@
+export type Position = [number, number]
+
+export function middle(from: Position, to: Position): Position {
+  return [
+    from[0] + (to[0] - from[0]) / 2,
+    from[1] + (to[1] - from[1]) / 2,
+  ]
+}
+
+export function normal(from: Position, to1: Position, to2: Position): Position {
+  const v1 = [to1[0] - from[0], to1[1] - from[1]]
+  const v2 = [to2[0] - from[0], to2[1] - from[1]]
+  const cross = v1[0] * v2[1] - v1[1] * v2[0]
+  return [
+    v2[1] * cross,
+    -v1[0] * cross,
+  ]
+}
+
+export function parallel(from: Position, to1: Position, to2: Position): Position {
+  const v = [to1[0] - to2[0], to1[1] - to2[1]]
+  return [
+    from[0] + v[0],
+    from[1] + v[1],
+  ]
+}
diff --git a/packages/math/src/vector/index.ts b/packages/math/src/vector/index.ts
new file mode 100644
index 0000000..5b2bd57
--- /dev/null
+++ b/packages/math/src/vector/index.ts
@@ -0,0 +1,68 @@
+import type { ToRefs } from 'sciux-laplace'
+import { theme } from '@sciux/utils-theme'
+import { type } from 'arktype'
+import { defineAnimation, defineComponent } from 'sciux-laplace'
+
+const T = type({
+  from: 'number[]',
+  to: 'number[]',
+})
+
+export const vector = defineComponent<'vector', typeof T.infer, {
+  division: number
+}>((attrs, context) => {
+  return {
+    name: 'vector',
+    attrs: T,
+    setup() {
+      const division = context.division ?? 1
+      const container = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      container.id = 'canvas-vector'
+      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+      line.id = 'canvas-vector-line'
+      line.setAttribute('x1', (attrs.from.value[0] * division).toString())
+      line.setAttribute('y1', (attrs.from.value[1] * division).toString())
+      line.setAttribute('x2', (attrs.to.value[0] * division).toString())
+      line.setAttribute('y2', (attrs.to.value[1] * division).toString())
+      line.setAttribute('stroke', theme.pallete('primary'))
+      line.setAttribute('stroke-dasharray', theme.dasharray('dashed'))
+      container.append(line)
+
+      const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'polygon')
+      arrow.id = 'canvas-vector-arrow'
+      arrow.setAttribute('points', '-7,5 10,0 -7,-5 0,0')
+      arrow.setAttribute('fill', theme.pallete('primary'))
+      arrow.setAttribute('stroke', theme.pallete('primary'))
+      arrow.setAttribute('transform', `translate(${attrs.to.value[0] * division - Math.cos(Math.atan2(attrs.to.value[1] - attrs.from.value[1], attrs.to.value[0] - attrs.from.value[0])) * 10}, ${attrs.to.value[1] * division - Math.sin(Math.atan2(attrs.to.value[1] - attrs.from.value[1], attrs.to.value[0] - attrs.from.value[0])) * 10})
+        rotate(${Math.atan2(attrs.to.value[1] - attrs.from.value[1], attrs.to.value[0] - attrs.from.value[0]) * 180 / Math.PI})`)
+      container.append(arrow)
+
+      return container
+    },
+  }
+})
+
+export const vectorCreation = defineAnimation((node: Node, _, { attrs, context }: { attrs: ToRefs<typeof T.infer>, context: { division: number } }) => {
+  const el = node as HTMLElement
+  if (el.id !== 'canvas-vector')
+    return
+  const line = el.querySelector('#canvas-vector-line') as SVGLineElement
+  const arrow = el.querySelector('#canvas-vector-arrow') as SVGPolygonElement
+  arrow.setAttribute('fill-opacity', '0')
+  const arrowRound = 2 * (Math.sqrt(5 * 5 + 7 * 7) + Math.sqrt(5 * 5 + 17 * 17))
+  return (progress) => {
+    if (progress > 1)
+      return true
+    line.setAttribute('x2', (attrs.to.value[0] * context.division * progress).toString())
+    line.setAttribute('y2', (attrs.to.value[1] * context.division * progress).toString())
+    arrow.setAttribute('transform', `translate(${attrs.to.value[0] * context.division * progress - Math.cos(Math.atan2(attrs.to.value[1] - attrs.from.value[1], attrs.to.value[0] - attrs.from.value[0])) * 10}, ${attrs.to.value[1] * context.division * progress - Math.sin(Math.atan2(attrs.to.value[1] - attrs.from.value[1], attrs.to.value[0] - attrs.from.value[0])) * 10})
+      rotate(${Math.atan2(attrs.to.value[1] - attrs.from.value[1], attrs.to.value[0] - attrs.from.value[0]) * 180 / Math.PI})`)
+    if (progress < 0.5) {
+      arrow.setAttribute('stroke-dasharray', `${arrowRound * (progress * 2)},${arrowRound * (1 - progress * 2)}`)
+    }
+    else {
+      arrow.setAttribute('fill-opacity', `${(progress - 0.5) * 2}`)
+    }
+    return false
+  }
+})
diff --git a/packages/sciux/src/index.ts b/packages/sciux/src/index.ts
index 12dfad7..0371b75 100644
--- a/packages/sciux/src/index.ts
+++ b/packages/sciux/src/index.ts
@@ -1,16 +1,19 @@
+import type { Context } from 'sciux-laplace'
 import type { RegisterContext } from './types'
 import { theme } from '@sciux/utils-theme'
-import { animations, flows, root, textModes } from 'sciux-laplace'
+import { addActiveContext, animations, flows, reactive, root, textModes } from 'sciux-laplace'
 import layout from './layout'
 import math from './math'
 import model from './model'
 import widget from './widget'
 
+const context: Context = reactive({})
 const defaultContext: RegisterContext = {
   root,
   flows,
   animations,
   textModes,
+  context,
 }
 const registers = [widget, model, layout, math]
 animations.set('creation', [])
@@ -19,6 +22,7 @@ export default function (context: RegisterContext = defaultContext): void {
   for (const register of registers) {
     register(context)
   }
+  addActiveContext(context.context)
 }
 
 export function applyTheme(selector: string): void {
diff --git a/packages/sciux/src/math.ts b/packages/sciux/src/math.ts
index 8366ced..97929f5 100644
--- a/packages/sciux/src/math.ts
+++ b/packages/sciux/src/math.ts
@@ -1,20 +1,22 @@
 import type { Animation, Component } from 'sciux-laplace'
 import type { RegisterContext } from './types'
-import { angle, axis, circle, figure, func, funcCreation, line, plane } from '@sciux/math'
+import { angle, angleArcCreation, angleCreation, axis, axisCreation, circle, circleCreation, figure, func, funcCreation, line, lineCreation, parametric, parametricCreation, plane, planeCreation, projectionCreation, tools, vector, vectorCreation } from '@sciux/math'
 import { withSpace } from 'sciux-laplace'
 import { canvasSpace } from './widget'
 
-export default function ({ animations }: RegisterContext): void {
+export default function ({ animations, context }: RegisterContext): void {
   canvasSpace.set('angle', angle)
   canvasSpace.set('line', line)
   canvasSpace.set('figure', figure)
   canvasSpace.set('circle', circle)
   canvasSpace.set('function', func)
+  canvasSpace.set('vector', vector)
   canvasSpace.set('axis', axis)
   canvasSpace.set('plane', withSpace(plane as Component<'plane', any, any>, canvasSpace))
-
+  canvasSpace.set('parametric', parametric)
   const creation = <Animation<[], any, any>[]> animations.get('creation')
-  creation.push(funcCreation)
+  creation.push(angleCreation, angleArcCreation, circleCreation, lineCreation, funcCreation, parametricCreation, axisCreation, planeCreation, projectionCreation, vectorCreation)
+  Object.assign(context, tools)
 }
 
 export * from '@sciux/math'
diff --git a/packages/sciux/src/types.ts b/packages/sciux/src/types.ts
index 4ec4b80..c88e981 100644
--- a/packages/sciux/src/types.ts
+++ b/packages/sciux/src/types.ts
@@ -1,4 +1,4 @@
-import type { animations, ComponentSpace, flows, textModes } from 'sciux-laplace'
+import type { animations, ComponentSpace, Context, flows, textModes } from 'sciux-laplace'
 
 export type Flows = typeof flows
 export type Animations = typeof animations
@@ -8,4 +8,5 @@ export interface RegisterContext {
   flows: Flows
   animations: Animations
   textModes: TextModes
+  context: Context
 }
diff --git a/packages/sciux/src/widget.ts b/packages/sciux/src/widget.ts
index ee36f20..f81aebc 100644
--- a/packages/sciux/src/widget.ts
+++ b/packages/sciux/src/widget.ts
@@ -1,9 +1,10 @@
 import type { ComponentSpace } from 'sciux-laplace'
 import type { RegisterContext } from './types'
-import { canvas, code, link, table, tex } from '@sciux/widget'
-import { TextMode, withSpace } from 'sciux-laplace'
+import { canvas, code, link, mermaid, table, tex } from '@sciux/widget'
+import { root, TextMode, withSpace } from 'sciux-laplace'
 
 export const canvasSpace: ComponentSpace = new Map()
+canvasSpace.set('let', root.get('let')!)
 
 export default function ({ root, textModes }: RegisterContext): void {
   root.set('table', table)
@@ -11,6 +12,7 @@ export default function ({ root, textModes }: RegisterContext): void {
   root.set('link', link)
   root.set('code', code)
   root.set('tex', tex)
+  root.set('mermaid', mermaid)
   textModes.set('code', TextMode.RCDATA)
   textModes.set('tex', TextMode.RCDATA)
 }
diff --git a/packages/theme-default/styles/vars.css b/packages/theme-default/styles/vars.css
index 0aef616..b93bfd2 100644
--- a/packages/theme-default/styles/vars.css
+++ b/packages/theme-default/styles/vars.css
@@ -29,6 +29,9 @@
 /* Size Table */
 :root {
   --sci-size-primary: 16px;
+  --sci-size-6xs: 6px;
+  --sci-size-5xs: 8px;
+  --sci-size-4xs: 10px;
   --sci-size-3xs: 12px;
   --sci-size-2xs: 14px;
   --sci-size-xs: 16px;
diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts
index 7911984..2392748 100644
--- a/packages/widget/src/index.ts
+++ b/packages/widget/src/index.ts
@@ -1,5 +1,6 @@
 export { default as canvas } from './canvas'
 export { default as code } from './code'
 export { default as link } from './link'
+export { default as mermaid } from './mermaid'
 export { default as table } from './table'
 export { default as tex } from './tex'
diff --git a/packages/widget/src/mermaid.ts b/packages/widget/src/mermaid.ts
new file mode 100644
index 0000000..c989615
--- /dev/null
+++ b/packages/widget/src/mermaid.ts
@@ -0,0 +1,36 @@
+import { type } from 'arktype'
+import mermaid from 'mermaid'
+import { defineComponent } from 'sciux-laplace'
+
+const T = type({
+  theme: '\'default\' | \'base\' | \'dark\' | \'forest\' | \'neutral\' | \'null\'',
+})
+
+export default defineComponent<'mermaid', typeof T.infer>((attrs) => {
+  return {
+    name: 'mermaid',
+    attrs: T,
+    defaults: {
+      theme: 'dark',
+    },
+    setup(children) {
+      const kids = children()
+      const content = kids[0].textContent ?? ''
+
+      const container = document.createElement('div')
+      const id = `mermaid-svg-${Math.random().toString(36).slice(2)}`
+
+      mermaid.initialize({
+        theme: attrs.theme.value,
+      })
+
+      mermaid.render(id, content).then((result) => {
+        container.innerHTML = result.svg
+      }).catch((e) => {
+        container.innerHTML = `<pre style='color:red'>Mermaid render failed\n${e}</pre>`
+      })
+
+      return container
+    },
+  }
+})
diff --git a/packages/widget/src/tex.ts b/packages/widget/src/tex.ts
index 93afdd4..fa231da 100644
--- a/packages/widget/src/tex.ts
+++ b/packages/widget/src/tex.ts
@@ -26,7 +26,8 @@ export default defineComponent<'tex', typeof T.infer, {
         container.setAttribute('width', '100%')
         container.setAttribute('height', '100%')
         const subContainer = document.createElement('div')
-        subContainer.style.color = theme.pallete('note')
+        subContainer.style.color = theme.pallete('primary')
+        subContainer.style.fontSize = theme.size('5xs')
         subContainer.innerHTML = html
         container.append(subContainer)
       }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2b73ca4..2c8df32 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,8 +49,8 @@ catalogs:
       specifier: ^10.4.0
       version: 10.4.0
     sciux-laplace:
-      specifier: v0.0.1-beta.11
-      version: 0.0.1-beta.11
+      specifier: v0.0.1-beta.12
+      version: 0.0.1-beta.12
     simple-git-hooks:
       specifier: ^2.11.1
       version: 2.11.1
@@ -91,6 +91,10 @@ catalogs:
 importers:
 
   .:
+    dependencies:
+      mermaid:
+        specifier: ^11.8.0
+        version: 11.8.0
     devDependencies:
       '@antfu/eslint-config':
         specifier: 'catalog:'
@@ -190,7 +194,7 @@ importers:
         version: 2.1.20
       sciux-laplace:
         specifier: 'catalog:'
-        version: 0.0.1-beta.11
+        version: 0.0.1-beta.12
 
   packages/math:
     dependencies:
@@ -208,7 +212,7 @@ importers:
         version: 2.1.20
       sciux-laplace:
         specifier: 'catalog:'
-        version: 0.0.1-beta.11
+        version: 0.0.1-beta.12
 
   packages/model:
     dependencies:
@@ -220,7 +224,7 @@ importers:
         version: 2.1.20
       sciux-laplace:
         specifier: 'catalog:'
-        version: 0.0.1-beta.11
+        version: 0.0.1-beta.12
 
   packages/sciux:
     dependencies:
@@ -241,7 +245,7 @@ importers:
         version: link:../widget
       sciux-laplace:
         specifier: 'catalog:'
-        version: 0.0.1-beta.11
+        version: 0.0.1-beta.12
 
   packages/theme-default:
     dependencies:
@@ -259,7 +263,7 @@ importers:
         version: 0.16.22
       sciux-laplace:
         specifier: 'catalog:'
-        version: 0.0.1-beta.11
+        version: 0.0.1-beta.12
       shiki:
         specifier: ^3.4.2
         version: 3.4.2
@@ -274,7 +278,7 @@ importers:
         version: 2.1.20
       sciux-laplace:
         specifier: 'catalog:'
-        version: 0.0.1-beta.11
+        version: 0.0.1-beta.12
 
   packages/widget:
     dependencies:
@@ -295,7 +299,7 @@ importers:
         version: 0.16.22
       sciux-laplace:
         specifier: 'catalog:'
-        version: 0.0.1-beta.11
+        version: 0.0.1-beta.12
       shiki:
         specifier: ^3.4.2
         version: 3.4.2
@@ -322,7 +326,7 @@ importers:
         version: link:../packages/sciux
       sciux-laplace:
         specifier: 'catalog:'
-        version: 0.0.1-beta.11
+        version: 0.0.1-beta.12
     devDependencies:
       typescript:
         specifier: ~5.8.3
@@ -541,6 +545,24 @@ packages:
     resolution: {integrity: sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==}
     engines: {node: '>=6.9.0'}
 
+  '@braintree/sanitize-url@7.1.1':
+    resolution: {integrity: sha512-i1L7noDNxtFyL5DmZafWy1wRVhGehQmzZaz1HiN5e7iylJMSZR7ekOV7NsIqa5qBldlLrsKv4HbgFUVlQrz8Mw==}
+
+  '@chevrotain/cst-dts-gen@11.0.3':
+    resolution: {integrity: sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==}
+
+  '@chevrotain/gast@11.0.3':
+    resolution: {integrity: sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==}
+
+  '@chevrotain/regexp-to-ast@11.0.3':
+    resolution: {integrity: sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==}
+
+  '@chevrotain/types@11.0.3':
+    resolution: {integrity: sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==}
+
+  '@chevrotain/utils@11.0.3':
+    resolution: {integrity: sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==}
+
   '@clack/core@0.4.2':
     resolution: {integrity: sha512-NYQfcEy8MWIxrT5Fj8nIVchfRFA26yYKJcvBS7WlUIlw2OmQOY9DhGGXMovyI5J5PpxrCPGkgUi207EBrjpBvg==}
 
@@ -1157,6 +1179,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@mermaid-js/parser@0.6.0':
+    resolution: {integrity: sha512-7DNESgpyZ5WG1SIkrYafVBhWmImtmQuoxOO1lawI3gQYWxBX3v1FW3IyuuRfKJAO06XrZR71W0Kif5VEGGd4VA==}
+
   '@napi-rs/wasm-runtime@0.2.10':
     resolution: {integrity: sha512-bCsCyeZEwVErsGmyPNSzwfwFn4OdxBj0mmv6hOFucB/k81Ojdu68RbZdxYsRQUPc9l6SU5F/cG+bXgWs3oUgsQ==}
 
@@ -1424,12 +1449,108 @@ packages:
   '@tybys/wasm-util@0.9.0':
     resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
 
+  '@types/d3-array@3.2.1':
+    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
+
+  '@types/d3-axis@3.0.6':
+    resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==}
+
+  '@types/d3-brush@3.0.6':
+    resolution: {integrity: sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==}
+
+  '@types/d3-chord@3.0.6':
+    resolution: {integrity: sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-contour@3.0.6':
+    resolution: {integrity: sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==}
+
+  '@types/d3-delaunay@6.0.4':
+    resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==}
+
+  '@types/d3-dispatch@3.0.6':
+    resolution: {integrity: sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==}
+
+  '@types/d3-drag@3.0.7':
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
+
+  '@types/d3-dsv@3.0.7':
+    resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-fetch@3.0.7':
+    resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==}
+
+  '@types/d3-force@3.0.10':
+    resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==}
+
+  '@types/d3-format@3.0.4':
+    resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==}
+
+  '@types/d3-geo@3.1.0':
+    resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==}
+
+  '@types/d3-hierarchy@3.1.7':
+    resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-polygon@3.0.2':
+    resolution: {integrity: sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==}
+
+  '@types/d3-quadtree@3.0.6':
+    resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==}
+
+  '@types/d3-random@3.0.3':
+    resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==}
+
+  '@types/d3-scale-chromatic@3.1.0':
+    resolution: {integrity: sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-selection@3.0.11':
+    resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
+
+  '@types/d3-shape@3.1.7':
+    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
+
+  '@types/d3-time-format@4.0.3':
+    resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/d3-transition@3.0.9':
+    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
+
+  '@types/d3-zoom@3.0.8':
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
+
+  '@types/d3@7.4.3':
+    resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==}
+
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
   '@types/estree@1.0.7':
     resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
 
+  '@types/geojson@7946.0.16':
+    resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
+
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
@@ -1460,6 +1581,9 @@ packages:
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/unist@2.0.11':
     resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
 
@@ -2032,6 +2156,14 @@ packages:
     resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
     engines: {node: '>= 16'}
 
+  chevrotain-allstar@0.3.1:
+    resolution: {integrity: sha512-b7g+y9A0v4mxCW1qUhf3BSVPg+/NvGErk/dOkrDaHA0nQIQGAtrOjlX//9OQtRlSCy+x9rfB5N8yC71lH1nvMw==}
+    peerDependencies:
+      chevrotain: ^11.0.0
+
+  chevrotain@11.0.3:
+    resolution: {integrity: sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==}
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -2133,6 +2265,12 @@ packages:
   core-js-compat@3.42.0:
     resolution: {integrity: sha512-bQasjMfyDGyaeWKBIu33lHh9qlSR0MFE/Nmc6nMjf/iU9b3rSMdAYz1Baxrv4lPdGUsTqZudHA4jIGSJy0SWZQ==}
 
+  cose-base@1.0.3:
+    resolution: {integrity: sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==}
+
+  cose-base@2.2.0:
+    resolution: {integrity: sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -2192,6 +2330,165 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  cytoscape-cose-bilkent@4.1.0:
+    resolution: {integrity: sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==}
+    peerDependencies:
+      cytoscape: ^3.2.0
+
+  cytoscape-fcose@2.2.0:
+    resolution: {integrity: sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==}
+    peerDependencies:
+      cytoscape: ^3.2.0
+
+  cytoscape@3.32.0:
+    resolution: {integrity: sha512-5JHBC9n75kz5851jeklCPmZWcg3hUe6sjqJvyk3+hVqFaKcHwHgxsjeN1yLmggoUc6STbtm9/NQyabQehfjvWQ==}
+    engines: {node: '>=0.10'}
+
+  d3-array@2.12.1:
+    resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==}
+
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-axis@3.0.0:
+    resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==}
+    engines: {node: '>=12'}
+
+  d3-brush@3.0.0:
+    resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==}
+    engines: {node: '>=12'}
+
+  d3-chord@3.0.1:
+    resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-contour@4.0.2:
+    resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==}
+    engines: {node: '>=12'}
+
+  d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
+    engines: {node: '>=12'}
+
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  d3-dsv@3.0.1:
+    resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-fetch@3.0.1:
+    resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==}
+    engines: {node: '>=12'}
+
+  d3-force@3.0.0:
+    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+
+  d3-geo@3.1.1:
+    resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==}
+    engines: {node: '>=12'}
+
+  d3-hierarchy@3.1.2:
+    resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-path@1.0.9:
+    resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-polygon@3.0.1:
+    resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==}
+    engines: {node: '>=12'}
+
+  d3-quadtree@3.0.1:
+    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
+    engines: {node: '>=12'}
+
+  d3-random@3.0.1:
+    resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==}
+    engines: {node: '>=12'}
+
+  d3-sankey@0.12.3:
+    resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==}
+
+  d3-scale-chromatic@3.1.0:
+    resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@1.3.7:
+    resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
+  d3@7.9.0:
+    resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==}
+    engines: {node: '>=12'}
+
+  dagre-d3-es@7.0.11:
+    resolution: {integrity: sha512-tvlJLyQf834SylNKax8Wkzco/1ias1OPw8DcUMDE7oUIoSEW25riQVuiu/0OWEFqT0cxHT3Pa9/D82Jr47IONw==}
+
+  dayjs@1.11.13:
+    resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
+
   de-indent@1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
 
@@ -2229,6 +2526,9 @@ packages:
   defu@6.1.4:
     resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
 
+  delaunator@5.0.1:
+    resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
+
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -2249,6 +2549,9 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
+  dompurify@3.2.6:
+    resolution: {integrity: sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==}
+
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
@@ -2691,6 +2994,9 @@ packages:
     resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
     engines: {node: '>=10'}
 
+  hachure-fill@0.5.2:
+    resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==}
+
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -2722,6 +3028,10 @@ packages:
     resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
     engines: {node: '>=16.17.0'}
 
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -2742,6 +3052,13 @@ packages:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
 
+  internmap@1.0.1:
+    resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
+
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
   is-alphabetical@2.0.1:
     resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
 
@@ -2876,6 +3193,9 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
+  khroma@2.1.0:
+    resolution: {integrity: sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==}
+
   kleur@3.0.3:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
@@ -2886,6 +3206,16 @@ packages:
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
+  langium@3.3.1:
+    resolution: {integrity: sha512-QJv/h939gDpvT+9SiLVlY7tZC3xB2qK57v0J04Sh9wpMb6MP1q8gB21L3WIo8T5P1MSMg3Ep14L7KkDCFG3y4w==}
+    engines: {node: '>=16.0.0'}
+
+  layout-base@1.0.2:
+    resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==}
+
+  layout-base@2.0.1:
+    resolution: {integrity: sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==}
+
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -2922,6 +3252,9 @@ packages:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
 
+  lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+
   lodash.memoize@4.1.2:
     resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
 
@@ -2962,6 +3295,11 @@ packages:
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
+  marked@15.0.12:
+    resolution: {integrity: sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   mdast-util-find-and-replace@3.0.2:
     resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
 
@@ -3017,6 +3355,9 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  mermaid@11.8.0:
+    resolution: {integrity: sha512-uAZUwnBiqREZcUrFw3G5iQ5Pj3hTYUP95EZc3ec/nGBzHddJZydzYGE09tGZDBS1VoSoDn0symZ85FmypSTo5g==}
+
   micromark-core-commonmark@2.0.3:
     resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
 
@@ -3328,6 +3669,9 @@ packages:
   path-browserify@1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
 
+  path-data-parser@0.1.0:
+    resolution: {integrity: sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -3401,6 +3745,12 @@ packages:
     engines: {node: '>=18.12'}
     hasBin: true
 
+  points-on-curve@0.2.0:
+    resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==}
+
+  points-on-path@0.2.1:
+    resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==}
+
   postcss-calc@10.1.1:
     resolution: {integrity: sha512-NYEsLHh8DgG/PRH2+G9BTuUdtf9ViS+vdoQ0YA5OQdGsfN4ztiwtDWNtBl9EKeqNMFnIu8IKZ0cLxEQ5r5KVMw==}
     engines: {node: ^18.12 || ^20.9 || >=22.0}
@@ -3705,6 +4055,9 @@ packages:
   rfdc@1.4.1:
     resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
+  robust-predicates@3.0.2:
+    resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
+
   rollup-plugin-dts@6.2.1:
     resolution: {integrity: sha512-sR3CxYUl7i2CHa0O7bA45mCrgADyAQ0tVtGSqi3yvH28M+eg1+g5d7kQ9hLvEz5dorK3XVsH5L2jwHLQf72DzA==}
     engines: {node: '>=16'}
@@ -3717,11 +4070,20 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  roughjs@4.6.6:
+    resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==}
+
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
-  sciux-laplace@0.0.1-beta.11:
-    resolution: {integrity: sha512-fuMtWj/V2HxC2aC0ehVlE9h821JNJmby/yqiHTHrPwFBfQij37rUI1yiFvsnA6phiQASZopQHBIFoh+JoB/LQw==}
+  rw@1.3.3:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  sciux-laplace@0.0.1-beta.12:
+    resolution: {integrity: sha512-mMj6cINCotgTS/IPwitfh6RRA3fujk+n0rDRIpag4FAGcYel8eFNhIYuCGn6QfBtQgVtmpCcXS+d7ec23rnvog==}
 
   scslre@0.3.0:
     resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
@@ -3873,6 +4235,9 @@ packages:
     peerDependencies:
       postcss: ^8.4.32
 
+  stylis@4.3.6:
+    resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
+
   sucrase@3.35.0:
     resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -3970,6 +4335,10 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
+  ts-dedent@2.2.0:
+    resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
+    engines: {node: '>=6.10'}
+
   ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
@@ -4137,6 +4506,10 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  uuid@11.1.0:
+    resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
+    hasBin: true
+
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
@@ -4242,6 +4615,26 @@ packages:
       jsdom:
         optional: true
 
+  vscode-jsonrpc@8.2.0:
+    resolution: {integrity: sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==}
+    engines: {node: '>=14.0.0'}
+
+  vscode-languageserver-protocol@3.17.5:
+    resolution: {integrity: sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==}
+
+  vscode-languageserver-textdocument@1.0.12:
+    resolution: {integrity: sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==}
+
+  vscode-languageserver-types@3.17.5:
+    resolution: {integrity: sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==}
+
+  vscode-languageserver@9.0.1:
+    resolution: {integrity: sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==}
+    hasBin: true
+
+  vscode-uri@3.0.8:
+    resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
+
   vue-eslint-parser@9.4.3:
     resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -4617,6 +5010,25 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.27.1
 
+  '@braintree/sanitize-url@7.1.1': {}
+
+  '@chevrotain/cst-dts-gen@11.0.3':
+    dependencies:
+      '@chevrotain/gast': 11.0.3
+      '@chevrotain/types': 11.0.3
+      lodash-es: 4.17.21
+
+  '@chevrotain/gast@11.0.3':
+    dependencies:
+      '@chevrotain/types': 11.0.3
+      lodash-es: 4.17.21
+
+  '@chevrotain/regexp-to-ast@11.0.3': {}
+
+  '@chevrotain/types@11.0.3': {}
+
+  '@chevrotain/utils@11.0.3': {}
+
   '@clack/core@0.4.2':
     dependencies:
       picocolors: 1.1.1
@@ -5050,6 +5462,10 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@mermaid-js/parser@0.6.0':
+    dependencies:
+      langium: 3.3.1
+
   '@napi-rs/wasm-runtime@0.2.10':
     dependencies:
       '@emnapi/core': 1.4.3
@@ -5343,12 +5759,131 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@types/d3-array@3.2.1': {}
+
+  '@types/d3-axis@3.0.6':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-brush@3.0.6':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-chord@3.0.6': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-contour@3.0.6':
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-delaunay@6.0.4': {}
+
+  '@types/d3-dispatch@3.0.6': {}
+
+  '@types/d3-drag@3.0.7':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-dsv@3.0.7': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-fetch@3.0.7':
+    dependencies:
+      '@types/d3-dsv': 3.0.7
+
+  '@types/d3-force@3.0.10': {}
+
+  '@types/d3-format@3.0.4': {}
+
+  '@types/d3-geo@3.1.0':
+    dependencies:
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-hierarchy@3.1.7': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-polygon@3.0.2': {}
+
+  '@types/d3-quadtree@3.0.6': {}
+
+  '@types/d3-random@3.0.3': {}
+
+  '@types/d3-scale-chromatic@3.1.0': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-selection@3.0.11': {}
+
+  '@types/d3-shape@3.1.7':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time-format@4.0.3': {}
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/d3-transition@3.0.9':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-zoom@3.0.8':
+    dependencies:
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3@7.4.3':
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/d3-axis': 3.0.6
+      '@types/d3-brush': 3.0.6
+      '@types/d3-chord': 3.0.6
+      '@types/d3-color': 3.1.3
+      '@types/d3-contour': 3.0.6
+      '@types/d3-delaunay': 6.0.4
+      '@types/d3-dispatch': 3.0.6
+      '@types/d3-drag': 3.0.7
+      '@types/d3-dsv': 3.0.7
+      '@types/d3-ease': 3.0.2
+      '@types/d3-fetch': 3.0.7
+      '@types/d3-force': 3.0.10
+      '@types/d3-format': 3.0.4
+      '@types/d3-geo': 3.1.0
+      '@types/d3-hierarchy': 3.1.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-path': 3.1.1
+      '@types/d3-polygon': 3.0.2
+      '@types/d3-quadtree': 3.0.6
+      '@types/d3-random': 3.0.3
+      '@types/d3-scale': 4.0.9
+      '@types/d3-scale-chromatic': 3.1.0
+      '@types/d3-selection': 3.0.11
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
+      '@types/d3-time-format': 4.0.3
+      '@types/d3-timer': 3.0.2
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 2.1.0
 
   '@types/estree@1.0.7': {}
 
+  '@types/geojson@7946.0.16': {}
+
   '@types/hast@3.0.4':
     dependencies:
       '@types/unist': 3.0.3
@@ -5378,6 +5913,9 @@ snapshots:
 
   '@types/resolve@1.20.2': {}
 
+  '@types/trusted-types@2.0.7':
+    optional: true
+
   '@types/unist@2.0.11': {}
 
   '@types/unist@3.0.3': {}
@@ -6051,6 +6589,20 @@ snapshots:
 
   check-error@2.1.1: {}
 
+  chevrotain-allstar@0.3.1(chevrotain@11.0.3):
+    dependencies:
+      chevrotain: 11.0.3
+      lodash-es: 4.17.21
+
+  chevrotain@11.0.3:
+    dependencies:
+      '@chevrotain/cst-dts-gen': 11.0.3
+      '@chevrotain/gast': 11.0.3
+      '@chevrotain/regexp-to-ast': 11.0.3
+      '@chevrotain/types': 11.0.3
+      '@chevrotain/utils': 11.0.3
+      lodash-es: 4.17.21
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -6138,6 +6690,14 @@ snapshots:
     dependencies:
       browserslist: 4.24.5
 
+  cose-base@1.0.3:
+    dependencies:
+      layout-base: 1.0.2
+
+  cose-base@2.2.0:
+    dependencies:
+      layout-base: 2.0.1
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -6225,6 +6785,192 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  cytoscape-cose-bilkent@4.1.0(cytoscape@3.32.0):
+    dependencies:
+      cose-base: 1.0.3
+      cytoscape: 3.32.0
+
+  cytoscape-fcose@2.2.0(cytoscape@3.32.0):
+    dependencies:
+      cose-base: 2.2.0
+      cytoscape: 3.32.0
+
+  cytoscape@3.32.0: {}
+
+  d3-array@2.12.1:
+    dependencies:
+      internmap: 1.0.1
+
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-axis@3.0.0: {}
+
+  d3-brush@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d3-chord@3.0.1:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-color@3.1.0: {}
+
+  d3-contour@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-delaunay@6.0.4:
+    dependencies:
+      delaunator: 5.0.1
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-dsv@3.0.1:
+    dependencies:
+      commander: 7.2.0
+      iconv-lite: 0.6.3
+      rw: 1.3.3
+
+  d3-ease@3.0.1: {}
+
+  d3-fetch@3.0.1:
+    dependencies:
+      d3-dsv: 3.0.1
+
+  d3-force@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-timer: 3.0.1
+
+  d3-format@3.1.0: {}
+
+  d3-geo@3.1.1:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-hierarchy@3.1.2: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-path@1.0.9: {}
+
+  d3-path@3.1.0: {}
+
+  d3-polygon@3.0.1: {}
+
+  d3-quadtree@3.0.1: {}
+
+  d3-random@3.0.1: {}
+
+  d3-sankey@0.12.3:
+    dependencies:
+      d3-array: 2.12.1
+      d3-shape: 1.3.7
+
+  d3-scale-chromatic@3.1.0:
+    dependencies:
+      d3-color: 3.1.0
+      d3-interpolate: 3.0.1
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-selection@3.0.0: {}
+
+  d3-shape@1.3.7:
+    dependencies:
+      d3-path: 1.0.9
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d3@7.9.0:
+    dependencies:
+      d3-array: 3.2.4
+      d3-axis: 3.0.0
+      d3-brush: 3.0.0
+      d3-chord: 3.0.1
+      d3-color: 3.1.0
+      d3-contour: 4.0.2
+      d3-delaunay: 6.0.4
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-dsv: 3.0.1
+      d3-ease: 3.0.1
+      d3-fetch: 3.0.1
+      d3-force: 3.0.0
+      d3-format: 3.1.0
+      d3-geo: 3.1.1
+      d3-hierarchy: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-path: 3.1.0
+      d3-polygon: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-random: 3.0.1
+      d3-scale: 4.0.2
+      d3-scale-chromatic: 3.1.0
+      d3-selection: 3.0.0
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+      d3-timer: 3.0.1
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+      d3-zoom: 3.0.0
+
+  dagre-d3-es@7.0.11:
+    dependencies:
+      d3: 7.9.0
+      lodash-es: 4.17.21
+
+  dayjs@1.11.13: {}
+
   de-indent@1.0.2: {}
 
   debug@3.2.7:
@@ -6247,6 +6993,10 @@ snapshots:
 
   defu@6.1.4: {}
 
+  delaunator@5.0.1:
+    dependencies:
+      robust-predicates: 3.0.2
+
   dequal@2.0.3: {}
 
   destr@2.0.5: {}
@@ -6267,6 +7017,10 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
+  dompurify@3.2.6:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   domutils@3.2.2:
     dependencies:
       dom-serializer: 2.0.0
@@ -6851,6 +7605,8 @@ snapshots:
     dependencies:
       duplexer: 0.1.2
 
+  hachure-fill@0.5.2: {}
+
   has-flag@4.0.0: {}
 
   hasown@2.0.2:
@@ -6885,6 +7641,10 @@ snapshots:
 
   human-signals@5.0.0: {}
 
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
   ignore@5.3.2: {}
 
   ignore@7.0.4: {}
@@ -6898,6 +7658,10 @@ snapshots:
 
   indent-string@4.0.0: {}
 
+  internmap@1.0.1: {}
+
+  internmap@2.0.3: {}
+
   is-alphabetical@2.0.1: {}
 
   is-alphanumerical@2.0.1:
@@ -7002,12 +7766,26 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
+  khroma@2.1.0: {}
+
   kleur@3.0.3: {}
 
   knitwork@1.2.0: {}
 
   kolorist@1.8.0: {}
 
+  langium@3.3.1:
+    dependencies:
+      chevrotain: 11.0.3
+      chevrotain-allstar: 0.3.1(chevrotain@11.0.3)
+      vscode-languageserver: 9.0.1
+      vscode-languageserver-textdocument: 1.0.12
+      vscode-uri: 3.0.8
+
+  layout-base@1.0.2: {}
+
+  layout-base@2.0.1: {}
+
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
@@ -7057,6 +7835,8 @@ snapshots:
     dependencies:
       p-locate: 5.0.0
 
+  lodash-es@4.17.21: {}
+
   lodash.memoize@4.1.2: {}
 
   lodash.merge@4.6.2: {}
@@ -7093,6 +7873,8 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
+  marked@15.0.12: {}
+
   mdast-util-find-and-replace@3.0.2:
     dependencies:
       '@types/mdast': 4.0.4
@@ -7228,6 +8010,31 @@ snapshots:
 
   merge2@1.4.1: {}
 
+  mermaid@11.8.0:
+    dependencies:
+      '@braintree/sanitize-url': 7.1.1
+      '@iconify/utils': 2.3.0
+      '@mermaid-js/parser': 0.6.0
+      '@types/d3': 7.4.3
+      cytoscape: 3.32.0
+      cytoscape-cose-bilkent: 4.1.0(cytoscape@3.32.0)
+      cytoscape-fcose: 2.2.0(cytoscape@3.32.0)
+      d3: 7.9.0
+      d3-sankey: 0.12.3
+      dagre-d3-es: 7.0.11
+      dayjs: 1.11.13
+      dompurify: 3.2.6
+      katex: 0.16.22
+      khroma: 2.1.0
+      lodash-es: 4.17.21
+      marked: 15.0.12
+      roughjs: 4.6.6
+      stylis: 4.3.6
+      ts-dedent: 2.2.0
+      uuid: 11.1.0
+    transitivePeerDependencies:
+      - supports-color
+
   micromark-core-commonmark@2.0.3:
     dependencies:
       decode-named-character-reference: 1.1.0
@@ -7646,6 +8453,8 @@ snapshots:
 
   path-browserify@1.0.1: {}
 
+  path-data-parser@0.1.0: {}
+
   path-exists@4.0.0: {}
 
   path-key@3.1.1: {}
@@ -7698,6 +8507,13 @@ snapshots:
 
   pnpm@10.4.0: {}
 
+  points-on-curve@0.2.0: {}
+
+  points-on-path@0.2.1:
+    dependencies:
+      path-data-parser: 0.1.0
+      points-on-curve: 0.2.0
+
   postcss-calc@10.1.1(postcss@8.5.3):
     dependencies:
       postcss: 8.5.3
@@ -7970,6 +8786,8 @@ snapshots:
 
   rfdc@1.4.1: {}
 
+  robust-predicates@3.0.2: {}
+
   rollup-plugin-dts@6.2.1(rollup@4.41.1)(typescript@5.8.3):
     dependencies:
       magic-string: 0.30.17
@@ -8004,11 +8822,22 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.41.1
       fsevents: 2.3.3
 
+  roughjs@4.6.6:
+    dependencies:
+      hachure-fill: 0.5.2
+      path-data-parser: 0.1.0
+      points-on-curve: 0.2.0
+      points-on-path: 0.2.1
+
   run-parallel@1.2.0:
     dependencies:
       queue-microtask: 1.2.3
 
-  sciux-laplace@0.0.1-beta.11:
+  rw@1.3.3: {}
+
+  safer-buffer@2.1.2: {}
+
+  sciux-laplace@0.0.1-beta.12:
     dependencies:
       '@vue/reactivity': 3.5.14
       '@vue/shared': 3.5.14
@@ -8181,6 +9010,8 @@ snapshots:
       postcss: 8.5.3
       postcss-selector-parser: 7.1.0
 
+  stylis@4.3.6: {}
+
   sucrase@3.35.0:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.8
@@ -8275,6 +9106,8 @@ snapshots:
     dependencies:
       typescript: 5.8.3
 
+  ts-dedent@2.2.0: {}
+
   ts-interface-checker@0.1.13: {}
 
   tsconfck@3.1.5(typescript@5.8.3):
@@ -8526,6 +9359,8 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  uuid@11.1.0: {}
+
   validate-npm-package-license@3.0.4:
     dependencies:
       spdx-correct: 3.2.0
@@ -8687,6 +9522,23 @@ snapshots:
       - tsx
       - yaml
 
+  vscode-jsonrpc@8.2.0: {}
+
+  vscode-languageserver-protocol@3.17.5:
+    dependencies:
+      vscode-jsonrpc: 8.2.0
+      vscode-languageserver-types: 3.17.5
+
+  vscode-languageserver-textdocument@1.0.12: {}
+
+  vscode-languageserver-types@3.17.5: {}
+
+  vscode-languageserver@9.0.1:
+    dependencies:
+      vscode-languageserver-protocol: 3.17.5
+
+  vscode-uri@3.0.8: {}
+
   vue-eslint-parser@9.4.3(eslint@9.20.1(jiti@2.4.2)):
     dependencies:
       debug: 4.4.1
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index d02d3de..2a67f94 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -31,4 +31,4 @@ catalog:
   vitepress-plugin-group-icons: ^1.3.5
   vitest: ^3.0.5
   vue: ^3.5.13
-  sciux-laplace: v0.0.1-beta.11
+  sciux-laplace: v0.0.1-beta.12
diff --git a/test/src/examples.ts b/test/src/examples.ts
index f42d076..a5a018f 100644
--- a/test/src/examples.ts
+++ b/test/src/examples.ts
@@ -1,8 +1,13 @@
 import test from './example.sciux?raw'
+import ins01 from './template/instance/ins01.sciux?raw'
+import ins02 from './template/instance/ins02.sciux?raw'
 import angle from './template/math/angle.sciux?raw'
+import axis from './template/math/axis.sciux?raw'
 import circle from './template/math/circle.sciux?raw'
 import figure from './template/math/figure.sciux?raw'
+import parametric from './template/math/parametric.sciux?raw'
 import plane from './template/math/plane.sciux?raw'
+import mermaid from './template/mermaid.sciux?raw'
 import model from './template/model.sciux?raw'
 import widget from './template/widget.sciux?raw'
 
@@ -15,5 +20,12 @@ export default {
     figure,
     circle,
     plane,
+    parametric,
+    axis,
   },
+  'INSTANCE': {
+    ins01,
+    ins02,
+  },
+  mermaid,
 }
diff --git a/test/src/main.ts b/test/src/main.ts
index 3b82230..6181a16 100644
--- a/test/src/main.ts
+++ b/test/src/main.ts
@@ -1,4 +1,4 @@
-import init, { applyTheme, render } from 'sciux'
+import init, { animationManager, applyTheme, render } from 'sciux'
 import examples from './examples'
 import '@sciux/theme-default/styles/main.css'
 
@@ -50,6 +50,7 @@ function createRenderer(source: string) {
     app.innerHTML = ''
     applyTheme('#app')
     render(source, app)
+    animationManager.init()
   }
 }
 
diff --git a/test/src/template/instance/ins01.sciux b/test/src/template/instance/ins01.sciux
new file mode 100644
index 0000000..19216e9
--- /dev/null
+++ b/test/src/template/instance/ins01.sciux
@@ -0,0 +1,55 @@
+<flexbox>
+  <rows>
+    <flexbox>
+      <canvas :width="300" :height="300" :origin="[150, 50]">
+        <let :d="30"/>
+        <angle $="creation,1000,ease-in-cubic" :from="120" :to="150" :start-side="2.3*d" :end-side="4*d" :x="100" :y="0" start-side-value="2.3 \times d" end-side-value="4 \times d">
+          <start-point as="A" value="A"/>
+          <end-point as="B" value="B"/>
+          <origin as="O" value="O"/>
+          <arc $="creation,1000,ease-in-cubic" type="solid" value="30 \degree"/>
+        </angle>
+        <line $="creation,1000,ease-in-cubic" :from="B" :to="A" type="solid" value="C" />
+        <let :P="[O[0], A[1]]" />
+        <circle $="creation,1000,ease-in-cubic" :x="middle(O, B)[0]" :y="middle(O, B)[1]" :radius="2 * d" type="dashed" />
+        <line $="creation,1000,ease-in-cubic" :from="P" :to="O" type="dashed" />
+        <line $="creation,1000,ease-in-cubic" :from="P" :to="A" type="dashed" />
+      </canvas>
+    </flexbox>
+    <columns>
+      <flexbox>1. Find the length of line <tex>AB</tex></flexbox>
+      <columns>
+        <tex>
+          AB = OA^2 + OB^2 - 2 \cdot OA \cdot OB \cdot \cos \angle AOB
+        </tex>
+        <tex>
+          = 2 \cdot d^2 - 2 \cdot d^2 \cdot \cos 30^\circ
+        </tex>
+        <tex>
+          = 2 \cdot d^2 \cdot (1 - \cos 30^\circ)
+        </tex>
+        <tex>
+          = 2 \cdot d^2 \cdot \left(1 - \frac{\sqrt{3}}{2}\right)
+        </tex>
+        <tex>
+          = 2 \cdot d^2 \cdot \left(\frac{2 - \sqrt{3}}{2}\right)
+        </tex>
+        <tex>
+          = 2 \cdot d^2 \cdot \left(\frac{2 - \sqrt{3}}{2}\right)
+        </tex>
+        <tex>
+          = d^2 \cdot (2 - \sqrt{3})
+        </tex>
+        <tex>
+          = 30^2 \cdot (2 - \sqrt{3})
+        </tex>
+        <tex>
+          = 900 \cdot (2 - \sqrt{3})
+        </tex>
+        <tex>
+          = 1800 - 900 \cdot \sqrt{3}
+        </tex>
+      </columns>
+    </columns>
+  </rows>
+</flexbox>
\ No newline at end of file
diff --git a/test/src/template/instance/ins02.sciux b/test/src/template/instance/ins02.sciux
new file mode 100644
index 0000000..7972b37
--- /dev/null
+++ b/test/src/template/instance/ins02.sciux
@@ -0,0 +1,34 @@
+<flexbox>
+  <canvas :width="300" :height="300" :origin="[150, 50]">
+    <let :d="15" />
+    <let :v="0" />
+    <let :O="[2*d, 2*d]" />
+    <let :P="[O[0] + 2*d * Math.cos(v * Math.PI / 180), O[1] + 2*d * Math.sin(v * Math.PI / 180)]" />
+    <let :A="[O[0] - 2*d, O[1]]" />
+    <let :B="[O[0] + 2*d, O[1]]" />
+    <let :angleA="Math.atan2(A[1] - P[1], A[0] - P[0]) * 180 / Math.PI" />
+    <let :angleB="Math.atan2(B[1] - P[1], B[0] - P[0]) * 180 / Math.PI" />
+    <let :sideA="Math.sqrt((A[0] - P[0])**2 + (A[1] - P[1])**2)" />
+    <let :sideB="Math.sqrt((B[0] - P[0])**2 + (B[1] - P[1])**2)" />
+    <let :from="angleA < angleB ? angleA : angleB" />
+    <let :to="angleA < angleB ? angleB : angleA" />
+    <let :startSide="angleA < angleB ? sideA : sideB" />
+    <let :endSide="angleA < angleB ? sideB : sideA" />
+    <line :from="A" :to="B" type="solid" value="O" />
+    <angle
+      :from="from"
+      :to="to"
+      :start-side="startSide"
+      :end-side="endSide"
+      :x="P[0]"
+      :y="P[1]"
+    >
+      <start-point as="A" value="A" />
+      <end-point as="B" value="B" />
+      <origin as="P" value="P" />
+      <arc type="solid" value="90 \degree" />
+    </angle>
+    <line :from="O" :to="P" type="dashed" />
+    <circle $="v(1080),10000" :x="O[0]" :y="O[1]" :radius="2 * d" />
+  </canvas>
+</flexbox>
\ No newline at end of file
diff --git a/test/src/template/math/axis.sciux b/test/src/template/math/axis.sciux
new file mode 100644
index 0000000..fa18e7f
--- /dev/null
+++ b/test/src/template/math/axis.sciux
@@ -0,0 +1,3 @@
+<canvas :width="600" :height="600" :origin="[300, 300]">
+  <axis :x="0" :y="0" :division="25" :range="[-10, 10]" direction="left" $="creation,1000,in-out-cubic" />
+</canvas>
\ No newline at end of file
diff --git a/test/src/template/math/parametric.sciux b/test/src/template/math/parametric.sciux
new file mode 100644
index 0000000..f623dae
--- /dev/null
+++ b/test/src/template/math/parametric.sciux
@@ -0,0 +1,8 @@
+<canvas :width="1000" :height="1000" :origin="[500, 500]">
+  <let :y="3.5" :x="2"  />
+  <plane :range="[-5, 5]" :domain="[-5, 5]" :x="0" :y="0" :division="25" $="parallel(creation,1000,in-out-cubic y(-5),1000,in-out-cubic x(-5),1000,in-out-cubic)">
+    <parametric $="creation,1000,in-out-cubic" :domain="[-10, 10]" :range="[-10, 10]" :expr="(t) => [Math.cos(t) * (Math.exp(Math.cos(t)) - 2 * Math.cos(4 * t) - Math.pow(Math.sin(t / 12), 5)), Math.sin(t) * (Math.exp(Math.cos(t)) - 2 * Math.cos(4 * t) - Math.pow(Math.sin(t / 12), 5))]" />
+    <projection :x="x" :y="y" type="both" :value="`\\left(${x.toFixed(1)}, ${y.toFixed(1)}\\right)`" $="creation,1000,in-out-cubic" />
+    <vector :from="[0, 0]" :to="[x, y]" $="creation,1000,in-out-cubic" />
+  </plane>
+</canvas>
\ No newline at end of file
diff --git a/test/src/template/math/plane.sciux b/test/src/template/math/plane.sciux
index c7f9143..2f9d8c9 100644
--- a/test/src/template/math/plane.sciux
+++ b/test/src/template/math/plane.sciux
@@ -1,5 +1,5 @@
 <canvas :width="600" :height="600" :origin="[300, 300]">
-  <plane :x="0" :y="0" :division="25" :domain="[-10, 10]" :range="[-5, 5]" :x-label="count => count.toString()" :y-label="count => count.toString()">
-    <function :domain="[-10, 10]" :expr="(x) => Math.cos(x)" />
+  <plane :x="0" :y="0" :division="25" :domain="[-10, 10]" :range="[-5, 5]" :x-label="count => count.toString()" :y-label="count => count.toString()" $="creation,500,in-out-cubic">
+    <function $="creation,1000,linear" :domain="[-10, 10]" :expr="(x) => Math.cos(x)" />
   </plane>
 </canvas>
\ No newline at end of file
diff --git a/test/src/template/mermaid.sciux b/test/src/template/mermaid.sciux
new file mode 100644
index 0000000..b7e8ba3
--- /dev/null
+++ b/test/src/template/mermaid.sciux
@@ -0,0 +1,225 @@
+<table align="horizon" columns="3">
+  <flexbox>
+    <mermaid>
+      flowchart TD
+        A[Christmas] --&gt;|Get money| B(Go shopping)
+        B --&gt; C{Let me think}
+        C --&gt;|One| D[Laptop]
+        C --&gt;|Two| E[iPhone]
+        C --&gt;|Three| F[fa:fa-car Car]
+    </mermaid>
+  </flexbox>
+
+  <flexbox>
+    <mermaid>
+      sequenceDiagram
+        Alice-&gt;&gt;+John: Hello John, how are you?
+        Alice-&gt;&gt;+John: John, can you hear me?
+        John--&gt;&gt;-Alice: Hi Alice, I can hear you!
+        John--&gt;&gt;-Alice: I feel great!
+    </mermaid>
+  </flexbox>
+
+  <flexbox>
+    <mermaid>
+      classDiagram
+        Animal &lt;|-- Duck
+        Animal &lt;|-- Fish
+        Animal &lt;|-- Zebra
+        Animal : +int age
+        Animal : +String gender
+        Animal: +isMammal()
+        Animal: +mate()
+        class Duck{
+          +String beakColor
+          +swim()
+          +quack()
+        }
+        class Fish{
+          -int sizeInFeet
+          -canEat()
+        }
+        class Zebra{
+          +bool is_wild
+          +run()
+        }
+    </mermaid>
+  </flexbox>
+
+  <flexbox>
+    <mermaid>
+      stateDiagram-v2
+        [*] --&gt; Still
+        Still --&gt; [*]
+        Still --&gt; Moving
+        Moving --&gt; Still
+        Moving --&gt; Crash
+        Crash --&gt; [*]
+    </mermaid>
+  </flexbox>
+
+  <flexbox>
+    <mermaid>
+      erDiagram
+        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+        CUSTOMER ||--o{ ORDER : places
+        CUSTOMER ||--o{ INVOICE : "liable for"
+        DELIVERY-ADDRESS ||--o{ ORDER : receives
+        INVOICE ||--|{ ORDER : covers
+        ORDER ||--|{ ORDER-ITEM : includes
+        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+        PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+    </mermaid>
+  </flexbox>
+
+  <flexbox>
+    <mermaid>
+      gantt
+        title A Gantt Diagram
+        dateFormat  YYYY-MM-DD
+        section Section
+        A task           :a1, 2014-01-01, 30d
+        Another task     :after a1  , 20d
+        section Another
+        Task in sec      :2014-01-12  , 12d
+        another task      : 24d
+    </mermaid>
+  </flexbox>
+
+  <flexbox>
+    <mermaid>
+      journey
+        title My working day
+        section Go to work
+          Make tea: 5: Me
+          Go upstairs: 3: Me
+          Do work: 1: Me, Cat
+        section Go home
+          Go downstairs: 5: Me
+          Sit down: 3: Me
+    </mermaid>
+  </flexbox>
+
+  <flexbox>
+    <mermaid>
+      gitGraph
+        commit
+        commit
+        branch develop
+        checkout develop
+        commit
+        commit
+        checkout main
+        merge develop
+        commit
+        commit
+    </mermaid>
+  </flexbox>
+
+  <flexbox>
+    <mermaid>
+      pie title Pets adopted by volunteers
+        "Dogs" : 386
+        "Cats" : 85
+        "Rats" : 15
+    </mermaid>
+  </flexbox>
+
+  <flexbox>
+    <mermaid>
+      mindmap
+        root((mindmap))
+          Origins
+            Long history
+            ::icon(fa fa-book)
+            Popularisation
+              British popular psychology author Tony Buzan
+          Research
+            On effectiveness&lt;br/&gt;and features
+            On Automatic creation
+              Uses
+                Creative techniques
+                Strategic planning
+                Argument mapping
+          Tools
+            Pen and paper
+            Mermaid
+    </mermaid>
+  </flexbox>
+
+  <flexbox>
+    <mermaid>
+      quadrantChart
+      title Reach and engagement of campaigns
+      x-axis Low Reach --&gt; High Reach
+      y-axis Low Engagement --&gt; High Engagement
+      quadrant-1 We should expand
+      quadrant-2 Need to promote
+      quadrant-3 Re-evaluate
+      quadrant-4 May be improved
+      Campaign A: [0.3, 0.6]
+      Campaign B: [0.45, 0.23]
+      Campaign C: [0.57, 0.69]
+      Campaign D: [0.78, 0.34]
+      Campaign E: [0.40, 0.34]
+      Campaign F: [0.35, 0.78]
+    </mermaid>
+  </flexbox>
+
+  <flexbox>
+    <mermaid>
+      xychart-beta
+      title "Sales Revenue"
+      x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+      y-axis "Revenue (in $)" 4000 --&gt; 11000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    </mermaid>
+  </flexbox>
+
+  <flexbox>
+    <mermaid>
+      block-beta
+      columns 3
+      doc&gt;"Document"]:3
+      space down1&lt;[" "]&gt;(down) space
+
+      block:e:3
+        l["left"]
+        m("A wide one in the middle")
+        r["right"]
+      end
+      space down2&lt;[" "]&gt;(down) space
+      db[("DB")]:3
+      space:3
+      D space C
+      db --&gt; D
+      C --&gt; db
+      D --&gt; C
+      style m fill:#d6d,stroke:#333,stroke-width:4px
+    </mermaid>
+  </flexbox>
+
+  <flexbox>
+    <mermaid>
+      packet-beta
+        0-15: "Source Port"
+        16-31: "Destination Port"
+        32-63: "Sequence Number"
+        64-95: "Acknowledgment Number"
+        96-99: "Data Offset"
+        100-105: "Reserved"
+        106: "URG"
+        107: "ACK"
+        108: "PSH"
+        109: "RST"
+        110: "SYN"
+        111: "FIN"
+        112-127: "Window"
+        128-143: "Checksum"
+        144-159: "Urgent Pointer"
+        160-191: "(Options and Padding)"
+        192-255: "Data (variable length)"
+    </mermaid>
+  </flexbox>
+</table>
\ No newline at end of file