@leavepulse/ui 0.77.3 → 0.78.1

package/dist/components/appShell.js

@@ -0,0 +1,30 @@
+const NAV_BREAKPOINT_PX = { sm: 640, md: 768, lg: 1024, xl: 1280, "2xl": 1536 };
+const DENSITY_CLASS = {
+  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"
+};
+function resolveNavMode(atLeast, options) {
+  if (!atLeast(options.mobileBreakpoint)) return options.bottomNav ? "bottom" : "drawer";
+  return options.compactBelow && !atLeast(options.compactBelow) ? "compact" : "rail";
+}
+const SHELL_HEADER_PX = 64;
+const SCROLL_SLOP_PX = 8;
+function headerCollapsedAfter(collapsed, from, to, maxTop, slop = SCROLL_SLOP_PX) {
+  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;
+}
+function contextNavItems(items, isActive) {
+  return items.find((item) => item.children?.length && (isActive(item) || item.children.some(isActive)))?.children ?? [];
+}
+export {
+  DENSITY_CLASS,
+  NAV_BREAKPOINT_PX,
+  SHELL_HEADER_PX,
+  contextNavItems,
+  headerCollapsedAfter,
+  resolveNavMode
+};

package/dist/components/calendar.d.ts

@@ -9,12 +9,21 @@ export declare const CALENDAR_NAV = "flex size-8 items-center justify-center rou
 /** The field a picker shows before it opens. */
 export declare 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 declare const PICKER_SIZE: {
-    readonly sm: "h-(--size-control-sm) text-xs";
-    readonly md: "h-(--size-control-md) text-sm";
-    readonly lg: "h-(--size-control-lg) text-sm";
+    sm: string;
+    md: string;
+    lg: string;
 };
 export declare function pickerTone(invalid: boolean): string;
 export declare const PICKER_CLEAR = "absolute top-1/2 right-[calc(0.75rem+15px+0.5rem)] flex -translate-y-1/2 items-center rounded-sm text-muted outline-none transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-ring";
 /** Presets: a scrolling row over the calendar on a phone, a column beside it from `sm`. */
 export declare const PICKER_PRESETS = "flex gap-1 overflow-x-auto border-b border-line p-2 sm:flex-col sm:overflow-visible sm:border-r sm:border-b-0";
 export declare 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/dist/components/calendar.js

@@ -1,12 +1,9 @@
+import { CONTROL_SIZE } from "./controlSize.js";
 const CALENDAR_LABELS = { previous: "Previous month", next: "Next month" };
 const CALENDAR_FRAME = "inline-block rounded-card border border-line bg-surface-raised p-3";
 const CALENDAR_NAV = "flex size-8 items-center justify-center rounded-control text-muted outline-none transition-[color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:bg-surface-soft hover:text-ink active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring";
 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";
-const PICKER_SIZE = {
-  sm: "h-(--size-control-sm) text-xs",
-  md: "h-(--size-control-md) text-sm",
-  lg: "h-(--size-control-lg) text-sm"
-};
+const PICKER_SIZE = CONTROL_SIZE;
 function pickerTone(invalid) {
   return invalid ? "border-danger focus-visible:ring-danger-soft" : "border-line focus-visible:border-brand";
 }

package/dist/components/chart.d.ts

