@cesarvenzac/closeup 0.0.0-stage → 0.1.1

package/dist/cursor.js

@@ -0,0 +1,152 @@
+/**
+ * A drawn cursor in place of the real one while a take lasts. Chrome adds the real cursor to a
+ * tab capture as a small, soft picture laid on top, which stage mode can't sharpen; this one is
+ * drawn by the page at the screen's full resolution. It takes the shape the real one would
+ * have there (the hand over links and buttons, the I-beam over text, else the arrow) and
+ * presses a little on a click. It lives outside <body>, so stage mode doesn't enlarge it.
+ */
+import { CURSORS } from "./cursors.js";
+export class DrawnCursor {
+    host;
+    options;
+    element = document.createElement("div");
+    hide = document.createElement("style");
+    shape = null;
+    shown = false;
+    x = 0;
+    y = 0;
+    constructor(host, options) {
+        this.host = host;
+        this.options = options;
+        this.hide.textContent = "*, *::before, *::after { cursor: none !important; }";
+        Object.assign(this.element.style, {
+            position: "fixed",
+            left: "0",
+            top: "0",
+            width: `${options.size}px`,
+            height: `${options.size}px`,
+            pointerEvents: "none",
+            zIndex: "2147483646",
+            visibility: "hidden",
+            filter: "drop-shadow(0 1.5px 2.5px rgb(0 0 0 / 0.3))",
+            transition: "scale 90ms ease-out",
+        });
+    }
+    /** Puts it on the page, hiding the real cursor there; it appears at its first `place`. */
+    show() {
+        if (this.shown)
+            return;
+        this.shown = true;
+        document.head.append(this.hide);
+        this.host.append(this.element);
+    }
+    /** Follows the real pointer. */
+    follow() {
+        this.show();
+        addEventListener("pointermove", this.onMove, true);
+        addEventListener("pointerdown", this.onDown, true);
+        addEventListener("pointerup", this.onUp, true);
+        document.addEventListener("pointerout", this.onLeave, true);
+    }
+    destroy() {
+        removeEventListener("pointermove", this.onMove, true);
+        removeEventListener("pointerdown", this.onDown, true);
+        removeEventListener("pointerup", this.onUp, true);
+        document.removeEventListener("pointerout", this.onLeave, true);
+        this.hide.remove();
+        this.element.remove();
+        this.shown = false;
+    }
+    /** Draws it at a point on screen, in the shape the real cursor would take there. */
+    place(x, y) {
+        this.x = x;
+        this.y = y;
+        const shape = this.shapeAt(x, y);
+        const { hot, svg } = CURSORS[shape];
+        const size = this.options.size;
+        if (shape !== this.shape) {
+            this.element.innerHTML = `<svg viewBox="0 0 24 24" width="${size}" height="${size}" style="display:block;overflow:visible">${svg}</svg>`;
+            this.shape = shape;
+        }
+        const unit = size / 24;
+        this.element.style.translate = `${x - hot[0] * unit}px ${y - hot[1] * unit}px`;
+        this.element.style.transformOrigin = `${hot[0] * unit}px ${hot[1] * unit}px`;
+        this.element.style.visibility = "visible";
+    }
+    /** Presses a little going down, and back coming up, with the click's sound (and the ring, going down). */
+    press(down) {
+        this.element.style.scale = down ? "0.86" : "1";
+        this.options.onPress?.(down);
+        if (down && this.options.ring)
+            this.ripple();
+    }
+    /** The ring: from the tip, out to about the cursor's size, fading as it goes. Still under reduced motion. */
+    ripple() {
+        const size = this.options.size * 1.5;
+        const ring = document.createElement("div");
+        Object.assign(ring.style, {
+            position: "fixed",
+            left: `${this.x - size / 2}px`,
+            top: `${this.y - size / 2}px`,
+            width: `${size}px`,
+            height: `${size}px`,
+            borderRadius: "50%",
+            pointerEvents: "none",
+            zIndex: "2147483645",
+            // A dark edge with a light halo, so it shows on light pages and dark ones.
+            background: "rgb(0 0 0 / 0.07)",
+            boxShadow: "inset 0 0 0 2px rgb(0 0 0 / 0.32), 0 0 0 1.5px rgb(255 255 255 / 0.55)",
+        });
+        this.host.append(ring);
+        const still = matchMedia("(prefers-reduced-motion: reduce)").matches;
+        const frames = still ? [{ opacity: 1 }, { opacity: 0 }] : [{ scale: 0.2, opacity: 1 }, { scale: 1, opacity: 0 }];
+        ring.animate(frames, { duration: still ? 360 : 560, easing: "cubic-bezier(0.22, 1, 0.36, 1)" }).finished.finally(() => ring.remove());
+    }
+    onMove = (event) => {
+        if (this.options.ignore?.(event.target))
+            this.element.style.visibility = "hidden";
+        else
+            this.place(event.clientX, event.clientY);
+    };
+    onDown = (event) => {
+        if (!this.options.ignore?.(event.target))
+            this.press(true);
+    };
+    onUp = (event) => {
+        if (!this.options.ignore?.(event.target))
+            this.press(false);
+    };
+    onLeave = (event) => {
+        if (!event.relatedTarget)
+            this.element.style.visibility = "hidden";
+    };
+    /** The shape the real cursor would take here: read with the hiding rule off for a moment. */
+    shapeAt(x, y) {
+        const under = this.options.hit(x, y);
+        if (!under)
+            return "arrow";
+        this.hide.disabled = true;
+        const style = getComputedStyle(under);
+        const cursor = style.cursor;
+        const userSelect = style.userSelect;
+        this.hide.disabled = false;
+        if (cursor === "pointer")
+            return "hand";
+        if (cursor === "text" || cursor === "vertical-text")
+            return "text";
+        if (cursor !== "auto" || userSelect === "none")
+            return "arrow";
+        if (under.matches("input, textarea, [contenteditable='true'], [contenteditable='']"))
+            return "text";
+        // Over text a browser shows the I-beam: is the point on a line of text?
+        const caret = this.options.caretAt ? this.options.caretAt(x, y) : document.caretRangeFromPoint?.(x, y);
+        if (caret?.startContainer.nodeType === Node.TEXT_NODE) {
+            const range = document.createRange();
+            range.selectNodeContents(caret.startContainer);
+            for (const rect of range.getClientRects())
+                if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom)
+                    return "text";
+        }
+        return "arrow";
+    }
+}

