@dumiflex/wp-kit 0.4.0 → 0.6.0

package/src/hsv.ts

@@ -5,7 +5,7 @@
  * lowercase. Functions are tolerant of out-of-range input — they clamp
  * rather than throw, which keeps the picker UI robust under fast drags.
  *
- * Lives in shared/ so both the manager-side ColorPicker / TweaksPanel
+ * Lives in shared/ so both the ColorField / TweaksPanel
  * AND the canvas-side bundle modal can drive the same HsvPicker
  * without a cross-package import.
  */

package/src/loading-mark-motion.ts

@@ -0,0 +1,249 @@
+/**
+ * LoadingMark's motion, drawn on a canvas.
+ *
+ * The mark used to move its SVG paths with CSS. A keyframed `transform` /
+ * `opacity` goes to the compositor, which blurs the path and snaps it to whole
+ * pixels as it starts; animating registered custom properties fixed that in
+ * Chromium, but Firefox still lays each frame of an SVG transform on the pixel
+ * grid, so the rings stepped and twitched as they slid. A canvas puts every
+ * shape at its exact fractional position each frame, sharp and smooth in both.
+ *
+ * One `requestAnimationFrame` loop draws every mark on the page. Each mark
+ * keeps its own clock, so a host can slow or pause the marks inside it with
+ * `data-wp-motion-speed` (a number) and `data-wp-motion-paused` on an
+ * ancestor, as the kit site's Animations section does.
+ */
+import { RING_A, RING_B, STAR_A, STAR_B, STAR_BIG } from "./logo-paths";
+
+/** One loop of the logo, in ms; the sparkle's swap takes two. */
+export const LOOP_MS = 2400;
+/** Room around the 1024 box for the rings as they slide apart (70 units)
+ *  and for anti-aliasing at the edge. */
+export const PAD = 82;
+export const BOX = 1024 + 2 * PAD;
+
+/** CSS `cubic-bezier(x1, y1, x2, y2)` as a function of progress. */
+export function cubicBezier(x1: number, y1: number, x2: number, y2: number): (x: number) => number {
+  return (x) => {
+    if (x <= 0) return 0;
+    if (x >= 1) return 1;
+    let lo = 0;
+    let hi = 1;
+    let t = x;
+    for (let k = 0; k < 30; k++) {
+      t = (lo + hi) / 2;
+      const cx = 3 * x1 * t * (1 - t) ** 2 + 3 * x2 * t * t * (1 - t) + t ** 3;
+      if (cx < x) lo = t;
+      else hi = t;
+    }
+    return 3 * y1 * t * (1 - t) ** 2 + 3 * y2 * t * t * (1 - t) + t ** 3;
+  };
+}
+
+const SMOOTH = cubicBezier(0.65, 0, 0.35, 1);
+const EASE_IN_OUT = cubicBezier(0.42, 0, 0.58, 1);
+
+type Stop = readonly [at: number, values: readonly number[]];
+
+/** Value of a keyframe track at progress `p` (0..1), eased per segment the
+ *  way CSS eases between two keyframes. */
+export function track(stops: readonly Stop[], p: number, ease: (x: number) => number): number[] {
+  for (let k = 0; k < stops.length - 1; k++) {
+    const a = stops[k];
+    const b = stops[k + 1];
+    if (!a || !b) break;
+    if (p >= a[0] && p <= b[0]) {
+      if (b[0] === a[0]) return [...b[1]];
+      const e = ease((p - a[0]) / (b[0] - a[0]));
+      return a[1].map((v, j) => v + ((b[1][j] ?? v) - v) * e);
+    }
+  }
+  return [...(stops[stops.length - 1]?.[1] ?? [])];
+}
+
+/** The rings' slide apart (units of the 1024 box). */
+const SPLIT: readonly Stop[] = [[0, [0]], [0.15, [0]], [0.4, [70]], [0.6, [70]], [0.85, [0]], [1, [0]]];
+/** The big star's dip: [scale, turn in degrees]. */
+const DIP: readonly Stop[] = [[0, [1, 0]], [0.15, [1, 0]], [0.32, [0.7, 45]], [0.5, [1, 90]], [1, [1, 90]]];
+/** The small stars' twinkle: [opacity, scale]. */
+const TWINKLE: readonly Stop[] = [[0, [1, 1]], [0.5, [0.35, 0.6]], [1, [1, 1]]];
+/** The sparkle's small stars trading places (degrees, over two loops). */
+const SWAP: readonly Stop[] = [[0, [0]], [0.15, [0]], [0.5, [180]], [0.65, [180]], [1, [360]]];
+
+export interface Pose {
+  split: number;
+  bigScale: number;
+  bigTurn: number;
+  twinkleAlpha: number;
+  twinkleScale: number;
+  swap: number;
+}
+
+/** Where every part is `ms` into the animation. */
+export function poseAt(ms: number): Pose {
+  const p = (((ms % LOOP_MS) + LOOP_MS) % LOOP_MS) / LOOP_MS;
+  const p2 = (((ms % (2 * LOOP_MS)) + 2 * LOOP_MS) % (2 * LOOP_MS)) / (2 * LOOP_MS);
+  const [split = 0] = track(SPLIT, p, SMOOTH);
+  const [bigScale = 1, bigTurn = 0] = track(DIP, p, SMOOTH);
+  const [twinkleAlpha = 1, twinkleScale = 1] = track(TWINKLE, p, EASE_IN_OUT);
+  const [swap = 0] = track(SWAP, p2, SMOOTH);
+  return { split, bigScale, bigTurn, twinkleAlpha, twinkleScale, swap };
+}
+
+/** Centres of the stars in the 1024 box (from their bounding boxes). */
+const C_BIG = [512, 512] as const;
+const C_A = [360, 664] as const;
+const C_B = [664, 360] as const;
+
+let paths: Record<"ra" | "rb" | "big" | "a" | "b", Path2D> | null = null;
+function shapes(): Record<"ra" | "rb" | "big" | "a" | "b", Path2D> {
+  paths ??= { ra: new Path2D(RING_A), rb: new Path2D(RING_B), big: new Path2D(STAR_BIG), a: new Path2D(STAR_A), b: new Path2D(STAR_B) };
+  return paths;
+}
+
+export interface Look {
+  variant: "logo" | "sparkle";
+  /** [violet, indigo, teal], or three times the text colour for `mono`. */
+  colours: readonly [string, string, string];
+  /** Flat colours (mono): no ring gradients. */
+  flat: boolean;
+}
+
+function around(ctx: CanvasRenderingContext2D, [x, y]: readonly [number, number], scale: number, turn: number, path: Path2D, fill: string, alpha: number): void {
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.rotate((turn * Math.PI) / 180);
+  ctx.scale(scale, scale);
+  ctx.translate(-x, -y);
+  ctx.globalAlpha = alpha;
+  ctx.fillStyle = fill;
+  ctx.fill(path);
+  ctx.restore();
+}
+
+/** Draws one frame on a canvas `BOX` units square (scaled to its pixels). */
+export function drawPose(ctx: CanvasRenderingContext2D, width: number, look: Look, pose: Pose): void {
+  const k = width / BOX;
+  const [violet, indigo, teal] = look.colours;
+  const p = shapes();
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.clearRect(0, 0, width, width);
+  ctx.setTransform(k, 0, 0, k, PAD * k, PAD * k);
+  if (look.variant === "logo") {
+    const ringA = (() => {
+      if (look.flat) return violet;
+      const g = ctx.createLinearGradient(312.56, 897.19, 312.56, 2);
+      g.addColorStop(0, violet);
+      g.addColorStop(1, indigo);
+      return g;
+    })();
+    const ringB = (() => {
+      if (look.flat) return violet;
+      const g = ctx.createLinearGradient(711.44, 126.81, 711.44, 1022);
+      g.addColorStop(0, indigo);
+      g.addColorStop(1, teal);
+      return g;
+    })();
+    ctx.save();
+    ctx.translate(-pose.split, -pose.split);
+    ctx.fillStyle = ringA;
+    ctx.fill(p.ra);
+    ctx.restore();
+    ctx.save();
+    ctx.translate(pose.split, pose.split);
+    ctx.fillStyle = ringB;
+    ctx.fill(p.rb);
+    ctx.restore();
+    around(ctx, C_BIG, pose.bigScale, pose.bigTurn, p.big, violet, 1);
+    around(ctx, C_A, pose.twinkleScale, 0, p.a, indigo, pose.twinkleAlpha);
+    around(ctx, C_B, pose.twinkleScale, 0, p.b, teal, pose.twinkleAlpha);
+    return;
+  }
+  ctx.translate(512, 512);
+  ctx.scale(1.45, 1.45);
+  ctx.translate(-512, -512);
+  around(ctx, C_BIG, pose.bigScale, pose.bigTurn, p.big, violet, 1);
+  ctx.save();
+  ctx.translate(512, 512);
+  ctx.rotate((pose.swap * Math.PI) / 180);
+  ctx.translate(-512, -512);
+  ctx.fillStyle = indigo;
+  ctx.fill(p.a);
+  ctx.fillStyle = teal;
+  ctx.fill(p.b);
+  ctx.restore();
+}
+
+/** A mark the loop draws. */
+export interface Animated {
+  canvas: HTMLCanvasElement;
+  look: () => Look;
+  /** ms of animation shown so far, advanced by the loop. */
+  clock: number;
+  /** False while off screen: the clock still runs, nothing is drawn. */
+  visible: boolean;
+}
+
+const marks = new Set<Animated>();
+let frame = 0;
+let last = 0;
+
+/** Speed and pause from the nearest host that sets them. */
+export function motionOf(el: Element): { speed: number; paused: boolean } {
+  const host = el.closest("[data-wp-motion-speed], [data-wp-motion-paused]");
+  if (!host) return { speed: 1, paused: false };
+  const paused = host.closest("[data-wp-motion-paused]") !== null;
+  const speedHost = host.closest("[data-wp-motion-speed]");
+  const speed = Number(speedHost?.getAttribute("data-wp-motion-speed") ?? "1");
+  return { speed: Number.isFinite(speed) && speed >= 0 ? speed : 1, paused };
+}
+
+function fit(c: HTMLCanvasElement): void {
+  const css = c.clientWidth;
+  const want = Math.max(1, Math.round(css * (window.devicePixelRatio || 1)));
+  if (c.width !== want) {
+    c.width = want;
+    c.height = want;
+  }
+}
+
+function tick(now: number): void {
+  const dt = last ? Math.min(now - last, 100) : 0;
+  last = now;
+  for (const m of marks) {
+    const { speed, paused } = motionOf(m.canvas);
+    if (!paused) m.clock += dt * speed;
+    if (!m.visible) continue;
+    const ctx = m.canvas.getContext("2d");
+    if (!ctx) continue;
+    fit(m.canvas);
+    drawPose(ctx, m.canvas.width, m.look(), poseAt(m.clock));
+  }
+  frame = marks.size ? requestAnimationFrame(tick) : 0;
+}
+
+/** Starts drawing a mark; returns the function that stops it. */
+export function animate(mark: Animated): () => void {
+  marks.add(mark);
+  if (!frame) {
+    last = 0;
+    frame = requestAnimationFrame(tick);
+  }
+  return () => {
+    marks.delete(mark);
+    if (!marks.size && frame) {
+      cancelAnimationFrame(frame);
+      frame = 0;
+    }
+  };
+}
+
+/** Draws one still frame right away (the first frame, before the loop runs,
+ *  so the mark never shows blank). */
+export function drawNow(mark: Animated): boolean {
+  const ctx = mark.canvas.getContext("2d");
+  if (!ctx) return false;
+  fit(mark.canvas);
+  drawPose(ctx, mark.canvas.width, mark.look(), poseAt(mark.clock));
+  return true;
+}

