@athenaintel/react 0.9.8 → 0.9.9

package/README.md

@@ -60,14 +60,29 @@ import { themes } from '@athenaintel/react';
 
 Preset themes: `light`, `dark`, `midnight`, `warm`, `purple`, `green`.
 
+For solid custom surfaces like `primary`, `userBubble`, and `assistantBubble`, the SDK now auto-derives a readable black/white foreground when the paired foreground token is omitted. Explicit foreground tokens are still preferred when you need exact brand colors.
+
 ## Key Components
 
 - **`<AthenaProvider>`** — Runtime, auth, theming, and configuration
 - **`<AthenaChat>`** — Full chat UI with composer, messages, and tool rendering
+- **`<AssetRenderer>`** — Render a single Athena asset anywhere with just an `assetId`
 - **`<AthenaLayout>`** — Split-pane layout with asset panel
 - **`<ThreadList>`** — Conversation history sidebar
 - **`Toolkits`** — Constants for all available backend toolkits
 
+## Assets
+
+Use `AssetRenderer` when you want to embed a single asset outside the built-in side panel. It only needs `assetId`; the SDK resolves the correct viewer from that asset automatically.
+
+```tsx
+import { AssetRenderer } from '@athenaintel/react';
+
+function PreviewPane() {
+  return <AssetRenderer assetId="asset_123" title="Quarterly report" className="min-h-[32rem]" />;
+}
+```
+
 ## Composer Hooks
 
 Use `useAppendToComposer()` when you want to prefill a draft without sending it.

package/dist/index.cjs

@@ -11934,7 +11934,7 @@ const oppositeSideMap = {
   bottom: "top",
   top: "bottom"
 };
