@leavepulse/ui 0.68.0 → 0.70.0

package/src/components/LpSelect.vue

@@ -35,16 +35,18 @@ import {
   ComboboxTrigger,
   ComboboxViewport,
 } from "reka-ui"
-import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from "vue"
+import { computed, nextTick, reactive, ref, useAttrs, useId, watch } from "vue"
 import { useFieldControl } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
-import { OPTION_ITEM, POPOVER_PANEL } from "./dropdown"
+import { OPTION_ITEM, optionStagger, POPOVER_PANEL } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
+import OptionContent from "./OptionContent.vue"
 import LpRollingText from "./LpRollingText.vue"
-import LpShift from "./LpShift.vue"
 import type { LpOptionBase, OptionSelection } from "./options"
 import { fitChips, toggledValues } from "./select"
+import { useOutsideGuard, usePortalTarget } from "../composables/useView"
+import { useResizeObserver } from "../composables/useResizeObserver"
 
 export type SelectValue = string | number
 
@@ -143,6 +145,8 @@ const emit = defineEmits<{
   (e: "change", value: V): void
   // Search input text (for `v-model:searchTerm` / server-side search).
   (e: "update:searchTerm", value: string): void
+  /** Focus left the whole field (not into its own list or clear button). */
+  (e: "blur", event: FocusEvent): void
 }>()
 
 // Server-side search is active when the parent binds searchTerm.
