@pagepocket/content-reader 0.13.0

package/dist/browser-entry.d.ts

@@ -0,0 +1 @@
+import "./styles.css";

package/dist/browser-entry.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+import { createRoot } from "react-dom/client";
+import { ContentReader } from "./content-reader.js";
+/**
+ * Mount the ContentReader into a target DOM element.
+ *
+ * Called from the shell HTML generated by `pp view` for main-content snapshots.
+ * Reads the raw HTML from a hidden `<template>` element and renders
+ * the full interactive reader (ToC, dark mode, code highlighting, image zoom).
+ *
+ * Usage (from generated shell HTML):
+ * ```js
+ * window.__PP_CONTENT_READER__.mount(
+ *   document.getElementById('root'),
+ *   document.getElementById('pp-content').innerHTML
+ * );
+ * ```
+ */
+const mount = (container, html) => {
+    const root = createRoot(container);
+    root.render(_jsx(ContentReader, { html: html }));
+};
+window.__PP_CONTENT_READER__ = { mount };

package/dist/code-block.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface CodeBlockProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const CodeBlock: ({ children, className }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/code-block.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import hljs from "highlight.js";
+import { useEffect, useRef, useState } from "react";
+export const CodeBlock = ({ children, className }) => {
+    const codeRef = useRef(null);
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+        if (codeRef.current) {
+            hljs.highlightElement(codeRef.current);
+        }
+    }, [children, className]);
+    const handleCopy = () => {
+        if (!codeRef.current)
+            return;
+        navigator.clipboard.writeText(codeRef.current.innerText).then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        });
+    };
+    return (_jsxs("div", { className: "relative group my-6 rounded-md overflow-hidden border border-gray-200 dark:border-gray-800", children: [_jsx("div", { className: "absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity z-10", children: _jsx("button", { onClick: handleCopy, className: "bg-white dark:bg-gray-700 text-xs px-2 py-1 rounded shadow hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors", type: "button", children: copied ? "Copied!" : "Copy" }) }), _jsx("pre", { className: "!m-0 !p-4 bg-[var(--color-notion-code-bg-light)] dark:bg-[var(--color-notion-code-bg-dark)] overflow-auto text-sm", children: _jsx("code", { ref: codeRef, className: className || "language-plaintext", children: children }) })] }));
+};

package/dist/content-reader.d.ts

