@slidev-react/client 0.2.5

package/src/main.tsx

@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "katex/dist/katex.min.css";
+import "shiki-magic-move/dist/style.css";
+import App from "./app/App";
+import "./theme/index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/src/theme/ThemeProvider.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import {
+  DEFAULT_SLIDES_VIEWPORT,
+  resolveSlidesViewportMeta,
+} from "@slidev-react/core/slides/viewport";
+import { resolveSlideTheme } from "./registry";
+import { resolveThemeRootAttributes } from "./ThemeProvider";
+
+describe("ThemeProvider root attributes", () => {
+  it("keeps theme attributes when no viewport is provided", () => {
+    const theme = resolveSlideTheme();
+
+    expect(resolveThemeRootAttributes(theme)).toEqual({
+      "data-slide-theme": "default",
+    });
+  });
+
+  it("adds a portrait orientation attribute for vertical decks", () => {
+    const theme = resolveSlideTheme();
+    const portraitViewport = resolveSlidesViewportMeta("3/4").viewport;
+
+    expect(resolveThemeRootAttributes(theme, portraitViewport)).toEqual({
+      "data-slide-theme": "default",
+      "data-slide-viewport-orientation": "portrait",
+    });
+  });
+
+  it("adds a landscape orientation attribute for standard decks", () => {
+    const theme = resolveSlideTheme();
+
+    expect(resolveThemeRootAttributes(theme, DEFAULT_SLIDES_VIEWPORT)).toEqual({
+      "data-slide-theme": "default",
+      "data-slide-viewport-orientation": "landscape",
+    });
+  });
+});

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,79 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  type ReactNode,
+} from "react";
+import {
+  isPortraitViewport,
+  type SlidesViewport,
+} from "@slidev-react/core/slides/viewport";
+import { resolveSlideTheme } from "./registry";
+import type { ResolvedSlideTheme } from "./types";
+
+const ThemeContext = createContext<ResolvedSlideTheme | null>(null);
+
+export function resolveThemeRootAttributes(
+  theme: ResolvedSlideTheme,
+  slidesViewport?: SlidesViewport,
+) {
+  return {
+    ...theme.rootAttributes,
+    ...(slidesViewport
+      ? {
+          "data-slide-viewport-orientation": isPortraitViewport(slidesViewport)
+            ? "portrait"
+            : "landscape",
+        }
+      : {}),
+  };
+}
+
+function applyRootThemeAttributes(theme: ResolvedSlideTheme, slidesViewport?: SlidesViewport) {
+  if (typeof document === "undefined") return () => {};
+
+  const root = document.documentElement;
+  const appliedEntries = Object.entries(resolveThemeRootAttributes(theme, slidesViewport));
+  const previousAttributes = new Map(
+    appliedEntries.map(([name]) => [name, root.getAttribute(name)]),
+  );
+  const hadThemeClass = theme.rootClassName ? root.classList.contains(theme.rootClassName) : false;
+
+  for (const [name, value] of appliedEntries) {
+    root.setAttribute(name, value);
+  }
+
+  if (theme.rootClassName) root.classList.add(theme.rootClassName);
+
+  return () => {
+    for (const [name] of appliedEntries) {
+      const previousValue = previousAttributes.get(name);
+      if (previousValue === null || previousValue === undefined) root.removeAttribute(name);
+      else root.setAttribute(name, previousValue);
+    }
+
+    if (theme.rootClassName && !hadThemeClass) root.classList.remove(theme.rootClassName);
+  };
+}
+
+export function ThemeProvider({
+  slidesViewport,
+  children,
+}: {
+  slidesViewport?: SlidesViewport;
+  children: ReactNode;
+}) {
+  const theme = useMemo(() => resolveSlideTheme(), []);
+
+  useEffect(() => applyRootThemeAttributes(theme, slidesViewport), [slidesViewport, theme]);
+
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+}
+
+export function useSlideTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) throw new Error("useSlideTheme must be used inside ThemeProvider");
+
+  return context;
+}

package/src/theme/__mocks__/active-theme.ts

@@ -0,0 +1,3 @@
+// Stub for virtual:slidev-react/active-theme in test environment.
+// In production, the Vite plugin generates this module dynamically.
+export default undefined;

package/src/theme/base.css

@@ -0,0 +1,14 @@
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  overscroll-behavior: none;
+}

package/src/theme/components.css

