commit cc4e467cefdc7fa07dc4007cb16a12db4aada0f9
Author: root <root@LAPTOP-7DVOR6NC>
Date:   Sun Dec 21 09:59:39 2025 -0500

    Initial commit

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..812e4cd
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,29 @@
+# Frontend development
+node_modules/
+*.local
+.env.local
+.env.*.local
+.cache/
+.vite/
+.temp/
+.tmp/
+
+# Frontend build
+/static/
+
+# Backend development
+/lib/vendor/
+coverage/
+phpunit.xml.cache
+.phpunit.result.cache
+.php-cs-fixer.cache
+.phpstan.cache
+.phpactor/
+
+# Editors
+.DS_Store
+.vscode/
+.idea/
+
+# Logs
+*.log
diff --git a/composer.json b/composer.json
new file mode 100644
index 0000000..7b46382
--- /dev/null
+++ b/composer.json
@@ -0,0 +1,9 @@
+{
+  "name": "ktxm/chrono",
+  "type": "project",
+  "autoload": {
+    "psr-4": {
+      "KTXM\\Chrono\\": "lib/"
+    }
+  }
+}
diff --git a/lib/Module.php b/lib/Module.php
new file mode 100644
index 0000000..e594097
--- /dev/null
+++ b/lib/Module.php
@@ -0,0 +1,66 @@
+<?php
+
+namespace KTXM\Chrono;
+
+use KTXF\Module\ModuleBrowserInterface;
+use KTXF\Module\ModuleInstanceAbstract;
+
+/**
+ * Chrono Module - Calendaring and Tasks
+ */
+class Module extends ModuleInstanceAbstract implements ModuleBrowserInterface
+{
+
+    public function __construct()
+    { }
+
+    public function handle(): string
+    {
+        return 'chrono';
+    }
+
+    public function label(): string
+    {
+        return 'Chrono';
+    }
+
+    public function author(): string
+    {
+        return 'Ktrix';
+    }
+
+    public function description(): string
+    {
+        return 'Calendar and task management interface - provides event scheduling, task tracking, and time management capabilities';
+    }
+
+    public function version(): string
+    {
+        return '0.0.1';
+    }
+
+    public function permissions(): array
+    {
+        return [
+            'chrono' => [
+                'label' => 'Access Chrono',
+                'description' => 'View and access the calendar and task management module',
+                'group' => 'Calendar & Tasks'
+            ],
+        ];
+    }
+
+    public function registerBI(): array
+    {
+        return [
+            'handle' => $this->handle(),
+            'namespace' => 'Chrono',
+            'version' => $this->version(),
+            'label' => $this->label(),
+            'author' => $this->author(),
+            'description' => $this->description(),
+            'boot' => 'static/module.mjs',
+        ];
+    }
+
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..2062f4a
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1527 @@
+{
+  "name": "chrono",
+  "version": "0.0.1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "chrono",
+      "version": "0.0.1",
+      "license": "AGPL-3.0-or-later",
+      "dependencies": {
+        "pinia": "^2.3.1",
+        "vue": "^3.5.18",
+        "vue-router": "^4.5.1",
+        "vuetify": "^3.10.2"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-vue": "^6.0.1",
+        "@vue/tsconfig": "^0.7.0",
+        "typescript": "~5.8.3",
+        "vite": "^7.1.2",
+        "vue-tsc": "^3.0.5"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "license": "MIT",
+      "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==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
+      "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.4"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz",
+      "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.10.tgz",
+      "integrity": "sha512-0NFWnA+7l41irNuaSVlLfgNT12caWJVLzp5eAVhZ0z1qpxbockccEt3s+149rE64VUI3Ml2zt8Nv5JVc4QXTsw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.10.tgz",
+      "integrity": "sha512-dQAxF1dW1C3zpeCDc5KqIYuZ1tgAdRXNoZP7vkBIRtKZPYe2xVr/d3SkirklCHudW1B45tGiUlz2pUWDfbDD4w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.10.tgz",
+      "integrity": "sha512-LSQa7eDahypv/VO6WKohZGPSJDq5OVOo3UoFR1E4t4Gj1W7zEQMUhI+lo81H+DtB+kP+tDgBp+M4oNCwp6kffg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.10.tgz",
+      "integrity": "sha512-MiC9CWdPrfhibcXwr39p9ha1x0lZJ9KaVfvzA0Wxwz9ETX4v5CHfF09bx935nHlhi+MxhA63dKRRQLiVgSUtEg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.10.tgz",
+      "integrity": "sha512-JC74bdXcQEpW9KkV326WpZZjLguSZ3DfS8wrrvPMHgQOIEIG/sPXEN/V8IssoJhbefLRcRqw6RQH2NnpdprtMA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.10.tgz",
+      "integrity": "sha512-tguWg1olF6DGqzws97pKZ8G2L7Ig1vjDmGTwcTuYHbuU6TTjJe5FXbgs5C1BBzHbJ2bo1m3WkQDbWO2PvamRcg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.10.tgz",
+      "integrity": "sha512-3ZioSQSg1HT2N05YxeJWYR+Libe3bREVSdWhEEgExWaDtyFbbXWb49QgPvFH8u03vUPX10JhJPcz7s9t9+boWg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.10.tgz",
+      "integrity": "sha512-LLgJfHJk014Aa4anGDbh8bmI5Lk+QidDmGzuC2D+vP7mv/GeSN+H39zOf7pN5N8p059FcOfs2bVlrRr4SK9WxA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.10.tgz",
+      "integrity": "sha512-oR31GtBTFYCqEBALI9r6WxoU/ZofZl962pouZRTEYECvNF/dtXKku8YXcJkhgK/beU+zedXfIzHijSRapJY3vg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.10.tgz",
+      "integrity": "sha512-5luJWN6YKBsawd5f9i4+c+geYiVEw20FVW5x0v1kEMWNq8UctFjDiMATBxLvmmHA4bf7F6hTRaJgtghFr9iziQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.10.tgz",
+      "integrity": "sha512-NrSCx2Kim3EnnWgS4Txn0QGt0Xipoumb6z6sUtl5bOEZIVKhzfyp/Lyw4C1DIYvzeW/5mWYPBFJU3a/8Yr75DQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.10.tgz",
+      "integrity": "sha512-xoSphrd4AZda8+rUDDfD9J6FUMjrkTz8itpTITM4/xgerAZZcFW7Dv+sun7333IfKxGG8gAq+3NbfEMJfiY+Eg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.10.tgz",
+      "integrity": "sha512-ab6eiuCwoMmYDyTnyptoKkVS3k8fy/1Uvq7Dj5czXI6DF2GqD2ToInBI0SHOp5/X1BdZ26RKc5+qjQNGRBelRA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.10.tgz",
+      "integrity": "sha512-NLinzzOgZQsGpsTkEbdJTCanwA5/wozN9dSgEl12haXJBzMTpssebuXR42bthOF3z7zXFWH1AmvWunUCkBE4EA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.10.tgz",
+      "integrity": "sha512-FE557XdZDrtX8NMIeA8LBJX3dC2M8VGXwfrQWU7LB5SLOajfJIxmSdyL/gU1m64Zs9CBKvm4UAuBp5aJ8OgnrA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.10.tgz",
+      "integrity": "sha512-3BBSbgzuB9ajLoVZk0mGu+EHlBwkusRmeNYdqmznmMc9zGASFjSsxgkNsqmXugpPk00gJ0JNKh/97nxmjctdew==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.10.tgz",
+      "integrity": "sha512-QSX81KhFoZGwenVyPoberggdW1nrQZSvfVDAIUXr3WqLRZGZqWk/P4T8p2SP+de2Sr5HPcvjhcJzEiulKgnxtA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.10.tgz",
+      "integrity": "sha512-AKQM3gfYfSW8XRk8DdMCzaLUFB15dTrZfnX8WXQoOUpUBQ+NaAFCP1kPS/ykbbGYz7rxn0WS48/81l9hFl3u4A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.10.tgz",
+      "integrity": "sha512-7RTytDPGU6fek/hWuN9qQpeGPBZFfB4zZgcz2VK2Z5VpdUxEI8JKYsg3JfO0n/Z1E/6l05n0unDCNc4HnhQGig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.10.tgz",
+      "integrity": "sha512-5Se0VM9Wtq797YFn+dLimf2Zx6McttsH2olUBsDml+lm0GOCRVebRWUvDtkY4BWYv/3NgzS8b/UM3jQNh5hYyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.10.tgz",
+      "integrity": "sha512-XkA4frq1TLj4bEMB+2HnI0+4RnjbuGZfet2gs/LNs5Hc7D89ZQBHQ0gL2ND6Lzu1+QVkjp3x1gIcPKzRNP8bXw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.10.tgz",
+      "integrity": "sha512-AVTSBhTX8Y/Fz6OmIVBip9tJzZEUcY8WLh7I59+upa5/GPhh2/aM6bvOMQySspnCCHvFi79kMtdJS1w0DXAeag==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.10.tgz",
+      "integrity": "sha512-fswk3XT0Uf2pGJmOpDB7yknqhVkJQkAQOcW/ccVOtfx05LkbWOaRAtn5SaqXypeKQra1QaEa841PgrSL9ubSPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.10.tgz",
+      "integrity": "sha512-ah+9b59KDTSfpaCg6VdJoOQvKjI33nTaQr4UluQwW7aEwZQsbMCfTmfEO4VyewOxx4RaDT/xCy9ra2GPWmO7Kw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.10.tgz",
+      "integrity": "sha512-QHPDbKkrGO8/cz9LKVnJU22HOi4pxZnZhhA2HYHez5Pz4JeffhDjf85E57Oyco163GnzNCVkZK0b/n4Y0UHcSw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.10.tgz",
+      "integrity": "sha512-9KpxSVFCu0iK1owoez6aC/s/EdUQLDN3adTxGCqxMVhrPDj6bt5dbrHDXUuq+Bs2vATFBBrQS5vdQ/Ed2P+nbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.29",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.29.tgz",
+      "integrity": "sha512-NIJgOsMjbxAXvoGq/X0gD7VPMQ8j9g0BiDaNjVNVjvl+iKXxL3Jre0v31RmBYeLEmkbj2s02v8vFTbUXi5XS2Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.4.tgz",
+      "integrity": "sha512-BTm2qKNnWIQ5auf4deoetINJm2JzvihvGb9R6K/ETwKLql/Bb3Eg2H1FBp1gUb4YGbydMA3jcmQTR73q7J+GAA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.4.tgz",
+      "integrity": "sha512-P9LDQiC5vpgGFgz7GSM6dKPCiqR3XYN1WwJKA4/BUVDjHpYsf3iBEmVz62uyq20NGYbiGPR5cNHI7T1HqxNs2w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.4.tgz",
+      "integrity": "sha512-QRWSW+bVccAvZF6cbNZBJwAehmvG9NwfWHwMy4GbWi/BQIA/laTIktebT2ipVjNncqE6GLPxOok5hsECgAxGZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.4.tgz",
+      "integrity": "sha512-hZgP05pResAkRJxL1b+7yxCnXPGsXU0fG9Yfd6dUaoGk+FhdPKCJ5L1Sumyxn8kvw8Qi5PvQ8ulenUbRjzeCTw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.4.tgz",
+      "integrity": "sha512-xmc30VshuBNUd58Xk4TKAEcRZHaXlV+tCxIXELiE9sQuK3kG8ZFgSPi57UBJt8/ogfhAF5Oz4ZSUBN77weM+mQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.4.tgz",
+      "integrity": "sha512-WdSLpZFjOEqNZGmHflxyifolwAiZmDQzuOzIq9L27ButpCVpD7KzTRtEG1I0wMPFyiyUdOO+4t8GvrnBLQSwpw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.4.tgz",
+      "integrity": "sha512-xRiOu9Of1FZ4SxVbB0iEDXc4ddIcjCv2aj03dmW8UrZIW7aIQ9jVJdLBIhxBI+MaTnGAKyvMwPwQnoOEvP7FgQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.4.tgz",
+      "integrity": "sha512-FbhM2p9TJAmEIEhIgzR4soUcsW49e9veAQCziwbR+XWB2zqJ12b4i/+hel9yLiD8pLncDH4fKIPIbt5238341Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.4.tgz",
+      "integrity": "sha512-4n4gVwhPHR9q/g8lKCyz0yuaD0MvDf7dV4f9tHt0C73Mp8h38UCtSCSE6R9iBlTbXlmA8CjpsZoujhszefqueg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.4.tgz",
+      "integrity": "sha512-u0n17nGA0nvi/11gcZKsjkLj1QIpAuPFQbR48Subo7SmZJnGxDpspyw2kbpuoQnyK+9pwf3pAoEXerJs/8Mi9g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.4.tgz",
+      "integrity": "sha512-0G2c2lpYtbTuXo8KEJkDkClE/+/2AFPdPAbmaHoE870foRFs4pBrDehilMcrSScrN/fB/1HTaWO4bqw+ewBzMQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.4.tgz",
+      "integrity": "sha512-teSACug1GyZHmPDv14VNbvZFX779UqWTsd7KtTM9JIZRDI5NUwYSIS30kzI8m06gOPB//jtpqlhmraQ68b5X2g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.4.tgz",
+      "integrity": "sha512-/MOEW3aHjjs1p4Pw1Xk4+3egRevx8Ji9N6HUIA1Ifh8Q+cg9dremvFCUbOX2Zebz80BwJIgCBUemjqhU5XI5Eg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.4.tgz",
+      "integrity": "sha512-1HHmsRyh845QDpEWzOFtMCph5Ts+9+yllCrREuBR/vg2RogAQGGBRC8lDPrPOMnrdOJ+mt1WLMOC2Kao/UwcvA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.4.tgz",
+      "integrity": "sha512-seoeZp4L/6D1MUyjWkOMRU6/iLmCU2EjbMTyAG4oIOs1/I82Y5lTeaxW0KBfkUdHAWN7j25bpkt0rjnOgAcQcA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.4.tgz",
+      "integrity": "sha512-Wi6AXf0k0L7E2gteNsNHUs7UMwCIhsCTs6+tqQ5GPwVRWMaflqGec4Sd8n6+FNFDw9vGcReqk2KzBDhCa1DLYg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.4.tgz",
+      "integrity": "sha512-dtBZYjDmCQ9hW+WgEkaffvRRCKm767wWhxsFW3Lw86VXz/uJRuD438/XvbZT//B96Vs8oTA8Q4A0AfHbrxP9zw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.4.tgz",
+      "integrity": "sha512-1ox+GqgRWqaB1RnyZXL8PD6E5f7YyRUJYnCqKpNzxzP0TkaUh112NDrR9Tt+C8rJ4x5G9Mk8PQR3o7Ku2RKqKA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.4.tgz",
+      "integrity": "sha512-8GKr640PdFNXwzIE0IrkMWUNUomILLkfeHjXBi/nUvFlpZP+FA8BKGKpacjW6OUUHaNI6sUURxR2U2g78FOHWQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.4.tgz",
+      "integrity": "sha512-AIy/jdJ7WtJ/F6EcfOb2GjR9UweO0n43jNObQMb6oGxkYTfLcnN7vYYpG+CN3lLxrQkzWnMOoNSHTW54pgbVxw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.4.tgz",
+      "integrity": "sha512-UF9KfsH9yEam0UjTwAgdK0anlQ7c8/pWPU2yVjyWcF1I1thABt6WXE47cI71pGiZ8wGvxohBoLnxM04L/wj8mQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.4.tgz",
+      "integrity": "sha512-bf9PtUa0u8IXDVxzRToFQKsNCRz9qLYfR/MpECxl4mRoWYjAeFjgxj1XdZr2M/GNVpT05p+LgQOHopYDlUu6/w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.1.tgz",
+      "integrity": "sha512-+MaE752hU0wfPFJEUAIxqw18+20euHHdxVtMvbFcOEpjEyfqXH/5DCoTHiVJ0J29EhTJdoTkjEv5YBKU9dnoTw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "1.0.0-beta.29"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@volar/language-core": {
+      "version": "2.4.23",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.23.tgz",
+      "integrity": "sha512-hEEd5ET/oSmBC6pi1j6NaNYRWoAiDhINbT8rmwtINugR39loROSlufGdYMF9TaKGfz+ViGs1Idi3mAhnuPcoGQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.23"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.23",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.23.tgz",
+      "integrity": "sha512-Z1Uc8IB57Lm6k7q6KIDu/p+JWtf3xsXJqAX/5r18hYOTpJyBn0KXUR8oTJ4WFYOcDzWC9n3IflGgHowx6U6z9Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.23",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.23.tgz",
+      "integrity": "sha512-lAB5zJghWxVPqfcStmAP1ZqQacMpe90UrP5RJ3arDyrhy4aCUQqmxPPLB2PWDKugvylmO41ljK7vZ+t6INMTag==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.23",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.22.tgz",
+      "integrity": "sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.4",
+        "@vue/shared": "3.5.22",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.22.tgz",
+      "integrity": "sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.22",
+        "@vue/shared": "3.5.22"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.22.tgz",
+      "integrity": "sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.4",
+        "@vue/compiler-core": "3.5.22",
+        "@vue/compiler-dom": "3.5.22",
+        "@vue/compiler-ssr": "3.5.22",
+        "@vue/shared": "3.5.22",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.19",
+        "postcss": "^8.5.6",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.22.tgz",
+      "integrity": "sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.22",
+        "@vue/shared": "3.5.22"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/language-core": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.1.1.tgz",
+      "integrity": "sha512-qjMY3Q+hUCjdH+jLrQapqgpsJ0rd/2mAY02lZoHG3VFJZZZKLjAlV+Oo9QmWIT4jh8+Rx8RUGUi++d7T9Wb6Mw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.23",
+        "@vue/compiler-dom": "^3.5.0",
+        "@vue/shared": "^3.5.0",
+        "alien-signals": "^3.0.0",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1",
+        "picomatch": "^4.0.2"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.22.tgz",
+      "integrity": "sha512-f2Wux4v/Z2pqc9+4SmgZC1p73Z53fyD90NFWXiX9AKVnVBEvLFOWCEgJD3GdGnlxPZt01PSlfmLqbLYzY/Fw4A==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.22"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.22.tgz",
+      "integrity": "sha512-EHo4W/eiYeAzRTN5PCextDUZ0dMs9I8mQ2Fy+OkzvRPUYQEyK9yAjbasrMCXbLNhF7P0OUyivLjIy0yc6VrLJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.22",
+        "@vue/shared": "3.5.22"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.22.tgz",
+      "integrity": "sha512-Av60jsryAkI023PlN7LsqrfPvwfxOd2yAwtReCjeuugTJTkgrksYJJstg1e12qle0NarkfhfFu1ox2D+cQotww==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.22",
+        "@vue/runtime-core": "3.5.22",
+        "@vue/shared": "3.5.22",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.22.tgz",
+      "integrity": "sha512-gXjo+ao0oHYTSswF+a3KRHZ1WszxIqO7u6XwNHqcqb9JfyIL/pbWrrh/xLv7jeDqla9u+LK7yfZKHih1e1RKAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.22",
+        "@vue/shared": "3.5.22"
+      },
+      "peerDependencies": {
+        "vue": "3.5.22"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.22.tgz",
+      "integrity": "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/tsconfig": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@vue/tsconfig/-/tsconfig-0.7.0.tgz",
+      "integrity": "sha512-ku2uNz5MaZ9IerPPUyOHzyjhXoX2kVJaVf7hL315DC17vS6IiZRmmCPfggNbU16QTvM80+uYYy3eYJB59WCtvg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": "5.x",
+        "vue": "^3.4.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/alien-signals": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.0.0.tgz",
+      "integrity": "sha512-JHoRJf18Y6HN4/KZALr3iU+0vW9LKG+8FMThQlbn4+gv8utsLIkwpomjElGPccGeNwh0FI2HN6BLnyFLo6OyLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.10.tgz",
+      "integrity": "sha512-9RiGKvCwaqxO2owP61uQ4BgNborAQskMR6QusfWzQqv7AZOg5oGehdY2pRJMTKuwxd1IDBP4rSbI5lHzU7SMsQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.10",
+        "@esbuild/android-arm": "0.25.10",
+        "@esbuild/android-arm64": "0.25.10",
+        "@esbuild/android-x64": "0.25.10",
+        "@esbuild/darwin-arm64": "0.25.10",
+        "@esbuild/darwin-x64": "0.25.10",
+        "@esbuild/freebsd-arm64": "0.25.10",
+        "@esbuild/freebsd-x64": "0.25.10",
+        "@esbuild/linux-arm": "0.25.10",
+        "@esbuild/linux-arm64": "0.25.10",
+        "@esbuild/linux-ia32": "0.25.10",
+        "@esbuild/linux-loong64": "0.25.10",
+        "@esbuild/linux-mips64el": "0.25.10",
+        "@esbuild/linux-ppc64": "0.25.10",
+        "@esbuild/linux-riscv64": "0.25.10",
+        "@esbuild/linux-s390x": "0.25.10",
+        "@esbuild/linux-x64": "0.25.10",
+        "@esbuild/netbsd-arm64": "0.25.10",
+        "@esbuild/netbsd-x64": "0.25.10",
+        "@esbuild/openbsd-arm64": "0.25.10",
+        "@esbuild/openbsd-x64": "0.25.10",
+        "@esbuild/openharmony-arm64": "0.25.10",
+        "@esbuild/sunos-x64": "0.25.10",
+        "@esbuild/win32-arm64": "0.25.10",
+        "@esbuild/win32-ia32": "0.25.10",
+        "@esbuild/win32-x64": "0.25.10"
+      }
+    },
+    "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==",
+      "license": "MIT"
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "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,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.19",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
+      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pinia": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.1.tgz",
+      "integrity": "sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.52.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.4.tgz",
+      "integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.52.4",
+        "@rollup/rollup-android-arm64": "4.52.4",
+        "@rollup/rollup-darwin-arm64": "4.52.4",
+        "@rollup/rollup-darwin-x64": "4.52.4",
+        "@rollup/rollup-freebsd-arm64": "4.52.4",
+        "@rollup/rollup-freebsd-x64": "4.52.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.52.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.52.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.52.4",
+        "@rollup/rollup-linux-arm64-musl": "4.52.4",
+        "@rollup/rollup-linux-loong64-gnu": "4.52.4",
+        "@rollup/rollup-linux-ppc64-gnu": "4.52.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.52.4",
+        "@rollup/rollup-linux-riscv64-musl": "4.52.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.52.4",
+        "@rollup/rollup-linux-x64-gnu": "4.52.4",
+        "@rollup/rollup-linux-x64-musl": "4.52.4",
+        "@rollup/rollup-openharmony-arm64": "4.52.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.52.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.52.4",
+        "@rollup/rollup-win32-x64-gnu": "4.52.4",
+        "@rollup/rollup-win32-x64-msvc": "4.52.4",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/vite": {
+      "version": "7.1.9",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.9.tgz",
+      "integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "lightningcss": "^1.21.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
+      "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vue": {
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.22.tgz",
+      "integrity": "sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.22",
+        "@vue/compiler-sfc": "3.5.22",
+        "@vue/runtime-dom": "3.5.22",
+        "@vue/server-renderer": "3.5.22",
+        "@vue/shared": "3.5.22"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
+      "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/vue-tsc": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.1.1.tgz",
+      "integrity": "sha512-fyixKxFniOVgn+L/4+g8zCG6dflLLt01Agz9jl3TO45Bgk87NZJRmJVPsiK+ouq3LB91jJCbOV+pDkzYTxbI7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/typescript": "2.4.23",
+        "@vue/language-core": "3.1.1"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
+      }
+    },
+    "node_modules/vuetify": {
+      "version": "3.10.5",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.10.5.tgz",
+      "integrity": "sha512-3h1onfjcj04B+LJ0cXvGrOOe6C3652JAlyUAuGKgQXwhP9Oe1hAfdM6+svXR5Dt1xC39lQEGqJdacZtwisUEoQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/johnleider"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.7",
+        "vite-plugin-vuetify": ">=2.1.0",
+        "vue": "^3.5.0",
+        "webpack-plugin-vuetify": ">=3.1.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        },
+        "vite-plugin-vuetify": {
+          "optional": true
+        },
+        "webpack-plugin-vuetify": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..919aa6b
--- /dev/null
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "chrono",
+  "description": "Ktrix Chrono Module - Calendaring and Tasks",
+  "version": "0.0.1",
+  "private": true,
+  "license": "AGPL-3.0-or-later",
+  "author": "Ktrix",
+  "type": "module",
+  "scripts": {
+    "build": "vite build --mode production --config vite.config.ts",
+    "dev": "vite build --mode development --config vite.config.ts",
+    "watch": "vite build --mode development --watch --config vite.config.ts",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "pinia": "^2.3.1",
+    "vue": "^3.5.18",
+    "vue-router": "^4.5.1",
+    "vuetify": "^3.10.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.7.0",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.2",
+    "vue-tsc": "^3.0.5"
+  }
+}
diff --git a/src/components/AgendaView.vue b/src/components/AgendaView.vue
new file mode 100644
index 0000000..d3a0ba3
--- /dev/null
+++ b/src/components/AgendaView.vue
@@ -0,0 +1,226 @@
+<template>
+  <div class="agenda-view">
+    <div class="view-controls">
+      <div class="view-navigation">
+        <v-btn size="x-small" variant="text" icon="mdi-chevron-left" @click="previousPeriod" />
+        <v-btn size="x-small" variant="tonal" @click="goToToday">Today</v-btn>
+        <v-btn size="x-small" variant="text" icon="mdi-chevron-right" @click="nextPeriod" />
+        <span class="current-period">{{ dateRangeLabel }}</span>
+      </div>
+      <v-spacer />
+      <div class="view-selector">
+        <v-btn size="x-small" variant="text" @click="setSpan('1d')" :color="selectedSpan === '1d' ? 'primary' : undefined">1D</v-btn>
+        <v-btn size="x-small" variant="text" @click="setSpan('3d')" :color="selectedSpan === '3d' ? 'primary' : undefined">3D</v-btn>
+        <v-btn size="x-small" variant="text" @click="setSpan('1w')" :color="selectedSpan === '1w' ? 'primary' : undefined">1W</v-btn>
+        <v-btn size="x-small" variant="text" @click="setSpan('2w')" :color="selectedSpan === '2w' ? 'primary' : undefined">2W</v-btn>
+        <v-btn size="x-small" variant="text" @click="setSpan('3w')" :color="selectedSpan === '3w' ? 'primary' : undefined">3W</v-btn>
+        <v-btn size="x-small" variant="text" @click="setSpan('1m')" :color="selectedSpan === '1m' ? 'primary' : undefined">1M</v-btn>
+      </div>
+    </div>
+    <v-list class="agenda-list">
+      <template v-if="Object.keys(groupedEvents).length === 0">
+        <v-list-item>
+          <v-list-item-title class="text-center text-medium-emphasis">No events in this period</v-list-item-title>
+        </v-list-item>
+      </template>
+      <template v-for="(dayEvents, date) in groupedEvents" :key="date">
+        <v-list-subheader>{{ formatAgendaDate(date) }}</v-list-subheader>
+        <v-list-item
+          v-for="entity in dayEvents"
+          :key="entity.id"
+          @click="$emit('event-click', entity)"
+        >
+          <template #prepend>
+            <v-icon :color="getEventColor(entity)">mdi-circle</v-icon>
+          </template>
+          <v-list-item-title>{{ entity.data?.label || 'Untitled' }}</v-list-item-title>
+          <v-list-item-subtitle>
+            {{ entity.data?.allDay ? 'All day' : `${entity.data?.startsOn ? formatTime(new Date(entity.data.startsOn)) : ''} - ${entity.data?.endsOn ? formatTime(new Date(entity.data.endsOn)) : ''}` }}
+          </v-list-item-subtitle>
+        </v-list-item>
+      </template>
+    </v-list>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+
+type SpanType = '1d' | '3d' | '1w' | '2w' | '3w' | '1m';
+
+const props = defineProps<{
+  events: any[];
+  calendars: any[];
+  currentDate?: Date;
+  initialSpan?: SpanType;
+}>();
+
+defineEmits<{
+  'event-click': [event: any];
+}>();
+
+const selectedSpan = ref<SpanType>(props.initialSpan ?? '1w');
+const localDate = ref(new Date(props.currentDate ?? new Date()));
+
+// Watch for external date changes (e.g., from mini calendar)
+watch(() => props.currentDate, (newDate) => {
+  if (newDate) {
+    localDate.value = new Date(newDate);
+  }
+});
+
+function setSpan(span: SpanType) {
+  selectedSpan.value = span;
+}
+
+function getSpanDays(): number {
+  switch (selectedSpan.value) {
+    case '1d': return 1;
+    case '3d': return 3;
+    case '1w': return 7;
+    case '2w': return 14;
+    case '3w': return 21;
+    case '1m': return 30;
+    default: return 7;
+  }
+}
+
+function previousPeriod() {
+  const date = new Date(localDate.value);
+  date.setDate(date.getDate() - getSpanDays());
+  localDate.value = date;
+}
+
+function nextPeriod() {
+  const date = new Date(localDate.value);
+  date.setDate(date.getDate() + getSpanDays());
+  localDate.value = date;
+}
+
+function goToToday() {
+  localDate.value = new Date();
+}
+
+const dateRange = computed(() => {
+  const start = new Date(localDate.value);
+  start.setHours(0, 0, 0, 0);
+  
+  const end = new Date(start);
+  end.setDate(end.getDate() + getSpanDays() - 1);
+  end.setHours(23, 59, 59, 999);
+  
+  return { start, end };
+});
+
+const dateRangeLabel = computed(() => {
+  const { start, end } = dateRange.value;
+  const formatOptions: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric' };
+  
+  if (getSpanDays() === 1) {
+    return start.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
+  }
+  
+  if (start.getMonth() === end.getMonth()) {
+    return `${start.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} - ${end.getDate()}, ${start.getFullYear()}`;
+  }
+  
+  return `${start.toLocaleDateString('en-US', formatOptions)} - ${end.toLocaleDateString('en-US', formatOptions)}, ${end.getFullYear()}`;
+});
+
+const groupedEvents = computed(() => {
+  const grouped: Record<string, any[]> = {};
+  const { start, end } = dateRange.value;
+  
+  const filtered = props.events.filter(e => {
+    if (!e.data?.startsOn) return false;
+    const eventStart = new Date(e.data.startsOn);
+    return eventStart >= start && eventStart <= end;
+  });
+  
+  const sorted = filtered.sort((a, b) => 
+    new Date(a.data.startsOn).getTime() - new Date(b.data.startsOn).getTime()
+  );
+  
+  sorted.forEach(entity => {
+    const dateKey = new Date(entity.data.startsOn).toDateString();
+    if (!grouped[dateKey]) {
+      grouped[dateKey] = [];
+    }
+    grouped[dateKey].push(entity);
+  });
+  
+  return grouped;
+});
+
+function getEventColor(entity: any): string {
+  if (entity.data?.color) return entity.data.color;
+  const calendar = props.calendars.find(cal => cal.id === entity.in);
+  return calendar?.color || '#1976D2';
+}
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
+}
+
+function formatAgendaDate(dateString: string): string {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('en-US', { 
+    weekday: 'long', 
+    year: 'numeric', 
+    month: 'long', 
+    day: 'numeric' 
+  });
+}
+</script>
+
+<style scoped>
+.agenda-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.view-controls {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-bottom: 1px solid rgb(var(--v-border-color));
+  background-color: rgb(var(--v-theme-surface));
+  flex-shrink: 0;
+}
+
+.view-navigation {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.current-period {
+  font-size: 14px;
+  font-weight: 500;
+  margin-left: 8px;
+  white-space: nowrap;
+}
+
+.view-selector {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.agenda-list {
+  flex: 1;
+  overflow-y: auto;
+  background-color: transparent;
+}
+
+.agenda-list :deep(.v-list-item) {
+  margin: 4px 8px;
+  border-radius: 4px;
+  background-color: transparent;
+}
+
+.agenda-list :deep(.v-list-item:hover) {
+  background-color: rgba(var(--v-theme-primary), 0.04);
+}
+</style>
diff --git a/src/components/CalendarView.vue b/src/components/CalendarView.vue
new file mode 100644
index 0000000..6726249
--- /dev/null
+++ b/src/components/CalendarView.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="calendar-view-container">
+    <EventViewerPopup
+      :event="hoveredEvent"
+      :position="popupPosition"
+      :visible="showPopup"
+      @click="$emit('event-click', $event)"
+    />
+    <MonthView
+      v-if="view === 'month'"
+      :current-date="currentDate"
+      :events="events"
+      :calendars="calendars"
+      @event-click="$emit('event-click', $event)"
+      @date-click="$emit('date-click', $event)"
+      @event-hover="handleEventHover"
+      @event-hover-end="hidePopup"
+    />
+    <DaysView
+      v-else-if="view === 'days'"
+      :current-date="currentDate"
+      :events="events"
+      :calendars="calendars"
+      @event-click="$emit('event-click', $event)"
+      @date-click="$emit('date-click', $event)"
+      @event-hover="handleEventHover"
+      @event-hover-end="hidePopup"
+    />
+    <AgendaView
+      v-else-if="view === 'agenda'"
+      :events="events"
+      :calendars="calendars"
+      @event-click="$emit('event-click', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import MonthView from './MonthView.vue';
+import DaysView from './DaysView.vue';
+import AgendaView from './AgendaView.vue';
+import EventViewerPopup from './EventViewerPopup.vue';
+
+defineProps<{
+  view: 'days' | 'month' | 'agenda';
+  currentDate: Date;
+  events: any[];
+  calendars: any[];
+}>();
+
+defineEmits<{
+  'event-click': [event: any];
+  'date-click': [date: Date];
+}>();
+
+// Popup state
+const hoveredEvent = ref<any>(null);
+const popupPosition = ref({ x: 0, y: 0 });
+const showPopup = ref(false);
+let hideTimeout: NodeJS.Timeout | null = null;
+
+function handleEventHover(data: { event: MouseEvent; entity: any }) {
+  if (hideTimeout) {
+    clearTimeout(hideTimeout);
+    hideTimeout = null;
+  }
+  hoveredEvent.value = data.entity;
+  popupPosition.value = {
+    x: data.event.clientX,
+    y: data.event.clientY
+  };
+  showPopup.value = true;
+}
+
+function hidePopup() {
+  hideTimeout = setTimeout(() => {
+    showPopup.value = false;
+    hoveredEvent.value = null;
+  }, 200);
+}
+</script>
+
+<style scoped>
+.calendar-view-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.calendar-view-container > * {
+  flex: 1;
+  min-height: 0;
+}
+</style>
diff --git a/src/components/CollectionEditor.vue b/src/components/CollectionEditor.vue
new file mode 100644
index 0000000..e01e4e5
--- /dev/null
+++ b/src/components/CollectionEditor.vue
@@ -0,0 +1,329 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useServicesStore } from '@ChronoManager/stores/servicesStore'
+import { CollectionObject } from '@ChronoManager/models/collection'
+import { ServiceObject } from '@ChronoManager/models/service'
+
+// Store
+const servicesStore = useServicesStore()
+
+// Props
+const props = defineProps<{
+  modelValue: boolean
+  collection: CollectionObject | null
+  mode: 'create' | 'edit'
+  type?: 'calendar' | 'tasklist'
+}>()
+
+// Emits
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'save': [collection: CollectionObject, service: ServiceObject]
+  'delete': [collection: CollectionObject]
+}>()
+
+// State
+const services = ref<ServiceObject[]>([])
+const editingCollection = ref<CollectionObject | null>(null)
+const editingCollectionService = ref<ServiceObject | null>(null)
+const editingCollectionValidated = ref(false)
+const colorMenuOpen = ref(false)
+const colorOptions = [
+  '#FF6B6B', '#FF8E4D', '#FFB347', '#FFD166', '#E5FF7F', '#B5E86D',
+  '#7CD992', '#46CBB7', '#2ECCCB', '#27B1E6', '#2196F3', '#2E6FE3',
+  '#3A4CC9', '#5A3FC0', '#7F3FBF', '#B339AE', '#DE3A9B', '#FF6FB7'
+]
+
+const COLORS_PER_ROW = 6
+const colorRows = computed(() => {
+  const rows: string[][] = []
+  for (let i = 0; i < colorOptions.length; i += COLORS_PER_ROW) {
+    rows.push(colorOptions.slice(i, i + COLORS_PER_ROW))
+  }
+  return rows
+})
+
+// Computed
+const dialogOpen = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value)
+})
+
+const dialogTitle = computed(() => {
+  const itemType = props.type === 'tasklist' ? 'Task List' : 'Calendar'
+  return props.mode === 'create' ? `Create New ${itemType}` : `Edit ${itemType}`
+})
+
+const dialogIcon = computed(() => {
+  return props.type === 'tasklist' ? 'mdi-checkbox-marked-outline' : 'mdi-calendar'
+})
+
+// Functions
+const onOpen = async () => {
+  if (services.value.length === 0) {
+    services.value = await servicesStore.list()
+  }
+
+  if (!props.collection) {
+    return
+  }
+
+  // Clone the collection to avoid mutating the original
+  editingCollection.value = props.collection.clone()
+  
+  if (props.collection.id !== null) {
+    // Edit mode - find the service
+    editingCollectionService.value = services.value.find(s =>
+      s.provider === props.collection!.provider && s.id === props.collection!.service
+    ) || null
+  } else {
+    // Create mode - use first service that can create
+    editingCollectionService.value = services.value.filter(s => s.capabilities?.CollectionCreate)[0] || null
+  }
+}
+
+const onSave = () => {
+  if (!editingCollection.value || !editingCollectionService.value) {
+    return
+  }
+  emit('save', editingCollection.value, editingCollectionService.value)
+  dialogOpen.value = false
+}
+
+const onDelete = () => {
+  if (!editingCollection.value) {
+    return
+  }
+  emit('delete', editingCollection.value)
+  dialogOpen.value = false
+}
+
+const onColorSelect = (color: string | null, closeMenu = true) => {
+  if (!editingCollection.value) {
+    return
+  }
+  editingCollection.value.color = color
+  if (closeMenu) {
+    colorMenuOpen.value = false
+  }
+}
+
+const onCustomColorChange = (color: string) => {
+  if (!color) {
+    return
+  }
+  onColorSelect(color, false)
+}
+
+// Watch for dialog opening
+watch(() => props.modelValue, async (newValue) => {
+  if (newValue) {
+    await onOpen()
+  }
+})
+</script>
+
+<template>
+  <v-dialog
+    v-model="dialogOpen"
+    max-width="500"
+    persistent
+  >
+    <v-card>
+      <v-card-title>
+        <v-icon :icon="dialogIcon" class="mr-2" />
+        {{ dialogTitle }}
+      </v-card-title>
+
+      <v-divider />
+
+      <v-card-text v-if="editingCollection" class="pt-4">
+        <v-form v-model="editingCollectionValidated" ref="collectionEditor">
+          <v-combobox v-show="mode === 'create' && services.length > 1"
+            v-model="editingCollectionService"
+            label="Service"
+            :items="services.filter(s => s.capabilities?.CollectionCreate)"
+            item-title="label"
+            item-value="id"
+            required
+            :rules="[(v: ServiceObject) => !!v || 'Service is required']"
+          />
+
+          <div v-if="mode === 'edit'" class="mb-4"><strong>Service:</strong> {{ editingCollection.service }}</div>
+
+          <v-text-field
+            v-model="editingCollection.label"
+            label="Label"
+            required
+            :rules="[(v: string) => !!v || 'Label is required']"
+          >
+            <template #append-inner>
+              <v-menu
+                v-model="colorMenuOpen"
+                :close-on-content-click="false"
+                location="bottom end"
+                offset="8"
+              >
+                <template #activator="{ props: menuProps }">
+                  <v-btn
+                    v-bind="menuProps"
+                    icon
+                    variant="text"
+                    size="small"
+                    :style="{ color: editingCollection.color || 'var(--v-theme-on-surface)' }"
+                    aria-label="Select color"
+                    title="Select color"
+                  >
+                    <v-icon icon="mdi-palette" />
+                  </v-btn>
+                </template>
+
+                <v-card class="pa-2 color-menu" elevation="4">
+                  <div class="color-menu-header">
+                    <v-btn
+                      variant="text"
+                      size="small"
+                      class="color-menu-header__close"
+                      aria-label="Close"
+                      title="Close"
+                      @click="colorMenuOpen = false"
+                    >
+                      <v-icon icon="mdi-close" />
+                    </v-btn>
+                  </div>
+                  <div class="color-menu-body__presets">
+                    <div
+                      v-for="(rowColors, rowIndex) in colorRows"
+                      :key="`color-row-${rowIndex}`"
+                      class="color-menu-body__row"
+                    >
+                      <v-btn
+                        v-for="color in rowColors"
+                        :key="color"
+                        variant="flat"
+                        size="small"
+                        class="color-menu-body__presets--swatch"
+                        :class="{ 'color-menu-body__presets--swatch--active': editingCollection.color === color }"
+                        :style="{ backgroundColor: color }"
+                        @click="onColorSelect(color)">
+                        <v-icon
+                          v-if="editingCollection.color === color"
+                          icon="mdi-check"
+                          size="x-small"
+                          color="white"
+                        />
+                      </v-btn>
+                    </div>
+                  </div>
+
+                  <div class="color-menu-body__picker">
+                    <v-color-picker
+                      v-model="editingCollection.color"
+                      mode="hex"
+                      hide-canvas
+                      width="100%"
+                      elevation="0"
+                      @update:model-value="onCustomColorChange"
+                    />
+                  </div>
+                </v-card>
+              </v-menu>
+            </template>
+          </v-text-field>
+
+          <v-textarea
+            v-model="editingCollection.description"
+            label="Description"
+            rows="2"
+          />
+
+          <v-row>
+            <v-col v-if="mode === 'edit'" cols="6">
+              <v-switch
+                v-model="editingCollection.enabled"
+                label="Enabled"
+                color="primary"
+              />
+            </v-col>
+          </v-row>
+        </v-form>
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions class="justify-space-between align-center">
+        <div>
+          <v-btn
+            v-if="mode === 'edit' && editingCollectionService?.capabilities?.CollectionDestroy"
+            color="error"
+            variant="text"
+            @click="onDelete"
+          >
+            Delete
+          </v-btn>
+        </div>
+
+        <div class="d-flex align-center">
+          <v-btn
+            variant="text"
+            @click="dialogOpen = false"
+          >
+            Cancel
+          </v-btn>
+          <v-btn
+            color="primary"
+            variant="flat"
+            :disabled="!editingCollectionValidated"
+            @click="onSave"
+          >
+            {{ mode === 'create' ? 'Create' : 'Save' }}
+          </v-btn>
+        </div>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+.color-menu {
+  max-width: 320px;
+}
+
+.color-menu-header {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.color-menu-header__close {
+  margin-left: auto;
+}
+
+.color-menu-body__presets {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.color-menu-body__row {
+  display: flex;
+  gap: 8px;
+}
+
+.color-menu-body__picker {
+  margin-top: 20px;
+}
+
+.color-menu-body__presets--swatch {
+  min-width: 32px !important;
+  height: 32px !important;
+  padding: 0 !important;
+  border-radius: 4px !important;
+  position: relative;
+}
+
+.color-menu-body__presets--swatch--active {
+  outline: 2px solid rgba(var(--v-theme-on-surface), 0.5);
+  outline-offset: 2px;
+}
+</style>
diff --git a/src/components/CollectionList.vue b/src/components/CollectionList.vue
new file mode 100644
index 0000000..7d8ad58
--- /dev/null
+++ b/src/components/CollectionList.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useCollectionsStore } from '@ChronoManager/stores/collectionsStore'
+import { CollectionObject } from '@ChronoManager/models/collection';
+
+// Store
+const collectionsStore = useCollectionsStore()
+
+// Props
+const props = defineProps<{
+  selectedCollection?: CollectionObject | null
+  type?: 'calendar' | 'tasklist'
+}>()
+
+// Emits
+const emit = defineEmits<{
+  'select': [collection: CollectionObject]
+  'edit': [collection: CollectionObject]
+  'toggle-visibility': [collection: CollectionObject]
+}>()
+
+// State
+const loading = ref(false)
+const collections = ref<CollectionObject[]>([])
+
+// Computed
+const filteredCollections = computed(() => {
+  if (!props.type) return collections.value
+  
+  return collections.value.filter(collection => {
+    if (props.type === 'calendar') {
+      return collection.contents?.event
+    } else if (props.type === 'tasklist') {
+      return collection.contents?.task
+    }
+    return true
+  })
+})
+
+const displayTitle = computed(() => {
+  if (props.type === 'calendar') return 'Calendars'
+  if (props.type === 'tasklist') return 'Task Lists'
+  return 'Collections'
+})
+
+const displayIcon = computed(() => {
+  if (props.type === 'calendar') return 'mdi-calendar'
+  if (props.type === 'tasklist') return 'mdi-checkbox-marked-outline'
+  return 'mdi-folder'
+})
+
+// Lifecycle
+onMounted(async () => {
+  loading.value = true
+  try {
+    collections.value = await collectionsStore.list()
+  } catch (error) {
+    console.error('[Chrono] - Failed to load collections:', error)
+  }
+  loading.value = false
+})
+
+// Functions
+const onCollectionSelect = (collection: CollectionObject) => {
+  console.log('[Chrono] - Collection selected', collection)
+  emit('select', collection)
+}
+
+const onCollectionEdit = (collection: CollectionObject) => {
+  emit('edit', collection)
+}
+
+const onToggleVisibility = (collection: CollectionObject) => {
+  collection.enabled = !collection.enabled
+  emit('toggle-visibility', collection)
+}
+
+// Expose refresh method
+defineExpose({
+  async refresh() {
+    loading.value = true
+    try {
+      collections.value = await collectionsStore.list()
+    } catch (error) {
+      console.error('[Chrono] - Failed to load collections:', error)
+    }
+    loading.value = false
+  }
+})
+</script>
+
+<template>
+  <div class="collection-selector">
+    <div class="collection-selector-header">
+      <div class="d-flex align-center mb-3">
+        <v-icon :icon="displayIcon" size="small" class="mr-2" />
+        <span class="text-subtitle-2 font-weight-bold">{{ displayTitle }}</span>
+      </div>
+    </div>
+    
+    <v-divider class="my-2" />
+    
+    <div class="collection-selector-content">
+      <v-progress-linear v-if="loading" indeterminate color="primary" />
+      
+      <v-list v-else density="compact" nav class="pa-0">
+        <v-list-item
+          v-for="collection in filteredCollections"
+          :key="collection.id"
+          :value="collection.id"
+          :active="selectedCollection?.id === collection.id"
+          @click="onCollectionSelect(collection)"
+          rounded="lg"
+          class="mb-1"
+        >
+          <template #prepend>
+            <v-checkbox-btn
+              :model-value="collection.enabled !== false"
+              :color="collection.color || 'primary'"
+              hide-details
+              @click.stop="onToggleVisibility(collection)"
+            />
+          </template>
+
+          <v-list-item-title>{{ collection.label || 'Unnamed Collection' }}</v-list-item-title>
+          
+          <template #append>
+            <div class="d-flex align-center">
+              <v-icon
+                :color="collection.color || 'primary'"
+                size="small"
+                class="mr-1"
+              >mdi-circle</v-icon>
+              <v-btn
+                icon="mdi-pencil"
+                size="x-small"
+                variant="text"
+                @click.stop="onCollectionEdit(collection)"
+              />
+            </div>
+          </template>
+        </v-list-item>
+      </v-list>
+      
+      <v-alert v-if="!loading && filteredCollections.length === 0" type="info" variant="tonal" density="compact" class="mt-2">
+        No {{ displayTitle.toLowerCase() }} found
+      </v-alert>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.collection-selector {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.collection-selector-header {
+  flex-shrink: 0;
+}
+
+.collection-selector-content {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.v-list-item {
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/DaysView.vue b/src/components/DaysView.vue
new file mode 100644
index 0000000..70981b3
--- /dev/null
+++ b/src/components/DaysView.vue
@@ -0,0 +1,580 @@
+<template>
+  <div class="days-view">
+    <div class="view-controls">
+      <div class="view-navigation">
+        <v-btn size="x-small" variant="text" icon="mdi-chevron-left" @click="previousPeriod" />
+        <v-btn size="x-small" variant="tonal" @click="goToToday">Today</v-btn>
+        <v-btn size="x-small" variant="text" icon="mdi-chevron-right" @click="nextPeriod" />
+        <span class="current-period">{{ dateRangeLabel }}</span>
+      </div>
+      <v-spacer />
+      <div class="view-selector">
+        <v-btn size="x-small" variant="text" @click="setDays(1)" :color="daysCount === 1 ? 'primary' : undefined">1D</v-btn>
+        <v-btn size="x-small" variant="text" @click="setDays(3)" :color="daysCount === 3 ? 'primary' : undefined">3D</v-btn>
+        <v-btn size="x-small" variant="text" @click="setDays(5)" :color="daysCount === 5 ? 'primary' : undefined">5D</v-btn>
+        <v-btn size="x-small" variant="text" @click="setDays(7)" :color="daysCount === 7 ? 'primary' : undefined">7D</v-btn>
+        <v-btn size="x-small" variant="text" @click="setDays(9)" :color="daysCount === 9 ? 'primary' : undefined">9D</v-btn>
+        <v-btn size="x-small" variant="text" @click="setDays(11)" :color="daysCount === 11 ? 'primary' : undefined">11D</v-btn>
+        <v-btn size="x-small" variant="text" @click="setDays(14)" :color="daysCount === 14 ? 'primary' : undefined">14D</v-btn>
+      </div>
+    </div>
+    <div class="days-grid">
+      <!-- Fixed Headers Row -->
+      <div class="day-headers">
+        <div class="time-header-spacer"></div>
+        <div class="day-headers-row">
+          <div v-for="day in visibleDates" :key="day.toISOString() + '-header'" class="day-header-cell" :class="{ 'single-day': daysCount === 1 }">
+            <span class="day-name">{{ formatWeekDay(day) }}</span>
+            <span class="day-number" :class="{ 'today': isToday(day) }">{{ day.getDate() }}</span>
+          </div>
+        </div>
+      </div>
+      
+      <!-- All-Day Events Section -->
+      <div v-if="allDaySegments.laneCount > 0" class="all-day-section">
+        <div class="all-day-label">
+          <span>All day</span>
+        </div>
+        <div class="all-day-events-container" :style="{ height: `${allDaySegments.laneCount * 24 + 4}px` }">
+          <div class="all-day-columns">
+            <div v-for="day in visibleDates" :key="day.toISOString() + '-allday'" class="all-day-column" :class="{ 'single-day': daysCount === 1 }"></div>
+          </div>
+          <div class="all-day-events-overlay">
+            <div
+              v-for="segment in allDaySegments.segments"
+              :key="segment.entity.id"
+              class="all-day-event"
+              :class="{
+                'is-start': segment.isStart,
+                'is-end': segment.isEnd,
+              }"
+              :style="getAllDayEventStyle(segment)"
+              @click="emit('event-click', segment.entity)"
+              @mouseenter="emit('event-hover', { event: $event, entity: segment.entity })"
+              @mouseleave="emit('event-hover-end')"
+            >
+              <span v-if="segment.isStart" class="event-label">{{ segment.entity.data?.label || 'Untitled' }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Scrollable Content -->
+      <div class="days-content">
+        <div class="time-column">
+          <div v-for="hour in 24" :key="hour" class="time-slot">
+            {{ formatHour(hour - 1) }}
+          </div>
+        </div>
+        <div class="days-columns">
+          <div v-for="day in visibleDates" :key="day.toISOString()" class="day-column" :class="{ 'single-day': daysCount === 1 }">
+            <div class="day-events" @click="handleDayClick($event, day)">
+              <div
+                v-for="entity in getTimedEvents(day)"
+                :key="entity.id"
+                class="day-event"
+                :style="getEventStyle(entity)"
+                @click.stop="emit('event-click', entity)"
+                @mouseenter="emit('event-hover', { event: $event, entity })"
+                @mouseleave="emit('event-hover-end')"
+              >
+                <template v-if="daysCount <= 3">
+                  <div class="event-time">
+                    {{ entity.data?.startsOn ? formatTime(new Date(entity.data.startsOn)) : '' }} - {{ entity.data?.endsOn ? formatTime(new Date(entity.data.endsOn)) : '' }}
+                  </div>
+                  <div class="event-title">{{ entity.data?.label || 'Untitled' }}</div>
+                </template>
+                <template v-else>
+                  <div class="event-title-compact">{{ entity.data?.label || 'Untitled' }}</div>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import {
+  startOfDay,
+  getMultiDaySegments,
+  getTimedEventsForDate,
+  type MultiDaySegment,
+} from '@/utils/calendarHelpers';
+
+const ALL_DAY_EVENT_HEIGHT = 24;
+
+const props = defineProps<{
+  currentDate: Date;
+  events: any[];
+  calendars: any[];
+  initialDays?: number;
+}>();
+
+const daysCount = ref(props.initialDays ?? 7);
+const localDate = ref(new Date(props.currentDate));
+
+// Watch for external date changes (e.g., from mini calendar)
+watch(() => props.currentDate, (newDate) => {
+  localDate.value = new Date(newDate);
+});
+
+function setDays(count: number) {
+  daysCount.value = count;
+}
+
+function previousPeriod() {
+  const date = new Date(localDate.value);
+  date.setDate(date.getDate() - daysCount.value);
+  localDate.value = date;
+}
+
+function nextPeriod() {
+  const date = new Date(localDate.value);
+  date.setDate(date.getDate() + daysCount.value);
+  localDate.value = date;
+}
+
+function goToToday() {
+  localDate.value = new Date();
+}
+
+const dateRangeLabel = computed(() => {
+  if (visibleDates.value.length === 0) return '';
+  
+  const first = visibleDates.value[0];
+  const last = visibleDates.value[visibleDates.value.length - 1];
+  
+  const formatOptions: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric' };
+  
+  if (daysCount.value === 1) {
+    return first.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
+  }
+  
+  if (first.getMonth() === last.getMonth()) {
+    return `${first.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} - ${last.getDate()}, ${first.getFullYear()}`;
+  }
+  
+  return `${first.toLocaleDateString('en-US', formatOptions)} - ${last.toLocaleDateString('en-US', formatOptions)}, ${last.getFullYear()}`;
+});
+
+const visibleDates = computed(() => {
+  const dates: Date[] = [];
+  const start = new Date(localDate.value);
+  
+  for (let i = 0; i < daysCount.value; i++) {
+    dates.push(new Date(start));
+    start.setDate(start.getDate() + 1);
+  }
+  
+  return dates;
+});
+
+// Compute all-day/multi-day event segments
+const allDaySegments = computed(() => {
+  if (visibleDates.value.length === 0) {
+    return { segments: [], laneCount: 0 };
+  }
+  
+  const rangeStart = startOfDay(visibleDates.value[0]);
+  const rangeEnd = startOfDay(visibleDates.value[visibleDates.value.length - 1]);
+  
+  const getColumnIndex = (date: Date): number => {
+    const targetDay = startOfDay(date);
+    return visibleDates.value.findIndex(d => startOfDay(d).getTime() === targetDay.getTime());
+  };
+  
+  return getMultiDaySegments(props.events, rangeStart, rangeEnd, daysCount.value, getColumnIndex);
+});
+
+function isToday(date: Date): boolean {
+  const today = new Date();
+  return date.toDateString() === today.toDateString();
+}
+
+function getTimedEvents(date: Date): any[] {
+  return getTimedEventsForDate(props.events, date);
+}
+
+function getEventColor(entity: any): string {
+  if (entity.data?.color) return entity.data.color;
+  const calendar = props.calendars.find(cal => cal.id === entity.in);
+  return calendar?.color || '#1976D2';
+}
+
+function getAllDayEventStyle(segment: MultiDaySegment) {
+  return {
+    backgroundColor: getEventColor(segment.entity),
+    left: `calc(${segment.startCol} / ${daysCount.value} * 100% + 4px)`,
+    width: `calc(${segment.span} / ${daysCount.value} * 100% - 8px)`,
+    top: `${segment.lane * ALL_DAY_EVENT_HEIGHT}px`,
+  };
+}
+
+function getEventStyle(entity: any) {
+  if (!entity.data?.startsOn || !entity.data?.endsOn) {
+    return { display: 'none' };
+  }
+  const startTime = new Date(entity.data.startsOn);
+  const endTime = new Date(entity.data.endsOn);
+  const start = startTime.getHours() * 60 + startTime.getMinutes();
+  const duration = (endTime.getTime() - startTime.getTime()) / (1000 * 60);
+  
+  return {
+    top: `${(start / 1440) * 100}%`,
+    height: `${(duration / 1440) * 100}%`,
+    backgroundColor: getEventColor(entity),
+  };
+}
+
+function formatHour(hour: number): string {
+  const ampm = hour >= 12 ? 'PM' : 'AM';
+  const displayHour = hour % 12 || 12;
+  return `${displayHour} ${ampm}`;
+}
+
+function formatTime(date: Date): string {
+  return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
+}
+
+function formatWeekDay(date: Date): string {
+  return date.toLocaleDateString('en-US', { weekday: 'short' });
+}
+
+const emit = defineEmits<{
+  'event-click': [event: any];
+  'event-hover': [data: { event: MouseEvent; entity: any }];
+  'event-hover-end': [];
+  'date-click': [date: Date];
+}>();
+
+function handleDayClick(event: MouseEvent, day: Date) {
+  const target = event.currentTarget as HTMLElement;
+  const rect = target.getBoundingClientRect();
+  const clickY = event.clientY - rect.top;
+  
+  // Calculate the hour based on click position (60px per hour)
+  const totalMinutes = Math.floor((clickY / 60) * 60);
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = Math.round((totalMinutes % 60) / 15) * 15; // Round to nearest 15 min
+  
+  // Create a new date with the clicked time
+  const clickedDate = new Date(day);
+  clickedDate.setHours(hours, minutes, 0, 0);
+  
+  emit('date-click', clickedDate);
+}
+</script>
+
+<style scoped>
+.days-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 600px;
+}
+
+.view-controls {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-bottom: 1px solid rgb(var(--v-border-color));
+  background-color: rgb(var(--v-theme-surface));
+  flex-shrink: 0;
+}
+
+.view-navigation {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.current-period {
+  font-size: 14px;
+  font-weight: 500;
+  margin-left: 8px;
+  white-space: nowrap;
+}
+
+.view-selector {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.days-grid {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  border: 1px solid rgb(var(--v-border-color));
+  border-top: none;
+}
+
+/* Fixed Headers Row */
+.day-headers {
+  display: flex;
+  flex-shrink: 0;
+  border-bottom: 2px solid rgb(var(--v-border-color));
+  background-color: rgb(var(--v-theme-surface-variant));
+}
+
+.time-header-spacer {
+  width: 60px;
+  min-width: 60px;
+  flex-shrink: 0;
+  border-right: 1px solid rgb(var(--v-border-color));
+}
+
+.day-headers-row {
+  flex: 1;
+  display: flex;
+}
+
+.day-header-cell {
+  flex: 1;
+  min-width: 80px;
+  padding: 4px;
+  text-align: center;
+  border-right: 1px solid rgb(var(--v-border-color));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.day-header-cell:last-child {
+  border-right: none;
+}
+
+.day-header-cell.single-day {
+  min-width: 100%;
+}
+
+.day-name {
+  font-size: 12px;
+  text-transform: uppercase;
+  opacity: 0.7;
+  font-weight: 500;
+}
+
+.day-number {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.day-number.today {
+  background-color: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+}
+
+/* All-Day Events Section */
+.all-day-section {
+  display: flex;
+  flex-shrink: 0;
+  border-bottom: 1px solid rgb(var(--v-border-color));
+  background-color: rgb(var(--v-theme-surface));
+  min-height: 28px;
+}
+
+.all-day-label {
+  width: 60px;
+  min-width: 60px;
+  flex-shrink: 0;
+  border-right: 1px solid rgb(var(--v-border-color));
+  background-color: rgb(var(--v-theme-surface-variant));
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding: 4px 8px;
+  font-size: 10px;
+  opacity: 0.6;
+  text-transform: uppercase;
+}
+
+.all-day-events-container {
+  flex: 1;
+  position: relative;
+  min-height: 28px;
+}
+
+.all-day-columns {
+  display: flex;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.all-day-column {
+  flex: 1;
+  min-width: 80px;
+  border-right: 1px solid rgb(var(--v-border-color), 0.3);
+}
+
+.all-day-column.single-day {
+  min-width: 100%;
+}
+
+.all-day-column:last-child {
+  border-right: none;
+}
+
+.all-day-events-overlay {
+  position: absolute;
+  top: 2px;
+  left: 0;
+  right: 0;
+  bottom: 2px;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.all-day-event {
+  position: absolute;
+  height: 20px;
+  padding: 0 6px;
+  font-size: 12px;
+  color: white;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  pointer-events: auto;
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.all-day-event:not(.is-start) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding-left: 4px;
+}
+
+.all-day-event:not(.is-end) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.all-day-event:hover {
+  filter: brightness(1.1);
+  z-index: 2;
+}
+
+.all-day-event .event-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Scrollable Content Area */
+.days-content {
+  display: flex;
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-height: 0; /* Allow flex child to shrink for scrolling */
+}
+
+.time-column {
+  width: 60px;
+  min-width: 60px;
+  height: 1440px; /* 24 hours * 60px per hour */
+  border-right: 1px solid rgb(var(--v-border-color));
+  background-color: rgb(var(--v-theme-surface-variant));
+  flex-shrink: 0;
+}
+
+.time-slot {
+  height: 60px;
+  padding: 4px 8px;
+  font-size: 11px;
+  opacity: 0.6;
+  border-bottom: 1px solid rgb(var(--v-border-color), 0.5);
+  text-align: right;
+}
+
+.days-columns {
+  flex: 1;
+  display: flex;
+  min-height: 1440px; /* 24 hours * 60px per hour */
+}
+
+.day-column {
+  flex: 1;
+  min-width: 80px;
+  border-right: 1px solid rgb(var(--v-border-color));
+}
+
+.day-column.single-day {
+  min-width: 100%;
+}
+
+.day-column:last-child {
+  border-right: none;
+}
+
+.day-events {
+  position: relative;
+  height: 1440px; /* 24 hours * 60px per hour */
+  cursor: pointer;
+}
+
+.day-events:hover {
+  background-color: rgba(var(--v-theme-primary), 0.02);
+}
+
+.day-event {
+  position: absolute;
+  left: 4px;
+  right: 4px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  color: white;
+  font-size: 12px;
+  cursor: pointer;
+  overflow: hidden;
+  font-weight: 500;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+  transition: box-shadow 0.2s;
+}
+
+.day-event:hover {
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  filter: brightness(1.1);
+}
+
+.event-time {
+  font-weight: 600;
+  margin-bottom: 2px;
+  font-size: 11px;
+}
+
+.event-title {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.event-title-compact {
+  font-size: 11px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/components/EventEditor.vue b/src/components/EventEditor.vue
new file mode 100644
index 0000000..ad1a57a
--- /dev/null
+++ b/src/components/EventEditor.vue
@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { CollectionObject } from '@ChronoManager/models/collection'
+import type { EntityObject } from '@ChronoManager/models/entity'
+import type { EventObject } from '@ChronoManager/models/event'
+import EventEditorLabel from './editors/EventEditorLabel.vue'
+import EventEditorDescription from './editors/EventEditorDescription.vue'
+import EventEditorDates from './editors/EventEditorDates.vue'
+import EventEditorLocations from './editors/EventEditorLocations.vue'
+import EventEditorParticipants from './editors/EventEditorParticipants.vue'
+import EventEditorNotifications from './editors/EventEditorNotifications.vue'
+import EventEditorOccurrence from './editors/EventEditorOccurrence.vue'
+import EventEditorTags from './editors/EventEditorTags.vue'
+
+// Props - wrapped entity with id, data properties
+const props = defineProps<{
+  mode: 'edit' | 'view'
+  entity: EntityObject | null
+  collection?: CollectionObject | null
+  calendars?: CollectionObject[]
+}>()
+
+// Emits
+const emit = defineEmits<{
+  'edit': []
+  'cancel': []
+  'close': []
+  'save': [entity: any, collection?: any]
+  'delete': [entity: any, collection?: any]
+}>()
+
+// State
+const loading = ref(false)
+const saving = ref(false)
+const selectedCollectionId = ref(props.entity?.in || props.collection?.id || props.calendars?.[0]?.id || '')
+
+// Computed
+const mode = computed(() => props.mode)
+const entity = computed(() => props.entity || null)
+const entityObject = computed(() => entity.value?.data as EventObject ?? null)
+const entityFresh = computed(() => entity.value?.id === null || entity.value?.id === undefined)
+
+const calendarOptions = computed(() => 
+  (props.calendars || []).map(cal => ({
+    title: cal.label || 'Unnamed Calendar',
+    value: cal.id,
+  }))
+)
+
+// Permissions
+const isExternalEvent = computed(() => {
+  return false
+})
+
+const canEdit = computed(() => {
+  return true
+})
+
+const canDelete = computed(() => {
+  return !isExternalEvent.value
+})
+
+// UI helpers
+const entityIcon = computed(() => 'mdi-calendar')
+
+// Functions
+const startEdit = () => {
+  emit('edit')
+}
+
+const cancelEdit = () => {
+  emit('cancel')
+}
+
+const saveEntity = async () => {
+  saving.value = true
+  const targetCollection = (props.calendars || []).find(cal => cal.id === selectedCollectionId.value)
+  emit('save', entity.value!, targetCollection || props.collection)
+  saving.value = false
+}
+
+// Location management
+const addLocationPhysical = () => {
+  (entityObject.value as any)?.addLocationPhysical()
+}
+
+const removeLocationPhysical = (key: string) => {
+  (entityObject.value as any)?.removeLocationPhysical(key)
+}
+
+const addLocationVirtual = () => {
+  (entityObject.value as any)?.addLocationVirtual()
+}
+
+const removeLocationVirtual = (key: string) => {
+  (entityObject.value as any)?.removeLocationVirtual(key)
+}
+
+// Participant management
+const addParticipant = () => {
+  (entityObject.value as any)?.addParticipant()
+}
+
+const removeParticipant = (key: string) => {
+  (entityObject.value as any)?.removeParticipant(key)
+}
+
+// Notification management
+const addNotification = () => {
+  (entityObject.value as any)?.addNotification()
+}
+
+const removeNotification = (key: string) => {
+  (entityObject.value as any)?.removeNotification(key)
+}
+</script>
+
+<template>
+  <v-sheet class="pa-2 text-start overflow-auto" min-height="84vh" max-height="84vh">
+    <div class="event-editor-header d-flex justify-space-between pa-4">
+      <div>
+        <v-icon :icon="entityIcon" class="mr-2" />
+        {{ entityObject?.label || 'Nothing Selected' }}
+      </div>
+
+      <div v-if="!loading && entity">
+        <v-btn 
+          v-if="mode === 'view' && canEdit"
+          icon="mdi-pencil"
+          size="small"
+          variant="text"
+          @click="startEdit"
+        />
+
+        <v-btn
+          v-if="!entityFresh && canDelete"
+          icon="mdi-delete"
+          size="small"
+          variant="text"
+          color="error"
+          @click="emit('delete', entity!, collection)"
+        />
+
+        <v-btn
+          icon="mdi-close"
+          size="small"
+          variant="text"
+          @click="$emit('close')"
+        />
+      </div>
+    </div>
+
+    <div class="event-editor-fields">
+      <v-divider />
+      <v-progress-linear v-if="loading" indeterminate color="primary" />
+
+      <div v-if="!entity" class="text-center pa-8">
+        <v-icon icon="mdi-calendar-blank" size="64" color="grey" class="mb-4" />
+        <p class="text-h6 text-grey">Select an event to view details</p>
+      </div>
+
+      <div v-else class="pa-4">
+        <v-select
+          v-if="mode === 'edit' && !entity.id"
+          v-model="selectedCollectionId"
+          :items="calendarOptions"
+          label="Calendar"
+          variant="outlined"
+          density="compact"
+          class="mb-4"
+        />
+
+        <EventEditorLabel
+          :mode="mode"
+          :label="entityObject!.label"
+          @update:label="entityObject!.label = $event"
+        />
+
+        <EventEditorDescription
+          :mode="mode"
+          :description="entityObject!.description"
+          @update:description="entityObject!.description = $event"
+        />
+
+        <EventEditorDates
+          :mode="mode"
+          :starts-on="entityObject!.startsOn"
+          :ends-on="entityObject!.endsOn"
+          :timeless="entityObject!.timeless"
+          :time-zone="entityObject!.timeZone"
+          @update:starts-on="entityObject!.startsOn = $event"
+          @update:ends-on="entityObject!.endsOn = $event"
+          @update:timeless="entityObject!.timeless = $event"
+          @update:time-zone="entityObject!.timeZone = $event"
+        />
+
+        <EventEditorLocations
+          :mode="mode"
+          :locations-physical="entityObject!.locationsPhysical || {}"
+          :locations-virtual="entityObject!.locationsVirtual || {}"
+          @add-location-physical="addLocationPhysical"
+          @remove-location-physical="removeLocationPhysical"
+          @add-location-virtual="addLocationVirtual"
+          @remove-location-virtual="removeLocationVirtual"
+        />
+
+        <EventEditorParticipants
+          :mode="mode"
+          :organizer="entityObject!.organizer"
+          :participants="entityObject!.participants || {}"
+          @update:organizer="entityObject!.organizer = $event"
+          @add-participant="addParticipant"
+          @remove-participant="removeParticipant"
+        />
+
+        <EventEditorNotifications
+          :mode="mode"
+          :notifications="entityObject!.notifications || {}"
+          @add-notification="addNotification"
+          @remove-notification="removeNotification"
+        />
+
+        <EventEditorOccurrence
+          :mode="mode"
+          :pattern="entityObject!.pattern"
+          @update:pattern="entityObject!.pattern = $event"
+        />
+
+        <EventEditorTags
+          :mode="mode"
+          :tags="entityObject!.tags"
+          @update:tags="entityObject!.tags = $event"
+        />
+
+        <!-- Metadata for view mode -->
+        <div v-if="mode === 'view' && entityObject!.created" class="event-editor-section">
+          <v-divider class="mb-4"></v-divider>
+          <div class="text-caption text-medium-emphasis">
+            <div>Created: {{ new Date(entityObject!.created).toLocaleString() }}</div>
+            <div v-if="entityObject!.modified">Modified: {{ new Date(entityObject!.modified).toLocaleString() }}</div>
+            <div v-if="isExternalEvent" class="mt-2">
+              <v-chip size="small" color="info" variant="tonal">
+                <v-icon start size="small">mdi-account-arrow-right</v-icon>
+                External Event
+              </v-chip>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <v-divider/>
+    </div>
+
+    <div class="event-editor-footer d-flex text-end justify-space-between pa-4">
+      <v-btn v-if="mode === 'edit'"
+        variant="text"
+        @click="cancelEdit"
+        :disabled="saving">
+        Cancel
+      </v-btn>
+
+      <v-btn v-if="mode === 'edit'"
+        color="primary"
+        variant="elevated"
+        @click="saveEntity"
+        :loading="saving">
+        Save
+      </v-btn>
+    </div>
+  </v-sheet>
+</template>
+
+<style scoped>
+.event-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
diff --git a/src/components/EventViewerPopup.vue b/src/components/EventViewerPopup.vue
new file mode 100644
index 0000000..b388c33
--- /dev/null
+++ b/src/components/EventViewerPopup.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  event: any | null
+  position: { x: number; y: number }
+  visible: boolean
+}>()
+
+const emit = defineEmits<{
+  'click': [event: any]
+}>()
+
+const formatDateTime = (isoString: string | null | undefined): string => {
+  if (!isoString) return 'Not set'
+  const date = new Date(isoString)
+  return date.toLocaleString('en-US', { 
+    weekday: 'short',
+    month: 'short', 
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit'
+  })
+}
+
+const formatTime = (isoString: string | null | undefined): string => {
+  if (!isoString) return 'Not set'
+  const date = new Date(isoString)
+  return date.toLocaleTimeString('en-US', { 
+    hour: 'numeric',
+    minute: '2-digit'
+  })
+}
+
+const popupStyle = computed(() => {
+  return {
+    left: `${props.position.x}px`,
+    top: `${props.position.y}px`
+  }
+})
+
+const hasLocation = computed(() => {
+  return props.event?.data?.locationsPhysical && Object.keys(props.event.data.locationsPhysical).length > 0 ||
+         props.event?.data?.locationsVirtual && Object.keys(props.event.data.locationsVirtual).length > 0
+})
+
+const firstLocation = computed(() => {
+  if (props.event?.data?.locationsPhysical && Object.keys(props.event.data.locationsPhysical).length > 0) {
+    const key = Object.keys(props.event.data.locationsPhysical)[0]
+    return props.event.data.locationsPhysical[key]
+  }
+  if (props.event?.data?.locationsVirtual && Object.keys(props.event.data.locationsVirtual).length > 0) {
+    const key = Object.keys(props.event.data.locationsVirtual)[0]
+    return props.event.data.locationsVirtual[key]
+  }
+  return null
+})
+
+const participantCount = computed(() => {
+  if (!props.event?.data?.participants) return 0
+  return Object.keys(props.event.data.participants).length
+})
+</script>
+
+<template>
+  <Transition name="fade">
+    <div
+      v-if="visible && event"
+      class="event-popup"
+      :style="popupStyle"
+      @click.stop="$emit('click', event)"
+    >
+      <v-card elevation="8" class="event-popup-card">
+        <v-card-text class="pa-3">
+          <div class="d-flex align-center mb-2">
+            <v-icon icon="mdi-calendar" size="small" class="mr-2" />
+            <div class="text-subtitle-1 font-weight-bold">{{ event.data?.label || 'Untitled Event' }}</div>
+          </div>
+
+          <div class="event-popup-details">
+            <div class="d-flex align-center mb-1">
+              <v-icon icon="mdi-clock-outline" size="small" class="mr-2 text-grey" />
+              <div class="text-caption">
+                <div v-if="event.data?.timeless">
+                  All Day - {{ new Date(event.data.startsOn).toLocaleDateString() }}
+                </div>
+                <div v-else>
+                  {{ formatTime(event.data?.startsOn) }} - {{ formatTime(event.data?.endsOn) }}
+                </div>
+              </div>
+            </div>
+
+            <div v-if="hasLocation" class="d-flex align-center mb-1">
+              <v-icon icon="mdi-map-marker" size="small" class="mr-2 text-grey" />
+              <div class="text-caption text-truncate">
+                {{ firstLocation?.label || firstLocation?.location || 'Location' }}
+              </div>
+            </div>
+
+            <div v-if="event.data?.organizer" class="d-flex align-center mb-1">
+              <v-icon icon="mdi-account" size="small" class="mr-2 text-grey" />
+              <div class="text-caption">
+                {{ event.data.organizer.name || event.data.organizer.address }}
+              </div>
+            </div>
+
+            <div v-if="participantCount > 0" class="d-flex align-center mb-1">
+              <v-icon icon="mdi-account-group" size="small" class="mr-2 text-grey" />
+              <div class="text-caption">
+                {{ participantCount }} participant{{ participantCount !== 1 ? 's' : '' }}
+              </div>
+            </div>
+
+            <div v-if="event.data?.description" class="mt-2 pt-2 border-t">
+              <div class="text-caption text-grey">{{ event.data.description }}</div>
+            </div>
+
+            <div v-if="event.data?.tags && event.data.tags.length > 0" class="mt-2">
+              <v-chip
+                v-for="(tag, index) in event.data.tags.slice(0, 3)"
+                :key="index"
+                size="x-small"
+                class="mr-1"
+                variant="tonal"
+              >
+                {{ tag }}
+              </v-chip>
+              <span v-if="event.data.tags.length > 3" class="text-caption text-grey">
+                +{{ event.data.tags.length - 3 }} more
+              </span>
+            </div>
+          </div>
+
+          <div class="text-caption text-grey-lighten-1 mt-2 text-center">
+            Click to view details
+          </div>
+        </v-card-text>
+      </v-card>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.event-popup {
+  position: fixed;
+  z-index: 9999;
+  pointer-events: auto;
+  transform: translate(10px, 10px);
+}
+
+.event-popup-card {
+  min-width: 280px;
+  max-width: 350px;
+  cursor: pointer;
+  transition: box-shadow 0.2s;
+}
+
+.event-popup-card:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
+}
+
+.event-popup-details {
+  font-size: 13px;
+}
+
+.border-t {
+  border-top: 1px solid rgb(var(--v-border-color));
+}
+
+/* Fade transition */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/components/MiniCalendar.vue b/src/components/MiniCalendar.vue
new file mode 100644
index 0000000..f08c262
--- /dev/null
+++ b/src/components/MiniCalendar.vue
@@ -0,0 +1,262 @@
+<template>
+  <div class="mini-calendar">
+    <!-- Navigation Header -->
+    <div class="mini-calendar-header">
+      <v-btn size="x-small" variant="text" icon="mdi-chevron-left" density="compact" @click="previousMonth" />
+      <div class="month-year-selector">
+        <v-menu>
+          <template #activator="{ props: menuProps }">
+            <v-btn 
+              size="x-small" 
+              variant="text" 
+              v-bind="menuProps"
+              class="month-btn"
+            >
+              {{ monthLabel }}
+            </v-btn>
+          </template>
+          <v-list density="compact" class="month-list">
+            <v-list-item
+              v-for="(month, index) in months"
+              :key="month"
+              :active="index === displayDate.getMonth()"
+              @click="setMonth(index)"
+            >
+              <v-list-item-title>{{ month }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+        <v-menu>
+          <template #activator="{ props: menuProps }">
+            <v-btn 
+              size="x-small" 
+              variant="text" 
+              v-bind="menuProps"
+              class="year-btn"
+            >
+              {{ displayDate.getFullYear() }}
+            </v-btn>
+          </template>
+          <v-list density="compact" class="year-list">
+            <v-list-item
+              v-for="year in yearRange"
+              :key="year"
+              :active="year === displayDate.getFullYear()"
+              @click="setYear(year)"
+            >
+              <v-list-item-title>{{ year }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </div>
+      <v-btn size="x-small" variant="text" icon="mdi-chevron-right" density="compact" @click="nextMonth" />
+    </div>
+
+    <!-- Day Headers -->
+    <div class="mini-calendar-grid">
+      <div v-for="day in dayHeaders" :key="day" class="mini-day-header">
+        {{ day }}
+      </div>
+      
+      <!-- Calendar Days -->
+      <div
+        v-for="(date, index) in calendarDates"
+        :key="index"
+        class="mini-day"
+        :class="{
+          'today': isToday(date),
+          'selected': isSelected(date),
+          'other-month': !isSameMonth(date, displayDate)
+        }"
+        @click="selectDate(date)"
+      >
+        {{ date.getDate() }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+
+const props = defineProps<{
+  modelValue: Date;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [date: Date];
+}>();
+
+const months = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December'
+];
+
+const dayHeaders = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+
+// The display date controls which month/year is shown
+const displayDate = ref(new Date(props.modelValue));
+
+// Watch for external changes to modelValue
+watch(() => props.modelValue, (newDate) => {
+  displayDate.value = new Date(newDate);
+});
+
+const monthLabel = computed(() => {
+  return months[displayDate.value.getMonth()];
+});
+
+const yearRange = computed(() => {
+  const currentYear = new Date().getFullYear();
+  const years: number[] = [];
+  for (let y = currentYear - 10; y <= currentYear + 10; y++) {
+    years.push(y);
+  }
+  return years;
+});
+
+const calendarDates = computed(() => {
+  const year = displayDate.value.getFullYear();
+  const month = displayDate.value.getMonth();
+  const firstDay = new Date(year, month, 1);
+  const startDate = new Date(firstDay);
+  startDate.setDate(startDate.getDate() - startDate.getDay());
+  
+  const dates: Date[] = [];
+  const current = new Date(startDate);
+  
+  for (let i = 0; i < 42; i++) {
+    dates.push(new Date(current));
+    current.setDate(current.getDate() + 1);
+  }
+  
+  return dates;
+});
+
+function previousMonth() {
+  const newDate = new Date(displayDate.value);
+  newDate.setMonth(newDate.getMonth() - 1);
+  displayDate.value = newDate;
+}
+
+function nextMonth() {
+  const newDate = new Date(displayDate.value);
+  newDate.setMonth(newDate.getMonth() + 1);
+  displayDate.value = newDate;
+}
+
+function setMonth(monthIndex: number) {
+  const newDate = new Date(displayDate.value);
+  newDate.setMonth(monthIndex);
+  displayDate.value = newDate;
+}
+
+function setYear(year: number) {
+  const newDate = new Date(displayDate.value);
+  newDate.setFullYear(year);
+  displayDate.value = newDate;
+}
+
+function selectDate(date: Date) {
+  emit('update:modelValue', date);
+}
+
+function isToday(date: Date): boolean {
+  const today = new Date();
+  return date.toDateString() === today.toDateString();
+}
+
+function isSelected(date: Date): boolean {
+  return date.toDateString() === props.modelValue.toDateString();
+}
+
+function isSameMonth(date1: Date, date2: Date): boolean {
+  return date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+}
+</script>
+
+<style scoped>
+.mini-calendar {
+  user-select: none;
+}
+
+.mini-calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.month-year-selector {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.month-btn, .year-btn {
+  font-size: 12px !important;
+  font-weight: 500;
+  text-transform: none !important;
+  letter-spacing: normal !important;
+  min-width: 0 !important;
+  padding: 0 4px !important;
+}
+
+.month-list, .year-list {
+  max-height: 250px;
+  overflow-y: auto;
+}
+
+.mini-calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.mini-day-header {
+  text-align: center;
+  font-weight: 600;
+  padding: 4px 0;
+  opacity: 0.6;
+  font-size: 10px;
+  line-height: 1;
+}
+
+.mini-day {
+  text-align: center;
+  padding: 6px 4px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+  font-size: 11px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 24px;
+}
+
+.mini-day:hover {
+  background-color: rgba(var(--v-theme-primary), 0.08);
+}
+
+.mini-day.today {
+  background-color: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
+  font-weight: 600;
+}
+
+.mini-day.today:hover {
+  background-color: rgb(var(--v-theme-primary));
+  filter: brightness(1.1);
+}
+
+.mini-day.selected:not(.today) {
+  outline: 2px solid rgb(var(--v-theme-primary));
+  font-weight: 600;
+}
+
+.mini-day.other-month {
+  opacity: 0.3;
+}
+</style>
diff --git a/src/components/MonthView.vue b/src/components/MonthView.vue
new file mode 100644
index 0000000..a8704e5
--- /dev/null
+++ b/src/components/MonthView.vue
@@ -0,0 +1,551 @@
+<script setup lang="ts">
+import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
+import {
+  startOfDay,
+  daysDiff,
+  isMultiDay,
+  getSingleDayEventsForDate,
+  type MultiDaySegment,
+} from '@/utils/calendarHelpers';
+
+const EVENT_HEIGHT = 22; // Height of each event row in pixels
+const MAX_VISIBLE_EVENTS = 3; // Maximum event rows to show before "+N more"
+
+interface WeekData {
+  startDate: Date;
+  days: { date: Date; currentMonth: boolean }[];
+  multiDaySegments: MultiDaySegment[];
+  laneCount: number;
+}
+
+const props = defineProps<{
+  currentDate: Date;
+  events: any[];
+  calendars: any[];
+}>();
+
+defineEmits<{
+  'event-click': [event: any];
+  'date-click': [date: Date];
+  'event-hover': [data: { event: MouseEvent; entity: any }];
+  'event-hover-end': [];
+}>();
+
+const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+// Local date for navigation
+const localDate = ref(new Date(props.currentDate));
+
+// Watch for external date changes (e.g., from mini calendar)
+watch(() => props.currentDate, (newDate) => {
+  localDate.value = new Date(newDate);
+});
+
+// Navigation functions
+function previousMonth() {
+  const date = new Date(localDate.value);
+  date.setMonth(date.getMonth() - 1);
+  localDate.value = date;
+}
+
+function nextMonth() {
+  const date = new Date(localDate.value);
+  date.setMonth(date.getMonth() + 1);
+  localDate.value = date;
+}
+
+function goToToday() {
+  localDate.value = new Date();
+}
+
+const monthLabel = computed(() => {
+  return localDate.value.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+});
+
+// Track container size for dynamic calculations
+const containerRef = ref<HTMLElement | null>(null);
+const containerHeight = ref(600);
+
+function updateContainerHeight() {
+  if (containerRef.value) {
+    containerHeight.value = containerRef.value.clientHeight;
+  }
+}
+
+onMounted(() => {
+  updateContainerHeight();
+  window.addEventListener('resize', updateContainerHeight);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateContainerHeight);
+});
+
+// Calculate how many weeks are needed for this month
+const weeksNeeded = computed(() => {
+  const year = localDate.value.getFullYear();
+  const month = localDate.value.getMonth();
+  const firstDay = new Date(year, month, 1);
+  const lastDay = new Date(year, month + 1, 0);
+  
+  // Days before the 1st in the first week + days in month
+  const daysBeforeFirst = firstDay.getDay();
+  const daysInMonth = lastDay.getDate();
+  
+  return Math.ceil((daysBeforeFirst + daysInMonth) / 7);
+});
+
+// Build weeks with multiday event segments
+const weeks = computed<WeekData[]>(() => {
+  const year = localDate.value.getFullYear();
+  const month = localDate.value.getMonth();
+  const firstDay = new Date(year, month, 1);
+  const gridStart = new Date(firstDay);
+  gridStart.setDate(gridStart.getDate() - gridStart.getDay());
+  
+  const weeksData: WeekData[] = [];
+  const current = new Date(gridStart);
+  
+  const numWeeks = weeksNeeded.value;
+  
+  for (let w = 0; w < numWeeks; w++) {
+    const weekStart = startOfDay(new Date(current));
+    const weekEnd = new Date(weekStart);
+    weekEnd.setDate(weekEnd.getDate() + 6);
+    
+    const days: { date: Date; currentMonth: boolean }[] = [];
+    for (let d = 0; d < 7; d++) {
+      days.push({
+        date: new Date(current),
+        currentMonth: current.getMonth() === month,
+      });
+      current.setDate(current.getDate() + 1);
+    }
+    
+    // Get multiday segments for this week
+    const { segments, laneCount } = getMultiDaySegments(weekStart, weekEnd);
+    
+    weeksData.push({
+      startDate: weekStart,
+      days,
+      multiDaySegments: segments,
+      laneCount: Math.min(laneCount, MAX_VISIBLE_EVENTS),
+    });
+  }
+  
+  return weeksData;
+});
+
+function getMultiDaySegments(weekStart: Date, weekEnd: Date): { segments: MultiDaySegment[]; laneCount: number } {
+  const segments: MultiDaySegment[] = [];
+  
+  // Filter multiday events that overlap this week
+  const multiDayEvents = props.events.filter(entity => {
+    if (!entity.data?.startsOn || !isMultiDay(entity)) return false;
+    const eventStart = startOfDay(new Date(entity.data.startsOn));
+    const eventEnd = startOfDay(new Date(entity.data.endsOn));
+    return eventStart <= weekEnd && eventEnd >= weekStart;
+  });
+  
+  // Sort: longer events first, then by start date
+  multiDayEvents.sort((a, b) => {
+    const aStart = new Date(a.data.startsOn);
+    const aEnd = new Date(a.data.endsOn);
+    const bStart = new Date(b.data.startsOn);
+    const bEnd = new Date(b.data.endsOn);
+    const aDuration = daysDiff(aStart, aEnd);
+    const bDuration = daysDiff(bStart, bEnd);
+    if (bDuration !== aDuration) return bDuration - aDuration;
+    return aStart.getTime() - bStart.getTime();
+  });
+  
+  // Lane assignment
+  const lanes: boolean[][] = []; // lanes[lane][dayOfWeek] = occupied
+  
+  for (const entity of multiDayEvents) {
+    const eventStart = startOfDay(new Date(entity.data.startsOn));
+    const eventEnd = startOfDay(new Date(entity.data.endsOn));
+    
+    // Clamp to this week
+    const segStart = eventStart < weekStart ? weekStart : eventStart;
+    const segEnd = eventEnd > weekEnd ? weekEnd : eventEnd;
+    
+    const startCol = segStart.getDay();
+    const endCol = segEnd.getDay();
+    const span = endCol - startCol + 1;
+    
+    // Find available lane
+    let lane = 0;
+    while (true) {
+      if (!lanes[lane]) lanes[lane] = [false, false, false, false, false, false, false];
+      
+      let isFree = true;
+      for (let d = startCol; d <= endCol; d++) {
+        if (lanes[lane][d]) { isFree = false; break; }
+      }
+      
+      if (isFree) {
+        for (let d = startCol; d <= endCol; d++) lanes[lane][d] = true;
+        break;
+      }
+      lane++;
+    }
+    
+    segments.push({
+      entity,
+      startCol,
+      span,
+      lane,
+      isStart: eventStart >= weekStart,
+      isEnd: eventEnd <= weekEnd,
+    });
+  }
+  
+  return { segments, laneCount: lanes.length };
+}
+
+// Single-day events for a specific date
+function getSingleDayEvents(date: Date): any[] {
+  return getSingleDayEventsForDate(props.events, date);
+}
+
+// Count hidden events (multiday beyond MAX + single day beyond remaining space)
+function getHiddenCount(cell: { date: Date }, weekLaneCount: number): number {
+  const singleDayEvents = getSingleDayEvents(cell.date);
+  const visibleSingleDay = Math.max(0, MAX_VISIBLE_EVENTS - weekLaneCount);
+  const hiddenSingleDay = Math.max(0, singleDayEvents.length - visibleSingleDay);
+  
+  // Also count multiday events in lanes beyond MAX_VISIBLE_EVENTS for this day
+  // (This would need more complex tracking - simplified for now)
+  return hiddenSingleDay;
+}
+
+function isToday(date: Date): boolean {
+  const today = new Date();
+  return date.toDateString() === today.toDateString();
+}
+
+function getEventColor(entity: any): string {
+  if (entity.data?.color) return entity.data.color;
+  const calendar = props.calendars.find(cal => cal.id === entity.in);
+  return calendar?.color || '#1976D2';
+}
+</script>
+
+<template>
+  <div class="month-view" ref="containerRef">
+    <!-- Navigation Controls -->
+    <div class="view-controls">
+      <div class="view-navigation">
+        <v-btn size="x-small" variant="text" icon="mdi-chevron-left" @click="previousMonth" />
+        <v-btn size="x-small" variant="tonal" @click="goToToday">Today</v-btn>
+        <v-btn size="x-small" variant="text" icon="mdi-chevron-right" @click="nextMonth" />
+        <span class="current-period">{{ monthLabel }}</span>
+      </div>
+    </div>
+    
+    <!-- Header row -->
+    <div class="day-headers">
+      <div v-for="day in weekDays" :key="day" class="day-header-cell">
+        {{ day }}
+      </div>
+    </div>
+    
+    <!-- Week rows -->
+    <div class="calendar-body">
+      <div v-for="(week, weekIndex) in weeks" :key="weekIndex" class="calendar-week">
+        <!-- Base layer: Day cells grid -->
+        <div class="days-grid">
+          <div
+            v-for="(cell, dayIndex) in week.days"
+            :key="dayIndex"
+            class="calendar-cell"
+            :class="{
+              'today': isToday(cell.date),
+              'other-month': !cell.currentMonth
+            }"
+            @click="$emit('date-click', cell.date)"
+          >
+            <div class="cell-date">{{ cell.date.getDate() }}</div>
+            <!-- Spacer for multiday events -->
+            <div 
+              class="multiday-spacer" 
+              :style="{ height: `${week.laneCount * EVENT_HEIGHT}px` }"
+            ></div>
+            <!-- Single-day events -->
+            <div class="cell-events">
+              <div
+                v-for="entity in getSingleDayEvents(cell.date).slice(0, MAX_VISIBLE_EVENTS - week.laneCount)"
+                :key="entity.id"
+                class="single-day-event"
+                :style="{ backgroundColor: getEventColor(entity) }"
+                @click.stop="$emit('event-click', entity)"
+                @mouseenter="$emit('event-hover', { event: $event, entity })"
+                @mouseleave="$emit('event-hover-end')"
+              >
+                {{ entity.data?.label || 'Untitled' }}
+              </div>
+              <div 
+                v-if="getHiddenCount(cell, week.laneCount) > 0" 
+                class="more-events"
+                @click.stop="$emit('date-click', cell.date)"
+              >
+                +{{ getHiddenCount(cell, week.laneCount) }} more
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Overlay layer: Multiday events (positioned absolutely over the grid) -->
+        <div class="multiday-overlay">
+          <div
+            v-for="segment in week.multiDaySegments"
+            :key="`${segment.entity.id}-${weekIndex}`"
+            class="multiday-event"
+            :class="{
+              'is-start': segment.isStart,
+              'is-end': segment.isEnd,
+            }"
+            :style="{
+              backgroundColor: getEventColor(segment.entity),
+              left: `calc(${segment.startCol} / 7 * 100% + 4px)`,
+              width: `calc(${segment.span} / 7 * 100% - 8px)`,
+              top: `${34 + segment.lane * EVENT_HEIGHT}px`,
+            }"
+            @click.stop="$emit('event-click', segment.entity)"
+            @mouseenter="$emit('event-hover', { event: $event, entity: segment.entity })"
+            @mouseleave="$emit('event-hover-end')"
+          >
+            <span v-if="segment.isStart" class="event-label">
+              {{ segment.entity.data?.label || 'Untitled' }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.month-view {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  border: 1px solid rgb(var(--v-border-color));
+}
+
+.view-controls {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-bottom: 1px solid rgb(var(--v-border-color));
+  background-color: rgb(var(--v-theme-surface));
+  flex-shrink: 0;
+}
+
+.view-navigation {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.current-period {
+  font-size: 14px;
+  font-weight: 500;
+  margin-left: 8px;
+  white-space: nowrap;
+}
+
+.day-headers {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  flex-shrink: 0;
+  border-bottom: 2px solid rgb(var(--v-border-color));
+  background-color: rgb(var(--v-theme-surface-variant));
+}
+
+.day-header-cell {
+  padding: 4px;
+  text-align: center;
+  font-weight: 500;
+  font-size: 12px;
+  text-transform: uppercase;
+  opacity: 0.7;
+  border-right: 1px solid rgb(var(--v-border-color));
+}
+
+.day-header-cell:last-child {
+  border-right: none;
+}
+
+.calendar-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.calendar-week {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+
+/* Base layer: Day cells */
+.days-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  height: 100%;
+}
+
+.calendar-cell {
+  background-color: transparent;
+  padding: 4px;
+  cursor: pointer;
+  overflow: hidden;
+  border-right: 1px solid rgb(var(--v-border-color));
+  border-bottom: 1px solid rgb(var(--v-border-color));
+  display: flex;
+  flex-direction: column;
+  transition: background-color 0.2s;
+}
+
+.calendar-cell:last-child {
+  border-right: none;
+}
+
+.calendar-cell.other-month {
+  opacity: 0.4;
+}
+
+.calendar-cell:hover {
+  background-color: rgba(var(--v-theme-primary), 0.04);
+}
+
+.calendar-cell.today {
+  background-color: rgba(var(--v-theme-primary), 0.06);
+}
+
+.calendar-cell.today:hover {
+  background-color: rgba(var(--v-theme-primary), 0.1);
+}
+
+.cell-date {
+  font-weight: 500;
+  font-size: 14px;
+  padding: 0 4px;
+  flex-shrink: 0;
+}
+
+.calendar-cell.today .cell-date {
+  background-color: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+}
+
+/* Spacer to reserve room for multiday events overlay */
+.multiday-spacer {
+  flex-shrink: 0;
+}
+
+.cell-events {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex: 1;
+  overflow: hidden;
+  margin-top: 2px;
+}
+
+.single-day-event {
+  height: 20px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 12px;
+  color: white;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+}
+
+.single-day-event:hover {
+  filter: brightness(1.1);
+}
+
+.more-events {
+  font-size: 11px;
+  color: rgb(var(--v-theme-primary));
+  padding: 2px 6px;
+  cursor: pointer;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.more-events:hover {
+  text-decoration: underline;
+}
+
+/* Overlay layer: Multiday events */
+.multiday-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.multiday-event {
+  position: absolute;
+  height: 20px;
+  padding: 0 6px;
+  font-size: 12px;
+  color: white;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  pointer-events: auto;
+  box-sizing: border-box;
+  border-radius: 4px;
+}
+
+.multiday-event:not(.is-start) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding-left: 4px;
+}
+
+.multiday-event:not(.is-end) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.multiday-event:hover {
+  filter: brightness(1.1);
+  z-index: 2;
+}
+
+.event-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
diff --git a/src/components/TaskEditor.vue b/src/components/TaskEditor.vue
new file mode 100644
index 0000000..8700379
--- /dev/null
+++ b/src/components/TaskEditor.vue
@@ -0,0 +1,324 @@
+<template>
+  <v-card v-if="entity" class="task-editor">
+    <v-card-title class="d-flex justify-space-between align-center">
+      <span>{{ entity.id ? entity.data?.label || 'Untitled Task' : 'New Task' }}</span>
+      <div class="d-flex gap-2">
+        <v-btn
+          v-if="mode === 'view' && canEdit"
+          icon="mdi-pencil"
+          variant="text"
+          size="small"
+          @click="$emit('edit')"
+        ></v-btn>
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          size="small"
+          @click="$emit('close')"
+        ></v-btn>
+      </div>
+    </v-card-title>
+    <v-divider></v-divider>
+    <v-card-text class="task-editor-content">
+      <v-form ref="formRef">
+        <v-text-field
+          v-model="entity.data.label"
+          label="Title"
+          :rules="[v => !!v || 'Title is required']"
+          :readonly="!isEditing"
+          :variant="isEditing ? 'outlined' : 'plain'"
+          class="mb-4"
+        ></v-text-field>
+
+        <v-select
+          v-model="selectedCollectionId"
+          :items="listOptions"
+          label="Task List"
+          :readonly="!isEditing || !canChangeCollection"
+          :variant="isEditing && canChangeCollection ? 'outlined' : 'plain'"
+          class="mb-4"
+        ></v-select>
+
+        <v-textarea
+          v-model="entity.data.description"
+          label="Description"
+          :readonly="!isEditing"
+          :variant="isEditing ? 'outlined' : 'plain'"
+          rows="3"
+          class="mb-4"
+        ></v-textarea>
+
+        <v-select
+          v-model="entity.data.priority"
+          :items="priorityOptions"
+          label="Priority"
+          :readonly="!isEditing"
+          :variant="isEditing ? 'outlined' : 'plain'"
+          class="mb-4"
+        ></v-select>
+
+        <v-text-field
+          v-model="dueDate"
+          label="Due Date"
+          type="date"
+          :readonly="!isEditing || !canEditDates"
+          :variant="isEditing && canEditDates ? 'outlined' : 'plain'"
+          clearable
+          class="mb-4"
+        ></v-text-field>
+
+        <v-text-field
+          v-model="startDate"
+          label="Start Date"
+          type="date"
+          :readonly="!isEditing || !canEditDates"
+          :variant="isEditing && canEditDates ? 'outlined' : 'plain'"
+          clearable
+          class="mb-4"
+        ></v-text-field>
+
+        <v-combobox
+          v-model="entity.data.categories"
+          label="Tags"
+          multiple
+          chips
+          closable-chips
+          :readonly="!isEditing"
+          :variant="isEditing ? 'outlined' : 'plain'"
+          class="mb-4"
+        ></v-combobox>
+
+        <div class="d-flex gap-4">
+          <v-text-field
+            v-model.number="entity.data.estimatedTime"
+            label="Estimated Time (minutes)"
+            type="number"
+            :readonly="!isEditing"
+            :variant="isEditing ? 'outlined' : 'plain'"
+            class="flex-1-1"
+          ></v-text-field>
+          <v-text-field
+            v-model.number="entity.data.actualTime"
+            label="Actual Time (minutes)"
+            type="number"
+            :readonly="!isEditing"
+            :variant="isEditing ? 'outlined' : 'plain'"
+            class="flex-1-1"
+          ></v-text-field>
+        </div>
+
+        <!-- Metadata for view mode -->
+        <div v-if="mode === 'view' && entity.data.created" class="mt-4">
+          <v-divider class="mb-4"></v-divider>
+          <div class="text-caption text-medium-emphasis">
+            <div>Created: {{ new Date(entity.data.created).toLocaleString() }}</div>
+            <div v-if="entity.data.modified">Modified: {{ new Date(entity.data.modified).toLocaleString() }}</div>
+            <div v-if="entity.data.status === 'completed' && entity.data.completedOn">
+              Completed: {{ new Date(entity.data.completedOn).toLocaleString() }}
+            </div>
+            <div v-if="isExternalTask" class="mt-2">
+              <v-chip size="small" color="info" variant="tonal">
+                <v-icon start size="small">mdi-account-arrow-right</v-icon>
+                Assigned Task
+              </v-chip>
+            </div>
+          </div>
+        </div>
+      </v-form>
+    </v-card-text>
+    <v-divider></v-divider>
+    <v-card-actions>
+      <v-btn
+        v-if="mode === 'edit' && entity.id && canDelete"
+        color="error"
+        variant="text"
+        @click="handleDelete"
+      >
+        Delete
+      </v-btn>
+      <v-spacer></v-spacer>
+      <v-btn
+        v-if="mode === 'edit'"
+        variant="text"
+        @click="handleCancel"
+      >
+        Cancel
+      </v-btn>
+      <v-btn
+        v-if="mode === 'edit'"
+        color="primary"
+        variant="flat"
+        @click="handleSave"
+      >
+        Save
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+  <v-card v-else class="task-editor">
+    <v-card-text class="text-center pa-8">
+      <v-icon size="64" color="grey-lighten-1">mdi-checkbox-marked-outline</v-icon>
+      <div class="text-h6 mt-4 text-medium-emphasis">No task selected</div>
+      <div class="text-body-2 text-medium-emphasis mt-2">Select a task to view or edit</div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+
+const props = defineProps<{
+  mode: 'view' | 'edit';
+  entity: any | null;
+  collection: any | null;
+  lists: any[];
+}>();
+
+const emit = defineEmits<{
+  save: [entity: any, collection?: any];
+  delete: [entity: any, collection?: any];
+  edit: [];
+  cancel: [];
+  close: [];
+}>();
+
+const formRef = ref();
+const selectedCollectionId = ref(props.entity?.in || props.collection?.id || props.lists[0]?.id || '');
+
+// Determine permissions based on entity metadata
+const isExternalTask = computed(() => {
+  // Check if task was assigned by another user
+  return props.entity?.data?.external === true || props.entity?.data?.assignedBy;
+});
+
+const canEdit = computed(() => {
+  if (!props.entity) return false;
+  if (props.entity.data?.readonly === true) return false;
+  return true;
+});
+
+const canEditDates = computed(() => {
+  // External/assigned tasks can't change dates
+  return !isExternalTask.value;
+});
+
+const canChangeCollection = computed(() => {
+  // Can't move external tasks to different lists
+  return !isExternalTask.value && !props.entity?.id;
+});
+
+const canDelete = computed(() => {
+  // Can't delete external/readonly tasks
+  return !isExternalTask.value && props.entity?.data?.readonly !== true;
+});
+
+const isEditing = computed(() => props.mode === 'edit');
+
+const dueDate = ref('');
+const startDate = ref('');
+
+// Watch for entity changes to update date fields
+watch(() => props.entity, (newEntity) => {
+  if (newEntity?.data?.dueOn) {
+    dueDate.value = formatDate(new Date(newEntity.data.dueOn));
+  } else {
+    dueDate.value = '';
+  }
+  
+  if (newEntity?.data?.startsOn) {
+    startDate.value = formatDate(new Date(newEntity.data.startsOn));
+  } else {
+    startDate.value = '';
+  }
+  
+  selectedCollectionId.value = newEntity?.in || props.collection?.id || props.lists[0]?.id || '';
+}, { immediate: true });
+
+const listOptions = computed(() => 
+  props.lists.map(list => ({
+    title: list.label || 'Unnamed List',
+    value: list.id,
+  }))
+);
+
+const priorityOptions = [
+  { title: 'Low', value: 3 },
+  { title: 'Medium', value: 2 },
+  { title: 'High', value: 1 },
+];
+
+watch(dueDate, (newVal) => {
+  if (props.entity && isEditing.value) {
+    props.entity.data.dueOn = newVal ? new Date(newVal).toISOString() : null;
+  }
+});
+
+watch(startDate, (newVal) => {
+  if (props.entity && isEditing.value) {
+    props.entity.data.startsOn = newVal ? new Date(newVal).toISOString() : null;
+  }
+});
+
+function formatDate(date: Date): string {
+  return date.toISOString().split('T')[0];
+}
+
+async function handleSave() {
+  const { valid } = await formRef.value.validate();
+  if (!valid) return;
+
+  const targetCollection = props.lists.find(list => list.id === selectedCollectionId.value);
+  emit('save', props.entity, targetCollection || props.collection);
+}
+
+function handleCancel() {
+  emit('cancel');
+}
+
+function handleDelete() {
+  if (props.entity) {
+    const targetCollection = props.lists.find(list => list.id === selectedCollectionId.value);
+    emit('delete', props.entity, targetCollection || props.collection);
+  }
+}
+</script>
+
+<style scoped>
+.gap-2 {
+  gap: 8px;
+}
+
+.gap-4 {
+  gap: 16px;
+}
+
+.flex-1-1 {
+  flex: 1 1 0;
+}
+
+.task-editor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.v-card-title {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: rgb(var(--v-theme-surface));
+  border-bottom: 1px solid rgb(var(--v-border-color));
+}
+
+.task-editor-content {
+  overflow-y: auto;
+  flex: 1 1 auto;
+}
+
+.v-card-actions {
+  position: sticky;
+  bottom: 0;
+  z-index: 2;
+  background: rgb(var(--v-theme-surface));
+  border-top: 1px solid rgb(var(--v-border-color));
+}
+</style>
diff --git a/src/components/TaskView.vue b/src/components/TaskView.vue
new file mode 100644
index 0000000..c6f6d18
--- /dev/null
+++ b/src/components/TaskView.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="task-view">
+    <v-tabs v-model="activeTab" class="mb-4">
+      <v-tab value="all">All Tasks</v-tab>
+      <v-tab value="active">Active</v-tab>
+      <v-tab value="completed">Completed</v-tab>
+    </v-tabs>
+
+    <div class="task-filters mb-4">
+      <v-select
+        v-model="filterPriority"
+        :items="priorityOptions"
+        label="Priority"
+        variant="outlined"
+        density="compact"
+        clearable
+        style="max-width: 200px"
+      ></v-select>
+    </div>
+
+    <v-list>
+      <v-list-item
+        v-for="entity in filteredTasks"
+        :key="entity.id"
+        class="task-item"
+        :class="{ 'completed': entity.data?.status === 'completed' }"
+        @click="$emit('task-click', entity)"
+      >
+        <template #prepend>
+          <v-checkbox-btn
+            :model-value="entity.data?.status === 'completed'"
+            hide-details
+            @click.stop="$emit('toggle-complete', entity.id)"
+          ></v-checkbox-btn>
+        </template>
+
+        <div class="task-content">
+          <div class="task-title" :class="{ 'completed': entity.data?.status === 'completed' }">
+            {{ entity.data?.label || 'Untitled Task' }}
+          </div>
+          <div v-if="entity.data?.description" class="task-description text-caption">
+            {{ entity.data.description }}
+          </div>
+          <div class="task-meta">
+            <span v-if="entity.data?.dueOn" class="due-date">
+              <v-icon size="small">mdi-calendar</v-icon>
+              {{ formatDueDate(new Date(entity.data.dueOn)) }}
+            </span>
+            <v-chip
+              v-if="entity.data?.priority"
+              size="x-small"
+              :class="`priority-${entity.data.priority === 1 ? 'high' : entity.data.priority === 2 ? 'medium' : 'low'}`"
+              class="priority-badge"
+            >
+              {{ entity.data.priority === 1 ? 'high' : entity.data.priority === 2 ? 'medium' : 'low' }}
+            </v-chip>
+            <v-chip
+              v-for="tag in (entity.data?.categories || [])"
+              :key="tag"
+              size="x-small"
+              variant="outlined"
+            >
+              {{ tag }}
+            </v-chip>
+          </div>
+        </div>
+      </v-list-item>
+    </v-list>
+
+    <div v-if="filteredTasks.length === 0" class="text-center pa-8 text-disabled">
+      No tasks found
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+const props = defineProps<{
+  tasks: any[];
+  lists: any[];
+}>();
+
+defineEmits<{
+  'task-click': [task: any];
+  'toggle-complete': [taskId: string];
+}>();
+
+const activeTab = ref('all');
+const filterPriority = ref<string | null>(null);
+
+const priorityOptions = [
+  { title: 'High', value: 'high' },
+  { title: 'Medium', value: 'medium' },
+  { title: 'Low', value: 'low' },
+];
+
+const filteredTasks = computed(() => {
+  let filtered = [...props.tasks];
+
+  // Filter by tab
+  if (activeTab.value === 'active') {
+    filtered = filtered.filter(entity => entity.data?.status !== 'completed');
+  } else if (activeTab.value === 'completed') {
+    filtered = filtered.filter(entity => entity.data?.status === 'completed');
+  }
+
+  // Filter by priority
+  if (filterPriority.value) {
+    const priorityMap = { high: 1, medium: 2, low: 3 };
+    const targetPriority = priorityMap[filterPriority.value];
+    filtered = filtered.filter(entity => entity.data?.priority === targetPriority);
+  }
+
+  // Sort: incomplete first, then by due date, then by priority
+  return filtered.sort((a, b) => {
+    const aCompleted = a.data?.status === 'completed';
+    const bCompleted = b.data?.status === 'completed';
+    if (aCompleted !== bCompleted) {
+      return aCompleted ? 1 : -1;
+    }
+    
+    if (a.data?.dueOn && b.data?.dueOn) {
+      return new Date(a.data.dueOn).getTime() - new Date(b.data.dueOn).getTime();
+    }
+    
+    if (a.data?.dueOn) return -1;
+    if (b.data?.dueOn) return 1;
+    
+    return (a.data?.priority || 4) - (b.data?.priority || 4);
+  });
+});
+
+function formatDueDate(date: Date): string {
+  const today = new Date();
+  const tomorrow = new Date(today);
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  
+  if (date.toDateString() === today.toDateString()) {
+    return 'Today';
+  } else if (date.toDateString() === tomorrow.toDateString()) {
+    return 'Tomorrow';
+  } else if (date < today) {
+    return `Overdue (${date.toLocaleDateString()})`;
+  } else {
+    return date.toLocaleDateString();
+  }
+}
+</script>
+
+<style scoped>
+.task-view {
+  height: 100%;
+}
+
+.task-filters {
+  display: flex;
+  gap: 12px;
+}
+
+.task-item {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  padding: 12px;
+}
+
+.task-item.completed {
+  opacity: 0.6;
+}
+
+.task-content {
+  flex: 1;
+}
+
+.task-title {
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.task-title.completed {
+  text-decoration: line-through;
+}
+
+.task-description {
+  color: rgba(0, 0, 0, 0.6);
+  margin-bottom: 8px;
+}
+
+.task-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.due-date {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.priority-badge {
+  font-weight: 500;
+}
+
+.priority-high {
+  background-color: #ffebee !important;
+  color: #c62828 !important;
+}
+
+.priority-medium {
+  background-color: #fff3e0 !important;
+  color: #ef6c00 !important;
+}
+
+.priority-low {
+  background-color: #e8f5e9 !important;
+  color: #2e7d32 !important;
+}
+</style>
diff --git a/src/components/editors/EventEditorDates.vue b/src/components/editors/EventEditorDates.vue
new file mode 100644
index 0000000..9ffe6fe
--- /dev/null
+++ b/src/components/editors/EventEditorDates.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+interface Props {
+  mode: 'edit' | 'view'
+  startsOn?: string | null
+  endsOn?: string | null
+  timeless?: boolean | null
+  timeZone?: string | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:startsOn': [date: string | null]
+  'update:endsOn': [date: string | null]
+  'update:timeless': [timeless: boolean | null]
+  'update:timeZone': [timeZone: string | null]
+}>()
+
+const timelessValue = computed({
+  get: () => props.timeless ?? false,
+  set: (value) => emit('update:timeless', value)
+})
+
+const timeZoneValue = computed({
+  get: () => props.timeZone ?? '',
+  set: (value) => emit('update:timeZone', value || null)
+})
+
+// Format helpers
+const formatDate = (date: Date): string => {
+  return date.toISOString().split('T')[0]
+}
+
+const formatTime = (date: Date): string => {
+  return date.toTimeString().slice(0, 5)
+}
+
+const formatDateTime = (isoString: string | null | undefined): string => {
+  if (!isoString) return 'Not set'
+  const date = new Date(isoString)
+  return date.toLocaleString()
+}
+
+const parseDateTime = (date: string, time: string): Date => {
+  if (timelessValue.value) {
+    return new Date(date)
+  }
+  return new Date(`${date}T${time}`)
+}
+
+// Date/time fields
+const startDate = ref('')
+const startTime = ref('')
+const endDate = ref('')
+const endTime = ref('')
+
+// Initialize date/time from props
+watch(() => props.startsOn, (newValue) => {
+  if (newValue) {
+    const start = new Date(newValue)
+    startDate.value = formatDate(start)
+    startTime.value = formatTime(start)
+  } else {
+    const now = new Date()
+    startDate.value = formatDate(now)
+    startTime.value = formatTime(now)
+  }
+}, { immediate: true })
+
+watch(() => props.endsOn, (newValue) => {
+  if (newValue) {
+    const end = new Date(newValue)
+    endDate.value = formatDate(end)
+    endTime.value = formatTime(end)
+  } else {
+    const later = new Date(Date.now() + 60 * 60 * 1000)
+    endDate.value = formatDate(later)
+    endTime.value = formatTime(later)
+  }
+}, { immediate: true })
+
+// Update parent when date/time changes
+watch([startDate, startTime], () => {
+  if (props.mode === 'edit') {
+    emit('update:startsOn', parseDateTime(startDate.value, startTime.value).toISOString())
+  }
+})
+
+watch([endDate, endTime], () => {
+  if (props.mode === 'edit') {
+    emit('update:endsOn', parseDateTime(endDate.value, endTime.value).toISOString())
+  }
+})
+</script>
+
+<template>
+  <div class="event-editor-section">
+    <div class="text-subtitle-1 mb-2">Date & Time</div>
+    
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'">
+      <div class="mb-2 pa-2">
+        <div class="mb-1"><strong>Starts:</strong> {{ formatDateTime(startsOn) }}</div>
+        <div class="mb-1"><strong>Ends:</strong> {{ formatDateTime(endsOn) }}</div>
+        <div v-if="timelessValue" class="mb-1">
+          <v-chip size="small" color="info" variant="tonal">
+            <v-icon start size="small">mdi-calendar-blank</v-icon>
+            All Day Event
+          </v-chip>
+        </div>
+        <div v-if="timeZoneValue" class="text-caption text-grey">Time Zone: {{ timeZoneValue }}</div>
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <v-checkbox
+        v-model="timelessValue"
+        label="All day event"
+        density="compact"
+        class="mb-2"
+      />
+
+      <div class="mb-3">
+        <div class="text-subtitle-2 mb-2">Start</div>
+        <v-row dense>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="startDate"
+              label="Start Date"
+              type="date"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col v-if="!timelessValue" cols="12" md="6">
+            <v-text-field
+              v-model="startTime"
+              label="Start Time"
+              type="time"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+      </div>
+
+      <div class="mb-3">
+        <div class="text-subtitle-2 mb-2">End</div>
+        <v-row dense>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="endDate"
+              label="End Date"
+              type="date"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col v-if="!timelessValue" cols="12" md="6">
+            <v-text-field
+              v-model="endTime"
+              label="End Time"
+              type="time"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+      </div>
+
+      <v-text-field
+        v-model="timeZoneValue"
+        label="Time Zone"
+        variant="outlined"
+        density="compact"
+        hint="e.g., America/New_York"
+        persistent-hint
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.event-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
diff --git a/src/components/editors/EventEditorDescription.vue b/src/components/editors/EventEditorDescription.vue
new file mode 100644
index 0000000..6d1c33e
--- /dev/null
+++ b/src/components/editors/EventEditorDescription.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  mode: 'edit' | 'view'
+  description?: string | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:description': [description: string | null]
+}>()
+
+const descriptionValue = computed({
+  get: () => props.description ?? '',
+  set: (value) => emit('update:description', value || null)
+})
+</script>
+
+<template>
+  <div v-if="descriptionValue || mode === 'edit'" class="event-editor-section">
+    <div class="text-subtitle-1 mb-2">Description</div>
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'" class="mb-4">
+      <div class="mb-2 pa-2 white-space-pre-wrap">{{ descriptionValue || 'No description' }}</div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <v-textarea
+        v-model="descriptionValue"
+        label="Description"
+        variant="outlined"
+        density="compact"
+        rows="3"
+        auto-grow
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.event-editor-section {
+  margin-bottom: 1.5rem;
+}
+
+.white-space-pre-wrap {
+  white-space: pre-wrap;
+}
+</style>
diff --git a/src/components/editors/EventEditorLabel.vue b/src/components/editors/EventEditorLabel.vue
new file mode 100644
index 0000000..3647ecd
--- /dev/null
+++ b/src/components/editors/EventEditorLabel.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  mode: 'edit' | 'view'
+  label?: string | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:label': [label: string | null]
+}>()
+
+const labelValue = computed({
+  get: () => props.label ?? '',
+  set: (value) => emit('update:label', value || null)
+})
+</script>
+
+<template>
+  <div class="event-editor-section">
+    <div class="text-subtitle-1 mb-2">Title</div>
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'" class="mb-4">
+      <div class="mb-2 pa-2">{{ labelValue || 'Untitled Event' }}</div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <v-text-field
+        v-model="labelValue"
+        label="Title"
+        variant="outlined"
+        density="compact"
+        :rules="[v => !!v || 'Title is required']"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.event-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
diff --git a/src/components/editors/EventEditorLocations.vue b/src/components/editors/EventEditorLocations.vue
new file mode 100644
index 0000000..dd8d157
--- /dev/null
+++ b/src/components/editors/EventEditorLocations.vue
@@ -0,0 +1,174 @@
+<script setup lang="ts">
+interface Props {
+  mode: 'edit' | 'view'
+  locationsPhysical: Record<string, any>
+  locationsVirtual: Record<string, any>
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'add-location-physical': []
+  'remove-location-physical': [key: string]
+  'add-location-virtual': []
+  'remove-location-virtual': [key: string]
+}>()
+
+const hasLocations = () => {
+  return Object.keys(props.locationsPhysical || {}).length > 0 || 
+         Object.keys(props.locationsVirtual || {}).length > 0
+}
+</script>
+
+<template>
+  <div v-if="hasLocations() || mode === 'edit'" class="event-editor-section">
+    <div class="text-subtitle-1 mb-2">Locations</div>
+
+    <!-- Physical Locations -->
+    <div v-if="Object.keys(locationsPhysical || {}).length > 0 || mode === 'edit'" class="mb-4">
+      <div class="d-flex align-center justify-space-between mb-2">
+        <div class="text-subtitle-2">Physical Locations</div>
+        <v-btn v-if="mode === 'edit'"
+          size="small"
+          variant="outlined"
+          @click="$emit('add-location-physical')">
+          <v-icon left>mdi-plus</v-icon>
+          Add
+        </v-btn>
+      </div>
+
+      <!-- Read-only view -->
+      <div v-if="mode === 'view'">
+        <div v-for="(location, key) in locationsPhysical" :key="key" class="mb-2 pa-2 border rounded">
+          <div class="mb-1"><strong>{{ location.label || 'Location' }}</strong></div>
+          <div v-if="location.timeZone" class="text-caption text-grey">Time Zone: {{ location.timeZone }}</div>
+          <div v-if="location.description" class="text-caption">{{ location.description }}</div>
+        </div>
+      </div>
+
+      <!-- Edit view -->
+      <div v-else>
+        <div v-for="(location, key) in locationsPhysical" :key="key" class="mb-3 pa-3 border rounded">
+          <div class="d-flex align-center justify-space-between mb-2">
+            <strong>{{ location.label || 'Physical Location' }}</strong>
+            <v-btn
+              icon="mdi-delete"
+              size="small"
+              color="error"
+              variant="text"
+              @click="$emit('remove-location-physical', key)">
+            </v-btn>
+          </div>
+
+          <v-row dense>
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="location.label"
+                label="Label"
+                variant="outlined"
+                density="compact"
+              />
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="location.timeZone"
+                label="Time Zone"
+                variant="outlined"
+                density="compact"
+              />
+            </v-col>
+          </v-row>
+
+          <v-textarea
+            v-model="location.description"
+            label="Description"
+            variant="outlined"
+            density="compact"
+            rows="2"
+          />
+
+          <v-select
+            v-model="location.relation"
+            :items="['start', 'end']"
+            label="Relation"
+            variant="outlined"
+            density="compact"
+            clearable
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Virtual Locations -->
+    <div v-if="Object.keys(locationsVirtual || {}).length > 0 || mode === 'edit'">
+      <div class="d-flex align-center justify-space-between mb-2">
+        <div class="text-subtitle-2">Virtual Locations</div>
+        <v-btn v-if="mode === 'edit'"
+          size="small"
+          variant="outlined"
+          @click="$emit('add-location-virtual')">
+          <v-icon left>mdi-plus</v-icon>
+          Add
+        </v-btn>
+      </div>
+
+      <!-- Read-only view -->
+      <div v-if="mode === 'view'">
+        <div v-for="(location, key) in locationsVirtual" :key="key" class="mb-2 pa-2 border rounded">
+          <div class="mb-1"><strong>{{ location.label || 'Virtual Location' }}</strong></div>
+          <div class="text-caption">
+            <a :href="location.location" target="_blank" class="text-primary">{{ location.location }}</a>
+          </div>
+          <div v-if="location.description" class="text-caption text-grey mt-1">{{ location.description }}</div>
+        </div>
+      </div>
+
+      <!-- Edit view -->
+      <div v-else>
+        <div v-for="(location, key) in locationsVirtual" :key="key" class="mb-3 pa-3 border rounded">
+          <div class="d-flex align-center justify-space-between mb-2">
+            <strong>{{ location.label || 'Virtual Location' }}</strong>
+            <v-btn
+              icon="mdi-delete"
+              size="small"
+              color="error"
+              variant="text"
+              @click="$emit('remove-location-virtual', key)">
+            </v-btn>
+          </div>
+
+          <v-text-field
+            v-model="location.label"
+            label="Label"
+            variant="outlined"
+            density="compact"
+            class="mb-2"
+          />
+
+          <v-text-field
+            v-model="location.location"
+            label="URL"
+            variant="outlined"
+            density="compact"
+            class="mb-2"
+            :rules="[v => !!v || 'URL is required']"
+          />
+
+          <v-textarea
+            v-model="location.description"
+            label="Description"
+            variant="outlined"
+            density="compact"
+            rows="2"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.event-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
diff --git a/src/components/editors/EventEditorNotifications.vue b/src/components/editors/EventEditorNotifications.vue
new file mode 100644
index 0000000..4b744eb
--- /dev/null
+++ b/src/components/editors/EventEditorNotifications.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+interface Props {
+  mode: 'edit' | 'view'
+  notifications: Record<string, any>
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'add-notification': []
+  'remove-notification': [key: string]
+}>()
+
+const typeOptions = [
+  { title: 'Email', value: 'email' },
+  { title: 'Visual (Display)', value: 'visual' },
+  { title: 'Audible (Sound)', value: 'audible' }
+]
+
+const patternOptions = [
+  { title: 'Absolute (Specific Time)', value: 'absolute' },
+  { title: 'Relative (Before Event)', value: 'relative' },
+  { title: 'Unknown', value: 'unknown' }
+]
+
+const anchorOptions = [
+  { title: 'Start Time', value: 'start' },
+  { title: 'End Time', value: 'end' }
+]
+
+const formatNotification = (notification: any) => {
+  if (notification.pattern === 'absolute' && notification.when) {
+    return `At ${new Date(notification.when).toLocaleString()}`
+  } else if (notification.pattern === 'relative' && notification.offset) {
+    const anchor = notification.anchor === 'end' ? 'end' : 'start'
+    return `${notification.offset} before ${anchor}`
+  }
+  return 'Custom notification'
+}
+</script>
+
+<template>
+  <div v-if="Object.keys(notifications || {}).length > 0 || mode === 'edit'" class="event-editor-section">
+    <div class="d-flex align-center justify-space-between mb-2">
+      <div class="text-subtitle-1">Notifications</div>
+      <v-btn v-if="mode === 'edit'"
+        size="small"
+        variant="outlined"
+        @click="$emit('add-notification')">
+        <v-icon left>mdi-plus</v-icon>
+        Add Notification
+      </v-btn>
+    </div>
+
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'">
+      <div v-for="(notification, key) in notifications" :key="key" class="mb-2 pa-2 border rounded">
+        <div class="d-flex align-center justify-space-between">
+          <div>
+            <div class="mb-1">
+              <v-icon :icon="notification.type === 'email' ? 'mdi-email' : notification.type === 'audible' ? 'mdi-bell-ring' : 'mdi-bell'" size="small" class="mr-2" />
+              <strong>{{ notification.type || 'Notification' }}</strong>
+            </div>
+            <div class="text-caption text-grey">{{ formatNotification(notification) }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <div v-for="(notification, key) in notifications" :key="key" class="mb-3 pa-3 border rounded">
+        <div class="d-flex align-center justify-space-between mb-2">
+          <strong>Notification</strong>
+          <v-btn
+            icon="mdi-delete"
+            size="small"
+            color="error"
+            variant="text"
+            @click="$emit('remove-notification', key)">
+          </v-btn>
+        </div>
+
+        <v-row dense class="mb-2">
+          <v-col cols="12" md="6">
+            <v-select
+              v-model="notification.type"
+              :items="typeOptions"
+              label="Type"
+              variant="outlined"
+              density="compact"
+              :rules="[v => !!v || 'Type is required']"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-select
+              v-model="notification.pattern"
+              :items="patternOptions"
+              label="Pattern"
+              variant="outlined"
+              density="compact"
+              :rules="[v => !!v || 'Pattern is required']"
+            />
+          </v-col>
+        </v-row>
+
+        <div v-if="notification.pattern === 'absolute'">
+          <v-text-field
+            v-model="notification.when"
+            label="When (ISO Date)"
+            type="datetime-local"
+            variant="outlined"
+            density="compact"
+            hint="Specific date and time for notification"
+          />
+        </div>
+
+        <div v-else-if="notification.pattern === 'relative'">
+          <v-row dense>
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="notification.offset"
+                label="Offset (e.g., PT15M)"
+                variant="outlined"
+                density="compact"
+                hint="ISO 8601 duration before event"
+              />
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-select
+                v-model="notification.anchor"
+                :items="anchorOptions"
+                label="Anchor"
+                variant="outlined"
+                density="compact"
+              />
+            </v-col>
+          </v-row>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.event-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
diff --git a/src/components/editors/EventEditorOccurrence.vue b/src/components/editors/EventEditorOccurrence.vue
new file mode 100644
index 0000000..002259e
--- /dev/null
+++ b/src/components/editors/EventEditorOccurrence.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+interface Props {
+  mode: 'edit' | 'view'
+  pattern: any | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:pattern': [pattern: any | null]
+}>()
+
+const precisionOptions = [
+  { title: 'Yearly', value: 'yearly' },
+  { title: 'Monthly', value: 'monthly' },
+  { title: 'Weekly', value: 'weekly' },
+  { title: 'Daily', value: 'daily' },
+  { title: 'Hourly', value: 'hourly' },
+  { title: 'Minutely', value: 'minutely' },
+  { title: 'Secondly', value: 'secondly' }
+]
+
+const patternTypeOptions = [
+  { title: 'Absolute', value: 'absolute' },
+  { title: 'Relative', value: 'relative' }
+]
+
+const formatRecurrence = (pattern: any) => {
+  if (!pattern) return 'No recurrence'
+  
+  const parts = []
+  parts.push(`Every ${pattern.interval || 1}`)
+  parts.push(pattern.precision || 'day')
+  
+  if (pattern.iterations) {
+    parts.push(`(${pattern.iterations} times)`)
+  } else if (pattern.concludes) {
+    parts.push(`until ${new Date(pattern.concludes).toLocaleDateString()}`)
+  }
+  
+  return parts.join(' ')
+}
+</script>
+
+<template>
+  <div v-if="pattern || mode === 'edit'" class="event-editor-section">
+    <div class="d-flex align-center justify-space-between mb-2">
+      <div class="text-subtitle-1">Recurrence</div>
+      <v-btn v-if="mode === 'edit' && !pattern"
+        size="small"
+        variant="outlined"
+        @click="$emit('update:pattern', { pattern: 'absolute', precision: 'daily', interval: 1 })">
+        <v-icon left>mdi-plus</v-icon>
+        Add Recurrence
+      </v-btn>
+      <v-btn v-else-if="mode === 'edit' && pattern"
+        size="small"
+        variant="text"
+        color="error"
+        @click="$emit('update:pattern', null)">
+        Remove
+      </v-btn>
+    </div>
+
+    <!-- Read-only view -->
+    <div v-if="mode === 'view' && pattern" class="mb-4">
+      <div class="pa-2 border rounded">
+        <div class="mb-1"><strong>{{ formatRecurrence(pattern) }}</strong></div>
+        <div v-if="pattern.onDayOfWeek && pattern.onDayOfWeek.length > 0" class="text-caption text-grey">
+          Days: {{ pattern.onDayOfWeek.join(', ') }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else-if="mode === 'edit' && pattern" class="pa-3 border rounded">
+      <v-row dense class="mb-2">
+        <v-col cols="12" md="6">
+          <v-select
+            v-model="pattern.pattern"
+            :items="patternTypeOptions"
+            label="Pattern Type"
+            variant="outlined"
+            density="compact"
+          />
+        </v-col>
+        <v-col cols="12" md="6">
+          <v-select
+            v-model="pattern.precision"
+            :items="precisionOptions"
+            label="Frequency"
+            variant="outlined"
+            density="compact"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row dense class="mb-2">
+        <v-col cols="12" md="4">
+          <v-text-field
+            v-model.number="pattern.interval"
+            label="Interval"
+            type="number"
+            variant="outlined"
+            density="compact"
+            :rules="[v => v > 0 || 'Must be greater than 0']"
+          />
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-text-field
+            v-model.number="pattern.iterations"
+            label="Iterations"
+            type="number"
+            variant="outlined"
+            density="compact"
+            hint="Leave empty for infinite"
+            clearable
+          />
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-text-field
+            v-model="pattern.concludes"
+            label="End Date"
+            type="date"
+            variant="outlined"
+            density="compact"
+            clearable
+          />
+        </v-col>
+      </v-row>
+
+      <div class="text-caption text-grey mt-2">
+        Advanced recurrence rules (like specific days of week) can be added to the pattern object
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.event-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
diff --git a/src/components/editors/EventEditorParticipants.vue b/src/components/editors/EventEditorParticipants.vue
new file mode 100644
index 0000000..926fa94
--- /dev/null
+++ b/src/components/editors/EventEditorParticipants.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+interface Props {
+  mode: 'edit' | 'view'
+  organizer: any | null
+  participants: Record<string, any>
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:organizer': [organizer: any | null]
+  'add-participant': []
+  'remove-participant': [key: string]
+}>()
+
+const roleOptions = [
+  { title: 'Owner', value: 'owner' },
+  { title: 'Chair', value: 'chair' },
+  { title: 'Attendee', value: 'attendee' },
+  { title: 'Optional', value: 'optional' },
+  { title: 'Informational', value: 'informational' },
+  { title: 'Contact', value: 'contact' }
+]
+
+const statusOptions = [
+  { title: 'None', value: 'none' },
+  { title: 'Accepted', value: 'accepted' },
+  { title: 'Declined', value: 'declined' },
+  { title: 'Tentative', value: 'tentative' },
+  { title: 'Delegated', value: 'delegated' }
+]
+
+const typeOptions = [
+  { title: 'Unknown', value: 'unknown' },
+  { title: 'Individual', value: 'individual' },
+  { title: 'Group', value: 'group' },
+  { title: 'Resource', value: 'resource' },
+  { title: 'Location', value: 'location' }
+]
+
+const hasParticipants = () => {
+  return props.organizer || Object.keys(props.participants || {}).length > 0
+}
+</script>
+
+<template>
+  <div v-if="hasParticipants() || mode === 'edit'" class="event-editor-section">
+    <div class="text-subtitle-1 mb-2">Participants</div>
+
+    <!-- Organizer -->
+    <div v-if="organizer || mode === 'edit'" class="mb-4">
+      <div class="text-subtitle-2 mb-2">Organizer</div>
+      
+      <!-- Read-only view -->
+      <div v-if="mode === 'view' && organizer" class="pa-2 border rounded">
+        <div class="mb-1"><strong>{{ organizer.name || organizer.address }}</strong></div>
+        <div class="text-caption text-grey">{{ organizer.address }}</div>
+      </div>
+
+      <!-- Edit view -->
+      <div v-else-if="mode === 'edit'" class="pa-3 border rounded">
+        <v-row dense>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="organizer.name"
+              label="Name"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="organizer.address"
+              label="Email/Address"
+              variant="outlined"
+              density="compact"
+              :rules="[v => !!v || 'Address is required']"
+            />
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+
+    <!-- Participants List -->
+    <div v-if="Object.keys(participants || {}).length > 0 || mode === 'edit'">
+      <div class="d-flex align-center justify-space-between mb-2">
+        <div class="text-subtitle-2">Attendees</div>
+        <v-btn v-if="mode === 'edit'"
+          size="small"
+          variant="outlined"
+          @click="$emit('add-participant')">
+          <v-icon left>mdi-plus</v-icon>
+          Add Participant
+        </v-btn>
+      </div>
+
+      <!-- Read-only view -->
+      <div v-if="mode === 'view'">
+        <div v-for="(participant, key) in participants" :key="key" class="mb-2 pa-2 border rounded">
+          <div class="d-flex align-center justify-space-between">
+            <div>
+              <div class="mb-1"><strong>{{ participant.name || participant.address }}</strong></div>
+              <div class="text-caption text-grey">
+                {{ participant.address }}
+                <span v-if="participant.type"> | {{ participant.type }}</span>
+              </div>
+              <div v-if="participant.roles && participant.roles.length > 0" class="mt-1">
+                <v-chip
+                  v-for="role in participant.roles"
+                  :key="role"
+                  size="x-small"
+                  class="mr-1"
+                  variant="tonal"
+                >
+                  {{ role }}
+                </v-chip>
+              </div>
+            </div>
+            <v-chip
+              v-if="participant.status && participant.status !== 'none'"
+              :color="participant.status === 'accepted' ? 'success' : participant.status === 'declined' ? 'error' : 'warning'"
+              size="small"
+              variant="tonal"
+            >
+              {{ participant.status }}
+            </v-chip>
+          </div>
+        </div>
+      </div>
+
+      <!-- Edit view -->
+      <div v-else>
+        <div v-for="(participant, key) in participants" :key="key" class="mb-3 pa-3 border rounded">
+          <div class="d-flex align-center justify-space-between mb-2">
+            <strong>{{ participant.name || 'Participant' }}</strong>
+            <v-btn
+              icon="mdi-delete"
+              size="small"
+              color="error"
+              variant="text"
+              @click="$emit('remove-participant', key)">
+            </v-btn>
+          </div>
+
+          <v-row dense class="mb-2">
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="participant.name"
+                label="Name"
+                variant="outlined"
+                density="compact"
+              />
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="participant.address"
+                label="Email/Address"
+                variant="outlined"
+                density="compact"
+                :rules="[v => !!v || 'Address is required']"
+              />
+            </v-col>
+          </v-row>
+
+          <v-row dense class="mb-2">
+            <v-col cols="12" md="6">
+              <v-select
+                v-model="participant.type"
+                :items="typeOptions"
+                label="Type"
+                variant="outlined"
+                density="compact"
+              />
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-select
+                v-model="participant.status"
+                :items="statusOptions"
+                label="Status"
+                variant="outlined"
+                density="compact"
+              />
+            </v-col>
+          </v-row>
+
+          <v-select
+            v-model="participant.roles"
+            :items="roleOptions"
+            label="Roles"
+            variant="outlined"
+            density="compact"
+            multiple
+            chips
+            closable-chips
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.event-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
diff --git a/src/components/editors/EventEditorTags.vue b/src/components/editors/EventEditorTags.vue
new file mode 100644
index 0000000..a8913b2
--- /dev/null
+++ b/src/components/editors/EventEditorTags.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  mode: 'edit' | 'view'
+  tags?: string[]
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:tags': [tags: string[]]
+}>()
+
+const tagsValue = computed({
+  get: () => props.tags ?? [],
+  set: (value) => emit('update:tags', value)
+})
+</script>
+
+<template>
+  <div v-if="tagsValue.length > 0 || mode === 'edit'" class="event-editor-section">
+    <div class="text-subtitle-1 mb-2">Tags</div>
+    
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'" class="mb-4">
+      <div v-if="tagsValue.length > 0" class="pa-2">
+        <v-chip
+          v-for="(tag, index) in tagsValue"
+          :key="index"
+          size="small"
+          class="mr-1 mb-1"
+          variant="tonal"
+        >
+          {{ tag }}
+        </v-chip>
+      </div>
+      <div v-else class="pa-2 text-grey">No tags</div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <v-combobox
+        v-model="tagsValue"
+        label="Tags"
+        variant="outlined"
+        density="compact"
+        multiple
+        chips
+        closable-chips
+        hint="Press Enter to add tags"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.event-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
diff --git a/src/integrations.ts b/src/integrations.ts
new file mode 100644
index 0000000..9302e4f
--- /dev/null
+++ b/src/integrations.ts
@@ -0,0 +1,34 @@
+import type { ModuleIntegrations } from "@KTXC/types/moduleTypes";
+
+const integrations: ModuleIntegrations = {
+  // Main application menu items
+  app_menu: [
+    {
+      id: 'chrono-calendar',
+      label: 'Calendar',
+      path: '/calendar',
+      icon: 'mdi-calendar',
+      priority: 10,
+    },
+    {
+      id: 'chrono-tasks',
+      label: 'Tasks',
+      path: '/tasks',
+      icon: 'mdi-checkbox-marked-outline',
+      priority: 20,
+    },
+  ],
+
+  // Settings tab for chrono configuration
+  // settings_tabs: [
+  //   {
+  //     id: 'chrono-settings',
+  //     label: 'Chrono Settings',
+  //     icon: 'mdi-clock-outline',
+  //     priority: 50,
+  //     component: () => import('@/views/ChronoSettings.vue'),
+  //   },
+  // ],
+};
+
+export default integrations;
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..d40fb87
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,8 @@
+import routes from '@/routes'
+import integrations from '@/integrations'
+
+// CSS filename is injected by the vite plugin at build time
+export const css = ['__CSS_FILENAME_PLACEHOLDER__']
+
+export { routes, integrations }
+
diff --git a/src/pages/ChronoPage.vue b/src/pages/ChronoPage.vue
new file mode 100644
index 0000000..b03e2a7
--- /dev/null
+++ b/src/pages/ChronoPage.vue
@@ -0,0 +1,641 @@
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useDisplay } from 'vuetify';
+import { useModuleStore } from '@KTXC/stores/moduleStore';
+import { useCollectionsStore } from '@ChronoManager/stores/collectionsStore';
+import { useEntitiesStore } from '@ChronoManager/stores/entitiesStore';
+import { useServicesStore } from '@ChronoManager/stores/servicesStore';
+import { CollectionObject } from '@ChronoManager/models/collection';
+import { EntityObject } from '@ChronoManager/models/entity';
+import { ServiceObject } from '@ChronoManager/models/service';
+import type { CalendarView as CalendarViewType } from '@/types';
+import CollectionList from '@/components/CollectionList.vue';
+import CollectionEditor from '@/components/CollectionEditor.vue';
+import CalendarView from '@/components/CalendarView.vue';
+import TaskView from '@/components/TaskView.vue';
+import EventEditor from '@/components/EventEditor.vue';
+import TaskEditor from '@/components/TaskEditor.vue';
+import MiniCalendar from '@/components/MiniCalendar.vue';
+
+// Vuetify display
+const display = useDisplay();
+
+// Check if chrono manager is available
+const moduleStore = useModuleStore();
+const isChronoManagerAvailable = computed(() => {
+  return moduleStore.has('chrono_manager') || moduleStore.has('ChronoManager')
+});
+
+// Stores
+const collectionsStore = useCollectionsStore();
+const entitiesStore = useEntitiesStore();
+const servicesStore = useServicesStore();
+
+// View state
+const viewMode = ref<'calendar' | 'tasks'>('calendar');
+const calendarView = ref<CalendarViewType>('days');
+const currentDate = ref(new Date());
+const sidebarVisible = ref(true);
+
+// Data - using manager objects directly
+const collections = ref<CollectionObject[]>([]);
+const entities = ref<EntityObject[]>([]);
+const selectedCollection = ref<CollectionObject | null>(null);
+
+// Computed - filter collections and entities
+const calendars = computed(() => {
+  return collections.value.filter(col => col.contents?.event);
+});
+
+const taskLists = computed(() => {
+  return collections.value.filter(col => col.contents?.task);
+});
+
+const events = computed(() => {
+  return entities.value.filter(entity => entity.data && (entity.data as any).type === 'event');
+});
+
+const tasks = computed(() => {
+  return entities.value.filter(entity => entity.data && (entity.data as any).type === 'task');
+});
+
+// Dialog state
+const showEventEditor = ref(false);
+const showTaskEditor = ref(false);
+const showCollectionEditor = ref(false);
+const selectedEntity = ref<EntityObject | null>(null);
+const entityEditorMode = ref<'edit' | 'view'>('view');
+const editingCollection = ref<CollectionObject | null>(null);
+const collectionEditorMode = ref<'create' | 'edit'>('create');
+const collectionEditorType = ref<'calendar' | 'tasklist'>('calendar');
+
+// Computed
+const isTaskView = computed(() => viewMode.value === 'tasks');
+
+const filteredEvents = computed(() => {
+  const visibleCalendarIds = calendars.value
+    .filter(cal => cal.enabled !== false)
+    .map(cal => cal.id);
+  
+  return events.value.filter(event => 
+    visibleCalendarIds.includes(event.in)
+  );
+});
+
+const filteredTasks = computed(() => {
+  return tasks.value;
+});
+
+// Methods
+function selectCalendar(calendar: CollectionObject) {
+  selectedCollection.value = calendar;
+  console.log('[Chrono] - Selected calendar:', calendar);
+}
+
+function createCalendar() {
+  editingCollection.value = collectionsStore.fresh();
+  editingCollection.value.contents = { event: true };
+  collectionEditorMode.value = 'create';
+  collectionEditorType.value = 'calendar';
+  showCollectionEditor.value = true;
+}
+
+function editCalendar(collection: CollectionObject) {
+  editingCollection.value = collection;
+  collectionEditorMode.value = 'edit';
+  collectionEditorType.value = 'calendar';
+  showCollectionEditor.value = true;
+}
+
+async function toggleCalendarVisibility(collection: CollectionObject) {
+  try {
+    await collectionsStore.modify(collection);
+    console.log('[Chrono] - Toggled calendar visibility:', collection);
+  } catch (error) {
+    console.error('[Chrono] - Failed to toggle calendar visibility:', error);
+  }
+}
+
+function selectTaskList(list: CollectionObject) {
+  selectedCollection.value = list;
+  console.log('[Chrono] - Selected task list:', list);
+}
+
+function createTaskList() {
+  editingCollection.value = collectionsStore.fresh();
+  editingCollection.value.contents = { task: true };
+  collectionEditorMode.value = 'create';
+  collectionEditorType.value = 'tasklist';
+  showCollectionEditor.value = true;
+}
+
+function editTaskList(collection: CollectionObject) {
+  editingCollection.value = collection;
+  collectionEditorMode.value = 'edit';
+  collectionEditorType.value = 'tasklist';
+  showCollectionEditor.value = true;
+}
+
+function createEvent() {
+  // Select first calendar collection or use selected
+  if (!selectedCollection.value && calendars.value.length > 0) {
+    selectedCollection.value = calendars.value[0];
+  }
+
+  if (!selectedCollection.value) {
+    console.warn('[Chrono] - No calendar collection available');
+    return;
+  }
+
+  // Create fresh event entity
+  selectedEntity.value = entitiesStore.fresh('event');
+  selectedEntity.value.in = selectedCollection.value.id;
+  entityEditorMode.value = 'edit';
+  showEventEditor.value = true;
+}
+
+function editEvent(entity: EntityObject) {
+  selectedEntity.value = entity;
+  entityEditorMode.value = 'view';
+  showEventEditor.value = true;
+}
+
+async function saveEvent(entity: EntityObject, collection?: CollectionObject | null) {
+  try {
+    if (!(collection instanceof CollectionObject)) {
+      collection = selectedCollection.value;
+    }
+    if (!collection) {
+      console.error('[Chrono] - No collection selected');
+      return;
+    }
+
+    if (entity.data) {
+      entity.data.modified = new Date();
+    }
+
+    if (entity.id === null) {
+      entity.data.created = new Date();
+      selectedEntity.value = await entitiesStore.create(collection, entity);
+    } else {
+      selectedEntity.value = await entitiesStore.modify(collection, entity);
+    }
+
+    entityEditorMode.value = 'view';
+  } catch (error) {
+    console.error('[Chrono] - Failed to save event:', error);
+  }
+}
+
+async function deleteEvent(entity: EntityObject, collection?: CollectionObject | null) {
+  try {
+    if (!(collection instanceof CollectionObject)) {
+      collection = collections.value.find(c => c.id === entity.in);
+    }
+    if (!collection) {
+      console.error('[Chrono] - No collection found');
+      return;
+    }
+
+    await entitiesStore.destroy(collection, entity);
+    selectedEntity.value = null;
+    entityEditorMode.value = 'view';
+    showEventEditor.value = false;
+  } catch (error) {
+    console.error('[Chrono] - Failed to delete event:', error);
+  }
+}
+
+function handleDateClick(date: Date) {
+  // Select first calendar collection or use selected
+  if (!selectedCollection.value && calendars.value.length > 0) {
+    selectedCollection.value = calendars.value[0];
+  }
+
+  if (!selectedCollection.value) {
+    console.warn('[Chrono] - No calendar collection available');
+    return;
+  }
+
+  selectedEntity.value = entitiesStore.fresh('event');
+  selectedEntity.value.in = selectedCollection.value.id;
+  if (selectedEntity.value.data) {
+    selectedEntity.value.data.startsOn = date;
+    selectedEntity.value.data.endsOn = new Date(date.getTime() + 60 * 60 * 1000);
+  }
+  entityEditorMode.value = 'edit';
+  showEventEditor.value = true;
+}
+
+function handleEditorEdit() {
+  console.log('[Chrono] - Editor editing started');
+  entityEditorMode.value = 'edit';
+}
+
+function handleEditorCancel() {
+  console.log('[Chrono] - Editor editing cancelled');
+  entityEditorMode.value = 'view';
+}
+
+function handleEditorClose() {
+  console.log('[Chrono] - Editor closed');
+  selectedEntity.value = null;
+  entityEditorMode.value = 'view';
+  showEventEditor.value = false;
+  showTaskEditor.value = false;
+}
+
+function createTask() {
+  // Select first task list collection or use selected
+  if (!selectedCollection.value && taskLists.value.length > 0) {
+    selectedCollection.value = taskLists.value[0];
+  }
+
+  if (!selectedCollection.value) {
+    console.warn('[Chrono] - No task list available');
+    return;
+  }
+
+  // Create fresh task entity
+  selectedEntity.value = entitiesStore.fresh('task');
+  selectedEntity.value.in = selectedCollection.value.id;
+  entityEditorMode.value = 'edit';
+  showTaskEditor.value = true;
+}
+
+function editTask(entity: EntityObject) {
+  selectedEntity.value = entity;
+  entityEditorMode.value = 'view';
+  showTaskEditor.value = true;
+}
+
+async function saveTask(entity: EntityObject, collection?: CollectionObject | null) {
+  try {
+    if (!(collection instanceof CollectionObject)) {
+      collection = selectedCollection.value;
+    }
+    if (!collection) {
+      console.error('[Chrono] - No collection selected');
+      return;
+    }
+
+    if (entity.data) {
+      entity.data.modified = new Date();
+    }
+
+    if (entity.id === null) {
+      entity.data.created = new Date();
+      selectedEntity.value = await entitiesStore.create(collection, entity);
+    } else {
+      selectedEntity.value = await entitiesStore.modify(collection, entity);
+    }
+
+    entityEditorMode.value = 'view';
+  } catch (error) {
+    console.error('[Chrono] - Failed to save task:', error);
+  }
+}
+
+async function deleteTask(entity: EntityObject, collection?: CollectionObject | null) {
+  try {
+    if (!(collection instanceof CollectionObject)) {
+      collection = collections.value.find(c => c.id === entity.in);
+    }
+    if (!collection) {
+      console.error('[Chrono] - No collection found');
+      return;
+    }
+
+    await entitiesStore.destroy(collection, entity);
+    selectedEntity.value = null;
+    entityEditorMode.value = 'view';
+    showTaskEditor.value = false;
+  } catch (error) {
+    console.error('[Chrono] - Failed to delete task:', error);
+  }
+}
+
+async function toggleTaskComplete(taskId: string | number) {
+  try {
+    const entity = entities.value.find(e => e.id === taskId);
+    if (!entity || !entity.data) return;
+
+    const collection = collections.value.find(c => c.id === entity.in);
+    if (!collection) return;
+
+    const taskData = entity.data as any;
+    const isCompleted = taskData.status === 'completed';
+
+    taskData.status = isCompleted ? 'needs-action' : 'completed';
+    taskData.completedOn = isCompleted ? null : new Date();
+    taskData.progress = isCompleted ? null : 100;
+    taskData.modified = new Date();
+
+    await entitiesStore.modify(collection, entity);
+  } catch (error) {
+    console.error('[Chrono] - Failed to toggle task completion:', error);
+  }
+}
+
+async function saveCollection(collection: CollectionObject, service: ServiceObject) {
+  try {
+    if (collectionEditorMode.value === 'create') {
+      await collectionsStore.create(service, collection);
+      console.log('[Chrono] - Created collection:', collection);
+    } else {
+      await collectionsStore.modify(collection);
+      console.log('[Chrono] - Modified collection:', collection);
+    }
+    // Reload collections
+    collections.value = await collectionsStore.list();
+  } catch (error) {
+    console.error('[Chrono] - Failed to save collection:', error);
+  }
+}
+
+async function deleteCollection(collection: CollectionObject) {
+  try {
+    await collectionsStore.destroy(collection);
+    console.log('[Chrono] - Deleted collection:', collection);
+    // Reload collections
+    collections.value = await collectionsStore.list();
+    if (selectedCollection.value?.id === collection.id) {
+      selectedCollection.value = null;
+    }
+  } catch (error) {
+    console.error('[Chrono] - Failed to delete collection:', error);
+  }
+}
+
+// Initialize data from stores
+onMounted(async () => {
+  try {
+    // Load collections (calendars and task lists)
+    collections.value = await collectionsStore.list();
+
+    // Load entities (events and tasks)
+    entities.value = await entitiesStore.list(null, null, null);
+
+    console.log('[Chrono] - Loaded data from ChronoManager:', {
+      collections: collections.value.length,
+      calendars: calendars.value.length,
+      events: events.value.length,
+      tasks: tasks.value.length,
+      taskLists: taskLists.value.length,
+    });
+  } catch (error) {
+    console.error('[Chrono] - Failed to load data from ChronoManager:', error);
+  }
+});
+</script>
+
+<template>
+  <div class="chrono-container">
+    <!-- Top Navigation Bar -->
+    <v-app-bar elevation="0" class="chrono-toolbar border-b">
+      <template #prepend>
+        <v-btn
+          icon="mdi-menu"
+          variant="text"
+          @click="sidebarVisible = !sidebarVisible"
+        ></v-btn>
+      </template>
+
+      <v-app-bar-title class="d-flex align-center">
+        <v-icon size="28" color="primary" class="mr-2">mdi-calendar-month</v-icon>
+        <span class="text-h6 font-weight-bold">Chrono</span>
+      </v-app-bar-title>
+
+      <v-spacer></v-spacer>
+
+      <!-- View Toggle -->
+      <v-btn-toggle
+        v-model="viewMode"
+        color="primary"
+        variant="outlined"
+        density="compact"
+        class="mr-2"
+      >
+        <v-btn value="calendar" size="small">
+          <v-icon>mdi-calendar</v-icon>
+          <span class="ml-1 d-none d-sm-inline">Calendar</span>
+        </v-btn>
+        <v-btn value="tasks" size="small">
+          <v-icon>mdi-checkbox-marked-outline</v-icon>
+          <span class="ml-1 d-none d-sm-inline">Tasks</span>
+        </v-btn>
+      </v-btn-toggle>
+
+      <!-- View Switcher for Calendar -->
+      <v-btn-toggle
+        v-if="!isTaskView"
+        v-model="calendarView"
+        color="primary"
+        variant="outlined"
+        density="compact"
+        mandatory
+        class="mr-2"
+      >
+        <v-btn value="days" size="small">Days</v-btn>
+        <v-btn value="month" size="small">Month</v-btn>
+        <v-btn value="agenda" size="small">Agenda</v-btn>
+      </v-btn-toggle>
+    </v-app-bar>
+
+    <!-- Main Content Area -->
+    <div class="chrono-content">
+      <!-- Sidebar Navigation Drawer -->
+      <v-navigation-drawer
+        v-model="sidebarVisible"
+        :permanent="display.mdAndUp.value"
+        :temporary="display.smAndDown.value"
+        width="280"
+        class="chrono-sidebar"
+      >
+        <div class="pa-4">
+          <CollectionList
+            v-if="!isTaskView"
+            :selected-collection="selectedCollection"
+            type="calendar"
+            @select="selectCalendar"
+            @edit="editCalendar"
+            @toggle-visibility="toggleCalendarVisibility"
+          />
+          <CollectionList
+            v-else
+            :selected-collection="selectedCollection"
+            type="tasklist"
+            @select="selectTaskList"
+            @edit="editTaskList"
+          />
+          
+          <v-btn
+            v-if="!isTaskView"
+            variant="tonal"
+            color="primary"
+            block
+            class="mt-3"
+            @click="createCalendar"
+          >
+            <v-icon start>mdi-plus</v-icon>
+            New Calendar
+          </v-btn>
+          <v-btn
+            v-else
+            variant="tonal"
+            color="primary"
+            block
+            class="mt-3"
+            @click="createTaskList"
+          >
+            <v-icon start>mdi-plus</v-icon>
+            New Task List
+          </v-btn>
+
+          <!-- Mini Calendar Widget -->
+          <v-card v-if="!isTaskView" class="mt-4" variant="outlined">
+            <v-card-text class="pa-2">
+              <MiniCalendar v-model="currentDate" />
+            </v-card-text>
+          </v-card>
+        </div>
+      </v-navigation-drawer>
+
+      <!-- Main Calendar/Task View -->
+      <div class="chrono-main">
+        <v-alert
+          v-if="!isChronoManagerAvailable"
+          type="warning"
+          variant="tonal"
+          closable
+          class="mb-4"
+        >
+          <v-alert-title class="d-flex align-center">
+            <v-icon icon="mdi-alert-circle" class="mr-2" />
+            Chrono Manager Not Available
+          </v-alert-title>
+          <div class="mt-2">
+            <p>
+              The Chrono Manager module is not installed or enabled. 
+              This module requires the <strong>chrono_manager</strong> module to function properly.
+            </p>
+            <p class="mt-2 mb-0">
+              Please contact your system administrator to install and enable the 
+              <code>chrono_manager</code> module.
+            </p>
+          </div>
+        </v-alert>
+
+        <CalendarView
+          v-if="!isTaskView"
+          :view="calendarView"
+          :current-date="currentDate"
+          :events="filteredEvents"
+          :calendars="calendars"
+          @event-click="editEvent"
+          @date-click="handleDateClick"
+        />
+
+        <TaskView
+          v-else
+          :tasks="filteredTasks"
+          :lists="taskLists"
+          @task-click="editTask"
+          @toggle-complete="toggleTaskComplete"
+        />
+      </div>
+    </div>
+
+    <!-- Event Editor Dialog -->
+    <v-dialog v-model="showEventEditor" max-width="800px" scrollable>
+      <EventEditor
+        v-if="showEventEditor"
+        :mode="entityEditorMode"
+        :entity="selectedEntity"
+        :collection="selectedCollection"
+        :calendars="calendars"
+        @save="saveEvent"
+        @delete="deleteEvent"
+        @edit="handleEditorEdit"
+        @cancel="handleEditorCancel"
+        @close="handleEditorClose"
+      />
+    </v-dialog>
+
+    <!-- Task Editor Dialog -->
+    <v-dialog v-model="showTaskEditor" max-width="700px" scrollable>
+      <TaskEditor
+        v-if="showTaskEditor"
+        :mode="entityEditorMode"
+        :entity="selectedEntity"
+        :collection="selectedCollection"
+        :lists="taskLists"
+        @save="saveTask"
+        @delete="deleteTask"
+        @edit="handleEditorEdit"
+        @cancel="handleEditorCancel"
+        @close="handleEditorClose"
+      />
+    </v-dialog>
+
+    <!-- Collection Editor Dialog -->
+    <CollectionEditor
+      v-model="showCollectionEditor"
+      :collection="editingCollection"
+      :mode="collectionEditorMode"
+      :type="collectionEditorType"
+      @save="saveCollection"
+      @delete="deleteCollection"
+    />
+  </div>
+</template>
+
+<style scoped>
+.chrono-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  isolation: isolate; /* Create stacking context to prevent style leakage */
+}
+
+.chrono-toolbar {
+  border-bottom: 1px solid rgb(var(--v-border-color)) !important;
+}
+
+.chrono-content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.chrono-sidebar {
+  border-right: 1px solid rgb(var(--v-border-color)) !important;
+  overflow-y: auto;
+}
+
+.chrono-main {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.border-b {
+  border-bottom: 1px solid rgb(var(--v-border-color));
+}
+
+/* Responsive adjustments */
+@media (max-width: 960px) {
+  .chrono-main {
+    padding: 16px;
+  }
+}
+
+@media (max-width: 600px) {
+  .chrono-main {
+    padding: 12px;
+  }
+}
+</style>
diff --git a/src/routes.ts b/src/routes.ts
new file mode 100644
index 0000000..90bd974
--- /dev/null
+++ b/src/routes.ts
@@ -0,0 +1,19 @@
+const routes = [
+  {
+    name: 'index',
+    path: '/',
+    redirect: { name: 'calendar' }
+  },
+  {
+    name: 'calendar',
+    path: '/calendar',
+    component: () => import('@/pages/ChronoPage.vue'),
+  },
+  {
+    name: 'tasks',
+    path: '/tasks',
+    component: () => import('@/pages/ChronoPage.vue'),
+  },
+]
+
+export default routes
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..30b4e64
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,201 @@
+/* Chrono Module Styles - All scoped to .chrono-container and using theme colors */
+
+/* Ensure grids display properly within Chrono module only */
+.chrono-container .calendar-grid,
+.chrono-container .mini-calendar {
+  display: grid !important;
+}
+
+.chrono-container .calendar-grid {
+  grid-template-columns: repeat(7, 1fr) !important;
+  grid-template-rows: auto repeat(6, 1fr) !important;
+}
+
+.chrono-container .mini-calendar {
+  grid-template-columns: repeat(7, 1fr) !important;
+}
+
+.chrono-container .week-days,
+.chrono-container .week-view,
+.chrono-container .day-view {
+  display: flex !important;
+  flex-direction: row !important;
+}
+
+.chrono-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.chrono-container .chrono-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid rgb(var(--v-border-color));
+}
+
+.chrono-container .chrono-content {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.chrono-container .chrono-sidebar {
+  width: 280px;
+  border-right: 1px solid rgb(var(--v-border-color));
+  overflow-y: auto;
+}
+
+.chrono-container .chrono-main {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+/* Calendar specific styles - scoped to chrono-container */
+.chrono-container .calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 1px;
+  background-color: rgb(var(--v-border-color));
+  border: 1px solid rgb(var(--v-border-color));
+}
+
+.chrono-container .calendar-cell {
+  background-color: rgb(var(--v-theme-surface));
+  min-height: 100px;
+  padding: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.chrono-container .calendar-cell:hover {
+  background-color: rgb(var(--v-theme-surface-variant));
+}
+
+.chrono-container .calendar-cell.today {
+  background-color: rgb(var(--v-theme-primary), 0.08);
+}
+
+.chrono-container .calendar-event {
+  padding: 2px 6px;
+  margin: 2px 0;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Task specific styles - scoped to chrono-container */
+.chrono-container .task-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 12px;
+  border-bottom: 1px solid rgb(var(--v-border-color));
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.chrono-container .task-item:hover {
+  background-color: rgb(var(--v-theme-surface-variant));
+}
+
+.chrono-container .task-item.completed {
+  opacity: 0.6;
+}
+
+.chrono-container .task-checkbox {
+  margin-right: 12px;
+}
+
+.chrono-container .task-content {
+  flex: 1;
+}
+
+.chrono-container .task-title {
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.chrono-container .task-title.completed {
+  text-decoration: line-through;
+}
+
+.chrono-container .task-meta {
+  display: flex;
+  gap: 12px;
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.chrono-container .priority-badge {
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.chrono-container .priority-high {
+  background-color: rgb(var(--v-theme-error), 0.1);
+  color: rgb(var(--v-theme-error));
+}
+
+.chrono-container .priority-medium {
+  background-color: rgb(var(--v-theme-warning), 0.1);
+  color: rgb(var(--v-theme-warning));
+}
+
+.chrono-container .priority-low {
+  background-color: rgb(var(--v-theme-success), 0.1);
+  color: rgb(var(--v-theme-success));
+}
+
+/* Event Viewer Popup - applied globally since popup is rendered at fixed position */
+.event-popup {
+  position: fixed;
+  z-index: 9999;
+  pointer-events: auto;
+  transform: translate(-50%, -100%);
+  margin-top: -10px;
+  width: 320px;
+  min-height: 150px;
+}
+
+.event-popup-card {
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.event-popup-card:hover {
+  transform: scale(1.02);
+}
+
+.event-popup-details {
+  font-size: 13px;
+}
+
+.event-popup .text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 250px;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.event-popup .border-t {
+  border-top: 1px solid rgba(var(--v-border-color), 0.5);
+}
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..102da54
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,15 @@
+/**
+ * Chrono Module Types
+ * 
+ * Local UI types for the Chrono module
+ */
+
+// Local UI-specific types
+export type CalendarView = 'days' | 'month' | 'agenda';
+
+export interface ViewState {
+  currentView: CalendarView;
+  currentDate: Date;
+  selectedCalendars: string[];
+  showTasks: boolean;
+}
diff --git a/src/utils/calendarHelpers.ts b/src/utils/calendarHelpers.ts
new file mode 100644
index 0000000..cf4ef33
--- /dev/null
+++ b/src/utils/calendarHelpers.ts
@@ -0,0 +1,193 @@
+/**
+ * Calendar Helper Utilities
+ * Shared logic for multi-day event handling across calendar views
+ */
+
+export interface MultiDaySegment {
+  entity: any;
+  startCol: number;
+  span: number;
+  lane: number;
+  isStart: boolean;
+  isEnd: boolean;
+}
+
+export interface LaneAssignment {
+  segments: MultiDaySegment[];
+  laneCount: number;
+}
+
+/**
+ * Get the start of day (midnight) for a given date
+ */
+export function startOfDay(date: Date): Date {
+  const d = new Date(date);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+
+/**
+ * Calculate the difference in days between two dates
+ */
+export function daysDiff(a: Date, b: Date): number {
+  const msPerDay = 24 * 60 * 60 * 1000;
+  return Math.round((startOfDay(b).getTime() - startOfDay(a).getTime()) / msPerDay);
+}
+
+/**
+ * Check if an event spans multiple days
+ */
+export function isMultiDay(entity: any): boolean {
+  if (!entity.data?.startsOn) return false;
+  const start = startOfDay(new Date(entity.data.startsOn));
+  const end = entity.data?.endsOn ? startOfDay(new Date(entity.data.endsOn)) : start;
+  return daysDiff(start, end) > 0;
+}
+
+/**
+ * Check if an event is an all-day event (no specific time, or spans full day)
+ */
+export function isAllDay(entity: any): boolean {
+  if (!entity.data?.startsOn) return false;
+  
+  // Explicit all-day flag
+  if (entity.data?.allDay === true) return true;
+  
+  // Multi-day events are treated as all-day in the days view
+  if (isMultiDay(entity)) return true;
+  
+  return false;
+}
+
+/**
+ * Check if an event overlaps with a date range
+ */
+export function eventOverlapsRange(entity: any, rangeStart: Date, rangeEnd: Date): boolean {
+  if (!entity.data?.startsOn) return false;
+  const eventStart = startOfDay(new Date(entity.data.startsOn));
+  const eventEnd = entity.data?.endsOn ? startOfDay(new Date(entity.data.endsOn)) : eventStart;
+  return eventStart <= rangeEnd && eventEnd >= rangeStart;
+}
+
+/**
+ * Check if an event occurs on a specific date
+ */
+export function eventOnDate(entity: any, date: Date): boolean {
+  if (!entity.data?.startsOn) return false;
+  const eventStart = startOfDay(new Date(entity.data.startsOn));
+  const eventEnd = entity.data?.endsOn ? startOfDay(new Date(entity.data.endsOn)) : eventStart;
+  const targetDate = startOfDay(date);
+  return eventStart <= targetDate && eventEnd >= targetDate;
+}
+
+/**
+ * Get multi-day event segments for a given date range with lane assignments
+ * Used for rendering spanning events across columns
+ */
+export function getMultiDaySegments(
+  events: any[],
+  rangeStart: Date,
+  rangeEnd: Date,
+  columnCount: number,
+  getColumnIndex: (date: Date) => number
+): LaneAssignment {
+  const segments: MultiDaySegment[] = [];
+  
+  // Filter multi-day/all-day events that overlap this range
+  const multiDayEvents = events.filter(entity => {
+    if (!entity.data?.startsOn) return false;
+    if (!isAllDay(entity)) return false;
+    return eventOverlapsRange(entity, rangeStart, rangeEnd);
+  });
+  
+  // Sort: longer events first, then by start date
+  multiDayEvents.sort((a, b) => {
+    const aStart = new Date(a.data.startsOn);
+    const aEnd = new Date(a.data.endsOn || a.data.startsOn);
+    const bStart = new Date(b.data.startsOn);
+    const bEnd = new Date(b.data.endsOn || b.data.startsOn);
+    const aDuration = daysDiff(aStart, aEnd);
+    const bDuration = daysDiff(bStart, bEnd);
+    if (bDuration !== aDuration) return bDuration - aDuration;
+    return aStart.getTime() - bStart.getTime();
+  });
+  
+  // Lane assignment - track which days are occupied in each lane
+  const lanes: boolean[][] = [];
+  
+  for (const entity of multiDayEvents) {
+    const eventStart = startOfDay(new Date(entity.data.startsOn));
+    const eventEnd = entity.data?.endsOn ? startOfDay(new Date(entity.data.endsOn)) : eventStart;
+    
+    // Clamp to visible range
+    const segStart = eventStart < rangeStart ? rangeStart : eventStart;
+    const segEnd = eventEnd > rangeEnd ? rangeEnd : eventEnd;
+    
+    const startCol = getColumnIndex(segStart);
+    const endCol = getColumnIndex(segEnd);
+    
+    // Skip if outside visible columns
+    if (startCol < 0 || startCol >= columnCount) continue;
+    
+    const span = Math.min(endCol, columnCount - 1) - startCol + 1;
+    
+    // Find available lane
+    let lane = 0;
+    while (true) {
+      if (!lanes[lane]) {
+        lanes[lane] = new Array(columnCount).fill(false);
+      }
+      
+      let isFree = true;
+      for (let d = startCol; d < startCol + span; d++) {
+        if (lanes[lane][d]) {
+          isFree = false;
+          break;
+        }
+      }
+      
+      if (isFree) {
+        for (let d = startCol; d < startCol + span; d++) {
+          lanes[lane][d] = true;
+        }
+        break;
+      }
+      lane++;
+    }
+    
+    segments.push({
+      entity,
+      startCol,
+      span,
+      lane,
+      isStart: eventStart >= rangeStart,
+      isEnd: eventEnd <= rangeEnd,
+    });
+  }
+  
+  return { segments, laneCount: lanes.length };
+}
+
+/**
+ * Get timed (non-all-day) events for a specific date
+ */
+export function getTimedEventsForDate(events: any[], date: Date): any[] {
+  return events.filter(entity => {
+    if (!entity.data?.startsOn) return false;
+    if (isAllDay(entity)) return false;
+    const eventDate = startOfDay(new Date(entity.data.startsOn));
+    return eventDate.toDateString() === date.toDateString();
+  });
+}
+
+/**
+ * Get single-day events for a specific date (used in month view)
+ */
+export function getSingleDayEventsForDate(events: any[], date: Date): any[] {
+  return events.filter(entity => {
+    if (!entity.data?.startsOn) return false;
+    if (isMultiDay(entity)) return false;
+    const eventDate = startOfDay(new Date(entity.data.startsOn));
+    return eventDate.toDateString() === date.toDateString();
+  });
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..ace55cc
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@KTXC/*": ["../../core/src/*"],
+      "@ChronoManager/*": ["../chrono_manager/src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..c452f43
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
\ No newline at end of file
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..f85a399
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..43625cf
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,60 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    {
+      name: 'inject-css-filename',
+      enforce: 'post',
+      generateBundle(_options, bundle) {
+        const cssFile = Object.keys(bundle).find(name => name.endsWith('.css'))
+        if (!cssFile) return
+        
+        for (const fileName of Object.keys(bundle)) {
+          const chunk = bundle[fileName]
+          if (chunk.type === 'chunk' && chunk.code.includes('__CSS_FILENAME_PLACEHOLDER__')) {
+            chunk.code = chunk.code.replace(/__CSS_FILENAME_PLACEHOLDER__/g, `static/${cssFile}`)
+            console.log(`Injected CSS filename "static/${cssFile}" into ${fileName}`)
+          }
+        }
+      }
+    }
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@KTXC': path.resolve(__dirname, '../../core/src'),
+      '@ChronoManager': path.resolve(__dirname, '../chrono_manager/src'),
+    },
+  },
+  build: {
+    outDir: 'static',
+    emptyOutDir: true,
+    sourcemap: true,
+    cssCodeSplit: false,
+    lib: {
+      entry: path.resolve(__dirname, 'src/main.ts'),
+      formats: ['es'],
+      fileName: () => 'module.mjs',
+    },
+    rollupOptions: {
+      external: [
+        'vue',
+        'vue-router',
+        'pinia',
+      ],
+      output: {
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name?.endsWith('.css')) {
+            return 'chrono-[hash].css'
+          }
+          return '[name]-[hash][extname]'
+        },
+        manualChunks: undefined,
+      },
+    },
+  },
+})