@dumiflex/wp-kit 0.13.0 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # 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)
+
+
+### Features
+
+* canvas controls at ComfyUI's own sizes ([#105](https://github.com/DumiFlex/wp-kit/issues/105)) ([22e6d62](https://github.com/DumiFlex/wp-kit/commit/22e6d62834d197ef4c4ce64a463fbbbe50f75610))
+
 ## [0.13.0](https://github.com/DumiFlex/wp-kit/compare/v0.12.0...v0.13.0) (2026-11-03)
 
 

package/package.json

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

package/src/Checkbox.vue

@@ -8,8 +8,9 @@
  *   <Checkbox v-model="favorites" field label="Favorites only" />
  *
  * Box: a `<button role="checkbox">`, so a wrapping `<label>` ticks it like an
- * input. Click, Space and Enter toggle. `size="sm"` is the 12px box of the
- * canvas rows' on/off mark; md is 14px. A parent can tint the checked fill
+ * input. Click, Space and Enter toggle. `size="sm"` is the 14px box of the
+ * canvas rows' on/off mark; md is 16px (ComfyUI's own box). Either takes a
+ * 24px click around it, so a lone box is as easy to hit as a native row. A parent can tint the checked fill
  * with `--check-on` (a bundle header uses its bundle colour).
  *
  * Without a label the box is the root: `class`, `title`, `data-test` and a
@@ -170,8 +171,9 @@ function toggle(): void {
 .wp-check {
   appearance: none;
   box-sizing: border-box;
-  width: 14px;
-  height: 14px;
+  position: relative;
+  width: 16px;
+  height: 16px;
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
@@ -188,9 +190,12 @@ function toggle(): void {
   cursor: pointer;
   transition: background var(--wp-motion-quick), border-color var(--wp-motion-quick), color var(--wp-motion-quick);
 }
-.wp-check svg { width: 9px; height: 9px; display: block; pointer-events: none; }
-.wp-check--sm { width: 12px; height: 12px; border-width: 1px; border-radius: min(2px, var(--wp-radius-cap, 999px)); }
-.wp-check--sm svg { width: 7px; height: 7px; }
+.wp-check svg { width: 10px; height: 10px; display: block; pointer-events: none; }
+/* The click reaches 24 x 24 around the box (::before is the TUI look's [x]). */
+.wp-check::after { content: ""; position: absolute; inset: -4px; }
+.wp-check--sm { width: 14px; height: 14px; border-width: 1px; border-radius: min(2px, var(--wp-radius-cap, 999px)); }
+.wp-check--sm::after { inset: -5px; }
+.wp-check--sm svg { width: 8px; height: 8px; }
 .wp-check:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
 .wp-check:where(:not(:disabled, [aria-checked="true"], [aria-checked="mixed"]):hover) { border-color: var(--wp-accent-500); }
 .wp-check:where([aria-invalid="true"]) { border-color: var(--wp-error-border); }

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;
   }

package/src/WpIconButton.vue

@@ -58,6 +58,7 @@ const emit = defineEmits<{ click: [evt: MouseEvent] }>();
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  position: relative;
   flex: none;
   box-sizing: border-box;
   width: 20px;
@@ -72,6 +73,9 @@ const emit = defineEmits<{ click: [evt: MouseEvent] }>();
   cursor: pointer;
   transition: background var(--wp-motion-quick), border-color var(--wp-motion-quick), color var(--wp-motion-quick);
 }
+/* The drawn box stays 20 px (it lines up with ComfyUI's own icon-sm and our
+   rows); the click reaches 24 x 24, ComfyUI's row control size. */
+.wp-icon-btn::after { content: ""; position: absolute; inset: -3px; }
 .wp-icon-btn[data-tone="accent"] { --tone: var(--wp-accent); }
 .wp-icon-btn[data-tone="warn"] { --tone: var(--wp-warn); }
 .wp-icon-btn[data-tone="danger"] { --tone: var(--wp-danger); }

package/src/WpNumber.vue

