@slidev-react/client 0.2.5 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev-react/client",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "Browser-side React app and presentation UI for slidev-react",
   "license": "MIT",
   "type": "module",
@@ -14,7 +14,7 @@
     "shiki": "4.0.1",
     "shiki-magic-move": "1.2.1",
     "zod": "4.3.6",
-    "@slidev-react/core": "0.2.5"
+    "@slidev-react/core": "0.2.7"
   },
   "peerDependencies": {
     "@antv/g-svg": ">=2.0.0",

package/src/addons/{registry.test.ts → __tests__/registry.test.ts}

@@ -1,8 +1,8 @@
-import { describe, expect, it } from "vitest";
-import { listRegisteredAddons, resolveAddonDefinitions, resolveSlideAddons } from "./registry";
-import { Insight } from "./insight/Insight";
-import { InsightAddonProvider } from "./insight/InsightAddonProvider";
-import { SpotlightLayout } from "./insight/SpotlightLayout";
+import { describe, expect, it } from "vite-plus/test";
+import { listRegisteredAddons, resolveAddonDefinitions, resolveSlideAddons } from "../registry";
+import { Insight } from "../insight/Insight";
+import { InsightAddonProvider } from "../insight/InsightAddonProvider";
+import { SpotlightLayout } from "../insight/SpotlightLayout";
 
 describe("addon registry", () => {
   it("registers local addons discovered from the addons directory", () => {

package/src/addons/g2/chartThemeTokens.ts

@@ -68,39 +68,39 @@ export function buildSlidevTheme(): G2Theme {
     category10: categoryPalette,
     category20: categoryPalette,
     axis: {
-      labelFontSize: 17,
-      labelFill: mutedColor,
+      labelFontSize: 12,
+      labelFill: '#8b95a2',
       labelFontFamily: font,
-      titleFontSize: 19,
-      titleFill: textColor,
+      titleFontSize: 13,
+      titleFill: '#718096',
       titleFontFamily: font,
-      titleFontWeight: 'bold',
-      gridStroke: '#e2e8f0',
-      gridStrokeOpacity: 1,
-      lineStroke: '#94a3b8',
+      titleFontWeight: 'normal',
+      gridStroke: '#e8ecf1',
+      gridStrokeOpacity: 0.6,
+      lineStroke: '#dfe4ea',
       lineLineWidth: 1,
-      tickStroke: '#94a3b8',
+      tickStroke: '#dfe4ea',
     },
     legendCategory: {
-      itemLabelFontSize: 18,
+      itemLabelFontSize: 13,
       itemLabelFill: mutedColor,
       itemLabelFontFamily: font,
-      titleFontSize: 19,
+      titleFontSize: 14,
       titleFill: textColor,
       titleFontFamily: font,
       titleFontWeight: 'bold',
     },
     title: {
-      titleFontSize: 22,
+      titleFontSize: 18,
       titleFill: textColor,
       titleFontFamily: font,
       titleFontWeight: 'bold',
-      subtitleFontSize: 17,
+      subtitleFontSize: 14,
       subtitleFill: mutedColor,
       subtitleFontFamily: font,
     },
     label: {
-      fontSize: 18,
+      fontSize: 12,
       fontFamily: font,
       fill: mutedColor,
     },

package/src/features/presentation/{exportArtifacts.test.ts → __tests__/exportArtifacts.test.ts}

@@ -1,10 +1,10 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it } from "vite-plus/test";
 import {
   createSlideImageFileName,
   createSlideSnapshotFileName,
   resolveExportSlidesBaseName,
   trimPdfExtension,
-} from "./exportArtifacts";
+} from "../exportArtifacts";
 
 describe("presentation export artifacts", () => {
   it("removes a trailing pdf extension from document titles", () => {

package/src/features/presentation/{location.test.ts → __tests__/location.test.ts}

@@ -1,10 +1,10 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it } from "vite-plus/test";
 import {
   buildSlidesPath,
   normalizePathname,
   resolveSessionLocationState,
   resolveSlidesLocationState,
-} from "./location";
+} from "../location";
 
 describe("presentation location", () => {
   it("resolves presenter routes for slides navigation", () => {

package/src/features/presentation/__tests__/path.test.ts

@@ -0,0 +1,146 @@
+import { describe, expect, it } from "vite-plus/test";
+import {
+  buildRolePathFromBase,
+  buildRolePathFromPathname,
+  buildStandalonePathFromBase,
+  buildStandalonePathFromPathname,
+  parsePresentationPath,
+  parseStandalonePath,
+  resolvePresentationBasePath,
+} from "../path";
+
+describe("parsePresentationPath", () => {
+  it("parses /presenter as a presenter role with no slide number", () => {
+    expect(parsePresentationPath("/presenter")).toEqual({
+      role: "presenter",
+      slideNumber: null,
+      basePath: "",
+    });
+  });
+
+  it("parses /presenter/3 as presenter role on slide 3", () => {
+    expect(parsePresentationPath("/presenter/3")).toEqual({
+      role: "presenter",
+      slideNumber: 3,
+      basePath: "",
+    });
+  });
+
+  it("parses a nested basePath like /app/presenter/5", () => {
+    expect(parsePresentationPath("/app/presenter/5")).toEqual({
+      role: "presenter",
+      slideNumber: 5,
+      basePath: "/app",
+    });
+  });
+
+  it("returns null for a plain path without a role", () => {
+    expect(parsePresentationPath("/slides")).toBeNull();
+  });
+
+  it("returns null for an empty path", () => {
+    expect(parsePresentationPath("/")).toBeNull();
+  });
+
+  it("returns null for slide-only paths", () => {
+    expect(parsePresentationPath("/3")).toBeNull();
+  });
+});
+
+describe("parseStandalonePath", () => {
+  it("parses /3 as slide number 3", () => {
+    expect(parseStandalonePath("/3")).toEqual({
+      slideNumber: 3,
+      basePath: "",
+    });
+  });
+
+  it("parses /app/7 with a basePath", () => {
+    expect(parseStandalonePath("/app/7")).toEqual({
+      slideNumber: 7,
+      basePath: "/app",
+    });
+  });
+
+  it("returns null for non-numeric paths", () => {
+    expect(parseStandalonePath("/about")).toBeNull();
+  });
+
+  it("returns null for presenter paths (handled by parsePresentationPath)", () => {
+    expect(parseStandalonePath("/presenter/3")).toBeNull();
+  });
+
+  it("returns null for slide number 0 or negative", () => {
+    expect(parseStandalonePath("/0")).toBeNull();
+    expect(parseStandalonePath("/-1")).toBeNull();
+  });
+});
+
+describe("resolvePresentationBasePath", () => {
+  it("returns empty string for root", () => {
+    expect(resolvePresentationBasePath("/")).toBe("");
+  });
+
+  it("returns empty string for /index.html", () => {
+    expect(resolvePresentationBasePath("/index.html")).toBe("");
+  });
+
+  it("strips /index.html suffix", () => {
+    expect(resolvePresentationBasePath("/app/index.html")).toBe("/app");
+  });
+
+  it("extracts basePath from presenter paths", () => {
+    expect(resolvePresentationBasePath("/app/presenter/3")).toBe("/app");
+  });
+
+  it("extracts basePath from standalone slide paths", () => {
+    expect(resolvePresentationBasePath("/app/5")).toBe("/app");
+  });
+});
+
+describe("buildRolePathFromBase", () => {
+  it("builds /presenter/1 from empty base", () => {
+    expect(buildRolePathFromBase("", "presenter", 1)).toBe("/presenter/1");
+  });
+
+  it("builds /app/presenter/5 from /app base", () => {
+    expect(buildRolePathFromBase("/app", "presenter", 5)).toBe("/app/presenter/5");
+  });
+
+  it("clamps non-positive slide numbers to 1", () => {
+    expect(buildRolePathFromBase("", "presenter", 0)).toBe("/presenter/1");
+    expect(buildRolePathFromBase("", "presenter", -3)).toBe("/presenter/1");
+  });
+
+  it("floors fractional slide numbers", () => {
+    expect(buildRolePathFromBase("", "presenter", 3.7)).toBe("/presenter/3");
+  });
+});
+
+describe("buildRolePathFromPathname", () => {
+  it("derives basePath from a full pathname and builds the role path", () => {
+    expect(buildRolePathFromPathname("/app/presenter/2", "presenter", 5)).toBe(
+      "/app/presenter/5",
+    );
+  });
+});
+
+describe("buildStandalonePathFromBase", () => {
+  it("builds /3 from empty base", () => {
+    expect(buildStandalonePathFromBase("", 3)).toBe("/3");
+  });
+
+  it("builds /app/3 from /app base", () => {
+    expect(buildStandalonePathFromBase("/app", 3)).toBe("/app/3");
+  });
+
+  it("clamps non-positive slide numbers to 1", () => {
+    expect(buildStandalonePathFromBase("", 0)).toBe("/1");
+  });
+});
+
+describe("buildStandalonePathFromPathname", () => {
+  it("derives basePath from pathname and builds standalone path", () => {
+    expect(buildStandalonePathFromPathname("/app/5", 3)).toBe("/app/3");
+  });
+});

package/src/features/presentation/{recordingFilename.test.ts → __tests__/recordingFilename.test.ts}

@@ -1,9 +1,9 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it } from "vite-plus/test";
 import {
   createRecordingDownloadName,
   resolvePresentationFileNameBase,
   resolveRecordingFileNameBase,
-} from "./recordingFilename";
+} from "../recordingFilename";
 
 describe("recording filename", () => {
   it("prefers exportFilename when present", () => {

package/src/features/presentation/{session.test.ts → __tests__/session.test.ts}

@@ -1,9 +1,9 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vite-plus/test";
 import {
   buildPresentationEntryUrl,
   resolvePresentationSession,
   updateSyncModeInUrl,
-} from "./session";
+} from "../session";
 
 const originalWindow = globalThis.window;
 

package/src/features/presentation/draw/{persistence.test.ts → __tests__/persistence.test.ts}

@@ -1,9 +1,9 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it } from "vite-plus/test";
 import {
   DRAW_STORAGE_VERSION,
   createPersistedDrawState,
   parsePersistedDrawState,
-} from "./persistence";
+} from "../persistence";
 
 describe("draw persistence", () => {
   it("parses persisted draw state", () => {

package/src/features/presentation/navigation/{ShortcutsHelpOverlay.test.tsx → __tests__/ShortcutsHelpOverlay.test.tsx}

@@ -1,7 +1,7 @@
 import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
-import { ShortcutsHelpOverlay } from "./ShortcutsHelpOverlay";
-import { buildShortcutHelpSections } from "./keyboardShortcuts";
+import { describe, expect, it } from "vite-plus/test";
+import { ShortcutsHelpOverlay } from "../ShortcutsHelpOverlay";
+import { buildShortcutHelpSections } from "../keyboardShortcuts";
 
 describe("ShortcutsHelpOverlay", () => {
   it("renders the supported shortcut groups and help triggers", () => {

package/src/features/presentation/navigation/{keyboardShortcuts.test.ts → __tests__/keyboardShortcuts.test.ts}

@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it } from "vite-plus/test";
 import {
   buildShortcutHelpSections,
   createShortcutHelpTriggerState,
@@ -6,7 +6,7 @@ import {
   registerShortcutHelpKeyDown,
   registerShortcutHelpKeyUp,
   resolveNavigationShortcutAction,
-} from "./keyboardShortcuts";
+} from "../keyboardShortcuts";
 
 describe("keyboardShortcuts", () => {
   it("treats shift+space as retreat and plain space as advance", () => {

package/src/features/presentation/presenter/{FlowTimelinePreview.test.tsx → __tests__/FlowTimelinePreview.test.tsx}

@@ -1,10 +1,10 @@
 import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it, vi } from "vitest";
-import { AddonProvider } from "../../../addons/AddonProvider";
+import { describe, expect, it, vi } from "vite-plus/test";
+import { AddonProvider } from "../../../../addons/AddonProvider";
 import { DEFAULT_SLIDES_VIEWPORT } from "@slidev-react/core/slides/viewport";
-import { ThemeProvider } from "../../../theme/ThemeProvider";
-import { FlowTimelinePreview } from "./FlowTimelinePreview";
-import type { CompiledSlide } from "./types";
+import { ThemeProvider } from "../../../../theme/ThemeProvider";
+import { FlowTimelinePreview } from "../FlowTimelinePreview";
+import type { CompiledSlide } from "../types";
 
 const demoSlide: CompiledSlide = {
   id: "timeline-demo",

package/src/features/presentation/presenter/{persistence.test.ts → __tests__/persistence.test.ts}

@@ -1,9 +1,9 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it } from "vite-plus/test";
 import {
   parsePersistedPresenterCursorMode,
   parsePersistedPresenterSidebarWidth,
   parsePersistedPresenterStageScale,
-} from "./persistence";
+} from "../persistence";
 
 describe("presenter persistence", () => {
   it("parses allowed stage scale values", () => {

package/src/features/presentation/presenter/{presentationSyncBridge.test.ts → __tests__/presentationSyncBridge.test.ts}

@@ -1,5 +1,5 @@
-import { describe, expect, it, vi } from "vitest";
-import { buildPresentationSharedState, mapRemotePresentationPatch } from "./presentationSyncBridge";
+import { describe, expect, it, vi } from "vite-plus/test";
+import { buildPresentationSharedState, mapRemotePresentationPatch } from "../presentationSyncBridge";
 
 describe("presentationSyncBridge", () => {
   it("builds a shared state payload without mutating timestamps", () => {

package/src/features/presentation/reveal/Reveal.tsx

@@ -35,7 +35,7 @@ function cloneWithRevealClass(
   });
 }
 
-export function Reveal({
+export function Step({
   step,
   preset = "fade-up",
   asChild = false,
@@ -71,7 +71,7 @@ export function Reveal({
   );
 }
 
-export function RevealGroup({
+export function Steps({
   start = 1,
   increment = 1,
   preset = "fade-up",
@@ -96,7 +96,7 @@ export function RevealGroup({
 
         if (isValidElement(child)) {
           return (
-            <Reveal
+            <Step
               key={child.key ?? step}
               step={step}
               preset={preset}
@@ -104,14 +104,14 @@ export function RevealGroup({
               asChild
             >
               {child}
-            </Reveal>
+            </Step>
           );
         }
 
         return (
-          <Reveal key={step} step={step} preset={preset} reserveSpace={reserveSpace}>
+          <Step key={step} step={step} preset={preset} reserveSpace={reserveSpace}>
             {child}
-          </Reveal>
+          </Step>
         );
       })}
     </>

package/src/features/presentation/stage/__tests__/slideSurface.test.ts

@@ -0,0 +1,93 @@
+import { describe, expect, it } from "vite-plus/test";
+import { resolveSlideSurface, resolveSlideSurfaceClassName } from "../slideSurface";
+
+describe("resolveSlideSurfaceClassName", () => {
+  it("includes base classes for a default layout", () => {
+    const result = resolveSlideSurfaceClassName({ layout: "default" });
+    expect(result).toContain("slide-prose");
+    expect(result).toContain("slide-surface-frame");
+  });
+
+  it("uses zero padding for immersive layout", () => {
+    const result = resolveSlideSurfaceClassName({ layout: "immersive" });
+    expect(result).toContain("px-0 py-0");
+    expect(result).not.toContain("slide-surface-frame");
+  });
+
+  it("includes overflow-hidden when requested", () => {
+    const result = resolveSlideSurfaceClassName({
+      layout: "default",
+      overflowHidden: true,
+    });
+    expect(result).toContain("overflow-hidden");
+  });
+
+  it("omits overflow-hidden by default", () => {
+    const result = resolveSlideSurfaceClassName({ layout: "default" });
+    expect(result).not.toContain("overflow-hidden");
+  });
+
+  it("appends custom shadow class", () => {
+    const result = resolveSlideSurfaceClassName({
+      layout: "default",
+      shadowClass: "shadow-lg",
+    });
+    expect(result).toContain("shadow-lg");
+  });
+});
+
+describe("resolveSlideSurface", () => {
+  it("returns default white background when no background is set", () => {
+    const result = resolveSlideSurface({
+      meta: { layout: "default" },
+    });
+    expect(result.style.backgroundColor).toBe("#ffffff");
+  });
+
+  it("detects bare image URLs and sets backgroundImage", () => {
+    const result = resolveSlideSurface({
+      meta: { layout: "default", background: "https://example.com/bg.jpg" },
+    });
+    expect(result.style.backgroundImage).toContain("url(");
+    expect(result.style.backgroundSize).toBe("cover");
+  });
+
+  it("detects relative image paths", () => {
+    const result = resolveSlideSurface({
+      meta: { layout: "default", background: "./images/bg.png" },
+    });
+    expect(result.style.backgroundImage).toContain("url(");
+  });
+
+  it("detects data URI images", () => {
+    const result = resolveSlideSurface({
+      meta: { layout: "default", background: "data:image/svg+xml;base64,abc" },
+    });
+    expect(result.style.backgroundImage).toContain("url(");
+  });
+
+  it("treats CSS values as raw background property", () => {
+    const result = resolveSlideSurface({
+      meta: { layout: "default", background: "linear-gradient(to right, #000, #fff)" },
+    });
+    expect(result.style.background).toContain("linear-gradient");
+    expect(result.style.backgroundImage).toBeUndefined();
+  });
+
+  it("falls back to slidesBackground when slide has no background", () => {
+    const result = resolveSlideSurface({
+      meta: { layout: "default" },
+      slidesBackground: "#333",
+    });
+    expect(result.style.background).toBe("#333");
+  });
+
+  it("merges meta.class into className", () => {
+    const result = resolveSlideSurface({
+      meta: { layout: "default", class: "custom-slide" },
+      className: "base-class",
+    });
+    expect(result.className).toContain("base-class");
+    expect(result.className).toContain("custom-slide");
+  });
+});

package/src/features/presentation/sync/model/{presence.test.ts → __tests__/presence.test.ts}

@@ -1,11 +1,11 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it } from "vite-plus/test";
 import {
   countPeers,
   markPeerSeen,
   removePeer,
   resolveRemoteActive,
   sweepStalePeers,
-} from "./presence";
+} from "../presence";
 
 describe("presence model", () => {
   it("tracks peer activity and counts peers", () => {

package/src/features/presentation/sync/model/{replication.test.ts → __tests__/replication.test.ts}

@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it, vi } from "vite-plus/test";
 import {
   canAuthorState,
   canReceive,
@@ -6,7 +6,7 @@ import {
   createEnvelope,
   createSnapshotState,
   isCursorEqual,
-} from "./replication";
+} from "../replication";
 
 describe("replication model", () => {
   it("creates join envelopes with protocol metadata", () => {

package/src/features/presentation/sync/model/{status.test.ts → __tests__/status.test.ts}

@@ -1,5 +1,5 @@
-import { describe, expect, it } from "vitest";
-import { resolvePresentationSyncStatus } from "./status";
+import { describe, expect, it } from "vite-plus/test";
+import { resolvePresentationSyncStatus } from "../status";
 
 describe("resolvePresentationSyncStatus", () => {
   it("returns disabled when the session is disabled", () => {

package/src/theme/{ThemeProvider.test.ts → __tests__/ThemeProvider.test.ts}

@@ -1,10 +1,10 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it } from "vite-plus/test";
 import {
   DEFAULT_SLIDES_VIEWPORT,
   resolveSlidesViewportMeta,
 } from "@slidev-react/core/slides/viewport";
-import { resolveSlideTheme } from "./registry";
-import { resolveThemeRootAttributes } from "./ThemeProvider";
+import { resolveSlideTheme } from "../registry";
+import { resolveThemeRootAttributes } from "../ThemeProvider";
 
 describe("ThemeProvider root attributes", () => {
   it("keeps theme attributes when no viewport is provided", () => {

package/src/theme/{registry.test.ts → __tests__/registry.test.ts}

@@ -1,7 +1,7 @@
-import { describe, expect, it } from "vitest";
-import { Badge } from "../ui/primitives/Badge";
-import { defaultLayouts } from "./layouts/defaultLayouts";
-import { resolveSlideTheme } from "./registry";
+import { describe, expect, it } from "vite-plus/test";
+import { Badge } from "../../ui/primitives/Badge";
+import { defaultLayouts } from "../layouts/defaultLayouts";
+import { resolveSlideTheme } from "../registry";
 
 describe("theme registry", () => {
   it("falls back to the default theme when no active theme is set", () => {

package/src/theme/layouts/__tests__/resolveLayout.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vite-plus/test";
+import { defaultLayouts } from "../defaultLayouts";
+import { resolveLayout } from "../resolveLayout";
+
+describe("resolveLayout", () => {
+  it("returns the default layout when layout is undefined", () => {
+    expect(resolveLayout(undefined)).toBe(defaultLayouts.default);
+  });
+
+  it("returns the matching layout from the default registry", () => {
+    expect(resolveLayout("cover")).toBe(defaultLayouts.cover);
+  });
+
+  it("falls back to default layout for an unknown layout name", () => {
+    expect(resolveLayout("nonexistent")).toBe(defaultLayouts.default);
+  });
+
+  it("uses a custom registry when provided", () => {
+    const customDefault = () => null;
+    const customCover = () => null;
+    const registry = { default: customDefault, cover: customCover };
+
+    expect(resolveLayout("cover", registry)).toBe(customCover);
+    expect(resolveLayout(undefined, registry)).toBe(customDefault);
+  });
+
+  it("falls back to defaultLayouts.default when custom registry has no default", () => {
+    const registry = { cover: () => null };
+    expect(resolveLayout("missing", registry)).toBe(defaultLayouts.default);
+  });
+});

package/src/ui/mdx/{MagicMoveDemo.tsx → CodeMagicMove.tsx}

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from "react";
 import { createHighlighter } from "shiki";
 import { ShikiMagicMove } from "shiki-magic-move/react";
 
-const STEPS = [
+const DEFAULT_STEPS = [
   `const message = 'Hello'
 const target = 'world'
 
@@ -32,7 +32,8 @@ function getHighlighter() {
   return highlighterPromise;
 }
 
-export function MagicMoveDemo() {
+export function CodeMagicMove({ steps }: { steps?: string[] }) {
+  const resolvedSteps = steps && steps.length > 0 ? steps : DEFAULT_STEPS;
   const [stepIndex, setStepIndex] = useState(0);
   const [highlighter, setHighlighter] = useState<HighlighterCore>();
 
@@ -51,7 +52,7 @@ export function MagicMoveDemo() {
     };
   }, []);
 
-  const code = useMemo(() => STEPS[stepIndex], [stepIndex]);
+  const code = useMemo(() => resolvedSteps[stepIndex], [resolvedSteps, stepIndex]);
 
   if (!highlighter) {
     return (
@@ -79,31 +80,33 @@ export function MagicMoveDemo() {
             lineNumbers: false,
             splitTokens: false,
             enhanceMatching: true,
-            animateContainer: false,
-            containerStyle: false,
+            animateContainer: true,
           }}
         />
       </div>
-      <div className="flex flex-wrap gap-2">
+      <div className="flex flex-wrap items-center gap-2">
         <button
           type="button"
-          className="rounded-lg bg-blue-600 px-3 py-1.5 text-sm text-white disabled:opacity-45"
+          className="rounded-lg bg-emerald-600 px-3.5 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-emerald-500 active:bg-emerald-700 disabled:opacity-40 disabled:hover:bg-emerald-600"
           onClick={() => setStepIndex((index) => Math.max(index - 1, 0))}
           disabled={stepIndex === 0}
         >
-          Prev Step
+          ← Prev
         </button>
         <button
           type="button"
-          className="rounded-lg bg-blue-600 px-3 py-1.5 text-sm text-white disabled:opacity-45"
-          onClick={() => setStepIndex((index) => Math.min(index + 1, STEPS.length - 1))}
-          disabled={stepIndex >= STEPS.length - 1}
+          className="rounded-lg bg-emerald-600 px-3.5 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-emerald-500 active:bg-emerald-700 disabled:opacity-40 disabled:hover:bg-emerald-600"
+          onClick={() => setStepIndex((index) => Math.min(index + 1, resolvedSteps.length - 1))}
+          disabled={stepIndex >= resolvedSteps.length - 1}
         >
-          Next Step
+          Next →
         </button>
+        <span className="text-xs text-slate-400">
+          {stepIndex + 1} / {resolvedSteps.length}
+        </span>
         <button
           type="button"
-          className="rounded-lg bg-slate-600 px-3 py-1.5 text-sm text-white"
+          className="ml-auto rounded-lg border border-slate-200 bg-white/80 px-3 py-1.5 text-sm font-medium text-slate-600 shadow-sm transition hover:bg-slate-50 active:bg-slate-100"
           onClick={() => setStepIndex(0)}
         >
           Reset

package/src/ui/mdx/index.ts

@@ -2,19 +2,19 @@ import { PlantUmlDiagram } from "../diagrams/PlantUmlDiagram"
 import { Annotate } from "../primitives/Annotate"
 import { Badge } from "../primitives/Badge"
 import { Callout } from "../primitives/Callout"
-import { MagicMoveDemo } from "./MagicMoveDemo"
-import { Reveal, RevealGroup } from "../../features/presentation/reveal/Reveal"
+import { CodeMagicMove } from "./CodeMagicMove"
+import { Step, Steps } from "../../features/presentation/reveal/Reveal"
 import { CourseCover } from "../../../../../components/CourseCover"
 import { MinimaxReactVisualizer } from "../../../../../components/MinimaxReactVisualizer"
 
 export const mdxComponents = {
   Badge,
   Callout,
-  MagicMoveDemo,
+  CodeMagicMove,
   Annotate,
   PlantUmlDiagram,
-  Reveal,
-  RevealGroup,
+  Step,
+  Steps,
   CourseCover,
   MinimaxReactVisualizer,
 }

package/src/ui/primitives/Badge.tsx

@@ -1,5 +1,9 @@
 import type { ReactNode } from "react";
 
 export function Badge({ children }: { children: ReactNode }) {
-  return <span className="slide-badge">{children}</span>;
+  return (
+    <span className="inline-block rounded-full border border-emerald-500/16 bg-green-100 px-2 py-0.5 text-sm font-semibold leading-snug text-green-800">
+      {children}
+    </span>
+  );
 }

package/src/ui/primitives/{Annotate.test.tsx → __tests__/Annotate.test.tsx}

@@ -1,10 +1,10 @@
 import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it, vi } from "vite-plus/test";
 import {
   RevealProvider,
   type RevealContextValue,
-} from "../../features/presentation/reveal/RevealContext";
-import { Annotate } from "./Annotate";
+} from "../../../features/presentation/reveal/RevealContext";
+import { Annotate } from "../Annotate";
 
 function createRevealValue(clicks: number): RevealContextValue {
   return {