@dumiflex/wp-kit 0.3.0 → 0.5.0

package/src/button.css

@@ -1,169 +1,169 @@
-/* Button — the one .wp-btn stylesheet, shared by the manager Button
- * (manager/components/ui/Button.vue, loaded globally by manager/main.ts) and
- * the canvas twin WpButton (components/shared/WpButton.vue, component
- * standard rule 8), which pulls it in scoped. It reads only the
- * SHARED_TOKENS names, so it wears the manager colours on a page and the
- * canvas colours in a node.
- *
- * Unlayered on purpose: the manager loads it beside tokens.css, where an
- * unlayered reset would otherwise beat it. The canvas never loads it
- * globally: WpButton pulls in a scoped copy, so its classes never meet
- * another extension's `.wp-btn`.
- *
- * Heights follow the control scale: sm 24 / md 32 / lg 40.
- *
- * States:
- *   disabled — 45% opacity, not-allowed cursor, no hover change; the filled
- *              secondary drops its fill so it no longer reads as a live
- *              secondary button.
- *   loading  — keeps its own colours (aria-busy), progress cursor, so the
- *              label stays readable while it works.
- */
-
-.wp-btn {
-  height: var(--wp-control-h-md);
-  padding: 0 12px;
-  border-radius: min(7px, var(--wp-radius-cap, 999px));
-  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
-  font-family: var(--wp-font-sans);
-  font-size: 12.5px;
-  font-weight: 500;
-  /* Normal, not 1: a line box shorter than the font's ascent + descent
-     gets its negative leading rounded unevenly and the label rides high. */
-  line-height: normal;
-  cursor: pointer;
-  background: var(--wp-bg-3);
-  color: var(--wp-text);
-  border: 1px solid var(--wp-border);
-  transition: background .12s, border-color .12s, color .12s, opacity .12s, transform .04s;
-  white-space: nowrap;
-  user-select: none;
-  box-sizing: border-box;
-}
-.wp-btn:hover { background: var(--wp-bg-4); border-color: var(--wp-border-strong); }
-.wp-btn:active { transform: translateY(0.5px); }
-.wp-btn:focus-visible {
-  outline: none;
-  box-shadow: var(--wp-focus-ring);
-}
-.wp-btn .pi, .wp-btn svg { font-size: 13px; }
-/* The label box (not on a link, which has no fixed height) is trimmed to
- * the cap height where the browser can, so the
- * flex centring puts the capitals, not the ascender-to-descender box, on the
- * button's middle line, level with the icon. */
-@supports (text-box: trim-both cap alphabetic) {
-  .wp-btn:not(.wp-btn--link) .wp-btn__label { text-box: trim-both cap alphabetic; }
-}
-
-/* Sizes */
-.wp-btn--sm { height: var(--wp-control-h-sm); padding: 0 8px; gap: 4px; font-size: 12px; border-radius: min(6px, var(--wp-radius-cap, 999px)); }
-.wp-btn--sm .pi, .wp-btn--sm svg { font-size: 12px; }
-.wp-btn--md { /* the default size */ }
-.wp-btn--lg { height: var(--wp-control-h-lg); padding: 0 var(--wp-space-6); font-size: 13.5px; border-radius: var(--wp-radius); }
-.wp-btn--icon { width: var(--wp-control-h-md); padding: 0; }
-.wp-btn--icon.wp-btn--sm { width: var(--wp-control-h-sm); }
-.wp-btn--icon.wp-btn--lg { width: var(--wp-control-h-lg); }
-
-/* Variants */
-.wp-btn--secondary { /* the default look */ }
-
-.wp-btn--primary {
-  background: var(--wp-accent-600);
-  border-color: var(--wp-accent-600);
-  color: #fff; /* audit-exempt: white on accent-600 is 6.3:1 */
-}
-.wp-btn--primary:hover { background: var(--wp-accent-700); border-color: var(--wp-accent-700); }
-.wp-btn--primary:active { background: var(--wp-accent-800); border-color: var(--wp-accent-800); }
-.wp-btn--primary:focus-visible { box-shadow: var(--wp-focus-ring); }
-
-.wp-btn--ghost { background: transparent; border-color: transparent; color: var(--wp-text-muted); }
-.wp-btn--ghost:hover { background: var(--wp-bg-3); border-color: transparent; color: var(--wp-text); }
-.wp-btn--ghost:active { background: var(--wp-bg-4); }
-
-/* Outline is neutral: a bordered ghost. An accent outline read as a second
- * primary next to the real one. */
-.wp-btn--outline { background: transparent; border-color: var(--wp-border-strong); color: var(--wp-text); }
-.wp-btn--outline:hover { background: var(--wp-bg-3); border-color: var(--wp-border-strong); }
-.wp-btn--outline:active { background: var(--wp-bg-4); }
-
-.wp-btn--link {
-  background: transparent;
-  border-color: transparent;
-  color: var(--wp-accent-text);
-  height: auto;
-  padding: 0;
-  line-height: 1;
-}
-.wp-btn--link:hover {
-  background: transparent;
-  border-color: transparent;
-  color: var(--wp-accent-text-strong);
-  text-decoration: underline;
-}
-.wp-btn--link:focus-visible { box-shadow: none; text-decoration: underline; }
-
-.wp-btn--danger { color: var(--wp-danger); }
-.wp-btn--danger:hover {
-  background: color-mix(in oklab, var(--wp-danger) 14%, transparent);
-  border-color: color-mix(in oklab, var(--wp-danger) 40%, transparent);
-  color: var(--wp-danger-text);
-}
-.wp-btn--danger:active { background: color-mix(in oklab, var(--wp-danger) 22%, transparent); }
-.wp-btn--danger:focus-visible {
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--wp-danger) 35%, transparent); /* danger uses its own ring color */
-}
-
-/* Add: the quiet dashed "Add a row" button at the end of a list (Injector
- * template rows, Model Info rules, fixed values, constraint exceptions). */
-.wp-btn--add {
-  background: transparent;
-  border-style: dashed;
-  border-color: var(--wp-border-strong);
-  color: var(--wp-text-dim);
-  font-weight: 600;
-}
-.wp-btn--add:hover {
-  background: color-mix(in srgb, var(--wp-accent) 8%, transparent);
-  border-color: color-mix(in srgb, var(--wp-accent) 45%, var(--wp-border-strong));
-  color: var(--wp-text);
-}
-.wp-btn--add:is(:disabled:not([aria-busy="true"]), [aria-disabled="true"]):hover { background: transparent; border-color: var(--wp-border-strong); color: var(--wp-text-dim); }
-
-.wp-btn--block { display: flex; width: 100%; }
-
-/* Pressed: a toggle that is on (favourites only, filters open). */
-.wp-btn[aria-pressed="true"] {
-  background: color-mix(in srgb, var(--wp-accent) 14%, transparent);
-  border-color: color-mix(in srgb, var(--wp-accent) 55%, var(--wp-border));
-  color: var(--wp-accent-text);
-}
-.wp-btn[aria-pressed="true"]:hover {
-  background: color-mix(in srgb, var(--wp-accent) 22%, transparent);
-  border-color: var(--wp-accent);
-}
-
-/* Disabled (not loading): faded, flat, and hover does nothing. */
-.wp-btn:disabled:not([aria-busy="true"]),
-.wp-btn[aria-disabled="true"] {
-  opacity: 0.45;
-  cursor: not-allowed;
-  transform: none;
-}
-.wp-btn--secondary:disabled:not([aria-busy="true"]),
-.wp-btn--secondary[aria-disabled="true"] {
-  background: transparent;
-  border-color: var(--wp-border);
-  color: var(--wp-text-muted);
-}
-.wp-btn--secondary:is(:disabled:not([aria-busy="true"]), [aria-disabled="true"]):hover { background: transparent; border-color: var(--wp-border); }
-.wp-btn--primary:is(:disabled:not([aria-busy="true"]), [aria-disabled="true"]):hover {
-  background: var(--wp-accent-600);
-  border-color: var(--wp-accent-600);
-}
-.wp-btn--ghost:is(:disabled:not([aria-busy="true"]), [aria-disabled="true"]):hover { background: transparent; color: var(--wp-text-muted); }
-.wp-btn--outline:is(:disabled:not([aria-busy="true"]), [aria-disabled="true"]):hover { background: transparent; border-color: var(--wp-border-strong); }
-.wp-btn--danger:is(:disabled:not([aria-busy="true"]), [aria-disabled="true"]):hover { background: var(--wp-bg-3); border-color: var(--wp-border); color: var(--wp-danger); }
-.wp-btn--link:is(:disabled:not([aria-busy="true"]), [aria-disabled="true"]):hover { color: var(--wp-accent-text); text-decoration: none; }
-
-/* Loading keeps the button's own colours; only the cursor says "wait". */
-.wp-btn[aria-busy="true"] { cursor: progress; transform: none; }
+/* Button — the one .wp-btn stylesheet, shared by the manager Button
+ * (manager/components/ui/Button.vue, loaded globally by manager/main.ts) and
+ * the canvas twin WpButton (components/shared/WpButton.vue, component
+ * standard rule 8), which pulls it in scoped. It reads only the
+ * SHARED_TOKENS names, so it wears the manager colours on a page and the
+ * canvas colours in a node.
+ *
+ * Unlayered on purpose: the manager loads it beside tokens.css, where an
+ * unlayered reset would otherwise beat it. The canvas never loads it
+ * globally: WpButton pulls in a scoped copy, so its classes never meet
+ * another extension's `.wp-btn`.
+ *
+ * Heights follow the control scale: sm 24 / md 32 / lg 40.
+ *
+ * States:
+ *   disabled — 45% opacity, not-allowed cursor, no hover change; the filled
+ *              secondary drops its fill so it no longer reads as a live
+ *              secondary button.
+ *   loading  — keeps its own colours (aria-busy), progress cursor, so the
+ *              label stays readable while it works.
+ */
+
+.wp-btn {
+  height: var(--wp-control-h-md);
+  padding: 0 12px;
+  border-radius: min(7px, var(--wp-radius-cap, 999px));
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  font-family: var(--wp-font-sans);
+  font-size: 12.5px;
+  font-weight: 500;
+  /* Normal, not 1: a line box shorter than the font's ascent + descent
+     gets its negative leading rounded unevenly and the label rides high. */
+  line-height: normal;
+  cursor: pointer;
+  background: var(--wp-bg-3);
+  color: var(--wp-text);
+  border: 1px solid var(--wp-border);
+  transition: background .12s, border-color .12s, color .12s, opacity .12s, transform .04s;
+  white-space: nowrap;
+  user-select: none;
+  box-sizing: border-box;
+}
+.wp-btn:hover { background: var(--wp-bg-4); border-color: var(--wp-border-strong); }
+.wp-btn:active { transform: translateY(0.5px); }
+.wp-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--wp-focus-ring);
+}
+.wp-btn .pi, .wp-btn svg { font-size: 13px; }
+/* The label box (not on a link, which has no fixed height) is trimmed to
+ * the cap height where the browser can, so the
+ * flex centring puts the capitals, not the ascender-to-descender box, on the
+ * button's middle line, level with the icon. */
+@supports (text-box: trim-both cap alphabetic) {
+  .wp-btn:not(.wp-btn--link) .wp-btn__label { text-box: trim-both cap alphabetic; }
+}
+
+/* Sizes */
+.wp-btn--sm { height: var(--wp-control-h-sm); padding: 0 8px; gap: 4px; font-size: 12px; border-radius: min(6px, var(--wp-radius-cap, 999px)); }
+.wp-btn--sm .pi, .wp-btn--sm svg { font-size: 12px; }
+.wp-btn--md { /* the default size */ }
+.wp-btn--lg { height: var(--wp-control-h-lg); padding: 0 var(--wp-space-6); font-size: 13.5px; border-radius: var(--wp-radius); }
+.wp-btn--icon { width: var(--wp-control-h-md); padding: 0; }
+.wp-btn--icon.wp-btn--sm { width: var(--wp-control-h-sm); }
+.wp-btn--icon.wp-btn--lg { width: var(--wp-control-h-lg); }
+
+/* Variants */
+.wp-btn--secondary { /* the default look */ }
+
+.wp-btn--primary {
+  background: var(--wp-accent-600);
+  border-color: var(--wp-accent-600);
+  color: #fff; /* audit-exempt: white on accent-600 is 6.3:1 */
+}
+.wp-btn--primary:hover { background: var(--wp-accent-700); border-color: var(--wp-accent-700); }
+.wp-btn--primary:active { background: var(--wp-accent-800); border-color: var(--wp-accent-800); }
+.wp-btn--primary:focus-visible { box-shadow: var(--wp-focus-ring); }
+
+.wp-btn--ghost { background: transparent; border-color: transparent; color: var(--wp-text-muted); }
+.wp-btn--ghost:hover { background: var(--wp-bg-3); border-color: transparent; color: var(--wp-text); }
+.wp-btn--ghost:active { background: var(--wp-bg-4); }
+
+/* Outline is neutral: a bordered ghost. An accent outline read as a second
+ * primary next to the real one. */
+.wp-btn--outline { background: transparent; border-color: var(--wp-border-strong); color: var(--wp-text); }
+.wp-btn--outline:hover { background: var(--wp-bg-3); border-color: var(--wp-border-strong); }
+.wp-btn--outline:active { background: var(--wp-bg-4); }
+
+.wp-btn--link {
+  background: transparent;
+  border-color: transparent;
+  color: var(--wp-accent-text);
+  height: auto;
+  padding: 0;
+  line-height: 1;
+}
+.wp-btn--link:hover {
+  background: transparent;
+  border-color: transparent;
+  color: var(--wp-accent-text-strong);
+  text-decoration: underline;
+}
+.wp-btn--link:focus-visible { box-shadow: none; text-decoration: underline; }
+
+.wp-btn--danger { color: var(--wp-danger); }
+.wp-btn--danger:hover {
+  background: color-mix(in oklab, var(--wp-danger) 14%, transparent);
+  border-color: color-mix(in oklab, var(--wp-danger) 40%, transparent);
+  color: var(--wp-danger-text);
+}
+.wp-btn--danger:active { background: color-mix(in oklab, var(--wp-danger) 22%, transparent); }
+.wp-btn--danger:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--wp-danger) 35%, transparent); /* danger uses its own ring color */
+}
+
+/* Add: the quiet dashed "Add a row" button at the end of a list (Injector
+ * template rows, Model Info rules, fixed values, constraint exceptions). */
+.wp-btn--add {
+  background: transparent;
+  border-style: dashed;
+  border-color: var(--wp-border-strong);
+  color: var(--wp-text-dim);
+  font-weight: 600;
+}
+.wp-btn--add:hover {
+  background: color-mix(in srgb, var(--wp-accent) 8%, transparent);
+  border-color: color-mix(in srgb, var(--wp-accent) 45%, var(--wp-border-strong));
+  color: var(--wp-text);
+}
+.wp-btn--add:is(:disabled:not([aria-busy="true"]), [aria-disabled="true"]):hover { background: transparent; border-color: var(--wp-border-strong); color: var(--wp-text-dim); }
+
+.wp-btn--block { display: flex; width: 100%; }
+
+/* Pressed: a toggle that is on (favourites only, filters open). */
+.wp-btn[aria-pressed="true"] {
+  background: color-mix(in srgb, var(--wp-accent) 14%, transparent);
+  border-color: color-mix(in srgb, var(--wp-accent) 55%, var(--wp-border));
+  color: var(--wp-accent-text);
+}
+.wp-btn[aria-pressed="true"]:hover {
+  background: color-mix(in srgb, var(--wp-accent) 22%, transparent);
+  border-color: var(--wp-accent);
+}
+
+/* Disabled (not loading): faded, flat, and hover does nothing. */
+.wp-btn:disabled:not([aria-busy="true"]),
+.wp-btn[aria-disabled="true"] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+}
+.wp-btn--secondary:disabled:not([aria-busy="true"]),
+.wp-btn--secondary[aria-disabled="true"] {
+  background: transparent;
+  border-color: var(--wp-border);
+  color: var(--wp-text-muted);
+}
+.wp-btn--secondary:is(:disabled:not([aria-busy="true"]), [aria-disabled="true"]):hover { background: transparent; border-color: var(--wp-border); }
+.wp-btn--primary:is(:disabled:not([aria-busy="true"]), [aria-disabled="true"]):hover {
+  background: var(--wp-accent-600);
+  border-color: var(--wp-accent-600);
+}
+.wp-btn--ghost:is(:disabled:not([aria-busy="true"]), [aria-disabled="true"]):hover { background: transparent; color: var(--wp-text-muted); }
+.wp-btn--outline:is(:disabled:not([aria-busy="true"]), [aria-disabled="true"]):hover { background: transparent; border-color: var(--wp-border-strong); }
+.wp-btn--danger:is(:disabled:not([aria-busy="true"]), [aria-disabled="true"]):hover { background: var(--wp-bg-3); border-color: var(--wp-border); color: var(--wp-danger); }
+.wp-btn--link:is(:disabled:not([aria-busy="true"]), [aria-disabled="true"]):hover { color: var(--wp-accent-text); text-decoration: none; }
+
+/* Loading keeps the button's own colours; only the cursor says "wait". */
+.wp-btn[aria-busy="true"] { cursor: progress; transform: none; }

