@wodzik/cubecore 0.1.0

package/element/practice.d.ts

@@ -0,0 +1,75 @@
+/**
+ * <cube-alg-practice> — practising an algorithm on a smart cube. Set the
+ * case up (e.g. with <cube-scramble>), then:
+ *
+ *   el.alg = "R U R' U R U2 R'";
+ *   el.attach(session);                         // tracks from the cube's current state
+ *   el.addEventListener("complete", (e) => …);   // e.detail.practice: { elapsedMs, turns, tps, mistakes, differentAlg }
+ *
+ * reveal="all"   every move shown (learning)
+ * reveal="done"  dots, each move shown once done (default)
+ * reveal="none"  dots to the end (you know it)
+ * A slip counts a mistake, shows what to undo and (unless
+ * hint-on-mistake="off") the move that should have come. Another algorithm
+ * that reaches the same end state completes it too, flagged `differentAlg`.
+ *
+ * Default controls: Hint, Show / Hide, Restart (parts button-hint,
+ * button-reveal, button-restart). Customising: see sequence.ts.
+ * Events: progress, mistake, complete (detail: the progress). Messages:
+ * undo, reset, complete, hint, show, hide, restart, differentAlg, and
+ * `formatStats(practice)` for the line under the moves.
+ */
+import { type Move, type NextTurn, type PracticeProgress, type State } from "../core/index.js";
+import { CubeSequenceElement, type Decorations, type SequenceMessages, type ShownToken } from "./sequence.js";
+export interface PracticeMessages extends SequenceMessages {
+    hint: string;
+    show: string;
+    hide: string;
+    restart: string;
+    differentAlg: string;
+}
+export declare class CubeAlgPractice extends CubeSequenceElement {
+    static observedAttributes: string[];
+    private tracker;
+    private moves;
+    private shownAll;
+    private _decorations;
+    private extra;
+    /** The line under the moves once done (and while going). */
+    formatStats: (p: PracticeProgress["practice"], complete: boolean) => string;
+    constructor();
+    attributeChangedCallback(): void;
+    get alg(): string;
+    set alg(v: string | readonly Move[]);
+    /**
+     * Text around written moves, e.g. trigger groups "F (R U R' U') F'":
+     * `{ 1: { prefix: "(" }, 4: { suffix: ")" } }` (by move index; part "decoration").
+     */
+    get decorations(): Decorations;
+    set decorations(d: Decorations | null);
+    protected decorationOf(index: number): {
+        prefix?: string;
+        suffix?: string;
+    } | undefined;
+    get messages(): PracticeMessages;
+    set messages(m: Partial<PracticeMessages>);
+    get progress(): PracticeProgress | null;
+    /** Show the next move. */
+    hint(): void;
+    /** Show every move / back to the reveal mode. */
+    toggleShown(): void;
+    protected startTracking(start: State): void;
+    protected track(move: Move, time: number): PracticeProgress;
+    protected nextTurn(): NextTurn | null;
+    protected tokens(): ShownToken[];
+    protected extraMessage(): string;
+    protected onAction(action: string): void;
+    private revealMode;
+    private labelButtons;
+}
+export declare function defineCubeAlgPractice(tag?: string): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        "cube-alg-practice": CubeAlgPractice;
+    }
+}

package/element/practice.js

