@athenaintel/react 0.11.1 → 0.11.2

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

package/dist/index.cjs

@@ -72,7 +72,7 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const ReactDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactDOM);
-const version$1 = "0.11.1";
+const version$1 = "0.11.2";
 const packageJson = {
   version: version$1
 };
@@ -16562,6 +16562,9 @@ function TooltipContent({
       "data-slot": "tooltip-content",
       sideOffset,
       className: cn(
+        // Portaled outside the provider wrapper — carries the SDK scope
+        // classes itself so tokens and the scoped reset still apply.
+        "athena-sdk athena-sdk-chrome",
         "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
         className
       ),
@@ -21021,10 +21024,14 @@ function AthenaProvider({
     );
   }
   let result = /* @__PURE__ */ jsxRuntime.jsx(PostHogProvider, { config: posthogConfig, children: inner });
-  if (themeStyleVars) {
-    result = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "athena-themed", style: themeStyleVars, children: result });
-  }
-  return result;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: themeStyleVars ? "athena-sdk athena-themed" : "athena-sdk",
+      style: themeStyleVars,
+      children: result
+    }
+  );
 }
 function OrderedMap(content) {
   this.content = content;
@@ -55474,7 +55481,7 @@ const MentionSuggestionPopup = React.forwardRef(({ store: store2, query, command
     {
       ref: refs.setFloating,
       style: floatingStyles,
-      className: "z-[9999]",
+      className: "athena-sdk athena-sdk-chrome z-[9999]",
       onMouseDown: (e) => e.preventDefault(),
       children: /* @__PURE__ */ jsxRuntime.jsx(
         MentionSuggestionList,
@@ -62781,7 +62788,7 @@ const AthenaAssetEmbed = ({
     if (error2) onError == null ? void 0 : onError(new Error(error2));
   }, [error2, onError]);
   if (isLoading) {
-    return loadingFallback ?? /* @__PURE__ */ jsxRuntime.jsxs("output", { className: "flex h-full w-full items-center justify-center", children: [
+    return loadingFallback ?? /* @__PURE__ */ jsxRuntime.jsxs("output", { className: "athena-sdk-chrome flex h-full w-full items-center justify-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { className: "size-6 animate-spin text-muted-foreground" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Loading asset" })
     ] });
@@ -62792,7 +62799,7 @@ const AthenaAssetEmbed = ({
     return errorFallback ?? /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "flex h-full w-full items-center justify-center gap-2 p-4 text-sm text-muted-foreground",
+        className: "athena-sdk-chrome flex h-full w-full items-center justify-center gap-2 p-4 text-sm text-muted-foreground",
         role: "alert",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(CircleAlert, { className: "size-4 text-destructive" }),
@@ -63165,21 +63172,27 @@ const AthenaLayout = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "flex h-full w-1 shrink-0 cursor-col-resize items-center bg-border/40 transition-colors hover:bg-border active:bg-primary/30",
+        className: "athena-sdk-chrome flex h-full w-1 shrink-0 cursor-col-resize items-center bg-border/40 transition-colors hover:bg-border active:bg-primary/30",
         onPointerDown,
         onPointerMove,
         onPointerUp
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(AssetPanel, { manageAssetPanelHostRegistration: false }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "athena-sdk-chrome flex h-full flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(AssetPanel, { manageAssetPanelHostRegistration: false }) })
   ] });
 };
 function ThreadList({ className }) {
   const statewireList = useAthenaStatewireThreadList();
   if (statewireList) {
-    return /* @__PURE__ */ jsxRuntime.jsx(StatewireThreadList, { list: statewireList, className });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StatewireThreadList,
+      {
+        list: statewireList,
+        className: cn("athena-sdk-chrome", className)
+      }
+    );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(LegacyThreadList, { className });
+  return /* @__PURE__ */ jsxRuntime.jsx(LegacyThreadList, { className: cn("athena-sdk-chrome", className) });
 }
 function LegacyThreadList({ className }) {
   const refresh = useRefreshThreadList();