@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/layers/dms-ui/app/components/status/StatusSummary.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-// DMS "health hero" (design .health-hero): a status ring + value next to a
-// divided row of key metrics. Generic over any service — API health, DB
-// connection, job runner… — and reused across module overviews. Wraps DmsCard
-// so it drops straight into a page.
+// DMS "health hero" (design .status-hero): a status ring + value next to a
+// divided row of key metrics, optionally over a per-day history strip.
+// Generic over any service — API health, DB connection, job runner… — and
+// reused across module overviews. Wraps DmsCard so it drops into a page.
 type Status = "ok" | "warn" | "down" | "info";
 
 interface Metric {
@@ -15,25 +15,62 @@ interface Metric {
   tone?: "default" | "error" | "warning" | "success";
 }
 
-const props = withDefaults(
-  defineProps<{
-    statusValue: string;
-    status?: Status;
-    statusLabel?: string;
-    icon?: string;
-    metrics?: Metric[];
-  }>(),
-  {
-    status: "ok",
-    metrics: () => [],
-  },
-);
+interface StatusTone {
+  text: string;
+  dot: string;
+  tint: string;
+  line: string;
+}
+
+interface Props {
+  statusValue: string;
+  status?: Status;
+  statusLabel?: string;
+  icon?: string;
+  metrics?: Metric[];
+  /** Mono line under the value, e.g. "Up 14 d 6 h · checked 12 s ago". */
+  since?: string;
+  /** Pulse the live dot on the ring. */
+  live?: boolean;
+  /** One status per day, oldest first (a 30-cell strip under the hero). */
+  history?: Status[];
+  /** Labels under the strip: start, summary, end. */
+  historyLabels?: string[];
+}
 
-const RING: Record<Status, string> = {
-  ok: "border-success/45 bg-success/10 text-success",
-  warn: "border-warning/45 bg-warning/10 text-warning",
-  down: "border-error/45 bg-error/10 text-error",
-  info: "border-info/45 bg-info/10 text-info",
+const props = withDefaults(defineProps<Props>(), {
+  status: "ok",
+  metrics: () => [],
+  live: true,
+  history: () => [],
+  historyLabels: () => [],
+});
+
+const STATUS_TONES: Record<Status, StatusTone> = {
+  ok: {
+    text: "text-success",
+    dot: "bg-success",
+    tint: "var(--dms-success-tint)",
+    line: "var(--dms-success-line)",
+  },
+  warn: {
+    text: "text-warning",
+    dot: "bg-warning",
+    tint: "var(--dms-warning-tint)",
+    line: "var(--dms-warning-line)",
+  },
+  down: {
+    text: "text-error",
+    dot: "bg-error",
+    tint: "var(--dms-error-tint)",
+    line: "var(--dms-error-line)",
+  },
+  info: {
+    text: "text-info",
+    dot: "bg-info",
+    tint: "var(--dms-info-tint)",
+    line: "var(--dms-info-line)",
+  },
 };
 
 const VALUE_TONE: Record<Status, string> = {
@@ -50,39 +87,71 @@ const METRIC_TONE: Record<NonNullable<Metric["tone"]>, string> = {
   success: "text-success",
 };
 
+const HISTORY_CELL: Record<Status, string> = {
+  ok: "bg-success opacity-75",
+  warn: "bg-warning",
+  down: "bg-error",
+  info: "bg-info opacity-75",
+};
+
 const DEFAULT_ICON: Record<Status, string> = {
-  ok: "i-lucide-circle-check",
-  warn: "i-lucide-triangle-alert",
-  down: "i-lucide-circle-x",
-  info: "i-lucide-info",
+  ok: "i-ph-check-circle",
+  warn: "i-ph-warning",
+  down: "i-ph-x-circle",
+  info: "i-ph-info",
 };
 
+const tone = computed(() => STATUS_TONES[props.status]);
 const resolvedIcon = computed(() => props.icon || DEFAULT_ICON[props.status]);
+
+// A faint status wash from the left edge (same recipe as the banner), so the
+// state reads at a glance without a coloured border.
+const cardStyle = computed(() => ({
+  "--dms-status-tint": tone.value.tint,
+  "--dms-status-line": tone.value.line,
+  background:
+    "radial-gradient(420px 180px at 0% 50%, var(--dms-status-tint), transparent 70%), var(--ui-bg)",
+}));
 </script>
 
 <template>
-  <DmsCard :padded="false" class="p-6 sm:px-7">
-    <div class="flex flex-col gap-5 sm:flex-row sm:items-center sm:gap-7">
+  <DmsCard
+    :padded="false"
+    class="px-4 py-[22px] sm:px-[26px]"
+    :style="cardStyle"
+  >
+    <div
+      class="flex flex-col gap-5 sm:flex-row sm:flex-wrap sm:items-center sm:gap-7"
+    >
       <div class="flex shrink-0 items-center gap-4">
         <div
-          :class="RING[status]"
-          class="grid size-16 shrink-0 place-items-center rounded-full border-2"
+          :class="tone.text"
+          class="relative grid size-16 shrink-0 place-items-center rounded-full border-[1.5px] border-(--dms-status-line) bg-(--dms-status-tint) shadow-[0_0_0_6px_color-mix(in_srgb,var(--dms-status-tint)_50%,transparent)]"
         >
           <UIcon :name="resolvedIcon" class="size-[30px]" :aria-hidden="true" />
+          <span
+            class="absolute top-[3px] right-[3px] size-[11px] rounded-full shadow-[0_0_12px_currentColor] ring-[2.5px] ring-(--ui-bg)"
+            :class="tone.dot"
+            aria-hidden="true"
+          >
+            <span
+              v-if="live"
+              class="absolute inset-0 animate-ping rounded-full [animation-duration:1.8s] motion-reduce:hidden"
+              :class="tone.dot"
+            />
+          </span>
         </div>
         <div>
-          <p
-            v-if="statusLabel"
-            class="text-dimmed font-mono text-[10.5px] tracking-[0.14em] uppercase"
-          >
-            {{ statusLabel }}
-          </p>
+          <DmsEyebrow v-if="statusLabel" :label="statusLabel" />
           <p
             :class="VALUE_TONE[status]"
-            class="mt-1 text-[28px] leading-none font-semibold tracking-tight"
+            class="mt-1.5 text-[28px] leading-none font-[650] tracking-[-0.035em]"
           >
             {{ statusValue }}
           </p>
+          <p v-if="since" class="text-dimmed mt-1.5 font-mono text-[11.5px]">
+            {{ since }}
+          </p>
         </div>
       </div>
 
@@ -93,24 +162,57 @@ const resolvedIcon = computed(() => props.icon || DEFAULT_ICON[props.status]);
 
       <div
         v-if="metrics.length"
-        class="grid flex-1 grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-4"
+        class="grid flex-1 grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-[repeat(auto-fit,minmax(96px,1fr))] lg:grid-cols-4"
       >
-        <div v-for="m in metrics" :key="m.label" class="min-w-0">
+        <div
+          v-for="(m, index) in metrics"
+          :key="m.label"
+          class="min-w-0"
+          :class="index > 0 && 'sm:border-muted sm:-ml-6 sm:border-l sm:pl-6'"
+        >
           <p
-            class="text-dimmed font-mono text-[10px] tracking-[0.12em] uppercase"
+            class="text-dimmed font-mono text-[10px] font-semibold tracking-[0.12em] uppercase"
           >
             {{ m.label }}
           </p>
           <p
             :class="METRIC_TONE[m.tone || 'default']"
-            class="mt-1.5 text-xl font-semibold tabular-nums"
+            class="mt-[7px] font-mono text-xl leading-[1.1] font-semibold tracking-[-0.03em] whitespace-nowrap tabular-nums"
           >
             {{ m.value }}
-            <span v-if="m.unit" class="text-dimmed ml-0.5 text-xs font-medium">
+            <span
+              v-if="m.unit"
+              class="text-dimmed ml-0.5 font-sans text-xs font-medium tracking-normal"
+            >
               {{ m.unit }}
             </span>
           </p>
-          <p v-if="m.sub" class="text-dimmed mt-1 text-[11px]">{{ m.sub }}</p>
+          <p v-if="m.sub" class="text-dimmed mt-1 text-[11.5px]">
+            {{ m.sub }}
+          </p>
+        </div>
+      </div>
+
+      <div
+        v-if="history.length"
+        class="border-muted grid basis-full gap-2 border-t pt-4"
+      >
+        <div
+          class="grid h-[26px] gap-[3px]"
+          :style="{ gridTemplateColumns: `repeat(${history.length}, 1fr)` }"
+        >
+          <span
+            v-for="(day, index) in history"
+            :key="index"
+            class="rounded-[2px]"
+            :class="HISTORY_CELL[day]"
+          />
+        </div>
+        <div
+          v-if="historyLabels.length"
+          class="text-dimmed flex justify-between font-mono text-[11px]"
+        >
+          <span v-for="label in historyLabels" :key="label">{{ label }}</span>
         </div>
       </div>
     </div>

package/frontend-vue/layers/dms-ui/app/components/status-pill/StatusPill.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { tv } from "tailwind-variants";
+import {
+  DMS_TONE_OUTLINE,
+  DMS_TONE_SOFT,
+  DMS_TONE_TEXT,
+  isDmsTone,
+} from "../../build/utils/tone";
+import type { Tone } from "../../types/tone";
+
+export type StatusPillDot = "none" | "static" | "live";
+export type StatusPillSize = "sm" | "md";
+export type StatusPillVariant = "soft" | "outline" | "text";
+
+interface StatusPillProps {
+  /**
+   * Semantic tone, or any Nuxt UI color name (`--ui-<name>` must exist) for
+   * statuses configured by the backend; unknown names get an inline tint.
+   */
+  tone?: Tone | (string & {});
+  /** Visible text (the default slot overrides it). */
+  label?: string;
+  /**
+   * Leading dot: `static`, `live` (glow + a pulsing halo, still under
+   * `prefers-reduced-motion`) or `none`. Ignored when `icon` is set.
+   */
+  dot?: StatusPillDot;
+  /** `md` 22px (v2 .status, table cells), `sm` 20px (tile corner). */
+  size?: StatusPillSize;
+  /** Mono label (v2 default); `false` uses the sans font. */
+  mono?: boolean;
+  /** Uppercase tracked label (module tile state). */
+  uppercase?: boolean;
+  /** Leading icon in place of the dot. */
+  icon?: string;
+  /**
+   * `soft` tinted pill (default), `outline` hairline pill, `text` the colored
+   * label alone (overview card state line).
+   */
+  variant?: StatusPillVariant;
+}
+
+interface StatusPillSlots {
+  default?: () => unknown;
+}
+
+const props = withDefaults(defineProps<StatusPillProps>(), {
+  tone: "neutral",
+  label: undefined,
+  dot: "static",
+  size: "md",
+  mono: true,
+  uppercase: false,
+  icon: undefined,
+  variant: "soft",
+});
+defineSlots<StatusPillSlots>();
+
+const CUSTOM_TINT_PERCENT = 12;
+
+// v2 .status: mono label on a tint of its tone, led by a 6px dot.
+const theme = tv({
+  slots: {
+    root: "inline-flex items-center font-semibold whitespace-nowrap",
+    dot: "relative shrink-0 rounded-full bg-current",
+    halo: "absolute inset-0 rounded-full bg-current opacity-60 motion-safe:animate-ping",
+    icon: "shrink-0",
+    label: "",
+  },
+  variants: {
+    variant: {
+      soft: { root: "rounded-full" },
+      outline: { root: "rounded-full border bg-transparent" },
+      // A state line may run long: it wraps like text instead of a pill.
+      text: { root: "whitespace-normal" },
+    },
+    size: {
+      sm: { root: "gap-1.5 text-[10px]", dot: "size-[5px]", icon: "size-3" },
+      md: { root: "gap-1.5 text-[11px]", dot: "size-1.5", icon: "size-3.5" },
+    },
+    mono: {
+      true: { root: "font-mono tracking-[0.02em]" },
+      false: { root: "font-sans" },
+    },
+    uppercase: {
+      true: { root: "tracking-[0.1em] uppercase" },
+    },
+    live: {
+      true: { dot: "shadow-[0_0_8px_currentColor]" },
+    },
+  },
+  compoundVariants: [
+    { variant: ["soft", "outline"], size: "sm", class: { root: "h-5 px-2" } },
+    {
+      variant: ["soft", "outline"],
+      size: "md",
+      class: { root: "h-[22px] px-[9px]" },
+    },
+    { variant: "text", size: "md", class: { root: "text-[11.5px]" } },
+    {
+      variant: "text",
+      mono: true,
+      uppercase: false,
+      class: { root: "font-medium tracking-normal" },
+    },
+    { variant: "soft", mono: false, size: "md", class: { root: "text-xs" } },
+  ],
+});
+
+const isKnownTone = computed(() => isDmsTone(props.tone));
+
+const toneClass = computed(() => {
+  const tone = props.tone;
+  if (!isDmsTone(tone)) return "";
+  if (props.variant === "soft") return DMS_TONE_SOFT[tone];
+  const text = props.variant === "text" && tone === "neutral";
+  const color = text ? "text-dimmed" : DMS_TONE_TEXT[tone];
+  return props.variant === "outline"
+    ? `${color} ${DMS_TONE_OUTLINE[tone]}`
+    : color;
+});
+
+// A backend-configured color outside the semantic set: tint it inline.
+const customStyle = computed(() => {
+  if (isKnownTone.value) return undefined;
+  const color = `var(--ui-${props.tone})`;
+  return {
+    color,
+    backgroundColor:
+      props.variant === "soft"
+        ? `color-mix(in srgb, ${color} ${CUSTOM_TINT_PERCENT}%, transparent)`
+        : undefined,
+    borderColor:
+      props.variant === "outline"
+        ? `color-mix(in srgb, ${color} 35%, transparent)`
+        : undefined,
+  };
+});
+
+const ui = computed(() =>
+  theme({
+    variant: props.variant,
+    size: props.size,
+    mono: props.mono,
+    uppercase: props.uppercase,
+    live: props.dot === "live",
+  }),
+);
+</script>
+
+<template>
+  <span :class="[ui.root(), toneClass]" :style="customStyle">
+    <UIcon
+      v-if="props.icon"
+      :name="props.icon"
+      :class="ui.icon()"
+      :aria-hidden="true"
+    />
+    <span v-else-if="props.dot !== 'none'" :class="ui.dot()" aria-hidden="true">
+      <span v-if="props.dot === 'live'" :class="ui.halo()" />
+    </span>
+    <span :class="ui.label()">
+      <slot>{{ props.label }}</slot>
+    </span>
+  </span>
+</template>

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { TabProps } from "../../composables/tab/types";
-import { TabVariant } from "../../composables/tab/types/props";
+import { type TabBadges, TabVariant } from "../../composables/tab/types/props";
+import { useChartFetch } from "../../composables/chart/useChartFetch";
+import { confirmLeave } from "../../build/composables/unsaved-changes/registry";
 
 const { processI18n } = useTranslation();
 
@@ -9,17 +11,73 @@ const props = withDefaults(defineProps<TabProps>(), {
   // assembled, or a serialized layout that carries no items. Without a default
   // every read of `items` throws during setup and takes the page down with it.
   items: () => [],
-  color: Color.primary,
+  // Neutral pill for in-content switches; page-level navigation passes primary.
+  color: Color.neutral,
   size: Size.medium,
   variant: TabVariant.pill,
   orientation: AxeOrientation.horizontal,
   unmountOnHide: true,
   persistState: false,
   stateKey: "tab",
+  badgesUrl: 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.
+const { state: watchState } = useWatch(
+  props.watchActions || [],
+  props.componentId,
+);
+const { data: fetchedBadges } = useChartFetch<TabBadges>({
+  fetchUrl: props.badgesUrl,
+  watchSource: () => JSON.stringify(watchState.value),
+});
+const { locale } = useI18n();
+const countFormat = computed(() => new Intl.NumberFormat(locale.value));
+
+// Shown like a table view's tab counts: a mono counter, tinted on the
+// active tab.
+const COUNT_BADGE_CLASS =
+  "rounded-[4px] bg-elevated px-[5px] py-px font-mono text-[10.5px] font-semibold tabular-nums text-dimmed ring-0 in-data-[state=active]:bg-primary/10 in-data-[state=active]:text-primary";
+
+function badgeOf(item: TabProps["items"][number]) {
+  const fetched = fetchedBadges.value?.[item.slot];
+  if (fetched === undefined) return item.badge;
+  return typeof fetched === "number"
+    ? countFormat.value.format(fetched)
+    : fetched;
+}
+
 const tabCount = computed(() => props.items.length);
 
+// The panel lines up with the list: below it, or beside a vertical one. A
+// phone has no room for a 192px column beside the panel: the vertical list
+// goes on top, full width.
+const PANEL_CLASSES: Record<AxeOrientation, string> = {
+  [AxeOrientation.horizontal]: "pt-4",
+  [AxeOrientation.vertical]: "pl-5 max-sm:pt-4 max-sm:pl-0",
+};
+
+const LIST_CLASSES: Record<AxeOrientation, string> = {
+  [AxeOrientation.horizontal]: "",
+  [AxeOrientation.vertical]: "w-48 shrink-0 max-sm:w-full",
+};
+
+const ROOT_CLASSES: Record<AxeOrientation, string> = {
+  [AxeOrientation.horizontal]: "",
+  [AxeOrientation.vertical]: "max-sm:flex-col max-sm:items-stretch",
+};
+
+const panelClass = computed(() => PANEL_CLASSES[props.orientation]);
+const tabsUi = computed(() => ({
+  root: ROOT_CLASSES[props.orientation],
+  list: LIST_CLASSES[props.orientation],
+  // The panel may shrink below its content's width (a wide table scrolls
+  // inside it instead of pushing the page sideways).
+  content: "min-w-0",
+  trailingBadge: props.badgesUrl ? COUNT_BADGE_CLASS : undefined,
+}));
+
 const {
   activeTab,
   nextTab,
@@ -32,13 +90,27 @@ const {
 
 useTabShortcuts({ items: props.items, goToTab });
 
+// A hidden panel is unmounted (unless asked otherwise): a form in it holding
+// unsaved changes would lose them, so switching away asks first.
+const root = useTemplateRef<HTMLElement>("root");
+
+async function selectTab(value: string | number): Promise<void> {
+  const next = String(value);
+  if (next === activeTab.value) return;
+  if (props.unmountOnHide) {
+    const panel = root.value?.querySelector('[role="tabpanel"]');
+    if (panel && !(await confirmLeave({ within: panel }))) return;
+  }
+  activeTab.value = next;
+}
+
 const tabItems = computed(() => {
   return props.items.map((item, index) => {
     const baseItem = {
       value: String(index),
       slot: item.slot,
       icon: item.icon,
-      badge: item.badge,
+      badge: badgeOf(item),
       disabled: item.disabled,
       avatar: item.avatar,
     };
@@ -62,18 +134,20 @@ defineExpose({
 </script>
 
 <template>
-  <div class="dms-tab h-full w-full">
+  <div ref="root" class="dms-tab h-full w-full">
     <UTabs
-      v-model="activeTab"
+      :model-value="activeTab"
       :items="tabItems"
       :color="props.color as ColorValue"
       :size="props.size"
       :variant="props.variant"
       :orientation="props.orientation"
       :unmount-on-hide="props.unmountOnHide"
+      :ui="tabsUi"
+      @update:model-value="selectTab"
     >
       <template v-for="item in props.items" :key="item.slot" #[item.slot]>
-        <div class="p-4">
+        <div class="space-y-6" :class="panelClass">
           <slot :name="item.slot" />
         </div>
       </template>

package/frontend-vue/layers/dms-ui/app/components/table-view/FilePreview.vue

@@ -43,7 +43,7 @@ onMounted(async () => {
       v-else
       :to="metadata.url"
       target="_blank"
-      class="decoration-dimmed/40 hover:decoration-muted flex items-center gap-1 truncate underline"
+      class="decoration-dimmed/40 hover:decoration-muted text-muted hover:text-default flex items-center gap-1 truncate font-normal underline"
       @click.stop
     >
       <span class="truncate">{{ metadata.filename }}</span>