@@ -142,13 +142,15 @@ function bump(dir: 1 | -1): void {
 <style scoped src="./field.css"></style>
 
 <style scoped>
+/* Spinner columns sized so each arrow is a real target in the box
+ * (sm: 20 x 12 in a 24 px field, near ComfyUI's 24 px -/+ buttons). */
 .wp-cnum {
-  --cnum-spin: 16px;
+  --cnum-spin: 20px;
   display: inline-flex; align-items: stretch; height: var(--wp-field-h); min-width: 0; overflow: hidden;
   font-family: var(--wp-font-mono);
 }
-.wp-cnum--md { --cnum-spin: 20px; }
-.wp-cnum--lg { --cnum-spin: 22px; }
+.wp-cnum--md { --cnum-spin: 24px; }
+.wp-cnum--lg { --cnum-spin: 28px; }
 .wp-cnum__field {
   flex: 1; min-width: 0; padding: 0 6px 0 8px; background: transparent; border: 0;
   color: var(--wp-text); font: inherit; text-align: right;
@@ -170,8 +172,8 @@ function bump(dir: 1 | -1): void {
   flex: 1; display: flex; align-items: center; justify-content: center; padding: 0; border: 0;
   background: transparent; color: var(--wp-text-dim); cursor: pointer; line-height: 0;
 }
-.wp-cnum__btn .pi { font-size: 7px; }
-.wp-cnum--md .wp-cnum__btn .pi, .wp-cnum--lg .wp-cnum__btn .pi { font-size: 8px; }
+.wp-cnum__btn .pi { font-size: 10px; }
+.wp-cnum--md .wp-cnum__btn .pi, .wp-cnum--lg .wp-cnum__btn .pi { font-size: 10px; }
 .wp-cnum__btn + .wp-cnum__btn { border-top: 1px solid var(--wp-border); }
 .wp-cnum__btn:hover:not(:disabled) { color: var(--wp-accent-text); background: color-mix(in oklab, var(--wp-accent) 12%, transparent); }
 .wp-cnum__btn:disabled { cursor: not-allowed; }

package/src/WpSegmented.vue

@@ -127,7 +127,9 @@ function onKeydown(ev: KeyboardEvent): void {
   height: var(--wp-control-h-md);
   box-sizing: border-box;
 }
-.wp-segmented[data-size="sm"] { height: var(--wp-control-h-sm); border-radius: var(--wp-radius-sm); }
+/* sm: a 1 px inset, so each option is 20 px tall in the 24 px box (a bigger
+   target in the same row, close to ComfyUI's 24 px toggle-group items). */
+.wp-segmented[data-size="sm"] { height: var(--wp-control-h-sm); padding: 1px; border-radius: var(--wp-radius-sm); }
 .wp-segmented[data-size="lg"] { height: var(--wp-control-h-lg); }
 .wp-segmented__opt {
   display: inline-flex;

package/src/WpSwitch.vue

@@ -64,12 +64,13 @@ function flip(): void {
 <style scoped>
 /* Two looks. track: a sliding knob, for a setting that takes effect at once.
  * chip: a labelled chip that lights up when on (Hide from prompt, Lock...).
- * Heights follow the control scale (sm 24 / md 32 / lg 40). */
+ * Heights follow the control scale (sm 24 / md 32 / lg 40). The sm track is
+ * ComfyUI's own Nodes 2.0 switch (36 x 20, 16 px knob, 24 px row). */
 .wp-switch {
   display: inline-flex;
   align-items: center;
   gap: var(--wp-space-3);
-  min-height: 20px;
+  min-height: 24px;
   flex-shrink: 0;
   color: var(--wp-text-muted);
   font: var(--wp-text-xs) / 1 var(--wp-font-sans);
@@ -80,12 +81,12 @@ function flip(): void {
 }
 .wp-switch[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
 .wp-switch__label { color: var(--wp-text-muted); }
-.wp-switch--md, .wp-switch--lg { min-height: 24px; font-size: var(--wp-text-sm); }
+.wp-switch--md, .wp-switch--lg { min-height: 32px; font-size: var(--wp-text-sm); }
 
 /* Track look */
 .wp-switch__track {
-  --switch-w: 26px;
-  --switch-h: 14px;
+  --switch-w: 36px;
+  --switch-h: 20px;
   position: relative;
   flex-shrink: 0;
   width: var(--switch-w);
@@ -98,8 +99,8 @@ function flip(): void {
   background: var(--wp-bg-3);
   transition: background var(--wp-motion-quick), border-color var(--wp-motion-quick);
 }
-.wp-switch--md .wp-switch__track { --switch-w: 32px; --switch-h: 18px; }
-.wp-switch--lg .wp-switch__track { --switch-w: 40px; --switch-h: 22px; }
+.wp-switch--md .wp-switch__track { --switch-w: 40px; --switch-h: 22px; }
+.wp-switch--lg .wp-switch__track { --switch-w: 48px; --switch-h: 26px; }
 .wp-switch__knob {
   position: absolute;
   top: 1px;