@dumiflex/wp-kit 0.3.0 → 0.5.0

package/src/icon-catalog.ts

@@ -1,52 +1,52 @@
-/**
- * Curated PrimeIcons glyphs offered by `IconPicker.vue`.
- *
- * PrimeIcons ships ~314 glyphs; this is a subset. The full set would need its
- * own search UI, and most of it (chevrons, spinners, media transport, brand
- * logos) means nothing as a library label. The groups below follow the kinds
- * of things people actually categorise prompt modules by.
- *
- * Names are PrimeIcons ids MINUS the `pi-` prefix (`"user"`, not `"pi-user"`)
- * — that is what the engine's `icon` column holds and what `Icon.vue` expects.
- *
- * In a plain module rather than inside the SFC so `icon-catalog.test.ts` can
- * check every name against the installed `primeicons.css` without mounting a
- * component. That test is the point: a name with no matching glyph renders as
- * an EMPTY CELL, which looks like a layout bug rather than a typo, and `brush`
- * shipped that way because nothing verified the list.
- */
-export interface IconGroup {
-  label: string;
-  icons: string[];
-}
-
-export const ICON_GROUPS: IconGroup[] = [
-  {
-    label: "Subject",
-    icons: ["user", "users", "heart", "star", "eye", "face-smile", "crown", "id-card"],
-  },
-  {
-    // `sliders-h` stands in for the art-supply glyph PrimeIcons doesn't have —
-    // there is no brush/paint icon in the set, and `palette` already carries
-    // "art style". Sliders read as "tune the look".
-    label: "Style & look",
-    icons: ["palette", "pencil", "sliders-h", "camera", "image", "sparkles", "sun", "moon"],
-  },
-  {
-    label: "Scene",
-    icons: ["home", "building", "map", "map-marker", "globe", "compass", "car", "cloud"],
-  },
-  {
-    label: "Structure",
-    icons: ["box", "folder", "book", "tag", "tags", "list", "sitemap", "objects-column"],
-  },
-  {
-    label: "Signals",
-    icons: ["bolt", "flag", "bell", "shield", "lock", "wrench", "filter", "info-circle"],
-  },
-];
-
-/** Every offered glyph, flattened — for tests and any future search box. */
-export function allCuratedIcons(): string[] {
-  return ICON_GROUPS.flatMap((g) => g.icons);
-}
+/**
+ * Curated PrimeIcons glyphs offered by `IconPicker.vue`.
+ *
+ * PrimeIcons ships ~314 glyphs; this is a subset. The full set would need its
+ * own search UI, and most of it (chevrons, spinners, media transport, brand
+ * logos) means nothing as a library label. The groups below follow the kinds
+ * of things people actually categorise prompt modules by.
+ *
+ * Names are PrimeIcons ids MINUS the `pi-` prefix (`"user"`, not `"pi-user"`)
+ * — that is what the engine's `icon` column holds and what `Icon.vue` expects.
+ *
+ * In a plain module rather than inside the SFC so `icon-catalog.test.ts` can
+ * check every name against the installed `primeicons.css` without mounting a
+ * component. That test is the point: a name with no matching glyph renders as
+ * an EMPTY CELL, which looks like a layout bug rather than a typo, and `brush`
+ * shipped that way because nothing verified the list.
+ */
+export interface IconGroup {
+  label: string;
+  icons: string[];
+}
+
+export const ICON_GROUPS: IconGroup[] = [
+  {
+    label: "Subject",
+    icons: ["user", "users", "heart", "star", "eye", "face-smile", "crown", "id-card"],
+  },
+  {
+    // `sliders-h` stands in for the art-supply glyph PrimeIcons doesn't have —
+    // there is no brush/paint icon in the set, and `palette` already carries
+    // "art style". Sliders read as "tune the look".
+    label: "Style & look",
+    icons: ["palette", "pencil", "sliders-h", "camera", "image", "sparkles", "sun", "moon"],
+  },
+  {
+    label: "Scene",
+    icons: ["home", "building", "map", "map-marker", "globe", "compass", "car", "cloud"],
+  },
+  {
+    label: "Structure",
+    icons: ["box", "folder", "book", "tag", "tags", "list", "sitemap", "objects-column"],
+  },
+  {
+    label: "Signals",
+    icons: ["bolt", "flag", "bell", "shield", "lock", "wrench", "filter", "info-circle"],
+  },
+];
+
+/** Every offered glyph, flattened — for tests and any future search box. */
+export function allCuratedIcons(): string[] {
+  return ICON_GROUPS.flatMap((g) => g.icons);
+}

