@antelopejs/dms 0.7.1 → 0.7.3

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

@@ -31,6 +31,10 @@ interface StatGroupBlockProps extends DefaultComponentProps {
   label?: string;
   fetchUrl?: string;
   fetchUrlMethod?: string;
+  /** Id of the PeriodSelector the data follows. */
+  periodScope?: string;
+  /** Topics whose events make the block read `fetchUrl` again. */
+  realtimeTopic?: string | string[];
   /** Shown when there is nothing to list. */
   empty?: BlockEmptyText;
   /**
@@ -47,6 +51,8 @@ const props = withDefaults(defineProps<StatGroupBlockProps>(), {
   label: undefined,
   fetchUrl: undefined,
   fetchUrlMethod: undefined,
+  periodScope: undefined,
+  realtimeTopic: undefined,
   empty: undefined,
   skeletonCount: undefined,
 });
@@ -60,6 +66,8 @@ const { items, isPending, hasError, refresh } =
     items: () => props.items,
     fetchUrl: props.fetchUrl,
     fetchUrlMethod: props.fetchUrlMethod,
+    periodScope: props.periodScope,
+    realtimeTopic: props.realtimeTopic,
     routeParams: () => props.routeParams,
     watchActions: props.watchActions,
     componentId: props.componentId,

package/frontend-vue/layers/dms-ui/app/components/code-snippet/CodeSnippet.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed, onMounted, shallowRef } from "vue";
+import DmsCopyButton from "../copy/CopyButton.vue";
+import {
+  codeLanguageLabel,
+  PLAIN_CODE_LANGUAGE,
+  resolveCodeLanguage,
+} from "../../build/utils/codeLanguages";
+import type { CodeToken, highlightCode } from "../../build/utils/codeHighlight";
+
+// Read-only code in the editor's look: a head with the title, the language
+// and a copy button, then the code highlighted by the editor's languages.
+// Until the highlighter loads (and on the server) the code shows as is.
+interface CodeSnippetProps {
+  /** The code, verbatim. */
+  code: string;
+  /**
+   * `json`, `javascript`, `typescript`, `html`, `sql`, `shell` or `text`;
+   * `js`, `ts`, `bash`, `sh` and `plain` are read as theirs.
+   */
+  language?: string;
+  /** A button copies the code. */
+  copy?: boolean;
+  /** Shown in the head, as written. */
+  title?: string;
+  /** Lines shown before the code scrolls; all of them when unset. */
+  maxLines?: number;
+  /** Wraps long lines instead of scrolling sideways. */
+  wrap?: boolean;
+}
+
+const props = withDefaults(defineProps<CodeSnippetProps>(), {
+  language: undefined,
+  copy: true,
+  title: undefined,
+  maxLines: undefined,
+  wrap: false,
+});
+
+const LINE_HEIGHT_PX = 19;
+// The code's top and bottom padding (`py-2`), around its lines.
+const CODE_PADDING_PX = 16;
+
+const highlight = shallowRef<typeof highlightCode | null>(null);
+
+const language = computed(() => resolveCodeLanguage(props.language));
+const hasHead = computed(
+  () => !!props.title || props.copy || language.value !== PLAIN_CODE_LANGUAGE,
+);
+const tokens = computed<CodeToken[]>(() =>
+  highlight.value
+    ? highlight.value(props.code, language.value)
+    : [{ text: props.code }],
+);
+const sizeStyle = computed(() =>
+  props.maxLines
+    ? {
+        maxHeight: `${props.maxLines * LINE_HEIGHT_PX + CODE_PADDING_PX}px`,
+      }
+    : undefined,
+);
+
+onMounted(async () => {
+  const module = await import("../../build/utils/codeHighlight");
+  highlight.value = module.highlightCode;
+});
+</script>
+
+<template>
+  <div
+    class="border-default min-w-0 overflow-hidden rounded-[10px] border bg-(--ui-bg)"
+  >
+    <div
+      v-if="hasHead"
+      class="border-default flex min-h-9 items-center gap-2 border-b bg-(--dms-bg-muted) py-1 ps-3.5 pe-1"
+    >
+      <span
+        v-if="props.title"
+        class="text-highlighted min-w-0 truncate text-[12.5px] font-semibold"
+      >
+        {{ props.title }}
+      </span>
+      <span class="text-dimmed ms-auto font-mono text-[11px]">
+        {{ codeLanguageLabel(language) }}
+      </span>
+      <DmsCopyButton v-if="props.copy" :value="props.code" />
+    </div>
+    <!-- Focusable: a keyboard scrolls the code when it overflows. -->
+    <pre
+      class="text-highlighted m-0 overflow-auto px-3.5 py-2 font-mono text-[12.5px] leading-[19px]"
+      :class="props.wrap ? 'break-words whitespace-pre-wrap' : 'whitespace-pre'"
+      :style="sizeStyle"
+      :data-language="language"
+      tabindex="0"
+    ><code><span v-for="(token, index) in tokens" :key="index" :style="token.style">{{ token.text }}</span></code></pre>
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/components/empty-state/EmptyState.vue

