@dumiflex/wp-kit 0.6.0 → 0.7.0

package/src/loading-mark-motion.ts

@@ -1,66 +1,12 @@
 /**
- * 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.
+ * LoadingMark's motion, drawn on a canvas (see `canvas-motion.ts` for why).
+ * The same keyframes the mark had in CSS, as eased tracks.
  */
 import { RING_A, RING_B, STAR_A, STAR_B, STAR_BIG } from "./logo-paths";
+import { EASE_IN_OUT, SMOOTH, begin, fillAround, track, type Stop } from "./canvas-motion";
 
 /** 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]. */
@@ -91,12 +37,12 @@ export function poseAt(ms: number): Pose {
 }
 
 /** 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;
+export const C_BIG = [512, 512] as const;
+export const C_A = [360, 664] as const;
+export 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> {
+export 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;
 }
@@ -109,26 +55,11 @@ export interface Look {
   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);
+  begin(ctx, width);
   if (look.variant === "logo") {
     const ringA = (() => {
       if (look.flat) return violet;
@@ -154,15 +85,15 @@ export function drawPose(ctx: CanvasRenderingContext2D, width: number, look: Loo
     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);
+    fillAround(ctx, C_BIG, pose.bigScale, pose.bigTurn, p.big, violet, 1);
+    fillAround(ctx, C_A, pose.twinkleScale, 0, p.a, indigo, pose.twinkleAlpha);
+    fillAround(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);
+  fillAround(ctx, C_BIG, pose.bigScale, pose.bigTurn, p.big, violet, 1);
   ctx.save();
   ctx.translate(512, 512);
   ctx.rotate((pose.swap * Math.PI) / 180);
@@ -173,77 +104,3 @@ export function drawPose(ctx: CanvasRenderingContext2D, width: number, look: Loo
   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/matrix-axis.ts

@@ -89,3 +89,31 @@ export function groupHue(grp: AxisGroup, role: "source" | "target", labeled: boo
   if (!isBucket(grp)) return axisHueAt(grp.axisIndex);
   return labeled ? UNGROUPED_HUE : role === "source" ? "var(--wp-constraint-source)" : "var(--wp-constraint-target)";
 }
+
+/** A constraint cell's rule. `only` (schema v6, linked picks): when the
+ *  source fires, targets without a rule of their own in that row are
+ *  excluded. `allow` is the neutral cell. */
+export type CellMode = "allow" | "boost" | "reduce" | "exclude" | "only";
+
+/** The glyph each rule draws in a matrix cell, a legend or a rules list. */
+export const MODE_GLYPH: Record<CellMode, string> = {
+  only: "✓",
+  boost: "↑",
+  reduce: "↓",
+  exclude: "×",
+  allow: "·",
+};
+
+/** The word for each rule. */
+export const MODE_LABEL: Record<CellMode, string> = {
+  boost: "Boost",
+  reduce: "Reduce",
+  exclude: "Exclude",
+  allow: "Neutral",
+  only: "Only",
+};
+
+/** A published mode string as a rule: anything unknown reads as neutral. */
+export function normalizeMode(raw: string | null | undefined): CellMode {
+  return raw === "exclude" || raw === "boost" || raw === "reduce" || raw === "only" ? raw : "allow";
+}

package/src/pi-icons.ts

