From bfa69ca4f78481ca50a8ce5801c179c1abda97ec Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Wed, 12 Nov 2025 16:35:17 +0100
Subject: [PATCH 1/6] feat: share links and passwords in embed mode

---
 .../src/components/CreateLinkModal.vue        | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/web-pkg/src/components/CreateLinkModal.vue b/packages/web-pkg/src/components/CreateLinkModal.vue
index 6c01302f0a1..e94de6f52e6 100644
--- a/packages/web-pkg/src/components/CreateLinkModal.vue
+++ b/packages/web-pkg/src/components/CreateLinkModal.vue
@@ -106,7 +106,7 @@
                   isFolder
                 })
               "
-              >{{ $gettext('Copy link and password') }}
+              >{{ confirmPasswordButtonText }}
             </oc-button>
           </li>
         </oc-list>
@@ -193,6 +193,13 @@ export default defineComponent({
       return $gettext('Copy link')
     })
 
+    const confirmPasswordButtonText = computed(() => {
+      if (unref(isEmbedEnabled)) {
+        return $gettext('Share link(s) and password(s)')
+      }
+      return $gettext('Copy link and password')
+    })
+
     const passwordInputKey = ref(uuidV4())
     const roleRefs = ref<Record<string, RoleRef>>({})
 
@@ -265,12 +272,21 @@ export default defineComponent({
       const result = await createLinks()
 
       const succeeded = result.filter(({ status }) => status === 'fulfilled')
+      // **DEPRECATED**: Always emit the share url for backwards compatibility
       if (succeeded.length && unref(isEmbedEnabled)) {
         postMessage<string[]>(
           'owncloud-embed:share',
           (succeeded as PromiseFulfilledResult<LinkShare>[]).map(({ value }) => value.webUrl)
         )
       }
+      // Always emit new event with objects, include password only when copyPassword is enabled
+      postMessage<Array<{ url: string; password?: string }>>(
+        'owncloud-embed:share-links',
+        (succeeded as PromiseFulfilledResult<LinkShare>[]).map(({ value }) => ({
+          url: value.webUrl,
+          ...(options.copyPassword && { password: password.value })
+        }))
+      )
 
       const userFacingErrors: Error[] = []
       const failed = result.filter(({ status }) => status === 'rejected')
@@ -350,6 +366,7 @@ export default defineComponent({
       updatePassword,
       getLinkRoleByType,
       confirmButtonText,
+      confirmPasswordButtonText,
       isAdvancedMode,
       setAdvancedMode,
       onExpiryDateChanged,

From 5d4052dc93cb19a107b2e23cdfd5e3fa6d64e919 Mon Sep 17 00:00:00 2001
From: Rodrigo <rodrigo.pavao.coffani.nunes@cern.ch>
Date: Mon, 2 Feb 2026 10:22:52 +0100
Subject: [PATCH 2/6] feat: embed messages origin configurable via URI

---
 packages/web-pkg/src/composables/embedMode/useEmbedMode.ts | 4 +++-
 packages/web-runtime/src/container/bootstrap.ts            | 6 ++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts b/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts
index f7c5ce2ceda..fc631d0f384 100644
--- a/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts
+++ b/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts
@@ -39,7 +39,9 @@ export const useEmbedMode = () => {
     return configStore.options.embed?.fileTypes
   })
 
-  const messagesTargetOrigin = computed(() => configStore.options.embed?.messagesOrigin)
+  const messagesTargetOrigin = computed(() => {
+    return configStore.options.embed?.messagesOrigin
+  })
 
   const isDelegatingAuthentication = computed(
     () => unref(isEnabled) && configStore.options.embed?.delegateAuthentication
diff --git a/packages/web-runtime/src/container/bootstrap.ts b/packages/web-runtime/src/container/bootstrap.ts
index 7514ed345c3..2715247c645 100644
--- a/packages/web-runtime/src/container/bootstrap.ts
+++ b/packages/web-runtime/src/container/bootstrap.ts
@@ -125,6 +125,12 @@ const getEmbedConfigFromQuery = (
     config.delegateAuthenticationOrigin = delegateAuthenticationOrigin
   }
 
+  const messagesOrigin = getQueryParam('embed-messages-origin')
+
+  if (messagesOrigin) {
+    config.messagesOrigin = messagesOrigin
+  }
+
   return config
 }
 

From 221fad963c4a045c1f6687c86f351ab61776478e Mon Sep 17 00:00:00 2001
From: Diogo Castro <diogo.castro@cern.ch>
Date: Wed, 13 May 2026 15:34:27 +0200
Subject: [PATCH 3/6] Returns signed urls on embed mode file picker

To allow them to be downloaded without the user token.
---
 .../components/EmbedActions/EmbedActions.vue  | 66 +++++++++++++++----
 1 file changed, 52 insertions(+), 14 deletions(-)

diff --git a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
index ca7eece48fb..74748f35b07 100644
--- a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
+++ b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
@@ -36,9 +36,9 @@
         data-testid="button-select"
         variation="inverse"
         appearance="filled"
-        :disabled="areSelectActionsDisabled"
+        :disabled="areSelectActionsDisabled || signing"
         @click="emitSelect"
-        >{{ selectLabel }}
+        >{{ signing ? $gettext('Preparing…') : selectLabel }}
       </oc-button>
     </div>
   </section>
@@ -51,11 +51,14 @@ import {
   FileAction,
   routeToContextQuery,
   useAbility,
+  useCapabilityStore,
+  useClientService,
   useEmbedMode,
   useFileActionsCreateLink,
   useResourcesStore,
   useRouter,
-  useSpacesStore
+  useSpacesStore,
+  useUserStore
 } from '@ownclouders/web-pkg'
 import { Resource } from '@ownclouders/web-client'
 import { useGettext } from 'vue3-gettext'
@@ -87,6 +90,11 @@ export default defineComponent({
       return unref(selectedResources)
     })
 
+    const capabilityStore = useCapabilityStore()
+    const clientService = useClientService()
+    const userStore = useUserStore()
+    const signing = ref(false)
+
     const { actions: createLinkActions } = useFileActionsCreateLink({ enforceModal: true })
     const createLinkAction = computed<FileAction>(() => unref(createLinkActions)[0])
 
@@ -102,22 +110,51 @@ export default defineComponent({
       return [0, unref(fileName).split('.')[0].length] as [number, number]
     })
 
-    const emitSelect = (): void => {
-      if (unref(chooseFileName)) {
-        postMessage<embedModeLocationPickMessageData>('owncloud-embed:select', {
-          resources: JSON.parse(JSON.stringify(selectedFiles.value)),
-          fileName: unref(fileName),
-          locationQuery: JSON.parse(JSON.stringify(routeToContextQuery(unref(router.currentRoute))))
-        })
+    const withSignedUrls = async (resources: Resource[]): Promise<Resource[]> => {
+      if (!capabilityStore.supportUrlSigning || !unref(space)) {
+        return resources
       }
 
-      // TODO: adjust type to embedModeLocationPickMessageData later (breaking)
-      postMessage<Resource[]>(
-        'owncloud-embed:select',
-        JSON.parse(JSON.stringify(selectedFiles.value))
+      return Promise.all(
+        resources.map(async (resource) => {
+          if (resource.type === 'folder') {
+            return resource
+          }
+          try {
+            const signedUrl = await clientService.webdav.getFileUrl(unref(space), resource, {
+              isUrlSigningEnabled: true,
+              username: userStore.user?.onPremisesSamAccountName
+            })
+            return { ...resource, downloadURL: signedUrl }
+          } catch {
+            return resource
+          }
+        })
       )
     }
 
+    const emitSelect = async (): Promise<void> => {
+      signing.value = true
+      try {
+        const resources = await withSignedUrls(JSON.parse(JSON.stringify(selectedFiles.value)))
+
+        if (unref(chooseFileName)) {
+          postMessage<embedModeLocationPickMessageData>('owncloud-embed:select', {
+            resources,
+            fileName: unref(fileName),
+            locationQuery: JSON.parse(
+              JSON.stringify(routeToContextQuery(unref(router.currentRoute)))
+            )
+          })
+        }
+
+        // TODO: adjust type to embedModeLocationPickMessageData later (breaking)
+        postMessage<Resource[]>('owncloud-embed:select', resources)
+      } finally {
+        signing.value = false
+      }
+    }
+
     const emitCancel = (): void => {
       postMessage<null>('owncloud-embed:cancel', null)
     }
@@ -133,6 +170,7 @@ export default defineComponent({
       selectLabel,
       emitCancel,
       emitSelect,
+      signing,
       space,
       createLinkAction,
       fileName,

From fb698635e62fcbb8d894003f2000f375b42e4b9b Mon Sep 17 00:00:00 2001
From: Diogo Castro <diogo.castro@cern.ch>
Date: Wed, 13 May 2026 15:55:04 +0200
Subject: [PATCH 4/6] Inline attach embed mode

Allows embeding the UI and delegating the attach action (via a post message).
Users have to select files, and the application will then ask cernbox to return the list of files selected with the respective download urls.
---
 .../components/EmbedActions/EmbedActions.vue  | 26 ++++++++++++++++---
 .../src/composables/embedMode/useEmbedMode.ts |  5 ++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
index 74748f35b07..5f5696d0abe 100644
--- a/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
+++ b/packages/web-app-files/src/components/EmbedActions/EmbedActions.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="files-embed-actions oc-width-1-1 oc-flex oc-flex-middle oc-flex-between oc-my-s">
+  <section v-if="!isInlineAttach" class="files-embed-actions oc-width-1-1 oc-flex oc-flex-middle oc-flex-between oc-my-s">
     <oc-text-input
       v-if="chooseFileName"
       v-model="fileName"
@@ -45,7 +45,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, unref } from 'vue'
+import { computed, defineComponent, onMounted, onUnmounted, ref, unref } from 'vue'
 import {
   embedModeLocationPickMessageData,
   FileAction,
@@ -71,6 +71,8 @@ export default defineComponent({
     const {
       isLocationPicker,
       isFilePicker,
+      isInlineAttach,
+      messagesTargetOrigin,
       postMessage,
       chooseFileName,
       chooseFileNameSuggestion
@@ -87,7 +89,11 @@ export default defineComponent({
         return [unref(currentFolder)]
       }
 
-      return unref(selectedResources)
+      const resources = unref(selectedResources)
+      if (isInlineAttach.value) {
+        return resources.filter((r) => !r.isFolder)
+      }
+      return resources
     })
 
     const capabilityStore = useCapabilityStore()
@@ -159,6 +165,19 @@ export default defineComponent({
       postMessage<null>('owncloud-embed:cancel', null)
     }
 
+    const handleRequestSelection = (event: MessageEvent): void => {
+      if (unref(messagesTargetOrigin) && event.origin !== unref(messagesTargetOrigin)) {
+        return
+      }
+      if (event.data?.name !== 'owncloud-embed:request-selection') {
+        return
+      }
+      emitSelect()
+    }
+
+    onMounted(() => window.addEventListener('message', handleRequestSelection))
+    onUnmounted(() => window.removeEventListener('message', handleRequestSelection))
+
     return {
       chooseFileName,
       chooseFileNameSuggestion,
@@ -167,6 +186,7 @@ export default defineComponent({
       canCreatePublicLinks,
       isLocationPicker,
       isFilePicker,
+      isInlineAttach,
       selectLabel,
       emitCancel,
       emitSelect,
diff --git a/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts b/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts
index fc631d0f384..1dfa1e00865 100644
--- a/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts
+++ b/packages/web-pkg/src/composables/embedMode/useEmbedMode.ts
@@ -35,6 +35,10 @@ export const useEmbedMode = () => {
     return configStore.options.embed?.target === 'file'
   })
 
+  const isInlineAttach = computed(() => {
+    return configStore.options.embed?.target === 'inline-attach'
+  })
+
   const fileTypes = computed(() => {
     return configStore.options.embed?.fileTypes
   })
@@ -75,6 +79,7 @@ export const useEmbedMode = () => {
     chooseFileName,
     chooseFileNameSuggestion,
     isFilePicker,
+    isInlineAttach,
     messagesTargetOrigin,
     isDelegatingAuthentication,
     fileTypes,

From 9f7210e595ceece3dc797473df49ea7acca7a2f7 Mon Sep 17 00:00:00 2001
From: Diogo Castro <diogo.castro@cern.ch>
Date: Wed, 13 May 2026 15:55:50 +0200
Subject: [PATCH 5/6] Do not allow folder selection for inline attach embed
 mode

Since folders cannot be downloaded, it prevents their selection to make it clear to users.
---
 .../src/components/FilesList/ResourceTable.vue | 10 ++++++++--
 .../src/components/FilesList/ResourceTiles.vue | 18 ++++++++++++------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index 43b30564ab8..7bc843f214d 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -63,7 +63,7 @@
         :label="getResourceCheckboxLabel(item)"
         :label-hidden="true"
         size="large"
-        :disabled="isResourceDisabled(item)"
+        :disabled="isResourceDisabled(item) || (isInlineAttach && item.isFolder)"
         :model-value="isResourceSelected(item)"
         :outline="isLatestSelectedItem(item)"
         @click.stop="toggleSelection(item.id)"
@@ -547,6 +547,7 @@ export default defineComponent({
     const {
       isLocationPicker,
       isFilePicker,
+      isInlineAttach,
       postMessage,
       isEnabled: isEmbedModeEnabled,
       fileTypes: embedModeFileTypes
@@ -683,6 +684,7 @@ export default defineComponent({
       ...folderLinkUtils,
       postMessage,
       isFilePicker,
+      isInlineAttach,
       isLocationPicker,
       isEmbedModeEnabled,
       emitSelect,
@@ -1142,7 +1144,11 @@ export default defineComponent({
       }
       this.emitSelect(
         this.resources
-          .filter((resource) => !this.disabledResources.includes(resource.id))
+          .filter(
+            (resource) =>
+              !this.disabledResources.includes(resource.id) &&
+              !(this.isInlineAttach && resource.isFolder)
+          )
           .map((resource) => resource.id)
       )
     },
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
index f05cc7960e5..f26900e3827 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
@@ -61,7 +61,7 @@
               :label-hidden="true"
               size="large"
               class="oc-flex-inline oc-p-s"
-              :disabled="!isSpaceResource(resource) && isResourceDisabled(resource)"
+              :disabled="!isSpaceResource(resource) && (isResourceDisabled(resource) || (isInlineAttach && resource.isFolder))"
               :model-value="isResourceSelected(resource)"
               @click.stop.prevent="toggleTile([resource, $event])"
             />
@@ -235,6 +235,7 @@ export default defineComponent({
       fileTypes: embedModeFileTypes,
       isLocationPicker,
       isFilePicker,
+      isInlineAttach,
       postMessage
     } = useEmbedMode()
     const viewSizeMax = useViewSizeMax()
@@ -332,14 +333,14 @@ export default defineComponent({
     })
 
     const isResourceClickable = (resource: Resource) => {
-      if (isResourceDisabled(resource)) {
-        return false
-      }
-
       if (resource.isFolder) {
         return true
       }
 
+      if (isResourceDisabled(resource)) {
+        return false
+      }
+
       if (!resource.canDownload() && !canBeOpenedWithSecureView(resource)) {
         return false
       }
@@ -387,7 +388,11 @@ export default defineComponent({
       emit(
         'update:selectedIds',
         props.resources
-          .filter((resource) => !unref(disabledResourceIds).includes(resource.id))
+          .filter(
+            (resource) =>
+              !unref(disabledResourceIds).includes(resource.id) &&
+              !(unref(isInlineAttach) && resource.isFolder)
+          )
           .map((resource) => resource.id)
       )
     }
@@ -622,6 +627,7 @@ export default defineComponent({
       ghostTilesCount,
       getIndicators,
       isFilePicker,
+      isInlineAttach,
       isLocationPicker,
       isResourceDisabled,
       isSpaceResource,

From 827a4c31571a234bea734096bceb399b9a74d3a2 Mon Sep 17 00:00:00 2001
From: Diogo Castro <diogo.castro@cern.ch>
Date: Wed, 13 May 2026 15:56:21 +0200
Subject: [PATCH 6/6] Add embed demo page for debugging

---
 dev/embed-demo.html | 758 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 758 insertions(+)
 create mode 100644 dev/embed-demo.html

diff --git a/dev/embed-demo.html b/dev/embed-demo.html
new file mode 100644
index 00000000000..fad947b6635
--- /dev/null
+++ b/dev/embed-demo.html
@@ -0,0 +1,758 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CERNBox Embed Demo</title>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        font-size: 13px;
+        background: #1a1a2e;
+        color: #e0e0e0;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      header {
+        background: #16213e;
+        border-bottom: 1px solid #0f3460;
+        padding: 10px 16px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-shrink: 0;
+      }
+
+      header h1 {
+        font-size: 15px;
+        font-weight: 600;
+        color: #e94560;
+      }
+
+      .main {
+        display: flex;
+        flex: 1;
+        overflow: hidden;
+      }
+
+      /* ── Sidebar ── */
+      .sidebar {
+        width: 320px;
+        flex-shrink: 0;
+        background: #16213e;
+        border-right: 1px solid #0f3460;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      .section {
+        border-bottom: 1px solid #0f3460;
+        padding: 12px;
+      }
+
+      .section-title {
+        font-size: 10px;
+        font-weight: 700;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        color: #888;
+        margin-bottom: 8px;
+      }
+
+      label {
+        display: block;
+        color: #aaa;
+        margin-bottom: 3px;
+      }
+
+      input[type='text'],
+      select {
+        width: 100%;
+        background: #0f3460;
+        border: 1px solid #1a4a8a;
+        border-radius: 4px;
+        color: #e0e0e0;
+        padding: 5px 8px;
+        font-size: 12px;
+        margin-bottom: 8px;
+      }
+
+      input[type='text']:focus,
+      select:focus {
+        outline: none;
+        border-color: #e94560;
+      }
+
+      .checkbox-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-bottom: 8px;
+        color: #ccc;
+      }
+
+      input[type='checkbox'] {
+        accent-color: #e94560;
+      }
+
+      button {
+        background: #e94560;
+        border: none;
+        border-radius: 4px;
+        color: #fff;
+        cursor: pointer;
+        font-size: 12px;
+        font-weight: 600;
+        padding: 6px 12px;
+      }
+
+      button:hover {
+        background: #c73652;
+      }
+
+      button.secondary {
+        background: #0f3460;
+        border: 1px solid #1a4a8a;
+      }
+
+      button.secondary:hover {
+        background: #1a4a8a;
+      }
+
+      button.icon-btn {
+        background: none;
+        border: 1px solid #1a4a8a;
+        border-radius: 3px;
+        padding: 3px 7px;
+        font-size: 11px;
+      }
+
+      button.icon-btn:hover {
+        background: #0f3460;
+      }
+
+      .btn-row {
+        display: flex;
+        gap: 6px;
+      }
+
+      /* ── Token section ── */
+      #token-section {
+        display: none;
+      }
+
+      /* ── Files list ── */
+      .files-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: 12px;
+      }
+
+      .empty-state {
+        color: #555;
+        font-style: italic;
+        font-size: 12px;
+      }
+
+      .file-item {
+        background: #0f3460;
+        border: 1px solid #1a4a8a;
+        border-radius: 6px;
+        padding: 8px 10px;
+        margin-bottom: 6px;
+      }
+
+      .file-name {
+        font-weight: 600;
+        color: #e0e0e0;
+        margin-bottom: 4px;
+        word-break: break-all;
+      }
+
+      .file-meta {
+        color: #888;
+        font-size: 11px;
+        margin-bottom: 6px;
+        word-break: break-all;
+      }
+
+      .file-actions {
+        display: flex;
+        gap: 5px;
+        flex-wrap: wrap;
+      }
+
+      .link-item {
+        background: #0f3460;
+        border: 1px solid #1a4a8a;
+        border-radius: 6px;
+        padding: 8px 10px;
+        margin-bottom: 6px;
+      }
+
+      .link-url {
+        font-size: 11px;
+        color: #4fc3f7;
+        word-break: break-all;
+        margin-bottom: 6px;
+      }
+
+      .link-password {
+        font-size: 11px;
+        color: #ffd54f;
+        margin-bottom: 6px;
+      }
+
+      /* ── Log ── */
+      .log-section {
+        border-bottom: none;
+        flex-shrink: 0;
+        max-height: 180px;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .log-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 8px 12px;
+        border-bottom: 1px solid #0f3460;
+        position: sticky;
+        top: 0;
+        background: #16213e;
+      }
+
+      .log-entry {
+        padding: 4px 12px;
+        font-size: 11px;
+        border-bottom: 1px solid #0a0a1a;
+        font-family: monospace;
+      }
+
+      .log-entry .ts {
+        color: #555;
+        margin-right: 6px;
+      }
+
+      .log-entry.select .ev {
+        color: #81c784;
+      }
+      .log-entry.share-links .ev {
+        color: #4fc3f7;
+      }
+      .log-entry.file-pick .ev {
+        color: #ffb74d;
+      }
+      .log-entry.cancel .ev {
+        color: #e57373;
+      }
+      .log-entry.unknown .ev {
+        color: #888;
+      }
+
+      /* ── Iframe ── */
+      .iframe-area {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      .iframe-toolbar {
+        background: #16213e;
+        border-bottom: 1px solid #0f3460;
+        padding: 6px 12px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-shrink: 0;
+        font-size: 11px;
+        color: #888;
+      }
+
+      .iframe-url {
+        flex: 1;
+        background: #0f3460;
+        border-radius: 3px;
+        padding: 3px 8px;
+        color: #aaa;
+        font-family: monospace;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      #embed-iframe {
+        flex: 1;
+        border: none;
+        background: #000;
+      }
+
+      .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #555;
+        flex-shrink: 0;
+      }
+
+      .status-dot.connected {
+        background: #81c784;
+      }
+
+      /* ── Scrollbar ── */
+      ::-webkit-scrollbar {
+        width: 6px;
+      }
+      ::-webkit-scrollbar-track {
+        background: #0a0a1a;
+      }
+      ::-webkit-scrollbar-thumb {
+        background: #0f3460;
+        border-radius: 3px;
+      }
+
+      .tag {
+        display: inline-block;
+        background: #0f3460;
+        border: 1px solid #1a4a8a;
+        border-radius: 3px;
+        padding: 1px 5px;
+        font-size: 10px;
+        color: #888;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <h1>CERNBox Embed Demo</h1>
+      <span class="tag">postMessage tester</span>
+    </header>
+
+    <div class="main">
+      <!-- ── Sidebar ── -->
+      <aside class="sidebar">
+        <div class="section">
+          <div class="section-title">Configuration</div>
+
+          <label>CERNBox URL</label>
+          <input type="text" id="base-url" value="https://host.docker.internal:9200" />
+
+          <label>Embed mode</label>
+          <select id="embed-target" onchange="onTargetChange()">
+            <option value="">Default (multi-select)</option>
+            <option value="file">File picker (single file)</option>
+            <option value="location">Location picker</option>
+            <option value="inline-attach">Inline attach (no buttons)</option>
+          </select>
+
+          <div id="inline-attach-section" style="display:none">
+            <button onclick="requestSelection()" style="width:100%">Get selected files</button>
+          </div>
+
+          <div class="checkbox-row">
+            <input type="checkbox" id="hide-nav" />
+            <label style="margin: 0">Hide navigation</label>
+          </div>
+
+          <div class="checkbox-row">
+            <input type="checkbox" id="hide-logo" />
+            <label style="margin: 0">Hide logo</label>
+          </div>
+
+          <div class="checkbox-row">
+            <input type="checkbox" id="hide-app-switcher" />
+            <label style="margin: 0">Hide app switcher</label>
+          </div>
+
+          <div class="checkbox-row">
+            <input type="checkbox" id="hide-account-menu" />
+            <label style="margin: 0">Hide account menu</label>
+          </div>
+
+          <div class="checkbox-row">
+            <input type="checkbox" id="choose-file-name" onchange="toggleChooseFileName()" />
+            <label style="margin: 0">Choose file name (location picker)</label>
+          </div>
+
+          <div id="choose-file-name-section" style="display: none">
+            <label>File name suggestion</label>
+            <input type="text" id="file-name-suggestion" placeholder="document.pdf" />
+          </div>
+
+          <label>Allowed file types <span style="color:#555">(comma-separated, e.g. pdf,image/png)</span></label>
+          <input type="text" id="file-types" placeholder="all" />
+
+          <div class="checkbox-row">
+            <input type="checkbox" id="delegate-auth" onchange="toggleTokenSection()" />
+            <label style="margin: 0">Delegate authentication</label>
+          </div>
+
+          <div id="token-section">
+            <label>Access token (Bearer)</label>
+            <input type="text" id="access-token" placeholder="eyJ..." />
+          </div>
+
+          <div class="btn-row">
+            <button onclick="loadIframe()">Load</button>
+            <button class="secondary" onclick="reloadIframe()">Reload</button>
+          </div>
+        </div>
+
+        <!-- ── Selected files ── -->
+        <div class="section">
+          <div style="display: flex; justify-content: space-between; align-items: center">
+            <div class="section-title" style="margin: 0">Selected files</div>
+            <button class="icon-btn" onclick="clearFiles()">Clear</button>
+          </div>
+        </div>
+        <div class="files-list" id="files-list">
+          <p class="empty-state">No files selected yet.</p>
+        </div>
+
+        <!-- ── Share links ── -->
+        <div class="section">
+          <div style="display: flex; justify-content: space-between; align-items: center">
+            <div class="section-title" style="margin: 0">Share links</div>
+            <button class="icon-btn" onclick="clearLinks()">Clear</button>
+          </div>
+        </div>
+        <div
+          class="files-list"
+          id="links-list"
+          style="flex: 0; max-height: 120px; overflow-y: auto; padding: 8px 12px"
+        >
+          <p class="empty-state">No share links yet.</p>
+        </div>
+
+        <!-- ── Event log ── -->
+        <div class="log-section">
+          <div class="log-header">
+            <div class="section-title" style="margin: 0">Event log</div>
+            <button class="icon-btn" onclick="clearLog()">Clear</button>
+          </div>
+          <div id="log"></div>
+        </div>
+      </aside>
+
+      <!-- ── Iframe area ── -->
+      <div class="iframe-area">
+        <div class="iframe-toolbar">
+          <div class="status-dot" id="status-dot"></div>
+          <div class="iframe-url" id="iframe-url-display">—</div>
+          <button class="icon-btn" onclick="copyIframeUrl()">Copy URL</button>
+        </div>
+        <iframe
+          id="embed-iframe"
+          sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation allow-popups-to-escape-sandbox"
+        ></iframe>
+      </div>
+    </div>
+
+    <script>
+      const iframe = document.getElementById('embed-iframe')
+      const filesList = document.getElementById('files-list')
+      const linksList = document.getElementById('links-list')
+      const log = document.getElementById('log')
+      const statusDot = document.getElementById('status-dot')
+      const iframeUrlDisplay = document.getElementById('iframe-url-display')
+
+      let currentToken = null
+
+      // ── Build iframe URL ──────────────────────────────────────────────
+
+      function buildUrl() {
+        const base = document.getElementById('base-url').value.replace(/\/$/, '')
+        const target = document.getElementById('embed-target').value
+        const hideNav = document.getElementById('hide-nav').checked
+        const hideLogo = document.getElementById('hide-logo').checked
+        const hideAppSwitcher = document.getElementById('hide-app-switcher').checked
+        const hideAccountMenu = document.getElementById('hide-account-menu').checked
+        const chooseFileName = document.getElementById('choose-file-name').checked
+        const fileNameSuggestion = document.getElementById('file-name-suggestion').value.trim()
+        const fileTypes = document.getElementById('file-types').value.trim()
+        const delegateAuth = document.getElementById('delegate-auth').checked
+
+        const params = new URLSearchParams({ embed: 'true' })
+        if (target) params.set('embed-target', target)
+        if (hideNav) params.set('hide-navigation', 'true')
+        if (hideLogo) params.set('hide-logo', 'true')
+        if (hideAppSwitcher) params.set('hide-app-switcher', 'true')
+        if (hideAccountMenu) params.set('hide-account-menu', 'true')
+        if (chooseFileName) {
+          params.set('embed-choose-file-name', 'true')
+          if (fileNameSuggestion) params.set('embed-choose-file-name-suggestion', fileNameSuggestion)
+        }
+        if (fileTypes) params.set('embed-file-types', fileTypes)
+        if (delegateAuth) {
+          params.set('embed-delegate-authentication', 'true')
+          params.set('embed-delegate-authentication-origin', window.location.origin)
+        }
+        params.set('embed-messages-origin', window.location.origin)
+
+        return `${base}?${params}`
+      }
+
+      function loadIframe() {
+        const url = buildUrl()
+        iframe.src = url
+        iframeUrlDisplay.textContent = url
+        statusDot.className = 'status-dot'
+        addLog('—', `iframe loaded`, 'unknown')
+      }
+
+      function reloadIframe() {
+        iframe.src = iframe.src
+        statusDot.className = 'status-dot'
+      }
+
+      function copyIframeUrl() {
+        navigator.clipboard.writeText(iframe.src)
+      }
+
+      function toggleTokenSection() {
+        const show = document.getElementById('delegate-auth').checked
+        document.getElementById('token-section').style.display = show ? 'block' : 'none'
+      }
+
+      function toggleChooseFileName() {
+        const show = document.getElementById('choose-file-name').checked
+        document.getElementById('choose-file-name-section').style.display = show ? 'block' : 'none'
+      }
+
+      function onTargetChange() {
+        const isInlineAttach = document.getElementById('embed-target').value === 'inline-attach'
+        document.getElementById('inline-attach-section').style.display = isInlineAttach ? 'block' : 'none'
+      }
+
+      function requestSelection() {
+        iframe.contentWindow.postMessage(
+          { name: 'owncloud-embed:request-selection' },
+          document.getElementById('base-url').value
+        )
+        addLog('owncloud-embed:request-selection', 'sent', 'unknown')
+      }
+
+      // ── postMessage handler ───────────────────────────────────────────
+
+      window.addEventListener('message', (event) => {
+        const msg = event.data
+        if (!msg || !msg.name) return
+
+        statusDot.className = 'status-dot connected'
+
+        switch (msg.name) {
+          case 'owncloud-embed:request-token':
+            handleRequestToken()
+            break
+          case 'owncloud-embed:select':
+            handleSelect(msg.data)
+            break
+          case 'owncloud-embed:file-pick':
+            handleFilePick(msg.data)
+            break
+          case 'owncloud-embed:share':
+          case 'owncloud-embed:share-links':
+            handleShareLinks(msg.data, msg.name)
+            break
+          case 'owncloud-embed:cancel':
+            addLog(msg.name, 'User cancelled', 'cancel')
+            break
+          default:
+            addLog(msg.name, JSON.stringify(msg.data), 'unknown')
+        }
+      })
+
+      // ── Token delegation ──────────────────────────────────────────────
+
+      function handleRequestToken() {
+        addLog('owncloud-embed:request-token', 'token requested', 'unknown')
+        const token = document.getElementById('access-token').value.trim()
+        if (!token) {
+          addLog('—', 'ERROR: no token provided — fill in the access token field', 'cancel')
+          return
+        }
+        currentToken = token
+        sendToken(token)
+      }
+
+      function sendToken(token) {
+        iframe.contentWindow.postMessage(
+          { name: 'owncloud-embed:update-token', data: { access_token: token } },
+          document.getElementById('base-url').value
+        )
+        addLog('owncloud-embed:update-token', 'token sent', 'select')
+      }
+
+      // ── Select / File pick ────────────────────────────────────────────
+
+      function handleSelect(data) {
+        // data can be Resource[] or { resources, fileName, locationQuery }
+        let resources = Array.isArray(data) ? data : data.resources || []
+        const fileName = !Array.isArray(data) ? data.fileName : null
+
+        addLog(
+          'owncloud-embed:select',
+          `${resources.length} resource(s)${fileName ? `, filename: ${fileName}` : ''}`,
+          'select'
+        )
+        resources.forEach((r) => renderResource(r))
+      }
+
+      function handleFilePick(data) {
+        // data: { resource, locationQuery }
+        const resource = data.resource || data
+        addLog('owncloud-embed:file-pick', resource.name, 'file-pick')
+        renderResource(resource)
+      }
+
+      function renderResource(r) {
+        if (!r) return
+        clearEmpty(filesList)
+
+        const item = document.createElement('div')
+        item.className = 'file-item'
+
+        const webdavUrl = r.downloadURL || r.webDavPath ? r.downloadURL || buildWebDavUrl(r) : null
+
+        item.innerHTML = `
+      <div class="file-name">${escHtml(r.name || r.id || 'Unknown')}</div>
+      <div class="file-meta">
+        ${r.path ? `Path: ${escHtml(r.path)}<br>` : ''}
+        ${r.size !== undefined ? `Size: ${formatSize(r.size)}<br>` : ''}
+        ${r.mimeType ? `Type: ${escHtml(r.mimeType)}<br>` : ''}
+        ${webdavUrl ? `URL: <span style="color:#4fc3f7;font-size:10px">${escHtml(webdavUrl)}</span>` : ''}
+      </div>
+      <div class="file-actions">
+        ${webdavUrl ? `<button class="icon-btn" onclick="downloadResource(${JSON.stringify(webdavUrl).replace(/'/g, "\\'")},'${escHtml(r.name || 'file')}')">Download</button>` : ''}
+        <button class="icon-btn" onclick="copyText(${JSON.stringify(webdavUrl || r.id || '')})">Copy URL</button>
+        <button class="icon-btn" onclick="showJson(this)">JSON</button>
+        <pre style="display:none;font-size:10px;margin-top:6px;white-space:pre-wrap;word-break:break-all;color:#aaa">${escHtml(JSON.stringify(r, null, 2))}</pre>
+      </div>
+    `
+        filesList.prepend(item)
+      }
+
+      function buildWebDavUrl(r) {
+        if (r.downloadURL) return r.downloadURL
+        // Fall back to constructing from base + webDavPath or path
+        const base = document.getElementById('base-url').value.replace(/\/$/, '')
+        const path = r.webDavPath || r.path
+        if (!path) return null
+        return `${base}/remote.php/dav${path}`
+      }
+
+      function downloadResource(url, name) {
+        if (currentToken) {
+          // Fetch with Bearer token and trigger browser download
+          fetch(url, { headers: { Authorization: `Bearer ${currentToken}` } })
+            .then((r) => r.blob())
+            .then((blob) => {
+              const a = document.createElement('a')
+              a.href = URL.createObjectURL(blob)
+              a.download = name
+              a.click()
+              URL.revokeObjectURL(a.href)
+            })
+            .catch((e) => addLog('—', `Download failed: ${e.message}`, 'cancel'))
+        } else {
+          // No token — open URL directly (may require browser session)
+          window.open(url, '_blank')
+        }
+      }
+
+      // ── Share links ───────────────────────────────────────────────────
+
+      function handleShareLinks(data, eventName) {
+        // data: Array<{ url, password? }> (share-links) or string[] (share, legacy)
+        const links = Array.isArray(data)
+          ? data.map((item) => (typeof item === 'string' ? { url: item } : item))
+          : []
+
+        addLog(eventName, `${links.length} link(s)`, 'share-links')
+
+        clearEmpty(linksList)
+        links.forEach((link) => {
+          const item = document.createElement('div')
+          item.className = 'link-item'
+          item.innerHTML = `
+        <div class="link-url"><a href="${escHtml(link.url)}" target="_blank" style="color:inherit">${escHtml(link.url)}</a></div>
+        ${link.password ? `<div class="link-password">Password: ${escHtml(link.password)}</div>` : ''}
+        <div style="display:flex;gap:5px">
+          <button class="icon-btn" onclick="window.open('${escHtml(link.url)}','_blank')">Open</button>
+          <button class="icon-btn" onclick="copyText('${escHtml(link.url)}')">Copy</button>
+        </div>
+      `
+          linksList.prepend(item)
+        })
+      }
+
+      // ── Helpers ───────────────────────────────────────────────────────
+
+      function addLog(name, detail, type) {
+        const entry = document.createElement('div')
+        entry.className = `log-entry ${type}`
+        const ts = new Date().toLocaleTimeString('en-GB', { hour12: false })
+        entry.innerHTML = `<span class="ts">${ts}</span><span class="ev">${escHtml(name)}</span> ${escHtml(detail)}`
+        log.prepend(entry)
+      }
+
+      function clearEmpty(container) {
+        const empty = container.querySelector('.empty-state')
+        if (empty) empty.remove()
+      }
+
+      function clearFiles() {
+        filesList.innerHTML = '<p class="empty-state">No files selected yet.</p>'
+      }
+
+      function clearLinks() {
+        linksList.innerHTML = '<p class="empty-state">No share links yet.</p>'
+      }
+
+      function clearLog() {
+        log.innerHTML = ''
+      }
+
+      function copyText(text) {
+        navigator.clipboard.writeText(text)
+      }
+
+      function showJson(btn) {
+        const pre = btn.parentElement.querySelector('pre')
+        pre.style.display = pre.style.display === 'none' ? 'block' : 'none'
+        btn.textContent = pre.style.display === 'none' ? 'JSON' : 'Hide'
+      }
+
+      function formatSize(bytes) {
+        if (bytes == null) return ''
+        if (bytes < 1024) return `${bytes} B`
+        if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`
+        return `${(bytes / 1048576).toFixed(1)} MB`
+      }
+
+      function escHtml(str) {
+        return String(str ?? '')
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+      }
+
+      // Load on page open
+      loadIframe()
+    </script>
+  </body>
+</html>