@antelopejs/dms 0.9.8 → 0.10.0

package/frontend-vue/layers/dms-ui/app/build/components/containers/drawer/DynamicDrawer.vue

@@ -1,12 +1,38 @@
 <script setup lang="ts">
-import type { Component } from "vue";
+import { getCurrentInstance, type Component } from "vue";
+import {
+  formBusInjectionKey,
+  formErrorsInjectionKey,
+  formFieldInjectionKey,
+  formInputsInjectionKey,
+  formLoadingInjectionKey,
+  formOptionsInjectionKey,
+  formStateInjectionKey,
+  inputIdInjectionKey,
+} from "@nuxt/ui/runtime/composables/useFormField.js";
 import { DialogDescription, DialogTitle, VisuallyHidden } from "reka-ui";
+import { useWindowSize } from "@vueuse/core";
 import type {
   ContainerColor,
   DrawerDirection,
 } from "../../../../composables/containers/types";
+import type { ModalSize } from "../../../../types/modal";
+import {
+  drawerSizeStorage,
+  isSideDrawer,
+  resolveDrawerSizeBounds,
+  useDrawerSizePreferences,
+} from "../../../composables/containers/drawerSize";
+import {
+  type ResizeSide,
+  useResizableSize,
+} from "../../../composables/containers/useResizableSize";
 import DmsIconWell from "../../../../components/icon-well/IconWell.vue";
