@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/layers/dms-ui/app/components/section-header/SectionHeader.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { tv } from "tailwind-variants";
+import DmsEyebrow from "./Eyebrow.vue";
+
+export type SectionHeaderSize = "section" | "card";
+
+interface SectionHeaderProps {
+  /** Heading text (the `title` slot overrides it). */
+  title?: string;
+  /** Mono count after the title ("Installed 12"). */
+  count?: number | string;
+  /** One line under the title (the `description` slot overrides it). */
+  description?: string;
+  /**
+   * `section`: v2 .c-head / .st-block__head, a 15px title above a card.
+   * `card`: v2 .card__head, the title as a muted eyebrow inside a card.
+   */
+  size?: SectionHeaderSize;
+  /** Heading element of the title. */
+  as?: string;
+  /** Destructive section: the title turns to the error color. */
+  danger?: boolean;
+}
+
+interface SectionHeaderSlots {
+  title?: () => unknown;
+  /** Inline after the title and the count (badge, tag, tooltip…). */
+  badge?: () => unknown;
+  description?: () => unknown;
+  /** Right-aligned actions; they wrap under the heading on narrow screens. */
+  trailing?: () => unknown;
+}
+
+const props = withDefaults(defineProps<SectionHeaderProps>(), {
+  title: undefined,
+  count: undefined,
+  description: undefined,
+  size: "section",
+  as: undefined,
+  danger: false,
+});
+const slots = defineSlots<SectionHeaderSlots>();
+
+const theme = tv({
+  slots: {
+    root: "flex flex-wrap gap-3",
+    heading: "min-w-0",
+    title: "flex min-w-0 flex-wrap items-center gap-2",
+    count: "text-dimmed font-mono text-[10.5px] font-medium",
+    description: "",
+    trailing: "flex items-center gap-2",
+  },
+  variants: {
+    size: {
+      section: {
+        root: "items-end",
+        title:
+          "text-highlighted text-[15px] leading-[1.3] font-[650] tracking-[-0.01em]",
+        description: "text-muted mt-0.5 max-w-[72ch] text-[13px]",
+        trailing: "sm:ms-auto",
+      },
+      card: {
+        root: "flex-nowrap items-start gap-2.5",
+        heading: "flex-1",
+        title: "flex-nowrap",
+        // One line each on wide screens; on a phone, beside the trailing
+        // badge or actions, the title and description wrap instead.
+        description:
+          "text-dimmed mt-1 truncate text-xs max-sm:whitespace-normal",
+        trailing: "shrink-0",
+      },
+    },
+    danger: {
+      true: { title: "text-error" },
+    },
+  },
+});
+
+const ui = computed(() => theme({ size: props.size, danger: props.danger }));
+const isCard = computed(() => props.size === "card");
+const headingTag = computed(() => props.as ?? (isCard.value ? "p" : "h2"));
+const hasCount = computed(
+  () => props.count !== undefined && props.count !== null,
+);
+</script>
+
+<template>
+  <header :class="ui.root()">
+    <div :class="ui.heading()">
+      <component
+        :is="headingTag"
+        v-if="props.title || slots.title || slots.badge"
+        :class="ui.title()"
+      >
+        <slot name="title">
+          <DmsEyebrow
+            v-if="isCard"
+            as="span"
+            tone="muted"
+            class="min-w-0 max-sm:whitespace-normal"
+            truncate
+            :label="props.title"
+          />
+          <template v-else>{{ props.title }}</template>
+        </slot>
+        <span v-if="hasCount" :class="ui.count()">{{ props.count }}</span>
+        <slot name="badge" />
+      </component>
+      <p
+        v-if="props.description || slots.description"
+        :class="ui.description()"
+      >
+        <slot name="description">{{ props.description }}</slot>
+      </p>
+    </div>
+    <div v-if="slots.trailing" :class="ui.trailing()">
+      <slot name="trailing" />
+    </div>
+  </header>
+</template>

package/frontend-vue/layers/dms-ui/app/components/segmented/Segmented.vue

@@ -1,68 +1,167 @@
 <script setup lang="ts">
