@leavepulse/ui 0.43.3 → 0.44.0

package/src/components/LpToaster.vue

@@ -12,37 +12,47 @@ import {
   ToastViewport,
 } from "reka-ui"
 import { onBeforeUnmount, ref, watch } from "vue"
+import { useLabels } from "../composables/useLpConfig"
 import { useToast, type ToastItem } from "../composables/useToast"
 import { CLOSE_ICON } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 
+const props = defineProps<{ labels?: Partial<{ dismiss: string }> }>()
+const text = useLabels("toast", { dismiss: "Dismiss" }, () => props.labels)
+
 const { queue, dismiss } = useToast()
 
+// A toast replaced through its `key` keeps its id and gets a new revision, so
+// everything tied to one rendered toast goes by both.
+const tag = (t: ToastItem) => `${t.id}:${t.rev}`
+
 // Toasts that are playing their exit animation. We don't splice them out of the
 // queue immediately on close — that would unmount before `toast-out` can run.
 // Instead we flip `open` to false (reka sets data-state=closed → the keyframe
 // plays), then drop the toast for real once `animationend` fires. A safety
 // timer removes it even if the animationend event is missed (e.g. tab hidden).
-const closing = ref<Set<number>>(new Set())
+const closing = ref<Set<string>>(new Set())
 
