@leavepulse/ui 0.81.0 → 0.82.0

package/dist/components/LpWindow.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpWindow-DJxE8Zl-.js";
+import { _ as _sfc_main } from "../chunks/LpWindow-RVcP436Z.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpWorkspaceSwitcher.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpWorkspaceSwitcher-Bpf41Bw5.js";
+import { _ as _sfc_main } from "../chunks/LpWorkspaceSwitcher-D0WOz1Fg.js";
 export {
   _sfc_main as default
 };

package/dist/components/MenuTitle.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/MenuTitle-CMjvLsvC.js";
+import { _ as _sfc_main } from "../chunks/MenuTitle-D8Umab23.js";
 export {
   _sfc_main as default
 };

package/dist/components/OptionContent.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/OptionContent-DY8NaG8s.js";
+import { _ as _sfc_main } from "../chunks/OptionContent-DCnX_KRK.js";
 export {
   _sfc_main as default
 };

package/dist/components/PickerField.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/PickerField-CgfkaBgg.js";
+import { _ as _sfc_main } from "../chunks/PickerField-ChjY27bm.js";
 export {
   _sfc_main as default
 };

package/dist/components/RevealToggle.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/RevealToggle-CPMXxaKv.js";
+import { _ as _sfc_main } from "../chunks/RevealToggle-MaL7PEjr.js";
 export {
   _sfc_main as default
 };

package/dist/components/TourCard.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/TourCard-D4b3lMHi.js";
+import { _ as _sfc_main } from "../chunks/TourCard-oXZSpHKb.js";
 export {
   _sfc_main as default
 };

package/dist/components/chartWindow.js

@@ -1,4 +1,5 @@
 import { clamp } from "../composables/clamp.js";
+import { shiftSpan, zoomSpan } from "../composables/span.js";
 const MIN_RANGE_POINTS = 2;
 const SLOTS_PER_BUCKET = 2;
 const LTTB_MIN_TARGET = 3;
@@ -16,16 +17,11 @@ function clampRange(range, count) {
 }
 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);
