@wodzik/cubecore 0.1.0

package/element/alg.js

@@ -0,0 +1,150 @@
+/**
+ * <cube-alg> — an algorithm as written, in sync with a <cube-player>: the
+ * move playing now is highlighted, played ones fade, click a move to jump to
+ * it. Comments, grouping and pauses stay as written (repeats and commutator
+ * inverses light up the move they copy).
+ *
+ *   <cube-player id="p" alg="(R U R' U')3 // sexy × 3"></cube-player>
+ *   <cube-alg for="p"></cube-alg>
+ *
+ * Text: its own `alg` attribute, else the player's `alg`, else the player's
+ * moves (a recorded solve). Styling: --cc-alg-font, --cc-alg-size,
+ * --cc-alg-done, --cc-alg-current, --cc-alg-current-bg, --cc-alg-comment;
+ * parts alg, token, token-done, token-current, token-todo, comment.
+ */
+import { formatAlg, parseAlgDocument } from "../core/index.js";
+import { ElementBase } from "./base.js";
+const STYLES = /* css */ `
+:host {
+  --cc-alg-font: ui-monospace, "SF Mono", Menlo, monospace;
+  --cc-alg-size: 16px;
+  --cc-alg-done: color-mix(in srgb, currentColor 40%, transparent);
+  --cc-alg-current: currentColor;
+  --cc-alg-current-bg: color-mix(in srgb, #4f8cff 25%, transparent);
+  --cc-alg-comment: color-mix(in srgb, currentColor 50%, transparent);
+  display: block;
+  font: 500 var(--cc-alg-size) / 1.6 var(--cc-alg-font);
+  white-space: pre-wrap;
+}
+.token { cursor: pointer; border-radius: 0.2em; padding: 0 0.08em; transition: color 0.12s, background 0.12s; }
+.token:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
+.done { color: var(--cc-alg-done); }
+.current { color: var(--cc-alg-current); background: var(--cc-alg-current-bg); font-weight: 700; }
+.comment { color: var(--cc-alg-comment); font-style: italic; }
+`;
+export class CubeAlg extends ElementBase {
+    static observedAttributes = ["for", "alg"];
+    root;
+    player = null;
+    doc = null;
+    text = "";
+    /** Token index (by source start) of each move. */
+    tokenOf = [];
+    tokens = [];
+    onTime = (e) => this.highlight(e.detail.applied);
+    onLoad = () => this.render();
+    constructor() {
+        super();
+        this.root = this.attachShadow({ mode: "open" });
+        this.root.innerHTML = `<style>${STYLES}</style><div class="alg" part="alg"></div>`;
+        this.root.addEventListener("click", (e) => {
+            const t = e.target.closest(".token");
+            if (!t || !this.player)
+                return;
+            // Jump to just before the first move written there.
+            const k = this.tokenOf.indexOf(Number(t.dataset.token));
+            if (k >= 0)
+                this.player.seekToMove(k);
+        });
+    }
+    connectedCallback() {
+        this.connect();
+    }
+    disconnectedCallback() {
+        this.disconnect();
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.connect();
+    }
+    /** Follow this player (instead of `for`). */
+    attach(player) {
+        this.disconnect();
+        this.player = player;
+        player.addEventListener("timeupdate", this.onTime);
+        player.addEventListener("load", this.onLoad);
+        this.render();
+    }
+    connect() {
+        const id = this.getAttribute("for");
+        const p = id ? document.getElementById(id) : null;
+        if (p)
+            this.attach(p);
+        else
+            this.render();
+    }
+    disconnect() {
+        this.player?.removeEventListener("timeupdate", this.onTime);
+        this.player?.removeEventListener("load", this.onLoad);
+        this.player = null;
+    }
+    render() {
+        this.text = this.getAttribute("alg") ?? this.player?.getAttribute("alg") ?? (this.player ? formatAlg(this.player.moves) : "");
+        const box = this.root.querySelector(".alg");
+        box.innerHTML = "";
+        this.tokens = [];
+        try {
+            this.doc = parseAlgDocument(this.text);
+        }
+        catch {
+            box.textContent = this.text; // unparsable: plain text (the player reports the error)
+            this.doc = null;
+            return;
+        }
+        // Cut the text into plain runs, move tokens (one per written move) and comments.
+        const starts = [...new Set(this.doc.sources.map((s) => s.start))].sort((a, b) => a - b);
+        const spans = [
+            ...starts.map((start) => ({ kind: "token", start, end: this.doc.sources.find((s) => s.start === start).end })),
+            ...this.doc.comments.map((c) => ({ kind: "comment", start: c.start, end: c.end })),
+        ].sort((a, b) => a.start - b.start);
+        let at = 0;
+        for (const s of spans) {
+            if (s.start > at)
+                box.append(this.text.slice(at, s.start));
+            const el = document.createElement("span");
+            el.textContent = this.text.slice(s.start, s.end);
+            if (s.kind === "token") {
+                el.className = "token todo";
+                el.dataset.token = String(s.start);
+                el.setAttribute("part", "token token-todo");
+                this.tokens.push(el);
+            }
+            else {
+                el.className = "comment";
+                el.setAttribute("part", "comment");
+            }
+            box.append(el);
+            at = s.end;
+        }
+        if (at < this.text.length)
+            box.append(this.text.slice(at));
+        this.tokenOf = this.doc.sources.map((s) => s.start);
+        this.highlight(this.player?.applied ?? 0);
+    }
+    /** Moves [0, applied) are done; move `applied` is next / playing. */
+    highlight(applied) {
+        const current = this.tokenOf[applied];
+        const done = new Set(this.tokenOf.slice(0, applied));
+        for (const el of this.tokens) {
+            const t = Number(el.dataset.token);
+            const status = t === current ? "current" : done.has(t) ? "done" : "todo";
+            el.className = `token ${status}`;
+            el.setAttribute("part", `token token-${status}`);
+        }
+    }
+}
+export function defineCubeAlg(tag = "cube-alg") {
+    if (!customElements.get(tag))
+        customElements.define(tag, class extends CubeAlg {
+        });
+}