package/src/menu.css

@@ -0,0 +1,51 @@
+/* Menu panel: the one look of every floating list in the kit (Select's list,
+ * ContextMenu / DropdownMenu and Combobox's list). Pulled in scoped by
+ * Popover (whose `variant="menu"` panel is the menu), ContextMenu, Select and
+ * Combobox. It reads only the SHARED_TOKENS names, so a menu wears the
+ * manager colours on a page and the canvas colours in a node.
+ *
+ *   <div class="wp-menu">                       the panel
+ *     <li class="wp-menu__item" data-active="true" aria-selected="true">
+ *
+ * Item states: hover and `[data-active="true"]` (the keyboard's row) share one
+ * tint; `[aria-selected="true"]` is a lighter one; `[aria-disabled="true"]` is
+ * dim and takes no hover. A piece keeps its own row layout (icons, meta,
+ * subtitles, ticks); the sheet sets everything you see around it.
+ */
+
+.wp-menu {
+  z-index: 10020; /* above every modal overlay (they run up to 10010) */
+  box-sizing: border-box;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  background: var(--wp-bg-2);
+  color: var(--wp-text);
+  border: 1px solid var(--wp-border-strong);
+  border-radius: min(8px, var(--wp-radius-cap, 999px));
+  box-shadow: var(--wp-shadow-md);
+  font-family: var(--wp-font-sans, sans-serif);
+  font-size: 12px;
+}
+
+.wp-menu__item {
+  padding: 6px 8px;
+  border-radius: min(6px, var(--wp-radius-cap, 999px));
+  color: var(--wp-text);
+  font-size: 12px;
+  cursor: pointer;
+  user-select: none;
+}
+.wp-menu__item[aria-selected="true"] {
+  background: color-mix(in oklab, var(--wp-accent) 12%, transparent);
+}
+.wp-menu__item:hover,
+.wp-menu__item[data-active="true"] {
+  background: var(--wp-accent-glow);
+  color: var(--wp-text);
+}
+.wp-menu__item[aria-disabled="true"] {
+  color: var(--wp-text-dim);
+  background: transparent;
+  cursor: not-allowed;
+}

