@slidev-react/client 0.2.5

package/src/theme/prose.css

@@ -0,0 +1,263 @@
+.slide-prose {
+  color: var(--slide-color-body);
+  font-size: var(--slide-font-size-body);
+  line-height: var(--slide-line-height-body);
+}
+
+.slide-prose h1 {
+  margin: var(--slide-h1-margin);
+  padding: var(--slide-h1-padding);
+  color: var(--slide-color-heading);
+  font-size: var(--slide-h1-size);
+  line-height: var(--slide-h1-line-height);
+  letter-spacing: var(--slide-h1-letter-spacing);
+  font-weight: var(--slide-h1-weight);
+}
+
+.slide-prose h2 {
+  margin: var(--slide-h2-margin);
+  padding: var(--slide-h2-padding);
+  color: var(--slide-h2-color);
+  font-size: var(--slide-h2-size);
+  line-height: var(--slide-h2-line-height);
+  letter-spacing: var(--slide-h2-letter-spacing);
+  font-weight: var(--slide-h2-weight);
+}
+
+.slide-prose h3 {
+  margin: var(--slide-h3-margin);
+  padding: var(--slide-h3-padding);
+  color: var(--slide-color-heading);
+  font-size: var(--slide-h3-size);
+  line-height: var(--slide-h3-line-height);
+  font-weight: var(--slide-h3-weight);
+}
+
+.slide-prose p {
+  margin: var(--slide-p-margin);
+  color: var(--slide-p-color);
+  font-size: var(--slide-p-font-size);
+  line-height: var(--slide-p-line-height);
+  letter-spacing: var(--slide-p-letter-spacing);
+  font-weight: var(--slide-p-font-weight);
+}
+
+.slide-prose ul,
+.slide-prose ol {
+  margin: var(--slide-list-margin);
+  padding: var(--slide-list-padding);
+}
+
+.slide-prose li {
+  position: relative;
+  margin: var(--slide-list-item-margin);
+  padding-left: var(--slide-list-item-padding-left);
+  color: var(--slide-li-color);
+  font-size: var(--slide-li-font-size);
+  line-height: var(--slide-li-line-height);
+  letter-spacing: var(--slide-li-letter-spacing);
+  font-weight: var(--slide-li-font-weight);
+}
+
+.slide-prose ul {
+  list-style: none;
+}
+
+.slide-prose ul > li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: var(--slide-list-marker-top);
+  width: var(--slide-list-bullet-width);
+  height: var(--slide-list-bullet-height);
+  border-radius: var(--slide-list-bullet-radius);
+  background: var(--slide-list-bullet-bg);
+  border: var(--slide-list-bullet-border);
+  box-shadow: var(--slide-list-bullet-shadow);
+  transform: var(--slide-list-bullet-transform);
+}
+
+.slide-prose ol {
+  counter-reset: slide-ol;
+}
+
+.slide-prose ol > li {
+  list-style: none;
+  padding-left: var(--slide-ol-item-padding-left);
+}
+
+.slide-prose ol > li::before {
+  counter-increment: slide-ol;
+  content: counter(slide-ol);
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  display: grid;
+  place-items: center;
+  min-width: var(--slide-ol-badge-min-width);
+  height: var(--slide-ol-badge-height);
+  padding: 0 var(--slide-ol-badge-padding-x);
+  border-radius: 9999px;
+  background: var(--slide-ol-badge-bg);
+  color: var(--slide-ol-badge-color);
+  font-size: var(--slide-ol-badge-font-size);
+  font-weight: var(--slide-ol-badge-font-weight);
+  line-height: 1;
+}
+
+.slide-prose a {
+  color: var(--slide-link-color);
+  font-weight: var(--slide-link-font-weight);
+  text-decoration: underline;
+  text-decoration-style: var(--slide-link-decoration-style);
+  text-decoration-thickness: 0.11em;
+  text-decoration-color: var(--slide-link-decoration-color);
+  text-underline-offset: 0.2em;
+  border-radius: 0.2em;
+  transition:
+    color 120ms ease,
+    text-decoration-color 120ms ease,
+    background-color 120ms ease;
+}
+
+.slide-prose a:hover {
+  color: var(--slide-link-color-hover);
+  text-decoration-color: var(--slide-link-decoration-color-hover);
+  background: var(--slide-link-hover-bg);
+}
+
+.slide-prose a:focus-visible {
+  outline: 2px solid rgba(37, 99, 235, 0.55);
+  outline-offset: 2px;
+}
+
+.slide-prose strong {
+  font-weight: var(--slide-strong-weight);
+}
+
+.slide-prose blockquote {
+  margin: var(--slide-blockquote-margin);
+  padding: var(--slide-blockquote-padding);
+  border-left: 4px solid var(--slide-blockquote-border-color);
+  background: var(--slide-blockquote-bg);
+  color: var(--slide-blockquote-color);
+}
+
+.slide-prose blockquote p {
+  color: inherit;
+  font-size: var(--slide-blockquote-font-size);
+  line-height: var(--slide-blockquote-line-height);
+  letter-spacing: var(--slide-blockquote-letter-spacing);
+  font-weight: var(--slide-blockquote-font-weight);
+}
+
+.slide-prose table {
+  width: 100%;
+  margin: var(--slide-table-margin);
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: var(--slide-table-font-size);
+  border: 1px solid var(--slide-table-border-color);
+  border-radius: var(--slide-table-radius);
+  overflow: hidden;
+  box-shadow: var(--slide-table-shadow);
+}
+
+.slide-prose th,
+.slide-prose td {
+  padding: var(--slide-table-cell-padding);
+  text-align: left;
+  vertical-align: top;
+}
+
+.slide-prose th {
+  background: var(--slide-table-head-bg);
+  color: var(--slide-table-head-color);
+  font-size: var(--slide-table-head-font-size);
+  font-weight: var(--slide-table-head-weight);
+  line-height: var(--slide-table-head-line-height);
+}
+
+.slide-prose td {
+  font-size: var(--slide-table-body-font-size);
+  line-height: var(--slide-table-body-line-height);
+}
+
+.slide-prose th + th,
+.slide-prose td + td {
+  border-left: 1px solid var(--slide-table-divider-color);
+}
+
+.slide-prose tbody tr + tr td {
+  border-top: 1px solid var(--slide-table-divider-color);
+}
+
+.slide-prose tbody tr:nth-child(odd) td {
+  background: var(--slide-table-row-odd-bg);
+}
+
+.slide-prose tbody tr:hover td {
+  background: var(--slide-table-row-hover-bg);
+}
+
+.slide-prose kbd {
+  display: inline-block;
+  border: 1px solid var(--slide-kbd-border-color);
+  border-bottom-width: 2px;
+  border-radius: var(--slide-kbd-radius);
+  padding: var(--slide-kbd-padding);
+  background: var(--slide-kbd-bg);
+  font-size: var(--slide-kbd-font-size);
+  line-height: 1.4;
+}
+
+.slide-prose hr {
+  margin: var(--slide-hr-margin);
+  border: 0;
+  border-top: 1px solid var(--slide-hr-color);
+}
+
+.slide-prose img {
+  border-radius: var(--slide-img-radius);
+}
+
+.slide-prose pre {
+  margin: var(--slide-pre-margin);
+  padding: var(--slide-pre-padding);
+  border-radius: var(--slide-pre-radius);
+  overflow-x: auto;
+  font-size: var(--slide-pre-font-size);
+  border: 1px solid var(--slide-pre-border-color);
+  box-shadow: var(--slide-pre-shadow);
+}
+
+.slide-prose code {
+  font-family: var(--font-mono);
+}
+
+.slide-prose :not(pre) > code {
+  border-radius: var(--slide-inline-code-radius);
+  padding: var(--slide-inline-code-padding);
+  background: var(--slide-inline-code-bg);
+  font-size: var(--slide-inline-code-font-size);
+}
+
+.slide-prose pre.shiki {
+  margin: var(--slide-pre-margin);
+  border-radius: var(--slide-pre-radius);
+}
+
+.slide-prose pre.shiki .line {
+  min-height: var(--slide-code-line-min-height);
+}
+
+.slide-prose .magic-move-demo pre.shiki-magic-move-container.magic-move-demo-pre {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  overflow: visible;
+  background: transparent;
+  box-shadow: none;
+}