@@ -0,0 +1,231 @@
+.slide-surface-frame {
+  padding-inline: var(--slide-surface-padding-inline);
+  padding-block-start: var(--slide-surface-padding-block-start);
+  padding-block-end: var(--slide-surface-padding-block-end);
+}
+
+.slide-badge {
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+  align-items: center;
+  border: var(--slide-badge-border);
+  border-radius: var(--slide-badge-radius);
+  background: var(--slide-badge-bg);
+  color: var(--slide-badge-color);
+  padding: var(--slide-badge-padding-y) var(--slide-badge-padding-x);
+  font-size: var(--slide-badge-font-size);
+  line-height: var(--slide-badge-line-height);
+  letter-spacing: var(--slide-badge-letter-spacing);
+  font-weight: var(--slide-badge-font-weight);
+  vertical-align: baseline;
+  white-space: nowrap;
+}
+
+.code-heavy pre {
+  --slide-pre-font-size: 1.06rem;
+}
+
+.compact-copy {
+  --slide-font-size-body: clamp(1.15rem, 1.35vw, 1.45rem);
+  --slide-line-height-body: 1.46;
+  --slide-p-margin: 0.35rem 0 0.7rem;
+  --slide-p-font-size: clamp(1.15rem, 1.35vw, 1.45rem);
+  --slide-p-line-height: 1.46;
+  --slide-li-font-size: clamp(1.15rem, 1.35vw, 1.45rem);
+  --slide-li-line-height: 1.46;
+  --slide-badge-font-size: clamp(1.15rem, 1.35vw, 1.45rem);
+  --slide-badge-line-height: 1.46;
+}
+
+.compact-code {
+  --slide-pre-font-size: 1rem;
+  --slide-pre-padding: 0.75rem 0.875rem;
+  --slide-inline-code-font-size: 0.9em;
+  --slide-code-line-min-height: 1.28em;
+}
+
+.display-headline {
+  --slide-h1-size: clamp(3.8rem, 7.2vw, 7.6rem);
+  --slide-h1-line-height: 0.98;
+  --slide-h1-letter-spacing: -0.045em;
+}
+
+.course-cover {
+  --cc-accent: #22c55e;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #1c1c1c;
+  color: #ededed;
+}
+
+.course-cover[data-tone="light"] {
+  background: #f8fafc;
+  color: #0f172a;
+}
+
+.course-cover::before {
+  display: none !important;
+}
+
+.course-cover .lesson-number {
+  position: absolute;
+  top: -0.1em;
+  right: 0.05em;
+  z-index: 0;
+  pointer-events: none;
+  font-size: 18rem;
+  font-weight: 900;
+  line-height: 1;
+  letter-spacing: -0.05em;
+  color: var(--cc-accent);
+  opacity: 0.06;
+}
+
+.course-cover[data-tone="light"] .lesson-number {
+  opacity: 0.13;
+}
+
+.course-cover .cover-header {
+  position: relative;
+  z-index: 3;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 32px 40px;
+}
+
+.course-cover .progress-badge {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  padding: 8px 16px;
+  border-radius: 9999px;
+  border: 1px solid color-mix(in srgb, var(--cc-accent) 30%, #333 70%);
+  background: rgba(37, 37, 37, 0.6);
+  font-family: var(--font-mono);
+}
+
+.course-cover[data-tone="light"] .progress-badge {
+  border: 1px solid color-mix(in srgb, var(--cc-accent) 18%, #cbd5e1 82%);
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.course-cover .badge-current {
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--cc-accent);
+}
+
+.course-cover .badge-divider,
+.course-cover .badge-total {
+  color: #999;
+  font-size: 1rem;
+}
+
+.course-cover[data-tone="light"] .badge-divider,
+.course-cover[data-tone="light"] .badge-total {
+  color: #64748b;
+}
+
+.course-cover .cover-content {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0 40px;
+}
+
+.course-cover h1 {
+  margin: 0 0 1rem;
+  color: #ededed;
+  font-size: clamp(3.35rem, 5.7vw, 5.45rem);
+  line-height: 1.08;
+  letter-spacing: -0.03em;
+  font-weight: 700;
+}
+
+.course-cover[data-tone="light"] h1 {
+  color: #0f172a;
+}
+
+.course-cover .cover-subtitle {
+  max-width: 600px;
+  margin: 0;
+  color: #d4d4d4;
+  font-size: clamp(1.38rem, 2vw, 1.72rem);
+  line-height: 1.5;
+  opacity: 0.8;
+}
+
+.course-cover[data-tone="light"] .cover-subtitle {
+  color: #334155;
+  opacity: 0.92;
+}
+
+.course-cover .cover-footer {
+  position: relative;
+  z-index: 3;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 32px 40px;
+}
+
+.course-cover .series-name {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 16px;
+  border-radius: 9999px;
+  border: 1px solid #333;
+  background: rgba(37, 37, 37, 0.6);
+  color: var(--cc-accent);
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.course-cover[data-tone="light"] .series-name {
+  border: 1px solid color-mix(in srgb, var(--cc-accent) 18%, #cbd5e1 82%);
+  background: rgba(255, 255, 255, 0.72);
+  color: color-mix(in srgb, var(--cc-accent) 72%, #14532d 28%);
+}
+
+.course-cover .spacer {
+  flex: 1;
+}
+
+.course-cover .author-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.course-cover .author-label {
+  color: #999;
+  font-size: 0.82rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.course-cover[data-tone="light"] .author-label {
+  color: #64748b;
+}
+
+.course-cover .author-name {
+  color: #d4d4d4;
+  font-size: 1.08rem;
+  font-weight: 500;
+}
+
+.course-cover[data-tone="light"] .author-name {
+  color: #0f172a;
+}

package/src/theme/index.css

@@ -0,0 +1,11 @@
+@import "tailwindcss";
+@import "./tokens.css";
+@import "./base.css";
+@import "./prose.css";
+@import "./components.css";
+@import "./mark.css";
+@import "./layouts.css";
+@import "./transitions.css";
+@import "./print.css";
+
+@source "../";

package/src/theme/layouts/center.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+export function CenterLayout({ children }: { children: ReactNode }) {
+  return (
+    <section className="slide-layout-center grid size-full place-content-center text-center">
+      <div className="slide-layout-center-content mx-auto w-full max-w-[1180px]">{children}</div>
+    </section>
+  );
+}

package/src/theme/layouts/cover.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+export function CoverLayout({ children }: { children: ReactNode }) {
+  return (
+    <section className="slide-layout-cover grid size-full place-content-center">
+      <div className="slide-layout-cover-content mx-auto w-full max-w-[1480px]">{children}</div>
+    </section>
+  );
+}

package/src/theme/layouts/default.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+
+export function DefaultLayout({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

package/src/theme/layouts/defaultLayouts.ts

@@ -0,0 +1,20 @@
+import { CenterLayout } from "./center";
+import { CoverLayout } from "./cover";
+import { DefaultLayout } from "./default";
+import { ImageRightLayout } from "./image-right";
+import { ImmersiveLayout } from "./immersive";
+import { SectionLayout } from "./section";
+import { StatementLayout } from "./statement";
+import { TwoColsLayout } from "./two-cols";
+import type { LayoutRegistry } from "./types";
+
+export const defaultLayouts: LayoutRegistry = {
+  default: DefaultLayout,
+  center: CenterLayout,
+  cover: CoverLayout,
+  section: SectionLayout,
+  immersive: ImmersiveLayout,
+  "two-cols": TwoColsLayout,
+  "image-right": ImageRightLayout,
+  statement: StatementLayout,
+};

package/src/theme/layouts/helpers.tsx

@@ -0,0 +1,12 @@
+import { Children, isValidElement, type ReactNode } from "react";
+
+export function splitByFirstHr(children: ReactNode): [ReactNode, ReactNode | null] {
+  const nodes = Children.toArray(children);
+  const index = nodes.findIndex((node) => isValidElement(node) && node.type === "hr");
+
+  if (index < 0) return [children, null];
+
+  const left = nodes.slice(0, index);
+  const right = nodes.slice(index + 1);
+  return [left, right.length > 0 ? right : null];
+}

package/src/theme/layouts/image-right.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { splitByFirstHr } from "./helpers";
+
+export function ImageRightLayout({ children }: { children: ReactNode }) {
+  const [left, right] = splitByFirstHr(children);
+
+  if (!right) {
+    return (
+      <section className="slide-layout-image-right grid size-full place-content-start">
+        <div className="slide-layout-image-right-pane min-w-0">{left}</div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="slide-layout-image-right grid size-full grid-cols-[1.2fr_0.8fr] items-center gap-12">
+      <div className="slide-layout-image-right-pane min-w-0">{left}</div>
+      <div className="slide-layout-image-right-pane min-w-0">{right}</div>
+    </section>
+  );
+}

package/src/theme/layouts/immersive.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+export function ImmersiveLayout({ children }: { children: ReactNode }) {
+  return (
+    <section className="slide-layout-immersive relative size-full overflow-hidden">
+      {children}
+    </section>
+  );
+}

package/src/theme/layouts/resolveLayout.ts

@@ -0,0 +1,9 @@
+import type { LayoutName } from "@slidev-react/core/slides/layout";
+import { defaultLayouts } from "./defaultLayouts";
+import type { LayoutRegistry } from "./types";
+
+export function resolveLayout(layout: LayoutName | undefined, layouts?: LayoutRegistry) {
+  const registry = layouts ?? defaultLayouts;
+
+  return registry[layout ?? "default"] ?? registry.default ?? defaultLayouts.default!;
+}

package/src/theme/layouts/section.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+export function SectionLayout({ children }: { children: ReactNode }) {
+  return (
+    <section className="slide-layout-section grid size-full place-content-center text-center">
+      <div className="slide-layout-section-content mx-auto w-full max-w-[1320px]">{children}</div>
+    </section>
+  );
+}

package/src/theme/layouts/statement.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+export function StatementLayout({ children }: { children: ReactNode }) {
+  return (
+    <section className="slide-layout-statement grid size-full place-content-center text-center">
+      <div className="slide-layout-statement-content mx-auto w-full max-w-[1240px]">{children}</div>
+    </section>
+  );
+}

package/src/theme/layouts/two-cols.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { splitByFirstHr } from "./helpers";
+
+export function TwoColsLayout({ children }: { children: ReactNode }) {
+  const [left, right] = splitByFirstHr(children);
+
+  if (!right) {
+    return (
+      <section className="slide-layout-two-cols grid size-full place-content-start">
+        <div className="slide-layout-two-cols-pane min-w-0">{left}</div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="slide-layout-two-cols grid size-full grid-cols-2 items-start gap-12">
+      <div className="slide-layout-two-cols-pane min-w-0">{left}</div>
+      <div className="slide-layout-two-cols-pane min-w-0">{right}</div>
+    </section>
+  );
+}

package/src/theme/layouts/types.ts

@@ -0,0 +1 @@
+export type { LayoutComponent, LayoutRegistry } from "@slidev-react/core/theme";

package/src/theme/layouts.css

@@ -0,0 +1,133 @@
+.slide-layout-cover {
+  --slide-h1-margin: 0 0 1rem;
+  --slide-h1-size: clamp(3.4rem, 7vw, 7.2rem);
+  --slide-h1-line-height: 1;
+  --slide-h1-letter-spacing: -0.04em;
+  --slide-h2-margin: 0.5rem 0 0.85rem;
+  --slide-h2-size: clamp(1.35rem, 2.3vw, 2.35rem);
+  --slide-h2-color: #334155;
+}
+
+:root[data-slide-viewport-orientation="portrait"] .slide-layout-cover {
+  --slide-h1-size: clamp(3.7rem, 7.15vw, 6.5rem);
+  --slide-h2-size: clamp(1.55rem, 2.7vw, 2.62rem);
+}
+
+:root[data-slide-viewport-orientation="portrait"] .slide-layout-cover-content {
+  max-width: 62rem;
+}
+
+.slide-layout-center {
+  --slide-p-margin: 0.55rem 0 0.75rem;
+}
+
+:root[data-slide-viewport-orientation="portrait"] .slide-layout-center-content {
+  max-width: 54rem;
+}
+
+.slide-layout-section {
+  --slide-h1-margin: 0 0 0.6rem;
+  --slide-h1-size: clamp(3rem, 6vw, 6rem);
+  --slide-h1-line-height: 1.03;
+  --slide-h1-letter-spacing: -0.035em;
+  --slide-h2-size: clamp(1.1rem, 1.8vw, 1.8rem);
+  --slide-h2-color: #475569;
+  --slide-color-body: #475569;
+  --slide-font-size-body: clamp(1.1rem, 1.8vw, 1.8rem);
+  --slide-p-color: #475569;
+  --slide-p-font-size: clamp(1.1rem, 1.8vw, 1.8rem);
+  --slide-p-line-height: 1.48;
+  --slide-li-color: #475569;
+  --slide-li-font-size: clamp(1.1rem, 1.8vw, 1.8rem);
+  --slide-li-line-height: 1.48;
+  --slide-badge-font-size: clamp(1.1rem, 1.8vw, 1.8rem);
+  --slide-badge-line-height: 1.48;
+}
+
+:root[data-slide-viewport-orientation="portrait"] .slide-layout-section {
+  --slide-h1-size: clamp(3.35rem, 6.35vw, 6.2rem);
+  --slide-h2-size: clamp(1.32rem, 2.22vw, 2.08rem);
+  --slide-font-size-body: clamp(1.26rem, 2.02vw, 1.96rem);
+  --slide-p-font-size: clamp(1.26rem, 2.02vw, 1.96rem);
+  --slide-li-font-size: clamp(1.26rem, 2.02vw, 1.96rem);
+  --slide-badge-font-size: clamp(1.26rem, 2.02vw, 1.96rem);
+}
+
+:root[data-slide-viewport-orientation="portrait"] .slide-layout-section-content {
+  max-width: 56rem;
+}
+
+.slide-layout-statement {
+  --slide-h1-margin: 0;
+  --slide-h1-size: clamp(2.2rem, 4.4vw, 4.8rem);
+  --slide-h1-line-height: 1.14;
+  --slide-h1-letter-spacing: -0.03em;
+  --slide-h1-weight: 760;
+  --slide-h2-margin: 0;
+  --slide-h2-size: clamp(2.2rem, 4.4vw, 4.8rem);
+  --slide-h2-line-height: 1.14;
+  --slide-h2-letter-spacing: -0.03em;
+  --slide-h2-weight: 760;
+  --slide-h2-color: var(--slide-color-heading);
+  --slide-p-margin: 0.9rem 0 0;
+  --slide-color-body: #475569;
+  --slide-font-size-body: clamp(1rem, 1.45vw, 1.55rem);
+  --slide-p-color: #475569;
+  --slide-p-font-size: clamp(1rem, 1.45vw, 1.55rem);
+  --slide-p-line-height: 1.42;
+  --slide-p-letter-spacing: -0.01em;
+  --slide-li-color: #475569;
+  --slide-li-font-size: clamp(1rem, 1.45vw, 1.55rem);
+  --slide-li-line-height: 1.42;
+  --slide-li-letter-spacing: -0.01em;
+  --slide-badge-font-size: clamp(1rem, 1.45vw, 1.55rem);
+  --slide-badge-line-height: 1.42;
+  --slide-blockquote-font-size: clamp(2.2rem, 4.4vw, 4.8rem);
+  --slide-blockquote-line-height: 1.14;
+  --slide-blockquote-letter-spacing: -0.03em;
+  --slide-blockquote-font-weight: 760;
+  --slide-blockquote-color: var(--slide-color-heading);
+}
+
+:root[data-slide-viewport-orientation="portrait"] .slide-layout-statement {
+  --slide-h1-size: clamp(2.55rem, 4.85vw, 5.2rem);
+  --slide-h2-size: clamp(2.55rem, 4.85vw, 5.2rem);
+  --slide-font-size-body: clamp(1.18rem, 1.75vw, 1.88rem);
+  --slide-p-font-size: clamp(1.18rem, 1.75vw, 1.88rem);
+  --slide-li-font-size: clamp(1.18rem, 1.75vw, 1.88rem);
+  --slide-badge-font-size: clamp(1.18rem, 1.75vw, 1.88rem);
+}
+
+:root[data-slide-viewport-orientation="portrait"] .slide-layout-statement-content {
+  max-width: 52rem;
+}
+
+.slide-layout-two-cols > div,
+.slide-layout-image-right > div {
+  min-width: 0;
+}
+
+:root[data-slide-viewport-orientation="portrait"] .slide-layout-two-cols {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 2rem;
+  align-content: start;
+}
+
+:root[data-slide-viewport-orientation="portrait"] .slide-layout-two-cols-pane,
+:root[data-slide-viewport-orientation="portrait"] .slide-layout-image-right-pane {
+  width: 100%;
+  max-width: 54rem;
+  margin-inline: auto;
+}
+
+:root[data-slide-viewport-orientation="portrait"] .slide-layout-image-right {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 2rem;
+  align-content: start;
+}
+
+.slide-layout-image-right img {
+  width: 100%;
+  max-height: 640px;
+  object-fit: contain;
+}