@dumiflex/wp-kit 0.0.0-stage → 0.3.0

package/src/DataTable.vue

@@ -0,0 +1,292 @@
+<script setup lang="ts" generic="T extends object">
+/**
+ * DataTable: rows and columns with a sticky header, sortable columns, row
+ * selection, a loading state and an empty state. Built on the `.wp-table`
+ * classes so it matches the list pages.
+ *
+ *   <DataTable
+ *     v-model:sort="sort" v-model:selected="picked"
+ *     :columns="[{ key: 'name', label: 'Name', sortable: true }, { key: 'uses', label: 'Uses', align: 'right', sortable: true }]"
+ *     :rows="rows" row-key="id" selectable aria-label="Tags"
+ *   >
+ *     <template #cell-name="{ row }"><Chip>{{ row.name }}</Chip></template>
+ *     <template #empty><EmptyState … /></template>
+ *   </DataTable>
+ *
+ * Sorting (APG sortable table): each sortable header holds a button, and only
+ * the sorted column carries `aria-sort`. The table sorts its rows itself
+ * (by `sortValue`, else the cell value); with `manual-sort` it only reports
+ * the sort and the parent passes rows in order.
+ *
+ * `row-clickable` makes each row open something (a trace, a detail panel):
+ * rows take focus, and a click or Enter emits `row-click`. `active-key`
+ * marks the row that is open.
+ */
+import { computed } from "vue";
+import Checkbox from "./Checkbox.vue";
+
+export interface DataColumn<R> {
+  key: string;
+  label: string;
+  sortable?: boolean | undefined;
+  align?: "left" | "right" | "center" | undefined;
+  /** A CSS width for the column, e.g. `120px` or `30%`. */
+  width?: string | undefined;
+  /** Show the value in the mono font (counts, ids, seeds). */
+  mono?: boolean | undefined;
+  /** The value to sort by, when it isn't `row[key]`. */
+  sortValue?: (row: R) => string | number | null | undefined;
+  /** The direction a first click sorts in. */
+  firstDir?: "asc" | "desc" | undefined;
+  /** Hide the header text (an actions column); it still names the cells. */
+  hideLabel?: boolean | undefined;
+  /** A class on the column's header and cells. */
+  class?: string | undefined;
+  /** Extra attributes on the header cell (e.g. `data-ai-anchor`). */
+  headAttrs?: Record<string, string> | undefined;
+}
+
+export interface DataSort { key: string; dir: "asc" | "desc" }
+
+const props = withDefaults(defineProps<{
+  columns: DataColumn<T>[];
+  rows: T[];
+  /** A field name, or a function, giving each row a stable key. */
+  rowKey: string | ((row: T) => string);
+  sort?: DataSort | null | undefined;
+  /** The parent sorts the rows; the table only reports clicks. */
+  manualSort?: boolean | undefined;
+  selectable?: boolean | undefined;
+  selected?: string[] | undefined;
+  loading?: boolean | undefined;
+  /** How many placeholder rows to draw while loading. */
+  loadingRows?: number | undefined;
+  stickyHead?: boolean | undefined;
+  /** Shown when there are no rows and no `#empty` slot. */
+  emptyText?: string | undefined;
+  ariaLabel?: string | undefined;
+  /** Extra attributes per row, e.g. `data-test`. */
+  rowAttrs?: ((row: T) => Record<string, string | undefined>) | undefined;
+  size?: "sm" | "md" | undefined;
+  /** Rows are focusable and emit `row-click` on click or Enter. */
+  rowClickable?: boolean | undefined;
+  /** The key of the row that is open, drawn highlighted. */
+  activeKey?: string | null | undefined;
+}>(), {
+  sort: null,
+  selected: () => [],
+  loadingRows: 3,
+  stickyHead: true,
+  emptyText: "Nothing here yet.",
+  rowAttrs: undefined,
+  size: "md",
+  activeKey: null,
+});
+
+const emit = defineEmits<{
+  (e: "update:sort", s: DataSort | null): void;
+  (e: "update:selected", keys: string[]): void;
+  (e: "row-click", row: T): void;
+}>();
+
+const keyOf = (row: T): string =>
+  typeof props.rowKey === "function" ? props.rowKey(row) : String((row as Record<string, unknown>)[props.rowKey]);
+
+const cell = (row: T, key: string): unknown => (row as Record<string, unknown>)[key];
+
+const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" });
+
+const shown = computed<T[]>(() => {
+  const s = props.sort;
+  if (!s || props.manualSort) return props.rows;
+  const col = props.columns.find((c) => c.key === s.key);
+  if (!col) return props.rows;
+  const val = (r: T): unknown => (col.sortValue ? col.sortValue(r) : cell(r, col.key));
+  const sign = s.dir === "asc" ? 1 : -1;
+  return [...props.rows].sort((a, b) => {
+    const x = val(a);
+    const y = val(b);
+    // Blanks sort last whichever way the column goes.
+    const xb = x === null || x === undefined || x === "";
+    const yb = y === null || y === undefined || y === "";
+    if (xb || yb) return xb === yb ? 0 : xb ? 1 : -1;
+    if (typeof x === "number" && typeof y === "number") return (x - y) * sign;
+    return collator.compare(String(x), String(y)) * sign;
+  });
+});
+
+function ariaSort(c: DataColumn<T>): "ascending" | "descending" | undefined {
+  if (!c.sortable || props.sort?.key !== c.key) return undefined;
+  return props.sort.dir === "asc" ? "ascending" : "descending";
+}
+
+function sortBy(c: DataColumn<T>): void {
+  const now = props.sort;
+  const dir = now?.key === c.key ? (now.dir === "asc" ? "desc" : "asc") : (c.firstDir ?? "asc");
+  emit("update:sort", { key: c.key, dir });
+}
+
+const picked = computed(() => new Set(props.selected));
+const allKeys = computed(() => shown.value.map(keyOf));
+const allPicked = computed(() => allKeys.value.length > 0 && allKeys.value.every((k) => picked.value.has(k)));
+const somePicked = computed(() => !allPicked.value && allKeys.value.some((k) => picked.value.has(k)));
+
+function toggleAll(on: boolean): void {
+  const keys = new Set(props.selected);
+  for (const k of allKeys.value) {
+    if (on) keys.add(k);
+    else keys.delete(k);
+  }
+  emit("update:selected", [...keys]);
+}
+
+function toggleRow(row: T, on: boolean): void {
+  const k = keyOf(row);
+  emit("update:selected", on ? [...props.selected.filter((x) => x !== k), k] : props.selected.filter((x) => x !== k));
+}
+
+const span = computed(() => props.columns.length + (props.selectable ? 1 : 0));
+</script>
+
+<template>
+  <div class="wp-table-wrap wp-data-table" :data-size="size">
+    <table
+      class="wp-table"
+      :class="{ 'wp-table--sticky-head': stickyHead }"
+      :aria-label="ariaLabel"
+      :aria-busy="loading || undefined"
+    >
+      <colgroup>
+        <col v-if="selectable" class="wp-data-table__check-col">
+        <col v-for="c in columns" :key="c.key" :style="c.width ? { width: c.width } : undefined">
+      </colgroup>
+      <thead>
+        <tr>
+          <th v-if="selectable" class="wp-data-table__check" scope="col">
+            <Checkbox
+              class="wp-checkbox--inline"
+              :model-value="allPicked"
+              :indeterminate="somePicked"
+              :disabled="loading || allKeys.length === 0"
+              aria-label="Select all rows"
+              @update:model-value="toggleAll"
+            />
+          </th>
+          <th
+            v-for="c in columns"
+            :key="c.key"
+            scope="col"
+            v-bind="c.headAttrs ?? {}"
+            :class="c.class"
+            :aria-sort="ariaSort(c)"
+            :data-align="c.align"
+          >
+            <button
+              v-if="c.sortable"
+              type="button"
+              class="wp-data-table__sort"
+              :data-sorted="sort?.key === c.key ? sort.dir : undefined"
+              @click="sortBy(c)"
+            >
+              <slot :name="`head-${c.key}`" :column="c">{{ c.label }}</slot>
+              <i
+                class="pi wp-data-table__sort-icon"
+                :class="sort?.key === c.key ? (sort.dir === 'asc' ? 'pi-sort-up-fill' : 'pi-sort-down-fill') : 'pi-sort'"
+                aria-hidden="true"
+              />
+            </button>
+            <span v-else-if="c.hideLabel" class="wp-data-table__sr">{{ c.label }}</span>
+            <slot v-else :name="`head-${c.key}`" :column="c">{{ c.label }}</slot>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <template v-if="loading && rows.length === 0">
+          <tr v-for="n in loadingRows" :key="`skel-${n}`" class="wp-row-skel" aria-hidden="true">
+            <td v-for="i in span" :key="i"><span class="wp-skel-bar" :style="{ width: `${40 + ((n * 17 + i * 23) % 50)}%` }" /></td>
+          </tr>
+        </template>
+        <tr v-else-if="shown.length === 0" class="wp-data-table__empty">
+          <td :colspan="span">
+            <slot name="empty"><span class="wp-dim">{{ emptyText }}</span></slot>
+          </td>
+        </tr>
+        <template v-else>
+          <tr
+            v-for="(row, index) in shown"
+            :key="keyOf(row)"
+            v-bind="rowAttrs ? rowAttrs(row) : {}"
+            :aria-selected="selectable ? picked.has(keyOf(row)) : undefined"
+            :data-selected="selectable && picked.has(keyOf(row)) ? 'true' : undefined"
+            :data-active="activeKey !== null && keyOf(row) === activeKey ? 'true' : undefined"
+            :data-clickable="rowClickable || undefined"
+            :tabindex="rowClickable ? 0 : undefined"
+            @click="rowClickable && emit('row-click', row)"
+            @keydown.enter="rowClickable && emit('row-click', row)"
+          >
+            <td v-if="selectable" class="wp-data-table__check" @click.stop>
+              <Checkbox
+                class="wp-checkbox--inline"
+                :model-value="picked.has(keyOf(row))"
+                aria-label="Select row"
+                @update:model-value="(on: boolean) => toggleRow(row, on)"
+              />
+            </td>
+            <td
+              v-for="c in columns"
+              :key="c.key"
+              :data-align="c.align"
+              :class="[c.class, { 'wp-mono': c.mono }]"
+            >
+              <slot :name="`cell-${c.key}`" :row="row" :value="cell(row, c.key)" :index="index">{{ cell(row, c.key) ?? "" }}</slot>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+.wp-data-table { overflow: auto; }
+.wp-data-table th[data-align="right"], .wp-data-table td[data-align="right"] { text-align: right; }
+.wp-data-table th[data-align="center"], .wp-data-table td[data-align="center"] { text-align: center; }
+.wp-data-table th[data-align="right"] .wp-data-table__sort { flex-direction: row-reverse; }
+.wp-data-table[data-size="sm"] :deep(thead th) { padding: 6px 10px; }
+.wp-data-table[data-size="sm"] :deep(tbody td) { padding: 6px 10px; }
+.wp-data-table__check-col { width: 40px; }
+.wp-data-table__check { width: 40px; text-align: center; }
+.wp-data-table__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: -4px -6px;
+  padding: 4px 6px;
+  border: 0;
+  border-radius: var(--wp-radius-sm);
+  background: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+}
+.wp-data-table__sort:hover { color: var(--wp-text); background: var(--wp-bg-3); }
+.wp-data-table__sort:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+.wp-data-table__sort[data-sorted] { color: var(--wp-text); }
+.wp-data-table__sort-icon { font-size: 10px; opacity: 0.5; }
+.wp-data-table__sort[data-sorted] .wp-data-table__sort-icon { opacity: 1; color: var(--wp-accent-text); }
+.wp-data-table tbody tr[data-selected="true"] td { background: var(--wp-row-active, var(--wp-row-hover)); }
+.wp-data-table tbody tr[data-clickable] { cursor: pointer; }
+.wp-data-table tbody tr[data-clickable]:focus-visible { outline: 2px solid var(--wp-border-focus); outline-offset: -2px; }
+.wp-data-table tbody tr[data-active="true"] td { background: color-mix(in oklab, var(--wp-accent-500) 16%, transparent); }
+.wp-data-table__empty td { padding: 20px 12px; text-align: center; }
+.wp-data-table__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+</style>