package/element/base.d.ts

@@ -0,0 +1,2 @@
+/** HTMLElement where there is one; a stand-in elsewhere (SSR, Node, tests) so importing the package doesn't throw. */
+export declare const ElementBase: typeof HTMLElement;

package/element/base.js

@@ -0,0 +1,3 @@
+/** HTMLElement where there is one; a stand-in elsewhere (SSR, Node, tests) so importing the package doesn't throw. */
+export const ElementBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
+};

package/element/bld.d.ts

@@ -0,0 +1,82 @@
+/**
+ * <cube-bld> — blindfolded (Old Pochmann) memo and execution on a smart cube.
+ *
+ *   el.attach(session);          // memo of the cube as it is now; then follows the execution
+ *   el.scheme = "speffz";        // or "ruwix" (default), or a LetterScheme
+ *   el.setAttribute("rotation", "x2 y'");   // how you hold it (yellow top, orange front…)
+ *   el.setAttribute("order", "corners");    // corners first (default edges first)
+ *
+ * Shows the letters in pairs, edges then (parity) then corners; the letter
+ * due is highlighted, done ones fade. A swap with another letter than the
+ * one due is called out. reveal="all" (default) / "done" / "none" hides the
+ * letters still to do (memo practice).
+ *
+ * Customising like the other elements: --cc-seq-* variables and --cc-accent,
+ * parts (edges, corners, label, letters, pair, letter, letter-done /
+ * -current / -todo / -hidden, parity, message, controls, button), slot
+ * "controls" (default: Show / Hide, Restart), `headless` (build your own
+ * from the `progress` event).
+ *
+ * Events: progress (detail: BldProgress + memo), letter (a letter done:
+ * { step, index }), wrong ({ expected, got }), complete.
+ */
+import { BldTracker, type BldProgress, type LetterScheme, SCHEMES } from "../bld/index.js";
+import { type Move, type State } from "../core/index.js";
+import { ElementBase } from "./base.js";
+import { type MoveSource } from "./sequence.js";
+export interface BldMessages {
+    edges: string;
+    corners: string;
+    parity: string;
+    wrong: string;
+    complete: string;
+    show: string;
+    hide: string;
+    restart: string;
+}
+export declare class CubeBld extends ElementBase {
+    static observedAttributes: string[];
+    private readonly root;
+    private source;
+    private off;
+    private tracker;
+    private _scheme;
+    private shownAll;
+    private lastDone;
+    private completed;
+    private _messages;
+    constructor();
+    attributeChangedCallback(name: string): void;
+    /** The letter scheme: "ruwix" (default), "speffz" or your own. */
+    get scheme(): LetterScheme;
+    set scheme(s: LetterScheme | keyof typeof SCHEMES);
+    get messages(): BldMessages;
+    set messages(m: Partial<BldMessages>);
+    /** Memo and progress (null before anything is set). */
+    get progress(): (BldProgress & {
+        memo: BldTracker["memo"];
+    }) | null;
+    /** The memo as text, e.g. "Letters memorized for edges: QU SR NX…". */
+    get memoText(): {
+        edges: string;
+        corners: string;
+    } | null;
+    /** Memo of the attached cube as it is now, then follow its moves. Returns detach. */
+    attach(source: MoveSource): () => void;
+    detach(): void;
+    /** Memo again from `state` (default: the attached cube as it is now). */
+    reset(state?: State): void;
+    /** A face turn from the cube (called for you when attached). */
+    push(move: Move): void;
+    /** Show every letter / back to the reveal mode. */
+    toggleShown(): void;
+    private visible;
+    private update;
+    private labelButtons;
+}
+export declare function defineCubeBld(tag?: string): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        "cube-bld": CubeBld;
+    }
+}

