From 87d462bd56f90efdb095787838f65899e8b1273a Mon Sep 17 00:00:00 2001
From: Fabian Pichler <fabian.pichler@synventis.com>
Date: Fri, 7 Aug 2026 01:21:32 +0200
Subject: [PATCH 1/2] CELDEV-1338 - add router-independent admin frontend
 islands

---
 celements-admin-frontend/README.md            |  19 +-
 celements-admin-frontend/package-lock.json    | 188 ++++++++++++++----
 celements-admin-frontend/package.json         |  45 ++++-
 celements-admin-frontend/postcss.config.js    |  41 +++-
 celements-admin-frontend/src/App.vue          |   6 +-
 celements-admin-frontend/src/assets/main.css  |  25 ++-
 celements-admin-frontend/src/bootstrap.ts     | 150 +-------------
 .../src/conf/routes/index.ts                  |   8 +-
 celements-admin-frontend/src/embedded.ts      |   6 +
 .../page-attachments/PageAttachments.vue      |  95 +++++++++
 .../src/features/page-attachments/types.ts    |  22 ++
 .../src/islands/PageAttachmentsIslandRoot.vue |  23 +++
 .../src/islands/page-attachments-element.ts   |  83 ++++++++
 .../src/medialib/api/tagApi.ts                |   3 +-
 .../src/medialib/components/TagSidebar.vue    |  66 ++++--
 .../src/medialib/components/TagStatusBar.vue  |  28 ++-
 .../src/medialib/stores/tags.ts               |  13 +-
 .../src/plugins/plugin.pinia.ts               |   3 +-
 .../src/plugins/plugin.router.ts              |  48 ++---
 .../src/public/page-attachments-island.ts     |  13 ++
 .../src/public/page-attachments.ts            |   7 +
 .../src/public/runtime.ts                     |   4 +
 celements-admin-frontend/src/public/styles.ts |   2 +
 .../src/runtime/application.ts                | 131 ++++++++++++
 .../src/runtime/styles.ts                     |  22 ++
 .../src/spa/PageAttachmentsRoute.vue          |  12 ++
 .../src/views/MediaLib.vue                    |   6 +-
 .../src/views/PageAttachments.vue             |  70 -------
 celements-admin-frontend/tailwind.config.js   |   6 +-
 .../test/page-attachments.test.ts             | 181 +++++++++++++++++
 celements-admin-frontend/vite.config.ts       |  15 +-
 .../vite.library.config.ts                    |  49 +++++
 .../celEditorTabs/loadTabAttachments.vm       |  93 +--------
 .../celTemplates/attachmentsinline.vm         |  94 +--------
 .../celTemplates/pageAttachmentsIsland.vm     |  14 ++
 ...ependent-admin-features-and-vue-islands.md | 173 ++++++++++++++++
 36 files changed, 1238 insertions(+), 526 deletions(-)
 create mode 100644 celements-admin-frontend/src/features/page-attachments/PageAttachments.vue
 create mode 100644 celements-admin-frontend/src/features/page-attachments/types.ts
 create mode 100644 celements-admin-frontend/src/islands/PageAttachmentsIslandRoot.vue
 create mode 100644 celements-admin-frontend/src/islands/page-attachments-element.ts
 create mode 100644 celements-admin-frontend/src/public/page-attachments-island.ts
 create mode 100644 celements-admin-frontend/src/public/page-attachments.ts
 create mode 100644 celements-admin-frontend/src/public/runtime.ts
 create mode 100644 celements-admin-frontend/src/public/styles.ts
 create mode 100644 celements-admin-frontend/src/runtime/application.ts
 create mode 100644 celements-admin-frontend/src/runtime/styles.ts
 create mode 100644 celements-admin-frontend/src/spa/PageAttachmentsRoute.vue
 delete mode 100644 celements-admin-frontend/src/views/PageAttachments.vue
 create mode 100644 celements-admin-frontend/test/page-attachments.test.ts
 create mode 100644 celements-admin-frontend/vite.library.config.ts
 create mode 100644 celements-webapp/src/main/webapp/templates/celTemplates/pageAttachmentsIsland.vm
 create mode 100644 docs/architecture/decisions/0001-router-independent-admin-features-and-vue-islands.md