+import { MONO_CHIP_CLASS } from "../../build/utils/monoChip";
 import { computed, ref } from "vue";
 
-// Segmented toggle (design .segmented): a recessed track holding pill
-// segments, the active one raised onto the card surface with a soft shadow.
+// Segmented toggle (design .segmented): a recessed track holding segments,
+// the active one raised onto the card surface with a hairline ring.
 // Single-select, v-model'd. Implements the radiogroup keyboard pattern
-// (roving tabindex + arrow/Home/End) for WCAG-correct a11y.
+// (roving tabindex + arrow/Home/End, skipping disabled segments).
 interface SegItem {
   label: string;
   value: string | number;
   icon?: string;
+  /** Small mono counter after the label. */
+  count?: string | number;
+  disabled?: boolean;
 }
 
 type SegmentedSize = "xs" | "sm" | "md" | "lg" | "xl";
+type SegmentedVariant = "default" | "mono";
 
 interface Props {
   items: SegItem[];
   ariaLabel?: string;
   size?: SegmentedSize;
+  /** "mono" = short mono labels (7D / 30D / 90D), used by period selectors. */
+  variant?: SegmentedVariant;
+  disabled?: boolean;
+  /** Stretch the track to its container, segments sharing the width. */
+  block?: boolean;
+  /**
+   * What a track wider than its container does: `scroll` (default) slides
+   * sideways inside its pill, `wrap` breaks the segments onto more lines
+   * (a short list of long labels on a phone, a narrow settings column).
+   */
+  overflow?: "scroll" | "wrap";
 }
 