package/src/theme/registry.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+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", () => {
+    const theme = resolveSlideTheme();
+
+    expect(theme.definition.id).toBe("default");
+  });
+
+  it("provides default layouts and base mdx components", () => {
+    const theme = resolveSlideTheme();
+
+    expect(theme.layouts.default).toBe(defaultLayouts.default);
+    expect(theme.layouts.cover).toBe(defaultLayouts.cover);
+    expect(theme.mdxComponents.Badge).toBe(Badge);
+    expect(theme.mdxComponents.Callout).toBeDefined();
+  });
+});

package/src/theme/registry.ts

@@ -0,0 +1,40 @@
+import { mdxComponents as baseMdxComponents } from "../ui/mdx";
+import { defaultLayouts } from "./layouts/defaultLayouts";
+import type {
+  ResolvedSlideTheme,
+  SlideThemeDefinition,
+  ThemeMDXComponents,
+} from "./types";
+
+// @ts-expect-error -- virtual module generated by slidev-react:themes Vite plugin
+import activeTheme from "virtual:slidev-react/active-theme";
+
+const defaultTheme: SlideThemeDefinition = {
+  id: "default",
+  label: "Default",
+  colorScheme: "light",
+  rootAttributes: {
+    "data-slide-theme": "default",
+  },
+};
+
+export function resolveSlideTheme(): ResolvedSlideTheme {
+  const definition: SlideThemeDefinition = activeTheme ?? defaultTheme;
+
+  return {
+    definition,
+    rootAttributes: definition.rootAttributes ?? {
+      "data-slide-theme": definition.id,
+    },
+    rootClassName: definition.rootClassName,
+    provider: definition.provider,
+    layouts: {
+      ...defaultLayouts,
+      ...definition.layouts,
+    },
+    mdxComponents: {
+      ...baseMdxComponents,
+      ...definition.mdxComponents,
+    },
+  };
+}

