@slidev-react/client 0.2.5

package/src/ui/mdx/MagicMoveDemo.tsx

@@ -0,0 +1,114 @@
+import type { HighlighterCore } from "shiki";
+import { useEffect, useMemo, useState } from "react";
+import { createHighlighter } from "shiki";
+import { ShikiMagicMove } from "shiki-magic-move/react";
+
+const STEPS = [
+  `const message = 'Hello'
+const target = 'world'
+
+console.log(message, target)`,
+  `const message = 'Hi'
+const target = user.name
+
+console.log(\`${"${message}"}, ${"${target}"}!\`)`,
+  `function greet(target: string) {
+  const message = 'Hi'
+
+  return \`${"${message}"}, ${"${target}"}!\`
+}`,
+];
+
+let highlighterPromise: Promise<HighlighterCore> | null = null;
+
+function getHighlighter() {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      themes: ["vitesse-light"],
+      langs: ["javascript", "typescript"],
+    });
+  }
+
+  return highlighterPromise;
+}
+
+export function MagicMoveDemo() {
+  const [stepIndex, setStepIndex] = useState(0);
+  const [highlighter, setHighlighter] = useState<HighlighterCore>();
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const initializeHighlighter = async () => {
+      const instance = await getHighlighter();
+      if (!cancelled) setHighlighter(instance);
+    };
+
+    void initializeHighlighter();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const code = useMemo(() => STEPS[stepIndex], [stepIndex]);
+
+  if (!highlighter) {
+    return (
+      <div className="rounded-xl border border-slate-300/70 bg-white/70 p-3 text-sm text-slate-700">
+        Preparing highlighter...
+      </div>
+    );
+  }
+
+  return (
+    <div className="magic-move-demo grid gap-4">
+      <div className="magic-move-demo-shell overflow-hidden rounded-xl border border-slate-200/80 bg-white/85 px-4 py-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.7)]">
+        <ShikiMagicMove
+          lang="ts"
+          theme="vitesse-light"
+          highlighter={highlighter}
+          code={code}
+          className="magic-move-demo-pre"
+          options={{
+            duration: 750,
+            stagger: 3,
+            delayMove: 0,
+            delayEnter: 0,
+            delayLeave: 0,
+            lineNumbers: false,
+            splitTokens: false,
+            enhanceMatching: true,
+            animateContainer: false,
+            containerStyle: false,
+          }}
+        />
+      </div>
+      <div className="flex flex-wrap gap-2">
+        <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.max(index - 1, 0))}
+          disabled={stepIndex === 0}
+        >
+          Prev Step
+        </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}
+        >
+          Next Step
+        </button>
+        <button
+          type="button"
+          className="rounded-lg bg-slate-600 px-3 py-1.5 text-sm text-white"
+          onClick={() => setStepIndex(0)}
+        >
+          Reset
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/ui/mdx/index.ts

@@ -0,0 +1,21 @@
+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 { CourseCover } from "../../../../../components/CourseCover"
+import { MinimaxReactVisualizer } from "../../../../../components/MinimaxReactVisualizer"
+
+export const mdxComponents = {
+  Badge,
+  Callout,
+  MagicMoveDemo,
+  Annotate,
+  PlantUmlDiagram,
+  Reveal,
+  RevealGroup,
+  CourseCover,
+  MinimaxReactVisualizer,
+}
+

package/src/ui/primitives/Annotate.test.tsx

