@dumiflex/wp-kit 0.12.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [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)
+
+
+### Features
+
+* v-toggle-row, so a row's words flip its one checkbox or switch, and SettingRow rows do it ([#102](https://github.com/DumiFlex/wp-kit/issues/102)) ([1d3309b](https://github.com/DumiFlex/wp-kit/commit/1d3309b6f2a7da6f2dff82a41aed8bc46d1c779a))
+
 ## [0.12.0](https://github.com/DumiFlex/wp-kit/compare/v0.11.0...v0.12.0) (2026-11-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dumiflex/wp-kit",
-  "version": "0.12.0",
+  "version": "0.14.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/SettingRow.vue

@@ -14,7 +14,13 @@
  * control column, like a form. `recommended` names the value most people
  * should pick ("On"). `for` makes the label a real `<label for>`. Slots:
  * `#badge` after the label, `#extra` under the hint (a status line).
+ *
+ * A row whose control is one checkbox or switch flips it on a click anywhere
+ * on the row's words (v-toggle-row), like a label; a WpSwitch is a span, so a
+ * `<label for>` alone can't reach it.
  */
+import { vToggleRow } from "./toggle-row";
+
 const props = defineProps<{
   label: string;
   hint?: string | undefined;
@@ -32,6 +38,7 @@ const props = defineProps<{
 <template>
   <div
     :id="settingKey"
+    v-toggle-row
     class="wp-set-row"
     :class="{ 'wp-set-row--stacked': stacked, 'wp-set-row--form': form, 'wp-set-row--target': highlighted }"
     :data-setting="settingKey"

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;

package/src/toggle-row.css

@@ -0,0 +1,7 @@
+/* v-toggle-row (toggle-row.ts): the row's words flip its one toggle, so the
+ * whole row shows the hand and its words don't get picked up as a selection
+ * on a quick double click. Layered, so a host's own cursor rule wins. */
+@layer wp-extension {
+  .wp-toggle-row { cursor: pointer; user-select: none; -webkit-user-select: none; }
+  .wp-toggle-row--disabled { cursor: not-allowed; }
+}

package/src/toggle-row.ts

@@ -0,0 +1,104 @@
+/**
+ * `v-toggle-row`: a click on a row's words flips the row's one checkbox or
+ * switch, the way a `<label>` ticks its input. For a row that lays out its
+ * label and its control itself (a label on the left, a switch on the right)
+ * instead of passing the words to the Checkbox or WpSwitch.
+ *
+ *   <div v-toggle-row class="row">
+ *     <span>Override base seed</span>
+ *     <WpSwitch v-model="override" aria-label="Override base seed" />
+ *   </div>
+ *
+ * It acts only when the row holds exactly one `role="checkbox"` or
+ * `role="switch"` and no other value control (an input, a select, a slider,
+ * radios), so a row with two switches or a switch beside a number field stays
+ * as it is. A click on anything interactive inside the row (the toggle
+ * itself, a button, a link, a native `<label>`, a labelled Checkbox) is left
+ * to that element. The control keeps the keyboard stop and gets the focus.
+ * SettingRow uses it on every row.
+ *
+ * The row gets the `wp-toggle-row` class while it has a single toggle, for
+ * the pointer cursor (toggle-row.css). State lives in a WeakMap (no expando
+ * keys), so the row's own attributes and serialization stay untouched.
+ */
+import type { Directive } from "vue";
+import "./toggle-row.css";
+
+const TOGGLE = '[role="checkbox"], [role="switch"]';
+/** Value controls that make "the row's control" ambiguous. */
+const OTHER_CONTROL =
+  'input:not([type="hidden"]), select, textarea, [role="combobox"], [role="slider"], [role="spinbutton"], [role="radio"], [role="listbox"], [contenteditable=""], [contenteditable="true"]';
+/** A click that lands on one of these belongs to it, not to the row. */
+const INTERACTIVE =
+  'button, a[href], input, select, textarea, label, summary, [role="button"], [role="link"], [role="checkbox"], [role="switch"], [role="radio"], [role="tab"], [role="menuitem"], [role="option"], [role="combobox"], [role="slider"], [role="spinbutton"], [contenteditable=""], [contenteditable="true"], .wp-checkbox';
+
+interface State {
+  off: () => void;
+}
+
+const states = new WeakMap<HTMLElement, State>();
+/** One click flips one toggle, even with rows nested in rows. */
+const handled = new WeakSet<Event>();
+
+/** The row's one toggle, or null when it has none, several, or another control beside it. */
+export function rowToggle(row: HTMLElement): HTMLElement | null {
+  const toggles = row.querySelectorAll<HTMLElement>(TOGGLE);
+  if (toggles.length !== 1) return null;
+  if (row.querySelector(OTHER_CONTROL)) return null;
+  return toggles[0] ?? null;
+}
+
+function isDisabled(el: HTMLElement): boolean {
+  return el.getAttribute("aria-disabled") === "true" || (el instanceof HTMLButtonElement && el.disabled);
+}
+
+function sync(row: HTMLElement): void {
+  const toggle = rowToggle(row);
+  row.classList.toggle("wp-toggle-row", !!toggle);
+  row.classList.toggle("wp-toggle-row--disabled", !!toggle && isDisabled(toggle));
+}
+
+/** Flip the row's toggle for a click on the row's words. Exported for tests. */
+export function onRowClick(row: HTMLElement, event: MouseEvent): void {
+  if (handled.has(event) || event.button !== 0) return;
+  const target = event.target;
+  if (!(target instanceof Element)) return;
+  const hit = target.closest(INTERACTIVE);
+  if (hit && hit !== row && row.contains(hit)) return;
+  // Text the reader was selecting is not a click on the label.
+  const selection = row.ownerDocument.getSelection?.();
+  if (selection && !selection.isCollapsed && row.contains(selection.anchorNode)) return;
+  const toggle = rowToggle(row);
+  if (!toggle || isDisabled(toggle)) return;
+  handled.add(event);
+  toggle.click();
+  toggle.focus({ preventScroll: true });
+}
+
+function attach(el: HTMLElement): void {
+  if (states.has(el)) return;
+  const click = (e: MouseEvent): void => onRowClick(el, e);
+  el.addEventListener("click", click);
+  states.set(el, { off: () => el.removeEventListener("click", click) });
+}
+
+function detach(el: HTMLElement): void {
+  states.get(el)?.off();
+  states.delete(el);
+  el.classList.remove("wp-toggle-row", "wp-toggle-row--disabled");
+}
+
+/** `v-toggle-row="false"` turns it off for one row (a row whose words do something else). */
+export const vToggleRow: Directive<HTMLElement, boolean | undefined> = {
+  mounted(el, binding) {
+    if (binding.value === false) return;
+    attach(el);
+    sync(el);
+  },
+  updated(el, binding) {
+    if (binding.value === false) return detach(el);
+    attach(el);
+    sync(el);
+  },
+  unmounted: detach,
+};