@dumiflex/wp-kit 0.3.0 → 0.5.0

package/src/LoadingMark.vue

@@ -1,161 +1,217 @@
-<script lang="ts">
-/** Gradient ids must be unique on the page. `useId` restarts per Vue app and
- *  the extension mounts many small apps, so count across all of them. */
-let nextId = 0;
-</script>
-
-<script setup lang="ts">
-/**
- * The loading mark. Two drawings, one per kind of place:
- *
- * - `logo` (pages and panels): the full logo. Its two rings slide apart and
- *   back while the big star dips and turns and the small stars twinkle. A
- *   `block` mark, or one 24 px or bigger, gets it by default.
- * - `sparkle` (tight inline spots: a text row, a button, a list item): the
- *   logo's three stars without the rings, the big one dipping while the small
- *   ones swap places, like the AI working line. Small marks get it by
- *   default, so an inline "Loading bundle…" is not a big colourful logo.
- *
- * Alone it is an icon (`size`, 14 inline and 40 as a block). With slot text it
- * becomes a row ("[mark] Loading bundle…"); with `block` it is centred in its
- * box, for a panel or page that is loading. `mono` draws it in the text
- * colour, for a host with its own colours (a busy button).
- */
-import { computed, useSlots } from "vue";
-import { BRAND_COLOURS, RING_A, RING_B, STAR_A, STAR_B, STAR_BIG, type LogoBrand } from "./logo-paths";
-
-const props = withDefaults(defineProps<{
-  /** Width and height in px. Default 14, or 40 with `block`. */
-  size?: number | undefined;
-  /** Accessible name when there is no slot text. */
-  label?: string | undefined;
-  /** Centre it (and its text, below) in the space it is given. */
-  block?: boolean | undefined;
-  /** Which drawing; default `logo` for a block or a 24 px+ mark, else `sparkle`. */
-  variant?: "logo" | "sparkle" | undefined;
-  /** Draw in the current text colour instead of the logo colours. */
-  mono?: boolean | undefined;
-  /** Hidden from screen readers, for a host that says it is busy itself
-   *  (a button with `aria-busy`). */
-  decorative?: boolean | undefined;
-  /** Whose colours: the extension's (default) or the community site's. */
-  brand?: LogoBrand | undefined;
-}>(), { size: undefined, label: "Loading", block: false, variant: undefined, mono: false, decorative: false, brand: "extension" });
-
-const slots = useSlots();
-const id = `wp-lm-${nextId++}`;
-const px = computed(() => props.size ?? (props.block ? 40 : 14));
-const drawing = computed(() => props.variant ?? (props.block || px.value >= 24 ? "logo" : "sparkle"));
-/** The logo's own colours (brand, not theme tokens: the mark looks the same
- *  in light and dark). */
-const VIOLET = computed(() => BRAND_COLOURS[props.brand][0]);
-const INDIGO = computed(() => BRAND_COLOURS[props.brand][1]);
-const TEAL = computed(() => BRAND_COLOURS[props.brand][2]);
-const fill = (colour: string): string => (props.mono ? "currentColor" : colour);
-</script>
-
-<template>
-  <span
-    class="wp-lm"
-    :class="{ 'wp-lm--block': block }"
-    :role="decorative ? undefined : 'status'"
-    :aria-label="decorative || slots.default ? undefined : label"
-    :aria-hidden="decorative || undefined"
-    data-test="loading-mark"
-  >
-    <svg
-      class="wp-lm__svg"
-      :data-variant="drawing"
-      viewBox="0 0 1024 1024"
-      :width="px"
-      :height="px"
-      aria-hidden="true"
-    >
-      <template v-if="drawing === 'logo'">
-        <defs v-if="!mono">
-          <linearGradient :id="`${id}a`" x1="312.56" y1="897.19" x2="312.56" y2="2" gradientUnits="userSpaceOnUse">
-            <stop offset="0" :stop-color="VIOLET" />
-            <stop offset="1" :stop-color="INDIGO" />
-          </linearGradient>
-          <linearGradient :id="`${id}b`" x1="711.44" y1="126.81" x2="711.44" y2="1022" gradientUnits="userSpaceOnUse">
-            <stop offset="0" :stop-color="INDIGO" />
-            <stop offset="1" :stop-color="TEAL" />
-          </linearGradient>
-        </defs>
-        <path class="wp-lm__ring wp-lm__ring--a" :fill="fill(`url(#${id}a)`)" :d="RING_A" />
-        <path class="wp-lm__ring wp-lm__ring--b" :fill="fill(`url(#${id}b)`)" :d="RING_B" />
-        <path class="wp-lm__star wp-lm__star--big" :fill="fill(VIOLET)" :d="STAR_BIG" />
-        <path class="wp-lm__star wp-lm__star--tw" :fill="fill(INDIGO)" :d="STAR_A" />
-        <path class="wp-lm__star wp-lm__star--tw" :fill="fill(TEAL)" :d="STAR_B" />
-      </template>
-      <g v-else transform="translate(512 512) scale(1.45) translate(-512 -512)">
-        <path class="wp-lm__star wp-lm__star--big" :fill="fill(VIOLET)" :d="STAR_BIG" />
-        <g class="wp-lm__swap">
-          <path class="wp-lm__star" :fill="fill(INDIGO)" :d="STAR_A" />
-          <path class="wp-lm__star" :fill="fill(TEAL)" :d="STAR_B" />
-        </g>
-      </g>
-    </svg>
-    <span v-if="slots.default" class="wp-lm__text"><slot /></span>
-  </span>
-</template>
-
-<style scoped>
-.wp-lm {
-  --wp-lm-t: 2.4s;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  vertical-align: middle;
-}
-.wp-lm--block {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 12px;
-  width: 100%;
-  padding: 48px 16px;
-  color: var(--wp-text-muted);
-  text-align: center;
-}
-.wp-lm__svg { flex-shrink: 0; overflow: visible; }
-.wp-lm__ring { transform-box: view-box; transform-origin: 512px 512px; }
-.wp-lm__star { transform-box: fill-box; transform-origin: center; }
-.wp-lm__ring--a { animation: wp-lm-split-a var(--wp-lm-t) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
-.wp-lm__ring--b { animation: wp-lm-split-b var(--wp-lm-t) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
-.wp-lm__star--big { animation: wp-lm-dip var(--wp-lm-t) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
-.wp-lm__star--tw { animation: wp-lm-twinkle var(--wp-lm-t) ease-in-out infinite; }
-.wp-lm__swap {
-  transform-box: view-box; transform-origin: 512px 512px;
-  animation: wp-lm-swap calc(var(--wp-lm-t) * 2) cubic-bezier(0.65, 0, 0.35, 1) infinite;
-}
-
-@keyframes wp-lm-split-a {
-  0%, 15%, 85%, 100% { transform: translate(0, 0); }
-  40%, 60% { transform: translate(-70px, -70px); }
-}
-@keyframes wp-lm-split-b {
-  0%, 15%, 85%, 100% { transform: translate(0, 0); }
-  40%, 60% { transform: translate(70px, 70px); }
-}
-@keyframes wp-lm-dip {
-  0%, 15% { transform: scale(1) rotate(0deg); }
-  32% { transform: scale(0.7) rotate(45deg); }
-  50%, 100% { transform: scale(1) rotate(90deg); }
-}
-@keyframes wp-lm-swap {
-  0%, 15% { transform: rotate(0deg); }
-  50%, 65% { transform: rotate(180deg); }
-  100% { transform: rotate(360deg); }
-}
-@keyframes wp-lm-twinkle {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.35; transform: scale(0.6); }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .wp-lm__svg * { animation: none !important; }
-  .wp-lm__svg { animation: wp-lm-fade 2.4s ease-in-out infinite; }
-  @keyframes wp-lm-fade { 50% { opacity: 0.55; } }
-}
-</style>
+<script lang="ts">
+/** Gradient ids must be unique on the page. `useId` restarts per Vue app and
+ *  the extension mounts many small apps, so count across all of them. */
+let nextId = 0;
+</script>
+
+<script setup lang="ts">
+/**
+ * The loading mark. Two drawings, one per kind of place:
+ *
+ * - `logo` (pages and panels): the full logo. Its two rings slide apart and
+ *   back while the big star dips and turns and the small stars twinkle. A
+ *   `block` mark, or one 24 px or bigger, gets it by default.
+ * - `sparkle` (tight inline spots: a text row, a button, a list item): the
+ *   logo's three stars without the rings, the big one dipping while the small
+ *   ones swap places, like the AI working line. Small marks get it by
+ *   default, so an inline "Loading bundle…" is not a big colourful logo.
+ *
+ * Alone it is an icon (`size`, 14 inline and 40 as a block). With slot text it
+ * becomes a row ("[mark] Loading bundle…"); with `block` it is centred in its
+ * box, for a panel or page that is loading. `mono` draws it in the text
+ * colour, for a host with its own colours (a busy button).
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useSlots } from "vue";
+import { BRAND_COLOURS, RING_A, RING_B, STAR_A, STAR_B, STAR_BIG, type LogoBrand } from "./logo-paths";
+import { BOX, PAD, animate, drawNow, type Animated, type Look } from "./loading-mark-motion";
+
+const props = withDefaults(defineProps<{
+  /** Width and height in px. Default 14, or 40 with `block`. */
+  size?: number | undefined;
+  /** Accessible name when there is no slot text. */
+  label?: string | undefined;
+  /** Centre it (and its text, below) in the space it is given. */
+  block?: boolean | undefined;
+  /** Which drawing; default `logo` for a block or a 24 px+ mark, else `sparkle`. */
+  variant?: "logo" | "sparkle" | undefined;
+  /** Draw in the current text colour instead of the logo colours. */
+  mono?: boolean | undefined;
+  /** Hidden from screen readers, for a host that says it is busy itself
+   *  (a button with `aria-busy`). */
+  decorative?: boolean | undefined;
+  /** Whose colours: the extension's (default) or the community site's. */
+  brand?: LogoBrand | undefined;
+}>(), { size: undefined, label: "Loading", block: false, variant: undefined, mono: false, decorative: false, brand: "extension" });
+
+const slots = useSlots();
+const id = `wp-lm-${nextId++}`;
+const px = computed(() => props.size ?? (props.block ? 40 : 14));
+const drawing = computed(() => props.variant ?? (props.block || px.value >= 24 ? "logo" : "sparkle"));
+/** The logo's own colours (brand, not theme tokens: the mark looks the same
+ *  in light and dark). */
+const VIOLET = computed(() => BRAND_COLOURS[props.brand][0]);
+const INDIGO = computed(() => BRAND_COLOURS[props.brand][1]);
+const TEAL = computed(() => BRAND_COLOURS[props.brand][2]);
+const fill = (colour: string): string => (props.mono ? "currentColor" : colour);
+
+/* The SVG is the still mark (first paint, reduced motion, a page with no
+ * canvas). Once mounted, a canvas over it draws the motion: see
+ * `loading-mark-motion.ts` for why it is not CSS. */
+const root = ref<HTMLElement | null>(null);
+const canvas = ref<HTMLCanvasElement | null>(null);
+const live = ref(false);
+const drawn = ref(false);
+const canvasStyle = computed(() => {
+  const side = (px.value * BOX) / 1024;
+  const off = (px.value * PAD) / 1024;
+  return { width: `${side}px`, height: `${side}px`, top: `${-off}px`, left: `${-off}px` };
+});
+
+let textColour = "";
+let textColourAt = -Infinity;
+function look(): Look {
+  if (props.mono) {
+    const now = performance.now();
+    if (now - textColourAt > 500 && root.value) {
+      textColour = getComputedStyle(root.value).color || "currentColor";
+      textColourAt = now;
+    }
+    return { variant: drawing.value, colours: [textColour, textColour, textColour], flat: true };
+  }
+  return { variant: drawing.value, colours: [VIOLET.value, INDIGO.value, TEAL.value], flat: false };
+}
+
+let stop: (() => void) | null = null;
+let observer: IntersectionObserver | null = null;
+let motion: MediaQueryList | null = null;
+
+async function start(): Promise<void> {
+  if (stop) return;
+  live.value = true;
+  await nextTick();
+  const el = canvas.value;
+  if (!el || !live.value) return;
+  const mark: Animated = { canvas: el, look, clock: 0, visible: true };
+  if (!drawNow(mark)) {
+    live.value = false;
+    return;
+  }
+  drawn.value = true;
+  stop = animate(mark);
+  if (typeof IntersectionObserver === "function") {
+    observer = new IntersectionObserver((entries) => {
+      for (const e of entries) mark.visible = e.isIntersecting;
+    });
+    observer.observe(el);
+  }
+}
+function halt(): void {
+  stop?.();
+  stop = null;
+  observer?.disconnect();
+  observer = null;
+  live.value = false;
+  drawn.value = false;
+}
+function onMotionChange(): void {
+  if (motion?.matches) halt();
+  else void start();
+}
+
+onMounted(() => {
+  // No matchMedia means no way to honour reduced motion, and a test DOM
+  // (jsdom) has no canvas and logs an error for every attempt: keep the
+  // still SVG in both.
+  if (typeof window.matchMedia !== "function" || typeof requestAnimationFrame !== "function") return;
+  if (navigator.userAgent.includes("jsdom")) return;
+  motion = window.matchMedia("(prefers-reduced-motion: reduce)");
+  motion.addEventListener?.("change", onMotionChange);
+  if (!motion.matches) void start();
+});
+onBeforeUnmount(() => {
+  motion?.removeEventListener?.("change", onMotionChange);
+  halt();
+});
+</script>
+
+<template>
+  <span
+    ref="root"
+    class="wp-lm"
+    :class="{ 'wp-lm--block': block, 'wp-lm--drawn': drawn }"
+    :role="decorative ? undefined : 'status'"
+    :aria-label="decorative || slots.default ? undefined : label"
+    :aria-hidden="decorative || undefined"
+    data-test="loading-mark"
+  >
+    <span class="wp-lm__art" :style="{ width: `${px}px`, height: `${px}px` }">
+    <svg
+      class="wp-lm__svg"
+      :data-variant="drawing"
+      viewBox="0 0 1024 1024"
+      :width="px"
+      :height="px"
+      aria-hidden="true"
+    >
+      <template v-if="drawing === 'logo'">
+        <defs v-if="!mono">
+          <linearGradient :id="`${id}a`" x1="312.56" y1="897.19" x2="312.56" y2="2" gradientUnits="userSpaceOnUse">
+            <stop offset="0" :stop-color="VIOLET" />
+            <stop offset="1" :stop-color="INDIGO" />
+          </linearGradient>
+          <linearGradient :id="`${id}b`" x1="711.44" y1="126.81" x2="711.44" y2="1022" gradientUnits="userSpaceOnUse">
+            <stop offset="0" :stop-color="INDIGO" />
+            <stop offset="1" :stop-color="TEAL" />
+          </linearGradient>
+        </defs>
+        <path class="wp-lm__ring wp-lm__ring--a" :fill="fill(`url(#${id}a)`)" :d="RING_A" />
+        <path class="wp-lm__ring wp-lm__ring--b" :fill="fill(`url(#${id}b)`)" :d="RING_B" />
+        <path class="wp-lm__star wp-lm__star--big" :fill="fill(VIOLET)" :d="STAR_BIG" />
+        <path class="wp-lm__star wp-lm__star--tw" :fill="fill(INDIGO)" :d="STAR_A" />
+        <path class="wp-lm__star wp-lm__star--tw" :fill="fill(TEAL)" :d="STAR_B" />
+      </template>
+      <g v-else transform="translate(512 512) scale(1.45) translate(-512 -512)">
+        <path class="wp-lm__star wp-lm__star--big" :fill="fill(VIOLET)" :d="STAR_BIG" />
+        <g class="wp-lm__swap">
+          <path class="wp-lm__star" :fill="fill(INDIGO)" :d="STAR_A" />
+          <path class="wp-lm__star" :fill="fill(TEAL)" :d="STAR_B" />
+        </g>
+      </g>
+    </svg>
+    <canvas v-if="live" ref="canvas" class="wp-lm__canvas" :style="canvasStyle" aria-hidden="true" />
+    </span>
+    <span v-if="slots.default" class="wp-lm__text"><slot /></span>
+  </span>
+</template>
+
+<style scoped>
+.wp-lm {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  vertical-align: middle;
+}
+.wp-lm--block {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 12px;
+  width: 100%;
+  padding: 48px 16px;
+  color: var(--wp-text-muted);
+  text-align: center;
+}
+.wp-lm__art { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; }
+.wp-lm__svg { display: block; overflow: visible; }
+.wp-lm__canvas { position: absolute; pointer-events: none; }
+.wp-lm--drawn .wp-lm__svg { visibility: hidden; }
+
+/* Reduced motion: no canvas, the still mark breathes. A registered custom
+ * property, not `opacity` itself, so the fade stays off the compositor (a
+ * composited fade turns the mark soft). */
+@property --wp-lm-o { syntax: "<number>"; inherits: false; initial-value: 1; }
+@media (prefers-reduced-motion: reduce) {
+  .wp-lm__svg { opacity: var(--wp-lm-o); animation: wp-lm-fade 2.4s ease-in-out infinite; }
+  @keyframes wp-lm-fade { 0%, 100% { --wp-lm-o: 1; } 50% { --wp-lm-o: 0.55; } }
+}
+</style>

