@mast-ai/react-ui 0.3.0 → 0.4.0

package/dist/components/ConversationPanel.d.ts

@@ -9,11 +9,11 @@ import type { GetToolLabel } from './ToolLabelContext.js';
  */
 export interface ConversationPanelProps {
     /**
-     * Forces a theme regardless of the user's `prefers-color-scheme` setting.
-     * When omitted, the panel follows the OS preference via the default
-     * stylesheet's media query.
+     * Selects the panel's theme. Defaults to `'light'`. Pass `'dark'` to force
+     * the dark palette regardless of OS preference, or `'auto'` to follow the
+     * user's `prefers-color-scheme` setting.
      */
-    theme?: 'light' | 'dark';
+    theme?: 'light' | 'dark' | 'auto';
     /** Optional class added to the root `[data-mast-root]` element. */
     className?: string;
     /**
@@ -54,8 +54,12 @@ export interface ConversationPanelProps {
  *
  * Internally renders {@link MessageList} and {@link ChatInput} inside a
  * `[data-mast-root]` div so the default stylesheet's CSS custom properties
- * resolve. Sets `data-mast-theme` from the optional `theme` prop, which the
- * default stylesheet uses to override the OS-driven dark mode preference.
+ * resolve. The same div carries `mast-panel` so the bundled chrome (border,
+ * padding, flex column, `height: 100%`) is applied; consumers composing
+ * primitives manually opt into chrome by adding the class themselves (see
+ * USAGE.md §8). `data-mast-theme` is set from the optional `theme` prop;
+ * the default stylesheet uses it to select between light, dark, and an
+ * OS-following auto mode.
  *
  * Must be rendered inside an `<AgentProvider>`.
  */

package/dist/context.d.ts

@@ -71,15 +71,15 @@ export interface AgentProviderProps {
      */
     onConversationChange?: (history: Message[], entries: ConversationEntry[]) => void;
     /**
-     * Forces a theme on the auto-rendered `[data-mast-root]` wrapper. Only
+     * Selects the theme on the auto-rendered `[data-mast-root]` wrapper.
+     * Defaults to `'light'`. Pass `'dark'` to force the dark palette or
+     * `'auto'` to follow the OS `prefers-color-scheme` preference. Only
      * meaningful when `disableRoot` is explicitly `false` (so the provider
      * actually renders the wrapper); when omitted or `true`, this prop has no
      * effect and consumers should set `data-mast-theme` themselves on whatever
-     * element carries `data-mast-root`. When the wrapper is rendered without a
-     * theme set, the panel follows OS preference via the default stylesheet's
-     * `prefers-color-scheme` media query.
+     * element carries `data-mast-root`.
      */
-    theme?: 'light' | 'dark';
+    theme?: 'light' | 'dark' | 'auto';
     /**
      * Controls whether the provider renders an auto wrapper `<div data-mast-root>`
      * around `children`.

package/dist/index.js

@@ -1076,7 +1076,7 @@ function ve({
   inputPlaceholder: i,
   mentions: o
 }) {
-  const m = ["mast-conversation-panel", n].filter(Boolean).join(" ");
+  const m = ["mast-panel", "mast-conversation-panel", n].filter(Boolean).join(" ");
   return /* @__PURE__ */ w("div", { "data-mast-root": !0, "data-mast-theme": t, className: m, children: [
     /* @__PURE__ */ e(
       de,