package/src/motion.css

@@ -0,0 +1,73 @@
+/*
+ * Entrances and nudges for things that appear while you watch: a streamed
+ * reply's new words, a reaction, a chip by the selection, a question that
+ * needs an answer. Add the class to the element as it mounts.
+ *
+ *   .wp-enter-fade    fades in (150 ms): each new run of streamed text.
+ *   .wp-enter-pop     pops in with a small overshoot (320 ms): a reaction.
+ *   .wp-enter-rise    rises 4 px into place (140 ms): a chip above a
+ *                     selection; add data-from="below" when it sits under it.
+ *   .wp-enter-drop    drops 6 px into place (500 ms): a panel that asks for
+ *                     something.
+ *   .wp-attention     a soft accent ring that pulses three times (after
+ *                     .wp-enter-drop when both are set).
+ *
+ * The moving element keeps its own position: set --wp-enter-x for an extra
+ * horizontal shift (a chip centred with -50%), and it goes into the same
+ * transform.
+ *
+ * Every entrance animates registered custom properties, never `opacity` or
+ * `transform` themselves: those go to the compositor, which lifts the element
+ * onto its own layer while it moves and drops it after, so text went soft
+ * during the motion and snapped half a pixel at its end.
+ */
+@property --wp-enter-o { syntax: "<number>"; inherits: false; initial-value: 1; }
+@property --wp-enter-s { syntax: "<number>"; inherits: false; initial-value: 1; }
+@property --wp-enter-y { syntax: "<length>"; inherits: false; initial-value: 0px; }
+
+@layer wp-extension {
+  .wp-enter-fade {
+    opacity: var(--wp-enter-o);
+    animation: wp-enter-fade 150ms ease-out;
+  }
+  .wp-enter-pop {
+    opacity: var(--wp-enter-o);
+    transform: translateX(var(--wp-enter-x, 0px)) scale(var(--wp-enter-s));
+    animation: wp-enter-pop 0.32s cubic-bezier(0.3, 1.6, 0.5, 1) both;
+  }
+  .wp-enter-rise {
+    opacity: var(--wp-enter-o);
+    transform: translate(var(--wp-enter-x, 0px), var(--wp-enter-y));
+    animation: wp-enter-rise 0.14s ease-out both;
+  }
+  .wp-enter-rise[data-from="below"] { animation-name: wp-enter-rise-below; }
+  .wp-enter-drop {
+    opacity: var(--wp-enter-o);
+    transform: translate(var(--wp-enter-x, 0px), var(--wp-enter-y));
+    animation: wp-enter-drop 0.5s ease-out;
+  }
+  .wp-attention { animation: wp-attention 2.4s ease-in-out 3; }
+  .wp-enter-drop.wp-attention {
+    animation: wp-enter-drop 0.5s ease-out, wp-attention 2.4s ease-in-out 0.5s 3;
+  }
+
+  @keyframes wp-enter-fade { from { --wp-enter-o: 0; } to { --wp-enter-o: 1; } }
+  @keyframes wp-enter-pop {
+    from { --wp-enter-s: 0.3; --wp-enter-o: 0; }
+    to { --wp-enter-s: 1; --wp-enter-o: 1; }
+  }
+  @keyframes wp-enter-rise {
+    from { --wp-enter-o: 0; --wp-enter-y: 4px; }
+    to { --wp-enter-o: 1; --wp-enter-y: 0px; }
+  }
+  @keyframes wp-enter-rise-below {
+    from { --wp-enter-o: 0; --wp-enter-y: -4px; }
+    to { --wp-enter-o: 1; --wp-enter-y: 0px; }
+  }
+  @keyframes wp-enter-drop { from { --wp-enter-o: 0; --wp-enter-y: -6px; } }
+  @keyframes wp-attention { 50% { box-shadow: 0 0 0 6px var(--wp-accent-glow); } }
+
+  @media (prefers-reduced-motion: reduce) {
+    .wp-enter-fade, .wp-enter-pop, .wp-enter-rise, .wp-enter-drop, .wp-attention { animation: none; }
+  }
+}

