@dumiflex/wp-kit 0.0.0-stage → 0.3.0

package/src/WpTabs.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts" generic="T extends string">
+/**
+ * Tabs: a row of tabs that switch the panel under them. Works on the canvas
+ * (`size="sm"`) and in the manager (`md`, the default).
+ *
+ * Keyboard follows the APG tabs pattern with automatic activation: only the
+ * current tab is in the Tab order, the arrow keys move to the next enabled
+ * tab and select it, Home/End jump to the ends. A row too wide for its box
+ * scrolls sideways and keeps the current tab in view.
+ *
+ *   <WpTabs v-model="tab" :tabs="[{ id: 'options', label: 'Options', count: 12 }]" aria-label="Editor sections">
+ *     <template #panel="{ id }">…</template>
+ *   </WpTabs>
+ *
+ * Leave out `#panel` when the panels live elsewhere; give them
+ * `:id="panelId(tab)"`-style wiring yourself or let the tabs stand alone.
+ */
+import { nextTick, ref, useId, useSlots } from "vue";
+
+export interface TabItem<I extends string = string> {
+  id: I;
+  label: string;
+  /** A PrimeIcons class, e.g. `pi-list`. */
+  icon?: string | undefined;
+  disabled?: boolean | undefined;
+  /** A small count after the label (rows, errors…). */
+  count?: number | string | undefined;
+  /** Colour of the count: `success` for all good, `warn` for problems. */
+  tone?: "neutral" | "success" | "warn" | "danger" | undefined;
+}
+
+const props = withDefaults(defineProps<{
+  modelValue: T;
+  tabs: TabItem<T>[];
+  size?: "sm" | "md" | undefined;
+  ariaLabel?: string | undefined;
+  /** `data-test` of each tab is `<testPrefix>-<id>`. */
+  testPrefix?: string | undefined;
+}>(), { size: "md" });
+
+const emit = defineEmits<{ (e: "update:modelValue", id: T): void }>();
+const slots = useSlots();
+
+const uid = `wp-tabs-${useId()}`;
+const tabId = (id: string): string => `${uid}-tab-${id}`;
+const panelId = (id: string): string => `${uid}-panel-${id}`;
+const listEl = ref<HTMLElement | null>(null);
+
+function select(id: T): void {
+  if (id !== props.modelValue) emit("update:modelValue", id);
+}
+
+function focusTab(id: string): void {
+  void nextTick(() => {
+    const i = props.tabs.findIndex((t) => t.id === id);
+    const el = listEl.value?.querySelectorAll<HTMLElement>("[role=tab]")[i];
+    el?.focus();
+    el?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  });
+}
+
+/** The tab that takes Tab focus: the current one, else the first enabled. */
+function tabStop(): T | undefined {
+  const enabled = props.tabs.filter((t) => !t.disabled);
+  return (enabled.find((t) => t.id === props.modelValue) ?? enabled[0])?.id;
+}
+
+function onKeydown(ev: KeyboardEvent): void {
+  const enabled = props.tabs.filter((t) => !t.disabled);
+  if (!enabled.length) return;
+  const at = enabled.findIndex((t) => t.id === props.modelValue);
+  let next: number;
+  switch (ev.key) {
+    case "ArrowRight": next = (at + 1) % enabled.length; break;
+    case "ArrowLeft": next = at < 0 ? enabled.length - 1 : (at - 1 + enabled.length) % enabled.length; break;
+    case "Home": next = 0; break;
+    case "End": next = enabled.length - 1; break;
+    default: return;
+  }
+  ev.preventDefault();
+  const id = enabled[next].id;
+  select(id);
+  focusTab(id);
+}
+</script>
+
+<template>
+  <div class="wp-tabset" :data-size="size">
+    <div
+      ref="listEl"
+      class="wp-tabset__list"
+      role="tablist"
+      :aria-label="ariaLabel"
+    >
+      <button
+        v-for="t in tabs"
+        :id="tabId(t.id)"
+        :key="t.id"
+        type="button"
+        role="tab"
+        class="wp-tabset__tab"
+        :aria-selected="t.id === modelValue"
+        :aria-controls="slots.panel ? panelId(t.id) : undefined"
+        :tabindex="t.id === tabStop() ? 0 : -1"
+        :disabled="t.disabled"
+        :data-active="t.id === modelValue"
+        :data-test="testPrefix ? `${testPrefix}-${t.id}` : undefined"
+        @click="select(t.id)"
+        @keydown="onKeydown"
+      >
+        <slot name="tab" :tab="t" :active="t.id === modelValue">
+          <i v-if="t.icon" class="pi" :class="t.icon" aria-hidden="true" />
+          <span>{{ t.label }}</span>
+          <span v-if="t.count !== undefined" class="wp-tabset__count" :data-tone="t.tone">{{ t.count }}</span>
+        </slot>
+      </button>
+    </div>
+    <div
+      v-if="slots.panel"
+      :id="panelId(modelValue)"
+      class="wp-tabset__panel"
+      role="tabpanel"
+      :aria-labelledby="tabId(modelValue)"
+      tabindex="0"
+    >
+      <slot :id="modelValue" name="panel" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.wp-tabset { display: flex; flex-direction: column; min-width: 0; }
+.wp-tabset__list {
+  display: flex;
+  gap: 2px;
+  border-bottom: 1px solid var(--wp-border);
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--wp-scrollbar-thumb) transparent;
+}
+.wp-tabset__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  height: var(--wp-control-h-md);
+  margin: 0 0 -1px;
+  padding: 0 var(--wp-space-5);
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--wp-text-muted);
+  font: 500 var(--wp-text-sm)/1 var(--wp-font-sans);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--wp-motion-hover), border-color var(--wp-motion-hover);
+}
+.wp-tabset[data-size="sm"] .wp-tabset__tab {
+  height: var(--wp-control-h-sm);
+  padding: 0 var(--wp-space-4);
+  font-size: var(--wp-text-xs);
+  gap: 4px;
+}
+.wp-tabset__tab:hover:not(:disabled) { color: var(--wp-text); }
+.wp-tabset__tab[data-active="true"] { color: var(--wp-text); border-bottom-color: var(--wp-accent-400); }
+.wp-tabset__tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--wp-border-focus); border-radius: var(--wp-radius-sm); }
+.wp-tabset__tab:disabled { opacity: 0.45; cursor: not-allowed; }
+.wp-tabset__tab .pi { font-size: 0.95em; }
+.wp-tabset__count {
+  min-width: 16px;
+  padding: 1px 5px;
+  border-radius: var(--wp-radius-cap, 999px);
+  background: var(--wp-bg-3);
+  color: var(--wp-text-muted);
+  font-size: var(--wp-text-xs);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+.wp-tabset__tab[data-active="true"] .wp-tabset__count { background: var(--wp-accent-glow); color: var(--wp-accent-text); }
+.wp-tabset__count[data-tone="success"] { background: color-mix(in srgb, var(--wp-success) 16%, transparent); color: var(--wp-success); }
+.wp-tabset__count[data-tone="warn"] { background: color-mix(in srgb, var(--wp-warn) 16%, transparent); color: var(--wp-warn); }
+.wp-tabset__count[data-tone="danger"] { background: color-mix(in srgb, var(--wp-danger) 16%, transparent); color: var(--wp-danger); }
+.wp-tabset__panel { min-width: 0; }
+.wp-tabset__panel:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); border-radius: var(--wp-radius-sm); }
+@media (prefers-reduced-motion: reduce) {
+  .wp-tabset__tab { transition: none; }
+}
+</style>