package/element/bld.js

@@ -0,0 +1,222 @@
+/**
+ * <cube-bld> — blindfolded (Old Pochmann) memo and execution on a smart cube.
+ *
+ *   el.attach(session);          // memo of the cube as it is now; then follows the execution
+ *   el.scheme = "speffz";        // or "ruwix" (default), or a LetterScheme
+ *   el.setAttribute("rotation", "x2 y'");   // how you hold it (yellow top, orange front…)
+ *   el.setAttribute("order", "corners");    // corners first (default edges first)
+ *
+ * Shows the letters in pairs, edges then (parity) then corners; the letter
+ * due is highlighted, done ones fade. A swap with another letter than the
+ * one due is called out. reveal="all" (default) / "done" / "none" hides the
+ * letters still to do (memo practice).
+ *
+ * Customising like the other elements: --cc-seq-* variables and --cc-accent,
+ * parts (edges, corners, label, letters, pair, letter, letter-done /
+ * -current / -todo / -hidden, parity, message, controls, button), slot
+ * "controls" (default: Show / Hide, Restart), `headless` (build your own
+ * from the `progress` event).
+ *
+ * Events: progress (detail: BldProgress + memo), letter (a letter done:
+ * { step, index }), wrong ({ expected, got }), complete.
+ */
+import { BldTracker, SCHEMES, formatMemo } from "../bld/index.js";
+import { solvedState } from "../core/index.js";
+import { ElementBase } from "./base.js";
+import { SEQUENCE_STYLES, escapeHtml } from "./sequence.js";
+const STYLES = /* css */ `
+.rows { display: flex; flex-direction: column; gap: 0.35em; }
+.row { display: flex; align-items: baseline; gap: 0.6em; flex-wrap: wrap; }
+.label { font: 600 11px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; min-width: 5.5em; }
+.letters { display: flex; flex-wrap: wrap; gap: 0.1em var(--cc-seq-gap); font: 600 var(--cc-seq-size) / 1.5 var(--cc-seq-font); }
+.pair { display: inline-flex; }
+.letter { padding: 0 0.12em; border-radius: 0.25em; transition: color 0.15s ease, background 0.15s ease; }
+.none { opacity: 0.5; font: 500 13px system-ui, sans-serif; }
+.parity { font: 600 12px/1 system-ui, sans-serif; padding: 0.3em 0.55em; border-radius: 999px; background: var(--cc-control-bg); }
+.message.wrong { color: var(--cc-seq-undo); }
+`;
+export class CubeBld extends ElementBase {
+    static observedAttributes = ["reveal", "rotation", "scheme", "order"];
+    root;
+    source = null;
+    off = null;
+    tracker = null;
+    _scheme = SCHEMES.ruwix;
+    shownAll = false;
+    lastDone = 0;
+    completed = false;
+    _messages = {
+        edges: "Edges",
+        corners: "Corners",
+        parity: "Parity",
+        wrong: "Swapped with {got} instead of {expected} — undo it",
+        complete: "All letters done",
+        show: "Show",
+        hide: "Hide",
+        restart: "Restart",
+    };
+    constructor() {
+        super();
+        this.root = this.attachShadow({ mode: "open" });
+        this.root.innerHTML = `<style>${SEQUENCE_STYLES}${STYLES}</style>
+      <div class="container" part="container">
+        <div class="rows"></div>
+        <slot name="message"><div class="message" part="message" role="status"></div></slot>
+        <slot name="controls"><div class="controls" part="controls">
+          <button part="button button-reveal" data-action="reveal" aria-pressed="false"></button>
+          <button part="button button-restart" data-action="restart"></button>
+        </div></slot>
+      </div>`;
+        this.root.addEventListener("click", (e) => {
+            const action = e.target.closest("[data-action]")?.dataset.action;
+            if (action === "reveal")
+                this.toggleShown();
+            else if (action === "restart")
+                this.reset();
+        });
+        this.labelButtons();
+    }
+    attributeChangedCallback(name) {
+        if (name === "scheme") {
+            const s = this.getAttribute("scheme");
+            if (s && SCHEMES[s])
+                this._scheme = SCHEMES[s];
+        }
+        if (name === "scheme" || name === "rotation" || name === "order")
+            this.reset();
+        else
+            this.update();
+    }
+    /** The letter scheme: "ruwix" (default), "speffz" or your own. */
+    get scheme() {
+        return this._scheme;
+    }
+    set scheme(s) {
+        this._scheme = typeof s === "string" ? SCHEMES[s] : s;
+        this.reset();
+    }
+    get messages() {
+        return { ...this._messages };
+    }
+    set messages(m) {
+        this._messages = { ...this._messages, ...m };
+        this.labelButtons();
+        this.update();
+    }
+    /** Memo and progress (null before anything is set). */
+    get progress() {
+        return this.tracker ? { ...this.tracker.progress, memo: this.tracker.memo } : null;
+    }
+    /** The memo as text, e.g. "Letters memorized for edges: QU SR NX…". */
+    get memoText() {
+        const m = this.tracker?.memo;
+        return m ? { edges: formatMemo(m.edges), corners: formatMemo(m.corners) } : null;
+    }
+    /** Memo of the attached cube as it is now, then follow its moves. Returns detach. */
+    attach(source) {
+        this.detach();
+        this.source = source;
+        this.off = source.on("move", (e) => this.push(e.move));
+        this.reset(source.state);
+        return () => this.detach();
+    }
+    detach() {
+        this.off?.();
+        this.off = null;
+        this.source = null;
+    }
+    /** Memo again from `state` (default: the attached cube as it is now). */
+    reset(state) {
+        const start = state ?? this.source?.state ?? solvedState();
+        this.tracker = new BldTracker(start, {
+            scheme: this._scheme,
+            rotation: this.getAttribute("rotation") ?? undefined,
+            order: this.getAttribute("order") === "corners" ? "corners" : "edges",
+        });
+        this.lastDone = 0;
+        this.completed = false;
+        this.update();
+    }
+    /** A face turn from the cube (called for you when attached). */
+    push(move) {
+        if (!this.tracker || this.completed)
+            return;
+        const p = this.tracker.push(move);
+        for (let i = this.lastDone; i < p.done; i++)
+            this.dispatchEvent(new CustomEvent("letter", { detail: { step: p.steps[i], index: i } }));
+        this.lastDone = p.done;
+        if (p.wrong)
+            this.dispatchEvent(new CustomEvent("wrong", { detail: p.wrong }));
+        this.update();
+        if (p.complete) {
+            this.completed = true;
+            this.dispatchEvent(new CustomEvent("complete", { detail: this.progress }));
+        }
+    }
+    /** Show every letter / back to the reveal mode. */
+    toggleShown() {
+        this.shownAll = !this.shownAll;
+        this.labelButtons();
+        this.update();
+    }
+    visible(status) {
+        if (this.shownAll)
+            return true;
+        const r = this.getAttribute("reveal");
+        return r === "none" ? false : r === "done" ? status === "done" : true;
+    }
+    update() {
+        const p = this.tracker?.progress;
+        const rows = this.root.querySelector(".rows");
+        if (!p) {
+            rows.innerHTML = "";
+            return;
+        }
+        const lettersOf = (kind) => {
+            const idx = p.steps.map((s, i) => (s.kind === kind ? i : -1)).filter((i) => i >= 0);
+            if (!idx.length)
+                return `<span class="none">—</span>`;
+            const pairs = [];
+            for (let j = 0; j < idx.length; j += 2) {
+                const pair = idx.slice(j, j + 2).map((i) => {
+                    const st = p.status[i];
+                    const shown = this.visible(st);
+                    return `<span class="letter ${st}${shown ? "" : " hidden"}" part="letter letter-${st}${shown ? "" : " letter-hidden"}">${shown ? escapeHtml(p.steps[i].letter) : "•"}</span>`;
+                });
+                pairs.push(`<span class="pair" part="pair">${pair.join("")}</span>`);
+            }
+            return pairs.join("");
+        };
+        const parityIdx = p.steps.findIndex((s) => s.kind === "parity");
+        const parity = parityIdx >= 0 ? `<span class="parity letter ${p.status[parityIdx]}" part="parity letter-${p.status[parityIdx]}">${escapeHtml(this._messages.parity)}</span>` : "";
+        // In solving order; parity after the first kind.
+        const row = (kind, withParity) => `<div class="row" part="${kind}s"><span class="label" part="label">${escapeHtml(kind === "edge" ? this._messages.edges : this._messages.corners)}</span><span class="letters" part="letters">${lettersOf(kind)}</span>${withParity ? parity : ""}</div>`;
+        const cornersFirst = this.getAttribute("order") === "corners";
+        rows.innerHTML = cornersFirst ? row("corner", true) + row("edge", false) : row("edge", true) + row("corner", false);
+        const message = this.root.querySelector(".message");
+        if (message) {
+            const text = p.wrong
+                ? this._messages.wrong.replace("{got}", p.wrong.got).replace("{expected}", p.wrong.expected)
+                : p.complete ? this._messages.complete : "";
+            message.textContent = text;
+            message.classList.toggle("on", !!text);
+            message.classList.toggle("wrong", !!p.wrong);
+        }
+        this.dispatchEvent(new CustomEvent("progress", { detail: this.progress }));
+    }
+    labelButtons() {
+        const reveal = this.root.querySelector('[data-action="reveal"]');
+        if (reveal) {
+            reveal.textContent = this.shownAll ? this._messages.hide : this._messages.show;
+            reveal.setAttribute("aria-pressed", String(this.shownAll));
+        }
+        const restart = this.root.querySelector('[data-action="restart"]');
+        if (restart)
+            restart.textContent = this._messages.restart;
+    }
+}
+export function defineCubeBld(tag = "cube-bld") {
+    if (!customElements.get(tag))
+        customElements.define(tag, class extends CubeBld {
+        });
+}

