@antelopejs/dms 0.9.8 → 0.11.0

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/shellParser.ts

@@ -1,4 +1,4 @@
-import type { StreamParser, StringStream } from "@codemirror/language";
+import type { StreamParser, StringStream } from "@codemirror/streamparser";
 
 // A shell snippet as read for highlighting only: the command of each
 // pipeline step, its flags, quoted strings, variables and comments.

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

@@ -0,0 +1,90 @@
+// A CodeMirror stream parser (a language written as a line tokenizer, like
+// the shell's) run for read-only highlighting. `StreamLanguage` would do it
+// inside an editor state, and so pull CodeMirror's view and state into every
+// page showing a snippet: this drives the parser the same way, line by line
+// over `StringStream`, and names its tokens' tags the same way.
+import { type StreamParser, StringStream } from "@codemirror/streamparser";
+import { type Highlighter, type Tag, tags } from "@lezer/highlight";
+
+/** Receives one styled range of the code: its offsets and its classes. */
+export type HighlightedRange = (
+  from: number,
+  to: number,
+  classes: string,
+) => void;
+
+// CodeMirror's defaults, which `StreamLanguage` hands every stream.
+const TAB_SIZE = 4;
+const INDENT_UNIT = 2;
+// Zero-length tokens a parser may return in a row (each one changing its
+// state) before the stream moves on by itself, as `StreamLanguage` allows.
+const MAX_EMPTY_TOKENS = 10;
+
+type TagValue = Tag | readonly Tag[] | ((tag: Tag) => Tag);
+const TAG_TABLE = tags as unknown as Record<string, TagValue | undefined>;
+const tagsByName = new Map<string, Tag[]>();
+
+// A token type names tags the way `StreamLanguage` reads them: space
+// separated, each a tag followed by its modifiers (`variableName.special`).
+function tagsOf(type: string): Tag[] {
+  const cached = tagsByName.get(type);
+  if (cached) return cached;
+  const resolved = type.split(" ").flatMap((name) => {
+    let found: Tag[] = [];
+    for (const part of name.split(".")) {
+      const value = TAG_TABLE[part];
+      if (typeof value === "function") found = found.map(value);
+      else if (value && !found.length)
+        found = Array.isArray(value) ? [...value] : [value as Tag];
+    }
+    return found;
+  });
+  tagsByName.set(type, resolved);
+  return resolved;
+}
+
+/**
+ * Tokenizes `code` with `parser` and calls `put` for each range its
+ * highlighter styles, adjacent ranges of one style merged, as
+ * `highlightTree` reports a parsed tree.
+ */
+export function highlightStream<State>(
+  parser: StreamParser<State>,
+  code: string,
+  highlighter: Highlighter,
+  put: HighlightedRange,
+): void {
+  const state = parser.startState?.(INDENT_UNIT) ?? (true as State);
+  let pending: { from: number; to: number; classes: string } | null = null;
+  const flush = () => {
+    if (pending) put(pending.from, pending.to, pending.classes);
+    pending = null;
+  };
+  const add = (from: number, to: number, classes: string | null) => {
+    if (pending && (pending.to !== from || pending.classes !== classes))
+      flush();
+    if (!classes) return;
+    if (pending) pending.to = to;
+    else pending = { from, to, classes };
+  };
+
+  let lineStart = 0;
+  for (const line of code.split("\n")) {
+    if (!line) parser.blankLine?.(state, INDENT_UNIT);
+    const stream = new StringStream(line, TAB_SIZE, INDENT_UNIT);
+    let emptyTokens = 0;
+    while (!stream.eol()) {
+      stream.start = stream.pos;
+      const type = parser.token(stream, state);
+      if (stream.pos === stream.start) {
+        if (++emptyTokens < MAX_EMPTY_TOKENS) continue;
+        stream.next();
+      }
+      emptyTokens = 0;
+      const classes = type ? highlighter.style(tagsOf(type)) : null;
+      add(lineStart + stream.start, lineStart + stream.pos, classes);
+    }
+    lineStart += line.length + 1;
+  }
+  flush();
+}

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"