@@ -164,10 +168,38 @@ const query = computed<string>({
 // This is not enough on its own: reka seeds the box on *select*, not on open,
 // so the next opening filters before this runs. `reset-search-term-on-select`
 // below is what stops the seeding; this keeps a stale term from surviving.
-function onOpenChange(_open: boolean) {
+const isOpen = ref(false)
+function onOpenChange(open: boolean) {
+  isOpen.value = open
   query.value = ""
 }
 
+// Leaving the field, not moving between its parts: the trigger and the list
+// are marked with one id, because the list is portalled away from the trigger
+// and a check on the trigger alone either missed the search box or took a
+// step into it for leaving.
+const partOf = `lp-select-${useId()}`
+function onFocusOut(event: FocusEvent) {
+  const next = event.relatedTarget as Element | null
+  const inside = !!next && typeof next.closest === "function" && !!next.closest(`[data-lp-select-part="${partOf}"]`)
+  if (!inside) emit("blur", event)
+}
+
+/*
+ * The trigger's name. reka hard-codes aria-label="Show popup" on it, which hid
+ * the field's label and the chosen value; aria-labelledby outranks aria-label,
+ * so inside a labelled field the name is the label plus the value. On its own,
+ * the consumer's aria-label, else the value or placeholder.
+ */
+const attrs = useAttrs()
+const valueId = `lp-select-${useId()}-value`
+const valueText = computed(() => (chips.value.length ? chipNames.value : displayLabel.value || placeholderText.value))
+const triggerName = computed(() =>
+  field.value.labelId
+    ? { "aria-labelledby": `${field.value.labelId} ${valueId}`, "aria-label": undefined }
+    : { "aria-label": (attrs["aria-label"] as string | undefined) ?? valueText.value },
+)
+
 // reka's Combobox forbids an empty-string item value (it reserves "" for
 // "cleared"). An empty-string option is legitimate for us (e.g. "Any edition"),
 // so we encode "" to a sentinel for reka and decode it back at the boundary —
@@ -271,6 +303,12 @@ const displayLabel = computed(() => {
   return current.value?.label ?? ""
 })
 
+// What makes the shown pick "another one": its name, hint and picture together.
+const rollKey = computed(() => {
+  const c = current.value
+  return c ? [c.label, c.hint ?? "", c.image ?? c.icon ?? ""].join("\u0000") : `\u0000${placeholderText.value}`
+})
+
 /*
  * Chips collapse to "+N" when the row runs out of room. Every chip is drawn a
  * second time in an invisible probe row at its natural width; the visible row
@@ -296,16 +334,8 @@ function measure() {
   )
 }
 
-let rowObserver: ResizeObserver | null = null
-watch(chipRow, (row) => {
-  rowObserver?.disconnect()
-  rowObserver = null
-  if (!row || typeof ResizeObserver === "undefined") return
-  rowObserver = new ResizeObserver(() => measure())
-  rowObserver.observe(row)
-})
+useResizeObserver(chipRow, () => measure())
 watch(chips, () => void nextTick(measure), { flush: "post", deep: true })
-onBeforeUnmount(() => rowObserver?.disconnect())
 
 const shownChips = computed(() => chips.value.slice(0, fit.value))
 const hiddenCount = computed(() => modelList.value.length - shownChips.value.length)
@@ -334,8 +364,15 @@ function onUpdate(value: unknown) {
 }
 
 function clear() {
+  if (field.value.disabled) return
   emit("update:modelValue", (props.multiple ? [] : undefined) as Model)
 }
+
+// Overlays open in the window this component renders in (an LpFrame's, inside one).
+const portalTo = usePortalTarget()
+// What happens in another document (the page around a frame, or a frame in
+// the page) is not "outside" for this layer.
+const guardOutside = useOutsideGuard()
 </script>
 
 <template>
@@ -349,6 +386,7 @@ function clear() {
     :model-value="comboModel"
     :multiple="multiple"
     :disabled="field.disabled"
+    :required="field.required"
     :ignore-filter="true"
     :reset-search-term-on-select="false"
     :reset-search-term-on-blur="false"
@@ -358,9 +396,12 @@ function clear() {
     @update:open="onOpenChange"
   >
     <ComboboxAnchor
+      :data-lp-select-part="partOf"
+      @focusout="onFocusOut"
       :class="[
         anchorHeight,
-        'group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-sm text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55',
+        'group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-sm text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2',
+        field.disabled && 'cursor-not-allowed opacity-55',
         field.invalid
           ? 'border-danger focus-within:border-danger focus-within:ring-danger-soft'
           : 'border-line focus-within:border-brand focus-within:ring-ring',
@@ -370,8 +411,10 @@ function clear() {
            will not go narrower than its content without it, so a long
            placeholder stretched the whole field past the viewport instead of
            being cut short. -->
+      <span :id="valueId" hidden>{{ valueText }}</span>
       <ComboboxTrigger
         :id="field.id"
+        v-bind="triggerName"
         :aria-invalid="field.invalid || undefined"
         :aria-describedby="field.describedBy"
         class="flex min-w-0 flex-1 items-center gap-2 outline-none"
@@ -429,52 +472,28 @@ function clear() {
           </span>
         </span>
         <template v-else>
-          <!-- The pick's picture or icon eases in beside the name; the box it
-               sits in grows rather than shoving the name over in one frame. -->
-          <LpShift axis="width" class="shrink-0">
-            <Transition
-              mode="out-in"
-              enter-active-class="transition-[opacity,scale] duration-[var(--duration-fast)] motion-reduce:transition-none"
-              leave-active-class="transition-[opacity,scale] duration-[var(--duration-fast)] motion-reduce:transition-none"
-              enter-from-class="scale-75 opacity-0"
-              leave-to-class="scale-75 opacity-0"
-            >
+          <!-- The pick turns over as one piece: its picture, name and hint
+               leave together and the next ones arrive together. Animated
+               apart (a fading picture, a rolling name, a cross-faded hint)
+               they ran at three speeds, and for a moment the old hint stood
+               beside the new one and shoved the row. -->
+          <LpRollingText :value="rollKey" align="start" class="min-w-0 flex-1">
+            <span class="flex min-w-0 items-center gap-2">
               <img
                 v-if="current?.image"
-                :key="current.image"
                 :src="current.image"
                 alt=""
-                class="block size-5 rounded-full object-cover"
-              />
-              <LpIcon
-                v-else-if="current?.icon"
-                :key="current.icon"
-                :name="current.icon"
-                :size="16"
-                class="block text-muted"
+                class="block size-5 shrink-0 rounded-full object-cover"
               />
-            </Transition>
-          </LpShift>
-          <!-- The choice rolls in rather than swapping, as the kit's other
-               changing labels do. -->
-          <LpRollingText
-            :value="displayLabel || placeholderText"
-            align="start"
-            class="min-w-0"
-            :class="displayLabel ? '' : 'text-muted'"
-          />
-          <Transition
-            enter-active-class="transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none"
-            leave-active-class="transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none"
-            enter-from-class="opacity-0"
-            leave-to-class="opacity-0"
-          >
-            <span v-if="current?.hint" :key="current.hint" class="min-w-0 truncate text-muted">{{ current.hint }}</span>
-          </Transition>
+              <LpIcon v-else-if="current?.icon" :name="current.icon" :size="16" class="block shrink-0 text-muted" />
+              <span class="min-w-0 truncate" :class="displayLabel ? '' : 'text-muted'">{{ displayLabel || placeholderText }}</span>
+              <span v-if="current?.hint" class="min-w-0 truncate text-muted">{{ current.hint }}</span>
+            </span>
+          </LpRollingText>
         </template>
       </ComboboxTrigger>
       <button
-        v-if="clearable && hasValue"
+        v-if="clearable && hasValue && !field.disabled"
         type="button"
         class="group flex shrink-0 items-center text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink"
         :aria-label="labels.clear"
@@ -507,8 +526,12 @@ function clear() {
       </ComboboxTrigger>
     </ComboboxAnchor>
 
-    <ComboboxPortal>
+    <ComboboxPortal :to="portalTo">
       <ComboboxContent
+        :data-lp-select-part="partOf"
+        @focusout="onFocusOut"
+        @interact-outside="guardOutside"
+        @escape-key-down="guardOutside"
         position="popper"
         :side-offset="6"
         :class="[POPOVER_PANEL, 'z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden']"
@@ -535,19 +558,10 @@ function clear() {
             :key="String(opt.value)"
             :value="encode(opt.value)"
             :disabled="opt.disabled"
-            :style="{ animationDelay: `${Math.min(i, 12) * 22}ms` }"
+            :style="optionStagger(i)"
             :class="[OPTION_ITEM, 'justify-between data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50']"
           >
-            <span class="flex min-w-0 items-center gap-2.5">
-              <img v-if="opt.image" :src="opt.image" alt="" class="size-6 shrink-0 rounded-full object-cover" />
-              <LpIcon v-else-if="opt.icon" :name="opt.icon" :size="16" class="shrink-0 text-muted" />
-              <span class="flex min-w-0 flex-col">
-                <span class="truncate">{{ opt.label }}</span>
-                <span v-if="opt.description" class="truncate text-xs text-muted">
-                  {{ opt.description }}
-                </span>
-              </span>
-            </span>
+            <OptionContent :option="opt" />
             <ComboboxItemIndicator class="flex shrink-0 items-center text-brand">
               <LpIcon name="lucide:check" :size="16" />
             </ComboboxItemIndicator>

package/src/components/LpShaderBackdrop.vue

@@ -0,0 +1,434 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * A slowly moving decorative background, drawn on the GPU: behind a sign-in
+ * screen, a hero, an empty state, a launcher's home. It fills the box it is
+ * put in (`absolute inset-0`, so position the parent) and takes no pointer
+ * events.
+ *
+ *   <section class="relative">
+ *     <LpShaderBackdrop preset="aurora" />
+ *     …content…
+ *   </section>
+ *
+ * Looks (`preset`, see shaderBackdrop.ts): `aurora` (flowing bands of light),
+ * `silk` (folded sheen), `grain` (drifting colour under film grain), `dots`
+ * (a dot grid with a travelling ripple). All are coloured from the theme's
+ * tokens and follow a theme change, blending to the new colours.
+ *
+ * What makes it safe to drop in anywhere:
+ * - A CSS still of the same look is always underneath. It is what shows
+ *   while the first frame is drawn, and instead of the canvas where WebGL is
+ *   missing, software-only, loses its context, or cannot keep up (judged on
+ *   the first second of frames) — the cases that occur on WebKitGTK, where the
+ *   kit's desktop shells run. The page looks the same; it only stops moving.
+ * - Reduced motion gets the still, without creating a GL context at all.
+ * - It draws only while someone can see it: off-screen (IntersectionObserver),
+ *   in a hidden tab, or `paused`, the loop stops. Frames are capped (`fps`),
+ *   since a background gains nothing from 120 a second.
+ * - Unmounting releases the GL context, so a page that mounts and unmounts
+ *   backdrops does not run into the browser's limit on live contexts.
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
+import { parseColor } from "./color"
+import { approach, frameDue, FRAGMENT_HEADER, PRESETS, tooSlow, VERTEX_SHADER, type ShaderPreset, type Vec3 } from "./shaderBackdrop"
+import { isBrokenBackdropEngine } from "../theme/backdrop"
+import { durationToken } from "../composables/easing"
+import { useInView } from "../composables/useInView"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { usePrefersReducedMotion } from "../composables/useReducedMotion"
+import { useResizeObserver } from "../composables/useResizeObserver"
+
+const props = withDefaults(
+  defineProps<{
+    preset?: ShaderPreset
+    /** How strongly the theme colours show over the surface, 0–1. Lower for a backdrop under body text. */
+    intensity?: number
+    /** Motion speed; 1 is a calm drift, 0.5 half as fast. */
+    speed?: number
+    /** Frame cap. 30 is smooth for slow motion and half the work of 60. */
+    fps?: number
+    /** Hold the current frame. */
+    paused?: boolean
+    /** Always show the CSS still, never start WebGL: for a low-power mode or a screenshot. */
+    still?: boolean
+  }>(),
+  { preset: "aurora", intensity: 0.7, speed: 1, fps: 30, paused: false, still: false },
+)
+
+const emit = defineEmits<{
+  /** WebGL could not be used (missing, too slow, context lost); the still is showing. Useful to log, not to act on. */
+  (e: "fallback", reason: "unavailable" | "slow" | "lost" | "compile"): void
+}>()
+
+/*
+ * Whether anyone can see it (on screen, in a visible tab) and whether the OS
+ * asks for less motion are the kit's own questions (useInView,
+ * usePrefersReducedMotion); the root element is the one watched.
+ */
+const { el: root, inView } = useInView()
+const reduced = usePrefersReducedMotion()
+const canvas = ref<HTMLCanvasElement | null>(null)
+/** Bumped whenever a context is released: a canvas whose context was lost cannot get a new one. */
+const canvasKey = ref(0)
+
+const failed = ref(false)
+/** The canvas holds a finished frame of the current look and is faded in over the still. */
+const shown = ref(false)
+
+const wantGl = computed(() => !props.still && !reduced.value && !failed.value)
+const animating = computed(() => !props.paused && inView.value)
+
+/*
+ * WebKitGTK composites on the CPU more often than not. There the canvas is
+ * drawn at one device pixel per CSS pixel and at most 24 frames a second,
+ * which keeps the look and halves the cost again.
+ */
+const weakEngine = typeof navigator !== "undefined" && isBrokenBackdropEngine()
+
+const fallbackStyle = computed(() => ({ background: PRESETS[props.preset].fallback, opacity: Math.min(1, clamp01(props.intensity) * 1.15) }))
+
+function clamp01(n: number) {
+  return Math.max(0, Math.min(1, n))
+}
+
+// ── Theme colours ───────────────────────────────────────────────────────────
+
+const TOKENS = ["surface", "brand", "accent", "action", "ink"] as const
+type Palette = Record<(typeof TOKENS)[number], Vec3>
+
+let probe: HTMLSpanElement | null = null
+let paint: CanvasRenderingContext2D | null = null
+
+/*
+ * A token's colour as numbers. The computed `color` of a probe styled with
+ * the variable resolves any scoped override and any colour syntax a theme
+ * uses; rgb() is parsed directly, and anything newer (color(), oklch()) is
+ * handed to a 2D canvas, which converts whatever the engine itself accepts.
+ */
+function tokenColor(name: string): Vec3 {
+  if (!probe || !root.value) return [0, 0, 0]
+  probe.style.color = `var(--color-${name})`
+  const css = getComputedStyle(probe).color
+  const rgb = parseColor(css)
+  if (rgb) return [rgb.r / 255, rgb.g / 255, rgb.b / 255]
+  paint ??= document.createElement("canvas").getContext("2d", { willReadFrequently: true })
+  if (!paint) return [0, 0, 0]
+  paint.clearRect(0, 0, 1, 1)
+  paint.fillStyle = "#000"
+  paint.fillStyle = css
+  paint.fillRect(0, 0, 1, 1)
+  const [r, g, b] = paint.getImageData(0, 0, 1, 1).data
+  return [r / 255, g / 255, b / 255]
+}
+
+function readPalette(): Palette {
+  const out = {} as Palette
+  for (const name of TOKENS) out[name] = tokenColor(name)
+  return out
+}
+
+let target: Palette | null = null
+let current: Palette | null = null
+
+function refreshPalette() {
+  target = readPalette()
+  // Mid-animation the loop blends toward it; otherwise there is no next frame to blend in, so it lands now.
+  if (!current || !running) {
+    current = { ...target }
+    drawFrame()
+  }
+}
+
+// ── GL ──────────────────────────────────────────────────────────────────────
+
+let gl: WebGLRenderingContext | null = null
+let program: WebGLProgram | null = null
+let buffer: WebGLBuffer | null = null
+let uniforms: Record<string, WebGLUniformLocation | null> = {}
+
+function compile(type: number, source: string): WebGLShader | null {
+  if (!gl) return null
+  const shader = gl.createShader(type)
+  if (!shader) return null
+  gl.shaderSource(shader, source)
+  gl.compileShader(shader)
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader)
+    return null
+  }
+  return shader
+}
+
+function useProgram(preset: ShaderPreset): boolean {
+  if (!gl) return false
+  if (program) gl.deleteProgram(program)
+  program = null
+  const vs = compile(gl.VERTEX_SHADER, VERTEX_SHADER)
+  const fs = compile(gl.FRAGMENT_SHADER, FRAGMENT_HEADER + PRESETS[preset].fragment)
+  if (!vs || !fs) return false
+  const next = gl.createProgram()
+  if (!next) return false
+  gl.attachShader(next, vs)
+  gl.attachShader(next, fs)
+  gl.linkProgram(next)
+  // Linked programs keep what they need; the shader objects can go.
+  gl.deleteShader(vs)
+  gl.deleteShader(fs)
+  if (!gl.getProgramParameter(next, gl.LINK_STATUS)) {
+    gl.deleteProgram(next)
+    return false
+  }
+  program = next
+  gl.useProgram(program)
+  const at = gl.getAttribLocation(program, "p")
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+  gl.enableVertexAttribArray(at)
+  gl.vertexAttribPointer(at, 2, gl.FLOAT, false, 0, 0)
+  uniforms = {}
+  for (const name of ["u_res", "u_time", "u_px", "u_k", "u_bg", "u_brand", "u_accent", "u_action", "u_ink"]) {
+    uniforms[name] = gl.getUniformLocation(program, name)
+  }
+  sizeCanvas()
+  return true
+}
+
+let pixelRatio = 1
+
+function sizeCanvas() {
+  const el = canvas.value
+  if (!el) return
+  const dpr = Math.min(weakEngine ? 1 : 2, window.devicePixelRatio || 1)
+  pixelRatio = dpr * PRESETS[props.preset].scale
+  const w = Math.max(1, Math.round(el.clientWidth * pixelRatio))
+  const h = Math.max(1, Math.round(el.clientHeight * pixelRatio))
+  if (el.width !== w || el.height !== h) {
+    el.width = w
+    el.height = h
+  }
+  gl?.viewport(0, 0, w, h)
+}
+
+let time = 0
+
+function drawFrame() {
+  if (!gl || !program || !current || !canvas.value) return
+  const c = current
+  gl.uniform2f(uniforms.u_res, canvas.value.width, canvas.value.height)
+  gl.uniform1f(uniforms.u_time, time)
+  gl.uniform1f(uniforms.u_px, pixelRatio)
+  gl.uniform1f(uniforms.u_k, clamp01(props.intensity))
+  gl.uniform3fv(uniforms.u_bg, c.surface)
+  gl.uniform3fv(uniforms.u_brand, c.brand)
+  gl.uniform3fv(uniforms.u_accent, c.accent)
+  gl.uniform3fv(uniforms.u_action, c.action)
+  gl.uniform3fv(uniforms.u_ink, c.ink)
+  gl.drawArrays(gl.TRIANGLES, 0, 3)
+}
+
+function giveUp(reason: "unavailable" | "slow" | "lost" | "compile") {
+  failed.value = true
+  emit("fallback", reason)
+}
+
+function onContextLost() {
+  release()
+  giveUp("lost")
+}
+
+function start() {
+  const el = canvas.value
+  if (!el || gl) return
+  /*
+   * `failIfMajorPerformanceCaveat` refuses a software rasteriser outright:
+   * a CPU-drawn full-screen shader is exactly the load a backdrop must not
+   * put on a machine that has no GPU to spare.
+   */
+  const context = el.getContext("webgl", {
+    alpha: false,
+    antialias: false,
+    depth: false,
+    stencil: false,
+    preserveDrawingBuffer: false,
+    powerPreference: "low-power",
+    failIfMajorPerformanceCaveat: true,
+  })
+  if (!context) return giveUp("unavailable")
+  gl = context
+  el.addEventListener("webglcontextlost", onContextLost)
+  buffer = gl.createBuffer()
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+  // One triangle that covers the whole viewport: cheaper than a quad, no seam.
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW)
+  if (!useProgram(props.preset)) {
+    release()
+    return giveUp("compile")
+  }
+  intervals = []
+  refreshPalette()
+  drawFrame()
+  shown.value = true
+  sync()
+}
+
+/** Free the context and everything on it; the next start gets a fresh canvas. */
+function release() {
+  stop()
+  shown.value = false
+  const el = canvas.value
+  el?.removeEventListener("webglcontextlost", onContextLost)
+  if (gl) {
+    if (program) gl.deleteProgram(program)
+    if (buffer) gl.deleteBuffer(buffer)
+    gl.getExtension("WEBGL_lose_context")?.loseContext()
+    canvasKey.value++
+  }
+  gl = null
+  program = null
+  buffer = null
+  current = null
+}
+
+// ── Loop ────────────────────────────────────────────────────────────────────
+
+let frame = 0
+let running = false
+let last = 0
+let intervals: number[] = []
+
+function tick(now: number) {
+  frame = requestAnimationFrame(tick)
+  const cap = weakEngine ? Math.min(props.fps, 24) : props.fps
+  if (!frameDue(now, last, cap)) return
+  const dt = last ? now - last : 0
+  last = now
+  // A long gap (a stalled tab) is skipped over, not caught up on.
+  time += (Math.min(dt, 100) / 1000) * props.speed
+  if (current && target) {
+    const k = Math.min(1, dt / 160)
+    for (const name of TOKENS) current[name] = approach(current[name], target[name], k)
+  }
+  drawFrame()
+  // The first second of drawing decides whether the engine can carry it.
+  if (dt > 0 && dt < 500 && intervals.length < 30) {
+    intervals.push(dt)
+    if (tooSlow(intervals, cap)) {
+      release()
+      giveUp("slow")
+    }
+  }
+}
+
+function stop() {
+  running = false
+  if (frame) cancelAnimationFrame(frame)
+  frame = 0
+}
+
+function sync() {
+  if (gl && animating.value) {
+    if (running) return
+    running = true
+    last = 0
+    frame = requestAnimationFrame(tick)
+  } else stop()
+}
+
+// ── Observers ───────────────────────────────────────────────────────────────
+
+let themeObserver: MutationObserver | undefined
+let schemeQuery: MediaQueryList | undefined
+
+useResizeObserver(root, () => {
+  sizeCanvas()
+  drawFrame()
+})
+
+onMounted(() => {
+  probe = document.createElement("span")
+  probe.style.display = "none"
+  root.value?.appendChild(probe)
+
+  // Themes are applied as variables and attributes on <html>; a scheme switch can also come from the OS.
+  themeObserver = new MutationObserver(() => {
+    if (gl) refreshPalette()
+  })
+  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["style", "class", "data-theme", "data-theme-mode"] })
+  schemeQuery = window.matchMedia?.("(prefers-color-scheme: dark)")
+  schemeQuery?.addEventListener("change", refreshPalette)
+
+  if (wantGl.value) start()
+})
+
+watch(wantGl, (on) => {
+  if (on) requestAnimationFrame(start)
+  else release()
+})
+watch(animating, sync)
+
+/*
+ * A new look fades the canvas out to the still of the new look (which has
+ * crossfaded in underneath), swaps the shader there, and fades back in.
+ */
+let swapTimer = 0
+watch(
+  () => props.preset,
+  (preset) => {
+    if (!gl) return
+    shown.value = false
+    window.clearTimeout(swapTimer)
+    swapTimer = window.setTimeout(() => {
+      if (!gl) return
+      if (!useProgram(preset)) {
+        release()
+        return giveUp("compile")
+      }
+      drawFrame()
+      shown.value = true
+    }, durationToken("duration-medium"))
+  },
+)
+watch(
+  () => props.intensity,
+  () => {
+    if (!running) drawFrame()
+  },
+)
+
+onBeforeUnmount(() => {
+  window.clearTimeout(swapTimer)
+  release()
+  themeObserver?.disconnect()
+  schemeQuery?.removeEventListener("change", refreshPalette)
+  probe?.remove()
+})
+
+const { class: rootClass, attrs: rest } = useMergedAttrs("pointer-events-none absolute inset-0 overflow-hidden bg-surface")
+</script>
+
+<template>
+  <div ref="root" :class="rootClass" v-bind="rest" aria-hidden="true" :data-mode="shown ? 'gl' : 'css'">
+    <Transition
+      enter-active-class="transition-opacity duration-medium ease-out motion-reduce:transition-none"
+      leave-active-class="transition-opacity duration-medium ease-out motion-reduce:transition-none"
+      enter-from-class="opacity-0"
+      leave-to-class="opacity-0"
+    >
+      <div :key="preset" class="absolute inset-0">
+        <div class="absolute inset-0 transition-opacity duration-medium" :style="fallbackStyle" />
+      </div>
+    </Transition>
+    <canvas
+      :key="canvasKey"
+      ref="canvas"
+      class="absolute inset-0 size-full transition-opacity duration-medium ease-out"
+      :class="shown ? 'opacity-100' : 'opacity-0'"
+    />
+  </div>
+</template>