From fa24f1468febb52ba31950ecc482e630c35c71c6 Mon Sep 17 00:00:00 2001
From: root <root@LAPTOP-7DVOR6NC>
Date: Sun, 21 Dec 2025 09:53:25 -0500
Subject: [PATCH] Initial commit

---
 .gitignore                                    |   29 +
 composer.json                                 |    9 +
 lib/Module.php                                |   80 +
 package-lock.json                             | 1527 +++++++++++++++++
 package.json                                  |   29 +
 src/components/CollectionEditor.vue           |  305 ++++
 src/components/CollectionList.vue             |  127 ++
 src/components/PersonEditor.vue               |  400 +++++
 src/components/PersonList.vue                 |  265 +++
 .../editors/PersonEditorAnniversaries.vue     |  115 ++
 src/components/editors/PersonEditorEmails.vue |  108 ++
 src/components/editors/PersonEditorLabel.vue  |   61 +
 .../editors/PersonEditorLanguages.vue         |  117 ++
 src/components/editors/PersonEditorMedia.vue  |  148 ++
 .../editors/PersonEditorMembers.vue           |  117 ++
 src/components/editors/PersonEditorNames.vue  |  139 ++
 src/components/editors/PersonEditorNotes.vue  |  160 ++
 .../editors/PersonEditorOrganizations.vue     |  131 ++
 src/components/editors/PersonEditorPhones.vue |  117 ++
 .../editors/PersonEditorPhysicalLocations.vue |  206 +++
 src/components/editors/PersonEditorTitles.vue |  130 ++
 .../editors/PersonEditorVirtualLocations.vue  |  117 ++
 src/integrations.ts                           |   15 +
 src/main.ts                                   |    7 +
 src/pages/PeoplePage.vue                      |  392 +++++
 src/routes.ts                                 |    9 +
 src/style.css                                 |    1 +
 src/vite-env.d.ts                             |    1 +
 tsconfig.app.json                             |   20 +
 tsconfig.json                                 |    7 +
 tsconfig.node.json                            |   25 +
 vite.config.ts                                |   58 +
 32 files changed, 4972 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 composer.json
 create mode 100644 lib/Module.php
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 src/components/CollectionEditor.vue
 create mode 100644 src/components/CollectionList.vue
 create mode 100644 src/components/PersonEditor.vue
 create mode 100644 src/components/PersonList.vue
 create mode 100644 src/components/editors/PersonEditorAnniversaries.vue
 create mode 100644 src/components/editors/PersonEditorEmails.vue
 create mode 100644 src/components/editors/PersonEditorLabel.vue
 create mode 100644 src/components/editors/PersonEditorLanguages.vue
 create mode 100644 src/components/editors/PersonEditorMedia.vue
 create mode 100644 src/components/editors/PersonEditorMembers.vue
 create mode 100644 src/components/editors/PersonEditorNames.vue
 create mode 100644 src/components/editors/PersonEditorNotes.vue
 create mode 100644 src/components/editors/PersonEditorOrganizations.vue
 create mode 100644 src/components/editors/PersonEditorPhones.vue
 create mode 100644 src/components/editors/PersonEditorPhysicalLocations.vue
 create mode 100644 src/components/editors/PersonEditorTitles.vue
 create mode 100644 src/components/editors/PersonEditorVirtualLocations.vue
 create mode 100644 src/integrations.ts
 create mode 100644 src/main.ts
 create mode 100644 src/pages/PeoplePage.vue
 create mode 100644 src/routes.ts
 create mode 100644 src/style.css
 create mode 100644 src/vite-env.d.ts
 create mode 100644 tsconfig.app.json
 create mode 100644 tsconfig.json
 create mode 100644 tsconfig.node.json
 create mode 100644 vite.config.ts

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..0535750
--- /dev/null
+++ b/composer.json
@@ -0,0 +1,9 @@
+{
+  "name": "ktxm/people",
+  "type": "project",
+  "autoload": {
+    "psr-4": {
+      "KTXM\\People\\": "lib/"
+    }
+  }
+}
diff --git a/lib/Module.php b/lib/Module.php
new file mode 100644
index 0000000..f8e503e
--- /dev/null
+++ b/lib/Module.php
@@ -0,0 +1,80 @@
+<?php
+
+namespace KTXM\People;
+
+use KTXF\Module\ModuleBrowserInterface;
+use KTXF\Module\ModuleInstanceAbstract;
+
+/**
+ * People Module
+ */
+class Module extends ModuleInstanceAbstract implements ModuleBrowserInterface
+{
+
+    public function __construct()
+    { }
+
+    public function handle(): string
+    {
+        return 'people';
+    }
+
+    public function label(): string
+    {
+        return 'People';
+    }
+
+    public function author(): string
+    {
+        return 'Ktrix';
+    }
+
+    public function description(): string
+    {
+        return 'People management interface - provides address book selection and contact viewing/editing capabilities';
+    }
+
+    public function version(): string
+    {
+        return '0.0.1';
+    }
+
+    public function permissions(): array
+    {
+        return [
+            'people' => [
+                'label' => 'Access People',
+                'description' => 'View and access the people module',
+                'group' => 'People Management'
+            ],
+            'people.contacts.view' => [
+                'label' => 'View Contacts',
+                'description' => 'View contact details',
+                'group' => 'People Management'
+            ],
+            'people.contacts.edit' => [
+                'label' => 'Edit Contacts',
+                'description' => 'Edit contact information',
+                'group' => 'People Management'
+            ],
+            'people.*' => [
+                'label' => 'Full People Management',
+                'description' => 'All people management operations',
+                'group' => 'People Management'
+            ],
+        ];
+    }
+
+    public function registerBI(): array
+    {
+        return [
+            'handle' => $this->handle(),
+            'namespace' => 'People',
+            '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..f261d39
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1527 @@
+{
+  "name": "people",
+  "version": "0.0.1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "people",
+      "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..ce8edf6
--- /dev/null
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@ktrix/people",
+  "description": "Ktrix People Module",
+  "version": "0.0.1",
+  "private": true,
+  "license": "AGPL-3.0-or-later",
+  "author": "Sebastian Krupinski",
+  "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/CollectionEditor.vue b/src/components/CollectionEditor.vue
new file mode 100644
index 0000000..4b0ae13
--- /dev/null
+++ b/src/components/CollectionEditor.vue
@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useServicesStore } from '@PeopleManager/stores/servicesStore'
+import { CollectionObject } from '@PeopleManager/models/collection'
+import { ServiceObject } from '@PeopleManager/models/service'
+
+// Store
+const servicesStore = useServicesStore()
+
+// Props
+const props = defineProps<{
+  modelValue: boolean
+  collection: CollectionObject | null
+  mode: 'create' | 'edit'
+}>()
+
+// 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)
+})
+
+// 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="mdi-book-plus" class="mr-2" />
+        {{ mode === 'create' ? 'Create New Address Book' : 'Edit Address Book' }}
+      </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 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 book 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"
+                    >
+                      <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;
+}
+</style>
diff --git a/src/components/CollectionList.vue b/src/components/CollectionList.vue
new file mode 100644
index 0000000..39b8db3
--- /dev/null
+++ b/src/components/CollectionList.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useCollectionsStore } from '@PeopleManager/stores/collectionsStore'
+import { CollectionObject } from '@PeopleManager/models/collection';
+
+// Store
+const collectionsStore = useCollectionsStore()
+
+// Props
+const props = defineProps<{
+  selectedCollection?: CollectionObject | null
+}>()
+
+// Emits
+const emit = defineEmits<{
+  'select': [collection: CollectionObject]
+  'edit': [collection: CollectionObject]
+}>()
+
+// State
+const loading = ref(false)
+const collections = ref<CollectionObject[]>([])
+
+// Lifecycle
+onMounted(async () => {
+  loading.value = true
+  try {
+    collections.value = await collectionsStore.list()
+  } catch (error) {
+    console.error('[People] - Failed to load collections:', error)
+  }
+  loading.value = false
+})
+
+// Functions
+const onCollectionSelect = (collection: CollectionObject) => {
+  console.log('[People] - Collection selected', collection)
+  emit('select', collection)
+}
+
+const onCollectionEdit = (collection: CollectionObject) => {
+  emit('edit', collection)
+}
+
+// Expose refresh method
+defineExpose({
+  async refresh() {
+    loading.value = true
+    try {
+      collections.value = await collectionsStore.list()
+    } catch (error) {
+      console.error('[People] - 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="mdi-book-multiple" size="small" class="mr-2" />
+        <span class="text-subtitle-2 font-weight-bold">Address Books</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 collections"
+          :key="collection.id"
+          :value="collection.id"
+          :active="selectedCollection?.id === collection.id"
+          @click="onCollectionSelect(collection)"
+          rounded="lg"
+          class="mb-1"
+        >
+          <template #prepend>
+            <v-icon :color="collection.color || 'primary'" icon="mdi-book-outline" size="small" />
+          </template>
+
+          <v-list-item-title>{{ collection.label }}</v-list-item-title>
+          
+          <template #append>
+            <v-btn
+              icon="mdi-pencil"
+              size="x-small"
+              variant="text"
+              @click.stop="onCollectionEdit(collection)"
+            />
+          </template>
+        </v-list-item>
+      </v-list>
+      
+      <v-alert v-if="!loading && collections.length === 0" type="info" variant="tonal" density="compact" class="mt-2">
+        No address books 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/PersonEditor.vue b/src/components/PersonEditor.vue
new file mode 100644
index 0000000..b1af32c
--- /dev/null
+++ b/src/components/PersonEditor.vue
@@ -0,0 +1,400 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { EntityObject } from '@PeopleManager/models/entity'
+import PersonEditorNames from './editors/PersonEditorNames.vue'
+import PersonEditorTitles from './editors/PersonEditorTitles.vue'
+import PersonEditorAnniversaries from './editors/PersonEditorAnniversaries.vue'
+import PersonEditorPhysicalLocations from './editors/PersonEditorPhysicalLocations.vue'
+import PersonEditorPhones from './editors/PersonEditorPhones.vue'
+import PersonEditorEmails from './editors/PersonEditorEmails.vue'
+import PersonEditorOrganizations from './editors/PersonEditorOrganizations.vue'
+import PersonEditorNotes from './editors/PersonEditorNotes.vue'
+import PersonEditorLanguages from './editors/PersonEditorLanguages.vue'
+import PersonEditorMedia from './editors/PersonEditorMedia.vue'
+import PersonEditorLabel from './editors/PersonEditorLabel.vue'
+import PersonEditorVirtualLocations from './editors/PersonEditorVirtualLocations.vue'
+import PersonEditorMembers from './editors/PersonEditorMembers.vue'
+
+// Props
+const props = defineProps<{
+  mode: 'edit' | 'view'
+  selectedEntity?: EntityObject | null
+}>()
+
+// Emits
+const emit = defineEmits<{
+  'edit': []
+  'cancel': []
+  'close': []
+  'save': [entity: EntityObject]
+  'delete': [entity: EntityObject]
+}>()
+
+// State
+const loading = ref(false)
+const saving = ref(false)
+
+// Computed
+const mode = computed(() => props.mode)
+const entity = computed(() => props.selectedEntity || null)
+const entityObject = computed(() => entity.value?.data ?? null)
+const entityFresh = computed(() => entity.value?.id === null || entity.value?.id === undefined)
+const entityType = computed(() => entityObject.value?.type || 'individual')
+
+// Determine which sections to show based on entity type
+const showNames = computed(() => entityType.value === 'individual')
+const showTitles = computed(() => entityType.value === 'individual')
+const showAnniversaries = computed(() => entityType.value === 'individual')
+const showOrganizations = computed(() => entityType.value === 'individual')
+const showLanguages = computed(() => entityType.value === 'individual')
+const showMembers = computed(() => entityType.value === 'group')
+
+// Sections shown for all types
+const showLabel = computed(() => true)
+const showPhysicalLocations = computed(() => entityType.value !== 'group')
+const showPhones = computed(() => entityType.value !== 'group')
+const showEmails = computed(() => entityType.value !== 'group')
+const showVirtualLocations = computed(() => true)
+const showMedia = computed(() => true)
+const showNotes = computed(() => true)
+
+// UI helpers
+const entityIcon = computed(() => {
+  switch (entityType.value) {
+    case 'organization':
+      return 'mdi-domain'
+    case 'group':
+      return 'mdi-account-group'
+    default:
+      return 'mdi-account'
+  }
+})
+
+// Functions
+const startEdit = () => {
+  emit('edit')
+}
+
+const cancelEdit = () => {
+  emit('cancel')
+}
+
+const saveEntity = async () => {
+  saving.value = true
+  emit('save', entity.value!)
+  saving.value = false
+}
+
+// Title management
+const addTitle = () => {
+  (entityObject.value as any)?.addTitle()
+}
+
+const removeTitle = (key: string) => {
+  (entityObject.value as any)?.removeTitle(key)
+}
+
+// Anniversary management
+const addAnniversary = () => {
+  (entityObject.value as any)?.addAnniversary()
+}
+
+const removeAnniversary = (index: number) => {
+  (entityObject.value as any)?.removeAnniversary(index)
+}
+
+const updateAnniversaryDate = (anniversary: any, date: string) => {
+  anniversary.when = date
+}
+
+// Physical location management
+const addPhysicalLocation = () => {
+  (entityObject.value as any)?.addPhysicalLocation()
+}
+
+const removePhysicalLocation = (key: string) => {
+  (entityObject.value as any)?.removePhysicalLocation(key)
+}
+
+// Phone management
+const addPhone = () => {
+  (entityObject.value as any)?.addPhone()
+}
+
+const removePhone = (key: string) => {
+  (entityObject.value as any)?.removePhone(key)
+}
+
+// Email management
+const addEmail = () => {
+  (entityObject.value as any)?.addEmail()
+}
+
+const removeEmail = (key: string) => {
+  (entityObject.value as any)?.removeEmail(key)
+}
+
+// Organization management
+const addOrganization = () => {
+  (entityObject.value as any)?.addOrganization()
+}
+
+const removeOrganization = (key: string) => {
+  (entityObject.value as any)?.removeOrganization(key)
+}
+
+// Note management
+const addNote = () => {
+  (entityObject.value as any)?.addNote()
+}
+
+const removeNote = (key: string) => {
+  (entityObject.value as any)?.removeNote(key)
+}
+
+// Language management
+const addLanguage = () => {
+  (entityObject.value as any)?.addLanguage()
+}
+
+const removeLanguage = (index: number) => {
+  (entityObject.value as any)?.removeLanguage(index)
+}
+
+// Media management
+const addMedia = () => {
+  (entityObject.value as any)?.addMedia()
+}
+
+const removeMedia = (key: string) => {
+  (entityObject.value as any)?.removeMedia(key)
+}
+
+// Member management (for groups)
+const addMember = () => {
+  (entityObject.value as any)?.addMember()
+}
+
+const removeMember = (key: string) => {
+  (entityObject.value as any)?.removeMember(key)
+}
+
+// Virtual location management
+const addVirtualLocation = () => {
+  (entityObject.value as any)?.addVirtualLocation()
+}
+
+const removeVirtualLocation = (key: string) => {
+  (entityObject.value as any)?.removeVirtualLocation(key)
+}
+</script>
+
+<template>
+  <div class="person-editor-card">
+    <div class="people-editor-header d-flex justify-space-between pa-4">
+      <div>
+        <v-icon :icon="entityIcon" class="mr-2" />
+        {{ entity?.data?.label || 'Nothing Selected' }}
+      </div>
+
+      <div v-if="!loading && entity">
+        <v-btn 
+          v-if="mode === 'view'"
+          icon="mdi-pencil"
+          size="small"
+          variant="text"
+          @click="startEdit"
+        />
+
+        <v-btn
+          v-if="!entityFresh"
+          icon="mdi-delete"
+          size="small"
+          variant="text"
+          color="error"
+          @click="emit('delete', entity!)"
+        />
+
+        <v-btn
+          icon="mdi-close"
+          size="small"
+          variant="text"
+          @click="$emit('close')"
+        />
+      </div>
+    </div>
+
+    <div class="people-editor-fields">
+      <v-progress-linear v-if="loading" indeterminate color="primary" />
+
+      <div v-if="!entity" class="text-center pa-8">
+        <v-icon icon="mdi-account-search" size="64" color="grey" class="mb-4" />
+        <p class="text-h6 text-grey">Select an individual, organization or group to view details</p>
+      </div>
+
+      <div v-else class="pa-4">
+        <PersonEditorLabel
+          v-if="showLabel"
+          :mode="mode"
+          :label="entity.data!.label"
+          @update:label="entity.data!.label = $event"
+        />
+
+        <PersonEditorNames
+          v-if="showNames"
+          :mode="mode"
+          :names="entity.data!.names"
+          @update:names="entity.data!.names = $event"
+        />
+
+        <PersonEditorTitles
+          v-if="showTitles"
+          :titles="(entity.data as any)!.titles || {}"
+          :mode="mode"
+          @add-title="addTitle"
+          @remove-title="removeTitle"
+        />
+
+        <PersonEditorAnniversaries
+          v-if="showAnniversaries"
+          :anniversaries="(entity.data as any)!.anniversaries || []"
+          :mode="mode"
+          @add-anniversary="addAnniversary"
+          @remove-anniversary="removeAnniversary"
+          @update-anniversary-date="updateAnniversaryDate"
+        />
+
+        <PersonEditorPhysicalLocations
+          v-if="showPhysicalLocations"
+          :physical-locations="(entity.data as any)!.physicalLocations || {}"
+          :mode="mode"
+          @add-physical-location="addPhysicalLocation"
+          @remove-physical-location="removePhysicalLocation"
+        />
+
+        <PersonEditorPhones
+          v-if="showPhones"
+          :phones="(entity.data as any)!.phones || {}"
+          :mode="mode"
+          @add-phone="addPhone"
+          @remove-phone="removePhone"
+        />
+
+        <PersonEditorEmails
+          v-if="showEmails"
+          :emails="(entity.data as any)!.emails || {}"
+          :mode="mode"
+          @add-email="addEmail"
+          @remove-email="removeEmail"
+        />
+
+        <PersonEditorVirtualLocations
+          v-if="showVirtualLocations"
+          :virtual-locations="(entity.data as any)!.virtualLocations || {}"
+          :mode="mode"
+          @add-virtual-location="addVirtualLocation"
+          @remove-virtual-location="removeVirtualLocation"
+        />
+
+        <PersonEditorOrganizations
+          v-if="showOrganizations"
+          :organizations="(entity.data as any)!.organizations || {}"
+          :mode="mode"
+          @add-organization="addOrganization"
+          @remove-organization="removeOrganization"
+        />
+
+        <PersonEditorMembers
+          v-if="showMembers"
+          :members="(entity.data as any)!.members || {}"
+          :mode="mode"
+          @add-member="addMember"
+          @remove-member="removeMember"
+        />
+
+        <PersonEditorNotes
+          v-if="showNotes"
+          :notes="entity.data!.notes || {}"
+          :mode="mode"
+          @add-note="addNote"
+          @remove-note="removeNote"
+        />
+
+        <PersonEditorLanguages
+          v-if="showLanguages"
+          :languages="(entity.data as any)!.languages || []"
+          :mode="mode"
+          @add-language="addLanguage"
+          @remove-language="removeLanguage"
+        />
+
+        <PersonEditorMedia
+          v-if="showMedia"
+          :media="entity.data!.media || {}"
+          :mode="mode"
+          @add-media="addMedia"
+          @remove-media="removeMedia"
+        />
+      </div>
+    </div>
+
+    <div class="people-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>
+  </div>
+</template>
+
+<style scoped>
+.person-editor-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background: transparent !important;
+}
+
+.people-editor-header {
+  background: transparent;
+  min-height: 72px;
+  align-items: center;
+  border-bottom: 1px solid rgb(var(--v-border-color));
+  flex-shrink: 0;
+}
+
+.people-editor-fields {
+  flex: 1;
+  overflow-y: auto;
+  background: transparent;
+  min-height: 0;
+}
+
+.people-editor-footer {
+  background: transparent;
+  flex-shrink: 0;
+}
+
+.person-editor-card :deep(.v-field) {
+  background: transparent;
+}
+
+.person-editor-card :deep(.v-input) {
+  background: transparent;
+}
+
+.person-editor-card :deep(.v-card) {
+  background: transparent;
+}
+</style>
diff --git a/src/components/PersonList.vue b/src/components/PersonList.vue
new file mode 100644
index 0000000..d24b729
--- /dev/null
+++ b/src/components/PersonList.vue
@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useEntitiesStore } from '@PeopleManager/stores/entitiesStore'
+import type { CollectionObject } from '@PeopleManager/models/collection'
+import type { EntityObject } from '@PeopleManager/models/entity'
+
+// Stores
+const entitiesStore = useEntitiesStore()
+
+// Props
+const props = defineProps<{
+  selectedCollection?: CollectionObject | null
+  selectedEntity?: EntityObject | null
+}>()
+
+// Emits
+const emit = defineEmits<{
+  'select': [entity: EntityObject]
+  'fresh': [type: string]
+}>()
+
+// State
+const loading = ref(false)
+const searchQuery = ref('')
+const collectionEntities = ref<EntityObject[]>([])
+
+// Computed
+const filteredEntities = computed(() => {
+  if (!searchQuery.value) {
+    return collectionEntities.value
+  }
+  const query = searchQuery.value.toLowerCase()
+  return collectionEntities.value.filter(entity => {
+    const name = `${entity.data?.names.family || ''} ${entity.data?.names.given || ''}`.toLowerCase()
+    const email = (entity.data?.emails?.[0]?.address || '').toLowerCase()
+    return name.includes(query) || email.includes(query)
+  })
+})
+
+// Watchers
+watch(() => props.selectedCollection, async (newCollection) => {
+  if (newCollection) {
+    loading.value = true
+    try {
+      collectionEntities.value = await entitiesStore.list(
+        newCollection.provider,
+        newCollection.service,
+        newCollection.id
+      );
+    } catch (error) {
+      console.error('[People] - Failed to load contacts:', error);
+    } finally {
+      loading.value = false
+    }
+  } else {
+    collectionEntities.value = []
+    loading.value = false
+  }
+}, { immediate: true });
+
+// Functions
+function entityType(entity: EntityObject): string {
+  return entity.data?.type || 'individual'
+}
+
+function entityIcon(entity: EntityObject): string {
+  const type = entityType(entity)
+  switch (type) {
+    case 'organization':
+      return 'mdi-domain'
+    case 'group':
+      return 'mdi-account-group'
+    default:
+      return 'mdi-account'
+  }
+}
+
+function entityPhoto(entity: EntityObject): string | null {
+  // TODO: Implement photo retrieval from entity data
+  return null
+}
+
+function entityInitials(entity: EntityObject): string {
+  const type = entityType(entity)
+  
+  if (type === 'organization') {
+    const name = (entity.data as any)?.names?.full || entity.data?.label || ''
+    return name.substring(0, 2).toUpperCase() || 'OR'
+  }
+  
+  if (type === 'group') {
+    const name = (entity.data as any)?.names?.full || entity.data?.label || ''
+    return name.substring(0, 2).toUpperCase() || 'GR'
+  }
+  
+  // Individual
+  const given = (entity.data as any)?.names?.given
+  const family = (entity.data as any)?.names?.family
+  const initials = `${given?.[0] || ''}${family?.[0] || ''}`.toUpperCase()
+  return initials || '?'
+}
+
+function entityLabel(entity: EntityObject): string {
+  const type = entityType(entity)
+  
+  if (type === 'organization' || type === 'group') {
+    return entity.data?.label || (entity.data as any)?.names?.full || 'Unknown'
+  }
+  
+  // Individual
+  return entity.data?.label || `${(entity.data as any)?.names?.given || ''} ${(entity.data as any)?.names?.family || ''}`.trim() || 'Unknown'
+}
+
+function entityEmail(entity: EntityObject): string | null {
+  const emails = (entity.data as any)?.emails
+  if (!emails) return null
+  const emailEntries = Object.values(emails)
+  if (emailEntries.length === 0) return null
+  // Sort by priority (assuming lower number = higher priority)
+  emailEntries.sort((a: any, b: any) => (a.priority || 999) - (b.priority || 999))
+  return (emailEntries[0] as any).address || null
+}
+
+function entityOrganization(entity: EntityObject): string | null {
+  const organizations = (entity.data as any)?.organizations
+  if (!organizations || Object.keys(organizations).length === 0) return null
+  const orgEntries = Object.values(organizations)
+  return (orgEntries[0] as any).Label || null
+}
+
+function entityMemberCount(entity: EntityObject): number | null {
+  const type = entityType(entity)
+  if (type !== 'group') return null
+  const members = (entity.data as any)?.members
+  if (!members) return 0
+  return Object.keys(members).length
+}
+
+function entityAvatarColor(entity: EntityObject): string {
+  const type = entityType(entity)
+  switch (type) {
+    case 'organization':
+      return 'blue-darken-1'
+    case 'group':
+      return 'green-darken-1'
+    default:
+      return 'primary'
+  }
+}
+</script>
+
+<template>
+  <div class="person-list-container">
+    <div class="person-list-header pa-4">
+      <v-text-field
+        v-model="searchQuery"
+        density="compact"
+        variant="outlined"
+        label="Search contacts"
+        prepend-inner-icon="mdi-magnify"
+        clearable
+        hide-details
+      />
+    </div>
+    
+    <div class="pa-0 person-list-content">
+      <v-progress-linear v-if="loading" indeterminate color="primary" />
+      
+      <div v-else-if="!selectedCollection" class="text-center pa-8">
+        <v-icon icon="mdi-book-alert" size="64" color="grey" class="mb-4" />
+        <p class="text-body-1 text-grey">Select an address book to view contacts</p>
+      </div>
+      
+      <div v-else-if="filteredEntities.length === 0" class="text-center pa-8">
+        <v-icon icon="mdi-account-search" size="64" color="grey" class="mb-4" />
+        <p class="text-body-1 text-grey">No Individuals, Organizations or Groups found</p>
+      </div>
+      
+      <v-list v-else density="compact" nav>
+        <v-list-item
+          v-for="entity in filteredEntities"
+          :key="entity.id"
+          :value="entity.id"
+          @click="$emit('select', entity)">
+
+          <template #prepend>
+            <v-avatar :color="entityAvatarColor(entity)" size="40">
+              <v-img v-if="entityPhoto(entity)" :src="entityPhoto(entity)!" />
+              <v-icon v-else-if="entityType(entity) !== 'individual'" :icon="entityIcon(entity)" size="small" />
+              <span v-else class="text-subtitle-2">{{ entityInitials(entity) }}</span>
+            </v-avatar>
+          </template>
+
+          <v-list-item-title>
+            <v-icon :icon="entityIcon(entity)" size="x-small" class="mr-1" />
+            {{ entityLabel(entity) }}
+          </v-list-item-title>
+
+          <v-list-item-subtitle>
+            <!-- For individuals: show email and organization -->
+            <template v-if="entityType(entity) === 'individual'">
+              <div v-if="entityEmail(entity)">
+                <v-icon icon="mdi-email" size="x-small" class="mr-1" />
+                {{ entityEmail(entity) }}
+              </div>
+              <div v-if="entityOrganization(entity)">
+                <v-icon icon="mdi-domain" size="x-small" class="mr-1" />
+                {{ entityOrganization(entity) }}
+              </div>
+            </template>
+            
+            <!-- For organizations: show email -->
+            <template v-else-if="entityType(entity) === 'organization'">
+              <div v-if="entityEmail(entity)">
+                <v-icon icon="mdi-email" size="x-small" class="mr-1" />
+                {{ entityEmail(entity) }}
+              </div>
+            </template>
+            
+            <!-- For groups: show member count -->
+            <template v-else-if="entityType(entity) === 'group'">
+              <div>
+                <v-icon icon="mdi-account-multiple" size="x-small" class="mr-1" />
+                {{ entityMemberCount(entity) }} member{{ entityMemberCount(entity) !== 1 ? 's' : '' }}
+              </div>
+            </template>
+          </v-list-item-subtitle>
+        </v-list-item>
+      </v-list>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.person-list-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+}
+
+.person-list-header {
+  min-height: 72px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid rgb(var(--v-border-color));
+}
+
+.person-list-content {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.person-list-container :deep(.v-list) {
+  background: transparent;
+}
+
+.person-list-container :deep(.v-field) {
+  background: transparent;
+}
+
+.v-list-item {
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/editors/PersonEditorAnniversaries.vue b/src/components/editors/PersonEditorAnniversaries.vue
new file mode 100644
index 0000000..f50f19f
--- /dev/null
+++ b/src/components/editors/PersonEditorAnniversaries.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { useClipboard } from '@KTXC/composables/useClipboard'
+
+interface Props {
+  mode: 'edit' | 'view'
+  anniversaries: any[]
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  'add-anniversary': []
+  'remove-anniversary': [index: number]
+  'update-anniversary-date': [anniversary: any, date: string]
+}>()
+
+const { copiedKey, copyToClipboard } = useClipboard()
+
+const updateAnniversaryDate = (anniversary: any, date: string) => {
+  emit('update-anniversary-date', anniversary, date)
+}
+</script>
+
+<template>
+  <div v-if="(anniversaries && anniversaries.length > 0) || mode === 'edit'" class="person-editor-section">
+    <div class="d-flex align-center justify-space-between mb-2">
+      <div class="text-subtitle-1">Anniversaries</div>
+      <v-btn v-if="mode === 'edit'"
+        size="small"
+        variant="outlined"
+        @click="$emit('add-anniversary')">
+        <v-icon left>mdi-plus</v-icon>
+        Add Anniversary
+      </v-btn>
+    </div>
+
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'">
+      <div v-for="(anniversary, index) in anniversaries" :key="index" class="mb-2 pa-2 border rounded">
+        <div class="d-flex align-center justify-space-between mb-1">
+          <div class="d-flex align-center">
+            <v-icon icon="mdi-cake-variant" size="small" class="mr-2" />
+            <strong>{{ anniversary.type || 'Unknown' }} Anniversary</strong>
+          </div>
+          <v-btn
+            :icon="copiedKey === index ? 'mdi-check' : 'mdi-content-copy'"
+            size="x-small"
+            variant="text"
+            :color="copiedKey === index ? 'success' : undefined"
+            @click="copyToClipboard(anniversary.when?.date || '', index)"
+          />
+        </div>
+        <div class="text-caption text-grey">
+          Date: {{ anniversary.when?.date || 'Not set' }} |
+          Location: {{ anniversary.location || 'Not set' }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <div v-for="(anniversary, index) in anniversaries" :key="index" class="mb-4 pa-3 border rounded">
+        <div class="d-flex align-center justify-space-between mb-2">
+          <strong>Anniversary</strong>
+          <v-btn
+            icon="mdi-delete"
+            size="small"
+            color="error"
+            variant="text"
+            @click="$emit('remove-anniversary', index)">
+          </v-btn>
+        </div>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-select
+              v-model="anniversary.type"
+              :items="['birth', 'death', 'nuptial']"
+              label="Type"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="anniversary.location"
+              label="Location"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="12">
+            <v-text-field
+              :model-value="anniversary.when?.date || ''"
+              @update:model-value="updateAnniversaryDate(anniversary, $event)"
+              label="Date"
+              type="date"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.person-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/editors/PersonEditorEmails.vue b/src/components/editors/PersonEditorEmails.vue
new file mode 100644
index 0000000..ccccbdb
--- /dev/null
+++ b/src/components/editors/PersonEditorEmails.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { useClipboard } from '@KTXC/composables/useClipboard'
+
+interface Props {
+  mode: 'edit' | 'view'
+  emails: Record<string, any>
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  'add-email': []
+  'remove-email': [key: string]
+}>()
+
+const { copiedKey, copyToClipboard } = useClipboard<string>()
+</script>
+
+<template>
+  <div v-if="Object.keys(emails || {}).length > 0 || mode === 'edit'" class="person-editor-section">
+    <div class="d-flex align-center justify-space-between mb-2">
+      <div class="text-subtitle-1">Emails</div>
+      <v-btn v-if="mode === 'edit'"
+        size="small"
+        variant="outlined"
+        @click="$emit('add-email')">
+        <v-icon left>mdi-plus</v-icon>
+        Add Email
+      </v-btn>
+    </div>
+
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'">
+      <div v-for="(email, key) in emails" :key="key" class="mb-2 pa-2 border rounded">
+        <div class="d-flex align-center justify-space-between mb-1">
+          <div class="d-flex align-center">
+            <v-icon icon="mdi-email" size="small" class="mr-2" />
+            <strong>{{ email.address || 'No address' }}</strong>
+          </div>
+          <v-btn
+            :icon="copiedKey === key ? 'mdi-check' : 'mdi-content-copy'"
+            size="x-small"
+            variant="text"
+            :color="copiedKey === key ? 'success' : undefined"
+            @click="copyToClipboard(email.address || '', key as string)"
+          />
+        </div>
+        <div class="text-caption text-grey">
+          Context: {{ email.context || 'Not set' }} |
+          Priority: {{ email.priority || 'Not set' }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <div v-for="(email, index) in emails" :key="index" class="mb-4 pa-3 border rounded">
+        <div class="d-flex align-center justify-space-between mb-2">
+          <strong>Email</strong>
+          <v-btn
+            icon="mdi-delete"
+            size="small"
+            color="error"
+            variant="text"
+            @click="$emit('remove-email', index)">
+          </v-btn>
+        </div>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="email.address"
+              label="Address"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="email.context"
+              label="Context"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model.number="email.priority"
+              label="Priority"
+              type="number"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.person-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/editors/PersonEditorLabel.vue b/src/components/editors/PersonEditorLabel.vue
new file mode 100644
index 0000000..4eacca9
--- /dev/null
+++ b/src/components/editors/PersonEditorLabel.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useClipboard } from '@KTXC/composables/useClipboard'
+
+interface Props {
+  mode: 'edit' | 'view'
+  label?: string | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:label': [label: string | null]
+}>()
+
+const { copiedKey, copyToClipboard } = useClipboard<string>()
+
+const labelValue = computed({
+  get: () => props.label ?? '',
+  set: (value) => emit('update:label', value || null)
+})
+</script>
+
+<template>
+  <div class="person-editor-section">
+    <div class="text-subtitle-1 mb-2">Label</div>
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'" class="mb-4">
+      <div class="d-flex align-center justify-space-between pa-2">
+        <div class="d-flex align-center">
+          <v-icon icon="mdi-label" size="small" class="mr-2" />
+          <span>{{ labelValue || 'Not set' }}</span>
+        </div>
+        <v-btn
+          v-if="labelValue"
+          :icon="copiedKey === 'label' ? 'mdi-check' : 'mdi-content-copy'"
+          size="x-small"
+          variant="text"
+          :color="copiedKey === 'label' ? 'success' : undefined"
+          @click="copyToClipboard(labelValue, 'label')"
+        />
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <v-text-field
+        v-model="labelValue"
+        label="Label"
+        variant="outlined"
+        density="compact"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.person-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
diff --git a/src/components/editors/PersonEditorLanguages.vue b/src/components/editors/PersonEditorLanguages.vue
new file mode 100644
index 0000000..bcb7b07
--- /dev/null
+++ b/src/components/editors/PersonEditorLanguages.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { useClipboard } from '@KTXC/composables/useClipboard'
+
+interface Props {
+  mode: 'edit' | 'view'
+  languages: any[]
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  'add-language': []
+  'remove-language': [index: number]
+}>()
+
+const { copiedKey, copyToClipboard } = useClipboard()
+</script>
+
+<template>
+  <div v-if="(languages || []).length > 0 || mode === 'edit'" class="person-editor-section">
+    <div class="d-flex align-center justify-space-between mb-2">
+      <div class="text-subtitle-1">Languages</div>
+      <v-btn v-if="mode === 'edit'"
+        size="small"
+        variant="outlined"
+        @click="$emit('add-language')">
+        <v-icon left>mdi-plus</v-icon>
+        Add Language
+      </v-btn>
+    </div>
+
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'">
+      <div v-for="(lang, index) in languages" :key="index" class="mb-2 pa-2 border rounded">
+        <div class="d-flex align-center justify-space-between mb-1">
+          <div class="d-flex align-center">
+            <v-icon icon="mdi-translate" size="small" class="mr-2" />
+            <strong>{{ lang.Data || 'Unknown Language' }}</strong>
+          </div>
+          <v-btn
+            :icon="copiedKey === index ? 'mdi-check' : 'mdi-content-copy'"
+            size="x-small"
+            variant="text"
+            :color="copiedKey === index ? 'success' : undefined"
+            @click="copyToClipboard(lang.Data || '', index)"
+          />
+        </div>
+        <div class="text-caption text-grey">
+          ID: {{ lang.Id || 'Not set' }} |
+          Context: {{ lang.Context || 'Not set' }} |
+          Priority: {{ lang.Priority || 'Not set' }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <div v-for="(lang, index) in languages" :key="index" class="mb-4 pa-3 border rounded">
+        <div class="d-flex align-center justify-space-between mb-2">
+          <strong>Language</strong>
+          <v-btn
+            icon="mdi-delete"
+            size="small"
+            color="error"
+            variant="text"
+            @click="$emit('remove-language', index)">
+          </v-btn>
+        </div>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="lang.Data"
+              label="Language"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="lang.Id"
+              label="Language ID"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="lang.Context"
+              label="Context"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model.number="lang.Priority"
+              label="Priority"
+              type="number"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.person-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/editors/PersonEditorMedia.vue b/src/components/editors/PersonEditorMedia.vue
new file mode 100644
index 0000000..095c528
--- /dev/null
+++ b/src/components/editors/PersonEditorMedia.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { useClipboard } from '@KTXC/composables/useClipboard'
+
+interface Props {
+  mode: 'edit' | 'view'
+  media: Record<string, any>
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  'add-media': []
+  'remove-media': [key: string]
+}>()
+
+const { copiedKey, copyToClipboard } = useClipboard<string>()
+</script>
+
+<template>
+  <div v-if="Object.keys(media || {}).length > 0 || mode === 'edit'" class="person-editor-section">
+    <div class="d-flex align-center justify-space-between mb-2">
+      <div class="text-subtitle-1">Media</div>
+      <v-btn v-if="mode === 'edit'"
+        size="small"
+        variant="outlined"
+        @click="$emit('add-media')">
+        <v-icon left>mdi-plus</v-icon>
+        Add Media
+      </v-btn>
+    </div>
+
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'">
+      <div v-for="(item, key) in media" :key="key" class="mb-2 pa-2 border rounded">
+        <div class="d-flex align-center justify-space-between mb-1">
+          <div class="d-flex align-center">
+            <v-icon icon="mdi-image" size="small" class="mr-2" />
+            <strong>{{ item.label || item.uri || 'Unnamed Media' }}</strong>
+          </div>
+          <v-btn
+            :icon="copiedKey === key ? 'mdi-check' : 'mdi-content-copy'"
+            size="x-small"
+            variant="text"
+            :color="copiedKey === key ? 'success' : undefined"
+            @click="copyToClipboard(item.uri || '', key as string)"
+          />
+        </div>
+        <div class="text-caption text-grey">
+          Type: {{ item.type || 'Not set' }} |
+          Kind: {{ item.kind || 'Not set' }} |
+          Contexts: {{ (item.contexts || []).join(', ') || 'None' }} |
+          Pref: {{ item.pref || 'Not set' }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <div v-for="(item, index) in media" :key="index" class="mb-4 pa-3 border rounded">
+        <div class="d-flex align-center justify-space-between mb-2">
+          <strong>Media</strong>
+          <v-btn
+            icon="mdi-delete"
+            size="small"
+            color="error"
+            variant="text"
+            @click="$emit('remove-media', index)">
+          </v-btn>
+        </div>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="item.uri"
+              label="URI"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="item.label"
+              label="Label"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="4">
+            <v-select
+              v-model="item.type"
+              :items="['photo', 'video', 'audio', 'document']"
+              label="Type"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="4">
+            <v-select
+              v-model="item.kind"
+              :items="['photo', 'sound', 'logo']"
+              label="Kind"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="4">
+            <v-text-field
+              v-model="item.mediaType"
+              label="Media Type"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="item.contexts"
+              label="Contexts (comma-separated)"
+              variant="outlined"
+              density="compact"
+              hint="Enter contexts separated by commas"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model.number="item.pref"
+              label="Preference"
+              type="number"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.person-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/editors/PersonEditorMembers.vue b/src/components/editors/PersonEditorMembers.vue
new file mode 100644
index 0000000..2560ca6
--- /dev/null
+++ b/src/components/editors/PersonEditorMembers.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { useClipboard } from '@KTXC/composables/useClipboard'
+
+interface Props {
+  mode: 'edit' | 'view'
+  members: Record<string, any>
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  'add-member': []
+  'remove-member': [key: string]
+}>()
+
+const { copiedKey, copyToClipboard } = useClipboard<string>()
+</script>
+
+<template>
+  <div v-if="Object.keys(members || {}).length > 0 || mode === 'edit'" class="person-editor-section">
+    <div class="d-flex align-center justify-space-between mb-2">
+      <div class="text-subtitle-1">Members</div>
+      <v-btn v-if="mode === 'edit'"
+        size="small"
+        variant="outlined"
+        @click="$emit('add-member')">
+        <v-icon left>mdi-plus</v-icon>
+        Add Member
+      </v-btn>
+    </div>
+
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'">
+      <div v-for="(member, key) in members" :key="key" class="mb-2 pa-2 border rounded">
+        <div class="d-flex align-center justify-space-between mb-1">
+          <div class="d-flex align-center">
+            <v-icon icon="mdi-account" size="small" class="mr-2" />
+            <strong>Entity ID: {{ member.entityId || 'Not set' }}</strong>
+          </div>
+          <v-btn
+            :icon="copiedKey === key ? 'mdi-check' : 'mdi-content-copy'"
+            size="x-small"
+            variant="text"
+            :color="copiedKey === key ? 'success' : undefined"
+            @click="copyToClipboard(member.entityId || '', key as string)"
+          />
+        </div>
+        <div class="text-caption text-grey">
+          Role: {{ member.role || 'Not set' }} |
+          Context: {{ member.context || 'Not set' }} |
+          Priority: {{ member.priority || 'Not set' }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <div v-for="(member, index) in members" :key="index" class="mb-4 pa-3 border rounded">
+        <div class="d-flex align-center justify-space-between mb-2">
+          <strong>Member</strong>
+          <v-btn
+            icon="mdi-delete"
+            size="small"
+            color="error"
+            variant="text"
+            @click="$emit('remove-member', index)">
+          </v-btn>
+        </div>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="member.entityId"
+              label="Entity ID"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="member.role"
+              label="Role"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="member.context"
+              label="Context"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model.number="member.priority"
+              label="Priority"
+              type="number"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.person-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
diff --git a/src/components/editors/PersonEditorNames.vue b/src/components/editors/PersonEditorNames.vue
new file mode 100644
index 0000000..6cbb468
--- /dev/null
+++ b/src/components/editors/PersonEditorNames.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useClipboard } from '@KTXC/composables/useClipboard'
+
+interface Props {
+  mode: 'edit' | 'view'
+  names: any
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:names': [names: any]
+}>()
+
+const { copiedKey, copyToClipboard } = useClipboard<string>()
+
+const names = computed({
+  get: () => props.names,
+  set: (value) => emit('update:names', value)
+})
+
+const formatName = (names: any) => {
+  if (!names) return 'Not set'
+  const parts = []
+  if (names.prefix) parts.push(names.prefix)
+  if (names.given) parts.push(names.given)
+  if (names.additional) parts.push(names.additional)
+  if (names.family) parts.push(names.family)
+  if (names.suffix) parts.push(names.suffix)
+  return parts.join(' ') || 'Not set'
+}
+</script>
+
+<template>
+  <div class="person-editor-section">
+    <div class="text-subtitle-1 mb-2">Name</div>
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'" class="mb-4">
+      <div class="d-flex align-center justify-space-between pa-2">
+        <div class="d-flex align-center">
+          <v-icon icon="mdi-account" size="small" class="mr-2" />
+          <span>{{ formatName(names) }}</span>
+        </div>
+        <v-btn
+          v-if="formatName(names) !== 'Not set'"
+          :icon="copiedKey === 'name' ? 'mdi-check' : 'mdi-content-copy'"
+          size="x-small"
+          variant="text"
+          :color="copiedKey === 'name' ? 'success' : undefined"
+          @click="copyToClipboard(formatName(names), 'name')"
+        />
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <v-row class="mb-2">
+        <v-col cols="12" md="6">
+          <v-text-field
+            v-model="names.given"
+            label="Given Name"
+            variant="outlined"
+            density="compact"
+          />
+        </v-col>
+        <v-col cols="12" md="6">
+          <v-text-field
+            v-model="names.family"
+            label="Family Name"
+            variant="outlined"
+            density="compact"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row class="mb-2">
+        <v-col cols="12" md="4">
+          <v-text-field
+            v-model="names.additional"
+            label="Additional Name"
+            variant="outlined"
+            density="compact"
+          />
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-text-field
+            v-model="names.prefix"
+            label="Prefix"
+            variant="outlined"
+            density="compact"
+          />
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-text-field
+            v-model="names.suffix"
+            label="Suffix"
+            variant="outlined"
+            density="compact"
+          />
+        </v-col>
+      </v-row>
+
+      <div class="text-subtitle-1 mb-2 mt-4">Phonetic Name</div>
+      <v-row class="mb-2">
+        <v-col cols="12" md="4">
+          <v-text-field
+            v-model="names.phoneticGiven"
+            label="Phonetic Given Name"
+            variant="outlined"
+            density="compact"
+          />
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-text-field
+            v-model="names.phoneticAdditional"
+            label="Phonetic Additional Name"
+            variant="outlined"
+            density="compact"
+          />
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-text-field
+            v-model="names.phoneticFamily"
+            label="Phonetic Family Name"
+            variant="outlined"
+            density="compact"
+          />
+        </v-col>
+      </v-row>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.person-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/editors/PersonEditorNotes.vue b/src/components/editors/PersonEditorNotes.vue
new file mode 100644
index 0000000..fb4fc2f
--- /dev/null
+++ b/src/components/editors/PersonEditorNotes.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { useClipboard } from '@KTXC/composables/useClipboard'
+
+interface Props {
+  mode: 'edit' | 'view'
+  notes: Record<string, any>
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  'add-note': []
+  'remove-note': [key: string]
+}>()
+
+const { copiedKey, copyToClipboard } = useClipboard<string>()
+</script>
+
+<template>
+  <div v-if="Object.keys(notes || {}).length > 0 || mode === 'edit'" class="person-editor-section">
+    <div class="d-flex align-center justify-space-between mb-2">
+      <div class="text-subtitle-1">Notes</div>
+      <v-btn v-if="mode === 'edit'"
+        size="small"
+        variant="outlined"
+        @click="$emit('add-note')">
+        <v-icon left>mdi-plus</v-icon>
+        Add Note
+      </v-btn>
+    </div>
+
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'">
+      <div v-for="(note, key) in notes" :key="key" class="mb-2 pa-2 border rounded">
+        <div class="d-flex align-center justify-space-between mb-1">
+          <div class="d-flex align-center">
+            <v-icon icon="mdi-note-text" size="small" class="mr-2" />
+            <strong>{{ note.content || 'Empty note' }}</strong>
+          </div>
+          <v-btn
+            :icon="copiedKey === key ? 'mdi-check' : 'mdi-content-copy'"
+            size="x-small"
+            variant="text"
+            :color="copiedKey === key ? 'success' : undefined"
+            @click="copyToClipboard(note.content || '', key as string)"
+          />
+        </div>
+        <div class="text-caption text-grey">
+          Date: {{ note.date?.date || 'Not set' }} |
+          Author: {{ note.authorName || note.authorUri || 'Unknown' }} |
+          Context: {{ note.context || 'Not set' }} |
+          Priority: {{ note.priority || 'Not set' }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <div v-for="(note, index) in notes" :key="index" class="mb-4 pa-3 border rounded">
+        <div class="d-flex align-center justify-space-between mb-2">
+          <strong>Note</strong>
+          <v-btn
+            icon="mdi-delete"
+            size="small"
+            color="error"
+            variant="text"
+            @click="$emit('remove-note', index)">
+          </v-btn>
+        </div>
+
+        <v-row class="mb-2">
+          <v-col cols="12">
+            <v-textarea
+              v-model="note.content"
+              label="Content"
+              variant="outlined"
+              density="compact"
+              rows="3"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="note.authorName"
+              label="Author Name"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="note.authorUri"
+              label="Author URI"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="note.context"
+              label="Context"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model.number="note.priority"
+              label="Priority"
+              type="number"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="12">
+            <v-text-field
+              :model-value="note.date?.date || ''"
+              @update:model-value="updateNoteDate(note, $event)"
+              label="Date"
+              type="date"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  methods: {
+    updateNoteDate(note: any, date: string) {
+      if (!note.date) {
+        note.date = {
+          date: '',
+          timezone_type: 3,
+          timezone: 'UTC'
+        }
+      }
+      note.date.date = date
+    }
+  }
+}
+</script>
+
+<style scoped>
+.person-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/editors/PersonEditorOrganizations.vue b/src/components/editors/PersonEditorOrganizations.vue
new file mode 100644
index 0000000..0d4717e
--- /dev/null
+++ b/src/components/editors/PersonEditorOrganizations.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { useClipboard } from '@KTXC/composables/useClipboard'
+
+interface Props {
+  mode: 'edit' | 'view'
+  organizations: Record<string, any>
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  'add-organization': []
+  'remove-organization': [key: string]
+}>()
+
+const { copiedKey, copyToClipboard } = useClipboard<string>()
+</script>
+
+<template>
+  <div v-if="(organizations || []).length > 0 || mode === 'edit'" class="person-editor-section">
+    <div class="d-flex align-center justify-space-between mb-2">
+      <div class="text-subtitle-1">Organizations</div>
+      <v-btn v-if="mode === 'edit'"
+        size="small"
+        variant="outlined"
+        @click="$emit('add-organization')">
+        <v-icon left>mdi-plus</v-icon>
+        Add Organization
+      </v-btn>
+    </div>
+
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'">
+      <div v-for="(org, key) in organizations" :key="key" class="mb-2 pa-2 border rounded">
+        <div class="d-flex align-center justify-space-between mb-1">
+          <div class="d-flex align-center">
+            <v-icon icon="mdi-domain" size="small" class="mr-2" />
+            <strong>{{ org.Label || 'Unnamed Organization' }}</strong>
+          </div>
+          <v-btn
+            :icon="copiedKey === key ? 'mdi-check' : 'mdi-content-copy'"
+            size="x-small"
+            variant="text"
+            :color="copiedKey === key ? 'success' : undefined"
+            @click="copyToClipboard(org.Label || '', key as string)"
+          />
+        </div>
+        <div class="text-caption text-grey">
+          Units: {{ (org.Units || []).join(', ') || 'None' }}
+        </div>
+        <div class="text-caption text-grey">
+          Context: {{ org.context || 'Not set' }} |
+          Priority: {{ org.priority || 'Not set' }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <div v-for="(org, index) in organizations" :key="index" class="mb-4 pa-3 border rounded">
+        <div class="d-flex align-center justify-space-between mb-2">
+          <strong>Organization</strong>
+          <v-btn
+            icon="mdi-delete"
+            size="small"
+            color="error"
+            variant="text"
+            @click="$emit('remove-organization', index)">
+          </v-btn>
+        </div>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="org.Label"
+              label="Label"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="org.sortName"
+              label="Sort Name"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="org.context"
+              label="Context"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model.number="org.priority"
+              label="Priority"
+              type="number"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="12">
+            <v-text-field
+              v-model="org.Units"
+              label="Units (comma-separated)"
+              variant="outlined"
+              density="compact"
+              hint="Enter units separated by commas"
+            />
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.person-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/editors/PersonEditorPhones.vue b/src/components/editors/PersonEditorPhones.vue
new file mode 100644
index 0000000..e059aa8
--- /dev/null
+++ b/src/components/editors/PersonEditorPhones.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { useClipboard } from '@KTXC/composables/useClipboard'
+
+interface Props {
+  mode: 'edit' | 'view'
+  phones: Record<string, any>
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  'add-phone': []
+  'remove-phone': [key: string]
+}>()
+
+const { copiedKey, copyToClipboard } = useClipboard<string>()
+</script>
+
+<template>
+  <div v-if="Object.keys(phones || {}).length > 0 || mode === 'edit'" class="person-editor-section">
+    <div class="d-flex align-center justify-space-between mb-2">
+      <div class="text-subtitle-1">Phones</div>
+      <v-btn v-if="mode === 'edit'"
+        size="small"
+        variant="outlined"
+        @click="$emit('add-phone')">
+        <v-icon left>mdi-plus</v-icon>
+        Add Phone
+      </v-btn>
+    </div>
+
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'">
+      <div v-for="(phone, key) in phones" :key="key" class="mb-2 pa-2 border rounded">
+        <div class="d-flex align-center justify-space-between mb-1">
+          <div class="d-flex align-center">
+            <v-icon icon="mdi-phone" size="small" class="mr-2" />
+            <strong>{{ phone.number || 'No number' }}</strong>
+          </div>
+          <v-btn
+            :icon="copiedKey === key ? 'mdi-check' : 'mdi-content-copy'"
+            size="x-small"
+            variant="text"
+            :color="copiedKey === key ? 'success' : undefined"
+            @click="copyToClipboard(phone.number || '', key as string)"
+          />
+        </div>
+        <div class="text-caption text-grey">
+          Label: {{ phone.label || 'Not set' }} |
+          Context: {{ phone.context || 'Not set' }} |
+          Priority: {{ phone.priority || 'Not set' }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <div v-for="(phone, index) in phones" :key="index" class="mb-4 pa-3 border rounded">
+        <div class="d-flex align-center justify-space-between mb-2">
+          <strong>Phone</strong>
+          <v-btn
+            icon="mdi-delete"
+            size="small"
+            color="error"
+            variant="text"
+            @click="$emit('remove-phone', index)">
+          </v-btn>
+        </div>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="phone.number"
+              label="Number"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="phone.label"
+              label="Label"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="phone.context"
+              label="Context"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model.number="phone.priority"
+              label="Priority"
+              type="number"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.person-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/editors/PersonEditorPhysicalLocations.vue b/src/components/editors/PersonEditorPhysicalLocations.vue
new file mode 100644
index 0000000..3a378f1
--- /dev/null
+++ b/src/components/editors/PersonEditorPhysicalLocations.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { useClipboard } from '@KTXC/composables/useClipboard'
+
+interface Props {
+  mode: 'edit' | 'view'
+  physicalLocations: Record<string, any>
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  'add-physical-location': []
+  'remove-physical-location': [key: string]
+}>()
+
+const { copiedKey, copyToClipboard } = useClipboard<string>()
+
+const formatAddress = (location: any) => {
+  if (!location) return 'Not set'
+  const parts = []
+  if (location.street) parts.push(location.street)
+  if (location.locality) parts.push(location.locality)
+  if (location.region) parts.push(location.region)
+  if (location.code) parts.push(location.code)
+  if (location.country) parts.push(location.country)
+  return parts.join(', ') || 'Not set'
+}
+</script>
+
+<template>
+  <div v-if="Object.keys(physicalLocations || {}).length > 0 || mode === 'edit'" class="person-editor-section">
+    <div class="d-flex align-center justify-space-between mb-2">
+      <div class="text-subtitle-1">Physical Locations</div>
+      <v-btn v-if="mode === 'edit'"
+        size="small"
+        variant="outlined"
+        @click="$emit('add-physical-location')">
+        <v-icon left>mdi-plus</v-icon>
+        Add Location
+      </v-btn>
+    </div>
+
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'">
+      <div v-for="(location, key) in physicalLocations" :key="key" class="mb-2 pa-2 border rounded">
+        <div class="d-flex align-center justify-space-between mb-1">
+          <div class="d-flex align-center">
+            <v-icon icon="mdi-map-marker" size="small" class="mr-2" />
+            <strong>{{ location.label || `Location ${parseInt(key.split('_')[1]) || key}` }}</strong>
+          </div>
+          <v-btn
+            :icon="copiedKey === key ? 'mdi-check' : 'mdi-content-copy'"
+            size="x-small"
+            variant="text"
+            :color="copiedKey === key ? 'success' : undefined"
+            @click="copyToClipboard(formatAddress(location), key as string)"
+          />
+        </div>
+        <div class="text-caption text-grey">
+          {{ formatAddress(location) }}
+          <span v-if="location.context"> | Context: {{ location.context }}</span>
+          <span v-if="location.priority"> | Priority: {{ location.priority }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <div v-for="(location, index) in physicalLocations" :key="index" class="mb-4 pa-3 border rounded">
+        <div class="d-flex align-center justify-space-between mb-2">
+          <strong>{{ location.label || `Location` }}</strong>
+          <v-btn
+            icon="mdi-delete"
+            size="small"
+            color="error"
+            variant="text"
+            @click="$emit('remove-physical-location', index)">
+          </v-btn>
+        </div>
+
+        <div class="text-subtitle-2 mb-2">Address</div>
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="location.box"
+              label="Box"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="location.unit"
+              label="Unit"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row class="mb-2">
+          <v-col cols="12">
+            <v-text-field
+              v-model="location.street"
+              label="Street"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="location.locality"
+              label="City/Locality"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="location.region"
+              label="State/Region"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row class="mb-4">
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="location.code"
+              label="Postal Code"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="location.country"
+              label="Country"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <div class="text-subtitle-2 mb-2">Additional Information</div>
+        <v-row class="mb-2">
+          <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.coordinates"
+              label="Coordinates"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="4">
+            <v-text-field
+              v-model="location.timeZone"
+              label="Time Zone"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="4">
+            <v-text-field
+              v-model="location.context"
+              label="Context"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="4">
+            <v-text-field
+              v-model.number="location.priority"
+              label="Priority"
+              type="number"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.person-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/editors/PersonEditorTitles.vue b/src/components/editors/PersonEditorTitles.vue
new file mode 100644
index 0000000..f0df101
--- /dev/null
+++ b/src/components/editors/PersonEditorTitles.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { useClipboard } from '@KTXC/composables/useClipboard'
+
+interface Props {
+  mode: 'edit' | 'view'
+  titles: Record<string, any>
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  'add-title': []
+  'remove-title': [key: string]
+}>()
+
+const { copiedKey, copyToClipboard } = useClipboard<string>()
+</script>
+
+<template>
+  <div v-if="Object.keys(titles || {}).length > 0 || mode === 'edit'" class="person-editor-section">
+    <div class="d-flex align-center justify-space-between mb-2">
+      <div class="text-subtitle-1">Titles</div>
+      <v-btn v-if="mode === 'edit'"
+        size="small"
+        variant="outlined"
+        @click="$emit('add-title')">
+        <v-icon left>mdi-plus</v-icon>
+        Add Title
+      </v-btn>
+    </div>
+
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'">
+      <div v-for="(title, key) in titles" :key="key" class="mb-2 pa-2 border rounded">
+        <div class="d-flex align-center justify-space-between mb-1">
+          <div class="d-flex align-center">
+            <v-icon icon="mdi-badge-account" size="small" class="mr-2" />
+            <strong>{{ title.label || 'Untitled' }}</strong>
+          </div>
+          <v-btn
+            :icon="copiedKey === key ? 'mdi-check' : 'mdi-content-copy'"
+            size="x-small"
+            variant="text"
+            :color="copiedKey === key ? 'success' : undefined"
+            @click="copyToClipboard(title.label || '', key as string)"
+          />
+        </div>
+        <div class="text-caption text-grey">
+          Kind: {{ title.kind || 'Not set' }} |
+          Relation: {{ title.relation || 'Not set' }} |
+          Context: {{ title.context || 'Not set' }} |
+          Priority: {{ title.priority || 'Not set' }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <div v-for="(title, key) in titles" :key="key" class="mb-4 pa-3 border rounded">
+        <div class="d-flex align-center justify-space-between mb-2">
+          <strong>Title</strong>
+          <v-btn
+            icon="mdi-delete"
+            size="small"
+            color="error"
+            variant="text"
+            @click="$emit('remove-title', key)">
+          </v-btn>
+        </div>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-select
+              v-model="title.kind"
+              :items="['t', 'r']"
+              label="Kind"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="title.label"
+              label="Label"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="title.relation"
+              label="Relation"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="title.context"
+              label="Context"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model.number="title.priority"
+              label="Priority"
+              type="number"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.person-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/editors/PersonEditorVirtualLocations.vue b/src/components/editors/PersonEditorVirtualLocations.vue
new file mode 100644
index 0000000..fe7290e
--- /dev/null
+++ b/src/components/editors/PersonEditorVirtualLocations.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { useClipboard } from '@KTXC/composables/useClipboard'
+
+interface Props {
+  mode: 'edit' | 'view'
+  virtualLocations: Record<string, any>
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  'add-virtual-location': []
+  'remove-virtual-location': [key: string]
+}>()
+
+const { copiedKey, copyToClipboard } = useClipboard<string>()
+</script>
+
+<template>
+  <div v-if="Object.keys(virtualLocations || {}).length > 0 || mode === 'edit'" class="person-editor-section">
+    <div class="d-flex align-center justify-space-between mb-2">
+      <div class="text-subtitle-1">Virtual Locations</div>
+      <v-btn v-if="mode === 'edit'"
+        size="small"
+        variant="outlined"
+        @click="$emit('add-virtual-location')">
+        <v-icon left>mdi-plus</v-icon>
+        Add Virtual Location
+      </v-btn>
+    </div>
+
+    <!-- Read-only view -->
+    <div v-if="mode === 'view'">
+      <div v-for="(virtualLocation, key) in virtualLocations" :key="key" class="mb-2 pa-2 border rounded">
+        <div class="d-flex align-center justify-space-between mb-1">
+          <div class="d-flex align-center">
+            <v-icon icon="mdi-web" size="small" class="mr-2" />
+            <strong>{{ virtualLocation.location || 'No location' }}</strong>
+          </div>
+          <v-btn
+            :icon="copiedKey === key ? 'mdi-check' : 'mdi-content-copy'"
+            size="x-small"
+            variant="text"
+            :color="copiedKey === key ? 'success' : undefined"
+            @click="copyToClipboard(virtualLocation.location || '', key as string)"
+          />
+        </div>
+        <div class="text-caption text-grey">
+          Label: {{ virtualLocation.label || 'Not set' }} |
+          Context: {{ virtualLocation.context || 'Not set' }} |
+          Priority: {{ virtualLocation.priority || 'Not set' }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else>
+      <div v-for="(virtualLocation, index) in virtualLocations" :key="index" class="mb-4 pa-3 border rounded">
+        <div class="d-flex align-center justify-space-between mb-2">
+          <strong>Virtual Location</strong>
+          <v-btn
+            icon="mdi-delete"
+            size="small"
+            color="error"
+            variant="text"
+            @click="$emit('remove-virtual-location', index)">
+          </v-btn>
+        </div>
+
+        <v-row class="mb-2">
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="virtualLocation.location"
+              label="Location (URL/Handle)"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="virtualLocation.label"
+              label="Label"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model="virtualLocation.context"
+              label="Context"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              v-model.number="virtualLocation.priority"
+              label="Priority"
+              type="number"
+              variant="outlined"
+              density="compact"
+            />
+          </v-col>
+        </v-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.person-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>
diff --git a/src/integrations.ts b/src/integrations.ts
new file mode 100644
index 0000000..0053e78
--- /dev/null
+++ b/src/integrations.ts
@@ -0,0 +1,15 @@
+import type { ModuleIntegrations } from "@KTXC/types/moduleTypes";
+
+const integrations: ModuleIntegrations = {
+  app_menu: [
+    {
+      id: 'people',
+      label: 'People',
+      path: '/people',
+      icon: 'mdi-account-multiple',
+      priority: 20,
+    },
+  ],
+};
+
+export default integrations;
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..b5dabe7
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,7 @@
+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/PeoplePage.vue b/src/pages/PeoplePage.vue
new file mode 100644
index 0000000..9444dbc
--- /dev/null
+++ b/src/pages/PeoplePage.vue
@@ -0,0 +1,392 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useDisplay } from 'vuetify'
+import { useModuleStore } from '@KTXC/stores/moduleStore'
+import { useCollectionsStore } from '@PeopleManager/stores/collectionsStore'
+import { useEntitiesStore } from '@PeopleManager/stores/entitiesStore'
+import { ServiceObject } from '@PeopleManager/models/service';
+import { CollectionObject } from '@PeopleManager/models/collection';
+import { EntityObject } from '@PeopleManager/models/entity';
+import CollectionList from '@/components/CollectionList.vue'
+import CollectionEditor from '@/components/CollectionEditor.vue'
+import PersonList from '@/components/PersonList.vue'
+import PersonEditor from '@/components/PersonEditor.vue'
+
+// Vuetify display
+const display = useDisplay()
+
+// View state
+const sidebarVisible = ref(true)
+
+// Check if people manager is available
+const moduleStore = useModuleStore()
+
+const isPeopleManagerAvailable = computed(() => {
+  return moduleStore.has('people_manager') || moduleStore.has('PeopleManager')
+})
+
+// Local state for UI selections
+const collectionsStore = useCollectionsStore()
+const entitiesStore = useEntitiesStore()
+const selectedCollection = ref<CollectionObject | null>(null)
+const selectedEntity = ref<EntityObject | null>(null)
+const entityEditorMode = ref<'edit' | 'view'>('view')
+
+// Collection editor state
+const showCollectionEditor = ref(false)
+const editingCollection = ref<CollectionObject | null>(null)
+const collectionEditorMode = ref<'create' | 'edit'>('create')
+const CollectionListRef = ref<InstanceType<typeof CollectionList> | null>(null)
+
+// Handlers
+const handleEditorEdit = () => {
+  console.log('[People] - Editor editing started')
+  entityEditorMode.value = 'edit'
+}
+
+const handleEditorCancel = () => {
+  console.log('[People] - Editor editing cancelled')
+  entityEditorMode.value = 'view'
+}
+
+const handleEditorClose = () => {
+  console.log('[People] - Editor closed')
+  selectedEntity.value = null
+  entityEditorMode.value = 'view'
+}
+
+const handleCollectionSelect = (collection: CollectionObject) => {
+  console.log('[People] - Collection selected', collection)
+  selectedCollection.value = collection ?? null
+  selectedEntity.value = null
+}
+
+const handleCollectionEdit = (collection: CollectionObject) => {
+  console.log('[People] - Collection edit', collection)
+  editingCollection.value = collection
+  collectionEditorMode.value = 'edit'
+  showCollectionEditor.value = true
+}
+
+const onCollectionFresh = () => {
+  console.log('[People] - Collection new')
+  editingCollection.value = collectionsStore.fresh()
+  collectionEditorMode.value = 'create'
+  showCollectionEditor.value = true
+}
+
+const handleCollectionSave = async (collection: CollectionObject, service: ServiceObject) => {
+  console.log('[People] - Collection save', collection)
+  if (collectionEditorMode.value === 'create') {
+    await handleCollectionCreate(collection, service)
+  } else {
+    await handleCollectionModify(collection)
+  }
+  await CollectionListRef.value?.refresh()
+}
+
+const handleCollectionCreate = async (collection: CollectionObject, service: ServiceObject) => {
+  console.log('[People] - Collection created', collection)
+  const result = await collectionsStore.create(service, collection)
+
+  if (result instanceof CollectionObject) {
+    selectedCollection.value = result
+  } else {
+    selectedCollection.value = null
+  }
+
+  selectedEntity.value = null
+}
+
+const handleCollectionModify = async (collection: CollectionObject) => {
+  console.log('[People] - Collection modified', collection)
+  await collectionsStore.modify(collection)
+}
+
+const handleCollectionDelete = async (collection: CollectionObject) => {
+  console.log('[People] - Collection deleted', collection)
+  await collectionsStore.destroy(collection)
+  selectedCollection.value = null
+  selectedEntity.value = null
+  await CollectionListRef.value?.refresh()
+}
+
+const handleEntitySelect = (entity: EntityObject) => {
+  console.log('[People] - Entity selected', entity)
+  selectedEntity.value = entity
+  entityEditorMode.value = 'view'
+}
+
+const onEntityFresh = (type: string) => {
+  console.log('[People] - Entity create', type)
+  selectedEntity.value = entitiesStore.fresh(type)
+  entityEditorMode.value = 'edit'
+}
+
+const handleEntitySave = async (entity: EntityObject, collection?: CollectionObject | null) => {
+  console.log('[People] - Entity save', entity)
+  if (!(collection instanceof CollectionObject)) {
+    collection = selectedCollection.value
+  }
+  if (!collection) {
+    console.warn('[People] - Invalid collection object cannot save entity')
+    return
+  }
+  if (entity.id === null) {
+    console.log('[People] - Entity create', entity)
+    entity.data.created = new Date();
+    selectedEntity.value = await entitiesStore.create(collection, entity)
+  } else if (entity.id !== null) {
+    console.log('[People] - Entity modify', entity)
+    entity.data.modified = new Date();
+    selectedEntity.value = await entitiesStore.modify(collection, entity)
+  }
+  entityEditorMode.value = 'view'
+}
+
+const handleEntityDelete = async (entity: EntityObject, collection?: CollectionObject | null) => {
+  console.log('[People] - Entity deleted', entity)
+  if (!(collection instanceof CollectionObject)) {
+    collection = selectedCollection.value
+  }
+  if (!collection) {
+    console.warn('[People] - Invalid collection object cannot delete entity')
+    return
+  }
+  await entitiesStore.destroy(collection, entity)
+  selectedEntity.value = null
+  entityEditorMode.value = 'view'
+}
+</script>
+
+<template>
+  <div class="people-container">
+    <!-- Top Navigation Bar -->
+    <v-app-bar elevation="0" class="people-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-account-multiple</v-icon>
+        <span class="text-h6 font-weight-bold">People Manager</span>
+      </v-app-bar-title>
+
+      <v-spacer></v-spacer>
+    </v-app-bar>
+
+    <!-- Main Content Area -->
+    <div class="people-content">
+      <!-- Sidebar Navigation Drawer -->
+      <v-navigation-drawer
+        v-model="sidebarVisible"
+        :permanent="display.mdAndUp.value"
+        :temporary="display.smAndDown.value"
+        width="280"
+        class="people-sidebar"
+      >
+        <div class="pa-4 d-flex flex-column h-100">
+          <CollectionList
+            ref="CollectionListRef"
+            :selected-collection="selectedCollection"
+            @select="handleCollectionSelect"
+            @edit="handleCollectionEdit"
+          />
+          
+          <v-divider class="my-2" />
+          
+          <div class="sidebar-footer">
+            <div class="d-flex align-center mb-2">
+              <v-icon icon="mdi-plus-circle" size="small" class="mr-2" />
+              <span class="text-subtitle-2 font-weight-bold">Create</span>
+            </div>
+            <v-btn
+              variant="text"
+              prepend-icon="mdi-account-plus"
+              size="small"
+              block
+              class="justify-start"
+              :disabled="!selectedCollection"
+              @click="onEntityFresh('individual')"
+            >
+              Individual
+            </v-btn>
+            <v-btn
+              variant="text"
+              prepend-icon="mdi-domain-plus"
+              size="small"
+              block
+              class="justify-start"
+              :disabled="!selectedCollection"
+              @click="onEntityFresh('organization')"
+            >
+              Organization
+            </v-btn>
+            <v-btn
+              variant="text"
+              prepend-icon="mdi-account-group"
+              size="small"
+              block
+              class="justify-start"
+              :disabled="!selectedCollection"
+              @click="onEntityFresh('group')"
+            >
+              Group
+            </v-btn>
+            <v-btn
+              variant="text"
+              prepend-icon="mdi-book-plus"
+              size="small"
+              block
+              class="justify-start"
+              @click="onCollectionFresh"
+            >
+              Address Book
+            </v-btn>
+          </div>
+        </div>
+      </v-navigation-drawer>
+
+      <!-- Main View -->
+      <div class="people-main">
+        <v-alert
+          v-if="!isPeopleManagerAvailable"
+          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" />
+            People Manager Not Available
+          </v-alert-title>
+          <div class="mt-2">
+            <p>
+              The People Manager module is not installed or enabled. 
+              This module requires the <strong>people_manager</strong> module to function properly.
+            </p>
+            <p class="mt-2 mb-0">
+              Please contact your system administrator to install and enable the 
+              <code>people_manager</code> module.
+            </p>
+          </div>
+        </v-alert>
+        
+        <div v-if="isPeopleManagerAvailable" class="people-wrapper">
+          <div class="people-list-panel">
+            <PersonList
+              :selected-collection="selectedCollection"
+              :selected-entity="selectedEntity"
+              @select="handleEntitySelect"
+              @fresh="onEntityFresh"
+            />
+          </div>
+          <div class="people-editor-panel">
+            <PersonEditor
+              :mode="entityEditorMode"
+              :selected-collection="selectedCollection"
+              :selected-entity="selectedEntity"
+              @save="handleEntitySave"
+              @delete="handleEntityDelete"
+              @edit="handleEditorEdit"
+              @cancel="handleEditorCancel"
+              @close="handleEditorClose"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Collection Editor Dialog -->
+    <CollectionEditor
+      v-model="showCollectionEditor"
+      :collection="editingCollection"
+      :mode="collectionEditorMode"
+      @save="handleCollectionSave"
+      @delete="handleCollectionDelete"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.people-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  isolation: isolate; /* Create stacking context to prevent style leakage */
+}
+
+.people-toolbar {
+  border-bottom: 1px solid rgb(var(--v-border-color)) !important;
+}
+
+.people-content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.people-sidebar {
+  border-right: 1px solid rgb(var(--v-border-color)) !important;
+  overflow-y: auto;
+}
+
+.people-main {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.people-wrapper {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.people-list-panel {
+  width: 300px;
+  min-width: 250px;
+  max-width: 400px;
+  border-right: 1px solid rgb(var(--v-border-color));
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(var(--v-theme-on-surface), 0.04);
+}
+
+.people-editor-panel {
+  flex: 1;
+  border-left: 1px solid rgb(var(--v-border-color));
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(var(--v-theme-on-surface), 0.04);
+  min-height: 0;
+}
+
+/* Responsive adjustments */
+@media (max-width: 960px) {
+  .people-wrapper {
+    flex-direction: column;
+  }
+
+  .people-list-panel {
+    width: 100%;
+    max-width: none;
+    height: 40%;
+    border-right: none;
+    border-bottom: 1px solid rgb(var(--v-border-color));
+  }
+
+  .people-editor-panel {
+    border-left: none;
+    border-top: 1px solid rgb(var(--v-border-color));
+  }
+}
+</style>
diff --git a/src/routes.ts b/src/routes.ts
new file mode 100644
index 0000000..7e8a52f
--- /dev/null
+++ b/src/routes.ts
@@ -0,0 +1,9 @@
+const routes = [
+  {
+    name: 'people',
+    path: '/people',
+    component: () => import('@/pages/PeoplePage.vue'),
+  },
+]
+
+export default routes
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..4f49234
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1 @@
+/* people module styles */
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..611d7fe
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,20 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "@KTXC/*": ["../../core/src/*"],
+      "@PeopleManager/*": ["../people_manager/src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
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..1d42c3f
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,58 @@
+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'),
+      '@PeopleManager': path.resolve(__dirname, '../people_manager/src'),
+    },
+  },
+  build: {
+    outDir: 'static',
+    emptyOutDir: true,
+    sourcemap: true,
+    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 'people-[hash].css'
+          }
+          return '[name]-[hash][extname]'
+        }
+      }
+    },
+  },
+})