diff --git a/celements-admin-frontend/README.md b/celements-admin-frontend/README.md
index 15a0d9923..d7c29d580 100644
--- a/celements-admin-frontend/README.md
+++ b/celements-admin-frontend/README.md
@@ -97,7 +97,24 @@ src/
 └── main.ts         # Standalone development entry
 ```
 
-The app exposes a `createCelementsAdminApp()` factory function from `bootstrap.ts` that allows the frontend to be embedded in a host application or run standalone.
+The SPA bootstrap owns Vue Router. Shared feature components and islands use the router-independent
+application runtime, which creates a separate Pinia instance for every mounted Vue application.
+
+## Public package API
+
+The supported `@celements/admin-frontend` entry points are:
+
+- `@celements/admin-frontend/runtime` for `createCelementsApplication()`.
+- `@celements/admin-frontend/page-attachments` for the router-free `PageAttachments` component and
+  its typed props, selection event, and `attachment-actions` slot contract.
+- `@celements/admin-frontend/page-attachments-island` for the guarded
+  `<cel-page-attachments>` custom-element registration.
+- `@celements/admin-frontend/styles.css` for downstream Vue applications using the feature component.
+
+The custom element accepts `space-name`, `doc-name`, `locale`, and `local-dev`. It dispatches the
+bubbling `attachment-selection-change` event. Framework packages are peer dependencies so a
+downstream application supplies one Vue, Pinia, PrimeVue, vue-i18n, Vue Router, and VueFinder
+runtime.
 
 ---
 
diff --git a/celements-admin-frontend/package-lock.json b/celements-admin-frontend/package-lock.json
index 3dc50244f..4d2698248 100644
--- a/celements-admin-frontend/package-lock.json
+++ b/celements-admin-frontend/package-lock.json
@@ -17,17 +17,11 @@
         "findandreplacedomtext": "^0.4.6",
         "lodash": "^4.17.23",
         "luxon": "^3.7.2",
-        "pinia": "^3.0.4",
-        "primevue": "^4.5.4",
         "tailwind-merge": "^3.5.0",
         "tailwindcss-primeui": "^0.6.1",
-        "vue": "^3.5.30",
         "vue-dompurify-html": "^5.3.0",
-        "vue-i18n": "^11.3.0",
         "vue-matomo": "^4.2.0",
-        "vue-router": "^5.0.4",
         "vue3-spinners": "^1.3.3",
-        "vuefinder": "^4.1.1",
         "zod": "^4.3.6"
       },
       "devDependencies": {
@@ -49,13 +43,27 @@
         "eslint-plugin-vue": "^10.8.0",
         "jsdom": "^29.0.1",
         "npm-run-all2": "^8.0.4",
+        "pinia": "^3.0.4",
         "postcss": "^8.5.8",
         "prettier": "^3.8.1",
+        "primevue": "^4.5.4",
         "tailwindcss": "^4.2.2",
         "typescript": "~5.9.3",
         "vite": "^8.0.1",
         "vitest": "^4.1.0",
-        "vue-tsc": "^3.2.6"
+        "vue": "^3.5.30",
+        "vue-i18n": "^11.3.0",
+        "vue-router": "^5.0.4",
+        "vue-tsc": "^3.2.6",
+        "vuefinder": "^4.1.1"
+      },
+      "peerDependencies": {
+        "pinia": "^3.0.4",
+        "primevue": "^4.5.4",
+        "vue": "^3.5.30",
+        "vue-i18n": "^11.3.0",
+        "vue-router": "^5.0.4",
+        "vuefinder": "^4.1.1"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -121,6 +129,7 @@
       "version": "7.29.1",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
       "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.29.0",
         "@babel/types": "^7.29.0",
@@ -459,6 +468,7 @@
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
       "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+      "dev": true,
       "dependencies": {
         "@floating-ui/utils": "^0.2.11"
       }
@@ -467,6 +477,7 @@
       "version": "1.7.6",
       "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
       "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+      "dev": true,
       "dependencies": {
         "@floating-ui/core": "^1.7.5",
         "@floating-ui/utils": "^0.2.11"
@@ -475,7 +486,8 @@
     "node_modules/@floating-ui/utils": {
       "version": "0.2.11",
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
-      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg=="
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+      "dev": true
     },
     "node_modules/@fortawesome/fontawesome-common-types": {
       "version": "7.2.0",
@@ -581,6 +593,7 @@
       "version": "11.4.2",
       "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.4.2.tgz",
       "integrity": "sha512-7fpuCcVmeLv2T9qHsARqGvh8xt+sV2fH+Q+gMHFwB/rPXzo85DpbJFKn7dBH1L5p0c2cSh2DW+2h/64EKrISmA==",
+      "dev": true,
       "dependencies": {
         "@intlify/devtools-types": "11.4.2",
         "@intlify/message-compiler": "11.4.2",
@@ -597,6 +610,7 @@
       "version": "11.4.2",
       "resolved": "https://registry.npmjs.org/@intlify/devtools-types/-/devtools-types-11.4.2.tgz",
       "integrity": "sha512-3u8EN1kB6EMSi96KXs5k7a8y2X2g4+h3X6iwVZU47cP4n+mTuq//WMjG588BzSp/2XQ/dTXo2BLUXX+XS+PNfA==",
+      "dev": true,
       "dependencies": {
         "@intlify/core-base": "11.4.2",
         "@intlify/shared": "11.4.2"
@@ -612,6 +626,7 @@
       "version": "11.4.2",
       "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.4.2.tgz",
       "integrity": "sha512-a6CDSGSMTGrg0BjD97x8TBYPf7qQMDlZipJ6UDfv/pd4OIym8TMlHu3MsH0bTNnRdAG2D6EFEykIgiQPqvtTkA==",
+      "dev": true,
       "dependencies": {
         "@intlify/shared": "11.4.2",
         "source-map-js": "^1.0.2"
@@ -627,6 +642,7 @@
       "version": "11.4.2",
       "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.4.2.tgz",
       "integrity": "sha512-NzpHbguRCsOHDwxmlBa9qu/imc+/QWgsYUaK6FZeNC0wK8QfAbhqrktEp/haVzxU1aikH8IX4ytD+mfFEMi/9A==",
+      "dev": true,
       "engines": {
         "node": ">= 16"
       },
@@ -655,6 +671,7 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
         "@jridgewell/trace-mapping": "^0.3.24"
@@ -664,6 +681,7 @@
       "version": "2.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
       "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.24"
@@ -673,6 +691,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -686,6 +705,7 @@
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -695,6 +715,7 @@
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/@nanostores/i18n/-/i18n-1.3.3.tgz",
       "integrity": "sha512-hwuTKJ+DKCOuszmmOuNfDeA8j86WJWLLzjzE1BYm+mabMcD5JYDnTd0wPMwgGJ+U//ApRaxviRvOtvk50F+RCg==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -712,6 +733,7 @@
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/@nanostores/persistent/-/persistent-1.3.4.tgz",
       "integrity": "sha512-fZ42MOredSkqt450XrPxmQ94pSRPTas/rBUVCvEEMCR+rIp8bdo/xoaFFcG2cwpqAzA164PdD6p3D+MXLJYumw==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -729,6 +751,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@nanostores/vue/-/vue-1.1.0.tgz",
       "integrity": "sha512-14eY8/YA0AbtWkAjk8zHKxbjcuPubF+M7y9afQzg2b5VqRJcashwA0100vprau13BTBSynUmU6ZsU6x03YidjA==",
+      "dev": true,
       "funding": [
         {
           "type": "buymeacoffee",
@@ -858,6 +881,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@primeuix/styles/-/styles-2.0.3.tgz",
       "integrity": "sha512-2ykAB6BaHzR/6TwF8ShpJTsZrid6cVIEBVlookSdvOdmlWuevGu5vWOScgIwqWwlZcvkFYAGR/SUV3OHCTBMdw==",
+      "dev": true,
       "dependencies": {
         "@primeuix/styled": "^0.7.4"
       }
@@ -882,6 +906,7 @@
       "version": "4.5.5",
       "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.5.5.tgz",
       "integrity": "sha512-JpkXhq1ddc70JdsC3CC4dM+UbeeWuCW/8DpS9dNBfrOk824TLSlRlMEGFyVKqRMn5WPQvYLiy3xXfLQeNdSqhQ==",
+      "dev": true,
       "dependencies": {
         "@primeuix/styled": "^0.7.4",
         "@primeuix/utils": "^0.6.2"
@@ -897,6 +922,7 @@
       "version": "4.5.5",
       "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.5.5.tgz",
       "integrity": "sha512-eteOhTdAOXEYE9qW1AOrBBgDxQ2szHJxSkEK1XVdV2TKxGM5FQf03Ovms0VDyZTc16XBIgvwYjXJQS0BPbhPaA==",
+      "dev": true,
       "dependencies": {
         "@primeuix/utils": "^0.6.2",
         "@primevue/core": "4.5.5"
@@ -1419,6 +1445,7 @@
       "version": "8.19.4",
       "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.19.4.tgz",
       "integrity": "sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==",
+      "dev": true,
       "dependencies": {
         "remove-accents": "0.5.0"
       },
@@ -1434,6 +1461,7 @@
       "version": "5.100.10",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.100.10.tgz",
       "integrity": "sha512-8UR0yJR+GiQ40m3lPhUr0xbfAupe6GSQiksSBSa9SM2NjezFyxXCIA69/lz8cSoNKZLrw1/PktIyQBJcVeMi3w==",
+      "dev": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
@@ -1443,6 +1471,7 @@
       "version": "5.100.10",
       "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-5.100.10.tgz",
       "integrity": "sha512-S1aOmIPQNd5axR2Sw7H8d96EybY3kEZ396KA90e0SGLDYSfd2QgWi7+ItYXRGIDiSjOjlPUnthKDP0mDDBV8Kw==",
+      "dev": true,
       "dependencies": {
         "@tanstack/match-sorter-utils": "^8.19.4",
         "@tanstack/query-core": "5.100.10",
@@ -1466,12 +1495,14 @@
     "node_modules/@tanstack/vue-query/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=="
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "dev": true
     },
     "node_modules/@tanstack/vue-query/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==",
+      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -1496,7 +1527,8 @@
     "node_modules/@transloadit/prettier-bytes": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@transloadit/prettier-bytes/-/prettier-bytes-0.3.5.tgz",
-      "integrity": "sha512-xF4A3d/ZyX2LJWeQZREZQw+qFX4TGQ8bGVP97OLRt6sPO6T0TNHBFTuRHOJh7RNmYOBmQ9MHxpolD9bXihpuVA=="
+      "integrity": "sha512-xF4A3d/ZyX2LJWeQZREZQw+qFX4TGQ8bGVP97OLRt6sPO6T0TNHBFTuRHOJh7RNmYOBmQ9MHxpolD9bXihpuVA==",
+      "dev": true
     },
     "node_modules/@tsconfig/node20": {
       "version": "20.1.9",
@@ -1590,7 +1622,8 @@
     "node_modules/@types/retry": {
       "version": "0.12.2",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.2.tgz",
-      "integrity": "sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow=="
+      "integrity": "sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==",
+      "dev": true
     },
     "node_modules/@types/tough-cookie": {
       "version": "4.0.5",
@@ -1844,6 +1877,7 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@uppy/companion-client/-/companion-client-5.1.1.tgz",
       "integrity": "sha512-DzrOWTbIZHvtgAFXBMYHk2wD27NjpBSVhY2tEiEIUhPd2CxbFRZjHM/N3HOt3VwZEAP471QWFLlJRWPcIY3A2Q==",
+      "dev": true,
       "dependencies": {
         "@uppy/utils": "^7.1.1",
         "namespace-emitter": "^2.0.1",
@@ -1857,6 +1891,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@uppy/components/-/components-1.2.0.tgz",
       "integrity": "sha512-rtIr+77Rw/q5Vw++xazF1dCg2d4A4zT9CV+ZyN8Rsx8xiIr2CxCR4TaHHBy+WeC0b7Mk6yNuJ0wUa34tFJ6pKg==",
+      "dev": true,
       "dependencies": {
         "clsx": "^2.1.1",
         "dequal": "^2.0.3",
@@ -1885,6 +1920,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@uppy/core/-/core-5.2.0.tgz",
       "integrity": "sha512-uvfNyz4cnaplt7LYJmEZHuqOuav0tKp4a9WKJIaH6iIj7XiqYvS2J5SEByexAlUFlzefOAyjzj4Ja2dd/8aMrw==",
+      "dev": true,
       "dependencies": {
         "@transloadit/prettier-bytes": "^0.3.4",
         "@uppy/store-default": "^5.0.0",
@@ -1900,6 +1936,7 @@
       "version": "5.1.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.11.tgz",
       "integrity": "sha512-v+KEsUv2ps74PaSKv0gHTxTCgMXOIfBEbaqa6w6ISIGC7ZsvHN4N9oJ8d4cmf0n5oTzQz2SLmThbQWhjd/8eKg==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1917,6 +1954,7 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@uppy/locales/-/locales-5.1.1.tgz",
       "integrity": "sha512-zSbDU27JzfdssRJoa5/xmGOsrEtS+2Z9j41weaoCa/NoK4wqZzkFNQ0Z44etbTg3PDVFakZVDu/Z+c+vsJCfdQ==",
+      "dev": true,
       "dependencies": {
         "@uppy/utils": "^7.1.5"
       }
@@ -1924,12 +1962,14 @@
     "node_modules/@uppy/store-default": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@uppy/store-default/-/store-default-5.0.0.tgz",
-      "integrity": "sha512-hQtCSQ1yGiaval/wVYUWquYGDJ+bpQ7e4FhUUAsRQz1x1K+o7NBtjfp63O9I4Ks1WRoKunpkarZ+as09l02cPw=="
+      "integrity": "sha512-hQtCSQ1yGiaval/wVYUWquYGDJ+bpQ7e4FhUUAsRQz1x1K+o7NBtjfp63O9I4Ks1WRoKunpkarZ+as09l02cPw==",
+      "dev": true
     },
     "node_modules/@uppy/utils": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@uppy/utils/-/utils-7.2.0.tgz",
       "integrity": "sha512-6lC246qszMv6bTyl/+QyHwrudgeguWkA94ME1wHn+a6uRAvmtAEaUManIfGqTJfoKvWAiCJqdJPl5xRJjhAloQ==",
+      "dev": true,
       "dependencies": {
         "lodash": "^4.17.23",
         "preact": "^10.26.10"
@@ -1939,6 +1979,7 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@uppy/vue/-/vue-3.2.0.tgz",
       "integrity": "sha512-BZiyUZxpadf3uUp8YzgwRZTIde/m9Ne4ILFygJg7ilFq/Qfb1pBVspG9FJoG23RbOiRuxd4JixwFh0gaFdfL+w==",
+      "dev": true,
       "dependencies": {
         "@uppy/components": "^1.2.0",
         "preact": "^10.26.10",
@@ -1971,6 +2012,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@uppy/xhr-upload/-/xhr-upload-5.2.0.tgz",
       "integrity": "sha512-3LV/X5Of6BINnKplP+CwUJ0a4/7cRFfzxwGyXnW+uCrNQHoo09dttcz3begWHejGvzenQHuUnMO3Fxyc71Pryg==",
+      "dev": true,
       "dependencies": {
         "@uppy/companion-client": "^5.1.1",
         "@uppy/utils": "^7.2.0"
@@ -1982,7 +2024,8 @@
     "node_modules/@viselect/vanilla": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/@viselect/vanilla/-/vanilla-3.9.0.tgz",
-      "integrity": "sha512-E9eBgoi/crJ0SlZMAc+Yst7nU324LZ5LLvcXjzWEcrfllscdpTml2OLOKHC7O8Bbz19OybSLv6VexxnjlJrLxQ=="
+      "integrity": "sha512-E9eBgoi/crJ0SlZMAc+Yst7nU324LZ5LLvcXjzWEcrfllscdpTml2OLOKHC7O8Bbz19OybSLv6VexxnjlJrLxQ==",
+      "dev": true
     },
     "node_modules/@vitejs/plugin-vue": {
       "version": "6.0.6",
@@ -2171,6 +2214,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.1.2.tgz",
       "integrity": "sha512-h9t4ArDdniO9ekYHAD95t9AZcAbb19lEGK+26iAjUODOIJKmObDNBSe4+6ELQAA3vtYiFPPBtHh7+cQCKi3Dng==",
+      "dev": true,
       "dependencies": {
         "@vue/compiler-sfc": "^3.5.22",
         "ast-kit": "^2.1.2",
@@ -2243,6 +2287,7 @@
       "version": "7.7.9",
       "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
       "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
+      "dev": true,
       "dependencies": {
         "@vue/devtools-kit": "^7.7.9"
       }
@@ -2251,6 +2296,7 @@
       "version": "7.7.9",
       "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
       "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
+      "dev": true,
       "dependencies": {
         "@vue/devtools-shared": "^7.7.9",
         "birpc": "^2.3.0",
@@ -2265,6 +2311,7 @@
       "version": "7.7.9",
       "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
       "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
+      "dev": true,
       "dependencies": {
         "rfdc": "^1.4.1"
       }
@@ -2466,6 +2513,7 @@
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "dev": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2544,6 +2592,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/ast-kit/-/ast-kit-2.2.0.tgz",
       "integrity": "sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==",
+      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.28.5",
         "pathe": "^2.0.3"
@@ -2559,6 +2608,7 @@
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/ast-walker-scope/-/ast-walker-scope-0.8.3.tgz",
       "integrity": "sha512-cbdCP0PGOBq0ASG+sjnKIoYkWMKhhz+F/h9pRexUdX2Hd38+WOlBkRKlqkGOSm0YQpcFMQBJeK4WspUAkwsEdg==",
+      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.28.4",
         "ast-kit": "^2.1.3"
@@ -2640,6 +2690,7 @@
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
       "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
@@ -2768,6 +2819,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
       "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "dev": true,
       "dependencies": {
         "readdirp": "^5.0.0"
       },
@@ -2781,7 +2833,8 @@
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
-      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "dev": true
     },
     "node_modules/cliui": {
       "version": "8.0.1",
@@ -2859,6 +2912,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -2922,7 +2976,8 @@
     "node_modules/confbox": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz",
-      "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ=="
+      "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==",
+      "dev": true
     },
     "node_modules/config-chain": {
       "version": "1.1.13",
@@ -2952,6 +3007,7 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
       "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
+      "dev": true,
       "dependencies": {
         "is-what": "^5.2.0"
       },
@@ -3022,7 +3078,8 @@
     "node_modules/debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
-      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==",
+      "dev": true
     },
     "node_modules/debug": {
       "version": "4.4.3",
@@ -3057,6 +3114,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -3087,7 +3145,8 @@
     "node_modules/easy-bem": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
-      "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A=="
+      "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==",
+      "dev": true
     },
     "node_modules/editorconfig": {
       "version": "1.0.7",
@@ -3461,7 +3520,8 @@
     "node_modules/exsolve": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz",
-      "integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA=="
+      "integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==",
+      "dev": true
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
@@ -3721,7 +3781,8 @@
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
-      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "dev": true
     },
     "node_modules/html-encoding-sniffer": {
       "version": "6.0.0",
@@ -3793,6 +3854,7 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/is-network-error/-/is-network-error-1.3.2.tgz",
       "integrity": "sha512-PhBY86zaxNZUuWP6h13Vu5oFe0XY6/UlKzQnYFELzGVHygP3MxmvTfYSG7GN3aIab/iWudSMgjSnG9Dq+nHrgA==",
+      "dev": true,
       "engines": {
         "node": ">=16"
       },
@@ -3819,6 +3881,7 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
       "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
+      "dev": true,
       "engines": {
         "node": ">=18"
       },
@@ -3939,6 +4002,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
       "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
       "bin": {
         "jsesc": "bin/jsesc"
       },
@@ -3977,6 +4041,7 @@
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
       "bin": {
         "json5": "lib/cli.js"
       },
@@ -4269,6 +4334,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz",
       "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==",
+      "dev": true,
       "dependencies": {
         "mlly": "^1.7.4",
         "pkg-types": "^2.3.0",
@@ -4330,6 +4396,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/magic-string-ast/-/magic-string-ast-1.0.3.tgz",
       "integrity": "sha512-CvkkH1i81zl7mmb94DsRiFeG9V2fR2JeuK8yDgS8oiZSFa++wWLEgZ5ufEOyLHbvSbD1gTRKv9NdX69Rnvr9JA==",
+      "dev": true,
       "dependencies": {
         "magic-string": "^0.30.19"
       },
@@ -4381,6 +4448,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/mime-match/-/mime-match-1.0.2.tgz",
       "integrity": "sha512-VXp/ugGDVh3eCLOBCiHZMYWQaTNUHv2IJrut+yXA6+JbLPXHglHwfS/5A5L0ll+jkCY7fIzRJcH6OIunF+c6Cg==",
+      "dev": true,
       "dependencies": {
         "wildcard": "^1.1.0"
       }
@@ -4412,12 +4480,14 @@
     "node_modules/mitt": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
-      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "dev": true
     },
     "node_modules/mlly": {
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.2.tgz",
       "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==",
+      "dev": true,
       "dependencies": {
         "acorn": "^8.16.0",
         "pathe": "^2.0.3",
@@ -4428,12 +4498,14 @@
     "node_modules/mlly/node_modules/confbox": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
-      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w=="
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "dev": true
     },
     "node_modules/mlly/node_modules/pkg-types": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
       "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "dev": true,
       "dependencies": {
         "confbox": "^0.1.8",
         "mlly": "^1.7.4",
@@ -4449,12 +4521,14 @@
     "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=="
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "dev": true
     },
     "node_modules/namespace-emitter": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/namespace-emitter/-/namespace-emitter-2.0.1.tgz",
-      "integrity": "sha512-N/sMKHniSDJBjfrkbS/tpkPj4RAbvW3mr8UAzvlMHyun93XEm83IAvhWtJVHo+RHn/oO8Job5YN4b+wRjSVp5g=="
+      "integrity": "sha512-N/sMKHniSDJBjfrkbS/tpkPj4RAbvW3mr8UAzvlMHyun93XEm83IAvhWtJVHo+RHn/oO8Job5YN4b+wRjSVp5g==",
+      "dev": true
     },
     "node_modules/nanoid": {
       "version": "3.3.12",
@@ -4477,6 +4551,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/nanostores/-/nanostores-1.3.0.tgz",
       "integrity": "sha512-XPUa/jz+P1oJvN9VBxw4L9MtdFfaH3DAryqPssqhb2kXjmb9npz0dly6rCsgFWOPr4Yg9mTfM3MDZgZZ+7A3lA==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4644,7 +4719,8 @@
     "node_modules/overlayscrollbars": {
       "version": "2.16.0",
       "resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-2.16.0.tgz",
-      "integrity": "sha512-N03oje/q7j93D0aLZtoCdsDSYLmhheSsv8H7oSLE7HhdV9P/bmCURtLV/KbPye7P/bpfyt/obSfDpGUYoJ0OWg=="
+      "integrity": "sha512-N03oje/q7j93D0aLZtoCdsDSYLmhheSsv8H7oSLE7HhdV9P/bmCURtLV/KbPye7P/bpfyt/obSfDpGUYoJ0OWg==",
+      "dev": true
     },
     "node_modules/p-limit": {
       "version": "3.1.0",
@@ -4680,6 +4756,7 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-6.2.1.tgz",
       "integrity": "sha512-hEt02O4hUct5wtwg4H4KcWgDdm+l1bOaEy/hWzd8xtXB9BqxTWBBhb+2ImAtH4Cv4rPjV76xN3Zumqk3k3AhhQ==",
+      "dev": true,
       "dependencies": {
         "@types/retry": "0.12.2",
         "is-network-error": "^1.0.0",
@@ -4776,12 +4853,14 @@
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
-      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true
     },
     "node_modules/perfect-debounce": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
-      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "dev": true
     },
     "node_modules/picocolors": {
       "version": "1.1.1",
@@ -4816,6 +4895,7 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
       "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
+      "dev": true,
       "dependencies": {
         "@vue/devtools-api": "^7.7.7"
       },
@@ -4836,6 +4916,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.1.tgz",
       "integrity": "sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==",
+      "dev": true,
       "dependencies": {
         "confbox": "^0.2.4",
         "exsolve": "^1.0.8",
@@ -4892,6 +4973,7 @@
       "version": "10.29.1",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.29.1.tgz",
       "integrity": "sha512-gQCLc/vWroE8lIpleXtdJhTFDogTdZG9AjMUpVkDf2iTCNwYNWA+u16dL41TqUDJO4gm2IgrcMv3uTpjd4Pwmg==",
+      "dev": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
@@ -4937,6 +5019,7 @@
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
       "integrity": "sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==",
+      "dev": true,
       "engines": {
         "node": "^14.13.1 || >=16.0.0"
       },
@@ -4948,6 +5031,7 @@
       "version": "4.5.5",
       "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.5.5.tgz",
       "integrity": "sha512-Kv5REIewCdP806QaoU+4nBXfmpzOGFKkZ9qH4KsL6MjiAQVc4PUzypt8erl4r3Vzh3nr3aWZIxkxYRRsLGiX2A==",
+      "dev": true,
       "dependencies": {
         "@primeuix/styled": "^0.7.4",
         "@primeuix/styles": "^2.0.3",
@@ -4978,6 +5062,7 @@
       "version": "0.2.11",
       "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
       "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -5026,6 +5111,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
       "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
+      "dev": true,
       "engines": {
         "node": ">= 20.19.0"
       },
@@ -5037,7 +5123,8 @@
     "node_modules/remove-accents": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
-      "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
+      "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==",
+      "dev": true
     },
     "node_modules/require-directory": {
       "version": "2.1.1",
@@ -5061,6 +5148,7 @@
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
       "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "dev": true,
       "engines": {
         "node": ">= 4"
       }
@@ -5078,7 +5166,8 @@
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
-      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA=="
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "dev": true
     },
     "node_modules/rolldown": {
       "version": "1.0.0",
@@ -5166,7 +5255,8 @@
     "node_modules/scule": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
-      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g=="
+      "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
+      "dev": true
     },
     "node_modules/semver": {
       "version": "7.8.0",
@@ -5183,7 +5273,8 @@
     "node_modules/shallow-equal": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-3.1.0.tgz",
-      "integrity": "sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg=="
+      "integrity": "sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg==",
+      "dev": true
     },
     "node_modules/shebang-command": {
       "version": "2.0.0",
@@ -5248,6 +5339,7 @@
       "version": "14.0.1",
       "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
       "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5369,6 +5461,7 @@
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz",
       "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
+      "dev": true,
       "dependencies": {
         "copy-anything": "^4"
       },
@@ -5466,6 +5559,7 @@
       "version": "0.2.16",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
       "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "dev": true,
       "dependencies": {
         "fdir": "^6.5.0",
         "picomatch": "^4.0.4"
@@ -5481,6 +5575,7 @@
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
       "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
       "engines": {
         "node": ">=12.0.0"
       },
@@ -5497,6 +5592,7 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -5645,7 +5741,8 @@
     "node_modules/ufo": {
       "version": "1.6.4",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz",
-      "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA=="
+      "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==",
+      "dev": true
     },
     "node_modules/undici": {
       "version": "7.25.0",
@@ -5666,6 +5763,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-3.0.0.tgz",
       "integrity": "sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg==",
+      "dev": true,
       "dependencies": {
         "@jridgewell/remapping": "^2.3.5",
         "picomatch": "^4.0.3",
@@ -5679,6 +5777,7 @@
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.1.tgz",
       "integrity": "sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==",
+      "dev": true,
       "dependencies": {
         "pathe": "^2.0.3",
         "picomatch": "^4.0.3"
@@ -5694,6 +5793,7 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -5705,6 +5805,7 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -5761,6 +5862,7 @@
       "version": "19.1.3",
       "resolved": "https://registry.npmjs.org/vanilla-lazyload/-/vanilla-lazyload-19.1.3.tgz",
       "integrity": "sha512-bBMERPu2AFJc35krS+8BOhq++c6dRfL6q368lJPnkS5U92fRQagTR3FsNta69/GukfZzDwDEjD5M3U7VuSiCDw==",
+      "dev": true,
       "funding": {
         "type": "individual",
         "url": "https://ko-fi.com/verlok"
@@ -5986,6 +6088,7 @@
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/vue-advanced-cropper/-/vue-advanced-cropper-2.8.9.tgz",
       "integrity": "sha512-1jc5gO674kVGpJKekoaol6ZlwaF5VYDLSBwBOUpViW0IOrrRsyLw6XNszjEqgbavvqinlKNS6Kqlom3B5M72Tw==",
+      "dev": true,
       "dependencies": {
         "classnames": "^2.2.6",
         "debounce": "^1.2.0",
@@ -6055,6 +6158,7 @@
       "version": "11.4.2",
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.4.2.tgz",
       "integrity": "sha512-sADDeKXqAGsPX6tK3t3y2ZiMpbVWN12tG+MhTiJ06rVoh58eGtM4wFyw3uWGbVkXByVp9Ne/AP+nSSzI+J9OAQ==",
+      "dev": true,
       "dependencies": {
         "@intlify/core-base": "11.4.2",
         "@intlify/devtools-types": "11.4.2",
@@ -6074,7 +6178,8 @@
     "node_modules/vue-i18n/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=="
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "dev": true
     },
     "node_modules/vue-matomo": {
       "version": "4.2.0",
@@ -6089,6 +6194,7 @@
       "version": "5.0.6",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.0.6.tgz",
       "integrity": "sha512-9+kmUTGbKMyW9Asoy98IXXYIzrTMT7JDAdpDDeEkorHvybpUvBI2wsrSM5jFOXrFydpzRFJ9vAh+80DN2PGu9w==",
+      "dev": true,
       "dependencies": {
         "@babel/generator": "^7.28.6",
         "@vue-macros/common": "^3.1.1",
@@ -6133,6 +6239,7 @@
       "version": "8.1.2",
       "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-8.1.2.tgz",
       "integrity": "sha512-vA0O112YqyDuNA1s7Yb2gCgToQ/OxOWiFDO5ThLCcDy0ldHnSd1dUTaSYhOldbqoNgumE4dxtGAoAaSUKUD1Zg==",
+      "dev": true,
       "dependencies": {
         "@vue/devtools-kit": "^8.1.2"
       }
@@ -6141,6 +6248,7 @@
       "version": "8.1.2",
       "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.1.2.tgz",
       "integrity": "sha512-f75/upc+GCyjXErpgPGz4582ujS0L/adAltGy+tqXMGUJpgAcfGr6CxnnhpZY8BHuMYt6KpbF8uaFrrQG66rGQ==",
+      "dev": true,
       "dependencies": {
         "@vue/devtools-shared": "^8.1.2",
         "birpc": "^2.6.1",
@@ -6151,17 +6259,20 @@
     "node_modules/vue-router/node_modules/@vue/devtools-shared": {
       "version": "8.1.2",
       "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.1.2.tgz",
-      "integrity": "sha512-X9RyVFYAdkBe4IUf5v48TxBF/6QPmF8CmWrDAjXzfUHrgQ/HGfTC1A6TqgXqZ03ye66l3AD51BAGD69IvKM9sw=="
+      "integrity": "sha512-X9RyVFYAdkBe4IUf5v48TxBF/6QPmF8CmWrDAjXzfUHrgQ/HGfTC1A6TqgXqZ03ye66l3AD51BAGD69IvKM9sw==",
+      "dev": true
     },
     "node_modules/vue-router/node_modules/perfect-debounce": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-2.1.0.tgz",
-      "integrity": "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g=="
+      "integrity": "sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==",
+      "dev": true
     },
     "node_modules/vue-router/node_modules/picomatch": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -6173,6 +6284,7 @@
       "version": "2.0.9",
       "resolved": "https://registry.npmjs.org/vue-sonner/-/vue-sonner-2.0.9.tgz",
       "integrity": "sha512-i6BokNlNDL93fpzNxN/LZSn6D6MzlO+i3qXt6iVZne3x1k7R46d5HlFB4P8tYydhgqOrRbIZEsnRd3kG7qGXyw==",
+      "dev": true,
       "peerDependencies": {
         "@nuxt/kit": "^4.0.3",
         "@nuxt/schema": "^4.0.3",
@@ -6226,6 +6338,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vuefinder/-/vuefinder-4.1.2.tgz",
       "integrity": "sha512-qoYdIRKQIrr+MgQlhNDzxVYOpWhNlncFDsS9ol0XL/kqnALr3rF7+W2KbS0GRjzzqyAuNxAJATcN3fRbj+/lsA==",
+      "dev": true,
       "dependencies": {
         "@floating-ui/dom": "^1.7.4",
         "@nanostores/i18n": "^1.2.2",
@@ -6293,7 +6406,8 @@
     "node_modules/webpack-virtual-modules": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
-      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "dev": true
     },
     "node_modules/whatwg-mimetype": {
       "version": "5.0.0",
@@ -6352,7 +6466,8 @@
     "node_modules/wildcard": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-1.1.2.tgz",
-      "integrity": "sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng=="
+      "integrity": "sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng==",
+      "dev": true
     },
     "node_modules/word-wrap": {
       "version": "1.2.5",
@@ -6479,6 +6594,7 @@
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
       "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
+      "dev": true,
       "bin": {
         "yaml": "bin.mjs"
       },
diff --git a/celements-admin-frontend/package.json b/celements-admin-frontend/package.json
index a502f8e3c..f5a171dfd 100644
--- a/celements-admin-frontend/package.json
+++ b/celements-admin-frontend/package.json
@@ -3,12 +3,33 @@
   "version": "0.1.0-SNAPSHOT",
   "private": false,
   "type": "module",
+  "files": [
+    "dist"
+  ],
   "exports": {
-    "./src/*": "./src/*"
+    ".": {
+      "types": "./dist/types/public/runtime.d.ts",
+      "import": "./dist/package/runtime.js"
+    },
+    "./runtime": {
+      "types": "./dist/types/public/runtime.d.ts",
+      "import": "./dist/package/runtime.js"
+    },
+    "./page-attachments": {
+      "types": "./dist/types/public/page-attachments.d.ts",
+      "import": "./dist/package/page-attachments.js"
+    },
+    "./page-attachments-island": {
+      "types": "./dist/types/public/page-attachments-island.d.ts",
+      "import": "./dist/package/page-attachments-island.js"
+    },
+    "./styles.css": "./dist/package/styles.css"
   },
   "scripts": {
     "dev": "concurrently \"vite\" \"npm:type-check-watch\" \"npm:test-watch\"",
-    "build": "npm run type-check && npm run test && vite build",
+    "build": "npm run type-check && npm run test && vite build && npm run build:package && npm run build:types",
+    "build:package": "vite build --config vite.library.config.ts",
+    "build:types": "vue-tsc -p tsconfig.app.json --declaration --emitDeclarationOnly --noEmit false --outDir dist/types --composite false",
     "preview": "vite preview",
     "test": "vitest run",
     "test-watch": "vitest",
@@ -30,19 +51,21 @@
     "findandreplacedomtext": "^0.4.6",
     "lodash": "^4.17.23",
     "luxon": "^3.7.2",
-    "pinia": "^3.0.4",
-    "primevue": "^4.5.4",
     "tailwind-merge": "^3.5.0",
     "tailwindcss-primeui": "^0.6.1",
-    "vue": "^3.5.30",
     "vue-dompurify-html": "^5.3.0",
-    "vue-i18n": "^11.3.0",
     "vue-matomo": "^4.2.0",
-    "vue-router": "^5.0.4",
     "vue3-spinners": "^1.3.3",
-    "vuefinder": "^4.1.1",
     "zod": "^4.3.6"
   },
+  "peerDependencies": {
+    "pinia": "^3.0.4",
+    "primevue": "^4.5.4",
+    "vue": "^3.5.30",
+    "vue-i18n": "^11.3.0",
+    "vue-router": "^5.0.4",
+    "vuefinder": "^4.1.1"
+  },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.2.2",
     "@tsconfig/node20": "^20.1.9",
@@ -62,12 +85,18 @@
     "eslint-plugin-vue": "^10.8.0",
     "jsdom": "^29.0.1",
     "npm-run-all2": "^8.0.4",
+    "pinia": "^3.0.4",
     "postcss": "^8.5.8",
     "prettier": "^3.8.1",
+    "primevue": "^4.5.4",
     "tailwindcss": "^4.2.2",
     "typescript": "~5.9.3",
     "vite": "^8.0.1",
     "vitest": "^4.1.0",
+    "vue": "^3.5.30",
+    "vue-i18n": "^11.3.0",
+    "vue-router": "^5.0.4",
+    "vuefinder": "^4.1.1",
     "vue-tsc": "^3.2.6"
   },
   "browserslist": [
diff --git a/celements-admin-frontend/postcss.config.js b/celements-admin-frontend/postcss.config.js
index 6f51004b1..82a703c34 100644
--- a/celements-admin-frontend/postcss.config.js
+++ b/celements-admin-frontend/postcss.config.js
@@ -39,6 +39,45 @@ function conditionalTailwind() {
 }
 conditionalTailwind.postcss = true;
 
+const adminScope = ':where(.cel-admin-surface, .cel-admin-teleport)';
+const globalSelectors = new Set([
+  '*',
+  ':after',
+  ':before',
+  '::after',
+  '::backdrop',
+  '::before',
+  '::file-selector-button',
+]);
+
+function scopeAdminStyles() {
+  return {
+    postcssPlugin: 'scope-celements-admin-styles',
+    OnceExit(root, helpers) {
+      const from = helpers?.result?.opts?.from || root?.source?.input?.file || '';
+      const isApplicationStyles = from.includes('/src/assets/main.css');
+      if (!isApplicationStyles && !from.includes('/node_modules/vuefinder/')) return;
+      root.walkRules((rule) => {
+        if (rule.parent?.type === 'atrule' && rule.parent.name.includes('keyframes')) return;
+        rule.selectors = rule.selectors.map((selector) => {
+          const trimmed = selector.trim();
+          if (trimmed === ':root' || trimmed === ':host') return adminScope;
+          if (globalSelectors.has(trimmed)) return `${adminScope} ${trimmed}`;
+          if (
+            isApplicationStyles &&
+            !trimmed.includes('.cel-admin-surface') &&
+            !trimmed.includes('.cel-admin-teleport')
+          ) {
+            return `${adminScope} ${trimmed}, ${adminScope}${trimmed}`;
+          }
+          return selector;
+        });
+      });
+    },
+  };
+}
+scopeAdminStyles.postcss = true;
+
 export default {
-  plugins: [conditionalTailwind(), autoprefixer()],
+  plugins: [conditionalTailwind(), scopeAdminStyles(), autoprefixer()],
 };
diff --git a/celements-admin-frontend/src/App.vue b/celements-admin-frontend/src/App.vue
index 34597bf14..485414a71 100644
--- a/celements-admin-frontend/src/App.vue
+++ b/celements-admin-frontend/src/App.vue
@@ -1,6 +1,8 @@
 <template>
-  <ConfirmDialog />
-  <RouterView />
+  <div class="cel-admin-surface h-full w-full">
+    <ConfirmDialog />
+    <RouterView />
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/celements-admin-frontend/src/assets/main.css b/celements-admin-frontend/src/assets/main.css
index 639fe5f59..bbb49676d 100644
--- a/celements-admin-frontend/src/assets/main.css
+++ b/celements-admin-frontend/src/assets/main.css
@@ -1,22 +1,26 @@
-@import 'tailwindcss';
+@layer theme, utilities;
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
+@config '../../tailwind.config.js';
 
 @layer base {
-  h1 {
+  .cel-admin-surface h1 {
     @apply text-3xl sm:text-4xl mb-6 mt-4;
   }
-  h2 {
+  .cel-admin-surface h2 {
     @apply text-2xl mb-2;
   }
-  h3 {
+  .cel-admin-surface h3 {
     @apply text-xl mb-2;
   }
-  h4 {
+  .cel-admin-surface h4 {
     @apply mb-2;
   }
 }
 
 /* Primary and Surface Palettes */
-:root {
+.cel-admin-surface,
+.cel-admin-teleport {
   --p-surface-0: #ffffff;
   --p-surface-50: #f1f1f1; /*grau-20*/
   --p-surface-100: #ebebeb; /*grau-40*/
@@ -33,7 +37,8 @@
 }
 
 /* Light Mode */
-:root {
+.cel-admin-surface,
+.cel-admin-teleport {
   --p-primary-color: var(--p-primary-900);
   --p-primary-contrast-color: var(--p-surface-0);
   --p-primary-hover-color: var(--p-primary-600);
@@ -59,7 +64,8 @@
 *  should match;
 * :root.app-dark
 */
-:root.p-dark {
+.cel-admin-surface.p-dark,
+.cel-admin-teleport.p-dark {
   --p-primary-color: var(--p-primary-400);
   --p-primary-contrast-color: var(--p-surface-900);
   --p-primary-hover-color: var(--p-primary-300);
@@ -77,7 +83,8 @@
   --p-text-hover-muted-color: var(--p-surface-300);
 }
 
-:root {
+.cel-admin-surface,
+.cel-admin-teleport {
   /* Primary Palettes */
   --schwarz-100: 0 0 0;
   --schwarz-80: 51 51 51;
diff --git a/celements-admin-frontend/src/bootstrap.ts b/celements-admin-frontend/src/bootstrap.ts
index ac6fd5f3c..a8c09e82b 100644
--- a/celements-admin-frontend/src/bootstrap.ts
+++ b/celements-admin-frontend/src/bootstrap.ts
@@ -1,147 +1,15 @@
 import '@/assets/main.css';
-
-import App from '@/App.vue';
-import { appConfig } from '@/conf/app';
-import { createI18n } from '@/plugins/i18n';
-import Store from '@/plugins/plugin.pinia';
-import Router from '@/plugins/plugin.router';
-import { useLogger } from '@/utils/logger';
-import { createApp, type App as VueApp } from 'vue';
-import VueFinder from 'vuefinder';
 import 'vuefinder/dist/style.css';
-import PrimeVue from 'primevue/config';
-import Button, { type ButtonProps } from 'primevue/button';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faPlus, faTrashCan, faPencil } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import ConfirmationService from 'primevue/confirmationservice';
-
-export type CelementsAdminMountOptions = {
-  /**
-   * Locale to use for i18n.
-   * If omitted, falls back to VITE_DEFAULT_LOCALE.
-   */
-  locale?: string;
-
-  /**
-   * Whether local development features should be enabled.
-   * If omitted, enabled only in Vite development mode.
-   */
-  localDev?: boolean;
-};
-
-export function createCelementsAdminApp(options: CelementsAdminMountOptions = {}): {
-  app: VueApp;
-  mount: (el: Element | string) => unknown;
-} {
-  const logger = useLogger('Celements-Admin');
-
-  const app = createApp(App);
-
-  app.config.errorHandler = (err, instance, info) => {
-    logger.error(err as string, instance, info);
-  };
-
-  app.use(PrimeVue, {
-    unstyled: true,
-    pt: {
-      dialog: {
-        root: {
-          class:
-            'bg-[var(--p-surface-0)] rounded-lg shadow-lg border border-[var(--p-content-border-color)] overflow-hidden flex flex-col w-[25rem] max-w-[90vw]',
-        },
-        header: {
-          class:
-            'flex items-center justify-between px-4 py-3 border-b border-[var(--p-content-border-color)]',
-        },
-        title: { class: 'text-lg font-semibold' },
-        content: { class: 'p-4' },
-        footer: {
-          class:
-            'flex justify-end gap-2 px-4 py-3 border-t border-[var(--p-content-border-color)] bg-[var(--p-surface-50)]',
-        },
-        mask: { class: 'bg-black/50 fixed inset-0 flex items-center justify-center z-50' },
-      },
-      confirmdialog: {
-        root: {
-          class:
-            'bg-[var(--p-surface-0)] rounded-lg shadow-lg border border-[var(--p-content-border-color)] overflow-hidden w-[25rem] max-w-[90vw]',
-        },
-        header: {
-          class:
-            'flex items-center gap-3 px-4 py-3 border-b border-[var(--p-content-border-color)]',
-        },
-        title: { class: 'text-lg font-semibold' },
-        content: { class: 'p-4 flex items-center gap-3' },
-        icon: { class: 'text-2xl text-[var(--p-text-muted-color)]' },
-        message: { class: 'text-[var(--p-text-color)]' },
-        footer: {
-          class:
-            'flex justify-end gap-2 px-4 py-3 border-t border-[var(--p-content-border-color)] bg-[var(--p-surface-50)]',
-        },
-        mask: { class: 'bg-black/50 fixed inset-0 flex items-center justify-center z-50' },
-      },
-      inputtext: {
-        root: {
-          class:
-            'px-3 py-2 border border-[var(--p-content-border-color)] rounded-md w-full focus:outline-hidden focus:ring-2 focus:ring-[var(--p-primary-color)] text-[var(--p-text-color)] bg-[var(--p-surface-0)]',
-        },
-      },
-      button: {
-        root: ({ props }: { props: ButtonProps }) => ({
-          class: [
-            'px-3 py-1.5 rounded-md font-semibold transition-colors focus:ring-2 focus:ring-offset-1 focus:outline-hidden',
-            props.severity === 'secondary'
-              ? 'text-[var(--p-text-color)] hover:bg-[var(--p-content-hover-background)]'
-              : 'bg-[var(--p-primary-color)] text-white hover:opacity-80 ring-[var(--p-primary-color)]',
-            props.disabled ? 'opacity-50 cursor-not-allowed' : '',
-          ],
-        }),
-      },
-    },
-  });
-  app.use(ConfirmationService);
-  app.component('Button', Button);
-  library.add(faPlus, faTrashCan, faPencil);
-  app.component('FontAwesomeIcon', FontAwesomeIcon);
 
-  app.use(Store);
-
-  const locale = options.locale ?? appConfig.defaultLocale;
-
-  app.use(Router);
-  app.use(createI18n({ locale }));
-
-  app.use(VueFinder, {
-    i18n: {
-      en: async () => await import('vuefinder/dist/locales/en.js'),
-      de: async () => await import('vuefinder/dist/locales/de.js'),
-      fr: async () => await import('vuefinder/dist/locales/fr.js'),
-      it: async () => await import('vuefinder/dist/locales/it.js'),
-    },
-  });
-
-  const localDev = options.localDev ?? import.meta.env.DEV;
-
-  app.provide('localDev', localDev);
-
-  if (localDev) {
-    logger.info('local development enabled');
-  }
+import App from '@/App.vue';
+import { createAdminRouter } from '@/plugins/plugin.router';
+import {
+  createCelementsApplication,
+  type CelementsApplicationOptions,
+} from '@/runtime/application';
 
-  return {
-    app,
-    mount: (el: Element | string) => {
-      const target = typeof el === 'string' ? document.querySelector(el) : el;
-      if (!target) {
-        logger.warn(`mount target not found: ${JSON.stringify(el)}`);
-        return;
-      }
+export type CelementsAdminMountOptions = CelementsApplicationOptions;
 
-      logger.debug('mounting app...');
-      const res = app.mount(target);
-      logger.info('main ready');
-      return res;
-    },
-  };
+export function createCelementsAdminApp(options: CelementsAdminMountOptions = {}) {
+  return createCelementsApplication(App, {}, { ...options, router: createAdminRouter() });
 }
diff --git a/celements-admin-frontend/src/conf/routes/index.ts b/celements-admin-frontend/src/conf/routes/index.ts
index 1faaa3d73..5983df9df 100644
--- a/celements-admin-frontend/src/conf/routes/index.ts
+++ b/celements-admin-frontend/src/conf/routes/index.ts
@@ -1,5 +1,5 @@
 import MediaLib from '@/views/MediaLib.vue';
-import PageAttachments from '@/views/PageAttachments.vue';
+import PageAttachmentsRoute from '@/spa/PageAttachmentsRoute.vue';
 import type { RouteRecordRaw } from 'vue-router';
 
 const routes: RouteRecordRaw[] = [
@@ -15,7 +15,11 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/PageAttachments/:spaceName/:docName',
     name: 'PageAttachments',
-    component: PageAttachments,
+    component: PageAttachmentsRoute,
+    props: (route) => ({
+      spaceName: String(route.params.spaceName),
+      docName: String(route.params.docName),
+    }),
   },
 ];
 
diff --git a/celements-admin-frontend/src/embedded.ts b/celements-admin-frontend/src/embedded.ts
index 67b012d47..b42ee8c0c 100644
--- a/celements-admin-frontend/src/embedded.ts
+++ b/celements-admin-frontend/src/embedded.ts
@@ -1,4 +1,8 @@
 import { createCelementsAdminApp } from '@/bootstrap';
+import { registerPageAttachmentsElement } from '@/islands/page-attachments-element';
+import { ensureCelementsAdminStyles } from '@/runtime/styles';
+
+ensureCelementsAdminStyles();
 
 class CelAdminElement extends HTMLElement {
   private vueApp: ReturnType<typeof createCelementsAdminApp> | null = null;
@@ -46,3 +50,5 @@ class CelAdminElement extends HTMLElement {
 if (!customElements.get('cel-admin')) {
   customElements.define('cel-admin', CelAdminElement);
 }
+
+registerPageAttachmentsElement();
diff --git a/celements-admin-frontend/src/features/page-attachments/PageAttachments.vue b/celements-admin-frontend/src/features/page-attachments/PageAttachments.vue
new file mode 100644
index 000000000..5eb320e96
--- /dev/null
+++ b/celements-admin-frontend/src/features/page-attachments/PageAttachments.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="flex h-full w-full overflow-hidden">
+    <div class="flex min-w-0 flex-1 flex-col w-full">
+      <VueFinder
+        :id="finderId"
+        :key="documentKey"
+        class="flex-1"
+        :driver="driver"
+        :locale="locale"
+        :config="{
+          initialPath: `attachments://${spaceName}/${docName}`,
+          persist: false,
+        }"
+        :features="features"
+        @select="handleSelect"
+      >
+        <template #status-bar="{ path, count, selected }">
+          <slot
+            name="attachment-actions"
+            :document="document"
+            :path="path"
+            :count="count"
+            :selected-attachments="selected ?? []"
+          />
+        </template>
+      </VueFinder>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type {
+  PageAttachmentsActionContext,
+  PageAttachmentsDocument,
+  PageAttachmentsProps,
+  PageAttachmentsSelectionDetail,
+} from './types';
+import { useLogger } from '@/utils/logger';
+import { computed, ref } from 'vue';
+import { RemoteDriver, VueFinder, type DirEntry, type FeaturesConfig } from 'vuefinder';
+
+const props = defineProps<PageAttachmentsProps>();
+const emit = defineEmits<{
+  selectionChange: [detail: PageAttachmentsSelectionDetail];
+}>();
+defineSlots<{
+  'attachment-actions'(props: PageAttachmentsActionContext): unknown;
+}>();
+
+const logger = useLogger('VueFinder-Attachments');
+const instanceId = ref(`page_attachments_${crypto.randomUUID()}`);
+const finderId = computed(() => instanceId.value);
+const document = computed<PageAttachmentsDocument>(() => ({
+  spaceName: props.spaceName,
+  docName: props.docName,
+}));
+const documentKey = computed(() => `${props.spaceName}/${props.docName}`);
+const features: FeaturesConfig = {
+  search: true,
+  preview: true,
+  rename: false,
+  upload: true,
+  delete: true,
+  download: true,
+  newfolder: false,
+  newfile: false,
+  move: false,
+  copy: false,
+  archive: false,
+  unarchive: false,
+  edit: false,
+  fullscreen: false,
+  language: false,
+  history: false,
+  theme: false,
+  pinned: false,
+};
+const driver = computed(() => {
+  const remoteDriver = new RemoteDriver({
+    baseURL: `/api/attachments/${encodeURIComponent(props.spaceName)}/${encodeURIComponent(props.docName)}`,
+  });
+  const originalGetDownloadUrl = remoteDriver.getDownloadUrl.bind(remoteDriver);
+  remoteDriver.getDownloadUrl = (file: DirEntry & { url?: string }) =>
+    file?.url ?? originalGetDownloadUrl(file);
+  return remoteDriver;
+});
+
+const handleSelect = (selectedAttachments: DirEntry[]) => {
+  const detail = { document: document.value, selectedAttachments };
+  logger.log('selected files', selectedAttachments);
+  emit('selectionChange', detail);
+};
+
+logger.log('driver setup for page attachments');
+</script>
diff --git a/celements-admin-frontend/src/features/page-attachments/types.ts b/celements-admin-frontend/src/features/page-attachments/types.ts
new file mode 100644
index 000000000..d79753aff
--- /dev/null
+++ b/celements-admin-frontend/src/features/page-attachments/types.ts
@@ -0,0 +1,22 @@
+import type { DirEntry } from 'vuefinder';
+
+export interface PageAttachmentsDocument {
+  spaceName: string;
+  docName: string;
+}
+
+export interface PageAttachmentsProps extends PageAttachmentsDocument {
+  locale?: string;
+}
+
+export interface PageAttachmentsActionContext {
+  document: PageAttachmentsDocument;
+  path: string;
+  count: number;
+  selectedAttachments: readonly DirEntry[];
+}
+
+export interface PageAttachmentsSelectionDetail {
+  document: PageAttachmentsDocument;
+  selectedAttachments: readonly DirEntry[];
+}
diff --git a/celements-admin-frontend/src/islands/PageAttachmentsIslandRoot.vue b/celements-admin-frontend/src/islands/PageAttachmentsIslandRoot.vue
new file mode 100644
index 000000000..7fac14116
--- /dev/null
+++ b/celements-admin-frontend/src/islands/PageAttachmentsIslandRoot.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="cel-admin-surface min-h-[20rem] h-full w-full">
+    <PageAttachments
+      :space-name="spaceName"
+      :doc-name="docName"
+      :locale="locale"
+      @selection-change="$emit('selectionChange', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import PageAttachments from '@/features/page-attachments/PageAttachments.vue';
+import type {
+  PageAttachmentsProps,
+  PageAttachmentsSelectionDetail,
+} from '@/features/page-attachments/types';
+
+defineProps<PageAttachmentsProps>();
+defineEmits<{
+  selectionChange: [detail: PageAttachmentsSelectionDetail];
+}>();
+</script>
diff --git a/celements-admin-frontend/src/islands/page-attachments-element.ts b/celements-admin-frontend/src/islands/page-attachments-element.ts
new file mode 100644
index 000000000..4ffd9e773
--- /dev/null
+++ b/celements-admin-frontend/src/islands/page-attachments-element.ts
@@ -0,0 +1,83 @@
+import PageAttachmentsIslandRoot from '@/islands/PageAttachmentsIslandRoot.vue';
+import { createCelementsApplication } from '@/runtime/application';
+import type { PageAttachmentsSelectionDetail } from '@/features/page-attachments/types';
+
+export const PAGE_ATTACHMENTS_ELEMENT_NAME = 'cel-page-attachments';
+
+export class CelPageAttachmentsElement extends HTMLElement {
+  static observedAttributes = ['space-name', 'doc-name', 'locale', 'local-dev'];
+  private application: ReturnType<typeof createCelementsApplication> | null = null;
+
+  get spaceName() {
+    return this.getAttribute('space-name') ?? '';
+  }
+  set spaceName(value: string) {
+    this.setAttribute('space-name', value);
+  }
+  get docName() {
+    return this.getAttribute('doc-name') ?? '';
+  }
+  set docName(value: string) {
+    this.setAttribute('doc-name', value);
+  }
+  get locale() {
+    return this.getAttribute('locale') ?? undefined;
+  }
+  set locale(value: string | undefined) {
+    if (value == null) this.removeAttribute('locale');
+    else this.setAttribute('locale', value);
+  }
+  get localDev() {
+    const value = this.getAttribute('local-dev');
+    return value == null ? undefined : value.toLowerCase() !== 'false';
+  }
+  set localDev(value: boolean | undefined) {
+    if (value == null) this.removeAttribute('local-dev');
+    else this.setAttribute('local-dev', String(value));
+  }
+  connectedCallback() {
+    if (this.application) return;
+    if (!this.spaceName || !this.docName) return;
+    this.application = createCelementsApplication(
+      PageAttachmentsIslandRoot,
+      {
+        spaceName: this.spaceName,
+        docName: this.docName,
+        locale: this.locale,
+        onSelectionChange: (detail: PageAttachmentsSelectionDetail) => {
+          this.dispatchEvent(
+            new CustomEvent<PageAttachmentsSelectionDetail>('attachment-selection-change', {
+              detail,
+              bubbles: true,
+              composed: true,
+            })
+          );
+        },
+      },
+      { locale: this.locale, localDev: this.localDev }
+    );
+    this.application.mount(this);
+  }
+  disconnectedCallback() {
+    this.unmount();
+  }
+  attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null) {
+    if (!this.isConnected || oldValue === newValue) return;
+    this.unmount();
+    this.connectedCallback();
+  }
+  private unmount() {
+    if (!this.application) return;
+    this.application.app.unmount();
+    this.application = null;
+    this.replaceChildren();
+  }
+}
+
+export const registerPageAttachmentsElement = (
+  registry: CustomElementRegistry = customElements
+) => {
+  if (!registry.get(PAGE_ATTACHMENTS_ELEMENT_NAME)) {
+    registry.define(PAGE_ATTACHMENTS_ELEMENT_NAME, CelPageAttachmentsElement);
+  }
+};
diff --git a/celements-admin-frontend/src/medialib/api/tagApi.ts b/celements-admin-frontend/src/medialib/api/tagApi.ts
index 37a50cb6c..2083db2af 100644
--- a/celements-admin-frontend/src/medialib/api/tagApi.ts
+++ b/celements-admin-frontend/src/medialib/api/tagApi.ts
@@ -11,8 +11,7 @@ export async function apiFetchTags(): Promise<TagDto[]> {
 
 export async function apiFetchFilesForTag(tagId: string): Promise<string[]> {
   const res = await fetch(`${API_BASE}/tags/files?tagId=${encodeURIComponent(tagId)}`);
-  if (!res.ok)
-    throw new Error(`GET ${API_BASE}/tags/files?tagId=${tagId} failed: ${res.status}`);
+  if (!res.ok) throw new Error(`GET ${API_BASE}/tags/files?tagId=${tagId} failed: ${res.status}`);
   return res.json() as Promise<string[]>;
 }
 
diff --git a/celements-admin-frontend/src/medialib/components/TagSidebar.vue b/celements-admin-frontend/src/medialib/components/TagSidebar.vue
index de368fbaf..bbf750202 100644
--- a/celements-admin-frontend/src/medialib/components/TagSidebar.vue
+++ b/celements-admin-frontend/src/medialib/components/TagSidebar.vue
@@ -1,10 +1,10 @@
 <template>
-  <aside
-    class="flex h-full w-56 shrink-0 flex-col gap-1 bg-[var(--p-surface-0)] px-3 py-4"
-  >
+  <aside class="flex h-full w-56 shrink-0 flex-col gap-1 bg-[var(--p-surface-0)] px-3 py-4">
     <!-- Header -->
     <div class="mb-2 flex items-center justify-between">
-      <span class="text-xs font-semibold uppercase tracking-widest text-[var(--p-text-muted-color)]">
+      <span
+        class="text-xs font-semibold uppercase tracking-widest text-[var(--p-text-muted-color)]"
+      >
         Labels
       </span>
       <div class="flex gap-1">
@@ -55,16 +55,26 @@
               {{ fileCountForTag(tag) }}
             </span>
           </button>
-          
+
           <!-- Management Buttons -->
           <div
             v-if="tagStore.canManageTags"
             class="hidden group-hover:flex items-center absolute right-1 gap-1 rounded bg-[var(--p-surface-0)] opacity-95 px-1 py-0.5 shadow-sm border border-[var(--p-content-border-color)]"
           >
-            <button class="p-1 rounded text-[var(--p-text-muted-color)] hover:text-[var(--p-primary-color)] transition" title="Rename" aria-label="Rename" @click.stop="openRenameDialog(tag)">
+            <button
+              class="p-1 rounded text-[var(--p-text-muted-color)] hover:text-[var(--p-primary-color)] transition"
+              title="Rename"
+              aria-label="Rename"
+              @click.stop="openRenameDialog(tag)"
+            >
               <FontAwesomeIcon :icon="faPencil" class="text-xs" />
             </button>
-            <button class="p-1 rounded text-[var(--p-text-muted-color)] hover:text-red-500 transition" title="Delete" aria-label="Delete" @click.stop="confirmDelete(tag)">
+            <button
+              class="p-1 rounded text-[var(--p-text-muted-color)] hover:text-red-500 transition"
+              title="Delete"
+              aria-label="Delete"
+              @click.stop="confirmDelete(tag)"
+            >
               <FontAwesomeIcon :icon="faTrashCan" class="text-xs" />
             </button>
           </div>
@@ -77,7 +87,9 @@
       v-if="tagStore.isFilterActive"
       class="mt-3 rounded-md border border-[var(--p-content-border-color)] bg-[var(--p-surface-50)] p-2"
     >
-      <p class="mb-1 text-[10px] font-semibold uppercase tracking-widest text-[var(--p-text-muted-color)]">
+      <p
+        class="mb-1 text-[10px] font-semibold uppercase tracking-widest text-[var(--p-text-muted-color)]"
+      >
         Active filter
       </p>
       <div class="flex flex-wrap gap-1">
@@ -102,10 +114,22 @@
     </div>
 
     <!-- Modals -->
-    <Dialog v-model:visible="isAddModalOpen" header="Add Tag" :modal="true" :style="{ width: '25rem' }">
+    <Dialog
+      v-model:visible="isAddModalOpen"
+      header="Add Tag"
+      :modal="true"
+      :style="{ width: '25rem' }"
+    >
       <div class="flex flex-col gap-3 py-2">
         <label for="newTagName" class="font-semibold text-sm">Label</label>
-        <InputText id="newTagName" v-model="modalLabel" class="w-full" autocomplete="off" autofocus @keyup.enter="confirmAdd" />
+        <InputText
+          id="newTagName"
+          v-model="modalLabel"
+          class="w-full"
+          autocomplete="off"
+          autofocus
+          @keyup.enter="confirmAdd"
+        />
       </div>
       <template #footer>
         <Button label="Cancel" text severity="secondary" @click="isAddModalOpen = false" />
@@ -113,17 +137,28 @@
       </template>
     </Dialog>
 
-    <Dialog v-model:visible="isRenameModalOpen" header="Rename Tag" :modal="true" :style="{ width: '25rem' }">
+    <Dialog
+      v-model:visible="isRenameModalOpen"
+      header="Rename Tag"
+      :modal="true"
+      :style="{ width: '25rem' }"
+    >
       <div class="flex flex-col gap-3 py-2">
         <label for="renameTagName" class="font-semibold text-sm">Label</label>
-        <InputText id="renameTagName" v-model="modalLabel" class="w-full" autocomplete="off" autofocus @keyup.enter="confirmRename" />
+        <InputText
+          id="renameTagName"
+          v-model="modalLabel"
+          class="w-full"
+          autocomplete="off"
+          autofocus
+          @keyup.enter="confirmRename"
+        />
       </div>
       <template #footer>
         <Button label="Cancel" text severity="secondary" @click="isRenameModalOpen = false" />
         <Button label="Rename" :disabled="!modalLabel.trim()" autofocus @click="confirmRename" />
       </template>
     </Dialog>
-
   </aside>
 </template>
 
@@ -182,8 +217,7 @@ function isActive(tag: Tag): boolean {
 }
 
 function fileCountForTag(tag: Tag): number {
-  return Object.values(tagStore.fileTagMap).filter((tags) =>
-    tags.some((t) => t.id === tag.id),
-  ).length;
+  return Object.values(tagStore.fileTagMap).filter((tags) => tags.some((t) => t.id === tag.id))
+    .length;
 }
 </script>
diff --git a/celements-admin-frontend/src/medialib/components/TagStatusBar.vue b/celements-admin-frontend/src/medialib/components/TagStatusBar.vue
index b9086ce1b..88c7151c8 100644
--- a/celements-admin-frontend/src/medialib/components/TagStatusBar.vue
+++ b/celements-admin-frontend/src/medialib/components/TagStatusBar.vue
@@ -1,15 +1,10 @@
 <template>
   <div class="flex h-full w-full items-center gap-3 px-3 py-1.5 text-sm text-[var(--p-text-color)]">
-
     <!-- ── No file selected: show active filter summary ── -->
     <template v-if="selectedFiles.length === 0">
       <span class="text-[var(--p-text-muted-color)]">
-        <template v-if="tagStore.isFilterActive">
-          Showing files tagged with:
-        </template>
-        <template v-else>
-          No filter active · select file(s) to manage labels
-        </template>
+        <template v-if="tagStore.isFilterActive"> Showing files tagged with: </template>
+        <template v-else> No filter active · select file(s) to manage labels </template>
       </span>
       <div v-if="tagStore.isFilterActive" class="flex flex-wrap gap-1">
         <span
@@ -55,9 +50,7 @@
       </div>
 
       <!-- Multi-file: show merged tags info -->
-      <span v-else class="text-xs text-[var(--p-text-muted-color)]">
-        (mixed selection)
-      </span>
+      <span v-else class="text-xs text-[var(--p-text-muted-color)]"> (mixed selection) </span>
 
       <!-- Add tag dropdown trigger -->
       <div ref="dropdownRef" class="relative ml-auto">
@@ -84,7 +77,9 @@
             >
               <span :class="['h-2 w-2 rounded-full shrink-0', tag.color]" />
               <span class="flex-1 text-left text-[var(--p-text-color)]">{{ tag.label }}</span>
-              <span v-if="isTagOnAll(tag)" class="text-[10px] text-[var(--p-text-muted-color)]">✓</span>
+              <span v-if="isTagOnAll(tag)" class="text-[10px] text-[var(--p-text-muted-color)]"
+                >✓</span
+              >
             </button>
           </div>
         </Transition>
@@ -117,9 +112,12 @@ onClickOutside(dropdownRef, () => {
 });
 
 // Close dropdown when selection changes
-watch(() => props.selectedFiles, () => {
-  dropdownOpen.value = false;
-});
+watch(
+  () => props.selectedFiles,
+  () => {
+    dropdownOpen.value = false;
+  }
+);
 
 /** Tags on the single selected file */
 const currentTags = computed<Tag[]>(() => {
@@ -130,7 +128,7 @@ const currentTags = computed<Tag[]>(() => {
 /** Whether a tag is already assigned to ALL selected files */
 function isTagOnAll(tag: Tag): boolean {
   return props.selectedFiles.every((f) =>
-    tagStore.getTagsForFile(f.path).some((t) => t.id === tag.id),
+    tagStore.getTagsForFile(f.path).some((t) => t.id === tag.id)
   );
 }
 
diff --git a/celements-admin-frontend/src/medialib/stores/tags.ts b/celements-admin-frontend/src/medialib/stores/tags.ts
index 144d9ac7b..55820c456 100644
--- a/celements-admin-frontend/src/medialib/stores/tags.ts
+++ b/celements-admin-frontend/src/medialib/stores/tags.ts
@@ -66,7 +66,7 @@ export const useTagStore = defineStore('tags', () => {
         } catch (err) {
           console.warn(`[TagStore] Could not load files for tag "${tag.id}":`, err);
         }
-      }),
+      })
     );
     return newMap;
   }
