@dumiflex/wp-kit 0.0.0-stage → 0.4.0

package/src/ImageGrid.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+/**
+ * A grid of image tiles that fills its width (tiles at least `min-size`
+ * wide). A click or Enter opens the image in a Lightbox, where ← / → step
+ * through the rest. With `selectable` each tile gets a check box in its
+ * corner and `v-model:selected` holds the picked ids.
+ *
+ *   <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.
+ */
+import { computed, ref } from "vue";
+import Lightbox from "./Lightbox.vue";
+import WpCheck from "./WpCheck.vue";
+
+export interface GridImage { id: string; src: string; alt: string; thumb?: string; caption?: string }
+
+const props = withDefaults(defineProps<{
+  images: GridImage[];
+  /** Smallest tile width in px. */
+  minSize?: number | undefined;
+  /** Width / height of a tile. */
+  aspect?: number | undefined;
+  gap?: "sm" | "md" | undefined;
+  selectable?: boolean | undefined;
+  selected?: string[] | undefined;
+  /** Open the Lightbox on a click (off: emit `open` and do your own thing). */
+  lightbox?: boolean | undefined;
+  ariaLabel?: string | undefined;
+}>(), { minSize: 120, aspect: 1, gap: "md", selectable: false, selected: () => [], lightbox: true, ariaLabel: "Images" });
+
+const emit = defineEmits<{
+  (e: "update:selected", v: string[]): void;
+  (e: "open", index: number): void;
+}>();
+
+const open = ref(false);
+const at = ref(0);
+const shots = computed(() => props.images.map((i) => ({ src: i.src, alt: i.alt, caption: i.caption })));
+
+function show(i: number): void {
+  emit("open", i);
+  if (!props.lightbox) return;
+  at.value = i;
+  open.value = true;
+}
+
+function toggle(id: string, on: boolean): void {
+  emit("update:selected", on ? [...props.selected, id] : props.selected.filter((x) => x !== id));
+}
+</script>
+
+<template>
+  <div class="wp-image-grid">
+  <ul
+    class="wp-image-grid__list"
+    :data-gap="gap"
+    :aria-label="ariaLabel"
+    :style="{ '--_min': `${minSize}px`, '--_aspect': String(aspect) }"
+  >
+    <li
+      v-for="(img, i) in images"
+      :key="img.id"
+      class="wp-image-grid__tile"
+      :data-selected="(selectable && props.selected.includes(img.id)) || undefined"
+    >
+      <button
+        type="button"
+        class="wp-image-grid__open"
+        :aria-label="selectable ? `Open ${img.alt}` : img.alt"
+        @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" />
+      </button>
+      <WpCheck
+        v-if="selectable"
+        class="wp-image-grid__check"
+        :model-value="props.selected.includes(img.id)"
+        :aria-label="`Select ${img.alt}`"
+        @update:model-value="toggle(img.id, $event)"
+      />
+      <span v-if="img.caption" class="wp-image-grid__caption">{{ img.caption }}</span>
+    </li>
+  </ul>
+  <Lightbox v-if="lightbox" v-model:open="open" v-model:index="at" :images="shots" />
+  </div>
+</template>
+
+<style scoped>
+.wp-image-grid { min-width: 0; }
+.wp-image-grid__list {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--_min), 1fr));
+  gap: var(--wp-space-3); margin: 0; padding: 0; list-style: none;
+}
+.wp-image-grid__list[data-gap="sm"] { gap: var(--wp-space-1); }
+.wp-image-grid__tile { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.wp-image-grid__open {
+  display: block; width: 100%; aspect-ratio: var(--_aspect); padding: 0; overflow: hidden;
+  border: 1px solid var(--wp-border); border-radius: var(--wp-radius);
+  background: var(--wp-bg-2); cursor: zoom-in;
+  transition: border-color var(--wp-motion-hover), box-shadow var(--wp-motion-hover);
+}
+.wp-image-grid__open:hover { border-color: var(--wp-border-strong); }
+.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__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);
+  text-overflow: ellipsis; white-space: nowrap;
+}
+@media (prefers-reduced-motion: reduce) {
+  .wp-image-grid__open { transition: none; }
+  .wp-image-grid__empty { animation: none; }
+}
+</style>