-function beginClose(id: number) {
-  if (closing.value.has(id)) return
-  closing.value = new Set(closing.value).add(id)
+function beginClose(t: ToastItem) {
+  const at = tag(t)
+  if (closing.value.has(at)) return
+  closing.value = new Set(closing.value).add(at)
   // Fallback slightly longer than the 140ms toast-out duration.
-  window.setTimeout(() => finishClose(id), 220)
+  window.setTimeout(() => finishClose(t.id, at), 220)
 }
 
-function finishClose(id: number) {
-  if (!closing.value.has(id)) return
+function finishClose(id: number, at: string) {
+  if (!closing.value.has(at)) return
   const next = new Set(closing.value)
-  next.delete(id)
+  next.delete(at)
   closing.value = next
-  dismiss(id)
+  // Replaced while it was leaving: the new revision stays.
+  if (queue.some((t) => tag(t) === at)) dismiss(id)
 }
 
-function onAnimEnd(e: AnimationEvent, id: number) {
+function onAnimEnd(e: AnimationEvent, t: ToastItem) {
   // Only the exit keyframe should trigger removal, not toast-in.
-  if (e.animationName === "toast-out") finishClose(id)
+  if (e.animationName === "toast-out") finishClose(t.id, tag(t))
 }
 
 const variantIcon: Record<ToastItem["variant"], string> = {
@@ -97,7 +107,7 @@ watch(
     // Same for the closing set — a toast evicted by the queue cap or clear()
     // leaves without an animationend, so prune dead ids here.
     if (closing.value.size) {
-      const live = new Set([...closing.value].filter((id) => queue.some((t) => t.id === id)))
+      const live = new Set([...closing.value].filter((at) => queue.some((t) => tag(t) === at)))
       if (live.size !== closing.value.size) closing.value = live
     }
     if (queue.some((t) => t.dismissAt !== null)) startTimer()
@@ -126,16 +136,41 @@ function progress(t: ToastItem): number {
   return Math.max(0, Math.min(100, (remaining / t.duration) * 100))
 }
 
-async function runClick(t: ToastItem) {
-  if (t.onClick) {
-    await t.onClick()
-    beginClose(t.id)
+/*
+ * reka cancels the click that ends a swipe by adding a listener after ours, so
+ * by the time it runs our handler has already acted on it: a swiped-away
+ * "View details" toast navigated. The swipe marks the toast instead, and the
+ * mark lasts only until that trailing click has had its chance.
+ */
+let swiped: string | null = null
+function onSwipeDone(t: ToastItem) {
+  swiped = tag(t)
+  window.setTimeout(() => (swiped = null), 0)
+}
+
+const busy = ref<Set<string>>(new Set())
+
+async function settle(t: ToastItem, run: () => void | Promise<void>) {
+  const at = tag(t)
+  if (busy.value.has(at)) return
+  busy.value = new Set(busy.value).add(at)
+  try {
+    await run()
+    beginClose(t)
+  } finally {
+    const next = new Set(busy.value)
+    next.delete(at)
+    busy.value = next
   }
 }
 
-async function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>[number]) {
-  await action.onClick()
-  beginClose(t.id)
+function runClick(t: ToastItem) {
+  if (swiped === tag(t)) return
+  if (t.onClick) return settle(t, t.onClick)
+}
+
+function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>[number]) {
+  return settle(t, action.onClick)
 }
 </script>
 
@@ -143,13 +178,16 @@ async function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>
   <ToastProvider>
     <ToastRoot
       v-for="t in queue"
-      :key="t.id"
-      :open="!closing.has(t.id)"
+      :key="tag(t)"
+      :open="!closing.has(tag(t))"
       :duration="t.duration"
+      :type="t.variant === 'error' || t.variant === 'warning' ? 'foreground' : 'background'"
       class="pointer-events-auto relative overflow-hidden rounded-card border border-line bg-surface-raised shadow-panel data-[state=open]:animate-[toast-in_200ms_var(--ease-emphasized)] data-[state=closed]:animate-[toast-out_140ms_ease]"
       :class="{ 'cursor-pointer': t.onClick }"
-      @update:open="(open) => !open && beginClose(t.id)"
-      @animationend="(e: AnimationEvent) => onAnimEnd(e, t.id)"
+      @update:open="(open) => !open && beginClose(t)"
+      @animationend="(e: AnimationEvent) => onAnimEnd(e, t)"
+      @swipe-end="onSwipeDone(t)"
+      @swipe-cancel="onSwipeDone(t)"
       @pause="onPause(t)"
       @resume="onResume(t)"
       @click="runClick(t)"
@@ -178,7 +216,9 @@ async function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>
               v-for="(action, i) in t.actions"
               :key="i"
               type="button"
-              class="inline-flex items-center gap-1.5 rounded-control border border-line bg-surface-soft px-2.5 py-1 text-xs font-medium text-ink outline-none transition-[border-color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:border-line-strong hover:bg-surface-soft/70 active:scale-95 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring"
+              :disabled="busy.has(tag(t))"
+              :aria-busy="busy.has(tag(t)) || undefined"
+              class="inline-flex items-center gap-1.5 rounded-control disabled:opacity-60 border border-line bg-surface-soft px-2.5 py-1 text-xs font-medium text-ink outline-none transition-[border-color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:border-line-strong hover:bg-surface-soft/70 active:scale-95 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring"
               @click="runAction(t, action)"
             >
               <LpIcon v-if="action.icon" :name="action.icon" :size="14" />
@@ -190,8 +230,8 @@ async function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>
         <button
           type="button"
           class="group -mr-1 -mt-1 rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink"
-          aria-label="Dismiss"
-          @click.stop="beginClose(t.id)"
+          :aria-label="text.dismiss"
+          @click.stop="beginClose(t)"
         >
           <LpIcon
             name="lucide:x"

package/src/components/LpTooltip.vue

@@ -28,13 +28,14 @@
  * them and the control stops opening. Put `aria-label` on the trigger instead.
  */
 import {
+  injectTooltipProviderContext,
   TooltipContent,
   TooltipPortal,
   TooltipProvider,
   TooltipRoot,
   TooltipTrigger,
 } from "reka-ui"
-import { onBeforeUnmount, ref, watch } from "vue"
+import { Fragment, onBeforeUnmount, ref, watch } from "vue"
 import {
   springSettled,
   springStep,
@@ -54,7 +55,7 @@ const props = withDefaults(
      * adding a description.
      */
     label?: boolean
-    /** Milliseconds before the tip appears on hover. */
+    /** Milliseconds before the tip appears on hover. Unset follows the provider, else 200. */
     delay?: number
     /**
      * Show on any focus, not just keyboard focus. Off by default: a tip that
@@ -83,7 +84,7 @@ const props = withDefaults(
      */
     disabled?: boolean
   }>(),
-  { delay: 200, side: "top" },
+  { side: "top" },
 )
 
 /*
@@ -101,6 +102,16 @@ const props = withDefaults(
  * the pointer exactly reads as jitter, while a slight lag reads as following.
  * Same reasoning, and the same shared "float" feel, as LpChart's readout.
  */
+/*
+ * A provider of its own only when none is above. Each tip in its own provider
+ * meant moving along a toolbar waited the full delay at every button; under a
+ * shared one (LpTooltipProvider at the root) the next tip opens at once.
+ */
+const shared = injectTooltipProviderContext(null)
+
+const reducedMotion = () =>
+  typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+
 const target = { x: 0, y: 0 }
 const offset = ref({ x: 0, y: 0 })
 
@@ -155,6 +166,11 @@ const onPointerMove = (e: PointerEvent) => {
   const half = props.side === "top" || props.side === "bottom" ? rect.height / 2 : 0
   const dir = props.side === "bottom" ? -1 : 1
   target.y = e.clientY - (rect.top + rect.height / 2) + half * dir
+  // Without motion the tip goes straight to the reading instead of trailing.
+  if (reducedMotion()) {
+    offset.value = { x: target.x, y: target.y }
+    return
+  }
   if (!frame) frame = requestAnimationFrame(settle)
 }
 
@@ -205,7 +221,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <TooltipProvider :delay-duration="delay">
+  <component :is="shared ? Fragment : TooltipProvider" v-bind="shared ? {} : { delayDuration: delay ?? 200 }">
     <!--
       `disable-closing-trigger` in follow mode: reka dismisses a tip when its
       trigger is clicked, which is right for a button (the tip explained the
@@ -214,6 +230,7 @@ onBeforeUnmount(() => {
     -->
     <TooltipRoot
       :open="open"
+      :delay-duration="delay"
       :ignore-non-keyboard-focus="!showOnPointerFocus"
       :disable-hoverable-content="followCursor"
       :disable-closing-trigger="followCursor"
@@ -245,7 +262,7 @@ onBeforeUnmount(() => {
         </TooltipContent>
       </TooltipPortal>
     </TooltipRoot>
-  </TooltipProvider>
+  </component>
 </template>
 
 <style>

package/src/components/LpTooltipProvider.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+/*
+ * Shared timing for every LpTooltip below it: once one tip is showing, moving
+ * to the next opens it without waiting the delay again. Mount once near the
+ * app root; tooltips outside any provider keep working on their own.
+ */
+import { TooltipProvider } from "reka-ui"
+
+withDefaults(
+  defineProps<{
+    /** Milliseconds before the first tip appears on hover. */
+    delay?: number
+    /** How long after a tip closes the next one still opens at once. */
+    skipDelay?: number
+  }>(),
+  { delay: 200, skipDelay: 300 },
+)
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="delay" :skip-delay-duration="skipDelay">
+    <slot />
+  </TooltipProvider>
+</template>

package/src/components/LpTopologyCanvas.vue

@@ -22,7 +22,7 @@ import {
   type NodeTypesObject,
 } from "@vue-flow/core"
 import { MiniMap } from "@vue-flow/minimap"
-import { computed, markRaw, watch, type Component } from "vue"
+import { computed, defineComponent, h, markRaw, watch, type Component } from "vue"
 import LpInfraNode, { type InfraNodeData } from "./LpInfraNode.vue"
 import LpLaneNode from "./LpLaneNode.vue"
 import LpServiceNode, { type ServiceNodeData } from "./LpServiceNode.vue"
@@ -193,7 +193,18 @@ const emit = defineEmits<{
 // their own props (data/selected) which Vue Flow supplies at runtime as part of
 // NodeProps. Widen to `Component` (not the concrete DefineComponent) so the
 // registry types cleanly without a cast.
+// Vue Flow ships no "group" renderer, so a host frame without one warns and
+// draws nothing inside its styled box. The frame only needs its label.
+const GroupNode = defineComponent({
+  props: { label: { type: [String, Object], default: undefined } },
+  setup: (props) => () =>
+    typeof props.label === "string"
+      ? h("div", { class: "px-3 pt-2 text-xs font-medium text-muted" }, props.label)
+      : null,
+})
+
 const nodeTypes: NodeTypesObject = {
+  group: markRaw(GroupNode) as Component,
   infra: markRaw(LpInfraNode) as Component,
   service: markRaw(LpServiceNode) as Component,
   lane: markRaw(LpLaneNode) as Component,

package/src/components/LpUptimeBar.vue

@@ -11,6 +11,7 @@ import LpNumberFlow from "./LpNumberFlow.vue"
 import LpRollingText from "./LpRollingText.vue"
 import LpTooltip from "./LpTooltip.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import { useLabels } from "../composables/useLpConfig"
 
 export type UptimeStatus = "operational" | "degraded" | "down" | "maintenance" | "empty"
 
@@ -39,6 +40,8 @@ const props = withDefaults(
      * `{ degraded: '#ffb84d' }` to recolour just one state.
      */
     colors?: Partial<Record<UptimeStatus, string>>
+    /** Status names, for the tooltip and screen readers. */
+    labels?: Partial<Record<UptimeStatus, string>>
   }>(),
   { showUptime: true },
 )
@@ -64,13 +67,17 @@ const opacityFor = (status: UptimeStatus): number =>
 const colorFor = (status: UptimeStatus): string =>
   props.colors?.[status] ?? defaultColor[status]
 
-const statusLabel: Record<UptimeStatus, string> = {
-  operational: "Operational",
-  degraded: "Degraded",
-  down: "Down",
-  maintenance: "Maintenance",
-  empty: "No data",
-}
+const statusLabel = useLabels(
+  "uptimeBar",
+  {
+    operational: "Operational",
+    degraded: "Degraded",
+    down: "Down",
+    maintenance: "Maintenance",
+    empty: "No data",
+  },
+  () => props.labels,
+)
 
 // Uptime counts only slices with data; operational + maintenance are "up".
 const uptimePct = computed(() => {
@@ -114,9 +121,35 @@ const tip = computed(() => {
   if (i == null) return null
   const seg = props.segments[i]
   if (!seg) return null
-  return { status: seg.status, text: seg.label ?? statusLabel[seg.status] }
+  return { status: seg.status, text: seg.label ?? statusLabel.value[seg.status] }
 })
 
+/*
+ * One Tab stop for the whole bar, arrows to walk it. A quarter's worth of
+ * slices as separate stops made the bar ninety Tab presses to get past.
+ */
+const focusIndex = ref(-1)
+const slots = ref<HTMLElement[]>([])
+const tabStop = computed(() =>
+  focusIndex.value >= 0 && focusIndex.value < props.segments.length
+    ? focusIndex.value
+    : props.segments.length - 1,
+)
+
+function onSlotKeydown(e: KeyboardEvent, i: number) {
+  const last = props.segments.length - 1
+  const next =
+    e.key === "ArrowRight" ? Math.min(last, i + 1)
+    : e.key === "ArrowLeft" ? Math.max(0, i - 1)
+    : e.key === "Home" ? 0
+    : e.key === "End" ? last
+    : -1
+  if (next < 0) return
+  e.preventDefault()
+  focusIndex.value = next
+  slots.value[next]?.focus()
+}
+
 const uptimeDecimals = computed(() => {
   const v = uptimePct.value
   if (v == null) return 0
@@ -168,10 +201,15 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         <button
           v-for="(seg, i) in segments"
           :key="i"
+          ref="slots"
           type="button"
           class="lp-uptime__slot min-w-0 flex-1 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          :tabindex="i === tabStop ? 0 : -1"
           :aria-label="seg.label ?? statusLabel[seg.status]"
           @pointerenter="hovered = i"
+          @focus="focusIndex = i; hovered = i"
+          @blur="hovered === i && (hovered = null)"
+          @keydown="onSlotKeydown($event, i)"
         >
           <span
             class="lp-uptime__mark block h-full rounded-[1px] transition-[opacity,scale] duration-[var(--duration-fast)] motion-reduce:transition-none"

package/src/components/chart.ts

@@ -30,6 +30,62 @@ export interface ChartSeries {
 
 export type ChartAxis = "left" | "right"
 
+/**
+ * A reference level drawn across the plot: a line at `value`, or a band from
+ * `value` to `to`. SLOs, budgets, alert thresholds.
+ */
+export interface ChartThreshold {
+  value: number
+  /** Upper (or lower) edge of a band. Omit for a single line. */
+  to?: number
+  label?: string
+  /** Any CSS colour. Defaults to the strong line token. */
+  color?: string
+  axis?: ChartAxis
+  /** Solid instead of the default dashed line. */
+  solid?: boolean
+}
+
+/**
+ * A vertical marker at one x position: a deploy, an incident, a release.
+ * `at` is a point index or one of the x labels.
+ */
+export interface ChartMarker {
+  at: number | string
+  label?: string
+  color?: string
+}
+
+/** The x index a marker points at, or -1 when it names nothing on the axis. */
+export const markerIndex = (at: number | string, labels: string[], count: number): number => {
+  if (typeof at === "number") return Number.isInteger(at) && at >= 0 && at < count ? at : -1
+  return labels.indexOf(at)
+}
+
+/**
+ * A one-sentence reading of the chart for assistive technology: what is
+ * plotted, over how many points, and each series' range and latest value.
+ */
+export const chartSummary = (
+  series: NormalSeries[],
+  labels: string[],
+  fmt: (s: NormalSeries, v: number) => string,
+  title?: string,
+): string => {
+  const parts: string[] = []
+  const span = labels.length ? `${labels.length} points, ${labels[0]} to ${labels[labels.length - 1]}` : ""
+  parts.push([title, span].filter(Boolean).join(", "))
+  for (const s of series) {
+    const values = s.values.filter((v): v is number => v != null)
+    if (!values.length) continue
+    const last = values[values.length - 1]
+    parts.push(
+      `${s.name}: from ${fmt(s, Math.min(...values))} to ${fmt(s, Math.max(...values))}, latest ${fmt(s, last)}`,
+    )
+  }
+  return parts.filter(Boolean).join(". ")
+}
+
 export interface NormalSeries {
   name: string
   color: string
@@ -592,6 +648,7 @@ export const calloutLabels = (
       return side === "right" ? a : -a
     }
     const list = sides[side].sort((p, q) => rank(p.mid) - rank(q.mid))
+    if (!list.length) continue
 
     /*
      * Resolve collisions by NUDGING, not by stacking.
@@ -676,11 +733,26 @@ export const calloutLabels = (
   return out
 }
 
-/** Compact default tick formatting: 1.2k, 3.4M — never 1200.0000001. */
+/** Compact default tick formatting: 1.2k, 3.4M — never 1200.0000001 or 1000k. */
 export const formatTick = (v: number): string => {
+  if (!Number.isFinite(v)) return String(v)
+  const units: [number, string][] = [
+    [1e3, "k"],
+    [1e6, "M"],
+    [1e9, "B"],
+    [1e12, "T"],
+  ]
   const abs = Math.abs(v)
-  if (abs >= 1e9) return `${Number((v / 1e9).toFixed(1))}B`
-  if (abs >= 1e6) return `${Number((v / 1e6).toFixed(1))}M`
-  if (abs >= 1e3) return `${Number((v / 1e3).toFixed(1))}k`
-  return String(Number(v.toFixed(2)))
+  let i = units.length - 1
+  while (i >= 0 && abs < units[i][0]) i--
+  if (i < 0) {
+    const plain = Number(v.toFixed(2))
+    return Math.abs(plain) >= 1000 ? formatTick(Math.sign(v) * 1000) : String(plain)
+  }
+  const scaled = Number((v / units[i][0]).toFixed(1))
+  // 999 950 rounds to "1000k"; it reads as the next unit up.
+  if (Math.abs(scaled) >= 1000 && i < units.length - 1) {
+    return `${Number((v / units[i + 1][0]).toFixed(1))}${units[i + 1][1]}`
+  }
+  return `${scaled}${units[i][1]}`
 }

package/src/components/codeHighlight.ts

@@ -79,19 +79,67 @@ const BOOLEANS = new Set([
   "Some", "Ok", "Err", // rust common variants read as constants
 ])
 
-// One master regex, alternation ordered so longer/greedier rules win first.
-// Order: comments → strings → numbers → identifiers → punctuation.
-const MASTER = new RegExp(
-  [
-    "(\\/\\/[^\\n]*|#[^\\n]*|\\/\\*[\\s\\S]*?\\*\\/)", // 1 comment
-    "(\"(?:\\\\.|[^\"\\\\])*\"|'(?:\\\\.|[^'\\\\])*'|`(?:\\\\.|[^`\\\\])*`)", // 2 string
-    "(@[A-Za-z_$][\\w$]*)", // 3 annotation (@Override, @ConfigSerializable — JVM)
-    "(\\b\\d[\\d_]*(?:\\.\\d+)?(?:e[+-]?\\d+)?[fFlLdD]?\\b)", // 4 number (JVM suffixes)
-    "([A-Za-z_$][\\w$]*)", // 5 identifier (keyword/bool/func/prop/plain)
-    "([{}()\\[\\];:,.<>=+\\-*/%!&|?]+)", // 6 punctuation
-  ].join("|"),
-  "g",
-)
+/*
+ * Comment syntax is the one thing the shared tokenizer cannot guess: `#` opens
+ * a comment in shell, Python, YAML and TOML but is a private field in
+ * TypeScript, and `//` is a comment in C-family code but part of every URL in a
+ * YAML file. So each language names its own comment forms.
+ */
+type CommentStyle = "c" | "hash" | "html" | "none"
+
+const COMMENTS: Record<CodeLang, CommentStyle> = {
+  ts: "c",
+  js: "c",
+  json: "none",
+  bash: "hash",
+  html: "html",
+  python: "hash",
+  rust: "c",
+  yaml: "hash",
+  toml: "hash",
+  kotlin: "c",
+  java: "c",
+  groovy: "c",
+  plain: "none",
+}
+
+const COMMENT_PATTERN: Record<CommentStyle, string> = {
+  c: "\\/\\/[^\\n]*|\\/\\*[\\s\\S]*?\\*\\/",
+  // A `#` only starts a comment at the start of a word, so `a#b` in a URL or
+  // `${#arr[@]}` in shell stay code.
+  hash: "(?<![\\w$])#[^\\n]*",
+  html: "<!--[\\s\\S]*?-->",
+  none: "(?!)",
+}
+
+/** Where an unterminated block comment opens on a line, and what closes it. */
+const BLOCK: Partial<Record<CommentStyle, { open: string; close: string }>> = {
+  c: { open: "/*", close: "*/" },
+  html: { open: "<!--", close: "-->" },
+}
+
+const masters = new Map<CommentStyle, RegExp>()
+
+// One master regex per comment style, alternation ordered so longer/greedier
+// rules win first. Order: comments → strings → numbers → identifiers → punctuation.
+function masterFor(style: CommentStyle): RegExp {
+  let re = masters.get(style)
+  if (!re) {
+    re = new RegExp(
+      [
+        `(${COMMENT_PATTERN[style]})`, // 1 comment
+        "(\"(?:\\\\.|[^\"\\\\])*\"|'(?:\\\\.|[^'\\\\])*'|`(?:\\\\.|[^`\\\\])*`)", // 2 string
+        "(@[A-Za-z_$][\\w$]*)", // 3 annotation (@Override, @ConfigSerializable — JVM)
+        "(\\b\\d[\\d_]*(?:\\.\\d+)?(?:e[+-]?\\d+)?[fFlLdD]?\\b)", // 4 number (JVM suffixes)
+        "(#?[A-Za-z_$][\\w$]*)", // 5 identifier (keyword/bool/func/prop/plain), incl. #private
+        "([{}()\\[\\];:,.<>=+\\-*/%!&|?]+)", // 6 punctuation
+      ].join("|"),
+      "g",
+    )
+    masters.set(style, re)
+  }
+  return re
+}
 
 function classifyIdent(name: string, before: string, after: string): string {
   if (KEYWORDS.has(name)) return C.keyword
@@ -103,11 +151,13 @@ function classifyIdent(name: string, before: string, after: string): string {
 
 /** Tokenize one line into coloured spans. JSON keys get the property colour. */
 export function tokenizeLine(line: string, lang: CodeLang): Token[] {
+  if (lang === "plain") return line ? [{ text: line, cls: "" }] : []
   const out: Token[] = []
   let last = 0
   let m: RegExpExecArray | null
-  MASTER.lastIndex = 0
-  while ((m = MASTER.exec(line)) !== null) {
+  const master = masterFor(COMMENTS[lang])
+  master.lastIndex = 0
+  while ((m = master.exec(line)) !== null) {
     if (m.index > last) out.push({ text: line.slice(last, m.index), cls: "" })
     const [full, comment, str, annotation, num, ident, punct] = m
     if (comment != null) out.push({ text: full, cls: C.comment })
@@ -135,3 +185,49 @@ export function tokenizeLine(line: string, lang: CodeLang): Token[] {
   if (last < line.length) out.push({ text: line.slice(last), cls: "" })
   return out
 }
+
+/**
+ * Tokenize a whole snippet, carrying a block comment (`/* … *\/`, `<!-- … -->`)
+ * across the lines it spans. `tokenizeLine` alone sees each line in isolation
+ * and coloured the middle of a doc comment as code.
+ */
+export function tokenizeLines(lines: string[], lang: CodeLang): Token[][] {
+  const block = BLOCK[COMMENTS[lang]]
+  if (!block) return lines.map((line) => tokenizeLine(line, lang))
+  const out: Token[][] = []
+  let open = false
+  for (const line of lines) {
+    let rest = line
+    const tokens: Token[] = []
+    if (open) {
+      const end = rest.indexOf(block.close)
+      if (end === -1) {
+        out.push(rest ? [{ text: rest, cls: C.comment }] : [])
+        continue
+      }
+      tokens.push({ text: rest.slice(0, end + block.close.length), cls: C.comment })
+      rest = rest.slice(end + block.close.length)
+      open = false
+    }
+    const lineTokens = tokenizeLine(rest, lang)
+    // A closed comment is already a comment token, so an opener left in plain
+    // code is one the line never closes: from there on, the line is comment.
+    const at = lineTokens.findIndex(
+      (t) => t.cls !== C.comment && t.cls !== C.string && t.text.includes(block.open),
+    )
+    if (at >= 0) {
+      const cut = lineTokens[at].text.indexOf(block.open)
+      const tail = lineTokens
+        .slice(at)
+        .map((t) => t.text)
+        .join("")
+        .slice(cut)
+      tokens.push(...lineTokens.slice(0, at))
+      if (cut > 0) tokens.push({ text: lineTokens[at].text.slice(0, cut), cls: lineTokens[at].cls })
+      tokens.push({ text: tail, cls: C.comment })
+      open = true
+    } else tokens.push(...lineTokens)
+    out.push(tokens)
+  }
+  return out
+}