@@ -52,6 +52,27 @@ export interface ChartMarker {
     label?: string;
     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

package/dist/components/chart.js

@@ -1,3 +1,4 @@
+import { clamp } from "../composables/clamp.js";
 import { compactNumber } from "./format.js";
 function xLabelIndices(count, stride) {
   if (count <= 0) return [];
@@ -142,8 +143,8 @@ const smoothSegment = (pts, tension) => {
     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;
@@ -159,7 +160,7 @@ const segmentPath = (idx, values, s, smooth) => {
 };
 const linePath = (values, s, smooth) => runs(values, s.count).map((idx) => segmentPath(idx, values, s, smooth)).join(" ");
 const areaPath = (values, s, smooth) => {
-  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);
     const x0 = xAt(idx[0], s.count, s.box, s.banded);

package/dist/components/chartWindow.d.ts

@@ -0,0 +1,57 @@
+/** 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)[];
+export declare const MIN_RANGE_POINTS = 2;
+export declare 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 declare function clampRange(range: ChartRange | null | undefined, count: number): ChartRange | null;
+/** The range after a zoom by `factor` (below 1 is in), keeping `anchor` (0–1 across it) in place. */
+export declare function zoomRange(range: ChartRange | null, count: number, anchor: number, factor: number): ChartRange | null;
+/** The range moved by `delta` points, keeping its width at the ends of the data. */
+export declare function panRange(range: ChartRange, count: number, delta: number): ChartRange | null;
+/**
+ * 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 declare function minMaxBuckets(series: Values[], slots: number): {
+    values: Values[];
+    indices: number[];
+};
+/**
+ * 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 declare function lttbIndices(values: Values, target: number): number[];
+/**
+ * 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 declare function chartView(series: Values[], count: number, range: ChartRange | null, mode: ChartDownsample | false | undefined, slots: number): ChartView;
+/** The slot at or before a source index, or -1 when the window does not hold it. */
+export declare function slotOf(view: ChartView, source: number): number;
+/** The source index behind a slot. */
+export declare const sourceOf: (view: ChartView, slot: number) => number;
+export {};

package/dist/components/chartWindow.js

@@ -0,0 +1,136 @@
+import { clamp } from "../composables/clamp.js";
+const MIN_RANGE_POINTS = 2;
+const SLOTS_PER_BUCKET = 2;
+const LTTB_MIN_TARGET = 3;
+const ZOOM_STEP = 0.8;
+function clampRange(range, count) {
+  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 };
+}
+function zoomRange(range, count, anchor, factor) {
+  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);
+}
+function panRange(range, count, delta) {
+  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);
+}
+function minMaxBuckets(series, slots) {
+  const count = series.reduce((n, values2) => Math.max(n, values2.length), 0);
+  const buckets = Math.floor(slots / SLOTS_PER_BUCKET);
+  if (count === 0 || buckets < 1) return { values: series.map(() => []), indices: [] };
+  const indices = [];
+  const 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]) low = i;
+        if (high < 0 || v > data[high]) 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 };
+}
+function lttbIndices(values, target) {
+  const present = values.flatMap((v, i) => v == null ? [] : [i]);
+  if (target >= present.length || target < LTTB_MIN_TARGET) return present;
+  const y = (at) => values[present[at]];
+  const x = (at) => 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, range) => series.map((values) => values.slice(range.start, range.end + 1));
+function chartView(series, count, range, mode, slots) {
+  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)
+  };
+}
+function slotOf(view, source) {
+  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;
+}
+const sourceOf = (view, slot) => view.indices ? view.indices[slot] ?? -1 : slot + view.start;
+export {
+  MIN_RANGE_POINTS,
+  ZOOM_STEP,
+  chartView,
+  clampRange,
+  lttbIndices,
+  minMaxBuckets,
+  panRange,
+  slotOf,
+  sourceOf,
+  zoomRange
+};

package/dist/components/color.js

