@cesarvenzac/closeup 0.0.0-stage → 0.1.0

package/dist/ui/editor.js

@@ -0,0 +1,612 @@
+/**
+ * The script editor, on the stage at the size the take is filmed: click where the cursor
+ * starts and where it goes, Figma's pen way (a click for a gentle arc, a drag to pull the curve's
+ * handles), drag points and handles to adjust them, and say what each point does. Points are
+ * tied to the element they're placed on (`selector.ts`), so they follow it if the layout moves.
+ * The curves drawn are the ones the player travels (`curve` in `player.ts`). Every change can be
+ * undone, and each is handed back to be saved.
+ */
+import { toPage, toScreen } from "../frame.js";
+import { curve, estimate, resolve } from "../player.js";
+import { parseScript } from "../script.js";
+import { anchorFor, describe, selectorFor } from "../selector.js";
+import { ICONS } from "./icons.js";
+/** How far the pointer goes before a press becomes a drag, in CSS pixels. */
+const SLOP = 3;
+/** What a new point does after arriving, by action: rests a little, longer after a click to show what it did. */
+const NEW_STEP = {
+    move: { wait: 0.4 },
+    click: { hover: 0.3, wait: 0.8 },
+    type: { hover: 0.2, text: "", wait: 0.6 },
+};
+const ACTIONS = [
+    { action: "move", label: "Move", icon: ICONS.pointer },
+    { action: "click", label: "Click", icon: ICONS.pointer_click },
+    { action: "type", label: "Type", icon: ICONS.type, hint: "Type: clicks a text field, then types into it" },
+];
+/** What typing can go into: a text input, a text area, or something editable. */
+const TEXT_FIELD = "textarea, [contenteditable]:not([contenteditable='false']), input:not([type]), input[type='text'], input[type='search'], input[type='email'], input[type='url'], input[type='tel'], input[type='password'], input[type='number']";
+const escapeHtml = (text) => text.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
+const seconds = (value) => (value < 10 ? value.toFixed(1) : Math.round(value).toString());
+const clamp01 = (value) => Math.max(0, Math.min(1, value));
+export class Editor {
+    options;
+    element = document.createElement("div");
+    svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    labels = document.createElement("div");
+    info = document.createElement("div");
+    panel = document.createElement("div");
+    bar = document.createElement("div");
+    file = document.createElement("input");
+    script;
+    selected = null;
+    tool = "move";
+    drag = null;
+    aimed = null;
+    history = [];
+    future = [];
+    message = "";
+    frame = 0;
+    constructor(options) {
+        this.options = options;
+        this.script = options.script;
+        this.element.className = "editor";
+        this.svg.setAttribute("class", "paths");
+        this.labels.className = "labels";
+        this.info.className = "surface info";
+        this.panel.className = "surface options point";
+        this.panel.setAttribute("role", "group");
+        this.panel.setAttribute("aria-label", "Point");
+        this.bar.className = "surface bar";
+        this.bar.setAttribute("role", "toolbar");
+        this.bar.setAttribute("aria-label", "Script");
+        this.file.type = "file";
+        this.file.accept = ".json,application/json";
+        this.file.hidden = true;
+        this.element.append(this.svg, this.labels, this.info, this.panel, this.bar, this.file);
+        this.bar.innerHTML = `
+      <button data-edit="done" aria-label="Done" title="Done (Esc)">${ICONS.arrow_left}<span>Done</span></button>
+      <div class="sep"></div>
+      ${ACTIONS.map(({ action, label, icon, hint }) => `<button data-edit="tool" data-value="${action}" title="${hint ?? label}">${icon}<span>${label}</span></button>`).join("")}
+      <div class="sep"></div>
+      <button data-edit="undo" aria-label="Undo" title="Undo (⌘Z)">${ICONS.undo}</button>
+      <button data-edit="redo" aria-label="Redo" title="Redo (⇧⌘Z)">${ICONS.redo}</button>
+      <div class="sep"></div>
+      <button data-edit="import" aria-label="Import a script" title="Import a script">${ICONS.upload}</button>
+      <button data-edit="export" aria-label="Export the script" title="Export the script">${ICONS.download}</button>
+      <button data-edit="clear" aria-label="Clear the script" title="Clear the script">${ICONS.trash}</button>
+      <button class="go" data-edit="preview">${ICONS.play}<span>Preview</span></button>`;
+        this.svg.addEventListener("pointerdown", this.onDown);
+        this.svg.addEventListener("pointermove", this.onMove);
+        this.svg.addEventListener("pointerup", this.onUp);
+        this.svg.addEventListener("pointercancel", this.onUp);
+        this.svg.addEventListener("dblclick", this.onDouble);
+        this.svg.addEventListener("pointerleave", () => this.aim(null));
+        this.element.addEventListener("click", this.onClick);
+        this.panel.addEventListener("input", this.onInput);
+        this.file.addEventListener("change", this.onFile);
+        options.root.append(this.element);
+        this.render();
+    }
+    destroy() {
+        cancelAnimationFrame(this.frame);
+        this.element.remove();
+    }
+    /** Hidden while a preview plays, and shown again after. */
+    set hidden(hidden) {
+        this.element.hidden = hidden;
+        if (!hidden)
+            this.render();
+    }
+    /** Keys while editing; true when the editor used it. */
+    onKey(event) {
+        // In a field (the text, a slider), keys are the field's own; Escape leaves it.
+        const field = event.composedPath()[0];
+        const inField = field instanceof HTMLInputElement;
+        if (event.key === "Escape") {
+            if (inField)
+                field.blur();
+            else if (this.selected !== null)
+                this.select(null);
+            else
+                this.options.onDone();
+            return true;
+        }
+        if (inField)
+            return false;
+        const mod = event.metaKey || event.ctrlKey;
+        if (mod && event.key.toLowerCase() === "z") {
+            if (event.shiftKey)
+                this.redo();
+            else
+                this.undo();
+            return true;
+        }
+        if ((event.key === "Backspace" || event.key === "Delete") && this.selected !== null) {
+            this.remove(this.selected);
+            return true;
+        }
+        const nudge = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[event.key];
+        if (nudge && this.selected !== null) {
+            const k = this.selected;
+            const step = event.shiftKey ? 10 : 1;
+            const place = this.place(k);
+            this.change(() => this.setTarget(k, this.targetAt({ x: place.x + nudge[0] * step * this.options.stage.scale, y: place.y + nudge[1] * step * this.options.stage.scale })));
+            return true;
+        }
+        return false;
+    }
+    /* ------------------------------------------------------------------ the script's points */
+    get count() {
+        return this.script ? this.script.steps.length + 1 : 0;
+    }
+    targetOf(k) {
+        return k === 0 ? this.script.start : this.script.steps[k - 1].to;
+    }
+    setTarget(k, target) {
+        if (k === 0)
+            this.script.start = target;
+        else
+            this.script.steps[k - 1].to = target;
+    }
+    outOf(k) {
+        return k === 0 ? this.script.out : this.script.steps[k - 1].out;
+    }
+    inOf(k) {
+        return k === 0 ? undefined : this.script.steps[k - 1].in;
+    }
+    setHandle(k, which, value) {
+        if (k === 0) {
+            if (which === "out")
+                this.script.out = value;
+            return;
+        }
+        const step = this.script.steps[k - 1];
+        if (value)
+            step[which] = value;
+        else
+            delete step[which];
+    }
+    screen = (p) => toScreen(this.options.stage, { x: scrollX, y: scrollY }, p);
+    /** Where point `k` is on screen now: on its element, as the player will find it. */
+    place(k) {
+        return resolve(this.targetOf(k), this.screen, this.options.stage.scale);
+    }
+    /** A target for a point on screen: where it is in the page, and the element it's on. */
+    targetAt(q) {
+        const page = toPage(this.options.stage, { x: scrollX, y: scrollY }, q);
+        const anchor = anchorFor(this.options.hit(q.x, q.y));
+        if (!anchor)
+            return { x: page.x, y: page.y };
+        const box = anchor.getBoundingClientRect();
+        const u = box.width ? clamp01((q.x - box.left) / box.width) : 0.5;
+        const v = box.height ? clamp01((q.y - box.top) / box.height) : 0.5;
+        return { x: page.x, y: page.y, on: { selector: selectorFor(anchor), u, v } };
+    }
+    /** The element a target follows, if it's still there. */
+    elementOf(target) {
+        if (!target.on)
+            return null;
+        try {
+            return document.querySelector(target.on.selector);
+        }
+        catch {
+            return null;
+        }
+    }
+    /* ------------------------------------------------------------------ changes, kept for undo */
+    change(fn) {
+        const before = JSON.stringify(this.script);
+        fn();
+        this.commit(before);
+    }
+    commit(before) {
+        if (before !== JSON.stringify(this.script)) {
+            this.history.push(before);
+            this.future = [];
+            this.options.onChange(this.script);
+        }
+        this.render();
+    }
+    restore(json) {
+        this.script = parseScript(JSON.parse(json));
+        if (this.selected !== null && this.selected >= this.count)
+            this.selected = this.count ? this.count - 1 : null;
+        this.options.onChange(this.script);
+        this.render();
+    }
+    undo() {
+        const previous = this.history.pop();
+        if (previous === undefined)
+            return;
+        this.future.push(JSON.stringify(this.script));
+        this.restore(previous);
+    }
+    redo() {
+        const next = this.future.pop();
+        if (next === undefined)
+            return;
+        this.history.push(JSON.stringify(this.script));
+        this.restore(next);
+    }
+    /** Adds a point at a spot on screen, after the selected one or at the end, doing what the tool says. */
+    add(q) {
+        const target = this.targetAt(q);
+        if (!this.script) {
+            this.script = { version: 1, start: target, steps: [] };
+            return 0;
+        }
+        const k = this.selected === null ? this.count : this.selected + 1;
+        const step = { to: target, action: this.tool, wait: 0, ...NEW_STEP[this.tool] };
+        this.script.steps.splice(k - 1, 0, step);
+        return k;
+    }
+    /** Removes point `k`; without the start, the first point becomes where the cursor starts. */
+    remove(k) {
+        this.change(() => {
+            const script = this.script;
+            if (k > 0)
+                script.steps.splice(k - 1, 1);
+            else if (script.steps.length) {
+                const [first, ...rest] = script.steps;
+                this.script = { version: 1, start: first.to, ...(first.out ? { out: first.out } : {}), steps: rest };
+            }
+            else
+                this.script = null;
+            this.selected = this.count ? Math.min(k, this.count - 1) : null;
+            if (this.selected === 0 && k > 0)
+                this.selected = k - 1;
+        });
+    }
+    select(k) {
+        this.selected = k;
+        if (k !== null && k > 0)
+            this.tool = this.script.steps[k - 1].action;
+        this.render();
+    }
+    /* ------------------------------------------------------------------ pointer */
+    point = (event) => ({ x: event.clientX, y: event.clientY });
+    onDown = (event) => {
+        if (event.button !== 0)
+            return;
+        event.preventDefault();
+        this.svg.setPointerCapture(event.pointerId);
+        const target = event.target;
+        const before = JSON.stringify(this.script);
+        const handle = target.closest("[data-handle]");
+        const node = target.closest("[data-node]");
+        if (handle) {
+            this.drag = { kind: "handle", k: Number(handle.dataset.node), which: handle.dataset.handle, before };
+        }
+        else if (node) {
+            const k = Number(node.dataset.node);
+            this.select(k);
+            this.drag = { kind: "node", k, from: this.point(event), moved: false, before };
+        }
+        else {
+            const k = this.add(this.point(event));
+            this.selected = k;
+            this.drag = { kind: "pull", k, from: this.point(event), before };
+            this.render();
+        }
+    };
+    onMove = (event) => {
+        const p = this.point(event);
+        const drag = this.drag;
+        if (!drag)
+            return this.aim(anchorFor(this.options.hit(p.x, p.y)));
+        const scale = this.options.stage.scale;
+        if (drag.kind === "node") {
+            if (!drag.moved && Math.hypot(p.x - drag.from.x, p.y - drag.from.y) < SLOP)
+                return;
+            drag.moved = true;
+            // Follows the pointer exactly while dragged; tied to what's under it on letting go.
+            const page = toPage(this.options.stage, { x: scrollX, y: scrollY }, p);
+            this.setTarget(drag.k, { x: page.x, y: page.y });
+        }
+        else {
+            const at = this.place(drag.k);
+            if (drag.kind === "pull" && Math.hypot(p.x - drag.from.x, p.y - drag.from.y) < SLOP)
+                return;
+            const handle = { x: (p.x - at.x) / scale, y: (p.y - at.y) / scale };
+            const mirror = { x: -handle.x, y: -handle.y };
+            if (drag.kind === "pull" || drag.which === "out") {
+                this.setHandle(drag.k, "out", handle);
+                if (drag.kind === "pull" || !event.altKey)
+                    this.setHandle(drag.k, "in", drag.k > 0 ? mirror : undefined);
+            }
+            else {
+                this.setHandle(drag.k, "in", handle);
+                if (!event.altKey && this.outOf(drag.k))
+                    this.setHandle(drag.k, "out", mirror);
+            }
+        }
+        this.schedule();
+    };
+    onUp = (event) => {
+        const drag = this.drag;
+        if (!drag)
+            return;
+        this.drag = null;
+        if (drag.kind === "node" && drag.moved)
+            this.setTarget(drag.k, this.targetAt(this.point(event)));
+        this.commit(drag.before);
+    };
+    /** A double click on a point turns its curve from handles to a gentle arc, or from an arc to smooth handles. */
+    onDouble = (event) => {
+        const node = event.target.closest("[data-node]");
+        if (!node)
+            return;
+        const k = Number(node.dataset.node);
+        this.change(() => {
+            if (this.inOf(k) || this.outOf(k)) {
+                this.setHandle(k, "in", undefined);
+                this.setHandle(k, "out", undefined);
+                return;
+            }
+            // Smooth: handles along the line from the point before to the point after.
+            const before = this.place(Math.max(0, k - 1));
+            const after = this.place(Math.min(this.count - 1, k + 1));
+            const scale = this.options.stage.scale;
+            const h = { x: (after.x - before.x) / 6 / scale, y: (after.y - before.y) / 6 / scale };
+            if (k > 0)
+                this.setHandle(k, "in", { x: -h.x, y: -h.y });
+            if (k < this.count - 1)
+                this.setHandle(k, "out", h);
+        });
+    };
+    /** Outlines what a point placed here would follow. */
+    aim(element) {
+        if (element === this.aimed)
+            return;
+        this.aimed = element;
+        this.schedule();
+    }
+    /** Redraws the curves and the summary on the next frame; the point's panel stays as it is, so its field keeps focus. */
+    schedule() {
+        cancelAnimationFrame(this.frame);
+        this.frame = requestAnimationFrame(() => {
+            this.renderPaths();
+            this.renderInfo();
+        });
+    }
+    /* ------------------------------------------------------------------ controls */
+    onClick = (event) => {
+        const button = event.target.closest("[data-edit]");
+        if (!button)
+            return;
+        const { edit, value } = button.dataset;
+        switch (edit) {
+            case "done":
+                return this.options.onDone();
+            case "tool": {
+                this.tool = value;
+                const k = this.selected;
+                if (k !== null && k > 0) {
+                    this.change(() => {
+                        const step = this.script.steps[k - 1];
+                        if (step.action === this.tool)
+                            return;
+                        step.action = this.tool;
+                        delete step.hover;
+                        delete step.text;
+                        Object.assign(step, { ...NEW_STEP[this.tool], wait: step.wait });
+                    });
+                }
+                else
+                    this.render();
+                return;
+            }
+            case "undo":
+                return this.undo();
+            case "redo":
+                return this.redo();
+            case "import":
+                return this.file.click();
+            case "export":
+                return this.export();
+            case "clear":
+                return this.change(() => {
+                    this.script = null;
+                    this.selected = null;
+                });
+            case "preview":
+                if (this.script?.steps.length)
+                    this.options.onPreview(this.script);
+                return;
+            case "delete":
+                if (this.selected !== null)
+                    this.remove(this.selected);
+                return;
+            case "curve": {
+                const k = this.selected;
+                if (k === null || k === 0)
+                    return;
+                // The curve arriving at the point: a gentle arc (no handles), or a straight line (handles at the points).
+                return this.change(() => {
+                    const straight = value === "straight" ? { x: 0, y: 0 } : undefined;
+                    this.setHandle(k, "in", straight);
+                    this.setHandle(k - 1, "out", straight);
+                });
+            }
+        }
+    };
+    /** Sliders and the text field change the selected point as they move; the change is kept once. */
+    pending = null;
+    onInput = (event) => {
+        const input = event.target;
+        const k = this.selected;
+        if (k === null || k === 0 || !input.dataset.field)
+            return;
+        this.pending ??= JSON.stringify(this.script);
+        const step = this.script.steps[k - 1];
+        const field = input.dataset.field;
+        if (field === "text")
+            step.text = input.value;
+        else {
+            const value = Number(input.value);
+            if (field === "duration" && value === 0)
+                delete step.duration;
+            else
+                step[field] = value;
+            const output = this.panel.querySelector(`output[data-for="${field}"]`);
+            if (output)
+                output.textContent = field === "duration" && value === 0 ? "Auto" : `${seconds(value)} s`;
+        }
+        this.options.onChange(this.script);
+        this.renderPaths();
+        this.renderInfo();
+        clearTimeout(this.settle);
+        this.settle = window.setTimeout(() => {
+            if (this.pending !== null) {
+                this.history.push(this.pending);
+                this.future = [];
+                this.pending = null;
+            }
+        }, 400);
+    };
+    settle = 0;
+    onFile = async () => {
+        const file = this.file.files?.[0];
+        this.file.value = "";
+        if (!file)
+            return;
+        try {
+            const script = parseScript(JSON.parse(await file.text()));
+            if (!script)
+                throw new Error();
+            this.change(() => {
+                this.script = script;
+                this.selected = null;
+            });
+            this.message = "";
+        }
+        catch {
+            this.message = "That file isn't a Closeup script.";
+            this.render();
+        }
+    };
+    export() {
+        if (!this.script)
+            return;
+        const blob = new Blob([JSON.stringify(this.script, null, 2)], { type: "application/json" });
+        const link = document.createElement("a");
+        link.href = URL.createObjectURL(blob);
+        const page = location.pathname.replace(/^\/|\/$/g, "").replace(/\//g, "-") || "home";
+        link.download = `closeup-${page}.json`;
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(link.href), 1000);
+    }
+    /* ------------------------------------------------------------------ drawing */
+    render() {
+        this.renderPaths();
+        this.renderInfo();
+        this.renderPanel();
+        this.renderBar();
+    }
+    renderPaths() {
+        const scale = this.options.stage.scale;
+        const places = Array.from({ length: this.count }, (_, k) => this.place(k));
+        const parts = [];
+        if (this.aimed && !this.drag) {
+            const box = this.aimed.getBoundingClientRect();
+            parts.push(`<rect class="aim" x="${box.left}" y="${box.top}" width="${box.width}" height="${box.height}" rx="3"/>`);
+        }
+        for (let k = 1; k < places.length; k++) {
+            const [a, b] = curve(places[k - 1], places[k], this.outOf(k - 1), this.inOf(k), scale);
+            const c1 = { x: a.at.x + a.out.x, y: a.at.y + a.out.y };
+            const c2 = { x: b.at.x + b.in.x, y: b.at.y + b.in.y };
+            parts.push(`<path class="segment" d="M${a.at.x} ${a.at.y}C${c1.x} ${c1.y} ${c2.x} ${c2.y} ${b.at.x} ${b.at.y}"/>`);
+        }
+        const k = this.selected;
+        if (k !== null && k < places.length) {
+            const at = places[k];
+            for (const which of ["in", "out"]) {
+                const handle = which === "in" ? this.inOf(k) : this.outOf(k);
+                if (!handle || (!handle.x && !handle.y))
+                    continue;
+                const h = { x: at.x + handle.x * scale, y: at.y + handle.y * scale };
+                parts.push(`<line class="handle-line" x1="${at.x}" y1="${at.y}" x2="${h.x}" y2="${h.y}"/>`);
+                parts.push(`<circle class="handle" data-node="${k}" data-handle="${which}" cx="${h.x}" cy="${h.y}" r="4.5"/>`);
+            }
+        }
+        places.forEach((at, n) => {
+            const classes = ["node", n === 0 ? "start" : "", n === this.selected ? "selected" : ""].filter(Boolean).join(" ");
+            parts.push(`<g class="${classes}" data-node="${n}"><circle cx="${at.x}" cy="${at.y}" r="${n === 0 ? 7 : 6}"/>${n === 0 ? `<circle class="dot" cx="${at.x}" cy="${at.y}" r="2.5"/>` : ""}</g>`);
+        });
+        this.svg.innerHTML = parts.join("");
+        this.labels.innerHTML = places
+            .map((at, n) => {
+            const step = n > 0 ? this.script.steps[n - 1] : null;
+            const what = !step ? "Start" : `${n} · ${ACTIONS.find((a) => a.action === step.action).label}${step.action === "type" && step.text ? ` “${escapeHtml(step.text.slice(0, 18))}${step.text.length > 18 ? "…" : ""}”` : ""}`;
+            return `<div class="node-label${n === this.selected ? " selected" : ""}" style="translate:${Math.round(at.x + 10)}px ${Math.round(at.y - 30)}px">${what}</div>`;
+        })
+            .join("");
+    }
+    renderInfo() {
+        if (this.selected !== null) {
+            this.info.hidden = true;
+            return;
+        }
+        this.info.hidden = false;
+        const keys = `<span class="keys"><kbd>⌫</kbd> deletes · <kbd>Esc</kbd> done</span>`;
+        let text;
+        if (this.message)
+            text = `<span class="warn">${escapeHtml(this.message)}</span>`;
+        else if (!this.script)
+            text = `<span class="what">Click where the cursor starts</span>`;
+        else if (!this.script.steps.length)
+            text = `<span class="what">Click where it goes · drag to curve</span>`;
+        else {
+            const total = estimate(this.script, (target) => resolve(target, this.screen, this.options.stage.scale), this.options.stage.scale);
+            const moves = this.script.steps.length;
+            text = `<span class="size">${moves} ${moves === 1 ? "move" : "moves"} · about ${seconds(total)} s</span><span class="what">Click to add · drag to curve</span>${keys}`;
+        }
+        this.info.innerHTML = text;
+    }
+    renderPanel() {
+        const k = this.selected;
+        if (k === null || !this.script) {
+            this.panel.hidden = true;
+            return;
+        }
+        this.panel.hidden = false;
+        const target = this.targetOf(k);
+        const element = this.elementOf(target);
+        const on = element ? escapeHtml(describe(element).slice(0, 40)) : "a place on the page";
+        const row = (name, body) => `<div class="row"><span class="name">${name}</span>${body}</div>`;
+        const slider = (field, label, max, step, value, show) => `<div class="slider"><input type="range" min="0" max="${max}" step="${step}" value="${value}" data-field="${field}" aria-label="${label}"><output data-for="${field}">${show}</output></div>`;
+        const head = `<div class="row"><span class="name">${k === 0 ? "Start" : `Point ${k}`}</span><div class="choices spread"><span class="what" title="${on}">On ${on}</span><button data-edit="delete" aria-label="Delete this point" title="Delete (⌫)">${ICONS.trash}</button></div></div>`;
+        if (k === 0) {
+            this.panel.innerHTML = `${head}<p class="hint">Where the cursor is when the take begins.</p>`;
+            return;
+        }
+        const step = this.script.steps[k - 1];
+        const custom = !!(step.in && (step.in.x || step.in.y)) || !!(this.outOf(k - 1) && (this.outOf(k - 1).x || this.outOf(k - 1).y));
+        const straight = !!step.in && !step.in.x && !step.in.y;
+        // Typing goes into what the click focused: say so when there's no field under the point.
+        const place = this.place(k);
+        const field = step.action === "type" && !!this.options.hit(place.x, place.y)?.closest(TEXT_FIELD);
+        this.panel.innerHTML = [
+            head,
+            step.action === "type" ? row("Text", `<input class="text" type="text" value="${escapeHtml(step.text ?? "")}" data-field="text" aria-label="Text to type" placeholder="What to type">`) : "",
+            step.action === "type" && !field ? `<p class="hint warn">Typing goes into the text field this point clicks: there's none under it. Put it on a field (a search box, a form) to see the text written.</p>` : "",
+            step.action !== "move" ? row("Hover", slider("hover", "Hover before acting", 3, 0.1, step.hover ?? 0, `${seconds(step.hover ?? 0)} s`)) : "",
+            row("Rest", slider("wait", "Rest after", 5, 0.1, step.wait, `${seconds(step.wait)} s`)),
+            row("Pace", slider("duration", "Seconds the move takes, or Auto", 3, 0.05, step.duration ?? 0, step.duration ? `${seconds(step.duration)} s` : "Auto")),
+            row("Curve", `<div class="choices"><button data-edit="curve" data-value="arc" aria-pressed="${!custom && !straight}">Arc</button><button data-edit="curve" data-value="straight" aria-pressed="${straight}">Straight</button>${custom && !straight ? `<span class="note">Drawn</span>` : ""}</div>`),
+        ].join("");
+    }
+    renderBar() {
+        const k = this.selected;
+        const action = k !== null && k > 0 ? this.script.steps[k - 1].action : this.tool;
+        // With the start selected (it does nothing), the tools say what the next point will do.
+        for (const button of this.bar.querySelectorAll("[data-edit='tool']"))
+            button.setAttribute("aria-pressed", String(button.dataset.value === action));
+        this.bar.querySelector("[data-edit='undo']").disabled = !this.history.length;
+        this.bar.querySelector("[data-edit='redo']").disabled = !this.future.length;
+        this.bar.querySelector("[data-edit='export']").disabled = !this.script;
+        this.bar.querySelector("[data-edit='clear']").disabled = !this.script;
+        this.bar.querySelector("[data-edit='preview']").disabled = !this.script?.steps.length;
+    }
+}

