@dumiflex/wp-kit 0.0.0-stage → 0.3.0

package/src/RatingBadge.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+/**
+ * The NSFW and Featured badges on a post: small uppercase pills. Renders
+ * nothing for a safe, unfeatured post.
+ *
+ *   <RatingBadge rating="nsfw" featured />
+ */
+import Icon from "./Icon.vue";
+
+defineProps<{
+  rating?: "sfw" | "nsfw" | undefined;
+  featured?: boolean | undefined;
+}>();
+</script>
+
+<template>
+  <span v-if="rating === 'nsfw'" class="wp-rating-badge wp-rating-badge--nsfw">NSFW</span>
+  <span v-if="featured" class="wp-rating-badge wp-rating-badge--featured">
+    <Icon name="star-fill" :size="9" />Featured
+  </span>
+</template>
+
+<style scoped>
+.wp-rating-badge {
+  --rating-badge-c: var(--wp-warn);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border-radius: var(--wp-radius-cap, 999px);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  line-height: 14px;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--rating-badge-c);
+  background: color-mix(in oklab, var(--rating-badge-c) 16%, transparent);
+  border: 1px solid color-mix(in oklab, var(--rating-badge-c) 42%, transparent);
+}
+.wp-rating-badge--nsfw { --rating-badge-c: var(--wp-danger); color: var(--wp-danger-text); }
+</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>

package/src/SearchInput.vue