@@ -0,0 +1,64 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+import {
+  RevealProvider,
+  type RevealContextValue,
+} from "../../features/presentation/reveal/RevealContext";
+import { Annotate } from "./Annotate";
+
+function createRevealValue(clicks: number): RevealContextValue {
+  return {
+    slideId: "slide-annotation",
+    clicks,
+    clicksTotal: 2,
+    setClicks: vi.fn(),
+    registerStep: vi.fn(() => () => {}),
+    advance: vi.fn(),
+    retreat: vi.fn(),
+    canAdvance: true,
+    canRetreat: clicks > 0,
+  };
+}
+
+describe("Annotate", () => {
+  it("keeps text visible before its reveal step", () => {
+    const html = renderToStaticMarkup(
+      <RevealProvider value={createRevealValue(0)}>
+        <Annotate type="underline" step={1}>
+          reveal copy
+        </Annotate>
+      </RevealProvider>,
+    );
+
+    expect(html).toContain("reveal copy");
+    expect(html).not.toContain("slide-mark-overlay");
+  });
+
+  it("renders an animated mark after the reveal step is reached", () => {
+    const html = renderToStaticMarkup(
+      <RevealProvider value={createRevealValue(1)}>
+        <Annotate type="underline" step={1}>
+          reveal copy
+        </Annotate>
+      </RevealProvider>,
+    );
+
+    expect(html).toContain("slide-mark--underline");
+    expect(html).toContain("slide-mark--animate");
+    expect(html).toContain("slide-mark-overlay");
+  });
+
+  it("can reveal instantly without playback animation", () => {
+    const html = renderToStaticMarkup(
+      <RevealProvider value={createRevealValue(1)}>
+        <Annotate type="box" step={1} animate={false}>
+          instant reveal
+        </Annotate>
+      </RevealProvider>,
+    );
+
+    expect(html).toContain("slide-mark--box");
+    expect(html).not.toContain("slide-mark--animate");
+    expect(html).toContain("slide-mark-overlay");
+  });
+});

package/src/ui/primitives/Annotate.tsx

@@ -0,0 +1,82 @@
+import { type CSSProperties, type ReactNode } from "react";
+import { useRevealStep } from "../../features/presentation/reveal/useRevealStep";
+
+type AnnotateType = "underline" | "box" | "circle" | "highlight" | "strike-through" | "crossed-off";
+
+export type AnnotateProps = {
+  children: ReactNode;
+  type?: AnnotateType;
+  step?: number;
+  animate?: boolean;
+  color?: string;
+};
+
+const DEFAULT_ANIMATION_DURATION_MS = 520;
+
+const defaultColorByType: Record<AnnotateType, string> = {
+  underline: "#16a34a",
+  box: "#16a34a",
+  circle: "#16a34a",
+  highlight: "rgba(250, 204, 21, 0.78)",
+  "strike-through": "#ef4444",
+  "crossed-off": "#ef4444",
+};
+
+const defaultPaddingByType: Record<AnnotateType, [number, number, number, number]> = {
+  underline: [0, 2, 2, 2],
+  box: [2, 5, 2, 5],
+  circle: [3, 7, 3, 7],
+  highlight: [1, 3, 1, 3],
+  "strike-through": [0, 2, 0, 2],
+  "crossed-off": [1, 3, 1, 3],
+};
+
+const defaultStrokeWidthByType: Record<AnnotateType, number> = {
+  underline: 2.4,
+  box: 2.2,
+  circle: 2.2,
+  highlight: 0,
+  "strike-through": 2.2,
+  "crossed-off": 2.2,
+};
+
+const joinClassNames = (...names: Array<string | false>) => {
+  return names.filter(Boolean).join(" ");
+};
+
+export function Annotate({
+  children,
+  type = "highlight",
+  step,
+  animate = step !== undefined,
+  color,
+}: AnnotateProps) {
+  const { isVisible } = useRevealStep(step);
+
+  const [padTop, padRight, padBottom, padLeft] = defaultPaddingByType[type];
+  const shouldRenderMark = isVisible;
+  const style = {
+    "--mark-color": color ?? defaultColorByType[type],
+    "--mark-stroke-width": `${defaultStrokeWidthByType[type]}px`,
+    "--mark-pad-top": `${padTop}px`,
+    "--mark-pad-right": `${padRight}px`,
+    "--mark-pad-bottom": `${padBottom}px`,
+    "--mark-pad-left": `${padLeft}px`,
+    "--mark-animation-duration": `${DEFAULT_ANIMATION_DURATION_MS}ms`,
+    "--mark-animation-iterations": "1",
+  } as CSSProperties;
+
+  return (
+    <span
+      className={joinClassNames(
+        "slide-mark",
+        `slide-mark--${type}`,
+        shouldRenderMark && animate && "slide-mark--animate",
+      )}
+      style={style}
+    >
+      <span className="slide-mark-target">{children}</span>
+      {shouldRenderMark ? <span aria-hidden className="slide-mark-overlay" /> : null}
+    </span>
+  );
+}

package/src/ui/primitives/Badge.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+
+export function Badge({ children }: { children: ReactNode }) {
+  return <span className="slide-badge">{children}</span>;
+}

