@dumiflex/wp-kit 0.0.0-stage → 0.3.0

package/src/Skeleton.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+/**
+ * Skeleton: the grey shape of content that is still loading, so the layout
+ * doesn't jump when it lands. Use it where the shape is known (a list of
+ * rows, a card, a line of text); a whole page or panel that is loading uses
+ * `LoadingMark block` instead. Works on the canvas and in the manager.
+ *
+ *   <Skeleton shape="row" :lines="4" label="Loading modules" />
+ *   <Skeleton shape="line" :lines="3" />
+ *   <Skeleton shape="block" height="120px" />
+ *
+ * The shapes are hidden from screen readers; `label` adds one polite
+ * "Loading…" line for them instead. The sweep stops under reduced motion.
+ */
+import { computed } from "vue";
+
+const props = withDefaults(defineProps<{
+  /** line: text lines (the last one shorter). block: a box. circle: an avatar or icon. row: an icon, a title and a hint line, like a list row. */
+  shape?: "line" | "block" | "circle" | "row" | undefined;
+  /** How many lines or rows. */
+  lines?: number | undefined;
+  /** CSS width of a line, block or circle. */
+  width?: string | undefined;
+  /** CSS height of a block or circle. */
+  height?: string | undefined;
+  /** Say "Loading…" to screen readers with this text. */
+  label?: string | undefined;
+}>(), { shape: "line", lines: 1, width: undefined, height: undefined, label: undefined });
+
+const count = computed(() => Math.max(1, Math.floor(props.lines)));
+/** The last of several lines is shorter, like the end of a paragraph. */
+const lineWidth = (i: number): string | undefined =>
+  props.width ?? (count.value > 1 && i === count.value - 1 ? "60%" : undefined);
+</script>
+
+<template>
+  <div class="wp-skeleton" :data-shape="shape" :role="label ? 'status' : undefined">
+    <span v-if="label" class="wp-skeleton__sr">{{ label }}…</span>
+    <template v-if="shape === 'line'">
+      <span v-for="i in count" :key="i" class="wp-skeleton__bone wp-skeleton__line" :style="{ width: lineWidth(i - 1) }" aria-hidden="true" />
+    </template>
+    <span v-else-if="shape === 'block'" class="wp-skeleton__bone wp-skeleton__block" :style="{ width, height }" aria-hidden="true" />
+    <span v-else-if="shape === 'circle'" class="wp-skeleton__bone wp-skeleton__circle" :style="{ width: width ?? height, height: height ?? width }" aria-hidden="true" />
+    <template v-else>
+      <span v-for="i in count" :key="i" class="wp-skeleton__row" aria-hidden="true">
+        <span class="wp-skeleton__bone wp-skeleton__circle" />
+        <span class="wp-skeleton__row-text">
+          <span class="wp-skeleton__bone wp-skeleton__line" :style="{ width: i % 2 ? '55%' : '42%' }" />
+          <span class="wp-skeleton__bone wp-skeleton__line wp-skeleton__line--hint" :style="{ width: i % 2 ? '80%' : '68%' }" />
+        </span>
+      </span>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.wp-skeleton { display: flex; flex-direction: column; gap: var(--wp-space-3); min-width: 0; width: 100%; }
+.wp-skeleton[data-shape="circle"], .wp-skeleton[data-shape="block"] { width: auto; }
+.wp-skeleton__bone {
+  position: relative; display: block; overflow: hidden;
+  border-radius: var(--wp-radius-sm); background: var(--wp-bg-3);
+}
+.wp-skeleton__bone::after {
+  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wp-text) 8%, transparent), transparent);
+  animation: wp-skeleton-sweep var(--wp-motion-shimmer) ease-in-out infinite;
+}
+.wp-skeleton__line { width: 100%; height: 0.75em; }
+.wp-skeleton__line--hint { height: 0.6em; opacity: 0.7; }
+.wp-skeleton__block { width: 100%; height: 64px; border-radius: var(--wp-radius); }
+.wp-skeleton__circle { flex: none; width: 28px; height: 28px; border-radius: 50%; /* round: stands in for an avatar */ }
+.wp-skeleton__row { display: flex; align-items: center; gap: var(--wp-space-4); padding: var(--wp-space-2) 0; }
+.wp-skeleton__row-text { display: flex; flex-direction: column; gap: var(--wp-space-2); flex: 1; min-width: 0; }
+.wp-skeleton__sr {
+  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
+  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+@keyframes wp-skeleton-sweep { to { transform: translateX(100%); } }
+@media (prefers-reduced-motion: reduce) {
+  .wp-skeleton__bone::after { animation: none; display: none; }
+}
+</style>

package/src/Slider.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+/**
+ * Slider: a number picked by dragging along a range (a weight, a threshold,
+ * a size). Use it when the feel of "more or less" matters more than the
+ * exact number; add `with-input` to type the exact number too. Works on the
+ * canvas (`size="sm"`) and in the manager (`md`).
+ *
+ *   <Slider v-model="weight" :min="0" :max="2" :step="0.05" aria-label="Weight" with-input />
+ *   <Slider v-model="size" :min="4" :max="160" :marks="[{ value: 32, label: '32' }]" :format="(v) => `${v} px`" />
+ *
+ * APG slider: the thumb is the focus stop; arrows move one step, PageUp /
+ * PageDown ten, Home / End jump to the ends, and `format` gives screen
+ * readers the value as words ("32 px"). Clicking the track jumps there and
+ * the drag carries on from it.
+ */
+import { computed, ref } from "vue";
+import { keyStep, percentOf, snap, valueAt } from "./slider-math";
+import WpNumber from "./WpNumber.vue";
+
+const props = withDefaults(defineProps<{
+  modelValue: number;
+  min?: number | undefined;
+  max?: number | undefined;
+  step?: number | undefined;
+  size?: "sm" | "md" | "lg" | undefined;
+  disabled?: boolean | undefined;
+  ariaLabel?: string | undefined;
+  /** Labelled ticks under the track. */
+  marks?: { value: number; label?: string }[] | undefined;
+  /** How the value reads (the tooltip-free label and screen readers). */
+  format?: ((v: number) => string) | undefined;
+  /** Show the value after the track. */
+  showValue?: boolean | undefined;
+  /** Put a WpNumber after the track to type the exact value. */
+  withInput?: boolean | undefined;
+}>(), { min: 0, max: 100, step: 1, size: "md", ariaLabel: undefined, marks: undefined });
+
+const emit = defineEmits<{ (e: "update:modelValue", v: number): void; (e: "change", v: number): void }>();
+
+const trackEl = ref<HTMLElement | null>(null);
+const dragging = ref(false);
+
+const value = computed(() => snap(props.modelValue, props.min, props.max, props.step));
+const pct = computed(() => percentOf(value.value, props.min, props.max));
+const text = computed(() => (props.format ? props.format(value.value) : String(value.value)));
+
+function set(v: number): void {
+  if (props.disabled) return;
+  if (v !== props.modelValue) emit("update:modelValue", v);
+}
+
+function fromPointer(ev: PointerEvent): number {
+  const r = trackEl.value?.getBoundingClientRect();
+  if (!r) return value.value;
+  return valueAt(ev.clientX, r.left, r.width, props.min, props.max, props.step);
+}
+
+function onPointerDown(ev: PointerEvent): void {
+  if (props.disabled || ev.button !== 0) return;
+  ev.preventDefault();
+  dragging.value = true;
+  (ev.currentTarget as HTMLElement).setPointerCapture?.(ev.pointerId);
+  set(fromPointer(ev));
+  (trackEl.value?.querySelector("[role=slider]") as HTMLElement | null)?.focus();
+}
+
+function onPointerMove(ev: PointerEvent): void {
+  if (dragging.value) set(fromPointer(ev));
+}
+
+function onPointerUp(ev: PointerEvent): void {
+  if (!dragging.value) return;
+  dragging.value = false;
+  (ev.currentTarget as HTMLElement).releasePointerCapture?.(ev.pointerId);
+  emit("change", value.value);
+}
+
+function onKeydown(ev: KeyboardEvent): void {
+  if (props.disabled) return;
+  const next = keyStep(ev.key, value.value, props.min, props.max, props.step);
+  if (next === null) return;
+  ev.preventDefault();
+  set(next);
+  emit("change", next);
+}
+
+function onTyped(v: number | null): void {
+  if (v === null) return;
+  const next = snap(v, props.min, props.max, props.step);
+  set(next);
+  emit("change", next);
+}
+</script>
+
+<template>
+  <div class="wp-slider" :data-size="size" :data-disabled="disabled || undefined" :data-dragging="dragging || undefined" :data-marked="marks?.length ? 'true' : undefined">
+    <div
+      ref="trackEl"
+      class="wp-slider__track"
+      @pointerdown="onPointerDown"
+      @pointermove="onPointerMove"
+      @pointerup="onPointerUp"
+      @pointercancel="onPointerUp"
+    >
+      <div class="wp-slider__rail" />
+      <div class="wp-slider__fill" :style="{ width: `calc(${pct}% + var(--_thumb) / 2)` }" />
+      <span
+        v-for="m in marks ?? []"
+        :key="m.value"
+        class="wp-slider__mark"
+        :data-passed="m.value <= value || undefined"
+        :style="{ left: `${percentOf(m.value, props.min, props.max)}%` }"
+        aria-hidden="true"
+      ><span v-if="m.label" class="wp-slider__mark-label">{{ m.label }}</span></span>
+      <!-- Focusable unless disabled (tabindex is bound). -->
+      <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
+      <div
+        class="wp-slider__thumb"
+        role="slider"
+        :tabindex="disabled ? -1 : 0"
+        :aria-label="ariaLabel"
+        :aria-valuemin="min"
+        :aria-valuemax="max"
+        :aria-valuenow="value"
+        :aria-valuetext="format ? text : undefined"
+        :aria-disabled="disabled || undefined"
+        :style="{ left: `${pct}%` }"
+        @keydown="onKeydown"
+      />
+    </div>
+    <span v-if="showValue && !withInput" class="wp-slider__value" aria-hidden="true">{{ text }}</span>
+    <WpNumber
+      v-if="withInput"
+      class="wp-slider__input"
+      :model-value="value"
+      :min="min"
+      :max="max"
+      :step="step"
+      :size="size"
+      :disabled="disabled"
+      :aria-label="ariaLabel ? `${ariaLabel}, exact value` : 'Exact value'"
+      @update:model-value="onTyped"
+    />
+  </div>
+</template>
+
+<style scoped>
+.wp-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-slider[data-size="sm"] { --_h: var(--wp-control-h-sm); --_thumb: 12px; gap: var(--wp-space-3); }
+.wp-slider[data-size="lg"] { --_h: var(--wp-control-h-lg); --_thumb: 18px; }
+.wp-slider[data-marked] { padding-bottom: 14px; }
+.wp-slider__track {
+  position: relative; flex: 1; min-width: 60px; height: var(--_h);
+  margin: 0 calc(var(--_thumb) / 2); cursor: pointer; touch-action: none;
+}
+.wp-slider__rail, .wp-slider__fill {
+  position: absolute; top: 50%; left: 0; height: 4px; margin-top: -2px; border-radius: var(--wp-radius-cap, 999px);
+}
+.wp-slider__rail { right: 0; 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-slider__fill { left: calc(var(--_thumb) / -2); background: var(--wp-accent); }
+.wp-slider[data-size="sm"] .wp-slider__rail, .wp-slider[data-size="sm"] .wp-slider__fill { height: 3px; margin-top: -1.5px; }
+.wp-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-slider__track:hover .wp-slider__thumb, .wp-slider[data-dragging] .wp-slider__thumb { transform: scale(1.12); }
+.wp-slider__thumb:focus-visible { box-shadow: 0 0 0 3px var(--wp-focus-ring); }
+.wp-slider__mark {
+  position: absolute; top: 50%; width: 2px; height: 8px; margin: -4px 0 0 -1px; border-radius: min(1px, var(--wp-radius-cap, 999px));
+  background: var(--wp-border-strong); pointer-events: none;
+}
+.wp-slider__mark[data-passed] { background: color-mix(in srgb, var(--wp-accent) 60%, var(--wp-bg)); }
+.wp-slider__mark-label {
+  position: absolute; top: calc(var(--_h) / 2 + 2px); left: 50%; transform: translateX(-50%);
+  color: var(--wp-text-dim); font-size: 10px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
+}
+.wp-slider__value {
+  flex: none; min-width: 3ch; text-align: right; color: var(--wp-text); font: 500 var(--wp-text-sm)/1 var(--wp-font-sans);
+  font-variant-numeric: tabular-nums;
+}
+.wp-slider[data-size="sm"] .wp-slider__value { font-size: var(--wp-text-xs); }
+.wp-slider__input { flex: none; width: 84px; }
+.wp-slider[data-size="sm"] .wp-slider__input { width: 64px; }
+.wp-slider[data-disabled] { opacity: 0.45; }
+.wp-slider[data-disabled] .wp-slider__track { cursor: not-allowed; }
+.wp-slider[data-disabled] .wp-slider__thumb { transform: none; }
+@media (prefers-reduced-motion: reduce) {
+  .wp-slider__thumb { transition: none; }
+}
+</style>

package/src/SortableList.vue

@@ -0,0 +1,260 @@
+<script setup lang="ts" generic="T">
+/**
+ * Sortable list: rows you put in order by dragging their grip, or from the
+ * keyboard. Works on the canvas (`size="sm"`) and in the manager (`md`).
+ *
+ *   <SortableList v-model="rules" :item-key="(r) => r.id" :item-label="(r) => r.name" label="Rules">
+ *     <template #item="{ item }">…the row…</template>
+ *   </SortableList>
+ *
+ * Mouse, pen and touch: drag the grip; a line shows where the row lands and
+ * Escape cancels. Keyboard (on the grip): Space or Enter picks the row up,
+ * the arrows move it, Space or Enter drops it, Escape puts it back; Alt+↑ /
+ * Alt+↓ move it one step without picking it up. Each step is said in a
+ * polite live line ("Hair moved to 2 of 5"). Only the grip starts a drag,
+ * so text and controls in the row work as usual.
+ */
+import { computed, nextTick, onBeforeUnmount, ref, shallowRef, useId } from "vue";
+import { dropIndex, moveItem } from "./sortable";
+
+const props = withDefaults(defineProps<{
+  modelValue: T[];
+  /** A stable key per item. */
+  itemKey: (item: T) => string | number;
+  /** The item's name in the grip's label and the announcements. */
+  itemLabel?: ((item: T, index: number) => string) | undefined;
+  /** The list's name for screen readers. */
+  label: string;
+  disabled?: boolean | undefined;
+  size?: "sm" | "md" | undefined;
+}>(), { size: "md" });
+
+const emit = defineEmits<{
+  (e: "update:modelValue", v: T[]): void;
+  (e: "move", m: { from: number; to: number }): void;
+}>();
+
+const uid = useId();
+const helpId = `wp-sortable-help-${uid}`;
+const listEl = ref<HTMLElement | null>(null);
+const said = ref("");
+
+/** Pointer drag: which row, where it started, where it would land. */
+const drag = ref<{ from: number; to: number; startY: number; dy: number; line: number } | null>(null);
+let mids: number[] = [];
+let tops: number[] = [];
+let bottoms: number[] = [];
+let listTop = 0;
+
+/** Keyboard pick-up: the row held and the order before it was picked up. */
+const held = shallowRef<{ key: string | number; before: T[] } | null>(null);
+
+const nameOf = (item: T, i: number): string => props.itemLabel?.(item, i) ?? `Item ${i + 1}`;
+const total = computed(() => props.modelValue.length);
+
+function announce(text: string): void {
+  said.value = "";
+  void nextTick(() => { said.value = text; });
+}
+
+function rows(): HTMLElement[] {
+  return listEl.value ? [...listEl.value.querySelectorAll<HTMLElement>(":scope > .wp-sortable__row")] : [];
+}
+
+function focusGrip(key: string | number): void {
+  void nextTick(() => {
+    const i = props.modelValue.findIndex((it) => props.itemKey(it) === key);
+    rows()[i]?.querySelector<HTMLElement>(".wp-sortable__grip")?.focus();
+  });
+}
+
+function commit(from: number, to: number): void {
+  if (from === to) return;
+  emit("update:modelValue", moveItem(props.modelValue, from, to));
+  emit("move", { from, to });
+}
+
+// ── Pointer ─────────────────────────────────────────────────────────────
+function onPointerDown(ev: PointerEvent, i: number): void {
+  if (props.disabled || ev.button !== 0 || held.value) return;
+  ev.preventDefault();
+  const rs = rows().map((r) => r.getBoundingClientRect());
+  mids = rs.map((r) => r.top + r.height / 2);
+  tops = rs.map((r) => r.top);
+  bottoms = rs.map((r) => r.bottom);
+  listTop = listEl.value?.getBoundingClientRect().top ?? 0;
+  drag.value = { from: i, to: i, startY: ev.clientY, dy: 0, line: -1 };
+  (ev.currentTarget as HTMLElement).setPointerCapture?.(ev.pointerId);
+  window.addEventListener("keydown", onDragKey, true);
+}
+
+function lineFor(from: number, to: number): number {
+  if (to === from) return -1;
+  // Insert before original row k (skipping the dragged one), or after the last.
+  const k = to < from ? to : to + 1;
+  return (k < tops.length ? tops[k] : bottoms[bottoms.length - 1]) - listTop;
+}
+
+function onPointerMove(ev: PointerEvent): void {
+  const d = drag.value;
+  if (!d) return;
+  const to = dropIndex(ev.clientY, mids, d.from);
+  drag.value = { ...d, dy: ev.clientY - d.startY, to, line: lineFor(d.from, to) };
+}
+
+function endDrag(ev: PointerEvent | null, keep: boolean): void {
+  const d = drag.value;
+  if (!d) return;
+  drag.value = null;
+  window.removeEventListener("keydown", onDragKey, true);
+  if (ev) (ev.currentTarget as HTMLElement | null)?.releasePointerCapture?.(ev.pointerId);
+  if (keep && d.to !== d.from) {
+    const item = props.modelValue[d.from];
+    commit(d.from, d.to);
+    announce(`${nameOf(item, d.from)} moved to ${d.to + 1} of ${total.value}`);
+  }
+}
+
+// A list removed mid-drag must not leave its Escape listener on the window.
+onBeforeUnmount(() => window.removeEventListener("keydown", onDragKey, true));
+
+function onDragKey(ev: KeyboardEvent): void {
+  if (ev.key !== "Escape") return;
+  ev.preventDefault();
+  ev.stopPropagation();
+  endDrag(null, false);
+  announce("Move cancelled");
+}
+
+// ── Keyboard ────────────────────────────────────────────────────────────
+function onGripKey(ev: KeyboardEvent, i: number): void {
+  if (props.disabled) return;
+  const item = props.modelValue[i];
+  const key = props.itemKey(item);
+  const up = ev.key === "ArrowUp" || ev.key === "ArrowLeft";
+  const down = ev.key === "ArrowDown" || ev.key === "ArrowRight";
+
+  if (!held.value) {
+    if (ev.key === " " || ev.key === "Enter") {
+      ev.preventDefault();
+      held.value = { key, before: [...props.modelValue] };
+      announce(`Picked up ${nameOf(item, i)}, ${i + 1} of ${total.value}. Arrows move it, Space drops it, Escape puts it back.`);
+    } else if (ev.altKey && (up || down)) {
+      ev.preventDefault();
+      const to = up ? i - 1 : i + 1;
+      if (to < 0 || to >= total.value) return;
+      commit(i, to);
+      announce(`${nameOf(item, i)} moved to ${to + 1} of ${total.value}`);
+      focusGrip(key);
+    }
+    return;
+  }
+
+  if (up || down || ev.key === "Home" || ev.key === "End") {
+    ev.preventDefault();
+    const to = ev.key === "Home" ? 0 : ev.key === "End" ? total.value - 1 : up ? i - 1 : i + 1;
+    if (to < 0 || to >= total.value || to === i) return;
+    commit(i, to);
+    announce(`${nameOf(item, i)} moved to ${to + 1} of ${total.value}`);
+    focusGrip(key);
+  } else if (ev.key === " " || ev.key === "Enter") {
+    ev.preventDefault();
+    held.value = null;
+    announce(`${nameOf(item, i)} dropped at ${i + 1} of ${total.value}`);
+  } else if (ev.key === "Escape") {
+    ev.preventDefault();
+    ev.stopPropagation();
+    const before = held.value.before;
+    held.value = null;
+    if (before.some((it, j) => it !== props.modelValue[j])) emit("update:modelValue", before);
+    const back = before.findIndex((it) => props.itemKey(it) === key);
+    announce(`Move cancelled. ${nameOf(item, i)} is back at ${back + 1} of ${total.value}`);
+    focusGrip(key);
+  }
+}
+
+function onGripBlur(i: number): void {
+  // Moving the row re-inserts its element, which can blur the grip for a
+  // moment; only a real focus loss drops it.
+  void nextTick(() => {
+    if (!held.value) return;
+    const grip = rows()[props.modelValue.findIndex((it) => props.itemKey(it) === held.value?.key)]?.querySelector(".wp-sortable__grip");
+    if (grip && document.activeElement !== grip) {
+      const item = props.modelValue[i];
+      held.value = null;
+      if (item) announce(`${nameOf(item, i)} dropped`);
+    }
+  });
+}
+</script>
+
+<template>
+  <div class="wp-sortable" :data-size="size" :data-dragging="drag ? 'true' : undefined">
+    <ul ref="listEl" class="wp-sortable__list" :aria-label="label">
+      <li
+        v-for="(item, i) in modelValue"
+        :key="itemKey(item)"
+        class="wp-sortable__row"
+        :data-dragged="drag?.from === i || undefined"
+        :data-held="held?.key === itemKey(item) || undefined"
+        :style="drag?.from === i ? { transform: `translateY(${drag.dy}px)` } : undefined"
+      >
+        <button
+          type="button"
+          class="wp-sortable__grip"
+          :aria-label="`Move ${nameOf(item, i)}`"
+          :aria-describedby="helpId"
+          :aria-pressed="held?.key === itemKey(item)"
+          :disabled="disabled"
+          @pointerdown="onPointerDown($event, i)"
+          @pointermove="onPointerMove"
+          @pointerup="endDrag($event, true)"
+          @pointercancel="endDrag($event, false)"
+          @keydown="onGripKey($event, i)"
+          @blur="onGripBlur(i)"
+        ><i class="pi pi-bars" aria-hidden="true" /></button>
+        <div class="wp-sortable__body"><slot name="item" :item="item" :index="i" /></div>
+      </li>
+      <li v-if="drag && drag.line >= 0" class="wp-sortable__line" :style="{ top: `${drag.line}px` }" aria-hidden="true" />
+    </ul>
+    <span :id="helpId" class="wp-sortable__sr">Space or Enter picks it up, the arrows move it, Space drops it, Escape puts it back. Alt and an arrow moves it one step.</span>
+    <span class="wp-sortable__sr" aria-live="polite">{{ said }}</span>
+  </div>
+</template>
+
+<style scoped>
+.wp-sortable { position: relative; min-width: 0; }
+.wp-sortable__list { position: relative; display: flex; flex-direction: column; gap: var(--wp-space-2); margin: 0; padding: 0; list-style: none; }
+.wp-sortable[data-size="sm"] .wp-sortable__list { gap: 2px; }
+.wp-sortable__row {
+  display: flex; align-items: center; gap: var(--wp-space-2); min-width: 0;
+  border-radius: var(--wp-radius); background: var(--wp-bg-1);
+}
+.wp-sortable__row[data-dragged] {
+  position: relative; z-index: 2; opacity: 0.92; box-shadow: var(--wp-shadow-md);
+  outline: 1px solid var(--wp-border-strong); pointer-events: none;
+}
+.wp-sortable__row[data-held] { outline: 1.5px dashed var(--wp-accent); outline-offset: 1px; }
+.wp-sortable__grip {
+  display: inline-grid; place-items: center; flex: none; align-self: stretch;
+  width: 24px; min-height: 24px; margin: 0; padding: 0; border: 0; border-radius: var(--wp-radius-sm);
+  background: transparent; color: var(--wp-text-dim); cursor: grab; touch-action: none;
+}
+.wp-sortable[data-size="sm"] .wp-sortable__grip { width: 20px; min-height: 20px; }
+.wp-sortable__grip .pi { font-size: 11px; }
+.wp-sortable[data-size="sm"] .wp-sortable__grip .pi { font-size: 10px; }
+.wp-sortable__grip:hover:not(:disabled) { color: var(--wp-text); background: var(--wp-row-hover); }
+.wp-sortable__grip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-sortable__grip[aria-pressed="true"] { color: var(--wp-accent-text); }
+.wp-sortable__grip:disabled { cursor: not-allowed; opacity: 0.45; }
+.wp-sortable[data-dragging] .wp-sortable__grip { cursor: grabbing; }
+.wp-sortable__body { flex: 1; min-width: 0; }
+.wp-sortable__line {
+  position: absolute; left: 0; right: 0; height: 2px; margin-top: -1px; border-radius: min(1px, var(--wp-radius-cap, 999px));
+  background: var(--wp-accent); box-shadow: 0 0 0 2px var(--wp-accent-glow); pointer-events: none;
+}
+.wp-sortable__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>

package/src/SplitPane.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+/**
+ * Split pane: two panels side by side (or one above the other) with a
+ * handle between them that drags, takes focus and moves with the arrow
+ * keys. v-model is the first panel's size in px; the second panel takes the
+ * rest. Works on the canvas and in the manager.
+ *
+ *   <SplitPane v-model="listWidth" :min="200" :max="520" :default-size="280" label="List width">
+ *     <template #start>…list…</template>
+ *     <template #end>…detail…</template>
+ *   </SplitPane>
+ *
+ * The parent decides the pane's own height (or width, when stacked). Keep
+ * the size in a ref, or in the user's settings to remember it.
+ */
+import { useId } from "vue";
+import ResizeHandle from "./ResizeHandle.vue";
+
+const props = withDefaults(defineProps<{
+  /** The first panel's size in px. */
+  modelValue: number;
+  /** horizontal: side by side. vertical: one above the other. */
+  orientation?: "horizontal" | "vertical" | undefined;
+  min?: number | undefined;
+  max?: number | undefined;
+  defaultSize?: number | undefined;
+  /** What the handle resizes, for screen readers. */
+  label?: string | undefined;
+  disabled?: boolean | undefined;
+}>(), { orientation: "horizontal", min: 120, max: Number.POSITIVE_INFINITY, defaultSize: undefined, label: "Resize panels" });
+
+const emit = defineEmits<{ (e: "update:modelValue", v: number): void; (e: "end", v: number): void }>();
+const startId = `wp-split-${useId()}`;
+</script>
+
+<template>
+  <div class="wp-split" :data-orientation="orientation">
+    <div
+      :id="startId"
+      class="wp-split__start"
+      :style="orientation === 'horizontal' ? { width: `${modelValue}px` } : { height: `${modelValue}px` }"
+    >
+      <slot name="start" />
+    </div>
+    <ResizeHandle
+      :model-value="modelValue"
+      :axis="orientation === 'horizontal' ? 'x' : 'y'"
+      :min="min"
+      :max="max"
+      :default-size="defaultSize"
+      :label="props.label"
+      :controls="startId"
+      :disabled="disabled"
+      @update:model-value="emit('update:modelValue', $event)"
+      @end="emit('end', $event)"
+    />
+    <div class="wp-split__end"><slot name="end" /></div>
+  </div>
+</template>
+
+<style scoped>
+.wp-split { display: flex; width: 100%; height: 100%; min-width: 0; min-height: 0; }
+.wp-split[data-orientation="vertical"] { flex-direction: column; }
+.wp-split__start { flex: none; min-width: 0; min-height: 0; overflow: auto; }
+.wp-split__end { flex: 1; min-width: 0; min-height: 0; overflow: auto; }
+.wp-split[data-orientation="horizontal"] > .wp-split__start { border-right: 1px solid var(--wp-border); }
+.wp-split[data-orientation="vertical"] > .wp-split__start { border-bottom: 1px solid var(--wp-border); }
+</style>

package/src/StarButton.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+/**
+ * Star a post: a toggle Button with a filled star when on and the star count
+ * beside the label. The app owns the request; this only shows the state and
+ * emits `toggle`.
+ *
+ *   <StarButton :starred="post.starred_by_me" :count="post.star_count" :disabled="pending" @toggle="star" />
+ */
+import Button from "./Button.vue";
+
+withDefaults(defineProps<{
+  starred: boolean;
+  count?: number | undefined;
+  disabled?: boolean | undefined;
+  size?: "sm" | "md" | "lg" | undefined;
+}>(), { count: undefined, disabled: false, size: "md" });
+
+const emit = defineEmits<{ (e: "toggle"): void }>();
+</script>
+
+<template>
+  <Button
+    :icon="starred ? 'star-fill' : 'star'"
+    :pressed="starred"
+    :disabled="disabled"
+    :size="size"
+    @click="emit('toggle')"
+  >
+    {{ starred ? "Starred" : "Star" }}
+    <span v-if="count !== undefined" class="wp-star-button__count">{{ count.toLocaleString() }}</span>
+  </Button>
+</template>
+
+<style scoped>
+.wp-star-button__count {
+  margin-left: 2px;
+  color: var(--wp-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+</style>