@dumiflex/wp-kit 0.7.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.7.1](https://github.com/DumiFlex/wp-kit/compare/v0.7.0...v0.7.1) (2026-11-03)
+
+
+### Bug Fixes
+
+* payload previews load their sheet once; SelectionBar says "1 report selected" ([#75](https://github.com/DumiFlex/wp-kit/issues/75)) ([d2774da](https://github.com/DumiFlex/wp-kit/commit/d2774dae3970f3b093778b0d84c5480a43961f9d))
+
 ## [0.7.0](https://github.com/DumiFlex/wp-kit/compare/v0.6.0...v0.7.0) (2026-11-03)
 
 

package/package.json

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

package/src/BundlePreview.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// The shared preview sheet (wp-pv-* classes), loaded once for every preview.
+import "./preview.css";
 /**
  * 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
@@ -195,7 +197,6 @@ const counts = computed(() => {
   </div>
 </template>
 
-<style scoped src="./preview.css"></style>
 <style scoped>
 .wp-bd-flow {
   display: grid;

package/src/CombinePreview.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// The shared preview sheet (wp-pv-* classes), loaded once for every preview.
+import "./preview.css";
 /** 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";
@@ -130,7 +132,6 @@ const shown = computed(() => (showAll.value ? inputs.value : inputs.value.slice(
   </div>
 </template>
 
-<style scoped src="./preview.css"></style>
 <style scoped>
 .wp-cb__out {
   font-family: var(--wp-font-mono);

package/src/ConstraintPreview.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// The shared preview sheet (wp-pv-* classes), loaded once for every preview.
+import "./preview.css";
 /**
  * Constraint: counts up top, then the grouped matrix (ConstraintMatrixPreview)
  * or, for a big matrix, a searchable list of only the cells that do
@@ -226,7 +228,6 @@ function fmtFactor(f: number): string {
   </div>
 </template>
 
-<style scoped src="./preview.css"></style>
 <style scoped>
 .wp-cn-wrap {
   padding: 14px 16px 16px;

package/src/DerivationPreview.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// The shared preview sheet (wp-pv-* classes), loaded once for every preview.
+import "./preview.css";
 /**
  * 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
@@ -191,7 +193,6 @@ function toggle(i: number): void {
   </div>
 </template>
 
-<style scoped src="./preview.css"></style>
 <style scoped>
 .wp-dv-io {
   display: flex;

package/src/FixedValuesPreview.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// The shared preview sheet (wp-pv-* classes), loaded once for every preview.
+import "./preview.css";
 /** Fixed values as a searchable variable → value → negative table, paged so
  *  a long list stays short until asked. */
 import { computed, ref } from "vue";
@@ -181,4 +183,3 @@ function toggle(i: number): void {
   </div>
 </template>
 
-<style scoped src="./preview.css"></style>

package/src/PayloadPreview.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// The shared preview sheet (wp-pv-* classes), loaded once for every preview.
+import "./preview.css";
 /**
  * Rich, read-only preview of a published module or bundle payload: the
  * community post page and its embed draw it, and the manager can too.
@@ -146,7 +148,6 @@ const KNOWN = new Set(["wildcard", "fixed_values", "combine", "derivation", "con
   </p>
 </template>
 
-<style scoped src="./preview.css"></style>
 <style scoped>
 .wp-payload-raw {
   padding: 18px 24px 22px;

package/src/SelectionBar.vue

@@ -11,16 +11,20 @@
  * `#start` sits right after the count (a filter, an option), the default slot
  * on the right before Clear. `sticky` keeps it at the top of its scroll area
  * while the list scrolls under it (`--wp-selection-bar-top` moves it below a
- * fixed header). `noun` says what is selected ("3 options selected"). Escape
+ * fixed header). `noun` says what is selected ("3 options selected");
+ * `noun-one` is its singular for a count of 1 ("1 option selected"), by
+ * default the noun without its last "s". Escape
  * inside the bar clears, like Clear; the count is read out as it changes.
  */
-import { onBeforeUnmount, onMounted, ref } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import Button from "./Button.vue";
 
 const props = withDefaults(defineProps<{
   count: number;
   /** What a row is, plural ("options"); left out it says "3 selected". */
   noun?: string | undefined;
+  /** The noun for one row ("option"); defaults to `noun` without its last "s". */
+  nounOne?: string | undefined;
   /** Stick to the top of the scroll area. */
   sticky?: boolean | undefined;
   /** Hide the Clear button (the host clears another way). */
@@ -28,10 +32,17 @@ const props = withDefaults(defineProps<{
   clearLabel?: string | undefined;
   /** The toolbar's accessible name. */
   label?: string | undefined;
-}>(), { noun: undefined, clearLabel: "Clear", label: "Bulk actions" });
+}>(), { noun: undefined, nounOne: undefined, clearLabel: "Clear", label: "Bulk actions" });
 
 const emit = defineEmits<{ clear: [] }>();
 
+/** "3 options selected", "1 option selected", or "3 selected" with no noun. */
+const countText = computed(() => {
+  if (!props.noun) return `${props.count} selected`;
+  const one = props.nounOne ?? props.noun.replace(/s$/, "");
+  return `${props.count} ${props.count === 1 ? one : props.noun} selected`;
+});
+
 function onKeydown(ev: KeyboardEvent): void {
   if (ev.key !== "Escape" || props.hideClear) return;
   ev.stopPropagation();
@@ -55,7 +66,7 @@ onBeforeUnmount(() => root.value?.removeEventListener("keydown", onKeydown));
     :data-sticky="sticky || undefined"
     data-test="selection-bar"
   >
-    <span class="wp-selbar__count" aria-live="polite" data-test="selection-count">{{ count }}{{ noun ? ` ${noun}` : "" }} selected</span>
+    <span class="wp-selbar__count" aria-live="polite" data-test="selection-count">{{ countText }}</span>
     <slot name="start" />
     <span class="wp-selbar__spacer" />
     <slot />

package/src/WildcardPreview.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+// The shared preview sheet (wp-pv-* classes), loaded once for every preview.
+import "./preview.css";
 /**
  * Wildcard preview built for big pools: a stats strip, search + filters,
  * tag facets with counts, and options as table rows (chance, tags,
@@ -504,7 +506,6 @@ function isLong(o: WildcardOption): boolean {
   </div>
 </template>
 
-<style scoped src="./preview.css"></style>
 <style scoped>
 .wp-wc__split[data-facets] {
   display: grid;

package/src/preview.css

@@ -1,7 +1,10 @@
 /* Shared chrome for the per-type payload previews (stats strip, toolbar,
-   row tables, section labels). Each preview pulls it in scoped
-   (`<style scoped src="./preview.css">`), so it styles only that piece's own
-   markup. Every selector is `.wp-pv-*`. */
+   row tables, section labels). Every preview imports it from its script
+   (`import "./preview.css"`), so a page carries ONE copy however many
+   previews it shows; pulled in scoped, each piece got its own copy (seven in
+   the community embed). Every selector is `.wp-pv-*`, so it is safe global.
+   Unlayered like button.css and menu.css: in @layer wp-extension a host's
+   unlayered reset (Tailwind's preflight) would strip its borders. */
 
 .wp-pv {
   container-type: inline-size;