package/src/image-zoom.ts

@@ -1,93 +1,93 @@
-/**
- * The maths behind `WpImageZoom`: one transform, `translate(x, y) scale(s)`
- * with its origin at the image's top-left corner. Pure, so it is tested on
- * its own.
- */
-
-export interface Size { width: number; height: number }
-export interface View { scale: number; x: number; y: number }
-
-/** Zoom never goes below this share of Fit (or of 100% for a tiny image), nor above MAX_SCALE. */
-export const MAX_SCALE = 8;
-/** The steps the − / + buttons jump through, as real-size factors. */
-export const ZOOM_STEPS = [0.1, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 6, 8] as const;
-/** How long `WpImageZoom`'s bar stays after the last pointer move or key, with `autohide`. */
-export const IDLE_MS = 2000;
-/** One wheel notch. */
-export const WHEEL_FACTOR = 1.2;
-
-/** The scale that shows the whole image in the stage (it may be above 1 for a small image). */
-export function fitScale(image: Size, stage: Size): number {
-  if (image.width <= 0 || image.height <= 0 || stage.width <= 0 || stage.height <= 0) return 1;
-  return Math.min(stage.width / image.width, stage.height / image.height);
-}
-
-export function minScale(image: Size, stage: Size): number {
-  return Math.min(fitScale(image, stage), 1) / 2;
-}
-
-export function clampScale(scale: number, image: Size, stage: Size): number {
-  return Math.min(MAX_SCALE, Math.max(minScale(image, stage), scale));
-}
-
-/** Keep the image in view: centred on an axis where it is smaller than the
- *  stage, otherwise never showing an empty edge. */
-export function clampView(view: View, image: Size, stage: Size): View {
-  const axis = (pos: number, img: number, room: number): number => {
-    const size = img * view.scale;
-    if (size <= room) return (room - size) / 2;
-    return Math.min(0, Math.max(room - size, pos));
-  };
-  return { scale: view.scale, x: axis(view.x, image.width, stage.width), y: axis(view.y, image.height, stage.height) };
-}
-
-/** Set the scale, keeping the image point under `at` (stage px) where it is. */
-export function zoomAt(view: View, scale: number, at: { x: number; y: number }, image: Size, stage: Size): View {
-  const s = clampScale(scale, image, stage);
-  const k = s / view.scale;
-  return clampView({ scale: s, x: at.x - (at.x - view.x) * k, y: at.y - (at.y - view.y) * k }, image, stage);
-}
-
-/** The view at `scale` centred on the image point `centre` (fractions 0..1). */
-export function viewAround(scale: number, centre: { x: number; y: number }, image: Size, stage: Size): View {
-  const s = clampScale(scale, image, stage);
-  return clampView({
-    scale: s,
-    x: stage.width / 2 - centre.x * image.width * s,
-    y: stage.height / 2 - centre.y * image.height * s,
-  }, image, stage);
-}
-
-/** The image point (fractions 0..1) at the middle of the stage. */
-export function centreOf(view: View, image: Size, stage: Size): { x: number; y: number } {
-  if (image.width <= 0 || image.height <= 0) return { x: 0.5, y: 0.5 };
-  const f = (mid: number, pos: number, img: number): number => Math.min(1, Math.max(0, (mid - pos) / (img * view.scale)));
-  return { x: f(stage.width / 2, view.x, image.width), y: f(stage.height / 2, view.y, image.height) };
-}
-
-/** The next step up (dir 1) or down (dir -1) from `scale`, with Fit slotted in among the steps. */
-export function stepScale(scale: number, dir: 1 | -1, fit: number): number {
-  const steps = [...ZOOM_STEPS, fit].sort((a, b) => a - b);
-  const eps = 1e-3;
-  if (dir > 0) return steps.find((s) => s > scale + eps) ?? MAX_SCALE;
-  return [...steps].reverse().find((s) => s < scale - eps) ?? steps[0];
-}
-
-/** "100%", "35%", "250%". */
-export function percent(scale: number): string {
-  return `${Math.round(scale * 100)}%`;
-}
-
-/** The part of the image the stage shows, as fractions 0..1 of the image (for a mini-map). */
-export function visibleRect(view: View, image: Size, stage: Size): { x: number; y: number; w: number; h: number } {
-  if (image.width <= 0 || image.height <= 0) return { x: 0, y: 0, w: 1, h: 1 };
-  const axis = (pos: number, img: number, room: number): [number, number] => {
-    const size = img * view.scale;
-    const a = Math.min(1, Math.max(0, -pos / size));
-    const b = Math.min(1, Math.max(0, (room - pos) / size));
-    return [a, b - a];
-  };
-  const [x, w] = axis(view.x, image.width, stage.width);
-  const [y, h] = axis(view.y, image.height, stage.height);
-  return { x, y, w, h };
-}
+/**
+ * The maths behind `WpImageZoom`: one transform, `translate(x, y) scale(s)`
+ * with its origin at the image's top-left corner. Pure, so it is tested on
+ * its own.
+ */
+
+export interface Size { width: number; height: number }
+export interface View { scale: number; x: number; y: number }
+
+/** Zoom never goes below this share of Fit (or of 100% for a tiny image), nor above MAX_SCALE. */
+export const MAX_SCALE = 8;
+/** The steps the − / + buttons jump through, as real-size factors. */
+export const ZOOM_STEPS = [0.1, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 6, 8] as const;
+/** How long `WpImageZoom`'s bar stays after the last pointer move or key, with `autohide`. */
+export const IDLE_MS = 2000;
+/** One wheel notch. */
+export const WHEEL_FACTOR = 1.2;
+
+/** The scale that shows the whole image in the stage (it may be above 1 for a small image). */
+export function fitScale(image: Size, stage: Size): number {
+  if (image.width <= 0 || image.height <= 0 || stage.width <= 0 || stage.height <= 0) return 1;
+  return Math.min(stage.width / image.width, stage.height / image.height);
+}
+
+export function minScale(image: Size, stage: Size): number {
+  return Math.min(fitScale(image, stage), 1) / 2;
+}
+
+export function clampScale(scale: number, image: Size, stage: Size): number {
+  return Math.min(MAX_SCALE, Math.max(minScale(image, stage), scale));
+}
+
+/** Keep the image in view: centred on an axis where it is smaller than the
+ *  stage, otherwise never showing an empty edge. */
+export function clampView(view: View, image: Size, stage: Size): View {
+  const axis = (pos: number, img: number, room: number): number => {
+    const size = img * view.scale;
+    if (size <= room) return (room - size) / 2;
+    return Math.min(0, Math.max(room - size, pos));
+  };
+  return { scale: view.scale, x: axis(view.x, image.width, stage.width), y: axis(view.y, image.height, stage.height) };
+}
+
+/** Set the scale, keeping the image point under `at` (stage px) where it is. */
+export function zoomAt(view: View, scale: number, at: { x: number; y: number }, image: Size, stage: Size): View {
+  const s = clampScale(scale, image, stage);
+  const k = s / view.scale;
+  return clampView({ scale: s, x: at.x - (at.x - view.x) * k, y: at.y - (at.y - view.y) * k }, image, stage);
+}
+
+/** The view at `scale` centred on the image point `centre` (fractions 0..1). */
+export function viewAround(scale: number, centre: { x: number; y: number }, image: Size, stage: Size): View {
+  const s = clampScale(scale, image, stage);
+  return clampView({
+    scale: s,
+    x: stage.width / 2 - centre.x * image.width * s,
+    y: stage.height / 2 - centre.y * image.height * s,
+  }, image, stage);
+}
+
+/** The image point (fractions 0..1) at the middle of the stage. */
+export function centreOf(view: View, image: Size, stage: Size): { x: number; y: number } {
+  if (image.width <= 0 || image.height <= 0) return { x: 0.5, y: 0.5 };
+  const f = (mid: number, pos: number, img: number): number => Math.min(1, Math.max(0, (mid - pos) / (img * view.scale)));
+  return { x: f(stage.width / 2, view.x, image.width), y: f(stage.height / 2, view.y, image.height) };
+}
+
+/** The next step up (dir 1) or down (dir -1) from `scale`, with Fit slotted in among the steps. */
+export function stepScale(scale: number, dir: 1 | -1, fit: number): number {
+  const steps = [...ZOOM_STEPS, fit].sort((a, b) => a - b);
+  const eps = 1e-3;
+  if (dir > 0) return steps.find((s) => s > scale + eps) ?? MAX_SCALE;
+  return [...steps].reverse().find((s) => s < scale - eps) ?? steps[0];
+}
+
+/** "100%", "35%", "250%". */
+export function percent(scale: number): string {
+  return `${Math.round(scale * 100)}%`;
+}
+
+/** The part of the image the stage shows, as fractions 0..1 of the image (for a mini-map). */
+export function visibleRect(view: View, image: Size, stage: Size): { x: number; y: number; w: number; h: number } {
+  if (image.width <= 0 || image.height <= 0) return { x: 0, y: 0, w: 1, h: 1 };
+  const axis = (pos: number, img: number, room: number): [number, number] => {
+    const size = img * view.scale;
+    const a = Math.min(1, Math.max(0, -pos / size));
+    const b = Math.min(1, Math.max(0, (room - pos) / size));
+    return [a, b - a];
+  };
+  const [x, w] = axis(view.x, image.width, stage.width);
+  const [y, h] = axis(view.y, image.height, stage.height);
+  return { x, y, w, h };
+}

