@dumiflex/wp-kit 0.0.0-stage → 0.4.0

package/src/ContextMenu.vue

@@ -0,0 +1,386 @@
+<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>

package/src/CopyButton.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+/**
+ * Copy button: copies text and says so in place. The icon turns into a
+ * check ("Copied") or a cross ("Couldn't copy") for a moment, the tooltip
+ * and a polite live region say the same, so the message is the same
+ * everywhere and nobody needs a toast for it. Works on the canvas and in the
+ * manager, and on plain-http pages (see `clipboard.ts`).
+ *
+ *   <CopyButton :text="prompt" label="Copy prompt" />
+ *   <CopyButton :text="() => buildExport()" label="Copy JSON" show-label />
+ *
+ * `text` may be a function (also async) so costly text is built on click.
+ *
+ * With slot content it is an inline copy target instead (an id in a row):
+ * the slot is the visible text, styled by the caller, and the icon shows on
+ * hover, on focus and after a copy.
+ *
+ *   <CopyButton :text="row.id" :label="`Copy ID ${row.id}`" class="wp-id">{{ row.id }}</CopyButton>
+ */
+import { computed, onBeforeUnmount, ref, useSlots } from "vue";
+import { copyText } from "./clipboard";
+import { vTooltip } from "./tooltip";
+
+const props = withDefaults(defineProps<{
+  text: string | (() => string | Promise<string>);
+  /** The button's name and tooltip, e.g. "Copy prompt". */
+  label?: string | undefined;
+  /** Show the label next to the icon. */
+  showLabel?: boolean | undefined;
+  size?: "sm" | "md" | "lg" | undefined;
+  /** `ghost` (default) for rows and toolbars, `secondary` for a filled button. */
+  variant?: "ghost" | "secondary" | undefined;
+  disabled?: boolean | undefined;
+  /** The PrimeIcons class shown before a copy, e.g. "pi-link" for a link. */
+  icon?: string | undefined;
+}>(), { icon: "pi-copy", label: "Copy", size: "md", variant: "ghost" });
+
+const emit = defineEmits<{ (e: "copied", text: string): void; (e: "failed"): void }>();
+
+const slots = useSlots();
+const state = ref<"idle" | "copied" | "failed">("idle");
+let timer: ReturnType<typeof setTimeout> | undefined;
+const RESET_MS = 1600;
+
+const shown = computed(() =>
+  state.value === "copied" ? "Copied" : state.value === "failed" ? "Couldn't copy" : props.label);
+const icon = computed(() =>
+  state.value === "copied" ? "pi-check" : state.value === "failed" ? "pi-times" : props.icon);
+
+async function onClick(): Promise<void> {
+  if (props.disabled) return;
+  let value = "";
+  try {
+    value = typeof props.text === "function" ? await props.text() : props.text;
+  } catch {
+    value = "";
+  }
+  const ok = value !== "" && await copyText(value);
+  state.value = ok ? "copied" : "failed";
+  if (ok) emit("copied", value);
+  else emit("failed");
+  clearTimeout(timer);
+  timer = setTimeout(() => { state.value = "idle"; }, RESET_MS);
+}
+
+onBeforeUnmount(() => clearTimeout(timer));
+</script>
+
+<template>
+  <button
+    v-tooltip="showLabel ? null : shown"
+    :data-inline="slots.default ? 'true' : undefined"
+    type="button"
+    class="wp-copy-btn"
+    :data-size="size"
+    :data-variant="variant"
+    :data-state="state"
+    :data-labelled="showLabel || undefined"
+    :aria-label="showLabel ? undefined : label"
+    :disabled="disabled"
+    @click="onClick"
+  >
+    <template v-if="slots.default">
+      <slot />
+      <i class="pi wp-copy-btn__inline-icon" :class="icon" aria-hidden="true" />
+    </template>
+    <template v-else>
+      <i class="pi" :class="icon" aria-hidden="true" />
+      <span v-if="showLabel" class="wp-copy-btn__text">{{ shown }}</span>
+    </template>
+    <span class="wp-copy-btn__live" aria-live="polite">{{ state === "idle" ? "" : shown }}</span>
+  </button>
+</template>
+
+<style scoped>
+.wp-copy-btn { position: relative; }
+.wp-copy-btn:not([data-inline]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  flex: none;
+  min-width: var(--wp-control-h-md);
+  height: var(--wp-control-h-md);
+  margin: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--wp-radius);
+  background: transparent;
+  color: var(--wp-text-muted);
+  font: 500 var(--wp-text-sm)/1 var(--wp-font-sans);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background var(--wp-motion-hover), color var(--wp-motion-hover), border-color var(--wp-motion-hover);
+}
+.wp-copy-btn[data-labelled] { padding: 0 var(--wp-space-5); }
+.wp-copy-btn[data-size="sm"] { min-width: var(--wp-control-h-sm); height: var(--wp-control-h-sm); border-radius: var(--wp-radius-sm); font-size: var(--wp-text-xs); gap: 4px; }
+.wp-copy-btn[data-size="sm"][data-labelled] { padding: 0 var(--wp-space-4); }
+.wp-copy-btn[data-size="lg"] { min-width: var(--wp-control-h-lg); height: var(--wp-control-h-lg); }
+.wp-copy-btn[data-variant="secondary"] { background: var(--wp-bg-3); border-color: var(--wp-border); color: var(--wp-text); }
+.wp-copy-btn:not([data-inline]) .pi { font-size: 12px; }
+.wp-copy-btn[data-size="sm"]:not([data-inline]) .pi { font-size: 11px; }
+.wp-copy-btn:not([data-inline]):hover:not(:disabled) { background: var(--wp-bg-3); border-color: var(--wp-border); color: var(--wp-text); }
+.wp-copy-btn[data-variant="secondary"]:hover:not(:disabled) { background: var(--wp-bg-4); border-color: var(--wp-border-strong); }
+.wp-copy-btn:not([data-inline]):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-copy-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+.wp-copy-btn[data-state="copied"] .pi { color: var(--wp-success); }
+.wp-copy-btn[data-state="failed"] .pi { color: var(--wp-danger); }
+/* Inline: the caller's class draws the text; only the icon is ours. */
+.wp-copy-btn[data-inline] {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  border: 0;
+  border-radius: var(--wp-radius-sm);
+  text-align: left;
+  cursor: copy;
+}
+.wp-copy-btn[data-inline]:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
+.wp-copy-btn__inline-icon { font-size: 0.85em; opacity: 0; transition: opacity var(--wp-motion-hover); }
+.wp-copy-btn[data-inline]:hover .wp-copy-btn__inline-icon,
+.wp-copy-btn[data-inline]:focus-visible .wp-copy-btn__inline-icon,
+.wp-copy-btn[data-inline]:not([data-state="idle"]) .wp-copy-btn__inline-icon { opacity: 1; }
+.wp-copy-btn__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+@media (prefers-reduced-motion: reduce) {
+  .wp-copy-btn { transition: none; }
+}
+</style>