package/dist/cursors.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The drawn cursors, macOS-like and our own drawings (not Apple's images), on a 24-unit grid
+ * with each one's hotspot: the point that clicks. Each outline is painted under its fill
+ * (`paint-order: stroke`), so the white edge sits outside the black as on a Mac, never eating
+ * into it.
+ */
+export type CursorShape = "arrow" | "hand" | "text";
+export declare const CURSORS: Record<CursorShape, {
+    hot: [number, number];
+    svg: string;
+}>;

package/dist/cursors.js

@@ -0,0 +1,24 @@
+/**
+ * The drawn cursors, macOS-like and our own drawings (not Apple's images), on a 24-unit grid
+ * with each one's hotspot: the point that clicks. Each outline is painted under its fill
+ * (`paint-order: stroke`), so the white edge sits outside the black as on a Mac, never eating
+ * into it.
+ */
+/** The hand's outline: index finger up, three fingers folded beside it, the thumb out to the left. */
+const HAND = "M7 15.2V3.4a1.5 1.5 0 0 1 3 0v6.2a1.5 1.5 0 0 1 3 .2v.6a1.5 1.5 0 0 1 3 .3v.7a1.5 1.5 0 0 1 3 .2V16c0 3.3-2.1 5.6-5 5.6h-2.6c-1.6 0-2.7-.6-3.6-1.6l-3.3-3.6a1.3 1.3 0 0 1 1.8-1.9z";
+/** The I-beam: a stem with a curl at each end. */
+const BEAM = "M9 3.5h1.2c1 0 1.8.8 1.8 1.8m3-1.8h-1.2c-1 0-1.8.8-1.8 1.8v13.4c0 1-.8 1.8-1.8 1.8H9m6 0h-1.2c-1 0-1.8-.8-1.8-1.8";
+export const CURSORS = {
+    arrow: {
+        hot: [5, 2.5],
+        svg: `<path d="M5 2.5v16.6l4.2-3.9 2.7 6.1 2.6-1.1-2.7-6h5.8z" fill="#000" stroke="#fff" stroke-width="2.4" stroke-linejoin="round" paint-order="stroke"/>`,
+    },
+    hand: {
+        hot: [8.5, 2],
+        svg: `<path d="${HAND}" fill="#fff" stroke="#000" stroke-width="1.25" stroke-linejoin="round"/><path d="M10 9.6v2.6M13 10.4v2.4M16 11.2v2.2" fill="none" stroke="#000" stroke-width="1.1" stroke-linecap="round"/>`,
+    },
+    text: {
+        hot: [12, 12],
+        svg: `<path d="${BEAM}" fill="none" stroke="#fff" stroke-width="3.6" stroke-linecap="round" stroke-linejoin="round"/><path d="${BEAM}" fill="none" stroke="#000" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>`,
+    },
+};

package/dist/frame.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Where to film and how much to enlarge it: pure arithmetic, so it's tested apart from the
+ * browser. Rectangles are in CSS pixels in the viewport, as getBoundingClientRect gives them.
+ */
+export type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type Size = {
+    width: number;
+    height: number;
+};
+/** The shapes a take can have; `free` keeps the shape of what was picked. */
+export declare const SHAPES: {
+    readonly "16:9": number;
+    readonly "1:1": 1;
+    readonly "4:5": number;
+    readonly "9:16": number;
+    readonly free: null;
+};
+export type Shape = keyof typeof SHAPES;
+/** The most the page is enlarged: past this a few pixels fill the screen and the browser's work grows for nothing. */
+export declare const MOST_SCALE = 40;
+/** How much of the window a staged frame fills: the margin round it holds the controls, uncaptured. */
+export declare const FILL = 0.84;
+/** The least margin above and below the frame, in CSS pixels: the recording's controls sit there, never in the take. */
+export declare const ROOM = 60;
+/** The share of `viewport` a frame fills: FILL, less in a window too short to leave ROOM above and below. */
+export declare const fillFor: (viewport: Size) => number;
+/**
+ * The area to film round `target`: grown by `padding` (a share of its size on each side),
+ * then widened or heightened, never cropped, to `aspect` (null keeps the target's own).
+ */
+export declare function frameAround(target: Rect, padding: number, aspect: number | null): Rect;
+export type Stage = {
+    /** How much the page is enlarged. */
+    scale: number;
+    /** The translation, in CSS pixels, that brings the frame to the middle of the viewport once scaled about the page's top left. */
+    tx: number;
+    ty: number;
+    /** Where the frame sits on screen once staged: what's captured. */
+    screen: Rect;
+};
+/**
+ * The stage for `frame`: the page scaled about its top left (the document's, so scrolling is
+ * counted) until the frame fills `fill` of the viewport in its tighter direction, and moved so
+ * the frame sits in the middle. What's outside the frame stays drawn but isn't captured.
+ */
+export declare function stageFor(frame: Rect, viewport: Size, fill: number, scroll?: {
+    x: number;
+    y: number;
+}): Stage;
+/**
+ * Where a point of the page (document CSS pixels, as laid out) is drawn on screen once staged,
+ * the page scrolled by `scroll`: scaled about the page's top left and moved by the stage.
+ */
+export declare const toScreen: (stage: Pick<Stage, "scale" | "tx" | "ty">, scroll: {
+    x: number;
+    y: number;
+}, p: {
+    x: number;
+    y: number;
+}) => {
+    x: number;
+    y: number;
+};
+/** The point of the page drawn at screen point `q` on the stage: `toScreen` the other way. */
+export declare const toPage: (stage: Pick<Stage, "scale" | "tx" | "ty">, scroll: {
+    x: number;
+    y: number;
+}, q: {
+    x: number;
+    y: number;
+}) => {
+    x: number;
+    y: number;
+};
+/** The take's size in pixels: the frame on screen at the screen's density, rounded to even numbers as video encoders want. */
+export declare function pixelSize(screen: Rect, density: number): Size;
+/**
+ * Where a frame of `inner`'s shape sits inside a take of `outer` size once a background with
+ * `padding` (a share of the take's shorter side) surrounds it: centred, shape kept.
+ */
+export declare function insetRect(outer: Size, padding: number): Rect;

package/dist/frame.js

@@ -0,0 +1,78 @@
+/**
+ * Where to film and how much to enlarge it: pure arithmetic, so it's tested apart from the
+ * browser. Rectangles are in CSS pixels in the viewport, as getBoundingClientRect gives them.
+ */
+/** The shapes a take can have; `free` keeps the shape of what was picked. */
+export const SHAPES = { "16:9": 16 / 9, "1:1": 1, "4:5": 4 / 5, "9:16": 9 / 16, free: null };
+/** The most the page is enlarged: past this a few pixels fill the screen and the browser's work grows for nothing. */
+export const MOST_SCALE = 40;
+/** How much of the window a staged frame fills: the margin round it holds the controls, uncaptured. */
+export const FILL = 0.84;
+/** The least margin above and below the frame, in CSS pixels: the recording's controls sit there, never in the take. */
+export const ROOM = 60;
+/** The share of `viewport` a frame fills: FILL, less in a window too short to leave ROOM above and below. */
+export const fillFor = (viewport) => Math.max(0.2, Math.min(FILL, 1 - (2 * ROOM) / viewport.height));
+/**
+ * The area to film round `target`: grown by `padding` (a share of its size on each side),
+ * then widened or heightened, never cropped, to `aspect` (null keeps the target's own).
+ */
+export function frameAround(target, padding, aspect) {
+    const cx = target.x + target.width / 2;
+    const cy = target.y + target.height / 2;
+    let width = Math.max(1, target.width * (1 + 2 * padding));
+    let height = Math.max(1, target.height * (1 + 2 * padding));
+    if (aspect) {
+        if (width / height < aspect)
+            width = height * aspect;
+        else
+            height = width / aspect;
+    }
+    return { x: cx - width / 2, y: cy - height / 2, width, height };
+}
+/**
+ * The stage for `frame`: the page scaled about its top left (the document's, so scrolling is
+ * counted) until the frame fills `fill` of the viewport in its tighter direction, and moved so
+ * the frame sits in the middle. What's outside the frame stays drawn but isn't captured.
+ */
+export function stageFor(frame, viewport, fill, scroll = { x: 0, y: 0 }) {
+    const scale = Math.min(MOST_SCALE, (viewport.width * fill) / frame.width, (viewport.height * fill) / frame.height);
+    const cx = frame.x + frame.width / 2 + scroll.x;
+    const cy = frame.y + frame.height / 2 + scroll.y;
+    const width = frame.width * scale;
+    const height = frame.height * scale;
+    return {
+        scale,
+        tx: viewport.width / 2 + scroll.x - cx * scale,
+        ty: viewport.height / 2 + scroll.y - cy * scale,
+        screen: { x: (viewport.width - width) / 2, y: (viewport.height - height) / 2, width, height },
+    };
+}
+/**
+ * Where a point of the page (document CSS pixels, as laid out) is drawn on screen once staged,
+ * the page scrolled by `scroll`: scaled about the page's top left and moved by the stage.
+ */
+export const toScreen = (stage, scroll, p) => ({
+    x: p.x * stage.scale + stage.tx - scroll.x,
+    y: p.y * stage.scale + stage.ty - scroll.y,
+});
+/** The point of the page drawn at screen point `q` on the stage: `toScreen` the other way. */
+export const toPage = (stage, scroll, q) => ({
+    x: (q.x + scroll.x - stage.tx) / stage.scale,
+    y: (q.y + scroll.y - stage.ty) / stage.scale,
+});
+/** The take's size in pixels: the frame on screen at the screen's density, rounded to even numbers as video encoders want. */
+export function pixelSize(screen, density) {
+    const even = (value) => Math.max(2, 2 * Math.round((value * density) / 2));
+    return { width: even(screen.width), height: even(screen.height) };
+}
+/**
+ * Where a frame of `inner`'s shape sits inside a take of `outer` size once a background with
+ * `padding` (a share of the take's shorter side) surrounds it: centred, shape kept.
+ */
+export function insetRect(outer, padding) {
+    const margin = padding * Math.min(outer.width, outer.height);
+    const scale = Math.min((outer.width - 2 * margin) / outer.width, (outer.height - 2 * margin) / outer.height);
+    const width = outer.width * scale;
+    const height = outer.height * scale;
+    return { x: (outer.width - width) / 2, y: (outer.height - height) / 2, width, height };
+}

package/dist/hover.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Hover and press, for a cursor that isn't real. A page's script can be told the pointer moved
+ * (`pointer.ts` sends the events), but CSS's :hover and :active follow only the real pointer, and
+ * no page can set them. So every rule that uses them is copied once, each :hover and :active
+ * swapped for an attribute Closeup puts on the elements under the drawn cursor, and the copies
+ * added in a stylesheet of their own, in the same cascade layers and media queries as the rules
+ * they copy. Rules in another site's stylesheets can't be read, so they can't be copied.
+ */
+export declare const HOVER = "data-closeup-hover";
+export declare const ACTIVE = "data-closeup-active";
+/** A selector with :hover and :active swapped for Closeup's attributes. Same specificity: a pseudo-class and an attribute weigh alike. */
+export declare const markSelector: (selector: string) => string;
+/**
+ * The part of `rule` that hovering or pressing changes, rewritten for the attributes; "" when
+ * there's none. A rule whose own selector hovers is copied whole (its nested rules apply only
+ * while hovered); one that doesn't keeps only its nested rules that do; grouping rules (layers,
+ * media, supports, containers) wrap what's kept inside them.
+ */
+export declare function copyRule(rule: CSSRule): string;
+/** Copies the page's hover and press rules for the drawn cursor. `remove()` takes them away again. */
+export declare function emulateHover(): {
+    remove(): void;
+};

package/dist/hover.js

@@ -0,0 +1,89 @@
+/**
+ * Hover and press, for a cursor that isn't real. A page's script can be told the pointer moved
+ * (`pointer.ts` sends the events), but CSS's :hover and :active follow only the real pointer, and
+ * no page can set them. So every rule that uses them is copied once, each :hover and :active
+ * swapped for an attribute Closeup puts on the elements under the drawn cursor, and the copies
+ * added in a stylesheet of their own, in the same cascade layers and media queries as the rules
+ * they copy. Rules in another site's stylesheets can't be read, so they can't be copied.
+ */
+export const HOVER = "data-closeup-hover";
+export const ACTIVE = "data-closeup-active";
+const HOVER_RE = /:hover(?![\w-])/g;
+const ACTIVE_RE = /:active(?![\w-])/g;
+const USES = /:(?:hover|active)(?![\w-])/;
+/** A selector with :hover and :active swapped for Closeup's attributes. Same specificity: a pseudo-class and an attribute weigh alike. */
+export const markSelector = (selector) => selector.replace(HOVER_RE, `[${HOVER}]`).replace(ACTIVE_RE, `[${ACTIVE}]`);
+/** A media query only about whether the device can hover: always true for the drawn cursor, which does. */
+const onlyHover = (condition) => /^\(\s*hover\s*:\s*hover\s*\)$/.test(condition.trim());
+/**
+ * The part of `rule` that hovering or pressing changes, rewritten for the attributes; "" when
+ * there's none. A rule whose own selector hovers is copied whole (its nested rules apply only
+ * while hovered); one that doesn't keeps only its nested rules that do; grouping rules (layers,
+ * media, supports, containers) wrap what's kept inside them.
+ */
+export function copyRule(rule) {
+    if (rule instanceof CSSStyleRule) {
+        const nested = [...rule.cssRules];
+        if (USES.test(rule.selectorText)) {
+            return `${markSelector(rule.selectorText)}{${rule.style.cssText}${nested.map(copyAll).join("")}}`;
+        }
+        const inner = nested.map(copyRule).join("");
+        return inner ? `${rule.selectorText}{${inner}}` : "";
+    }
+    if (rule instanceof CSSMediaRule) {
+        const inner = [...rule.cssRules].map(copyRule).join("");
+        if (!inner)
+            return "";
+        return onlyHover(rule.conditionText) ? inner : `@media ${rule.conditionText}{${inner}}`;
+    }
+    if (rule instanceof CSSLayerBlockRule) {
+        const inner = [...rule.cssRules].map(copyRule).join("");
+        return inner ? `@layer ${rule.name}{${inner}}` : "";
+    }
+    if (rule instanceof CSSSupportsRule || (typeof CSSContainerRule !== "undefined" && rule instanceof CSSContainerRule)) {
+        const inner = [...rule.cssRules].map(copyRule).join("");
+        const at = rule instanceof CSSSupportsRule ? "@supports" : "@container";
+        return inner ? `${at} ${rule.conditionText}{${inner}}` : "";
+    }
+    if (rule instanceof CSSImportRule && rule.styleSheet) {
+        const inner = rulesOf(rule.styleSheet).map(copyRule).join("");
+        if (!inner)
+            return "";
+        const layered = rule.layerName !== null ? `@layer ${rule.layerName}{${inner}}` : inner;
+        return rule.media.mediaText ? `@media ${rule.media.mediaText}{${layered}}` : layered;
+    }
+    return "";
+}
+/** A nested rule under a hovered one: all of it, its own :hover and :active swapped too. */
+function copyAll(rule) {
+    if (rule instanceof CSSStyleRule)
+        return `${markSelector(rule.selectorText)}{${rule.style.cssText}${[...rule.cssRules].map(copyAll).join("")}}`;
+    if (rule instanceof CSSGroupingRule)
+        return copyRule(rule) || rule.cssText;
+    return rule.cssText;
+}
+/** A stylesheet's rules, or none if it's another site's (reading them throws). */
+function rulesOf(sheet) {
+    try {
+        return [...sheet.cssRules];
+    }
+    catch {
+        return [];
+    }
+}
+/** Copies the page's hover and press rules for the drawn cursor. `remove()` takes them away again. */
+export function emulateHover() {
+    const style = document.createElement("style");
+    style.dataset.closeup = "";
+    style.textContent = [...document.styleSheets].flatMap(rulesOf).map(copyRule).join("\n");
+    document.head.append(style);
+    return {
+        remove() {
+            style.remove();
+            for (const element of document.querySelectorAll(`[${HOVER}], [${ACTIVE}]`)) {
+                element.removeAttribute(HOVER);
+                element.removeAttribute(ACTIVE);
+            }
+        },
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Closeup: film any part of a web page in close-up, sharp at any size. Press the shortcut,
+ * pick an element or draw a region, choose photo or video, and film it: the page is enlarged
+ * round your pick so the browser draws it large, a drawn cursor stands in for yours (or plays a
+ * script you draw), and the take can sit on a background with its clicks and the tab's sound.
+ *
+ *   import { install } from "@cesarvenzac/closeup";
+ *   install(); // ⌥⇧C opens and closes it
+ *
+ * `addAction` puts a button of your own on the finished take, to keep it somewhere.
+ */
+export { addAction, type Take, type TakeAction } from "./actions.ts";
+export { supportsCapture } from "./capture.ts";
+export { parseScript, type Script, type Step, type Target } from "./script.ts";
+export type { Settings } from "./settings.ts";
+export { loadScript, saveScript } from "./store.ts";
+export declare const DEFAULT_SHORTCUT = "Alt+Shift+C";
+export declare const open: () => void;
+export declare const close: () => void | undefined;
+export declare const toggle: () => void;
+/** Opens and closes Closeup with `shortcut` (⌥⇧C unless told otherwise). Returns what removes it. */
+export declare function install({ shortcut }?: {
+    shortcut?: string;
+}): () => void;

package/dist/index.js

@@ -0,0 +1,37 @@
+/**
+ * Closeup: film any part of a web page in close-up, sharp at any size. Press the shortcut,
+ * pick an element or draw a region, choose photo or video, and film it: the page is enlarged
+ * round your pick so the browser draws it large, a drawn cursor stands in for yours (or plays a
+ * script you draw), and the take can sit on a background with its clicks and the tab's sound.
+ *
+ *   import { install } from "@cesarvenzac/closeup";
+ *   install(); // ⌥⇧C opens and closes it
+ *
+ * `addAction` puts a button of your own on the finished take, to keep it somewhere.
+ */
+import { matches, parseShortcut, shortcutLabel, typing } from "./shortcut.js";
+import { Panel } from "./ui/panel.js";
+export { addAction } from "./actions.js";
+export { supportsCapture } from "./capture.js";
+export { parseScript } from "./script.js";
+export { loadScript, saveScript } from "./store.js";
+export const DEFAULT_SHORTCUT = "Alt+Shift+C";
+let panel = null;
+let label = shortcutLabel(parseShortcut(DEFAULT_SHORTCUT));
+const instance = () => (panel ??= new Panel(label));
+export const open = () => instance().open();
+export const close = () => panel?.close();
+export const toggle = () => instance().toggle();
+/** Opens and closes Closeup with `shortcut` (⌥⇧C unless told otherwise). Returns what removes it. */
+export function install({ shortcut = DEFAULT_SHORTCUT } = {}) {
+    const parsed = parseShortcut(shortcut);
+    label = shortcutLabel(parsed);
+    const onKey = (event) => {
+        if (event.repeat || !matches(event, parsed) || typing(event.composedPath()[0] ?? event.target))
+            return;
+        event.preventDefault();
+        toggle();
+    };
+    addEventListener("keydown", onKey, true);
+    return () => removeEventListener("keydown", onKey, true);
+}

package/dist/path.d.ts

@@ -0,0 +1,41 @@
+/**
+ * A cursor's path as an editor draws one: nodes, each with handles, joined by cubic curves
+ * (Figma's way), measured by length so the cursor can travel it at a chosen pace whatever
+ * the curves' shape. Pure, for scripted takes: the editor draws these nodes, the player
+ * reads positions from them.
+ */
+export type Point = {
+    x: number;
+    y: number;
+};
+/** A node and its handles, relative to the node (Figma stores them so); none means a sharp corner. */
+export type PathNode = {
+    at: Point;
+    in?: Point;
+    out?: Point;
+};
+type Segment = {
+    p0: Point;
+    c1: Point;
+    c2: Point;
+    p3: Point;
+};
+export declare function segments(nodes: PathNode[]): Segment[];
+/** The path laid out as a table of lengths, finely enough to read positions by distance. */
+export type Measured = {
+    points: Point[];
+    lengths: number[];
+    total: number;
+    nodeAt: number[];
+};
+export declare function measure(nodes: PathNode[], perSegment?: number): Measured;
+/** Where the path is `distance` along it (clamped to its ends). */
+export declare function pointAt({ points, lengths, total }: Measured, distance: number): Point;
+/**
+ * How long a hand takes to cover `distance` to a target `size` across (Fitts's law): a short
+ * fixed part, then a little more for each doubling of distance over size. Seconds.
+ */
+export declare function reachTime(distance: number, size?: number): number;
+/** Eases in and out, as a hand does between two points: slow to start, quick, slow to arrive. */
+export declare const easeInOut: (t: number) => number;
+export {};

package/dist/path.js

@@ -0,0 +1,65 @@
+/**
+ * A cursor's path as an editor draws one: nodes, each with handles, joined by cubic curves
+ * (Figma's way), measured by length so the cursor can travel it at a chosen pace whatever
+ * the curves' shape. Pure, for scripted takes: the editor draws these nodes, the player
+ * reads positions from them.
+ */
+const add = (a, b) => ({ x: a.x + b.x, y: a.y + b.y });
+const lerp = (a, b, t) => ({ x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t });
+function cubic({ p0, c1, c2, p3 }, t) {
+    const u = 1 - t;
+    return {
+        x: u * u * u * p0.x + 3 * u * u * t * c1.x + 3 * u * t * t * c2.x + t * t * t * p3.x,
+        y: u * u * u * p0.y + 3 * u * u * t * c1.y + 3 * u * t * t * c2.y + t * t * t * p3.y,
+    };
+}
+export function segments(nodes) {
+    const out = [];
+    for (let k = 0; k + 1 < nodes.length; k++) {
+        const a = nodes[k];
+        const b = nodes[k + 1];
+        out.push({ p0: a.at, c1: a.out ? add(a.at, a.out) : a.at, c2: b.in ? add(b.at, b.in) : b.at, p3: b.at });
+    }
+    return out;
+}
+export function measure(nodes, perSegment = 64) {
+    const points = nodes.length ? [nodes[0].at] : [];
+    const lengths = nodes.length ? [0] : [];
+    const nodeAt = nodes.length ? [0] : [];
+    for (const segment of segments(nodes)) {
+        for (let k = 1; k <= perSegment; k++) {
+            const p = cubic(segment, k / perSegment);
+            const last = points[points.length - 1];
+            lengths.push(lengths[lengths.length - 1] + Math.hypot(p.x - last.x, p.y - last.y));
+            points.push(p);
+        }
+        nodeAt.push(lengths[lengths.length - 1]);
+    }
+    return { points, lengths, total: lengths[lengths.length - 1] ?? 0, nodeAt };
+}
+/** Where the path is `distance` along it (clamped to its ends). */
+export function pointAt({ points, lengths, total }, distance) {
+    if (!points.length)
+        return { x: 0, y: 0 };
+    const d = Math.max(0, Math.min(total, distance));
+    let lo = 0;
+    let hi = lengths.length - 1;
+    while (hi - lo > 1) {
+        const mid = (lo + hi) >> 1;
+        if (lengths[mid] <= d)
+            lo = mid;
+        else
+            hi = mid;
+    }
+    const span = lengths[hi] - lengths[lo];
+    return lerp(points[lo], points[hi], span > 0 ? (d - lengths[lo]) / span : 0);
+}
+/**
+ * How long a hand takes to cover `distance` to a target `size` across (Fitts's law): a short
+ * fixed part, then a little more for each doubling of distance over size. Seconds.
+ */
+export function reachTime(distance, size = 24) {
+    return 0.18 + 0.11 * Math.log2(distance / Math.max(4, size) + 1);
+}
+/** Eases in and out, as a hand does between two points: slow to start, quick, slow to arrive. */
+export const easeInOut = (t) => (t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2);