@@ -1,4 +1,4 @@
-const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+import { clamp } from "../composables/clamp.js";
 function normalizeHue(h) {
   const wrapped = h % 360;
   return wrapped < 0 ? wrapped + 360 : wrapped;

package/dist/components/commandPalette.d.ts

@@ -145,14 +145,28 @@ export interface RecentSource {
     disabled?: boolean;
     children?: unknown;
 }
+export declare function isSafeHref(href: string): boolean;
+/** The link as it would be pasted elsewhere: absolute, or as given if it cannot be read. */
+export declare function absoluteHref(href: string, base: string): string;
+/** The row that unfolds a group; the NUL keeps it out of any id an app would write. */
+export declare function moreRowId(group: string): string;
 /** Stored history, with anything malformed dropped rather than trusted. */
 export declare function readRecent(stored: unknown): RecentItem[];
+/**
+ * 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 declare function commandKey(id: string, path?: readonly string[]): string;
+export declare function recentKey(item: RecentItem): string;
 /**
  * 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 declare function toRecentItem(command: RecentSource, path: readonly string[]): RecentItem;
+export declare function toRecentItem(command: RecentSource, path: readonly string[], fetched?: boolean): RecentItem;
 /** The history with `item` first and any earlier copy of it dropped. */
 export declare function pushRecent(list: readonly RecentItem[], item: RecentItem, keep: number): RecentItem[];
 /**

package/dist/components/commandPalette.js

@@ -41,20 +41,50 @@ function fallbackRows(items, raw) {
     parsed
   ).map((command) => ({ command, label: command.label.split("{query}").join(parsed.text) }));
 }
+const SAFE_LINK_SCHEMES = /* @__PURE__ */ new Set(["http:", "https:", "mailto:", "tel:"]);
+const RELATIVE_BASE = "http://relative.invalid/";
+function isSafeHref(href) {
+  try {
+    return SAFE_LINK_SCHEMES.has(new URL(href, RELATIVE_BASE).protocol);
+  } catch {
+    return false;
+  }
+}
+function absoluteHref(href, base) {
+  try {
+    return new URL(href, base).href;
+  } catch {
+    return href;
+  }
+}
+function moreRowId(group) {
+  return `\0lp-cmd-more\0${group}`;
+}
+const IMAGE_SHAPES = ["circle", "soft", "square"];
+const isOptionalString = (value) => value === void 0 || typeof value === "string";
+function isStoredImage(value) {
+  if (value === void 0 || typeof value === "string") return true;
+  if (!value || typeof value !== "object") return false;
+  const { src, alt, fallback, icon, shape } = value;
+  return (src === null || isOptionalString(src)) && isOptionalString(alt) && isOptionalString(fallback) && isOptionalString(icon) && (shape === void 0 || IMAGE_SHAPES.includes(shape));
+}
 function isEntry(value) {
   if (!value || typeof value !== "object") return false;
   const v = value;
-  return typeof v.id === "string" && typeof v.label === "string" && Array.isArray(v.path) && v.path.every((step) => typeof step === "string");
+  return typeof v.id === "string" && 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 === void 0 || typeof v.href === "string" && isSafeHref(v.href));
 }
 function readRecent(stored) {
   if (!Array.isArray(stored)) return [];
   return stored.filter((v) => typeof v === "string" || isEntry(v));
 }
+function commandKey(id, path = []) {
+  return [...path, id].join("\0");
+}
 function recentKey(item) {
-  return typeof item === "string" ? item : [...item.path, item.id].join("\0");
+  return typeof item === "string" ? item : commandKey(item.id, item.path);
 }
