@dumiflex/wp-kit 0.3.0 → 0.5.0

package/src/DatePicker.vue

@@ -1,234 +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>
+<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: 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

@@ -1,73 +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>
+<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>