package/element/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./model.js";
+export * from "./player.js";
+export * from "./scramble.js";
+export * from "./alg.js";
+export * from "./practice.js";
+export * from "./bld.js";
+export * from "./sequence.js";
+export { ICONS, STYLES } from "./styles.js";

package/element/index.js

@@ -0,0 +1,21 @@
+import { defineCubePlayer } from "./player.js";
+import { defineCubeScramble } from "./scramble.js";
+import { defineCubeAlg } from "./alg.js";
+import { defineCubeAlgPractice } from "./practice.js";
+import { defineCubeBld } from "./bld.js";
+export * from "./model.js";
+export * from "./player.js";
+export * from "./scramble.js";
+export * from "./alg.js";
+export * from "./practice.js";
+export * from "./bld.js";
+export * from "./sequence.js";
+export { ICONS, STYLES } from "./styles.js";
+// Importing the package registers <cube-player>, <cube-scramble>, <cube-alg-practice>, <cube-bld> and <cube-alg>; define*("my-tag") for other names.
+if (typeof customElements !== "undefined") {
+    defineCubePlayer();
+    defineCubeScramble();
+    defineCubeAlg();
+    defineCubeAlgPractice();
+    defineCubeBld();
+}

package/element/model.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The player's logic without the DOM — what the controls show and do, as
+ * pure functions (tested in bun; the element only wires them to buttons).
+ */
+import { type Method, type Move } from "../core/index.js";
+import { type Recording, type Segment } from "../timeline/index.js";
+/** A mark on the progress bar, e.g. where a stage ends. */
+export interface Marker {
+    /** ms of recording time. */
+    time: number;
+    label: string;
+}
+/** "12.34" under a minute, "1:02.34" above. */
+export declare function formatTime(ms: number): string;
+/**
+ * An algorithm played at a steady tempo, as a recording: each move takes one
+ * beat (1 / movesPerSecond), each pause (`.` in the text) one beat of stillness.
+ */
+export declare function tempoRecording(alg: string | readonly Move[], movesPerSecond: number): {
+    recording: Recording;
+    interval: number;
+};
+/** Where each stage of `method` ends in `rec` (skipped stages left out). */
+export declare function stageMarkers(method: Method, rec: Recording): Marker[];
+/** Time to jump to for one move forward (+1) or back (−1) from `time`: the end of a move, or the start. */
+export declare function stepTime(rec: Recording, time: number, direction: 1 | -1): number;
+/** Fraction 0..1 of the way through. */
+export declare const fraction: (time: number, duration: number) => number;
+/**
+ * Moves that set the cube up before an algorithm plays: the setup, then —
+ * for `anchor = "end"` (the algorithm SOLVES the cube) — the algorithm's
+ * inverse, so playing it ends solved (or back at the setup).
+ */
+export declare function startMoves(setup: string | readonly Move[], alg: readonly Move[], anchor?: "start" | "end"): Move[];
+/** Default tooltip text of a segment: "F2L 2 · FL · 3.21 s (recognition 0.80 · execution 2.41) · 9 moves". */
+export declare function segmentText(s: Segment): string;