package/src/InlineEdit.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+/**
+ * Inline edit: a name that turns into a text box where it stands. Click it
+ * (or focus it and press Enter or F2), type, then Enter or a click away
+ * saves and Escape puts the old text back. Works on the canvas and in the
+ * manager.
+ *
+ *   <InlineEdit v-model="mod.name" label="Wildcard name" />
+ *   <InlineEdit v-model="title" label="Chat title" :validate="(v) => taken(v) ? 'That name is taken' : null" />
+ *
+ * Read view is a button named "Rename <label>: <value>", with a pencil on
+ * hover and focus. An empty or invalid value keeps the box open with the
+ * message under it; `update:modelValue` only fires on a saved change.
+ */
+import { computed, nextTick, ref, useId } from "vue";
+
+const props = withDefaults(defineProps<{
+  modelValue: string;
+  /** What is being renamed, e.g. "Wildcard name". */
+  label: string;
+  placeholder?: string | undefined;
+  /** Return a message to refuse the value, or null to take it. */
+  validate?: ((v: string) => string | null) | undefined;
+  /** Refuse an empty value. On by default. */
+  required?: boolean | undefined;
+  disabled?: boolean | undefined;
+  size?: "sm" | "md" | "lg" | undefined;
+  /** Trim spaces from both ends before saving. */
+  trim?: boolean | undefined;
+  maxlength?: number | undefined;
+}>(), { placeholder: "Untitled", required: true, size: "md", trim: true, maxlength: undefined });
+
+const emit = defineEmits<{
+  (e: "update:modelValue", v: string): void;
+  (e: "edit"): void;
+  (e: "cancel"): void;
+}>();
+
+const editing = ref(false);
+const draft = ref("");
+const error = ref<string | null>(null);
+const inputEl = ref<HTMLInputElement | null>(null);
+const readEl = ref<HTMLButtonElement | null>(null);
+const errId = `wp-inline-edit-${useId()}`;
+
+const shown = computed(() => props.modelValue || props.placeholder);
+
+async function open(): Promise<void> {
+  if (props.disabled || editing.value) return;
+  draft.value = props.modelValue;
+  error.value = null;
+  editing.value = true;
+  emit("edit");
+  await nextTick();
+  inputEl.value?.focus();
+  inputEl.value?.select();
+}
+
+function check(v: string): string | null {
+  if (props.required && !v) return `${props.label} can't be empty`;
+  return props.validate?.(v) ?? null;
+}
+
+async function close(): Promise<void> {
+  editing.value = false;
+  error.value = null;
+  await nextTick();
+  readEl.value?.focus();
+}
+
+function save(refocus = true): void {
+  if (!editing.value) return;
+  const v = props.trim ? draft.value.trim() : draft.value;
+  const msg = check(v);
+  if (msg) {
+    error.value = msg;
+    return;
+  }
+  if (v !== props.modelValue) emit("update:modelValue", v);
+  if (refocus) void close();
+  else { editing.value = false; error.value = null; }
+}
+
+function cancel(): void {
+  if (!editing.value) return;
+  emit("cancel");
+  void close();
+}
+
+function onBlur(): void {
+  // A click away saves; a value that can't be saved is put back instead of
+  // leaving a box open that nobody is looking at.
+  if (!editing.value) return;
+  const v = props.trim ? draft.value.trim() : draft.value;
+  if (check(v)) { editing.value = false; error.value = null; emit("cancel"); return; }
+  save(false);
+}
+
+function onKeydown(ev: KeyboardEvent): void {
+  if (ev.key === "Enter") { ev.preventDefault(); save(); }
+  else if (ev.key === "Escape") { ev.preventDefault(); ev.stopPropagation(); cancel(); }
+}
+
+function onReadKey(ev: KeyboardEvent): void {
+  if (ev.key === "F2") { ev.preventDefault(); void open(); }
+}
+</script>
+
+<template>
+  <span class="wp-inline-edit" :data-size="size" :data-editing="editing || undefined">
+    <template v-if="editing">
+      <input
+        ref="inputEl"
+        v-model="draft"
+        class="wp-inline-edit__input"
+        type="text"
+        :aria-label="label"
+        :aria-invalid="error ? 'true' : undefined"
+        :aria-describedby="error ? errId : undefined"
+        :placeholder="placeholder"
+        :maxlength="maxlength"
+        @keydown="onKeydown"
+        @blur="onBlur"
+      >
+      <span v-if="error" :id="errId" class="wp-inline-edit__error" role="alert">{{ error }}</span>
+    </template>
+    <button
+      v-else
+      ref="readEl"
+      type="button"
+      class="wp-inline-edit__read"
+      :data-empty="!modelValue || undefined"
+      :aria-label="`Rename ${label}: ${modelValue || placeholder}`"
+      :disabled="disabled"
+      @click="open"
+      @keydown="onReadKey"
+    >
+      <span class="wp-inline-edit__text">{{ shown }}</span>
+      <i class="pi pi-pencil wp-inline-edit__pen" aria-hidden="true" />
+    </button>
+  </span>
+</template>
+
+<style scoped>
+.wp-inline-edit {
+  --_h: var(--wp-control-h-md);
+  position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%;
+  /* The padding of the hover box sits outside the text's line. */
+  margin-left: calc(var(--wp-space-3) * -1);
+  font: inherit; vertical-align: middle;
+}
+.wp-inline-edit[data-size="sm"] { --_h: var(--wp-control-h-sm); }
+.wp-inline-edit[data-size="lg"] { --_h: var(--wp-control-h-lg); }
+.wp-inline-edit__read, .wp-inline-edit__input {
+  box-sizing: border-box; height: var(--_h); margin: 0; min-width: 0;
+  padding: 0 var(--wp-space-3); border-radius: var(--wp-radius-sm);
+  font: inherit; color: var(--wp-text);
+}
+.wp-inline-edit__read {
+  display: inline-flex; align-items: center; gap: var(--wp-space-3); max-width: 100%;
+  border: 1px solid transparent; background: transparent; cursor: text; text-align: left;
+  transition: background var(--wp-motion-hover), border-color var(--wp-motion-hover);
+}
+.wp-inline-edit__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wp-inline-edit__read[data-empty] .wp-inline-edit__text { color: var(--wp-text-dim); font-style: italic; }
+.wp-inline-edit__pen { flex: none; font-size: 0.8em; color: var(--wp-text-dim); opacity: 0; transition: opacity var(--wp-motion-hover); }
+.wp-inline-edit__read:hover:not(:disabled) { background: var(--wp-row-hover); border-color: var(--wp-border-soft); }
+.wp-inline-edit__read:hover .wp-inline-edit__pen, .wp-inline-edit__read:focus-visible .wp-inline-edit__pen { opacity: 1; }
+.wp-inline-edit__read:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-inline-edit__read:disabled { cursor: default; }
+.wp-inline-edit__input {
+  width: 100%; min-width: 12ch;
+  border: 1px solid var(--wp-border-focus); background: var(--wp-bg-1); outline: none;
+  box-shadow: var(--wp-focus-ring);
+}
+.wp-inline-edit__input[aria-invalid="true"] { border-color: var(--wp-error-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp-danger) 22%, transparent); }
+.wp-inline-edit__error {
+  margin-top: 2px; color: var(--wp-error-text); font: 400 var(--wp-text-xs)/1.3 var(--wp-font-sans);
+}
+@media (prefers-reduced-motion: reduce) {
+  .wp-inline-edit__read, .wp-inline-edit__pen { transition: none; }
+}
+</style>

