@dumiflex/wp-kit 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.7.0](https://github.com/DumiFlex/wp-kit/compare/v0.6.0...v0.7.0) (2026-11-03)
+
+
+### Features
+
+* IconPicker all (every PrimeIcons glyph, searchable), inline, color and allow-none ([#70](https://github.com/DumiFlex/wp-kit/issues/70)) ([a0dc837](https://github.com/DumiFlex/wp-kit/commit/a0dc83716441c8061428e69faf751ab7b52ed8ae))
+* RichText, the module payload previews and the post loading shapes move into the kit ([#71](https://github.com/DumiFlex/wp-kit/issues/71)) ([b92d62f](https://github.com/DumiFlex/wp-kit/commit/b92d62f87ecd44cb205d2265d7d56c9018e29144))
+* SelectionBar, the one bulk-action bar over a list of ticked rows ([#69](https://github.com/DumiFlex/wp-kit/issues/69)) ([13a51e2](https://github.com/DumiFlex/wp-kit/commit/13a51e22b0e27b404700dc6f3fb2f34fd912d10a))
+* SettingGroup and SettingRow, the settings page rows both apps use ([#68](https://github.com/DumiFlex/wp-kit/issues/68)) ([20f4ff8](https://github.com/DumiFlex/wp-kit/commit/20f4ff8a8c28da63fcabfd9f2c0c2bf28a4f60dd))
+
+
+### Bug Fixes
+
+* draw WorkingLine's marks on a canvas so they glide in Firefox ([#67](https://github.com/DumiFlex/wp-kit/issues/67)) ([6565f15](https://github.com/DumiFlex/wp-kit/commit/6565f1575ecb224ad9e94efdef611f5c31b12849))
+
 ## [0.6.0](https://github.com/DumiFlex/wp-kit/compare/v0.5.0...v0.6.0) (2026-11-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dumiflex/wp-kit",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Vue 3 component kit shared by the Wildcard Pipeline manager, canvas and community site.",
   "keywords": [
     "vue",

package/src/BundlePreview.vue

@@ -0,0 +1,254 @@
+<script setup lang="ts">
+/**
+ * Bundle: what the bundle needs from outside vs what it sets (folded from
+ * its children), then a child list beside the selected child's own full
+ * preview. Narrow hosts stack the list above the preview.
+ */
+import { computed, ref } from "vue";
+import PayloadPreview from "./PayloadPreview.vue";
+import ListRow from "./ListRow.vue";
+import Chip from "./Chip.vue";
+import { itemType, kindColour, kindIcon, moduleSubtype } from "./kind-colour";
+import {
+  derivationRules,
+  fixedValues,
+  innerOf,
+  readArray,
+  readGroups,
+  readObject,
+  readString,
+  varFlow,
+  wildcardOptions,
+  type Obj,
+} from "./preview-readers";
+
+const props = defineProps<{
+  payload: Obj;
+  refNames: Record<string, string>;
+  refGroups: Record<string, Record<string, string[]>>;
+}>();
+
+interface Child {
+  key: string;
+  id: string;
+  name: string;
+  type: string;
+  enabled: boolean;
+  raw: Obj;
+}
+function childName(c: unknown): string | null {
+  const meta = readObject(c, "meta");
+  return (
+    readString(meta, "name") ??
+    readString(meta, "library_name") ??
+    readString(c, "name") ??
+    readString(readObject(c, "payload"), "var_binding")
+  );
+}
+const children = computed<Child[]>(() =>
+  readArray(props.payload, "children").map((c, i) => ({
+    key: readString(c, "id") ?? String(i),
+    id: readString(c, "id") ?? "",
+    name: childName(c) ?? "—",
+    type: readString(c, "type") ?? "—",
+    enabled: (c as Obj | null)?.["enabled"] !== false,
+    raw: (c && typeof c === "object" ? c : {}) as Obj,
+  })),
+);
+/** Sibling names + wildcard axes so a child constraint resolves its
+ *  wildcards the same way the list does. */
+const childRefNames = computed(() => {
+  const out: Record<string, string> = { ...props.refNames };
+  for (const c of children.value) if (c.id) out[c.id] = c.name;
+  return out;
+});
+const childRefGroups = computed(() => {
+  const out: Record<string, Record<string, string[]>> = { ...props.refGroups };
+  for (const c of children.value) {
+    const g = readGroups(innerOf(c.raw), "tag_groups");
+    if (c.id && g) out[c.id] = g;
+  }
+  return out;
+});
+function summary(c: Child): string {
+  const inner = innerOf(c.raw);
+  const label = c.type.replace(/_/g, " ");
+  switch (c.type) {
+    case "wildcard": {
+      const n = wildcardOptions(inner).length;
+      const b = readString(inner, "var_binding");
+      return `${label} · ${n} option${n === 1 ? "" : "s"}${b ? ` · $${b}` : ""}`;
+    }
+    case "fixed_values": {
+      const n = fixedValues(inner).length;
+      return `${label} · ${n} value${n === 1 ? "" : "s"}`;
+    }
+    case "derivation": {
+      const n = derivationRules(inner).length;
+      return `${label} · ${n} rule${n === 1 ? "" : "s"}`;
+    }
+    case "combine": {
+      const out = readString(inner, "output_var");
+      return out ? `${label} · $${out}` : label;
+    }
+    case "constraint": {
+      const s = readString(inner, "source_wildcard_id");
+      const t = readString(inner, "target_wildcard_id");
+      const name = (id: string | null): string => (id ? (childRefNames.value[id] ?? id) : "?");
+      return `${label} · ${name(s)} → ${name(t)}`;
+    }
+    default:
+      return label;
+  }
+}
+const flow = computed(() => varFlow(props.payload));
+const provide = computed(() => flow.value.reads.filter((v) => !flow.value.sets.includes(v)));
+
+const selected = ref<string | null>(null);
+const current = computed(
+  () => children.value.find((c) => c.key === selected.value) ?? children.value[0] ?? null,
+);
+const counts = computed(() => {
+  const out: Record<string, number> = {};
+  for (const c of children.value) out[c.type] = (out[c.type] ?? 0) + 1;
+  return out;
+});
+</script>
+
+<template>
+  <div class="wp-pv wp-bundle">
+    <div class="wp-pv-stats">
+      <div class="wp-pv-stat">
+        <b>{{ children.length }}</b><span>module{{ children.length === 1 ? "" : "s" }}</span>
+      </div>
+      <div
+        v-for="(n, t) in counts"
+        :key="t"
+        class="wp-pv-stat wp-pv-hide-narrow"
+      >
+        <b>{{ n }}</b><span>{{ String(t).replace(/_/g, " ") }}</span>
+      </div>
+    </div>
+    <div
+      v-if="provide.length || flow.sets.length"
+      class="wp-bd-flow"
+    >
+      <template v-if="provide.length">
+        <span class="wp-pv-label">You provide</span>
+        <div>
+          <code
+            v-for="v in provide"
+            :key="`p-${v}`"
+            class="wp-bd-var"
+          >${{ v }}</code>
+          <span class="wp-bd-hint">read inside, not set by any module here</span>
+        </div>
+      </template>
+      <template v-if="flow.sets.length">
+        <span class="wp-pv-label">It sets</span>
+        <div>
+          <code
+            v-for="v in flow.sets"
+            :key="`s-${v}`"
+            class="wp-bd-var"
+          >${{ v }}</code>
+        </div>
+      </template>
+    </div>
+    <div class="wp-bd-split">
+      <nav
+        class="wp-bd-kids wp-bundle-children"
+        data-wp-rows
+      >
+        <ListRow
+          v-for="c in children"
+          :key="c.key"
+          class="wp-bd-kid wp-bundle-child"
+          :selected="current?.key === c.key"
+          :icon="kindIcon(c.type)"
+          :description="`${summary(c)}${c.enabled ? '' : ' · disabled'}`"
+          :muted="!c.enabled"
+          data-test="bundle-child"
+          @click="selected = c.key"
+        >
+          {{ c.name }}
+        </ListRow>
+      </nav>
+      <div
+        v-if="current"
+        class="wp-bd-pane"
+        data-test="bundle-child-body"
+      >
+        <div class="wp-bd-pane__head">
+          <Chip v-if="moduleSubtype(current.type)" :color="kindColour(itemType('module', moduleSubtype(current.type)))">{{ itemType('module', moduleSubtype(current.type)) }}</Chip>
+          <Chip v-else>{{ current.type }}</Chip>
+          <b>{{ current.name }}</b>
+        </div>
+        <PayloadPreview
+          :payload="current.raw"
+          :ref-names="childRefNames"
+          :ref-groups="childRefGroups"
+          nested
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped src="./preview.css"></style>
+<style scoped>
+.wp-bd-flow {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 6px 14px;
+  align-items: baseline;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--wp-border);
+}
+.wp-bd-flow > div {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: baseline;
+}
+.wp-bd-var {
+  font-family: var(--wp-font-mono);
+  font-size: 12px;
+  color: var(--wp-success);
+}
+.wp-bd-hint {
+  font-size: 11.5px;
+  color: var(--wp-text-dim);
+}
+.wp-bd-split {
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr);
+}
+@container (max-width: 700px) {
+  .wp-bd-split {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .wp-bd-kids {
+    border-right: 0;
+    border-bottom: 1px solid var(--wp-border);
+  }
+}
+.wp-bd-kids {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px;
+  border-right: 1px solid var(--wp-border);
+}
+.wp-bd-pane {
+  min-width: 0;
+}
+.wp-bd-pane__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--wp-border);
+  font-size: 13px;
+}
+</style>

package/src/CombinePreview.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+/** Combine: the template in its own block, its negative under it, and a
+ *  list of the variables it reads with where each one is used. */
+import { computed, ref } from "vue";
+import TokenizedValue from "./TokenizedValue.vue";
+import Button from "./Button.vue";
+import { readString, readStrings, scanText, type Obj } from "./preview-readers";
+
+const props = defineProps<{
+  inner: Obj | null;
+  refMap: ReadonlyMap<string, string>;
+}>();
+
+const PAGE = 6;
+
+const template = computed(() => readString(props.inner, "template") ?? "");
+const negative = computed(() => readString(props.inner, "negative") ?? "");
+const output = computed(() => readString(props.inner, "output_var"));
+const tplScan = computed(() => scanText(template.value));
+const negScan = computed(() => scanText(negative.value));
+
+interface InputRow {
+  name: string;
+  where: string;
+}
+const inputs = computed<InputRow[]>(() => {
+  const names = [
+    ...new Set([
+      ...readStrings(props.inner, "input_vars"),
+      ...tplScan.value.vars,
+      ...negScan.value.vars,
+      ...negScan.value.negVars,
+    ]),
+  ];
+  return names.map((name) => {
+    const where: string[] = [];
+    if (tplScan.value.vars.includes(name)) where.push("template");
+    if (negScan.value.vars.includes(name)) where.push("negative");
+    if (negScan.value.negVars.includes(name) || tplScan.value.negVars.includes(name))
+      where.push("negative (.neg)");
+    return { name, where: where.join(", ") || "declared, not used" };
+  });
+});
+const showAll = ref(false);
+const shown = computed(() => (showAll.value ? inputs.value : inputs.value.slice(0, PAGE)));
+</script>
+
+<template>
+  <div class="wp-pv">
+    <div class="wp-pv-stats">
+      <div class="wp-pv-stat">
+        <b>{{ inputs.length }}</b><span>input{{ inputs.length === 1 ? "" : "s" }}</span>
+      </div>
+      <div
+        v-if="tplScan.picks"
+        class="wp-pv-stat"
+      >
+        <b>{{ tplScan.picks }}</b><span>inline pick{{ tplScan.picks === 1 ? "" : "s" }}</span>
+      </div>
+      <div class="wp-pv-stat">
+        <b>{{ negative ? "yes" : "no" }}</b><span>negative</span>
+      </div>
+    </div>
+    <div class="wp-pv-sec">
+      Template<template v-if="output">
+        → <span class="wp-cb__out">${{ output }}</span>
+      </template>
+    </div>
+    <div
+      class="wp-pv-block wp-combine__template"
+      data-test="combine-template"
+    >
+      <TokenizedValue
+        :value="template"
+        :uuid-to-name="refMap"
+      />
+    </div>
+    <template v-if="negative">
+      <div class="wp-pv-sec wp-cb__neglabel">
+        Negative
+      </div>
+      <div
+        class="wp-pv-block wp-pv-block--neg"
+        data-test="combine-negative"
+      >
+        <TokenizedValue
+          :value="negative"
+          :uuid-to-name="refMap"
+        />
+      </div>
+    </template>
+    <template v-if="inputs.length">
+      <div class="wp-pv-sec">
+        Inputs
+      </div>
+      <table class="wp-pv-table">
+        <colgroup>
+          <col style="width: 180px">
+          <col>
+        </colgroup>
+        <tbody>
+          <tr
+            v-for="i in shown"
+            :key="i.name"
+            data-test="combine-input"
+          >
+            <td class="wp-pv-var">
+              ${{ i.name }}
+            </td>
+            <td :class="{ 'wp-cb__unused': i.where === 'declared, not used' }">
+              {{ i.where }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div
+        v-if="inputs.length > PAGE"
+        class="wp-pv-more"
+      >
+        <Button
+          variant="link"
+          size="sm"
+          @click="showAll = !showAll"
+        >
+          {{ showAll ? "Show fewer" : `Show ${inputs.length - PAGE} more` }}
+        </Button>
+      </div>
+    </template>
+    <div class="wp-cb__pad" />
+  </div>
+</template>
+
+<style scoped src="./preview.css"></style>
+<style scoped>
+.wp-cb__out {
+  font-family: var(--wp-font-mono);
+  color: var(--wp-success);
+  text-transform: none;
+  letter-spacing: 0;
+}
+.wp-cb__neglabel {
+  color: var(--wp-danger-text, var(--wp-danger));
+}
+.wp-cb__unused {
+  color: var(--wp-text-dim);
+}
+.wp-cb__pad {
+  height: 6px;
+}
+</style>

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