+  const at = from.start + (from.end - from.start) * clamp(anchor, 0, 1);
+  return clampRange(zoomSpan(from.start, from.end, at, factor, MIN_RANGE_POINTS - 1), 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);
+  return clampRange(shiftSpan(range.start, range.end, delta, 0, count - 1), count);
 }
 function minMaxBuckets(series, slots) {
   const count = series.reduce((n, values2) => Math.max(n, values2.length), 0);

package/dist/components/menuWhen.js

@@ -1,5 +1,5 @@
 import { defineComponent, h } from "vue";
-import { _ as _sfc_main } from "../chunks/LpContextMenu-bn5bc9t7.js";
+import { _ as _sfc_main } from "../chunks/LpContextMenu-DcHPdW-t.js";
 const MenuWhen = defineComponent({
   name: "MenuWhen",
   inheritAttrs: false,

package/dist/components/videoFrames.d.ts

@@ -0,0 +1,37 @@
+export interface FrameRequest {
+    key: string;
+    time: number;
+}
+type VideoWithFrames = HTMLVideoElement & {
+    requestVideoFrameCallback?: (cb: () => void) => number;
+    fastSeek?: (time: number) => void;
+};
+export declare class FrameSampler {
+    private readonly video;
+    private readonly size;
+    private readonly onFrame;
+    private queue;
+    private running;
+    private disposed;
+    private cache;
+    constructor(video: VideoWithFrames, size: () => {
+        width: number;
+        height: number;
+    }, onFrame: (key: string, canvas: HTMLCanvasElement) => void);
+    /** A frame taken earlier, if it is still kept. */
+    cached(key: string): HTMLCanvasElement | undefined;
+    /** The frames wanted now, most wanted first; whatever was queued before is dropped. */
+    want(requests: FrameRequest[]): void;
+    dispose(): void;
+    private pump;
+    private take;
+    private framePresented;
+    private once;
+}
+/**
+ * Seconds one still stands for at this zoom: the shortest power of two that
+ * keeps a still at least `minPx` wide. Stills sit at fixed points in time, so
+ * panning reuses the ones already taken and a zoom step of two keeps half.
+ */
+export declare function stillSpan(secondsPerPx: number, minPx: number): number;
+export {};

package/dist/components/videoFrames.js

@@ -0,0 +1,134 @@
+const SEEK_TIMEOUT_MS = 4e3;
+const FRAME_TIMEOUT_MS = 250;
+const CACHE_LIMIT = 240;
+class FrameSampler {
+  constructor(video, size, onFrame) {
+    this.video = video;
+    this.size = size;
+    this.onFrame = onFrame;
+  }
+  video;
+  size;
+  onFrame;
+  queue = [];
+  running = false;
+  disposed = false;
+  cache = /* @__PURE__ */ new Map();
+  /** A frame taken earlier, if it is still kept. */
+  cached(key) {
+    const hit = this.cache.get(key);
+    if (hit) {
+      this.cache.delete(key);
+      this.cache.set(key, hit);
+    }
+    return hit;
+  }
+  /** The frames wanted now, most wanted first; whatever was queued before is dropped. */
+  want(requests) {
+    this.queue = requests.filter((r) => !this.cache.has(r.key));
+    void this.pump();
+  }
+  dispose() {
+    this.disposed = true;
+    this.queue = [];
+    this.cache.clear();
+  }
+  async pump() {
+    if (this.running) return;
+    this.running = true;
+    try {
+      while (!this.disposed && this.queue.length) {
+        const next = this.queue.shift();
+        if (this.cache.has(next.key)) continue;
+        const canvas = await this.take(next.time);
+        if (this.disposed) return;
+        if (!canvas) continue;
+        this.cache.set(next.key, canvas);
+        if (this.cache.size > CACHE_LIMIT) this.cache.delete(this.cache.keys().next().value);
+        this.onFrame(next.key, canvas);
+      }
+    } finally {
+      this.running = false;
+    }
+  }
+  async take(time) {
+    const video = this.video;
+    if (video.readyState < 1) {
+      const ready = await this.once("loadedmetadata", SEEK_TIMEOUT_MS);
+      if (!ready) return null;
+    }
+    const target = Math.min(Math.max(0, time), Number.isFinite(video.duration) ? Math.max(0, video.duration - 0.05) : time);
+    const seeked = this.once("seeked", SEEK_TIMEOUT_MS);
+    if (video.fastSeek) video.fastSeek(target);
+    else video.currentTime = target;
+    if (!await seeked) return null;
+    await this.framePresented();
+    if (this.disposed || !video.videoWidth) return null;
+    const { width, height } = this.size();
+    const ratio = Math.min(2, video.ownerDocument.defaultView?.devicePixelRatio ?? 1);
+    const canvas = video.ownerDocument.createElement("canvas");
+    canvas.width = Math.max(1, Math.round(width * ratio));
+    canvas.height = Math.max(1, Math.round(height * ratio));
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    const scale = Math.max(canvas.width / video.videoWidth, canvas.height / video.videoHeight);
+    const w = video.videoWidth * scale;
+    const h = video.videoHeight * scale;
+    try {
+      ctx.drawImage(video, (canvas.width - w) / 2, (canvas.height - h) / 2, w, h);
+    } catch {
+      return null;
+    }
+    return canvas;
+  }
+  /*
+   * `seeked` says the position moved, not that its picture is ready to draw:
+   * Chromium can still hand the previous frame for a moment. Wait for the
+   * frame where the engine reports it, and a couple of paints where not.
+   */
+  framePresented() {
+    const video = this.video;
+    const win = video.ownerDocument.defaultView;
+    return new Promise((resolve) => {
+      let done = false;
+      const finish = () => {
+        if (done) return;
+        done = true;
+        resolve();
+      };
+      if (video.requestVideoFrameCallback) {
+        video.requestVideoFrameCallback(finish);
+        win?.setTimeout(finish, FRAME_TIMEOUT_MS);
+      } else if (win) {
+        win.requestAnimationFrame(() => win.requestAnimationFrame(finish));
+      } else finish();
+    });
+  }
+  once(event, timeout) {
+    const video = this.video;
+    const win = video.ownerDocument.defaultView;
+    return new Promise((resolve) => {
+      const finish = (ok) => {
+        video.removeEventListener(event, onEvent);
+        video.removeEventListener("error", onError);
+        if (timer) win?.clearTimeout(timer);
+        resolve(ok);
+      };
+      const onEvent = () => finish(true);
+      const onError = () => finish(false);
+      video.addEventListener(event, onEvent);
+      video.addEventListener("error", onError);
+      const timer = win?.setTimeout(() => finish(false), timeout);
+    });
+  }
+}
+function stillSpan(secondsPerPx, minPx) {
+  const wanted = secondsPerPx * minPx;
+  let span = 1 / 8;
+  while (span < wanted && span < 8192) span *= 2;
+  return span;
+}
+export {
+  FrameSampler,
+  stillSpan
+};

package/dist/components/videoTrim.d.ts

@@ -0,0 +1,75 @@
+export type TimeRange = [number, number];
+/** A rectangle on the video's frame, every value a fraction of it (0..1). */
+export interface FrameRegion {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface RangeLimits {
+    duration: number;
+    /** Shortest clip, seconds. */
+    minClip: number;
+    /** Longest clip, seconds; Infinity for none. */
+    maxClip: number;
+}
+/**
+ * A typed time, the inverse of `formatClipTime`: "75", "75.5", "1:15",
+ * "75:00.5", and "1:02:03.25" for whoever types the hours. A comma reads as
+ * the decimal point, as a Russian keyboard's numpad types it. Anything else,
+ * a negative or a seconds field past 59 after a colon, is null.
+ */
+export declare function parseClipTime(text: string): number | null;
+/** A range that keeps every limit: inside the video, no shorter than minClip, no longer than maxClip. */
+export declare function normalizeRange(range: TimeRange | null | undefined, limits: RangeLimits): TimeRange;
+/**
+ * One end dragged to `t`. The dragged end stops at a limit and the other end
+ * stays put: a handle that pushed its partner would move the clip's other
+ * edge without the person touching it.
+ */
+export declare function dragEnd(range: TimeRange, end: 0 | 1, t: number, limits: RangeLimits): TimeRange;
+/**
+ * One end set to `t` on purpose (the I or O key, a typed time). That end goes
+ * where it was told, and the other follows when a limit asks for it.
+ */
+export declare function setEnd(range: TimeRange, end: 0 | 1, t: number, limits: RangeLimits): TimeRange;
+export interface TimeView {
+    start: number;
+    end: number;
+}
+/** The view zoomed by `factor` (above 1 zooms in) around `anchor`, which stays where it is on screen. */
+export declare function zoomView(view: TimeView, anchor: number, factor: number, duration: number, minSpan: number): TimeView;
+/** The view moved by `delta` seconds, held inside the video. */
+export declare function shiftView(view: TimeView, delta: number, duration: number): TimeView;
+/** The view moved just enough to show `t`, with `margin` of its span to spare. */
+export declare function revealTime(view: TimeView, t: number, duration: number, margin?: number): TimeView;
+/** Seconds between ruler marks, so that marks stand at least `minPx` apart. */
+export declare function tickStep(span: number, width: number, minPx?: number): number;
+/** The ruler's marks within the view. */
+export declare function ticks(view: TimeView, step: number): number[];
+/**
+ * Where the picture sits in a box that shows it whole (object-fit: contain):
+ * the region is drawn on the picture, not on the black bars around it.
+ */
+export declare function containRect(boxWidth: number, boxHeight: number, videoWidth: number, videoHeight: number): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/** A region held inside the frame and no smaller than `minSize` a side. */
+export declare function clampRegion(r: FrameRegion, minSize?: number): FrameRegion;
+/** The region spanned by two corners, in either order, cut to the frame. */
+export declare function regionBetween(ax: number, ay: number, bx: number, by: number): FrameRegion;
+export type RegionHandle = "move" | "nw" | "ne" | "sw" | "se";
+/** The region after one of its handles moved by (dx, dy), fractions of the frame. */
+export declare function adjustRegion(r: FrameRegion, handle: RegionHandle, dx: number, dy: number, minSize?: number): FrameRegion;
+/**
+ * Why the editor has no video to show, as its `error` event reports it:
+ * - "load": the address did not answer (network, 404, an expired session);
+ * - "decode": the file arrived but is damaged;
+ * - "unsupported": a format or codec this browser cannot play (H.265 in
+ *   Chromium without hardware support, ProRes anywhere).
+ */
+export type VideoTrimErrorCause = "load" | "decode" | "unsupported";
+export declare function mediaErrorCause(error: MediaError | null): VideoTrimErrorCause;

package/dist/components/videoTrim.js

@@ -0,0 +1,127 @@
+import { clamp } from "../composables/clamp.js";
+import { shiftSpan, zoomSpan } from "../composables/span.js";
+const round = (t) => Math.round(t * 1e3) / 1e3;
+function parseClipTime(text) {
+  const value = text.trim().replace(",", ".");
+  if (!/^\d+(:\d{1,2}){0,2}(\.\d*)?$/.test(value)) return null;
+  const parts = value.split(":");
+  let total = 0;
+  for (const [i, part] of parts.entries()) {
+    const n = Number(part);
+    if (!Number.isFinite(n)) return null;
+    if (i > 0 && n >= 60) return null;
+    total = total * 60 + n;
+  }
+  return total;
+}
+function limitsOf(l) {
+  const duration = Math.max(0, l.duration);
+  const min = clamp(l.minClip, 0, duration);
+  const max = Math.max(min, l.maxClip);
+  return { duration, min, max };
+}
+function normalizeRange(range, limits) {
+  const { duration, min, max } = limitsOf(limits);
+  if (!range || !Number.isFinite(range[0]) || !Number.isFinite(range[1])) return [0, round(Math.min(duration, max))];
+  let [a, b] = range[0] <= range[1] ? range : [range[1], range[0]];
+  a = clamp(a, 0, Math.max(0, duration - min));
+  b = clamp(b, a + min, Math.min(duration, a + max));
+  return [round(a), round(b)];
+}
+function dragEnd(range, end, t, limits) {
+  const { duration, min, max } = limitsOf(limits);
+  const [a, b] = range;
+  if (end === 0) return [round(clamp(t, Math.max(0, b - max), b - min)), b];
+  return [a, round(clamp(t, a + min, Math.min(duration, a + max)))];
+}
+function setEnd(range, end, t, limits) {
+  const { duration, min, max } = limitsOf(limits);
+  const [a, b] = range;
+  if (end === 0) {
+    const start = clamp(t, 0, duration - min);
+    return [round(start), round(clamp(b, start + min, Math.min(duration, start + max)))];
+  }
+  const stop = clamp(t, min, duration);
+  return [round(clamp(a, Math.max(0, stop - max), stop - min)), round(stop)];
+}
+function zoomView(view, anchor, factor, duration, minSpan) {
+  const span = view.end - view.start;
+  const next = zoomSpan(view.start, view.end, anchor, Math.min(1 / factor, duration / (span || 1)), Math.min(minSpan, duration));
+  return shiftView(next, 0, duration);
+}
+function shiftView(view, delta, duration) {
+  const span = Math.min(view.end - view.start, duration);
+  return shiftSpan(view.start, view.start + span, delta, 0, duration);
+}
+function revealTime(view, t, duration, margin = 0.1) {
+  const span = view.end - view.start;
+  const pad = span * margin;
+  if (t < view.start + pad) return shiftView(view, t - pad - view.start, duration);
+  if (t > view.end - pad) return shiftView(view, t + pad - view.end, duration);
+  return view;
+}
+const TICK_STEPS = [0.1, 0.2, 0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300, 600, 900, 1800, 3600, 7200];
+function tickStep(span, width, minPx = 72) {
+  if (span <= 0 || width <= 0) return 1;
+  const perPx = span / width;
+  return TICK_STEPS.find((step) => step / perPx >= minPx) ?? TICK_STEPS[TICK_STEPS.length - 1];
+}
+function ticks(view, step) {
+  const out = [];
+  const first = Math.ceil(view.start / step - 1e-9) * step;
+  for (let t = first; t <= view.end + 1e-9 && out.length < 500; t += step) out.push(round(t));
+  return out;
+}
+function containRect(boxWidth, boxHeight, videoWidth, videoHeight) {
+  if (!videoWidth || !videoHeight || !boxWidth || !boxHeight) return { x: 0, y: 0, width: boxWidth, height: boxHeight };
+  const scale = Math.min(boxWidth / videoWidth, boxHeight / videoHeight);
+  const width = videoWidth * scale;
+  const height = videoHeight * scale;
+  return { x: (boxWidth - width) / 2, y: (boxHeight - height) / 2, width, height };
+}
+const fix = (n) => Math.round(n * 1e4) / 1e4;
+function clampRegion(r, minSize = 0.02) {
+  const w = clamp(r.w, minSize, 1);
+  const h = clamp(r.h, minSize, 1);
+  return { x: fix(clamp(r.x, 0, 1 - w)), y: fix(clamp(r.y, 0, 1 - h)), w: fix(w), h: fix(h) };
+}
+function regionBetween(ax, ay, bx, by) {
+  const x0 = clamp(Math.min(ax, bx), 0, 1);
+  const y0 = clamp(Math.min(ay, by), 0, 1);
+  const x1 = clamp(Math.max(ax, bx), 0, 1);
+  const y1 = clamp(Math.max(ay, by), 0, 1);
+  return { x: fix(x0), y: fix(y0), w: fix(x1 - x0), h: fix(y1 - y0) };
+}
+function adjustRegion(r, handle, dx, dy, minSize = 0.02) {
+  if (handle === "move") return clampRegion({ ...r, x: r.x + dx, y: r.y + dy }, minSize);
+  let x0 = r.x;
+  let y0 = r.y;
+  let x1 = r.x + r.w;
+  let y1 = r.y + r.h;
+  if (handle === "nw" || handle === "sw") x0 = clamp(x0 + dx, 0, x1 - minSize);
+  else x1 = clamp(x1 + dx, x0 + minSize, 1);
+  if (handle === "nw" || handle === "ne") y0 = clamp(y0 + dy, 0, y1 - minSize);
+  else y1 = clamp(y1 + dy, y0 + minSize, 1);
+  return { x: fix(x0), y: fix(y0), w: fix(x1 - x0), h: fix(y1 - y0) };
+}
+function mediaErrorCause(error) {
+  if (error?.code === 3) return "decode";
+  if (error?.code === 4) return "unsupported";
+  return "load";
+}
+export {
+  adjustRegion,
+  clampRegion,
+  containRect,
+  dragEnd,
+  mediaErrorCause,
+  normalizeRange,
+  parseClipTime,
+  regionBetween,
+  revealTime,
+  setEnd,
+  shiftView,
+  tickStep,
+  ticks,
+  zoomView
+};

package/dist/composables/span.d.ts

@@ -0,0 +1,10 @@
+/** The window zoomed by `factor` (below 1 is in) around `anchor`, a position on the line; no wider than it was asked, no narrower than `minSpan`. */
+export declare function zoomSpan(start: number, end: number, anchor: number, factor: number, minSpan: number): {
+    start: number;
+    end: number;
+};
+/** The window moved by `delta`, its width kept, stopped at `lo` and `hi`. */
+export declare function shiftSpan(start: number, end: number, delta: number, lo: number, hi: number): {
+    start: number;
+    end: number;
+};

package/dist/composables/span.js

@@ -0,0 +1,15 @@
+function zoomSpan(start, end, anchor, factor, minSpan) {
+  const span = end - start;
+  const next = Math.max(minSpan, span * factor);
+  const from = anchor - (anchor - start) * (next / (span || 1));
+  return { start: from, end: from + next };
+}
+function shiftSpan(start, end, delta, lo, hi) {
+  const span = end - start;
+  const from = Math.max(lo, Math.min(hi - span, start + delta));
+  return { start: from, end: from + span };
+}
+export {
+  shiftSpan,
+  zoomSpan
+};

package/dist/icons-all.js

@@ -1,3 +1,3 @@
 import lucide from "@iconify-json/lucide/icons.json";
-import { a as registerIconCollection } from "./chunks/icons-C1vppR4f.js";
+import { a as registerIconCollection } from "./chunks/icons-BOdqDUii.js";
 registerIconCollection(lucide);

package/dist/index.d.ts

@@ -157,6 +157,9 @@ export { default as LpRangeSlider } from "./components/LpRangeSlider.vue";
 export { default as LpVideoBackdrop } from "./components/LpVideoBackdrop.vue";
 export { formatClipTime, isNativeLoop, planLoop, seamProgress, seamReached } from "./components/videoBackdrop";
 export type { LoopPlan } from "./components/videoBackdrop";
+export { default as LpVideoTrim } from "./components/LpVideoTrim.vue";
+export { dragEnd, normalizeRange as normalizeTrimRange, parseClipTime, setEnd } from "./components/videoTrim";
+export type { FrameRegion, TimeRange, VideoTrimErrorCause } from "./components/videoTrim";
 export { default as LpSparkline } from "./components/LpSparkline.vue";
 export { default as LpStat } from "./components/LpStat.vue";
 export { default as LpStepper } from "./components/LpStepper.vue";