@ai-react-markdown/core 1.1.0 → 1.2.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Brian Lee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,9 @@
 # @ai-react-markdown/core
 
+[![npm](https://img.shields.io/npm/v/@ai-react-markdown/core)](https://www.npmjs.com/package/@ai-react-markdown/core)
+[![npm downloads](https://img.shields.io/npm/dm/@ai-react-markdown/core)](https://www.npmjs.com/package/@ai-react-markdown/core)
+[![license](https://img.shields.io/npm/l/@ai-react-markdown/core)](../../LICENSE)
+
 A batteries-included React component for rendering AI-generated markdown with first-class support for LaTeX math, GFM, CJK text, and streaming content.
 
 ## Features
@@ -81,7 +85,7 @@ function StreamingChat({ content, isStreaming }: { content: string; isStreaming:
 | ---------------------- | -------------------------------- | ------------------------------- | ---------------------------------------------------------------------- |
 | `content`              | `string`                         | **(required)**                  | Raw markdown content to render.                                        |
 | `streaming`            | `boolean`                        | `false`                         | Whether content is actively being streamed (e.g. from an LLM).         |
-| `fontSize`             | `number \| string`               | `'0.875rem'`                    | Base font size. Numbers are treated as pixels.                         |
+| `fontSize`             | `number \| string`               | `'0.9375rem'`                   | Base font size. Numbers are treated as pixels.                         |
 | `variant`              | `AIMarkdownVariant`              | `'default'`                     | Typography variant name.                                               |
 | `colorScheme`          | `AIMarkdownColorScheme`          | `'light'`                       | Color scheme name (`'light'`, `'dark'`, or custom).                    |
 | `config`               | `PartialDeep<TConfig>`           | `undefined`                     | Partial render config, deep-merged with defaults.                      |
@@ -209,7 +213,7 @@ The `<AIMarkdown>` component wraps its content in a typography component that co
 The built-in `DefaultTypography` renders a `<div>` with CSS class names for the active variant and color scheme:
 
 ```html
-<div class="aim-typography-root default light" style="width: 100%; font-size: 0.875rem">
+<div class="aim-typography-root default light" style="width: 100%; font-size: 0.9375rem">
   <!-- markdown content -->
 </div>
 ```
@@ -222,14 +226,14 @@ import '@ai-react-markdown/core/typography/default.css';
 
 ### Custom Typography Component
 
-Replace the typography wrapper by passing a custom component:
+Replace the typography wrapper by passing a custom component. The `style` prop carries CSS custom properties injected by the core renderer — **merge it onto your root element** so that descendant CSS can reference these variables:
 
 ```tsx
 import type { AIMarkdownTypographyProps } from '@ai-react-markdown/core';
 
-function MyTypography({ children, fontSize, variant, colorScheme }: AIMarkdownTypographyProps) {
+function MyTypography({ children, fontSize, variant, colorScheme, style }: AIMarkdownTypographyProps) {
   return (
-    <div className={`my-markdown ${colorScheme}`} style={{ fontSize }}>
+    <div className={`my-markdown ${colorScheme}`} style={{ fontSize, ...style }}>
       {children}
     </div>
   );
@@ -238,6 +242,16 @@ function MyTypography({ children, fontSize, variant, colorScheme }: AIMarkdownTy
 <AIMarkdown content={markdown} Typography={MyTypography} />;
 ```
 
+#### Injected CSS Custom Properties
+
+The core renderer injects the following CSS custom properties via the Typography `style` prop:
+
+| Variable               | Value           | Purpose                                                                                                                                                                                             |
+| ---------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--aim-font-size-root` | `fontSize` prop | Absolute font-size anchor for the component instance. Inner CSS can use `var(--aim-font-size-root)` to bypass `em` compounding in deeply nested markdown structures (e.g. code inside blockquotes). |
+
+**Why `--aim-font-size-root`?** Markdown content frequently nests elements that use relative `em` units — blockquotes, lists, code blocks. Each nesting level compounds the effective size: a `0.875em` code span inside a `1.125em` blockquote resolves to `0.984em` of the parent, not `0.875em` of the root. This variable provides a stable, absolute reference that inner CSS rules can use to opt out of compounding when a fixed size is needed.
+
 ### Extra Styles Wrapper
 
 The `ExtraStyles` prop accepts a component rendered between the typography wrapper and the markdown content. Useful for injecting additional CSS scope or theme providers: