@strapi/upload 5.59.0 → 5.61.0

package/dist/admin/hooks/useMediaLibraryPermissions.mjs

@@ -1,10 +1,18 @@
 import { useRBAC } from '@strapi/admin/strapi-admin';
 import { PERMISSIONS } from '../constants.mjs';
 
-// Hoisted to module scope (matching the legacy hook): a fresh object each render
+// Hoisted to module scope (matching the legacy hook): a fresh array each render
 // would hand `useRBAC` a new identity every time, re-running its memos for no
 // gain (it guards refetch with a deep `isEqual`, so this is wasted work, not a loop).
-const { main: _main, ...RBAC_PERMISSIONS } = PERMISSIONS;
+// `settings` stays out: `useRBAC` names each result after the last segment of the
+// action, so `plugin::upload.settings.read` would also come back as `canRead`.
+const RBAC_PERMISSIONS = [
+    ...PERMISSIONS.read,
+    ...PERMISSIONS.create,
+    ...PERMISSIONS.update,
+    ...PERMISSIONS.download,
+    ...PERMISSIONS.copyLink
+];
 /**
  * RBAC gate for the future Media Library UI. Mirrors the legacy hook of the
  * same name: the server already enforces every action route-side (assets and
@@ -13,6 +21,8 @@ const { main: _main, ...RBAC_PERMISSIONS } = PERMISSIONS;
  * hook is what keeps the UI honest so users don't discover a missing
  * permission through a 403.
  *
+ * - `canRead` — browse the library (the Content Manager asset picker needs
+ *   nothing more)
  * - `canCreate` — upload (files, from URL) and New folder
  * - `canUpdate` — edit details, replace, crop, move (dnd + bulk), delete
  *   (single + bulk), AI metadata — the `assets.update` action covers

package/dist/admin/hooks/useMediaLibraryPermissions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMediaLibraryPermissions.mjs","sources":["../../../admin/src/hooks/useMediaLibraryPermissions.ts"],"sourcesContent":["import { useRBAC } from '@strapi/admin/strapi-admin';\n\nimport { PERMISSIONS } from '../constants';\n\n// Hoisted to module scope (matching the legacy hook): a fresh object each render\n// would hand `useRBAC` a new identity every time, re-running its memos for no\n// gain (it guards refetch with a deep `isEqual`, so this is wasted work, not a loop).\nconst { main: _main, ...RBAC_PERMISSIONS } = PERMISSIONS;\n\n/**\n * RBAC gate for the future Media Library UI. Mirrors the legacy hook of the\n * same name: the server already enforces every action route-side (assets and\n * folder operations share the asset permissions — folder create requires\n * `assets.create`, folder rename/move/delete require `assets.update`); this\n * hook is what keeps the UI honest so users don't discover a missing\n * permission through a 403.\n *\n * - `canCreate` — upload (files, from URL) and New folder\n * - `canUpdate` — edit details, replace, crop, move (dnd + bulk), delete\n *   (single + bulk), AI metadata — the `assets.update` action covers\n *   \"Update (crop, details, replace) + delete\" by definition\n * - `canDownload` / `canCopyLink` — the matching drawer actions\n */\nexport const useMediaLibraryPermissions = () => {\n  const { allowedActions, isLoading } = useRBAC(RBAC_PERMISSIONS);\n\n  return {\n    isLoading,\n    // `plugin::upload.read` gates every Media Library endpoint, `GET /upload/settings`\n    // included. Entry forms render a media field for roles that lack it, so callers\n    // need to know before they ask the server and collect a 403.\n    canRead: Boolean(allowedActions.canRead),\n    canCreate: Boolean(allowedActions.canCreate),\n    canUpdate: Boolean(allowedActions.canUpdate),\n    canDownload: Boolean(allowedActions.canDownload),\n    canCopyLink: Boolean(allowedActions.canCopyLink),\n  };\n};\n"],"names":["main","_main","RBAC_PERMISSIONS","PERMISSIONS","useMediaLibraryPermissions","allowedActions","isLoading","useRBAC","canRead","Boolean","canCreate","canUpdate","canDownload","canCopyLink"],"mappings":";;;AAIA;AACA;AACA;AACA,MAAM,EAAEA,IAAAA,EAAMC,KAAK,EAAE,GAAGC,kBAAkB,GAAGC,WAAAA;AAE7C;;;;;;;;;;;;;UAcaC,0BAAAA,GAA6B,IAAA;AACxC,IAAA,MAAM,EAAEC,cAAc,EAAEC,SAAS,EAAE,GAAGC,OAAAA,CAAQL,gBAAAA,CAAAA;IAE9C,OAAO;AACLI,QAAAA,SAAAA;;;;QAIAE,OAAAA,EAASC,OAAAA,CAAQJ,eAAeG,OAAO,CAAA;QACvCE,SAAAA,EAAWD,OAAAA,CAAQJ,eAAeK,SAAS,CAAA;QAC3CC,SAAAA,EAAWF,OAAAA,CAAQJ,eAAeM,SAAS,CAAA;QAC3CC,WAAAA,EAAaH,OAAAA,CAAQJ,eAAeO,WAAW,CAAA;QAC/CC,WAAAA,EAAaJ,OAAAA,CAAQJ,eAAeQ,WAAW;AACjD,KAAA;AACF;;;;"}
+{"version":3,"file":"useMediaLibraryPermissions.mjs","sources":["../../../admin/src/hooks/useMediaLibraryPermissions.ts"],"sourcesContent":["import { useRBAC } from '@strapi/admin/strapi-admin';\n\nimport { PERMISSIONS } from '../constants';\n\n// Hoisted to module scope (matching the legacy hook): a fresh array each render\n// would hand `useRBAC` a new identity every time, re-running its memos for no\n// gain (it guards refetch with a deep `isEqual`, so this is wasted work, not a loop).\n// `settings` stays out: `useRBAC` names each result after the last segment of the\n// action, so `plugin::upload.settings.read` would also come back as `canRead`.\nconst RBAC_PERMISSIONS = [\n  ...PERMISSIONS.read,\n  ...PERMISSIONS.create,\n  ...PERMISSIONS.update,\n  ...PERMISSIONS.download,\n  ...PERMISSIONS.copyLink,\n];\n\n/**\n * RBAC gate for the future Media Library UI. Mirrors the legacy hook of the\n * same name: the server already enforces every action route-side (assets and\n * folder operations share the asset permissions — folder create requires\n * `assets.create`, folder rename/move/delete require `assets.update`); this\n * hook is what keeps the UI honest so users don't discover a missing\n * permission through a 403.\n *\n * - `canRead` — browse the library (the Content Manager asset picker needs\n *   nothing more)\n * - `canCreate` — upload (files, from URL) and New folder\n * - `canUpdate` — edit details, replace, crop, move (dnd + bulk), delete\n *   (single + bulk), AI metadata — the `assets.update` action covers\n *   \"Update (crop, details, replace) + delete\" by definition\n * - `canDownload` / `canCopyLink` — the matching drawer actions\n */\nexport const useMediaLibraryPermissions = () => {\n  const { allowedActions, isLoading } = useRBAC(RBAC_PERMISSIONS);\n\n  return {\n    isLoading,\n    // `plugin::upload.read` gates every Media Library endpoint, `GET /upload/settings`\n    // included. Entry forms render a media field for roles that lack it, so callers\n    // need to know before they ask the server and collect a 403.\n    canRead: Boolean(allowedActions.canRead),\n    canCreate: Boolean(allowedActions.canCreate),\n    canUpdate: Boolean(allowedActions.canUpdate),\n    canDownload: Boolean(allowedActions.canDownload),\n    canCopyLink: Boolean(allowedActions.canCopyLink),\n  };\n};\n"],"names":["RBAC_PERMISSIONS","PERMISSIONS","read","create","update","download","copyLink","useMediaLibraryPermissions","allowedActions","isLoading","useRBAC","canRead","Boolean","canCreate","canUpdate","canDownload","canCopyLink"],"mappings":";;;AAIA;AACA;AACA;AACA;AACA;AACA,MAAMA,gBAAAA,GAAmB;AACpBC,IAAAA,GAAAA,WAAAA,CAAYC,IAAI;AAChBD,IAAAA,GAAAA,WAAAA,CAAYE,MAAM;AAClBF,IAAAA,GAAAA,WAAAA,CAAYG,MAAM;AAClBH,IAAAA,GAAAA,WAAAA,CAAYI,QAAQ;AACpBJ,IAAAA,GAAAA,WAAAA,CAAYK;AAChB,CAAA;AAED;;;;;;;;;;;;;;;UAgBaC,0BAAAA,GAA6B,IAAA;AACxC,IAAA,MAAM,EAAEC,cAAc,EAAEC,SAAS,EAAE,GAAGC,OAAAA,CAAQV,gBAAAA,CAAAA;IAE9C,OAAO;AACLS,QAAAA,SAAAA;;;;QAIAE,OAAAA,EAASC,OAAAA,CAAQJ,eAAeG,OAAO,CAAA;QACvCE,SAAAA,EAAWD,OAAAA,CAAQJ,eAAeK,SAAS,CAAA;QAC3CC,SAAAA,EAAWF,OAAAA,CAAQJ,eAAeM,SAAS,CAAA;QAC3CC,WAAAA,EAAaH,OAAAA,CAAQJ,eAAeO,WAAW,CAAA;QAC/CC,WAAAA,EAAaJ,OAAAA,CAAQJ,eAAeQ,WAAW;AACjD,KAAA;AACF;;;;"}

package/dist/admin/index.js

@@ -2,6 +2,8 @@
 
 var icons = require('@strapi/icons');
 var _package = require('./package.json.js');
+var MediaLibraryPickerDialog = require('./components/AssetPickerDialog/MediaLibraryPickerDialog.js');
+var EditorFileDropZone = require('./components/EditorFileDropZone/EditorFileDropZone.js');
 var MediaLibraryInput$1 = require('./components/MediaLibraryInput/MediaLibraryInput.js');
 var UploadProgressDialog = require('./components/UploadProgressDialog.js');
 var constants = require('./constants.js');
@@ -81,6 +83,12 @@ const admin = {
                 {
                     name: 'future-global::upload-progress',
                     Component: UploadProgressDialog.UploadProgressDialog
+                },
+                // Lets the Blocks editor take files dropped onto it. Not registered on the
+                // legacy Media Library, which has no upload progress dialog to report to.
+                {
+                    name: 'media-library-file-drop-zone',
+                    Component: EditorFileDropZone.EditorFileDropZone
                 }
             ]);
         }