@@ -0,0 +1,150 @@
+/**
+ * <cube-alg-practice> — practising an algorithm on a smart cube. Set the
+ * case up (e.g. with <cube-scramble>), then:
+ *
+ *   el.alg = "R U R' U R U2 R'";
+ *   el.attach(session);                         // tracks from the cube's current state
+ *   el.addEventListener("complete", (e) => …);   // e.detail.practice: { elapsedMs, turns, tps, mistakes, differentAlg }
+ *
+ * reveal="all"   every move shown (learning)
+ * reveal="done"  dots, each move shown once done (default)
+ * reveal="none"  dots to the end (you know it)
+ * A slip counts a mistake, shows what to undo and (unless
+ * hint-on-mistake="off") the move that should have come. Another algorithm
+ * that reaches the same end state completes it too, flagged `differentAlg`.
+ *
+ * Default controls: Hint, Show / Hide, Restart (parts button-hint,
+ * button-reveal, button-restart). Customising: see sequence.ts.
+ * Events: progress, mistake, complete (detail: the progress). Messages:
+ * undo, reset, complete, hint, show, hide, restart, differentAlg, and
+ * `formatStats(practice)` for the line under the moves.
+ */
+import { PracticeTracker, formatMove, parseAlg } from "../core/index.js";
+import { CubeSequenceElement } from "./sequence.js";
+export class CubeAlgPractice extends CubeSequenceElement {
+    static observedAttributes = [...CubeSequenceElement.observedAttributes, "reveal", "hint-on-mistake"];
+    tracker = null;
+    moves = [];
+    shownAll = false;
+    _decorations = {};
+    extra = { hint: "Hint", show: "Show", hide: "Hide", restart: "Restart", differentAlg: "solved another way" };
+    /** The line under the moves once done (and while going). */
+    formatStats = (p, complete) => {
+        if (!p.turns)
+            return "";
+        const parts = [`${(p.elapsedMs / 1000).toFixed(2)} s`, `${p.turns} turn${p.turns === 1 ? "" : "s"}`, `${p.tps.toFixed(1)} TPS`];
+        if (p.mistakes)
+            parts.push(`${p.mistakes} mistake${p.mistakes === 1 ? "" : "s"}`);
+        if (complete && p.differentAlg)
+            parts.push(this.extra.differentAlg);
+        return parts.join(" · ");
+    };
+    constructor() {
+        super("", `<button part="button button-hint" data-action="hint"></button><button part="button button-reveal" data-action="reveal" aria-pressed="false"></button><button part="button button-restart" data-action="restart"></button>`);
+        this.labelButtons();
+    }
+    attributeChangedCallback() {
+        this.tracker?.setReveal(this.revealMode());
+        super.attributeChangedCallback();
+    }
+    get alg() {
+        return this.moves.map(formatMove).join(" ");
+    }
+    set alg(v) {
+        this.moves = typeof v === "string" ? parseAlg(v) : [...v];
+        this.shownAll = false;
+        this.reset();
+    }
+    /**
+     * Text around written moves, e.g. trigger groups "F (R U R' U') F'":
+     * `{ 1: { prefix: "(" }, 4: { suffix: ")" } }` (by move index; part "decoration").
+     */
+    get decorations() {
+        return this._decorations;
+    }
+    set decorations(d) {
+        this._decorations = d ?? {};
+        this.update();
+    }
+    decorationOf(index) {
+        return this._decorations[index];
+    }
+    get messages() {
+        return { ...this.messagesBase, ...this.extra };
+    }
+    set messages(m) {
+        const { hint, show, hide, restart, differentAlg, ...base } = m;
+        this.extra = { ...this.extra, ...Object.fromEntries(Object.entries({ hint, show, hide, restart, differentAlg }).filter(([, v]) => v !== undefined)) };
+        this.labelButtons();
+        this.setMessages(base);
+    }
+    get progress() {
+        return this.tracker?.progress ?? null;
+    }
+    /** Show the next move. */
+    hint() {
+        this.tracker?.hint();
+        this.update();
+    }
+    /** Show every move / back to the reveal mode. */
+    toggleShown() {
+        this.shownAll = !this.shownAll;
+        this.tracker?.setReveal(this.revealMode());
+        this.labelButtons();
+        this.update();
+    }
+    startTracking(start) {
+        this.tracker = new PracticeTracker(this.moves, start, { frame: this.startFrame, reveal: this.revealMode(), hintOnMistake: this.getAttribute("hint-on-mistake") !== "off" });
+    }
+    track(move, time) {
+        const before = this.tracker.progress.practice.mistakes;
+        const p = this.tracker.push(move, time);
+        if (p.practice.mistakes > before)
+            this.dispatchEvent(new CustomEvent("mistake", { detail: p }));
+        return p;
+    }
+    nextTurn() {
+        return this.tracker?.nextTurn ?? null;
+    }
+    tokens() {
+        const p = this.tracker?.progress;
+        return this.moves.map((m, i) => {
+            const t = p?.practice.tokens[i];
+            return { text: formatMove(m), status: t?.status ?? "todo", visible: t?.visible ?? true };
+        });
+    }
+    extraMessage() {
+        const p = this.tracker?.progress;
+        return p ? this.formatStats(p.practice, p.complete) : "";
+    }
+    onAction(action) {
+        if (action === "hint")
+            this.hint();
+        else if (action === "reveal")
+            this.toggleShown();
+        else if (action === "restart")
+            this.reset();
+    }
+    revealMode() {
+        if (this.shownAll)
+            return "all";
+        const r = this.getAttribute("reveal");
+        return r === "all" || r === "none" ? r : "done";
+    }
+    labelButtons() {
+        const set = (sel, text) => {
+            const b = this.root.querySelector(`[data-action="${sel}"]`);
+            if (b)
+                b.textContent = text;
+        };
+        set("hint", this.extra.hint);
+        set("reveal", this.shownAll ? this.extra.hide : this.extra.show);
+        set("restart", this.extra.restart);
+        this.root.querySelector('[data-action="reveal"]')?.setAttribute("aria-pressed", String(this.shownAll));
+    }
+}
+export function defineCubeAlgPractice(tag = "cube-alg-practice") {
+    if (!customElements.get(tag))
+        customElements.define(tag, class extends CubeAlgPractice {
+        });
+}

