@leavepulse/ui 0.77.2 → 0.78.0

package/dist/components/topologyGraph.js

@@ -0,0 +1,416 @@
+function neighborhood(edges, id) {
+  const nodes = /* @__PURE__ */ new Set([id]);
+  const touching = [];
+  for (const edge of edges) {
+    if (edge.source !== id && edge.target !== id) continue;
+    nodes.add(edge.source);
+    nodes.add(edge.target);
+    touching.push(edge.id);
+  }
+  return { nodes: [...nodes], edges: touching };
+}
+function findPath(edges, from, to, options = {}) {
+  const links = /* @__PURE__ */ new Map();
+  const link = (a, b, edge) => {
+    const list = links.get(a);
+    if (list) list.push({ next: b, edge });
+    else links.set(a, [{ next: b, edge }]);
+  };
+  for (const edge of edges) {
+    if (options.allow && !options.allow(edge)) continue;
+    link(edge.source, edge.target, edge.id);
+    if (!options.directed) link(edge.target, edge.source, edge.id);
+  }
+  const cameBy = /* @__PURE__ */ new Map([[from, null]]);
+  const queue = [from];
+  for (let head = 0; head < queue.length; head++) {
+    const at = queue[head];
+    if (at === to) break;
+    for (const { next, edge } of links.get(at) ?? []) {
+      if (cameBy.has(next)) continue;
+      cameBy.set(next, { from: at, edge });
+      queue.push(next);
+    }
+  }
+  if (!cameBy.has(to)) return null;
+  const path = { nodes: [to], edges: [] };
+  for (let step = cameBy.get(to); step; step = cameBy.get(step.from)) {
+    path.nodes.unshift(step.from);
+    path.edges.unshift(step.edge);
+  }
+  return path;
+}
+function fingerprint(item) {
+  const { position: _position, dimmed: _dimmed, data, ...rest } = item;
+  const { dimmed: _dataDimmed, ...own } = data ?? {};
+  return JSON.stringify(
+    [rest, own],
+    (_key, value) => value && typeof value === "object" && !Array.isArray(value) ? Object.fromEntries(Object.entries(value).sort(([a], [b]) => a < b ? -1 : 1)) : value
+  );
+}
+function compare(before, after) {
+  const old = new Map(before.map((item) => [item.id, item]));
+  const fresh = new Set(after.map((item) => item.id));
+  return {
+    added: after.filter((item) => !old.has(item.id)).map((item) => item.id),
+    removed: before.filter((item) => !fresh.has(item.id)).map((item) => item.id),
+    changed: after.filter((item) => old.has(item.id) && fingerprint(old.get(item.id)) !== fingerprint(item)).map((item) => item.id)
+  };
+}
+function diffTopology(before, after) {
+  const nodes = compare(before.nodes, after.nodes);
+  const edges = compare(before.edges, after.edges);
+  return {
+    addedNodes: nodes.added,
+    removedNodes: nodes.removed,
+    changedNodes: nodes.changed,
+    addedEdges: edges.added,
+    removedEdges: edges.removed,
+    changedEdges: edges.changed
+  };
+}
+const DEFAULT_NODE_WIDTH = 220;
+const DEFAULT_NODE_HEIGHT = 96;
+const DEFAULT_LAYER_GAP = 96;
+const DEFAULT_NODE_GAP = 32;
+const DEFAULT_GROUP_GAP = 72;
+const ORDER_SWEEPS = 4;
+function topLevelOf(nodes) {
+  const parents = new Map(nodes.map((node) => [node.id, node.parent]));
+  const top = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    let at = node.id;
+    const seen = /* @__PURE__ */ new Set([at]);
+    for (let up = parents.get(at); up && parents.has(up) && !seen.has(up); up = parents.get(at)) {
+      at = up;
+      seen.add(at);
+    }
+    top.set(node.id, at);
+  }
+  return top;
+}
+function acyclicLinks(ids, links) {
+  const out = new Map(ids.map((id) => [id, []]));
+  for (const [a, b] of links) {
+    const list = out.get(a);
+    if (list && out.has(b) && a !== b && !list.includes(b)) list.push(b);
+  }
+  const state = /* @__PURE__ */ new Map();
+  const kept = [];
+  for (const root of ids) {
+    if (state.has(root)) continue;
+    state.set(root, "open");
+    const stack = [{ id: root, next: 0 }];
+    while (stack.length) {
+      const top = stack[stack.length - 1];
+      const target = out.get(top.id)[top.next++];
+      if (target === void 0) {
+        state.set(top.id, "done");
+        stack.pop();
+      } else if (state.get(target) !== "open") {
+        kept.push([top.id, target]);
+        if (!state.has(target)) {
+          state.set(target, "open");
+          stack.push({ id: target, next: 0 });
+        }
+      }
+    }
+  }
+  return kept;
+}
+function rankOf(ids, links) {
+  const rank = new Map(ids.map((id) => [id, 0]));
+  const waiting = new Map(ids.map((id) => [id, 0]));
+  const out = new Map(ids.map((id) => [id, []]));
+  for (const [a, b] of links) {
+    out.get(a).push(b);
+    waiting.set(b, waiting.get(b) + 1);
+  }
+  const queue = ids.filter((id) => waiting.get(id) === 0);
+  for (let head = 0; head < queue.length; head++) {
+    const at = queue[head];
+    for (const next of out.get(at)) {
+      rank.set(next, Math.max(rank.get(next), rank.get(at) + 1));
+      waiting.set(next, waiting.get(next) - 1);
+      if (waiting.get(next) === 0) queue.push(next);
+    }
+  }
+  return rank;
+}
+function orderLayers(layers, links) {
+  const around = /* @__PURE__ */ new Map();
+  const add = (a, b) => around.set(a, [...around.get(a) ?? [], b]);
+  for (const [a, b] of links) {
+    add(a, b);
+    add(b, a);
+  }
+  for (let sweep = 0; sweep < ORDER_SWEEPS; sweep++) {
+    const down = sweep % 2 === 0;
+    const place = new Map(layers.flatMap((layer) => layer.map((id, i) => [id, i])));
+    for (let i = 0; i < layers.length; i++) {
+      const at = down ? i : layers.length - 1 - i;
+      const weight = (id, fallback) => {
+        const known = (around.get(id) ?? []).map((other) => place.get(other)).filter((n) => n !== void 0);
+        return known.length ? known.reduce((sum, n) => sum + n, 0) / known.length : fallback;
+      };
+      const ranked = layers[at].map((id, index) => ({ id, index, weight: weight(id, index) }));
+      ranked.sort((a, b) => a.weight - b.weight || a.index - b.index);
+      layers[at] = ranked.map((entry) => entry.id);
+      layers[at].forEach((id, index) => place.set(id, index));
+    }
+  }
+}
+function layeredLayout(nodes, edges, options = {}) {
+  const vertical = options.direction === "TB";
+  const layerGap = options.layerGap ?? DEFAULT_LAYER_GAP;
+  const nodeGap = options.nodeGap ?? DEFAULT_NODE_GAP;
+  const groupGap = options.groupGap ?? DEFAULT_GROUP_GAP;
+  const width = (node) => node.width ?? options.nodeWidth ?? DEFAULT_NODE_WIDTH;
+  const height = (node) => node.height ?? options.nodeHeight ?? DEFAULT_NODE_HEIGHT;
+  const along = (node) => vertical ? height(node) : width(node);
+  const across = (node) => vertical ? width(node) : height(node);
+  const top = topLevelOf(nodes);
+  const byId = new Map(nodes.map((node) => [node.id, node]));
+  const roots = nodes.filter((node) => top.get(node.id) === node.id);
+  const links = edges.flatMap((edge) => {
+    const a = top.get(edge.source);
+    const b = top.get(edge.target);
+    return a && b ? [[a, b]] : [];
+  });
+  const bands = /* @__PURE__ */ new Map();
+  for (const node of roots) {
+    const key = options.groupOf?.(node) ?? "";
+    const band = bands.get(key);
+    if (band) band.push(node);
+    else bands.set(key, [node]);
+  }
+  const positions = /* @__PURE__ */ new Map();
+  let bandStart = 0;
+  for (const band of bands.values()) {
+    const ids = band.map((node) => node.id);
+    const acyclic = acyclicLinks(ids, links);
+    const rank = rankOf(ids, acyclic);
+    const layers = [];
+    for (const id of ids) (layers[rank.get(id)] ??= []).push(id);
+    orderLayers(layers, acyclic);
+    const extent = (layer) => layer.reduce((sum, id) => sum + across(byId.get(id)) + nodeGap, -nodeGap);
+    const bandSize = Math.max(...layers.map(extent));
+    let main = 0;
+    for (const layer of layers) {
+      let cross = bandStart + (bandSize - extent(layer)) / 2;
+      for (const id of layer) {
+        positions.set(id, vertical ? { x: cross, y: main } : { x: main, y: cross });
+        cross += across(byId.get(id)) + nodeGap;
+      }
+      main += Math.max(...layer.map((id) => along(byId.get(id)))) + layerGap;
+    }
+    bandStart += bandSize + groupGap;
+  }
+  return positions;
+}
+const LANE_PADDING = 24;
+const LANE_HEADER = 28;
+function groupBoxes(nodes, keyOf, options = {}) {
+  const padding = options.padding ?? LANE_PADDING;
+  const header = options.header ?? LANE_HEADER;
+  const edges = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const key = node.parent ? void 0 : keyOf(node);
+    if (key === void 0) continue;
+    const { x, y } = node.position;
+    const right = x + (node.width ?? options.nodeWidth ?? DEFAULT_NODE_WIDTH);
+    const bottom = y + (node.height ?? options.nodeHeight ?? DEFAULT_NODE_HEIGHT);
+    const seen = edges.get(key);
+    edges.set(key, seen ? { left: Math.min(seen.left, x), top: Math.min(seen.top, y), right: Math.max(seen.right, right), bottom: Math.max(seen.bottom, bottom) } : { left: x, top: y, right, bottom });
+  }
+  return [...edges].map(([key, e]) => ({
+    key,
+    box: {
+      x: e.left - padding,
+      y: e.top - padding - header,
+      width: e.right - e.left + padding * 2,
+      height: e.bottom - e.top + padding * 2 + header
+    }
+  }));
+}
+const CHILD_WIDTH = 170;
+const CHILD_HEIGHT = 56;
+const FRAME_PADDING = 16;
+function frameSize(children, options = {}) {
+  const padding = options.padding ?? FRAME_PADDING;
+  let width = options.minWidth ?? 0;
+  let height = options.minHeight ?? 0;
+  for (const child of children) {
+    width = Math.max(width, child.position.x + (child.width ?? options.childWidth ?? CHILD_WIDTH) + padding);
+    height = Math.max(height, child.position.y + (child.height ?? options.childHeight ?? CHILD_HEIGHT) + padding);
+  }
+  return { width, height };
+}
+function mergeEdges(edges, mapId) {
+  const merged = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    const source = mapId(edge.source);
+    const target = mapId(edge.target);
+    if (source === void 0 || target === void 0 || source === target) continue;
+    const id = `${source}\0${target}`;
+    const seen = merged.get(id);
+    if (seen) seen.members.push(edge.id);
+    else merged.set(id, { id, source, target, members: [edge.id] });
+  }
+  return [...merged.values()];
+}
+const CLUSTER_PREFIX = "lp-cluster:";
+function clusterGraph(nodes, edges, keyOf) {
+  const top = topLevelOf(nodes);
+  const byId = new Map(nodes.map((node) => [node.id, node]));
+  const groups = /* @__PURE__ */ new Map();
+  const standsFor = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const root = byId.get(top.get(node.id));
+    const key = keyOf(root);
+    if (key === void 0) {
+      standsFor.set(node.id, node.id);
+      continue;
+    }
+    standsFor.set(node.id, CLUSTER_PREFIX + key);
+    if (node !== root) continue;
+    const group = groups.get(key);
+    if (group) group.push(node);
+    else groups.set(key, [node]);
+  }
+  const clusters = [...groups].map(([key, members]) => ({
+    id: CLUSTER_PREFIX + key,
+    key,
+    position: {
+      x: members.reduce((sum, node) => sum + node.position.x, 0) / members.length,
+      y: members.reduce((sum, node) => sum + node.position.y, 0) / members.length
+    },
+    members: nodes.filter((node) => standsFor.get(node.id) === CLUSTER_PREFIX + key).map((node) => node.id)
+  }));
+  return {
+    nodes: nodes.filter((node) => standsFor.get(node.id) === node.id),
+    clusters,
+    edges: mergeEdges(edges, (id) => standsFor.get(id))
+  };
+}
+function collapseChildren(nodes, edges) {
+  const top = topLevelOf(nodes);
+  return { nodes: nodes.filter((node) => top.get(node.id) === node.id), edges: mergeEdges(edges, (id) => top.get(id)) };
+}
+const SIMPLE_BELOW_ZOOM = 0.7;
+const OVERVIEW_BELOW_ZOOM = 0.45;
+function detailAtZoom(zoom, grouped) {
+  if (zoom < OVERVIEW_BELOW_ZOOM && grouped) return "overview";
+  return zoom < SIMPLE_BELOW_ZOOM ? "simple" : "full";
+}
+function absolutePositions(nodes) {
+  const byId = new Map(nodes.map((node) => [node.id, node]));
+  const resolved = /* @__PURE__ */ new Map();
+  const resolve = (node, seen) => {
+    const known = resolved.get(node.id);
+    if (known) return known;
+    const parent = node.parent ? byId.get(node.parent) : void 0;
+    const base = parent && !seen.has(parent.id) ? resolve(parent, seen.add(node.id)) : { x: 0, y: 0 };
+    const point = { x: base.x + node.position.x, y: base.y + node.position.y };
+    resolved.set(node.id, point);
+    return point;
+  };
+  for (const node of nodes) resolve(node, /* @__PURE__ */ new Set());
+  return resolved;
+}
+function nodeName(node) {
+  const name = node.data?.name;
+  return node.label ?? (typeof name === "string" ? name : node.id);
+}
+function findNodes(nodes, query) {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return [];
+  const score = (node) => {
+    const at = nodeName(node).toLowerCase().indexOf(needle);
+    if (at === 0) return 0;
+    if (at > 0) return 1;
+    return node.id.toLowerCase().includes(needle) ? 2 : -1;
+  };
+  return nodes.map((node) => ({ node, rank: score(node) })).filter((entry) => entry.rank >= 0).sort((a, b) => a.rank - b.rank).map((entry) => entry.node);
+}
+const OFF_AXIS_PENALTY = 2;
+function nearestInDirection(positions, from, direction) {
+  const origin = positions.get(from);
+  if (!origin) return null;
+  let best = null;
+  let bestCost = Infinity;
+  for (const [id, point] of positions) {
+    if (id === from) continue;
+    const dx = point.x - origin.x;
+    const dy = point.y - origin.y;
+    const main = { up: -dy, down: dy, left: -dx, right: dx }[direction];
+    if (main <= 0) continue;
+    const side = direction === "up" || direction === "down" ? dx : dy;
+    const cost = main + Math.abs(side) * OFF_AXIS_PENALTY;
+    if (cost < bestCost) {
+      bestCost = cost;
+      best = id;
+    }
+  }
+  return best;
+}
+function edgeLabelText(edge) {
+  const parts = [
+    edge.kind,
+    edge.rtt === void 0 ? void 0 : `${Math.round(edge.rtt)} ms`,
+    edge.loss === void 0 ? void 0 : `${edge.loss}% loss`
+  ].filter((part) => part !== void 0);
+  return parts.length ? parts.join(" · ") : void 0;
+}
+const SVG_MARGIN = 24;
+const SVG_RADIUS = 10;
+const SVG_FONT_SIZE = 12;
+const SVG_FRAME_LABEL_Y = 18;
+const escapeXml = (text) => text.replace(/[&<>"']/g, (char) => `&#${char.charCodeAt(0)};`);
+function topologyToSvg(nodes, edges, theme) {
+  const left = Math.min(0, ...nodes.map((n) => n.x)) - SVG_MARGIN;
+  const top = Math.min(0, ...nodes.map((n) => n.y)) - SVG_MARGIN;
+  const width = Math.max(0, ...nodes.map((n) => n.x + n.width)) + SVG_MARGIN - left;
+  const height = Math.max(0, ...nodes.map((n) => n.y + n.height)) + SVG_MARGIN - top;
+  const byId = new Map(nodes.map((node) => [node.id, node]));
+  const middle = (n) => ({ x: n.x + n.width / 2, y: n.y + n.height / 2 });
+  const wires = edges.flatMap((edge) => {
+    const from = byId.get(edge.source);
+    const to = byId.get(edge.target);
+    if (!from || !to) return [];
+    const a = middle(from);
+    const b = middle(to);
+    const dash = edge.dash && edge.dash !== "0" ? ` stroke-dasharray="${escapeXml(edge.dash)}"` : "";
+    const line = `<line x1="${a.x}" y1="${a.y}" x2="${b.x}" y2="${b.y}" stroke="${escapeXml(edge.color ?? theme.edge)}" stroke-width="2"${dash}/>`;
+    const label = edge.label ? `<text x="${(a.x + b.x) / 2}" y="${(a.y + b.y) / 2}" text-anchor="middle" fill="${escapeXml(theme.text)}">${escapeXml(edge.label)}</text>` : "";
+    return [line + label];
+  });
+  const box = (n) => {
+    const textX = n.x + n.width / 2;
+    const textY = n.frame ? n.y + SVG_FRAME_LABEL_Y : n.y + n.height / 2;
+    return `<rect x="${n.x}" y="${n.y}" width="${n.width}" height="${n.height}" rx="${SVG_RADIUS}" fill="${escapeXml(theme.surface)}" stroke="${escapeXml(theme.line)}"/><text x="${textX}" y="${textY}" text-anchor="middle" dominant-baseline="middle" fill="${escapeXml(theme.text)}">${escapeXml(n.label)}</text>`;
+  };
+  const frames = nodes.filter((n) => n.frame).map(box);
+  const cards = nodes.filter((n) => !n.frame).map(box);
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="${left} ${top} ${width} ${height}" font-family="sans-serif" font-size="${SVG_FONT_SIZE}"><rect x="${left}" y="${top}" width="${width}" height="${height}" fill="${escapeXml(theme.background)}"/>` + frames.join("") + wires.join("") + cards.join("") + "</svg>";
+}
+export {
+  OVERVIEW_BELOW_ZOOM,
+  SIMPLE_BELOW_ZOOM,
+  absolutePositions,
+  clusterGraph,
+  collapseChildren,
+  detailAtZoom,
+  diffTopology,
+  edgeLabelText,
+  findNodes,
+  findPath,
+  frameSize,
+  groupBoxes,
+  layeredLayout,
+  mergeEdges,
+  nearestInDirection,
+  neighborhood,
+  nodeName,
+  topologyToSvg
+};

package/dist/components/tour.js

@@ -1,3 +1,4 @@
+import { nodeWindow } from "../composables/realm.js";
 function holeOf(target, padding, viewport) {
   const x = Math.max(0, target.x - padding);
   const y = Math.max(0, target.y - padding);
@@ -37,8 +38,9 @@ function holeClip(hole, viewport, radius) {
 }
 function openContextMenu(el) {
   const box = el.getBoundingClientRect();
+  const win = nodeWindow(el);
   el.dispatchEvent(
-    new MouseEvent("contextmenu", {
+    new win.MouseEvent("contextmenu", {
       bubbles: true,
       cancelable: true,
       button: 2,
@@ -49,8 +51,8 @@ function openContextMenu(el) {
   return () => {
     const outside = { bubbles: true, cancelable: true, clientX: 0, clientY: 0 };
     const body = el.ownerDocument.body;
-    body.dispatchEvent(new PointerEvent("pointerdown", outside));
-    body.dispatchEvent(new PointerEvent("pointerup", outside));
+    body.dispatchEvent(new win.PointerEvent("pointerdown", outside));
+    body.dispatchEvent(new win.PointerEvent("pointerup", outside));
   };
 }
 export {

package/dist/components/videoBackdrop.js

@@ -1,16 +1,17 @@
+import { clamp } from "../composables/clamp.js";
 import { splitTime } from "./timeSpan.js";
 function planLoop(duration, options = {}) {
   if (!Number.isFinite(duration) || duration <= 0) return { from: 0, to: 0, fade: 0 };
-  const clamp = (value) => Math.min(duration, Math.max(0, value));
-  let from = clamp(options.start ?? 0);
-  let to = clamp(options.end ?? duration);
+  const within = (value) => clamp(value, 0, duration);
+  let from = within(options.start ?? 0);
+  let to = within(options.end ?? duration);
   if (to < from) [from, to] = [to, from];
-  const minLength = Math.min(duration, Math.max(0, options.minLength ?? 0.5));
+  const minLength = clamp(options.minLength ?? 0.5, 0, duration);
   if (to - from < minLength) {
     to = Math.min(duration, from + minLength);
     from = Math.max(0, to - minLength);
   }
-  const fade = Math.min(Math.max(0, options.crossfade ?? 0), (to - from) / 2);
+  const fade = clamp(options.crossfade ?? 0, 0, (to - from) / 2);
   return { from, to, fade };
 }
 function seamReached(plan, time) {
@@ -18,7 +19,7 @@ function seamReached(plan, time) {
 }
 function seamProgress(plan, incomingTime) {
   if (plan.fade <= 0) return 1;
-  return Math.min(1, Math.max(0, (incomingTime - plan.from) / plan.fade));
+  return clamp((incomingTime - plan.from) / plan.fade, 0, 1);
 }
 function isNativeLoop(plan, duration) {
   return plan.fade === 0 && plan.from === 0 && plan.to >= duration;

package/dist/composables/clamp.d.ts

@@ -0,0 +1,2 @@
+/** `value` held between `min` and `max`. When they cross, `max` wins. */
+export declare const clamp: (value: number, min: number, max: number) => number;

package/dist/composables/clamp.js

@@ -0,0 +1,4 @@
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+export {
+  clamp
+};

package/dist/composables/devWarn.d.ts

@@ -0,0 +1,3 @@
+export declare function isDev(): boolean;
+/** A warning for the developer only. */
+export declare function devWarn(message: string): void;

package/dist/composables/devWarn.js

@@ -0,0 +1,14 @@
+function isDev() {
+  try {
+    return process.env.NODE_ENV !== "production";
+  } catch {
+    return false;
+  }
+}
+function devWarn(message) {
+  if (isDev()) console.warn(`[@leavepulse/ui] ${message}`);
+}
+export {
+  devWarn,
+  isDev
+};

package/dist/composables/easing.d.ts

@@ -8,8 +8,16 @@
  * A plain function, not a reactive composable: it is read at the moment an
  * animation starts, and a component that also needs to RE-RENDER when the
  * setting changes mid-session should use `usePrefersReducedMotion`.
+ *
+ * Which one to use: a one-off animation reads this as it starts; anything that
+ * keeps running (a loop, a spring, a video) follows the reactive one or the
+ * media query's own change event, so it stops without a new action; a CSS
+ * transition uses `prefers-reduced-motion` in CSS.
+ *
+ * `win` is the window to ask, for a caller inside an LpFrame.
  */
-export declare const prefersReducedMotion: () => boolean;
+export declare const prefersReducedMotion: (win?: Window) => boolean;
+type TokenScope = Element | Document;
 /**
  * A motion token's value, for an API that cannot take a `var()`.
  *
@@ -21,13 +29,13 @@ export declare const prefersReducedMotion: () => boolean;
  * Reading the custom property keeps them themeable. The fallback covers SSR and
  * the frame before tokens are applied.
  */
-export declare const easingToken: (name: "ease-emphasized" | "ease-travel" | "ease-settle", fallback?: string) => string;
+export declare const easingToken: (name: "ease-emphasized" | "ease-travel" | "ease-settle", fallback?: string, scope?: TokenScope) => string;
 /**
  * A duration token in milliseconds, for an animation or a timer driven in
  * script. Same reasoning as `easingToken`: a typed-out 220 would not follow a
  * theme that retunes the token.
  */
-export declare const durationToken: (name: "duration-fast" | "duration-medium", fallback?: number) => number;
+export declare const durationToken: (name: "duration-fast" | "duration-medium", fallback?: number, scope?: TokenScope) => number;
 /**
  * Comes to rest — `--ease-settle`'s shape without the overshoot.
  *
@@ -70,4 +78,5 @@ export declare const cubicBezier: (x1: number, y1: number, x2: number, y2: numbe
  * `linear()` list) falls back to `easeOut`, which has the same "arrives and
  * settles" intent as every curve the kit defines.
  */
-export declare const tokenEase: (name: "ease-emphasized" | "ease-travel" | "ease-settle") => ((t: number) => number);
+export declare const tokenEase: (name: "ease-emphasized" | "ease-travel" | "ease-settle", scope?: TokenScope) => ((t: number) => number);
+export {};

package/dist/composables/easing.js

@@ -1,12 +1,18 @@
-const prefersReducedMotion = () => typeof window !== "undefined" && (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false);
-const easingToken = (name, fallback = "cubic-bezier(0.2, 0, 0, 1)") => {
-  if (typeof window === "undefined" || !window.getComputedStyle) return fallback;
-  const value = getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim();
-  return value || fallback;
+const prefersReducedMotion = (win) => {
+  const target = win ?? (typeof window === "undefined" ? void 0 : window);
+  return target?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
 };
-const durationToken = (name, fallback = 220) => {
-  if (typeof window === "undefined" || !window.getComputedStyle) return fallback;
-  const raw = getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim();
+function readToken(name, scope) {
+  if (typeof window === "undefined") return null;
+  const el = scope ? "documentElement" in scope ? scope.documentElement : scope : document.documentElement;
+  const view = el.ownerDocument?.defaultView ?? window;
+  if (!view.getComputedStyle) return null;
+  return view.getComputedStyle(el).getPropertyValue(`--${name}`).trim();
+}
+const easingToken = (name, fallback = "cubic-bezier(0.2, 0, 0, 1)", scope) => readToken(name, scope) || fallback;
+const durationToken = (name, fallback = 220, scope) => {
+  const raw = readToken(name, scope);
+  if (raw === null) return fallback;
   const ms = Number.parseFloat(raw);
   return Number.isFinite(ms) ? raw.endsWith("ms") || !raw.endsWith("s") ? ms : ms * 1e3 : fallback;
 };
@@ -55,8 +61,8 @@ const cubicBezier = (x1, y1, x2, y2) => {
     return y(s);
   };
 };
-const tokenEase = (name) => {
-  const match = /cubic-bezier\(([^)]+)\)/.exec(easingToken(name));
+const tokenEase = (name, scope) => {
+  const match = /cubic-bezier\(([^)]+)\)/.exec(easingToken(name, void 0, scope));
   const n = match?.[1].split(",").map((p) => Number.parseFloat(p));
   return n && n.length === 4 && n.every(Number.isFinite) ? cubicBezier(n[0], n[1], n[2], n[3]) : easeOut;
 };

package/dist/composables/overlayHistory.js

@@ -1,5 +1,6 @@
 const KEY = "__lpOverlay";
 const SETTLE_MS = 300;
+const STEP_TIMEOUT_MS = 1500;
 const STATE_KEY = /* @__PURE__ */ Symbol.for("@leavepulse/ui:overlay-history");
 const g = globalThis;
 const fresh = {
@@ -16,7 +17,8 @@ const fresh = {
   href: "",
   serial: 0,
   internal: false,
-  settle: 0
+  settle: 0,
+  stalled: 0
 };
 const s = g[STATE_KEY] ??= fresh;
 function markOf(state) {
@@ -44,9 +46,18 @@ function own(run) {
 function silentGo(delta) {
   if (delta === 0) return;
   s.silent++;
+  window.clearTimeout(s.stalled);
+  s.stalled = window.setTimeout(abandonSteps, STEP_TIMEOUT_MS);
   mute();
   own(() => history.go(delta));
 }
+function abandonSteps() {
+  s.silent = 0;
+  s.keep = null;
+  s.href = location.href;
+  flushWaiting();
+  mute();
+}
 function whenSettled(run) {
   if (s.silent > 0) s.waiting.push(run);
   else run();
@@ -76,6 +87,7 @@ function handlePop(event) {
   s.href = location.href;
   if (s.silent > 0) {
     s.silent--;
+    if (s.silent === 0) window.clearTimeout(s.stalled);
     const keep = s.silent === 0 ? s.keep : null;
     if (s.silent === 0) s.keep = null;
     if (keep && keep.href !== location.href) restore(keep, event);
@@ -179,6 +191,7 @@ function setHistoryRouter(router) {
   if (s.router && s.router !== router) s.router.listening = true;
   s.router = router;
   if (typeof window === "undefined") return;
+  install();
   window.removeEventListener("popstate", afterPop);
   window.addEventListener("popstate", afterPop);
   mute();

package/dist/composables/pointerDrag.d.ts

@@ -0,0 +1,15 @@
+export interface PointerDragHandlers {
+    move: (event: PointerEvent) => void;
+    /** `completed` is false for a cancelled or lost pointer: nothing should be committed. */
+    end: (completed: boolean) => void;
+    /** Hold this cursor over the whole page for the drag, the way a resize grip wants. */
+    cursor?: string;
+}
+/**
+ * Follow a pointer from the handle it pressed until it lets go, however that
+ * ends: release, a cancelled touch, a lost capture or the returned stop. The
+ * end runs once. Everything happens on the handle, which holds the capture, so
+ * it works inside an LpFrame, and the body's text selection is off meanwhile,
+ * in the handle's own window, and put back as it was.
+ */
+export declare function startPointerDrag(event: PointerEvent, handlers: PointerDragHandlers): () => void;