package/src/Input.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+/**
+ * Text field. Number fields use WpNumber (`WpNumber.vue`)
+ * and search boxes use SearchInput; this one no longer has a number mode.
+ */
+import { computed } from "vue";
+import Icon from "./Icon.vue";
+
+interface Props {
+  modelValue: string;
+  type?: "text" | "email" | "url" | "password" | "tel" | undefined;
+  placeholder?: string | undefined;
+  disabled?: boolean | undefined;
+  /** Shown but not editable: dimmer fill, no focus ring, a lock icon. */
+  readonly?: boolean | undefined;
+  error?: boolean | undefined;
+  /** Height on the control scale: sm 24 / md 32 / lg 40. */
+  size?: "sm" | "md" | "lg" | undefined;
+  /** Icon before the text (a search glass). Drawn inline, no box. */
+  icon?: string | undefined;
+  /** Text before the value, e.g. `$` for a variable name. */
+  prefix?: string | undefined;
+  /** Text after the value, e.g. a unit. */
+  suffix?: string | undefined;
+  id?: string | undefined;
+  ariaLabel?: string | undefined;
+}
+const props = withDefaults(defineProps<Props>(), {
+  type: "text",
+  size: "md",
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", v: string): void;
+  (e: "blur", evt: FocusEvent): void;
+  (e: "focus", evt: FocusEvent): void;
+}>();
+
+const inputClasses = computed(() => [
+  "wp-input",
+  props.size === "sm" && "wp-input--sm",
+  props.size === "lg" && "wp-input--lg",
+]);
+
+const wrapped = computed(() => Boolean(props.icon || props.prefix || props.suffix || props.readonly));
+const groupClasses = computed(() => [
+  "wp-input-group",
+  props.size === "sm" && "wp-input-group--sm",
+  props.size === "lg" && "wp-input-group--lg",
+  props.readonly && "wp-input-group--readonly",
+  props.disabled && "wp-input-group--disabled",
+]);
+
+function onInput(e: Event) {
+  emit("update:modelValue", (e.target as HTMLInputElement).value);
+}
+</script>
+
+<template>
+  <div v-if="wrapped" :class="groupClasses" :aria-invalid="error || undefined">
+    <span v-if="icon" class="wp-input-group__icon" aria-hidden="true">
+      <Icon :name="icon" />
+    </span>
+    <span v-if="prefix" class="wp-input-group__affix wp-input-group__affix--prefix" aria-hidden="true">{{ prefix }}</span>
+    <input
+      :id="id"
+      :class="inputClasses"
+      :type="type"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :aria-label="ariaLabel"
+      :aria-invalid="error || undefined"
+      @input="onInput"
+      @blur="(e) => emit('blur', e)"
+      @focus="(e) => emit('focus', e)"
+    />
+    <span v-if="suffix" class="wp-input-group__affix wp-input-group__affix--suffix" aria-hidden="true">{{ suffix }}</span>
+    <span v-if="readonly" class="wp-input-group__lock" aria-hidden="true">
+      <Icon name="pi-lock" :size="11" />
+    </span>
+  </div>
+  <input
+    v-else
+    :id="id"
+    :class="inputClasses"
+    :type="type"
+    :value="modelValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :readonly="readonly"
+    :aria-label="ariaLabel"
+    :aria-invalid="error || undefined"
+    @input="onInput"
+    @blur="(e) => emit('blur', e)"
+    @focus="(e) => emit('focus', e)"
+  />
+</template>

package/src/Kbd.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+/**
+ * Kbd: a keyboard shortcut drawn as keys. `Mod` reads ⌘ on a Mac and Ctrl
+ * elsewhere (from `platform-keys.ts`), so one string fits everyone. Works on
+ * the canvas and in the manager.
+ *
+ *   <Kbd keys="Mod+K" />
+ *   <Kbd :keys="['Shift', 'Enter']" />
+ *
+ * Screen readers hear the whole chord once ("Control plus K"); the key caps
+ * themselves are hidden from them.
+ */
+import { computed } from "vue";
+import { isApplePlatform } from "./platform-keys";
+
+const props = withDefaults(defineProps<{
+  /** "Mod+Shift+P" or ["Mod", "Shift", "P"]. */
+  keys: string | string[];
+  size?: "sm" | "md" | undefined;
+}>(), { size: "md" });
+
+const MAC: Record<string, string> = { Mod: "⌘", Ctrl: "⌃", Alt: "⌥", Shift: "⇧", Enter: "↵" };
+const SPOKEN: Record<string, string> = {
+  "⌘": "Command", Ctrl: "Control", "⌃": "Control", Alt: "Alt", "⌥": "Option", Shift: "Shift", "⇧": "Shift",
+  Enter: "Enter", "↵": "Enter", Esc: "Escape", "↑": "Up", "↓": "Down", "←": "Left", "→": "Right",
+};
+
+const caps = computed(() => {
+  const list = Array.isArray(props.keys) ? props.keys : props.keys.split(/\+(?!$)/);
+  const mac = isApplePlatform();
+  return list.map((k) => k.trim()).filter(Boolean).map((k) => (k === "Mod" ? (mac ? "⌘" : "Ctrl") : mac ? MAC[k] ?? k : k));
+});
+const spoken = computed(() => caps.value.map((k) => SPOKEN[k] ?? k).join(" plus "));
+</script>
+
+<template>
+  <kbd class="wp-kbd-keys" :data-size="size" :aria-label="spoken">
+    <template v-for="(k, i) in caps" :key="i">
+      <span v-if="i > 0" class="wp-kbd-keys__plus" aria-hidden="true">+</span>
+      <kbd class="wp-kbd-keys__cap" aria-hidden="true">{{ k }}</kbd>
+    </template>
+  </kbd>
+</template>
+
+<style scoped>
+.wp-kbd-keys { display: inline-flex; align-items: center; gap: 2px; font: inherit; vertical-align: baseline; }
+.wp-kbd-keys__plus { color: var(--wp-text-dim); font-size: var(--wp-text-xs); }
+.wp-kbd-keys__cap {
+  display: inline-grid; place-items: center; box-sizing: border-box;
+  min-width: 20px; height: 20px; padding: 0 5px;
+  border: 1px solid var(--wp-border-strong); border-bottom-width: 2px; border-radius: var(--wp-radius-sm);
+  background: var(--wp-bg-2); color: var(--wp-text-muted);
+  font: 500 11px/1 var(--wp-font-mono); white-space: nowrap;
+}
+.wp-kbd-keys[data-size="sm"] .wp-kbd-keys__cap { min-width: 16px; height: 16px; padding: 0 3px; font-size: 10px; }
+</style>

package/src/Lightbox.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+/**
+ * One image at a time, full screen, over a dimmed page: ← / → (or the side
+ * buttons) step through the list, Escape or the ✕ closes, and focus goes
+ * back to what opened it. Built on ModalShell, so keys pressed inside never
+ * reach ComfyUI's shortcuts. ImageGrid opens it for you; use it alone for
+ * a single image (a docs screenshot, a preview).
+ *
+ *   <Lightbox v-model:open="open" v-model:index="at" :images="shots" />
+ *   <Lightbox v-model:open="open" :images="frames" zoom />
+ *
+ * `zoom` shows each picture in WpImageZoom (Fit / 100% / 200%, wheel, drag,
+ * + − 0 1 2 keys); the level and the spot carry over as you step, so you
+ * can compare the same part of every frame.
+ */
+import { computed, nextTick, ref, watch } from "vue";
+import ModalShell from "./ModalShell.vue";
+import WpImageZoom from "./WpImageZoom.vue";
+import CloseButton from "./CloseButton.vue";
+import { focusablesIn } from "./useDialogFocus";
+
+export interface LightboxImage { src: string; alt: string; caption?: string | undefined }
+
+const props = withDefaults(defineProps<{
+  open: boolean;
+  images: LightboxImage[];
+  index?: number | undefined;
+  /** Go round from the last image to the first. */
+  loop?: boolean | undefined;
+  /** Real zoom levels (WpImageZoom) instead of a picture fitted to the screen. */
+  zoom?: boolean | undefined;
+}>(), { index: 0, loop: false, zoom: false });
+
+/** The zoom level, kept across images while the viewer is open. */
+const level = ref<number | null>(null);
+
+const emit = defineEmits<{
+  (e: "update:open", v: boolean): void;
+  (e: "update:index", v: number): void;
+}>();
+
+const panelEl = ref<HTMLElement | null>(null);
+let returnTo: HTMLElement | null = null;
+
+const count = computed(() => props.images.length);
+const at = computed(() => Math.min(Math.max(props.index, 0), Math.max(count.value - 1, 0)));
+const image = computed(() => props.images[at.value]);
+const canPrev = computed(() => count.value > 1 && (props.loop || at.value > 0));
+const canNext = computed(() => count.value > 1 && (props.loop || at.value < count.value - 1));
+
+function go(dir: 1 | -1): void {
+  if (dir < 0 ? !canPrev.value : !canNext.value) return;
+  emit("update:index", (at.value + dir + count.value) % count.value);
+}
+
+function close(): void {
+  emit("update:open", false);
+}
+
+function onKey(ev: KeyboardEvent): void {
+  if (ev.key === "ArrowLeft") { ev.preventDefault(); go(-1); }
+  else if (ev.key === "ArrowRight") { ev.preventDefault(); go(1); }
+  else if (ev.key === "Home" && count.value) { ev.preventDefault(); emit("update:index", 0); }
+  else if (ev.key === "End" && count.value) { ev.preventDefault(); emit("update:index", count.value - 1); }
+  else if (ev.key === "Tab") {
+    // Keep Tab inside: ModalShell stops the keys at its overlay, so this is the trap.
+    const els = focusablesIn(panelEl.value);
+    if (!els.length) return;
+    const first = els[0];
+    const last = els[els.length - 1];
+    if (ev.shiftKey && document.activeElement === first) { ev.preventDefault(); last.focus(); }
+    else if (!ev.shiftKey && document.activeElement === last) { ev.preventDefault(); first.focus(); }
+  }
+}
+
+watch(() => props.open, async (v, was) => {
+  if (typeof document === "undefined") return;
+  if (v) {
+    level.value = null;
+    returnTo = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    await nextTick();
+    panelEl.value?.focus();
+  } else if (was) {
+    const el = returnTo;
+    returnTo = null;
+    if (el?.isConnected) el.focus();
+  }
+}, { immediate: true });
+</script>
+
+<template>
+  <ModalShell :visible="open" @close="close" @keydown="onKey">
+    <!-- A click on the dark area closes, like the modal's own backdrop; Escape is the keyboard way. -->
+    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
+    <div
+      ref="panelEl"
+      class="wp-lightbox"
+      tabindex="-1"
+      role="group"
+      aria-roledescription="image viewer"
+      :aria-label="image ? `${image.alt}, ${at + 1} of ${count}` : 'Image viewer'"
+      @click.self="close"
+    >
+      <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" />
+      </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 />
+        <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>
+      <button
+        v-if="count > 1"
+        type="button"
+        class="wp-lightbox__step"
+        data-dir="prev"
+        aria-label="Previous image"
+        :disabled="!canPrev"
+        @click="go(-1)"
+      ><i class="pi pi-chevron-left" aria-hidden="true" /></button>
+      <button
+        v-if="count > 1"
+        type="button"
+        class="wp-lightbox__step"
+        data-dir="next"
+        aria-label="Next image"
+        :disabled="!canNext"
+        @click="go(1)"
+      ><i class="pi pi-chevron-right" aria-hidden="true" /></button>
+    </div>
+  </ModalShell>
+</template>
+
+<style scoped>
+.wp-lightbox {
+  position: relative; display: flex; flex-direction: column; align-items: center;
+  width: min(1200px, 100%); max-height: calc(100vh - 40px); outline: none;
+  color: var(--wp-text); font-family: var(--wp-font-sans);
+}
+/* Its own near-black scrim in both themes: the shared modal one is light enough to read a dialog
+   over (and pale grey in light mode), too light to look at a picture on. A click on it closes. */
+.wp-lightbox::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgb(0 0 0 / 0.86); }
+.wp-lightbox__bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--wp-space-3); align-self: stretch; padding-bottom: var(--wp-space-2); }
+.wp-lightbox__count { color: rgb(255 255 255 / 0.75); font-size: var(--wp-text-sm); font-variant-numeric: tabular-nums; }
+.wp-lightbox .wp-lightbox__close { color: rgb(255 255 255 / 0.85); }
+.wp-lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: var(--wp-space-2); min-height: 0; margin: 0; }
+.wp-lightbox__figure[data-zoom] { align-self: stretch; }
+.wp-lightbox__zoom {
+  width: 100%; height: calc(100vh - 140px);
+  border-radius: var(--wp-radius); overflow: hidden; background: var(--wp-bg-1); box-shadow: var(--wp-shadow-lg);
+}
+.wp-lightbox__img {
+  display: block; max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain;
+  border-radius: var(--wp-radius); box-shadow: var(--wp-shadow-lg); background: var(--wp-bg-1);
+}
+.wp-lightbox__caption { color: rgb(255 255 255 / 0.8); font-size: var(--wp-text-sm); text-align: center; }
+.wp-lightbox__step {
+  position: absolute; top: 50%; transform: translateY(-50%);
+  display: grid; place-items: center; width: var(--wp-control-h-lg); height: var(--wp-control-h-lg);
+  border: 1px solid var(--wp-border-strong); border-radius: min(50%, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg-2); color: var(--wp-text); cursor: pointer; box-shadow: var(--wp-shadow-md);
+  transition: background var(--wp-motion-hover);
+}
+.wp-lightbox__step[data-dir="prev"] { left: var(--wp-space-2); }
+.wp-lightbox__step[data-dir="next"] { right: var(--wp-space-2); }
+.wp-lightbox__step:hover:not(:disabled) { background: var(--wp-bg-3); }
+.wp-lightbox__step:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); border-color: var(--wp-border-focus); }
+.wp-lightbox__step:disabled { opacity: 0.35; cursor: not-allowed; }
+@media (prefers-reduced-motion: reduce) {
+  .wp-lightbox__step { transition: none; }
+}
+</style>