From 199063bd72ad7d8f5124cd3784fbbc68828f0fca Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Wed, 5 Jul 2023 18:20:31 +0530
Subject: [PATCH 01/48] feat(code-builder): implement `_getBBoxBrick` method
 for the path

---
 .../src/brick/design0/utils/path.ts           | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/utils/path.ts b/modules/code-builder/src/brick/design0/utils/path.ts
index 207e4530..1fada178 100644
--- a/modules/code-builder/src/brick/design0/utils/path.ts
+++ b/modules/code-builder/src/brick/design0/utils/path.ts
@@ -1,6 +1,7 @@
 // == constants ====================================================================================
 
 const cornerRadius = 4;
+const strokeWidth = 0.5;
 
 const notchInsOffsetX = 4;
 const notchInsLengthX = 10;
@@ -334,13 +335,27 @@ function _getBBoxBrick(): {
     extent: { width: number; height: number };
     coords: { x: number; y: number };
 } {
+    const argSectionLengthYMin = cornerRadius * 2 + notchArgLengthY;
+    const argsLength = _argsLengthY
+        .map((sectionLengthY) => Math.max(argSectionLengthYMin, sectionLengthY))
+        .reduce((a, b) => a + b, 0);
+
+    let height =
+        strokeWidth +
+        (argsLength !== 0 ? argsLength : 2 * cornerRadius + notchArgLengthY) +
+        strokeWidth;
+
+    if (_hasNest) {
+        height += _nestLengthY + strokeWidth * 4 + 2 * cornerRadius + notchArgLengthY;
+    }
+
     return {
         extent: {
-            width: _innerLengthX,
-            height: _argsLengthY.reduce((a, b) => a + b, 0),
+            width: strokeWidth + _innerLengthX + strokeWidth,
+            height: height,
         },
         coords: {
-            x: 0,
+            x: _hasNotchArg ? notchArgLengthX : 0,
             y: 0,
         },
     };

From 1c9035f371988bfa06b877e1cd0c807d9f1a45f1 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Wed, 12 Jul 2023 12:36:57 +0530
Subject: [PATCH 02/48] feat(code-builder): implement `_getBBoxNotchArg` method
 for the path

---
 modules/code-builder/src/brick/design0/utils/path.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/utils/path.ts b/modules/code-builder/src/brick/design0/utils/path.ts
index 1fada178..bfaec062 100644
--- a/modules/code-builder/src/brick/design0/utils/path.ts
+++ b/modules/code-builder/src/brick/design0/utils/path.ts
@@ -372,12 +372,12 @@ function _getBBoxNotchArg(): {
 } {
     return {
         extent: {
-            width: notchArgLengthX,
-            height: notchArgLengthY - 2,
+            width: _hasNotchArg ? notchArgLengthX : 0,
+            height: _hasNotchArg ? strokeWidth + 8 + strokeWidth : 0,
         },
         coords: {
             x: 0,
-            y: 0,
+            y: _hasNotchArg ? 6 : 0,
         },
     };
 }
@@ -560,6 +560,7 @@ export function generatePath(
     };
 
     if (print) console.log(results);
+    console.log(results.path);
 
     return results;
 }

From c91c546fe5b47be1b963d3b1c0984e7dc6a426f9 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Wed, 12 Jul 2023 12:47:29 +0530
Subject: [PATCH 03/48] fix(code-builder): calculation for
 `_getBBoxNotchInsTop` method for the path

---
 modules/code-builder/src/brick/design0/utils/path.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/utils/path.ts b/modules/code-builder/src/brick/design0/utils/path.ts
index bfaec062..eaccee65 100644
--- a/modules/code-builder/src/brick/design0/utils/path.ts
+++ b/modules/code-builder/src/brick/design0/utils/path.ts
@@ -393,12 +393,17 @@ function _getBBoxNotchInsTop(): {
 } {
     return {
         extent: {
-            width: notchInsLengthX,
+            width: notchInsLengthX - 2 * strokeWidth,
             height: notchInsLengthY,
         },
         coords: {
-            x: 0,
-            y: 0,
+            x:
+                strokeWidth +
+                (_hasNotchArg ? notchArgLengthX : 0) +
+                cornerRadius +
+                notchInsOffsetX +
+                strokeWidth,
+            y: strokeWidth + notchInsLengthY - strokeWidth,
         },
     };
 }

From 96260243a6dd424f4199ff8c3869477932110bdf Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Wed, 12 Jul 2023 13:10:21 +0530
Subject: [PATCH 04/48] fix(code-builder): calculation for
 `_getBBoxNotchInsBot` method for the path

---
 .../code-builder/src/brick/design0/utils/path.ts    | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/utils/path.ts b/modules/code-builder/src/brick/design0/utils/path.ts
index eaccee65..256e9ab3 100644
--- a/modules/code-builder/src/brick/design0/utils/path.ts
+++ b/modules/code-builder/src/brick/design0/utils/path.ts
@@ -419,12 +419,17 @@ function _getBBoxNotchInsBot(): {
 } {
     return {
         extent: {
-            width: notchInsLengthX,
-            height: notchInsLengthY,
+            width: notchInsLengthX - 4 * strokeWidth,
+            height: strokeWidth + notchInsLengthY - strokeWidth,
         },
         coords: {
-            x: 0,
-            y: 0,
+            x:
+                strokeWidth +
+                (_hasNotchArg ? notchArgLengthX : 0) +
+                cornerRadius +
+                notchInsOffsetX +
+                strokeWidth,
+            y: _getBBoxBrick().extent.height,
         },
     };
 }

From 6a1d9bdd880372bcf1732401b1fde617958e465e Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Wed, 12 Jul 2023 13:20:50 +0530
Subject: [PATCH 05/48] fix(code-builder): calculation for
 `_getBBoxNotchInsNestTop` method for the path

---
 .../src/brick/design0/utils/path.ts           | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/utils/path.ts b/modules/code-builder/src/brick/design0/utils/path.ts
index 256e9ab3..6a1a1366 100644
--- a/modules/code-builder/src/brick/design0/utils/path.ts
+++ b/modules/code-builder/src/brick/design0/utils/path.ts
@@ -443,14 +443,32 @@ function _getBBoxNotchInsNestTop(): {
     extent: { width: number; height: number };
     coords: { x: number; y: number };
 } {
+    const argSectionLengthYMin = cornerRadius * 2 + notchArgLengthY;
+    const argsLength = _argsLengthY
+        .map((sectionLengthY) => Math.max(argSectionLengthYMin, sectionLengthY))
+        .reduce((a, b) => a + b, 0);
+
+    const offsetY =
+        strokeWidth +
+        (argsLength !== 0 ? argsLength : 2 * cornerRadius + notchArgLengthY) +
+        strokeWidth;
+
     return {
         extent: {
-            width: notchInsLengthX,
+            width: notchInsLengthX - 2 * strokeWidth,
             height: notchInsLengthY,
         },
         coords: {
-            x: 0,
-            y: 0,
+            x:
+                strokeWidth +
+                (_hasNotchArg ? notchArgLengthX : 0) +
+                cornerRadius +
+                notchInsOffsetX +
+                notchInsLengthX +
+                4 * strokeWidth -
+                strokeWidth,
+
+            y: offsetY,
         },
     };
 }

From 1cddeefad0a0cb41066e1c0140ac8340b24455d7 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Wed, 12 Jul 2023 14:19:23 +0530
Subject: [PATCH 06/48] feat(code-builder): implement `_getBBoxArgs` method for
 the path

---
 .../src/brick/design0/utils/path.ts            | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/utils/path.ts b/modules/code-builder/src/brick/design0/utils/path.ts
index 6a1a1366..79fa048d 100644
--- a/modules/code-builder/src/brick/design0/utils/path.ts
+++ b/modules/code-builder/src/brick/design0/utils/path.ts
@@ -482,17 +482,20 @@ function _getBBoxArgs(): {
     extent: { width: number; height: number };
     coords: { x: number; y: number }[];
 } {
+    const offsetX = strokeWidth + notchArgLengthX + _innerLengthX - notchArgLengthX + strokeWidth;
+    const firstOffsetY = strokeWidth + cornerRadius + 1 + strokeWidth;
+
     return {
         extent: {
             width: notchArgLengthX,
-            height: notchArgLengthY,
+            height: 10 - 2 * strokeWidth,
         },
-        coords: [
-            {
-                x: 0,
-                y: 0,
-            },
-        ],
+        coords: _argsLengthY.map((_, index) => {
+            return {
+                x: offsetX,
+                y: firstOffsetY + index * notchArgLengthY,
+            };
+        }),
     };
 }
 
@@ -588,7 +591,6 @@ export function generatePath(
     };
 
     if (print) console.log(results);
-    console.log(results.path);
 
     return results;
 }

From e73dc5f6a03aadc86ce40ee76a3f17c6b08166dd Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Wed, 12 Jul 2023 16:44:57 +0530
Subject: [PATCH 07/48] fix(code-builder): remove `hasNotchNest` for
 generatePath inside `BrickBlock`

---
 modules/code-builder/src/brick/design0/BrickBlock.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/modules/code-builder/src/brick/design0/BrickBlock.ts b/modules/code-builder/src/brick/design0/BrickBlock.ts