package/src/theme/tokens.css

@@ -0,0 +1,148 @@
+:root {
+  color-scheme: light;
+  --font-sans:
+    "Inter", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  --font-mono:
+    "JetBrains Mono", "SFMono-Regular", ui-monospace, "Cascadia Mono", "Fira Code", monospace;
+  --slide-color-body: #0f172a;
+  --slide-color-heading: #0f172a;
+  --slide-color-muted: #475569;
+  --slide-link-color: currentColor;
+  --slide-link-color-hover: currentColor;
+  --slide-link-font-weight: inherit;
+  --slide-link-decoration-style: dashed;
+  --slide-link-decoration-color: rgba(15, 23, 42, 0.32);
+  --slide-link-decoration-color-hover: rgba(15, 23, 42, 0.58);
+  --slide-link-hover-bg: transparent;
+  --slide-font-size-body: clamp(1.4rem, 1.72vw, 1.92rem);
+  --slide-line-height-body: 1.64;
+  --slide-h1-margin: 0 0 1.05rem;
+  --slide-h1-padding: 0.12em 0 0.18em;
+  --slide-h1-size: clamp(3rem, 5.9vw, 5.2rem);
+  --slide-h1-line-height: 1.04;
+  --slide-h1-letter-spacing: -0.03em;
+  --slide-h1-weight: 850;
+  --slide-h2-margin: 0 0 0.85rem;
+  --slide-h2-padding: 0.1em 0 0.15em;
+  --slide-h2-size: clamp(2.2rem, 3.9vw, 3.7rem);
+  --slide-h2-line-height: 1.1;
+  --slide-h2-letter-spacing: -0.02em;
+  --slide-h2-weight: 800;
+  --slide-h2-color: var(--slide-color-heading);
+  --slide-h3-margin: 0 0 0.75rem;
+  --slide-h3-padding: 0.08em 0 0.12em;
+  --slide-h3-size: clamp(1.7rem, 2.6vw, 2.65rem);
+  --slide-h3-line-height: 1.16;
+  --slide-h3-weight: 740;
+  --slide-p-margin: 0.68rem 0 1.12rem;
+  --slide-p-color: var(--slide-color-body);
+  --slide-p-font-size: clamp(1.52rem, 1.92vw, 2.08rem);
+  --slide-p-line-height: var(--slide-line-height-body);
+  --slide-p-letter-spacing: 0;
+  --slide-p-font-weight: 400;
+  --slide-list-margin: 0.68rem 0 1.3rem;
+  --slide-list-padding: 0.15rem 0 0.15rem 0;
+  --slide-list-item-margin: 0.42rem 0;
+  --slide-list-item-padding-left: 1.55rem;
+  --slide-list-marker-top: calc(var(--slide-li-line-height) * 0.5em);
+  --slide-li-color: var(--slide-p-color);
+  --slide-li-font-size: var(--slide-p-font-size);
+  --slide-li-line-height: var(--slide-p-line-height);
+  --slide-li-letter-spacing: var(--slide-p-letter-spacing);
+  --slide-li-font-weight: var(--slide-p-font-weight);
+  --slide-list-bullet-width: 0.82rem;
+  --slide-list-bullet-height: 0.82rem;
+  --slide-list-bullet-radius: 0.2rem;
+  --slide-list-bullet-bg: linear-gradient(135deg, #86efac 0%, #22c55e 55%, #15803d 100%);
+  --slide-list-bullet-border: 1px solid rgba(255, 255, 255, 0.72);
+  --slide-list-bullet-shadow: 0 0 0 2px rgba(34, 197, 94, 0.14), 0 4px 10px rgba(22, 163, 74, 0.2);
+  --slide-list-bullet-transform: translateY(-50%) rotate(45deg);
+  --slide-ol-badge-min-width: 1.92rem;
+  --slide-ol-badge-height: 1.92rem;
+  --slide-ol-badge-padding-x: 0.4rem;
+  --slide-ol-item-padding-left: 2.72rem;
+  --slide-ol-badge-bg: rgba(34, 197, 94, 0.12);
+  --slide-ol-badge-color: #15803d;
+  --slide-ol-badge-font-size: 0.8em;
+  --slide-ol-badge-font-weight: 700;
+  --slide-strong-weight: 760;
+  --slide-blockquote-margin: 1.05rem 0;
+  --slide-blockquote-padding: 0.62rem 1rem;
+  --slide-blockquote-border-color: #22c55e;
+  --slide-blockquote-bg: #f0fdf4;
+  --slide-blockquote-color: var(--slide-color-body);
+  --slide-blockquote-font-size: inherit;
+  --slide-blockquote-line-height: inherit;
+  --slide-blockquote-letter-spacing: inherit;
+  --slide-blockquote-font-weight: inherit;
+  --slide-table-margin: 1.15rem 0 1.35rem;
+  --slide-table-font-size: 0.96em;
+  --slide-table-head-font-size: 1.02em;
+  --slide-table-head-line-height: 1.35;
+  --slide-table-radius: 10px;
+  --slide-table-border-color: rgba(15, 23, 42, 0.11);
+  --slide-table-shadow: none;
+  --slide-table-cell-padding: 0.66rem 0.82rem;
+  --slide-table-head-bg: rgba(15, 23, 42, 0.03);
+  --slide-table-head-color: var(--slide-color-body);
+  --slide-table-head-weight: 680;
+  --slide-table-body-font-size: 1em;
+  --slide-table-body-line-height: 1.5;
+  --slide-table-divider-color: rgba(15, 23, 42, 0.09);
+  --slide-table-row-odd-bg: transparent;
+  --slide-table-row-hover-bg: rgba(15, 23, 42, 0.025);
+  --slide-kbd-radius: 6px;
+  --slide-kbd-padding: 0.05rem 0.38rem;
+  --slide-kbd-font-size: 0.86em;
+  --slide-kbd-border-color: rgba(15, 23, 42, 0.2);
+  --slide-kbd-bg: #fff;
+  --slide-hr-margin: 1.25rem 0;
+  --slide-hr-color: rgba(15, 23, 42, 0.12);
+  --slide-img-radius: 0.75rem;
+  --slide-pre-margin: 0.95rem 0 1.2rem;
+  --slide-pre-padding: 1rem 1.1rem;
+  --slide-pre-radius: 0.75rem;
+  --slide-pre-font-size: 1.14rem;
+  --slide-pre-border-color: rgba(15, 23, 42, 0.08);
+  --slide-pre-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  --slide-inline-code-radius: 6px;
+  --slide-inline-code-padding: 0.1rem 0.35rem;
+  --slide-inline-code-bg: rgba(15, 23, 42, 0.08);
+  --slide-inline-code-font-size: 0.98em;
+  --slide-code-line-min-height: 1.35em;
+  --slide-badge-font-size: var(--slide-p-font-size);
+  --slide-badge-line-height: var(--slide-p-line-height);
+  --slide-badge-font-weight: 650;
+  --slide-badge-letter-spacing: 0;
+  --slide-badge-padding-x: 0.5rem;
+  --slide-badge-padding-y: 0.12rem;
+  --slide-badge-radius: 9999px;
+  --slide-badge-bg: #dcfce7;
+  --slide-badge-color: #166534;
+  --slide-badge-border: 1px solid rgba(34, 197, 94, 0.16);
+  --slide-mark-radius: 0.2em;
+  --slide-surface-padding-inline: 4.5rem;
+  --slide-surface-padding-block-start: 3.5rem;
+  --slide-surface-padding-block-end: 3.5rem;
+}
+
+:root[data-slide-viewport-orientation="portrait"] {
+  --slide-font-size-body: clamp(1.58rem, 2.28vw, 2.18rem);
+  --slide-line-height-body: 1.56;
+  --slide-h1-size: clamp(3.25rem, 6.1vw, 5.75rem);
+  --slide-h2-size: clamp(2.35rem, 4.2vw, 4rem);
+  --slide-h3-size: clamp(1.82rem, 3.05vw, 2.9rem);
+  --slide-p-margin: 0.56rem 0 0.96rem;
+  --slide-p-font-size: clamp(1.68rem, 2.42vw, 2.32rem);
+  --slide-p-line-height: 1.56;
+  --slide-list-margin: 0.56rem 0 1.08rem;
+  --slide-list-item-margin: 0.3rem 0;
+  --slide-li-font-size: var(--slide-p-font-size);
+  --slide-li-line-height: var(--slide-p-line-height);
+  --slide-blockquote-padding: 0.72rem 1.08rem;
+  --slide-pre-font-size: 1.2rem;
+  --slide-badge-font-size: var(--slide-p-font-size);
+  --slide-surface-padding-inline: 4rem;
+  --slide-surface-padding-block-start: 4.75rem;
+  --slide-surface-padding-block-end: 5.25rem;
+}

package/src/theme/transitions.css

@@ -0,0 +1,141 @@
+.slide-transition {
+  min-height: 100%;
+  animation-duration: 360ms;
+  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+  animation-fill-mode: both;
+  will-change: opacity, transform;
+}
+
+.slide-transition--fade {
+  animation-name: slide-transition-fade;
+}
+
+.slide-transition--slide-left {
+  animation-name: slide-transition-slide-left;
+}
+
+.slide-transition--slide-up {
+  animation-name: slide-transition-slide-up;
+}
+
+.slide-transition--zoom {
+  animation-name: slide-transition-zoom;
+}
+
+@keyframes slide-transition-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-transition-slide-left {
+  from {
+    opacity: 0;
+    transform: translateX(48px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-transition-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(42px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-transition-zoom {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slide-reveal-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-reveal-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-reveal-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.slide-reveal {
+  animation-duration: 220ms;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: opacity, transform;
+}
+
+.slide-reveal--fade {
+  animation-name: slide-reveal-fade;
+}
+
+.slide-reveal--fade-up {
+  animation-name: slide-reveal-fade-up;
+}
+
+.slide-reveal--scale-in {
+  animation-name: slide-reveal-scale-in;
+}
+
+.slide-reveal--reserve {
+  animation: none;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .slide-mark--animate .slide-mark-overlay,
+  .slide-mark--animate .slide-mark-overlay::before,
+  .slide-mark--animate .slide-mark-overlay::after {
+    animation: none;
+  }
+
+  .slide-reveal {
+    animation: none;
+  }
+}

package/src/theme/types.ts

@@ -0,0 +1,9 @@
+export type {
+  LayoutComponent,
+  LayoutRegistry,
+  ThemeProviderComponent,
+  ThemeMDXComponents,
+  SlideThemeDefinition,
+  ResolvedSlideTheme,
+} from "@slidev-react/core/theme";
+export { defineTheme } from "@slidev-react/core/theme";

package/src/theme/useResolvedLayout.ts

@@ -0,0 +1,24 @@
+import { useMemo } from "react";
+import { useSlideAddons } from "../addons/AddonProvider";
+import type { LayoutName } from "@slidev-react/core/slides/layout";
+import { resolveLayout } from "./layouts/resolveLayout";
+import { useSlideTheme } from "./ThemeProvider";
+
+export function useResolvedLayouts() {
+  const theme = useSlideTheme();
+  const addons = useSlideAddons();
+
+  return useMemo(
+    () => ({
+      ...theme.layouts,
+      ...addons.layouts,
+    }),
+    [addons.layouts, theme.layouts],
+  );
+}
+
+export function useResolvedLayout(layout: LayoutName | undefined) {
+  const layouts = useResolvedLayouts();
+
+  return resolveLayout(layout, layouts);
+}

package/src/types/generated-slides.d.ts

@@ -0,0 +1,7 @@
+declare module "@generated/slides" {
+  import type { CompiledSlidesManifest } from "@slidev-react/core/slides/compiled-slides";
+
+  const compiledSlides: CompiledSlidesManifest;
+
+  export default compiledSlides;
+}

package/src/types/mdx-components.ts

@@ -0,0 +1,7 @@
+import { MDXProvider } from '@mdx-js/react'
+import type { ComponentProps } from 'react'
+
+type MDXProviderComponents = ComponentProps<typeof MDXProvider>['components']
+type MDXMergeComponents = Extract<MDXProviderComponents, (...args: never[]) => unknown>
+
+export type MDXComponents = Exclude<MDXProviderComponents, MDXMergeComponents | null | undefined>

package/src/types/plantuml-encoder.d.ts

@@ -0,0 +1,7 @@
+declare module "plantuml-encoder" {
+  const plantumlEncoder: {
+    encode(source: string): string;
+  };
+
+  export default plantumlEncoder;
+}

package/src/ui/diagrams/PlantUmlDiagram.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import plantumlEncoder from "plantuml-encoder";
+
+const DEFAULT_SERVER = "https://www.plantuml.com/plantuml/svg/";
+
+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 "";
+}
+
+export function PlantUmlDiagram({
+  code,
+  children,
+  server = DEFAULT_SERVER,
+}: {
+  code?: string;
+  children?: ReactNode;
+  server?: string;
+}) {
+  const encoded = plantumlEncoder.encode(normalizeDiagramCode(code, children));
+  const src = `${server}${encoded}`;
+
+  return (
+    <div className="my-3 overflow-x-auto rounded-xl border border-slate-300 bg-white p-3">
+      <img src={src} alt="PlantUML diagram" className="max-w-full" loading="lazy" />
+    </div>
+  );
+}