package/element/scramble.d.ts

@@ -0,0 +1,50 @@
+/**
+ * <cube-scramble> — shows a scramble and follows it on a smart cube: done
+ * moves fade, the next one is highlighted, half of a half turn shows as
+ * partial, after a slip it shows what to undo. The scramble is always shown
+ * in full (never hidden).
+ *
+ *   el.scramble = "R U2 F' …";      // or Move[]
+ *   el.attach(session);             // a SmartCubeSession, or anything with state + "move" events
+ *   el.addEventListener("complete", startInspection);
+ *
+ * `editable`: an input to paste or type your own scramble (competition,
+ * another timer…) — validated as you type; a valid one replaces the
+ * scramble and fires `change` (detail: { moves, text }).
+ *
+ * Customising: see sequence.ts (CSS variables, ::part, slots, headless).
+ * Own parts: input, error. Messages: undo, reset, complete, placeholder, invalid.
+ * What happens when it's done (inspection, timer…) is the app's call.
+ */
+import { type Move, type NextTurn, type SequenceProgress, type State } from "../core/index.js";
+import { CubeSequenceElement, type SequenceMessages, type ShownToken } from "./sequence.js";
+export interface ScrambleMessages extends SequenceMessages {
+    placeholder: string;
+    invalid: string;
+}
+export declare class CubeScramble extends CubeSequenceElement {
+    static observedAttributes: string[];
+    private tracker;
+    private moves;
+    private extra;
+    constructor();
+    /** The scramble (written notation or moves). */
+    get scramble(): string;
+    set scramble(v: string | readonly Move[]);
+    private setMoves;
+    get messages(): ScrambleMessages;
+    set messages(m: Partial<ScrambleMessages>);
+    get progress(): SequenceProgress | null;
+    protected startTracking(start: State): void;
+    protected track(move: Move): SequenceProgress;
+    protected nextTurn(): NextTurn | null;
+    protected tokens(): ShownToken[];
+    /** A pasted / typed scramble: take it if it parses (and isn't empty). */
+    private fromText;
+}
+export declare function defineCubeScramble(tag?: string): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        "cube-scramble": CubeScramble;
+    }
+}

package/element/scramble.js