package/src/calendar.ts

@@ -1,59 +1,59 @@
-/**
- * Date helpers for DatePicker. Dates travel as "YYYY-MM-DD" strings (local
- * calendar days, no time zone), so a saved filter means the same day
- * everywhere.
- */
-export interface Ymd { y: number; m: number; d: number } // m is 0-11
-
-export function parseYmd(s: string | null | undefined): Ymd | null {
-  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s ?? "");
-  if (!m) return null;
-  const y = Number(m[1]); const mo = Number(m[2]) - 1; const d = Number(m[3]);
-  const dt = new Date(y, mo, d);
-  return dt.getFullYear() === y && dt.getMonth() === mo && dt.getDate() === d ? { y, m: mo, d } : null;
-}
-
-export function toYmd(v: Ymd): string {
-  return `${String(v.y).padStart(4, "0")}-${String(v.m + 1).padStart(2, "0")}-${String(v.d).padStart(2, "0")}`;
-}
-
-export function fromDate(dt: Date): Ymd {
-  return { y: dt.getFullYear(), m: dt.getMonth(), d: dt.getDate() };
-}
-
-export function addDays(v: Ymd, n: number): Ymd {
-  return fromDate(new Date(v.y, v.m, v.d + n));
-}
-
-/** The same day n months on, kept inside the shorter month (31 Jan + 1 → 28/29 Feb). */
-export function addMonths(v: Ymd, n: number): Ymd {
-  const first = new Date(v.y, v.m + n, 1);
-  const last = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate();
-  return { y: first.getFullYear(), m: first.getMonth(), d: Math.min(v.d, last) };
-}
-
-export function compareYmd(a: Ymd, b: Ymd): number {
-  return a.y - b.y || a.m - b.m || a.d - b.d;
-}
-
-/**
- * The 6×7 grid of days shown for a month, starting on `weekStart`
- * (0 = Sunday, 1 = Monday), with days of the months either side.
- */
-export function monthGrid(y: number, m: number, weekStart = 1): Ymd[] {
-  const first = new Date(y, m, 1);
-  const lead = (first.getDay() - weekStart + 7) % 7;
-  return Array.from({ length: 42 }, (_, i) => fromDate(new Date(y, m, 1 - lead + i)));
-}
-
-/** Short weekday names from `weekStart`, in the browser's language. */
-export function weekdayNames(weekStart = 1, locale?: string): { short: string; long: string }[] {
-  // 2024-01-07 was a Sunday.
-  return Array.from({ length: 7 }, (_, i) => {
-    const dt = new Date(2024, 0, 7 + ((weekStart + i) % 7));
-    return {
-      short: dt.toLocaleDateString(locale, { weekday: "narrow" }),
-      long: dt.toLocaleDateString(locale, { weekday: "long" }),
-    };
-  });
-}
+/**
+ * Date helpers for DatePicker. Dates travel as "YYYY-MM-DD" strings (local
+ * calendar days, no time zone), so a saved filter means the same day
+ * everywhere.
+ */
+export interface Ymd { y: number; m: number; d: number } // m is 0-11
+
+export function parseYmd(s: string | null | undefined): Ymd | null {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s ?? "");
+  if (!m) return null;
+  const y = Number(m[1]); const mo = Number(m[2]) - 1; const d = Number(m[3]);
+  const dt = new Date(y, mo, d);
+  return dt.getFullYear() === y && dt.getMonth() === mo && dt.getDate() === d ? { y, m: mo, d } : null;
+}
+
+export function toYmd(v: Ymd): string {
+  return `${String(v.y).padStart(4, "0")}-${String(v.m + 1).padStart(2, "0")}-${String(v.d).padStart(2, "0")}`;
+}
+
+export function fromDate(dt: Date): Ymd {
+  return { y: dt.getFullYear(), m: dt.getMonth(), d: dt.getDate() };
+}
+
+export function addDays(v: Ymd, n: number): Ymd {
+  return fromDate(new Date(v.y, v.m, v.d + n));
+}
+
+/** The same day n months on, kept inside the shorter month (31 Jan + 1 → 28/29 Feb). */
+export function addMonths(v: Ymd, n: number): Ymd {
+  const first = new Date(v.y, v.m + n, 1);
+  const last = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate();
+  return { y: first.getFullYear(), m: first.getMonth(), d: Math.min(v.d, last) };
+}
+
+export function compareYmd(a: Ymd, b: Ymd): number {
+  return a.y - b.y || a.m - b.m || a.d - b.d;
+}
+
+/**
+ * The 6×7 grid of days shown for a month, starting on `weekStart`
+ * (0 = Sunday, 1 = Monday), with days of the months either side.
+ */
+export function monthGrid(y: number, m: number, weekStart = 1): Ymd[] {
+  const first = new Date(y, m, 1);
+  const lead = (first.getDay() - weekStart + 7) % 7;
+  return Array.from({ length: 42 }, (_, i) => fromDate(new Date(y, m, 1 - lead + i)));
+}
+
+/** Short weekday names from `weekStart`, in the browser's language. */
+export function weekdayNames(weekStart = 1, locale?: string): { short: string; long: string }[] {
+  // 2024-01-07 was a Sunday.
+  return Array.from({ length: 7 }, (_, i) => {
+    const dt = new Date(2024, 0, 7 + ((weekStart + i) % 7));
+    return {
+      short: dt.toLocaleDateString(locale, { weekday: "narrow" }),
+      long: dt.toLocaleDateString(locale, { weekday: "long" }),
+    };
+  });
+}