package/src/kind-colour.ts

@@ -0,0 +1,28 @@
+/**
+ * The colour of each module type, for a Chip (or anything else) that names
+ * one: the `--wp-kind-*` colour the extension uses for that type, bundles
+ * slate. There is no kind chip: a kind is a Chip with this colour.
+ *
+ *   <Chip :color="kindColour(itemType(post.kind, post.subtype))">{{ itemType(post.kind, post.subtype) }}</Chip>
+ */
+export type ModuleSubtype = "fixed_values" | "combine" | "wildcard" | "constraint" | "derivation";
+export type ItemType = ModuleSubtype | "bundle";
+
+const COLOURS: Record<ItemType, string> = {
+  fixed_values: "var(--wp-kind-fixed)",
+  combine: "var(--wp-kind-combine)",
+  wildcard: "var(--wp-kind-wildcard)",
+  constraint: "var(--wp-kind-constraint)",
+  derivation: "var(--wp-kind-derivation)",
+  bundle: "var(--wp-bundle-default)",
+};
+
+/** A post or library item's type. A module with no subtype reads as
+ *  `fixed_values` (the oldest type); a `"bundle"` subtype reads as a bundle. */
+export function itemType(kind: "module" | "bundle", subtype?: ItemType | null): ItemType {
+  return kind === "bundle" ? "bundle" : (subtype ?? "fixed_values");
+}
+
+export function kindColour(type: ItemType): string {
+  return COLOURS[type];
+}

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/logo-paths.ts