package/src/slider-math.ts

@@ -1,5 +1,5 @@
 /**
- * Number helpers for sliders (Slider now, the two-thumb range later): clamp
+ * Number helpers for Slider (one thumb or a pair): clamp
  * to the ends, snap to the step counted from `min`, and turn a pointer
  * position into a value. Steps like 0.1 snap without float fuzz.
  */
@@ -43,3 +43,47 @@ export function keyStep(key: string, v: number, min: number, max: number, step:
     default: return null;
   }
 }
+
+/**
+ * Mark snapping. `snap: true` keeps the value on a mark (the nearest one);
+ * a number pulls it onto a mark only within that distance, so the thumb
+ * moves freely by its step elsewhere and "clicks" into a mark near one.
+ * With no marks, or snap off, the value comes back as it was.
+ */
+export function snapToMarks(v: number, marks: readonly number[], snapTo: boolean | number | undefined): number {
+  if (!snapTo || !marks.length) return v;
+  let best = marks[0] ?? v;
+  for (const m of marks) if (Math.abs(m - v) < Math.abs(best - v)) best = m;
+  if (snapTo === true) return best;
+  return Math.abs(best - v) <= snapTo ? best : v;
+}
+
+/**
+ * A key press on a slider that only takes marks (`snap: true`): arrows go to
+ * the next mark up or down, PageUp/PageDown jump `big` marks, Home/End the
+ * first and last. Null for a key the slider ignores.
+ */
+export function keyToMark(key: string, v: number, marks: readonly number[], big = 3): number | null {
+  const sorted = [...new Set(marks)].sort((a, b) => a - b);
+  if (!sorted.length) return null;
+  // Where v sits: the index of the mark at it, or between two marks.
+  const at = sorted.findIndex((m) => m >= v);
+  const exact = at >= 0 && sorted[at] === v;
+  const up = (n: number): number => {
+    const from = at < 0 ? sorted.length : exact ? at : at - 1;
+    return sorted[Math.min(sorted.length - 1, from + n)] ?? v;
+  };
+  const down = (n: number): number => {
+    const from = at < 0 ? sorted.length : at;
+    return sorted[Math.max(0, from - n)] ?? v;
+  };
+  switch (key) {
+    case "ArrowRight": case "ArrowUp": return up(1);
+    case "ArrowLeft": case "ArrowDown": return down(1);
+    case "PageUp": return up(big);
+    case "PageDown": return down(big);
+    case "Home": return sorted[0] ?? v;
+    case "End": return sorted[sorted.length - 1] ?? v;
+    default: return null;
+  }
+}

