@wodzik/cubecore 0.1.0 → 0.1.2

package/analyze/roux.d.ts

@@ -18,6 +18,8 @@ import { type RouxSide } from "../roux/index.js";
 export interface RouxAnalyzeOptions {
     /** Physical faces the first block may go on (its left side); default all six. */
     sides?: readonly Face[];
+    /** Physical faces the blocks' bottom may be on (colour neutrality, like CFOP's `crosses`: e.g. ["U", "D"] = white / yellow); default all six. */
+    bottoms?: readonly Face[];
     /** Case ids the solver knows ("Sune Left Bar"…) — the CMLL step gets `known`. */
     known?: Iterable<string>;
 }
@@ -59,8 +61,8 @@ export interface RouxAnalysisResult {
     bySide: RouxAnalysis[];
     best: RouxAnalysis;
 }
-/** One side (and its best bottom): the whole way through, as held. */
-export declare function analyzeRouxSide(scrambled: State, side: Face, known?: Set<string> | null): RouxAnalysis;
+/** One side (and its best bottom, out of `bottoms` if given): the whole way through, as held. */
+export declare function analyzeRouxSide(scrambled: State, side: Face, known?: Set<string> | null, bottoms?: readonly Face[]): RouxAnalysis;
 /** Analyse a scramble for Roux, for each side the first block can go on. */
 export declare function analyzeRoux(scramble: string | readonly Move[] | State, options?: RouxAnalyzeOptions): RouxAnalysisResult;
 /** Does following it (as held) solve the cube? */

package/analyze/roux.js

@@ -19,12 +19,15 @@ import { STAGES, lseSolver, stageSolver } from "../solve/index.js";
 import { rotationFor } from "./rotations.js";
 const FB_FIXED = { ...ROUX_TRAINERS.fb(), name: "roux-fb-fixed", neutral: undefined };
 const SIDES = ["front", "back"];