package/src/_modal-motion.css

@@ -0,0 +1,33 @@
+/* Shared modal open/close transition — drives every consumer that
+ * wraps its modal in `<Transition name="wp-modal">`. Two simultaneous
+ * legs:
+ *   1. Overlay: opacity fade across `--wp-motion-swap` (200ms).
+ *   2. Panel:   transform scale 0.96 → 1.0 with the decel curve so
+ *               the dialog grows into place.
+ *
+ * Selector for the panel is `> *` (immediate child of the overlay
+ * element). Works for ModalShell's `.wp-modal-wrapper`, ConfirmDialog's
+ * `.wp-confirm`, InjectorBindingModal's `.ibm`, and any future modal
+ * that follows the overlay-with-one-child layout.
+ *
+ * Imported globally via ContextWidget's unscoped style block — class
+ * names are namespaced (`wp-modal-*` for the transition, scoped per
+ * Vue's named-transition convention) so no leakage.
+ */
+.wp-modal-enter-active,
+.wp-modal-leave-active {
+  transition: opacity var(--wp-motion-swap) ease;
+}
+.wp-modal-enter-from,
+.wp-modal-leave-to {
+  opacity: 0;
+}
+.wp-modal-enter-active > *,
+.wp-modal-leave-active > * {
+  transition: transform var(--wp-motion-swap) var(--wp-motion-curve-flip);
+  transform-origin: center;
+}
+.wp-modal-enter-from > *,
+.wp-modal-leave-to > * {
+  transform: scale(0.96);
+}