index 393f015d..02ca6008 100644
--- a/modules/code-builder/src/brick/design0/BrickBlock.ts
+++ b/modules/code-builder/src/brick/design0/BrickBlock.ts
@@ -48,7 +48,6 @@ export default class BrickBlock extends BrickModelBlock {
 
         const path = generatePath({
             hasNest: true,
-            hasNotchNest: true,
             hasNotchArg: true,
             hasNotchInsTop: this._connectAbove,
             hasNotchInsBot: this._connectBelow,

From bb6b2b6377cb47abe18dce729f5371c8f911eb3e Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Thu, 13 Jul 2023 16:15:44 +0530
Subject: [PATCH 08/48] fix(code-builder): `extent` and `coords` calculation in
 `path.ts`

---
 .../code-builder/src/brick/design0/utils/path.ts   | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/utils/path.ts b/modules/code-builder/src/brick/design0/utils/path.ts
index 79fa048d..f080c4f6 100644
--- a/modules/code-builder/src/brick/design0/utils/path.ts
+++ b/modules/code-builder/src/brick/design0/utils/path.ts
@@ -403,7 +403,7 @@ function _getBBoxNotchInsTop(): {
                 cornerRadius +
                 notchInsOffsetX +
                 strokeWidth,
-            y: strokeWidth + notchInsLengthY - strokeWidth,
+            y: 0,
         },
     };
 }
@@ -419,7 +419,7 @@ function _getBBoxNotchInsBot(): {
 } {
     return {
         extent: {
-            width: notchInsLengthX - 4 * strokeWidth,
+            width: notchInsLengthX - 2 * strokeWidth,
             height: strokeWidth + notchInsLengthY - strokeWidth,
         },
         coords: {
@@ -464,10 +464,8 @@ function _getBBoxNotchInsNestTop(): {
                 (_hasNotchArg ? notchArgLengthX : 0) +
                 cornerRadius +
                 notchInsOffsetX +
-                notchInsLengthX +
-                4 * strokeWidth -
+                notchInsLengthX -
                 strokeWidth,
-
             y: offsetY,
         },
     };
@@ -484,6 +482,10 @@ function _getBBoxArgs(): {
 } {
     const offsetX = strokeWidth + notchArgLengthX + _innerLengthX - notchArgLengthX + strokeWidth;
     const firstOffsetY = strokeWidth + cornerRadius + 1 + strokeWidth;
+    const argSectionLengthYMin = cornerRadius * 2 + notchArgLengthY;
+    const argsLength = _argsLengthY.map((sectionLengthY) =>
+        Math.max(argSectionLengthYMin, sectionLengthY),
+    );
 
     return {
         extent: {
@@ -493,7 +495,7 @@ function _getBBoxArgs(): {
         coords: _argsLengthY.map((_, index) => {
             return {
                 x: offsetX,
-                y: firstOffsetY + index * notchArgLengthY,
+                y: firstOffsetY + (index === 0 ? 0 : argsLength[index - 1]),
             };
         }),
     };

From 62d32f84f5fd3938c300a6cad0e2b8dff2168407 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Thu, 13 Jul 2023 16:16:45 +0530
Subject: [PATCH 09/48] chore(path): print results in DEV mode

---
 modules/code-builder/src/brick/design0/utils/path.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/code-builder/src/brick/design0/utils/path.ts b/modules/code-builder/src/brick/design0/utils/path.ts
index f080c4f6..46e293df 100644
--- a/modules/code-builder/src/brick/design0/utils/path.ts
+++ b/modules/code-builder/src/brick/design0/utils/path.ts
@@ -592,7 +592,7 @@ export function generatePath(
         bBoxArgs: _getBBoxArgs(),
     };
 
-    if (print) console.log(results);
+    if (print || import.meta.env.DEV) console.log(results);
 
     return results;
 }

From 7061c197d7cad2897b9f0b4fbf93cf7b1ee1d9ef Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Thu, 13 Jul 2023 17:06:10 +0530
Subject: [PATCH 10/48] feat(code-builder): implement missing getters for
 `BrickBlock`

---
 .../src/brick/design0/BrickBlock.ts           | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/BrickBlock.ts b/modules/code-builder/src/brick/design0/BrickBlock.ts
index 02ca6008..7698f4ad 100644
--- a/modules/code-builder/src/brick/design0/BrickBlock.ts
+++ b/modules/code-builder/src/brick/design0/BrickBlock.ts
@@ -10,6 +10,8 @@ import { generatePath } from './utils/path';
  * Final class that defines a block brick.
  */
 export default class BrickBlock extends BrickModelBlock {
+    readonly _pathResults: ReturnType<typeof generatePath>;
+
     constructor(params: {
         // intrinsic
         name: string;
@@ -32,31 +34,39 @@ export default class BrickBlock extends BrickModelBlock {
         connectBelow: boolean;
     }) {
         super(params);
+        const argsLength = Object.keys(this._args).length;
+        this._pathResults = generatePath({
+            hasNest: true,
+            hasNotchArg: true,
+            hasNotchInsTop: this._connectAbove,
+            hasNotchInsBot: this._connectBelow,
+            scale: this._scale,
+            nestLengthY: 30,
+            innerLengthX: 100,
+            argHeights: Array.from({ length: argsLength }, () => 17),
+        });
     }
 
     public get extent(): TBrickExtent {
-        return { width: 0, height: 0 };
+        return this._pathResults.bBoxBrick.extent;
     }
 
     public get argsCoords(): Record<string, TBrickCoords> {
-        return {};
+        const argsKeys = Object.keys(this._args);
+        const result: Record<string, TBrickCoords> = {};
+        argsKeys.forEach((key, index) => {
+            const argX = this._pathResults.bBoxArgs.coords[index].x;
+            const argY = this._pathResults.bBoxArgs.coords[index].y;
+            result[key] = { x: argX, y: argY };
+        });
+
+        return result;
     }
 
     public get SVGpaths(): string[] {
-        const argsLength = Object.keys(this._args).length;
         let result: string[] = [];
 
-        const path = generatePath({
-            hasNest: true,
-            hasNotchArg: true,
-            hasNotchInsTop: this._connectAbove,
-            hasNotchInsBot: this._connectBelow,
-            scale: this._scale,
-            nestLengthY: 30,
-            innerLengthX: 100,
-            argHeights: Array.from({ length: argsLength }, () => 17),
-        }).path;
-
+        const path = this._pathResults.path;
         result.push(path);
 
         return result;

From aa1b79dfb02ffd56f98bac1cb57cedee5074ec9e Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Thu, 13 Jul 2023 17:12:28 +0530
Subject: [PATCH 11/48] fix(bricks): types for bricks

---
 modules/code-builder/src/@types/brick.d.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/modules/code-builder/src/@types/brick.d.ts b/modules/code-builder/src/@types/brick.d.ts
index ffff1fe4..ad59196a 100644
--- a/modules/code-builder/src/@types/brick.d.ts
+++ b/modules/code-builder/src/@types/brick.d.ts
@@ -84,9 +84,9 @@ export interface IBrickArgs {
  */
 export interface IBrickArgsState {
     /** map of argument ID to corresponding bounding box dimensions */
-    get argsExtent(): Record<string, IBrickExtent>;
+    get argsExtent(): Record<string, TBrickExtent>;
     /** map of argument ID to co-ordinates of the argument connections relative to the brick */
-    get argsCoords(): Record<string, IBrickCoords>;
+    get argsCoords(): Record<string, TBrickCoords>;
 }
 
 /**
@@ -111,7 +111,7 @@ export interface IBrick extends IBrickStyle {
     /** whether brick is highlighted */
     highlighted: boolean;
     /** bounding box dimensions of the brick */
-    get extent(): IBrickExtent;
+    get extent(): TBrickExtent;
 
     /** SVG string for the brick based on defining properties and current state */
     get SVGpaths(): string[];
@@ -176,7 +176,7 @@ export interface IBrickStatement extends IBrickInstruction {
 export interface IBrickBlock extends IBrickInstruction {
     // state
     /** combined bounding box of the instructions nested within the brick */
-    get nestExtent(): IBrickExtent;
+    get nestExtent(): TBrickExtent;
     /** whether brick nesting is hidden */
     collapsed: boolean;
 }

From 3e20bbfa327974ead8e508f86f17738d225b7aaa Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Thu, 13 Jul 2023 18:28:05 +0530
Subject: [PATCH 12/48] refactor(bricks): define `bBoxArgs` getter to get
 extent and coords

---
 modules/code-builder/src/@types/brick.d.ts | 11 +++++++----
 modules/code-builder/src/brick/model.ts    | 14 ++++++++------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/modules/code-builder/src/@types/brick.d.ts b/modules/code-builder/src/@types/brick.d.ts
index ad59196a..02b2dc2c 100644
--- a/modules/code-builder/src/@types/brick.d.ts
+++ b/modules/code-builder/src/@types/brick.d.ts
@@ -83,10 +83,13 @@ export interface IBrickArgs {
  * State properties associated with bricks that can take arguments.
  */
 export interface IBrickArgsState {
-    /** map of argument ID to corresponding bounding box dimensions */
-    get argsExtent(): Record<string, TBrickExtent>;
-    /** map of argument ID to co-ordinates of the argument connections relative to the brick */
-    get argsCoords(): Record<string, TBrickCoords>;
+    /** map of argument ID to to corresponding extent and coords */
+    get bBoxArgs(): {
+        /** map of argument ID to corresponding bounding box dimensions */
+        extent: Record<string, TBrickExtent>;
+        /** map of argument ID to co-ordinates of the argument connections relative to the brick */
+        coords: Record<string, TBrickCoords>;
+    };
 }
 
 /**
diff --git a/modules/code-builder/src/brick/model.ts b/modules/code-builder/src/brick/model.ts
index f86569d1..cf12e724 100644
--- a/modules/code-builder/src/brick/model.ts
+++ b/modules/code-builder/src/brick/model.ts
@@ -155,8 +155,6 @@ abstract class BrickModelInstruction extends BrickModel implements IBrickInstruc
     protected _connectAbove: boolean;
     protected _connectBelow: boolean;
 
-    public argsExtent: Record<string, TBrickExtent> = {};
-
     constructor(params: {
         // intrinsic
         name: string;
@@ -205,7 +203,10 @@ abstract class BrickModelInstruction extends BrickModel implements IBrickInstruc
         return this._connectBelow;
     }
 
-    public abstract get argsCoords(): Record<string, TBrickCoords>;
+    public abstract get bBoxArgs(): {
+        extent: Record<string, TBrickExtent>;
+        coords: Record<string, TBrickCoords>;
+    };
 }
 
 // -- public classes -------------------------------------------------------------------------------
@@ -270,8 +271,6 @@ export abstract class BrickModelExpression extends BrickModelArgument implements
         }
     >;
 
-    public argsExtent: Record<string, TBrickExtent> = {};
-
     constructor(params: {
         // intrinsic
         name: string;
@@ -308,7 +307,10 @@ export abstract class BrickModelExpression extends BrickModelArgument implements
         return this._args;
     }
 
-    public abstract get argsCoords(): Record<string, TBrickCoords>;
+    public abstract get bBoxArgs(): {
+        extent: Record<string, TBrickExtent>;
+        coords: Record<string, TBrickCoords>;
+    };
 }
 
 /**

From 3dc48d8aa0657a124e6081bb0b7a81b3d912a7b0 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Thu, 13 Jul 2023 18:45:59 +0530
Subject: [PATCH 13/48] refactor(bricks): change `bBoxArgs` to make it more
 flexible

---
 modules/code-builder/src/@types/brick.d.ts      | 17 ++++++++++-------
 .../src/brick/design0/BrickBlock.ts             | 14 +++++++++-----
 modules/code-builder/src/brick/model.ts         | 10 ++--------
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/modules/code-builder/src/@types/brick.d.ts b/modules/code-builder/src/@types/brick.d.ts
index 02b2dc2c..9f2cc0b0 100644
--- a/modules/code-builder/src/@types/brick.d.ts
+++ b/modules/code-builder/src/@types/brick.d.ts
@@ -83,13 +83,16 @@ export interface IBrickArgs {
  * State properties associated with bricks that can take arguments.
  */
 export interface IBrickArgsState {
-    /** map of argument ID to to corresponding extent and coords */
-    get bBoxArgs(): {
-        /** map of argument ID to corresponding bounding box dimensions */
-        extent: Record<string, TBrickExtent>;
-        /** map of argument ID to co-ordinates of the argument connections relative to the brick */
-        coords: Record<string, TBrickCoords>;
-    };
+    /** Map of argument ID to corresponding extent and coords */
+    get bBoxArgs(): Record<
+        string,
+        {
+            /** Bounding box dimensions */
+            extent: TBrickExtent;
+            /** Co-ordinates of the argument connections relative to the brick */
+            coords: TBrickCoords;
+        }
+    >;
 }
 
 /**
diff --git a/modules/code-builder/src/brick/design0/BrickBlock.ts b/modules/code-builder/src/brick/design0/BrickBlock.ts
index 7698f4ad..69c83c01 100644
--- a/modules/code-builder/src/brick/design0/BrickBlock.ts
+++ b/modules/code-builder/src/brick/design0/BrickBlock.ts
@@ -34,7 +34,7 @@ export default class BrickBlock extends BrickModelBlock {
         connectBelow: boolean;
     }) {
         super(params);
-        const argsLength = Object.keys(this._args).length;
+        const argsKeys = Object.keys(this._args);
         this._pathResults = generatePath({
             hasNest: true,
             hasNotchArg: true,
@@ -43,7 +43,7 @@ export default class BrickBlock extends BrickModelBlock {
             scale: this._scale,
             nestLengthY: 30,
             innerLengthX: 100,
-            argHeights: Array.from({ length: argsLength }, () => 17),
+            argHeights: Array.from({ length: argsKeys.length }, () => 17),
         });
     }
 
@@ -51,13 +51,17 @@ export default class BrickBlock extends BrickModelBlock {
         return this._pathResults.bBoxBrick.extent;
     }
 
-    public get argsCoords(): Record<string, TBrickCoords> {
+    public get bBoxArgs(): Record<string, { extent: TBrickExtent; coords: TBrickCoords }> {
         const argsKeys = Object.keys(this._args);
-        const result: Record<string, TBrickCoords> = {};
+        const result: Record<string, { extent: TBrickExtent; coords: TBrickCoords }> = {};
+
         argsKeys.forEach((key, index) => {
+            result[key] = { extent: { width: 0, height: 0 }, coords: { x: 0, y: 0 } };
             const argX = this._pathResults.bBoxArgs.coords[index].x;
             const argY = this._pathResults.bBoxArgs.coords[index].y;
-            result[key] = { x: argX, y: argY };
+
+            result[key].extent = this._pathResults.bBoxArgs.extent;
+            result[key].coords = { x: argX, y: argY };
         });
 
         return result;
diff --git a/modules/code-builder/src/brick/model.ts b/modules/code-builder/src/brick/model.ts
index cf12e724..953571e9 100644
--- a/modules/code-builder/src/brick/model.ts
+++ b/modules/code-builder/src/brick/model.ts
@@ -203,10 +203,7 @@ abstract class BrickModelInstruction extends BrickModel implements IBrickInstruc
         return this._connectBelow;
     }
 
-    public abstract get bBoxArgs(): {
-        extent: Record<string, TBrickExtent>;
-        coords: Record<string, TBrickCoords>;
-    };
+    public abstract get bBoxArgs(): Record<string, { extent: TBrickExtent; coords: TBrickCoords }>;
 }
 
 // -- public classes -------------------------------------------------------------------------------
@@ -307,10 +304,7 @@ export abstract class BrickModelExpression extends BrickModelArgument implements
         return this._args;
     }
 
-    public abstract get bBoxArgs(): {
-        extent: Record<string, TBrickExtent>;
-        coords: Record<string, TBrickCoords>;
-    };
+    public abstract get bBoxArgs(): Record<string, { extent: TBrickExtent; coords: TBrickCoords }>;
 }
 
 /**

From 7fa392761470d698aad9a82f509fde214c7f7414 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Thu, 13 Jul 2023 18:52:28 +0530
Subject: [PATCH 14/48] feat(bricks): add `bBoxBrick` getter

Define and implement `bBoxBrick` getter to get the `extent` and `coords` of a brick
---
 modules/code-builder/src/@types/brick.d.ts           | 4 ++--
 modules/code-builder/src/brick/design0/BrickBlock.ts | 4 ++--
 modules/code-builder/src/brick/model.ts              | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/modules/code-builder/src/@types/brick.d.ts b/modules/code-builder/src/@types/brick.d.ts
index 9f2cc0b0..20d3b7d6 100644
--- a/modules/code-builder/src/@types/brick.d.ts
+++ b/modules/code-builder/src/@types/brick.d.ts
@@ -116,8 +116,8 @@ export interface IBrick extends IBrickStyle {
     // states
     /** whether brick is highlighted */
     highlighted: boolean;
-    /** bounding box dimensions of the brick */
-    get extent(): TBrickExtent;
+    /** Bounding box dimensions and coords of the brick */
+    get bBoxBrick(): { extent: TBrickExtent; coords: TBrickCoords };
 
     /** SVG string for the brick based on defining properties and current state */
     get SVGpaths(): string[];
diff --git a/modules/code-builder/src/brick/design0/BrickBlock.ts b/modules/code-builder/src/brick/design0/BrickBlock.ts
index 69c83c01..144e5352 100644
--- a/modules/code-builder/src/brick/design0/BrickBlock.ts
+++ b/modules/code-builder/src/brick/design0/BrickBlock.ts
@@ -47,8 +47,8 @@ export default class BrickBlock extends BrickModelBlock {
         });
     }
 
-    public get extent(): TBrickExtent {
-        return this._pathResults.bBoxBrick.extent;
+    public get bBoxBrick(): { extent: TBrickExtent; coords: TBrickCoords } {
+        return this._pathResults.bBoxBrick;
     }
 
     public get bBoxArgs(): Record<string, { extent: TBrickExtent; coords: TBrickCoords }> {
diff --git a/modules/code-builder/src/brick/model.ts b/modules/code-builder/src/brick/model.ts
index 953571e9..a08475a2 100644
--- a/modules/code-builder/src/brick/model.ts
+++ b/modules/code-builder/src/brick/model.ts
@@ -101,7 +101,7 @@ abstract class BrickModel implements IBrick {
         return this._scale;
     }
 
-    public abstract get extent(): TBrickExtent;
+    public abstract get bBoxBrick(): { extent: TBrickExtent; coords: TBrickCoords };
 
     public abstract get SVGpaths(): string[];
 }

From 45c4deb11a1e5d5bba7741f9051cb08928c8671f Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Thu, 13 Jul 2023 18:57:20 +0530
Subject: [PATCH 15/48] fix(bricks): convert `SVGpaths` getter to `SVGpath`

---
 modules/code-builder/src/@types/brick.d.ts               | 2 +-
 modules/code-builder/src/brick/design0/BrickBlock.ts     | 9 ++-------
 .../src/brick/design0/components/BrickBlock.tsx          | 2 +-
 modules/code-builder/src/brick/model.ts                  | 2 +-
 4 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/modules/code-builder/src/@types/brick.d.ts b/modules/code-builder/src/@types/brick.d.ts
index 20d3b7d6..8a6814e3 100644
--- a/modules/code-builder/src/@types/brick.d.ts
+++ b/modules/code-builder/src/@types/brick.d.ts
@@ -120,7 +120,7 @@ export interface IBrick extends IBrickStyle {
     get bBoxBrick(): { extent: TBrickExtent; coords: TBrickCoords };
 
     /** SVG string for the brick based on defining properties and current state */
-    get SVGpaths(): string[];
+    get SVGpath(): string;
 }
 
 /**
diff --git a/modules/code-builder/src/brick/design0/BrickBlock.ts b/modules/code-builder/src/brick/design0/BrickBlock.ts
index 144e5352..9ffd676c 100644
--- a/modules/code-builder/src/brick/design0/BrickBlock.ts
+++ b/modules/code-builder/src/brick/design0/BrickBlock.ts
@@ -67,12 +67,7 @@ export default class BrickBlock extends BrickModelBlock {
         return result;
     }
 
-    public get SVGpaths(): string[] {
-        let result: string[] = [];
-
-        const path = this._pathResults.path;
-        result.push(path);
-
-        return result;
+    public get SVGpath(): string {
+        return this._pathResults.path;
     }
 }
diff --git a/modules/code-builder/src/brick/design0/components/BrickBlock.tsx b/modules/code-builder/src/brick/design0/components/BrickBlock.tsx
index 2eb915dd..fbc121ca 100644
--- a/modules/code-builder/src/brick/design0/components/BrickBlock.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickBlock.tsx
@@ -8,7 +8,7 @@ export default function (props: { instance: IBrickBlock }): JSX.Element {
   return (
     <g transform={`scale(${instance.scale})`}>
       <path
-        d={instance.SVGpaths[0]}
+        d={instance.SVGpath}
         style={{
           fill: instance.colorBg as string,
           fillOpacity: 1,
diff --git a/modules/code-builder/src/brick/model.ts b/modules/code-builder/src/brick/model.ts
index a08475a2..043628dc 100644
--- a/modules/code-builder/src/brick/model.ts
+++ b/modules/code-builder/src/brick/model.ts
@@ -103,7 +103,7 @@ abstract class BrickModel implements IBrick {
 
     public abstract get bBoxBrick(): { extent: TBrickExtent; coords: TBrickCoords };
 
-    public abstract get SVGpaths(): string[];
+    public abstract get SVGpath(): string;
 }
 
 /**

From 905eb1a0c050936cab40229411a1c1adc722fd48 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Thu, 13 Jul 2023 19:11:47 +0530
Subject: [PATCH 16/48] feat(storybook): show visual indicators

Show overlay indicators(bounding boxes) for the args and notches inside storybook
---
 .../brick/design0/components/BrickBlock.tsx   |  7 +++-
 .../brick/stories/components/BrickBlock.tsx   | 34 +++++++++++++++++--
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/components/BrickBlock.tsx b/modules/code-builder/src/brick/design0/components/BrickBlock.tsx
index fbc121ca..78e103a3 100644
--- a/modules/code-builder/src/brick/design0/components/BrickBlock.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickBlock.tsx
@@ -1,8 +1,12 @@
+import type { JSX } from 'react';
 import type { IBrickBlock } from '@/@types/brick';
 
 // -------------------------------------------------------------------------------------------------
 
-export default function (props: { instance: IBrickBlock }): JSX.Element {
+export default function (props: {
+  instance: IBrickBlock;
+  visualIndicators?: JSX.Element;
+}): JSX.Element {
   const { instance } = props;
 
   return (
@@ -18,6 +22,7 @@ export default function (props: { instance: IBrickBlock }): JSX.Element {
           strokeOpacity: 1,
         }}
       />
+      {props.visualIndicators}
     </g>
   );
 }
diff --git a/modules/code-builder/src/brick/stories/components/BrickBlock.tsx b/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
index 406b4f8c..9a77df39 100644
--- a/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
+++ b/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
@@ -5,7 +5,7 @@ import BrickWrapper from './BrickWrapper';
 // -------------------------------------------------------------------------------------------------
 
 export default function (props: {
-  Component: (props: { instance: IBrickBlock }) => JSX.Element;
+  Component: (props: { instance: IBrickBlock; visualIndicators?: JSX.Element }) => JSX.Element;
   prototype: new (params: {
     name: string;
     label: string;
@@ -52,9 +52,39 @@ export default function (props: {
     name: '',
   });
 
+  const VisualIndicators = () => (
+    <>
+      {/* Overall Bounding Box of the Brick */}
+      {/* <rect
+        x={instance.bBoxBrick.coords.x}
+        y={instance.bBoxBrick.coords.y}
+        height={instance.bBoxBrick.extent.height}
+        width={instance.bBoxBrick.extent.width}
+        fill="green"
+        opacity={0.2}
+      /> */}
+
+      {Object.keys(instance.bBoxArgs).map((name, i) => {
+        const arg = instance.bBoxArgs[name];
+
+        return (
+          <rect
+            key={i}
+            x={arg.coords.x}
+            y={arg.coords.y}
+            height={arg.extent.height}
+            width={arg.extent.width}
+            fill="green"
+            opacity={0.8}
+          />
+        );
+      })}
+    </>
+  );
+
   return (
     <BrickWrapper>
-      <Component instance={instance} />
+      <Component instance={instance} visualIndicators={<VisualIndicators />} />
     </BrickWrapper>
   );
 }

From 345f1020a2c0892ebfc89425e87021b543bdea12 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Thu, 13 Jul 2023 19:15:09 +0530
Subject: [PATCH 17/48] chore(storybook): remove `No Args` story for
 `Expression Brick`

---
 .../design0/stories/BrickExpression.stories.ts      | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/stories/BrickExpression.stories.ts b/modules/code-builder/src/brick/design0/stories/BrickExpression.stories.ts
index 8d913a4b..b47a3faa 100644
--- a/modules/code-builder/src/brick/design0/stories/BrickExpression.stories.ts
+++ b/modules/code-builder/src/brick/design0/stories/BrickExpression.stories.ts
@@ -9,19 +9,6 @@ export default {
 
 // -------------------------------------------------------------------------------------------------
 
-export const NoArgs: Story = {
-    args: {
-        Component: CBrickExpression,
-        prototype: MBrickExpression,
-        label: 'Expression',
-        args: [],
-        colorBg: 'yellow',
-        colorFg: 'black',
-        outline: 'red',
-        scale: 1,
-    },
-};
-
 export const WithArgs: Story = {
     args: {
         Component: CBrickExpression,

From 8f2c5025a1091fa9e6b2cbaec97f32ce168da9d0 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 14 Jul 2023 01:11:21 +0530
Subject: [PATCH 18/48] fix(generatePath): `_getBBoxArgs` coords calculation

---
 modules/code-builder/src/brick/design0/utils/path.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/modules/code-builder/src/brick/design0/utils/path.ts b/modules/code-builder/src/brick/design0/utils/path.ts
index 46e293df..57d195bc 100644
--- a/modules/code-builder/src/brick/design0/utils/path.ts
+++ b/modules/code-builder/src/brick/design0/utils/path.ts
@@ -495,7 +495,9 @@ function _getBBoxArgs(): {
         coords: _argsLengthY.map((_, index) => {
             return {
                 x: offsetX,
-                y: firstOffsetY + (index === 0 ? 0 : argsLength[index - 1]),
+                y:
+                    firstOffsetY +
+                    (index === 0 ? 0 : argsLength.slice(0, index).reduce((a, b) => a + b, 0)),
             };
         }),
     };

From 23e07bd54b95241d32c938f900211699f17e952f Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 14 Jul 2023 13:33:45 +0530
Subject: [PATCH 19/48] feat(bricks): change the model add `bBoxNotchArg`
 getter

Change the types and models of the bricks to add `bBoxNotchArg` getter to get the left notch's extent and coords
---
 modules/code-builder/src/@types/brick.d.ts    | 24 ++++++++++++++++---
 .../src/brick/design0/BrickBlock.ts           |  8 +++++--
 modules/code-builder/src/brick/model.ts       |  6 +++++
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/modules/code-builder/src/@types/brick.d.ts b/modules/code-builder/src/@types/brick.d.ts
index 8a6814e3..f17ed283 100644
--- a/modules/code-builder/src/@types/brick.d.ts
+++ b/modules/code-builder/src/@types/brick.d.ts
@@ -95,6 +95,20 @@ export interface IBrickArgsState {
     >;
 }
 
+/**
+ * @interface
+ * State properties associated with bricks that have notch.
+ */
+export interface IBrickNotchState {
+    /** Map of argument ID to corresponding extent and coords */
+    get bBoxNotchArg(): {
+        /** Bounding box dimensions of the notch */
+        extent: TBrickExtent;
+        /** Co-ordinates of the notch relative to the brick */
+        coords: TBrickCoords;
+    };
+}
+
 /**
  * @interface
  * Type definition of a generic brick (any type).
@@ -148,7 +162,7 @@ export interface IBrickInstruction extends IBrick, IBrickArgs, IBrickArgsState {
  * @interface
  * Type definition of a data brick.
  */
-export interface IBrickData extends IBrickArgument {
+export interface IBrickData extends IBrickArgument, IBrickNotchState {
     /** whether brick has a static label or value can be updated */
     get dynamic(): boolean;
     /** (if dynamic) current value of the brick */
@@ -162,7 +176,11 @@ export interface IBrickData extends IBrickArgument {
  * Type definition of an argument brick.
  */
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface IBrickExpression extends IBrickArgument, IBrickArgs, IBrickArgsState {
+export interface IBrickExpression
+    extends IBrickArgument,
+        IBrickArgs,
+        IBrickArgsState,
+        IBrickNotchState {
     // reserving spot for future-proofing
 }
 
@@ -179,7 +197,7 @@ export interface IBrickStatement extends IBrickInstruction {
  * @interface
  * Type definition of a block brick.
  */
-export interface IBrickBlock extends IBrickInstruction {
+export interface IBrickBlock extends IBrickInstruction, IBrickNotchState {
     // state
     /** combined bounding box of the instructions nested within the brick */
     get nestExtent(): TBrickExtent;
diff --git a/modules/code-builder/src/brick/design0/BrickBlock.ts b/modules/code-builder/src/brick/design0/BrickBlock.ts
index 9ffd676c..3c41353c 100644
--- a/modules/code-builder/src/brick/design0/BrickBlock.ts
+++ b/modules/code-builder/src/brick/design0/BrickBlock.ts
@@ -47,6 +47,10 @@ export default class BrickBlock extends BrickModelBlock {
         });
     }
 
+    public get SVGpath(): string {
+        return this._pathResults.path;
+    }
+
     public get bBoxBrick(): { extent: TBrickExtent; coords: TBrickCoords } {
         return this._pathResults.bBoxBrick;
     }
@@ -67,7 +71,7 @@ export default class BrickBlock extends BrickModelBlock {
         return result;
     }
 
-    public get SVGpath(): string {
-        return this._pathResults.path;
+    public get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords } {
+        return this._pathResults.bBoxNotchArg!;
     }
 }
diff --git a/modules/code-builder/src/brick/model.ts b/modules/code-builder/src/brick/model.ts
index 043628dc..ae2ba4b0 100644
--- a/modules/code-builder/src/brick/model.ts
+++ b/modules/code-builder/src/brick/model.ts
@@ -251,6 +251,8 @@ export abstract class BrickModelData extends BrickModelArgument implements IBric
     public get input(): 'boolean' | 'number' | 'string' | 'options' | undefined {
         return this._input;
     }
+
+    public abstract get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords };
 }
 
 /**
@@ -305,6 +307,8 @@ export abstract class BrickModelExpression extends BrickModelArgument implements
     }
 
     public abstract get bBoxArgs(): Record<string, { extent: TBrickExtent; coords: TBrickCoords }>;
+
+    public abstract get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords };
 }
 
 /**
@@ -370,4 +374,6 @@ export abstract class BrickModelBlock extends BrickModelInstruction implements I
     }) {
         super({ ...params, type: 'block' });
     }
+
+    public abstract get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords };
 }

From e896c52c6e04bc100d4ee144990a1e59125fd996 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 14 Jul 2023 13:36:55 +0530
Subject: [PATCH 20/48] docs(storybook): add bounding box for notch to
 `BrickBlock` story

---
 .../src/brick/stories/components/BrickBlock.tsx       | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/modules/code-builder/src/brick/stories/components/BrickBlock.tsx b/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
index 9a77df39..d084b2b5 100644
--- a/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
+++ b/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
@@ -64,6 +64,7 @@ export default function (props: {
         opacity={0.2}
       /> */}
 
+      {/* Right args bounding box */}
       {Object.keys(instance.bBoxArgs).map((name, i) => {
         const arg = instance.bBoxArgs[name];
 
@@ -79,6 +80,16 @@ export default function (props: {
           />
         );
       })}
+
+      {/* Left notch bounding box */}
+      <rect
+        x={instance.bBoxNotchArg.coords.x}
+        y={instance.bBoxNotchArg.coords.y}
+        height={instance.bBoxNotchArg.extent.height}
+        width={instance.bBoxNotchArg.extent.width}
+        fill="green"
+        opacity={0.8}
+      />
     </>
   );
 

From 40f477f65e3d9c7db65bcd7436f7e8a0fba848af Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 14 Jul 2023 14:15:22 +0530
Subject: [PATCH 21/48] feat(bricks): change the model add `bBoxNotchInsTop`
 getter

Change the types and models of the bricks to add `bBoxNotchInsTop` getter to get the top instruction notch's extent and coords
---
 modules/code-builder/src/@types/brick.d.ts    | 26 ++++++++++++++-----
 .../src/brick/design0/BrickBlock.ts           |  4 +++
 modules/code-builder/src/brick/model.ts       |  4 +++
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/modules/code-builder/src/@types/brick.d.ts b/modules/code-builder/src/@types/brick.d.ts
index f17ed283..a4a00872 100644
--- a/modules/code-builder/src/@types/brick.d.ts
+++ b/modules/code-builder/src/@types/brick.d.ts
@@ -97,14 +97,28 @@ export interface IBrickArgsState {
 
 /**
  * @interface
- * State properties associated with bricks that have notch.
+ * State properties associated with bricks that have left notch.
  */
 export interface IBrickNotchState {
-    /** Map of argument ID to corresponding extent and coords */
+    /** Bounding box dimensions and coords of the left notch */
     get bBoxNotchArg(): {
-        /** Bounding box dimensions of the notch */
+        /** Bounding box dimensions of the left notch */
+        extent: TBrickExtent;
+        /** Co-ordinates of the left notch relative to the brick */
+        coords: TBrickCoords;
+    };
+}
+
+/**
+ * @interface
+ * State properties associated with bricks that have top instruction notch.
+ */
+export interface IBrickNotchInsTopState {
+    /** Bounding box dimensions and coords of the top instruction notch */
+    get bBoxNotchInsTop(): {
+        /** Bounding box dimensions of the top instruction notch */
         extent: TBrickExtent;
-        /** Co-ordinates of the notch relative to the brick */
+        /** Co-ordinates of the top instruction notch relative to the brick */
         coords: TBrickCoords;
     };
 }
@@ -189,7 +203,7 @@ export interface IBrickExpression
  * Type definition of a statement brick.
  */
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface IBrickStatement extends IBrickInstruction {
+export interface IBrickStatement extends IBrickInstruction, IBrickNotchInsTopState {
     // reserving spot for future-proofing
 }
 
@@ -197,7 +211,7 @@ export interface IBrickStatement extends IBrickInstruction {
  * @interface
  * Type definition of a block brick.
  */
-export interface IBrickBlock extends IBrickInstruction, IBrickNotchState {
+export interface IBrickBlock extends IBrickInstruction, IBrickNotchState, IBrickNotchInsTopState {
     // state
     /** combined bounding box of the instructions nested within the brick */
     get nestExtent(): TBrickExtent;
diff --git a/modules/code-builder/src/brick/design0/BrickBlock.ts b/modules/code-builder/src/brick/design0/BrickBlock.ts
index 3c41353c..6f189c74 100644
--- a/modules/code-builder/src/brick/design0/BrickBlock.ts
+++ b/modules/code-builder/src/brick/design0/BrickBlock.ts
@@ -74,4 +74,8 @@ export default class BrickBlock extends BrickModelBlock {
     public get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords } {
         return this._pathResults.bBoxNotchArg!;
     }
+
+    public get bBoxNotchInsTop(): { extent: TBrickExtent; coords: TBrickCoords } {
+        return this._pathResults.bBoxNotchInsTop!;
+    }
 }
diff --git a/modules/code-builder/src/brick/model.ts b/modules/code-builder/src/brick/model.ts
index ae2ba4b0..9c9e199d 100644
--- a/modules/code-builder/src/brick/model.ts
+++ b/modules/code-builder/src/brick/model.ts
@@ -340,6 +340,8 @@ export abstract class BrickModelStatement extends BrickModelInstruction implemen
     }) {
         super({ ...params, type: 'statement' });
     }
+
+    public abstract get bBoxNotchInsTop(): { extent: TBrickExtent; coords: TBrickCoords };
 }
 
 /**
@@ -376,4 +378,6 @@ export abstract class BrickModelBlock extends BrickModelInstruction implements I
     }
 
     public abstract get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords };
+
+    public abstract get bBoxNotchInsTop(): { extent: TBrickExtent; coords: TBrickCoords };
 }

From 25319dd0390a7e64d170204f2c3c112267a3f925 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 14 Jul 2023 14:18:36 +0530
Subject: [PATCH 22/48] docs(storybook): add bounding box for top ins notch to
 `BrickBlock` story

---
 .../src/brick/stories/components/BrickBlock.tsx        | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/modules/code-builder/src/brick/stories/components/BrickBlock.tsx b/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
index d084b2b5..d72903f3 100644
--- a/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
+++ b/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
@@ -90,6 +90,16 @@ export default function (props: {
         fill="green"
         opacity={0.8}
       />
+
+      {/* Top instruction notch bounding box */}
+      <rect
+        x={instance.bBoxNotchInsTop.coords.x}
+        y={instance.bBoxNotchInsTop.coords.y}
+        height={instance.bBoxNotchInsTop.extent.height}
+        width={instance.bBoxNotchInsTop.extent.width}
+        fill="green"
+        opacity={0.9}
+      />
     </>
   );
 

From d3afc52f8d17270b24dfb43123534b024ae8d999 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 14 Jul 2023 15:37:16 +0530
Subject: [PATCH 23/48] feat(bricks): change the model add `bBoxNotchInsBot`
 getter

Change the types and models of the bricks to add `bBoxNotchInsBot` getter to get the top instruction notch's extent and coords
---
 modules/code-builder/src/@types/brick.d.ts    | 25 +++++++++++++++++--
 .../src/brick/design0/BrickBlock.ts           |  4 +++
 modules/code-builder/src/brick/model.ts       |  4 +++
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/modules/code-builder/src/@types/brick.d.ts b/modules/code-builder/src/@types/brick.d.ts
index a4a00872..049e4261 100644
--- a/modules/code-builder/src/@types/brick.d.ts
+++ b/modules/code-builder/src/@types/brick.d.ts
@@ -123,6 +123,20 @@ export interface IBrickNotchInsTopState {
     };
 }
 
+/**
+ * @interface
+ * State properties associated with bricks that have bottom instruction notch.
+ */
+export interface IBrickNotchInsBotState {
+    /** Bounding box dimensions and coords of the bottom instruction notch */
+    get bBoxNotchInsBot(): {
+        /** Bounding box dimensions of the bottom instruction notch */
+        extent: TBrickExtent;
+        /** Co-ordinates of the bottom instruction notch relative to the brick */
+        coords: TBrickCoords;
+    };
+}
+
 /**
  * @interface
  * Type definition of a generic brick (any type).
@@ -203,7 +217,10 @@ export interface IBrickExpression
  * Type definition of a statement brick.
  */
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface IBrickStatement extends IBrickInstruction, IBrickNotchInsTopState {
+export interface IBrickStatement
+    extends IBrickInstruction,
+        IBrickNotchInsTopState,
+        IBrickNotchInsBotState {
     // reserving spot for future-proofing
 }
 
@@ -211,7 +228,11 @@ export interface IBrickStatement extends IBrickInstruction, IBrickNotchInsTopSta
  * @interface
  * Type definition of a block brick.
  */
-export interface IBrickBlock extends IBrickInstruction, IBrickNotchState, IBrickNotchInsTopState {
+export interface IBrickBlock
+    extends IBrickInstruction,
+        IBrickNotchState,
+        IBrickNotchInsTopState,
+        IBrickNotchInsBotState {
     // state
     /** combined bounding box of the instructions nested within the brick */
     get nestExtent(): TBrickExtent;
diff --git a/modules/code-builder/src/brick/design0/BrickBlock.ts b/modules/code-builder/src/brick/design0/BrickBlock.ts
index 6f189c74..4f1421a0 100644
--- a/modules/code-builder/src/brick/design0/BrickBlock.ts
+++ b/modules/code-builder/src/brick/design0/BrickBlock.ts
@@ -78,4 +78,8 @@ export default class BrickBlock extends BrickModelBlock {
     public get bBoxNotchInsTop(): { extent: TBrickExtent; coords: TBrickCoords } {
         return this._pathResults.bBoxNotchInsTop!;
     }
+
+    public get bBoxNotchInsBot(): { extent: TBrickExtent; coords: TBrickCoords } {
+        return this._pathResults.bBoxNotchInsBot!;
+    }
 }
diff --git a/modules/code-builder/src/brick/model.ts b/modules/code-builder/src/brick/model.ts
index 9c9e199d..e537cb18 100644
--- a/modules/code-builder/src/brick/model.ts
+++ b/modules/code-builder/src/brick/model.ts
@@ -342,6 +342,8 @@ export abstract class BrickModelStatement extends BrickModelInstruction implemen
     }
 
     public abstract get bBoxNotchInsTop(): { extent: TBrickExtent; coords: TBrickCoords };
+
+    public abstract get bBoxNotchInsBot(): { extent: TBrickExtent; coords: TBrickCoords };
 }
 
 /**
@@ -380,4 +382,6 @@ export abstract class BrickModelBlock extends BrickModelInstruction implements I
     public abstract get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords };
 
     public abstract get bBoxNotchInsTop(): { extent: TBrickExtent; coords: TBrickCoords };
+
+    public abstract get bBoxNotchInsBot(): { extent: TBrickExtent; coords: TBrickCoords };
 }

From e35807eebc56ea7af03965ff5f74bdfa02b8861b Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 14 Jul 2023 15:38:52 +0530
Subject: [PATCH 24/48] docs(storybook): add bounding box for bottom ins notch
 to `BrickBlock` story

---
 .../src/brick/stories/components/BrickBlock.tsx        | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/modules/code-builder/src/brick/stories/components/BrickBlock.tsx b/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
index d72903f3..dd6f201e 100644
--- a/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
+++ b/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
@@ -100,6 +100,16 @@ export default function (props: {
         fill="green"
         opacity={0.9}
       />
+
+      {/* Bottom instruction notch bounding box */}
+      <rect
+        x={instance.bBoxNotchInsBot.coords.x}
+        y={instance.bBoxNotchInsBot.coords.y}
+        height={instance.bBoxNotchInsBot.extent.height}
+        width={instance.bBoxNotchInsBot.extent.width}
+        fill="green"
+        opacity={0.9}
+      />
     </>
   );
 

From b63724dc83cab06bce51c21a966f51eb2c24c74f Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 14 Jul 2023 15:48:12 +0530
Subject: [PATCH 25/48] feat(bricks): change the model to add
 `bBoxNotchInsNestTop` getter

Change the types and models of the bricks to add `bBoxNotchInsNestTop` getter to get the top instruction notch's (inside nesting) extent and coords
---
 modules/code-builder/src/@types/brick.d.ts      | 17 ++++++++++++++++-
 .../src/brick/design0/BrickBlock.ts             |  4 ++++
 modules/code-builder/src/brick/model.ts         |  2 ++
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/modules/code-builder/src/@types/brick.d.ts b/modules/code-builder/src/@types/brick.d.ts
index 049e4261..2b62d934 100644
--- a/modules/code-builder/src/@types/brick.d.ts
+++ b/modules/code-builder/src/@types/brick.d.ts
@@ -137,6 +137,20 @@ export interface IBrickNotchInsBotState {
     };
 }
 
+/**
+ * @interface
+ * State properties associated with bricks that have nesting.
+ */
+export interface IBrickNotchInsNestTopState {
+    /** Bounding box dimensions and coords of the top instruction notch of the nesting */
+    get bBoxNotchInsNestTop(): {
+        /** Bounding box dimensions of the top instruction notch of the nesting */
+        extent: TBrickExtent;
+        /** Co-ordinates of the top instruction notch of the nesting relative to the brick */
+        coords: TBrickCoords;
+    };
+}
+
 /**
  * @interface
  * Type definition of a generic brick (any type).
@@ -232,7 +246,8 @@ export interface IBrickBlock
     extends IBrickInstruction,
         IBrickNotchState,
         IBrickNotchInsTopState,
-        IBrickNotchInsBotState {
+        IBrickNotchInsBotState,
+        IBrickNotchInsNestTopState {
     // state
     /** combined bounding box of the instructions nested within the brick */
     get nestExtent(): TBrickExtent;
diff --git a/modules/code-builder/src/brick/design0/BrickBlock.ts b/modules/code-builder/src/brick/design0/BrickBlock.ts
index 4f1421a0..5728391c 100644
--- a/modules/code-builder/src/brick/design0/BrickBlock.ts
+++ b/modules/code-builder/src/brick/design0/BrickBlock.ts
@@ -82,4 +82,8 @@ export default class BrickBlock extends BrickModelBlock {
     public get bBoxNotchInsBot(): { extent: TBrickExtent; coords: TBrickCoords } {
         return this._pathResults.bBoxNotchInsBot!;
     }
+
+    public get bBoxNotchInsNestTop(): { extent: TBrickExtent; coords: TBrickCoords } {
+        return this._pathResults.bBoxNotchInsNestTop!;
+    }
 }
diff --git a/modules/code-builder/src/brick/model.ts b/modules/code-builder/src/brick/model.ts
index e537cb18..54502dd2 100644
--- a/modules/code-builder/src/brick/model.ts
+++ b/modules/code-builder/src/brick/model.ts
@@ -384,4 +384,6 @@ export abstract class BrickModelBlock extends BrickModelInstruction implements I
     public abstract get bBoxNotchInsTop(): { extent: TBrickExtent; coords: TBrickCoords };
 
     public abstract get bBoxNotchInsBot(): { extent: TBrickExtent; coords: TBrickCoords };
+
+    public abstract get bBoxNotchInsNestTop(): { extent: TBrickExtent; coords: TBrickCoords };
 }

From 328e989e3ef709e29fc2468c527fb08708072de1 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 14 Jul 2023 15:50:27 +0530
Subject: [PATCH 26/48] docs(storybook): add bounding box for top ins notch
 inside nesting to `BrickBlock` story

---
 .../src/brick/stories/components/BrickBlock.tsx        | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/modules/code-builder/src/brick/stories/components/BrickBlock.tsx b/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
index dd6f201e..71d14dfb 100644
--- a/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
+++ b/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
@@ -110,6 +110,16 @@ export default function (props: {
         fill="green"
         opacity={0.9}
       />
+
+      {/* Top instruction notch inside nesting bounding box */}
+      <rect
+        x={instance.bBoxNotchInsNestTop.coords.x}
+        y={instance.bBoxNotchInsNestTop.coords.y}
+        height={instance.bBoxNotchInsNestTop.extent.height}
+        width={instance.bBoxNotchInsNestTop.extent.width}
+        fill="green"
+        opacity={0.9}
+      />
     </>
   );
 

From 8fcbb0fb1b516d547395c7e8c647fd4bd19f5a01 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 14 Jul 2023 16:25:06 +0530
Subject: [PATCH 27/48] fix(bricks): change `BrickData` model to adapt the new
 type

---
 .../src/brick/design0/BrickData.ts            | 29 ++++++++++---------
 .../brick/design0/components/BrickData.tsx    |  2 +-
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/BrickData.ts b/modules/code-builder/src/brick/design0/BrickData.ts
index 194c6069..3a36002c 100644
--- a/modules/code-builder/src/brick/design0/BrickData.ts
+++ b/modules/code-builder/src/brick/design0/BrickData.ts
@@ -1,4 +1,4 @@
-import type { TBrickArgDataType, TBrickColor, TBrickExtent } from '@/@types/brick';
+import type { TBrickArgDataType, TBrickColor, TBrickCoords, TBrickExtent } from '@/@types/brick';
 
 import { BrickModelData } from '../model';
 import { generatePath } from './utils/path';
@@ -10,6 +10,8 @@ import { generatePath } from './utils/path';
  * Final class that defines a data brick.
  */
 export default class BrickData extends BrickModelData {
+    readonly _pathResults: ReturnType<typeof generatePath>;
+
     constructor(params: {
         // intrinsic
         name: string;
@@ -26,16 +28,7 @@ export default class BrickData extends BrickModelData {
         scale: number;
     }) {
         super(params);
-    }
-
-    public get extent(): TBrickExtent {
-        return { width: 0, height: 0 };
-    }
-
-    public get SVGpaths(): string[] {
-        let result: string[] = [];
-
-        const path = generatePath({
+        this._pathResults = generatePath({
             hasNest: false,
             hasNotchArg: true,
             hasNotchInsTop: false,
@@ -43,10 +36,18 @@ export default class BrickData extends BrickModelData {
             scale: this._scale,
             innerLengthX: 100,
             argHeights: [],
-        }).path;
+        });
+    }
 
-        result.push(path);
+    public get SVGpath(): string {
+        return this._pathResults.path;
+    }
+
+    public get bBoxBrick(): { extent: TBrickExtent; coords: TBrickCoords } {
+        return this._pathResults.bBoxBrick;
+    }
 
-        return result;
+    public get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords } {
+        return this._pathResults.bBoxNotchArg!;
     }
 }
diff --git a/modules/code-builder/src/brick/design0/components/BrickData.tsx b/modules/code-builder/src/brick/design0/components/BrickData.tsx
index 8dc866e4..ada389b3 100644
--- a/modules/code-builder/src/brick/design0/components/BrickData.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickData.tsx
@@ -6,7 +6,7 @@ export default function (props: { instance: IBrickData }): JSX.Element {
   return (
     <g transform={`scale(${instance.scale})`}>
       <path
-        d={instance.SVGpaths[0]}
+        d={instance.SVGpath}
         style={{
           fill: instance.colorBg as string,
           fillOpacity: 1,

From 8012d807aaf81c54b18291baabe54d82febac680 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 14 Jul 2023 16:32:42 +0530
Subject: [PATCH 28/48] docs(storybook): add notch visualization to the
 `BrickData` stories

---
 .../brick/design0/components/BrickData.tsx    |  7 +++-
 .../brick/stories/components/BrickBlock.tsx   |  4 +--
 .../brick/stories/components/BrickData.tsx    | 32 ++++++++++++++++---
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/components/BrickData.tsx b/modules/code-builder/src/brick/design0/components/BrickData.tsx
index ada389b3..6400d66d 100644
--- a/modules/code-builder/src/brick/design0/components/BrickData.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickData.tsx
@@ -1,6 +1,10 @@
+import type { JSX } from 'react';
 import type { IBrickData } from '@/@types/brick';
 
-export default function (props: { instance: IBrickData }): JSX.Element {
+export default function (props: {
+  instance: IBrickData;
+  visualIndicators?: JSX.Element;
+}): JSX.Element {
   const { instance } = props;
 
   return (
@@ -16,6 +20,7 @@ export default function (props: { instance: IBrickData }): JSX.Element {
           strokeOpacity: 1,
         }}
       />
+      {props.visualIndicators}
     </g>
   );
 }
diff --git a/modules/code-builder/src/brick/stories/components/BrickBlock.tsx b/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
index 71d14dfb..81c656a1 100644
--- a/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
+++ b/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
@@ -1,6 +1,6 @@
-import type { IBrickBlock, TBrickArgDataType, TBrickColor } from '@/@types/brick';
-
 import BrickWrapper from './BrickWrapper';
+import type { JSX } from 'react';
+import type { IBrickBlock, TBrickArgDataType, TBrickColor } from '@/@types/brick';
 
 // -------------------------------------------------------------------------------------------------
 
diff --git a/modules/code-builder/src/brick/stories/components/BrickData.tsx b/modules/code-builder/src/brick/stories/components/BrickData.tsx
index c8d4f7b4..ef7d88b3 100644
--- a/modules/code-builder/src/brick/stories/components/BrickData.tsx
+++ b/modules/code-builder/src/brick/stories/components/BrickData.tsx
@@ -1,11 +1,11 @@
-import type { IBrickData, TBrickArgDataType, TBrickColor } from '@/@types/brick';
-
 import BrickWrapper from './BrickWrapper';
+import type { JSX } from 'react';
+import type { IBrickData, TBrickArgDataType, TBrickColor } from '@/@types/brick';
 
 // -------------------------------------------------------------------------------------------------
 
 export default function (props: {
-  Component: (props: { instance: IBrickData }) => JSX.Element;
+  Component: (props: { instance: IBrickData; visualIndicators?: JSX.Element }) => JSX.Element;
   prototype: new (params: {
     name: string;
     label: string;
@@ -39,9 +39,33 @@ export default function (props: {
     name: '',
   });
 
+  const VisualIndicators = () => (
+    <>
+      {/* Overall Bounding Box of the Brick */}
+      {/* <rect
+        x={instance.bBoxBrick.coords.x}
+        y={instance.bBoxBrick.coords.y}
+        height={instance.bBoxBrick.extent.height}
+        width={instance.bBoxBrick.extent.width}
+        fill="green"
+        opacity={0.2}
+      /> */}
+
+      {/* Left notch bounding box */}
+      <rect
+        x={instance.bBoxNotchArg.coords.x}
+        y={instance.bBoxNotchArg.coords.y}
+        height={instance.bBoxNotchArg.extent.height}
+        width={instance.bBoxNotchArg.extent.width}
+        fill="green"
+        opacity={0.8}
+      />
+    </>
+  );
+
   return (
     <BrickWrapper>
-      <Component instance={instance} />
+      <Component instance={instance} visualIndicators={<VisualIndicators />} />
     </BrickWrapper>
   );
 }

From d10d1b2216af0a11d22345ad9e839f74e668d788 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 14 Jul 2023 16:59:39 +0530
Subject: [PATCH 29/48] fix(bricks): change `BrickExpression` model to adapt
 the new type

---
 .../src/brick/design0/BrickExpression.ts      | 47 ++++++++++++-------
 .../design0/components/BrickExpression.tsx    |  2 +-
 2 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/BrickExpression.ts b/modules/code-builder/src/brick/design0/BrickExpression.ts
index a9fcee02..a45247a1 100644
--- a/modules/code-builder/src/brick/design0/BrickExpression.ts
+++ b/modules/code-builder/src/brick/design0/BrickExpression.ts
@@ -10,6 +10,8 @@ import { generatePath } from './utils/path';
  * Final class that defines a expression brick.
  */
 export default class BrickExpression extends BrickModelExpression {
+    readonly _pathResults: ReturnType<typeof generatePath>;
+
     constructor(params: {
         // intrinsic
         name: string;
@@ -31,32 +33,43 @@ export default class BrickExpression extends BrickModelExpression {
         scale: number;
     }) {
         super(params);
+        const argsKeys = Object.keys(this._args);
+        this._pathResults = generatePath({
+            hasNest: false,
+            hasNotchArg: true,
+            hasNotchInsTop: false,
+            hasNotchInsBot: false,
+            scale: this._scale,
+            innerLengthX: 100,
+            argHeights: Array.from({ length: argsKeys.length }, () => 17),
+        });
     }
 
-    public get extent(): TBrickExtent {
-        return { width: 0, height: 0 };
+    public get SVGpath(): string {
+        return this._pathResults.path;
     }
 
-    public get argsCoords(): Record<string, TBrickCoords> {
-        return {};
+    public get bBoxBrick(): { extent: TBrickExtent; coords: TBrickCoords } {
+        return this._pathResults.bBoxBrick;
     }
 
-    public get SVGpaths(): string[] {
-        const argsLength = Object.keys(this._args).length;
-        let result: string[] = [];
+    public get bBoxArgs(): Record<string, { extent: TBrickExtent; coords: TBrickCoords }> {
+        const argsKeys = Object.keys(this._args);
+        const result: Record<string, { extent: TBrickExtent; coords: TBrickCoords }> = {};
 
-        const path = generatePath({
-            hasNest: false,
-            hasNotchArg: true,
-            hasNotchInsTop: false,
-            hasNotchInsBot: false,
-            scale: this._scale,
-            innerLengthX: 100,
-            argHeights: Array.from({ length: argsLength }, () => 17),
-        }).path;
+        argsKeys.forEach((key, index) => {
+            result[key] = { extent: { width: 0, height: 0 }, coords: { x: 0, y: 0 } };
+            const argX = this._pathResults.bBoxArgs.coords[index].x;
+            const argY = this._pathResults.bBoxArgs.coords[index].y;
 
-        result.push(path);
+            result[key].extent = this._pathResults.bBoxArgs.extent;
+            result[key].coords = { x: argX, y: argY };
+        });
 
         return result;
     }
+
+    public get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords } {
+        return this._pathResults.bBoxNotchArg!;
+    }
 }
diff --git a/modules/code-builder/src/brick/design0/components/BrickExpression.tsx b/modules/code-builder/src/brick/design0/components/BrickExpression.tsx
index 01427ad4..39518c37 100644
--- a/modules/code-builder/src/brick/design0/components/BrickExpression.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickExpression.tsx
@@ -8,7 +8,7 @@ export default function (props: { instance: IBrickExpression }): JSX.Element {
   return (
     <g transform={`scale(${instance.scale})`}>
       <path
-        d={instance.SVGpaths[0]}
+        d={instance.SVGpath}
         style={{
           fill: instance.colorBg as string,
           fillOpacity: 1,

From 3ea7584f7579643cdd77031297271d730e450449 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 14 Jul 2023 17:03:06 +0530
Subject: [PATCH 30/48] docs(storybook): add notch and args visualization to
 the `BrickExpression` stories

---
 .../design0/components/BrickExpression.tsx    |  7 ++-
 .../stories/components/BrickExpression.tsx    | 49 +++++++++++++++++--
 2 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/components/BrickExpression.tsx b/modules/code-builder/src/brick/design0/components/BrickExpression.tsx
index 39518c37..3d143aa2 100644
--- a/modules/code-builder/src/brick/design0/components/BrickExpression.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickExpression.tsx
@@ -1,8 +1,12 @@
+import type { JSX } from 'react';
 import type { IBrickExpression } from '@/@types/brick';
 
 // -------------------------------------------------------------------------------------------------
 
-export default function (props: { instance: IBrickExpression }): JSX.Element {
+export default function (props: {
+  instance: IBrickExpression;
+  visualIndicators?: JSX.Element;
+}): JSX.Element {
   const { instance } = props;
 
   return (
@@ -18,6 +22,7 @@ export default function (props: { instance: IBrickExpression }): JSX.Element {
           strokeOpacity: 1,
         }}
       />
+      {props.visualIndicators}
     </g>
   );
 }
diff --git a/modules/code-builder/src/brick/stories/components/BrickExpression.tsx b/modules/code-builder/src/brick/stories/components/BrickExpression.tsx
index 396468f8..b9922842 100644
--- a/modules/code-builder/src/brick/stories/components/BrickExpression.tsx
+++ b/modules/code-builder/src/brick/stories/components/BrickExpression.tsx
@@ -1,11 +1,11 @@
-import type { IBrickExpression, TBrickArgDataType, TBrickColor } from '@/@types/brick';
-
 import BrickWrapper from './BrickWrapper';
+import type { JSX } from 'react';
+import type { IBrickExpression, TBrickArgDataType, TBrickColor } from '@/@types/brick';
 
 // -------------------------------------------------------------------------------------------------
 
 export default function (props: {
-  Component: (props: { instance: IBrickExpression }) => JSX.Element;
+  Component: (props: { instance: IBrickExpression; visualIndicators?: JSX.Element }) => JSX.Element;
   prototype: new (params: {
     name: string;
     label: string;
@@ -50,9 +50,50 @@ export default function (props: {
     name: '',
   });
 
+  const VisualIndicators = () => (
+    <>
+      {/* Overall Bounding Box of the Brick */}
+      {/* <rect
+        x={instance.bBoxBrick.coords.x}
+        y={instance.bBoxBrick.coords.y}
+        height={instance.bBoxBrick.extent.height}
+        width={instance.bBoxBrick.extent.width}
+        fill="green"
+        opacity={0.2}
+      /> */}
+
+      {/* Right args bounding box */}
+      {Object.keys(instance.bBoxArgs).map((name, i) => {
+        const arg = instance.bBoxArgs[name];
+
+        return (
+          <rect
+            key={i}
+            x={arg.coords.x}
+            y={arg.coords.y}
+            height={arg.extent.height}
+            width={arg.extent.width}
+            fill="green"
+            opacity={0.8}
+          />
+        );
+      })}
+
+      {/* Left notch bounding box */}
+      <rect
+        x={instance.bBoxNotchArg.coords.x}
+        y={instance.bBoxNotchArg.coords.y}
+        height={instance.bBoxNotchArg.extent.height}
+        width={instance.bBoxNotchArg.extent.width}
+        fill="green"
+        opacity={0.8}
+      />
+    </>
+  );
+
   return (
     <BrickWrapper>
-      <Component instance={instance} />
+      <Component instance={instance} visualIndicators={<VisualIndicators />} />
     </BrickWrapper>
   );
 }

From 5985d03cd65adbc64c0110b52c44544285320b6c Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 14 Jul 2023 17:11:18 +0530
Subject: [PATCH 31/48] fix(bricks): change `BrickStatement` model to adapt the
 new type

---
 .../src/brick/design0/BrickStatement.ts       | 51 ++++++++++++-------
 .../design0/components/BrickStatement.tsx     |  2 +-
 2 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/BrickStatement.ts b/modules/code-builder/src/brick/design0/BrickStatement.ts
index 100b6f41..43fba3a8 100644
--- a/modules/code-builder/src/brick/design0/BrickStatement.ts
+++ b/modules/code-builder/src/brick/design0/BrickStatement.ts
@@ -10,6 +10,8 @@ import { generatePath } from './utils/path';
  * Final class that defines a statement brick.
  */
 export default class BrickStatement extends BrickModelStatement {
+    readonly _pathResults: ReturnType<typeof generatePath>;
+
     constructor(params: {
         // intrinsic
         name: string;
@@ -32,32 +34,47 @@ export default class BrickStatement extends BrickModelStatement {
         connectBelow: boolean;
     }) {
         super(params);
+        const argsKeys = Object.keys(this._args);
+        this._pathResults = generatePath({
+            hasNest: false,
+            hasNotchArg: false,
+            hasNotchInsTop: true,
+            hasNotchInsBot: true,
+            scale: this._scale,
+            innerLengthX: 100,
+            argHeights: Array.from({ length: argsKeys.length }, () => 17),
+        });
     }
 
-    public get extent(): TBrickExtent {
-        return { width: 0, height: 0 };
+    public get SVGpath(): string {
+        return this._pathResults.path;
     }
 
-    public get argsCoords(): Record<string, TBrickCoords> {
-        return {};
+    public get bBoxBrick(): { extent: TBrickExtent; coords: TBrickCoords } {
+        return this._pathResults.bBoxBrick;
     }
 
-    public get SVGpaths(): string[] {
-        const argsLength = Object.keys(this._args).length;
-        let result: string[] = [];
+    public get bBoxArgs(): Record<string, { extent: TBrickExtent; coords: TBrickCoords }> {
+        const argsKeys = Object.keys(this._args);
+        const result: Record<string, { extent: TBrickExtent; coords: TBrickCoords }> = {};
 
-        const path = generatePath({
-            hasNest: false,
-            hasNotchArg: false,
-            hasNotchInsTop: true,
-            hasNotchInsBot: true,
-            scale: this._scale,
-            innerLengthX: 100,
-            argHeights: Array.from({ length: argsLength }, () => 17),
-        }).path;
+        argsKeys.forEach((key, index) => {
+            result[key] = { extent: { width: 0, height: 0 }, coords: { x: 0, y: 0 } };
+            const argX = this._pathResults.bBoxArgs.coords[index].x;
+            const argY = this._pathResults.bBoxArgs.coords[index].y;
 
-        result.push(path);
+            result[key].extent = this._pathResults.bBoxArgs.extent;
+            result[key].coords = { x: argX, y: argY };
+        });
 
         return result;
     }
+
+    public get bBoxNotchInsTop(): { extent: TBrickExtent; coords: TBrickCoords } {
+        return this._pathResults.bBoxNotchInsTop!;
+    }
+
+    public get bBoxNotchInsBot(): { extent: TBrickExtent; coords: TBrickCoords } {
+        return this._pathResults.bBoxNotchInsBot!;
+    }
 }
diff --git a/modules/code-builder/src/brick/design0/components/BrickStatement.tsx b/modules/code-builder/src/brick/design0/components/BrickStatement.tsx
index 1ab06f84..3ac3345f 100644
--- a/modules/code-builder/src/brick/design0/components/BrickStatement.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickStatement.tsx
@@ -8,7 +8,7 @@ export default function (props: { instance: IBrickStatement }): JSX.Element {
   return (
     <g transform={`scale(${instance.scale})`}>
       <path
-        d={instance.SVGpaths[0]}
+        d={instance.SVGpath}
         style={{
           fill: instance.colorBg as string,
           fillOpacity: 1,

From edcbc4c3396976476252a225f8c0f25ba4af4ec8 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 14 Jul 2023 17:16:45 +0530
Subject: [PATCH 32/48] docs(storybook): add notch and args visualization to
 the `BrickStatement` stories

---
 .../design0/components/BrickStatement.tsx     |  7 ++-
 .../stories/components/BrickStatement.tsx     | 59 +++++++++++++++++--
 2 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/components/BrickStatement.tsx b/modules/code-builder/src/brick/design0/components/BrickStatement.tsx
index 3ac3345f..dc6c3a7d 100644
--- a/modules/code-builder/src/brick/design0/components/BrickStatement.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickStatement.tsx
@@ -1,8 +1,12 @@
+import type { JSX } from 'react';
 import type { IBrickStatement } from '@/@types/brick';
 
 // -------------------------------------------------------------------------------------------------
 
-export default function (props: { instance: IBrickStatement }): JSX.Element {
+export default function (props: {
+  instance: IBrickStatement;
+  visualIndicators?: JSX.Element;
+}): JSX.Element {
   const { instance } = props;
 
   return (
@@ -18,6 +22,7 @@ export default function (props: { instance: IBrickStatement }): JSX.Element {
           strokeOpacity: 1,
         }}
       />
+      {props.visualIndicators}
     </g>
   );
 }
diff --git a/modules/code-builder/src/brick/stories/components/BrickStatement.tsx b/modules/code-builder/src/brick/stories/components/BrickStatement.tsx
index 0e53fff7..81ee9355 100644
--- a/modules/code-builder/src/brick/stories/components/BrickStatement.tsx
+++ b/modules/code-builder/src/brick/stories/components/BrickStatement.tsx
@@ -1,11 +1,11 @@
-import type { IBrickStatement, TBrickArgDataType, TBrickColor } from '@/@types/brick';
-
 import BrickWrapper from './BrickWrapper';
+import type { JSX } from 'react';
+import type { IBrickStatement, TBrickArgDataType, TBrickColor } from '@/@types/brick';
 
 // -------------------------------------------------------------------------------------------------
 
 export default function (props: {
-  Component: (props: { instance: IBrickStatement }) => JSX.Element;
+  Component: (props: { instance: IBrickStatement; visualIndicators?: JSX.Element }) => JSX.Element;
   prototype: new (params: {
     name: string;
     label: string;
@@ -52,9 +52,60 @@ export default function (props: {
     name: '',
   });
 
+  const VisualIndicators = () => (
+    <>
+      {/* Overall Bounding Box of the Brick */}
+      {/* <rect
+        x={instance.bBoxBrick.coords.x}
+        y={instance.bBoxBrick.coords.y}
+        height={instance.bBoxBrick.extent.height}
+        width={instance.bBoxBrick.extent.width}
+        fill="green"
+        opacity={0.2}
+      /> */}
+
+      {/* Right args bounding box */}
+      {Object.keys(instance.bBoxArgs).map((name, i) => {
+        const arg = instance.bBoxArgs[name];
+
+        return (
+          <rect
+            key={i}
+            x={arg.coords.x}
+            y={arg.coords.y}
+            height={arg.extent.height}
+            width={arg.extent.width}
+            fill="green"
+            opacity={0.8}
+          />
+        );
+      })}
+
+      {/* Top instruction notch bounding box */}
+      <rect
+        x={instance.bBoxNotchInsTop.coords.x}
+        y={instance.bBoxNotchInsTop.coords.y}
+        height={instance.bBoxNotchInsTop.extent.height}
+        width={instance.bBoxNotchInsTop.extent.width}
+        fill="green"
+        opacity={0.9}
+      />
+
+      {/* Bottom instruction notch bounding box */}
+      <rect
+        x={instance.bBoxNotchInsBot.coords.x}
+        y={instance.bBoxNotchInsBot.coords.y}
+        height={instance.bBoxNotchInsBot.extent.height}
+        width={instance.bBoxNotchInsBot.extent.width}
+        fill="green"
+        opacity={0.9}
+      />
+    </>
+  );
+
   return (
     <BrickWrapper>
-      <Component instance={instance} />
+      <Component instance={instance} visualIndicators={<VisualIndicators />} />
     </BrickWrapper>
   );
 }

From 0234f4850ccfc0e0a1fe26b0056ae483945aa79f Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 14 Jul 2023 17:39:58 +0530
Subject: [PATCH 33/48] fix(bricks-path): coords(x) calculation for
 `_getBBoxArgs`

---
 modules/code-builder/src/brick/design0/utils/path.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/modules/code-builder/src/brick/design0/utils/path.ts b/modules/code-builder/src/brick/design0/utils/path.ts
index 57d195bc..f8b3b276 100644
--- a/modules/code-builder/src/brick/design0/utils/path.ts
+++ b/modules/code-builder/src/brick/design0/utils/path.ts
@@ -480,7 +480,12 @@ function _getBBoxArgs(): {
     extent: { width: number; height: number };
     coords: { x: number; y: number }[];
 } {
-    const offsetX = strokeWidth + notchArgLengthX + _innerLengthX - notchArgLengthX + strokeWidth;
+    const offsetX =
+        strokeWidth +
+        (_hasNotchArg ? notchArgLengthX : 0) +
+        _innerLengthX -
+        notchArgLengthX +
+        strokeWidth;
     const firstOffsetY = strokeWidth + cornerRadius + 1 + strokeWidth;
     const argSectionLengthYMin = cornerRadius * 2 + notchArgLengthY;
     const argsLength = _argsLengthY.map((sectionLengthY) =>

From 8a7e7d78d37d7dbb265cea0de4f85c19dad98c49 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 14 Jul 2023 17:42:27 +0530
Subject: [PATCH 34/48] docs(storybook): show overall bounding box of the
 bricks

---
 .../src/brick/stories/components/BrickBlock.tsx           | 8 ++++----
 .../src/brick/stories/components/BrickData.tsx            | 8 ++++----
 .../src/brick/stories/components/BrickExpression.tsx      | 8 ++++----
 .../src/brick/stories/components/BrickStatement.tsx       | 8 ++++----
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/modules/code-builder/src/brick/stories/components/BrickBlock.tsx b/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
index 81c656a1..c66122e8 100644
--- a/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
+++ b/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
@@ -55,14 +55,14 @@ export default function (props: {
   const VisualIndicators = () => (
     <>
       {/* Overall Bounding Box of the Brick */}
-      {/* <rect
+      <rect
         x={instance.bBoxBrick.coords.x}
         y={instance.bBoxBrick.coords.y}
         height={instance.bBoxBrick.extent.height}
         width={instance.bBoxBrick.extent.width}
-        fill="green"
-        opacity={0.2}
-      /> */}
+        fill="black"
+        opacity={0.25}
+      />
 
       {/* Right args bounding box */}
       {Object.keys(instance.bBoxArgs).map((name, i) => {
diff --git a/modules/code-builder/src/brick/stories/components/BrickData.tsx b/modules/code-builder/src/brick/stories/components/BrickData.tsx
index ef7d88b3..82ac4b8b 100644
--- a/modules/code-builder/src/brick/stories/components/BrickData.tsx
+++ b/modules/code-builder/src/brick/stories/components/BrickData.tsx
@@ -42,14 +42,14 @@ export default function (props: {
   const VisualIndicators = () => (
     <>
       {/* Overall Bounding Box of the Brick */}
-      {/* <rect
+      <rect
         x={instance.bBoxBrick.coords.x}
         y={instance.bBoxBrick.coords.y}
         height={instance.bBoxBrick.extent.height}
         width={instance.bBoxBrick.extent.width}
-        fill="green"
-        opacity={0.2}
-      /> */}
+        fill="black"
+        opacity={0.25}
+      />
 
       {/* Left notch bounding box */}
       <rect
diff --git a/modules/code-builder/src/brick/stories/components/BrickExpression.tsx b/modules/code-builder/src/brick/stories/components/BrickExpression.tsx
index b9922842..6f7b4e8c 100644
--- a/modules/code-builder/src/brick/stories/components/BrickExpression.tsx
+++ b/modules/code-builder/src/brick/stories/components/BrickExpression.tsx
@@ -53,14 +53,14 @@ export default function (props: {
   const VisualIndicators = () => (
     <>
       {/* Overall Bounding Box of the Brick */}
-      {/* <rect
+      <rect
         x={instance.bBoxBrick.coords.x}
         y={instance.bBoxBrick.coords.y}
         height={instance.bBoxBrick.extent.height}
         width={instance.bBoxBrick.extent.width}
-        fill="green"
-        opacity={0.2}
-      /> */}
+        fill="black"
+        opacity={0.25}
+      />
 
       {/* Right args bounding box */}
       {Object.keys(instance.bBoxArgs).map((name, i) => {
diff --git a/modules/code-builder/src/brick/stories/components/BrickStatement.tsx b/modules/code-builder/src/brick/stories/components/BrickStatement.tsx
index 81ee9355..26accd6e 100644
--- a/modules/code-builder/src/brick/stories/components/BrickStatement.tsx
+++ b/modules/code-builder/src/brick/stories/components/BrickStatement.tsx
@@ -55,14 +55,14 @@ export default function (props: {
   const VisualIndicators = () => (
     <>
       {/* Overall Bounding Box of the Brick */}
-      {/* <rect
+      <rect
         x={instance.bBoxBrick.coords.x}
         y={instance.bBoxBrick.coords.y}
         height={instance.bBoxBrick.extent.height}
         width={instance.bBoxBrick.extent.width}
-        fill="green"
-        opacity={0.2}
-      /> */}
+        fill="black"
+        opacity={0.25}
+      />
 
       {/* Right args bounding box */}
       {Object.keys(instance.bBoxArgs).map((name, i) => {

From 5260a5da36a16cb35ea0f19877c3ed99ec586644 Mon Sep 17 00:00:00 2001
From: Anindya Kundu <anindyaak007@gmail.com>
Date: Sun, 16 Jul 2023 20:29:00 +0530
Subject: [PATCH 35/48] refactor(code-builder): [brick] coalesce notch
 interfaces

---
 modules/code-builder/src/@types/brick.d.ts    | 108 ++++++------------
 .../src/brick/design0/BrickBlock.ts           |   2 +-
 modules/code-builder/src/brick/model.ts       |  20 +---
 .../brick/stories/components/BrickBlock.tsx   |  10 --
 4 files changed, 43 insertions(+), 97 deletions(-)

diff --git a/modules/code-builder/src/@types/brick.d.ts b/modules/code-builder/src/@types/brick.d.ts
index 2b62d934..7a9e7e5b 100644
--- a/modules/code-builder/src/@types/brick.d.ts
+++ b/modules/code-builder/src/@types/brick.d.ts
@@ -95,62 +95,6 @@ export interface IBrickArgsState {
     >;
 }
 
-/**
- * @interface
- * State properties associated with bricks that have left notch.
- */
-export interface IBrickNotchState {
-    /** Bounding box dimensions and coords of the left notch */
-    get bBoxNotchArg(): {
-        /** Bounding box dimensions of the left notch */
-        extent: TBrickExtent;
-        /** Co-ordinates of the left notch relative to the brick */
-        coords: TBrickCoords;
-    };
-}
-
-/**
- * @interface
- * State properties associated with bricks that have top instruction notch.
- */
-export interface IBrickNotchInsTopState {
-    /** Bounding box dimensions and coords of the top instruction notch */
-    get bBoxNotchInsTop(): {
-        /** Bounding box dimensions of the top instruction notch */
-        extent: TBrickExtent;
-        /** Co-ordinates of the top instruction notch relative to the brick */
-        coords: TBrickCoords;
-    };
-}
-
-/**
- * @interface
- * State properties associated with bricks that have bottom instruction notch.
- */
-export interface IBrickNotchInsBotState {
-    /** Bounding box dimensions and coords of the bottom instruction notch */
-    get bBoxNotchInsBot(): {
-        /** Bounding box dimensions of the bottom instruction notch */
-        extent: TBrickExtent;
-        /** Co-ordinates of the bottom instruction notch relative to the brick */
-        coords: TBrickCoords;
-    };
-}
-
-/**
- * @interface
- * State properties associated with bricks that have nesting.
- */
-export interface IBrickNotchInsNestTopState {
-    /** Bounding box dimensions and coords of the top instruction notch of the nesting */
-    get bBoxNotchInsNestTop(): {
-        /** Bounding box dimensions of the top instruction notch of the nesting */
-        extent: TBrickExtent;
-        /** Co-ordinates of the top instruction notch of the nesting relative to the brick */
-        coords: TBrickCoords;
-    };
-}
-
 /**
  * @interface
  * Type definition of a generic brick (any type).
@@ -186,6 +130,14 @@ export interface IBrick extends IBrickStyle {
 export interface IBrickArgument extends IBrick {
     /** data type returned by an argument brick */
     get dataType(): TBrickArgDataType;
+
+    /** Bounding box dimensions and coords of the left notch */
+    get bBoxNotchArg(): {
+        /** Bounding box dimensions of the left notch */
+        extent: TBrickExtent;
+        /** Co-ordinates of the left notch relative to the brick */
+        coords: TBrickCoords;
+    };
 }
 
 /**
@@ -198,13 +150,29 @@ export interface IBrickInstruction extends IBrick, IBrickArgs, IBrickArgsState {
     get connectAbove(): boolean;
     /** is connection allowed below the brick */
     get connectBelow(): boolean;
+
+    /** Bounding box dimensions and coords of the top instruction notch */
+    get bBoxNotchInsTop(): {
+        /** Bounding box dimensions of the top instruction notch */
+        extent: TBrickExtent;
+        /** Co-ordinates of the top instruction notch relative to the brick */
+        coords: TBrickCoords;
+    };
+
+    /** Bounding box dimensions and coords of the bottom instruction notch */
+    get bBoxNotchInsBot(): {
+        /** Bounding box dimensions of the bottom instruction notch */
+        extent: TBrickExtent;
+        /** Co-ordinates of the bottom instruction notch relative to the brick */
+        coords: TBrickCoords;
+    };
 }
 
 /**
  * @interface
  * Type definition of a data brick.
  */
-export interface IBrickData extends IBrickArgument, IBrickNotchState {
+export interface IBrickData extends IBrickArgument {
     /** whether brick has a static label or value can be updated */
     get dynamic(): boolean;
     /** (if dynamic) current value of the brick */
@@ -218,11 +186,7 @@ export interface IBrickData extends IBrickArgument, IBrickNotchState {
  * Type definition of an argument brick.
  */
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface IBrickExpression
-    extends IBrickArgument,
-        IBrickArgs,
-        IBrickArgsState,
-        IBrickNotchState {
+export interface IBrickExpression extends IBrickArgument, IBrickArgs, IBrickArgsState {
     // reserving spot for future-proofing
 }
 
@@ -231,10 +195,7 @@ export interface IBrickExpression
  * Type definition of a statement brick.
  */
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface IBrickStatement
-    extends IBrickInstruction,
-        IBrickNotchInsTopState,
-        IBrickNotchInsBotState {
+export interface IBrickStatement extends IBrickInstruction {
     // reserving spot for future-proofing
 }
 
@@ -242,15 +203,18 @@ export interface IBrickStatement
  * @interface
  * Type definition of a block brick.
  */
-export interface IBrickBlock
-    extends IBrickInstruction,
-        IBrickNotchState,
-        IBrickNotchInsTopState,
-        IBrickNotchInsBotState,
-        IBrickNotchInsNestTopState {
+export interface IBrickBlock extends IBrickInstruction, IBrickNotchInsNestTopState {
     // state
     /** combined bounding box of the instructions nested within the brick */
     get nestExtent(): TBrickExtent;
     /** whether brick nesting is hidden */
     collapsed: boolean;
+
+    /** Bounding box dimensions and coords of the top instruction notch of the nesting */
+    get bBoxNotchInsNestTop(): {
+        /** Bounding box dimensions of the top instruction notch of the nesting */
+        extent: TBrickExtent;
+        /** Co-ordinates of the top instruction notch of the nesting relative to the brick */
+        coords: TBrickCoords;
+    };
 }
diff --git a/modules/code-builder/src/brick/design0/BrickBlock.ts b/modules/code-builder/src/brick/design0/BrickBlock.ts
index 5728391c..9c555d48 100644
--- a/modules/code-builder/src/brick/design0/BrickBlock.ts
+++ b/modules/code-builder/src/brick/design0/BrickBlock.ts
@@ -37,7 +37,7 @@ export default class BrickBlock extends BrickModelBlock {
         const argsKeys = Object.keys(this._args);
         this._pathResults = generatePath({
             hasNest: true,
-            hasNotchArg: true,
+            hasNotchArg: false,
             hasNotchInsTop: this._connectAbove,
             hasNotchInsBot: this._connectBelow,
             scale: this._scale,
diff --git a/modules/code-builder/src/brick/model.ts b/modules/code-builder/src/brick/model.ts
index 54502dd2..cfadd568 100644
--- a/modules/code-builder/src/brick/model.ts
+++ b/modules/code-builder/src/brick/model.ts
@@ -135,6 +135,8 @@ abstract class BrickModelArgument extends BrickModel implements IBrickArgument {
     public get dataType(): TBrickArgDataType {
         return this._dataType;
     }
+
+    public abstract get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords };
 }
 
 /**
@@ -203,6 +205,10 @@ abstract class BrickModelInstruction extends BrickModel implements IBrickInstruc
         return this._connectBelow;
     }
 
+    public abstract get bBoxNotchInsTop(): { extent: TBrickExtent; coords: TBrickCoords };
+
+    public abstract get bBoxNotchInsBot(): { extent: TBrickExtent; coords: TBrickCoords };
+
     public abstract get bBoxArgs(): Record<string, { extent: TBrickExtent; coords: TBrickCoords }>;
 }
 
@@ -251,8 +257,6 @@ export abstract class BrickModelData extends BrickModelArgument implements IBric
     public get input(): 'boolean' | 'number' | 'string' | 'options' | undefined {
         return this._input;
     }
-
-    public abstract get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords };
 }
 
 /**
@@ -307,8 +311,6 @@ export abstract class BrickModelExpression extends BrickModelArgument implements
     }
 
     public abstract get bBoxArgs(): Record<string, { extent: TBrickExtent; coords: TBrickCoords }>;
-
-    public abstract get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords };
 }
 
 /**
@@ -340,10 +342,6 @@ export abstract class BrickModelStatement extends BrickModelInstruction implemen
     }) {
         super({ ...params, type: 'statement' });
     }
-
-    public abstract get bBoxNotchInsTop(): { extent: TBrickExtent; coords: TBrickCoords };
-
-    public abstract get bBoxNotchInsBot(): { extent: TBrickExtent; coords: TBrickCoords };
 }
 
 /**
@@ -379,11 +377,5 @@ export abstract class BrickModelBlock extends BrickModelInstruction implements I
         super({ ...params, type: 'block' });
     }
 
-    public abstract get bBoxNotchArg(): { extent: TBrickExtent; coords: TBrickCoords };
-
-    public abstract get bBoxNotchInsTop(): { extent: TBrickExtent; coords: TBrickCoords };
-
-    public abstract get bBoxNotchInsBot(): { extent: TBrickExtent; coords: TBrickCoords };
-
     public abstract get bBoxNotchInsNestTop(): { extent: TBrickExtent; coords: TBrickCoords };
 }
diff --git a/modules/code-builder/src/brick/stories/components/BrickBlock.tsx b/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
index c66122e8..c93a3526 100644
--- a/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
+++ b/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
@@ -81,16 +81,6 @@ export default function (props: {
         );
       })}
 
-      {/* Left notch bounding box */}
-      <rect
-        x={instance.bBoxNotchArg.coords.x}
-        y={instance.bBoxNotchArg.coords.y}
-        height={instance.bBoxNotchArg.extent.height}
-        width={instance.bBoxNotchArg.extent.width}
-        fill="green"
-        opacity={0.8}
-      />
-
       {/* Top instruction notch bounding box */}
       <rect
         x={instance.bBoxNotchInsTop.coords.x}

From af59fcc30611fa98b827d0dddb02399415d711b6 Mon Sep 17 00:00:00 2001
From: Anindya Kundu <anindyaak007@gmail.com>
Date: Sun, 16 Jul 2023 20:29:59 +0530
Subject: [PATCH 36/48] refactor(code-builder): [brick] draw visual indicators
 only in storybook

---
 .../src/brick/design0/components/BrickBlock.tsx             | 6 +-----
 .../code-builder/src/brick/design0/components/BrickData.tsx | 6 +-----
 .../src/brick/design0/components/BrickExpression.tsx        | 6 +-----
 .../src/brick/design0/components/BrickStatement.tsx         | 6 +-----
 .../src/brick/stories/components/BrickBlock.tsx             | 3 ++-
 .../code-builder/src/brick/stories/components/BrickData.tsx | 3 ++-
 .../src/brick/stories/components/BrickExpression.tsx        | 3 ++-
 .../src/brick/stories/components/BrickStatement.tsx         | 3 ++-
 8 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/components/BrickBlock.tsx b/modules/code-builder/src/brick/design0/components/BrickBlock.tsx
index 78e103a3..7dd5ed16 100644
--- a/modules/code-builder/src/brick/design0/components/BrickBlock.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickBlock.tsx
@@ -3,10 +3,7 @@ import type { IBrickBlock } from '@/@types/brick';
 
 // -------------------------------------------------------------------------------------------------
 
-export default function (props: {
-  instance: IBrickBlock;
-  visualIndicators?: JSX.Element;
-}): JSX.Element {
+export default function (props: { instance: IBrickBlock }): JSX.Element {
   const { instance } = props;
 
   return (
@@ -22,7 +19,6 @@ export default function (props: {
           strokeOpacity: 1,
         }}
       />
-      {props.visualIndicators}
     </g>
   );
 }
diff --git a/modules/code-builder/src/brick/design0/components/BrickData.tsx b/modules/code-builder/src/brick/design0/components/BrickData.tsx
index 6400d66d..0623b736 100644
--- a/modules/code-builder/src/brick/design0/components/BrickData.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickData.tsx
@@ -1,10 +1,7 @@
 import type { JSX } from 'react';
 import type { IBrickData } from '@/@types/brick';
 
-export default function (props: {
-  instance: IBrickData;
-  visualIndicators?: JSX.Element;
-}): JSX.Element {
+export default function (props: { instance: IBrickData }): JSX.Element {
   const { instance } = props;
 
   return (
@@ -20,7 +17,6 @@ export default function (props: {
           strokeOpacity: 1,
         }}
       />
-      {props.visualIndicators}
     </g>
   );
 }
diff --git a/modules/code-builder/src/brick/design0/components/BrickExpression.tsx b/modules/code-builder/src/brick/design0/components/BrickExpression.tsx
index 3d143aa2..16183bf3 100644
--- a/modules/code-builder/src/brick/design0/components/BrickExpression.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickExpression.tsx
@@ -3,10 +3,7 @@ import type { IBrickExpression } from '@/@types/brick';
 
 // -------------------------------------------------------------------------------------------------
 
-export default function (props: {
-  instance: IBrickExpression;
-  visualIndicators?: JSX.Element;
-}): JSX.Element {
+export default function (props: { instance: IBrickExpression }): JSX.Element {
   const { instance } = props;
 
   return (
@@ -22,7 +19,6 @@ export default function (props: {
           strokeOpacity: 1,
         }}
       />
-      {props.visualIndicators}
     </g>
   );
 }
diff --git a/modules/code-builder/src/brick/design0/components/BrickStatement.tsx b/modules/code-builder/src/brick/design0/components/BrickStatement.tsx
index dc6c3a7d..b53983b5 100644
--- a/modules/code-builder/src/brick/design0/components/BrickStatement.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickStatement.tsx
@@ -3,10 +3,7 @@ import type { IBrickStatement } from '@/@types/brick';
 
 // -------------------------------------------------------------------------------------------------
 
-export default function (props: {
-  instance: IBrickStatement;
-  visualIndicators?: JSX.Element;
-}): JSX.Element {
+export default function (props: { instance: IBrickStatement }): JSX.Element {
   const { instance } = props;
 
   return (
@@ -22,7 +19,6 @@ export default function (props: {
           strokeOpacity: 1,
         }}
       />
-      {props.visualIndicators}
     </g>
   );
 }
diff --git a/modules/code-builder/src/brick/stories/components/BrickBlock.tsx b/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
index c93a3526..516bb38e 100644
--- a/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
+++ b/modules/code-builder/src/brick/stories/components/BrickBlock.tsx
@@ -115,7 +115,8 @@ export default function (props: {
 
   return (
     <BrickWrapper>
-      <Component instance={instance} visualIndicators={<VisualIndicators />} />
+      <Component instance={instance} />
+      <VisualIndicators />
     </BrickWrapper>
   );
 }
diff --git a/modules/code-builder/src/brick/stories/components/BrickData.tsx b/modules/code-builder/src/brick/stories/components/BrickData.tsx
index 82ac4b8b..217aa774 100644
--- a/modules/code-builder/src/brick/stories/components/BrickData.tsx
+++ b/modules/code-builder/src/brick/stories/components/BrickData.tsx
@@ -65,7 +65,8 @@ export default function (props: {
 
   return (
     <BrickWrapper>
-      <Component instance={instance} visualIndicators={<VisualIndicators />} />
+      <Component instance={instance} />
+      <VisualIndicators />
     </BrickWrapper>
   );
 }
diff --git a/modules/code-builder/src/brick/stories/components/BrickExpression.tsx b/modules/code-builder/src/brick/stories/components/BrickExpression.tsx
index 6f7b4e8c..8d1a1b69 100644
--- a/modules/code-builder/src/brick/stories/components/BrickExpression.tsx
+++ b/modules/code-builder/src/brick/stories/components/BrickExpression.tsx
@@ -93,7 +93,8 @@ export default function (props: {
 
   return (
     <BrickWrapper>
-      <Component instance={instance} visualIndicators={<VisualIndicators />} />
+      <Component instance={instance} />
+      <VisualIndicators />
     </BrickWrapper>
   );
 }
diff --git a/modules/code-builder/src/brick/stories/components/BrickStatement.tsx b/modules/code-builder/src/brick/stories/components/BrickStatement.tsx
index 26accd6e..b68c3969 100644
--- a/modules/code-builder/src/brick/stories/components/BrickStatement.tsx
+++ b/modules/code-builder/src/brick/stories/components/BrickStatement.tsx
@@ -105,7 +105,8 @@ export default function (props: {
 
   return (
     <BrickWrapper>
-      <Component instance={instance} visualIndicators={<VisualIndicators />} />
+      <Component instance={instance} />
+      <VisualIndicators />
     </BrickWrapper>
   );
 }

From dda9e98101238c5f897539b65205268cb3ceb7d0 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Mon, 17 Jul 2023 13:01:33 +0530
Subject: [PATCH 37/48] chore(code-builder): remove DEV mode logs from
 `path.ts`

---
 modules/code-builder/src/brick/design0/utils/path.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/code-builder/src/brick/design0/utils/path.ts b/modules/code-builder/src/brick/design0/utils/path.ts
index f8b3b276..56bdc06e 100644
--- a/modules/code-builder/src/brick/design0/utils/path.ts
+++ b/modules/code-builder/src/brick/design0/utils/path.ts
@@ -599,7 +599,7 @@ export function generatePath(
         bBoxArgs: _getBBoxArgs(),
     };
 
-    if (print || import.meta.env.DEV) console.log(results);
+    if (print) console.log(results);
 
     return results;
 }

From 778180bdc3efafa3e198fd168147ced2dff1205e Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Mon, 17 Jul 2023 14:06:42 +0530
Subject: [PATCH 38/48] test(code-builder): add missing todo tests for
 `path.spec.ts`

---
 .../src/brick/design0/utils/spec/path.spec.ts | 150 +++++++++++++++++-
 1 file changed, 142 insertions(+), 8 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/utils/spec/path.spec.ts b/modules/code-builder/src/brick/design0/utils/spec/path.spec.ts
index 09322eaf..044ed24e 100644
--- a/modules/code-builder/src/brick/design0/utils/spec/path.spec.ts
+++ b/modules/code-builder/src/brick/design0/utils/spec/path.spec.ts
@@ -376,20 +376,154 @@ describe('Code Builder: Brick > Design 0 > Utility: Path', () => {
     });
 
     describe('Bounding Box Calculation', () => {
-        it.todo('evaluates brick bounding box for brick with no argument notch');
+        it('evaluates brick bounding box for brick with no argument notch', () => {
+            const { bBoxBrick } = generatePath({
+                hasNest: false,
+                hasNotchArg: false,
+                hasNotchInsTop: true,
+                hasNotchInsBot: true,
+                scale: 1,
+                innerLengthX: 100,
+                argHeights: [],
+            });
+            expect(bBoxBrick.extent.height).toBe(21);
+            expect(bBoxBrick.extent.width).toBe(101);
+            expect(bBoxBrick.coords.x).toBe(0);
+            expect(bBoxBrick.coords.y).toBe(0);
+        });
 
-        it.todo('evaluates brick bounding box for brick with argument notch');
+        it('evaluates brick bounding box for brick with argument notch', () => {
+            const { bBoxBrick } = generatePath({
+                hasNest: false,
+                hasNotchArg: true,
+                hasNotchInsTop: false,
+                hasNotchInsBot: false,
+                scale: 1,
+                innerLengthX: 100,
+                argHeights: [],
+            });
+            expect(bBoxBrick.extent.height).toBe(21);
+            expect(bBoxBrick.extent.width).toBe(101);
+            expect(bBoxBrick.coords.x).toBe(8);
+            expect(bBoxBrick.coords.y).toBe(0);
+        });
 
-        it.todo('evaluates argument notch bounding box for brick');
+        it('evaluates argument notch bounding box for brick', () => {
+            const { bBoxNotchArg } = generatePath({
+                hasNest: false,
+                hasNotchArg: true,
+                hasNotchInsTop: false,
+                hasNotchInsBot: false,
+                scale: 1,
+                innerLengthX: 100,
+                argHeights: [],
+            });
+            expect(bBoxNotchArg?.extent.height).toBe(9);
+            expect(bBoxNotchArg?.extent.width).toBe(8);
+            expect(bBoxNotchArg?.coords.x).toBe(0);
+            expect(bBoxNotchArg?.coords.y).toBe(6);
+        });
+
+        it('evaluates top instruction notch bounding box', () => {
+            const { bBoxNotchInsTop } = generatePath({
+                hasNest: false,
+                hasNotchArg: false,
+                hasNotchInsTop: true,
+                hasNotchInsBot: true,
+                scale: 1,
+                innerLengthX: 100,
+                argHeights: [],
+            });
+            expect(bBoxNotchInsTop?.extent.height).toBe(2);
+            expect(bBoxNotchInsTop?.extent.width).toBe(9);
+            expect(bBoxNotchInsTop?.coords.x).toBe(9);
+            expect(bBoxNotchInsTop?.coords.y).toBe(0);
+        });
 
-        it.todo('evaluates top instruction notch bounding box');
+        it('evaluates bottom instruction notch bounding box for non-nesting brick', () => {
+            const { bBoxNotchInsBot } = generatePath({
+                hasNest: false,
+                hasNotchArg: false,
+                hasNotchInsTop: true,
+                hasNotchInsBot: true,
+                scale: 1,
+                innerLengthX: 100,
+                argHeights: [],
+            });
+            expect(bBoxNotchInsBot?.extent.height).toBe(2);
+            expect(bBoxNotchInsBot?.extent.width).toBe(9);
+            expect(bBoxNotchInsBot?.coords.x).toBe(9);
+            expect(bBoxNotchInsBot?.coords.y).toBe(21);
+        });
 
-        it.todo('evaluates bottom instruction notch bounding box for non-nesting brick');
+        it('evaluates bottom instruction notch bounding box for nesting brick', () => {
+            const { bBoxNotchInsBot } = generatePath({
+                hasNest: true,
+                hasNotchArg: false,
+                hasNotchInsTop: true,
+                hasNotchInsBot: true,
+                scale: 1,
+                nestLengthY: 30,
+                innerLengthX: 100,
+                argHeights: [],
+            });
+            expect(bBoxNotchInsBot?.extent.height).toBe(2);
+            expect(bBoxNotchInsBot?.extent.width).toBe(9);
+            expect(bBoxNotchInsBot?.coords.x).toBe(9);
+            expect(bBoxNotchInsBot?.coords.y).toBe(73);
+        });
 
-        it.todo('evaluates bottom instruction notch bounding box for nesting brick');
+        it('evaluates inner top instruction notch bounding box for nesting brick', () => {
+            const { bBoxNotchInsNestTop } = generatePath({
+                hasNest: true,
+                hasNotchArg: false,
+                hasNotchInsTop: true,
+                hasNotchInsBot: true,
+                scale: 1,
+                nestLengthY: 30,
+                innerLengthX: 100,
+                argHeights: [],
+            });
+            expect(bBoxNotchInsNestTop?.extent.height).toBe(2);
+            expect(bBoxNotchInsNestTop?.extent.width).toBe(9);
+            expect(bBoxNotchInsNestTop?.coords.x).toBe(18);
+            expect(bBoxNotchInsNestTop?.coords.y).toBe(21);
+        });
 
-        it.todo('evaluates inner top instruction notch bounding box for nesting brick');
+        it('evaluates inner top instruction notch bounding box for nesting brick', () => {
+            const { bBoxNotchInsNestTop } = generatePath({
+                hasNest: true,
+                hasNotchArg: false,
+                hasNotchInsTop: true,
+                hasNotchInsBot: true,
+                scale: 1,
+                nestLengthY: 30,
+                innerLengthX: 100,
+                argHeights: [],
+            });
+            expect(bBoxNotchInsNestTop?.extent.height).toBe(2);
+            expect(bBoxNotchInsNestTop?.extent.width).toBe(9);
+            expect(bBoxNotchInsNestTop?.coords.x).toBe(18);
+            expect(bBoxNotchInsNestTop?.coords.y).toBe(21);
+        });
 
-        it.todo('evaluates bounding boxes for arguments');
+        it('evaluates bounding boxes for arguments', () => {
+            const { bBoxArgs } = generatePath({
+                hasNest: false,
+                hasNotchArg: false,
+                hasNotchInsTop: true,
+                hasNotchInsBot: true,
+                scale: 1,
+                innerLengthX: 100,
+                argHeights: [17, 30, 40],
+            });
+            expect(bBoxArgs.extent.height).toBe(9);
+            expect(bBoxArgs.extent.width).toBe(8);
+            expect(bBoxArgs.coords).toStrictEqual([
+                { x: 93, y: 6 },
+                { x: 93, y: 26 },
+                { x: 93, y: 56 },
+            ]);
+        });
     });
 });

From 440365b09414376f4f4c0f2ca083884d3004eb6e Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Wed, 19 Jul 2023 15:30:52 +0530
Subject: [PATCH 39/48] chore(playground): add dummy workspace data

---
 .../playground/pages/WorkSpace/data.ts        | 213 ++++++++++++++++++
 1 file changed, 213 insertions(+)
 create mode 100644 modules/code-builder/playground/pages/WorkSpace/data.ts

diff --git a/modules/code-builder/playground/pages/WorkSpace/data.ts b/modules/code-builder/playground/pages/WorkSpace/data.ts
new file mode 100644
index 00000000..9f2bab01
--- /dev/null
+++ b/modules/code-builder/playground/pages/WorkSpace/data.ts
@@ -0,0 +1,213 @@
+import {
+    ModelBrickBlock,
+    ModelBrickData,
+    ModelBrickExpression,
+    ModelBrickStatement,
+} from '@/brick';
+import type { TBrickType, TBrickCoords, TBrickArgDataType } from '@/@types/brick';
+
+type InstanceMap = {
+    data: ModelBrickData;
+    expression: ModelBrickExpression;
+    statement: ModelBrickStatement;
+    block: ModelBrickBlock;
+};
+
+export type Brick = {
+    id: string;
+    type: TBrickType;
+    instance: InstanceMap[TBrickType];
+    coords: TBrickCoords;
+    children?: Brick[];
+};
+
+export const WORKSPACES_DATA: { id: string; data: Brick[] }[] = [
+    {
+        id: 'workspace1',
+        data: [
+            {
+                id: '1',
+                type: 'block',
+                instance: new ModelBrickBlock({
+                    label: 'Block',
+                    args: Object.fromEntries(
+                        [].map<
+                            [string, { label: string; dataType: TBrickArgDataType; meta: unknown }]
+                        >((name) => [name, { label: name, dataType: 'any', meta: undefined }]),
+                    ),
+                    colorBg: 'yellow',
+                    colorFg: 'black',
+                    outline: 'red',
+                    scale: 2,
+                    glyph: '',
+                    connectAbove: true,
+                    connectBelow: true,
+                    name: '',
+                    nestLengthY: 125,
+                }),
+                coords: { x: 50, y: 50 },
+                children: [
+                    {
+                        id: '2',
+                        type: 'statement',
+                        instance: new ModelBrickStatement({
+                            label: 'Statement',
+                            args: Object.fromEntries(
+                                [].map<
+                                    [
+                                        string,
+                                        {
+                                            label: string;
+                                            dataType: TBrickArgDataType;
+                                            meta: unknown;
+                                        },
+                                    ]
+                                >((name) => [
+                                    name,
+                                    { label: name, dataType: 'any', meta: undefined },
+                                ]),
+                            ),
+                            colorBg: 'lightblue',
+                            colorFg: 'black',
+                            outline: 'blue',
+                            scale: 2,
+                            glyph: '',
+                            connectAbove: true,
+                            connectBelow: true,
+                            name: '',
+                        }),
+                        coords: { x: 68, y: 92 },
+                    },
+                    {
+                        id: '3',
+                        type: 'statement',
+                        instance: new ModelBrickStatement({
+                            label: 'Statement',
+                            args: Object.fromEntries(
+                                [].map<
+                                    [
+                                        string,
+                                        {
+                                            label: string;
+                                            dataType: TBrickArgDataType;
+                                            meta: unknown;
+                                        },
+                                    ]
+                                >((name) => [
+                                    name,
+                                    { label: name, dataType: 'any', meta: undefined },
+                                ]),
+                            ),
+                            colorBg: 'lightgreen',
+                            colorFg: 'black',
+                            outline: 'green',
+                            scale: 2,
+                            glyph: '',
+                            connectAbove: true,
+                            connectBelow: true,
+                            name: '',
+                        }),
+                        coords: { x: 68, y: 134 },
+                    },
+                    {
+                        id: '4',
+                        type: 'block',
+                        instance: new ModelBrickBlock({
+                            label: 'Block',
+                            args: Object.fromEntries(
+                                [].map<
+                                    [
+                                        string,
+                                        {
+                                            label: string;
+                                            dataType: TBrickArgDataType;
+                                            meta: unknown;
+                                        },
+                                    ]
+                                >((name) => [
+                                    name,
+                                    { label: name, dataType: 'any', meta: undefined },
+                                ]),
+                            ),
+                            colorBg: 'orange',
+                            colorFg: 'black',
+                            outline: 'grey',
+                            scale: 2,
+                            glyph: '',
+                            connectAbove: true,
+                            connectBelow: true,
+                            name: '',
+                            nestLengthY: 17,
+                        }),
+                        coords: { x: 68, y: 176 },
+                        children: [
+                            {
+                                id: '5',
+                                type: 'statement',
+                                instance: new ModelBrickStatement({
+                                    label: 'Statement',
+                                    args: Object.fromEntries(
+                                        [].map<
+                                            [
+                                                string,
+                                                {
+                                                    label: string;
+                                                    dataType: TBrickArgDataType;
+                                                    meta: unknown;
+                                                },
+                                            ]
+                                        >((name) => [
+                                            name,
+                                            { label: name, dataType: 'any', meta: undefined },
+                                        ]),
+                                    ),
+                                    colorBg: 'lightpink',
+                                    colorFg: 'black',
+                                    outline: 'deeppink',
+
+                                    scale: 2,
+                                    glyph: '',
+                                    connectAbove: true,
+                                    connectBelow: true,
+                                    name: '',
+                                }),
+                                coords: { x: 86, y: 218 },
+                            },
+                        ],
+                    },
+                    {
+                        id: '6',
+                        type: 'statement',
+                        instance: new ModelBrickStatement({
+                            label: 'Statement',
+                            args: Object.fromEntries(
+                                [].map<
+                                    [
+                                        string,
+                                        {
+                                            label: string;
+                                            dataType: TBrickArgDataType;
+                                            meta: unknown;
+                                        },
+                                    ]
+                                >((name) => [
+                                    name,
+                                    { label: name, dataType: 'any', meta: undefined },
+                                ]),
+                            ),
+                            colorBg: 'lightgreen',
+                            colorFg: 'black',
+                            outline: 'green',
+                            scale: 2,
+                            glyph: '',
+                            connectAbove: true,
+                            connectBelow: true,
+                            name: '',
+                        }),
+                        coords: { x: 68, y: 302 },
+                    },
+                ],
+            },
+        ],
+    },
+];

From 3c9d8bdf67fd766c5c1331ed572c89e8b19707e9 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Wed, 19 Jul 2023 15:32:58 +0530
Subject: [PATCH 40/48] fix(bricks): fix brick components to accept coords

---
 .../code-builder/src/brick/design0/BrickBlock.ts   |  3 ++-
 .../src/brick/design0/components/BrickBlock.tsx    | 14 +++++++++-----
 .../src/brick/design0/components/BrickData.tsx     | 14 +++++++++-----
 .../brick/design0/components/BrickExpression.tsx   | 14 +++++++++-----
 .../brick/design0/components/BrickStatement.tsx    | 14 +++++++++-----
 5 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/BrickBlock.ts b/modules/code-builder/src/brick/design0/BrickBlock.ts
index 9c555d48..07d8dcbc 100644
--- a/modules/code-builder/src/brick/design0/BrickBlock.ts
+++ b/modules/code-builder/src/brick/design0/BrickBlock.ts
@@ -32,6 +32,7 @@ export default class BrickBlock extends BrickModelBlock {
         scale: number;
         connectAbove: boolean;
         connectBelow: boolean;
+        nestLengthY?: number;
     }) {
         super(params);
         const argsKeys = Object.keys(this._args);
@@ -41,7 +42,7 @@ export default class BrickBlock extends BrickModelBlock {
             hasNotchInsTop: this._connectAbove,
             hasNotchInsBot: this._connectBelow,
             scale: this._scale,
-            nestLengthY: 30,
+            nestLengthY: params.nestLengthY ?? 17,
             innerLengthX: 100,
             argHeights: Array.from({ length: argsKeys.length }, () => 17),
         });
diff --git a/modules/code-builder/src/brick/design0/components/BrickBlock.tsx b/modules/code-builder/src/brick/design0/components/BrickBlock.tsx
index 7dd5ed16..92c3293f 100644
--- a/modules/code-builder/src/brick/design0/components/BrickBlock.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickBlock.tsx
@@ -1,13 +1,17 @@
 import type { JSX } from 'react';
-import type { IBrickBlock } from '@/@types/brick';
+import type { IBrickBlock, TBrickCoords } from '@/@types/brick';
 
 // -------------------------------------------------------------------------------------------------
 
-export default function (props: { instance: IBrickBlock }): JSX.Element {
-  const { instance } = props;
-
+export default function ({
+  instance,
+  coords = { x: 0, y: 0 },
+}: {
+  instance: IBrickBlock;
+  coords?: TBrickCoords;
+}): JSX.Element {
   return (
-    <g transform={`scale(${instance.scale})`}>
+    <g transform={`translate(${coords?.x},${coords?.y}) scale(${instance.scale})`}>
       <path
         d={instance.SVGpath}
         style={{
diff --git a/modules/code-builder/src/brick/design0/components/BrickData.tsx b/modules/code-builder/src/brick/design0/components/BrickData.tsx
index 0623b736..2cbfb716 100644
--- a/modules/code-builder/src/brick/design0/components/BrickData.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickData.tsx
@@ -1,11 +1,15 @@
 import type { JSX } from 'react';
-import type { IBrickData } from '@/@types/brick';
-
-export default function (props: { instance: IBrickData }): JSX.Element {
-  const { instance } = props;
+import type { IBrickData, TBrickCoords } from '@/@types/brick';
 
+export default function ({
+  instance,
+  coords = { x: 0, y: 0 },
+}: {
+  instance: IBrickData;
+  coords?: TBrickCoords;
+}): JSX.Element {
   return (
-    <g transform={`scale(${instance.scale})`}>
+    <g transform={`translate(${coords?.x},${coords?.y}) scale(${instance.scale})`}>
       <path
         d={instance.SVGpath}
         style={{
diff --git a/modules/code-builder/src/brick/design0/components/BrickExpression.tsx b/modules/code-builder/src/brick/design0/components/BrickExpression.tsx
index 16183bf3..71d36a94 100644
--- a/modules/code-builder/src/brick/design0/components/BrickExpression.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickExpression.tsx
@@ -1,13 +1,17 @@
 import type { JSX } from 'react';
-import type { IBrickExpression } from '@/@types/brick';
+import type { IBrickExpression, TBrickCoords } from '@/@types/brick';
 
 // -------------------------------------------------------------------------------------------------
 
-export default function (props: { instance: IBrickExpression }): JSX.Element {
-  const { instance } = props;
-
+export default function ({
+  instance,
+  coords = { x: 0, y: 0 },
+}: {
+  instance: IBrickExpression;
+  coords?: TBrickCoords;
+}): JSX.Element {
   return (
-    <g transform={`scale(${instance.scale})`}>
+    <g transform={`translate(${coords?.x},${coords?.y}) scale(${instance.scale})`}>
       <path
         d={instance.SVGpath}
         style={{
diff --git a/modules/code-builder/src/brick/design0/components/BrickStatement.tsx b/modules/code-builder/src/brick/design0/components/BrickStatement.tsx
index b53983b5..c0bd6db8 100644
--- a/modules/code-builder/src/brick/design0/components/BrickStatement.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickStatement.tsx
@@ -1,13 +1,17 @@
 import type { JSX } from 'react';
-import type { IBrickStatement } from '@/@types/brick';
+import type { IBrickStatement, TBrickCoords } from '@/@types/brick';
 
 // -------------------------------------------------------------------------------------------------
 
-export default function (props: { instance: IBrickStatement }): JSX.Element {
-  const { instance } = props;
-
+export default function ({
+  instance,
+  coords = { x: 0, y: 0 },
+}: {
+  instance: IBrickStatement;
+  coords?: TBrickCoords;
+}): JSX.Element {
   return (
-    <g transform={`scale(${instance.scale})`}>
+    <g transform={`translate(${coords?.x},${coords?.y}) scale(${instance.scale})`}>
       <path
         d={instance.SVGpath}
         style={{

From 4301c8e05f519d095ede0548ce3b80317b4b49c1 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Wed, 19 Jul 2023 15:33:49 +0530
Subject: [PATCH 41/48] feat(playground): add workspace page and functionality
 into playground

---
 modules/code-builder/playground/index.tsx     |  5 ++
 .../playground/pages/WorkSpace/index.tsx      | 65 +++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 modules/code-builder/playground/pages/WorkSpace/index.tsx

diff --git a/modules/code-builder/playground/index.tsx b/modules/code-builder/playground/index.tsx
index 288860a6..181d4e21 100644
--- a/modules/code-builder/playground/index.tsx
+++ b/modules/code-builder/playground/index.tsx
@@ -2,12 +2,17 @@ import { createRoot } from 'react-dom/client';
 import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom';
 
 import PageCollision from './pages/Collision';
+import WorkSpace from './pages/WorkSpace';
 
 const router = createBrowserRouter([
   {
     path: '/collision',
     element: <PageCollision />,
   },
+  {
+    path: '/workspace',
+    element: <WorkSpace />,
+  },
   {
     path: '/',
     element: <Navigate to="/collision" />,
diff --git a/modules/code-builder/playground/pages/WorkSpace/index.tsx b/modules/code-builder/playground/pages/WorkSpace/index.tsx
new file mode 100644
index 00000000..eca5b957
--- /dev/null
+++ b/modules/code-builder/playground/pages/WorkSpace/index.tsx
@@ -0,0 +1,65 @@
+import {
+  BrickBlock,
+  BrickData,
+  BrickExpression,
+  BrickStatement,
+  ModelBrickBlock,
+  ModelBrickData,
+  ModelBrickExpression,
+  ModelBrickStatement,
+} from '@/brick';
+import { WORKSPACES_DATA } from './data';
+import type { TBrickCoords, TBrickType } from '@/@types/brick';
+import type { Brick } from './data';
+
+function getBrick(
+  type: TBrickType,
+  instance: ModelBrickBlock | ModelBrickData | ModelBrickExpression | ModelBrickStatement,
+  coords: TBrickCoords,
+) {
+  switch (type) {
+    case 'data':
+      return <BrickData instance={instance as ModelBrickData} coords={coords} />;
+    case 'expression':
+      return <BrickExpression instance={instance as ModelBrickExpression} coords={coords} />;
+    case 'statement':
+      return <BrickStatement instance={instance as ModelBrickStatement} coords={coords} />;
+    case 'block':
+      return <BrickBlock instance={instance as ModelBrickBlock} coords={coords} />;
+    default:
+      return <></>;
+  }
+}
+
+function RenderBricks({ brickData }: { brickData: Brick }) {
+  return (
+    <>
+      {getBrick(brickData.type, brickData.instance, brickData.coords)}
+      {brickData.children &&
+        brickData.children?.length > 0 &&
+        brickData.children.map((child) => <RenderBricks key={child.id} brickData={child} />)}
+    </>
+  );
+}
+
+function WorkSpace() {
+  return (
+    <div>
+      {WORKSPACES_DATA.map((workspace) => (
+        <svg
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          key={workspace.id}
+          height="500px"
+          width="500px"
+        >
+          {workspace.data.map((brick) => {
+            return <RenderBricks key={brick.id} brickData={brick} />;
+          })}
+        </svg>
+      ))}
+    </div>
+  );
+}
+
+export default WorkSpace;

From 550535263bda0993031843ce7eb67b04c28d2043 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 11 Aug 2023 15:52:28 +0530
Subject: [PATCH 42/48] feat(playground): initialize and configure brick store

---
 modules/code-builder/package.json             |    4 +-
 .../pages/WorkSpace/BricksCoordsStore.ts      |   50 +
 .../playground/pages/WorkSpace/data.ts        |   14 +
 package-lock.json                             | 1887 +++++++++++++++--
 4 files changed, 1788 insertions(+), 167 deletions(-)
 create mode 100644 modules/code-builder/playground/pages/WorkSpace/BricksCoordsStore.ts

diff --git a/modules/code-builder/package.json b/modules/code-builder/package.json
index 26132ddf..81387764 100644
--- a/modules/code-builder/package.json
+++ b/modules/code-builder/package.json
@@ -16,6 +16,8 @@
     "react-dom": "~18.x"
   },
   "dependencies": {
-    "@sugarlabs/musicblocks-v4-lib": "^0.2.0"
+    "@sugarlabs/musicblocks-v4-lib": "^0.2.0",
+    "react-aria": "^3.26.0",
+    "zustand": "^4.3.9"
   }
 }
diff --git a/modules/code-builder/playground/pages/WorkSpace/BricksCoordsStore.ts b/modules/code-builder/playground/pages/WorkSpace/BricksCoordsStore.ts
new file mode 100644
index 00000000..94d3b73e
--- /dev/null
+++ b/modules/code-builder/playground/pages/WorkSpace/BricksCoordsStore.ts
@@ -0,0 +1,50 @@
+import { create } from 'zustand';
+
+type CoordsState = {
+    allCoords: {
+        brickId: string;
+        coords: {
+            x: number;
+            y: number;
+        };
+    }[];
+    setCoords: (brickId: string, coords: { x: number; y: number }) => void;
+    getCoords: (brickId: string) => { x: number; y: number } | undefined;
+};
+
+const useBricksCoordsStore = create<CoordsState>((set, get) => ({
+    allCoords: [
+        { brickId: '1', coords: { x: 50, y: 50 } },
+        { brickId: '2', coords: { x: 68, y: 92 } },
+        { brickId: '3', coords: { x: 68, y: 134 } },
+        { brickId: '4', coords: { x: 68, y: 176 } },
+        { brickId: '5', coords: { x: 86, y: 218 } },
+        { brickId: '6', coords: { x: 68, y: 302 } },
+    ],
+    setCoords: (brickId: string, coords: { x: number; y: number }) =>
+        set(
+            (state: {
+                allCoords: {
+                    brickId: string;
+                    coords: {
+                        x: number;
+                        y: number;
+                    };
+                }[];
+            }) => ({
+                allCoords: state.allCoords.map((item) =>
+                    item.brickId === brickId ? { brickId, coords } : item,
+                ),
+            }),
+        ),
+    getCoords: (brickId: string) =>
+        get().allCoords.find((item) => item.brickId === brickId)?.coords,
+}));
+
+export const useBricksCoords = () => {
+    const allCoords = useBricksCoordsStore((state) => state.allCoords);
+    const setCoords = useBricksCoordsStore((state) => state.setCoords);
+    const getCoords = useBricksCoordsStore((state) => state.getCoords);
+
+    return { allCoords, setCoords, getCoords };
+};
diff --git a/modules/code-builder/playground/pages/WorkSpace/data.ts b/modules/code-builder/playground/pages/WorkSpace/data.ts
index 9f2bab01..768712a2 100644
--- a/modules/code-builder/playground/pages/WorkSpace/data.ts
+++ b/modules/code-builder/playground/pages/WorkSpace/data.ts
@@ -17,6 +17,8 @@ export type Brick = {
     id: string;
     type: TBrickType;
     instance: InstanceMap[TBrickType];
+    surroundingBricks: { above: string; below: string };
+    childBricks: string[];
     coords: TBrickCoords;
     children?: Brick[];
 };
@@ -45,6 +47,8 @@ export const WORKSPACES_DATA: { id: string; data: Brick[] }[] = [
                     name: '',
                     nestLengthY: 125,
                 }),
+                surroundingBricks: { above: '', below: '' },
+                childBricks: ['2', '3', '4', '5', '6'],
                 coords: { x: 50, y: 50 },
                 children: [
                     {
@@ -76,6 +80,8 @@ export const WORKSPACES_DATA: { id: string; data: Brick[] }[] = [
                             connectBelow: true,
                             name: '',
                         }),
+                        surroundingBricks: { above: '1', below: '3' },
+                        childBricks: [],
                         coords: { x: 68, y: 92 },
                     },
                     {
@@ -107,6 +113,8 @@ export const WORKSPACES_DATA: { id: string; data: Brick[] }[] = [
                             connectBelow: true,
                             name: '',
                         }),
+                        surroundingBricks: { above: '2', below: '4' },
+                        childBricks: [],
                         coords: { x: 68, y: 134 },
                     },
                     {
@@ -139,6 +147,8 @@ export const WORKSPACES_DATA: { id: string; data: Brick[] }[] = [
                             name: '',
                             nestLengthY: 17,
                         }),
+                        surroundingBricks: { above: '3', below: '6' },
+                        childBricks: ['5'],
                         coords: { x: 68, y: 176 },
                         children: [
                             {
@@ -171,6 +181,8 @@ export const WORKSPACES_DATA: { id: string; data: Brick[] }[] = [
                                     connectBelow: true,
                                     name: '',
                                 }),
+                                surroundingBricks: { above: '', below: '' },
+                                childBricks: [],
                                 coords: { x: 86, y: 218 },
                             },
                         ],
@@ -204,6 +216,8 @@ export const WORKSPACES_DATA: { id: string; data: Brick[] }[] = [
                             connectBelow: true,
                             name: '',
                         }),
+                        surroundingBricks: { above: '4', below: '' },
+                        childBricks: [],
                         coords: { x: 68, y: 302 },
                     },
                 ],
diff --git a/package-lock.json b/package-lock.json
index 88f0289d..8e2766f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -141,7 +141,9 @@
       "name": "@sugarlabs/mb4-module-code-builder",
       "version": "4.2.0",
       "dependencies": {
-        "@sugarlabs/musicblocks-v4-lib": "^0.2.0"
+        "@sugarlabs/musicblocks-v4-lib": "^0.2.0",
+        "react-aria": "^3.26.0",
+        "zustand": "^4.3.9"
       },
       "peerDependencies": {
         "react": "~18.x",
@@ -2969,6 +2971,50 @@
       "integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==",
       "dev": true
     },
+    "node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.0.tgz",
+      "integrity": "sha512-6ueQTeJZtwKjmh23bdkq/DMqH4l4bmfvtQH98blOSbiXv/OUiyijSW6jU22IT8BNM1ujCaEvJfTtyCYVH38EMQ==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.4.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz",
+      "integrity": "sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.6.0.tgz",
+      "integrity": "sha512-yT6at0qc0DANw9qM/TU8RZaCtfDXtj4pZM/IC2WnVU80yAcliS3KVDiuUt4jSQAeFL9JS5bc2hARnFmjPdA6qw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.17.0",
+        "@formatjs/icu-skeleton-parser": "1.6.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.6.0.tgz",
+      "integrity": "sha512-eMmxNpoX/J1IPUjPGSZwo0Wh+7CEvdEMddP2Jxg1gQJXfGfht/FdW2D5XDFj3VMbOTUQlDIdZJY7uC6O6gjPoA==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.17.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.0.tgz",
+      "integrity": "sha512-bRTd+rKomvfdS4QDlVJ6TA/Jx1F2h/TBVO5LjvhQ7QPPHp19oPNMIum7W2CMEReq/zPxpmCeB31F9+5gl/qtvw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -3017,6 +3063,39 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.3.0.tgz",
+      "integrity": "sha512-qfRd7jCIgUjabI8RxeAsxhLDRS1u8eUPX96GB5uBp1Tpm6YY6dVveE7YwsTEV6L4QOp5LKFirFHHGsL/XQwJIA==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/message": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@internationalized/message/-/message-3.1.1.tgz",
+      "integrity": "sha512-ZgHxf5HAPIaR0th+w0RUD62yF6vxitjlprSxmLJ1tam7FOekqRSDELMg4Cr/DdszG5YLsp5BG3FgHgqquQZbqw==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0",
+        "intl-messageformat": "^10.1.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.2.1.tgz",
+      "integrity": "sha512-hK30sfBlmB1aIe3/OwAPg9Ey0DjjXvHEiGVhNaOiBJl31G0B6wMaX8BN3ibzdlpyRNE9p7X+3EBONmxtJO9Yfg==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/string": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@internationalized/string/-/string-3.1.1.tgz",
+      "integrity": "sha512-fvSr6YRoVPgONiVIUhgCmIAlifMVCeej/snPZVzbzRPxGpHl3o1GRe+d/qh92D8KhgOciruDUH8I5mjdfdjzfA==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -5110,230 +5189,1601 @@
       "integrity": "sha512-m90iz8UsXx1rgPm1dxsBQjSrCViWYZIrp8bpwjSCW24j3kifyilYSXGuKaRwZwUn7eNmH/kZcI9/8qeGIPF4Sg==",
       "dev": true,
       "dependencies": {
-        "nx": "15.9.4"
+        "nx": "15.9.4"
+      },
+      "bin": {
+        "tao": "index.js"
+      }
+    },
+    "node_modules/@octokit/auth-token": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.4.tgz",
+      "integrity": "sha512-TWFX7cZF2LXoCvdmJWY7XVPi74aSY0+FfBZNSXEXFkMpjcqsQwDSYVv5FhRFaI0V1ECnwbz4j59T/G+rXNWaIQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/core": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.2.4.tgz",
+      "integrity": "sha512-rYKilwgzQ7/imScn3M9/pFfUf4I1AZEH3KhyJmtPdE2zfaXAn2mFfUy4FbKewzc2We5y/LlKLj36fWJLKC2SIQ==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/auth-token": "^3.0.0",
+        "@octokit/graphql": "^5.0.0",
+        "@octokit/request": "^6.0.0",
+        "@octokit/request-error": "^3.0.0",
+        "@octokit/types": "^9.0.0",
+        "before-after-hook": "^2.2.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/endpoint": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.6.tgz",
+      "integrity": "sha512-5L4fseVRUsDFGR00tMWD/Trdeeihn999rTMGRMC1G/Ldi1uWlWJzI98H4Iak5DB/RVvQuyMYKqSK/R6mbSOQyg==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^9.0.0",
+        "is-plain-object": "^5.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/graphql": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.6.tgz",
+      "integrity": "sha512-Fxyxdy/JH0MnIB5h+UQ3yCoh1FG4kWXfFKkpWqjZHw/p+Kc8Y44Hu/kCgNBT6nU1shNumEchmW/sUO1JuQnPcw==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/request": "^6.0.0",
+        "@octokit/types": "^9.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/openapi-types": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-18.0.0.tgz",
+      "integrity": "sha512-V8GImKs3TeQRxRtXFpG2wl19V7444NIOTDF24AWuIbmNaNYOQMWRbjcGDXV5B+0n887fgDcuMNOmlul+k+oJtw==",
+      "dev": true
+    },
+    "node_modules/@octokit/plugin-enterprise-rest": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-enterprise-rest/-/plugin-enterprise-rest-6.0.1.tgz",
+      "integrity": "sha512-93uGjlhUD+iNg1iWhUENAtJata6w5nE+V4urXOAlIXdco6xNZtUSfYY8dzp3Udy74aqO/B5UZL80x/YMa5PKRw==",
+      "dev": true
+    },
+    "node_modules/@octokit/plugin-paginate-rest": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-3.1.0.tgz",
+      "integrity": "sha512-+cfc40pMzWcLkoDcLb1KXqjX0jTGYXjKuQdFQDc6UAknISJHnZTiBqld6HDwRJvD4DsouDKrWXNbNV0lE/3AXA==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^6.41.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "@octokit/core": ">=4"
+      }
+    },
+    "node_modules/@octokit/plugin-paginate-rest/node_modules/@octokit/openapi-types": {
+      "version": "12.11.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-12.11.0.tgz",
+      "integrity": "sha512-VsXyi8peyRq9PqIz/tpqiL2w3w80OgVMwBHltTml3LmVvXiphgeqmY9mvBw9Wu7e0QWk/fqD37ux8yP5uVekyQ==",
+      "dev": true
+    },
+    "node_modules/@octokit/plugin-paginate-rest/node_modules/@octokit/types": {
+      "version": "6.41.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
+      "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/openapi-types": "^12.11.0"
+      }
+    },
+    "node_modules/@octokit/plugin-request-log": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz",
+      "integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==",
+      "dev": true,
+      "peerDependencies": {
+        "@octokit/core": ">=3"
+      }
+    },
+    "node_modules/@octokit/plugin-rest-endpoint-methods": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-6.8.1.tgz",
+      "integrity": "sha512-QrlaTm8Lyc/TbU7BL/8bO49vp+RZ6W3McxxmmQTgYxf2sWkO8ZKuj4dLhPNJD6VCUW1hetCmeIM0m6FTVpDiEg==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^8.1.1",
+        "deprecation": "^2.3.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "@octokit/core": ">=3"
+      }
+    },
+    "node_modules/@octokit/plugin-rest-endpoint-methods/node_modules/@octokit/openapi-types": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-14.0.0.tgz",
+      "integrity": "sha512-HNWisMYlR8VCnNurDU6os2ikx0s0VyEjDYHNS/h4cgb8DeOxQ0n72HyinUtdDVxJhFy3FWLGl0DJhfEWk3P5Iw==",
+      "dev": true
+    },
+    "node_modules/@octokit/plugin-rest-endpoint-methods/node_modules/@octokit/types": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-8.2.1.tgz",
+      "integrity": "sha512-8oWMUji8be66q2B9PmEIUyQm00VPDPun07umUWSaCwxmeaquFBro4Hcc3ruVoDo3zkQyZBlRvhIMEYS3pBhanw==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/openapi-types": "^14.0.0"
+      }
+    },
+    "node_modules/@octokit/request": {
+      "version": "6.2.8",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.8.tgz",
+      "integrity": "sha512-ow4+pkVQ+6XVVsekSYBzJC0VTVvh/FCTUUgTsboGq+DTeWdyIFV8WSCdo0RIxk6wSkBTHqIK1mYuY7nOBXOchw==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/endpoint": "^7.0.0",
+        "@octokit/request-error": "^3.0.0",
+        "@octokit/types": "^9.0.0",
+        "is-plain-object": "^5.0.0",
+        "node-fetch": "^2.6.7",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/request-error": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.3.tgz",
+      "integrity": "sha512-crqw3V5Iy2uOU5Np+8M/YexTlT8zxCfI+qu+LxUB7SZpje4Qmx3mub5DfEKSO8Ylyk0aogi6TYdf6kxzh2BguQ==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^9.0.0",
+        "deprecation": "^2.0.0",
+        "once": "^1.4.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/rest": {
+      "version": "19.0.3",
+      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.3.tgz",
+      "integrity": "sha512-5arkTsnnRT7/sbI4fqgSJ35KiFaN7zQm0uQiQtivNQLI8RQx8EHwJCajcTUwmaCMNDg7tdCvqAnc7uvHHPxrtQ==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/core": "^4.0.0",
+        "@octokit/plugin-paginate-rest": "^3.0.0",
+        "@octokit/plugin-request-log": "^1.0.4",
+        "@octokit/plugin-rest-endpoint-methods": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@octokit/types": {
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-9.3.2.tgz",
+      "integrity": "sha512-D4iHGTdAnEEVsB8fl95m1hiz7D5YiRdQ9b/OEb3BYRVwbLsGHcRVPz+u+BgRLNk0Q0/4iZCBqDN96j2XNxfXrA==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/openapi-types": "^18.0.0"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.0.4.tgz",
+      "integrity": "sha512-cTDi+FUDBIUOBKEtj+nhiJ71AZVlkAsQFuGQTun5tV9mwQBQgZvhCzG+URPQc8myeN32yRVZEfVAPCs1RW+Jvg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "node-addon-api": "^3.2.1",
+        "node-gyp-build": "^4.3.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@react-aria/breadcrumbs": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/breadcrumbs/-/breadcrumbs-3.5.3.tgz",
+      "integrity": "sha512-rmkApAflZm7Finn3vxLGv7MbsMaPo5Bn7/lf8GBztNfzmLWP/dAA5bgvi1sj1T6sWJOuFJT8u04ImUwBCLh8cQ==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/link": "^3.5.2",
+        "@react-aria/utils": "^3.18.0",
+        "@react-types/breadcrumbs": "^3.6.0",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/button": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/button/-/button-3.8.0.tgz",
+      "integrity": "sha512-QdvXTQgn+QEWOHoMbUIPXSBIN5P2r1zthRvqDJMTCzuT0I6LbNAq7RoojEbRrcn0DbTa/nZPzOOYsZXjgteRdw==",
+      "dependencies": {
+        "@react-aria/focus": "^3.13.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/toggle": "^3.6.0",
+        "@react-types/button": "^3.7.3",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/calendar": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/calendar/-/calendar-3.4.0.tgz",
+      "integrity": "sha512-Ly+9KsOXWZTlOYDZeIYCWNuMZg7ZiJC497Z4U3SqaWmDsZaqwU8ZnLmZ1xUWq1cYvK9rnWPnnpby1JUgttY9RA==",
+      "dependencies": {
+        "@internationalized/date": "^3.3.0",
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/live-announcer": "^3.3.1",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/calendar": "^3.3.0",
+        "@react-types/button": "^3.7.3",
+        "@react-types/calendar": "^3.3.0",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/checkbox": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/checkbox/-/checkbox-3.9.2.tgz",
+      "integrity": "sha512-gpvC+EnrxcQ9wupnoXsIDUmhSeBpxWtfRIYYypn6Ta6NY9Ubkh4H/8xE9/27nhJltHf5rzEcLfKg4QlEftab/w==",
+      "dependencies": {
+        "@react-aria/label": "^3.6.0",
+        "@react-aria/toggle": "^3.6.2",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/checkbox": "^3.4.3",
+        "@react-stately/toggle": "^3.6.0",
+        "@react-types/checkbox": "^3.4.4",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/combobox": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/combobox/-/combobox-3.6.2.tgz",
+      "integrity": "sha512-SWbA2vH26zcrZDbXdPJtZNR6ywYPdf4LU8/7IKLs1Iv7mrlICr9Cmeywiu2RuFRosuR1hGSy1hibBTgPO6V/sw==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/listbox": "^3.10.0",
+        "@react-aria/live-announcer": "^3.3.1",
+        "@react-aria/menu": "^3.10.0",
+        "@react-aria/overlays": "^3.15.0",
+        "@react-aria/selection": "^3.16.0",
+        "@react-aria/textfield": "^3.10.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/collections": "^3.9.0",
+        "@react-stately/combobox": "^3.5.2",
+        "@react-stately/layout": "^3.12.2",
+        "@react-types/button": "^3.7.3",
+        "@react-types/combobox": "^3.6.2",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/datepicker": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/datepicker/-/datepicker-3.5.0.tgz",
+      "integrity": "sha512-oUfLbfFwe5XgS2Womx0t0gA8797mGQjjxZAGa9lGSNGFx26NOfhWBh24lAYQzQnZ5ot/DxDSJmzLjN6WEWv9pQ==",
+      "dependencies": {
+        "@internationalized/date": "^3.3.0",
+        "@internationalized/number": "^3.2.1",
+        "@internationalized/string": "^3.1.1",
+        "@react-aria/focus": "^3.13.0",
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/label": "^3.6.0",
+        "@react-aria/spinbutton": "^3.5.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/datepicker": "^3.5.0",
+        "@react-types/button": "^3.7.3",
+        "@react-types/calendar": "^3.3.0",
+        "@react-types/datepicker": "^3.4.0",
+        "@react-types/dialog": "^3.5.3",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/dialog": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/dialog/-/dialog-3.5.3.tgz",
+      "integrity": "sha512-wXpAqnt6TtR4X/5Xk5HCTBM0qyPcF2bXFQ5z2gSwl1olgoQ5znZEgMqMLbMmwb4dsWGGtAueULs6fVZk766ygA==",
+      "dependencies": {
+        "@react-aria/focus": "^3.13.0",
+        "@react-aria/overlays": "^3.15.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/overlays": "^3.6.0",
+        "@react-types/dialog": "^3.5.3",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/dnd": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/dnd/-/dnd-3.3.0.tgz",
+      "integrity": "sha512-rk46inb6XdVR5cIFzuMoqUfdqgqb+GHOIFGDiwhHYONeCdvQKD31ztQZ78yITORmPOmjrnn6r2V3GQ6Oz54WSQ==",
+      "dependencies": {
+        "@internationalized/string": "^3.1.1",
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/live-announcer": "^3.3.1",
+        "@react-aria/overlays": "^3.15.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-aria/visually-hidden": "^3.8.2",
+        "@react-stately/dnd": "^3.2.2",
+        "@react-types/button": "^3.7.3",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/focus": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.13.0.tgz",
+      "integrity": "sha512-9DW7RqgbFWiImZmkmTIJGe9LrQBqEeLYwlKY+F1FTVXerIPiCCQ3JO3ESEa4lFMmkaHoueFLUrq2jkYjRNqoTw==",
+      "dependencies": {
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/grid": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/grid/-/grid-3.8.0.tgz",
+      "integrity": "sha512-7z1xFAbLPgUPROrXwuJk94STQPQ/K8rCLshhwTAg70uFVCPNnrm3jxQ6vE/lddPB+yss9Ee33GwSCrEXdzJkTw==",
+      "dependencies": {
+        "@react-aria/focus": "^3.13.0",
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/live-announcer": "^3.3.1",
+        "@react-aria/selection": "^3.16.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/collections": "^3.9.0",
+        "@react-stately/grid": "^3.7.0",
+        "@react-stately/selection": "^3.13.2",
+        "@react-stately/virtualizer": "^3.6.0",
+        "@react-types/checkbox": "^3.4.4",
+        "@react-types/grid": "^3.1.8",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/gridlist": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/gridlist/-/gridlist-3.5.0.tgz",
+      "integrity": "sha512-xBCWyTtJNdUKSSUWXPMEi4lTnM1NRUlEJNi0eTNPIQVZOwQ7AgkEOD6uI+C6mgBL8q0oJwyIAfhK3zdwUCQSPg==",
+      "dependencies": {
+        "@react-aria/focus": "^3.13.0",
+        "@react-aria/grid": "^3.8.0",
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/selection": "^3.16.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/list": "^3.9.0",
+        "@react-types/checkbox": "^3.4.4",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/i18n": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.8.0.tgz",
+      "integrity": "sha512-zeohg7d66zPLnGQl1rJuVJJ/gP7GmUMxEKIFRwE+rg2u02ldKxJMSb8QKGo605QpFWqo7CuuWYvKJP5Mj+Em/w==",
+      "dependencies": {
+        "@internationalized/date": "^3.3.0",
+        "@internationalized/message": "^3.1.1",
+        "@internationalized/number": "^3.2.1",
+        "@internationalized/string": "^3.1.1",
+        "@react-aria/ssr": "^3.7.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/interactions": {
+      "version": "3.16.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.16.0.tgz",
+      "integrity": "sha512-vXANFKVd6ONqNw8U+ZWbSA8lrduCOXw7cWsYosTa5dZ24ZJfRfbhlvRe8CaAKMhB/rOOmvTLaAwdIPia6JtLDg==",
+      "dependencies": {
+        "@react-aria/ssr": "^3.7.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/label": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/label/-/label-3.6.0.tgz",
+      "integrity": "sha512-o6Z9YAbvywj/b995HOl7fS9vf8FVmhWiJkKwFyCi/M1A7FXBqgtPcdPDNHaaKOhvQcwnLs4iMVMJwZdn/dLVDA==",
+      "dependencies": {
+        "@react-aria/utils": "^3.18.0",
+        "@react-types/label": "^3.7.4",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/link": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/link/-/link-3.5.2.tgz",
+      "integrity": "sha512-CCFP11Uietro6TUZpWBoq3Ql/6qss/ODC5XM6oNxckj72IHruFIj8V7Y0tL5x0aE6h38hlKcDf8NCxkQqz2edg==",
+      "dependencies": {
+        "@react-aria/focus": "^3.13.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-types/link": "^3.4.3",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/listbox": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/listbox/-/listbox-3.10.0.tgz",
+      "integrity": "sha512-4NelMDZAPoy2W4uoKZsMpdrC6XJQiZU+vpuhnzUT1eWTneDsEHKHSHQFtymoe8VrUEPrCV16EeMk1vRVvjCfAw==",
+      "dependencies": {
+        "@react-aria/focus": "^3.13.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/label": "^3.6.0",
+        "@react-aria/selection": "^3.16.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/collections": "^3.9.0",
+        "@react-stately/list": "^3.9.0",
+        "@react-types/listbox": "^3.4.2",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/live-announcer": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/live-announcer/-/live-announcer-3.3.1.tgz",
+      "integrity": "sha512-hsc77U7S16trM86d+peqJCOCQ7/smO1cybgdpOuzXyiwcHQw8RQ4GrXrS37P4Ux/44E9nMZkOwATQRT2aK8+Ew==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@react-aria/menu": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/menu/-/menu-3.10.0.tgz",
+      "integrity": "sha512-zOOOXvx21aGSxZsXvLa3NV48hLk0jBC/zu5WZHT0Mo/wAe0+43f8p/U3AT8Gc4WnxYbIestcdLaIwgeagSoLtQ==",
+      "dependencies": {
+        "@react-aria/focus": "^3.13.0",
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/overlays": "^3.15.0",
+        "@react-aria/selection": "^3.16.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/collections": "^3.9.0",
+        "@react-stately/menu": "^3.5.3",
+        "@react-stately/tree": "^3.7.0",
+        "@react-types/button": "^3.7.3",
+        "@react-types/menu": "^3.9.2",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/meter": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/meter/-/meter-3.4.3.tgz",
+      "integrity": "sha512-1RUr93cNfMqTfyGtQ+SqFYLqlOqza6TEmXmtdCExPuZVRUZRjQRkqPoYuL8CPwHKlU4sbSlLiNeUu/HhV6pyTg==",
+      "dependencies": {
+        "@react-aria/progress": "^3.4.3",
+        "@react-types/meter": "^3.3.2",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/numberfield": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/numberfield/-/numberfield-3.6.0.tgz",
+      "integrity": "sha512-LbtRS/JciPicYLjqAP87gufInzZ2rlOQlKu0tQK8l/Hwc2cPOWUldDXbrGgxrXwbMxfEASmfI6qYz8uhTGmIyw==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/live-announcer": "^3.3.1",
+        "@react-aria/spinbutton": "^3.5.0",
+        "@react-aria/textfield": "^3.10.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/numberfield": "^3.5.0",
+        "@react-types/button": "^3.7.3",
+        "@react-types/numberfield": "^3.4.2",
+        "@react-types/shared": "^3.18.1",
+        "@react-types/textfield": "^3.7.2",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/overlays": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/overlays/-/overlays-3.15.0.tgz",
+      "integrity": "sha512-MeLn74GvXZfi881NSx5sSd5eTduki/PMk4vPvMNp2Xm+9nGHm0FbGu2GMIGgarYy5JC7l/bOO7H01YrS4AozPg==",
+      "dependencies": {
+        "@react-aria/focus": "^3.13.0",
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/ssr": "^3.7.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-aria/visually-hidden": "^3.8.2",
+        "@react-stately/overlays": "^3.6.0",
+        "@react-types/button": "^3.7.3",
+        "@react-types/overlays": "^3.8.0",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/progress": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/progress/-/progress-3.4.3.tgz",
+      "integrity": "sha512-u8aUrnnQGsRZWx5vBfBhf70TeGeN/gEJzcthef5YDUQZG8O2IDhzR1GLqBmn1RvdcSDvBdhRSpMXd+6bL1WzGw==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/label": "^3.6.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-types/progress": "^3.4.1",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/radio": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/radio/-/radio-3.6.2.tgz",
+      "integrity": "sha512-R7vyh0G2HaUe0+SGa/LDMYuGnNC/15L6yfuljpP8ZUDPw9bR/6BuE1BDCI0ov1EXQ1lQ/vcvZMbf78OC72vPrg==",
+      "dependencies": {
+        "@react-aria/focus": "^3.13.0",
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/label": "^3.6.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/radio": "^3.8.2",
+        "@react-types/radio": "^3.4.2",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/searchfield": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/searchfield/-/searchfield-3.5.3.tgz",
+      "integrity": "sha512-OqkXTZrjesqRxBR0WIOh0cezwmuXDQpsdua9nnGj0+8BIGCHuxvUOpw1HA3eTsf4AbZfygngC7pMT1lOR21upg==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/textfield": "^3.10.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/searchfield": "^3.4.3",
+        "@react-types/button": "^3.7.3",
+        "@react-types/searchfield": "^3.4.2",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/select": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/select/-/select-3.11.0.tgz",
+      "integrity": "sha512-UEYhw7wK4XoPMVbTa3UykPcri9GIV777WvXeKEykS1nMbJzu1I1LUE5py4ymhaI7DbpZ+gWZPTA0iot8IYQOWQ==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/label": "^3.6.0",
+        "@react-aria/listbox": "^3.10.0",
+        "@react-aria/menu": "^3.10.0",
+        "@react-aria/selection": "^3.16.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-aria/visually-hidden": "^3.8.2",
+        "@react-stately/select": "^3.5.2",
+        "@react-types/button": "^3.7.3",
+        "@react-types/select": "^3.8.1",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/selection": {
+      "version": "3.16.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/selection/-/selection-3.16.0.tgz",
+      "integrity": "sha512-qQ4X0+wtLz0+qjsoj1T0hVehA0CbZdu0Ax+lCzWmj+ZDivtdeNpVQl+K0yj9p95MnzLgIbnY7zU2zDQrYqKDOQ==",
+      "dependencies": {
+        "@react-aria/focus": "^3.13.0",
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/collections": "^3.9.0",
+        "@react-stately/selection": "^3.13.2",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/separator": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/separator/-/separator-3.3.3.tgz",
+      "integrity": "sha512-kBGEXSSUiJLPS9foS5/7jgzpdp3/Yb1aMvVuvRGuNxDUsPAmvaYUT3qZ44Zf3hoxKfRFb4452KcoZ03w3Jfcvg==",
+      "dependencies": {
+        "@react-aria/utils": "^3.18.0",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/slider": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/slider/-/slider-3.5.0.tgz",
+      "integrity": "sha512-7qvzWZzwSww/+kLiSC8UJo4csHo8ndFzpzE2jUOom+hKMFomg5gIF4vqJI3ieWwF6rm6bbLmhxN4GvmNebVMwA==",
+      "dependencies": {
+        "@react-aria/focus": "^3.13.0",
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/label": "^3.6.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/radio": "^3.8.2",
+        "@react-stately/slider": "^3.4.0",
+        "@react-types/radio": "^3.4.2",
+        "@react-types/shared": "^3.18.1",
+        "@react-types/slider": "^3.5.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/spinbutton": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/spinbutton/-/spinbutton-3.5.0.tgz",
+      "integrity": "sha512-WWLPiJd2nbv17dSbcbOm+TXlLO9ZIEA86ft/CTkvRYRG48kDn++4f16QcA0Gr+7dKdLQGbKkCf61jMJ3q8t5Hw==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/live-announcer": "^3.3.1",
+        "@react-aria/utils": "^3.18.0",
+        "@react-types/button": "^3.7.3",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.7.0.tgz",
+      "integrity": "sha512-bfufjg4ESE5giN+Fxj1XIzS5f/YIhqcGc+Ve+vUUKU8xZ8t/Xtjlv8F3kjqDBQdk//n3mluFY7xG1wQVB9rMLQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/switch": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/switch/-/switch-3.5.2.tgz",
+      "integrity": "sha512-mhV4Ip3t241s7gp4ETDe61AsSDox5TZXkiWt8add65p/LMESYBju9hGtbrxkMNCW62AuYCTAIadHoEOpy9HIIg==",
+      "dependencies": {
+        "@react-aria/toggle": "^3.6.2",
+        "@react-stately/toggle": "^3.6.0",
+        "@react-types/switch": "^3.3.2",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/table": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/table/-/table-3.10.0.tgz",
+      "integrity": "sha512-N42Ill9fdjeWKC/516fPMpPa79B0c+teFJ/fhcROLFrlwotgLKwndIG/InkE1L6FKeiJ8JL33FgUnxfRGafa8Q==",
+      "dependencies": {
+        "@react-aria/focus": "^3.13.0",
+        "@react-aria/grid": "^3.8.0",
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/live-announcer": "^3.3.1",
+        "@react-aria/selection": "^3.16.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-aria/visually-hidden": "^3.8.2",
+        "@react-stately/collections": "^3.9.0",
+        "@react-stately/table": "^3.10.0",
+        "@react-stately/virtualizer": "^3.6.0",
+        "@react-types/checkbox": "^3.4.4",
+        "@react-types/grid": "^3.1.8",
+        "@react-types/shared": "^3.18.1",
+        "@react-types/table": "^3.7.0",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/tabs": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/tabs/-/tabs-3.6.1.tgz",
+      "integrity": "sha512-P/P3HA+b1Q917hVvXn1kzFl3dQnMTwYR8JKY5gjfjLQsAAEfJzSO3wLR0vNSp6Cz2FTAVCH4yzwP1G+bRLZVnw==",
+      "dependencies": {
+        "@react-aria/focus": "^3.13.0",
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/selection": "^3.16.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/list": "^3.9.0",
+        "@react-stately/tabs": "^3.5.0",
+        "@react-types/shared": "^3.18.1",
+        "@react-types/tabs": "^3.3.0",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/tag": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/tag/-/tag-3.1.0.tgz",
+      "integrity": "sha512-N3h34k23jK7xuMh4eMDJoUG1xsNUw6zz+r9mmSMMLCxU38w+RH27ywEpKheW25M7LhfggqTjbjnPOpPpBnrENQ==",
+      "dependencies": {
+        "@react-aria/gridlist": "^3.5.0",
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/label": "^3.6.0",
+        "@react-aria/selection": "^3.16.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/list": "^3.9.0",
+        "@react-types/button": "^3.7.3",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/textfield": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/textfield/-/textfield-3.10.0.tgz",
+      "integrity": "sha512-TYFgDTlxrljakD0TGOkoSCvot9BfVCZSrTKy3+/PICSTkPIzXThLIQmpX6yObLMXQSNW6SvBCl6CMetJMJHcbw==",
+      "dependencies": {
+        "@react-aria/focus": "^3.13.0",
+        "@react-aria/label": "^3.6.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-types/shared": "^3.18.1",
+        "@react-types/textfield": "^3.7.2",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/toggle": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/toggle/-/toggle-3.6.2.tgz",
+      "integrity": "sha512-bRz/ybajeLEsJLt1ARRL7CtWs6bwvkNLWy/wpJnH2TJ3+lMpH+EKbWBVJoAP7wQ5jIVVpxKJLhpf6w6x8ZLtdw==",
+      "dependencies": {
+        "@react-aria/focus": "^3.13.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/toggle": "^3.6.0",
+        "@react-types/checkbox": "^3.4.4",
+        "@react-types/shared": "^3.18.1",
+        "@react-types/switch": "^3.3.2",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/tooltip": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/tooltip/-/tooltip-3.6.0.tgz",
+      "integrity": "sha512-D38C7M58ZXWmY2+TXDczbbYRj9/KhIDyE/rLI0KhZR/iXDOJvmB9DT8HZuZLPsntq4Wl6mpmfPggT/R91nvR2Q==",
+      "dependencies": {
+        "@react-aria/focus": "^3.13.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/tooltip": "^3.4.2",
+        "@react-types/shared": "^3.18.1",
+        "@react-types/tooltip": "^3.4.2",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/utils": {
+      "version": "3.18.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.18.0.tgz",
+      "integrity": "sha512-eLs0ExzXx/D3P9qe6ophJ87ZFcI1oRTyRa51M59pCad7grrpk0gWcYrBjMwcR457YWOQQWCeLuq8QJl2QxCW6Q==",
+      "dependencies": {
+        "@react-aria/ssr": "^3.7.0",
+        "@react-stately/utils": "^3.7.0",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/visually-hidden": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/visually-hidden/-/visually-hidden-3.8.2.tgz",
+      "integrity": "sha512-MFTqqSvPfc8u3YlzNfQ3ITX4eVQpZDiSqLPKj3Zyr86CKlba5iG8WGqjiJhD2GNHlvmcF/mITXTsNzm0KxFE7g==",
+      "dependencies": {
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/calendar": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@react-stately/calendar/-/calendar-3.3.0.tgz",
+      "integrity": "sha512-fnqdxCTlkikgldEyW8ciPNUWhqaUsQKTx6X6XGob6VCwK59k0LmdlgZX+dXj0q2ezC+w4lnvz8TzpoRQ7GY8lw==",
+      "dependencies": {
+        "@internationalized/date": "^3.3.0",
+        "@react-stately/utils": "^3.7.0",
+        "@react-types/calendar": "^3.3.0",
+        "@react-types/datepicker": "^3.4.0",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/checkbox": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@react-stately/checkbox/-/checkbox-3.4.3.tgz",
+      "integrity": "sha512-TEd50vrUTHZWt8qO7ySLG2MlWJbsCvyx+pA1VhLJw6hRfjqorAjmCcpV2sEdu3EkLG7hA/Jw+7iBmGPlxmBN6A==",
+      "dependencies": {
+        "@react-stately/toggle": "^3.6.0",
+        "@react-stately/utils": "^3.7.0",
+        "@react-types/checkbox": "^3.4.4",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/collections": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/@react-stately/collections/-/collections-3.9.0.tgz",
+      "integrity": "sha512-CBpXSKmCpbIFpIToVFlzo2R1/Cj+dcU8gWw2KfPyyJX+2wHKkDIvtK01EAytDLX/vkE8O+fD5a7qMZ3pf8gpeA==",
+      "dependencies": {
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/combobox": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/combobox/-/combobox-3.5.2.tgz",
+      "integrity": "sha512-vMp3/xWv9a3DglTvvcQsJup3zZkmIANbf799j21Kc6Z4DXs+ohU81Qg5q9Z/5QuTEPsJFFv7vKXtb+VlP/TK2g==",
+      "dependencies": {
+        "@react-stately/collections": "^3.9.0",
+        "@react-stately/list": "^3.9.0",
+        "@react-stately/menu": "^3.5.3",
+        "@react-stately/select": "^3.5.2",
+        "@react-stately/utils": "^3.7.0",
+        "@react-types/combobox": "^3.6.2",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/datepicker": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@react-stately/datepicker/-/datepicker-3.5.0.tgz",
+      "integrity": "sha512-GPscIz4jP9hDa1ChgMAWAt8g8mCpjILmSgfyuIZXegPZfa3ryKuQutYU/JGJrBom1xablAgeHIN1AWpve+4f1w==",
+      "dependencies": {
+        "@internationalized/date": "^3.3.0",
+        "@internationalized/string": "^3.1.1",
+        "@react-stately/overlays": "^3.6.0",
+        "@react-stately/utils": "^3.7.0",
+        "@react-types/datepicker": "^3.4.0",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/dnd": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/dnd/-/dnd-3.2.2.tgz",
+      "integrity": "sha512-1Eb4ZGh2xzTLDBV/Y+c/UoOvd2A9rglj+5o1Vo7HuIVWWc8tDJXq499B7rp/5JPcfQspF5OI4h08OWZFlPd/Ig==",
+      "dependencies": {
+        "@react-stately/selection": "^3.13.2",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/grid": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@react-stately/grid/-/grid-3.7.0.tgz",
+      "integrity": "sha512-3eb7+7p9Xh/+luUOyieY2bM4CsARA8WnRB7c2++gh4dh9AEpZV4VGICGTe35+dJYr+9pbYQqVMEcEFUOaJJzZw==",
+      "dependencies": {
+        "@react-stately/collections": "^3.9.0",
+        "@react-stately/selection": "^3.13.2",
+        "@react-types/grid": "^3.1.8",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/layout": {
+      "version": "3.12.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/layout/-/layout-3.12.2.tgz",
+      "integrity": "sha512-9AGA11G5+Uo/mQoJR90lbqTR4+UFSl13jQMtqom/BYxkFGrHh3gWSUWEmg2h+n1Qa1q+oJjgaeQ9bxqlrR/wpQ==",
+      "dependencies": {
+        "@react-stately/collections": "^3.9.0",
+        "@react-stately/table": "^3.10.0",
+        "@react-stately/virtualizer": "^3.6.0",
+        "@react-types/grid": "^3.1.8",
+        "@react-types/shared": "^3.18.1",
+        "@react-types/table": "^3.7.0",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/list": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/@react-stately/list/-/list-3.9.0.tgz",
+      "integrity": "sha512-9DNV02zFEkJG38AtHyhvGMfpJQGwV0KMyMObs+KEujzCh+rmHdTu1rWdjzLw1ve+ecESK8UMsF4Kt6wwO0Qi6g==",
+      "dependencies": {
+        "@react-stately/collections": "^3.9.0",
+        "@react-stately/selection": "^3.13.2",
+        "@react-stately/utils": "^3.7.0",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/menu": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@react-stately/menu/-/menu-3.5.3.tgz",
+      "integrity": "sha512-RFgwVD/4BgTtJkexi1WaHpAEkQWZPvpyri0LQUgXWVqBf9PpjB8wigF3XBLMDNkL+YXE0QtzQZBNS1nJECf7rg==",
+      "dependencies": {
+        "@react-stately/overlays": "^3.6.0",
+        "@react-stately/utils": "^3.7.0",
+        "@react-types/menu": "^3.9.2",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/numberfield": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@react-stately/numberfield/-/numberfield-3.5.0.tgz",
+      "integrity": "sha512-2R39hXQpQzoVDl1r3TZDKUEKf6lHbhiOpcBOYTPOne+YJOyMXQ6PnXAOTVuIcgTNdagukhXQVoDYH2B/1FvJOA==",
+      "dependencies": {
+        "@internationalized/number": "^3.2.1",
+        "@react-stately/utils": "^3.7.0",
+        "@react-types/numberfield": "^3.4.2",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/overlays": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-stately/overlays/-/overlays-3.6.0.tgz",
+      "integrity": "sha512-0Bgy4xwCXKM+jkHAGJMN19ZFXNgKstf6qJozfH79j3E5erY30ZStwT7gbAnwv112zFUQLHBKo+3wJTGWuHgs8Q==",
+      "dependencies": {
+        "@react-stately/utils": "^3.7.0",
+        "@react-types/overlays": "^3.8.0",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/radio": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/radio/-/radio-3.8.2.tgz",
+      "integrity": "sha512-tjlXask1IEGzzXwdc495K+wsHhyVhtaMhAeTbrdTD1a1fdg2g/jA0vWhN/KGO/CpnZT4vXGjJcY686Rmlrt9EQ==",
+      "dependencies": {
+        "@react-stately/utils": "^3.7.0",
+        "@react-types/radio": "^3.4.2",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/searchfield": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@react-stately/searchfield/-/searchfield-3.4.3.tgz",
+      "integrity": "sha512-mTdbWGpOA7foZJwkiR0AP5beh66I1feHMQ9/7/3lR4ETqLQ29vVXte+jc3+RrlFy+Adup0Ziwzs3DMfMZ0rN8Q==",
+      "dependencies": {
+        "@react-stately/utils": "^3.7.0",
+        "@react-types/searchfield": "^3.4.2",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/select": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/select/-/select-3.5.2.tgz",
+      "integrity": "sha512-hIDAXFNg+q8rGQy5YKEaOz4NoWsckoQoi18vY8u6VsFUIhfYaYL76x6zKbTwekZLYuroifH7Fv81tBvRZmXikQ==",
+      "dependencies": {
+        "@react-stately/collections": "^3.9.0",
+        "@react-stately/list": "^3.9.0",
+        "@react-stately/menu": "^3.5.3",
+        "@react-stately/selection": "^3.13.2",
+        "@react-stately/utils": "^3.7.0",
+        "@react-types/select": "^3.8.1",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/selection": {
+      "version": "3.13.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/selection/-/selection-3.13.2.tgz",
+      "integrity": "sha512-rVnseneG9XWuS0+JEsa0EhRfTZsupm9JiEuZHZ19YeLewjVdFpjgBMDZb8ZYoyilNXVjyUwaoq94FsOXotsg9w==",
+      "dependencies": {
+        "@react-stately/collections": "^3.9.0",
+        "@react-stately/utils": "^3.7.0",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/slider": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@react-stately/slider/-/slider-3.4.0.tgz",
+      "integrity": "sha512-VvGJ1XkFIIEXP0eg9xqK/NztimBCSRmEqLgqlwzeDJAtuFXZzPRgJGrodGnqGmhoLsTFaY8YleLh/1hgf6rO0g==",
+      "dependencies": {
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-stately/utils": "^3.7.0",
+        "@react-types/shared": "^3.18.1",
+        "@react-types/slider": "^3.5.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/table": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/@react-stately/table/-/table-3.10.0.tgz",
+      "integrity": "sha512-LDF97lZIkCDYNFw5Yz1eREedO9QerPDchxXUXlPVyjwLiZ4ADlhz6W/NTq6gm2PgrHljY/0+Kd5zEgVySLMTEw==",
+      "dependencies": {
+        "@react-stately/collections": "^3.9.0",
+        "@react-stately/grid": "^3.7.0",
+        "@react-stately/selection": "^3.13.2",
+        "@react-types/grid": "^3.1.8",
+        "@react-types/shared": "^3.18.1",
+        "@react-types/table": "^3.7.0",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/tabs": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@react-stately/tabs/-/tabs-3.5.0.tgz",
+      "integrity": "sha512-N6B0+ZyW6mbmY/kHl0GKGj/i7MtA141A7yYJFSLDdvq1Hb2x7V1Y6gfl40FkSW4W9y3oQtKU+rTxV0EyjEJMWQ==",
+      "dependencies": {
+        "@react-stately/list": "^3.9.0",
+        "@react-stately/utils": "^3.7.0",
+        "@react-types/shared": "^3.18.1",
+        "@react-types/tabs": "^3.3.0",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/toggle": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-stately/toggle/-/toggle-3.6.0.tgz",
+      "integrity": "sha512-w+Aqh78H9MLs0FDUYTjAzYhrHQWaDJ2zWjyg2oYcSvERES0+D0obmPvtJLWsFrJ8fHJrTmxd7ezVFBY9BbPeFQ==",
+      "dependencies": {
+        "@react-stately/utils": "^3.7.0",
+        "@react-types/checkbox": "^3.4.4",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/tooltip": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/tooltip/-/tooltip-3.4.2.tgz",
+      "integrity": "sha512-tDkoYyEfdo44a3CoeiF794TFTs36d9faX0QvbR1QZ2KksjCMceOL5+26MlQjnhjEydYqw1X1YlTZbtMeor4uQw==",
+      "dependencies": {
+        "@react-stately/overlays": "^3.6.0",
+        "@react-stately/utils": "^3.7.0",
+        "@react-types/tooltip": "^3.4.2",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/tree": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@react-stately/tree/-/tree-3.7.0.tgz",
+      "integrity": "sha512-oXOjJwy/o3XSJyBkudiEvnjWzto2jy48kmGjHCJ+B7Hv+WcbN9o7iAaHv11lOqMXRSpuF9gqox4ZZCASG+smIQ==",
+      "dependencies": {
+        "@react-stately/collections": "^3.9.0",
+        "@react-stately/selection": "^3.13.2",
+        "@react-stately/utils": "^3.7.0",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/utils": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.7.0.tgz",
+      "integrity": "sha512-VbApRiUV2rhozOfk0Qj9xt0qjVbQfLTgAzXLdrfeZSBnyIgo1bFRnjDpnDZKZUUCeGQcJJI03I9niaUtY+kwJQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-stately/virtualizer": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-stately/virtualizer/-/virtualizer-3.6.0.tgz",
+      "integrity": "sha512-f78BQT9ZSD5Hpqf6axRoNQJFqV+JjMSV2VixMfhIAcqi/fn8rEN2j3g4SPdFzTtFf2FR3+AKdBFu5tsgtk1Tgw==",
+      "dependencies": {
+        "@react-aria/utils": "^3.18.0",
+        "@react-types/shared": "^3.18.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/breadcrumbs": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-types/breadcrumbs/-/breadcrumbs-3.6.0.tgz",
+      "integrity": "sha512-EnZk/f59yMQUmH2DW21uo3ajQ7nLEZ/sIMSfEZYP69CFe1by0RKi9aFRjJSrYjxRC0PSHTVPTjIG72KeBSsUGA==",
+      "dependencies": {
+        "@react-types/link": "^3.4.3",
+        "@react-types/shared": "^3.18.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/button": {
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/@react-types/button/-/button-3.7.3.tgz",
+      "integrity": "sha512-Fz1t/kYinHDunmct3tADD2h3UDBPZUfRE+zCzYiymz0g+v/zYHTAqnkWToTF9ptf8HIB5L2Z2VFYpeUHFfpWzg==",
+      "dependencies": {
+        "@react-types/shared": "^3.18.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/calendar": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@react-types/calendar/-/calendar-3.3.0.tgz",
+      "integrity": "sha512-5Qga+eixj+PembMwzcJmQlxif4XhSJJ54JcoyYHVf6mYLw3aE81Jc52OBi1FEWBJOW9YVOTk7VbWPFFF/oBI8A==",
+      "dependencies": {
+        "@internationalized/date": "^3.3.0",
+        "@react-types/shared": "^3.18.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/checkbox": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/@react-types/checkbox/-/checkbox-3.4.4.tgz",
+      "integrity": "sha512-rJNhbW4R9HTvdbF2oTZmqGiZ/WVP3/XsU4gae7tfdhSYjG+5T5h9zau1vRhz++zwKn57wfcyNn6a83GDhhgkVw==",
+      "dependencies": {
+        "@react-types/shared": "^3.18.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/combobox": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/@react-types/combobox/-/combobox-3.6.2.tgz",
+      "integrity": "sha512-qitu/W3Z3/ihyqocy+8n4HZKRXF5JTMHl1ug3rKps5yCNnVdkWwjPFPM6w180c9QjquThNY3o947LZ1v59qJ4A==",
+      "dependencies": {
+        "@react-types/shared": "^3.18.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/datepicker": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@react-types/datepicker/-/datepicker-3.4.0.tgz",
+      "integrity": "sha512-gQmbeNdVPXpaX8XsvxQb6nRLQZNlsMnDLVVpagVno7bifz2cdbthLfMe124nNT/Xr+JXolP+BtlYlZ7IRQVxdA==",
+      "dependencies": {
+        "@internationalized/date": "^3.3.0",
+        "@react-types/calendar": "^3.3.0",
+        "@react-types/overlays": "^3.8.0",
+        "@react-types/shared": "^3.18.1"
       },
-      "bin": {
-        "tao": "index.js"
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@octokit/auth-token": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-3.0.4.tgz",
-      "integrity": "sha512-TWFX7cZF2LXoCvdmJWY7XVPi74aSY0+FfBZNSXEXFkMpjcqsQwDSYVv5FhRFaI0V1ECnwbz4j59T/G+rXNWaIQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 14"
+    "node_modules/@react-types/dialog": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@react-types/dialog/-/dialog-3.5.3.tgz",
+      "integrity": "sha512-iTdg+UZiJpJe7Rnu9eILf8Hcd9li0Kg2eg8ba8dIc1O++ymqPmrdPWj9wj1JB9cl94E2Yg4w3W5YINiLXkdoeA==",
+      "dependencies": {
+        "@react-types/overlays": "^3.8.0",
+        "@react-types/shared": "^3.18.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@octokit/core": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-4.2.4.tgz",
-      "integrity": "sha512-rYKilwgzQ7/imScn3M9/pFfUf4I1AZEH3KhyJmtPdE2zfaXAn2mFfUy4FbKewzc2We5y/LlKLj36fWJLKC2SIQ==",
-      "dev": true,
+    "node_modules/@react-types/grid": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@react-types/grid/-/grid-3.1.8.tgz",
+      "integrity": "sha512-NKk4pDbW2QXJOYnDSAYhta81CGwXOc/9tVw2WFs+1wacvxeKmh1Q+n36uAFcIdQOvVRqeGTJaYiqLFmF3fC3tA==",
       "dependencies": {
-        "@octokit/auth-token": "^3.0.0",
-        "@octokit/graphql": "^5.0.0",
-        "@octokit/request": "^6.0.0",
-        "@octokit/request-error": "^3.0.0",
-        "@octokit/types": "^9.0.0",
-        "before-after-hook": "^2.2.0",
-        "universal-user-agent": "^6.0.0"
+        "@react-types/shared": "^3.18.1"
       },
-      "engines": {
-        "node": ">= 14"
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@octokit/endpoint": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-7.0.6.tgz",
-      "integrity": "sha512-5L4fseVRUsDFGR00tMWD/Trdeeihn999rTMGRMC1G/Ldi1uWlWJzI98H4Iak5DB/RVvQuyMYKqSK/R6mbSOQyg==",
-      "dev": true,
+    "node_modules/@react-types/label": {
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/@react-types/label/-/label-3.7.4.tgz",
+      "integrity": "sha512-SfTqPRI39GE3GFD5ZGYEeX9jXQrNqDeaaI36PJhnbgGVFz96oVVkhy9t9c2bMHcbhLLENYIHMzxrvVqXS07e7A==",
       "dependencies": {
-        "@octokit/types": "^9.0.0",
-        "is-plain-object": "^5.0.0",
-        "universal-user-agent": "^6.0.0"
+        "@react-types/shared": "^3.18.1"
       },
-      "engines": {
-        "node": ">= 14"
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@octokit/graphql": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-5.0.6.tgz",
-      "integrity": "sha512-Fxyxdy/JH0MnIB5h+UQ3yCoh1FG4kWXfFKkpWqjZHw/p+Kc8Y44Hu/kCgNBT6nU1shNumEchmW/sUO1JuQnPcw==",
-      "dev": true,
+    "node_modules/@react-types/link": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@react-types/link/-/link-3.4.3.tgz",
+      "integrity": "sha512-opKfkcaeV0cir64jPcy7DS0BrmdfuWMjua+MSeNv7FfT/b65rFgPfAOKZcvLWDsaxT5HYb7pivYPBfjKqHsQKw==",
       "dependencies": {
-        "@octokit/request": "^6.0.0",
-        "@octokit/types": "^9.0.0",
-        "universal-user-agent": "^6.0.0"
+        "@react-aria/interactions": "^3.16.0",
+        "@react-types/shared": "^3.18.1"
       },
-      "engines": {
-        "node": ">= 14"
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@octokit/openapi-types": {
-      "version": "18.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-18.0.0.tgz",
-      "integrity": "sha512-V8GImKs3TeQRxRtXFpG2wl19V7444NIOTDF24AWuIbmNaNYOQMWRbjcGDXV5B+0n887fgDcuMNOmlul+k+oJtw==",
-      "dev": true
-    },
-    "node_modules/@octokit/plugin-enterprise-rest": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-enterprise-rest/-/plugin-enterprise-rest-6.0.1.tgz",
-      "integrity": "sha512-93uGjlhUD+iNg1iWhUENAtJata6w5nE+V4urXOAlIXdco6xNZtUSfYY8dzp3Udy74aqO/B5UZL80x/YMa5PKRw==",
-      "dev": true
-    },
-    "node_modules/@octokit/plugin-paginate-rest": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-3.1.0.tgz",
-      "integrity": "sha512-+cfc40pMzWcLkoDcLb1KXqjX0jTGYXjKuQdFQDc6UAknISJHnZTiBqld6HDwRJvD4DsouDKrWXNbNV0lE/3AXA==",
-      "dev": true,
+    "node_modules/@react-types/listbox": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@react-types/listbox/-/listbox-3.4.2.tgz",
+      "integrity": "sha512-qg980T+tl15pqgfuK8V6z+vsvsIrJEEPxcupQXP3T1O0LxWxJDakZHF0lV9qwfyB9XlnVSMZfkjDiZp9Wgf8QQ==",
       "dependencies": {
-        "@octokit/types": "^6.41.0"
-      },
-      "engines": {
-        "node": ">= 14"
+        "@react-types/shared": "^3.18.1"
       },
       "peerDependencies": {
-        "@octokit/core": ">=4"
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@octokit/plugin-paginate-rest/node_modules/@octokit/openapi-types": {
-      "version": "12.11.0",
-      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-12.11.0.tgz",
-      "integrity": "sha512-VsXyi8peyRq9PqIz/tpqiL2w3w80OgVMwBHltTml3LmVvXiphgeqmY9mvBw9Wu7e0QWk/fqD37ux8yP5uVekyQ==",
-      "dev": true
+    "node_modules/@react-types/menu": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/@react-types/menu/-/menu-3.9.2.tgz",
+      "integrity": "sha512-OIuEOGqo8gHaP4k3Ua+RvuPN2/3Sgcl30dNFIGaK7hra4eWxOUu8TTC+/Quy6xozR/SvFhqCLCoMKixy6MblWQ==",
+      "dependencies": {
+        "@react-types/overlays": "^3.8.0",
+        "@react-types/shared": "^3.18.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
     },
-    "node_modules/@octokit/plugin-paginate-rest/node_modules/@octokit/types": {
-      "version": "6.41.0",
-      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
-      "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
-      "dev": true,
+    "node_modules/@react-types/meter": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@react-types/meter/-/meter-3.3.2.tgz",
+      "integrity": "sha512-o21Zz+3LNjvBueMap+q2otGp5t2Xeb/lIMM4Y+v8j5XO+bLcHaAjdQB/TgKRe8iYFm3IqwpVtV9A38IWDtpLRQ==",
       "dependencies": {
-        "@octokit/openapi-types": "^12.11.0"
+        "@react-types/progress": "^3.4.1",
+        "@react-types/shared": "^3.18.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@octokit/plugin-request-log": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz",
-      "integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==",
-      "dev": true,
+    "node_modules/@react-types/numberfield": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@react-types/numberfield/-/numberfield-3.4.2.tgz",
+      "integrity": "sha512-SGzuuFf5wCSRPvpV+bnykiXSIt8pkpBBVp8tlygB66pQSBV7VLdUvWGohaayPSM+3Z+WkU+osgzYtGq5wh+C3Q==",
+      "dependencies": {
+        "@react-types/shared": "^3.18.1"
+      },
       "peerDependencies": {
-        "@octokit/core": ">=3"
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@octokit/plugin-rest-endpoint-methods": {
-      "version": "6.8.1",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-6.8.1.tgz",
-      "integrity": "sha512-QrlaTm8Lyc/TbU7BL/8bO49vp+RZ6W3McxxmmQTgYxf2sWkO8ZKuj4dLhPNJD6VCUW1hetCmeIM0m6FTVpDiEg==",
-      "dev": true,
+    "node_modules/@react-types/overlays": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.0.tgz",
+      "integrity": "sha512-0JxwUW3xwXjsT+nVI5dVE1KUm8QKxnQj9vjqgsazX213+klRd/QdeuFJgcbxzCVFOS/mLkP4o/ATjxt4+1eQsA==",
       "dependencies": {
-        "@octokit/types": "^8.1.1",
-        "deprecation": "^2.3.1"
+        "@react-types/shared": "^3.18.1"
       },
-      "engines": {
-        "node": ">= 14"
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/progress": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@react-types/progress/-/progress-3.4.1.tgz",
+      "integrity": "sha512-Y6cTvvJjbfFBeB7Zb3PizhhO3+YLWXpIP8opto15RWu11ktgZVMUgsnlsJgE3dFeoZ7UHwXdCYf8JOzBw5VPHA==",
+      "dependencies": {
+        "@react-types/shared": "^3.18.1"
       },
       "peerDependencies": {
-        "@octokit/core": ">=3"
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@octokit/plugin-rest-endpoint-methods/node_modules/@octokit/openapi-types": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-14.0.0.tgz",
-      "integrity": "sha512-HNWisMYlR8VCnNurDU6os2ikx0s0VyEjDYHNS/h4cgb8DeOxQ0n72HyinUtdDVxJhFy3FWLGl0DJhfEWk3P5Iw==",
-      "dev": true
+    "node_modules/@react-types/radio": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@react-types/radio/-/radio-3.4.2.tgz",
+      "integrity": "sha512-SE6sjZjZbyuJMJNNdlhoutVr+QFRt1Vz7DZj4UaOswW5SD/Xb+xFdW8i6ETKdRN17am/5SC89ltWe0R3q0pVkA==",
+      "dependencies": {
+        "@react-types/shared": "^3.18.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
     },
-    "node_modules/@octokit/plugin-rest-endpoint-methods/node_modules/@octokit/types": {
-      "version": "8.2.1",
-      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-8.2.1.tgz",
-      "integrity": "sha512-8oWMUji8be66q2B9PmEIUyQm00VPDPun07umUWSaCwxmeaquFBro4Hcc3ruVoDo3zkQyZBlRvhIMEYS3pBhanw==",
-      "dev": true,
+    "node_modules/@react-types/searchfield": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@react-types/searchfield/-/searchfield-3.4.2.tgz",
+      "integrity": "sha512-HQm++hIXVfEbjbRey6hYV/5hLEO6gtwt4Mft3u5I5BiT7yoQqQAD/8z9S8aUXDUU9KTrAKfL1DwrFQSkOsCWJA==",
       "dependencies": {
-        "@octokit/openapi-types": "^14.0.0"
+        "@react-types/shared": "^3.18.1",
+        "@react-types/textfield": "^3.7.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@octokit/request": {
-      "version": "6.2.8",
-      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-6.2.8.tgz",
-      "integrity": "sha512-ow4+pkVQ+6XVVsekSYBzJC0VTVvh/FCTUUgTsboGq+DTeWdyIFV8WSCdo0RIxk6wSkBTHqIK1mYuY7nOBXOchw==",
-      "dev": true,
+    "node_modules/@react-types/select": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@react-types/select/-/select-3.8.1.tgz",
+      "integrity": "sha512-ByVKKwgpE3d08jI+Ibuom/qphlBiDKpVMwXgFgVZRAN2YvVrsix8arSo7kmXtzekz91qqDBqtt7DBCfT0E1WKw==",
       "dependencies": {
-        "@octokit/endpoint": "^7.0.0",
-        "@octokit/request-error": "^3.0.0",
-        "@octokit/types": "^9.0.0",
-        "is-plain-object": "^5.0.0",
-        "node-fetch": "^2.6.7",
-        "universal-user-agent": "^6.0.0"
+        "@react-types/shared": "^3.18.1"
       },
-      "engines": {
-        "node": ">= 14"
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@octokit/request-error": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-3.0.3.tgz",
-      "integrity": "sha512-crqw3V5Iy2uOU5Np+8M/YexTlT8zxCfI+qu+LxUB7SZpje4Qmx3mub5DfEKSO8Ylyk0aogi6TYdf6kxzh2BguQ==",
-      "dev": true,
+    "node_modules/@react-types/shared": {
+      "version": "3.18.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.18.1.tgz",
+      "integrity": "sha512-OpTYRFS607Ctfd6Tmhyk6t6cbFyDhO5K+etU35X50pMzpypo1b7vF0mkngEeTc0Xwl0e749ONZNPZskMyu5k8w==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/slider": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@react-types/slider/-/slider-3.5.1.tgz",
+      "integrity": "sha512-8+AMNexx7q7DqfAtQKC5tgnZdG/tIwG2tcEbFCfAQA09Djrt/xiMNz+mc7SsV1PWoWwVuSDFH9QqKPodOrJHDg==",
       "dependencies": {
-        "@octokit/types": "^9.0.0",
-        "deprecation": "^2.0.0",
-        "once": "^1.4.0"
+        "@react-types/shared": "^3.18.1"
       },
-      "engines": {
-        "node": ">= 14"
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@octokit/rest": {
-      "version": "19.0.3",
-      "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-19.0.3.tgz",
-      "integrity": "sha512-5arkTsnnRT7/sbI4fqgSJ35KiFaN7zQm0uQiQtivNQLI8RQx8EHwJCajcTUwmaCMNDg7tdCvqAnc7uvHHPxrtQ==",
-      "dev": true,
+    "node_modules/@react-types/switch": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@react-types/switch/-/switch-3.3.2.tgz",
+      "integrity": "sha512-L0XF4J43Q7HCAJXqseAk6RMteK6k1jQ0zrG05r6lSCkxaS9fGUlgLTCiFUsf07x0ADH1Xyc7PwpfJjyEr5A4tA==",
       "dependencies": {
-        "@octokit/core": "^4.0.0",
-        "@octokit/plugin-paginate-rest": "^3.0.0",
-        "@octokit/plugin-request-log": "^1.0.4",
-        "@octokit/plugin-rest-endpoint-methods": "^6.0.0"
+        "@react-types/checkbox": "^3.4.4",
+        "@react-types/shared": "^3.18.1"
       },
-      "engines": {
-        "node": ">= 14"
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@octokit/types": {
-      "version": "9.3.2",
-      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-9.3.2.tgz",
-      "integrity": "sha512-D4iHGTdAnEEVsB8fl95m1hiz7D5YiRdQ9b/OEb3BYRVwbLsGHcRVPz+u+BgRLNk0Q0/4iZCBqDN96j2XNxfXrA==",
-      "dev": true,
+    "node_modules/@react-types/table": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/@react-types/table/-/table-3.7.0.tgz",
+      "integrity": "sha512-tUSJPdU2eNjH/CRHs5pOCKDyQxzq8b1rJZHldvRK/GCW+B98debFOueYgw4+YGQ1E33IyzAwid+FXgY3wlZlHg==",
       "dependencies": {
-        "@octokit/openapi-types": "^18.0.0"
+        "@react-types/grid": "^3.1.8",
+        "@react-types/shared": "^3.18.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@parcel/watcher": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.0.4.tgz",
-      "integrity": "sha512-cTDi+FUDBIUOBKEtj+nhiJ71AZVlkAsQFuGQTun5tV9mwQBQgZvhCzG+URPQc8myeN32yRVZEfVAPCs1RW+Jvg==",
-      "dev": true,
-      "hasInstallScript": true,
+    "node_modules/@react-types/tabs": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@react-types/tabs/-/tabs-3.3.0.tgz",
+      "integrity": "sha512-uXDVXBBppb+9S8bhxF7LZhgptrF5ll25SX8/jrpnXOR0jpihq6K3fkSe5M/OBnGsybuyVGN7+Np5v7UUYrM5SQ==",
       "dependencies": {
-        "node-addon-api": "^3.2.1",
-        "node-gyp-build": "^4.3.0"
+        "@react-types/shared": "^3.18.1"
       },
-      "engines": {
-        "node": ">= 10.0.0"
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/textfield": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@react-types/textfield/-/textfield-3.7.2.tgz",
+      "integrity": "sha512-TsZTf1+4Ve9QHm6mbXr26uLOA4QtZPgyjYgYclL2nHoOl67algeQIFxIVfdlNIKFFMOw5BtC6Mer0I3KUWtbOQ==",
+      "dependencies": {
+        "@react-types/shared": "^3.18.1"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=14"
+    "node_modules/@react-types/tooltip": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@react-types/tooltip/-/tooltip-3.4.2.tgz",
+      "integrity": "sha512-jkuhT4KsU3ePfVrLeQv3Z2Vt0SwZmFNUoVIlK6Q1QR8H/TuWG+SDKjbwNLcCdeVfAXcJLbEfPDT2zyGeQTwNEA==",
+      "dependencies": {
+        "@react-types/overlays": "^3.8.0",
+        "@react-types/shared": "^3.18.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
     "node_modules/@remix-run/router": {
@@ -7839,6 +9289,14 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz",
+      "integrity": "sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "8.20.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.1.tgz",
@@ -10796,6 +12254,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/cmd-shim": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-5.0.0.tgz",
@@ -15075,6 +16541,17 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/intl-messageformat": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.5.0.tgz",
+      "integrity": "sha512-AvojYuOaRb6r2veOKfTVpxH9TrmjSdc5iR9R5RgBwrDZYSmAAFVT+QLbW3C4V7Qsg0OguMp67Q/EoUkxZzXRGw==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "1.17.0",
+        "@formatjs/fast-memoize": "2.2.0",
+        "@formatjs/icu-messageformat-parser": "2.6.0",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/ip": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
@@ -21876,6 +23353,53 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-aria": {
+      "version": "3.26.0",
+      "resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.26.0.tgz",
+      "integrity": "sha512-G+dh25hEdDLfAGbKyahzasnyxXhd99y6xlMZjNtHoWB7wXod/9M3P3W6mdANvCEogxU28ATRdV1bv6A2JbuSYg==",
+      "dependencies": {
+        "@react-aria/breadcrumbs": "^3.5.3",
+        "@react-aria/button": "^3.8.0",
+        "@react-aria/calendar": "^3.4.0",
+        "@react-aria/checkbox": "^3.9.2",
+        "@react-aria/combobox": "^3.6.2",
+        "@react-aria/datepicker": "^3.5.0",
+        "@react-aria/dialog": "^3.5.3",
+        "@react-aria/dnd": "^3.3.0",
+        "@react-aria/focus": "^3.13.0",
+        "@react-aria/gridlist": "^3.5.0",
+        "@react-aria/i18n": "^3.8.0",
+        "@react-aria/interactions": "^3.16.0",
+        "@react-aria/label": "^3.6.0",
+        "@react-aria/link": "^3.5.2",
+        "@react-aria/listbox": "^3.10.0",
+        "@react-aria/menu": "^3.10.0",
+        "@react-aria/meter": "^3.4.3",
+        "@react-aria/numberfield": "^3.6.0",
+        "@react-aria/overlays": "^3.15.0",
+        "@react-aria/progress": "^3.4.3",
+        "@react-aria/radio": "^3.6.2",
+        "@react-aria/searchfield": "^3.5.3",
+        "@react-aria/select": "^3.11.0",
+        "@react-aria/selection": "^3.16.0",
+        "@react-aria/separator": "^3.3.3",
+        "@react-aria/slider": "^3.5.0",
+        "@react-aria/ssr": "^3.7.0",
+        "@react-aria/switch": "^3.5.2",
+        "@react-aria/table": "^3.10.0",
+        "@react-aria/tabs": "^3.6.1",
+        "@react-aria/tag": "^3.1.0",
+        "@react-aria/textfield": "^3.10.0",
+        "@react-aria/tooltip": "^3.6.0",
+        "@react-aria/utils": "^3.18.0",
+        "@react-aria/visually-hidden": "^3.8.2",
+        "@react-types/shared": "^3.18.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
     "node_modules/react-colorful": {
       "version": "5.6.1",
       "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
@@ -25300,6 +26824,14 @@
         "react-dom": "16.8.0 - 18"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util": {
       "version": "0.12.5",
       "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
@@ -26902,6 +28434,29 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zustand": {
+      "version": "4.3.9",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.3.9.tgz",
+      "integrity": "sha512-Tat5r8jOMG1Vcsj8uldMyqYKC5IZvQif8zetmLHs9WoZlntTHmIoNM8TpLRY31ExncuUvUOXehd0kvahkuHjDw==",
+      "dependencies": {
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "immer": ">=9.0",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/zwitch": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",

From 86bac1e199fa508f4b3e06e3e774485dea1f0cdb Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 11 Aug 2023 15:53:08 +0530
Subject: [PATCH 43/48] feat(bricks): modify bricks ho handle drag state

---
 .../brick/design0/components/BrickBlock.tsx   | 79 ++++++++++++++++++-
 .../brick/design0/components/BrickData.tsx    | 58 +++++++++++++-
 .../design0/components/BrickExpression.tsx    | 50 +++++++++++-
 .../design0/components/BrickStatement.tsx     | 58 +++++++++++++-
 4 files changed, 237 insertions(+), 8 deletions(-)

diff --git a/modules/code-builder/src/brick/design0/components/BrickBlock.tsx b/modules/code-builder/src/brick/design0/components/BrickBlock.tsx
index 92c3293f..fdde61b3 100644
--- a/modules/code-builder/src/brick/design0/components/BrickBlock.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickBlock.tsx
@@ -1,21 +1,96 @@
+import { useMove } from 'react-aria';
+import { useState } from 'react';
 import type { JSX } from 'react';
 import type { IBrickBlock, TBrickCoords } from '@/@types/brick';
+import { useBricksCoords } from '../../../../playground/pages/WorkSpace/BricksCoordsStore';
+import type { Brick } from 'playground/pages/WorkSpace/data';
 
 // -------------------------------------------------------------------------------------------------
 
 export default function ({
+  id,
+  brickData,
   instance,
   coords = { x: 0, y: 0 },
 }: {
+  id: string;
+  brickData: Brick;
   instance: IBrickBlock;
   coords?: TBrickCoords;
 }): JSX.Element {
+  const CONTAINER_SIZE_X = 800;
+  const CONTAINER_SIZE_Y = 700;
+  const BRICK_HEIGHT = instance.bBoxBrick.extent.height;
+  const BRICK_WIDTH = instance.bBoxBrick.extent.width;
+  const { getCoords, setCoords } = useBricksCoords();
+  const brickCoords = getCoords(id)!;
+  const [color, setColor] = useState(instance.colorBg as string);
+
+  const clampX = (pos: number) => Math.min(Math.max(pos, 0), CONTAINER_SIZE_X - BRICK_WIDTH * 2);
+  const clampY = (pos: number) => Math.min(Math.max(pos, 0), CONTAINER_SIZE_Y - BRICK_HEIGHT * 2);
+
+  const { moveProps } = useMove({
+    onMoveStart(e) {
+      console.log(`move start with pointerType = ${e.pointerType}`);
+      setColor('white');
+    },
+    onMove(e) {
+      const newX = brickCoords.x + e.deltaX;
+      const newY = brickCoords.y + e.deltaY;
+      setCoords(id, { x: clampX(newX), y: clampY(newY) });
+
+      brickData.childBricks.forEach((childBrick) => {
+        console.log(childBrick);
+        const childBrickCoords = getCoords(childBrick)!;
+        setCoords(childBrick, {
+          x: childBrickCoords.x + e.deltaX,
+          y: childBrickCoords.y + e.deltaY,
+        });
+      });
+
+      const belowBrickId = brickData.surroundingBricks.below;
+      if (belowBrickId) {
+        const belowBrickCoords = getCoords(belowBrickId)!;
+        setCoords(belowBrickId, {
+          x: belowBrickCoords.x + e.deltaX,
+          y: belowBrickCoords.y + e.deltaY,
+        });
+      }
+
+      // Normally, we want to allow the user to continue
+      // dragging outside the box such that they need to
+      // drag back over the ball again before it moves.
+      // This is handled below by clamping during render.
+      // If using the keyboard, however, we need to clamp
+      // here so that dragging outside the container and
+      // then using the arrow keys works as expected.
+      // if (e.pointerType === 'keyboard') {
+      //   x = clamp(x);
+      //   y = clamp(y);
+      // }
+
+      // setEvents((events) => [
+      //   `move with pointerType = ${e.pointerType}, deltaX = ${e.deltaX}, deltaY = ${e.deltaY}`,
+      //   ...events,
+      // ]);
+    },
+    onMoveEnd(e) {
+      console.log(`move end with pointerType = ${e.pointerType}`);
+      setColor(instance.colorBg as string);
+      console.log(getCoords(id));
+    },
+  });
+
   return (
-    <g transform={`translate(${coords?.x},${coords?.y}) scale(${instance.scale})`}>
+    <g
+      {...moveProps}
+      transform={`translate(${brickCoords.x},${brickCoords.y}) scale(${instance.scale})`}
+      tabIndex={0}
+    >
       <path
         d={instance.SVGpath}
         style={{
-          fill: instance.colorBg as string,
+          fill: color,
           fillOpacity: 1,
           stroke: instance.outline as string,
           strokeWidth: 1,
diff --git a/modules/code-builder/src/brick/design0/components/BrickData.tsx b/modules/code-builder/src/brick/design0/components/BrickData.tsx
index 2cbfb716..7ba714af 100644
--- a/modules/code-builder/src/brick/design0/components/BrickData.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickData.tsx
@@ -1,19 +1,73 @@
+import { useMove } from 'react-aria';
+import { useState } from 'react';
+import { useBricksCoords } from '../../../../playground/pages/WorkSpace/BricksCoordsStore';
 import type { JSX } from 'react';
 import type { IBrickData, TBrickCoords } from '@/@types/brick';
 
 export default function ({
+  id,
   instance,
   coords = { x: 0, y: 0 },
 }: {
+  id: string;
   instance: IBrickData;
   coords?: TBrickCoords;
 }): JSX.Element {
+  const CONTAINER_SIZE_X = 800;
+  const CONTAINER_SIZE_Y = 500;
+  const BRICK_HEIGHT = instance.bBoxBrick.extent.height;
+  const BRICK_WIDTH = instance.bBoxBrick.extent.width;
+  const { getCoords, setCoords } = useBricksCoords();
+  const brickCoords = getCoords(id)!;
+  const [color, setColor] = useState(instance.colorBg as string);
+
+  const clampX = (pos: number) => Math.min(Math.max(pos, 0), CONTAINER_SIZE_X - BRICK_WIDTH * 2);
+  const clampY = (pos: number) => Math.min(Math.max(pos, 0), CONTAINER_SIZE_Y - BRICK_HEIGHT * 2);
+
+  const { moveProps } = useMove({
+    onMoveStart(e) {
+      console.log(`move start with pointerType = ${e.pointerType}`);
+      setColor('white');
+    },
+    onMove(e) {
+      const newX = brickCoords.x + e.deltaX;
+      const newY = brickCoords.y + e.deltaY;
+      setCoords(id, { x: clampX(newX), y: clampY(newY) });
+
+      // Normally, we want to allow the user to continue
+      // dragging outside the box such that they need to
+      // drag back over the ball again before it moves.
+      // This is handled below by clamping during render.
+      // If using the keyboard, however, we need to clamp
+      // here so that dragging outside the container and
+      // then using the arrow keys works as expected.
+      // if (e.pointerType === 'keyboard') {
+      //   x = clamp(x);
+      //   y = clamp(y);
+      // }
+
+      // setEvents((events) => [
+      //   `move with pointerType = ${e.pointerType}, deltaX = ${e.deltaX}, deltaY = ${e.deltaY}`,
+      //   ...events,
+      // ]);
+    },
+    onMoveEnd(e) {
+      console.log(`move end with pointerType = ${e.pointerType}`);
+      setColor(instance.colorBg as string);
+      console.log(getCoords(id));
+    },
+  });
+
   return (
-    <g transform={`translate(${coords?.x},${coords?.y}) scale(${instance.scale})`}>
+    <g
+      {...moveProps}
+      transform={`translate(${brickCoords.x},${brickCoords.y}) scale(${instance.scale})`}
+      tabIndex={0}
+    >
       <path
         d={instance.SVGpath}
         style={{
-          fill: instance.colorBg as string,
+          fill: color,
           fillOpacity: 1,
           stroke: instance.outline as string,
           strokeWidth: 1,
diff --git a/modules/code-builder/src/brick/design0/components/BrickExpression.tsx b/modules/code-builder/src/brick/design0/components/BrickExpression.tsx
index 71d36a94..042b19d7 100644
--- a/modules/code-builder/src/brick/design0/components/BrickExpression.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickExpression.tsx
@@ -1,21 +1,67 @@
+import { useMove } from 'react-aria';
+import { useState } from 'react';
+import { useBricksCoords } from '../../../../playground/pages/WorkSpace/BricksCoordsStore';
 import type { JSX } from 'react';
 import type { IBrickExpression, TBrickCoords } from '@/@types/brick';
 
 // -------------------------------------------------------------------------------------------------
 
 export default function ({
+  id,
   instance,
   coords = { x: 0, y: 0 },
 }: {
+  id: string;
   instance: IBrickExpression;
   coords?: TBrickCoords;
 }): JSX.Element {
+  const { getCoords, setCoords } = useBricksCoords();
+  const brickCoords = getCoords(id)!;
+  const [color, setColor] = useState(instance.colorBg as string);
+
+  const { moveProps } = useMove({
+    onMoveStart(e) {
+      console.log(`move start with pointerType = ${e.pointerType}`);
+      setColor('white');
+    },
+    onMove(e) {
+      const newX = brickCoords.x + e.deltaX;
+      const newY = brickCoords.y + e.deltaY;
+      setCoords(id, { x: newX, y: newY });
+
+      // Normally, we want to allow the user to continue
+      // dragging outside the box such that they need to
+      // drag back over the ball again before it moves.
+      // This is handled below by clamping during render.
+      // If using the keyboard, however, we need to clamp
+      // here so that dragging outside the container and
+      // then using the arrow keys works as expected.
+      // if (e.pointerType === 'keyboard') {
+      //   x = clamp(x);
+      //   y = clamp(y);
+      // }
+
+      // setEvents((events) => [
+      //   `move with pointerType = ${e.pointerType}, deltaX = ${e.deltaX}, deltaY = ${e.deltaY}`,
+      //   ...events,
+      // ]);
+    },
+    onMoveEnd(e) {
+      console.log(`move end with pointerType = ${e.pointerType}`);
+      setColor(instance.colorBg as string);
+      console.log(getCoords(id));
+    },
+  });
+
   return (
-    <g transform={`translate(${coords?.x},${coords?.y}) scale(${instance.scale})`}>
+    <g
+      {...moveProps}
+      transform={`translate(${brickCoords.x},${brickCoords.y}) scale(${instance.scale})`}
+    >
       <path
         d={instance.SVGpath}
         style={{
-          fill: instance.colorBg as string,
+          fill: color,
           fillOpacity: 1,
           stroke: instance.outline as string,
           strokeWidth: 1,
diff --git a/modules/code-builder/src/brick/design0/components/BrickStatement.tsx b/modules/code-builder/src/brick/design0/components/BrickStatement.tsx
index c0bd6db8..9e8c5aee 100644
--- a/modules/code-builder/src/brick/design0/components/BrickStatement.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickStatement.tsx
@@ -1,21 +1,75 @@
+import { useMove } from 'react-aria';
+import { useState } from 'react';
+import { useBricksCoords } from '../../../../playground/pages/WorkSpace/BricksCoordsStore';
 import type { JSX } from 'react';
 import type { IBrickStatement, TBrickCoords } from '@/@types/brick';
 
 // -------------------------------------------------------------------------------------------------
 
 export default function ({
+  id,
   instance,
   coords = { x: 0, y: 0 },
 }: {
+  id: string;
   instance: IBrickStatement;
   coords?: TBrickCoords;
 }): JSX.Element {
+  const CONTAINER_SIZE_X = 800;
+  const CONTAINER_SIZE_Y = 700;
+  const BRICK_HEIGHT = instance.bBoxBrick.extent.height;
+  const BRICK_WIDTH = instance.bBoxBrick.extent.width;
+  const { getCoords, setCoords } = useBricksCoords();
+  const brickCoords = getCoords(id)!;
+  const [color, setColor] = useState(instance.colorBg as string);
+
+  const clampX = (pos: number) => Math.min(Math.max(pos, 0), CONTAINER_SIZE_X - BRICK_WIDTH * 2);
+  const clampY = (pos: number) => Math.min(Math.max(pos, 0), CONTAINER_SIZE_Y - BRICK_HEIGHT * 2);
+
+  const { moveProps } = useMove({
+    onMoveStart(e) {
+      console.log(`move start with pointerType = ${e.pointerType}`);
+      setColor('white');
+    },
+    onMove(e) {
+      const newX = brickCoords.x + e.deltaX;
+      const newY = brickCoords.y + e.deltaY;
+      setCoords(id, { x: clampX(newX), y: clampY(newY) });
+
+      // Normally, we want to allow the user to continue
+      // dragging outside the box such that they need to
+      // drag back over the ball again before it moves.
+      // This is handled below by clamping during render.
+      // If using the keyboard, however, we need to clamp
+      // here so that dragging outside the container and
+      // then using the arrow keys works as expected.
+      // if (e.pointerType === 'keyboard') {
+      //   x = clamp(x);
+      //   y = clamp(y);
+      // }
+
+      // setEvents((events) => [
+      //   `move with pointerType = ${e.pointerType}, deltaX = ${e.deltaX}, deltaY = ${e.deltaY}`,
+      //   ...events,
+      // ]);
+    },
+    onMoveEnd(e) {
+      console.log(`move end with pointerType = ${e.pointerType}`);
+      setColor(instance.colorBg as string);
+      console.log(getCoords(id));
+    },
+  });
+
   return (
-    <g transform={`translate(${coords?.x},${coords?.y}) scale(${instance.scale})`}>
+    <g
+      {...moveProps}
+      transform={`translate(${brickCoords.x},${brickCoords.y}) scale(${instance.scale})`}
+      tabIndex={0}
+    >
       <path
         d={instance.SVGpath}
         style={{
-          fill: instance.colorBg as string,
+          fill: color,
           fillOpacity: 1,
           stroke: instance.outline as string,
           strokeWidth: 1,

From 5a2b103f07e1d6f69daf5831f6f2f973cfa5f3c1 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 11 Aug 2023 15:53:28 +0530
Subject: [PATCH 44/48] feat(playground): render bricks and drag them

---
 .../playground/pages/WorkSpace/index.tsx      | 51 +++++++++++++------
 1 file changed, 36 insertions(+), 15 deletions(-)

diff --git a/modules/code-builder/playground/pages/WorkSpace/index.tsx b/modules/code-builder/playground/pages/WorkSpace/index.tsx
index eca5b957..e41ab33f 100644
--- a/modules/code-builder/playground/pages/WorkSpace/index.tsx
+++ b/modules/code-builder/playground/pages/WorkSpace/index.tsx
@@ -9,23 +9,43 @@ import {
   ModelBrickStatement,
 } from '@/brick';
 import { WORKSPACES_DATA } from './data';
-import type { TBrickCoords, TBrickType } from '@/@types/brick';
 import type { Brick } from './data';
 
-function getBrick(
-  type: TBrickType,
-  instance: ModelBrickBlock | ModelBrickData | ModelBrickExpression | ModelBrickStatement,
-  coords: TBrickCoords,
-) {
-  switch (type) {
+function getBrick(brickData: Brick) {
+  switch (brickData.type) {
     case 'data':
-      return <BrickData instance={instance as ModelBrickData} coords={coords} />;
+      return (
+        <BrickData
+          id={brickData.id}
+          instance={brickData.instance as ModelBrickData}
+          coords={brickData.coords}
+        />
+      );
     case 'expression':
-      return <BrickExpression instance={instance as ModelBrickExpression} coords={coords} />;
+      return (
+        <BrickExpression
+          id={brickData.id}
+          instance={brickData.instance as ModelBrickExpression}
+          coords={brickData.coords}
+        />
+      );
     case 'statement':
-      return <BrickStatement instance={instance as ModelBrickStatement} coords={coords} />;
+      return (
+        <BrickStatement
+          id={brickData.id}
+          instance={brickData.instance as ModelBrickStatement}
+          coords={brickData.coords}
+        />
+      );
     case 'block':
-      return <BrickBlock instance={instance as ModelBrickBlock} coords={coords} />;
+      return (
+        <BrickBlock
+          id={brickData.id}
+          brickData={brickData}
+          instance={brickData.instance as ModelBrickBlock}
+          coords={brickData.coords}
+        />
+      );
     default:
       return <></>;
   }
@@ -34,7 +54,7 @@ function getBrick(
 function RenderBricks({ brickData }: { brickData: Brick }) {
   return (
     <>
-      {getBrick(brickData.type, brickData.instance, brickData.coords)}
+      {getBrick(brickData)}
       {brickData.children &&
         brickData.children?.length > 0 &&
         brickData.children.map((child) => <RenderBricks key={child.id} brickData={child} />)}
@@ -44,14 +64,15 @@ function RenderBricks({ brickData }: { brickData: Brick }) {
 
 function WorkSpace() {
   return (
-    <div>
+    <div style={{ padding: '20px 50px' }}>
       {WORKSPACES_DATA.map((workspace) => (
         <svg
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           key={workspace.id}
-          height="500px"
-          width="500px"
+          height="700px"
+          width="800px"
+          style={{ border: '2px solid black' }}
         >
           {workspace.data.map((brick) => {
             return <RenderBricks key={brick.id} brickData={brick} />;

From da683cd06822ec65784bd0361d15dbfbf9847ae7 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 11 Aug 2023 16:59:39 +0530
Subject: [PATCH 45/48] feat(playground): refactor bricks to encapsulate drag
 logic

---
 .../pages/WorkSpace/BrickFactory.tsx          | 107 ++++++++++++++++++
 .../playground/pages/WorkSpace/index.tsx      |  53 +--------
 .../brick/design0/components/BrickBlock.tsx   |  87 ++------------
 .../brick/design0/components/BrickData.tsx    |  72 +++---------
 .../design0/components/BrickExpression.tsx    |  68 +++--------
 .../design0/components/BrickStatement.tsx     |  74 +++---------
 6 files changed, 159 insertions(+), 302 deletions(-)
 create mode 100644 modules/code-builder/playground/pages/WorkSpace/BrickFactory.tsx

diff --git a/modules/code-builder/playground/pages/WorkSpace/BrickFactory.tsx b/modules/code-builder/playground/pages/WorkSpace/BrickFactory.tsx
new file mode 100644
index 00000000..aa2f3015
--- /dev/null
+++ b/modules/code-builder/playground/pages/WorkSpace/BrickFactory.tsx
@@ -0,0 +1,107 @@
+import { useState } from 'react';
+import { useMove } from 'react-aria';
+import { BrickBlock, BrickData, BrickExpression, BrickStatement } from '@/brick';
+import { useBricksCoords } from './BricksCoordsStore';
+import type { Brick } from './data';
+
+const BrickFactory = ({ brickData }: { brickData: Brick }) => {
+  const CONTAINER_SIZE_X = 800;
+  const CONTAINER_SIZE_Y = 700;
+  const BRICK_HEIGHT = brickData.instance.bBoxBrick.extent.height;
+  const BRICK_WIDTH = brickData.instance.bBoxBrick.extent.width;
+  const { getCoords, setCoords } = useBricksCoords();
+  const brickCoords = getCoords(brickData.id)!;
+  const [color, setColor] = useState(brickData.instance.colorBg as string);
+
+  const clampX = (pos: number) => Math.min(Math.max(pos, 0), CONTAINER_SIZE_X - BRICK_WIDTH * 2);
+  const clampY = (pos: number) => Math.min(Math.max(pos, 0), CONTAINER_SIZE_Y - BRICK_HEIGHT * 2);
+
+  const { moveProps } = useMove({
+    onMoveStart(e) {
+      console.log(`move start with pointerType = ${e.pointerType}`);
+      setColor('white');
+    },
+    onMove(e) {
+      const newX = brickCoords.x + e.deltaX;
+      const newY = brickCoords.y + e.deltaY;
+      setCoords(brickData.id, { x: clampX(newX), y: clampY(newY) });
+
+      brickData.childBricks.forEach((childBrick) => {
+        console.log(childBrick);
+        const childBrickCoords = getCoords(childBrick)!;
+        setCoords(childBrick, {
+          x: childBrickCoords.x + e.deltaX,
+          y: childBrickCoords.y + e.deltaY,
+        });
+      });
+
+      const belowBrickId = brickData.surroundingBricks.below;
+      if (belowBrickId) {
+        const belowBrickCoords = getCoords(belowBrickId)!;
+        setCoords(belowBrickId, {
+          x: belowBrickCoords.x + e.deltaX,
+          y: belowBrickCoords.y + e.deltaY,
+        });
+      }
+
+      // Normally, we want to allow the user to continue
+      // dragging outside the box such that they need to
+      // drag back over the ball again before it moves.
+      // This is handled below by clamping during render.
+      // If using the keyboard, however, we need to clamp
+      // here so that dragging outside the container and
+      // then using the arrow keys works as expected.
+      // if (e.pointerType === 'keyboard') {
+      //   x = clamp(x);
+      //   y = clamp(y);
+      // }
+
+      // setEvents((events) => [
+      //   `move with pointerType = ${e.pointerType}, deltaX = ${e.deltaX}, deltaY = ${e.deltaY}`,
+      //   ...events,
+      // ]);
+    },
+    onMoveEnd(e) {
+      console.log(`move end with pointerType = ${e.pointerType}`);
+      setColor(brickData.instance.colorBg as string);
+    },
+  });
+
+  switch (brickData.type) {
+    case 'data':
+      return (
+        <BrickData brickData={brickData} moveProps={moveProps} coords={brickCoords} color={color} />
+      );
+    case 'expression':
+      return (
+        <BrickExpression
+          brickData={brickData}
+          moveProps={moveProps}
+          coords={brickCoords}
+          color={color}
+        />
+      );
+    case 'statement':
+      return (
+        <BrickStatement
+          brickData={brickData}
+          moveProps={moveProps}
+          coords={brickCoords}
+          color={color}
+        />
+      );
+    case 'block':
+      return (
+        <BrickBlock
+          brickData={brickData}
+          moveProps={moveProps}
+          coords={brickCoords}
+          color={color}
+        />
+      );
+    default:
+      return <></>;
+  }
+};
+
+export default BrickFactory;
diff --git a/modules/code-builder/playground/pages/WorkSpace/index.tsx b/modules/code-builder/playground/pages/WorkSpace/index.tsx
index e41ab33f..5958e93e 100644
--- a/modules/code-builder/playground/pages/WorkSpace/index.tsx
+++ b/modules/code-builder/playground/pages/WorkSpace/index.tsx
@@ -1,60 +1,11 @@
-import {
-  BrickBlock,
-  BrickData,
-  BrickExpression,
-  BrickStatement,
-  ModelBrickBlock,
-  ModelBrickData,
-  ModelBrickExpression,
-  ModelBrickStatement,
-} from '@/brick';
+import BrickFactory from './BrickFactory';
 import { WORKSPACES_DATA } from './data';
 import type { Brick } from './data';
 
-function getBrick(brickData: Brick) {
-  switch (brickData.type) {
-    case 'data':
-      return (
-        <BrickData
-          id={brickData.id}
-          instance={brickData.instance as ModelBrickData}
-          coords={brickData.coords}
-        />
-      );
-    case 'expression':
-      return (
-        <BrickExpression
-          id={brickData.id}
-          instance={brickData.instance as ModelBrickExpression}
-          coords={brickData.coords}
-        />
-      );
-    case 'statement':
-      return (
-        <BrickStatement
-          id={brickData.id}
-          instance={brickData.instance as ModelBrickStatement}
-          coords={brickData.coords}
-        />
-      );
-    case 'block':
-      return (
-        <BrickBlock
-          id={brickData.id}
-          brickData={brickData}
-          instance={brickData.instance as ModelBrickBlock}
-          coords={brickData.coords}
-        />
-      );
-    default:
-      return <></>;
-  }
-}
-
 function RenderBricks({ brickData }: { brickData: Brick }) {
   return (
     <>
-      {getBrick(brickData)}
+      <BrickFactory brickData={brickData} />
       {brickData.children &&
         brickData.children?.length > 0 &&
         brickData.children.map((child) => <RenderBricks key={child.id} brickData={child} />)}
diff --git a/modules/code-builder/src/brick/design0/components/BrickBlock.tsx b/modules/code-builder/src/brick/design0/components/BrickBlock.tsx
index fdde61b3..2a9d15b2 100644
--- a/modules/code-builder/src/brick/design0/components/BrickBlock.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickBlock.tsx
@@ -1,98 +1,31 @@
-import { useMove } from 'react-aria';
-import { useState } from 'react';
-import type { JSX } from 'react';
-import type { IBrickBlock, TBrickCoords } from '@/@types/brick';
-import { useBricksCoords } from '../../../../playground/pages/WorkSpace/BricksCoordsStore';
+import type { DOMAttributes, JSX } from 'react';
 import type { Brick } from 'playground/pages/WorkSpace/data';
 
 // -------------------------------------------------------------------------------------------------
 
 export default function ({
-  id,
   brickData,
-  instance,
-  coords = { x: 0, y: 0 },
+  moveProps,
+  coords,
+  color,
 }: {
-  id: string;
   brickData: Brick;
-  instance: IBrickBlock;
-  coords?: TBrickCoords;
+  moveProps: DOMAttributes<unknown>;
+  coords: { x: number; y: number };
+  color: string;
 }): JSX.Element {
-  const CONTAINER_SIZE_X = 800;
-  const CONTAINER_SIZE_Y = 700;
-  const BRICK_HEIGHT = instance.bBoxBrick.extent.height;
-  const BRICK_WIDTH = instance.bBoxBrick.extent.width;
-  const { getCoords, setCoords } = useBricksCoords();
-  const brickCoords = getCoords(id)!;
-  const [color, setColor] = useState(instance.colorBg as string);
-
-  const clampX = (pos: number) => Math.min(Math.max(pos, 0), CONTAINER_SIZE_X - BRICK_WIDTH * 2);
-  const clampY = (pos: number) => Math.min(Math.max(pos, 0), CONTAINER_SIZE_Y - BRICK_HEIGHT * 2);
-
-  const { moveProps } = useMove({
-    onMoveStart(e) {
-      console.log(`move start with pointerType = ${e.pointerType}`);
-      setColor('white');
-    },
-    onMove(e) {
-      const newX = brickCoords.x + e.deltaX;
-      const newY = brickCoords.y + e.deltaY;
-      setCoords(id, { x: clampX(newX), y: clampY(newY) });
-
-      brickData.childBricks.forEach((childBrick) => {
-        console.log(childBrick);
-        const childBrickCoords = getCoords(childBrick)!;
-        setCoords(childBrick, {
-          x: childBrickCoords.x + e.deltaX,
-          y: childBrickCoords.y + e.deltaY,
-        });
-      });
-
-      const belowBrickId = brickData.surroundingBricks.below;
-      if (belowBrickId) {
-        const belowBrickCoords = getCoords(belowBrickId)!;
-        setCoords(belowBrickId, {
-          x: belowBrickCoords.x + e.deltaX,
-          y: belowBrickCoords.y + e.deltaY,
-        });
-      }
-
-      // Normally, we want to allow the user to continue
-      // dragging outside the box such that they need to
-      // drag back over the ball again before it moves.
-      // This is handled below by clamping during render.
-      // If using the keyboard, however, we need to clamp
-      // here so that dragging outside the container and
-      // then using the arrow keys works as expected.
-      // if (e.pointerType === 'keyboard') {
-      //   x = clamp(x);
-      //   y = clamp(y);
-      // }
-
-      // setEvents((events) => [
-      //   `move with pointerType = ${e.pointerType}, deltaX = ${e.deltaX}, deltaY = ${e.deltaY}`,
-      //   ...events,
-      // ]);
-    },
-    onMoveEnd(e) {
-      console.log(`move end with pointerType = ${e.pointerType}`);
-      setColor(instance.colorBg as string);
-      console.log(getCoords(id));
-    },
-  });
-
   return (
     <g
       {...moveProps}
-      transform={`translate(${brickCoords.x},${brickCoords.y}) scale(${instance.scale})`}
+      transform={`translate(${coords.x},${coords.y}) scale(${brickData.instance.scale})`}
       tabIndex={0}
     >
       <path
-        d={instance.SVGpath}
+        d={brickData.instance.SVGpath}
         style={{
           fill: color,
           fillOpacity: 1,
-          stroke: instance.outline as string,
+          stroke: brickData.instance.outline as string,
           strokeWidth: 1,
           strokeLinecap: 'round',
           strokeOpacity: 1,
diff --git a/modules/code-builder/src/brick/design0/components/BrickData.tsx b/modules/code-builder/src/brick/design0/components/BrickData.tsx
index 7ba714af..d12f9813 100644
--- a/modules/code-builder/src/brick/design0/components/BrickData.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickData.tsx
@@ -1,75 +1,29 @@
-import { useMove } from 'react-aria';
-import { useState } from 'react';
-import { useBricksCoords } from '../../../../playground/pages/WorkSpace/BricksCoordsStore';
-import type { JSX } from 'react';
-import type { IBrickData, TBrickCoords } from '@/@types/brick';
+import type { DOMAttributes, JSX } from 'react';
+import type { Brick } from 'playground/pages/WorkSpace/data';
 
 export default function ({
-  id,
-  instance,
-  coords = { x: 0, y: 0 },
+  brickData,
+  moveProps,
+  coords,
+  color,
 }: {
-  id: string;
-  instance: IBrickData;
-  coords?: TBrickCoords;
+  brickData: Brick;
+  moveProps: DOMAttributes<unknown>;
+  coords: { x: number; y: number };
+  color: string;
 }): JSX.Element {
-  const CONTAINER_SIZE_X = 800;
-  const CONTAINER_SIZE_Y = 500;
-  const BRICK_HEIGHT = instance.bBoxBrick.extent.height;
-  const BRICK_WIDTH = instance.bBoxBrick.extent.width;
-  const { getCoords, setCoords } = useBricksCoords();
-  const brickCoords = getCoords(id)!;
-  const [color, setColor] = useState(instance.colorBg as string);
-
-  const clampX = (pos: number) => Math.min(Math.max(pos, 0), CONTAINER_SIZE_X - BRICK_WIDTH * 2);
-  const clampY = (pos: number) => Math.min(Math.max(pos, 0), CONTAINER_SIZE_Y - BRICK_HEIGHT * 2);
-
-  const { moveProps } = useMove({
-    onMoveStart(e) {
-      console.log(`move start with pointerType = ${e.pointerType}`);
-      setColor('white');
-    },
-    onMove(e) {
-      const newX = brickCoords.x + e.deltaX;
-      const newY = brickCoords.y + e.deltaY;
-      setCoords(id, { x: clampX(newX), y: clampY(newY) });
-
-      // Normally, we want to allow the user to continue
-      // dragging outside the box such that they need to
-      // drag back over the ball again before it moves.
-      // This is handled below by clamping during render.
-      // If using the keyboard, however, we need to clamp
-      // here so that dragging outside the container and
-      // then using the arrow keys works as expected.
-      // if (e.pointerType === 'keyboard') {
-      //   x = clamp(x);
-      //   y = clamp(y);
-      // }
-
-      // setEvents((events) => [
-      //   `move with pointerType = ${e.pointerType}, deltaX = ${e.deltaX}, deltaY = ${e.deltaY}`,
-      //   ...events,
-      // ]);
-    },
-    onMoveEnd(e) {
-      console.log(`move end with pointerType = ${e.pointerType}`);
-      setColor(instance.colorBg as string);
-      console.log(getCoords(id));
-    },
-  });
-
   return (
     <g
       {...moveProps}
-      transform={`translate(${brickCoords.x},${brickCoords.y}) scale(${instance.scale})`}
+      transform={`translate(${coords.x},${coords.y}) scale(${brickData.instance.scale})`}
       tabIndex={0}
     >
       <path
-        d={instance.SVGpath}
+        d={brickData.instance.SVGpath}
         style={{
           fill: color,
           fillOpacity: 1,
-          stroke: instance.outline as string,
+          stroke: brickData.instance.outline as string,
           strokeWidth: 1,
           strokeLinecap: 'round',
           strokeOpacity: 1,
diff --git a/modules/code-builder/src/brick/design0/components/BrickExpression.tsx b/modules/code-builder/src/brick/design0/components/BrickExpression.tsx
index 042b19d7..d12f9813 100644
--- a/modules/code-builder/src/brick/design0/components/BrickExpression.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickExpression.tsx
@@ -1,69 +1,29 @@
-import { useMove } from 'react-aria';
-import { useState } from 'react';
-import { useBricksCoords } from '../../../../playground/pages/WorkSpace/BricksCoordsStore';
-import type { JSX } from 'react';
-import type { IBrickExpression, TBrickCoords } from '@/@types/brick';
-
-// -------------------------------------------------------------------------------------------------
+import type { DOMAttributes, JSX } from 'react';
+import type { Brick } from 'playground/pages/WorkSpace/data';
 
 export default function ({
-  id,
-  instance,
-  coords = { x: 0, y: 0 },
+  brickData,
+  moveProps,
+  coords,
+  color,
 }: {
-  id: string;
-  instance: IBrickExpression;
-  coords?: TBrickCoords;
+  brickData: Brick;
+  moveProps: DOMAttributes<unknown>;
+  coords: { x: number; y: number };
+  color: string;
 }): JSX.Element {
-  const { getCoords, setCoords } = useBricksCoords();
-  const brickCoords = getCoords(id)!;
-  const [color, setColor] = useState(instance.colorBg as string);
-
-  const { moveProps } = useMove({
-    onMoveStart(e) {
-      console.log(`move start with pointerType = ${e.pointerType}`);
-      setColor('white');
-    },
-    onMove(e) {
-      const newX = brickCoords.x + e.deltaX;
-      const newY = brickCoords.y + e.deltaY;
-      setCoords(id, { x: newX, y: newY });
-
-      // Normally, we want to allow the user to continue
-      // dragging outside the box such that they need to
-      // drag back over the ball again before it moves.
-      // This is handled below by clamping during render.
-      // If using the keyboard, however, we need to clamp
-      // here so that dragging outside the container and
-      // then using the arrow keys works as expected.
-      // if (e.pointerType === 'keyboard') {
-      //   x = clamp(x);
-      //   y = clamp(y);
-      // }
-
-      // setEvents((events) => [
-      //   `move with pointerType = ${e.pointerType}, deltaX = ${e.deltaX}, deltaY = ${e.deltaY}`,
-      //   ...events,
-      // ]);
-    },
-    onMoveEnd(e) {
-      console.log(`move end with pointerType = ${e.pointerType}`);
-      setColor(instance.colorBg as string);
-      console.log(getCoords(id));
-    },
-  });
-
   return (
     <g
       {...moveProps}
-      transform={`translate(${brickCoords.x},${brickCoords.y}) scale(${instance.scale})`}
+      transform={`translate(${coords.x},${coords.y}) scale(${brickData.instance.scale})`}
+      tabIndex={0}
     >
       <path
-        d={instance.SVGpath}
+        d={brickData.instance.SVGpath}
         style={{
           fill: color,
           fillOpacity: 1,
-          stroke: instance.outline as string,
+          stroke: brickData.instance.outline as string,
           strokeWidth: 1,
           strokeLinecap: 'round',
           strokeOpacity: 1,
diff --git a/modules/code-builder/src/brick/design0/components/BrickStatement.tsx b/modules/code-builder/src/brick/design0/components/BrickStatement.tsx
index 9e8c5aee..d12f9813 100644
--- a/modules/code-builder/src/brick/design0/components/BrickStatement.tsx
+++ b/modules/code-builder/src/brick/design0/components/BrickStatement.tsx
@@ -1,77 +1,29 @@
-import { useMove } from 'react-aria';
-import { useState } from 'react';
-import { useBricksCoords } from '../../../../playground/pages/WorkSpace/BricksCoordsStore';
-import type { JSX } from 'react';
-import type { IBrickStatement, TBrickCoords } from '@/@types/brick';
-
-// -------------------------------------------------------------------------------------------------
+import type { DOMAttributes, JSX } from 'react';
+import type { Brick } from 'playground/pages/WorkSpace/data';
 
 export default function ({
-  id,
-  instance,
-  coords = { x: 0, y: 0 },
+  brickData,
+  moveProps,
+  coords,
+  color,
 }: {
-  id: string;
-  instance: IBrickStatement;
-  coords?: TBrickCoords;
+  brickData: Brick;
+  moveProps: DOMAttributes<unknown>;
+  coords: { x: number; y: number };
+  color: string;
 }): JSX.Element {
-  const CONTAINER_SIZE_X = 800;
-  const CONTAINER_SIZE_Y = 700;
-  const BRICK_HEIGHT = instance.bBoxBrick.extent.height;
-  const BRICK_WIDTH = instance.bBoxBrick.extent.width;
-  const { getCoords, setCoords } = useBricksCoords();
-  const brickCoords = getCoords(id)!;
-  const [color, setColor] = useState(instance.colorBg as string);
-
-  const clampX = (pos: number) => Math.min(Math.max(pos, 0), CONTAINER_SIZE_X - BRICK_WIDTH * 2);
-  const clampY = (pos: number) => Math.min(Math.max(pos, 0), CONTAINER_SIZE_Y - BRICK_HEIGHT * 2);
-
-  const { moveProps } = useMove({
-    onMoveStart(e) {
-      console.log(`move start with pointerType = ${e.pointerType}`);
-      setColor('white');
-    },
-    onMove(e) {
-      const newX = brickCoords.x + e.deltaX;
-      const newY = brickCoords.y + e.deltaY;
-      setCoords(id, { x: clampX(newX), y: clampY(newY) });
-
-      // Normally, we want to allow the user to continue
-      // dragging outside the box such that they need to
-      // drag back over the ball again before it moves.
-      // This is handled below by clamping during render.
-      // If using the keyboard, however, we need to clamp
-      // here so that dragging outside the container and
-      // then using the arrow keys works as expected.
-      // if (e.pointerType === 'keyboard') {
-      //   x = clamp(x);
-      //   y = clamp(y);
-      // }
-
-      // setEvents((events) => [
-      //   `move with pointerType = ${e.pointerType}, deltaX = ${e.deltaX}, deltaY = ${e.deltaY}`,
-      //   ...events,
-      // ]);
-    },
-    onMoveEnd(e) {
-      console.log(`move end with pointerType = ${e.pointerType}`);
-      setColor(instance.colorBg as string);
-      console.log(getCoords(id));
-    },
-  });
-
   return (
     <g
       {...moveProps}
-      transform={`translate(${brickCoords.x},${brickCoords.y}) scale(${instance.scale})`}
+      transform={`translate(${coords.x},${coords.y}) scale(${brickData.instance.scale})`}
       tabIndex={0}
     >
       <path
-        d={instance.SVGpath}
+        d={brickData.instance.SVGpath}
         style={{
           fill: color,
           fillOpacity: 1,
-          stroke: instance.outline as string,
+          stroke: brickData.instance.outline as string,
           strokeWidth: 1,
           strokeLinecap: 'round',
           strokeOpacity: 1,

From ea725821860f66f035afab9e9b5157eefd4f3d4f Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Fri, 18 Aug 2023 19:06:26 +0530
Subject: [PATCH 46/48] feat(playground): recursive function to get below brick
 IDs

---
 .../pages/WorkSpace/BrickFactory.tsx          |  8 ++++---
 .../playground/pages/WorkSpace/utils.ts       | 23 +++++++++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 modules/code-builder/playground/pages/WorkSpace/utils.ts

diff --git a/modules/code-builder/playground/pages/WorkSpace/BrickFactory.tsx b/modules/code-builder/playground/pages/WorkSpace/BrickFactory.tsx
index aa2f3015..233ab08d 100644
--- a/modules/code-builder/playground/pages/WorkSpace/BrickFactory.tsx
+++ b/modules/code-builder/playground/pages/WorkSpace/BrickFactory.tsx
@@ -2,7 +2,9 @@ import { useState } from 'react';
 import { useMove } from 'react-aria';
 import { BrickBlock, BrickData, BrickExpression, BrickStatement } from '@/brick';
 import { useBricksCoords } from './BricksCoordsStore';
+import { WORKSPACES_DATA } from './data';
 import type { Brick } from './data';
+import { getBelowBricksIds } from './utils';
 
 const BrickFactory = ({ brickData }: { brickData: Brick }) => {
   const CONTAINER_SIZE_X = 800;
@@ -35,14 +37,14 @@ const BrickFactory = ({ brickData }: { brickData: Brick }) => {
         });
       });
 
-      const belowBrickId = brickData.surroundingBricks.below;
-      if (belowBrickId) {
+      const belowBrickIds = getBelowBricksIds(WORKSPACES_DATA[0].data, brickData.id);
+      belowBrickIds.forEach((belowBrickId) => {
         const belowBrickCoords = getCoords(belowBrickId)!;
         setCoords(belowBrickId, {
           x: belowBrickCoords.x + e.deltaX,
           y: belowBrickCoords.y + e.deltaY,
         });
-      }
+      });
 
       // Normally, we want to allow the user to continue
       // dragging outside the box such that they need to
diff --git a/modules/code-builder/playground/pages/WorkSpace/utils.ts b/modules/code-builder/playground/pages/WorkSpace/utils.ts
new file mode 100644
index 00000000..8adb28d5
--- /dev/null
+++ b/modules/code-builder/playground/pages/WorkSpace/utils.ts
@@ -0,0 +1,23 @@
+import type { Brick } from './data';
+
+export function getBelowBricksIds(arr: Brick[], item: string): string[] {
+    let result: string[] = [];
+
+    function recursiveSearch(arr: Brick[], item: string) {
+        arr.forEach((element, index) => {
+            if (element.id === item) {
+                arr.slice(index + 1, arr.length).map((el) => {
+                    result = result.concat(el.childBricks);
+                    result = result.concat(el.id);
+                });
+                return;
+            }
+            if (Array.isArray(element.children)) {
+                recursiveSearch(element.children, item);
+            }
+        });
+    }
+
+    recursiveSearch(arr, item);
+    return result;
+}

From 9e633e53e99a7907bc45000a3bb4fdfd1b2ce0b0 Mon Sep 17 00:00:00 2001
From: Niloy Sikdar <niloysikdar30@gmail.com>
Date: Wed, 30 Aug 2023 17:40:55 +0530
Subject: [PATCH 47/48] feat(playground): detect and update positions of
 collision areas for the bricks

---
 .../pages/WorkSpace/BrickFactory.tsx          | 142 ++++++++++++++----
 .../playground/pages/WorkSpace/data.ts        |  25 +--
 2 files changed, 123 insertions(+), 44 deletions(-)

diff --git a/modules/code-builder/playground/pages/WorkSpace/BrickFactory.tsx b/modules/code-builder/playground/pages/WorkSpace/BrickFactory.tsx
index 233ab08d..dcb20494 100644
--- a/modules/code-builder/playground/pages/WorkSpace/BrickFactory.tsx
+++ b/modules/code-builder/playground/pages/WorkSpace/BrickFactory.tsx
@@ -29,7 +29,6 @@ const BrickFactory = ({ brickData }: { brickData: Brick }) => {
       setCoords(brickData.id, { x: clampX(newX), y: clampY(newY) });
 
       brickData.childBricks.forEach((childBrick) => {
-        console.log(childBrick);
         const childBrickCoords = getCoords(childBrick)!;
         setCoords(childBrick, {
           x: childBrickCoords.x + e.deltaX,
@@ -69,41 +68,118 @@ const BrickFactory = ({ brickData }: { brickData: Brick }) => {
     },
   });
 
-  switch (brickData.type) {
-    case 'data':
-      return (
-        <BrickData brickData={brickData} moveProps={moveProps} coords={brickCoords} color={color} />
-      );
-    case 'expression':
-      return (
-        <BrickExpression
-          brickData={brickData}
-          moveProps={moveProps}
-          coords={brickCoords}
-          color={color}
+  const VisualIndicators = () => (
+    <>
+      {/* Right args bounding box */}
+      {'bBoxArgs' in brickData.instance && (
+        <>
+          {Object.keys(brickData.instance.bBoxArgs).map((name, i) => {
+            if ('bBoxArgs' in brickData.instance) {
+              const arg = brickData.instance.bBoxArgs[name];
+
+              return (
+                <rect
+                  key={i}
+                  x={brickCoords.x + arg?.coords.x}
+                  y={brickCoords.y + arg?.coords.y}
+                  height={arg?.extent.height}
+                  width={arg?.extent.width}
+                  fill="green"
+                  opacity={0.8}
+                />
+              );
+            }
+          })}
+        </>
+      )}
+
+      {/* Top instruction notch bounding box */}
+      {'bBoxNotchInsTop' in brickData.instance && (
+        <rect
+          x={brickCoords.x + brickData.instance.bBoxNotchInsTop?.coords.x}
+          y={brickCoords.y + brickData.instance.bBoxNotchInsTop?.coords.y}
+          height={brickData.instance.bBoxNotchInsTop?.extent.height}
+          width={brickData.instance.bBoxNotchInsTop?.extent.width}
+          fill="green"
+          opacity={0.9}
         />
-      );
-    case 'statement':
-      return (
-        <BrickStatement
-          brickData={brickData}
-          moveProps={moveProps}
-          coords={brickCoords}
-          color={color}
+      )}
+
+      {/* Bottom instruction notch bounding box */}
+      {'bBoxNotchInsBot' in brickData.instance && (
+        <rect
+          x={brickCoords.x + brickData.instance.bBoxNotchInsBot?.coords.x}
+          y={brickCoords.y + brickData.instance.bBoxNotchInsBot?.coords.y}
+          height={brickData.instance.bBoxNotchInsBot?.extent.height}
+          width={brickData.instance.bBoxNotchInsBot?.extent.width}
+          fill="green"
+          opacity={0.9}
         />
-      );
-    case 'block':
-      return (
-        <BrickBlock
-          brickData={brickData}
-          moveProps={moveProps}
-          coords={brickCoords}
-          color={color}
+      )}
+
+      {/* Top instruction notch inside nesting bounding box */}
+      {'bBoxNotchInsNestTop' in brickData.instance && (
+        <rect
+          x={brickCoords.x + brickData.instance.bBoxNotchInsNestTop?.coords.x}
+          y={brickCoords.y + brickData.instance.bBoxNotchInsNestTop?.coords.y}
+          height={brickData.instance.bBoxNotchInsNestTop?.extent.height}
+          width={brickData.instance.bBoxNotchInsNestTop?.extent.width}
+          fill="green"
+          opacity={0.9}
         />
-      );
-    default:
-      return <></>;
-  }
+      )}
+    </>
+  );
+
+  const getBrick = () => {
+    switch (brickData.type) {
+      case 'data':
+        return (
+          <BrickData
+            brickData={brickData}
+            moveProps={moveProps}
+            coords={brickCoords}
+            color={color}
+          />
+        );
+      case 'expression':
+        return (
+          <BrickExpression
+            brickData={brickData}
+            moveProps={moveProps}
+            coords={brickCoords}
+            color={color}
+          />
+        );
+      case 'statement':
+        return (
+          <BrickStatement
+            brickData={brickData}
+            moveProps={moveProps}
+            coords={brickCoords}
+            color={color}
+          />
+        );
+      case 'block':
+        return (
+          <BrickBlock
+            brickData={brickData}
+            moveProps={moveProps}
+            coords={brickCoords}
+            color={color}
+          />
+        );
+      default:
+        return <></>;
+    }
+  };
+
+  return (
+    <>
+      <VisualIndicators />
+      {/* {getBrick()} */}
+    </>
+  );
 };
 
 export default BrickFactory;
diff --git a/modules/code-builder/playground/pages/WorkSpace/data.ts b/modules/code-builder/playground/pages/WorkSpace/data.ts
index 768712a2..b29701c4 100644
--- a/modules/code-builder/playground/pages/WorkSpace/data.ts
+++ b/modules/code-builder/playground/pages/WorkSpace/data.ts
@@ -1,16 +1,19 @@
-import {
-    ModelBrickBlock,
-    ModelBrickData,
-    ModelBrickExpression,
-    ModelBrickStatement,
-} from '@/brick';
-import type { TBrickType, TBrickCoords, TBrickArgDataType } from '@/@types/brick';
+import { ModelBrickBlock, ModelBrickStatement } from '@/brick';
+import type {
+    TBrickType,
+    TBrickCoords,
+    TBrickArgDataType,
+    IBrickData,
+    IBrickExpression,
+    IBrickStatement,
+    IBrickBlock,
+} from '@/@types/brick';
 
 type InstanceMap = {
-    data: ModelBrickData;
-    expression: ModelBrickExpression;
-    statement: ModelBrickStatement;
-    block: ModelBrickBlock;
+    data: IBrickData;
+    expression: IBrickExpression;
+    statement: IBrickStatement;
+    block: IBrickBlock;
 };
 
 export type Brick = {

From 12d2b2398fcb94c696fbf67e8abbbe7e3acadfd1 Mon Sep 17 00:00:00 2001
From: Anindya Kundu <anindyaak007@gmail.com>
Date: Thu, 21 Mar 2024 00:33:05 +0530
Subject: [PATCH 48/48] hack(singer): disable erroneous lines

---
 modules/singer/playground/pages/Voice.tsx | 28 +++++++++++------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/modules/singer/playground/pages/Voice.tsx b/modules/singer/playground/pages/Voice.tsx
index 94ab7ff4..b94b744f 100644
--- a/modules/singer/playground/pages/Voice.tsx
+++ b/modules/singer/playground/pages/Voice.tsx
@@ -1,7 +1,7 @@
 import { Voice } from '@/core/voice';
 import SynthUtils from '@/core/synthUtils';
 import * as Tone from 'tone';
-import { _state, noteValueToSeconds, _defaultSynth, _polySynth } from '@/singer';
+// import { _state, noteValueToSeconds, _defaultSynth, _polySynth } from '@/singer';
 import { setupSynthUtils } from '@/core/synthUtils';
 import { injected } from '@/index';
 
@@ -18,26 +18,27 @@ await (async () => {
     'audio.piano': getAsset('audio.piano')!,
     'audio.snare': getAsset('audio.snare')!,
   };
-
 })();
 
 function _getSynth(synthType: string) {
-  switch (synthType) {
-    case 'polysynth':
-      return _polySynth;
-  }
-  return _defaultSynth;
+  synthType;
+
+  // switch (synthType) {
+  //   case 'polysynth':
+  //     return _polySynth;
+  // }
+  // return _defaultSynth;
 }
 
 async function playSynth(synthType: string) {
   await Tone.start();
-  const synth = _getSynth(synthType);
-  _state.notesPlayed = 0;
+  // const synth = _getSynth(synthType);
+  // _state.notesPlayed = 0;
   console.log('playing c4 using', synthType);
-  const now = Tone.now();
-  let offset = noteValueToSeconds(_state.notesPlayed);
-  synth.triggerAttackRelease('c4', '4n', now + offset);
-  _state.notesPlayed += 4;
+  // const now = Tone.now();
+  // let offset = noteValueToSeconds(_state.notesPlayed);
+  // synth.triggerAttackRelease('c4', '4n', now + offset);
+  // _state.notesPlayed += 4;
 }
 
 async function voice() {
@@ -61,7 +62,6 @@ async function voice() {
   //   }
   // }).toDestination();
 
-
   // _state.notesPlayed = 0;
   // const now = Tone.now();
   // let offset = noteValueToSeconds(_state.notesPlayed);