@dumiflex/wp-kit 0.4.0 → 0.6.0

package/src/WorkingLine.vue

@@ -0,0 +1,320 @@
+<script setup lang="ts">
+/**
+ * WorkingLine: "the model is working", in one line like Claude Code's. A
+ * small mark drawn from the logo's sparkles, a word that crossfades when it
+ * changes, and the time so far. It only draws: the app decides the word,
+ * the time and the tempo (the extension's AiWorking cycles playful words
+ * and the real status, and reads the request's phase).
+ *
+ *   <WorkingLine word="Thinking" time="12s" tempo="mid" />
+ *   <WorkingLine :word="word" :word-key="phase" variant="orbit" inline />
+ *
+ * Marks (`variant`): typing (three stars hop in turn), shuffle (the small
+ * stars swap places round the big one), orbit (the logo's four nodes circle
+ * the stars) or burst (the small stars fly out of the big one and back).
+ * `tempo` sets their speed: slow while the model reads, mid while it thinks,
+ * fast while it writes.
+ *
+ * The word crossfades in place when `wordKey` changes (default: the word),
+ * so a token count ticking up can keep its key and not flicker. Its box is
+ * never narrower than the word: it widens at once and narrows smoothly once
+ * the old word has mostly faded.
+ *
+ * Every mark animates registered custom properties, never `transform` or
+ * `opacity` themselves, so the paths repaint sharp each frame instead of
+ * going to a compositor layer that blurs them and snaps them to whole pixels.
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { BRAND_COLOURS, STAR_A, STAR_B, STAR_BIG, type LogoBrand } from "./logo-paths";
+
+export type WorkingVariant = "typing" | "shuffle" | "orbit" | "burst";
+
+const props = withDefaults(defineProps<{
+  /** What is shown, without the "…" (the line adds it). */
+  word: string;
+  /** What the crossfade keys on; defaults to the word. */
+  wordKey?: string | undefined;
+  /** Time so far, already formatted ("42s"). Left out, no time shows. */
+  time?: string | undefined;
+  variant?: WorkingVariant | undefined;
+  tempo?: "slow" | "mid" | "fast" | undefined;
+  /** The mark's size in px. */
+  size?: number | undefined;
+  /** Smaller text and a capped word width, for a top bar. */
+  inline?: boolean | undefined;
+  /** The whole status, for screen readers and the tooltip; defaults to the word. */
+  label?: string | undefined;
+  brand?: LogoBrand | undefined;
+}>(), { variant: "typing", tempo: "slow", size: 22, inline: false, brand: "extension" });
+
+const key = computed(() => props.wordKey ?? props.word);
+const name = computed(() => props.label ?? props.word);
+
+const colours = computed(() => BRAND_COLOURS[props.brand]);
+const BIG = computed(() => colours.value[0]);
+const A = computed(() => colours.value[1]);
+const B = computed(() => colours.value[2]);
+/** The logo's four nodes for the orbit, with steps between the colours. */
+const nodes = computed(() => [
+  [911, 512, B.value],
+  [512, 911, `color-mix(in srgb, ${B.value} 70%, ${A.value})`],
+  [113, 512, `color-mix(in srgb, ${BIG.value} 60%, ${A.value})`],
+  [512, 113, A.value],
+] as const);
+/** Typing stars: the big sparkle drawn small three times in a row. */
+const typing = computed(() => [[250, A.value], [512, BIG.value], [774, B.value]] as const);
+
+const measure = ref<HTMLElement | null>(null);
+const boxWidth = ref<number | null>(null);
+const growing = ref(false);
+async function fit(): Promise<void> {
+  await nextTick();
+  // Rounded up, plus a pixel to spare: one pixel short is enough for the
+  // browser to swap the word's end for its own "…", which Firefox draws
+  // invisibly on this gradient text.
+  const raw = measure.value?.getBoundingClientRect().width ?? 0;
+  const w = raw ? Math.ceil(raw) + 1 : 0;
+  if (!w || w === boxWidth.value) return;
+  growing.value = boxWidth.value === null || w > boxWidth.value;
+  boxWidth.value = w;
+}
+watch(() => props.word, () => { void fit(); });
+
+// The word's width can also change on its own, when the font loads late.
+let resized: ResizeObserver | null = null;
+onMounted(() => {
+  void fit();
+  if (typeof ResizeObserver !== "undefined" && measure.value) {
+    resized = new ResizeObserver(() => { void fit(); });
+    resized.observe(measure.value);
+  }
+});
+onBeforeUnmount(() => resized?.disconnect());
+</script>
+
+<template>
+  <div
+    class="wp-wl"
+    :data-tempo="tempo"
+    :data-variant="variant"
+    :data-inline="inline ? 'true' : undefined"
+    role="status"
+    :aria-label="name"
+    :title="name"
+    :style="{ '--wp-wl-big': BIG, '--wp-wl-a': A, '--wp-wl-b': B }"
+  >
+    <svg class="wp-wl__logo" viewBox="0 0 1024 1024" :width="size" :height="size" aria-hidden="true">
+      <template v-if="variant === 'typing'">
+        <g v-for="([x, c], i) in typing" :key="i" class="wp-wl__hop" :style="{ '--wp-wl-k': i }">
+          <path class="wp-wl__star" :style="{ fill: c }" :transform="`translate(${x - 256} 256) scale(.5)`" :d="STAR_BIG" />
+        </g>
+      </template>
+      <g v-else-if="variant === 'shuffle'" transform="translate(512 512) scale(1.45) translate(-512 -512)">
+        <path class="wp-wl__star wp-wl__star--big wp-wl__dip" :style="{ fill: BIG }" :d="STAR_BIG" />
+        <g class="wp-wl__vb wp-wl__swap">
+          <path class="wp-wl__star" :style="{ fill: A }" :d="STAR_A" />
+          <path class="wp-wl__star" :style="{ fill: B }" :d="STAR_B" />
+        </g>
+      </g>
+      <template v-else-if="variant === 'orbit'">
+        <g class="wp-wl__vb wp-wl__spin">
+          <circle
+            v-for="([x, y, c], i) in nodes" :key="i" class="wp-wl__dot"
+            :style="{ '--wp-wl-k': i, fill: c }" :cx="x" :cy="y" r="70"
+          />
+        </g>
+        <path class="wp-wl__star wp-wl__star--big wp-wl__breathe" :style="{ fill: BIG }" :d="STAR_BIG" />
+        <path class="wp-wl__star" :style="{ fill: A }" :d="STAR_A" />
+        <path class="wp-wl__star" :style="{ fill: B }" :d="STAR_B" />
+      </template>
+      <g v-else transform="translate(512 512) scale(1.3) translate(-512 -512)">
+        <path class="wp-wl__star wp-wl__star--big wp-wl__pop" :style="{ fill: BIG }" :d="STAR_BIG" />
+        <path class="wp-wl__star wp-wl__burst" :style="{ fill: A, '--wp-wl-dx': '152px', '--wp-wl-dy': '-152px' }" :d="STAR_A" />
+        <path class="wp-wl__star wp-wl__burst" :style="{ fill: B, '--wp-wl-dx': '-152px', '--wp-wl-dy': '152px' }" :d="STAR_B" />
+      </g>
+    </svg>
+    <span
+      class="wp-wl__words"
+      :data-grow="growing ? 'true' : undefined"
+      :style="boxWidth ? { width: `${boxWidth}px` } : undefined"
+    >
+      <Transition name="wp-wl-word" type="transition">
+        <span :key="key" class="wp-wl__word" data-test="working-line-word">{{ word }}…</span>
+      </Transition>
+      <span ref="measure" class="wp-wl__word wp-wl__measure" aria-hidden="true">{{ word }}…</span>
+    </span>
+    <span v-if="time !== undefined" class="wp-wl__time" data-test="working-line-time">{{ time }}</span>
+  </div>
+</template>
+
+<style scoped>
+.wp-wl {
+  --wp-wl-t: 2.8s;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: var(--wp-text-muted);
+  font-size: 13px;
+  white-space: nowrap;
+}
+.wp-wl[data-tempo="mid"] { --wp-wl-t: 2.2s; }
+.wp-wl[data-tempo="fast"] { --wp-wl-t: 1.5s; }
+.wp-wl__logo { flex-shrink: 0; overflow: visible; }
+.wp-wl__words {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  /* Narrows once the old word has mostly faded; widens at once. */
+  transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) 0.3s;
+}
+.wp-wl__words[data-grow="true"] { transition: none; }
+.wp-wl__word {
+  display: inline-block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+  /* A light band sweeps over the gradient text, like Claude's own line.
+     The band is a fixed white, like the logo's brand colours. */
+  background:
+    linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%) no-repeat,
+    linear-gradient(90deg, var(--wp-wl-big), var(--wp-wl-a) 45%, var(--wp-wl-b));
+  background-size: 250% 100%, 100% 100%;
+  background-position: 150% 0, 0 0;
+  -webkit-background-clip: text; background-clip: text; color: transparent;
+  animation: wp-wl-shimmer 2.6s linear infinite;
+}
+@keyframes wp-wl-shimmer {
+  0% { background-position: 150% 0, 0 0; }
+  70%, 100% { background-position: -50% 0, 0 0; }
+}
+/* Sized like the word, never seen: what the box grows or shrinks to. */
+.wp-wl__measure {
+  position: absolute; left: 0; top: 0;
+  visibility: hidden; pointer-events: none; animation: none;
+  max-width: none; overflow: visible;
+}
+.wp-wl__time { flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--wp-text-dim); }
+.wp-wl[data-inline="true"] { font-size: 12px; }
+.wp-wl[data-inline="true"] .wp-wl__words { max-width: 240px; }
+/* Crossfade in place: the old word fades out on top of the new one. The
+ * fade and blur run through registered custom properties (see the marks
+ * below for why): an `opacity` / `filter` transition lifts the word onto a
+ * compositor layer, which re-rasterises the text and snaps it to whole
+ * pixels as the fade begins. The leaving word keeps its exact spot (top 0,
+ * the box is one word tall), with no -50% translate to land between pixels. */
+.wp-wl-word-enter-active, .wp-wl-word-leave-active {
+  opacity: var(--wp-wl-wo);
+  filter: blur(var(--wp-wl-wb));
+  transition: --wp-wl-wo 0.45s ease, --wp-wl-wb 0.45s ease;
+}
+.wp-wl-word-leave-active { position: absolute; left: 0; top: 0; }
+.wp-wl-word-enter-from, .wp-wl-word-leave-to { --wp-wl-wo: 0; --wp-wl-wb: 2px; }
+@media (prefers-reduced-motion: reduce) {
+  .wp-wl__word { animation: none; }
+  .wp-wl__words { transition: none; }
+  .wp-wl-word-enter-from, .wp-wl-word-leave-to { --wp-wl-wb: 0px; }
+}
+
+/* Every mark animates registered custom properties, never `transform` or
+ * `opacity` themselves. A `transform` / `opacity` animation goes to the
+ * compositor, which lifts each path onto its own layer as it starts:
+ * rasterised once at a fixed scale and snapped to whole pixels, so the sharp
+ * mark went soft and jumped half a pixel the moment it began to move. A
+ * custom property animates on the main thread and each frame repaints the
+ * vector paths in place, as sharp as at rest. */
+@property --wp-wl-x { syntax: "<length>"; inherits: false; initial-value: 0px; }
+@property --wp-wl-f { syntax: "<number>"; inherits: false; initial-value: 0; }
+@property --wp-wl-r { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
+@property --wp-wl-s { syntax: "<number>"; inherits: false; initial-value: 1; }
+@property --wp-wl-o { syntax: "<number>"; inherits: false; initial-value: 1; }
+@property --wp-wl-wo { syntax: "<number>"; inherits: false; initial-value: 1; }
+@property --wp-wl-wb { syntax: "<length>"; inherits: false; initial-value: 0px; }
+
+.wp-wl__star, .wp-wl__dot, .wp-wl__hop { transform-box: fill-box; transform-origin: center; }
+.wp-wl__vb { transform-box: view-box; transform-origin: 512px 512px; }
+
+/* Typing stars: each hops in turn. */
+.wp-wl__hop {
+  transform: translateY(var(--wp-wl-x)) scale(var(--wp-wl-s));
+  animation: wp-wl-hop var(--wp-wl-t) ease-in-out infinite;
+  animation-delay: calc(var(--wp-wl-t) * var(--wp-wl-k) * 0.15);
+}
+@keyframes wp-wl-hop {
+  0%, 40%, 100% { --wp-wl-x: 0px; --wp-wl-s: 1; }
+  20% { --wp-wl-x: -110px; --wp-wl-s: 1.12; }
+}
+
+/* Shuffle: the small stars swap places, the big one dips and turns. */
+.wp-wl__swap {
+  transform: rotate(var(--wp-wl-r));
+  animation: wp-wl-swap calc(var(--wp-wl-t) * 2) cubic-bezier(0.65, 0, 0.35, 1) infinite;
+}
+.wp-wl__dip {
+  transform: rotate(var(--wp-wl-r)) scale(var(--wp-wl-s));
+  animation: wp-wl-dip var(--wp-wl-t) cubic-bezier(0.65, 0, 0.35, 1) infinite;
+}
+@keyframes wp-wl-swap {
+  0%, 15% { --wp-wl-r: 0deg; }
+  50%, 65% { --wp-wl-r: 180deg; }
+  100% { --wp-wl-r: 360deg; }
+}
+@keyframes wp-wl-dip {
+  0%, 15% { --wp-wl-s: 1; --wp-wl-r: 0deg; }
+  32% { --wp-wl-s: 0.7; --wp-wl-r: 45deg; }
+  50%, 100% { --wp-wl-s: 1; --wp-wl-r: 90deg; }
+}
+
+/* Orbit: the four nodes circle the stars and twinkle in turn. */
+.wp-wl__spin {
+  transform: rotate(var(--wp-wl-r));
+  animation: wp-wl-spin calc(var(--wp-wl-t) * 2) cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
+}
+.wp-wl__dot {
+  opacity: var(--wp-wl-o);
+  transform: scale(var(--wp-wl-s));
+  animation: wp-wl-twinkle var(--wp-wl-t) ease-in-out infinite;
+  animation-delay: calc(var(--wp-wl-t) * var(--wp-wl-k) * -0.25);
+}
+.wp-wl__breathe {
+  transform: scale(var(--wp-wl-s));
+  animation: wp-wl-breathe var(--wp-wl-t) ease-in-out infinite;
+}
+@keyframes wp-wl-spin { from { --wp-wl-r: 0deg; } to { --wp-wl-r: 360deg; } }
+@keyframes wp-wl-twinkle {
+  0%, 100% { --wp-wl-o: 1; --wp-wl-s: 1; }
+  50% { --wp-wl-o: 0.35; --wp-wl-s: 0.6; }
+}
+@keyframes wp-wl-breathe { 0%, 100% { --wp-wl-s: 1; } 50% { --wp-wl-s: 0.86; } }
+
+/* Burst: the small stars fly out of the big one and back. `--wp-wl-f` is
+ * how far out they are (1 = at --wp-wl-dx/dy, 0 = home). */
+.wp-wl__burst {
+  opacity: var(--wp-wl-o);
+  transform:
+    translate(calc(var(--wp-wl-dx) * var(--wp-wl-f)), calc(var(--wp-wl-dy) * var(--wp-wl-f)))
+    scale(var(--wp-wl-s));
+  animation: wp-wl-burst var(--wp-wl-t) cubic-bezier(0.3, 0, 0.2, 1) infinite;
+}
+.wp-wl__pop {
+  transform: scale(var(--wp-wl-s));
+  animation: wp-wl-pop var(--wp-wl-t) ease-in-out infinite;
+}
+@keyframes wp-wl-burst {
+  0% { --wp-wl-f: 1; --wp-wl-s: 0; --wp-wl-o: 0; }
+  15% { --wp-wl-o: 1; }
+  45%, 75% { --wp-wl-f: 0; --wp-wl-s: 1.15; --wp-wl-o: 1; }
+  100% { --wp-wl-f: 1; --wp-wl-s: 0; --wp-wl-o: 0; }
+}
+@keyframes wp-wl-pop { 0%, 100% { --wp-wl-s: 1.1; } 40% { --wp-wl-s: 0.8; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .wp-wl__logo * { animation: none !important; }
+  .wp-wl__logo { opacity: var(--wp-wl-o); animation: wp-wl-fade 2.4s ease-in-out infinite; }
+  @keyframes wp-wl-fade { 0%, 100% { --wp-wl-o: 1; } 50% { --wp-wl-o: 0.55; } }
+}
+</style>

package/src/WpIconButton.vue

@@ -2,7 +2,7 @@
 /**
  * WpIconButton: the 20 px square icon button inside a canvas row (module,
  * injector, bundle and model rows, the Context toolbar). Rows are too tight
- * for the 24 px `WpButton size="sm"`, so this is the one smaller control on
+ * for the 24 px `Button size="sm"`, so this is the one smaller control on
  * the canvas, still at the 20 px hit-target floor.
  *
  *   <WpIconButton icon="pi-trash" label="Remove module" tone="danger" @click="remove" />
@@ -75,7 +75,8 @@ const emit = defineEmits<{ click: [evt: MouseEvent] }>();
 .wp-icon-btn[data-tone="accent"] { --tone: var(--wp-accent); }
 .wp-icon-btn[data-tone="warn"] { --tone: var(--wp-warn); }
 .wp-icon-btn[data-tone="danger"] { --tone: var(--wp-danger); }
-.wp-icon-btn .pi { font-size: 11px; }
+/* Even icon in the 18px inside of the box: an odd size sits half a pixel off. */
+.wp-icon-btn .pi { font-size: 12px; }
 .wp-icon-btn__glyph { font: 600 11px/1 var(--wp-font-mono); }
 .wp-icon-btn:hover:not(:disabled) { background: var(--wp-bg-4); color: var(--tone); }
 .wp-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }

package/src/WpImageZoom.vue

@@ -25,7 +25,7 @@
  *   <WpImageZoom v-model:zoom="zoom" :src="url" alt="Frame 3" />
  */
 import { computed, onBeforeUnmount, ref, watch } from "vue";
-import WpButton from "./WpButton.vue";
+import Button from "./Button.vue";
 import {
   centreOf, clampView, fitScale, percent, stepScale, viewAround, visibleRect, zoomAt, IDLE_MS, type Size, type View,
 } from "./image-zoom";
@@ -298,13 +298,13 @@ const at = (s: number): boolean => !isFit.value && Math.abs(view.value.scale - s
       @focusout="chromeLeave"
     >
       <slot name="bar-start" />
-      <WpButton variant="ghost" :size="size" icon="pi-minus" aria-label="Zoom out" kbd="−" data-test="imgzoom-out" @click="zoomOut" />
-      <WpButton :variant="isFit ? 'secondary' : 'ghost'" :size="size" kbd="0" hint="Show the whole picture" :aria-pressed="isFit" data-test="imgzoom-fit" @click="setZoom(null)">Fit</WpButton>
-      <WpButton :variant="at(1) ? 'secondary' : 'ghost'" :size="size" kbd="1" hint="Real size: one image pixel per screen pixel" :aria-pressed="at(1)" data-test="imgzoom-100" @click="setZoom(1)">100%</WpButton>
-      <WpButton :variant="at(2) ? 'secondary' : 'ghost'" :size="size" kbd="2" hint="Twice the real size" :aria-pressed="at(2)" data-test="imgzoom-200" @click="setZoom(2)">200%</WpButton>
-      <WpButton variant="ghost" :size="size" icon="pi-plus" aria-label="Zoom in" kbd="+" data-test="imgzoom-in" @click="zoomIn" />
+      <Button variant="ghost" :size="size" icon="pi-minus" aria-label="Zoom out" kbd="−" data-test="imgzoom-out" @click="zoomOut" />
+      <Button :variant="isFit ? 'secondary' : 'ghost'" :size="size" kbd="0" hint="Show the whole picture" :aria-pressed="isFit" data-test="imgzoom-fit" @click="setZoom(null)">Fit</Button>
+      <Button :variant="at(1) ? 'secondary' : 'ghost'" :size="size" kbd="1" hint="Real size: one image pixel per screen pixel" :aria-pressed="at(1)" data-test="imgzoom-100" @click="setZoom(1)">100%</Button>
+      <Button :variant="at(2) ? 'secondary' : 'ghost'" :size="size" kbd="2" hint="Twice the real size" :aria-pressed="at(2)" data-test="imgzoom-200" @click="setZoom(2)">200%</Button>
+      <Button variant="ghost" :size="size" icon="pi-plus" aria-label="Zoom in" kbd="+" data-test="imgzoom-in" @click="zoomIn" />
       <span class="wp-imgzoom__level" aria-live="polite" data-test="imgzoom-level">{{ level }}</span>
-      <WpButton
+      <Button
         v-if="canFull"
         variant="ghost"
         :size="size"

package/src/WpSegmented.vue

@@ -168,7 +168,9 @@ function onKeydown(ev: KeyboardEvent): void {
 .wp-segmented__opt[data-active="true"] .pi { color: var(--wp-accent-text); }
 .wp-segmented__opt:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--wp-border-focus); }
 .wp-segmented__opt:disabled { opacity: 0.45; cursor: not-allowed; }
-.wp-segmented__opt .pi { font-size: 0.95em; }
+/* Even sizes: an icon-only option is a square, and an odd icon sits half a pixel off in it. */
+.wp-segmented__opt .pi { font-size: 12px; }
+.wp-segmented[data-size="lg"] .wp-segmented__opt .pi { font-size: 14px; }
 @media (prefers-reduced-motion: reduce) {
   .wp-segmented__opt { transition: none; }
 }

package/src/WpSwitch.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /**
- * The on/off switch for canvas widgets and the manager (Toggle.vue wraps it).
+ * The one on/off switch, for canvas widgets and the manager (size="md" there).
  *
  *   <WpSwitch v-model="held" label="Hold across run" />                  track
  *   <WpSwitch v-model="held" variant="chip" icon="pi-link" label="Hold across run" />

package/src/WpTabs.vue

@@ -165,7 +165,7 @@ function onKeydown(ev: KeyboardEvent): void {
 .wp-tabset__tab[data-active="true"] { color: var(--wp-text); border-bottom-color: var(--wp-accent-400); }
 .wp-tabset__tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--wp-border-focus); border-radius: var(--wp-radius-sm); }
 .wp-tabset__tab:disabled { opacity: 0.45; cursor: not-allowed; }
-.wp-tabset__tab .pi { font-size: 0.95em; }
+.wp-tabset__tab .pi { font-size: 12px; }
 .wp-tabset__count {
   min-width: 16px;
   padding: 1px 5px;

package/src/_modal-motion.css

@@ -6,7 +6,7 @@
  *               the dialog grows into place.
  *
  * Selector for the panel is `> *` (immediate child of the overlay
- * element). Works for ModalShell's `.wp-modal-wrapper`, ConfirmDialog's
+ * element). Works for ModalShell's `.wp-modal-wrapper` (Modal, ConfirmModal), the old
  * `.wp-confirm`, InjectorBindingModal's `.ibm`, and any future modal
  * that follows the overlay-with-one-child layout.
  *

package/src/button.css

@@ -1,13 +1,12 @@
-/* Button — the one .wp-btn stylesheet, shared by the manager Button
- * (manager/components/ui/Button.vue, loaded globally by manager/main.ts) and
- * the canvas twin WpButton (components/shared/WpButton.vue, component
- * standard rule 8), which pulls it in scoped. It reads only the
+/* Button — the one .wp-btn stylesheet. Button.vue pulls it in scoped (so it
+ * works on the canvas), and the manager and the community site also load it
+ * globally for the few plain elements styled as buttons (a router-link). It reads only the
  * SHARED_TOKENS names, so it wears the manager colours on a page and the
  * canvas colours in a node.
  *
  * Unlayered on purpose: the manager loads it beside tokens.css, where an
  * unlayered reset would otherwise beat it. The canvas never loads it
- * globally: WpButton pulls in a scoped copy, so its classes never meet
+ * globally: Button pulls in a scoped copy, so its classes never meet
  * another extension's `.wp-btn`.
  *
  * Heights follow the control scale: sm 24 / md 32 / lg 40.
@@ -21,6 +20,8 @@
  */
 
 .wp-btn {
+  /* A link drawn as a button (<a class="wp-btn">, Button as="a") loses the browser's underline; the link variant adds its own on hover. */
+  text-decoration: none;
   height: var(--wp-control-h-md);
   padding: 0 12px;
   border-radius: min(7px, var(--wp-radius-cap, 999px));
@@ -46,7 +47,8 @@
   outline: none;
   box-shadow: var(--wp-focus-ring);
 }
-.wp-btn .pi, .wp-btn svg { font-size: 13px; }
+/* Even icon sizes in the even control heights: an odd one sits half a pixel off. */
+.wp-btn .pi, .wp-btn svg { font-size: 14px; }
 /* The label box (not on a link, which has no fixed height) is trimmed to
  * the cap height where the browser can, so the
  * flex centring puts the capitals, not the ascender-to-descender box, on the

package/src/floating.ts

@@ -53,6 +53,11 @@ function room(side: Side, a: Rect, view: Size, gap: number, margin: number): num
   }
 }
 
+/** Space on one side of the anchor for a panel, after the gap and margin. */
+export function roomOn(side: Side, anchor: Rect, view: Size, opts: Pick<PlaceOptions, "gap" | "margin"> = {}): number {
+  return room(side, anchor, view, opts.gap ?? 6, opts.margin ?? 8);
+}
+
 function clamp(v: number, min: number, max: number): number {
   return max < min ? min : Math.min(Math.max(v, min), max);
 }

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;
+}