@dumiflex/wp-kit 0.6.0 → 0.7.0

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/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>

package/src/DerivationPreview.vue

@@ -0,0 +1,345 @@
+<script setup lang="ts">
+/**
+ * Derivation as rule cards: what it reads / writes / sends to negatives,
+ * then per rule IF / ELSE IF / ELSE with nested AND / OR groups and every
+ * action numbered (the action plus its schema v8 `extra_actions`).
+ */
+import { computed, ref } from "vue";
+import TokenizedValue from "./TokenizedValue.vue";
+import DerivationCondition from "./DerivationCondition.vue";
+import Disclosure from "./Disclosure.vue";
+import {
+  derivationRules,
+  varFlow,
+  type ActionOp,
+  type DerivationRule,
+  type Obj,
+} from "./preview-readers";
+
+const props = defineProps<{
+  /** The whole module row (the var summary reads it). */
+  payload: Obj | null;
+  inner: Obj | null;
+  refMap: ReadonlyMap<string, string>;
+}>();
+
+const OPEN_RULES = 3;
+
+const rules = computed(() => derivationRules(props.inner));
+const flow = computed(() => varFlow(props.payload));
+const branchCount = computed(() =>
+  rules.value.reduce((n, r) => n + r.branches.length + (r.fallback ? 1 : 0), 0),
+);
+
+const OP_LABEL: Record<ActionOp, string> = {
+  set: "SET",
+  append: "APPEND",
+  prepend: "PREPEND",
+  neg_add: "+ NEGATIVE",
+  neg_replace: "REPLACE NEG",
+  other: "",
+};
+function opLabel(op: ActionOp, mode: string): string {
+  return OP_LABEL[op] || mode.toUpperCase();
+}
+function ruleSummary(r: DerivationRule): string {
+  const n = r.branches.length;
+  const parts = [`${n} branch${n === 1 ? "" : "es"}${r.fallback ? " + else" : ""}`];
+  const targets = [
+    ...new Set(
+      [...r.branches.flatMap((b) => b.actions), ...(r.fallback ?? [])]
+        .filter((a) => a.op !== "neg_add" && a.op !== "neg_replace")
+        .map((a) => a.target),
+    ),
+  ];
+  if (targets.length) parts.push(`sets ${targets.join(", ")}`);
+  return parts.join(" · ");
+}
+const toggled = ref(new Set<number>());
+function isOpen(i: number): boolean {
+  const byDefault = i < OPEN_RULES;
+  return toggled.value.has(i) ? !byDefault : byDefault;
+}
+function toggle(i: number): void {
+  const next = new Set(toggled.value);
+  if (next.has(i)) next.delete(i);
+  else next.add(i);
+  toggled.value = next;
+}
+</script>
+
+<template>
+  <div class="wp-pv wp-derivation">
+    <div class="wp-pv-stats">
+      <div class="wp-pv-stat">
+        <b>{{ rules.length }}</b><span>rule{{ rules.length === 1 ? "" : "s" }}</span>
+      </div>
+      <div class="wp-pv-stat">
+        <b>{{ branchCount }}</b><span>branches</span>
+      </div>
+    </div>
+    <div class="wp-dv-io">
+      <div v-if="flow.reads.length">
+        <span class="wp-pv-label">Reads</span>
+        <code
+          v-for="v in flow.reads"
+          :key="`r-${v}`"
+          class="wp-dv-var"
+        >${{ v }}</code>
+      </div>
+      <div v-if="flow.sets.length">
+        <span class="wp-pv-label">Writes</span>
+        <code
+          v-for="v in flow.sets"
+          :key="`w-${v}`"
+          class="wp-dv-var"
+        >${{ v }}</code>
+      </div>
+      <div v-if="flow.negatives.length">
+        <span class="wp-pv-label">Negatives</span>
+        <code
+          v-for="v in flow.negatives"
+          :key="`n-${v}`"
+          class="wp-dv-var wp-dv-var--neg"
+        >{{ v }}</code>
+      </div>
+    </div>
+
+    <div
+      v-for="(r, ri) in rules"
+      :key="ri"
+      class="wp-dv-rule wp-derivation__rule"
+    >
+      <Disclosure
+        flush
+        lazy
+        class="wp-dv-rule__fold"
+        :open="isOpen(ri)"
+        @update:open="toggle(ri)"
+      >
+        <template #summary>
+          <b class="wp-dv-rule__name">Rule {{ ri + 1 }}</b><span class="wp-dv-rule__sum">{{ ruleSummary(r) }}</span>
+        </template>
+        <div
+          v-for="(b, bi) in r.branches"
+          :key="bi"
+          class="wp-dv-branch wp-derivation__branch"
+        >
+          <span class="wp-dv-kw">{{ bi === 0 ? "IF" : "ELSE IF" }}</span>
+          <div class="wp-dv-body">
+            <DerivationCondition
+              v-if="b.condition"
+              :cond="b.condition"
+            />
+            <span
+              v-else
+              class="wp-dv-none"
+            >(no condition)</span>
+            <ol class="wp-dv-steps">
+              <li
+                v-for="(a, ai) in b.actions"
+                :key="ai"
+                data-test="derivation-action"
+              >
+                <span class="wp-dv-i">{{ ai + 1 }}</span>
+                <span class="wp-dv-op-cell">
+                  <span
+                    class="wp-dv-op"
+                    :data-op="a.op"
+                  >{{ opLabel(a.op, a.mode) }}</span>
+                  <code class="wp-dv-target wp-derivation__target">{{ a.target }}</code>
+                </span>
+                <span class="wp-dv-val"><TokenizedValue
+                  :value="a.value"
+                  :uuid-to-name="refMap"
+                /></span>
+              </li>
+            </ol>
+          </div>
+        </div>
+        <div
+          v-if="r.fallback"
+          class="wp-dv-branch wp-derivation__branch is-else"
+        >
+          <span class="wp-dv-kw wp-dv-kw--else">ELSE</span>
+          <div class="wp-dv-body">
+            <ol class="wp-dv-steps">
+              <li
+                v-for="(a, ai) in r.fallback"
+                :key="ai"
+                data-test="derivation-action"
+              >
+                <span class="wp-dv-i">{{ ai + 1 }}</span>
+                <span class="wp-dv-op-cell">
+                  <span
+                    class="wp-dv-op"
+                    :data-op="a.op"
+                  >{{ opLabel(a.op, a.mode) }}</span>
+                  <code class="wp-dv-target wp-derivation__target">{{ a.target }}</code>
+                </span>
+                <span class="wp-dv-val"><TokenizedValue
+                  :value="a.value"
+                  :uuid-to-name="refMap"
+                /></span>
+              </li>
+            </ol>
+          </div>
+        </div>
+      </Disclosure>
+    </div>
+    <div class="wp-dv-pad" />
+  </div>
+</template>
+
+<style scoped src="./preview.css"></style>
+<style scoped>
+.wp-dv-io {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 24px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--wp-border);
+}
+.wp-dv-io > div {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+.wp-dv-var {
+  font-family: var(--wp-font-mono);
+  font-size: 12px;
+  color: var(--wp-success);
+}
+.wp-dv-var--neg {
+  color: var(--wp-danger-text, var(--wp-danger));
+  background: color-mix(in oklab, var(--wp-danger) 10%, transparent);
+  border-radius: min(3px, var(--wp-radius-cap, 999px));
+  padding: 0 4px;
+}
+.wp-dv-rule {
+  margin: 14px 16px 0;
+  border: 1px solid var(--wp-border);
+  border-radius: min(10px, var(--wp-radius-cap, 999px));
+  overflow: hidden;
+}
+.wp-dv-rule__name {
+  font-size: 12.5px;
+}
+.wp-dv-rule__sum {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--wp-text-dim);
+  font-size: 11.5px;
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.wp-dv-branch {
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr);
+}
+.wp-dv-branch + .wp-dv-branch {
+  border-top: 1px solid var(--wp-border);
+}
+.wp-dv-kw {
+  padding: 12px 0 0 14px;
+  font-family: var(--wp-font-mono);
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: var(--wp-accent-text);
+}
+.wp-dv-kw--else {
+  color: var(--wp-text-dim);
+}
+.wp-dv-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 14px 12px 0;
+  min-width: 0;
+}
+.wp-dv-none {
+  font-size: 12px;
+  color: var(--wp-text-dim);
+}
+.wp-dv-steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.wp-dv-steps li {
+  display: grid;
+  grid-template-columns: 18px minmax(120px, max-content) minmax(0, 1fr);
+  align-items: baseline;
+  gap: 8px;
+}
+.wp-dv-i {
+  font-family: var(--wp-font-mono);
+  font-size: 11px;
+  color: var(--wp-text-dim);
+  text-align: right;
+}
+.wp-dv-op-cell {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  white-space: nowrap;
+}
+.wp-dv-op {
+  font-family: var(--wp-font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: min(5px, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg-3);
+  color: var(--wp-text-muted);
+}
+.wp-dv-op[data-op="set"] {
+  background: color-mix(in oklab, var(--wp-success) 14%, transparent);
+  color: var(--wp-success);
+}
+.wp-dv-op[data-op="append"],
+.wp-dv-op[data-op="prepend"] {
+  background: color-mix(in oklab, var(--wp-info) 16%, transparent);
+  color: color-mix(in oklab, var(--wp-info) 55%, white);
+}
+.wp-dv-op[data-op="neg_add"],
+.wp-dv-op[data-op="neg_replace"] {
+  background: color-mix(in oklab, var(--wp-danger) 16%, transparent);
+  color: var(--wp-danger-text, var(--wp-danger));
+}
+.wp-dv-target {
+  font-family: var(--wp-font-mono);
+  font-size: 12px;
+  color: var(--wp-success);
+}
+.wp-dv-val {
+  font-family: var(--wp-font-mono);
+  font-size: 12px;
+  line-height: 1.6;
+  padding: 3px 9px;
+  border-radius: min(5px, var(--wp-radius-cap, 999px));
+  background: var(--wp-bg-3);
+  color: var(--wp-text);
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
+.wp-dv-pad {
+  height: 14px;
+}
+@container (max-width: 640px) {
+  .wp-dv-steps li {
+    grid-template-columns: 18px minmax(0, 1fr);
+  }
+  .wp-dv-val {
+    grid-column: 2;
+  }
+}
+</style>