[6.x] Export panels, action menus and UI modals from @craftcms/cp

CHANGELOG-WIP.md

@@ -312,6 +312,7 @@
 - Plugin settings are now persisted based on the settings model’s public properties, via `CraftCms\Cms\Plugin\PluginSettings::configData()`. Settings stored in private properties with getter and setter methods must be redeclared as public properties, or included by overriding `configData()`.
 - Plugins’ control panel nav items can now be shown as groups, by calling `group(true)` on the item returned by `getCpNavItem()` and passing its items to `subnav()`. ([#19903](https://github.com/craftcms/cms/pull/19903))
 - Plugin bundles can now import the control panel’s components and composables from the `@craftcms/cp` import-map module, including `ElementIndexPage`, `ElementEditor`, `AdminTable`, and `useCraftTable`. ([#19912](https://github.com/craftcms/cms/issues/19912))
+- Added `HtmlFragmentRenderer`, `MetadataDetails`, `ScreenPanel`, `ActivityTimeline`, `ElementActionMenu`, `openUiModal()`, and `useInertiaUiRenderer()` to the `@craftcms/cp` import-map module, for plugin pages that build their own screens. `ScreenPanel`’s default slot now receives an `active` prop, which is true while its panel is open. ([#20570](https://github.com/craftcms/cms/pull/20570))
 - Added `CraftCms\Cms\Element\Contracts\ElementInterface::supportsSourceBadgeCounts()`, `sourceSupportsBadgeCount()`, and `sourceBadgeCount()`, and the `defaultBadgeCount` source key, for element types whose sources can show a count of their elements.
 - Added `CraftCms\Cms\Cp\Data\ActionItem::$badgeLabel`. Element sources’ `badgeLabel` keys are now passed to screen readers in the control panel nav.
 - `<craft-badge-indicator>` now has a `max` property, which sets the largest count shown before it’s shortened to “99+”. Set it to `Infinity` to show the whole count. Counts are now formatted for the page’s language.

resources/js/common/components/ScreenPanel.vue

@@ -80,6 +80,12 @@
   onBeforeUnmount(() => panels?.unregister(props.id));
 
   const section = computed(() => panels?.sections.get(props.id) ?? null);
+  const active = computed(() => panels?.openPanelId.value === props.id);
+
+  defineSlots<{
+    default?(props: {active: boolean}): unknown;
+    'header-actions'?(): unknown;
+  }>();
 </script>
 
 <template>
@@ -90,7 +96,7 @@
         <template #header-actions>
           <slot name="header-actions"></slot>
         </template>
-        <slot></slot>
+        <slot :active="active"></slot>
       </DetailsPanelContent>
     </Teleport>
   </div>

resources/js/cp-module.ts

@@ -47,8 +47,55 @@ export const DeleteButton = defineAsyncComponent(
   () => import('./modules/admin-table/components/DeleteButton.vue')
 );
 
+/**
+ * Renders a server-built `HtmlFragment` (HTML plus its head and body assets),
+ * so a plugin's page can host HTML from template hooks or other server code.
+ */
+export const HtmlFragmentRenderer = defineAsyncComponent(
+  () => import('./common/components/HtmlFragmentRenderer.vue')
+);
+
+/**
+ * A screen's details column: an Info panel showing its default slot (sidebar
+ * content) above the server's metadata HTML.
+ */
+export const MetadataDetails = defineAsyncComponent(
+  () => import('./common/components/MetadataDetails.vue')
+);
+
+/**
+ * Adds a panel to the screen's details column while it's mounted: a rail icon
+ * and the panel it opens, with the default slot as the panel's content.
+ */
+export const ScreenPanel = defineAsyncComponent(
+  () => import('./common/components/ScreenPanel.vue')
+);
+
+/**
+ * An element's activity timeline, with its comments, for a panel that shows
+ * the activity recorded for an element.
+ */
+export const ActivityTimeline = defineAsyncComponent(
+  () => import('./modules/activity/components/ActivityTimeline.vue')
+);
+
+/**
+ * An element's own actions (Delete, Copy URL, …), from its
+ * `actionMenuDescriptors()`, with their behaviors dispatched client-side.
+ */
+export const ElementActionMenu = defineAsyncComponent(
+  () => import('./modules/elements/components/ElementActionMenu.vue')
+);
+
 export type {ActionItem, ActionItemLink} from './common/types';
 
+export {openUiModal, type UiModalOptions} from './modules/ui/open-ui-modal';
+
+export {
+  useInertiaUiRenderer,
+  type UiRendererInstance,
+} from './modules/ui/useInertiaUiRenderer';
+
 /**
  * Lets a plugin's page configure the control panel shell around it — its
  * secondary nav, most usefully, so an index can put its own sources there.