@leavepulse/ui 0.77.3 → 0.78.1

package/src/components/LpRangeSlider.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import SliderRail from "./SliderRail.vue"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * Two thumbs on one track: a range rather than a value. A price "from – to",
@@ -14,8 +15,8 @@ import { usePaletteControl, type PaletteControlOptions } from "../composables/us
  * Each thumb can carry a label above it (`format`), shown while it is hovered,
  * focused or dragged, so the numbers are readable without a second readout.
  */
-import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "reka-ui"
-import { useFieldControl } from "../composables/useField"
+import { SliderRoot, SliderThumb } from "reka-ui"
+import { useFieldControl, mergeDescribedBy } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { SLIDER_GLIDE, useSliderDrag } from "./slider"
 
@@ -87,16 +88,14 @@ usePaletteControl({ disabled: () => field.value.disabled })
     @update:model-value="onUpdate"
     @value-commit="onCommit"
   >
-    <SliderTrack class="relative h-1.5 grow overflow-hidden rounded-pill bg-surface-soft">
-      <SliderRange class="absolute h-full rounded-pill bg-brand" />
-    </SliderTrack>
+    <SliderRail />
     <SliderThumb
       v-for="index in [0, 1] as const"
       :key="index"
       :id="index === 0 ? field.id : undefined"
       :aria-label="ariaLabels?.[index]"
       :aria-labelledby="ariaLabels ? undefined : field.labelId"
-      :aria-describedby="field.describedBy"
+      :aria-describedby="mergeDescribedBy(rest['aria-describedby'], field.describedBy)"
       :class="thumbClass"
     >
       <span v-if="format" :class="labelClass">{{ format(props.modelValue[index]) }}</span>

package/src/components/LpRevealOnScroll.vue