@@ -1,21 +1,21 @@
-/** The Wildcard Pipeline logo, split into its parts so a drawing can move them
- *  on their own (viewBox 0 0 1024 1024). Same shapes as `wp-logo.svg`. */
-export const RING_A =
-  "m512,2c-53.6,0-98.47,38.16-108.84,88.73-75.07,19.29-143.32,58.26-198.74,113.68-55.42,55.42-94.39,123.68-113.68,198.74-50.58,10.38-88.73,55.24-88.73,108.84s38.16,98.47,88.73,108.84c13.62,53.14,37.03,102.64,69.77,147.47,37.14,50.86,85.83,93.86,140.81,124.33,5.54,3.08,11.56,4.54,17.48,4.54,12.7,0,25.02-6.72,31.61-18.61,9.68-17.44,3.38-39.42-14.07-49.09-85.32-47.32-147.22-125.71-173.38-218.21,36.3-18.29,61.27-55.92,61.27-99.28s-24.94-80.97-61.23-99.27c34.22-119.96,129.79-215.52,249.74-249.74,18.3,36.29,55.92,61.23,99.27,61.23,61.27,0,111.11-49.84,111.11-111.11S573.27,2,512,2ZM113.11,473.11c21.44,0,38.89,17.44,38.89,38.89,0,20.1-15.32,36.69-34.91,38.69h-.01c-.18.02-.36.03-.53.04-1.13.1-2.28.16-3.43.16-21.44,0-38.89-17.44-38.89-38.89s17.44-38.89,38.89-38.89Zm398.89-321.11c-21.44,0-38.89-17.44-38.89-38.89s17.44-38.89,38.89-38.89,38.89,17.44,38.89,38.89-17.44,38.89-38.89,38.89Z";
-export const RING_B =
-  "m933.27,403.16c-13.62-53.14-37.03-102.64-69.77-147.47-37.14-50.86-85.83-93.86-140.81-124.33-17.44-9.68-39.42-3.38-49.09,14.07-9.68,17.44-3.38,39.42,14.07,49.09,85.32,47.32,147.22,125.71,173.38,218.21-36.3,18.29-61.27,55.92-61.27,99.28s24.94,80.97,61.23,99.27c-34.22,119.96-129.79,215.52-249.74,249.74-18.3-36.29-55.92-61.23-99.27-61.23-61.27,0-111.11,49.84-111.11,111.11s49.84,111.11,111.11,111.11c53.6,0,98.47-38.16,108.84-88.73,75.07-19.29,143.32-58.26,198.74-113.68,55.42-55.42,94.39-123.68,113.68-198.74,50.58-10.38,88.73-55.24,88.73-108.84s-38.16-98.47-88.73-108.84Zm-421.27,546.62c-21.44,0-38.89-17.44-38.89-38.89s17.44-38.89,38.89-38.89,38.89,17.44,38.89,38.89-17.44,38.89-38.89,38.89Zm398.89-398.89c-21.44,0-38.89-17.44-38.89-38.89,0-20.03,15.22-36.58,34.72-38.67.38-.04.77-.08,1.16-.11h.02c.99-.08,1.99-.11,2.99-.11,21.44,0,38.89,17.44,38.89,38.89s-17.44,38.89-38.89,38.89Z";
-export const STAR_BIG =
-  "m735.02,517.56c-153.82,30.87-186.59,63.64-217.46,217.46-1.22,6.08-9.9,6.08-11.12,0-30.87-153.82-63.64-186.59-217.46-217.46-6.08-1.22-6.08-9.9,0-11.12,153.82-30.87,186.59-63.64,217.46-217.46,1.22-6.08,9.9-6.08,11.12,0,30.87,153.82,63.64,186.59,217.46,217.46,6.08,1.22,6.08,9.9,0,11.12Z";
-export const STAR_A =
-  "m434.06,665.85c-51.08,10.25-61.96,21.13-72.22,72.22-.41,2.02-3.29,2.02-3.69,0-10.25-51.08-21.13-61.96-72.22-72.22-2.02-.41-2.02-3.29,0-3.69,51.08-10.25,61.96-21.13,72.22-72.22.41-2.02,3.29-2.02,3.69,0,10.25,51.08,21.13,61.96,72.22,72.22,2.02.41,2.02,3.29,0,3.69Z";
-export const STAR_B =
-  "m738.07,361.84c-51.08,10.25-61.96,21.13-72.22,72.22-.41,2.02-3.29,2.02-3.69,0-10.25-51.08-21.13-61.96-72.22-72.22-2.02-.41-2.02-3.29,0-3.69,51.08-10.25,61.96-21.13,72.22-72.22.41-2.02,3.29-2.02,3.69,0,10.25,51.08,21.13,61.96,72.22,72.22,2.02.41,2.02,3.29,0,3.69Z";
-
-/** The logo's colours: [big star and first ring start, middle, small star and
- *  second ring end]. Brand colours, not theme tokens: the mark looks the same
- *  in light and dark. `community` is the community site's rust counterpart. */
-export const BRAND_COLOURS = {
-  extension: ["#a970ff", "#6366f1", "#33d6c6"],
-  community: ["#da7550", "#f1636c", "#ad33d6"],
-} as const;
-export type LogoBrand = keyof typeof BRAND_COLOURS;
+/** The Wildcard Pipeline logo, split into its parts so a drawing can move them
+ *  on their own (viewBox 0 0 1024 1024). Same shapes as `wp-logo.svg`. */
+export const RING_A =
+  "m512,2c-53.6,0-98.47,38.16-108.84,88.73-75.07,19.29-143.32,58.26-198.74,113.68-55.42,55.42-94.39,123.68-113.68,198.74-50.58,10.38-88.73,55.24-88.73,108.84s38.16,98.47,88.73,108.84c13.62,53.14,37.03,102.64,69.77,147.47,37.14,50.86,85.83,93.86,140.81,124.33,5.54,3.08,11.56,4.54,17.48,4.54,12.7,0,25.02-6.72,31.61-18.61,9.68-17.44,3.38-39.42-14.07-49.09-85.32-47.32-147.22-125.71-173.38-218.21,36.3-18.29,61.27-55.92,61.27-99.28s-24.94-80.97-61.23-99.27c34.22-119.96,129.79-215.52,249.74-249.74,18.3,36.29,55.92,61.23,99.27,61.23,61.27,0,111.11-49.84,111.11-111.11S573.27,2,512,2ZM113.11,473.11c21.44,0,38.89,17.44,38.89,38.89,0,20.1-15.32,36.69-34.91,38.69h-.01c-.18.02-.36.03-.53.04-1.13.1-2.28.16-3.43.16-21.44,0-38.89-17.44-38.89-38.89s17.44-38.89,38.89-38.89Zm398.89-321.11c-21.44,0-38.89-17.44-38.89-38.89s17.44-38.89,38.89-38.89,38.89,17.44,38.89,38.89-17.44,38.89-38.89,38.89Z";
+export const RING_B =
+  "m933.27,403.16c-13.62-53.14-37.03-102.64-69.77-147.47-37.14-50.86-85.83-93.86-140.81-124.33-17.44-9.68-39.42-3.38-49.09,14.07-9.68,17.44-3.38,39.42,14.07,49.09,85.32,47.32,147.22,125.71,173.38,218.21-36.3,18.29-61.27,55.92-61.27,99.28s24.94,80.97,61.23,99.27c-34.22,119.96-129.79,215.52-249.74,249.74-18.3-36.29-55.92-61.23-99.27-61.23-61.27,0-111.11,49.84-111.11,111.11s49.84,111.11,111.11,111.11c53.6,0,98.47-38.16,108.84-88.73,75.07-19.29,143.32-58.26,198.74-113.68,55.42-55.42,94.39-123.68,113.68-198.74,50.58-10.38,88.73-55.24,88.73-108.84s-38.16-98.47-88.73-108.84Zm-421.27,546.62c-21.44,0-38.89-17.44-38.89-38.89s17.44-38.89,38.89-38.89,38.89,17.44,38.89,38.89-17.44,38.89-38.89,38.89Zm398.89-398.89c-21.44,0-38.89-17.44-38.89-38.89,0-20.03,15.22-36.58,34.72-38.67.38-.04.77-.08,1.16-.11h.02c.99-.08,1.99-.11,2.99-.11,21.44,0,38.89,17.44,38.89,38.89s-17.44,38.89-38.89,38.89Z";
+export const STAR_BIG =
+  "m735.02,517.56c-153.82,30.87-186.59,63.64-217.46,217.46-1.22,6.08-9.9,6.08-11.12,0-30.87-153.82-63.64-186.59-217.46-217.46-6.08-1.22-6.08-9.9,0-11.12,153.82-30.87,186.59-63.64,217.46-217.46,1.22-6.08,9.9-6.08,11.12,0,30.87,153.82,63.64,186.59,217.46,217.46,6.08,1.22,6.08,9.9,0,11.12Z";
+export const STAR_A =
+  "m434.06,665.85c-51.08,10.25-61.96,21.13-72.22,72.22-.41,2.02-3.29,2.02-3.69,0-10.25-51.08-21.13-61.96-72.22-72.22-2.02-.41-2.02-3.29,0-3.69,51.08-10.25,61.96-21.13,72.22-72.22.41-2.02,3.29-2.02,3.69,0,10.25,51.08,21.13,61.96,72.22,72.22,2.02.41,2.02,3.29,0,3.69Z";
+export const STAR_B =
+  "m738.07,361.84c-51.08,10.25-61.96,21.13-72.22,72.22-.41,2.02-3.29,2.02-3.69,0-10.25-51.08-21.13-61.96-72.22-72.22-2.02-.41-2.02-3.29,0-3.69,51.08-10.25,61.96-21.13,72.22-72.22.41-2.02,3.29-2.02,3.69,0,10.25,51.08,21.13,61.96,72.22,72.22,2.02.41,2.02,3.29,0,3.69Z";
+
+/** The logo's colours: [big star and first ring start, middle, small star and
+ *  second ring end]. Brand colours, not theme tokens: the mark looks the same
+ *  in light and dark. `community` is the community site's rust counterpart. */
+export const BRAND_COLOURS = {
+  extension: ["#a970ff", "#6366f1", "#33d6c6"],
+  community: ["#da7550", "#f1636c", "#ad33d6"],
+} as const;
+export type LogoBrand = keyof typeof BRAND_COLOURS;