-function clamp(start, value, end) {
+function clamp$1(start, value, end) {
   return max(start, min(value, end));
 }
 function evaluate(value, param) {
@@ -12291,7 +12291,7 @@ const arrow$4 = (options) => ({
     const min$1 = minPadding;
     const max2 = clientSize - arrowDimensions[length] - maxPadding;
     const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset2 = clamp(min$1, center, max2);
+    const offset2 = clamp$1(min$1, center, max2);
     const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset2 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
     const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
     return {
@@ -12590,14 +12590,14 @@ const shift$3 = function(options) {
         const maxSide = mainAxis === "y" ? "bottom" : "right";
         const min2 = mainAxisCoord + overflow[minSide];
         const max2 = mainAxisCoord - overflow[maxSide];
-        mainAxisCoord = clamp(min2, mainAxisCoord, max2);
+        mainAxisCoord = clamp$1(min2, mainAxisCoord, max2);
       }
       if (checkCrossAxis) {
         const minSide = crossAxis === "y" ? "top" : "left";
         const maxSide = crossAxis === "y" ? "bottom" : "right";
         const min2 = crossAxisCoord + overflow[minSide];
         const max2 = crossAxisCoord - overflow[maxSide];
-        crossAxisCoord = clamp(min2, crossAxisCoord, max2);
+        crossAxisCoord = clamp$1(min2, crossAxisCoord, max2);
       }
       const limitedCoords = limiter.fn({
         ...state,
@@ -24478,6 +24478,163 @@ const ThreadListRefreshContext = React.createContext(null);
 function useRefreshThreadList() {
   return React.useContext(ThreadListRefreshContext);
 }
+const WHITE = "#ffffff";
+const BLACK = "#000000";
+const CONTRAST_PAIRS = {
+  primary: "primaryForeground",
+  secondary: "secondaryForeground",
+  accent: "accentForeground",
+  card: "cardForeground",
+  popover: "popoverForeground",
+  userBubble: "userBubbleForeground",
+  assistantBubble: "assistantForeground"
+};
+const clamp = (value, min2 = 0, max2 = 1) => Math.min(max2, Math.max(min2, value));
+const parseNumber = (raw) => {
+  const value = Number.parseFloat(raw);
+  return Number.isFinite(value) ? value : null;
+};
+const parsePercentLike = (raw, max2 = 1) => {
+  const value = parseNumber(raw);
+  if (value == null) return null;
+  return raw.trim().endsWith("%") ? value / 100 * max2 : value;
+};
+const parseHexColor = (input) => {
+  const hex = input.slice(1).trim();
+  if (![3, 4, 6, 8].includes(hex.length)) return null;
+  const expanded = hex.length <= 4 ? hex.split("").map((char) => `${char}${char}`).join("") : hex;
+  const channels = expanded.match(/.{2}/g);
+  if (!channels) return null;
+  const [r2, g, b, alpha2 = 255] = channels.map(
+    (channel) => Number.parseInt(channel, 16)
+  );
+  return {
+    r: clamp(r2 / 255),
+    g: clamp(g / 255),
+    b: clamp(b / 255),
+    alpha: clamp(alpha2 / 255)
+  };
+};
+const splitColorArgs = (input) => input.replace(/^[^(]+\(/, "").replace(/\)$/, "").replace(/\//g, " ").replace(/,/g, " ").trim().split(/\s+/).filter(Boolean);
+const parseRgbColor = (input) => {
+  const parts = splitColorArgs(input);
+  if (parts.length < 3) return null;
+  const r2 = parsePercentLike(parts[0], 255);
+  const g = parsePercentLike(parts[1], 255);
+  const b = parsePercentLike(parts[2], 255);
+  const alpha2 = parts[3] ? parsePercentLike(parts[3], 1) : 1;
+  if ([r2, g, b, alpha2].some((value) => value == null)) return null;
+  return {
+    r: clamp(r2 / 255),
+    g: clamp(g / 255),
+    b: clamp(b / 255),
+    alpha: clamp(alpha2)
+  };
+};
+const hueToRgb = (p, q, t) => {
+  let value = t;
+  if (value < 0) value += 1;
+  if (value > 1) value -= 1;
+  if (value < 1 / 6) return p + (q - p) * 6 * value;
+  if (value < 1 / 2) return q;
+  if (value < 2 / 3) return p + (q - p) * (2 / 3 - value) * 6;
+  return p;
+};
+const parseHslColor = (input) => {
+  const parts = splitColorArgs(input);
+  if (parts.length < 3) return null;
+  const hue = parseNumber(parts[0]);
+  const saturation = parsePercentLike(parts[1], 1);
+  const lightness = parsePercentLike(parts[2], 1);
+  const alpha2 = parts[3] ? parsePercentLike(parts[3], 1) : 1;
+  if ([hue, saturation, lightness, alpha2].some((value) => value == null)) {
+    return null;
+  }
+  const h2 = (hue % 360 + 360) % 360 / 360;
+  const s = clamp(saturation);
+  const l = clamp(lightness);
+  if (s === 0) {
+    return { r: l, g: l, b: l, alpha: clamp(alpha2) };
+  }
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  return {
+    r: clamp(hueToRgb(p, q, h2 + 1 / 3)),
+    g: clamp(hueToRgb(p, q, h2)),
+    b: clamp(hueToRgb(p, q, h2 - 1 / 3)),
+    alpha: clamp(alpha2)
+  };
+};
+const parseOklchColor = (input) => {
+  const parts = splitColorArgs(input);
+  if (parts.length < 3) return null;
+  const lightness = parsePercentLike(parts[0], 1);
+  const chroma = parseNumber(parts[1]);
+  const hue = parseNumber(parts[2]);
+  const alpha2 = parts[3] ? parsePercentLike(parts[3], 1) : 1;
+  if ([lightness, chroma, hue, alpha2].some((value) => value == null)) {
+    return null;
+  }
+  const l = clamp(lightness);
+  const c = Math.max(0, chroma);
+  const h2 = hue * Math.PI / 180;
+  const a = c * Math.cos(h2);
+  const b = c * Math.sin(h2);
+  const lPrime = l + 0.3963377774 * a + 0.2158037573 * b;
+  const mPrime = l - 0.1055613458 * a - 0.0638541728 * b;
+  const sPrime = l - 0.0894841775 * a - 1.291485548 * b;
+  const lLinear = lPrime ** 3;
+  const mLinear = mPrime ** 3;
+  const sLinear = sPrime ** 3;
+  return {
+    r: clamp(
+      4.0767416621 * lLinear - 3.3077115913 * mLinear + 0.2309699292 * sLinear
+    ),
+    g: clamp(
+      -1.2684380046 * lLinear + 2.6097574011 * mLinear - 0.3413193965 * sLinear
+    ),
+    b: clamp(
+      -0.0041960863 * lLinear - 0.7034186147 * mLinear + 1.707614701 * sLinear
+    ),
+    alpha: clamp(alpha2)
+  };
+};
+const parseColor = (input) => {
+  const value = input.trim().toLowerCase();
+  if (value.startsWith("#")) return parseHexColor(value);
+  if (value.startsWith("rgb")) return parseRgbColor(value);
+  if (value.startsWith("hsl")) return parseHslColor(value);
+  if (value.startsWith("oklch")) return parseOklchColor(value);
+  return null;
+};
+const srgbToLinear = (value) => value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+const relativeLuminance = (color) => 0.2126 * srgbToLinear(color.r) + 0.7152 * srgbToLinear(color.g) + 0.0722 * srgbToLinear(color.b);
+const contrastRatio = (luminanceA, luminanceB) => {
+  const lighter = Math.max(luminanceA, luminanceB);
+  const darker = Math.min(luminanceA, luminanceB);
+  return (lighter + 0.05) / (darker + 0.05);
+};
+const getReadableForeground = (background) => {
+  const parsed = parseColor(background);
+  if (!parsed || parsed.alpha < 1) return null;
+  const backgroundLuminance = relativeLuminance(parsed);
+  const whiteContrast = contrastRatio(backgroundLuminance, 1);
+  const blackContrast = contrastRatio(backgroundLuminance, 0);
+  return whiteContrast > blackContrast ? WHITE : BLACK;
+};
+const withAutoContrastTheme = (theme) => {
+  const resolvedTheme = { ...theme };
+  for (const backgroundKey of Object.keys(CONTRAST_PAIRS)) {
+    const foregroundKey = CONTRAST_PAIRS[backgroundKey];
+    const backgroundValue = theme[backgroundKey];
+    if (theme[foregroundKey] || !backgroundValue) continue;
+    const derivedForeground = getReadableForeground(backgroundValue);
+    if (derivedForeground) {
+      resolvedTheme[foregroundKey] = derivedForeground;
+    }
+  }
+  return resolvedTheme;
+};
 const THEME_TO_CSS = {
   primary: "--primary",
   primaryForeground: "--primary-foreground",
@@ -24514,7 +24671,8 @@ const THEME_TO_CSS = {
 };
 function themeToStyleVars(theme) {
   const vars = {};
-  for (const [key, value] of Object.entries(theme)) {
+  const resolvedTheme = withAutoContrastTheme(theme);
+  for (const [key, value] of Object.entries(resolvedTheme)) {
     if (value != null && THEME_TO_CSS[key]) {
       vars[THEME_TO_CSS[key]] = value;
     }
@@ -64363,6 +64521,75 @@ function useAssetEmbed(assetId, options = {
   }, [assetId, readOnly, expiresInSeconds, backendUrl, apiKey, token]);
   return { embedUrl, isLoading, error: error2 };
 }
+const AssetRenderer = ({
+  assetId,
+  title,
+  className,
+  loadingFallback,
+  emptyFallback = null,
+  errorFallback,
+  readOnly,
+  expiresInSeconds
+}) => {
+  const { backendUrl, apiKey, token } = useAthenaConfig();
+  const { embedUrl, isLoading, error: error2 } = useAssetEmbed(assetId, {
+    backendUrl,
+    apiKey,
+    token,
+    readOnly,
+    expiresInSeconds
+  });
+  if (!assetId) {
+    return emptyFallback ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-full w-full", className), children: emptyFallback }) : null;
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex h-full w-full items-center justify-center",
+          className
+        ),
+        children: loadingFallback ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { className: "mx-auto size-6 animate-spin text-muted-foreground" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: "Loading..." })
+        ] })
+      }
+    );
+  }
+  if (error2) {
+    const resolvedErrorFallback = typeof errorFallback === "function" ? errorFallback(error2) : errorFallback;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex h-full w-full items-center justify-center p-4",
+          className
+        ),
+        children: resolvedErrorFallback ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-sm text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CircleAlert, { className: "mx-auto size-5 text-red-400" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-xs font-medium text-foreground", children: "Failed to load" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 line-clamp-2 break-words text-[10px] text-muted-foreground", children: error2 })
+        ] })
+      }
+    );
+  }
+  if (!embedUrl) {
+    return emptyFallback ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-full w-full", className), children: emptyFallback }) : null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "iframe",
+    {
+      src: embedUrl,
+      width: "100%",
+      height: "100%",
+      frameBorder: "0",
+      allow: "fullscreen",
+      title: title ?? `Asset ${assetId}`,
+      className: cn("h-full w-full", className)
+    }
+  );
+};
 const ASSET_TYPE_CONFIG = {
   presentation: { icon: Presentation, label: "Presentation" },
   spreadsheet: { icon: FileSpreadsheet, label: "Spreadsheet" },
@@ -64372,38 +64599,7 @@ const ASSET_TYPE_CONFIG = {
 };
 const AssetIframe = React.memo(
   ({ tabId, tabName }) => {
-    const { backendUrl, apiKey, token } = useAthenaConfig();
-    const { embedUrl, isLoading, error: error2 } = useAssetEmbed(tabId, {
-      backendUrl,
-      apiKey,
-      token
-    });
-    if (isLoading) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { className: "mx-auto size-6 animate-spin text-muted-foreground" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: "Loading..." })
-      ] }) });
-    }
-    if (error2) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-sm text-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(CircleAlert, { className: "mx-auto size-5 text-red-400" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-xs font-medium text-foreground", children: "Failed to load" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 line-clamp-2 break-words text-[10px] text-muted-foreground", children: error2 })
-      ] }) });
-    }
-    if (!embedUrl) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "iframe",
-      {
-        src: embedUrl,
-        width: "100%",
-        height: "100%",
-        frameBorder: "0",
-        allow: "fullscreen",
-        title: tabName ?? `Asset ${tabId}`,
-        className: "h-full w-full"
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(AssetRenderer, { assetId: tabId, title: tabName });
   }
 );
 AssetIframe.displayName = "AssetIframe";
@@ -64744,6 +64940,7 @@ const Toolkits = {
 };
 exports.AppendDocumentToolUI = AppendDocumentToolUI;
 exports.AssetPanel = AssetPanel;
+exports.AssetRenderer = AssetRenderer;
 exports.AthenaChat = AthenaChat;
 exports.AthenaLayout = AthenaLayout;
 exports.AthenaProvider = AthenaProvider;