@dumiflex/wp-kit 0.5.0 → 0.7.0

package/src/RangeSlider.vue

@@ -1,183 +0,0 @@
-<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/Toggle.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-/**
- * The manager's on/off switch: the shared WpSwitch at the
- * manager size, so the canvas and the manager draw one switch. Use it for a
- * setting that takes effect at once.
- */
-import WpSwitch from "./WpSwitch.vue";
-
-interface Props {
-  modelValue: boolean;
-  label?: string | undefined;
-  size?: "sm" | "md" | "lg" | undefined;
-  disabled?: boolean | undefined;
-  invalid?: boolean | undefined;
-  /** @deprecated use `invalid`. */
-  error?: boolean | undefined;
-  ariaLabel?: string | undefined;
-}
-const props = withDefaults(defineProps<Props>(), { size: "md", label: undefined, ariaLabel: undefined });
-
-const emit = defineEmits<{
-  (e: "update:modelValue", v: boolean): void;
-}>();
-</script>
-
-<template>
-  <WpSwitch
-    :model-value="props.modelValue"
-    :size="props.size"
-    :label="props.label"
-    :aria-label="props.ariaLabel ?? props.label"
-    :disabled="props.disabled"
-    :invalid="props.invalid || props.error"
-    @update:model-value="emit('update:modelValue', $event)"
-  />
-</template>

package/src/WpButton.vue

@@ -1,75 +0,0 @@
-<script setup lang="ts">
-/**
- * The canvas twin of the manager Button (manager/components/ui/Button.vue).
- * Same variants, sizes and states, same stylesheet (`button.css`), but the
- * icon is a PrimeIcons class, as everywhere on the canvas, and the default
- * size is the canvas `sm`.
- *
- *   <WpButton variant="primary" icon="pi-plus">Add module</WpButton>
- *   <WpButton variant="ghost" icon="pi-download" aria-label="Download snapshot" />
- *   <WpButton variant="add" icon="pi-plus" block>Add rule</WpButton>
- *
- * With no slot content it is an icon button (`.wp-btn--icon`); its
- * `aria-label` is also its tooltip (`hint` sets another, `kbd` adds a key
- * chip). `pressed` turns it into a toggle (a "favourites only" star, a
- * filter panel trigger). Loading swaps the icon for the sparkle, sets
- * aria-busy and ignores clicks.
- *
- * The stylesheet is pulled in scoped, so the canvas never carries the
- * `.wp-btn` classes globally. Row icon buttons are WpIconButton.
- */
-import { computed, useSlots } from "vue";
-import LoadingMark from "./LoadingMark.vue";
-import { vTooltip } from "./tooltip";
-
-const props = withDefaults(defineProps<{
-  variant?: "primary" | "secondary" | "ghost" | "danger" | "link" | "outline" | "add" | undefined;
-  size?: "sm" | "md" | "lg" | undefined;
-  /** PrimeIcons class (e.g. `pi-plus`), drawn before the label. */
-  icon?: string | undefined;
-  loading?: boolean | undefined;
-  disabled?: boolean | undefined;
-  /** Stretch to the container's full width. */
-  block?: boolean | undefined;
-  /** Makes it a toggle (`aria-pressed`): on, it wears the accent tint. */
-  pressed?: boolean | undefined;
-  type?: "button" | "submit" | "reset" | undefined;
-  ariaLabel?: string | undefined;
-  /** Tooltip text; an icon button shows its aria-label when this is unset.
-   *  Use this, not `v-tooltip` on the component, which would fight the
-   *  button's own. */
-  hint?: string | undefined;
-  /** A shortcut shown in the tooltip's key chip, e.g. "P". */
-  kbd?: string | undefined;
-}>(), { variant: "secondary", size: "sm", icon: undefined, type: "button", ariaLabel: undefined, hint: undefined, kbd: undefined, pressed: undefined });
-
-const emit = defineEmits<{ click: [evt: MouseEvent] }>();
-
-const slots = useSlots();
-const iconOnly = computed(() => !slots.default);
-
-function onClick(e: MouseEvent): void {
-  if (props.disabled || props.loading) return;
-  emit("click", e);
-}
-</script>
-
-<template>
-  <button
-    v-tooltip="{ text: hint ?? (iconOnly ? ariaLabel : undefined), kbd }"
-    :type="type"
-    class="wp-btn"
-    :class="[`wp-btn--${variant}`, `wp-btn--${size}`, { 'wp-btn--icon': iconOnly, 'wp-btn--block': block }]"
-    :disabled="disabled || loading"
-    :aria-label="ariaLabel"
-    :aria-busy="loading || undefined"
-    :aria-pressed="pressed === undefined ? undefined : pressed"
-    @click="onClick"
-  >
-    <LoadingMark v-if="loading" variant="sparkle" mono :size="size === 'lg' ? 16 : size === 'md' ? 14 : 12" decorative />
-    <i v-else-if="icon" class="pi" :class="icon" aria-hidden="true" />
-    <slot />
-  </button>
-</template>
-
-<style scoped src="./button.css"></style>

package/src/WpCheck.vue

