@slidev-react/client 0.2.5

package/src/addons/g2/index.ts

@@ -0,0 +1,36 @@
+import type { SlideAddonDefinition } from "../types"
+import {
+  Chart,
+  BarChart,
+  LineChart,
+  AreaChart,
+  ScatterChart,
+  PieChart,
+  RadarChart,
+  HeatmapChart,
+  FunnelChart,
+  WordCloudChart,
+  GaugeChart,
+  TreemapChart,
+  WaterfallChart,
+} from "./G2Chart"
+
+export const addon: SlideAddonDefinition = {
+  id: "g2",
+  label: "G2 Charts",
+  mdxComponents: {
+    Chart,
+    BarChart,
+    LineChart,
+    AreaChart,
+    ScatterChart,
+    PieChart,
+    RadarChart,
+    HeatmapChart,
+    FunnelChart,
+    WordCloudChart,
+    GaugeChart,
+    TreemapChart,
+    WaterfallChart,
+  },
+}

package/src/addons/g2/style.css

@@ -0,0 +1,31 @@
+/* ── G2 Chart tooltip overrides ── */
+
+.g2-tooltip {
+  font-family: var(--font-sans, Inter, "Segoe UI", sans-serif) !important;
+  background: rgba(255, 255, 255, 0.96) !important;
+  backdrop-filter: blur(12px) !important;
+  -webkit-backdrop-filter: blur(12px) !important;
+  border: 1px solid rgba(15, 23, 42, 0.06) !important;
+  border-radius: 10px !important;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
+  padding: 10px 14px !important;
+  font-size: 14px !important;
+  line-height: 1.6 !important;
+  color: #334155 !important;
+}
+
+.g2-tooltip-title {
+  font-weight: bold !important;
+  font-size: 14px !important;
+  color: #0f172a !important;
+  margin-bottom: 6px !important;
+}
+
+.g2-tooltip-list-item {
+  font-size: 13px !important;
+  line-height: 1.8 !important;
+}
+
+.g2-tooltip-list-item-marker {
+  display: none !important;
+}

package/src/addons/insight/Insight.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+
+export function Insight({ title = "Insight", children }: { title?: string; children: ReactNode }) {
+  return (
+    <aside className="slide-insight">
+      <div className="slide-insight-title">{title}</div>
+      <div className="slide-insight-body">{children}</div>
+    </aside>
+  );
+}

package/src/addons/insight/InsightAddonProvider.tsx

@@ -0,0 +1,20 @@
+import { useEffect, type ReactNode } from "react";
+
+export function InsightAddonProvider({ children }: { children: ReactNode }) {
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    const root = document.documentElement;
+    const attributeName = "data-slide-addon-insight";
+    const previousValue = root.getAttribute(attributeName);
+
+    root.setAttribute(attributeName, "active");
+
+    return () => {
+      if (previousValue === null) root.removeAttribute(attributeName);
+      else root.setAttribute(attributeName, previousValue);
+    };
+  }, []);
+
+  return <>{children}</>;
+}

package/src/addons/insight/SpotlightLayout.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+export function SpotlightLayout({ children }: { children: ReactNode }) {
+  return (
+    <section className="slide-layout-spotlight grid size-full place-items-center">
+      <div className="spotlight-shell w-full max-w-[1440px] rounded-[32px] border border-white/60 bg-white/78 px-16 py-14  backdrop-blur">
+        {children}
+      </div>
+    </section>
+  );
+}

package/src/addons/insight/index.ts

@@ -0,0 +1,17 @@
+import { InsightAddonProvider } from "./InsightAddonProvider";
+import { SpotlightLayout } from "./SpotlightLayout";
+import { Insight } from "./Insight";
+import type { SlideAddonDefinition } from "../types";
+
+export const addon: SlideAddonDefinition = {
+  id: "insight",
+  label: "Insight",
+  experimental: true,
+  provider: InsightAddonProvider,
+  layouts: {
+    spotlight: SpotlightLayout,
+  },
+  mdxComponents: {
+    Insight,
+  },
+};

package/src/addons/insight/style.css

