@dumiflex/wp-kit 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [0.15.0](https://github.com/DumiFlex/wp-kit/compare/v0.14.0...v0.15.0) (2026-11-09)
+
+
+### Features
+
+* **post-card:** show a few sample values from the pack ([#111](https://github.com/DumiFlex/wp-kit/issues/111)) ([c01cdc2](https://github.com/DumiFlex/wp-kit/commit/c01cdc27db3c33c33c7ff59aa96b38473ac6e57e))
+
+
+### Bug Fixes
+
+* **preview:** weight multiplier wraps under the chance on narrow cards ([#110](https://github.com/DumiFlex/wp-kit/issues/110)) ([3ad37b8](https://github.com/DumiFlex/wp-kit/commit/3ad37b80c6f2cc724025b86d407ac9e383817767))
+
 ## [0.14.0](https://github.com/DumiFlex/wp-kit/compare/v0.13.0...v0.14.0) (2026-11-03)
 
 

package/package.json

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

package/src/PostCard.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 /**
  * A community post as a card: type chip, NSFW / Featured / recommended
- * badges, version, `owner/name` slug, bundle contents, description, up to
- * four tags, then stars, downloads and when it was updated. A coloured stripe
+ * badges, version, `owner/name` slug, bundle contents, a few sample values
+ * from the pack, description, up to four tags, then stars, downloads and when it was updated. A coloured stripe
  * on top says the type; a featured card is tinted, a deleted one faded.
  *
  * The whole card is one link. It renders an `<a>` by default; pass the app's
@@ -38,6 +38,8 @@ export interface PostCardData {
   deleted?: boolean | undefined;
   version?: number | null | undefined;
   bundleModules?: { count: number; names: string[] } | null | undefined;
+  /** A few values the pack rolls (its options), shown as "what it makes". */
+  samples?: string[] | undefined;
 }
 
 const props = withDefaults(defineProps<{
@@ -52,6 +54,7 @@ const type = computed(() => itemType(props.post.kind, props.post.subtype));
 const owner = computed(() => props.post.slug.split("/")[0]);
 const name = computed(() => props.post.slug.split("/").slice(1).join("/"));
 const tags = computed(() => props.post.tags ?? []);
+const samples = computed(() => (props.post.samples ?? []).filter((v) => v.trim()).slice(0, 4));
 </script>
 
 <template>
@@ -83,6 +86,10 @@ const tags = computed(() => props.post.tags ?? []);
       :names="post.bundleModules.names"
     />
 
+    <ul v-if="samples.length" class="wp-post-card__samples" aria-label="Sample values">
+      <li v-for="(v, i) in samples" :key="i" class="wp-post-card__sample">{{ v }}</li>
+    </ul>
+
     <p v-if="post.description" class="wp-post-card__desc">{{ post.description }}</p>
 
     <div v-if="tags.length" class="wp-post-card__tags">
@@ -185,6 +192,28 @@ const tags = computed(() => props.post.tags ?? []);
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 }
+.wp-post-card__samples {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.wp-post-card__sample {
+  max-width: 100%;
+  overflow: hidden;
+  padding: 3px 9px;
+  font-family: var(--wp-font-mono);
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--wp-text);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  background: color-mix(in oklab, var(--post-card-c) 12%, var(--wp-bg-2));
+  border: 1px solid color-mix(in oklab, var(--post-card-c) 28%, var(--wp-border));
+  border-radius: min(6px, var(--wp-radius-cap, 999px));
+}
 .wp-post-card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
 .wp-post-card__tags .wp-chip { padding: 2px 8px; font-size: 11px; }
 .wp-post-card__foot {

package/src/WildcardPreview.vue

@@ -405,7 +405,10 @@ function isLong(o: WildcardOption): boolean {
                   >{{ expanded.has(`${g.name}|${oidx}`) ? "Show less" : "Show all" }}</Button>
                 </td>
                 <td class="wp-wc__chance">
-                  <span>{{ totalWeight ? pct(Math.max(0, o.weight)) : "—" }}<template v-if="o.weight !== 1"> · ×{{ fmt(o.weight) }}</template></span>
+                  <span>{{ totalWeight ? pct(Math.max(0, o.weight)) : "—" }}<span
+                    v-if="o.weight !== 1"
+                    class="wp-wc__mult"
+                  ><span class="wp-wc__sep"> · </span>×{{ fmt(o.weight) }}</span></span>
                   <span
                     v-if="o.fallback"
                     class="wp-pv-fbtag"
@@ -549,6 +552,13 @@ function isLong(o: WildcardOption): boolean {
   .wp-wc__col-chance {
     width: 56px;
   }
+  /* "29% · ×2" doesn't fit 56px: the weight goes on its own line. */
+  .wp-wc__mult {
+    display: block;
+  }
+  .wp-wc__sep {
+    display: none;
+  }
   .wp-wc__bar {
     display: none;
   }