@@ -0,0 +1,2 @@
+import type { ContentReaderProps } from "./types.js";
+export declare const ContentReader: (props: ContentReaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/content-reader.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { useActiveHeading } from "./hooks/use-active-heading.js";
+import { useHeadings } from "./hooks/use-headings.js";
+import { HtmlRenderer } from "./html-renderer.js";
+import { TableOfContents } from "./table-of-contents.js";
+import { ThemeProvider, useTheme } from "./theme-provider.js";
+const Icons = {
+    Sun: () => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-5 h-5", children: [_jsx("circle", { cx: "12", cy: "12", r: "5" }), _jsx("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })] })),
+    Moon: () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-5 h-5", children: _jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) })),
+    Menu: () => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-5 h-5", children: [_jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }), _jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }), _jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })] }))
+};
+const ContentReaderInner = ({ html, showToc = true, className }) => {
+    const contentRef = useRef(null);
+    const headings = useHeadings(contentRef);
+    const activeId = useActiveHeading(headings);
+    const { theme, toggleTheme } = useTheme();
+    const [isMobileTocOpen, setMobileTocOpen] = useState(false);
+    return (_jsxs("div", { className: `min-h-screen bg-[var(--bg-primary)] text-[var(--text-primary)] transition-colors duration-200 ${className || ""}`, children: [_jsxs("header", { className: "sticky top-0 z-40 flex items-center justify-between px-4 py-3 bg-[var(--bg-primary)]/90 backdrop-blur border-b border-[var(--border-primary)] lg:hidden", children: [_jsx("span", { className: "font-semibold text-sm", children: "Reading" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: toggleTheme, className: "p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors", "aria-label": "Toggle theme", children: theme === "light" ? _jsx(Icons.Moon, {}) : _jsx(Icons.Sun, {}) }), showToc && headings.length > 0 && (_jsx("button", { onClick: () => setMobileTocOpen(!isMobileTocOpen), className: "p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors", "aria-label": "Toggle table of contents", children: _jsx(Icons.Menu, {}) }))] })] }), _jsxs("div", { className: "max-w-[1200px] mx-auto flex items-start relative", children: [showToc && headings.length > 0 && (_jsxs("aside", { className: "hidden lg:block w-[280px] sticky top-0 h-screen overflow-hidden border-r border-[var(--border-primary)] flex flex-col", children: [_jsxs("div", { className: "flex justify-between items-center p-4 border-b border-[var(--border-primary)] bg-[var(--bg-primary)]", children: [_jsx("span", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider", children: "Contents" }), _jsx("button", { onClick: toggleTheme, className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 transition-colors", "aria-label": "Toggle theme", children: theme === "light" ? _jsx(Icons.Moon, {}) : _jsx(Icons.Sun, {}) })] }), _jsx(TableOfContents, { headings: headings, activeId: activeId })] })), showToc && headings.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: `fixed inset-0 bg-black/50 z-40 lg:hidden transition-opacity duration-300 ${isMobileTocOpen ? "opacity-100" : "opacity-0 pointer-events-none"}`, onClick: () => setMobileTocOpen(false) }), _jsxs("aside", { className: `fixed right-0 top-0 bottom-0 w-[280px] bg-[var(--bg-primary)] z-50 shadow-xl transition-transform duration-300 transform lg:hidden flex flex-col ${isMobileTocOpen ? "translate-x-0" : "translate-x-full"}`, children: [_jsxs("div", { className: "flex items-center justify-between p-4 border-b border-[var(--border-primary)]", children: [_jsx("span", { className: "font-semibold", children: "Contents" }), _jsx("button", { onClick: () => setMobileTocOpen(false), className: "p-2 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 rounded", children: "\u2715" })] }), _jsx(TableOfContents, { headings: headings, activeId: activeId })] })] })), _jsx("main", { className: `flex-1 min-w-0 px-4 py-8 lg:px-12 lg:py-16 ${!showToc ? "lg:mx-auto max-w-[800px]" : ""}`, children: _jsx("div", { ref: contentRef, children: _jsx(HtmlRenderer, { html: html }) }) })] })] }));
+};
+export const ContentReader = (props) => {
+    return (_jsx(ThemeProvider, { initialTheme: props.theme, onThemeChange: props.onThemeChange, children: _jsx(ContentReaderInner, { html: props.html, showToc: props.showToc, className: props.className }) }));
+};

package/dist/hooks/use-active-heading.d.ts

@@ -0,0 +1,6 @@
+import { Heading } from "../types.js";
+/**
+ * Tracks which heading is currently active in the viewport.
+ * Uses IntersectionObserver to determine visibility.
+ */
+export declare function useActiveHeading(headings: Heading[]): string;

package/dist/hooks/use-active-heading.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+/**
+ * Tracks which heading is currently active in the viewport.
+ * Uses IntersectionObserver to determine visibility.
+ */
+export function useActiveHeading(headings) {
+    const [activeId, setActiveId] = useState("");
+    useEffect(() => {
+        if (headings.length === 0)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    setActiveId(entry.target.id);
+                }
+            });
+        }, {
+            rootMargin: "-20% 0% -35% 0%",
+            threshold: 0.5
+        });
+        headings.forEach((heading) => {
+            const element = document.getElementById(heading.id);
+            if (element)
+                observer.observe(element);
+        });
+        return () => observer.disconnect();
+    }, [headings]);
+    return activeId;
+}

package/dist/hooks/use-headings.d.ts

@@ -0,0 +1,6 @@
+import { Heading } from "../types.js";
+/**
+ * Extracts h1-h6 headings from the rendered content.
+ * Should be called after content is rendered.
+ */
+export declare function useHeadings(contentRef: React.RefObject<HTMLDivElement | null>): Heading[];

package/dist/hooks/use-headings.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+/**
+ * Extracts h1-h6 headings from the rendered content.
+ * Should be called after content is rendered.
+ */
+export function useHeadings(contentRef) {
+    const [headings, setHeadings] = useState([]);
+    useEffect(() => {
+        if (!contentRef.current)
+            return;
+        const elements = contentRef.current.querySelectorAll("h1, h2, h3, h4, h5, h6");
+        const newHeadings = [];
+        elements.forEach((el) => {
+            // Ensure element has an ID for linking
+            if (!el.id) {
+                el.id =
+                    el.textContent
+                        ?.toLowerCase()
+                        .replace(/[^a-z0-9]+/g, "-")
+                        .replace(/(^-|-$)/g, "") || `heading-${Math.random().toString(36).substr(2, 9)}`;
+            }
+            newHeadings.push({
+                id: el.id,
+                text: el.textContent || "",
+                level: parseInt(el.tagName.substring(1), 10)
+            });
+        });
+        setHeadings(newHeadings);
+    }, [contentRef]); // Re-run if ref changes (though ref object stable, content inside might change if we added deps)
+    return headings;
+}