package/src/ui/primitives/Callout.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+
+const stylesByType = {
+  info: "border-green-600/80 bg-green-50 text-green-950",
+  warn: "border-amber-600/80 bg-amber-50 text-amber-950",
+  success: "border-emerald-600/80 bg-emerald-50 text-emerald-950",
+} as const;
+
+export function Callout({
+  type = "info",
+  title,
+  children,
+}: {
+  type?: "info" | "warn" | "success";
+  title?: string;
+  children: ReactNode;
+}) {
+  return (
+    <aside className={`my-4 rounded-xl border-l-4 px-3.5 py-3 ${stylesByType[type]}`}>
+      {title ? <strong className="mb-1 block">{title}</strong> : null}
+      <div>{children}</div>
+    </aside>
+  );
+}

package/src/ui/primitives/ChromeIconButton.tsx

@@ -0,0 +1,58 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+
+function joinClassNames(...classNames: Array<string | false | null | undefined>) {
+  return classNames.filter(Boolean).join(" ");
+}
+
+const toneClassNames = {
+  default:
+    "border-slate-200/80 bg-white/88 text-slate-700 hover:bg-white disabled:cursor-not-allowed disabled:opacity-45",
+  active: "border-emerald-200/80 bg-emerald-50 text-emerald-700",
+  danger:
+    "border-rose-300/80 bg-rose-50 text-rose-700 hover:bg-rose-100 disabled:cursor-not-allowed disabled:opacity-45",
+  violet:
+    "border-violet-300/80 bg-violet-50 text-violet-700 hover:bg-violet-100 disabled:cursor-not-allowed disabled:opacity-45",
+  success:
+    "border-emerald-300/80 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 disabled:cursor-not-allowed disabled:opacity-45",
+  info: "border-green-300/80 bg-green-50 text-green-700 hover:bg-green-100 disabled:cursor-not-allowed disabled:opacity-45",
+} as const;
+
+const sizeClassNames = {
+  sm: "size-8",
+  md: "size-9",
+} as const;
+
+const radiusClassNames = {
+  soft: "rounded-md",
+  chrome: "rounded-md",
+} as const;
+
+export function ChromeIconButton({
+  children,
+  className,
+  tone = "default",
+  size = "md",
+  radius = "chrome",
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement> & {
+  children: ReactNode;
+  tone?: keyof typeof toneClassNames;
+  size?: keyof typeof sizeClassNames;
+  radius?: keyof typeof radiusClassNames;
+}) {
+  return (
+    <button
+      {...props}
+      type={props.type ?? "button"}
+      className={joinClassNames(
+        "inline-flex shrink-0 items-center justify-center border transition",
+        toneClassNames[tone],
+        sizeClassNames[size],
+        radiusClassNames[radius],
+        className,
+      )}
+    >
+      {children}
+    </button>
+  );
+}

package/src/ui/primitives/ChromePanel.tsx

@@ -0,0 +1,79 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+
+function joinClassNames(...classNames: Array<string | false | null | undefined>) {
+  return classNames.filter(Boolean).join(" ");
+}
+
+const toneClassNames = {
+  glass:
+    "border-slate-200/80 bg-white/88 text-slate-900",
+  solid:
+    "border-slate-200/80 bg-white/92 text-slate-900",
+  inset: "border-slate-200/80 bg-slate-50/78 text-slate-600",
+  frame: "border-slate-200/80 bg-white",
+  dashed: "border-slate-200/80 bg-slate-50/75 text-slate-500",
+} as const;
+
+const radiusClassNames = {
+  panel: "rounded-md",
+  section: "rounded-lg",
+  inset: "rounded-md",
+  frame: "rounded-md",
+} as const;
+
+const paddingClassNames = {
+  none: "",
+  sm: "p-3",
+  md: "p-4",
+  lg: "p-5",
+} as const;
+
+export function chromePanelClassName({
+  className,
+  tone = "glass",
+  radius = "panel",
+  padding = "md",
+}: {
+  className?: string;
+  tone?: keyof typeof toneClassNames;
+  radius?: keyof typeof radiusClassNames;
+  padding?: keyof typeof paddingClassNames;
+}) {
+  return joinClassNames(
+    "min-h-0 min-w-0",
+    toneClassNames[tone],
+    radiusClassNames[radius],
+    paddingClassNames[padding],
+    className,
+  );
+}
+
+type ChromePanelProps<T extends ElementType> = {
+  as?: T;
+  children: ReactNode;
+  className?: string;
+  tone?: keyof typeof toneClassNames;
+  radius?: keyof typeof radiusClassNames;
+  padding?: keyof typeof paddingClassNames;
+} & Omit<ComponentPropsWithoutRef<T>, "as" | "children" | "className">;
+
+export function ChromePanel<T extends ElementType = "section">({
+  as,
+  children,
+  className,
+  tone = "glass",
+  radius = "panel",
+  padding = "md",
+  ...props
+}: ChromePanelProps<T>) {
+  const Component = as ?? "section";
+
+  return (
+    <Component
+      {...props}
+      className={chromePanelClassName({ className, tone, radius, padding })}
+    >
+      {children}
+    </Component>
+  );
+}

package/src/ui/primitives/ChromeTag.tsx

@@ -0,0 +1,70 @@
+import type { ElementType, ReactNode } from "react";
+
+function joinClassNames(...classNames: Array<string | false | null | undefined>) {
+  return classNames.filter(Boolean).join(" ");
+}
+
+const toneClassNames = {
+  default: "border-slate-200/80 bg-white/88 text-slate-500",
+  defaultStrong: "border-slate-200/80 bg-white/88 text-slate-800",
+  muted: "border-slate-200/80 bg-white/82 text-slate-600",
+  active: "border-emerald-200/80 bg-emerald-50 text-emerald-700",
+  success: "border-emerald-200/80 bg-emerald-50 text-emerald-700",
+  warning: "border-amber-200/80 bg-amber-50 text-amber-700",
+  danger: "border-rose-300/80 bg-rose-50 text-rose-700",
+} as const;
+
+const sizeClassNames = {
+  xs: "px-2 py-0.5 text-[10px]",
+  sm: "px-2.5 py-1 text-[11px]",
+  md: "px-3 py-1.5 text-xs",
+} as const;
+
+const weightClassNames = {
+  medium: "font-medium",
+  semibold: "font-semibold",
+} as const;
+
+export function chromeTagClassName({
+  className,
+  tone = "default",
+  size = "sm",
+  weight = "medium",
+}: {
+  className?: string;
+  tone?: keyof typeof toneClassNames;
+  size?: keyof typeof sizeClassNames;
+  weight?: keyof typeof weightClassNames;
+}) {
+  return joinClassNames(
+    "inline-flex items-center gap-2 rounded-md border",
+    toneClassNames[tone],
+    sizeClassNames[size],
+    weightClassNames[weight],
+    className,
+  );
+}
+
+export function ChromeTag({
+  as,
+  children,
+  className,
+  tone = "default",
+  size = "sm",
+  weight = "medium",
+}: {
+  as?: ElementType;
+  children: ReactNode;
+  className?: string;
+  tone?: keyof typeof toneClassNames;
+  size?: keyof typeof sizeClassNames;
+  weight?: keyof typeof weightClassNames;
+}) {
+  const Component = as ?? "span";
+
+  return (
+    <Component className={chromeTagClassName({ className, tone, size, weight })}>
+      {children}
+    </Component>
+  );
+}

package/src/ui/primitives/FormSelect.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode, SelectHTMLAttributes } from "react";
+
+function joinClassNames(...classNames: Array<string | false | null | undefined>) {
+  return classNames.filter(Boolean).join(" ");
+}
+
+interface FormSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "children" | "size"> {
+  label: ReactNode;
+  children: ReactNode;
+  size?: "sm" | "md";
+}
+
+const sizeStyles = {
+  sm: {
+    container: "px-3 py-1.5 gap-2",
+    select: "px-2.5 py-1",
+  },
+  md: {
+    container: "px-3 py-2 gap-2",
+    select: "px-2.5 py-1",
+  },
+};
+
+export function FormSelect({
+  label,
+  children,
+  size = "sm",
+  className,
+  ...props
+}: FormSelectProps) {
+  return (
+    <label
+      className={joinClassNames(
+        "inline-flex items-center rounded-md border border-slate-200/80 bg-white/88 text-xs font-medium text-slate-700",
+        sizeStyles[size].container,
+        className,
+      )}
+    >
+      {label}
+      <select
+        {...props}
+        className={joinClassNames(
+          "rounded-md border border-slate-200/80 bg-white text-xs text-slate-700 outline-none",
+          sizeStyles[size].select,
+        )}
+      >
+        {children}
+      </select>
+    </label>
+  );
+}