@draftbase/renderer 0.4.3 → 0.5.1

package/dist/MDXContent.d.ts

@@ -19,7 +19,7 @@ export interface MDXContentProps {
     /** Custom components available by name inside the MDX source, and/or overrides for standard markdown elements —
      * required on non-DOM renderers such as React Native, which have no intrinsic `div`/`p`/`a` tags. */
     components?: MDXComponents;
-    /** Skip the default `db-content` styling class. */
+    /** Skip the default `db-content` styling class and its inlined styles. */
     unstyled?: boolean;
     /** Extra class name(s) merged onto the wrapper element. */
     className?: string;
@@ -29,9 +29,13 @@ export interface MDXContentProps {
     /** Element/component used to render the fallback plain-text output when `source` fails to
      * compile as MDX. Defaults to `"p"`; pass React Native's `Text`. */
     errorTag?: ElementType;
+    /** Called (in addition to `console.error`) when `source` fails to compile, or a component
+     * throws while rendering. Either way the fallback plain-text output still renders instead of
+     * crashing. */
+    onError?: (error: unknown) => void;
 }
 /**
  * Next.js Server Component wrapper around {@link compileMDX}. For non-RSC React, call `compileMDX` directly instead —
  * `await` inside a component body only works as an RSC.
  */
-export declare function MDXContent({ source, components, unstyled, className, wrapperTag, errorTag, }: MDXContentProps): Promise<ReactNode>;
+export declare function MDXContent({ source, components, unstyled, className, wrapperTag, errorTag, onError, }: MDXContentProps): Promise<ReactNode>;

package/dist/MDXContent.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as runtime from "react/jsx-runtime";
 import { compileMDXCore, makeDefaultEntryLink } from "./core.js";
 import { wrapperClassName } from "./wrapperClassName.js";
 import { MDXErrorBoundary } from "./MDXErrorBoundary.js";
+import { CSS_TEXT } from "./cssText.js";
 const defaultComponents = { EntryLink: makeDefaultEntryLink(runtime) };
 /**
  * Compiles raw MDX/markdown into a renderable React component — no DOM assumptions, safe for client effects or RSC.
@@ -15,17 +16,21 @@ export async function compileMDX(source) {
  * Next.js Server Component wrapper around {@link compileMDX}. For non-RSC React, call `compileMDX` directly instead —
  * `await` inside a component body only works as an RSC.
  */
-export async function MDXContent({ source, components, unstyled, className, wrapperTag = "div", errorTag = "p", }) {
+export async function MDXContent({ source, components, unstyled, className, wrapperTag = "div", errorTag = "p", onError, }) {
     const Wrapper = wrapperTag;
     const ErrorTag = errorTag;
     const wrapperClass = wrapperClassName(unstyled, className);
+    // `href` + `precedence` make React DOM treat this as a de-duplicated, hoisted stylesheet
+    // resource (React 19+) instead of a plain inline tag repeated per render.
+    const styles = unstyled ? null : (_jsx("style", { href: "db-content-styles", precedence: "default", children: CSS_TEXT }));
     const compiled = await compileMDX(source);
     if (!compiled.ok) {
         // Source isn't valid MDX/JSX (e.g. stray `<`/`{` in prose) — fail soft instead
         // of crashing the page; render it as plain text so the copy still shows.
         console.error("MDX compile failed, rendering as plain text", compiled.error);
-        return (_jsx(Wrapper, { className: wrapperClass, children: _jsx(ErrorTag, { children: source }) }));
+        onError?.(compiled.error);
+        return (_jsxs(_Fragment, { children: [styles, _jsx(Wrapper, { className: wrapperClass, children: _jsx(ErrorTag, { children: source }) })] }));
     }
     const { Content } = compiled;
-    return (_jsx(Wrapper, { className: wrapperClass, children: _jsx(MDXErrorBoundary, { fallback: _jsx(ErrorTag, { children: source }), children: _jsx(Content, { components: components }) }) }));
+    return (_jsxs(_Fragment, { children: [styles, _jsx(Wrapper, { className: wrapperClass, children: _jsx(MDXErrorBoundary, { fallback: _jsx(ErrorTag, { children: source }), onError: onError, children: _jsx(Content, { components: components }) }) })] }));
 }

package/dist/MDXContent.test.js

@@ -1,18 +1,33 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 import { MDXContent } from "./MDXContent.js";
-// MDXContent is an async Server Component; call it directly (as React's RSC runtime would) and inspect the returned element tree.
+// MDXContent is an async Server Component; call it directly (as React's RSC runtime would) and inspect
+// the returned element tree. It returns a fragment: [inlined <style> | null, the wrapper element].
+function wrapperOf(fragment) {
+    const [, wrapper] = fragment.props.children;
+    return wrapper;
+}
 test("MDXContent wraps compiled MDX in the styled wrapper element", async () => {
-    const element = (await MDXContent({ source: "# Hello" }));
+    const fragment = (await MDXContent({ source: "# Hello" }));
+    const [styles] = fragment.props.children;
+    assert.equal(styles.type, "style");
+    const element = wrapperOf(fragment);
     assert.equal(element.type, "div");
     assert.equal(element.props.className, "db-content");
 });
-test("unstyled drops the db-content class", async () => {
-    const element = (await MDXContent({ source: "# Hello", unstyled: true }));
+test("unstyled drops the db-content class and the inlined styles", async () => {
+    const fragment = (await MDXContent({
+        source: "# Hello",
+        unstyled: true,
+    }));
+    const [styles] = fragment.props.children;
+    assert.equal(styles, null);
+    const element = wrapperOf(fragment);
     assert.equal(element.props.className, undefined);
 });
 test("falls back to plain text when the source fails to compile as MDX", async () => {
-    const element = (await MDXContent({ source: "<broken" }));
+    const fragment = (await MDXContent({ source: "<broken" }));
+    const element = wrapperOf(fragment);
     const fallback = element.props.children;
     assert.equal(fallback.type, "p");
     assert.equal(fallback.props.children, "<broken");

package/dist/MDXErrorBoundary.d.ts

@@ -2,6 +2,7 @@ import { Component, type ReactNode } from "react";
 interface MDXErrorBoundaryProps {
     children: ReactNode;
     fallback: ReactNode;
+    onError?: (error: unknown) => void;
 }
 interface MDXErrorBoundaryState {
     hasError: boolean;

package/dist/MDXErrorBoundary.js

@@ -9,6 +9,7 @@ export class MDXErrorBoundary extends Component {
     }
     componentDidCatch(error) {
         console.error("MDX content failed to render", error);
+        this.props.onError?.(error);
     }
     render() {
         return this.state.hasError ? this.props.fallback : this.props.children;

package/dist/cssText.d.ts

@@ -0,0 +1 @@
+export declare const CSS_TEXT = "/* Slim default typography for Draftbase MDX content.\n   Opt-in: import \"@draftbase/renderer/styles.css\".\n   Disable per-render: <MDXContent unstyled /> or toHtml(source, { unstyled: true }).\n   Theme via custom properties: --db-heading-color, --db-link-color, --db-accent-border,\n   --db-target-bg. Override further: target \".db-content\" with higher-specificity or\n   later-loaded rules. */\n\n.db-content {\n  line-height: 1.6;\n  color: inherit;\n  overflow-wrap: break-word;\n}\n\n.db-content h1,\n.db-content h2,\n.db-content h3,\n.db-content h4,\n.db-content h5,\n.db-content h6 {\n  color: var(--db-heading-color, inherit);\n}\n\n.db-content a {\n  color: var(--db-link-color, inherit);\n}\n\n/* remark-gfm emits the footnotes label as .sr-only; define it so it stays hidden\n   without the consumer needing Tailwind or their own utility. */\n.db-content .sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.db-content > :first-child {\n  margin-top: 0;\n}\n.db-content > :last-child {\n  margin-bottom: 0;\n}\n\n.db-content h1,\n.db-content h2,\n.db-content h3,\n.db-content h4,\n.db-content h5,\n.db-content h6 {\n  font-weight: 600;\n  line-height: 1.25;\n  margin: 1.5em 0 0.5em;\n}\n\n/* Highlights a footnote/citation anchor when the URL hash lands on it, e.g. #fn-1. */\n.db-content :target {\n  background: var(--db-target-bg, rgba(127, 127, 127, 0.15));\n}\n\n.db-content h1 {\n  font-size: 2.25em;\n  font-weight: 700;\n  line-height: 1.2;\n  letter-spacing: -0.025em;\n  margin-top: 1.25em;\n}\n\n.db-content h2 {\n  font-size: 1.5em;\n  line-height: 1.25;\n  letter-spacing: -0.02em;\n  margin-top: 1.75em;\n}\n\n.db-content h3 {\n  font-size: 1.25em;\n  line-height: 1.3;\n}\n\n.db-content h4 {\n  font-size: 1.125em;\n  line-height: 1.35;\n}\n\n.db-content h5 {\n  font-size: 1em;\n  line-height: 1.4;\n}\n\n.db-content h6 {\n  font-size: 0.875em;\n  line-height: 1.4;\n}\n\n@media (max-width: 640px) {\n  .db-content h1 {\n    font-size: 1.875em;\n  }\n  .db-content h2 {\n    font-size: 1.25em;\n  }\n  .db-content h3 {\n    font-size: 1.125em;\n  }\n}\n\n.db-content p,\n.db-content ul,\n.db-content ol,\n.db-content blockquote,\n.db-content pre,\n.db-content table {\n  margin: 0 0 1em;\n}\n\n.db-content ul,\n.db-content ol {\n  padding-left: 1.5em;\n}\n\n.db-content ul {\n  list-style-type: disc;\n}\n\n.db-content ol {\n  list-style-type: decimal;\n}\n\n.db-content ul ul {\n  list-style-type: circle;\n}\n\n.db-content ol ol {\n  list-style-type: lower-alpha;\n}\n\n.db-content ul ul ul,\n.db-content ol ol ol {\n  list-style-type: square;\n}\n\n.db-content li {\n  margin: 0.25em 0;\n}\n.db-content li > ul,\n.db-content li > ol {\n  margin: 0.25em 0 0;\n}\n.db-content li > p {\n  margin: 0;\n}\n\n.db-content ul.contains-task-list {\n  list-style: none;\n  padding-left: 0.25em;\n}\n.db-content li.task-list-item {\n  list-style: none;\n  margin-left: 0;\n}\n.db-content li.task-list-item input[type=\"checkbox\"] {\n  margin-right: 0.5em;\n}\n\n.db-content strong {\n  font-weight: 600;\n}\n.db-content em {\n  font-style: italic;\n}\n.db-content del {\n  text-decoration: line-through;\n  opacity: 0.75;\n}\n\n.db-content blockquote {\n  margin-left: 0;\n  padding-left: 1em;\n  border-left: 3px solid var(--db-accent-border, currentColor);\n  opacity: 0.85;\n}\n\n.db-content code {\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 0.9em;\n  padding: 0.15em 0.35em;\n  background: rgba(127, 127, 127, 0.15);\n  border-radius: 4px;\n}\n\n.db-content pre {\n  padding: 1em;\n  overflow-x: auto;\n  background: rgba(127, 127, 127, 0.1);\n  border-radius: 8px;\n}\n.db-content pre code {\n  padding: 0;\n  background: none;\n}\n\n/* display:block so wide tables scroll instead of overflowing the page on mobile;\n   costs full-bleed stretch for narrow tables. */\n.db-content table {\n  border-collapse: collapse;\n  display: block;\n  width: max-content;\n  max-width: 100%;\n  overflow-x: auto;\n}\n\n.db-content th,\n.db-content td {\n  border: 1px solid rgba(127, 127, 127, 0.3);\n  padding: 0.5em 0.75em;\n  text-align: left;\n}\n\n.db-content th {\n  background: rgba(127, 127, 127, 0.08);\n  font-weight: 600;\n}\n\n.db-content img {\n  max-width: 100%;\n  height: auto;\n  border-radius: 8px;\n}\n\n.db-content a {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n.db-content a:hover {\n  opacity: 0.8;\n}\n\n.db-content hr {\n  border: none;\n  border-top: 1px solid rgba(127, 127, 127, 0.3);\n  margin: 2em 0;\n}\n";

package/dist/cssText.js

@@ -0,0 +1,2 @@
+// Generated from styles.css by scripts/generate-css-text.mjs — do not edit directly.
+export const CSS_TEXT = "/* Slim default typography for Draftbase MDX content.\n   Opt-in: import \"@draftbase/renderer/styles.css\".\n   Disable per-render: <MDXContent unstyled /> or toHtml(source, { unstyled: true }).\n   Theme via custom properties: --db-heading-color, --db-link-color, --db-accent-border,\n   --db-target-bg. Override further: target \".db-content\" with higher-specificity or\n   later-loaded rules. */\n\n.db-content {\n  line-height: 1.6;\n  color: inherit;\n  overflow-wrap: break-word;\n}\n\n.db-content h1,\n.db-content h2,\n.db-content h3,\n.db-content h4,\n.db-content h5,\n.db-content h6 {\n  color: var(--db-heading-color, inherit);\n}\n\n.db-content a {\n  color: var(--db-link-color, inherit);\n}\n\n/* remark-gfm emits the footnotes label as .sr-only; define it so it stays hidden\n   without the consumer needing Tailwind or their own utility. */\n.db-content .sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.db-content > :first-child {\n  margin-top: 0;\n}\n.db-content > :last-child {\n  margin-bottom: 0;\n}\n\n.db-content h1,\n.db-content h2,\n.db-content h3,\n.db-content h4,\n.db-content h5,\n.db-content h6 {\n  font-weight: 600;\n  line-height: 1.25;\n  margin: 1.5em 0 0.5em;\n}\n\n/* Highlights a footnote/citation anchor when the URL hash lands on it, e.g. #fn-1. */\n.db-content :target {\n  background: var(--db-target-bg, rgba(127, 127, 127, 0.15));\n}\n\n.db-content h1 {\n  font-size: 2.25em;\n  font-weight: 700;\n  line-height: 1.2;\n  letter-spacing: -0.025em;\n  margin-top: 1.25em;\n}\n\n.db-content h2 {\n  font-size: 1.5em;\n  line-height: 1.25;\n  letter-spacing: -0.02em;\n  margin-top: 1.75em;\n}\n\n.db-content h3 {\n  font-size: 1.25em;\n  line-height: 1.3;\n}\n\n.db-content h4 {\n  font-size: 1.125em;\n  line-height: 1.35;\n}\n\n.db-content h5 {\n  font-size: 1em;\n  line-height: 1.4;\n}\n\n.db-content h6 {\n  font-size: 0.875em;\n  line-height: 1.4;\n}\n\n@media (max-width: 640px) {\n  .db-content h1 {\n    font-size: 1.875em;\n  }\n  .db-content h2 {\n    font-size: 1.25em;\n  }\n  .db-content h3 {\n    font-size: 1.125em;\n  }\n}\n\n.db-content p,\n.db-content ul,\n.db-content ol,\n.db-content blockquote,\n.db-content pre,\n.db-content table {\n  margin: 0 0 1em;\n}\n\n.db-content ul,\n.db-content ol {\n  padding-left: 1.5em;\n}\n\n.db-content ul {\n  list-style-type: disc;\n}\n\n.db-content ol {\n  list-style-type: decimal;\n}\n\n.db-content ul ul {\n  list-style-type: circle;\n}\n\n.db-content ol ol {\n  list-style-type: lower-alpha;\n}\n\n.db-content ul ul ul,\n.db-content ol ol ol {\n  list-style-type: square;\n}\n\n.db-content li {\n  margin: 0.25em 0;\n}\n.db-content li > ul,\n.db-content li > ol {\n  margin: 0.25em 0 0;\n}\n.db-content li > p {\n  margin: 0;\n}\n\n.db-content ul.contains-task-list {\n  list-style: none;\n  padding-left: 0.25em;\n}\n.db-content li.task-list-item {\n  list-style: none;\n  margin-left: 0;\n}\n.db-content li.task-list-item input[type=\"checkbox\"] {\n  margin-right: 0.5em;\n}\n\n.db-content strong {\n  font-weight: 600;\n}\n.db-content em {\n  font-style: italic;\n}\n.db-content del {\n  text-decoration: line-through;\n  opacity: 0.75;\n}\n\n.db-content blockquote {\n  margin-left: 0;\n  padding-left: 1em;\n  border-left: 3px solid var(--db-accent-border, currentColor);\n  opacity: 0.85;\n}\n\n.db-content code {\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 0.9em;\n  padding: 0.15em 0.35em;\n  background: rgba(127, 127, 127, 0.15);\n  border-radius: 4px;\n}\n\n.db-content pre {\n  padding: 1em;\n  overflow-x: auto;\n  background: rgba(127, 127, 127, 0.1);\n  border-radius: 8px;\n}\n.db-content pre code {\n  padding: 0;\n  background: none;\n}\n\n/* display:block so wide tables scroll instead of overflowing the page on mobile;\n   costs full-bleed stretch for narrow tables. */\n.db-content table {\n  border-collapse: collapse;\n  display: block;\n  width: max-content;\n  max-width: 100%;\n  overflow-x: auto;\n}\n\n.db-content th,\n.db-content td {\n  border: 1px solid rgba(127, 127, 127, 0.3);\n  padding: 0.5em 0.75em;\n  text-align: left;\n}\n\n.db-content th {\n  background: rgba(127, 127, 127, 0.08);\n  font-weight: 600;\n}\n\n.db-content img {\n  max-width: 100%;\n  height: auto;\n  border-radius: 8px;\n}\n\n.db-content a {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n.db-content a:hover {\n  opacity: 0.8;\n}\n\n.db-content hr {\n  border: none;\n  border-top: 1px solid rgba(127, 127, 127, 0.3);\n  margin: 2em 0;\n}\n";

package/dist/styles.css

@@ -1,7 +1,9 @@
 /* Slim default typography for Draftbase MDX content.
-   Opt-in: import "@draftbase/react/styles.css".
-   Disable per-render: <MDXContent unstyled />.
-   Override: target ".db-content" with higher-specificity or later-loaded rules. */
+   Opt-in: import "@draftbase/renderer/styles.css".
+   Disable per-render: <MDXContent unstyled /> or toHtml(source, { unstyled: true }).
+   Theme via custom properties: --db-heading-color, --db-link-color, --db-accent-border,
+   --db-target-bg. Override further: target ".db-content" with higher-specificity or
+   later-loaded rules. */
 
 .db-content {
   line-height: 1.6;
@@ -9,6 +11,19 @@
   overflow-wrap: break-word;
 }
 
+.db-content h1,
+.db-content h2,
+.db-content h3,
+.db-content h4,
+.db-content h5,
+.db-content h6 {
+  color: var(--db-heading-color, inherit);
+}
+
+.db-content a {
+  color: var(--db-link-color, inherit);
+}
+
 /* remark-gfm emits the footnotes label as .sr-only; define it so it stays hidden
    without the consumer needing Tailwind or their own utility. */
 .db-content .sr-only {
@@ -38,7 +53,6 @@
   font-weight: 600;
   line-height: 1.25;
   margin: 1.5em 0 0.5em;
-  color: inherit;
 }
 
 /* Highlights a footnote/citation anchor when the URL hash lands on it, e.g. #fn-1. */
@@ -165,7 +179,7 @@
 .db-content blockquote {
   margin-left: 0;
   padding-left: 1em;
-  border-left: 3px solid currentColor;
+  border-left: 3px solid var(--db-accent-border, currentColor);
   opacity: 0.85;
 }
 
@@ -217,7 +231,6 @@
 }
 
 .db-content a {
-  color: inherit;
   text-decoration: underline;
   text-underline-offset: 2px;
 }

package/dist/toHtml.d.ts

@@ -11,7 +11,19 @@ export interface ToHtmlOptions {
         target?: string;
         rel?: string;
     };
+    /** Skip wrapping the output in a `db-content`-classed `<div>` and the inlined default
+     * styles (see below). Same semantics as `MDXContent`'s `unstyled` prop. */
+    unstyled?: boolean;
+    /** Extra class name(s) merged onto the wrapper `<div>`. */
+    className?: string;
+    /** Called (in addition to `console.error`) when a custom component (from `components`) throws
+     * while rendering. The tag is left as literal HTML instead of failing the whole render. */
+    onError?: (error: unknown, tagName: string) => void;
 }
-/** Renders MDX/markdown to a static HTML string — no React, no mounted tree. Use
- * `compileMDX`/`MDXContent` instead when you need a React tree. */
+/** Renders MDX/markdown to a static, self-contained HTML string: pre-wrapped in
+ * `<div class="db-content">` with the default styles inlined as a `<style>` tag ahead of it —
+ * no separate `styles.css` import needed. Calling `toHtml` more than once on the same page
+ * repeats that `<style>` tag (harmless, just redundant bytes); pass `unstyled: true` and load
+ * `@draftbase/renderer/styles.css` yourself once if that matters. No React, no mounted tree —
+ * use `compileMDX`/`MDXContent` instead when you need a React tree. */
 export declare function toHtml(source: string, options?: ToHtmlOptions): Promise<string>;

package/dist/toHtml.js

@@ -6,6 +6,8 @@ import rehypeRaw from "rehype-raw";
 import rehypeSlug from "rehype-slug";
 import rehypeStringify from "rehype-stringify";
 import { toHtml as hastToHtml } from "hast-util-to-html";
+import { wrapperClassName } from "./wrapperClassName.js";
+import { CSS_TEXT } from "./cssText.js";
 const SCHEME_HREF = /^[a-z][a-z0-9+.-]*:/i;
 const defaultEntryLink = (props, childrenHtml) => `<a href="/entries/${props.id ?? ""}">${childrenHtml}</a>`;
 function hastPropsToStrings(properties) {
@@ -28,16 +30,22 @@ function rehypeDraftbase(options) {
                 transform(child);
             if (node.type !== "element" || !node.tagName)
                 return;
-            const render = componentsByTag?.get(node.tagName);
+            const tagName = node.tagName;
+            const render = componentsByTag?.get(tagName);
             if (render) {
-                const childrenHtml = hastToHtml({ type: "root", children: node.children ?? [] }, {
-                    allowDangerousHtml: true,
-                });
-                node.value = render(hastPropsToStrings(node.properties), childrenHtml);
-                node.type = "raw";
-                node.tagName = undefined;
-                node.properties = undefined;
-                node.children = undefined;
+                try {
+                    const childrenHtml = hastToHtml({ type: "root", children: node.children ?? [] }, { allowDangerousHtml: true });
+                    node.value = render(hastPropsToStrings(node.properties), childrenHtml);
+                    node.type = "raw";
+                    node.tagName = undefined;
+                    node.properties = undefined;
+                    node.children = undefined;
+                }
+                catch (error) {
+                    // Leave the tag as literal HTML instead of failing the whole render.
+                    console.error(`Draftbase component "${tagName}" failed to render`, error);
+                    options.onError?.(error, tagName);
+                }
                 return;
             }
             if (node.tagName === "a" && options.externalLinks) {
@@ -55,8 +63,12 @@ function rehypeDraftbase(options) {
         transform(tree);
     };
 }
-/** Renders MDX/markdown to a static HTML string — no React, no mounted tree. Use
- * `compileMDX`/`MDXContent` instead when you need a React tree. */
+/** Renders MDX/markdown to a static, self-contained HTML string: pre-wrapped in
+ * `<div class="db-content">` with the default styles inlined as a `<style>` tag ahead of it —
+ * no separate `styles.css` import needed. Calling `toHtml` more than once on the same page
+ * repeats that `<style>` tag (harmless, just redundant bytes); pass `unstyled: true` and load
+ * `@draftbase/renderer/styles.css` yourself once if that matters. No React, no mounted tree —
+ * use `compileMDX`/`MDXContent` instead when you need a React tree. */
 export async function toHtml(source, options = {}) {
     const needsRawParse = Boolean(options.components);
     const processor = unified()
@@ -70,5 +82,11 @@ export async function toHtml(source, options = {}) {
         .use(rehypeDraftbase, options)
         .use(rehypeStringify, { allowDangerousHtml: true });
     const file = await processor.process(source);
-    return String(file);
+    const html = String(file);
+    const wrapperClass = wrapperClassName(options.unstyled, options.className);
+    if (!wrapperClass)
+        return html;
+    return options.unstyled
+        ? `<div class="${wrapperClass}">${html}</div>`
+        : `<style>${CSS_TEXT}</style><div class="${wrapperClass}">${html}</div>`;
 }

package/dist/toHtml.test.js

@@ -1,11 +1,24 @@
 import assert from "node:assert/strict";
 import { test } from "node:test";
 import { toHtml } from "./toHtml.js";
+import { CSS_TEXT } from "./cssText.js";
 test("renders markdown to html", async () => {
     const html = await toHtml("# Title\n\nSome **bold** text.");
     assert.match(html, /<h1 id="title">Title<\/h1>/);
     assert.match(html, /<strong>bold<\/strong>/);
 });
+test("wraps output in a db-content div with inlined styles by default", async () => {
+    const html = await toHtml("hi");
+    assert.equal(html, `<style>${CSS_TEXT}</style><div class="db-content"><p>hi</p></div>`);
+});
+test("unstyled skips the wrapper div and the inlined styles", async () => {
+    const html = await toHtml("hi", { unstyled: true });
+    assert.equal(html, "<p>hi</p>");
+});
+test("className merges onto the wrapper div, styles still inlined", async () => {
+    const html = await toHtml("hi", { className: "prose" });
+    assert.equal(html, `<style>${CSS_TEXT}</style><div class="db-content prose"><p>hi</p></div>`);
+});
 test("supports gfm tables", async () => {
     const html = await toHtml("| a | b |\n| - | - |\n| 1 | 2 |");
     assert.match(html, /<table>/);
@@ -43,6 +56,21 @@ test("components resolves nested custom tags before serializing the parent's chi
     });
     assert.match(html, /<div><a href="\/entries\/abc">Post<\/a><\/div>/);
 });
+test("a component that throws leaves the tag as literal HTML and calls onError", async () => {
+    const errors = [];
+    const html = await toHtml('<Callout type="warning">Careful</Callout>', {
+        components: {
+            Callout: () => {
+                throw new Error("boom");
+            },
+        },
+        onError: (error, tagName) => errors.push([error, tagName]),
+    });
+    assert.match(html, /<callout type="warning">Careful<\/callout>/);
+    assert.equal(errors.length, 1);
+    assert.equal(errors[0][0].message, "boom");
+    assert.equal(errors[0][1], "callout");
+});
 test("adds target/rel to external links when externalLinks is true", async () => {
     const html = await toHtml("[ext](https://example.com) and [rel](/local)", {
         externalLinks: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbase/renderer",
-  "version": "0.4.3",
+  "version": "0.5.1",
   "description": "Framework-agnostic MDX renderer for Draftbase content (React, Next.js RSC, React Native, Astro, Vite, Vue)",
   "keywords": [
     "draftbase",
@@ -40,8 +40,8 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json && cp src/styles.css dist/styles.css",
-    "lint": "tsc --noEmit",
+    "build": "node scripts/generate-css-text.mjs && tsc -p tsconfig.json && cp src/styles.css dist/styles.css",
+    "lint": "node scripts/generate-css-text.mjs && tsc --noEmit",
     "test": "node --test dist/wrapperClassName.test.js dist/toHtml.test.js dist/compileMDX.test.js dist/reactNativeComponents.test.js dist/reactNative.test.js dist/MDXContent.test.js"
   },
   "peerDependencies": {