package/src/theme/looks.css

@@ -47,8 +47,10 @@
 /* --wp-radius-cap: the roundest a corner may get in this look. Fixed radii
    in components are written min(Npx, var(--wp-radius-cap, 999px)) and
    pills var(--wp-radius-cap, 999px), so Orbit draws them as authored and a
-   square look squares them without a rule per component. Circles (50%)
-   stay circles. The theme audit (scripts/theme-audit) fails on a corner
+   square look squares them without a rule per component. Circles are
+   min(50%, var(--wp-radius-cap, 999px)): round in Orbit, softened in Crisp,
+   square in Terminal and TUI (dots, radios, avatars, the timeline).
+   src/__tests__/corners.test.ts fails on a raw radius. The theme audit (scripts/theme-audit) fails on a corner
    rounder than the cap. */
 html[data-wp-look="crisp"] { --wp-radius-cap: 4px; }
 html[data-wp-look="terminal"],
@@ -362,10 +364,8 @@ html[data-wp-look="tui"] .wp-check:is([aria-checked="true"], [data-checked="true
 html[data-wp-look="tui"] .wp-check:is([aria-checked="mixed"], [data-indeterminate="true"]):not([data-checked="true"])::before { content: "[-]"; color: var(--wp-accent-text); }
 html[data-wp-look="tui"] .wp-page__title { font-size: 16px; font-weight: 700; letter-spacing: 0; }
 /* Radios read ( ) / (*) beside the [ ] / [x] checkboxes; the drawn dot
-   hides. RadioGroup marks the picked option on the row (data-checked), the
-   plain .wp-radio is a real input (:checked). */
-html[data-wp-look="tui"] .wp-radio-group__opt .wp-radio-group__dot,
-html[data-wp-look="tui"] .wp-radio {
+   hides. RadioGroup marks the picked option on the row (data-checked). */
+html[data-wp-look="tui"] .wp-radio-group__opt .wp-radio-group__dot {
   width: auto;
   min-width: 3ch;
   height: auto;
@@ -381,19 +381,6 @@ html[data-wp-look="tui"] .wp-radio-group__opt[data-checked] .wp-radio-group__dot
 html[data-wp-look="tui"] .wp-radio-group__dot::before { content: "( )"; }
 html[data-wp-look="tui"] .wp-radio-group__opt[data-checked] .wp-radio-group__dot::before { content: "(*)"; color: var(--wp-accent-text); }
 html[data-wp-look="tui"] .wp-radio-group__opt[aria-disabled="true"][data-checked] .wp-radio-group__dot::before { color: var(--wp-text-dim); }
-html[data-wp-look="tui"] .wp-radio::before,
-html[data-wp-look="tui"] .wp-radio:disabled::before {
-  content: "( )";
-  width: auto;
-  height: auto;
-  border-radius: 0;
-  background: transparent;
-  transform: none;
-}
-html[data-wp-look="tui"] .wp-radio:checked::before { content: "(*)"; color: var(--wp-accent-text); }
-html[data-wp-look="tui"] .wp-radio:disabled:checked::before { content: "(*)"; color: var(--wp-text-dim); }
-html[data-wp-look="tui"] .wp-radio:checked,
-html[data-wp-look="tui"] .wp-radio:disabled:checked { background: transparent; }
 
 /* ================= Canvas previews ignore the look =================
    The canvas keeps ComfyUI's ground in every look (only the accent follows