@dumiflex/wp-kit 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.5.0](https://github.com/DumiFlex/wp-kit/compare/v0.4.0...v0.5.0) (2026-11-02)
+
+
+### Features
+
+* **site:** add an Animations section with speed and pause controls ([#46](https://github.com/DumiFlex/wp-kit/issues/46)) ([c1043ec](https://github.com/DumiFlex/wp-kit/commit/c1043ecd3562fba74c29e4033e9e9c3fd0f058fa))
+* Skeleton chip shape and square row icons; DataTable loads with Skeleton ([#47](https://github.com/DumiFlex/wp-kit/issues/47)) ([b38ec64](https://github.com/DumiFlex/wp-kit/commit/b38ec64a182e25073b59b6c22ef1a7e0246fee52))
+* syntax colours in CodeBlock ([#44](https://github.com/DumiFlex/wp-kit/issues/44)) ([758fecc](https://github.com/DumiFlex/wp-kit/commit/758fecc8f86264290916b6c1b15a0233939ce790))
+
+
+### Bug Fixes
+
+* a tile still loading can't open an empty Lightbox ([#45](https://github.com/DumiFlex/wp-kit/issues/45)) ([7063e64](https://github.com/DumiFlex/wp-kit/commit/7063e64a89ed8ce006602dd84804af7ff5f216c2))
+* draw LoadingMark's motion on a canvas so it glides in Firefox ([#48](https://github.com/DumiFlex/wp-kit/issues/48)) ([85fc9a0](https://github.com/DumiFlex/wp-kit/commit/85fc9a027214ced5de582bc44d5e50472ee7560b))
+
 ## [0.4.0](https://github.com/DumiFlex/wp-kit/compare/v0.3.0...v0.4.0) (2026-11-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dumiflex/wp-kit",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Vue 3 component kit shared by the Wildcard Pipeline manager, canvas and community site.",
   "keywords": [
     "vue",

package/src/CodeBlock.vue

@@ -8,17 +8,27 @@
  *   <CodeBlock :code="json" language="JSON" max-height="240px" />
  *   <CodeBlock :code="log" title="Request" line-numbers v-model:wrap="wrap" />
  *
- * No syntax colours (they cost bundle for little gain here). A block that
+ * Syntax colours come from `language` (JSON, TS, Vue/HTML, CSS, shell, the
+ * prompt template grammar; see highlight.ts), or from `syntax` when the head
+ * shows a title instead of a language tag:
+ *
+ *   <CodeBlock :code="template" title="Template" syntax="prompt" />
+ *
+ * Unknown languages stay plain. The colours are shared tokens, so a block
+ * reads right on the canvas, in the manager and in light mode. A block that
  * scrolls can be focused, so the keyboard can scroll it too.
  */
 import { computed, ref, watch } from "vue";
 import CopyButton from "./CopyButton.vue";
 import { vTooltip } from "./tooltip";
+import { highlight, highlightLanguage, highlightLines } from "./highlight";
 
 const props = withDefaults(defineProps<{
   code: string;
-  /** A small tag in the head, e.g. "JSON". */
+  /** A small tag in the head, e.g. "JSON". Also picks the syntax colours. */
   language?: string | undefined;
+  /** Syntax colours without a tag in the head ("prompt", "json", "ts" …). */
+  syntax?: string | undefined;
   /** A name in the head, e.g. "Prompt as sent". */
   title?: string | undefined;
   /** Wrap long lines. Bind with v-model:wrap, or leave it to the button. */
@@ -31,7 +41,7 @@ const props = withDefaults(defineProps<{
   /** Leave out the head (copy and wrap). */
   bare?: boolean | undefined;
   size?: "sm" | "md" | undefined;
-}>(), { language: undefined, title: undefined, wrap: undefined, maxHeight: undefined, size: "md" });
+}>(), { language: undefined, syntax: undefined, title: undefined, wrap: undefined, maxHeight: undefined, size: "md" });
 
 const emit = defineEmits<{ (e: "update:wrap", v: boolean): void }>();
 
@@ -43,7 +53,8 @@ function toggleWrap(): void {
   emit("update:wrap", own.value);
 }
 
-const lines = computed(() => props.code.replace(/\n$/, "").split("\n"));
+const tokens = computed(() => highlight(props.code, highlightLanguage(props.syntax ?? props.language)));
+const lines = computed(() => highlightLines(highlight(props.code.replace(/\n$/, ""), highlightLanguage(props.syntax ?? props.language))));
 const name = computed(() => props.title ?? props.language ?? "Code");
 </script>
 
@@ -69,7 +80,7 @@ const name = computed(() => props.title ?? props.language ?? "Code");
       tabindex="0"
       :aria-label="name"
       :style="{ maxHeight }"
-    ><code v-if="!lineNumbers" class="wp-code__code">{{ code }}</code><code v-else class="wp-code__code wp-code__code--numbered"><span v-for="(l, i) in lines" :key="i" class="wp-code__line"><span class="wp-code__num" aria-hidden="true">{{ i + 1 }}</span><span class="wp-code__text">{{ l || "\u00a0" }}</span></span></code></pre>
+    ><code v-if="!lineNumbers" class="wp-code__code"><template v-for="(t, i) in tokens" :key="i"><span v-if="t.kind !== 'plain'" :class="`wp-code__t--${t.kind}`">{{ t.text }}</span><template v-else>{{ t.text }}</template></template></code><code v-else class="wp-code__code wp-code__code--numbered"><span v-for="(l, i) in lines" :key="i" class="wp-code__line"><span class="wp-code__num" aria-hidden="true">{{ i + 1 }}</span><span class="wp-code__text"><template v-for="(t, j) in l" :key="j"><span v-if="t.kind !== 'plain'" :class="`wp-code__t--${t.kind}`">{{ t.text }}</span><template v-else>{{ t.text }}</template></template><template v-if="!l.length">{{ "\u00a0" }}</template></span></span></code></pre>
   </figure>
 </template>
 
@@ -104,6 +115,8 @@ const name = computed(() => props.title ?? props.language ?? "Code");
   margin: 0; padding: var(--wp-space-4); overflow: auto;
   color: var(--wp-text); font: 400 var(--wp-text-sm)/1.55 var(--wp-font-mono);
   white-space: pre; tab-size: 2;
+  /* Code shows as written: no `===` or `<!--` ligatures. */
+  font-variant-ligatures: none;
 }
 .wp-code[data-size="sm"] .wp-code__pre { padding: var(--wp-space-3); font-size: var(--wp-text-xs); }
 .wp-code[data-wrap] .wp-code__pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@@ -116,4 +129,18 @@ const name = computed(() => props.title ?? props.language ?? "Code");
   color: var(--wp-text-dim); user-select: none; font-variant-numeric: tabular-nums;
 }
 .wp-code__text { display: table-cell; }
+
+/* Syntax colours: shared tokens only, so they hold on the canvas and in light mode. */
+.wp-code__t--keyword { color: var(--wp-violet); }
+.wp-code__t--string { color: var(--wp-green); }
+.wp-code__t--number { color: var(--wp-amber); }
+.wp-code__t--comment { color: var(--wp-text-dim); font-style: italic; }
+.wp-code__t--punct { color: var(--wp-text-muted); }
+.wp-code__t--key, .wp-code__t--attr { color: var(--wp-teal); }
+.wp-code__t--tag { color: var(--wp-rose); }
+.wp-code__t--fn { color: var(--wp-info); }
+.wp-code__t--var { color: var(--wp-accent-text); }
+.wp-code__t--ref { color: var(--wp-teal); }
+.wp-code__t--brace { color: var(--wp-amber); }
+.wp-code__t--escape { color: var(--wp-text-dim); }
 </style>

package/src/DataTable.vue

@@ -24,6 +24,7 @@
  */
 import { computed } from "vue";
 import Checkbox from "./Checkbox.vue";
+import Skeleton from "./Skeleton.vue";
 
 export interface DataColumn<R> {
   key: string;
@@ -202,8 +203,8 @@ const span = computed(() => props.columns.length + (props.selectable ? 1 : 0));
       </thead>
       <tbody>
         <template v-if="loading && rows.length === 0">
-          <tr v-for="n in loadingRows" :key="`skel-${n}`" class="wp-row-skel" aria-hidden="true">
-            <td v-for="i in span" :key="i"><span class="wp-skel-bar" :style="{ width: `${40 + ((n * 17 + i * 23) % 50)}%` }" /></td>
+          <tr v-for="n in loadingRows" :key="`skel-${n}`" class="wp-data-table__loading" aria-hidden="true">
+            <td v-for="i in span" :key="i"><Skeleton :width="`${40 + ((n * 17 + i * 23) % 50)}%`" /></td>
           </tr>
         </template>
         <tr v-else-if="shown.length === 0" class="wp-data-table__empty">

package/src/ImageGrid.vue

@@ -8,11 +8,13 @@
  *   <ImageGrid :images="outputs" />
  *   <ImageGrid v-model:selected="keep" :images="frames" selectable :min-size="96" />
  *
- * Tiles are buttons in reading order (one Tab stop each); a tile with no
- * `src` draws a Skeleton-like block while it loads.
+ * Tiles are buttons in reading order (one Tab stop each). A tile with no
+ * `src` yet (a frame still rendering) draws a Skeleton and can't be opened;
+ * the Lightbox steps only through the images that are there.
  */
 import { computed, ref } from "vue";
 import Lightbox from "./Lightbox.vue";
+import Skeleton from "./Skeleton.vue";
 import WpCheck from "./WpCheck.vue";
 
 export interface GridImage { id: string; src: string; alt: string; thumb?: string; caption?: string }
@@ -38,12 +40,15 @@ const emit = defineEmits<{
 
 const open = ref(false);
 const at = ref(0);
-const shots = computed(() => props.images.map((i) => ({ src: i.src, alt: i.alt, caption: i.caption })));
+/** Only the images that are there: a tile still loading has nothing to show. */
+const ready = computed(() => props.images.map((img, i) => ({ img, i })).filter(({ img }) => !!img.src));
+const shots = computed(() => ready.value.map(({ img }) => ({ src: img.src, alt: img.alt, caption: img.caption })));
 
 function show(i: number): void {
+  if (!props.images[i]?.src) return;
   emit("open", i);
   if (!props.lightbox) return;
-  at.value = i;
+  at.value = ready.value.findIndex((r) => r.i === i);
   open.value = true;
 }
 
@@ -69,11 +74,13 @@ function toggle(id: string, on: boolean): void {
       <button
         type="button"
         class="wp-image-grid__open"
-        :aria-label="selectable ? `Open ${img.alt}` : img.alt"
+        :aria-label="!img.src ? `${img.alt}, still loading` : selectable ? `Open ${img.alt}` : img.alt"
+        :aria-disabled="!img.src || undefined"
+        :data-loading="!img.src || undefined"
         @click="show(i)"
       >
         <img v-if="img.thumb || img.src" class="wp-image-grid__img" :src="img.thumb || img.src" alt="" loading="lazy">
-        <span v-else class="wp-image-grid__empty" aria-hidden="true" />
+        <Skeleton v-else class="wp-image-grid__empty" shape="block" width="100%" height="100%" />
       </button>
       <WpCheck
         v-if="selectable"
@@ -107,12 +114,8 @@ function toggle(id: string, on: boolean): void {
 .wp-image-grid__open:focus-visible { outline: none; border-color: var(--wp-border-focus); box-shadow: var(--wp-focus-ring); }
 .wp-image-grid__tile[data-selected] .wp-image-grid__open { border-color: var(--wp-accent); box-shadow: 0 0 0 2px var(--wp-accent-glow); }
 .wp-image-grid__img { display: block; width: 100%; height: 100%; object-fit: cover; }
-.wp-image-grid__empty {
-  display: block; width: 100%; height: 100%;
-  background: linear-gradient(90deg, var(--wp-bg-2) 0%, var(--wp-bg-3) 50%, var(--wp-bg-2) 100%);
-  background-size: 200% 100%; animation: wp-image-grid-shimmer var(--wp-motion-shimmer) infinite;
-}
-@keyframes wp-image-grid-shimmer { to { background-position: -200% 0; } }
+.wp-image-grid__open[data-loading] { cursor: progress; }
+.wp-image-grid__empty { width: 100%; height: 100%; }
 .wp-image-grid__check { position: absolute; top: 6px; left: 6px; }
 .wp-image-grid__caption {
   overflow: hidden; color: var(--wp-text-muted); font: 400 var(--wp-text-xs)/1.3 var(--wp-font-sans);
@@ -120,6 +123,5 @@ function toggle(id: string, on: boolean): void {
 }
 @media (prefers-reduced-motion: reduce) {
   .wp-image-grid__open { transition: none; }
-  .wp-image-grid__empty { animation: none; }
 }
 </style>

package/src/Lightbox.vue

@@ -17,6 +17,7 @@ import { computed, nextTick, ref, watch } from "vue";
 import ModalShell from "./ModalShell.vue";
 import WpImageZoom from "./WpImageZoom.vue";
 import CloseButton from "./CloseButton.vue";
+import Skeleton from "./Skeleton.vue";
 import { focusablesIn } from "./useDialogFocus";
 
 export interface LightboxImage { src: string; alt: string; caption?: string | undefined }
@@ -106,7 +107,9 @@ watch(() => props.open, async (v, was) => {
         <CloseButton class="wp-lightbox__close" kbd="Esc" @click="close" />
       </div>
       <figure v-if="image" class="wp-lightbox__figure" :data-zoom="zoom || undefined">
-        <WpImageZoom v-if="zoom" v-model:zoom="level" class="wp-lightbox__zoom" :src="image.src" :alt="image.alt" size="md" minimap />
+        <!-- An image with no src yet (still rendering): its shape, not an empty frame. -->
+        <Skeleton v-if="!image.src" class="wp-lightbox__loading" shape="block" width="min(70vw, 640px)" height="min(60vh, 480px)" label="Still loading" />
+        <WpImageZoom v-else-if="zoom" v-model:zoom="level" class="wp-lightbox__zoom" :src="image.src" :alt="image.alt" size="md" minimap />
         <img v-else class="wp-lightbox__img" :src="image.src" :alt="image.alt">
         <figcaption v-if="image.caption" class="wp-lightbox__caption">{{ image.caption }}</figcaption>
       </figure>

package/src/LoadingMark.vue

@@ -21,8 +21,9 @@ let nextId = 0;
  * 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 { 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`. */
@@ -52,17 +53,98 @@ 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 }"
+    :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"
@@ -96,13 +178,14 @@ const fill = (colour: string): string => (props.mono ? "currentColor" : colour);
         </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 {
-  --wp-lm-t: 2.4s;
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -118,57 +201,16 @@ const fill = (colour: string): string => (props.mono ? "currentColor" : colour);
   color: var(--wp-text-muted);
   text-align: center;
 }
-.wp-lm__svg { flex-shrink: 0; overflow: visible; }
-/* Every move animates a registered custom property, never `transform` or
- * `opacity` itself. A browser hands a `transform` / `opacity` animation to
- * the compositor, which lifts the path onto its own layer the moment the
- * animation starts: the layer is rasterised once, at a fixed scale, and
- * snapped to whole pixels, so the crisp mark turned soft and jumped by up to
- * half a pixel as it began to move. A custom property animates on the main
- * thread, so each frame repaints the vector paths in place, as sharp as the
- * mark at rest. The paths are tiny; the repaint costs nothing. */
-.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 { transform: translate(var(--wp-lm-x), var(--wp-lm-x)); animation: wp-lm-split-a var(--wp-lm-t) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
-.wp-lm__ring--b { transform: translate(var(--wp-lm-x), var(--wp-lm-x)); animation: wp-lm-split-b var(--wp-lm-t) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
-.wp-lm__star--big { transform: rotate(var(--wp-lm-r)) scale(var(--wp-lm-s)); animation: wp-lm-dip var(--wp-lm-t) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
-.wp-lm__star--tw { opacity: var(--wp-lm-o); transform: scale(var(--wp-lm-s)); animation: wp-lm-twinkle var(--wp-lm-t) ease-in-out infinite; }
-.wp-lm__swap {
-  transform-box: view-box; transform-origin: 512px 512px;
-  transform: rotate(var(--wp-lm-r));
-  animation: wp-lm-swap calc(var(--wp-lm-t) * 2) cubic-bezier(0.65, 0, 0.35, 1) infinite;
-}
+.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; }
 
-@property --wp-lm-x { syntax: "<length>"; inherits: false; initial-value: 0px; }
-@property --wp-lm-r { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
-@property --wp-lm-s { syntax: "<number>"; inherits: false; initial-value: 1; }
+/* 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; }
-
-@keyframes wp-lm-split-a {
-  0%, 15%, 85%, 100% { --wp-lm-x: 0px; }
-  40%, 60% { --wp-lm-x: -70px; }
-}
-@keyframes wp-lm-split-b {
-  0%, 15%, 85%, 100% { --wp-lm-x: 0px; }
-  40%, 60% { --wp-lm-x: 70px; }
-}
-@keyframes wp-lm-dip {
-  0%, 15% { --wp-lm-s: 1; --wp-lm-r: 0deg; }
-  32% { --wp-lm-s: 0.7; --wp-lm-r: 45deg; }
-  50%, 100% { --wp-lm-s: 1; --wp-lm-r: 90deg; }
-}
-@keyframes wp-lm-swap {
-  0%, 15% { --wp-lm-r: 0deg; }
-  50%, 65% { --wp-lm-r: 180deg; }
-  100% { --wp-lm-r: 360deg; }
-}
-@keyframes wp-lm-twinkle {
-  0%, 100% { --wp-lm-o: 1; --wp-lm-s: 1; }
-  50% { --wp-lm-o: 0.35; --wp-lm-s: 0.6; }
-}
-
 @media (prefers-reduced-motion: reduce) {
-  .wp-lm__svg * { animation: none !important; }
   .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; } }
 }

package/src/Skeleton.vue

@@ -15,8 +15,10 @@
 import { computed } from "vue";
 
 const props = withDefaults(defineProps<{
-  /** line: text lines (the last one shorter). block: a box. circle: an avatar or icon. row: an icon, a title and a hint line, like a list row. */
-  shape?: "line" | "block" | "circle" | "row" | undefined;
+  /** line: text lines (the last one shorter). block: a box. circle: an avatar or icon. row: an icon, a title and a hint line, like a list row. chip: a run of pills, like a tag or filter row. */
+  shape?: "line" | "block" | "circle" | "row" | "chip" | undefined;
+  /** The icon a row starts with: an avatar (circle, default) or an icon tile (square). */
+  icon?: "circle" | "square" | undefined;
   /** How many lines or rows. */
   lines?: number | undefined;
   /** CSS width of a line, block or circle. */
@@ -25,9 +27,11 @@ const props = withDefaults(defineProps<{
   height?: string | undefined;
   /** Say "Loading…" to screen readers with this text. */
   label?: string | undefined;
-}>(), { shape: "line", lines: 1, width: undefined, height: undefined, label: undefined });
+}>(), { shape: "line", lines: 1, icon: "circle", width: undefined, height: undefined, label: undefined });
 
 const count = computed(() => Math.max(1, Math.floor(props.lines)));
+/** Pill widths that read as different words. */
+const CHIP_WIDTHS = ["64px", "48px", "80px", "56px", "72px", "40px"];
 /** The last of several lines is shorter, like the end of a paragraph. */
 const lineWidth = (i: number): string | undefined =>
   props.width ?? (count.value > 1 && i === count.value - 1 ? "60%" : undefined);
@@ -41,9 +45,17 @@ const lineWidth = (i: number): string | undefined =>
     </template>
     <span v-else-if="shape === 'block'" class="wp-skeleton__bone wp-skeleton__block" :style="{ width, height }" aria-hidden="true" />
     <span v-else-if="shape === 'circle'" class="wp-skeleton__bone wp-skeleton__circle" :style="{ width: width ?? height, height: height ?? width }" aria-hidden="true" />
+    <span v-else-if="shape === 'chip'" class="wp-skeleton__chips" aria-hidden="true">
+      <span
+        v-for="i in count"
+        :key="i"
+        class="wp-skeleton__bone wp-skeleton__chip"
+        :style="{ width: width ?? CHIP_WIDTHS[(i - 1) % CHIP_WIDTHS.length], height }"
+      />
+    </span>
     <template v-else>
       <span v-for="i in count" :key="i" class="wp-skeleton__row" aria-hidden="true">
-        <span class="wp-skeleton__bone wp-skeleton__circle" />
+        <span class="wp-skeleton__bone" :class="icon === 'square' ? 'wp-skeleton__tile' : 'wp-skeleton__circle'" />
         <span class="wp-skeleton__row-text">
           <span class="wp-skeleton__bone wp-skeleton__line" :style="{ width: i % 2 ? '55%' : '42%' }" />
           <span class="wp-skeleton__bone wp-skeleton__line wp-skeleton__line--hint" :style="{ width: i % 2 ? '80%' : '68%' }" />
@@ -69,6 +81,10 @@ const lineWidth = (i: number): string | undefined =>
 .wp-skeleton__line--hint { height: 0.6em; opacity: 0.7; }
 .wp-skeleton__block { width: 100%; height: 64px; border-radius: var(--wp-radius); }
 .wp-skeleton__circle { flex: none; width: 28px; height: 28px; border-radius: 50%; /* round: stands in for an avatar */ }
+.wp-skeleton__tile { flex: none; width: 28px; height: 28px; border-radius: var(--wp-radius-sm); }
+.wp-skeleton__chips { display: flex; flex-wrap: wrap; gap: var(--wp-space-2); }
+/* A Chip's height (xs, 19px); pass height for a sm (24px) filter row. */
+.wp-skeleton__chip { height: 19px; border-radius: var(--wp-radius-cap, 999px); }
 .wp-skeleton__row { display: flex; align-items: center; gap: var(--wp-space-4); padding: var(--wp-space-2) 0; }
 .wp-skeleton__row-text { display: flex; flex-direction: column; gap: var(--wp-space-2); flex: 1; min-width: 0; }
 .wp-skeleton__sr {

package/src/highlight.ts

@@ -0,0 +1,199 @@
+/**
+ * Syntax colours for CodeBlock: a small lexer per language, no dependency.
+ * It splits code into tokens of a few kinds; CodeBlock draws each kind in a
+ * shared colour token, so a block wears the colours of the side it is on.
+ *
+ *   highlight('{"a": 1}', "json")  →  [{ kind: "punct", text: "{" }, { kind: "key", text: '"a"' }, …]
+ *
+ * Languages: json, ts (also js), html (also vue, xml), css, sh (also bash,
+ * shell, Modelfile), prompt (the Wildcard Pipeline template grammar: `$var`,
+ * `@{ref}`, `{a|b}`, `{2$$a|b}`, `$$` / `@@` escapes, `(word:1.2)` weights). Anything
+ * else comes back as one plain token. Every character of the input is in
+ * exactly one token, in order, so joining the tokens gives the input back.
+ */
+import { tokenizeRich } from "./rich-tokenize";
+
+export type HighlightKind =
+  | "plain" | "keyword" | "string" | "number" | "comment" | "punct"
+  | "key" | "tag" | "attr" | "fn" | "var" | "ref" | "brace" | "escape";
+
+export interface HighlightToken {
+  kind: HighlightKind;
+  text: string;
+}
+
+export type HighlightLanguage = "json" | "ts" | "html" | "css" | "sh" | "prompt";
+
+const ALIASES: Record<string, HighlightLanguage> = {
+  json: "json",
+  ts: "ts", typescript: "ts", js: "ts", javascript: "ts", tsx: "ts", jsx: "ts",
+  html: "html", vue: "html", xml: "html", svg: "html",
+  css: "css",
+  sh: "sh", bash: "sh", shell: "sh", zsh: "sh", console: "sh", modelfile: "sh", dockerfile: "sh",
+  prompt: "prompt", template: "prompt", wildcard: "prompt",
+};
+
+/** The grammar for a language name ("JSON", "Vue", "bash" …), or null. */
+export function highlightLanguage(name: string | null | undefined): HighlightLanguage | null {
+  if (!name) return null;
+  return ALIASES[name.trim().toLowerCase()] ?? null;
+}
+
+type Rule = [HighlightKind, RegExp];
+
+const TS_KEYWORDS = /^(?:import|from|export|default|const|let|var|function|return|if|else|for|while|do|switch|case|break|continue|new|class|extends|interface|type|enum|as|in|of|typeof|instanceof|async|await|try|catch|finally|throw|void|this|null|undefined|true|false|readonly|public|private|protected|static|satisfies|keyof)$/;
+
+const RULES: Record<Exclude<HighlightLanguage, "prompt" | "html">, Rule[]> = {
+  json: [
+    ["key", /"(?:[^"\\\n]|\\.)*"(?=\s*:)/y],
+    ["string", /"(?:[^"\\\n]|\\.)*"/y],
+    ["number", /-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/y],
+    ["keyword", /\b(?:true|false|null)\b/y],
+    ["punct", /[{}[\],:]/y],
+  ],
+  ts: [
+    ["comment", /\/\/[^\n]*|\/\*[\s\S]*?(?:\*\/|$)/y],
+    ["string", /"(?:[^"\\\n]|\\.)*"|'(?:[^'\\\n]|\\.)*'|`(?:[^`\\]|\\.)*`/y],
+    ["number", /\b\d+(?:\.\d+)?\b/y],
+    ["fn", /[A-Za-z_$][\w$]*(?=\s*\()/y],
+    ["plain", /[A-Za-z_$][\w$]*/y],
+    ["punct", /[{}()[\];,.<>=!&|?:+\-*/%]+/y],
+  ],
+  css: [
+    ["comment", /\/\*[\s\S]*?(?:\*\/|$)/y],
+    ["string", /"(?:[^"\\\n]|\\.)*"|'(?:[^'\\\n]|\\.)*'/y],
+    ["key", /[\w-]+(?=\s*:[^:{]*[;}\n])/y],
+    ["var", /--[\w-]+/y],
+    ["number", /#[\da-fA-F]{3,8}\b|-?\d*\.?\d+(?:px|em|rem|%|vh|vw|s|ms|deg|fr)?\b/y],
+    ["fn", /[\w-]+(?=\()/y],
+    ["tag", /[.#]?[\w-]+(?::{1,2}[\w-]+)*(?=[^{};]*\{)/y],
+    ["punct", /[{}();:,>+~*]/y],
+  ],
+  sh: [
+    ["comment", /#[^\n]*/y],
+    ["string", /"(?:[^"\\\n]|\\.)*"|'[^'\n]*'/y],
+    ["var", /\$\{?[\w]+\}?/y],
+    ["attr", /(?<=\s)--?[\w-]+/y],
+    ["fn", /(?<=^|\n|[|;&]\s*)[A-Za-z_][\w.-]*/y],
+    ["punct", /[|&;<>()]+/y],
+  ],
+};
+
+function lex(code: string, rules: Rule[]): HighlightToken[] {
+  const out: HighlightToken[] = [];
+  let plain = "";
+  let i = 0;
+  const flush = (): void => { if (plain) { out.push({ kind: "plain", text: plain }); plain = ""; } };
+  outer: while (i < code.length) {
+    for (const [kind, re] of rules) {
+      re.lastIndex = i;
+      const m = re.exec(code);
+      if (m && m[0].length > 0) {
+        let k = kind;
+        if (rules === RULES.ts && kind === "plain" && TS_KEYWORDS.test(m[0])) k = "keyword";
+        if (k === "plain") plain += m[0];
+        else { flush(); out.push({ kind: k, text: m[0] }); }
+        i += m[0].length;
+        continue outer;
+      }
+    }
+    plain += code[i];
+    i += 1;
+  }
+  flush();
+  return out;
+}
+
+/** HTML and Vue templates: tags, attributes, their values, `{{ }}` as TS. */
+function lexHtml(code: string): HighlightToken[] {
+  const out: HighlightToken[] = [];
+  const re = /<!--[\s\S]*?(?:-->|$)|<\/?[A-Za-z][\w.:-]*|\/?>|\{\{[\s\S]*?(?:\}\}|$)/g;
+  let at = 0;
+  let inTag = false;
+  const text = (s: string): void => {
+    if (!s) return;
+    if (!inTag) { out.push({ kind: "plain", text: s }); return; }
+    // Attributes inside a tag: name, =, "value".
+    const attr = /("[^"]*"|'[^']*')|([:@#]?[\w.:@#-]+)|(=)|(\s+)|([^\s"'=]+)/g;
+    for (const m of s.matchAll(attr)) {
+      if (m[1]) out.push({ kind: "string", text: m[1] });
+      else if (m[2]) out.push({ kind: "attr", text: m[2] });
+      else if (m[3]) out.push({ kind: "punct", text: m[3] });
+      else out.push({ kind: "plain", text: m[0] });
+    }
+  };
+  for (const m of code.matchAll(re)) {
+    const idx = m.index ?? 0;
+    text(code.slice(at, idx));
+    const t = m[0];
+    if (t.startsWith("<!--")) out.push({ kind: "comment", text: t });
+    else if (t.startsWith("{{") && !inTag) {
+      out.push({ kind: "punct", text: "{{" });
+      const inner = t.slice(2, t.endsWith("}}") ? -2 : undefined);
+      out.push(...lex(inner, RULES.ts));
+      if (t.endsWith("}}")) out.push({ kind: "punct", text: "}}" });
+    } else if (t.startsWith("<")) {
+      out.push({ kind: "punct", text: t.startsWith("</") ? "</" : "<" });
+      out.push({ kind: "tag", text: t.replace(/^<\/?/, "") });
+      inTag = true;
+    } else if (t.endsWith(">")) {
+      out.push({ kind: "punct", text: t });
+      inTag = false;
+    } else {
+      text(t);
+    }
+    at = idx + t.length;
+  }
+  text(code.slice(at));
+  return out;
+}
+
+/** The template grammar, through the kit's own tokenizer; `(word:1.2)` weights too. */
+function lexPrompt(code: string): HighlightToken[] {
+  const out: HighlightToken[] = [];
+  const plain = (text: string): void => {
+    // Plain text: pick out `:1.2)` weights.
+    let at = 0;
+    for (const m of text.matchAll(/:(-?\d+(?:\.\d+)?)(?=\))/g)) {
+      const idx = (m.index ?? 0) + 1;
+      if (idx > at) out.push({ kind: "plain", text: text.slice(at, idx) });
+      out.push({ kind: "number", text: m[1] ?? "" });
+      at = idx + (m[1]?.length ?? 0);
+    }
+    if (at < text.length) out.push({ kind: "plain", text: text.slice(at) });
+  };
+  let at = 0;
+  for (const t of tokenizeRich(code)) {
+    // The tokenizer may leave gaps (it reports what it recognises); keep them as text.
+    if (t.start > at) plain(code.slice(at, t.start));
+    const text = code.slice(t.start, t.end);
+    if (t.kind === "var") out.push({ kind: "var", text });
+    else if (t.kind === "ref") out.push({ kind: "ref", text });
+    else if (t.kind === "dp-brace" || t.kind === "dp-multi") out.push({ kind: "brace", text });
+    else if (t.kind === "escape") out.push({ kind: "escape", text });
+    else plain(text);
+    at = Math.max(at, t.end);
+  }
+  if (at < code.length) plain(code.slice(at));
+  return out;
+}
+
+export function highlight(code: string, language: HighlightLanguage | null): HighlightToken[] {
+  if (!language || !code) return [{ kind: "plain", text: code }];
+  if (language === "html") return lexHtml(code);
+  if (language === "prompt") return lexPrompt(code);
+  return lex(code, RULES[language]);
+}
+
+/** Tokens cut at line breaks, for numbered lines. */
+export function highlightLines(tokens: HighlightToken[]): HighlightToken[][] {
+  const lines: HighlightToken[][] = [[]];
+  for (const t of tokens) {
+    const parts = t.text.split("\n");
+    parts.forEach((p, i) => {
+      if (i > 0) lines.push([]);
+      if (p) lines[lines.length - 1]?.push({ kind: t.kind, text: p });
+    });
+  }
+  return lines;
+}

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/tokens.ts

@@ -45,7 +45,7 @@ export const SHARED_TOKENS = [
 export const OPTIONAL_TOKENS = ["--wp-bg-deep", "--wp-bg2"] as const;
 
 /** Set by the piece itself, on its own root, not by the host. */
-export const LOCAL_TOKENS = ["--wp-hsv-hue", "--wp-lm-t", "--wp-lm-x", "--wp-lm-r", "--wp-lm-s", "--wp-lm-o", "--wp-select-line-h", "--wp-list-row-depth", "--wp-list-row-icon", "--wp-chip-c", "--wp-field-h"] as const;
+export const LOCAL_TOKENS = ["--wp-hsv-hue", "--wp-lm-o", "--wp-select-line-h", "--wp-list-row-depth", "--wp-list-row-icon", "--wp-chip-c", "--wp-field-h"] as const;
 
 /** Pieces that need a page with src/theme/ loaded (not the canvas). */
 export const PAGE_PIECES = [