@@ -106,10 +114,11 @@ const admin = {
             type: 'media',
             Component: isLegacyMediaLibrary ? MediaLibraryInput.MediaLibraryInput : MediaLibraryInput$1.MediaLibraryInput
         });
+        // The picker the Wysiwyg and Blocks editors insert images with.
         app.addComponents([
             {
                 name: 'media-library',
-                Component: MediaLibraryDialog.MediaLibraryDialog
+                Component: isLegacyMediaLibrary ? MediaLibraryDialog.MediaLibraryDialog : MediaLibraryPickerDialog.MediaLibraryPickerDialog
             }
         ]);
         app.registerPlugin({

package/dist/admin/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../admin/src/index.ts"],"sourcesContent":["import { Images } from '@strapi/icons';\n\nimport pluginPkg from '../../package.json';\n\nimport { MediaLibraryInput } from './components/MediaLibraryInput/MediaLibraryInput';\nimport { UploadProgressDialog } from './components/UploadProgressDialog';\nimport { PERMISSIONS } from './constants';\nimport { MediaLibraryDialog } from './legacy/components/MediaLibraryDialog/MediaLibraryDialog';\nimport { MediaLibraryInput as LegacyMediaLibraryInput } from './legacy/components/MediaLibraryInput/MediaLibraryInput';\nimport { prefixPluginTranslations } from './legacy/utils/prefixPluginTranslations';\nimport { pluginId } from './pluginId';\nimport { uploadProgressReducer } from './store/uploadProgress';\nimport { getTranslationKey } from './utils/translations';\n\nimport type { MediaLibraryInputProps } from './components/MediaLibraryInput/MediaLibraryInput';\nimport type { MediaLibraryDialogProps } from './legacy/components/MediaLibraryDialog/MediaLibraryDialog';\nimport type { MediaLibraryInputProps as LegacyMediaLibraryInputProps } from './legacy/components/MediaLibraryInput/MediaLibraryInput';\nimport type { StrapiApp } from '@strapi/admin/strapi-admin';\nimport type { Plugin } from '@strapi/types';\n\nconst name = pluginPkg.strapi.name;\n\nconst admin: Plugin.Config.AdminInput = {\n  register(app: StrapiApp) {\n    /**\n     * Whichever Media Library is selected owns `plugins/upload` outright: the other is\n     * not registered at all, so there is exactly one Media Library entry in the menu.\n     *\n     * The new one is the default; `useLegacyMediaLibrary` opts back out.\n     */\n    const isLegacyMediaLibrary = window.strapi.featureFlags.isEnabled('useLegacyMediaLibrary');\n\n    app.addMenuLink({\n      to: `plugins/${pluginId}`,\n      icon: Images,\n      intlLabel: {\n        id: `${pluginId}.plugin.name`,\n        defaultMessage: 'Media Library',\n      },\n      permissions: PERMISSIONS.main,\n      Component: isLegacyMediaLibrary\n        ? () => {\n            return import('./legacy/pages/App/App').then((mod) => ({ default: mod.Upload }));\n          }\n        : () => {\n            return import('./App').then((mod) => ({\n              default: mod.MediaLibrary,\n            }));\n          },\n      position: 4,\n    });\n\n    if (!isLegacyMediaLibrary) {\n      app.addReducers({ uploadProgress: uploadProgressReducer });\n\n      app.addComponents([\n        {\n          name: 'future-global::upload-progress',\n          Component: UploadProgressDialog,\n        },\n      ]);\n    }\n\n    app.addSettingsLink('global', {\n      id: 'media-library-settings',\n      to: 'media-library',\n      intlLabel: {\n        id: getTranslationKey('plugin.name'),\n        defaultMessage: 'Media Library',\n      },\n      Component() {\n        return import('./pages/SettingsPage/SettingsPage').then((mod) => ({\n          default: mod.ProtectedSettingsPage,\n        }));\n      },\n      permissions: PERMISSIONS.settings,\n    });\n\n    /**\n     * The media field follows the same switch as the menu link above: the\n     * current input on the current Media Library, the legacy one when\n     * `useLegacyMediaLibrary` opts back out.\n     */\n    app.addFields({\n      type: 'media',\n      Component: isLegacyMediaLibrary\n        ? (LegacyMediaLibraryInput as React.FC<Partial<LegacyMediaLibraryInputProps>>)\n        : (MediaLibraryInput as React.FC<Partial<MediaLibraryInputProps>>),\n    });\n    app.addComponents([\n      {\n        name: 'media-library',\n        Component: MediaLibraryDialog as React.FC<Partial<MediaLibraryDialogProps>>,\n      },\n    ]);\n\n    app.registerPlugin({\n      id: pluginId,\n      name,\n    });\n  },\n  async registerTrads({ locales }: { locales: string[] }) {\n    const importedTrads = await Promise.all(\n      locales.map((locale) => {\n        return import(`./translations/${locale}.json`)\n          .then(({ default: data }) => {\n            return {\n              data: prefixPluginTranslations(data, pluginId),\n              locale,\n            };\n          })\n          .catch(() => {\n            return {\n              data: {},\n              locale,\n            };\n          });\n      })\n    );\n\n    return Promise.resolve(importedTrads);\n  },\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default admin;\n"],"names":["name","pluginPkg","strapi","admin","register","app","isLegacyMediaLibrary","window","featureFlags","isEnabled","addMenuLink","to","pluginId","icon","Images","intlLabel","id","defaultMessage","permissions","PERMISSIONS","main","Component","then","mod","default","Upload","MediaLibrary","position","addReducers","uploadProgress","uploadProgressReducer","addComponents","UploadProgressDialog","addSettingsLink","getTranslationKey","ProtectedSettingsPage","settings","addFields","type","LegacyMediaLibraryInput","MediaLibraryInput","MediaLibraryDialog","registerPlugin","registerTrads","locales","importedTrads","Promise","all","map","locale","data","prefixPluginTranslations","catch","resolve"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAMA,IAAAA,GAAOC,gBAAAA,CAAUC,MAAM,CAACF,IAAI;AAElC,MAAMG,KAAAA,GAAkC;AACtCC,IAAAA,QAAAA,CAAAA,CAASC,GAAc,EAAA;AACrB;;;;;QAMA,MAAMC,uBAAuBC,MAAAA,CAAOL,MAAM,CAACM,YAAY,CAACC,SAAS,CAAC,uBAAA,CAAA;AAElEJ,QAAAA,GAAAA,CAAIK,WAAW,CAAC;YACdC,EAAAA,EAAI,CAAC,QAAQ,EAAEC,iBAAAA,CAAAA,CAAU;YACzBC,IAAAA,EAAMC,YAAAA;YACNC,SAAAA,EAAW;gBACTC,EAAAA,EAAI,CAAA,EAAGJ,iBAAAA,CAAS,YAAY,CAAC;gBAC7BK,cAAAA,EAAgB;AAClB,aAAA;AACAC,YAAAA,WAAAA,EAAaC,sBAAYC,IAAI;AAC7BC,YAAAA,SAAAA,EAAWf,oBAAAA,GACP,IAAA;AACE,gBAAA,OAAO,oDAAO,2BAAA,KAAA,CAA0BgB,IAAI,CAAC,CAACC,OAAS;AAAEC,wBAAAA,OAAAA,EAASD,IAAIE;qBAAO,CAAA,CAAA;YAC/E,CAAA,GACA,IAAA;AACE,gBAAA,OAAO,oDAAO,UAAA,KAAA,CAASH,IAAI,CAAC,CAACC,OAAS;AACpCC,wBAAAA,OAAAA,EAASD,IAAIG;qBACf,CAAA,CAAA;AACF,YAAA,CAAA;YACJC,QAAAA,EAAU;AACZ,SAAA,CAAA;AAEA,QAAA,IAAI,CAACrB,oBAAAA,EAAsB;AACzBD,YAAAA,GAAAA,CAAIuB,WAAW,CAAC;gBAAEC,cAAAA,EAAgBC;AAAsB,aAAA,CAAA;AAExDzB,YAAAA,GAAAA,CAAI0B,aAAa,CAAC;AAChB,gBAAA;oBACE/B,IAAAA,EAAM,gCAAA;oBACNqB,SAAAA,EAAWW;AACb;AACD,aAAA,CAAA;AACH,QAAA;QAEA3B,GAAAA,CAAI4B,eAAe,CAAC,QAAA,EAAU;YAC5BjB,EAAAA,EAAI,wBAAA;YACJL,EAAAA,EAAI,eAAA;YACJI,SAAAA,EAAW;AACTC,gBAAAA,EAAAA,EAAIkB,8BAAAA,CAAkB,aAAA,CAAA;gBACtBjB,cAAAA,EAAgB;AAClB,aAAA;AACAI,YAAAA,SAAAA,CAAAA,GAAAA;AACE,gBAAA,OAAO,oDAAO,sCAAA,KAAA,CAAqCC,IAAI,CAAC,CAACC,OAAS;AAChEC,wBAAAA,OAAAA,EAASD,IAAIY;qBACf,CAAA,CAAA;AACF,YAAA,CAAA;AACAjB,YAAAA,WAAAA,EAAaC,sBAAYiB;AAC3B,SAAA,CAAA;AAEA;;;;QAKA/B,GAAAA,CAAIgC,SAAS,CAAC;YACZC,IAAAA,EAAM,OAAA;AACNjB,YAAAA,SAAAA,EAAWf,uBACNiC,mCAAAA,GACAC;AACP,SAAA,CAAA;AACAnC,QAAAA,GAAAA,CAAI0B,aAAa,CAAC;AAChB,YAAA;gBACE/B,IAAAA,EAAM,eAAA;gBACNqB,SAAAA,EAAWoB;AACb;AACD,SAAA,CAAA;AAEDpC,QAAAA,GAAAA,CAAIqC,cAAc,CAAC;YACjB1B,EAAAA,EAAIJ,iBAAAA;AACJZ,YAAAA;AACF,SAAA,CAAA;AACF,IAAA,CAAA;IACA,MAAM2C,aAAAA,CAAAA,CAAc,EAAEC,OAAO,EAAyB,EAAA;QACpD,MAAMC,aAAAA,GAAgB,MAAMC,OAAAA,CAAQC,GAAG,CACrCH,OAAAA,CAAQI,GAAG,CAAC,CAACC,MAAAA,GAAAA;AACX,YAAA,OAAO,iCAAM,CAAC,CAAC,eAAe,EAAEA,MAAAA,CAAO,KAAK,CAAC,CAAA,CAC1C3B,IAAI,CAAC,CAAC,EAAEE,OAAAA,EAAS0B,IAAI,EAAE,GAAA;gBACtB,OAAO;AACLA,oBAAAA,IAAAA,EAAMC,kDAAyBD,IAAAA,EAAMtC,iBAAAA,CAAAA;AACrCqC,oBAAAA;AACF,iBAAA;AACF,YAAA,CAAA,CAAA,CACCG,KAAK,CAAC,IAAA;gBACL,OAAO;AACLF,oBAAAA,IAAAA,EAAM,EAAC;AACPD,oBAAAA;AACF,iBAAA;AACF,YAAA,CAAA,CAAA;AACJ,QAAA,CAAA,CAAA,CAAA;QAGF,OAAOH,OAAAA,CAAQO,OAAO,CAACR,aAAAA,CAAAA;AACzB,IAAA;AACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../admin/src/index.ts"],"sourcesContent":["import { Images } from '@strapi/icons';\n\nimport pluginPkg from '../../package.json';\n\nimport { MediaLibraryPickerDialog } from './components/AssetPickerDialog/MediaLibraryPickerDialog';\nimport { EditorFileDropZone } from './components/EditorFileDropZone/EditorFileDropZone';\nimport { MediaLibraryInput } from './components/MediaLibraryInput/MediaLibraryInput';\nimport { UploadProgressDialog } from './components/UploadProgressDialog';\nimport { PERMISSIONS } from './constants';\nimport { MediaLibraryDialog } from './legacy/components/MediaLibraryDialog/MediaLibraryDialog';\nimport { MediaLibraryInput as LegacyMediaLibraryInput } from './legacy/components/MediaLibraryInput/MediaLibraryInput';\nimport { prefixPluginTranslations } from './legacy/utils/prefixPluginTranslations';\nimport { pluginId } from './pluginId';\nimport { uploadProgressReducer } from './store/uploadProgress';\nimport { getTranslationKey } from './utils/translations';\n\nimport type { MediaLibraryPickerDialogProps } from './components/AssetPickerDialog/MediaLibraryPickerDialog';\nimport type { EditorFileDropZoneProps } from './components/EditorFileDropZone/EditorFileDropZone';\nimport type { MediaLibraryInputProps } from './components/MediaLibraryInput/MediaLibraryInput';\nimport type { MediaLibraryDialogProps } from './legacy/components/MediaLibraryDialog/MediaLibraryDialog';\nimport type { MediaLibraryInputProps as LegacyMediaLibraryInputProps } from './legacy/components/MediaLibraryInput/MediaLibraryInput';\nimport type { StrapiApp } from '@strapi/admin/strapi-admin';\nimport type { Plugin } from '@strapi/types';\n\nconst name = pluginPkg.strapi.name;\n\nconst admin: Plugin.Config.AdminInput = {\n  register(app: StrapiApp) {\n    /**\n     * Whichever Media Library is selected owns `plugins/upload` outright: the other is\n     * not registered at all, so there is exactly one Media Library entry in the menu.\n     *\n     * The new one is the default; `useLegacyMediaLibrary` opts back out.\n     */\n    const isLegacyMediaLibrary = window.strapi.featureFlags.isEnabled('useLegacyMediaLibrary');\n\n    app.addMenuLink({\n      to: `plugins/${pluginId}`,\n      icon: Images,\n      intlLabel: {\n        id: `${pluginId}.plugin.name`,\n        defaultMessage: 'Media Library',\n      },\n      permissions: PERMISSIONS.main,\n      Component: isLegacyMediaLibrary\n        ? () => {\n            return import('./legacy/pages/App/App').then((mod) => ({ default: mod.Upload }));\n          }\n        : () => {\n            return import('./App').then((mod) => ({\n              default: mod.MediaLibrary,\n            }));\n          },\n      position: 4,\n    });\n\n    if (!isLegacyMediaLibrary) {\n      app.addReducers({ uploadProgress: uploadProgressReducer });\n\n      app.addComponents([\n        {\n          name: 'future-global::upload-progress',\n          Component: UploadProgressDialog,\n        },\n        // Lets the Blocks editor take files dropped onto it. Not registered on the\n        // legacy Media Library, which has no upload progress dialog to report to.\n        {\n          name: 'media-library-file-drop-zone',\n          Component: EditorFileDropZone as React.FC<Partial<EditorFileDropZoneProps>>,\n        },\n      ]);\n    }\n\n    app.addSettingsLink('global', {\n      id: 'media-library-settings',\n      to: 'media-library',\n      intlLabel: {\n        id: getTranslationKey('plugin.name'),\n        defaultMessage: 'Media Library',\n      },\n      Component() {\n        return import('./pages/SettingsPage/SettingsPage').then((mod) => ({\n          default: mod.ProtectedSettingsPage,\n        }));\n      },\n      permissions: PERMISSIONS.settings,\n    });\n\n    /**\n     * The media field follows the same switch as the menu link above: the\n     * current input on the current Media Library, the legacy one when\n     * `useLegacyMediaLibrary` opts back out.\n     */\n    app.addFields({\n      type: 'media',\n      Component: isLegacyMediaLibrary\n        ? (LegacyMediaLibraryInput as React.FC<Partial<LegacyMediaLibraryInputProps>>)\n        : (MediaLibraryInput as React.FC<Partial<MediaLibraryInputProps>>),\n    });\n    // The picker the Wysiwyg and Blocks editors insert images with.\n    app.addComponents([\n      {\n        name: 'media-library',\n        Component: isLegacyMediaLibrary\n          ? (MediaLibraryDialog as React.FC<Partial<MediaLibraryDialogProps>>)\n          : (MediaLibraryPickerDialog as React.FC<Partial<MediaLibraryPickerDialogProps>>),\n      },\n    ]);\n\n    app.registerPlugin({\n      id: pluginId,\n      name,\n    });\n  },\n  async registerTrads({ locales }: { locales: string[] }) {\n    const importedTrads = await Promise.all(\n      locales.map((locale) => {\n        return import(`./translations/${locale}.json`)\n          .then(({ default: data }) => {\n            return {\n              data: prefixPluginTranslations(data, pluginId),\n              locale,\n            };\n          })\n          .catch(() => {\n            return {\n              data: {},\n              locale,\n            };\n          });\n      })\n    );\n\n    return Promise.resolve(importedTrads);\n  },\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default admin;\n"],"names":["name","pluginPkg","strapi","admin","register","app","isLegacyMediaLibrary","window","featureFlags","isEnabled","addMenuLink","to","pluginId","icon","Images","intlLabel","id","defaultMessage","permissions","PERMISSIONS","main","Component","then","mod","default","Upload","MediaLibrary","position","addReducers","uploadProgress","uploadProgressReducer","addComponents","UploadProgressDialog","EditorFileDropZone","addSettingsLink","getTranslationKey","ProtectedSettingsPage","settings","addFields","type","LegacyMediaLibraryInput","MediaLibraryInput","MediaLibraryDialog","MediaLibraryPickerDialog","registerPlugin","registerTrads","locales","importedTrads","Promise","all","map","locale","data","prefixPluginTranslations","catch","resolve"],"mappings":"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"}

package/dist/admin/index.mjs

@@ -1,5 +1,7 @@
 import { Images } from '@strapi/icons';
 import pluginPkg from './package.json.mjs';
+import { MediaLibraryPickerDialog } from './components/AssetPickerDialog/MediaLibraryPickerDialog.mjs';
+import { EditorFileDropZone } from './components/EditorFileDropZone/EditorFileDropZone.mjs';
 import { MediaLibraryInput as MediaLibraryInput$1 } from './components/MediaLibraryInput/MediaLibraryInput.mjs';
 import { UploadProgressDialog } from './components/UploadProgressDialog.mjs';
 import { PERMISSIONS } from './constants.mjs';
@@ -77,6 +79,12 @@ const admin = {
                 {
                     name: 'future-global::upload-progress',
                     Component: UploadProgressDialog
+                },
+                // Lets the Blocks editor take files dropped onto it. Not registered on the
+                // legacy Media Library, which has no upload progress dialog to report to.
+                {
+                    name: 'media-library-file-drop-zone',
+                    Component: EditorFileDropZone
                 }
             ]);
         }