@@ -0,0 +1,199 @@
+<script setup lang="ts">
+/**
+ * The one search box: an inline magnifier, the text, an optional match count
+ * or shortcut, and a ✕ that clears it.
+ *
+ * It replaced three look-alikes (ListFilter's own box, the import/export
+ * PickerSearch, Input with a boxed search addon) and a dozen hand-built ones.
+ * Lives in `components/shared/` and reads only SHARED_TOKENS, so the canvas
+ * pickers and the manager draw the same box in their own colours. Canvas
+ * callers pass `size="sm"`.
+ *
+ * - Attributes (`data-test`, `@keydown`, `@focus`…) land on the `<input>`;
+ *   `class`, `style` and `data-ai-*` stay on the box so a parent can size it.
+ * - `visible` + `total` show "3 of 12" while there is a query; add `noun` to
+ *   also show "12 rules" when it's empty.
+ * - Escape with text clears it and stops there; an empty box lets Escape
+ *   through so a dialog around it still closes.
+ * - The count and ✕ get `<testPrefix>-count` / `<testPrefix>-clear`, where
+ *   `testPrefix` defaults to the input's own `data-test`.
+ * - `focus()` and `select()` are exposed for pickers that focus on open.
+ */
+import Kbd from "./Kbd.vue";
+import { computed, ref, useAttrs } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    placeholder?: string | undefined;
+    ariaLabel?: string | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    /** Rows after filtering. With `total`, shows "visible of total". */
+    visible?: number | undefined;
+    total?: number | undefined;
+    /** Plural noun for the idle count ("12 rules"). */
+    noun?: string | undefined;
+    /** A key hint shown while the box is empty, e.g. "/" or "Ctrl K". */
+    shortcut?: string | undefined;
+    clearLabel?: string | undefined;
+    disabled?: boolean | undefined;
+    testPrefix?: string | undefined;
+  }>(),
+  { placeholder: "Search…", size: "md", clearLabel: "Clear search" },
+);
+
+const query = defineModel<string>({ required: true });
+
+const attrs = useAttrs();
+/** The box keeps `class`, `style` and the AI pointer's `data-ai-*` marks (so
+ *  the pointer rings the whole box); everything else goes to the input. */
+const onRoot = (k: string): boolean => k === "class" || k === "style" || k.startsWith("data-ai-");
+const rootAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([k]) => onRoot(k))));
+const inputAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([k]) => !onRoot(k))));
+const prefix = computed(() => props.testPrefix ?? (attrs["data-test"] as string | undefined));
+const tid = (suffix: string): string | undefined => (prefix.value ? `${prefix.value}-${suffix}` : undefined);
+
+const hasQuery = computed(() => query.value.trim().length > 0);
+const counted = computed(() => props.total !== undefined && props.visible !== undefined);
+
+const field = ref<HTMLInputElement | null>(null);
+
+function clear(): void {
+  query.value = "";
+  field.value?.focus();
+}
+
+function onKeydown(ev: KeyboardEvent): void {
+  if (ev.key === "Escape" && query.value) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    query.value = "";
+  }
+}
+
+defineExpose({
+  focus: () => field.value?.focus(),
+  select: () => field.value?.select(),
+  el: field,
+});
+</script>
+
+<template>
+  <label
+    class="wp-search"
+    :class="[`wp-search--${size}`, { 'wp-search--on': hasQuery, 'is-disabled': disabled }]"
+    v-bind="rootAttrs"
+  >
+    <i class="pi pi-search wp-search__icon" aria-hidden="true" />
+    <input
+      ref="field"
+      v-model="query"
+      class="wp-search__field"
+      type="text"
+      role="searchbox"
+      :placeholder="placeholder"
+      :aria-label="ariaLabel ?? placeholder"
+      :disabled="disabled"
+      spellcheck="false"
+      autocomplete="off"
+      v-bind="inputAttrs"
+      @keydown="onKeydown"
+    />
+    <span
+      v-if="counted && (hasQuery || noun)"
+      class="wp-search__count"
+      :data-zero="hasQuery && visible === 0 ? '' : null"
+      :data-test="tid('count')"
+      aria-live="polite"
+    >
+      <template v-if="hasQuery">{{ visible }} of {{ total }}</template>
+      <template v-else>{{ total }} {{ noun }}</template>
+    </span>
+    <Kbd v-if="shortcut && !query" class="wp-search__kbd" :keys="shortcut" size="sm" aria-hidden="true" />
+    <button
+      v-if="query"
+      type="button"
+      class="wp-search__clear"
+      :aria-label="clearLabel"
+      :data-test="tid('clear')"
+      :disabled="disabled"
+      @click.prevent="clear"
+    >
+      <i class="pi pi-times" aria-hidden="true" />
+    </button>
+  </label>
+</template>
+
+<style scoped>
+.wp-search {
+  display: flex;
+  align-items: center;
+  gap: var(--wp-space-2);
+  min-width: 0;
+  height: var(--wp-control-h-md);
+  padding: 0 var(--wp-space-2) 0 var(--wp-space-3);
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-sm);
+  color: var(--wp-text);
+  font-family: var(--wp-font-sans);
+  font-size: var(--wp-text-sm);
+  cursor: text;
+  transition: border-color var(--wp-motion-quick), box-shadow var(--wp-motion-quick);
+}
+.wp-search--sm { height: var(--wp-control-h-sm); font-size: var(--wp-text-xs); gap: var(--wp-space-1); padding-left: var(--wp-space-2); }
+.wp-search--lg { height: var(--wp-control-h-lg); font-size: var(--wp-text-base); padding-left: var(--wp-space-4); }
+.wp-search:hover { border-color: var(--wp-border-strong); }
+.wp-search:focus-within { border-color: var(--wp-border-focus); box-shadow: var(--wp-focus-ring); }
+.wp-search--on { border-color: var(--wp-accent-500); }
+.wp-search.is-disabled { opacity: 0.45; cursor: not-allowed; }
+
+.wp-search__icon { flex-shrink: 0; font-size: 12px; line-height: 1; color: var(--wp-text-dim); }
+.wp-search--sm .wp-search__icon { font-size: 10px; }
+.wp-search--on .wp-search__icon,
+.wp-search:focus-within .wp-search__icon { color: var(--wp-text-muted); }
+
+.wp-search__field {
+  flex: 1 1 8ch;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  outline: none;
+}
+.wp-search__field::placeholder { color: var(--wp-text-dim); }
+.wp-search__field:disabled { cursor: not-allowed; }
+
+.wp-search__count {
+  flex-shrink: 0;
+  color: var(--wp-text-dim);
+  font-size: var(--wp-text-xs);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.wp-search__count[data-zero] { color: var(--wp-danger); }
+
+.wp-search__kbd { flex-shrink: 0; }
+
+/* 20 px hit area even in the 24 px box; the mark draws at 9 px. */
+.wp-search__clear {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--wp-radius-sm);
+  background: none;
+  color: var(--wp-text-dim);
+  cursor: pointer;
+}
+.wp-search__clear .pi { font-size: 9px; line-height: 1; }
+.wp-search__clear:hover { color: var(--wp-text); background: var(--wp-bg-3); }
+.wp-search__clear:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+</style>