@leavepulse/ui 0.77.3 → 0.78.0

package/src/components/appShell.ts

@@ -0,0 +1,74 @@
+import type { SidebarItem } from "./sidebar"
+
+/*
+ * What LpAppShell decides from numbers: which navigation a width gets, whether
+ * the header stays while a page scrolls, how tight the page sits. Kept out of
+ * the component so each rule is tested without a browser.
+ */
+
+export type NavBreakpoint = "sm" | "md" | "lg" | "xl" | "2xl"
+
+/** Tailwind's default widths, which the shell's own classes follow. */
+export const NAV_BREAKPOINT_PX: Record<NavBreakpoint, number> = { sm: 640, md: 768, lg: 1024, xl: 1280, "2xl": 1536 }
+
+/**
+ * The one navigation the shell shows at a width. `rail` the full side rail,
+ * `compact` its icons, `bottom` a phone's bottom bar, `drawer` a burger.
+ */
+export type NavMode = "rail" | "compact" | "bottom" | "drawer"
+
+export interface AdaptiveNav {
+  /** Below this width (and above `mobileBreakpoint`) the rail folds to icons. */
+  compactBelow?: NavBreakpoint
+  /**
+   * Where the rail is gone, a row of the current page's `children` under the
+   * header, so a sub-page stays one tap away. The `context-nav` slot redraws it.
+   */
+  contextNav?: boolean
+}
+
+/** Padding around the page: `auto` tightens it on small screens only. */
+export type ShellDensity = "comfortable" | "compact" | "auto"
+
+export const DENSITY_CLASS: Record<ShellDensity, string> = {
+  comfortable: "px-4 py-6 md:px-6",
+  compact: "px-2 py-3 md:px-3",
+  auto: "px-2 py-3 sm:px-4 sm:py-4 md:px-6 md:py-6",
+}
+
+export function resolveNavMode(
+  atLeast: (breakpoint: NavBreakpoint) => boolean,
+  options: { mobileBreakpoint: NavBreakpoint; bottomNav: boolean; compactBelow?: NavBreakpoint },
+): NavMode {
+  if (!atLeast(options.mobileBreakpoint)) return options.bottomNav ? "bottom" : "drawer"
+  return options.compactBelow && !atLeast(options.compactBelow) ? "compact" : "rail"
+}
+
+/** What the header height is, in px: where a page counts as being at its top. */
+export const SHELL_HEADER_PX = 64
+/* Below this a scroll is a tremble of the finger, not a direction. */
+const SCROLL_SLOP_PX = 8
+
+/**
+ * The header leaves on the way down and returns on the way up. Near the end of
+ * a page it stays as it is: the viewport changes height with the header, the
+ * browser clamps the scroll, and that clamp would read as scrolling back up.
+ */
+export function headerCollapsedAfter(
+  collapsed: boolean,
+  from: number,
+  to: number,
+  maxTop: number,
+  slop = SCROLL_SLOP_PX,
+): boolean {
+  if (to <= SHELL_HEADER_PX) return false
+  if (to >= maxTop - SHELL_HEADER_PX) return collapsed
+  if (to - from > slop) return true
+  if (from - to > slop) return false
+  return collapsed
+}
+
+/** The sub-pages of the page in view: its own, or its siblings' when it is one of them. */
+export function contextNavItems(items: SidebarItem[], isActive: (item: SidebarItem) => boolean): SidebarItem[] {
+  return items.find((item) => item.children?.length && (isActive(item) || item.children.some(isActive)))?.children ?? []
+}

package/src/components/calendar.ts

@@ -6,6 +6,7 @@
  * pair drifting apart again (one had translatable month buttons, the other
  * English ones).
  */