@@ -0,0 +1,34 @@
+:root[data-slide-addon-insight="active"] {
+  --slide-insight-border: rgba(14, 116, 144, 0.24);
+  --slide-insight-bg: rgba(236, 254, 255, 0.88);
+  --slide-insight-title: #155e75;
+  --slide-insight-text: #164e63;
+}
+
+.slide-layout-spotlight {
+  background:
+    radial-gradient(circle at top left, rgba(103, 232, 249, 0.22), transparent 34%),
+    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.18), transparent 32%);
+}
+
+.slide-insight {
+  margin-top: 1.25rem;
+  border: 1px solid var(--slide-insight-border);
+  background: var(--slide-insight-bg);
+  border-radius: 1.25rem;
+  padding: 1rem 1.1rem;
+  box-shadow: 0 16px 38px rgba(14, 116, 144, 0.08);
+}
+
+.slide-insight-title {
+  margin-bottom: 0.45rem;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--slide-insight-title);
+}
+
+.slide-insight-body {
+  color: var(--slide-insight-text);
+}

package/src/addons/mermaid/MermaidDiagram.tsx

@@ -0,0 +1,379 @@
+import mermaid from "mermaid";
+import { Expand, X } from "lucide-react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+function normalizeDiagramCode(code: string | undefined, children: ReactNode) {
+  if (typeof code === "string") return code;
+
+  if (typeof children === "string") return children;
+
+  if (Array.isArray(children)) return children.join("");
+
+  return "";
+}
+
+let initialized = false;
+let renderQueue = Promise.resolve();
+const mermaidFontFamily =
+  'Inter, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif';
+
+const themeVariables: Record<string, string> = {
+  fontFamily: mermaidFontFamily,
+  fontSize: "19px",
+  primaryColor: "#22C55E",
+  primaryTextColor: "#000000",
+  primaryBorderColor: "#16A34A",
+  lineColor: "#334155",
+  background: "#ffffff",
+  mainBkg: "#ffffff",
+  secondBkg: "#f8fafc",
+  tertiaryColor: "#f1f5f9",
+  textColor: "#000000",
+  secondaryColor: "#475569",
+  tertiaryTextColor: "#000000",
+  border1: "#cbd5e1",
+  border2: "#e2e8f0",
+  nodeBkg: "#f8fafc",
+  nodeBorder: "#94a3b8",
+  nodeTextColor: "#000000",
+  clusterBkg: "#f8fafc",
+  clusterBorder: "#cbd5e1",
+  edgeLabelBackground: "#ffffff",
+  arrowheadColor: "#475569",
+  actorBkg: "#ffffff",
+  actorBorder: "#22C55E",
+  actorTextColor: "#000000",
+  actorLineColor: "#94a3b8",
+  signalColor: "#334155",
+  signalTextColor: "#000000",
+  labelBoxBkgColor: "#f8fafc",
+  labelBoxBorderColor: "#cbd5e1",
+  labelTextColor: "#000000",
+  loopTextColor: "#000000",
+  noteBkgColor: "#fefce8",
+  noteTextColor: "#000000",
+  noteBorderColor: "#e2e8f0",
+  activationBkgColor: "#86efac",
+  activationBorderColor: "#22C55E",
+  labelColor: "#000000",
+  classText: "#000000",
+  git0: "#60a5fa",
+  git1: "#34d399",
+  git2: "#a78bfa",
+  git3: "#f472b6",
+  git4: "#fbbf24",
+  git5: "#f87171",
+  git6: "#22d3ee",
+  git7: "#fb923c",
+  gitInv0: "#ffffff",
+  gitInv1: "#ffffff",
+  gitInv2: "#ffffff",
+  gitInv3: "#ffffff",
+  gitInv4: "#ffffff",
+  gitInv5: "#ffffff",
+  gitInv6: "#ffffff",
+  gitInv7: "#ffffff",
+  commitLabelColor: "#000000",
+  commitLabelBackground: "#f8fafc",
+  fillType0: "#22C55E",
+  fillType1: "#50e3c2",
+  fillType2: "#7928ca",
+  fillType3: "#ff0080",
+  fillType4: "#f5a623",
+  fillType5: "#ff0000",
+  fillType6: "#22C55E",
+  fillType7: "#50e3c2",
+};
+
+type MermaidRenderVariant = "preview" | "zoom";
+
+function createMermaidConfig(variant: MermaidRenderVariant) {
+  if (variant === "preview") {
+    return {
+      startOnLoad: false,
+      securityLevel: "loose" as const,
+      theme: "base" as const,
+      htmlLabels: false,
+      themeVariables: {
+        ...themeVariables,
+        fontSize: "17px",
+      },
+      themeCSS: `
+        svg, svg * {
+          font-family: ${mermaidFontFamily};
+        }
+        .label,
+        .label text,
+        .nodeLabel,
+        .edgeLabel,
+        .cluster-label,
+        .stateLabel text,
+        foreignObject div {
+          font-family: ${mermaidFontFamily};
+        }
+      `,
+      flowchart: {
+        curve: "basis" as const,
+        padding: 15,
+        htmlLabels: false,
+      },
+      state: {} as Record<string, unknown>,
+      sequence: {
+        actorFontSize: 17,
+        noteFontSize: 16,
+        messageFontSize: 16,
+      },
+      gantt: {
+        fontSize: 16,
+      },
+      journey: {
+        taskFontSize: 16,
+        titleFontSize: "19px",
+      },
+    };
+  }
+
+  return {
+    startOnLoad: false,
+    securityLevel: "loose" as const,
+    theme: "base" as const,
+    htmlLabels: false,
+    themeVariables,
+    themeCSS: `
+      svg, svg * {
+        font-family: ${mermaidFontFamily};
+      }
+      .label,
+      .label text,
+      .nodeLabel,
+      .edgeLabel,
+      .cluster-label,
+      .stateLabel text,
+      foreignObject div {
+        font-family: ${mermaidFontFamily};
+      }
+    `,
+    flowchart: {
+      curve: "basis" as const,
+      padding: 15,
+      htmlLabels: false,
+    },
+    state: {} as Record<string, unknown>,
+    sequence: {
+      actorFontSize: 19,
+      noteFontSize: 18,
+      messageFontSize: 18,
+    },
+    gantt: {
+      fontSize: 18,
+    },
+    journey: {
+      taskFontSize: 18,
+      titleFontSize: "21px",
+    },
+  };
+}
+
+function ensureMermaid() {
+  if (initialized) return;
+
+  mermaid.initialize(createMermaidConfig("zoom"));
+
+  initialized = true;
+}
+
+async function enqueueMermaidRender<T>(task: () => Promise<T>) {
+  const next = renderQueue.then(task, task);
+  renderQueue = next.then(
+    () => undefined,
+    () => undefined,
+  );
+  return next;
+}
+
+async function renderMermaidSvg(
+  id: string,
+  source: string,
+  variant: MermaidRenderVariant,
+) {
+  ensureMermaid();
+  mermaid.initialize(createMermaidConfig(variant));
+  const result = await mermaid.render(id, source);
+  return result.svg;
+}
+
+export function MermaidDiagram({ code, children }: { code?: string; children?: ReactNode }) {
+  const source = normalizeDiagramCode(code, children);
+  const [previewSvg, setPreviewSvg] = useState<string>("");
+  const [zoomSvg, setZoomSvg] = useState<string>("");
+  const [error, setError] = useState<string | null>(null);
+  const [zoomed, setZoomed] = useState(false);
+  const [zoomLoading, setZoomLoading] = useState(false);
+  const previewId = useMemo(() => `mermaid-preview-${Math.random().toString(36).slice(2, 10)}`, []);
+  const zoomId = useMemo(() => `mermaid-zoom-${Math.random().toString(36).slice(2, 10)}`, []);
+  const diagramSurfaceStyle = useMemo(
+    () => ({ color: "#000000", fontFamily: mermaidFontFamily }),
+    [],
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const render = async () => {
+      try {
+        setPreviewSvg("");
+        setZoomSvg("");
+        setZoomLoading(false);
+        const svg = await enqueueMermaidRender(() =>
+          renderMermaidSvg(previewId, source, "preview"),
+        );
+        if (!cancelled) {
+          setPreviewSvg(svg);
+          setError(null);
+        }
+      } catch (err) {
+        if (!cancelled) setError(err instanceof Error ? err.message : String(err));
+      }
+    };
+
+    void render();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [previewId, source]);
+
+  useEffect(() => {
+    if (!zoomed || zoomSvg) return;
+
+    let cancelled = false;
+
+    const render = async () => {
+      try {
+        setZoomLoading(true);
+        const svg = await enqueueMermaidRender(() =>
+          renderMermaidSvg(zoomId, source, "zoom"),
+        );
+        if (!cancelled) {
+          setZoomSvg(svg);
+          setError(null);
+        }
+      } catch (err) {
+        if (!cancelled) setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        if (!cancelled) setZoomLoading(false);
+      }
+    };
+
+    void render();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [source, zoomId, zoomSvg, zoomed]);
+
+  useEffect(() => {
+    if (!zoomed) return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setZoomed(false);
+    };
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, [zoomed]);
+
+  if (error) {
+    return (
+      <div className="my-3 rounded-xl border border-rose-300 bg-rose-50 p-3 text-sm text-rose-900">
+        Mermaid render error: {error}
+      </div>
+    );
+  }
+
+  if (!previewSvg) {
+    return (
+      <div className="my-3 rounded-xl border border-slate-300 bg-white/70 p-3 text-sm text-slate-700">
+        Rendering Mermaid...
+      </div>
+    );
+  }
+
+  const zoomOverlay =
+    zoomed && typeof document !== "undefined"
+      ? createPortal(
+          <div
+            className="fixed inset-0 z-[120] flex items-center justify-center bg-slate-100/82 p-6 backdrop-blur-sm"
+            onClick={() => setZoomed(false)}
+          >
+            <div
+              className="relative flex h-[min(92vh,1200px)] w-[min(96vw,1600px)] flex-col overflow-hidden rounded-3xl border border-slate-200 bg-white "
+              onClick={(event) => event.stopPropagation()}
+            >
+              <div className="flex items-center justify-between border-b border-slate-200 px-5 py-3 text-sm text-slate-700">
+                <div>
+                  <div className="font-semibold tracking-[0.16em] text-slate-900 uppercase">Mermaid</div>
+                  <div className="mt-1 text-xs text-slate-500">Esc or click outside to close</div>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => setZoomed(false)}
+                  className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-200 bg-slate-50 text-slate-600 transition hover:bg-slate-100 hover:text-slate-900"
+                  aria-label="Close Mermaid zoom preview"
+                  title="Close"
+                >
+                  <X size={18} />
+                </button>
+              </div>
+              <div className="flex-1 overflow-auto bg-slate-50 p-6">
+                {zoomSvg ? (
+                  <div
+                    className="inline-block min-w-full rounded-2xl border border-slate-200 bg-white p-6  [&_svg]:h-auto [&_svg]:max-w-none [&_svg_tspan]:fill-current [&_svg_text]:fill-current"
+                    style={diagramSurfaceStyle}
+                    dangerouslySetInnerHTML={{ __html: zoomSvg }}
+                  />
+                ) : (
+                  <div className="rounded-2xl border border-slate-200 bg-white p-6 text-sm text-slate-600 ">
+                    {zoomLoading ? "Preparing Mermaid preview..." : "Rendering Mermaid..."}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>,
+          document.body,
+        )
+      : null;
+
+  return (
+    <>
+      <div className="my-3">
+        <div className="relative w-full overflow-hidden rounded-xl border border-slate-300 bg-white p-3 shadow-sm">
+          <button
+            type="button"
+            onClick={() => setZoomed(true)}
+            className="absolute top-3 right-3 z-10 inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-300/80 bg-white/92 text-slate-700 shadow-sm transition hover:bg-white hover:text-slate-950"
+            aria-label="Open Mermaid zoom preview"
+            title="Zoom Mermaid diagram"
+          >
+            <Expand size={16} />
+          </button>
+          <div className="max-w-full overflow-x-auto pr-12">
+            <div
+              className="w-full [&_svg]:block [&_svg]:h-auto [&_svg]:w-full [&_svg]:max-w-full [&_svg_tspan]:fill-current [&_svg_text]:fill-current"
+              style={diagramSurfaceStyle}
+              dangerouslySetInnerHTML={{ __html: previewSvg }}
+            />
+          </div>
+        </div>
+      </div>
+      {zoomOverlay}
+    </>
+  );
+}

package/src/addons/mermaid/index.ts

@@ -0,0 +1,10 @@
+import type { SlideAddonDefinition } from "../types";
+import { MermaidDiagram } from "./MermaidDiagram";
+
+export const addon: SlideAddonDefinition = {
+  id: "mermaid",
+  label: "Mermaid Diagrams",
+  mdxComponents: {
+    MermaidDiagram,
+  },
+};

package/src/addons/registry.test.ts

@@ -0,0 +1,28 @@
+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";
+
+describe("addon registry", () => {
+  it("registers local addons discovered from the addons directory", () => {
+    const addonIds = listRegisteredAddons().map((addon) => addon.id);
+
+    expect(addonIds).toContain("insight");
+  });
+
+  it("ignores missing addons while preserving known ones", () => {
+    const definitions = resolveAddonDefinitions(["insight", "missing-addon"]);
+
+    expect(definitions.map((definition) => definition.id)).toEqual(["insight"]);
+  });
+
+  it("merges addon layouts, mdx components, and providers", () => {
+    const addons = resolveSlideAddons(["insight"]);
+
+    expect(addons.definitions.map((definition) => definition.id)).toEqual(["insight"]);
+    expect(addons.layouts.spotlight).toBe(SpotlightLayout);
+    expect(addons.mdxComponents.Insight).toBe(Insight);
+    expect(addons.providers).toEqual([InsightAddonProvider]);
+  });
+});

package/src/addons/registry.ts

@@ -0,0 +1,61 @@
+import type { ThemeMDXComponents, LayoutRegistry } from "../theme/types";
+import type { ResolvedSlideAddons, SlideAddonDefinition } from "./types";
+
+import.meta.glob("./*/style.css", { eager: true });
+
+const addonModules = import.meta.glob<{ addon?: SlideAddonDefinition }>("./*/index.ts", {
+  eager: true,
+});
+
+const registeredAddons = Object.values(addonModules)
+  .map((module) => module.addon)
+  .filter((addon): addon is SlideAddonDefinition => Boolean(addon));
+
+const addonMap = new Map(registeredAddons.map((addon) => [addon.id, addon]));
+
+function normalizeAddonIds(addonIds?: string[]) {
+  return [...new Set((addonIds ?? []).map((addonId) => addonId.trim()).filter(Boolean))];
+}
+
+function mergeLayouts(definitions: SlideAddonDefinition[]): LayoutRegistry {
+  return definitions.reduce<LayoutRegistry>(
+    (layouts, definition) => ({
+      ...layouts,
+      ...definition.layouts,
+    }),
+    {},
+  );
+}
+
+function mergeMdxComponents(definitions: SlideAddonDefinition[]): ThemeMDXComponents {
+  return definitions.reduce<ThemeMDXComponents>(
+    (components, definition) => ({
+      ...components,
+      ...definition.mdxComponents,
+    }),
+    {},
+  );
+}
+
+export function listRegisteredAddons() {
+  return [...addonMap.values()];
+}
+
+export function resolveAddonDefinitions(addonIds?: string[]) {
+  return normalizeAddonIds(addonIds)
+    .map((addonId) => addonMap.get(addonId))
+    .filter((addon): addon is SlideAddonDefinition => Boolean(addon));
+}
+
+export function resolveSlideAddons(addonIds?: string[]): ResolvedSlideAddons {
+  const definitions = resolveAddonDefinitions(addonIds);
+
+  return {
+    definitions,
+    providers: definitions
+      .map((definition) => definition.provider)
+      .filter((provider): provider is NonNullable<typeof provider> => Boolean(provider)),
+    layouts: mergeLayouts(definitions),
+    mdxComponents: mergeMdxComponents(definitions),
+  };
+}

package/src/addons/types.ts

@@ -0,0 +1,6 @@
+export type {
+  AddonProviderComponent,
+  SlideAddonDefinition,
+  ResolvedSlideAddons,
+} from "@slidev-react/core/addon";
+export { defineAddon } from "@slidev-react/core/addon";