@@ -0,0 +1,51 @@
+/**
+ * Every PrimeIcons glyph in the installed `primeicons.css`, minus the `pi-`
+ * prefix: what IconPicker `all` offers (searchable), and what an app can
+ * check a typed `:pi-name:` against. IconPicker without `all` offers the
+ * curated groups in `icon-catalog.ts`. `pi-icons.test.ts` keeps this list
+ * equal to the stylesheet.
+ */
+export const PI_ICONS: readonly string[] = [
+  "address-book", "align-center", "align-justify", "align-left", "align-right", "amazon", "android", "angle-double-down",
+  "angle-double-left", "angle-double-right", "angle-double-up", "angle-down", "angle-left", "angle-right", "angle-up", "apple",
+  "arrow-circle-down", "arrow-circle-left", "arrow-circle-right", "arrow-circle-up", "arrow-down", "arrow-down-left", "arrow-down-left-and-arrow-up-right-to-center", "arrow-down-right",
+  "arrow-left", "arrow-right", "arrow-right-arrow-left", "arrow-up", "arrow-up-left", "arrow-up-right", "arrow-up-right-and-arrow-down-left-from-center", "arrows-alt",
+  "arrows-h", "arrows-v", "asterisk", "at", "backward", "ban", "barcode", "bars",
+  "bell", "bell-slash", "bitcoin", "bolt", "book", "bookmark", "bookmark-fill", "box",
+  "briefcase", "building", "building-columns", "bullseye", "calculator", "calendar", "calendar-clock", "calendar-minus",
+  "calendar-plus", "calendar-times", "camera", "car", "caret-down", "caret-left", "caret-right", "caret-up",
+  "cart-arrow-down", "cart-minus", "cart-plus", "chart-bar", "chart-line", "chart-pie", "chart-scatter", "check",
+  "check-circle", "check-square", "chevron-circle-down", "chevron-circle-left", "chevron-circle-right", "chevron-circle-up", "chevron-down", "chevron-left",
+  "chevron-right", "chevron-up", "circle", "circle-fill", "circle-off", "circle-on", "clipboard", "clock",
+  "clone", "cloud", "cloud-download", "cloud-upload", "code", "cog", "comment", "comments",
+  "compass", "copy", "credit-card", "crown", "database", "delete-left", "desktop", "directions",
+  "directions-alt", "discord", "dollar", "download", "eject", "ellipsis-h", "ellipsis-v", "envelope",
+  "equals", "eraser", "ethereum", "euro", "exclamation-circle", "exclamation-triangle", "expand", "external-link",
+  "eye", "eye-slash", "face-smile", "facebook", "fast-backward", "fast-forward", "file", "file-arrow-up",
+  "file-check", "file-edit", "file-excel", "file-export", "file-import", "file-o", "file-pdf", "file-plus",
+  "file-word", "filter", "filter-fill", "filter-slash", "flag", "flag-fill", "folder", "folder-open",
+  "folder-plus", "forward", "gauge", "gift", "github", "globe", "google", "graduation-cap",
+  "hammer", "hashtag", "headphones", "heart", "heart-fill", "history", "home", "hourglass",
+  "id-card", "image", "images", "inbox", "indian-rupee", "info", "info-circle", "instagram",
+  "key", "language", "lightbulb", "link", "linkedin", "list", "list-check", "lock",
+  "lock-open", "map", "map-marker", "mars", "megaphone", "microchip", "microchip-ai", "microphone",
+  "microsoft", "minus", "minus-circle", "mobile", "money-bill", "moon", "objects-column", "palette",
+  "paperclip", "pause", "pause-circle", "paypal", "pen-to-square", "pencil", "percentage", "phone",
+  "pinterest", "play", "play-circle", "plus", "plus-circle", "pound", "power-off", "prime",
+  "print", "qrcode", "question", "question-circle", "receipt", "reddit", "refresh", "replay",
+  "reply", "save", "search", "search-minus", "search-plus", "send", "server", "share-alt",
+  "shield", "shop", "shopping-bag", "shopping-cart", "sign-in", "sign-out", "sitemap", "slack",
+  "sliders-h", "sliders-v", "sort", "sort-alpha-down", "sort-alpha-down-alt", "sort-alpha-up", "sort-alpha-up-alt", "sort-alt",
+  "sort-alt-slash", "sort-amount-down", "sort-amount-down-alt", "sort-amount-up", "sort-amount-up-alt", "sort-down", "sort-down-fill", "sort-numeric-down",
+  "sort-numeric-down-alt", "sort-numeric-up", "sort-numeric-up-alt", "sort-up", "sort-up-fill", "sparkles", "spinner", "spinner-dotted",
+  "star", "star-fill", "star-half", "star-half-fill", "step-backward", "step-backward-alt", "step-forward", "step-forward-alt",
+  "stop", "stop-circle", "stopwatch", "sun", "sync", "table", "tablet", "tag",
+  "tags", "telegram", "th-large", "thumbs-down", "thumbs-down-fill", "thumbs-up", "thumbs-up-fill", "thumbtack",
+  "ticket", "tiktok", "times", "times-circle", "trash", "trophy", "truck", "turkish-lira",
+  "twitch", "twitter", "undo", "unlock", "upload", "user", "user-edit", "user-minus",
+  "user-plus", "users", "venus", "verified", "video", "vimeo", "volume-down", "volume-off",
+  "volume-up", "wallet", "warehouse", "wave-pulse", "whatsapp", "wifi", "window-maximize", "window-minimize",
+  "wrench", "youtube",
+];
+
+export const PI_ICON_SET: ReadonlySet<string> = new Set(PI_ICONS);