diff --git a/.github/workflows/code-heal-check-node.yml b/.github/workflows/code-heal-check-node.yml
new file mode 100644
index 000000000..da370aa60
--- /dev/null
+++ b/.github/workflows/code-heal-check-node.yml
@@ -0,0 +1,99 @@
+name: Code health check Node
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+      - port-to-js
+jobs:
+  vitest:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+      - name: Install pnpm
+        run: npm install -g pnpm
+      - name: Cache node modules
+        uses: actions/cache@v4
+        with:
+          path: |
+            monosketch-svelte/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('monosketch-svelte/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - name: Install dependencies
+        run: cd monosketch-svelte && pnpm install
+      - name: Run Vitest
+        run: cd monosketch-svelte && pnpm run test
+
+  bundle_svelte:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+      - name: Install pnpm
+        run: npm install -g pnpm
+      - name: Cache node modules
+        uses: actions/cache@v4
+        with:
+          path: |
+            monosketch-svelte/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('monosketch-svelte/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - name: Install dependencies
+        run: cd monosketch-svelte && pnpm install
+      - name: Build Svelte
+        run: cd monosketch-svelte && pnpm run build
+
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+      - name: Install pnpm
+        run: npm install -g pnpm
+      - name: Cache node modules
+        uses: actions/cache@v4
+        with:
+          path: |
+            monosketch-svelte/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('monosketch-svelte/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - name: Install dependencies
+        run: cd monosketch-svelte && pnpm install
+      - name: Run Lint
+        run: cd monosketch-svelte && pnpm run lint
+
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+      - name: Install pnpm
+        run: npm install -g pnpm
+      - name: Cache node modules
+        uses: actions/cache@v4
+        with:
+          path: |
+            monosketch-svelte/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('monosketch-svelte/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+      - name: Install dependencies
+        run: cd monosketch-svelte && pnpm install
+      - name: Run Lint
+        run: cd monosketch-svelte && pnpm run check
diff --git a/.github/workflows/code-health-check.yml b/.github/workflows/code-health-check.yml
index b62800290..6a05142df 100644
--- a/.github/workflows/code-health-check.yml
+++ b/.github/workflows/code-health-check.yml
@@ -8,13 +8,13 @@ jobs:
   unit_test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-java@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-java@v4
         with:
           distribution: 'zulu'
           java-version: 17
       - name: Cache local maven repository
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: |
             ~/.gradle/caches
@@ -28,7 +28,7 @@ jobs:
         if: failure()
         run: sh tools/devops/remove_success_test_report
       - name: Publish test result
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: test-result
@@ -40,13 +40,13 @@ jobs:
   ktlint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-java@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-java@v4
         with:
           distribution: 'zulu'
           java-version: 17
       - name: Cache local maven repository
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: |
             ~/.gradle/caches
@@ -60,13 +60,13 @@ jobs:
   assemble:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-java@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-java@v4
         with:
           distribution: 'zulu'
           java-version: 17
       - name: Cache local maven repository
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: |
             ~/.gradle/caches
@@ -74,5 +74,5 @@ jobs:
           key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle', '**/gradle-wrapper.properties') }}
           restore-keys: |
             ${{ runner.os }}-gradle-
-            
+
       - run: ./gradlew assemble
diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
index 3eb7b262a..3844cfee5 100644
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@@ -28,6 +28,9 @@
       <option name="NAME_COUNT_TO_USE_STAR_IMPORT_FOR_MEMBERS" value="2147483647" />
       <option name="CODE_STYLE_DEFAULTS" value="KOTLIN_OFFICIAL" />
     </JetCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </TypeScriptCodeStyleSettings>
     <XML>
       <option name="XML_KEEP_LINE_BREAKS" value="false" />
       <option name="XML_ALIGN_ATTRIBUTES" value="false" />
diff --git a/.idea/misc.xml b/.idea/misc.xml
index 4975f0d6e..5d9825616 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -4,7 +4,7 @@
   <component name="FrameworkDetectionExcludesConfiguration">
     <file type="web" url="file://$PROJECT_DIR$" />
   </component>
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_17" project-jdk-name="11" project-jdk-type="JavaSDK">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_11" default="true" project-jdk-name="11" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/out" />
   </component>
 </project>
\ No newline at end of file
diff --git a/monosketch-svelte/.editorconfig b/monosketch-svelte/.editorconfig
new file mode 100644
index 000000000..228b1cf70
--- /dev/null
+++ b/monosketch-svelte/.editorconfig
@@ -0,0 +1,584 @@
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = false
+max_line_length = 120
+tab_width = 4
+ij_continuation_indent_size = 8
+ij_formatter_off_tag = @formatter:off
+ij_formatter_on_tag = @formatter:on
+ij_formatter_tags_enabled = true
+ij_smart_tabs = false
+ij_visual_guides = 
+ij_wrap_on_typing = false
+
+[*.css]
+ij_css_align_closing_brace_with_properties = false
+ij_css_blank_lines_around_nested_selector = 1
+ij_css_blank_lines_between_blocks = 1
+ij_css_block_comment_add_space = false
+ij_css_brace_placement = end_of_line
+ij_css_enforce_quotes_on_format = false
+ij_css_hex_color_long_format = false
+ij_css_hex_color_lower_case = false
+ij_css_hex_color_short_format = false
+ij_css_hex_color_upper_case = false
+ij_css_keep_blank_lines_in_code = 2
+ij_css_keep_indents_on_empty_lines = false
+ij_css_keep_single_line_blocks = false
+ij_css_properties_order = font,font-family,font-size,font-weight,font-style,font-variant,font-size-adjust,font-stretch,line-height,position,z-index,top,right,bottom,left,display,visibility,float,clear,overflow,overflow-x,overflow-y,clip,zoom,align-content,align-items,align-self,flex,flex-flow,flex-basis,flex-direction,flex-grow,flex-shrink,flex-wrap,justify-content,order,box-sizing,width,min-width,max-width,height,min-height,max-height,margin,margin-top,margin-right,margin-bottom,margin-left,padding,padding-top,padding-right,padding-bottom,padding-left,table-layout,empty-cells,caption-side,border-spacing,border-collapse,list-style,list-style-position,list-style-type,list-style-image,content,quotes,counter-reset,counter-increment,resize,cursor,user-select,nav-index,nav-up,nav-right,nav-down,nav-left,transition,transition-delay,transition-timing-function,transition-duration,transition-property,transform,transform-origin,animation,animation-name,animation-duration,animation-play-state,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,text-align,text-align-last,vertical-align,white-space,text-decoration,text-emphasis,text-emphasis-color,text-emphasis-style,text-emphasis-position,text-indent,text-justify,letter-spacing,word-spacing,text-outline,text-transform,text-wrap,text-overflow,text-overflow-ellipsis,text-overflow-mode,word-wrap,word-break,tab-size,hyphens,pointer-events,opacity,color,border,border-width,border-style,border-color,border-top,border-top-width,border-top-style,border-top-color,border-right,border-right-width,border-right-style,border-right-color,border-bottom,border-bottom-width,border-bottom-style,border-bottom-color,border-left,border-left-width,border-left-style,border-left-color,border-radius,border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius,border-image,border-image-source,border-image-slice,border-image-width,border-image-outset,border-image-repeat,outline,outline-width,outline-style,outline-color,outline-offset,background,background-color,background-image,background-repeat,background-attachment,background-position,background-position-x,background-position-y,background-clip,background-origin,background-size,box-decoration-break,box-shadow,text-shadow
+ij_css_space_after_colon = true
+ij_css_space_before_opening_brace = true
+ij_css_use_double_quotes = true
+ij_css_value_alignment = do_not_align
+
+[*.feature]
+indent_size = 2
+ij_gherkin_keep_indents_on_empty_lines = false
+
+[*.less]
+indent_size = 2
+ij_less_align_closing_brace_with_properties = false
+ij_less_blank_lines_around_nested_selector = 1
+ij_less_blank_lines_between_blocks = 1
+ij_less_block_comment_add_space = false
+ij_less_brace_placement = 0
+ij_less_enforce_quotes_on_format = false
+ij_less_hex_color_long_format = false
+ij_less_hex_color_lower_case = false
+ij_less_hex_color_short_format = false
+ij_less_hex_color_upper_case = false
+ij_less_keep_blank_lines_in_code = 2
+ij_less_keep_indents_on_empty_lines = false
+ij_less_keep_single_line_blocks = false
+ij_less_line_comment_add_space = false
+ij_less_line_comment_at_first_column = false
+ij_less_properties_order = font,font-family,font-size,font-weight,font-style,font-variant,font-size-adjust,font-stretch,line-height,position,z-index,top,right,bottom,left,display,visibility,float,clear,overflow,overflow-x,overflow-y,clip,zoom,align-content,align-items,align-self,flex,flex-flow,flex-basis,flex-direction,flex-grow,flex-shrink,flex-wrap,justify-content,order,box-sizing,width,min-width,max-width,height,min-height,max-height,margin,margin-top,margin-right,margin-bottom,margin-left,padding,padding-top,padding-right,padding-bottom,padding-left,table-layout,empty-cells,caption-side,border-spacing,border-collapse,list-style,list-style-position,list-style-type,list-style-image,content,quotes,counter-reset,counter-increment,resize,cursor,user-select,nav-index,nav-up,nav-right,nav-down,nav-left,transition,transition-delay,transition-timing-function,transition-duration,transition-property,transform,transform-origin,animation,animation-name,animation-duration,animation-play-state,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,text-align,text-align-last,vertical-align,white-space,text-decoration,text-emphasis,text-emphasis-color,text-emphasis-style,text-emphasis-position,text-indent,text-justify,letter-spacing,word-spacing,text-outline,text-transform,text-wrap,text-overflow,text-overflow-ellipsis,text-overflow-mode,word-wrap,word-break,tab-size,hyphens,pointer-events,opacity,color,border,border-width,border-style,border-color,border-top,border-top-width,border-top-style,border-top-color,border-right,border-right-width,border-right-style,border-right-color,border-bottom,border-bottom-width,border-bottom-style,border-bottom-color,border-left,border-left-width,border-left-style,border-left-color,border-radius,border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius,border-image,border-image-source,border-image-slice,border-image-width,border-image-outset,border-image-repeat,outline,outline-width,outline-style,outline-color,outline-offset,background,background-color,background-image,background-repeat,background-attachment,background-position,background-position-x,background-position-y,background-clip,background-origin,background-size,box-decoration-break,box-shadow,text-shadow
+ij_less_space_after_colon = true
+ij_less_space_before_opening_brace = true
+ij_less_use_double_quotes = true
+ij_less_value_alignment = 0
+
+[*.sass]
+indent_size = 2
+ij_sass_align_closing_brace_with_properties = false
+ij_sass_blank_lines_around_nested_selector = 1
+ij_sass_blank_lines_between_blocks = 1
+ij_sass_brace_placement = 0
+ij_sass_enforce_quotes_on_format = false
+ij_sass_hex_color_long_format = false
+ij_sass_hex_color_lower_case = false
+ij_sass_hex_color_short_format = false
+ij_sass_hex_color_upper_case = false
+ij_sass_keep_blank_lines_in_code = 2
+ij_sass_keep_indents_on_empty_lines = false
+ij_sass_keep_single_line_blocks = false
+ij_sass_line_comment_add_space = false
+ij_sass_line_comment_at_first_column = false
+ij_sass_properties_order = font,font-family,font-size,font-weight,font-style,font-variant,font-size-adjust,font-stretch,line-height,position,z-index,top,right,bottom,left,display,visibility,float,clear,overflow,overflow-x,overflow-y,clip,zoom,align-content,align-items,align-self,flex,flex-flow,flex-basis,flex-direction,flex-grow,flex-shrink,flex-wrap,justify-content,order,box-sizing,width,min-width,max-width,height,min-height,max-height,margin,margin-top,margin-right,margin-bottom,margin-left,padding,padding-top,padding-right,padding-bottom,padding-left,table-layout,empty-cells,caption-side,border-spacing,border-collapse,list-style,list-style-position,list-style-type,list-style-image,content,quotes,counter-reset,counter-increment,resize,cursor,user-select,nav-index,nav-up,nav-right,nav-down,nav-left,transition,transition-delay,transition-timing-function,transition-duration,transition-property,transform,transform-origin,animation,animation-name,animation-duration,animation-play-state,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,text-align,text-align-last,vertical-align,white-space,text-decoration,text-emphasis,text-emphasis-color,text-emphasis-style,text-emphasis-position,text-indent,text-justify,letter-spacing,word-spacing,text-outline,text-transform,text-wrap,text-overflow,text-overflow-ellipsis,text-overflow-mode,word-wrap,word-break,tab-size,hyphens,pointer-events,opacity,color,border,border-width,border-style,border-color,border-top,border-top-width,border-top-style,border-top-color,border-right,border-right-width,border-right-style,border-right-color,border-bottom,border-bottom-width,border-bottom-style,border-bottom-color,border-left,border-left-width,border-left-style,border-left-color,border-radius,border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius,border-image,border-image-source,border-image-slice,border-image-width,border-image-outset,border-image-repeat,outline,outline-width,outline-style,outline-color,outline-offset,background,background-color,background-image,background-repeat,background-attachment,background-position,background-position-x,background-position-y,background-clip,background-origin,background-size,box-decoration-break,box-shadow,text-shadow
+ij_sass_space_after_colon = true
+ij_sass_space_before_opening_brace = true
+ij_sass_use_double_quotes = true
+ij_sass_value_alignment = 0
+
+[*.scss]
+indent_size = 2
+ij_scss_align_closing_brace_with_properties = false
+ij_scss_blank_lines_around_nested_selector = 1
+ij_scss_blank_lines_between_blocks = 1
+ij_scss_block_comment_add_space = false
+ij_scss_brace_placement = 0
+ij_scss_enforce_quotes_on_format = false
+ij_scss_hex_color_long_format = false
+ij_scss_hex_color_lower_case = false
+ij_scss_hex_color_short_format = false
+ij_scss_hex_color_upper_case = false
+ij_scss_keep_blank_lines_in_code = 2
+ij_scss_keep_indents_on_empty_lines = false
+ij_scss_keep_single_line_blocks = false
+ij_scss_line_comment_add_space = false
+ij_scss_line_comment_at_first_column = false
+ij_scss_properties_order = font,font-family,font-size,font-weight,font-style,font-variant,font-size-adjust,font-stretch,line-height,position,z-index,top,right,bottom,left,display,visibility,float,clear,overflow,overflow-x,overflow-y,clip,zoom,align-content,align-items,align-self,flex,flex-flow,flex-basis,flex-direction,flex-grow,flex-shrink,flex-wrap,justify-content,order,box-sizing,width,min-width,max-width,height,min-height,max-height,margin,margin-top,margin-right,margin-bottom,margin-left,padding,padding-top,padding-right,padding-bottom,padding-left,table-layout,empty-cells,caption-side,border-spacing,border-collapse,list-style,list-style-position,list-style-type,list-style-image,content,quotes,counter-reset,counter-increment,resize,cursor,user-select,nav-index,nav-up,nav-right,nav-down,nav-left,transition,transition-delay,transition-timing-function,transition-duration,transition-property,transform,transform-origin,animation,animation-name,animation-duration,animation-play-state,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,text-align,text-align-last,vertical-align,white-space,text-decoration,text-emphasis,text-emphasis-color,text-emphasis-style,text-emphasis-position,text-indent,text-justify,letter-spacing,word-spacing,text-outline,text-transform,text-wrap,text-overflow,text-overflow-ellipsis,text-overflow-mode,word-wrap,word-break,tab-size,hyphens,pointer-events,opacity,color,border,border-width,border-style,border-color,border-top,border-top-width,border-top-style,border-top-color,border-right,border-right-width,border-right-style,border-right-color,border-bottom,border-bottom-width,border-bottom-style,border-bottom-color,border-left,border-left-width,border-left-style,border-left-color,border-radius,border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius,border-image,border-image-source,border-image-slice,border-image-width,border-image-outset,border-image-repeat,outline,outline-width,outline-style,outline-color,outline-offset,background,background-color,background-image,background-repeat,background-attachment,background-position,background-position-x,background-position-y,background-clip,background-origin,background-size,box-decoration-break,box-shadow,text-shadow
+ij_scss_space_after_colon = true
+ij_scss_space_before_opening_brace = true
+ij_scss_use_double_quotes = true
+ij_scss_value_alignment = 0
+
+[*.vue]
+indent_size = 2
+tab_width = 2
+ij_continuation_indent_size = 4
+ij_vue_indent_children_of_top_level = template
+ij_vue_interpolation_new_line_after_start_delimiter = true
+ij_vue_interpolation_new_line_before_end_delimiter = true
+ij_vue_interpolation_wrap = off
+ij_vue_keep_indents_on_empty_lines = false
+ij_vue_spaces_within_interpolation_expressions = true
+
+[.editorconfig]
+ij_editorconfig_align_group_field_declarations = false
+ij_editorconfig_space_after_colon = false
+ij_editorconfig_space_after_comma = true
+ij_editorconfig_space_before_colon = false
+ij_editorconfig_space_before_comma = false
+ij_editorconfig_spaces_around_assignment_operators = true
+
+[{*.ant,*.fxml,*.jhm,*.jnlp,*.jrxml,*.rng,*.tld,*.wsdl,*.xml,*.xsd,*.xsl,*.xslt,*.xul}]
+ij_continuation_indent_size = 4
+ij_xml_align_attributes = true
+ij_xml_align_text = false
+ij_xml_attribute_wrap = normal
+ij_xml_block_comment_add_space = false
+ij_xml_block_comment_at_first_column = true
+ij_xml_keep_blank_lines = 2
+ij_xml_keep_indents_on_empty_lines = false
+ij_xml_keep_line_breaks = true
+ij_xml_keep_line_breaks_in_text = true
+ij_xml_keep_whitespaces = false
+ij_xml_keep_whitespaces_around_cdata = preserve
+ij_xml_keep_whitespaces_inside_cdata = false
+ij_xml_line_comment_at_first_column = true
+ij_xml_space_after_tag_name = false
+ij_xml_space_around_equals_in_attribute = false
+ij_xml_space_inside_empty_tag = false
+ij_xml_text_wrap = normal
+
+[{*.ats,*.cts,*.mts,*.ts}]
+ij_continuation_indent_size = 4
+ij_typescript_align_imports = false
+ij_typescript_align_multiline_array_initializer_expression = false
+ij_typescript_align_multiline_binary_operation = false
+ij_typescript_align_multiline_chained_methods = false
+ij_typescript_align_multiline_extends_list = false
+ij_typescript_align_multiline_for = true
+ij_typescript_align_multiline_parameters = true
+ij_typescript_align_multiline_parameters_in_calls = false
+ij_typescript_align_multiline_ternary_operation = false
+ij_typescript_align_object_properties = 0
+ij_typescript_align_union_types = false
+ij_typescript_align_var_statements = 0
+ij_typescript_array_initializer_new_line_after_left_brace = false
+ij_typescript_array_initializer_right_brace_on_new_line = false
+ij_typescript_array_initializer_wrap = off
+ij_typescript_assignment_wrap = off
+ij_typescript_binary_operation_sign_on_next_line = false
+ij_typescript_binary_operation_wrap = off
+ij_typescript_blacklist_imports = rxjs/Rx,node_modules/**,**/node_modules/**,@angular/material,@angular/material/typings/**
+ij_typescript_blank_lines_after_imports = 1
+ij_typescript_blank_lines_around_class = 1
+ij_typescript_blank_lines_around_field = 0
+ij_typescript_blank_lines_around_field_in_interface = 0
+ij_typescript_blank_lines_around_function = 1
+ij_typescript_blank_lines_around_method = 1
+ij_typescript_blank_lines_around_method_in_interface = 1
+ij_typescript_block_brace_style = end_of_line
+ij_typescript_block_comment_add_space = false
+ij_typescript_block_comment_at_first_column = true
+ij_typescript_call_parameters_new_line_after_left_paren = false
+ij_typescript_call_parameters_right_paren_on_new_line = false
+ij_typescript_call_parameters_wrap = off
+ij_typescript_catch_on_new_line = false
+ij_typescript_chained_call_dot_on_new_line = true
+ij_typescript_class_brace_style = end_of_line
+ij_typescript_comma_on_new_line = false
+ij_typescript_do_while_brace_force = never
+ij_typescript_else_on_new_line = false
+ij_typescript_enforce_trailing_comma = whenmultiline
+ij_typescript_enum_constants_wrap = on_every_item
+ij_typescript_extends_keyword_wrap = off
+ij_typescript_extends_list_wrap = off
+ij_typescript_field_prefix = _
+ij_typescript_file_name_style = relaxed
+ij_typescript_finally_on_new_line = false
+ij_typescript_for_brace_force = never
+ij_typescript_for_statement_new_line_after_left_paren = false
+ij_typescript_for_statement_right_paren_on_new_line = false
+ij_typescript_for_statement_wrap = off
+ij_typescript_force_quote_style = false
+ij_typescript_force_semicolon_style = false
+ij_typescript_function_expression_brace_style = end_of_line
+ij_typescript_if_brace_force = never
+ij_typescript_import_merge_members = global
+ij_typescript_import_prefer_absolute_path = true
+ij_typescript_import_sort_members = true
+ij_typescript_import_sort_module_name = true
+ij_typescript_import_use_node_resolution = true
+ij_typescript_imports_wrap = on_every_item
+ij_typescript_indent_case_from_switch = true
+ij_typescript_indent_chained_calls = true
+ij_typescript_indent_package_children = 0
+ij_typescript_jsdoc_include_types = false
+ij_typescript_jsx_attribute_value = braces
+ij_typescript_keep_blank_lines_in_code = 2
+ij_typescript_keep_first_column_comment = true
+ij_typescript_keep_indents_on_empty_lines = false
+ij_typescript_keep_line_breaks = true
+ij_typescript_keep_simple_blocks_in_one_line = false
+ij_typescript_keep_simple_methods_in_one_line = false
+ij_typescript_line_comment_add_space = true
+ij_typescript_line_comment_at_first_column = false
+ij_typescript_method_brace_style = end_of_line
+ij_typescript_method_call_chain_wrap = off
+ij_typescript_method_parameters_new_line_after_left_paren = false
+ij_typescript_method_parameters_right_paren_on_new_line = false
+ij_typescript_method_parameters_wrap = off
+ij_typescript_object_literal_wrap = on_every_item
+ij_typescript_object_types_wrap = on_every_item
+ij_typescript_parentheses_expression_new_line_after_left_paren = false
+ij_typescript_parentheses_expression_right_paren_on_new_line = false
+ij_typescript_place_assignment_sign_on_next_line = false
+ij_typescript_prefer_as_type_cast = false
+ij_typescript_prefer_explicit_types_function_expression_returns = false
+ij_typescript_prefer_explicit_types_function_returns = false
+ij_typescript_prefer_explicit_types_vars_fields = false
+ij_typescript_prefer_parameters_wrap = false
+ij_typescript_property_prefix = 
+ij_typescript_reformat_c_style_comments = false
+ij_typescript_space_after_colon = true
+ij_typescript_space_after_comma = true
+ij_typescript_space_after_dots_in_rest_parameter = false
+ij_typescript_space_after_generator_mult = true
+ij_typescript_space_after_property_colon = true
+ij_typescript_space_after_quest = true
+ij_typescript_space_after_type_colon = true
+ij_typescript_space_after_unary_not = false
+ij_typescript_space_before_async_arrow_lparen = true
+ij_typescript_space_before_catch_keyword = true
+ij_typescript_space_before_catch_left_brace = true
+ij_typescript_space_before_catch_parentheses = true
+ij_typescript_space_before_class_lbrace = true
+ij_typescript_space_before_class_left_brace = true
+ij_typescript_space_before_colon = true
+ij_typescript_space_before_comma = false
+ij_typescript_space_before_do_left_brace = true
+ij_typescript_space_before_else_keyword = true
+ij_typescript_space_before_else_left_brace = true
+ij_typescript_space_before_finally_keyword = true
+ij_typescript_space_before_finally_left_brace = true
+ij_typescript_space_before_for_left_brace = true
+ij_typescript_space_before_for_parentheses = true
+ij_typescript_space_before_for_semicolon = false
+ij_typescript_space_before_function_left_parenth = true
+ij_typescript_space_before_generator_mult = false
+ij_typescript_space_before_if_left_brace = true
+ij_typescript_space_before_if_parentheses = true
+ij_typescript_space_before_method_call_parentheses = false
+ij_typescript_space_before_method_left_brace = true
+ij_typescript_space_before_method_parentheses = false
+ij_typescript_space_before_property_colon = false
+ij_typescript_space_before_quest = true
+ij_typescript_space_before_switch_left_brace = true
+ij_typescript_space_before_switch_parentheses = true
+ij_typescript_space_before_try_left_brace = true
+ij_typescript_space_before_type_colon = false
+ij_typescript_space_before_unary_not = false
+ij_typescript_space_before_while_keyword = true
+ij_typescript_space_before_while_left_brace = true
+ij_typescript_space_before_while_parentheses = true
+ij_typescript_spaces_around_additive_operators = true
+ij_typescript_spaces_around_arrow_function_operator = true
+ij_typescript_spaces_around_assignment_operators = true
+ij_typescript_spaces_around_bitwise_operators = true
+ij_typescript_spaces_around_equality_operators = true
+ij_typescript_spaces_around_logical_operators = true
+ij_typescript_spaces_around_multiplicative_operators = true
+ij_typescript_spaces_around_relational_operators = true
+ij_typescript_spaces_around_shift_operators = true
+ij_typescript_spaces_around_unary_operator = false
+ij_typescript_spaces_within_array_initializer_brackets = false
+ij_typescript_spaces_within_brackets = false
+ij_typescript_spaces_within_catch_parentheses = false
+ij_typescript_spaces_within_for_parentheses = false
+ij_typescript_spaces_within_if_parentheses = false
+ij_typescript_spaces_within_imports = true
+ij_typescript_spaces_within_interpolation_expressions = false
+ij_typescript_spaces_within_method_call_parentheses = false
+ij_typescript_spaces_within_method_parentheses = false
+ij_typescript_spaces_within_object_literal_braces = true
+ij_typescript_spaces_within_object_type_braces = true
+ij_typescript_spaces_within_parentheses = false
+ij_typescript_spaces_within_switch_parentheses = false
+ij_typescript_spaces_within_type_assertion = false
+ij_typescript_spaces_within_union_types = true
+ij_typescript_spaces_within_while_parentheses = false
+ij_typescript_special_else_if_treatment = true
+ij_typescript_ternary_operation_signs_on_next_line = false
+ij_typescript_ternary_operation_wrap = off
+ij_typescript_union_types_wrap = on_every_item
+ij_typescript_use_chained_calls_group_indents = false
+ij_typescript_use_double_quotes = true
+ij_typescript_use_explicit_js_extension = auto
+ij_typescript_use_path_mapping = always
+ij_typescript_use_public_modifier = false
+ij_typescript_use_semicolon_after_statement = true
+ij_typescript_var_declaration_wrap = normal
+ij_typescript_while_brace_force = never
+ij_typescript_while_on_new_line = false
+ij_typescript_wrap_comments = false
+
+[{*.bash,*.sh,*.zsh}]
+indent_size = 2
+tab_width = 2
+ij_shell_binary_ops_start_line = false
+ij_shell_keep_column_alignment_padding = false
+ij_shell_minify_program = false
+ij_shell_redirect_followed_by_space = false
+ij_shell_switch_cases_indented = false
+ij_shell_use_unix_line_separator = true
+
+[{*.cjs,*.js}]
+ij_continuation_indent_size = 4
+ij_javascript_align_imports = false
+ij_javascript_align_multiline_array_initializer_expression = false
+ij_javascript_align_multiline_binary_operation = false
+ij_javascript_align_multiline_chained_methods = false
+ij_javascript_align_multiline_extends_list = false
+ij_javascript_align_multiline_for = true
+ij_javascript_align_multiline_parameters = true
+ij_javascript_align_multiline_parameters_in_calls = false
+ij_javascript_align_multiline_ternary_operation = false
+ij_javascript_align_object_properties = 0
+ij_javascript_align_union_types = false
+ij_javascript_align_var_statements = 0
+ij_javascript_array_initializer_new_line_after_left_brace = false
+ij_javascript_array_initializer_right_brace_on_new_line = false
+ij_javascript_array_initializer_wrap = off
+ij_javascript_assignment_wrap = off
+ij_javascript_binary_operation_sign_on_next_line = false
+ij_javascript_binary_operation_wrap = off
+ij_javascript_blacklist_imports = rxjs/Rx,node_modules/**,**/node_modules/**,@angular/material,@angular/material/typings/**
+ij_javascript_blank_lines_after_imports = 1
+ij_javascript_blank_lines_around_class = 1
+ij_javascript_blank_lines_around_field = 0
+ij_javascript_blank_lines_around_function = 1
+ij_javascript_blank_lines_around_method = 1
+ij_javascript_block_brace_style = end_of_line
+ij_javascript_block_comment_add_space = false
+ij_javascript_block_comment_at_first_column = true
+ij_javascript_call_parameters_new_line_after_left_paren = false
+ij_javascript_call_parameters_right_paren_on_new_line = false
+ij_javascript_call_parameters_wrap = off
+ij_javascript_catch_on_new_line = false
+ij_javascript_chained_call_dot_on_new_line = true
+ij_javascript_class_brace_style = end_of_line
+ij_javascript_comma_on_new_line = false
+ij_javascript_do_while_brace_force = never
+ij_javascript_else_on_new_line = false
+ij_javascript_enforce_trailing_comma = keep
+ij_javascript_extends_keyword_wrap = off
+ij_javascript_extends_list_wrap = off
+ij_javascript_field_prefix = _
+ij_javascript_file_name_style = relaxed
+ij_javascript_finally_on_new_line = false
+ij_javascript_for_brace_force = never
+ij_javascript_for_statement_new_line_after_left_paren = false
+ij_javascript_for_statement_right_paren_on_new_line = false
+ij_javascript_for_statement_wrap = off
+ij_javascript_force_quote_style = false
+ij_javascript_force_semicolon_style = false
+ij_javascript_function_expression_brace_style = end_of_line
+ij_javascript_if_brace_force = never
+ij_javascript_import_merge_members = global
+ij_javascript_import_prefer_absolute_path = global
+ij_javascript_import_sort_members = true
+ij_javascript_import_sort_module_name = false
+ij_javascript_import_use_node_resolution = true
+ij_javascript_imports_wrap = on_every_item
+ij_javascript_indent_case_from_switch = true
+ij_javascript_indent_chained_calls = true
+ij_javascript_indent_package_children = 0
+ij_javascript_jsx_attribute_value = braces
+ij_javascript_keep_blank_lines_in_code = 2
+ij_javascript_keep_first_column_comment = true
+ij_javascript_keep_indents_on_empty_lines = false
+ij_javascript_keep_line_breaks = true
+ij_javascript_keep_simple_blocks_in_one_line = false
+ij_javascript_keep_simple_methods_in_one_line = false
+ij_javascript_line_comment_add_space = true
+ij_javascript_line_comment_at_first_column = false
+ij_javascript_method_brace_style = end_of_line
+ij_javascript_method_call_chain_wrap = off
+ij_javascript_method_parameters_new_line_after_left_paren = false
+ij_javascript_method_parameters_right_paren_on_new_line = false
+ij_javascript_method_parameters_wrap = off
+ij_javascript_object_literal_wrap = on_every_item
+ij_javascript_object_types_wrap = on_every_item
+ij_javascript_parentheses_expression_new_line_after_left_paren = false
+ij_javascript_parentheses_expression_right_paren_on_new_line = false
+ij_javascript_place_assignment_sign_on_next_line = false
+ij_javascript_prefer_as_type_cast = false
+ij_javascript_prefer_explicit_types_function_expression_returns = false
+ij_javascript_prefer_explicit_types_function_returns = false
+ij_javascript_prefer_explicit_types_vars_fields = false
+ij_javascript_prefer_parameters_wrap = false
+ij_javascript_property_prefix = 
+ij_javascript_reformat_c_style_comments = false
+ij_javascript_space_after_colon = true
+ij_javascript_space_after_comma = true
+ij_javascript_space_after_dots_in_rest_parameter = false
+ij_javascript_space_after_generator_mult = true
+ij_javascript_space_after_property_colon = true
+ij_javascript_space_after_quest = true
+ij_javascript_space_after_type_colon = true
+ij_javascript_space_after_unary_not = false
+ij_javascript_space_before_async_arrow_lparen = true
+ij_javascript_space_before_catch_keyword = true
+ij_javascript_space_before_catch_left_brace = true
+ij_javascript_space_before_catch_parentheses = true
+ij_javascript_space_before_class_lbrace = true
+ij_javascript_space_before_class_left_brace = true
+ij_javascript_space_before_colon = true
+ij_javascript_space_before_comma = false
+ij_javascript_space_before_do_left_brace = true
+ij_javascript_space_before_else_keyword = true
+ij_javascript_space_before_else_left_brace = true
+ij_javascript_space_before_finally_keyword = true
+ij_javascript_space_before_finally_left_brace = true
+ij_javascript_space_before_for_left_brace = true
+ij_javascript_space_before_for_parentheses = true
+ij_javascript_space_before_for_semicolon = false
+ij_javascript_space_before_function_left_parenth = true
+ij_javascript_space_before_generator_mult = false
+ij_javascript_space_before_if_left_brace = true
+ij_javascript_space_before_if_parentheses = true
+ij_javascript_space_before_method_call_parentheses = false
+ij_javascript_space_before_method_left_brace = true
+ij_javascript_space_before_method_parentheses = false
+ij_javascript_space_before_property_colon = false
+ij_javascript_space_before_quest = true
+ij_javascript_space_before_switch_left_brace = true
+ij_javascript_space_before_switch_parentheses = true
+ij_javascript_space_before_try_left_brace = true
+ij_javascript_space_before_type_colon = false
+ij_javascript_space_before_unary_not = false
+ij_javascript_space_before_while_keyword = true
+ij_javascript_space_before_while_left_brace = true
+ij_javascript_space_before_while_parentheses = true
+ij_javascript_spaces_around_additive_operators = true
+ij_javascript_spaces_around_arrow_function_operator = true
+ij_javascript_spaces_around_assignment_operators = true
+ij_javascript_spaces_around_bitwise_operators = true
+ij_javascript_spaces_around_equality_operators = true
+ij_javascript_spaces_around_logical_operators = true
+ij_javascript_spaces_around_multiplicative_operators = true
+ij_javascript_spaces_around_relational_operators = true
+ij_javascript_spaces_around_shift_operators = true
+ij_javascript_spaces_around_unary_operator = false
+ij_javascript_spaces_within_array_initializer_brackets = false
+ij_javascript_spaces_within_brackets = false
+ij_javascript_spaces_within_catch_parentheses = false
+ij_javascript_spaces_within_for_parentheses = false
+ij_javascript_spaces_within_if_parentheses = false
+ij_javascript_spaces_within_imports = false
+ij_javascript_spaces_within_interpolation_expressions = false
+ij_javascript_spaces_within_method_call_parentheses = false
+ij_javascript_spaces_within_method_parentheses = false
+ij_javascript_spaces_within_object_literal_braces = false
+ij_javascript_spaces_within_object_type_braces = true
+ij_javascript_spaces_within_parentheses = false
+ij_javascript_spaces_within_switch_parentheses = false
+ij_javascript_spaces_within_type_assertion = false
+ij_javascript_spaces_within_union_types = true
+ij_javascript_spaces_within_while_parentheses = false
+ij_javascript_special_else_if_treatment = true
+ij_javascript_ternary_operation_signs_on_next_line = false
+ij_javascript_ternary_operation_wrap = off
+ij_javascript_union_types_wrap = on_every_item
+ij_javascript_use_chained_calls_group_indents = false
+ij_javascript_use_double_quotes = true
+ij_javascript_use_explicit_js_extension = auto
+ij_javascript_use_path_mapping = always
+ij_javascript_use_public_modifier = false
+ij_javascript_use_semicolon_after_statement = true
+ij_javascript_var_declaration_wrap = normal
+ij_javascript_while_brace_force = never
+ij_javascript_while_on_new_line = false
+ij_javascript_wrap_comments = false
+
+[{*.har,*.jsb2,*.jsb3,*.json,.babelrc,.eslintrc,.stylelintrc,bowerrc,jest.config}]
+indent_size = 2
+ij_continuation_indent_size = 4
+ij_json_array_wrapping = split_into_lines
+ij_json_keep_blank_lines_in_code = 0
+ij_json_keep_indents_on_empty_lines = false
+ij_json_keep_line_breaks = true
+ij_json_keep_trailing_comma = false
+ij_json_object_wrapping = split_into_lines
+ij_json_property_alignment = do_not_align
+ij_json_space_after_colon = true
+ij_json_space_after_comma = true
+ij_json_space_before_colon = false
+ij_json_space_before_comma = false
+ij_json_spaces_within_braces = false
+ij_json_spaces_within_brackets = false
+ij_json_wrap_long_lines = false
+
+[{*.htm,*.html,*.ng,*.sht,*.shtm,*.shtml}]
+ij_continuation_indent_size = 4
+ij_html_add_new_line_before_tags = body,div,p,form,h1,h2,h3
+ij_html_align_attributes = true
+ij_html_align_text = false
+ij_html_attribute_wrap = normal
+ij_html_block_comment_add_space = false
+ij_html_block_comment_at_first_column = true
+ij_html_do_not_align_children_of_min_lines = 0
+ij_html_do_not_break_if_inline_tags = title,h1,h2,h3,h4,h5,h6,p
+ij_html_do_not_indent_children_of_tags = html,body,thead,tbody,tfoot
+ij_html_enforce_quotes = false
+ij_html_inline_tags = a,abbr,acronym,b,basefont,bdo,big,br,cite,cite,code,dfn,em,font,i,img,input,kbd,label,q,s,samp,select,small,span,strike,strong,sub,sup,textarea,tt,u,var
+ij_html_keep_blank_lines = 2
+ij_html_keep_indents_on_empty_lines = false
+ij_html_keep_line_breaks = true
+ij_html_keep_line_breaks_in_text = true
+ij_html_keep_whitespaces = false
+ij_html_keep_whitespaces_inside = span,pre,textarea
+ij_html_line_comment_at_first_column = true
+ij_html_new_line_after_last_attribute = never
+ij_html_new_line_before_first_attribute = never
+ij_html_quote_style = double
+ij_html_remove_new_line_before_tags = br
+ij_html_space_after_tag_name = false
+ij_html_space_around_equality_in_attribute = false
+ij_html_space_inside_empty_tag = false
+ij_html_text_wrap = normal
+
+[{*.http,*.rest}]
+indent_size = 0
+ij_continuation_indent_size = 4
+ij_http-request_call_parameters_wrap = normal
+ij_http-request_method_parameters_wrap = split_into_lines
+ij_http-request_space_before_comma = true
+ij_http-request_spaces_around_assignment_operators = true
+
+[{*.markdown,*.md}]
+ij_markdown_force_one_space_after_blockquote_symbol = true
+ij_markdown_force_one_space_after_header_symbol = true
+ij_markdown_force_one_space_after_list_bullet = true
+ij_markdown_force_one_space_between_words = true
+ij_markdown_format_tables = true
+ij_markdown_insert_quote_arrows_on_wrap = true
+ij_markdown_keep_indents_on_empty_lines = false
+ij_markdown_keep_line_breaks_inside_text_blocks = true
+ij_markdown_max_lines_around_block_elements = 1
+ij_markdown_max_lines_around_header = 1
+ij_markdown_max_lines_between_paragraphs = 1
+ij_markdown_min_lines_around_block_elements = 1
+ij_markdown_min_lines_around_header = 1
+ij_markdown_min_lines_between_paragraphs = 1
+ij_markdown_wrap_text_if_long = true
+ij_markdown_wrap_text_inside_blockquotes = true
+
+[{*.yaml,*.yml}]
+indent_size = 2
+ij_yaml_align_values_properties = do_not_align
+ij_yaml_autoinsert_sequence_marker = true
+ij_yaml_block_mapping_on_new_line = false
+ij_yaml_indent_sequence_value = true
+ij_yaml_keep_indents_on_empty_lines = false
+ij_yaml_keep_line_breaks = true
+ij_yaml_sequence_on_new_line = false
+ij_yaml_space_before_colon = false
+ij_yaml_spaces_within_braces = true
+ij_yaml_spaces_within_brackets = true
diff --git a/monosketch-svelte/.eslintrc.cjs b/monosketch-svelte/.eslintrc.cjs
new file mode 100644
index 000000000..d4293ee56
--- /dev/null
+++ b/monosketch-svelte/.eslintrc.cjs
@@ -0,0 +1,67 @@
+module.exports = {
+    parser: '@typescript-eslint/parser',
+    env: {
+        "browser": true,
+        "es2021": true
+    },
+    extends: [
+        "plugin:svelte/recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    overrides: [
+        {
+            env: {
+                "node": true
+            },
+            files: [
+                ".eslintrc.{js,cjs}"
+            ],
+            parserOptions: {
+                sourceType: "script"
+            }
+        },
+        {
+            files: ["src/**/*.svelte", "src/*.svelte"],
+            parser: 'svelte-eslint-parser',
+            parserOptions: {
+                parser: '@typescript-eslint/parser',
+            }
+        },
+    ],
+    parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        project: './tsconfig.json',
+        extraFileExtensions: ['.svelte']
+    },
+    ignorePatterns: [
+        "vite.config.ts",
+        "svelte.config.js",
+    ],
+    rules: {
+        "indent": ["error", 4, {
+            "SwitchCase": 1,
+        }],
+        "semi": ["error", "always"],
+        "@typescript-eslint/indent": ["error", 4],
+        "space-before-function-paren": ["error", {
+            "anonymous": "never",
+            "named": "never",
+            "asyncArrow": "always",
+        }],
+        "svelte/valid-compile": "off", // temporary ignore this rule until fixing a11y issues
+        "@typescript-eslint/no-namespace": "off", // temporary ignore this rule
+        "svelte/no-inner-declarations": "off",
+        "object-curly-spacing": ["error", "always"],
+        "@typescript-eslint/no-unused-vars": ["warn", {
+            "vars": "all",
+            "args": "after-used",
+            "ignoreRestSiblings": true,
+            "varsIgnorePattern": "^_",
+            "argsIgnorePattern": "^_",
+            "caughtErrors": "all",
+            "caughtErrorsIgnorePattern": "^_"
+        }],
+        "eol-last": ["error", "always"],
+    }
+}
diff --git a/monosketch-svelte/.gitignore b/monosketch-svelte/.gitignore
new file mode 100644
index 000000000..a547bf36d
--- /dev/null
+++ b/monosketch-svelte/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/monosketch-svelte/.prettierrc b/monosketch-svelte/.prettierrc
new file mode 100644
index 000000000..0d8f82192
--- /dev/null
+++ b/monosketch-svelte/.prettierrc
@@ -0,0 +1,11 @@
+{
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "useTabs": false,
+    "svelteSortOrder": "options-scripts-markup-styles",
+    "svelteStrictMode": true,
+    "svelteIndentScriptAndStyle": false,
+    "plugins": ["prettier-plugin-svelte"],
+    "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}
diff --git a/monosketch-svelte/.vscode/extensions.json b/monosketch-svelte/.vscode/extensions.json
new file mode 100644
index 000000000..fd2f1b85e
--- /dev/null
+++ b/monosketch-svelte/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+    "recommendations": ["svelte.svelte-vscode"]
+}
diff --git a/monosketch-svelte/README.md b/monosketch-svelte/README.md
new file mode 100644
index 000000000..14fc7f91b
--- /dev/null
+++ b/monosketch-svelte/README.md
@@ -0,0 +1 @@
+This is a temporary folder while porting this project to JS.
diff --git a/monosketch-svelte/index.html b/monosketch-svelte/index.html
new file mode 100644
index 000000000..60275d254
--- /dev/null
+++ b/monosketch-svelte/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en" class="">
+    <head>
+        <meta charset="UTF-8" />
+        <link href="/favicon.png" rel="icon" />
+        <meta
+            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+            name="viewport"
+        />
+        <title>MonoSketch</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <div id="modal"></div>
+        <div id="keyboard-shortcuts"></div>
+        <div id="alert"></div>
+        <div id="tooltip"></div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>
diff --git a/monosketch-svelte/package.json b/monosketch-svelte/package.json
new file mode 100644
index 000000000..652da5911
--- /dev/null
+++ b/monosketch-svelte/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "monosketch-svelte",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "lint": "eslint . --ext .ts,.tsx,.svelte",
+    "lint:fix": "eslint . --ext .ts,.tsx,.svelte --fix",
+    "test": "vitest --run"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@tsconfig/svelte": "^5.0.4",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^8.5.0",
+    "eslint": "^8.57.1",
+    "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-promise": "^6.6.0",
+    "eslint-plugin-svelte": "^2.46.1",
+    "sass": "^1.78.0",
+    "svelte": "^4.2.19",
+    "svelte-check": "^4.1.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11",
+    "vite-plugin-sass": "^0.1.0",
+    "vite-tsconfig-paths": "^5.0.1",
+    "vitest": "^2.1.8"
+  }
+}
diff --git a/monosketch-svelte/pnpm-lock.yaml b/monosketch-svelte/pnpm-lock.yaml
new file mode 100644
index 000000000..49ec31388
--- /dev/null
+++ b/monosketch-svelte/pnpm-lock.yaml
@@ -0,0 +1,3194 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+devDependencies:
+  '@sveltejs/vite-plugin-svelte':
+    specifier: ^3.1.2
+    version: 3.1.2(svelte@4.2.19)(vite@5.4.11)
+  '@tsconfig/svelte':
+    specifier: ^5.0.4
+    version: 5.0.4
+  '@typescript-eslint/eslint-plugin':
+    specifier: ^6.21.0
+    version: 6.21.0(@typescript-eslint/parser@8.18.0)(eslint@8.57.1)(typescript@5.7.2)
+  '@typescript-eslint/parser':
+    specifier: ^8.5.0
+    version: 8.18.0(eslint@8.57.1)(typescript@5.7.2)
+  eslint:
+    specifier: ^8.57.1
+    version: 8.57.1
+  eslint-config-standard-with-typescript:
+    specifier: ^43.0.1
+    version: 43.0.1(@typescript-eslint/eslint-plugin@6.21.0)(eslint-plugin-import@2.31.0)(eslint-plugin-n@16.6.2)(eslint-plugin-promise@6.6.0)(eslint@8.57.1)(typescript@5.7.2)
+  eslint-plugin-import:
+    specifier: ^2.30.0
+    version: 2.31.0(@typescript-eslint/parser@8.18.0)(eslint@8.57.1)
+  eslint-plugin-n:
+    specifier: ^16.6.2
+    version: 16.6.2(eslint@8.57.1)
+  eslint-plugin-promise:
+    specifier: ^6.6.0
+    version: 6.6.0(eslint@8.57.1)
+  eslint-plugin-svelte:
+    specifier: ^2.46.1
+    version: 2.46.1(eslint@8.57.1)(svelte@4.2.19)
+  sass:
+    specifier: ^1.78.0
+    version: 1.78.0
+  svelte:
+    specifier: ^4.2.19
+    version: 4.2.19
+  svelte-check:
+    specifier: ^4.1.1
+    version: 4.1.1(svelte@4.2.19)(typescript@5.7.2)
+  tslib:
+    specifier: ^2.8.1
+    version: 2.8.1
+  typescript:
+    specifier: ^5.7.2
+    version: 5.7.2
+  vite:
+    specifier: ^5.4.11
+    version: 5.4.11(sass@1.78.0)
+  vite-plugin-sass:
+    specifier: ^0.1.0
+    version: 0.1.0
+  vite-tsconfig-paths:
+    specifier: ^5.0.1
+    version: 5.0.1(typescript@5.7.2)(vite@5.4.11)
+  vitest:
+    specifier: ^2.1.8
+    version: 2.1.8(sass@1.78.0)
+
+packages:
+
+  /@ampproject/remapping@2.3.0:
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+    dev: true
+
+  /@esbuild/aix-ppc64@0.21.5:
+    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm64@0.21.5:
+    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm@0.21.5:
+    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-x64@0.21.5:
+    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-arm64@0.21.5:
+    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-x64@0.21.5:
+    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-arm64@0.21.5:
+    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-x64@0.21.5:
+    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm64@0.21.5:
+    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm@0.21.5:
+    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ia32@0.21.5:
+    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-loong64@0.21.5:
+    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-mips64el@0.21.5:
+    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ppc64@0.21.5:
+    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-riscv64@0.21.5:
+    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-s390x@0.21.5:
+    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-x64@0.21.5:
+    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/netbsd-x64@0.21.5:
+    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/openbsd-x64@0.21.5:
+    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/sunos-x64@0.21.5:
+    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-arm64@0.21.5:
+    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-ia32@0.21.5:
+    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-x64@0.21.5:
+    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@eslint-community/eslint-utils@4.4.1(eslint@8.57.1):
+    resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+    dependencies:
+      eslint: 8.57.1
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /@eslint-community/regexpp@4.12.1:
+    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+    dev: true
+
+  /@eslint/eslintrc@2.1.4:
+    resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.0
+      espree: 9.6.1
+      globals: 13.24.0
+      ignore: 5.3.2
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@eslint/js@8.57.1:
+    resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /@humanwhocodes/config-array@0.13.0:
+    resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
+    engines: {node: '>=10.10.0'}
+    deprecated: Use @eslint/config-array instead
+    dependencies:
+      '@humanwhocodes/object-schema': 2.0.3
+      debug: 4.4.0
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@humanwhocodes/module-importer@1.0.1:
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+    dev: true
+
+  /@humanwhocodes/object-schema@2.0.3:
+    resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
+    deprecated: Use @eslint/object-schema instead
+    dev: true
+
+  /@jridgewell/gen-mapping@0.3.5:
+    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+    dev: true
+
+  /@jridgewell/resolve-uri@3.1.2:
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /@jridgewell/set-array@1.2.1:
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /@jridgewell/sourcemap-codec@1.5.0:
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
+    dev: true
+
+  /@jridgewell/trace-mapping@0.3.25:
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+    dev: true
+
+  /@nodelib/fs.scandir@2.1.5:
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+    dev: true
+
+  /@nodelib/fs.stat@2.0.5:
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+    dev: true
+
+  /@nodelib/fs.walk@1.2.8:
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.17.1
+    dev: true
+
+  /@rollup/rollup-android-arm-eabi@4.28.1:
+    resolution: {integrity: sha512-2aZp8AES04KI2dy3Ss6/MDjXbwBzj+i0GqKtWXgw2/Ma6E4jJvujryO6gJAghIRVz7Vwr9Gtl/8na3nDUKpraQ==}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-android-arm64@4.28.1:
+    resolution: {integrity: sha512-EbkK285O+1YMrg57xVA+Dp0tDBRB93/BZKph9XhMjezf6F4TpYjaUSuPt5J0fZXlSag0LmZAsTmdGGqPp4pQFA==}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-darwin-arm64@4.28.1:
+    resolution: {integrity: sha512-prduvrMKU6NzMq6nxzQw445zXgaDBbMQvmKSJaxpaZ5R1QDM8w+eGxo6Y/jhT/cLoCvnZI42oEqf9KQNYz1fqQ==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-darwin-x64@4.28.1:
+    resolution: {integrity: sha512-WsvbOunsUk0wccO/TV4o7IKgloJ942hVFK1CLatwv6TJspcCZb9umQkPdvB7FihmdxgaKR5JyxDjWpCOp4uZlQ==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-freebsd-arm64@4.28.1:
+    resolution: {integrity: sha512-HTDPdY1caUcU4qK23FeeGxCdJF64cKkqajU0iBnTVxS8F7H/7BewvYoG+va1KPSL63kQ1PGNyiwKOfReavzvNA==}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-freebsd-x64@4.28.1:
+    resolution: {integrity: sha512-m/uYasxkUevcFTeRSM9TeLyPe2QDuqtjkeoTpP9SW0XxUWfcYrGDMkO/m2tTw+4NMAF9P2fU3Mw4ahNvo7QmsQ==}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm-gnueabihf@4.28.1:
+    resolution: {integrity: sha512-QAg11ZIt6mcmzpNE6JZBpKfJaKkqTm1A9+y9O+frdZJEuhQxiugM05gnCWiANHj4RmbgeVJpTdmKRmH/a+0QbA==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm-musleabihf@4.28.1:
+    resolution: {integrity: sha512-dRP9PEBfolq1dmMcFqbEPSd9VlRuVWEGSmbxVEfiq2cs2jlZAl0YNxFzAQS2OrQmsLBLAATDMb3Z6MFv5vOcXg==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-gnu@4.28.1:
+    resolution: {integrity: sha512-uGr8khxO+CKT4XU8ZUH1TTEUtlktK6Kgtv0+6bIFSeiSlnGJHG1tSFSjm41uQ9sAO/5ULx9mWOz70jYLyv1QkA==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-musl@4.28.1:
+    resolution: {integrity: sha512-QF54q8MYGAqMLrX2t7tNpi01nvq5RI59UBNx+3+37zoKX5KViPo/gk2QLhsuqok05sSCRluj0D00LzCwBikb0A==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-loongarch64-gnu@4.28.1:
+    resolution: {integrity: sha512-vPul4uodvWvLhRco2w0GcyZcdyBfpfDRgNKU+p35AWEbJ/HPs1tOUrkSueVbBS0RQHAf/A+nNtDpvw95PeVKOA==}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-powerpc64le-gnu@4.28.1:
+    resolution: {integrity: sha512-pTnTdBuC2+pt1Rmm2SV7JWRqzhYpEILML4PKODqLz+C7Ou2apEV52h19CR7es+u04KlqplggmN9sqZlekg3R1A==}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-riscv64-gnu@4.28.1:
+    resolution: {integrity: sha512-vWXy1Nfg7TPBSuAncfInmAI/WZDd5vOklyLJDdIRKABcZWojNDY0NJwruY2AcnCLnRJKSaBgf/GiJfauu8cQZA==}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-s390x-gnu@4.28.1:
+    resolution: {integrity: sha512-/yqC2Y53oZjb0yz8PVuGOQQNOTwxcizudunl/tFs1aLvObTclTwZ0JhXF2XcPT/zuaymemCDSuuUPXJJyqeDOg==}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-gnu@4.28.1:
+    resolution: {integrity: sha512-fzgeABz7rrAlKYB0y2kSEiURrI0691CSL0+KXwKwhxvj92VULEDQLpBYLHpF49MSiPG4sq5CK3qHMnb9tlCjBw==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-musl@4.28.1:
+    resolution: {integrity: sha512-xQTDVzSGiMlSshpJCtudbWyRfLaNiVPXt1WgdWTwWz9n0U12cI2ZVtWe/Jgwyv/6wjL7b66uu61Vg0POWVfz4g==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-arm64-msvc@4.28.1:
+    resolution: {integrity: sha512-wSXmDRVupJstFP7elGMgv+2HqXelQhuNf+IS4V+nUpNVi/GUiBgDmfwD0UGN3pcAnWsgKG3I52wMOBnk1VHr/A==}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-ia32-msvc@4.28.1:
+    resolution: {integrity: sha512-ZkyTJ/9vkgrE/Rk9vhMXhf8l9D+eAhbAVbsGsXKy2ohmJaWg0LPQLnIxRdRp/bKyr8tXuPlXhIoGlEB5XpJnGA==}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-x64-msvc@4.28.1:
+    resolution: {integrity: sha512-ZvK2jBafvttJjoIdKm/Q/Bh7IJ1Ose9IBOwpOXcOvW3ikGTQGmKDgxTC6oCAzW6PynbkKP8+um1du81XJHZ0JA==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rtsao/scc@1.1.0:
+    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
+    dev: true
+
+  /@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.2)(svelte@4.2.19)(vite@5.4.11):
+    resolution: {integrity: sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==}
+    engines: {node: ^18.0.0 || >=20}
+    peerDependencies:
+      '@sveltejs/vite-plugin-svelte': ^3.0.0
+      svelte: ^4.0.0 || ^5.0.0-next.0
+      vite: ^5.0.0
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.11)
+      debug: 4.4.0
+      svelte: 4.2.19
+      vite: 5.4.11(sass@1.78.0)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11):
+    resolution: {integrity: sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==}
+    engines: {node: ^18.0.0 || >=20}
+    peerDependencies:
+      svelte: ^4.0.0 || ^5.0.0-next.0
+      vite: ^5.0.0
+    dependencies:
+      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.2)(svelte@4.2.19)(vite@5.4.11)
+      debug: 4.4.0
+      deepmerge: 4.3.1
+      kleur: 4.1.5
+      magic-string: 0.30.14
+      svelte: 4.2.19
+      svelte-hmr: 0.16.0(svelte@4.2.19)
+      vite: 5.4.11(sass@1.78.0)
+      vitefu: 0.2.5(vite@5.4.11)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@tsconfig/svelte@5.0.4:
+    resolution: {integrity: sha512-BV9NplVgLmSi4mwKzD8BD/NQ8erOY/nUE/GpgWe2ckx+wIQF5RyRirn/QsSSCPeulVpc3RA/iJt6DpfTIZps0Q==}
+    dev: true
+
+  /@types/estree@1.0.5:
+    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
+    dev: true
+
+  /@types/estree@1.0.6:
+    resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
+    dev: true
+
+  /@types/json-schema@7.0.15:
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+    dev: true
+
+  /@types/json5@0.0.29:
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+    dev: true
+
+  /@types/semver@7.5.8:
+    resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
+    dev: true
+
+  /@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@8.18.0)(eslint@8.57.1)(typescript@5.7.2):
+    resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 8.18.0(eslint@8.57.1)(typescript@5.7.2)
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.1)(typescript@5.7.2)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.7.2)
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.4.0
+      eslint: 8.57.1
+      graphemer: 1.4.0
+      ignore: 5.3.2
+      natural-compare: 1.4.0
+      semver: 7.6.3
+      ts-api-utils: 1.4.3(typescript@5.7.2)
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.7.2):
+    resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.7.2)
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.4.0
+      eslint: 8.57.1
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/parser@8.18.0(eslint@8.57.1)(typescript@5.7.2):
+    resolution: {integrity: sha512-hgUZ3kTEpVzKaK3uNibExUYm6SKKOmTU2BOxBSvOYwtJEPdVQ70kZJpPjstlnhCHcuc2WGfSbpKlb/69ttyN5Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+      typescript: '>=4.8.4 <5.8.0'
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.18.0
+      '@typescript-eslint/types': 8.18.0
+      '@typescript-eslint/typescript-estree': 8.18.0(typescript@5.7.2)
+      '@typescript-eslint/visitor-keys': 8.18.0
+      debug: 4.4.0
+      eslint: 8.57.1
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/scope-manager@6.21.0:
+    resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
+    dev: true
+
+  /@typescript-eslint/scope-manager@8.18.0:
+    resolution: {integrity: sha512-PNGcHop0jkK2WVYGotk/hxj+UFLhXtGPiGtiaWgVBVP1jhMoMCHlTyJA+hEj4rszoSdLTK3fN4oOatrL0Cp+Xw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dependencies:
+      '@typescript-eslint/types': 8.18.0
+      '@typescript-eslint/visitor-keys': 8.18.0
+    dev: true
+
+  /@typescript-eslint/type-utils@6.21.0(eslint@8.57.1)(typescript@5.7.2):
+    resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.7.2)
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.1)(typescript@5.7.2)
+      debug: 4.4.0
+      eslint: 8.57.1
+      ts-api-utils: 1.4.3(typescript@5.7.2)
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/types@6.21.0:
+    resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dev: true
+
+  /@typescript-eslint/types@8.18.0:
+    resolution: {integrity: sha512-FNYxgyTCAnFwTrzpBGq+zrnoTO4x0c1CKYY5MuUTzpScqmY5fmsh2o3+57lqdI3NZucBDCzDgdEbIaNfAjAHQA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dev: true
+
+  /@typescript-eslint/typescript-estree@6.21.0(typescript@5.7.2):
+    resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.4.0
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.3
+      semver: 7.6.3
+      ts-api-utils: 1.4.3(typescript@5.7.2)
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/typescript-estree@8.18.0(typescript@5.7.2):
+    resolution: {integrity: sha512-rqQgFRu6yPkauz+ms3nQpohwejS8bvgbPyIDq13cgEDbkXt4LH4OkDMT0/fN1RUtzG8e8AKJyDBoocuQh8qNeg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <5.8.0'
+    dependencies:
+      '@typescript-eslint/types': 8.18.0
+      '@typescript-eslint/visitor-keys': 8.18.0
+      debug: 4.4.0
+      fast-glob: 3.3.2
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.6.3
+      ts-api-utils: 1.4.3(typescript@5.7.2)
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/utils@6.21.0(eslint@8.57.1)(typescript@5.7.2):
+    resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.8
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.7.2)
+      eslint: 8.57.1
+      semver: 7.6.3
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@typescript-eslint/visitor-keys@6.21.0:
+    resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /@typescript-eslint/visitor-keys@8.18.0:
+    resolution: {integrity: sha512-pCh/qEA8Lb1wVIqNvBke8UaRjJ6wrAWkJO5yyIbs8Yx6TNGYyfNjOo61tLv+WwLvoLPp4BQ8B7AHKijl8NGUfw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dependencies:
+      '@typescript-eslint/types': 8.18.0
+      eslint-visitor-keys: 4.2.0
+    dev: true
+
+  /@ungap/structured-clone@1.2.1:
+    resolution: {integrity: sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA==}
+    dev: true
+
+  /@vitest/expect@2.1.8:
+    resolution: {integrity: sha512-8ytZ/fFHq2g4PJVAtDX57mayemKgDR6X3Oa2Foro+EygiOJHUXhCqBAAKQYYajZpFoIfvBCF1j6R6IYRSIUFuw==}
+    dependencies:
+      '@vitest/spy': 2.1.8
+      '@vitest/utils': 2.1.8
+      chai: 5.1.2
+      tinyrainbow: 1.2.0
+    dev: true
+
+  /@vitest/mocker@2.1.8(vite@5.4.11):
+    resolution: {integrity: sha512-7guJ/47I6uqfttp33mgo6ga5Gr1VnL58rcqYKyShoRK9ebu8T5Rs6HN3s1NABiBeVTdWNrwUMcHH54uXZBN4zA==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^5.0.0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+    dependencies:
+      '@vitest/spy': 2.1.8
+      estree-walker: 3.0.3
+      magic-string: 0.30.14
+      vite: 5.4.11(sass@1.78.0)
+    dev: true
+
+  /@vitest/pretty-format@2.1.8:
+    resolution: {integrity: sha512-9HiSZ9zpqNLKlbIDRWOnAWqgcA7xu+8YxXSekhr0Ykab7PAYFkhkwoqVArPOtJhPmYeE2YHgKZlj3CP36z2AJQ==}
+    dependencies:
+      tinyrainbow: 1.2.0
+    dev: true
+
+  /@vitest/runner@2.1.8:
+    resolution: {integrity: sha512-17ub8vQstRnRlIU5k50bG+QOMLHRhYPAna5tw8tYbj+jzjcspnwnwtPtiOlkuKC4+ixDPTuLZiqiWWQ2PSXHVg==}
+    dependencies:
+      '@vitest/utils': 2.1.8
+      pathe: 1.1.2
+    dev: true
+
+  /@vitest/snapshot@2.1.8:
+    resolution: {integrity: sha512-20T7xRFbmnkfcmgVEz+z3AU/3b0cEzZOt/zmnvZEctg64/QZbSDJEVm9fLnnlSi74KibmRsO9/Qabi+t0vCRPg==}
+    dependencies:
+      '@vitest/pretty-format': 2.1.8
+      magic-string: 0.30.14
+      pathe: 1.1.2
+    dev: true
+
+  /@vitest/spy@2.1.8:
+    resolution: {integrity: sha512-5swjf2q95gXeYPevtW0BLk6H8+bPlMb4Vw/9Em4hFxDcaOxS+e0LOX4yqNxoHzMR2akEB2xfpnWUzkZokmgWDg==}
+    dependencies:
+      tinyspy: 3.0.2
+    dev: true
+
+  /@vitest/utils@2.1.8:
+    resolution: {integrity: sha512-dwSoui6djdwbfFmIgbIjX2ZhIoG7Ex/+xpxyiEgIGzjliY8xGkcpITKTlp6B4MgtGkF2ilvm97cPM96XZaAgcA==}
+    dependencies:
+      '@vitest/pretty-format': 2.1.8
+      loupe: 3.1.2
+      tinyrainbow: 1.2.0
+    dev: true
+
+  /acorn-jsx@5.3.2(acorn@8.14.0):
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 8.14.0
+    dev: true
+
+  /acorn@8.12.1:
+    resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
+  /acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
+  /ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+    dev: true
+
+  /ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+    dependencies:
+      color-convert: 2.0.1
+    dev: true
+
+  /anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+    dev: true
+
+  /argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+    dev: true
+
+  /aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+    dependencies:
+      dequal: 2.0.3
+    dev: true
+
+  /array-buffer-byte-length@1.0.1:
+    resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      is-array-buffer: 3.0.4
+    dev: true
+
+  /array-includes@3.1.8:
+    resolution: {integrity: sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+      es-object-atoms: 1.0.0
+      get-intrinsic: 1.2.4
+      is-string: 1.0.7
+    dev: true
+
+  /array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /array.prototype.findlastindex@1.2.5:
+    resolution: {integrity: sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+      es-errors: 1.3.0
+      es-object-atoms: 1.0.0
+      es-shim-unscopables: 1.0.2
+    dev: true
+
+  /array.prototype.flat@1.3.2:
+    resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+      es-shim-unscopables: 1.0.2
+    dev: true
+
+  /array.prototype.flatmap@1.3.2:
+    resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+      es-shim-unscopables: 1.0.2
+    dev: true
+
+  /arraybuffer.prototype.slice@1.0.3:
+    resolution: {integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      array-buffer-byte-length: 1.0.1
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.4
+      is-array-buffer: 3.0.4
+      is-shared-array-buffer: 1.0.3
+    dev: true
+
+  /assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /available-typed-arrays@1.0.7:
+    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      possible-typed-array-names: 1.0.0
+    dev: true
+
+  /axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+    dev: true
+
+  /binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /brace-expansion@1.1.11:
+    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+    dev: true
+
+  /brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+    dependencies:
+      balanced-match: 1.0.2
+    dev: true
+
+  /braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+    dependencies:
+      fill-range: 7.1.1
+    dev: true
+
+  /builtin-modules@3.3.0:
+    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /builtins@5.1.0:
+    resolution: {integrity: sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==}
+    dependencies:
+      semver: 7.6.3
+    dev: true
+
+  /cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /call-bind@1.0.7:
+    resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-define-property: 1.0.0
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.4
+      set-function-length: 1.2.2
+    dev: true
+
+  /callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /chai@5.1.2:
+    resolution: {integrity: sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==}
+    engines: {node: '>=12'}
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.1
+      deep-eql: 5.0.2
+      loupe: 3.1.2
+      pathval: 2.0.0
+    dev: true
+
+  /chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+    dev: true
+
+  /check-error@2.1.1:
+    resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
+    engines: {node: '>= 16'}
+    dev: true
+
+  /chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
+  /chokidar@4.0.1:
+    resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==}
+    engines: {node: '>= 14.16.0'}
+    dependencies:
+      readdirp: 4.0.2
+    dev: true
+
+  /code-red@1.0.4:
+    resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@types/estree': 1.0.5
+      acorn: 8.12.1
+      estree-walker: 3.0.3
+      periscopic: 3.1.0
+    dev: true
+
+  /color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+    dependencies:
+      color-name: 1.1.4
+    dev: true
+
+  /color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+    dev: true
+
+  /concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    dev: true
+
+  /cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+    dev: true
+
+  /css-tree@2.3.1:
+    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+    dependencies:
+      mdn-data: 2.0.30
+      source-map-js: 1.2.1
+    dev: true
+
+  /cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
+  /data-view-buffer@1.0.1:
+    resolution: {integrity: sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      es-errors: 1.3.0
+      is-data-view: 1.0.1
+    dev: true
+
+  /data-view-byte-length@1.0.1:
+    resolution: {integrity: sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      es-errors: 1.3.0
+      is-data-view: 1.0.1
+    dev: true
+
+  /data-view-byte-offset@1.0.0:
+    resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      es-errors: 1.3.0
+      is-data-view: 1.0.1
+    dev: true
+
+  /debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.3
+    dev: true
+
+  /debug@4.3.7:
+    resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.3
+    dev: true
+
+  /debug@4.4.0:
+    resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.3
+    dev: true
+
+  /deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+    dev: true
+
+  /deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-define-property: 1.0.0
+      es-errors: 1.3.0
+      gopd: 1.0.1
+    dev: true
+
+  /define-properties@1.2.1:
+    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-data-property: 1.1.4
+      has-property-descriptors: 1.0.2
+      object-keys: 1.1.1
+    dev: true
+
+  /dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+    dependencies:
+      path-type: 4.0.0
+    dev: true
+
+  /doctrine@2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      esutils: 2.0.3
+    dev: true
+
+  /doctrine@3.0.0:
+    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      esutils: 2.0.3
+    dev: true
+
+  /es-abstract@1.23.3:
+    resolution: {integrity: sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      array-buffer-byte-length: 1.0.1
+      arraybuffer.prototype.slice: 1.0.3
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.7
+      data-view-buffer: 1.0.1
+      data-view-byte-length: 1.0.1
+      data-view-byte-offset: 1.0.0
+      es-define-property: 1.0.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.0.0
+      es-set-tostringtag: 2.0.3
+      es-to-primitive: 1.2.1
+      function.prototype.name: 1.1.6
+      get-intrinsic: 1.2.4
+      get-symbol-description: 1.0.2
+      globalthis: 1.0.4
+      gopd: 1.0.1
+      has-property-descriptors: 1.0.2
+      has-proto: 1.0.3
+      has-symbols: 1.0.3
+      hasown: 2.0.2
+      internal-slot: 1.0.7
+      is-array-buffer: 3.0.4
+      is-callable: 1.2.7
+      is-data-view: 1.0.1
+      is-negative-zero: 2.0.3
+      is-regex: 1.1.4
+      is-shared-array-buffer: 1.0.3
+      is-string: 1.0.7
+      is-typed-array: 1.1.13
+      is-weakref: 1.0.2
+      object-inspect: 1.13.2
+      object-keys: 1.1.1
+      object.assign: 4.1.5
+      regexp.prototype.flags: 1.5.2
+      safe-array-concat: 1.1.2
+      safe-regex-test: 1.0.3
+      string.prototype.trim: 1.2.9
+      string.prototype.trimend: 1.0.8
+      string.prototype.trimstart: 1.0.8
+      typed-array-buffer: 1.0.2
+      typed-array-byte-length: 1.0.1
+      typed-array-byte-offset: 1.0.2
+      typed-array-length: 1.0.6
+      unbox-primitive: 1.0.2
+      which-typed-array: 1.1.15
+    dev: true
+
+  /es-define-property@1.0.0:
+    resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      get-intrinsic: 1.2.4
+    dev: true
+
+  /es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /es-module-lexer@1.5.4:
+    resolution: {integrity: sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==}
+    dev: true
+
+  /es-object-atoms@1.0.0:
+    resolution: {integrity: sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+    dev: true
+
+  /es-set-tostringtag@2.0.3:
+    resolution: {integrity: sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      get-intrinsic: 1.2.4
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+    dev: true
+
+  /es-shim-unscopables@1.0.2:
+    resolution: {integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==}
+    dependencies:
+      hasown: 2.0.2
+    dev: true
+
+  /es-to-primitive@1.2.1:
+    resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      is-callable: 1.2.7
+      is-date-object: 1.0.5
+      is-symbol: 1.0.4
+    dev: true
+
+  /esbuild@0.21.5:
+    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.21.5
+      '@esbuild/android-arm': 0.21.5
+      '@esbuild/android-arm64': 0.21.5
+      '@esbuild/android-x64': 0.21.5
+      '@esbuild/darwin-arm64': 0.21.5
+      '@esbuild/darwin-x64': 0.21.5
+      '@esbuild/freebsd-arm64': 0.21.5
+      '@esbuild/freebsd-x64': 0.21.5
+      '@esbuild/linux-arm': 0.21.5
+      '@esbuild/linux-arm64': 0.21.5
+      '@esbuild/linux-ia32': 0.21.5
+      '@esbuild/linux-loong64': 0.21.5
+      '@esbuild/linux-mips64el': 0.21.5
+      '@esbuild/linux-ppc64': 0.21.5
+      '@esbuild/linux-riscv64': 0.21.5
+      '@esbuild/linux-s390x': 0.21.5
+      '@esbuild/linux-x64': 0.21.5
+      '@esbuild/netbsd-x64': 0.21.5
+      '@esbuild/openbsd-x64': 0.21.5
+      '@esbuild/sunos-x64': 0.21.5
+      '@esbuild/win32-arm64': 0.21.5
+      '@esbuild/win32-ia32': 0.21.5
+      '@esbuild/win32-x64': 0.21.5
+    dev: true
+
+  /escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /eslint-compat-utils@0.5.1(eslint@8.57.1):
+    resolution: {integrity: sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      eslint: 8.57.1
+      semver: 7.6.3
+    dev: true
+
+  /eslint-config-standard-with-typescript@43.0.1(@typescript-eslint/eslint-plugin@6.21.0)(eslint-plugin-import@2.31.0)(eslint-plugin-n@16.6.2)(eslint-plugin-promise@6.6.0)(eslint@8.57.1)(typescript@5.7.2):
+    resolution: {integrity: sha512-WfZ986+qzIzX6dcr4yGUyVb/l9N3Z8wPXCc5z/70fljs3UbWhhV+WxrfgsqMToRzuuyX9MqZ974pq2UPhDTOcA==}
+    deprecated: Please use eslint-config-love, instead.
+    peerDependencies:
+      '@typescript-eslint/eslint-plugin': ^6.4.0
+      eslint: ^8.0.1
+      eslint-plugin-import: ^2.25.2
+      eslint-plugin-n: '^15.0.0 || ^16.0.0 '
+      eslint-plugin-promise: ^6.0.0
+      typescript: '*'
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@8.18.0)(eslint@8.57.1)(typescript@5.7.2)
+      '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.7.2)
+      eslint: 8.57.1
+      eslint-config-standard: 17.1.0(eslint-plugin-import@2.31.0)(eslint-plugin-n@16.6.2)(eslint-plugin-promise@6.6.0)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.18.0)(eslint@8.57.1)
+      eslint-plugin-n: 16.6.2(eslint@8.57.1)
+      eslint-plugin-promise: 6.6.0(eslint@8.57.1)
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-config-standard@17.1.0(eslint-plugin-import@2.31.0)(eslint-plugin-n@16.6.2)(eslint-plugin-promise@6.6.0)(eslint@8.57.1):
+    resolution: {integrity: sha512-IwHwmaBNtDK4zDHQukFDW5u/aTb8+meQWZvNFWkiGmbWjD6bqyuSSBxxXKkCftCUzc1zwCH2m/baCNDLGmuO5Q==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      eslint: ^8.0.1
+      eslint-plugin-import: ^2.25.2
+      eslint-plugin-n: '^15.0.0 || ^16.0.0 '
+      eslint-plugin-promise: ^6.0.0
+    dependencies:
+      eslint: 8.57.1
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.18.0)(eslint@8.57.1)
+      eslint-plugin-n: 16.6.2(eslint@8.57.1)
+      eslint-plugin-promise: 6.6.0(eslint@8.57.1)
+    dev: true
+
+  /eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+    dependencies:
+      debug: 3.2.7
+      is-core-module: 2.15.1
+      resolve: 1.22.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-module-utils@2.12.0(@typescript-eslint/parser@8.18.0)(eslint-import-resolver-node@0.3.9)(eslint@8.57.1):
+    resolution: {integrity: sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 8.18.0(eslint@8.57.1)(typescript@5.7.2)
+      debug: 3.2.7
+      eslint: 8.57.1
+      eslint-import-resolver-node: 0.3.9
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-es-x@7.8.0(eslint@8.57.1):
+    resolution: {integrity: sha512-7Ds8+wAAoV3T+LAKeu39Y5BzXCrGKrcISfgKEqTS4BDN8SFEDQd0S43jiQ8vIa3wUKD07qitZdfzlenSi8/0qQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=8'
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
+      '@eslint-community/regexpp': 4.12.1
+      eslint: 8.57.1
+      eslint-compat-utils: 0.5.1(eslint@8.57.1)
+    dev: true
+
+  /eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.18.0)(eslint@8.57.1):
+    resolution: {integrity: sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+    dependencies:
+      '@rtsao/scc': 1.1.0
+      '@typescript-eslint/parser': 8.18.0(eslint@8.57.1)(typescript@5.7.2)
+      array-includes: 3.1.8
+      array.prototype.findlastindex: 1.2.5
+      array.prototype.flat: 1.3.2
+      array.prototype.flatmap: 1.3.2
+      debug: 3.2.7
+      doctrine: 2.1.0
+      eslint: 8.57.1
+      eslint-import-resolver-node: 0.3.9
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.18.0)(eslint-import-resolver-node@0.3.9)(eslint@8.57.1)
+      hasown: 2.0.2
+      is-core-module: 2.15.1
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.fromentries: 2.0.8
+      object.groupby: 1.0.3
+      object.values: 1.2.0
+      semver: 6.3.1
+      string.prototype.trimend: 1.0.8
+      tsconfig-paths: 3.15.0
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
+  /eslint-plugin-n@16.6.2(eslint@8.57.1):
+    resolution: {integrity: sha512-6TyDmZ1HXoFQXnhCTUjVFULReoBPOAjpuiKELMkeP40yffI/1ZRO+d9ug/VC6fqISo2WkuIBk3cvuRPALaWlOQ==}
+    engines: {node: '>=16.0.0'}
+    peerDependencies:
+      eslint: '>=7.0.0'
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
+      builtins: 5.1.0
+      eslint: 8.57.1
+      eslint-plugin-es-x: 7.8.0(eslint@8.57.1)
+      get-tsconfig: 4.8.1
+      globals: 13.24.0
+      ignore: 5.3.2
+      is-builtin-module: 3.2.1
+      is-core-module: 2.15.1
+      minimatch: 3.1.2
+      resolve: 1.22.8
+      semver: 7.6.3
+    dev: true
+
+  /eslint-plugin-promise@6.6.0(eslint@8.57.1):
+    resolution: {integrity: sha512-57Zzfw8G6+Gq7axm2Pdo3gW/Rx3h9Yywgn61uE/3elTCOePEHVrn2i5CdfBwA1BLK0Q0WqctICIUSqXZW/VprQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
+    dependencies:
+      eslint: 8.57.1
+    dev: true
+
+  /eslint-plugin-svelte@2.46.1(eslint@8.57.1)(svelte@4.2.19):
+    resolution: {integrity: sha512-7xYr2o4NID/f9OEYMqxsEQsCsj4KaMy4q5sANaKkAb6/QeCjYFxRmDm2S3YC3A3pl1kyPZ/syOx/i7LcWYSbIw==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0-0 || ^9.0.0-0
+      svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      svelte:
+        optional: true
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
+      '@jridgewell/sourcemap-codec': 1.5.0
+      eslint: 8.57.1
+      eslint-compat-utils: 0.5.1(eslint@8.57.1)
+      esutils: 2.0.3
+      known-css-properties: 0.35.0
+      postcss: 8.4.49
+      postcss-load-config: 3.1.4(postcss@8.4.49)
+      postcss-safe-parser: 6.0.0(postcss@8.4.49)
+      postcss-selector-parser: 6.1.2
+      semver: 7.6.3
+      svelte: 4.2.19
+      svelte-eslint-parser: 0.43.0(svelte@4.2.19)
+    transitivePeerDependencies:
+      - ts-node
+    dev: true
+
+  /eslint-scope@7.2.2:
+    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+    dev: true
+
+  /eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /eslint-visitor-keys@4.2.0:
+    resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    dev: true
+
+  /eslint@8.57.1:
+    resolution: {integrity: sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
+    hasBin: true
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
+      '@eslint-community/regexpp': 4.12.1
+      '@eslint/eslintrc': 2.1.4
+      '@eslint/js': 8.57.1
+      '@humanwhocodes/config-array': 0.13.0
+      '@humanwhocodes/module-importer': 1.0.1
+      '@nodelib/fs.walk': 1.2.8
+      '@ungap/structured-clone': 1.2.1
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.0
+      doctrine: 3.0.0
+      escape-string-regexp: 4.0.0
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.6.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 6.0.1
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      globals: 13.24.0
+      graphemer: 1.4.0
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      is-path-inside: 3.0.3
+      js-yaml: 4.1.0
+      json-stable-stringify-without-jsonify: 1.0.1
+      levn: 0.4.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+      strip-ansi: 6.0.1
+      text-table: 0.2.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      acorn: 8.14.0
+      acorn-jsx: 5.3.2(acorn@8.14.0)
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
+
+  /esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
+
+  /estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+    dev: true
+
+  /estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+    dependencies:
+      '@types/estree': 1.0.5
+    dev: true
+
+  /esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /expect-type@1.1.0:
+    resolution: {integrity: sha512-bFi65yM+xZgk+u/KRIpekdSYkTB5W1pEf0Lt8Q8Msh7b+eQ7LXVtIB1Bkm4fvclDEL1b2CZkMhv2mOeF8tMdkA==}
+    engines: {node: '>=12.0.0'}
+    dev: true
+
+  /fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+    dev: true
+
+  /fast-glob@3.3.2:
+    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
+    engines: {node: '>=8.6.0'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+    dev: true
+
+  /fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+    dev: true
+
+  /fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+    dev: true
+
+  /fastq@1.17.1:
+    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
+    dependencies:
+      reusify: 1.0.4
+    dev: true
+
+  /fdir@6.3.0:
+    resolution: {integrity: sha512-QOnuT+BOtivR77wYvCWHfGt9s4Pz1VIMbD463vegT5MLqNXy8rYFT/lPVEqf/bhYeT6qmqrNHhsX+rWwe3rOCQ==}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+    dev: true
+
+  /file-entry-cache@6.0.1:
+    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      flat-cache: 3.2.0
+    dev: true
+
+  /fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+    dependencies:
+      to-regex-range: 5.0.1
+    dev: true
+
+  /find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+    dev: true
+
+  /flat-cache@3.2.0:
+    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      flatted: 3.3.1
+      keyv: 4.5.4
+      rimraf: 3.0.2
+    dev: true
+
+  /flatted@3.3.1:
+    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
+    dev: true
+
+  /for-each@0.3.3:
+    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
+    dependencies:
+      is-callable: 1.2.7
+    dev: true
+
+  /fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+    dev: true
+
+  /fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+    dev: true
+
+  /function.prototype.name@1.1.6:
+    resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+      functions-have-names: 1.2.3
+    dev: true
+
+  /functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+    dev: true
+
+  /get-intrinsic@1.2.4:
+    resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      has-proto: 1.0.3
+      has-symbols: 1.0.3
+      hasown: 2.0.2
+    dev: true
+
+  /get-symbol-description@1.0.2:
+    resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.4
+    dev: true
+
+  /get-tsconfig@4.8.1:
+    resolution: {integrity: sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==}
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+    dev: true
+
+  /glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+    dependencies:
+      is-glob: 4.0.3
+    dev: true
+
+  /glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      is-glob: 4.0.3
+    dev: true
+
+  /glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+    dev: true
+
+  /globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      type-fest: 0.20.2
+    dev: true
+
+  /globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-properties: 1.2.1
+      gopd: 1.0.1
+    dev: true
+
+  /globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.2
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 3.0.0
+    dev: true
+
+  /globrex@0.1.2:
+    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+    dev: true
+
+  /gopd@1.0.1:
+    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
+    dependencies:
+      get-intrinsic: 1.2.4
+    dev: true
+
+  /graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+    dev: true
+
+  /has-bigints@1.0.2:
+    resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
+    dev: true
+
+  /has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+    dependencies:
+      es-define-property: 1.0.0
+    dev: true
+
+  /has-proto@1.0.3:
+    resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /has-symbols@1.0.3:
+    resolution: {integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.0.3
+    dev: true
+
+  /hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      function-bind: 1.1.2
+    dev: true
+
+  /ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+    dev: true
+
+  /immutable@4.3.7:
+    resolution: {integrity: sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==}
+    dev: true
+
+  /import-fresh@3.3.0:
+    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
+    engines: {node: '>=6'}
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+    dev: true
+
+  /imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+    dev: true
+
+  /inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+    dev: true
+
+  /inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+    dev: true
+
+  /internal-slot@1.0.7:
+    resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      es-errors: 1.3.0
+      hasown: 2.0.2
+      side-channel: 1.0.6
+    dev: true
+
+  /is-array-buffer@3.0.4:
+    resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      get-intrinsic: 1.2.4
+    dev: true
+
+  /is-bigint@1.0.4:
+    resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
+    dependencies:
+      has-bigints: 1.0.2
+    dev: true
+
+  /is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.3.0
+    dev: true
+
+  /is-boolean-object@1.1.2:
+    resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      has-tostringtag: 1.0.2
+    dev: true
+
+  /is-builtin-module@3.2.1:
+    resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
+    engines: {node: '>=6'}
+    dependencies:
+      builtin-modules: 3.3.0
+    dev: true
+
+  /is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /is-core-module@2.15.1:
+    resolution: {integrity: sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      hasown: 2.0.2
+    dev: true
+
+  /is-data-view@1.0.1:
+    resolution: {integrity: sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      is-typed-array: 1.1.13
+    dev: true
+
+  /is-date-object@1.0.5:
+    resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.2
+    dev: true
+
+  /is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extglob: 2.1.1
+    dev: true
+
+  /is-negative-zero@2.0.3:
+    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /is-number-object@1.0.7:
+    resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.2
+    dev: true
+
+  /is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+    dev: true
+
+  /is-path-inside@3.0.3:
+    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /is-reference@3.0.2:
+    resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
+    dependencies:
+      '@types/estree': 1.0.5
+    dev: true
+
+  /is-regex@1.1.4:
+    resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      has-tostringtag: 1.0.2
+    dev: true
+
+  /is-shared-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+    dev: true
+
+  /is-string@1.0.7:
+    resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-tostringtag: 1.0.2
+    dev: true
+
+  /is-symbol@1.0.4:
+    resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      has-symbols: 1.0.3
+    dev: true
+
+  /is-typed-array@1.1.13:
+    resolution: {integrity: sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      which-typed-array: 1.1.15
+    dev: true
+
+  /is-weakref@1.0.2:
+    resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
+    dependencies:
+      call-bind: 1.0.7
+    dev: true
+
+  /isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+    dev: true
+
+  /isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+    dev: true
+
+  /js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+    dev: true
+
+  /json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+    dev: true
+
+  /json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+    dev: true
+
+  /json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+    dev: true
+
+  /json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.8
+    dev: true
+
+  /keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+    dependencies:
+      json-buffer: 3.0.1
+    dev: true
+
+  /kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /known-css-properties@0.35.0:
+    resolution: {integrity: sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==}
+    dev: true
+
+  /levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+    dev: true
+
+  /lilconfig@2.1.0:
+    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /locate-character@3.0.0:
+    resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
+    dev: true
+
+  /locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-locate: 5.0.0
+    dev: true
+
+  /lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+    dev: true
+
+  /loupe@3.1.2:
+    resolution: {integrity: sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==}
+    dev: true
+
+  /magic-string@0.30.11:
+    resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+    dev: true
+
+  /magic-string@0.30.14:
+    resolution: {integrity: sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+    dev: true
+
+  /mdn-data@2.0.30:
+    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+    dev: true
+
+  /merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+    dev: true
+
+  /micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+    dev: true
+
+  /minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+    dependencies:
+      brace-expansion: 1.1.11
+    dev: true
+
+  /minimatch@9.0.3:
+    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
+  /minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
+  /minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+    dev: true
+
+  /mri@1.2.0:
+    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+    dev: true
+
+  /nanoid@3.3.8:
+    resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+    dev: true
+
+  /natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+    dev: true
+
+  /normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /object-inspect@1.13.2:
+    resolution: {integrity: sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /object.assign@4.1.5:
+    resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      has-symbols: 1.0.3
+      object-keys: 1.1.1
+    dev: true
+
+  /object.fromentries@2.0.8:
+    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+      es-object-atoms: 1.0.0
+    dev: true
+
+  /object.groupby@1.0.3:
+    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+    dev: true
+
+  /object.values@1.2.0:
+    resolution: {integrity: sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-object-atoms: 1.0.0
+    dev: true
+
+  /once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+    dependencies:
+      wrappy: 1.0.2
+    dev: true
+
+  /optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+    dev: true
+
+  /p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      yocto-queue: 0.1.0
+    dev: true
+
+  /p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-limit: 3.1.0
+    dev: true
+
+  /parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+    dependencies:
+      callsites: 3.1.0
+    dev: true
+
+  /path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+    dev: true
+
+  /path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+    dev: true
+
+  /pathval@2.0.0:
+    resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
+    engines: {node: '>= 14.16'}
+    dev: true
+
+  /periscopic@3.1.0:
+    resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
+    dependencies:
+      '@types/estree': 1.0.5
+      estree-walker: 3.0.3
+      is-reference: 3.0.2
+    dev: true
+
+  /picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+    dev: true
+
+  /picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+    dev: true
+
+  /possible-typed-array-names@1.0.0:
+    resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /postcss-load-config@3.1.4(postcss@8.4.49):
+    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 2.1.0
+      postcss: 8.4.49
+      yaml: 1.10.2
+    dev: true
+
+  /postcss-safe-parser@6.0.0(postcss@8.4.49):
+    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.3.3
+    dependencies:
+      postcss: 8.4.49
+    dev: true
+
+  /postcss-scss@4.0.9(postcss@8.4.49):
+    resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.4.29
+    dependencies:
+      postcss: 8.4.49
+    dev: true
+
+  /postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: true
+
+  /postcss@8.4.49:
+    resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.8
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+    dev: true
+
+  /prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+    dev: true
+
+  /punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+    dev: true
+
+  /readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+    dev: true
+
+  /readdirp@4.0.2:
+    resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==}
+    engines: {node: '>= 14.16.0'}
+    dev: true
+
+  /regexp.prototype.flags@1.5.2:
+    resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-errors: 1.3.0
+      set-function-name: 2.0.2
+    dev: true
+
+  /resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+    dev: true
+
+  /resolve@1.22.8:
+    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.15.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    dev: true
+
+  /reusify@1.0.4:
+    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+    dev: true
+
+  /rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
+    hasBin: true
+    dependencies:
+      glob: 7.2.3
+    dev: true
+
+  /rollup@4.28.1:
+    resolution: {integrity: sha512-61fXYl/qNVinKmGSTHAZ6Yy8I3YIJC/r2m9feHo6SwVAVcLT5MPwOUFe7EuURA/4m0NR8lXG4BBXuo/IZEsjMg==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+    dependencies:
+      '@types/estree': 1.0.6
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.28.1
+      '@rollup/rollup-android-arm64': 4.28.1
+      '@rollup/rollup-darwin-arm64': 4.28.1
+      '@rollup/rollup-darwin-x64': 4.28.1
+      '@rollup/rollup-freebsd-arm64': 4.28.1
+      '@rollup/rollup-freebsd-x64': 4.28.1
+      '@rollup/rollup-linux-arm-gnueabihf': 4.28.1
+      '@rollup/rollup-linux-arm-musleabihf': 4.28.1
+      '@rollup/rollup-linux-arm64-gnu': 4.28.1
+      '@rollup/rollup-linux-arm64-musl': 4.28.1
+      '@rollup/rollup-linux-loongarch64-gnu': 4.28.1
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.28.1
+      '@rollup/rollup-linux-riscv64-gnu': 4.28.1
+      '@rollup/rollup-linux-s390x-gnu': 4.28.1
+      '@rollup/rollup-linux-x64-gnu': 4.28.1
+      '@rollup/rollup-linux-x64-musl': 4.28.1
+      '@rollup/rollup-win32-arm64-msvc': 4.28.1
+      '@rollup/rollup-win32-ia32-msvc': 4.28.1
+      '@rollup/rollup-win32-x64-msvc': 4.28.1
+      fsevents: 2.3.3
+    dev: true
+
+  /run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+    dependencies:
+      queue-microtask: 1.2.3
+    dev: true
+
+  /sade@1.8.1:
+    resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
+    engines: {node: '>=6'}
+    dependencies:
+      mri: 1.2.0
+    dev: true
+
+  /safe-array-concat@1.1.2:
+    resolution: {integrity: sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==}
+    engines: {node: '>=0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      get-intrinsic: 1.2.4
+      has-symbols: 1.0.3
+      isarray: 2.0.5
+    dev: true
+
+  /safe-regex-test@1.0.3:
+    resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      es-errors: 1.3.0
+      is-regex: 1.1.4
+    dev: true
+
+  /sass@1.78.0:
+    resolution: {integrity: sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.6.0
+      immutable: 4.3.7
+      source-map-js: 1.2.1
+    dev: true
+
+  /semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+    dev: true
+
+  /semver@7.6.3:
+    resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dev: true
+
+  /set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.2.4
+      gopd: 1.0.1
+      has-property-descriptors: 1.0.2
+    dev: true
+
+  /set-function-name@2.0.2:
+    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      functions-have-names: 1.2.3
+      has-property-descriptors: 1.0.2
+    dev: true
+
+  /shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+    dependencies:
+      shebang-regex: 3.0.0
+    dev: true
+
+  /shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /side-channel@1.0.6:
+    resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      es-errors: 1.3.0
+      get-intrinsic: 1.2.4
+      object-inspect: 1.13.2
+    dev: true
+
+  /siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+    dev: true
+
+  /slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+    dev: true
+
+  /std-env@3.8.0:
+    resolution: {integrity: sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==}
+    dev: true
+
+  /string.prototype.trim@1.2.9:
+    resolution: {integrity: sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.3
+      es-object-atoms: 1.0.0
+    dev: true
+
+  /string.prototype.trimend@1.0.8:
+    resolution: {integrity: sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==}
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-object-atoms: 1.0.0
+    dev: true
+
+  /string.prototype.trimstart@1.0.8:
+    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-object-atoms: 1.0.0
+    dev: true
+
+  /strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-regex: 5.0.1
+    dev: true
+
+  /strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+    dependencies:
+      has-flag: 4.0.0
+    dev: true
+
+  /supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /svelte-check@4.1.1(svelte@4.2.19)(typescript@5.7.2):
+    resolution: {integrity: sha512-NfaX+6Qtc8W/CyVGS/F7/XdiSSyXz+WGYA9ZWV3z8tso14V2vzjfXviKaTFEzB7g8TqfgO2FOzP6XT4ApSTUTw==}
+    engines: {node: '>= 18.0.0'}
+    hasBin: true
+    peerDependencies:
+      svelte: ^4.0.0 || ^5.0.0-next.0
+      typescript: '>=5.0.0'
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.25
+      chokidar: 4.0.1
+      fdir: 6.3.0
+      picocolors: 1.1.1
+      sade: 1.8.1
+      svelte: 4.2.19
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - picomatch
+    dev: true
+
+  /svelte-eslint-parser@0.43.0(svelte@4.2.19):
+    resolution: {integrity: sha512-GpU52uPKKcVnh8tKN5P4UZpJ/fUDndmq7wfsvoVXsyP+aY0anol7Yqo01fyrlaWGMFfm4av5DyrjlaXdLRJvGA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      svelte:
+        optional: true
+    dependencies:
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      postcss: 8.4.49
+      postcss-scss: 4.0.9(postcss@8.4.49)
+      svelte: 4.2.19
+    dev: true
+
+  /svelte-hmr@0.16.0(svelte@4.2.19):
+    resolution: {integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==}
+    engines: {node: ^12.20 || ^14.13.1 || >= 16}
+    peerDependencies:
+      svelte: ^3.19.0 || ^4.0.0
+    dependencies:
+      svelte: 4.2.19
+    dev: true
+
+  /svelte@4.2.19:
+    resolution: {integrity: sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==}
+    engines: {node: '>=16'}
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+      '@types/estree': 1.0.5
+      acorn: 8.12.1
+      aria-query: 5.3.0
+      axobject-query: 4.1.0
+      code-red: 1.0.4
+      css-tree: 2.3.1
+      estree-walker: 3.0.3
+      is-reference: 3.0.2
+      locate-character: 3.0.0
+      magic-string: 0.30.11
+      periscopic: 3.1.0
+    dev: true
+
+  /text-table@0.2.0:
+    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
+    dev: true
+
+  /tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+    dev: true
+
+  /tinyexec@0.3.1:
+    resolution: {integrity: sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==}
+    dev: true
+
+  /tinypool@1.0.1:
+    resolution: {integrity: sha512-URZYihUbRPcGv95En+sz6MfghfIc2OJ1sv/RmhWZLouPY0/8Vo80viwPvg3dlaS9fuq7fQMEfgRRK7BBZThBEA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    dev: true
+
+  /tinyrainbow@1.2.0:
+    resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==}
+    engines: {node: '>=14.0.0'}
+    dev: true
+
+  /tinyspy@3.0.2:
+    resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
+    engines: {node: '>=14.0.0'}
+    dev: true
+
+  /to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+    dependencies:
+      is-number: 7.0.0
+    dev: true
+
+  /ts-api-utils@1.4.3(typescript@5.7.2):
+    resolution: {integrity: sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      typescript: '>=4.2.0'
+    dependencies:
+      typescript: 5.7.2
+    dev: true
+
+  /tsconfck@3.1.3(typescript@5.7.2):
+    resolution: {integrity: sha512-ulNZP1SVpRDesxeMLON/LtWM8HIgAJEIVpVVhBM6gsmvQ8+Rh+ZG7FWGvHh7Ah3pRABwVJWklWCr/BTZSv0xnQ==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+    peerDependencies:
+      typescript: ^5.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      typescript: 5.7.2
+    dev: true
+
+  /tsconfig-paths@3.15.0:
+    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
+    dependencies:
+      '@types/json5': 0.0.29
+      json5: 1.0.2
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+    dev: true
+
+  /tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+    dev: true
+
+  /type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+    dev: true
+
+  /type-fest@0.20.2:
+    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /typed-array-buffer@1.0.2:
+    resolution: {integrity: sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      es-errors: 1.3.0
+      is-typed-array: 1.1.13
+    dev: true
+
+  /typed-array-byte-length@1.0.1:
+    resolution: {integrity: sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      for-each: 0.3.3
+      gopd: 1.0.1
+      has-proto: 1.0.3
+      is-typed-array: 1.1.13
+    dev: true
+
+  /typed-array-byte-offset@1.0.2:
+    resolution: {integrity: sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.7
+      for-each: 0.3.3
+      gopd: 1.0.1
+      has-proto: 1.0.3
+      is-typed-array: 1.1.13
+    dev: true
+
+  /typed-array-length@1.0.6:
+    resolution: {integrity: sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.7
+      for-each: 0.3.3
+      gopd: 1.0.1
+      has-proto: 1.0.3
+      is-typed-array: 1.1.13
+      possible-typed-array-names: 1.0.0
+    dev: true
+
+  /typescript@5.7.2:
+    resolution: {integrity: sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+    dev: true
+
+  /unbox-primitive@1.0.2:
+    resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
+    dependencies:
+      call-bind: 1.0.7
+      has-bigints: 1.0.2
+      has-symbols: 1.0.3
+      which-boxed-primitive: 1.0.2
+    dev: true
+
+  /uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+    dependencies:
+      punycode: 2.3.1
+    dev: true
+
+  /util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+    dev: true
+
+  /vite-node@2.1.8(sass@1.78.0):
+    resolution: {integrity: sha512-uPAwSr57kYjAUux+8E2j0q0Fxpn8M9VoyfGiRI8Kfktz9NcYMCenwY5RnZxnF1WTu3TGiYipirIzacLL3VVGFg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    dependencies:
+      cac: 6.7.14
+      debug: 4.3.7
+      es-module-lexer: 1.5.4
+      pathe: 1.1.2
+      vite: 5.4.11(sass@1.78.0)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
+  /vite-plugin-sass@0.1.0:
+    resolution: {integrity: sha512-gLwvs3ozfDAOZCqs+PepkTd4078m8tfq50IlmTW/OphlWsW95uP7lQ5A3NezfUfTZDTCOA4nFlYnOWRpsKYOqw==}
+    dev: true
+
+  /vite-tsconfig-paths@5.0.1(typescript@5.7.2)(vite@5.4.11):
+    resolution: {integrity: sha512-yqwv+LstU7NwPeNqajZzLEBVpUFU6Dugtb2P84FXuvaoYA+/70l9MHE+GYfYAycVyPSDYZ7mjOFuYBRqlEpTig==}
+    peerDependencies:
+      vite: '*'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+    dependencies:
+      debug: 4.3.7
+      globrex: 0.1.2
+      tsconfck: 3.1.3(typescript@5.7.2)
+      vite: 5.4.11(sass@1.78.0)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /vite@5.4.11(sass@1.78.0):
+    resolution: {integrity: sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      sass-embedded: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.21.5
+      postcss: 8.4.49
+      rollup: 4.28.1
+      sass: 1.78.0
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
+  /vitefu@0.2.5(vite@5.4.11):
+    resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+    dependencies:
+      vite: 5.4.11(sass@1.78.0)
+    dev: true
+
+  /vitest@2.1.8(sass@1.78.0):
+    resolution: {integrity: sha512-1vBKTZskHw/aosXqQUlVWWlGUxSJR8YtiyZDJAFeW2kPAeX6S3Sool0mjspO+kXLuxVWlEDDowBAeqeAQefqLQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/node': ^18.0.0 || >=20.0.0
+      '@vitest/browser': 2.1.8
+      '@vitest/ui': 2.1.8
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+    dependencies:
+      '@vitest/expect': 2.1.8
+      '@vitest/mocker': 2.1.8(vite@5.4.11)
+      '@vitest/pretty-format': 2.1.8
+      '@vitest/runner': 2.1.8
+      '@vitest/snapshot': 2.1.8
+      '@vitest/spy': 2.1.8
+      '@vitest/utils': 2.1.8
+      chai: 5.1.2
+      debug: 4.3.7
+      expect-type: 1.1.0
+      magic-string: 0.30.14
+      pathe: 1.1.2
+      std-env: 3.8.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.1
+      tinypool: 1.0.1
+      tinyrainbow: 1.2.0
+      vite: 5.4.11(sass@1.78.0)
+      vite-node: 2.1.8(sass@1.78.0)
+      why-is-node-running: 2.3.0
+    transitivePeerDependencies:
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
+  /which-boxed-primitive@1.0.2:
+    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
+    dependencies:
+      is-bigint: 1.0.4
+      is-boolean-object: 1.1.2
+      is-number-object: 1.0.7
+      is-string: 1.0.7
+      is-symbol: 1.0.4
+    dev: true
+
+  /which-typed-array@1.1.15:
+    resolution: {integrity: sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.7
+      for-each: 0.3.3
+      gopd: 1.0.1
+      has-tostringtag: 1.0.2
+    dev: true
+
+  /which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+    dependencies:
+      isexe: 2.0.0
+    dev: true
+
+  /why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+    dev: true
+
+  /word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+    dev: true
+
+  /yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+    dev: true
+
+  /yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+    dev: true
diff --git a/monosketch-svelte/public/favicon.png b/monosketch-svelte/public/favicon.png
new file mode 100644
index 000000000..0d2f8fbd5
Binary files /dev/null and b/monosketch-svelte/public/favicon.png differ
diff --git a/monosketch-svelte/src/App.svelte b/monosketch-svelte/src/App.svelte
new file mode 100644
index 000000000..03332ee9a
--- /dev/null
+++ b/monosketch-svelte/src/App.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+import NavBar from './lib/ui/nav/NavBar.svelte';
+import ShapeTool from './lib/ui/pannel/shapetool/ShapeTool.svelte';
+import Workspace from '$ui/workspace/Workspace.svelte';
+</script>
+
+<nav>
+    <NavBar />
+</nav>
+<main>
+    <div class="workspace">
+        <Workspace />
+    </div>
+    <div class="right-panel">
+        <ShapeTool />
+    </div>
+</main>
+
+<style lang="scss">
+$nav-height: 48px;
+$sharp-tool-width: 250px;
+
+nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: $nav-height;
+
+    background: var(--header-bg);
+}
+
+.workspace {
+    position: fixed;
+    top: $nav-height;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+
+    background: var(--workspace-bg-color);
+}
+
+.right-panel {
+    position: fixed;
+    top: $nav-height;
+    right: 0;
+    bottom: 0;
+    width: $sharp-tool-width;
+}
+</style>
diff --git a/monosketch-svelte/src/app/app-context.ts b/monosketch-svelte/src/app/app-context.ts
new file mode 100644
index 000000000..f353a6f15
--- /dev/null
+++ b/monosketch-svelte/src/app/app-context.ts
@@ -0,0 +1,90 @@
+import type { Workspace } from "$app/workspace";
+import { ActionManager } from "$mono/action-manager/action-manager";
+import { OneTimeAction } from "$mono/action-manager/one-time-actions";
+import { DEBUG_MODE } from "$mono/build_environment";
+import { MonoBoard } from "$mono/monobitmap/board";
+import { MonoBitmapManager } from "$mono/monobitmap/manager/mono-bitmap-manager";
+import { SelectedShapeManager } from "$mono/shape/selected-shape-manager";
+import { ShapeClipboardManager } from "$mono/shape/shape-clipboard-manager";
+import { ShapeManager } from "$mono/shape/shape-manager";
+import { MainStateManager } from "$mono/state-manager/main-state-manager";
+import { WorkspaceDao } from "$mono/store-manager/dao/workspace-dao";
+import { BrowserManager } from "$mono/window/browser-manager";
+import { LifecycleOwner } from 'lib/libs/flow';
+import { AppUiStateManager } from '$mono/ui-state-manager/app-ui-state-manager';
+
+/**
+ * Main class of the app to handle all kinds of events, UI, actions, etc.
+ */
+export class AppContext {
+    appLifecycleOwner = new LifecycleOwner();
+    appUiStateManager = new AppUiStateManager(this.appLifecycleOwner);
+
+    monoBoard: MonoBoard = new MonoBoard();
+    shapeManager = new ShapeManager();
+
+    actionManager = new ActionManager(this.appLifecycleOwner);
+
+    browserManager = new BrowserManager((projectId: string) => {
+        this.actionManager.setOneTimeAction(OneTimeAction.ProjectAction.SwitchProject(projectId));
+    });
+
+    workspaceDao: WorkspaceDao = WorkspaceDao.instance;
+
+    // Workspace must be set before MainStateManager is initiated.
+    private workspace: Workspace | null = null;
+    private mainStateManager: MainStateManager | null = null;
+
+    onStart = (): void => {
+        this.appLifecycleOwner.onStart();
+
+        this.init();
+
+        this.appUiStateManager.observeTheme();
+        this.actionManager.observeKeyCommand(
+            this.appUiStateManager.keyCommandFlow.map((keyCommand) => keyCommand.command),
+        );
+
+        this.mainStateManager?.onStart(this.appLifecycleOwner);
+        this.browserManager.startObserveStateChange(this.shapeManager.rootIdFlow, this.appLifecycleOwner,);
+    };
+
+    setWorkspace(workspace: Workspace) {
+        this.workspace = workspace;
+        this.init();
+
+        if (this.appLifecycleOwner.isActive) {
+            this.mainStateManager?.onStart(this.appLifecycleOwner);
+        }
+    }
+
+    private init() {
+        if (this.workspace === null) {
+            if (DEBUG_MODE) {
+                console.warn('Workspace is not set');
+            }
+            return;
+        }
+        if (this.mainStateManager !== null) {
+            if (DEBUG_MODE) {
+                console.warn('MainStateManager is already set');
+            }
+            return;
+        }
+        this.actionManager.installDebugCommand();
+
+        this.mainStateManager = new MainStateManager(
+            this.monoBoard,
+            this.shapeManager,
+            new SelectedShapeManager(),
+            new MonoBitmapManager(),
+            this.workspace,
+            this.workspaceDao,
+            this.actionManager,
+            new ShapeClipboardManager(),
+            this.appUiStateManager,
+            this.browserManager.rootIdFromUrl,
+        );
+        // TODO: Replicate from MonoSketchApplication
+    }
+}
diff --git a/monosketch-svelte/src/app/workspace.ts b/monosketch-svelte/src/app/workspace.ts
new file mode 100644
index 000000000..5547618fe
--- /dev/null
+++ b/monosketch-svelte/src/app/workspace.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Flow } from "$libs/flow";
+import type { Point } from "$libs/graphics-geo/point";
+import { DrawingInfo } from "$mono/workspace/drawing-info";
+
+/**
+ * An interface for interacting with the workspace.
+ */
+export interface Workspace {
+    getDrawingInfo(): DrawingInfo;
+
+    setDrawingOffset(offsetPx: Point): void;
+    drawingOffsetPointPxFlow: Flow<Point>;
+}
diff --git a/monosketch-svelte/src/assets/fonts/JetBrainsMono-Bold.woff2 b/monosketch-svelte/src/assets/fonts/JetBrainsMono-Bold.woff2
new file mode 100644
index 000000000..824f5fd5b
Binary files /dev/null and b/monosketch-svelte/src/assets/fonts/JetBrainsMono-Bold.woff2 differ
diff --git a/monosketch-svelte/src/assets/fonts/JetBrainsMono-Light.woff2 b/monosketch-svelte/src/assets/fonts/JetBrainsMono-Light.woff2
new file mode 100644
index 000000000..31cd93f36
Binary files /dev/null and b/monosketch-svelte/src/assets/fonts/JetBrainsMono-Light.woff2 differ
diff --git a/monosketch-svelte/src/assets/fonts/JetBrainsMono-Regular.woff2 b/monosketch-svelte/src/assets/fonts/JetBrainsMono-Regular.woff2
new file mode 100644
index 000000000..d7dbbcc87
Binary files /dev/null and b/monosketch-svelte/src/assets/fonts/JetBrainsMono-Regular.woff2 differ
diff --git a/monosketch-svelte/src/assets/fonts/JetBrainsMono-SemiBold.woff2 b/monosketch-svelte/src/assets/fonts/JetBrainsMono-SemiBold.woff2
new file mode 100644
index 000000000..f59e15901
Binary files /dev/null and b/monosketch-svelte/src/assets/fonts/JetBrainsMono-SemiBold.woff2 differ
diff --git a/monosketch-svelte/src/assets/fonts/stylesheet.css b/monosketch-svelte/src/assets/fonts/stylesheet.css
new file mode 100644
index 000000000..9c1a6a9c5
--- /dev/null
+++ b/monosketch-svelte/src/assets/fonts/stylesheet.css
@@ -0,0 +1,31 @@
+@font-face {
+    font-family: 'JetBrains Mono';
+    src: url('JetBrainsMono-Bold.woff2') format('woff2');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    src: url('JetBrainsMono-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    src: url('JetBrainsMono-Light.woff2') format('woff2');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'JetBrains Mono';
+    src: url('JetBrainsMono-SemiBold.woff2') format('woff2');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
diff --git a/monosketch-svelte/src/lib/libs/README.md b/monosketch-svelte/src/lib/libs/README.md
new file mode 100644
index 000000000..d58758bc6
--- /dev/null
+++ b/monosketch-svelte/src/lib/libs/README.md
@@ -0,0 +1,4 @@
+`libs` is a collection of common data structures and algorithms that are used throughout the project
+but does not belong to any specific module.
+
+This can be extracted as a separate library in the future.
diff --git a/monosketch-svelte/src/lib/libs/char.ts b/monosketch-svelte/src/lib/libs/char.ts
new file mode 100644
index 000000000..11665125e
--- /dev/null
+++ b/monosketch-svelte/src/lib/libs/char.ts
@@ -0,0 +1,2 @@
+// 1 character string;
+export type Char = string;
diff --git a/monosketch-svelte/src/lib/libs/comparable.ts b/monosketch-svelte/src/lib/libs/comparable.ts
new file mode 100644
index 000000000..201f61fe5
--- /dev/null
+++ b/monosketch-svelte/src/lib/libs/comparable.ts
@@ -0,0 +1,6 @@
+/**
+ * Interface for objects that can be compared for equality.
+ */
+export interface Comparable {
+    equals(other: unknown): boolean;
+}
diff --git a/monosketch-svelte/src/lib/libs/flow/flow.test.ts b/monosketch-svelte/src/lib/libs/flow/flow.test.ts
new file mode 100644
index 000000000..c5c61a513
--- /dev/null
+++ b/monosketch-svelte/src/lib/libs/flow/flow.test.ts
@@ -0,0 +1,538 @@
+// noinspection DuplicatedCode
+
+import { test, expect, describe } from 'vitest';
+import { Flow } from './flow';
+import { LifecycleOwner } from './lifecycleowner';
+import type { Comparable } from '$libs/comparable';
+
+describe('Flow test', () => {
+    describe('map', () => {
+        test('map value', () => {
+            const flow = new Flow(1);
+            const flow2 = flow.map((value) => value + 1);
+            expect(flow2.value).toBe(2);
+
+            flow.value = 2;
+            expect(flow2.value).toBe(3);
+
+            flow.value = 3;
+            expect(flow2.value).toBe(4);
+        });
+
+        test('delay transform with map until read value', () => {
+            const flow = new Flow(1);
+            let counter = 0;
+            const flow2 = flow.map((value) => {
+                counter++;
+                return value + 1;
+            });
+
+            expect(counter).toBe(0);
+            // @ts-expect-error - private method
+            expect(flow2.valueInternal).toBeUndefined();
+
+            flow.value = 2;
+            expect(counter).toBe(0);
+            // @ts-expect-error - private method
+            expect(flow2.valueInternal).toBeUndefined();
+
+            expect(counter).toBe(0);
+            expect(flow2.value).toBe(3);
+            // only run once when value is read
+            expect(counter).toBe(1);
+        });
+    });
+
+    describe('observation', () => {
+        test('observe primary single flow', () => {
+            const lifecycleOwner = new LifecycleOwner();
+            const flow = new Flow<number>();
+            let counter = 0;
+            const observer = () => {
+                counter++;
+            };
+
+            flow.observe(lifecycleOwner, observer);
+
+            // @ts-expect-error - private method
+            expect(lifecycleOwner.observers.length).toBe(0); // Before start, no observer is added
+
+            lifecycleOwner.onStart();
+            flow.observe(lifecycleOwner, observer);
+            expect(counter).toBe(0); // No run when start observe because the value is undefined
+            flow.value = 2;
+            expect(counter).toBe(1);
+            flow.value = 3;
+            expect(counter).toBe(2);
+
+            lifecycleOwner.onStop();
+            flow.value = 4;
+            expect(counter).toBe(2); // All observers are removed
+
+            lifecycleOwner.onStart();
+            flow.value = 5;
+            expect(counter).toBe(2); // All observers are removed
+            flow.observe(lifecycleOwner, observer);
+            expect(counter).toBe(3); // Run when start observe because the value is defined
+        });
+
+        test('observe secondary single flow', () => {
+            const flow = new Flow<number>(0);
+            const flow2 = flow.map((value) => value + 1);
+            let counter = 0;
+            let observedValue = undefined;
+            const observer = (value: unknown) => {
+                counter++;
+                observedValue = value;
+            };
+            flow2.observe(LifecycleOwner.start(), observer);
+            expect(counter).toBe(1); // Run when start observe because the value is defined
+            // @ts-expect-error - private method
+            expect(flow2.valueInternal).toBeUndefined(); // Although the observer is run, the actual value is not set yet
+            expect(observedValue).toBe(1);
+
+            flow.value = 2;
+            expect(counter).toBe(2);
+            // @ts-expect-error - private method
+            expect(flow2.valueInternal).toBe(3); // The actual value is set with the new value of the primary flow
+            expect(observedValue).toBe(3);
+        });
+    });
+
+    describe('distinct until change', () => {
+        test('distinct until changed', () => {
+            const flow = new Flow<number>(0);
+            const flow2 = flow.distinctUntilChanged();
+            let counter = 0;
+            let observedValue = undefined;
+            const observer = (value: unknown) => {
+                counter++;
+                observedValue = value;
+            };
+            flow2.observe(LifecycleOwner.start(), observer);
+            expect(counter).toBe(1); // Run when start observe because the value is defined
+            expect(observedValue).toBe(0);
+
+            flow.value = 0;
+            expect(counter).toBe(2); // Run because before this, the internal value is undefined
+            expect(observedValue).toBe(0);
+
+            flow.value = 0;
+            expect(counter).toBe(2); // Not run because the value is not changed
+
+            flow.value = 1;
+            expect(counter).toBe(3);
+
+            flow.value = 1;
+            expect(counter).toBe(3); // Not run because the value is not changed
+        });
+
+        test('distinct until changed with custom equals', () => {
+            class Value implements Comparable {
+                constructor(public value: number) {
+                }
+
+                equals(other: unknown): boolean {
+                    return other instanceof Value && this.value === other.value;
+                }
+            }
+
+            const flow = new Flow<Value>(new Value(0));
+            const flow2 = flow.distinctUntilChanged();
+            let counter = 0;
+            let observedValue = undefined;
+            const observer = (value: unknown) => {
+                counter++;
+                observedValue = value;
+            };
+            flow2.observe(LifecycleOwner.start(), observer);
+            expect(counter).toBe(1); // Run when start observe because the value is defined
+            expect(observedValue).toBeInstanceOf(Value);
+            expect((observedValue as unknown as Value).value).toBe(0);
+
+            flow.value = new Value(0);
+            expect(counter).toBe(2); // Run because before this, the internal value is undefined
+            expect(observedValue).toBeInstanceOf(Value);
+            expect((observedValue as unknown as Value).value).toBe(0);
+
+            flow.value = new Value(0);
+            expect(counter).toBe(2); // Not run because the value is not changed
+        });
+
+        test('distinct until changed with null value', () => {
+            const flow = new Flow<number | null>(0);
+            const flow2 = flow.distinctUntilChanged();
+            let counter = 0;
+            let observedValue = undefined;
+            const observer = (value: unknown) => {
+                counter++;
+                observedValue = value;
+            };
+            flow2.observe(LifecycleOwner.start(), observer);
+            expect(counter).toBe(1); // Run when start observe because the value is defined
+            expect(observedValue).toBe(0);
+
+            flow.value = null;
+            expect(counter).toBe(2); // Run because before this, the internal value is undefined
+            expect(observedValue).toBeNull();
+
+            flow.value = null;
+            expect(counter).toBe(2); // Not run because the value is not changed
+
+            flow.value = 1;
+            expect(counter).toBe(3);
+            expect(observedValue).toBe(1);
+        });
+    });
+
+    test('throttle', async () => {
+        const flow = new Flow<number>(0);
+        const flow2 = flow.throttle(20);
+        let counter = 0;
+        let observedValue = undefined;
+        const observer = (value: unknown) => {
+            counter++;
+            observedValue = value;
+        };
+
+        flow2.observe(LifecycleOwner.start(), observer);
+        expect(counter).toBe(1); // Run when start observe because the value is defined
+        expect(observedValue).toBe(0);
+
+        flow.value = 1;
+        expect(counter).toBe(1); // Not run because the throttle is not expired yet
+        expect(observedValue).toBe(0);
+        flow.value = 2;
+        expect(counter).toBe(1); // Not run because the throttle is not expired yet
+        expect(observedValue).toBe(0);
+        await sleep(21);
+        expect(counter).toBe(2); // Run because the throttle is expired
+        expect(observedValue).toBe(2);
+    });
+
+    test('immutable flow', () => {
+        const flow = new Flow<number>(0);
+        const flow2 = flow.immutable();
+        let counter = 0;
+        let observedValue = undefined;
+        const observer = (value: unknown) => {
+            counter++;
+            observedValue = value;
+        };
+        flow2.observe(LifecycleOwner.start(), observer);
+        expect(counter).toBe(1); // Run when start observe because the value is defined
+        expect(observedValue).toBe(0);
+
+        flow.value = 1;
+        expect(counter).toBe(2); // Run because the value is changed
+        expect(observedValue).toBe(1);
+
+        expect(() => {
+            flow2.value = 3;
+        }).toThrowError();
+    });
+
+    describe('combination', () => {
+        test('combine 2 flows', () => {
+            const flow1 = new Flow<number>(1);
+            const flow2 = new Flow<number>(100);
+            const flow3 = Flow.combine2(flow1, flow2, (value1, value2) => value1 + value2);
+
+            let counter = 0;
+            let observedValue = undefined;
+            const observer = (value: unknown) => {
+                counter++;
+                observedValue = value;
+            };
+            flow3.observe(LifecycleOwner.start(), observer);
+
+            expect(counter).toBe(1); // Run when start observe because the value is defined
+            expect(observedValue).toBe(101);
+
+            flow1.value = 2;
+            expect(counter).toBe(2);
+            expect(observedValue).toBe(102);
+
+            flow2.value = 200;
+            expect(counter).toBe(3);
+            expect(observedValue).toBe(202);
+
+            flow1.value = 2;
+            expect(counter).toBe(4);
+            expect(observedValue).toBe(202);
+        });
+
+        test('combine 2 flows with undefined value', () => {
+            const flow1 = new Flow<number>();
+            const flow2 = new Flow<number>(100);
+            const flow3 = Flow.combine2(flow1, flow2, (value1, value2) => value1 + value2);
+
+            let counter = 0;
+            let observedValue = undefined;
+            const observer = (value: unknown) => {
+                counter++;
+                observedValue = value;
+            };
+            flow3.observe(LifecycleOwner.start(), observer);
+
+            expect(counter).toBe(0); // Run when start observe because the value is defined
+            expect(observedValue).toBeUndefined();
+        });
+
+        test('combine 2 flows with immutable', () => {
+            const flow10 = new Flow<number>(1);
+            const flow11 = flow10.immutable();
+            const flow20 = new Flow(100);
+            const flow21 = flow20.immutable();
+
+            const target = Flow.combine2(flow11, flow21, (value1, value2) => value1 + value2);
+
+            let counter = 0;
+            let observedValue = undefined;
+            const observer = (value: unknown) => {
+                counter++;
+                observedValue = value;
+            };
+            flow10.value = 2;
+            flow10.value = 3;
+
+            target.observe(LifecycleOwner.start(), observer);
+            expect(counter).toBe(1); // Run when start observe because the value is defined
+            expect(observedValue).toBe(103);
+
+            flow10.value = 4;
+            expect(counter).toBe(2);
+            expect(observedValue).toBe(104);
+
+            flow20.value = 200;
+            expect(counter).toBe(3);
+            expect(observedValue).toBe(204);
+        });
+
+        test('combine 2 flows with combine', () => {
+            const flow1 = new Flow<number>(1);
+            const flow2 = new Flow<number>(100);
+            const flow3 = new Flow(1000);
+            const target = Flow.combine2(
+                Flow.combine2(flow2, flow1, (value1, value2) => value1 + value2),
+                flow3.immutable(),
+                (value1, value2) => value1 + value2);
+
+            let counter = 0;
+            let observedValue = undefined;
+            const observer = (value: unknown) => {
+                counter++;
+                observedValue = value;
+            };
+            target.observe(LifecycleOwner.start(), observer);
+
+            expect(counter).toBe(1); // Run when start observe because the value is defined
+            expect(observedValue).toBe(1101);
+
+            flow1.value = 2;
+            expect(counter).toBe(2);
+            expect(observedValue).toBe(1102);
+
+            flow1.value = 3;
+            expect(counter).toBe(3);
+            expect(observedValue).toBe(1103);
+
+            flow2.value = 200;
+            expect(counter).toBe(4);
+            expect(observedValue).toBe(1203);
+
+            flow3.value = 2000;
+            expect(counter).toBe(5);
+            expect(observedValue).toBe(2203);
+        });
+
+        test('combine 3 flows', () => {
+            const flow1 = new Flow<number>(1);
+            const flow2 = new Flow<number>(100);
+            const flow3 = new Flow<number>(1000);
+            const flow4 = Flow.combine3(
+                flow1,
+                flow2,
+                flow3,
+                (value1, value2, value3) => value1 + value2 + value3,
+            );
+
+            let counter = 0;
+            let observedValue = undefined;
+            const observer = (value: unknown) => {
+                counter++;
+                observedValue = value;
+            };
+            flow4.observe(LifecycleOwner.start(), observer);
+
+            expect(counter).toBe(1); // Run when start observe because the value is defined
+            expect(observedValue).toBe(1101);
+
+            flow1.value = 2;
+            expect(counter).toBe(2);
+            expect(observedValue).toBe(1102);
+
+            flow2.value = 200;
+            expect(counter).toBe(3);
+            expect(observedValue).toBe(1202);
+
+            flow3.value = 2000;
+            expect(counter).toBe(4);
+            expect(observedValue).toBe(2202);
+
+            flow1.value = 2;
+            expect(counter).toBe(5);
+            expect(observedValue).toBe(2202);
+        });
+
+        test('combine 4 flows', () => {
+            const flow1 = new Flow<number>(1);
+            const flow2 = new Flow<number>(100);
+            const flow3 = new Flow<number>(1000);
+            const flow4 = new Flow<number>(10000);
+            const flow5 = Flow.combine4(
+                flow1,
+                flow2,
+                flow3,
+                flow4,
+                (value1, value2, value3, value4) => value1 + value2 + value3 + value4,
+            );
+
+            let counter = 0;
+            let observedValue = undefined;
+            const observer = (value: unknown) => {
+                counter++;
+                observedValue = value;
+            };
+            flow5.observe(LifecycleOwner.start(), observer);
+
+            expect(counter).toBe(1); // Run when start observe because the value is defined
+            expect(observedValue).toBe(11101);
+
+            flow1.value = 2;
+            expect(counter).toBe(2);
+            expect(observedValue).toBe(11102);
+
+            flow2.value = 200;
+            expect(counter).toBe(3);
+            expect(observedValue).toBe(11202);
+
+            flow3.value = 2000;
+            expect(counter).toBe(4);
+            expect(observedValue).toBe(12202);
+
+            flow4.value = 20000;
+            expect(counter).toBe(5);
+            expect(observedValue).toBe(22202);
+
+            flow1.value = 2;
+            expect(counter).toBe(6);
+            expect(observedValue).toBe(22202);
+        });
+
+        test('combine list of flows', () => {
+            const flow1 = new Flow<number>(1);
+            const flow2 = new Flow<number>(100);
+            const flow3 = new Flow<number>(1000);
+            const flow4 = Flow.combineList([flow1, flow2, flow3], (array) =>
+                (array as Array<number>).reduce((a, b) => a + b, 0),
+            );
+
+            let counter = 0;
+            let observedValue = undefined;
+            const observer = (value: unknown) => {
+                counter++;
+                observedValue = value;
+            };
+            flow4.observe(LifecycleOwner.start(), observer);
+
+            expect(counter).toBe(1); // Run when start observe because the value is defined
+            expect(observedValue).toBe(1101);
+
+            flow1.value = 2;
+            expect(counter).toBe(2);
+            expect(observedValue).toBe(1102);
+
+            flow2.value = 200;
+            expect(counter).toBe(3);
+            expect(observedValue).toBe(1202);
+
+            flow3.value = 2000;
+            expect(counter).toBe(4);
+            expect(observedValue).toBe(2202);
+
+            flow1.value = 2;
+            expect(counter).toBe(5);
+            expect(observedValue).toBe(2202);
+        });
+
+        test('combine list of flows with undefined value', () => {
+            const flow1 = new Flow<number>();
+            const flow2 = new Flow<number>(100);
+            const flow3 = new Flow<number>(1000);
+            const flow4 = Flow.combineList([flow1, flow2, flow3], (array) =>
+                (array as Array<number>).reduce((a, b) => a + b, 0),
+            );
+
+            let counter = 0;
+            let observedValue = undefined;
+            const observer = (value: unknown) => {
+                counter++;
+                observedValue = value;
+            };
+            flow4.observe(LifecycleOwner.start(), observer);
+
+            expect(counter).toBe(0); // Run when start observe because the value is defined
+            expect(observedValue).toBeUndefined();
+        });
+    });
+
+    describe('get value', () => {
+        test('get value from flow', () => {
+            const flow = new Flow<number>(1);
+            expect(flow.value).toBe(1);
+            flow.value = 2;
+            expect(flow.value).toBe(2);
+        });
+
+        test('get value from flow with undefined value', () => {
+            const flow = new Flow<number>();
+            expect(flow.value).toBeUndefined();
+        });
+
+        test('get value from secondary flow without subscribe', () => {
+            const flow = new Flow<number>(1);
+            const flow2 = flow.map((value) => value + 1);
+            expect(flow2.value).toBe(2);
+            // @ts-expect-error - private method
+            expect(flow2.valueInternal).toBeUndefined();
+
+            flow2.makeValueUpdateReactively();
+            expect(flow2.value).toBe(2);
+            // @ts-expect-error - private method
+            expect(flow2.valueInternal).toBe(2);
+
+            flow.value = 2;
+            expect(flow2.value).toBe(3);
+            // @ts-expect-error - private method
+            expect(flow2.valueInternal).toBe(3);
+        });
+
+        test('get value from secondary flow with subscribe', () => {
+            const flow = new Flow<number>(1);
+            const flow2 = flow.map((value) => value + 1);
+            flow2.observe(LifecycleOwner.start(), () => {
+            });
+            flow.value = 2;
+            // @ts-expect-error - private method
+            expect(flow.hasSubscribers()).toBe(true);
+            // @ts-expect-error - private method
+            expect(flow2.valueInternal).toBe(3);
+            expect(flow2.value).toBe(3);
+        });
+    });
+});
+
+function sleep(ms: number) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
diff --git a/monosketch-svelte/src/lib/libs/flow/flow.ts b/monosketch-svelte/src/lib/libs/flow/flow.ts
new file mode 100644
index 000000000..1edb8069a
--- /dev/null
+++ b/monosketch-svelte/src/lib/libs/flow/flow.ts
@@ -0,0 +1,369 @@
+import { type LifecycleObserver, LifecycleOwner } from './lifecycleowner';
+import { type Comparable } from '$libs/comparable';
+
+interface Observer<T> {
+    onChange(value: T): void;
+}
+
+class SimpleObserver<T> implements Observer<T> {
+    constructor(private callback: (value: T) => void) {}
+
+    onChange(value: T): void {
+        if (value !== undefined) {
+            this.callback(value);
+        }
+    }
+}
+
+class ThrottleObserver<T> implements Observer<T> {
+    private timeoutId: number | undefined;
+
+    private currentValue: T | undefined;
+
+    constructor(
+        private observer: Observer<T>,
+        private timeout: number,
+    ) {
+        if (timeout < 0) {
+            throw new Error('Timeout must be >= 0');
+        }
+    }
+
+    onChange = (value: T) => {
+        this.currentValue = value;
+        if (this.timeoutId !== undefined) {
+            return;
+        }
+        if (this.timeout == 0) {
+            this.timeoutId = requestAnimationFrame(this.timeoutTick);
+        } else {
+            this.timeoutId = setTimeout(this.timeoutTick, this.timeout);
+        }
+    };
+
+    private timeoutTick = () => {
+        const newValue = this.currentValue;
+        if (newValue === undefined) {
+            return;
+        }
+        this.observer.onChange(newValue);
+        this.timeoutId = undefined;
+    };
+}
+
+export class Flow<T> {
+    private valueInternal: T | undefined = undefined;
+    private observers: Observer<T>[] = [];
+    private internalObservers: Map<Flow<unknown>, Observer<T>> = new Map();
+
+    private isImmutable = false;
+    private parent?: Array<Flow<unknown>>;
+    private transform?: (a: Array<unknown>) => T;
+
+    /**
+     * A flag that indicates whether the value of this flow should be updated when the parent flow's value changes
+     * regardless of whether this flow has subscribers.
+     * Turning this flag on will cause the value of this flow to be updated even if there are no subscribers.
+     * Only use this flag when reading the current value of the flow is required rather than observing the flow.
+     */
+    private isValueUpdatedReactivelyRequired = false;
+
+    private static immutable<T0, T>(
+        parent: Array<Flow<unknown>>,
+        transform: (value: T0) => T,
+    ): Flow<T> {
+        const flow = new Flow<T>();
+        flow.parent = parent;
+        // @ts-expect-error : Allow unsafe call to transform.
+        flow.transform = transform;
+        flow.isImmutable = true;
+        return flow;
+    }
+
+    static combine2<T0, T1, R>(
+        flow0: Flow<T0>,
+        flow1: Flow<T1>,
+        transform: (value0: T0, value1: T1) => R,
+    ): Flow<R> {
+        return Flow.combineList([flow0, flow1], (array) => {
+            return transform(array[0] as T0, array[1] as T1);
+        });
+    }
+
+    static combine3<T0, T1, T2, R>(
+        flow0: Flow<T0>,
+        flow1: Flow<T1>,
+        flow2: Flow<T2>,
+        transform: (value0: T0, value1: T1, value2: T2) => R,
+    ): Flow<R> {
+        return Flow.combineList([flow0, flow1, flow2], (array) => {
+            return transform(array[0] as T0, array[1] as T1, array[2] as T2);
+        });
+    }
+
+    static combine4<T0, T1, T2, T3, R>(
+        flow0: Flow<T0>,
+        flow1: Flow<T1>,
+        flow2: Flow<T2>,
+        flow3: Flow<T3>,
+        transform: (value0: T0, value1: T1, value2: T2, value3: T3) => R,
+    ): Flow<R> {
+        return Flow.combineList([flow0, flow1, flow2, flow3], (array) => {
+            return transform(array[0] as T0, array[1] as T1, array[2] as T2, array[3] as T3);
+        });
+    }
+
+    static combineList<R>(
+        flows: Array<Flow<unknown>>,
+        transform: (values: Array<unknown>) => R,
+    ): Flow<R> {
+        if (flows.length == 0) {
+            throw new Error('flows must not be empty');
+        }
+        if (flows.length == 1) {
+            console.warn('You are combining a single flow. Use flow.map instead.');
+            // @ts-expect-error : Allow unsafe call to transform.
+            return flows[0].map(transform);
+        }
+
+        const flow = Flow.immutable(flows, transform);
+        for (const parent of flows) {
+            parent.addInternalObserver(
+                flow,
+                new SimpleObserver(() => {
+                    // TODO: Getting value with `.value` can increase the computation cost since the value is computed
+                    //  from its parent flows. We should consider optimizing this.
+                    const values = flows.map((flow) => flow.value);
+                    if (values.includes(undefined)) {
+                        // Only update the value when all values are available.
+                        return;
+                    }
+                    flow.setValueInternal(transform(values));
+                }),
+            );
+        }
+        return flow;
+    }
+
+    // @ts-expect-error : Allow the value to be undefined.
+    constructor(value: T = undefined) {
+        if (value !== undefined) {
+            this.valueInternal = value;
+        }
+    }
+
+    set value(value: T) {
+        if (this.isImmutable) {
+            throw new Error('Flow is immutable');
+        }
+        if (value === undefined) {
+            throw new Error('Value cannot be undefined');
+        }
+
+        this.setValueInternal(value);
+    }
+
+    get value(): T | undefined {
+        if (this.valueInternal !== undefined) {
+            return this.valueInternal;
+        }
+        const args = this.parent?.map((flow) => flow.value);
+        if (args === undefined || args.includes(undefined)) {
+            return undefined;
+        }
+        return this.transform!(args);
+    }
+
+    private setValueInternal(value: T | undefined) {
+        if (value === undefined) {
+            return;
+        }
+
+        this.valueInternal = value;
+
+        for (const observer of this.observers) {
+            this.delegateValueToObserver(observer, value);
+        }
+
+        for (const [flow, observer] of this.internalObservers) {
+            if (flow.hasSubscribers()) {
+                this.delegateValueToObserver(observer, value);
+            }
+        }
+    }
+
+    /**
+     * Makes the value of this flow updated when the parent flow's value changes regardless of whether this flow has
+     * subscribers.
+     * This method is useful when reading the current value of the flow is required rather than observing the flow.
+     *
+     * Note that this method also makes the parents of this flow updated reactively.
+     */
+    makeValueUpdateReactively() {
+        this.isValueUpdatedReactivelyRequired = true;
+        // Update the value when this flag is turned on.
+        // This does nothing if the value is already up-to-date, so it's safe to call this method multiple times.
+        // Otherwise, this method will update the value to the latest value of the parent flow.
+        this.valueInternal = this.value;
+    }
+
+    map<R>(transform: (value: T) => R): Flow<R> {
+        const flow = Flow.immutable([this], (args: Array<T>) => transform(args[0]));
+        this.addInternalObserver(
+            flow,
+            new SimpleObserver((value) => {
+                flow.setValueInternal(transform(value));
+            }),
+        );
+        return flow;
+    }
+
+    /**
+     * Returns a flow that only emits a value when the current value is different from the previous value.
+     *
+     * Note: the first value set to the parent flow will always be emitted even if it is the same as the previous value.
+     * This is a limitation of the current implementation.
+     */
+    distinctUntilChanged(): Flow<T> {
+        const flow = Flow.immutable([this], (args: Array<T>) => args[0]);
+        this.addInternalObserver(
+            flow,
+            new SimpleObserver((value) => {
+                if (value === undefined) {
+                    // Ignore undefined values.
+                    return;
+                }
+
+                if (equals(value, flow.valueInternal)) {
+                    return;
+                }
+                flow.setValueInternal(value);
+            }),
+        );
+        return flow;
+    }
+
+    throttle(timeout: number): Flow<T> {
+        if (timeout < 0) {
+            return this;
+        }
+        const flow = Flow.immutable([this], (args: Array<T>) => args[0]);
+        this.addInternalObserver(
+            flow,
+            new ThrottleObserver(
+                new SimpleObserver((value) => {
+                    flow.setValueInternal(value);
+                }),
+                timeout,
+            ),
+        );
+        return flow;
+    }
+
+    /**
+     * Returns an immutable version of this flow.
+     */
+    immutable(): Flow<T> {
+        return this.map((value: T) => value);
+    }
+
+    combine<T1, R>(another: Flow<T1>, transform: (value0: T, value1: T1) => R): Flow<R> {
+        return Flow.combine2(this, another, transform);
+    }
+
+    /**
+     * Observes this flow with active lifecycle owner.
+     *
+     * The observer will be called immediately with the current defined value of the flow (do nothing if the current
+     * value is undefined).
+     * @param lifecycleOwner The lifecycle owner that the observer will be attached to. The observer will be removed
+     * when the lifecycle owner is stopped. If the lifecycle owner is inactive, the observer will not be added.
+     * @param observer
+     */
+    observe(lifecycleOwner: LifecycleOwner, observer: (value: T) => void) {
+        if (!lifecycleOwner.isActive) {
+            return;
+        }
+        const simpleObserver = new SimpleObserver(observer);
+        this.observers.push(simpleObserver);
+        lifecycleOwner.addObserver(
+            new OnStopLifecycleObserver(() => {
+                const index = this.observers.indexOf(simpleObserver);
+                if (index !== -1) {
+                    this.observers.splice(index, 1);
+                }
+                if (this.isImmutable && !this.hasSubscribers()) {
+                    // When there are no more subscribers, we can clear the value since the parent flow will not propagate
+                    // its state to this flow anymore.
+                    this.valueInternal = undefined;
+                }
+            }),
+        );
+
+        this.delegateValueToObserver(simpleObserver, this.value);
+    }
+
+    private addInternalObserver(key: Flow<unknown>, observer: Observer<T>) {
+        this.internalObservers.set(key, observer);
+    }
+
+    private delegateValueToObserver(observer: Observer<T>, value: T | undefined) {
+        if (value !== undefined) {
+            observer.onChange(value);
+        }
+    }
+
+    private hasSubscribers(): boolean {
+        if (this.isValueUpdatedReactivelyRequired || this.observers.length > 0) {
+            return true;
+        }
+        for (const child of this.internalObservers.keys()) {
+            if (child.hasSubscribers()) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /**
+     * Stops receiving updates from the parent flow.
+     * This method is useful when you want to stop receiving updates from the parent flow once this flow is no longer
+     * used.
+     */
+    stopReceivingUpdates() {
+        for (const parent of this.parent!) {
+            parent.internalObservers.delete(this);
+        }
+    }
+}
+
+class OnStopLifecycleObserver implements LifecycleObserver {
+    constructor(private callback: () => void) {}
+
+    onStop() {
+        this.callback();
+    }
+}
+
+/**
+ * Compares two values for equality.
+ * If both values are Comparable, then the equals method of the first value will be used.
+ */
+function equals(a: unknown, b: unknown): boolean {
+    if (a === b) {
+        // This also covers the case when a and b are both undefined or null.
+        // And also make use of the default equality check for primitive types.
+        return true;
+    }
+
+    if (a === null || a === undefined) {
+        // Since a and b are not equal, b must not be null or undefined.
+        return false;
+    }
+
+    if ((a as Comparable).equals) {
+        return (a as Comparable).equals(b);
+    }
+
+    return false;
+}
diff --git a/monosketch-svelte/src/lib/libs/flow/index.ts b/monosketch-svelte/src/lib/libs/flow/index.ts
new file mode 100644
index 000000000..8e96ea4fa
--- /dev/null
+++ b/monosketch-svelte/src/lib/libs/flow/index.ts
@@ -0,0 +1,3 @@
+export { Flow } from './flow';
+export { LifecycleOwner, LifecycleState } from './lifecycleowner';
+export type { LifecycleObserver } from './lifecycleowner';
diff --git a/monosketch-svelte/src/lib/libs/flow/lifecycleowner.ts b/monosketch-svelte/src/lib/libs/flow/lifecycleowner.ts
new file mode 100644
index 000000000..1f71f5c53
--- /dev/null
+++ b/monosketch-svelte/src/lib/libs/flow/lifecycleowner.ts
@@ -0,0 +1,73 @@
+export interface LifecycleObserver {
+    onStart?(): void;
+
+    onStop?(): void;
+}
+
+export enum LifecycleState {
+    INITIALIZED,
+    STARTED,
+    STOPPED,
+}
+
+export class LifecycleOwner {
+    private observers: LifecycleObserver[] = [];
+    private state: LifecycleState = LifecycleState.INITIALIZED;
+
+    static start(): LifecycleOwner {
+        const owner = new LifecycleOwner();
+        owner.onStart();
+        return owner;
+    }
+
+    get isActive(): boolean {
+        return this.state == LifecycleState.STARTED;
+    }
+
+    addObserver(observer: LifecycleObserver) {
+        if (this.state == LifecycleState.STOPPED) {
+            return;
+        }
+
+        this.observers.push(observer);
+        if (this.state == LifecycleState.STARTED) {
+            observer.onStart?.();
+        }
+    }
+
+    /**
+     * Called when the LifecycleOwner is ready to start.
+     * Do not override this method, override onStartInternal instead.
+     */
+    onStart() {
+        if (this.state == LifecycleState.STARTED) {
+            return;
+        }
+
+        this.state = LifecycleState.STARTED;
+        for (const observer of this.observers) {
+            observer.onStart?.();
+        }
+        this.onStartInternal();
+    }
+
+    protected onStartInternal() {}
+
+    /**
+     * Called when the LifecycleOwner is ready to stop.
+     * Do not override this method, override onStopInternal instead.
+     */
+    onStop() {
+        if (this.state == LifecycleState.STOPPED) {
+            return;
+        }
+
+        this.state = LifecycleState.STOPPED;
+        this.onStopInternal();
+        for (const observer of this.observers) {
+            observer.onStop?.();
+        }
+    }
+
+    protected onStopInternal() {}
+}
diff --git a/monosketch-svelte/src/lib/libs/graphics-geo/point.test.ts b/monosketch-svelte/src/lib/libs/graphics-geo/point.test.ts
new file mode 100644
index 000000000..ff0a9099d
--- /dev/null
+++ b/monosketch-svelte/src/lib/libs/graphics-geo/point.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, test } from 'vitest';
+import { DirectedPoint, Direction, Point } from '$libs/graphics-geo/point';
+
+describe('Point test', () => {
+    test('row column', () => {
+        const a = new Point(1, 2);
+        expect(a.row).toBe(2);
+        expect(a.column).toBe(1);
+    });
+
+    test('equals', () => {
+        const a = new Point(1, 2);
+        expect(a.equals(new Point(1, 2))).toBe(true);
+        expect(a.equals(new Point(2, 1))).toBe(false);
+        expect(a.equals({ left: 1, top: 2 })).toBe(false);
+        expect(a.equals(null)).toBe(false);
+        expect(a.equals(undefined)).toBe(false);
+    });
+
+    test('minus', () => {
+        const a = new Point(1, 2);
+        const b = new Point(3, 4);
+        expect(a.minus(b)).toEqual(new Point(-2, -2));
+    });
+
+    test('plus', () => {
+        const a = new Point(1, 2);
+        const b = new Point(3, 4);
+        expect(a.plus(b)).toEqual(new Point(4, 6));
+    });
+
+    test('cannot create point with float', () => {
+        expect(() => {
+            new Point(1.2, 0);
+        }).toThrow(Error('location must be integer (1.2, 0)'));
+
+        expect(() => {
+            new Point(1, 1.5);
+        }).toThrow(Error('location must be integer (1, 1.5)'));
+    });
+});
+
+describe('DirectedPoint test', () => {
+    test('equals', () => {
+        const a = new DirectedPoint(Direction.HORIZONTAL, new Point(1, 2));
+        expect(a.equals(new DirectedPoint(Direction.HORIZONTAL, new Point(1, 2)))).toBe(true);
+        expect(a.equals(new DirectedPoint(Direction.VERTICAL, new Point(1, 2)))).toBe(false);
+        expect(a.equals(new DirectedPoint(Direction.HORIZONTAL, new Point(2, 1)))).toBe(false);
+    });
+
+    test('plus', () => {
+        const a = new DirectedPoint(Direction.HORIZONTAL, new Point(1, 2));
+        expect(a.plus(new Point(3, 4))).toEqual(
+            new DirectedPoint(Direction.HORIZONTAL, new Point(4, 6)),
+        );
+    });
+});
diff --git a/monosketch-svelte/src/lib/libs/graphics-geo/point.ts b/monosketch-svelte/src/lib/libs/graphics-geo/point.ts
new file mode 100644
index 000000000..e750e5df2
--- /dev/null
+++ b/monosketch-svelte/src/lib/libs/graphics-geo/point.ts
@@ -0,0 +1,168 @@
+import type { Comparable } from '$libs/comparable';
+
+export interface IPoint extends Comparable {
+    left: number;
+    top: number;
+    row: number;
+    column: number;
+}
+
+/**
+ * A point class with integer location.
+ */
+export class Point implements IPoint {
+    static readonly ZERO = Point.of(0, 0);
+
+    static of(left: number, top: number): Point {
+        return new Point(left, top);
+    }
+
+    static ofF(left: number, top: number): Point {
+        return new Point(Math.trunc(left), Math.trunc(top));
+    }
+
+    static from(point: { left: number; top: number }): Point {
+        return Point.of(point.left, point.top);
+    }
+
+    static fromF(point: { left: number; top: number }): Point {
+        return Point.ofF(point.left, point.top);
+    }
+
+    constructor(
+        public readonly left: number,
+        public readonly top: number,
+    ) {
+        if (!(Number.isInteger(left) && Number.isInteger(top))) {
+            throw Error(`location must be integer (${left}, ${top})`);
+        }
+    }
+
+    get row(): number {
+        return this.top;
+    }
+
+    get column(): number {
+        return this.left;
+    }
+
+    equals(other: unknown): boolean {
+        if (!(other instanceof Point)) {
+            return false;
+        }
+        return this.left === other.left && this.top === other.top;
+    }
+
+    /**
+     * Returns a new point that is the difference between this point and the
+     * other point.
+     */
+    minus(other: Point): Point {
+        return Point.of(this.left - other.left, this.top - other.top);
+    }
+
+    /**
+     * Returns a new point that is the sum of this point and the other point.
+     */
+    plus(other: Point): Point {
+        return Point.of(this.left + other.left, this.top + other.top);
+    }
+
+    /**
+     * Returns a new point with updated properties.
+     */
+    copy({ left = this.left, top = this.top }: { left?: number; top?: number } = {}): Point {
+        return new Point(left, top);
+    }
+
+    toString(): string {
+        return `${this.left}|${this.top}`;
+    }
+}
+
+export enum Direction {
+    HORIZONTAL,
+    VERTICAL,
+}
+
+export class DirectedPoint implements Comparable {
+    static of(direction: Direction, left: number, top: number): DirectedPoint {
+        return new DirectedPoint(direction, new Point(left, top));
+    }
+
+    static ofF(direction: Direction, left: number, top: number): DirectedPoint {
+        return new DirectedPoint(direction, new Point(Math.trunc(left), Math.trunc(top)));
+    }
+
+    constructor(
+        public readonly direction: Direction,
+        public readonly point: Point,
+    ) {
+    }
+
+    get left(): number {
+        return this.point.left;
+    }
+
+    get top(): number {
+        return this.point.top;
+    }
+
+    copy({ direction = this.direction, point = this.point }: {
+        direction?: Direction;
+        point?: Point
+    } = {}): DirectedPoint {
+        return new DirectedPoint(direction, point);
+    }
+
+    equals(other: unknown): boolean {
+        if (!(other instanceof DirectedPoint)) {
+            return false;
+        }
+        return this.direction === other.direction && this.point.equals(other.point);
+    }
+
+    /**
+     * Returns a new directed point that has the point is sum of this point and
+     * the base point.
+     */
+    plus(base: Point): DirectedPoint {
+        return new DirectedPoint(this.direction, this.point.plus(base));
+    }
+
+    static ZERO = new DirectedPoint(Direction.HORIZONTAL, Point.ZERO);
+}
+
+/**
+ * A point class that represents a point in 2D space whose values are in float number.
+ * This class is only used for calculation, should not use for serialization or storage.
+ */
+export class PointF implements IPoint {
+    constructor(
+        public left: number,
+        public top: number,
+    ) {
+    }
+
+    static create({ left, top }: { left: number; top: number }): PointF {
+        return new PointF(left, top);
+    }
+
+
+    get row(): number {
+        return this.top;
+    }
+
+    get column(): number {
+        return this.left;
+    }
+
+    equals(other: unknown): boolean {
+        if (!(other instanceof PointF)) {
+            return false;
+        }
+        return this.left === other.left && this.top === other.top;
+    }
+
+    static ZERO = new PointF(0, 0);
+}
diff --git a/monosketch-svelte/src/lib/libs/graphics-geo/rect.test.ts b/monosketch-svelte/src/lib/libs/graphics-geo/rect.test.ts
new file mode 100644
index 000000000..6005b64f5
--- /dev/null
+++ b/monosketch-svelte/src/lib/libs/graphics-geo/rect.test.ts
@@ -0,0 +1,115 @@
+import { describe, expect, test } from 'vitest';
+import { Rect } from '$libs/graphics-geo/rect';
+import { Point } from '$libs/graphics-geo/point';
+
+describe('Rect test', () => {
+    test('byLTRB', () => {
+        const r = Rect.byLTRB(1, 2, 3, 4);
+        expect(r.left).toBe(1);
+        expect(r.top).toBe(2);
+        expect(r.right).toBe(3);
+        expect(r.bottom).toBe(4);
+        expect(r.width).toBe(3);
+        expect(r.height).toBe(3);
+    });
+
+    test('byLTRB with flipped', () => {
+        const r = Rect.byLTRB(5, 10, 4, 6);
+        expect(r.left).toBe(4);
+        expect(r.top).toBe(6);
+        expect(r.right).toBe(5);
+        expect(r.bottom).toBe(10);
+        expect(r.width).toBe(2);
+        expect(r.height).toBe(5);
+    });
+
+    test('byLTWH', () => {
+        const r = Rect.byLTWH(4, 6, 10, 42);
+        expect(r.left).toBe(4);
+        expect(r.top).toBe(6);
+        expect(r.right).toBe(13);
+        expect(r.bottom).toBe(47);
+        expect(r.width).toBe(10);
+        expect(r.height).toBe(42);
+    });
+
+    test('properties', () => {
+        const r = Rect.byLTRB(1, 2, 3, 4);
+        expect(r.width).toBe(3);
+        expect(r.height).toBe(3);
+        expect(r.left).toBe(1);
+        expect(r.top).toBe(2);
+        expect(r.right).toBe(3);
+    });
+
+    test('equals', () => {
+        const r = Rect.byLTRB(1, 2, 3, 4);
+        expect(r.equals(Rect.byLTRB(1, 2, 3, 4))).toBe(true);
+        expect(r.equals(Rect.byLTRB(1, 2, 3, 5))).toBe(false);
+        expect(r.equals(Rect.byLTRB(1, 2, 4, 4))).toBe(false);
+        expect(r.equals(Rect.byLTRB(1, 3, 3, 4))).toBe(false);
+        expect(r.equals(Rect.byLTRB(2, 2, 3, 4))).toBe(false);
+        expect(r.equals({ left: 1, top: 2, right: 3, bottom: 4 })).toBe(false);
+        expect(r.equals(null)).toBe(false);
+        expect(r.equals(undefined)).toBe(false);
+    });
+
+    test('contains', () => {
+        const r = Rect.byLTRB(1, 2, 3, 4);
+        expect(r.contains(Point.of(1, 2))).toBe(true);
+        expect(r.contains(Point.of(2, 3))).toBe(true);
+        expect(r.contains(Point.of(3, 4))).toBe(true);
+        expect(r.contains(Point.of(0, 0))).toBe(false);
+        expect(r.contains(Point.of(1, 1))).toBe(false);
+        expect(r.contains(Point.of(3, 5))).toBe(false);
+        expect(r.contains(Point.of(4, 4))).toBe(false);
+    });
+
+    test('isOverlapped', () => {
+        const r = Rect.byLTRB(1, 2, 3, 4);
+        expect(r.isOverlapped(Rect.byLTRB(1, 2, 3, 4))).toBe(true);
+        expect(r.isOverlapped(Rect.byLTRB(0, 1, 2, 3))).toBe(true);
+        expect(r.isOverlapped(Rect.byLTRB(2, 3, 4, 5))).toBe(true);
+        expect(r.isOverlapped(Rect.byLTRB(0, 1, 4, 5))).toBe(true);
+        expect(r.isOverlapped(Rect.byLTRB(0, 1, 1, 2))).toBe(true);
+        expect(r.isOverlapped(Rect.byLTRB(3, 4, 4, 5))).toBe(true);
+        expect(r.isOverlapped(Rect.byLTRB(0, 1, 1, 3))).toBe(true);
+        expect(r.isOverlapped(Rect.byLTRB(2, 3, 4, 6))).toBe(true);
+        expect(r.isOverlapped(Rect.byLTRB(0, 1, 4, 6))).toBe(true);
+
+        expect(r.isOverlapped(Rect.byLTRB(0, 1, 1, 1))).toBe(false);
+        expect(r.isOverlapped(Rect.byLTRB(4, 5, 6, 7))).toBe(false);
+        expect(r.isOverlapped(Rect.byLTRB(0, 1, 0, 1))).toBe(false);
+        expect(r.isOverlapped(Rect.byLTRB(4, 5, 4, 5))).toBe(false);
+    });
+
+    test('getOverlappedRect', () => {
+        const r = Rect.byLTRB(1, 2, 3, 4);
+        expect(r.getOverlappedRect(Rect.byLTRB(1, 2, 3, 4))).toEqual(Rect.byLTRB(1, 2, 3, 4));
+        expect(r.getOverlappedRect(Rect.byLTRB(0, 1, 2, 3))).toEqual(Rect.byLTRB(1, 2, 2, 3));
+        expect(r.getOverlappedRect(Rect.byLTRB(2, 3, 4, 5))).toEqual(Rect.byLTRB(2, 3, 3, 4));
+        expect(r.getOverlappedRect(Rect.byLTRB(0, 1, 4, 5))).toEqual(Rect.byLTRB(1, 2, 3, 4));
+        expect(r.getOverlappedRect(Rect.byLTRB(0, 1, 1, 2))).toEqual(Rect.byLTRB(1, 2, 1, 2));
+        expect(r.getOverlappedRect(Rect.byLTRB(3, 4, 4, 5))).toEqual(Rect.byLTRB(3, 4, 3, 4));
+        expect(r.getOverlappedRect(Rect.byLTRB(0, 1, 1, 3))).toEqual(Rect.byLTRB(1, 2, 1, 3));
+        expect(r.getOverlappedRect(Rect.byLTRB(2, 3, 4, 6))).toEqual(Rect.byLTRB(2, 3, 3, 4));
+        expect(r.getOverlappedRect(Rect.byLTRB(0, 1, 4, 6))).toEqual(Rect.byLTRB(1, 2, 3, 4));
+
+        expect(r.getOverlappedRect(Rect.byLTRB(0, 1, 1, 1))).toBe(null);
+        expect(r.getOverlappedRect(Rect.byLTRB(4, 5, 6, 7))).toBe(null);
+        expect(r.getOverlappedRect(Rect.byLTRB(0, 1, 0, 1))).toBe(null);
+        expect(r.getOverlappedRect(Rect.byLTRB(4, 5, 4, 5))).toBe(null);
+    });
+
+    test('isVertex', () => {
+        const r = Rect.byLTRB(1, 2, 3, 4);
+        expect(r.isVertex(Point.of(1, 2))).toBe(true);
+        expect(r.isVertex(Point.of(3, 2))).toBe(true);
+        expect(r.isVertex(Point.of(1, 4))).toBe(true);
+        expect(r.isVertex(Point.of(3, 4))).toBe(true);
+        expect(r.isVertex(Point.of(2, 2))).toBe(false);
+        expect(r.isVertex(Point.of(1, 3))).toBe(false);
+        expect(r.isVertex(Point.of(3, 3))).toBe(false);
+        expect(r.isVertex(Point.of(2, 4))).toBe(false);
+    });
+});
diff --git a/monosketch-svelte/src/lib/libs/graphics-geo/rect.ts b/monosketch-svelte/src/lib/libs/graphics-geo/rect.ts
new file mode 100644
index 000000000..fa10470e4
--- /dev/null
+++ b/monosketch-svelte/src/lib/libs/graphics-geo/rect.ts
@@ -0,0 +1,118 @@
+import { type IPoint, Point } from './point';
+import { Size } from './size';
+import { IntRange } from '$libs/sequence';
+import type { Comparable } from '$libs/comparable';
+
+export class Rect implements Comparable {
+    static readonly ZERO = Rect.byLTWH(0, 0, 0, 0);
+
+    static byLTRB(left: number, top: number, right: number, bottom: number): Rect {
+        [left, right] = [Math.min(left, right), Math.max(left, right)];
+        [top, bottom] = [Math.min(top, bottom), Math.max(top, bottom)];
+        return new Rect(Point.of(left, top), Size.of(right - left + 1, bottom - top + 1));
+    }
+
+    static byLTRBf(left: number, top: number, right: number, bottom: number): Rect {
+        [left, right] = [Math.min(left, right), Math.max(left, right)];
+        [top, bottom] = [Math.min(top, bottom), Math.max(top, bottom)];
+        return new Rect(Point.ofF(left, top), Size.ofF(right - left + 1, bottom - top + 1));
+    }
+
+    static byLTWH(left: number, top: number, width: number, height: number): Rect {
+        return new Rect(Point.of(left, top), Size.of(width, height));
+    }
+
+    static byLTWHf(left: number, top: number, width: number, height: number): Rect {
+        return new Rect(Point.ofF(left, top), Size.ofF(width, height));
+    }
+
+    private readonly validHorizontalRange: IntRange;
+    private readonly validVerticalRange: IntRange;
+
+    constructor(
+        public readonly position: Point,
+        public readonly size: Size,
+    ) {
+        this.validHorizontalRange = new IntRange(this.left, this.right + 1);
+        this.validVerticalRange = new IntRange(this.top, this.bottom + 1);
+    }
+
+    get width(): number {
+        return this.size.width;
+    }
+
+    get height(): number {
+        return this.size.height;
+    }
+
+    get left(): number {
+        return this.position.left;
+    }
+
+    get top(): number {
+        return this.position.top;
+    }
+
+    get right(): number {
+        return this.left + this.width - 1;
+    }
+
+    get bottom(): number {
+        return this.top + this.height - 1;
+    }
+
+    equals(other: unknown): boolean {
+        if (!(other instanceof Rect)) {
+            return false;
+        }
+        return this.position.equals(other.position) && this.size.equals(other.size);
+    }
+
+    contains(point: IPoint): boolean {
+        return (
+            this.validHorizontalRange.contains(point.left) &&
+            this.validVerticalRange.contains(point.top)
+        );
+    }
+
+    isOverlapped(other: Rect): boolean {
+        const isHorizontalOverlapped =
+            this.validHorizontalRange.contains(other.left) ||
+            other.validHorizontalRange.contains(this.left);
+        const isVerticalOverlapped =
+            this.validVerticalRange.contains(other.top) ||
+            other.validVerticalRange.contains(this.top);
+
+        return isHorizontalOverlapped && isVerticalOverlapped;
+    }
+
+    getOverlappedRect(rect: Rect): Rect | null {
+        if (!this.isOverlapped(rect)) {
+            return null;
+        }
+        const offset = rect.position.minus(this.position);
+        const top = Math.max(offset.top, 0);
+        const bottom = Math.min(offset.top + rect.height, this.height) - 1;
+        const left = Math.max(offset.left, 0);
+        const right = Math.min(offset.left + rect.width, this.width) - 1;
+        return Rect.byLTRB(
+            left + this.position.left,
+            top + this.position.top,
+            right + this.position.left,
+            bottom + this.position.top,
+        );
+    }
+
+    /**
+     * Returns true if the point is one of its vertices.
+     */
+    isVertex(point: Point): boolean {
+        const isHorizontalVertex = point.left === this.left || point.left === this.right;
+        const isVerticalVertex = point.top === this.top || point.top === this.bottom;
+        return isHorizontalVertex && isVerticalVertex;
+    }
+
+    toString(): string {
+        return `[${this.left}, ${this.top}] - [${this.width} x ${this.height}]`;
+    }
+}
diff --git a/monosketch-svelte/src/lib/libs/graphics-geo/size.test.ts b/monosketch-svelte/src/lib/libs/graphics-geo/size.test.ts
new file mode 100644
index 000000000..fbbf73c10
--- /dev/null
+++ b/monosketch-svelte/src/lib/libs/graphics-geo/size.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, test } from 'vitest';
+import { Size, SizeF } from '$libs/graphics-geo/size';
+
+describe('Size test', () => {
+    test('constructor', () => {
+        expect(() => {
+            new Size(1.2, 0);
+        }).toThrow(Error('size must be integer'));
+
+        expect(() => {
+            new Size(1, 1.5);
+        }).toThrow(Error('size must be integer'));
+    });
+
+    test('equals', () => {
+        const a = new Size(1, 2);
+        expect(a.equals(new Size(1, 2))).toBe(true);
+        expect(a.equals(new Size(2, 1))).toBe(false);
+        expect(a.equals({ width: 1, height: 2 })).toBe(false);
+        expect(a.equals(null)).toBe(false);
+        expect(a.equals(undefined)).toBe(false);
+    });
+});
+
+describe('SizeF test', () => {
+    test('equals', () => {
+        const a = new SizeF(1.1, 2.2);
+        expect(a.equals(new SizeF(1.1, 2.2))).toBe(true);
+        expect(a.equals(new SizeF(1.2, 2))).toBe(false);
+        expect(a.equals(new SizeF(1.1, 2.1))).toBe(false);
+        expect(a.equals({ width: 1.1, height: 2.2 })).toBe(false);
+        expect(a.equals(null)).toBe(false);
+        expect(a.equals(undefined)).toBe(false);
+    });
+});
diff --git a/monosketch-svelte/src/lib/libs/graphics-geo/size.ts b/monosketch-svelte/src/lib/libs/graphics-geo/size.ts
new file mode 100644
index 000000000..4cfbc5601
--- /dev/null
+++ b/monosketch-svelte/src/lib/libs/graphics-geo/size.ts
@@ -0,0 +1,76 @@
+import type { Comparable } from '$libs/comparable';
+
+export interface ISize extends Comparable {
+    width: number;
+    height: number;
+}
+
+/**
+ * A size class with integer width and height.
+ */
+export class Size implements ISize {
+    static readonly ZERO = new Size(0, 0);
+
+    static of(width: number, height: number): Size {
+        return new Size(width, height);
+    }
+
+    static ofF(width: number, height: number): Size {
+        return new Size(Math.trunc(width), Math.trunc(height));
+    }
+
+    static from(size: { width: number; height: number }): Size {
+        return Size.of(size.width, size.height);
+    }
+
+    constructor(
+        public readonly width: number,
+        public readonly height: number,
+    ) {
+        if (!(Number.isInteger(width) && Number.isInteger(height))) {
+            throw Error('size must be integer');
+        }
+    }
+
+    equals(other: unknown): boolean {
+        if (!(other instanceof Size)) {
+            return false;
+        }
+        return this.width === other.width && this.height === other.height;
+    }
+
+    toString() {
+        return `Size(${this.width}, ${this.height})`;
+    }
+}
+
+/**
+ * A size class with float width and height.
+ */
+export class SizeF implements ISize {
+    static readonly ZERO = new SizeF(0, 0);
+
+    static of(width: number, height: number): SizeF {
+        return new SizeF(width, height);
+    }
+
+    static from(size: { width: number; height: number }): SizeF {
+        return SizeF.of(size.width, size.height);
+    }
+
+    constructor(
+        public width: number,
+        public height: number,
+    ) {}
+
+    equals(other: unknown): boolean {
+        if (!(other instanceof SizeF)) {
+            return false;
+        }
+        return this.width === other.width && this.height === other.height;
+    }
+
+    toString() {
+        return `SizeF(${this.width}, ${this.height})`;
+    }
+}
diff --git a/monosketch-svelte/src/lib/libs/sequence.test.ts b/monosketch-svelte/src/lib/libs/sequence.test.ts
new file mode 100644
index 000000000..8f7252693
--- /dev/null
+++ b/monosketch-svelte/src/lib/libs/sequence.test.ts
@@ -0,0 +1,200 @@
+import { describe, expect, test } from 'vitest';
+import {
+    binarySearch,
+    getOrDefault,
+    getOrNull,
+    IntRange,
+    map,
+    mapIndexed,
+    mapIndexedNotNull,
+    mapNotNull,
+    range,
+    zip,
+} from '$libs/sequence';
+
+describe('test IntRange', () => {
+    test('invalid constructions', () => {
+        expect(() => {
+            new IntRange(1, 0);
+        }).toThrow(Error('start must be less than or equal to end'));
+
+        expect(() => {
+            new IntRange(1, 2, 0);
+        }).toThrow(Error('step must not be zero'));
+    });
+
+    test('contains', () => {
+        const r = new IntRange(1, 3);
+        expect(r.contains(1)).toBe(true);
+        expect(r.contains(2)).toBe(true);
+        expect(r.contains(3)).toBe(false);
+        expect(r.contains(0)).toBe(false);
+        expect(r.contains(4)).toBe(false);
+    });
+
+    test('iterator', () => {
+        const r = new IntRange(1, 4);
+        const result = [];
+        for (const i of r) {
+            result.push(i);
+        }
+        expect(result).toEqual([1, 2, 3]);
+    });
+});
+
+describe('test range', () => {
+    test('range', () => {
+        const result = [];
+        for (const i of range(1, 5)) {
+            result.push(i);
+        }
+        expect(result).toEqual([1, 2, 3, 4]);
+    });
+
+    test('range with step', () => {
+        const result = [];
+        for (const i of range(1, 5, 2)) {
+            result.push(i);
+        }
+        expect(result).toEqual([1, 3]);
+    });
+
+    test('start is less than end', () => {
+        const result = [];
+        for (const i of range(5, 1)) {
+            result.push(i);
+        }
+        expect(result).toEqual([]);
+    });
+
+    test('range with negative step', () => {
+        const result = [];
+        for (const i of range(5, 1, -1)) {
+            result.push(i);
+        }
+        expect(result).toEqual([5, 4, 3, 2]);
+    });
+
+    test('range with negative step and start is greater than end', () => {
+        const result = [];
+        for (const i of range(1, 5, -1)) {
+            result.push(i);
+        }
+        expect(result).toEqual([]);
+    });
+
+    test('range with zero step', () => {
+        expect(() => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            for (const _ of range(1, 5, 0)) {
+                // do nothing
+            }
+        }).toThrow(Error('step must not be zero'));
+    });
+});
+
+describe('test zip', () => {
+    test('zip', () => {
+        const result = [];
+        for (const [a, b] of zip([1, 2, 3], [4, 5, 6])) {
+            result.push([a, b]);
+        }
+        expect(result).toEqual([
+            [1, 4],
+            [2, 5],
+            [3, 6],
+        ]);
+    });
+
+    test('zip with different lengths', () => {
+        const result = [];
+        for (const [a, b] of zip([1, 2, 3], [4, 5])) {
+            result.push([a, b]);
+        }
+        expect(result).toEqual([
+            [1, 4],
+            [2, 5],
+        ]);
+    });
+});
+
+describe('test map', () => {
+    test('map', () => {
+        expect(map([1, 2, 3], (value) => value * 2)).toEqual([2, 4, 6]);
+    });
+
+    test('mapNotNull', () => {
+        const result = mapNotNull([1, 2, 3], (value) => (value % 2 === 0 ? value * 2 : null));
+        expect(result).toEqual([4]);
+    });
+
+    test('mapIndexed', () => {
+        const result = mapIndexed([1, 2, 3], (index, value) => [index, value]);
+        expect(result).toEqual([
+            [0, 1],
+            [1, 2],
+            [2, 3],
+        ]);
+    });
+
+    test('mapIndexedNotNull', () => {
+        const result = mapIndexedNotNull([1, 2, 3], (index, value) =>
+            index % 2 === 0 ? value : null,
+        );
+        expect(result).toEqual([1, 3]);
+    });
+});
+
+describe('test filter', () => {
+    test('filter', () => {
+        expect([1, 2, 3].filter((value) => value % 2 !== 0)).toEqual([1, 3]);
+    });
+});
+
+describe('test binarySearch', () => {
+    test('happy', () => {
+        const array = [2, 3, 4, 5];
+
+        expect(binarySearch(array, (value) => value - 1)).toBe(-1);
+        expect(binarySearch(array, (value) => value - 2)).toBe(0);
+        expect(binarySearch(array, (value) => value - 3)).toBe(1);
+        expect(binarySearch(array, (value) => value - 4)).toBe(2);
+        expect(binarySearch(array, (value) => value - 5)).toBe(3);
+        expect(binarySearch(array, (value) => value - 6)).toBe(-5);
+    });
+
+    test('happy withIn range', () => {
+        const array = [2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+        expect(binarySearch(array, (value) => value - 1, [1, 4])).toBe(-2);
+        expect(binarySearch(array, (value) => value - 2, [1, 4])).toBe(-2);
+        expect(binarySearch(array, (value) => value - 3, [1, 4])).toBe(1);
+        expect(binarySearch(array, (value) => value - 4, [1, 4])).toBe(2);
+        expect(binarySearch(array, (value) => value - 5, [1, 4])).toBe(3);
+        expect(binarySearch(array, (value) => value - 6, [1, 4])).toBe(-5);
+    });
+});
+
+describe('test getOrNull', () => {
+    test('happy', () => {
+        const array = [1, 2, 3, 4];
+        expect(getOrNull(array, 0)).toBe(1);
+        expect(getOrNull(array, 1)).toBe(2);
+        expect(getOrNull(array, 2)).toBe(3);
+        expect(getOrNull(array, 3)).toBe(4);
+        expect(getOrNull(array, 4)).toBeNull();
+        expect(getOrNull(array, -1)).toBeNull();
+    });
+});
+
+describe('test getOrDefault', () => {
+    test('happy', () => {
+        const array = [1, 2, 3, 4];
+        expect(getOrDefault(array, 0, 0)).toBe(1);
+        expect(getOrDefault(array, 1, 0)).toBe(2);
+        expect(getOrDefault(array, 2, 0)).toBe(3);
+        expect(getOrDefault(array, 3, 0)).toBe(4);
+        expect(getOrDefault(array, 4, 0)).toBe(0);
+        expect(getOrDefault(array, -1, 0)).toBe(0);
+    });
+});
diff --git a/monosketch-svelte/src/lib/libs/sequence.ts b/monosketch-svelte/src/lib/libs/sequence.ts
new file mode 100644
index 000000000..97686ba54
--- /dev/null
+++ b/monosketch-svelte/src/lib/libs/sequence.ts
@@ -0,0 +1,190 @@
+export class IntRange implements Iterable<number> {
+    constructor(
+        public start: number,
+        public endExclusive: number,
+        public step: number = 1,
+    ) {
+        if (start > endExclusive) {
+            throw Error('start must be less than or equal to end');
+        }
+        if (step === 0) {
+            throw Error('step must not be zero');
+        }
+    }
+
+    [Symbol.iterator](): Iterator<number> {
+        return range(this.start, this.endExclusive, this.step);
+    }
+
+    contains(value: number): boolean {
+        return value >= this.start && value < this.endExclusive;
+    }
+}
+
+export function* range(start: number, end: number, step: number = 1): Generator<number> {
+    if (step === 0) {
+        throw Error('step must not be zero');
+    }
+    if (step < 0) {
+        for (let i = start; i > end; i += step) {
+            yield i;
+        }
+    } else {
+        for (let i = start; i < end; i += step) {
+            yield i;
+        }
+    }
+}
+
+export function* zip<T1, T2>(iter1: Iterable<T1>, iter2: Iterable<T2>): Generator<[T1, T2]> {
+    const iterator1 = iter1[Symbol.iterator]();
+    const iterator2 = iter2[Symbol.iterator]();
+    while (true) {
+        const result1 = iterator1.next();
+        const result2 = iterator2.next();
+        if (result1.done || result2.done) {
+            break;
+        }
+        yield [result1.value, result2.value];
+    }
+}
+
+export function map<T, U>(iterable: Iterable<T>, func: (value: T) => U): U[] {
+    const result: U[] = [];
+    for (const value of iterable) {
+        result.push(func(value));
+    }
+    return result;
+}
+
+export function mapNotNull<T, U>(iterable: Iterable<T>, func: (value: T) => U | null): U[] {
+    const result: U[] = [];
+    for (const value of iterable) {
+        const mapped = func(value);
+        if (mapped !== null) {
+            result.push(mapped);
+        }
+    }
+    return result;
+}
+
+export function mapIndexed<T, U>(iterable: Iterable<T>, func: (index: number, value: T) => U): U[] {
+    const result: U[] = [];
+    let index = 0;
+    for (const value of iterable) {
+        result.push(func(index, value));
+        index++;
+    }
+    return result;
+}
+
+export function mapIndexedNotNull<T, U>(
+    iterable: Iterable<T>,
+    func: (index: number, value: T) => U | null,
+): U[] {
+    const result: U[] = [];
+    let index = 0;
+    for (const value of iterable) {
+        const mapped = func(index, value);
+        if (mapped !== null) {
+            result.push(mapped);
+        }
+        index++;
+    }
+    return result;
+}
+
+export function filter<T>(iterable: Iterable<T>, func: (value: T) => boolean): T[] {
+    const result: T[] = [];
+    for (const value of iterable) {
+        if (func(value)) {
+            result.push(value);
+        }
+    }
+    return result;
+}
+
+/**
+ * Find the index of the first element that satisfies the predicate.
+ * @param array
+ * @param comparator A function that returns a negative number if the value is less than the target,
+ * a positive number if the value is greater than the target, or zero if the value is equal to the
+ * target.
+ * @param withIn The range to search within.
+ * @returns @return the index of the found element, if it is contained in the list within the specified range;
+ *  otherwise, the inverted insertion point `(-insertion point - 1)`.
+ *  The insertion point is defined as the index at which the element should be inserted,
+ *  so that the list (or the specified subrange of list) still remains sorted.
+ */
+export function binarySearch<T>(
+    array: T[],
+    comparator: (value: T) => number,
+    withIn: number[] = [0, array.length],
+): number {
+    let low = withIn[0];
+    let high = withIn[1] - 1;
+    while (low <= high) {
+        const mid = Math.floor((low + high) / 2);
+        const compareResult = comparator(array[mid]);
+        if (compareResult < 0) {
+            low = mid + 1;
+        } else if (compareResult > 0) {
+            high = mid - 1;
+        } else {
+            return mid; // key found
+        }
+    }
+    return -(low + 1); // key not found
+}
+
+export function getOrNull<T>(array: T[], index: number): T | null {
+    return index >= 0 && index < array.length ? array[index] : null;
+}
+
+export function getOrDefault<T>(array: T[], index: number, defaultValue: T): T {
+    return index >= 0 && index < array.length ? array[index] : defaultValue;
+}
+
+export function singleOrNull<T>(array: T[] | Set<T>): T | null {
+    if (array instanceof Set) {
+        if (array.size === 1) {
+            return array.values().next().value ?? null;
+        } else {
+            return null;
+        }
+    }
+    return array.length === 1 ? array[0] : null;
+}
+
+export namespace ListExt {
+    /**
+     * Create a list of the specified size with the specified value.
+     * @param size
+     * @param value
+     */
+    export function list<T>(size: number, value: () => T): T[] {
+        const result: T[] = [];
+        for (let i = 0; i < size; i++) {
+            result.push(value());
+        }
+        return result;
+    }
+}
+
+export namespace MapExt {
+    /**
+     * Get the value from the map with the specified key. If the key is not found, put the value
+     * created by the specified function into the map and return it.
+     * @param map
+     * @param key
+     * @param value
+     */
+    export function getOrPut<K, V>(map: Map<K, V>, key: K, value: () => V): V {
+        let result = map.get(key);
+        if (result === undefined) {
+            result = value();
+            map.set(key, result);
+        }
+        return result;
+    }
+}
diff --git a/monosketch-svelte/src/lib/libs/string.test.ts b/monosketch-svelte/src/lib/libs/string.test.ts
new file mode 100644
index 000000000..ef8946cab
--- /dev/null
+++ b/monosketch-svelte/src/lib/libs/string.test.ts
@@ -0,0 +1,24 @@
+import { describe, expect, test } from 'vitest';
+import { StringExt } from '$libs/string';
+
+describe('StringExt', () => {
+    test('trimMargin', () => {
+        const input = `
+            | 1 |
+            | 2 |
+            | 3 |
+        `;
+        const expected = ` 1 |\n 2 |\n 3 |`;
+        expect(StringExt.trimMargin(input)).toStrictEqual(expected);
+    });
+
+    test('trimMargin with custom prefix', () => {
+        const input = `
+            # 1 |
+            # 2 |
+            # 3 |
+        `;
+        const expected = ` 1 |\n 2 |\n 3 |`;
+        expect(StringExt.trimMargin(input, '#')).toStrictEqual(expected);
+    });
+});
diff --git a/monosketch-svelte/src/lib/libs/string.ts b/monosketch-svelte/src/lib/libs/string.ts
new file mode 100644
index 000000000..fd99caf58
--- /dev/null
+++ b/monosketch-svelte/src/lib/libs/string.ts
@@ -0,0 +1,31 @@
+export namespace StringExt {
+    /**
+     * Trims the margin of a string.
+     *
+     * The margin is defined by the first line that starts with a margin prefix.
+     * @param input
+     * @param marginPrefix The prefix of the margin. Default is `|`.
+     */
+    export const trimMargin = (
+        input: string,
+        marginPrefix: string = '|',
+    ): string => {
+        const lines = input.split('\n').filter(line => line.indexOf(marginPrefix) !== -1);
+        if (!lines) {
+            return input;
+        }
+
+        const marginLength = lines[0].indexOf(marginPrefix) + 1;
+        const output = lines.map(line => line.slice(marginLength)).join('\n');
+        return output;
+    };
+
+    export const trimIndent = (str: string): string => {
+        const lines = str.split('\n');
+        const nonEmptyLines = lines.filter(line => line.trim().length > 0);
+        const indentLengths = nonEmptyLines.map(line => line.match(/^\s*/)?.[0].length ?? 0);
+        const minIndent = Math.min(...indentLengths);
+
+        return lines.map(line => line.slice(minIndent)).join('\n').trim();
+    };
+}
diff --git a/monosketch-svelte/src/lib/libs/todo.ts b/monosketch-svelte/src/lib/libs/todo.ts
new file mode 100644
index 000000000..d594ffa24
--- /dev/null
+++ b/monosketch-svelte/src/lib/libs/todo.ts
@@ -0,0 +1,3 @@
+export const TODO = (reason: string = "Not implemented") => {
+    throw new Error(reason);
+};
diff --git a/monosketch-svelte/src/lib/mono/action-manager/action-manager.ts b/monosketch-svelte/src/lib/mono/action-manager/action-manager.ts
new file mode 100644
index 000000000..b9178d130
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/action-manager/action-manager.ts
@@ -0,0 +1,122 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { LifecycleOwner } from '$libs/flow/lifecycleowner';
+import { Flow } from '$libs/flow/flow';
+import { KeyCommandType } from "$mono/keycommand";
+import { RetainableActionType } from './retainable-actions';
+import { type OneTimeActionType, OneTimeAction } from './one-time-actions';
+
+/**
+ * A class which gathers UI events and converts them into equivalent command.
+ */
+export class ActionManager {
+    private retainableActionMutableFlow: Flow<RetainableActionType> = new Flow(RetainableActionType.IDLE);
+    retainableActionFlow = this.retainableActionMutableFlow.distinctUntilChanged();
+
+    private oneTimeActionMutableFlow: Flow<OneTimeActionType> = new Flow(OneTimeAction.Idle);
+    oneTimeActionFlow = this.oneTimeActionMutableFlow.immutable();
+
+    constructor(private lifecycleOwner: LifecycleOwner) {
+    }
+
+    observeKeyCommand(keyCommandFlow: Flow<KeyCommandType>) {
+        keyCommandFlow.distinctUntilChanged().observe(this.lifecycleOwner, this.onKeyEvent.bind(this));
+    }
+
+    private onKeyEvent(keyCommand: KeyCommandType) {
+        switch (keyCommand) {
+            case KeyCommandType.IDLE:
+                break;
+            case KeyCommandType.SELECT_ALL:
+                this.setOneTimeAction(OneTimeAction.SelectAllShapes);
+                break;
+            case KeyCommandType.DESELECTION:
+                this.setOneTimeAction(OneTimeAction.DeselectShapes);
+                break;
+            case KeyCommandType.DELETE:
+                this.setOneTimeAction(OneTimeAction.DeleteSelectedShapes);
+                break;
+            case KeyCommandType.MOVE_LEFT:
+                this.setOneTimeAction(OneTimeAction.MoveShapes(0, -1));
+                break;
+            case KeyCommandType.MOVE_UP:
+                this.setOneTimeAction(OneTimeAction.MoveShapes(-1, 0));
+                break;
+            case KeyCommandType.MOVE_RIGHT:
+                this.setOneTimeAction(OneTimeAction.MoveShapes(0, 1));
+                break;
+            case KeyCommandType.MOVE_DOWN:
+                this.setOneTimeAction(OneTimeAction.MoveShapes(1, 0));
+                break;
+            case KeyCommandType.FAST_MOVE_LEFT:
+                this.setOneTimeAction(OneTimeAction.MoveShapes(0, -5));
+                break;
+            case KeyCommandType.FAST_MOVE_UP:
+                this.setOneTimeAction(OneTimeAction.MoveShapes(-5, 0));
+                break;
+            case KeyCommandType.FAST_MOVE_RIGHT:
+                this.setOneTimeAction(OneTimeAction.MoveShapes(0, 5));
+                break;
+            case KeyCommandType.FAST_MOVE_DOWN:
+                this.setOneTimeAction(OneTimeAction.MoveShapes(5, 0));
+                break;
+            case KeyCommandType.ADD_RECTANGLE:
+                this.setRetainableAction(RetainableActionType.ADD_RECTANGLE);
+                break;
+            case KeyCommandType.ADD_TEXT:
+                this.setRetainableAction(RetainableActionType.ADD_TEXT);
+                break;
+            case KeyCommandType.ADD_LINE:
+                this.setRetainableAction(RetainableActionType.ADD_LINE);
+                break;
+            case KeyCommandType.SELECTION_MODE:
+                this.setRetainableAction(RetainableActionType.IDLE);
+                break;
+            case KeyCommandType.ENTER_EDIT_MODE:
+                this.setOneTimeAction(OneTimeAction.EditSelectedShapes);
+                break;
+            case KeyCommandType.COPY:
+                this.setOneTimeAction(OneTimeAction.Copy(false));
+                break;
+            case KeyCommandType.CUT:
+                this.setOneTimeAction(OneTimeAction.Copy(true));
+                break;
+            case KeyCommandType.DUPLICATE:
+                this.setOneTimeAction(OneTimeAction.Duplicate);
+                break;
+            case KeyCommandType.COPY_TEXT:
+                this.setOneTimeAction(OneTimeAction.CopyText);
+                break;
+            case KeyCommandType.UNDO:
+                this.setOneTimeAction(OneTimeAction.Undo);
+                break;
+            case KeyCommandType.REDO:
+                this.setOneTimeAction(OneTimeAction.Redo);
+                break;
+            case KeyCommandType.SHIFT_KEY:
+                break;
+            default:
+                break;
+        }
+    }
+
+    setRetainableAction(actionType: RetainableActionType) {
+        this.retainableActionMutableFlow.value = actionType;
+    }
+
+    setOneTimeAction(actionType: OneTimeActionType) {
+        this.oneTimeActionMutableFlow.value = actionType;
+        this.oneTimeActionMutableFlow.value = OneTimeAction.Idle;
+    }
+
+    installDebugCommand() {
+        // TODO: Implement this function
+        // if (!process.env.DEBUG) {
+        //     return;
+        // }
+        // const debugCommand = new DebugCommandController(this.setOneTimeAction.bind(this));
+        // (window as any).cmd = debugCommand.executeCommand.bind(debugCommand);
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/action-manager/one-time-actions.ts b/monosketch-svelte/src/lib/mono/action-manager/one-time-actions.ts
new file mode 100644
index 000000000..bb003cc95
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/action-manager/one-time-actions.ts
@@ -0,0 +1,208 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import type { ChangeOrderType } from "$mono/shape/command/shape-manager-commands";
+import { type TextHorizontalAlign, TextVerticalAlign } from "$mono/shape/extra/style";
+import type { AbstractShape } from "$mono/shape/shape/abstract-shape";
+
+/**
+ * A type for actions related to project management
+ */
+export type ProjectActionType =
+    | { type: 'RenameCurrentProject'; newName: string }
+    | { type: 'NewProject' }
+    | { type: 'ExportSelectedShapes' }
+    | { type: 'SwitchProject'; projectId: string }
+    | { type: 'RemoveProject'; projectId: string }
+    | { type: 'SaveShapesAs' }
+    | { type: 'OpenShapes' };
+
+/**
+ * A type for actions related to app-wise controller
+ */
+export type AppSettingActionType =
+    | { type: 'ChangeFontSize'; isIncreased: boolean }
+    | { type: 'ShowFormatPanel' }
+    | { type: 'HideFormatPanel' }
+    | { type: 'ShowKeyboardShortcuts' };
+
+type TextAlignmentActionType = {
+    type: 'TextAlignment';
+    newHorizontalAlign: TextHorizontalAlign;
+    newVerticalAlign: TextVerticalAlign;
+};
+
+type ChangeShapeBoundActionType = {
+    type: 'ChangeShapeBound';
+    newLeft: number;
+    newTop: number;
+    newWidth: number;
+    newHeight: number
+};
+
+/**
+ * A type which defines all action types which are only have affect once.
+ */
+export type OneTimeActionType =
+    | { type: 'Idle' }
+    | ProjectActionType
+    | AppSettingActionType
+    | { type: 'SelectAllShapes' }
+    | { type: 'DeselectShapes' }
+    | { type: 'DeleteSelectedShapes' }
+    | { type: 'EditSelectedShapes' }
+    | { type: 'EditSelectedShape'; shape: AbstractShape | null }
+    | TextAlignmentActionType
+    | { type: 'MoveShapes'; offsetRow: number; offsetCol: number }
+    | ChangeShapeBoundActionType
+    | { type: 'ChangeShapeFillExtra'; isEnabled: boolean; newFillStyleId: string | null }
+    | { type: 'ChangeShapeBorderExtra'; isEnabled: boolean; newBorderStyleId: string | null }
+    | { type: 'ChangeShapeBorderDashPatternExtra'; dash: number; gap: number; offset: number }
+    | { type: 'ChangeShapeBorderCornerExtra'; isRoundedCorner: boolean }
+    | { type: 'ChangeLineStrokeExtra'; isEnabled: boolean; newStrokeStyleId: string | null }
+    | { type: 'ChangeLineStrokeDashPatternExtra'; dash: number; gap: number; offset: number }
+    | { type: 'ChangeLineStrokeCornerExtra'; isRoundedCorner: boolean }
+    | { type: 'ChangeLineStartAnchorExtra'; isEnabled: boolean; newHeadId: string | null }
+    | { type: 'ChangeLineEndAnchorExtra'; isEnabled: boolean; newHeadId: string | null }
+    | { type: 'ReorderShape'; orderType: ChangeOrderType }
+    | { type: 'Copy'; isRemoveRequired: boolean }
+    | { type: 'Duplicate' }
+    | { type: 'CopyText' }
+    | { type: 'Undo' }
+    | { type: 'Redo' };
+
+export const OneTimeAction = {
+    Idle: { type: 'Idle' } as OneTimeActionType,
+
+    ProjectAction: {
+        RenameCurrentProject: (newName: string): OneTimeActionType => ({ type: 'RenameCurrentProject', newName }),
+        NewProject: { type: 'NewProject' } as OneTimeActionType,
+        ExportSelectedShapes: { type: 'ExportSelectedShapes' } as OneTimeActionType,
+        SwitchProject: (projectId: string): OneTimeActionType => ({ type: 'SwitchProject', projectId }),
+        RemoveProject: (projectId: string): OneTimeActionType => ({ type: 'RemoveProject', projectId }),
+        SaveShapesAs: { type: 'SaveShapesAs' } as OneTimeActionType,
+        OpenShapes: { type: 'OpenShapes' } as OneTimeActionType,
+    },
+
+    AppSettingAction: {
+        ChangeFontSize: (isIncreased: boolean): OneTimeActionType => ({ type: 'ChangeFontSize', isIncreased }),
+        ShowFormatPanel: { type: 'ShowFormatPanel' } as OneTimeActionType,
+        HideFormatPanel: { type: 'HideFormatPanel' } as OneTimeActionType,
+        ShowKeyboardShortcuts: { type: 'ShowKeyboardShortcuts' } as OneTimeActionType,
+    },
+
+    SelectAllShapes: { type: 'SelectAllShapes' } as OneTimeActionType,
+    DeselectShapes: { type: 'DeselectShapes' } as OneTimeActionType,
+    DeleteSelectedShapes: { type: 'DeleteSelectedShapes' } as OneTimeActionType,
+    EditSelectedShapes: { type: 'EditSelectedShapes' } as OneTimeActionType,
+    EditSelectedShape: (shape: AbstractShape | null): OneTimeActionType => ({ type: 'EditSelectedShape', shape }),
+
+    TextAlignment: ({ newHorizontalAlign, newVerticalAlign }: {
+        newHorizontalAlign: TextHorizontalAlign;
+        newVerticalAlign: TextVerticalAlign
+    }): OneTimeActionType => ({
+        type: 'TextAlignment',
+        newHorizontalAlign,
+        newVerticalAlign,
+    }),
+
+    MoveShapes: (offsetRow: number, offsetCol: number): OneTimeActionType => ({
+        type: 'MoveShapes',
+        offsetRow,
+        offsetCol,
+    }),
+    ChangeShapeBound: ({ newLeft, newTop, newWidth, newHeight }: {
+        newLeft: number;
+        newTop: number;
+        newWidth: number;
+        newHeight: number;
+    }): OneTimeActionType => ({
+        type: 'ChangeShapeBound',
+        newLeft,
+        newTop,
+        newWidth,
+        newHeight,
+    }),
+    ChangeShapeFillExtra: ({ isEnabled, newFillStyleId = null }: {
+        isEnabled: boolean;
+        newFillStyleId: string | null
+    }): OneTimeActionType => ({
+        type: 'ChangeShapeFillExtra',
+        isEnabled,
+        newFillStyleId,
+    }),
+    ChangeShapeBorderExtra: ({ isEnabled, newBorderStyleId = null }: {
+        isEnabled: boolean;
+        newBorderStyleId: string | null
+    }): OneTimeActionType => ({
+        type: 'ChangeShapeBorderExtra',
+        isEnabled,
+        newBorderStyleId,
+    }),
+
+    ChangeShapeBorderDashPatternExtra: ({ dash, gap, offset }: {
+        dash: number,
+        gap: number,
+        offset: number
+    }): OneTimeActionType => ({
+        type: 'ChangeShapeBorderDashPatternExtra',
+        dash,
+        gap,
+        offset,
+    }),
+    ChangeShapeBorderCornerExtra: (isRoundedCorner: boolean): OneTimeActionType => ({
+        type: 'ChangeShapeBorderCornerExtra',
+        isRoundedCorner,
+    }),
+
+    ChangeLineStrokeExtra: ({ isEnabled, newStrokeStyleId = null }: {
+        isEnabled: boolean;
+        newStrokeStyleId?: string | null
+    }): OneTimeActionType => ({
+        type: 'ChangeLineStrokeExtra',
+        isEnabled,
+        newStrokeStyleId,
+    }),
+    ChangeLineStrokeDashPatternExtra: ({ dash, gap, offset }: {
+        dash: number,
+        gap: number,
+        offset: number
+    }): OneTimeActionType => ({
+        type: 'ChangeLineStrokeDashPatternExtra',
+        dash,
+        gap,
+        offset,
+    }),
+    ChangeLineStrokeCornerExtra: (isRoundedCorner: boolean): OneTimeActionType => ({
+        type: 'ChangeLineStrokeCornerExtra',
+        isRoundedCorner,
+    }),
+
+    ChangeLineStartAnchorExtra: ({ isEnabled, newHeadId = null }: {
+        isEnabled: boolean;
+        newHeadId?: string | null
+    }): OneTimeActionType => ({
+        type: 'ChangeLineStartAnchorExtra',
+        isEnabled,
+        newHeadId,
+    }),
+
+    ChangeLineEndAnchorExtra: ({ isEnabled, newHeadId = null }: {
+        isEnabled: boolean;
+        newHeadId?: string | null
+    }): OneTimeActionType => ({
+        type: 'ChangeLineEndAnchorExtra',
+        isEnabled,
+        newHeadId,
+    }),
+
+    ReorderShape: (orderType: ChangeOrderType): OneTimeActionType => ({ type: 'ReorderShape', orderType }),
+    Copy: (isRemoveRequired: boolean): OneTimeActionType => ({ type: 'Copy', isRemoveRequired }),
+    Duplicate: { type: 'Duplicate' } as OneTimeActionType,
+
+    CopyText: { type: 'CopyText' } as OneTimeActionType,
+
+    Undo: { type: 'Undo' } as OneTimeActionType,
+    Redo: { type: 'Redo' } as OneTimeActionType,
+};
diff --git a/monosketch-svelte/src/lib/mono/action-manager/retainable-actions.ts b/monosketch-svelte/src/lib/mono/action-manager/retainable-actions.ts
new file mode 100644
index 000000000..cbf9fcd54
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/action-manager/retainable-actions.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { MouseCursor } from "$mono/workspace/mouse/cursor-type";
+
+/**
+ * An enum which defines all action types which repeatedly have effects after triggered.
+ */
+export enum RetainableActionType {
+    IDLE = 'IDLE',
+    ADD_RECTANGLE = 'ADD_RECTANGLE',
+    ADD_TEXT = 'ADD_TEXT',
+    ADD_LINE = 'ADD_LINE'
+}
+
+export const RetainableActionTypeMouseCursor: Record<RetainableActionType, MouseCursor> = {
+    [RetainableActionType.IDLE]: MouseCursor.DEFAULT,
+    [RetainableActionType.ADD_RECTANGLE]: MouseCursor.CROSSHAIR,
+    [RetainableActionType.ADD_TEXT]: MouseCursor.TEXT,
+    [RetainableActionType.ADD_LINE]: MouseCursor.CROSSHAIR,
+};
diff --git a/monosketch-svelte/src/lib/mono/build_environment.ts b/monosketch-svelte/src/lib/mono/build_environment.ts
new file mode 100644
index 000000000..05565a18a
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/build_environment.ts
@@ -0,0 +1,2 @@
+// @ts-expect-error - Safe to ignore
+export const DEBUG_MODE = process.env.NODE_ENV === 'development';
diff --git a/monosketch-svelte/src/lib/mono/common/character.ts b/monosketch-svelte/src/lib/mono/common/character.ts
new file mode 100644
index 000000000..e68985b88
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/common/character.ts
@@ -0,0 +1,17 @@
+// Transparent in both rendering and selection
+import type { Char } from '$libs/char';
+
+export const TRANSPARENT_CHAR: Char = String.fromCharCode(0);
+
+// Transparent in rendering but visible for selection
+export const HALF_TRANSPARENT_CHAR: Char = String.fromCharCode(1);
+
+export const NBSP: Char = String.fromCharCode(0x00A0);
+
+export const isTransparentChar = (char: Char): boolean => {
+    return char === TRANSPARENT_CHAR;
+};
+
+export const isHalfTransparentChar = (char: Char): boolean => {
+    return char === HALF_TRANSPARENT_CHAR;
+};
diff --git a/monosketch-svelte/src/lib/mono/common/constant.ts b/monosketch-svelte/src/lib/mono/common/constant.ts
new file mode 100644
index 000000000..f8c5d172a
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/common/constant.ts
@@ -0,0 +1 @@
+export const APP_CONTEXT = 'app-context';
diff --git a/monosketch-svelte/src/lib/mono/common/platform.ts b/monosketch-svelte/src/lib/mono/common/platform.ts
new file mode 100644
index 000000000..53d0c3134
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/common/platform.ts
@@ -0,0 +1,7 @@
+export const isCommandKeySupported = (): boolean => {
+    return navigator.userAgent.includes('Mac');
+};
+
+export const isCommandKeyOn = (e: KeyboardEvent): boolean => {
+    return isCommandKeySupported() ? e.metaKey : e.ctrlKey;
+};
diff --git a/monosketch-svelte/src/lib/mono/file/mono-file.test.ts b/monosketch-svelte/src/lib/mono/file/mono-file.test.ts
new file mode 100644
index 000000000..e7aa963cb
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/file/mono-file.test.ts
@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Point, PointF } from "$libs/graphics-geo/point";
+import { Extra, MonoFile } from "$mono/file/mono-file";
+import { SerializableLineConnector } from "$mono/shape/serialization/connector";
+import { SerializableGroup, SerializableRectangle } from "$mono/shape/serialization/shapes";
+import { describe, expect, test } from "vitest";
+
+describe("MonoFile serialization", () => {
+    const root = SerializableGroup.create({
+        id: "root",
+        isIdTemporary: false,
+        versionCode: 1,
+        shapes: [
+            SerializableRectangle.EMPTY,
+            SerializableRectangle.EMPTY,
+        ]
+    });
+    const connectors: SerializableLineConnector[] = [
+        SerializableLineConnector.create({
+            lineId: "lineId",
+            anchor: 0,
+            targetId: "targetId",
+            ratio: PointF.create({ left: 0.5, top: 0.6 }),
+            offset: Point.of(10, 20),
+        }),
+        SerializableLineConnector.create({
+            lineId: "lineId1",
+            anchor: 1,
+            targetId: "targetId",
+            ratio: PointF.create({ left: 0.5, top: 0.6 }),
+            offset: Point.of(10, 20),
+        }),
+    ];
+    const extra = Extra.create("Test", Point.of(30, 50));
+    const modifiedTimestampMillis = 1000;
+
+    test("should serialize MonoFile correctly", () => {
+        const monoFile = MonoFile.create(root, connectors, extra, modifiedTimestampMillis);
+        // @ts-expect-error toJson is attached by Jsonizable
+        const json = monoFile.toJson();
+        expect(json).toEqual({
+            // @ts-expect-error toJson is attached by Jsonizable
+            root: root.toJson(),
+            // @ts-expect-error toJson is attached by Jsonizable
+            extra: extra.toJson(),
+            version: 2,
+            modified_timestamp_millis: modifiedTimestampMillis,
+            // @ts-expect-error toJson is attached by Json
+            connectors: connectors.map(connector => connector.toJson()),
+        });
+    });
+
+    test("should deserialize MonoFile correctly", () => {
+        const json = {
+            // @ts-expect-error toJson is attached by Jsonizable
+            root: root.toJson(),
+            // @ts-expect-error toJson is attached by Jsonizable
+            extra: extra.toJson(),
+            version: 2,
+            modified_timestamp_millis: modifiedTimestampMillis,
+            // @ts-expect-error toJson is attached by Json
+            connectors: connectors.map(connector => connector.toJson()),
+        };
+        // @ts-expect-error fromJson is attached by Jsonizable
+        const monoFile = MonoFile.fromJson(json);
+        expect(monoFile).toEqual(MonoFile.create(root, connectors, extra, modifiedTimestampMillis));
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/file/mono-file.ts b/monosketch-svelte/src/lib/mono/file/mono-file.ts
new file mode 100644
index 000000000..d6f95b096
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/file/mono-file.ts
@@ -0,0 +1,83 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Point } from "$libs/graphics-geo/point";
+import {
+    type SerializableLineConnector,
+    SerializableLineConnectorArraySerializer,
+} from "$mono/shape/serialization/connector";
+import { Jsonizable, Serializer, SerialName } from "$mono/shape/serialization/serializable";
+import { SerializableGroup } from "$mono/shape/serialization/shapes";
+
+/**
+ * Version of the mono file
+ *
+ * # Version 0
+ * No mono file format. It was just a serialization of the root group
+ *
+ * # Version 1
+ * The first version of MonoFile.
+ * - root: root group content
+ * - extra:
+ *     - name
+ *     - offset
+ * - version: 1
+ * - modified_timestamp_millis: timestamp in millisecond (local time)
+ *
+ * # Version 2
+ * Include `connectors`
+ * - connectors: list of serialization of line connectors
+ */
+const MONO_FILE_VERSION = 2;
+
+/**
+ * A data class for serializing shape to Json and load shape from Json.
+ */
+@Jsonizable
+export class MonoFile {
+    @SerialName("root")
+        root: SerializableGroup = SerializableGroup.EMPTY;
+    @SerialName("extra")
+        extra: Extra = Extra.create("", Point.ZERO);
+    @SerialName("version")
+        version: number = 0;
+    @SerialName("modified_timestamp_millis")
+        modifiedTimestampMillis: number = 0;
+    @SerialName("connectors")
+    @Serializer(SerializableLineConnectorArraySerializer)
+        connectors: SerializableLineConnector[] = [];
+
+    static create(
+        root: SerializableGroup,
+        connectors: SerializableLineConnector[],
+        extra: Extra,
+        modifiedTimestampMillis: number = Date.now(),
+    ): MonoFile {
+        const file = new MonoFile();
+        file.root = root;
+        file.connectors = connectors;
+        file.extra = extra;
+        file.version = MONO_FILE_VERSION;
+        file.modifiedTimestampMillis = modifiedTimestampMillis;
+        return file;
+    }
+}
+
+@Jsonizable
+export class Extra {
+    @SerialName("name")
+        name: string = "";
+    @SerialName("offset")
+        offset: Point = Point.ZERO;
+
+    private constructor() {
+    }
+
+    static create(name: string, offset: Point): Extra {
+        const extra = new Extra();
+        extra.name = name;
+        extra.offset = offset;
+        return extra;
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/file/shape-serialization-util.test.ts b/monosketch-svelte/src/lib/mono/file/shape-serialization-util.test.ts
new file mode 100644
index 000000000..5df6074ea
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/file/shape-serialization-util.test.ts
@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { describe, expect, test } from "vitest";
+import { ShapeSerializationUtil } from './shape-serialization-util';
+import { SerializableGroup, SerializableRectangle } from '$mono/shape/serialization/shapes';
+import { SerializableLineConnector } from '$mono/shape/serialization/connector';
+import { Point, PointF } from '$libs/graphics-geo/point';
+import { MonoFile, Extra } from './mono-file';
+
+describe('ShapeSerializationUtil', () => {
+    const root = SerializableGroup.create({
+        id: "root",
+        isIdTemporary: false,
+        versionCode: 2,
+        shapes: [
+            SerializableRectangle.EMPTY,
+            SerializableRectangle.EMPTY,
+        ]
+    });
+    const connectors: SerializableLineConnector[] = [
+        SerializableLineConnector.create({
+            lineId: "lineId",
+            anchor: 1,
+            targetId: "targetId",
+            ratio: PointF.create({ left: 0.5, top: 0.6 }),
+            offset: Point.of(10, 20),
+        }),
+        SerializableLineConnector.create({
+            lineId: "lineId1",
+            anchor: 0,
+            targetId: "targetId",
+            ratio: PointF.create({ left: 0.5, top: 0.6 }),
+            offset: Point.of(10, 20),
+        }),
+    ];
+    const extra = Extra.create("Test", Point.of(30, 50));
+    const modifiedTimestampMillis = 1000;
+
+    test('should serialize and deserialize a shape correctly', () => {
+        const json = ShapeSerializationUtil.toShapeJson(root);
+        console.log(json);
+        const deserializedShape = ShapeSerializationUtil.fromShapeJson(json);
+        expect(deserializedShape).toEqual(root);
+    });
+
+    test('should serialize and deserialize connectors correctly', () => {
+        const json = ShapeSerializationUtil.toConnectorsJson(connectors);
+        console.log(json);
+        const deserializedConnectors = ShapeSerializationUtil.fromConnectorsJson(json);
+        expect(deserializedConnectors).toEqual(connectors);
+    });
+
+    test('should serialize and deserialize a MonoFile correctly', () => {
+        const monoFile = MonoFile.create(root, connectors, extra, modifiedTimestampMillis);
+        const json = ShapeSerializationUtil.toMonoFileJson(monoFile);
+        console.log(json);
+        const deserializedMonoFile = ShapeSerializationUtil.fromMonoFileJson(json);
+        expect(deserializedMonoFile).toEqual(monoFile);
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/file/shape-serialization-util.ts b/monosketch-svelte/src/lib/mono/file/shape-serialization-util.ts
new file mode 100644
index 000000000..49b4f07fc
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/file/shape-serialization-util.ts
@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { SerializableGroup, AbstractSerializableShape, deserializeShape } from '$mono/shape/serialization/shapes';
+import {
+    SerializableLineConnector,
+    SerializableLineConnectorArraySerializer,
+} from '$mono/shape/serialization/connector';
+import { Point } from '$libs/graphics-geo/point';
+import { MonoFile, Extra } from './mono-file';
+
+export class ShapeSerializationUtil {
+    static toShapeJson(serializableShape: AbstractSerializableShape): string {
+        // @ts-expect-error toJson is attached by Jsonizable
+        return JSON.stringify(serializableShape.toJson());
+    }
+
+    static fromShapeJson(jsonString: string): AbstractSerializableShape | null {
+        try {
+            const json = JSON.parse(jsonString);
+            return deserializeShape(json);
+        } catch (e) {
+            console.error("Error while restoring shapes");
+            console.error(e);
+            return null;
+        }
+    }
+
+    static toConnectorsJson(connectors: SerializableLineConnector[]): string {
+        return JSON.stringify(SerializableLineConnectorArraySerializer.serialize(connectors));
+    }
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    static fromConnectorsJson(jsonString: string): SerializableLineConnector[] {
+        try {
+            const json = JSON.parse(jsonString) as any[];
+            return SerializableLineConnectorArraySerializer.deserialize(json);
+        } catch (e) {
+            console.error("Error while restoring connectors");
+            console.error(e);
+            return [];
+        }
+    }
+    /* eslint-enable @typescript-eslint/no-explicit-any */
+
+    static toMonoFileJson(monoFile: MonoFile): string {
+        // @ts-expect-error toJson is attached by Jsonizable
+        const json = monoFile.toJson();
+        return JSON.stringify(json);
+    }
+
+    static fromMonoFileJson(jsonString: string): MonoFile | null {
+        try {
+            const json = JSON.parse(jsonString);
+            // @ts-expect-error fromJson is attached by Jsonizable
+            return MonoFile.fromJson(json);
+        } catch (e) {
+            // Fallback to version 0
+            const shape = this.fromShapeJson(jsonString) as SerializableGroup | null;
+            if (shape) {
+                return MonoFile.create(shape, [], Extra.create("", Point.ZERO));
+            } else {
+                return null;
+            }
+        }
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/keycommand/controller.ts b/monosketch-svelte/src/lib/mono/keycommand/controller.ts
new file mode 100644
index 000000000..2dcd55f4b
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/keycommand/controller.ts
@@ -0,0 +1,42 @@
+import { Flow } from '$libs/flow';
+import { type KeyCommand, KeyCommandType } from './interface';
+import { getCommandByType, getCommandByKey } from './keycommands';
+import { DEBUG_MODE } from '../build_environment';
+import { isCommandKeyOn } from '../common/platform';
+
+/**
+ * A controller that emits key commands when a key is pressed.
+ */
+export class KeyCommandController {
+    private _keyCommandMutableFlow = new Flow<KeyCommand>();
+    keyCommandFlow: Flow<KeyCommand> = this._keyCommandMutableFlow.distinctUntilChanged();
+
+    constructor(private body: HTMLElement) {
+        body.onkeydown = this.updateKeyCommand;
+        body.onkeyup = this.resetKeyCommand;
+    }
+
+    private updateKeyCommand = (e: KeyboardEvent) => {
+        // TODO: Resolve keyCode deprecated.
+        const keyCommand =
+            e.target === this.body
+                ? getCommandByKey(e.keyCode, isCommandKeyOn(e), e.shiftKey)
+                : getCommandByType(KeyCommandType.IDLE);
+
+        if (!keyCommand.isKeyEventPropagationAllowed) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        if (DEBUG_MODE) {
+            console.log(`Key command: ${keyCommand.command}`);
+        }
+        this._keyCommandMutableFlow.value = keyCommand;
+        if (keyCommand.isRepeatable) {
+            this._keyCommandMutableFlow.value = getCommandByType(KeyCommandType.IDLE);
+        }
+    };
+
+    private resetKeyCommand = () => {
+        this._keyCommandMutableFlow.value = getCommandByType(KeyCommandType.IDLE);
+    };
+}
diff --git a/monosketch-svelte/src/lib/mono/keycommand/index.ts b/monosketch-svelte/src/lib/mono/keycommand/index.ts
new file mode 100644
index 000000000..ab1b113fe
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/keycommand/index.ts
@@ -0,0 +1,2 @@
+export { KeyCommandType, type KeyCommand } from './interface';
+export { KeyCommandController } from './controller';
diff --git a/monosketch-svelte/src/lib/mono/keycommand/interface.ts b/monosketch-svelte/src/lib/mono/keycommand/interface.ts
new file mode 100644
index 000000000..e17a0f242
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/keycommand/interface.ts
@@ -0,0 +1,82 @@
+/**
+ * An object to contains all handling key-codes.
+ */
+export class Key {
+    static readonly ESC = 27;
+    static readonly SHIFT = 16;
+    static readonly ENTER = 13;
+    static readonly BACKSPACE = 8;
+    static readonly DELETE = 46;
+    static readonly ARROW_LEFT = 37;
+    static readonly ARROW_UP = 38;
+    static readonly ARROW_RIGHT = 39;
+    static readonly ARROW_DOWN = 40;
+    static readonly A = 65;
+    static readonly C = 67;
+    static readonly D = 68;
+    static readonly L = 76;
+    static readonly R = 82;
+    static readonly T = 84;
+    static readonly V = 86;
+    static readonly X = 88;
+    static readonly Z = 90;
+}
+
+interface MetaKeyState {
+    isAccepted(hasKey: boolean): boolean;
+}
+
+export const MetaKeyState: { [key: string]: MetaKeyState } = {
+    ON: {
+        isAccepted: (hasKey: boolean) => hasKey,
+    },
+    OFF: {
+        isAccepted: (hasKey: boolean) => !hasKey,
+    },
+    ANY: {
+        isAccepted: () => true,
+    },
+};
+
+export enum KeyCommandType {
+    IDLE = 'IDLE',
+
+    SELECT_ALL = 'SELECT_ALL',
+    DESELECTION = 'DESELECTION',
+    DELETE = 'DELETE',
+
+    MOVE_LEFT = 'MOVE_LEFT',
+    MOVE_UP = 'MOVE_UP',
+    MOVE_RIGHT = 'MOVE_RIGHT',
+    MOVE_DOWN = 'MOVE_DOWN',
+
+    FAST_MOVE_LEFT = 'FAST_MOVE_LEFT',
+    FAST_MOVE_UP = 'FAST_MOVE_UP',
+    FAST_MOVE_RIGHT = 'FAST_MOVE_RIGHT',
+    FAST_MOVE_DOWN = 'FAST_MOVE_DOWN',
+
+    ADD_RECTANGLE = 'ADD_RECTANGLE',
+    ADD_TEXT = 'ADD_TEXT',
+    ADD_LINE = 'ADD_LINE',
+    ENTER_EDIT_MODE = 'ENTER_EDIT_MODE',
+    SELECTION_MODE = 'SELECTION_MODE',
+
+    COPY = 'COPY',
+    CUT = 'CUT',
+    DUPLICATE = 'DUPLICATE',
+
+    COPY_TEXT = 'COPY_TEXT',
+
+    UNDO = 'UNDO',
+    REDO = 'REDO',
+    SHIFT_KEY = 'SHIFT_KEY',
+}
+
+export interface KeyCommand {
+    command: KeyCommandType;
+    keyCodes: Key[];
+    commandKeyState: MetaKeyState;
+    shiftKeyState: MetaKeyState;
+    isKeyEventPropagationAllowed: boolean;
+    isRepeatable: boolean;
+}
diff --git a/monosketch-svelte/src/lib/mono/keycommand/keycommands.test.ts b/monosketch-svelte/src/lib/mono/keycommand/keycommands.test.ts
new file mode 100644
index 000000000..4f322a12a
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/keycommand/keycommands.test.ts
@@ -0,0 +1,12 @@
+import { expect, test } from 'vitest';
+import { getCommandByType } from './keycommands';
+import { KeyCommandType } from './interface';
+
+test('same size command types and key commands', () => {
+    const keyCommandTypes = Object.values(KeyCommandType);
+    for (const keyCommandType of keyCommandTypes) {
+        const command = getCommandByType(keyCommandType);
+        expect(command, `command of ${keyCommandType} is not defined`).toBeDefined();
+        expect(command.command).toBe(keyCommandType);
+    }
+});
diff --git a/monosketch-svelte/src/lib/mono/keycommand/keycommands.ts b/monosketch-svelte/src/lib/mono/keycommand/keycommands.ts
new file mode 100644
index 000000000..81c16ef87
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/keycommand/keycommands.ts
@@ -0,0 +1,222 @@
+import { Key, type KeyCommand, KeyCommandType, MetaKeyState } from './interface';
+
+const KeyCommandOptionsDefaults: KeyCommand = {
+    command: KeyCommandType.IDLE,
+    keyCodes: [],
+    commandKeyState: MetaKeyState.ANY,
+    shiftKeyState: MetaKeyState.ANY,
+    isKeyEventPropagationAllowed: true,
+    isRepeatable: false,
+};
+
+const KeyCommands: KeyCommand[] = [
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.IDLE,
+    },
+
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.SELECT_ALL,
+        keyCodes: [Key.A],
+        commandKeyState: MetaKeyState.ON,
+        isKeyEventPropagationAllowed: false,
+    },
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.DESELECTION,
+        keyCodes: [Key.ESC],
+    },
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.DELETE,
+        keyCodes: [Key.DELETE, Key.BACKSPACE],
+    },
+
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.MOVE_LEFT,
+        keyCodes: [Key.ARROW_LEFT],
+        shiftKeyState: MetaKeyState.OFF,
+        isRepeatable: true,
+    },
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.MOVE_UP,
+        keyCodes: [Key.ARROW_UP],
+        shiftKeyState: MetaKeyState.OFF,
+        isRepeatable: true,
+    },
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.MOVE_RIGHT,
+        keyCodes: [Key.ARROW_RIGHT],
+        shiftKeyState: MetaKeyState.OFF,
+        isRepeatable: true,
+    },
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.MOVE_DOWN,
+        keyCodes: [Key.ARROW_DOWN],
+        shiftKeyState: MetaKeyState.OFF,
+        isRepeatable: true,
+    },
+
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.FAST_MOVE_LEFT,
+        keyCodes: [Key.ARROW_LEFT],
+        shiftKeyState: MetaKeyState.ON,
+        isRepeatable: true,
+    },
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.FAST_MOVE_UP,
+        keyCodes: [Key.ARROW_UP],
+        shiftKeyState: MetaKeyState.ON,
+        isRepeatable: true,
+    },
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.FAST_MOVE_RIGHT,
+        keyCodes: [Key.ARROW_RIGHT],
+        shiftKeyState: MetaKeyState.ON,
+        isRepeatable: true,
+    },
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.FAST_MOVE_DOWN,
+        keyCodes: [Key.ARROW_DOWN],
+        shiftKeyState: MetaKeyState.ON,
+        isRepeatable: true,
+    },
+
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.ADD_RECTANGLE,
+        keyCodes: [Key.R],
+    },
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.ADD_TEXT,
+        keyCodes: [Key.T],
+    },
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.ADD_LINE,
+        keyCodes: [Key.L],
+    },
+
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.ENTER_EDIT_MODE,
+    },
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.SELECTION_MODE,
+        keyCodes: [Key.V],
+        commandKeyState: MetaKeyState.OFF,
+    },
+
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.COPY,
+        keyCodes: [Key.C],
+        commandKeyState: MetaKeyState.ON,
+        shiftKeyState: MetaKeyState.OFF,
+    },
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.CUT,
+        keyCodes: [Key.X],
+        commandKeyState: MetaKeyState.ON,
+    },
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.DUPLICATE,
+        keyCodes: [Key.D],
+        commandKeyState: MetaKeyState.ON,
+        isKeyEventPropagationAllowed: false,
+    },
+
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.COPY_TEXT,
+        keyCodes: [Key.C],
+        commandKeyState: MetaKeyState.ON,
+        shiftKeyState: MetaKeyState.ON,
+        isKeyEventPropagationAllowed: false,
+    },
+
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.UNDO,
+        keyCodes: [Key.Z],
+        commandKeyState: MetaKeyState.ON,
+        shiftKeyState: MetaKeyState.OFF,
+        isRepeatable: true,
+    },
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.REDO,
+        keyCodes: [Key.Z],
+        commandKeyState: MetaKeyState.ON,
+        shiftKeyState: MetaKeyState.ON,
+        isRepeatable: true,
+    },
+
+    {
+        ...KeyCommandOptionsDefaults,
+        command: KeyCommandType.SHIFT_KEY,
+        keyCodes: [Key.SHIFT],
+    },
+];
+
+const KeyCommandMap: Map<KeyCommandType, KeyCommand> = new Map();
+const KeyCodeToKeyCommandMap: Map<Key, KeyCommand[]> = new Map();
+
+function initKeyToKeyCommandMap() {
+    for (const keyCommand of KeyCommands) {
+        KeyCommandMap.set(keyCommand.command, keyCommand);
+    }
+
+    for (const keyCommand of KeyCommands) {
+        for (const keyCode of keyCommand.keyCodes) {
+            const keyCommands = KeyCodeToKeyCommandMap.get(keyCode);
+            if (keyCommands) {
+                keyCommands.push(keyCommand);
+            } else {
+                KeyCodeToKeyCommandMap.set(keyCode, [keyCommand]);
+            }
+        }
+    }
+}
+
+export function getCommandByKey(
+    key: Key,
+    hasCommandKey: boolean,
+    hasShiftKey: boolean,
+): KeyCommand {
+    if (KeyCodeToKeyCommandMap.size === 0) {
+        initKeyToKeyCommandMap();
+    }
+    const keyCommands = KeyCodeToKeyCommandMap.get(key);
+    if (keyCommands) {
+        for (const command of keyCommands) {
+            if (
+                command.commandKeyState.isAccepted(hasCommandKey) &&
+                command.shiftKeyState.isAccepted(hasShiftKey)
+            ) {
+                return command;
+            }
+        }
+    }
+    return getCommandByType(KeyCommandType.IDLE)!;
+}
+
+export function getCommandByType(base: KeyCommandType): KeyCommand {
+    if (KeyCodeToKeyCommandMap.size === 0) {
+        initKeyToKeyCommandMap();
+    }
+    return KeyCommandMap.get(base)!;
+}
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/bitmap/monobitmap.ts b/monosketch-svelte/src/lib/mono/monobitmap/bitmap/monobitmap.ts
new file mode 100644
index 000000000..4b21e3a3c
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/bitmap/monobitmap.ts
@@ -0,0 +1,213 @@
+import { Size } from '$libs/graphics-geo/size';
+import { type Char } from '$libs/char';
+import { binarySearch, getOrNull, mapIndexedNotNull, zip } from '$libs/sequence';
+import { isHalfTransparentChar, isTransparentChar, TRANSPARENT_CHAR } from '$mono/common/character';
+import { Rect } from '$libs/graphics-geo/rect';
+
+export namespace MonoBitmap {
+    /**
+     * A model class to hold the look of a shape after drawing.
+     * Create new object via [Builder].
+     */
+    export class Bitmap {
+        readonly size: Size;
+
+        constructor(public matrix: Row[]) {
+            if (matrix.length === 0) {
+                this.size = Size.ZERO;
+            } else {
+                this.size = Size.of(matrix[0].size, matrix.length);
+            }
+        }
+
+        isEmpty = (): boolean => this.size.equals(Size.ZERO);
+
+        getVisual = (row: number, column: number): Char =>
+            !this.isEmpty() ? this.matrix[row].getVisual(column) : TRANSPARENT_CHAR;
+
+        getDirection = (row: number, column: number): Char =>
+            !this.isEmpty() ? this.matrix[row].getDirection(column) : TRANSPARENT_CHAR;
+
+        toString(): string {
+            return this.matrix.map((row) => row.toString()).join('\n');
+        }
+    }
+
+    export class Builder {
+        private readonly bound: Rect;
+        private readonly visualMatrix: Char[][];
+        /**
+         * A matrix for storing visual characters.
+         * Except for crossing points, which is identified after combining some information from
+         * the mono board, most of the visual characters will be displayed on the canvas.
+         */
+        private readonly directionMatrix: Char[][];
+
+        constructor(
+            private width: number,
+            private height: number,
+        ) {
+            this.bound = Rect.byLTWH(0, 0, width, height);
+
+            this.visualMatrix = Array.from({ length: height }, () =>
+                Array.from({ length: width }, () => TRANSPARENT_CHAR),
+            );
+
+            this.directionMatrix = Array.from({ length: height }, () =>
+                Array.from({ length: width }, () => TRANSPARENT_CHAR),
+            );
+        }
+
+        put(row: number, column: number, visualChar: Char, directionChar: Char): void {
+            if (row >= 0 && row < this.height && column >= 0 && column < this.width) {
+                this.visualMatrix[row][column] = visualChar;
+
+                // The direction char is only overridden with non-transparent chars.
+                if (directionChar !== TRANSPARENT_CHAR) {
+                    this.directionMatrix[row][column] = directionChar;
+                }
+            }
+        }
+
+        fillAll(char: Char): void {
+            for (let row = 0; row < this.height; row++) {
+                for (let col = 0; col < this.width; col++) {
+                    this.visualMatrix[row][col] = char;
+                    // TODO: Delegate direction char
+                    this.directionMatrix[row][col] = char;
+                }
+            }
+        }
+
+        fillBitmap(row: number, column: number, bitmap: Bitmap): void {
+            if (bitmap.isEmpty()) {
+                return;
+            }
+            const inMatrix = bitmap.matrix;
+
+            const inMatrixBound = Rect.byLTWH(row, column, bitmap.size.width, bitmap.matrix.length);
+
+            const overlap = this.bound.getOverlappedRect(inMatrixBound);
+            if (!overlap) {
+                return;
+            }
+            const { left: startCol, top: startRow } = overlap.position.minus(this.bound.position);
+            const { left: inStartCol, top: inStartRow } = overlap.position.minus(
+                inMatrixBound.position,
+            );
+
+            for (let r = 0; r < overlap.height; r++) {
+                const src = inMatrix[inStartRow + r];
+                const destVisual = this.visualMatrix[startRow + r];
+                const destDirection = this.directionMatrix[startRow + r];
+
+                for (const cell of src.asSequence(inStartCol, inStartCol + overlap.width)) {
+                    const index = cell.index - inStartCol;
+                    const destIndex = startCol + index;
+                    // visualChar from source is always not transparent (0) due to the optimization of Row
+                    if (isApplicable(destVisual[destIndex], cell.visual)) {
+                        destVisual[startCol + index] = cell.visual;
+                    }
+
+                    // TODO: Double check this condition
+                    if (isApplicable(destDirection[destIndex], cell.direction)) {
+                        destDirection[startCol + index] = cell.direction;
+                    }
+                }
+            }
+        }
+
+        toBitmap(): Bitmap {
+            const rows = this.visualMatrix.map(
+                (chars, index) => new Row(chars, this.directionMatrix[index]),
+            );
+            return new Bitmap(rows);
+        }
+    }
+
+    const isApplicable = (oldChar: Char, newChar: Char): boolean => {
+        return (
+            (isTransparentChar(oldChar) && isHalfTransparentChar(newChar)) ||
+            !isHalfTransparentChar(newChar)
+        );
+    };
+
+    /**
+     * A lightweight data structure to represent a row of the matrix.
+     * Only cells that having visible characters will be kept to save the memory. For example, with
+     * inputs:
+     * ```
+     * ab      c
+     * ```
+     * only `[a, b, c]` is kept.
+     */
+    class Row {
+        readonly size: number;
+
+        /**
+         * A list of cells sorted by its [Cell.index].
+         */
+        private readonly sortedCells: Cell[];
+
+        constructor(visualChars: Char[], directionChars: Char[]) {
+            this.size = visualChars.length;
+
+            this.sortedCells = mapIndexedNotNull(
+                zip(visualChars, directionChars),
+                (index, [vChar, dChar]) => {
+                    const isApplicable = !isTransparentChar(vChar) || !isTransparentChar(dChar);
+                    return isApplicable ? new Cell(index, vChar, dChar) : null;
+                },
+            );
+        }
+
+        *asSequence(
+            fromIndexOptional?: number,
+            toExclusiveIndexOptional?: number,
+        ): Generator<Cell> {
+            const fromIndex = fromIndexOptional === undefined ? 0 : fromIndexOptional;
+            const toExclusiveIndex = toExclusiveIndexOptional === undefined ?  this.size : toExclusiveIndexOptional;
+            const foundLow = binarySearch(this.sortedCells, (cell) => cell.index - fromIndex);
+            const low = foundLow >= 0 ? foundLow : -foundLow - 1;
+
+            for (let i = low; i < this.sortedCells.length; i++) {
+                const cell = this.sortedCells[i];
+                if (cell.index >= toExclusiveIndex) {
+                    break;
+                }
+                yield cell;
+            }
+        }
+
+        getVisual(column: number): Char {
+            const cell = this.getCell(column);
+            return cell ? cell.visual : TRANSPARENT_CHAR;
+        }
+
+        getDirection(column: number): Char {
+            const cell = this.getCell(column);
+            return cell ? cell.direction : TRANSPARENT_CHAR;
+        }
+
+        private getCell(column: number): Cell | null {
+            const index = binarySearch(this.sortedCells, (cell) => cell.index - column);
+            return getOrNull(this.sortedCells, index);
+        }
+
+        toString(): string {
+            const list = Array(this.size).fill(' ');
+            for (const cell of this.sortedCells) {
+                list[cell.index] = cell.visual;
+            }
+            return list.join('');
+        }
+    }
+
+    class Cell {
+        constructor(
+            public index: number,
+            public visual: Char,
+            public direction: Char,
+        ) {}
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/board/board.test.ts b/monosketch-svelte/src/lib/mono/monobitmap/board/board.test.ts
new file mode 100644
index 000000000..8bf1bfc6d
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/board/board.test.ts
@@ -0,0 +1,143 @@
+import { beforeEach, describe, expect, test } from 'vitest';
+import { MonoBoard } from '$mono/monobitmap/board/board';
+import { HighlightType, Pixel } from '$mono/monobitmap/board/pixel';
+import { Point } from '$libs/graphics-geo/point';
+import { Rect } from '$libs/graphics-geo/rect';
+import { StringExt } from '$libs/string';
+import trimMargin = StringExt.trimMargin;
+
+describe('MonoBoard', () => {
+    let target: MonoBoard;
+
+    beforeEach(() => {
+        target = new MonoBoard();
+        target.clearAndSetWindow(Rect.byLTWH(-100, -100, 200, 200));
+    });
+
+    test('getSet', () => {
+        const points = [-48, -32, -18, -16, 0, 16, 18, 32, 48].map(
+            (value) => new Point(value, value),
+        );
+
+        points.forEach((point) => {
+            expect(target.get(point.left, point.top)).toBe(Pixel.TRANSPARENT);
+        });
+
+        const chars = '012345678';
+        chars.split('').forEach((char, index) => {
+            target.setPoint(points[index], char, HighlightType.NO);
+        });
+        chars.split('').forEach((char, index) => {
+            expect(target.getPoint(points[index]).visualChar).toBe(char);
+        });
+
+        expect(target.boardCount).toBe(7);
+    });
+
+    test('fillRect', () => {
+        target.fillRect(Rect.byLTWH(1, 1, 3, 3), 'A', HighlightType.NO);
+
+        expect(target.toString()).toStrictEqual(
+            trimMargin(`
+                |                x
+                | AAA            x
+                | AAA            x
+                | AAA            x
+                |                x
+                |                x
+                |                x
+                |                x
+                |                x
+                |                x
+                |                x
+                |                x
+                |                x
+                |                x
+                |                x
+                |                x
+            `.replaceAll('x', '')), // Use x to keep the extra spaces. Otherwise, the spaces will be trimmed due to lint.
+        );
+
+        expect(target.boardCount).toBe(1);
+
+        target.fillRect(Rect.byLTWH(-3, -3, 3, 3), 'B', HighlightType.NO);
+        expect(target.toString()).toStrictEqual(
+            trimMargin(`
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |             BBB                x
+                |             BBB                x
+                |             BBB                x
+                |                                x
+                |                 AAA            x
+                |                 AAA            x
+                |                 AAA            x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+            `.replaceAll('x', '')), // Use x to keep the extra spaces. Otherwise, the spaces will be trimmed due to lint.
+        );
+
+        expect(target.boardCount).toBe(2);
+
+        target.fillRect(Rect.byLTWH(-1, 0, 3, 1), 'C', HighlightType.NO);
+        expect(target.toString()).toStrictEqual(
+            trimMargin(`
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |             BBB                x
+                |             BBB                x
+                |             BBB                x
+                |               CCC              x
+                |                 AAA            x
+                |                 AAA            x
+                |                 AAA            x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                |                                x
+                `.replaceAll('x', '')), // Use x to keep the extra spaces. Otherwise, the spaces will be trimmed due to lint.
+        );
+
+        expect(target.boardCount).toBe(3);
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/board/board.ts b/monosketch-svelte/src/lib/mono/monobitmap/board/board.ts
new file mode 100644
index 000000000..850a0225e
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/board/board.ts
@@ -0,0 +1,223 @@
+import { CrossingResources } from "$mono/monobitmap/board/crossing-resources";
+import { HighlightType, Pixel } from '$mono/monobitmap/board/pixel';
+import { PainterBoard } from '$mono/monobitmap/board/painter-board';
+import { Size } from '$libs/graphics-geo/size';
+import { Rect } from '$libs/graphics-geo/rect';
+import { MapExt } from '$libs/sequence';
+import { Point } from '$libs/graphics-geo/point';
+import { MonoBitmap } from '$mono/monobitmap/bitmap/monobitmap';
+import type { CrossPoint } from '$mono/monobitmap/board/cross-point';
+import type { Char } from '$libs/char';
+import getCrossingChar = CrossingResources.getCrossingChar;
+
+const STANDARD_UNIT_SIZE = Size.of(16, 16);
+
+/**
+ * An interface for the board of the Mono Bitmap.
+ */
+export class MonoBoard {
+    private readonly painterBoards: Map<BoardAddress, PainterBoard> = new Map();
+    private windowBound: Rect = Rect.ZERO;
+
+    get boardCount(): number {
+        return this.painterBoards.size;
+    }
+
+    constructor(private readonly unitSize: Size = STANDARD_UNIT_SIZE) {
+    }
+
+    clearAndSetWindow = (bound: Rect) => {
+        this.windowBound = bound;
+        this.painterBoards.clear();
+        const affectedBoards = this.getOrCreateOverlappedBoards(bound, false);
+        for (const board of affectedBoards) {
+            board.clear();
+        }
+    };
+
+    fillBitmap = (position: Point, bitmap: MonoBitmap.Bitmap, highlight: HighlightType) => {
+        const rect = new Rect(position, bitmap.size);
+        const affectedBoards = this.getOrCreateOverlappedBoards(rect, true);
+
+        const crossingPoints: CrossPoint[] = [];
+        for (const board of affectedBoards) {
+            crossingPoints.push(...board.fillBitmap(position, bitmap, highlight));
+        }
+
+        this.drawCrossingPoints(crossingPoints, highlight);
+    };
+
+    // This method is for testing only
+    fillRect = (rect: Rect, char: Char, highlight: HighlightType) => {
+        const affectedBoards = this.getOrCreateOverlappedBoards(rect, true);
+        for (const board of affectedBoards) {
+            board.fillRect(rect, char, highlight);
+        }
+    };
+
+    private drawCrossingPoints = (crossingPoints: CrossPoint[], highlight: HighlightType) => {
+        for (const charPoint of crossingPoints) {
+            const left = charPoint.boardColumn;
+            const top = charPoint.boardRow;
+            const currentPixel = this.get(left, top);
+            const crossingChar = getCrossingChar(
+                // Upper
+                charPoint.visualChar,
+                charPoint.leftChar,
+                charPoint.rightChar,
+                charPoint.topChar,
+                charPoint.bottomChar,
+                // Lower
+                this.get(left, top).visualChar,
+                this.get(left - 1, top).directionChar,
+                this.get(left + 1, top).directionChar,
+                this.get(left, top - 1).directionChar,
+                this.get(left, top + 1).directionChar,
+            );
+            const visualChar = crossingChar ?? charPoint.visualChar;
+            const directionChar = crossingChar ?? charPoint.directionChar;
+            currentPixel.set(visualChar, directionChar, highlight);
+        }
+    };
+
+    getPoint = (position: Point): Pixel => {
+        return this.get(position.left, position.top);
+    };
+
+    get = (left: number, top: number): Pixel => {
+        const address = this.toBoardAddress(left, top);
+        const board = this.painterBoards.get(address);
+        const pixel = board ? board.get(left, top) : null;
+        return pixel ? pixel : Pixel.TRANSPARENT;
+    };
+
+    set = (left: number, top: number, char: Char, highlight: HighlightType) => {
+        this.getOrCreateBoard(left, top, true)
+            ?.setPoint(new Point(left, top), char, highlight);
+    };
+
+    setPoint = (position: Point, char: Char, highlight: HighlightType) => {
+        this.set(position.left, position.top, char, highlight);
+    };
+
+    private getOrCreateOverlappedBoards = (
+        rect: Rect,
+        isCreatedRequired: boolean,
+    ): PainterBoard[] => {
+        const affectedBoards: PainterBoard[] = [];
+        const { width: unitWidth, height: unitHeight } = this.unitSize;
+
+        const leftIndex = Math.floor(rect.left / unitWidth);
+        const rightIndex = Math.floor(rect.right / unitWidth);
+        const topIndex = Math.floor(rect.top / unitHeight);
+        const bottomIndex = Math.floor(rect.bottom / unitHeight);
+
+        for (let left = leftIndex; left <= rightIndex; left++) {
+            for (let top = topIndex; top <= bottomIndex; top++) {
+                const board = this.getOrCreateBoard(
+                    left * unitWidth,
+                    top * unitHeight,
+                    isCreatedRequired,
+                );
+
+                if (board) {
+                    affectedBoards.push(board);
+                }
+            }
+        }
+
+        return affectedBoards;
+    };
+
+    private getOrCreateBoard = (
+        left: number,
+        top: number,
+        isCreatedRequired: boolean,
+    ): PainterBoard | null => {
+        const address = this.toBoardAddress(left, top);
+        const board = isCreatedRequired
+            ? MapExt.getOrPut(this.painterBoards, address, () => this.createNewBoard(address))
+            : this.painterBoards.get(address);
+        if (!board) {
+            return null;
+        }
+        return this.windowBound.isOverlapped(board.getBound()) ? board : null;
+    };
+
+    private createNewBoard = (address: BoardAddress): PainterBoard => {
+        const newBoardPosition = new Point(
+            address.columnIndex * this.unitSize.width,
+            address.rowIndex * this.unitSize.height,
+        );
+        const bound = new Rect(newBoardPosition, this.unitSize);
+        return new PainterBoard(bound);
+    };
+
+    private toBoardAddress = (left: number, top: number): BoardAddress => {
+        const rowIndex = Math.floor(top / this.unitSize.height);
+        const columnIndex = Math.floor(left / this.unitSize.width);
+        return BoardAddressManager.get(rowIndex, columnIndex);
+    };
+
+    toString = (): string => {
+        if (this.painterBoards.size === 0) {
+            return '';
+        }
+        const left = Math.min(
+            ...Array.from(this.painterBoards.keys(), (point) => point.columnIndex),
+        );
+        const right =
+            Math.max(...Array.from(this.painterBoards.keys(), (point) => point.columnIndex)) + 1;
+        const top = Math.min(...Array.from(this.painterBoards.keys(), (point) => point.rowIndex));
+        const bottom =
+            Math.max(...Array.from(this.painterBoards.keys(), (point) => point.rowIndex)) + 1;
+        const rect = Rect.byLTWH(
+            left * this.unitSize.width,
+            top * this.unitSize.height,
+            (right - left) * this.unitSize.width,
+            (bottom - top) * this.unitSize.height,
+        );
+        const painterBoard = new PainterBoard(rect);
+
+        Array.from(this.painterBoards.values()).forEach((pb) => painterBoard.fill(pb));
+
+        return painterBoard.toString();
+    };
+
+    toStringInBound = (bound: Rect): string => {
+        const painterBoard = new PainterBoard(bound);
+        Array.from(this.painterBoards.values()).forEach((pb) => painterBoard.fill(pb));
+        return painterBoard.toString();
+    };
+}
+
+type BoardAddress = {
+    rowIndex: number;
+    columnIndex: number;
+};
+
+class BoardAddressManager {
+    private static readonly addressMap = new Map<number, Map<number, BoardAddress>>();
+
+    static {
+        const addressMap = BoardAddressManager.addressMap;
+        for (let rowIndex = -4; rowIndex < 10; rowIndex++) {
+            addressMap.set(rowIndex, new Map<number, BoardAddress>());
+            for (let columnIndex = -4; columnIndex < 16; columnIndex++) {
+                addressMap.get(rowIndex)!.set(columnIndex, { rowIndex, columnIndex });
+            }
+        }
+    }
+
+    static get(rowIndex: number, columnIndex: number): BoardAddress {
+        const addressMap = BoardAddressManager.addressMap;
+        if (!addressMap.has(rowIndex)) {
+            addressMap.set(rowIndex, new Map<number, BoardAddress>());
+        }
+        const row = addressMap.get(rowIndex)!;
+        if (!row.has(columnIndex)) {
+            row.set(columnIndex, { rowIndex, columnIndex });
+        }
+        return row.get(columnIndex)!;
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/board/cross-point.ts b/monosketch-svelte/src/lib/mono/monobitmap/board/cross-point.ts
new file mode 100644
index 000000000..be2dac25f
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/board/cross-point.ts
@@ -0,0 +1,22 @@
+import type { Char } from '$libs/char';
+
+/**
+ * A data class that stores information of a cross point when drawing a bitmap with
+ * [PainterBoard].
+ * CrossPoint will then be drawn to the board after non-crossing pixels are drawn.
+ *
+ * - [boardRow] and [boardColumn] are the location of point on the board.
+ * - [visualChar] is the character at the crossing point
+ * - [leftChar], [rightChar], [topChar], and [bottomChar] are 4 characters around the
+ * crossing point
+ */
+export interface CrossPoint {
+    boardRow: number;
+    boardColumn: number;
+    visualChar: Char;
+    directionChar: Char;
+    leftChar: Char;
+    rightChar: Char;
+    topChar: Char;
+    bottomChar: Char;
+}
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/board/crossing-resources.test.ts b/monosketch-svelte/src/lib/mono/monobitmap/board/crossing-resources.test.ts
new file mode 100644
index 000000000..3758720fb
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/board/crossing-resources.test.ts
@@ -0,0 +1,101 @@
+import { describe, test } from 'vitest';
+
+// This file is for testing a new idea for identifying the crossing point.
+// Currently, the crossing point is identified by a Database of characters but this is hard to
+// maintain.
+// The new idea uses masks to identify the crossing point.
+// The mask is a 4-bit number that represents the direction of the crossing point and its 4 sides.
+// 1 crossing point is created by 2 overlapping characters using `bit-or` operator.
+// 4 sides identifies a mask with bit-or operator.
+// The mask is created by the 2 characters `bit-and` their 4 surrounding characters.
+
+const surroundLeftChars = '─┌└┬┴├┼';
+const surroundRightChars = '─┐┘┬┴┤┼';
+const surroundTopChars = '│┌┐┬├┼';
+const surroundBottomChars = '│└┘┴┤┼';
+
+const M_LEFT = 0b1;
+const M_RIGHT = 0b10;
+const M_TOP = 0b100;
+const M_BOTTOM = 0b1000;
+const M_VERTICAL = M_TOP | M_BOTTOM;
+const M_HORIZONTAL = M_LEFT | M_RIGHT;
+
+const MASK_TO_CHAR: Map<number, string> = (() => {
+    const result = new Map<number, string>();
+    result.set(M_HORIZONTAL, '─');
+    result.set(M_VERTICAL, '│');
+    result.set(M_LEFT | M_VERTICAL, '┤');
+    result.set(M_RIGHT | M_VERTICAL, '├');
+    result.set(M_HORIZONTAL | M_TOP, '┴');
+    result.set(M_HORIZONTAL | M_BOTTOM, '┬');
+    result.set(M_LEFT | M_TOP, '┘');
+    result.set(M_LEFT | M_BOTTOM, '┐');
+    result.set(M_RIGHT | M_TOP, '└');
+    result.set(M_RIGHT | M_BOTTOM, '┌');
+    result.set(M_HORIZONTAL | M_VERTICAL, '┼');
+    return result;
+})();
+
+const identifySurroundMask = (left: string, right: string, top: string, bottom: string): number => {
+    let result = 0;
+    if (surroundLeftChars.includes(left)) {
+        result |= M_LEFT;
+    }
+    if (surroundRightChars.includes(right)) {
+        result |= M_RIGHT;
+    }
+    if (surroundTopChars.includes(top)) {
+        result |= M_TOP;
+    }
+    if (surroundBottomChars.includes(bottom)) {
+        result |= M_BOTTOM;
+    }
+    return result;
+};
+
+const identifyInnerMask = (char: string): number => {
+    let result = 0;
+    // inner opposite to surround
+    if (surroundLeftChars.includes(char)) {
+        result |= M_RIGHT;
+    }
+    // inner opposite to surround
+    if (surroundRightChars.includes(char)) {
+        result |= M_LEFT;
+    }
+    // inner opposite to surround
+    if (surroundTopChars.includes(char)) {
+        result |= M_BOTTOM;
+    }
+    // inner opposite to surround
+    if (surroundBottomChars.includes(char)) {
+        result |= M_TOP;
+    }
+    return result;
+};
+
+const directionMask = (char1: string, char2: string, left: string, right: string, top: string, bottom: string): number => {
+    const mask1 = identifyInnerMask(char1);
+    const mask2 = identifyInnerMask(char2);
+    console.log(toBinaryString(mask1), MASK_TO_CHAR.get(mask1), toBinaryString(mask2), MASK_TO_CHAR.get(mask2));
+    const inner = mask1 | mask2;
+    const surround = identifySurroundMask(left, right, top, bottom);
+    console.log(toBinaryString(inner), MASK_TO_CHAR.get(inner), toBinaryString(surround));
+    const result = inner & surround;
+    console.log(toBinaryString(result));
+    return result;
+};
+
+function toBinaryString(num: number): string {
+    const text = num.toString(2);
+    const missing = 8 - text.length;
+    return '0'.repeat(missing) + text;
+}
+
+describe('CrossingResources', () => {
+    test('try new approach', () => {
+        const res = directionMask('─', '│', '─', '─', '│', '│');
+        console.log(MASK_TO_CHAR.get(res));
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/board/crossing-resources.ts b/monosketch-svelte/src/lib/mono/monobitmap/board/crossing-resources.ts
new file mode 100644
index 000000000..61643a1d0
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/board/crossing-resources.ts
@@ -0,0 +1,276 @@
+import type { Char } from '$libs/char';
+import { DEBUG_MODE } from "$mono/build_environment";
+
+const DEBUG = false;
+
+export namespace CrossingResources {
+    const STANDARDIZED_CHARS: { [key: string]: string } = {
+        '-': '─',
+        '|': '│',
+        '+': '┼',
+        '╮': '┐',
+        '╭': '┌',
+        '╯': '┘',
+        '╰': '└',
+    };
+
+    // Constants representing bit masks for directions (single lines)
+    const MASK_SINGLE_LEFT = 0b0001;
+    const MASK_SINGLE_RIGHT = 0b0010;
+    const MASK_SINGLE_TOP = 0b0100;
+    const MASK_SINGLE_BOTTOM = 0b1000;
+    const MASK_SINGLE_HORIZONTAL = MASK_SINGLE_LEFT | MASK_SINGLE_RIGHT;
+    const MASK_SINGLE_VERTICAL = MASK_SINGLE_TOP | MASK_SINGLE_BOTTOM;
+    const MASK_SINGLE_CROSS = MASK_SINGLE_HORIZONTAL | MASK_SINGLE_VERTICAL;
+
+    // Constants representing bit masks for directions (bold lines)
+    const MASK_BOLD_LEFT = MASK_SINGLE_LEFT << 4; // Left-shift by 4 for bold lines
+    const MASK_BOLD_RIGHT = MASK_SINGLE_RIGHT << 4;
+    const MASK_BOLD_TOP = MASK_SINGLE_TOP << 4;
+    const MASK_BOLD_BOTTOM = MASK_SINGLE_BOTTOM << 4;
+    const MASK_BOLD_HORIZONTAL = MASK_SINGLE_HORIZONTAL << 4;
+    const MASK_BOLD_VERTICAL = MASK_SINGLE_VERTICAL << 4;
+    const MASK_BOLD_CROSS = MASK_SINGLE_CROSS << 4;
+
+    // Constants representing bit masks for directions (double lines)
+    const MASK_DOUBLE_LEFT = MASK_SINGLE_LEFT << 8; // Left-shift by 8 for double lines
+    const MASK_DOUBLE_RIGHT = MASK_SINGLE_RIGHT << 8;
+    const MASK_DOUBLE_TOP = MASK_SINGLE_TOP << 8;
+    const MASK_DOUBLE_BOTTOM = MASK_SINGLE_BOTTOM << 8;
+    const MASK_DOUBLE_HORIZONTAL = MASK_SINGLE_HORIZONTAL << 8;
+    const MASK_DOUBLE_VERTICAL = MASK_SINGLE_VERTICAL << 8;
+    const MASK_DOUBLE_CROSS = MASK_SINGLE_CROSS << 8;
+
+    // Constants representing combined masks for all line styles (single, bold, double)
+    const MASK_LEFT = MASK_SINGLE_LEFT | MASK_BOLD_LEFT | MASK_DOUBLE_LEFT;
+    const MASK_RIGHT = MASK_SINGLE_RIGHT | MASK_BOLD_RIGHT | MASK_DOUBLE_RIGHT;
+    const MASK_TOP = MASK_SINGLE_TOP | MASK_BOLD_TOP | MASK_DOUBLE_TOP;
+    const MASK_BOTTOM = MASK_SINGLE_BOTTOM | MASK_BOLD_BOTTOM | MASK_DOUBLE_BOTTOM;
+    const MASK_CROSS = MASK_SINGLE_CROSS | MASK_BOLD_CROSS | MASK_DOUBLE_CROSS;
+
+    // Map of characters to their corresponding bit masks
+    const CHAR_TO_MASK_MAP: { [key: string]: number } = {
+        '─': MASK_SINGLE_HORIZONTAL,
+        '│': MASK_SINGLE_VERTICAL,
+        '┘': (MASK_SINGLE_LEFT | MASK_SINGLE_TOP),
+        '┐': (MASK_SINGLE_LEFT | MASK_SINGLE_BOTTOM),
+        '┤': (MASK_SINGLE_LEFT | MASK_SINGLE_VERTICAL),
+        '└': (MASK_SINGLE_RIGHT | MASK_SINGLE_TOP),
+        '┌': (MASK_SINGLE_RIGHT | MASK_SINGLE_BOTTOM),
+        '├': (MASK_SINGLE_RIGHT | MASK_SINGLE_VERTICAL),
+        '┴': (MASK_SINGLE_HORIZONTAL | MASK_SINGLE_TOP),
+        '┬': (MASK_SINGLE_HORIZONTAL | MASK_SINGLE_BOTTOM),
+        '┼': (MASK_SINGLE_HORIZONTAL | MASK_SINGLE_VERTICAL),
+
+        '━': MASK_BOLD_HORIZONTAL,
+        '┃': MASK_BOLD_VERTICAL,
+        '┛': (MASK_BOLD_LEFT | MASK_BOLD_TOP),
+        '┓': (MASK_BOLD_LEFT | MASK_BOLD_BOTTOM),
+        '┫': (MASK_BOLD_LEFT | MASK_BOLD_VERTICAL),
+        '┗': (MASK_BOLD_RIGHT | MASK_BOLD_TOP),
+        '┏': (MASK_BOLD_RIGHT | MASK_BOLD_BOTTOM),
+        '┣': (MASK_BOLD_RIGHT | MASK_BOLD_VERTICAL),
+        '┻': (MASK_BOLD_HORIZONTAL | MASK_BOLD_TOP),
+        '┳': (MASK_BOLD_HORIZONTAL | MASK_BOLD_BOTTOM),
+        '╋': (MASK_BOLD_HORIZONTAL | MASK_BOLD_VERTICAL),
+
+        '═': MASK_DOUBLE_HORIZONTAL,
+        '║': MASK_DOUBLE_VERTICAL,
+        '╝': (MASK_DOUBLE_LEFT | MASK_DOUBLE_TOP),
+        '╗': (MASK_DOUBLE_LEFT | MASK_DOUBLE_BOTTOM),
+        '╣': (MASK_DOUBLE_LEFT | MASK_DOUBLE_VERTICAL),
+        '╚': (MASK_DOUBLE_RIGHT | MASK_DOUBLE_TOP),
+        '╔': (MASK_DOUBLE_RIGHT | MASK_DOUBLE_BOTTOM),
+        '╠': (MASK_DOUBLE_RIGHT | MASK_DOUBLE_VERTICAL),
+        '╩': (MASK_DOUBLE_HORIZONTAL | MASK_DOUBLE_TOP),
+        '╦': (MASK_DOUBLE_HORIZONTAL | MASK_DOUBLE_BOTTOM),
+        '╬': (MASK_DOUBLE_HORIZONTAL | MASK_DOUBLE_VERTICAL),
+
+        // Complex (SINGLE, BOLD) combinations
+        '╼': (MASK_SINGLE_LEFT | MASK_BOLD_RIGHT),
+        '╾': (MASK_BOLD_LEFT | MASK_SINGLE_RIGHT),
+
+        '╽': (MASK_SINGLE_TOP | MASK_BOLD_BOTTOM),
+        '╿': (MASK_BOLD_TOP | MASK_SINGLE_BOTTOM),
+
+        '┚': (MASK_SINGLE_LEFT | MASK_BOLD_TOP),
+        '┙': (MASK_BOLD_LEFT | MASK_SINGLE_TOP),
+
+        '┒': (MASK_SINGLE_LEFT | MASK_BOLD_BOTTOM),
+        '┑': (MASK_BOLD_LEFT | MASK_SINGLE_BOTTOM),
+
+        '┨': (MASK_SINGLE_LEFT | MASK_BOLD_TOP | MASK_BOLD_BOTTOM),
+        '┦': (MASK_SINGLE_LEFT | MASK_BOLD_TOP | MASK_SINGLE_BOTTOM),
+        '┧': (MASK_SINGLE_LEFT | MASK_SINGLE_TOP | MASK_BOLD_BOTTOM),
+
+        '┥': (MASK_BOLD_LEFT | MASK_SINGLE_TOP | MASK_SINGLE_BOTTOM),
+        '┩': (MASK_BOLD_LEFT | MASK_BOLD_TOP | MASK_SINGLE_BOTTOM),
+        '┪': (MASK_BOLD_LEFT | MASK_SINGLE_TOP | MASK_BOLD_BOTTOM),
+
+        '┖': (MASK_SINGLE_RIGHT | MASK_BOLD_TOP),
+        '┕': (MASK_BOLD_RIGHT | MASK_SINGLE_TOP),
+
+        '┎': (MASK_SINGLE_RIGHT | MASK_BOLD_BOTTOM),
+        '┍': (MASK_BOLD_RIGHT | MASK_SINGLE_BOTTOM),
+
+        '┠': (MASK_SINGLE_RIGHT | MASK_BOLD_TOP | MASK_BOLD_BOTTOM),
+        '┞': (MASK_SINGLE_RIGHT | MASK_BOLD_TOP | MASK_SINGLE_BOTTOM),
+        '┟': (MASK_SINGLE_RIGHT | MASK_SINGLE_TOP | MASK_BOLD_BOTTOM),
+
+        '┝': (MASK_BOLD_RIGHT | MASK_SINGLE_TOP | MASK_SINGLE_BOTTOM),
+        '┡': (MASK_BOLD_RIGHT | MASK_BOLD_TOP | MASK_SINGLE_BOTTOM),
+        '┢': (MASK_BOLD_RIGHT | MASK_SINGLE_TOP | MASK_BOLD_BOTTOM),
+
+        '┷': (MASK_BOLD_LEFT | MASK_BOLD_RIGHT | MASK_SINGLE_TOP),
+        '┶': (MASK_SINGLE_LEFT | MASK_BOLD_RIGHT | MASK_SINGLE_TOP),
+        '┵': (MASK_BOLD_LEFT | MASK_SINGLE_RIGHT | MASK_SINGLE_TOP),
+
+        '┸': (MASK_SINGLE_LEFT | MASK_SINGLE_RIGHT | MASK_BOLD_TOP),
+        '┹': (MASK_BOLD_LEFT | MASK_SINGLE_RIGHT | MASK_BOLD_TOP),
+        '┺': (MASK_SINGLE_LEFT | MASK_BOLD_RIGHT | MASK_BOLD_TOP),
+
+        '┯': (MASK_BOLD_LEFT | MASK_BOLD_RIGHT | MASK_SINGLE_BOTTOM),
+        '┭': (MASK_BOLD_LEFT | MASK_SINGLE_RIGHT | MASK_SINGLE_BOTTOM),
+        '┮': (MASK_SINGLE_LEFT | MASK_BOLD_RIGHT | MASK_SINGLE_BOTTOM),
+
+        '┰': (MASK_SINGLE_LEFT | MASK_SINGLE_RIGHT | MASK_BOLD_BOTTOM),
+        '┱': (MASK_BOLD_LEFT | MASK_SINGLE_RIGHT | MASK_BOLD_BOTTOM),
+        '┲': (MASK_SINGLE_LEFT | MASK_BOLD_RIGHT | MASK_BOLD_BOTTOM),
+
+        '┽': (MASK_BOLD_LEFT | MASK_SINGLE_RIGHT | MASK_SINGLE_TOP | MASK_SINGLE_BOTTOM),
+        '┾': (MASK_SINGLE_LEFT | MASK_BOLD_RIGHT | MASK_SINGLE_TOP | MASK_SINGLE_BOTTOM),
+        '╀': (MASK_SINGLE_LEFT | MASK_SINGLE_RIGHT | MASK_BOLD_TOP | MASK_SINGLE_BOTTOM),
+        '╁': (MASK_SINGLE_LEFT | MASK_SINGLE_RIGHT | MASK_SINGLE_TOP | MASK_BOLD_BOTTOM),
+
+        '╂': (MASK_SINGLE_LEFT | MASK_SINGLE_RIGHT | MASK_BOLD_TOP | MASK_BOLD_BOTTOM),
+        '┿': (MASK_BOLD_LEFT | MASK_BOLD_RIGHT | MASK_SINGLE_TOP | MASK_SINGLE_BOTTOM),
+        '╃': (MASK_BOLD_LEFT | MASK_SINGLE_RIGHT | MASK_BOLD_TOP | MASK_SINGLE_BOTTOM),
+        '╄': (MASK_SINGLE_LEFT | MASK_BOLD_RIGHT | MASK_BOLD_TOP | MASK_SINGLE_BOTTOM),
+        '╅': (MASK_BOLD_LEFT | MASK_SINGLE_RIGHT | MASK_SINGLE_TOP | MASK_BOLD_BOTTOM),
+        '╆': (MASK_SINGLE_LEFT | MASK_BOLD_RIGHT | MASK_SINGLE_TOP | MASK_BOLD_BOTTOM),
+
+        '╇': (MASK_BOLD_LEFT | MASK_BOLD_RIGHT | MASK_BOLD_TOP | MASK_SINGLE_BOTTOM),
+        '╈': (MASK_BOLD_LEFT | MASK_BOLD_RIGHT | MASK_SINGLE_TOP | MASK_BOLD_BOTTOM),
+        '╉': (MASK_BOLD_LEFT | MASK_SINGLE_RIGHT | MASK_BOLD_TOP | MASK_BOLD_BOTTOM),
+        '╊': (MASK_SINGLE_LEFT | MASK_BOLD_RIGHT | MASK_BOLD_TOP | MASK_BOLD_BOTTOM),
+
+        // Complex (SINGLE, DOUBLE) combinations
+        '╒': (MASK_DOUBLE_RIGHT | MASK_SINGLE_BOTTOM),
+        '╓': (MASK_SINGLE_RIGHT | MASK_DOUBLE_BOTTOM),
+
+        '╕': (MASK_DOUBLE_LEFT | MASK_SINGLE_BOTTOM),
+        '╖': (MASK_SINGLE_LEFT | MASK_DOUBLE_BOTTOM),
+
+        '╘': (MASK_DOUBLE_RIGHT | MASK_SINGLE_TOP),
+        '╙': (MASK_SINGLE_RIGHT | MASK_DOUBLE_TOP),
+
+        '╛': (MASK_DOUBLE_LEFT | MASK_SINGLE_TOP),
+        '╜': (MASK_SINGLE_LEFT | MASK_DOUBLE_TOP),
+
+        '╞': (MASK_DOUBLE_RIGHT | MASK_SINGLE_TOP | MASK_SINGLE_BOTTOM),
+        '╟': (MASK_SINGLE_RIGHT | MASK_DOUBLE_TOP | MASK_DOUBLE_BOTTOM),
+
+        '╡': (MASK_DOUBLE_LEFT | MASK_SINGLE_TOP | MASK_SINGLE_BOTTOM),
+        '╢': (MASK_SINGLE_LEFT | MASK_DOUBLE_TOP | MASK_DOUBLE_BOTTOM),
+
+        '╤': (MASK_DOUBLE_LEFT | MASK_DOUBLE_RIGHT | MASK_SINGLE_BOTTOM),
+        '╥': (MASK_SINGLE_LEFT | MASK_SINGLE_RIGHT | MASK_DOUBLE_BOTTOM),
+
+        '╧': (MASK_DOUBLE_LEFT | MASK_DOUBLE_RIGHT | MASK_SINGLE_TOP),
+        '╨': (MASK_SINGLE_LEFT | MASK_SINGLE_RIGHT | MASK_DOUBLE_TOP),
+
+        '╪': (MASK_DOUBLE_LEFT | MASK_DOUBLE_RIGHT | MASK_SINGLE_TOP | MASK_SINGLE_BOTTOM),
+        '╫': (MASK_SINGLE_LEFT | MASK_SINGLE_RIGHT | MASK_DOUBLE_TOP | MASK_DOUBLE_BOTTOM),
+    };
+
+    const MASK_TO_CHAR_MAP: { [key: number]: Char } = Object.fromEntries(
+        Object.entries(CHAR_TO_MASK_MAP).map(([key, value]) => [value, key]),
+    );
+
+    const standardize = (char: Char): Char => STANDARDIZED_CHARS[char] ?? char;
+
+    export const hasLeft = (char: Char): boolean => getCharMask(standardize(char), MASK_RIGHT) > 0;
+
+    export const hasRight = (char: Char): boolean => getCharMask(standardize(char), MASK_LEFT) > 0;
+
+    export const hasTop = (char: Char): boolean => getCharMask(standardize(char), MASK_BOTTOM) > 0;
+
+    export const hasBottom = (char: Char): boolean => getCharMask(standardize(char), MASK_TOP) > 0;
+
+    export const isConnectableChar = (char: Char): boolean => (CHAR_TO_MASK_MAP[char] ?? 0) > 0;
+
+    export function getCrossingChar(
+        upper: string,
+        adjacentLeftUpper: string,
+        adjacentRightUpper: string,
+        adjacentTopUpper: string,
+        adjacentBottomUpper: string,
+        lower: string,
+        adjacentLeftLower: string,
+        adjacentRightLower: string,
+        adjacentTopLower: string,
+        adjacentBottomLower: string,
+    ): string | null {
+        const maskUpper = getCharMask(upper, MASK_CROSS);
+        // Directions exist in the upper char exclude the direction in the lower char.
+        const maskLower = getCharMask(
+            lower,
+            createExcludeMask(maskUpper),
+        );
+
+        const maskLeft =
+            (hasLeft(adjacentLeftUpper) || hasLeft(adjacentLeftLower)) ? MASK_LEFT : 0;
+        const maskRight =
+            (hasRight(adjacentRightUpper) || hasRight(adjacentRightLower)) ? MASK_RIGHT : 0;
+        const maskTop =
+            (hasTop(adjacentTopUpper) || hasTop(adjacentTopLower)) ? MASK_TOP : 0;
+        const maskBottom =
+            (hasBottom(adjacentBottomUpper) || hasBottom(adjacentBottomLower)) ? MASK_BOTTOM : 0;
+
+        const innerMask = maskUpper | maskLower;
+        const outerMask = maskLeft | maskRight | maskTop | maskBottom;
+        const mask = innerMask & outerMask;
+
+        if (DEBUG && DEBUG_MODE) {
+            console.log(
+                [
+                    `${upper}:${maskToString(maskUpper)}`,
+                    `${lower}:${maskToString(maskLower)}`,
+                    `-> ${maskToString(innerMask)}`,
+                ].toString(),
+                [
+                    `${adjacentLeftUpper}:${adjacentLeftLower}:${maskToString(maskLeft)}`,
+                    `${adjacentRightUpper}:${adjacentRightLower}:${maskToString(maskRight)}`,
+                    `${adjacentTopUpper}:${adjacentTopLower}:${maskToString(maskTop)}`,
+                    `${adjacentBottomUpper}:${adjacentBottomLower}:${maskToString(maskBottom)}`,
+                    `-> ${maskToString(outerMask)}`,
+                ].toString(),
+                maskToString(outerMask),
+                "->",
+                maskToString(mask),
+                MASK_TO_CHAR_MAP[mask]?.toString() || "null",
+            );
+        }
+        return MASK_TO_CHAR_MAP[mask] || null;
+    }
+
+    function getCharMask(char: Char, mask: number): number {
+        const charMask = CHAR_TO_MASK_MAP[standardize(char)];
+        return charMask !== undefined ? (charMask & mask) : 0;
+    }
+
+    function maskToString(mask: number): string {
+        return mask.toString(2).padStart(12, '0');
+    }
+
+    /**
+     * Creates a mask that excludes bits from any direction existing in the given mask.
+     * For example, if mask is from `│` (`0000.0000.1100`), the result will be `0011.0011.0011`
+     */
+    function createExcludeMask(mask: number): number {
+        // and with MASK_CROSS to remove the overflow bits.
+        const allDirectionsMask =
+            ((mask << 8) | (mask << 4) | mask | (mask >> 4) | (mask >> 8)) & MASK_CROSS;
+        return MASK_CROSS ^ allDirectionsMask;
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/board/index.ts b/monosketch-svelte/src/lib/mono/monobitmap/board/index.ts
new file mode 100644
index 000000000..ce38481ee
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/board/index.ts
@@ -0,0 +1,2 @@
+export { MonoBoard } from './board';
+export { Pixel } from './pixel';
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/board/painter-board.ts b/monosketch-svelte/src/lib/mono/monobitmap/board/painter-board.ts
new file mode 100644
index 000000000..4361197ef
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/board/painter-board.ts
@@ -0,0 +1,217 @@
+import { HighlightType, Pixel } from '$mono/monobitmap/board/pixel';
+import { Rect } from '$libs/graphics-geo/rect';
+import { Size } from '$libs/graphics-geo/size';
+import type { Point } from '$libs/graphics-geo/point';
+import { MonoBitmap } from '$mono/monobitmap/bitmap/monobitmap';
+import { isHalfTransparentChar } from '$mono/common/character';
+import type { Char } from '$libs/char';
+import type { CrossPoint } from '$mono/monobitmap/board/cross-point';
+import { ListExt } from '$libs/sequence';
+import list = ListExt.list;
+import { CrossingResources } from '$mono/monobitmap/board/crossing-resources';
+import isConnectableChar = CrossingResources.isConnectableChar;
+
+/**
+ * A model class to manage drawn pixel.
+ * This is where a pixel is represented with its absolute position.
+ */
+export class PainterBoard {
+    private readonly matrix: Pixel[][];
+
+    constructor(private bound: Rect) {
+        this.matrix = list(bound.height, () => list(bound.width, () => new Pixel()));
+    }
+
+    getBound = (): Rect => this.bound;
+
+    clear = () => {
+        for (const row of this.matrix) {
+            for (const pixel of row) {
+                pixel.reset();
+            }
+        }
+    };
+
+    /**
+     * Fills with another [PainterBoard].
+     * If a pixel in input [PainterBoard] is transparent, the value in the current board at that
+     * position won't be overwritten.
+     */
+    fill = (board: PainterBoard) => {
+        if (this.matrix.length == 0 || this.matrix[0].length == 0) {
+            return;
+        }
+
+        const position = board.bound.position;
+        const inMatrix = board.matrix;
+
+        const inMatrixBound = new Rect(position, Size.of(inMatrix[0].length, inMatrix.length));
+
+        const overlap = this.bound.getOverlappedRect(inMatrixBound);
+        if (!overlap) {
+            return;
+        }
+        const { left: startCol, top: startRow } = overlap.position.minus(this.bound.position);
+        const { left: inStartCol, top: inStartRow } = overlap.position.minus(position);
+
+        for (let r = 0; r < overlap.height; r++) {
+            const src = inMatrix[inStartRow + r];
+            const dest = this.matrix[startRow + r];
+
+            for (let c = 0; c < overlap.width; c++) {
+                const px = src[inStartCol + c];
+                if (!px.isTransparent) {
+                    dest[startCol + c].set(px.visualChar, px.directionChar, px.highlight);
+                }
+            }
+        }
+    };
+
+    /**
+     * Fills with a bitmap and the highlight state of that bitmap from [position] excepts crossing
+     * points. Connection point are the point having the char which is connectable
+     * ([CrossingResources.isConnectable]) and there is a character drawn at the position.
+     * A list of [CrossPoint] will be returned to let [MonoBoard] able to adjust and draw the
+     * adjusted character of the connection points.
+     *
+     * The main reason why it is required to let [MonoBoard] draws the connection points is the
+     * painter board cannot see the pixel outside its bound which is required to identify the final
+     * connection character.
+     *
+     * If a pixel in input [bitmap] is transparent, the value in the current board at that
+     * position won't be overwritten.
+     */
+    fillBitmap = (
+        position: Point,
+        bitmap: MonoBitmap.Bitmap,
+        highlight: HighlightType,
+    ): Array<CrossPoint> => {
+        if (bitmap.isEmpty()) {
+            return [];
+        }
+        const inMatrix = bitmap.matrix;
+        const inMatrixBound = new Rect(position, bitmap.size);
+
+        const overlap = this.bound.getOverlappedRect(inMatrixBound);
+        if (!overlap) {
+            return [];
+        }
+
+        const { left: startCol, top: startRow } = overlap.position.minus(this.bound.position);
+        const { left: inStartCol, top: inStartRow } = overlap.position.minus(position);
+        const { left: boundColumn, top: boundRow } = this.bound.position;
+
+        const crossPoints: CrossPoint[] = [];
+
+        for (let r = 0; r < overlap.height; r++) {
+            const bitmapRow = inStartRow + r;
+            const painterRow = startRow + r;
+            const src = inMatrix[bitmapRow];
+            const dest = this.matrix[painterRow];
+
+            for (const cell of src.asSequence(inStartCol, inStartCol + overlap.width)) {
+                const index = cell.index - inStartCol;
+                const bitmapColumn = inStartCol + index;
+                const painterColumn = startCol + index;
+                const pixel = dest[painterColumn];
+
+                if (this.isApplicable(pixel, cell.visual)) {
+                    // Not drawing half transparent character
+                    // (full transparent character is removed by bitmap)
+                    if (!isHalfTransparentChar(cell.visual)) {
+                        pixel.set(cell.visual, cell.direction, highlight);
+                    }
+                } else {
+                    // Crossing points will be drawn after finishing drawing all pixels of the
+                    // bitmap on the Mono Board. Each unit painter board does not have enough
+                    // information to decide the value of the crossing point.
+                    crossPoints.push({
+                        boardRow: painterRow + boundRow,
+                        boardColumn: painterColumn + boundColumn,
+                        visualChar: cell.visual,
+                        directionChar: cell.direction,
+                        leftChar: bitmap.getDirection(bitmapRow, bitmapColumn - 1),
+                        rightChar: bitmap.getDirection(bitmapRow, bitmapColumn + 1),
+                        topChar: bitmap.getDirection(bitmapRow - 1, bitmapColumn),
+                        bottomChar: bitmap.getDirection(bitmapRow + 1, bitmapColumn),
+                    });
+                }
+            }
+        }
+
+        return crossPoints;
+    };
+
+    /**
+     * Force values overlap with [rect] to be [char] regardless they are [TRANSPARENT_CHAR].
+     *
+     * Note: This method is for testing only
+     */
+    fillRect = (rect: Rect, char: Char, highlight: HighlightType) => {
+        const overlap = this.bound.getOverlappedRect(rect);
+        if (!overlap) {
+            return;
+        }
+        const { left: startCol, top: startRow } = overlap.position.minus(this.bound.position);
+
+        for (let r = 0; r < overlap.height; r++) {
+            const row = this.matrix[startRow + r];
+            for (let c = 0; c < overlap.width; c++) {
+                const pixel = row[startCol + c];
+                pixel.set(char, char, highlight);
+            }
+        }
+    };
+
+    /**
+     * Force value at [position] to be [char] with [highlight].
+     *
+     * Note: This method is for testing only
+     */
+    setPoint = (position: Point, char: Char, highlight: HighlightType) => {
+        const columnIndex = position.left - this.bound.left;
+        const rowIndex = position.top - this.bound.top;
+
+        if (
+            columnIndex < 0 ||
+            columnIndex >= this.bound.width ||
+            rowIndex < 0 ||
+            rowIndex >= this.bound.height
+        ) {
+            return;
+        }
+        this.matrix[rowIndex][columnIndex].set(char, char, highlight);
+    };
+
+    get = (left: number, top: number): Pixel | null => {
+        const columnIndex = left - this.bound.left;
+        const rowIndex = top - this.bound.top;
+        if (
+            columnIndex < 0 ||
+            columnIndex >= this.bound.width ||
+            rowIndex < 0 ||
+            rowIndex >= this.bound.height
+        ) {
+            return null;
+        }
+        return this.matrix[rowIndex][columnIndex];
+    };
+
+    private isApplicable = (pixel: Pixel, visual: Char): boolean => {
+        if (pixel.isTransparent) {
+            return true;
+        }
+        if (pixel.visualChar === visual) {
+            return true;
+        }
+        return !isConnectableChar(pixel.visualChar);
+    };
+
+    toString = (): string => {
+        return this.matrix.map(this.toRowString).join('\n');
+    };
+
+    private toRowString(row: Pixel[]): string {
+        return row.map((pixel) => pixel.toString()).join('');
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/board/painter-boards.test.ts b/monosketch-svelte/src/lib/mono/monobitmap/board/painter-boards.test.ts
new file mode 100644
index 000000000..0c11aad92
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/board/painter-boards.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, test } from 'vitest';
+import { PainterBoard } from '$mono/monobitmap/board/painter-board';
+import { Rect } from '$libs/graphics-geo/rect';
+import { HighlightType } from '$mono/monobitmap/board/pixel';
+import { Point } from '$libs/graphics-geo/point';
+import { TRANSPARENT_CHAR } from '$mono/common/character';
+
+describe('test painter-boards', () => {
+    test('fill inside a board', () => {
+        const board = new PainterBoard(Rect.byLTWH(0, 0, 4, 4));
+        board.fillRect(Rect.byLTWH(1, 2, 3, 4), '#', HighlightType.NO);
+        expect(board.toString()).toEqual('    \n    \n ###\n ###');
+    });
+
+    test('fill outside a board', () => {
+        const board = new PainterBoard(Rect.byLTWH(1, 1, 4, 4));
+        board.fillRect(Rect.byLTWH(0, 0, 5, 5), '#', HighlightType.NO);
+        expect(board.toString()).toEqual('####\n####\n####\n####');
+    });
+
+    test('fill board', () => {
+        const board1 = new PainterBoard(Rect.byLTWH(0, 0, 4, 4));
+        board1.fillRect(Rect.byLTWH(0, 0, 2, 2), 'a', HighlightType.NO);
+        board1.fillRect(Rect.byLTWH(0, 2, 2, 2), 'b', HighlightType.NO);
+        board1.fillRect(Rect.byLTWH(2, 0, 2, 2), 'c', HighlightType.NO);
+        board1.fillRect(Rect.byLTWH(2, 2, 2, 2), 'd', HighlightType.NO);
+        board1.setPoint(new Point(2, 1), TRANSPARENT_CHAR, HighlightType.NO);
+
+        const board2 = new PainterBoard(Rect.byLTWH(1, 1, 3, 2));
+        board2.setPoint(new Point(2, 1), 'x', HighlightType.NO);
+        board2.fill(board1);
+        expect(board2.toString()).toBe('axc\nbdd');
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/board/pixel.ts b/monosketch-svelte/src/lib/mono/monobitmap/board/pixel.ts
new file mode 100644
index 000000000..ea9fd73b9
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/board/pixel.ts
@@ -0,0 +1,63 @@
+import type { Char } from '$libs/char';
+import { isHalfTransparentChar, isTransparentChar, TRANSPARENT_CHAR } from '$mono/common/character';
+import type { Comparable } from '$libs/comparable';
+
+/**
+ * An interface for the pixel of the Mono Bitmap.
+ */
+export class Pixel implements Comparable {
+    static TRANSPARENT = new Pixel();
+
+    private visualCharInner: Char = TRANSPARENT_CHAR;
+    private directionCharInner: Char = TRANSPARENT_CHAR;
+    private highlightInner: HighlightType = HighlightType.NO;
+
+    get isTransparent(): boolean {
+        const char = this.visualCharInner;
+        return isTransparentChar(char) || isHalfTransparentChar(char);
+    }
+
+    get visualChar(): Char {
+        return this.visualCharInner;
+    }
+
+    get directionChar(): Char {
+        return this.directionCharInner;
+    }
+
+    get highlight(): HighlightType {
+        return this.highlightInner;
+    }
+
+    set = (visualChar: Char, directionChar: Char, highlight: HighlightType) => {
+        this.visualCharInner = visualChar;
+        this.directionCharInner = directionChar;
+        this.highlightInner = highlight;
+    };
+
+    reset = () => {
+        this.visualCharInner = TRANSPARENT_CHAR;
+        this.directionCharInner = TRANSPARENT_CHAR;
+        this.highlightInner = HighlightType.NO;
+    };
+
+    toString = (): string => (this.isTransparent ? ' ' : this.visualChar);
+
+    equals(other: unknown): boolean {
+        if (!(other instanceof Pixel)) {
+            return false;
+        }
+        const otherPixel = other as Pixel;
+        return (
+            this.visualCharInner === otherPixel.visualCharInner &&
+            this.highlightInner === otherPixel.highlightInner
+        );
+    }
+}
+
+export enum HighlightType {
+    NO,
+    SELECTED,
+    TEXT_EDITING,
+    LINE_CONNECT_FOCUSING,
+}
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/drawable/char-drawable.ts b/monosketch-svelte/src/lib/mono/monobitmap/drawable/char-drawable.ts
new file mode 100644
index 000000000..69353dabf
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/drawable/char-drawable.ts
@@ -0,0 +1,16 @@
+import { MonoBitmap } from "$mono/monobitmap/bitmap/monobitmap";
+import type { Drawable } from "$mono/monobitmap/drawable/drawable";
+
+/**
+ * A drawable which simplify fills with [char].
+ */
+export class CharDrawable implements Drawable {
+    constructor(private readonly char: string) {
+    }
+
+    toBitmap(width: number, height: number): MonoBitmap.Bitmap {
+        const builder = new MonoBitmap.Builder(width, height);
+        builder.fillAll(this.char);
+        return builder.toBitmap();
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/drawable/drawable.ts b/monosketch-svelte/src/lib/mono/monobitmap/drawable/drawable.ts
new file mode 100644
index 000000000..994191463
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/drawable/drawable.ts
@@ -0,0 +1,9 @@
+import { MonoBitmap } from "$mono/monobitmap/bitmap/monobitmap";
+
+/**
+ * An interface for drawable which is the minimal version of a bitmap. A drawable contains enough
+ * information for generating any-size bitmap.
+ */
+export interface Drawable {
+    toBitmap(width: number, height: number): MonoBitmap.Bitmap;
+}
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/drawable/index.ts b/monosketch-svelte/src/lib/mono/monobitmap/drawable/index.ts
new file mode 100644
index 000000000..f3c762604
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/drawable/index.ts
@@ -0,0 +1,9 @@
+export type { Drawable } from './drawable';
+export { CharDrawable } from './char-drawable';
+export {
+    NinePatchDrawable,
+    NinePatchDrawablePattern,
+    NinePatchDrawableRepeatableRange,
+    RepeatRepeatableRange,
+    ScaleRepeatableRange,
+} from './nine-patch-drawable';
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/drawable/nine-patch-drawable.ts b/monosketch-svelte/src/lib/mono/monobitmap/drawable/nine-patch-drawable.ts
new file mode 100644
index 000000000..0fc54cc2f
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/drawable/nine-patch-drawable.ts
@@ -0,0 +1,121 @@
+import type { Char } from "$libs/char";
+import { TRANSPARENT_CHAR } from "$mono/common/character";
+import { MonoBitmap } from "$mono/monobitmap/bitmap/monobitmap";
+import type { Drawable } from "$mono/monobitmap/drawable/drawable";
+
+/**
+ * A simple 9-patch image which scales image based on repeating points in
+ * horizontal and vertical repeatable range.
+ */
+export class NinePatchDrawable implements Drawable {
+    private pattern: NinePatchDrawablePattern;
+    private horizontalRepeatableRange: NinePatchDrawableRepeatableRange;
+    private verticalRepeatableRange: NinePatchDrawableRepeatableRange;
+
+    constructor(
+        pattern: NinePatchDrawablePattern,
+        horizontalRepeatableRange: NinePatchDrawableRepeatableRange = new ScaleRepeatableRange(0, pattern.width - 1),
+        verticalRepeatableRange: NinePatchDrawableRepeatableRange = new ScaleRepeatableRange(0, pattern.height - 1),
+    ) {
+        this.pattern = pattern;
+        this.horizontalRepeatableRange = horizontalRepeatableRange;
+        this.verticalRepeatableRange = verticalRepeatableRange;
+    }
+
+    toBitmap(width: number, height: number): MonoBitmap.Bitmap {
+        const builder = new MonoBitmap.Builder(width, height);
+        const rowIndexes = this.verticalRepeatableRange.toIndexes(height, this.pattern.height);
+        const colIndexes = this.horizontalRepeatableRange.toIndexes(width, this.pattern.width);
+        for (let row = 0; row < height; row++) {
+            for (let col = 0; col < width; col++) {
+                builder.put(
+                    row,
+                    col,
+                    this.pattern.getChar(rowIndexes[row], colIndexes[col]),
+                    // TODO: Think about a way to support direction chars to 9-patch drawable
+                    this.pattern.getChar(rowIndexes[row], colIndexes[col]),
+                );
+            }
+        }
+        return builder.toBitmap();
+    }
+}
+
+/**
+ * A data class which provides a basic render characters for 9-patch image.
+ */
+export class NinePatchDrawablePattern {
+
+    constructor(public width: number, public height: number, private chars: Char[]) {
+        if (chars.length < width * height) {
+            throw new Error(`Mismatch between size (${width}x${height}) and number of chars provided (${chars.length})`);
+        }
+    }
+
+    getChar(row: number, column: number): Char {
+        const index = row * this.width + column;
+        return this.chars[index];
+    }
+
+    static fromText(text: string, delimiter: Char = '\n', transparentChar: Char = ' '): NinePatchDrawablePattern {
+        const array = text.split(delimiter);
+        if (array.length === 0) {
+            return new NinePatchDrawablePattern(0, 0, []);
+        }
+        const width = array[0].length;
+        const height = array.length;
+        const chars = array.join("").split("").map(char => char === transparentChar ? TRANSPARENT_CHAR : char);
+        return new NinePatchDrawablePattern(width, height, chars);
+    }
+}
+
+/**
+ * The algorithm for repeating the repeated range.
+ */
+export abstract class NinePatchDrawableRepeatableRange {
+    protected start: number;
+    protected endInclusive: number;
+
+    constructor(start: number, endInclusive: number) {
+        this.start = Math.max(0, Math.min(start, endInclusive));
+        this.endInclusive = Math.max(start, endInclusive);
+    }
+
+    /**
+     * Creates a list with size [size] of indexes whole value in range [0, [patternSize]).
+     * If [patternSize] < [endInclusive], [endInclusive] will be used for the index value range.
+     */
+    toIndexes(size: number, patternSize: number): number[] {
+        const adjustedEndInclusive = Math.min(patternSize - 1, this.endInclusive);
+        const rangeSize = adjustedEndInclusive - this.start + 1;
+        const repeatingLeft = this.start;
+        const repeatingRight = size - (patternSize - adjustedEndInclusive);
+
+        return Array.from({ length: size }, (_, index) => {
+            if (index < repeatingLeft) return index;
+            if (index > repeatingRight) return adjustedEndInclusive + index - repeatingRight;
+            return this.scaleIndex(index, repeatingLeft, repeatingRight, rangeSize);
+        });
+    }
+
+    protected abstract scaleIndex(index: number, minRepeatingIndex: number, maxRepeatingIndex: number, rangeSize: number): number;
+}
+
+/**
+ * The algorithm for repeating the repeated range: `01` -> `00001111`
+ */
+export class ScaleRepeatableRange extends NinePatchDrawableRepeatableRange {
+    scaleIndex(index: number, minRepeatingIndex: number, maxRepeatingIndex: number, rangeSize: number): number {
+        const repeatingSize = maxRepeatingIndex - minRepeatingIndex + 1;
+        return minRepeatingIndex + Math.floor((index - minRepeatingIndex) * rangeSize / repeatingSize);
+    }
+}
+
+/**
+ * The algorithm for repeating the repeated range: `01` -> `01010101`
+ */
+export class RepeatRepeatableRange extends NinePatchDrawableRepeatableRange {
+    scaleIndex(index: number, minRepeatingIndex: number, maxRepeatingIndex: number, rangeSize: number): number {
+        return minRepeatingIndex + (index - minRepeatingIndex) % rangeSize;
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/manager/line-bitmap-factory.test.ts b/monosketch-svelte/src/lib/mono/monobitmap/manager/line-bitmap-factory.test.ts
new file mode 100644
index 000000000..43990b6a3
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/manager/line-bitmap-factory.test.ts
@@ -0,0 +1,438 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Point } from "$libs/graphics-geo/point";
+import { StringExt } from "$libs/string";
+import { PredefinedStraightStrokeStyle } from "$mono/shape/extra/predefined-styles";
+import { describe, expect, test } from "vitest";
+import { LineBitmapFactory } from './line-bitmap-factory';
+import { LineExtra } from '$mono/shape/extra/shape-extra';
+import { AnchorChar, StraightStrokeDashPattern } from '$mono/shape/extra/style';
+import trimMargin = StringExt.trimMargin;
+import trimIndent = StringExt.trimIndent;
+
+const LINE_EXTRA = new LineExtra(
+    true,
+    PredefinedStraightStrokeStyle.PREDEFINED_STYLES[0],
+    true,
+    AnchorChar.create({ id: 'id', displayName: 'name', all: '0' }),
+    true,
+    AnchorChar.create({ id: 'id', displayName: 'name', all: '1' }),
+    StraightStrokeDashPattern.SOLID,
+    false,
+);
+
+describe('LineBitmapFactory.toBitmap', () => {
+    describe('simpleHorizontalLine', () => {
+        test('simpleHorizontalLine', () => {
+            const points = [
+                new Point(2, 0),
+                new Point(6, 0),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe('0───1');
+        });
+
+        test('simpleHorizontalLine_reversed', () => {
+            const points = [
+                new Point(6, 0),
+                new Point(2, 0),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe('1───0');
+        });
+    });
+
+    describe('3 straight horizontal points', () => {
+        test('MonotonicPoints', () => {
+            const points = [
+                new Point(0, 0),
+                new Point(2, 0),
+                new Point(4, 0),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe('0───1');
+        });
+
+        test('MonotonicPoints_reversed', () => {
+            const points = [
+                new Point(4, 0),
+                new Point(2, 0),
+                new Point(0, 0),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe('1───0');
+        });
+
+        test('NonMonotonicPoints', () => {
+            const points = [
+                new Point(0, 0),
+                new Point(4, 0),
+                new Point(2, 0),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe('0─1──');
+        });
+
+        test('NonMonotonicPoints_reversed', () => {
+            const points = [
+                new Point(4, 0),
+                new Point(0, 0),
+                new Point(2, 0),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe('──1─0');
+        });
+    });
+
+    describe('simpleVerticalLine', () => {
+        test('simpleVerticalLine', () => {
+            const points = [
+                new Point(0, 2),
+                new Point(0, 6),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe(
+                trimIndent(`
+                0
+                │
+                │
+                │
+                1
+            `),
+            );
+        });
+
+        test('simpleVerticalLine_reversed', () => {
+            const points = [
+                new Point(0, 6),
+                new Point(0, 2),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe(
+                trimIndent(`
+                1
+                │
+                │
+                │
+                0
+            `),
+            );
+        });
+    });
+
+    describe("3 straight vertical points", () => {
+        test('MonotonicPoints', () => {
+            const points = [
+                new Point(0, 0),
+                new Point(0, 2),
+                new Point(0, 4),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe(
+                trimIndent(`
+                0
+                │
+                │
+                │
+                1
+        `),
+            );
+        });
+
+        test('MonotonicPoints_reversed', () => {
+            const points = [
+                new Point(0, 4),
+                new Point(0, 2),
+                new Point(0, 0),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe(
+                trimIndent(`
+                1
+                │
+                │
+                │
+                0
+            `),
+            );
+        });
+
+        test('NonMonotonicPoints', () => {
+            const points = [
+                new Point(0, 0),
+                new Point(0, 4),
+                new Point(0, 2),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe(
+                trimIndent(`
+                0
+                │
+                1
+                │
+                │
+            `),
+            );
+        });
+
+        test('NonMonotonicPoints_reversed', () => {
+            const points = [
+                new Point(0, 4),
+                new Point(0, 0),
+                new Point(0, 2),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe(
+                trimIndent(`
+                │
+                │
+                1
+                │
+                0
+            `),
+            );
+        });
+    });
+
+    describe('upperLeft', () => {
+        test('upperLeft', () => {
+            const points = [
+                new Point(0, 4),
+                new Point(4, 4),
+                new Point(4, 0),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe(
+                trimMargin(`
+                |    1
+                |    │
+                |    │
+                |    │
+                |0───┘
+            `),
+            );
+        });
+
+        test('upperLeft_reversed', () => {
+            const points = [
+                new Point(4, 0),
+                new Point(4, 4),
+                new Point(0, 4),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe(
+                trimMargin(`
+                |    0
+                |    │
+                |    │
+                |    │
+                |1───┘
+            `),
+            );
+        });
+    });
+
+    describe('lowerLeft', () => {
+        test('lowerLeft', () => {
+            const points = [
+                new Point(0, 0),
+                new Point(4, 0),
+                new Point(4, 4),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe(
+                trimMargin(`
+                |0───┐
+                |    │
+                |    │
+                |    │
+                |    1
+            `),
+            );
+        });
+
+        test('lowerLeft_reversed', () => {
+            const points = [
+                new Point(4, 4),
+                new Point(4, 0),
+                new Point(0, 0),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe(
+                trimMargin(`
+                |1───┐
+                |    │
+                |    │
+                |    │
+                |    0
+            `),
+            );
+        });
+    });
+
+    describe('upperRight', () => {
+        test('upperRight', () => {
+            const points = [
+                new Point(4, 4),
+                new Point(0, 4),
+                new Point(0, 0),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe(
+                trimMargin(`
+                |1    x
+                |│    x
+                |│    x
+                |│    x
+                |└───0
+            `.replaceAll('x', '')), // x is added to keep the space chars at the end of the line. Stupid lint.
+            );
+        });
+
+        test('upperRight_reversed', () => {
+            const points = [
+                new Point(0, 0),
+                new Point(0, 4),
+                new Point(4, 4),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe(
+                trimMargin(`
+                |0    x
+                |│    x
+                |│    x
+                |│    x
+                |└───1
+            `.replaceAll('x', '')), // x is added to keep the space chars at the end of the line. Stupid lint.
+            );
+        });
+    });
+
+    describe('lowerRight', () => {
+        test('lowerRight', () => {
+            const points = [
+                new Point(4, 0),
+                new Point(0, 0),
+                new Point(0, 4),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe(
+                trimMargin(`
+                |┌───0
+                |│    x
+                |│    x
+                |│    x
+                |1    x
+            `.replaceAll('x', '')), // x is added to keep the space chars at the end of the line. Stupid lint.
+            );
+        });
+
+        test('lowerRight_reversed', () => {
+            const points = [
+                new Point(0, 4),
+                new Point(0, 0),
+                new Point(4, 0),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, LINE_EXTRA);
+            expect(bitmap.toString()).toBe(
+                trimMargin(`
+                |┌───1
+                |│    x
+                |│    x
+                |│    x
+                |0    x
+            `.replaceAll('x', '')), // x is added to keep the space chars at the end of the line. Stupid lint.
+            );
+        });
+    });
+
+    describe('anchorChar', () => {
+        const anchorCharStart = AnchorChar.create({
+            id: 'id',
+            displayName: 'name',
+            left: 'L',
+            right: 'R',
+            top: 'T',
+            bottom: 'B',
+        });
+
+        const anchorCharEnd = AnchorChar.create({
+            id: 'id',
+            displayName: 'name',
+            left: 'l',
+            right: 'r',
+            top: 't',
+            bottom: 'b',
+        });
+
+        test('leftToRight', () => {
+            const lineExtra = LINE_EXTRA.copy({
+                userSelectedStartAnchor: anchorCharStart,
+                userSelectedEndAnchor: anchorCharEnd,
+            });
+            const points = [
+                new Point(0, 0),
+                new Point(4, 0),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, lineExtra);
+            expect(bitmap.toString()).toBe('L───r');
+        });
+
+        test('rightToLeft', () => {
+            const lineExtra = LINE_EXTRA.copy({
+                userSelectedStartAnchor: anchorCharStart,
+                userSelectedEndAnchor: anchorCharEnd,
+            });
+            const points = [
+                new Point(4, 0),
+                new Point(0, 0),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, lineExtra);
+            expect(bitmap.toString()).toBe('l───R');
+        });
+
+        test('topToBottom', () => {
+            const lineExtra = LINE_EXTRA.copy({
+                userSelectedStartAnchor: anchorCharStart,
+                userSelectedEndAnchor: anchorCharEnd,
+            });
+            const points = [
+                new Point(0, 0),
+                new Point(0, 4),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, lineExtra);
+            expect(bitmap.toString()).toBe(
+                trimIndent(`
+                T
+                │
+                │
+                │
+                b
+            `),
+            );
+        });
+
+        test('bottomToTop', () => {
+            const lineExtra = LINE_EXTRA.copy({
+                userSelectedStartAnchor: anchorCharStart,
+                userSelectedEndAnchor: anchorCharEnd,
+            });
+            const points = [
+                new Point(0, 4),
+                new Point(0, 0),
+            ];
+            const bitmap = LineBitmapFactory.toBitmap(points, lineExtra);
+            expect(bitmap.toString()).toBe(
+                trimIndent(`
+                t
+                │
+                │
+                │
+                B
+            `),
+            );
+        });
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/manager/line-bitmap-factory.ts b/monosketch-svelte/src/lib/mono/monobitmap/manager/line-bitmap-factory.ts
new file mode 100644
index 000000000..47c841266
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/manager/line-bitmap-factory.ts
@@ -0,0 +1,136 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import type { Point } from "$libs/graphics-geo/point";
+import { zip } from "$libs/sequence";
+import { TRANSPARENT_CHAR } from "$mono/common/character";
+import { MonoBitmap } from "$mono/monobitmap/bitmap/monobitmap";
+import { PointChar } from "$mono/monobitmap/manager/point-char";
+import { PredefinedStraightStrokeStyle } from "$mono/shape/extra/predefined-styles";
+import type { LineExtra } from "$mono/shape/extra/shape-extra";
+import { AnchorChar, type StraightStrokeStyle } from "$mono/shape/extra/style";
+
+/**
+ * A factory class to create a bitmap for a line shape.
+ */
+export class LineBitmapFactory {
+    static toBitmap(jointPoints: Point[], lineExtra: LineExtra): MonoBitmap.Bitmap {
+        const bitmapBuilder = BitmapBuilderDecoration.getInstance(jointPoints);
+
+        const dashPattern = lineExtra.dashPattern;
+        const strokeStyle = lineExtra.strokeStyle ?? PredefinedStraightStrokeStyle.NO_STROKE;
+        this.createCharPoints(jointPoints, strokeStyle).forEach((pointChar, index) => {
+            const visualChar = dashPattern.isGap(index) ? ' ' : pointChar.char;
+            bitmapBuilder.put(pointChar.top, pointChar.left, visualChar, pointChar.char);
+        });
+
+        const startAnchor = lineExtra.startAnchor;
+        if (startAnchor) {
+            bitmapBuilder.putAnchorPoint(jointPoints[0], jointPoints[1], startAnchor);
+        }
+        const endAnchor = lineExtra.endAnchor;
+        if (endAnchor) {
+            bitmapBuilder.putAnchorPoint(jointPoints[jointPoints.length - 1], jointPoints[jointPoints.length - 2], endAnchor);
+        }
+
+        return bitmapBuilder.toBitmap();
+    }
+
+    private static createCharPoints(jointPoints: Point[], strokeStyle: StraightStrokeStyle): PointChar[] {
+        if (jointPoints.length < 2) {
+            return [];
+        }
+        const lines = Array.from(zip(jointPoints, jointPoints.slice(1)));
+
+        const firstPoint = this.createPointChar(lines[0][0], lines[0][1], strokeStyle);
+
+        const linePairs = Array.from(zip(lines, lines.slice(1)));
+        const charPoints = linePairs.flatMap(([[p0, p1], [_, p2]]) => {
+            const line = this.createLineChar(p0, p1, strokeStyle);
+            const connectChar = this.getRightAngleChar(strokeStyle, p0, p1, p2);
+            const connectPoint = new PointChar(p1.left, p1.top, connectChar);
+            return [...line, connectPoint];
+        });
+
+        const lastLine = lines[lines.length - 1];
+        const lastLinePoint = this.createLineChar(lastLine[0], lastLine[1], strokeStyle);
+        const lastPoint = this.createPointChar(lastLine[1], lastLine[0], strokeStyle);
+
+        return [firstPoint, ...charPoints, ...lastLinePoint, lastPoint];
+    }
+
+    private static createLineChar(p0: Point, p1: Point, strokeStyle: StraightStrokeStyle): PointChar[] {
+        return isHorizontal(p0, p1)
+            ? PointChar.horizontalLine(p0.left, p1.left, p0.top, strokeStyle.horizontal)
+            : PointChar.verticalLine(p0.left, p0.top, p1.top, strokeStyle.vertical);
+    }
+
+    private static createPointChar(p0: Point, p1: Point, strokeStyle: StraightStrokeStyle): PointChar {
+        const char = isHorizontal(p0, p1) ? strokeStyle.horizontal : strokeStyle.vertical;
+        return new PointChar(p0.left, p0.top, char);
+    }
+
+
+    private static getRightAngleChar(
+        strokeStyle: StraightStrokeStyle,
+        point0: Point,
+        point1: Point,
+        point2: Point,
+    ): string {
+        const isHorizontal0 = isHorizontal(point0, point1);
+        const isHorizontal1 = isHorizontal(point1, point2);
+        if (isHorizontal0 === isHorizontal1) {
+            // Same line
+            return isHorizontal0 ? strokeStyle.horizontal : strokeStyle.vertical;
+        }
+
+        const isLeft = point0.left < point1.left || point2.left < point1.left;
+        const isUpper = point0.top < point1.top || point2.top < point1.top;
+
+        if (isLeft) {
+            return isUpper ? strokeStyle.upLeft : strokeStyle.downLeft;
+        } else {
+            return isUpper ? strokeStyle.downRight : strokeStyle.upRight;
+        }
+    }
+}
+
+class BitmapBuilderDecoration {
+    private builder: MonoBitmap.Builder;
+
+    private constructor(private row0: number, private column0: number, width: number, height: number) {
+        this.builder = new MonoBitmap.Builder(width, height);
+    }
+
+    static getInstance(jointPoints: Point[]): BitmapBuilderDecoration {
+        const boundLeft = Math.min(...jointPoints.map(p => p.left));
+        const boundRight = Math.max(...jointPoints.map(p => p.left));
+        const boundTop = Math.min(...jointPoints.map(p => p.top));
+        const boundBottom = Math.max(...jointPoints.map(p => p.top));
+
+        const boundWidth = boundRight - boundLeft + 1;
+        const boundHeight = boundBottom - boundTop + 1;
+
+        return new BitmapBuilderDecoration(boundTop, boundLeft, boundWidth, boundHeight);
+    }
+
+    put(row: number, column: number, visualChar: string, directionChar: string) {
+        this.builder.put(row - this.row0, column - this.column0, visualChar, directionChar);
+    }
+
+    putAnchorPoint(anchor: Point, previousPoint: Point, anchorChar: AnchorChar) {
+        const char = isHorizontal(anchor, previousPoint)
+            ? (anchor.left < previousPoint.left ? anchorChar.left : anchorChar.right)
+            : (anchor.top < previousPoint.top ? anchorChar.top : anchorChar.bottom);
+        this.put(anchor.top, anchor.left, char, TRANSPARENT_CHAR);
+    }
+
+    toBitmap(): MonoBitmap.Bitmap {
+        return this.builder.toBitmap();
+    }
+}
+
+function isHorizontal(point1: Point, point2: Point): boolean {
+    return point1.top === point2.top;
+}
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/manager/mono-bitmap-manager.ts b/monosketch-svelte/src/lib/mono/monobitmap/manager/mono-bitmap-manager.ts
new file mode 100644
index 000000000..fb44e3f6f
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/manager/mono-bitmap-manager.ts
@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import type { AbstractShape } from "$mono/shape/shape/abstract-shape";
+import { Group } from "$mono/shape/shape/group";
+import { Line } from "$mono/shape/shape/line";
+import { MockShape } from "$mono/shape/shape/mock-shape";
+import { Rectangle } from "$mono/shape/shape/rectangle";
+import { Text } from "$mono/shape/shape/text";
+import { LineBitmapFactory } from './line-bitmap-factory';
+import { RectangleBitmapFactory } from './rectangle-bitmap-factory';
+import { TextBitmapFactory } from './text-bitmap-factory';
+import { MonoBitmap } from '$mono/monobitmap/bitmap/monobitmap';
+import Bitmap = MonoBitmap.Bitmap;
+
+/**
+ * A model class which manages and caches bitmap of shapes.
+ * Cache-hit when both id and version of the shape valid in the cache, otherwise, cache-miss.
+ */
+export class MonoBitmapManager {
+    private idToBitmapMap: Map<string, VersionizedBitmap> = new Map();
+
+    getBitmap(shape: AbstractShape): MonoBitmap.Bitmap | null {
+        const cachedBitmap = this.getCacheBitmap(shape);
+        if (cachedBitmap) {
+            return cachedBitmap;
+        }
+
+        const bitmap = this.createBitmap(shape);
+
+        if (bitmap) {
+            this.idToBitmapMap.set(shape.id, { versionCode: shape.versionCode, bitmap });
+        }
+        return bitmap;
+    }
+
+    private createBitmap(shape: AbstractShape): Bitmap | null {
+        if (shape instanceof Rectangle) {
+            return RectangleBitmapFactory.toBitmap(shape.bound.size, shape.extra);
+        } else if (shape instanceof Text) {
+            return TextBitmapFactory.toBitmap(
+                shape.bound.size,
+                shape.renderableText.getRenderableText(),
+                shape.extra,
+                shape.isTextEditing,
+            );
+        } else if (shape instanceof Line) {
+            return LineBitmapFactory.toBitmap(shape.reducedJoinPoints, shape.extra);
+        } else if (shape instanceof Group || shape instanceof MockShape) {
+            // No draw group since it changes very frequently.
+            // No draw mock shape since it is only for testing.
+            return null;
+        } else {
+            throw new Error(`Unsupported shape type: ${shape.constructor.name}`);
+        }
+    }
+
+    private getCacheBitmap(shape: AbstractShape): MonoBitmap.Bitmap | null {
+        const versionizedBitmap = this.idToBitmapMap.get(shape.id);
+        return versionizedBitmap && versionizedBitmap.versionCode === shape.versionCode
+            ? versionizedBitmap.bitmap
+            : null;
+    }
+}
+
+interface VersionizedBitmap {
+    versionCode: number;
+    bitmap: MonoBitmap.Bitmap;
+}
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/manager/point-char.ts b/monosketch-svelte/src/lib/mono/monobitmap/manager/point-char.ts
new file mode 100644
index 000000000..f6de2f8d4
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/manager/point-char.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { range } from "$libs/sequence";
+
+/**
+ * A class representing a char at a point for generating bitmap.
+ */
+export class PointChar {
+    constructor(public left: number, public top: number, public char: string) {
+    }
+
+    static point(left: number, top: number, char: string): PointChar[] {
+        return [new PointChar(left, top, char)];
+    }
+
+    static horizontalLine(beginExclusive: number, endExclusive: number, top: number, char: string): PointChar[] {
+        if (Math.abs(beginExclusive - endExclusive) <= 1) {
+            return [];
+        }
+        const delta = beginExclusive < endExclusive ? 1 : -1;
+        const begin = beginExclusive + delta;
+        return Array.from(range(begin, endExclusive, delta), (left, _) => new PointChar(left, top, char));
+    }
+
+    static verticalLine(left: number, beginExclusive: number, endExclusive: number, char: string): PointChar[] {
+        if (Math.abs(beginExclusive - endExclusive) <= 1) {
+            return [];
+        }
+        const delta = beginExclusive < endExclusive ? 1 : -1;
+        const begin = beginExclusive + delta;
+        return Array.from(range(begin, endExclusive, delta), (top, _) => new PointChar(left, top, char));
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/manager/rectangle-bitmap-factory.test.ts b/monosketch-svelte/src/lib/mono/monobitmap/manager/rectangle-bitmap-factory.test.ts
new file mode 100644
index 000000000..4c9b886b3
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/manager/rectangle-bitmap-factory.test.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Rect } from "$libs/graphics-geo/rect";
+import { StringExt } from "$libs/string";
+import { describe, expect, test } from "vitest";
+import { RectangleBitmapFactory } from './rectangle-bitmap-factory';
+import { Rectangle } from '$mono/shape/shape/rectangle';
+import trimIndent = StringExt.trimIndent;
+
+describe('RectangleBitmapFactory', () => {
+    test('toBitmap', () => {
+        const shape = Rectangle.fromRect({ rect: Rect.byLTWH(10, 10, 5, 5) });
+        const bitmap = RectangleBitmapFactory.toBitmap(shape.bound.size, shape.extra);
+        expect(bitmap.size.width).toBe(shape.bound.width);
+        expect(bitmap.size.height).toBe(shape.bound.height);
+        console.log(bitmap.toString());
+        expect(bitmap.toString().trim()).toBe(
+            trimIndent(`
+            ┌───┐
+            │   │
+            │   │
+            │   │
+            └───┘
+            `),
+        );
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/manager/rectangle-bitmap-factory.ts b/monosketch-svelte/src/lib/mono/monobitmap/manager/rectangle-bitmap-factory.ts
new file mode 100644
index 000000000..65deddd5e
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/manager/rectangle-bitmap-factory.ts
@@ -0,0 +1,83 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import type { Size } from "$libs/graphics-geo/size";
+import { MonoBitmap } from "$mono/monobitmap/bitmap/monobitmap";
+import { PredefinedStraightStrokeStyle } from "$mono/shape/extra/predefined-styles";
+import type { RectangleExtra } from "$mono/shape/extra/shape-extra";
+import { StraightStrokeDashPattern, StraightStrokeStyle } from '$mono/shape/extra/style';
+import { PointChar } from './point-char';
+
+/**
+ * A factory class to create a bitmap for a rectangle shape.
+ */
+export class RectangleBitmapFactory {
+    static toBitmap(size: Size, extra: RectangleExtra): MonoBitmap.Bitmap {
+        const bitmapBuilder = new MonoBitmap.Builder(size.width, size.height);
+
+        const fillDrawable = extra.fillStyle?.drawable;
+        const strokeStyle = extra.strokeStyle;
+
+        if (fillDrawable == null && strokeStyle == null) {
+            // Draw a half transparent character for selection.
+            // Half transparent is not displayed on the canvas but makes the shape selectable.
+            this.drawBorder(bitmapBuilder, size, PredefinedStraightStrokeStyle.NO_STROKE, extra.dashPattern);
+            return bitmapBuilder.toBitmap();
+        }
+
+        if (fillDrawable != null) {
+            bitmapBuilder.fillBitmap(0, 0, fillDrawable.toBitmap(size.width, size.height));
+        }
+
+        const isStrokeAllowed = fillDrawable == null || (size.width > 1 && size.height > 1);
+        if (isStrokeAllowed && strokeStyle != null) {
+            this.drawBorder(bitmapBuilder, size, strokeStyle, extra.dashPattern);
+        }
+
+        return bitmapBuilder.toBitmap();
+    }
+
+    private static drawBorder(
+        bitmapBuilder: MonoBitmap.Builder,
+        size: Size,
+        strokeStyle: StraightStrokeStyle,
+        dashPattern: StraightStrokeDashPattern,
+    ) {
+        if (size.width == 1 && size.height == 1) {
+            bitmapBuilder.put(0, 0, '□', '□');
+            return;
+        }
+
+        const pointChars = this.getBorderPointChars(size, strokeStyle);
+
+        pointChars.flat().forEach((pointChar, index) => {
+            const visualChar = dashPattern.isGap(index) ? ' ' : pointChar.char;
+            bitmapBuilder.put(pointChar.top, pointChar.left, visualChar, pointChar.char);
+        });
+    }
+
+    private static getBorderPointChars(size: Size, strokeStyle: StraightStrokeStyle) {
+        const left = 0;
+        const top = 0;
+        const right = size.width - 1;
+        const bottom = size.height - 1;
+
+        if (size.width == 1) {
+            return [PointChar.verticalLine(left, top - 1, bottom, strokeStyle.vertical)];
+        }
+        if (size.height == 1) {
+            return [PointChar.horizontalLine(left - 1, right, top, strokeStyle.horizontal)];
+        }
+        return [
+            PointChar.point(left, top, strokeStyle.upRight),
+            PointChar.horizontalLine(left, right, top, strokeStyle.horizontal),
+            PointChar.point(right, top, strokeStyle.downLeft),
+            PointChar.verticalLine(right, top, bottom, strokeStyle.vertical),
+            PointChar.point(right, bottom, strokeStyle.upLeft),
+            PointChar.horizontalLine(right, left, bottom, strokeStyle.horizontal),
+            PointChar.point(left, bottom, strokeStyle.downRight),
+            PointChar.verticalLine(left, bottom, top, strokeStyle.vertical),
+        ];
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/manager/text-bitmap-factory.test.ts b/monosketch-svelte/src/lib/mono/monobitmap/manager/text-bitmap-factory.test.ts
new file mode 100644
index 000000000..1a8f782c1
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/manager/text-bitmap-factory.test.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Rect } from "$libs/graphics-geo/rect";
+import { StringExt } from "$libs/string";
+import { describe, expect, test } from "vitest";
+import { TextBitmapFactory } from './text-bitmap-factory';
+import { Text } from '$mono/shape/shape/text';
+import trimIndent = StringExt.trimIndent;
+
+describe('TextBitmapFactory', () => {
+    test('toBitmap', () => {
+        const text = Text.fromRect({ rect: Rect.byLTWH(0, 0, 7, 5) });
+        text.setText('012345678\nabc');
+        const bitmap = TextBitmapFactory.toBitmap(
+            text.bound.size,
+            text.renderableText.getRenderableText(),
+            text.extra,
+            false,
+        );
+        expect(bitmap.toString().trim()).toBe(
+            trimIndent(`
+            ┌─────┐
+            │01234│
+            │5678 │
+            │ abc │
+            └─────┘
+            `),
+        );
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/monobitmap/manager/text-bitmap-factory.ts b/monosketch-svelte/src/lib/mono/monobitmap/manager/text-bitmap-factory.ts
new file mode 100644
index 000000000..3ffcf9840
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/monobitmap/manager/text-bitmap-factory.ts
@@ -0,0 +1,86 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { RectangleBitmapFactory } from './rectangle-bitmap-factory';
+import type { Size } from '$libs/graphics-geo/size';
+import { MonoBitmap } from '$mono/monobitmap/bitmap/monobitmap';
+import type { TextExtra } from '$mono/shape/extra/shape-extra';
+import { TextHorizontalAlign, TextVerticalAlign } from '$mono/shape/extra/style';
+
+/**
+ * A factory class to create a bitmap for a text shape.
+ */
+export class TextBitmapFactory {
+    static toBitmap(
+        boundSize: Size,
+        renderableText: string[],
+        extra: TextExtra,
+        isTextEditingMode: boolean,
+    ): MonoBitmap.Bitmap {
+        const bgBitmap = RectangleBitmapFactory.toBitmap(boundSize, extra.boundExtra);
+        const bitmapBuilder = new MonoBitmap.Builder(boundSize.width, boundSize.height);
+        if (!(boundSize.width === 1 && boundSize.height === 1 && isTextEditingMode)) {
+            bitmapBuilder.fillBitmap(0, 0, bgBitmap);
+        }
+
+        const adjustedRenderableText = isTextEditingMode ? [] : renderableText;
+        this.fillText(bitmapBuilder, adjustedRenderableText, boundSize, extra);
+        return bitmapBuilder.toBitmap();
+    }
+
+    private static fillText(
+        bitmapBuilder: MonoBitmap.Builder,
+        renderableText: string[],
+        boundSize: Size,
+        extra: TextExtra,
+    ) {
+        const hasBorder = extra.hasBorder();
+        const rowOffset = hasBorder ? 1 : 0;
+        const colOffset = hasBorder ? 1 : 0;
+
+        const maxTextWidth = boundSize.width - colOffset * 2;
+        const maxTextHeight = Math.max(0, boundSize.height - rowOffset * 2);
+
+        const row0 = this.getRow0(extra, rowOffset, maxTextHeight, renderableText);
+
+        const horizontalAlign = extra.textAlign.horizontalAlign;
+        const maxRowIndex = Math.min(renderableText.length, maxTextHeight);
+        for (let rowIndex = 0; rowIndex < maxRowIndex; rowIndex++) {
+            const row = renderableText[rowIndex];
+            const col0 = this.getCol0(horizontalAlign, colOffset, maxTextWidth, row);
+            for (let colIndex = 0; colIndex < row.length; colIndex++) {
+                const char = row[colIndex];
+                if (char !== ' ') {
+                    bitmapBuilder.put(row0 + rowIndex, col0 + colIndex, char, char);
+                }
+            }
+        }
+    }
+
+    private static getCol0(horizontalAlign: TextHorizontalAlign, colOffset: number, maxTextWidth: number, row: string) {
+        switch (horizontalAlign) {
+            case TextHorizontalAlign.LEFT:
+                return colOffset;
+            case TextHorizontalAlign.MIDDLE:
+                return Math.floor((maxTextWidth - row.length) / 2) + colOffset;
+            case TextHorizontalAlign.RIGHT:
+                return maxTextWidth - row.length + colOffset;
+        }
+    }
+
+    private static getRow0(extra: TextExtra, rowOffset: number, maxTextHeight: number, renderableText: string[]) {
+        switch (extra.textAlign.verticalAlign) {
+            case TextVerticalAlign.TOP:
+                return rowOffset;
+            case TextVerticalAlign.MIDDLE:
+                return maxTextHeight < renderableText.length
+                    ? rowOffset
+                    : Math.floor((maxTextHeight - renderableText.length) / 2) + rowOffset;
+            case TextVerticalAlign.BOTTOM:
+                return maxTextHeight < renderableText.length
+                    ? rowOffset
+                    : maxTextHeight - renderableText.length + rowOffset;
+        }
+    };
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/collection/identifier.ts b/monosketch-svelte/src/lib/mono/shape/collection/identifier.ts
new file mode 100644
index 000000000..7982b465b
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/collection/identifier.ts
@@ -0,0 +1,6 @@
+/**
+ * A type for an object with an id.
+ */
+export type Identifier = {
+    id: string;
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/collection/quick-list.test.ts b/monosketch-svelte/src/lib/mono/shape/collection/quick-list.test.ts
new file mode 100644
index 000000000..8ee03552a
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/collection/quick-list.test.ts
@@ -0,0 +1,120 @@
+import type { Identifier } from "$mono/shape/collection/identifier";
+import { beforeEach, describe, expect, test } from "vitest";
+import { QuickList, AddPosition, MoveActionType } from './quick-list';
+
+describe('QuickList', () => {
+    let target: QuickList<Item>;
+
+    class Item implements Identifier {
+        id: string;
+
+        constructor(id: string) {
+            this.id = id;
+        }
+    }
+
+    const TestData = {
+        ITEM_0: new Item('0'),
+        ITEM_1: new Item('1'),
+        ITEM_2: new Item('2'),
+        ITEM_3: new Item('3'),
+        get ITEMS() {
+            return [this.ITEM_0, this.ITEM_1, this.ITEM_2, this.ITEM_3];
+        },
+    };
+
+    beforeEach(() => {
+        target = new QuickList<Item>();
+    });
+
+    test('add', () => {
+        expect(target.isEmpty()).toBeTruthy();
+
+        expect(target.add(TestData.ITEM_1)).toBeTruthy();
+        expect(target.add(TestData.ITEM_1)).toBeFalsy();
+        expect(target.size).toBe(1);
+        expect(target.get('1')).toEqual(TestData.ITEM_1);
+
+        target.add(TestData.ITEM_0, AddPosition.First);
+        expect(target.get('0')).toEqual(TestData.ITEM_0);
+        expect(target.get('1')).toEqual(TestData.ITEM_1);
+        expect(Array.from(target)).toEqual([TestData.ITEM_0, TestData.ITEM_1]);
+
+        target.add(TestData.ITEM_3);
+        target.add(TestData.ITEM_2, AddPosition.After(TestData.ITEM_1));
+        expect(Array.from(target)).toEqual([TestData.ITEM_0, TestData.ITEM_1, TestData.ITEM_2, TestData.ITEM_3]);
+    });
+
+    describe('addAll', () => {
+        test('last', () => {
+            target.add(TestData.ITEM_0);
+            target.add(TestData.ITEM_1);
+            target.addAll(TestData.ITEMS.slice(2));
+            expect(Array.from(target)).toEqual(TestData.ITEMS);
+        });
+
+        test('first', () => {
+            target.add(TestData.ITEM_2);
+            target.add(TestData.ITEM_3);
+            target.addAll(TestData.ITEMS.slice(0, 2), AddPosition.First);
+            expect(Array.from(target)).toEqual(TestData.ITEMS);
+        });
+
+        test('after', () => {
+            target.add(TestData.ITEM_0);
+            target.add(TestData.ITEM_3);
+            target.addAll(TestData.ITEMS.slice(1, 3), AddPosition.After(TestData.ITEM_0));
+            expect(Array.from(target)).toEqual(TestData.ITEMS);
+        });
+    });
+
+    test('remove', () => {
+        target.add(TestData.ITEM_0);
+        target.add(TestData.ITEM_1);
+
+        expect(target.remove(TestData.ITEM_2)).toBeNull();
+
+        expect(target.remove(new Item('1'))).toEqual(TestData.ITEM_1);
+        expect(target.size).toBe(1);
+        expect(target.get('1')).toBeNull();
+
+        expect(target.remove(new Item('0'))).toEqual(TestData.ITEM_0);
+        expect(target.isEmpty()).toBeTruthy();
+    });
+
+    test('removeAll', () => {
+        target.addAll(TestData.ITEMS);
+        target.removeAll();
+        expect(target.isEmpty()).toBeTruthy();
+    });
+
+    describe('move', () => {
+        test('up', () => {
+            target.addAll(TestData.ITEMS);
+
+            expect(target.move(new Item('1'), MoveActionType.UP)).toBeTruthy();
+            expect(Array.from(target)).toEqual([TestData.ITEM_0, TestData.ITEM_2, TestData.ITEM_1, TestData.ITEM_3]);
+        });
+
+        test('down', () => {
+            target.addAll(TestData.ITEMS);
+
+            expect(target.move(new Item('2'), MoveActionType.DOWN)).toBeTruthy();
+            expect(Array.from(target)).toEqual([TestData.ITEM_0, TestData.ITEM_2, TestData.ITEM_1, TestData.ITEM_3]);
+        });
+
+        test('top', () => {
+            target.addAll(TestData.ITEMS);
+
+            expect(target.move(new Item('1'), MoveActionType.TOP)).toBeTruthy();
+            expect(Array.from(target)).toEqual([TestData.ITEM_0, TestData.ITEM_2, TestData.ITEM_3, TestData.ITEM_1]);
+        });
+
+        test('bottom', () => {
+            target.addAll(TestData.ITEMS);
+
+            expect(target.move(new Item('2'), MoveActionType.BOTTOM)).toBeTruthy();
+            expect(Array.from(target)).toEqual([TestData.ITEM_2, TestData.ITEM_0, TestData.ITEM_1, TestData.ITEM_3]);
+        });
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/shape/collection/quick-list.ts b/monosketch-svelte/src/lib/mono/shape/collection/quick-list.ts
new file mode 100644
index 000000000..c6b82bd93
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/collection/quick-list.ts
@@ -0,0 +1,215 @@
+import type { Identifier } from "./identifier";
+
+export enum MoveActionType {
+    UP,
+    DOWN,
+    TOP,
+    BOTTOM
+}
+
+export class AddPosition {
+    static First = new AddPosition(null);
+    static Last = new AddPosition(null);
+
+    static After(identifier: Identifier): AddPosition {
+        return new AddPosition(identifier);
+    }
+
+    private constructor(public identifier: Identifier | null) {
+    }
+}
+
+/**
+ * A collection which works similar to LinkedHashMap in Java by making accessing item fast while keeping
+ * the order of items based on add-sequence.
+ * This also supports move up/down/top/bottom of the list for an item as well as adding item into
+ * the head or the tail or after a specific item.
+ */
+export class QuickList<T extends Identifier> implements Iterable<T> {
+    private linkedList: DoubleLinkedList<T> = new DoubleLinkedList<T>();
+    private idToNodeMap: Map<string, Node<T>> = new Map<string, Node<T>>();
+
+    get size(): number {
+        return this.idToNodeMap.size;
+    }
+
+    contains(element: T): boolean {
+        return this.idToNodeMap.has(element.id);
+    }
+
+    containsAll(elements: Iterable<T>): boolean {
+        for (const element of elements) {
+            if (!this.contains(element)) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    isEmpty(): boolean {
+        return this.size === 0;
+    }
+
+    [Symbol.iterator](): Iterator<T> {
+        return this.linkedList.iterator();
+    }
+
+    add(element: T, position: AddPosition = AddPosition.Last): boolean {
+        if (this.contains(element)) {
+            return false;
+        }
+
+        const preNode = (() => {
+            switch (position) {
+                case AddPosition.Last:
+                    return this.linkedList.tail.pre;
+                case AddPosition.First:
+                    return this.linkedList.head;
+                default: // AddPosition after
+                    return this.idToNodeMap.get(position.identifier!.id);
+            }
+        })();
+
+        if (!preNode) {
+            return false;
+        }
+
+        const node = this.linkedList.add(element, preNode);
+        this.idToNodeMap.set(element.id, node);
+
+        return true;
+    }
+
+    addAll(collection: Iterable<T>, position: AddPosition = AddPosition.Last) {
+        let previous = position;
+        for (const element of collection) {
+            this.add(element, previous);
+            previous = AddPosition.After(element);
+        }
+    }
+
+    remove(identifier: Identifier): T | null {
+        const node = this.idToNodeMap.get(identifier.id);
+        if (!node) {
+            return null;
+        }
+        this.idToNodeMap.delete(identifier.id);
+        this.linkedList.remove(node);
+        return node.value;
+    }
+
+    removeAll(): T[] {
+        const result = Array.from(this);
+        this.linkedList.clear();
+        this.idToNodeMap.clear();
+        return result;
+    }
+
+    get(id: string): T | null {
+        return this.idToNodeMap.get(id)?.value || null;
+    }
+
+    move(identifier: Identifier, moveActionType: MoveActionType): boolean {
+        if (this.size < 2) {
+            return false;
+        }
+
+        const node = this.idToNodeMap.get(identifier.id);
+        if (!node) {
+            return false;
+        }
+        return this.linkedList.move(node, moveActionType);
+    }
+}
+
+class Node<T> {
+    constructor(
+        public pre: Node<T> | null,
+        public next: Node<T> | null,
+        public value: T | null,
+    ) {
+    }
+}
+
+class DoubleLinkedList<T> {
+    head: Node<T> = new Node<T>(null, null, null);
+    tail: Node<T> = new Node<T>(null, null, null);
+
+    constructor() {
+        this.head.next = this.tail;
+        this.tail.pre = this.head;
+    }
+
+    add(value: T, previousNode: Node<T>): Node<T> {
+        const afterNode = previousNode.next;
+        const node = new Node<T>(previousNode, afterNode, value);
+        previousNode.next = node;
+        if (afterNode) {
+            afterNode.pre = node;
+        }
+        return node;
+    }
+
+    remove(node: Node<T>) {
+        const previousNode = node.pre;
+        const afterNode = node.next;
+        if (previousNode) {
+            previousNode.next = afterNode;
+        }
+        if (afterNode) {
+            afterNode.pre = previousNode;
+        }
+        node.next = null;
+        node.pre = null;
+    }
+
+    clear(): void {
+        this.head.next = this.tail;
+        this.tail.pre = this.head;
+    }
+
+    move(node: Node<T>, moveActionType: MoveActionType): boolean {
+        let newPreviousNode: Node<T> | null | undefined;
+        switch (moveActionType) {
+            case MoveActionType.UP:
+                newPreviousNode = node.next !== this.tail ? node.next : null;
+                break;
+            case MoveActionType.TOP:
+                newPreviousNode = node.next !== this.tail ? this.tail.pre : null;
+                break;
+            case MoveActionType.DOWN:
+                newPreviousNode = node.pre !== this.head ? node.pre?.pre : null;
+                break;
+            case MoveActionType.BOTTOM:
+                newPreviousNode = node.pre !== this.head ? this.head : null;
+                break;
+            default:
+                return false;
+        }
+
+        if (!newPreviousNode) {
+            return false;
+        }
+
+        this.remove(node);
+
+        const newNextNode = newPreviousNode.next;
+        newPreviousNode.next = node;
+        if (newNextNode) {
+            newNextNode.pre = node;
+        }
+        node.pre = newPreviousNode;
+        node.next = newNextNode;
+        return true;
+    }
+
+    * iterator(): IterableIterator<T> {
+        let current = this.head.next;
+        while (current && current !== this.tail) {
+            if (current.value) {
+                yield current.value;
+            }
+            current = current.next;
+        }
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/collection/two-way-quick-map.test.ts b/monosketch-svelte/src/lib/mono/shape/collection/two-way-quick-map.test.ts
new file mode 100644
index 000000000..9f42c83b4
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/collection/two-way-quick-map.test.ts
@@ -0,0 +1,93 @@
+import type { Identifier } from "$mono/shape/collection/identifier";
+import { beforeEach, describe, expect, test } from "vitest";
+import { TwoWayQuickMap } from './two-way-quick-map'; // Adjust the import path as necessary
+
+class Key implements Identifier {
+    id: string;
+
+    constructor(id: string) {
+        this.id = id;
+    }
+}
+
+class Value implements Identifier {
+    id: string;
+
+    constructor(id: string) {
+        this.id = id;
+    }
+}
+
+const K1 = new Key('k1');
+const K2 = new Key('k2');
+const K3 = new Key('k3');
+const V1 = new Value('v1');
+const V2 = new Value('v2');
+
+describe('TwoWayQuickMap', () => {
+    let target: TwoWayQuickMap<Key, Value>;
+
+    beforeEach(() => {
+        target = new TwoWayQuickMap<Key, Value>();
+    });
+
+    test('add', () => {
+        target.set(K1, V1);
+        expect(target.get(new Key('k1'))).toEqual(V1);
+        expect(Array.from(target.getKeys(new Value('v1')))).toEqual([K1]);
+        expect(target.get(K2)).toBeUndefined();
+        expect(Array.from(target.getKeys(new Value('v2')))).toEqual([]);
+
+        target.set(K2, V1);
+        expect(target.get(new Key('k1'))).toEqual(V1);
+        expect(target.get(new Key('k2'))).toEqual(V1);
+        expect(Array.from(target.getKeys(new Value('v1')))).toEqual([K1, K2]);
+    });
+
+    test('add - conflict', () => {
+        target.set(K1, V1);
+        target.set(K1, V1);
+        target.set(K2, V1);
+        target.set(K3, V2);
+
+        target.set(K1, V2);
+        expect(target.get(K1)).toEqual(V2);
+        expect(target.get(K2)).toEqual(V1);
+        expect(target.get(K3)).toEqual(V2);
+
+        expect(Array.from(target.getKeys(V2))).toEqual([K3, K1]);
+        expect(Array.from(target.getKeys(V1))).toEqual([K2]);
+    });
+
+    test('removeKey', () => {
+        target.removeKey(K1);
+
+        target.set(K1, V1);
+        target.set(K2, V2);
+        target.removeKey(K1);
+        expect(target.get(K1)).toBeUndefined();
+        expect(Array.from(target.getKeys(V1))).toEqual([]);
+        expect(target.get(K2)).toEqual(V2);
+    });
+
+    test('removeValue', () => {
+        target.removeValue(V1);
+
+        target.set(K1, V1);
+        target.set(K2, V1);
+        target.set(K3, V2);
+
+        target.removeValue(V1);
+        expect(Array.from(target.getKeys(V1))).toEqual([]);
+        expect(target.get(K1)).toBeUndefined();
+        expect(target.get(K2)).toBeUndefined();
+        expect(target.get(K3)).toEqual(V2);
+        expect(Array.from(target.getKeys(V2))).toEqual([K3]);
+    });
+
+    test('getKey', () => {
+        target.set(K1, V1);
+
+        expect(target.getKey(new Key('k1'))).toEqual(K1);
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/shape/collection/two-way-quick-map.ts b/monosketch-svelte/src/lib/mono/shape/collection/two-way-quick-map.ts
new file mode 100644
index 000000000..e8d5fe275
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/collection/two-way-quick-map.ts
@@ -0,0 +1,80 @@
+import type { Identifier } from "$mono/shape/collection/identifier";
+
+/**
+ * A special map that allows querying by both with key and value.
+ * Key is going with only 1 value and 1 value can go with multiple keys.
+ * This map supports querying with key and querying with value.
+ */
+export class TwoWayQuickMap<K extends Identifier, V extends Identifier> {
+    private keyToValueMap: Map<string, V> = new Map<string, V>();
+    private valueToKeysMap: Map<string, Map<string, K>> = new Map<string, Map<string, K>>();
+
+    set(key: K, value: V): void {
+        if (this.keyToValueMap.has(key.id)) {
+            this.removeKey(key);
+        }
+        this.keyToValueMap.set(key.id, value);
+        const keysMap = this.valueToKeysMap.get(value.id) || new Map<string, K>();
+        keysMap.set(key.id, key);
+        this.valueToKeysMap.set(value.id, keysMap);
+    }
+
+    removeKey(key: Identifier): void {
+        const value = this.keyToValueMap.get(key.id);
+        if (!value) {
+            return;
+        }
+        this.keyToValueMap.delete(key.id);
+        const keysMap = this.valueToKeysMap.get(value.id);
+        if (keysMap) {
+            keysMap.delete(key.id);
+            if (keysMap.size === 0) {
+                this.valueToKeysMap.delete(value.id);
+            }
+        }
+    }
+
+    removeValue(value: Identifier): void {
+        const keysMap = this.valueToKeysMap.get(value.id);
+        if (!keysMap) {
+            return;
+        }
+        this.valueToKeysMap.delete(value.id);
+        for (const keyId of keysMap.keys()) {
+            this.keyToValueMap.delete(keyId);
+        }
+    }
+
+    *getKeys(value: Identifier): IterableIterator<K> {
+        const keysMap = this.valueToKeysMap.get(value.id);
+        if (keysMap) {
+            for (const key of keysMap.values()) {
+                yield key;
+            }
+        }
+    }
+
+    get(key: Identifier): V | undefined {
+        return this.keyToValueMap.get(key.id);
+    }
+
+    getKey(keyId: Identifier): K | undefined {
+        const value = this.keyToValueMap.get(keyId.id);
+        if (!value) {
+            return undefined;
+        }
+        return this.valueToKeysMap.get(value.id)?.get(keyId.id);
+    }
+
+    *asSequence(): IterableIterator<[K, V]> {
+        for (const keyId of this.keyToValueMap.keys()) {
+            const value = this.keyToValueMap.get(keyId);
+            if (value) {
+                const key = this.valueToKeysMap.get(value.id)?.get(keyId);
+                if (key) {
+                    yield [key, value];
+                }
+            }
+        }
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/command/general-shape-commands.ts b/monosketch-svelte/src/lib/mono/shape/command/general-shape-commands.ts
new file mode 100644
index 000000000..9d67e445a
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/command/general-shape-commands.ts
@@ -0,0 +1,57 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import type { Rect } from "$libs/graphics-geo/rect";
+import type { ShapeExtra } from "$mono/shape/extra/shape-extra";
+import { type Command, ShapeManager } from "$mono/shape/shape-manager";
+import type { AbstractShape } from "$mono/shape/shape/abstract-shape";
+import type { Group } from "$mono/shape/shape/group";
+
+/**
+ * A [Command] for changing the bound of a shape.
+ */
+export class ChangeBound implements Command {
+    constructor(
+        private readonly target: AbstractShape,
+        private readonly newBound: Rect,
+    ) {
+    }
+
+    getDirectAffectedParent(shapeManager: ShapeManager): Group | null {
+        return shapeManager.getGroup(this.target.parentId);
+    }
+
+    execute(_shapeManager: ShapeManager, parent: Group) {
+        const currentVersion = this.target.versionCode;
+        this.target.setBound(this.newBound);
+        if (currentVersion === this.target.versionCode) {
+            return;
+        }
+
+        parent.update(() => true);
+    }
+}
+
+/**
+ * A [Command] for changing the extra of a shape.
+ */
+export class ChangeExtra implements Command {
+    constructor(
+        private readonly target: AbstractShape,
+        private readonly newExtra: ShapeExtra,
+    ) {
+    }
+
+    getDirectAffectedParent(shapeManager: ShapeManager): Group | null {
+        return shapeManager.getGroup(this.target.parentId);
+    }
+
+    execute(_shapeManager: ShapeManager, parent: Group) {
+        const currentVersion = this.target.versionCode;
+        this.target.setExtra(this.newExtra);
+        if (currentVersion !== this.target.versionCode) {
+            parent.update(() => true);
+        }
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/command/line-commands.ts b/monosketch-svelte/src/lib/mono/shape/command/line-commands.ts
new file mode 100644
index 000000000..141d6e50f
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/command/line-commands.ts
@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+
+import type { Point } from "$libs/graphics-geo/point";
+import { type Command, ShapeManager } from "$mono/shape/shape-manager";
+import type { AbstractShape } from "$mono/shape/shape/abstract-shape";
+import type { Group } from "$mono/shape/shape/group";
+import type { Line } from "$mono/shape/shape/line";
+import type { LineAnchorPointUpdate } from "$mono/shape/shape/linehelper";
+
+/**
+ * A [Command] for changing Line shape's Anchors.
+ *
+ * @param isUpdateConfirmed The flag for running Line's points reduction. If this is true, merging
+ * same line points process will be conducted.
+ */
+export class MoveLineAnchor implements Command {
+    constructor(
+        private readonly target: Line,
+        private readonly anchorPointUpdate: LineAnchorPointUpdate,
+        private readonly isUpdateConfirmed: boolean,
+        private readonly justMoveAnchor: boolean,
+        private readonly connectShape: AbstractShape | null,
+    ) {
+    }
+
+    getDirectAffectedParent(shapeManager: ShapeManager): Group | null {
+        return shapeManager.getGroup(this.target.parentId);
+    }
+
+    execute(shapeManager: ShapeManager, parent: Group) {
+        const currentVersion = this.target.versionCode;
+        this.target.moveAnchorPoint(
+            this.anchorPointUpdate,
+            this.isUpdateConfirmed,
+            this.justMoveAnchor,
+        );
+        if (currentVersion === this.target.versionCode) {
+            return;
+        }
+
+        if (this.connectShape) {
+            shapeManager.shapeConnector.addConnector(this.target, this.anchorPointUpdate.anchor, this.connectShape);
+        } else {
+            shapeManager.shapeConnector.removeConnector(this.target, this.anchorPointUpdate.anchor);
+        }
+        parent.update(() => true);
+    }
+}
+
+/**
+ * A [Command] for updating Line shape's edges.
+ *
+ * @param isUpdateConfirmed The flag for running Line's points reduction. If this is true, merging
+ *  * same line points process will be conducted.
+ */
+export class MoveLineEdge implements Command {
+    constructor(
+        private readonly target: Line,
+        private readonly edgeId: number,
+        private readonly point: Point,
+        private readonly isUpdateConfirmed: boolean,
+    ) {
+    }
+
+    getDirectAffectedParent(shapeManager: ShapeManager): Group | null {
+        return shapeManager.getGroup(this.target.parentId);
+    }
+
+    execute(shapeManager: ShapeManager, parent: Group) {
+        const currentVersion = this.target.versionCode;
+        this.target.moveEdge(this.edgeId, this.point, this.isUpdateConfirmed);
+        parent.update(() => currentVersion !== this.target.versionCode);
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/command/shape-manager-commands.ts b/monosketch-svelte/src/lib/mono/shape/command/shape-manager-commands.ts
new file mode 100644
index 000000000..30ed2cc37
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/command/shape-manager-commands.ts
@@ -0,0 +1,146 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { AddPosition, MoveActionType } from "$mono/shape/collection/quick-list";
+import { type Command, ShapeManager } from "$mono/shape/shape-manager";
+import type { AbstractShape } from "$mono/shape/shape/abstract-shape";
+import { Group } from "$mono/shape/shape/group";
+
+/**
+ * A [Command] for adding new shape into [ShapeManager].
+ */
+export class AddShape implements Command {
+    constructor(private readonly shape: AbstractShape) {
+        this.shape = shape;
+    }
+
+    getDirectAffectedParent(shapeManager: ShapeManager): Group | null {
+        return shapeManager.getGroup(this.shape.parentId);
+    }
+
+    execute(shapeManager: ShapeManager, parent: Group) {
+        parent.add(this.shape);
+        this.shape.parentId = parent.id;
+        shapeManager.register(this.shape);
+    }
+}
+
+/**
+ * A [Command] for removing a shape from [ShapeManager].
+ */
+export class RemoveShape implements Command {
+    constructor(private readonly shape: AbstractShape) {
+        this.shape = shape;
+    }
+
+    getDirectAffectedParent(shapeManager: ShapeManager): Group | null {
+        return shapeManager.getGroup(this.shape.parentId);
+    }
+
+    execute(shapeManager: ShapeManager, parent: Group) {
+        parent.remove(this.shape);
+        shapeManager.unregister(this.shape);
+
+        if (parent === shapeManager.root) {
+            return;
+        }
+        switch (parent.itemCount) {
+            case 1:
+                shapeManager.execute(new Ungroup(parent));
+                break;
+            case 0:
+                shapeManager.execute(new RemoveShape(parent));
+                break;
+        }
+    }
+}
+
+/**
+ * A [Command] for grouping shapes.
+ */
+export class GroupShapes implements Command {
+    constructor(private readonly sameParentShapes: AbstractShape[]) {
+        this.sameParentShapes = sameParentShapes;
+    }
+
+    getDirectAffectedParent(shapeManager: ShapeManager): Group | null {
+        if (this.sameParentShapes.length < 2) {
+            return null;
+        }
+        const parentId = this.sameParentShapes[0].parentId;
+        if (this.sameParentShapes.some(shape => shape.parentId !== parentId)) {
+            return null;
+        }
+        return shapeManager.getGroup(parentId);
+    }
+
+    execute(shapeManager: ShapeManager, parent: Group) {
+        const group = Group.create({ parentId: parent.id });
+        parent.add(group, AddPosition.After(this.sameParentShapes[this.sameParentShapes.length - 1]));
+        shapeManager.register(group);
+
+        for (const shape of this.sameParentShapes) {
+            parent.remove(shape);
+            shape.parentId = group.id;
+            group.add(shape);
+        }
+    }
+}
+
+/**
+ * A [Command] for decomposing a [Group].
+ */
+export class Ungroup implements Command {
+    constructor(private readonly group: Group) {
+        this.group = group;
+    }
+
+    getDirectAffectedParent(shapeManager: ShapeManager): Group | null {
+        return shapeManager.getGroup(this.group.parentId);
+    }
+
+    execute(shapeManager: ShapeManager, parent: Group) {
+        const items = this.group.itemArray.reverse();
+
+        for (const shape of items) {
+            this.group.remove(shape);
+            shape.parentId = null;
+            parent.add(shape, AddPosition.After(this.group));
+        }
+        shapeManager.execute(new RemoveShape(this.group));
+    }
+}
+
+/**
+ * A [Command] for changing order of a shape.
+ */
+export class ChangeOrder implements Command {
+
+    constructor(private readonly shape: AbstractShape, private readonly changeOrderType: ChangeOrderType) {
+        this.shape = shape;
+        this.changeOrderType = changeOrderType;
+    }
+
+    getDirectAffectedParent(shapeManager: ShapeManager): Group | null {
+        return shapeManager.getGroup(this.shape.parentId);
+    }
+
+    execute(_shapeManager: ShapeManager, parent: Group) {
+        parent.changeOrder(this.shape, ChangeOrderTypeToMoveActionType[this.changeOrderType]);
+    }
+}
+
+export enum ChangeOrderType {
+    FORWARD,
+    BACKWARD,
+    FRONT,
+    BACK,
+}
+
+const ChangeOrderTypeToMoveActionType: Record<ChangeOrderType, MoveActionType> = {
+    [ChangeOrderType.FORWARD]: MoveActionType.DOWN,
+    [ChangeOrderType.BACKWARD]: MoveActionType.UP,
+    [ChangeOrderType.FRONT]: MoveActionType.BOTTOM,
+    [ChangeOrderType.BACK]: MoveActionType.TOP,
+};
diff --git a/monosketch-svelte/src/lib/mono/shape/command/text-commands.ts b/monosketch-svelte/src/lib/mono/shape/command/text-commands.ts
new file mode 100644
index 000000000..97a6fe1be
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/command/text-commands.ts
@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+
+import { type Command, ShapeManager } from "$mono/shape/shape-manager";
+import type { Group } from "$mono/shape/shape/group";
+import type { Text } from "$mono/shape/shape/text";
+
+/**
+ * A [Command] for changing text for Text shape.
+ */
+export class ChangeText implements Command {
+    constructor(private readonly target: Text, private readonly newText: string) {
+    }
+
+    getDirectAffectedParent(shapeManager: ShapeManager): Group | null {
+        return shapeManager.getGroup(this.target.parentId);
+    }
+
+    execute(_shapeManager: ShapeManager, parent: Group) {
+        const currentVersion = this.target.versionCode;
+        this.target.setText(this.newText);
+        parent.update(() => currentVersion !== this.target.versionCode);
+    }
+}
+
+/**
+ * A [Command] for making an uneditable text to be editable.
+ */
+export class MakeTextEditable implements Command {
+    constructor(private readonly target: Text) {
+    }
+
+    getDirectAffectedParent(shapeManager: ShapeManager): Group | null {
+        return shapeManager.getGroup(this.target.parentId);
+    }
+
+    execute(_shapeManager: ShapeManager, parent: Group) {
+        const currentVersion = this.target.versionCode;
+        this.target.makeTextEditable();
+        parent.update(() => currentVersion !== this.target.versionCode);
+    }
+}
+
+/**
+ * A [Command] for updating text shape's text editing mode.
+ */
+export class UpdateTextEditingMode implements Command {
+    constructor(private readonly target: Text, private readonly isEditing: boolean) {
+    }
+
+    getDirectAffectedParent(shapeManager: ShapeManager): Group | null {
+        return shapeManager.getGroup(this.target.parentId);
+    }
+
+    execute(_shapeManager: ShapeManager, parent: Group) {
+        const currentVersion = this.target.versionCode;
+        this.target.setTextEditingMode(this.isEditing);
+        parent.update(() => currentVersion !== this.target.versionCode);
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/connector/line-connector.test.ts b/monosketch-svelte/src/lib/mono/shape/connector/line-connector.test.ts
new file mode 100644
index 000000000..bbd8ca5ae
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/connector/line-connector.test.ts
@@ -0,0 +1,208 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { DirectedPoint, Direction } from "$libs/graphics-geo/point";
+import { Around, ShapeConnectorUseCase } from "$mono/shape/connector/line-connector";
+import { describe, it, expect } from 'vitest';
+import { Rect } from '$libs/graphics-geo/rect';
+
+type PointAroundTuple = [DirectedPoint, Around];
+
+describe('ShapeConnectorUseCase', () => {
+    it('testGetAround_notAround', () => {
+        const rect = Rect.byLTRB(4, 20, 10, 30);
+
+        const nonAroundPoints: DirectedPoint[] = [
+            // Around left edge
+            DirectedPoint.ofF(Direction.HORIZONTAL, 2, 25),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 6, 25),
+            // Around right edge
+            DirectedPoint.ofF(Direction.HORIZONTAL, 8, 25),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 12, 25),
+            // Around top edge
+            DirectedPoint.ofF(Direction.HORIZONTAL, 6, 18),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 6, 22),
+            // Around bottom edge
+            DirectedPoint.ofF(Direction.HORIZONTAL, 6, 28),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 6, 32),
+            // On left edge - outside top
+            DirectedPoint.ofF(Direction.HORIZONTAL, 3, 18),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 4, 18),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 5, 18),
+            // On left edge - outside bottom
+            DirectedPoint.ofF(Direction.HORIZONTAL, 3, 32),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 4, 32),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 5, 32),
+            // On right edge - outside top
+            DirectedPoint.ofF(Direction.HORIZONTAL, 9, 18),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 10, 18),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 11, 18),
+            // On right edge - outside bottom
+            DirectedPoint.ofF(Direction.HORIZONTAL, 9, 32),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 10, 32),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 11, 32),
+            // On top edge - outside left
+            DirectedPoint.ofF(Direction.HORIZONTAL, 2, 19),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 2, 20),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 2, 21),
+            // On top edge - outside right
+            DirectedPoint.ofF(Direction.HORIZONTAL, 12, 19),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 12, 20),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 12, 21),
+            // On bottom edge - outside left
+            DirectedPoint.ofF(Direction.HORIZONTAL, 2, 29),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 2, 30),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 2, 31),
+            // On bottom edge - outside right
+            DirectedPoint.ofF(Direction.HORIZONTAL, 12, 29),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 12, 30),
+            DirectedPoint.ofF(Direction.HORIZONTAL, 12, 31),
+        ];
+
+        for (const point of nonAroundPoints) {
+            console.log(point);
+            expect(ShapeConnectorUseCase.getAround(point, rect)).toBeNull();
+        }
+    });
+
+    it('testGetAround_Left', () => {
+        const rect = Rect.byLTRB(4, 20, 10, 30);
+        const leftPointsToExpectedAround: PointAroundTuple[] = [
+            // No conflict
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 5, 25), Around.LEFT],
+            [DirectedPoint.ofF(Direction.VERTICAL, 3, 25), Around.LEFT],
+            [DirectedPoint.ofF(Direction.VERTICAL, 4, 25), Around.LEFT],
+            [DirectedPoint.ofF(Direction.VERTICAL, 5, 25), Around.LEFT],
+            // Conflict
+            // Horizontal, top edge -> left
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 3, 20), Around.LEFT],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 4, 20), Around.LEFT],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 5, 20), Around.LEFT],
+            // Vertical, top edge -> top
+            [DirectedPoint.ofF(Direction.VERTICAL, 3, 20), Around.TOP],
+            [DirectedPoint.ofF(Direction.VERTICAL, 4, 20), Around.TOP],
+            [DirectedPoint.ofF(Direction.VERTICAL, 5, 20), Around.TOP],
+            // Horizontal, bottom edge -> left
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 3, 30), Around.LEFT],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 4, 30), Around.LEFT],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 5, 30), Around.LEFT],
+            // Vertical, bottom edge -> bottom
+            [DirectedPoint.ofF(Direction.VERTICAL, 3, 30), Around.BOTTOM],
+            [DirectedPoint.ofF(Direction.VERTICAL, 4, 30), Around.BOTTOM],
+            [DirectedPoint.ofF(Direction.VERTICAL, 5, 30), Around.BOTTOM],
+        ];
+
+        for (const [point, expected] of leftPointsToExpectedAround) {
+            console.log(point);
+            expect(ShapeConnectorUseCase.getAround(point, rect)).toBe(expected);
+        }
+    });
+
+    it('testGetAround_Right', () => {
+        const rect = Rect.byLTRB(4, 20, 10, 30);
+        const rightPointsToExpectedAround: PointAroundTuple[] = [
+            // No conflict
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 9, 25), Around.RIGHT],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 10, 25), Around.RIGHT],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 11, 25), Around.RIGHT],
+            [DirectedPoint.ofF(Direction.VERTICAL, 9, 25), Around.RIGHT],
+            [DirectedPoint.ofF(Direction.VERTICAL, 10, 25), Around.RIGHT],
+            [DirectedPoint.ofF(Direction.VERTICAL, 11, 25), Around.RIGHT],
+            // Conflict
+            // Horizontal, top edge -> left
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 9, 20), Around.RIGHT],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 10, 20), Around.RIGHT],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 11, 20), Around.RIGHT],
+            // Vertical, top edge -> top
+            [DirectedPoint.ofF(Direction.VERTICAL, 9, 20), Around.TOP],
+            [DirectedPoint.ofF(Direction.VERTICAL, 10, 20), Around.TOP],
+            [DirectedPoint.ofF(Direction.VERTICAL, 11, 20), Around.TOP],
+            // Horizontal, bottom edge -> left
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 9, 30), Around.RIGHT],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 10, 30), Around.RIGHT],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 11, 30), Around.RIGHT],
+            // Vertical, bottom edge -> bottom
+            [DirectedPoint.ofF(Direction.VERTICAL, 9, 30), Around.BOTTOM],
+            [DirectedPoint.ofF(Direction.VERTICAL, 10, 30), Around.BOTTOM],
+            [DirectedPoint.ofF(Direction.VERTICAL, 11, 30), Around.BOTTOM],
+        ];
+
+        for (const [point, expected] of rightPointsToExpectedAround) {
+            console.log(point);
+            expect(ShapeConnectorUseCase.getAround(point as DirectedPoint, rect)).toBe(expected);
+        }
+    });
+
+    it('testGetAround_Top', () => {
+        const rect = Rect.byLTRB(4, 20, 10, 30);
+        const topPointsToExpectedAround: PointAroundTuple[] = [
+            // No conflict
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 6, 19), Around.TOP],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 6, 20), Around.TOP],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 6, 21), Around.TOP],
+            [DirectedPoint.ofF(Direction.VERTICAL, 6, 19), Around.TOP],
+            [DirectedPoint.ofF(Direction.VERTICAL, 6, 20), Around.TOP],
+            [DirectedPoint.ofF(Direction.VERTICAL, 6, 21), Around.TOP],
+            // Conflict
+            // Vertical, left edge -> top
+            [DirectedPoint.ofF(Direction.VERTICAL, 4, 19), Around.TOP],
+            [DirectedPoint.ofF(Direction.VERTICAL, 4, 20), Around.TOP],
+            [DirectedPoint.ofF(Direction.VERTICAL, 4, 21), Around.TOP],
+            // Horizontal, left edge -> left
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 4, 19), Around.LEFT],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 4, 20), Around.LEFT],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 4, 21), Around.LEFT],
+            // Vertical, right edge -> top
+            [DirectedPoint.ofF(Direction.VERTICAL, 10, 19), Around.TOP],
+            [DirectedPoint.ofF(Direction.VERTICAL, 10, 20), Around.TOP],
+            [DirectedPoint.ofF(Direction.VERTICAL, 10, 21), Around.TOP],
+            // Horizontal, right edge -> right
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 10, 19), Around.RIGHT],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 10, 20), Around.RIGHT],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 10, 21), Around.RIGHT],
+        ];
+
+        for (const [point, expected] of topPointsToExpectedAround) {
+            console.log(point);
+            expect(ShapeConnectorUseCase.getAround(point, rect)).toBe(expected);
+        }
+    });
+
+    it('testGetAround_Bottom', () => {
+        const rect = Rect.byLTRB(4, 20, 10, 30);
+        const bottomPointsToExpectedAround: PointAroundTuple[] = [
+            // No conflict
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 6, 29), Around.BOTTOM],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 6, 30), Around.BOTTOM],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 6, 31), Around.BOTTOM],
+            [DirectedPoint.ofF(Direction.VERTICAL, 6, 29), Around.BOTTOM],
+            [DirectedPoint.ofF(Direction.VERTICAL, 6, 30), Around.BOTTOM],
+            [DirectedPoint.ofF(Direction.VERTICAL, 6, 31), Around.BOTTOM],
+            // Conflict
+            // Vertical, left edge -> bottom
+            [DirectedPoint.ofF(Direction.VERTICAL, 4, 29), Around.BOTTOM],
+            [DirectedPoint.ofF(Direction.VERTICAL, 4, 30), Around.BOTTOM],
+            [DirectedPoint.ofF(Direction.VERTICAL, 4, 31), Around.BOTTOM],
+            // Horizontal, left edge -> left
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 4, 29), Around.LEFT],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 4, 30), Around.LEFT],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 4, 31), Around.LEFT],
+            // Vertical, right edge -> bottom
+            [DirectedPoint.ofF(Direction.VERTICAL, 10, 29), Around.BOTTOM],
+            [DirectedPoint.ofF(Direction.VERTICAL, 10, 30), Around.BOTTOM],
+            [DirectedPoint.ofF(Direction.VERTICAL, 10, 31), Around.BOTTOM],
+            // Horizontal, right edge -> right
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 10, 29), Around.RIGHT],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 10, 30), Around.RIGHT],
+            [DirectedPoint.ofF(Direction.HORIZONTAL, 10, 31), Around.RIGHT],
+        ];
+
+        for (const [point, expected] of bottomPointsToExpectedAround) {
+            console.log(point);
+            expect(ShapeConnectorUseCase.getAround(point, rect)).toBe(expected);
+        }
+    });
+
+    // TODO: Add unit test for calculateRatio and calculateOffset
+});
diff --git a/monosketch-svelte/src/lib/mono/shape/connector/line-connector.ts b/monosketch-svelte/src/lib/mono/shape/connector/line-connector.ts
new file mode 100644
index 000000000..348901d7a
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/connector/line-connector.ts
@@ -0,0 +1,166 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+
+import { DirectedPoint, Direction, Point, PointF } from "$libs/graphics-geo/point";
+import type { Rect } from "$libs/graphics-geo/rect";
+import type { Identifier } from "$mono/shape/collection/identifier";
+import type { AbstractShape } from "$mono/shape/shape/abstract-shape";
+import type { LineAnchor } from "$mono/shape/shape/linehelper";
+import { Rectangle } from "$mono/shape/shape/rectangle";
+
+/**
+ * A [Identifier] of Line's connector.
+ * This is a minimal version of [LineConnector] that only has required information to identify
+ * the connector.
+ */
+export class ConnectorIdentifier implements Identifier {
+    id: string;
+
+    constructor(lineId: string, anchor: LineAnchor) {
+        this.id = toId(lineId, anchor);
+    }
+}
+
+/**
+ * A connector for [Line].
+ *
+ * @property lineId The id of the target of this connector
+ * @property anchor The extra information for identifying which head of the line (start or end)
+ * @property ratio The relative position of the connector based on the size of the box.
+ * @property offset The absolute offset of the connector to the box
+ */
+export class LineConnector extends ConnectorIdentifier {
+    constructor(
+        public lineId: string,
+        public anchor: LineAnchor,
+        public ratio: PointF,
+        public offset: Point,
+    ) {
+        super(lineId, anchor);
+    }
+}
+
+export enum Around {
+    LEFT, TOP, RIGHT, BOTTOM
+}
+
+const toId = (lineId: string, anchor: LineAnchor): string => `${lineId}_${anchor}`;
+
+/**
+ * A Use case for shape connector
+ */
+class ShapeConnectorUseCaseImpl {
+    private static readonly MAX_DISTANCE = 1;
+
+    getConnectableShape(point: Point, candidates: Iterable<AbstractShape>): AbstractShape | null {
+        for (const shape of Array.from(candidates).reverse()) {
+            if (this.canConnect(point, shape)) {
+                return shape;
+            }
+        }
+        return null;
+    }
+
+    private canConnect(point: Point, shape: AbstractShape): boolean {
+        const canHaveConnector = shape instanceof Rectangle || shape instanceof Text;
+        if (!canHaveConnector) {
+            return false;
+        }
+        return this.detectAround(point, shape.bound).some(Boolean);
+    }
+
+    getAround(anchorPoint: DirectedPoint, boxBound: Rect): Around | null {
+        const [isAroundLeft, isAroundRight, isAroundTop, isAroundBottom] = this.detectAround(anchorPoint.point, boxBound);
+
+        const isHorizontal = anchorPoint.direction === Direction.HORIZONTAL;
+        if (isAroundLeft) {
+            if (isAroundTop && !isHorizontal) return Around.TOP;
+            if (isAroundBottom && !isHorizontal) return Around.BOTTOM;
+            return Around.LEFT;
+        }
+
+        if (isAroundTop) {
+            if (isAroundRight && isHorizontal) return Around.RIGHT;
+            return Around.TOP;
+        }
+
+        if (isAroundRight) {
+            if (isAroundBottom && !isHorizontal) return Around.BOTTOM;
+            return Around.RIGHT;
+        }
+
+        if (isAroundBottom) return Around.BOTTOM;
+
+        return null;
+    }
+
+    private detectAround(point: Point, boxBound: Rect): boolean[] {
+        const isAroundLeft = this.isAround(point.left, boxBound.left) &&
+            this.isAround(point.top, boxBound.top, boxBound.bottom);
+        const isAroundRight = this.isAround(point.left, boxBound.right) &&
+            this.isAround(point.top, boxBound.top, boxBound.bottom);
+        const isAroundTop = this.isAround(point.top, boxBound.top) &&
+            this.isAround(point.left, boxBound.left, boxBound.right);
+        const isAroundBottom = this.isAround(point.top, boxBound.bottom) &&
+            this.isAround(point.left, boxBound.left, boxBound.right);
+        return [isAroundLeft, isAroundRight, isAroundTop, isAroundBottom];
+    }
+
+    private isAround(value: number, lower: number, upper: number = lower, distance: number = ShapeConnectorUseCaseImpl.MAX_DISTANCE): boolean {
+        return value >= (lower - distance) && value <= (upper + distance);
+    }
+
+    calculateRatio(around: Around, anchorPoint: DirectedPoint, boxBound: Rect): PointF {
+        const leftRatio = (anchorPoint.left - boxBound.left) / this.adjustSizeValue(boxBound.width);
+        const topRatio = (anchorPoint.top - boxBound.top) / this.adjustSizeValue(boxBound.height);
+        switch (around) {
+            case Around.LEFT:
+                return PointF.create({ left: 0.0, top: Math.min(Math.max(topRatio, 0.0), 1.0) });
+            case Around.TOP:
+                return PointF.create({ left: Math.min(Math.max(leftRatio, 0.0), 1.0), top: 0.0 });
+            case Around.RIGHT:
+                return PointF.create({ left: 1.0, top: Math.min(Math.max(topRatio, 0.0), 1.0) });
+            case Around.BOTTOM:
+                return PointF.create({ left: Math.min(Math.max(leftRatio, 0.0), 1.0), top: 1.0 });
+        }
+    }
+
+    calculateOffset(around: Around, anchorPoint: DirectedPoint, boxBound: Rect): Point {
+        switch (around) {
+            case Around.LEFT:
+                return new Point(anchorPoint.left - boxBound.left, this.offsetToRange(anchorPoint.top, boxBound.top, boxBound.bottom));
+            case Around.TOP:
+                return new Point(this.offsetToRange(anchorPoint.left, boxBound.left, boxBound.right), anchorPoint.top - boxBound.top);
+            case Around.RIGHT:
+                return new Point(anchorPoint.left - boxBound.right, this.offsetToRange(anchorPoint.top, boxBound.top, boxBound.bottom));
+            case Around.BOTTOM:
+                return new Point(this.offsetToRange(anchorPoint.left, boxBound.left, boxBound.right), anchorPoint.top - boxBound.bottom);
+        }
+    }
+
+    getPointInNewBound(lineConnector: LineConnector, direction: Direction, boxBound: Rect): DirectedPoint {
+        return DirectedPoint.ofF(direction, this.getLeftInNewBound(lineConnector, boxBound), this.getTopInNewBound(lineConnector, boxBound));
+    }
+
+    private getLeftInNewBound(lineConnector: LineConnector, boxBound: Rect): number {
+        return Math.round(boxBound.left + (boxBound.width - 1) * lineConnector.ratio.left + lineConnector.offset.left);
+    }
+
+    private getTopInNewBound(lineConnector: LineConnector, boxBound: Rect): number {
+        return Math.round(boxBound.top + (boxBound.height - 1) * lineConnector.ratio.top + lineConnector.offset.top);
+    }
+
+    private offsetToRange(value: number, lower: number, upper: number): number {
+        if (value < lower) return value - lower;
+        if (value > upper) return value - upper;
+        return 0;
+    }
+
+    private adjustSizeValue(value: number): number {
+        return Math.max(value - 1, 1);
+    }
+}
+
+export const ShapeConnectorUseCase = new ShapeConnectorUseCaseImpl();
diff --git a/monosketch-svelte/src/lib/mono/shape/connector/shape-connector.ts b/monosketch-svelte/src/lib/mono/shape/connector/shape-connector.ts
new file mode 100644
index 000000000..c146566fd
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/connector/shape-connector.ts
@@ -0,0 +1,97 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { type DirectedPoint, Point, PointF } from "$libs/graphics-geo/point";
+import type { Rect } from "$libs/graphics-geo/rect";
+import { TwoWayQuickMap } from "$mono/shape/collection/two-way-quick-map";
+import { ConnectorIdentifier, LineConnector, ShapeConnectorUseCase } from "$mono/shape/connector/line-connector";
+import { SerializableLineConnector } from "$mono/shape/serialization/connector";
+import { AbstractShape, ShapeIdentifier } from "$mono/shape/shape/abstract-shape";
+import { Line } from "$mono/shape/shape/line";
+import { LineAnchor } from "$mono/shape/shape/linehelper";
+
+/**
+ * A manager of shape connectors.
+ */
+export class ShapeConnector {
+    private lineConnectors = new TwoWayQuickMap<LineConnector, ShapeIdentifier>();
+
+    addConnector(line: Line, anchor: LineAnchor, shape: AbstractShape) {
+        const anchorPoint = anchor === LineAnchor.START ? line.startPoint : line.endPoint;
+        const boxBound = shape.bound;
+        const result = this.calculateConnectorRatioAndOffset(anchorPoint, boxBound);
+        if (!result) return;
+
+        const [ratio, offset] = result;
+        const connector = new LineConnector(line.id, anchor, ratio, offset);
+
+        // TODO: Based on the position of anchor point and shape's bound, the direction of the
+        //  anchor must be updated to optimise the initial directions of the line
+
+        this.lineConnectors.set(connector, shape.identifier);
+    }
+
+    getConnectors(shape: AbstractShape): LineConnector[] {
+        return Array.from(this.lineConnectors.getKeys(shape));
+    }
+
+    removeConnector(line: Line, anchor: LineAnchor) {
+        this.lineConnectors.removeKey(new ConnectorIdentifier(line.id, anchor));
+    }
+
+    hasConnector(line: Line, anchor: LineAnchor): boolean {
+        return this.lineConnectors.get(new ConnectorIdentifier(line.id, anchor)) !== undefined;
+    }
+
+    removeShape(shape: AbstractShape) {
+        this.lineConnectors.removeValue(shape);
+
+        if (shape instanceof Line) {
+            this.removeConnector(shape, LineAnchor.START);
+            this.removeConnector(shape, LineAnchor.END);
+        }
+    }
+
+    /**
+     * Calculates the connector ratio. Returns null if the two cannot connect.
+     */
+    private calculateConnectorRatioAndOffset(anchorPoint: DirectedPoint, boxBound: Rect): [PointF, Point] | null {
+        const around = ShapeConnectorUseCase.getAround(anchorPoint, boxBound);
+        if (!around) {
+            return null;
+        }
+
+        const ratio = ShapeConnectorUseCase.calculateRatio(around, anchorPoint, boxBound);
+        const offset = ShapeConnectorUseCase.calculateOffset(around, anchorPoint, boxBound);
+        return [ratio, offset];
+    }
+
+    toSerializable(): SerializableLineConnector[] {
+        return Array.from(this.lineConnectors.asSequence()).map(([lineConnector, target]) =>
+            ShapeConnector.toSerializableConnector(lineConnector, target),
+        );
+    }
+
+    static fromSerializable(serializedConnectors: SerializableLineConnector[]): ShapeConnector {
+        const manager = new ShapeConnector();
+        for (const conn of serializedConnectors) {
+            const lineConnector = new LineConnector(conn.lineId, conn.anchor, conn.ratio, conn.offset);
+            manager.lineConnectors.set(lineConnector, new ShapeIdentifier(conn.targetId));
+        }
+        return manager;
+    }
+
+    static toSerializableConnector(
+        lineConnector: LineConnector,
+        targetOrIdentifier: ShapeIdentifier,
+    ): SerializableLineConnector {
+        return SerializableLineConnector.create({
+            lineId: lineConnector.lineId,
+            anchor: lineConnector.anchor,
+            targetId: targetOrIdentifier.id,
+            ratio: lineConnector.ratio,
+            offset: lineConnector.offset,
+        });
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/extra/extra-manager.ts b/monosketch-svelte/src/lib/mono/shape/extra/extra-manager.ts
new file mode 100644
index 000000000..c80860544
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/extra/extra-manager.ts
@@ -0,0 +1,199 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Flow } from "$libs/flow";
+import {
+    PredefinedAnchorChar,
+    PredefinedRectangleFillStyle,
+    PredefinedStraightStrokeStyle,
+} from "$mono/shape/extra/predefined-styles";
+import {
+    AnchorChar, RectangleBorderCornerPattern,
+    RectangleFillStyle,
+    StraightStrokeDashPattern, StraightStrokeStyle,
+    TextAlign,
+    TextHorizontalAlign,
+    TextVerticalAlign,
+} from "$mono/shape/extra/style";
+
+export interface ILineExtra {
+    isStrokeEnabled: boolean;
+    userSelectedStrokeStyle: StraightStrokeStyle;
+    isStartAnchorEnabled: boolean;
+    userSelectedStartAnchor: AnchorChar;
+    isEndAnchorEnabled: boolean;
+    userSelectedEndAnchor: AnchorChar;
+    dashPattern: StraightStrokeDashPattern;
+    isRoundedCorner: boolean;
+}
+
+export interface IRectangleExtra {
+    isFillEnabled: boolean;
+    userSelectedFillStyle: RectangleFillStyle;
+    isBorderEnabled: boolean;
+    userSelectedBorderStyle: StraightStrokeStyle;
+    dashPattern: StraightStrokeDashPattern;
+    corner: RectangleBorderCornerPattern;
+}
+
+class ShapeExtraManagerImpl {
+    defaultRectangleExtra: IRectangleExtra = {
+        isFillEnabled: false,
+        userSelectedFillStyle: PredefinedRectangleFillStyle.PREDEFINED_STYLES[0],
+        isBorderEnabled: true,
+        userSelectedBorderStyle: PredefinedStraightStrokeStyle.PREDEFINED_STYLES[0],
+        dashPattern: StraightStrokeDashPattern.SOLID,
+        corner: RectangleBorderCornerPattern.DISABLED,
+    };
+
+    defaultLineExtra: ILineExtra = {
+        isStrokeEnabled: false,
+        userSelectedStrokeStyle: PredefinedStraightStrokeStyle.PREDEFINED_STYLES[0],
+        isStartAnchorEnabled: false,
+        userSelectedStartAnchor: PredefinedAnchorChar.PREDEFINED_ANCHOR_CHARS[0],
+        isEndAnchorEnabled: false,
+        userSelectedEndAnchor: PredefinedAnchorChar.PREDEFINED_ANCHOR_CHARS[0],
+        dashPattern: StraightStrokeDashPattern.SOLID,
+        isRoundedCorner: false,
+    };
+
+    defaultTextAlign: TextAlign = new TextAlign(
+        TextHorizontalAlign.MIDDLE,
+        TextVerticalAlign.MIDDLE,
+    );
+
+    private readonly defaultExtraStateUpdateMutableFlow = new Flow(0);
+    readonly defaultExtraStateUpdateFlow: Flow<number> = this.defaultExtraStateUpdateMutableFlow.immutable();
+
+    setDefaultValues({
+        isFillEnabled,
+        fillStyleId,
+        isBorderEnabled,
+        borderStyleId,
+        isBorderRoundedCorner,
+        borderDashPattern,
+        isLineStrokeEnabled,
+        lineStrokeStyleId,
+        isLineStrokeRoundedCorner,
+        lineDashPattern,
+        isStartHeadAnchorCharEnabled,
+        startHeadAnchorCharId,
+        isEndHeadAnchorCharEnabled,
+        endHeadAnchorCharId,
+        textHorizontalAlign,
+        textVerticalAlign,
+    }: {
+        isFillEnabled?: boolean;
+        fillStyleId?: string;
+        isBorderEnabled?: boolean;
+        borderStyleId?: string;
+        isBorderRoundedCorner?: boolean;
+        borderDashPattern?: StraightStrokeDashPattern;
+        isLineStrokeEnabled?: boolean;
+        lineStrokeStyleId?: string;
+        isLineStrokeRoundedCorner?: boolean;
+        lineDashPattern?: StraightStrokeDashPattern;
+        isStartHeadAnchorCharEnabled?: boolean;
+        startHeadAnchorCharId?: string;
+        isEndHeadAnchorCharEnabled?: boolean;
+        endHeadAnchorCharId?: string;
+        textHorizontalAlign?: TextHorizontalAlign;
+        textVerticalAlign?: TextVerticalAlign;
+    }): void {
+        const borderCorner =
+            isBorderRoundedCorner === undefined
+                ? this.defaultRectangleExtra.corner
+                : (isBorderRoundedCorner ? RectangleBorderCornerPattern.ENABLED : RectangleBorderCornerPattern.DISABLED);
+        this.defaultRectangleExtra = {
+            isFillEnabled: isFillEnabled ?? this.defaultRectangleExtra.isFillEnabled,
+            userSelectedFillStyle: this.getRectangleFillStyle(fillStyleId),
+            isBorderEnabled: isBorderEnabled ?? this.defaultRectangleExtra.isBorderEnabled,
+            userSelectedBorderStyle: this.getRectangleBorderStyle(borderStyleId),
+            dashPattern: borderDashPattern ?? this.defaultRectangleExtra.dashPattern,
+            corner: borderCorner,
+        };
+
+        this.defaultLineExtra = {
+            isStrokeEnabled: isLineStrokeEnabled ?? this.defaultLineExtra.isStrokeEnabled,
+            userSelectedStrokeStyle: this.getLineStrokeStyle(lineStrokeStyleId),
+            isStartAnchorEnabled: isStartHeadAnchorCharEnabled ?? this.defaultLineExtra.isStartAnchorEnabled,
+            userSelectedStartAnchor: this.getStartHeadAnchorChar(startHeadAnchorCharId),
+            isEndAnchorEnabled: isEndHeadAnchorCharEnabled ?? this.defaultLineExtra.isEndAnchorEnabled,
+            userSelectedEndAnchor: this.getEndHeadAnchorChar(endHeadAnchorCharId),
+            dashPattern: lineDashPattern ?? StraightStrokeDashPattern.SOLID,
+            isRoundedCorner: isLineStrokeRoundedCorner ?? this.defaultLineExtra.isRoundedCorner,
+        };
+
+        this.defaultTextAlign = new TextAlign(
+            textHorizontalAlign ?? this.defaultTextAlign.horizontalAlign,
+            textVerticalAlign ?? this.defaultTextAlign.verticalAlign,
+        );
+
+        this.defaultExtraStateUpdateMutableFlow.value = this.defaultExtraStateUpdateFlow.value! + 1;
+    }
+
+    getRectangleFillStyle(
+        id?: string,
+        defaultStyle: RectangleFillStyle = this.defaultRectangleExtra.userSelectedFillStyle,
+    ): RectangleFillStyle {
+        if (id === undefined) {
+            return defaultStyle;
+        }
+        return PredefinedRectangleFillStyle.PREDEFINED_STYLE_MAP[id] ?? defaultStyle;
+    }
+
+    getAllPredefinedRectangleFillStyles(): RectangleFillStyle[] {
+        return PredefinedRectangleFillStyle.PREDEFINED_STYLES;
+    }
+
+    getRectangleBorderStyle(
+        id?: string,
+        defaultStyle: StraightStrokeStyle = this.defaultRectangleExtra.userSelectedBorderStyle,
+    ): StraightStrokeStyle {
+        if (id === undefined) {
+            return defaultStyle;
+        }
+        return PredefinedStraightStrokeStyle.getStyle(id) ?? defaultStyle;
+    }
+
+    getLineStrokeStyle(
+        id?: string,
+        defaultStyle: StraightStrokeStyle = this.defaultLineExtra.userSelectedStrokeStyle,
+    ): StraightStrokeStyle {
+        if (id === undefined) {
+            return defaultStyle;
+        }
+        return PredefinedStraightStrokeStyle.getStyle(id) ?? defaultStyle;
+    }
+
+    getAllPredefinedStrokeStyles(): StraightStrokeStyle[] {
+        return PredefinedStraightStrokeStyle.PREDEFINED_STYLES;
+    }
+
+    getStartHeadAnchorChar(
+        id?: string,
+        defaultChar: AnchorChar = this.defaultLineExtra.userSelectedStartAnchor,
+    ): AnchorChar {
+        if (id === undefined) {
+            return defaultChar;
+        }
+        return PredefinedAnchorChar.PREDEFINED_ANCHOR_CHAR_MAP[id] ?? defaultChar;
+    }
+
+    getEndHeadAnchorChar(
+        id?: string,
+        defaultChar: AnchorChar = this.defaultLineExtra.userSelectedEndAnchor,
+    ): AnchorChar {
+        if (id === undefined) {
+            return defaultChar;
+        }
+        return PredefinedAnchorChar.PREDEFINED_ANCHOR_CHAR_MAP[id] ?? defaultChar;
+    }
+
+    getAllPredefinedAnchorChars(): AnchorChar[] {
+        return PredefinedAnchorChar.PREDEFINED_ANCHOR_CHARS;
+    }
+}
+
+export const ShapeExtraManager = new ShapeExtraManagerImpl();
diff --git a/monosketch-svelte/src/lib/mono/shape/extra/predefined-styles.ts b/monosketch-svelte/src/lib/mono/shape/extra/predefined-styles.ts
new file mode 100644
index 000000000..37da6110e
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/extra/predefined-styles.ts
@@ -0,0 +1,218 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+
+import { HALF_TRANSPARENT_CHAR, NBSP, TRANSPARENT_CHAR } from "$mono/common/character";
+import {
+    CharDrawable,
+    NinePatchDrawable,
+    NinePatchDrawablePattern,
+    RepeatRepeatableRange,
+} from "$mono/monobitmap/drawable";
+import { AnchorChar, RectangleBorderStyle, RectangleFillStyle, StraightStrokeStyle } from "$mono/shape/extra/style";
+
+/**
+ * An object for listing all predefined rectangle fill styles.
+ */
+export class PredefinedRectangleFillStyle {
+    static readonly NOFILLED_STYLE = new RectangleFillStyle(
+        "F0",
+        "No Fill",
+        new CharDrawable(TRANSPARENT_CHAR),
+    );
+
+    static readonly PREDEFINED_STYLES: RectangleFillStyle[] = [
+        RectangleFillStyle.create({ id: "F1", displayName: NBSP, drawable: new CharDrawable(' ') }),
+        RectangleFillStyle.create({ id: "F2", displayName: "█", drawable: new CharDrawable('█') }),
+        RectangleFillStyle.create({ id: "F3", displayName: "▒", drawable: new CharDrawable('▒') }),
+        RectangleFillStyle.create({ id: "F4", displayName: "░", drawable: new CharDrawable('░') }),
+        RectangleFillStyle.create({ id: "F5", displayName: "▚", drawable: new CharDrawable('▚') }),
+    ];
+
+    static readonly PREDEFINED_STYLE_MAP: { [id: string]: RectangleFillStyle } = Object.fromEntries(
+        PredefinedRectangleFillStyle.PREDEFINED_STYLES.map(style => [style.id, style]),
+    );
+}
+
+/**
+ * An object for listing all predefined StraightStrokeStyle
+ */
+export class PredefinedStraightStrokeStyle {
+    static readonly NO_STROKE = new StraightStrokeStyle(
+        "S0",
+        "No Stroke",
+        HALF_TRANSPARENT_CHAR,
+        HALF_TRANSPARENT_CHAR,
+        HALF_TRANSPARENT_CHAR,
+        HALF_TRANSPARENT_CHAR,
+        HALF_TRANSPARENT_CHAR,
+        HALF_TRANSPARENT_CHAR,
+    );
+
+    private static readonly ALL_STYLES: StraightStrokeStyle[] = [
+        PredefinedStraightStrokeStyle.NO_STROKE,
+        StraightStrokeStyle.create({
+            id: "S1",
+            displayName: "─",
+            horizontal: '─',
+            vertical: '│',
+            downLeft: '┐',
+            upRight: '┌',
+            upLeft: '┘',
+            downRight: '└',
+        }),
+        StraightStrokeStyle.create({
+            id: "S2",
+            displayName: "━",
+            horizontal: '━',
+            vertical: '┃',
+            downLeft: '┓',
+            upRight: '┏',
+            upLeft: '┛',
+            downRight: '┗',
+        }),
+        StraightStrokeStyle.create({
+            id: "S3",
+            displayName: "═",
+            horizontal: '═',
+            vertical: '║',
+            downLeft: '╗',
+            upRight: '╔',
+            upLeft: '╝',
+            downRight: '╚',
+        }),
+        StraightStrokeStyle.create({
+            id: "S4",
+            displayName: "▢",
+            horizontal: '─',
+            vertical: '│',
+            downLeft: '╮',
+            upRight: '╭',
+            upLeft: '╯',
+            downRight: '╰',
+        }),
+    ];
+
+    private static readonly ID_TO_STYLE_MAP: { [id: string]: StraightStrokeStyle } = Object.fromEntries(
+        PredefinedStraightStrokeStyle.ALL_STYLES.map(style => [style.id, style]),
+    );
+
+    private static readonly STYLE_TO_ROUNDED_CORNER_STYLE_MAP: { [id: string]: string } = {
+        "S1": "S4",
+    };
+
+    static readonly PREDEFINED_STYLES: StraightStrokeStyle[] = ["S1", "S2", "S3"].map(id => PredefinedStraightStrokeStyle.ID_TO_STYLE_MAP[id]);
+
+    static getStyle(id: string, isRounded: boolean = false): StraightStrokeStyle | null {
+        const adjustedId = isRounded ? PredefinedStraightStrokeStyle.STYLE_TO_ROUNDED_CORNER_STYLE_MAP[id] || id : id;
+        return PredefinedStraightStrokeStyle.ID_TO_STYLE_MAP[adjustedId];
+    }
+
+    static isCornerRoundable(id: string | null | undefined): boolean {
+        if (id === null || id === undefined) {
+            return false;
+        }
+        return id in PredefinedStraightStrokeStyle.STYLE_TO_ROUNDED_CORNER_STYLE_MAP;
+    }
+}
+
+/**
+ * An object for listing all predefined anchor chars.
+ */
+export class PredefinedAnchorChar {
+    static readonly PREDEFINED_ANCHOR_CHARS: AnchorChar[] = [
+        AnchorChar.create({ id: "A1", displayName: "▶", left: '◀', right: '▶', top: '▲', bottom: '▼' }),
+        AnchorChar.create({ id: "A12", displayName: "▷", left: '◁', right: '▷', top: '△', bottom: '▽' }),
+        AnchorChar.create({ id: "A13", displayName: "►", left: '◄', right: '►', top: '▲', bottom: '▼' }),
+        AnchorChar.create({ id: "A14", displayName: "▻", left: '◅', right: '▻', top: '△', bottom: '▽' }),
+        AnchorChar.create({ id: "A2", displayName: "■", all: '■' }),
+        AnchorChar.create({ id: "A21", displayName: "□", all: '□' }),
+        AnchorChar.create({ id: "A220", displayName: "◆", all: '◆' }),
+        AnchorChar.create({ id: "A221", displayName: "◇", all: '◇' }),
+        AnchorChar.create({ id: "A3", displayName: "○", all: '○' }),
+        AnchorChar.create({ id: "A4", displayName: "◎", all: '◎' }),
+        AnchorChar.create({ id: "A5", displayName: "●", all: '●' }),
+        AnchorChar.create({ id: "A6", displayName: "├", left: '├', right: '┤', top: '┬', bottom: '┴' }),
+        AnchorChar.create({ id: "A61", displayName: "┣", left: '┣', right: '┫', top: '┳', bottom: '┻' }),
+        AnchorChar.create({ id: "A62", displayName: "╠", left: '╠', right: '╣', top: '╦', bottom: '╩' }),
+    ];
+
+    static readonly PREDEFINED_ANCHOR_CHAR_MAP: { [id: string]: AnchorChar } = Object.fromEntries(
+        PredefinedAnchorChar.PREDEFINED_ANCHOR_CHARS.map(char => [char.id, char]),
+    );
+}
+
+/**
+ * An object for listing all predefined rectangle border styles.
+ */
+export class PredefinedRectangleBorderStyle {
+    private static readonly PATTERN_TEXT_NO_BORDER = `
+###
+# #
+###`.trim().replace(/#/g, HALF_TRANSPARENT_CHAR);
+
+    private static readonly PATTERN_TEXT_0 = `
+┌─┐
+│ │
+└─┘
+    `.trim();
+
+    private static readonly PATTERN_TEXT_1 = `
+┏━┓
+┃ ┃
+┗━┛
+    `.trim();
+
+    private static readonly PATTERN_TEXT_2 = `
+╔═╗
+║ ║
+╚═╝
+    `.trim();
+
+    private static readonly REPEATABLE_RANGE_0 = new RepeatRepeatableRange(1, 1);
+
+    static readonly NO_BORDER = new RectangleBorderStyle(
+        "B0",
+        "No border",
+        new NinePatchDrawable(
+            NinePatchDrawablePattern.fromText(PredefinedRectangleBorderStyle.PATTERN_TEXT_NO_BORDER),
+            PredefinedRectangleBorderStyle.REPEATABLE_RANGE_0,
+            PredefinedRectangleBorderStyle.REPEATABLE_RANGE_0
+        )
+    );
+
+    static readonly PREDEFINED_STYLES: RectangleBorderStyle[] = [
+        new RectangleBorderStyle(
+            "B1",
+            "─",
+            new NinePatchDrawable(
+                NinePatchDrawablePattern.fromText(PredefinedRectangleBorderStyle.PATTERN_TEXT_0),
+                PredefinedRectangleBorderStyle.REPEATABLE_RANGE_0,
+                PredefinedRectangleBorderStyle.REPEATABLE_RANGE_0
+            )
+        ),
+        new RectangleBorderStyle(
+            "B2",
+            "━",
+            new NinePatchDrawable(
+                NinePatchDrawablePattern.fromText(PredefinedRectangleBorderStyle.PATTERN_TEXT_1),
+                PredefinedRectangleBorderStyle.REPEATABLE_RANGE_0,
+                PredefinedRectangleBorderStyle.REPEATABLE_RANGE_0
+            )
+        ),
+        new RectangleBorderStyle(
+            "B3",
+            "═",
+            new NinePatchDrawable(
+                NinePatchDrawablePattern.fromText(PredefinedRectangleBorderStyle.PATTERN_TEXT_2),
+                PredefinedRectangleBorderStyle.REPEATABLE_RANGE_0,
+                PredefinedRectangleBorderStyle.REPEATABLE_RANGE_0
+            )
+        )
+    ];
+
+    static readonly PREDEFINED_STYLE_MAP: { [id: string]: RectangleBorderStyle } = Object.fromEntries(
+        PredefinedRectangleBorderStyle.PREDEFINED_STYLES.map(style => [style.id, style])
+    );
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/extra/shape-extra.ts b/monosketch-svelte/src/lib/mono/shape/extra/shape-extra.ts
new file mode 100644
index 000000000..6ed4712d9
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/extra/shape-extra.ts
@@ -0,0 +1,298 @@
+import type { Comparable } from "$libs/comparable";
+import { type ILineExtra, type IRectangleExtra, ShapeExtraManager } from "$mono/shape/extra/extra-manager";
+import { PredefinedStraightStrokeStyle } from "$mono/shape/extra/predefined-styles";
+import {
+    AnchorChar,
+    RectangleBorderCornerPattern,
+    RectangleFillStyle,
+    StraightStrokeDashPattern,
+    StraightStrokeStyle,
+    TextAlign,
+    TextHorizontalAlign,
+    TextVerticalAlign,
+} from "$mono/shape/extra/style";
+import {
+    SerializableLineExtra,
+    SerializableRectExtra,
+    SerializableTextExtra,
+} from "$mono/shape/serialization/extras";
+
+/**
+ * An interface for extra properties of a shape.
+ */
+export interface ShapeExtra extends Comparable {
+}
+
+export const NoExtra: ShapeExtra = {
+    equals(other: unknown): boolean {
+        return other === NoExtra;
+    },
+};
+
+/**
+ * A {@link ShapeExtra} for a line.
+ */
+export class LineExtra implements ShapeExtra, ILineExtra {
+    constructor(
+        public isStrokeEnabled: boolean,
+        public userSelectedStrokeStyle: StraightStrokeStyle,
+        public isStartAnchorEnabled: boolean,
+        public userSelectedStartAnchor: AnchorChar,
+        public isEndAnchorEnabled: boolean,
+        public userSelectedEndAnchor: AnchorChar,
+        public dashPattern: StraightStrokeDashPattern,
+        public isRoundedCorner: boolean,
+    ) {
+    }
+
+    static create(extra: ILineExtra): LineExtra {
+        return new LineExtra(
+            extra.isStrokeEnabled,
+            extra.userSelectedStrokeStyle,
+            extra.isStartAnchorEnabled,
+            extra.userSelectedStartAnchor,
+            extra.isEndAnchorEnabled,
+            extra.userSelectedEndAnchor,
+            extra.dashPattern,
+            extra.isRoundedCorner,
+        );
+    }
+
+    get startAnchor(): AnchorChar | null {
+        return this.isStartAnchorEnabled ? this.userSelectedStartAnchor : null;
+    }
+
+    get endAnchor(): AnchorChar | null {
+        return this.isEndAnchorEnabled ? this.userSelectedEndAnchor : null;
+    }
+
+    get strokeStyle(): StraightStrokeStyle | null {
+        return this.isStrokeEnabled
+            ? PredefinedStraightStrokeStyle.getStyle(this.userSelectedStrokeStyle.id, this.isRoundedCorner)
+            : null;
+    }
+
+    equals(other: unknown): boolean {
+        if (!(other instanceof LineExtra)) {
+            return false;
+        }
+        return (
+            this.isStrokeEnabled === other.isStrokeEnabled &&
+            this.userSelectedStrokeStyle.id === other.userSelectedStrokeStyle.id &&
+            this.isStartAnchorEnabled === other.isStartAnchorEnabled &&
+            this.userSelectedStartAnchor.id === other.userSelectedStartAnchor.id &&
+            this.isEndAnchorEnabled === other.isEndAnchorEnabled &&
+            this.userSelectedEndAnchor.id === other.userSelectedEndAnchor.id &&
+            this.dashPattern.toSerializableValue() === other.dashPattern.toSerializableValue() &&
+            this.isRoundedCorner === other.isRoundedCorner
+        );
+    }
+
+    copy({
+        isStrokeEnabled = this.isStrokeEnabled,
+        userSelectedStrokeStyle = this.userSelectedStrokeStyle,
+        isStartAnchorEnabled = this.isStartAnchorEnabled,
+        userSelectedStartAnchor = this.userSelectedStartAnchor,
+        isEndAnchorEnabled = this.isEndAnchorEnabled,
+        userSelectedEndAnchor = this.userSelectedEndAnchor,
+        dashPattern = this.dashPattern,
+        isRoundedCorner = this.isRoundedCorner,
+    }: Partial<LineExtra> = {}): LineExtra {
+        return new LineExtra(
+            isStrokeEnabled,
+            userSelectedStrokeStyle,
+            isStartAnchorEnabled,
+            userSelectedStartAnchor,
+            isEndAnchorEnabled,
+            userSelectedEndAnchor,
+            dashPattern,
+            isRoundedCorner,
+        );
+    }
+
+    static fromSerializable(serializableExtra: SerializableLineExtra): LineExtra {
+        return new LineExtra(
+            serializableExtra.isStrokeEnabled,
+            ShapeExtraManager.getLineStrokeStyle(serializableExtra.userSelectedStrokeStyleId),
+            serializableExtra.isStartAnchorEnabled,
+            ShapeExtraManager.getStartHeadAnchorChar(serializableExtra.userSelectedStartAnchorId),
+            serializableExtra.isEndAnchorEnabled,
+            ShapeExtraManager.getEndHeadAnchorChar(serializableExtra.userSelectedEndAnchorId),
+            StraightStrokeDashPattern.fromSerializableValue(serializableExtra.dashPattern),
+            serializableExtra.isRoundedCorner,
+        );
+    }
+
+    toSerializableExtra(): SerializableLineExtra {
+        return SerializableLineExtra.create({
+            isStrokeEnabled: this.isStrokeEnabled,
+            userSelectedStrokeStyleId: this.userSelectedStrokeStyle.id,
+            isStartAnchorEnabled: this.isStartAnchorEnabled,
+            userSelectedStartAnchorId: this.userSelectedStartAnchor.id,
+            isEndAnchorEnabled: this.isEndAnchorEnabled,
+            userSelectedEndAnchorId: this.userSelectedEndAnchor.id,
+            dashPattern: this.dashPattern.toSerializableValue(),
+            isRoundedCorner: this.isRoundedCorner,
+        });
+    }
+}
+
+/**
+ * A {@link ShapeExtra} for a rectangle box.
+ */
+export class RectangleExtra implements ShapeExtra, IRectangleExtra {
+    constructor(
+        public isFillEnabled: boolean,
+        public userSelectedFillStyle: RectangleFillStyle,
+        public isBorderEnabled: boolean,
+        public userSelectedBorderStyle: StraightStrokeStyle,
+        public dashPattern: StraightStrokeDashPattern,
+        public corner: RectangleBorderCornerPattern,
+    ) {
+    }
+
+    static create(extra: IRectangleExtra): RectangleExtra {
+        return new RectangleExtra(
+            extra.isFillEnabled,
+            extra.userSelectedFillStyle,
+            extra.isBorderEnabled,
+            extra.userSelectedBorderStyle,
+            extra.dashPattern,
+            extra.corner,
+        );
+    }
+
+    get isRoundedCorner(): boolean {
+        return this.corner === RectangleBorderCornerPattern.ENABLED;
+    }
+
+    get fillStyle(): RectangleFillStyle | null {
+        return this.isFillEnabled ? this.userSelectedFillStyle : null;
+    }
+
+    get strokeStyle(): StraightStrokeStyle | null {
+        return this.isBorderEnabled
+            ? PredefinedStraightStrokeStyle.getStyle(this.userSelectedBorderStyle.id, this.isRoundedCorner)
+            : null;
+    }
+
+    equals(other: unknown): boolean {
+        if (!(other instanceof RectangleExtra)) {
+            return false;
+        }
+        return (
+            this.isFillEnabled === other.isFillEnabled &&
+            this.userSelectedFillStyle.id === other.userSelectedFillStyle.id &&
+            this.isBorderEnabled === other.isBorderEnabled &&
+            this.userSelectedBorderStyle.id === other.userSelectedBorderStyle.id &&
+            this.dashPattern.toSerializableValue() === other.dashPattern.toSerializableValue() &&
+            this.corner.toSerializableValue() === other.corner.toSerializableValue()
+        );
+    }
+
+    copy({
+        isFillEnabled = this.isFillEnabled,
+        userSelectedFillStyle = this.userSelectedFillStyle,
+        isBorderEnabled = this.isBorderEnabled,
+        userSelectedBorderStyle = this.userSelectedBorderStyle,
+        dashPattern = this.dashPattern,
+        corner = this.corner,
+    }: Partial<RectangleExtra> = {}): RectangleExtra {
+        return new RectangleExtra(
+            isFillEnabled,
+            userSelectedFillStyle,
+            isBorderEnabled,
+            userSelectedBorderStyle,
+            dashPattern,
+            corner,
+        );
+    }
+
+    toSerializableExtra(): SerializableRectExtra {
+        return SerializableRectExtra.create({
+            isFillEnabled: this.isFillEnabled,
+            userSelectedFillStyleId: this.userSelectedFillStyle.id,
+            isBorderEnabled: this.isBorderEnabled,
+            userSelectedBorderStyleId: this.userSelectedBorderStyle.id,
+            dashPattern: this.dashPattern.toSerializableValue(),
+            corner: this.corner.toSerializableValue(),
+        });
+    }
+
+    static fromSerializable(serializableExtra: SerializableRectExtra): RectangleExtra {
+        return new RectangleExtra(
+            serializableExtra.isFillEnabled,
+            ShapeExtraManager.getRectangleFillStyle(serializableExtra.userSelectedFillStyleId),
+            serializableExtra.isBorderEnabled,
+            ShapeExtraManager.getRectangleBorderStyle(serializableExtra.userSelectedBorderStyleId),
+            StraightStrokeDashPattern.fromSerializableValue(serializableExtra.dashPattern),
+            RectangleBorderCornerPattern.fromSerializableValue(serializableExtra.corner),
+        );
+    }
+}
+
+/**
+ * A {@link ShapeExtra} for a text.
+ */
+export class TextExtra implements ShapeExtra {
+    constructor(
+        public boundExtra: RectangleExtra,
+        public textAlign: TextAlign,
+    ) {
+    }
+
+    hasBorder(): boolean {
+        return this.boundExtra.isBorderEnabled;
+    }
+
+    equals(other: unknown): boolean {
+        if (!(other instanceof TextExtra)) {
+            return false;
+        }
+        return (
+            this.boundExtra.equals(other.boundExtra) &&
+            this.textAlign.equals(other.textAlign)
+        );
+    }
+
+    copy({
+        boundExtra = this.boundExtra,
+        textAlign = this.textAlign,
+    }: Partial<TextExtra> = {}): TextExtra {
+        return new TextExtra(
+            boundExtra.copy(),
+            textAlign,
+        );
+    }
+
+    toSerializableExtra(): SerializableTextExtra {
+        return SerializableTextExtra.create({
+            boundExtra: this.boundExtra.toSerializableExtra(),
+            textHorizontalAlign: this.textAlign.horizontalAlign,
+            textVerticalAlign: this.textAlign.verticalAlign,
+        });
+    }
+
+    static fromSerializable(serializableExtra: SerializableTextExtra): TextExtra {
+        return new TextExtra(
+            RectangleExtra.fromSerializable(serializableExtra.boundExtra),
+            TextAlign.from(serializableExtra.textHorizontalAlign, serializableExtra.textVerticalAlign),
+        );
+    }
+
+    static NO_BOUND: TextExtra = new TextExtra(
+        RectangleExtra.create({
+            ...ShapeExtraManager.defaultRectangleExtra,
+            isFillEnabled: false,
+            isBorderEnabled: false,
+        }),
+        new TextAlign(TextHorizontalAlign.LEFT, TextVerticalAlign.TOP),
+    );
+
+    static withDefault(): TextExtra {
+        return new TextExtra(
+            RectangleExtra.create(ShapeExtraManager.defaultRectangleExtra),
+            ShapeExtraManager.defaultTextAlign,
+        );
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/extra/style.test.ts b/monosketch-svelte/src/lib/mono/shape/extra/style.test.ts
new file mode 100644
index 000000000..53b48de9c
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/extra/style.test.ts
@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { StraightStrokeDashPattern } from "$mono/shape/extra/style";
+import { describe, it, expect } from 'vitest';
+
+describe('StraightStrokeDashPattern', () => {
+    it('testIsGap_solid', () => {
+        const pattern = new StraightStrokeDashPattern(1, 0, 0);
+        expect(pattern.isGap(0)).toBe(false);
+        expect(pattern.isGap(1)).toBe(false);
+        expect(pattern.isGap(2)).toBe(false);
+        expect(pattern.isGap(3)).toBe(false);
+    });
+
+    it('testIsGap_1segment_1gap_0offset', () => {
+        const pattern = new StraightStrokeDashPattern(1, 1, 0);
+        expect(pattern.isGap(0)).toBe(false);
+        expect(pattern.isGap(1)).toBe(true);
+        expect(pattern.isGap(2)).toBe(false);
+        expect(pattern.isGap(3)).toBe(true);
+        expect(pattern.isGap(4)).toBe(false);
+        expect(pattern.isGap(5)).toBe(true);
+    });
+
+    it('testIsGap_1segment_1gap_1offset', () => {
+        const pattern = new StraightStrokeDashPattern(1, 1, 1);
+        expect(pattern.isGap(0)).toBe(true);
+        expect(pattern.isGap(1)).toBe(false);
+        expect(pattern.isGap(2)).toBe(true);
+        expect(pattern.isGap(3)).toBe(false);
+        expect(pattern.isGap(4)).toBe(true);
+        expect(pattern.isGap(5)).toBe(false);
+    });
+
+    it('testIsGap_1segment_1gap_minus1offset', () => {
+        const pattern = new StraightStrokeDashPattern(1, 1, -1);
+        expect(pattern.isGap(0)).toBe(true);
+        expect(pattern.isGap(1)).toBe(false);
+        expect(pattern.isGap(2)).toBe(true);
+        expect(pattern.isGap(3)).toBe(false);
+        expect(pattern.isGap(4)).toBe(true);
+        expect(pattern.isGap(5)).toBe(false);
+    });
+
+    it('testIsGap_2segment_1gap_0offset', () => {
+        const pattern = new StraightStrokeDashPattern(2, 1, 0);
+        expect(pattern.isGap(0)).toBe(false);
+        expect(pattern.isGap(1)).toBe(false);
+        expect(pattern.isGap(2)).toBe(true);
+        expect(pattern.isGap(3)).toBe(false);
+        expect(pattern.isGap(4)).toBe(false);
+        expect(pattern.isGap(5)).toBe(true);
+    });
+
+    it('testIsGap_2segment_1gap_1offset', () => {
+        const pattern = new StraightStrokeDashPattern(2, 1, 1);
+        expect(pattern.isGap(0)).toBe(false);
+        expect(pattern.isGap(1)).toBe(true);
+        expect(pattern.isGap(2)).toBe(false);
+        expect(pattern.isGap(3)).toBe(false);
+        expect(pattern.isGap(4)).toBe(true);
+        expect(pattern.isGap(5)).toBe(false);
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/shape/extra/style.ts b/monosketch-svelte/src/lib/mono/shape/extra/style.ts
new file mode 100644
index 000000000..ae7193f85
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/extra/style.ts
@@ -0,0 +1,257 @@
+import type { Char } from "$libs/char";
+import type { Comparable } from "$libs/comparable";
+import type { Drawable } from "$mono/monobitmap/drawable";
+
+/**
+ * A class for defining an anchor end-char.
+ *
+ * @param id is the key for retrieving predefined [AnchorChar] when serialization.
+ * @param displayName is the text visible on the UI tool for selection.
+ */
+export class AnchorChar {
+    constructor(
+        public readonly id: string,
+        public readonly displayName: string,
+        public readonly left: Char,
+        public readonly right: Char,
+        public readonly top: Char,
+        public readonly bottom: Char,
+    ) {
+    }
+
+    static create({ id, displayName, left, right, top, bottom, all }: {
+        id: string,
+        displayName: string,
+        left?: Char,
+        right?: Char,
+        top?: Char,
+        bottom?: Char,
+        all?: Char
+    }): AnchorChar {
+        if (all !== undefined) {
+            return new AnchorChar(id, displayName, all, all, all, all);
+        }
+        return new AnchorChar(id, displayName, left!, right!, top!, bottom!);
+    }
+}
+
+/**
+ * A class for rectangle border corner pattern.
+ */
+export class RectangleBorderCornerPattern {
+
+    constructor(
+        public readonly leftTopRounded: boolean,
+        public readonly leftBottomRounded: boolean,
+        public readonly rightTopRounded: boolean,
+        public readonly rightBottomRounded: boolean,
+    ) {
+    }
+
+    toSerializableValue(): string {
+        return [
+            this.leftTopRounded,
+            this.leftBottomRounded,
+            this.rightTopRounded,
+            this.rightBottomRounded,
+        ]
+            .map(flag => flag ? "Y" : "N")
+            .join("");
+    }
+
+    static DISABLED: RectangleBorderCornerPattern =
+        new RectangleBorderCornerPattern(false, false, false, false);
+    static ENABLED: RectangleBorderCornerPattern =
+        new RectangleBorderCornerPattern(true, true, true, true);
+
+    static fromSerializableValue(value: string): RectangleBorderCornerPattern {
+        return new RectangleBorderCornerPattern(
+            value.charAt(0) === 'Y',
+            value.charAt(1) === 'Y',
+            value.charAt(2) === 'Y',
+            value.charAt(3) === 'Y',
+        );
+    }
+}
+
+/**
+ * A class for defining a border style for rectangle.
+ *
+ * @param id is the key for retrieving predefined [RectangleBorderStyle] when serialization.
+ * @param displayName is the text visible on the UI tool for selection.
+ */
+export class RectangleBorderStyle {
+    constructor(
+        public readonly id: string,
+        public readonly displayName: string,
+        public readonly drawable: Drawable,
+    ) {
+    }
+}
+
+/**
+ * A class for defining a fill style for rectangle.
+ *
+ * @param id is the key for retrieving predefined [RectangleFillStyle] when serialization.
+ * @param displayName is the text visible on the UI tool for selection.
+ */
+export class RectangleFillStyle {
+    constructor(
+        public readonly id: string,
+        public readonly displayName: string,
+        public readonly drawable: Drawable,
+    ) {
+    }
+
+    static create({ id, displayName, drawable }: {
+        id: string,
+        displayName: string,
+        drawable: Drawable
+    }): RectangleFillStyle {
+        return new RectangleFillStyle(id, displayName, drawable);
+    }
+}
+
+/**
+ * A class to define dash pattern of straight stroke.
+ * @param dash is the solid of dash, min value is 1
+ */
+export class StraightStrokeDashPattern {
+    private readonly adjustedSegment: number;
+    private readonly adjustedGap: number;
+    private readonly totalLength: number;
+    private readonly adjustedOffset: number;
+
+    constructor(
+        public readonly dash: number,
+        public readonly gap: number,
+        public readonly offset: number,
+    ) {
+        this.adjustedSegment = Math.max(this.dash, 1);
+        this.adjustedGap = Math.max(this.gap, 0);
+        this.totalLength = this.adjustedSegment + this.adjustedGap;
+
+        // Adjust offset to be in [0, length). Calculation for `isGap` does not work well with
+        // negative number
+        this.adjustedOffset = ((this.offset % this.totalLength) + this.totalLength) % this.totalLength;
+    }
+
+    isGap(index: number): boolean {
+        return this.adjustedGap !== 0
+            ? (index + this.adjustedOffset) % this.totalLength >= this.adjustedSegment
+            : false;
+    }
+
+    toSerializableValue(): string {
+        return `${this.dash}|${this.gap}|${this.offset}`;
+    }
+
+    static readonly SOLID = new StraightStrokeDashPattern(1, 0, 0);
+
+    static fromSerializableValue(value: string): StraightStrokeDashPattern {
+        const [dashStr, gapStr, offsetStr] = value.split('|');
+        const dash = parseInt(dashStr, 10) || 1;
+        const gap = parseInt(gapStr, 10) || 0;
+        const offset = parseInt(offsetStr, 10) || 0;
+        return new StraightStrokeDashPattern(dash, gap, offset);
+    }
+}
+
+/**
+ * A class for defining a stroke style of straight line.
+ */
+export class StraightStrokeStyle {
+    constructor(
+        public readonly id: string,
+        public readonly displayName: string,
+        public readonly horizontal: Char,
+        public readonly vertical: Char,
+        public readonly downLeft: Char,
+        public readonly upRight: Char,
+        public readonly upLeft: Char,
+        public readonly downRight: Char,
+    ) {
+    }
+
+    static create(
+        {
+            id,
+            displayName,
+            horizontal,
+            vertical,
+            downLeft,
+            upRight,
+            upLeft,
+            downRight,
+        }: {
+            id: string,
+            displayName: string,
+            horizontal: Char,
+            vertical: Char,
+            downLeft: Char,
+            upRight: Char,
+            upLeft: Char,
+            downRight: Char,
+        }): StraightStrokeStyle {
+        return new StraightStrokeStyle(id, displayName, horizontal, vertical, downLeft, upRight, upLeft, downRight);
+    }
+}
+
+export enum TextHorizontalAlign {
+    LEFT,
+    MIDDLE,
+    RIGHT
+}
+
+export enum TextVerticalAlign {
+    TOP,
+    MIDDLE,
+    BOTTOM
+}
+
+/**
+ * A model for defining text aligns.
+ */
+export class TextAlign implements Comparable {
+    constructor(
+        public readonly horizontalAlign: TextHorizontalAlign,
+        public readonly verticalAlign: TextVerticalAlign,
+    ) {
+    }
+
+    static ALL_HORIZONTAL_ALIGNS: TextHorizontalAlign[] = [
+        TextHorizontalAlign.LEFT,
+        TextHorizontalAlign.MIDDLE,
+        TextHorizontalAlign.RIGHT,
+    ];
+
+    static ALL_VERTICAL_ALIGNS: TextVerticalAlign[] = [
+        TextVerticalAlign.TOP,
+        TextVerticalAlign.MIDDLE,
+        TextVerticalAlign.BOTTOM,
+    ];
+
+    // Additional constructor that takes indexes for horizontal and vertical aligns
+    static from(textHorizontalAlign: number, textVerticalAlign: number): TextAlign {
+        const horizontalAlign = this.ALL_HORIZONTAL_ALIGNS[textHorizontalAlign];
+        const verticalAlign = this.ALL_VERTICAL_ALIGNS[textVerticalAlign];
+        return new TextAlign(horizontalAlign, verticalAlign);
+    }
+
+    equals(other: unknown): boolean {
+        if (!(other instanceof TextAlign)) {
+            return false;
+        }
+        return (
+            this.horizontalAlign === other.horizontalAlign &&
+            this.verticalAlign === other.verticalAlign
+        );
+    }
+
+    copy({
+        horizontalAlign = this.horizontalAlign,
+        verticalAlign = this.verticalAlign,
+    }: Partial<TextAlign> = {}): TextAlign {
+        return new TextAlign(horizontalAlign, verticalAlign);
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/interaction-bound.ts b/monosketch-svelte/src/lib/mono/shape/interaction-bound.ts
new file mode 100644
index 000000000..8d4f75ce2
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/interaction-bound.ts
@@ -0,0 +1,150 @@
+import type { Rect } from '$libs/graphics-geo/rect';
+import { MouseCursor } from '$mono/workspace/mouse/cursor-type';
+
+export enum InteractionBoundType {
+    LINE,
+    SCALABLE_SHAPE,
+}
+
+/**
+ * An interface to define all possible interaction bound types
+ */
+export interface InteractionBound {
+    readonly type: InteractionBoundType;
+    readonly interactionPoints: InteractionPoint[];
+}
+
+/**
+ * A class which defines interaction bound for scalable shapes.
+ */
+export class ScalableInteractionBound implements InteractionBound {
+    readonly type = InteractionBoundType.SCALABLE_SHAPE;
+
+    private constructor(
+        public readonly interactionPoints: InteractionPoint[],
+        public readonly left: number,
+        public readonly top: number,
+        public readonly right: number,
+        public readonly bottom: number,
+    ) {
+    }
+
+    static of = (targetedShapeId: string, shapeBound: Rect): ScalableInteractionBound => {
+        const left = shapeBound.left - 0.25;
+        const top = shapeBound.top - 0.25;
+        const right = shapeBound.right + 0.25;
+        const bottom = shapeBound.bottom + 0.25;
+        const horizontalMiddle = (left + right) / 2;
+        const verticalMiddle = (top + bottom) / 2;
+
+        const interactionPoints: InteractionPoint[] = [
+            {
+                shapeId: targetedShapeId,
+                type: InteractionPointType.TOP_LEFT,
+                left: left,
+                top: top,
+            },
+            {
+                shapeId: targetedShapeId,
+                type: InteractionPointType.TOP_MIDDLE,
+                left: horizontalMiddle,
+                top: top,
+            },
+            {
+                shapeId: targetedShapeId,
+                type: InteractionPointType.TOP_RIGHT,
+                left: right,
+                top: top,
+            },
+            {
+                shapeId: targetedShapeId,
+                type: InteractionPointType.MIDDLE_LEFT,
+                left: left,
+                top: verticalMiddle,
+            },
+            {
+                shapeId: targetedShapeId,
+                type: InteractionPointType.MIDDLE_RIGHT,
+                left: right,
+                top: verticalMiddle,
+            },
+            {
+                shapeId: targetedShapeId,
+                type: InteractionPointType.BOTTOM_LEFT,
+                left: left,
+                top: bottom,
+            },
+            {
+                shapeId: targetedShapeId,
+                type: InteractionPointType.BOTTOM_MIDDLE,
+                left: horizontalMiddle,
+                top: bottom,
+            },
+            {
+                shapeId: targetedShapeId,
+                type: InteractionPointType.BOTTOM_RIGHT,
+                left: right,
+                top: bottom,
+            },
+        ];
+
+        return new ScalableInteractionBound(
+            interactionPoints,
+            left,
+            top,
+            right,
+            bottom,
+        );
+    };
+}
+
+export class LineInteractionBound implements InteractionBound {
+    readonly type = InteractionBoundType.LINE;
+
+    constructor(public readonly interactionPoints: InteractionPoint[]) {
+    }
+}
+
+/**
+ * An interface to define the interaction point for a shape and common APIs.
+ *
+ * @left the center position of the interaction point in the x-axis, in board-related unit.
+ * @top the center position of the interaction point in the y-axis, in board-related unit.
+ */
+export interface InteractionPoint {
+    shapeId: string;
+    type: InteractionPointType;
+    left: number;
+    top: number;
+}
+
+/**
+ * An enum to define the type of the interaction point for a shape.
+ */
+export enum InteractionPointType {
+    TOP_LEFT,
+    TOP_MIDDLE,
+    TOP_RIGHT,
+    MIDDLE_LEFT,
+    MIDDLE_RIGHT,
+    BOTTOM_LEFT,
+    BOTTOM_MIDDLE,
+    BOTTOM_RIGHT,
+    LINE_HORIZONTAL,
+    LINE_VERTICAL,
+    LINE_ANCHOR,
+}
+
+export const scalableInteractionPointTypeToCursor: Record<InteractionPointType, MouseCursor> = {
+    [InteractionPointType.TOP_LEFT]: MouseCursor.RESIZE_NWSE,
+    [InteractionPointType.BOTTOM_RIGHT]: MouseCursor.RESIZE_NWSE,
+    [InteractionPointType.TOP_MIDDLE]: MouseCursor.RESIZE_NS,
+    [InteractionPointType.BOTTOM_MIDDLE]: MouseCursor.RESIZE_NS,
+    [InteractionPointType.TOP_RIGHT]: MouseCursor.RESIZE_NESW,
+    [InteractionPointType.BOTTOM_LEFT]: MouseCursor.RESIZE_NESW,
+    [InteractionPointType.MIDDLE_LEFT]: MouseCursor.RESIZE_EW,
+    [InteractionPointType.MIDDLE_RIGHT]: MouseCursor.RESIZE_EW,
+    [InteractionPointType.LINE_HORIZONTAL]: MouseCursor.DEFAULT,
+    [InteractionPointType.LINE_VERTICAL]: MouseCursor.DEFAULT,
+    [InteractionPointType.LINE_ANCHOR]: MouseCursor.DEFAULT,
+};
diff --git a/monosketch-svelte/src/lib/mono/shape/searcher/shape-searcher.ts b/monosketch-svelte/src/lib/mono/shape/searcher/shape-searcher.ts
new file mode 100644
index 000000000..2093ef81c
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/searcher/shape-searcher.ts
@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Direction, type Point } from "$libs/graphics-geo/point";
+import type { Rect } from "$libs/graphics-geo/rect";
+import { isTransparentChar } from "$mono/common/character";
+import { MonoBitmap } from "$mono/monobitmap/bitmap/monobitmap";
+import { ShapeZoneAddressManager } from "$mono/shape/searcher/shape-zone-address-manager";
+import { ZoneOwnersManager } from "$mono/shape/searcher/zone-address";
+import type { ShapeManager } from "$mono/shape/shape-manager";
+import type { AbstractShape } from "$mono/shape/shape/abstract-shape";
+import { Rectangle } from "$mono/shape/shape/rectangle";
+
+/**
+ * A model class which optimizes shapes retrieval from a point.
+ * A shape is only indexed after it's drawn onto the board. Do not use this for pre-draw check.
+ */
+export class ShapeSearcher {
+    private shapeZoneAddressManager: ShapeZoneAddressManager;
+    private zoneOwnersManager: ZoneOwnersManager;
+
+    constructor(
+        private shapeManager: ShapeManager,
+        private getBitmap: (shape: AbstractShape) => MonoBitmap.Bitmap | null,
+    ) {
+        this.shapeZoneAddressManager = new ShapeZoneAddressManager(getBitmap);
+        this.zoneOwnersManager = new ZoneOwnersManager();
+    }
+
+    register(shape: AbstractShape) {
+        const addresses = this.shapeZoneAddressManager.getZoneAddresses(shape);
+        this.zoneOwnersManager.registerOwnerAddresses(shape.id, addresses);
+    }
+
+    clear(bound: Rect) {
+        this.zoneOwnersManager.clear(bound);
+    }
+
+    /**
+     * Returns a list of shapes which have a non-transparent pixel at [point].
+     * The order of the list is based on z-index which 1st item is the lowest index.
+     * Note: Group shape is not included in the result.
+     */
+    getShapes(point: Point): AbstractShape[] {
+        return this.zoneOwnersManager.getPotentialOwners(point)
+            .map(ownerId => this.shapeManager.getShape(ownerId))
+            .filter((shape): shape is AbstractShape => !!shape)
+            .filter(shape => {
+                const position = shape.bound.position;
+                const bitmap = this.getBitmap(shape);
+                if (!bitmap) {
+                    return false;
+                }
+                const bitmapRow = point.row - position.row;
+                const bitmapCol = point.column - position.column;
+                const isTransparent = isTransparentChar(bitmap.getVisual(bitmapRow, bitmapCol));
+                return !isTransparent;
+            });
+    }
+
+    getAllShapesInZone(bound: Rect): AbstractShape[] {
+        const zoneOwners = Array.from(this.zoneOwnersManager.getAllPotentialOwnersInZone(bound));
+        return zoneOwners
+            .map(ownerId => this.shapeManager.getShape(ownerId))
+            .filter((shape): shape is AbstractShape => shape !== null)
+            .filter(shape => shape.isOverlapped(bound));
+    }
+
+    /**
+     * Gets the edge direction of a shape having bound's edges at [point].
+     * The considerable shape types are shapes having static bound such as [Text], [Rectangle].
+     * If there are many shapes satisfying the conditions, the first one will be used.
+     */
+    getEdgeDirection(point: Point): Direction | null {
+        const shape = this.zoneOwnersManager.getPotentialOwners(point)
+            .map(ownerId => this.shapeManager.getShape(ownerId))
+            .filter((shape): shape is AbstractShape => shape !== null)
+            .filter(shape => shape instanceof Text || shape instanceof Rectangle)
+            .filter(shape => shape.contains(point) && !shape.isVertex(point))
+            .find(shape =>
+                shape.bound.left === point.left ||
+                shape.bound.right === point.left ||
+                shape.bound.top === point.top ||
+                shape.bound.bottom === point.top,
+            );
+
+        if (!shape) {
+            return null;
+        }
+        return shape.bound.left === point.left || shape.bound.right === point.left
+            ? Direction.VERTICAL
+            : Direction.HORIZONTAL;
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/searcher/shape-zone-address-manager.ts b/monosketch-svelte/src/lib/mono/shape/searcher/shape-zone-address-manager.ts
new file mode 100644
index 000000000..51bb29829
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/searcher/shape-zone-address-manager.ts
@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { MonoBitmap } from "$mono/monobitmap/bitmap/monobitmap";
+import type { AbstractShape } from '$mono/shape/shape/abstract-shape';
+import { ZoneAddressFactory, type ZoneAddress } from './zone-address';
+
+interface VersionizedZoneAddresses {
+    version: number;
+    addresses: Set<ZoneAddress>;
+}
+
+/**
+ * A class to convert a shape to addresses which the shape have pixels on.
+ * This class also cache the addresses belong to the shape along with its version.
+ */
+export class ShapeZoneAddressManager {
+    private idToZoneAddressMap: Map<string, VersionizedZoneAddresses> = new Map();
+
+    constructor(private getBitmap: (shape: AbstractShape) => MonoBitmap.Bitmap | null) {
+    }
+
+    getZoneAddresses(shape: AbstractShape): Set<ZoneAddress> {
+        const cachedAddresses = this.getCachedAddresses(shape);
+        if (cachedAddresses) {
+            return cachedAddresses;
+        }
+
+        const bitmap = this.getBitmap(shape);
+        if (!bitmap) {
+            this.idToZoneAddressMap.delete(shape.id);
+            return new Set();
+        }
+
+        const position = shape.bound.position;
+        const addresses = new Set<ZoneAddress>();
+        for (let ir = 0; ir < bitmap.matrix.length; ir++) {
+            for (const { index } of bitmap.matrix[ir].asSequence()) {
+                const row = ir + position.row;
+                const col = index + position.column;
+                const address = ZoneAddressFactory.toAddress(row, col);
+                addresses.add(address);
+            }
+        }
+
+        const versionizedZoneAddresses = { version: shape.versionCode, addresses };
+        this.idToZoneAddressMap.set(shape.id, versionizedZoneAddresses);
+        return versionizedZoneAddresses.addresses;
+    }
+
+    private getCachedAddresses(shape: AbstractShape): Set<ZoneAddress> | null {
+        const cached = this.idToZoneAddressMap.get(shape.id);
+        return cached && cached.version === shape.versionCode ? cached.addresses : null;
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/searcher/zone-address.ts b/monosketch-svelte/src/lib/mono/shape/searcher/zone-address.ts
new file mode 100644
index 000000000..5afda8550
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/searcher/zone-address.ts
@@ -0,0 +1,106 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import type { Point } from "$libs/graphics-geo/point";
+import type { Rect } from "$libs/graphics-geo/rect";
+
+/**
+ * A data class to identify address of a zone
+ */
+export interface ZoneAddress {
+    readonly row: number;
+    readonly column: number;
+}
+
+/**
+ * A factory of [ZoneAddress].
+ */
+export class ZoneAddressFactory {
+    private static addressMap: Map<number, Map<number, ZoneAddress>> = new Map();
+
+    static {
+        for (let left = -4; left <= 20; left++) {
+            const columnMap = new Map<number, ZoneAddress>();
+            for (let top = -4; top <= 20; top++) {
+                columnMap.set(top, { row: top, column: left });
+            }
+            this.addressMap.set(left, columnMap);
+        }
+    }
+
+    static toAddress(row: number, column: number): ZoneAddress {
+        const rowAddressIndex = toAddressIndex(row);
+        const colAddressIndex = toAddressIndex(column);
+        return this.get(rowAddressIndex, colAddressIndex);
+    }
+
+    static get(rowAddressIndex: number, colAddressIndex: number): ZoneAddress {
+        let columnMap = this.addressMap.get(rowAddressIndex);
+        if (!columnMap) {
+            columnMap = new Map<number, ZoneAddress>();
+            this.addressMap.set(rowAddressIndex, columnMap);
+        }
+        let address = columnMap.get(colAddressIndex);
+        if (!address) {
+            address = { row: rowAddressIndex, column: colAddressIndex };
+            columnMap.set(colAddressIndex, address);
+        }
+        return address;
+    }
+}
+
+/**
+ * A class to store owners of a zone whose size = 8x8 to fast identify potential candidate
+ * owners of a position (row, column).
+ * Owners of a zone will be stored in the same order as owners are added if overlapped.
+ */
+export class ZoneOwnersManager {
+    private zoneToOwnersMap: Map<ZoneAddress, string[]> = new Map();
+
+    clear(clearBound: Rect): void {
+        const leftIndex = toAddressIndex(clearBound.left);
+        const rightIndex = toAddressIndex(clearBound.right);
+        const topIndex = toAddressIndex(clearBound.top);
+        const bottomIndex = toAddressIndex(clearBound.bottom);
+
+        for (let rowIndex = topIndex; rowIndex <= bottomIndex; rowIndex++) {
+            for (let colIndex = leftIndex; colIndex <= rightIndex; colIndex++) {
+                const zone = ZoneAddressFactory.get(rowIndex, colIndex);
+                this.zoneToOwnersMap.get(zone)?.splice(0);
+            }
+        }
+    }
+
+    registerOwnerAddresses(ownerId: string, addresses: Set<ZoneAddress>): void {
+        for (const address of addresses) {
+            if (!this.zoneToOwnersMap.has(address)) {
+                this.zoneToOwnersMap.set(address, []);
+            }
+            this.zoneToOwnersMap.get(address)!.push(ownerId);
+        }
+    }
+
+    getPotentialOwners(point: Point): string[] {
+        const address = ZoneAddressFactory.toAddress(point.row, point.column);
+        return this.zoneToOwnersMap.get(address) || [];
+    }
+
+    getAllPotentialOwnersInZone(zone: Rect): Set<string> {
+        const address1 = ZoneAddressFactory.toAddress(zone.top, zone.left);
+        const address2 = ZoneAddressFactory.toAddress(zone.bottom, zone.right);
+        const owners = new Set<string>();
+
+        for (let addressRow = address1.row; addressRow <= address2.row; addressRow++) {
+            for (let addressCol = address1.column; addressCol <= address2.column; addressCol++) {
+                const address = ZoneAddressFactory.get(addressRow, addressCol);
+                const zoneOwners = this.zoneToOwnersMap.get(address) || [];
+                zoneOwners.forEach(owner => owners.add(owner));
+            }
+        }
+
+        return owners;
+    }
+}
+
+const toAddressIndex = (number: number): number => number >> 4;
diff --git a/monosketch-svelte/src/lib/mono/shape/selected-shape-manager.ts b/monosketch-svelte/src/lib/mono/shape/selected-shape-manager.ts
new file mode 100644
index 000000000..a8688af27
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/selected-shape-manager.ts
@@ -0,0 +1,70 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Flow } from '$libs/flow/flow';
+import type { AbstractShape } from '$mono/shape/shape/abstract-shape';
+
+/**
+ * A class to manage selected shapes.
+ */
+export class SelectedShapeManager {
+    private selectedShapesMutableFlow: Flow<Set<AbstractShape>> = new Flow(new Set());
+    public selectedShapesFlow: Flow<Set<AbstractShape>> = this.selectedShapesMutableFlow;
+
+    private focusingShapeMutableFlow: Flow<FocusingShape | null> = new Flow(null);
+    public focusingShapeFlow: Flow<FocusingShape | null> = this.focusingShapeMutableFlow;
+
+    get selectedShapes(): Set<AbstractShape> {
+        return this.selectedShapesFlow.value ?? new Set();
+    }
+
+    get focusingShape(): FocusingShape | null {
+        return this.focusingShapeFlow.value ?? null;
+    }
+
+    addSelectedShape(shape: AbstractShape) {
+        const selectedShapes = new Set(this.selectedShapes);
+        selectedShapes.add(shape);
+        this.selectedShapesMutableFlow.value = selectedShapes;
+    }
+
+    toggleSelection(shape: AbstractShape) {
+        const selectedShapes = new Set(this.selectedShapes);
+        if (selectedShapes.has(shape)) {
+            selectedShapes.delete(shape);
+        } else {
+            selectedShapes.add(shape);
+        }
+        this.selectedShapesMutableFlow.value = selectedShapes;
+    }
+
+    clearSelectedShapes() {
+        this.selectedShapesMutableFlow.value = new Set();
+    }
+
+    setFocusingShape(shape: AbstractShape | null, focusType: ShapeFocusType) {
+        this.focusingShapeMutableFlow.value = shape ? { shape, focusType } : null;
+    }
+
+    getFocusingType(shape: AbstractShape | null): ShapeFocusType | null {
+        const focusingShape = this.focusingShapeFlow.value;
+        return focusingShape && focusingShape.shape === shape ? focusingShape.focusType : null;
+    }
+}
+
+/**
+ * An enum class defines the type of focus.
+ */
+export enum ShapeFocusType {
+    LINE_CONNECTING,
+    SELECT_MODE_HOVER
+}
+
+/**
+ * A model interface representing the focusing shape and its focusing type.
+ */
+export interface FocusingShape {
+    shape: AbstractShape;
+    focusType: ShapeFocusType;
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/serialization/connector.test.ts b/monosketch-svelte/src/lib/mono/shape/serialization/connector.test.ts
new file mode 100644
index 000000000..2a38c89a1
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/serialization/connector.test.ts
@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { describe, expect, it } from "vitest";
+import { SerializableLineConnector } from "./connector";
+import { LineAnchor } from "$mono/shape/shape/linehelper";
+import { Point, PointF } from "$libs/graphics-geo/point";
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+describe("SerializableLineConnector", () => {
+    it("should serialize to JSON correctly", () => {
+        const original = SerializableLineConnector.create({
+            lineId: "line-1",
+            anchor: LineAnchor.START,
+            targetId: "shape-1",
+            ratio: new PointF(0.5, 0.5),
+            offset: new Point(10, 20),
+        });
+
+        // @ts-ignore
+        const json = original.toJson();
+        console.log(json);
+        expect(json).toStrictEqual({ i: 'line-1', a: 1, t: 'shape-1', r: '0.5|0.5', o: '10|20' });
+    });
+
+    it("should deserialize from JSON correctly", () => {
+        const json = { i: 'line-2', a: 1, t: 'shape-2', r: '0.25|0.25', o: '30|40' };
+        // @ts-ignore
+        const deserialized = SerializableLineConnector.fromJson(json);
+
+        expect(deserialized).toStrictEqual(
+            SerializableLineConnector.create(
+                {
+                    lineId: "line-2",
+                    anchor: LineAnchor.START,
+                    targetId: "shape-2",
+                    ratio: new PointF(0.25, 0.25),
+                    offset: new Point(30, 40),
+                }
+            )
+        );
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/shape/serialization/connector.ts b/monosketch-svelte/src/lib/mono/shape/serialization/connector.ts
new file mode 100644
index 000000000..16c8adb1d
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/serialization/connector.ts
@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Point, PointF } from "$libs/graphics-geo/point";
+import { Jsonizable, Serializer, SerialName } from "$mono/shape/serialization/serializable";
+import { AnchorSerializer, PointFSerializer, PointSerializer } from "$mono/shape/serialization/serializers";
+import { LineAnchor } from "$mono/shape/shape/linehelper";
+
+@Jsonizable
+export class SerializableLineConnector {
+    @SerialName("i")
+    public lineId: string = '';
+    @SerialName("a")
+    @Serializer(AnchorSerializer)
+    public anchor: LineAnchor = LineAnchor.START;
+    @SerialName("t")
+    public targetId: string = '';
+    @SerialName("r")
+    @Serializer(PointFSerializer)
+    public ratio: PointF = PointF.ZERO;
+    @SerialName("o")
+    @Serializer(PointSerializer)
+    public offset: Point = Point.ZERO;
+
+    private constructor() {
+    }
+
+    static create(
+        {
+            lineId,
+            anchor,
+            targetId,
+            ratio,
+            offset,
+        }: {
+            lineId: string;
+            anchor: LineAnchor;
+            targetId: string;
+            ratio: PointF;
+            offset: Point;
+        }): SerializableLineConnector {
+        const result = new SerializableLineConnector();
+        result.lineId = lineId;
+        result.anchor = anchor;
+        result.targetId = targetId;
+        result.ratio = ratio;
+        result.offset = offset;
+        return result;
+    }
+}
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const SerializableLineConnectorArraySerializer = {
+    serialize(value: SerializableLineConnector[]): any[] {
+        // @ts-expect-error toJson is attached by Jsonizable
+        return value.map(connector => connector.toJson());
+    },
+    deserialize(value: any[]): SerializableLineConnector[] {
+        // @ts-expect-error fromJson is attached by Jsonizable
+        return value.map(json => SerializableLineConnector.fromJson(json));
+    },
+};
+/* eslint-enable @typescript-eslint/no-explicit-any */
diff --git a/monosketch-svelte/src/lib/mono/shape/serialization/extra.test.ts b/monosketch-svelte/src/lib/mono/shape/serialization/extra.test.ts
new file mode 100644
index 000000000..bd69a1aea
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/serialization/extra.test.ts
@@ -0,0 +1,179 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { describe, expect, it } from "vitest";
+import { SerializableLineExtra, SerializableRectExtra, SerializableTextExtra } from './extras';
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+describe('SerializableRectExtra', () => {
+    it('should create a SerializableRectExtra instance correctly', () => {
+        const original = SerializableRectExtra.create({
+            isFillEnabled: true,
+            userSelectedFillStyleId: 'fillStyle1',
+            isBorderEnabled: true,
+            userSelectedBorderStyleId: 'borderStyle1',
+            dashPattern: 'dashPattern1',
+            corner: 'corner1',
+        });
+
+        // @ts-ignore
+        const json = original.toJson();
+        console.log(json);
+        expect(json).toStrictEqual({
+            fe: true,
+            fu: 'fillStyle1',
+            be: true,
+            bu: 'borderStyle1',
+            du: 'dashPattern1',
+            rc: 'corner1',
+        });
+    });
+
+    it('should serialize and deserialize correctly', () => {
+        const json = {
+            fe: false,
+            fu: 'fillStyle2',
+            be: false,
+            bu: 'borderStyle2',
+            du: 'dashPattern3',
+            rc: 'corner4',
+        };
+
+        // @ts-ignore
+        const deserialized = SerializableRectExtra.fromJson(json);
+        expect(deserialized).toStrictEqual(
+            SerializableRectExtra.create({
+                isFillEnabled: false,
+                userSelectedFillStyleId: 'fillStyle2',
+                isBorderEnabled: false,
+                userSelectedBorderStyleId: 'borderStyle2',
+                dashPattern: 'dashPattern3',
+                corner: 'corner4',
+            })
+        );
+    });
+});
+
+describe('SerializableTextExtra', () => {
+    it('should create a SerializableTextExtra instance correctly', () => {
+        const original = SerializableTextExtra.create({
+            boundExtra: SerializableRectExtra.create({
+                isFillEnabled: true,
+                userSelectedFillStyleId: 'fillStyle1',
+                isBorderEnabled: true,
+                userSelectedBorderStyleId: 'borderStyle1',
+                dashPattern: 'dashPattern1',
+                corner: 'corner1',
+            }),
+            textHorizontalAlign: 1,
+            textVerticalAlign: 2,
+        });
+
+        // @ts-ignore
+        const json = original.toJson();
+        console.log(json);
+        expect(json).toStrictEqual({
+            be: {
+                fe: true,
+                fu: 'fillStyle1',
+                be: true,
+                bu: 'borderStyle1',
+                du: 'dashPattern1',
+                rc: 'corner1',
+            },
+            tha: 1,
+            tva: 2,
+        });
+    });
+
+    it('should serialize and deserialize correctly', () => {
+        const json = {
+            be: {
+                fe: false,
+                fu: 'fillStyle2',
+                be: false,
+                bu: 'borderStyle2',
+                du: 'dashPattern3',
+                rc: 'corner4',
+            },
+            tha: 3,
+            tva: 4,
+        };
+
+        // @ts-ignore
+        const deserialized = SerializableTextExtra.fromJson(json);
+        expect(deserialized).toStrictEqual(
+            SerializableTextExtra.create({
+                boundExtra: SerializableRectExtra.create({
+                    isFillEnabled: false,
+                    userSelectedFillStyleId: 'fillStyle2',
+                    isBorderEnabled: false,
+                    userSelectedBorderStyleId: 'borderStyle2',
+                    dashPattern: 'dashPattern3',
+                    corner: 'corner4',
+                }),
+                textHorizontalAlign: 3,
+                textVerticalAlign: 4,
+            })
+        );
+    });
+});
+
+describe('SerializableLineExtra', () => {
+    it('should create a SerializableLineExtra instance correctly', () => {
+        const original = SerializableLineExtra.create({
+            isStrokeEnabled: true,
+            userSelectedStrokeStyleId: 'strokeStyle1',
+            isStartAnchorEnabled: true,
+            userSelectedStartAnchorId: 'startAnchor1',
+            isEndAnchorEnabled: true,
+            userSelectedEndAnchorId: 'endAnchor1',
+            dashPattern: 'dashPattern1',
+            isRoundedCorner: true,
+        });
+
+        // @ts-ignore
+        const json = original.toJson();
+        console.log(json);
+        expect(json).toStrictEqual({
+            se: true,
+            su: 'strokeStyle1',
+            ase: true,
+            asu: 'startAnchor1',
+            aee: true,
+            aeu: 'endAnchor1',
+            du: 'dashPattern1',
+            rc: true,
+        });
+    });
+
+    it('should serialize and deserialize correctly', () => {
+        const json = {
+            se: false,
+            su: 'strokeStyle2',
+            ase: false,
+            asu: 'startAnchor2',
+            aee: false,
+            aeu: 'endAnchor2',
+            du: 'dashPattern2',
+            rc: false,
+        };
+
+        // @ts-ignore
+        const deserialized = SerializableLineExtra.fromJson(json);
+        expect(deserialized).toStrictEqual(
+            SerializableLineExtra.create({
+                isStrokeEnabled: false,
+                userSelectedStrokeStyleId: 'strokeStyle2',
+                isStartAnchorEnabled: false,
+                userSelectedStartAnchorId: 'startAnchor2',
+                isEndAnchorEnabled: false,
+                userSelectedEndAnchorId: 'endAnchor2',
+                dashPattern: 'dashPattern2',
+                isRoundedCorner: false,
+            })
+        );
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/shape/serialization/extras.ts b/monosketch-svelte/src/lib/mono/shape/serialization/extras.ts
new file mode 100644
index 000000000..5f66a795a
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/serialization/extras.ts
@@ -0,0 +1,156 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Jsonizable, SerialName } from "$mono/shape/serialization/serializable";
+
+/**
+ * A serializable class for extra properties of a rectangle shape.
+ */
+@Jsonizable
+export class SerializableRectExtra {
+    @SerialName("fe")
+    public isFillEnabled: boolean = false;
+    @SerialName("fu")
+    public userSelectedFillStyleId: string = "";
+    @SerialName("be")
+    public isBorderEnabled: boolean = false;
+    @SerialName("bu")
+    public userSelectedBorderStyleId: string = "";
+    @SerialName("du")
+    public dashPattern: string = "";
+    @SerialName("rc")
+    public corner: string = "";
+
+    private constructor() {
+    }
+
+    static create(
+        {
+            isFillEnabled,
+            userSelectedFillStyleId,
+            isBorderEnabled,
+            userSelectedBorderStyleId,
+            dashPattern,
+            corner,
+        }: {
+            isFillEnabled: boolean;
+            userSelectedFillStyleId: string;
+            isBorderEnabled: boolean;
+            userSelectedBorderStyleId: string;
+            dashPattern: string;
+            corner: string;
+        },
+    ): SerializableRectExtra {
+        const result = new SerializableRectExtra();
+        result.isFillEnabled = isFillEnabled;
+        result.userSelectedFillStyleId = userSelectedFillStyleId;
+        result.isBorderEnabled = isBorderEnabled;
+        result.userSelectedBorderStyleId = userSelectedBorderStyleId;
+        result.dashPattern = dashPattern;
+        result.corner = corner;
+
+        return result;
+    }
+
+    static EMPTY: SerializableRectExtra = new SerializableRectExtra();
+}
+
+/**
+ * A serializable class for extra properties of a text shape.
+ */
+@Jsonizable
+export class SerializableTextExtra {
+    @SerialName("be")
+    public boundExtra: SerializableRectExtra = SerializableRectExtra.EMPTY;
+    @SerialName("tha")
+    public textHorizontalAlign: number = 0;
+    @SerialName("tva")
+    public textVerticalAlign: number = 0;
+
+    private constructor() {
+    }
+
+    static create(
+        {
+            boundExtra,
+            textHorizontalAlign,
+            textVerticalAlign,
+        }: {
+            boundExtra: SerializableRectExtra,
+            textHorizontalAlign: number,
+            textVerticalAlign: number,
+        },
+    ): SerializableTextExtra {
+        const result = new SerializableTextExtra();
+        result.boundExtra = boundExtra;
+        result.textHorizontalAlign = textHorizontalAlign;
+        result.textVerticalAlign = textVerticalAlign;
+
+        return result;
+    }
+
+    static EMPTY: SerializableTextExtra = new SerializableTextExtra();
+}
+
+/**
+ * A serializable class for extra properties of a line shape.
+ */
+@Jsonizable
+export class SerializableLineExtra {
+    @SerialName("se")
+    public isStrokeEnabled: boolean = true;
+    @SerialName("su")
+    public userSelectedStrokeStyleId: string = "";
+    @SerialName("ase")
+    public isStartAnchorEnabled: boolean = false;
+    @SerialName("asu")
+    public userSelectedStartAnchorId: string = "";
+    @SerialName("aee")
+    public isEndAnchorEnabled: boolean = false;
+    @SerialName("aeu")
+    public userSelectedEndAnchorId: string = "";
+    @SerialName("du")
+    public dashPattern: string = "";
+    @SerialName("rc")
+    public isRoundedCorner: boolean = false;
+
+    private constructor() {
+    }
+
+    static create(
+        {
+            isStrokeEnabled,
+            userSelectedStrokeStyleId,
+            isStartAnchorEnabled,
+            userSelectedStartAnchorId,
+            isEndAnchorEnabled,
+            userSelectedEndAnchorId,
+            dashPattern,
+            isRoundedCorner,
+        }: {
+            isStrokeEnabled: boolean;
+            userSelectedStrokeStyleId: string;
+            isStartAnchorEnabled: boolean;
+            userSelectedStartAnchorId: string;
+            isEndAnchorEnabled: boolean;
+            userSelectedEndAnchorId: string;
+            dashPattern: string;
+            isRoundedCorner: boolean;
+        },
+    ): SerializableLineExtra {
+        const result = new SerializableLineExtra();
+        result.isStrokeEnabled = isStrokeEnabled;
+        result.userSelectedStrokeStyleId = userSelectedStrokeStyleId;
+        result.isStartAnchorEnabled = isStartAnchorEnabled;
+        result.userSelectedStartAnchorId = userSelectedStartAnchorId;
+        result.isEndAnchorEnabled = isEndAnchorEnabled;
+        result.userSelectedEndAnchorId = userSelectedEndAnchorId;
+        result.dashPattern = dashPattern;
+        result.isRoundedCorner = isRoundedCorner;
+
+        return result;
+    }
+
+    static EMPTY: SerializableLineExtra = new SerializableLineExtra();
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/serialization/serializable.test.ts b/monosketch-svelte/src/lib/mono/shape/serialization/serializable.test.ts
new file mode 100644
index 000000000..f9a1a44d7
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/serialization/serializable.test.ts
@@ -0,0 +1,133 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Jsonizable, serializer, Serializer, SerialName } from "$mono/shape/serialization/serializable";
+import { describe, expect, it } from "vitest";
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+enum AnEnum {
+    A,
+    B,
+    C
+}
+
+const AnEnumSerializer = {
+    serialize: (value: AnEnum): string => {
+        switch (value) {
+            case AnEnum.A:
+                return "xA";
+            case AnEnum.B:
+                return "xB";
+            case AnEnum.C:
+                return "xC";
+        }
+    },
+
+    deserialize: (value: string): AnEnum => {
+        switch (value) {
+            case "xA":
+                return AnEnum.A;
+            case "xB":
+                return AnEnum.B;
+            case "xC":
+                return AnEnum.C;
+            default:
+                throw new Error(`Unrecognizable value ${value}`);
+        }
+    },
+};
+
+@Jsonizable
+class Bar {
+    @SerialName("a")
+    public aString: string = "";
+
+    public aNumber: number = 123;
+
+    private constructor() {
+    }
+
+    static create(aString: string, aNumber: number): Bar {
+        const instance = new Bar();
+        instance.aString = aString;
+        instance.aNumber = aNumber;
+        return instance;
+    }
+}
+
+class Pair {
+    public first: number = 0;
+    public second: number = 0;
+
+    constructor(first: number, second: number) {
+        this.first = first;
+        this.second = second;
+    }
+}
+
+const PairSerializer = serializer(
+    (value: Pair) => `${value.first}|${value.second}`,
+    (value: string) => {
+        const [first, second] = value.split("|").map(Number);
+        if (isNaN(first) || isNaN(second)) {
+            throw new Error(`Invalid Pair format: ${value}`);
+        }
+        return new Pair(first, second);
+    }
+);
+
+@Jsonizable
+class Foo {
+    @SerialName("b")
+    public bar: Bar = Bar.create("default", 0);
+
+    public aBoolean: boolean = true;
+
+    @Serializer(AnEnumSerializer)
+    public anEnum: AnEnum = AnEnum.A;
+
+    @SerialName("p")
+    @Serializer(PairSerializer)
+    public pair: Pair = new Pair(1, 2);
+
+    private constructor() {
+    }
+
+    static create(bar: Bar, aBoolean: boolean, anEnum: AnEnum): Foo {
+        const instance = new Foo();
+        instance.bar = bar;
+        instance.aBoolean = aBoolean;
+        instance.anEnum = anEnum;
+        return instance;
+    }
+}
+
+describe("Serializable", () => {
+    it("should serialize and deserialize correctly", () => {
+        const foo = Foo.create(Bar.create("foo-bar", 100), false, AnEnum.C);
+        // @ts-ignore
+        expect(foo.toJson()).toStrictEqual({
+            b: { a: "foo-bar", aNumber: 100 },
+            aBoolean: false,
+            anEnum: 'xC',
+            p: "1|2",
+        });
+
+        const json = {
+            b: { a: "a new string", aNumber: 999 },
+            aBoolean: false,
+            anEnum: 'xB',
+            p: "3|4",
+        };
+        // @ts-ignore
+        const foo2 = Foo.fromJson(json);
+        expect(foo2.bar.aString).toBe("a new string");
+        expect(foo2.bar.aNumber).toBe(999);
+        expect(foo2.aBoolean).toBe(false);
+        expect(foo2.anEnum).toBe(AnEnum.B);
+        expect(foo2.pair.first).toBe(3);
+        expect(foo2.pair.second).toBe(4);
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/shape/serialization/serializable.ts b/monosketch-svelte/src/lib/mono/shape/serialization/serializable.ts
new file mode 100644
index 000000000..3289c9e94
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/serialization/serializable.ts
@@ -0,0 +1,127 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types, @typescript-eslint/no-this-alias */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+/**
+ * An interface for custom serialization and deserialization.
+ */
+export interface Serializable {
+    serialize(value: any): any;
+
+    deserialize(value: any): any;
+}
+
+export const serializer =
+    (serialize: (value: any) => any, deserialize: (value: any) => any): Serializable => ({ serialize, deserialize });
+
+/**
+ * A decorator to define a serial name for a field of a class.
+ *
+ * @param name - The serial name of the field. For example, if the field name is `foo` and the serial name is `f`,
+ * the field will be serialized as `{f: value}` instead of `{foo: value}`.
+ * @see Serializable
+ */
+export function SerialName(name: string) {
+    return function(target: any, propertyKey: string | symbol) {
+        if (!target.constructor.serialNames) {
+            target.constructor.serialNames = {};
+        }
+        target.constructor.serialNames[propertyKey] = name;
+    };
+}
+
+/**
+ * A decorator to define a serializer for a field of a class.
+ *
+ * @param serializer - The serializer object.
+ * @see Serializable
+ */
+export function Serializer(serializer: Serializable) {
+    return function(target: any, propertyKey: string | symbol) {
+        if (!target.constructor.serializers) {
+            target.constructor.serializers = {};
+        }
+        target.constructor.serializers[propertyKey] = serializer;
+    };
+}
+
+/**
+ * A decorator to make a class serializable with customizable field names and serializer functions.
+ * This decorator adds `toJson` and `fromJson` methods to the class, allowing instances to be
+ * serialized to JSON and deserialized from JSON.
+ *
+ * @param constructor - The constructor function of the class to be decorated.
+ */
+export function Jsonizable(constructor: Function) {
+    // @ts-ignore
+    if (!constructor.serializers) {
+        // @ts-ignore
+        constructor.serializers = {};
+    }
+    // @ts-ignore
+    if (!constructor.serialNames) {
+        // @ts-ignore
+        constructor.serialNames = {};
+    }
+
+    // @ts-ignore
+    const serialNames = constructor.serialNames;
+    // @ts-ignore
+    const serializers = constructor.serializers;
+
+    constructor.prototype.toJson = function() {
+        const json: any = {};
+        const instance = this;
+        for (const key in instance) {
+            if (!instance.hasOwnProperty(key)) {
+                continue;
+            }
+            // If the key is not defined in serialNames, use the key itself
+            const serializedKey = serialNames[key] ?? key;
+
+            // 1st: Check if the field has a serializer
+            // 2nd: Check if the field has a toJson method
+            // 3rd: Use the value directly
+            const field = instance[key];
+            if (serializers[key]) {
+                json[serializedKey] = serializers[key].serialize(field);
+            } else if (field && field.toJson) {
+                json[serializedKey] = field.toJson();
+            } else {
+                json[serializedKey] = field;
+            }
+        }
+        return json;
+    };
+
+    // @ts-ignore
+    constructor.fromJson = function(data: any) {
+        // @ts-ignore
+        const instance = new constructor();
+        for (const key of Object.keys(instance)) {
+            // If the key is not defined in serialNames, use the key itself
+            const serializedKey = serialNames[key] ?? key;
+            const value = data[serializedKey];
+            if (value === undefined) {
+                continue;
+            }
+
+            const field = instance[key];
+            // 1st: Check if the field has a serializer
+            // 2nd: Check if the field has a fromJson method
+            // 3rd: Use the value directly
+            if (serializers[key]) {
+                instance[key] = serializers[key].deserialize(value);
+            } else if (field && field.constructor && field.constructor.fromJson) {
+                instance[key] = field.constructor.fromJson(value);
+            } else {
+                instance[key] = value;
+            }
+        }
+
+        return instance;
+    };
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/serialization/serializers.ts b/monosketch-svelte/src/lib/mono/shape/serialization/serializers.ts
new file mode 100644
index 000000000..eeaa66a22
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/serialization/serializers.ts
@@ -0,0 +1,113 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { DirectedPoint, Direction, Point, PointF } from "$libs/graphics-geo/point";
+import { Rect } from "$libs/graphics-geo/rect";
+import { LineAnchor } from "$mono/shape/shape/linehelper";
+
+/**
+ * A serializer for [LineAnchor]
+ */
+export const AnchorSerializer = {
+    START_VALUE: 1,
+    END_VALUE: 2,
+
+    serialize(value: LineAnchor): number {
+        switch (value) {
+            case LineAnchor.START:
+                return AnchorSerializer.START_VALUE;
+            case LineAnchor.END:
+                return AnchorSerializer.END_VALUE;
+            default:
+                throw new Error(`Unrecognizable value ${value}`);
+        }
+    },
+
+    deserialize(value: number): LineAnchor {
+        switch (value) {
+            case AnchorSerializer.START_VALUE:
+                return LineAnchor.START;
+            case AnchorSerializer.END_VALUE:
+                return LineAnchor.END;
+            default:
+                throw new Error(`Unrecognizable value ${value}`);
+        }
+    },
+};
+
+export const PointSerializer = {
+    serialize(value: Point): string {
+        return `${value.left}|${value.top}`;
+    },
+
+    deserialize(value: string): Point {
+        const [x, y] = value.split("|").map(Number);
+        if (isNaN(x) || isNaN(y)) {
+            throw new Error(`Invalid Point format: ${value}`);
+        }
+        return new Point(x, y);
+    },
+};
+
+export const PointArraySerializer = {
+    serialize(value: Point[]): string[] {
+        return value.map(PointSerializer.serialize);
+    },
+
+    deserialize(value: string[]): Point[] {
+        return value.map(PointSerializer.deserialize);
+    },
+};
+
+/**
+ * A serializer for [PointF]
+ */
+export const PointFSerializer = {
+    serialize(value: PointF): string {
+        return `${value.left}|${value.top}`;
+    },
+
+    deserialize(value: string): PointF {
+        const [x, y] = value.split("|").map(Number);
+        if (isNaN(x) || isNaN(y)) {
+            throw new Error(`Invalid PointF format: ${value}`);
+        }
+        return new PointF(x, y);
+    },
+};
+
+export const DirectedPointSerializer = {
+    MARSHAL_HORIZONTAL: "H",
+    MARSHAL_VERTICAL: "V",
+
+    serialize(value: DirectedPoint): string {
+        const serializedDirection = value.direction === Direction.HORIZONTAL
+            ? DirectedPointSerializer.MARSHAL_HORIZONTAL
+            : DirectedPointSerializer.MARSHAL_VERTICAL;
+        return `${serializedDirection}|${value.point.left}|${value.point.top}`;
+    },
+
+    deserialize(value: string): DirectedPoint {
+        const [serializedDirection, left, top] = value.split("|");
+        const direction = serializedDirection === DirectedPointSerializer.MARSHAL_HORIZONTAL
+            ? Direction.HORIZONTAL
+            : Direction.VERTICAL;
+
+        return DirectedPoint.of(direction, parseInt(left), parseInt(top));
+    },
+};
+
+export const RectSerializer = {
+    serialize(value: Rect): string {
+        return `${value.left}|${value.top}|${value.width}|${value.height}`;
+    },
+
+    deserialize(value: string): Rect {
+        const [left, top, width, height] = value.split("|").map(Number);
+        if (isNaN(left) || isNaN(top) || isNaN(width) || isNaN(width)) {
+            throw new Error(`Invalid Rect format: ${value}`);
+        }
+        return Rect.byLTWH(left, top, width, height);
+    },
+};
diff --git a/monosketch-svelte/src/lib/mono/shape/serialization/shapes.test.ts b/monosketch-svelte/src/lib/mono/shape/serialization/shapes.test.ts
new file mode 100644
index 000000000..9915db025
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/serialization/shapes.test.ts
@@ -0,0 +1,661 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { DirectedPoint, Direction, Point } from "$libs/graphics-geo/point";
+import { Rect } from "$libs/graphics-geo/rect";
+import { SerializableLineExtra, SerializableRectExtra, SerializableTextExtra } from "$mono/shape/serialization/extras";
+import {
+    SerializableGroup,
+    SerializableLine,
+    SerializableRectangle,
+    SerializableText,
+} from "$mono/shape/serialization/shapes";
+import { describe, expect, it } from "vitest";
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+describe('SerializableRectangle', () => {
+    it('should serialize correctly', () => {
+        const original = SerializableRectangle.create({
+            id: 'rect1',
+            isIdTemporary: false,
+            versionCode: 1,
+            bound: Rect.byLTWH(10, 20, 100, 100),
+            extra: SerializableRectExtra.create({
+                isFillEnabled: true,
+                userSelectedFillStyleId: 'fillStyle1',
+                isBorderEnabled: true,
+                userSelectedBorderStyleId: 'borderStyle1',
+                dashPattern: 'dashPattern1',
+                corner: 'corner1',
+            }),
+        });
+
+        // @ts-ignore
+        const json = original.toJson();
+        console.log(json);
+        expect(json).toStrictEqual({
+            type: 'R',
+            i: 'rect1',
+            idtemp: false,
+            v: 1,
+            b: "10|20|100|100",
+            e: {
+                fe: true,
+                fu: 'fillStyle1',
+                be: true,
+                bu: 'borderStyle1',
+                du: 'dashPattern1',
+                rc: 'corner1',
+            },
+        });
+    });
+
+    it('should deserialize correctly', () => {
+        const json = {
+            type: 'R',
+            i: 'rect2',
+            idtemp: true,
+            v: 2,
+            b: "33|44|55|66",
+            e: {
+                fe: false,
+                fu: 'fillStyle2',
+                be: false,
+                bu: 'borderStyle2',
+                du: 'dashPattern2',
+                rc: 'corner2',
+            },
+        };
+
+        // @ts-ignore
+        const deserialized = SerializableRectangle.fromJson(json);
+        expect(deserialized).toStrictEqual(
+            SerializableRectangle.create({
+                id: 'rect2',
+                isIdTemporary: true,
+                versionCode: 2,
+                bound: Rect.byLTWH(33, 44, 55, 66),
+                extra: SerializableRectExtra.create({
+                    isFillEnabled: false,
+                    userSelectedFillStyleId: 'fillStyle2',
+                    isBorderEnabled: false,
+                    userSelectedBorderStyleId: 'borderStyle2',
+                    dashPattern: 'dashPattern2',
+                    corner: 'corner2',
+                }),
+            }),
+        );
+    });
+
+    it("should deserialize with null id correctly", () => {
+        const json = {
+            type: 'R',
+            i: null,
+            idtemp: true,
+            v: 2,
+            b: "33|44|55|66",
+            e: {
+                fe: false,
+                fu: 'fillStyle2',
+                be: false,
+                bu: 'borderStyle2',
+                du: 'dashPattern2',
+                rc: 'corner2',
+            },
+        };
+        // @ts-ignore
+        const deserialized = SerializableRectangle.fromJson(json);
+        expect(deserialized).toStrictEqual(
+            SerializableRectangle.create({
+                id: null,
+                isIdTemporary: true,
+                versionCode: 2,
+                bound: Rect.byLTWH(33, 44, 55, 66),
+                extra: SerializableRectExtra.create({
+                    isFillEnabled: false,
+                    userSelectedFillStyleId: 'fillStyle2',
+                    isBorderEnabled: false,
+                    userSelectedBorderStyleId: 'borderStyle2',
+                    dashPattern: 'dashPattern2',
+                    corner: 'corner2',
+                }),
+            }),
+        );
+    });
+});
+
+describe('SerializableText', () => {
+    it('should serialize correctly', () => {
+        const original = SerializableText.create({
+            id: 'text1',
+            isIdTemporary: false,
+            versionCode: 1,
+            bound: Rect.byLTWH(10, 20, 100, 100),
+            text: 'Hello, world!',
+            extra: SerializableTextExtra.create({
+                boundExtra: SerializableRectExtra.create(
+                    {
+                        isFillEnabled: false,
+                        userSelectedFillStyleId: 'fillStyle1',
+                        isBorderEnabled: false,
+                        userSelectedBorderStyleId: 'borderStyle1',
+                        dashPattern: 'dashPattern1',
+                        corner: 'corner1',
+                    },
+                ),
+                textHorizontalAlign: 0,
+                textVerticalAlign: 1,
+            }),
+            isTextEditable: true,
+        });
+
+        // @ts-ignore
+        const json = original.toJson();
+        console.log(json);
+        expect(json).toStrictEqual({
+            type: 'T',
+            i: 'text1',
+            idtemp: false,
+            v: 1,
+            b: "10|20|100|100",
+            t: 'Hello, world!',
+            e: {
+                be: {
+                    fe: false,
+                    fu: 'fillStyle1',
+                    be: false,
+                    bu: 'borderStyle1',
+                    du: 'dashPattern1',
+                    rc: 'corner1',
+                },
+                tha: 0,
+                tva: 1,
+            },
+            te: true,
+        });
+    });
+
+    it('should deserialize correctly', () => {
+        const json = {
+            type: 'T',
+            i: 'text2',
+            idtemp: true,
+            v: 2,
+            b: "33|44|55|66",
+            t: 'Goodbye, world!',
+            e: {
+                be: {
+                    fe: false,
+                    fu: 'fillStyle2',
+                    be: false,
+                    bu: 'borderStyle2',
+                    du: 'dashPattern2',
+                    rc: 'corner2',
+                },
+                tha: 2,
+                tva: 1,
+            },
+            te: false,
+        };
+
+        // @ts-ignore
+        const deserialized = SerializableText.fromJson(json);
+        expect(deserialized).toStrictEqual(
+            SerializableText.create({
+                id: 'text2',
+                isIdTemporary: true,
+                versionCode: 2,
+                bound: Rect.byLTWH(33, 44, 55, 66),
+                text: 'Goodbye, world!',
+                extra: SerializableTextExtra.create({
+                    boundExtra: SerializableRectExtra.create(
+                        {
+                            isFillEnabled: false,
+                            userSelectedFillStyleId: 'fillStyle2',
+                            isBorderEnabled: false,
+                            userSelectedBorderStyleId: 'borderStyle2',
+                            dashPattern: 'dashPattern2',
+                            corner: 'corner2',
+                        },
+                    ),
+                    textHorizontalAlign: 2,
+                    textVerticalAlign: 1,
+                }),
+                isTextEditable: false,
+            }),
+        );
+    });
+
+    it("should deserialize with null id correctly", () => {
+        const json = {
+            type: 'T',
+            i: null,
+            idtemp: true,
+            v: 2,
+            b: "33|44|55|66",
+            t: 'Sample text',
+            e: {
+                be: {
+                    fe: false,
+                    fu: 'fillStyle2',
+                    be: false,
+                    bu: 'borderStyle2',
+                    du: 'dashPattern2',
+                    rc: 'corner2',
+                },
+                tha: 2,
+                tva: 1,
+            },
+            te: true,
+        };
+        // @ts-ignore
+        const deserialized = SerializableText.fromJson(json);
+        expect(deserialized).toStrictEqual(
+            SerializableText.create({
+                id: null,
+                isIdTemporary: true,
+                versionCode: 2,
+                bound: Rect.byLTWH(33, 44, 55, 66),
+                text: 'Sample text',
+                extra: SerializableTextExtra.create({
+                    boundExtra: SerializableRectExtra.create(
+                        {
+                            isFillEnabled: false,
+                            userSelectedFillStyleId: 'fillStyle2',
+                            isBorderEnabled: false,
+                            userSelectedBorderStyleId: 'borderStyle2',
+                            dashPattern: 'dashPattern2',
+                            corner: 'corner2',
+                        },
+                    ),
+                    textHorizontalAlign: 2,
+                    textVerticalAlign: 1,
+                }),
+                isTextEditable: true,
+            }),
+        );
+    });
+});
+
+describe('SerializableLine', () => {
+    it('should serialize correctly', () => {
+        const original = SerializableLine.create({
+            id: 'line1',
+            isIdTemporary: false,
+            versionCode: 1,
+            startPoint: DirectedPoint.of(Direction.HORIZONTAL, 10, 20),
+            endPoint: DirectedPoint.of(Direction.VERTICAL, 30, 40),
+            jointPoints: [Point.of(15, 25), Point.of(20, 30)],
+            extra: SerializableLineExtra.create({
+                isStrokeEnabled: true,
+                userSelectedStrokeStyleId: 'strokeStyle1',
+                isStartAnchorEnabled: true,
+                userSelectedStartAnchorId: 'startAnchor1',
+                isEndAnchorEnabled: true,
+                userSelectedEndAnchorId: 'endAnchor1',
+                dashPattern: 'dashPattern1',
+                isRoundedCorner: true,
+            }),
+            wasMovingEdge: false,
+        });
+
+        // @ts-ignore
+        const json = original.toJson();
+        console.log(json);
+        expect(json).toStrictEqual({
+            type: 'L',
+            i: 'line1',
+            idtemp: false,
+            v: 1,
+            ps: 'H|10|20',
+            pe: 'V|30|40',
+            jps: ['15|25', '20|30'],
+            e: {
+                se: true,
+                su: 'strokeStyle1',
+                ase: true,
+                asu: 'startAnchor1',
+                aee: true,
+                aeu: 'endAnchor1',
+                du: 'dashPattern1',
+                rc: true,
+            },
+            em: false,
+        });
+    });
+
+    it('should deserialize correctly', () => {
+        const json = {
+            type: 'L',
+            i: 'line2',
+            idtemp: true,
+            v: 2,
+            ps: 'H|10|20',
+            pe: 'V|30|40',
+            jps: ['15|25', '20|30'],
+            e: {
+                se: true,
+                su: 'strokeStyle1',
+                ase: true,
+                asu: 'startAnchor1',
+                aee: true,
+                aeu: 'endAnchor1',
+                du: 'dashPattern1',
+                rc: true,
+            },
+            em: true,
+        };
+
+        // @ts-ignore
+        const deserialized = SerializableLine.fromJson(json);
+        expect(deserialized).toStrictEqual(
+            SerializableLine.create({
+                id: 'line2',
+                isIdTemporary: true,
+                versionCode: 2,
+                startPoint: DirectedPoint.of(Direction.HORIZONTAL, 10, 20),
+                endPoint: DirectedPoint.of(Direction.VERTICAL, 30, 40),
+                jointPoints: [Point.of(15, 25), Point.of(20, 30)],
+                extra: SerializableLineExtra.create({
+                    isStrokeEnabled: true,
+                    userSelectedStrokeStyleId: 'strokeStyle1',
+                    isStartAnchorEnabled: true,
+                    userSelectedStartAnchorId: 'startAnchor1',
+                    isEndAnchorEnabled: true,
+                    userSelectedEndAnchorId: 'endAnchor1',
+                    dashPattern: 'dashPattern1',
+                    isRoundedCorner: true,
+                }),
+                wasMovingEdge: true,
+            }),
+        );
+    });
+
+    it("should deserialize with null id correctly", () => {
+        const json = {
+            type: 'L',
+            i: null,
+            idtemp: true,
+            v: 2,
+            ps: 'H|10|20',
+            pe: 'V|30|40',
+            jps: ['15|25', '20|30'],
+            e: {
+                se: true,
+                su: 'strokeStyle1',
+                ase: true,
+                asu: 'startAnchor1',
+                aee: true,
+                aeu: 'endAnchor1',
+                du: 'dashPattern1',
+                rc: true,
+            },
+            em: true,
+        };
+        // @ts-ignore
+        const deserialized = SerializableLine.fromJson(json);
+        expect(deserialized).toStrictEqual(
+            SerializableLine.create({
+                id: null,
+                isIdTemporary: true,
+                versionCode: 2,
+                startPoint: DirectedPoint.of(Direction.HORIZONTAL, 10, 20),
+                endPoint: DirectedPoint.of(Direction.VERTICAL, 30, 40),
+                jointPoints: [Point.of(15, 25), Point.of(20, 30)],
+                extra: SerializableLineExtra.create({
+                    isStrokeEnabled: true,
+                    userSelectedStrokeStyleId: 'strokeStyle1',
+                    isStartAnchorEnabled: true,
+                    userSelectedStartAnchorId: 'startAnchor1',
+                    isEndAnchorEnabled: true,
+                    userSelectedEndAnchorId: 'endAnchor1',
+                    dashPattern: 'dashPattern1',
+                    isRoundedCorner: true,
+                }),
+                wasMovingEdge: true,
+            }),
+        );
+    });
+});
+
+describe('SerializableGroup', () => {
+    const dummyRect = SerializableRectangle.create({
+        id: 'rect1',
+        isIdTemporary: false,
+        versionCode: 1,
+        bound: Rect.byLTWH(10, 20, 100, 100),
+        extra: SerializableRectExtra.create({
+            isFillEnabled: true,
+            userSelectedFillStyleId: 'fillStyle1',
+            isBorderEnabled: true,
+            userSelectedBorderStyleId: 'borderStyle1',
+            dashPattern: 'dashPattern1',
+            corner: 'corner1',
+        }),
+    });
+    const dummyText = SerializableText.create(
+        {
+            id: 'text1',
+            isIdTemporary: false,
+            versionCode: 1,
+            bound: Rect.byLTWH(10, 20, 100, 100),
+            text: 'Hello, world!',
+            extra: SerializableTextExtra.create({
+                boundExtra: SerializableRectExtra.create(
+                    {
+                        isFillEnabled: false,
+                        userSelectedFillStyleId: 'fillStyle1',
+                        isBorderEnabled: false,
+                        userSelectedBorderStyleId: 'borderStyle1',
+                        dashPattern: 'dashPattern1',
+                        corner: 'corner1',
+                    },
+                ),
+                textHorizontalAlign: 0,
+                textVerticalAlign: 1,
+            }),
+            isTextEditable: true,
+        },
+    );
+    const dummyLine = SerializableLine.create(
+        {
+            id: 'line1',
+            isIdTemporary: false,
+            versionCode: 1,
+            startPoint: DirectedPoint.of(Direction.HORIZONTAL, 10, 20),
+            endPoint: DirectedPoint.of(Direction.VERTICAL, 30, 40),
+            jointPoints: [Point.of(15, 25), Point.of(20, 30)],
+            extra: SerializableLineExtra.create({
+                isStrokeEnabled: true,
+                userSelectedStrokeStyleId: 'strokeStyle1',
+                isStartAnchorEnabled: true,
+                userSelectedStartAnchorId: 'startAnchor1',
+                isEndAnchorEnabled: true,
+                userSelectedEndAnchorId: 'endAnchor1',
+                dashPattern: 'dashPattern1',
+                isRoundedCorner: true,
+            }),
+            wasMovingEdge: false,
+        }
+    );
+
+    it('should serialize correctly', () => {
+        const original = SerializableGroup.create({
+            id: 'group1',
+            isIdTemporary: false,
+            versionCode: 1,
+            shapes: [dummyRect, dummyText, dummyLine],
+        });
+
+        // @ts-ignore
+        const json = original.toJson();
+        console.log(json);
+        expect(json).toStrictEqual({
+            type: 'G',
+            i: 'group1',
+            idtemp: false,
+            v: 1,
+            ss: [
+                // @ts-ignore
+                dummyRect.toJson(),
+                // @ts-ignore
+                dummyText.toJson(),
+                // @ts-ignore
+                dummyLine.toJson(),
+            ],
+        });
+    });
+
+    it('should deserialize correctly', () => {
+        const json = {
+            type: 'G',
+            i: 'group2',
+            idtemp: true,
+            v: 2,
+            ss: [
+                // @ts-ignore
+                dummyText.toJson(),
+                // @ts-ignore
+                dummyLine.toJson(),
+                // @ts-ignore
+                dummyRect.toJson(),
+            ],
+        };
+
+        // @ts-ignore
+        const deserialized = SerializableGroup.fromJson(json);
+        expect(deserialized).toStrictEqual(
+            SerializableGroup.create({
+                id: 'group2',
+                isIdTemporary: true,
+                versionCode: 2,
+                shapes: [
+                    dummyText,
+                    dummyLine,
+                    dummyRect,
+                ],
+            }),
+        );
+    });
+
+    it("should deserialize with null id correctly", () => {
+        const json = {
+            type: 'G',
+            i: null,
+            idtemp: true,
+            v: 2,
+            ss: [
+                // @ts-ignore
+                dummyRect.toJson(),
+                // @ts-ignore
+                dummyRect.toJson(),
+                // @ts-ignore
+                dummyLine.toJson(),
+                // @ts-ignore
+                dummyText.toJson(),
+            ],
+        };
+        // @ts-ignore
+        const deserialized = SerializableGroup.fromJson(json);
+        expect(deserialized).toStrictEqual(
+            SerializableGroup.create({
+                id: null,
+                isIdTemporary: true,
+                versionCode: 2,
+                shapes: [
+                    dummyRect,
+                    dummyRect,
+                    dummyLine,
+                    dummyText,
+                ],
+            }),
+        );
+    });
+
+    it("should handle serialize nested groups correctly", () => {
+        const nestedGroup = SerializableGroup.create({
+            id: 'nestedGroup1',
+            isIdTemporary: false,
+            versionCode: 1,
+            shapes: [dummyRect, dummyText],
+        });
+        const original = SerializableGroup.create({
+            id: 'group1',
+            isIdTemporary: false,
+            versionCode: 1,
+            shapes: [nestedGroup, dummyLine],
+        });
+
+        // @ts-ignore
+        const json = original.toJson();
+        console.log(json);
+        expect(json).toStrictEqual({
+            type: 'G',
+            i: 'group1',
+            idtemp: false,
+            v: 1,
+            ss: [
+                {
+                    type: 'G',
+                    i: 'nestedGroup1',
+                    idtemp: false,
+                    v: 1,
+                    ss: [
+                        // @ts-ignore
+                        dummyRect.toJson(),
+                        // @ts-ignore
+                        dummyText.toJson(),
+                    ],
+                },
+                // @ts-ignore
+                dummyLine.toJson(),
+            ],
+        });
+    });
+
+    it("should deserialize nested groups correctly", () => {
+        const json = {
+            type: 'G',
+            i: 'group1',
+            idtemp: false,
+            v: 1,
+            ss: [
+                {
+                    type: 'G',
+                    i: 'nestedGroup1',
+                    idtemp: false,
+                    v: 1,
+                    ss: [
+                        // @ts-ignore
+                        dummyRect.toJson(),
+                        // @ts-ignore
+                        dummyText.toJson(),
+                    ],
+                },
+                // @ts-ignore
+                dummyLine.toJson(),
+            ],
+        };
+
+        // @ts-ignore
+        const deserialized = SerializableGroup.fromJson(json);
+        expect(deserialized).toStrictEqual(
+            SerializableGroup.create({
+                id: 'group1',
+                isIdTemporary: false,
+                versionCode: 1,
+                shapes: [
+                    SerializableGroup.create({
+                        id: 'nestedGroup1',
+                        isIdTemporary: false,
+                        versionCode: 1,
+                        shapes: [dummyRect, dummyText],
+                    }),
+                    dummyLine,
+                ],
+            }),
+        );
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/shape/serialization/shapes.ts b/monosketch-svelte/src/lib/mono/shape/serialization/shapes.ts
new file mode 100644
index 000000000..6fd13f609
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/serialization/shapes.ts
@@ -0,0 +1,315 @@
+// Base class for all serializable shapes
+import { Point } from "$libs/graphics-geo/point";
+import { DirectedPoint } from "$libs/graphics-geo/point";
+import { Rect } from "$libs/graphics-geo/rect";
+import {
+    SerializableLineExtra,
+    SerializableRectExtra,
+    SerializableTextExtra,
+} from "$mono/shape/serialization/extras";
+import { Jsonizable, Serializer, SerialName } from "$mono/shape/serialization/serializable";
+import { DirectedPointSerializer, PointArraySerializer, RectSerializer } from "$mono/shape/serialization/serializers";
+
+/**
+ * An abstract class for all serializable shapes.
+ */
+export abstract class AbstractSerializableShape {
+    /**
+     * The id of this shape.
+     * If this is null, the shape does not have id and will be assigned a new id when created.
+     * This value is only for serialization and reference purpose, do not read this value directly
+     * when creating a shape, instead, use [actualId].
+     */
+    abstract id: string | null;
+
+    /**
+     * A flag indicates that, if this value is true, even if the [id] is not null, the id is still
+     * unavailable. This is similar to when id is null but the temporary id is used for function
+     * like copy-paste.
+     */
+    abstract isIdTemporary: boolean;
+
+    abstract versionCode: number;
+
+    /**
+     * A hint for type selection when serializing and deserializing.
+     */
+    abstract type: string;
+
+    get actualId(): string | null {
+        return this.id ?? null;
+    }
+
+    protected constructor() {
+    }
+}
+
+/**
+ * A serializable class for a rectangle shape.
+ */
+@Jsonizable
+export class SerializableRectangle extends AbstractSerializableShape {
+    @SerialName("type")
+    public type: string = "R";
+
+    @SerialName("i")
+    public id: string | null = null;
+    @SerialName("idtemp")
+    public isIdTemporary: boolean = false;
+    @SerialName("v")
+    public versionCode: number = 0;
+    @SerialName("b")
+    @Serializer(RectSerializer)
+    public bound: Rect = Rect.ZERO;
+    @SerialName("e")
+    public extra: SerializableRectExtra = SerializableRectExtra.EMPTY;
+
+    private constructor() {
+        super();
+    }
+
+    static EMPTY: SerializableRectangle = new SerializableRectangle();
+
+    static create(
+        {
+            id,
+            isIdTemporary,
+            versionCode,
+            bound,
+            extra,
+        }: {
+            id: string | null;
+            isIdTemporary: boolean;
+            versionCode: number;
+            bound: Rect;
+            extra: SerializableRectExtra;
+        },
+    ): SerializableRectangle {
+        const result = new SerializableRectangle();
+        result.id = id;
+        result.isIdTemporary = isIdTemporary;
+        result.versionCode = versionCode;
+        result.bound = bound;
+        result.extra = extra;
+
+        return result;
+    }
+}
+
+/**
+ * A serializable class for a text shape.
+ */
+@Jsonizable
+export class SerializableText extends AbstractSerializableShape {
+    @SerialName("type")
+    public type: string = "T";
+
+    @SerialName("i")
+    public id: string | null = null;
+    @SerialName("idtemp")
+    public isIdTemporary: boolean = false;
+    @SerialName("v")
+    public versionCode: number = 0;
+    @SerialName("b")
+    @Serializer(RectSerializer)
+    public bound: Rect = Rect.ZERO;
+    @SerialName("t")
+    public text: string = "";
+    @SerialName("e")
+    public extra: SerializableTextExtra = SerializableTextExtra.EMPTY;
+    @SerialName("te")
+    public isTextEditable: boolean = false;
+
+    private constructor() {
+        super();
+    }
+
+    static create(
+        {
+            id,
+            isIdTemporary,
+            versionCode,
+            bound,
+            text,
+            extra,
+            isTextEditable,
+        }: {
+            id: string | null;
+            isIdTemporary: boolean;
+            versionCode: number;
+            bound: Rect;
+            text: string;
+            extra: SerializableTextExtra;
+            isTextEditable: boolean;
+        },
+    ): SerializableText {
+        const result = new SerializableText();
+        result.id = id;
+        result.isIdTemporary = isIdTemporary;
+        result.versionCode = versionCode;
+        result.bound = bound;
+        result.text = text;
+        result.extra = extra;
+        result.isTextEditable = isTextEditable;
+
+        return result;
+    }
+}
+
+
+/**
+ * A serializable class for a line shape.
+ */
+@Jsonizable
+export class SerializableLine extends AbstractSerializableShape {
+    @SerialName("type")
+    public type: string = "L";
+
+    @SerialName("i")
+    public id: string | null = null;
+    @SerialName("idtemp")
+    public isIdTemporary: boolean = false;
+    @SerialName("v")
+    public versionCode: number = 0;
+    @SerialName("ps")
+    @Serializer(DirectedPointSerializer)
+    public startPoint: DirectedPoint = DirectedPoint.ZERO;
+    @SerialName("pe")
+    @Serializer(DirectedPointSerializer)
+    public endPoint: DirectedPoint = DirectedPoint.ZERO;
+    @SerialName("jps")
+    @Serializer(PointArraySerializer)
+    public jointPoints: Point[] = [];
+    @SerialName("e")
+    public extra: SerializableLineExtra = SerializableLineExtra.EMPTY;
+    @SerialName("em")
+    public wasMovingEdge: boolean = true;
+
+    private constructor() {
+        super();
+    }
+
+    static create(
+        {
+            id,
+            isIdTemporary,
+            versionCode,
+            startPoint,
+            endPoint,
+            jointPoints,
+            extra,
+            wasMovingEdge,
+        }: {
+            id: string | null;
+            isIdTemporary: boolean;
+            versionCode: number;
+            startPoint: DirectedPoint;
+            endPoint: DirectedPoint;
+            jointPoints: Point[];
+            extra: SerializableLineExtra;
+            wasMovingEdge: boolean;
+        },
+    ): SerializableLine {
+        const result = new SerializableLine();
+        result.id = id;
+        result.isIdTemporary = isIdTemporary;
+        result.versionCode = versionCode;
+        result.startPoint = startPoint;
+        result.endPoint = endPoint;
+        result.jointPoints = jointPoints;
+        result.extra = extra;
+        result.wasMovingEdge = wasMovingEdge;
+
+        return result;
+    }
+}
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const ShapeArraySerializer = {
+    serialize: (value: AbstractSerializableShape[]): any[] => {
+        // @ts-expect-error toJson is attached by Jsonizable
+        return value.map((shape) => shape.toJson());
+    },
+
+    deserialize: (value: any[]): AbstractSerializableShape[] => {
+        return value.map(deserializeShape);
+    },
+};
+
+export function deserializeShape(shape: any): AbstractSerializableShape {
+    const type = shape["type"];
+    switch (type) {
+        case "R":
+            // @ts-expect-error fromJson is attached by Jsonizable
+            return SerializableRectangle.fromJson(shape);
+        case "T":
+            // @ts-expect-error fromJson is attached by Jsonizable
+            return SerializableText.fromJson(shape);
+        case "L":
+            // @ts-expect-error fromJson is attached by Jsonizable
+            return SerializableLine.fromJson(shape);
+        case "G":
+            // @ts-expect-error fromJson is attached by Jsonizable
+            return SerializableGroup.fromJson(shape);
+        default:
+            throw new Error(`Unrecognizable type ${type}`);
+    }
+}
+
+/* eslint-enable @typescript-eslint/no-explicit-any */
+
+/**
+ * A serializable class for a group shape.
+ */
+@Jsonizable
+export class SerializableGroup extends AbstractSerializableShape {
+    @SerialName("type")
+    public type: string = "G";
+
+    @SerialName("i")
+    public id: string | null = null;
+    @SerialName("idtemp")
+    public isIdTemporary: boolean = false;
+    @SerialName("v")
+    public versionCode: number = 0;
+    @SerialName("ss")
+    @Serializer(ShapeArraySerializer)
+    public shapes: AbstractSerializableShape[] = [];
+
+    private constructor() {
+        super();
+    }
+
+    copy({ isIdTemporary = this.isIdTemporary, }: { isIdTemporary: boolean; }): SerializableGroup {
+        return SerializableGroup.create({
+            id: this.id,
+            isIdTemporary,
+            versionCode: this.versionCode,
+            shapes: this.shapes,
+        });
+    }
+
+    static EMPTY: SerializableGroup = new SerializableGroup();
+
+    static create(
+        {
+            id,
+            isIdTemporary,
+            versionCode,
+            shapes,
+        }: {
+            id: string | null;
+            isIdTemporary: boolean;
+            versionCode: number;
+            shapes: AbstractSerializableShape[];
+        },
+    ): SerializableGroup {
+        const result = new SerializableGroup();
+        result.id = id;
+        result.isIdTemporary = isIdTemporary;
+        result.versionCode = versionCode;
+        result.shapes = shapes;
+
+        return result;
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/shape-clipboard-manager.test.ts b/monosketch-svelte/src/lib/mono/shape/shape-clipboard-manager.test.ts
new file mode 100644
index 000000000..1cf2571f9
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/shape-clipboard-manager.test.ts
@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+import { Point, PointF } from "$libs/graphics-geo/point";
+import { Rect } from "$libs/graphics-geo/rect";
+import { SerializableLineConnector } from "$mono/shape/serialization/connector";
+import { SerializableRectExtra } from "$mono/shape/serialization/extras";
+import { SerializableRectangle } from "$mono/shape/serialization/shapes";
+import { ClipboardObject } from "$mono/shape/shape-clipboard-manager";
+import { LineAnchor } from "$mono/shape/shape/linehelper";
+import { describe, expect, test } from "vitest";
+
+describe('ClipboardObjectTest', () => {
+    test('testJsonize', () => {
+        const shape = SerializableRectangle.create(
+            {
+                id: '1',
+                isIdTemporary: false,
+                versionCode: 0,
+                bound: Rect.ZERO,
+                extra: SerializableRectExtra.EMPTY,
+            },
+        );
+        const connector = SerializableLineConnector.create(
+            {
+                lineId: '1',
+                anchor: LineAnchor.START,
+                targetId: '2',
+                ratio: PointF.create({ left: 0, top: 0 }),
+                offset: Point.ZERO,
+            },
+        );
+
+        const clipboardObject = ClipboardObject.create([shape], [connector]);
+        // @ts-expect-error toJson is attached by Jsonizable
+        const json = clipboardObject.toJson();
+        console.log(json);
+        expect(json).toEqual({
+            // @ts-expect-error toJson is attached by Jsonizable
+            shapes: [shape.toJson()],
+            // @ts-expect-error toJson is attached by Jsonizable
+            connectors: [connector.toJson()],
+        });
+
+        // @ts-expect-error fromJson is attached by Jsonizable
+        const deserializedClipboardObject = ClipboardObject.fromJson(json);
+        expect(deserializedClipboardObject).toStrictEqual(clipboardObject);
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/shape/shape-clipboard-manager.ts b/monosketch-svelte/src/lib/mono/shape/shape-clipboard-manager.ts
new file mode 100644
index 000000000..edce948ce
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/shape-clipboard-manager.ts
@@ -0,0 +1,123 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Flow } from "$libs/flow";
+import { Rect } from "$libs/graphics-geo/rect";
+import { TextExtra } from "$mono/shape/extra/shape-extra";
+import {
+    type SerializableLineConnector,
+    SerializableLineConnectorArraySerializer,
+} from "$mono/shape/serialization/connector";
+import { Jsonizable, Serializer, SerialName } from "$mono/shape/serialization/serializable";
+import {
+    type AbstractSerializableShape,
+    SerializableText,
+    ShapeArraySerializer,
+} from "$mono/shape/serialization/shapes";
+import { AbstractShape } from "./shape/abstract-shape";
+
+/**
+ * A clipboard manager specializing for shapes.
+ * This class handles storing shapes to clipboard and getting shapes in clipboard from paste action.
+ */
+export class ShapeClipboardManager {
+    private clipboardShapeMutableFlow: Flow<ClipboardObject> = new Flow(ClipboardObject.create([], []));
+    public clipboardShapeFlow: Flow<ClipboardObject> = this.clipboardShapeMutableFlow.immutable();
+
+    constructor() {
+        document.onpaste = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.onPasteText(event.clipboardData?.getData('text/plain') || '');
+        };
+    }
+
+    private onPasteText(text: string) {
+        if (text.trim() === '') {
+            return;
+        }
+        const json = this.parseJsonFromString(text);
+        // @ts-expect-error fromJson is attached by Jsonizable
+        const clipboardObject = json ? ClipboardObject.fromJson(json) : null;
+        if (clipboardObject && clipboardObject.shapes.length > 0) {
+            this.clipboardShapeMutableFlow.value = clipboardObject;
+        }
+
+        this.clipboardShapeMutableFlow.value = ClipboardObject.create([this.createTextShapeFromText(text)], []);
+    }
+
+    private parseJsonFromString(text: string) {
+        try {
+            const json = JSON.parse(text);
+            // Backward compatibility with old clipboard format
+            return Array.isArray(json) ? { shapes: json, connectors: [] } : json;
+        } catch (e) {
+            console.error('Failed to parse JSON from clipboard text', e);
+            return null;
+        }
+
+    }
+
+    private createTextShapeFromText(text: string): SerializableText {
+        const lines = text.split('\n').flatMap(line => line.match(/.{1,400}/g) || []);
+        const width = Math.max(...lines.map(line => line.length));
+        const height = lines.length;
+
+        const toBeUsedText = text.replace(/ /g, '\u00a0');
+        return SerializableText.create({
+            id: null,
+            isIdTemporary: false,
+            versionCode: AbstractShape.nextVersionCode(),
+            bound: Rect.byLTWH(0, 0, width, height),
+            text: toBeUsedText,
+            extra: TextExtra.NO_BOUND.toSerializableExtra(),
+            isTextEditable: false,
+        });
+    }
+
+    public setClipboard(clipboardObject: ClipboardObject) {
+        // @ts-expect-error toJson is attached by Jsonizable
+        const text = JSON.stringify(clipboardObject.toJson());
+        this.setClipboardText(text);
+    }
+
+    public setClipboardText(text: string) {
+        const textArea = document.createElement('textarea');
+        textArea.style.position = 'absolute';
+        textArea.style.left = '-10000px';
+        textArea.style.top = '-10000px';
+        textArea.style.width = '1px';
+        textArea.style.height = '1px';
+        textArea.style.opacity = '0';
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.select();
+        // TODO: Address this deprecated method
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+    }
+}
+
+/**
+ * A data class to store shapes and connectors in clipboard when serializing to JSON.
+ */
+@Jsonizable
+export class ClipboardObject {
+    @SerialName("shapes")
+    @Serializer(ShapeArraySerializer)
+    public shapes: AbstractSerializableShape[] = [];
+    @SerialName("connectors")
+    @Serializer(SerializableLineConnectorArraySerializer)
+    public connectors: SerializableLineConnector[] = [];
+
+    private constructor() {
+    }
+
+    static create(shapes: AbstractSerializableShape[], connectors: SerializableLineConnector[]): ClipboardObject {
+        const result = new ClipboardObject();
+        result.shapes = shapes;
+        result.connectors = connectors;
+        return result;
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/shape-manager.test.ts b/monosketch-svelte/src/lib/mono/shape/shape-manager.test.ts
new file mode 100644
index 000000000..7fc58f235
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/shape-manager.test.ts
@@ -0,0 +1,201 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Rect } from "$libs/graphics-geo/rect";
+import {
+    AddShape,
+    ChangeOrder,
+    ChangeOrderType,
+    GroupShapes,
+    RemoveShape,
+    Ungroup,
+} from "$mono/shape/command/shape-manager-commands";
+import { ShapeManager } from "$mono/shape/shape-manager";
+import type { AbstractShape } from "$mono/shape/shape/abstract-shape";
+import { Group } from "$mono/shape/shape/group";
+import { MockShape } from "$mono/shape/shape/mock-shape";
+import { Rectangle } from "$mono/shape/shape/rectangle";
+import { beforeEach, describe, expect, test } from "vitest";
+
+describe('ShapeManagerTest', () => {
+    let target: ShapeManager;
+
+    beforeEach(() => {
+        target = new ShapeManager();
+    });
+
+    const addShape = (shape: AbstractShape) => {
+        target.execute(new AddShape(shape));
+    };
+
+    test('testExecute_Add', () => {
+        const shape1 = new MockShape(Rect.ZERO);
+        target.execute(new AddShape(shape1));
+        expect(target.root.itemArray).toStrictEqual([shape1]);
+
+        const group1 = Group.create();
+        target.execute(new AddShape(group1));
+        expect(target.root.itemArray).toEqual([shape1, group1]);
+
+        const shape2 = Rectangle.fromRect({ rect: Rect.ZERO, parentId: group1.id });
+        target.execute(new AddShape(shape2));
+        expect(target.root.itemArray).toEqual([shape1, group1]);
+        expect(group1.itemArray).toEqual([shape2]);
+
+        const shape3 = new MockShape(Rect.ZERO, '1000');
+        target.execute(new AddShape(shape3));
+        expect(target.root.itemArray).toEqual([shape1, group1]);
+        expect(group1.itemArray).toEqual([shape2]);
+    });
+
+    test('testExecute_Remove_singleGroupItem_removeGroup', () => {
+        const group = Group.create();
+        const shape = Rectangle.fromRect({ rect: Rect.ZERO, parentId: group.id });
+
+        addShape(group);
+        addShape(shape);
+        target.execute(new RemoveShape(shape));
+        expect(target.root.itemCount).toBe(0);
+    });
+
+    test('testExecute_Remove_removeGroupItem_ungroup', () => {
+        const group = Group.create();
+        const shape1 = Rectangle.fromRect({ rect: Rect.ZERO });
+        const shape2 = Rectangle.fromRect({ rect: Rect.ZERO, parentId: group.id });
+        const shape3 = Rectangle.fromRect({ rect: Rect.ZERO, parentId: group.id });
+
+        addShape(group);
+        addShape(shape1);
+        addShape(shape2);
+        addShape(shape3);
+
+        target.execute(new RemoveShape(shape3));
+        expect(target.root.itemArray).toEqual([shape2, shape1]);
+        expect(shape2.parentId).toBe(target.root.id);
+    });
+
+    test('testExecute_Remove_removeGroupItem_unchangeRoot', () => {
+        const group = Group.create();
+        const shape1 = Rectangle.fromRect({ rect: Rect.ZERO });
+        const shape2 = Rectangle.fromRect({ rect: Rect.ZERO, parentId: group.id });
+        const shape3 = Rectangle.fromRect({ rect: Rect.ZERO, parentId: group.id });
+        const shape4 = Rectangle.fromRect({ rect: Rect.ZERO, parentId: group.id });
+
+        addShape(group);
+        addShape(shape1);
+        addShape(shape2);
+        addShape(shape3);
+        addShape(shape4);
+
+        target.execute(new RemoveShape(shape4));
+        expect(target.root.itemArray).toEqual([group, shape1]);
+        expect(group.itemArray).toEqual([shape2, shape3]);
+    });
+
+    test('testExecute_Group_invalid', () => {
+        const group = Group.create();
+        const shape1 = Rectangle.fromRect({ rect: Rect.ZERO });
+        const shape2 = Rectangle.fromRect({ rect: Rect.ZERO, parentId: group.id });
+
+        addShape(group);
+        addShape(shape1);
+        addShape(shape2);
+
+        target.execute(new GroupShapes([shape1]));
+        expect(target.root.itemArray).toEqual([group, shape1]);
+
+        target.execute(new GroupShapes([shape1, shape2]));
+        expect(target.root.itemArray).toEqual([group, shape1]);
+        expect(group.itemArray).toEqual([shape2]);
+    });
+
+    test('testExecute_Group_valid', () => {
+        const shape0 = Rectangle.fromRect({ rect: Rect.ZERO });
+        const shape1 = Rectangle.fromRect({ rect: Rect.ZERO });
+        const shape2 = Rectangle.fromRect({ rect: Rect.ZERO });
+        const shape3 = Rectangle.fromRect({ rect: Rect.ZERO });
+
+        addShape(shape0);
+        addShape(shape1);
+        addShape(shape2);
+        addShape(shape3);
+        target.execute(new GroupShapes([shape1, shape2]));
+
+        const items = target.root.itemArray;
+
+        expect(target.root.itemCount).toBe(3);
+        expect(items[0]).toBe(shape0);
+        expect(items[2]).toBe(shape3);
+        const group = items[1] as Group;
+        expect(group.itemArray).toEqual([shape1, shape2]);
+        expect(target.getGroup(shape1.parentId)).toBe(group);
+        expect(target.getGroup(shape2.parentId)).toBe(group);
+    });
+
+    test('testExecute_Ungroup', () => {
+        const group = Group.create();
+        const shape0 = Rectangle.fromRect({ rect: Rect.ZERO });
+        const shape1 = Rectangle.fromRect({ rect: Rect.ZERO, parentId: group.id });
+        const shape2 = Rectangle.fromRect({ rect: Rect.ZERO, parentId: group.id });
+        const shape3 = Rectangle.fromRect({ rect: Rect.ZERO });
+
+        addShape(shape0);
+        addShape(group);
+        addShape(shape1);
+        addShape(shape2);
+        addShape(shape3);
+
+        target.execute(new Ungroup(group));
+
+        expect(target.root.itemArray).toStrictEqual([shape0, shape1, shape2, shape3]);
+        expect(shape1.parentId).toBe(target.root.id);
+        expect(shape2.parentId).toBe(target.root.id);
+    });
+
+    test('testExecute_ChangeOrder', () => {
+        const shape1 = new MockShape(Rect.ZERO);
+        const shape2 = new MockShape(Rect.ZERO);
+        const shape3 = new MockShape(Rect.ZERO);
+
+        addShape(shape1);
+        addShape(shape2);
+        addShape(shape3);
+
+        target.execute(new ChangeOrder(shape3, ChangeOrderType.BACK));
+        expect(target.root.itemArray).toEqual([shape1, shape2, shape3]);
+
+        target.execute(new ChangeOrder(shape1, ChangeOrderType.BACK));
+        expect(target.root.itemArray).toEqual([shape2, shape3, shape1]);
+
+        target.execute(new ChangeOrder(shape1, ChangeOrderType.FRONT));
+        expect(target.root.itemArray).toEqual([shape1, shape2, shape3]);
+
+        target.execute(new ChangeOrder(shape3, ChangeOrderType.FRONT));
+        expect(target.root.itemArray).toEqual([shape3, shape1, shape2]);
+
+        target.execute(new ChangeOrder(shape1, ChangeOrderType.FORWARD));
+        expect(target.root.itemArray).toEqual([shape1, shape3, shape2]);
+
+        target.execute(new ChangeOrder(shape3, ChangeOrderType.BACKWARD));
+        expect(target.root.itemArray).toEqual([shape1, shape2, shape3]);
+    });
+
+    test('testRecursiveVersionUpdate', () => {
+        const group0 = Group.create();
+        addShape(group0);
+        const group1 = Group.create({ parentId: group0.id });
+        addShape(group1);
+
+        const rootOldVersion = target.root.versionCode;
+        const group0OldVersion = group0.versionCode;
+        const group1OldVersion = group1.versionCode;
+
+        const group2 = Group.create({ parentId: group1.id });
+        addShape(group2);
+
+        expect(target.root.versionCode).not.toBe(rootOldVersion);
+        expect(group0.versionCode).not.toEqual(group0OldVersion);
+        expect(group1.versionCode).not.toBe(group1OldVersion);
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/shape/shape-manager.ts b/monosketch-svelte/src/lib/mono/shape/shape-manager.ts
new file mode 100644
index 000000000..dd1ad78bc
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/shape-manager.ts
@@ -0,0 +1,141 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Flow } from "$libs/flow";
+import { ShapeConnector } from "$mono/shape/connector/shape-connector";
+import type { AbstractShape } from "$mono/shape/shape/abstract-shape";
+import { Group, RootGroup } from "$mono/shape/shape/group";
+
+/**
+ * An interface which defines common APIs for a command. A command must determine direct affected
+ * parent group via `getDirectAffectedParent`. If `getDirectAffectedParent` returns null, the
+ * command won't be executed.
+ */
+export interface Command {
+    getDirectAffectedParent(shapeManager: ShapeManager): Group | null;
+
+    execute(shapeManager: ShapeManager, parent: Group): void;
+}
+
+/**
+ * An interface of a shape manager which manages shapes.
+ */
+export class ShapeManager {
+    private rootInner: Group = RootGroup(null);
+    private allShapeMap: Map<string | null, AbstractShape> = new Map([[this.rootInner.id, this.rootInner]]);
+
+    // The initial rootInner is a default root, means the app is not ready.
+    // The rootId should be undefined until `replaceRoot` is called.
+    private rootIdMutableFlow: Flow<string> = new Flow();
+    public readonly rootIdFlow: Flow<string> = this.rootIdMutableFlow.immutable();
+
+    public shapeConnectorInner: ShapeConnector = new ShapeConnector();
+
+    /**
+     * Reflect the version of the root through live data. The other components are able to observe
+     * this version to decide update internally.
+     */
+    private versionMutableFlow: Flow<number> = new Flow(this.rootInner.versionCode);
+    public readonly versionFlow: Flow<number> = this.versionMutableFlow.immutable();
+
+    constructor() {
+    }
+
+    get root(): Group {
+        return this.rootInner;
+    }
+
+    get shapeConnector(): ShapeConnector {
+        return this.shapeConnectorInner;
+    }
+
+    /**
+     * Replace [root] with [newRoot].
+     * This also wipe current stored shapes with shapes in new root.
+     */
+    replaceRoot(newRoot: Group, newConnector: ShapeConnector) {
+        const currentVersion = this.rootInner.versionCode;
+        this.rootInner = newRoot;
+        this.rootIdMutableFlow.value = newRoot.id;
+
+        this.shapeConnectorInner = newConnector;
+
+        this.allShapeMap = this.createAllShapeMap(newRoot);
+
+        this.versionMutableFlow.value =
+            // If the version of the new root is the same as the current version, we need to
+            // decrease the version to make sure the version is updated.
+            // This does not affect the version of the root, but the version of the shape manager.
+            currentVersion === newRoot.versionCode ? currentVersion - 1 : newRoot.versionCode;
+    }
+
+    private createAllShapeMap(group: Group): Map<string, AbstractShape> {
+        const map = new Map<string, AbstractShape>();
+        map.set(group.id, group);
+        this.createAllShapeMapRecursive(group, map);
+        return map;
+    }
+
+    private createAllShapeMapRecursive(group: Group, map: Map<string, AbstractShape>) {
+        for (const shape of group.items) {
+            map.set(shape.id, shape);
+            if (shape instanceof Group) {
+                this.createAllShapeMapRecursive(shape, map);
+            }
+        }
+    }
+
+    execute(command: Command) {
+        const affectedParent = command.getDirectAffectedParent(this);
+        if (!affectedParent) return;
+
+        const allAncestors = this.getAllAncestors(affectedParent);
+        const currentVersion = affectedParent.versionCode;
+
+        command.execute(this, affectedParent);
+
+        if (currentVersion === affectedParent.versionCode && this.allShapeMap.has(affectedParent.id)) {
+            return;
+        }
+        for (const parent of allAncestors) {
+            parent.update(() => true);
+        }
+        this.versionMutableFlow.value = this.rootInner.versionCode;
+    }
+
+    getGroup(shapeId: string | null): Group | null {
+        return shapeId === null ? this.rootInner : (this.allShapeMap.get(shapeId) as Group | undefined) || null;
+    }
+
+    getShape(shapeId: string): AbstractShape | undefined {
+        return this.allShapeMap.get(shapeId);
+    }
+
+    register(shape: AbstractShape) {
+        this.allShapeMap.set(shape.id, shape);
+    }
+
+    unregister(shape: AbstractShape) {
+        this.allShapeMap.delete(shape.id);
+    }
+
+    private getAllAncestors(group: Group): Group[] {
+        const result: Group[] = [];
+        let parent = this.allShapeMap.get(group.parentId) as Group | undefined;
+        while (parent) {
+            result.push(parent);
+            parent = this.allShapeMap.get(parent.parentId) as Group | undefined;
+        }
+        return result;
+    }
+
+    /**
+     * Notifies that the information of the working project having update.
+     * The update is not only the shape list, but also the other information like name, etc.
+     * This helps the subsequence actions to keep the information up-to-date.
+     */
+    notifyProjectUpdate() {
+        this.rootIdMutableFlow.value = this.rootInner.id;
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/shape/abstract-shape.ts b/monosketch-svelte/src/lib/mono/shape/shape/abstract-shape.ts
new file mode 100644
index 000000000..78d5af0c6
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/shape/abstract-shape.ts
@@ -0,0 +1,129 @@
+import type { Comparable } from "$libs/comparable";
+import type { Point } from "$libs/graphics-geo/point";
+import type { Rect } from "$libs/graphics-geo/rect";
+import type { Identifier } from "$mono/shape/collection/identifier";
+import { NoExtra } from "$mono/shape/extra/shape-extra";
+import type { ShapeExtra } from "$mono/shape/extra/shape-extra";
+import type { AbstractSerializableShape } from "$mono/shape/serialization/shapes";
+import { UUID } from "$mono/uuid";
+
+/**
+ * An [Identifier] class for shape.
+ * This is used for storing a reference to a shape without keeping the real reference to the
+ * instance of the shape.
+ */
+export class ShapeIdentifier implements Identifier {
+    constructor(public id: string) {
+    }
+}
+
+/**
+ * An abstract class which is used for defining all kinds of shape which are supported by the app.
+ * Each shape will be assigned an id which is automatically generated or manually assigned. Two
+ * shapes which have the same ID will be considered identical regardless the other attributes of
+ * each kind of shape class.
+ *
+ * Each shape's attributes might be changed and [versionCode] reflects the update. To ensure the
+ * [versionCode]'s value is accurate, all properties modifying must be wrapped inside [update].
+ */
+export abstract class AbstractShape extends ShapeIdentifier implements Comparable {
+    parentId: string | null;
+    versionCode: number;
+
+    /**
+     * Extra information which is specific to each shape.
+     */
+    protected extraInner: ShapeExtra = NoExtra;
+
+    /**
+     * @param id with null means the id will be automatically generated.
+     * @param parentId the id of the parent shape. If the shape is a top-level shape, this value is
+     * null.
+     */
+    protected constructor(id: string | null, parentId: string | null) {
+        super(id ?? UUID.generate());
+        this.parentId = parentId || null;
+        this.versionCode = AbstractShape.nextVersionCode();
+    }
+
+    /**
+     * A simple version of the shape's identifier although a shape is already a shape identifier.
+     * This is used for the case that a shape is used as a key in a map.
+     */
+    get identifier(): ShapeIdentifier {
+        return new ShapeIdentifier(this.id);
+    }
+
+    abstract toSerializableShape(isIdIncluded: boolean): AbstractSerializableShape;
+
+    abstract get bound(): Rect;
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    setBound(newBound: Rect) {
+        // Default implementation does nothing, can be overridden
+    }
+
+    /**
+     * Set extra properties for the shape. Override this method if the shape supports extra properties.
+     * @param newExtra
+     * @throws Error if the shape does not support extra properties.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    setExtra(newExtra: ShapeExtra) {
+        throw new Error(`${this.constructor.name} does not support extra`);
+    }
+
+    get extra(): ShapeExtra {
+        return this.extraInner;
+    }
+
+    /**
+     * Updates properties of the shape by [action]. The [action] returns true if the shape's
+     * properties are changed.
+     */
+    update(action: () => boolean) {
+        const isChanged = action();
+        if (isChanged) {
+            this.versionCode = AbstractShape.nextVersionCode(this.versionCode);
+        }
+    }
+
+    contains(point: Point): boolean {
+        return this.bound.contains(point);
+    }
+
+    isVertex(point: Point): boolean {
+        return this.bound.isVertex(point);
+    }
+
+    isOverlapped(rect: Rect): boolean {
+        return this.bound.isOverlapped(rect);
+    }
+
+    /**
+     * Returns true if the shape is the same type to [other] and has the same id and version code to the [other].
+     * @param other
+     */
+    equals(other: unknown): boolean {
+        if (!(other instanceof AbstractShape)) {
+            return false;
+        }
+        if (this.constructor !== other.constructor) {
+            return false;
+        }
+        return this.id === other.id && this.versionCode === other.versionCode;
+    }
+
+    /**
+     * Generates a new version code which is different from [excludedValue].
+     */
+    static nextVersionCode(excludedValue: number = 0): number {
+        let nextCode = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
+        // The probability of a new number is equal to old number is low, therefore, this loop
+        // is short.
+        while (nextCode === excludedValue) {
+            nextCode = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
+        }
+        return nextCode;
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/shape/group.test.ts b/monosketch-svelte/src/lib/mono/shape/shape/group.test.ts
new file mode 100644
index 000000000..8c960db80
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/shape/group.test.ts
@@ -0,0 +1,119 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { Rect } from '$libs/graphics-geo/rect';
+import { AddPosition, MoveActionType } from '$mono/shape/collection/quick-list';
+import { Group } from '$mono/shape/shape/group';
+import { Rectangle } from '$mono/shape/shape/rectangle';
+
+describe('Group', () => {
+    const PARENT_ID = "100";
+    let target: Group;
+
+    beforeEach(() => {
+        target = Group.create({ parentId: PARENT_ID });
+    });
+
+    it('testAdd', () => {
+        expect(target.itemCount).toBe(0);
+        const invalidShape = Rectangle.fromRect({ rect: Rect.ZERO, parentId: "10000" });
+        const validShape1 = Rectangle.fromRect({ rect: Rect.ZERO });
+        const validShape2 = Rectangle.fromRect({ rect: Rect.ZERO, parentId: target.id });
+        const validShape3 = Rectangle.fromRect({ rect: Rect.ZERO });
+
+        target.add(invalidShape);
+        expect(target.itemCount).toBe(0);
+        expect(Array.from(target.items)).toEqual([]);
+
+        target.add(validShape1);
+        expect(target.itemCount).toBe(1);
+        expect(validShape1.parentId).toBe(target.id);
+        expect(Array.from(target.items)).toEqual([validShape1]);
+
+        // Repeat adding existing object
+        target.add(validShape1);
+        expect(target.itemCount).toBe(1);
+        expect(validShape1.parentId).toBe(target.id);
+        expect(Array.from(target.items)).toEqual([validShape1]);
+
+        target.add(validShape2, AddPosition.First);
+        expect(target.itemCount).toBe(2);
+        expect(validShape2.parentId).toBe(target.id);
+        expect(Array.from(target.items)).toEqual([validShape2, validShape1]);
+
+        target.add(validShape3, AddPosition.After(validShape2));
+        expect(target.itemCount).toBe(3);
+        expect(validShape3.parentId).toBe(target.id);
+        expect(Array.from(target.items)).toEqual([validShape2, validShape3, validShape1]);
+    });
+
+    it('testRemove', () => {
+        const shape1 = Rectangle.fromRect({ rect: Rect.ZERO });
+        const shape2 = Rectangle.fromRect({ rect: Rect.ZERO });
+
+        target.add(shape1);
+        target.add(shape2);
+
+        target.remove(shape1);
+        expect(target.itemCount).toBe(1);
+        expect(Array.from(target.items)).toEqual([shape2]);
+
+        target.remove(shape2);
+        expect(target.itemCount).toBe(0);
+        expect(Array.from(target.items)).toEqual([]);
+    });
+
+    it('testMove_up', () => {
+        const shape1 = Rectangle.fromRect({ rect: Rect.ZERO });
+        const shape2 = Rectangle.fromRect({ rect: Rect.ZERO });
+        const shape3 = Rectangle.fromRect({ rect: Rect.ZERO });
+
+        target.add(shape1);
+        target.add(shape2);
+        target.add(shape3);
+
+        target.changeOrder(shape1, MoveActionType.UP);
+        expect(Array.from(target.items)).toEqual([shape2, shape1, shape3]);
+    });
+
+    it('testMove_down', () => {
+        const shape1 = Rectangle.fromRect({ rect: Rect.ZERO });
+        const shape2 = Rectangle.fromRect({ rect: Rect.ZERO });
+        const shape3 = Rectangle.fromRect({ rect: Rect.ZERO });
+
+        target.add(shape1);
+        target.add(shape2);
+        target.add(shape3);
+
+        target.changeOrder(shape3, MoveActionType.DOWN);
+        expect(Array.from(target.items)).toEqual([shape1, shape3, shape2]);
+    });
+
+    it('testMove_top', () => {
+        const shape1 = Rectangle.fromRect({ rect: Rect.ZERO });
+        const shape2 = Rectangle.fromRect({ rect: Rect.ZERO });
+        const shape3 = Rectangle.fromRect({ rect: Rect.ZERO });
+
+        target.add(shape1);
+        target.add(shape2);
+        target.add(shape3);
+
+        target.changeOrder(shape1, MoveActionType.TOP);
+        expect(Array.from(target.items)).toEqual([shape2, shape3, shape1]);
+    });
+
+    it('testMove_bottom', () => {
+        const shape1 = Rectangle.fromRect({ rect: Rect.ZERO });
+        const shape2 = Rectangle.fromRect({ rect: Rect.ZERO });
+        const shape3 = Rectangle.fromRect({ rect: Rect.ZERO });
+
+        target.add(shape1);
+        target.add(shape2);
+        target.add(shape3);
+
+        target.changeOrder(shape3, MoveActionType.BOTTOM);
+        expect(Array.from(target.items)).toEqual([shape3, shape1, shape2]);
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/shape/shape/group.ts b/monosketch-svelte/src/lib/mono/shape/shape/group.ts
new file mode 100644
index 000000000..1cce39668
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/shape/group.ts
@@ -0,0 +1,151 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import type { Comparable } from "$libs/comparable";
+import { Rect } from "$libs/graphics-geo/rect";
+import { AddPosition, MoveActionType, QuickList } from "$mono/shape/collection/quick-list";
+import {
+    AbstractSerializableShape,
+    SerializableGroup,
+    SerializableLine,
+    SerializableRectangle,
+    SerializableText,
+} from "$mono/shape/serialization/shapes";
+import { AbstractShape } from "$mono/shape/shape/abstract-shape";
+import { Line } from "$mono/shape/shape/line";
+import { Rectangle } from "$mono/shape/shape/rectangle";
+import { Text } from "$mono/shape/shape/text";
+
+/**
+ * A special shape which manages a collection of shapes.
+ */
+export class Group extends AbstractShape implements Comparable {
+    private quickList: QuickList<AbstractShape> = new QuickList();
+    items: Iterable<AbstractShape> = this.quickList;
+
+    /**
+     * Returns an array of items in this group.
+     * This creates a new array every time it is called.
+     */
+    get itemArray(): AbstractShape[] {
+        return Array.from(this.items);
+    }
+
+    get itemCount(): number {
+        return this.quickList.size;
+    }
+
+    private constructor(id: string | null = null, parentId: string | null = null) {
+        super(id, parentId);
+    }
+
+    static create({ id = null, parentId = null }: { id?: string | null, parentId?: string | null } = {}): Group {
+        return new Group(id, parentId);
+    }
+
+    get bound(): Rect {
+        if (this.quickList.isEmpty()) {
+            return Rect.ZERO;
+        }
+        let left = Infinity;
+        let right = -Infinity;
+        let top = Infinity;
+        let bottom = -Infinity;
+        for (const item of this.quickList) {
+            left = Math.min(left, item.bound.left);
+            right = Math.max(right, item.bound.right);
+            top = Math.min(top, item.bound.top);
+            bottom = Math.max(bottom, item.bound.bottom);
+        }
+        return Rect.byLTRB(left, top, right, bottom);
+    }
+
+    static fromSerializable(serializableGroup: SerializableGroup, parentId: string | null = null): Group {
+        const group = new Group(serializableGroup.actualId, parentId);
+        for (const serializableShape of serializableGroup.shapes) {
+            group.addInternal(Group.toShape(group.id, serializableShape));
+        }
+        group.versionCode = serializableGroup.versionCode;
+        return group;
+    }
+
+    toSerializableShape(isIdIncluded: boolean): SerializableGroup {
+        return SerializableGroup.create({
+            id: this.id,
+            isIdTemporary: !isIdIncluded,
+            versionCode: this.versionCode,
+            shapes: this.mapItems(item => item.toSerializableShape(isIdIncluded)),
+        });
+    }
+
+    add(shape: AbstractShape, position: AddPosition = AddPosition.Last): void {
+        this.update(() => this.addInternal(shape, position));
+    }
+
+    private addInternal(shape: AbstractShape, position: AddPosition = AddPosition.Last): boolean {
+        if (shape.parentId !== null && shape.parentId !== this.id) {
+            return false;
+        }
+        shape.parentId = this.id;
+        this.quickList.add(shape, position);
+        return true;
+    }
+
+    remove(shape: AbstractShape): void {
+        this.update(() => this.quickList.remove(shape) !== null);
+    }
+
+    changeOrder(shape: AbstractShape, moveActionType: MoveActionType): void {
+        this.update(() => this.quickList.move(shape, moveActionType));
+    }
+
+    toString(): string {
+        return `Group(${this.id})`;
+    }
+
+    static toShape(parentId: string, serializableShape: AbstractSerializableShape): AbstractShape {
+        switch (serializableShape.constructor) {
+            case SerializableRectangle:
+                return Rectangle.fromSerializable(serializableShape as SerializableRectangle, parentId);
+            case SerializableText:
+                return Text.fromSerializable(serializableShape as SerializableText, parentId);
+            case SerializableLine:
+                return Line.fromSerializable(serializableShape as SerializableLine, parentId);
+            case SerializableGroup:
+                return Group.fromSerializable(serializableShape as SerializableGroup, parentId);
+            default:
+                throw new Error("Unknown shape type");
+        }
+    }
+
+    private mapItems<T>(callback: (item: AbstractShape) => T): T[] {
+        return Array.from(this.items).map(callback);
+    }
+
+    equals(other: unknown): boolean {
+        if (this === other) {
+            return true;
+        }
+        if (!(other instanceof Group)) {
+            return false;
+        }
+        return this.id === other.id && this.versionCode === other.versionCode && this.parentId === other.parentId;
+    }
+}
+
+/**
+ * A special [Group] for the root group of the file.
+ * This group contains some extra information for storing and restoring from file.
+ */
+export function RootGroup(id: string | null): Group;
+export function RootGroup(serializableGroup: SerializableGroup): Group;
+
+export function RootGroup(idOrSerializableGroup: string | null | SerializableGroup = null): Group {
+    if (idOrSerializableGroup instanceof SerializableGroup) {
+        return Group.fromSerializable(idOrSerializableGroup);
+    } else {
+        return Group.create({ id: idOrSerializableGroup, parentId: null });
+    }
+}
+
diff --git a/monosketch-svelte/src/lib/mono/shape/shape/line.test.ts b/monosketch-svelte/src/lib/mono/shape/shape/line.test.ts
new file mode 100644
index 000000000..730ca5469
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/shape/line.test.ts
@@ -0,0 +1,122 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import type { SerializableLine } from "$mono/shape/serialization/shapes";
+import { describe, it, expect } from 'vitest';
+import { DirectedPoint, Direction, Point } from '$libs/graphics-geo/point';
+import { Line } from '$mono/shape/shape/line';
+import { LineAnchor, LineHelper } from '$mono/shape/shape/linehelper';
+
+describe('Line', () => {
+    const PARENT_ID = "1";
+
+    it('testSerialization_init', () => {
+        const startPoint = DirectedPoint.of(Direction.VERTICAL, 1, 2);
+        const endPoint = DirectedPoint.of(Direction.HORIZONTAL, 3, 4);
+        const line = Line.fromPoints({ startPoint: startPoint, endPoint: endPoint, parentId: PARENT_ID });
+
+        const serializableLine = line.toSerializableShape(true) as SerializableLine;
+        expect(serializableLine.startPoint).toEqual(startPoint);
+        expect(serializableLine.endPoint).toEqual(endPoint);
+        expect(LineHelper.reduce(serializableLine.jointPoints)).toEqual(line.reducedJoinPoints);
+        expect(serializableLine.extra).toEqual(line.extra.toSerializableExtra());
+        expect(serializableLine.wasMovingEdge).toBe(false);
+    });
+
+    it('testSerialization_moveAnchorPoints', () => {
+        const startPoint = DirectedPoint.of(Direction.VERTICAL, 1, 2);
+        const endPoint = DirectedPoint.of(Direction.HORIZONTAL, 3, 4);
+        const line = Line.fromPoints({ startPoint: startPoint, endPoint: endPoint, parentId: PARENT_ID });
+
+        const newStartPoint = DirectedPoint.of(Direction.HORIZONTAL, 4, 5);
+        const newEndPoint = DirectedPoint.of(Direction.VERTICAL, 7, 8);
+        line.moveAnchorPoint(
+            { anchor: LineAnchor.START, point: newStartPoint },
+            true,
+            false,
+        );
+        line.moveAnchorPoint(
+            { anchor: LineAnchor.END, point: newEndPoint },
+            true,
+            false,
+        );
+
+        const serializableLine = line.toSerializableShape(true) as SerializableLine;
+        expect(serializableLine.startPoint).toEqual(newStartPoint);
+        expect(serializableLine.endPoint).toEqual(newEndPoint);
+        expect(LineHelper.reduce(serializableLine.jointPoints)).toEqual(line.reducedJoinPoints);
+        expect(serializableLine.extra).toEqual(line.extra.toSerializableExtra());
+        expect(serializableLine.wasMovingEdge).toBe(false);
+    });
+
+    it('testSerialization_moveEdge', () => {
+        const startPoint = DirectedPoint.of(Direction.VERTICAL, 1, 2);
+        const endPoint = DirectedPoint.of(Direction.HORIZONTAL, 3, 4);
+        const line = Line.fromPoints({ startPoint: startPoint, endPoint: endPoint, parentId: PARENT_ID });
+        line.moveEdge(line.edges[0].id, new Point(10, 10), true);
+
+        const serializableLine = line.toSerializableShape(true) as SerializableLine;
+        expect(serializableLine.startPoint).toEqual(startPoint);
+        expect(serializableLine.endPoint).toEqual(endPoint);
+        expect(LineHelper.reduce(serializableLine.jointPoints)).toEqual(line.reducedJoinPoints);
+        expect(serializableLine.extra).toEqual(line.extra.toSerializableExtra());
+        expect(serializableLine.wasMovingEdge).toBe(true);
+    });
+
+    it('testSerialization_restoreInit', () => {
+        const startPoint = DirectedPoint.of(Direction.VERTICAL, 1, 2);
+        const endPoint = DirectedPoint.of(Direction.HORIZONTAL, 3, 4);
+        const line = Line.fromPoints({ startPoint: startPoint, endPoint: endPoint, parentId: PARENT_ID });
+
+        const serializableLine = line.toSerializableShape(true) as SerializableLine;
+        const line2 = Line.fromSerializable(serializableLine, PARENT_ID);
+        expect(line2.getDirection(LineAnchor.START)).toEqual(line.getDirection(LineAnchor.START));
+        expect(line2.getDirection(LineAnchor.END)).toEqual(line.getDirection(LineAnchor.END));
+        expect(line2.reducedJoinPoints).toEqual(line.reducedJoinPoints);
+        expect(line2.extra).toEqual(line.extra);
+        expect(line2.wasMovingEdge()).toEqual(line.wasMovingEdge());
+    });
+
+    it('testSerialization_restoreAfterMovingAnchorPoints', () => {
+        const startPoint = DirectedPoint.of(Direction.VERTICAL, 1, 2);
+        const endPoint = DirectedPoint.of(Direction.HORIZONTAL, 3, 4);
+        const line = Line.fromPoints({ startPoint: startPoint, endPoint: endPoint, parentId: PARENT_ID });
+
+        const newStartPoint = DirectedPoint.of(Direction.HORIZONTAL, 4, 5);
+        const newEndPoint = DirectedPoint.of(Direction.VERTICAL, 7, 8);
+        line.moveAnchorPoint(
+            { anchor: LineAnchor.START, point: newStartPoint },
+            true,
+            false,
+        );
+        line.moveAnchorPoint(
+            { anchor: LineAnchor.END, point: newEndPoint },
+            true,
+            false,
+        );
+
+        const serializableLine = line.toSerializableShape(true) as SerializableLine;
+        const line2 = Line.fromSerializable(serializableLine, PARENT_ID);
+        expect(line2.getDirection(LineAnchor.START)).toEqual(line.getDirection(LineAnchor.START));
+        expect(line2.getDirection(LineAnchor.END)).toEqual(line.getDirection(LineAnchor.END));
+        expect(line2.reducedJoinPoints).toEqual(line.reducedJoinPoints);
+        expect(line2.extra).toEqual(line.extra);
+        expect(line2.wasMovingEdge()).toEqual(line.wasMovingEdge());
+    });
+
+    it('testSerialization_restoreAfterMovingEdge', () => {
+        const startPoint = DirectedPoint.of(Direction.VERTICAL, 1, 2);
+        const endPoint = DirectedPoint.of(Direction.HORIZONTAL, 3, 4);
+        const line = Line.fromPoints({ startPoint: startPoint, endPoint: endPoint, parentId: PARENT_ID });
+        line.moveEdge(line.edges[0].id, new Point(10, 10), true);
+
+        const serializableLine = line.toSerializableShape(true) as SerializableLine;
+        const line2 = Line.fromSerializable(serializableLine, PARENT_ID);
+        expect(line2.getDirection(LineAnchor.START)).toEqual(line.getDirection(LineAnchor.START));
+        expect(line2.getDirection(LineAnchor.END)).toEqual(line.getDirection(LineAnchor.END));
+        expect(line2.reducedJoinPoints).toEqual(line.reducedJoinPoints);
+        expect(line2.extra).toEqual(line.extra);
+        expect(line2.wasMovingEdge()).toEqual(line.wasMovingEdge());
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/shape/shape/line.ts b/monosketch-svelte/src/lib/mono/shape/shape/line.ts
new file mode 100644
index 000000000..5b9bc9525
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/shape/line.ts
@@ -0,0 +1,417 @@
+import { DirectedPoint, Direction, Point } from "$libs/graphics-geo/point";
+import { Rect } from "$libs/graphics-geo/rect";
+import { ShapeExtraManager } from "$mono/shape/extra/extra-manager";
+import { LineExtra, type ShapeExtra } from "$mono/shape/extra/shape-extra";
+import { AbstractSerializableShape, SerializableLine } from "$mono/shape/serialization/shapes";
+import { AbstractShape } from "$mono/shape/shape/abstract-shape";
+import { LineHelper, LineEdge, LineAnchor, type LineAnchorPointUpdate } from "$mono/shape/shape/linehelper";
+
+/**
+ * A line shape which connects two end-dots with a collection of straight lines.
+ *
+ * A Line shape is defined by two end points which have direction. The inner algorithm will use the
+ * defined direction to generate straight lines by creating joint points.
+ * Line shapes are able to be modified by moving end points or moving connecting edges. Once the
+ * edge is modified, the line won't depend on seeding direction.
+ *
+ * First initial line's edges will be decided by the direction inside the two end points
+ * Examples
+ *
+ * 1. Same line
+ * Start: (0, 0, Horizontal)
+ * End  : (5, 0, Vertical)
+ * Result:
+ * ```
+ * x----x
+ * ```
+ *
+ * 2. Different line
+ * 2.1.
+ * Start: (0, 0, Horizontal)
+ * End  : (5, 3, Vertical)
+ * Result:
+ * ```
+ * x----+
+ *      |
+ *      |
+ *      x
+ * ```
+ * 2.2.
+ * Start: (0, 0, Horizontal)
+ * End  : (5, 3, Horizontal)
+ * Result:
+ * ```
+ * x-+
+ *   |
+ *   |
+ *   +--x
+ * ```
+ * 2.3.
+ * Start: (0, 0, Vertical)
+ * End  : (5, 3, Horizontal)
+ * Result:
+ * ```
+ * x
+ * |
+ * |
+ * +----x
+ * ```
+ * 2.4.
+ * Start: (0, 0, Vertical)
+ * End  : (5, 4, Vertical)
+ * Result:
+ * ```
+ * x
+ * |
+ * +----+
+ *      |
+ *      x
+ * ```
+ *
+ * TODO: Extract move anchor point and move edge code to use case class
+ */
+export class Line extends AbstractShape {
+    startPoint: DirectedPoint;
+    endPoint: DirectedPoint;
+    private jointPoints: Point[];
+
+    edges: LineEdge[];
+    extraInner: LineExtra = LineExtra.create(ShapeExtraManager.defaultLineExtra);
+
+    /**
+     * A list of joint points which is determined once an edge is updated.
+     */
+    private confirmedJointPoints: Point[] = [];
+
+    private constructor(
+        startPoint: DirectedPoint,
+        endPoint: DirectedPoint,
+        id: string | null = null,
+        parentId: string | null = null,
+    ) {
+        super(id, parentId);
+        this.startPoint = startPoint;
+        this.endPoint = endPoint;
+        this.jointPoints = LineHelper.createJointPoints([startPoint, endPoint]);
+        this.edges = LineHelper.createEdges(this.jointPoints);
+    }
+
+    static fromPoints({ startPoint, endPoint, id = null, parentId = null }: {
+        startPoint: DirectedPoint,
+        endPoint: DirectedPoint,
+        id?: string | null,
+        parentId?: string | null
+    }): Line {
+        return new Line(startPoint, endPoint, id, parentId);
+    }
+
+    get reducedJoinPoints(): Point[] {
+        return LineHelper.reduce(this.jointPoints);
+    }
+
+    get bound(): Rect {
+        const points = this.reducedJoinPoints;
+        const left = Math.min(...points.map(p => p.left));
+        const right = Math.max(...points.map(p => p.left));
+        const top = Math.min(...points.map(p => p.top));
+        const bottom = Math.max(...points.map(p => p.top));
+        return Rect.byLTRB(left, top, right, bottom);
+    }
+
+    static fromSerializable(serializableLine: SerializableLine, parentId: string): Line {
+        const line = new Line(serializableLine.startPoint, serializableLine.endPoint, serializableLine.actualId, parentId);
+        line.jointPoints = serializableLine.jointPoints;
+        if (serializableLine.wasMovingEdge) {
+            line.confirmedJointPoints = line.jointPoints;
+        }
+        line.edges = LineHelper.createEdges(line.jointPoints);
+        line.extraInner = LineExtra.fromSerializable(serializableLine.extra);
+        line.versionCode = serializableLine.versionCode;
+        return line;
+    }
+
+    toSerializableShape(isIdIncluded: boolean): AbstractSerializableShape {
+        return SerializableLine.create({
+            id: this.id,
+            isIdTemporary: !isIdIncluded,
+            versionCode: this.versionCode,
+            startPoint: this.startPoint,
+            endPoint: this.endPoint,
+            jointPoints: this.jointPoints,
+            extra: this.extraInner.toSerializableExtra(),
+            wasMovingEdge: this.wasMovingEdge(),
+        });
+    }
+
+    setBound(newBound: Rect): void {
+        const left = Math.min(...this.jointPoints.map(p => p.left));
+        const top = Math.min(...this.jointPoints.map(p => p.top));
+        const offsetPoint = new Point(newBound.left - left, newBound.top - top);
+        if (offsetPoint.left === 0 && offsetPoint.top === 0) {
+            return;
+        }
+        this.update(() => {
+            this.startPoint = this.startPoint.plus(offsetPoint);
+            this.endPoint = this.endPoint.plus(offsetPoint);
+            this.jointPoints = this.jointPoints.map(p => p.plus(offsetPoint));
+            this.confirmedJointPoints = this.confirmedJointPoints.map(p => p.plus(offsetPoint));
+            this.edges = LineHelper.createEdges(this.jointPoints);
+            return true;
+        });
+    }
+
+    get extra(): LineExtra {
+        return this.extraInner;
+    }
+
+    setExtra(newExtra: ShapeExtra): void {
+        if (!(newExtra instanceof LineExtra)) {
+            throw new Error(`New extra is not a LineExtra (${newExtra.constructor.name})`);
+        }
+        if (newExtra === this.extra) {
+            return;
+        }
+        this.update(() => {
+            this.extraInner = newExtra;
+            return true;
+        });
+    }
+
+    /**
+     * Move start point or end point to new location decided by [AnchorPointUpdate.anchor] of
+     * [anchorPointUpdate].
+     * If the line's edges have never been moved, new edges will be decided by new anchor point and
+     * unaffected point with their direction like at the initial step.
+     * Otherwise, the anchor point is just moved to new point.
+     * New point in the middle will be introduced if the new position is not on the same line with
+     * the previous containing edge.
+     *
+     * Examples for moved:
+     * Case 1. Line's edges are never moved or the number of joint points is 2:
+     * See examples in the class doc
+     *
+     * Case 2. Line's edges have been moved and [justMoveAnchor] is true and number of joint points
+     * is larger than 2: update the position of the anchor and the adjacent point:
+     * Input
+     * ```
+     * +-----+
+     *       |
+     *       o
+     * ```
+     * Output
+     * ```
+     * +------------+
+     *              |
+     *              |
+     *              o
+     * ```
+     *
+     * Case 3. Line's edges have been moved and [justMoveAnchor] is false:
+     * Input
+     * ```
+     * +-------o
+     * ```
+     * Result:
+     * 3.1. Same line: only update the anchor's position
+     * ```
+     * +---------------x
+     * ```
+     *
+     * 3.2. Different lines: create new joint point
+     * ```
+     * +----------+
+     *            |
+     *            x
+     * ```
+     */
+    moveAnchorPoint(
+        anchorPointUpdate: LineAnchorPointUpdate,
+        isReduceRequired: boolean,
+        justMoveAnchor: boolean,
+    ): void {
+        this.update(() => {
+            switch (anchorPointUpdate.anchor) {
+                case LineAnchor.START:
+                    this.startPoint = anchorPointUpdate.point;
+                    break;
+                case LineAnchor.END:
+                    this.endPoint = anchorPointUpdate.point;
+                    break;
+            }
+
+            const isEdgeUpdated = this.confirmedJointPoints.length > 0;
+            let newJointPoints: Point[];
+            if (!isEdgeUpdated || this.confirmedJointPoints.length === 2) {
+                newJointPoints = LineHelper.createJointPoints([this.startPoint, this.endPoint]);
+            } else if (justMoveAnchor && this.confirmedJointPoints.length > 2) {
+                newJointPoints = [...this.confirmedJointPoints];
+                const [anchorIndex, affectedIndex] = anchorPointUpdate.anchor === LineAnchor.START ? [0, 1] : [newJointPoints.length - 1, newJointPoints.length - 2];
+                const newPoint = anchorPointUpdate.point.point;
+                newJointPoints[affectedIndex] = newJointPoints[anchorIndex].left === newJointPoints[affectedIndex].left
+                    ? newJointPoints[affectedIndex].copy({ left: newPoint.left })
+                    : newJointPoints[affectedIndex].copy({ top: newPoint.top });
+                newJointPoints[anchorIndex] = newPoint;
+            } else {
+                const newJointPoint = this.createNewJointPoint(anchorPointUpdate);
+                newJointPoints = [...this.confirmedJointPoints];
+                const [anchorIndex, newJointPointIndex] = anchorPointUpdate.anchor === LineAnchor.START ? [0, 1] : [newJointPoints.length - 1, newJointPoints.length];
+                newJointPoints[anchorIndex] = anchorPointUpdate.point.point;
+                if (newJointPoint) {
+                    newJointPoints.splice(newJointPointIndex, 0, newJointPoint);
+                }
+            }
+            const isUpdated = this.jointPoints !== newJointPoints;
+            this.jointPoints = isReduceRequired ? LineHelper.reduce(newJointPoints) : newJointPoints;
+            if (isReduceRequired && isEdgeUpdated) {
+                this.confirmedJointPoints = this.jointPoints;
+            }
+            this.edges = LineHelper.createEdges(this.jointPoints);
+            return isUpdated;
+        });
+    }
+
+    private createNewJointPoint(anchorPointUpdate: LineAnchorPointUpdate): Point | null {
+        const [anchorPointIndex, previousPointIndex] = anchorPointUpdate.anchor === LineAnchor.START ? [0, 1] : [this.jointPoints.length - 1, this.jointPoints.length - 2];
+        const anchorEndPoint = this.jointPoints[anchorPointIndex];
+        const previousJointPoint = this.jointPoints[previousPointIndex];
+        const updatePoint = anchorPointUpdate.point.point;
+
+        const isOnSameLine = LineHelper.isOnStraightLine(anchorEndPoint, previousJointPoint, updatePoint, false);
+        if (isOnSameLine) {
+            return null;
+        }
+
+        return LineHelper.isHorizontal(anchorEndPoint, previousJointPoint)
+            ? new Point(updatePoint.left, anchorEndPoint.top)
+            : new Point(anchorEndPoint.left, updatePoint.top);
+    }
+
+    /**
+     * Move the targeted edge by [edgeId] to make its line contains [point].
+     * During moving edge, two anchor points won't be moved.
+     * If [edgeId] is the first or last edge, new edge will be introduced.
+     *
+     * Examples:
+     * 1. Move single edge
+     * ```
+     * x---o---x
+     * ```
+     * Result:
+     * ```
+     * x       x
+     * |       |
+     * +---o---+
+     * ```
+     *
+     * 2. Move 1st/last edge
+     * ```
+     * x----o----+       x---------+
+     *           |                 |
+     *           |                 o
+     *           |                 |
+     *           x                 x
+     * ```
+     * Result:
+     * ```
+     * x                x-----+
+     * |                      |
+     * +---o---+              o
+     *         |              |
+     *         x              +----x
+     * ```
+     * 3. Move edge in the middle
+     * ```
+     * x-------+
+     *         |
+     *         o
+     *         |
+     * x-------+
+     * ```
+     * Result
+     * ```
+     * x--------------+
+     *                |
+     *                o
+     *                |
+     * x--------------+
+     * ```
+     * Once the edge is moved successfully, the line becomes independent of direction in the
+     * stored in two anchor points.
+     *
+     * When reduce move is on ([isReduceRequired]), all adjacent edges which are on the same line
+     * by the same direction will be merged.
+     * For example
+     * ```
+     * 1-----2-----3   ->   1-----------3
+     *
+     * 1-----3-----2   ->   1-----3-----2
+     * ```
+     */
+    moveEdge(edgeId: number, point: Point, isReduceRequired: boolean): void {
+        this.update(() => {
+            const edgeIndex = this.edges.findIndex(edge => edge.id === edgeId);
+            if (edgeIndex < 0) {
+                return false;
+            }
+
+            const edge = this.edges[edgeIndex];
+            const newEdge = edge.translate(point);
+            if (!isReduceRequired && edge.equals(newEdge)) {
+                return false;
+            }
+
+            const newJointPoints = [...this.jointPoints];
+            if (edgeIndex === 0 && edgeIndex === this.edges.length - 1) {
+                newJointPoints.splice(1, 0, newEdge.startPoint);
+                newJointPoints.splice(2, 0, newEdge.endPoint);
+            } else if (edgeIndex === 0) {
+                newJointPoints.splice(1, 0, newEdge.startPoint);
+                newJointPoints[2] = newEdge.endPoint;
+            } else if (edgeIndex === this.edges.length - 1) {
+                const startPointIndex = newJointPoints.length - 2;
+                newJointPoints[startPointIndex] = newEdge.startPoint;
+                newJointPoints.splice(startPointIndex + 1, 0, newEdge.endPoint);
+            } else {
+                const startPointIndex = newJointPoints.findIndex(p => p.equals(edge.startPoint));
+                newJointPoints[startPointIndex] = newEdge.startPoint;
+                newJointPoints[startPointIndex + 1] = newEdge.endPoint;
+            }
+
+            const isUpdated = this.jointPoints !== newJointPoints;
+            this.jointPoints = isReduceRequired ? LineHelper.reduce(newJointPoints) : newJointPoints;
+            this.confirmedJointPoints = this.jointPoints;
+
+            const newEdges = LineHelper.createEdges(this.jointPoints);
+            if (!isReduceRequired) {
+                const newEdgeIndex = edgeIndex === 0 ? 1 : edgeIndex;
+                newEdges[newEdgeIndex] = newEdges[newEdgeIndex].copy({ id: edge.id });
+            }
+            this.edges = newEdges;
+
+            return isUpdated;
+        });
+    }
+
+    getDirection(anchor: LineAnchor): Direction {
+        return anchor === LineAnchor.START ? this.startPoint.direction : this.endPoint.direction;
+    }
+
+    wasMovingEdge(): boolean {
+        return this.confirmedJointPoints.length > 0;
+    }
+
+    contains(point: Point): boolean {
+        return this.edges.some(edge => edge.contains(point));
+    }
+
+    isVertex(_point: Point): boolean {
+        return false; // TODO: Correct this to any of its joint points
+    }
+
+    isOverlapped(rect: Rect): boolean {
+        return this.edges.some(edge => {
+            const edgeBound = Rect.byLTRB(edge.startPoint.left, edge.startPoint.top, edge.endPoint.left, edge.endPoint.top);
+            return edgeBound.isOverlapped(rect);
+        });
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/shape/linehelper.test.ts b/monosketch-svelte/src/lib/mono/shape/shape/linehelper.test.ts
new file mode 100644
index 000000000..00f8f83ec
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/shape/linehelper.test.ts
@@ -0,0 +1,259 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { describe, it, expect } from 'vitest';
+import { DirectedPoint, Direction, Point } from '$libs/graphics-geo/point';
+import { LineEdge, LineHelper } from '$mono/shape/shape/linehelper';
+
+describe('LineHelper', () => {
+    it('testCreateJointPoints_sameHorizontalLine_HH', () => {
+        const p1 = DirectedPoint.of(Direction.HORIZONTAL, 0, 0);
+        const p2 = DirectedPoint.of(Direction.HORIZONTAL, 10, 0);
+
+        expect(LineHelper.createJointPoints([p1, p2])).toEqual([
+            new Point(0, 0),
+            new Point(10, 0),
+        ]);
+    });
+
+    it('testCreateJointPoints_sameHorizontalLine_HV', () => {
+        const p1 = DirectedPoint.of(Direction.HORIZONTAL, 0, 0);
+        const p2 = DirectedPoint.of(Direction.VERTICAL, 10, 0);
+
+        expect(LineHelper.createJointPoints([p1, p2])).toEqual([
+            new Point(0, 0),
+            new Point(10, 0),
+        ]);
+    });
+
+    it('testCreateJointPoints_sameHorizontalLine_VV', () => {
+        const p1 = DirectedPoint.of(Direction.VERTICAL, 0, 0);
+        const p2 = DirectedPoint.of(Direction.VERTICAL, 10, 0);
+
+        expect(LineHelper.createJointPoints([p1, p2])).toEqual([
+            new Point(0, 0),
+            new Point(10, 0),
+        ]);
+    });
+
+    it('testCreateJointPoints_sameHorizontalLine_VH', () => {
+        const p1 = DirectedPoint.of(Direction.VERTICAL, 0, 0);
+        const p2 = DirectedPoint.of(Direction.HORIZONTAL, 10, 0);
+
+        expect(LineHelper.createJointPoints([p1, p2])).toEqual([
+            new Point(0, 0),
+            new Point(10, 0),
+        ]);
+    });
+
+    it('testCreateJointPoints_sameVerticalLine_HH', () => {
+        const p1 = DirectedPoint.of(Direction.HORIZONTAL, 0, 0);
+        const p2 = DirectedPoint.of(Direction.HORIZONTAL, 0, 10);
+
+        expect(LineHelper.createJointPoints([p1, p2])).toEqual([
+            new Point(0, 0),
+            new Point(0, 10),
+        ]);
+    });
+
+    it('testCreateJointPoints_sameVerticalLine_HV', () => {
+        const p1 = DirectedPoint.of(Direction.HORIZONTAL, 0, 0);
+        const p2 = DirectedPoint.of(Direction.VERTICAL, 0, 10);
+
+        expect(LineHelper.createJointPoints([p1, p2])).toEqual([
+            new Point(0, 0),
+            new Point(0, 10),
+        ]);
+    });
+
+    it('testCreateJointPoints_sameVerticalLine_VV', () => {
+        const p1 = DirectedPoint.of(Direction.VERTICAL, 0, 0);
+        const p2 = DirectedPoint.of(Direction.VERTICAL, 0, 10);
+
+        expect(LineHelper.createJointPoints([p1, p2])).toEqual([
+            new Point(0, 0),
+            new Point(0, 10),
+        ]);
+    });
+
+    it('testCreateJointPoints_sameVerticalLine_VH', () => {
+        const p1 = DirectedPoint.of(Direction.VERTICAL, 0, 0);
+        const p2 = DirectedPoint.of(Direction.HORIZONTAL, 0, 10);
+
+        expect(LineHelper.createJointPoints([p1, p2])).toEqual([
+            new Point(0, 0),
+            new Point(0, 10),
+        ]);
+    });
+
+    it('testCreateJointPoints_differentLines_HH', () => {
+        const p1 = DirectedPoint.of(Direction.HORIZONTAL, 0, 0);
+        const p2 = DirectedPoint.of(Direction.HORIZONTAL, 10, 10);
+
+        expect(LineHelper.createJointPoints([p1, p2])).toEqual([
+            new Point(0, 0),
+            new Point(5, 0),
+            new Point(5, 10),
+            new Point(10, 10),
+        ]);
+    });
+
+    it('testCreateJointPoints_differentLines_HV', () => {
+        const p1 = DirectedPoint.of(Direction.HORIZONTAL, 0, 0);
+        const p2 = DirectedPoint.of(Direction.VERTICAL, 10, 10);
+
+        expect(LineHelper.createJointPoints([p1, p2])).toEqual([
+            new Point(0, 0),
+            new Point(10, 0),
+            new Point(10, 10),
+        ]);
+    });
+
+    it('testCreateJointPoints_differentLines_VV', () => {
+        const p1 = DirectedPoint.of(Direction.VERTICAL, 0, 0);
+        const p2 = DirectedPoint.of(Direction.VERTICAL, 10, 10);
+
+        expect(LineHelper.createJointPoints([p1, p2])).toEqual([
+            new Point(0, 0),
+            new Point(0, 5),
+            new Point(10, 5),
+            new Point(10, 10),
+        ]);
+    });
+
+    it('testCreateJointPoints_differentLines_VH', () => {
+        const p1 = DirectedPoint.of(Direction.VERTICAL, 0, 0);
+        const p2 = DirectedPoint.of(Direction.HORIZONTAL, 10, 10);
+
+        expect(LineHelper.createJointPoints([p1, p2])).toEqual([
+            new Point(0, 0),
+            new Point(0, 10),
+            new Point(10, 10),
+        ]);
+    });
+
+    it('testReduce_noReduced', () => {
+        // Empty
+        expect(LineHelper.reduce([])).toEqual([]);
+
+        // 1 point
+        expect(LineHelper.reduce([new Point(0, 0)])).toEqual([new Point(0, 0)]);
+
+        // 2 points
+        expect(LineHelper.reduce([new Point(0, 0), new Point(0, 0)])).toEqual([new Point(0, 0), new Point(0, 0)]);
+
+        // Different lines
+        expect(LineHelper.reduce([new Point(0, 0), new Point(10, 0), new Point(10, 10)])).toEqual([new Point(0, 0), new Point(10, 0), new Point(10, 10)]);
+    });
+
+    it('testReduce_reduced', () => {
+        // Same points: Identical
+        expect(LineHelper.reduce([new Point(0, 0), new Point(0, 0), new Point(0, 0)])).toEqual([new Point(0, 0), new Point(0, 0)]);
+
+        // Same points: Same first
+        expect(LineHelper.reduce([new Point(0, 0), new Point(0, 0), new Point(0, 0), new Point(0, 0), new Point(10, 0)])).toEqual([new Point(0, 0), new Point(10, 0)]);
+
+        // Same points: Same middle
+        expect(LineHelper.reduce([new Point(0, 0), new Point(0, 10), new Point(0, 10), new Point(0, 10), new Point(0, 10), new Point(10, 10)])).toEqual([new Point(0, 0), new Point(0, 10), new Point(10, 10)]);
+
+        // Same points: Same last
+        expect(LineHelper.reduce([new Point(0, 0), new Point(10, 0), new Point(10, 0), new Point(10, 0), new Point(10, 0)])).toEqual([new Point(0, 0), new Point(10, 0)]);
+
+        // Monotonic
+        expect(LineHelper.reduce([new Point(0, 0), new Point(5, 0), new Point(10, 0)])).toEqual([new Point(0, 0), new Point(10, 0)]);
+
+        // Monotonic 2
+        expect(LineHelper.reduce([new Point(0, 0), new Point(2, 0), new Point(4, 0), new Point(6, 0), new Point(8, 0), new Point(10, 0)])).toEqual([new Point(0, 0), new Point(10, 0)]);
+
+        // Non monotonic
+        expect(LineHelper.reduce([new Point(0, 0), new Point(0, 5), new Point(0, 5), new Point(0, 0), new Point(10, 0)])).toEqual([new Point(0, 0), new Point(10, 0)]);
+    });
+
+    it('testIsOnStraightLine_ordered', () => {
+        expect(LineHelper.isOnStraightLine(new Point(0, 0), new Point(2, 0), new Point(1, 0), true)).toBe(false);
+        expect(LineHelper.isOnStraightLine(new Point(2, 0), new Point(0, 0), new Point(1, 0), true)).toBe(false);
+        expect(LineHelper.isOnStraightLine(new Point(0, 0), new Point(0, 2), new Point(0, 1), true)).toBe(false);
+        expect(LineHelper.isOnStraightLine(new Point(0, 2), new Point(0, 0), new Point(0, 1), true)).toBe(false);
+
+        // Horizontal
+        expect(LineHelper.isOnStraightLine(new Point(0, 0), new Point(1, 0), new Point(2, 0), true)).toBe(true);
+        expect(LineHelper.isOnStraightLine(new Point(2, 0), new Point(1, 0), new Point(0, 0), true)).toBe(true);
+        expect(LineHelper.isOnStraightLine(new Point(0, 0), new Point(0, 0), new Point(1, 0), true)).toBe(true);
+        expect(LineHelper.isOnStraightLine(new Point(0, 0), new Point(1, 0), new Point(1, 0), true)).toBe(true);
+        expect(LineHelper.isOnStraightLine(new Point(1, 0), new Point(1, 0), new Point(0, 0), true)).toBe(true);
+        expect(LineHelper.isOnStraightLine(new Point(1, 0), new Point(1, 0), new Point(1, 0), true)).toBe(true);
+
+        // Vertical
+        expect(LineHelper.isOnStraightLine(new Point(0, 0), new Point(0, 1), new Point(0, 2), true)).toBe(true);
+        expect(LineHelper.isOnStraightLine(new Point(0, 2), new Point(0, 1), new Point(0, 0), true)).toBe(true);
+        expect(LineHelper.isOnStraightLine(new Point(0, 0), new Point(0, 0), new Point(0, 1), true)).toBe(true);
+        expect(LineHelper.isOnStraightLine(new Point(0, 0), new Point(0, 1), new Point(0, 1), true)).toBe(true);
+        expect(LineHelper.isOnStraightLine(new Point(0, 1), new Point(0, 1), new Point(0, 0), true)).toBe(true);
+        expect(LineHelper.isOnStraightLine(new Point(0, 1), new Point(0, 1), new Point(0, 1), true)).toBe(true);
+    });
+
+    it('testOnStraightLine_notOrdered', () => {
+        expect(LineHelper.isOnStraightLine(new Point(0, 0), new Point(2, 0), new Point(1, 0), false)).toBe(true);
+        expect(LineHelper.isOnStraightLine(new Point(2, 0), new Point(0, 0), new Point(1, 0), false)).toBe(true);
+        expect(LineHelper.isOnStraightLine(new Point(0, 0), new Point(0, 2), new Point(0, 1), false)).toBe(true);
+        expect(LineHelper.isOnStraightLine(new Point(0, 2), new Point(0, 0), new Point(0, 1), false)).toBe(true);
+    });
+
+    it('testCreateEdges', () => {
+        const points = [new Point(0, 0), new Point(1, 0), new Point(1, 1)];
+        const edges = LineHelper.createEdges(points);
+        expect(edges.length).toBe(2);
+
+        expect(edges[0].startPoint).toEqual(new Point(0, 0));
+        expect(edges[0].endPoint).toEqual(new Point(1, 0));
+
+        expect(edges[1].startPoint).toEqual(new Point(1, 0));
+        expect(edges[1].endPoint).toEqual(new Point(1, 1));
+    });
+});
+
+describe('LineEdge', () => {
+    it('testTranslate_horizontal', () => {
+        const startPoint = new Point(0, 0);
+        const endPoint = new Point(10, 0);
+        const edge = LineEdge.of(startPoint, endPoint);
+        const translatedEdge = edge.translate(new Point(0, 5));
+
+        expect(translatedEdge.startPoint).toEqual(new Point(0, 5));
+        expect(translatedEdge.endPoint).toEqual(new Point(10, 5));
+    });
+
+    it('testTranslate_vertical', () => {
+        const startPoint = new Point(0, 0);
+        const endPoint = new Point(0, 10);
+        const edge = LineEdge.of(startPoint, endPoint);
+        const translatedEdge = edge.translate(new Point(5, 0));
+
+        expect(translatedEdge.startPoint).toEqual(new Point(5, 0));
+        expect(translatedEdge.endPoint).toEqual(new Point(5, 10));
+    });
+
+    it('testContains', () => {
+        const startPoint = new Point(0, 0);
+        const endPoint = new Point(10, 0);
+        const edge = LineEdge.of(startPoint, endPoint);
+
+        expect(edge.contains(new Point(5, 0))).toBe(true);
+        expect(edge.contains(new Point(10, 0))).toBe(true);
+        expect(edge.contains(new Point(0, 0))).toBe(true);
+        expect(edge.contains(new Point(5, 5))).toBe(false);
+    });
+
+    it('testEquals', () => {
+        const startPoint1 = new Point(0, 0);
+        const endPoint1 = new Point(10, 0);
+        const edge1 = LineEdge.of(startPoint1, endPoint1);
+
+        const startPoint2 = new Point(0, 0);
+        const endPoint2 = new Point(10, 0);
+        const edge2 = LineEdge.of(startPoint2, endPoint2);
+
+        expect(edge1.equals(edge2)).toBe(true);
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/shape/shape/linehelper.ts b/monosketch-svelte/src/lib/mono/shape/shape/linehelper.ts
new file mode 100644
index 000000000..a27287679
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/shape/linehelper.ts
@@ -0,0 +1,202 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import type { Comparable } from "$libs/comparable";
+import { DirectedPoint, Direction, Point } from "$libs/graphics-geo/point";
+
+/**
+ * A helper class for line shapes.
+ */
+class LineHelperImpl {
+    createJointPoints(seedPoints: DirectedPoint[]): Point[] {
+        const mainPoints = this.createAnchorPoints(seedPoints);
+        if (mainPoints.length === 0) {
+            return [];
+        }
+        const directedJointPoints = [mainPoints[0]];
+        for (let i = 1; i < mainPoints.length; i++) {
+            const startPoint = directedJointPoints[directedJointPoints.length - 1];
+            const endPoint = mainPoints[i];
+            let middlePoint: DirectedPoint | null = null;
+            if (!isPointsOnSameStraightLine(startPoint, endPoint)) {
+                if (startPoint.direction === Direction.HORIZONTAL) {
+                    middlePoint = DirectedPoint.of(
+                        endPoint.direction,
+                        endPoint.left,
+                        startPoint.top,
+                    );
+                } else {
+                    middlePoint = DirectedPoint.of(
+                        endPoint.direction,
+                        startPoint.left,
+                        endPoint.top,
+                    );
+                }
+            }
+            if (middlePoint) {
+                directedJointPoints.push(middlePoint);
+            }
+            directedJointPoints.push(endPoint);
+        }
+        const jointPoints = directedJointPoints.map(dp => dp.point);
+        return this.reduce(jointPoints);
+    }
+
+    private createAnchorPoints(initAnchorPoints: DirectedPoint[]): DirectedPoint[] {
+        if (initAnchorPoints.length === 0) {
+            return [];
+        }
+        const mainPoints = [initAnchorPoints[0]];
+        for (const endPoint of initAnchorPoints.slice(1)) {
+            const startPoint = mainPoints[mainPoints.length - 1];
+            if (startPoint.direction === endPoint.direction &&
+                !isPointsOnSameStraightLine(startPoint, endPoint)) {
+                const middleLeft = (startPoint.left + endPoint.left) / 2;
+                const middleTop = (startPoint.top + endPoint.top) / 2;
+                const middleDirection = toRightAngleDirection(startPoint.direction);
+                const middlePoint = DirectedPoint.ofF(middleDirection, middleLeft, middleTop);
+                mainPoints.push(middlePoint);
+            }
+            mainPoints.push(endPoint);
+        }
+        return mainPoints;
+    }
+
+    reduce(points: Point[]): Point[] {
+        return this.reduceInner(this.reduceInner(points));
+    }
+
+    private reduceInner(points: Point[]): Point[] {
+        if (points.length === 0) {
+            return points;
+        }
+        const list: Point[] = [];
+        for (let i = 1; i < points.length; i++) {
+            const p1 = list[list.length - 2];
+            const p2 = list[list.length - 1];
+            const p3 = points[i];
+            if (!p1 || !p2 || !this.isOnStraightLine(p1, p2, p3, false)) {
+                list.push(p3);
+            } else {
+                list[list.length - 1] = p3;
+            }
+        }
+
+        const p1 = points[0];
+        const p2 = list[0];
+        const p3 = list[1];
+        if (!p2 || !p3 || !this.isOnStraightLine(p1, p2, p3, false)) {
+            list.unshift(p1);
+        } else {
+            list[0] = p1;
+        }
+        return list;
+    }
+
+    isOnStraightLine(p1: Point, p2: Point, p3: Point, isInOrderedRequired: boolean): boolean {
+        if (isInOrderedRequired) {
+            return isNumbersEquals(p1.left, p2.left, p3.left) && isNumbersMonotonic(p1.top, p2.top, p3.top) ||
+                isNumbersEquals(p1.top, p2.top, p3.top) && isNumbersMonotonic(p1.left, p2.left, p3.left);
+        } else {
+            return isNumbersEquals(p1.left, p2.left, p3.left) || isNumbersEquals(p1.top, p2.top, p3.top);
+        }
+    }
+
+    createEdges(jointPoints: Point[]): LineEdge[] {
+        const edges: LineEdge[] = [];
+        for (let i = 0; i < jointPoints.length - 1; i++) {
+            const startPoint = jointPoints[i];
+            const endPoint = jointPoints[i + 1];
+            edges.push(LineEdge.of(startPoint, endPoint));
+        }
+        return edges;
+    }
+
+    isHorizontal(p1: Point, p2: Point): boolean {
+        return p1.top === p2.top;
+    }
+}
+
+export const LineHelper = new LineHelperImpl();
+
+export class LineEdge implements Comparable {
+    middleLeft: number;
+    middleTop: number;
+    isHorizontal: boolean;
+
+    constructor(
+        public id: number,
+        public startPoint: Point,
+        public endPoint: Point,
+    ) {
+        this.middleLeft = (startPoint.left + endPoint.left) / 2.0;
+        this.middleTop = (startPoint.top + endPoint.top) / 2.0;
+        this.isHorizontal = LineHelper.isHorizontal(startPoint, endPoint);
+    }
+
+    translate(point: Point): LineEdge {
+        const newStartPoint = this.isHorizontal
+            ? this.startPoint.copy({ top: point.top })
+            : this.startPoint.copy({ left: point.left });
+        const newEndPoint = this.isHorizontal
+            ? this.endPoint.copy({ top: point.top })
+            : this.endPoint.copy({ left: point.left });
+        return new LineEdge(this.id, newStartPoint, newEndPoint);
+    }
+
+    contains(point: Point): boolean {
+        return LineHelper.isOnStraightLine(this.startPoint, point, this.endPoint, true);
+    }
+
+    equals(other: unknown): boolean {
+        if (!(other instanceof LineEdge)) {
+            return false;
+        }
+        return this.startPoint.equals(other.startPoint) && this.endPoint.equals(other.endPoint);
+    }
+
+    copy({
+        id = this.id,
+        startPoint = this.startPoint,
+        endPoint = this.endPoint,
+    }: {
+        id?: number,
+        startPoint?: Point,
+        endPoint?: Point,
+    } = {}): LineEdge {
+        return new LineEdge(id, startPoint, endPoint);
+    }
+
+    static of(startPoint: Point, endPoint: Point): LineEdge {
+        return new LineEdge(this.nextId(), startPoint, endPoint);
+    }
+
+    static lastUsedId = 0;
+
+    private static nextId(): number {
+        return ++LineEdge.lastUsedId;
+    }
+}
+
+export enum LineAnchor {
+    START, END
+}
+
+export interface LineAnchorPointUpdate {
+    anchor: LineAnchor;
+    point: DirectedPoint;
+}
+
+const isNumbersEquals = (a: number, b: number, c: number): boolean =>
+    a === b && b === c;
+
+const isNumbersMonotonic = (a: number, b: number, c: number): boolean =>
+    (b >= a && b <= c) || (b <= a && b >= c);
+
+const isPointsOnSameStraightLine = (p1: DirectedPoint, p2: DirectedPoint): boolean =>
+    p1.left == p2.left || p1.top == p2.top;
+
+const toRightAngleDirection = (direction: Direction): Direction => {
+    return direction === Direction.HORIZONTAL ? Direction.VERTICAL : Direction.HORIZONTAL;
+};
diff --git a/monosketch-svelte/src/lib/mono/shape/shape/mock-shape.ts b/monosketch-svelte/src/lib/mono/shape/shape/mock-shape.ts
new file mode 100644
index 000000000..0cdc0bcee
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/shape/mock-shape.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import type { Rect } from "$libs/graphics-geo/rect";
+import type { AbstractSerializableShape } from "$mono/shape/serialization/shapes";
+import { AbstractShape } from "$mono/shape/shape/abstract-shape";
+
+/**
+ * A simple shape for testing purpose
+ */
+export class MockShape extends AbstractShape {
+    private boundInner: Rect;
+
+    constructor(rect: Rect, parentId: string | null = null) {
+        super(null, parentId);
+        this.boundInner = rect;
+    }
+
+    toSerializableShape(_isIdIncluded: boolean): AbstractSerializableShape {
+        throw new Error('Not yet implemented');
+    }
+
+    get bound(): Rect {
+        return this.boundInner;
+    }
+
+    set bound(value: Rect) {
+        this.update(() => {
+            const isUpdated = this.boundInner !== value;
+            this.boundInner = value;
+            return isUpdated;
+        });
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/shape/rectangle.ts b/monosketch-svelte/src/lib/mono/shape/shape/rectangle.ts
new file mode 100644
index 000000000..c9247b432
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/shape/rectangle.ts
@@ -0,0 +1,87 @@
+import type { Point } from "$libs/graphics-geo/point";
+import { Rect } from "$libs/graphics-geo/rect";
+import { ShapeExtraManager } from "$mono/shape/extra/extra-manager";
+import { RectangleExtra, type ShapeExtra } from "$mono/shape/extra/shape-extra";
+import { SerializableRectangle } from "$mono/shape/serialization/shapes";
+import { AbstractShape } from "$mono/shape/shape/abstract-shape";
+
+/**
+ * A rectangle shape.
+ */
+export class Rectangle extends AbstractShape {
+    private boundInner: Rect;
+
+    private constructor(rect: Rect, id: string | null = null, parentId: string | null = null) {
+        super(id, parentId);
+        this.boundInner = rect;
+        this.setExtra(RectangleExtra.create(ShapeExtraManager.defaultRectangleExtra));
+    }
+
+    static fromRect({ rect, id = null, parentId = null }: {
+        rect: Rect,
+        id?: string | null,
+        parentId?: string | null
+    }): Rectangle {
+        return new Rectangle(rect, id, parentId);
+    }
+
+    // Constructor that takes startPoint and endPoint
+    static fromPoints({ startPoint, endPoint, id = null, parentId = null }: {
+        startPoint: Point,
+        endPoint: Point,
+        id?: string | null,
+        parentId?: string | null
+    }): Rectangle {
+        const rect = Rect.byLTRB(startPoint.left, startPoint.top, endPoint.left, endPoint.top);
+        return new Rectangle(rect, id, parentId);
+    }
+
+    // Constructor that takes a serializable rectangle
+    static fromSerializable(serializableRectangle: SerializableRectangle, parentId?: string): Rectangle {
+        const rectangle = new Rectangle(serializableRectangle.bound, serializableRectangle.actualId, parentId);
+        rectangle.setExtra(RectangleExtra.fromSerializable(serializableRectangle.extra));
+        rectangle.versionCode = serializableRectangle.versionCode;
+        return rectangle;
+    }
+
+    get extra(): RectangleExtra {
+        return this.extraInner as RectangleExtra;
+    }
+
+    setExtra(value: ShapeExtra) {
+        if (!(value instanceof RectangleExtra)) {
+            throw new Error('New extra is not a RectangleExtra');
+        }
+        if (this.extraInner.equals(value)) {
+            return;
+        }
+        this.update(() => {
+            this.extraInner = value;
+            return true;
+        });
+    }
+
+    get bound(): Rect {
+        return this.boundInner;
+    }
+
+    setBound(newBound: Rect): void {
+        this.update(() => {
+            const isUpdated = this.bound !== newBound;
+            this.boundInner = newBound;
+            return isUpdated;
+        });
+    }
+
+    toSerializableShape(isIdIncluded: boolean): SerializableRectangle {
+        return SerializableRectangle.create(
+            {
+                id: isIdIncluded ? this.id : null,
+                isIdTemporary: !isIdIncluded,
+                versionCode: this.versionCode,
+                bound: this.bound,
+                extra: this.extra.toSerializableExtra(),
+            },
+        );
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/shape/shape/text.test.ts b/monosketch-svelte/src/lib/mono/shape/shape/text.test.ts
new file mode 100644
index 000000000..6475ef83e
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/shape/text.test.ts
@@ -0,0 +1,80 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Rect } from "$libs/graphics-geo/rect";
+import { TextExtra } from "$mono/shape/extra/shape-extra";
+import type { SerializableText } from "$mono/shape/serialization/shapes";
+import { describe, it, expect } from 'vitest';
+import { Text } from './text';
+
+describe('TextTest', () => {
+    const PARENT_ID = '1';
+
+    it('testSerialization_init', () => {
+        const text = Text.fromRect({ rect: Rect.byLTWH(1, 2, 3, 4), parentId: PARENT_ID });
+
+        const serializableText = text.toSerializableShape(true) as SerializableText;
+        expect(text.text).toBe(serializableText.text);
+        expect(text.bound).toEqual(serializableText.bound);
+        expect(text.extra.toSerializableExtra()).toEqual(serializableText.extra);
+    });
+
+    it('testSerialization_updateBound', () => {
+        const text = Text.fromRect({ rect: Rect.byLTWH(1, 2, 3, 4), parentId: PARENT_ID });
+        text.setBound(Rect.byLTWH(5, 6, 7, 8));
+
+        const serializableText = text.toSerializableShape(true) as SerializableText;
+        expect(text.text).toBe(serializableText.text);
+        expect(text.bound).toEqual(serializableText.bound);
+        expect(text.extra.toSerializableExtra()).toEqual(serializableText.extra);
+    });
+
+    it('testSerialization_updateText', () => {
+        const text = Text.fromRect({ rect: Rect.byLTWH(1, 2, 3, 4), parentId: PARENT_ID });
+        text.setText('Hello Hello!');
+
+        const serializableText = text.toSerializableShape(true) as SerializableText;
+        expect(text.text).toBe(serializableText.text);
+        expect(text.bound).toEqual(serializableText.bound);
+        expect(text.extra.toSerializableExtra()).toEqual(serializableText.extra);
+    });
+
+    it('testSerialization_restore', () => {
+        const text = Text.fromRect({ rect: Rect.byLTWH(1, 2, 3, 4), parentId: PARENT_ID });
+        text.setText('Hello Hello!');
+        text.setBound(Rect.byLTWH(5, 5, 2, 2));
+
+        const serializableText = text.toSerializableShape(true) as SerializableText;
+        const text2 = Text.fromSerializable(serializableText, PARENT_ID);
+        expect(text2.parentId).toBe(PARENT_ID);
+        expect(text2.text).toBe(text.text);
+        expect(text2.bound).toEqual(text.bound);
+        expect(text2.extra).toEqual(text.extra);
+        expect(text2.renderableText.getRenderableText()).toEqual(text.renderableText.getRenderableText());
+    });
+
+    it('testConvertRenderableText', () => {
+        const target = Text.fromRect({ rect: Rect.byLTWH(0, 0, 5, 5) });
+
+        target.setText('0 1234 12345\n1   2 3 4 5678901 23');
+        target.setExtra(TextExtra.NO_BOUND);
+        expect(target.renderableText.getRenderableText()).toEqual([
+            '0', '1234', '12345', '1   2', '3 4', '56789', '01 23'
+        ]);
+    });
+
+    it('testContentBound', () => {
+        const target = Text.fromRect({ rect: Rect.byLTWH(1, 2, 5, 6) });
+
+        const defaultBoundExtra = target.extra.boundExtra;
+
+        const extraWithBorder = target.extra.copy({ boundExtra: defaultBoundExtra.copy({ isBorderEnabled: true }) });
+        target.setExtra(extraWithBorder);
+        expect(target.contentBound).toEqual(Rect.byLTWH(2, 3, 3, 4));
+
+        const extraWithoutBorder = target.extra.copy({ boundExtra: defaultBoundExtra.copy({ isBorderEnabled: false }) });
+        target.setExtra(extraWithoutBorder);
+        expect(target.contentBound).toEqual(Rect.byLTWH(1, 2, 5, 6));
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/shape/shape/text.ts b/monosketch-svelte/src/lib/mono/shape/shape/text.ts
new file mode 100644
index 000000000..8aed6643b
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/shape/shape/text.ts
@@ -0,0 +1,212 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Point } from "$libs/graphics-geo/point";
+import { Rect } from "$libs/graphics-geo/rect";
+import { Size } from "$libs/graphics-geo/size";
+import { type ShapeExtra, TextExtra } from "$mono/shape/extra/shape-extra";
+import { AbstractSerializableShape, SerializableText } from "$mono/shape/serialization/shapes";
+import { AbstractShape } from "$mono/shape/shape/abstract-shape";
+
+/**
+ * A text shape which contains a bound and a text.
+ */
+export class Text extends AbstractShape {
+    private userSettingSize: Size = Size.ZERO;
+
+    // Text can be auto resized by text
+    private boundInner: Rect;
+
+    private textInner: string = "";
+    private isTextEditableInner: boolean;
+    private isTextEditingInner: boolean = false;
+    private renderableTextInner: RenderableText = RenderableText.EMPTY;
+
+    private constructor(rect: Rect, id: string | null = null, parentId: string | null = null, isTextEditable: boolean = true) {
+        super(id, parentId);
+        this.boundInner = rect;
+        this.isTextEditableInner = isTextEditable;
+        this.userSettingSize = rect.size;
+        this.extraInner = TextExtra.withDefault();
+        this.updateRenderableText();
+    }
+
+    static fromRect({ rect, id = null, parentId = null, isTextEditable = true }: {
+        rect: Rect,
+        id?: string | null,
+        parentId?: string | null,
+        isTextEditable?: boolean
+    }): Text {
+        return new Text(rect, id, parentId, isTextEditable);
+    }
+
+    static fromPoints(startPoint: Point, endPoint: Point, id: string | null = null, parentId: string | null = null, isTextEditable: boolean): Text {
+        const rect = Rect.byLTRB(startPoint.left, startPoint.top, endPoint.left, endPoint.top);
+        return new Text(rect, id, parentId, isTextEditable);
+    }
+
+    static fromSerializable(serializableText: SerializableText, parentId: string | null): Text {
+        const text = new Text(serializableText.bound, serializableText.actualId, parentId, serializableText.isTextEditable);
+        text.extraInner = TextExtra.fromSerializable(serializableText.extra);
+        text.setText(serializableText.text);
+        text.versionCode = serializableText.versionCode;
+        return text;
+    }
+
+    get text(): string {
+        return this.textInner;
+    }
+
+    setText(newText: string): void {
+        this.update(() => {
+            const isTextChanged = newText !== this.textInner;
+            this.textInner = newText;
+            this.updateRenderableText();
+            return isTextChanged;
+        });
+    }
+
+    get isTextEditable(): boolean {
+        return this.isTextEditableInner;
+    }
+
+    setTextEditingMode(isEditing: boolean): void {
+        this.update(() => {
+            const isUpdated = this.isTextEditingInner !== isEditing;
+            this.isTextEditingInner = isEditing;
+            return isUpdated;
+        });
+    }
+
+    get isTextEditing(): boolean {
+        return this.isTextEditingInner;
+    }
+
+    get contentBound(): Rect {
+        return this.extra.boundExtra.isBorderEnabled
+            ? Rect.byLTWH(this.bound.left + 1, this.bound.top + 1, this.bound.width - 2, this.bound.height - 2)
+            : this.bound;
+    }
+
+    get bound(): Rect {
+        return this.boundInner;
+    }
+
+    set bound(newBound: Rect) {
+        this.update(() => {
+            const isUpdated = this.boundInner !== newBound;
+            this.userSettingSize = newBound.size;
+            this.boundInner = newBound;
+            this.updateRenderableText();
+            return isUpdated;
+        });
+    }
+
+    get extra(): TextExtra {
+        return this.extraInner as TextExtra;
+    }
+
+    setExtra(newExtra: ShapeExtra): void {
+        if (!(newExtra instanceof TextExtra)) {
+            throw new Error(`New extra is not a TextExtra (${newExtra.constructor.name})`);
+        }
+        if (newExtra.equals(this.extraInner)) {
+            return;
+        }
+        this.update(() => {
+            this.extraInner = newExtra;
+            this.updateRenderableText();
+            return true;
+        });
+    }
+
+    toSerializableShape(isIdIncluded: boolean): AbstractSerializableShape {
+        return SerializableText.create({
+            id: this.id,
+            isIdTemporary: !isIdIncluded,
+            versionCode: this.versionCode,
+            bound: this.bound,
+            text: this.text,
+            extra: this.extra.toSerializableExtra(),
+            isTextEditable: this.isTextEditable,
+        });
+    }
+
+    private updateRenderableText(): void {
+        const maxRowCharCount = this.extra.hasBorder() ? this.bound.width - 2 : this.bound.width;
+        if (this.text !== this.renderableTextInner.text || maxRowCharCount !== this.renderableTextInner.maxRowCharCount) {
+            this.renderableTextInner = new RenderableText(this.text, Math.max(maxRowCharCount, 1));
+        }
+    }
+
+    get renderableText(): RenderableText {
+        return this.renderableTextInner;
+    }
+
+    makeTextEditable(): void {
+        if (this.isTextEditableInner) {
+            return;
+        }
+        this.update(() => {
+            this.isTextEditableInner = true;
+            return true;
+        });
+    }
+}
+
+/**
+ * A class to generate renderable text.
+ */
+class RenderableText {
+    private renderableText: string[] | null = null;
+
+    constructor(public text: string, public maxRowCharCount: number) {
+    }
+
+    getRenderableText(): string[] {
+        if (!this.renderableText) {
+            this.renderableText = this.createRenderableText();
+        }
+        return this.renderableText;
+    }
+
+    private createRenderableText(): string[] {
+        if (this.maxRowCharCount === 1) {
+            return this.text.split('');
+        } else {
+            return this.standardizeLines(this.text.split('\n'));
+        }
+    }
+
+    private standardizeLines(lines: string[]): string[] {
+        return lines.flatMap(line => {
+            const adjustedLines: string[] = [];
+            let currentLine = '';
+            for (const word of this.toStandardizedWords(line, this.maxRowCharCount)) {
+                const space = currentLine ? ' ' : '';
+                const newLineLength = currentLine.length + space.length + word.length;
+                if (newLineLength <= this.maxRowCharCount) {
+                    currentLine += space + word;
+                } else {
+                    adjustedLines.push(currentLine);
+                    currentLine = word;
+                }
+            }
+            adjustedLines.push(currentLine);
+            return adjustedLines;
+        });
+    }
+
+    private toStandardizedWords(line: string, maxCharCount: number): string[] {
+        return line.split(' ').flatMap(word => {
+            if (word.length <= maxCharCount) {
+                return [word];
+            } else {
+                return word.match(new RegExp(`.{1,${maxCharCount}}`, 'g')) || [];
+            }
+        });
+    }
+
+    static EMPTY = new RenderableText('', 0);
+}
diff --git a/monosketch-svelte/src/lib/mono/state-manager/clipboard-manager.ts b/monosketch-svelte/src/lib/mono/state-manager/clipboard-manager.ts
new file mode 100644
index 000000000..bd4066f4b
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/state-manager/clipboard-manager.ts
@@ -0,0 +1,116 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { LifecycleOwner } from "$libs/flow";
+import { Point } from "$libs/graphics-geo/point";
+import { Rect } from "$libs/graphics-geo/rect";
+import { ShapeConnector } from "$mono/shape/connector/shape-connector";
+import { ClipboardObject, type ShapeClipboardManager } from "$mono/shape/shape-clipboard-manager";
+import type { AbstractShape } from "$mono/shape/shape/abstract-shape";
+import { Group } from "$mono/shape/shape/group";
+import { Line } from "$mono/shape/shape/line";
+import type { CommandEnvironment } from "$mono/state-manager/command-environment";
+
+/**
+ * A manager class to handle clipboard related data.
+ */
+export class ClipboardManager {
+    private selectedShapes: AbstractShape[] = [];
+
+    constructor(
+        private environment: CommandEnvironment,
+        private shapeClipboardManager: ShapeClipboardManager,
+    ) {
+    }
+
+    observe(lifecycleOwner: LifecycleOwner) {
+        this.environment.selectedShapesFlow.observe(lifecycleOwner, (shapes) => {
+            this.selectedShapes = Array.from(shapes);
+        });
+        this.shapeClipboardManager.clipboardShapeFlow.observe(
+            lifecycleOwner,
+            this.pasteShapes.bind(this),
+        );
+    }
+
+    copySelectedShapes(isRemoveRequired: boolean) {
+        this.shapeClipboardManager.setClipboard(this.createClipboardObject());
+        if (isRemoveRequired) {
+            for (const shape of this.selectedShapes) {
+                this.environment.removeShape(shape);
+            }
+            this.environment.clearSelectedShapes();
+        }
+    }
+
+    private pasteShapes(clipboardObject: ClipboardObject) {
+        if (clipboardObject.shapes.length === 0) {
+            return;
+        }
+        this.environment.clearSelectedShapes();
+        const bound = this.environment.getWindowBound();
+        const left = bound.left + bound.width / 5;
+        const top = bound.top + bound.height / 5;
+        this.insertShapes(left, top, clipboardObject);
+    }
+
+    duplicateSelectedShapes() {
+        if (this.selectedShapes.length === 0) {
+            return;
+        }
+        const currentSelectedShapes = this.selectedShapes;
+        const clipboardObject = this.createClipboardObject();
+        const minLeft = Math.min(...currentSelectedShapes.map(shape => shape.bound.left));
+        const minTop = Math.min(...currentSelectedShapes.map(shape => shape.bound.top));
+
+        this.environment.clearSelectedShapes();
+        this.insertShapes(minLeft + 1, minTop + 1, clipboardObject);
+    }
+
+    private insertShapes(
+        left: number,
+        top: number,
+        clipboardObject: ClipboardObject,
+    ) {
+        const currentParentId = this.environment.workingParentGroup.id;
+
+        const srcIdToShapeMap = new Map(
+            clipboardObject.shapes.map(shape => [shape.id, Group.toShape(currentParentId, shape)]),
+        );
+        const minLeft = Math.min(...Array.from(srcIdToShapeMap.values()).map(shape => shape.bound.left));
+        const minTop = Math.min(...Array.from(srcIdToShapeMap.values()).map(shape => shape.bound.top));
+
+        const offset = Point.from({ left: minLeft - left, top: minTop - top });
+        for (const shape of srcIdToShapeMap.values()) {
+            const shapeBound = shape.bound;
+            const newShapeBound = new Rect(shapeBound.position.minus(offset), shapeBound.size);
+            shape.setBound(newShapeBound);
+
+            this.environment.addShape(shape);
+            this.environment.addSelectedShape(shape);
+        }
+
+        for (const connector of clipboardObject.connectors) {
+            const line = srcIdToShapeMap.get(connector.lineId);
+            if (!line || !(line instanceof Line)) {
+                continue;
+            }
+            const target = srcIdToShapeMap.get(connector.targetId);
+            if (line && target) {
+                this.environment.shapeManager.shapeConnector.addConnector(line, connector.anchor, target);
+            }
+        }
+    }
+
+    private createClipboardObject(): ClipboardObject {
+        const serializableShapes =
+            this.selectedShapes.map(shape => shape.toSerializableShape(false));
+        const serializableConnectors = this.selectedShapes.flatMap(target =>
+            this.environment.shapeManager.shapeConnector.getConnectors(target).map(connector =>
+                ShapeConnector.toSerializableConnector(connector, target),
+            ),
+        );
+        return ClipboardObject.create(serializableShapes, serializableConnectors);
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/state-manager/command-environment.ts b/monosketch-svelte/src/lib/mono/state-manager/command-environment.ts
new file mode 100644
index 000000000..d0344325c
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/state-manager/command-environment.ts
@@ -0,0 +1,105 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Flow } from "$libs/flow";
+import { Direction, type Point } from "$libs/graphics-geo/point";
+import type { Rect } from "$libs/graphics-geo/rect";
+import type { InteractionPoint } from "$mono/shape/interaction-bound";
+import { type FocusingShape, ShapeFocusType } from "$mono/shape/selected-shape-manager";
+import { type Command, ShapeManager } from '$mono/shape/shape-manager';
+import { ShapeConnector } from '$mono/shape/connector/shape-connector';
+import type { AbstractShape } from "$mono/shape/shape/abstract-shape";
+import type { Group } from "$mono/shape/shape/group";
+
+/**
+ * An interface defines apis for command to interact with the environment.
+ */
+export interface CommandEnvironment {
+    // TODO: Remove this property and add api to access apis of shape manager.
+    shapeManager: ShapeManager;
+
+    editingModeFlow: Flow<EditingMode>;
+
+    /**
+     * The current working parent group, which is the group that is focused, shape actions will be
+     * applied to this group.
+     *
+     * This is similar to the concept of "current directory" in file system.
+     */
+    workingParentGroup: Group;
+
+    /**
+     * The current root group, which is the group that is the root of the shape tree.
+     * This is similar to the concept of "root directory" in file system.
+     */
+    currentRootGroup: Group;
+
+    replaceRoot(newRoot: Group, newShapeConnector: ShapeConnector): void;
+
+    enterEditingMode(): void;
+
+    exitEditingMode(isNewStateAccepted: boolean): void;
+
+    executeShapeManagerCommand(command: Command): void;
+
+    addShape(shape: AbstractShape | null): void;
+
+    removeShape(shape: AbstractShape | null): void;
+
+    getShapes(point: Point): Iterable<AbstractShape>;
+
+    getAllShapesInZone(bound: Rect): Iterable<AbstractShape>;
+
+    getWindowBound(): Rect;
+
+    getInteractionPoint(pointPx: Point): InteractionPoint | null;
+
+    updateInteractionBounds(): void;
+
+    isPointInInteractionBounds(point: Point): boolean;
+
+    setSelectionBound(bound: Rect | null): void;
+
+    selectedShapesFlow: Flow<Set<AbstractShape>>;
+
+    getSelectedShapes(): Set<AbstractShape>;
+
+    addSelectedShape(shape: AbstractShape | null): void;
+
+    toggleShapeSelection(shape: AbstractShape): void;
+
+    setFocusingShape(shape: AbstractShape | null, focusType: ShapeFocusType): void;
+
+    getFocusingShape(): FocusingShape | null;
+
+    selectAllShapes(): void;
+
+    clearSelectedShapes(): void;
+
+    getEdgeDirection(point: Point): Direction | null;
+
+    toXPx(column: number): number;
+
+    toYPx(row: number): number;
+
+    toWidthPx(width: number): number;
+
+    toHeightPx(height: number): number;
+}
+
+export class EditingMode {
+    private constructor(public isEditing: boolean, public skippedVersion: number | null) {
+    }
+
+    private static readonly IDLE = new EditingMode(false, null);
+    private static readonly EDIT = new EditingMode(true, null);
+
+    static edit(): EditingMode {
+        return this.EDIT;
+    }
+
+    static idle(skippedVersion: number | null): EditingMode {
+        return skippedVersion === null ? this.IDLE : new EditingMode(false, skippedVersion);
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/state-manager/export/export-shapes-helper.ts b/monosketch-svelte/src/lib/mono/state-manager/export/export-shapes-helper.ts
new file mode 100644
index 000000000..b421e3e8e
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/state-manager/export/export-shapes-helper.ts
@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Rect } from "$libs/graphics-geo/rect";
+import { MonoBitmap } from "$mono/monobitmap/bitmap/monobitmap";
+import { MonoBoard } from "$mono/monobitmap/board";
+import { HighlightType } from "$mono/monobitmap/board/pixel";
+import type { AbstractShape } from "$mono/shape/shape/abstract-shape";
+import { Group } from "$mono/shape/shape/group";
+
+/**
+ * A helper class for exporting selected shapes.
+ */
+export class ExportShapesHelper {
+
+    constructor(
+        private getBitmap: (shape: AbstractShape) => MonoBitmap.Bitmap | null,
+        private setClipboardText: (text: string) => void,
+    ) {
+    }
+
+    exportText(shapes: AbstractShape[], isModalRequired: boolean): void {
+        if (shapes.length === 0) {
+            return;
+        }
+
+        const left = Math.min(...shapes.map(shape => shape.bound.left));
+        const right = Math.max(...shapes.map(shape => shape.bound.right));
+        const top = Math.min(...shapes.map(shape => shape.bound.top));
+        const bottom = Math.max(...shapes.map(shape => shape.bound.bottom));
+        const window = Rect.byLTRB(left, top, right, bottom);
+
+        const exportingBoard = new MonoBoard();
+        exportingBoard.clearAndSetWindow(window);
+        this.drawShapesOntoExportingBoard(exportingBoard, shapes);
+
+        const text = exportingBoard.toStringInBound(window);
+        if (isModalRequired) {
+            // TODO: Show modal
+            // new ExportShapesModal().show(text);
+        } else {
+            this.setClipboardText(text);
+        }
+    }
+
+    private drawShapesOntoExportingBoard(board: MonoBoard, shapes: Iterable<AbstractShape>): void {
+        for (const shape of shapes) {
+            if (shape instanceof Group) {
+                this.drawShapesOntoExportingBoard(board, shape.items);
+                continue;
+            }
+            const bitmap = this.getBitmap(shape);
+            if (bitmap) {
+                board.fillBitmap(shape.bound.position, bitmap, HighlightType.NO);
+            }
+        }
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/state-manager/main-state-manager.ts b/monosketch-svelte/src/lib/mono/state-manager/main-state-manager.ts
new file mode 100644
index 000000000..f7565abfe
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/state-manager/main-state-manager.ts
@@ -0,0 +1,265 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import type { Workspace } from "$app/workspace";
+import { Flow, LifecycleOwner } from "$libs/flow";
+import type { Point, Direction } from "$libs/graphics-geo/point";
+import type { Rect } from "$libs/graphics-geo/rect";
+import type { ActionManager } from "$mono/action-manager/action-manager";
+import { DEBUG_MODE } from "$mono/build_environment";
+import { MonoBoard } from "$mono/monobitmap/board";
+import type { MonoBitmapManager } from "$mono/monobitmap/manager/mono-bitmap-manager";
+import { AddShape, RemoveShape } from "$mono/shape/command/shape-manager-commands";
+import type { ShapeConnector } from "$mono/shape/connector/shape-connector";
+import type { InteractionPoint } from "$mono/shape/interaction-bound";
+import { ShapeSearcher } from "$mono/shape/searcher/shape-searcher";
+import type { FocusingShape, SelectedShapeManager, ShapeFocusType } from "$mono/shape/selected-shape-manager";
+import type { ShapeClipboardManager } from "$mono/shape/shape-clipboard-manager";
+import { type Command, ShapeManager } from "$mono/shape/shape-manager";
+import type { AbstractShape } from "$mono/shape/shape/abstract-shape";
+import type { Group } from "$mono/shape/shape/group";
+import { type CommandEnvironment, EditingMode } from "$mono/state-manager/command-environment";
+import { OneTimeActionHandler } from "$mono/state-manager/one-time-action-handler";
+import { StateHistoryManager } from "$mono/state-manager/state-history-manager";
+import type { WorkspaceDao } from "$mono/store-manager/dao/workspace-dao";
+import type { AppUiStateManager } from "$mono/ui-state-manager/app-ui-state-manager";
+
+/**
+ * A class which connects components in the app.
+ */
+export class MainStateManager {
+    private readonly commandEnvironment: CommandEnvironment;
+
+    private workingParentGroup: Group;
+
+    private readonly shapeSearcher: ShapeSearcher;
+    private readonly stateHistoryManager: StateHistoryManager;
+
+    private readonly oneTimeActionHandler: OneTimeActionHandler;
+
+    constructor(
+        private readonly mainBoard: MonoBoard,
+        private readonly shapeManager: ShapeManager,
+        private readonly selectedShapeManager: SelectedShapeManager,
+        private readonly bitmapManager: MonoBitmapManager,
+        private readonly workspace: Workspace,
+        private readonly workspaceDao: WorkspaceDao,
+        private readonly actionManager: ActionManager,
+        shapeClipboardManager: ShapeClipboardManager,
+        appUiStateManager: AppUiStateManager,
+        initialRootId: string,
+    ) {
+        if (DEBUG_MODE) {
+            console.log(`Root ID: ${initialRootId}`);
+        }
+
+        this.shapeSearcher = new ShapeSearcher(shapeManager, shape => bitmapManager.getBitmap(shape));
+        this.commandEnvironment = new CommandEnvironmentImpl({
+            mainStateManager: this,
+            shapeManager: this.shapeManager,
+            selectedShapeManager: this.selectedShapeManager,
+            shapeSearcher: this.shapeSearcher,
+            workspace: this.workspace,
+            workspaceDao: this.workspaceDao,
+
+            getWorkingParentGroup: () => this.workingParentGroup,
+            setWorkingParentGroup: (group: Group) => this.workingParentGroup = group,
+
+            replaceRoot: (newRoot: Group, newShapeConnector: ShapeConnector) => {
+                this.replaceRoot(newRoot, newShapeConnector);
+            },
+        });
+
+        this.stateHistoryManager = new StateHistoryManager(this.commandEnvironment, this.workspace, this.workspaceDao);
+        this.stateHistoryManager.restoreState(initialRootId);
+
+        this.workingParentGroup = shapeManager.root;
+
+        this.oneTimeActionHandler = new OneTimeActionHandler(
+            this.commandEnvironment,
+            this.bitmapManager,
+            shapeClipboardManager,
+            this.stateHistoryManager,
+            appUiStateManager,
+            this.workspaceDao,
+        );
+    }
+
+    onStart(lifecycleOwner: LifecycleOwner): void {
+        this.workspace.drawingOffsetPointPxFlow.observe(lifecycleOwner, (offsetPointPx) => {
+            this.workspaceDao.getObject(this.shapeManager.root.id).offset = offsetPointPx;
+        });
+        this.shapeManager.rootIdFlow.observe(lifecycleOwner, (rootId) => {
+            this.workspace.setDrawingOffset(this.workspaceDao.getObject(rootId).offset);
+        });
+
+        this.stateHistoryManager.observeStateChange(lifecycleOwner);
+        this.oneTimeActionHandler.observe(lifecycleOwner, this.actionManager.oneTimeActionFlow);
+    }
+
+    replaceRoot(newRoot: Group, newShapeConnector: ShapeConnector): void {
+        const currentRoot = this.shapeManager.root;
+        if (currentRoot.id !== newRoot.id) {
+            this.workspaceDao.getObject(newRoot.id).lastModifiedTimestampMillis = Date.now();
+            this.workspace.setDrawingOffset(
+                this.workspaceDao.getObject(newRoot.id).offset,
+            );
+            this.stateHistoryManager.clear();
+        }
+
+        this.shapeManager.replaceRoot(newRoot, newShapeConnector);
+        this.workingParentGroup = this.shapeManager.root;
+        this.commandEnvironment.clearSelectedShapes();
+    }
+}
+
+interface DependencyManager {
+    readonly mainStateManager: MainStateManager;
+    readonly shapeManager: ShapeManager;
+    readonly selectedShapeManager: SelectedShapeManager;
+    readonly shapeSearcher: ShapeSearcher;
+    readonly workspace: Workspace;
+    readonly workspaceDao: WorkspaceDao;
+
+    getWorkingParentGroup(): Group;
+
+    setWorkingParentGroup(group: Group): void;
+
+    replaceRoot(newRoot: Group, newShapeConnector: ShapeConnector): void;
+}
+
+class CommandEnvironmentImpl implements CommandEnvironment {
+    shapeManager: ShapeManager;
+
+    editingModeFlow: Flow<EditingMode> = new Flow(EditingMode.idle(null));
+
+    constructor(
+        private readonly dependencies: DependencyManager,
+    ) {
+        this.shapeManager = dependencies.shapeManager;
+    }
+
+    get workingParentGroup(): Group {
+        return this.dependencies.getWorkingParentGroup();
+    };
+
+    set workingParentGroup(group: Group) {
+        this.dependencies.setWorkingParentGroup(group);
+    }
+
+    get currentRootGroup(): Group {
+        return this.shapeManager.root;
+    };
+
+    replaceRoot(newRoot: Group, newShapeConnector: ShapeConnector): void {
+        this.dependencies.replaceRoot(newRoot, newShapeConnector);
+    }
+
+    enterEditingMode(): void {
+        this.editingModeFlow.value = EditingMode.edit();
+    }
+
+    exitEditingMode(isNewStateAccepted: boolean): void {
+        const skippedVersion = isNewStateAccepted ? null : this.shapeManager.versionFlow.value ?? null;
+        this.editingModeFlow.value = EditingMode.idle(skippedVersion);
+    }
+
+    executeShapeManagerCommand(command: Command): void {
+        this.dependencies.shapeManager.execute(command);
+    }
+
+    addShape(shape: AbstractShape | null): void {
+        if (shape) {
+            this.executeShapeManagerCommand(new AddShape(shape));
+        }
+    }
+
+    removeShape(shape: AbstractShape | null): void {
+        if (shape) {
+            this.executeShapeManagerCommand(new RemoveShape(shape));
+        }
+    }
+
+    getShapes(point: Point): Iterable<AbstractShape> {
+        return this.dependencies.shapeSearcher.getShapes(point);
+    }
+
+    getAllShapesInZone(bound: Rect): Iterable<AbstractShape> {
+        return this.dependencies.shapeSearcher.getAllShapesInZone(bound);
+    }
+
+    getWindowBound(): Rect {
+        throw new Error("Method not implemented.");
+    }
+
+    getInteractionPoint(pointPx: Point): InteractionPoint | null {
+        throw new Error("Method not implemented.");
+    }
+
+    updateInteractionBounds(): void {
+        throw new Error("Method not implemented.");
+    }
+
+    isPointInInteractionBounds(point: Point): boolean {
+        throw new Error("Method not implemented.");
+    }
+
+    setSelectionBound(bound: Rect | null): void {
+        throw new Error("Method not implemented.");
+    }
+
+    get selectedShapesFlow(): Flow<Set<AbstractShape>> {
+        return this.dependencies.selectedShapeManager.selectedShapesFlow;
+    }
+
+    getSelectedShapes(): Set<AbstractShape> {
+        return this.dependencies.selectedShapeManager.selectedShapes;
+    }
+
+    addSelectedShape(shape: AbstractShape | null): void {
+        if (shape) {
+            this.dependencies.selectedShapeManager.addSelectedShape(shape);
+        }
+    }
+
+    toggleShapeSelection(shape: AbstractShape): void {
+        this.dependencies.selectedShapeManager.toggleSelection(shape);
+    }
+
+    setFocusingShape(shape: AbstractShape | null, focusType: ShapeFocusType): void {
+        this.dependencies.selectedShapeManager.setFocusingShape(shape, focusType);
+    }
+
+    getFocusingShape(): FocusingShape | null {
+        return this.dependencies.selectedShapeManager.focusingShape;
+    }
+
+    selectAllShapes(): void {
+        throw new Error("Method not implemented.");
+    }
+
+    clearSelectedShapes(): void {
+        this.dependencies.selectedShapeManager.clearSelectedShapes();
+    }
+
+    getEdgeDirection(point: Point): Direction | null {
+        return this.dependencies.shapeSearcher.getEdgeDirection(point);
+    }
+
+    toXPx(column: number): number {
+        return this.dependencies.workspace.getDrawingInfo().toXPx(column);
+    }
+
+    toYPx(row: number): number {
+        return this.dependencies.workspace.getDrawingInfo().toYPx(row);
+    }
+
+    toWidthPx(width: number): number {
+        return this.dependencies.workspace.getDrawingInfo().toWidthPx(width);
+    }
+
+    toHeightPx(height: number): number {
+        return this.dependencies.workspace.getDrawingInfo().toHeightPx(height);
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/state-manager/one-time-action-handler.ts b/monosketch-svelte/src/lib/mono/state-manager/one-time-action-handler.ts
new file mode 100644
index 000000000..ea0f47b90
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/state-manager/one-time-action-handler.ts
@@ -0,0 +1,300 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Flow, LifecycleOwner } from "$libs/flow";
+import { singleOrNull } from "$libs/sequence";
+import type { OneTimeActionType } from "$mono/action-manager/one-time-actions";
+import type { MonoBitmapManager } from "$mono/monobitmap/manager/mono-bitmap-manager";
+import { ChangeExtra } from "$mono/shape/command/general-shape-commands";
+import { ChangeOrder, type ChangeOrderType } from "$mono/shape/command/shape-manager-commands";
+import { MakeTextEditable, UpdateTextEditingMode } from "$mono/shape/command/text-commands";
+import { ShapeExtraManager } from "$mono/shape/extra/extra-manager";
+import { TextAlign, type TextHorizontalAlign, TextVerticalAlign } from "$mono/shape/extra/style";
+import type { ShapeClipboardManager } from "$mono/shape/shape-clipboard-manager";
+import type { AbstractShape } from "$mono/shape/shape/abstract-shape";
+import type { Line } from "$mono/shape/shape/line";
+import { Text } from "$mono/shape/shape/text";
+import { ClipboardManager } from "$mono/state-manager/clipboard-manager";
+import type { CommandEnvironment } from "$mono/state-manager/command-environment";
+import { FileRelatedActionsHelper } from "$mono/state-manager/onetimeaction/file-related-action-helper";
+import type { StateHistoryManager } from "$mono/state-manager/state-history-manager";
+import type { WorkspaceDao } from "$mono/store-manager/dao/workspace-dao";
+import type { AppUiStateManager } from "$mono/ui-state-manager/app-ui-state-manager";
+
+/**
+ * A class to handle one time actions.
+ */
+export class OneTimeActionHandler {
+    private readonly fileRelatedActionsHelper: FileRelatedActionsHelper;
+    private readonly clipboardManager: ClipboardManager;
+
+    constructor(
+        private readonly environment: CommandEnvironment,
+        private readonly bitmapManager: MonoBitmapManager,
+        private readonly shapeClipboardManager: ShapeClipboardManager,
+        private readonly stateHistoryManager: StateHistoryManager,
+        private readonly uiStateManger: AppUiStateManager,
+        private readonly workspaceDao: WorkspaceDao,
+    ) {
+        this.fileRelatedActionsHelper = new FileRelatedActionsHelper(
+            environment,
+            bitmapManager,
+            shapeClipboardManager,
+            workspaceDao,
+        );
+        this.clipboardManager = new ClipboardManager(environment, shapeClipboardManager);
+    }
+
+    observe(lifecycleOwner: LifecycleOwner, oneTimeActionFlow: Flow<OneTimeActionType>) {
+        oneTimeActionFlow.observe(lifecycleOwner, (action) => {
+            switch (action.type) {
+                case "Idle":
+                    break;
+
+                case "RenameCurrentProject":
+                case "NewProject":
+                case "ExportSelectedShapes":
+                case "SwitchProject":
+                case "RemoveProject":
+                case "SaveShapesAs":
+                case "OpenShapes":
+                    this.fileRelatedActionsHelper.handleProjectAction(action);
+                    break;
+
+                // ---------
+                case "CopyText":
+                    this.fileRelatedActionsHelper.exportSelectedShapes(false);
+                    break;
+                // ---------
+                case "SelectAllShapes":
+                    this.environment.selectAllShapes();
+                    break;
+
+                case "DeselectShapes":
+                    this.environment.clearSelectedShapes();
+                    break;
+
+                case "DeleteSelectedShapes":
+                    this.deleteSelectedShapes();
+                    break;
+
+                case "EditSelectedShapes":
+                    this.editSelectedShape(singleOrNull(this.environment.getSelectedShapes()));
+                    break;
+
+                case "EditSelectedShape":
+                    this.editSelectedShape(action.shape);
+                    break;
+
+                case "TextAlignment":
+                    this.setTextAlignment(action.newHorizontalAlign, action.newVerticalAlign);
+                    break;
+                // ---------
+                case "MoveShapes":
+                    this.moveSelectedShapes(action.offsetRow, action.offsetCol);
+                    break;
+
+                case "ChangeShapeBound":
+                    this.setSelectedShapeBound(action.newLeft, action.newTop, action.newWidth, action.newHeight);
+                    break;
+                // ---------
+                case "ChangeShapeFillExtra":
+                    this.setSelectedShapeFillExtra(action.isEnabled, action.newFillStyleId);
+                    break;
+
+                case "ChangeShapeBorderExtra":
+                    this.setSelectedShapeBorderExtra(action.isEnabled, action.newBorderStyleId);
+                    break;
+
+                case "ChangeShapeBorderDashPatternExtra":
+                    this.setSelectedShapeBorderDashPatternExtra(action.dash, action.gap, action.offset);
+                    break;
+
+                case "ChangeShapeBorderCornerExtra":
+                    this.setSelectedShapeBorderCornerExtra(action.isRoundedCorner);
+                    break;
+
+                case "ChangeLineStrokeExtra":
+                    this.setSelectedLineStrokeExtra(action.isEnabled, action.newStrokeStyleId);
+                    break;
+
+                case "ChangeLineStrokeDashPatternExtra":
+                    this.setSelectedLineStrokeDashPattern(action.dash, action.gap, action.offset);
+                    break;
+
+                case "ChangeLineStrokeCornerExtra":
+                    this.setSelectedLineStrokeCornerExtra(action.isRoundedCorner);
+                    break;
+
+                case "ChangeLineStartAnchorExtra":
+                    this.setSelectedShapeStartAnchorExtra(action.isEnabled, action.newHeadId);
+                    break;
+
+                case "ChangeLineEndAnchorExtra":
+                    this.setSelectedShapeEndAnchorExtra(action.isEnabled, action.newHeadId);
+                    break;
+                // ---------
+                case "ReorderShape":
+                    this.changeShapeOrder(action.orderType);
+                    break;
+                // ---------
+                case "Copy":
+                    this.clipboardManager.copySelectedShapes(action.isRemoveRequired);
+                    break;
+
+                case "Duplicate":
+                    this.clipboardManager.duplicateSelectedShapes();
+                    break;
+                // ---------
+                case "Undo":
+                    this.stateHistoryManager.undo();
+                    break;
+
+                case "Redo":
+                    this.stateHistoryManager.redo();
+                    break;
+            }
+        });
+    }
+
+    private deleteSelectedShapes() {
+        const environment = this.environment;
+        for (const shape of environment.getSelectedShapes()) {
+            environment.removeShape(shape);
+            // TODO: Add removeConnectorsOfShape() to CommandEnvironment
+            environment.shapeManager.shapeConnector.removeShape(shape);
+        }
+        environment.clearSelectedShapes();
+    }
+
+    private editSelectedShape(shape: AbstractShape | null) {
+        if (shape instanceof Text) {
+            this.environment.enterEditingMode();
+            const oldText = shape.text;
+            this.environment.shapeManager.execute(new MakeTextEditable(shape));
+            this.environment.shapeManager.execute(new UpdateTextEditingMode(shape, true));
+
+            console.log("Edit text shape", oldText);
+            // TODO: Uncomment this code after implementing EditTextShapeHelper
+            // EditTextShapeHelper.showEditTextDialog(this.environment, shape, false, () => {
+            //     this.environment.shapeManager.execute(new UpdateTextEditingMode(shape, false));
+            //     this.environment.exitEditingMode(oldText !== shape.text);
+            // });
+        }
+    }
+
+    private setTextAlignment(newHorizontalAlign: TextHorizontalAlign, newVerticalAlign: TextVerticalAlign) {
+        const textShape = this.singleSelectedShape() as Text | null;
+        if (textShape === null) {
+            ShapeExtraManager.setDefaultValues({
+                textHorizontalAlign: newHorizontalAlign,
+                textVerticalAlign: newVerticalAlign,
+            });
+            return;
+        }
+        const extra = textShape.extra;
+        const newTextAlign = new TextAlign(
+            newHorizontalAlign ?? extra.textAlign.horizontalAlign,
+            newVerticalAlign ?? extra.textAlign.verticalAlign,
+        );
+        const newExtra = extra.copy({ textAlign: newTextAlign });
+        this.environment.shapeManager.execute(new ChangeExtra(textShape, newExtra));
+    }
+
+    private moveSelectedShapes(offsetRow: number, offsetCol: number) {
+
+    }
+
+    private setSelectedShapeBound(newLeft: number, newTop: number, newWidth: number, newHeight: number) {
+
+    }
+
+    private setSelectedShapeFillExtra(isEnabled: boolean, newFillStyleId: string | null) {
+
+    }
+
+    private setSelectedShapeBorderExtra(isEnabled: boolean, newBorderStyleId: string | null) {
+
+    }
+
+    private setSelectedShapeBorderDashPatternExtra(dash: number, gap: number, offset: number) {
+
+    }
+
+    private setSelectedShapeBorderCornerExtra(isRoundedCorner: boolean) {
+
+    }
+
+    private setSelectedLineStrokeExtra(isEnabled: boolean, newStrokeStyleId: string | null) {
+
+    }
+
+    private setSelectedLineStrokeDashPattern(dash: number, gap: number, offset: number) {
+
+    }
+
+    private setSelectedLineStrokeCornerExtra(isRoundedCorner: boolean) {
+        const line = this.singleSelectedShape() as Line | null;
+        if (line === null) {
+            ShapeExtraManager.setDefaultValues({ isLineStrokeRoundedCorner: isRoundedCorner });
+            return;
+        }
+        const currentExtra = line.extra;
+        const newExtra = currentExtra.copy({ isRoundedCorner: isRoundedCorner });
+        this.environment.shapeManager.execute(new ChangeExtra(line, newExtra));
+    }
+
+    private setSelectedShapeStartAnchorExtra(isEnabled: boolean, newHeadId: string | null) {
+        const line = this.singleSelectedShape() as Line | null;
+        if (line === null) {
+            ShapeExtraManager.setDefaultValues({
+                isStartHeadAnchorCharEnabled: isEnabled,
+                startHeadAnchorCharId: newHeadId ?? undefined,
+            });
+            return;
+        }
+        const currentExtra = line.extra;
+        const newAnchor = ShapeExtraManager.getStartHeadAnchorChar(
+            newHeadId ?? undefined,
+            currentExtra.userSelectedEndAnchor,
+        );
+        const newExtra = currentExtra.copy({
+            isStartAnchorEnabled: isEnabled ?? currentExtra.isEndAnchorEnabled,
+            userSelectedStartAnchor: newAnchor,
+        });
+        this.environment.shapeManager.execute(new ChangeExtra(line, newExtra));
+    }
+
+    private setSelectedShapeEndAnchorExtra(isEnabled: boolean, newHeadId: string | null) {
+        const line = this.singleSelectedShape() as Line | null;
+        if (line === null) {
+            ShapeExtraManager.setDefaultValues({
+                isEndHeadAnchorCharEnabled: isEnabled,
+                endHeadAnchorCharId: newHeadId ?? undefined,
+            });
+            return;
+        }
+        const currentExtra = line.extra;
+        const newAnchor = ShapeExtraManager.getEndHeadAnchorChar(
+            newHeadId ?? undefined,
+            currentExtra.userSelectedEndAnchor,
+        );
+        const newExtra = currentExtra.copy({
+            isEndAnchorEnabled: isEnabled ?? currentExtra.isEndAnchorEnabled,
+            userSelectedEndAnchor: newAnchor,
+        });
+        this.environment.shapeManager.execute(new ChangeExtra(line, newExtra));
+    }
+
+    private changeShapeOrder(orderType: ChangeOrderType) {
+        const singleSelectedShape = this.singleSelectedShape();
+        if (singleSelectedShape !== null) {
+            this.environment.shapeManager.execute(new ChangeOrder(singleSelectedShape, orderType));
+        }
+    }
+
+    private singleSelectedShape(): AbstractShape | null {
+        return singleOrNull(this.environment.getSelectedShapes());
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/state-manager/onetimeaction/file-mediator.ts b/monosketch-svelte/src/lib/mono/state-manager/onetimeaction/file-mediator.ts
new file mode 100644
index 000000000..d25015246
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/state-manager/onetimeaction/file-mediator.ts
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+/**
+ * A mediator class for file interactions.
+ */
+export class FileMediator {
+    saveFile(filename: string, jsonString: string) {
+        const fileBlob = new Blob([jsonString]);
+        const node = document.createElement('a');
+        node.href = URL.createObjectURL(fileBlob);
+        node.setAttribute('download', `${filename}.${FileMediator.EXTENSION}`);
+        node.style.display = 'none';
+        document.body.appendChild(node);
+        node.click();
+        document.body.removeChild(node);
+    }
+
+    openFile(onFileLoadedAction: (content: string) => void) {
+        const fileInput = document.createElement('input');
+        fileInput.type = 'file';
+        fileInput.accept = `.${FileMediator.EXTENSION}`;
+        fileInput.style.display = 'none';
+        fileInput.onchange = () => {
+            this.readFile(fileInput.files, onFileLoadedAction);
+            document.body.removeChild(fileInput);
+        };
+        document.body.appendChild(fileInput);
+        fileInput.click();
+    }
+
+    private readFile(fileList: FileList | null, onFileLoadedAction: (content: string) => void) {
+        const selectedFile = fileList?.[0];
+        if (!selectedFile) return;
+
+        const reader = new FileReader();
+        reader.onload = () => {
+            const text = reader.result as string;
+            onFileLoadedAction(text);
+        };
+        reader.readAsText(selectedFile);
+    }
+
+    private static readonly EXTENSION = 'mono';
+}
diff --git a/monosketch-svelte/src/lib/mono/state-manager/onetimeaction/file-related-action-helper.ts b/monosketch-svelte/src/lib/mono/state-manager/onetimeaction/file-related-action-helper.ts
new file mode 100644
index 000000000..63f8dc20f
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/state-manager/onetimeaction/file-related-action-helper.ts
@@ -0,0 +1,176 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import type { ProjectActionType } from "$mono/action-manager/one-time-actions";
+import { Extra, MonoFile } from "$mono/file/mono-file";
+import { ShapeSerializationUtil } from "$mono/file/shape-serialization-util";
+import type { MonoBitmapManager } from "$mono/monobitmap/manager/mono-bitmap-manager";
+import { ShapeConnector } from "$mono/shape/connector/shape-connector";
+import type { ShapeClipboardManager } from "$mono/shape/shape-clipboard-manager";
+import { Group, RootGroup } from "$mono/shape/shape/group";
+import type { CommandEnvironment } from "$mono/state-manager/command-environment";
+import { ExportShapesHelper } from "$mono/state-manager/export/export-shapes-helper";
+import { FileMediator } from "$mono/state-manager/onetimeaction/file-mediator";
+import type { WorkspaceDao } from "$mono/store-manager/dao/workspace-dao";
+import { DEFAULT_NAME } from "$mono/store-manager/dao/workspace-object-dao";
+import { AlertDialog } from "$ui/modal/common/AlertDialog";
+
+/**
+ * A helper class to handle file-related one-time actions in the application.
+ * This class provides methods such as creating new projects, saving and loading shapes to/from
+ * files, exporting selected shapes to text format, etc.
+ */
+export class FileRelatedActionsHelper {
+    private readonly fileMediator: FileMediator = new FileMediator();
+
+    private exportShapesHelper: ExportShapesHelper;
+
+    constructor(
+        private environment: CommandEnvironment,
+        bitmapManager: MonoBitmapManager,
+        shapeClipboardManager: ShapeClipboardManager,
+        private workspaceDao: WorkspaceDao,
+    ) {
+        this.exportShapesHelper = new ExportShapesHelper(
+            (shape) => bitmapManager.getBitmap(shape),
+            shapeClipboardManager.setClipboardText.bind(shapeClipboardManager),
+        );
+    }
+
+    handleProjectAction(projectAction: ProjectActionType) {
+        switch (projectAction.type) {
+            case "NewProject":
+                this.newProject();
+                break;
+            case "SwitchProject":
+                this.switchProject(projectAction.projectId);
+                break;
+            case "RemoveProject":
+                this.removeProject(projectAction.projectId);
+                break;
+            case "RenameCurrentProject":
+                this.renameProject(projectAction.newName);
+                break;
+            case "SaveShapesAs":
+                this.saveCurrentShapesToFile();
+                break;
+            case "OpenShapes":
+                this.loadShapesFromFile();
+                break;
+            case "ExportSelectedShapes":
+                this.exportSelectedShapes(true);
+                break;
+        }
+    }
+
+    private newProject() {
+        this.replaceWorkspace(RootGroup(null));
+    }
+
+    private switchProject(projectId: string) {
+        const serializableRoot = this.workspaceDao.getObject(projectId).rootGroup;
+        if (serializableRoot) {
+            this.replaceWorkspace(RootGroup(serializableRoot));
+        }
+    }
+
+    private removeProject(projectId: string) {
+        const currentProjectId = this.environment.shapeManager.root.id;
+        this.workspaceDao.getObject(projectId).removeSelf();
+        if (projectId !== currentProjectId) {
+            return;
+        }
+        const nextProject = this.workspaceDao.getObjects().find(obj => obj.objectId !== currentProjectId);
+        if (nextProject) {
+            this.switchProject(nextProject.objectId);
+        } else {
+            this.newProject();
+        }
+    }
+
+    private renameProject(newName: string) {
+        this.workspaceDao.getObject(this.environment.shapeManager.root.id).name = newName;
+        this.environment.shapeManager.notifyProjectUpdate();
+    }
+
+    private saveCurrentShapesToFile() {
+        const currentRoot = this.environment.shapeManager.root;
+        const objectDao = this.workspaceDao.getObject(currentRoot.id);
+        const name = objectDao.name;
+        const offset = objectDao.offset;
+        const monoFile = MonoFile.create(
+            currentRoot.toSerializableShape(true),
+            this.environment.shapeManager.shapeConnector.toSerializable(),
+            Extra.create(name, offset),
+        );
+        const jsonString = ShapeSerializationUtil.toMonoFileJson(monoFile);
+        this.fileMediator.saveFile(name, jsonString);
+    }
+
+    private loadShapesFromFile() {
+        this.fileMediator.openFile(jsonString => {
+            const monoFile = ShapeSerializationUtil.fromMonoFileJson(jsonString);
+            if (monoFile) {
+                this.applyMonoFileToWorkspace(monoFile);
+            } else {
+                console.warn("Failed to load shapes from file.");
+                // TODO: Show error dialog
+            }
+        });
+    }
+
+    private applyMonoFileToWorkspace(monoFile: MonoFile) {
+        const rootGroup = RootGroup(monoFile.root);
+        const existingProject = this.workspaceDao.getObject(rootGroup.id);
+        if (existingProject.rootGroup) {
+            AlertDialog(
+                {
+                    title: "Project already exists",
+                    message: `A project with the same ID already exists. Do you want to replace it?
+ - ${existingProject.name}
+ - Last edited: ${new Date(existingProject.lastModifiedTimestampMillis).toLocaleString()}`,
+                    primaryAction: {
+                        text: "Replace",
+                        onClick: () => {
+                            this.prepareAndApplyNewRoot(rootGroup, monoFile.extra);
+                        },
+                    },
+                    secondaryAction: {
+                        text: "Keep both",
+                        onClick: () => {
+                            this.prepareAndApplyNewRoot(RootGroup(monoFile.root.copy({ isIdTemporary: true })), monoFile.extra);
+                        },
+                    },
+                },
+            );
+        } else {
+            this.prepareAndApplyNewRoot(rootGroup, monoFile.extra);
+        }
+    }
+
+    private prepareAndApplyNewRoot(rootGroup: Group, extra: Extra) {
+        const objectDao = this.workspaceDao.getObject(rootGroup.id);
+        objectDao.name = extra.name || DEFAULT_NAME;
+        objectDao.offset = extra.offset;
+        this.replaceWorkspace(rootGroup);
+    }
+
+    exportSelectedShapes(isModalRequired: boolean) {
+        this.exportShapesHelper.exportText(this.createExtractableShapes(isModalRequired), isModalRequired);
+    }
+
+    private createExtractableShapes(isModalRequired: boolean) {
+        const selectedShapes = this.environment.getSelectedShapes();
+        if (selectedShapes.size === 0) {
+            return isModalRequired ? [this.environment.workingParentGroup] : [];
+        }
+        return Array.from(this.environment.workingParentGroup.items).filter(item => selectedShapes.has(item));
+    }
+
+    private replaceWorkspace(rootGroup: Group) {
+        // TODO: load from storage
+        const shapeConnector = new ShapeConnector();
+        this.environment.replaceRoot(rootGroup, shapeConnector);
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/state-manager/state-history-manager.ts b/monosketch-svelte/src/lib/mono/state-manager/state-history-manager.ts
new file mode 100644
index 000000000..16e4be11e
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/state-manager/state-history-manager.ts
@@ -0,0 +1,176 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import type { Workspace } from "$app/workspace";
+import { LifecycleOwner } from "$libs/flow";
+import { Flow } from '$libs/flow/flow';
+import { getOrNull } from "$libs/sequence";
+import { DEBUG_MODE } from "$mono/build_environment";
+import { ShapeConnector } from '$mono/shape/connector/shape-connector';
+import type { SerializableLineConnector } from "$mono/shape/serialization/connector";
+import type { SerializableGroup } from "$mono/shape/serialization/shapes";
+import { RootGroup } from "$mono/shape/shape/group";
+import type { CommandEnvironment } from "$mono/state-manager/command-environment";
+import type { WorkspaceDao } from "$mono/store-manager/dao/workspace-dao";
+import type { WorkspaceObjectDao } from "$mono/store-manager/dao/workspace-object-dao";
+import { UUID } from "$mono/uuid";
+
+/**
+ * A class which manages state history of the shapes.
+ */
+export class StateHistoryManager {
+    private historyStack = new HistoryStack();
+
+    constructor(
+        private environment: CommandEnvironment,
+        private workspace: Workspace,
+        private workspaceDao: WorkspaceDao,
+    ) {
+    }
+
+    /**
+     * Restores of the object with [rootId].
+     * If [rootId] is empty, the last opened object is used. In case of there is no objects in the
+     * database, a new ID is generated with [UUID.generate].
+     *
+     * If [rootId] is not in the database, a new object will be created and use [rootId] as the id
+     * of the root shape.
+     */
+    restoreState(rootId: string) {
+        const objectDao = this.getObjectDaoById(rootId);
+        this.restoreShapes(objectDao);
+        this.workspace.setDrawingOffset(objectDao.offset);
+    }
+
+    observeStateChange(lifecycleOwner: LifecycleOwner) {
+        const versionCodeWIthEditingModeFlow = Flow.combine2(
+            // TODO: Add versionFlow to environment.
+            this.environment.shapeManager.versionFlow,
+            this.environment.editingModeFlow,
+            (versionCode, editingMode) => ({ versionCode, editingMode }),
+        );
+        versionCodeWIthEditingModeFlow.observe(lifecycleOwner, ({ versionCode, editingMode }) => {
+            if (!editingMode.isEditing && versionCode !== editingMode.skippedVersion) {
+                this.registerBackupShapes(versionCode);
+            }
+        });
+    }
+
+    /**
+     * Gets the [WorkspaceObjectDao] with [rootId].
+     * If [rootId] is not empty, the object with [rootId] is returned even if it is not in the
+     * database.
+     * If [rootId] is empty, the last opened object is used. In case of there is no objects in the
+     * database, a new ID is generated with [UUID.generate].
+     */
+    private getObjectDaoById(rootId: string): WorkspaceObjectDao {
+        if (rootId) {
+            return this.workspaceDao.getObject(rootId);
+        }
+
+        return getOrNull(this.workspaceDao.getObjects(), 0) || this.workspaceDao.getObject(UUID.generate());
+    }
+
+    clear() {
+        this.historyStack.clear();
+    }
+
+    undo() {
+        this.historyStack.undo()?.apply(this.environment);
+    }
+
+    redo() {
+        this.historyStack.redo()?.apply(this.environment);
+    }
+
+    private registerBackupShapes(version: number) {
+        setTimeout(() => {
+            // Only backup if the shape manager is idle.
+            if (this.environment.shapeManager.versionFlow.value === version) {
+                this.backupShapes();
+            }
+        }, 300);
+    }
+
+    private backupShapes() {
+        const root = this.environment.currentRootGroup;
+        const serializableGroup = root.toSerializableShape(true);
+        // TODO: Add connectors to environment.
+        const shapeConnector = this.environment.shapeManager.shapeConnector;
+        const serializableLineConnectors = shapeConnector.toSerializable();
+
+        this.historyStack.pushState(
+            root.versionCode,
+            serializableGroup,
+            serializableLineConnectors,
+        );
+
+        const objectDao = this.workspaceDao.getObject(root.id);
+        objectDao.rootGroup = serializableGroup;
+        objectDao.connectors = serializableLineConnectors;
+    }
+
+    private restoreShapes(objectDao: WorkspaceObjectDao) {
+        const serializableGroup = objectDao.rootGroup;
+        const rootGroup = serializableGroup ? RootGroup(serializableGroup) : RootGroup(objectDao.objectId);
+        const shapeConnector = ShapeConnector.fromSerializable(objectDao.connectors);
+        this.environment.replaceRoot(rootGroup, shapeConnector);
+    }
+}
+
+class HistoryStack {
+    private undoStack: History[] = [];
+    private redoStack: History[] = [];
+
+    pushState(version: number, state: SerializableGroup, connectors: SerializableLineConnector[]) {
+        if (version === this.undoStack[this.undoStack.length - 1]?.versionCode) {
+            return;
+        }
+        this.undoStack.push(new History(version, state, connectors));
+        this.redoStack = [];
+
+        if (DEBUG_MODE) {
+            console.log(`Push history stack ${this.undoStack.map((it) => it.versionCode)}`);
+        }
+    }
+
+    clear() {
+        this.undoStack = [];
+        this.redoStack = [];
+    }
+
+    undo(): History | undefined {
+        if (this.undoStack.length <= 1) {
+            return undefined;
+        }
+        const currentState = this.undoStack.pop();
+        if (currentState) {
+            this.redoStack.push(currentState);
+        }
+        return this.undoStack[this.undoStack.length - 1];
+    }
+
+    redo(): History | undefined {
+        const currentState = this.redoStack.pop();
+        if (currentState) {
+            this.undoStack.push(currentState);
+        }
+        return currentState;
+    }
+}
+
+class History {
+    constructor(
+        public versionCode: number,
+        public serializableGroup: SerializableGroup,
+        public connectors: SerializableLineConnector[],
+    ) {
+    }
+
+    apply(environment: CommandEnvironment) {
+        const root = RootGroup(this.serializableGroup);
+        const shapeConnector = ShapeConnector.fromSerializable(this.connectors);
+        environment.replaceRoot(root, shapeConnector);
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/store-manager/consts.ts b/monosketch-svelte/src/lib/mono/store-manager/consts.ts
new file mode 100644
index 000000000..7618242cd
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/store-manager/consts.ts
@@ -0,0 +1,29 @@
+export const DB_VERSION = 2;
+
+/**
+ * An object to gather all store keys to avoid conflict.
+ */
+export const StoreKeys = {
+    DB_VERSION: 'DB_VERSION',
+
+    SETTINGS: 'settings',
+    THEME_MODE: 'theme-mode',
+    FONT_SIZE: 'font-size',
+
+    WORKSPACE: 'workspace',
+    LAST_MODIFIED_PROJECT_ID: 'last-open', // last opened object id
+    LAST_MODIFIED_TIME: 'last-modified', // last modified timestamp of the workspace
+
+    OBJECT_NAME: 'name',
+    OBJECT_CONTENT: 'content',
+    OBJECT_CONNECTORS: 'connectors',
+    OBJECT_OFFSET: 'offset',
+    OBJECT_LAST_MODIFIED: 'last-modified',
+    OBJECT_LAST_OPENED: 'last-opened',
+
+    PATH_SEPARATOR: '/',
+
+    getPath(parent: string, key: string): string {
+        return parent ? `${parent}${this.PATH_SEPARATOR}${key}` : key;
+    },
+};
diff --git a/monosketch-svelte/src/lib/mono/store-manager/dao/workspace-dao.ts b/monosketch-svelte/src/lib/mono/store-manager/dao/workspace-dao.ts
new file mode 100644
index 000000000..f62986173
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/store-manager/dao/workspace-dao.ts
@@ -0,0 +1,71 @@
+import { Flow } from "$libs/flow";
+import { StorageDocument, StoreKeys } from "$mono/store-manager";
+import { WorkspaceObjectDao } from "$mono/store-manager/dao/workspace-object-dao";
+
+/**
+ * A dao for workspace
+ */
+export class WorkspaceDao {
+    private static _instance: WorkspaceDao | null = null;
+
+    private readonly workspaceDocument: StorageDocument;
+    private objectDaos: Map<string, WorkspaceObjectDao>;
+
+    private workspaceUpdateMutableFlow: Flow<string> = new Flow('');
+    workspaceUpdateFlow: Flow<string> = this.workspaceUpdateMutableFlow.immutable();
+
+    private constructor(workspaceDocument: StorageDocument) {
+        this.workspaceDocument = workspaceDocument;
+        this.objectDaos = new Map<string, WorkspaceObjectDao>();
+
+        workspaceDocument.setObserver(StoreKeys.LAST_MODIFIED_TIME, () => {
+            this.workspaceUpdateMutableFlow.value = this.lastOpenedObjectId ?? '';
+        });
+    }
+
+    // Accessor property for lastOpenedObjectId
+    get lastOpenedObjectId(): string | null {
+        return this.workspaceDocument.get(StoreKeys.LAST_MODIFIED_PROJECT_ID);
+    }
+
+    set lastOpenedObjectId(value: string | null) {
+        if (value !== null) {
+            this.workspaceDocument.set(StoreKeys.LAST_MODIFIED_PROJECT_ID, value);
+        }
+    }
+
+    getObject(objectId: string): WorkspaceObjectDao {
+        if (!this.objectDaos.has(objectId)) {
+            const objectDao = new WorkspaceObjectDao(objectId, this.workspaceDocument);
+            this.objectDaos.set(objectId, objectDao);
+        }
+        return this.objectDaos.get(objectId)!;
+    }
+
+    removeObject(objectId: string): void {
+        const objectDao = this.getObject(objectId);
+        objectDao.removeSelf();
+        // TODO:
+        //  If the object is currently open, choose a latest opened object and make it active.
+        //  If no object left, create a blank workspace.
+        this.objectDaos.delete(objectId);
+    }
+
+    // Gets list of all objects in the storage, ordered by last opened time desc.
+    getObjects(): WorkspaceObjectDao[] {
+        return Array.from(this.workspaceDocument.getKeys(key =>
+            key.startsWith(StoreKeys.WORKSPACE + StoreKeys.PATH_SEPARATOR) &&
+            key.endsWith(StoreKeys.PATH_SEPARATOR + StoreKeys.OBJECT_CONTENT),
+        ))
+            .map(key => this.getObject(key.split(StoreKeys.PATH_SEPARATOR)[1]))
+            .sort((a, b) => b.lastOpened - a.lastOpened); // Assuming lastOpened is a numeric timestamp
+    }
+
+    // Singleton instance accessor
+    static get instance(): WorkspaceDao {
+        if (!WorkspaceDao._instance) {
+            WorkspaceDao._instance = new WorkspaceDao(StorageDocument.get(StoreKeys.WORKSPACE));
+        }
+        return WorkspaceDao._instance;
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/store-manager/dao/workspace-object-dao.ts b/monosketch-svelte/src/lib/mono/store-manager/dao/workspace-object-dao.ts
new file mode 100644
index 000000000..2685a3079
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/store-manager/dao/workspace-object-dao.ts
@@ -0,0 +1,113 @@
+import { Point } from "$libs/graphics-geo/point";
+import { SerializableLineConnector } from "$mono/shape/serialization/connector";
+import { SerializableGroup } from "$mono/shape/serialization/shapes";
+import { StorageDocument, StoreKeys } from "$mono/store-manager";
+
+/**
+ * A dao for an object (aka project or file) in the workspace.
+ */
+export class WorkspaceObjectDao {
+    private objectDocument: StorageDocument;
+
+    constructor(public objectId: string, private workspaceDocument: StorageDocument) {
+        this.objectDocument = workspaceDocument.childDocument(objectId);
+    }
+
+    get offset(): Point {
+        const storedValue = this.objectDocument.get(StoreKeys.OBJECT_OFFSET);
+        if (storedValue === null) {
+            return Point.ZERO;
+        }
+        const [left, top] = storedValue.split(',').map(parseFloat);
+        if (isNaN(left) || isNaN(top)) {
+            return Point.ZERO;
+        }
+        return Point.of(left, top);
+    }
+
+    set offset(value: Point) {
+        this.objectDocument.set(StoreKeys.OBJECT_OFFSET, `${value.left},${value.top}`);
+    }
+
+    get rootGroup(): SerializableGroup | null {
+        const storedValue = this.objectDocument.get(StoreKeys.OBJECT_CONTENT);
+        if (storedValue === null) {
+            return null;
+        }
+        // @ts-expect-error fromJson
+        return SerializableGroup.fromJson(JSON.parse(storedValue));
+    }
+
+    set rootGroup(value: SerializableGroup | null) {
+        if (value !== null) {
+            // @ts-expect-error toJson
+            const json = value.toJson();
+            this.objectDocument.set(StoreKeys.OBJECT_CONTENT, JSON.stringify(json));
+        }
+        this.lastModifiedTimestampMillis = Date.now();
+    }
+
+    get connectors(): SerializableLineConnector[] {
+        const storedValue = this.objectDocument.get(StoreKeys.OBJECT_CONNECTORS);
+        if (storedValue === null) {
+            return [];
+        }
+        const jsonArray = JSON.parse(storedValue);
+        // @ts-expect-error fromJson
+        return jsonArray.map((json) => SerializableLineConnector.fromJson(json));
+    }
+
+    set connectors(value: SerializableLineConnector[]) {
+        // @ts-expect-error toJson
+        const jsonArray = value.map(connector => connector.toJson());
+        this.objectDocument.set(StoreKeys.OBJECT_CONNECTORS, JSON.stringify(jsonArray));
+        this.lastModifiedTimestampMillis = Date.now();
+    }
+
+    get name(): string {
+        return this.objectDocument.get(StoreKeys.OBJECT_NAME) ?? DEFAULT_NAME;
+    }
+
+    set name(value: string) {
+        this.objectDocument.set(StoreKeys.OBJECT_NAME, value);
+        this.lastModifiedTimestampMillis = Date.now();
+    }
+
+    get lastModifiedTimestampMillis(): number {
+        const storedValue = this.objectDocument.get(StoreKeys.OBJECT_LAST_MODIFIED);
+        if (storedValue === null) {
+            return Date.now();
+        }
+        return parseFloat(storedValue);
+    }
+
+    set lastModifiedTimestampMillis(value: number) {
+        this.objectDocument.set(StoreKeys.OBJECT_LAST_MODIFIED, value.toString());
+        this.workspaceDocument.set(StoreKeys.LAST_MODIFIED_TIME, value.toString());
+        this.workspaceDocument.set(StoreKeys.LAST_MODIFIED_PROJECT_ID, this.objectId);
+    }
+
+    get lastOpened(): number {
+        const storedValue = this.objectDocument.get(StoreKeys.OBJECT_LAST_OPENED);
+        if (storedValue === null) {
+            return Date.now();
+        }
+        return parseFloat(storedValue);
+    }
+
+    removeSelf(): void {
+        const storeKeys = [
+            StoreKeys.OBJECT_OFFSET,
+            StoreKeys.OBJECT_CONTENT,
+            StoreKeys.OBJECT_CONNECTORS,
+            StoreKeys.OBJECT_NAME,
+            StoreKeys.OBJECT_LAST_MODIFIED,
+            StoreKeys.OBJECT_LAST_OPENED,
+        ];
+        for (const key of storeKeys) {
+            this.objectDocument.remove(key);
+        }
+    }
+}
+
+export const DEFAULT_NAME = "Undefined";
diff --git a/monosketch-svelte/src/lib/mono/store-manager/index.ts b/monosketch-svelte/src/lib/mono/store-manager/index.ts
new file mode 100644
index 000000000..f69683df4
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/store-manager/index.ts
@@ -0,0 +1,2 @@
+export { StoreManager, StorageDocument, type StoreObserver } from './store-manager';
+export { StoreKeys } from './consts';
diff --git a/monosketch-svelte/src/lib/mono/store-manager/migrations/interface.ts b/monosketch-svelte/src/lib/mono/store-manager/migrations/interface.ts
new file mode 100644
index 000000000..cb1a35205
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/store-manager/migrations/interface.ts
@@ -0,0 +1,19 @@
+import type { StoreManager } from '../store-manager';
+
+/**
+ * An interface for migrating local storage into [targetVersion]
+ */
+export abstract class Migration {
+    public targetVersion: number;
+
+    protected constructor(targetVersion: number) {
+        this.targetVersion = targetVersion;
+    }
+
+    /**
+     * Migrates storage to [targetVersion].
+     *
+     * Note: Inside [migrate], only use [storageManager] for get/set values
+     */
+    public abstract migrate(storageManager: StoreManager): void;
+}
diff --git a/monosketch-svelte/src/lib/mono/store-manager/migrations/migrate2.ts b/monosketch-svelte/src/lib/mono/store-manager/migrations/migrate2.ts
new file mode 100644
index 000000000..8ec020b5d
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/store-manager/migrations/migrate2.ts
@@ -0,0 +1,83 @@
+import { ThemeMode } from "$mono/ui-state-manager/states";
+import type { Migration } from './interface';
+import type { StoreManager } from '../store-manager';
+import { StoreKeys } from '../consts';
+
+export const MigrateTo2: Migration = {
+    targetVersion: 2,
+    migrate: (storageManager: StoreManager): void => {
+        migrateSettings(storageManager);
+        migrateWorkspace(storageManager);
+    },
+};
+
+function migrateSettings(storageManager: StoreManager): void {
+    console.dir('migrate settings');
+    // Theme mode
+    migrateAndRemove(
+        storageManager,
+        'local-theme-mode',
+        StoreKeys.getPath(StoreKeys.SETTINGS, StoreKeys.THEME_MODE),
+        ThemeMode.LIGHT,
+    );
+}
+
+function migrateWorkspace(storageManager: StoreManager): void {
+    const lastOpenId = storageManager.get('last-open');
+    storageManager.remove('last-open');
+
+    const backupShapeKeyPrefix = 'backup-shapes:';
+    const shapeIds = storageManager
+        .getKeys((key) => key.startsWith(backupShapeKeyPrefix))
+        .map((key) => key.substring(backupShapeKeyPrefix.length));
+    for (const id of shapeIds) {
+        const objectKey = StoreKeys.getPath(StoreKeys.WORKSPACE, id);
+
+        migrateAndRemove(
+            storageManager,
+            `${backupShapeKeyPrefix}${id}`,
+            StoreKeys.getPath(objectKey, StoreKeys.OBJECT_CONTENT),
+        );
+
+        migrateAndRemove(
+            storageManager,
+            `offset:${id}`,
+            StoreKeys.getPath(objectKey, StoreKeys.OBJECT_OFFSET),
+            '0|0',
+        );
+
+        migrateAndRemove(
+            storageManager,
+            `name:${id}`,
+            StoreKeys.getPath(objectKey, StoreKeys.OBJECT_NAME),
+            'Undefined',
+        );
+
+        migrateAndRemove(
+            storageManager,
+            `last-modified:${id}`,
+            StoreKeys.getPath(objectKey, StoreKeys.OBJECT_LAST_MODIFIED),
+            '0',
+        );
+
+        migrateAndRemove(
+            storageManager,
+            `last-opened:${id}`,
+            StoreKeys.getPath(objectKey, StoreKeys.OBJECT_LAST_OPENED),
+            id === lastOpenId ? '1' : '0',
+        );
+    }
+}
+
+function migrateAndRemove(
+    storageManager: StoreManager,
+    oldKey: string,
+    newKey: string,
+    defaultValue?: string,
+): void {
+    const currentContent = storageManager.get(oldKey) ?? defaultValue;
+    if (currentContent) {
+        storageManager.set(newKey, currentContent);
+    }
+    storageManager.remove(oldKey);
+}
diff --git a/monosketch-svelte/src/lib/mono/store-manager/store-manager.ts b/monosketch-svelte/src/lib/mono/store-manager/store-manager.ts
new file mode 100644
index 000000000..b961e89a2
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/store-manager/store-manager.ts
@@ -0,0 +1,141 @@
+import { StoreKeys, DB_VERSION } from './consts';
+import type { Migration } from './migrations/interface';
+import { MigrateTo2 } from './migrations/migrate2';
+
+/**
+ * An interface for observing storage change.
+ */
+export type StoreObserver = (key: string, oldValue: string | null, newValue: string | null) => void
+
+/**
+ * A class for managing storage.
+ */
+export class StoreManager {
+    private static instance: StoreManager | null = null;
+
+    public static getInstance(): StoreManager {
+        if (!StoreManager.instance) {
+            StoreManager.instance = new StoreManager();
+        }
+        return StoreManager.instance;
+    }
+
+    private keyToObserverMap: { [key: string]: StoreObserver } = {};
+
+    private migrations: { [targetVersion: number]: Migration } = {
+        2: MigrateTo2,
+    };
+
+    private constructor() {
+        this.migrate();
+
+        window.onstorage = this.onStorageChange;
+    }
+
+    public getKeys(predicate: (key: string) => boolean): string[] {
+        const keys: string[] = [];
+        for (let index = 0; index < localStorage.length; index++) {
+            const key = localStorage.key(index);
+            if (key && predicate(key)) {
+                keys.push(key);
+            }
+        }
+        return keys;
+    }
+
+    private migrate(): void {
+        const currentDbVersion = parseInt(this.get(StoreKeys.DB_VERSION) ?? '1');
+        for (let version = currentDbVersion + 1; version <= DB_VERSION; version++) {
+            const migration = this.migrations[version];
+            if (migration) {
+                migration.migrate(this);
+            }
+        }
+        this.set(StoreKeys.DB_VERSION, DB_VERSION.toString());
+    }
+
+    public set(key: string, json: string): void {
+        localStorage.setItem(key, json);
+    }
+
+    public get(key: string): string | null {
+        return localStorage.getItem(key);
+    }
+
+    public remove(key: string): void {
+        localStorage.removeItem(key);
+    }
+
+    public setObserver(key: string, observer: StoreObserver): void {
+        if (this.keyToObserverMap[key]) {
+            throw new Error(`${key}'s observer is already set!`);
+        }
+        this.keyToObserverMap[key] = observer;
+    }
+
+    public removeObserver(key: string): void {
+        delete this.keyToObserverMap[key];
+    }
+
+    private onStorageChange = (event: StorageEvent) => {
+        const key = event.key;
+        if (key && this.keyToObserverMap[key]) {
+            this.keyToObserverMap[key](key, event.oldValue, event.newValue);
+        }
+    };
+}
+
+/**
+ * A storage document for a specific path.
+ * This helps the storage have a structure similar to a directory in the file system.
+ */
+export class StorageDocument {
+    public static get(path: string): StorageDocument {
+        return (
+            StorageDocument.documents[path] ??
+            (StorageDocument.documents[path] = new StorageDocument(
+                path,
+                StoreManager.getInstance(),
+            ))
+        );
+    }
+
+    private static documents: { [path: string]: StorageDocument } = {};
+
+    private constructor(
+        private readonly path: string,
+        private storeManager: StoreManager,
+    ) {}
+
+    private getFullPath(key: string): string {
+        return StoreKeys.getPath(this.path, key);
+    }
+
+    public childDocument(key: string): StorageDocument {
+        return StorageDocument.get(this.getFullPath(key));
+    }
+
+    public get(key: string, defaultValue: string | null = null): string | null {
+        return this.storeManager.get(this.getFullPath(key)) ?? defaultValue;
+    }
+
+    public set(key: string, value: string): void {
+        this.storeManager.set(this.getFullPath(key), value);
+    }
+
+    public remove(key: string): void {
+        this.storeManager.remove(this.getFullPath(key));
+    }
+
+    public setObserver(key: string, observer: StoreObserver): void {
+        this.storeManager.setObserver(this.getFullPath(key), observer);
+    }
+
+    public removeObserver(key: string): void {
+        this.storeManager.removeObserver(this.getFullPath(key));
+    }
+
+    public getKeys(predicate: (key: string) => boolean): string[] {
+        return this.storeManager.getKeys(predicate);
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/ui-state-manager/app-ui-state-manager.ts b/monosketch-svelte/src/lib/mono/ui-state-manager/app-ui-state-manager.ts
new file mode 100644
index 000000000..33cc9c988
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/ui-state-manager/app-ui-state-manager.ts
@@ -0,0 +1,87 @@
+import { DEBUG_MODE } from "$mono/build_environment";
+import { StorageDocument, StoreKeys } from "$mono/store-manager";
+import type { UiStatePayloadType } from "$mono/ui-state-manager/ui-state-payload";
+import { Flow, LifecycleOwner } from 'lib/libs/flow';
+import { ScrollMode, type ThemeColor, type ThemeMode } from '$mono/ui-state-manager/states';
+import { AppThemeManager } from '$mono/ui-state-manager/theme-manager';
+import { ScrollModeManager } from '$mono/ui-state-manager/scroll-mode-manager';
+import { PanelVisibilityManager } from '$mono/ui-state-manager/panel-visibility-manager';
+import { type KeyCommand, KeyCommandController } from '$mono/keycommand';
+
+/**
+ * A domain class for managing UI state of the app.
+ * This does not include the state of the workspace.
+ */
+export class AppUiStateManager {
+    private appThemeManager = new AppThemeManager();
+    private scrollModeManager = new ScrollModeManager();
+    private panelVisibilityManager = new PanelVisibilityManager();
+    private keyCommandController = new KeyCommandController(document.body);
+    private settingDocument: StorageDocument = StorageDocument.get(StoreKeys.SETTINGS);
+
+    themeModeFlow: Flow<ThemeMode> = this.appThemeManager.themeModeFlow;
+    scrollModeFlow: Flow<ScrollMode> = this.scrollModeManager.scrollModeFlow;
+    shapeFormatPanelVisibilityFlow: Flow<boolean> =
+        this.panelVisibilityManager.shapeFormatPanelVisibilityFlow;
+    keyCommandFlow: Flow<KeyCommand> = this.keyCommandController.keyCommandFlow;
+
+    private fontSizeMutableFlow = new Flow<number>(parseInt(this.settingDocument.get(StoreKeys.FONT_SIZE, "13")!));
+    fontSizeFlow: Flow<number> = this.fontSizeMutableFlow.distinctUntilChanged();
+
+    /**
+     * A flow that emits true when the font is ready to use.
+     */
+    private fontReadyMutableFlow = new Flow<boolean>(false);
+    fontReadyFlow: Flow<boolean> = this.fontReadyMutableFlow.immutable();
+
+    constructor(
+        private appLifecycleOwner: LifecycleOwner,
+    ) {
+        const workspaceFont = new FontFace(
+            'JetBrainsMono-Regular',
+            `url('/src/assets/fonts/JetBrainsMono-Regular.woff2')`,
+        );
+        workspaceFont.load().then(() => {
+            document.fonts.add(workspaceFont);
+            this.fontReadyMutableFlow.value = true;
+            if (DEBUG_MODE) {
+                console.log('Font loaded');
+            }
+        });
+    }
+
+    observeTheme = (): void => {
+        this.appThemeManager.observeTheme(this.appLifecycleOwner);
+    };
+
+    getThemedColorCode = (color: ThemeColor): string => {
+        return this.appThemeManager.getThemedColorCode(color);
+    };
+
+    updateUiState = (payload: UiStatePayloadType): void => {
+        switch (payload.type) {
+            case 'ShapeToolVisibility':
+                this.panelVisibilityManager.setShapeFormatPanelVisibility(payload.isVisible);
+                break;
+            case 'ChangeScrollMode':
+                this.scrollModeManager.setScrollMode(payload.scrollMode);
+                break;
+            case 'ChangeTheme':
+                this.appThemeManager.setTheme(payload.themeMode);
+                break;
+            case 'ChangeFontSize':
+                this.changeFontSize(payload.isIncreased);
+                break;
+        }
+    };
+
+    private changeFontSize = (isIncreased: boolean): void => {
+        const offset = isIncreased ? 2 : -2;
+        const currentFontSize = this.fontSizeMutableFlow.value!;
+        const newFontSize = currentFontSize + offset;
+        const coercedFontSize = Math.max(13, Math.min(25, newFontSize));
+        this.fontSizeMutableFlow.value = coercedFontSize;
+
+        this.settingDocument.set(StoreKeys.FONT_SIZE, coercedFontSize.toString());
+    };
+}
diff --git a/monosketch-svelte/src/lib/mono/ui-state-manager/panel-visibility-manager.ts b/monosketch-svelte/src/lib/mono/ui-state-manager/panel-visibility-manager.ts
new file mode 100644
index 000000000..67da30869
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/ui-state-manager/panel-visibility-manager.ts
@@ -0,0 +1,10 @@
+import { Flow } from 'lib/libs/flow';
+
+export class PanelVisibilityManager {
+    private shapeFormatPanelVisibilityMutableFlow = new Flow<boolean>(true);
+    shapeFormatPanelVisibilityFlow = this.shapeFormatPanelVisibilityMutableFlow.immutable();
+
+    setShapeFormatPanelVisibility(isVisible: boolean): void {
+        this.shapeFormatPanelVisibilityMutableFlow.value = isVisible;
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/ui-state-manager/scroll-mode-manager.ts b/monosketch-svelte/src/lib/mono/ui-state-manager/scroll-mode-manager.ts
new file mode 100644
index 000000000..69d78ec3a
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/ui-state-manager/scroll-mode-manager.ts
@@ -0,0 +1,11 @@
+import { ScrollMode } from '$mono/ui-state-manager/states';
+import { Flow } from 'lib/libs/flow';
+
+export class ScrollModeManager {
+    private _scrollModeFlow: Flow<ScrollMode> = new Flow<ScrollMode>(ScrollMode.BOTH);
+    scrollModeFlow = this._scrollModeFlow.immutable();
+
+    setScrollMode(scrollMode: ScrollMode): void {
+        this._scrollModeFlow.value = scrollMode;
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/ui-state-manager/states.ts b/monosketch-svelte/src/lib/mono/ui-state-manager/states.ts
new file mode 100644
index 000000000..c438d8673
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/ui-state-manager/states.ts
@@ -0,0 +1,47 @@
+export enum ScrollMode {
+    BOTH = 'both',
+    VERTICAL = 'vertical',
+    HORIZONTAL = 'horizontal',
+}
+
+export enum ThemeMode {
+    LIGHT = 'light',
+    DARK = 'dark',
+}
+
+export interface ThemeColor {
+    lightColorCode: string;
+    darkColorCode: string;
+}
+
+/**
+ * A set of colors used in the workspace.
+ * Note: other UI elements should use CSS variables instead of hard-coded colors.
+ */
+export const ThemeColors = {
+    // Drawing space - Axis
+    AxisBackground: themeColor('#f5f5f5', '#1e1e1e'),
+    AxisText: themeColor('#666666', '#666666'),
+    AxisRule: themeColor('#444444', '#666666'),
+
+    // Drawing space - Grid
+    GridBackground: themeColor('#FFFFFF', '#121212'),
+    GridLine: themeColor('#d9d9d9', '#282828'),
+    GridLineZero: themeColor('#BBBBBB', '#323232'),
+
+    // Drawing space - Shape
+    Shape: themeColor('#000000', '#F0F0F0'),
+    ShapeSelected: themeColor('#0D7CFF', '#FFD82F'),
+    ShapeTextEditing: themeColor('#0767C6', '#956d04'),
+    ShapeLineConnectTarget: themeColor('#E86A33', '#00FFF6'),
+
+    // Drawing space - Selection
+    SelectionAreaStroke: themeColor('#858585', '#858585'),
+    SelectionBoundStroke: themeColor('#64b5f6', '#FDF7C3'),
+    SelectionDotStroke: themeColor('#64b5f6', '#f2ae00'),
+    SelectionDotFill: themeColor('#FFFFFF', '#1E1E1E'),
+};
+
+function themeColor(lightColorCode: string, darkColorCode: string): ThemeColor {
+    return { lightColorCode, darkColorCode };
+}
diff --git a/monosketch-svelte/src/lib/mono/ui-state-manager/theme-manager.ts b/monosketch-svelte/src/lib/mono/ui-state-manager/theme-manager.ts
new file mode 100644
index 000000000..f7ec4f627
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/ui-state-manager/theme-manager.ts
@@ -0,0 +1,73 @@
+import { Flow, LifecycleOwner } from 'lib/libs/flow';
+import { type ThemeColor, ThemeMode } from '$mono/ui-state-manager/states';
+import { StorageDocument, StoreKeys } from '$mono/store-manager';
+
+/**
+ * A class for managing the theme of the app.
+ */
+export class ThemeManager {
+    private static instance: ThemeManager | null = null;
+
+    static getInstance(): ThemeManager {
+        if (!ThemeManager.instance) {
+            ThemeManager.instance = new ThemeManager();
+        }
+        return ThemeManager.instance;
+    }
+
+    private _themeModeFlow: Flow<ThemeMode> = new Flow();
+    themeModeFlow = this._themeModeFlow.immutable();
+
+    /**
+     * Gets color from [color] based on the current theme.
+     * The return is the hex code of RGB or RGBA, the same to the hex code used in CSS.
+     */
+    getThemedColorCode(color: ThemeColor): string {
+        return this._themeModeFlow.value === ThemeMode.LIGHT
+            ? color.lightColorCode
+            : color.darkColorCode;
+    }
+
+    setTheme(themeMode: ThemeMode): void {
+        this._themeModeFlow.value = themeMode;
+    }
+}
+
+/**
+ * A class for managing theme of the app, including observing theme change from
+ * the settings.
+ */
+export class AppThemeManager {
+    private settingsDocument: StorageDocument = StorageDocument.get(StoreKeys.SETTINGS);
+    private themeManager: ThemeManager = ThemeManager.getInstance();
+
+    themeModeFlow: Flow<ThemeMode> = this.themeManager.themeModeFlow;
+
+    constructor() {
+        const themeMode = this.settingsDocument.get(StoreKeys.THEME_MODE);
+        if (themeMode) {
+            this.themeManager.setTheme(themeMode as ThemeMode);
+        }
+    }
+
+    setTheme = (themeMode: ThemeMode): void => {
+        this.themeManager.setTheme(themeMode);
+    };
+
+    observeTheme = (appLifecycleOwner: LifecycleOwner): void => {
+        this.themeManager.themeModeFlow.observe(appLifecycleOwner, (themeMode) => {
+            document.documentElement.className = themeMode;
+            this.settingsDocument.set(StoreKeys.THEME_MODE, themeMode);
+        });
+
+        this.settingsDocument.setObserver(StoreKeys.THEME_MODE, (_key, _oldValue, newValue) => {
+            if (newValue) {
+                this.themeManager.setTheme(newValue as ThemeMode);
+            }
+        });
+    };
+
+    getThemedColorCode = (color: ThemeColor): string => {
+        return this.themeManager.getThemedColorCode(color);
+    };
+}
diff --git a/monosketch-svelte/src/lib/mono/ui-state-manager/ui-state-payload.ts b/monosketch-svelte/src/lib/mono/ui-state-manager/ui-state-payload.ts
new file mode 100644
index 000000000..8a0851838
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/ui-state-manager/ui-state-payload.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { type ScrollMode, ThemeMode } from "$mono/ui-state-manager/states";
+
+export type UiStatePayloadType =
+    | { type: "ShapeToolVisibility", isVisible: boolean }
+    | { type: "ChangeScrollMode", scrollMode: ScrollMode }
+    | { type: "ChangeTheme", themeMode: ThemeMode }
+    | { type: "ChangeFontSize", isIncreased: boolean }
+
+export const UiStatePayload = {
+    ShapeToolVisibility: (isVisible: boolean): UiStatePayloadType => ({ type: "ShapeToolVisibility", isVisible }),
+    ChangeScrollMode: (scrollMode: ScrollMode): UiStatePayloadType => ({ type: "ChangeScrollMode", scrollMode }),
+    ChangeTheme: (themeMode: ThemeMode): UiStatePayloadType => ({ type: "ChangeTheme", themeMode }),
+    ChangeFontSize: (isIncreased: boolean): UiStatePayloadType => ({ type: "ChangeFontSize", isIncreased }),
+};
diff --git a/monosketch-svelte/src/lib/mono/uuid/index.test.ts b/monosketch-svelte/src/lib/mono/uuid/index.test.ts
new file mode 100644
index 000000000..5725b90c4
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/uuid/index.test.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { UUID } from "$mono/uuid/index";
+import { expect, test } from "vitest";
+
+test("Check UUID", () => {
+    const now = Date.now();
+    // @ts-expect-error mock now return value for testing
+    UUID.now = () => now;
+
+    const uuid = UUID.generate();
+    console.log(uuid);
+
+    expect(uuid.length).toBe(31);
+    expect(uuid.slice(0, 3)).toBe("02-");
+
+    // @ts-expect-error Access private method for testing
+    expect(uuid.slice(3, 11)).toBe(UUID.toBase64(now).slice(0, -2));
+});
diff --git a/monosketch-svelte/src/lib/mono/uuid/index.ts b/monosketch-svelte/src/lib/mono/uuid/index.ts
new file mode 100644
index 000000000..17f991625
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/uuid/index.ts
@@ -0,0 +1,54 @@
+/**
+ * An object class that generate unique ID.
+ * ### Current version
+ * Version 2:
+ * ```
+ * Structure: version datetime random random
+ * Length   :   3        8      10     10
+ * ```
+ * Version: 02-
+ * Datetime: Base64-like encoded current time (8 chars)
+ * Random: Base64-like encoded random number (10 chars)
+ * Characters: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_"
+ *
+ * ### Older versions:
+ * Version 1:
+ * ```
+ * Structure: version datetime random random
+ * Length   :   3        8      10     10
+ * ```
+ * Version: 01-
+ * Datetime: Base64-like encoded current time (8 chars)
+ * Random: Base64-like encoded random number (10 chars)
+ * Characters: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+="
+ */
+export class UUID {
+    private static readonly VERSION = '02';
+    private static readonly BASE64_CHARS =
+        'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_'.split('');
+
+    private static now(): number {
+        return Date.now();
+    }
+
+    static generate(): string {
+        const part1 = this.toBase64(this.now()).slice(0, -2);
+        const part2 = UUID.toBase64(UUID.getRandomLong());
+        const part3 = UUID.toBase64(UUID.getRandomLong());
+        return `${UUID.VERSION}-${part1}${part2}${part3}`;
+    }
+
+    private static toBase64(number: number): string {
+        const chars: string[] = [];
+        for (let i = 0; i < 10; i++) {
+            const v = number & 0b0111111;
+            number = number >>> 6;
+            chars[i] = UUID.BASE64_CHARS[v];
+        }
+        return chars.join('');
+    }
+
+    private static getRandomLong(): number {
+        return Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/window/browser-manager.ts b/monosketch-svelte/src/lib/mono/window/browser-manager.ts
new file mode 100644
index 000000000..2811e7a80
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/window/browser-manager.ts
@@ -0,0 +1,65 @@
+import { Flow, LifecycleOwner } from "$libs/flow";
+
+/**
+ * A class for managing the states related to the browser such as the title, address bar, etc.
+ */
+export class BrowserManager {
+    private readonly onUrlUpdate: (projectId: string) => void;
+    private willChangedByUrlPopStateEvent: boolean = false;
+
+    constructor(onUrlUpdate: (projectId: string) => void) {
+        this.onUrlUpdate = onUrlUpdate;
+
+        // Initialize the class by calling the URL update callback with the current root ID
+        this.onUrlUpdate(this.rootIdFromUrl);
+
+        // Listen to popstate events to handle browser navigation (back/forward)
+        window.onpopstate = (_event: PopStateEvent) => {
+            this.willChangedByUrlPopStateEvent = true;
+            this.onUrlUpdate(this.rootIdFromUrl);
+        };
+    }
+
+    // Getter to retrieve the URL search parameters
+    private get urlSearchParams(): URLSearchParams {
+        return new URLSearchParams(window.location.search);
+    }
+
+    // Getter to retrieve the root ID from the URL
+    get rootIdFromUrl(): string {
+        // Replace space char with + since '+' will be converted to ' ' when reading value from
+        // URLSearchParams. The space character is not allowed in the URL.
+        return this.urlSearchParams.get(BrowserManager.URL_PARAM_ID) || '';
+    }
+
+    // Method to start observing state changes
+    startObserveStateChange(
+        workingProjectIdFlow: Flow<string>,
+        lifecycleOwner: LifecycleOwner,
+    ): void {
+        // Observe distinct changes to the project ID and update the URL
+        workingProjectIdFlow.distinctUntilChanged().observe(lifecycleOwner, projectId => {
+            if (projectId === this.rootIdFromUrl || this.willChangedByUrlPopStateEvent) {
+                this.willChangedByUrlPopStateEvent = false;
+                return;
+            }
+            const searchParams = this.urlSearchParams;
+            searchParams.set(BrowserManager.URL_PARAM_ID, projectId);
+            const newUrl = `${window.location.origin}${window.location.pathname}?${searchParams}`;
+            window.history.pushState({ path: newUrl }, "", newUrl);
+        });
+    }
+
+    updateAppTitle(projectName: string) {
+        // Update the document title with the current project name
+        document.title = `${projectName} - MonoSketch`;
+    }
+
+    // Static property for the URL parameter key
+    private static URL_PARAM_ID: string = 'id';
+
+    // Static method to open a project in a new tab
+    static openInNewTab(projectId: string): void {
+        window.open(`?${BrowserManager.URL_PARAM_ID}=${projectId}`, '_blank');
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/window/window-viewmodel.ts b/monosketch-svelte/src/lib/mono/window/window-viewmodel.ts
new file mode 100644
index 000000000..06ea8fc06
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/window/window-viewmodel.ts
@@ -0,0 +1,7 @@
+import { Flow } from '$libs/flow';
+
+export namespace WindowViewModel {
+    export const windowSizeUpdateEventFlow = new Flow<boolean>(true);
+
+    export const applicationActiveStateFlow = new Flow<boolean>(true);
+}
diff --git a/monosketch-svelte/src/lib/mono/workspace/canvas/axis-canvas-view-controller.ts b/monosketch-svelte/src/lib/mono/workspace/canvas/axis-canvas-view-controller.ts
new file mode 100644
index 000000000..40cbb3ae8
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/workspace/canvas/axis-canvas-view-controller.ts
@@ -0,0 +1,91 @@
+import type { AppUiStateManager } from "$mono/ui-state-manager/app-ui-state-manager";
+import { DrawingInfo } from '$mono/workspace/drawing-info';
+import { Size } from '$libs/graphics-geo/size';
+import { DEFAULT_FONT } from '$mono/workspace/drawing-info/drawing-info-controller';
+import { ThemeColors } from '$mono/ui-state-manager/states';
+import { BaseCanvasViewController } from '$mono/workspace/canvas/base-canvas-controller';
+
+const AXIS_RULER_SIZE = 12.0;
+export const AXIS_Y_WIDTH = 33.0;
+export const AXIS_X_HEIGHT = 18.0;
+
+export class AxisCanvasViewController extends BaseCanvasViewController {
+    constructor(
+        canvas: HTMLCanvasElement,
+        private appUiStateManager: AppUiStateManager,
+    ) {
+        super(canvas);
+    }
+
+    setDrawingInfo = (drawingInfo: DrawingInfo) => {
+        const canvasSizePx = Size.of(
+            drawingInfo.canvasSizePx.width + AXIS_Y_WIDTH,
+            drawingInfo.canvasSizePx.height + AXIS_X_HEIGHT,
+        );
+        const isSizeChanged = !this.drawingInfo.canvasSizePx.equals(canvasSizePx);
+        if (isSizeChanged) {
+            this.resizeCanvas(canvasSizePx.width, canvasSizePx.height);
+        }
+        this.drawingInfo = drawingInfo;
+        if (isSizeChanged) {
+            this.draw();
+        }
+    };
+
+    protected drawInternal = () => {
+        this.context.font = `normal normal normal 10.5px ${DEFAULT_FONT}`;
+        this.drawAxis();
+    };
+
+    private drawAxis = () => {
+        const context = this.context;
+        const themeManager = this.appUiStateManager;
+        const drawingInfo = this.drawingInfo;
+
+        const cellSizePx = this.drawingInfo.cellSizePx;
+        const canvasSizePx = this.drawingInfo.canvasSizePx;
+
+        const xAxisHeight = AXIS_X_HEIGHT;
+        const yAxisWidth = AXIS_Y_WIDTH;
+
+        const path = new Path2D();
+
+        context.lineWidth = 1.0;
+        context.fillStyle = themeManager.getThemedColorCode(ThemeColors.AxisBackground);
+        context.fillRect(0, 0, yAxisWidth, canvasSizePx.height);
+
+        context.fillStyle = themeManager.getThemedColorCode(ThemeColors.AxisText);
+        context.textAlign = 'right';
+
+        this.addHLine(path, 0, xAxisHeight, canvasSizePx.width);
+
+        for (const row of drawingInfo.boardRowRange) {
+            const text = `${row}`;
+            const yPx = xAxisHeight + drawingInfo.toYPx(row) + 3;
+            const xPx = yAxisWidth - 0.5 * cellSizePx.width;
+            context.fillText(text, xPx, yPx);
+        }
+
+        context.fillStyle = themeManager.getThemedColorCode(ThemeColors.AxisBackground);
+        context.fillRect(0, 0, canvasSizePx.width, xAxisHeight);
+
+        context.fillStyle = themeManager.getThemedColorCode(ThemeColors.AxisText);
+        context.textAlign = 'left';
+
+        this.addVLine(path, yAxisWidth, 0, canvasSizePx.height);
+
+        for (const column of drawingInfo.boardColumnRange) {
+            if (column % 20 !== 0) {
+                continue;
+            }
+            const text = `${column}`;
+            const xPx = drawingInfo.toXPx(column) + AXIS_Y_WIDTH;
+            context.fillText(text, xPx + 2, 7.0);
+
+            this.addVLine(path, xPx, xAxisHeight - AXIS_RULER_SIZE, AXIS_RULER_SIZE);
+        }
+
+        context.strokeStyle = themeManager.getThemedColorCode(ThemeColors.AxisRule);
+        context.stroke(path);
+    };
+}
diff --git a/monosketch-svelte/src/lib/mono/workspace/canvas/base-canvas-controller.ts b/monosketch-svelte/src/lib/mono/workspace/canvas/base-canvas-controller.ts
new file mode 100644
index 000000000..ee10b848f
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/workspace/canvas/base-canvas-controller.ts
@@ -0,0 +1,76 @@
+import { DrawingInfo } from '$mono/workspace/drawing-info';
+import { Size } from '$libs/graphics-geo/size';
+
+export class BaseCanvasViewController {
+    protected readonly context: CanvasRenderingContext2D;
+
+    protected drawingInfo: DrawingInfo;
+
+    constructor(private readonly canvas: HTMLCanvasElement) {
+        this.context = canvas.getContext('2d') as CanvasRenderingContext2D;
+        this.drawingInfo = new DrawingInfo().copyWith({
+            canvasSizePx: Size.of(canvas.width, canvas.height),
+        });
+    }
+
+    setDrawingInfo = (drawingInfo: DrawingInfo) => {
+        const canvasSizePx = drawingInfo.canvasSizePx;
+
+        const isSizeChanged = !this.drawingInfo.canvasSizePx.equals(drawingInfo);
+        if (isSizeChanged) {
+            this.resizeCanvas(canvasSizePx.width, canvasSizePx.height);
+        }
+        this.drawingInfo = drawingInfo;
+
+        if (isSizeChanged) {
+            this.draw();
+        }
+    };
+
+    draw = () => {
+        this.context.clearRect(
+            0,
+            0,
+            this.drawingInfo.canvasSizePx.width,
+            this.drawingInfo.canvasSizePx.height,
+        );
+        this.context.font = this.drawingInfo.font;
+        this.context.textAlign = 'left';
+        this.context.textBaseline = 'top';
+        this.context.imageSmoothingEnabled = true;
+
+        this.drawInternal();
+    };
+
+    protected drawInternal() {}
+
+    protected drawText = (text: string, row: number, column: number) => {
+        const yPx = this.drawingInfo.toYPx(row);
+        const xPx = this.drawingInfo.toXPx(column);
+        this.context.fillText(
+            text,
+            xPx + this.drawingInfo.cellCharOffsetPx.width,
+            yPx + this.drawingInfo.cellCharOffsetPx.height,
+        );
+    };
+
+    protected addHLine = (path: Path2D, xPx: number, yPx: number, widthPx: number) => {
+        path.moveTo(xPx, yPx);
+        path.lineTo(xPx + widthPx, yPx);
+    };
+
+    protected addVLine = (path: Path2D, xPx: number, yPx: number, heightPx: number) => {
+        path.moveTo(xPx, yPx);
+        path.lineTo(xPx, yPx + heightPx);
+    };
+
+    protected resizeCanvas = (widthPx: number, heightPx: number) => {
+        const dpr = Math.max(window.devicePixelRatio, 2.0);
+        this.canvas.width = Math.trunc(widthPx * dpr);
+        this.canvas.height = Math.trunc(heightPx * dpr);
+        this.canvas.style.width = widthPx + 'px';
+        this.canvas.style.height = heightPx + 'px';
+        this.context.scale(dpr, dpr);
+    };
+}
+
diff --git a/monosketch-svelte/src/lib/mono/workspace/canvas/board-canvas-view-controller.ts b/monosketch-svelte/src/lib/mono/workspace/canvas/board-canvas-view-controller.ts
new file mode 100644
index 000000000..de3159588
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/workspace/canvas/board-canvas-view-controller.ts
@@ -0,0 +1,45 @@
+import type { AppUiStateManager } from "$mono/ui-state-manager/app-ui-state-manager";
+import { BaseCanvasViewController } from '$mono/workspace/canvas/base-canvas-controller';
+import { HighlightType, type Pixel } from '$mono/monobitmap/board/pixel';
+import { type ThemeColor, ThemeColors } from '$mono/ui-state-manager/states';
+import type { MonoBoard } from '$mono/monobitmap/board/board';
+
+/**
+ * A class for managing the board canvas.
+ */
+export class BoardCanvasViewController extends BaseCanvasViewController {
+
+    constructor(
+        canvas: HTMLCanvasElement,
+        private board: MonoBoard,
+        private appUiStateManager: AppUiStateManager,
+    ) {
+        super(canvas);
+    }
+
+    protected drawInternal() {
+        const drawingInfo = this.drawingInfo;
+        this.context.font = drawingInfo.font;
+        for (const row of drawingInfo.boardRowRange) {
+            for (const column of drawingInfo.boardColumnRange) {
+                this.drawPixel(this.board.get(row, column), row, column);
+            }
+        }
+    }
+
+    private drawPixel = (pixel: Pixel, row: number, column: number) => {
+        if (pixel.isTransparent) {
+            return;
+        }
+        const pixelColor = HighlightTypeToThemeColor[pixel.highlight];
+        this.context.fillStyle = this.appUiStateManager.getThemedColorCode(pixelColor);
+        this.drawText(pixel.visualChar, row, column);
+    };
+}
+
+const HighlightTypeToThemeColor: Record<HighlightType, ThemeColor> = {
+    [HighlightType.NO]: ThemeColors.Shape,
+    [HighlightType.SELECTED]: ThemeColors.ShapeSelected,
+    [HighlightType.TEXT_EDITING]: ThemeColors.ShapeTextEditing,
+    [HighlightType.LINE_CONNECT_FOCUSING]: ThemeColors.ShapeLineConnectTarget,
+};
diff --git a/monosketch-svelte/src/lib/mono/workspace/canvas/grid-canvas-view-controller.ts b/monosketch-svelte/src/lib/mono/workspace/canvas/grid-canvas-view-controller.ts
new file mode 100644
index 000000000..9428bbe5a
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/workspace/canvas/grid-canvas-view-controller.ts
@@ -0,0 +1,44 @@
+import type { AppUiStateManager } from "$mono/ui-state-manager/app-ui-state-manager";
+import { BaseCanvasViewController } from '$mono/workspace/canvas/base-canvas-controller';
+import { ThemeColors } from '$mono/ui-state-manager/states';
+
+/**
+ * A class for managing the grid canvas.
+ */
+export class GridCanvasViewController extends BaseCanvasViewController {
+    constructor(
+        canvas: HTMLCanvasElement,
+        private appUiStateManager: AppUiStateManager,
+    ) {
+        super(canvas);
+    }
+
+    protected drawInternal = () => {
+        const context = this.context;
+        context.strokeStyle = this.appUiStateManager.getThemedColorCode(ThemeColors.GridLine);
+        context.lineWidth = 0.25;
+        context.stroke(this.createGridPath());
+    };
+
+    private createGridPath = (): Path2D => {
+        const drawingInfo = this.drawingInfo;
+        const zeroX = drawingInfo.toXPx(drawingInfo.boardColumnRange.start - 1.0);
+        const maxX = drawingInfo.toXPx(drawingInfo.boardColumnRange.endExclusive + 1.0);
+        const zeroY = drawingInfo.toYPx(drawingInfo.boardRowRange.start - 1.0);
+        const maxY = drawingInfo.toYPx(drawingInfo.boardRowRange.endExclusive + 1.0);
+
+        const path = new Path2D();
+
+        for (const row of drawingInfo.boardRowRange) {
+            const yPx = drawingInfo.toYPx(row);
+            this.addHLine(path, zeroX, yPx, maxX - zeroX);
+        }
+
+        for (const column of drawingInfo.boardColumnRange) {
+            const xPx = drawingInfo.toXPx(column);
+            this.addVLine(path, xPx, zeroY, maxY - zeroY);
+        }
+
+        return path;
+    };
+}
diff --git a/monosketch-svelte/src/lib/mono/workspace/canvas/interaction-canvas-view-controller.ts b/monosketch-svelte/src/lib/mono/workspace/canvas/interaction-canvas-view-controller.ts
new file mode 100644
index 000000000..1d6c8bb16
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/workspace/canvas/interaction-canvas-view-controller.ts
@@ -0,0 +1,137 @@
+import type { Point } from "$libs/graphics-geo/point";
+import { TODO } from "$libs/todo";
+import type { AppUiStateManager } from "$mono/ui-state-manager/app-ui-state-manager";
+import { BaseCanvasViewController } from '$mono/workspace/canvas/base-canvas-controller';
+import {
+    type InteractionBound,
+    InteractionBoundType,
+    type InteractionPoint,
+    LineInteractionBound,
+    ScalableInteractionBound,
+} from '$mono/shape/interaction-bound';
+import { type ThemeColor, ThemeColors } from '$mono/ui-state-manager/states';
+
+const DOT_RADIUS = 3.2;
+const SMALL_DOT_RADIUS = 1.0;
+const FULL_CIRCLE_ARG = 2 * Math.PI;
+
+/**
+ * A class for managing the interaction canvas.
+ * This class is responsible for drawing interaction bounds and the interaction indicators on the
+ * canvas.
+ */
+export class InteractionCanvasViewController extends BaseCanvasViewController {
+    private interactionBounds: InteractionBound[] = [];
+    private isMouseMoving = false;
+
+    constructor(
+        canvas: HTMLCanvasElement,
+        private appUiStateManager: AppUiStateManager,
+    ) {
+        super(canvas);
+        this.context.imageSmoothingQuality = 'high';
+    }
+
+    setInteractionBounds = (interactionBounds: InteractionBound[]) => {
+        this.interactionBounds = interactionBounds;
+    };
+
+    setMouseMoving = (isMouseMoving: boolean) => {
+        this.isMouseMoving = isMouseMoving;
+    };
+
+    protected drawInternal = () => {
+        for (const bound of this.interactionBounds) {
+            switch (bound.type) {
+                case InteractionBoundType.LINE:
+                    this.drawLineInteractionBound(bound as LineInteractionBound);
+                    break;
+                case InteractionBoundType.SCALABLE_SHAPE:
+                    this.drawScalableInteractionBound(bound as ScalableInteractionBound);
+                    break;
+            }
+        }
+    };
+
+    private drawLineInteractionBound = (bound: LineInteractionBound) => {
+        if (this.isMouseMoving) {
+            return;
+        }
+
+        this.drawInteractionPoints(
+            bound.interactionPoints,
+            ThemeColors.SelectionBoundStroke,
+            ThemeColors.SelectionDotFill,
+            DOT_RADIUS,
+        );
+
+        // Draw a small dot inside the start dot to make it simper to distinguish start and end dots
+        this.drawInteractionPoints(
+            [bound.interactionPoints[0]],
+            ThemeColors.SelectionBoundStroke,
+            ThemeColors.SelectionDotStroke,
+            SMALL_DOT_RADIUS,
+        );
+    };
+
+    private drawScalableInteractionBound = (bound: ScalableInteractionBound) => {
+        const context = this.context;
+        context.strokeStyle = this.appUiStateManager.getThemedColorCode(
+            ThemeColors.SelectionBoundStroke,
+        );
+        context.lineWidth = 1.0;
+        context.stroke(this.createScalableBoundPath(bound));
+
+        if (this.isMouseMoving) {
+            return;
+        }
+        this.drawInteractionPoints(
+            bound.interactionPoints,
+            ThemeColors.SelectionBoundStroke,
+            ThemeColors.SelectionDotFill,
+            DOT_RADIUS,
+        );
+    };
+
+    private drawInteractionPoints = (
+        points: InteractionPoint[],
+        strokeColor: ThemeColor,
+        fillColor: ThemeColor,
+        dotRadius: number,
+    ) => {
+        const context = this.context;
+        const drawingInfo = this.drawingInfo;
+        const dotPath = new Path2D();
+        context.beginPath();
+        for (const point of points) {
+            const xPx = drawingInfo.toXPx(point.left);
+            const yPx = drawingInfo.toYPx(point.top);
+            dotPath.moveTo(xPx, yPx);
+            dotPath.arc(xPx, yPx, dotRadius, 0, FULL_CIRCLE_ARG);
+        }
+        context.strokeStyle = this.appUiStateManager.getThemedColorCode(strokeColor);
+        context.fillStyle = this.appUiStateManager.getThemedColorCode(fillColor);
+        context.imageSmoothingEnabled = true;
+        context.stroke(dotPath);
+        context.fill(dotPath);
+        context.imageSmoothingEnabled = false;
+        context.closePath();
+    };
+
+    private createScalableBoundPath = (bound: ScalableInteractionBound): Path2D => {
+        const drawingInfo = this.drawingInfo;
+        const leftPx = drawingInfo.toXPx(bound.left);
+        const rightPx = drawingInfo.toXPx(bound.right);
+        const topPx = drawingInfo.toYPx(bound.top);
+        const bottomPx = drawingInfo.toYPx(bound.bottom);
+        const path = new Path2D();
+        path.rect(leftPx, topPx, rightPx - leftPx, bottomPx - topPx);
+        return path;
+    };
+
+    getInteractionPoint = (_pointPx: Point): InteractionPoint | null => {
+        // TODO: Implement this method
+        TODO("Implement this method");
+        return null;
+    };
+}
diff --git a/monosketch-svelte/src/lib/mono/workspace/canvas/selection-canvas-view-controller.ts b/monosketch-svelte/src/lib/mono/workspace/canvas/selection-canvas-view-controller.ts
new file mode 100644
index 000000000..b95335a5a
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/workspace/canvas/selection-canvas-view-controller.ts
@@ -0,0 +1,46 @@
+import type { AppUiStateManager } from "$mono/ui-state-manager/app-ui-state-manager";
+import { BaseCanvasViewController } from '$mono/workspace/canvas/base-canvas-controller';
+import type { Rect } from '$libs/graphics-geo/rect';
+import { ThemeColors } from '$mono/ui-state-manager/states';
+
+const DASH_PATTERN = [8, 6];
+
+/**
+ * A canvas view controller to render the selection rectangle bound indicator.
+ */
+export class SelectionCanvasViewController extends BaseCanvasViewController {
+    private selectingBound?: Rect;
+
+    constructor(
+        canvas: HTMLCanvasElement,
+        private appUiStateManager: AppUiStateManager,
+    ) {
+        super(canvas);
+    }
+
+    setSelectingBound = (selectingBound?: Rect) => {
+        this.selectingBound = selectingBound;
+    };
+
+    protected drawInternal() {
+        const bound = this.selectingBound;
+        if (!bound) {
+            return;
+        }
+
+        const context = this.context;
+        const drawingInfo = this.drawingInfo;
+
+        const leftPx = drawingInfo.toXPx(bound.left);
+        const topPx = drawingInfo.toYPx(bound.top);
+        const rightPx = drawingInfo.toXPx(bound.right + 1.0);
+        const bottomPx = drawingInfo.toYPx(bound.bottom + 1.0);
+
+        const path = new Path2D();
+        path.rect(leftPx, topPx, rightPx - leftPx, bottomPx - topPx);
+        context.strokeStyle = this.appUiStateManager.getThemedColorCode(ThemeColors.SelectionAreaStroke);
+        context.lineWidth = 1.0;
+        context.setLineDash(DASH_PATTERN);
+        context.stroke(path);
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/workspace/drawing-info/drawing-info-controller.ts b/monosketch-svelte/src/lib/mono/workspace/drawing-info/drawing-info-controller.ts
new file mode 100644
index 000000000..2a2626fc8
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/workspace/drawing-info/drawing-info-controller.ts
@@ -0,0 +1,63 @@
+import { Flow } from '$libs/flow';
+import { DrawingInfo } from '$mono/workspace/drawing-info/drawing-info';
+import { SizeF } from '$libs/graphics-geo/size';
+import { Point } from '$libs/graphics-geo/point';
+
+export const DEFAULT_FONT = "'Jetbrains Mono'";
+
+export class DrawingInfoController {
+    private readonly context: CanvasRenderingContext2D;
+    private readonly drawingInfoMutableFlow = new Flow<DrawingInfo>(new DrawingInfo());
+    readonly drawingInfoFlow: Flow<DrawingInfo> =
+        this.drawingInfoMutableFlow.distinctUntilChanged();
+
+    constructor(
+        private readonly canvas: HTMLCanvasElement,
+    ) {
+        this.context = this.canvas.getContext('2d')!;
+    }
+
+    setFont = (fontSize: number) => {
+        const currentInfo = this.drawingInfoMutableFlow.value!;
+        const cellSizePx = getCellSizePx(this.context, currentInfo.font, fontSize);
+        const cellCharOffsetPx = SizeF.of(0.0, cellSizePx.height * 0.2);
+        this.drawingInfoMutableFlow.value = currentInfo.copyWith({
+            offsetPx: adjustOffsetPx(currentInfo.offsetPx, currentInfo.cellSizePx, cellSizePx),
+            cellSizePx,
+            cellCharOffsetPx,
+            font: `normal normal normal ${fontSize}px ${DEFAULT_FONT}`,
+            fontSize,
+        });
+    };
+
+    setSize = (widthPx: number, heightPx: number) => {
+        this.drawingInfoMutableFlow.value = this.drawingInfoMutableFlow.value!.copyWith({
+            canvasSizePx: SizeF.of(widthPx, heightPx),
+        });
+    };
+
+    setOffset = (offsetPx: Point) => {
+        this.drawingInfoMutableFlow.value = this.drawingInfoMutableFlow.value!.copyWith({
+            offsetPx,
+        });
+    };
+}
+
+const getCellSizePx = (
+    context: CanvasRenderingContext2D,
+    font: string,
+    fontSize: number,
+): SizeF => {
+    context.font = font;
+    context.textAlign = 'left';
+    context.textBaseline = 'middle';
+    const cWidth = Math.floor(fontSize * 0.63);
+    const cHeight = fontSize * 1.312;
+    return SizeF.of(cWidth, cHeight);
+};
+
+const adjustOffsetPx = (offsetPx: Point, oldSize: SizeF, newSize: SizeF): Point => {
+    const left = Math.round((offsetPx.left * newSize.width) / oldSize.width);
+    const top = Math.round((offsetPx.top * newSize.height) / oldSize.height);
+    return Point.of(left, top);
+};
diff --git a/monosketch-svelte/src/lib/mono/workspace/drawing-info/drawing-info.ts b/monosketch-svelte/src/lib/mono/workspace/drawing-info/drawing-info.ts
new file mode 100644
index 000000000..efadd69c9
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/workspace/drawing-info/drawing-info.ts
@@ -0,0 +1,138 @@
+import { Point } from '$libs/graphics-geo/point';
+import { Size, SizeF } from '$libs/graphics-geo/size';
+import { Rect } from '$libs/graphics-geo/rect';
+import { IntRange } from '$libs/sequence';
+
+/**
+ * A class to hold drawing info and provide conversion functions for converting between
+ * pixel unit and board unit.
+ */
+export class DrawingInfo {
+    readonly boundPx: Rect;
+
+    readonly boardOffsetRow: number;
+    readonly boardOffsetColumn: number;
+    readonly rowCount: number;
+    readonly columnCount: number;
+    readonly boardBound: Rect;
+    readonly boardRowRange: IntRange;
+    readonly boardColumnRange: IntRange;
+
+    constructor(
+        public readonly offsetPx: Point = Point.ZERO,
+        public readonly cellSizePx: SizeF = new SizeF(1.0, 1.0),
+        public readonly cellCharOffsetPx: SizeF = new SizeF(0.0, 0.0),
+        public readonly canvasSizePx: Size = new Size(1, 1),
+        public readonly font: string = '',
+        public readonly fontSize: number = 0,
+    ) {
+        this.boundPx = new Rect(this.offsetPx, this.canvasSizePx);
+
+        this.boardOffsetRow = floor(-this.offsetPx.top / this.cellSizePx.height);
+        this.boardOffsetColumn = floor(-this.offsetPx.left / this.cellSizePx.width);
+        this.rowCount = ceil(this.canvasSizePx.height / this.cellSizePx.height);
+        this.columnCount = ceil(this.canvasSizePx.width / this.cellSizePx.width);
+
+        this.boardBound = Rect.byLTWH(
+            this.boardOffsetColumn,
+            this.boardOffsetRow,
+            this.columnCount,
+            this.rowCount,
+        );
+
+        this.boardRowRange = new IntRange(this.boardOffsetRow, this.boardOffsetRow + this.rowCount + 1);
+        this.boardColumnRange = new IntRange(
+            this.boardOffsetColumn,
+            this.boardOffsetColumn + this.columnCount + 1,
+        );
+    }
+
+    copyWith = ({
+        offsetPx,
+        cellSizePx,
+        cellCharOffsetPx,
+        canvasSizePx,
+        font,
+        fontSize,
+    }: {
+        offsetPx?: Point;
+        cellSizePx?: SizeF;
+        cellCharOffsetPx?: SizeF;
+        canvasSizePx?: Size;
+        font?: string;
+        fontSize?: number;
+    }): DrawingInfo =>
+        new DrawingInfo(
+            offsetPx ?? this.offsetPx,
+            cellSizePx ?? this.cellSizePx,
+            cellCharOffsetPx ?? this.cellCharOffsetPx,
+            canvasSizePx ?? this.canvasSizePx,
+            font ?? this.font,
+            fontSize ?? this.fontSize,
+        );
+
+    /**
+     * Converts the board column to pixel X coordinate.
+     * Algorithm:
+     * 1. Multiply the board column by the cell width.
+     * 2. Add the left offset.
+     */
+    toXPx = (column: number): number => floor(this.offsetPx.left + this.cellSizePx.width * column);
+
+    /**
+     * Converts the board row to pixel Y coordinate.
+     * Algorithm:
+     * 1. Multiply the board row by the cell height.
+     * 2. Add the top offset.
+     */
+    toYPx = (row: number): number => floor(this.offsetPx.top + this.cellSizePx.height * row);
+
+    /**
+     * Converts the screen Y coordinate (pixel) to the board row.
+     * Algorithm:
+     * 1. Subtract the top offset from the Y coordinate.
+     * 2. Divide the result by the cell height.
+     */
+    toBoardRow = (yPx: number): number => floor((yPx - this.offsetPx.top) / this.cellSizePx.height);
+
+    /**
+     * Converts the screen X coordinate (pixel) to the board column.
+     * Algorithm:
+     * 1. Subtract the left offset from the X coordinate.
+     * 2. Divide the result by the cell width.
+     */
+    toBoardColumn = (xPx: number): number =>
+        floor((xPx - this.offsetPx.left) / this.cellSizePx.width);
+
+    /**
+     * Converts the pixel Y coordinate (pixel) to the board row with 1 decimal place.
+     * Algorithm:
+     * 1. Subtract the top offset from the Y coordinate.
+     * 2. Divide the result by the cell height.
+     */
+    toBoardRowF = (yPx: number): number =>
+        roundTo1DecimalPlace((yPx - this.offsetPx.top) / this.cellSizePx.height);
+
+    /**
+     * Converts the screen X coordinate (pixel) to the board column with 1 decimal place.
+     * Algorithm:
+     * 1. Subtract the left offset from the X coordinate.
+     * 2. Divide the result by the cell width.
+     */
+    toBoardColumnF = (xPx: number): number =>
+        roundTo1DecimalPlace((xPx - this.offsetPx.left) / this.cellSizePx.width);
+
+    /**
+     * Converts the width in the board unit to pixel unit.
+     */
+    toWidthPx = (width: number): number => floor(this.cellSizePx.width * width);
+
+    /**
+     * Converts the height in the board unit to pixel unit.
+     */
+    toHeightPx = (height: number): number => floor(this.cellSizePx.height * height);
+}
+
+const floor = Math.floor;
+const ceil = Math.ceil;
+const roundTo1DecimalPlace = (value: number): number => Math.round(value * 10) / 10;
diff --git a/monosketch-svelte/src/lib/mono/workspace/drawing-info/index.ts b/monosketch-svelte/src/lib/mono/workspace/drawing-info/index.ts
new file mode 100644
index 000000000..4e720a648
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/workspace/drawing-info/index.ts
@@ -0,0 +1,2 @@
+export { DrawingInfo } from './drawing-info';
+export { DrawingInfoController } from './drawing-info-controller';
diff --git a/monosketch-svelte/src/lib/mono/workspace/mouse/cursor-type.ts b/monosketch-svelte/src/lib/mono/workspace/mouse/cursor-type.ts
new file mode 100644
index 000000000..7f7286170
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/workspace/mouse/cursor-type.ts
@@ -0,0 +1,15 @@
+/**
+ * An enum for all in-use mouse cursors.
+ */
+export enum MouseCursor {
+    DEFAULT = "default",
+    TEXT = "text",
+    CROSSHAIR = "crosshair",
+    MOVE = "move",
+    RESIZE_NWSE = "nwse-resize",
+    RESIZE_NS = "ns-resize",
+    RESIZE_NESW = "nesw-resize",
+    RESIZE_EW = "ew-resize",
+    RESIZE_ROW = "row-resize",
+    RESIZE_COL = "col-resize"
+}
diff --git a/monosketch-svelte/src/lib/mono/workspace/mouse/mouse-event-observer.ts b/monosketch-svelte/src/lib/mono/workspace/mouse/mouse-event-observer.ts
new file mode 100644
index 000000000..9b0885446
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/workspace/mouse/mouse-event-observer.ts
@@ -0,0 +1,268 @@
+import { Flow, LifecycleOwner } from '$libs/flow';
+import { DrawingInfo } from '$mono/workspace/drawing-info';
+import { ScrollMode } from '$mono/ui-state-manager/states';
+import { Point, PointF } from '$libs/graphics-geo/point';
+import {
+    MousePointer,
+    type MousePointerInfo,
+    MousePointerType,
+} from '$mono/workspace/mouse/mouse-pointer';
+
+const SCROLL_SPEED_RATIO = 1 / 1.3;
+const SCROLL_THRESHOLD_PIXEL = 1.0;
+
+/**
+ * A class to attach and observe mouse events happening on the canvas.
+ * All events will be combined into a single flow `mousePointerFlow`.
+ */
+export class MouseEventObserver {
+    private drawingInfo: DrawingInfo;
+    private mouseWheelDeltaX: number = 0.0;
+    private mouseWheelDeltaY: number = 0.0;
+
+    private drawingOffsetPointPxMutableFlow = new Flow<Point>(Point.ZERO);
+    readonly drawingOffsetPointPxFlow = this.drawingOffsetPointPxMutableFlow.immutable();
+
+    private mousePointerMutableFlow = new Flow<MousePointerInfo>(MousePointer.idle);
+    readonly mousePointerFlow = this.mousePointerMutableFlow;
+
+    private readonly mouseDoubleClickDetector = new MouseDoubleClickDetector();
+
+    constructor(
+        lifecycleOwner: LifecycleOwner,
+        container: HTMLElement,
+        private drawingInfoFlow: Flow<DrawingInfo>,
+        private scrollModeFlow: Flow<ScrollMode>,
+    ) {
+        this.drawingInfo = drawingInfoFlow.value!;
+
+        container.onmousedown = this.setMouseDownPointer;
+        container.onmouseup = this.setMouseUpPointer;
+        container.onmousemove = this.setMouseMovePointer;
+        container.onwheel = this.setMouseWheel;
+    }
+
+    observeEvents(lifecycleOwner: LifecycleOwner, shiftKeyStateFlow: Flow<boolean>): void {
+        this.drawingInfoFlow.observe(lifecycleOwner, (drawingInfo) => {
+            this.drawingInfo = drawingInfo;
+        });
+
+        shiftKeyStateFlow.observe(lifecycleOwner, (isWithShiftKey) => {
+            const currentValue = this.getCurrentMousePointer();
+            if (currentValue.type !== MousePointerType.DRAG) {
+                return;
+            }
+            this.mousePointerMutableFlow.value = {
+                ...currentValue,
+                isWithShiftKey,
+            };
+        });
+    }
+
+    forceUpdateOffset(offsetPx: Point): void {
+        this.drawingOffsetPointPxMutableFlow.value = offsetPx;
+    }
+
+    private setMouseDownPointer = (event: MouseEvent) => {
+        const currentValue = this.getCurrentMousePointer();
+        if (
+            currentValue.type === MousePointerType.IDLE ||
+            currentValue.type === MousePointerType.MOVE
+        ) {
+            this.mousePointerMutableFlow.value = MousePointer.down(
+                this.toBoardCoordinate(event),
+                this.toPointPx(event),
+                event.shiftKey,
+            );
+        }
+    };
+
+    private setMouseUpPointer = (event: MouseEvent) => {
+        const isDoubleClick = this.mouseDoubleClickDetector.onMouseUp();
+        const currentValue = this.getCurrentMousePointer();
+
+        const nextValue = () => {
+            switch (currentValue.type) {
+                case MousePointerType.DOWN:
+                    return MousePointer.up(
+                        this.toBoardCoordinate(event),
+                        this.toBoardCoordinateF(event),
+                        currentValue.boardCoordinate,
+                        event.shiftKey,
+                    );
+                case MousePointerType.DRAG:
+                    return MousePointer.up(
+                        this.toBoardCoordinate(event),
+                        this.toBoardCoordinateF(event),
+                        currentValue.mouseDownBoardCoordinate,
+                        event.shiftKey,
+                    );
+                default:
+                    return MousePointer.idle;
+            }
+        };
+        this.mousePointerMutableFlow.value = nextValue();
+
+        if (currentValue.type === MousePointerType.DOWN) {
+            this.mousePointerMutableFlow.value = isDoubleClick
+                ? MousePointer.doubleClick(this.toBoardCoordinate(event))
+                : MousePointer.click(this.toBoardCoordinate(event), event.shiftKey);
+        }
+
+        this.mousePointerMutableFlow.value = MousePointer.idle;
+    };
+
+    private setMouseMovePointer = (event: MouseEvent) => {
+        this.mouseDoubleClickDetector.reset();
+
+        const currentValue = this.mousePointerMutableFlow.value ?? MousePointer.idle;
+        const nextValue = () => {
+            switch (currentValue.type) {
+                case MousePointerType.DOWN:
+                    const mouseBoardCoordinate = this.toBoardCoordinate(event);
+                    // If the mouse is moved to a different cell, it's a drag.
+                    // otherwise, it remains as a down (no change to the pointer to avoid triggering
+                    // new event to listeners).
+                    return !mouseBoardCoordinate.equals(currentValue.boardCoordinate)
+                        ? MousePointer.drag(
+                            this.toBoardCoordinate(event),
+                            this.toBoardCoordinateF(event),
+                            currentValue.boardCoordinate,
+                            event.shiftKey,
+                        )
+                        : null;
+                case MousePointerType.DRAG:
+                    return MousePointer.drag(
+                        this.toBoardCoordinate(event),
+                        this.toBoardCoordinateF(event),
+                        currentValue.mouseDownBoardCoordinate,
+                        event.shiftKey,
+                    );
+                case MousePointerType.IDLE:
+                case MousePointerType.MOVE:
+                case MousePointerType.UP:
+                case MousePointerType.CLICK:
+                case MousePointerType.DOUBLE_CLICK:
+                default:
+                    return MousePointer.move(this.toBoardCoordinate(event), this.toPointPx(event));
+            }
+        };
+        const nextMousePointer = nextValue();
+        if (nextMousePointer) {
+            this.mousePointerMutableFlow.value = nextMousePointer;
+        }
+    };
+
+    private setMouseWheel = (event: WheelEvent) => {
+        event.stopPropagation();
+        event.preventDefault();
+
+        const scrollHorizontalThresholdPx: number = SCROLL_THRESHOLD_PIXEL;
+        const scrollVerticalThresholdPx: number = SCROLL_THRESHOLD_PIXEL;
+
+        const [scrollDeltaX, scrollDeltaY]: [number, number] = this.getScrollDelta(event);
+
+        const wheelDeltaLeft: number =
+            (scrollDeltaX * SCROLL_SPEED_RATIO) / scrollHorizontalThresholdPx;
+        const wheelDeltaTop: number =
+            (scrollDeltaY * SCROLL_SPEED_RATIO) / scrollVerticalThresholdPx;
+        const accumulateWheelDeltaLeft: number = this.mouseWheelDeltaX + wheelDeltaLeft;
+        const accumulateWheelDeltaTop: number = this.mouseWheelDeltaY + wheelDeltaTop;
+
+        const usableDeltaLeft: number = Math.floor(accumulateWheelDeltaLeft);
+        const usableDeltaTop: number = Math.floor(accumulateWheelDeltaTop);
+
+        if (usableDeltaLeft !== 0 || usableDeltaTop !== 0) {
+            const offsetLeft =
+                this.drawingInfo.offsetPx.left - usableDeltaLeft * scrollHorizontalThresholdPx;
+            const offsetTop =
+                this.drawingInfo.offsetPx.top - usableDeltaTop * scrollVerticalThresholdPx;
+            this.drawingOffsetPointPxMutableFlow.value = Point.ofF(offsetLeft, offsetTop);
+        }
+
+        this.mouseWheelDeltaX = accumulateWheelDeltaLeft - usableDeltaLeft;
+        this.mouseWheelDeltaY = accumulateWheelDeltaTop - usableDeltaTop;
+    };
+
+    private getCurrentMousePointer = (): MousePointerInfo => this.mousePointerMutableFlow.value!;
+
+    /**
+     * Returns scroll delta x and y of the wheel event after adjusting with meta keys:
+     * - When Alt/Option key is pressed, swap delta x and delta y (this is for those who use mouse)
+     * - When Shift key is pressed, scroll mode other than [ScrollMode.BOTH] will be flipped
+     *   (vertical -> horizontal, horizontal -> vertical)
+     * - Returns the delta x and delta y of the wheel event according to adjusted scroll mode (with
+     *   Shift key) and delta value (with Alt/Option key):
+     *   - Vertical: delta x = 0
+     *   - Horizontal: delta y = 0
+     *   - Both: delta x and delta y = delta value
+     */
+    private getScrollDelta(wheelEvent: WheelEvent): [number, number] {
+        const deltaX: number = wheelEvent.deltaX;
+        const deltaY: number = wheelEvent.deltaY;
+        const scrollDeltaX: number = wheelEvent.altKey ? deltaY : deltaX;
+        const scrollDeltaY: number = wheelEvent.altKey ? deltaX : deltaY;
+
+        const scrollMode: ScrollMode = this.getScrollMode(wheelEvent);
+
+        switch (scrollMode) {
+            case ScrollMode.BOTH:
+                return [scrollDeltaX, scrollDeltaY];
+            case ScrollMode.VERTICAL:
+                return [0.0, scrollDeltaY];
+            case ScrollMode.HORIZONTAL:
+                return [scrollDeltaX, 0.0];
+        }
+    }
+
+    private getScrollMode = (wheelEvent: WheelEvent): ScrollMode => {
+        switch (this.scrollModeFlow.value) {
+            case ScrollMode.BOTH:
+                return this.scrollModeFlow.value;
+            case ScrollMode.VERTICAL:
+                return wheelEvent.shiftKey ? ScrollMode.HORIZONTAL : ScrollMode.VERTICAL;
+            case ScrollMode.HORIZONTAL:
+                return wheelEvent.shiftKey ? ScrollMode.VERTICAL : ScrollMode.HORIZONTAL;
+            default:
+                throw Error(`Unknown scroll mode: ${this.scrollModeFlow.value}`);
+        }
+    };
+
+    private toBoardCoordinate = (mouseEvent: MouseEvent): Point =>
+        new Point(
+            this.drawingInfo.toBoardColumn(mouseEvent.offsetX),
+            this.drawingInfo.toBoardRow(mouseEvent.offsetY),
+        );
+
+    private toBoardCoordinateF = (mouseEvent: MouseEvent): PointF =>
+        new PointF(
+            this.drawingInfo.toBoardColumnF(mouseEvent.offsetX),
+            this.drawingInfo.toBoardRowF(mouseEvent.offsetY),
+        );
+
+    private toPointPx = (mouseEvent: MouseEvent): Point =>
+        new Point(mouseEvent.offsetX, mouseEvent.offsetY);
+}
+
+/**
+ * A class for detecting double click.
+ * If two mouse ups happen within 500ms, it's a double click.
+ */
+class MouseDoubleClickDetector {
+    private lastMouseUpMillis: number = 0;
+    private mouseUpCount: number = 0;
+
+    onMouseUp(): boolean {
+        const currentTime = Date.now();
+        const isDoubleClick = currentTime - this.lastMouseUpMillis < 500 && this.mouseUpCount > 0;
+        this.lastMouseUpMillis = currentTime;
+        this.mouseUpCount += 1;
+
+        return isDoubleClick;
+    }
+
+    reset(): void {
+        this.lastMouseUpMillis = 0;
+        this.mouseUpCount = 0;
+    }
+}
diff --git a/monosketch-svelte/src/lib/mono/workspace/mouse/mouse-pointer.test.ts b/monosketch-svelte/src/lib/mono/workspace/mouse/mouse-pointer.test.ts
new file mode 100644
index 000000000..aad93683f
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/workspace/mouse/mouse-pointer.test.ts
@@ -0,0 +1,49 @@
+import { describe, expect, test } from 'vitest';
+import { MousePointer, MousePointerType } from '$mono/workspace/mouse/mouse-pointer';
+import { Point } from '$libs/graphics-geo/point';
+
+describe('equals test', () => {
+    describe('idle', () => {
+        const idle = MousePointer.idle;
+        test('idle', () => {
+            expect(idle.equals(MousePointer.idle)).toBe(true);
+        });
+
+        test('with other types', () => {
+            expect(
+                idle.equals(
+                    MousePointer.down(
+                        idle.boardCoordinate,
+                        idle.clientCoordinate,
+                        idle.isWithShiftKey,
+                    ),
+                ),
+            ).toBe(false);
+        });
+    });
+
+    describe('mouse down', () => {
+        const mouseDown = MousePointer.down(Point.of(1, 2), Point.of(3, 4), false);
+        test('with mouse down', () => {
+            expect(mouseDown.equals(mouseDown)).toBe(true);
+            expect(mouseDown.equals(MousePointer.down(Point.of(1, 2), Point.of(3, 4), false))).toBe(
+                true,
+            );
+            expect(mouseDown.equals(MousePointer.down(Point.of(1, 2), Point.of(3, 4), true))).toBe(
+                false,
+            );
+            expect(
+                mouseDown.equals({
+                    ...mouseDown,
+                    type: MousePointerType.DRAG,
+                }),
+            ).toBe(false);
+            expect(
+                mouseDown.equals({
+                    ...mouseDown,
+                    isWithShiftKey: true,
+                }),
+            ).toBe(false);
+        });
+    });
+});
diff --git a/monosketch-svelte/src/lib/mono/workspace/mouse/mouse-pointer.ts b/monosketch-svelte/src/lib/mono/workspace/mouse/mouse-pointer.ts
new file mode 100644
index 000000000..35d2eb926
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/workspace/mouse/mouse-pointer.ts
@@ -0,0 +1,123 @@
+import { Point, PointF } from '$libs/graphics-geo/point';
+import type { Comparable } from '$libs/comparable';
+
+export enum MousePointerType {
+    IDLE,
+    MOVE,
+    DOWN,
+    UP,
+    DRAG,
+    CLICK,
+    DOUBLE_CLICK,
+}
+
+export interface MousePointerInfo extends Comparable {
+    type: MousePointerType;
+    boardCoordinate: Point;
+    clientCoordinate: Point;
+    boardCoordinateF: PointF;
+    mouseDownBoardCoordinate: Point;
+    isWithShiftKey: boolean;
+}
+
+const MousePointerInfoDefaults: MousePointerInfo = {
+    type: MousePointerType.IDLE,
+    boardCoordinate: Point.ZERO,
+    clientCoordinate: Point.ZERO,
+    boardCoordinateF: new PointF(0, 0),
+    mouseDownBoardCoordinate: Point.ZERO,
+    isWithShiftKey: false,
+
+    equals(other: unknown): boolean {
+        return (
+            isMousePointerInfo(other) &&
+            this.type === other.type &&
+            this.boardCoordinate.equals(other.boardCoordinate) &&
+            this.clientCoordinate.equals(other.clientCoordinate) &&
+            this.boardCoordinateF.equals(other.boardCoordinateF) &&
+            this.mouseDownBoardCoordinate.equals(other.mouseDownBoardCoordinate) &&
+            this.isWithShiftKey === other.isWithShiftKey
+        );
+    },
+};
+
+const Idle = {
+    ...MousePointerInfoDefaults,
+};
+
+export const MousePointer = {
+    idle: Idle,
+    move: (boardCoordinate: Point, clientCoordinate: Point) => {
+        return {
+            ...MousePointerInfoDefaults,
+            type: MousePointerType.MOVE,
+            boardCoordinate,
+            clientCoordinate,
+        };
+    },
+
+    down: (boardCoordinate: Point, clientCoordinate: Point, isWithShiftKey: boolean) => {
+        return {
+            ...MousePointerInfoDefaults,
+            type: MousePointerType.DOWN,
+            boardCoordinate,
+            clientCoordinate,
+            isWithShiftKey,
+        };
+    },
+
+    up: (
+        boardCoordinate: Point,
+        boardCoordinateF: PointF,
+        mouseDownBoardCoordinate: Point,
+        isWithShiftKey: boolean,
+    ) => {
+        return {
+            ...MousePointerInfoDefaults,
+            type: MousePointerType.UP,
+            boardCoordinate,
+            boardCoordinateF,
+            mouseDownBoardCoordinate,
+            isWithShiftKey,
+        };
+    },
+
+    drag: (
+        boardCoordinate: Point,
+        boardCoordinateF: PointF,
+        mouseDownBoardCoordinate: Point,
+        isWithShiftKey: boolean,
+    ) => {
+        return {
+            ...MousePointerInfoDefaults,
+            type: MousePointerType.DRAG,
+            boardCoordinate,
+            boardCoordinateF,
+            mouseDownBoardCoordinate,
+            isWithShiftKey,
+        };
+    },
+
+    click: (boardCoordinate: Point, isWithShiftKey: boolean) => {
+        return {
+            ...MousePointerInfoDefaults,
+            type: MousePointerType.CLICK,
+            boardCoordinate,
+            isWithShiftKey,
+        };
+    },
+
+    doubleClick: (boardCoordinate: Point) => {
+        return {
+            ...MousePointerInfoDefaults,
+            type: MousePointerType.DOUBLE_CLICK,
+            boardCoordinate,
+        };
+    },
+};
+
+const isMousePointerInfo = (value: unknown): value is MousePointerInfo =>
+    typeof value === 'object' &&
+    value !== null &&
+    'type' in value &&
+    (value as MousePointerInfo).type in MousePointerType;
diff --git a/monosketch-svelte/src/lib/mono/workspace/workspace-view-controller.ts b/monosketch-svelte/src/lib/mono/workspace/workspace-view-controller.ts
new file mode 100644
index 000000000..a9edd48d3
--- /dev/null
+++ b/monosketch-svelte/src/lib/mono/workspace/workspace-view-controller.ts
@@ -0,0 +1,190 @@
+import type { Workspace } from "$app/workspace";
+import { Point } from "$libs/graphics-geo/point";
+import type { AppUiStateManager } from "$mono/ui-state-manager/app-ui-state-manager";
+import { AxisCanvasViewController } from '$mono/workspace/canvas/axis-canvas-view-controller';
+import { DrawingInfo, DrawingInfoController } from '$mono/workspace/drawing-info';
+import { Flow, LifecycleOwner } from '$libs/flow';
+import { WindowViewModel } from '$mono/window/window-viewmodel';
+import { GridCanvasViewController } from '$mono/workspace/canvas/grid-canvas-view-controller';
+import { InteractionCanvasViewController } from '$mono/workspace/canvas/interaction-canvas-view-controller';
+import type { InteractionBound, InteractionPoint } from '$mono/shape/interaction-bound';
+import { MouseEventObserver } from '$mono/workspace/mouse/mouse-event-observer';
+import { MousePointerType } from '$mono/workspace/mouse/mouse-pointer';
+import type { AppContext } from '$app/app-context';
+import { KeyCommandType } from '$mono/keycommand';
+import type { Rect } from '$libs/graphics-geo/rect';
+import { SelectionCanvasViewController } from '$mono/workspace/canvas/selection-canvas-view-controller';
+import { BoardCanvasViewController } from '$mono/workspace/canvas/board-canvas-view-controller';
+import { MonoBoard } from '$mono/monobitmap/board/board';
+
+/**
+ * The main controller of the workspace view.
+ */
+export class WorkspaceViewController extends LifecycleOwner implements Workspace {
+    private canvasViewController: CanvasViewController;
+    private drawingInfoController: DrawingInfoController;
+
+    private mouseEventObserver: MouseEventObserver;
+
+    constructor(
+        private appContext: AppContext,
+        private readonly container: HTMLDivElement,
+        drawingInfoCanvas: HTMLCanvasElement,
+        gridCanvas: HTMLCanvasElement,
+        boardCanvas: HTMLCanvasElement,
+        axisCanvas: HTMLCanvasElement,
+        interactionCanvas: HTMLCanvasElement,
+        selectionCanvas: HTMLCanvasElement,
+    ) {
+        super();
+        this.drawingInfoController = new DrawingInfoController(drawingInfoCanvas);
+        this.drawingInfoController.setFont(14);
+
+        this.canvasViewController = new CanvasViewController(
+            appContext.monoBoard,
+            gridCanvas,
+            boardCanvas,
+            axisCanvas,
+            interactionCanvas,
+            selectionCanvas,
+            this.appContext.appUiStateManager,
+        );
+
+        this.mouseEventObserver = new MouseEventObserver(
+            this,
+            this.container,
+            this.drawingInfoController.drawingInfoFlow,
+            this.appContext.appUiStateManager.scrollModeFlow,
+        );
+
+        appContext.setWorkspace(this);
+    }
+
+    protected onStartInternal() {
+        WindowViewModel.windowSizeUpdateEventFlow.observe(this, () => {
+            this.drawingInfoController.setSize(
+                this.container.clientWidth,
+                this.container.clientHeight,
+            );
+        });
+        this.observeMouseInteractions();
+
+        this.drawingInfoController.drawingInfoFlow?.observe(this, (drawingInfo) => {
+            this?.canvasViewController.setDrawingInfo(drawingInfo);
+        });
+        this.appContext.appUiStateManager.themeModeFlow.observe(this, () => {
+            this?.canvasViewController.fullyRedraw();
+        });
+        this.appContext.appUiStateManager.fontSizeFlow.observe(this, (fontSize) => {
+            this.drawingInfoController.setFont(fontSize);
+        });
+        this.appContext.appUiStateManager.fontReadyFlow.observe(this, (fontReady) => {
+            if (fontReady) {
+                this.canvasViewController.fullyRedraw();
+            }
+        });
+
+        this.canvasViewController.fullyRedraw();
+    }
+
+    private observeMouseInteractions() {
+        this.mouseEventObserver.mousePointerFlow.observe(this, (mousePointer) => {
+            this?.canvasViewController?.setMouseMoving(mousePointer.type === MousePointerType.DRAG);
+        });
+        this.mouseEventObserver.drawingOffsetPointPxFlow.observe(
+            this,
+            this.drawingInfoController.setOffset,
+        );
+
+        const shiftKeyStateFlow = this.appContext.appUiStateManager.keyCommandFlow.map(
+            (keyCommand) => keyCommand.command === KeyCommandType.SHIFT_KEY,
+        );
+        this.mouseEventObserver.observeEvents(this, shiftKeyStateFlow);
+    };
+
+    getDrawingInfo(): DrawingInfo {
+        return this.drawingInfoController.drawingInfoFlow.value!;
+    }
+
+    setDrawingOffset(offsetPx: Point) {
+        this.mouseEventObserver?.forceUpdateOffset(offsetPx);
+    }
+
+    get drawingOffsetPointPxFlow(): Flow<Point> {
+        return this.mouseEventObserver.drawingOffsetPointPxFlow;
+    }
+}
+
+class CanvasViewController {
+    private readonly axisCanvasViewController: AxisCanvasViewController;
+    private readonly gridCanvasViewController: GridCanvasViewController;
+    private readonly boardCanvasViewController: BoardCanvasViewController;
+    private readonly interactionCanvasViewController: InteractionCanvasViewController;
+    private readonly selectionCanvasViewController: SelectionCanvasViewController;
+
+    constructor(
+        monoBoard: MonoBoard,
+        gridCanvas: HTMLCanvasElement,
+        boardCanvas: HTMLCanvasElement,
+        axisCanvas: HTMLCanvasElement,
+        interactionCanvas: HTMLCanvasElement,
+        selectionCanvas: HTMLCanvasElement,
+        appUiStateManager: AppUiStateManager,
+    ) {
+        this.axisCanvasViewController = new AxisCanvasViewController(axisCanvas, appUiStateManager);
+        this.gridCanvasViewController = new GridCanvasViewController(gridCanvas, appUiStateManager);
+        this.boardCanvasViewController = new BoardCanvasViewController(
+            boardCanvas,
+            monoBoard,
+            appUiStateManager,
+        );
+        this.interactionCanvasViewController = new InteractionCanvasViewController(
+            interactionCanvas,
+            appUiStateManager,
+        );
+        this.selectionCanvasViewController = new SelectionCanvasViewController(
+            selectionCanvas,
+            appUiStateManager,
+        );
+    }
+
+    setDrawingInfo(drawInfo: DrawingInfo) {
+        this.axisCanvasViewController.setDrawingInfo(drawInfo);
+        this.gridCanvasViewController.setDrawingInfo(drawInfo);
+        this.boardCanvasViewController.setDrawingInfo(drawInfo);
+        this.interactionCanvasViewController.setDrawingInfo(drawInfo);
+        this.selectionCanvasViewController.setDrawingInfo(drawInfo);
+    }
+
+    fullyRedraw() {
+        this.axisCanvasViewController.draw();
+        this.gridCanvasViewController.draw();
+        this.boardCanvasViewController.draw();
+        this.interactionCanvasViewController.draw();
+        this.selectionCanvasViewController.draw();
+    };
+
+    drawInteractionBounds(interactionBounds: InteractionBound[]) {
+        this.interactionCanvasViewController.setInteractionBounds(interactionBounds);
+        this.interactionCanvasViewController.draw();
+    };
+
+    drawSelectionBound(selectionBound?: Rect) {
+        this.selectionCanvasViewController.setSelectingBound(selectionBound);
+        this.selectionCanvasViewController.draw();
+    };
+
+    getInteractionPoint(pointPx: Point): InteractionPoint | null {
+        return this.interactionCanvasViewController.getInteractionPoint(pointPx);
+    }
+
+    setMouseMoving(isMouseMoving: boolean) {
+        this.interactionCanvasViewController.setMouseMoving(isMouseMoving);
+    };
+
+    drawBoard() {
+        this.boardCanvasViewController.draw();
+        this.interactionCanvasViewController.draw();
+        this.selectionCanvasViewController.draw();
+    };
+}
diff --git a/monosketch-svelte/src/lib/style/animation.scss b/monosketch-svelte/src/lib/style/animation.scss
new file mode 100644
index 000000000..637a2beaf
--- /dev/null
+++ b/monosketch-svelte/src/lib/style/animation.scss
@@ -0,0 +1,40 @@
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+        display: none;
+    }
+}
+
+@keyframes moveIn {
+    0% {
+        transform: translateY(10%);
+    }
+
+    100% {
+        transform: translateY(0%);
+    }
+}
+
+@keyframes moveOut {
+    0% {
+        transform: translateY(0%);
+    }
+
+    100% {
+        transform: translateY(10%);
+    }
+}
diff --git a/monosketch-svelte/src/lib/style/main.scss b/monosketch-svelte/src/lib/style/main.scss
new file mode 100644
index 000000000..d9cd8ad5c
--- /dev/null
+++ b/monosketch-svelte/src/lib/style/main.scss
@@ -0,0 +1,21 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');
+@import 'variables';
+
+* {
+    box-sizing: border-box;
+}
+html,
+body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: $uiTextFont;
+}
+
+body {
+    background: var(--workspace-bg-color);
+}
+
+@import 'animation';
+@import 'theme';
diff --git a/monosketch-svelte/src/lib/style/theme-utils.scss b/monosketch-svelte/src/lib/style/theme-utils.scss
new file mode 100644
index 000000000..3a341fff9
--- /dev/null
+++ b/monosketch-svelte/src/lib/style/theme-utils.scss
@@ -0,0 +1,19 @@
+// Define the style mixin
+@mixin theme($themeColors, $selector: 'body') {
+    &,
+    &.light {
+        #{$selector} {
+            @each $property, $values in $themeColors {
+                #{$property}: nth($values, 1);
+            }
+        }
+    }
+
+    &.dark {
+        #{$selector} {
+            @each $property, $values in $themeColors {
+                #{$property}: nth($values, 2);
+            }
+        }
+    }
+}
diff --git a/monosketch-svelte/src/lib/style/theme.scss b/monosketch-svelte/src/lib/style/theme.scss
new file mode 100644
index 000000000..2ba57ba73
--- /dev/null
+++ b/monosketch-svelte/src/lib/style/theme.scss
@@ -0,0 +1,98 @@
+@import 'theme-utils';
+
+$themeMap: (
+  // Header overall
+        --header-bg: (#2c2c2c, #2c2c2c),
+        --header-color: (#fff, #fff),
+  // Header - App action icon
+        --nav-action-hover-bg: (#1c1c1c, #1c1c1c),
+        --nav-action-selected-border: (#fff, #fff),
+  // Tooltip
+        --tooltip-bg: (#000000dd, #000000dd),
+        --tooltip-color: (#fff, #fff),
+  // Workspace
+        --workspace-bg-color: (#fff, #121212),
+        --workspace-edittext-color: (#000, #fff),
+  // Shape tool - Overall
+        --shapetool-bg-color: (#fafafa, #1f1f1f),
+        --shapetool-main-divider-color: (#bbb, #616161),
+  // Shape tool - Text Input component
+        --text-input-border-color: (#e6e6e6, #565656),
+        --text-input-border-focus-color: (#027fe6, #e8b32f),
+        --text-input-label-color: (#6b6a6a, #9f9f9f),
+        --text-input-value-color: (#000, #fff),
+  // Shape tool - Option cloud
+        --comp-option-cloud-border-color: (#bbb, #f0f0f0),
+        --comp-option-cloud-border-selected-color: (#027fe6, #ffb800),
+  // Shape tool - Footer
+        --shapetool-footer-color: (#aaa, #aaa),
+        --shapetool-footer-hover-color: (#888, #888),
+        --shapetool-footer-active-color: (#999, #999),
+  // Shape tool - Indicator
+        --shapetool-indicator-color: (#888, #888),
+  // Shape tool - Section
+        --shapetool-section-divider-color: (#bbb, #6d6d6d),
+        --shapetool-section-title-color: (#6d6d6d, #eaeaea),
+        --shapetool-section-content-color: (#000, #f0f0f0),
+  // Shape tool - Tool
+        --shapetool-tool-title-color: (#1f1f1f, #e0e0e0),
+        --shapetool-tool-subtitle-color: (#a0a0a0, #979797),
+  // Shape tool - Reorder
+        --shapetool-reorder-hover-bg: (#efefef, #333333),
+  // Common modal
+        --modal-background-bg: (rgba(0, 0, 0, 0.7), rgba(30, 30, 30, 0.3)),
+        --modal-container-bg: (#f3f3f3, #313131),
+        --modal-close-button-color: (#666, #ffffff),
+        --modal-title-color: (rgba(0, 0, 0, 0.68), #fff),
+        --modal-content-color: (#000, #ffffff),
+        --modal-action-color: (#037de1, #c08b03),
+        --modal-action-hover-color: (#2598f7, #dfa104),
+        --modal-action-pressed-color: (#0360ac, #8e6601),
+  // Keyboard shortcuts
+        --keyboard-content-key-bg: (#fff, #262626),
+        --keyboard-content-key-border-color: (rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15)),
+        --keyboard-content-key-color: (rgba(0, 0, 0, 0.54), rgba(255, 255, 255, 0.88)),
+  // Main dropdown menu
+        --mainmenu-divider-color: (#bdbdbd, #6b6b6b),
+        --mainmenu-item-color: (rgb(36, 41, 47), #fff),
+        --mainmenu-item-hover-bg: (#e7e6e6, #414141),
+        --mainmenu-item-action-hover-bg: (#dcdcdc, #565555),
+  // Export text
+        --exporttext-container-bg: (#fff, #151515),
+        --exporttext-content-color: (#000, #fff),
+  // Project management
+        --danger-item-bg: (#e53935, #e53935)
+);
+
+$mainModalColors: (
+        --titleText: (rgb(28, 26, 26), #FFF),
+        --contentText: (#5e5d62, #f2f2f2),
+);
+
+$primaryActionThemeColors: (
+        --primary-action-color: (#007bff, #cc8108),
+        --primary-action-hover-color: (#328ced, #daa113),
+        --primary-action-pressed-color: (#0062cc, #ab7a08),
+);
+
+$primaryActionDangerThemeColors: (
+        --primary-action-color: (#E53935, #E53935),
+        --primary-action-hover-color: (#FF5252, #FF5252),
+        --primary-action-pressed-color: (#C62828, #C62828),
+);
+
+$secondaryActionThemeColors: (
+        --secondary-action-border-color: (#D9D8DC, #74727a),
+        --secondary-action-text-color: (#323136, #e0dce9),
+        --secondary-action-hover-color: (#6c757d, #3e3d43),
+        --secondary-action-pressed-color: (#424950, #262628),
+);
+
+// Apply the style values
+:root {
+  @include theme($themeMap);
+  @include theme($mainModalColors, ".dialog-modal");
+  @include theme($primaryActionThemeColors, ".dialog-modal .primary");
+  @include theme($primaryActionDangerThemeColors, ".dialog-modal .primary.danger");
+  @include theme($secondaryActionThemeColors, ".dialog-modal .secondary");
+}
diff --git a/monosketch-svelte/src/lib/style/variables.scss b/monosketch-svelte/src/lib/style/variables.scss
new file mode 100644
index 000000000..c6384322e
--- /dev/null
+++ b/monosketch-svelte/src/lib/style/variables.scss
@@ -0,0 +1,20 @@
+// Font
+$monospaceFont: 'Jetbrains Mono', Menlo, 'Courier New', Courier, monospace;
+$uiTextFont: 'Roboto', Arial, serif;
+
+// Size
+$nav-height: 48px;
+
+$canvas-left: 33px;
+$canvas-top: 18px;
+
+// Index
+$keyboard-shortcuts-zindex: 200;
+$export-text-zindex: 201;
+$edit-text-zindex: 202;
+$dropdown-menu-zindex: 203;
+$rename-project-modal-zindex: 205;
+$all-projects-modal-zindex: 500;
+$remove-project-modal-zindex: 501;
+
+$tooltip-zindex: 10000;
diff --git a/monosketch-svelte/src/lib/ui/common/SvgIcon.svelte b/monosketch-svelte/src/lib/ui/common/SvgIcon.svelte
new file mode 100644
index 000000000..b12b6773f
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/common/SvgIcon.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+export let size: number | number[];
+export let viewBoxSize: number | number[] | undefined = undefined;
+export let fillColor: string = 'currentColor';
+
+let viewBoxSizeValue = viewBoxSize !== undefined ? viewBoxSize : size;
+
+let width = size instanceof Array ? size[0] : size;
+let height = size instanceof Array ? size[1] : size;
+let viewBoxWidth = viewBoxSizeValue instanceof Array ? viewBoxSizeValue[0] : viewBoxSizeValue;
+let viewBoxHeight = viewBoxSizeValue instanceof Array ? viewBoxSizeValue[1] : viewBoxSizeValue;
+</script>
+
+<svg {width} {height} viewBox="0 0 {viewBoxWidth} {viewBoxHeight}" fill="{fillColor}">
+    <slot />
+</svg>
diff --git a/monosketch-svelte/src/lib/ui/modal/common/AlertDialog.ts b/monosketch-svelte/src/lib/ui/modal/common/AlertDialog.ts
new file mode 100644
index 000000000..76dc130b0
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/common/AlertDialog.ts
@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2025, tuanchauict
+ */
+
+import Dialog from "$ui/modal/common/Dialog.svelte";
+
+export type ActionButtonModel = {
+    text: string;
+    onClick: () => void;
+}
+
+export type AlertDialogModel = {
+    title?: string;
+    message?: string;
+    dismissOnClickingOutside?: boolean;
+    primaryAction?: ActionButtonModel;
+    secondaryAction?: ActionButtonModel;
+    onDismiss?: () => void;
+}
+
+export function AlertDialog(props: AlertDialogModel) {
+    const primaryAction = props.primaryAction ? {
+        text: props.primaryAction.text,
+        onClick: () => {
+            props.primaryAction!.onClick();
+            dialog.$destroy();
+        },
+    } : undefined;
+    const secondaryAction = props.secondaryAction ? {
+        text: props.secondaryAction.text,
+        onClick: () => {
+            props.secondaryAction!.onClick();
+            dialog.$destroy();
+        },
+    } : undefined;
+
+    const dialog = new Dialog({
+        target: document.querySelector('#alert')!,
+        props: {
+            model: {
+                ...props,
+                primaryAction,
+                secondaryAction,
+                onDismiss: () => {
+                    props.onDismiss?.();
+                    dialog.$destroy();
+                }
+            },
+        },
+    });
+}
diff --git a/monosketch-svelte/src/lib/ui/modal/common/Dialog.svelte b/monosketch-svelte/src/lib/ui/modal/common/Dialog.svelte
new file mode 100644
index 000000000..4f7c38b91
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/common/Dialog.svelte
@@ -0,0 +1,162 @@
+<!--
+  - Copyright (c) 2024, tuanchauict
+  -->
+
+<script lang="ts">
+    import { fade, slide } from "svelte/transition";
+    import type { AlertDialogModel } from "$ui/modal/common/AlertDialog";
+
+    export let model: AlertDialogModel;
+
+    let title = model.title || '';
+    let message = model.message || '';
+    let primaryAction = model.primaryAction;
+    let secondaryAction = model.secondaryAction;
+    let dismissOnClickingOutside = model.dismissOnClickingOutside ?? true;
+    let onDismiss = model.onDismiss || (() => {});
+
+    function handlePrimaryAction() {
+        primaryAction?.onClick();
+        onDismiss();
+    }
+
+    function handleSecondaryAction() {
+        secondaryAction?.onClick();
+        onDismiss();
+    }
+
+    function handleClickOutside(event: Event) {
+        if (dismissOnClickingOutside && event.target === event.currentTarget) {
+            onDismiss();
+        }
+    }
+</script>
+<div class="dialog-modal" role="button" tabindex="-1"
+     transition:fade={{ duration: 200 }}
+     on:click="{handleClickOutside}"
+     on:keydown="{(e) => e.key === 'Escape' && handleClickOutside(e)}"
+>
+    <div class="modal-content" role="button" tabindex="-1"
+            transition:slide={{ duration: 200 }}
+         on:click|preventDefault|stopPropagation on:keydown>
+        {#if title}
+            <h2>{title}</h2>
+        {/if}
+        {#if message}
+            <p class:no-title={!title}>{message}</p>
+        {:else }
+            <slot/>
+        {/if}
+        {#if primaryAction || secondaryAction}
+            <div class="actions">
+                {#if secondaryAction}
+                    <button class="secondary" on:click="{handleSecondaryAction}">{secondaryAction.text}</button>
+                {/if}
+                {#if primaryAction}
+                    <button class="primary" on:click="{handlePrimaryAction}">{primaryAction.text}</button>
+                {/if}
+            </div>
+        {/if}
+    </div>
+</div>
+<style lang="scss">
+    @import "../../../style/variables";
+
+    .dialog-modal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--modal-background-bg);
+    }
+
+    .modal-content {
+        background: var(--modal-container-bg);
+        border: 1px solid var(--modal-container-bg);
+        min-width: 350px;
+        max-width: 450px;
+        border-radius: 5px;
+        padding: 16px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+        font-family: $monospaceFont;
+
+        display: flex;
+        flex-direction: column;
+    }
+
+    h2 {
+        font-size: 19px;
+        margin: 4px 8px 8px;
+        color: var(--modal-title-color);
+    }
+
+    p {
+        font-size: 14px;
+        line-height: 1.4;
+        margin: 0 8px 8px;
+        color: var(--contentText);
+
+        &.no-title {
+            font-size: 16px;
+        }
+    }
+
+    .actions {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 16px;
+        font-family: $monospaceFont;
+    }
+
+    button {
+        margin-left: 8px;
+        font-size: 14px;
+        cursor: pointer;
+        user-select: none;
+        border-radius: 4px;
+        border: 1px solid transparent;
+        padding: 4px 10px;
+        background: none;
+        min-width: 50px;
+        font-weight: bold;
+        font-family: $monospaceFont;
+
+        &.primary {
+            background: var(--primary-action-color);
+            color: white;
+        }
+
+        &.secondary {
+            border-color: var(--secondary-action-border-color);
+            color: var(--secondary-action-text-color);
+        }
+
+        &:hover {
+            &.primary {
+                background: var(--primary-action-hover-color);
+            }
+
+            &.secondary {
+                background-color: var(--secondary-action-hover-color);
+                color: white;
+                border-color: transparent;
+            }
+        }
+
+        &:active {
+            &.primary {
+                background: var(--primary-action-pressed-color);
+            }
+
+            &.secondary {
+                background-color: var(--secondary-action-pressed-color);
+                color: white;
+                border-color: transparent;
+            }
+        }
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/modal/common/NoBackgroundModal.svelte b/monosketch-svelte/src/lib/ui/modal/common/NoBackgroundModal.svelte
new file mode 100644
index 000000000..4d7edc161
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/common/NoBackgroundModal.svelte
@@ -0,0 +1,114 @@
+<!--
+Elements inside this modal should not block click event propagation.
+This helps the modals identify if the click event was inside the modal or outside to
+dismiss the modal correctly.
+-->
+
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import Portal from "$ui/modal/common/Portal.svelte";
+
+    export let onDismiss: () => void;
+    export let left: number = 0;
+    export let top: number = 0;
+    export let width: number = 0;
+    export let height: number | null = null;
+    export let customStyle: string = '';
+
+    let timeout: number | null = null;
+    let checkbox: HTMLInputElement | null = null;
+    $: adjustedLeft = left + width > window.innerWidth ? window.innerWidth - width : left;
+
+    onMount(() => {
+        if (checkbox) {
+            checkbox.focus();
+        }
+    });
+
+    function onKeyDown(event: KeyboardEvent) {
+        if (event.key === 'Escape') {
+            dismiss();
+        }
+    }
+
+    function onClick() {
+        if (!timeout) {
+            return;
+        }
+        clearTimeout(timeout);
+        timeout = null;
+
+        // Ensure the modal is focused when clicked inside.
+        if (document.hasFocus()) {
+            checkbox?.focus();
+        }
+    }
+
+    function onFocusIn() {
+        if (timeout) {
+            clearTimeout(timeout);
+
+            timeout = null;
+        }
+    }
+
+    function onFocusOut() {
+        if (document.hasFocus()) {
+            timeout = setTimeout(dismiss, 20);
+        }
+    }
+
+    function dismiss() {
+        checkbox = null;
+        onDismiss();
+    }
+</script>
+<Portal>
+    {#if customStyle}
+        <div
+                class="modal"
+                role="button"
+                tabindex="-1"
+                on:click="{onClick}"
+                on:keydown="{onKeyDown}"
+                on:focusin="{onFocusIn}"
+                on:focusout="{onFocusOut}"
+                style="{customStyle}"
+        >
+            <input type="checkbox" bind:this="{checkbox}"/>
+            <slot/>
+        </div>
+    {:else }
+        <div
+                class="modal"
+                role="button"
+                tabindex="-1"
+                on:click="{onClick}"
+                on:keydown="{onKeyDown}"
+                on:focusin="{onFocusIn}"
+                on:focusout="{onFocusOut}"
+                style:left="{adjustedLeft}px"
+                style:top="{top}px"
+                style:width="{width}px"
+                style:height="{height}px"
+        >
+            <input type="checkbox" bind:this="{checkbox}"/>
+            <slot/>
+        </div>
+    {/if}
+</Portal>
+<style>
+    .modal {
+        position: fixed;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    input[type='checkbox'] {
+        position: fixed;
+        left: -1000px;
+        width: 0;
+        height: 0;
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/modal/common/Portal.svelte b/monosketch-svelte/src/lib/ui/modal/common/Portal.svelte
new file mode 100644
index 000000000..50219553b
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/common/Portal.svelte
@@ -0,0 +1,21 @@
+<!--
+  - Copyright (c) 2025, tuanchauict
+  -->
+
+<script lang="ts">
+    export let parent: string = '#modal';
+
+    function portal(node: HTMLElement) {
+        document.querySelector(parent)!.appendChild(node);
+
+        return {
+            destroy() {
+                node.remove();
+            },
+        };
+    }
+</script>
+
+<div use:portal class="portal">
+    <slot/>
+</div>
diff --git a/monosketch-svelte/src/lib/ui/modal/keyboard-shortcut/KeyboardShortcutContent.svelte b/monosketch-svelte/src/lib/ui/modal/keyboard-shortcut/KeyboardShortcutContent.svelte
new file mode 100644
index 000000000..03b5f6c96
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/keyboard-shortcut/KeyboardShortcutContent.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+import ShortcutTable from './ShortcutTable.svelte';
+import { shortcuts } from './model';
+</script>
+
+<section>
+    <div class="col1">
+        <ShortcutTable shortcuts="{shortcuts[0]}" />
+    </div>
+    <div class="col2">
+        <ShortcutTable shortcuts="{shortcuts[1]}" />
+    </div>
+    <div class="col3">
+        <ShortcutTable shortcuts="{shortcuts[2]}" />
+    </div>
+</section>
+
+<style lang="scss">
+section {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-start;
+    margin: 0 0 1.5rem 0;
+    gap: 24px;
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/modal/keyboard-shortcut/KeyboardShortcutModal.svelte b/monosketch-svelte/src/lib/ui/modal/keyboard-shortcut/KeyboardShortcutModal.svelte
new file mode 100644
index 000000000..2cb214771
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/keyboard-shortcut/KeyboardShortcutModal.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+    import KeyboardShortcutContent from './KeyboardShortcutContent.svelte';
+    import SvgIcon from '../../common/SvgIcon.svelte';
+    import Portal from "$ui/modal/common/Portal.svelte";
+
+    export let onDismiss: () => void;
+
+</script>
+
+<Portal parent="#keyboard-shortcuts">
+    <div class="modal">
+        <div class="modal-content">
+            <h3>Keyboard Shortcuts</h3>
+
+            <KeyboardShortcutContent/>
+        </div>
+
+        <button on:click="{onDismiss}">
+            <SvgIcon size="{16}">
+                <path
+                        d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z"
+                ></path>
+                <path
+                        d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z"
+                ></path>
+            </SvgIcon>
+        </button>
+    </div>
+</Portal>
+<style lang="scss">
+    @import '../../../style/variables.scss';
+
+    .modal {
+        background: var(--modal-container-bg);
+        color: var(--modal-content-color);
+
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+
+    .modal-content {
+        background: var(--modal-content-bg);
+        color: var(--modal-content-color);
+
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+    }
+
+    h3 {
+        margin: 16px 0 20px;
+        text-align: center;
+        font-weight: 300;
+        font-size: 18px;
+        font-family: $monospaceFont;
+        color: var(--modal-title-color);
+    }
+
+    button {
+        position: absolute;
+        right: 0;
+        top: 0;
+        border: 0;
+        background: transparent;
+        padding: 12px;
+        cursor: pointer;
+
+        color: inherit;
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/modal/keyboard-shortcut/ShortcutRow.svelte b/monosketch-svelte/src/lib/ui/modal/keyboard-shortcut/ShortcutRow.svelte
new file mode 100644
index 000000000..44595ed4e
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/keyboard-shortcut/ShortcutRow.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+import type { Shortcut } from './model';
+
+export let shortcut: Shortcut;
+</script>
+
+<tr>
+    <td>
+        <span class="description">{shortcut.description}</span>
+    </td>
+    <td class="keys">
+        {#each shortcut.keys as key}
+            <span class="key" class:bold="{key.length === 1}">{key}</span>
+        {/each}
+    </td>
+</tr>
+
+<style lang="scss">
+@import '../../../style/variables.scss';
+
+.description {
+    font-family: $monospaceFont;
+    font-size: 0.8em;
+    color: #666;
+    margin-left: 0.5em;
+}
+
+.keys {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: flex-end;
+    margin: 0 4px;
+}
+
+.key {
+    font-family: $monospaceFont;
+    display: inline-block;
+    text-align: center;
+
+    padding: 3px 4px;
+    min-width: 24px;
+    border-radius: 4px;
+    background: var(--keyboard-content-key-bg);
+    border: 1px solid var(--keyboard-content-key-border-color);
+    font-size: 13px;
+    color: var(--keyboard-content-key-color);
+    line-height: 1.2;
+    margin-right: 4px;
+
+    &.bold {
+        font-weight: bold;
+    }
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/modal/keyboard-shortcut/ShortcutTable.svelte b/monosketch-svelte/src/lib/ui/modal/keyboard-shortcut/ShortcutTable.svelte
new file mode 100644
index 000000000..a0cc54dc6
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/keyboard-shortcut/ShortcutTable.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+import ShortcutRow from './ShortcutRow.svelte';
+import type { Shortcut } from './model';
+
+export let shortcuts: Shortcut[];
+</script>
+
+<table>
+    {#each shortcuts as shortcut}
+        <ShortcutRow {shortcut} />
+    {/each}
+</table>
diff --git a/monosketch-svelte/src/lib/ui/modal/keyboard-shortcut/model.ts b/monosketch-svelte/src/lib/ui/modal/keyboard-shortcut/model.ts
new file mode 100644
index 000000000..8f7e1f775
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/keyboard-shortcut/model.ts
@@ -0,0 +1,30 @@
+import { isCommandKeySupported } from '../../../mono/common/platform';
+
+export interface Shortcut {
+    description: string;
+    keys: string[];
+}
+
+const commandKey = isCommandKeySupported() ? 'cmd' : 'ctrl';
+const shiftKey = 'shift';
+
+export const shortcuts: Shortcut[][] = [
+    [
+        { description: 'Rectangle', keys: ['R'] },
+        { description: 'Text', keys: ['T'] },
+        { description: 'Line', keys: ['L'] },
+    ],
+    [
+        { description: 'Select tool', keys: ['V'] },
+        { description: 'Select all', keys: [commandKey, 'A'] },
+        { description: 'Deselect', keys: ['esc'] },
+        { description: 'Undo', keys: [commandKey, 'Z'] },
+        { description: 'Redo', keys: [commandKey, shiftKey, 'Z'] },
+    ],
+    [
+        { description: 'Duplicate', keys: [commandKey, 'D'] },
+        { description: 'Copy as text', keys: [commandKey, shiftKey, 'C'] },
+        { description: 'Remove shapes', keys: ['delete'] },
+        { description: 'Edit selected text', keys: ['enter'] },
+    ],
+];
diff --git a/monosketch-svelte/src/lib/ui/modal/menu/common/DropDown.svelte b/monosketch-svelte/src/lib/ui/modal/menu/common/DropDown.svelte
new file mode 100644
index 000000000..fc6fae69a
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/menu/common/DropDown.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+import NoBackgroundModal from '../../common/NoBackgroundModal.svelte';
+import type { Rect } from '$libs/graphics-geo/rect';
+
+export let targetBounds: Rect;
+export let width: number = 180;
+export let onDismiss: () => void;
+export let horizontalOffsetPx: number = 0;
+export let verticalOffsetPx: number = 0;
+
+$: left = targetBounds.left + horizontalOffsetPx;
+$: top = targetBounds.top + targetBounds.height + verticalOffsetPx;
+</script>
+
+<NoBackgroundModal {onDismiss} {left} {top} {width}>
+    <div class="container">
+        <slot />
+    </div>
+</NoBackgroundModal>
+
+<style lang="scss">
+@import '../../../../style/variables.scss';
+
+.container {
+    border-radius: 6px;
+    background: var(--modal-container-bg);
+    border: 1px solid var(--mainmenu-divider-color);
+    padding: 6px 0;
+    font-family: $monospaceFont;
+    width: 100%;
+    margin-right: 4px;
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/modal/menu/common/MenuItem.svelte b/monosketch-svelte/src/lib/ui/modal/menu/common/MenuItem.svelte
new file mode 100644
index 000000000..2ed4f8563
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/menu/common/MenuItem.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+export let title: string;
+export let onClick: () => void;
+// Set this if you want to dismiss the menu when the item is clicked
+export let dismiss: () => void = () => {};
+
+function onItemClick() {
+    onClick();
+    dismiss();
+}
+</script>
+
+<button on:click="{onItemClick}">
+    {title}
+</button>
+
+<style lang="scss">
+button {
+    padding: 5px 8px 5px 16px;
+    margin: 0;
+    display: block;
+    width: 100%;
+    font-family: inherit;
+    text-align: start;
+    border: none;
+    cursor: pointer;
+    overflow: hidden;
+    color: var(--mainmenu-item-color);
+    background: none;
+    white-space: nowrap;
+    font-size: 14px;
+    line-height: 21px;
+
+    &:hover {
+        background: var(--mainmenu-item-hover-bg);
+    }
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/modal/menu/current-project/CurrentProjectDropDown.svelte b/monosketch-svelte/src/lib/ui/modal/menu/current-project/CurrentProjectDropDown.svelte
new file mode 100644
index 000000000..f5d15b277
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/menu/current-project/CurrentProjectDropDown.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    import DropDown from '../common/DropDown.svelte';
+    import MenuItem from '../common/MenuItem.svelte';
+    import type { Rect } from "$libs/graphics-geo/rect";
+    import { getContext } from "svelte";
+    import type { ProjectDataViewModel } from "$ui/nav/project/project-data-viewmodel";
+    import { PROJECT_CONTEXT } from "$ui/nav/project/constants";
+
+    export let projectId: string;
+    export let targetBounds: Rect;
+    export let onDismiss: () => void;
+
+    const projectDataViewModel = getContext<ProjectDataViewModel>(PROJECT_CONTEXT);
+
+    function rename() {
+        projectDataViewModel.setRenamingProject(projectId);
+    }
+
+    function saveAs() {
+        console.log('saveAs');
+    }
+
+    function exportText() {
+        console.log('exportText');
+    }
+</script>
+
+<DropDown targetBounds="{targetBounds}" {onDismiss} verticalOffsetPx="{6}">
+    <MenuItem title="Rename" onClick="{rename}" dismiss="{onDismiss}"/>
+    <MenuItem title="Save As" onClick="{saveAs}" dismiss="{onDismiss}"/>
+    <MenuItem title="Export Text" onClick="{exportText}" dismiss="{onDismiss}"/>
+</DropDown>
diff --git a/monosketch-svelte/src/lib/ui/modal/menu/main-dropdown/FontAdjustmentItem.svelte b/monosketch-svelte/src/lib/ui/modal/menu/main-dropdown/FontAdjustmentItem.svelte
new file mode 100644
index 000000000..19979d92d
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/menu/main-dropdown/FontAdjustmentItem.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+export let onChange: (isIncreased: boolean) => void;
+
+const increaseFont = () => onChange(true);
+const decreaseFont = () => onChange(false);
+</script>
+
+<div class="container">
+    <button type="button" class="item decrease"
+            on:click="{decreaseFont}"
+            on:keydown="{(e) => e.key === 'Enter' && decreaseFont()}">
+        A
+    </button>
+    <button type="button" class="item increase"
+            on:click="{increaseFont}"
+            on:keydown="{(e) => e.key === 'Enter' && increaseFont()}">
+        A
+    </button>
+</div>
+<style lang="scss">
+.container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+button {
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+}
+
+.item {
+    width: 50%;
+    height: 28px;
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-bottom: 2px;
+    color: var(--mainmenu-item-color);
+    user-select: none;
+    cursor: pointer;
+
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+
+    &:hover {
+        background: var(--mainmenu-item-hover-bg);
+    }
+
+    &:active {
+        background: var(--mainmenu-item-action-hover-bg);
+    }
+}
+
+.decrease {
+    font-size: 14px;
+    padding-bottom: 2px;
+}
+
+.increase {
+    font-size: 18px;
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/modal/menu/main-dropdown/MainDropDown.svelte b/monosketch-svelte/src/lib/ui/modal/menu/main-dropdown/MainDropDown.svelte
new file mode 100644
index 000000000..b0b3f1e19
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/menu/main-dropdown/MainDropDown.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+import MenuItem from '../common/MenuItem.svelte';
+import FontAdjustmentItem from './FontAdjustmentItem.svelte';
+import DropDown from '../common/DropDown.svelte';
+import { getContext } from 'svelte';
+import type { AppContext } from '$app/app-context';
+import { APP_CONTEXT } from '$mono/common/constant';
+import type { Rect } from '$libs/graphics-geo/rect';
+import { MainMenuAction } from "$ui/modal/menu/main-dropdown/model";
+
+export let targetBounds: Rect;
+export let onAction: (action: MainMenuAction) => void;
+export let onDismiss: () => void;
+
+const appContext = getContext<AppContext>(APP_CONTEXT);
+
+let isFormatPanelVisible = appContext.appUiStateManager.shapeFormatPanelVisibilityFlow.value;
+$: toggleFormatPannelVisibilityText = isFormatPanelVisible
+    ? 'Hide Format panel'
+    : 'Show Format panel';
+
+function onFontSizeChange(isIncreased: boolean) {
+    if (isIncreased) {
+        onAction(MainMenuAction.IncreaseFontSize);
+    } else {
+        onAction(MainMenuAction.DecreaseFontSize);
+    }
+}
+
+function toggleFormatPanelVisibility() {
+    if (isFormatPanelVisible) {
+        onAction(MainMenuAction.HideFormatPanel);
+    } else {
+        onAction(MainMenuAction.ShowFormatPanel);
+    }
+}
+
+function showKeyboardShortcuts() {
+    onAction(MainMenuAction.ShowKeyboardShortcut);
+}
+</script>
+
+<DropDown {targetBounds} {onDismiss} verticalOffsetPx="{7}">
+    <FontAdjustmentItem onChange="{onFontSizeChange}" />
+    <MenuItem
+        title="{toggleFormatPannelVisibilityText}"
+        onClick="{toggleFormatPanelVisibility}"
+        dismiss="{onDismiss}"
+    />
+    <MenuItem title="Keyboard shortcuts" onClick="{showKeyboardShortcuts}" dismiss="{onDismiss}" />
+</DropDown>
diff --git a/monosketch-svelte/src/lib/ui/modal/menu/main-dropdown/model.ts b/monosketch-svelte/src/lib/ui/modal/menu/main-dropdown/model.ts
new file mode 100644
index 000000000..4163c4a48
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/menu/main-dropdown/model.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2025, tuanchauict
+ */
+
+export enum MainMenuAction {
+    IncreaseFontSize,
+    DecreaseFontSize,
+    ShowFormatPanel,
+    HideFormatPanel,
+    ShowKeyboardShortcut,
+}
diff --git a/monosketch-svelte/src/lib/ui/modal/model.ts b/monosketch-svelte/src/lib/ui/modal/model.ts
new file mode 100644
index 000000000..a1a65547e
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/model.ts
@@ -0,0 +1,24 @@
+import { Rect } from '$libs/graphics-geo/rect';
+
+export namespace TargetBounds {
+    export const fromElement = (element: HTMLElement): Rect => {
+        const bounds = element.getBoundingClientRect();
+        return Rect.byLTWHf(bounds.left, bounds.top, bounds.width, bounds.height);
+    };
+
+    export const expandTargetBounds = (
+        targetBounds: Rect,
+        horizontalExpand: number,
+        verticalExpand: number,
+    ): Rect =>
+        Rect.byLTWHf(
+            targetBounds.left - horizontalExpand,
+            targetBounds.top - verticalExpand,
+            targetBounds.width + horizontalExpand * 2,
+            targetBounds.height + verticalExpand * 2,
+        );
+
+    export const centerHorizontal = (rect: Rect): number => rect.left + rect.width / 2;
+
+    export const centerVertical = (rect: Rect): number => rect.top + rect.height / 2;
+}
diff --git a/monosketch-svelte/src/lib/ui/modal/recent-project/FilterInput.svelte b/monosketch-svelte/src/lib/ui/modal/recent-project/FilterInput.svelte
new file mode 100644
index 000000000..06e50d855
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/recent-project/FilterInput.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+import { onMount } from 'svelte';
+
+export let value: string;
+
+let input: HTMLInputElement;
+
+onMount(() => {
+    setTimeout(() => {
+        // Need to wait for the DOM to be ready before focusing
+        input.focus();
+    }, 10);
+});
+</script>
+
+<div>
+    <input type="text" placeholder="Filter by name" bind:value bind:this="{input}" />
+</div>
+
+<style lang="scss">
+@import '../../../style/variables.scss';
+
+div {
+    display: flex;
+    margin-bottom: 8px;
+    padding: 0 6px;
+    width: 100%;
+}
+
+input[type='text'] {
+    width: 100%;
+    padding: 6px 8px;
+    border-radius: 3px;
+    outline: none;
+    border: 1px solid var(--text-input-border-color);
+    background: none;
+    color: var(--text-input-value-color);
+    font-family: $monospaceFont;
+
+    &:hover,
+    &:focus {
+        border-color: var(--text-input-border-focus-color);
+    }
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/modal/recent-project/RecentProjectDialog.svelte b/monosketch-svelte/src/lib/ui/modal/recent-project/RecentProjectDialog.svelte
new file mode 100644
index 000000000..d78561061
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/recent-project/RecentProjectDialog.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import NoBackgroundModal from '../common/NoBackgroundModal.svelte';
+    import FilterInput from './FilterInput.svelte';
+    import TopActions from './top-actions/TopActions.svelte';
+    import ProjectList from './project-list/ProjectList.svelte';
+
+    export let onDismiss: () => void;
+
+    const widthPx = '500px';
+    const style = `top: 0; left: calc(50% - ${widthPx} / 2); width: ${widthPx};`;
+
+    let filterValue = '';
+</script>
+
+<NoBackgroundModal {onDismiss} customStyle="{style}">
+    <div class="container">
+        <FilterInput bind:value="{filterValue}"/>
+        <TopActions dismiss="{onDismiss}"/>
+        <ProjectList dismiss="{onDismiss}"/>
+    </div>
+</NoBackgroundModal>
+<style lang="scss">
+    .container {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        flex-grow: 0;
+        width: 100%;
+        margin-top: 6px;
+        padding: 8px 0;
+
+        border-radius: 6px;
+        border: 1px solid var(--mainmenu-divider-color);
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
+        background: var(--modal-container-bg);
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/modal/recent-project/common/MenuItem.svelte b/monosketch-svelte/src/lib/ui/modal/recent-project/common/MenuItem.svelte
new file mode 100644
index 000000000..d7b2e984a
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/recent-project/common/MenuItem.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+export let danger = false;
+
+export let onClick = () => {};
+
+// Set this if you want to dismiss the menu when the item is clicked
+export let dismiss: () => void = () => {};
+
+function onItemClick() {
+    onClick();
+    dismiss();
+}
+</script>
+
+<div class="row" class:normal="{!danger}" class:danger>
+    <div role="button" tabindex="0" class="content-container"
+         on:click="{onItemClick}"
+         on:keydown="{(e) => e.key === 'Enter' && onItemClick()}">
+        <div class="icon" >
+            <slot name="icon" />
+        </div>
+        <div class="content">
+            <slot name="content" />
+        </div>
+    </div>
+
+    <div class="actions">
+        <slot name="actions" />
+    </div>
+</div>
+
+<style lang="scss">
+@import '../../../../style/variables.scss';
+
+.row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    height: 26px;
+    padding: 0 6px;
+    margin: 2px 8px 0;
+    border-radius: 4px;
+    cursor: pointer;
+
+    color: var(--modal-content-color);
+    font-family: $monospaceFont;
+    font-size: 14px;
+
+    &.normal {
+        &:hover {
+            background: var(--mainmenu-item-hover-bg);
+
+            .actions {
+                display: flex;
+            }
+        }
+
+        .actions {
+            display: none;
+        }
+    }
+
+    &.danger {
+        background: var(--danger-item-bg);
+        color: white;
+    }
+}
+
+.content-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    flex-grow: 1;
+    height: 100%;
+}
+
+.content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    flex-grow: 1;
+    height: 100%;
+}
+
+.icon {
+    display: flex;
+    width: 30px;
+    height: 100%;
+    align-items: center;
+    justify-content: flex-start;
+    opacity: 0.7;
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectActionView.svelte b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectActionView.svelte
new file mode 100644
index 000000000..cf0072de6
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectActionView.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+import type { ProjectAction } from '$ui/nav/project/model';
+import TooltipTarget from '../../tooltip/TooltipTarget.svelte';
+import { TooltipDirection } from '../../tooltip/model';
+
+export let action: ProjectAction;
+export let onClick: (action: ProjectAction) => void;
+export let tooltip: string | undefined = undefined;
+
+function onActionClick() {
+    onClick(action);
+}
+</script>
+
+<button on:click="{onActionClick}" on:keydown="{(e) => e.key === 'Enter' && onActionClick()}">
+    {#if tooltip}
+        <TooltipTarget text="{tooltip}" direction="{TooltipDirection.TOP}" offsetVertical="{4}">
+            <slot />
+        </TooltipTarget>
+    {:else}
+        <slot />
+    {/if}
+</button>
+
+<style lang="scss">
+button {
+    display: flex;
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    color: inherit;
+
+    opacity: 0.7;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectActions.svelte b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectActions.svelte
new file mode 100644
index 000000000..a297cd35d
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectActions.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+import ProjectActionView from './ProjectActionView.svelte';
+import { ProjectAction } from '$ui/nav/project/model';
+import OpenInNewTab from './icons/OpenInNewTab.svelte';
+import Remove from './icons/Remove.svelte';
+import RemoveConfirmation from './icons/RemoveConfirmation.svelte';
+import CancelRemoval from './icons/CancelRemoval.svelte';
+
+export let confirmingRemove: boolean = false;
+export let onAction: (action: ProjectAction) => void;
+</script>
+
+<div>
+    {#if !confirmingRemove}
+        <ProjectActionView
+            action="{ProjectAction.OpenInNewTab}"
+            onClick="{onAction}"
+            tooltip="Open in new tab"
+        >
+            <OpenInNewTab />
+        </ProjectActionView>
+        <ProjectActionView action="{ProjectAction.Remove}" onClick="{onAction}" tooltip="Delete">
+            <Remove />
+        </ProjectActionView>
+    {:else}
+        <ProjectActionView
+            action="{ProjectAction.RemoveConfirmed}"
+            onClick="{onAction}"
+            tooltip="Confirm"
+        >
+            <RemoveConfirmation />
+        </ProjectActionView>
+        <ProjectActionView
+            action="{ProjectAction.CancelRemove}"
+            onClick="{onAction}"
+            tooltip="Cancel"
+        >
+            <CancelRemoval />
+        </ProjectActionView>
+    {/if}
+</div>
+
+<style lang="scss">
+div {
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectIcon.svelte b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectIcon.svelte
new file mode 100644
index 000000000..e58f3c85d
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectIcon.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+import SvgIcon from '../../../common/SvgIcon.svelte';
+
+export let deleting: boolean;
+export let opening: boolean;
+</script>
+
+{#if deleting}
+    <SvgIcon size="{16}" viewBoxSize="{512}">
+        <path
+            d="M256 32c14 0 27 8 35 20l216 368a40 40 0 0 1-35 60H40a40 40 0 0 1-34-60L222 52c7-12 20-20 34-20zm0 128c-13 0-24 11-24 24v112a24 24 0 1 0 48 0V184c0-13-11-24-24-24zm32 224a32 32 0 1 0-64 0 32 32 0 1 0 64 0z"
+        ></path>
+    </SvgIcon>
+{:else if opening}
+    <SvgIcon size="{16}" viewBoxSize="{512}">
+        <path
+            d="M384 480h48c11 0 22-6 28-16l112-192a32 32 0 0 0-28-48H144c-11 0-22 6-28 16L48 357V96c0-9 7-16 16-16h118c4 0 8 2 11 5l26 26c21 21 50 33 80 33h117c9 0 16 7 16 16v32h48v-32c0-35-29-64-64-64H299c-17 0-34-7-46-19l-26-26a64 64 0 0 0-46-19H64C29 32 0 61 0 96v320c0 35 29 64 64 64h320z"
+        ></path>
+    </SvgIcon>
+{:else}
+    <SvgIcon size="{16}" viewBoxSize="{512}">
+        <path
+            d="M64 480h384c35 0 64-29 64-64V160c0-35-29-64-64-64H288c-10 0-20-5-26-13l-19-25a64 64 0 0 0-51-26H64C29 32 0 61 0 96v320c0 35 29 64 64 64z"
+        ></path>
+    </SvgIcon>
+{/if}
diff --git a/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectList.svelte b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectList.svelte
new file mode 100644
index 000000000..ec813cf88
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectList.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+import ProjectRow from './ProjectRow.svelte';
+import { ProjectAction, type ProjectItem } from '$ui/nav/project/model';
+import { getContext, onDestroy, onMount } from 'svelte';
+import { LifecycleOwner } from '$libs/flow';
+import { BrowserManager } from "$mono/window/browser-manager";
+import { PROJECT_CONTEXT } from "$ui/nav/project/constants";
+import type { ProjectDataViewModel } from "$ui/nav/project/project-data-viewmodel";
+
+export let dismiss: () => void;
+
+const projectDataViewModel = getContext<ProjectDataViewModel>(PROJECT_CONTEXT);
+
+let projectList: ProjectItem[] = [];
+let openingId: string = '';
+let deletingId: string = '';
+
+onMount(() => {
+    const lifecycleOwner = LifecycleOwner.start();
+
+    // Manually update the project list to ensure the list is up-to-date when the modal is opened
+    projectDataViewModel.updateProjectList();
+    projectDataViewModel.projectFlow.observe(lifecycleOwner, (list) => {
+        projectList = list;
+    });
+
+    projectDataViewModel.openingProjectFlow.observe(lifecycleOwner, (project) => {
+        openingId = project.id;
+    });
+
+    projectDataViewModel.deletingProjectIdFlow.observe(lifecycleOwner, (id) => {
+        deletingId = id;
+    });
+
+    return () => {
+        lifecycleOwner.onStop();
+    };
+});
+
+onDestroy(() => {
+    projectDataViewModel.cancelDeletingProject();
+});
+
+function onAction(item: ProjectItem, action: ProjectAction) {
+    switch (action) {
+        case ProjectAction.Open:
+            projectDataViewModel.openProject(item.id);
+            dismiss();
+            break;
+        case ProjectAction.OpenInNewTab:
+            // Need to delay for a short time the action to ensure the modal is closed before opening the new tab
+            setTimeout(() => BrowserManager.openInNewTab(item.id), 10);
+            dismiss();
+            break;
+        case ProjectAction.Remove:
+            projectDataViewModel.confirmDeletingProject(item.id);
+            break;
+        case ProjectAction.RemoveConfirmed:
+            projectDataViewModel.deleteProject(item.id);
+            break;
+        case ProjectAction.CancelRemove:
+            projectDataViewModel.cancelDeletingProject();
+            break;
+    }
+}
+</script>
+
+<div>
+    {#each projectList as project (project.id)}
+        <ProjectRow
+            {project}
+            opening="{project.id === openingId}"
+            deleting="{project.id === deletingId}"
+            {onAction}
+        />
+    {:else}
+        <p>No files</p>
+    {/each}
+</div>
+
+<style lang="scss">
+div {
+    width: 100%;
+    height: 100%;
+    max-height: 200px;
+    overflow-y: auto;
+    padding: 8px 0;
+}
+
+p {
+    width: 100%;
+    height: 40px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--shapetool-indicator-color);
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectRow.svelte b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectRow.svelte
new file mode 100644
index 000000000..0500c4d0a
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/ProjectRow.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+import MenuItem from '../common/MenuItem.svelte';
+import ProjectActions from './ProjectActions.svelte';
+import ProjectIcon from './ProjectIcon.svelte';
+import { ProjectAction, type ProjectItem } from '$ui/nav/project/model';
+
+export let project: ProjectItem;
+export let opening: boolean;
+export let deleting: boolean;
+export let onAction: (item: ProjectItem, action: ProjectAction) => void;
+
+function openProject() {
+    onAction(project, ProjectAction.Open);
+}
+
+function onActionClick(action: ProjectAction) {
+    onAction(project, action);
+}
+</script>
+
+<MenuItem onClick="{openProject}" danger="{deleting}">
+    <ProjectIcon slot="icon" {opening} {deleting} />
+    <span slot="content">{project.name}</span>
+    <ProjectActions slot="actions" onAction="{onActionClick}" confirmingRemove="{deleting}" />
+</MenuItem>
diff --git a/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/icons/CancelRemoval.svelte b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/icons/CancelRemoval.svelte
new file mode 100644
index 000000000..3a0400669
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/icons/CancelRemoval.svelte
@@ -0,0 +1,9 @@
+<script>
+import SvgIcon from '../../../../common/SvgIcon.svelte';
+</script>
+
+<SvgIcon size="{12}" viewBoxSize="{1024}">
+    <path
+        d="M512.481 421.906 850.682 84.621c25.023-24.964 65.545-24.917 90.51.105s24.917 65.545-.105 90.51L603.03 512.377 940.94 850c25.003 24.984 25.017 65.507.033 90.51s-65.507 25.017-90.51.033L512.397 602.764 174.215 940.03c-25.023 24.964-65.545 24.917-90.51-.105s-24.917-65.545.105-90.51l338.038-337.122L84.14 174.872c-25.003-24.984-25.017-65.507-.033-90.51s65.507-25.017 90.51-.033L512.48 421.906z"
+    ></path>
+</SvgIcon>
diff --git a/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/icons/OpenInNewTab.svelte b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/icons/OpenInNewTab.svelte
new file mode 100644
index 000000000..efcb81893
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/icons/OpenInNewTab.svelte
@@ -0,0 +1,9 @@
+<script>
+import SvgIcon from '../../../../common/SvgIcon.svelte';
+</script>
+
+<SvgIcon size="{12}" viewBoxSize="{512}">
+    <path
+        d="M352 0a32 32 0 0 0-23 55l42 41-170 169a32 32 0 0 0 46 46l169-170 41 42c10 9 23 12 35 7s20-17 20-30V32c0-18-14-32-32-32H352zM80 32C36 32 0 68 0 112v320c0 44 36 80 80 80h320c44 0 80-36 80-80V320a32 32 0 1 0-64 0v112c0 9-7 16-16 16H80c-9 0-16-7-16-16V112c0-9 7-16 16-16h112a32 32 0 1 0 0-64H80z"
+    ></path>
+</SvgIcon>
diff --git a/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/icons/Remove.svelte b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/icons/Remove.svelte
new file mode 100644
index 000000000..4a94dc061
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/icons/Remove.svelte
@@ -0,0 +1,12 @@
+<script>
+import SvgIcon from '../../../../common/SvgIcon.svelte';
+</script>
+
+<SvgIcon size="{12}" viewBoxSize="{512}">
+    <path
+        d="M490.667 85.333H379.325l-7.012-28.062C363.905 23.609 333.658 0 298.965 0h-85.931c-34.693 0-64.94 23.609-73.348 57.273l-7.012 28.06H21.333C9.551 85.333 0 94.885 0 106.667S9.551 128 21.333 128h22.488l17.974 323.53C63.683 485.452 91.744 512 125.719 512h260.565c33.975 0 62.036-26.548 63.924-60.468L468.183 128h22.484c11.782 0 21.333-9.551 21.333-21.333 0-11.782-9.551-21.334-21.333-21.334zM181.081 67.614c3.663-14.664 16.838-24.948 31.954-24.948h85.931c15.116 0 28.291 10.284 31.953 24.946l4.428 17.721H176.653l4.428-17.719zm226.527 381.549c-.63 11.311-9.993 20.17-21.324 20.17H125.719c-11.33 0-20.694-8.859-21.324-20.172L86.554 128h338.897l-17.843 321.163z"
+    ></path>
+    <path
+        d="M170.667 170.667c-11.782 0-21.333 9.551-21.333 21.333v213.333c0 11.782 9.551 21.333 21.333 21.333 11.782 0 21.333-9.551 21.333-21.333V192c0-11.782-9.551-21.333-21.333-21.333zM256 170.667c-11.782 0-21.333 9.551-21.333 21.333v213.333c0 11.782 9.551 21.333 21.333 21.333s21.333-9.551 21.333-21.333V192c0-11.782-9.551-21.333-21.333-21.333zM341.333 170.667C329.551 170.667 320 180.218 320 192v213.333c0 11.782 9.551 21.333 21.333 21.333 11.782 0 21.333-9.551 21.333-21.333V192c.001-11.782-9.551-21.333-21.333-21.333z"
+    ></path>
+</SvgIcon>
diff --git a/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/icons/RemoveConfirmation.svelte b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/icons/RemoveConfirmation.svelte
new file mode 100644
index 000000000..4a94dc061
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/recent-project/project-list/icons/RemoveConfirmation.svelte
@@ -0,0 +1,12 @@
+<script>
+import SvgIcon from '../../../../common/SvgIcon.svelte';
+</script>
+
+<SvgIcon size="{12}" viewBoxSize="{512}">
+    <path
+        d="M490.667 85.333H379.325l-7.012-28.062C363.905 23.609 333.658 0 298.965 0h-85.931c-34.693 0-64.94 23.609-73.348 57.273l-7.012 28.06H21.333C9.551 85.333 0 94.885 0 106.667S9.551 128 21.333 128h22.488l17.974 323.53C63.683 485.452 91.744 512 125.719 512h260.565c33.975 0 62.036-26.548 63.924-60.468L468.183 128h22.484c11.782 0 21.333-9.551 21.333-21.333 0-11.782-9.551-21.334-21.333-21.334zM181.081 67.614c3.663-14.664 16.838-24.948 31.954-24.948h85.931c15.116 0 28.291 10.284 31.953 24.946l4.428 17.721H176.653l4.428-17.719zm226.527 381.549c-.63 11.311-9.993 20.17-21.324 20.17H125.719c-11.33 0-20.694-8.859-21.324-20.172L86.554 128h338.897l-17.843 321.163z"
+    ></path>
+    <path
+        d="M170.667 170.667c-11.782 0-21.333 9.551-21.333 21.333v213.333c0 11.782 9.551 21.333 21.333 21.333 11.782 0 21.333-9.551 21.333-21.333V192c0-11.782-9.551-21.333-21.333-21.333zM256 170.667c-11.782 0-21.333 9.551-21.333 21.333v213.333c0 11.782 9.551 21.333 21.333 21.333s21.333-9.551 21.333-21.333V192c0-11.782-9.551-21.333-21.333-21.333zM341.333 170.667C329.551 170.667 320 180.218 320 192v213.333c0 11.782 9.551 21.333 21.333 21.333 11.782 0 21.333-9.551 21.333-21.333V192c.001-11.782-9.551-21.333-21.333-21.333z"
+    ></path>
+</SvgIcon>
diff --git a/monosketch-svelte/src/lib/ui/modal/recent-project/top-actions/TopActions.svelte b/monosketch-svelte/src/lib/ui/modal/recent-project/top-actions/TopActions.svelte
new file mode 100644
index 000000000..82af20d0e
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/recent-project/top-actions/TopActions.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+    import MenuItem from '../common/MenuItem.svelte';
+    import SvgIcon from '../../../common/SvgIcon.svelte';
+    import { type ProjectDataViewModel } from '$ui/nav/project/project-data-viewmodel';
+    import { getContext } from "svelte";
+    import { PROJECT_CONTEXT } from "$ui/nav/project/constants";
+
+    export let dismiss: () => void;
+
+    const projectDataViewModel = getContext<ProjectDataViewModel>(PROJECT_CONTEXT);
+
+    function createNewProject() {
+        projectDataViewModel.newProject();
+    }
+
+    function importFromFile() {
+        console.log('importFromFile');
+    }
+</script>
+
+<div>
+    <MenuItem onClick="{createNewProject}" {dismiss}>
+        <SvgIcon slot="icon" size="{16}" viewBoxSize="{[384, 512]}">
+            <path
+                    d="M0 64C0 29 29 0 64 0h160v128c0 18 14 32 32 32h128v288c0 35-29 64-64 64H64c-35 0-64-29-64-64V64zm384 64H256V0l128 128z"
+            ></path>
+        </SvgIcon>
+        <span slot="content">New project</span>
+    </MenuItem>
+    <MenuItem onClick="{importFromFile}" {dismiss}>
+        <SvgIcon slot="icon" size="{16}" viewBoxSize="{512}">
+            <path
+                    d="M288 109v243a32 32 0 1 1-64 0V109l-73 74a32 32 0 0 1-46-46L233 9c13-12 33-12 46 0l128 128a32 32 0 0 1-46 46l-73-74zM64 352h128a64 64 0 0 0 128 0h128c35 0 64 29 64 64v32c0 35-29 64-64 64H64c-35 0-64-29-64-64v-32c0-35 29-64 64-64zm368 104a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"
+            ></path>
+        </SvgIcon>
+        <span slot="content">Import from file</span>
+    </MenuItem>
+</div>
+
+<style lang="scss">
+    div {
+        border-bottom: 1px solid var(--mainmenu-divider-color);
+        padding-bottom: 8px;
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/modal/rename-project/ProjectNameTextField.svelte b/monosketch-svelte/src/lib/ui/modal/rename-project/ProjectNameTextField.svelte
new file mode 100644
index 000000000..103ff3341
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/rename-project/ProjectNameTextField.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+import { onMount } from 'svelte';
+
+export let name: string;
+export let onDone: () => void;
+
+let textInput: HTMLInputElement;
+
+onMount(() => {
+    setTimeout(() => {
+        textInput.focus();
+    }, 10);
+});
+
+function onKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+        // Prevent the default behavior of the Enter key to avoid submitting the form
+        event.preventDefault();
+        onDone();
+    } else if (event.key === 'Escape') {
+        name = '';
+        onDone();
+        event.preventDefault();
+    }
+}
+</script>
+
+<div>
+    <input type="text" bind:value="{name}" bind:this="{textInput}" on:keydown="{onKeydown}"/>
+</div>
+
+<style lang="scss">
+@import '../../../style/variables.scss';
+
+div {
+    display: flex;
+    width: 100%;
+    border-radius: 4px;
+    background-color: var(--modal-container-bg);
+}
+
+input[type='text'] {
+    border-radius: 3px;
+    font-family: $monospaceFont;
+    padding: 4px 8px;
+    border: 2px solid var(--text-input-border-color);
+
+    &:focus {
+        outline: none;
+        border-color: var(--text-input-border-focus-color);
+    }
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/modal/rename-project/RenameProjectModal.svelte b/monosketch-svelte/src/lib/ui/modal/rename-project/RenameProjectModal.svelte
new file mode 100644
index 000000000..b8b49484c
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/rename-project/RenameProjectModal.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+import NoBackgroundModal from '../common/NoBackgroundModal.svelte';
+import ProjectNameTextField from './ProjectNameTextField.svelte';
+import { getContext } from 'svelte';
+import type { Rect } from "$libs/graphics-geo/rect";
+import type { ProjectDataViewModel } from "$ui/nav/project/project-data-viewmodel";
+import { PROJECT_CONTEXT } from "$ui/nav/project/constants";
+
+export let projectName: string;
+export let targetBounds: Rect;
+
+const projectDataViewModel = getContext<ProjectDataViewModel>(PROJECT_CONTEXT);
+
+let name: string = projectName;
+
+$: left = targetBounds.left;
+$: top = targetBounds.top + targetBounds.height + 6;
+
+function onDone() {
+    if (name) {
+        projectDataViewModel.setCurrentProjectName(name);
+    }
+    // Reset the renaming project id to empty string. This will close the modal.
+    projectDataViewModel.setRenamingProject('');
+}
+</script>
+
+<NoBackgroundModal onDismiss="{onDone}" {left} {top} width="{180}">
+    <ProjectNameTextField bind:name {onDone}/>
+</NoBackgroundModal>
diff --git a/monosketch-svelte/src/lib/ui/modal/tooltip/TooltipTarget.svelte b/monosketch-svelte/src/lib/ui/modal/tooltip/TooltipTarget.svelte
new file mode 100644
index 000000000..6ad8a5db6
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/tooltip/TooltipTarget.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { TargetBounds } from '../model';
+    import { TooltipDirection } from './model';
+    import { onDestroy } from 'svelte';
+    import TooltipView from "$ui/modal/tooltip/TooltipView.svelte";
+    import type { Rect } from "$libs/graphics-geo/rect";
+
+    export let text: string;
+    export let direction: TooltipDirection = TooltipDirection.BOTTOM;
+    export let offsetHorizontal: number = 0;
+    export let offsetVertical: number = 0;
+
+    export let style: string = '';
+
+    let timeoutId: number;
+    let targetBounds: Rect | undefined;
+
+    let ref: HTMLDivElement;
+
+    function showTooltip() {
+        timeoutId = setTimeout(() => {
+            targetBounds = ref ? TargetBounds.expandTargetBounds(
+                TargetBounds.fromElement(ref),
+                offsetHorizontal,
+                offsetVertical,
+            ) : undefined;
+        }, 600);
+    }
+
+    function hideTooltip() {
+        clearTimeout(timeoutId);
+        targetBounds = undefined;
+    }
+
+    onDestroy(hideTooltip);
+</script>
+
+<div
+        role="button"
+        tabindex="-1"
+        style="{style}"
+        on:mouseover="{showTooltip}"
+        on:mouseout="{hideTooltip}"
+        on:focus="{() => {}}"
+        on:blur="{hideTooltip}"
+        bind:this="{ref}"
+>
+    <slot/>
+</div>
+{#if targetBounds}
+    <TooltipView {text} {direction} {targetBounds}/>
+{/if}
+<style lang="scss">
+    div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/modal/tooltip/TooltipView.svelte b/monosketch-svelte/src/lib/ui/modal/tooltip/TooltipView.svelte
new file mode 100644
index 000000000..55f655aa6
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/tooltip/TooltipView.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { TooltipDirection, directionToIconPathMap } from './model';
+    import { calcArrowLeft, calcArrowTop, calcBodyLeft, calcBodyTop } from './utils';
+    import SvgIcon from '$ui/common/SvgIcon.svelte';
+    import Portal from "$ui/modal/common/Portal.svelte";
+    import type { Rect } from "$libs/graphics-geo/rect";
+
+    export let text: string;
+    export let direction: TooltipDirection;
+    export let targetBounds: Rect;
+
+    let arrow: HTMLDivElement;
+    let body: HTMLDivElement;
+
+    $: arrowLeft = calcArrowLeft(arrow, direction, targetBounds);
+    $: arrowTop = calcArrowTop(arrow, direction, targetBounds);
+    $: bodyLeft = calcBodyLeft(body, arrow, direction, targetBounds);
+    $: bodyTop = calcBodyTop(body, arrow, direction, targetBounds);
+
+    $: isVertical = direction === TooltipDirection.TOP || direction === TooltipDirection.BOTTOM;
+    $: arrowSize = isVertical ? [10, 5] : [5, 10];
+    $: arrowViewBoxSize = isVertical ? [20, 10] : [10, 20];
+</script>
+
+<Portal parent="#tooltip">
+    <div class="arrow" bind:this="{arrow}" style="left:{arrowLeft}px; top:{arrowTop}px">
+        <SvgIcon size="{arrowSize}" viewBoxSize="{arrowViewBoxSize}">
+            <path d="{directionToIconPathMap[direction]}"></path>
+        </SvgIcon>
+    </div>
+    <div class="body" bind:this="{body}" style="left:{bodyLeft}px; top:{bodyTop}px">
+        <span>{text}</span>
+    </div>
+</Portal>
+
+<style lang="scss">
+    @import '$style/variables';
+
+    $tooltip-background-color: var(--tooltip-bg);
+    $tooltip-color: var(--tooltip-color);
+
+    .arrow {
+        display: flex;
+        position: fixed;
+        color: $tooltip-background-color;
+    }
+
+    .body {
+        position: fixed;
+        background: $tooltip-background-color;
+        color: $tooltip-color;
+        padding: 2px 8px 1px;
+        border-radius: 4px;
+        font-size: 11px;
+        font-family: $monospaceFont;
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/modal/tooltip/model.ts b/monosketch-svelte/src/lib/ui/modal/tooltip/model.ts
new file mode 100644
index 000000000..4328dd3ec
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/tooltip/model.ts
@@ -0,0 +1,21 @@
+import type { Rect } from '$libs/graphics-geo/rect';
+
+export enum TooltipDirection {
+    TOP,
+    RIGHT,
+    BOTTOM,
+    LEFT,
+}
+
+export interface Tooltip {
+    text: string;
+    direction: TooltipDirection;
+    targetBounds: Rect;
+}
+
+export const directionToIconPathMap = {
+    [TooltipDirection.TOP]: 'M10 10L0 0H20L10 10Z',
+    [TooltipDirection.BOTTOM]: 'M10 0L20 10H0L10 0Z',
+    [TooltipDirection.LEFT]: 'M10 10L0 20V0L10 10Z',
+    [TooltipDirection.RIGHT]: 'M0 10L10 0V20L0 10Z',
+};
diff --git a/monosketch-svelte/src/lib/ui/modal/tooltip/utils.ts b/monosketch-svelte/src/lib/ui/modal/tooltip/utils.ts
new file mode 100644
index 000000000..072ff4dc1
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/modal/tooltip/utils.ts
@@ -0,0 +1,90 @@
+import { TargetBounds } from '../model';
+import { TooltipDirection } from './model';
+import type { Rect } from '$libs/graphics-geo/rect';
+
+export function calcArrowLeft(arrow: HTMLElement, direction: TooltipDirection, targetBounds: Rect): number {
+    if (!arrow) {
+        return -1000;
+    }
+    const arrowBounds = TargetBounds.fromElement(arrow);
+    switch (direction) {
+        case TooltipDirection.TOP:
+            return TargetBounds.centerHorizontal(targetBounds) - arrowBounds.width / 2;
+        case TooltipDirection.BOTTOM:
+            return TargetBounds.centerHorizontal(targetBounds) - arrowBounds.width / 2;
+        case TooltipDirection.LEFT:
+            return targetBounds.top + (targetBounds.height - arrowBounds.height) / 2;
+        case TooltipDirection.RIGHT:
+            return targetBounds.top + (targetBounds.height - arrowBounds.height) / 2;
+    }
+}
+
+export function calcArrowTop(arrow: HTMLElement, direction: TooltipDirection, targetBounds: Rect): number {
+    if (!arrow) {
+        return -1000;
+    }
+    const arrowBounds = TargetBounds.fromElement(arrow);
+    switch (direction) {
+        case TooltipDirection.TOP:
+            return targetBounds.top - arrowBounds.height;
+        case TooltipDirection.BOTTOM:
+            return targetBounds.top + targetBounds.height;
+        case TooltipDirection.LEFT:
+            return targetBounds.top + (targetBounds.height - arrowBounds.height) / 2;
+        case TooltipDirection.RIGHT:
+            return targetBounds.top + (targetBounds.height - arrowBounds.height) / 2;
+    }
+}
+
+export function calcBodyLeft(body: HTMLElement, arrow: HTMLElement, direction: TooltipDirection, targetBounds: Rect): number {
+    if (!body || !arrow) {
+        return -1000;
+    }
+    const bodyBounds = TargetBounds.fromElement(body);
+    const arrowBounds = TargetBounds.fromElement(arrow);
+    switch (direction) {
+        case TooltipDirection.TOP:
+            return adjustHorizontalPosition(
+                TargetBounds.centerHorizontal(targetBounds) - bodyBounds.width / 2,
+                bodyBounds,
+            );
+        case TooltipDirection.BOTTOM:
+            return adjustHorizontalPosition(
+                TargetBounds.centerHorizontal(targetBounds) - bodyBounds.width / 2,
+                bodyBounds,
+            );
+        case TooltipDirection.LEFT:
+            return targetBounds.left - bodyBounds.width - arrowBounds.width;
+        case TooltipDirection.RIGHT:
+            return targetBounds.left + targetBounds.width + arrowBounds.width;
+    }
+}
+
+export function calcBodyTop(body: HTMLElement, arrow: HTMLElement, direction: TooltipDirection, targetBounds: Rect): number {
+    if (!body || !arrow) {
+        return -1000;
+    }
+    const bodyBounds = TargetBounds.fromElement(body);
+    const arrowBounds = TargetBounds.fromElement(arrow);
+    switch (direction) {
+        case TooltipDirection.TOP:
+            return targetBounds.top - bodyBounds.height - arrowBounds.height;
+        case TooltipDirection.BOTTOM:
+            return targetBounds.top + targetBounds.height + arrowBounds.height;
+        case TooltipDirection.LEFT:
+            return TargetBounds.centerVertical(targetBounds) - bodyBounds.height / 2;
+        case TooltipDirection.RIGHT:
+            return TargetBounds.centerVertical(targetBounds) - bodyBounds.height / 2;
+    }
+}
+
+function adjustHorizontalPosition(leftPx: number, bodyBounds: Rect): number {
+    const bodyRightPx = leftPx + bodyBounds.width;
+    if (bodyRightPx > document.body.clientWidth) {
+        return document.body.clientWidth - bodyBounds.width - 4;
+    }
+    if (leftPx < 0) {
+        return 4;
+    }
+    return leftPx;
+}
diff --git a/monosketch-svelte/src/lib/ui/nav/NavBar.svelte b/monosketch-svelte/src/lib/ui/nav/NavBar.svelte
new file mode 100644
index 000000000..8be8c678f
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/NavBar.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+    import ToolbarContainer from './common/ToolbarContainer.svelte';
+    import ScrollModeButton from './right/ScrollModeButton.svelte';
+    import AppDropdownMenu from './right/AppDropdownMenu.svelte';
+    import ThemeButton from './right/ThemeButton.svelte';
+    import Brand from './brand/Brand.svelte';
+    import MouseActionGroup from './mouseaction/MouseActionGroup.svelte';
+    import ProjectManager from "$ui/nav/project/ProjectManager.svelte";
+</script>
+
+<div class="container">
+    <div class="left">
+        <Brand/>
+        <MouseActionGroup/>
+    </div>
+
+    <ProjectManager/>
+
+    <ToolbarContainer>
+        <ScrollModeButton/>
+        <ThemeButton/>
+        <AppDropdownMenu/>
+    </ToolbarContainer>
+</div>
+
+<style>
+    .container {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        height: 100%;
+
+        color: white;
+    }
+
+    .left {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/nav/brand/Brand.svelte b/monosketch-svelte/src/lib/ui/nav/brand/Brand.svelte
new file mode 100644
index 000000000..f31148ed7
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/brand/Brand.svelte
@@ -0,0 +1,40 @@
+<div>
+    <h2>
+        <a href="https://monosketch.io" target="_blank">MonoSketch</a>
+    </h2>
+</div>
+
+<style lang="scss">
+@import '../../../style/variables.scss';
+
+$content-color: var(--header-color);
+
+div {
+    height: 100%;
+    display: flex;
+    padding-left: 16px;
+}
+
+h2 {
+    margin: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    a {
+        font-size: 22px;
+        letter-spacing: 0.2px;
+        font-family: $monospaceFont;
+        font-weight: 400;
+        line-height: 18px;
+        text-decoration: none;
+        color: $content-color;
+
+        &:hover,
+        &:active {
+            color: $content-color;
+        }
+    }
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/nav/common/AppIcon.svelte b/monosketch-svelte/src/lib/ui/nav/common/AppIcon.svelte
new file mode 100644
index 000000000..25c8de746
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/common/AppIcon.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+export let viewBoxSize: number = 24;
+export let size: number = 24;
+export let fill: string = 'currentColor';
+
+export let onClick: (e: MouseEvent) => void = () => {};
+</script>
+
+<button on:click="{onClick}">
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 {viewBoxSize} {viewBoxSize}"
+        {fill}
+        width="{size}"
+        height="{size}"
+    >
+        <slot />
+    </svg>
+</button>
+
+<style lang="scss">
+button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    width: 34px;
+    height: 34px;
+    cursor: pointer;
+    background: #0000;
+    border: none;
+    color: inherit;
+
+    &:hover {
+        background: var(--nav-action-hover-bg);
+    }
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/nav/common/ToolbarContainer.svelte b/monosketch-svelte/src/lib/ui/nav/common/ToolbarContainer.svelte
new file mode 100644
index 000000000..ea9ad80c5
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/common/ToolbarContainer.svelte
@@ -0,0 +1,25 @@
+<script>
+export let moreSpaceLeft = false;
+export let moreSpaceRight = false;
+</script>
+
+<div class:add-space-left="{moreSpaceLeft}" class:add-space-right="{moreSpaceRight}">
+    <slot />
+</div>
+
+<style>
+div {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    align-items: center;
+}
+
+.add-space-left {
+    margin-left: 4px;
+}
+
+.add-space-right {
+    margin-right: 4px;
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/nav/mouseaction/MouseActionButton.svelte b/monosketch-svelte/src/lib/ui/nav/mouseaction/MouseActionButton.svelte
new file mode 100644
index 000000000..427c08019
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/mouseaction/MouseActionButton.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+import { MouseActionToContentMap, type MouseActionType } from './model';
+import TooltipTarget from '../../modal/tooltip/TooltipTarget.svelte';
+import SvgIcon from '../../common/SvgIcon.svelte';
+
+export let type: MouseActionType;
+export let onSelect: (type: MouseActionType) => void;
+export let selected: boolean = false;
+
+function onClick() {
+    onSelect(type);
+}
+</script>
+
+<TooltipTarget text="{MouseActionToContentMap[type].title}" offsetVertical="{8}">
+    <button class="action" class:selected on:click="{onClick}">
+        <SvgIcon viewBoxSize="{24}" size="{21}">
+            <path d="{MouseActionToContentMap[type].iconPath}"></path>
+        </SvgIcon>
+    </button>
+</TooltipTarget>
+
+<style lang="scss">
+button {
+    background: none;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 42px;
+    height: 32px;
+    border-radius: 6px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    user-select: none;
+    color: inherit;
+
+    &:hover {
+        background: var(--nav-action-hover-bg);
+    }
+
+    &.selected {
+        border-color: var(--nav-action-selected-border);
+    }
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/nav/mouseaction/MouseActionGroup.svelte b/monosketch-svelte/src/lib/ui/nav/mouseaction/MouseActionGroup.svelte
new file mode 100644
index 000000000..c11bf2c7a
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/mouseaction/MouseActionGroup.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+import MouseActionButton from './MouseActionButton.svelte';
+import {
+    MouseActionToContentMap,
+    MouseActionType,
+    mouseActionTypes,
+    RetainableActionTypeToMouseActionTypeMap
+} from './model';
+import { getContext, onDestroy, onMount } from "svelte";
+import type { AppContext } from "$app/app-context";
+import { APP_CONTEXT } from "$mono/common/constant";
+import { LifecycleOwner } from "$libs/flow";
+
+let selectedActionType: MouseActionType = MouseActionType.SELECTION;
+
+const appContext = getContext<AppContext>(APP_CONTEXT);
+
+const lifecycleOwner = new LifecycleOwner();
+
+function onSelect(actionType: MouseActionType) {
+    appContext.actionManager.setRetainableAction(MouseActionToContentMap[actionType].retainableActionType);
+}
+
+onMount(() => {
+    lifecycleOwner.onStart();
+
+    appContext.actionManager.retainableActionFlow.observe(lifecycleOwner, (value) => {
+        selectedActionType = RetainableActionTypeToMouseActionTypeMap[value];
+    });
+});
+
+onDestroy(() => {
+    lifecycleOwner.onStop();
+});
+</script>
+
+<div>
+    {#each mouseActionTypes as type}
+        <MouseActionButton {type} {onSelect} selected="{type === selectedActionType}" />
+    {/each}
+</div>
+
+<style>
+div {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    margin-left: 16px;
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/nav/mouseaction/model.ts b/monosketch-svelte/src/lib/ui/nav/mouseaction/model.ts
new file mode 100644
index 000000000..eb67774b5
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/mouseaction/model.ts
@@ -0,0 +1,52 @@
+import { RetainableActionType } from "$mono/action-manager/retainable-actions";
+
+export enum MouseActionType {
+    SELECTION,
+    ADD_RECTANGLE,
+    ADD_TEXT,
+    ADD_LINE,
+}
+
+export const mouseActionTypes = [
+    MouseActionType.SELECTION,
+    MouseActionType.ADD_RECTANGLE,
+    MouseActionType.ADD_TEXT,
+    MouseActionType.ADD_LINE,
+];
+
+interface MouseAction {
+    retainableActionType: RetainableActionType;
+    iconPath: string;
+    title: string;
+}
+
+export const MouseActionToContentMap: Record<MouseActionType, MouseAction> = {
+    [MouseActionType.SELECTION]: {
+        retainableActionType: RetainableActionType.IDLE,
+        iconPath: 'M7.436 20.61L7.275 3.914l12.296 11.29-7.165.235-4.97 5.168z',
+        title: 'Select (V)',
+    },
+    [MouseActionType.ADD_RECTANGLE]: {
+        retainableActionType: RetainableActionType.ADD_RECTANGLE,
+        iconPath: 'M22 19H2V5h20v14zM4 7v10h16V7z',
+        title: 'Rectangle (R)',
+    },
+    [MouseActionType.ADD_TEXT]: {
+        retainableActionType: RetainableActionType.ADD_TEXT,
+        iconPath:
+            'M5.635 21v-2h12.731v2zm3.27-4v-1.12h2.005V4.12H7.425l-.39.44v2.58h-1.4V3h12.731v4.14h-1.4V4.56l-.39-.44h-3.485v11.76h2.005V17z',
+        title: 'Text (T)',
+    },
+    [MouseActionType.ADD_LINE]: {
+        retainableActionType: RetainableActionType.ADD_LINE,
+        iconPath: 'M18 15v-2H6v2H0V9h6v2h12V9h6v6z',
+        title: 'Line (L)',
+    },
+};
+
+export const RetainableActionTypeToMouseActionTypeMap: Record<RetainableActionType, MouseActionType> = {
+    [RetainableActionType.IDLE]: MouseActionType.SELECTION,
+    [RetainableActionType.ADD_RECTANGLE]: MouseActionType.ADD_RECTANGLE,
+    [RetainableActionType.ADD_TEXT]: MouseActionType.ADD_TEXT,
+    [RetainableActionType.ADD_LINE]: MouseActionType.ADD_LINE,
+};
diff --git a/monosketch-svelte/src/lib/ui/nav/project/ProjectManager.svelte b/monosketch-svelte/src/lib/ui/nav/project/ProjectManager.svelte
new file mode 100644
index 000000000..b94c1ca0d
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/project/ProjectManager.svelte
@@ -0,0 +1,21 @@
+<!--
+  - Copyright (c) 2025, tuanchauict
+  -->
+
+<script lang="ts">
+    import WorkingProject from "$ui/nav/project/WorkingProject.svelte";
+    import ProjectManagerButton from "$ui/nav/project/ProjectManagerButton.svelte";
+    import ToolbarContainer from "$ui/nav/common/ToolbarContainer.svelte";
+    import { ProjectDataViewModel } from "$ui/nav/project/project-data-viewmodel";
+    import { getContext, setContext } from "svelte";
+    import { PROJECT_CONTEXT } from "$ui/nav/project/constants";
+    import { APP_CONTEXT } from "$mono/common/constant";
+
+    const projectDataViewModel = new ProjectDataViewModel(getContext(APP_CONTEXT));
+    setContext(PROJECT_CONTEXT, projectDataViewModel);
+</script>
+
+<ToolbarContainer>
+    <ProjectManagerButton/>
+    <WorkingProject/>
+</ToolbarContainer>
diff --git a/monosketch-svelte/src/lib/ui/nav/project/ProjectManagerButton.svelte b/monosketch-svelte/src/lib/ui/nav/project/ProjectManagerButton.svelte
new file mode 100644
index 000000000..c66955a9e
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/project/ProjectManagerButton.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+    import AppIcon from '../common/AppIcon.svelte';
+    import { TooltipDirection } from '$ui/modal/tooltip/model';
+    import TooltipTarget from '../../modal/tooltip/TooltipTarget.svelte';
+    import RecentProjectDialog from "$ui/modal/recent-project/RecentProjectDialog.svelte";
+
+    let isProjectManagerVisible = false;
+
+    function onClick() {
+        isProjectManagerVisible = true;
+    }
+
+    function onDialogDismiss() {
+        isProjectManagerVisible = false;
+    }
+</script>
+
+<TooltipTarget direction="{TooltipDirection.BOTTOM}" text="Manage projects" offsetVertical="{6.5}">
+    <AppIcon viewBoxSize="{800}" size="{16}" fill="none" {onClick}>
+        <path
+                d="M771 442 644 145c-7-17-24-28-43-28H199c-19 0-36 11-43 28L29 442m742 0v186c0 51-42 93-93 93H122c-51 0-93-42-93-93V442m742 0H586c-26 0-47 21-47 47v46c0 26-21 47-46 47H307c-25 0-46-21-46-47v-46c0-26-21-47-46-47H29m242-208 244-2m-291 94h337"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="50"
+        ></path>
+    </AppIcon>
+</TooltipTarget>
+
+{#if isProjectManagerVisible}
+    <RecentProjectDialog onDismiss="{onDialogDismiss}"/>
+{/if}
+
diff --git a/monosketch-svelte/src/lib/ui/nav/project/WorkingProject.svelte b/monosketch-svelte/src/lib/ui/nav/project/WorkingProject.svelte
new file mode 100644
index 000000000..0526df341
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/project/WorkingProject.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+    import WorkingProjectView from './WorkingProjectView.svelte';
+    import { LifecycleOwner } from '$libs/flow';
+    import { getContext, onMount } from 'svelte';
+    import type { ProjectDataViewModel } from "$ui/nav/project/project-data-viewmodel";
+    import { PROJECT_CONTEXT } from "$ui/nav/project/constants";
+    import { APP_CONTEXT } from "$mono/common/constant";
+    import { AppContext } from "$app/app-context";
+
+    const appContext = getContext<AppContext>(APP_CONTEXT);
+    const projectDataViewModel = getContext<ProjectDataViewModel>(PROJECT_CONTEXT);
+
+    let projectId = '';
+    let projectName = '';
+
+    onMount(() => {
+        const lifecycleOwner = LifecycleOwner.start();
+        projectDataViewModel.openingProjectFlow.observe(lifecycleOwner, (project) => {
+            // TODO: make the flow mapping ignore undefined value as return type.
+            projectId = project!.id;
+            projectName = project!.name;
+
+            appContext.browserManager.updateAppTitle(projectName);
+        });
+
+        return () => {
+            lifecycleOwner.onStop();
+        };
+    });
+</script>
+
+<div>
+    <WorkingProjectView {projectId} {projectName}/>
+</div>
+
+<style lang="scss">
+    div {
+        display: flex;
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/nav/project/WorkingProjectView.svelte b/monosketch-svelte/src/lib/ui/nav/project/WorkingProjectView.svelte
new file mode 100644
index 000000000..841533762
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/project/WorkingProjectView.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+    import SvgIcon from '../../common/SvgIcon.svelte';
+    import { TargetBounds } from '$ui/modal/model';
+    import CurrentProjectDropDown from "$ui/modal/menu/current-project/CurrentProjectDropDown.svelte";
+    import { getContext, onMount } from "svelte";
+    import { LifecycleOwner } from "$libs/flow";
+    import RenameProjectModal from "$ui/modal/rename-project/RenameProjectModal.svelte";
+    import type { ProjectDataViewModel } from "$ui/nav/project/project-data-viewmodel";
+    import { PROJECT_CONTEXT } from "$ui/nav/project/constants";
+
+    export let projectId: string;
+    export let projectName: string;
+
+    const projectDataViewModel = getContext<ProjectDataViewModel>(PROJECT_CONTEXT);
+
+    let button: HTMLElement;
+    let isDropDownMenuVisible = false;
+    let isRenameProjectVisible = false;
+
+    $: targetBounds = button ? TargetBounds.fromElement(button) : undefined;
+
+    function showMenu() {
+        targetBounds = button ? TargetBounds.fromElement(button) : undefined;
+        isDropDownMenuVisible = true;
+    }
+
+    function onMenuDismiss() {
+        isDropDownMenuVisible = false;
+    }
+
+    function updateTargetBounds() {
+        targetBounds = button ? TargetBounds.fromElement(button) : undefined;
+    }
+
+    onMount(() => {
+        const lifecycleOwner = LifecycleOwner.start();
+        projectDataViewModel.renamingProjectIdFlow.observe(lifecycleOwner, (id) => {
+            isRenameProjectVisible = id !== '';
+        });
+
+        return () => {
+            lifecycleOwner.onStop();
+        };
+    });
+</script>
+<svelte:window on:resize="{updateTargetBounds}"/>
+
+<div class="container">
+    <div role="button" tabindex="0" class="info-container"
+         bind:this={button}
+         on:click="{showMenu}"
+         on:keydown="{(e) => e.key === 'Enter' && showMenu()}">
+        <span class="info">
+            {projectName}
+        </span>
+        <div class="icon">
+            <SvgIcon size="{16}">
+                <path
+                        d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+                ></path>
+            </SvgIcon>
+        </div>
+    </div>
+</div>
+
+{#if isDropDownMenuVisible && targetBounds}
+    <CurrentProjectDropDown {projectId} {targetBounds} onDismiss="{onMenuDismiss}"/>
+{/if}
+
+{#if isRenameProjectVisible && targetBounds}
+    <RenameProjectModal {projectName} {targetBounds}/>
+{/if}
+
+<style lang="scss">
+    @import '../../../style/variables.scss';
+
+    $max-text-width: 210px;
+    .container {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        width: $max-text-width + 31px;
+    }
+
+    .info-container {
+        display: flex;
+        align-items: center;
+
+        border-radius: 6px;
+        padding: 8px 4px 8px 8px;
+        font-family: $monospaceFont;
+        cursor: pointer;
+
+        &:hover {
+            background: var(--nav-action-hover-bg);
+        }
+    }
+
+    .info {
+        display: flex;
+        align-items: center;
+
+        font-size: 14px;
+        max-width: $max-text-width;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    .icon {
+        display: flex;
+        margin-left: 4px;
+        padding-top: 4px;
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/nav/project/constants.ts b/monosketch-svelte/src/lib/ui/nav/project/constants.ts
new file mode 100644
index 000000000..530a649ab
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/project/constants.ts
@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2025, tuanchauict
+ */
+
+export const PROJECT_CONTEXT = "project-context";
diff --git a/monosketch-svelte/src/lib/ui/nav/project/model.ts b/monosketch-svelte/src/lib/ui/nav/project/model.ts
new file mode 100644
index 000000000..b3d9952b9
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/project/model.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2025, tuanchauict
+ */
+
+export enum ProjectAction {
+    Open,
+    OpenInNewTab,
+    Remove,
+    RemoveConfirmed,
+    CancelRemove,
+}
+
+export interface ProjectItem {
+    id: string;
+    name: string;
+}
diff --git a/monosketch-svelte/src/lib/ui/nav/project/project-data-viewmodel.ts b/monosketch-svelte/src/lib/ui/nav/project/project-data-viewmodel.ts
new file mode 100644
index 000000000..cc90d2c59
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/project/project-data-viewmodel.ts
@@ -0,0 +1,80 @@
+/*
+ * Copyright (c) 2025, tuanchauict
+ */
+
+import type { AppContext } from "$app/app-context";
+import { Flow, LifecycleOwner } from '$libs/flow';
+import { OneTimeAction } from "$mono/action-manager/one-time-actions";
+import { type ProjectItem } from 'lib/ui/nav/project/model';
+
+export class ProjectDataViewModel {
+    private _projectFlow: Flow<ProjectItem[]> = new Flow();
+    projectFlow = this._projectFlow.immutable();
+
+    renamingProjectIdFlow: Flow<string> = new Flow('');
+    openingProjectFlow: Flow<ProjectItem>;
+    deletingProjectIdFlow: Flow<string> = new Flow('');
+
+    lifecycleOwner: LifecycleOwner = new LifecycleOwner();
+
+    constructor(private appContext: AppContext) {
+        this.updateProjectList();
+        this.openingProjectFlow = Flow.combine2(
+            appContext.shapeManager.rootIdFlow,
+            appContext.workspaceDao.workspaceUpdateFlow,
+            (id) => this.getProject(id),
+        );
+    }
+
+    updateProjectList() {
+        this._projectFlow.value = this.appContext.workspaceDao.getObjects().map((dao) => {
+            return {
+                id: dao.objectId,
+                name: dao.name,
+            };
+        });
+    }
+
+    newProject() {
+        this.appContext.actionManager.setOneTimeAction(OneTimeAction.ProjectAction.NewProject);
+
+        // Delay for a short time to ensure the new project is created before renaming.
+        // TODO: Find a better way to handle this.
+        setTimeout(() => {
+            this.setRenamingProject(this.appContext.shapeManager.rootIdFlow.value || '');
+        }, 100);
+    }
+
+    openProject(id: string) {
+        this.appContext.actionManager.setOneTimeAction(OneTimeAction.ProjectAction.SwitchProject(id));
+    }
+
+    confirmDeletingProject(id: string) {
+        this.deletingProjectIdFlow.value = id;
+    }
+
+    deleteProject(id: string) {
+        this.appContext.actionManager.setOneTimeAction(OneTimeAction.ProjectAction.RemoveProject(id));
+        this.updateProjectList();
+    }
+
+    cancelDeletingProject() {
+        this.deletingProjectIdFlow.value = '';
+    }
+
+    setRenamingProject(id: string) {
+        this.renamingProjectIdFlow.value = id;
+    }
+
+    setCurrentProjectName(name: string) {
+        this.appContext.actionManager.setOneTimeAction(OneTimeAction.ProjectAction.RenameCurrentProject(name));
+    }
+
+    private getProject(id: string): ProjectItem {
+        const objectDao = this.appContext.workspaceDao.getObject(id);
+        return {
+            id,
+            name: objectDao.name,
+        };
+    }
+}
diff --git a/monosketch-svelte/src/lib/ui/nav/right/AppDropdownMenu.svelte b/monosketch-svelte/src/lib/ui/nav/right/AppDropdownMenu.svelte
new file mode 100644
index 000000000..11c43eabe
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/right/AppDropdownMenu.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+    import AppIcon from '../common/AppIcon.svelte';
+    import { TargetBounds } from '$ui/modal/model';
+    import type { Rect } from "$libs/graphics-geo/rect";
+    import MainDropDown from "$ui/modal/menu/main-dropdown/MainDropDown.svelte";
+    import KeyboardShortcutModal from "$ui/modal/keyboard-shortcut/KeyboardShortcutModal.svelte";
+    import { MainMenuAction } from "$ui/modal/menu/main-dropdown/model";
+    import { UiStatePayload } from "$mono/ui-state-manager/ui-state-payload";
+    import { getContext } from "svelte";
+    import type { AppContext } from "$app/app-context";
+    import { APP_CONTEXT } from "$mono/common/constant";
+
+    const appContext = getContext<AppContext>(APP_CONTEXT);
+
+    let targetView: HTMLElement | undefined;
+    let targetBounds: Rect | undefined;
+
+    let isKeyboardShortcutsVisible = false;
+
+    function showDropdown(e: MouseEvent) {
+        targetView = e.currentTarget as HTMLElement;
+        updateTargetBounds();
+    }
+
+    function onDismiss() {
+        targetView = undefined;
+        targetBounds = undefined;
+    }
+
+    function updateTargetBounds() {
+        targetBounds = targetView ? TargetBounds.fromElement(targetView) : undefined;
+    }
+
+    function onAction(action: MainMenuAction) {
+        switch (action) {
+            case MainMenuAction.IncreaseFontSize:
+                appContext.appUiStateManager.updateUiState(UiStatePayload.ChangeFontSize(true));
+                break;
+            case MainMenuAction.DecreaseFontSize:
+                appContext.appUiStateManager.updateUiState(UiStatePayload.ChangeFontSize(false));
+                break;
+            case MainMenuAction.ShowFormatPanel:
+                appContext.appUiStateManager.updateUiState(UiStatePayload.ShapeToolVisibility(true));
+                break;
+            case MainMenuAction.HideFormatPanel:
+                appContext.appUiStateManager.updateUiState(UiStatePayload.ShapeToolVisibility(false));
+                break;
+            case MainMenuAction.ShowKeyboardShortcut:
+                isKeyboardShortcutsVisible = true;
+        }
+    }
+</script>
+<svelte:window on:resize="{updateTargetBounds}"/>
+
+<AppIcon size="{20}" viewBoxSize="{20}" onClick="{showDropdown}">
+    <path
+            d="M5.2 9.6C5.2 10.4837 4.48366 11.2 3.6 11.2C2.71634 11.2 2 10.4837 2 9.6C2 8.71634 2.71634 8 3.6 8C4.48366 8 5.2 8.71634 5.2 9.6Z"
+    ></path>
+    <path
+            d="M11.6 9.6C11.6 10.4837 10.8837 11.2 10 11.2C9.11634 11.2 8.4 10.4837 8.4 9.6C8.4 8.71634 9.11634 8 10 8C10.8837 8 11.6 8.71634 11.6 9.6Z"
+    ></path>
+    <path
+            d="M18 9.6C18 10.4837 17.2837 11.2 16.4 11.2C15.5163 11.2 14.8 10.4837 14.8 9.6C14.8 8.71634 15.5163 8 16.4 8C17.2837 8 18 8.71634 18 9.6Z"
+    ></path>
+</AppIcon>
+
+{#if targetBounds}
+    <MainDropDown targetBounds="{targetBounds}" {onAction} {onDismiss}/>
+{/if}
+
+{#if isKeyboardShortcutsVisible}
+    <KeyboardShortcutModal onDismiss="{() => isKeyboardShortcutsVisible = false}"/>
+{/if}
diff --git a/monosketch-svelte/src/lib/ui/nav/right/ScrollModeButton.svelte b/monosketch-svelte/src/lib/ui/nav/right/ScrollModeButton.svelte
new file mode 100644
index 000000000..84aef7cd6
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/right/ScrollModeButton.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import TooltipTarget from '$ui/modal/tooltip/TooltipTarget.svelte';
+    import { TooltipDirection } from '$ui/modal/tooltip/model';
+    import { ScrollMode } from '$mono/ui-state-manager/states';
+    import AppIcon from '$ui/nav/common/AppIcon.svelte';
+    import { scrollModeToContentMap } from '$ui/nav/right/model';
+    import { getContext, onMount } from 'svelte';
+    import { LifecycleOwner } from 'lib/libs/flow';
+    import { APP_CONTEXT } from '$mono/common/constant';
+    import type { AppContext } from '$app/app-context';
+    import { UiStatePayload } from "$mono/ui-state-manager/ui-state-payload";
+
+    let scrollMode: ScrollMode = ScrollMode.BOTH;
+    const appContext = getContext<AppContext>(APP_CONTEXT);
+
+    onMount(() => {
+        const lifecycleOwner = LifecycleOwner.start();
+
+        appContext.appUiStateManager.scrollModeFlow.observe(lifecycleOwner, (value) => {
+            scrollMode = value;
+        });
+
+        return () => {
+            lifecycleOwner.onStop();
+        };
+    });
+
+    function changeMode() {
+        const nextMode = scrollModeToContentMap[scrollMode].next;
+        appContext.appUiStateManager.updateUiState(UiStatePayload.ChangeScrollMode(nextMode));
+    }
+</script>
+
+<TooltipTarget direction="{TooltipDirection.BOTTOM}" text="Scroll mode" offsetVertical="{6.5}">
+    <AppIcon size="{16}" viewBoxSize="{40}" onClick="{changeMode}">
+        <path d="{scrollModeToContentMap[scrollMode].iconPath}"></path>
+    </AppIcon>
+</TooltipTarget>
diff --git a/monosketch-svelte/src/lib/ui/nav/right/ThemeButton.svelte b/monosketch-svelte/src/lib/ui/nav/right/ThemeButton.svelte
new file mode 100644
index 000000000..cd9e369c7
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/right/ThemeButton.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+import { getContext, onMount } from 'svelte';
+import { APP_CONTEXT } from '$mono/common/constant';
+import { AppContext } from '$app/app-context';
+import { LifecycleOwner } from 'lib/libs/flow';
+import ThemeModeIcon from '$ui/nav/right/ThemeModeIcon.svelte';
+import { ThemeMode } from '$mono/ui-state-manager/states';
+import { UiStatePayload } from "$mono/ui-state-manager/ui-state-payload";
+
+let themeMode: ThemeMode;
+
+const appContext = getContext<AppContext>(APP_CONTEXT);
+
+onMount(() => {
+    const lifecycleOwner = LifecycleOwner.start();
+
+    appContext.appUiStateManager.themeModeFlow.observe(lifecycleOwner, (mode) => {
+        themeMode = mode;
+    });
+
+    return () => {
+        lifecycleOwner.onStop();
+    };
+});
+
+function updateTheme(mode: ThemeMode) {
+    appContext.appUiStateManager.updateUiState(UiStatePayload.ChangeTheme(mode));
+}
+</script>
+
+{#if themeMode === ThemeMode.DARK}
+    <ThemeModeIcon onChangeTheme="{updateTheme}" themeMode="{ThemeMode.DARK}" />
+{:else}
+    <ThemeModeIcon onChangeTheme="{updateTheme}" themeMode="{ThemeMode.LIGHT}" />
+{/if}
diff --git a/monosketch-svelte/src/lib/ui/nav/right/ThemeModeIcon.svelte b/monosketch-svelte/src/lib/ui/nav/right/ThemeModeIcon.svelte
new file mode 100644
index 000000000..cd80387ee
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/right/ThemeModeIcon.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { themeModeToContentMap } from '$ui/nav/right/model';
+    import TooltipTarget from '$ui/modal/tooltip/TooltipTarget.svelte';
+    import AppIcon from '$ui/nav/common/AppIcon.svelte';
+    import { TooltipDirection } from '$ui/modal/tooltip/model';
+    import { ThemeMode } from '$mono/ui-state-manager/states';
+
+    export let themeMode: ThemeMode;
+    export let onChangeTheme: (themeMode: ThemeMode) => void;
+
+    function changeTheme() {
+        onChangeTheme(themeModeToContentMap[themeMode].next);
+    }
+</script>
+
+<TooltipTarget
+        direction="{TooltipDirection.BOTTOM}"
+        text="{themeModeToContentMap[themeMode].title}"
+        offsetVertical="{6.5}"
+>
+    <AppIcon onClick="{changeTheme}" size="{20}" viewBoxSize="{16}">
+        <path d="{themeModeToContentMap[themeMode].iconPath}"></path>
+    </AppIcon>
+</TooltipTarget>
diff --git a/monosketch-svelte/src/lib/ui/nav/right/model.ts b/monosketch-svelte/src/lib/ui/nav/right/model.ts
new file mode 100644
index 000000000..fef5246ee
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/nav/right/model.ts
@@ -0,0 +1,34 @@
+import { ScrollMode, ThemeMode } from '$mono/ui-state-manager/states';
+
+export const themeModeToContentMap = {
+    [ThemeMode.LIGHT]: {
+        title: 'Dark Mode',
+        next: ThemeMode.DARK,
+        iconPath:
+            'M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8.5 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 11a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm5-5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm-11 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm9.743-4.036a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707zm-7.779 7.779a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707zm7.072 0a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707zM3.757 4.464a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707z',
+    },
+    [ThemeMode.DARK]: {
+        title: 'Light Mode',
+        next: ThemeMode.LIGHT,
+        iconPath:
+            'M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm.5-9.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 11a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm5-5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm-11 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm9.743-4.036a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707zm-7.779 7.779a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707zm7.072 0a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707zM3.757 4.464a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707z',
+    },
+};
+
+export const scrollModeToContentMap = {
+    [ScrollMode.BOTH]: {
+        next: ScrollMode.VERTICAL,
+        iconPath:
+            'M25 20a5 5 0 1 1-10 0 5 5 0 0 1 10 0ZM19.01.582a1.134 1.134 0 0 1 1.98 0l4.87 8.834c.41.744-.133 1.651-.99 1.651h-9.74c-.857 0-1.4-.907-.99-1.651L19.01.582ZM20.99 39.418a1.134 1.134 0 0 1-1.98 0l-4.87-8.834c-.41-.744.133-1.651.99-1.651h9.74c.857 0 1.4.907.99 1.651l-4.87 8.834ZM.582 20.99a1.134 1.134 0 0 1 0-1.98l8.834-4.87c.744-.41 1.651.133 1.651.99v9.74c0 .857-.907 1.4-1.651.99L.582 20.99ZM39.418 19.01a1.134 1.134 0 0 1 0 1.98l-8.834 4.87c-.744.41-1.651-.133-1.651-.99v-9.74c0-.857.907-1.4 1.651-.99l8.834 4.87Z',
+    },
+    [ScrollMode.VERTICAL]: {
+        next: ScrollMode.HORIZONTAL,
+        iconPath:
+            'M25 20a5 5 0 1 1-10 0 5 5 0 0 1 10 0ZM19.01.582a1.134 1.134 0 0 1 1.98 0l4.87 8.834c.41.744-.133 1.651-.99 1.651h-9.74c-.857 0-1.4-.907-.99-1.651L19.01.582ZM20.99 39.418a1.134 1.134 0 0 1-1.98 0l-4.87-8.834c-.41-.744.133-1.651.99-1.651h9.74c.857 0 1.4.907.99 1.651l-4.87 8.834Z',
+    },
+    [ScrollMode.HORIZONTAL]: {
+        next: ScrollMode.BOTH,
+        iconPath:
+            'M25 20a5 5 0 1 1-10 0 5 5 0 0 1 10 0ZM.582 20.99a1.134 1.134 0 0 1 0-1.98l8.834-4.87c.744-.41 1.651.133 1.651.99v9.74c0 .857-.907 1.4-1.651.99L.582 20.99ZM39.418 19.01a1.134 1.134 0 0 1 0 1.98l-8.834 4.87c-.744.41-1.651-.133-1.651-.99v-9.74c0-.857.907-1.4 1.651-.99l8.834 4.87Z',
+    },
+};
diff --git a/monosketch-svelte/src/lib/ui/pannel/common/NumberTextField.svelte b/monosketch-svelte/src/lib/ui/pannel/common/NumberTextField.svelte
new file mode 100644
index 000000000..601c22eff
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/common/NumberTextField.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+export let label: string;
+export let value: number;
+export let minValue: number | null = null;
+export let isEnabled: boolean = true;
+export let boundIncludesLabel = false;
+
+export let onChange: () => void;
+</script>
+
+<div class:child-bounds="{!boundIncludesLabel}">
+    <label for="">{label}</label>
+    <input
+        type="number"
+        bind:value
+        disabled="{!isEnabled}"
+        on:change={onChange}
+        min="{minValue !== null ? minValue : ''}"
+    />
+</div>
+
+<style lang="scss">
+div {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 1px 2px 1px 8px;
+    border: 1px solid transparent;
+    border-radius: 2px;
+
+    &:hover {
+        outline: 1px solid var(--text-input-border-color);
+    }
+
+    &:focus-within {
+        outline: 1.5px solid var(--text-input-border-focus-color);
+    }
+
+    &.child-bounds {
+        padding: 1px 0;
+
+        &:hover {
+            outline: none;
+        }
+
+        &:focus-within {
+            outline: none;
+        }
+
+        input[type='number'] {
+            padding-left: 4px;
+            padding-right: 4px;
+            border-radius: 2px;
+            margin-left: 10px;
+
+            &:hover {
+                outline: 1px solid var(--text-input-border-color);
+            }
+
+            &:focus-within {
+                outline: 2px solid var(--text-input-border-focus-color);
+            }
+        }
+    }
+}
+
+label {
+    font-size: 12px;
+    font-weight: 300;
+    user-select: none;
+    color: var(--text-input-label-color);
+}
+
+input[type='number'] {
+    height: 24px;
+    width: 100%;
+    margin-left: 12px;
+    border: none;
+    color: var(--text-input-value-color);
+    background: transparent;
+    font-size: 12px;
+
+    &:focus,
+    &:active {
+        outline: none;
+    }
+}
+
+input[type='number'] {
+    appearance: textfield;
+
+    // Webkit browsers like Safari, Chrome, etc.
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/pannel/common/Section.svelte b/monosketch-svelte/src/lib/ui/pannel/common/Section.svelte
new file mode 100644
index 000000000..36d620221
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/common/Section.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+export let title = '';
+export let hasBorderTop = true;
+</script>
+
+<section class:notitle="{!title}" class:border-top="{hasBorderTop}">
+    {#if title}
+        <h3>{title}</h3>
+    {/if}
+    <div class="content">
+        <slot />
+    </div>
+</section>
+
+<style lang="scss">
+section {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 10px;
+    color: var(--shapetool-section-content-color);
+
+    &.notitle {
+        padding: 4px 10px;
+    }
+
+    &.border-top {
+        border-top: 0.75px solid var(--shapetool-section-divider-color);
+    }
+}
+
+h3 {
+    margin: 0 0 10px 0;
+    padding: 0;
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--shapetool-section-title-color);
+    user-select: none;
+    letter-spacing: 1.2px;
+}
+.content {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/Footer.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/Footer.svelte
new file mode 100644
index 000000000..1f4e93a7f
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/Footer.svelte
@@ -0,0 +1,44 @@
+<!--
+  - Copyright (c) 2024, tuanchauict
+  -->
+<script>
+</script>
+
+<div>
+    <a href="https://github.com/tuanchauict/MonoSketch">
+        <svg width="16" height="16" viewBox="0 0 32 32" fill="currentColor">
+            <path d="M16.288 0a16.291 16.291 0 0 0-5.148 31.747c.815.149 1.112-.353 1.112-.785 0-.387-.014-1.411-.022-2.771-4.531.985-5.487-2.183-5.487-2.183a4.315 4.315 0 0 0-1.809-2.383c-1.479-1.011.112-.99.112-.99a3.42 3.42 0 0 1 2.495 1.678 3.468 3.468 0 0 0 4.741 1.354 3.482 3.482 0 0 1 1.034-2.178c-3.617-.411-7.42-1.808-7.42-8.051a6.3 6.3 0 0 1 1.677-4.371 5.852 5.852 0 0 1 .16-4.311s1.367-.438 4.479 1.67a15.448 15.448 0 0 1 8.156 0c3.11-2.108 4.475-1.67 4.475-1.67a5.854 5.854 0 0 1 .163 4.311 6.286 6.286 0 0 1 1.674 4.371c0 6.258-3.809 7.635-7.438 8.038a3.889 3.889 0 0 1 1.106 3.017c0 2.178-.02 3.935-.02 4.469 0 .435.294.942 1.12.783A16.292 16.292 0 0 0 16.288 0z"></path>
+        </svg>
+        <span>GitHub</span>
+    </a>
+</div>
+
+<style lang="scss">
+div {
+    padding: 10px 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+a {
+    line-height: 14px;
+    font-size: 14px;
+    text-decoration: none;
+    color: var(--shapetool-footer-color);
+    display: flex;
+    align-items: center;
+
+    &:hover {
+        color: var(--shapetool-footer-hover-color);
+    }
+
+    &:active {
+        color: var(--shapetool-footer-active-color);
+    }
+
+    span {
+        margin-left: 6px;
+    }
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/ShapeTool.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/ShapeTool.svelte
new file mode 100644
index 000000000..49895a0d5
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/ShapeTool.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { getContext, onDestroy, onMount, setContext } from 'svelte';
+    import { AppContext } from '$app/app-context';
+    import { APP_CONTEXT } from '$mono/common/constant';
+    import { Flow, LifecycleOwner } from 'lib/libs/flow';
+    import Footer from "./Footer.svelte";
+    import ShapeToolBody from "$ui/pannel/shapetool/ShapeToolBody.svelte";
+    import { ShapeToolViewModel } from "$ui/pannel/shapetool/viewmodel/shape-tool-viewmodel";
+    import { SHAPE_TOOL_VIEWMODEL } from "$ui/pannel/shapetool/constants.js";
+
+    const appContext = getContext<AppContext>(APP_CONTEXT);
+    const lifecycleOwner = new LifecycleOwner();
+
+    setContext(SHAPE_TOOL_VIEWMODEL, new ShapeToolViewModel(
+        new Flow(new Set()), // TODO: Replace with real flow
+        appContext.shapeManager.versionFlow,
+        appContext.actionManager
+    ));
+
+    let isVisible = true;
+
+    onMount(() => {
+        lifecycleOwner.onStart();
+
+        appContext.appUiStateManager.shapeFormatPanelVisibilityFlow.observe(lifecycleOwner, (value) => {
+            isVisible = value;
+        });
+    });
+
+    onDestroy(() => {
+        lifecycleOwner.onStop();
+    });
+</script>
+
+{#if isVisible}
+    <div class="container">
+        <div class="body">
+            <ShapeToolBody/>
+        </div>
+        <Footer/>
+    </div>
+{/if}
+
+<style lang="scss">
+    @import '$style/variables.scss';
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        border-left: 1px solid var(--shapetool-main-divider-color);
+        background: var(--shapetool-bg-color);
+
+        font-family: $uiTextFont;
+        font-size: 12px;
+    }
+
+    .body {
+        height: 100%;
+        overflow-y: scroll;
+        display: flex;
+        flex-direction: column;
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/ShapeToolBody.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/ShapeToolBody.svelte
new file mode 100644
index 000000000..747b9f89a
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/ShapeToolBody.svelte
@@ -0,0 +1,94 @@
+<!--
+  - Copyright (c) 2024, tuanchauict
+  -->
+
+<script lang="ts">
+    import TransformTool from "$ui/pannel/shapetool/transform/TransformTool.svelte";
+    import ReorderTool from "$ui/pannel/shapetool/reorder/ReorderTool.svelte";
+    import AppearanceTool from "$ui/pannel/shapetool/appearance/AppearanceTool.svelte";
+    import TextTool from "$ui/pannel/shapetool/text/TextTool.svelte";
+    import { getContext, onDestroy, onMount } from "svelte";
+    import { LifecycleOwner } from "$libs/flow";
+    import { ShapeToolViewModel } from "$ui/pannel/shapetool/viewmodel/shape-tool-viewmodel";
+    import { SHAPE_TOOL_VIEWMODEL } from "$ui/pannel/shapetool/constants";
+
+    let viewModel: ShapeToolViewModel = getContext<ShapeToolViewModel>(SHAPE_TOOL_VIEWMODEL);
+
+    const lifecycleOwner = new LifecycleOwner();
+
+    let isReorderToolVisible = viewModel.reorderToolVisibilityFlow.value;
+    let isTransformToolVisible = !!viewModel.singleShapeBoundFlow.value; // not null nor undefined
+    let isAppearanceToolVisible = viewModel.appearanceVisibilityFlow.value;
+    let isTextToolVisible = !!viewModel.textAlignFlow.value; // not null nor undefined
+
+    $: hasAnyVisibleTool =
+            isReorderToolVisible || isTransformToolVisible || isAppearanceToolVisible || isTextToolVisible;
+
+    onMount(() => {
+        lifecycleOwner.onStart();
+
+        viewModel.reorderToolVisibilityFlow.observe(lifecycleOwner, (value) => {
+            isReorderToolVisible = value;
+        });
+
+        viewModel.singleShapeBoundFlow.observe(lifecycleOwner, (value) => {
+            isTransformToolVisible = !!value;
+        });
+
+        viewModel.appearanceVisibilityFlow.observe(lifecycleOwner, (value) => {
+            isAppearanceToolVisible = value;
+        });
+
+        viewModel.textAlignFlow.observe(lifecycleOwner, (value) => {
+            isTextToolVisible = !!value;
+        });
+    });
+
+    onDestroy(() => {
+        lifecycleOwner.onStop();
+    });
+</script>
+
+{#if isReorderToolVisible }
+    <ReorderTool/>
+{/if}
+
+{#if isTransformToolVisible }
+    <TransformTool/>
+{/if}
+
+{#if isAppearanceToolVisible}
+    <AppearanceTool/>
+{/if}
+
+{#if isTextToolVisible }
+    <TextTool/>
+{/if}
+
+{#if !hasAnyVisibleTool}
+    <div class="empty">
+        <span>Select a shape for updating its properties here</span>
+    </div>
+{/if}
+
+<style lang="scss">
+    @import '../../../style/variables.scss';
+
+    .empty {
+        height: 100%;
+        justify-content: center;
+        margin-bottom: 200px;
+        margin-top: 28px;
+        padding: 10px;
+    }
+
+    span {
+        font-size: 13px;
+        font-family: $monospaceFont;
+        color: var(--shapetool-indicator-color);
+        font-weight: 300;
+        display: block;
+        text-align: center;
+        margin: 120px 8px;
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/AppearanceTool.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/AppearanceTool.svelte
new file mode 100644
index 000000000..527805fc1
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/AppearanceTool.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import Section from '../../common/Section.svelte';
+    import FillTool from './FillTool.svelte';
+    import BorderTool from './BorderTool.svelte';
+    import StrokeTool from './StrokeTool.svelte';
+    import StartHeadTool from './StartHeadTool.svelte';
+    import EndHeadTool from './EndHeadTool.svelte';
+</script>
+
+<Section title="APPEARANCE">
+    <FillTool/>
+    <BorderTool/>
+    <StrokeTool/>
+    <StartHeadTool/>
+    <EndHeadTool/>
+</Section>
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/BorderTool.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/BorderTool.svelte
new file mode 100644
index 000000000..b0b868e76
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/BorderTool.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+    import CommonBorderTool from './common/CommonBorderTool.svelte';
+    import { getContext, onDestroy, onMount } from "svelte";
+    import { ShapeToolViewModel } from "$ui/pannel/shapetool/viewmodel/shape-tool-viewmodel";
+    import { SHAPE_TOOL_VIEWMODEL } from "$ui/pannel/shapetool/constants";
+    import { LifecycleOwner } from "$libs/flow";
+    import type { StrokeDashPattern } from "$ui/pannel/shapetool/viewmodel/models";
+    import { OneTimeAction } from "$mono/action-manager/one-time-actions";
+
+    let viewModel = getContext<ShapeToolViewModel>(SHAPE_TOOL_VIEWMODEL);
+    let lifecycleOwner = new LifecycleOwner();
+
+    let selectedStrokeItem = viewModel.shapeBorderTypeFlow.value;
+    let cornerRounded = viewModel.shapeBorderRoundedCornerFlow.value;
+
+    let dashPattern: StrokeDashPattern | null | undefined = viewModel.shapeBorderDashTypeFlow.value;
+
+    function onItemSelect(id: string | null) {
+        viewModel.update(OneTimeAction.ChangeShapeBorderExtra({ newBorderStyleId: id, isEnabled: id !== null }));
+    }
+
+    function onCornerRoundedChange(value: boolean) {
+        viewModel.update(OneTimeAction.ChangeShapeBorderCornerExtra(value));
+    }
+
+    function onDashPatternChange(dashPattern: StrokeDashPattern) {
+        viewModel.update(OneTimeAction.ChangeShapeBorderDashPatternExtra(dashPattern));
+    }
+
+    onMount(() => {
+        lifecycleOwner.onStart();
+
+        viewModel.shapeBorderTypeFlow.observe(lifecycleOwner, (value) => {
+            selectedStrokeItem = value;
+        });
+
+        viewModel.shapeBorderRoundedCornerFlow.observe(lifecycleOwner, (value) => {
+            cornerRounded = value;
+        });
+
+        viewModel.shapeBorderDashTypeFlow.observe(lifecycleOwner, (value) => {
+            dashPattern = value;
+        });
+    });
+
+    onDestroy(() => {
+        lifecycleOwner.onStop();
+    });
+</script>
+
+{#if selectedStrokeItem && cornerRounded !== undefined && dashPattern !== undefined}
+    <CommonBorderTool
+            title="Border"
+            {onItemSelect}
+            selectedId="{selectedStrokeItem.selectedId}"
+            {cornerRounded}
+            onCornerRounded="{onCornerRoundedChange}"
+            {dashPattern}
+            {onDashPatternChange}
+    />
+{/if}
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/EndHeadTool.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/EndHeadTool.svelte
new file mode 100644
index 000000000..748845c33
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/EndHeadTool.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    import CommonLineAnchorTool from './common/CommonLineAnchorTool.svelte';
+    import type { ShapeToolViewModel } from "$ui/pannel/shapetool/viewmodel/shape-tool-viewmodel";
+    import { getContext, onDestroy, onMount } from "svelte";
+    import { SHAPE_TOOL_VIEWMODEL } from "$ui/pannel/shapetool/constants";
+    import { OneTimeAction } from "$mono/action-manager/one-time-actions";
+    import { LifecycleOwner } from "$libs/flow";
+
+    let viewModel: ShapeToolViewModel = getContext(SHAPE_TOOL_VIEWMODEL);
+    let lifecycleOwner = new LifecycleOwner();
+
+    let anchorItem = viewModel.lineEndHeadFlow.value;
+
+    function onItemSelect(id: string | null) {
+        viewModel.update(OneTimeAction.ChangeLineEndAnchorExtra({ newHeadId: id, isEnabled: id !== null }));
+    }
+
+    onMount(() => {
+        lifecycleOwner.onStart();
+
+        viewModel.lineEndHeadFlow.observe(lifecycleOwner, (value) => {
+            anchorItem = value;
+        });
+    });
+
+    onDestroy(() => {
+        lifecycleOwner.onStop();
+    });
+</script>
+{#if anchorItem}
+    <CommonLineAnchorTool title="End head" selectedId="{anchorItem.selectedId}" {onItemSelect}/>
+{/if}
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/FillTool.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/FillTool.svelte
new file mode 100644
index 000000000..41788095b
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/FillTool.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+    import Tool from './common/Tool.svelte';
+    import CloudItem from './common/CloudItem.svelte';
+    import type { ShapeToolViewModel } from "$ui/pannel/shapetool/viewmodel/shape-tool-viewmodel";
+    import { getContext, onDestroy, onMount } from "svelte";
+    import { SHAPE_TOOL_VIEWMODEL } from "$ui/pannel/shapetool/constants";
+    import { LifecycleOwner } from "$libs/flow";
+    import { OneTimeAction } from "$mono/action-manager/one-time-actions";
+    import type { CloudItemSelectionState } from "$ui/pannel/shapetool/viewmodel/models";
+
+    let viewModel = getContext<ShapeToolViewModel>(SHAPE_TOOL_VIEWMODEL);
+    let lifecycleOwner = new LifecycleOwner();
+
+    let shapeFillToolSelectionState: CloudItemSelectionState | null | undefined = viewModel.shapeFillTypeFlow.value;
+
+    onMount(() => {
+        lifecycleOwner.onStart();
+
+        viewModel.shapeFillTypeFlow.observe(lifecycleOwner, (value) => {
+            shapeFillToolSelectionState = value;
+        });
+    });
+
+    onDestroy(() => {
+        lifecycleOwner.onStop();
+    });
+
+    function onItemSelect(id: string | null) {
+        viewModel.update(OneTimeAction.ChangeShapeFillExtra({ isEnabled: id !== null, newFillStyleId: id }));
+    }
+</script>
+{#if shapeFillToolSelectionState}
+    <Tool title="Fill" available="{true}">
+        <div>
+            <!-- Disable-item -->
+            <CloudItem
+                    id="{null}"
+                    selected="{shapeFillToolSelectionState.selectedId === null}"
+                    useDashBorder="{true}"
+                    onSelect="{onItemSelect}">×
+            </CloudItem>
+
+            {#each viewModel.fillOptions as option}
+                <CloudItem
+                        id="{option.id}"
+                        selected="{option.id === shapeFillToolSelectionState.selectedId}"
+                        onSelect="{onItemSelect}">{option.name}</CloudItem
+                >
+            {/each}
+        </div>
+    </Tool>
+{/if}
+
+<style lang="scss">
+    div {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 7px;
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/StartHeadTool.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/StartHeadTool.svelte
new file mode 100644
index 000000000..e3dc72b70
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/StartHeadTool.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+    import CommonLineAnchorTool from './common/CommonLineAnchorTool.svelte';
+    import type { ShapeToolViewModel } from "$ui/pannel/shapetool/viewmodel/shape-tool-viewmodel";
+    import { getContext, onDestroy, onMount } from "svelte";
+    import { SHAPE_TOOL_VIEWMODEL } from "$ui/pannel/shapetool/constants";
+    import { OneTimeAction } from "$mono/action-manager/one-time-actions";
+    import { LifecycleOwner } from "$libs/flow";
+
+    let viewModel: ShapeToolViewModel = getContext(SHAPE_TOOL_VIEWMODEL);
+    let lifecycleOwner = new LifecycleOwner();
+
+    let anchorItem = viewModel.lineStartHeadFlow.value;
+
+    function onItemSelect(id: string | null) {
+        viewModel.update(OneTimeAction.ChangeLineStartAnchorExtra({ newHeadId: id, isEnabled: id !== null }));
+    }
+
+    onMount(() => {
+        lifecycleOwner.onStart();
+
+        viewModel.lineStartHeadFlow.observe(lifecycleOwner, (value) => {
+            anchorItem = value;
+        });
+    });
+
+    onDestroy(() => {
+        lifecycleOwner.onStop();
+    });
+</script>
+
+{#if anchorItem}
+    <CommonLineAnchorTool title="Start head" selectedId="{anchorItem.selectedId}" {onItemSelect}/>
+{/if}
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/StrokeTool.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/StrokeTool.svelte
new file mode 100644
index 000000000..57fd27973
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/StrokeTool.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+    import CommonBorderTool from './common/CommonBorderTool.svelte';
+    import { SHAPE_TOOL_VIEWMODEL } from "$ui/pannel/shapetool/constants";
+    import { getContext, onDestroy, onMount } from "svelte";
+    import { ShapeToolViewModel } from "$ui/pannel/shapetool/viewmodel/shape-tool-viewmodel";
+    import { LifecycleOwner } from "$libs/flow";
+    import { OneTimeAction } from "$mono/action-manager/one-time-actions";
+    import type { StrokeDashPattern } from "$ui/pannel/shapetool/viewmodel/models";
+
+    let viewModel = getContext<ShapeToolViewModel>(SHAPE_TOOL_VIEWMODEL);
+    let lifecycleOwner = new LifecycleOwner();
+
+    let selectedStrokeItem = viewModel.lineStrokeTypeFlow.value;
+    let cornerRounded = viewModel.lineStrokeRoundedCornerFlow.value;
+
+    let dashPattern: StrokeDashPattern | null | undefined = viewModel.lineStrokeDashTypeFlow.value;
+
+    function onItemSelect(id: string | null) {
+        viewModel.update(OneTimeAction.ChangeLineStrokeExtra({ newStrokeStyleId: id, isEnabled: id !== null }));
+    }
+
+    function onCornerRoundedChange(value: boolean) {
+        viewModel.update(OneTimeAction.ChangeLineStrokeCornerExtra(value));
+    }
+
+    function onDashPatternChange(dashPattern: StrokeDashPattern) {
+        viewModel.update(OneTimeAction.ChangeLineStrokeDashPatternExtra(dashPattern));
+    }
+
+    onMount(() => {
+        lifecycleOwner.onStart();
+
+        viewModel.lineStrokeTypeFlow.observe(lifecycleOwner, (value) => {
+            selectedStrokeItem = value;
+        });
+
+        viewModel.lineStrokeRoundedCornerFlow.observe(lifecycleOwner, (value) => {
+            cornerRounded = value;
+        });
+
+        viewModel.lineStrokeDashTypeFlow.observe(lifecycleOwner, (value) => {
+            dashPattern = value;
+        });
+    });
+
+    onDestroy(() => {
+        lifecycleOwner.onStop();
+    });
+</script>
+{#if selectedStrokeItem && cornerRounded !== undefined && dashPattern !== undefined}
+    <CommonBorderTool
+            title="Stroke"
+            {onItemSelect}
+            selectedId="{selectedStrokeItem.selectedId}"
+            {cornerRounded}
+            onCornerRounded="{onCornerRoundedChange}"
+            {dashPattern}
+            {onDashPatternChange}
+    />
+{/if}
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/common/CloudItem.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/common/CloudItem.svelte
new file mode 100644
index 000000000..832aa2afc
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/common/CloudItem.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+    export let id: string | null;
+    export let selected: boolean;
+    export let onSelect: (id: string | null) => void;
+    // This makes the border of the option dashed instead of solid.
+    export let useDashBorder: boolean = false;
+
+    function onClick() {
+        onSelect(id);
+    }
+</script>
+
+<button on:click="{onClick}" class:selected class:dash-border="{useDashBorder}">
+    <slot/>
+</button>
+
+<style lang="scss">
+    @import '../../../../../style/variables.scss';
+
+    $border-color: var(--comp-option-cloud-border-color);
+    $border-selected-color: var(--comp-option-cloud-border-selected-color);
+
+    button {
+        font-size: 18px;
+        font-family: $monospaceFont;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: 1px solid $border-color;
+        border-radius: 3px;
+        cursor: pointer;
+        padding: 3px;
+        height: 32px;
+        color: var(--shapetool-tool-title-color);
+
+        user-select: none;
+        background: none;
+
+        &:hover {
+            border-color: transparent;
+            outline: 1.5px solid $border-color;
+        }
+
+        &.selected {
+            border-color: transparent;
+            outline: 1.5px solid $border-selected-color;
+            color: $border-selected-color;
+        }
+
+        &:first-child {
+            margin-left: 0;
+        }
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
+    .dash-border {
+        border-style: dashed;
+
+        &:hover {
+            outline-style: dashed;
+        }
+
+        &.selected {
+            outline-style: dashed;
+        }
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/common/CommonBorderTool.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/common/CommonBorderTool.svelte
new file mode 100644
index 000000000..5bc8919af
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/common/CommonBorderTool.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+    import Tool from './Tool.svelte';
+    import CloudItem from './CloudItem.svelte';
+    import RoundedCornerButton from './RoundedCornerButton.svelte';
+    import DashPattern from './DashPattern.svelte';
+    import type { ShapeToolViewModel } from "$ui/pannel/shapetool/viewmodel/shape-tool-viewmodel";
+    import { SHAPE_TOOL_VIEWMODEL } from "$ui/pannel/shapetool/constants";
+    import { getContext } from "svelte";
+    import { PredefinedStraightStrokeStyle } from "$mono/shape/extra/predefined-styles";
+    import type { StrokeDashPattern } from "$ui/pannel/shapetool/viewmodel/models";
+
+    export let title: string;
+    export let selectedId: string | null;
+
+    export let cornerRounded: boolean | null;
+
+    export let dashPattern: StrokeDashPattern | null;
+
+    export let onItemSelect: (id: string | null) => void;
+    export let onCornerRounded: (rounded: boolean) => void;
+    export let onDashPatternChange: (dashPattern: StrokeDashPattern) => void;
+
+    let viewModel: ShapeToolViewModel = getContext(SHAPE_TOOL_VIEWMODEL);
+
+    function onRoundedCornerButtonClick() {
+        onCornerRounded(!cornerRounded);
+    }
+</script>
+
+<Tool {title} available="{true}">
+    <div class="border">
+        <div class="cloud">
+            <!-- Disable-item -->
+            <CloudItem
+                    id="{null}"
+                    selected="{selectedId === null}"
+                    onSelect="{onItemSelect}">&nbsp;
+            </CloudItem>
+            {#each viewModel.strokeOptions as option}
+                <CloudItem
+                        id="{option.id}"
+                        selected="{option.id === selectedId}"
+                        onSelect="{onItemSelect}"
+                >
+                    {option.name}
+                </CloudItem>
+            {/each}
+        </div>
+
+        {#if PredefinedStraightStrokeStyle.isCornerRoundable(selectedId)}
+            <div class="rounded-corner">
+                <RoundedCornerButton
+                        selected="{cornerRounded ?? false}"
+                        onClick="{onRoundedCornerButtonClick}"
+                />
+            </div>
+        {/if}
+    </div>
+    <DashPattern {dashPattern} onChange="{onDashPatternChange}"/>
+</Tool>
+
+<style lang="scss">
+    .border {
+        display: flex;
+        flex-direction: row;
+        gap: 7px;
+    }
+
+    .cloud {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 7px;
+    }
+
+    .rounded-corner {
+        display: flex;
+        align-items: center;
+        margin-left: 8px;
+        padding-left: 8px;
+        border-left: 1px solid var(--shapetool-section-divider-color);
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/common/CommonLineAnchorTool.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/common/CommonLineAnchorTool.svelte
new file mode 100644
index 000000000..5f98120f4
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/common/CommonLineAnchorTool.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import Tool from './Tool.svelte';
+    import CloudItem from './CloudItem.svelte';
+    import type { ShapeToolViewModel } from "$ui/pannel/shapetool/viewmodel/shape-tool-viewmodel";
+    import { getContext } from "svelte";
+    import { SHAPE_TOOL_VIEWMODEL } from "$ui/pannel/shapetool/constants";
+
+    export let title: string;
+    export let selectedId: string | null;
+    export let onItemSelect: (id: string | null) => void;
+
+    let viewModel: ShapeToolViewModel = getContext(SHAPE_TOOL_VIEWMODEL);
+</script>
+
+<Tool {title} available="{true}">
+    <div>
+        <CloudItem
+                id="{null}"
+                selected="{ selectedId === null}"
+                onSelect="{onItemSelect}">&nbsp;
+        </CloudItem>
+        {#each viewModel.headOptions as option}
+            <CloudItem
+                    id="{option.id}"
+                    selected="{option.id === selectedId}"
+                    onSelect="{onItemSelect}">{option.name}</CloudItem
+            >
+        {/each}
+    </div>
+</Tool>
+
+<style lang="scss">
+    div {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 7px;
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/common/DashPattern.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/common/DashPattern.svelte
new file mode 100644
index 000000000..94c8382d2
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/common/DashPattern.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+    import NumberTextField from '../../../common/NumberTextField.svelte';
+    import type { StrokeDashPattern } from "$ui/pannel/shapetool/viewmodel/models";
+
+    export let dashPattern: StrokeDashPattern | null;
+    export let onChange: (dashPattern: StrokeDashPattern) => void;
+
+    let dash: number = dashPattern?.dash ?? 1;
+    let gap: number = dashPattern?.gap ?? 0;
+    let offset: number = dashPattern?.offset ?? 0;
+
+    function onChangeInternal() {
+        onChange({ dash, gap, offset });
+    }
+</script>
+
+<div>
+    <NumberTextField label="Dash" bind:value="{dash}" minValue="{1}" onChange={onChangeInternal}/>
+    <NumberTextField label="Gap" bind:value="{gap}" minValue="{0}" onChange={onChangeInternal}/>
+    <NumberTextField label="Shift" bind:value="{offset}" onChange={onChangeInternal}/>
+</div>
+
+<style lang="scss">
+    div {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        margin-top: 8px;
+        gap: 6px;
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/common/RoundedCornerButton.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/common/RoundedCornerButton.svelte
new file mode 100644
index 000000000..bfe5d06be
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/common/RoundedCornerButton.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+export let selected: boolean;
+export let onClick: () => void;
+
+$: strokeWidth = selected ? 32 : 25;
+</script>
+
+<button class:selected on:click="{onClick}">
+    <svg width="26" height="26" viewBox="0 0 374 512" fill="none" stroke="currentColor">
+        <path
+            stroke-width="{strokeWidth}"
+            d="M16 146V55c0-22 17-39 39-39h91M228 16h91c22 0 39 17 39 39v91M146 496H55c-22 0-39-17-39-39v-91M358 366v91c0 22-17 39-39 39h-91"
+        ></path>
+    </svg>
+</button>
+
+<style lang="scss">
+$border-color: var(--comp-option-cloud-border-color);
+$border-selected-color: var(--comp-option-cloud-border-selected-color);
+
+button {
+    display: flex;
+    padding: 3px 0;
+    margin: 0;
+    width: 26px;
+    height: 32px;
+    color: inherit;
+    background: none;
+    border: transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    opacity: 0.75;
+
+    &:hover {
+        outline: 1px solid var(--text-input-border-color);
+        opacity: 1;
+    }
+
+    &.selected {
+        opacity: 1;
+        color: $border-selected-color;
+    }
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/common/Tool.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/common/Tool.svelte
new file mode 100644
index 000000000..a7666bf07
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/appearance/common/Tool.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+export let title: string;
+export let available: boolean;
+</script>
+
+{#if available}
+    <div>
+        <h4>{title}</h4>
+        <slot />
+    </div>
+{/if}
+
+<style lang="scss">
+div {
+    margin: 0 0 16px;
+}
+
+h4 {
+    font-style: normal;
+    font-weight: normal;
+    margin: 0 0 4px;
+    user-select: none;
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/constants.ts b/monosketch-svelte/src/lib/ui/pannel/shapetool/constants.ts
new file mode 100644
index 000000000..47d88e851
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/constants.ts
@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+export const SHAPE_TOOL_VIEWMODEL = 'shape-tool-viewmodel';
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/reorder/Icon.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/reorder/Icon.svelte
new file mode 100644
index 000000000..bb5b36f23
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/reorder/Icon.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import TooltipTarget from '$ui/modal/tooltip/TooltipTarget.svelte';
+    import { TooltipDirection } from '$ui/modal/tooltip/model';
+
+    export let title: string;
+export let iconPath: string;
+export let onClick: () => void;
+</script>
+
+<TooltipTarget text="{title}" direction="{TooltipDirection.TOP}">
+    <button on:click="{onClick}">
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
+            <path d="{iconPath}"></path>
+        </svg>
+    </button>
+</TooltipTarget>
+
+<style lang="scss">
+button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    user-select: none;
+
+    padding: 8px;
+    border-radius: 3px;
+    background: none;
+    border: none;
+    color: inherit;
+
+    &:hover {
+        background: var(--shapetool-reorder-hover-bg);
+    }
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/reorder/ReorderTool.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/reorder/ReorderTool.svelte
new file mode 100644
index 000000000..35ef84c9e
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/reorder/ReorderTool.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import Section from '../../common/Section.svelte';
+    import Icon from './Icon.svelte';
+    import { ButtonContent, ChangeOrderTypes } from './model';
+    import { getContext } from "svelte";
+    import { ShapeToolViewModel } from "$ui/pannel/shapetool/viewmodel/shape-tool-viewmodel";
+    import { SHAPE_TOOL_VIEWMODEL } from "$ui/pannel/shapetool/constants";
+    import { OneTimeAction } from "$mono/action-manager/one-time-actions";
+    import type { ChangeOrderType } from "$mono/shape/command/shape-manager-commands";
+
+    let viewModel = getContext<ShapeToolViewModel>(SHAPE_TOOL_VIEWMODEL);
+
+    function onClick(icon: ChangeOrderType) {
+        viewModel.update(OneTimeAction.ReorderShape(icon));
+    }
+</script>
+
+<Section hasBorderTop="{false}">
+    <div>
+        {#each ChangeOrderTypes as button}
+            <Icon iconPath="{ButtonContent[button].icon}" title="{ButtonContent[button].title}"
+                  onClick="{() => onClick(button)}"/>
+        {/each}
+    </div>
+</Section>
+
+<style>
+    div {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/reorder/model.ts b/monosketch-svelte/src/lib/ui/pannel/shapetool/reorder/model.ts
new file mode 100644
index 000000000..d382c95bb
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/reorder/model.ts
@@ -0,0 +1,32 @@
+import { ChangeOrderType } from "$mono/shape/command/shape-manager-commands";
+
+export interface ButtonContentType {
+    title: string;
+    icon: string;
+}
+
+export const ChangeOrderTypes = [
+    ChangeOrderType.FRONT,
+    ChangeOrderType.FORWARD,
+    ChangeOrderType.BACKWARD,
+    ChangeOrderType.BACK,
+];
+
+export const ButtonContent: Record<ChangeOrderType, ButtonContentType> = {
+    [ChangeOrderType.FRONT]: {
+        title: 'Bring to Front',
+        icon: 'M18,18h-9V15h-6V9h-3V0h9V3h6V9h3v9h0Zm-4-4V4H4V14h10Z',
+    },
+    [ChangeOrderType.FORWARD]: {
+        title: 'Bring Forward',
+        icon: 'M18,18h-12v-5h-6v-13h13v6h5v12h0Zm-17-6h11v-11h-11Z',
+    },
+    [ChangeOrderType.BACKWARD]: {
+        title: 'Send Backward',
+        icon: 'M6,18V13h-6V0h13V6h5V18Zm-5-6h5V6h6V1H1Z',
+    },
+    [ChangeOrderType.BACK]: {
+        title: 'Send to Back',
+        icon: 'M9,18V15h-6V9h-3V0h9V3h6V9h3v9Zm-5-4h5V9h-5Zm10-5V4h-5V9Z',
+    },
+};
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/text/FormatIcon.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/text/FormatIcon.svelte
new file mode 100644
index 000000000..c1933edf0
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/text/FormatIcon.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+
+export let selected: boolean;
+export let iconPath: string;
+export let onClick: () => void;
+
+</script>
+
+<button class:selected on:click="{onClick}">
+    <svg width="20" height="14" viewBox="0 0 20 14" fill="currentColor">
+        <path d="{iconPath}"></path>
+    </svg>
+</button>
+
+<style lang="scss">
+@import '../../../../style/variables.scss';
+
+$border-color: var(--comp-option-cloud-border-color);
+$border-selected-color: var(--comp-option-cloud-border-selected-color);
+
+button {
+    border: 1px solid $border-color;
+    border-radius: 3px;
+    background: none;
+    padding: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: inherit;
+
+    &:hover {
+        border-color: transparent;
+        outline: 1.5px solid $border-color;
+    }
+
+    &.selected {
+        border-color: transparent;
+        outline: 1.5px solid $border-selected-color;
+    }
+}
+</style>
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/text/TextTool.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/text/TextTool.svelte
new file mode 100644
index 000000000..2f5296c20
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/text/TextTool.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+    import Section from '../../common/Section.svelte';
+    import FormatIcon from './FormatIcon.svelte';
+    import { HorizontalAlignIconMap, VerticalAlignIconMap } from './model';
+    import { TextAlign, TextHorizontalAlign, TextVerticalAlign } from "$mono/shape/extra/style";
+    import { ShapeToolViewModel } from "$ui/pannel/shapetool/viewmodel/shape-tool-viewmodel";
+    import { SHAPE_TOOL_VIEWMODEL } from "$ui/pannel/shapetool/constants";
+    import { getContext, onDestroy, onMount } from "svelte";
+    import { LifecycleOwner } from "$libs/flow";
+    import { OneTimeAction } from "$mono/action-manager/one-time-actions";
+
+    let viewModel = getContext<ShapeToolViewModel>(SHAPE_TOOL_VIEWMODEL);
+    let lifecycleOwner = new LifecycleOwner();
+
+    let horizontalAlign: TextHorizontalAlign | null | undefined = viewModel.textAlignFlow.value?.horizontalAlign;
+    let verticalAlign: TextVerticalAlign | null | undefined = viewModel.textAlignFlow.value?.verticalAlign;
+
+    function onHorizontalChange(type: TextHorizontalAlign) {
+        horizontalAlign = type;
+        notifyChange();
+    }
+
+    function onVerticalChange(type: TextVerticalAlign) {
+        verticalAlign = type;
+        notifyChange();
+    }
+
+    function notifyChange() {
+        if (!verticalAlign || !horizontalAlign) {
+            return;
+        }
+        viewModel.update(OneTimeAction.TextAlignment({
+            newHorizontalAlign: horizontalAlign,
+            newVerticalAlign: verticalAlign
+        }));
+    }
+
+    onMount(() => {
+        lifecycleOwner.onStart();
+
+        viewModel.textAlignFlow.observe(lifecycleOwner, (value) => {
+            if (!value) {
+                return;
+            }
+            horizontalAlign = value.horizontalAlign;
+            verticalAlign = value.verticalAlign;
+        });
+    });
+
+    onDestroy(() => {
+        lifecycleOwner.onStop();
+    });
+</script>
+
+{#if horizontalAlign !== null && verticalAlign !== null}
+    <Section title="TEXT">
+        <div class="row">
+            <span>Alignment</span>
+            <div class="container">
+                {#each TextAlign.ALL_HORIZONTAL_ALIGNS as type}
+                    <FormatIcon
+                            onClick="{() => onHorizontalChange(type)}"
+                            iconPath="{HorizontalAlignIconMap[type]}"
+                            selected="{horizontalAlign === type}"
+                    />
+                {/each}
+            </div>
+        </div>
+
+        <div class="row">
+            <span>Position</span>
+            <div class="container">
+                {#each TextAlign.ALL_VERTICAL_ALIGNS as type}
+                    <FormatIcon
+                            onClick="{() => onVerticalChange(type)}"
+                            iconPath="{VerticalAlignIconMap[type]}"
+                            selected="{verticalAlign === type}"
+                    />
+                {/each}
+            </div>
+        </div>
+    </Section>
+{/if}
+<style lang="scss">
+    $gap: 8px;
+    .row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: $gap;
+    }
+
+    .container {
+        display: flex;
+        flex-direction: row;
+        gap: $gap;
+    }
+
+    span {
+        width: 66px;
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/text/model.ts b/monosketch-svelte/src/lib/ui/pannel/shapetool/text/model.ts
new file mode 100644
index 000000000..f8885ac83
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/text/model.ts
@@ -0,0 +1,13 @@
+import { TextHorizontalAlign } from "$mono/shape/extra/style";
+
+export const HorizontalAlignIconMap: Record<TextHorizontalAlign, string> = {
+    [TextHorizontalAlign.LEFT]: 'M3 2h14v2H3zM3 6h8v2H3zM3 10h10v2H3z',
+    [TextHorizontalAlign.MIDDLE]: 'M3 2h14v2H3zM6 6h8v2H6zM5 10h10v2H5z',
+    [TextHorizontalAlign.RIGHT]: 'M3 2h14v2H3zM9 6h8v2H9zM7 10h10v2H7z',
+};
+
+export const VerticalAlignIconMap: Record<TextHorizontalAlign, string> = {
+    [TextHorizontalAlign.LEFT]: 'M3 0h14v2H3zM3 4h14v2H3z',
+    [TextHorizontalAlign.MIDDLE]: 'M3 4h14v2H3zM3 8h14v2H3z',
+    [TextHorizontalAlign.RIGHT]: 'M3 8h14v2H3zM3 12h14v2H3z',
+};
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/transform/TransformTool.svelte b/monosketch-svelte/src/lib/ui/pannel/shapetool/transform/TransformTool.svelte
new file mode 100644
index 000000000..08f2ac4d6
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/transform/TransformTool.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+    import NumberTextField from '../../common/NumberTextField.svelte';
+    import Section from '../../common/Section.svelte';
+    import type { ShapeToolViewModel } from "$ui/pannel/shapetool/viewmodel/shape-tool-viewmodel";
+    import { LifecycleOwner } from "$libs/flow";
+    import { getContext, onDestroy, onMount } from "svelte";
+    import { SHAPE_TOOL_VIEWMODEL } from "$ui/pannel/shapetool/constants";
+    import { OneTimeAction } from "$mono/action-manager/one-time-actions";
+
+    let viewModel: ShapeToolViewModel = getContext(SHAPE_TOOL_VIEWMODEL);
+
+    const lifecycleOwner = new LifecycleOwner();
+
+    let x = 0;
+    let y = 0;
+    let height = 0;
+    let width = 0;
+    let isResizeable = viewModel.singleShapeResizeableFlow.value;
+
+    function onChange() {
+        viewModel.update(
+            OneTimeAction.ChangeShapeBound({
+                newLeft: x,
+                newTop: y,
+                newWidth: width,
+                newHeight: height,
+            })
+        );
+    }
+
+    onMount(() => {
+        lifecycleOwner.onStart();
+
+        viewModel.singleShapeBoundFlow.observe(lifecycleOwner, (value) => {
+            if (!value) {
+                return;
+            }
+            x = value.left;
+            y = value.top;
+            height = value.height;
+            width = value.width;
+        });
+
+        viewModel.singleShapeResizeableFlow.observe(lifecycleOwner, (value) => {
+            isResizeable = value;
+        });
+    });
+
+    onDestroy(() => {
+        lifecycleOwner.onStop();
+    });
+</script>
+
+<Section title="TRANSFORM">
+    <div class="grid">
+        <div class="cell">
+            <NumberTextField
+                    label="X"
+                    bind:value="{x}"
+                    boundIncludesLabel="{true}"
+                    {onChange}
+            />
+        </div>
+        <div class="cell">
+            <NumberTextField
+                    label="W"
+                    bind:value="{width}"
+                    minValue="{1}"
+                    boundIncludesLabel="{true}"
+                    isEnabled="{isResizeable}"
+                    {onChange}
+            />
+        </div>
+        <div class="cell">
+            <NumberTextField
+                    label="Y"
+                    bind:value="{y}"
+                    boundIncludesLabel="{true}"
+                    {onChange}
+            />
+        </div>
+        <div class="cell">
+            <NumberTextField
+                    label="H"
+                    bind:value="{height}"
+                    minValue="{1}"
+                    boundIncludesLabel="{true}"
+                    isEnabled="{isResizeable}"
+                    {onChange}
+            />
+        </div>
+    </div>
+</Section>
+
+<style lang="scss">
+    .grid {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .cell {
+        width: 50%;
+        padding: 0 8px 12px 0;
+
+        &:nth-child(even) {
+            padding: 0 0 12px 8px;
+        }
+    }
+</style>
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/viewmodel/line-appearance-data-controller.ts b/monosketch-svelte/src/lib/ui/pannel/shapetool/viewmodel/line-appearance-data-controller.ts
new file mode 100644
index 000000000..5abf9a1bf
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/viewmodel/line-appearance-data-controller.ts
@@ -0,0 +1,120 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Flow } from "$libs/flow";
+import { singleOrNull } from "$libs/sequence";
+import { RetainableActionType } from "$mono/action-manager/retainable-actions";
+import { type ILineExtra, ShapeExtraManager } from "$mono/shape/extra/extra-manager";
+import type { LineExtra } from "$mono/shape/extra/shape-extra";
+import { type StraightStrokeDashPattern } from "$mono/shape/extra/style";
+import type { AbstractShape } from "$mono/shape/shape/abstract-shape";
+import { Line } from "$mono/shape/shape/line";
+import { selectedOrDefault, type CloudItemSelectionState } from "./models";
+
+/**
+ * A class which manages the appearance data of a line related shape.
+ */
+export class LineAppearanceDataController {
+    private singleLineExtraFlow: Flow<LineExtra | null>;
+    private defaultLineExtraFlow: Flow<ILineExtra | null>;
+
+    public strokeToolStateFlow: Flow<CloudItemSelectionState | null>;
+    public strokeDashPatternFlow: Flow<StraightStrokeDashPattern | null>;
+    public strokeRoundedCornerFlow: Flow<boolean | null>;
+    public startHeadToolStateFlow: Flow<CloudItemSelectionState | null>;
+    public endHeadToolStateFlow: Flow<CloudItemSelectionState | null>;
+    public hasAnyVisibleToolFlow: Flow<boolean>;
+
+    constructor(
+        shapesFlow: Flow<Set<AbstractShape>>,
+        retainableActionFlow: Flow<RetainableActionType>,
+    ) {
+        this.singleLineExtraFlow = shapesFlow.map((shapes) => {
+            const shape = singleOrNull(shapes);
+            if (shape instanceof Line) {
+                return shape.extra;
+            }
+            return null;
+        });
+
+        this.defaultLineExtraFlow = retainableActionFlow.map((actionType) => {
+            if (actionType === RetainableActionType.ADD_LINE) {
+                return ShapeExtraManager.defaultLineExtra;
+            }
+            return null;
+        });
+
+        this.strokeToolStateFlow = this.createLineStrokeAppearanceVisibilityFlow();
+        this.strokeDashPatternFlow = this.createLineStrokeDashPatternFlow();
+        this.strokeRoundedCornerFlow = this.createLineStrokeRoundedCornerFlow();
+        this.startHeadToolStateFlow = this.createStartHeadAppearanceVisibilityFlow();
+        this.endHeadToolStateFlow = this.createEndHeadAppearanceVisibilityFlow();
+
+        this.hasAnyVisibleToolFlow = Flow.combineList(
+            [this.strokeToolStateFlow,
+                this.strokeDashPatternFlow,
+                this.strokeRoundedCornerFlow,
+                this.startHeadToolStateFlow,
+                this.endHeadToolStateFlow],
+            (list) => list.some((item) => item !== null),
+        );
+    }
+
+    private createLineStrokeAppearanceVisibilityFlow(): Flow<CloudItemSelectionState | null> {
+        return selectedOrDefault({
+            selectedFlow: this.singleLineExtraFlow.map(createStrokeState),
+            defaultFlow: this.defaultLineExtraFlow.map(createStrokeState),
+        });
+    }
+
+    private createLineStrokeDashPatternFlow(): Flow<StraightStrokeDashPattern | null> {
+        return selectedOrDefault({
+            selectedFlow: this.singleLineExtraFlow.map((extra) => extra?.dashPattern ?? null),
+            defaultFlow: this.defaultLineExtraFlow.map((extra) => extra?.dashPattern ?? null),
+        });
+    }
+
+    private createLineStrokeRoundedCornerFlow(): Flow<boolean | null> {
+        return selectedOrDefault({
+            selectedFlow: this.singleLineExtraFlow.map(createStrokeRoundedCornerState),
+            defaultFlow: this.defaultLineExtraFlow.map(createStrokeRoundedCornerState),
+        });
+    }
+
+    private createStartHeadAppearanceVisibilityFlow(): Flow<CloudItemSelectionState | null> {
+        return selectedOrDefault({
+            selectedFlow: this.singleLineExtraFlow.map(createStartHeadState),
+            defaultFlow: this.defaultLineExtraFlow.map(createStartHeadState),
+        });
+    }
+
+    private createEndHeadAppearanceVisibilityFlow(): Flow<CloudItemSelectionState | null> {
+        return selectedOrDefault({
+            selectedFlow: this.singleLineExtraFlow.map(createEndHeadState),
+            defaultFlow: this.defaultLineExtraFlow.map(createEndHeadState),
+        });
+    }
+}
+
+function createStrokeState(extra: ILineExtra | null): CloudItemSelectionState | null {
+    return extra == null ? null : { isChecked: extra.isStrokeEnabled, selectedId: extra.userSelectedStrokeStyle.id };
+}
+
+function createStrokeRoundedCornerState(extra: ILineExtra | null): boolean | null {
+    if (extra == null) {
+        return null;
+    }
+    return extra.isStrokeEnabled ? extra.isRoundedCorner : null;
+}
+
+function createStartHeadState(extra: ILineExtra | null): CloudItemSelectionState | null {
+    return extra == null ? null : {
+        isChecked: extra.isStartAnchorEnabled,
+        selectedId: extra.userSelectedStartAnchor.id,
+    };
+}
+
+function createEndHeadState(extra: ILineExtra | null): CloudItemSelectionState | null {
+    return extra == null ? null : { isChecked: extra.isEndAnchorEnabled, selectedId: extra.userSelectedEndAnchor.id };
+}
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/viewmodel/models.ts b/monosketch-svelte/src/lib/ui/pannel/shapetool/viewmodel/models.ts
new file mode 100644
index 000000000..be93e1388
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/viewmodel/models.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Flow } from "$libs/flow";
+
+export interface CloudItemSelectionState {
+    isChecked: boolean;
+    selectedId: string | null;
+}
+
+export interface AppearanceOptionItem {
+    id: string;
+    name: string;
+}
+
+export interface StrokeDashPattern {
+    dash: number;
+    gap: number;
+    offset: number;
+}
+
+export function selectedOrDefault<T>({ selectedFlow, defaultFlow }: {
+    selectedFlow: Flow<T | null>,
+    defaultFlow: Flow<T | null>
+}): Flow<T | null> {
+    return Flow.combine2(selectedFlow, defaultFlow, (a, b) => a ?? b);
+}
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/viewmodel/rectangle-appearance-data-controller.ts b/monosketch-svelte/src/lib/ui/pannel/shapetool/viewmodel/rectangle-appearance-data-controller.ts
new file mode 100644
index 000000000..dbc051236
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/viewmodel/rectangle-appearance-data-controller.ts
@@ -0,0 +1,110 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Flow } from "$libs/flow";
+import { singleOrNull } from "$libs/sequence";
+import { RetainableActionType } from "$mono/action-manager/retainable-actions";
+import { type IRectangleExtra, ShapeExtraManager } from "$mono/shape/extra/extra-manager";
+import type { RectangleExtra } from "$mono/shape/extra/shape-extra";
+import { RectangleBorderCornerPattern, type StraightStrokeDashPattern } from "$mono/shape/extra/style";
+import type { AbstractShape } from "$mono/shape/shape/abstract-shape";
+import { Rectangle } from "$mono/shape/shape/rectangle";
+import { Text } from "$mono/shape/shape/text";
+import { type CloudItemSelectionState, selectedOrDefault } from "$ui/pannel/shapetool/viewmodel/models";
+
+/**
+ * A class which manages the appearance data of a rectangle related shape.
+ */
+export class RectangleAppearanceDataController {
+    private singleRectExtraFlow: Flow<RectangleExtra | null>;
+    private defaultRectangleExtraFlow: Flow<IRectangleExtra | null>;
+
+    public fillToolStateFlow: Flow<CloudItemSelectionState | null>;
+    public borderToolStateFlow: Flow<CloudItemSelectionState | null>;
+    public borderDashPatternFlow: Flow<StraightStrokeDashPattern | null>;
+    public borderRoundedCornerFlow: Flow<boolean | null>;
+    public hasAnyVisibleToolFlow: Flow<boolean>;
+
+    constructor(
+        shapesFlow: Flow<Set<AbstractShape>>,
+        retainableActionFlow: Flow<RetainableActionType>,
+    ) {
+        this.singleRectExtraFlow = shapesFlow.map((shapes) => {
+            const shape = singleOrNull(shapes);
+            if (shape instanceof Rectangle) {
+                return shape.extra;
+            } else if (shape instanceof Text) {
+                return shape.extra.boundExtra;
+            }
+            return null;
+        });
+
+        this.defaultRectangleExtraFlow = retainableActionFlow.map((actionType) => {
+            if (actionType === RetainableActionType.ADD_RECTANGLE || actionType === RetainableActionType.ADD_TEXT) {
+                return ShapeExtraManager.defaultRectangleExtra;
+            }
+            return null;
+        });
+
+        this.fillToolStateFlow = this.createFillAppearanceVisibilityFlow();
+        this.borderToolStateFlow = this.createBorderAppearanceVisibilityFlow();
+        this.borderDashPatternFlow = this.createBorderDashPatternFlow();
+        this.borderRoundedCornerFlow = this.createBorderRoundedCornerFlow();
+
+        this.hasAnyVisibleToolFlow = Flow.combineList(
+            [
+                this.fillToolStateFlow,
+                this.borderToolStateFlow,
+                this.borderDashPatternFlow,
+                this.borderRoundedCornerFlow,
+            ],
+            (array) => array.some((item) => item != null),
+        );
+    }
+
+    private createFillAppearanceVisibilityFlow(): Flow<CloudItemSelectionState | null> {
+        return selectedOrDefault(
+            {
+                selectedFlow: this.singleRectExtraFlow.map(createFillAppearanceVisibilityState),
+                defaultFlow: this.defaultRectangleExtraFlow.map(createFillAppearanceVisibilityState),
+            },
+        );
+    }
+
+    private createBorderAppearanceVisibilityFlow(): Flow<CloudItemSelectionState | null> {
+        return selectedOrDefault({
+            selectedFlow: this.singleRectExtraFlow.map(createBorderState),
+            defaultFlow: this.defaultRectangleExtraFlow.map(createBorderState),
+        });
+    }
+
+    private createBorderDashPatternFlow(): Flow<StraightStrokeDashPattern | null> {
+        return selectedOrDefault({
+            selectedFlow: this.singleRectExtraFlow.map((extra) => extra?.dashPattern ?? null),
+            defaultFlow: this.defaultRectangleExtraFlow.map((extra) => extra?.dashPattern ?? null),
+        });
+    }
+
+    private createBorderRoundedCornerFlow(): Flow<boolean | null> {
+        return selectedOrDefault({
+            selectedFlow: this.singleRectExtraFlow.map(createBorderRoundedCornerState),
+            defaultFlow: this.defaultRectangleExtraFlow.map(createBorderRoundedCornerState),
+        });
+    }
+}
+
+function createFillAppearanceVisibilityState(extra: IRectangleExtra | null): CloudItemSelectionState | null {
+    return extra == null ? null : { isChecked: extra.isFillEnabled, selectedId: extra.userSelectedFillStyle.id };
+}
+
+function createBorderState(extra: IRectangleExtra | null): CloudItemSelectionState | null {
+    return extra == null ? null : { isChecked: extra.isBorderEnabled, selectedId: extra.userSelectedBorderStyle.id };
+}
+
+function createBorderRoundedCornerState(extra: IRectangleExtra | null): boolean | null {
+    if (extra == null) {
+        return null;
+    }
+    return extra.isBorderEnabled ? extra.corner == RectangleBorderCornerPattern.ENABLED : null;
+}
diff --git a/monosketch-svelte/src/lib/ui/pannel/shapetool/viewmodel/shape-tool-viewmodel.ts b/monosketch-svelte/src/lib/ui/pannel/shapetool/viewmodel/shape-tool-viewmodel.ts
new file mode 100644
index 000000000..f7243d3ef
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/pannel/shapetool/viewmodel/shape-tool-viewmodel.ts
@@ -0,0 +1,158 @@
+/*
+ * Copyright (c) 2024, tuanchauict
+ */
+
+import { Flow } from "$libs/flow";
+import type { Rect } from "$libs/graphics-geo/rect";
+import { singleOrNull } from "$libs/sequence";
+import type { ActionManager } from "$mono/action-manager/action-manager";
+import type { OneTimeActionType } from "$mono/action-manager/one-time-actions";
+import { RetainableActionType } from "$mono/action-manager/retainable-actions";
+import { ShapeExtraManager } from "$mono/shape/extra/extra-manager";
+import type { StraightStrokeDashPattern, TextAlign } from "$mono/shape/extra/style";
+import type { AbstractShape } from "$mono/shape/shape/abstract-shape";
+import { Rectangle } from "$mono/shape/shape/rectangle";
+import { Text } from "$mono/shape/shape/text";
+import { LineAppearanceDataController } from "./line-appearance-data-controller";
+import {
+    type AppearanceOptionItem,
+    type CloudItemSelectionState,
+    selectedOrDefault,
+    type StrokeDashPattern,
+} from "./models";
+import { RectangleAppearanceDataController } from "./rectangle-appearance-data-controller";
+
+/**
+ * A view model for the shape tool panel.
+ */
+export class ShapeToolViewModel {
+    private readonly shapesFlow: Flow<Set<AbstractShape>>;
+    private readonly retainableActionTypeFlow: Flow<RetainableActionType>;
+
+    private readonly rectangleAppearanceDataController: RectangleAppearanceDataController;
+    private readonly lineAppearanceDataController: LineAppearanceDataController;
+
+    public readonly reorderToolVisibilityFlow: Flow<boolean>;
+    public readonly singleShapeBoundFlow: Flow<Rect | null>;
+    public readonly singleShapeResizeableFlow: Flow<boolean>;
+
+    public readonly shapeFillTypeFlow: Flow<CloudItemSelectionState | null>;
+    public readonly shapeBorderTypeFlow: Flow<CloudItemSelectionState | null>;
+    public readonly shapeBorderDashTypeFlow: Flow<StraightStrokeDashPattern | null>;
+    public readonly shapeBorderRoundedCornerFlow: Flow<boolean | null>;
+
+    public readonly lineStrokeTypeFlow: Flow<CloudItemSelectionState | null>;
+    public readonly lineStrokeDashTypeFlow: Flow<StrokeDashPattern | null>;
+    public readonly lineStrokeRoundedCornerFlow: Flow<boolean | null>;
+
+    public readonly lineStartHeadFlow: Flow<CloudItemSelectionState | null>;
+    public readonly lineEndHeadFlow: Flow<CloudItemSelectionState | null>;
+
+    public readonly appearanceVisibilityFlow: Flow<boolean>;
+
+    public readonly textAlignFlow: Flow<TextAlign | null>;
+
+    public readonly fillOptions: AppearanceOptionItem[] =
+        ShapeExtraManager.getAllPredefinedRectangleFillStyles().map(({ id, displayName }) => ({
+            id,
+            name: displayName,
+        }));
+
+    public readonly strokeOptions: AppearanceOptionItem[] =
+        ShapeExtraManager.getAllPredefinedStrokeStyles().map(({ id, displayName }) => ({
+            id,
+            name: displayName,
+        }));
+    public readonly headOptions: AppearanceOptionItem[] =
+        ShapeExtraManager.getAllPredefinedAnchorChars().map(({ id, displayName }) => ({
+            id,
+            name: displayName,
+        }));
+
+    constructor(
+        selectedShapesFlow: Flow<Set<AbstractShape>>,
+        shapeManagerVersionFlow: Flow<number>,
+        actionManager: ActionManager,
+    ) {
+        this.shapesFlow = Flow.combine2(
+            selectedShapesFlow,
+            shapeManagerVersionFlow,
+            (selected, _) => selected,
+        );
+
+        this.retainableActionTypeFlow = Flow.combine2(
+            actionManager.retainableActionFlow,
+            ShapeExtraManager.defaultExtraStateUpdateFlow,
+            (action, _) => action,
+        );
+
+        this.rectangleAppearanceDataController = new RectangleAppearanceDataController(
+            this.shapesFlow,
+            this.retainableActionTypeFlow,
+        );
+
+        this.lineAppearanceDataController = new LineAppearanceDataController(
+            this.shapesFlow,
+            this.retainableActionTypeFlow,
+        );
+
+        const singleShapeFlow = Flow.combine2(
+            selectedShapesFlow,
+            shapeManagerVersionFlow,
+            (selected) => singleOrNull(selected),
+        );
+
+        const retainableActionFlow = Flow.combine2(
+            actionManager.retainableActionFlow,
+            ShapeExtraManager.defaultExtraStateUpdateFlow,
+            (action, _) => action,
+        );
+
+        this.reorderToolVisibilityFlow = singleShapeFlow.map((shape) => shape !== null);
+        this.singleShapeBoundFlow = singleShapeFlow.map((shape) => shape?.bound ?? null);
+        this.singleShapeResizeableFlow = singleShapeFlow.map((shape) => shape instanceof Rectangle || shape instanceof Text);
+
+        this.shapeFillTypeFlow = this.rectangleAppearanceDataController.fillToolStateFlow;
+        this.shapeBorderTypeFlow = this.rectangleAppearanceDataController.borderToolStateFlow;
+        this.shapeBorderDashTypeFlow = this.rectangleAppearanceDataController.borderDashPatternFlow;
+        this.shapeBorderRoundedCornerFlow = this.rectangleAppearanceDataController.borderRoundedCornerFlow;
+
+        this.lineStrokeTypeFlow = this.lineAppearanceDataController.strokeToolStateFlow;
+        this.lineStrokeDashTypeFlow = this.lineAppearanceDataController.strokeDashPatternFlow;
+        this.lineStrokeRoundedCornerFlow = this.lineAppearanceDataController.strokeRoundedCornerFlow;
+        this.lineStartHeadFlow = this.lineAppearanceDataController.startHeadToolStateFlow;
+        this.lineEndHeadFlow = this.lineAppearanceDataController.endHeadToolStateFlow;
+
+        this.appearanceVisibilityFlow = Flow.combine2(
+            this.rectangleAppearanceDataController.hasAnyVisibleToolFlow,
+            this.lineAppearanceDataController.hasAnyVisibleToolFlow,
+            (isRectAvailable, isLineAvailable) => isRectAvailable || isLineAvailable,
+        );
+
+        this.textAlignFlow = this.createTextAlignFlow(singleShapeFlow, retainableActionFlow);
+    }
+
+    update(action: OneTimeActionType) {
+        // TODO: Handle action
+        console.log("update action", action);
+    }
+
+    private createTextAlignFlow(
+        selectedShapeFlow: Flow<AbstractShape | null>,
+        retainableActionTypeFlow: Flow<RetainableActionType>,
+    ): Flow<TextAlign | null> {
+        const selectedTextAlignFlow = selectedShapeFlow.map((shape) => {
+            const text = shape as Text | null;
+            return text?.isTextEditable ? text.extra.textAlign : null;
+        });
+
+        const defaultTextAlignFlow = retainableActionTypeFlow.map((actionType) => {
+            return actionType === RetainableActionType.ADD_TEXT ? ShapeExtraManager.defaultTextAlign : null;
+        });
+
+        return selectedOrDefault({
+            selectedFlow: selectedTextAlignFlow,
+            defaultFlow: defaultTextAlignFlow,
+        });
+    }
+}
diff --git a/monosketch-svelte/src/lib/ui/workspace/Workspace.svelte b/monosketch-svelte/src/lib/ui/workspace/Workspace.svelte
new file mode 100644
index 000000000..8c4e331af
--- /dev/null
+++ b/monosketch-svelte/src/lib/ui/workspace/Workspace.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+    import { WorkspaceViewController } from '$mono/workspace/workspace-view-controller';
+    import { getContext, onDestroy, onMount } from 'svelte';
+    import type { AppContext } from '$app/app-context';
+    import { APP_CONTEXT } from '$mono/common/constant';
+    import TooltipTarget from "$ui/modal/tooltip/TooltipTarget.svelte";
+    import { TooltipDirection } from "$ui/modal/tooltip/model";
+    import { AXIS_X_HEIGHT, AXIS_Y_WIDTH } from "$mono/workspace/canvas/axis-canvas-view-controller";
+    import { Point } from "$libs/graphics-geo/point";
+
+    let canvasContainer: HTMLDivElement;
+    let drawingInfoCanvas: HTMLCanvasElement;
+    let axisCanvas: HTMLCanvasElement;
+    let gridCanvas: HTMLCanvasElement;
+    let boardCanvas: HTMLCanvasElement;
+    let interactionCanvas: HTMLCanvasElement;
+    let selectionCanvas: HTMLCanvasElement;
+
+    const appContext = getContext<AppContext>(APP_CONTEXT);
+
+    let workspaceViewController: WorkspaceViewController;
+    onMount(() => {
+        workspaceViewController = new WorkspaceViewController(
+            appContext,
+            canvasContainer,
+            drawingInfoCanvas,
+            gridCanvas,
+            boardCanvas,
+            axisCanvas,
+            interactionCanvas,
+            selectionCanvas,
+        );
+        workspaceViewController.onStart();
+    });
+
+    onDestroy(() => {
+        workspaceViewController.onStop();
+    });
+</script>
+
+<div class="canvas-container" bind:this="{canvasContainer}">
+    <canvas class="drawing-info" bind:this="{drawingInfoCanvas}"></canvas>
+    <canvas bind:this="{gridCanvas}"></canvas>
+    <canvas bind:this="{boardCanvas}"></canvas>
+    <canvas bind:this="{axisCanvas}"></canvas>
+    <canvas bind:this="{interactionCanvas}"></canvas>
+    <canvas bind:this="{selectionCanvas}"></canvas>
+
+    <TooltipTarget text="Jump to (0, 0)" direction="{TooltipDirection.RIGHT}"
+                   style="width: {AXIS_Y_WIDTH}px; height: {AXIS_X_HEIGHT}px;">
+        <button tabindex="-1" class="jump"
+                style="width: {AXIS_Y_WIDTH}px; height: {AXIS_X_HEIGHT}px"
+                on:click={() => workspaceViewController.setDrawingOffset(Point.ZERO)}></button>
+    </TooltipTarget>
+</div>
+
+<style lang="scss">
+    .canvas-container {
+        width: 100%;
+        height: 100%;
+    }
+
+    canvas {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+
+    .drawing-info {
+        position: absolute;
+        left: -200%;
+        top: -200%;
+    }
+
+    .jump {
+        position: absolute;
+        left: 0;
+        top: 0;
+        background: none;
+        border: none;
+        cursor: pointer;
+    }
+</style>
diff --git a/monosketch-svelte/src/main.ts b/monosketch-svelte/src/main.ts
new file mode 100644
index 000000000..696c52ca6
--- /dev/null
+++ b/monosketch-svelte/src/main.ts
@@ -0,0 +1,35 @@
+import '$assets/fonts/stylesheet.css';
+import '$style/main.scss';
+import { AppContext } from '$app/app-context';
+import { APP_CONTEXT } from '$mono/common/constant';
+import { WindowViewModel } from '$mono/window/window-viewmodel';
+import App from './App.svelte';
+
+const appContext = new AppContext();
+const context = new Map();
+context.set(APP_CONTEXT, appContext);
+
+window.onresize = () => {
+    WindowViewModel.windowSizeUpdateEventFlow.value = true;
+};
+
+window.onfocus = () => {
+    WindowViewModel.applicationActiveStateFlow.value = true;
+};
+
+window.onblur = () => {
+    WindowViewModel.applicationActiveStateFlow.value = false;
+};
+
+document.addEventListener('visibilitychange', () => {
+    WindowViewModel.applicationActiveStateFlow.value = document['visibilityState'] === 'visible';
+});
+
+const app = new App({
+    // @ts-expect-error - Safe to ignore
+    target: document.getElementById('app'),
+    context: context,
+});
+
+appContext.onStart();
+export default app;
diff --git a/monosketch-svelte/src/vite-env.d.ts b/monosketch-svelte/src/vite-env.d.ts
new file mode 100644
index 000000000..4078e7476
--- /dev/null
+++ b/monosketch-svelte/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/monosketch-svelte/svelte.config.js b/monosketch-svelte/svelte.config.js
new file mode 100644
index 000000000..7df107d00
--- /dev/null
+++ b/monosketch-svelte/svelte.config.js
@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+export default {
+    // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+    // for more information about preprocessors
+    preprocess: vitePreprocess(),
+};
diff --git a/monosketch-svelte/tsconfig.json b/monosketch-svelte/tsconfig.json
new file mode 100644
index 000000000..47ac8d845
--- /dev/null
+++ b/monosketch-svelte/tsconfig.json
@@ -0,0 +1,50 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "experimentalDecorators": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "baseUrl": "./src",
+    "paths": {
+      "$app/*": [
+        "app/*"
+      ],
+      "$assets/*": [
+        "assets/*"
+      ],
+      "$libs/*": [
+        "lib/libs/*"
+      ],
+      "$mono/*": [
+        "lib/mono/*"
+      ],
+      "$style/*": [
+        "lib/style/*"
+      ],
+      "$ui/*": [
+        "lib/ui/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.js",
+    "src/**/*.svelte"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
diff --git a/monosketch-svelte/tsconfig.node.json b/monosketch-svelte/tsconfig.node.json
new file mode 100644
index 000000000..98587cda0
--- /dev/null
+++ b/monosketch-svelte/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler"
+    },
+    "include": ["vite.config.ts"]
+}
diff --git a/monosketch-svelte/vite.config.ts b/monosketch-svelte/vite.config.ts
new file mode 100644
index 000000000..f7d0264f2
--- /dev/null
+++ b/monosketch-svelte/vite.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [svelte(), tsconfigPaths()],
+    resolve: {
+        alias: {
+            $style: '/src/lib/style',
+        },
+    },
+});