package/src/_skeleton.css

@@ -0,0 +1,50 @@
+/* Skeleton loading frames.
+ *
+ * Used by modals + widgets that surface async API loads (bundle picker,
+ * module picker). The flat base background is token-driven so the
+ * frames track theme changes; a moving highlight gradient overlays
+ * via the `::after` pseudo so consumers don't need to mark up two
+ * elements. Animation loops on `--wp-motion-shimmer` (1400ms).
+ *
+ * Imported by each consumer's scoped style block — the `wp-skel`
+ * class names are intentionally global so a parent's scoped wrapper
+ * (`wp-bp__skel-row` etc.) can lay out the shapes while the base
+ * `wp-skel` rules drive the look. `prefers-reduced-motion` kills the
+ * sweep so reduced-motion users still get a flat placeholder.
+ */
+.wp-skel {
+  background: var(--wp-bg2);
+  border-radius: min(4px, var(--wp-radius-cap, 999px));
+  position: relative;
+  overflow: hidden;
+}
+.wp-skel::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in srgb, var(--wp-text) 8%, transparent) 50%,
+    transparent 100%
+  );
+  transform: translateX(-100%);
+  animation: wp-skel-shimmer var(--wp-motion-shimmer) ease-in-out infinite;
+}
+.wp-skel--text {
+  height: 11px;
+}
+.wp-skel--circle {
+  border-radius: 50%; /* round: stands in for an avatar */
+}
+.wp-skel--pill {
+  border-radius: var(--wp-radius-cap, 999px);
+}
+
+@keyframes wp-skel-shimmer {
+  100% { transform: translateX(100%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wp-skel::after { animation: none; }
+}

package/src/axis-color.ts

@@ -0,0 +1,42 @@
+/**
+ * Per-axis sub-category colours — one source of truth for the wildcard
+ * editor pills, the option-row tag chips, and the pool palette, so a tag
+ * reads with the same colour on every surface.
+ *
+ * Each sub-category GROUP (axis) gets a distinct hue by its position among
+ * its siblings. The old per-component copies shared TWO failings that both
+ * produced "two groups, same colour": the palette held two near-identical
+ * purples (`#a78bfa` and `#a970ff`), and assignment wrapped with
+ * `% length`, repeating once there were more groups than hues. This palette
+ * is de-duplicated and ordered for maximum separation between consecutive
+ * axes; past it, a golden-angle hue keeps every additional group distinct.
+ */
+
+/** Neutral hue for ungrouped / "other" tags. */
+export const UNGROUPED_HUE = "var(--wp-text-dim, var(--wp-text3))";
+
+/** Curated distinct hues (no two similar), ordered so consecutive axes land
+ *  far apart on the wheel. Theme tokens where they exist, hex otherwise. */
+const AXIS_HUES = [
+  "var(--wp-kind-wildcard, #a78bfa)", // purple
+  "var(--wp-teal, #33d6c6)", // teal
+  "var(--wp-status-modified, #fb923c)", // orange
+  "#60a5fa", // blue
+  "var(--wp-success, #22c55e)", // green
+  "#fb7185", // rose
+  "#fbbf24", // amber
+  "#e879f9", // magenta
+];
+
+/**
+ * Distinct, non-repeating hue for the sub-category group (axis) at `index`
+ * among its siblings. `index < 0` (ungrouped) → the neutral token. Past the
+ * curated palette, a golden-angle hue keeps additional groups distinct
+ * rather than wrapping back onto an earlier colour.
+ */
+export function axisHueAt(index: number): string {
+  if (index < 0) return UNGROUPED_HUE;
+  if (index < AXIS_HUES.length) return AXIS_HUES[index];
+  const hue = ((index * 137.508) % 360).toFixed(1);
+  return `hsl(${hue} 68% 66%)`;
+}

package/src/button.css

@@ -0,0 +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; }

package/src/calendar.ts

@@ -0,0 +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" }),
+    };
+  });
+}