-const SIZE_CLASSES: Record<SegmentedSize, string> = {
-  xs: "h-[26px] px-2.5 text-[11.5px]",
-  sm: "h-[30px] px-3.5 text-[12.5px]",
-  md: "h-[34px] px-4 text-[13.5px]",
-  lg: "h-[38px] px-5 text-sm",
-  xl: "h-[44px] px-6 text-[15px]",
+// v2 heights (24/28/32/36/40) live on the track; segments fill it.
+const TRACK_SIZE_CLASSES: Record<SegmentedSize, string> = {
+  xs: "h-6",
+  sm: "h-7",
+  md: "h-8",
+  lg: "h-9",
+  xl: "h-10",
 };
 
+// A wrapping track grows with its lines, so segments carry the height
+// (the track's minus its 2px padding on each side).
+const WRAP_ITEM_HEIGHT_CLASSES: Record<SegmentedSize, string> = {
+  xs: "h-5",
+  sm: "h-6",
+  md: "h-7",
+  lg: "h-8",
+  xl: "h-9",
+};
+
+const ITEM_SIZE_CLASSES: Record<SegmentedSize, string> = {
+  xs: "px-[7px] text-[11.5px]",
+  sm: "px-2.5 text-[12.5px]",
+  md: "px-3 text-[12.5px]",
+  lg: "px-3.5 text-[13px]",
+  xl: "px-4 text-sm",
+};
+
+const VARIANT_CLASSES: Record<SegmentedVariant, string> = {
+  default: "",
+  mono: "font-mono text-[11.5px] tracking-[0.02em]",
+};
+
+const ACTIVE_CLASS =
+  "text-highlighted bg-(--dms-surface-card) font-semibold shadow-xs ring ring-accented";
+const IDLE_CLASS = "text-muted hover:text-highlighted font-medium";
+const DISABLED_CLASS = "cursor-not-allowed opacity-40";
+
 const props = withDefaults(defineProps<Props>(), {
   size: "sm",
+  variant: "default",
+  disabled: false,
+  block: false,
+  overflow: "scroll",
 });
 
+const isWrapping = computed(() => props.overflow === "wrap");
+const trackClass = computed(() => [
+  isWrapping.value ? "h-auto flex-wrap" : TRACK_SIZE_CLASSES[props.size],
+  props.block ? "flex w-full" : "inline-flex",
+  props.disabled && "opacity-50",
+]);
+
 const model = defineModel<string | number>();
 
 const itemRefs = ref<HTMLButtonElement[]>([]);
 
-// Roving tabindex anchor: the checked segment, or the first one if none.
+function isDisabled(index: number): boolean {
+  return props.disabled || !!props.items[index]?.disabled;
+}
+
+// Roving tabindex anchor: the checked segment, or the first enabled one.
 const focusIndex = computed(() => {
-  const i = props.items.findIndex((item) => item.value === model.value);
-  return i === -1 ? 0 : i;
+  const checked = props.items.findIndex((item) => item.value === model.value);
+  if (checked !== -1) return checked;
+  const firstEnabled = props.items.findIndex((_, index) => !isDisabled(index));
+  return Math.max(firstEnabled, 0);
 });
 
 function select(index: number) {
   const item = props.items[index];
-  if (!item) return;
+  if (!item || isDisabled(index)) return;
   model.value = item.value;
   itemRefs.value[index]?.focus();
 }
 
-const KEY_NAVIGATORS: Record<string, (index: number, last: number) => number> =
-  {
-    ArrowRight: (index, last) => (index === last ? 0 : index + 1),
-    ArrowDown: (index, last) => (index === last ? 0 : index + 1),
-    ArrowLeft: (index, last) => (index === 0 ? last : index - 1),
-    ArrowUp: (index, last) => (index === 0 ? last : index - 1),
-    Home: () => 0,
-    End: (_index, last) => last,
-  };
+type StepFn = (index: number, last: number) => number;
+
+const NEXT: StepFn = (index, last) => (index === last ? 0 : index + 1);
+const PREVIOUS: StepFn = (index, last) => (index === 0 ? last : index - 1);
+
+/** Where a key lands first, and which way it walks past disabled segments. */
+interface KeyMove {
+  target: StepFn;
+  direction: StepFn;
+}
+
+const KEY_MOVES: Record<string, KeyMove> = {
+  ArrowRight: { target: NEXT, direction: NEXT },
+  ArrowDown: { target: NEXT, direction: NEXT },
+  ArrowLeft: { target: PREVIOUS, direction: PREVIOUS },
+  ArrowUp: { target: PREVIOUS, direction: PREVIOUS },
+  Home: { target: () => 0, direction: NEXT },
+  End: { target: (_index, last) => last, direction: PREVIOUS },
+};
+
+function firstEnabledFrom(start: number, direction: StepFn): number {
+  const last = props.items.length - 1;
+  let index = start;
+  for (let tries = 0; tries < props.items.length; tries++) {
+    if (!isDisabled(index)) return index;
+    index = direction(index, last);
+  }
+  return start;
+}
 
 function onKeydown(event: KeyboardEvent, index: number) {
-  const navigate = KEY_NAVIGATORS[event.key];
-  if (!navigate) return;
+  const move = KEY_MOVES[event.key];
+  if (!move) return;
   event.preventDefault();
-  select(navigate(index, props.items.length - 1));
+  const target = move.target(index, props.items.length - 1);
+  select(firstEnabledFrom(target, move.direction));
+}
+
+// A track wider than its container (a phone, a narrow column) scrolls
+// sideways inside its pill, or wraps with `overflow="wrap"`; the focus ring
+// sits inside the segment so the scroll box never clips it. (No root-level
+// template comment: it would break the class fallthrough.)
+function itemClass(item: SegItem, index: number): (string | false)[] {
+  const isActive = model.value === item.value;
+  return [
+    ITEM_SIZE_CLASSES[props.size],
+    isWrapping.value ? WRAP_ITEM_HEIGHT_CLASSES[props.size] : "h-full",
+    VARIANT_CLASSES[props.variant],
+    isActive ? ACTIVE_CLASS : IDLE_CLASS,
+    isDisabled(index) && DISABLED_CLASS,
+    props.block && "flex-1 justify-center",
+  ];
 }
 </script>
 
@@ -70,7 +169,9 @@ function onKeydown(event: KeyboardEvent, index: number) {
   <div
     role="radiogroup"
     :aria-label="ariaLabel"
-    class="ring-default bg-muted dark:bg-default inline-flex gap-0.5 rounded-md p-[3px] ring ring-inset"
+    :aria-disabled="disabled || undefined"
+    class="ring-default max-w-full [scrollbar-width:none] items-center gap-0.5 overflow-x-auto rounded-lg bg-(--dms-bg-muted) p-0.5 ring ring-inset"
+    :class="trackClass"
   >
     <button
       v-for="(item, index) in items"
@@ -83,14 +184,10 @@ function onKeydown(event: KeyboardEvent, index: number) {
       type="button"
       role="radio"
       :aria-checked="model === item.value"
+      :disabled="isDisabled(index)"
       :tabindex="index === focusIndex ? 0 : -1"
-      class="inline-flex items-center gap-1.5 rounded-md font-semibold transition-colors"
-      :class="[
-        SIZE_CLASSES[size],
-        model === item.value
-          ? 'text-default bg-(--dms-surface-card) shadow-sm'
-          : 'text-muted hover:text-default',
-      ]"
+      class="focus-visible:outline-primary inline-flex shrink-0 items-center gap-1.5 rounded-[6px] whitespace-nowrap transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2"
+      :class="itemClass(item, index)"
       @click="select(index)"
       @keydown="onKeydown($event, index)"
     >
@@ -101,6 +198,18 @@ function onKeydown(event: KeyboardEvent, index: number) {
         :aria-hidden="true"
       />
       {{ item.label }}
+      <span
+        v-if="item.count !== undefined"
+        :class="[
+          MONO_CHIP_CLASS,
+          'text-[10px] font-semibold',
+          model === item.value
+            ? 'text-primary bg-(--dms-accent-tint)'
+            : 'text-dimmed bg-elevated',
+        ]"
+      >
+        {{ item.count }}
+      </span>
     </button>
   </div>
 </template>

package/frontend-vue/layers/dms-ui/app/components/stat-group/StatGroup.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { IconWellTone } from "../icon-well/IconWell.vue";
+import DmsStatCell from "../../build/components/stat/StatCell.vue";
+import type { Tone } from "../../types/tone";
+
+export type StatGroupLayout = "joined" | "cards";
+
+export interface StatGroupItem {
+  /** Stable key; the position is used without one. */
+  id?: string;
+  /** Icon of the well; the cell has no well without one. */
+  icon?: string;
+  /**
+   * Well tone. Defaults to `muted` (quiet row icon) in the joined layout and
+   * `primary` in the cards layout.
+   */
+  tone?: IconWellTone;
+  /** Mono label above the value. */
+  eyebrow: string;
+  /** The figure or the short state ("On", "8 / 10", 12). */
+  value: string | number;
+  /** One line under the value. */
+  detail?: string;
+  /** Tone of the detail line (`neutral` = muted text). */
+  detailTone?: Tone;
+  /** Route, `#anchor` or URL the whole cell links to. */
+  to?: string;
+}
+
+interface StatGroupProps {
+  items?: StatGroupItem[];
+  /**
+   * `joined`: one card split in cells by hairlines (v2 .cs-status, security
+   * status). `cards`: one compact stat card per item (v2 .mc-summary,
+   * modules summary).
+   */
+  layout?: StatGroupLayout;
+  /**
+   * Columns on wide screens (1–6); fewer on narrow ones. Defaults to the
+   * number of items.
+   */
+  columns?: number;
+  /**
+   * Loading: with items, their well and value turn to skeletons (labels stay);
+   * without, `skeletonCount` placeholder cells are drawn.
+   */
+  loading?: boolean;
+  /** Placeholder cells drawn while loading without items. */
+  skeletonCount?: number;
+  /** Accessible name of the group (announced as a navigation when it links). */
+  label?: string;
+}
+
+const props = withDefaults(defineProps<StatGroupProps>(), {
+  items: () => [],
+  layout: "joined",
+  columns: undefined,
+  loading: false,
+  skeletonCount: 4,
+  label: undefined,
+});
+
+const MIN_COLUMNS = 1;
+const MAX_COLUMNS = 6;
+
+// Literal class strings (Tailwind extracts them). The columns follow the
+// group's own width (container queries on the root), not the viewport: in a
+// narrow settings column at 1024px a four-cell group keeps two columns
+// instead of four cramped ones. The joined group carries a detail line, so it
+// drops to one column when narrow; the compact cards keep two.
+const JOINED_COLUMNS: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 @sm:grid-cols-2",
+  3: "grid-cols-1 @xl:grid-cols-3",
+  4: "grid-cols-1 @sm:grid-cols-2 @3xl:grid-cols-4",
+  5: "grid-cols-1 @sm:grid-cols-2 @4xl:grid-cols-5",
+  6: "grid-cols-1 @lg:grid-cols-3 @5xl:grid-cols-6",
+};
+const CARD_COLUMNS: Record<number, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-1 @xl:grid-cols-3",
+  4: "grid-cols-2 @3xl:grid-cols-4",
+  5: "grid-cols-2 @2xl:grid-cols-3 @5xl:grid-cols-5",
+  6: "grid-cols-2 @2xl:grid-cols-3 @5xl:grid-cols-6",
+};
+
+// Every joined cell draws its top and start hairlines; the grid is pulled 1px
+// up and left under the card's clipping edge, so the first row and the first
+// column lose theirs at any column count and on every breakpoint.
+const JOINED_HAIRLINES = "border-muted border-s border-t";
+
+const isJoined = computed(() => props.layout === "joined");
+const columnCount = computed(() => {
+  const wanted =
+    props.columns ?? (props.items.length || props.skeletonCount || MIN_COLUMNS);
+  return Math.min(MAX_COLUMNS, Math.max(MIN_COLUMNS, Math.round(wanted)));
+});
+const columnClass = computed(
+  () => (isJoined.value ? JOINED_COLUMNS : CARD_COLUMNS)[columnCount.value],
+);
+const showPlaceholders = computed(
+  () => props.loading && props.items.length === 0,
+);
+const hasLinks = computed(() => props.items.some((item) => !!item.to));
+
+function keyOf(item: StatGroupItem, index: number): string {
+  return item.id ?? String(index);
+}
+
+function wellTone(item: StatGroupItem): IconWellTone {
+  return item.tone ?? (isJoined.value ? "muted" : "primary");
+}
+// Two layouts of the same DmsStatCell: joined (v2 .cs-status, one card with
+// cells split by hairlines, `sm` cells) and cards (v2 .mc-summary, one
+// compact `md` card per item, the KPI card's stat look). The template keeps
+// no root-level comment, so a parent's class still falls through in dev
+// builds.
+</script>
+
+<template>
+  <component
+    :is="hasLinks ? 'nav' : 'div'"
+    v-if="isJoined"
+    class="dms-card @container overflow-hidden"
+    :aria-label="props.label"
+    :aria-busy="props.loading || undefined"
+  >
+    <div class="-ms-px -mt-px grid" :class="columnClass">
+      <template v-if="showPlaceholders">
+        <DmsStatCell
+          v-for="index in props.skeletonCount"
+          :key="index"
+          size="sm"
+          placeholder
+          :class="JOINED_HAIRLINES"
+        />
+      </template>
+      <template v-else>
+        <DmsStatCell
+          v-for="(item, index) in props.items"
+          :key="keyOf(item, index)"
+          :eyebrow="item.eyebrow"
+          :value="item.value"
+          :icon="item.icon"
+          :detail="item.detail"
+          :detail-tone="item.detailTone"
+          :to="item.to"
+          size="sm"
+          :tone="wellTone(item)"
+          :loading="props.loading"
+          :class="JOINED_HAIRLINES"
+        />
+      </template>
+    </div>
+  </component>
+
+  <div v-else class="@container" :aria-busy="props.loading || undefined">
+    <div class="grid gap-3" :class="columnClass">
+      <template v-if="showPlaceholders">
+        <DmsStatCell
+          v-for="index in props.skeletonCount"
+          :key="index"
+          placeholder
+          stack
+        />
+      </template>
+      <template v-else>
+        <DmsStatCell
+          v-for="(item, index) in props.items"
+          :key="keyOf(item, index)"
+          :eyebrow="item.eyebrow"
+          :value="item.value"
+          :icon="item.icon"
+          :detail="item.detail"
+          :detail-tone="item.detailTone"
+          :to="item.to"
+          :tone="wellTone(item)"
+          :loading="props.loading"
+          stack
+        />
+      </template>
+    </div>
+  </div>
+</template>