@@ -84,10 +84,8 @@ export const useTagStore = defineStore('tags', () => {
     if (activeFilter.value.length === 0) return new Set();
     return new Set(
       Object.entries(fileTagMap.value)
-        .filter(([, tags]) =>
-          activeFilter.value.every((ft) => tags.some((t) => t.id === ft.id)),
-        )
-        .map(([path]) => path),
+        .filter(([, tags]) => activeFilter.value.every((ft) => tags.some((t) => t.id === ft.id)))
+        .map(([path]) => path)
     );
   });
 
@@ -204,7 +202,10 @@ export const useTagStore = defineStore('tags', () => {
     }
   }
 
-  function optimisticallyDeleteTag(tag: Tag): { backupTags: Tag[]; backupMap: Record<string, Tag[]> } {
+  function optimisticallyDeleteTag(tag: Tag): {
+    backupTags: Tag[];
+    backupMap: Record<string, Tag[]>;
+  } {
     const backupTags = [...availableTags.value];
     const backupMap = { ...fileTagMap.value };
     availableTags.value = availableTags.value.filter((t) => t.id !== tag.id);
diff --git a/celements-admin-frontend/src/plugins/plugin.pinia.ts b/celements-admin-frontend/src/plugins/plugin.pinia.ts
index e12b55e68..21f7742bb 100644
--- a/celements-admin-frontend/src/plugins/plugin.pinia.ts
+++ b/celements-admin-frontend/src/plugins/plugin.pinia.ts
@@ -1,2 +1,3 @@
 import { createPinia } from 'pinia';
-export default createPinia();
+
+export const createCelementsPinia = () => createPinia();
diff --git a/celements-admin-frontend/src/plugins/plugin.router.ts b/celements-admin-frontend/src/plugins/plugin.router.ts
index e5ac4506f..f4d476bbe 100644
--- a/celements-admin-frontend/src/plugins/plugin.router.ts
+++ b/celements-admin-frontend/src/plugins/plugin.router.ts
@@ -1,34 +1,24 @@
 import routes from '@/conf/routes';
-import { useLogger } from '@/utils/logger';
 import { createRouter, createWebHistory } from 'vue-router';
 
-const router = createRouter({
-  history: createWebHistory('/app/cel/admin/'),
-  routes,
-  scrollBehavior(to) {
-    const logger = useLogger('router');
-    if (to.meta.anchor) {
-      logger.debug('scrollto: ', to.meta.anchor);
-      const anchor = to.meta.anchor.toString();
-      // Without the Promise, scrolling does not work properly.
+export const createAdminRouter = () => {
+  const router = createRouter({
+    history: createWebHistory('/app/cel/admin/'),
+    routes,
+    scrollBehavior(to) {
+      const position = to.meta.anchor
+        ? { el: to.meta.anchor.toString(), top: 127, behavior: 'smooth' as const }
+        : { top: 0, behavior: 'smooth' as const };
       return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve({ el: anchor, top: 127, behavior: 'smooth' });
-        }, 50);
+        setTimeout(() => resolve(position), 50);
       });
-    } else {
-      // Without the Promise, scrolling does not work properly.
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve({ top: 0, behavior: 'smooth' });
-        }, 50);
-      });
-    }
-  },
-});
-router.beforeEach((to) => {
-  document.title =
-    typeof to.meta?.title === 'function' ? to.meta.title() : (to.meta?.title ?? 'Open-Celements Admin');
-});
-
-export default router;
+    },
+  });
+  router.beforeEach((to) => {
+    document.title =
+      typeof to.meta?.title === 'function'
+        ? to.meta.title()
+        : (to.meta?.title ?? 'Open-Celements Admin');
+  });
+  return router;
+};
diff --git a/celements-admin-frontend/src/public/page-attachments-island.ts b/celements-admin-frontend/src/public/page-attachments-island.ts
new file mode 100644
index 000000000..20e51df2b
--- /dev/null
+++ b/celements-admin-frontend/src/public/page-attachments-island.ts
@@ -0,0 +1,13 @@
+export {
+  CelPageAttachmentsElement,
+  PAGE_ATTACHMENTS_ELEMENT_NAME,
+  registerPageAttachmentsElement,
+} from '../islands/page-attachments-element';
+export type { PageAttachmentsSelectionDetail } from '../features/page-attachments/types';
+
+import { registerPageAttachmentsElement } from '../islands/page-attachments-element';
+import { ensureCelementsAdminStyles } from '../runtime/styles';
+
+if (import.meta.env.DEV) void import('./styles');
+ensureCelementsAdminStyles();
+registerPageAttachmentsElement();
diff --git a/celements-admin-frontend/src/public/page-attachments.ts b/celements-admin-frontend/src/public/page-attachments.ts
new file mode 100644
index 000000000..2288eea8c
--- /dev/null
+++ b/celements-admin-frontend/src/public/page-attachments.ts
@@ -0,0 +1,7 @@
+export { default as PageAttachments } from '../features/page-attachments/PageAttachments.vue';
+export type {
+  PageAttachmentsActionContext,
+  PageAttachmentsDocument,
+  PageAttachmentsProps,
+  PageAttachmentsSelectionDetail,
+} from '../features/page-attachments/types';
diff --git a/celements-admin-frontend/src/public/runtime.ts b/celements-admin-frontend/src/public/runtime.ts
new file mode 100644
index 000000000..99367cfaa
--- /dev/null
+++ b/celements-admin-frontend/src/public/runtime.ts
@@ -0,0 +1,4 @@
+export {
+  createCelementsApplication,
+  type CelementsApplicationOptions,
+} from '../runtime/application';
diff --git a/celements-admin-frontend/src/public/styles.ts b/celements-admin-frontend/src/public/styles.ts
new file mode 100644
index 000000000..5802b642d
--- /dev/null
+++ b/celements-admin-frontend/src/public/styles.ts
@@ -0,0 +1,2 @@
+import '../assets/main.css';
+import 'vuefinder/dist/style.css';
diff --git a/celements-admin-frontend/src/runtime/application.ts b/celements-admin-frontend/src/runtime/application.ts
new file mode 100644
index 000000000..9b4ae5a12
--- /dev/null
+++ b/celements-admin-frontend/src/runtime/application.ts
@@ -0,0 +1,131 @@
+import { appConfig } from '@/conf/app';
+import { createI18n } from '@/plugins/i18n';
+import { createCelementsPinia } from '@/plugins/plugin.pinia';
+import { useLogger } from '@/utils/logger';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faPencil, faPlus, faTrashCan } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { createApp, type Component } from 'vue';
+import type { Router } from 'vue-router';
+import VueFinder from 'vuefinder';
+import Button, { type ButtonProps } from 'primevue/button';
+import PrimeVue from 'primevue/config';
+import ConfirmationService from 'primevue/confirmationservice';
+
+export interface CelementsApplicationOptions {
+  locale?: string;
+  localDev?: boolean;
+  router?: Router;
+}
+
+export function createCelementsApplication(
+  rootComponent: Component,
+  rootProps: Record<string, unknown> = {},
+  options: CelementsApplicationOptions = {}
+) {
+  const logger = useLogger('Celements-Admin');
+  const app = createApp(rootComponent, rootProps);
+  const pinia = createCelementsPinia();
+  app.config.errorHandler = (err, instance, info) => {
+    logger.error(err as string, instance, info);
+  };
+  app.use(PrimeVue, {
+    unstyled: true,
+    pt: {
+      dialog: {
+        root: {
+          class:
+            'cel-admin-teleport bg-[var(--p-surface-0)] rounded-lg shadow-lg border border-[var(--p-content-border-color)] overflow-hidden flex flex-col w-[25rem] max-w-[90vw]',
+        },
+        header: {
+          class:
+            'flex items-center justify-between px-4 py-3 border-b border-[var(--p-content-border-color)]',
+        },
+        title: { class: 'text-lg font-semibold' },
+        content: { class: 'p-4' },
+        footer: {
+          class:
+            'flex justify-end gap-2 px-4 py-3 border-t border-[var(--p-content-border-color)] bg-[var(--p-surface-50)]',
+        },
+        mask: {
+          class:
+            'cel-admin-teleport bg-black/50 fixed inset-0 flex items-center justify-center z-50',
+        },
+      },
+      confirmdialog: {
+        root: {
+          class:
+            'cel-admin-teleport bg-[var(--p-surface-0)] rounded-lg shadow-lg border border-[var(--p-content-border-color)] overflow-hidden w-[25rem] max-w-[90vw]',
+        },
+        header: {
+          class:
+            'flex items-center gap-3 px-4 py-3 border-b border-[var(--p-content-border-color)]',
+        },
+        title: { class: 'text-lg font-semibold' },
+        content: { class: 'p-4 flex items-center gap-3' },
+        icon: { class: 'text-2xl text-[var(--p-text-muted-color)]' },
+        message: { class: 'text-[var(--p-text-color)]' },
+        footer: {
+          class:
+            'flex justify-end gap-2 px-4 py-3 border-t border-[var(--p-content-border-color)] bg-[var(--p-surface-50)]',
+        },
+        mask: {
+          class:
+            'cel-admin-teleport bg-black/50 fixed inset-0 flex items-center justify-center z-50',
+        },
+      },
+      inputtext: {
+        root: {
+          class:
+            'px-3 py-2 border border-[var(--p-content-border-color)] rounded-md w-full focus:outline-hidden focus:ring-2 focus:ring-[var(--p-primary-color)] text-[var(--p-text-color)] bg-[var(--p-surface-0)]',
+        },
+      },
+      button: {
+        root: ({ props }: { props: ButtonProps }) => ({
+          class: [
+            'px-3 py-1.5 rounded-md font-semibold transition-colors focus:ring-2 focus:ring-offset-1 focus:outline-hidden',
+            props.severity === 'secondary'
+              ? 'text-[var(--p-text-color)] hover:bg-[var(--p-content-hover-background)]'
+              : 'bg-[var(--p-primary-color)] text-white hover:opacity-80 ring-[var(--p-primary-color)]',
+            props.disabled ? 'opacity-50 cursor-not-allowed' : '',
+          ],
+        }),
+      },
+    },
+  });
+  app.use(ConfirmationService);
+  // PrimeVue intentionally publishes this component under its single-word API name.
+  // eslint-disable-next-line vue/no-reserved-component-names, vue/multi-word-component-names
+  app.component('Button', Button);
+  library.add(faPlus, faTrashCan, faPencil);
+  app.component('FontAwesomeIcon', FontAwesomeIcon);
+  app.use(pinia);
+  if (options.router) app.use(options.router);
+  app.use(createI18n({ locale: options.locale ?? appConfig.defaultLocale }));
+  app.use(VueFinder, {
+    i18n: {
+      en: async () => await import('vuefinder/dist/locales/en.js'),
+      de: async () => await import('vuefinder/dist/locales/de.js'),
+      fr: async () => await import('vuefinder/dist/locales/fr.js'),
+      it: async () => await import('vuefinder/dist/locales/it.js'),
+    },
+  });
+  const localDev = options.localDev ?? import.meta.env.DEV;
+  app.provide('localDev', localDev);
+  if (localDev) logger.info('local development enabled');
+  return {
+    app,
+    pinia,
+    mount(el: Element | string) {
+      const target = typeof el === 'string' ? document.querySelector(el) : el;
+      if (!target) {
+        logger.warn(`mount target not found: ${JSON.stringify(el)}`);
+        return;
+      }
+      logger.debug('mounting app...');
+      const result = app.mount(target);
+      logger.info('main ready');
+      return result;
+    },
+  };
+}
diff --git a/celements-admin-frontend/src/runtime/styles.ts b/celements-admin-frontend/src/runtime/styles.ts
new file mode 100644
index 000000000..2494729ef
--- /dev/null
+++ b/celements-admin-frontend/src/runtime/styles.ts
@@ -0,0 +1,22 @@
+const ADMIN_STYLES = [
+  ['celements-admin-vendor-styles', 'vendor.css'],
+  ['celements-admin-application-styles', 'embedded.css'],
+] as const;
+
+export const ensureCelementsAdminStyles = (
+  baseUrl: string | URL = import.meta.url,
+  production = import.meta.env.VITE_CELEMENTS_DEPLOYABLE === 'true'
+) => {
+  if (!production) return;
+  for (const [id, filename] of ADMIN_STYLES) {
+    const isLoaded = Array.from(
+      document.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]')
+    ).some(({ href }) => new URL(href, document.baseURI).pathname.endsWith(`/${filename}`));
+    if (document.getElementById(id) || isLoaded) continue;
+    const link = document.createElement('link');
+    link.id = id;
+    link.rel = 'stylesheet';
+    link.href = new URL(filename, baseUrl).href;
+    document.head.append(link);
+  }
+};
diff --git a/celements-admin-frontend/src/spa/PageAttachmentsRoute.vue b/celements-admin-frontend/src/spa/PageAttachmentsRoute.vue
new file mode 100644
index 000000000..b02c5e069
--- /dev/null
+++ b/celements-admin-frontend/src/spa/PageAttachmentsRoute.vue
@@ -0,0 +1,12 @@
+<template>
+  <PageAttachments :space-name="spaceName" :doc-name="docName" />
+</template>
+
+<script setup lang="ts">
+import PageAttachments from '@/features/page-attachments/PageAttachments.vue';
+
+defineProps<{
+  spaceName: string;
+  docName: string;
+}>();
+</script>
diff --git a/celements-admin-frontend/src/views/MediaLib.vue b/celements-admin-frontend/src/views/MediaLib.vue
index c44ac5249..7e411e1ed 100644
--- a/celements-admin-frontend/src/views/MediaLib.vue
+++ b/celements-admin-frontend/src/views/MediaLib.vue
@@ -89,9 +89,7 @@ const originalList = driver.list.bind(driver);
 driver.list = async (...args: Parameters<typeof originalList>) => {
   const result = await originalList(...args);
   if (tagStore.isFilterActive && result?.files) {
-    result.files = result.files.filter((f: DirEntry) =>
-      tagStore.filteredPaths.has(f.path),
-    );
+    result.files = result.files.filter((f: DirEntry) => tagStore.filteredPaths.has(f.path));
   }
   return result;
 };
