@antelopejs/dms 0.9.7 → 0.10.0

package/frontend-vue/layers/dms-ui/app/build/utils/fieldOptionsI18n.ts

@@ -1,6 +1,11 @@
+/** An input component, with the options its field declares. */
+interface ComponentWithOptions {
+  options?: object;
+}
+
 /** A field whose input component carries options. */
 interface FieldWithOptions {
-  component: { options?: object };
+  component: ComponentWithOptions;
 }
 
 type Translate = (key: string) => string;
@@ -23,6 +28,9 @@ const ENTRY_TEXTS = ["label", "description"] as const;
 
 const isText = (value: unknown): value is string => typeof value === "string";
 
+const isOptions = (value: unknown): value is Options =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
 function translateTexts(
   source: Options,
   keys: readonly string[],
@@ -36,25 +44,57 @@ function translateTexts(
 }
 
 /**
- * A field with the texts of its input component's options translated
- * (`$`-prefixed i18n keys): placeholder, labels, descriptions, and those of
- * its options and columns, the way forms show them.
+ * An entry holding a field of its own (a repeater's column, a key-value
+ * editor's value) has the options of that field's component translated too,
+ * so a select inside a repeater shows its options in the reader's language.
  */
-export function processFieldI18n<F extends FieldWithOptions>(
-  field: F,
+function translateNestedField(entry: Options, processI18n: Translate): Options {
+  if (!isOptions(entry.component)) return entry;
+  return {
+    ...entry,
+    component: translateComponent(entry.component, processI18n),
+  };
+}
+
+function translateComponent<C extends ComponentWithOptions>(
+  component: C,
   processI18n: Translate,
-): F {
-  const opts = field.component.options as Options | undefined;
-  if (!opts) return field;
+): C {
+  const opts = component.options as Options | undefined;
+  if (!opts) return component;
 
   const options = translateTexts(opts, TEXT_OPTIONS, processI18n);
   for (const key of LIST_OPTIONS) {
     const list = opts[key];
     if (!Array.isArray(list)) continue;
     options[key] = list.map((entry: Options) =>
-      translateTexts(entry, ENTRY_TEXTS, processI18n),
+      translateNestedField(
+        translateTexts(entry, ENTRY_TEXTS, processI18n),
+        processI18n,
+      ),
     );
   }
+  if (isOptions(opts.value)) {
+    options.value = translateNestedField(opts.value, processI18n);
+  }
 
-  return { ...field, component: { ...field.component, options } };
+  return { ...component, options };
+}
+
+/**
+ * A field with the texts of its input component's options translated
+ * (`$`-prefixed i18n keys): placeholder, labels, descriptions, and those of
+ * its options and columns, the way forms show them. The fields nested in it
+ * (a repeater's columns, a key-value editor's value) are translated the same
+ * way, at any depth.
+ */
+export function processFieldI18n<F extends FieldWithOptions>(
+  field: F,
+  processI18n: Translate,
+): F {
+  if (!field.component.options) return field;
+  return {
+    ...field,
+    component: translateComponent(field.component, processI18n),
+  };
 }

package/frontend-vue/layers/dms-ui/app/build/utils/inputWidth.ts

@@ -0,0 +1,53 @@
+/**
+ * How wide a single-line input sits in its row: `"compact"` for a short
+ * value, `"full"` to fill the row. Left out, the input's bounds decide.
+ */
+export type InputWidth = "compact" | "full";
+
+/** The widest number, in digits, a number input sizes compact by itself. */
+const COMPACT_NUMBER_DIGITS = 6;
+/** The longest `maxLength` a text input sizes compact by itself. */
+const COMPACT_TEXT_LENGTH = 16;
+
+interface NumberWidthOptions {
+  width?: InputWidth;
+  min?: number;
+  max?: number;
+}
+
+interface TextWidthOptions {
+  width?: InputWidth;
+  maxLength?: number;
+}
+
+function integerDigits(value: number): number {
+  return String(Math.trunc(Math.abs(value))).length;
+}
+
+/**
+ * Whether a number input takes a compact width: asked for, or left out with
+ * a `max` (and `min`) that keep the value within a few digits. Without a
+ * `max` nothing bounds the value, so it fills the row.
+ */
+export function isCompactNumberInput({
+  width,
+  min,
+  max,
+}: NumberWidthOptions): boolean {
+  if (width) return width === "compact";
+  if (max === undefined || !Number.isFinite(max)) return false;
+  const bounds = min === undefined ? [max] : [min, max];
+  return Math.max(...bounds.map(integerDigits)) <= COMPACT_NUMBER_DIGITS;
+}
+
+/**
+ * Whether a text input takes a compact width: asked for, or left out with a
+ * `maxLength` short enough for a code or an abbreviation.
+ */
+export function isCompactTextInput({
+  width,
+  maxLength,
+}: TextWidthOptions): boolean {
+  if (width) return width === "compact";
+  return maxLength !== undefined && maxLength <= COMPACT_TEXT_LENGTH;
+}

package/frontend-vue/layers/dms-ui/app/build/utils/numberAdjustment.ts

@@ -1,3 +1,4 @@
+import { readableNumberFormat } from "#dms-core/app/utils/formatter";
 import type {
   InputNumberAdjustment,
   InputNumberAdjustmentReason,
@@ -15,7 +16,7 @@ const WHITESPACE = /\s/g;
 const NOT_NUMERIC = /[^\d.+-]/g;
 
 function separatorsOf(locale: string): { group?: string; decimal: string } {
-  const parts = new Intl.NumberFormat(locale).formatToParts(SEPARATOR_SAMPLE);
+  const parts = readableNumberFormat(locale).formatToParts(SEPARATOR_SAMPLE);
   return {
     group: parts.find((part) => part.type === "group")?.value,
     decimal: parts.find((part) => part.type === "decimal")?.value ?? ".",
@@ -23,8 +24,10 @@ function separatorsOf(locale: string): { group?: string; decimal: string } {
 }
 
 /**
- * A number as typed in a field written in `locale` ("1,020", "1 020,5"):
- * `null` when nothing is typed or it does not read as a number.
+ * A number as typed in a field written in `locale` ("1,020", "1 020,5"),
+ * its digits grouped by any space (the narrow one the field draws in French,
+ * the no-break one the cells write, a typed one): `null` when nothing is
+ * typed or it does not read as a number.
  */
 export function parseTypedNumber(text: string, locale: string): number | null {
   const { group, decimal } = separatorsOf(locale);

package/frontend-vue/layers/dms-ui/app/build/utils/relativeDate.ts

@@ -19,15 +19,29 @@ export function formatRelativeDate(
   );
 }
 
-/** "Sep 27": day and short month. */
+const DAY_MONTH_FORMAT: Intl.DateTimeFormatOptions = {
+  month: "short",
+  day: "numeric",
+};
+const YEAR_FORMAT: Intl.DateTimeFormatOptions = { year: "numeric" };
+
+/**
+ * "Sep 27": day and short month, read against `now`; a date of another year
+ * ("Apr 2, 2018") names its year as well.
+ */
 export function formatDayMonth(
   date: string | number | Date,
   locale: string,
+  now: number = Date.now(),
 ): string {
-  return regionalDateTimeFormat(locale, {
-    month: "short",
-    day: "numeric",
-  }).format(new Date(date));
+  const day = new Date(date);
+  // Years read in the reader's time zone, as the date is written.
+  const year = regionalDateTimeFormat(locale, YEAR_FORMAT);
+  const isOtherYear = year.format(day) !== year.format(now);
+  return regionalDateTimeFormat(
+    locale,
+    isOtherYear ? { ...DAY_MONTH_FORMAT, ...YEAR_FORMAT } : DAY_MONTH_FORMAT,
+  ).format(day);
 }
 
 /** First word of a name, for "Sep 27 · by Camille". */

package/frontend-vue/layers/dms-ui/app/build/utils/scrollWithin.ts

@@ -0,0 +1,99 @@
+// `scrollIntoView` scrolls every ancestor that can scroll, including the
+// layout's `overflow: hidden` root: the header and breadcrumb slide out of
+// view and nothing brings them back. These helpers scroll the one container
+// that actually scrolls the element instead.
+
+const SCROLLABLE_OVERFLOW = /(auto|scroll)/;
+
+/** Where an element lands in its scroll container. */
+export type ScrollWithinBlock = "start" | "center" | "nearest";
+
+/** How `scrollWithin` brings an element into view. */
+export interface ScrollWithinOptions {
+  block?: ScrollWithinBlock;
+  behavior?: ScrollBehavior;
+}
+
+/**
+ * The closest ancestor of `element` the user can scroll (`overflow-y: auto`
+ * or `scroll`, with content taller than itself), or `null` when only the
+ * window scrolls it.
+ *
+ * @internal
+ */
+export function scrollParent(element: HTMLElement): HTMLElement | null {
+  for (let node = element.parentElement; node; node = node.parentElement) {
+    const { overflowY } = getComputedStyle(node);
+    if (
+      SCROLLABLE_OVERFLOW.test(overflowY) &&
+      node.scrollHeight > node.clientHeight
+    ) {
+      return node;
+    }
+  }
+  return null;
+}
+
+interface ScrollViewport {
+  top: number;
+  height: number;
+  scrollTop: number;
+}
+
+function viewportOf(scroller: HTMLElement | null): ScrollViewport {
+  if (scroller) {
+    return {
+      top: scroller.getBoundingClientRect().top,
+      height: scroller.clientHeight,
+      scrollTop: scroller.scrollTop,
+    };
+  }
+  return { top: 0, height: window.innerHeight, scrollTop: window.scrollY };
+}
+
+function scrollMarginTop(element: HTMLElement): number {
+  return Number.parseFloat(getComputedStyle(element).scrollMarginTop) || 0;
+}
+
+/** The scroll offset that puts `rect` at `block` in `viewport`. */
+function targetOffset(
+  rect: DOMRect,
+  margin: number,
+  viewport: ScrollViewport,
+  block: ScrollWithinBlock,
+): number | null {
+  const top = rect.top - viewport.top - margin;
+  if (block === "start") return viewport.scrollTop + top;
+  if (block === "center") {
+    return viewport.scrollTop + top - (viewport.height - rect.height) / 2;
+  }
+  const bottom = rect.bottom - viewport.top;
+  if (top >= 0 && bottom <= viewport.height) return null;
+  return top < 0
+    ? viewport.scrollTop + top
+    : viewport.scrollTop + bottom - viewport.height;
+}
+
+/**
+ * Brings `element` into view by scrolling its own scroll container only
+ * (the window when nothing closer scrolls it), honouring its
+ * `scroll-margin-top`. Unlike `scrollIntoView`, no other ancestor moves.
+ *
+ * @internal
+ */
+export function scrollWithin(
+  element: HTMLElement,
+  { block = "start", behavior = "auto" }: ScrollWithinOptions = {},
+): void {
+  const scroller = scrollParent(element);
+  const offset = targetOffset(
+    element.getBoundingClientRect(),
+    block === "start" ? scrollMarginTop(element) : 0,
+    viewportOf(scroller),
+    block,
+  );
+  if (offset === null) return;
+  const top = Math.max(0, offset);
+  if (scroller) scroller.scrollTo({ top, behavior });
+  else window.scrollTo({ top, behavior });
+}

package/frontend-vue/layers/dms-ui/app/build/utils/urlVariables.ts

@@ -154,19 +154,32 @@ const FRAGMENT_SEPARATOR = "#";
 const PAIR_SEPARATOR = "&";
 const VALUE_SEPARATOR = "=";
 
-/** The query of a URL without the pairs whose whole value is a token left empty. */
-function dropUnresolvedPairs(search: string): string {
+/** The query of a URL without the pairs whose whole value matches `value`. */
+function dropPairs(search: string, value: RegExp): string {
   return search
     .split(PAIR_SEPARATOR)
     .filter((pair) => {
-      const value = pair.slice(pair.indexOf(VALUE_SEPARATOR) + 1);
-      return (
-        !pair.includes(VALUE_SEPARATOR) || !UNRESOLVED_ROUTE_VALUE.test(value)
-      );
+      const pairValue = pair.slice(pair.indexOf(VALUE_SEPARATOR) + 1);
+      return !pair.includes(VALUE_SEPARATOR) || !value.test(pairValue);
     })
     .join(PAIR_SEPARATOR);
 }
 
+/**
+ * A URL without its `token`s: a query pair whose whole value is one (`value`)
+ * is left out, any other is left empty.
+ */
+function stripTokens(url: string, token: RegExp, value: RegExp): string {
+  const [beforeFragment = "", ...fragment] = url.split(FRAGMENT_SEPARATOR);
+  const [path = "", ...search] = beforeFragment.split(QUERY_SEPARATOR);
+  const query = dropPairs(search.join(QUERY_SEPARATOR), value);
+  const rebuilt = [
+    query ? `${path}${QUERY_SEPARATOR}${query}` : path,
+    ...fragment,
+  ].join(FRAGMENT_SEPARATOR);
+  return rebuilt.replace(token, "");
+}
+
 /**
  * A link's URL with the `{{params.X}}` / `{{query.X}}` tokens of the page it
  * sits on filled, for a button that always leads somewhere: a query pair
@@ -180,12 +193,21 @@ export function resolveLinkVariables(
 ): string {
   const filled = replaceUrlVariables(url, context);
   if (!hasUrlVariables(filled)) return filled;
-  const [beforeFragment = "", ...fragment] = filled.split(FRAGMENT_SEPARATOR);
-  const [path = "", ...search] = beforeFragment.split(QUERY_SEPARATOR);
-  const query = dropUnresolvedPairs(search.join(QUERY_SEPARATOR));
-  const rebuilt = [
-    query ? `${path}${QUERY_SEPARATOR}${query}` : path,
-    ...fragment,
-  ].join(FRAGMENT_SEPARATOR);
-  return rebuilt.replace(UNRESOLVED_ROUTE_TOKEN, "");
+  return stripTokens(filled, UNRESOLVED_ROUTE_TOKEN, UNRESOLVED_ROUTE_VALUE);
+}
+
+// A row field, `{{row.<path>}}`, as `interpolateUrl` fills it.
+const ROW_KEY = String.raw`row\.[^{}\s]+`;
+const ROW_TOKEN = tokenPattern(ROW_KEY);
+const ROW_VALUE = new RegExp(`^${tokenPattern(ROW_KEY, "").source}$`);
+
+/**
+ * A URL sent without a row (a bulk action on the selection bar) with its
+ * `{{row.X}}` tokens taken out as a link's unresolved page tokens are: a query
+ * pair whose whole value is one is left out (`?ids={{row._id}}` gives way to
+ * the selection's `ids`), any other is left empty.
+ */
+export function dropRowTokens(url: string): string {
+  if (!new RegExp(ROW_TOKEN.source).test(url)) return url;
+  return stripTokens(url, ROW_TOKEN, ROW_VALUE);
 }

package/frontend-vue/layers/dms-ui/app/components/PasswordStrength.vue

@@ -16,7 +16,7 @@
       {{ $t("form.password_strength.contains") }}
     </p>
 
-    <ul class="space-y-1 pl-3" aria-label="Password requirements">
+    <ul class="space-y-1 pl-3" aria-labelledby="password-strength">
       <li
         v-for="(req, index) in props.strength"
         :key="index"

package/frontend-vue/layers/dms-ui/app/components/RecursiveComponent.vue

@@ -20,6 +20,11 @@ interface Props {
    * a role preview veil this block; without it the block is never veiled.
    */
   layoutPath?: string;
+  /**
+   * Props handed to this block only, as they are (functions included), over
+   * its options: what an action target's container gives its block.
+   */
+  rootProps?: Record<string, unknown>;
 }
 
 const props = defineProps<Props>();
@@ -108,7 +113,10 @@ provide<GridDeclaredColumns>(GRID_DECLARED_COLUMNS, {
     <Component
       :is="component.component"
       :ref="anchorBlock"
-      v-bind="JSON.parse(JSON.stringify(component.options || {})) || {}"
+      v-bind="{
+        ...JSON.parse(JSON.stringify(component.options || {})),
+        ...rootProps,
+      }"
       :page-id="pageId"
       :component-id="componentId"
       :child-count="columnCount"

package/frontend-vue/layers/dms-ui/app/components/blocks/LiveToggleBlock.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import DmsSegmented from "../segmented/Segmented.vue";
 import { usePageLive } from "../../composables/live/usePageLive";
-import { formatElapsed } from "../../build/composables/live/formatElapsed";
+import { useUpdatedLabel } from "../../build/composables/live/useUpdatedLabel";
 import { useLiveToggleShortcut } from "../../build/composables/live/useLiveToggleShortcut";
 import { HIDDEN_TAB_NOTE } from "../../build/composables/live/pageLiveController";
 import type { ConfirmTranslate } from "../../build/composables/confirm/confirmDialogTexts";
@@ -10,14 +10,24 @@ import {
   missedRowsText,
   showLiveNote,
 } from "../../build/composables/live/liveNotes";
+import {
+  type PageToolbarSize,
+  usePageToolbar,
+  useToolbarLiveToggle,
+} from "../../build/composables/page-toolbar/pageToolbarContext";
+import { PAGE_TOOLBAR_CONTROL_HEIGHT_CLASSES } from "../../build/composables/page-toolbar/toolbarControlHeight";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
 
-interface LiveToggleBlockProps extends DefaultComponentProps {
+// Its ids are optional: it reads the page's live state, not its own, and a
+// component may draw it by hand inside its own `PageToolbar`.
+interface LiveToggleBlockProps extends Partial<DefaultComponentProps> {
   align?: "left" | "center" | "right";
   /** Shows "updated N s ago". */
   showUpdatedAt?: boolean;
   /** `segmented` (Live / Pause segments) or `pill` (a pulsing Live pill). */
   variant?: "segmented" | "pill";
+  /** How large it is drawn; the holding `PageToolbar`'s size, else `sm`. */
+  size?: PageToolbarSize;
   /** What the paused toggle calls the missed events, given `{count}`. */
   missedLabel?: string;
 }
@@ -26,12 +36,13 @@ const props = withDefaults(defineProps<LiveToggleBlockProps>(), {
   align: "right",
   showUpdatedAt: true,
   variant: "segmented",
+  size: undefined,
   missedLabel: undefined,
 });
 
 const DIRECT = "direct";
 const PAUSE = "pause";
-const TICK_MS = 1000;
+const DEFAULT_SIZE: PageToolbarSize = "sm";
 const ALIGN_CLASSES: Record<
   NonNullable<LiveToggleBlockProps["align"]>,
   string
@@ -41,26 +52,53 @@ const ALIGN_CLASSES: Record<
   right: "justify-end",
 };
 const PILL_BUTTON_CLASS =
-  "focus-visible:outline-primary flex items-center gap-1.5 rounded-[5px] px-2 py-1 text-[12px] font-medium transition-colors focus-visible:outline-2";
+  "focus-visible:outline-primary flex h-full items-center rounded-[5px] font-medium transition-colors focus-visible:outline-2";
 const PILL_IDLE_CLASS = "text-muted hover:text-default hover:bg-elevated";
 
+/** What each size changes: the texts and the pill's buttons. */
+interface LiveToggleSizeClasses {
+  text: string;
+  pillButton: string;
+}
+
+// The pill takes the toolbar's one height (its buttons fill it), as the
+// period selector's segments beside it and the Resume button do.
+const SIZE_CLASSES: Record<PageToolbarSize, LiveToggleSizeClasses> = {
+  xs: {
+    text: "text-[11.5px]",
+    pillButton: "gap-1 px-1.5 text-[11px]",
+  },
+  sm: {
+    text: "text-[12.5px]",
+    pillButton: "gap-1.5 px-2 text-[12px]",
+  },
+  md: {
+    text: "text-[13px]",
+    pillButton: "gap-1.5 px-2.5 text-[13px]",
+  },
+};
+
 const { t } = useI18n();
 const translate = t as ConfirmTranslate;
 const live = usePageLive();
+const toolbar = usePageToolbar();
+useToolbarLiveToggle(toolbar);
+const size = computed(() => props.size ?? toolbar?.size.value ?? DEFAULT_SIZE);
+const sizeClasses = computed(() => SIZE_CLASSES[size.value]);
+const heightClass = computed(
+  () => PAGE_TOOLBAR_CONTROL_HEIGHT_CLASSES[size.value],
+);
 
-// The state lives in the browser (its storage, its clock): the server and the
-// hydrating render draw nothing, the mounted block draws the real state.
+// The toggle is drawn from the server on, live (the remembered pause applies
+// once mounted), so it takes its place before the page paints. Only the
+// "updated N s ago" text waits for the browser's clock: the server's would
+// not match the hydrating render's.
 const isMounted = ref(false);
-const now = ref(Date.now());
-let ticker: ReturnType<typeof setInterval> | undefined;
-
-onMounted(() => {
-  isMounted.value = true;
-  if (props.showUpdatedAt) {
-    ticker = setInterval(() => (now.value = Date.now()), TICK_MS);
-  }
-});
-onBeforeUnmount(() => clearInterval(ticker));
+onMounted(() => (isMounted.value = true));
+const updatedText = useUpdatedLabel(
+  () => live.lastUpdatedAt.value,
+  props.showUpdatedAt,
+);
 
 const mode = computed({
   get: () => (live.isPaused.value ? PAUSE : DIRECT),
@@ -75,15 +113,9 @@ const items = computed(() => [
   { value: PAUSE, label: t("dms.live.pause"), icon: "i-ph-pause" },
 ]);
 
-const updatedLabel = computed(() => {
-  const at = live.lastUpdatedAt.value;
-  if (at === null) return "";
-  const { unit, count } = formatElapsed(now.value - at);
-  const updated = t(`dms.live.updated_${unit}`, { count }, count);
-  return live.isPolling.value
-    ? `${updated} · ${t("dms.live.polling")}`
-    : updated;
-});
+// The browser's clock only: the server's text would not match the hydrating
+// render's.
+const updatedLabel = computed(() => (isMounted.value ? updatedText.value : ""));
 
 const missedText = computed(() => {
   const count = live.missedCount.value;
@@ -122,13 +154,14 @@ useLiveToggleShortcut(() => live.toggle());
 
 <template>
   <div
-    v-if="isMounted && live.isEnabled.value"
+    v-if="live.isEnabled.value"
     class="dms-live-toggle flex flex-wrap items-center gap-x-2.5 gap-y-1"
     :class="[ALIGN_CLASSES[align], `dms-live-toggle--${variant}`]"
   >
     <span
       v-if="live.isPaused.value"
-      class="dms-live-toggle__status text-muted min-w-0 text-[12.5px] tabular-nums"
+      class="dms-live-toggle__status text-muted min-w-0 tabular-nums"
+      :class="sizeClasses.text"
       aria-live="polite"
     >
       {{ pausedText }}
@@ -136,16 +169,28 @@ useLiveToggleShortcut(() => live.toggle());
     </span>
     <span
       v-else-if="showUpdatedAt"
-      class="text-muted text-[12.5px] tabular-nums"
+      class="text-muted inline-flex items-center gap-1.5 tabular-nums"
+      :class="sizeClasses.text"
       aria-live="off"
     >
       {{ updatedLabel }}
+      <!-- The polling hint, its box always kept: showing it never widens the
+           toggle, which would wrap the toolbar and move the page. -->
+      <UIcon
+        name="i-ph-wifi-slash"
+        class="dms-live-toggle__polling size-3.5 shrink-0"
+        :class="!live.isPolling.value && 'invisible'"
+        :title="live.isPolling.value ? t('dms.live.polling') : undefined"
+        :aria-label="live.isPolling.value ? t('dms.live.polling') : undefined"
+        :aria-hidden="!live.isPolling.value || undefined"
+      />
     </span>
     <div
       v-if="variant === 'pill'"
       role="group"
       :aria-label="t('dms.live.aria_label')"
-      class="border-default bg-default inline-flex shrink-0 items-center gap-0.5 rounded-md border p-0.5"
+      class="border-default bg-default inline-flex shrink-0 items-stretch gap-0.5 rounded-md border p-0.5"
+      :class="heightClass"
     >
       <button
         type="button"
@@ -153,6 +198,7 @@ useLiveToggleShortcut(() => live.toggle());
         :aria-pressed="live.isLive.value"
         :class="[
           PILL_BUTTON_CLASS,
+          sizeClasses.pillButton,
           live.isLive.value ? 'bg-success/10 text-success' : PILL_IDLE_CLASS,
         ]"
         @click="live.resume()"
@@ -173,6 +219,7 @@ useLiveToggleShortcut(() => live.toggle());
         :aria-pressed="live.isPaused.value"
         :class="[
           PILL_BUTTON_CLASS,
+          sizeClasses.pillButton,
           live.isPaused.value
             ? 'bg-elevated text-highlighted'
             : PILL_IDLE_CLASS,
@@ -188,12 +235,13 @@ useLiveToggleShortcut(() => live.toggle());
       v-model="mode"
       :items="items"
       :aria-label="t('dms.live.aria_label')"
-      size="sm"
+      :size="size"
     />
     <UButton
       v-if="variant === 'pill' && canResume"
       data-action="resume"
-      size="xs"
+      :size="size"
+      :class="heightClass"
       color="neutral"
       variant="soft"
       icon="i-ph-play-fill"