package/dist/html-renderer.d.ts

@@ -0,0 +1,11 @@
+interface HtmlRendererProps {
+    html: string;
+}
+/**
+ * Renders an HTML string into React elements with custom replacements:
+ * - `<pre><code>` blocks are replaced with `CodeBlock` (syntax highlighting + copy)
+ * - `<img>` elements are replaced with `ImageZoomWrapper` (click-to-zoom)
+ * - Heading elements (h1-h6) get auto-generated IDs for ToC anchor links
+ */
+export declare const HtmlRenderer: ({ html }: HtmlRendererProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/html-renderer.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import parse, { Element, domToReact } from "html-react-parser";
+import { CodeBlock } from "./code-block.js";
+import { ImageZoomWrapper } from "./image-zoom-wrapper.js";
+const extractTextContent = (children) => children
+    .filter((child) => child.type === "text")
+    .map((textNode) => textNode.data)
+    .join("");
+const slugify = (text) => text
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/(^-|-$)/g, "");
+/**
+ * Renders an HTML string into React elements with custom replacements:
+ * - `<pre><code>` blocks are replaced with `CodeBlock` (syntax highlighting + copy)
+ * - `<img>` elements are replaced with `ImageZoomWrapper` (click-to-zoom)
+ * - Heading elements (h1-h6) get auto-generated IDs for ToC anchor links
+ */
+export const HtmlRenderer = ({ html }) => {
+    const options = {
+        replace: (domNode) => {
+            if (!(domNode instanceof Element)) {
+                return;
+            }
+            if (domNode.name === "pre" &&
+                domNode.children.length === 1 &&
+                domNode.children[0] instanceof Element &&
+                domNode.children[0].name === "code") {
+                const codeElement = domNode.children[0];
+                const codeClassName = codeElement.attribs.class || "";
+                return (_jsx(CodeBlock, { className: codeClassName, children: domToReact(codeElement.children) }));
+            }
+            if (domNode.name === "img") {
+                return (_jsx(ImageZoomWrapper, { src: domNode.attribs.src, alt: domNode.attribs.alt, className: domNode.attribs.class }));
+            }
+            if (/^h[1-6]$/.test(domNode.name) && !domNode.attribs.id) {
+                const headingText = extractTextContent(domNode.children);
+                const headingId = slugify(headingText);
+                if (headingId) {
+                    domNode.attribs.id = headingId;
+                }
+            }
+        }
+    };
+    return _jsx("div", { className: "prose-notion", children: parse(html, options) });
+};