@@ -1,104 +0,0 @@
-<script setup lang="ts">
-/**
- * Shared checkbox box — the wildcard pool's per-option look (`.opt__check`
- * in OptionRow.vue), extracted so every checkmark box in the *embed/canvas*
- * tree reads the same.
- *
- * Why a component (not the global `.wp-check` class): the canvas bundle only
- * loads a hand-picked CSS set via `src/extension/settings.ts` — it does NOT
- * load the SPA's `manager/styles/tokens.css`, where global `.wp-check` lives.
- * A component's `<style scoped>` is compiled into the component's own chunk,
- * so it ships wherever the component renders — SPA *and* canvas. That's the
- * same reason `.opt__check` / `.row__check` / `.ex__check` are each scoped.
- *
- * Custom toggle BUTTONS (internal flag, seed-lock) stay as their own styled
- * buttons — this is only for true checkmark boxes.
- *
- * `aria-label` / `data-test` fall through to the single root span. Click /
- * Space / Enter toggle. `size="sm"` is the 12px box of the canvas rows' on/off
- * mark (modules, bundles, injector rows). A parent can tint the checked fill
- * with `--check-on` (a bundle header uses its bundle colour).
- */
-const props = withDefaults(
-  defineProps<{
-    /** Checked state — use with `v-model` or `:model-value` + `@update:model-value`. */
-    modelValue?: boolean | undefined;
-    disabled?: boolean | undefined;
-    size?: "sm" | "md" | undefined;
-  }>(),
-  { modelValue: false, disabled: false, size: "md" },
-);
-
-const emit = defineEmits<{ "update:modelValue": [next: boolean] }>();
-
-function toggle(): void {
-  if (props.disabled) return;
-  emit("update:modelValue", !props.modelValue);
-}
-</script>
-
-<template>
-  <!-- Focusable: tabindex is bound (-1 while disabled), which the rule can't see. -->
-  <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus -->
-  <span
-    class="wp-check"
-    :class="{ 'wp-check--sm': size === 'sm' }"
-    role="checkbox"
-    :aria-checked="modelValue === true"
-    :aria-disabled="disabled || undefined"
-    :tabindex="disabled ? -1 : 0"
-    @click="toggle"
-    @keydown.space.prevent="toggle"
-    @keydown.enter.prevent="toggle"
-  >
-    <!-- 8×8 SVG tick inside the 14px box — identical to OptionRow's
-         `.opt__check` so the canvas boxes match the wildcard options. -->
-    <svg
-      v-if="modelValue"
-      width="8"
-      height="8"
-      viewBox="0 0 12 12"
-      aria-hidden="true"
-    >
-      <path
-        d="M2.5 6.5 L5 9 L9.5 3.5"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-  </span>
-</template>
-
-<style scoped>
-/* Verbatim from OptionRow.vue `.opt__check`. Scoped so it ships into the
- * canvas bundle (no global tokens.css there). Vars resolve from the SPA's
- * tokens.css or the canvas theme.css — both define these. */
-.wp-check {
-  width: 14px;
-  height: 14px;
-  border: 1.5px solid var(--wp-border-soft, var(--wp-border));
-  border-radius: min(3px, var(--wp-radius-cap, 999px));
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  background: var(--wp-bg);
-  flex-shrink: 0;
-  cursor: pointer;
-}
-.wp-check svg { display: block; }
-.wp-check--sm { width: 12px; height: 12px; border-width: 1px; border-radius: min(2px, var(--wp-radius-cap, 999px)); }
-.wp-check--sm svg { width: 7px; height: 7px; }
-.wp-check:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
-.wp-check[aria-checked="true"] {
-  background: var(--check-on, var(--wp-accent));
-  border-color: var(--check-on, var(--wp-accent));
-}
-.wp-check[aria-disabled="true"] {
-  cursor: not-allowed;
-  opacity: 0.45;
-}
-</style>

package/src/_skeleton.css

@@ -1,50 +0,0 @@
-/* Skeleton loading frames.
- *
- * Used by modals + widgets that surface async API loads (bundle picker,
- * module picker). The flat base background is token-driven so the
- * frames track theme changes; a moving highlight gradient overlays
- * via the `::after` pseudo so consumers don't need to mark up two
- * elements. Animation loops on `--wp-motion-shimmer` (1400ms).
- *
- * Imported by each consumer's scoped style block — the `wp-skel`
- * class names are intentionally global so a parent's scoped wrapper
- * (`wp-bp__skel-row` etc.) can lay out the shapes while the base
- * `wp-skel` rules drive the look. `prefers-reduced-motion` kills the
- * sweep so reduced-motion users still get a flat placeholder.
- */
-.wp-skel {
-  background: var(--wp-bg2);
-  border-radius: min(4px, var(--wp-radius-cap, 999px));
-  position: relative;
-  overflow: hidden;
-}
-.wp-skel::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    color-mix(in srgb, var(--wp-text) 8%, transparent) 50%,
-    transparent 100%
-  );
-  transform: translateX(-100%);
-  animation: wp-skel-shimmer var(--wp-motion-shimmer) ease-in-out infinite;
-}
-.wp-skel--text {
-  height: 11px;
-}
-.wp-skel--circle {
-  border-radius: 50%; /* round: stands in for an avatar */
-}
-.wp-skel--pill {
-  border-radius: var(--wp-radius-cap, 999px);
-}
-
-@keyframes wp-skel-shimmer {
-  100% { transform: translateX(100%); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .wp-skel::after { animation: none; }
-}