@dumiflex/wp-kit 0.0.0-stage → 0.3.0

package/src/PostCard.vue

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+/**
+ * A community post as a card: type chip, NSFW / Featured / recommended
+ * badges, version, `owner/name` slug, bundle contents, description, up to
+ * four tags, then stars, downloads and when it was updated. A coloured stripe
+ * on top says the type; a featured card is tinted, a deleted one faded.
+ *
+ * The whole card is one link. It renders an `<a>` by default; pass the app's
+ * router link as `as` (and its `to`) so the kit never imports a router:
+ *
+ *   <PostCard :as="RouterLink" :to="`/p/${post.slug}`" :post="card(post)" />
+ *   <PostCard href="/p/dumi/warm" :post="…" />
+ *   <PostCard as="button" type="button" :post="…" @click="open" />
+ */
+import { computed, type Component } from "vue";
+import BundleMeta from "./BundleMeta.vue";
+import Icon from "./Icon.vue";
+import KindChip, { type KindChipSubtype } from "./KindChip.vue";
+import RatingBadge from "./RatingBadge.vue";
+import RelativeDate from "./RelativeDate.vue";
+
+export interface PostCardData {
+  /** `owner/name`. */
+  slug: string;
+  kind: "module" | "bundle";
+  subtype?: KindChipSubtype | "bundle" | null | undefined;
+  description?: string | undefined;
+  tags?: string[] | undefined;
+  stars: number;
+  downloads: number;
+  /** ISO time of the last update. */
+  updatedAt: string;
+  rating?: "sfw" | "nsfw" | undefined;
+  featured?: boolean | undefined;
+  /** The latest version is marked recommended. */
+  recommended?: boolean | undefined;
+  /** Soft-deleted: the card fades and shows "deleted" where the version goes. */
+  deleted?: boolean | undefined;
+  version?: number | null | undefined;
+  bundleModules?: { count: number; names: string[] } | null | undefined;
+}
+
+const props = withDefaults(defineProps<{
+  post: PostCardData;
+  /** The viewer starred it: the star in the footer fills. */
+  starred?: boolean | undefined;
+  /** Element or component for the link, e.g. the app's RouterLink. */
+  as?: string | Component | undefined;
+}>(), { starred: false, as: "a" });
+
+const type = computed(() => (props.post.kind === "bundle" ? "bundle" : (props.post.subtype ?? "fixed_values")));
+const owner = computed(() => props.post.slug.split("/")[0]);
+const name = computed(() => props.post.slug.split("/").slice(1).join("/"));
+const tags = computed(() => props.post.tags ?? []);
+</script>
+
+<template>
+  <component
+    :is="as"
+    class="wp-post-card"
+    :data-type="type"
+    :data-featured="post.featured || undefined"
+    :data-deleted="post.deleted || undefined"
+  >
+    <div class="wp-post-card__top">
+      <div class="wp-post-card__badges">
+        <KindChip :kind="post.kind" :subtype="post.subtype" />
+        <RatingBadge :rating="post.rating" :featured="post.featured" />
+        <span v-if="post.recommended" class="wp-chip wp-chip--success">
+          <span class="wp-chip__dot" />recommended
+        </span>
+      </div>
+      <span v-if="post.deleted" class="wp-chip wp-chip--danger"><Icon name="trash" :size="10" />deleted</span>
+      <span v-else class="wp-chip">v{{ post.version ?? 1 }}</span>
+    </div>
+
+    <div class="wp-post-card__slug">
+      <span class="wp-post-card__owner">{{ owner }}</span><span class="wp-post-card__sep">/</span>{{ name }}
+    </div>
+
+    <BundleMeta
+      v-if="post.kind === 'bundle' && post.bundleModules"
+      :count="post.bundleModules.count"
+      :names="post.bundleModules.names"
+    />
+
+    <p v-if="post.description" class="wp-post-card__desc">{{ post.description }}</p>
+
+    <div v-if="tags.length" class="wp-post-card__tags">
+      <span v-for="t in tags.slice(0, 4)" :key="t" class="wp-chip">{{ t }}</span>
+      <span v-if="tags.length > 4" class="wp-chip">+{{ tags.length - 4 }}</span>
+    </div>
+
+    <div class="wp-post-card__foot">
+      <span class="wp-post-card__stat" :data-active="starred || undefined">
+        <Icon :name="starred ? 'star-fill' : 'star'" :size="11" />{{ post.stars.toLocaleString() }}
+      </span>
+      <span class="wp-post-card__stat">
+        <Icon name="download" :size="11" />{{ post.downloads.toLocaleString() }}
+      </span>
+      <RelativeDate class="wp-post-card__when" :value="post.updatedAt" />
+    </div>
+  </component>
+</template>
+
+<style scoped>
+.wp-post-card {
+  --post-card-c: var(--wp-text-dim);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  width: 100%;
+  padding: 20px 20px 18px;
+  overflow: hidden;
+  break-inside: avoid;
+  /* The page spaces its cards (a grid gap or margins); one set here would
+     beat the page's rule, since scoped styles win ties. */
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  background: var(--wp-bg-1);
+  border: 1px solid var(--wp-border);
+  border-radius: min(12px, var(--wp-radius-cap, 999px));
+  transition: transform var(--wp-motion-quick) ease, border-color var(--wp-motion-quick) ease, box-shadow var(--wp-motion-quick) ease;
+}
+.wp-post-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto;
+  height: 3px;
+  opacity: 0.85;
+  background: linear-gradient(90deg, var(--post-card-c), color-mix(in oklab, var(--post-card-c) 50%, transparent));
+}
+.wp-post-card[data-type="fixed_values"] { --post-card-c: var(--wp-kind-fixed); }
+.wp-post-card[data-type="combine"] { --post-card-c: var(--wp-kind-combine); }
+.wp-post-card[data-type="wildcard"] { --post-card-c: var(--wp-kind-wildcard); }
+.wp-post-card[data-type="constraint"] { --post-card-c: var(--wp-kind-constraint); }
+.wp-post-card[data-type="derivation"] { --post-card-c: var(--wp-kind-derivation); }
+.wp-post-card[data-type="bundle"] { --post-card-c: var(--wp-bundle-default); }
+.wp-post-card:hover {
+  transform: translateY(-3px);
+  border-color: var(--wp-border-strong);
+  box-shadow: var(--wp-shadow-lg);
+}
+.wp-post-card:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+.wp-post-card:hover .wp-post-card__slug { color: var(--wp-accent-text-strong); }
+.wp-post-card[data-featured] {
+  background: linear-gradient(180deg, color-mix(in oklab, var(--wp-warn) 5%, var(--wp-bg-1)), var(--wp-bg-1) 60%);
+  border-color: color-mix(in oklab, var(--wp-warn) 25%, var(--wp-border));
+}
+.wp-post-card[data-featured]:hover { border-color: color-mix(in oklab, var(--wp-warn) 40%, var(--wp-border)); }
+.wp-post-card[data-deleted] { opacity: 0.62; filter: grayscale(40%); }
+.wp-post-card[data-deleted]:hover { opacity: 0.85; filter: none; }
+
+.wp-post-card__top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 22px;
+}
+.wp-post-card__badges { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
+.wp-post-card__slug {
+  font-family: var(--wp-font-mono);
+  font-size: 15.5px;
+  font-weight: 500;
+  line-height: 1.35;
+  color: var(--wp-text);
+  word-break: break-word;
+  transition: color var(--wp-motion-quick) ease;
+}
+.wp-post-card__owner { font-weight: 400; color: var(--wp-text-muted); }
+.wp-post-card__sep { color: var(--wp-accent-text); }
+.wp-post-card__desc {
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 19px;
+  color: var(--wp-text-muted);
+  text-wrap: pretty;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.wp-post-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
+.wp-post-card__tags .wp-chip { padding: 2px 8px; font-size: 11px; }
+.wp-post-card__foot {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 4px;
+  padding-top: 16px;
+  border-top: 1px solid var(--wp-border);
+  font-size: 12px;
+  color: var(--wp-text-muted);
+}
+.wp-post-card__stat {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-family: var(--wp-font-mono);
+  font-variant-numeric: tabular-nums;
+}
+.wp-post-card__stat :deep(.pi) { color: var(--wp-text-dim); }
+.wp-post-card__stat[data-active] :deep(.pi) { color: var(--wp-accent-text); }
+.wp-post-card__when { margin-left: auto; font-size: 11.5px; color: var(--wp-text-dim); }
+</style>

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: 0 0 0 3px 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>