@dumiflex/wp-kit 0.5.0 → 0.7.0

package/src/Combobox.vue

@@ -175,7 +175,7 @@ function setOpen(v: boolean): void {
 <!-- Popover's autofocus prop is off here: focus stays in the box you type in. -->
 <!-- eslint-disable vuejs-accessibility/no-autofocus -->
 <template>
-  <Popover :open="open" role="group" match-width :autofocus="false" :label="`${ariaLabel} choices`" @update:open="setOpen">
+  <Popover :open="open" variant="menu" role="group" match-width :max-height="280" :autofocus="false" :label="`${ariaLabel} choices`" @update:open="setOpen">
     <template #trigger>
       <!-- A click on the box's padding focuses the text field, which has the keys. -->
       <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
@@ -245,7 +245,7 @@ function setOpen(v: boolean): void {
         v-for="(o, i) in matches"
         :id="`${listId}-${i}`"
         :key="String(o.value)"
-        class="wp-combo__opt"
+        class="wp-combo__opt wp-menu__item"
         role="option"
         :aria-selected="isPicked(o.value)"
         :aria-disabled="o.disabled || undefined"
@@ -265,6 +265,7 @@ function setOpen(v: boolean): void {
 </template>
 
 <style scoped src="./field.css"></style>
+<style scoped src="./menu.css"></style>
 
 <style scoped>
 .wp-combo {
@@ -284,7 +285,7 @@ function setOpen(v: boolean): void {
   color: var(--wp-text); font-size: var(--wp-text-xs); line-height: 1;
 }
 .wp-combo[data-size="sm"] .wp-combo__chip { height: 16px; padding-left: 5px; font-size: 10.5px; }
-.wp-combo__chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wp-combo__chip-text { min-width: 0; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .wp-combo__remove, .wp-combo__clear {
   display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0;
   border: 0; border-radius: min(50%, var(--wp-radius-cap, 999px)); background: transparent; color: var(--wp-text-muted); cursor: pointer;
@@ -299,7 +300,7 @@ function setOpen(v: boolean): void {
   position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
   color: var(--wp-text-muted); font-size: 10px; pointer-events: none;
 }
-.wp-combo[data-size="sm"] .wp-combo__caret { right: 8px; font-size: 9px; }
+.wp-combo[data-size="sm"] .wp-combo__caret { right: 8px; font-size: 10px; }
 .wp-combo__field {
   flex: 1 0 6ch; min-width: 6ch; height: calc(var(--_h) - 8px); margin: 0; padding: 0 2px;
   border: 0; outline: none; background: transparent; color: inherit; font: inherit;
@@ -311,20 +312,15 @@ function setOpen(v: boolean): void {
   position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
   clip: rect(0 0 0 0); white-space: nowrap; border: 0;
 }
-.wp-combo__list { margin: calc(var(--wp-space-2) * -1); padding: 0; list-style: none; max-height: 280px; overflow: auto; }
-.wp-combo__opt {
-  display: flex; align-items: flex-start; gap: var(--wp-space-2);
-  padding: 6px var(--wp-space-4) 6px var(--wp-space-2); border-radius: var(--wp-radius-sm);
-  color: var(--wp-text); font-size: var(--wp-text-sm); cursor: pointer;
-}
-.wp-combo__opt:hover, .wp-combo__opt[data-active] { background: var(--wp-row-hover); }
-.wp-combo__opt[data-active] { box-shadow: inset 2px 0 0 var(--wp-accent); }
-.wp-combo__opt[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
+/* The panel and the rows' padding, corners, text and states are the shared
+ * menu look (Popover variant="menu" + menu.css); the list scrolls in the panel. */
+.wp-combo__list { margin: 0; padding: 0; list-style: none; }
+.wp-combo__opt { display: flex; align-items: flex-start; gap: var(--wp-space-2); }
 .wp-combo__tick { width: 14px; margin-top: 2px; font-size: 10px; color: var(--wp-accent); visibility: hidden; }
 .wp-combo__tick[data-on] { visibility: visible; }
 .wp-combo__opt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .wp-combo__hint { color: var(--wp-text-muted); font-size: var(--wp-text-xs); }
-.wp-combo__empty { padding: 6px var(--wp-space-4); color: var(--wp-text-muted); font-size: var(--wp-text-sm); }
+.wp-combo__empty { padding: 6px 8px; color: var(--wp-text-muted); font-size: 12px; }
 @media (prefers-reduced-motion: reduce) {
   .wp-combo { transition: none; }
 }

package/src/ConfirmModal.vue

@@ -2,22 +2,23 @@
 /**
  * Ask before an action, in the manager's own dialog.
  *
- * A thin wrapper on Modal: the same backdrop, focus trap, Escape and focus
- * return as every other manager dialog, with a Cancel button and a confirm
- * button that names the action. The canvas keeps `ConfirmDialog`, which
- * wears the node colours; this one wears the manager's.
+ * Built on Modal: the same backdrop, focus trap, Escape and focus return as
+ * every other dialog, with a Cancel button and a confirm button that names
+ * the action. One confirm for the manager, the canvas and the community site
+ * (ConfirmDialog was folded in: `visible` → `v-model:open`/`open`,
+ * `variant="danger"` → `tone="danger"`); it wears the colours of its side.
  *
  * Escape, the backdrop, the ✕ and Cancel all emit `cancel`. Enter confirms
  * unless focus is on a button or a text box (which then gets the key itself).
- * The `confirm-*` data-test names match ConfirmDialog's, so a test can drive
- * either.
+ * Data-test names: `confirm-title`, `confirm-body`, `confirm-cancel`,
+ * `confirm-confirm`.
  *
  * `requireType` makes the user type that exact text before Confirm works
  * (deleting an account); `confirmDisabled` holds Confirm off for a gate the
  * page owns (a required reason in the slot). `warn` asks about something
  * that can be undone but matters: an outlined button and an info mark.
  */
-import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import Modal from "./Modal.vue";
 import Button from "./Button.vue";
 import Icon from "./Icon.vue";
@@ -70,26 +71,15 @@ function onKeydown(ev: KeyboardEvent): void {
   emit("confirm");
 }
 
-watch(
-  () => props.open,
-  (open) => {
-    if (open) {
-      typed.value = "";
-      window.addEventListener("keydown", onKeydown);
-    }
-    else window.removeEventListener("keydown", onKeydown);
-  },
-  { immediate: true },
-);
-onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
+watch(() => props.open, (open) => { if (open) typed.value = ""; }, { immediate: true });
 </script>
 
 <template>
-  <Modal :open="open" size="sm" @update:open="onOpen">
+  <Modal :open="open" size="sm" @update:open="onOpen" @keydown="onKeydown">
     <template #header="{ titleId }">
       <span class="wp-confirm-modal__head" :class="`wp-confirm-modal__head--${tone}`">
         <Icon :name="tone === 'danger' ? 'exclamation-triangle' : 'info-circle'" />
-        <h3 :id="titleId" class="wp-modal__title" data-test="confirm-title">{{ title }}</h3>
+        <h3 :id="titleId" class="wp-confirm-modal__title" data-test="confirm-title">{{ title }}</h3>
       </span>
     </template>
     <div class="wp-confirm-modal__body">
@@ -123,7 +113,7 @@ onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
 }
 .wp-confirm-modal__head--danger { color: var(--wp-danger); }
 .wp-confirm-modal__head--warn { color: var(--wp-warn); }
-.wp-confirm-modal__head .wp-modal__title { color: var(--wp-text); }
+.wp-confirm-modal__title { margin: 0; font-size: var(--wp-text-md); font-weight: 600; color: var(--wp-text); }
 .wp-confirm-modal__text {
   margin: 0;
   color: var(--wp-text-muted);

package/src/ConstraintMatrixPreview.vue

@@ -29,8 +29,12 @@ import {
   groupHue as tagHue,
   groupLabel,
   isBucket,
+  MODE_GLYPH,
+  MODE_LABEL,
+  normalizeMode,
   orderByGroups,
   toGroups,
+  type CellMode,
 } from "./matrix-axis";
 
 const props = defineProps<{
@@ -53,27 +57,7 @@ const colGroups = computed(() => toGroups(orderedCols.value));
 const hasColBands = computed(() => colGroups.value.some((g) => !isBucket(g)));
 const hasRowGroups = computed(() => rowGroups.value.some((g) => !isBucket(g)));
 
-// `only` (schema v6, linked picks): when the source fires, targets without a
-// rule of their own in that row are excluded.
-type CnMode = "allow" | "boost" | "reduce" | "exclude" | "only";
-const MODE_GLYPH: Record<string, string> = {
-  only: "✓",
-  boost: "↑",
-  reduce: "↓",
-  exclude: "×",
-  allow: "·",
-};
-const MODE_LABEL: Record<CnMode, string> = {
-  boost: "Boost",
-  reduce: "Reduce",
-  exclude: "Exclude",
-  allow: "Neutral",
-  only: "Only",
-};
-
-function normalizeMode(raw: string | null | undefined): CnMode {
-  return raw === "exclude" || raw === "boost" || raw === "reduce" || raw === "only" ? raw : "allow";
-}
+type CnMode = CellMode;
 
 /** A row holding an `only` cell shuts out its neutral cells at runtime; the
  *  preview marks them so the link reads the same as in the extension. */
@@ -296,7 +280,7 @@ function fmtFactor(f: number): string {
           class="wp-cn-exc__mode"
           :class="`wp-cn-exc__mode--${exc.mode}`"
         >
-          <span class="wp-cn-exc__glyph">{{ MODE_GLYPH[exc.mode] }}</span>
+          <span class="wp-cn-exc__glyph">{{ MODE_GLYPH[normalizeMode(exc.mode)] }}</span>
           {{ MODE_LABEL[normalizeMode(exc.mode)] }}
         </span>
         <span

package/src/ConstraintPreview.vue

@@ -0,0 +1,259 @@
+<script setup lang="ts">
+/**
+ * Constraint: counts up top, then the grouped matrix (ConstraintMatrixPreview)
+ * or, for a big matrix, a searchable list of only the cells that do
+ * something. The search narrows rows / columns in both views.
+ */
+import { computed, ref } from "vue";
+import ConstraintMatrixPreview from "./ConstraintMatrixPreview.vue";
+import { MODE_GLYPH as GLYPH, MODE_LABEL as LABEL, normalizeMode, type CellMode as Mode } from "./matrix-axis";
+import {
+  readArray,
+  readGroups,
+  readNumber,
+  readObject,
+  readString,
+  type Obj,
+} from "./preview-readers";
+import WpSegmented, { type SegmentedOption } from "./WpSegmented.vue";
+import SearchInput from "./SearchInput.vue";
+
+const props = defineProps<{
+  inner: Obj | null;
+  refMap: ReadonlyMap<string, string>;
+  refNames: Record<string, string>;
+  refGroups: Record<string, Record<string, string[]>>;
+}>();
+
+interface Cell {
+  mode: Mode;
+  factor: number;
+}
+
+const matrix = computed<Record<string, Record<string, Cell>>>(() => {
+  const m = readObject(props.inner, "matrix");
+  if (!m) return {};
+  const out: Record<string, Record<string, Cell>> = {};
+  for (const row of Object.keys(m)) {
+    const byCol = readObject(m, row);
+    if (!byCol) continue;
+    out[row] = {};
+    for (const col of Object.keys(byCol)) {
+      const e = readObject(byCol, col);
+      if (!e) continue;
+      out[row][col] = { mode: normalizeMode(readString(e, "mode")), factor: readNumber(e, "factor") ?? 1 };
+    }
+  }
+  return out;
+});
+const rows = computed(() => Object.keys(matrix.value));
+/** Union of every row's columns, first-seen order. */
+const cols = computed(() => {
+  const seen = new Set<string>();
+  for (const r of rows.value) for (const c of Object.keys(matrix.value[r] ?? {})) seen.add(c);
+  return [...seen];
+});
+/** Axis names: cached name → dependency name → raw id → role word. */
+function axisName(idKey: string, nameKey: string, role: string): string {
+  const id = readString(props.inner, idKey);
+  return readString(props.inner, nameKey) ?? (id ? props.refNames[id] : undefined) ?? id ?? role;
+}
+const sourceName = computed(() => axisName("source_wildcard_id", "source_wildcard_name", "source"));
+const targetName = computed(() => axisName("target_wildcard_id", "target_wildcard_name", "target"));
+/** Embedded axis snapshot first, then the dependency's tag_groups. */
+function axisGroups(embeddedKey: string, idKey: string): Record<string, string[]> {
+  const embedded = readGroups(props.inner, embeddedKey);
+  if (embedded) return embedded;
+  const id = readString(props.inner, idKey);
+  return (id ? props.refGroups[id] : undefined) ?? {};
+}
+const sourceGroups = computed(() => axisGroups("source_groups", "source_wildcard_id"));
+const targetGroups = computed(() => axisGroups("target_groups", "target_wildcard_id"));
+/** Library exceptions only; instance `extra_exceptions` never publish. */
+const exceptions = computed(() =>
+  readArray(props.inner, "exceptions").map((e) => ({
+    source: readString(e, "source_value") ?? readString(e, "source") ?? "",
+    target: readString(e, "target_value") ?? readString(e, "target") ?? "",
+    mode: normalizeMode(readString(e, "mode")),
+    factor: readNumber(e, "factor") ?? 1,
+  })),
+);
+const targetSelect = computed(() => {
+  const sel = readObject(props.inner, "target_select");
+  const mode = readString(sel, "mode");
+  if (!mode) return null;
+  const count = readNumber(sel, "count");
+  return count !== null ? `${mode} ${count}` : mode;
+});
+
+const ruleCells = computed(() => {
+  const out: { row: string; col: string; cell: Cell }[] = [];
+  for (const r of rows.value)
+    for (const c of cols.value) {
+      const cell = matrix.value[r]?.[c];
+      if (cell && cell.mode !== "allow") out.push({ row: r, col: c, cell });
+    }
+  return out;
+});
+const excludeCount = computed(() => ruleCells.value.filter((x) => x.cell.mode === "exclude").length);
+
+// ─── search + view ───
+const search = ref("");
+const q = computed(() => search.value.trim().toLowerCase());
+const shownRows = computed(() => {
+  if (!q.value) return rows.value;
+  const hit = rows.value.filter((r) => r.toLowerCase().includes(q.value));
+  return hit.length ? hit : rows.value;
+});
+const shownCols = computed(() => {
+  if (!q.value) return cols.value;
+  const hit = cols.value.filter((c) => c.toLowerCase().includes(q.value));
+  return hit.length ? hit : cols.value;
+});
+const big = computed(() => rows.value.length * cols.value.length > 60);
+const view = ref<"matrix" | "list">("matrix");
+const VIEW_OPTIONS: SegmentedOption<"matrix" | "list">[] = [
+  { value: "matrix", label: "Matrix" },
+  { value: "list", label: "Rules list" },
+];
+const listRows = computed(() =>
+  ruleCells.value.filter(
+    (x) => !q.value || x.row.toLowerCase().includes(q.value) || x.col.toLowerCase().includes(q.value),
+  ),
+);
+function fmtFactor(f: number): string {
+  return Number.isInteger(f) ? String(f) : f.toFixed(2).replace(/\.?0+$/, "");
+}
+</script>
+
+<template>
+  <div class="wp-pv">
+    <div class="wp-pv-stats">
+      <div class="wp-pv-stat">
+        <b>{{ rows.length }} × {{ cols.length }}</b><span>sources × targets</span>
+      </div>
+      <div class="wp-pv-stat">
+        <b>{{ ruleCells.length }}</b><span>rules set</span>
+      </div>
+      <div
+        v-if="excludeCount"
+        class="wp-pv-stat"
+      >
+        <b>{{ excludeCount }}</b><span>excludes</span>
+      </div>
+      <div
+        v-if="exceptions.length"
+        class="wp-pv-stat"
+      >
+        <b>{{ exceptions.length }}</b><span>exception{{ exceptions.length === 1 ? "" : "s" }}</span>
+      </div>
+      <div
+        v-if="targetSelect"
+        class="wp-pv-stat"
+      >
+        <b>{{ targetSelect }}</b><span>reach</span>
+      </div>
+    </div>
+    <div
+      v-if="big"
+      class="wp-pv-tool"
+    >
+      <SearchInput
+        v-model="search"
+        placeholder="Filter rows or columns…"
+        data-test="constraint-search"
+        class="wp-pv-search"
+      />
+      <span class="wp-pv-label">Show</span>
+      <WpSegmented
+        v-model="view"
+        :options="VIEW_OPTIONS"
+        size="sm"
+        aria-label="Show"
+        test-prefix="constraint"
+      />
+    </div>
+    <div
+      v-if="view === 'matrix'"
+      class="wp-cn-wrap"
+    >
+      <ConstraintMatrixPreview
+        :rows="shownRows"
+        :cols="shownCols"
+        :matrix="matrix"
+        :source-name="sourceName"
+        :target-name="targetName"
+        :source-groups="sourceGroups"
+        :target-groups="targetGroups"
+        :exceptions="exceptions"
+        :target-select="targetSelect"
+        :ref-map="refMap"
+      />
+    </div>
+    <template v-else>
+      <table class="wp-pv-table">
+        <thead>
+          <tr>
+            <th>{{ sourceName }}</th>
+            <th>{{ targetName }}</th>
+            <th>Rule</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="x in listRows"
+            :key="`${x.row}|${x.col}`"
+            data-test="constraint-rule"
+          >
+            <td>{{ x.row }}</td>
+            <td>{{ x.col }}</td>
+            <td>
+              <span
+                class="wp-cn-rule"
+                :data-mode="x.cell.mode"
+              >{{ GLYPH[x.cell.mode] }} {{ LABEL[x.cell.mode] }}<template v-if="x.cell.mode === 'boost' || x.cell.mode === 'reduce'"> ×{{ fmtFactor(x.cell.factor) }}</template></span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <p
+        v-if="!listRows.length"
+        class="wp-pv-empty"
+      >
+        No rules match.
+      </p>
+    </template>
+  </div>
+</template>
+
+<style scoped src="./preview.css"></style>
+<style scoped>
+.wp-cn-wrap {
+  padding: 14px 16px 16px;
+  min-width: 0;
+}
+.wp-cn-rule {
+  font-family: var(--wp-font-mono);
+  font-size: 11.5px;
+  font-weight: 600;
+  padding: 2px 7px;
+  border-radius: min(5px, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg-3);
+}
+.wp-cn-rule[data-mode="boost"] {
+  color: var(--wp-success);
+  background: color-mix(in oklab, var(--wp-success) 14%, transparent);
+}
+.wp-cn-rule[data-mode="reduce"] {
+  color: var(--wp-warn);
+  background: color-mix(in oklab, var(--wp-warn) 14%, transparent);
+}
+.wp-cn-rule[data-mode="exclude"] {
+  color: var(--wp-danger-text, var(--wp-danger));
+  background: color-mix(in oklab, var(--wp-danger) 15%, transparent);
+}
+.wp-cn-rule[data-mode="only"] {
+  color: color-mix(in oklab, var(--wp-info) 55%, white);
+  background: color-mix(in oklab, var(--wp-info) 16%, transparent);
+}
+</style>

package/src/ContextMenu.vue

@@ -204,7 +204,7 @@ function isSectionEntry(entry: ContextMenuEntry): entry is ContextMenuSection {
     <ul
       v-if="visible"
       ref="menuEl"
-      class="wp-ctxmenu"
+      class="wp-ctxmenu wp-menu"
       :style="{ left: `${pos.x}px`, top: `${pos.y}px` }"
       role="menu"
       @click.stop
@@ -235,7 +235,8 @@ function isSectionEntry(entry: ContextMenuEntry): entry is ContextMenuSection {
                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 wp-menu__item"
+            :data-active="activeIndex === i || undefined"
             :class="{
               'wp-ctxmenu__item--danger': entry.danger,
               'wp-ctxmenu__item--accent': entry.accent,
@@ -268,26 +269,16 @@ function isSectionEntry(entry: ContextMenuEntry): entry is ContextMenuSection {
   </Teleport>
 </template>
 
+<style scoped src="./menu.css"></style>
+
 <style scoped>
+/* The panel (background, border, corners, padding, shadow, layer, text) and
+ * the rows' padding, corners and hover / active / disabled states are the
+ * shared menu look (menu.css), the same as Select's and Combobox's lists. */
 .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. */
+  /* Subtitles wrap awkwardly below 250px. */
   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
@@ -319,21 +310,16 @@ function isSectionEntry(entry: ContextMenuEntry): entry is ContextMenuSection {
   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[data-active="true"],
 .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
@@ -342,16 +328,11 @@ function isSectionEntry(entry: ContextMenuEntry): entry is ContextMenuSection {
   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[data-active="true"],
 .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;

package/src/CopyButton.vue

@@ -119,7 +119,7 @@ onBeforeUnmount(() => clearTimeout(timer));
 .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[data-size="sm"]:not([data-inline]) .pi { font-size: 12px; }
 .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); }

package/src/DataTable.vue

@@ -165,7 +165,6 @@ const span = computed(() => props.columns.length + (props.selectable ? 1 : 0));
         <tr>
           <th v-if="selectable" class="wp-data-table__check" scope="col">
             <Checkbox
-              class="wp-checkbox--inline"
               :model-value="allPicked"
               :indeterminate="somePicked"
               :disabled="loading || allKeys.length === 0"
@@ -227,7 +226,6 @@ const span = computed(() => props.columns.length + (props.selectable ? 1 : 0));
           >
             <td v-if="selectable" class="wp-data-table__check" @click.stop>
               <Checkbox
-                class="wp-checkbox--inline"
                 :model-value="picked.has(keyOf(row))"
                 aria-label="Select row"
                 @update:model-value="(on: boolean) => toggleRow(row, on)"

package/src/DatePicker.vue

@@ -209,7 +209,7 @@ function clear(): void {
   padding: 0 var(--wp-space-2); border: 0; border-radius: var(--wp-radius-sm);
   background: transparent; color: var(--wp-text-muted); cursor: pointer; font: inherit;
 }
-.wp-date__nav .pi { font-size: 11px; }
+.wp-date__nav .pi { font-size: 12px; }
 .wp-date__nav:hover, .wp-date__link:hover:not(:disabled) { background: var(--wp-row-hover); color: var(--wp-text); }
 .wp-date__nav:focus-visible, .wp-date__link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
 .wp-date__link:disabled { opacity: 0.45; cursor: not-allowed; }

package/src/DerivationCondition.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+/** One derivation condition: a single test, or an ALL OF / ANY OF group
+ *  drawn as a nested box (schema v7 AND / OR). */
+import type { Condition } from "./preview-readers";
+
+defineOptions({ name: "DerivationCondition" });
+defineProps<{ cond: Condition }>();
+</script>
+
+<template>
+  <span
+    v-if="cond.kind === 'test'"
+    class="wp-dv-test"
+    data-test="derivation-test"
+  >
+    {{ cond.var }} <em>{{ cond.op.replace(/_/g, " ") }}</em>{{ cond.value !== null ? ` ${cond.value}` : "" }}
+  </span>
+  <div
+    v-else
+    class="wp-dv-group"
+    :data-match="cond.match"
+    data-test="derivation-group"
+  >
+    <span class="wp-dv-group__head">{{ cond.match === "any" ? "ANY OF" : "ALL OF" }}</span>
+    <DerivationCondition
+      v-for="(c, i) in cond.conditions"
+      :key="i"
+      :cond="c"
+    />
+  </div>
+</template>
+
+<style scoped>
+.wp-dv-test {
+  display: inline-block;
+  align-self: flex-start;
+  font-family: var(--wp-font-mono);
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: min(5px, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg-3);
+  color: var(--wp-text);
+  overflow-wrap: anywhere;
+}
+.wp-dv-test em {
+  font-style: normal;
+  color: var(--wp-text-muted);
+}
+.wp-dv-group {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 5px;
+  max-width: 100%;
+  padding: 6px 8px;
+  border: 1px dashed var(--wp-border-strong);
+  border-radius: min(8px, var(--wp-radius-cap, 999px));
+}
+.wp-dv-group__head {
+  font-family: var(--wp-font-mono);
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: var(--wp-constraint-source-text);
+}
+.wp-dv-group[data-match="any"] > .wp-dv-group__head {
+  color: var(--wp-constraint-target-text);
+}
+</style>