@@ -0,0 +1,107 @@
+/**
+ * <cube-scramble> — shows a scramble and follows it on a smart cube: done
+ * moves fade, the next one is highlighted, half of a half turn shows as
+ * partial, after a slip it shows what to undo. The scramble is always shown
+ * in full (never hidden).
+ *
+ *   el.scramble = "R U2 F' …";      // or Move[]
+ *   el.attach(session);             // a SmartCubeSession, or anything with state + "move" events
+ *   el.addEventListener("complete", startInspection);
+ *
+ * `editable`: an input to paste or type your own scramble (competition,
+ * another timer…) — validated as you type; a valid one replaces the
+ * scramble and fires `change` (detail: { moves, text }).
+ *
+ * Customising: see sequence.ts (CSS variables, ::part, slots, headless).
+ * Own parts: input, error. Messages: undo, reset, complete, placeholder, invalid.
+ * What happens when it's done (inspection, timer…) is the app's call.
+ */
+import { SequenceTracker, formatMove, parseAlg } from "../core/index.js";
+import { CubeSequenceElement } from "./sequence.js";
+const STYLES = /* css */ `
+.input { flex: 1; min-width: 12em; display: none; }
+:host([editable]) .input { display: block; }
+.input input {
+  width: 100%; box-sizing: border-box;
+  background: color-mix(in srgb, currentColor 6%, transparent); color: inherit;
+  border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: var(--cc-control-radius);
+  padding: 7px 9px; font: 13px var(--cc-seq-font);
+}
+.error { display: none; color: var(--cc-seq-undo); font: 500 12px/1.3 system-ui, sans-serif; width: 100%; }
+.error.on { display: block; }
+`;
+export class CubeScramble extends CubeSequenceElement {
+    static observedAttributes = [...CubeSequenceElement.observedAttributes, "editable"];
+    tracker = null;
+    moves = [];
+    extra = { placeholder: "Paste or type your own scramble", invalid: "Not a scramble:" };
+    constructor() {
+        super(STYLES, `<div class="input" part="input-container"><input part="input" type="text" spellcheck="false" autocomplete="off" /></div><div class="error" part="error"></div>`);
+        const input = this.root.querySelector("input");
+        input.placeholder = this.extra.placeholder;
+        input.addEventListener("input", () => this.fromText(input.value));
+    }
+    /** The scramble (written notation or moves). */
+    get scramble() {
+        return this.moves.map(formatMove).join(" ");
+    }
+    set scramble(v) {
+        this.setMoves(typeof v === "string" ? parseAlg(v) : [...v]);
+        // Set from outside (a new generated one): the typed text is stale.
+        this.root.querySelector("input").value = "";
+        this.root.querySelector(".error").classList.remove("on");
+    }
+    setMoves(moves) {
+        this.moves = moves;
+        this.reset();
+    }
+    get messages() {
+        return { ...this.messagesBase, ...this.extra };
+    }
+    set messages(m) {
+        const { placeholder, invalid, ...base } = m;
+        if (placeholder !== undefined)
+            this.extra.placeholder = placeholder;
+        if (invalid !== undefined)
+            this.extra.invalid = invalid;
+        this.root.querySelector("input").placeholder = this.extra.placeholder;
+        this.setMessages(base);
+    }
+    get progress() {
+        return this.tracker?.progress ?? null;
+    }
+    startTracking(start) {
+        this.tracker = new SequenceTracker(this.moves, start, { frame: this.startFrame });
+    }
+    track(move) {
+        return this.tracker.push(move);
+    }
+    nextTurn() {
+        return this.tracker?.nextTurn ?? null;
+    }
+    tokens() {
+        const p = this.tracker?.progress;
+        return this.moves.map((m, i) => ({ text: formatMove(m), status: p?.tokens[i] ?? "todo", visible: true }));
+    }
+    /** A pasted / typed scramble: take it if it parses (and isn't empty). */
+    fromText(text) {
+        const error = this.root.querySelector(".error");
+        try {
+            const moves = parseAlg(text);
+            error.classList.remove("on");
+            if (!moves.length)
+                return;
+            this.setMoves(moves);
+            this.dispatchEvent(new CustomEvent("change", { detail: { moves, text } }));
+        }
+        catch (e) {
+            error.textContent = `${this.extra.invalid} ${e instanceof Error ? e.message : String(e)}`;
+            error.classList.add("on");
+        }
+    }
+}
+export function defineCubeScramble(tag = "cube-scramble") {
+    if (!customElements.get(tag))
+        customElements.define(tag, class extends CubeScramble {
+        });
+}

package/element/sequence.d.ts

