diff --git a/.gitignore b/.gitignore
index 62c8935..45c9c11 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,5 @@
-.idea/
\ No newline at end of file
+node_modules
+public/build
+dist
+.DS_Store
+.idea/
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..9e32221
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1097 @@
+{
+  "name": "app",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "app",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "@types/uuid": "^10.0.0",
+        "rollup": "^2.79.2",
+        "rollup-plugin-commonjs": "^10.1.0",
+        "rollup-plugin-css-only": "^4.5.2",
+        "rollup-plugin-livereload": "^2.0.5",
+        "rollup-plugin-resolve": "^0.0.1-predev.1",
+        "rollup-plugin-svelte": "^7.2.2",
+        "rollup-plugin-terser": "^7.0.2",
+        "sirv-cli": "^3.0.1",
+        "svelte": "^5.33.1",
+        "uuid": "^11.1.0"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+      "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.27.1",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
+      "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.29",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+      "dev": true
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
+      "integrity": "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true
+    },
+    "node_modules/@sveltejs/acorn-typescript": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
+      "integrity": "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==",
+      "dev": true,
+      "peerDependencies": {
+        "acorn": "^8.9.0"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
+      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
+      "dev": true
+    },
+    "node_modules/@types/node": {
+      "version": "22.15.21",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.21.tgz",
+      "integrity": "sha512-EV/37Td6c+MgKAbkcLG6vqZ2zEYHD7bvSrzqqs2RIhbA6w3x+Dqz8MZM3sP6kGTeLrdoOgKZe+Xja7tUB2DNkQ==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
+      "dev": true
+    },
+    "node_modules/acorn": {
+      "version": "8.14.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
+      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
+    "node_modules/console-clear": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz",
+      "integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/esm-env": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
+      "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
+      "dev": true
+    },
+    "node_modules/esrap": {
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.6.tgz",
+      "integrity": "sha512-F/D2mADJ9SHY3IwksD4DAXjTt7qt7GWUf3/8RhCNWmC/67tyb55dpimHmy7EplakFaflV0R/PC+fdSPqrRHAQw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+      "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+      "dev": true
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-port": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/get-port/-/get-port-5.1.1.tgz",
+      "integrity": "sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-reference": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+      "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/jest-worker": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
+      "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
+    },
+    "node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/livereload": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/livereload/-/livereload-0.9.3.tgz",
+      "integrity": "sha512-q7Z71n3i4X0R9xthAryBdNGVGAO2R5X+/xXpmKeuPMrteg+W2U8VusTKV3YiJbXZwKsOlFlHe+go6uSNjfxrZw==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": "^3.5.0",
+        "livereload-js": "^3.3.1",
+        "opts": ">= 1.2.0",
+        "ws": "^7.4.3"
+      },
+      "bin": {
+        "livereload": "bin/livereload.js"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/livereload-js": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-3.4.1.tgz",
+      "integrity": "sha512-5MP0uUeVCec89ZbNOT/i97Mc+q3SxXmiUGhRFOTmhrGPn//uWVQdCvcLJDy64MSBR5MidFdOR7B9viumoavy6g==",
+      "dev": true
+    },
+    "node_modules/local-access": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/local-access/-/local-access-1.1.0.tgz",
+      "integrity": "sha512-XfegD5pyTAfb+GY6chk283Ox5z8WexG56OvM06RWLpAc/UHozO8X6xAxEkIitZOtsSMM1Yr3DkHgW5W+onLhCw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "dev": true
+    },
+    "node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
+    "node_modules/mri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/opts": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/opts/-/opts-2.0.2.tgz",
+      "integrity": "sha512-k41FwbcLnlgnFh69f4qdUfvDQ+5vaSDnVPFI/y5XuhKRq97EnVVneO9F1ESVCdiVu4fCS2L8usX3mU331hB7pg==",
+      "dev": true
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/readdirp/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve.exports": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.3.tgz",
+      "integrity": "sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "2.79.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
+      "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
+      "dev": true,
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/rollup-plugin-commonjs": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-10.1.0.tgz",
+      "integrity": "sha512-jlXbjZSQg8EIeAAvepNwhJj++qJWNJw1Cl0YnOqKtP5Djx+fFGkp3WRh+W0ASCaFG5w1jhmzDxgu3SJuVxPF4Q==",
+      "deprecated": "This package has been deprecated and is no longer maintained. Please use @rollup/plugin-commonjs.",
+      "dev": true,
+      "dependencies": {
+        "estree-walker": "^0.6.1",
+        "is-reference": "^1.1.2",
+        "magic-string": "^0.25.2",
+        "resolve": "^1.11.0",
+        "rollup-pluginutils": "^2.8.1"
+      },
+      "peerDependencies": {
+        "rollup": ">=1.12.0"
+      }
+    },
+    "node_modules/rollup-plugin-css-only": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-css-only/-/rollup-plugin-css-only-4.5.2.tgz",
+      "integrity": "sha512-7rj9+jB17Pz8LNcPgtMUb16JcgD8lxQMK9HcGfAVhMK3na/WXes3oGIo5QsrQQVqtgAU6q6KnQNXJrYunaUIQQ==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "5"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "rollup": "<5"
+      }
+    },
+    "node_modules/rollup-plugin-livereload": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.5.tgz",
+      "integrity": "sha512-vqQZ/UQowTW7VoiKEM5ouNW90wE5/GZLfdWuR0ELxyKOJUIaj+uismPZZaICU4DnWPVjnpCDDxEqwU7pcKY/PA==",
+      "dev": true,
+      "dependencies": {
+        "livereload": "^0.9.1"
+      },
+      "engines": {
+        "node": ">=8.3"
+      }
+    },
+    "node_modules/rollup-plugin-resolve": {
+      "version": "0.0.1-predev.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-resolve/-/rollup-plugin-resolve-0.0.1-predev.1.tgz",
+      "integrity": "sha512-Kcf4ad2ME8lMVU3SRCDq61ACBznVFZTXzqiX9k2mRyd3JkCsq0SyaNpEGG3xTcabsaC5+5kvfiFebkMDHeYaRQ==",
+      "dev": true
+    },
+    "node_modules/rollup-plugin-svelte": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-7.2.2.tgz",
+      "integrity": "sha512-hgnIblTRewaBEVQD6N0Q43o+y6q1TmDRhBjaEzQCi50bs8TXqjc+d1zFZyE8tsfgcfNHZQzclh4RxlFUB85H8Q==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^4.1.0",
+        "resolve.exports": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "rollup": ">=2.0.0",
+        "svelte": ">=3.5.0"
+      }
+    },
+    "node_modules/rollup-plugin-svelte/node_modules/@rollup/pluginutils": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
+      "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
+      "dev": true,
+      "dependencies": {
+        "estree-walker": "^2.0.1",
+        "picomatch": "^2.2.2"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
+    "node_modules/rollup-plugin-svelte/node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true
+    },
+    "node_modules/rollup-plugin-svelte/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/rollup-plugin-terser": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
+      "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==",
+      "deprecated": "This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "jest-worker": "^26.2.1",
+        "serialize-javascript": "^4.0.0",
+        "terser": "^5.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.0.0"
+      }
+    },
+    "node_modules/rollup-pluginutils": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+      "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+      "dev": true,
+      "dependencies": {
+        "estree-walker": "^0.6.1"
+      }
+    },
+    "node_modules/sade": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+      "dev": true,
+      "dependencies": {
+        "mri": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/semiver": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/semiver/-/semiver-1.1.0.tgz",
+      "integrity": "sha512-QNI2ChmuioGC1/xjyYwyZYADILWyW6AmS1UH6gDj/SFUUUS4MBAWs/7mxnkRPc/F4iHezDP+O8t0dO8WHiEOdg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/serialize-javascript": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+      "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+      "dev": true,
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/sirv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.1.tgz",
+      "integrity": "sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A==",
+      "dev": true,
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/sirv-cli": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-3.0.1.tgz",
+      "integrity": "sha512-ICXaF2u6IQhLZ0EXF6nqUF4YODfSQSt+mGykt4qqO5rY+oIiwdg7B8w2PVDBJlQulaS2a3J8666CUoDoAuCGvg==",
+      "dev": true,
+      "dependencies": {
+        "console-clear": "^1.1.0",
+        "get-port": "^5.1.1",
+        "kleur": "^4.1.4",
+        "local-access": "^1.0.1",
+        "sade": "^1.6.0",
+        "semiver": "^1.0.0",
+        "sirv": "^3.0.0",
+        "tinydate": "^1.0.0"
+      },
+      "bin": {
+        "sirv": "bin.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
+      "dev": true
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/svelte": {
+      "version": "5.33.1",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.33.1.tgz",
+      "integrity": "sha512-7znzaaQALL62NBzkdKV04tmYIVla8qjrW+k6GdgFZcKcj8XOb8iEjmfRPo40iaWZlKv3+uiuc0h4iaGgwoORtA==",
+      "dev": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@sveltejs/acorn-typescript": "^1.0.5",
+        "@types/estree": "^1.0.5",
+        "acorn": "^8.12.1",
+        "aria-query": "^5.3.1",
+        "axobject-query": "^4.1.0",
+        "clsx": "^2.1.1",
+        "esm-env": "^1.2.1",
+        "esrap": "^1.4.6",
+        "is-reference": "^3.0.3",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.11",
+        "zimmerframe": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/svelte/node_modules/is-reference": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
+      "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.6"
+      }
+    },
+    "node_modules/svelte/node_modules/magic-string": {
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.39.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.39.2.tgz",
+      "integrity": "sha512-yEPUmWve+VA78bI71BW70Dh0TuV4HHd+I5SHOAfS1+QBOmvmCiiffgjR8ryyEd3KIfvPGFqoADt8LdQ6XpXIvg==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.14.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tinydate": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz",
+      "integrity": "sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true
+    },
+    "node_modules/uuid": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
+      "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/esm/bin/uuid"
+      }
+    },
+    "node_modules/ws": {
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/zimmerframe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
+      "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
+      "dev": true
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..929387c
--- /dev/null
+++ b/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "app",
+  "version": "1.0.0",
+  "description": "gCodeVisualizer - a web-based visual gcode viewer and analyzer.\r Available online at http://gcode.ws/",
+  "main": "index.js",
+  "directories": {
+    "lib": "lib"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "start": "sirv public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hudbrog/gCodeViewer.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/hudbrog/gCodeViewer/issues"
+  },
+  "homepage": "https://github.com/hudbrog/gCodeViewer#readme",
+  "devDependencies": {
+    "@types/uuid": "^10.0.0",
+    "rollup": "^2.79.2",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-css-only": "^4.5.2",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-resolve": "^0.0.1-predev.1",
+    "rollup-plugin-svelte": "^7.2.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "sirv-cli": "^3.0.1",
+    "svelte": "^5.33.1",
+    "uuid": "^11.1.0"
+  }
+}
diff --git a/public/global.css b/public/global.css
new file mode 100644
index 0000000..bb28a94
--- /dev/null
+++ b/public/global.css
@@ -0,0 +1,63 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	-webkit-padding: 0.4em 0;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+button {
+	color: #333;
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:disabled {
+	color: #999;
+}
+
+button:not(:disabled):active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+}
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..f54eb10
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+
+	<title>gcode viewer - online gcode viewer and analyzer in your browser!</title>
+	<meta name="description" content="Visual GCode viewer and analyzer in your browser. No need to upload you GCode anywhere, everything is done locally. (Svelte Edition)" />
+	<meta name="keywords" content="GCode,g-code,viewer,online,javascript,svelte" />
+	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	<meta name="language" content="english" />
+
+	<!-- Favicon and other links from original -->
+	<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
+	<!-- <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" /> -->
+	<!-- <link rel="meta" type="application/rdf+xml" title="Dublin" href="/dublin.rdf" /> -->
+	<!-- <link rel="canonical" href="http://gcode.ws/" /> -->
+
+
+	<!-- Stylesheets from original, plus global.css for Svelte -->
+	<!-- Removed: <link rel="stylesheet" type="text/css" href="css/cupertino/jquery-ui-1.9.0.custom.css" media="screen" /> -->
+	<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen" />
+	<link rel="stylesheet" type="text/css" href="lib/codemirror.css" media="screen" />
+	<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
+	
+	<link rel='stylesheet' href='/global.css'>
+	<link rel='stylesheet' href='/build/bundle.css'>
+
+	<!-- OG Meta Tags from original -->
+	<meta property="og:title" content="gCodeViewer - Svelte Edition" />
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content="http://gcode.ws" /> <!-- Consider updating if domain changes -->
+	<meta property="og:image" content="http://gcode.ws/screenshot.jpg" />
+	<meta property="og:site_name" content="Online GCode Viewer (Svelte)" />
+	<!-- <meta property="fb:admins" content="1537520789" /> -->
+
+
+	<!-- External JS Libraries (order might matter for dependencies) -->
+	<!-- Removed: <script type="text/javascript" src="lib/jquery-1.8.2.js"></script> -->
+	<!-- Removed: <script type="text/javascript" src="lib/jquery-ui-1.9.0.custom.js"></script> -->
+	<script type="text/javascript" src="lib/codemirror.js"></script>
+	<script type="text/javascript" src="lib/mode_gcode/gcode_mode.js"></script>
+	<script type="text/javascript" src="lib/three.js"></script>
+	<!-- Removed: <script type="text/javascript" src="lib/bootstrap.js"></script> -->
+	<script type="text/javascript" src="lib/modernizr.custom.09684.js"></script>
+	<script type="text/javascript" src="lib/TrackballControls.js"></script> <!-- Depends on THREE.js -->
+	<script type="text/javascript" src="lib/zlib.min.js"></script>
+
+	<!-- Core GCode Logic Scripts (order might matter) -->
+	<script type="text/javascript" src="js/gCodeReader.js"></script>
+	<script type="text/javascript" src="js/renderer.js"></script>
+	<script type="text/javascript" src="js/analyzer.js"></script>
+	<script type="text/javascript" src="js/renderer3d.js"></script>
+	<!-- Note: js/ui.js is intentionally omitted as Svelte replaces it -->
+	<!-- Note: js/Worker.js is loaded by the worker itself, not here -->
+
+</head>
+
+<body>
+	<!-- Root element for Svelte app -->
+	<div id="app"></div>
+
+	<!-- Svelte app bundle -->
+	<script defer src='/build/bundle.js'></script>
+
+	<!-- Analytics and social scripts from original (optional, can be enabled if needed) -->
+	<!--
+	<script type="text/javascript">
+		var _gaq = _gaq || [];
+		_gaq.push(['_setAccount', 'UA-38437619-1']);
+		_gaq.push(['_trackPageview']);
+		(function() {
+			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+		})();
+	</script>
+	<div id="fb-root"></div>
+	<script type="text/javascript">(function(d, s, id) {
+		var js, fjs = d.getElementsByTagName(s)[0];
+		if (d.getElementById(id)) return;
+		js = d.createElement(s); js.id = id;
+		js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1&appId=122261684619414"; // Consider updating appID
+		fjs.parentNode.insertBefore(js, fjs);
+	}(document, 'script', 'facebook-jssdk'));</script>
+	-->
+</body>
+</html>
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 0000000..c617a0b
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,76 @@
+import svelte from 'rollup-plugin-svelte';
+import resolve from 'rollup-plugin-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import livereload from 'rollup-plugin-livereload';
+import { terser } from 'rollup-plugin-terser';
+import css from 'rollup-plugin-css-only';
+
+const production = !process.env.ROLLUP_WATCH;
+
+export default {
+  input: 'src/main.js',
+  output: {
+    sourcemap: true,
+    format: 'iife',
+    name: 'app',
+    file: 'public/build/bundle.js'
+  },
+  plugins: [
+    svelte({
+      compilerOptions: {
+        // enable run-time checks when not in production
+        dev: !production,
+      }
+    }),
+    // we'll extract any component CSS out into
+    // a separate file - better for performance
+    css({ output: 'bundle.css' }),
+
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration -
+    // consult the documentation for details:
+    // https://github.com/rollup/plugins/tree/master/packages/commonjs
+    resolve({
+      browser: true,
+      dedupe: ['svelte']
+    }),
+    commonjs(),
+
+    // In dev mode, call `npm run start` once
+    // the bundle has been generated
+    !production && serve(),
+
+    // Watch the `public` directory and refresh the
+    // browser on changes when not in production
+    !production && livereload('public'),
+
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser()
+  ],
+  watch: {
+    clearScreen: false
+  }
+};
+
+function serve() {
+  let server;
+
+  function toExit() {
+    if (server) server.kill(0);
+  }
+
+  return {
+    writeBundle() {
+      if (server) return;
+      server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+        stdio: ['ignore', 'inherit', 'inherit'],
+        shell: true
+      });
+
+      process.on('SIGTERM', toExit);
+      process.on('exit', toExit);
+    }
+  };
+}
diff --git a/src/App.svelte b/src/App.svelte
new file mode 100644
index 0000000..138915d
--- /dev/null
+++ b/src/App.svelte
@@ -0,0 +1,563 @@
+<script>
+  // Core Svelte imports
+  import { onMount, onDestroy } from 'svelte';
+
+  // Component Imports
+  import Accordion from './lib/Accordion.svelte';
+  import AccordionItem from './lib/AccordionItem.svelte';
+  import Tabs from './lib/Tabs.svelte';
+  import Tab from './lib/Tab.svelte';
+  import ProgressBar from './lib/ProgressBar.svelte';
+  import Button from './lib/Button.svelte';
+  import Slider from './lib/Slider.svelte';
+  import Modal from './lib/Modal.svelte';
+  import Dropdown from './lib/Dropdown.svelte';
+  import DropdownItem from './lib/DropdownItem.svelte';
+  import FileUploader from './lib/FileUploader.svelte';
+  import ModelInfo from './lib/ModelInfo.svelte';
+  import LayerInfo from './lib/LayerInfo.svelte';
+  import RenderOptions2D from './lib/RenderOptions2D.svelte';
+  import AnalyzerOptions from './lib/AnalyzerOptions.svelte';
+  import PrinterInfoOptions from './lib/PrinterInfoOptions.svelte';
+  import Notifications from './lib/Notifications.svelte';
+  import CodeMirrorView from './lib/CodeMirrorView.svelte';
+
+  // --- Application State ---
+
+  let isAppDisabled = false; // Flag to disable app on fatal errors
+
+  // Demo States
+  let progressValue = 30;
+  let isModalOpen = false;
+  let selectedDropdownItem = 'None';
+
+  // File Uploader State
+  let uploadedFilesInfo = [];
+  let rawGcodeContent = "";
+
+  // Options States
+  let renderOptions2DState = {
+    showMoves: true, showRetracts: true, moveModel: true, differentiateColors: true,
+    thickExtrusion: false, alpha: false, showNextLayer: false, speedDisplayType: 'speed'
+  };
+  let analyzerOptionsState = { sortLayers: true, purgeEmptyLayers: true, showGCode: false };
+  let printerInfoOptionsState = {
+    filamentDiameter: 1.75, nozzleDiameter: 0.4, hourlyCost: 1.0,
+    filamentPrice: 0.05, filamentType: 'PLA', volumetricE: false
+  };
+
+  // Model and Layer Info
+  let modelInfoData = {
+    modelSizeX: 0, modelSizeY: 0, modelSizeZ: 0, totalFilament: 0, totalWeight: 0,
+    filamentByExtruder: {}, printTime: 0, layerHeight: 0.2, layerCountPrinted: 0,
+    layerCountTotal: 0, timeCost: 0, filamentCost: 0,
+    speedsByLayer: {}, max: { speed: 0, volSpeed: 0, extrSpeed: 0 }, min: { speed: 0, volSpeed: 0, extrSpeed: 0 },
+    volSpeedsByLayer: {}, extrusionSpeedsByLayer: {}, printTimeByLayer: {}
+  };
+  let currentLayerNumForInfo = 0;
+  let layerInfoData = {
+    layerNum: 0, layerZ: 0, layerSegments: 0, layerFilament: 0, layerAggFilament: 0,
+    layerPrintTime: 0, speedDisplayType: 'speed', speedInfoExtrude: [], speedInfoMove: [],
+    speedInfoRetract: [], exPerMMInfo: [], volPerSecInfo: []
+  };
+  
+  // Layer and Segment Sliders
+  let layerSliderValue = 0;
+  let segmentSliderValue = 0;
+  let maxSegmentsForCurrentLayer = 0;
+
+  // Notifications
+  let notificationMessages = [];
+
+  // CodeMirrorView
+  let codeMirrorViewInstance;
+  let gcodePreviewText = "GCode will appear here when a file is loaded and 'Show GCode' option is enabled.";
+  let gcodeHighlightedRange = null;
+
+  // Web Worker
+  let worker;
+  let loadProgressValue = 0;
+  let analyzeProgressValue = 0;
+  let isRunAnalysisButtonDisabled = true;
+
+  // Accordion Control
+  let infoAccordionOpen = false;
+  let progressAccordionOpen = false;
+
+  // --- Event Handlers & Logic ---
+
+  function handleFilesSelected(event) {
+    if (isAppDisabled) {
+        addNotification('error', 'Application is disabled due to missing critical browser features.', 0);
+        return;
+    }
+    const files = event.detail;
+    if (!files || files.length === 0) return;
+    const file = files[0];
+
+    uploadedFilesInfo = [{ name: file.name, size: (file.size / 1024).toFixed(2) + ' KB', type: file.type || 'N/A' }];
+    addNotification('info', `Loading ${file.name}...`);
+    progressAccordionOpen = true;
+    loadProgressValue = 0;
+    analyzeProgressValue = 0;
+    isRunAnalysisButtonDisabled = true;
+
+    const reader = new FileReader();
+    reader.onload = function(e) {
+      rawGcodeContent = e.target.result;
+      if (analyzerOptionsState.showGCode) {
+        gcodePreviewText = rawGcodeContent;
+      } else {
+        gcodePreviewText = `GCode for ${file.name} loaded. Enable "Show GCode" in Analyzer Options to view.`;
+      }
+      if (window.GCODE && window.GCODE.gCodeReader && worker) {
+        worker.postMessage({ cmd: 'loadFile', msg: {gcode: rawGcodeContent, options: window.GCODE.gCodeReader.getOptions()} });
+      } else {
+        addNotification('error', 'GCODE scripts not loaded or worker not ready.');
+      }
+    };
+    reader.onerror = function(e) {
+      addNotification('error', 'Failed to read file.');
+      console.error("FileReader error:", e);
+      progressAccordionOpen = false;
+    };
+    reader.readAsText(file);
+  }
+
+  function onRenderOptions2DChange(event) {
+    renderOptions2DState = event.detail;
+    if (window.GCODE && window.GCODE.renderer) {
+      window.GCODE.renderer.setOption(renderOptions2DState);
+    }
+    layerInfoData = { ...layerInfoData, speedDisplayType: renderOptions2DState.speedDisplayType };
+    addNotification('info', '2D Render options updated.');
+    if(modelInfoData.layerCountTotal > 0) populateLayerInfoDetail(currentLayerNumForInfo);
+  }
+
+  function onAnalyzerOptionsChange(event) {
+    analyzerOptionsState = event.detail;
+    if (window.GCODE && window.GCODE.gCodeReader) {
+      window.GCODE.gCodeReader.setOption({
+          sortLayers: analyzerOptionsState.sortLayers,
+          purgeEmptyLayers: analyzerOptionsState.purgeEmptyLayers,
+      });
+    }
+    if (analyzerOptionsState.showGCode && rawGcodeContent) gcodePreviewText = rawGcodeContent;
+    else if (!analyzerOptionsState.showGCode) gcodePreviewText = "GCode view disabled in options.";
+    if (currentActiveTab === 'GCode Preview' && codeMirrorViewInstance && analyzerOptionsState.showGCode) {
+        setTimeout(() => codeMirrorViewInstance.refresh(), 0);
+    }
+    addNotification('info', 'Analyzer options updated.');
+  }
+
+  function onPrinterInfoOptionsChange(event) {
+    printerInfoOptionsState = event.detail;
+    if (window.GCODE && window.GCODE.gCodeReader) {
+      window.GCODE.gCodeReader.setOption(printerInfoOptionsState);
+    }
+    modelInfoData = {
+      ...modelInfoData,
+      timeCost: (modelInfoData.printTime || 0) * printerInfoOptionsState.hourlyCost / 3600,
+      filamentCost: (modelInfoData.totalWeight || 0) * printerInfoOptionsState.filamentPrice
+    };
+    addNotification('info', 'Printer/Filament options updated.');
+    if(modelInfoData.layerCountTotal > 0 && renderOptions2DState.speedDisplayType === 'volpersec') {
+        populateLayerInfoDetail(currentLayerNumForInfo);
+    }
+  }
+
+  function getNumberOfSegments(layer) {
+    if (window.GCODE && window.GCODE.renderer) {
+      return window.GCODE.renderer.getLayerNumSegments(layer) || 0;
+    }
+    return 0;
+  }
+
+  function getGCodeLinesForSegment(layer, startSeg, endSeg) {
+    if (window.GCODE && window.GCODE.gCodeReader) {
+      return window.GCODE.gCodeReader.getGCodeLines(layer, startSeg, endSeg) || {first:0, last:0};
+    }
+    return {first:0, last:0};
+  }
+
+  function populateLayerInfoDetail(layerNum) {
+    // ... (implementation from previous turn, no changes needed here for capabilities check)
+    // For brevity, keeping the detailed implementation from Turn 39, which is correct.
+    if (!window.GCODE || !window.GCODE.gCodeReader || !window.GCODE.renderer || !modelInfoData || modelInfoData.layerCountTotal === 0) {
+      console.warn("GCODE objects not ready or no model data for populateLayerInfoDetail");
+      layerInfoData = { ...layerInfoData, layerNum, speedInfoExtrude: [], speedInfoMove: [], speedInfoRetract: [], exPerMMInfo: [], volPerSecInfo: [] };
+      return;
+    }
+    const z = window.GCODE.renderer.getZ(layerNum);
+    const segments = window.GCODE.renderer.getLayerNumSegments(layerNum);
+    const filament = window.GCODE.gCodeReader.getLayerFilament(z) || 0;
+    let aggFilament = 0;
+    for (let i = 0; i <= layerNum; i++) {
+        aggFilament += (window.GCODE.gCodeReader.getLayerFilament(window.GCODE.renderer.getZ(i)) || 0);
+    }
+    let newSpeedInfoExtrude = [], newSpeedInfoMove = [], newSpeedInfoRetract = [], newExPerMMInfo = [], newVolPerSecInfo = [];
+    const currentModelInfo = window.GCODE.gCodeReader.getModelInfo();
+    const rendererOptions = window.GCODE.renderer.getOptions();
+    const gcodeReaderOptions = window.GCODE.gCodeReader.getOptions();
+
+    if (renderOptions2DState.speedDisplayType === 'speed') {
+        if (currentModelInfo.speedsByLayer && currentModelInfo.speedsByLayer['extrude'] && currentModelInfo.speedsByLayer['extrude'][z]) {
+            const extrudeSpeedsRaw = currentModelInfo.speedsByLayer['extrude'][z];
+            const minSpeed = currentModelInfo.min.speed; const maxSpeed = currentModelInfo.max.speed;
+            let sortable = {};
+            if (minSpeed !== undefined && maxSpeed !== undefined && extrudeSpeedsRaw) {
+                extrudeSpeedsRaw.forEach(spdVal => { if (spdVal === undefined) return; const spd = parseFloat(spdVal); const scale = (maxSpeed === minSpeed) ? 1 : (spd - minSpeed) / (maxSpeed - minSpeed); const text = (spd / 60).toFixed(2) + "mm/s"; sortable[text] = { color: window.GCODE.renderer.getGradientColor(scale), text: text }; });
+                Object.keys(sortable).sort((a,b) => parseFloat(b) - parseFloat(a)).forEach(key => newSpeedInfoExtrude.push(sortable[key]));
+            }
+        }
+        if (currentModelInfo.speedsByLayer && currentModelInfo.speedsByLayer['move'] && currentModelInfo.speedsByLayer['move'][z]) {
+            const moveSpeedsRaw = currentModelInfo.speedsByLayer['move'][z]; let sortable = {};
+            if (moveSpeedsRaw) { moveSpeedsRaw.forEach(spdVal => { if (spdVal === undefined) return; const text = (parseFloat(spdVal) / 60).toFixed(2) + "mm/s"; sortable[text] = { color: rendererOptions['colorMove'] || 'blue', text: text }; }); Object.keys(sortable).sort((a,b) => parseFloat(b) - parseFloat(a)).forEach(key => newSpeedInfoMove.push(sortable[key]));}
+        }
+        if (currentModelInfo.speedsByLayer && currentModelInfo.speedsByLayer['retract'] && currentModelInfo.speedsByLayer['retract'][z]) {
+            const retractSpeedsRaw = currentModelInfo.speedsByLayer['retract'][z];
+            if (retractSpeedsRaw) { retractSpeedsRaw.forEach(spdVal => { if (spdVal === undefined) return; newSpeedInfoRetract.push({ retractColor: rendererOptions['colorRetract'] || 'red', restartColor: rendererOptions['colorRestart'] || 'purple', text: (parseFloat(spdVal) / 60).toFixed(2) + "mm/s" }); });}
+        }
+    } else if (renderOptions2DState.speedDisplayType === 'expermm') {
+        if (currentModelInfo.volSpeedsByLayer && currentModelInfo.volSpeedsByLayer[z]) {
+            const volSpeedsRaw = currentModelInfo.volSpeedsByLayer[z]; const minVolSpeed = currentModelInfo.min.volSpeed; const maxVolSpeed = currentModelInfo.max.volSpeed; let sortable = {};
+            if (minVolSpeed !== undefined && maxVolSpeed !== undefined && volSpeedsRaw) { volSpeedsRaw.forEach(spdVal => { if (spdVal === undefined) return; const spd = parseFloat(spdVal); const scale = (maxVolSpeed === minVolSpeed) ? 1 : (spd - minVolSpeed) / (maxVolSpeed - minVolSpeed); const text = spd.toFixed(3) + "mm/mm"; sortable[text] = { color: window.GCODE.renderer.getGradientColor(scale), text: text }; }); Object.keys(sortable).sort((a,b) => parseFloat(b) - parseFloat(a)).forEach(key => newExPerMMInfo.push(sortable[key]));}
+        }
+    } else if (renderOptions2DState.speedDisplayType === 'volpersec') {
+        if (currentModelInfo.extrusionSpeedsByLayer && currentModelInfo.extrusionSpeedsByLayer[z]) {
+            const extrusionSpeedsRaw = currentModelInfo.extrusionSpeedsByLayer[z]; const minExtrSpeed = currentModelInfo.min.extrSpeed; const maxExtrSpeed = currentModelInfo.max.extrSpeed; let sortable = {};
+            if (minExtrSpeed !== undefined && maxExtrSpeed !== undefined && extrusionSpeedsRaw) { extrusionSpeedsRaw.forEach(spdVal => { if (spdVal === undefined) return; let spd = parseFloat(spdVal); const scale = (maxExtrSpeed === minExtrSpeed) ? 1 : (spd - minExtrSpeed) / (maxExtrSpeed - minExtrSpeed); if (!gcodeReaderOptions.volumetricE && gcodeReaderOptions.filamentDia) { spd *= Math.PI * Math.pow(gcodeReaderOptions.filamentDia / 2, 2); } const text = spd.toFixed(1) + "mm³/sec"; sortable[text] = { color: window.GCODE.renderer.getGradientColor(scale), text: text }; }); Object.keys(sortable).sort((a,b) => parseFloat(b) - parseFloat(a)).forEach(key => newVolPerSecInfo.push(sortable[key]));}
+        }
+    }
+    layerInfoData = { layerNum: layerNum, layerZ: z.toString(), layerSegments: segments, layerFilament: filament, layerAggFilament: aggFilament, layerPrintTime: currentModelInfo.printTimeByLayer ? (currentModelInfo.printTimeByLayer[z] || 0) : 0, speedDisplayType: renderOptions2DState.speedDisplayType, speedInfoExtrude: newSpeedInfoExtrude, speedInfoMove: newSpeedInfoMove, speedInfoRetract: newSpeedInfoRetract, exPerMMInfo: newExPerMMInfo, volPerSecInfo: newVolPerSecInfo };
+  }
+
+
+  function updateUIForNewModel() {
+    if (!window.GCODE || !window.GCODE.gCodeReader || !window.GCODE.renderer) {
+        addNotification('error', "Cannot update UI: GCODE objects not available.");
+        return;
+    }
+    populateLayerInfoDetail(0);
+    
+    layerSliderValue = 0;
+    maxSegmentsForCurrentLayer = getNumberOfSegments(0);
+    segmentSliderValue = 0;
+    updateGCodeHighlight();
+
+    const gcodeReaderOptions = window.GCODE.gCodeReader.getOptions();
+    printerInfoOptionsState = {
+        ...printerInfoOptionsState,
+        nozzleDiameter: gcodeReaderOptions.nozzleDia || printerInfoOptionsState.nozzleDiameter,
+        filamentDiameter: gcodeReaderOptions.filamentDia || printerInfoOptionsState.filamentDiameter,
+    };
+  }
+  
+  $: {
+      if (layerSliderValue !== undefined && modelInfoData.layerCountTotal > 0 && window.GCODE && window.GCODE.renderer) {
+          maxSegmentsForCurrentLayer = getNumberOfSegments(layerSliderValue);
+          if (segmentSliderValue > maxSegmentsForCurrentLayer) {
+            segmentSliderValue = maxSegmentsForCurrentLayer;
+          }
+          populateLayerInfoDetail(layerSliderValue);
+          updateGCodeHighlight();
+          window.GCODE.renderer.render(layerSliderValue, 0, segmentSliderValue);
+      }
+  }
+  $: {
+      if (segmentSliderValue !== undefined && modelInfoData.layerCountTotal > 0 && window.GCODE && window.GCODE.renderer) {
+          updateGCodeHighlight();
+          window.GCODE.renderer.render(layerSliderValue, 0, segmentSliderValue);
+      }
+  }
+  function updateGCodeHighlight() {
+      if(modelInfoData.layerCountTotal > 0 && window.GCODE && window.GCODE.gCodeReader){
+        gcodeHighlightedRange = getGCodeLinesForSegment(layerSliderValue, 0, segmentSliderValue);
+      } else {
+        gcodeHighlightedRange = null;
+      }
+  }
+
+  // Tab Control
+  let currentActiveTab = '2D View';
+  function handleTabChange(event) {
+    currentActiveTab = event.detail.title;
+    if (currentActiveTab === '3D View') handle3DTabSelected();
+    else if (currentActiveTab === 'GCode Preview') handleGCodeTabSelected();
+  }
+  function handle3DTabSelected() { addNotification('info', 'Switched to 3D View.'); /* Future: GCODE.renderer3d.doRender(); */ }
+  function handleGCodeTabSelected() {
+    addNotification('info', 'Switched to GCode Preview.');
+    if (codeMirrorViewInstance && analyzerOptionsState.showGCode) {
+      setTimeout(() => {
+        codeMirrorViewInstance.refresh();
+        if (gcodeHighlightedRange) codeMirrorViewInstance.setCursorPosition(gcodeHighlightedRange.first, 0);
+      }, 0);
+    }
+  }
+
+  // Notifications
+  function addNotification(type, text, duration = 5000) { const id = Date.now() + Math.random(); notificationMessages = [...notificationMessages, { id, type, text }]; if (duration) { setTimeout(() => { notificationMessages = notificationMessages.filter(msg => msg.id !== id); }, duration); } }
+  function clearNotification(id) { notificationMessages = notificationMessages.filter(msg => msg.id !== id); }
+  function clearAllNotifications() { notificationMessages = []; }
+
+  // Web Worker Message Handler
+  function processWorkerMessage(e) {
+    const data = e.data;
+    switch (data.cmd) {
+      case 'returnModel':
+        loadProgressValue = 100;
+        addNotification('success', 'File loaded, starting analysis...');
+        if (worker) worker.postMessage({ "cmd":"analyzeModel", "msg":{} });
+        break;
+      case 'analyzeDone':
+        analyzeProgressValue = 100;
+        if (window.GCODE && window.GCODE.gCodeReader) {
+            window.GCODE.gCodeReader.processAnalyzeModelDone(data.msg);
+            modelInfoData = { ...window.GCODE.gCodeReader.getModelInfo() }; 
+        }
+        updateUIForNewModel();
+        
+        infoAccordionOpen = true;
+        currentActiveTab = '2D View';
+        isRunAnalysisButtonDisabled = false;
+        addNotification('success', 'GCode analysis complete.');
+        progressAccordionOpen = false;
+        break;
+      case 'returnLayer':
+      case 'returnMultiLayer':
+        loadProgressValue = data.msg.progress;
+        break;
+      case "analyzeProgress":
+        analyzeProgressValue = data.msg.progress;
+        break;
+      default:
+        console.log("Unknown worker message received:", data);
+        addNotification('warning', `Unknown worker command: ${data.cmd}`);
+    }
+  }
+
+  // Lifecycle
+  onMount(() => {
+    // --- Capabilities Check (from js/ui.js checkCapabilities) ---
+    if (!window.Modernizr) {
+        addNotification('error', 'Modernizr not found. Browser capabilities check cannot run.', 0);
+        isAppDisabled = true; // Potentially disable app if Modernizr is critical
+    } else {
+        Modernizr.addTest('filereader', function () {
+            return !!(window.File && window.FileList && window.FileReader);
+        });
+
+        if(!Modernizr.canvas) {
+            addNotification('error', "HTML5 Canvas is not supported. This application won't work.", 0);
+            isAppDisabled = true;
+        }
+        if(!Modernizr.filereader) {
+            addNotification('error', "HTML5 File API is not supported. This application won't work.", 0);
+            isAppDisabled = true;
+        }
+        if(!Modernizr.webworkers) {
+            addNotification('error', "HTML5 Web Workers are not supported. This application won't work.", 0);
+            isAppDisabled = true;
+        }
+        if(!Modernizr.svg) { // Though original had this, it might not be strictly fatal for core Svelte app.
+            addNotification('error', "HTML5 SVG is not supported. Some visual elements might not work.", 0);
+            // isAppDisabled = true; // Decide if this is fatal for Svelte version
+        }
+
+        if(isAppDisabled) {
+            addNotification('error', 'Core browser features missing. Application functionality will be severely limited.', 0);
+            // Optionally, hide main UI or show a persistent overlay
+        } else {
+            // Non-fatal warnings
+            if(!Modernizr.webgl){
+                addNotification('warning', "WebGL is not supported. 3D mode may be slow or unavailable.", 10000);
+                if (window.GCODE && window.GCODE.renderer3d) {
+                    window.GCODE.renderer3d.setOption({rendererType: "canvas"}); // Fallback if possible
+                }
+            }
+            if(!Modernizr.draganddrop){
+                addNotification('warning', "Drag'n'Drop is not supported. File drop zone may not work.", 10000);
+            }
+        }
+    }
+    // --- End Capabilities Check ---
+
+    if (!isAppDisabled && (!window.GCODE || !window.GCODE.gCodeReader || !window.GCODE.renderer)) {
+        addNotification('error', 'Core GCODE scripts not loaded. App may not function correctly.', 10000);
+        console.error("window.GCODE objects not found onMount!");
+    } else if (!isAppDisabled) {
+        worker = new Worker('js/Worker.js');
+        worker.addEventListener('message', processWorkerMessage);
+
+        window.GCODE.gCodeReader.setOption({
+            sortLayers: analyzerOptionsState.sortLayers, purgeEmptyLayers: analyzerOptionsState.purgeEmptyLayers,
+            volumetricE: printerInfoOptionsState.volumetricE, filamentDia: printerInfoOptionsState.filamentDiameter,
+            nozzleDia: printerInfoOptionsState.nozzleDiameter, hourlyCost: printerInfoOptionsState.hourlyCost,
+            filamentPrice: printerInfoOptionsState.filamentPrice, filamentType: printerInfoOptionsState.filamentType,
+        });
+        window.GCODE.renderer.setOption({
+            moveModel: renderOptions2DState.moveModel, showMoves: renderOptions2DState.showMoves,
+            showRetracts: renderOptions2DState.showRetracts, differentiateColors: renderOptions2DState.differentiateColors,
+            actualWidth: renderOptions2DState.thickExtrusion, alpha: renderOptions2DState.alpha,
+            showNextLayer: renderOptions2DState.showNextLayer, speedDisplayType: renderOptions2DState.speedDisplayType,
+            renderAnalysis: false,
+        });
+    }
+    populateLayerInfoDetail(0);
+    if (!isAppDisabled) addNotification('info', 'Application initialized. Load a GCode file to start.', 7000);
+    else addNotification('error', 'Application disabled due to compatibility issues. Please check error messages.', 0);
+
+  });
+
+  onDestroy(() => {
+    if (worker) {
+      worker.terminate();
+      worker.removeEventListener('message', processWorkerMessage);
+    }
+  });
+
+</script>
+
+<div class="app-container" class:disabled={isAppDisabled}>
+  <header class="app-header">
+    <h1>GCode Viewer - Svelte Edition</h1>
+    <FileUploader on:filesSelected={handleFilesSelected} disabled={isAppDisabled} />
+  </header>
+
+  <Notifications messages={notificationMessages} on:clear={e => clearNotification(e.detail.id)} on:clearAll={clearAllNotifications}/>
+
+  {#if !isAppDisabled}
+    <div class="main-layout">
+      <aside class="sidebar">
+        <Accordion allowMultiple={true}>
+          <AccordionItem title="File Progress" bind:isOpen={progressAccordionOpen}>
+              <div slot="content">
+                  <div class="progress-item"> <span>Load Progress:</span> <ProgressBar progress={loadProgressValue} /> </div>
+                  <div class="progress-item"> <span>Analyze Progress:</span> <ProgressBar progress={analyzeProgressValue} /> </div>
+              </div>
+          </AccordionItem>
+          <AccordionItem title="2D Render Options">
+            <div slot="content"> <RenderOptions2D {...renderOptions2DState} on:optionsChange={onRenderOptions2DChange} /> </div>
+          </AccordionItem>
+          <AccordionItem title="Analyzer Options">
+            <div slot="content"> <AnalyzerOptions {...analyzerOptionsState} on:optionsChange={onAnalyzerOptionsChange} /> </div>
+          </AccordionItem>
+          <AccordionItem title="Printer & Filament">
+            <div slot="content"> <PrinterInfoOptions {...printerInfoOptionsState} on:optionsChange={onPrinterInfoOptionsChange} /> </div>
+          </AccordionItem>
+          <AccordionItem title="Error Analysis">
+              <div slot="content">
+                  <p><small>This section might show error details or allow re-analysis.</small></p>
+                  <Button label="Run Analysis Again" disabled={isRunAnalysisButtonDisabled} on:click={() => worker && worker.postMessage({ cmd: 'analyzeModel', msg:{} })} />
+              </div>
+          </AccordionItem>
+        </Accordion>
+      </aside>
+
+      <main class="content-area">
+        <Tabs on:tabChange={handleTabChange} bind:activeTabTitle={currentActiveTab}>
+          <Tab title="2D View">
+            <div class="view-2d-container">
+              <div class="canvas-placeholder" id="canvas-2d-area">2D Canvas Area</div>
+              <div class="slider-controls-2d">
+                 <Slider bind:value={layerSliderValue} min={0} max={modelInfoData.layerCountTotal > 0 ? modelInfoData.layerCountTotal -1 : 0} step={1} orientation="vertical"/>
+                 <Slider bind:value={segmentSliderValue} min={0} max={maxSegmentsForCurrentLayer} step={1} orientation="horizontal"/>
+              </div>
+            </div>
+          </Tab>
+          <Tab title="3D View">
+            <div class="canvas-placeholder" id="canvas-3d-area">3D Canvas Area</div>
+          </Tab>
+          <Tab title="GCode Preview">
+            <div class="gcode-preview-container">
+              {#if analyzerOptionsState.showGCode && rawGcodeContent}
+                <CodeMirrorView bind:this={codeMirrorViewInstance} gcodeText={gcodePreviewText} highlightedLines={gcodeHighlightedRange} readOnly={true} showLineNumbers={true} />
+              {:else if !rawGcodeContent} <p class="gcode-message">Load a GCode file to see the preview.</p>
+              {:else} <p class="gcode-message">GCode view is disabled in Analyzer Options. Enable it to see the GCode.</p> {/if}
+            </div>
+          </Tab>
+          <Tab title="About">
+            <div class="about-content">
+              <h3>About GCode Viewer - Svelte Edition</h3>
+              <p>Demo controls:</p>
+              <Button label="Test Error Notification" on:click={() => addNotification('error', 'This is a sample error message!')} />
+              <Button label="Test Success Notification" on:click={() => addNotification('success', 'Operation successful!')} />
+            </div>
+          </Tab>
+        </Tabs>
+      </main>
+
+      <aside class="info-sidebar">
+        <Accordion allowMultiple={true}>
+          <AccordionItem title="GCode Information" bind:isOpen={infoAccordionOpen} initialOpen={true}>
+              <div slot="content">
+                  <ModelInfo {...modelInfoData} />
+                  <LayerInfo {...layerInfoData} />
+              </div>
+          </AccordionItem>
+        </Accordion>
+         {#if uploadedFilesInfo.length > 0}
+          <div class="file-list-display component-section">
+              <h4>Selected Files:</h4>
+              <ul> {#each uploadedFilesInfo as file (file.name)} <li><strong>{file.name}</strong> ({file.type}) - {file.size}</li> {/each} </ul>
+          </div>
+        {/if}
+      </aside>
+    </div>
+  {:else}
+    <div class="app-disabled-message">
+        <h2>Application Disabled</h2>
+        <p>Critical browser features are missing. Please check the notifications (top-right) for details.</p>
+        <p>Try using a modern browser like Chrome, Firefox, Safari, or Edge.</p>
+    </div>
+  {/if}
+</div>
+
+<style>
+  /* Existing styles from previous App.svelte... ensure they are present */
+  :global(body) { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; margin: 0; background-color: #f0f2f5; color: #333; }
+  .app-container { display: flex; flex-direction: column; height: 100vh; }
+  .app-header { padding: 10px 20px; background-color: #333; color: white; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
+  .app-header h1 { font-size: 1.5em; margin: 0; }
+  .main-layout { display: flex; flex-grow: 1; overflow: hidden; }
+  .sidebar { width: 300px; padding: 15px; background-color: #fff; border-right: 1px solid #ddd; overflow-y: auto; flex-shrink: 0; }
+  .content-area { flex-grow: 1; padding: 15px; display: flex; flex-direction: column; overflow-y: auto; }
+  :global(.content-area > .tabs-container) { flex-grow: 1; display: flex; flex-direction: column; }
+  :global(.content-area > .tabs-container > .tab-content-area) { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; }
+  .info-sidebar { width: 300px; padding: 15px; background-color: #fff; border-left: 1px solid #ddd; overflow-y: auto; flex-shrink: 0; }
+  
+  .canvas-placeholder { min-height: 300px; background-color: #e9e9e9; display: flex; justify-content: center; align-items: center; color: #777; font-size: 1.2em; border-radius: 4px; margin-bottom: 15px; flex-grow: 1; }
+  .gcode-preview-container { flex-grow: 1; display: flex; flex-direction: column; min-height: 400px; }
+  .gcode-message { margin: auto; color: #777; }
+  :global(.gcode-preview-container > .codemirror-wrapper) { flex-grow: 1; height: auto; }
+  .view-2d-container { display: flex; flex-direction: column; height: 100%; }
+  .slider-controls-2d { display: flex; align-items: center; padding: 10px 0; gap: 20px; flex-shrink: 0; }
+  .slider-controls-2d > :global(.slider-container.horizontal) { flex-grow: 1; }
+  .slider-controls-2d > :global(.slider-container.vertical) { max-height: 200px; min-height: 100px; }
+  .about-content { padding: 10px; } .about-content h3 { margin-top: 0; } .about-content hr { margin: 15px 0; } .about-content button { margin-right: 10px; margin-bottom: 10px;}
+  .file-list-display { margin-top: 15px; padding: 10px; background-color: #f0f0f0; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 0.85em; }
+  .file-list-display h4 { margin-top: 0; margin-bottom: 8px; } .file-list-display ul { list-style-type: none; padding-left: 0; margin: 0; } .file-list-display li { padding: 3px 0; border-bottom: 1px solid #e5e5e5; } .file-list-display li:last-child { border-bottom: none; }
+
+  .progress-item { margin-bottom: 10px; }
+  .progress-item span { display: block; font-size: 0.9em; margin-bottom: 4px; color: #555; }
+  :global(.tab-content) { height: 100%; display: flex; flex-direction: column; }
+
+  .app-disabled-message {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 40px;
+    flex-grow: 1;
+    color: #777;
+  }
+  .app-disabled-message h2 {
+    color: #dc3545; /* Red color for emphasis */
+  }
+  .app-container.disabled .main-layout {
+    /* Optionally hide or grey out main layout if app is disabled */
+    /* filter: grayscale(1); pointer-events: none; */
+  }
+</style>
diff --git a/src/lib/Accordion.svelte b/src/lib/Accordion.svelte
new file mode 100644
index 0000000..c57718b
--- /dev/null
+++ b/src/lib/Accordion.svelte
@@ -0,0 +1,51 @@
+<script>
+  import { setContext } from 'svelte';
+  import { writable, derived } from 'svelte/store';
+
+  export let allowMultiple = true;
+
+  // A set of IDs for currently open items
+  const openItemIds = writable(new Set());
+
+  setContext('accordion', {
+    // Function for items to register themselves and their initial open state
+    registerItem: (id, initialOpen = false) => {
+      if (initialOpen) {
+        openItemIds.update(ids => {
+          ids.add(id);
+          return ids;
+        });
+      }
+    },
+    // Function for items to toggle their open state
+    toggleItem: (id) => {
+      openItemIds.update(ids => {
+        if (ids.has(id)) {
+          ids.delete(id);
+        } else {
+          if (!allowMultiple) {
+            ids.clear(); // Close all others if only one is allowed
+          }
+          ids.add(id);
+        }
+        return ids;
+      });
+    },
+    // A derived store that individual items can subscribe to for their open state
+    isOpen: (id) => derived(openItemIds, $ids => $ids.has(id))
+  });
+</script>
+
+<div class="accordion">
+  <slot></slot>
+</div>
+
+<style>
+  .accordion {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    /* If items have their own borders, and you want them to look connected: */
+    /* display: flex; */
+    /* flex-direction: column; */
+  }
+</style>
diff --git a/src/lib/AccordionItem.svelte b/src/lib/AccordionItem.svelte
new file mode 100644
index 0000000..0845eae
--- /dev/null
+++ b/src/lib/AccordionItem.svelte
@@ -0,0 +1,114 @@
+<script>
+  import { getContext, onMount, onDestroy } from 'svelte';
+  import { v4 as uuidv4 } from 'uuid';
+
+  export let title = "Accordion Title";
+  export let initialOpen = false; // This prop defines if the item should be open initially
+
+  const { registerItem, toggleItem, isOpen: getIsOpenStore } = getContext('accordion');
+  const id = uuidv4(); // Generate a unique ID for this item
+
+  let currentIsOpen; // Local variable to hold the reactive open state
+  let unsubscribe;
+
+  onMount(() => {
+    registerItem(id, initialOpen); // Register with the parent, indicating initial state
+    const isOpenStore = getIsOpenStore(id); // Get the specific store for this item
+    unsubscribe = isOpenStore.subscribe(value => {
+      currentIsOpen = value;
+    });
+  });
+
+  onDestroy(() => {
+    if (unsubscribe) {
+      unsubscribe(); // Clean up the subscription
+    }
+    // Optionally, unregister the item from the parent if needed, though not strictly necessary here
+  });
+
+  function handleToggle() {
+    toggleItem(id); // Ask the parent to toggle this item's state
+  }
+</script>
+
+<div class="accordion-item">
+  <div class="accordion-title"
+       on:click={handleToggle}
+       role="button"
+       tabindex="0"
+       aria-expanded={currentIsOpen}
+       aria-controls="accordion-content-{id}"
+       on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && handleToggle()}>
+    {title}
+    <span class="accordion-icon" aria-hidden="true">{currentIsOpen ? '−' : '+'}</span>
+  </div>
+  {#if currentIsOpen}
+    <div class="accordion-content" id="accordion-content-{id}" role="region">
+      <slot name="content">Default content if none provided</slot>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .accordion-item {
+    /* border: 1px solid #ddd; */ /* Let parent accordion handle overall border */
+  }
+
+  /* Styling to make items look connected when part of an accordion */
+  :global(.accordion > .accordion-item:not(:first-child)) {
+    border-top: 1px solid #ddd;
+  }
+   :global(.accordion > .accordion-item:first-child) .accordion-title {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  :global(.accordion > .accordion-item:last-child) {
+     border-bottom-left-radius: 3px;
+     border-bottom-right-radius: 3px;
+  }
+  /* If the last item is closed, its title should have rounded bottom corners */
+  :global(.accordion > .accordion-item:last-child) .accordion-title:not(.open) {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    border-bottom: none; /* No bottom border if it's the last item and closed */
+  }
+  /* If the last item is open, its content will make it naturally have square bottom corners before the content block */
+ :global(.accordion > .accordion-item:last-child) .accordion-title.open {
+    border-bottom: 1px solid #ddd;
+ }
+
+
+  .accordion-title {
+    background-color: #f7f7f7;
+    padding: 12px 18px; /* Slightly more padding */
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 600; /* Slightly bolder */
+    user-select: none;
+    border-bottom: 1px solid #ddd; /* Default border for separation */
+    transition: background-color 0.2s ease;
+  }
+
+  .accordion-title:hover {
+    background-color: #e9e9e9;
+  }
+
+  .accordion-title:focus {
+    outline: 2px solid blue; /* Basic focus indicator */
+    outline-offset: -2px;
+  }
+
+  .accordion-icon {
+    font-size: 1.1em; /* Adjusted size */
+    font-weight: bold;
+    margin-left: 10px; /* Space between title and icon */
+  }
+
+  .accordion-content {
+    padding: 15px 18px;
+    background-color: #fff;
+    /* border-top: 1px solid #ddd;  Removed as title now always has bottom border */
+  }
+</style>
diff --git a/src/lib/AnalyzerOptions.svelte b/src/lib/AnalyzerOptions.svelte
new file mode 100644
index 0000000..72fa53b
--- /dev/null
+++ b/src/lib/AnalyzerOptions.svelte
@@ -0,0 +1,69 @@
+<script>
+  import { createEventDispatcher, afterUpdate } from 'svelte';
+
+  export let sortLayers = true;
+  export let purgeEmptyLayers = true;
+  export let showGCode = false; // Corresponds to enabling/disabling the GCode view text area
+
+  const dispatch = createEventDispatcher();
+
+  function handleChange() {
+    dispatch('optionsChange', {
+      sortLayers,
+      purgeEmptyLayers,
+      showGCode
+    });
+  }
+  
+  let initialLoad = true;
+  afterUpdate(() => {
+    if (!initialLoad) {
+        handleChange();
+    }
+    initialLoad = false;
+  });
+
+</script>
+
+<div class="options-card">
+  <h4>GCode Analyzer Options</h4>
+  <div class="option-group">
+    <label>
+      <input type="checkbox" bind:checked={sortLayers}> Sort Layers by Z-height
+    </label>
+    <label>
+      <input type="checkbox" bind:checked={purgeEmptyLayers}> Purge Empty Layers
+    </label>
+    <label>
+      <input type="checkbox" bind:checked={showGCode}> Show GCode in Preview Tab
+    </label>
+  </div>
+</div>
+
+<style>
+  .options-card {
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    padding: 15px;
+    background-color: #f9f9f9;
+    font-size: 0.9em;
+  }
+  .options-card h4 {
+    margin-top: 0;
+    margin-bottom: 15px;
+    color: #333;
+    font-size: 1.1em;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 8px;
+  }
+  .option-group label {
+    display: block;
+    margin-bottom: 8px;
+    color: #555;
+    cursor: pointer;
+  }
+  .option-group label input {
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+</style>
diff --git a/src/lib/Button.svelte b/src/lib/Button.svelte
new file mode 100644
index 0000000..f6944b8
--- /dev/null
+++ b/src/lib/Button.svelte
@@ -0,0 +1,41 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+
+  export let label = 'Button'; // Default label
+  export let disabled = false; // Default disabled state
+
+  const dispatch = createEventDispatcher();
+
+  function handleClick(event) {
+    if (!disabled) {
+      dispatch('click', event);
+    }
+  }
+</script>
+
+<button class="custom-button" {disabled} on:click={handleClick}>
+  {label}
+</button>
+
+<style>
+  .custom-button {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    background-color: #007bff; /* Blue color */
+    color: white;
+    font-size: 1em;
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;
+  }
+
+  .custom-button:hover {
+    background-color: #0056b3; /* Darker blue on hover */
+  }
+
+  .custom-button:disabled {
+    background-color: #cccccc; /* Grey when disabled */
+    color: #666666;
+    cursor: not-allowed;
+  }
+</style>
diff --git a/src/lib/CodeMirrorView.svelte b/src/lib/CodeMirrorView.svelte
new file mode 100644
index 0000000..759ffa9
--- /dev/null
+++ b/src/lib/CodeMirrorView.svelte
@@ -0,0 +1,135 @@
+<script>
+  import { onMount, onDestroy, afterUpdate } from 'svelte';
+
+  export let gcodeText = "";
+  export let highlightedLines = null; // { first: number, last: number }
+  export let showLineNumbers = true;
+  export let readOnly = true;
+
+  let editor;
+  let editorElement; // The div CodeMirror will attach to
+  let currentHighlights = []; // To keep track of currently highlighted line handles
+
+  onMount(() => {
+    if (window.CodeMirror) {
+      editor = window.CodeMirror(editorElement, {
+        value: gcodeText,
+        lineNumbers: showLineNumbers,
+        mode: 'gcode', // Assuming gcode_mode.js defines 'gcode'
+        readOnly: readOnly,
+        gutters: ['CodeMirror-linenumbers'] // Ensure gutters are explicitly set if using line numbers
+      });
+      
+      // Initial highlight if provided
+      if (highlightedLines) {
+        highlightLines(highlightedLines.first, highlightedLines.last);
+      }
+
+    } else {
+      console.error("CodeMirror library not found. Make sure it's loaded globally.");
+    }
+    
+    return () => {
+      // CodeMirror's way to destroy is to get the wrapper element and remove it.
+      // There isn't a specific .destroy() method on the instance itself.
+      if (editor) {
+        const wrapperElement = editor.getWrapperElement();
+        if (wrapperElement && wrapperElement.parentNode) {
+          wrapperElement.parentNode.removeChild(wrapperElement);
+        }
+        editor = null; 
+      }
+    };
+  });
+
+  // Reactive statement to update editor content when gcodeText prop changes
+  $: if (editor && gcodeText !== editor.getValue()) {
+    editor.setValue(gcodeText);
+    // After setting value, if there's an initial highlight range, apply it
+    if (highlightedLines) {
+        highlightLines(highlightedLines.first, highlightedLines.last);
+    }
+  }
+  
+  // Watch for changes in highlightedLines prop
+  $: if (editor && highlightedLines) {
+    highlightLines(highlightedLines.first, highlightedLines.last);
+  } else if (editor && !highlightedLines) {
+    // Clear existing highlights if highlightedLines becomes null
+    clearAllHighlights();
+  }
+
+
+  // Method to highlight lines
+  export function highlightLines(first, last) {
+    if (!editor || first === undefined || last === undefined || first < 0 || last < 0) return;
+    
+    clearAllHighlights();
+
+    // Ensure first and last are within bounds
+    const lineCount = editor.lineCount();
+    const safeFirst = Math.max(0, Math.min(first, lineCount - 1));
+    const safeLast = Math.max(0, Math.min(last, lineCount - 1));
+
+    for (let i = safeFirst; i <= safeLast; i++) {
+      currentHighlights.push(editor.addLineClass(i, 'background', 'activeline'));
+    }
+  }
+  
+  function clearAllHighlights() {
+    if (!editor) return;
+    currentHighlights.forEach(lineHandle => {
+      editor.removeLineClass(lineHandle, 'background', 'activeline');
+    });
+    currentHighlights = [];
+  }
+
+  // Method to refresh the editor (e.g., when its container is resized or shown)
+  export function refresh() {
+    if (editor) {
+      editor.refresh();
+    }
+  }
+
+  // Method to set cursor position
+  export function setCursorPosition(line, char = 0) {
+    if (editor) {
+      // Ensure line is within bounds
+      const lineCount = editor.lineCount();
+      const safeLine = Math.max(0, Math.min(line, lineCount - 1));
+      editor.setCursor(safeLine, char);
+      editor.focus(); // Optionally focus the editor
+    }
+  }
+  
+  // Update options if they change dynamically (less common for some like readOnly)
+  $: if(editor && editor.getOption('lineNumbers') !== showLineNumbers) {
+    editor.setOption('lineNumbers', showLineNumbers);
+  }
+  $: if(editor && editor.getOption('readOnly') !== readOnly) {
+    editor.setOption('readOnly', readOnly);
+  }
+
+</script>
+
+<div bind:this={editorElement} class="codemirror-wrapper"></div>
+
+<style>
+  .codemirror-wrapper {
+    width: 100%;
+    height: 100%; /* Ensure wrapper takes full height of its container */
+    border: 1px solid #ccc;
+    position: relative; /* Needed for CodeMirror layout */
+  }
+
+  /* Style for highlighted lines, make sure CodeMirror CSS is loaded for this to work well */
+  :global(.CodeMirror .activeline) {
+    background-color: #e8f2ff !important; /* Light blue background, !important might be needed */
+  }
+  /* Ensure the CodeMirror instance itself takes up the full space of the wrapper */
+  :global(.CodeMirror) {
+    height: 100% !important; 
+    font-family: monospace;
+    font-size: 0.9em;
+  }
+</style>
diff --git a/src/lib/Dropdown.svelte b/src/lib/Dropdown.svelte
new file mode 100644
index 0000000..3db48cb
--- /dev/null
+++ b/src/lib/Dropdown.svelte
@@ -0,0 +1,158 @@
+<script>
+  import { createEventDispatcher, onMount, onDestroy, setContext } from 'svelte';
+
+  export let isOpen = false;
+
+  const dispatch = createEventDispatcher();
+  let dropdownElement;
+  let triggerElement;
+
+  // Provide a way for DropdownItem to close the dropdown
+  setContext('closeDropdown', closeDropdown);
+
+  function toggleDropdown() {
+    isOpen = !isOpen;
+    if (isOpen) {
+      dispatch('open');
+    } else {
+      dispatch('close');
+    }
+  }
+
+  function closeDropdown() {
+    if (isOpen) {
+      isOpen = false;
+      dispatch('close');
+    }
+  }
+
+  function handleClickOutside(event) {
+    if (dropdownElement && !dropdownElement.contains(event.target) && triggerElement && !triggerElement.contains(event.target)) {
+      closeDropdown();
+    }
+  }
+
+  function handleKeydown(event) {
+    if (!isOpen) return;
+
+    if (event.key === 'Escape') {
+      closeDropdown();
+      triggerElement?.querySelector('button, a, [tabindex]')?.focus(); // Return focus to trigger
+    }
+    
+    if (event.key === 'Tab') {
+      const focusableItems = Array.from(
+        dropdownElement.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')
+      ).filter(el => el.offsetParent !== null); // Ensure elements are visible
+
+      if (focusableItems.length === 0) return;
+
+      const currentIndex = focusableItems.indexOf(document.activeElement);
+
+      if (event.shiftKey) { // Shift + Tab
+        if (document.activeElement === focusableItems[0]) {
+          // Optional: close dropdown or move focus to trigger
+          // For now, just trap within the menu or let it go to trigger via natural tab order if menu is first
+        }
+      } else { // Tab
+        if (document.activeElement === focusableItems[focusableItems.length - 1]) {
+          // Optional: if it's the last item, maybe loop to first, or close
+          // focusableItems[0].focus(); // Loop to first
+          // event.preventDefault(); 
+        }
+      }
+    }
+  }
+  
+  let menuStyle = '';
+  $: if (isOpen && triggerElement && dropdownElement) {
+    const triggerRect = triggerElement.getBoundingClientRect();
+    const menuRect = dropdownElement.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - triggerRect.bottom;
+    const spaceAbove = triggerRect.top;
+
+    let topPosition;
+    if (spaceBelow >= menuRect.height || spaceBelow >= spaceAbove) {
+      topPosition = triggerRect.bottom + window.scrollY; // Position below
+    } else {
+      topPosition = triggerRect.top + window.scrollY - menuRect.height; // Position above
+    }
+    
+    menuStyle = `top: ${topPosition}px; left: ${triggerRect.left + window.scrollX}px; min-width: ${triggerRect.width}px;`;
+  }
+
+
+  onMount(() => {
+    document.addEventListener('click', handleClickOutside, true);
+    // Keydown listener on document to catch Escape key globally for the dropdown
+    // Specific Tab handling might be better on the dropdownElement itself if it's always present in DOM
+  });
+
+  onDestroy(() => {
+    document.removeEventListener('click', handleClickOutside, true);
+  });
+</script>
+
+<div class="dropdown-container" on:keydown={handleKeydown}> <!-- Moved keydown here for context -->
+  <div bind:this={triggerElement} on:click={toggleDropdown} role="button" aria-haspopup="menu" aria-expanded={isOpen} tabindex="0" on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && toggleDropdown()}>
+    <slot name="trigger">
+      <button class="default-trigger">Dropdown</button>
+    </slot>
+  </div>
+
+  {#if isOpen}
+    <div
+      bind:this={dropdownElement}
+      class="dropdown-menu"
+      role="menu"
+      aria-labelledby={triggerElement?.id || null} <!-- Assuming trigger has an ID for better ARIA -->
+      style={menuStyle}
+    >
+      <slot></slot> <!-- Default slot for DropdownItem components -->
+    </div>
+  {/if}
+</div>
+
+<style>
+  .dropdown-container {
+    position: relative;
+    display: inline-block;
+  }
+
+  /* Ensure the trigger slot fills the div if it's a button or similar */
+  .dropdown-container > div[role="button"] {
+    display: inline-flex; /* Or block, depending on desired layout */
+    cursor: pointer;
+  }
+  .dropdown-container > div[role="button"]:focus {
+    outline: 2px solid blue; /* Or your preferred focus style */
+     outline-offset: 2px;
+  }
+
+
+  .default-trigger {
+    padding: 8px 12px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1em;
+  }
+  .default-trigger:hover {
+    background-color: #0056b3;
+  }
+
+  .dropdown-menu {
+    position: fixed; /* Changed to fixed for better viewport handling */
+    background-color: white;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    z-index: 1000; 
+    min-width: 160px; 
+    padding: 5px 0; 
+    max-height: 40vh; /* Prevent menu from being too tall */
+    overflow-y: auto; /* Scroll if too many items */
+  }
+</style>
diff --git a/src/lib/DropdownItem.svelte b/src/lib/DropdownItem.svelte
new file mode 100644
index 0000000..e1380f4
--- /dev/null
+++ b/src/lib/DropdownItem.svelte
@@ -0,0 +1,45 @@
+<script>
+  import { createEventDispatcher, getContext } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+  // Attempt to get a close function from Dropdown context, if provided
+  // This is an alternative to dispatching an event that the parent Dropdown listens to.
+  const closeDropdown = getContext('closeDropdown');
+
+  function handleClick(event) {
+    dispatch('select', event); // Dispatch a select event with the original click event
+    if (typeof closeDropdown === 'function') {
+      closeDropdown(); // Call context function to close dropdown
+    }
+    // If not using context, the parent Dropdown would listen for 'select' and close itself.
+  }
+</script>
+
+<div
+  class="dropdown-item"
+  on:click={handleClick}
+  on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && handleClick(e)}
+  role="menuitem"
+  tabindex="0" <!-- Make it focusable -->
+>
+  <slot></slot>
+</div>
+
+<style>
+  .dropdown-item {
+    padding: 8px 15px;
+    cursor: pointer;
+    display: block; /* Make it take full width of parent */
+    white-space: nowrap; /* Prevent text wrapping */
+    background-color: transparent;
+    border: none; /* Assuming it's inside a styled menu */
+    text-align: left;
+    width: 100%;
+  }
+
+  .dropdown-item:hover,
+  .dropdown-item:focus {
+    background-color: #f0f0f0; /* Highlight on hover/focus */
+    outline: none; /* Remove default focus outline if custom styling is preferred */
+  }
+</style>
diff --git a/src/lib/FileUploader.svelte b/src/lib/FileUploader.svelte
new file mode 100644
index 0000000..0a0168f
--- /dev/null
+++ b/src/lib/FileUploader.svelte
@@ -0,0 +1,138 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+  let isDraggingOver = false;
+  let fileInput; // Reference to the hidden file input
+
+  function handleFileSelection(fileList) {
+    if (fileList && fileList.length > 0) {
+      dispatch('filesSelected', fileList);
+    }
+  }
+
+  // For the <input type="file">
+  function onFileInputChange(event) {
+    handleFileSelection(event.target.files);
+  }
+
+  // For the drop zone
+  function onDragOver(event) {
+    event.preventDefault(); // Necessary to allow drop
+    isDraggingOver = true;
+  }
+
+  function onDragLeave(event) {
+    // Check if the leave is not to a child element, can be tricky
+    // For simplicity, we'll assume any dragleave means it's out.
+    // More robust solutions might check event.relatedTarget.
+    isDraggingOver = false;
+  }
+
+  function onDrop(event) {
+    event.preventDefault();
+    isDraggingOver = false;
+    handleFileSelection(event.dataTransfer.files);
+  }
+
+  // Function to trigger the hidden file input when drop zone is clicked
+  function triggerFileInput() {
+    if (fileInput) {
+      fileInput.click();
+    }
+  }
+</script>
+
+<div class="file-uploader-container">
+  <!-- Hidden file input, triggered by clicking the drop zone -->
+  <input
+    type="file"
+    bind:this={fileInput}
+    on:change={onFileInputChange}
+    multiple
+    class="file-input-hidden"
+    aria-hidden="true"
+    tabindex="-1"
+  />
+
+  <div
+    class="drop-zone"
+    class:dragging-over={isDraggingOver}
+    on:dragover={onDragOver}
+    on:dragleave={onDragLeave}
+    on:drop={onDrop}
+    on:click={triggerFileInput}
+    on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && triggerFileInput()}
+    role="button"
+    tabindex="0"
+    aria-label="File drop zone or click to select files"
+  >
+    {#if isDraggingOver}
+      <p>Drop files here...</p>
+    {:else}
+      <p>Drag and drop files here, or click to select files.</p>
+      <button class="browse-button" type="button" on:click|stopPropagation={triggerFileInput}>Browse Files</button>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .file-uploader-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: Arial, sans-serif;
+  }
+
+  .file-input-hidden {
+    display: none; /* Hidden, triggered programmatically */
+  }
+
+  .drop-zone {
+    width: 100%;
+    max-width: 400px; /* Or adjust as needed */
+    min-height: 150px;
+    border: 2px dashed #ccc;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 20px;
+    cursor: pointer;
+    transition: border-color 0.3s ease, background-color 0.3s ease;
+  }
+
+  .drop-zone:hover {
+    border-color: #aaa;
+  }
+  .drop-zone:focus {
+    outline: 2px solid blue;
+    outline-offset: 2px;
+  }
+
+  .drop-zone.dragging-over {
+    border-color: #007bff;
+    background-color: #f0f8ff; /* Light blue background */
+  }
+
+  .drop-zone p {
+    margin: 0 0 10px 0;
+    color: #555;
+  }
+
+  .browse-button {
+    padding: 8px 15px;
+    font-size: 0.9em;
+    color: white;
+    background-color: #007bff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+  }
+  .browse-button:hover {
+    background-color: #0056b3;
+  }
+</style>
diff --git a/src/lib/LayerInfo.svelte b/src/lib/LayerInfo.svelte
new file mode 100644
index 0000000..9899ad9
--- /dev/null
+++ b/src/lib/LayerInfo.svelte
@@ -0,0 +1,168 @@
+<script>
+  export let layerNum = 0;
+  export let layerZ = 0; // in mm
+  export let layerSegments = 0; // GCODE commands in layer
+  export let layerFilament = 0; // in mm, for this layer
+  export let layerAggFilament = 0; // in mm, summed up to this layer
+  export let layerPrintTime = 0; // in seconds, for this layer
+
+  // Speed/Extrusion display type: 'speed', 'expermm', 'volpersec'
+  export let speedDisplayType = 'speed';
+
+  /**
+   * Data structure for speed/extrusion info arrays:
+   * Array of { color?: string, text: string, retractColor?: string, restartColor?: string }
+   */
+  export let speedInfoExtrude = [];
+  export let speedInfoMove = [];
+  export let speedInfoRetract = []; // Contains { retractColor, restartColor, text }
+  export let exPerMMInfo = [];
+  export let volPerSecInfo = [];
+
+</script>
+
+<div class="layer-info-card">
+  <h4>Layer Information</h4>
+  <ul>
+    <li>Layer Number: {layerNum}</li>
+    <li>Layer Height (Z): {layerZ.toString()} mm</li> <!-- Ensure layerZ is string if it can be number -->
+    <li>GCODE Commands: {layerSegments}</li>
+    <li>Filament Used (Layer): {layerFilament.toFixed(2)} mm</li>
+    <li>Filament Used (Total): {layerAggFilament.toFixed(2)} mm</li>
+    <li>Est. Print Time (Layer): {layerPrintTime.toFixed(1)} sec</li>
+  </ul>
+
+  {#if speedDisplayType === 'speed'}
+    <div class="speed-details">
+      {#if speedInfoExtrude.length > 0}
+        <h5>Extrude Speeds:</h5>
+        <ul>
+          {#each speedInfoExtrude as item}
+            <li><span class="color-box" style="background-color: {item.color};"></span> {item.text}</li>
+          {/each}
+        </ul>
+      {/if}
+
+      {#if speedInfoMove.length > 0}
+        <h5>Move Speeds:</h5>
+        <ul>
+          {#each speedInfoMove as item}
+            <li><span class="color-box" style="background-color: {item.color};"></span> {item.text}</li>
+          {/each}
+        </ul>
+      {/if}
+
+      {#if speedInfoRetract.length > 0}
+        <h5>Retract Speeds:</h5>
+        <ul>
+          {#each speedInfoRetract as item}
+            <li>
+              <span class="color-dot" style="color: {item.retractColor};">&#9679;</span>
+              <span class="color-dot" style="color: {item.restartColor};">&#9679;</span>
+              {item.text}
+            </li>
+          {/each}
+        </ul>
+      {/if}
+      {#if speedInfoExtrude.length === 0 && speedInfoMove.length === 0 && speedInfoRetract.length === 0}
+        <p class="no-data">No speed data for this layer.</p>
+      {/if}
+    </div>
+  {/if}
+
+  {#if speedDisplayType === 'expermm'}
+    <div class="speed-details">
+      <h5>Extrusion per MM (mm/mm):</h5>
+      {#if exPerMMInfo.length > 0}
+        <ul>
+          {#each exPerMMInfo as item}
+            <li><span class="color-box" style="background-color: {item.color};"></span> {item.text}</li>
+          {/each}
+        </ul>
+      {:else}
+        <p class="no-data">No extrusion/mm data for this layer.</p>
+      {/if}
+    </div>
+  {/if}
+
+  {#if speedDisplayType === 'volpersec'}
+    <div class="speed-details">
+      <h5>Extrusion Volume per Second (mm³/sec):</h5>
+      {#if volPerSecInfo.length > 0}
+        <ul>
+          {#each volPerSecInfo as item}
+            <li><span class="color-box" style="background-color: {item.color};"></span> {item.text}</li>
+          {/each}
+        </ul>
+      {:else}
+        <p class="no-data">No volume/sec data for this layer.</p>
+      {/if}
+    </div>
+  {/if}
+
+</div>
+
+<style>
+  .layer-info-card {
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    padding: 15px;
+    background-color: #f9f9f9;
+    font-size: 0.9em;
+    margin-top: 20px;
+  }
+  .layer-info-card h4 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: #333;
+    font-size: 1.1em;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 5px;
+  }
+  .layer-info-card ul {
+    list-style-type: none;
+    padding-left: 0;
+    margin: 0;
+  }
+  .layer-info-card li {
+    padding: 4px 0;
+    color: #555;
+  }
+
+  .speed-details {
+    margin-top: 15px;
+  }
+  .speed-details h5 {
+    margin-top: 10px;
+    margin-bottom: 5px;
+    color: #444;
+    font-size: 1em;
+  }
+  .speed-details ul {
+    padding-left: 10px; /* Indent speed details slightly */
+    margin-bottom: 10px;
+  }
+  .speed-details li {
+    display: flex;
+    align-items: center;
+    padding: 3px 0;
+  }
+  .color-box {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    border: 1px solid #ccc;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+  .color-dot {
+    font-size: 1.2em; /* Make dots a bit larger */
+    margin-right: 2px;
+    line-height: 1;
+  }
+  .no-data {
+    color: #777;
+    font-style: italic;
+    font-size: 0.9em;
+  }
+</style>
diff --git a/src/lib/Modal.svelte b/src/lib/Modal.svelte
new file mode 100644
index 0000000..bde114c
--- /dev/null
+++ b/src/lib/Modal.svelte
@@ -0,0 +1,198 @@
+<script>
+  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+
+  export let isOpen = false; // Two-way bindable
+
+  const dispatch = createEventDispatcher();
+
+  function closeModal() {
+    isOpen = false;
+    dispatch('close'); // Dispatch a close event
+  }
+
+  function handleKeydown(event) {
+    if (isOpen && event.key === 'Escape') {
+      closeModal();
+    }
+  }
+
+  // Focus management
+  let modalElement;
+  let previouslyFocusedElement;
+
+  onMount(() => {
+    document.addEventListener('keydown', handleKeydown);
+    return () => {
+      document.removeEventListener('keydown', handleKeydown);
+    };
+  });
+
+  // When isOpen changes
+  $: if (isOpen) {
+    previouslyFocusedElement = document.activeElement;
+    // Wait for modal to be rendered then focus it or a focusable element within it
+    // Using a timeout is a common way to wait for the next tick
+    setTimeout(() => {
+      if (modalElement) {
+        const focusable = modalElement.querySelector(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        if (focusable) {
+          focusable.focus();
+        } else {
+          modalElement.focus(); // Fallback to modal itself
+        }
+      }
+    }, 0);
+  } else {
+    if (previouslyFocusedElement) {
+      previouslyFocusedElement.focus();
+      previouslyFocusedElement = null;
+    }
+  }
+
+  function trapFocus(event) {
+    if (!isOpen || !modalElement) return;
+
+    const focusableElements = Array.from(modalElement.querySelectorAll(
+      'a[href], button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    ));
+    if (focusableElements.length === 0) return;
+
+    const firstFocusableElement = focusableElements[0];
+    const lastFocusableElement = focusableElements[focusableElements.length - 1];
+
+    if (event.key === 'Tab') {
+      if (event.shiftKey) { // Shift + Tab
+        if (document.activeElement === firstFocusableElement) {
+          lastFocusableElement.focus();
+          event.preventDefault();
+        }
+      } else { // Tab
+        if (document.activeElement === lastFocusableElement) {
+          firstFocusableElement.focus();
+          event.preventDefault();
+        }
+      }
+    }
+  }
+
+</script>
+
+{#if isOpen}
+  <div class="modal-backdrop" on:click={closeModal} role="presentation"></div>
+  <div
+    class="modal"
+    bind:this={modalElement}
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="modal-header-title"
+    on:keydown={trapFocus}
+    tabindex="-1" <!-- Make the modal itself focusable -->
+  >
+    <header class="modal-header">
+      <slot name="header">
+        <h2 id="modal-header-title" class="modal-title-default">Modal Title</h2>
+      </slot>
+      <button class="modal-close-button" on:click={closeModal} aria-label="Close modal">&times;</button>
+    </header>
+
+    <section class="modal-body">
+      <slot name="body">
+        <p>Default modal body content.</p>
+      </slot>
+    </section>
+
+    <footer class="modal-footer">
+      <slot name="footer">
+        <button class="button-default" on:click={closeModal}>Close</button>
+      </slot>
+    </footer>
+  </div>
+{/if}
+
+<style>
+  .modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    z-index: 999; /* Below modal, above other content */
+  }
+
+  .modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    z-index: 1000; /* Above backdrop */
+    width: 90%;
+    max-width: 500px; /* Default max width */
+    max-height: 90vh; /* Prevent modal from being too tall */
+    display: flex;
+    flex-direction: column;
+    overflow: hidden; /* Ensures border-radius is applied to children */
+  }
+
+  .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #e0e0e0;
+    background-color: #f8f9fa; /* Light background for header */
+  }
+
+  .modal-title-default {
+    margin: 0;
+    font-size: 1.25em;
+    font-weight: 500;
+  }
+
+  .modal-close-button {
+    background: none;
+    border: none;
+    font-size: 1.8em;
+    line-height: 1;
+    padding: 0 5px;
+    cursor: pointer;
+    color: #666;
+  }
+  .modal-close-button:hover {
+    color: #333;
+  }
+
+  .modal-body {
+    padding: 20px;
+    overflow-y: auto; /* Scrollable body if content is too long */
+    flex-grow: 1; /* Allows body to expand and fill space */
+  }
+
+  .modal-footer {
+    padding: 15px 20px;
+    border-top: 1px solid #e0e0e0;
+    text-align: right; /* Align footer content (e.g., buttons) to the right */
+    background-color: #f8f9fa; /* Light background for footer */
+  }
+
+  .modal-footer > :global(button:not(:last-child)) {
+    margin-right: 10px;
+  }
+
+  /* Default button style if user doesn't slot their own */
+  .button-default {
+    padding: 8px 15px;
+    border: 1px solid #ccc;
+    background-color: #f0f0f0;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  .button-default:hover {
+    background-color: #e0e0e0;
+  }
+</style>
diff --git a/src/lib/ModelInfo.svelte b/src/lib/ModelInfo.svelte
new file mode 100644
index 0000000..8c5d55f
--- /dev/null
+++ b/src/lib/ModelInfo.svelte
@@ -0,0 +1,81 @@
+<script>
+  export let modelSizeX = 0;
+  export let modelSizeY = 0;
+  export let modelSizeZ = 0;
+  export let totalFilament = 0; // in mm
+  export let totalWeight = 0; // in grams
+  export let filamentByExtruder = {}; // Object like { 'T0': 1234.56, 'T1': 789.10 }
+  export let printTime = 0; // in seconds
+  export let layerHeight = 0; // in mm
+  export let layerCountPrinted = 0;
+  export let layerCountTotal = 0; // visited layers
+  export let timeCost = 0;
+  export let filamentCost = 0;
+
+  function formatPrintTime(seconds) {
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = Math.floor(seconds % 60);
+    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+  }
+</script>
+
+<div class="model-info-card">
+  <h4>Model Information</h4>
+  <ul>
+    <li>Model Size: {modelSizeX.toFixed(2)} x {modelSizeY.toFixed(2)} x {modelSizeZ.toFixed(2)} mm</li>
+    <li>Total Filament Used: {totalFilament.toFixed(2)} mm</li>
+    <li>Total Filament Weight: {totalWeight.toFixed(2)} grams</li>
+    
+    {#if Object.keys(filamentByExtruder).length > 1}
+      <li class="extruder-info">
+        Filament by Extruder:
+        <ul>
+          {#each Object.entries(filamentByExtruder) as [extruder, amount]}
+            <li>{extruder}: {amount.toFixed(2)} mm</li>
+          {/each}
+        </ul>
+      </li>
+    {/if}
+    
+    <li>Estimated Print Time: {formatPrintTime(printTime)}</li>
+    <li>Estimated Layer Height: {layerHeight.toFixed(2)} mm</li>
+    <li>Layer Count: {layerCountPrinted} printed, {layerCountTotal} visited</li>
+    <li>Estimated Time Cost: ${timeCost.toFixed(2)}</li>
+    <li>Estimated Filament Cost: ${filamentCost.toFixed(2)}</li>
+  </ul>
+</div>
+
+<style>
+  .model-info-card {
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    padding: 15px;
+    background-color: #f9f9f9;
+    font-size: 0.9em;
+  }
+  .model-info-card h4 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: #333;
+    font-size: 1.1em;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 5px;
+  }
+  .model-info-card ul {
+    list-style-type: none;
+    padding-left: 0;
+    margin: 0;
+  }
+  .model-info-card li {
+    padding: 4px 0;
+    color: #555;
+  }
+  .model-info-card li strong {
+    color: #333;
+  }
+  .extruder-info ul {
+    padding-left: 15px;
+    margin-top: 4px;
+  }
+</style>
diff --git a/src/lib/Notifications.svelte b/src/lib/Notifications.svelte
new file mode 100644
index 0000000..386a1b1
--- /dev/null
+++ b/src/lib/Notifications.svelte
@@ -0,0 +1,125 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+
+  export let messages = []; // Array of { id, type, text }
+
+  const dispatch = createEventDispatcher();
+
+  function clearNotification(id) {
+    dispatch('clear', { id });
+  }
+
+  function clearAll() {
+    dispatch('clearAll');
+  }
+
+  function getIcon(type) {
+    switch (type) {
+      case 'error': return '&#10060;'; // ❌ (Cross Mark) or use an SVG/icon font
+      case 'warning': return '&#9888;'; // ⚠️ (Warning Sign)
+      case 'info': return '&#8505;'; // ℹ️ (Information Source)
+      case 'success': return '&#9989;'; // ✅ (Check Mark Button)
+      default: return '';
+    }
+  }
+</script>
+
+{#if messages.length > 0}
+  <div class="notifications-container">
+    {#each messages as msg (msg.id)}
+      <div class="notification" class:error={msg.type === 'error'} class:warning={msg.type === 'warning'} class:info={msg.type === 'info'} class:success={msg.type === 'success'}>
+        <span class="notification-icon" role="img" aria-label={msg.type}>{@html getIcon(msg.type)}</span>
+        <span class="notification-text">{msg.text}</span>
+        <button class="notification-close" on:click={() => clearNotification(msg.id)} aria-label="Close notification">&times;</button>
+      </div>
+    {/each}
+    {#if messages.length > 1}
+      <button class="clear-all-button" on:click={clearAll}>Clear All ({messages.length})</button>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .notifications-container {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    width: 300px;
+    z-index: 2000; /* Above most other content */
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .notification {
+    padding: 12px 15px;
+    border-radius: 6px;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    animation: fadeIn 0.3s ease-out;
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; transform: translateX(20px); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+
+  .notification.info {
+    background-color: #007bff; /* Blue */
+  }
+  .notification.success {
+    background-color: #28a745; /* Green */
+  }
+  .notification.warning {
+    background-color: #ffc107; /* Yellow */
+    color: #333; /* Darker text for yellow */
+  }
+  .notification.error {
+    background-color: #dc3545; /* Red */
+  }
+
+  .notification-icon {
+    margin-right: 10px;
+    font-size: 1.2em;
+    line-height: 1; /* Ensure icon aligns well with text */
+  }
+
+  .notification-text {
+    flex-grow: 1;
+    font-size: 0.9em;
+  }
+
+  .notification-close {
+    background: none;
+    border: none;
+    color: inherit; /* Inherits color from parent (white or dark for warning) */
+    opacity: 0.7;
+    font-size: 1.4em;
+    line-height: 1;
+    padding: 0 5px;
+    margin-left: 10px;
+    cursor: pointer;
+  }
+  .notification-close:hover {
+    opacity: 1;
+  }
+  
+  .clear-all-button {
+    background-color: #6c757d; /* Secondary grey */
+    color: white;
+    border: none;
+    padding: 8px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.8em;
+    text-align: center;
+    margin-top: 5px; /* Space from last notification */
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  }
+  .clear-all-button:hover {
+    background-color: #5a6268;
+  }
+
+</style>
diff --git a/src/lib/PrinterInfoOptions.svelte b/src/lib/PrinterInfoOptions.svelte
new file mode 100644
index 0000000..a0d64c5
--- /dev/null
+++ b/src/lib/PrinterInfoOptions.svelte
@@ -0,0 +1,128 @@
+<script>
+  import { createEventDispatcher, afterUpdate } from 'svelte';
+
+  export let filamentDiameter = 1.75; // mm
+  export let nozzleDiameter = 0.4; // mm
+  export let hourlyCost = 1.0; // currency units
+  export let filamentPrice = 0.05; // currency units per gram
+  export let filamentType = 'PLA'; // 'ABS' or 'PLA'
+  export let volumetricE = false; // Volumetric E-axis
+
+  const dispatch = createEventDispatcher();
+
+  function handleChange() {
+    dispatch('optionsChange', {
+      filamentDiameter: Number(filamentDiameter), // Ensure numbers are numbers
+      nozzleDiameter: Number(nozzleDiameter),
+      hourlyCost: Number(hourlyCost),
+      filamentPrice: Number(filamentPrice),
+      filamentType,
+      volumetricE
+    });
+  }
+  
+  let initialLoad = true;
+  afterUpdate(() => {
+    if (!initialLoad) {
+        handleChange();
+    }
+    initialLoad = false;
+  });
+
+</script>
+
+<div class="options-card">
+  <h4>Printer & Filament Options</h4>
+  <div class="option-group">
+    <label for="filamentDiaInput">Filament Diameter (mm):</label>
+    <input id="filamentDiaInput" type="number" step="0.01" bind:value={filamentDiameter}>
+  </div>
+  <div class="option-group">
+    <label for="nozzleDiaInput">Nozzle Diameter (mm):</label>
+    <input id="nozzleDiaInput" type="number" step="0.01" bind:value={nozzleDiameter}>
+  </div>
+  <div class="option-group">
+    <label for="hourlyCostInput">Hourly Machine Cost (e.g., USD):</label>
+    <input id="hourlyCostInput" type="number" step="0.01" bind:value={hourlyCost}>
+  </div>
+  <div class="option-group">
+    <label for="filamentPriceInput">Filament Price (e.g., USD per gram):</label>
+    <input id="filamentPriceInput" type="number" step="0.001" bind:value={filamentPrice}>
+  </div>
+
+  <div class="option-group filament-type-group">
+    <h5>Filament Type:</h5>
+    <label>
+      <input type="radio" name="filamentType" value="PLA" bind:group={filamentType}> PLA
+    </label>
+    <label>
+      <input type="radio" name="filamentType" value="ABS" bind:group={filamentType}> ABS
+    </label>
+    <!-- Add more types if necessary -->
+  </div>
+  
+  <div class="option-group">
+    <label>
+      <input type="checkbox" bind:checked={volumetricE}> Use Volumetric E values
+    </label>
+    <small>If your GCode uses volumetric extrusion (e.g., G20/G21 for units, M200 D<diameter> T<tool> for volumetric mode, or firmware handles it).</small>
+  </div>
+</div>
+
+<style>
+  .options-card {
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    padding: 15px;
+    background-color: #f9f9f9;
+    font-size: 0.9em;
+  }
+  .options-card h4 {
+    margin-top: 0;
+    margin-bottom: 15px;
+    color: #333;
+    font-size: 1.1em;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 8px;
+  }
+  .option-group {
+    margin-bottom: 12px;
+  }
+  .option-group label {
+    display: block;
+    margin-bottom: 5px; /* Space between label and input/radio group */
+    color: #555;
+    font-weight: 500;
+  }
+  .option-group input[type="number"],
+  .option-group input[type="text"] { /* If you add text inputs */
+    width: 100%;
+    padding: 6px 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    font-size: 1em;
+  }
+  .option-group input[type="checkbox"],
+  .option-group input[type="radio"] {
+    margin-right: 6px;
+    vertical-align: middle;
+  }
+  .filament-type-group h5 {
+    margin-bottom: 8px;
+    font-weight: bold;
+    color: #444;
+  }
+  .filament-type-group label {
+    font-weight: normal; /* Radio labels are usually not bold */
+    cursor: pointer;
+    margin-right: 15px; /* Space out radio buttons */
+    display: inline-block; /* Align radio buttons horizontally */
+  }
+  .option-group small {
+      display: block;
+      font-size: 0.9em;
+      color: #666;
+      margin-top: 4px;
+  }
+</style>
diff --git a/src/lib/ProgressBar.svelte b/src/lib/ProgressBar.svelte
new file mode 100644
index 0000000..4cf13b1
--- /dev/null
+++ b/src/lib/ProgressBar.svelte
@@ -0,0 +1,37 @@
+<script>
+  export let progress = 0; // Default progress to 0 if not provided
+
+  // Ensure progress is within the 0-100 range
+  $: clampedProgress = Math.max(0, Math.min(100, progress));
+</script>
+
+<div class="progress-bar-container">
+  <div class="progress-bar-fill" style="width: {clampedProgress}%;">
+    <span class="progress-bar-text">{clampedProgress}%</span>
+  </div>
+</div>
+
+<style>
+  .progress-bar-container {
+    width: 100%;
+    background-color: #e0e0e0;
+    border-radius: 4px;
+    height: 20px;
+    position: relative; /* For positioning the text */
+  }
+
+  .progress-bar-fill {
+    height: 100%;
+    background-color: #4caf50; /* Green color for progress */
+    border-radius: 4px;
+    text-align: center;
+    line-height: 20px; /* Vertically center text */
+    color: white;
+    transition: width 0.3s ease-in-out; /* Smooth transition for width changes */
+  }
+
+  .progress-bar-text {
+    font-size: 0.8em;
+    font-weight: bold;
+  }
+</style>
diff --git a/src/lib/RenderOptions2D.svelte b/src/lib/RenderOptions2D.svelte
new file mode 100644
index 0000000..9d3c0f1
--- /dev/null
+++ b/src/lib/RenderOptions2D.svelte
@@ -0,0 +1,116 @@
+<script>
+  import { createEventDispatcher, afterUpdate } from 'svelte';
+
+  export let showMoves = true;
+  export let showRetracts = true;
+  export let moveModel = true;
+  export let differentiateColors = true;
+  export let thickExtrusion = false;
+  export let alpha = false;
+  export let showNextLayer = false;
+  export let speedDisplayType = 'speed'; // 'speed', 'expermm', 'volpersec'
+
+  const dispatch = createEventDispatcher();
+
+  // This function will be called whenever any of the props change.
+  // For now, it just dispatches the event. Later, it could directly call GCODE.renderer.setOption()
+  function handleChange() {
+    dispatch('optionsChange', {
+      showMoves,
+      showRetracts,
+      moveModel,
+      differentiateColors,
+      thickExtrusion,
+      alpha,
+      showNextLayer,
+      speedDisplayType
+    });
+  }
+
+  // Use afterUpdate to dispatch changes after props are updated by bindings
+  // This ensures that when a prop is changed from outside, the event is still dispatched.
+  let initialLoad = true;
+  afterUpdate(() => {
+    if (!initialLoad) { // Don't dispatch on initial component load
+        handleChange();
+    }
+    initialLoad = false;
+  });
+
+</script>
+
+<div class="options-card">
+  <h4>2D Render Options</h4>
+  <div class="option-group">
+    <label>
+      <input type="checkbox" bind:checked={showMoves}> Show Moves
+    </label>
+    <label>
+      <input type="checkbox" bind:checked={showRetracts}> Show Retracts
+    </label>
+    <label>
+      <input type="checkbox" bind:checked={moveModel}> Center Model on Screen
+    </label>
+    <label>
+      <input type="checkbox" bind:checked={differentiateColors}> Differentiate Colors (by speed)
+    </label>
+    <label>
+      <input type="checkbox" bind:checked={thickExtrusion}> Show Actual Extrusion Width
+    </label>
+    <label>
+      <input type="checkbox" bind:checked={alpha}> Enable Alpha/Transparency
+    </label>
+    <label>
+      <input type="checkbox" bind:checked={showNextLayer}> Show Next Layer (Faintly)
+    </label>
+  </div>
+
+  <div class="option-group speed-display-group">
+    <h5>Speed Display Type:</h5>
+    <label>
+      <input type="radio" name="speedDisplayType" value="speed" bind:group={speedDisplayType}> Speed (mm/s)
+    </label>
+    <label>
+      <input type="radio" name="speedDisplayType" value="expermm" bind:group={speedDisplayType}> Extrusion per mm (mm/mm)
+    </label>
+    <label>
+      <input type="radio" name="speedDisplayType" value="volpersec" bind:group={speedDisplayType}> Volume per second (mm³/s)
+    </label>
+  </div>
+</div>
+
+<style>
+  .options-card {
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    padding: 15px;
+    background-color: #f9f9f9;
+    font-size: 0.9em;
+  }
+  .options-card h4 {
+    margin-top: 0;
+    margin-bottom: 15px;
+    color: #333;
+    font-size: 1.1em;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 8px;
+  }
+  .option-group {
+    margin-bottom: 15px;
+  }
+  .option-group label {
+    display: block;
+    margin-bottom: 8px;
+    color: #555;
+    cursor: pointer;
+  }
+  .option-group label input {
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+  .speed-display-group h5 {
+    margin-bottom: 8px;
+    font-weight: bold;
+    color: #444;
+  }
+</style>
diff --git a/src/lib/Slider.svelte b/src/lib/Slider.svelte
new file mode 100644
index 0000000..71a6400
--- /dev/null
+++ b/src/lib/Slider.svelte
@@ -0,0 +1,138 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+
+  export let min = 0;
+  export let max = 100;
+  export let step = 1;
+  export let value = Math.min(max, Math.max(min, (min + max) / 2));
+  export let orientation = 'horizontal'; // 'horizontal' or 'vertical'
+
+  const dispatch = createEventDispatcher();
+
+  $: {
+    if (value < min) value = min;
+    if (value > max) value = max;
+  }
+
+  function handleChange(event) {
+    dispatch('change', { value: event.target.valueAsNumber });
+  }
+
+  function handleInput(event) {
+    dispatch('input', { value: event.target.valueAsNumber });
+  }
+
+</script>
+
+<div class="slider-container" class:vertical={orientation === 'vertical'} class:horizontal={orientation === 'horizontal'}>
+  <input
+    type="range"
+    {min}
+    {max}
+    {step}
+    bind:value
+    on:input={handleInput}
+    on:change={handleChange}
+    class="slider-input"
+    orient={orientation === 'vertical' ? 'vertical' : null} <!-- For Firefox -->
+  />
+  <span class="slider-value">{value}</span>
+</div>
+
+<style>
+  .slider-container {
+    display: flex;
+    align-items: center;
+    padding: 10px 0;
+    width: 100%;
+    max-width: 400px;
+  }
+  .slider-container.vertical {
+    flex-direction: column;
+    max-width: 80px; /* Adjust for vertical layout */
+    min-height: 200px; /* Example height for vertical slider */
+    align-items: center;
+  }
+
+  .slider-input {
+    cursor: pointer;
+    -webkit-appearance: none;
+    appearance: none;
+    background: #ddd; /* Track background */
+    border-radius: 5px;
+    outline: none;
+  }
+
+  .horizontal .slider-input {
+    width: 100%;
+    height: 8px; /* Track height */
+    margin-right: 15px;
+  }
+
+  .vertical .slider-input {
+    width: 8px; /* Track width for vertical */
+    min-height: 150px; /* Example track height */
+    margin-bottom: 15px; /* Space between slider and value for vertical */
+    writing-mode: bt-lr; /* IE */
+    -webkit-appearance: slider-vertical; /* WebKit */
+  }
+
+
+  /* Webkit (Chrome, Safari, Edge Chromium) */
+  .slider-input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    background: #007bff;
+    border-radius: 50%;
+    cursor: pointer;
+    /* margin-top: -6px; for horizontal */
+  }
+  .horizontal .slider-input::-webkit-slider-thumb {
+     margin-top: -6px; /* Adjust thumb position to be centered on the track */
+  }
+   .vertical .slider-input::-webkit-slider-thumb {
+     margin-left: -6px; /* Adjust thumb position for vertical */
+  }
+
+
+  /* Firefox */
+  .slider-input::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    background: #007bff;
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+  }
+
+  .horizontal .slider-input::-moz-range-track {
+    width: 100%;
+    height: 8px;
+    background: #ddd;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  .vertical .slider-input::-moz-range-track {
+    width: 8px;
+    height: 100%;
+    background: #ddd;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+
+  .slider-value {
+    font-family: monospace;
+    font-size: 1em;
+    padding: 5px 8px;
+    background-color: #f0f0f0;
+    border-radius: 4px;
+    min-width: 40px;
+    text-align: center;
+  }
+  .vertical .slider-value {
+    margin-top: 5px;
+  }
+</style>
diff --git a/src/lib/Tab.svelte b/src/lib/Tab.svelte
new file mode 100644
index 0000000..5d075bf
--- /dev/null
+++ b/src/lib/Tab.svelte
@@ -0,0 +1,44 @@
+<script>
+  import { getContext, onMount, onDestroy } from 'svelte';
+  import { v4 as uuidv4 } from 'uuid';
+
+  export let title = "Tab Title";
+  // No content prop, content will be via slot
+
+  const { registerTab, unregisterTab, isActiveTab } = getContext('tabs');
+  const id = uuidv4();
+
+  let active;
+  let unsubscribeIsActiveTab;
+
+  onMount(() => {
+    registerTab(id, title);
+    unsubscribeIsActiveTab = isActiveTab(id).subscribe(value => {
+      active = value;
+    });
+  });
+
+  onDestroy(() => {
+    if (unsubscribeIsActiveTab) {
+      unsubscribeIsActiveTab();
+    }
+    unregisterTab(id);
+  });
+</script>
+
+{#if active}
+  <div class="tab-content" role="tabpanel" aria-labelledby="tab-title-{id}">
+    <slot></slot>
+  </div>
+{/if}
+
+<style>
+  .tab-content {
+    padding: 15px;
+    border: 1px solid #ddd;
+    border-top: none; /* The active tab title will form the top border */
+    background-color: #fff;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+</style>
diff --git a/src/lib/Tabs.svelte b/src/lib/Tabs.svelte
new file mode 100644
index 0000000..263ef03
--- /dev/null
+++ b/src/lib/Tabs.svelte
@@ -0,0 +1,139 @@
+<script>
+  import { setContext, onMount, afterUpdate } from 'svelte';
+  import { writable, derived } from 'svelte/store';
+
+  const tabs = writable([]); // Store for tab {id, title} objects
+  const activeTabId = writable(null); // Store for the ID of the active tab
+
+  setContext('tabs', {
+    registerTab: (id, title) => {
+      tabs.update(currentTabs => {
+        if (!currentTabs.find(t => t.id === id)) {
+          return [...currentTabs, { id, title }];
+        }
+        return currentTabs;
+      });
+      // If no tab is active and this is the first tab, make it active
+      if (activeTabIdStore === null && tabsStore.length === 1) { // Check store directly
+        activeTabId.set(id);
+      }
+    },
+    unregisterTab: (id) => {
+      tabs.update(currentTabs => currentTabs.filter(t => t.id !== id));
+      activeTabId.update(currentActiveId => {
+        if (currentActiveId === id) {
+          // If the active tab is being unregistered, try to set a new active tab
+          let newActiveId = null;
+          tabs.subscribe(currentTabs => { // get latest tabs
+            if (currentTabs.length > 0) {
+              newActiveId = currentTabs[0].id;
+            }
+          })(); // IIFE to get the value immediately
+          return newActiveId;
+        }
+        return currentActiveId;
+      });
+    },
+    selectTab: (id) => {
+      activeTabId.set(id);
+    },
+    isActiveTab: (id) => derived(activeTabId, $activeId => $activeId === id)
+  });
+
+  let tabsStore = [];
+  tabs.subscribe(value => tabsStore = value);
+
+  let activeTabIdStore;
+  activeTabId.subscribe(value => activeTabIdStore = value);
+
+  // Ensure an active tab is set on mount if not already
+  onMount(() => {
+    if (activeTabIdStore === null && tabsStore.length > 0) {
+      activeTabId.set(tabsStore[0].id);
+    }
+  });
+
+  // Ensure an active tab is selected after tabs are updated (e.g. if current active tab is removed)
+  afterUpdate(() => {
+    if (activeTabIdStore !== null && !tabsStore.find(t => t.id === activeTabIdStore) && tabsStore.length > 0) {
+      activeTabId.set(tabsStore[0].id);
+    } else if (activeTabIdStore === null && tabsStore.length > 0) {
+       activeTabId.set(tabsStore[0].id);
+    }
+  });
+
+</script>
+
+<div class="tabs-container">
+  <div class="tab-titles" role="tablist">
+    {#each tabsStore as tab (tab.id)}
+      <button
+        class="tab-title"
+        class:active={tab.id === activeTabIdStore}
+        on:click={() => activeTabId.set(tab.id)}
+        role="tab"
+        aria-selected={tab.id === activeTabIdStore}
+        aria-controls="tab-content-{tab.id}" <!-- Assuming Tab.svelte content has this id structure -->
+        id="tab-title-{tab.id}"
+      >
+        {tab.title}
+      </button>
+    {/each}
+  </div>
+  <div class="tab-content-area">
+    <slot></slot> <!-- Tab components will render their content here if active -->
+  </div>
+</div>
+
+<style>
+  .tabs-container {
+    /* border: 1px solid #ccc; */
+    border-radius: 4px;
+    overflow: hidden; /* To contain the border-radius of children */
+  }
+
+  .tab-titles {
+    display: flex;
+    background-color: #f0f0f0;
+    border-bottom: 1px solid #ddd;
+  }
+
+  .tab-title {
+    padding: 10px 15px;
+    cursor: pointer;
+    border: none;
+    background-color: transparent;
+    font-size: 1em;
+    position: relative; /* For the active indicator */
+    color: #333;
+    border-right: 1px solid #ddd; /* Separator */
+  }
+  .tab-title:last-child {
+    border-right: none;
+  }
+
+
+  .tab-title:hover {
+    background-color: #e7e7e7;
+  }
+
+  .tab-title.active {
+    background-color: #fff; /* Match content area background */
+    color: #007bff;
+    font-weight: bold;
+    border-bottom: 1px solid #fff; /* Make it look like it merges with content */
+    /* Or a more distinct active style: */
+    /* border-bottom: 2px solid #007bff; */
+    /* margin-bottom: -1px; /* Overlap the container's border-bottom */
+  }
+
+  .tab-title:focus {
+    outline: 1px solid blue;
+    z-index: 1; /* Ensure focus outline is visible over other elements */
+  }
+
+  .tab-content-area {
+    /* Styles for the area where active tab content is shown */
+    /* If Tab.svelte handles its own border/padding, this might not need much */
+  }
+</style>
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..fa05a73
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,8 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.getElementById('app') // Mount to the div with id 'app'
+	// props can be added here if App.svelte expects any
+});
+
+export default app;