@@ -102,10 +110,11 @@ const admin = {
             type: 'media',
             Component: isLegacyMediaLibrary ? MediaLibraryInput : MediaLibraryInput$1
         });
+        // The picker the Wysiwyg and Blocks editors insert images with.
         app.addComponents([
             {
                 name: 'media-library',
-                Component: MediaLibraryDialog
+                Component: isLegacyMediaLibrary ? MediaLibraryDialog : MediaLibraryPickerDialog
             }
         ]);
         app.registerPlugin({

package/dist/admin/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../admin/src/index.ts"],"sourcesContent":["import { Images } from '@strapi/icons';\n\nimport pluginPkg from '../../package.json';\n\nimport { MediaLibraryInput } from './components/MediaLibraryInput/MediaLibraryInput';\nimport { UploadProgressDialog } from './components/UploadProgressDialog';\nimport { PERMISSIONS } from './constants';\nimport { MediaLibraryDialog } from './legacy/components/MediaLibraryDialog/MediaLibraryDialog';\nimport { MediaLibraryInput as LegacyMediaLibraryInput } from './legacy/components/MediaLibraryInput/MediaLibraryInput';\nimport { prefixPluginTranslations } from './legacy/utils/prefixPluginTranslations';\nimport { pluginId } from './pluginId';\nimport { uploadProgressReducer } from './store/uploadProgress';\nimport { getTranslationKey } from './utils/translations';\n\nimport type { MediaLibraryInputProps } from './components/MediaLibraryInput/MediaLibraryInput';\nimport type { MediaLibraryDialogProps } from './legacy/components/MediaLibraryDialog/MediaLibraryDialog';\nimport type { MediaLibraryInputProps as LegacyMediaLibraryInputProps } from './legacy/components/MediaLibraryInput/MediaLibraryInput';\nimport type { StrapiApp } from '@strapi/admin/strapi-admin';\nimport type { Plugin } from '@strapi/types';\n\nconst name = pluginPkg.strapi.name;\n\nconst admin: Plugin.Config.AdminInput = {\n  register(app: StrapiApp) {\n    /**\n     * Whichever Media Library is selected owns `plugins/upload` outright: the other is\n     * not registered at all, so there is exactly one Media Library entry in the menu.\n     *\n     * The new one is the default; `useLegacyMediaLibrary` opts back out.\n     */\n    const isLegacyMediaLibrary = window.strapi.featureFlags.isEnabled('useLegacyMediaLibrary');\n\n    app.addMenuLink({\n      to: `plugins/${pluginId}`,\n      icon: Images,\n      intlLabel: {\n        id: `${pluginId}.plugin.name`,\n        defaultMessage: 'Media Library',\n      },\n      permissions: PERMISSIONS.main,\n      Component: isLegacyMediaLibrary\n        ? () => {\n            return import('./legacy/pages/App/App').then((mod) => ({ default: mod.Upload }));\n          }\n        : () => {\n            return import('./App').then((mod) => ({\n              default: mod.MediaLibrary,\n            }));\n          },\n      position: 4,\n    });\n\n    if (!isLegacyMediaLibrary) {\n      app.addReducers({ uploadProgress: uploadProgressReducer });\n\n      app.addComponents([\n        {\n          name: 'future-global::upload-progress',\n          Component: UploadProgressDialog,\n        },\n      ]);\n    }\n\n    app.addSettingsLink('global', {\n      id: 'media-library-settings',\n      to: 'media-library',\n      intlLabel: {\n        id: getTranslationKey('plugin.name'),\n        defaultMessage: 'Media Library',\n      },\n      Component() {\n        return import('./pages/SettingsPage/SettingsPage').then((mod) => ({\n          default: mod.ProtectedSettingsPage,\n        }));\n      },\n      permissions: PERMISSIONS.settings,\n    });\n\n    /**\n     * The media field follows the same switch as the menu link above: the\n     * current input on the current Media Library, the legacy one when\n     * `useLegacyMediaLibrary` opts back out.\n     */\n    app.addFields({\n      type: 'media',\n      Component: isLegacyMediaLibrary\n        ? (LegacyMediaLibraryInput as React.FC<Partial<LegacyMediaLibraryInputProps>>)\n        : (MediaLibraryInput as React.FC<Partial<MediaLibraryInputProps>>),\n    });\n    app.addComponents([\n      {\n        name: 'media-library',\n        Component: MediaLibraryDialog as React.FC<Partial<MediaLibraryDialogProps>>,\n      },\n    ]);\n\n    app.registerPlugin({\n      id: pluginId,\n      name,\n    });\n  },\n  async registerTrads({ locales }: { locales: string[] }) {\n    const importedTrads = await Promise.all(\n      locales.map((locale) => {\n        return import(`./translations/${locale}.json`)\n          .then(({ default: data }) => {\n            return {\n              data: prefixPluginTranslations(data, pluginId),\n              locale,\n            };\n          })\n          .catch(() => {\n            return {\n              data: {},\n              locale,\n            };\n          });\n      })\n    );\n\n    return Promise.resolve(importedTrads);\n  },\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default admin;\n"],"names":["name","pluginPkg","strapi","admin","register","app","isLegacyMediaLibrary","window","featureFlags","isEnabled","addMenuLink","to","pluginId","icon","Images","intlLabel","id","defaultMessage","permissions","PERMISSIONS","main","Component","then","mod","default","Upload","MediaLibrary","position","addReducers","uploadProgress","uploadProgressReducer","addComponents","UploadProgressDialog","addSettingsLink","getTranslationKey","ProtectedSettingsPage","settings","addFields","type","LegacyMediaLibraryInput","MediaLibraryInput","MediaLibraryDialog","registerPlugin","registerTrads","locales","importedTrads","Promise","all","map","locale","data","prefixPluginTranslations","catch","resolve"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../admin/src/index.ts"],"sourcesContent":["import { Images } from '@strapi/icons';\n\nimport pluginPkg from '../../package.json';\n\nimport { MediaLibraryPickerDialog } from './components/AssetPickerDialog/MediaLibraryPickerDialog';\nimport { EditorFileDropZone } from './components/EditorFileDropZone/EditorFileDropZone';\nimport { MediaLibraryInput } from './components/MediaLibraryInput/MediaLibraryInput';\nimport { UploadProgressDialog } from './components/UploadProgressDialog';\nimport { PERMISSIONS } from './constants';\nimport { MediaLibraryDialog } from './legacy/components/MediaLibraryDialog/MediaLibraryDialog';\nimport { MediaLibraryInput as LegacyMediaLibraryInput } from './legacy/components/MediaLibraryInput/MediaLibraryInput';\nimport { prefixPluginTranslations } from './legacy/utils/prefixPluginTranslations';\nimport { pluginId } from './pluginId';\nimport { uploadProgressReducer } from './store/uploadProgress';\nimport { getTranslationKey } from './utils/translations';\n\nimport type { MediaLibraryPickerDialogProps } from './components/AssetPickerDialog/MediaLibraryPickerDialog';\nimport type { EditorFileDropZoneProps } from './components/EditorFileDropZone/EditorFileDropZone';\nimport type { MediaLibraryInputProps } from './components/MediaLibraryInput/MediaLibraryInput';\nimport type { MediaLibraryDialogProps } from './legacy/components/MediaLibraryDialog/MediaLibraryDialog';\nimport type { MediaLibraryInputProps as LegacyMediaLibraryInputProps } from './legacy/components/MediaLibraryInput/MediaLibraryInput';\nimport type { StrapiApp } from '@strapi/admin/strapi-admin';\nimport type { Plugin } from '@strapi/types';\n\nconst name = pluginPkg.strapi.name;\n\nconst admin: Plugin.Config.AdminInput = {\n  register(app: StrapiApp) {\n    /**\n     * Whichever Media Library is selected owns `plugins/upload` outright: the other is\n     * not registered at all, so there is exactly one Media Library entry in the menu.\n     *\n     * The new one is the default; `useLegacyMediaLibrary` opts back out.\n     */\n    const isLegacyMediaLibrary = window.strapi.featureFlags.isEnabled('useLegacyMediaLibrary');\n\n    app.addMenuLink({\n      to: `plugins/${pluginId}`,\n      icon: Images,\n      intlLabel: {\n        id: `${pluginId}.plugin.name`,\n        defaultMessage: 'Media Library',\n      },\n      permissions: PERMISSIONS.main,\n      Component: isLegacyMediaLibrary\n        ? () => {\n            return import('./legacy/pages/App/App').then((mod) => ({ default: mod.Upload }));\n          }\n        : () => {\n            return import('./App').then((mod) => ({\n              default: mod.MediaLibrary,\n            }));\n          },\n      position: 4,\n    });\n\n    if (!isLegacyMediaLibrary) {\n      app.addReducers({ uploadProgress: uploadProgressReducer });\n\n      app.addComponents([\n        {\n          name: 'future-global::upload-progress',\n          Component: UploadProgressDialog,\n        },\n        // Lets the Blocks editor take files dropped onto it. Not registered on the\n        // legacy Media Library, which has no upload progress dialog to report to.\n        {\n          name: 'media-library-file-drop-zone',\n          Component: EditorFileDropZone as React.FC<Partial<EditorFileDropZoneProps>>,\n        },\n      ]);\n    }\n\n    app.addSettingsLink('global', {\n      id: 'media-library-settings',\n      to: 'media-library',\n      intlLabel: {\n        id: getTranslationKey('plugin.name'),\n        defaultMessage: 'Media Library',\n      },\n      Component() {\n        return import('./pages/SettingsPage/SettingsPage').then((mod) => ({\n          default: mod.ProtectedSettingsPage,\n        }));\n      },\n      permissions: PERMISSIONS.settings,\n    });\n\n    /**\n     * The media field follows the same switch as the menu link above: the\n     * current input on the current Media Library, the legacy one when\n     * `useLegacyMediaLibrary` opts back out.\n     */\n    app.addFields({\n      type: 'media',\n      Component: isLegacyMediaLibrary\n        ? (LegacyMediaLibraryInput as React.FC<Partial<LegacyMediaLibraryInputProps>>)\n        : (MediaLibraryInput as React.FC<Partial<MediaLibraryInputProps>>),\n    });\n    // The picker the Wysiwyg and Blocks editors insert images with.\n    app.addComponents([\n      {\n        name: 'media-library',\n        Component: isLegacyMediaLibrary\n          ? (MediaLibraryDialog as React.FC<Partial<MediaLibraryDialogProps>>)\n          : (MediaLibraryPickerDialog as React.FC<Partial<MediaLibraryPickerDialogProps>>),\n      },\n    ]);\n\n    app.registerPlugin({\n      id: pluginId,\n      name,\n    });\n  },\n  async registerTrads({ locales }: { locales: string[] }) {\n    const importedTrads = await Promise.all(\n      locales.map((locale) => {\n        return import(`./translations/${locale}.json`)\n          .then(({ default: data }) => {\n            return {\n              data: prefixPluginTranslations(data, pluginId),\n              locale,\n            };\n          })\n          .catch(() => {\n            return {\n              data: {},\n              locale,\n            };\n          });\n      })\n    );\n\n    return Promise.resolve(importedTrads);\n  },\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default admin;\n"],"names":["name","pluginPkg","strapi","admin","register","app","isLegacyMediaLibrary","window","featureFlags","isEnabled","addMenuLink","to","pluginId","icon","Images","intlLabel","id","defaultMessage","permissions","PERMISSIONS","main","Component","then","mod","default","Upload","MediaLibrary","position","addReducers","uploadProgress","uploadProgressReducer","addComponents","UploadProgressDialog","EditorFileDropZone","addSettingsLink","getTranslationKey","ProtectedSettingsPage","settings","addFields","type","LegacyMediaLibraryInput","MediaLibraryInput","MediaLibraryDialog","MediaLibraryPickerDialog","registerPlugin","registerTrads","locales","importedTrads","Promise","all","map","locale","data","prefixPluginTranslations","catch","resolve"],"mappings":"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"}

package/dist/admin/pages/Assets/AssetsPage.js

@@ -2,7 +2,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var ToggleGroup = require('@radix-ui/react-toggle-group');
 var strapiAdmin = require('@strapi/admin/strapi-admin');
 var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
@@ -12,73 +11,32 @@ var useAIMetadataEnabled = require('../../hooks/useAIMetadataEnabled.js');
 var useMediaLibraryPermissions = require('../../hooks/useMediaLibraryPermissions.js');
 var useTracking = require('../../hooks/useTracking.js');
 var api = require('../../services/api.js');
-var folders = require('../../services/folders.js');
 var settings = require('../../services/settings.js');
 var itemLocations = require('../../utils/itemLocations.js');
 var translations = require('../../utils/translations.js');
 var typeFromMime = require('../../utils/typeFromMime.js');
 var AssetDetailsDrawer = require('./components/AssetDetails/AssetDetailsDrawer.js');
-var AssetsGrid = require('./components/AssetsGrid.js');
 var AssetsSearchInput = require('./components/AssetsSearchInput.js');
-var AssetsTable = require('./components/AssetsTable.js');
-var BulkActionsBar = require('./components/BulkActionsBar.js');
+var AssetsView = require('./components/AssetsView.js');
 var AssetsDndProvider = require('./components/Dnd/AssetsDndProvider.js');
 var UploadDropZone = require('./components/DropZone/UploadDropZone.js');
 var UploadDropZoneContext = require('./components/DropZone/UploadDropZoneContext.js');
-var EmptyState = require('./components/EmptyState.js');
 var FilterBadges = require('./components/FilterBadges.js');
 var FilterMenu = require('./components/FilterMenu.js');
 var FolderFormDialog = require('./components/FolderFormDialog.js');
 var FolderTree = require('./components/FolderTree/FolderTree.js');
 var ImportFromUrlDialog = require('./components/ImportFromUrlDialog.js');
-var ItemContextMenu = require('./components/ItemContextMenu.js');
 var MainAreaContextMenu = require('./components/MainAreaContextMenu.js');
 var SortMenu = require('./components/SortMenu.js');
+var ViewToggle = require('./components/ViewToggle.js');
 var constants = require('./constants.js');
-var useAssetSearch = require('./hooks/useAssetSearch.js');
 var useAssetSelection = require('./hooks/useAssetSelection.js');
+var useAssetsList = require('./hooks/useAssetsList.js');
 var useBusyAssets = require('./hooks/useBusyAssets.js');
 var useFolderInfo = require('./hooks/useFolderInfo.js');
-var useFolderNavigation = require('./hooks/useFolderNavigation.js');
-var useInfiniteAssets = require('./hooks/useInfiniteAssets.js');
-var useInfiniteScrollSentinel = require('./hooks/useInfiniteScrollSentinel.js');
-var useListFilters = require('./hooks/useListFilters.js');
 var useListScrollRestoration = require('./hooks/useListScrollRestoration.js');
-var useListSort = require('./hooks/useListSort.js');
-var buildAssetFilters = require('./utils/buildAssetFilters.js');
 var listQueryKey = require('./utils/listQueryKey.js');
-var mergeMixedList = require('./utils/mergeMixedList.js');
-var renderedKeys = require('./utils/renderedKeys.js');
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
-
-// The negative bottom margin shrinks the trigger area by a pixel so the 1px
-// sentinel sitting exactly at the fold (when a page's rows happen to fill the
-// viewport) reads as "not visible" and doesn't pull an extra page. It still
-// triggers as soon as the sentinel scrolls a hair into view. Tune the bottom
-// value if the list over- or under-fetches near the fold.
-const INTERSECTION_OPTIONS = {
-    threshold: 0,
-    rootMargin: '0px 0px -1px 0px'
-};
 // Module-level so the header sentinel's observer isn't rebuilt every render.
 const HEADER_SENTINEL_OPTIONS = {
     threshold: 0
@@ -110,116 +68,6 @@ const getSearchResultsCountMessage = (numberFolders, numberAssets)=>{
     }
     return SEARCH_RESULTS_COUNT_MESSAGES.both;
 };
-const AssetsView = ({ view, folders, isLoadingFolders, assets, isLoadingAssets, isFetchingMore, hasNextPage, fetchNextPage, error, locations, searchQuery, assetsSort, foldersPosition, hasActiveFilters, onClearFilters, onAssetItemClick, onAddAssets, canAddAssets, onClearSearch })=>{
-    const { formatMessage } = reactIntl.useIntl();
-    const isGridView = view === constants.viewOptions.GRID;
-    const isLoading = isLoadingAssets || isLoadingFolders;
-    // "Folders: Mixed with files" — interleave the complete folder list into the
-    // loaded asset stream client-side, following the active sort. Table view
-    // only: the grid always keeps folders in their own band on top.
-    const mixedItems = React.useMemo(()=>foldersPosition === 'mixed' && !isGridView ? mergeMixedList.mergeMixedList({
-            folders,
-            assets,
-            sort: assetsSort,
-            hasNextPage
-        }) : null, [
-        foldersPosition,
-        isGridView,
-        folders,
-        assets,
-        assetsSort,
-        hasNextPage
-    ]);
-    // Derived once here so the table, the grid and the bulk bar all agree on what
-    // is on screen — in mixed mode that is not simply every folder.
-    const renderedKeys$1 = renderedKeys.buildRenderedKeys({
-        folders,
-        assets,
-        mixedItems
-    });
-    const loadMoreRef = useInfiniteScrollSentinel.useInfiniteScrollSentinel({
-        hasNextPage,
-        isFetchingMore,
-        onLoadMore: fetchNextPage,
-        options: INTERSECTION_OPTIONS
-    });
-    if (isLoading) {
-        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-            justifyContent: "center",
-            padding: 8,
-            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
-                children: formatMessage({
-                    id: 'app.loading',
-                    defaultMessage: 'Loading...'
-                })
-            })
-        });
-    }
-    if (error) {
-        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
-            padding: 8,
-            children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
-                textColor: "danger600",
-                children: formatMessage({
-                    id: translations.getTranslationKey('list.assets.error'),
-                    defaultMessage: 'An error occurred while fetching assets.'
-                })
-            })
-        });
-    }
-    if (folders.length === 0 && assets.length === 0) {
-        // While searching, the search empty state wins (it names the query); a
-        // filter-only dead end gets the filtered variant with its Clear action.
-        return hasActiveFilters && !searchQuery ? /*#__PURE__*/ jsxRuntime.jsx(EmptyState.FilteredEmptyState, {
-            onClearFilters: onClearFilters
-        }) : /*#__PURE__*/ jsxRuntime.jsx(EmptyState.EmptyState, {
-            onAddAssets: onAddAssets,
-            canAddAssets: canAddAssets,
-            searchQuery: searchQuery,
-            onClearSearch: onClearSearch
-        });
-    }
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(ItemContextMenu.ItemContextMenuProvider, {
-                locations: locations,
-                children: isGridView ? /*#__PURE__*/ jsxRuntime.jsx(AssetsGrid.AssetsGrid, {
-                    folders: folders,
-                    assets: assets,
-                    renderedKeys: renderedKeys$1,
-                    onAssetItemClick: onAssetItemClick
-                }) : /*#__PURE__*/ jsxRuntime.jsx(AssetsTable.AssetsTable, {
-                    assets: assets,
-                    folders: folders,
-                    mixedItems: mixedItems,
-                    renderedKeys: renderedKeys$1,
-                    onAssetItemClick: onAssetItemClick
-                })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx("div", {
-                ref: loadMoreRef,
-                style: {
-                    height: 1
-                }
-            }),
-            isFetchingMore && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
-                justifyContent: "center",
-                padding: 4,
-                children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
-                    children: formatMessage({
-                        id: translations.getTranslationKey('list.assets.loading-more'),
-                        defaultMessage: 'Loading more assets...'
-                    })
-                })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(BulkActionsBar.BulkActionsBar, {
-                assets: assets,
-                renderedKeys: renderedKeys$1,
-                locations: locations
-            })
-        ]
-    });
-};
 const ClearSelectionOnChange = ({ listQueryKey })=>{
     const { clear } = useAssetSelection.useAssetSelection();
     React.useEffect(()=>{
@@ -232,50 +80,7 @@ const ClearSelectionOnChange = ({ listQueryKey })=>{
 };
 /* -------------------------------------------------------------------------------------------------
  * AssetsPage
- * -----------------------------------------------------------------------------------------------*/ /**
- * Mirrors the design-system Toggle look (grey track, white active segment
- * card) — reproduced locally because the DS component is a labels-only
- * boolean input (no icons) and paints its left segment in danger red. Here
- * both segments use the primary blue when active.
- */ const StyledToggleGroup = styledComponents.styled(ToggleGroup__namespace.Root)`
-  display: flex;
-  padding: ${({ theme })=>theme.spaces[1]};
-  background: ${({ theme })=>theme.colors.neutral100};
-  border: 1px solid ${({ theme })=>theme.colors.neutral200};
-  border-radius: ${({ theme })=>theme.borderRadius};
-`;
-const StyledToggleItem = styledComponents.styled(ToggleGroup__namespace.Item)`
-  display: flex;
-  flex: 1 1 50%;
-  align-items: center;
-  justify-content: center;
-  gap: ${({ theme })=>theme.spaces[2]};
-  padding: 0.6rem ${({ theme })=>theme.spaces[3]};
-  border: 1px solid transparent;
-  border-radius: ${({ theme })=>theme.borderRadius};
-  background: transparent;
-  color: ${({ theme })=>theme.colors.neutral600};
-  cursor: pointer;
-  font-size: ${({ theme })=>theme.fontSizes[1]};
-  font-weight: ${({ theme })=>theme.fontWeights.semiBold};
-  white-space: nowrap;
-
-  &:hover {
-    color: ${({ theme })=>theme.colors.neutral700};
-  }
-
-  &[data-state='on'] {
-    background: ${({ theme })=>theme.colors.neutral0};
-    border-color: ${({ theme })=>theme.colors.neutral200};
-    color: ${({ theme })=>theme.colors.primary600};
-  }
-
-  svg {
-    width: 1.6rem;
-    height: 1.6rem;
-  }
-`;
-// A single sticky header — same layout scrolled or not, so the toolbar
+ * -----------------------------------------------------------------------------------------------*/ // A single sticky header — same layout scrolled or not, so the toolbar
 // alignment can't reflow the way the shared sticky header did. Once the list
 // scrolls under it, it shrinks (reduced vertical padding + a shadow to lift it
 // off the rows), like the sticky headers elsewhere in the admin. Horizontal
@@ -385,73 +190,18 @@ const SearchSlot = styledComponents.styled(designSystem.Box)`
     flex: 0 1 auto;
   }
 `;
-// Toggle labels are hidden below desktop — icons only (buttons keep aria-label).
-const ToggleLabel = styledComponents.styled.span`
-  display: none;
-
-  ${({ theme })=>theme.breakpoints.large} {
-    display: inline;
-  }
-`;
 const AssetsPage = ()=>{
     const { formatMessage } = reactIntl.useIntl();
     const { openDetails } = AssetDetailsDrawer.useAssetDetailsParam();
     const { canCreate, canUpdate } = useMediaLibraryPermissions.useMediaLibraryPermissions();
-    const { currentFolderId, navigateToFolderId, navigateToRoot } = useFolderNavigation.useFolderNavigation();
-    // Deleted or missing folders (404) need a fetch — handled here, not in
-    // `useFolderNavigation` (which only strips malformed ?folder= values).
-    const { error: currentFolderError } = folders.useGetFolderQuery({
-        id: currentFolderId
-    }, {
-        skip: currentFolderId === null
-    });
-    React.useEffect(()=>{
-        if (currentFolderError?.name === 'NotFoundError') {
-            navigateToRoot();
-        }
-    }, [
-        currentFolderError,
-        navigateToRoot
-    ]);
+    const { currentFolderId, navigateToFolderId, searchQuery, isSearching, clearSearch, listSort, listFilters, assets, subscribers: assetPageSubscribers, pagination, isLoadingAssets, isFetchingMore, hasNextPage, fetchNextPage, assetsError, folders, isLoadingFolders } = useAssetsList.useAssetsList();
     const { title, itemCount } = useFolderInfo.useFolderInfo(currentFolderId);
-    const { searchQuery, isSearching, clearSearch } = useAssetSearch.useAssetSearch();
-    const listSort = useListSort.useListSort();
-    const listFilters = useListFilters.useListFilters();
-    // Resolve relative presets against "now" only when the filters change —
-    // keeps the query args (and RTK cache keys) stable between renders.
-    const builtFilters = React.useMemo(()=>buildAssetFilters.buildAssetFilters(listFilters.filters, new Date()), // eslint-disable-next-line react-hooks/exhaustive-deps -- serialized is the value identity of filters
-    [
-        listFilters.serialized
-    ]);
-    const { assets, subscribers: assetPageSubscribers, pagination, isLoading: isLoadingAssets, isFetchingMore, hasNextPage, fetchNextPage, error: assetsError } = useInfiniteAssets.useInfiniteAssets({
-        // The real folder is passed even while searching: the service drops the folder
-        // filter when `search` is set, so results are still global. List filters
-        // compose with both modes.
-        folder: currentFolderId,
-        search: searchQuery || undefined,
-        sort: listSort.assetsSort,
-        filters: builtFilters.fileClauses,
-        enabled: builtFilters.showFiles
-    });
-    const { data: fetchedFolders = [], isLoading: isLoadingFolders } = folders.useGetFoldersQuery({
-        parentId: currentFolderId,
-        search: searchQuery || undefined,
-        sort: listSort.foldersSort,
-        filters: builtFilters.folderClauses
-    }, {
-        skip: !builtFilters.showFolders
-    });
-    // A type badge can exclude folders structurally (e.g. "Type is Picture").
-    const folders$1 = React.useMemo(()=>builtFilters.showFolders ? fetchedFolders : [], [
-        builtFilters.showFolders,
-        fetchedFolders
-    ]);
     // Both move affordances (drag and the bulk bar) resolve each item's parent
     // from the rows on screen — while searching, results are global and the
     // folder currently open says nothing about where an item lives.
-    const itemLocations$1 = React.useMemo(()=>itemLocations.buildItemLocations(assets, folders$1), [
+    const itemLocations$1 = React.useMemo(()=>itemLocations.buildItemLocations(assets, folders), [
         assets,
-        folders$1
+        folders
     ]);
     const itemCountLabel = formatMessage(ITEM_COUNT_MESSAGE, {
         count: itemCount
@@ -462,7 +212,7 @@ const AssetsPage = ()=>{
     }, {
         query: searchQuery
     });
-    const numberFolders = folders$1.length;
+    const numberFolders = folders.length;
     const numberAssets = pagination?.total ?? 0;
     const searchResultsCountLabel = formatMessage(getSearchResultsCountMessage(numberFolders, numberAssets), {
         numberFolders,
@@ -723,48 +473,9 @@ const AssetsPage = ()=>{
                                                                                 showFoldersGroup: !isGridView
                                                                             })
                                                                         }),
-                                                                        /*#__PURE__*/ jsxRuntime.jsxs(StyledToggleGroup, {
-                                                                            type: "single",
-                                                                            value: isGridView ? 'grid' : 'table',
-                                                                            onValueChange: (value)=>value && setView(value === 'grid' ? constants.viewOptions.GRID : constants.viewOptions.TABLE),
-                                                                            "aria-label": formatMessage({
-                                                                                id: translations.getTranslationKey('view.switch.label'),
-                                                                                defaultMessage: 'View options'
-                                                                            }),
-                                                                            children: [
-                                                                                /*#__PURE__*/ jsxRuntime.jsxs(StyledToggleItem, {
-                                                                                    value: "table",
-                                                                                    "aria-label": formatMessage({
-                                                                                        id: translations.getTranslationKey('view.table'),
-                                                                                        defaultMessage: 'Table view'
-                                                                                    }),
-                                                                                    children: [
-                                                                                        /*#__PURE__*/ jsxRuntime.jsx(icons.List, {}),
-                                                                                        /*#__PURE__*/ jsxRuntime.jsx(ToggleLabel, {
-                                                                                            children: formatMessage({
-                                                                                                id: translations.getTranslationKey('view.table'),
-                                                                                                defaultMessage: 'Table view'
-                                                                                            })
-                                                                                        })
-                                                                                    ]
-                                                                                }),
-                                                                                /*#__PURE__*/ jsxRuntime.jsxs(StyledToggleItem, {
-                                                                                    value: "grid",
-                                                                                    "aria-label": formatMessage({
-                                                                                        id: translations.getTranslationKey('view.grid'),
-                                                                                        defaultMessage: 'Grid view'
-                                                                                    }),
-                                                                                    children: [
-                                                                                        /*#__PURE__*/ jsxRuntime.jsx(icons.GridFour, {}),
-                                                                                        /*#__PURE__*/ jsxRuntime.jsx(ToggleLabel, {
-                                                                                            children: formatMessage({
-                                                                                                id: translations.getTranslationKey('view.grid'),
-                                                                                                defaultMessage: 'Grid view'
-                                                                                            })
-                                                                                        })
-                                                                                    ]
-                                                                                })
-                                                                            ]
+                                                                        /*#__PURE__*/ jsxRuntime.jsx(ViewToggle.ViewToggle, {
+                                                                            view: view,
+                                                                            onChange: setView
                                                                         })
                                                                     ]
                                                                 })
@@ -785,9 +496,9 @@ const AssetsPage = ()=>{
                                                                     uploadDropZoneRef: uploadDropZoneRef,
                                                                     folderName: title
                                                                 }),
-                                                                /*#__PURE__*/ jsxRuntime.jsx(AssetsView, {
+                                                                /*#__PURE__*/ jsxRuntime.jsx(AssetsView.AssetsView, {
                                                                     view: view,
-                                                                    folders: folders$1,
+                                                                    folders: folders,
                                                                     isLoadingFolders: isLoadingFolders,
                                                                     assets: assets,
                                                                     isLoadingAssets: isLoadingAssets,
@@ -831,7 +542,7 @@ const AssetsPage = ()=>{
                 onClose: ()=>setIsUrlDialogOpen(false),
                 onUpload: handleUrlUpload
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(AssetDetailsDrawer.AssetDetailsDrawer, {})
+            /*#__PURE__*/ jsxRuntime.jsx(AssetDetailsDrawer.AssetDetailsDrawerFromUrl, {})
         ]
     });
 };