-import { CONTAINER_SKELETON_FIELDS } from "../constants";
+import {
+  CLOSING_OVERLAY_CLASS,
+  CONTAINER_SKELETON_CLASS,
+  CONTAINER_SKELETON_FIELDS,
+} from "../constants";
 import { DMS_CONTAINER_KEY } from "../../../composables/containers/context";
 
 interface DynamicDrawerProps {
@@ -20,8 +46,20 @@ interface DynamicDrawerProps {
   headerComponent?: Component;
   headerComponentOptions?: Record<string, unknown>;
   direction?: DrawerDirection;
+  /**
+   * Width a side drawer opens at, from `lg`: a modal's width at that size;
+   * 600px without one. Below `lg`, only `full` fills a phone's screen.
+   */
+  size?: ModalSize;
+  /** The key the size the user gives the drawer is remembered under. */
+  sizeKey?: string;
   icon?: string;
   color?: ContainerColor;
+  /**
+   * What the component that opened the drawer provides (`useDrawer` passes
+   * it): the drawer and its body inject it as if rendered in its tree.
+   */
+  callerProvides?: object;
 }
 
 interface DynamicDrawerEmits {
@@ -34,29 +72,181 @@ const props = withDefaults(defineProps<DynamicDrawerProps>(), {
   headerComponent: undefined,
   headerComponentOptions: undefined,
   direction: "bottom",
+  size: undefined,
+  sizeKey: undefined,
   icon: undefined,
   color: "primary",
+  callerProvides: undefined,
 });
 const emit = defineEmits<DynamicDrawerEmits>();
 
-// A side drawer is a sheet as wide as a side panel by default (see
-// `useAppSidePanels`), never wider than the window less the drawer's gutter.
-// Its own padding is the gutter: the containers drop theirs.
-const SIDE_DIRECTIONS: readonly DrawerDirection[] = ["left", "right"];
+// Mounted by the overlay provider, the drawer would only see the app's
+// provides: its own start from the caller's instead, before it provides
+// anything (Vue's `provide` then writes into them). What the drawer provides
+// itself (its container, the form surface) still wins over the caller's.
+const NUXT_UI_FORM_KEYS = [
+  formOptionsInjectionKey,
+  formBusInjectionKey,
+  formStateInjectionKey,
+  formFieldInjectionKey,
+  inputIdInjectionKey,
+  formInputsInjectionKey,
+  formLoadingInjectionKey,
+  formErrorsInjectionKey,
+];
+const drawerInstance = getCurrentInstance() as { provides: object } | null;
+if (drawerInstance && props.callerProvides) {
+  drawerInstance.provides = Object.create(props.callerProvides);
+  // A drawer is a surface of its own: a field in its body does not join a
+  // Nuxt UI form or form field around the component that opened it.
+  for (const key of NUXT_UI_FORM_KEYS) provide(key as symbol, undefined);
+}
+
+// Below `lg` a side drawer is a sheet as wide as a side panel (see
+// `useAppSidePanels`), or a modal's width at its size, never wider than the
+// window less the drawer's gutter (Nuxt UI's `max-w-[calc(100%-2rem)]`): on
+// a phone every side drawer leaves the same strip of backdrop, sized or not,
+// and only `full` fills the screen. From
+// `lg` it takes the width the user resizes it to (600px at first), kept per
+// drawer. Its own padding is the gutter: the containers drop theirs.
 const SIDE_DRAWER_CONTENT = "w-[440px]";
+const SIDE_DRAWER_SIZE_CONTENT: Record<ModalSize, string> = {
+  sm: "w-sm",
+  md: "w-md",
+  lg: "w-lg",
+  xl: "w-xl",
+  "2xl": "w-2xl",
+  "3xl": "w-3xl",
+  "4xl": "w-4xl",
+  "5xl": "w-5xl",
+  full: "w-full max-w-full rounded-none",
+};
+const SIZE_VARIABLE = "--dms-drawer-size";
+const SIDE_DRAWER_DESKTOP_CONTENT = "lg:w-(--dms-drawer-size)";
+const EDGE_DRAWER_DESKTOP_CONTENT = "lg:h-(--dms-drawer-size)";
 const SIDE_CONTAINER_CLASS = "px-0 sm:px-0 lg:px-0";
 const EDGE_CONTAINER_CLASS = "max-sm:px-0";
 
-const isSide = computed(() => SIDE_DIRECTIONS.includes(props.direction));
+// The handle sits on the drawer's inner edge, over its border.
+const HANDLE_CLASSES: Record<ResizeSide, string> = {
+  right: "inset-y-0 left-0 w-2 -translate-x-1/2 cursor-ew-resize",
+  left: "inset-y-0 right-0 w-2 translate-x-1/2 cursor-ew-resize",
+  bottom: "inset-x-0 top-0 h-2 -translate-y-1/2 cursor-ns-resize",
+  top: "inset-x-0 bottom-0 h-2 translate-y-1/2 cursor-ns-resize",
+};
+const SIDE_HANDLE_LINE = "inset-y-0 start-1/2 w-0.5 -translate-x-1/2";
+const EDGE_HANDLE_LINE = "inset-x-0 top-1/2 h-0.5 -translate-y-1/2";
+
+const isSide = computed(() => isSideDrawer(props.direction));
 const containerClass = computed(() =>
   isSide.value ? SIDE_CONTAINER_CLASS : EDGE_CONTAINER_CLASS,
 );
+
+const viewport = useWindowSize();
+const {
+  size: resizedSize,
+  bounds: sizeBounds,
+  isDragging,
+  startDrag,
+  drag,
+  endDrag,
+  resizeFromKey,
+  reset: resetSize,
+} = useResizableSize({
+  side: props.direction,
+  bounds: () =>
+    resolveDrawerSizeBounds(
+      props.direction,
+      { width: viewport.width.value, height: viewport.height.value },
+      props.size,
+    ),
+  storage: drawerSizeStorage(
+    useDrawerSizePreferences(),
+    props.sizeKey,
+    props.direction,
+  ),
+});
+
+const sideContentClass = computed(() => {
+  const narrow = props.size
+    ? SIDE_DRAWER_SIZE_CONTENT[props.size]
+    : SIDE_DRAWER_CONTENT;
+  return `${narrow} ${SIDE_DRAWER_DESKTOP_CONTENT}`;
+});
+// A top or bottom drawer keeps its natural height until resized.
+const contentClass = computed(() => {
+  if (isSide.value) return sideContentClass.value;
+  return resizedSize.value === undefined
+    ? undefined
+    : EDGE_DRAWER_DESKTOP_CONTENT;
+});
+// Reka keeps the page's `pointer-events: none` on the body until the
+// panel has slid out (half a second): released as soon as the close starts,
+// a click on the page lands while the drawer animates away.
+const contentProps = computed(() => ({
+  disableOutsidePointerEvents: isOpen.value,
+  ...(resizedSize.value !== undefined && {
+    style: { [SIZE_VARIABLE]: `${resizedSize.value}px` },
+  }),
+}));
+const handleClass = computed(() => HANDLE_CLASSES[props.direction]);
+const handleLineClass = computed(() =>
+  isSide.value ? SIDE_HANDLE_LINE : EDGE_HANDLE_LINE,
+);
+const handleOrientation = computed(() =>
+  isSide.value ? "vertical" : "horizontal",
+);
+
+function renderedSize(handle: Element): number | undefined {
+  const content = handle.closest("[data-slot='content']");
+  if (!content) return undefined;
+  const rect = content.getBoundingClientRect();
+  return isSide.value ? rect.width : rect.height;
+}
+
+// The pointerdown is left to bubble: reka's outside-click detection listens
+// on the document and, if it never saw this press inside the drawer, would
+// take the next click on the backdrop for one inside and ignore it. The
+// drawer's own drag cannot start from it: vaul drags only a dismissible
+// drawer, and this one is not.
+function startHandleDrag(event: PointerEvent): void {
+  const handle = event.currentTarget as HTMLElement;
+  handle.setPointerCapture?.(event.pointerId);
+  const rendered = renderedSize(handle) || resizedSize.value;
+  if (rendered) startDrag(event, rendered);
+}
+
+function resizeHandleFromKey(event: KeyboardEvent): void {
+  resizeFromKey(event, renderedSize(event.currentTarget as HTMLElement));
+}
+
+// From lg the resize handle takes the inner edge: the drawer's own grip,
+// drawn in its middle, would sit next to it. Below lg a top or bottom
+// drawer keeps it. A side drawer never draws one: it is not dragged away
+// (`dismissible` is off), and the grip took 22px of a phone's gutter.
+// Important: vaul's unlayered `[data-vaul-handle]` rule outranks a utility.
+const DESKTOP_HIDDEN_GRIP = "lg:hidden!";
+
+// The body scrolls, not the whole drawer: the header (title, row steps,
+// close) stays in view. The body reaches over the container's side padding
+// so its scrollbar sits on the drawer's edge, and carries the bottom padding
+// a form's sticky footer reaches over to sit flush with it (see Form.vue).
+// The body is a flex column: a body component whose root grows (`flex-1`)
+// fills the drawer's height while its content is short, so a
+// `<DmsContainerFooter>` at its end sits at the bottom, and it scrolls past
+// it while long.
+const DRAWER_CONTAINER_CLASS =
+  "[--dms-form-foot-pb:1rem] min-h-0 overflow-y-hidden pb-0";
+const DRAWER_BODY_CLASS =
+  "flex min-h-0 flex-col overflow-y-auto -mx-4 px-4 pb-4";
+
 const drawerUi = computed(() => ({
-  ...(isSide.value && { content: SIDE_DRAWER_CONTENT }),
+  ...(contentClass.value && { content: contentClass.value }),
+  overlay: CLOSING_OVERLAY_CLASS,
+  handle: DESKTOP_HIDDEN_GRIP,
   header: "border-b border-default flex shrink-0 items-center gap-4 pb-4",
-  // The scroll area's bottom padding: a form's sticky footer sits flush
-  // with the drawer's edge (see Form.vue).
-  container: "[--dms-form-foot-pb:1rem]",
+  container: DRAWER_CONTAINER_CLASS,
+  body: DRAWER_BODY_CLASS,
 }));
 
 // Let a DmsForm rendered in the body drop its DmsCard (the drawer is the surface).
@@ -126,10 +316,41 @@ const { t } = useI18n();
     :description="description"
     :title="title"
     :dismissible="false"
+    :handle="!isSide"
     :ui="drawerUi"
+    :content="contentProps"
     @close:prevent="tryClose"
   >
     <template #header>
+      <!-- Positioned against the drawer's content, which is fixed. From lg,
+        a drag or the arrow keys resize the drawer, a double-click gives it
+        its default size back. -->
+      <div
+        role="separator"
+        tabindex="0"
+        data-dms-drawer-handle
+        :aria-orientation="handleOrientation"
+        :aria-label="t('dms.drawer.resize')"
+        :aria-valuenow="resizedSize"
+        :aria-valuemin="sizeBounds.minSize"
+        :aria-valuemax="sizeBounds.maxSize"
+        :data-dragging="isDragging || undefined"
+        class="group/handle absolute z-10 hidden touch-none outline-none select-none lg:block"
+        :class="handleClass"
+        @pointerdown="startHandleDrag"
+        @pointermove="drag"
+        @pointerup="endDrag"
+        @pointercancel="endDrag"
+        @lostpointercapture="endDrag"
+        @keydown="resizeHandleFromKey"
+        @dblclick="resetSize"
+      >
+        <span
+          aria-hidden="true"
+          class="group-hover/handle:bg-primary group-focus-visible/handle:bg-primary absolute transition-colors motion-reduce:transition-none"
+          :class="[handleLineClass, { 'bg-primary': isDragging }]"
+        />
+      </div>
       <!-- Same container as the body so the title aligns with the form. On
         phones the drawer's own padding is the 16px gutter: the container
         drops its own. -->
@@ -139,8 +360,11 @@ const { t } = useI18n();
       >
         <DmsIconWell v-if="icon" :icon="icon" :tone="color" />
         <div v-if="headerComponent" class="min-w-0 flex-1">
+          <!-- The header component draws the visible heading (the row
+            header's names the row): the dialog's own title only labels it,
+            without a second heading of the same text. -->
           <VisuallyHidden>
-            <DialogTitle>{{ title }}</DialogTitle>
+            <DialogTitle as="span">{{ title }}</DialogTitle>
             <DialogDescription>{{ description }}</DialogDescription>
           </VisuallyHidden>
           <Suspense>
@@ -170,14 +394,19 @@ const { t } = useI18n();
           variant="ghost"
           size="sm"
           square
-          aria-label="Close"
+          :aria-label="t('dms.a11y.close')"
           :disabled="isContentLoading"
           @click="tryClose"
         />
       </UContainer>
     </template>
     <template #body>
-      <UContainer :class="containerClass">
+      <!-- A size container: what the body lays out by width (a form's
+        columns, a list's) follows the drawer as it is resized. -->
+      <UContainer
+        class="@container flex flex-1 flex-col"
+        :class="containerClass"
+      >
         <Suspense @pending="onContentPending" @resolve="onContentResolve">
           <component
             :is="component"
@@ -187,7 +416,7 @@ const { t } = useI18n();
             @success="handleSuccess"
           />
           <template #fallback>
-            <div class="grid gap-4 sm:grid-cols-2" aria-busy="true">
+            <div :class="CONTAINER_SKELETON_CLASS" aria-busy="true">
               <div
                 v-for="field in CONTAINER_SKELETON_FIELDS"
                 :key="field"

package/frontend-vue/layers/dms-ui/app/build/components/containers/modal/DynamicModal.vue

@@ -4,7 +4,11 @@ import { DialogDescription, DialogTitle, VisuallyHidden } from "reka-ui";
 import type { ModalSize } from "../../../../types/modal";
 import type { ContainerColor } from "../../../../composables/containers/types";
 import DmsIconWell from "../../../../components/icon-well/IconWell.vue";
-import { CONTAINER_SKELETON_FIELDS } from "../constants";
+import {
+  CLOSING_OVERLAY_CLASS,
+  CONTAINER_SKELETON_CLASS,
+  CONTAINER_SKELETON_FIELDS,
+} from "../constants";
 import { DMS_CONTAINER_KEY } from "../../../composables/containers/context";
 
 interface DynamicModalProps {
@@ -78,6 +82,7 @@ const resolvedSize = computed(() => {
 // A divided head: the body below is a form, not a continuation of the title.
 const modalUi = computed(() => ({
   content: SIZE_CONTENT[resolvedSize.value],
+  overlay: CLOSING_OVERLAY_CLASS,
   header: "border-b border-default pb-4 shrink-0",
   // The body's bottom and side padding: a form's sticky footer sits flush
   // with the modal's edges (see Form.vue).
@@ -87,6 +92,11 @@ const modalUi = computed(() => ({
 const { executeGuards, clearGuards } = useLeaveGuard();
 
 const isOpen = defineModel<boolean>("open", { default: true });
+// Reka keeps the page's `pointer-events: none` on the body until the modal
+// has scaled out: released as soon as the close starts, a click lands.
+const contentProps = computed(() => ({
+  disableOutsidePointerEvents: isOpen.value,
+}));
 const isContentLoading = ref(true);
 let closePromise: Promise<void> | null = null;
 
@@ -148,6 +158,7 @@ const { t } = useI18n();
     :title="title"
     :dismissible="false"
     :ui="modalUi"
+    :content="contentProps"
     @close:prevent="tryClose"
   >
     <template #header>
@@ -185,37 +196,43 @@ const { t } = useI18n();
           variant="ghost"
           size="sm"
           square
-          aria-label="Close"
+          :aria-label="t('dms.a11y.close')"
           :disabled="isContentLoading"
           @click="tryClose"
         />
       </div>
     </template>
     <template #body>
-      <Suspense @pending="onContentPending" @resolve="onContentResolve">
-        <component
-          :is="component"
-          :key="componentKey"
-          v-bind="componentOptions"
-          :container-id="containerId"
-          @success="handleSuccess"
-        />
-        <template #fallback>
-          <div class="grid gap-4 sm:grid-cols-2" aria-busy="true">
-            <div
-              v-for="field in CONTAINER_SKELETON_FIELDS"
-              :key="field"
-              class="flex flex-col gap-2"
-            >
-              <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-24" />
-              <USkeleton
-                :aria-label="t('dms.a11y.loading')"
-                class="h-8 w-full"
-              />
+      <!-- A size container: the body lays out by the modal's width. -->
+      <div class="@container">
+        <Suspense @pending="onContentPending" @resolve="onContentResolve">
+          <component
+            :is="component"
+            :key="componentKey"
+            v-bind="componentOptions"
+            :container-id="containerId"
+            @success="handleSuccess"
+          />
+          <template #fallback>
+            <div :class="CONTAINER_SKELETON_CLASS" aria-busy="true">
+              <div
+                v-for="field in CONTAINER_SKELETON_FIELDS"
+                :key="field"
+                class="flex flex-col gap-2"
+              >
+                <USkeleton
+                  :aria-label="t('dms.a11y.loading')"
+                  class="h-3 w-24"
+                />
+                <USkeleton
+                  :aria-label="t('dms.a11y.loading')"
+                  class="h-8 w-full"
+                />
+              </div>
             </div>
-          </div>
-        </template>
-      </Suspense>
+          </template>
+        </Suspense>
+      </div>
     </template>
   </UModal>
 </template>

package/frontend-vue/layers/dms-ui/app/build/components/containers/row/RowHeader.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+/**
+ * The header the DMS draws over a row opened in a side panel or a drawer:
+ * the title (naming the row when the target words it), the row's position
+ * among the rows the table shows, and previous / next (J and K too). The
+ * container adds its close button in the default slot. A long title wraps
+ * onto two lines before it is cut (a ticket subject, a site name on a phone).
+ */
+import { computed } from "vue";
+import type { Component } from "vue";
+import type { RowNavigation } from "../../../../types/row-navigation";
+
+interface RowHeaderProps {
+  heading?: string;
+  /** i18n key (`$`-prefixed) of the position, receiving `{ index, total }`. */
+  positionLabel?: string;
+  navigation?: RowNavigation;
+  /** Prefix of the `data-*` attributes tests and styles find the parts by. */
+  part: string;
+  headingClass?: string;
+  /** Wraps the title only after this separator (`<wbr>` after each one). */
+  headingBreakAfter?: string;
+  /** Text after the position, on its line, cut at its end. */
+  subtitle?: string;
+  subtitleClass?: string;
+  /** Drawn under the position line (pills, hints). */
+  component?: Component;
+  componentOptions?: Record<string, unknown>;
+}
+
+const props = withDefaults(defineProps<RowHeaderProps>(), {
+  heading: undefined,
+  positionLabel: undefined,
+  navigation: undefined,
+  headingClass: "text-[15px] leading-[1.3] font-[650] tracking-[-0.015em]",
+  headingBreakAfter: undefined,
+  subtitle: undefined,
+  subtitleClass: undefined,
+  component: undefined,
+  componentOptions: undefined,
+});
+
+const DEFAULT_POSITION_KEY = "side_panel.position";
+
+const { t, locale } = useI18n();
+const { processI18n } = useTranslation();
+
+// "26 120", not "26120": the figures take the locale's grouping.
+const numberFormat = computed(() => new Intl.NumberFormat(locale.value));
+
+const position = computed(() => {
+  if (!props.navigation) return undefined;
+  const params = {
+    index: numberFormat.value.format(props.navigation.index + 1),
+    total: numberFormat.value.format(props.navigation.total),
+  };
+  return props.positionLabel
+    ? processI18n(props.positionLabel, params)
+    : t(DEFAULT_POSITION_KEY, params);
+});
+
+// Each segment but the last keeps the separator that follows it.
+const headingSegments = computed(() => {
+  const separator = props.headingBreakAfter;
+  if (!props.heading || !separator) return undefined;
+  const parts = props.heading.split(separator);
+  return parts.map((part, index) =>
+    index < parts.length - 1 ? `${part}${separator}` : part,
+  );
+});
+
+const partAttribute = (name: string) => ({
+  [`data-${props.part}-${name}`]: "",
+});
+</script>
+
+<template>
+  <div class="flex min-w-0 flex-1 items-start gap-2">
+    <div
+      class="min-w-0 flex-1"
+      :class="component ? 'space-y-1.5' : 'self-center'"
+    >
+      <div>
+        <h2
+          class="text-highlighted line-clamp-2 [overflow-wrap:anywhere]"
+          :class="headingClass"
+          :title="heading"
+        >
+          <template v-if="headingSegments">
+            <template v-for="(segment, index) in headingSegments" :key="index">
+              <span>{{ segment }}</span>
+              <wbr />
+            </template>
+          </template>
+          <template v-else>{{ heading }}</template>
+        </h2>
+        <p
+          v-if="position || subtitle"
+          class="text-muted mt-0.5 text-[12.5px]"
+          :class="
+            subtitle ? 'flex min-w-0 items-baseline gap-x-1.5' : 'tabular-nums'
+          "
+        >
+          <span
+            v-if="position"
+            v-bind="partAttribute('position')"
+            :class="subtitle && 'shrink-0 tabular-nums'"
+          >
+            {{ position }}
+          </span>
+          <span v-if="position && subtitle" aria-hidden="true">·</span>
+          <span
+            v-if="subtitle"
+            v-bind="partAttribute('subtitle')"
+            class="min-w-0 truncate"
+            :class="subtitleClass"
+            :title="subtitle"
+          >
+            {{ subtitle }}
+          </span>
+        </p>
+      </div>
+      <component :is="component" v-if="component" v-bind="componentOptions" />
+    </div>
+    <div class="flex shrink-0 items-center gap-0.5">
+      <template v-if="navigation">
+        <UButton
+          v-bind="partAttribute('prev')"
+          icon="i-ph-caret-up"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          square
+          :aria-label="t('side_panel.previous')"
+          :disabled="!navigation.hasPrev"
+          @click="navigation.prev()"
+        />
+        <UButton
+          v-bind="partAttribute('next')"
+          icon="i-ph-caret-down"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          square
+          :aria-label="t('side_panel.next')"
+          :disabled="!navigation.hasNext"
+          @click="navigation.next()"
+        />
+      </template>
+      <slot />
+    </div>
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/build/components/containers/row/RowNotFound.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+/**
+ * What a side panel or a drawer opened on a row shows in place of its
+ * component when the row its link names is gone (a 404): the state, and a
+ * close button.
+ */
+import { computed } from "vue";
+import DmsEmptyState from "../../../../components/empty-state/EmptyState.vue";
+
+interface RowNotFoundProps {
+  title: string;
+  description: string;
+}
+
+interface RowNotFoundEmits {
+  (e: "close"): void;
+}
+
+defineProps<RowNotFoundProps>();
+const emit = defineEmits<RowNotFoundEmits>();
+
+const { t } = useI18n();
+
+const actions = computed(() => [
+  {
+    label: t("side_panel.close"),
+    icon: "i-ph-x",
+    color: "neutral" as const,
+    variant: "outline" as const,
+    onClick: () => emit("close"),
+  },
+]);
+</script>
+
+<template>
+  <DmsEmptyState
+    data-dms-row-not-found
+    variant="no-result"
+    :title="title"
+    :description="description"
+    :actions="actions"
+    class="py-10"
+  />
+</template>

package/frontend-vue/layers/dms-ui/app/build/components/containers/row/drawerRowHeader.ts

@@ -0,0 +1,35 @@
+import { markRaw } from "vue";
+import type { DrawerRowHeader } from "../../../../composables/containers/types";
+
+// The drawer's header title, as `DynamicDrawer` draws its own.
+const DRAWER_ROW_HEADING_CLASS =
+  "text-[17px] leading-[1.3] font-[650] tracking-[-0.02em]";
+// The `data-dms-row-drawer-*` hooks tests and styles find the parts by.
+const DRAWER_ROW_HEADER_PART = "dms-row-drawer";
+
+/**
+ * The props of `RowHeader` over a drawer: a row action's drawer and one a
+ * module opens with `useDrawer({ rowHeader })` draw the same header.
+ *
+ * @internal
+ */
+export function drawerRowHeaderProps(
+  header: DrawerRowHeader,
+  title: string,
+): Record<string, unknown> {
+  return {
+    part: DRAWER_ROW_HEADER_PART,
+    heading: header.title ?? title,
+    positionLabel: header.positionLabel,
+    navigation: header.navigation,
+    headingClass: header.titleClass
+      ? `${DRAWER_ROW_HEADING_CLASS} ${header.titleClass}`
+      : DRAWER_ROW_HEADING_CLASS,
+    headingBreakAfter: header.titleBreakAfter,
+    subtitle: header.subtitle,
+    subtitleClass: header.subtitleClass,
+    // Kept out of the overlay's reactive props, as the body component is.
+    component: header.component && markRaw(header.component),
+    componentOptions: header.componentOptions,
+  };
+}