@dumiflex/wp-kit 0.4.0 → 0.6.0

package/src/ImageGrid.vue

@@ -8,12 +8,14 @@
  *   <ImageGrid :images="outputs" />
  *   <ImageGrid v-model:selected="keep" :images="frames" selectable :min-size="96" />
  *
- * Tiles are buttons in reading order (one Tab stop each); a tile with no
- * `src` draws a Skeleton-like block while it loads.
+ * Tiles are buttons in reading order (one Tab stop each). A tile with no
+ * `src` yet (a frame still rendering) draws a Skeleton and can't be opened;
+ * the Lightbox steps only through the images that are there.
  */
 import { computed, ref } from "vue";
 import Lightbox from "./Lightbox.vue";
-import WpCheck from "./WpCheck.vue";
+import Skeleton from "./Skeleton.vue";
+import Checkbox from "./Checkbox.vue";
 
 export interface GridImage { id: string; src: string; alt: string; thumb?: string; caption?: string }
 
@@ -38,12 +40,15 @@ const emit = defineEmits<{
 
 const open = ref(false);
 const at = ref(0);
-const shots = computed(() => props.images.map((i) => ({ src: i.src, alt: i.alt, caption: i.caption })));
+/** Only the images that are there: a tile still loading has nothing to show. */
+const ready = computed(() => props.images.map((img, i) => ({ img, i })).filter(({ img }) => !!img.src));
+const shots = computed(() => ready.value.map(({ img }) => ({ src: img.src, alt: img.alt, caption: img.caption })));
 
 function show(i: number): void {
+  if (!props.images[i]?.src) return;
   emit("open", i);
   if (!props.lightbox) return;
-  at.value = i;
+  at.value = ready.value.findIndex((r) => r.i === i);
   open.value = true;
 }
 
@@ -69,13 +74,15 @@ function toggle(id: string, on: boolean): void {
       <button
         type="button"
         class="wp-image-grid__open"
-        :aria-label="selectable ? `Open ${img.alt}` : img.alt"
+        :aria-label="!img.src ? `${img.alt}, still loading` : selectable ? `Open ${img.alt}` : img.alt"
+        :aria-disabled="!img.src || undefined"
+        :data-loading="!img.src || undefined"
         @click="show(i)"
       >
         <img v-if="img.thumb || img.src" class="wp-image-grid__img" :src="img.thumb || img.src" alt="" loading="lazy">
-        <span v-else class="wp-image-grid__empty" aria-hidden="true" />
+        <Skeleton v-else class="wp-image-grid__empty" shape="block" width="100%" height="100%" />
       </button>
-      <WpCheck
+      <Checkbox
         v-if="selectable"
         class="wp-image-grid__check"
         :model-value="props.selected.includes(img.id)"
@@ -107,12 +114,8 @@ function toggle(id: string, on: boolean): void {
 .wp-image-grid__open:focus-visible { outline: none; border-color: var(--wp-border-focus); box-shadow: var(--wp-focus-ring); }
 .wp-image-grid__tile[data-selected] .wp-image-grid__open { border-color: var(--wp-accent); box-shadow: 0 0 0 2px var(--wp-accent-glow); }
 .wp-image-grid__img { display: block; width: 100%; height: 100%; object-fit: cover; }
-.wp-image-grid__empty {
-  display: block; width: 100%; height: 100%;
-  background: linear-gradient(90deg, var(--wp-bg-2) 0%, var(--wp-bg-3) 50%, var(--wp-bg-2) 100%);
-  background-size: 200% 100%; animation: wp-image-grid-shimmer var(--wp-motion-shimmer) infinite;
-}
-@keyframes wp-image-grid-shimmer { to { background-position: -200% 0; } }
+.wp-image-grid__open[data-loading] { cursor: progress; }
+.wp-image-grid__empty { width: 100%; height: 100%; }
 .wp-image-grid__check { position: absolute; top: 6px; left: 6px; }
 .wp-image-grid__caption {
   overflow: hidden; color: var(--wp-text-muted); font: 400 var(--wp-text-xs)/1.3 var(--wp-font-sans);
@@ -120,6 +123,5 @@ function toggle(id: string, on: boolean): void {
 }
 @media (prefers-reduced-motion: reduce) {
   .wp-image-grid__open { transition: none; }
-  .wp-image-grid__empty { animation: none; }
 }
 </style>

package/src/Lightbox.vue

@@ -16,7 +16,8 @@
 import { computed, nextTick, ref, watch } from "vue";
 import ModalShell from "./ModalShell.vue";
 import WpImageZoom from "./WpImageZoom.vue";
-import CloseButton from "./CloseButton.vue";
+import Button from "./Button.vue";
+import Skeleton from "./Skeleton.vue";
 import { focusablesIn } from "./useDialogFocus";
 
 export interface LightboxImage { src: string; alt: string; caption?: string | undefined }
@@ -103,10 +104,12 @@ watch(() => props.open, async (v, was) => {
     >
       <div class="wp-lightbox__bar">
         <span v-if="count > 1" class="wp-lightbox__count" aria-hidden="true">{{ at + 1 }} / {{ count }}</span>
-        <CloseButton class="wp-lightbox__close" kbd="Esc" @click="close" />
+        <Button variant="ghost" icon="times" aria-label="Close" class="wp-lightbox__close" kbd="Esc" @click="close" />
       </div>
       <figure v-if="image" class="wp-lightbox__figure" :data-zoom="zoom || undefined">
-        <WpImageZoom v-if="zoom" v-model:zoom="level" class="wp-lightbox__zoom" :src="image.src" :alt="image.alt" size="md" minimap />
+        <!-- An image with no src yet (still rendering): its shape, not an empty frame. -->
+        <Skeleton v-if="!image.src" class="wp-lightbox__loading" shape="block" width="min(70vw, 640px)" height="min(60vh, 480px)" label="Still loading" />
+        <WpImageZoom v-else-if="zoom" v-model:zoom="level" class="wp-lightbox__zoom" :src="image.src" :alt="image.alt" size="md" minimap />
         <img v-else class="wp-lightbox__img" :src="image.src" :alt="image.alt">
         <figcaption v-if="image.caption" class="wp-lightbox__caption">{{ image.caption }}</figcaption>
       </figure>

package/src/LoadingMark.vue

@@ -21,8 +21,9 @@ let nextId = 0;
  * box, for a panel or page that is loading. `mono` draws it in the text
  * colour, for a host with its own colours (a busy button).
  */
-import { computed, useSlots } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useSlots } from "vue";
 import { BRAND_COLOURS, RING_A, RING_B, STAR_A, STAR_B, STAR_BIG, type LogoBrand } from "./logo-paths";
+import { BOX, PAD, animate, drawNow, type Animated, type Look } from "./loading-mark-motion";
 
 const props = withDefaults(defineProps<{
   /** Width and height in px. Default 14, or 40 with `block`. */
@@ -52,17 +53,98 @@ const VIOLET = computed(() => BRAND_COLOURS[props.brand][0]);
 const INDIGO = computed(() => BRAND_COLOURS[props.brand][1]);
 const TEAL = computed(() => BRAND_COLOURS[props.brand][2]);
 const fill = (colour: string): string => (props.mono ? "currentColor" : colour);
+
+/* The SVG is the still mark (first paint, reduced motion, a page with no
+ * canvas). Once mounted, a canvas over it draws the motion: see
+ * `loading-mark-motion.ts` for why it is not CSS. */
+const root = ref<HTMLElement | null>(null);
+const canvas = ref<HTMLCanvasElement | null>(null);
+const live = ref(false);
+const drawn = ref(false);
+const canvasStyle = computed(() => {
+  const side = (px.value * BOX) / 1024;
+  const off = (px.value * PAD) / 1024;
+  return { width: `${side}px`, height: `${side}px`, top: `${-off}px`, left: `${-off}px` };
+});
+
+let textColour = "";
+let textColourAt = -Infinity;
+function look(): Look {
+  if (props.mono) {
+    const now = performance.now();
+    if (now - textColourAt > 500 && root.value) {
+      textColour = getComputedStyle(root.value).color || "currentColor";
+      textColourAt = now;
+    }
+    return { variant: drawing.value, colours: [textColour, textColour, textColour], flat: true };
+  }
+  return { variant: drawing.value, colours: [VIOLET.value, INDIGO.value, TEAL.value], flat: false };
+}
+
+let stop: (() => void) | null = null;
+let observer: IntersectionObserver | null = null;
+let motion: MediaQueryList | null = null;
+
+async function start(): Promise<void> {
+  if (stop) return;
+  live.value = true;
+  await nextTick();
+  const el = canvas.value;
+  if (!el || !live.value) return;
+  const mark: Animated = { canvas: el, look, clock: 0, visible: true };
+  if (!drawNow(mark)) {
+    live.value = false;
+    return;
+  }
+  drawn.value = true;
+  stop = animate(mark);
+  if (typeof IntersectionObserver === "function") {
+    observer = new IntersectionObserver((entries) => {
+      for (const e of entries) mark.visible = e.isIntersecting;
+    });
+    observer.observe(el);
+  }
+}
+function halt(): void {
+  stop?.();
+  stop = null;
+  observer?.disconnect();
+  observer = null;
+  live.value = false;
+  drawn.value = false;
+}
+function onMotionChange(): void {
+  if (motion?.matches) halt();
+  else void start();
+}
+
+onMounted(() => {
+  // No matchMedia means no way to honour reduced motion, and a test DOM
+  // (jsdom) has no canvas and logs an error for every attempt: keep the
+  // still SVG in both.
+  if (typeof window.matchMedia !== "function" || typeof requestAnimationFrame !== "function") return;
+  if (navigator.userAgent.includes("jsdom")) return;
+  motion = window.matchMedia("(prefers-reduced-motion: reduce)");
+  motion.addEventListener?.("change", onMotionChange);
+  if (!motion.matches) void start();
+});
+onBeforeUnmount(() => {
+  motion?.removeEventListener?.("change", onMotionChange);
+  halt();
+});
 </script>
 
 <template>
   <span
+    ref="root"
     class="wp-lm"
-    :class="{ 'wp-lm--block': block }"
+    :class="{ 'wp-lm--block': block, 'wp-lm--drawn': drawn }"
     :role="decorative ? undefined : 'status'"
     :aria-label="decorative || slots.default ? undefined : label"
     :aria-hidden="decorative || undefined"
     data-test="loading-mark"
   >
+    <span class="wp-lm__art" :style="{ width: `${px}px`, height: `${px}px` }">
     <svg
       class="wp-lm__svg"
       :data-variant="drawing"
@@ -96,13 +178,14 @@ const fill = (colour: string): string => (props.mono ? "currentColor" : colour);
         </g>
       </g>
     </svg>
+    <canvas v-if="live" ref="canvas" class="wp-lm__canvas" :style="canvasStyle" aria-hidden="true" />
+    </span>
     <span v-if="slots.default" class="wp-lm__text"><slot /></span>
   </span>
 </template>
 
 <style scoped>
 .wp-lm {
-  --wp-lm-t: 2.4s;
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -118,57 +201,16 @@ const fill = (colour: string): string => (props.mono ? "currentColor" : colour);
   color: var(--wp-text-muted);
   text-align: center;
 }
-.wp-lm__svg { flex-shrink: 0; overflow: visible; }
-/* Every move animates a registered custom property, never `transform` or
- * `opacity` itself. A browser hands a `transform` / `opacity` animation to
- * the compositor, which lifts the path onto its own layer the moment the
- * animation starts: the layer is rasterised once, at a fixed scale, and
- * snapped to whole pixels, so the crisp mark turned soft and jumped by up to
- * half a pixel as it began to move. A custom property animates on the main
- * thread, so each frame repaints the vector paths in place, as sharp as the
- * mark at rest. The paths are tiny; the repaint costs nothing. */
-.wp-lm__ring { transform-box: view-box; transform-origin: 512px 512px; }
-.wp-lm__star { transform-box: fill-box; transform-origin: center; }
-.wp-lm__ring--a { transform: translate(var(--wp-lm-x), var(--wp-lm-x)); animation: wp-lm-split-a var(--wp-lm-t) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
-.wp-lm__ring--b { transform: translate(var(--wp-lm-x), var(--wp-lm-x)); animation: wp-lm-split-b var(--wp-lm-t) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
-.wp-lm__star--big { transform: rotate(var(--wp-lm-r)) scale(var(--wp-lm-s)); animation: wp-lm-dip var(--wp-lm-t) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
-.wp-lm__star--tw { opacity: var(--wp-lm-o); transform: scale(var(--wp-lm-s)); animation: wp-lm-twinkle var(--wp-lm-t) ease-in-out infinite; }
-.wp-lm__swap {
-  transform-box: view-box; transform-origin: 512px 512px;
-  transform: rotate(var(--wp-lm-r));
-  animation: wp-lm-swap calc(var(--wp-lm-t) * 2) cubic-bezier(0.65, 0, 0.35, 1) infinite;
-}
+.wp-lm__art { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; }
+.wp-lm__svg { display: block; overflow: visible; }
+.wp-lm__canvas { position: absolute; pointer-events: none; }
+.wp-lm--drawn .wp-lm__svg { visibility: hidden; }
 
-@property --wp-lm-x { syntax: "<length>"; inherits: false; initial-value: 0px; }
-@property --wp-lm-r { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
-@property --wp-lm-s { syntax: "<number>"; inherits: false; initial-value: 1; }
+/* Reduced motion: no canvas, the still mark breathes. A registered custom
+ * property, not `opacity` itself, so the fade stays off the compositor (a
+ * composited fade turns the mark soft). */
 @property --wp-lm-o { syntax: "<number>"; inherits: false; initial-value: 1; }
-
-@keyframes wp-lm-split-a {
-  0%, 15%, 85%, 100% { --wp-lm-x: 0px; }
-  40%, 60% { --wp-lm-x: -70px; }
-}
-@keyframes wp-lm-split-b {
-  0%, 15%, 85%, 100% { --wp-lm-x: 0px; }
-  40%, 60% { --wp-lm-x: 70px; }
-}
-@keyframes wp-lm-dip {
-  0%, 15% { --wp-lm-s: 1; --wp-lm-r: 0deg; }
-  32% { --wp-lm-s: 0.7; --wp-lm-r: 45deg; }
-  50%, 100% { --wp-lm-s: 1; --wp-lm-r: 90deg; }
-}
-@keyframes wp-lm-swap {
-  0%, 15% { --wp-lm-r: 0deg; }
-  50%, 65% { --wp-lm-r: 180deg; }
-  100% { --wp-lm-r: 360deg; }
-}
-@keyframes wp-lm-twinkle {
-  0%, 100% { --wp-lm-o: 1; --wp-lm-s: 1; }
-  50% { --wp-lm-o: 0.35; --wp-lm-s: 0.6; }
-}
-
 @media (prefers-reduced-motion: reduce) {
-  .wp-lm__svg * { animation: none !important; }
   .wp-lm__svg { opacity: var(--wp-lm-o); animation: wp-lm-fade 2.4s ease-in-out infinite; }
   @keyframes wp-lm-fade { 0%, 100% { --wp-lm-o: 1; } 50% { --wp-lm-o: 0.55; } }
 }

package/src/Modal.vue

@@ -1,36 +1,58 @@
 <script setup lang="ts">
-import CloseButton from "./CloseButton.vue";
-import { computed, ref, useId, useSlots } from "vue";
+/**
+ * Modal: the one dialog, in the manager, on the canvas and on the community
+ * site. A titled panel (header with ×, body, optional footer) on ModalShell,
+ * so it gets the shared overlay, open/close motion and the key shield that
+ * keeps typing away from ComfyUI's shortcuts; useDialogFocus adds the focus
+ * trap and focus return.
+ *
+ *   <Modal v-model:open="open" title="Rename module">…<template #footer>…</template></Modal>
+ *
+ * Escape, the × and the backdrop close it (`close-on-backdrop="false"` keeps
+ * a backdrop click from closing a form that would lose work). A custom
+ * `#header` puts `:id="titleId"` on its own heading. `keydown` gives every key
+ * pressed inside (the shield stops them before `window`), so a dialog's own
+ * keys go there, not on a window listener. ConfirmModal is built on it.
+ *
+ * The panel styles are scoped and read only shared tokens, so it wears the
+ * colours of whichever side it is on.
+ */
+import { ref, useId, useSlots } from "vue";
+import Button from "./Button.vue";
+import ModalShell from "./ModalShell.vue";
 import { useDialogFocus } from "./useDialogFocus";
 
-interface Props {
+const props = withDefaults(defineProps<{
   open: boolean;
   title?: string | undefined;
   size?: "sm" | "md" | "lg" | undefined;
   closeOnBackdrop?: boolean | undefined;
-}
-const props = withDefaults(defineProps<Props>(), { size: "md", closeOnBackdrop: true });
+}>(), { size: "md", closeOnBackdrop: true, title: undefined });
 
 const emit = defineEmits<{
   (e: "update:open", v: boolean): void;
+  /** Every keydown inside the dialog. */
+  (e: "keydown", ev: KeyboardEvent): void;
 }>();
 
 const slots = useSlots();
-
-const modalClasses = computed(() => ["wp-modal", `wp-modal--${props.size}`]);
 const dialog = ref<HTMLElement | null>(null);
 const titleId = `wp-modal-title-${useId()}`;
 
-function close() {
+function close(): void {
   emit("update:open", false);
 }
 
-function onBackdrop() {
-  if (props.closeOnBackdrop) close();
+function onShellClose(reason: "escape" | "backdrop"): void {
+  if (reason === "backdrop" && !props.closeOnBackdrop) return;
+  close();
 }
 
-useDialogFocus(dialog, () => props.open, {
-  onEscape: close,
+const focus = useDialogFocus(dialog, () => props.open, {
+  // ModalShell closes on Escape; the shield stops keys before window, so the
+  // trap runs from the shell's keydown (below), not a window listener.
+  onEscape: () => undefined,
+  window: false,
   // The first control in the body, else the dialog itself (the close button
   // would make Enter close it).
   initial: (root, els) => {
@@ -38,41 +60,84 @@ useDialogFocus(dialog, () => props.open, {
     return els.find((el) => body?.contains(el)) ?? root;
   },
 });
+
+function onKeydown(ev: KeyboardEvent): void {
+  focus.onKeydown(ev);
+  emit("keydown", ev);
+}
 </script>
 
 <template>
-  <Teleport to="body">
-    <!-- The backdrop is a click target only; keyboard users close with Escape. -->
-    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
-    <div
-      v-if="open"
-      class="wp-modal__backdrop"
-      data-test="modal-backdrop"
-      @mousedown.self="onBackdrop"
-    >
-      <div
-        ref="dialog"
-        :class="modalClasses"
-        role="dialog"
-        aria-modal="true"
-        :aria-labelledby="title || slots.header ? titleId : undefined"
-        tabindex="-1"
-        @mousedown.stop
-      >
-        <header v-if="title || slots.header" class="wp-modal__head">
-          <h3 v-if="title" :id="titleId" class="wp-modal__title">{{ title }}</h3>
-          <!-- A custom header puts :id="titleId" on its own heading. -->
-          <slot name="header" :title-id="titleId" />
-          <span class="wp-spacer" />
-          <CloseButton kbd="Esc" @click="close" />
-        </header>
-        <div class="wp-modal__body">
-          <slot />
-        </div>
-        <footer v-if="slots.footer" class="wp-modal__foot">
-          <slot name="footer" />
-        </footer>
+  <ModalShell
+    :visible="open"
+    :labelledby="title || slots.header ? titleId : undefined"
+    @close="onShellClose"
+    @keydown="onKeydown"
+  >
+    <div ref="dialog" class="wp-modal" :class="`wp-modal--${size}`" tabindex="-1" data-test="modal">
+      <header v-if="title || slots.header" class="wp-modal__head">
+        <h3 v-if="title" :id="titleId" class="wp-modal__title">{{ title }}</h3>
+        <slot name="header" :title-id="titleId" />
+        <span class="wp-modal__spacer" />
+        <Button variant="ghost" icon="times" aria-label="Close" kbd="Esc" data-test="modal-close" @click="close" />
+      </header>
+      <div class="wp-modal__body">
+        <slot />
       </div>
+      <footer v-if="slots.footer" class="wp-modal__foot">
+        <slot name="footer" />
+      </footer>
     </div>
-  </Teleport>
+  </ModalShell>
 </template>
+
+<style scoped>
+.wp-modal {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 560px;
+  max-height: calc(100vh - 48px);
+  overflow: hidden;
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border);
+  border-radius: var(--wp-radius-lg);
+  box-shadow: var(--wp-shadow-xl);
+  color: var(--wp-text);
+  font-family: var(--wp-font-sans);
+  font-size: var(--wp-text-base);
+}
+/* The dialog takes focus only when nothing in it can. */
+.wp-modal:focus { outline: none; }
+.wp-modal--sm { max-width: 380px; }
+.wp-modal--md { max-width: 560px; }
+.wp-modal--lg { max-width: 880px; }
+.wp-modal__head {
+  display: flex;
+  align-items: center;
+  gap: var(--wp-space-4);
+  padding: var(--wp-space-4) var(--wp-space-5);
+  border-bottom: 1px solid var(--wp-border);
+  background: var(--wp-bg);
+}
+.wp-modal__title { flex: 1; margin: 0; font-size: var(--wp-text-md); font-weight: 600; color: var(--wp-text); }
+.wp-modal__spacer { flex: 1; }
+.wp-modal__title + .wp-modal__spacer { display: none; }
+.wp-modal__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--wp-space-5);
+}
+.wp-modal__foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--wp-space-3);
+  padding: var(--wp-space-4) var(--wp-space-5);
+  border-top: 1px solid var(--wp-border);
+  background: var(--wp-bg);
+}
+@media (max-width: 640px) {
+  .wp-modal__head, .wp-modal__body, .wp-modal__foot { padding-left: var(--wp-space-5); padding-right: var(--wp-space-5); }
+}
+</style>

package/src/ModalShell.vue

@@ -3,14 +3,21 @@
     <Transition name="wp-modal" appear>
       <!-- The overlay is a click target only; keyboard users close with Escape. -->
       <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
-      <div v-if="visible" ref="overlayEl" class="wp-modal-overlay" @click="$emit('close')">
+      <div
+        v-if="visible"
+        ref="overlayEl"
+        class="wp-modal-overlay"
+        data-test="modal-backdrop"
+        @mousedown="downOnBackdrop = isBackdrop($event)"
+        @click="onBackdropClick"
+      >
         <div
+          ref="wrapperEl"
           class="wp-modal-wrapper"
           role="dialog"
           aria-modal="true"
           :aria-label="label"
           :aria-labelledby="labelledby"
-          @click.stop
         >
           <slot></slot>
         </div>
@@ -31,7 +38,8 @@ const props = defineProps<{
   labelledby?: string | undefined;
 }>();
 const emit = defineEmits<{
-  (e: "close"): void;
+  /** `escape` or `backdrop`, so a dialog can ignore backdrop clicks. */
+  (e: "close", reason: "escape" | "backdrop"): void;
   /** Every keydown inside the modal. Consumers MUST use this instead of a
    *  window listener: the shield stops inside-modal keys at the overlay, so a
    *  window listener would never see them. */
@@ -39,11 +47,24 @@ const emit = defineEmits<{
 }>();
 
 const overlayEl = ref<HTMLElement | null>(null);
+const wrapperEl = ref<HTMLElement | null>(null);
+
+/** The overlay or the wrapper around the panel, never the panel's own content. */
+function isBackdrop(ev: MouseEvent): boolean {
+  return ev.target === overlayEl.value || ev.target === wrapperEl.value;
+}
+/** Only a press that also STARTED on the backdrop closes: a text selection
+ *  dragged out of the dialog ends with a click on the overlay. */
+const downOnBackdrop = ref(false);
+function onBackdropClick(ev: MouseEvent): void {
+  if (downOnBackdrop.value && isBackdrop(ev)) emit("close", "backdrop");
+  downOnBackdrop.value = false;
+}
 
 function closeOnEscape(event: KeyboardEvent): void {
   if (!props.visible || event.key !== "Escape") return;
   event.preventDefault();
-  emit("close");
+  emit("close", "escape");
 }
 
 // Keys pressed INSIDE the modal are handled here and stop at the overlay, so
@@ -104,6 +125,6 @@ onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
 
 /* `wp-modal` open/close transition lives in
  * src/components/shared/_modal-motion.css (imported globally via
- * ContextWidget) so every modal — ModalShell consumers, ConfirmDialog,
+ * ContextWidget) so every modal — ModalShell consumers (Modal, ConfirmModal),
  * InjectorBindingModal — animates with the same rules. */
 </style>

package/src/Pagination.vue

@@ -13,7 +13,7 @@
  */
 import { computed } from "vue";
 import { pageItems } from "./pagination";
-import WpButton from "./WpButton.vue";
+import Button from "./Button.vue";
 
 const props = withDefaults(defineProps<{
   /** pages: numbered pages. more: a Load more button. */
@@ -54,7 +54,7 @@ const btnSize = computed(() => (props.size === "sm" ? "sm" : "md"));
     <span class="wp-paging__range" aria-live="polite">{{ from }}–{{ to }} of {{ total }}</span>
     <ul class="wp-paging__list">
       <li>
-        <WpButton variant="ghost" :size="btnSize" icon="pi-chevron-left" aria-label="Previous page" :disabled="disabled || props.page <= 1" @click="go(props.page - 1)" />
+        <Button variant="ghost" :size="btnSize" icon="pi-chevron-left" aria-label="Previous page" :disabled="disabled || props.page <= 1" @click="go(props.page - 1)" />
       </li>
       <li v-for="it in items" :key="it">
         <span v-if="typeof it !== 'number'" class="wp-paging__gap" aria-hidden="true">…</span>
@@ -70,13 +70,13 @@ const btnSize = computed(() => (props.size === "sm" ? "sm" : "md"));
         >{{ it }}</button>
       </li>
       <li>
-        <WpButton variant="ghost" :size="btnSize" icon="pi-chevron-right" aria-label="Next page" :disabled="disabled || props.page >= pages" @click="go(props.page + 1)" />
+        <Button variant="ghost" :size="btnSize" icon="pi-chevron-right" aria-label="Next page" :disabled="disabled || props.page >= pages" @click="go(props.page + 1)" />
       </li>
     </ul>
   </nav>
   <div v-else-if="mode === 'more' && total > 0" class="wp-paging wp-paging--more" :data-size="size">
     <span class="wp-paging__range" aria-live="polite">Showing {{ Math.min(props.shown, total) }} of {{ total }}{{ noun ? ` ${noun}` : "" }}</span>
-    <WpButton v-if="props.shown < total" variant="secondary" :size="btnSize" :loading="loading" :disabled="disabled" @click="emit('more')">Load more</WpButton>
+    <Button v-if="props.shown < total" variant="secondary" :size="btnSize" :loading="loading" :disabled="disabled" @click="emit('more')">Load more</Button>
   </div>
 </template>