package/dist/image-zoom-wrapper.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface ImageZoomWrapperProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    alt?: string;
+}
+export declare const ImageZoomWrapper: (props: ImageZoomWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/image-zoom-wrapper.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Zoom from "react-medium-image-zoom";
+export const ImageZoomWrapper = (props) => {
+    return (_jsx(Zoom, { children: _jsx("img", { ...props, alt: props.alt || "Content image", className: `max-w-full rounded-md shadow-sm mx-auto my-6 cursor-zoom-in ${props.className || ""}`, loading: "lazy" }) }));
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./content-reader.js";
+export * from "./types.js";
+export * from "./theme-provider.js";

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from "./content-reader.js";
+export * from "./types.js";
+export * from "./theme-provider.js";

package/dist/table-of-contents.d.ts

@@ -0,0 +1,7 @@
+import { Heading } from "./types.js";
+interface TableOfContentsProps {
+    headings: Heading[];
+    activeId: string;
+}
+export declare const TableOfContents: ({ headings, activeId }: TableOfContentsProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/table-of-contents.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TableOfContents = ({ headings, activeId }) => {
+    if (headings.length === 0)
+        return null;
+    const handleClick = (e, id) => {
+        e.preventDefault();
+        const element = document.getElementById(id);
+        if (element) {
+            element.scrollIntoView({ behavior: "smooth", block: "start" });
+            // Update URL hash without jumping
+            history.pushState(null, "", `#${id}`);
+        }
+    };
+    return (_jsxs("nav", { className: "text-sm overflow-y-auto max-h-[calc(100vh-4rem)] p-4 pr-2", children: [_jsx("h4", { className: "font-semibold mb-3 text-gray-500 dark:text-gray-400 uppercase text-xs tracking-wider", children: "Table of Contents" }), _jsx("ul", { className: "space-y-1", children: headings.map((heading) => (_jsx("li", { style: { paddingLeft: `${(heading.level - 1) * 0.75}rem` }, className: `transition-colors duration-200 border-l-2 ${activeId === heading.id
+                        ? "border-blue-500 text-blue-600 dark:text-blue-400 font-medium"
+                        : "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"}`, children: _jsx("a", { href: `#${heading.id}`, onClick: (e) => handleClick(e, heading.id), className: "block py-1 pl-2 truncate", title: heading.text, children: heading.text }) }, heading.id))) })] }));
+};

package/dist/theme-provider.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { Theme, ThemeContextType } from "./types.js";
+interface ThemeProviderProps {
+    initialTheme?: Theme;
+    onThemeChange?: (theme: Theme) => void;
+    children: React.ReactNode;
+}
+export declare const ThemeProvider: ({ initialTheme, onThemeChange, children }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useTheme: () => ThemeContextType;
+export {};

package/dist/theme-provider.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
+const ThemeContext = createContext(undefined);
+const applyDarkClass = (theme) => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+};
+export const ThemeProvider = ({ initialTheme = "light", onThemeChange, children }) => {
+    const [theme, setThemeState] = useState(initialTheme);
+    const setTheme = useCallback((newTheme) => {
+        const update = () => {
+            applyDarkClass(newTheme);
+            setThemeState(newTheme);
+            onThemeChange?.(newTheme);
+        };
+        if (document.startViewTransition) {
+            document.startViewTransition(update);
+        }
+        else {
+            update();
+        }
+    }, [onThemeChange]);
+    const toggleTheme = useCallback(() => {
+        setThemeState((prev) => {
+            const next = prev === "light" ? "dark" : "light";
+            const update = () => {
+                applyDarkClass(next);
+                onThemeChange?.(next);
+            };
+            if (document.startViewTransition) {
+                document.startViewTransition(update);
+            }
+            else {
+                update();
+            }
+            return next;
+        });
+    }, [onThemeChange]);
+    useEffect(() => {
+        applyDarkClass(initialTheme);
+        setThemeState(initialTheme);
+    }, [initialTheme]);
+    return (_jsx(ThemeContext.Provider, { value: { theme, toggleTheme, setTheme }, children: children }));
+};
+export const useTheme = () => {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+};

package/dist/types.d.ts

@@ -0,0 +1,23 @@
+export type Theme = "light" | "dark";
+export interface Heading {
+    id: string;
+    text: string;
+    level: number;
+}
+export interface ContentReaderProps {
+    /** The raw HTML content string to render */
+    html: string;
+    /** Initial theme preference. Defaults to 'light' */
+    theme?: Theme;
+    /** Whether to show the Table of Contents sidebar. Defaults to true */
+    showToc?: boolean;
+    /** Optional class name for the container */
+    className?: string;
+    /** Callback when theme changes */
+    onThemeChange?: (theme: Theme) => void;
+}
+export interface ThemeContextType {
+    theme: Theme;
+    toggleTheme: () => void;
+    setTheme: (theme: Theme) => void;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@pagepocket/content-reader",
+  "version": "0.13.0",
+  "description": "Notion-style HTML content reader with syntax highlighting, dark mode, ToC, and image lightbox.",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/styles.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./src/styles.css",
+    "./browser/js": "./dist/browser/content-reader.iife.js",
+    "./browser/css": "./dist/browser/content-reader.css"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "highlight.js": "^11.11.1",
+    "html-react-parser": "^5.2.4",
+    "react-medium-image-zoom": "^5.2.13"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.8",
+    "@types/node": "^20.17.12",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.5.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwindcss": "^4.2.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.3.5"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && pnpm build:bundle",
+    "build:bundle": "vite build",
+    "test": "echo 'no tests yet'"
+  }
+}

package/src/styles.css

@@ -0,0 +1,217 @@
+@import "tailwindcss";
+@import "highlight.js/styles/github-dark.css";
+@import "react-medium-image-zoom/dist/styles.css";
+
+::view-transition-group(root) {
+  animation-duration: 1s;
+}
+::view-transition-new(root),
+::view-transition-old(root) {
+  mix-blend-mode: normal;
+}
+
+::view-transition-new(root) {
+  animation-name: reveal-light;
+}
+
+::view-transition-old(root),
+.dark::view-transition-old(root) {
+  animation: none;
+}
+.dark::view-transition-new(root) {
+  animation-name: reveal-dark;
+}
+
+li {
+  margin-bottom: 5px;
+}
+
+@layer base {
+  img {
+  }
+}
+
+@keyframes reveal-dark {
+  from {
+    clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);
+  }
+  to {
+    clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);
+  }
+}
+
+@keyframes reveal-light {
+  from {
+    clip-path: polygon(130% 0, 130% 0, 115% 100%, 110% 115%);
+  }
+  to {
+    clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
+  }
+}
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  /* Colors */
+  --color-notion-bg-light: #ffffff;
+  --color-notion-text-light: #37352f;
+  --color-notion-bg-dark: #191919;
+  --color-notion-text-dark: #d4d4d4;
+  --color-notion-gray-light: #ebecef;
+  --color-notion-gray-dark: #2f2f2f;
+  --color-notion-border-light: #e9e9e8;
+  --color-notion-border-dark: #373737;
+  --color-notion-code-bg-light: #f7f6f3;
+  --color-notion-code-bg-dark: #1e1e1e;
+  --color-notion-quote-border-light: #37352f;
+  --color-notion-quote-border-dark: #d4d4d4;
+
+  /* Typography */
+  --font-sans:
+    ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+/* Base styles for the reader */
+.prose-notion {
+  max-width: 720px;
+  margin-left: auto;
+  margin-right: auto;
+  font-family: var(--font-sans);
+  font-size: 16px;
+  line-height: 1.7;
+}
+
+/* Light Mode Defaults */
+:root {
+  --bg-primary: var(--color-notion-bg-light);
+  --text-primary: var(--color-notion-text-light);
+  --border-primary: var(--color-notion-border-light);
+  --code-bg: var(--color-notion-code-bg-light);
+  --quote-border: var(--color-notion-quote-border-light);
+}
+
+/* Dark Mode Overrides */
+.dark {
+  --bg-primary: var(--color-notion-bg-dark);
+  --text-primary: var(--color-notion-text-dark);
+  --border-primary: var(--color-notion-border-dark);
+  --code-bg: var(--color-notion-code-bg-dark);
+  --quote-border: var(--color-notion-quote-border-dark);
+}
+
+.prose-notion {
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+}
+
+/* Typography elements */
+.prose-notion h1 {
+  font-size: 2em;
+  font-weight: 700;
+  margin-top: 2em;
+  margin-bottom: 0.5em;
+  line-height: 1.3;
+}
+
+.prose-notion h2 {
+  font-size: 1.5em;
+  font-weight: 600;
+  margin-top: 1.4em;
+  margin-bottom: 0.4em;
+  line-height: 1.3;
+}
+
+.prose-notion h3 {
+  font-size: 1.25em;
+  font-weight: 600;
+  margin-top: 1.2em;
+  margin-bottom: 0.3em;
+  line-height: 1.3;
+}
+
+.prose-notion p {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose-notion blockquote {
+  border-left: 3px solid var(--quote-border);
+  padding-left: 1rem;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  font-style: italic;
+  opacity: 0.8;
+}
+
+.prose-notion ul,
+.prose-notion ol {
+  padding-left: 1.5em;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose-notion li {
+  margin-bottom: 0.25em;
+}
+
+.prose-notion hr {
+  margin: 2em 0;
+  border: 0;
+  border-top: 1px solid var(--border-primary);
+}
+
+.prose-notion a {
+  text-decoration: underline;
+  text-decoration-color: rgba(120, 119, 116, 0.4);
+  text-underline-offset: 4px;
+  color: inherit;
+  transition: text-decoration-color 0.1s;
+}
+
+.prose-notion a:hover {
+  text-decoration-color: var(--text-primary);
+}
+
+.prose-notion img {
+  max-width: 100%;
+  border-radius: 4px;
+  display: block;
+  margin: 1.5em auto;
+}
+
+/* Tables */
+.prose-notion table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5em 0;
+  font-size: 0.9em;
+}
+
+.prose-notion th,
+.prose-notion td {
+  border: 1px solid var(--border-primary);
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.prose-notion th {
+  background-color: rgba(120, 119, 116, 0.05);
+  font-weight: 600;
+}
+
+/* Inline code */
+.prose-notion :not(pre) > code {
+  background: var(--code-bg);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+}
+
+/* Code blocks (handled by CodeBlock component, reset base styles) */
+.prose-notion pre {
+  background: transparent;
+  padding: 0;
+  margin: 0;
+}