package/src/clipboard.ts

@@ -1,50 +1,50 @@
-/**
- * clipboard — copy text, also where `navigator.clipboard` is missing.
- *
- * Browsers only give `navigator.clipboard` to secure pages (https or
- * localhost), so ComfyUI opened over plain http on the LAN has none. There a
- * hidden textarea is selected and copied with `execCommand("copy")`, which
- * still works inside a click.
- */
-
-/** Copy `text`; true when it reached the clipboard. */
-export async function copyText(text: string): Promise<boolean> {
-  const api = typeof navigator === "undefined" ? undefined : navigator.clipboard;
-  if (api?.writeText) {
-    try {
-      await api.writeText(text);
-      return true;
-    } catch {
-      // Refused (no permission, page not focused): try the old way.
-    }
-  }
-  return copyByTextarea(text);
-}
-
-function copyByTextarea(text: string): boolean {
-  if (typeof document === "undefined" || !document.body) return false;
-  const area = document.createElement("textarea");
-  area.value = text;
-  area.setAttribute("readonly", "");
-  area.setAttribute("aria-hidden", "true");
-  area.style.cssText = "position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none;";
-  const focused = document.activeElement;
-  const selection = document.getSelection();
-  const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
-  document.body.appendChild(area);
-  area.focus({ preventScroll: true });
-  area.select();
-  let ok = false;
-  try {
-    ok = typeof document.execCommand === "function" && document.execCommand("copy");
-  } catch {
-    ok = false;
-  }
-  area.remove();
-  if (range && selection) {
-    selection.removeAllRanges();
-    selection.addRange(range);
-  }
-  if (focused instanceof HTMLElement) focused.focus();
-  return ok;
-}
+/**
+ * clipboard — copy text, also where `navigator.clipboard` is missing.
+ *
+ * Browsers only give `navigator.clipboard` to secure pages (https or
+ * localhost), so ComfyUI opened over plain http on the LAN has none. There a
+ * hidden textarea is selected and copied with `execCommand("copy")`, which
+ * still works inside a click.
+ */
+
+/** Copy `text`; true when it reached the clipboard. */
+export async function copyText(text: string): Promise<boolean> {
+  const api = typeof navigator === "undefined" ? undefined : navigator.clipboard;
+  if (api?.writeText) {
+    try {
+      await api.writeText(text);
+      return true;
+    } catch {
+      // Refused (no permission, page not focused): try the old way.
+    }
+  }
+  return copyByTextarea(text);
+}
+
+function copyByTextarea(text: string): boolean {
+  if (typeof document === "undefined" || !document.body) return false;
+  const area = document.createElement("textarea");
+  area.value = text;
+  area.setAttribute("readonly", "");
+  area.setAttribute("aria-hidden", "true");
+  area.style.cssText = "position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none;";
+  const focused = document.activeElement;
+  const selection = document.getSelection();
+  const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+  document.body.appendChild(area);
+  area.focus({ preventScroll: true });
+  area.select();
+  let ok = false;
+  try {
+    ok = typeof document.execCommand === "function" && document.execCommand("copy");
+  } catch {
+    ok = false;
+  }
+  area.remove();
+  if (range && selection) {
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
+  if (focused instanceof HTMLElement) focused.focus();
+  return ok;
+}

package/src/colour-presets.ts

@@ -1,12 +1,12 @@
-/** The preset colours the colour pickers offer (bundle frames, categories),
- *  and the default a new one starts with. One list, so every picker and the
- *  canvas offer the same swatches. Brand colours, not theme tokens: a picked
- *  colour is stored as hex and looks the same in light and dark. */
-export const COLOUR_PRESETS: readonly string[] = [
-  "#7c3aed", "#a78bfa", "#22d3ee", "#34d399",
-  "#fbbf24", "#f472b6", "#fb7185", "#ef4444",
-  "#6366f1", "#10b981", "#f59e0b", "#8b5cf6",
-];
-
-/** The colour a new bundle or category starts with. */
-export const DEFAULT_COLOUR = "#6366f1";
+/** The preset colours the colour pickers offer (bundle frames, categories),
+ *  and the default a new one starts with. One list, so every picker and the
+ *  canvas offer the same swatches. Brand colours, not theme tokens: a picked
+ *  colour is stored as hex and looks the same in light and dark. */
+export const COLOUR_PRESETS: readonly string[] = [
+  "#7c3aed", "#a78bfa", "#22d3ee", "#34d399",
+  "#fbbf24", "#f472b6", "#fb7185", "#ef4444",
+  "#6366f1", "#10b981", "#f59e0b", "#8b5cf6",
+];
+
+/** The colour a new bundle or category starts with. */
+export const DEFAULT_COLOUR = "#6366f1";