@dumiflex/wp-kit 0.0.0-stage → 0.4.0

package/src/ProgressBar.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/**
+ * Progress bar: how far along a job is. Give `value` (0 to `max`) for a bar that
+ * fills; leave it out (or `null`) when nobody knows yet, and the bar sweeps.
+ * Works on the canvas (`size="sm"`) and in the manager (`md`).
+ *
+ *   <ProgressBar :value="done" :max="total" label="Testing seeds" show-value />
+ *   <ProgressBar label="Loading the model" />
+ *
+ * It is an APG progressbar: `aria-valuenow` only while the value is known,
+ * so a screen reader says "busy" instead of a made-up number. The sweep
+ * stands still under reduced motion.
+ */
+import { computed } from "vue";
+
+const props = withDefaults(defineProps<{
+  /** How far along, 0 to `max`; `null` or left out = not known yet. */
+  value?: number | null | undefined;
+  max?: number | undefined;
+  tone?: "accent" | "success" | "warn" | "danger" | undefined;
+  size?: "sm" | "md" | undefined;
+  /** The job's name for screen readers, and the line above the bar with `show-value`. */
+  label?: string | undefined;
+  /** Show the label and the percentage above the bar. */
+  showValue?: boolean | undefined;
+}>(), { value: null, max: 100, tone: "accent", size: "md", label: undefined });
+
+const known = computed(() => typeof props.value === "number" && Number.isFinite(props.value));
+const pct = computed(() => {
+  if (!known.value || props.max <= 0) return 0;
+  return Math.min(100, Math.max(0, ((props.value as number) / props.max) * 100));
+});
+const pctText = computed(() => `${Math.round(pct.value)}%`);
+</script>
+
+<template>
+  <div class="wp-progress" :data-size="size" :data-tone="tone">
+    <div v-if="showValue && (label || known)" class="wp-progress__head" aria-hidden="true">
+      <span class="wp-progress__label">{{ label }}</span>
+      <span v-if="known" class="wp-progress__value">{{ pctText }}</span>
+    </div>
+    <div
+      class="wp-progress__track"
+      role="progressbar"
+      :aria-label="label"
+      aria-valuemin="0"
+      :aria-valuemax="known ? max : undefined"
+      :aria-valuenow="known ? value ?? undefined : undefined"
+      :aria-valuetext="known ? pctText : undefined"
+      :aria-busy="known ? undefined : 'true'"
+      :data-indeterminate="known ? undefined : 'true'"
+    >
+      <div class="wp-progress__fill" :style="known ? { width: `${pct}%` } : undefined" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wp-progress { --_tone: var(--wp-accent); display: flex; flex-direction: column; gap: var(--wp-space-2); min-width: 0; width: 100%; }
+.wp-progress[data-tone="success"] { --_tone: var(--wp-success); }
+.wp-progress[data-tone="warn"] { --_tone: var(--wp-warn); }
+.wp-progress[data-tone="danger"] { --_tone: var(--wp-danger); }
+.wp-progress__head {
+  display: flex; justify-content: space-between; gap: var(--wp-space-3);
+  color: var(--wp-text-muted); font: 500 var(--wp-text-xs)/1.3 var(--wp-font-sans);
+}
+.wp-progress__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wp-progress__value { flex: none; font-variant-numeric: tabular-nums; color: var(--wp-text); }
+.wp-progress__track {
+  position: relative; overflow: hidden; height: 6px;
+  border-radius: var(--wp-radius-cap, 999px); background: var(--wp-bg-3);
+}
+.wp-progress[data-size="sm"] .wp-progress__track { height: 4px; }
+.wp-progress__fill {
+  height: 100%; border-radius: inherit; background: var(--_tone);
+  transition: width var(--wp-motion-swap);
+}
+.wp-progress__track[data-indeterminate] .wp-progress__fill {
+  position: absolute; inset: 0 auto 0 0; width: 40%;
+  animation: wp-progress-sweep 1.4s var(--wp-motion-curve-collapse) infinite;
+}
+@keyframes wp-progress-sweep {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(250%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .wp-progress__fill { transition: none; }
+  .wp-progress__track[data-indeterminate] .wp-progress__fill { animation: none; width: 100%; opacity: 0.45; }
+}
+</style>

package/src/RadioGroup.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts" generic="T extends string">
+/**
+ * Radio group: one of a few options, each with room for a line saying what
+ * it does. Use it when the options need explaining; for two to five short
+ * words that fit on one row use the Segmented control. Works on the canvas
+ * (`size="sm"`) and in the manager (`md`).
+ *
+ *   <RadioGroup v-model="mode" :options="[{ value: 'tags', label: 'Tags', hint: 'Danbooru-style, comma separated' }]" aria-label="Prompt style" />
+ *
+ * APG radio group: one Tab stop (the chosen option), the arrow keys move and
+ * choose, disabled options are skipped. `orientation="horizontal"` lays the
+ * options out in a row. The `label` slot draws an option's label itself
+ * (a name plus a badge), and `test-prefix` gives each option a `data-test`.
+ *
+ *   <RadioGroup v-model="provider" :options="opts" test-prefix="provider">
+ *     <template #label="{ option }">{{ option.label }} <Badge text="Local" /></template>
+ *   </RadioGroup>
+ *
+ * `variant="swatch"` draws each option as a round colour swatch (its
+ * `color`), in a row, with the label as its name and tooltip: an accent or
+ * frame colour picked from a few.
+ */
+import { nextTick, ref } from "vue";
+
+export interface RadioOption<V extends string = string> {
+  value: V;
+  label: string;
+  hint?: string | undefined;
+  disabled?: boolean | undefined;
+  /** The swatch colour, for `variant="swatch"`. */
+  color?: string | undefined;
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: T | null;
+  options: RadioOption<T>[];
+  orientation?: "vertical" | "horizontal" | undefined;
+  size?: "sm" | "md" | undefined;
+  disabled?: boolean | undefined;
+  invalid?: boolean | undefined;
+  ariaLabel?: string | undefined;
+  /** Draw each option as a bordered card (for a few big choices). */
+  cards?: boolean | undefined;
+  /** `data-test` of each option is `<testPrefix>-<value>`. */
+  testPrefix?: string | undefined;
+  /** `swatch`: round colour swatches in a row, named by their label. */
+  variant?: "default" | "swatch" | undefined;
+}>(), { orientation: "vertical", size: "md", ariaLabel: undefined, testPrefix: undefined, variant: "default" });
+
+defineSlots<{ label?: (p: { option: RadioOption<T> }) => unknown }>();
+
+const emit = defineEmits<{ (e: "update:modelValue", v: T): void }>();
+const rootEl = ref<HTMLElement | null>(null);
+
+function pick(v: T): void {
+  if (!props.disabled && v !== props.modelValue) emit("update:modelValue", v);
+}
+
+function tabStop(): T | undefined {
+  const live = props.options.filter((o) => !o.disabled);
+  return (live.find((o) => o.value === props.modelValue) ?? live[0])?.value;
+}
+
+function onKeydown(ev: KeyboardEvent, at: T): void {
+  if (props.disabled) return;
+  const live = props.options.filter((o) => !o.disabled);
+  const i = live.findIndex((o) => o.value === at);
+  let next: number;
+  switch (ev.key) {
+    case "ArrowDown": case "ArrowRight": next = (i + 1) % live.length; break;
+    case "ArrowUp": case "ArrowLeft": next = (i - 1 + live.length) % live.length; break;
+    case " ": ev.preventDefault(); pick(at); return;
+    default: return;
+  }
+  ev.preventDefault();
+  const v = live[next].value;
+  pick(v);
+  void nextTick(() => {
+    rootEl.value?.querySelectorAll<HTMLElement>("[role=radio]")[props.options.findIndex((o) => o.value === v)]?.focus();
+  });
+}
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    class="wp-radio-group"
+    role="radiogroup"
+    :aria-label="ariaLabel"
+    :aria-disabled="disabled || undefined"
+    :aria-invalid="invalid || undefined"
+    :data-orientation="orientation"
+    :data-size="size"
+    :data-cards="cards || undefined"
+    :data-variant="variant"
+  >
+    <!-- Each radio has a tabindex (roving: only the checked one is a Tab stop). -->
+    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
+    <div
+      v-for="o in options"
+      :key="o.value"
+      class="wp-radio-group__opt"
+      role="radio"
+      :aria-checked="modelValue === o.value"
+      :aria-disabled="disabled || o.disabled || undefined"
+      :tabindex="!disabled && o.value === tabStop() ? 0 : -1"
+      :data-checked="modelValue === o.value || undefined"
+      :data-test="testPrefix ? `${testPrefix}-${o.value}` : undefined"
+      :aria-label="variant === 'swatch' ? o.label : undefined"
+      :title="variant === 'swatch' ? o.label : undefined"
+      @click="!o.disabled && pick(o.value)"
+      @keydown="onKeydown($event, o.value)"
+    >
+      <span
+        v-if="variant === 'swatch'"
+        class="wp-radio-group__swatch"
+        :style="{ background: o.color }"
+        aria-hidden="true"
+      />
+      <span v-else class="wp-radio-group__dot" aria-hidden="true" />
+      <span v-if="variant !== 'swatch'" class="wp-radio-group__text">
+        <span class="wp-radio-group__label"><slot name="label" :option="o">{{ o.label }}</slot></span>
+        <span v-if="o.hint" class="wp-radio-group__hint">{{ o.hint }}</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wp-radio-group { display: flex; flex-direction: column; gap: var(--wp-space-3); min-width: 0; font-family: var(--wp-font-sans); }
+.wp-radio-group[data-orientation="horizontal"] { flex-direction: row; flex-wrap: wrap; gap: var(--wp-space-5); }
+.wp-radio-group[data-size="sm"] { gap: var(--wp-space-2); }
+.wp-radio-group__opt {
+  display: flex; align-items: flex-start; gap: var(--wp-space-3); min-width: 0;
+  padding: 2px; border-radius: var(--wp-radius-sm); color: var(--wp-text); cursor: pointer; outline: none;
+}
+.wp-radio-group[data-cards] .wp-radio-group__opt {
+  flex: 1 1 0; padding: var(--wp-space-4); border: 1px solid var(--wp-border); border-radius: var(--wp-radius); background: var(--wp-bg-1);
+  transition: border-color var(--wp-motion-hover), background var(--wp-motion-hover);
+}
+.wp-radio-group[data-cards] .wp-radio-group__opt[data-checked] { border-color: var(--wp-accent); background: color-mix(in srgb, var(--wp-accent) 8%, var(--wp-bg-1)); }
+.wp-radio-group__opt:focus-visible { box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-radio-group__opt[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
+.wp-radio-group__dot {
+  position: relative; flex: none; box-sizing: border-box; width: 16px; height: 16px; margin-top: 1px;
+  border: 1.5px solid var(--wp-border-strong); border-radius: 50%; /* round: a radio is round in every look */ background: var(--wp-bg-1);
+  transition: border-color var(--wp-motion-hover);
+}
+.wp-radio-group[data-size="sm"] .wp-radio-group__dot { width: 13px; height: 13px; }
+.wp-radio-group__opt:hover:not([aria-disabled="true"]) .wp-radio-group__dot { border-color: var(--wp-accent); }
+.wp-radio-group__opt[data-checked] .wp-radio-group__dot { border-color: var(--wp-accent); }
+.wp-radio-group__opt[data-checked] .wp-radio-group__dot::after {
+  content: ""; position: absolute; inset: 3px; border-radius: 50%; /* round: radio dot */ background: var(--wp-accent);
+}
+.wp-radio-group[data-size="sm"] .wp-radio-group__opt[data-checked] .wp-radio-group__dot::after { inset: 2.5px; }
+/* A picked option that is disabled turns grey, so it can't pass for a live one. */
+.wp-radio-group__opt[aria-disabled="true"][data-checked] .wp-radio-group__dot { border-color: var(--wp-text-dim); }
+.wp-radio-group__opt[aria-disabled="true"][data-checked] .wp-radio-group__dot::after { background: var(--wp-text-dim); }
+.wp-radio-group[aria-invalid="true"] .wp-radio-group__dot { border-color: var(--wp-error-border); }
+.wp-radio-group__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+.wp-radio-group__label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--wp-space-3); font-size: var(--wp-text-sm); line-height: 18px; }
+.wp-radio-group[data-size="sm"] .wp-radio-group__label { font-size: var(--wp-text-xs); line-height: 15px; }
+.wp-radio-group__hint { color: var(--wp-text-muted); font-size: var(--wp-text-xs); line-height: 1.4; }
+.wp-radio-group[data-variant="swatch"] { flex-direction: row; flex-wrap: wrap; gap: var(--wp-space-3); }
+.wp-radio-group[data-variant="swatch"] .wp-radio-group__opt { padding: 2px; border-radius: min(50%, var(--wp-radius-cap, 999px)); }
+.wp-radio-group__swatch {
+  display: block; width: 20px; height: 20px; border-radius: min(50%, var(--wp-radius-cap, 999px));
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wp-text) 18%, transparent);
+}
+.wp-radio-group[data-size="sm"] .wp-radio-group__swatch { width: 16px; height: 16px; }
+.wp-radio-group[data-variant="swatch"] .wp-radio-group__opt[data-checked] { box-shadow: 0 0 0 2px var(--wp-accent); }
+.wp-radio-group[data-variant="swatch"] .wp-radio-group__opt:focus-visible { box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-radio-group[data-variant="swatch"] .wp-radio-group__opt[data-checked]:focus-visible { box-shadow: 0 0 0 2px var(--wp-accent), 0 0 0 4px var(--wp-border-focus); }
+@media (prefers-reduced-motion: reduce) {
+  .wp-radio-group__dot, .wp-radio-group[data-cards] .wp-radio-group__opt { transition: none; }
+}
+</style>

package/src/RangeSlider.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+/**
+ * Range slider: a low and a high number on one track (a weight range, a
+ * token budget, a sweep's from–to). Two thumbs that can't cross, kept at
+ * least `min-gap` apart; `with-input` adds a WpNumber for each end. Works on
+ * the canvas (`size="sm"`) and in the manager (`md`).
+ *
+ *   <RangeSlider v-model="range" :min="0" :max="2" :step="0.1" aria-label="Weight" with-input />
+ *
+ * Each thumb is an APG slider ("Weight, low end" / "high end") whose
+ * min and max are the other thumb, so screen readers hear the real limits.
+ * A click on the track moves the nearer thumb.
+ */
+import { computed, ref } from "vue";
+import { keyStep, percentOf, snap, valueAt } from "./slider-math";
+import WpNumber from "./WpNumber.vue";
+
+const props = withDefaults(defineProps<{
+  modelValue: [number, number];
+  min?: number | undefined;
+  max?: number | undefined;
+  step?: number | undefined;
+  /** The smallest distance between the two ends. */
+  minGap?: number | undefined;
+  size?: "sm" | "md" | "lg" | undefined;
+  disabled?: boolean | undefined;
+  ariaLabel?: string | undefined;
+  format?: ((v: number) => string) | undefined;
+  withInput?: boolean | undefined;
+}>(), { min: 0, max: 100, step: 1, minGap: 0, size: "md", ariaLabel: "Range" });
+
+const emit = defineEmits<{ (e: "update:modelValue", v: [number, number]): void; (e: "change", v: [number, number]): void }>();
+
+const trackEl = ref<HTMLElement | null>(null);
+const active = ref<0 | 1 | null>(null);
+
+const lo = computed(() => snap(Math.min(props.modelValue[0], props.modelValue[1]), props.min, props.max, props.step));
+const hi = computed(() => snap(Math.max(props.modelValue[0], props.modelValue[1]), props.min, props.max, props.step));
+const loPct = computed(() => percentOf(lo.value, props.min, props.max));
+const hiPct = computed(() => percentOf(hi.value, props.min, props.max));
+const text = (v: number): string => (props.format ? props.format(v) : String(v));
+
+/** Put one end at `v`, kept inside the other end minus the gap. */
+function setEnd(end: 0 | 1, v: number): [number, number] {
+  const next: [number, number] = end === 0
+    ? [Math.min(v, snap(hi.value - props.minGap, props.min, props.max, props.step)), hi.value]
+    : [lo.value, Math.max(v, snap(lo.value + props.minGap, props.min, props.max, props.step))];
+  if (next[0] !== props.modelValue[0] || next[1] !== props.modelValue[1]) emit("update:modelValue", next);
+  return next;
+}
+
+function fromPointer(ev: PointerEvent): number {
+  const r = trackEl.value?.getBoundingClientRect();
+  return r ? valueAt(ev.clientX, r.left, r.width, props.min, props.max, props.step) : lo.value;
+}
+
+function onPointerDown(ev: PointerEvent): void {
+  if (props.disabled || ev.button !== 0) return;
+  ev.preventDefault();
+  const v = fromPointer(ev);
+  active.value = Math.abs(v - lo.value) <= Math.abs(v - hi.value) && !(v > hi.value) ? 0 : 1;
+  (ev.currentTarget as HTMLElement).setPointerCapture?.(ev.pointerId);
+  setEnd(active.value, v);
+  trackEl.value?.querySelectorAll<HTMLElement>("[role=slider]")[active.value]?.focus();
+}
+
+function onPointerMove(ev: PointerEvent): void {
+  if (active.value !== null) setEnd(active.value, fromPointer(ev));
+}
+
+function onPointerUp(ev: PointerEvent): void {
+  if (active.value === null) return;
+  active.value = null;
+  (ev.currentTarget as HTMLElement).releasePointerCapture?.(ev.pointerId);
+  emit("change", [lo.value, hi.value]);
+}
+
+function onKeydown(ev: KeyboardEvent, end: 0 | 1): void {
+  if (props.disabled) return;
+  const lowLimit = end === 0 ? props.min : lo.value + props.minGap;
+  const highLimit = end === 0 ? hi.value - props.minGap : props.max;
+  const cur = end === 0 ? lo.value : hi.value;
+  const next = keyStep(ev.key, cur, props.min, props.max, props.step);
+  if (next === null) return;
+  ev.preventDefault();
+  const v = ev.key === "Home" ? lowLimit : ev.key === "End" ? highLimit : next;
+  emit("change", setEnd(end, v));
+}
+
+function onTyped(end: 0 | 1, v: number | null): void {
+  if (v === null) return;
+  emit("change", setEnd(end, snap(v, props.min, props.max, props.step)));
+}
+</script>
+
+<template>
+  <div class="wp-range-slider" :data-size="size" :data-disabled="disabled || undefined">
+    <WpNumber
+      v-if="withInput"
+      class="wp-range-slider__input"
+      :model-value="lo"
+      :min="min"
+      :max="hi - props.minGap"
+      :step="step"
+      :size="size"
+      :disabled="disabled"
+      :aria-label="`${ariaLabel}, low end`"
+      @update:model-value="onTyped(0, $event)"
+    />
+    <div
+      ref="trackEl"
+      class="wp-range-slider__track"
+      @pointerdown="onPointerDown"
+      @pointermove="onPointerMove"
+      @pointerup="onPointerUp"
+      @pointercancel="onPointerUp"
+    >
+      <div class="wp-range-slider__rail" />
+      <div class="wp-range-slider__fill" :style="{ left: `${loPct}%`, width: `${hiPct - loPct}%` }" />
+      <!-- Focusable unless disabled (tabindex is bound). -->
+      <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
+      <div
+        v-for="end in ([0, 1] as const)"
+        :key="end"
+        class="wp-range-slider__thumb"
+        role="slider"
+        :tabindex="disabled ? -1 : 0"
+        :aria-label="`${ariaLabel}, ${end === 0 ? 'low' : 'high'} end`"
+        :aria-valuemin="end === 0 ? min : lo + props.minGap"
+        :aria-valuemax="end === 0 ? hi - props.minGap : max"
+        :aria-valuenow="end === 0 ? lo : hi"
+        :aria-valuetext="format ? text(end === 0 ? lo : hi) : undefined"
+        :aria-disabled="disabled || undefined"
+        :data-active="active === end || undefined"
+        :style="{ left: `${end === 0 ? loPct : hiPct}%` }"
+        @keydown="onKeydown($event, end)"
+      />
+    </div>
+    <WpNumber
+      v-if="withInput"
+      class="wp-range-slider__input"
+      :model-value="hi"
+      :min="lo + props.minGap"
+      :max="max"
+      :step="step"
+      :size="size"
+      :disabled="disabled"
+      :aria-label="`${ariaLabel}, high end`"
+      @update:model-value="onTyped(1, $event)"
+    />
+    <span v-else class="wp-range-slider__value" aria-hidden="true">{{ text(lo) }} – {{ text(hi) }}</span>
+  </div>
+</template>
+
+<style scoped>
+.wp-range-slider {
+  --_h: var(--wp-control-h-md); --_thumb: 16px;
+  display: flex; align-items: center; gap: var(--wp-space-4); min-width: 0; width: 100%; min-height: var(--_h);
+  font-family: var(--wp-font-sans);
+}
+.wp-range-slider[data-size="sm"] { --_h: var(--wp-control-h-sm); --_thumb: 12px; gap: var(--wp-space-3); }
+.wp-range-slider[data-size="lg"] { --_h: var(--wp-control-h-lg); --_thumb: 18px; }
+.wp-range-slider__track { position: relative; flex: 1; min-width: 80px; height: var(--_h); margin: 0 calc(var(--_thumb) / 2); cursor: pointer; touch-action: none; }
+.wp-range-slider__rail, .wp-range-slider__fill { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: var(--wp-radius-cap, 999px); }
+.wp-range-slider__rail { left: calc(var(--_thumb) / -2); right: calc(var(--_thumb) / -2); background: var(--wp-bg-3); box-shadow: inset 0 0 0 1px var(--wp-border-soft); }
+.wp-range-slider__fill { background: var(--wp-accent); }
+.wp-range-slider[data-size="sm"] .wp-range-slider__rail, .wp-range-slider[data-size="sm"] .wp-range-slider__fill { height: 3px; margin-top: -1.5px; }
+.wp-range-slider__thumb {
+  position: absolute; top: 50%; box-sizing: border-box; width: var(--_thumb); height: var(--_thumb);
+  margin: calc(var(--_thumb) / -2) 0 0 calc(var(--_thumb) / -2);
+  border: 2px solid var(--wp-accent); border-radius: min(50%, var(--wp-radius-cap, 999px)); background: var(--wp-bg); box-shadow: var(--wp-shadow-sm); outline: none;
+  transition: transform var(--wp-motion-quick), box-shadow var(--wp-motion-quick);
+}
+.wp-range-slider__thumb[data-active], .wp-range-slider__thumb:hover { transform: scale(1.12); }
+.wp-range-slider__thumb:focus-visible { box-shadow: var(--wp-focus-ring); z-index: 1; }
+.wp-range-slider__value { flex: none; color: var(--wp-text); font: 500 var(--wp-text-sm)/1 var(--wp-font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.wp-range-slider[data-size="sm"] .wp-range-slider__value { font-size: var(--wp-text-xs); }
+.wp-range-slider__input { flex: none; width: 76px; }
+.wp-range-slider[data-size="sm"] .wp-range-slider__input { width: 60px; }
+.wp-range-slider[data-disabled] { opacity: 0.45; }
+.wp-range-slider[data-disabled] .wp-range-slider__track { cursor: not-allowed; }
+@media (prefers-reduced-motion: reduce) { .wp-range-slider__thumb { transition: none; } }
+</style>

package/src/RelativeDate.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{ value: string | null | undefined }>();
+
+const display = computed(() => {
+  if (!props.value) return "—";
+  const ts = Date.parse(props.value);
+  if (Number.isNaN(ts)) return "—";
+  const diff = Date.now() - ts;
+  const sec = Math.floor(diff / 1000);
+  if (sec < 60) return "just now";
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}m ago`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr}h ago`;
+  const day = Math.floor(hr / 24);
+  if (day < 7) return `${day}d ago`;
+  if (day < 30) return `${Math.floor(day / 7)}w ago`;
+  if (day < 365) return `${Math.floor(day / 30)}mo ago`;
+  return `${Math.floor(day / 365)}y ago`;
+});
+</script>
+
+<template>
+  <span class="wp-reldate" :title="value || ''">{{ display }}</span>
+</template>
+
+<style scoped>
+.wp-reldate {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: var(--wp-text2);
+}
+</style>

package/src/ResizeHandle.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+/**
+ * Resize handle: the grip on a panel's edge that drags it wider or taller
+ * (a drawer's width, a column, a box's height). It owns the size in pixels
+ * through v-model; the parent puts that size on the panel. Works on the
+ * canvas and in the manager. Two panels side by side use SplitPane, which
+ * is built on this.
+ *
+ *   <aside :style="{ width: `${w}px` }">…<ResizeHandle v-model="w" axis="x" reverse :min="280" :max="720" label="Chat width" /></aside>
+ *
+ * APG window splitter: `role="separator"` that takes focus; the arrows move
+ * it 16 px (Shift: 64), Home / End jump to min / max, Enter or a double
+ * click puts back `default-size`. `reverse` is for a handle on a panel's
+ * left or top edge, where dragging toward the start makes it bigger.
+ */
+import { computed, ref } from "vue";
+
+const props = withDefaults(defineProps<{
+  /** The panel's size in px. */
+  modelValue: number;
+  /** x: the handle changes width (an upright bar). y: height (a flat bar). */
+  axis?: "x" | "y" | undefined;
+  min?: number | undefined;
+  max?: number | undefined;
+  /** Dragging toward the start (left / up) makes the panel bigger. */
+  reverse?: boolean | undefined;
+  /** Where Enter and a double click put it back. */
+  defaultSize?: number | undefined;
+  /** Keyboard step in px. */
+  step?: number | undefined;
+  /** What it resizes, for screen readers ("Chat width"). */
+  label: string;
+  /** The id of the panel it resizes. */
+  controls?: string | undefined;
+  disabled?: boolean | undefined;
+}>(), { axis: "x", min: 0, max: Number.POSITIVE_INFINITY, defaultSize: undefined, step: 16, controls: undefined });
+
+const emit = defineEmits<{ (e: "update:modelValue", v: number): void; (e: "end", v: number): void }>();
+
+const dragging = ref(false);
+let start = 0;
+let startSize = 0;
+
+const clamp = (v: number): number => Math.round(Math.min(props.max, Math.max(props.min, v)));
+const finiteMax = computed(() => (Number.isFinite(props.max) ? props.max : undefined));
+
+function set(v: number): void {
+  const next = clamp(v);
+  if (next !== props.modelValue) emit("update:modelValue", next);
+}
+
+function onPointerDown(ev: PointerEvent): void {
+  if (props.disabled || ev.button !== 0) return;
+  ev.preventDefault();
+  dragging.value = true;
+  start = props.axis === "x" ? ev.clientX : ev.clientY;
+  startSize = props.modelValue;
+  (ev.currentTarget as HTMLElement).setPointerCapture?.(ev.pointerId);
+}
+
+function onPointerMove(ev: PointerEvent): void {
+  if (!dragging.value) return;
+  const d = (props.axis === "x" ? ev.clientX : ev.clientY) - start;
+  set(startSize + (props.reverse ? -d : d));
+}
+
+function onPointerUp(ev: PointerEvent): void {
+  if (!dragging.value) return;
+  dragging.value = false;
+  (ev.currentTarget as HTMLElement).releasePointerCapture?.(ev.pointerId);
+  emit("end", props.modelValue);
+}
+
+function reset(): void {
+  if (props.defaultSize === undefined || props.disabled) return;
+  set(props.defaultSize);
+  emit("end", clamp(props.defaultSize));
+}
+
+function onKeydown(ev: KeyboardEvent): void {
+  if (props.disabled) return;
+  const s = ev.shiftKey ? props.step * 4 : props.step;
+  const grow = props.reverse ? -1 : 1;
+  const fwd = props.axis === "x" ? "ArrowRight" : "ArrowDown";
+  const back = props.axis === "x" ? "ArrowLeft" : "ArrowUp";
+  let next: number;
+  if (ev.key === fwd) next = props.modelValue + s * grow;
+  else if (ev.key === back) next = props.modelValue - s * grow;
+  else if (ev.key === "Home") next = props.min;
+  else if (ev.key === "End" && finiteMax.value !== undefined) next = finiteMax.value;
+  else if (ev.key === "Enter") { ev.preventDefault(); reset(); return; }
+  else return;
+  ev.preventDefault();
+  set(next);
+  emit("end", clamp(next));
+}
+</script>
+
+<!-- APG window splitter: a focusable separator is interactive. -->
+<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
+<template>
+  <div
+    class="wp-resize"
+    role="separator"
+    :tabindex="disabled ? -1 : 0"
+    :aria-label="label"
+    :aria-orientation="axis === 'x' ? 'vertical' : 'horizontal'"
+    :aria-valuenow="modelValue"
+    :aria-valuemin="min"
+    :aria-valuemax="finiteMax"
+    :aria-controls="controls"
+    :aria-disabled="disabled || undefined"
+    :data-axis="axis"
+    :data-dragging="dragging || undefined"
+    @pointerdown="onPointerDown"
+    @pointermove="onPointerMove"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerUp"
+    @dblclick="reset"
+    @keydown="onKeydown"
+  />
+</template>
+
+<style scoped>
+.wp-resize {
+  position: relative; flex: none; z-index: 1; outline: none; touch-action: none;
+}
+.wp-resize[data-axis="x"] { width: 8px; margin: 0 -4px; cursor: col-resize; align-self: stretch; }
+.wp-resize[data-axis="y"] { height: 8px; margin: -4px 0; cursor: row-resize; width: 100%; }
+.wp-resize::after {
+  content: ""; position: absolute; border-radius: min(1px, var(--wp-radius-cap, 999px)); background: transparent;
+  transition: background var(--wp-motion-hover);
+}
+.wp-resize[data-axis="x"]::after { top: 0; bottom: 0; left: 3px; width: 2px; }
+.wp-resize[data-axis="y"]::after { left: 0; right: 0; top: 3px; height: 2px; }
+.wp-resize:hover::after, .wp-resize[data-dragging]::after { background: var(--wp-accent); }
+.wp-resize:focus-visible::after { background: var(--wp-border-focus); box-shadow: 0 0 0 1px var(--wp-border-focus); }
+.wp-resize[aria-disabled="true"] { cursor: default; }
+.wp-resize[aria-disabled="true"]::after { background: transparent; }
+@media (prefers-reduced-motion: reduce) {
+  .wp-resize::after { transition: none; }
+}
+</style>