@athenaintel/react 0.11.1 → 0.11.3

package/README.md

@@ -357,6 +357,24 @@ text anchors, and positioned citations are also preserved by `parseAthenaCitatio
 `page_rect` may include `unit=percent` (the default) or `unit=point`; retain the unit so the region
 maps to the correct PDF coordinates.
 
+## Styling
+
+`styles.css` is a self-contained stylesheet compiled at package build time. One import styles every SDK component — the host app does **not** need Tailwind:
+
+```tsx
+import '@athenaintel/react/styles.css';
+```
+
+It contains the design tokens, the Tailwind utilities the SDK components use, and an element reset (preflight) **scoped to the SDK's own chrome** (`.aui-root` trees and `.athena-sdk-chrome` roots, including portaled tooltips/popups). It never restyles the host page — not even host components you nest inside `AthenaProvider` to use hooks like `useSendMessage`: the reset only reaches SDK-rendered roots, design tokens live on the provider's `.athena-sdk` wrapper (inert custom properties) rather than `:root`, and everything ships in CSS cascade layers so any unlayered host rule wins on conflict.
+
+Hosts that already run **Tailwind v4** (like the athena-app template) may instead — or additionally — compile the SDK's classes themselves:
+
+```css
+@source "../node_modules/@athenaintel/react/dist";
+```
+
+Importing `styles.css` alongside a host Tailwind build is harmless (utilities are identical and layered). One caveat for themed Tailwind hosts: token values set on the `.athena-sdk` element shadow values inherited from `:root`, so define your app's token overrides on `.athena-sdk` too (`:root, .athena-sdk { --primary: …; }`) — or use the `theme` prop below, which always wins.
+
 ## Theming
 
 ```tsx
@@ -369,6 +387,15 @@ import { themes } from '@athenaintel/react';
 
 Preset themes: `light`, `dark`, `midnight`, `warm`, `purple`, `green`.
 
+For CSS-level theming without the `theme` prop, set the design-token custom properties on `.athena-sdk` (unlayered rules override the SDK's layered defaults):
+
+```css
+.athena-sdk {
+  --primary: oklch(0.4 0.15 260);
+  --radius: 1rem;
+}
+```
+
 ## Key Components
 
 - **`<AthenaProvider>`** — Runtime, auth, theming, and configuration