package/dist/ui/icons.d.ts

@@ -0,0 +1,28 @@
+/** Icons from Lucide (lucide.dev, ISC licence), as SVG markup on its 24-unit grid. */
+export declare const svg: (body: string) => string;
+export declare const ICONS: {
+    x: string;
+    crosshair: string;
+    square_dashed: string;
+    camera: string;
+    video: string;
+    sliders_horizontal: string;
+    square: string;
+    download: string;
+    copy: string;
+    rotate_ccw: string;
+    image: string;
+    check: string;
+    chevron_down: string;
+    circle: string;
+    spline: string;
+    play: string;
+    undo: string;
+    redo: string;
+    trash: string;
+    upload: string;
+    pointer: string;
+    pointer_click: string;
+    type: string;
+    arrow_left: string;
+};

package/dist/ui/icons.js

@@ -0,0 +1,28 @@
+/** Icons from Lucide (lucide.dev, ISC licence), as SVG markup on its 24-unit grid. */
+export const svg = (body) => `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+export const ICONS = {
+    x: svg(`<path d="M18 6 6 18"/><path d="m6 6 12 12"/>`),
+    crosshair: svg(`<circle cx="12" cy="12" r="10"/><line x1="22" x2="18" y1="12" y2="12"/><line x1="6" x2="2" y1="12" y2="12"/><line x1="12" x2="12" y1="6" y2="2"/><line x1="12" x2="12" y1="22" y2="18"/>`),
+    square_dashed: svg(`<path d="M5 3a2 2 0 0 0-2 2"/><path d="M19 3a2 2 0 0 1 2 2"/><path d="M21 19a2 2 0 0 1-2 2"/><path d="M5 21a2 2 0 0 1-2-2"/><path d="M9 3h1"/><path d="M9 21h1"/><path d="M14 3h1"/><path d="M14 21h1"/><path d="M3 9v1"/><path d="M21 9v1"/><path d="M3 14v1"/><path d="M21 14v1"/>`),
+    camera: svg(`<path d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"/><circle cx="12" cy="13" r="3"/>`),
+    video: svg(`<path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/>`),
+    sliders_horizontal: svg(`<path d="M10 5H3"/><path d="M12 19H3"/><path d="M14 3v4"/><path d="M16 17v4"/><path d="M21 12h-9"/><path d="M21 19h-5"/><path d="M21 5h-7"/><path d="M8 10v4"/><path d="M8 12H3"/>`),
+    square: svg(`<rect width="18" height="18" x="3" y="3" rx="2"/>`),
+    download: svg(`<path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/>`),
+    copy: svg(`<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>`),
+    rotate_ccw: svg(`<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>`),
+    image: svg(`<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>`),
+    check: svg(`<path d="M20 6 9 17l-5-5"/>`),
+    chevron_down: svg(`<path d="m6 9 6 6 6-6"/>`),
+    circle: svg(`<circle cx="12" cy="12" r="10"/>`),
+    spline: svg(`<circle cx="19" cy="5" r="2"/><circle cx="5" cy="19" r="2"/><path d="M5 17A12 12 0 0 1 17 5"/>`),
+    play: svg(`<path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/>`),
+    undo: svg(`<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"/>`),
+    redo: svg(`<path d="m15 14 5-5-5-5"/><path d="M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"/>`),
+    trash: svg(`<path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>`),
+    upload: svg(`<path d="M12 3v12"/><path d="m17 8-5-5-5 5"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>`),
+    pointer: svg(`<path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z"/>`),
+    pointer_click: svg(`<path d="M14 4.1 12 6"/><path d="m5.1 8-2.9-.8"/><path d="m6 12-1.9 2"/><path d="M7.2 2.2 8 5.1"/><path d="M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"/>`),
+    type: svg(`<path d="M12 4v16"/><path d="M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2"/><path d="M9 20h6"/>`),
+    arrow_left: svg(`<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>`),
+};