package/src/DatePicker.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+/**
+ * A date field: the button shows the picked day; it opens a month grid in
+ * a kit Popover. The value is a "YYYY-MM-DD" string (a calendar day, no
+ * time zone) or null.
+ *
+ *   <DatePicker v-model="since" aria-label="Changed since" clearable />
+ *   <DatePicker v-model="day" :min="firstRun" :max="today" />
+ *
+ * APG date picker dialog: the grid is one Tab stop; arrows move a day or a
+ * week, PageUp / PageDown a month (Shift: a year), Home / End to the start
+ * or end of the week, Enter or Space picks, Escape closes and gives focus
+ * back to the button. Days outside `min` / `max` can't be picked.
+ */
+import { computed, nextTick, ref, useId, watch } from "vue";
+import Popover from "./Popover.vue";
+import {
+  addDays, addMonths, compareYmd, fromDate, monthGrid, parseYmd, toYmd, weekdayNames, type Ymd,
+} from "./calendar";
+
+const props = withDefaults(defineProps<{
+  modelValue: string | null;
+  min?: string | undefined;
+  max?: string | undefined;
+  placeholder?: string | undefined;
+  size?: "sm" | "md" | "lg" | undefined;
+  disabled?: boolean | undefined;
+  invalid?: boolean | undefined;
+  ariaLabel?: string | undefined;
+  clearable?: boolean | undefined;
+  /** 0 = Sunday, 1 = Monday. */
+  weekStart?: 0 | 1 | undefined;
+  /** Language for month and day names; the browser's by default. */
+  locale?: string | undefined;
+}>(), {
+  min: undefined, max: undefined, placeholder: "Pick a date", size: "md",
+  ariaLabel: "Date", weekStart: 1, locale: undefined,
+});
+
+const emit = defineEmits<{ (e: "update:modelValue", v: string | null): void }>();
+
+const uid = useId();
+const gridId = `wp-date-grid-${uid}`;
+const titleId = `wp-date-title-${uid}`;
+const open = ref(false);
+const gridEl = ref<HTMLElement | null>(null);
+
+const value = computed(() => parseYmd(props.modelValue));
+const lo = computed(() => parseYmd(props.min));
+const hi = computed(() => parseYmd(props.max));
+const today = fromDate(new Date());
+
+/** The day with the keyboard focus; the shown month follows it. */
+const focus = ref<Ymd>(value.value ?? today);
+const days = computed(() => monthGrid(focus.value.y, focus.value.m, props.weekStart));
+const weeks = computed(() => Array.from({ length: 6 }, (_, w) => days.value.slice(w * 7, w * 7 + 7)));
+const names = computed(() => weekdayNames(props.weekStart, props.locale));
+const title = computed(() => new Date(focus.value.y, focus.value.m, 1)
+  .toLocaleDateString(props.locale, { month: "long", year: "numeric" }));
+
+const shown = computed(() => (value.value
+  ? new Date(value.value.y, value.value.m, value.value.d).toLocaleDateString(props.locale, { day: "numeric", month: "short", year: "numeric" })
+  : ""));
+
+const same = (a: Ymd | null, b: Ymd): boolean => !!a && compareYmd(a, b) === 0;
+const outOfRange = (v: Ymd): boolean => (!!lo.value && compareYmd(v, lo.value) < 0) || (!!hi.value && compareYmd(v, hi.value) > 0);
+const clamp = (v: Ymd): Ymd => (lo.value && compareYmd(v, lo.value) < 0 ? lo.value : hi.value && compareYmd(v, hi.value) > 0 ? hi.value : v);
+const long = (v: Ymd): string => new Date(v.y, v.m, v.d).toLocaleDateString(props.locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" });
+
+function focusDay(): void {
+  void nextTick(() => gridEl.value?.querySelector<HTMLElement>('[tabindex="0"]')?.focus());
+}
+
+watch(open, (v) => {
+  if (!v) return;
+  focus.value = clamp(value.value ?? today);
+  focusDay();
+});
+
+function pick(v: Ymd): void {
+  if (outOfRange(v)) return;
+  emit("update:modelValue", toYmd(v));
+  open.value = false;
+}
+
+function move(v: Ymd): void {
+  focus.value = clamp(v);
+  focusDay();
+}
+
+function shiftMonth(n: number): void {
+  move(addMonths(focus.value, n));
+}
+
+function onGridKey(ev: KeyboardEvent): void {
+  const f = focus.value;
+  const dow = (new Date(f.y, f.m, f.d).getDay() - props.weekStart + 7) % 7;
+  const to: Record<string, () => Ymd> = {
+    ArrowLeft: () => addDays(f, -1),
+    ArrowRight: () => addDays(f, 1),
+    ArrowUp: () => addDays(f, -7),
+    ArrowDown: () => addDays(f, 7),
+    Home: () => addDays(f, -dow),
+    End: () => addDays(f, 6 - dow),
+    PageUp: () => addMonths(f, ev.shiftKey ? -12 : -1),
+    PageDown: () => addMonths(f, ev.shiftKey ? 12 : 1),
+  };
+  if (to[ev.key]) {
+    ev.preventDefault();
+    move(to[ev.key]());
+  } else if (ev.key === "Enter" || ev.key === " ") {
+    ev.preventDefault();
+    pick(f);
+  }
+}
+
+function clear(): void {
+  emit("update:modelValue", null);
+}
+</script>
+
+<!-- Popover's autofocus prop is off: focus goes to the picked day, not the first button. -->
+<!-- eslint-disable vuejs-accessibility/no-autofocus -->
+<template>
+  <span class="wp-date" :data-size="size">
+    <Popover v-model:open="open" :autofocus="false" :label="ariaLabel">
+      <template #trigger="{ props: tp }">
+        <button
+          type="button"
+          class="wp-date__field"
+          :data-invalid="invalid || undefined"
+          :disabled="disabled"
+          :aria-label="shown ? `${ariaLabel}: ${shown}` : ariaLabel"
+          v-bind="tp"
+        >
+          <i class="pi pi-calendar wp-date__icon" aria-hidden="true" />
+          <span :class="shown ? 'wp-date__text' : 'wp-date__placeholder'">{{ shown || placeholder }}</span>
+        </button>
+      </template>
+      <div class="wp-date__panel">
+        <div class="wp-date__head">
+          <button type="button" class="wp-date__nav" aria-label="Previous month" @click="shiftMonth(-1)">
+            <i class="pi pi-chevron-left" aria-hidden="true" />
+          </button>
+          <span :id="titleId" class="wp-date__title" aria-live="polite">{{ title }}</span>
+          <button type="button" class="wp-date__nav" aria-label="Next month" @click="shiftMonth(1)">
+            <i class="pi pi-chevron-right" aria-hidden="true" />
+          </button>
+        </div>
+        <!-- The grid is reached through its days (roving tabindex); it only listens for their keys. -->
+        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions, vuejs-accessibility/interactive-supports-focus -->
+        <table :id="gridId" ref="gridEl" class="wp-date__grid" role="grid" :aria-labelledby="titleId" @keydown="onGridKey">
+          <thead>
+            <tr>
+              <th v-for="n in names" :key="n.long" scope="col" :abbr="n.long">{{ n.short }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(week, w) in weeks" :key="w">
+              <td
+                v-for="d in week"
+                :key="toYmd(d)"
+                class="wp-date__day"
+                :tabindex="same(focus, d) ? 0 : -1"
+                :aria-selected="same(value, d)"
+                :aria-disabled="outOfRange(d) || undefined"
+                :aria-label="long(d)"
+                :aria-current="same(today, d) ? 'date' : undefined"
+                :data-other="d.m !== focus.m || undefined"
+                :data-today="same(today, d) || undefined"
+                @click="pick(d)"
+              >{{ d.d }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="wp-date__foot">
+          <button type="button" class="wp-date__link" :disabled="outOfRange(today)" @click="pick(today)">Today</button>
+          <button v-if="clearable && modelValue" type="button" class="wp-date__link" @click="clear(); open = false">Clear</button>
+        </div>
+      </div>
+    </Popover>
+  </span>
+</template>
+
+<style scoped>
+.wp-date { display: inline-flex; --_h: var(--wp-control-h-md); }
+.wp-date[data-size="sm"] { --_h: var(--wp-control-h-sm); }
+.wp-date[data-size="lg"] { --_h: var(--wp-control-h-lg); }
+.wp-date__field {
+  display: inline-flex; align-items: center; gap: var(--wp-space-2); box-sizing: border-box;
+  min-width: 150px; height: var(--_h); padding: 0 var(--wp-space-3);
+  border: 1px solid var(--wp-border); border-radius: var(--wp-radius);
+  background: var(--wp-bg-1); color: var(--wp-text); cursor: pointer;
+  font: 400 var(--wp-text-sm)/1 var(--wp-font-sans); text-align: left;
+  transition: border-color var(--wp-motion-hover), box-shadow var(--wp-motion-hover);
+}
+.wp-date[data-size="sm"] .wp-date__field { min-width: 120px; padding: 0 var(--wp-space-2); border-radius: var(--wp-radius-sm); font-size: var(--wp-text-xs); }
+.wp-date__field:hover:not(:disabled) { border-color: var(--wp-border-strong); }
+.wp-date__field:focus-visible { outline: none; border-color: var(--wp-border-focus); box-shadow: 0 0 0 3px var(--wp-focus-ring); }
+.wp-date__field[data-invalid] { border-color: var(--wp-error-border); }
+.wp-date__field:disabled { opacity: 0.45; cursor: not-allowed; }
+.wp-date__icon { color: var(--wp-text-muted); font-size: 12px; }
+.wp-date__placeholder { color: var(--wp-text-dim); }
+.wp-date__panel { display: flex; flex-direction: column; gap: var(--wp-space-2); }
+.wp-date__head { display: flex; align-items: center; justify-content: space-between; gap: var(--wp-space-2); }
+.wp-date__title { font-weight: 600; color: var(--wp-text); }
+.wp-date__nav, .wp-date__link {
+  display: inline-grid; place-items: center; height: var(--wp-control-h-sm); min-width: var(--wp-control-h-sm);
+  padding: 0 var(--wp-space-2); border: 0; border-radius: var(--wp-radius-sm);
+  background: transparent; color: var(--wp-text-muted); cursor: pointer; font: inherit;
+}
+.wp-date__nav .pi { font-size: 11px; }
+.wp-date__nav:hover, .wp-date__link:hover:not(:disabled) { background: var(--wp-row-hover); color: var(--wp-text); }
+.wp-date__nav:focus-visible, .wp-date__link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-date__link:disabled { opacity: 0.45; cursor: not-allowed; }
+.wp-date__grid { border-collapse: collapse; }
+.wp-date__grid th {
+  width: 32px; height: 24px; color: var(--wp-text-muted); font-size: var(--wp-text-xs); font-weight: 500;
+}
+.wp-date__day {
+  width: 32px; height: 30px; padding: 0; text-align: center; border-radius: var(--wp-radius-sm);
+  color: var(--wp-text); font-variant-numeric: tabular-nums; cursor: pointer;
+}
+.wp-date__day[data-other] { color: var(--wp-text-dim); }
+.wp-date__day[data-today] { box-shadow: inset 0 0 0 1px var(--wp-border-strong); }
+.wp-date__day:hover { background: var(--wp-row-hover); }
+.wp-date__day[aria-selected="true"] { background: var(--wp-accent); color: var(--wp-bg); }
+.wp-date__day[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; background: transparent; text-decoration: line-through; }
+.wp-date__day:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-date__foot { display: flex; justify-content: space-between; }
+@media (prefers-reduced-motion: reduce) {
+  .wp-date__field { transition: none; }
+}
+</style>

package/src/DescriptionList.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+/**
+ * Description list: label and value rows (an item's details, a step of the
+ * trace, model info). Labels line up in one column and values in the next;
+ * `stacked` puts each label above its value for a narrow panel. Works on the
+ * canvas and in the manager.
+ *
+ *   <DescriptionList :items="[{ label: 'Family', value: 'SDXL' }, { label: 'ID', value: id, mono: true, copy: true }]" />
+ *   <DescriptionList :items="rows"><template #value-status="{ item }"><Badge dot tone="success" text="Live" /></template></DescriptionList>
+ *
+ * A value that is empty draws a dim dash. A row with `key` can fill its value
+ * from the `value-<key>` slot.
+ */
+import CopyButton from "./CopyButton.vue";
+
+export interface DescriptionItem {
+  label: string;
+  value?: string | number | null | undefined;
+  /** Names the `value-<key>` slot for this row. */
+  key?: string | undefined;
+  /** Draw the value in the mono font (ids, seeds, paths). */
+  mono?: boolean | undefined;
+  /** Add a copy button after the value. */
+  copy?: boolean | undefined;
+}
+
+withDefaults(defineProps<{
+  items: DescriptionItem[];
+  layout?: "columns" | "stacked" | undefined;
+  size?: "sm" | "md" | undefined;
+  /** Lines between rows. */
+  divided?: boolean | undefined;
+}>(), { layout: "columns", size: "md" });
+
+const empty = (v: DescriptionItem["value"]): boolean => v === undefined || v === null || v === "";
+</script>
+
+<template>
+  <dl class="wp-dl" :data-layout="layout" :data-size="size" :data-divided="divided || undefined">
+    <div v-for="(it, i) in items" :key="it.key ?? `${i}-${it.label}`" class="wp-dl__row">
+      <dt class="wp-dl__label">{{ it.label }}</dt>
+      <dd class="wp-dl__value" :data-mono="it.mono || undefined">
+        <slot v-if="it.key && $slots[`value-${it.key}`]" :name="`value-${it.key}`" :item="it" />
+        <template v-else-if="empty(it.value)"><span class="wp-dl__empty" aria-label="None">—</span></template>
+        <template v-else>
+          <span class="wp-dl__text">{{ it.value }}</span>
+          <CopyButton v-if="it.copy" :text="String(it.value)" :label="`Copy ${it.label}`" size="sm" class="wp-dl__copy" />
+        </template>
+      </dd>
+    </div>
+  </dl>
+</template>
+
+<style scoped>
+.wp-dl {
+  display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--wp-space-6); row-gap: var(--wp-space-3);
+  margin: 0; min-width: 0; font: 400 var(--wp-text-sm)/1.45 var(--wp-font-sans);
+}
+.wp-dl[data-size="sm"] { column-gap: var(--wp-space-5); row-gap: var(--wp-space-2); font-size: var(--wp-text-xs); }
+.wp-dl__row { display: contents; }
+.wp-dl__label { margin: 0; color: var(--wp-text-muted); }
+.wp-dl__value { display: flex; align-items: center; gap: var(--wp-space-2); min-width: 0; margin: 0; color: var(--wp-text); }
+.wp-dl__text { min-width: 0; overflow-wrap: anywhere; }
+.wp-dl__value[data-mono] .wp-dl__text { font-family: var(--wp-font-mono); font-size: 0.95em; }
+.wp-dl__empty { color: var(--wp-text-dim); }
+.wp-dl__copy { margin: -4px 0; }
+.wp-dl[data-divided] { row-gap: 0; }
+.wp-dl[data-divided] .wp-dl__label, .wp-dl[data-divided] .wp-dl__value { padding: var(--wp-space-3) 0; border-top: 1px solid var(--wp-border-soft); }
+.wp-dl[data-divided] .wp-dl__row:first-child > * { border-top: 0; }
+.wp-dl[data-layout="stacked"] { grid-template-columns: minmax(0, 1fr); row-gap: var(--wp-space-4); }
+.wp-dl[data-layout="stacked"] .wp-dl__row { display: flex; flex-direction: column; gap: 2px; }
+.wp-dl[data-layout="stacked"] .wp-dl__label { font-size: var(--wp-text-xs); font-weight: 600; }
+</style>

package/src/DiffView.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+/**
+ * Diff view: what changed between two texts, word by word (an option, a
+ * template) or line by line (a pack, a log). Removed text is struck through
+ * on red, added text is on green, and each change also says "removed" /
+ * "added" to screen readers, so colour is never the only sign. Works on the
+ * canvas and in the manager.
+ *
+ *   <DiffView before="auburn hair, rim light" after="silver hair, rim light" />
+ *   <DiffView :before="oldJson" :after="newJson" by="lines" layout="split" />
+ *
+ * `layout="split"` shows Before and After side by side. Very long texts fall
+ * back to "all removed, all added" rather than freeze the page.
+ */
+import { computed } from "vue";
+import { diffText } from "./diff";
+
+const props = withDefaults(defineProps<{
+  before: string;
+  after: string;
+  by?: "words" | "lines" | undefined;
+  layout?: "inline" | "split" | undefined;
+  size?: "sm" | "md" | undefined;
+  /** Mono font, for code and JSON. */
+  mono?: boolean | undefined;
+}>(), { by: "words", layout: "inline", size: "md" });
+
+const parts = computed(() => diffText(props.before, props.after, props.by));
+const counts = computed(() => ({
+  add: parts.value.filter((p) => p.kind === "add").length,
+  del: parts.value.filter((p) => p.kind === "del").length,
+}));
+</script>
+
+<template>
+  <div class="wp-diff" :data-size="size" :data-layout="layout" :data-by="by" :data-mono="mono || by === 'lines' || undefined">
+    <p v-if="!counts.add && !counts.del" class="wp-diff__same">No changes</p>
+    <template v-else-if="layout === 'inline'">
+      <div class="wp-diff__text"><template v-for="(p, i) in parts" :key="i"><span v-if="p.kind === 'same'">{{ p.text }}</span><del v-else-if="p.kind === 'del'" class="wp-diff__del"><span class="wp-diff__sr">removed: </span>{{ p.text }}</del><ins v-else class="wp-diff__add"><span class="wp-diff__sr">added: </span>{{ p.text }}</ins></template></div>
+    </template>
+    <div v-else class="wp-diff__split">
+      <section class="wp-diff__side" aria-label="Before">
+        <span class="wp-diff__side-label" aria-hidden="true">Before</span>
+        <div class="wp-diff__text"><template v-for="(p, i) in parts" :key="i"><span v-if="p.kind === 'same'">{{ p.text }}</span><del v-else-if="p.kind === 'del'" class="wp-diff__del"><span class="wp-diff__sr">removed: </span>{{ p.text }}</del></template></div>
+      </section>
+      <section class="wp-diff__side" aria-label="After">
+        <span class="wp-diff__side-label" aria-hidden="true">After</span>
+        <div class="wp-diff__text"><template v-for="(p, i) in parts" :key="i"><span v-if="p.kind === 'same'">{{ p.text }}</span><ins v-else-if="p.kind === 'add'" class="wp-diff__add"><span class="wp-diff__sr">added: </span>{{ p.text }}</ins></template></div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wp-diff { min-width: 0; color: var(--wp-text); font: 400 var(--wp-text-sm)/1.6 var(--wp-font-sans); }
+.wp-diff[data-size="sm"] { font-size: var(--wp-text-xs); }
+.wp-diff[data-mono] { font-family: var(--wp-font-mono); }
+.wp-diff__text { white-space: pre-wrap; overflow-wrap: anywhere; }
+.wp-diff__del, .wp-diff__add { border-radius: min(3px, var(--wp-radius-cap, 999px)); padding: 0 1px; text-decoration-thickness: 1px; }
+.wp-diff__del { background: color-mix(in srgb, var(--wp-danger) 16%, transparent); color: var(--wp-danger-text); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--wp-danger) 70%, transparent); }
+.wp-diff__add { background: color-mix(in srgb, var(--wp-success) 18%, transparent); color: var(--wp-text); text-decoration: none; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--wp-success) 60%, transparent); }
+.wp-diff[data-by="lines"] .wp-diff__del, .wp-diff[data-by="lines"] .wp-diff__add { display: block; padding: 0 var(--wp-space-2); border-radius: 0; }
+.wp-diff__split { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--wp-space-4); }
+.wp-diff__side { min-width: 0; padding: var(--wp-space-3) var(--wp-space-4); border: 1px solid var(--wp-border); border-radius: var(--wp-radius); background: var(--wp-bg-1); }
+.wp-diff__side-label { display: block; margin-bottom: var(--wp-space-2); color: var(--wp-text-dim); font: 600 var(--wp-text-xs)/1 var(--wp-font-sans); letter-spacing: 0.06em; text-transform: uppercase; }
+.wp-diff__same { margin: 0; color: var(--wp-text-dim); font-style: italic; }
+.wp-diff__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+</style>