@dumiflex/wp-kit 0.3.0 → 0.4.0

package/src/ContextMenu.vue

@@ -1,379 +1,386 @@
-<script setup lang="ts">
-import { onBeforeUnmount, ref, watch, nextTick } from "vue";
-import { placeFloating, viewportSize, type Placement } from "./floating";
-
-export interface ContextMenuItem {
-  label: string;
-  /** PrimeIcons class (e.g. "pi-trash"). ComfyUI loads PrimeIcons globally. */
-  icon?: string | undefined;
-  /** Optional separator above the item. */
-  divider?: boolean | undefined;
-  /** Render the label in red (destructive action). */
-  danger?: boolean | undefined;
-  /** Render the label in accent color to draw attention. Used for
-   *  recommended next actions in a contextual state (e.g. "Push to
-   *  library" when the row's library entry has been deleted upstream).
-   *  Lower-key than `danger`; signals "this is what you probably want"
-   *  not "be careful with this". */
-  accent?: boolean | undefined;
-  disabled?: boolean | undefined;
-  /** Optional dim secondary line under the label. Useful for
-   *  explaining non-obvious actions like "Pull current library
-   *  version" or "Restore frozen state from bundle". When provided,
-   *  the row becomes two-line and uses more vertical space. */
-  subtitle?: string | undefined;
-  /** A checkable item (menuitemcheckbox): a tick shows when true. Leave it
-   *  out for a plain action. */
-  checked?: boolean | undefined;
-  /** Keep the menu open after this item is picked, so several checkable
-   *  items can be ticked in a row (a tag picker). */
-  keepOpen?: boolean | undefined;
-  onSelect: () => void;
-}
-
-/** Section labels group related items inside a single menu. Renders
- *  as an uppercase, dim, non-interactive separator above the items
- *  that follow. Distinguished from `ContextMenuItem` at type level
- *  by the absence of `onSelect`. */
-export interface ContextMenuSection {
-  section: string;
-}
-
-/** Optional header rendered at the top of the menu — kind icon + a
- *  scope label like "Bundle · subject_phrase". Tells the user WHICH
- *  entity the menu is for. Color of the icon can be overridden per
- *  invocation (e.g. bundle's user-picked color, or a kind token). */
-export interface ContextMenuHeader {
-  icon?: string | undefined;
-  label: string;
-  iconColor?: string | undefined;
-}
-
-export type ContextMenuEntry = ContextMenuItem | ContextMenuSection;
-
-function isSection(e: ContextMenuEntry): e is ContextMenuSection {
-  return "section" in e;
-}
-
-const props = defineProps<{
-  visible: boolean;
-  x: number;
-  y: number;
-  items: ContextMenuEntry[];
-  header?: ContextMenuHeader | undefined;
-  /** Open next to this element instead of at x/y (DropdownMenu's trigger).
-   *  A click on it doesn't count as "outside", so the trigger can toggle. */
-  anchor?: HTMLElement | null | undefined;
-  placement?: Placement | undefined;
-}>();
-
-const emit = defineEmits<{ (e: "close"): void }>();
-
-const activeIndex = ref(-1);
-const menuEl = ref<HTMLElement | null>(null);
-/** Where the menu sits: x/y (or the anchor), moved to stay on screen. */
-const pos = ref({ x: 0, y: 0 });
-
-function place(): void {
-  const el = menuEl.value;
-  const size = el ? { width: el.offsetWidth, height: el.offsetHeight } : { width: 0, height: 0 };
-  const from = props.anchor?.getBoundingClientRect() ?? { left: props.x, top: props.y, width: 0, height: 0 };
-  const at = placeFloating(from, size, viewportSize(), { placement: props.placement ?? "bottom-start", gap: props.anchor ? 4 : 0 });
-  pos.value = { x: at.x, y: at.y };
-}
-
-function pickableIndices(): number[] {
-  const out: number[] = [];
-  for (let i = 0; i < props.items.length; i++) {
-    const e = props.items[i];
-    if (isSection(e)) continue;
-    if (!e.disabled) out.push(i);
-  }
-  return out;
-}
-
-function moveActive(delta: 1 | -1) {
-  const idxs = pickableIndices();
-  if (!idxs.length) return;
-  const cur = idxs.indexOf(activeIndex.value);
-  const next = cur < 0 ? (delta > 0 ? 0 : idxs.length - 1) : (cur + delta + idxs.length) % idxs.length;
-  activeIndex.value = idxs[next];
-}
-
-function gotoEdge(edge: "first" | "last") {
-  const idxs = pickableIndices();
-  if (!idxs.length) return;
-  activeIndex.value = edge === "first" ? idxs[0] : idxs[idxs.length - 1];
-}
-
-function onWindowPointerDown(ev: PointerEvent) {
-  // Close on any pointerdown outside the menu. Capture phase so
-  // inner `@click.stop` handlers (trace value cells, seed buttons,
-  // etc) can't swallow the close — pointerdown fires before click,
-  // and the capture-phase listener runs before any descendant's
-  // own listener could stop propagation. Click inside the menu
-  // is gated by the `@click.stop` on the UL — pointerdown there
-  // bubbles, but the menu element is detected by composedPath()
-  // so we don't close.
-  const path = ev.composedPath();
-  for (const el of path) {
-    if (el instanceof HTMLElement && el.classList?.contains("wp-ctxmenu")) {
-      return;
-    }
-    if (props.anchor && el === props.anchor) return;
-  }
-  emit("close");
-}
-
-// A menu opened from a trigger follows it as the page scrolls; one opened
-// at the pointer closes instead, since the spot it was opened on has moved.
-function onScroll(ev: Event): void {
-  if (ev.target instanceof Node && menuEl.value?.contains(ev.target)) return;
-  if (props.anchor) place();
-  else emit("close");
-}
-
-function onKey(ev: KeyboardEvent) {
-  switch (ev.key) {
-    case "Escape": ev.preventDefault(); emit("close"); break;
-    case "ArrowDown": ev.preventDefault(); moveActive(1); break;
-    case "ArrowUp": ev.preventDefault(); moveActive(-1); break;
-    case "Home": ev.preventDefault(); gotoEdge("first"); break;
-    case "End": ev.preventDefault(); gotoEdge("last"); break;
-    case "Enter":
-    case " ": {
-      ev.preventDefault();
-      const it = props.items[activeIndex.value];
-      if (it && !isSection(it) && !it.disabled) pick(it);
-      break;
-    }
-  }
-}
-
-watch(() => props.visible, async (v) => {
-  if (v) {
-    activeIndex.value = -1;
-    pos.value = { x: props.x, y: props.y };
-    // Capture phase so descendant `@click.stop` handlers (trace
-    // value cells, seed buttons, etc) can't prevent the close.
-    window.addEventListener("pointerdown", onWindowPointerDown, true);
-    window.addEventListener("keydown", onKey);
-    window.addEventListener("scroll", onScroll, true);
-    window.addEventListener("resize", place);
-    // Defer one tick so the right-click that opened the menu doesn't
-    // immediately close it (the synthetic mousedown that preceded the
-    // contextmenu happens BEFORE the listener is wired, so this is
-    // mostly belt-and-braces).
-    await nextTick();
-    place();
-  } else {
-    window.removeEventListener("pointerdown", onWindowPointerDown, true);
-    window.removeEventListener("keydown", onKey);
-    window.removeEventListener("scroll", onScroll, true);
-    window.removeEventListener("resize", place);
-  }
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener("pointerdown", onWindowPointerDown, true);
-  window.removeEventListener("keydown", onKey);
-  window.removeEventListener("scroll", onScroll, true);
-  window.removeEventListener("resize", place);
-});
-
-function pick(item: ContextMenuItem) {
-  if (item.disabled) return;
-  item.onSelect();
-  if (!item.keepOpen) emit("close");
-}
-
-function isSectionEntry(entry: ContextMenuEntry): entry is ContextMenuSection {
-  return isSection(entry);
-}
-</script>
-
-<template>
-  <Teleport to="body">
-    <ul
-      v-if="visible"
-      ref="menuEl"
-      class="wp-ctxmenu"
-      :style="{ left: `${pos.x}px`, top: `${pos.y}px` }"
-      role="menu"
-      @click.stop
-      @contextmenu.prevent
-      @mouseleave="activeIndex = -1"
-    >
-      <!-- Header — kind icon + scope label, only renders when prop provided.
-           Non-interactive — divider between header and items handled by
-           the `.wp-ctxmenu__header` border-bottom. -->
-      <li v-if="header" class="wp-ctxmenu__header" aria-hidden="true">
-        <i
-          v-if="header.icon"
-          :class="['pi', header.icon, 'wp-ctxmenu__header-icon']"
-          :style="header.iconColor ? { color: header.iconColor } : {}"
-        ></i>
-        <span class="wp-ctxmenu__header-label">{{ header.label }}</span>
-      </li>
-
-      <template v-for="(entry, i) in items" :key="i">
-        <!-- Section label — uppercase dim title, groups items semantically. -->
-        <li v-if="isSectionEntry(entry)" class="wp-ctxmenu__section" aria-hidden="true">
-          {{ entry.section }}
-        </li>
-        <!-- Item action — same shape as before plus optional subtitle. -->
-        <template v-else>
-          <li v-if="entry.divider" class="wp-ctxmenu__sep" aria-hidden="true"></li>
-          <!-- The role is menuitem or menuitemcheckbox (bound, so the rule
-               can't see it); keys come from the menu's own keydown. -->
-          <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
-          <li
-            class="wp-ctxmenu__item"
-            :class="{
-              'wp-ctxmenu__item--danger': entry.danger,
-              'wp-ctxmenu__item--accent': entry.accent,
-              'wp-ctxmenu__item--disabled': entry.disabled,
-              'wp-ctxmenu__item--active': activeIndex === i,
-              'wp-ctxmenu__item--with-sub': !!entry.subtitle,
-            }"
-            :role="entry.checked === undefined ? 'menuitem' : 'menuitemcheckbox'"
-            :aria-checked="entry.checked === undefined ? undefined : entry.checked"
-            :aria-disabled="entry.disabled || undefined"
-            @mouseenter="!entry.disabled && (activeIndex = i)"
-            @click="pick(entry)"
-          >
-            <i
-              v-if="entry.checked !== undefined"
-              class="pi pi-check wp-ctxmenu__check"
-              :data-on="entry.checked || undefined"
-              aria-hidden="true"
-            ></i>
-            <i v-if="entry.icon" :class="['pi', entry.icon, 'wp-ctxmenu__icon']" aria-hidden="true"></i>
-            <span v-else-if="entry.checked === undefined" class="wp-ctxmenu__icon-spacer" aria-hidden="true"></span>
-            <span class="wp-ctxmenu__text">
-              <span class="wp-ctxmenu__title">{{ entry.label }}</span>
-              <span v-if="entry.subtitle" class="wp-ctxmenu__sub">{{ entry.subtitle }}</span>
-            </span>
-          </li>
-        </template>
-      </template>
-    </ul>
-  </Teleport>
-</template>
-
-<style scoped>
-.wp-ctxmenu {
-  position: fixed;
-  z-index: 10000;
-  background: var(--wp-bg-2);
-  border: 1px solid var(--wp-border-strong);
-  border-radius: var(--wp-radius-sm);
-  box-shadow: var(--wp-shadow-md);
-  /* Tighter padding than the old 4px-0 to match the v2 mockup. Items
-   * carry their own 6px padding + rounded corners so the menu reads
-   * as a stack of pills, not a flat list. */
-  padding: 4px;
-  /* Bumped from 180px to 250px — subtitles wrap awkwardly at narrower
-   * widths. Existing callers without subtitles still fit comfortably. */
-  min-width: 250px;
-  list-style: none;
-  margin: 0;
-  font-family: var(--wp-font-sans, sans-serif);
-  font-size: 12px;
-  color: var(--wp-text);
-  user-select: none;
-}
-/* Header — scope label at the top of the menu. Border-bottom acts as
- * a divider between header and the first item. */
-.wp-ctxmenu__header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 8px 4px 8px;
-  font: 600 10px/1 var(--wp-font-sans);
-  color: var(--wp-text-dim);
-  border-bottom: 1px solid var(--wp-border-soft, var(--wp-border));
-  margin-bottom: 4px;
-}
-.wp-ctxmenu__header-icon {
-  font-size: 12px;
-  width: 14px;
-  text-align: center;
-}
-/* Section label — non-interactive uppercase tag separating groups of
- * related items. Smaller + dimmer than the header label so the
- * header still reads as the primary scope and sections read as
- * subdivisions. */
-.wp-ctxmenu__section {
-  font: 600 9px/1 var(--wp-font-sans);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--wp-text-dim);
-  padding: 6px 8px 4px 8px;
-}
-.wp-ctxmenu__item {
-  padding: 6px 8px;
-  border-radius: min(4px, var(--wp-radius-cap, 999px));
-  cursor: pointer;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.wp-ctxmenu__item--active,
-.wp-ctxmenu__item:hover { background: var(--wp-accent-glow); color: var(--wp-accent); }
-/* A checkable item's tick: always takes its room, shows only when on. */
-.wp-ctxmenu__check { width: 14px; font-size: 11px; text-align: center; visibility: hidden; color: var(--wp-accent); }
-.wp-ctxmenu__check[data-on] { visibility: visible; }
-.wp-ctxmenu__item--danger { color: var(--wp-red); }
-.wp-ctxmenu__item--danger.wp-ctxmenu__item--active,
-.wp-ctxmenu__item--danger:hover { background: var(--wp-red-bg); color: var(--wp-red); }
-/* Accent variant — recommended action highlight. Tinted background +
- * accent text in idle state so the eye lands on it; hover uses the
- * stronger accent-glow + accent text already wired for other hovers. */
-.wp-ctxmenu__item--accent {
-  color: var(--wp-accent);
-  background: color-mix(in oklab, var(--wp-accent) 12%, transparent);
-}
-.wp-ctxmenu__item--accent.wp-ctxmenu__item--active,
-.wp-ctxmenu__item--accent:hover {
-  background: var(--wp-accent-glow);
-  color: var(--wp-accent);
-}
-.wp-ctxmenu__item--disabled {
-  color: var(--wp-text-dim);
-  cursor: not-allowed;
-}
-.wp-ctxmenu__item--disabled:hover { background: transparent; color: var(--wp-text-dim); }
-.wp-ctxmenu__icon,
-.wp-ctxmenu__icon-spacer {
-  width: 14px;
-  font-size: 11px;
-  text-align: center;
-  flex-shrink: 0;
-  /* Align with title baseline when subtitle is present (two-line layout). */
-  align-self: flex-start;
-  margin-top: 1px;
-}
-.wp-ctxmenu__text {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  min-width: 0;
-}
-.wp-ctxmenu__title {
-  font: 500 12px/1.2 var(--wp-font-sans);
-  color: inherit;
-}
-.wp-ctxmenu__sub {
-  color: var(--wp-text-dim);
-  font: 400 10px/1.3 var(--wp-font-sans);
-  white-space: normal;
-}
-.wp-ctxmenu__sep {
-  height: 1px;
-  background: var(--wp-border-soft, var(--wp-border));
-  margin: 4px 6px;
-}
-</style>
+<script setup lang="ts">
+import { onBeforeUnmount, ref, watch, nextTick } from "vue";
+import { placeFloating, viewportSize, type Placement } from "./floating";
+import { useFloatingChild } from "./floating-layer";
+
+export interface ContextMenuItem {
+  label: string;
+  /** PrimeIcons class (e.g. "pi-trash"). ComfyUI loads PrimeIcons globally. */
+  icon?: string | undefined;
+  /** Optional separator above the item. */
+  divider?: boolean | undefined;
+  /** Render the label in red (destructive action). */
+  danger?: boolean | undefined;
+  /** Render the label in accent color to draw attention. Used for
+   *  recommended next actions in a contextual state (e.g. "Push to
+   *  library" when the row's library entry has been deleted upstream).
+   *  Lower-key than `danger`; signals "this is what you probably want"
+   *  not "be careful with this". */
+  accent?: boolean | undefined;
+  disabled?: boolean | undefined;
+  /** Optional dim secondary line under the label. Useful for
+   *  explaining non-obvious actions like "Pull current library
+   *  version" or "Restore frozen state from bundle". When provided,
+   *  the row becomes two-line and uses more vertical space. */
+  subtitle?: string | undefined;
+  /** A checkable item (menuitemcheckbox): a tick shows when true. Leave it
+   *  out for a plain action. */
+  checked?: boolean | undefined;
+  /** Keep the menu open after this item is picked, so several checkable
+   *  items can be ticked in a row (a tag picker). */
+  keepOpen?: boolean | undefined;
+  onSelect: () => void;
+}
+
+/** Section labels group related items inside a single menu. Renders
+ *  as an uppercase, dim, non-interactive separator above the items
+ *  that follow. Distinguished from `ContextMenuItem` at type level
+ *  by the absence of `onSelect`. */
+export interface ContextMenuSection {
+  section: string;
+}
+
+/** Optional header rendered at the top of the menu — kind icon + a
+ *  scope label like "Bundle · subject_phrase". Tells the user WHICH
+ *  entity the menu is for. Color of the icon can be overridden per
+ *  invocation (e.g. bundle's user-picked color, or a kind token). */
+export interface ContextMenuHeader {
+  icon?: string | undefined;
+  label: string;
+  iconColor?: string | undefined;
+}
+
+export type ContextMenuEntry = ContextMenuItem | ContextMenuSection;
+
+function isSection(e: ContextMenuEntry): e is ContextMenuSection {
+  return "section" in e;
+}
+
+const props = defineProps<{
+  visible: boolean;
+  x: number;
+  y: number;
+  items: ContextMenuEntry[];
+  header?: ContextMenuHeader | undefined;
+  /** Open next to this element instead of at x/y (DropdownMenu's trigger).
+   *  A click on it doesn't count as "outside", so the trigger can toggle. */
+  anchor?: HTMLElement | null | undefined;
+  placement?: Placement | undefined;
+}>();
+
+const emit = defineEmits<{ (e: "close"): void }>();
+
+const activeIndex = ref(-1);
+const menuEl = ref<HTMLElement | null>(null);
+// Inside a Popover, clicks and Escape on the menu are the menu's own.
+useFloatingChild(() => menuEl.value);
+/** Where the menu sits: x/y (or the anchor), moved to stay on screen. */
+const pos = ref({ x: 0, y: 0 });
+
+function place(): void {
+  const el = menuEl.value;
+  const size = el ? { width: el.offsetWidth, height: el.offsetHeight } : { width: 0, height: 0 };
+  const from = props.anchor?.getBoundingClientRect() ?? { left: props.x, top: props.y, width: 0, height: 0 };
+  const at = placeFloating(from, size, viewportSize(), { placement: props.placement ?? "bottom-start", gap: props.anchor ? 4 : 0 });
+  pos.value = { x: at.x, y: at.y };
+}
+
+function pickableIndices(): number[] {
+  const out: number[] = [];
+  for (let i = 0; i < props.items.length; i++) {
+    const e = props.items[i];
+    if (isSection(e)) continue;
+    if (!e.disabled) out.push(i);
+  }
+  return out;
+}
+
+function moveActive(delta: 1 | -1) {
+  const idxs = pickableIndices();
+  if (!idxs.length) return;
+  const cur = idxs.indexOf(activeIndex.value);
+  const next = cur < 0 ? (delta > 0 ? 0 : idxs.length - 1) : (cur + delta + idxs.length) % idxs.length;
+  activeIndex.value = idxs[next];
+}
+
+function gotoEdge(edge: "first" | "last") {
+  const idxs = pickableIndices();
+  if (!idxs.length) return;
+  activeIndex.value = edge === "first" ? idxs[0] : idxs[idxs.length - 1];
+}
+
+function onWindowPointerDown(ev: PointerEvent) {
+  // Close on any pointerdown outside the menu. Capture phase so
+  // inner `@click.stop` handlers (trace value cells, seed buttons,
+  // etc) can't swallow the close — pointerdown fires before click,
+  // and the capture-phase listener runs before any descendant's
+  // own listener could stop propagation. Click inside the menu
+  // is gated by the `@click.stop` on the UL — pointerdown there
+  // bubbles, but the menu element is detected by composedPath()
+  // so we don't close.
+  const path = ev.composedPath();
+  for (const el of path) {
+    if (el instanceof HTMLElement && el.classList?.contains("wp-ctxmenu")) {
+      return;
+    }
+    if (props.anchor && el === props.anchor) return;
+  }
+  emit("close");
+}
+
+// A menu opened from a trigger follows it as the page scrolls; one opened
+// at the pointer closes instead, since the spot it was opened on has moved.
+function onScroll(ev: Event): void {
+  if (ev.target instanceof Node && menuEl.value?.contains(ev.target)) return;
+  if (props.anchor) place();
+  else emit("close");
+}
+
+function onKey(ev: KeyboardEvent) {
+  switch (ev.key) {
+    case "Escape": ev.preventDefault(); emit("close"); break;
+    case "ArrowDown": ev.preventDefault(); moveActive(1); break;
+    case "ArrowUp": ev.preventDefault(); moveActive(-1); break;
+    case "Home": ev.preventDefault(); gotoEdge("first"); break;
+    case "End": ev.preventDefault(); gotoEdge("last"); break;
+    case "Enter":
+    case " ": {
+      ev.preventDefault();
+      const it = props.items[activeIndex.value];
+      if (it && !isSection(it) && !it.disabled) pick(it);
+      break;
+    }
+  }
+}
+
+watch(() => props.visible, async (v) => {
+  if (v) {
+    activeIndex.value = -1;
+    pos.value = { x: props.x, y: props.y };
+    // Capture phase so descendant `@click.stop` handlers (trace
+    // value cells, seed buttons, etc) can't prevent the close.
+    window.addEventListener("pointerdown", onWindowPointerDown, true);
+    window.addEventListener("keydown", onKey);
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", place);
+    // Defer one tick so the right-click that opened the menu doesn't
+    // immediately close it (the synthetic mousedown that preceded the
+    // contextmenu happens BEFORE the listener is wired, so this is
+    // mostly belt-and-braces).
+    await nextTick();
+    place();
+  } else {
+    window.removeEventListener("pointerdown", onWindowPointerDown, true);
+    window.removeEventListener("keydown", onKey);
+    window.removeEventListener("scroll", onScroll, true);
+    window.removeEventListener("resize", place);
+  }
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("pointerdown", onWindowPointerDown, true);
+  window.removeEventListener("keydown", onKey);
+  window.removeEventListener("scroll", onScroll, true);
+  window.removeEventListener("resize", place);
+});
+
+function pick(item: ContextMenuItem) {
+  if (item.disabled) return;
+  item.onSelect();
+  if (!item.keepOpen) emit("close");
+}
+
+function isSectionEntry(entry: ContextMenuEntry): entry is ContextMenuSection {
+  return isSection(entry);
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <!-- Keys reach the menu through its window keydown (arrows, Home/End,
+         Enter, Escape), so the list itself takes no focus; leaving with the
+         mouse only clears the hover highlight. -->
+    <!-- eslint-disable-next-line vuejs-accessibility/interactive-supports-focus, vuejs-accessibility/mouse-events-have-key-events -->
+    <ul
+      v-if="visible"
+      ref="menuEl"
+      class="wp-ctxmenu"
+      :style="{ left: `${pos.x}px`, top: `${pos.y}px` }"
+      role="menu"
+      @click.stop
+      @contextmenu.prevent
+      @mouseleave="activeIndex = -1"
+    >
+      <!-- Header — kind icon + scope label, only renders when prop provided.
+           Non-interactive — divider between header and items handled by
+           the `.wp-ctxmenu__header` border-bottom. -->
+      <li v-if="header" class="wp-ctxmenu__header" aria-hidden="true">
+        <i
+          v-if="header.icon"
+          :class="['pi', header.icon, 'wp-ctxmenu__header-icon']"
+          :style="header.iconColor ? { color: header.iconColor } : {}"
+        ></i>
+        <span class="wp-ctxmenu__header-label">{{ header.label }}</span>
+      </li>
+
+      <template v-for="(entry, i) in items" :key="i">
+        <!-- Section label — uppercase dim title, groups items semantically. -->
+        <li v-if="isSectionEntry(entry)" class="wp-ctxmenu__section" aria-hidden="true">
+          {{ entry.section }}
+        </li>
+        <!-- Item action — same shape as before plus optional subtitle. -->
+        <template v-else>
+          <li v-if="entry.divider" class="wp-ctxmenu__sep" aria-hidden="true"></li>
+          <!-- The role is menuitem or menuitemcheckbox (bound, so the rule
+               can't see it); keys come from the menu's own keydown. -->
+          <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions, vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/mouse-events-have-key-events -->
+          <li
+            class="wp-ctxmenu__item"
+            :class="{
+              'wp-ctxmenu__item--danger': entry.danger,
+              'wp-ctxmenu__item--accent': entry.accent,
+              'wp-ctxmenu__item--disabled': entry.disabled,
+              'wp-ctxmenu__item--active': activeIndex === i,
+              'wp-ctxmenu__item--with-sub': !!entry.subtitle,
+            }"
+            :role="entry.checked === undefined ? 'menuitem' : 'menuitemcheckbox'"
+            :aria-checked="entry.checked === undefined ? undefined : entry.checked"
+            :aria-disabled="entry.disabled || undefined"
+            @mouseenter="!entry.disabled && (activeIndex = i)"
+            @click="pick(entry)"
+          >
+            <i
+              v-if="entry.checked !== undefined"
+              class="pi pi-check wp-ctxmenu__check"
+              :data-on="entry.checked || undefined"
+              aria-hidden="true"
+            ></i>
+            <i v-if="entry.icon" :class="['pi', entry.icon, 'wp-ctxmenu__icon']" aria-hidden="true"></i>
+            <span v-else-if="entry.checked === undefined" class="wp-ctxmenu__icon-spacer" aria-hidden="true"></span>
+            <span class="wp-ctxmenu__text">
+              <span class="wp-ctxmenu__title">{{ entry.label }}</span>
+              <span v-if="entry.subtitle" class="wp-ctxmenu__sub">{{ entry.subtitle }}</span>
+            </span>
+          </li>
+        </template>
+      </template>
+    </ul>
+  </Teleport>
+</template>
+
+<style scoped>
+.wp-ctxmenu {
+  position: fixed;
+  z-index: 10000;
+  background: var(--wp-bg-2);
+  border: 1px solid var(--wp-border-strong);
+  border-radius: var(--wp-radius-sm);
+  box-shadow: var(--wp-shadow-md);
+  /* Tighter padding than the old 4px-0 to match the v2 mockup. Items
+   * carry their own 6px padding + rounded corners so the menu reads
+   * as a stack of pills, not a flat list. */
+  padding: 4px;
+  /* Bumped from 180px to 250px — subtitles wrap awkwardly at narrower
+   * widths. Existing callers without subtitles still fit comfortably. */
+  min-width: 250px;
+  list-style: none;
+  margin: 0;
+  font-family: var(--wp-font-sans, sans-serif);
+  font-size: 12px;
+  color: var(--wp-text);
+  user-select: none;
+}
+/* Header — scope label at the top of the menu. Border-bottom acts as
+ * a divider between header and the first item. */
+.wp-ctxmenu__header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px 4px 8px;
+  font: 600 10px/1 var(--wp-font-sans);
+  color: var(--wp-text-dim);
+  border-bottom: 1px solid var(--wp-border-soft, var(--wp-border));
+  margin-bottom: 4px;
+}
+.wp-ctxmenu__header-icon {
+  font-size: 12px;
+  width: 14px;
+  text-align: center;
+}
+/* Section label — non-interactive uppercase tag separating groups of
+ * related items. Smaller + dimmer than the header label so the
+ * header still reads as the primary scope and sections read as
+ * subdivisions. */
+.wp-ctxmenu__section {
+  font: 600 9px/1 var(--wp-font-sans);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--wp-text-dim);
+  padding: 6px 8px 4px 8px;
+}
+.wp-ctxmenu__item {
+  padding: 6px 8px;
+  border-radius: min(4px, var(--wp-radius-cap, 999px));
+  cursor: pointer;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.wp-ctxmenu__item--active,
+.wp-ctxmenu__item:hover { background: var(--wp-accent-glow); color: var(--wp-accent); }
+/* A checkable item's tick: always takes its room, shows only when on. */
+.wp-ctxmenu__check { width: 14px; font-size: 11px; text-align: center; visibility: hidden; color: var(--wp-accent); }
+.wp-ctxmenu__check[data-on] { visibility: visible; }
+.wp-ctxmenu__item--danger { color: var(--wp-red); }
+.wp-ctxmenu__item--danger.wp-ctxmenu__item--active,
+.wp-ctxmenu__item--danger:hover { background: var(--wp-red-bg); color: var(--wp-red); }
+/* Accent variant — recommended action highlight. Tinted background +
+ * accent text in idle state so the eye lands on it; hover uses the
+ * stronger accent-glow + accent text already wired for other hovers. */
+.wp-ctxmenu__item--accent {
+  color: var(--wp-accent);
+  background: color-mix(in oklab, var(--wp-accent) 12%, transparent);
+}
+.wp-ctxmenu__item--accent.wp-ctxmenu__item--active,
+.wp-ctxmenu__item--accent:hover {
+  background: var(--wp-accent-glow);
+  color: var(--wp-accent);
+}
+.wp-ctxmenu__item--disabled {
+  color: var(--wp-text-dim);
+  cursor: not-allowed;
+}
+.wp-ctxmenu__item--disabled:hover { background: transparent; color: var(--wp-text-dim); }
+.wp-ctxmenu__icon,
+.wp-ctxmenu__icon-spacer {
+  width: 14px;
+  font-size: 11px;
+  text-align: center;
+  flex-shrink: 0;
+  /* Align with title baseline when subtitle is present (two-line layout). */
+  align-self: flex-start;
+  margin-top: 1px;
+}
+.wp-ctxmenu__text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+.wp-ctxmenu__title {
+  font: 500 12px/1.2 var(--wp-font-sans);
+  color: inherit;
+}
+.wp-ctxmenu__sub {
+  color: var(--wp-text-dim);
+  font: 400 10px/1.3 var(--wp-font-sans);
+  white-space: normal;
+}
+.wp-ctxmenu__sep {
+  height: 1px;
+  background: var(--wp-border-soft, var(--wp-border));
+  margin: 4px 6px;
+}
+</style>