-function toRecentItem(command, path) {
-  if (!path.length) return command.id;
+function toRecentItem(command, path, fetched = false) {
+  if (!path.length && !fetched) return command.id;
   const entry = { id: command.id, label: command.label, path: [...path] };
   if (command.description) entry.description = command.description;
   if (command.icon) entry.icon = command.icon;
@@ -110,13 +140,18 @@ function modeChipLabel(command) {
 }
 export {
   PALETTE_MODES,
+  absoluteHref,
   commandHasPreview,
+  commandKey,
   fallbackRows,
+  isSafeHref,
   matchModePrefix,
   menuPaletteCommands,
   modeChipLabel,
+  moreRowId,
   pushRecent,
   readRecent,
+  recentKey,
   recentVisible,
   resolveRecentItems,
   toRecentItem

package/dist/components/controlSize.d.ts

@@ -0,0 +1,5 @@
+export declare const CONTROL_SIZE: {
+    sm: string;
+    md: string;
+    lg: string;
+};

package/dist/components/controlSize.js

@@ -0,0 +1,8 @@
+const CONTROL_SIZE = {
+  sm: "h-(--size-control-sm) text-xs",
+  md: "h-(--size-control-md) text-sm",
+  lg: "h-(--size-control-lg) text-sm"
+};
+export {
+  CONTROL_SIZE
+};

package/dist/components/dropdown.d.ts

@@ -35,4 +35,9 @@ export declare const optionStagger: (index: number) => {
  * dip on press. Put on the <LpIcon>, with `group` on its button. Shared by
  * Modal, Drawer, Toaster and the Autocomplete clear button.
  */
+export declare const COMBOBOX_PANEL: {
+    readonly collisionPadding: 8;
+    readonly position: "popper";
+    readonly sideOffset: 6;
+};
 export declare const CLOSE_ICON: string;

package/dist/components/dropdown.js

@@ -7,9 +7,11 @@ const OPTION_ITEM = "flex cursor-pointer items-center gap-2 rounded-inner px-2.5
 const optionStagger = (index) => ({
   animationDelay: `${staggerDelay(index, 0, 22, 12)}ms`
 });
+const COMBOBOX_PANEL = { collisionPadding: 8, position: "popper", sideOffset: 6 };
 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";
 export {
   CLOSE_ICON,
+  COMBOBOX_PANEL,
   OPTION_ITEM,
   PANEL_SURFACE,
   POPOVER_ANIM,

package/dist/components/exportData.d.ts

@@ -27,7 +27,12 @@ export declare function toCsv<Row>(rows: readonly Row[], columns: readonly CsvCo
  * Hand the viewer a file to save. Does nothing outside a browser, so a call
  * that runs during SSR is harmless.
  */
-export declare function downloadFile(name: string, data: Blob | string, type?: string): void;
+export declare function downloadFile(name: string, data: Blob | string, type?: string, doc?: Document | undefined): void;
+/**
+ * Follow a link the way a click on it would, from the document it should open
+ * in: an LpFrame's, inside one.
+ */
+export declare function clickLink(doc: Document, attributes: Partial<Pick<HTMLAnchorElement, "href" | "download" | "target" | "rel">>): void;
 /**
  * A standalone copy of a live SVG: every element carries its computed paint as
  * an inline style, so CSS custom properties and classes from the page's

package/dist/components/exportData.js

@@ -1,3 +1,5 @@
+import "vue";
+import { nodeWindow, isElement } from "../composables/realm.js";
 const FORMULA_START = /^[=+\-@\t\r]/;
 function cellText(value) {
   if (value == null) return "";
@@ -26,19 +28,20 @@ function toCsv(rows, columns, options = {}) {
   }
   return (options.bom ? "\uFEFF" : "") + out.join(newline) + newline;
 }
-function downloadFile(name, data, type = "text/plain;charset=utf-8") {
-  if (typeof document === "undefined" || typeof URL === "undefined") return;
+function downloadFile(name, data, type = "text/plain;charset=utf-8", doc = typeof document === "undefined" ? void 0 : document) {
+  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);
+}
+function clickLink(doc, attributes) {
+  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 = [
   "fill",
@@ -65,18 +68,19 @@ const PAINT_PROPS = [
   "display"
 ];
 function inlineSvg(svg) {
+  const view = nodeWindow(svg);
   const clone = svg.cloneNode(true);
   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(";");
     copy.setAttribute("style", style);
     copy.removeAttribute("class");
   });
-  const comments = document.createTreeWalker(clone, NodeFilter.SHOW_COMMENT);
+  const comments = view.document.createTreeWalker(clone, view.NodeFilter.SHOW_COMMENT);
   const dead = [];
   while (comments.nextNode()) dead.push(comments.currentNode);
   for (const node of dead) node.parentNode?.removeChild(node);
@@ -94,13 +98,14 @@ function inlineSvg(svg) {
   return clone;
 }
 async function svgToPng(svg, options = {}) {
+  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((resolve, reject) => {
       img.onload = () => resolve();
@@ -108,11 +113,11 @@ async function svgToPng(svg, options = {}) {
     });
     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");
@@ -134,18 +139,19 @@ async function svgToPng(svg, options = {}) {
 }
 function backgroundOf(el) {
   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 void 0;
 }
 function resolveCssColor(value, within) {
   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;
 }
@@ -155,6 +161,7 @@ function fileStem(title, fallback) {
 }
 export {
   backgroundOf,
+  clickLink,
   csvField,
   downloadFile,
   fileStem,