+import { CONTROL_SIZE } from "./controlSize"
 
 export interface CalendarLabels extends Record<string, string> {
   previous: string
@@ -24,11 +25,7 @@ export const CALENDAR_NAV =
 export const PICKER_TRIGGER =
   "group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-left text-ink outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
 
-export const PICKER_SIZE = {
-  sm: "h-(--size-control-sm) text-xs",
-  md: "h-(--size-control-md) text-sm",
-  lg: "h-(--size-control-lg) text-sm",
-} as const
+export const PICKER_SIZE = CONTROL_SIZE
 
 export function pickerTone(invalid: boolean): string {
   return invalid ? "border-danger focus-visible:ring-danger-soft" : "border-line focus-visible:border-brand"
@@ -49,3 +46,13 @@ export const PICKER_PRESETS =
 
 export const PICKER_PRESET =
   "shrink-0 rounded-control px-2.5 py-1.5 text-left text-sm whitespace-nowrap text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:bg-surface-soft hover:text-ink focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 aria-pressed:bg-brand-soft aria-pressed:text-ink"
+
+/** The props the two pickers share. */
+export interface PickerFieldProps {
+  clearable?: boolean
+  disabled?: boolean
+  invalid?: boolean
+  size?: "sm" | "md" | "lg"
+  /** Locale of the shown date and the calendar; defaults to reka's ConfigProvider, then the browser. */
+  locale?: string
+}

package/src/components/chart.ts

@@ -4,6 +4,7 @@
  * pixel box, return paths and tick positions.
  */
 
+import { clamp } from "../composables/clamp"
 import { compactNumber } from "./format"
 
 export interface ChartPoint {
@@ -65,6 +66,29 @@ export interface ChartMarker {
   color?: string
 }
 
+/**
+ * A stretch of the x axis: a maintenance window, an incident, off hours. `from`
+ * and `to` are point indices or x labels. Drawn under the data.
+ */
+export interface ChartBand {
+  from: number | string
+  to: number | string
+  label?: string
+  color?: string
+}
+
+/**
+ * A note pinned to one reading. `at` is a point index or an x label; `value`
+ * places it on the y axis and defaults to the first visible series there.
+ */
+export interface ChartAnnotation {
+  at: number | string
+  value?: number
+  label: string
+  color?: string
+  axis?: ChartAxis
+}
+
 /**
  * Which x labels to print with every `stride`-th one shown. The last point is
  * always labelled (it is usually "now"), and when it lands within half a
@@ -307,8 +331,8 @@ const smoothSegment = (pts: { x: number; y: number }[], tension: number): string
     let c2y = p2.y - ((p3.y - p1.y) / 6) * tension
     const lo = Math.min(p1.y, p2.y)
     const hi = Math.max(p1.y, p2.y)
-    c1y = Math.min(hi, Math.max(lo, c1y))
-    c2y = Math.min(hi, Math.max(lo, c2y))
+    c1y = clamp(c1y, lo, hi)
+    c2y = clamp(c2y, lo, hi)
     d += `C${c1x},${c1y} ${c2x},${c2y} ${p2.x},${p2.y}`
   }
   return d
@@ -344,7 +368,7 @@ export const areaPath = (
   s: Scale,
   smooth: number,
 ): string => {
-  const base = yAt(Math.max(s.min, Math.min(s.max, 0)), s.min, s.max, s.box)
+  const base = yAt(clamp(0, s.min, s.max), s.min, s.max, s.box)
   return runs(values, s.count)
     .map((idx) => {
       const d = segmentPath(idx, values, s, smooth)

package/src/components/chartWindow.ts

@@ -0,0 +1,198 @@
+import { clamp } from "../composables/clamp"
+
+/*
+ * The part of a long series a chart draws: which points are in the window, and
+ * how many of them survive the width of the plot. No DOM and no Vue, so the
+ * promises it makes (a peak is never lost) can be tested on the numbers.
+ */
+
+/** A window into the data: indices of its first and last point, both included. */
+export interface ChartRange {
+  start: number
+  end: number
+}
+
+/** How a series longer than the plot is thinned. */
+export type ChartDownsample = "minmax" | "lttb"
+
+/** What the chart draws: per series values, each slot traced back to its source. */
+export interface ChartView {
+  values: (number | null)[][]
+  start: number
+  end: number
+  /** Source index of every slot; null while the slots are contiguous from `start`. */
+  indices: number[] | null
+}
+
+type Values = (number | null)[]
+
+/* Below this a window has no line to read: two points are one segment. */
+export const MIN_RANGE_POINTS = 2
+/* Two slots a bucket: its lowest and its highest reading, in the order they came. */
+const SLOTS_PER_BUCKET = 2
+/* LTTB always keeps the first and last point, so anything less is not a choice. */
+const LTTB_MIN_TARGET = 3
+/* Share of the window one step of a keyboard or wheel zoom takes away. */
+export const ZOOM_STEP = 0.8
+
+/**
+ * A range fit to the data: in bounds, ordered, at least `MIN_RANGE_POINTS` wide.
+ * Null when there is nothing to narrow, so the whole series stays the plain case.
+ */
+export function clampRange(range: ChartRange | null | undefined, count: number): ChartRange | null {
+  if (!range || count <= MIN_RANGE_POINTS || !Number.isFinite(range.start) || !Number.isFinite(range.end)) return null
+  const last = count - 1
+  let start = Math.max(0, Math.min(last, Math.round(Math.min(range.start, range.end))))
+  let end = Math.max(0, Math.min(last, Math.round(Math.max(range.start, range.end))))
+  if (end - start + 1 < MIN_RANGE_POINTS) {
+    end = Math.min(last, start + MIN_RANGE_POINTS - 1)
+    start = Math.max(0, end - MIN_RANGE_POINTS + 1)
+  }
+  return start === 0 && end === last ? null : { start, end }
+}
+
+/** The range after a zoom by `factor` (below 1 is in), keeping `anchor` (0–1 across it) in place. */
+export function zoomRange(range: ChartRange | null, count: number, anchor: number, factor: number): ChartRange | null {
+  const from = range ?? { start: 0, end: count - 1 }
+  const span = from.end - from.start
+  const next = Math.max(MIN_RANGE_POINTS - 1, span * factor)
+  const at = from.start + span * clamp(anchor, 0, 1)
+  const start = at - (at - from.start) * (next / (span || 1))
+  return clampRange({ start, end: start + next }, count)
+}
+
+/** The range moved by `delta` points, keeping its width at the ends of the data. */
+export function panRange(range: ChartRange, count: number, delta: number): ChartRange | null {
+  const span = range.end - range.start
+  const start = Math.max(0, Math.min(count - 1 - span, range.start + delta))
+  return clampRange({ start, end: start + span }, count)
+}
+
+/**
+ * Keeps each bucket's lowest and highest reading, per series. Slots stay shared
+ * across series, so a bucket is two x positions and each series fills them with
+ * its own extremes. A monitoring chart must not lose a one-point spike: thinning
+ * by average or by every n-th point does exactly that.
+ */
+export function minMaxBuckets(series: Values[], slots: number): { values: Values[]; indices: number[] } {
+  const count = series.reduce((n, values) => Math.max(n, values.length), 0)
+  const buckets = Math.floor(slots / SLOTS_PER_BUCKET)
+  if (count === 0 || buckets < 1) return { values: series.map(() => []), indices: [] }
+  const indices: number[] = []
+  const values: Values[] = series.map(() => [])
+  for (let bucket = 0; bucket < buckets; bucket++) {
+    const from = Math.floor((bucket * count) / buckets)
+    const to = Math.floor(((bucket + 1) * count) / buckets)
+    if (to <= from) continue
+    indices.push(from, Math.max(from, to - 1))
+    series.forEach((data, s) => {
+      let low = -1
+      let high = -1
+      for (let i = from; i < to && i < data.length; i++) {
+        const v = data[i]
+        if (v == null) continue
+        if (low < 0 || v < (data[low] as number)) low = i
+        if (high < 0 || v > (data[high] as number)) high = i
+      }
+      if (low < 0) values[s].push(null, null)
+      else values[s].push(data[Math.min(low, high)], data[Math.max(low, high)])
+    })
+  }
+  return { values, indices }
+}
+
+/**
+ * Largest-Triangle-Three-Buckets: the indices of `target` points that keep a
+ * line's shape, one a bucket, always with its first and last. It reads better
+ * than min/max on a smooth curve and can drop a short spike, so it is the
+ * option rather than the default.
+ */
+export function lttbIndices(values: Values, target: number): number[] {
+  const present = values.flatMap((v, i) => (v == null ? [] : [i]))
+  if (target >= present.length || target < LTTB_MIN_TARGET) return present
+  const y = (at: number) => values[present[at]] as number
+  const x = (at: number) => present[at]
+  const step = (present.length - 2) / (target - 2)
+  const kept = [0]
+  let previous = 0
+  for (let bucket = 0; bucket < target - 2; bucket++) {
+    const from = Math.floor(bucket * step) + 1
+    const to = Math.floor((bucket + 1) * step) + 1
+    const nextEnd = Math.min(present.length, Math.floor((bucket + 2) * step) + 1)
+    let meanX = 0
+    let meanY = 0
+    for (let i = to; i < nextEnd; i++) {
+      meanX += x(i)
+      meanY += y(i)
+    }
+    const size = Math.max(1, nextEnd - to)
+    meanX /= size
+    meanY /= size
+    let best = from
+    let largest = -1
+    for (let i = from; i < to; i++) {
+      const area = Math.abs((x(previous) - meanX) * (y(i) - y(previous)) - (x(previous) - x(i)) * (meanY - y(previous)))
+      if (area > largest) {
+        largest = area
+        best = i
+      }
+    }
+    kept.push(best)
+    previous = best
+  }
+  kept.push(present.length - 1)
+  return kept.map((at) => present[at])
+}
+
+const contiguous = (series: Values[], range: ChartRange): Values[] =>
+  series.map((values) => values.slice(range.start, range.end + 1))
+
+/**
+ * The series as drawn. Without a range or a thinning it hands the input back, so
+ * a chart using neither does no work and draws what it always drew.
+ *
+ * LTTB picks by the first series that has data and the others follow those
+ * points, because slots are shared across series.
+ */
+export function chartView(
+  series: Values[],
+  count: number,
+  range: ChartRange | null,
+  mode: ChartDownsample | false | undefined,
+  slots: number,
+): ChartView {
+  const start = range?.start ?? 0
+  const end = range?.end ?? Math.max(0, count - 1)
+  const windowed = range ? contiguous(series, range) : series
+  const shown = end - start + 1
+  if (!mode || slots <= 0 || shown <= slots) return { values: windowed, start, end, indices: null }
+  if (mode === "minmax") {
+    const { values, indices } = minMaxBuckets(windowed, slots)
+    return { values, start, end, indices: indices.map((i) => i + start) }
+  }
+  const lead = windowed.find((values) => values.some((v) => v != null)) ?? []
+  const picked = lttbIndices(lead, slots)
+  return {
+    values: windowed.map((values) => picked.map((i) => values[i] ?? null)),
+    start,
+    end,
+    indices: picked.map((i) => i + start),
+  }
+}
+
+/** The slot at or before a source index, or -1 when the window does not hold it. */
+export function slotOf(view: ChartView, source: number): number {
+  if (source < view.start || source > view.end) return -1
+  if (!view.indices) return source - view.start
+  let low = 0
+  let high = view.indices.length - 1
+  while (low < high) {
+    const middle = Math.ceil((low + high) / 2)
+    if (view.indices[middle] <= source) low = middle
+    else high = middle - 1
+  }
+  return high < 0 ? -1 : low
+}
+
+/** The source index behind a slot. */
+export const sourceOf = (view: ChartView, slot: number): number => (view.indices ? (view.indices[slot] ?? -1) : slot + view.start)

package/src/components/color.ts

@@ -1,3 +1,5 @@
+import { clamp } from "../composables/clamp"
+
 /*
  * Colour conversion for LpColorPicker — kept out of the component so the maths
  * is testable on its own and reusable by anything that has to meet a colour
@@ -33,7 +35,6 @@ export interface Rgb {
 /** The string shapes a caller can hand the picker, and ask back out of it. */
 export type ColorFormat = "hex" | "rgb" | "hsl"
 
-const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n))
 
 /** Wraps rather than clamps: hue is a circle, and 370° is 10°, not 360°. */
 export function normalizeHue(h: number): number {

package/src/components/commandPalette.ts

@@ -165,6 +165,52 @@ export interface RecentSource {
   children?: unknown
 }
 
+/*
+ * Where a command's `href` may lead. Commands can come from a search or from
+ * stored history, so a `javascript:` link there would run in the app's origin.
+ * Mail and phone links are as harmless as a web one and common in a help menu.
+ * The base only lets a relative link parse: nothing here reads the window, so
+ * this holds on the server.
+ */
+const SAFE_LINK_SCHEMES = new Set(["http:", "https:", "mailto:", "tel:"])
+const RELATIVE_BASE = "http://relative.invalid/"
+
+export function isSafeHref(href: string): boolean {
+  try {
+    return SAFE_LINK_SCHEMES.has(new URL(href, RELATIVE_BASE).protocol)
+  } catch {
+    return false
+  }
+}
+
+/** The link as it would be pasted elsewhere: absolute, or as given if it cannot be read. */
+export function absoluteHref(href: string, base: string): string {
+  try {
+    return new URL(href, base).href
+  } catch {
+    return href
+  }
+}
+
+/** The row that unfolds a group; the NUL keeps it out of any id an app would write. */
+export function moreRowId(group: string): string {
+  return `\u0000lp-cmd-more\u0000${group}`
+}
+
+const IMAGE_SHAPES: unknown[] = ["circle", "soft", "square"]
+const isOptionalString = (value: unknown) => value === undefined || typeof value === "string"
+
+function isStoredImage(value: unknown): boolean {
+  if (value === undefined || typeof value === "string") return true
+  if (!value || typeof value !== "object") return false
+  const { src, alt, fallback, icon, shape } = value as Record<string, unknown>
+  return (src === null || isOptionalString(src))
+    && isOptionalString(alt)
+    && isOptionalString(fallback)
+    && isOptionalString(icon)
+    && (shape === undefined || IMAGE_SHAPES.includes(shape))
+}
+
 function isEntry(value: unknown): value is RecentEntry {
   if (!value || typeof value !== "object") return false
   const v = value as Record<string, unknown>
@@ -173,6 +219,10 @@ function isEntry(value: unknown): value is RecentEntry {
     && typeof v.label === "string"
     && Array.isArray(v.path)
     && v.path.every((step) => typeof step === "string")
+    && isOptionalString(v.description)
+    && isOptionalString(v.icon)
+    && isStoredImage(v.image)
+    && (v.href === undefined || (typeof v.href === "string" && isSafeHref(v.href)))
   )
 }
 
@@ -182,17 +232,28 @@ export function readRecent(stored: unknown): RecentItem[] {
   return stored.filter((v): v is RecentItem => typeof v === "string" || isEntry(v))
 }
 
-function recentKey(item: RecentItem): string {
-  return typeof item === "string" ? item : [...item.path, item.id].join("\u0000")
+/**
+ * What makes a command itself: the same id may live in two modes
+ * (`services/restart`, `deploy/restart`). A root command's key is its bare id,
+ * so a stored id and a stored entry at the root count as one.
+ */
+export function commandKey(id: string, path: readonly string[] = []): string {
+  return [...path, id].join("\u0000")
+}
+
+export function recentKey(item: RecentItem): string {
+  return typeof item === "string" ? item : commandKey(item.id, item.path)
 }
 
 /**
  * The history item for a pick. A root pick stays a bare id, the format older
  * versions wrote and still read; anything deeper becomes an entry with only
- * the fields that survive JSON.
+ * the fields that survive JSON. So does a `fetched` pick at the root: its id
+ * stands for nothing among the root commands, and only an entry reaches
+ * `resolveRecent` with what is needed to find it again.
  */
-export function toRecentItem(command: RecentSource, path: readonly string[]): RecentItem {
-  if (!path.length) return command.id
+export function toRecentItem(command: RecentSource, path: readonly string[], fetched = false): RecentItem {
+  if (!path.length && !fetched) return command.id
   const entry: RecentEntry = { id: command.id, label: command.label, path: [...path] }
   if (command.description) entry.description = command.description
   if (command.icon) entry.icon = command.icon

package/src/components/controlSize.ts

@@ -0,0 +1,6 @@
+/* Height and text of a control at each size, shared so a form lines up. */
+export const CONTROL_SIZE = {
+  sm: "h-(--size-control-sm) text-xs",
+  md: "h-(--size-control-md) text-sm",
+  lg: "h-(--size-control-lg) text-sm",
+}

package/src/components/dropdown.ts

@@ -71,6 +71,9 @@ export const optionStagger = (index: number): { animationDelay: string } => ({
  * dip on press. Put on the <LpIcon>, with `group` on its button. Shared by
  * Modal, Drawer, Toaster and the Autocomplete clear button.
  */
+/* Where a combobox list sits under its field. */
+export const COMBOBOX_PANEL = { collisionPadding: 8, position: "popper", sideOffset: 6 } as const
+
 export const CLOSE_ICON =
   "transition-transform duration-medium ease-[var(--ease-emphasized)] " +
   "group-hover:rotate-90 group-active:scale-90 motion-reduce:group-hover:rotate-0"

package/src/components/exportData.ts

@@ -2,6 +2,7 @@
  * Data export shared by the table and the chart: CSV text, a file download,
  * and an SVG rasterised with its theme resolved.
  */
+import { isElement, nodeWindow } from "../composables/useView"
 
 export interface CsvColumn<Row> {
   key: string
@@ -64,19 +65,30 @@ export function toCsv<Row>(rows: readonly Row[], columns: readonly CsvColumn<Row
  * Hand the viewer a file to save. Does nothing outside a browser, so a call
  * that runs during SSR is harmless.
  */
-export function downloadFile(name: string, data: Blob | string, type = "text/plain;charset=utf-8"): void {
-  if (typeof document === "undefined" || typeof URL === "undefined") return
+export function downloadFile(
+  name: string,
+  data: Blob | string,
+  type = "text/plain;charset=utf-8",
+  doc: Document | undefined = typeof document === "undefined" ? undefined : document,
+): void {
+  if (!doc || typeof URL === "undefined") return
   const blob = typeof data === "string" ? new Blob([data], { type }) : data
   const url = URL.createObjectURL(blob)
-  const a = document.createElement("a")
-  a.href = url
-  a.download = name
-  a.rel = "noopener"
+  clickLink(doc, { href: url, download: name, rel: "noopener" })
+  setTimeout(() => URL.revokeObjectURL(url), 0)
+}
+
+/**
+ * Follow a link the way a click on it would, from the document it should open
+ * in: an LpFrame's, inside one.
+ */
+export function clickLink(doc: Document, attributes: Partial<Pick<HTMLAnchorElement, "href" | "download" | "target" | "rel">>): void {
+  const a = doc.createElement("a")
+  Object.assign(a, attributes)
   a.style.display = "none"
-  document.body.append(a)
+  doc.body.append(a)
   a.click()
   a.remove()
-  setTimeout(() => URL.revokeObjectURL(url), 0)
 }
 
 const PAINT_PROPS = [
@@ -111,13 +123,14 @@ const PAINT_PROPS = [
  * are frozen at their end state.
  */
 export function inlineSvg(svg: SVGSVGElement): SVGSVGElement {
+  const view = nodeWindow(svg)
   const clone = svg.cloneNode(true) as SVGSVGElement
   const source = [svg, ...svg.querySelectorAll("*")]
   const target = [clone, ...clone.querySelectorAll("*")]
   source.forEach((el, i) => {
     const copy = target[i]
-    if (!(copy instanceof Element)) return
-    const computed = getComputedStyle(el)
+    if (!isElement(copy)) return
+    const computed = view.getComputedStyle(el)
     const style = PAINT_PROPS.map((p) => `${p}:${computed.getPropertyValue(p)}`)
       .filter((d) => !d.endsWith(":"))
       .join(";")
@@ -126,7 +139,7 @@ export function inlineSvg(svg: SVGSVGElement): SVGSVGElement {
   })
   // Comment nodes (Vue leaves them in development builds) may hold "--", which
   // is invalid inside an XML comment and makes the whole image fail to load.
-  const comments = document.createTreeWalker(clone, NodeFilter.SHOW_COMMENT)
+  const comments = view.document.createTreeWalker(clone, view.NodeFilter.SHOW_COMMENT)
   const dead: Node[] = []
   while (comments.nextNode()) dead.push(comments.currentNode)
   for (const node of dead) node.parentNode?.removeChild(node)
@@ -157,13 +170,14 @@ export interface RasterOptions {
 
 /** Rasterise an SVG element to a PNG blob with its theme resolved. */
 export async function svgToPng(svg: SVGSVGElement, options: RasterOptions = {}): Promise<Blob> {
+  const view = nodeWindow(svg)
   const copy = inlineSvg(svg)
   const width = Number(copy.getAttribute("width"))
   const height = Number(copy.getAttribute("height"))
   const markup = new XMLSerializer().serializeToString(copy)
   const url = URL.createObjectURL(new Blob([markup], { type: "image/svg+xml;charset=utf-8" }))
   try {
-    const img = new Image()
+    const img = new view.Image()
     img.decoding = "async"
     const loaded = new Promise<void>((resolve, reject) => {
       img.onload = () => resolve()
@@ -172,11 +186,11 @@ export async function svgToPng(svg: SVGSVGElement, options: RasterOptions = {}):
     img.src = url
     await loaded
 
-    const scale = options.scale ?? Math.max(2, globalThis.devicePixelRatio || 1)
+    const scale = options.scale ?? Math.max(2, view.devicePixelRatio || 1)
     const pad = options.padding ?? 0
-    const measure = document.createElement("canvas").getContext("2d")
+    const measure = view.document.createElement("canvas").getContext("2d")
     const headerHeight = measure && options.header ? options.header(measure, width) : 0
-    const canvas = document.createElement("canvas")
+    const canvas = view.document.createElement("canvas")
     canvas.width = Math.ceil((width + pad * 2) * scale)
     canvas.height = Math.ceil((height + headerHeight + pad * 2) * scale)
     const ctx = canvas.getContext("2d")
@@ -200,7 +214,7 @@ export async function svgToPng(svg: SVGSVGElement, options: RasterOptions = {}):
 /** The first non-transparent background at or above an element. */
 export function backgroundOf(el: Element | null): string | undefined {
   for (let node = el; node; node = node.parentElement) {
-    const bg = getComputedStyle(node).backgroundColor
+    const bg = nodeWindow(node).getComputedStyle(node).backgroundColor
     if (bg && bg !== "transparent" && !/rgba\([^)]*,\s*0\)$/.test(bg)) return bg
   }
   return undefined
@@ -212,11 +226,12 @@ export function backgroundOf(el: Element | null): string | undefined {
  */
 export function resolveCssColor(value: string, within: Element): string {
   if (!value.includes("var(") && !value.toLowerCase().includes("currentcolor")) return value
-  const probe = document.createElement("span")
+  const view = nodeWindow(within)
+  const probe = view.document.createElement("span")
   probe.style.color = value
   probe.style.display = "none"
   within.append(probe)
-  const resolved = getComputedStyle(probe).color
+  const resolved = view.getComputedStyle(probe).color
   probe.remove()
   return resolved || value
 }