@slidev-react/client 0.2.5 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev-react/client",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "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.6"
   },
   "peerDependencies": {
     "@antv/g-svg": ">=2.0.0",

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/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/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>
+  );
 }