-/** One side (and its best bottom): the whole way through, as held. */
-export function analyzeRouxSide(scrambled, side, known = null) {
+/** One side (and its best bottom, out of `bottoms` if given): the whole way through, as held. */
+export function analyzeRouxSide(scrambled, side, known = null, bottoms) {
     // The best bottom colour for the first block on this side.
     const fb = stageSolver(FB_FIXED);
     let best = null;
-    for (const frame of FRAMES.filter((f) => f.face.L === side)) {
+    const frames = FRAMES.filter((f) => f.face.L === side && (!bottoms || bottoms.includes(f.face.D)));
+    if (!frames.length)
+        throw new Error(`No allowed bottom next to side ${side}`);
+    for (const frame of frames) {
         const sol = fb.solve(reframe(scrambled, frame), { maxDepth: 12 })[0];
         if (sol && (!best || sol.length < best.moves.length))
             best = { frame, moves: sol };
@@ -82,8 +85,12 @@ export function analyzeRouxSide(scrambled, side, known = null) {
 export function analyzeRoux(scramble, options = {}) {
     const state = scramble instanceof Uint8Array ? scramble : applyMoves(solvedState(), typeof scramble === "string" ? parseAlg(scramble) : scramble);
     const known = options.known ? new Set(options.known) : null;
-    const sides = options.sides ?? ["L", "R", "F", "B", "U", "D"];
-    const bySide = sides.map((side) => analyzeRouxSide(state, side, known)).sort((a, b) => a.length - b.length);
+    const bottoms = options.bottoms;
+    // A side is possible only with an allowed bottom next to it (not on the side itself or opposite it).
+    const sides = (options.sides ?? ["L", "R", "F", "B", "U", "D"]).filter((side) => FRAMES.some((f) => f.face.L === side && (!bottoms || bottoms.includes(f.face.D))));
+    if (!sides.length)
+        throw new Error("No side has an allowed bottom");
+    const bySide = sides.map((side) => analyzeRouxSide(state, side, known, bottoms)).sort((a, b) => a.length - b.length);
     return { bySide, best: bySide[0] };
 }
 /** Does following it (as held) solve the cube? */

package/element/model.d.ts

@@ -32,5 +32,10 @@ export declare const fraction: (time: number, duration: number) => number;
  * 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". */
+/** A segment's popup in two lines: the heading ("OLL · 2.64 s") and the details ("recognition 1.55 · execution 1.09 · 7 moves"). */
+export declare function segmentLines(s: Segment): {
+    title: string;
+    details: string;
+};
+/** Default tooltip text of a segment (one line): "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

@@ -51,7 +51,17 @@ 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". */
+/** A segment's popup in two lines: the heading ("OLL · 2.64 s") and the details ("recognition 1.55 · execution 1.09 · 7 moves"). */
+export function segmentLines(s) {
+    const title = [s.label, s.detail, `${formatTime(s.end - s.start)} s`].filter(Boolean).join(" · ");
+    const details = [];
+    if (s.split !== undefined)
+        details.push(`recognition ${formatTime(s.split - s.start)}`, `execution ${formatTime(s.end - s.split)}`);
+    if (s.moves !== undefined)
+        details.push(`${s.moves} move${s.moves === 1 ? "" : "s"}`);
+    return { title, details: details.join(" · ") };
+}
+/** Default tooltip text of a segment (one line): "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)

package/element/player.d.ts

@@ -74,6 +74,8 @@ export declare class CubePlayer extends ElementBase {
     private liveSource;
     private turnArrows;
     private clock;
+    /** How long a move animates (recording ms) — the clock's, and a step's. */
+    private maxAnimMs;
     private unsubscribe;
     private rec;
     private start;
@@ -144,8 +146,17 @@ export declare class CubePlayer extends ElementBase {
     get applied(): number;
     /** The moves being played (the algorithm, or the recording's moves). */
     get moves(): Move[];
+    /** The next move, animated (as it turns when playing, at the current speed). */
     stepForward(): void;
+    /** The last move undone, animated backwards. */
     stepBack(): void;
+    private stepFrame;
+    private stepEnd;
+    /** Run the clock from `from` to `to` (recording ms) in real time, then settle on `end`. */
+    private animateStep;
+    /** A step still animating: jump to where it ends (another step, or anything else, comes next). */
+    private finishStep;
+    private stopStep;
     toStart(): void;
     toEnd(): void;
     /** Follow a smart cube: its moves animate, resyncs jump, its gyro turns the cube. Returns detach. */

package/element/player.js

@@ -42,8 +42,8 @@ import { applyMoves, parseAlg, solvedState, spinsAfter } from "../core/index.js"
 import { renderSvg } from "../image/index.js";
 import { CubeRenderer, showPosition } from "../render/index.js";
 import { SKINS } from "../skin/index.js";
-import { ReplayClock, compressPauses, segmentAt, segmentPlayed, stageSegments } from "../timeline/index.js";
-import { formatTime, fraction, segmentText, startMoves, stepTime, tempoRecording } from "./model.js";
+import { ReplayClock, compressPauses, moveWindows, segmentAt, segmentPlayed, stageSegments } from "../timeline/index.js";
+import { formatTime, fraction, segmentLines, segmentText, startMoves, stepTime, tempoRecording } from "./model.js";
 import { ICONS, STYLES } from "./styles.js";
 import { ElementBase } from "./base.js";
 const TEMPLATE = `
@@ -83,6 +83,8 @@ export class CubePlayer extends ElementBase {
     liveSource = null;
     turnArrows = null;
     clock = null;
+    /** How long a move animates (recording ms) — the clock's, and a step's. */
+    maxAnimMs = 150;
     unsubscribe = null;
     rec = { scramble: [], moves: [], totalMs: 0 };
     start = solvedState();
@@ -122,6 +124,7 @@ export class CubePlayer extends ElementBase {
     }
     disconnectedCallback() {
         this.connected = false;
+        this.stopStep();
         this.darkQuery?.removeEventListener("change", this.onScheme);
         this.clock?.pause();
         this.unsubscribe?.();
@@ -282,6 +285,7 @@ export class CubePlayer extends ElementBase {
     play() {
         if (!this.clock || this.playing)
             return;
+        this.finishStep();
         this.clock.play();
         this.dispatchEvent(new Event("play"));
         this.updateUi(this.currentTime);
@@ -300,6 +304,7 @@ export class CubePlayer extends ElementBase {
             this.play();
     }
     seek(ms) {
+        this.stopStep();
         this.clock?.seek(ms);
     }
     /** Jump to the moment `k` moves are done (0 = the start). */
@@ -315,13 +320,67 @@ export class CubePlayer extends ElementBase {
     get moves() {
         return this.rec.moves.map((m) => m.move);
     }
+    /** The next move, animated (as it turns when playing, at the current speed). */
     stepForward() {
         this.pause();
-        this.seek(stepTime(this.rec, this.currentTime, 1));
-    }
+        this.finishStep();
+        const time = this.currentTime;
+        const target = stepTime(this.rec, time, 1);
+        const k = this.rec.moves.findIndex((m) => m.t === target);
+        if (k < 0)
+            return this.seek(target);
+        const [from, to] = moveWindows(this.rec, { maxAnimMs: this.maxAnimMs })[k];
+        this.animateStep(Math.max(time, from), to, to);
+    }
+    /** The last move undone, animated backwards. */
     stepBack() {
         this.pause();
-        this.seek(stepTime(this.rec, this.currentTime, -1));
+        this.finishStep();
+        const time = this.currentTime;
+        const target = stepTime(this.rec, time, -1);
+        // The move being undone: the last one finished by now.
+        let k = -1;
+        this.rec.moves.forEach((m, i) => {
+            if (m.t <= time + 0.5)
+                k = i;
+        });
+        if (k < 0)
+            return this.seek(target);
+        const [from, to] = moveWindows(this.rec, { maxAnimMs: this.maxAnimMs })[k];
+        this.animateStep(Math.min(time, to), from, target);
+    }
+    stepFrame = 0;
+    stepEnd = null;
+    /** Run the clock from `from` to `to` (recording ms) in real time, then settle on `end`. */
+    animateStep(from, to, end) {
+        const clock = this.clock;
+        if (!clock)
+            return;
+        clock.seek(from);
+        // At least a quarter second: a step is for looking at the move.
+        const duration = Math.max(250, Math.abs(to - from) / (this._rate || 1));
+        const started = performance.now();
+        this.stepEnd = end;
+        const tick = () => {
+            const k = Math.min(1, (performance.now() - started) / duration);
+            if (k >= 1)
+                return this.finishStep();
+            clock.seek(from + (to - from) * k);
+            this.stepFrame = requestAnimationFrame(tick);
+        };
+        this.stepFrame = requestAnimationFrame(tick);
+    }
+    /** A step still animating: jump to where it ends (another step, or anything else, comes next). */
+    finishStep() {
+        if (this.stepEnd === null)
+            return;
+        const end = this.stepEnd;
+        this.stopStep();
+        this.clock?.seek(end);
+    }
+    stopStep() {
+        cancelAnimationFrame(this.stepFrame);
+        this.stepEnd = null;
     }
     toStart() {
         this.pause();
@@ -400,6 +459,7 @@ export class CubePlayer extends ElementBase {
         this.clock?.pause();
         this.unsubscribe?.();
         let maxAnimMs = 150;
+        this.stopStep();
         let solves = [];
         try {
             if (this._recording) {
@@ -426,6 +486,7 @@ export class CubePlayer extends ElementBase {
             this.start = this._setupState ?? solvedState();
             this.dispatchEvent(new CustomEvent("error", { detail: { message: err instanceof Error ? err.message : String(err) } }));
         }
+        this.maxAnimMs = maxAnimMs;
         this.clock = new ReplayClock(this.rec, { maxAnimMs });
         this.clock.rate = this._rate;
         this.unsubscribe = this.clock.onChange((time, pos) => this.onTime(time, pos));
@@ -552,11 +613,22 @@ export class CubePlayer extends ElementBase {
         }
         const s = this.segs[index];
         tip.innerHTML = "";
-        const text = document.createElement("span");
-        text.className = "tip";
-        text.setAttribute("part", "tooltip-text");
-        text.textContent = this.formatSegment(s);
-        tip.appendChild(text);
+        const line = (cls, part, content) => {
+            const el = document.createElement("span");
+            el.className = cls;
+            el.setAttribute("part", part);
+            el.textContent = content;
+            tip.appendChild(el);
+        };
+        if (this.formatSegment === segmentText) {
+            // The default: a heading and a quieter line of details.
+            const { title, details } = segmentLines(s);
+            line("tip tip-title", "tooltip-text tooltip-title", title);
+            if (details)
+                line("tip tip-details", "tooltip-text tooltip-details", details);
+        }
+        else
+            line("tip", "tooltip-text", this.formatSegment(s));
         tip.hidden = false;
         const track = this.$(".track").getBoundingClientRect();
         const centre = ((s.start + s.end) / 2 / (this.duration || 1)) * track.width;

package/element/styles.d.ts

@@ -12,7 +12,7 @@
  * - ::part() for anything else: stage, flat (the 2D picture), progress, progress-track,
  *   progress-fill, progress-thumb, progress-marker, segment (+ segment-<id>),
  *   segment-played, segment-recognition, segment-labels, segment-label
- *   (+ segment-label-<id>), tooltip, tooltip-text, controls, buttons, button,
+ *   (+ segment-label-<id>), tooltip, tooltip-text (tooltip-title, tooltip-details), controls, buttons, button,
  *   button-start, button-back, button-play, button-forward, button-end,
  *   button-speed, time.
  * - Replace the controls entirely: put your own element in slot="controls"
@@ -20,13 +20,13 @@
  *
  * Colours derive from `currentColor`, so the defaults fit light and dark pages.
  */
-export declare const STYLES = "\n:host {\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-fg: currentColor;\n  --cc-control-radius: 10px;\n  --cc-button-size: 34px;\n  --cc-controls-gap: 5px;\n  --cc-progress-height: 6px;\n  --cc-progress-track: color-mix(in srgb, currentColor 14%, transparent);\n  --cc-progress-fill: var(--cc-accent);\n  --cc-marker: color-mix(in srgb, currentColor 55%, transparent);\n  --cc-thumb-size: 14px;\n  --cc-font: ui-monospace, \"SF Mono\", Menlo, monospace;\n  /* sections of the progress bar */\n  --cc-segment-1: #4f8cff;\n  --cc-segment-2: #22c55e;\n  --cc-segment-3: #f59e0b;\n  --cc-segment-4: #ef4444;\n  --cc-segment-5: #a855f7;\n  --cc-segment-6: #14b8a6;\n  --cc-segment-7: #ec4899;\n  --cc-segment-8: #eab308;\n  --cc-segment-height: calc(var(--cc-progress-height) + 2px);\n  --cc-segment-gap: 2px;\n  --cc-segment-unplayed: 30%;\n  /* popup: inverted page colours by default (text colour as background) */\n  --cc-tooltip-bg: color-mix(in srgb, currentColor 92%, transparent);\n  --cc-tooltip-fg: Canvas;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-width: 200px;\n  min-height: 200px;\n  outline: none;\n  container-type: inline-size;\n}\n:host([hidden]) { display: none; }\n.stage { position: relative; flex: 1; min-height: 0; }\n.flat { position: absolute; inset: 0; display: grid; place-items: center; }\n.flat[hidden] { display: none; }\n.flat svg { width: 100%; height: 100%; }\n\n/* \u2500\u2500\u2500 progress bar \u2500\u2500\u2500 */\n.progress { display: none; padding: 6px 2px; cursor: pointer; touch-action: none; }\n:host([progress]) .progress { display: block; }\n.track {\n  position: relative;\n  height: var(--cc-progress-height);\n  border-radius: 999px;\n  background: var(--cc-progress-track);\n}\n.fill {\n  position: absolute; inset: 0 auto 0 0;\n  width: 0;\n  border-radius: inherit;\n  background: var(--cc-progress-fill);\n}\n.thumb {\n  position: absolute; top: 50%; left: 0;\n  width: var(--cc-thumb-size); height: var(--cc-thumb-size);\n  border-radius: 50%;\n  background: var(--cc-progress-fill);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-progress-fill) 25%, transparent);\n  transform: translate(-50%, -50%) scale(0.85);\n  transition: transform 0.12s ease;\n}\n.progress:hover .thumb, .progress.dragging .thumb { transform: translate(-50%, -50%) scale(1); }\n/* Sections: coloured parts of the bar, dim until played, recognition hatched. */\n.progress { position: relative; }\n.progress.has-segments .fill { display: none; }\n.segments { position: absolute; inset: 0; }\n.segment {\n  position: absolute; top: 50%;\n  height: var(--cc-segment-height);\n  transform: translateY(-50%);\n  overflow: hidden;\n  background: color-mix(in srgb, var(--seg) var(--cc-segment-unplayed), transparent);\n  clip-path: inset(0 calc(var(--cc-segment-gap) / 2) 0 calc(var(--cc-segment-gap) / 2) round 999px);\n}\n.segment .played { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--seg); }\n.segment .recognition {\n  position: absolute; inset: 0 auto 0 0;\n  background: repeating-linear-gradient(135deg, color-mix(in srgb, Canvas 50%, transparent) 0 2px, transparent 2px 5px);\n}\n.progress.has-segments .thumb { background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }\n.tooltip {\n  position: absolute; bottom: calc(100% + 4px); left: 0;\n  transform: translateX(-50%);\n  width: max-content; max-width: min(320px, 100%);\n  padding: 6px 9px;\n  border-radius: 8px;\n  /* colour stays the page's text colour here, so the background can be derived from it\u2026 */\n  background: var(--cc-tooltip-bg);\n  font: 500 12px/1.35 system-ui, sans-serif;\n  pointer-events: none;\n  z-index: 2;\n  box-shadow: 0 6px 18px -8px rgb(0 0 0 / 0.5);\n}\n/* \u2026and the text inverts it. */\n.tooltip .tip { color: var(--cc-tooltip-fg); }\n.tooltip[hidden] { display: none; }\n.labels { display: none; position: relative; height: 18px; margin-top: -4px; }\n:host([segment-labels]) .labels { display: block; }\n.label {\n  position: absolute; top: 0;\n  min-width: 0; height: 18px; padding: 0 2px;\n  background: none; border-radius: 4px;\n  color: inherit; opacity: 0.6;\n  font: 500 11px/18px system-ui, sans-serif;\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.label:hover { background: var(--cc-control-bg); opacity: 1; transform: none; }\n.label:active { transform: none; }\n.label.current { opacity: 1; font-weight: 700; }\n.marker {\n  position: absolute; top: 50%;\n  width: 2px; height: calc(var(--cc-progress-height) + 8px);\n  border-radius: 1px;\n  background: var(--cc-marker);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n:host(:not([markers])) .marker { display: none; }\n.progress:focus-visible .track { outline: 2px solid var(--cc-accent); outline-offset: 4px; }\n\n/* \u2500\u2500\u2500 controls \u2500\u2500\u2500 */\n/* time | buttons | speed \u2014 the buttons stay centred whatever the time text's width */\n.controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--cc-controls-gap); }\n.buttons { display: flex; gap: var(--cc-controls-gap); }\n.time { justify-self: start; }\n.speed { justify-self: end; }\n/* Narrow players: buttons on top, time and speed below. */\n@container (max-width: 300px) {\n  .controls { grid-template-columns: 1fr 1fr; grid-template-areas: \"buttons buttons\" \"time speed\"; }\n  .buttons { grid-area: buttons; justify-content: center; }\n  .time { grid-area: time; }\n  .speed { grid-area: speed; }\n}\n:host([controls=\"none\"]) .controls { display: none; }\n/* Live (following a smart cube): nothing to replay. */\n:host([live]) .controls, :host([live]) .progress { display: none; }\nbutton {\n  display: inline-grid; place-items: center;\n  min-width: var(--cc-button-size); height: var(--cc-button-size);\n  padding: 0 8px;\n  border: 0;\n  border-radius: var(--cc-control-radius);\n  background: var(--cc-control-bg);\n  color: var(--cc-control-fg);\n  font: 600 12px/1 var(--cc-font);\n  cursor: pointer;\n  transition: background 0.12s ease, transform 0.08s ease;\n}\nbutton:hover { background: var(--cc-control-bg-hover); }\nbutton:active { transform: scale(0.94); }\nbutton:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }\nbutton:disabled { opacity: 0.4; cursor: default; transform: none; }\n/* Icons never take the click: it always lands on the button itself, even if the icon changes mid-click. */\nbutton svg { width: 18px; height: 18px; display: block; fill: currentColor; pointer-events: none; }\n.play { min-width: calc(var(--cc-button-size) * 1.25); background: var(--cc-accent); color: #fff; }\n.play:hover { background: color-mix(in srgb, var(--cc-accent) 85%, #000); }\n.time { font: 500 12px/1 var(--cc-font); opacity: 0.75; white-space: nowrap; font-variant-numeric: tabular-nums; }\n";
+export declare const STYLES = "\n:host {\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-fg: currentColor;\n  --cc-control-radius: 10px;\n  --cc-button-size: 34px;\n  --cc-controls-gap: 5px;\n  --cc-progress-height: 6px;\n  --cc-progress-track: color-mix(in srgb, currentColor 14%, transparent);\n  --cc-progress-fill: var(--cc-accent);\n  --cc-marker: color-mix(in srgb, currentColor 55%, transparent);\n  --cc-thumb-size: 14px;\n  --cc-font: ui-monospace, \"SF Mono\", Menlo, monospace;\n  /* sections of the progress bar */\n  --cc-segment-1: #4f8cff;\n  --cc-segment-2: #22c55e;\n  --cc-segment-3: #f59e0b;\n  --cc-segment-4: #ef4444;\n  --cc-segment-5: #a855f7;\n  --cc-segment-6: #14b8a6;\n  --cc-segment-7: #ec4899;\n  --cc-segment-8: #eab308;\n  --cc-segment-height: calc(var(--cc-progress-height) + 2px);\n  --cc-segment-gap: 2px;\n  --cc-segment-unplayed: 30%;\n  /* popup: dark and solid by default \u2014 readable on light and dark pages and over the cube */\n  --cc-tooltip-bg: rgb(17 20 28 / 0.97);\n  --cc-tooltip-fg: #f4f5f7;\n  --cc-tooltip-muted: #a9afbb;\n  --cc-tooltip-border: rgb(255 255 255 / 0.12);\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-width: 200px;\n  min-height: 200px;\n  outline: none;\n  container-type: inline-size;\n}\n:host([hidden]) { display: none; }\n.stage { position: relative; flex: 1; min-height: 0; }\n.flat { position: absolute; inset: 0; display: grid; place-items: center; }\n.flat[hidden] { display: none; }\n.flat svg { width: 100%; height: 100%; }\n\n/* \u2500\u2500\u2500 progress bar \u2500\u2500\u2500 */\n.progress { display: none; padding: 6px 2px; cursor: pointer; touch-action: none; }\n:host([progress]) .progress { display: block; }\n.track {\n  position: relative;\n  height: var(--cc-progress-height);\n  border-radius: 999px;\n  background: var(--cc-progress-track);\n}\n.fill {\n  position: absolute; inset: 0 auto 0 0;\n  width: 0;\n  border-radius: inherit;\n  background: var(--cc-progress-fill);\n}\n.thumb {\n  position: absolute; top: 50%; left: 0;\n  width: var(--cc-thumb-size); height: var(--cc-thumb-size);\n  border-radius: 50%;\n  background: var(--cc-progress-fill);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-progress-fill) 25%, transparent);\n  transform: translate(-50%, -50%) scale(0.85);\n  transition: transform 0.12s ease;\n}\n.progress:hover .thumb, .progress.dragging .thumb { transform: translate(-50%, -50%) scale(1); }\n/* Sections: coloured parts of the bar, dim until played, recognition hatched. */\n.progress { position: relative; }\n.progress.has-segments .fill { display: none; }\n.segments { position: absolute; inset: 0; }\n.segment {\n  position: absolute; top: 50%;\n  height: var(--cc-segment-height);\n  transform: translateY(-50%);\n  overflow: hidden;\n  background: color-mix(in srgb, var(--seg) var(--cc-segment-unplayed), transparent);\n  clip-path: inset(0 calc(var(--cc-segment-gap) / 2) 0 calc(var(--cc-segment-gap) / 2) round 999px);\n}\n.segment .played { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--seg); }\n.segment .recognition {\n  position: absolute; inset: 0 auto 0 0;\n  background: repeating-linear-gradient(135deg, color-mix(in srgb, Canvas 50%, transparent) 0 2px, transparent 2px 5px);\n}\n.progress.has-segments .thumb { background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }\n.tooltip {\n  position: absolute; bottom: calc(100% + 4px); left: 0;\n  transform: translateX(-50%);\n  width: max-content; max-width: min(320px, 100%);\n  padding: 6px 9px;\n  border-radius: 8px;\n  background: var(--cc-tooltip-bg);\n  border: 1px solid var(--cc-tooltip-border);\n  font: 500 12px/1.4 system-ui, sans-serif;\n  pointer-events: none;\n  z-index: 2;\n  box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.6);\n  display: flex; flex-direction: column; gap: 1px;\n}\n.tooltip .tip { color: var(--cc-tooltip-fg); }\n.tooltip .tip-title { font-weight: 650; font-variant-numeric: tabular-nums; }\n.tooltip .tip-details { color: var(--cc-tooltip-muted); font-size: 11px; font-variant-numeric: tabular-nums; }\n.tooltip[hidden] { display: none; }\n.labels { display: none; position: relative; height: 18px; margin-top: -4px; }\n:host([segment-labels]) .labels { display: block; }\n.label {\n  position: absolute; top: 0;\n  min-width: 0; height: 18px; padding: 0 2px;\n  background: none; border-radius: 4px;\n  color: inherit; opacity: 0.6;\n  font: 500 11px/18px system-ui, sans-serif;\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.label:hover { background: var(--cc-control-bg); opacity: 1; transform: none; }\n.label:active { transform: none; }\n.label.current { opacity: 1; font-weight: 700; }\n.marker {\n  position: absolute; top: 50%;\n  width: 2px; height: calc(var(--cc-progress-height) + 8px);\n  border-radius: 1px;\n  background: var(--cc-marker);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n:host(:not([markers])) .marker { display: none; }\n.progress:focus-visible .track { outline: 2px solid var(--cc-accent); outline-offset: 4px; }\n\n/* \u2500\u2500\u2500 controls \u2500\u2500\u2500 */\n/* time | buttons | speed \u2014 the buttons stay centred whatever the time text's width */\n.controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--cc-controls-gap); }\n.buttons { display: flex; gap: var(--cc-controls-gap); }\n.time { justify-self: start; }\n.speed { justify-self: end; }\n/* Narrow players: buttons on top, time and speed below. */\n@container (max-width: 300px) {\n  .controls { grid-template-columns: 1fr 1fr; grid-template-areas: \"buttons buttons\" \"time speed\"; }\n  .buttons { grid-area: buttons; justify-content: center; }\n  .time { grid-area: time; }\n  .speed { grid-area: speed; }\n}\n:host([controls=\"none\"]) .controls { display: none; }\n/* Live (following a smart cube): nothing to replay. */\n:host([live]) .controls, :host([live]) .progress { display: none; }\nbutton {\n  display: inline-grid; place-items: center;\n  min-width: var(--cc-button-size); height: var(--cc-button-size);\n  padding: 0 8px;\n  border: 0;\n  border-radius: var(--cc-control-radius);\n  background: var(--cc-control-bg);\n  color: var(--cc-control-fg);\n  font: 600 12px/1 var(--cc-font);\n  cursor: pointer;\n  transition: background 0.12s ease, transform 0.08s ease;\n}\nbutton:hover { background: var(--cc-control-bg-hover); }\nbutton:active { transform: scale(0.94); }\nbutton:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; }\nbutton:disabled { opacity: 0.4; cursor: default; transform: none; }\n/* Icons never take the click: it always lands on the button itself, even if the icon changes mid-click. */\nbutton svg { width: 18px; height: 18px; display: block; fill: currentColor; pointer-events: none; }\n.play { min-width: calc(var(--cc-button-size) * 1.25); background: var(--cc-accent); color: #fff; }\n.play:hover { background: color-mix(in srgb, var(--cc-accent) 85%, #000); }\n.time { font: 500 12px/1 var(--cc-font); opacity: 0.75; white-space: nowrap; font-variant-numeric: tabular-nums; }\n";
 /** Inline icons (no icon font, no network). */
 export declare const ICONS: {
-    readonly start: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M6 5h2v14H6zM20 5.5v13a.5.5 0 0 1-.78.42L9.5 12.4a.5.5 0 0 1 0-.8l9.72-6.52A.5.5 0 0 1 20 5.5z\"/></svg>";
-    readonly back: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M17 6.2v11.6a.5.5 0 0 1-.8.4L8 12.4a.5.5 0 0 1 0-.8l8.2-5.8a.5.5 0 0 1 .8.4zM6 6h2v12H6z\"/></svg>";
+    readonly start: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 5h2v14H4zM13 6.3v11.4a.5.5 0 0 1-.8.4L6.9 12.4a.5.5 0 0 1 0-.8l5.3-5.7a.5.5 0 0 1 .8.4zM20.5 6.3v11.4a.5.5 0 0 1-.8.4l-5.3-5.7a.5.5 0 0 1 0-.8l5.3-5.7a.5.5 0 0 1 .8.4z\"/></svg>";
+    readonly back: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M16 6.2v11.6a.5.5 0 0 1-.8.4l-7.7-5.8a.5.5 0 0 1 0-.8l7.7-5.8a.5.5 0 0 1 .8.4z\"/></svg>";
     readonly play: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 5.6v12.8a.6.6 0 0 0 .92.5l10.1-6.4a.6.6 0 0 0 0-1L8.92 5.1a.6.6 0 0 0-.92.5z\"/></svg>";
     readonly pause: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><rect x=\"6.5\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\"/><rect x=\"13.5\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\"/></svg>";
-    readonly forward: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M7 6.2v11.6a.5.5 0 0 0 .8.4l8.2-5.8a.5.5 0 0 0 0-.8L7.8 5.8a.5.5 0 0 0-.8.4zM16 6h2v12h-2z\"/></svg>";
-    readonly end: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M16 5h2v14h-2zM4 5.5v13a.5.5 0 0 0 .78.42l9.72-6.52a.5.5 0 0 0 0-.8L4.78 5.08A.5.5 0 0 0 4 5.5z\"/></svg>";
+    readonly forward: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 6.2v11.6a.5.5 0 0 0 .8.4l7.7-5.8a.5.5 0 0 0 0-.8L8.8 5.8a.5.5 0 0 0-.8.4z\"/></svg>";
+    readonly end: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M18 5h2v14h-2zM3.5 6.3v11.4a.5.5 0 0 0 .8.4l5.3-5.7a.5.5 0 0 0 0-.8L4.3 5.9a.5.5 0 0 0-.8.4zM11 6.3v11.4a.5.5 0 0 0 .8.4l5.3-5.7a.5.5 0 0 0 0-.8l-5.3-5.7a.5.5 0 0 0-.8.4z\"/></svg>";
 };

package/element/styles.js

@@ -12,7 +12,7 @@
  * - ::part() for anything else: stage, flat (the 2D picture), progress, progress-track,
  *   progress-fill, progress-thumb, progress-marker, segment (+ segment-<id>),
  *   segment-played, segment-recognition, segment-labels, segment-label
- *   (+ segment-label-<id>), tooltip, tooltip-text, controls, buttons, button,
+ *   (+ segment-label-<id>), tooltip, tooltip-text (tooltip-title, tooltip-details), controls, buttons, button,
  *   button-start, button-back, button-play, button-forward, button-end,
  *   button-speed, time.
  * - Replace the controls entirely: put your own element in slot="controls"
@@ -47,9 +47,11 @@ export const STYLES = /* css */ `
   --cc-segment-height: calc(var(--cc-progress-height) + 2px);
   --cc-segment-gap: 2px;
   --cc-segment-unplayed: 30%;
-  /* popup: inverted page colours by default (text colour as background) */
-  --cc-tooltip-bg: color-mix(in srgb, currentColor 92%, transparent);
-  --cc-tooltip-fg: Canvas;
+  /* popup: dark and solid by default — readable on light and dark pages and over the cube */
+  --cc-tooltip-bg: rgb(17 20 28 / 0.97);
+  --cc-tooltip-fg: #f4f5f7;
+  --cc-tooltip-muted: #a9afbb;
+  --cc-tooltip-border: rgb(255 255 255 / 0.12);
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -113,15 +115,17 @@ export const STYLES = /* css */ `
   width: max-content; max-width: min(320px, 100%);
   padding: 6px 9px;
   border-radius: 8px;
-  /* colour stays the page's text colour here, so the background can be derived from it… */
   background: var(--cc-tooltip-bg);
-  font: 500 12px/1.35 system-ui, sans-serif;
+  border: 1px solid var(--cc-tooltip-border);
+  font: 500 12px/1.4 system-ui, sans-serif;
   pointer-events: none;
   z-index: 2;
-  box-shadow: 0 6px 18px -8px rgb(0 0 0 / 0.5);
+  box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.6);
+  display: flex; flex-direction: column; gap: 1px;
 }
-/* …and the text inverts it. */
 .tooltip .tip { color: var(--cc-tooltip-fg); }
+.tooltip .tip-title { font-weight: 650; font-variant-numeric: tabular-nums; }
+.tooltip .tip-details { color: var(--cc-tooltip-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
 .tooltip[hidden] { display: none; }
 .labels { display: none; position: relative; height: 18px; margin-top: -4px; }
 :host([segment-labels]) .labels { display: block; }
@@ -187,10 +191,11 @@ button svg { width: 18px; height: 18px; display: block; fill: currentColor; poin
 `;
 /** Inline icons (no icon font, no network). */
 export const ICONS = {
-    start: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 5h2v14H6zM20 5.5v13a.5.5 0 0 1-.78.42L9.5 12.4a.5.5 0 0 1 0-.8l9.72-6.52A.5.5 0 0 1 20 5.5z"/></svg>',
-    back: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M17 6.2v11.6a.5.5 0 0 1-.8.4L8 12.4a.5.5 0 0 1 0-.8l8.2-5.8a.5.5 0 0 1 .8.4zM6 6h2v12H6z"/></svg>',
+    // To the start / end: two triangles against a bar; one move back / on: a single triangle (as cubing.js).
+    start: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5h2v14H4zM13 6.3v11.4a.5.5 0 0 1-.8.4L6.9 12.4a.5.5 0 0 1 0-.8l5.3-5.7a.5.5 0 0 1 .8.4zM20.5 6.3v11.4a.5.5 0 0 1-.8.4l-5.3-5.7a.5.5 0 0 1 0-.8l5.3-5.7a.5.5 0 0 1 .8.4z"/></svg>',
+    back: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M16 6.2v11.6a.5.5 0 0 1-.8.4l-7.7-5.8a.5.5 0 0 1 0-.8l7.7-5.8a.5.5 0 0 1 .8.4z"/></svg>',
     play: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.6v12.8a.6.6 0 0 0 .92.5l10.1-6.4a.6.6 0 0 0 0-1L8.92 5.1a.6.6 0 0 0-.92.5z"/></svg>',
     pause: '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="6.5" y="5" width="4" height="14" rx="1"/><rect x="13.5" y="5" width="4" height="14" rx="1"/></svg>',
-    forward: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 6.2v11.6a.5.5 0 0 0 .8.4l8.2-5.8a.5.5 0 0 0 0-.8L7.8 5.8a.5.5 0 0 0-.8.4zM16 6h2v12h-2z"/></svg>',
-    end: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M16 5h2v14h-2zM4 5.5v13a.5.5 0 0 0 .78.42l9.72-6.52a.5.5 0 0 0 0-.8L4.78 5.08A.5.5 0 0 0 4 5.5z"/></svg>',
+    forward: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 6.2v11.6a.5.5 0 0 0 .8.4l7.7-5.8a.5.5 0 0 0 0-.8L8.8 5.8a.5.5 0 0 0-.8.4z"/></svg>',
+    end: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18 5h2v14h-2zM3.5 6.3v11.4a.5.5 0 0 0 .8.4l5.3-5.7a.5.5 0 0 0 0-.8L4.3 5.9a.5.5 0 0 0-.8.4zM11 6.3v11.4a.5.5 0 0 0 .8.4l5.3-5.7a.5.5 0 0 0 0-.8l-5.3-5.7a.5.5 0 0 0-.8.4z"/></svg>',
 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A 3×3×3 cube library for the web, built around smart (Bluetooth) cubes: state, notation, methods, solvers and scrambles, a three.js renderer with skins, pictures, web components, React bindings.",
   "license": "MPL-2.0",
   "author": "Tomasz Wodzikowski <wodziszczakow@gmail.com>",

package/solve/twophase.js

@@ -79,6 +79,54 @@ function moveTable(n, make, coord, moves) {
     }
     return t;
 }
+/**
+ * A move table over permutations of `n` pieces, straight on ranks: for each
+ * rank, the permutation once, then per move `next[i] = perm[map[i]]` (map =
+ * where the move takes each position from, restricted to these `n` pieces)
+ * and its rank — no objects per entry (8! × 18 entries: this is most of the
+ * build time otherwise).
+ */
+function permMoveTable(n, maps) {
+    const count = maps.length;
+    let size = 1;
+    for (let i = 2; i <= n; i++)
+        size *= i;
+    const t = new Uint16Array(size * count);
+    const perm = new Int8Array(n), next = new Int8Array(n), pool = new Int8Array(n);
+    for (let r = 0; r < size; r++) {
+        // unrank (Lehmer code, same order as core permRank / permUnrank)
+        let rank = r;
+        for (let i = 0; i < n; i++)
+            pool[i] = i;
+        let left = n;
+        for (let i = 0; i < n; i++) {
+            let f = 1;
+            for (let k = 2; k < n - i; k++)
+                f *= k;
+            const d = Math.floor(rank / f);
+            rank -= d * f;
+            perm[i] = pool[d];
+            for (let k = d; k < left - 1; k++)
+                pool[k] = pool[k + 1];
+            left--;
+        }
+        for (let m = 0; m < count; m++) {
+            const map = maps[m];
+            for (let i = 0; i < n; i++)
+                next[i] = perm[map[i]];
+            let out = 0;
+            for (let i = 0; i < n; i++) {
+                let smaller = 0;
+                for (let j = i + 1; j < n; j++)
+                    if (next[j] < next[i])
+                        smaller++;
+                out = out * (n - i) + smaller;
+            }
+            t[r * count + m] = out;
+        }
+    }
+    return t;
+}
 /** Breadth-first distances over a product of two coordinates. */
 function pruneTable(n1, n2, move1, move2, moveCount, start) {
     const dist = new Int8Array(n1 * n2).fill(-1);
@@ -104,8 +152,9 @@ function buildTables() {
     const twistMove = moveTable(N_TWIST, withTwist, twistOf, all18);
     const flipMove = moveTable(N_FLIP, withFlip, flipOf, all18);
     const sliceMove = moveTable(N_SLICE, withSlice, sliceOf, all18);
-    const cornerMove = moveTable(N_PERM8, (i) => ({ ...SOLVED_CC, cp: permUnrank(i, 8) }), (c) => permRank(c.cp), all18);
-    const udEdgeMove = moveTable(N_PERM8, (i) => ({ ...SOLVED_CC, ep: [...permUnrank(i, 8), 8, 9, 10, 11] }), (c) => permRank(c.ep.slice(0, 8)), P2_MOVES);
+    const cornerMove = permMoveTable(8, all18.map((m) => MOVE_CC[m].cp));
+    // P2 moves keep the U / D edges (positions 0–7) among themselves.
+    const udEdgeMove = permMoveTable(8, P2_MOVES.map((m) => MOVE_CC[m].ep.slice(0, 8)));
     const slicePermMove = Uint8Array.from(moveTable(N_SLICEPERM, (i) => ({ ...SOLVED_CC, ep: [0, 1, 2, 3, 4, 5, 6, 7, ...permUnrank(i, 4).map((e) => e + 8)] }), (c) => permRank(c.ep.slice(8).map((e) => e - 8)), P2_MOVES));
     // Phase-2 pruning walks P2 moves: pick the corner-table columns for them.
     const cornerP2 = new Uint16Array(N_PERM8 * P2_MOVES.length);

package/timeline/timings.js

@@ -17,7 +17,8 @@ export function stageTimings(method, rec) {
         // A move's timestamp is when it completed; its start is ~the previous move's time.
         const firstStart = moveCount > 0 ? (prevIndex === 0 ? 0 : rec.moves[prevIndex - 1].t) : endMs;
         const firstDone = moveCount > 0 ? rec.moves[prevIndex].t : endMs;
-        const recognitionMs = moveCount > 0 ? Math.max(0, firstDone - firstStart - estimateTurnMs(rec)) : 0;
+        // AUF: a U turn or two — nothing to recognise, the whole stage is turning.
+        const recognitionMs = moveCount > 0 && b.stage !== "auf" ? Math.max(0, firstDone - firstStart - estimateTurnMs(rec)) : 0;
         const t = {
             stage: b.stage,
             label: labels.get(b.stage) ?? b.stage,