@@ -0,0 +1,126 @@
+/**
+ * CubeSequenceElement — what <cube-scramble> and <cube-alg-practice> share:
+ * a list of moves followed on a smart cube (core SequenceTracker under the
+ * hood), with the slip / undo line, a status message, controls, events and
+ * one styling vocabulary. Not registered on its own.
+ *
+ * Three levels of customising, like <cube-player>:
+ *   1. CSS variables (on the element or any ancestor):
+ *        --cc-seq-font, --cc-seq-size, --cc-seq-gap           text
+ *        --cc-seq-done, --cc-seq-current, --cc-seq-current-bg, --cc-seq-partial,
+ *        --cc-seq-todo, --cc-seq-hidden (dots), --cc-seq-undo,
+ *        --cc-seq-wrong-way (the move due, turned the wrong way)   move colours
+ *        --cc-accent, --cc-control-bg, --cc-control-radius      controls
+ *   2. ::part(): container, moves, move, move-done / -current / -partial / -todo /
+ *      -hidden, undo, undo-label, undo-move, message, controls, button (+ button-<name>),
+ *      and each element's own (scramble: input, error).
+ *   3. Replace pieces: children with slot="undo", slot="message" or
+ *      slot="controls" take those places (controls="none" hides the default
+ *      controls); `headless` hides the whole built-in view — build yours
+ *      from the `progress` event (tokens with text / status / visibility,
+ *      undo, needsReset, complete, …) and call the element's methods.
+ *
+ * Arrows: with `arrows` set (the element following a cube — attached, or
+ * fed with push()) and a player (`player="id"` of a <cube-player>,
+ * or the `player` property), the 3D cube shows the next turn — one arrow per
+ * turning layer (two for a wide r), as many heads as quarter turns, in
+ * --cc-arrow; after a slip the undo move in --cc-arrow-undo, or in
+ * --cc-arrow-wrong-way when the right face went the wrong way.
+ * `arrow-shape="circle"` for arcs instead of ribbons along the faces.
+ *
+ * After a slip the moves give way to the way back: the undo moves in their
+ * place (--cc-seq-undo), until the cube is back on track —
+ * `undo-display="below"` keeps the moves and shows the undo line under them.
+ *
+ * Events: progress (detail: the progress), complete.
+ */
+import { type Frame, type Move, type NextTurn, type SequenceProgress, type State, type TokenStatus, type TurnArrow } from "../core/index.js";
+import type { ArrowStyle } from "../render/index.js";
+import { ElementBase } from "./base.js";
+/** Where turn arrows go — a <cube-player> fits. */
+export interface ArrowTarget {
+    showTurnArrows(arrows: readonly TurnArrow[] | null, style?: ArrowStyle, owner?: unknown): void;
+}
+/** What `attach` needs: the cube's current state and its moves (a SmartCubeSession fits). */
+export interface MoveSource {
+    readonly state: State;
+    on(type: "move", listener: (e: {
+        move: Move;
+        time?: number;
+    }) => void): () => void;
+}
+/** Text shown before / after written moves, by move index. */
+export type Decorations = Partial<Record<number, {
+    prefix?: string;
+    suffix?: string;
+}>>;
+/** One move as shown: its text, where it stands, whether it's shown (else a dot). */
+export interface ShownToken {
+    text: string;
+    status: TokenStatus;
+    visible: boolean;
+}
+export interface SequenceMessages {
+    undo: string;
+    reset: string;
+    complete: string;
+}
+export declare const SEQUENCE_STYLES = "\n:host {\n  --cc-seq-font: ui-monospace, \"SF Mono\", Menlo, monospace;\n  --cc-seq-size: 22px;\n  --cc-seq-gap: 0.35em;\n  --cc-seq-done: color-mix(in srgb, currentColor 35%, transparent);\n  --cc-seq-current: currentColor;\n  --cc-seq-current-bg: color-mix(in srgb, var(--cc-accent) 24%, transparent);\n  --cc-seq-partial: var(--cc-accent);\n  --cc-seq-todo: color-mix(in srgb, currentColor 82%, transparent);\n  --cc-seq-hidden: color-mix(in srgb, currentColor 45%, transparent);\n  --cc-seq-undo: #ff5a5a;\n  --cc-seq-wrong-way: #ff9a1f;\n  --cc-seq-decoration: color-mix(in srgb, currentColor 70%, transparent);\n  --cc-arrow: #2f8bff;\n  --cc-arrow-undo: #ff4545;\n  --cc-arrow-wrong-way: #ff9a1f;\n  --cc-accent: #4f8cff;\n  --cc-control-bg: color-mix(in srgb, currentColor 8%, transparent);\n  --cc-control-bg-hover: color-mix(in srgb, currentColor 15%, transparent);\n  --cc-control-radius: 8px;\n  display: block;\n}\n:host([headless]) .container { display: none; }\n.group { display: inline-flex; align-items: baseline; }\n.decoration { color: var(--cc-seq-decoration); }\n.container { display: flex; flex-direction: column; gap: 0.5em; }\n.container.slip .moves { display: none; }\n.container.slip .undo { font-size: var(--cc-seq-size); line-height: 1.5; }\n.moves { display: flex; flex-wrap: wrap; gap: 0.1em var(--cc-seq-gap); font: 600 var(--cc-seq-size) / 1.5 var(--cc-seq-font); }\n.move { padding: 0 0.18em; border-radius: 0.25em; transition: color 0.15s ease, background 0.15s ease; }\n.done { color: var(--cc-seq-done); }\n.current { color: var(--cc-seq-current); background: var(--cc-seq-current-bg); }\n.partial { color: var(--cc-seq-partial); background: var(--cc-seq-current-bg); }\n.wrong-way { color: var(--cc-seq-wrong-way); background: var(--cc-seq-current-bg); }\n.todo { color: var(--cc-seq-todo); }\n.hidden { color: var(--cc-seq-hidden); }\n.undo { display: none; color: var(--cc-seq-undo); gap: var(--cc-seq-gap); flex-wrap: wrap; align-items: baseline; font: 600 calc(var(--cc-seq-size) * 0.85) / 1.4 var(--cc-seq-font); }\n.undo.on { display: flex; }\n.undo-label { font: 600 0.65em/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 0.3em; }\n.message { display: none; font: 500 13px/1.4 system-ui, sans-serif; opacity: 0.85; }\n.message.on { display: block; }\n.controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }\n.controls:empty { display: none; }\n:host([controls=\"none\"]) .controls { display: none; }\nbutton {\n  border: 0; border-radius: var(--cc-control-radius);\n  background: var(--cc-control-bg); color: inherit;\n  padding: 6px 11px; font: 600 12px/1 system-ui, sans-serif; cursor: pointer;\n}\nbutton:hover { background: var(--cc-control-bg-hover); }\nbutton:focus-visible, input:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }\nbutton[aria-pressed=\"true\"] { background: color-mix(in srgb, var(--cc-accent) 25%, transparent); }\n";
+export declare abstract class CubeSequenceElement extends ElementBase {
+    protected readonly root: ShadowRoot;
+    protected source: MoveSource | null;
+    private off;
+    protected messagesBase: SequenceMessages;
+    private completed;
+    private _player;
+    /** How the cube is held when the sequence starts (see `frame`). */
+    protected startFrame: Frame;
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    constructor(extraStyles?: string, controlsHtml?: string);
+    /** Start following from `start`. */
+    protected abstract startTracking(start: State): void;
+    /** Feed one face turn; return the progress. */
+    protected abstract track(move: Move, time: number): SequenceProgress;
+    /** Current progress (null before anything is set). */
+    abstract get progress(): SequenceProgress | null;
+    /** The moves as shown. */
+    protected abstract tokens(): ShownToken[];
+    /** What to turn now (null: nothing, or nothing to give away). */
+    protected abstract nextTurn(): NextTurn | null;
+    /** Extra message (e.g. stats) when nothing else is said. */
+    protected extraMessage(): string;
+    protected onAction(_action: string): void;
+    /** Follow a smart cube from its current state. Returns detach. */
+    attach(source: MoveSource): () => void;
+    detach(): void;
+    /**
+     * How the cube is held when the sequence starts (default: its own U on top,
+     * F in front) — for an algorithm right after one with a net rotation.
+     * Setting it starts again.
+     */
+    get frame(): Frame;
+    set frame(f: Frame | null);
+    /** Start again from `start` (default: the attached cube's state, else solved). */
+    reset(start?: State): void;
+    /** A face turn from the cube (called for you when attached). Once complete, further turns are
+     * ignored (the solve / next attempt has started) until a new sequence or `reset()`. */
+    push(move: Move, time?: number): void;
+    /** Player for the arrows (else the `player` attribute's id). */
+    get player(): ArrowTarget | null;
+    set player(p: ArrowTarget | null);
+    private arrowTarget;
+    /** Draw the arrows again — e.g. after changing --cc-arrow* (CSS changes don't notify the element). */
+    refreshArrows(): void;
+    private syncArrows;
+    get messages(): SequenceMessages;
+    set messages(m: Partial<SequenceMessages>);
+    protected setMessages(m: Partial<SequenceMessages>): void;
+    /** Text around written move `index` (none here; <cube-alg-practice> has trigger groups). */
+    protected decorationOf(_index: number): {
+        prefix?: string;
+        suffix?: string;
+    } | undefined;
+    protected update(): void;
+}
+export declare const escapeHtml: (s: string) => string;