@@ -104,7 +102,7 @@ const filterKey = computed(() =>
   tagStore.activeFilter
     .map((t) => t.id)
     .sort()
-    .join(','),
+    .join(',')
 );
 
 logger.log('driver setup');
diff --git a/celements-admin-frontend/src/views/PageAttachments.vue b/celements-admin-frontend/src/views/PageAttachments.vue
deleted file mode 100644
index 0960026b3..000000000
--- a/celements-admin-frontend/src/views/PageAttachments.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <div class="flex h-full w-full overflow-hidden">
-    <div class="flex min-w-0 flex-1 flex-col w-full">
-      <VueFinder
-        id="page_attachments_vuefinder"
-        class="flex-1"
-        :driver="driver"
-        :config="{
-          initialPath: 'attachments://' + spaceName + '/' + docName,
-          persist: false,
-        }"
-        :features="{
-          search: true,
-          preview: true,
-          rename: false,
-          upload: true,
-          delete: true,
-          download: true,
-          newfolder: false,
-          newfile: false,
-          move: false,
-          copy: false,
-          archive: false,
-          unarchive: false,
-          edit: false,
-          fullscreen: false,
-          language: false,
-          history: false,
-          theme: false,
-          pinned: false,
-        }"
-        @select="handleSelect"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useLogger } from '@/utils/logger';
-import { RemoteDriver, VueFinder } from 'vuefinder';
-import type { DirEntry } from 'vuefinder';
-import { ref } from 'vue';
-import { useRoute } from 'vue-router';
-
-const logger = useLogger('VueFinder-Attachments');
-const route = useRoute();
-const spaceName = route.params.spaceName as string;
-const docName = route.params.docName as string;
-
-const selectedFiles = ref<DirEntry[]>([]);
-
-const handleSelect = (files: DirEntry[]) => {
-  selectedFiles.value = files;
-  logger.log('selected files', files);
-};
-
-const driver = new RemoteDriver({
-  baseURL: `/api/attachments/${spaceName}/${docName}`,
-});
-
-const originalGetDownloadUrl = driver.getDownloadUrl.bind(driver);
-driver.getDownloadUrl = (file: DirEntry & { url?: string }) => {
-  if (file && file.url) {
-    return file.url;
-  }
-  return originalGetDownloadUrl(file);
-};
-
-logger.log('driver setup for page attachments');
-</script>
diff --git a/celements-admin-frontend/tailwind.config.js b/celements-admin-frontend/tailwind.config.js
index 1b31ce867..28db85dc6 100644
--- a/celements-admin-frontend/tailwind.config.js
+++ b/celements-admin-frontend/tailwind.config.js
@@ -4,8 +4,12 @@ import primeui from 'tailwindcss-primeui';
 export default {
   content: [
     "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
+    "./src/**/*.{vue,ts,tsx}",
   ],
+  important: ':where(.cel-admin-surface, .cel-admin-teleport)',
+  corePlugins: {
+    preflight: false,
+  },
   darkMode: ['selector', 'none'],
   plugins: [primeui],
   theme: {
diff --git a/celements-admin-frontend/test/page-attachments.test.ts b/celements-admin-frontend/test/page-attachments.test.ts
new file mode 100644
index 000000000..50410960d
--- /dev/null
+++ b/celements-admin-frontend/test/page-attachments.test.ts
@@ -0,0 +1,181 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+import { mount } from '@vue/test-utils';
+import { defineComponent, h } from 'vue';
+import { afterEach, beforeAll, describe, expect, test, vi } from 'vitest';
+
+const attachment = {
+  dir: 'attachments://Space/Page',
+  basename: 'image.jpg',
+  extension: 'jpg',
+  path: 'attachments://Space/Page/image.jpg',
+  storage: 'attachments',
+  type: 'file' as const,
+  file_size: 123,
+  last_modified: 1,
+  mime_type: 'image/jpeg',
+  visibility: 'public',
+};
+
+vi.mock('vuefinder', () => {
+  class RemoteDriver {
+    baseURL: string;
+    constructor({ baseURL }: { baseURL: string }) {
+      this.baseURL = baseURL;
+    }
+    getDownloadUrl(file: { path: string }) {
+      return file.path;
+    }
+  }
+  const VueFinder = defineComponent({
+    name: 'VueFinder',
+    props: {
+      id: { type: String, required: true },
+      driver: { type: Object, required: true },
+    },
+    emits: ['select'],
+    setup(props, { emit, slots }) {
+      return () =>
+        h('div', { 'data-finder-id': props.id, 'data-driver': props.driver.baseURL }, [
+          h('button', { class: 'select', onClick: () => emit('select', [attachment]) }, 'select'),
+          slots['status-bar']?.({
+            path: 'attachments://Space/Page',
+            count: 1,
+            selected: [attachment],
+          }),
+        ]);
+    },
+  });
+  return {
+    default: { install: vi.fn() },
+    RemoteDriver,
+    VueFinder,
+  };
+});
+
+import routes from '@/conf/routes';
+import PageAttachments from '@/features/page-attachments/PageAttachments.vue';
+import {
+  CelPageAttachmentsElement,
+  PAGE_ATTACHMENTS_ELEMENT_NAME,
+  registerPageAttachmentsElement,
+} from '@/islands/page-attachments-element';
+import { createCelementsApplication } from '@/runtime/application';
+import { ensureCelementsAdminStyles } from '@/runtime/styles';
+
+beforeAll(() => registerPageAttachmentsElement());
+
+afterEach(() => {
+  document.body.replaceChildren();
+});
+
+describe('PageAttachments feature', () => {
+  test('mounts without Vue Router and keeps the attachment REST contract', () => {
+    const wrapper = mount(PageAttachments, {
+      props: { spaceName: 'My Space', docName: 'Page' },
+    });
+    expect(wrapper.find('[data-driver]').attributes('data-driver')).toBe(
+      '/api/attachments/My%20Space/Page'
+    );
+  });
+
+  test('exposes selection and a typed attachment action slot', async () => {
+    const wrapper = mount(PageAttachments, {
+      props: { spaceName: 'Space', docName: 'Page' },
+      slots: {
+        'attachment-actions': ({ document, selectedAttachments }) =>
+          h(
+            'button',
+            { class: 'downstream-action' },
+            `${document.spaceName}.${document.docName}:${selectedAttachments[0].basename}`
+          ),
+      },
+    });
+    expect(wrapper.get('.downstream-action').text()).toBe('Space.Page:image.jpg');
+    await wrapper.get('.select').trigger('click');
+    expect(wrapper.emitted('selectionChange')?.[0]?.[0]).toEqual({
+      document: { spaceName: 'Space', docName: 'Page' },
+      selectedAttachments: [attachment],
+    });
+  });
+});
+
+test('the SPA route converts route params to feature props', () => {
+  const route = routes.find(({ name }) => name === 'PageAttachments');
+  expect(typeof route?.props).toBe('function');
+  expect(
+    (route?.props as (route: { params: Record<string, string> }) => unknown)({
+      params: { spaceName: 'Space', docName: 'Page' },
+    })
+  ).toEqual({ spaceName: 'Space', docName: 'Page' });
+});
+
+describe('cel-page-attachments island', () => {
+  test('maps attributes and properties and forwards selection as a DOM event', async () => {
+    const element = document.createElement(
+      PAGE_ATTACHMENTS_ELEMENT_NAME
+    ) as CelPageAttachmentsElement;
+    element.spaceName = 'Space';
+    element.docName = 'Page';
+    element.locale = 'de';
+    element.localDev = false;
+    const listener = vi.fn();
+    element.addEventListener('attachment-selection-change', listener);
+    document.body.append(element);
+    expect(element.getAttribute('space-name')).toBe('Space');
+    expect(element.getAttribute('doc-name')).toBe('Page');
+    expect(element.locale).toBe('de');
+    await element.querySelector<HTMLButtonElement>('.select')?.click();
+    expect(listener).toHaveBeenCalledOnce();
+    expect((listener.mock.calls[0][0] as CustomEvent).detail.selectedAttachments).toEqual([
+      attachment,
+    ]);
+  });
+
+  test('unmounts, reconnects, and supports isolated simultaneous applications', () => {
+    const first = document.createElement(
+      PAGE_ATTACHMENTS_ELEMENT_NAME
+    ) as CelPageAttachmentsElement;
+    first.spaceName = 'Space';
+    first.docName = 'One';
+    const second = document.createElement(
+      PAGE_ATTACHMENTS_ELEMENT_NAME
+    ) as CelPageAttachmentsElement;
+    second.spaceName = 'Space';
+    second.docName = 'Two';
+    document.body.append(first, second);
+    const ids = [first, second].map(
+      (element) => element.querySelector<HTMLElement>('[data-finder-id]')?.dataset.finderId
+    );
+    expect(ids[0]).toBeTruthy();
+    expect(ids[0]).not.toBe(ids[1]);
+    first.remove();
+    expect(first.childElementCount).toBe(0);
+    document.body.append(first);
+    expect(first.querySelector('[data-finder-id]')).not.toBeNull();
+    const firstApp = createCelementsApplication({ render: () => h('div') });
+    const secondApp = createCelementsApplication({ render: () => h('div') });
+    expect(firstApp.pinia).not.toBe(secondApp.pinia);
+  });
+});
+
+test('registration, build entries, and CSS containment are explicit', () => {
+  registerPageAttachmentsElement();
+  expect(customElements.get(PAGE_ATTACHMENTS_ELEMENT_NAME)).toBe(CelPageAttachmentsElement);
+  const viteConfig = readFileSync(resolve(process.cwd(), 'vite.config.ts'), 'utf8');
+  expect(viteConfig).toContain("runtime: 'src/public/runtime.ts'");
+  expect(viteConfig).toContain("'page-attachments': 'src/public/page-attachments.ts'");
+  expect(viteConfig).toContain(
+    "'page-attachments-island': 'src/public/page-attachments-island.ts'"
+  );
+  const css = readFileSync(resolve(process.cwd(), 'src/assets/main.css'), 'utf8');
+  expect(css).not.toMatch(/(^|\n):root/);
+  expect(css).not.toContain("@import 'tailwindcss';");
+  expect(css).toContain("@import 'tailwindcss/utilities.css' layer(utilities)");
+  expect(css).toContain('.cel-admin-surface h1');
+  ensureCelementsAdminStyles('https://static.example/assets/', true);
+  ensureCelementsAdminStyles('https://static.example/assets/', true);
+  expect(document.head.querySelectorAll('#celements-admin-vendor-styles')).toHaveLength(1);
+  expect(document.head.querySelectorAll('#celements-admin-application-styles')).toHaveLength(1);
+});
diff --git a/celements-admin-frontend/vite.config.ts b/celements-admin-frontend/vite.config.ts
index 4ec44fee8..79778b1ee 100644
--- a/celements-admin-frontend/vite.config.ts
+++ b/celements-admin-frontend/vite.config.ts
@@ -11,6 +11,11 @@ export const getViteConfig = (mode: string) => {
   const env = loadEnv(mode, process.cwd());
   return defineConfig({
     base: mode === 'production' ? '/static/' : '/',
+    define: {
+      'import.meta.env.VITE_CELEMENTS_DEPLOYABLE': JSON.stringify(
+        mode === 'production' ? 'true' : 'false',
+      ),
+    },
     plugins: [
       vue({
         template: {
@@ -26,11 +31,19 @@ export const getViteConfig = (mode: string) => {
       rollupOptions: {
         input: {
           embedded: 'src/embedded.ts',
+          runtime: 'src/public/runtime.ts',
+          'page-attachments': 'src/public/page-attachments.ts',
+          'page-attachments-island': 'src/public/page-attachments-island.ts',
         },
         output: {
           entryFileNames: 'assets/[name].js',
           chunkFileNames: 'assets/[name]-[hash].js',
-          assetFileNames: 'assets/[name][extname]',
+          assetFileNames(assetInfo) {
+            if (assetInfo.name === 'vendor.css') return 'assets/vendor.css';
+            if (assetInfo.name === 'embedded.css') return 'assets/embedded.css';
+            if (assetInfo.name?.endsWith('.css')) return 'assets/admin.css';
+            return 'assets/[name][extname]';
+          },
           manualChunks(id) {
             if (id.includes('node_modules')) {
               return 'vendor';
diff --git a/celements-admin-frontend/vite.library.config.ts b/celements-admin-frontend/vite.library.config.ts
new file mode 100644
index 000000000..8475e5d07
--- /dev/null
+++ b/celements-admin-frontend/vite.library.config.ts
@@ -0,0 +1,49 @@
+import { fileURLToPath, URL } from 'node:url';
+
+import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vite';
+
+const peerDependencies = ['pinia', 'primevue', 'vue', 'vue-i18n', 'vue-router', 'vuefinder'];
+
+export default defineConfig({
+  define: {
+    'import.meta.env.VITE_CELEMENTS_DEPLOYABLE': JSON.stringify('false'),
+  },
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag.includes('-'),
+        },
+      },
+    }),
+  ],
+  build: {
+    cssCodeSplit: false,
+    emptyOutDir: false,
+    lib: {
+      entry: {
+        runtime: 'src/public/runtime.ts',
+        'page-attachments': 'src/public/page-attachments.ts',
+        'page-attachments-island': 'src/public/page-attachments-island.ts',
+        styles: 'src/public/styles.ts',
+      },
+      cssFileName: 'styles',
+      formats: ['es'],
+    },
+    outDir: 'dist/package',
+    rollupOptions: {
+      external: (id) =>
+        peerDependencies.some((dependency) => id === dependency || id.startsWith(`${dependency}/`)),
+      output: {
+        entryFileNames: '[name].js',
+        chunkFileNames: '[name]-[hash].js',
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+});
diff --git a/celements-webapp/src/main/webapp/templates/celEditorTabs/loadTabAttachments.vm b/celements-webapp/src/main/webapp/templates/celEditorTabs/loadTabAttachments.vm
index 5f2b6c18a..3381046b1 100644
--- a/celements-webapp/src/main/webapp/templates/celEditorTabs/loadTabAttachments.vm
+++ b/celements-webapp/src/main/webapp/templates/celEditorTabs/loadTabAttachments.vm
@@ -1,91 +1,4 @@
-<script type="text/javascript">
-function onSave_att() {}
-function onCancel_att() {}
-</script>
-
-#set($redurl = $doc.getURL('edit', 'tab=tb3'))
-
 <div id="att_contentView" class="editblock">
-	<h2>$adminMsg.get("cel_tm_attachments")</h2>
-<table class="cel_table">
-#if($doc.attachmentList.size() > 0)
-<tr>
-  <th style="text-align:left;width:120px;">&nbsp;</th>
-  <th style="text-align:left;">$adminMsg.get("cel_filename")</th>
-  <th style="text-align:left;width:60px;">&nbsp;</th>
-  <th style="text-align:left;">$adminMsg.get("cel_size")</th>
-  <th style="text-align:left;width:120px;">&nbsp;</th> 
-</tr>
-#foreach ($attach in $doc.attachmentList)
-<tr>
-  <td class="celements2_line" style="text-align:left;">
-  #if ($attach.isImage())
-    ##IMPORTANT: do NOT set image with or height, because the image will be stretched.
-    ##IMPORTANT: do NOT remove celwith or celheight because their are important for
-    ##           correct resizing of to big images
-    <a href="$doc.getAttachmentURL($attach.filename,'download')"><img src="$doc.getAttachmentURL($attach.filename,'download')?celwidth=100&celheight=15" alt="" border="0" /></a>
-  #else
-    &nbsp;
-  #end
-  </td>
-  <td class="celements2_line" style="text-align:left;">
-    <a href="$doc.getAttachmentURL($attach.filename,'download')">$attach.filename</a>
-  </td>
-  <td></td>
-  <td class="celements2_line" style="text-align:left;">
-    #set($filegroesse = $attach.filesize)
-    #set($filegroesse_type = "B")
-    #if($filegroesse > 1000)
-  	   #set($filegroesse = ($filegroesse/1000))
-      #set($filegroesse_type = "KB")
-    #end
-    #if($filegroesse > 1000)
-    	 #set($filegroesse = ($filegroesse/1000))
-      #set($filegroesse_type = "MB")
-    #end
-    $filegroesse $filegroesse_type
-  </td>
-  <td class="celements2_line" style="text-align:left;"><a href="$doc.getAttachmentURL("${attach.filename}", "delattachment", "xredirect=$redurl")" onclick="return confirm('$adminMsg.get("cel_tm_confirm_del_attachment")');">$adminMsg.get("cel_delete")</a>
-  </td>
-</tr>
-#set( $counter = $counter + 1)
-#end
-#else  
-  <tr>
-    <td colspan="4">$adminMsg.get('cel_tm_no_attachments').</td>
-  </tr>
-#end
-</table>
-<br />
-<h2>$adminMsg.get('cel_tm_upload_attachment')</h2>
-#if ($doc.isNew())
-  <br/>
-  $adminMsg.get('cel_tm_save_first')
-#else  
-  <form action="$xwiki.getURL($doc.getFullName(), 'upload')" enctype="multipart/form-data" method="post">
-  <script type="text/javascript">
-  function update_filename(filename, field){
-  if(document.forms.update && document.forms.update[field])
-    document.forms.update[field].value = filename;
-  return false;
-  }
-  function updateName(form) {
-  var fname = form.filepath.value;  
-  if (fname=="") {
-    return false;
-  }
-  var i = fname.lastIndexOf('\\');
-  if (i==-1)
-    i = fname.lastIndexOf('/');
-  fname = fname.substring(i+1);
-  form.filename.value = fname;
-  return true;
-  }
-  </script>
-  <input type="hidden" name="xredirect" value="$redurl" size="20" />    
-  <input type="hidden" name="filename" value="" size="20" />
-  <input type="file" name="filepath" value="" size="40"  />
-  <input type="submit" value="$adminMsg.get('cel_upload')" onclick="return updateName(this.form)" />  
-  </form>
-#end
-</div>
\ No newline at end of file
+  <h2>$adminMsg.get("cel_tm_attachments")</h2>
+  #parse('celTemplates/pageAttachmentsIsland.vm')
+</div>
diff --git a/celements-webapp/src/main/webapp/templates/celTemplates/attachmentsinline.vm b/celements-webapp/src/main/webapp/templates/celTemplates/attachmentsinline.vm
index aabfe5cfa..11a0b2b09 100644
--- a/celements-webapp/src/main/webapp/templates/celTemplates/attachmentsinline.vm
+++ b/celements-webapp/src/main/webapp/templates/celTemplates/attachmentsinline.vm
@@ -1,93 +1,5 @@
-#set($jsService = $services.javascript)
-#set($extJsParam = $jsService.createExtJSParam().setAction('file'))
-#set($extJsParam = $extJsParam.setLazyLoad(true))
-$!jsService.includeExtJsFile($extJsParam.setJsFile(':js/xwiki/viewers/attachments.js'))##
-<link rel="stylesheet" media="all" type="text/css" href="$!services.celementsweb.getSkinFile(':js/xwiki/viewers/attachments.css', 'file')" /> 
-###
-### List document attachments
-###
-### TODO: web service?
-###
-#if("$!redirect" == '')
-#if("$!request.xredirect" != '')
-#set($redirect = $request.xredirect)
-#else
-#set($redirect = "${doc.getURL()}#Attachments")
-#end
-#end
-#set($showactions = 0)
-#set($attachments = $doc.attachmentList)
-    <div id="attachmentscontent" class="xwikiintracontent">
-    <div id="attw">
-      <div id="_attachments">
-#if($attachments.size()>0)
-#foreach ($attach in $attachments)
-        <div class="attachment #if($velocityCount % 2 == 0) even #else odd #end">
-          <span class="mime">#mimetypeimg($attach.getMimeType().toLowerCase() $attach.getFilename().toLowerCase())</span>
-          <div class="information">
-          <span class="name"><a href="$doc.getAttachmentURL(${attach.filename}, 'download')" title="$msg.get('core.viewers.attachments.download')">#packName($attach.filename)</a></span>
-#if($hasEdit || $hasAdmin)
-          <span class="xwikibuttonlinks">
-            ## Delete attachment link
-            <a class="deletelink" href="$doc.getAttachmentURL(${attach.filename}, 'delattachment', "xredirect=${xwiki.getURLEncoded($redirect)}")"  title="$msg.get('core.viewers.attachments.deleteTitle', [$xwiki.getXMLEncoded($attach.filename)])">$msg.get('core.viewers.attachments.delete')</a>
-            ## Dav Edit attachment link. We display the link hidden by default, and let the WebDAV JSX extension display it if
-            ## the browser supports Dav Edit 
-	    #set($documentUrl=$doc.getExternalURL("download"))
-      	    #set($attachmentUrl="$documentUrl/$attach.filename")
-            #set($attachmentSignature="${request.contextPath}${request.servletPath}/download/")
-            #set($webdavSignature="${request.contextPath}/webdav/spaces/")
-            #set($fragments=$attachmentUrl.split($attachmentSignature))
-            #if($listtool.size($fragments) == 2)
-              #set($prefix=$listtool.get($fragments, 0))
-              #set($suffix=$listtool.get($fragments, 1))
-              #set($davUrl="$prefix$webdavSignature$suffix")
-              <a title="$msg.get('core.viewers.attachments.webdavEdit.title')" class="editlink hidden" href="$davUrl" onclick="if(XWiki && XWiki.WebDAV){XWiki.WebDAV.davEdit('$davUrl')}; return false;">$msg.get('core.viewers.attachments.webdavEdit')</a>
-            #end
-         </span>
-#end ## hasEdit
-          <span class="version"><a href="$doc.getAttachmentURL(${attach.filename}, 'viewattachrev')" title="$msg.get('core.viewers.attachments.showHistory')">$attach.version</a></span>
-          <div class="meta">
-          <span class="publisher">$msg.get('core.viewers.attachments.author', [$xwiki.getUserName($attach.author)])</span>
-          <span class="date">$msg.get('core.viewers.attachments.date', [$!xwiki.formatDate($attach.date)])</span>
-          <span class="size">(#dynamicsize($attach.filesize))</span>
-          </div>
-          </div>
-        </div> ## row
-#end ## foreach
+#parse('celTemplates/pageAttachmentsIsland.vm')
 <script type="text/javascript">
-// <![CDATA[
-// Let XWiki.WebDAV JS display links only if the browser support WebDAV.
-if (XWiki && XWiki.WebDAV) { XWiki.WebDAV.displayDavLinks($('_attachments')); }
-// When the document is loaded, trigger the attachment form enhancements.
-document.observe("load", function() { new XWiki.viewers.Attachments(); });
-// ]]>
+function onSave_att() {}
+function onCancel_att() {}
 </script>
-#else ## No attachments
-<p class="noitems">$msg.get('core.viewers.attachments.noAttachments')</p>
-#end
-#if($hasEdit || $hasAdmin)
-<form action="$doc.getURL("upload")" enctype="multipart/form-data" method="post" id="AddAttachment">
-  <div>
-    <input type="hidden" name="xredirect" value="${xwiki.getFormEncoded($redirect)}#if("$!request.exitOnClose" == "1")&exitOnClose=1#end" />
-    <fieldset id="attachform">
-    <legend>$msg.get('core.viewers.attachments.upload.title')</legend>
-    ## Temporarily disabled, until we fix attachment name handling
-    ## <div><label id="xwikiuploadnamelabel" for="xwikiuploadname">$msg.get('core.viewers.attachments.upload.filename')</label></div>
-    <div><input id="xwikiuploadname" type="hidden" name="filename" value="" size="40"/></div>
-    <div><label class="hidden" for="xwikiuploadfile">$msg.get('core.viewers.attachments.upload.file')</label><input id="xwikiuploadfile" type="file" name="filepath" value="" size="40" class="uploadFileInput"/></div>
-    <div>
-    <span class="buttonwrapper"><input type="submit" value="$msg.get('core.viewers.attachments.upload.submit')" class="button"/></span>
-    <span class="buttonwrapper"><input type="reset" value="$msg.get('core.viewers.attachments.upload.cancel')" class="button"/></span>
-    </div>
-    </fieldset>
-  </div>
-</form>
-## TODO remove after finishing [CELDEV-1077] UploadAction creates docs without sane defaults
-#if($doc.isNew())
-  #set($newDoc = $services.modelAccess.getOrCreateDocument($doc.documentReference))
-  $newDoc.save() ## avoid uploading stuff on new docs since UploadAction sucks balls
-#end
-#end
-      </div> ## attachments
-      </div> ## attw
-    </div> ## attachmentscontent
diff --git a/celements-webapp/src/main/webapp/templates/celTemplates/pageAttachmentsIsland.vm b/celements-webapp/src/main/webapp/templates/celTemplates/pageAttachmentsIsland.vm
new file mode 100644
index 000000000..c0a9d7f8a
--- /dev/null
+++ b/celements-webapp/src/main/webapp/templates/celTemplates/pageAttachmentsIsland.vm
@@ -0,0 +1,14 @@
+#set($pageAttachmentsVersion = $!services.celementsweb.getLastStartupTimeStamp())
+#set($pageAttachmentsHost = "$!context.getRequest().getHeader('host')")
+#if($pageAttachmentsHost.indexOf('localhost') != -1)
+  #set($pageAttachmentsModule = 'http://localhost:5173/src/public/page-attachments-island.ts')
+#else
+  #set($pageAttachmentsModule = "/static/assets/page-attachments-island.js?ver=${pageAttachmentsVersion}")
+#end
+<script type="module" src="$pageAttachmentsModule"></script>
+<span class="cel_lazyloadJS_exec" style="display:none">import('$pageAttachmentsModule')</span>
+<cel-page-attachments
+  space-name="$!escapetool.xml($doc.space)"
+  doc-name="$!escapetool.xml($doc.name)"
+  locale="$!escapetool.xml($xcontext.language)"
+></cel-page-attachments>
diff --git a/docs/architecture/decisions/0001-router-independent-admin-features-and-vue-islands.md b/docs/architecture/decisions/0001-router-independent-admin-features-and-vue-islands.md
new file mode 100644
index 000000000..38abf152c
--- /dev/null
+++ b/docs/architecture/decisions/0001-router-independent-admin-features-and-vue-islands.md
@@ -0,0 +1,173 @@
+# ADR 0001: Router-independent admin features and Vue islands
+
+- Status: Accepted
+- Date: 2026-08-06
+- Decision owners: Celements frontend maintainers
+- Related issue: CELDEV-1338
+
+## Context
+
+`celements-admin-frontend` started as a Vue Router application mounted below
+`/app/cel/admin/**`. Its bootstrap always created the SPA root and installed a singleton router and
+Pinia instance. Feature views such as `PageAttachments` read document context directly from the
+active route.
+
+That architecture prevented the same attachment UI from being mounted in server-rendered XWiki
+surfaces such as attachment viewers, overlays, document extras, and asynchronously loaded editor
+tabs. It also encouraged downstream products to replace routes or copy source when adding
+product-specific actions.
+
+CELDEV-1338 requires the VueFinder attachment UI to replace the legacy attachment implementations
+without redirecting every existing surface into the SPA. The package must also provide a stable
+extension boundary for later downstream use without adding product-specific behavior to
+`celements-web`.
+
+## Decision
+
+### Separate features and islands from the SPA shell
+
+Admin features are router-independent Vue components. They receive all host context through typed
+props and expose typed events and slots. They must not import or call Vue Router.
+
+Vue islands adapt server-rendered element attributes and properties into feature props. The
+server-rendered page owns navigation outside the SPA. Vue Router remains supported, but only the SPA
+bootstrap and route adapters install or use it. SPA route adapters translate route parameters into
+the same feature props used by islands.
+
+For `PageAttachments`, the shared document contract contains at least `spaceName` and `docName`,
+with `locale` available where required by the host. Both the SPA route and
+`<cel-page-attachments>` adapt their respective inputs into this contract.
+
+### Use one reusable application runtime
+
+SPA and island applications share setup for PrimeVue, i18n, VueFinder, logging, confirmation
+handling, global components, and local-development configuration.
+
+The shared application runtime accepts Vue Router as an optional application-specific plugin. It
+creates a new Pinia instance for every mounted application. No mutable Pinia or router singleton is
+shared between islands.
+
+### Provide explicit PageAttachments extension contracts
+
+`PageAttachments` exposes:
+
+- a `selectionChange` Vue event containing the document and selected attachments;
+- an `attachment-actions` slot containing `document`, `path`, `count`, and
+  `selectedAttachments`.
+
+The custom element forwards selection as the bubbling, composed
+`attachment-selection-change` DOM event.
+
+Downstream products add attachment actions through these contracts. They must not replace the
+Celements route, override the component source, or require product-specific behavior in
+`celements-web`.
+
+### Define supported package entry points
+
+The supported `@celements/admin-frontend` imports are:
+
+- `@celements/admin-frontend/runtime`;
+- `@celements/admin-frontend/page-attachments`;
+- `@celements/admin-frontend/page-attachments-island`;
+- `@celements/admin-frontend/styles.css`.
+
+Internal `src/*` paths are not public API.
+
+Vue, Pinia, PrimeVue, vue-i18n, Vue Router, and VueFinder are peer dependencies for the published
+library. The deployable SPA/island assets remain self-contained, while a separate library build
+externalizes these peers so downstream consumers do not load a second Vue runtime.
+
+### Use a dedicated custom element for the attachment island
+
+The supported island element is `<cel-page-attachments>`. It accepts these attributes and matching
+properties:
+
+- `space-name` / `spaceName`;
+- `doc-name` / `docName`;
+- `locale`;
+- `local-dev` / `localDev`.
+
+Registration is guarded. Connecting mounts a fresh application; disconnecting unmounts it; later
+reconnection or input changes safely create a new application. Multiple elements on one page remain
+state-isolated.
+
+### Keep server-rendered attachment URLs and wrappers
+
+The legacy attachment templates render the router-free island in place. Existing viewer, overlay,
+document-extra, attach-action, and editor-tab URLs retain their ownership and wrappers.
+
+Editor-tab fragments use their established lazy-script initialization path to import the island
+entry after asynchronous insertion. Module evaluation, custom-element registration, and stylesheet
+loading are idempotent so more than one reference does not create duplicate applications or style
+links.
+
+The existing REST and authorization boundary remains
+`/api/attachments/{spaceName}/{docName}`. VueFinder continues to provide listing, upload, search,
+preview, download, and deletion behavior through that API.
+
+### Contain island CSS in light DOM
+
+The island uses scoped light-DOM styles rather than Shadow DOM. VueFinder and PrimeVue teleport
+dialogs and overlays outside the component subtree; Shadow DOM would separate those teleports from
+required styles and tokens.
+
+Tailwind preflight is excluded. Application utility selectors, heading rules, theme tokens, and
+generic vendor reset selectors are scoped to `.cel-admin-surface` and `.cel-admin-teleport`.
+VueFinder's namespaced selectors remain available for its teleported UI. Application styles must not
+introduce unscoped `:root`, heading, or generic reset rules into surrounding legacy markup.
+
+## Consequences
+
+### Positive
+
+- A feature is implemented once and reused by the SPA and server-rendered islands.
+- Legacy URLs and server-side navigation remain stable during incremental migration.
+- Multiple islands can coexist without router or Pinia state leakage.
+- Downstream attachment actions have a typed extension seam instead of a source fork.
+- Package consumers receive intentional imports and share their existing Vue runtime.
+- CSS from an island does not reset or retheme the surrounding legacy page.
+
+### Costs and constraints
+
+- Every host must supply required context explicitly rather than relying on ambient route state.
+- SPA routes require small adapter components or route-prop functions.
+- Deployable assets and publishable library artifacts require separate build outputs.
+- Teleported components require coordinated `.cel-admin-teleport` styling and make full Shadow DOM
+  encapsulation impractical.
+- Public props, events, slots, custom-element attributes, and package entry points are compatibility
+  contracts and require deliberate evolution.
+
+## Alternatives considered
+
+### Keep PageAttachments coupled to Vue Router
+
+Rejected because server-rendered pages and fragments do not own or require the SPA router.
+
+### Mount the generic `<cel-admin>` SPA everywhere
+
+Rejected because it transfers navigation ownership to the SPA, adds unrelated routes/runtime state,
+and does not preserve incremental server-rendered migration boundaries.
+
+### Let downstream products replace routes or copy the feature
+
+Rejected because replacements drift from the shared REST, security, VueFinder, and package behavior.
+A typed action slot and selection contract provide the required extension point.
+
+### Use Shadow DOM for complete CSS isolation
+
+Rejected because VueFinder and PrimeVue teleports render outside the shadow root. Scoped light DOM
+contains host-impacting styles while keeping dialogs and overlays functional.
+
+### Share one Pinia instance between mounts
+
+Rejected because multiple islands would share mutable state and lifecycle unexpectedly.
+
+### Continue exporting unrestricted `src/*` paths
+
+Rejected because it exposes implementation layout as public API and prevents internal
+reorganization.
+
+### Bundle Vue and framework plugins in the published library
+
+Rejected because downstream applications could receive duplicate framework runtimes. Framework
+packages are peers in the library build while deployment assets remain bundled.

From 1d244f4e09796516c12750674e12b2c74533232e Mon Sep 17 00:00:00 2001
From: Fabian Pichler <fabian.pichler@synventis.com>
Date: Fri, 7 Aug 2026 04:17:20 +0200
Subject: [PATCH 2/2] CELDEV-1338 - complete admin frontend package contract

---
 celements-admin-frontend/.npmrc               |   2 +
 celements-admin-frontend/Jenkinsfile.npm      |  89 +++++++++++
 celements-admin-frontend/README.md            |  92 +++++++++--
 celements-admin-frontend/package-lock.json    |   1 -
 celements-admin-frontend/package.json         |  14 +-
 celements-admin-frontend/postcss.config.js    |  66 ++++++--
 .../scripts/publish-forge-package.sh          |  34 ++++
 .../src/runtime/application.ts                |   5 +-
 .../test/package-artifacts.test.ts            | 146 ++++++++++++++++++
 .../test/page-attachments.test.ts             |  41 ++++-
 .../vite.library.config.ts                    |   5 +
 ...ependent-admin-features-and-vue-islands.md |  54 ++++++-
 12 files changed, 508 insertions(+), 41 deletions(-)
 create mode 100644 celements-admin-frontend/.npmrc
 create mode 100644 celements-admin-frontend/Jenkinsfile.npm
 create mode 100755 celements-admin-frontend/scripts/publish-forge-package.sh
 create mode 100644 celements-admin-frontend/test/package-artifacts.test.ts

diff --git a/celements-admin-frontend/.npmrc b/celements-admin-frontend/.npmrc
new file mode 100644
index 000000000..7e1d4c5fe
--- /dev/null
+++ b/celements-admin-frontend/.npmrc
@@ -0,0 +1,2 @@
+@celements:registry=https://forge.celhosting.ch/api/packages/celements/npm/
+//forge.celhosting.ch/api/packages/celements/npm/:_authToken=${FORGE_TOKEN}
diff --git a/celements-admin-frontend/Jenkinsfile.npm b/celements-admin-frontend/Jenkinsfile.npm
new file mode 100644
index 000000000..0691f11a0
--- /dev/null
+++ b/celements-admin-frontend/Jenkinsfile.npm
@@ -0,0 +1,89 @@
+pipeline {
+  agent { label 'docker' }
+  options {
+    disableConcurrentBuilds()
+    skipDefaultCheckout(true)
+    timestamps()
+  }
+  parameters {
+    string(
+      name: 'GIT_REF',
+      defaultValue: '',
+      description: 'optional git ref to publish, e.g. commit SHA, branch name, or refs/tags/admin-frontend-v0.1.0'
+    )
+  }
+  stages {
+    stage('Checkout') {
+      steps {
+        script {
+          deleteDir()
+          String gitRef = params.GIT_REF?.trim()
+          def scmVars = checkout(!gitRef ? scm : [
+            $class: 'GitSCM',
+            branches: [[name: gitRef]],
+            userRemoteConfigs: scm.userRemoteConfigs
+          ])
+          env.GIT_REV = scmVars.GIT_COMMIT ?: GIT_COMMIT
+          if (!GIT_REV) error('GIT_COMMIT missing after checkout')
+          env.GIT_SHA = GIT_REV.take(7)
+        }
+      }
+    }
+    stage('Prepare Package') {
+      steps {
+        dir('celements-admin-frontend') {
+          script {
+            String declaredVersion = sh(
+              script: 'node -p "require(\'./package.json\').version"',
+              returnStdout: true
+            ).trim()
+            boolean snapshot = declaredVersion.toUpperCase().endsWith('-SNAPSHOT')
+            if (snapshot) {
+              String baseVersion = declaredVersion.substring(
+                0,
+                declaredVersion.length() - '-SNAPSHOT'.length()
+              )
+              env.PACKAGE_VERSION =
+                "${baseVersion}-snapshot.${env.BUILD_NUMBER}.${env.GIT_SHA}"
+              env.NPM_DIST_TAG = 'snapshot'
+            } else {
+              String expectedTag = "admin-frontend-v${declaredVersion}"
+              String releaseTag = sh(
+                script: "git tag --points-at HEAD --list '${expectedTag}'",
+                returnStdout: true
+              ).trim()
+              if (releaseTag != expectedTag) {
+                error("release package requires tag ${expectedTag} at HEAD")
+              }
+              env.PACKAGE_VERSION = declaredVersion
+              env.NPM_DIST_TAG = 'latest'
+            }
+            sh "npm version --no-git-tag-version '${env.PACKAGE_VERSION}'"
+          }
+        }
+      }
+    }
+    stage('Build and Verify') {
+      steps {
+        dir('celements-admin-frontend') {
+          sh 'npm ci'
+          sh 'npm run build'
+          sh 'npm pack --dry-run --json'
+        }
+      }
+    }
+    stage('Publish Package') {
+      steps {
+        dir('celements-admin-frontend') {
+          withCredentials([usernamePassword(
+            credentialsId: 'forge-credentials',
+            usernameVariable: 'FORGE_USER',
+            passwordVariable: 'FORGE_TOKEN'
+          )]) {
+            sh './scripts/publish-forge-package.sh'
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/celements-admin-frontend/README.md b/celements-admin-frontend/README.md
index d7c29d580..a24715e53 100644
--- a/celements-admin-frontend/README.md
+++ b/celements-admin-frontend/README.md
@@ -61,19 +61,21 @@ The container generates `config.js` from its runtime environment. `.env.local` i
 
 ## 📜 Scripts
 
-| Command              | Description                                                       |
-| -------------------- | ----------------------------------------------------------------- |
-| `npm run dev`        | Start dev server with concurrent type-checking and test watching  |
-| `npm run build`      | Type-check + run tests + build production bundle                  |
-| `npm run preview`    | Preview the production build locally                              |
-| `npm run test`       | Run unit tests once with Vitest                                   |
-| `npm run test-watch` | Run unit tests in watch mode                                      |
-| `npm run type-check` | Type-check `.vue` files with `vue-tsc`                            |
-| `npm run lint`       | Lint source files with ESLint                                     |
-| `npm run lint-fix`   | Auto-fix ESLint issues                                            |
-| `npm run format`     | Check code formatting with Prettier                               |
-| `npm run format-fix` | Auto-fix code formatting with Prettier                            |
-| `npm run pre-commit` | Run type-check, format check and lint (recommended as a git hook) |
+| Command                 | Description                                                       |
+| ----------------------- | ----------------------------------------------------------------- |
+| `npm run dev`           | Start dev server with concurrent type-checking and test watching  |
+| `npm run build`         | Type-check + run tests + build production bundle                  |
+| `npm run preview`       | Preview the production build locally                              |
+| `npm run test`          | Run unit tests once with Vitest                                   |
+| `npm run test-watch`    | Run unit tests in watch mode                                      |
+| `npm run type-check`    | Type-check `.vue` files with `vue-tsc`                            |
+| `npm run lint`          | Lint source files with ESLint                                     |
+| `npm run lint-fix`      | Auto-fix ESLint issues                                            |
+| `npm run format`        | Check code formatting with Prettier                               |
+| `npm run format-fix`    | Auto-fix code formatting with Prettier                            |
+| `npm run pre-commit`    | Run type-check, format check and lint (recommended as a git hook) |
+| `npm run publish:check` | Build and inspect the package without publishing                  |
+| `npm run publish:forge` | Publish an immutable version to the Forge npm registry            |
 
 ---
 
@@ -113,8 +115,68 @@ The supported `@celements/admin-frontend` entry points are:
 
 The custom element accepts `space-name`, `doc-name`, `locale`, and `local-dev`. It dispatches the
 bubbling `attachment-selection-change` event. Framework packages are peer dependencies so a
-downstream application supplies one Vue, Pinia, PrimeVue, vue-i18n, Vue Router, and VueFinder
-runtime.
+downstream application supplies one Vue, Pinia, PrimeVue, vue-i18n, and VueFinder runtime. Vue
+Router remains a development dependency for the deployable SPA shell and is not required by the
+published feature, island, or runtime entry points.
+
+`styles.css` is the complete supported stylesheet. It includes the scoped Celements
+application/Tailwind styles and the processed VueFinder styles; consumers must not import CSS from
+VueFinder or an internal package path separately.
+
+## Forge npm package
+
+The `@celements` scope is hosted at:
+
+```text
+https://forge.celhosting.ch/api/packages/celements/npm/
+```
+
+The checked-in `.npmrc` maps only the `@celements` scope to Forge. It reads `FORGE_TOKEN`, which
+must be an access token with package read access for consumers and package write access for
+publication. The npm Jenkins job uses the established `forge-credentials` username/password
+credential and exposes its password as `FORGE_TOKEN`.
+
+Install an immutable package version and its required peers (the example pins release `0.1.0`):
+
+```sh
+export FORGE_TOKEN='<package-read-token>'
+npm install --save-exact @celements/admin-frontend@0.1.0 \
+  vue@^3.5.30 pinia@^3.0.4 primevue@^4.5.4 vue-i18n@^11.3.0 vuefinder@^4.1.1
+```
+
+Use only declared package exports:
+
+```ts
+import { PageAttachments } from '@celements/admin-frontend/page-attachments';
+import { registerPageAttachmentsElement } from '@celements/admin-frontend/page-attachments-island';
+import { createCelementsApplication } from '@celements/admin-frontend/runtime';
+import '@celements/admin-frontend/styles.css';
+```
+
+`Jenkinsfile` continues to publish only the Docker image. Package publication is a separate Jenkins
+job using `Jenkinsfile.npm`:
+
+- a declared `x.y.z-SNAPSHOT` version becomes the unique immutable
+  `x.y.z-snapshot.<BUILD_NUMBER>.<GIT_SHA>` version and receives the `snapshot` dist-tag;
+- a declared release version `x.y.z` must be built from the exact `admin-frontend-vx.y.z` Git tag
+  and receives the `latest` dist-tag;
+- publication checks Forge first and refuses to overwrite an existing package version.
+
+Repository code cannot create that Jenkins job. CI operations must configure a job whose script
+path is `celements-admin-frontend/Jenkinsfile.npm`; until that infrastructure step exists, the
+repository has a verifiable publication path but no package is published automatically.
+
+Build and inspect the publishable package locally without credentials or publication:
+
+```sh
+npm run publish:check
+```
+
+From a clean, correctly versioned release checkout, the release job ultimately runs:
+
+```sh
+FORGE_TOKEN='<package-write-token>' NPM_DIST_TAG=latest npm run publish:forge
+```
 
 ---
 
diff --git a/celements-admin-frontend/package-lock.json b/celements-admin-frontend/package-lock.json
index 4d2698248..9742ec163 100644
--- a/celements-admin-frontend/package-lock.json
+++ b/celements-admin-frontend/package-lock.json
@@ -62,7 +62,6 @@
         "primevue": "^4.5.4",
         "vue": "^3.5.30",
         "vue-i18n": "^11.3.0",
-        "vue-router": "^5.0.4",
         "vuefinder": "^4.1.1"
       }
     },
diff --git a/celements-admin-frontend/package.json b/celements-admin-frontend/package.json
index f5a171dfd..9ffb898ab 100644
--- a/celements-admin-frontend/package.json
+++ b/celements-admin-frontend/package.json
@@ -6,6 +6,9 @@
   "files": [
     "dist"
   ],
+  "publishConfig": {
+    "registry": "https://forge.celhosting.ch/api/packages/celements/npm/"
+  },
   "exports": {
     ".": {
       "types": "./dist/types/public/runtime.d.ts",
@@ -27,11 +30,13 @@
   },
   "scripts": {
     "dev": "concurrently \"vite\" \"npm:type-check-watch\" \"npm:test-watch\"",
-    "build": "npm run type-check && npm run test && vite build && npm run build:package && npm run build:types",
+    "build": "npm run type-check && npm run build:deployable && npm run build:package && npm run build:types && npm run test:unit",
+    "build:deployable": "vite build",
     "build:package": "vite build --config vite.library.config.ts",
     "build:types": "vue-tsc -p tsconfig.app.json --declaration --emitDeclarationOnly --noEmit false --outDir dist/types --composite false",
     "preview": "vite preview",
-    "test": "vitest run",
+    "test": "npm run build:deployable && npm run build:package && npm run build:types && npm run test:unit",
+    "test:unit": "vitest run",
     "test-watch": "vitest",
     "type-check": "vue-tsc --build --force",
     "type-check-watch": "vue-tsc --build --force --watch --preserveWatchOutput",
@@ -39,7 +44,9 @@
     "lint-fix": "eslint . --fix",
     "format": "prettier --check src test",
     "format-fix": "prettier --write src test",
-    "pre-commit": "npm run type-check && npm run format && npm run lint"
+    "pre-commit": "npm run type-check && npm run format && npm run lint",
+    "publish:check": "npm run build && npm pack --dry-run --json",
+    "publish:forge": "./scripts/publish-forge-package.sh"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
@@ -63,7 +70,6 @@
     "primevue": "^4.5.4",
     "vue": "^3.5.30",
     "vue-i18n": "^11.3.0",
-    "vue-router": "^5.0.4",
     "vuefinder": "^4.1.1"
   },
   "devDependencies": {
diff --git a/celements-admin-frontend/postcss.config.js b/celements-admin-frontend/postcss.config.js
index 82a703c34..abafe65a8 100644
--- a/celements-admin-frontend/postcss.config.js
+++ b/celements-admin-frontend/postcss.config.js
@@ -40,6 +40,8 @@ function conditionalTailwind() {
 conditionalTailwind.postcss = true;
 
 const adminScope = ':where(.cel-admin-surface, .cel-admin-teleport)';
+const vueFinderTeleportScope =
+  ':where(.vuefinder__themer, .vuefinder__modal-layout, [data-sonner-toaster])';
 const globalSelectors = new Set([
   '*',
   ':after',
@@ -49,6 +51,49 @@ const globalSelectors = new Set([
   '::before',
   '::file-selector-button',
 ]);
+const vueFinderGlobalSelectorAllowlist = [
+  /^\.vuefinder(?:\b|__|--)/,
+  /^\.vf-/,
+  /^\.vue-(?:advanced-cropper|bounding-box|circle-stencil|draggable-area|handler-wrapper|line-wrapper|preview|rectangle-stencil|simple-handler|simple-line)(?:\b|__|--)/,
+  /^\.os-/,
+  /^\.sonner-/,
+  /^\.uppy-/,
+  /^\[data-overlayscrollbars/,
+  /^\[data-sonner-/,
+  /^:is\(\.vuefinder/,
+  /^:where\(\.vuefinder/,
+];
+
+function isExplicitlyNamespacedVueFinderSelector(selector) {
+  return vueFinderGlobalSelectorAllowlist.some((pattern) => pattern.test(selector));
+}
+
+function replaceDocumentRoot(selector, scope) {
+  const directionMatch = selector.match(/^html\[dir=(ltr|rtl)\]/);
+  if (directionMatch) {
+    return selector.replace(directionMatch[0], `${scope}:dir(${directionMatch[1]})`);
+  }
+  return selector
+    .replace(/^html(?:\[[^\]]+\])?\s*>\s*body/, scope)
+    .replace(/^html(?:\[[^\]]+\])?/, scope)
+    .replace(/^body/, scope);
+}
+
+function scopeSelector(selector, scope) {
+  if (selector === ':root' || selector === ':host') return scope;
+  if (/^(?:html|body)(?:\b|\[|:|\s|>)/.test(selector)) {
+    return replaceDocumentRoot(selector, scope);
+  }
+  const descendant = `${scope} ${selector}`;
+  if (/^[.[:]/.test(selector)) return `${descendant}, ${scope}${selector}`;
+  return descendant;
+}
+
+function scopeVueFinderSelector(selector) {
+  return [adminScope, vueFinderTeleportScope]
+    .map((scope) => scopeSelector(selector, scope))
+    .join(', ');
+}
 
 function scopeAdminStyles() {
   return {
@@ -61,16 +106,19 @@ function scopeAdminStyles() {
         if (rule.parent?.type === 'atrule' && rule.parent.name.includes('keyframes')) return;
         rule.selectors = rule.selectors.map((selector) => {
           const trimmed = selector.trim();
-          if (trimmed === ':root' || trimmed === ':host') return adminScope;
-          if (globalSelectors.has(trimmed)) return `${adminScope} ${trimmed}`;
-          if (
-            isApplicationStyles &&
-            !trimmed.includes('.cel-admin-surface') &&
-            !trimmed.includes('.cel-admin-teleport')
-          ) {
-            return `${adminScope} ${trimmed}, ${adminScope}${trimmed}`;
+          if (isApplicationStyles) {
+            if (trimmed === ':root' || trimmed === ':host') return adminScope;
+            if (globalSelectors.has(trimmed)) return `${adminScope} ${trimmed}`;
+            if (
+              !trimmed.includes('.cel-admin-surface') &&
+              !trimmed.includes('.cel-admin-teleport')
+            ) {
+              return scopeSelector(trimmed, adminScope);
+            }
+            return selector;
           }
-          return selector;
+          if (isExplicitlyNamespacedVueFinderSelector(trimmed)) return selector;
+          return scopeVueFinderSelector(trimmed);
         });
       });
     },
diff --git a/celements-admin-frontend/scripts/publish-forge-package.sh b/celements-admin-frontend/scripts/publish-forge-package.sh
new file mode 100755
index 000000000..ba780a920
--- /dev/null
+++ b/celements-admin-frontend/scripts/publish-forge-package.sh
@@ -0,0 +1,34 @@
+#!/bin/sh
+
+set -eu
+
+registry='https://forge.celhosting.ch/api/packages/celements/npm/'
+package_name=$(node -p "require('./package.json').name")
+package_version=$(node -p "require('./package.json').version")
+dist_tag=${NPM_DIST_TAG:-latest}
+
+case "$package_version" in
+  *-SNAPSHOT)
+    echo "refusing to publish mutable snapshot version $package_version" >&2
+    echo 'set a unique SemVer prerelease version before publishing' >&2
+    exit 1
+    ;;
+esac
+
+if [ -z "${FORGE_TOKEN:-}" ]; then
+  echo 'FORGE_TOKEN is required for Forge package publication' >&2
+  exit 1
+fi
+
+view_error=$(mktemp)
+trap 'rm -f "$view_error"' EXIT
+if npm view "$package_name@$package_version" version --registry "$registry" >/dev/null 2>"$view_error"; then
+  echo "refusing to overwrite published package $package_name@$package_version" >&2
+  exit 1
+fi
+if ! grep -q 'E404' "$view_error"; then
+  cat "$view_error" >&2
+  exit 1
+fi
+
+npm publish --registry "$registry" --tag "$dist_tag"
diff --git a/celements-admin-frontend/src/runtime/application.ts b/celements-admin-frontend/src/runtime/application.ts
index 9b4ae5a12..0595580f7 100644
--- a/celements-admin-frontend/src/runtime/application.ts
+++ b/celements-admin-frontend/src/runtime/application.ts
@@ -5,8 +5,7 @@ import { useLogger } from '@/utils/logger';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faPencil, faPlus, faTrashCan } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { createApp, type Component } from 'vue';
-import type { Router } from 'vue-router';
+import { createApp, type Component, type Plugin } from 'vue';
 import VueFinder from 'vuefinder';
 import Button, { type ButtonProps } from 'primevue/button';
 import PrimeVue from 'primevue/config';
@@ -15,7 +14,7 @@ import ConfirmationService from 'primevue/confirmationservice';
 export interface CelementsApplicationOptions {
   locale?: string;
   localDev?: boolean;
-  router?: Router;
+  router?: Plugin;
 }
 
 export function createCelementsApplication(
diff --git a/celements-admin-frontend/test/package-artifacts.test.ts b/celements-admin-frontend/test/package-artifacts.test.ts
new file mode 100644
index 000000000..98700e9d9
--- /dev/null
+++ b/celements-admin-frontend/test/package-artifacts.test.ts
@@ -0,0 +1,146 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+import postcss from 'postcss';
+import { describe, expect, test } from 'vitest';
+
+const projectFile = (...path: string[]) => resolve(process.cwd(), ...path);
+const packageCssPath = projectFile('dist/package/styles.css');
+const deployableCssPath = projectFile('dist/assets/vendor.css');
+const deployableApplicationCssPath = projectFile('dist/assets/embedded.css');
+const builtArtifactsAvailable = [
+  packageCssPath,
+  deployableCssPath,
+  deployableApplicationCssPath,
+].every(existsSync);
+const packageCss = builtArtifactsAvailable ? readFileSync(packageCssPath, 'utf8') : '';
+const deployableCss = builtArtifactsAvailable ? readFileSync(deployableCssPath, 'utf8') : '';
+const deployableApplicationCss = builtArtifactsAvailable
+  ? readFileSync(deployableApplicationCssPath, 'utf8')
+  : '';
+const explicitlyNamespacedVendorSelectors = [
+  /^\.vuefinder(?:\b|__|--)/,
+  /^\.vf-/,
+  /^\.vue-(?:advanced-cropper|bounding-box|circle-stencil|draggable-area|handler-wrapper|line-wrapper|preview|rectangle-stencil|simple-handler|simple-line)(?:\b|__|--)/,
+  /^\.os-/,
+  /^\.sonner-/,
+  /^\.uppy-/,
+  /^\[data-overlayscrollbars/,
+  /^\[data-sonner-/,
+  /^:is\(\.vuefinder/,
+  /^:where\(\.vuefinder/,
+];
+
+const selectors = (css: string) => {
+  const result: string[] = [];
+  postcss.parse(css).walkRules((rule) => {
+    if (rule.parent?.type === 'atrule' && rule.parent.name.includes('keyframes')) return;
+    result.push(...(rule.selectors ?? []).map((selector) => selector.trim()));
+  });
+  return result;
+};
+
+const isContainedOrNamespaced = (selector: string) =>
+  selector.includes('.cel-admin-surface') ||
+  selector.includes('.cel-admin-teleport') ||
+  /\[data-v-[a-f0-9]+\]/.test(selector) ||
+  explicitlyNamespacedVendorSelectors.some((pattern) => pattern.test(selector));
+
+const expectContainedCss = (css: string) => {
+  const builtSelectors = selectors(css);
+  expect(builtSelectors.filter((selector) => !isContainedOrNamespaced(selector))).toEqual([]);
+  expect(builtSelectors).not.toContain(':root');
+  expect(builtSelectors).not.toContain('.disabled');
+  expect(builtSelectors).not.toContain('.fade-enter-active');
+  expect(builtSelectors).not.toContain('.fade-leave-active');
+  expect(builtSelectors.filter((selector) => /^(?:html|body|h[1-6]|\*)\b/.test(selector))).toEqual(
+    []
+  );
+};
+
+describe.skipIf(!builtArtifactsAvailable)('published stylesheet', () => {
+  test('contains processed application and VueFinder CSS without internal imports', () => {
+    expect(packageCss).toContain('.cel-admin-surface');
+    expect(packageCss).toContain('.vuefinder__menubar');
+    expect(packageCss).toContain('.vuefinder__preview-modal');
+    expect(
+      postcss
+        .parse(packageCss)
+        .nodes.some((node) => node.type === 'atrule' && node.name === 'import')
+    ).toBe(false);
+    expect(readFileSync(projectFile('dist/package/styles.js'), 'utf8')).not.toContain('vuefinder');
+  });
+
+  test('contains generic vendor and reset selectors within an admin boundary', () => {
+    expectContainedCss(packageCss);
+    expect(packageCss).toMatch(/\.cel-admin-surface[^{}]*\.cropper-viewers/);
+    expect(packageCss).toMatch(/\.cel-admin-surface[^{}]*\.disabled/);
+  });
+
+  test('retains VueFinder and PrimeVue teleport styling', () => {
+    const builtSelectors = selectors(packageCss);
+    expect(
+      builtSelectors.some(
+        (selector) =>
+          selector.includes('.vuefinder__modal-layout') && selector.includes('.fade-enter-active')
+      )
+    ).toBe(true);
+    expect(
+      builtSelectors.some(
+        (selector) => selector.includes('.cel-admin-teleport') && selector.includes('.fixed')
+      )
+    ).toBe(true);
+    expect(builtSelectors.some((selector) => selector.startsWith('[data-sonner-toaster]'))).toBe(
+      true
+    );
+  });
+});
+
+test.skipIf(!builtArtifactsAvailable)(
+  'deployable VueFinder CSS uses the same containment contract',
+  () => {
+    expect(deployableCss).toContain('.vuefinder__menubar');
+    expectContainedCss(deployableCss);
+    expectContainedCss(deployableApplicationCss);
+  }
+);
+
+test.skipIf(!builtArtifactsAvailable)(
+  'published package exposes only supported entry points and built targets',
+  () => {
+    const packageJson = JSON.parse(readFileSync(projectFile('package.json'), 'utf8')) as {
+      exports: Record<string, string | Record<string, string>>;
+    };
+    expect(Object.keys(packageJson.exports)).toEqual([
+      '.',
+      './runtime',
+      './page-attachments',
+      './page-attachments-island',
+      './styles.css',
+    ]);
+    expect(packageJson.exports).not.toHaveProperty('./src/*');
+    for (const target of Object.values(packageJson.exports).flatMap((entry) =>
+      typeof entry === 'string' ? [entry] : Object.values(entry)
+    )) {
+      expect(existsSync(projectFile(target))).toBe(true);
+    }
+  }
+);
+
+test('legacy attachment templates retain island and asynchronous loading paths', () => {
+  const templateRoot = projectFile('..', 'celements-webapp/src/main/webapp/templates');
+  const inline = readFileSync(resolve(templateRoot, 'celTemplates/attachmentsinline.vm'), 'utf8');
+  const editorTab = readFileSync(
+    resolve(templateRoot, 'celEditorTabs/loadTabAttachments.vm'),
+    'utf8'
+  );
+  const island = readFileSync(
+    resolve(templateRoot, 'celTemplates/pageAttachmentsIsland.vm'),
+    'utf8'
+  );
+  expect(inline).toContain("#parse('celTemplates/pageAttachmentsIsland.vm')");
+  expect(editorTab).toContain("#parse('celTemplates/pageAttachmentsIsland.vm')");
+  expect(island).toContain('class="cel_lazyloadJS_exec"');
+  expect(island).toContain("import('$pageAttachmentsModule')");
+  expect(island).toContain('<cel-page-attachments');
+});
diff --git a/celements-admin-frontend/test/page-attachments.test.ts b/celements-admin-frontend/test/page-attachments.test.ts
index 50410960d..15cd18ef6 100644
--- a/celements-admin-frontend/test/page-attachments.test.ts
+++ b/celements-admin-frontend/test/page-attachments.test.ts
@@ -84,15 +84,17 @@ describe('PageAttachments feature', () => {
     const wrapper = mount(PageAttachments, {
       props: { spaceName: 'Space', docName: 'Page' },
       slots: {
-        'attachment-actions': ({ document, selectedAttachments }) =>
+        'attachment-actions': ({ document, path, count, selectedAttachments }) =>
           h(
             'button',
             { class: 'downstream-action' },
-            `${document.spaceName}.${document.docName}:${selectedAttachments[0].basename}`
+            `${document.spaceName}.${document.docName}:${path}:${count}:${selectedAttachments[0].basename}`
           ),
       },
     });
-    expect(wrapper.get('.downstream-action').text()).toBe('Space.Page:image.jpg');
+    expect(wrapper.get('.downstream-action').text()).toBe(
+      'Space.Page:attachments://Space/Page:1:image.jpg'
+    );
     await wrapper.get('.select').trigger('click');
     expect(wrapper.emitted('selectionChange')?.[0]?.[0]).toEqual({
       document: { spaceName: 'Space', docName: 'Page' },
@@ -158,6 +160,23 @@ describe('cel-page-attachments island', () => {
     const secondApp = createCelementsApplication({ render: () => h('div') });
     expect(firstApp.pinia).not.toBe(secondApp.pinia);
   });
+
+  test('remounts with updated document attributes', () => {
+    const element = document.createElement(
+      PAGE_ATTACHMENTS_ELEMENT_NAME
+    ) as CelPageAttachmentsElement;
+    element.spaceName = 'Space';
+    element.docName = 'One';
+    document.body.append(element);
+    const firstFinderId = element.querySelector<HTMLElement>('[data-finder-id]')?.dataset.finderId;
+    element.docName = 'Two';
+    expect(element.querySelector('[data-driver]')?.getAttribute('data-driver')).toBe(
+      '/api/attachments/Space/Two'
+    );
+    expect(element.querySelector<HTMLElement>('[data-finder-id]')?.dataset.finderId).not.toBe(
+      firstFinderId
+    );
+  });
 });
 
 test('registration, build entries, and CSS containment are explicit', () => {
@@ -179,3 +198,19 @@ test('registration, build entries, and CSS containment are explicit', () => {
   expect(document.head.querySelectorAll('#celements-admin-vendor-styles')).toHaveLength(1);
   expect(document.head.querySelectorAll('#celements-admin-application-styles')).toHaveLength(1);
 });
+
+test('PageAttachments and the island runtime remain router-independent', () => {
+  const feature = readFileSync(
+    resolve(process.cwd(), 'src/features/page-attachments/PageAttachments.vue'),
+    'utf8'
+  );
+  const island = readFileSync(
+    resolve(process.cwd(), 'src/islands/page-attachments-element.ts'),
+    'utf8'
+  );
+  const runtime = readFileSync(resolve(process.cwd(), 'src/runtime/application.ts'), 'utf8');
+  expect(feature).not.toContain('vue-router');
+  expect(feature).not.toContain('useRoute');
+  expect(island).not.toContain('vue-router');
+  expect(runtime).not.toContain('vue-router');
+});
diff --git a/celements-admin-frontend/vite.library.config.ts b/celements-admin-frontend/vite.library.config.ts
index 8475e5d07..ce843a9cd 100644
--- a/celements-admin-frontend/vite.library.config.ts
+++ b/celements-admin-frontend/vite.library.config.ts
@@ -4,6 +4,10 @@ import vue from '@vitejs/plugin-vue';
 import { defineConfig } from 'vite';
 
 const peerDependencies = ['pinia', 'primevue', 'vue', 'vue-i18n', 'vue-router', 'vuefinder'];
+const bundledPeerStyles = new Set(['vuefinder/dist/style.css', 'vuefinder/dist/vuefinder.css']);
+
+const isBundledPeerStyle = (id: string) =>
+  bundledPeerStyles.has(id) || id.endsWith('/node_modules/vuefinder/dist/vuefinder.css');
 
 export default defineConfig({
   define: {
@@ -34,6 +38,7 @@ export default defineConfig({
     outDir: 'dist/package',
     rollupOptions: {
       external: (id) =>
+        !isBundledPeerStyle(id) &&
         peerDependencies.some((dependency) => id === dependency || id.startsWith(`${dependency}/`)),
       output: {
         entryFileNames: '[name].js',
diff --git a/docs/architecture/decisions/0001-router-independent-admin-features-and-vue-islands.md b/docs/architecture/decisions/0001-router-independent-admin-features-and-vue-islands.md
index 38abf152c..0d4b67296 100644
--- a/docs/architecture/decisions/0001-router-independent-admin-features-and-vue-islands.md
+++ b/docs/architecture/decisions/0001-router-independent-admin-features-and-vue-islands.md
@@ -73,9 +73,16 @@ The supported `@celements/admin-frontend` imports are:
 
 Internal `src/*` paths are not public API.
 
-Vue, Pinia, PrimeVue, vue-i18n, Vue Router, and VueFinder are peer dependencies for the published
-library. The deployable SPA/island assets remain self-contained, while a separate library build
-externalizes these peers so downstream consumers do not load a second Vue runtime.
+Vue, Pinia, PrimeVue, vue-i18n, and VueFinder are peer dependencies for the published library. Vue
+Router remains a development dependency for the deployable SPA shell and is not a package peer
+because no public feature, island, or runtime entry imports it. The deployable SPA/island assets
+remain self-contained, while a separate library build externalizes peer JavaScript so downstream
+consumers do not load a second Vue runtime.
+
+The `styles.css` entry is a complete stylesheet contract: it contains the scoped Celements
+application/Tailwind styles and processed VueFinder CSS. VueFinder JavaScript remains external, but
+its CSS is deliberately bundled so consumers never need an internal or undocumented stylesheet
+import.
 
 ### Use a dedicated custom element for the attachment island
 
@@ -112,9 +119,44 @@ dialogs and overlays outside the component subtree; Shadow DOM would separate th
 required styles and tokens.
 
 Tailwind preflight is excluded. Application utility selectors, heading rules, theme tokens, and
-generic vendor reset selectors are scoped to `.cel-admin-surface` and `.cel-admin-teleport`.
-VueFinder's namespaced selectors remain available for its teleported UI. Application styles must not
-introduce unscoped `:root`, heading, or generic reset rules into surrounding legacy markup.
+generic vendor reset/selectors are scoped to `.cel-admin-surface` and `.cel-admin-teleport`.
+Generic VueFinder rules also cover the known namespaced teleport roots `.vuefinder__themer`,
+`.vuefinder__modal-layout`, and `[data-sonner-toaster]` so modals, dropdowns, notifications, and
+transitions retain their styling outside the feature subtree.
+
+Only this deliberate vendor namespace allowlist remains global:
+
+- `.vuefinder*` and `.vf-*`;
+- Vue Advanced Cropper's specific `vue-*` component prefixes;
+- `.os-*` and `[data-overlayscrollbars*]`;
+- `.sonner-*` and `[data-sonner-*]`;
+- `.uppy-*`.
+
+Everything else from VueFinder, including `.disabled`, `.fade-*`, `.cropper-viewers`, utility
+classes, raw document selectors, and reset selectors, is rewritten through an admin or known
+teleport boundary. Vue component selectors carrying a compiler-generated `data-v-*` attribute are
+also contained by that unique component attribute. Built-artifact tests apply the same allowlist to
+both the package stylesheet and the deployable vendor stylesheet. Neither artifact may introduce
+unscoped `:root`, heading, document, generic reset, or generic transition rules into surrounding
+legacy markup.
+
+### Publish immutable packages through Forge npm
+
+The published scope is `@celements` at
+`https://forge.celhosting.ch/api/packages/celements/npm/`. Consumers and CI authenticate with a
+Forge access token through `FORGE_TOKEN`. Jenkins obtains it from the existing
+`forge-credentials` username/password credential, using the password value as the token.
+
+Docker delivery and npm delivery remain separate pipelines. The existing `Jenkinsfile` publishes
+the deployable image; `celements-admin-frontend/Jenkinsfile.npm` is the package release path.
+Snapshot source versions are converted to unique
+`x.y.z-snapshot.<BUILD_NUMBER>.<GIT_SHA>` versions and published with the `snapshot` dist-tag.
+Release versions require the exact `admin-frontend-vx.y.z` Git tag and use `latest`. The publish
+script checks the registry and refuses to overwrite an existing version.
+
+CI operations must configure a separate Jenkins job with
+`celements-admin-frontend/Jenkinsfile.npm` as its script path. Adding that job is an explicit
+infrastructure dependency; the existing Docker job does not discover or execute the npm pipeline.
 
 ## Consequences