@@ -85,7 +85,7 @@ function play(node: HTMLElement) {
   if (props.immediate || prefersReducedMotion() || typeof node.animate !== "function") return
   const from = revealFrom(props.preset, props.direction, props.distance)
   const frames = [from, revealTo(from)]
-  const easing = easingToken("ease-emphasized")
+  const easing = easingToken("ease-emphasized", undefined, node)
   // `backwards` holds each target in its hidden state through its delay, so a
   // staggered child does not flash in before its turn.
   const targets = props.stagger > 0 ? Array.from(node.children) : [node]

package/src/components/LpScrollArea.vue

@@ -13,7 +13,20 @@ import {
   ScrollAreaThumb,
   ScrollAreaViewport,
 } from "reka-ui"
-import { prefersReducedMotion } from "../composables/easing"
+import { nodeWindow } from "../composables/useView"
+import {
+  BAR_FADE,
+  BAR_X,
+  BAR_X_SIZE,
+  BAR_Y,
+  BAR_Y_SIZE,
+  pageToward,
+  SCROLL_HIDE_DELAY_MS,
+  THUMB_X,
+  THUMB_X_ROUND,
+  THUMB_Y,
+  THUMB_Y_ROUND,
+} from "./scrollbar"
 
 // `fade` softens whichever of the top/bottom edges currently has content beyond
 // it, so a clipped list reads as continuing rather than as cut off. On by
@@ -79,8 +92,7 @@ function onViewportBlur() {
 // `opacity-0` + the hidden-state fade is what keeps the bar invisible at rest:
 // with force-mount the element stays in the DOM, so a one-shot fade-out alone
 // would snap back to visible once the animation finished.
-const barFade =
-  "opacity-0 data-[state=visible]:animate-[fade-in_180ms_ease] data-[state=visible]:opacity-100 data-[state=hidden]:animate-[fade-out_240ms_ease]"
+const edge = computed(() => (props.floating ? "floating" : "wall"))
 
 // Dragging the thumb pulls the pointer off the bar and across the content, and
 // the browser reads that as a text selection — the rows highlight blue while
@@ -122,7 +134,9 @@ function measureEdges(el: HTMLElement) {
  * it has to come off the element.
  *
  * Kept in sync with content size rather than set once: a list that fills in
- * later becomes scrollable without anything else changing.
+ * later becomes scrollable without anything else changing. The viewport's
+ * tabindex is therefore this component's alone; `tabindex` on LpScrollArea
+ * lands on its root and does not reach it.
  */
 function syncViewportFocusable(el: HTMLElement) {
   const scrollable = el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth
@@ -161,8 +175,10 @@ watch(
     }
     remeasure()
 
-    if (typeof ResizeObserver !== "undefined") {
-      edgeResize = new ResizeObserver(remeasure)
+    // The element's own window: the observers belong to the realm they watch.
+    const win = nodeWindow(el)
+    if (win.ResizeObserver) {
+      edgeResize = new win.ResizeObserver(remeasure)
       edgeResize.observe(el)
       // Watching the children too, since a grid that reflows into more rows
       // grows the content box without the viewport's own size moving.
@@ -171,8 +187,8 @@ watch(
     // Rows arriving after the first paint are the common case — a list waiting
     // on a query renders empty, and observing only the boxes that existed then
     // left the fade off until something else happened to trigger a measure.
-    if (typeof MutationObserver !== "undefined") {
-      edgeMutation = new MutationObserver(() => {
+    if (win.MutationObserver) {
+      edgeMutation = new win.MutationObserver(() => {
         if (edgeResize) {
           edgeResize.disconnect()
           edgeResize.observe(el)
@@ -186,16 +202,15 @@ watch(
   { immediate: true, flush: "post" },
 )
 
-onBeforeUnmount(stopEdgeWatch)
+onBeforeUnmount(() => {
+  stopEdgeWatch()
+  stopThumbDrag?.()
+})
 
 /*
- * A press on the bar beside the thumb. reka treats any press on the track as
- * "put the thumb's middle under the pointer" and sets the scroll in one go,
- * so a press that just missed the narrow thumb yanked the content by half a
- * thumb, and a press further away teleported it. Like a native bar, a press
- * off the thumb now pages one viewport towards the pointer, smoothly; the
- * thumb itself has a hit area as wide as the bar (see its `before:`), so a
- * press that meant to grab it does.
+ * A press on the bar beside the thumb pages towards the pointer (pageToward)
+ * instead of reka's jump; the thumb's hit area is as wide as the bar (its
+ * `before:`), so a press that meant to grab it does.
  */
 function onTrackPointerDown(event: PointerEvent, axis: "x" | "y") {
   const el = viewportEl.value
@@ -205,23 +220,29 @@ function onTrackPointerDown(event: PointerEvent, axis: "x" | "y") {
   event.preventDefault()
   event.stopImmediatePropagation()
   const rect = thumb.getBoundingClientRect()
-  const before = axis === "y" ? event.clientY < rect.top : event.clientX < rect.left
-  const step = (axis === "y" ? el.clientHeight : el.clientWidth) * 0.85 * (before ? -1 : 1)
-  const behavior = prefersReducedMotion() ? "auto" : "smooth"
-  el.scrollBy(axis === "y" ? { top: step, behavior } : { left: step, behavior })
+  pageToward(el, axis, axis === "y" ? event.clientY < rect.top : event.clientX < rect.left)
 }
 
-function onThumbPointerDown() {
+let stopThumbDrag: (() => void) | null = null
+
+function onThumbPointerDown(event: PointerEvent) {
   dragging.value = true
+  stopThumbDrag?.()
+  // The thumb's own window: inside an LpFrame the page's never hears the release.
+  const win = nodeWindow(event.currentTarget as Node)
   const stop = () => {
     dragging.value = false
-    window.removeEventListener("pointerup", stop)
-    window.removeEventListener("pointercancel", stop)
+    win.removeEventListener("pointerup", stop)
+    win.removeEventListener("pointercancel", stop)
+    win.removeEventListener("lostpointercapture", stop)
+    stopThumbDrag = null
   }
+  stopThumbDrag = stop
   // Bound on the window: the pointer is captured by the thumb, and the release
   // routinely happens far outside the scroll area.
-  window.addEventListener("pointerup", stop)
-  window.addEventListener("pointercancel", stop)
+  win.addEventListener("pointerup", stop)
+  win.addEventListener("pointercancel", stop)
+  win.addEventListener("lostpointercapture", stop)
 }
 </script>
 
@@ -236,7 +257,7 @@ function onThumbPointerDown() {
     class="relative flex flex-col overflow-hidden"
     :class="dragging ? 'select-none' : undefined"
     type="hover"
-    :scroll-hide-delay="500"
+    :scroll-hide-delay="SCROLL_HIDE_DELAY_MS"
   >
     <!-- The bar itself is a pointer target far wider than it looks: the visible
          rail is the thumb, sized below, while the track pads it out to a
@@ -256,8 +277,8 @@ function onThumbPointerDown() {
     <ScrollAreaScrollbar
       orientation="vertical"
       force-mount
-      class="group z-1 flex touch-none select-none justify-end pl-2.5"
-      :class="[barFade, floating ? 'w-4 py-1 pr-1' : 'w-3.5 py-px pr-px']"
+      class="z-1"
+      :class="[BAR_Y, BAR_FADE, BAR_Y_SIZE[edge]]"
       :style="barInsetTop ? { marginTop: barInsetTop } : undefined"
       @pointerdown.capture="onTrackPointerDown($event, 'y')"
     >
@@ -269,22 +290,22 @@ function onThumbPointerDown() {
            the positioning reka owns. -->
       <ScrollAreaThumb
         data-lp-thumb
-        class="relative min-w-1 bg-brand/40 before:absolute before:inset-y-0 before:right-0 before:-left-2.5 before:content-[''] transition-[min-width,background-color] duration-[var(--duration-fast)] group-hover:min-w-1.5 group-hover:bg-brand"
-        :class="floating ? 'rounded-pill' : 'rounded-l-pill'"
+        class="relative"
+        :class="[THUMB_Y, THUMB_Y_ROUND[edge]]"
         @pointerdown="onThumbPointerDown"
       />
     </ScrollAreaScrollbar>
 
     <ScrollAreaScrollbar
       orientation="horizontal"
-      class="group z-1 flex flex-col touch-none select-none justify-end pt-2.5"
-      :class="[barFade, floating ? 'h-4 px-1 pb-1' : 'h-3.5 px-px pb-px']"
+      class="z-1"
+      :class="[BAR_X, BAR_FADE, BAR_X_SIZE[edge]]"
       @pointerdown.capture="onTrackPointerDown($event, 'x')"
     >
       <ScrollAreaThumb
         data-lp-thumb
-        class="relative min-h-1 bg-brand/40 before:absolute before:inset-x-0 before:bottom-0 before:-top-2.5 before:content-[''] transition-[min-height,background-color] duration-[var(--duration-fast)] group-hover:min-h-1.5 group-hover:bg-brand"
-        :class="floating ? 'rounded-pill' : 'rounded-t-pill'"
+        class="relative"
+        :class="[THUMB_X, THUMB_X_ROUND[edge]]"
         @pointerdown="onThumbPointerDown"
       />
     </ScrollAreaScrollbar>

package/src/components/LpSecretField.vue

@@ -12,6 +12,7 @@ export interface SecretFieldLabels extends Record<string, string> {
 </script>
 
 <script setup lang="ts">
+import { isElement } from "../composables/useView"
 import { suppressPaletteDiscovery } from "../composables/usePaletteCommands"
 /*
  * A value someone must be able to read and copy but should not have on screen
@@ -159,7 +160,7 @@ const field = ref<{ $el?: Element } | null>(null)
 watch(revealed, () => {
   if (!props.input || prefersReducedMotion()) return
   const el = field.value?.$el
-  const input = el instanceof Element ? el.querySelector("input") : null
+  const input = isElement(el) ? el.querySelector("input") : null
   input?.animate([{ filter: "blur(4px)", opacity: 0.35 }, { filter: "blur(0)", opacity: 1 }], {
     duration: 260,
     easing: "cubic-bezier(0.2, 0, 0, 1)",

package/src/components/LpSegmented.vue

@@ -6,6 +6,8 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { CONTROL_SIZE } from "./controlSize"
+import { isHTMLElement } from "../composables/useView"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * Segmented control — a compact bar of mutually-exclusive options with a sliding
@@ -17,7 +19,7 @@ import { usePaletteControl, type PaletteControlOptions } from "../composables/us
 import { Motion } from "motion-v"
 import { ToggleGroupItem, ToggleGroupRoot } from "reka-ui"
 import { ref, useId } from "vue"
-import { useFieldControl } from "../composables/useField"
+import { useFieldControl, mergeDescribedBy } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { usePillTransition } from "../composables/usePillTransition"
 import AttentionDot from "./AttentionDot.vue"
@@ -66,11 +68,7 @@ function onChange(v: unknown) {
   if (typeof v === "string" && v) emit("update:modelValue", v)
 }
 
-const sizeCls = {
-  sm: "h-(--size-control-sm) text-xs",
-  md: "h-(--size-control-md) text-sm",
-  lg: "h-(--size-control-lg) text-sm",
-}
+const sizeCls = CONTROL_SIZE
 
 // The bar sizes itself from `size` and `block`, which is right until a consumer
 // needs it flush against something — `class="p-0"` and `class="rounded-none"`
@@ -109,7 +107,7 @@ function pillUnder(value: string): boolean {
  */
 function releaseFocusAfterPointer(event: PointerEvent) {
   const target = event.currentTarget
-  if (target instanceof HTMLElement) target.blur()
+  if (isHTMLElement(target)) target.blur()
 }
 
 usePaletteControl({ disabled: () => field.value.disabled })
@@ -121,10 +119,10 @@ usePaletteControl({ disabled: () => field.value.disabled })
     type="single"
     :disabled="field.disabled"
     :aria-labelledby="field.labelId"
-    :aria-describedby="field.describedBy"
     :rovingFocus="true"
     :class="rootClass"
     v-bind="rest"
+    :aria-describedby="mergeDescribedBy(rest['aria-describedby'], field.describedBy)"
     @update:model-value="onChange"
     @pointerleave="hovered = null"
   >

package/src/components/LpSelect.vue

@@ -16,6 +16,8 @@ export type SelectLabels = {
 </script>
 
 <script setup lang="ts" generic="V extends SelectValue = string">
+import IconCloseButton from "./IconCloseButton.vue"
+import { CONTROL_SIZE } from "./controlSize"
 import { usePaletteControl, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * One select to rule them all — built on reka-ui Combobox.
@@ -37,7 +39,7 @@ import {
   ComboboxViewport,
 } from "reka-ui"
 import { computed, nextTick, reactive, ref, useAttrs, useId, watch } from "vue"
-import { useFieldBlur, useFieldControl } from "../composables/useField"
+import { useFieldBlur, useFieldControl, mergeDescribedBy } from "../composables/useField"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { OPTION_ITEM, optionStagger, POPOVER_PANEL } from "./dropdown"
@@ -45,8 +47,8 @@ import LpIcon from "./LpIcon.vue"
 import OptionContent from "./OptionContent.vue"
 import LpRollingText from "./LpRollingText.vue"
 import type { LpOptionBase, OptionSelection } from "./options"
-import { fitChips, toggledValues } from "./select"
-import { useOutsideGuard, usePortalTarget } from "../composables/useView"
+import { evictOldest, fitChips, toggledValues } from "./select"
+import { nodeWindow, useOutsideGuard, usePortalTarget } from "../composables/useView"
 import { useResizeObserver } from "../composables/useResizeObserver"
 
 export type SelectValue = string | number
@@ -105,11 +107,7 @@ const props = withDefaults(
 )
 
 /* The text steps with the height, as in every other kit field: a small select beside a small input read a size larger. */
-const SIZE_HEIGHT = {
-  sm: "h-(--size-control-sm) text-xs",
-  md: "h-(--size-control-md) text-sm",
-  lg: "h-(--size-control-lg) text-sm",
-} as const
+const SIZE_HEIGHT = CONTROL_SIZE
 const anchorHeight = computed(() => SIZE_HEIGHT[props.size])
 
 const field = useFieldControl(() => ({
@@ -189,7 +187,38 @@ async function openFromKeyboard(event: KeyboardEvent) {
   const items = panel?.querySelectorAll<HTMLElement>('[role="option"]:not([data-disabled])')
   const selected = panel?.querySelector<HTMLElement>('[role="option"][aria-selected="true"]:not([data-disabled])')
   const target = search ?? selected ?? (event.key === "ArrowUp" ? items?.[items.length - 1] : items?.[0])
-  target?.focus()
+  // Something else may have kept the list shut: nothing to move into then.
+  if (isOpen.value) target?.focus()
+}
+
+/*
+ * reka reads the arrow keys from the search box. A list without one takes focus
+ * on an option, where its own handling put focus straight back on the option
+ * the list opened on, so that was all a keyboard could ever pick. Taken here,
+ * ahead of it.
+ */
+const LIST_KEYS = ["ArrowDown", "ArrowUp", "Home", "End", "Enter"]
+
+function moveInList(event: KeyboardEvent) {
+  if (props.searchable || serverSide.value || !LIST_KEYS.includes(event.key)) return
+  const list = event.currentTarget as HTMLElement
+  const items = Array.from(list.querySelectorAll<HTMLElement>('[role="option"]:not([data-disabled])'))
+  if (!items.length) return
+  event.preventDefault()
+  event.stopPropagation()
+  const at = items.indexOf(list.ownerDocument.activeElement as HTMLElement)
+  if (event.key === "Enter") {
+    items[at]?.click()
+    return
+  }
+  const last = items.length - 1
+  const next = {
+    ArrowDown: at === last ? 0 : at + 1,
+    ArrowUp: at <= 0 ? last : at - 1,
+    Home: 0,
+    End: last,
+  }[event.key]
+  items[next ?? 0]?.focus()
 }
 
 // Leaving the field, not moving between its parts: the trigger and the list
@@ -219,7 +248,9 @@ function onListFocusOut(event: FocusEvent) {
  * 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.
+ * the consumer's aria-label plus the value, else the value or placeholder: the
+ * name has to hold the text the button shows, or a voice user who says what
+ * they see ("click Alpha") cannot reach it (WCAG 2.5.3).
  */
 const attrs = useAttrs()
 const valueId = `lp-select-${useId()}-value`
@@ -227,7 +258,7 @@ const valueText = computed(() => (chips.value.length ? chipNames.value : display
 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 },
+    : { "aria-label": [attrs["aria-label"] as string | undefined, valueText.value].filter(Boolean).join(", ") },
 )
 
 // reka's Combobox forbids an empty-string item value (it reserves "" for
@@ -281,6 +312,7 @@ const filtered = computed(() => {
 type Shown = { label: string; hint?: string; image?: string; icon?: string }
 
 const remembered = reactive(new Map<SelectValue, Shown>())
+const REMEMBERED_LIMIT = 500
 
 function fromOption(o: SelectOption<V>): Shown {
   return { label: o.label, hint: o.description, image: o.image, icon: o.icon }
@@ -291,6 +323,7 @@ function remember(values: readonly SelectValue[]) {
     const o = props.options.find((x) => x.value === v)
     if (o) remembered.set(v, fromOption(o))
   }
+  evictOldest(remembered, new Set(values), REMEMBERED_LIMIT)
 }
 
 const modelList = computed<V[]>(() => {
@@ -355,7 +388,7 @@ function measure() {
   if (!row || !probe) return
   const kids = Array.from(probe.children) as HTMLElement[]
   const more = kids.pop()
-  const gap = Number.parseFloat(getComputedStyle(probe).columnGap) || 0
+  const gap = Number.parseFloat(nodeWindow(probe).getComputedStyle(probe).columnGap) || 0
   fit.value = fitChips(
     kids.map((k) => k.offsetWidth),
     row.clientWidth,
@@ -365,6 +398,9 @@ function measure() {
 }
 
 useResizeObserver(chipRow, () => measure())
+// The chips can change width while the row keeps its own: a web font arriving,
+// a theme. The probe is as wide as they are, so it notices.
+useResizeObserver(probeRow, () => measure())
 watch(chips, () => void nextTick(measure), { flush: "post", deep: true })
 
 const shownChips = computed(() => chips.value.slice(0, fit.value))
@@ -451,7 +487,7 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
         @keydown="openFromKeyboard"
         v-bind="triggerName"
         :aria-invalid="field.invalid || undefined"
-        :aria-describedby="field.describedBy"
+        :aria-describedby="mergeDescribedBy(rootAttrs['aria-describedby'], field.describedBy)"
         class="flex min-w-0 flex-1 items-center gap-2 outline-none"
       >
         <!-- Several picks read as chips (picture + name) that collapse into
@@ -527,20 +563,13 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
           </LpRollingText>
         </template>
       </ComboboxTrigger>
-      <button
+      <IconCloseButton
         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"
+        inline
+        :label="labels.clear"
         @pointerdown.prevent
         @click="clear"
-      >
-        <LpIcon
-          name="lucide:x"
-          :size="16"
-          class="transition-transform duration-200 ease-[var(--ease-emphasized)] group-hover:rotate-90 group-active:scale-90 motion-reduce:group-hover:rotate-0"
-        />
-      </button>
+      />
       <!-- A second way in for the pointer only: the main trigger already owns
            focus and the accessible name, so this one stays out of the tab order
            and the accessibility tree. -->
@@ -565,6 +594,7 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
       <ComboboxContent
         :data-lp-field-part="partId"
         @focusout="onListFocusOut"
+        @keydown.capture="moveInList"
         @interact-outside="guardOutside"
         @escape-key-down="guardOutside"
         position="popper"

package/src/components/LpServiceNode.vue

@@ -5,7 +5,7 @@
  * depends_on edges connect these across host frames. Tailwind utilities only
  * (no scoped CSS) so styles reach consumer apps via @source.
  */
-import { Handle, Position } from "@vue-flow/core"
+import { Handle, Position, type NodeProps } from "@vue-flow/core"
 import { computed } from "vue"
 
 export interface ServiceNodeData {
@@ -16,7 +16,9 @@ export interface ServiceNodeData {
   dimmed?: boolean
 }
 
-const props = defineProps<{ data: ServiceNodeData; selected?: boolean }>()
+// Vue Flow hands a custom node all of NodeProps. Declared, they stop falling
+// through onto the node's root as attributes (position="[object Object]").
+const props = defineProps<Omit<NodeProps<ServiceNodeData>, "selected"> & { selected?: boolean }>()
 
 const kindVar: Record<string, string> = {
   service: "var(--color-brand)",

package/src/components/LpShaderBackdrop.vue

@@ -35,6 +35,8 @@ export default { inheritAttrs: false }
  * - 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 { clamp } from "../composables/clamp"
+import { nodeWindow } from "../composables/useView"
 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"
@@ -95,7 +97,7 @@ 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))
+  return clamp(n, 0, 1)
 }
 
 // ── Theme colours ───────────────────────────────────────────────────────────
@@ -115,10 +117,10 @@ let paint: CanvasRenderingContext2D | null = null
 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 css = nodeWindow(probe).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 })
+  paint ??= probe.ownerDocument.createElement("canvas").getContext("2d", { willReadFrequently: true })
   if (!paint) return [0, 0, 0]
   paint.clearRect(0, 0, 1, 1)
   paint.fillStyle = "#000"
@@ -204,7 +206,7 @@ let pixelRatio = 1
 function sizeCanvas() {
   const el = canvas.value
   if (!el) return
-  const dpr = Math.min(weakEngine ? 1 : 2, window.devicePixelRatio || 1)
+  const dpr = Math.min(weakEngine ? 1 : 2, nodeWindow(el).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))
@@ -351,16 +353,17 @@ useResizeObserver(root, () => {
 })
 
 onMounted(() => {
-  probe = document.createElement("span")
+  const page = root.value?.ownerDocument ?? document
+  probe = page.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(() => {
+  themeObserver = new (nodeWindow(page).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)")
+  themeObserver.observe(page.documentElement, { attributes: true, attributeFilter: ["style", "class", "data-theme", "data-theme-mode"] })
+  schemeQuery = nodeWindow(page).matchMedia?.("(prefers-color-scheme: dark)")
   schemeQuery?.addEventListener("change", refreshPalette)
 
   if (wantGl.value) start()
@@ -391,7 +394,7 @@ watch(
       }
       drawFrame()
       shown.value = true
-    }, durationToken("duration-medium"))
+    }, durationToken("duration-medium", undefined, root.value ?? undefined))
   },
 )
 watch(