package/src/clipboard.ts

@@ -0,0 +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;
+}

package/src/colour-presets.ts

@@ -0,0 +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";

package/src/diff.ts

@@ -0,0 +1,51 @@
+/**
+ * A small word or line diff for DiffView: the longest common subsequence of
+ * the two token lists, then the runs that are the same, added or removed.
+ * Inputs past `limit` tokens on either side fall back to "all removed, all
+ * added", which keeps the table (n × m) small.
+ */
+export type DiffPart = { kind: "same" | "add" | "del"; text: string };
+
+/** Words with the spaces after them, so joining the parts gives the text back. */
+export function tokenize(text: string, by: "words" | "lines"): string[] {
+  if (!text) return [];
+  return by === "lines" ? text.split(/(?<=\n)/) : text.match(/\s+|[^\s]+/g) ?? [];
+}
+
+export function diffTokens(a: string[], b: string[], limit = 2000): DiffPart[] {
+  if (a.length > limit || b.length > limit) {
+    return merge([...a.map((t) => ({ kind: "del" as const, text: t })), ...b.map((t) => ({ kind: "add" as const, text: t }))]);
+  }
+  const n = a.length; const m = b.length;
+  const lcs: number[][] = Array.from({ length: n + 1 }, () => new Array<number>(m + 1).fill(0));
+  for (let i = n - 1; i >= 0; i--) {
+    for (let j = m - 1; j >= 0; j--) {
+      lcs[i][j] = a[i] === b[j] ? lcs[i + 1][j + 1] + 1 : Math.max(lcs[i + 1][j], lcs[i][j + 1]);
+    }
+  }
+  const out: DiffPart[] = [];
+  let i = 0; let j = 0;
+  while (i < n && j < m) {
+    if (a[i] === b[j]) { out.push({ kind: "same", text: a[i] }); i++; j++; }
+    else if (lcs[i + 1][j] >= lcs[i][j + 1]) { out.push({ kind: "del", text: a[i] }); i++; }
+    else { out.push({ kind: "add", text: b[j] }); j++; }
+  }
+  while (i < n) out.push({ kind: "del", text: a[i++] });
+  while (j < m) out.push({ kind: "add", text: b[j++] });
+  return merge(out);
+}
+
+/** Join neighbours of one kind into one part. */
+function merge(parts: DiffPart[]): DiffPart[] {
+  const out: DiffPart[] = [];
+  for (const p of parts) {
+    const last = out[out.length - 1];
+    if (last && last.kind === p.kind) last.text += p.text;
+    else out.push({ ...p });
+  }
+  return out;
+}
+
+export function diffText(before: string, after: string, by: "words" | "lines" = "words"): DiffPart[] {
+  return diffTokens(tokenize(before, by), tokenize(after, by));
+}