package/element/model.js

@@ -0,0 +1,64 @@
+/**
+ * The player's logic without the DOM — what the controls show and do, as
+ * pure functions (tested in bun; the element only wires them to buttons).
+ */
+import { invert, parseAlg, parseAlgDocument } from "../core/index.js";
+import { stageTimings } from "../timeline/index.js";
+/** "12.34" under a minute, "1:02.34" above. */
+export function formatTime(ms) {
+    const s = Math.max(0, ms) / 1000;
+    if (s < 60)
+        return s.toFixed(2);
+    const m = Math.floor(s / 60);
+    return `${m}:${(s - m * 60).toFixed(2).padStart(5, "0")}`;
+}
+/**
+ * An algorithm played at a steady tempo, as a recording: each move takes one
+ * beat (1 / movesPerSecond), each pause (`.` in the text) one beat of stillness.
+ */
+export function tempoRecording(alg, movesPerSecond) {
+    const doc = typeof alg === "string" ? parseAlgDocument(alg) : { moves: [...alg], pausesBefore: alg.map(() => 0) };
+    const interval = 1000 / Math.max(0.1, movesPerSecond);
+    let beats = 0;
+    const moves = doc.moves.map((move, i) => {
+        beats += doc.pausesBefore[i] + 1;
+        return { move, t: Math.round(beats * interval) };
+    });
+    return { recording: { scramble: [], moves, totalMs: Math.round(beats * interval) }, interval };
+}
+/** Where each stage of `method` ends in `rec` (skipped stages left out). */
+export function stageMarkers(method, rec) {
+    return stageTimings(method, rec)
+        .stages.filter((s) => !s.skipped)
+        .map((s) => ({ time: s.endMs, label: s.detail ? `${s.label} (${s.detail})` : s.label }));
+}
+/** Time to jump to for one move forward (+1) or back (−1) from `time`: the end of a move, or the start. */
+export function stepTime(rec, time, direction) {
+    const ends = rec.moves.map((m) => m.t);
+    if (direction > 0)
+        return ends.find((t) => t > time + 0.5) ?? rec.totalMs;
+    const before = ends.filter((t) => t < time - 0.5);
+    return before.length ? before[before.length - 1] : 0;
+}
+/** Fraction 0..1 of the way through. */
+export const fraction = (time, duration) => (duration > 0 ? Math.min(1, Math.max(0, time / duration)) : 0);
+/**
+ * Moves that set the cube up before an algorithm plays: the setup, then —
+ * for `anchor = "end"` (the algorithm SOLVES the cube) — the algorithm's
+ * inverse, so playing it ends solved (or back at the setup).
+ */
+export function startMoves(setup, alg, anchor = "start") {
+    const s = typeof setup === "string" ? parseAlg(setup) : [...setup];
+    return anchor === "end" ? [...s, ...invert(alg)] : s;
+}
+/** Default tooltip text of a segment: "F2L 2 · FL · 3.21 s (recognition 0.80 · execution 2.41) · 9 moves". */
+export function segmentText(s) {
+    const parts = [s.label];
+    if (s.detail)
+        parts.push(s.detail);
+    const total = `${formatTime(s.end - s.start)} s`;
+    parts.push(s.split !== undefined ? `${total} (recognition ${formatTime(s.split - s.start)} · execution ${formatTime(s.end - s.split)})` : total);
+    if (s.moves !== undefined)
+        parts.push(`${s.moves} move${s.moves === 1 ? "" : "s"}`);
+    return parts.join(" · ");
+}