@@ -35,6 +35,8 @@ interface EmptyStateProps {
 interface EmptyStateSlots {
   /** Rich description, replaces `description`. */
   default?: () => unknown;
+  /** Under the text, above the actions: a snippet to start with. */
+  content?: () => unknown;
   /** Buttons or links under the text. */
   actions?: () => unknown;
 }
@@ -71,6 +73,7 @@ const theme = tv({
     well: "mb-1.5",
     title: "text-highlighted",
     description: "text-muted",
+    content: "mt-2.5 w-full max-w-[60ch] text-start",
     actions: "mt-2.5 flex flex-wrap items-center justify-center gap-2",
   },
   variants: {
@@ -106,8 +109,11 @@ const resolvedIcon = computed(() => props.icon ?? VARIANT_ICONS[props.variant]);
 const resolvedTone = computed<Tone>(
   () => props.tone ?? (props.variant === "error" ? "error" : "neutral"),
 );
-const hasDescription = computed(() => !!props.description || !!slots.default);
-const hasActions = computed(() => !!slots.actions || !!props.actions?.length);
+// Read at each render rather than in a computed: the slots object is not
+// reactive, so a computed would keep the slots of the first render and miss
+// a slot the parent adds or removes later.
+const hasDescription = (): boolean => !!props.description || !!slots.default;
+const hasActions = (): boolean => !!slots.actions || !!props.actions?.length;
 </script>
 
 <template>
@@ -122,10 +128,13 @@ const hasActions = computed(() => !!slots.actions || !!props.actions?.length);
       :class="ui.well()"
     />
     <p :class="ui.title()">{{ props.title }}</p>
-    <p v-if="hasDescription" :class="ui.description()">
+    <p v-if="hasDescription()" :class="ui.description()">
       <slot>{{ props.description }}</slot>
     </p>
-    <div v-if="hasActions" :class="ui.actions()">
+    <div v-if="slots.content" :class="ui.content()">
+      <slot name="content" />
+    </div>
+    <div v-if="hasActions()" :class="ui.actions()">
       <slot name="actions">
         <UButton
           v-for="(action, index) in props.actions"

package/frontend-vue/layers/dms-ui/app/components/flow-canvas/FlowCanvas.vue

@@ -29,7 +29,9 @@ import { computed, useId, useSlots } from "vue";
 //   Delete/Backspace remove the selection. Both paths only *emit* the
 //   `delete-nodes` intent — the badge for its own node, Delete/Backspace for
 //   the whole selection — the wrapper never mutates the consumer's
-//   `nodes`/`edges`; the consumer applies the removal.
+//   `nodes`/`edges`; the consumer applies the removal. `deleteBadge: false`
+//   hides the badge and keeps the keyboard path, for a consumer that draws
+//   its own delete control.
 // - `zoomReadout` adds a live zoom percentage to the control bar that doubles
 //   as a reset-to-100% button.
 //
@@ -119,6 +121,11 @@ interface Props {
    * Delete + Backspace.
    */
   deleteKeyCode?: DeleteKeyCode;
+  /**
+   * Draw the delete badge on selected nodes while `deletableNodes` is on.
+   * `false` leaves the keyboard path alone. Defaults to `true`.
+   */
+  deleteBadge?: boolean;
   /**
    * Add a live zoom percentage / reset-to-100% control to the control bar.
    * It renders inside the bar, so it requires `controls` to be enabled.
@@ -141,6 +148,7 @@ const props = withDefaults(defineProps<Props>(), {
   height: "100%",
   deletableNodes: false,
   deleteKeyCode: undefined,
+  deleteBadge: true,
   zoomReadout: false,
 });
 
@@ -198,7 +206,7 @@ const zoomPercent = computed(() =>
 // Project each selected node's top-right corner from flow space to screen
 // space through the live viewport transform, so badges track pan/zoom/drag.
 const deleteAffordances = computed<DeleteAffordance[]>(() => {
-  if (!props.deletableNodes) return [];
+  if (!props.deletableNodes || !props.deleteBadge) return [];
   const {
     x: panX,
     y: panY,
@@ -295,7 +303,10 @@ defineExpose(flow);
       <slot />
     </VueFlow>
 
-    <div v-if="deletableNodes" class="dms-flow-canvas__delete-layer">
+    <div
+      v-if="deletableNodes && deleteBadge"
+      class="dms-flow-canvas__delete-layer"
+    >
       <button
         v-for="affordance in deleteAffordances"
         :key="affordance.id"

package/frontend-vue/layers/dms-ui/app/components/form/components/InputCode.vue

@@ -3,6 +3,7 @@ import { getCurrentInstance, h, render } from "vue";
 import { useFormField } from "@nuxt/ui/composables/useFormField";
 import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
 import { useControlError } from "../../../build/composables/form/useControlError";
+import { codeLanguageLabel } from "../../../build/utils/codeLanguages";
 import type {
   CodeEditor,
   CodeEditorCompletion,
@@ -47,13 +48,6 @@ const LINE_HEIGHT_PX = 19;
 // The editor's top and bottom padding, around its lines.
 const EDITOR_PADDING_PX = 16;
 const INVALID_JSON = "$dms.field_errors.invalid_json";
-const LANGUAGE_LABELS: Record<string, string> = {
-  json: "JSON",
-  sql: "SQL",
-  html: "HTML",
-  javascript: "JavaScript",
-  text: "Text",
-};
 
 const host = useTemplateRef<HTMLElement>("host");
 const position = ref<CodeEditorPosition>({ line: 1, column: 1 });
@@ -188,7 +182,7 @@ onBeforeUnmount(() => {
         {{ t("dms.form.code.complete") }}
       </span>
       <span class="ms-auto">
-        {{ LANGUAGE_LABELS[props.language] ?? props.language }} ·
+        {{ codeLanguageLabel(props.language) }} ·
         {{ t("dms.form.code.position", position) }}
       </span>
     </div>

package/frontend-vue/layers/dms-ui/app/components/key-value-list/KeyValueList.vue

@@ -3,6 +3,7 @@ import { computed } from "vue";
 import { regionalDateTimeFormat } from "#dms-core/app/utils/regional";
 import DmsStatusPill from "../status-pill/StatusPill.vue";
 import DmsAutoLink from "../link/AutoLink.vue";
+import DmsCopyButton from "../copy/CopyButton.vue";
 import { DMS_TONE_TEXT } from "../../build/utils/tone";
 import type { Tone } from "../../types/tone";
 
@@ -36,6 +37,10 @@ export interface KeyValueItem {
   currency?: string;
   /** This value alone is still loading: a skeleton stands in for it. */
   loading?: boolean;
+  /** Draws a button copying the value as it is shown. */
+  copy?: boolean;
+  /** Text the copy button copies instead of the shown value; implies `copy`. */
+  copyValue?: string;
 }
 
 interface KeyValueListProps {
@@ -156,6 +161,14 @@ function valueClass(item: KeyValueItem): string[] {
   return ["wrap-anywhere", color, TYPE_CLASSES[type] ?? ""];
 }
 
+// An empty value shows a dash, which is not worth copying.
+function copyTextOf(item: KeyValueItem): string | undefined {
+  if (item.copyValue) return item.copyValue;
+  if (!item.copy) return undefined;
+  const formatted = format(item);
+  return formatted === EMPTY_VALUE ? undefined : formatted;
+}
+
 function keyOf(item: KeyValueItem, index: number): string {
   return item.id ?? `${index}-${item.label}`;
 }
@@ -216,6 +229,12 @@ function keyOf(item: KeyValueItem, index: number): string {
               {{ item.detail }}
             </span>
           </template>
+          <!-- -my-1: the button is taller than a dense row's text line. -->
+          <DmsCopyButton
+            v-if="!props.loading && !item.loading && copyTextOf(item)"
+            :value="copyTextOf(item)!"
+            class="-my-1"
+          />
         </dd>
       </div>
     </template>

package/frontend-vue/layers/dms-ui/app/components/master-detail/MasterDetail.vue

@@ -3,6 +3,10 @@
 // left (380px) and a detail panel on the right. The list is driven by `items`
 // + v-model; the detail is rendered by the default slot, which receives the
 // currently selected value.
+//
+// The panes sit side by side from 64rem of the layout's own width (the former
+// `lg` viewport breakpoint), not the viewport's: a docked side panel or a
+// narrow grid cell leaves less room than the screen suggests.
 interface MdItem {
   value: string | number;
   label: string;
@@ -23,59 +27,61 @@ defineSlots<{
 </script>
 
 <template>
-  <div
-    class="grid grid-cols-1 items-start gap-5 lg:grid-cols-[380px_minmax(0,1fr)]"
-  >
-    <!-- List pane -->
-    <div class="dms-card p-2">
-      <p
-        v-if="listLabel"
-        class="text-dimmed px-2.5 pt-2.5 pb-1 font-mono text-[10px] tracking-widest uppercase"
-      >
-        {{ listLabel }}
-      </p>
-      <ul class="flex flex-col gap-1.5">
-        <li v-for="item in items" :key="item.value">
-          <button
-            type="button"
-            class="flex w-full items-start gap-3 rounded-md border border-transparent px-3.5 py-3 text-left transition-colors"
-            :class="
-              selected === item.value
-                ? 'border-primary bg-primary/10'
-                : 'hover:bg-elevated'
-            "
-            @click="selected = item.value"
-          >
-            <span
-              v-if="item.icon"
-              class="grid size-[26px] shrink-0 place-items-center"
-              :class="selected === item.value ? 'text-primary' : 'text-toned'"
+  <div class="@container">
+    <div
+      class="grid grid-cols-1 items-start gap-5 @5xl:grid-cols-[380px_minmax(0,1fr)]"
+    >
+      <!-- List pane -->
+      <div class="dms-card p-2">
+        <p
+          v-if="listLabel"
+          class="text-dimmed px-2.5 pt-2.5 pb-1 font-mono text-[10px] tracking-widest uppercase"
+        >
+          {{ listLabel }}
+        </p>
+        <ul class="flex flex-col gap-1.5">
+          <li v-for="item in items" :key="item.value">
+            <button
+              type="button"
+              class="flex w-full items-start gap-3 rounded-md border border-transparent px-3.5 py-3 text-left transition-colors"
+              :class="
+                selected === item.value
+                  ? 'border-primary bg-primary/10'
+                  : 'hover:bg-elevated'
+              "
+              @click="selected = item.value"
             >
-              <UIcon
-                :name="item.icon"
-                class="size-[18px]"
-                :aria-hidden="true"
-              />
-            </span>
-            <span class="min-w-0">
-              <span class="text-highlighted block text-sm font-semibold">
-                {{ item.label }}
-              </span>
               <span
-                v-if="item.sublabel"
-                class="text-muted mt-0.5 block truncate text-xs"
+                v-if="item.icon"
+                class="grid size-[26px] shrink-0 place-items-center"
+                :class="selected === item.value ? 'text-primary' : 'text-toned'"
               >
-                {{ item.sublabel }}
+                <UIcon
+                  :name="item.icon"
+                  class="size-[18px]"
+                  :aria-hidden="true"
+                />
               </span>
-            </span>
-          </button>
-        </li>
-      </ul>
-    </div>
+              <span class="min-w-0">
+                <span class="text-highlighted block text-sm font-semibold">
+                  {{ item.label }}
+                </span>
+                <span
+                  v-if="item.sublabel"
+                  class="text-muted mt-0.5 block truncate text-xs"
+                >
+                  {{ item.sublabel }}
+                </span>
+              </span>
+            </button>
+          </li>
+        </ul>
+      </div>
 
-    <!-- Detail pane -->
-    <div class="dms-card overflow-hidden">
-      <slot :selected="selected" />
+      <!-- Detail pane -->
+      <div class="dms-card overflow-hidden">
+        <slot :selected="selected" />
+      </div>
     </div>
   </div>
 </template>

package/frontend-vue/layers/dms-ui/app/components/meter/MeterBlock.vue

@@ -11,28 +11,35 @@ import DmsBlockActions, {
 } from "../../build/components/blocks/BlockActions.vue";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
 import { useWatch } from "../../../../dms-core/app/composables/watch/useWatch";
+import { useComposedText } from "../../../../dms-core/app/composables/translation/useComposedText";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
+import type { BlockText } from "../../../../dms-core/app/types/composed-text";
+
+/** A segment as the page or the route sends it, its legend still to write. */
+interface MeterBlockSegment extends Omit<MeterSegment, "label"> {
+  label?: BlockText;
+}
 
 /** What a meter's data source answers: any subset of its figures. */
 interface MeterResponse {
   value?: number;
   max?: number;
-  segments?: MeterSegment[];
-  hint?: string;
-  valueLabel?: string;
+  segments?: MeterBlockSegment[];
+  hint?: BlockText;
+  valueLabel?: BlockText;
 }
 
 // The page block behind the backend `Meter` builder: static figures or a
 // data source, optionally in a card. DmsMeter draws it.
 interface MeterBlockProps extends DefaultComponentProps {
   label?: string;
-  hint?: string;
+  hint?: BlockText;
   value?: number;
   max?: number;
-  segments?: MeterSegment[];
+  segments?: MeterBlockSegment[];
   legend?: boolean;
   format?: MeterFormat;
-  valueLabel?: string;
+  valueLabel?: BlockText;
   tone?: MeterTone;
   warnAt?: number;
   errorAt?: number;
@@ -40,6 +47,10 @@ interface MeterBlockProps extends DefaultComponentProps {
   /** Endpoint answering `{ value?, max?, segments?, hint?, valueLabel? }`. */
   fetchUrl?: string;
   fetchUrlMethod?: string;
+  /** Id of the PeriodSelector the data follows. */
+  periodScope?: string;
+  /** Topics whose events make the block read `fetchUrl` again. */
+  realtimeTopic?: string | string[];
   /** Wraps the meter in a padded card. */
   card?: boolean;
   /** Link buttons pushed right of the legend ("Manage members"). */
@@ -61,11 +72,13 @@ const props = withDefaults(defineProps<MeterBlockProps>(), {
   size: "sm",
   fetchUrl: undefined,
   fetchUrlMethod: undefined,
+  periodScope: undefined,
+  realtimeTopic: undefined,
   card: false,
   actions: () => [],
 });
 
-const { processI18n } = useTranslation();
+const { processText } = useComposedText();
 const { t } = useI18n();
 
 const { state: watchState } = useWatch(
@@ -76,12 +89,14 @@ const { state: watchState } = useWatch(
 const { data, isLoading, error, refresh } = useChartFetch<MeterResponse>({
   fetchUrl: props.fetchUrl,
   fetchUrlMethod: props.fetchUrlMethod,
+  periodScope: props.periodScope,
+  realtimeTopic: props.realtimeTopic,
   routeParams: () => props.routeParams,
   watchSource: () => JSON.stringify(watchState.value),
 });
 
-const translate = (text: string | undefined): string | undefined =>
-  text ? processI18n(text) : undefined;
+const translate = (text: BlockText | undefined): string | undefined =>
+  text ? processText(text) : undefined;
 
 const figures = computed(() => {
   const fetched = data.value ?? {};

package/frontend-vue/layers/dms-ui/app/components/tab/Tab.vue

@@ -20,16 +20,19 @@ const props = withDefaults(defineProps<TabProps>(), {
   persistState: false,
   stateKey: "tab",
   badgesUrl: undefined,
+  realtimeTopic: undefined,
 });
 
 // The badges a module counts for a record's tabs, in one request, again when
-// a watch action fires: each replaces its tab's static badge.
+// a watch action or a realtime topic fires: each replaces its tab's static
+// badge.
 const { state: watchState } = useWatch(
   props.watchActions || [],
   props.componentId,
 );
 const { data: fetchedBadges } = useChartFetch<TabBadges>({
   fetchUrl: props.badgesUrl,
+  realtimeTopic: props.realtimeTopic,
   routeParams: () => props.routeParams,
   watchSource: () => JSON.stringify(watchState.value),
 });