package/src/Logo.vue

@@ -1,60 +1,60 @@
-<script lang="ts">
-/** Gradient ids must be unique on the page, and two logos may wear different
- *  brands, so count across every app on it. */
-let nextId = 0;
-</script>
-
-<script setup lang="ts">
-/**
- * The Wildcard Pipeline logo, drawn inline so it needs no file. It names
- * itself to screen readers; `decorative` hides it when the name is written
- * beside it (the top bar's brand). `brand="community"` draws it in the
- * community site's colours.
- *
- *   <Logo :size="22" decorative />
- */
-import { computed } from "vue";
-import { BRAND_COLOURS, type LogoBrand } from "./logo-paths";
-
-const props = withDefaults(defineProps<{
-  size?: number | undefined;
-  decorative?: boolean | undefined;
-  brand?: LogoBrand | undefined;
-}>(), { size: 28, brand: "extension" });
-
-const id = `wp-logo-${nextId++}`;
-const c = computed(() => BRAND_COLOURS[props.brand]);
-</script>
-
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 1024 1024"
-    :width="size"
-    :height="size"
-    :role="decorative ? undefined : 'img'"
-    :aria-label="decorative ? undefined : 'Wildcard Pipeline'"
-    :aria-hidden="decorative || undefined"
-    class="wp-logo"
-  >
-    <defs>
-      <linearGradient :id="`${id}a`" x1="312.56" y1="897.19" x2="312.56" y2="2" gradientUnits="userSpaceOnUse">
-        <stop offset="0" :stop-color="c[0]" />
-        <stop offset="1" :stop-color="c[1]" />
-      </linearGradient>
-      <linearGradient :id="`${id}b`" x1="711.44" y1="126.81" x2="711.44" y2="1022" gradientUnits="userSpaceOnUse">
-        <stop offset="0" :stop-color="c[1]" />
-        <stop offset="1" :stop-color="c[2]" />
-      </linearGradient>
-    </defs>
-    <path :fill="`url(#${id}a)`" d="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" />
-    <path :fill="`url(#${id}b)`" d="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" />
-    <path :fill="c[0]" d="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" />
-    <path :fill="c[1]" d="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" />
-    <path :fill="c[2]" d="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" />
-  </svg>
-</template>
-
-<style scoped>
-.wp-logo { display: block; flex-shrink: 0; }
-</style>
+<script lang="ts">
+/** Gradient ids must be unique on the page, and two logos may wear different
+ *  brands, so count across every app on it. */
+let nextId = 0;
+</script>
+
+<script setup lang="ts">
+/**
+ * The Wildcard Pipeline logo, drawn inline so it needs no file. It names
+ * itself to screen readers; `decorative` hides it when the name is written
+ * beside it (the top bar's brand). `brand="community"` draws it in the
+ * community site's colours.
+ *
+ *   <Logo :size="22" decorative />
+ */
+import { computed } from "vue";
+import { BRAND_COLOURS, type LogoBrand } from "./logo-paths";
+
+const props = withDefaults(defineProps<{
+  size?: number | undefined;
+  decorative?: boolean | undefined;
+  brand?: LogoBrand | undefined;
+}>(), { size: 28, brand: "extension" });
+
+const id = `wp-logo-${nextId++}`;
+const c = computed(() => BRAND_COLOURS[props.brand]);
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    :width="size"
+    :height="size"
+    :role="decorative ? undefined : 'img'"
+    :aria-label="decorative ? undefined : 'Wildcard Pipeline'"
+    :aria-hidden="decorative || undefined"
+    class="wp-logo"
+  >
+    <defs>
+      <linearGradient :id="`${id}a`" x1="312.56" y1="897.19" x2="312.56" y2="2" gradientUnits="userSpaceOnUse">
+        <stop offset="0" :stop-color="c[0]" />
+        <stop offset="1" :stop-color="c[1]" />
+      </linearGradient>
+      <linearGradient :id="`${id}b`" x1="711.44" y1="126.81" x2="711.44" y2="1022" gradientUnits="userSpaceOnUse">
+        <stop offset="0" :stop-color="c[1]" />
+        <stop offset="1" :stop-color="c[2]" />
+      </linearGradient>
+    </defs>
+    <path :fill="`url(#${id}a)`" d="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" />
+    <path :fill="`url(#${id}b)`" d="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" />
+    <path :fill="c[0]" d="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" />
+    <path :fill="c[1]" d="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" />
+    <path :fill="c[2]" d="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" />
+  </svg>
+</template>
+
+<style scoped>
+.wp-logo { display: block; flex-shrink: 0; }
+</style>