lemma-sdk 0.2.13 → 0.2.15

package/README.md

@@ -173,6 +173,15 @@ Notes:
 
 `lemma-sdk/react` now exposes the assistant controller plus the reusable UI primitives used by the app shell. A simple integration looks like this:
 
+If you want the SDK UI to look correct outside the Lemma app, import the bundled stylesheet once:
+
+```tsx
+import "lemma-sdk/react/styles.css";
+```
+
+The stylesheet provides the default Lemma assistant theme tokens used by the SDK UI. Without it, components may render with missing colors, borders, and spacing in apps that do not already define the same CSS variables.
+The SDK UI now ships its own semantic assistant classes and default styling, so consumers should not need the Lemma app's internal theme setup or Tailwind config just to render the assistant correctly.
+
 ```tsx
 import {
   MessageGroup,
@@ -187,7 +196,7 @@ import {
 function AssistantSurface() {
   const assistant = useAssistantController({
     client,
-    assistantId: "support_assistant",
+    assistantId: "uuid",
     podId: "pod_123",
   });
 
@@ -218,14 +227,6 @@ function AssistantSurface() {
 }
 ```
 
-The assistant UI now ships with built-in fallback theme tokens and a sensible default shell height, so it does not need app-specific CSS variables just to look presentable. If your app already defines the same CSS custom properties (`--bg-surface`, `--brand-primary`, etc.), your values will override the defaults.
-
-Practical expectations:
-
-- The components are React components styled with utility class names, so your app should already compile those class names (for example with Tailwind or the same utility CSS pipeline used by the app shell).
-- `AssistantEmbedded` and `AssistantExperienceView` render with a default minimum height of about 640px. You can still place them in a taller container when you want a full-page assistant.
-- Host apps are still responsible for auth, `LemmaClient` setup, and any product-specific renderers for files, widgets, or navigation.
-
 The intended split is:
 
 - SDK: `useAssistantController`, message/tool normalization, plan parsing, tool rollups, and assistant UI primitives.
@@ -242,19 +243,21 @@ Useful UI primitives exported from `lemma-sdk/react`:
 - `AssistantAskOverlay`
 - `AssistantPendingFileChip`
 - `AssistantStatusPill`
+- `AssistantThemeScope`
 - `MessageGroup`
 - `PlanSummaryStrip`
 
 For a direct plug-and-play component, `AssistantEmbedded` wires `useAssistantController` into the default assistant experience:
 
 ```tsx
+import "lemma-sdk/react/styles.css";
 import { AssistantEmbedded } from "lemma-sdk/react";
 
 function SupportAssistant() {
   return (
     <AssistantEmbedded
       client={client}
-      assistantId="support_assistant"
+      assistantId="uuid"
       podId="pod_123"
       title="Support Assistant"
       subtitle="Ask questions about this pod."
@@ -265,67 +268,39 @@ function SupportAssistant() {
 }
 ```
 
-If you want the default embedded assistant to fill a page section cleanly, this is a good starting point:
-
-```tsx
-function AssistantPanel() {
-  return (
-    <section style={{ minHeight: 720 }}>
-      <AssistantEmbedded
-        client={client}
-        assistantId="support_assistant"
-        podId="pod_123"
-        title="Support Assistant"
-        subtitle="Answer questions, inspect files, and help with pod changes."
-        placeholder="Ask Support Assistant"
-        showConversationList
-      />
-    </section>
-  );
-}
-```
-
-### Styling the assistant chrome directly
-
-If you are composing your own shell from the exported primitives, you can reuse the same built-in theme values:
+If you are composing your own shell with the SDK primitives, wrap it in `AssistantThemeScope` unless your app already provides matching theme tokens:
 
 ```tsx
+import "lemma-sdk/react/styles.css";
 import {
   AssistantComposer,
   AssistantHeader,
   AssistantMessageViewport,
-  assistantThemeStyles,
+  AssistantShellLayout,
+  AssistantThemeScope,
 } from "lemma-sdk/react";
 
-function CustomAssistantChrome() {
+function CustomAssistantShell() {
   return (
-    <div style={{ ...assistantThemeStyles, minHeight: 640 }}>
-      <AssistantHeader
-        title="Workspace Assistant"
-        subtitle="Custom shell using SDK primitives"
+    <AssistantThemeScope>
+      <AssistantShellLayout
+        main={
+          <div className="flex min-h-0 flex-1 flex-col gap-3">
+            <AssistantHeader title="Lemma Assistant" subtitle="Ask anything" />
+            <AssistantMessageViewport>
+              <div>Messages go here</div>
+            </AssistantMessageViewport>
+            <AssistantComposer>
+              <textarea placeholder="Message Lemma Assistant" />
+            </AssistantComposer>
+          </div>
+        }
       />
-      <AssistantMessageViewport>
-        {/* messages */}
-      </AssistantMessageViewport>
-      <AssistantComposer>
-        {/* composer */}
-      </AssistantComposer>
-    </div>
+    </AssistantThemeScope>
   );
 }
 ```
 
-You can also merge your own overrides:
-
-```tsx
-import { withAssistantThemeStyles } from "lemma-sdk/react";
-
-const style = withAssistantThemeStyles({
-  "--brand-primary": "#0f766e",
-  "--brand-secondary": "#34d399",
-});
-```
-
 ### Assistant names (resource key)
 
 Assistant CRUD is name-based:

package/dist/react/components/AssistantChrome.d.ts

@@ -1,14 +1,15 @@
-import { type ComponentPropsWithoutRef, type CSSProperties, type ReactNode } from "react";
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
 import type { AssistantConversationListItem, AssistantConversationRenderArgs } from "./assistant-types.js";
-export declare const assistantThemeStyles: CSSProperties;
-export declare function withAssistantThemeStyles(style?: CSSProperties): CSSProperties;
+export interface AssistantThemeScopeProps extends ComponentPropsWithoutRef<"div"> {
+    children: ReactNode;
+}
+export declare function AssistantThemeScope({ className, children, ...props }: AssistantThemeScopeProps): import("react/jsx-runtime").JSX.Element;
 export interface AssistantHeaderProps {
     title: ReactNode;
     subtitle?: ReactNode;
     badge?: ReactNode;
     controls?: ReactNode;
     className?: string;
-    style?: CSSProperties;
 }
 export interface AssistantMessageViewportProps extends ComponentPropsWithoutRef<"div"> {
     innerClassName?: string;
@@ -20,10 +21,9 @@ export interface AssistantShellLayoutProps {
     sidebarVisible?: boolean;
     main: ReactNode;
     className?: string;
-    style?: CSSProperties;
 }
-export declare function AssistantShellLayout({ sidebar, sidebarVisible, main, className, style, }: AssistantShellLayoutProps): import("react/jsx-runtime").JSX.Element;
-export declare function AssistantHeader({ title, subtitle, badge, controls, className, style, }: AssistantHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssistantShellLayout({ sidebar, sidebarVisible, main, className, }: AssistantShellLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssistantHeader({ title, subtitle, badge, controls, className, }: AssistantHeaderProps): import("react/jsx-runtime").JSX.Element;
 export interface AssistantConversationListProps {
     conversations: AssistantConversationListItem[];
     activeConversationId: string | null;
@@ -33,9 +33,8 @@ export interface AssistantConversationListProps {
     title?: ReactNode;
     newLabel?: ReactNode;
     className?: string;
-    style?: CSSProperties;
 }
-export declare function AssistantConversationList({ conversations, activeConversationId, onSelectConversation, onNewConversation, renderConversationLabel, title, newLabel, className, style, }: AssistantConversationListProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssistantConversationList({ conversations, activeConversationId, onSelectConversation, onNewConversation, renderConversationLabel, title, newLabel, className, }: AssistantConversationListProps): import("react/jsx-runtime").JSX.Element;
 export interface AssistantModelPickerProps<TValue extends string = string> {
     value: TValue | null;
     options: TValue[];
@@ -44,9 +43,8 @@ export interface AssistantModelPickerProps<TValue extends string = string> {
     getOptionLabel?: (value: TValue) => ReactNode;
     onChange: (value: TValue | null) => void;
     className?: string;
-    style?: CSSProperties;
 }
-export declare function AssistantModelPicker<TValue extends string = string>({ value, options, disabled, autoLabel, getOptionLabel, onChange, className, style, }: AssistantModelPickerProps<TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function AssistantModelPicker<TValue extends string = string>({ value, options, disabled, autoLabel, getOptionLabel, onChange, className, }: AssistantModelPickerProps<TValue>): import("react/jsx-runtime").JSX.Element;
 export interface AssistantAskOverlayProps {
     questionNumber: number;
     totalQuestions: number;
@@ -59,14 +57,12 @@ export interface AssistantAskOverlayProps {
     onContinue?: () => void;
     onSkip?: () => void;
     mode?: "single_select" | "multi_select" | "rank_priorities";
-    style?: CSSProperties;
 }
-export declare function AssistantAskOverlay({ questionNumber, totalQuestions, question, options, selectedOptions, canContinue, continueLabel, onSelectOption, onContinue, onSkip, mode, style, }: AssistantAskOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssistantAskOverlay({ questionNumber, totalQuestions, question, options, selectedOptions, canContinue, continueLabel, onSelectOption, onContinue, onSkip, mode, }: AssistantAskOverlayProps): import("react/jsx-runtime").JSX.Element;
 export interface AssistantPendingFileChipProps {
     label: ReactNode;
     onRemove?: () => void;
     className?: string;
-    style?: CSSProperties;
 }
 export interface AssistantComposerProps {
     floating?: ReactNode;
@@ -74,14 +70,12 @@ export interface AssistantComposerProps {
     pendingFiles?: ReactNode;
     children: ReactNode;
     className?: string;
-    style?: CSSProperties;
 }
-export declare function AssistantComposer({ floating, status, pendingFiles, children, className, style, }: AssistantComposerProps): import("react/jsx-runtime").JSX.Element;
-export declare function AssistantPendingFileChip({ label, onRemove, className, style, }: AssistantPendingFileChipProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssistantComposer({ floating, status, pendingFiles, children, className, }: AssistantComposerProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssistantPendingFileChip({ label, onRemove, className, }: AssistantPendingFileChipProps): import("react/jsx-runtime").JSX.Element;
 export interface AssistantStatusPillProps {
     label: ReactNode;
     subtle?: boolean;
     className?: string;
-    style?: CSSProperties;
 }
-export declare function AssistantStatusPill({ label, subtle, className, style, }: AssistantStatusPillProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssistantStatusPill({ label, subtle, className, }: AssistantStatusPillProps): import("react/jsx-runtime").JSX.Element;

package/dist/react/components/AssistantChrome.js

@@ -3,93 +3,55 @@ import { forwardRef } from "react";
 function cx(...values) {
     return values.filter(Boolean).join(" ");
 }
-function formatConversationTimestamp(value) {
-    const parsed = new Date(value);
-    if (Number.isNaN(parsed.valueOf())) {
-        return "";
-    }
-    return new Intl.DateTimeFormat("en-US", {
-        month: "short",
-        day: "numeric",
-        timeZone: "UTC",
-    }).format(parsed);
+export function AssistantThemeScope({ className, children, ...props }) {
+    return (_jsx("div", { className: cx("lemma-assistant-theme", className), ...props, children: children }));
 }
-export const assistantThemeStyles = {
-    "--bg-canvas": "#f4ede6",
-    "--bg-surface": "#fffaf4",
-    "--bg-subtle": "#efe4d8",
-    "--border-default": "#d8c4b2",
-    "--border-subtle": "#eadacc",
-    "--text-primary": "#23160f",
-    "--text-secondary": "#5f4838",
-    "--text-tertiary": "#8d715b",
-    "--text-on-brand": "#fff7f0",
-    "--text-inverse": "#fffaf4",
-    "--brand-primary": "#c45a2f",
-    "--brand-secondary": "#f2a65e",
-    "--brand-accent": "#df7a38",
-    "--brand-glow": "#f4d6b5",
-    "--state-success": "#1c8c63",
-    "--state-info": "#2e78b7",
-    "--state-error": "#be4637",
-    "--state-warning": "#a86811",
-    "--shadow-xs": "0 6px 18px -12px rgba(46, 27, 15, 0.35)",
-    "--shadow-sm": "0 12px 28px -20px rgba(46, 27, 15, 0.28)",
-    "--shadow-md": "0 20px 44px -28px rgba(46, 27, 15, 0.34)",
-    "--shadow-lg": "0 28px 64px -34px rgba(46, 27, 15, 0.4)",
-};
-export function withAssistantThemeStyles(style) {
-    return {
-        ...assistantThemeStyles,
-        ...style,
-    };
-}
-export const AssistantMessageViewport = forwardRef(function AssistantMessageViewport({ className, innerClassName, children, style, ...props }, ref) {
-    return (_jsx("div", { ref: ref, className: cx("min-h-0 flex-1 overflow-y-auto bg-[var(--bg-surface)] px-4 py-4", className), style: withAssistantThemeStyles(style), ...props, children: _jsx("div", { className: cx("mx-auto flex w-full max-w-5xl flex-col gap-3", innerClassName), children: children }) }));
+export const AssistantMessageViewport = forwardRef(function AssistantMessageViewport({ className, innerClassName, children, ...props }, ref) {
+    return (_jsx("div", { ref: ref, className: cx("lemma-assistant-viewport", "min-h-0 flex-1 overflow-y-auto bg-[var(--bg-surface)] px-4 py-4", className), ...props, children: _jsx("div", { className: cx("lemma-assistant-viewport-inner", "mx-auto flex w-full max-w-5xl flex-col gap-3", innerClassName), children: children }) }));
 });
-export function AssistantShellLayout({ sidebar, sidebarVisible = false, main, className, style, }) {
-    return (_jsxs("div", { className: cx("mx-auto flex h-full w-full min-h-[640px] flex-col gap-3 rounded-[28px] border border-[color:color-mix(in_srgb,_var(--border-default)_72%,_transparent)] bg-[linear-gradient(180deg,color-mix(in_srgb,_var(--bg-canvas)_95%,_transparent),color-mix(in_srgb,_var(--bg-surface)_98%,_transparent))] p-3 font-sans antialiased shadow-[var(--shadow-lg)]", !!sidebar && sidebarVisible && "lg:grid lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-3", className), style: withAssistantThemeStyles(style), children: [sidebar && sidebarVisible ? (_jsx("div", { className: "hidden h-full min-h-0 lg:block", children: sidebar })) : null, main] }));
+export function AssistantShellLayout({ sidebar, sidebarVisible = false, main, className, }) {
+    return (_jsxs("div", { className: cx("lemma-assistant-shell", "mx-auto flex h-full w-full min-h-0 flex-col gap-3 font-sans antialiased", !!sidebar && sidebarVisible && "lg:grid lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-3", className), children: [sidebar && sidebarVisible ? (_jsx("div", { className: "lemma-assistant-shell-sidebar hidden h-full min-h-0 lg:block", children: sidebar })) : null, _jsx("div", { className: "lemma-assistant-shell-main min-h-0", children: main })] }));
 }
-export function AssistantHeader({ title, subtitle, badge, controls, className, style, }) {
-    return (_jsxs("div", { className: cx("flex items-center justify-between border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3.5", className), style: withAssistantThemeStyles(style), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [badge ? (_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-2xl bg-[linear-gradient(145deg,var(--brand-primary),var(--brand-secondary))] shadow-[var(--shadow-xs)]", children: badge })) : null, _jsxs("div", { children: [_jsx("h3", { className: "text-[13px] font-semibold leading-tight tracking-[-0.01em] text-[var(--text-primary)]", children: title }), subtitle ? (_jsx("p", { className: "mt-0.5 text-[11px] text-[var(--text-tertiary)]", children: subtitle })) : null] })] }), controls ? (_jsx("div", { className: "flex items-center gap-1", children: controls })) : null] }));
+export function AssistantHeader({ title, subtitle, badge, controls, className, }) {
+    return (_jsxs("div", { className: cx("lemma-assistant-header", "flex items-center justify-between border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3", className), children: [_jsxs("div", { className: "lemma-assistant-header-copy flex items-center gap-2.5", children: [badge ? (_jsx("div", { className: "lemma-assistant-header-badge flex h-7 w-7 items-center justify-center rounded-full bg-[linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))] shadow-[var(--shadow-xs)]", children: badge })) : null, _jsxs("div", { className: "lemma-assistant-header-titles", children: [_jsx("h3", { className: "lemma-assistant-header-title text-[13px] font-semibold leading-tight text-[var(--text-primary)]", children: title }), subtitle ? (_jsx("p", { className: "lemma-assistant-header-subtitle text-[11px] text-[var(--text-tertiary)]", children: subtitle })) : null] })] }), controls ? (_jsx("div", { className: "lemma-assistant-header-controls flex items-center gap-1", children: controls })) : null] }));
 }
-export function AssistantConversationList({ conversations, activeConversationId, onSelectConversation, onNewConversation, renderConversationLabel, title = "Conversations", newLabel = "New", className, style, }) {
-    return (_jsxs("aside", { className: cx("flex h-full min-h-[560px] flex-col overflow-hidden rounded-[24px] border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[linear-gradient(180deg,color-mix(in_srgb,_var(--bg-surface)_98%,_transparent),color-mix(in_srgb,_var(--bg-canvas)_74%,_transparent))] shadow-[var(--shadow-lg)]", className), style: withAssistantThemeStyles(style), children: [_jsx("div", { className: "border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3.5", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[13px] font-semibold text-[var(--text-primary)]", children: title }), _jsxs("div", { className: "mt-1 text-[11px] text-[var(--text-tertiary)]", children: [conversations.length, " total"] })] }), onNewConversation ? (_jsx("button", { type: "button", onClick: onNewConversation, className: "rounded-full border border-[var(--border-default)] bg-[color:color-mix(in_srgb,_var(--bg-surface)_92%,_white)] px-3 py-1.5 text-[11px] font-medium text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-subtle)] hover:text-[var(--text-primary)]", children: newLabel })) : null] }) }), _jsx("div", { className: "min-h-0 flex-1 space-y-2 overflow-y-auto p-3", children: conversations.map((conversation) => {
+export function AssistantConversationList({ conversations, activeConversationId, onSelectConversation, onNewConversation, renderConversationLabel, title = "Conversations", newLabel = "New", className, }) {
+    return (_jsxs("aside", { className: cx("lemma-assistant-conversation-list", "flex h-full min-h-0 flex-col overflow-hidden rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] shadow-[var(--shadow-lg)]", className), children: [_jsx("div", { className: "lemma-assistant-conversation-list-header border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3", children: _jsxs("div", { className: "lemma-assistant-conversation-list-header-row flex items-center justify-between gap-3", children: [_jsxs("div", { className: "lemma-assistant-conversation-list-copy", children: [_jsx("div", { className: "lemma-assistant-conversation-list-title text-[13px] font-semibold text-[var(--text-primary)]", children: title }), _jsxs("div", { className: "lemma-assistant-conversation-list-meta mt-1 text-[11px] text-[var(--text-tertiary)]", children: [conversations.length, " total"] })] }), onNewConversation ? (_jsx("button", { type: "button", onClick: onNewConversation, className: "lemma-assistant-conversation-list-new rounded-full border border-[var(--border-default)] bg-[var(--bg-surface)] px-3 py-1.5 text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]", children: newLabel })) : null] }) }), _jsx("div", { className: "lemma-assistant-conversation-list-items min-h-0 flex-1 overflow-y-auto p-3 space-y-2", children: conversations.map((conversation) => {
                     const isActive = conversation.id === activeConversationId;
-                    return (_jsxs("button", { type: "button", onClick: () => onSelectConversation(conversation.id), className: cx("w-full rounded-2xl border px-3 py-3 text-left transition-all duration-200", isActive
-                            ? "border-[color:color-mix(in_srgb,_var(--brand-primary)_44%,_var(--border-default))] bg-[linear-gradient(135deg,color-mix(in_srgb,_var(--brand-glow)_52%,_var(--bg-surface)),color-mix(in_srgb,_var(--brand-primary)_8%,_var(--bg-surface)))] shadow-[var(--shadow-xs)]"
-                            : "border-[var(--border-default)] bg-[color:color-mix(in_srgb,_var(--bg-surface)_88%,_white)] hover:-translate-y-[1px] hover:bg-[var(--bg-subtle)] hover:shadow-[var(--shadow-xs)]"), children: [_jsx("div", { className: "truncate text-[12px] font-medium text-[var(--text-primary)]", children: renderConversationLabel
+                    return (_jsxs("button", { type: "button", onClick: () => onSelectConversation(conversation.id), className: cx("lemma-assistant-conversation-list-item", "w-full rounded-xl border px-3 py-2.5 text-left transition-colors", isActive
+                            ? "lemma-assistant-conversation-list-item-active border-[color:color-mix(in_srgb,_var(--brand-primary)_44%,_var(--border-default))] bg-[color:color-mix(in_srgb,_var(--brand-glow)_42%,_var(--bg-surface))]"
+                            : "border-[var(--border-default)] bg-[var(--bg-surface)] hover:bg-[var(--bg-subtle)]"), children: [_jsx("div", { className: "lemma-assistant-conversation-list-item-title truncate text-[12px] font-medium text-[var(--text-primary)]", children: renderConversationLabel
                                     ? renderConversationLabel({ conversation, isActive })
-                                    : (conversation.title || "Untitled conversation") }), _jsxs("div", { className: "mt-2 flex items-center justify-between gap-2", children: [_jsx("div", { className: "text-[10px] uppercase tracking-[0.08em] text-[var(--text-tertiary)]", children: (conversation.status || "waiting").toLowerCase() }), conversation.updated_at ? (_jsx("div", { className: "truncate text-[10px] text-[var(--text-tertiary)]", children: formatConversationTimestamp(conversation.updated_at) })) : null] })] }, conversation.id));
+                                    : (conversation.title || "Untitled conversation") }), _jsx("div", { className: "lemma-assistant-conversation-list-item-status mt-1 text-[10px] uppercase tracking-[0.08em] text-[var(--text-tertiary)]", children: (conversation.status || "waiting").toLowerCase() })] }, conversation.id));
                 }) })] }));
 }
-export function AssistantModelPicker({ value, options, disabled, autoLabel = "Auto", getOptionLabel, onChange, className, style, }) {
+export function AssistantModelPicker({ value, options, disabled, autoLabel = "Auto", getOptionLabel, onChange, className, }) {
     const autoValue = "__AUTO__";
-    return (_jsxs("select", { value: value ?? autoValue, onChange: (event) => onChange(event.target.value === autoValue ? null : event.target.value), disabled: disabled, className: cx("h-9 rounded-full border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[color:color-mix(in_srgb,_var(--bg-surface)_88%,_white)] px-3.5 text-[11px] font-medium text-[var(--text-secondary)] shadow-[var(--shadow-xs)]", className), style: withAssistantThemeStyles(style), "aria-label": "Conversation model", title: "Conversation model", children: [_jsx("option", { value: autoValue, children: autoLabel }), options.map((option) => (_jsx("option", { value: option, children: getOptionLabel ? getOptionLabel(option) : option }, option)))] }));
+    return (_jsxs("select", { value: value ?? autoValue, onChange: (event) => onChange(event.target.value === autoValue ? null : event.target.value), disabled: disabled, className: cx("lemma-assistant-model-picker", "h-8 rounded-full border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] px-3 text-[11px] text-[var(--text-secondary)]", className), "aria-label": "Conversation model", title: "Conversation model", children: [_jsx("option", { value: autoValue, children: autoLabel }), options.map((option) => (_jsx("option", { value: option, children: getOptionLabel ? getOptionLabel(option) : option }, option)))] }));
 }
-export function AssistantAskOverlay({ questionNumber, totalQuestions, question, options, selectedOptions, canContinue, continueLabel, onSelectOption, onContinue, onSkip, mode = "single_select", style, }) {
-    return (_jsxs("div", { className: "space-y-2 rounded-[22px] border border-[color:color-mix(in_srgb,_var(--border-default)_82%,_transparent)] bg-[linear-gradient(180deg,color-mix(in_srgb,_var(--bg-surface)_98%,_transparent),color-mix(in_srgb,_var(--bg-canvas)_70%,_transparent))] p-3 shadow-[var(--shadow-md)]", style: withAssistantThemeStyles(style), children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsxs("div", { className: "text-[11px] uppercase tracking-[0.12em] text-[var(--text-tertiary)]", children: ["Question ", questionNumber, " of ", totalQuestions] }), _jsx("p", { className: "mt-1 text-[14px] font-medium leading-6 text-[var(--text-primary)]", children: question })] }), onSkip ? (_jsx("button", { type: "button", onClick: onSkip, className: "rounded-md px-2 py-1 text-[12px] text-[var(--text-tertiary)] transition-colors hover:bg-[var(--bg-subtle)] hover:text-[var(--text-primary)]", children: "Skip" })) : null] }), _jsx("div", { className: "max-h-[260px] space-y-1.5 overflow-y-auto pr-1", children: options.map((option, optionIndex) => {
+export function AssistantAskOverlay({ questionNumber, totalQuestions, question, options, selectedOptions, canContinue, continueLabel, onSelectOption, onContinue, onSkip, mode = "single_select", }) {
+    return (_jsxs("div", { className: "lemma-assistant-ask-overlay space-y-2", children: [_jsxs("div", { className: "lemma-assistant-ask-overlay-header flex items-start justify-between gap-3", children: [_jsxs("div", { className: "lemma-assistant-ask-overlay-copy", children: [_jsxs("div", { className: "lemma-assistant-ask-overlay-kicker text-[11px] uppercase tracking-[0.12em] text-[var(--text-tertiary)]", children: ["Question ", questionNumber, " of ", totalQuestions] }), _jsx("p", { className: "lemma-assistant-ask-overlay-question mt-1 text-[14px] font-medium leading-6 text-[var(--text-primary)]", children: question })] }), onSkip ? (_jsx("button", { type: "button", onClick: onSkip, className: "lemma-assistant-ask-overlay-skip rounded-md px-2 py-1 text-[12px] text-[var(--text-tertiary)] transition-colors hover:bg-[var(--bg-subtle)] hover:text-[var(--text-primary)]", children: "Skip" })) : null] }), _jsx("div", { className: "lemma-assistant-ask-overlay-options max-h-[260px] space-y-1.5 overflow-y-auto pr-1", children: options.map((option, optionIndex) => {
                     const isSelected = selectedOptions.includes(option);
                     const rankLabel = mode === "rank_priorities" && isSelected
                         ? selectedOptions.indexOf(option) + 1
                         : null;
-                    return (_jsx("button", { type: "button", onClick: () => onSelectOption(option), className: cx("w-full rounded-lg border px-2.5 py-2 text-left text-[13px] transition-colors", isSelected
-                            ? "border-[color:color-mix(in_srgb,_var(--brand-primary)_64%,_var(--border-subtle))] bg-[color:color-mix(in_srgb,_var(--brand-primary)_14%,_transparent)] text-[var(--text-primary)]"
-                            : "border-[var(--border-default)] bg-[var(--bg-canvas)] text-[var(--text-secondary)] hover:bg-[var(--bg-subtle)] hover:text-[var(--text-primary)]"), children: _jsxs("span", { className: "inline-flex items-center gap-2", children: [rankLabel ? (_jsx("span", { className: "inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--brand-primary)] px-1 text-[10px] font-semibold text-[var(--text-on-brand)]", children: rankLabel })) : (_jsx("span", { className: cx("inline-block h-2.5 w-2.5 rounded-full border", isSelected
+                    return (_jsx("button", { type: "button", onClick: () => onSelectOption(option), className: cx("lemma-assistant-ask-overlay-option", "w-full rounded-lg border px-2.5 py-2 text-left text-[13px] transition-colors", isSelected
+                            ? "lemma-assistant-ask-overlay-option-selected border-[color:color-mix(in_srgb,_var(--brand-primary)_64%,_var(--border-subtle))] bg-[color:color-mix(in_srgb,_var(--brand-primary)_14%,_transparent)] text-[var(--text-primary)]"
+                            : "border-[var(--border-default)] bg-[var(--bg-canvas)] text-[var(--text-secondary)] hover:bg-[var(--bg-subtle)] hover:text-[var(--text-primary)]"), children: _jsxs("span", { className: "lemma-assistant-ask-overlay-option-label inline-flex items-center gap-2", children: [rankLabel ? (_jsx("span", { className: "inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--brand-primary)] px-1 text-[10px] font-semibold text-[var(--text-on-brand)]", children: rankLabel })) : (_jsx("span", { className: cx("inline-block h-2.5 w-2.5 rounded-full border", isSelected
                                         ? "border-[var(--brand-primary)] bg-[var(--brand-primary)]"
                                         : "border-[var(--border-default)] bg-transparent") })), option] }) }, `${option}-${optionIndex}`));
-                }) }), onContinue ? (_jsx("div", { className: "flex justify-end", children: _jsx("button", { type: "button", onClick: onContinue, disabled: !canContinue, className: cx("rounded-md px-2.5 py-1.5 text-[12px] font-medium transition-colors", canContinue
+                }) }), onContinue ? (_jsx("div", { className: "lemma-assistant-ask-overlay-actions flex justify-end", children: _jsx("button", { type: "button", onClick: onContinue, disabled: !canContinue, className: cx("lemma-assistant-ask-overlay-continue", "rounded-md px-2.5 py-1.5 text-[12px] font-medium transition-colors", canContinue
                         ? "bg-[var(--brand-primary)] text-[var(--text-on-brand)] hover:bg-[color:color-mix(in_srgb,_var(--brand-primary)_88%,_var(--text-primary))]"
                         : "bg-[var(--bg-subtle)] text-[var(--text-tertiary)]"), children: continueLabel }) })) : null] }));
 }
-export function AssistantComposer({ floating, status, pendingFiles, children, className, style, }) {
-    return (_jsxs("div", { className: cx("relative rounded-[24px] border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[linear-gradient(180deg,color-mix(in_srgb,_var(--bg-surface)_98%,_transparent),color-mix(in_srgb,_var(--bg-canvas)_82%,_transparent))] p-2.5 shadow-[var(--shadow-md)]", className), style: withAssistantThemeStyles(style), children: [floating ? (_jsx("div", { className: "absolute bottom-[calc(100%+8px)] left-0 right-0 z-20", children: floating })) : null, _jsx("div", { className: "min-h-[34px] px-2 pb-1", children: _jsx("div", { className: "flex min-h-[26px] items-center transition-opacity duration-200", children: status || _jsx("span", { "aria-hidden": "true", className: "inline-block h-[30px]" }) }) }), pendingFiles ? (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 px-1 pb-1.5", children: pendingFiles })) : null, children] }));
+export function AssistantComposer({ floating, status, pendingFiles, children, className, }) {
+    return (_jsxs("div", { className: cx("lemma-assistant-composer", "relative rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] p-2 shadow-[var(--shadow-md)]", className), children: [floating ? (_jsx("div", { className: "lemma-assistant-composer-floating absolute bottom-[calc(100%+8px)] left-0 right-0 z-20", children: floating })) : null, _jsx("div", { className: "lemma-assistant-composer-status-rail min-h-[34px] px-2 pb-1", children: _jsx("div", { className: "lemma-assistant-composer-status flex min-h-[26px] items-center transition-opacity duration-200", children: status || _jsx("span", { "aria-hidden": "true", className: "inline-block h-[30px]" }) }) }), pendingFiles ? (_jsx("div", { className: "lemma-assistant-composer-pending flex flex-wrap items-center gap-1.5 px-1 pb-1.5", children: pendingFiles })) : null, _jsx("div", { className: "lemma-assistant-composer-body", children: children })] }));
 }
-export function AssistantPendingFileChip({ label, onRemove, className, style, }) {
-    return (_jsxs("span", { className: cx("inline-flex max-w-full items-center gap-1.5 rounded-full border border-[color:color-mix(in_srgb,_var(--border-default)_72%,_transparent)] bg-[color:color-mix(in_srgb,_var(--bg-surface)_70%,_var(--bg-subtle))] px-2.5 py-1 text-[11px] text-[var(--text-secondary)]", className), style: withAssistantThemeStyles(style), children: [_jsx("span", { className: "truncate max-w-[180px]", children: label }), onRemove ? (_jsx("button", { type: "button", onClick: onRemove, className: "inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-[var(--bg-canvas)]", title: "Remove file", children: "\u00D7" })) : null] }));
+export function AssistantPendingFileChip({ label, onRemove, className, }) {
+    return (_jsxs("span", { className: cx("lemma-assistant-pending-file-chip", "inline-flex max-w-full items-center gap-1.5 rounded-full bg-[var(--bg-subtle)] px-2 py-1 text-[11px] text-[var(--text-secondary)]", className), children: [_jsx("span", { className: "lemma-assistant-pending-file-chip-label truncate max-w-[180px]", children: label }), onRemove ? (_jsx("button", { type: "button", onClick: onRemove, className: "lemma-assistant-pending-file-chip-remove inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-[var(--bg-canvas)]", title: "Remove file", children: "\u00D7" })) : null] }));
 }
-export function AssistantStatusPill({ label, subtle = false, className, style, }) {
-    return (_jsxs("div", { className: cx("inline-flex min-h-[32px] max-w-full items-center gap-2 rounded-full px-3 py-1.5 text-[12px] transition-all duration-200", subtle
-            ? "border border-[color:color-mix(in_srgb,_var(--border-default)_72%,_transparent)] bg-[color:color-mix(in_srgb,_var(--bg-surface)_90%,_transparent)] text-[var(--text-tertiary)]"
-            : "border border-[color:color-mix(in_srgb,_var(--brand-primary)_24%,_var(--border-default))] bg-[color:color-mix(in_srgb,_var(--brand-glow)_28%,_var(--bg-surface))] text-[var(--text-secondary)]", className), style: withAssistantThemeStyles(style), children: [_jsxs("span", { className: "relative inline-flex h-2.5 w-2.5 shrink-0", children: [_jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--brand-primary)]/45" }), _jsx("span", { className: "relative inline-flex h-2.5 w-2.5 rounded-full bg-[var(--brand-primary)]" })] }), _jsx("span", { className: "truncate", children: label })] }));
+export function AssistantStatusPill({ label, subtle = false, className, }) {
+    return (_jsxs("div", { className: cx("lemma-assistant-status-pill", "inline-flex min-h-[30px] max-w-full items-center gap-2 rounded-full px-3 py-1.5 text-[12px] transition-all duration-200", subtle
+            ? "lemma-assistant-status-pill-subtle border border-[color:color-mix(in_srgb,_var(--border-default)_72%,_transparent)] bg-[color:color-mix(in_srgb,_var(--bg-surface)_90%,_transparent)] text-[var(--text-tertiary)]"
+            : "border border-[color:color-mix(in_srgb,_var(--brand-primary)_24%,_var(--border-default))] bg-[color:color-mix(in_srgb,_var(--brand-glow)_28%,_var(--bg-surface))] text-[var(--text-secondary)]", className), children: [_jsxs("span", { className: "lemma-assistant-status-pill-dot relative inline-flex h-2.5 w-2.5 shrink-0", children: [_jsx("span", { className: "lemma-assistant-status-pill-dot-ping absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--brand-primary)]/45" }), _jsx("span", { className: "lemma-assistant-status-pill-dot-core relative inline-flex h-2.5 w-2.5 rounded-full bg-[var(--brand-primary)]" })] }), _jsx("span", { className: "lemma-assistant-status-pill-label truncate", children: label })] }));
 }

package/dist/react/components/AssistantEmbedded.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useAssistantController } from "../useAssistantController.js";
+import { AssistantThemeScope } from "./AssistantChrome.js";
 import { AssistantExperienceView } from "./AssistantExperience.js";
 export function AssistantEmbedded({ client, podId, assistantId, organizationId, enabled = true, ...props }) {
     const controller = useAssistantController({
@@ -9,5 +10,5 @@ export function AssistantEmbedded({ client, podId, assistantId, organizationId,
         organizationId: organizationId ?? undefined,
         enabled,
     });
-    return _jsx(AssistantExperienceView, { controller: controller, ...props });
+    return (_jsx(AssistantThemeScope, { children: _jsx(AssistantExperienceView, { controller: controller, ...props }) }));
 }

package/dist/react/components/AssistantExperience.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type ReactNode } from "react";
+import { type ReactNode } from "react";
 import type { AssistantRenderableMessage, AssistantToolInvocation } from "../useAssistantController.js";
 import type { AssistantControllerView, AssistantConversationRenderArgs, AssistantMessageRenderArgs, AssistantPendingFileRenderArgs, AssistantPresentedFileRenderArgs, AssistantToolRenderArgs } from "./assistant-types.js";
 type PlanStatus = "pending" | "in_progress" | "completed";
@@ -39,8 +39,6 @@ export interface AssistantExperienceViewProps {
     subtitle?: ReactNode;
     placeholder?: string;
     emptyState?: ReactNode;
-    className?: string;
-    style?: CSSProperties;
     draft?: string;
     onDraftChange?: (value: string) => void;
     showConversationList?: boolean;
@@ -77,5 +75,5 @@ export declare function MessageGroup({ message, conversationId, onNavigateResour
     renderPresentedFile?: (args: AssistantPresentedFileRenderArgs) => ReactNode;
     renderToolInvocation?: (args: AssistantToolRenderArgs) => ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function AssistantExperienceView({ controller, title, subtitle, placeholder, emptyState, className, style, draft: controlledDraft, onDraftChange, showConversationList, onNavigateResource, renderConversationLabel, renderMessageContent, renderPresentedFile, renderPendingFile, renderToolInvocation, }: AssistantExperienceViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssistantExperienceView({ controller, title, subtitle, placeholder, emptyState, draft: controlledDraft, onDraftChange, showConversationList, onNavigateResource, renderConversationLabel, renderMessageContent, renderPresentedFile, renderPendingFile, renderToolInvocation, }: AssistantExperienceViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/react/components/AssistantExperience.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { AvailableModels } from "../../types.js";
-import { AssistantComposer, AssistantConversationList, AssistantHeader, AssistantAskOverlay, AssistantMessageViewport, AssistantModelPicker, AssistantPendingFileChip, AssistantStatusPill, withAssistantThemeStyles, } from "./AssistantChrome.js";
+import { AssistantAskOverlay, AssistantMessageViewport, } from "./AssistantChrome.js";
 function cx(...values) {
     return values.filter(Boolean).join(" ");
 }
@@ -507,13 +507,13 @@ function defaultPresentedFile({ filepath }) {
     return (_jsxs("div", { className: "rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_78%,_transparent)] bg-[linear-gradient(180deg,color-mix(in_srgb,var(--bg-surface)_96%,transparent),color-mix(in_srgb,var(--bg-canvas)_76%,transparent))] px-3 py-2.5", children: [_jsx("div", { className: "text-[14px] font-medium text-[var(--text-primary)]", children: fileNameFromPath(filepath) }), _jsx("div", { className: "mt-1 text-[12px] text-[var(--text-tertiary)]", children: filepath })] }));
 }
 function defaultPendingFile({ file, remove }) {
-    return (_jsx(AssistantPendingFileChip, { label: file.name, onRemove: remove }));
+    return (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1.5 rounded-full bg-[var(--bg-subtle)] px-2 py-1 text-[11px] text-[var(--text-secondary)]", children: [_jsx("span", { className: "truncate max-w-[180px]", children: file.name }), _jsx("button", { type: "button", onClick: remove, className: "inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-[var(--bg-canvas)]", title: "Remove file", children: "\u00D7" })] }));
 }
 export function PlanSummaryStrip({ plan, onHide }) {
     const [showAll, setShowAll] = useState(false);
     const visibleSteps = showAll ? plan.steps : plan.steps.slice(0, 5);
     const hiddenCount = Math.max(0, plan.steps.length - visibleSteps.length);
-    return (_jsxs("div", { className: "rounded-xl border border-[color:color-mix(in_srgb,_var(--brand-primary)_24%,_var(--border-subtle))] bg-[color:color-mix(in_srgb,_var(--brand-glow)_18%,_var(--bg-surface))] px-3 py-2.5 shadow-[var(--shadow-sm)]", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "inline-flex items-center gap-2", children: [_jsx("span", { className: "text-[12px] font-semibold text-[var(--text-primary)]", children: "Task plan" }), _jsxs("span", { className: "text-[11px] text-[var(--text-tertiary)]", children: [plan.completedCount, "/", plan.steps.length, " complete"] }), plan.inProgressCount > 0 ? (_jsxs("span", { className: "rounded-full bg-[color:color-mix(in_srgb,_var(--brand-primary)_16%,_transparent)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--brand-primary)]", children: [plan.inProgressCount, " active"] })) : null] }), _jsx("button", { type: "button", onClick: onHide, className: "text-[11px] font-medium text-[var(--text-tertiary)] hover:text-[var(--text-primary)] transition-colors", children: "Hide" })] }), plan.activeStep ? (_jsxs("div", { className: "mt-1.5 truncate text-[11px] text-[var(--text-secondary)]", title: plan.activeStep, children: [plan.running ? "Running:" : "Current:", " ", plan.activeStep] })) : null, _jsxs("div", { className: "mt-2 space-y-1", children: [visibleSteps.map((step, index) => (_jsxs("div", { className: "flex items-start gap-2 text-[11px]", children: [_jsx("span", { className: cx("mt-1 inline-block h-2 w-2 shrink-0 rounded-full", step.status === "completed" && "bg-[var(--state-success)]", step.status === "in_progress" && "bg-[var(--brand-primary)]", step.status === "pending" && "bg-[var(--border-default)]") }), _jsx("span", { className: cx("leading-5", step.status === "completed" && "text-[var(--text-tertiary)] line-through", step.status === "in_progress" && "text-[var(--brand-primary)] font-medium", step.status === "pending" && "text-[var(--text-secondary)]"), children: step.step })] }, `${step.step}-${index}`))), plan.steps.length > 5 ? (_jsxs("div", { className: "flex items-center gap-2 pt-0.5", children: [_jsx("button", { type: "button", onClick: () => setShowAll((prev) => !prev), className: "text-[10px] font-medium text-[var(--brand-primary)] hover:text-[var(--text-primary)] transition-colors", children: showAll ? "Show less" : `See all ${plan.steps.length} steps` }), !showAll && hiddenCount > 0 ? (_jsxs("span", { className: "text-[10px] text-[var(--text-tertiary)]", children: ["+", hiddenCount, " more"] })) : null] })) : null] })] }));
+    return (_jsxs("div", { className: "lemma-assistant-plan-strip rounded-xl border border-[color:color-mix(in_srgb,_var(--brand-primary)_24%,_var(--border-subtle))] bg-[color:color-mix(in_srgb,_var(--brand-glow)_18%,_var(--bg-surface))] px-3 py-2.5 shadow-[var(--shadow-sm)]", children: [_jsxs("div", { className: "lemma-assistant-plan-strip-header flex items-center justify-between gap-2", children: [_jsxs("div", { className: "lemma-assistant-plan-strip-summary inline-flex items-center gap-2", children: [_jsx("span", { className: "lemma-assistant-plan-strip-title text-[12px] font-semibold text-[var(--text-primary)]", children: "Task plan" }), _jsxs("span", { className: "lemma-assistant-plan-strip-count text-[11px] text-[var(--text-tertiary)]", children: [plan.completedCount, "/", plan.steps.length, " complete"] }), plan.inProgressCount > 0 ? (_jsxs("span", { className: "lemma-assistant-plan-strip-active rounded-full bg-[color:color-mix(in_srgb,_var(--brand-primary)_16%,_transparent)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--brand-primary)]", children: [plan.inProgressCount, " active"] })) : null] }), _jsx("button", { type: "button", onClick: onHide, className: "text-[11px] font-medium text-[var(--text-tertiary)] hover:text-[var(--text-primary)] transition-colors", children: "Hide" })] }), plan.activeStep ? (_jsxs("div", { className: "mt-1.5 truncate text-[11px] text-[var(--text-secondary)]", title: plan.activeStep, children: [plan.running ? "Running:" : "Current:", " ", plan.activeStep] })) : null, _jsxs("div", { className: "lemma-assistant-plan-strip-steps mt-2 space-y-1", children: [visibleSteps.map((step, index) => (_jsxs("div", { className: "lemma-assistant-plan-strip-step flex items-start gap-2 text-[11px]", children: [_jsx("span", { className: cx("mt-1 inline-block h-2 w-2 shrink-0 rounded-full", step.status === "completed" && "bg-[var(--state-success)]", step.status === "in_progress" && "bg-[var(--brand-primary)]", step.status === "pending" && "bg-[var(--border-default)]") }), _jsx("span", { className: cx("leading-5", step.status === "completed" && "text-[var(--text-tertiary)] line-through", step.status === "in_progress" && "text-[var(--brand-primary)] font-medium", step.status === "pending" && "text-[var(--text-secondary)]"), children: step.step })] }, `${step.step}-${index}`))), plan.steps.length > 5 ? (_jsxs("div", { className: "flex items-center gap-2 pt-0.5", children: [_jsx("button", { type: "button", onClick: () => setShowAll((prev) => !prev), className: "text-[10px] font-medium text-[var(--brand-primary)] hover:text-[var(--text-primary)] transition-colors", children: showAll ? "Show less" : `See all ${plan.steps.length} steps` }), !showAll && hiddenCount > 0 ? (_jsxs("span", { className: "text-[10px] text-[var(--text-tertiary)]", children: ["+", hiddenCount, " more"] })) : null] })) : null] })] }));
 }
 export function ThinkingIndicator() {
     const [show, setShow] = useState(false);
@@ -523,35 +523,19 @@ export function ThinkingIndicator() {
     }, []);
     if (!show)
         return null;
-    return (_jsx("div", { className: "px-1 animate-in fade-in duration-300", children: _jsxs("div", { className: "inline-flex items-center gap-2.5 text-[12px] leading-5 text-[var(--text-tertiary)]", children: [_jsx("span", { className: "inline-flex h-2 w-2 rounded-full bg-[var(--brand-accent)]" }), _jsx("span", { className: "font-semibold text-transparent bg-clip-text bg-[linear-gradient(110deg,var(--text-secondary),35%,var(--brand-accent),50%,var(--text-secondary),65%)] bg-[length:250%_100%] animate-pulse", children: "Thinking..." })] }) }));
+    return (_jsx("div", { className: "lemma-assistant-thinking px-1 animate-in fade-in duration-300", children: _jsxs("div", { className: "lemma-assistant-thinking-label inline-flex items-center gap-2.5 text-[12px] leading-5 text-[var(--text-tertiary)]", children: [_jsx("span", { className: "lemma-assistant-thinking-dot inline-flex h-2 w-2 rounded-full bg-[var(--brand-accent)]" }), _jsx("span", { className: "lemma-assistant-thinking-text font-semibold text-transparent bg-clip-text bg-[linear-gradient(110deg,var(--text-secondary),35%,var(--brand-accent),50%,var(--text-secondary),65%)] bg-[length:250%_100%] animate-pulse", children: "Thinking..." })] }) }));
 }
 export function EmptyState({ onSendMessage }) {
     const suggestions = [
-        {
-            label: "Summarize uploaded docs",
-            text: "Summarize the documents I upload and pull out decisions, owners, and next steps.",
-            accent: "Research",
-        },
-        {
-            label: "Build a CRM table",
-            text: "Create a table for leads with useful columns, sample views, and suggested automation hooks.",
-            accent: "Data",
-        },
-        {
-            label: "Draft a support workflow",
-            text: "Design a support triage workflow with an assistant, a queue, and follow-up tasks.",
-            accent: "Ops",
-        },
-        {
-            label: "Create a dashboard page",
-            text: "Build a React desk page for an executive dashboard with KPIs, trends, and recent activity.",
-            accent: "UI",
-        },
+        { text: "Create an agent that summarizes documents", icon: "🤖" },
+        { text: "Add a table for tracking leads", icon: "📊" },
+        { text: "Create a full React desk page for an executive dashboard", icon: "🧩" },
+        { text: "Create a flow to process emails", icon: "⚡" },
     ];
-    return (_jsxs("div", { className: "px-2 py-7", children: [_jsxs("div", { className: "mx-auto max-w-2xl text-center", children: [_jsx("div", { className: "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-[18px] bg-[linear-gradient(145deg,var(--brand-primary),var(--brand-secondary))] shadow-[var(--shadow-sm)]", children: _jsx("span", { className: "text-[var(--text-on-brand)] text-sm font-semibold tracking-[0.18em]", children: "AI" }) }), _jsx("div", { className: "inline-flex items-center rounded-full border border-[color:color-mix(in_srgb,_var(--border-default)_78%,_transparent)] bg-[color:color-mix(in_srgb,_var(--bg-surface)_84%,_white)] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-[var(--text-tertiary)]", children: "Start with a concrete job" }), _jsx("h4", { className: "mt-4 text-[20px] font-semibold tracking-[-0.02em] text-[var(--text-primary)]", children: "What can I help you build?" }), _jsx("p", { className: "mx-auto mt-2 max-w-xl text-[13px] leading-relaxed text-[var(--text-tertiary)]", children: "I can shape workflows, spin up data structures, write desk UI, and turn rough ideas into working pod changes." })] }), _jsx("div", { className: "mx-auto mt-6 grid max-w-3xl grid-cols-1 gap-3 sm:grid-cols-2", children: suggestions.map((suggestion, index) => (_jsx("button", { onClick: () => onSendMessage(suggestion.text), className: "group rounded-[22px] border border-[color:color-mix(in_srgb,_var(--border-default)_78%,_transparent)] bg-[linear-gradient(180deg,color-mix(in_srgb,_var(--bg-surface)_94%,_white),color-mix(in_srgb,_var(--bg-canvas)_64%,_transparent))] px-4 py-4 text-left shadow-[var(--shadow-xs)] transition-all duration-200 hover:-translate-y-[2px] hover:border-[color:color-mix(in_srgb,_var(--brand-accent)_48%,_var(--border-subtle))] hover:shadow-[var(--shadow-sm)]", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("div", { className: "inline-flex rounded-full bg-[color:color-mix(in_srgb,_var(--brand-glow)_46%,_white)] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--brand-primary)]", children: suggestion.accent }), _jsx("div", { className: "mt-3 text-[14px] font-semibold tracking-[-0.01em] text-[var(--text-primary)]", children: suggestion.label }), _jsx("div", { className: "mt-1.5 text-[12px] leading-5 text-[var(--text-secondary)]", children: suggestion.text })] }), _jsx("span", { className: "mt-0.5 text-[var(--text-tertiary)] transition-all group-hover:translate-x-0.5 group-hover:text-[var(--brand-primary)]", children: "\u203A" })] }) }, `${suggestion.label}-${index}`))) })] }));
+    return (_jsxs("div", { className: "lemma-assistant-empty-state text-center py-5 px-2", children: [_jsxs("div", { className: "lemma-assistant-empty-state-hero flex flex-col items-center justify-center mb-6", children: [_jsx("div", { className: "lemma-assistant-empty-state-badge mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-[linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))] shadow-[var(--shadow-xs)]", children: _jsx("span", { className: "text-[var(--text-on-brand)] text-lg", children: "\u2728" }) }), _jsx("h4", { className: "lemma-assistant-empty-state-title font-semibold text-[var(--text-primary)] text-[15px]", children: "What can I help you build?" }), _jsx("p", { className: "lemma-assistant-empty-state-copy text-[13px] text-[var(--text-tertiary)] mt-1.5 max-w-sm leading-relaxed", children: "I can create agents, set up data stores, build pages, and automate workflows for your pod." })] }), _jsx("div", { className: "lemma-assistant-empty-state-suggestions grid grid-cols-1 sm:grid-cols-2 gap-2.5 max-w-[500px] mx-auto", children: suggestions.map((suggestion, index) => (_jsxs("button", { onClick: () => onSendMessage(suggestion.text), className: "lemma-assistant-empty-state-suggestion text-left px-3 py-2.5 rounded-lg border border-[var(--border-default)] bg-[var(--bg-surface)] text-xs text-[var(--text-secondary)] hover:border-[color:color-mix(in_srgb,_var(--brand-accent)_52%,_var(--border-subtle))] hover:bg-[color:color-mix(in_srgb,_var(--brand-glow)_72%,_var(--bg-surface))] hover:text-[var(--text-primary)] transition-all duration-200 flex items-center gap-2.5 group", children: [_jsx("span", { className: "text-base opacity-70 group-hover:opacity-100 transition-opacity", children: suggestion.icon }), _jsx("span", { className: "flex-1 leading-snug", children: suggestion.text }), _jsx("span", { className: "text-[var(--text-tertiary)] group-hover:text-[var(--state-warning)] group-hover:translate-x-0.5 transition-all opacity-0 group-hover:opacity-100", children: "\u203A" })] }, `${suggestion.text}-${index}`))) })] }));
 }
 function ReasoningPartCard({ text, isStreaming, durationMs, }) {
-    return (_jsxs("details", { className: "group", open: isStreaming, children: [_jsxs("summary", { className: "list-none cursor-pointer inline-flex items-center gap-1.5 text-[12px] leading-5 text-[var(--text-tertiary)]", children: [_jsx("span", { className: "transition-transform group-open:rotate-90", children: "\u203A" }), _jsx("span", { className: cx("font-semibold", isStreaming && "text-transparent bg-clip-text bg-[linear-gradient(110deg,var(--text-secondary),35%,var(--brand-accent),50%,var(--text-secondary),65%)] bg-[length:250%_100%] animate-pulse"), children: isStreaming ? "Thinking" : `Thought${durationMs ? ` · ${Math.max(1, Math.round(durationMs / 1000))}s` : ""}` })] }), _jsx("div", { className: "mt-1 pl-4 border-l border-[var(--border-default)]", children: _jsx("pre", { className: "text-[11px] leading-5 text-[var(--text-tertiary)] whitespace-pre-wrap font-mono", children: text }) })] }));
+    return (_jsxs("details", { className: "lemma-assistant-reasoning group", open: isStreaming, children: [_jsxs("summary", { className: "lemma-assistant-reasoning-summary list-none cursor-pointer inline-flex items-center gap-1.5 text-[12px] leading-5 text-[var(--text-tertiary)]", children: [_jsx("span", { className: "transition-transform group-open:rotate-90", children: "\u203A" }), _jsx("span", { className: cx("font-semibold", isStreaming && "text-transparent bg-clip-text bg-[linear-gradient(110deg,var(--text-secondary),35%,var(--brand-accent),50%,var(--text-secondary),65%)] bg-[length:250%_100%] animate-pulse"), children: isStreaming ? "Thinking" : `Thought${durationMs ? ` · ${Math.max(1, Math.round(durationMs / 1000))}s` : ""}` })] }), _jsx("div", { className: "lemma-assistant-reasoning-body mt-1 pl-4 border-l border-[var(--border-default)]", children: _jsx("pre", { className: "lemma-assistant-reasoning-text text-[11px] leading-5 text-[var(--text-tertiary)] whitespace-pre-wrap font-mono", children: text }) })] }));
 }
 function PresentFilesCard({ filepaths, conversationId, renderPresentedFile, }) {
     const fakeMessage = {
@@ -565,7 +549,7 @@ function PresentFilesCard({ filepaths, conversationId, renderPresentedFile, }) {
         args: { filepaths },
         state: "result",
     };
-    return (_jsx("div", { className: "pt-1 space-y-2", children: filepaths.map((filepath) => (_jsx("div", { children: (renderPresentedFile || defaultPresentedFile)({
+    return (_jsx("div", { className: "lemma-assistant-presented-files pt-1 space-y-2", children: filepaths.map((filepath) => (_jsx("div", { className: "lemma-assistant-presented-file", children: (renderPresentedFile || defaultPresentedFile)({
                 filepath,
                 activeConversationId: conversationId ?? null,
                 invocation: fakeInvocation,
@@ -619,13 +603,13 @@ function ToolActivityRollup({ detailParts, onNavigateResource, renderToolInvocat
     const summary = activeInvocation
         ? formatActiveToolSummary(activeInvocation.toolName, activeInvocation.args)
         : `Worked across ${toolParts.length} tool${toolParts.length === 1 ? "" : "s"}${failedCount > 0 ? ` · ${failedCount} failed` : ""}`;
-    return (_jsxs("div", { className: "space-y-1", children: [_jsxs("button", { type: "button", onClick: () => setIsExpanded((prev) => !prev), className: "inline-flex items-center gap-1.5 text-[12px] leading-5 text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] transition-colors", children: [_jsx("span", { className: cx("transition-transform", isExpanded && "rotate-90"), children: "\u203A" }), isWorking ? _jsx("span", { className: "inline-flex h-2 w-2 rounded-full bg-[var(--brand-accent)]" }) : null, _jsx("span", { className: cx("text-[var(--text-secondary)]", isWorking && "font-medium"), children: summary })] }), isExpanded ? (_jsx("div", { className: "pl-4 border-l border-[var(--border-default)] space-y-1.5", children: detailParts.map((part) => {
+    return (_jsxs("div", { className: "lemma-assistant-tool-rollup space-y-1", children: [_jsxs("button", { type: "button", onClick: () => setIsExpanded((prev) => !prev), className: "lemma-assistant-tool-rollup-toggle inline-flex items-center gap-1.5 text-[12px] leading-5 text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] transition-colors", children: [_jsx("span", { className: cx("transition-transform", isExpanded && "rotate-90"), children: "\u203A" }), isWorking ? _jsx("span", { className: "inline-flex h-2 w-2 rounded-full bg-[var(--brand-accent)]" }) : null, _jsx("span", { className: cx("text-[var(--text-secondary)]", isWorking && "font-medium"), children: summary })] }), isExpanded ? (_jsx("div", { className: "lemma-assistant-tool-rollup-details pl-4 border-l border-[var(--border-default)] space-y-1.5", children: detailParts.map((part) => {
                     if (part.type === "reasoning") {
-                        return (_jsxs("div", { className: "rounded-md bg-[var(--bg-canvas)] px-2.5 py-2", children: [_jsx("div", { className: "mb-1 text-[10px] font-medium uppercase tracking-[0.1em] text-[var(--text-tertiary)]", children: part.state === "streaming" ? "Thinking" : "Thought" }), _jsx("pre", { className: "text-[11px] leading-5 text-[var(--text-secondary)] whitespace-pre-wrap font-mono max-h-40 overflow-auto", children: part.text })] }, `thinking-${part.id}`));
+                        return (_jsxs("div", { className: "lemma-assistant-tool-rollup-thinking rounded-md bg-[var(--bg-canvas)] px-2.5 py-2", children: [_jsx("div", { className: "mb-1 text-[10px] font-medium uppercase tracking-[0.1em] text-[var(--text-tertiary)]", children: part.state === "streaming" ? "Thinking" : "Thought" }), _jsx("pre", { className: "text-[11px] leading-5 text-[var(--text-secondary)] whitespace-pre-wrap font-mono max-h-40 overflow-auto", children: part.text })] }, `thinking-${part.id}`));
                     }
                     const invocation = part.toolInvocation;
                     const isSelected = activeToolCallId === invocation.toolCallId;
-                    return (_jsxs("div", { className: "space-y-1", children: [_jsx(InlineToolCall, { invocation: invocation, isSelected: isSelected, onClick: () => setActiveToolCallId((prev) => (prev === invocation.toolCallId ? null : invocation.toolCallId)) }), isSelected ? (_jsx(ToolDetailsPanel, { toolName: invocation.toolName, args: invocation.args, state: invocation.state, result: invocation.result, onNavigateResource: onNavigateResource, renderToolInvocation: renderToolInvocation, message: message, activeConversationId: activeConversationId })) : null] }, part.id));
+                    return (_jsxs("div", { className: "lemma-assistant-tool-rollup-item space-y-1", children: [_jsx(InlineToolCall, { invocation: invocation, isSelected: isSelected, onClick: () => setActiveToolCallId((prev) => (prev === invocation.toolCallId ? null : invocation.toolCallId)) }), isSelected ? (_jsx(ToolDetailsPanel, { toolName: invocation.toolName, args: invocation.args, state: invocation.state, result: invocation.result, onNavigateResource: onNavigateResource, renderToolInvocation: renderToolInvocation, message: message, activeConversationId: activeConversationId })) : null] }, part.id));
                 }) })) : null] }));
 }
 function ShowWidgetToolCard({ invocation, onSendPrompt, }) {
@@ -665,9 +649,9 @@ function ShowWidgetToolCard({ invocation, onSendPrompt, }) {
             window.removeEventListener("message", handleMessage);
         };
     }, [onSendPrompt]);
-    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("div", { className: "text-[11px] font-semibold text-[var(--state-info)]", children: displayName }), _jsx("span", { className: cx("inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium", isExecuting && "bg-[color:color-mix(in_srgb,_var(--state-info)_16%,_transparent)] text-[var(--state-info)]", isFailed && "bg-[color:color-mix(in_srgb,_var(--state-error)_12%,_transparent)] text-[var(--state-error)]", !isExecuting && !isFailed && "bg-[color:color-mix(in_srgb,_var(--state-success)_12%,_transparent)] text-[var(--state-success)]"), children: isExecuting ? "Rendering" : isFailed ? "Failed" : "Ready" })] }), isFailed ? (_jsx("p", { className: "text-[11px] text-[var(--state-error)]", children: typeof resultData.error === "string" && resultData.error.length > 0
+    return (_jsxs("div", { className: "lemma-assistant-widget-card space-y-2", children: [_jsxs("div", { className: "lemma-assistant-widget-card-header flex items-center justify-between gap-2", children: [_jsx("div", { className: "lemma-assistant-widget-card-title text-[11px] font-semibold text-[var(--state-info)]", children: displayName }), _jsx("span", { className: cx("inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] font-medium", isExecuting && "bg-[color:color-mix(in_srgb,_var(--state-info)_16%,_transparent)] text-[var(--state-info)]", isFailed && "bg-[color:color-mix(in_srgb,_var(--state-error)_12%,_transparent)] text-[var(--state-error)]", !isExecuting && !isFailed && "bg-[color:color-mix(in_srgb,_var(--state-success)_12%,_transparent)] text-[var(--state-success)]"), children: isExecuting ? "Rendering" : isFailed ? "Failed" : "Ready" })] }), isFailed ? (_jsx("p", { className: "text-[11px] text-[var(--state-error)]", children: typeof resultData.error === "string" && resultData.error.length > 0
                     ? resultData.error
-                    : "Failed to render widget." })) : null, !isFailed && payload ? (_jsx("iframe", { ref: iframeRef, title: displayName, srcDoc: iframeDocument, sandbox: "allow-scripts allow-forms allow-popups allow-downloads", height: height, className: "w-full border-0 bg-transparent rounded-xl" })) : null, !isFailed && !payload ? (_jsx("p", { className: "text-[11px] text-[var(--text-secondary)]", children: "Widget output is missing `widget_code`." })) : null] }));
+                    : "Failed to render widget." })) : null, !isFailed && payload ? (_jsx("iframe", { ref: iframeRef, title: displayName, srcDoc: iframeDocument, sandbox: "allow-scripts allow-forms allow-popups allow-downloads", height: height, className: "lemma-assistant-widget-card-frame w-full border-0 bg-transparent rounded-xl" })) : null, !isFailed && !payload ? (_jsx("p", { className: "text-[11px] text-[var(--text-secondary)]", children: "Widget output is missing `widget_code`." })) : null] }));
 }
 export function MessageGroup({ message, conversationId, onNavigateResource, onWidgetSendPrompt, isStreaming, showAssistantHeader, renderMessageContent, renderPresentedFile, renderToolInvocation, }) {
     const orderedParts = message.parts && message.parts.length > 0
@@ -726,7 +710,7 @@ export function MessageGroup({ message, conversationId, onNavigateResource, onWi
         .find((part) => part.type === "text" && part.text.trim().length > 0)
         ?.id;
     if (message.role === "user") {
-        return (_jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "max-w-[72ch] rounded-xl bg-[var(--brand-primary)] text-[var(--text-on-brand)] px-3.5 py-2.5", children: renderMessageContent({
+        return (_jsx("div", { className: "lemma-assistant-message lemma-assistant-message-user flex justify-end", children: _jsx("div", { className: "lemma-assistant-message-user-bubble max-w-[72ch] rounded-xl bg-[var(--brand-primary)] text-[var(--text-on-brand)] px-3.5 py-2.5", children: renderMessageContent({
                     message: {
                         ...message,
                         content: message.content,
@@ -735,7 +719,7 @@ export function MessageGroup({ message, conversationId, onNavigateResource, onWi
                     },
                 }) }) }));
     }
-    return (_jsxs("div", { className: "px-1 py-0.5 space-y-1.5 max-w-[78ch]", children: [showAssistantHeader ? (_jsxs("div", { className: "inline-flex items-center gap-1.5 text-[11px] text-[var(--text-tertiary)]", children: [_jsx("span", { className: "inline-block h-1.5 w-1.5 rounded-full bg-[color:color-mix(in_srgb,_var(--brand-primary)_40%,_transparent)]" }), "Lemma"] })) : null, _jsxs("div", { className: "space-y-2", children: [blocks.map((block) => {
+    return (_jsxs("div", { className: "lemma-assistant-message lemma-assistant-message-assistant px-1 py-0.5 space-y-1.5 max-w-[78ch]", children: [showAssistantHeader ? (_jsxs("div", { className: "lemma-assistant-message-header inline-flex items-center gap-1.5 text-[11px] text-[var(--text-tertiary)]", children: [_jsx("span", { className: "lemma-assistant-message-header-dot inline-block h-1.5 w-1.5 rounded-full bg-[color:color-mix(in_srgb,_var(--brand-primary)_40%,_transparent)]" }), "Lemma"] })) : null, _jsxs("div", { className: "lemma-assistant-message-body space-y-2", children: [blocks.map((block) => {
                         if (block.kind === "tools") {
                             if (foldReasoningIntoToolRollup && block.id !== firstToolsBlockId) {
                                 return null;
@@ -753,7 +737,7 @@ export function MessageGroup({ message, conversationId, onNavigateResource, onWi
                             if (trimmedText.length === 0) {
                                 return null;
                             }
-                            return (_jsx("div", { className: "text-[13px] text-[var(--text-secondary)] leading-6", children: renderMessageContent({
+                            return (_jsx("div", { className: "lemma-assistant-message-text text-[13px] text-[var(--text-secondary)] leading-6", children: renderMessageContent({
                                     message: {
                                         ...message,
                                         content: trimmedText + (isStreaming && part.id === lastTextPartId ? " ▍" : ""),
@@ -771,7 +755,7 @@ export function MessageGroup({ message, conversationId, onNavigateResource, onWi
                         return null;
                     }), presentableFilepaths.length > 0 ? (_jsx(PresentFilesCard, { filepaths: presentableFilepaths, conversationId: conversationId, renderPresentedFile: renderPresentedFile })) : null] })] }));
 }
-export function AssistantExperienceView({ controller, title = "Lemma Assistant", subtitle = "Ask across your workspace and organization.", placeholder = "Message Lemma Assistant", emptyState, className, style, draft: controlledDraft, onDraftChange, showConversationList = false, onNavigateResource, renderConversationLabel = defaultConversationLabel, renderMessageContent = defaultMessageContent, renderPresentedFile, renderPendingFile = defaultPendingFile, renderToolInvocation, }) {
+export function AssistantExperienceView({ controller, title = "Lemma Assistant", subtitle = "Ask across your workspace and organization.", placeholder = "Message Lemma Assistant", emptyState, draft: controlledDraft, onDraftChange, showConversationList = false, onNavigateResource, renderConversationLabel = defaultConversationLabel, renderMessageContent = defaultMessageContent, renderPresentedFile, renderPendingFile = defaultPendingFile, renderToolInvocation, }) {
     const [draft, setDraft] = useControllableDraft(controlledDraft, onDraftChange);
     const [isPlanHidden, setIsPlanHidden] = useState(false);
     const [dismissedAskToolCallIds, setDismissedAskToolCallIds] = useState([]);
@@ -1009,24 +993,29 @@ export function AssistantExperienceView({ controller, title = "Lemma Assistant",
         ? effectiveAskOverlayState.answers[effectiveAskOverlayState.currentQuestionIndex] || []
         : [];
     const canContinueAsk = activeAskAnswers.length > 0;
-    return (_jsxs("div", { className: cx("relative isolate flex h-full w-full min-h-[640px] flex-col gap-3 overflow-hidden rounded-[30px] border border-[color:color-mix(in_srgb,_var(--border-default)_72%,_transparent)] bg-[linear-gradient(180deg,color-mix(in_srgb,_var(--bg-canvas)_95%,_transparent),color-mix(in_srgb,_var(--bg-surface)_98%,_transparent))] p-3 font-sans antialiased shadow-[var(--shadow-lg)]", showConversationList && "lg:grid lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-3", className), style: withAssistantThemeStyles(style), children: [_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0 top-0 h-44 bg-[radial-gradient(circle_at_top,color-mix(in_srgb,_var(--brand-glow)_78%,_transparent),transparent_72%)] opacity-80" }), showConversationList ? (_jsx(AssistantConversationList, { conversations: controller.conversations, activeConversationId: controller.activeConversationId, onSelectConversation: (conversationId) => controller.selectConversation(conversationId), onNewConversation: controller.clearMessages, renderConversationLabel: renderConversationLabel, className: "relative z-[1] hidden lg:flex lg:flex-col" })) : null, _jsxs("div", { className: "relative z-[1] flex h-full min-h-0 flex-col gap-3", children: [_jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden rounded-[24px] border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[linear-gradient(180deg,color-mix(in_srgb,_var(--bg-surface)_98%,_transparent),color-mix(in_srgb,_var(--bg-canvas)_74%,_transparent))] shadow-[var(--shadow-lg)]", children: [_jsx(AssistantHeader, { title: title, subtitle: subtitle, badge: _jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.14em] text-[var(--text-on-brand)]", children: "AI" }), controls: (_jsxs(_Fragment, { children: [_jsx(AssistantModelPicker, { value: controller.conversationModel, options: availableModels, onChange: (nextModel) => { void handleModelChange(nextModel); }, disabled: isConversationBusy || isUpdatingModel }), _jsx("button", { type: "button", onClick: controller.clearMessages, title: "New conversation", className: "inline-flex h-9 items-center justify-center rounded-full border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[color:color-mix(in_srgb,_var(--bg-surface)_88%,_white)] px-3 text-[11px] font-medium text-[var(--text-secondary)] shadow-[var(--shadow-xs)] transition-colors hover:bg-[var(--bg-subtle)] hover:text-[var(--text-primary)]", children: "New" })] })) }), _jsxs(AssistantMessageViewport, { className: "min-h-[260px] bg-transparent", ref: messagesContainerRef, onScroll: updatePinnedState, children: [controller.messages.length === 0 && !isConversationBusy ? (emptyState || _jsx(EmptyState, { onSendMessage: (message) => { void controller.sendMessage(message); } })) : null, (controller.isLoadingMessages && controller.messages.length === 0) ? (_jsx("div", { className: "flex justify-center py-6", children: _jsx("span", { className: "text-[var(--text-tertiary)] text-sm", children: "Loading\u2026" }) })) : null, (controller.isLoadingOlderMessages && controller.messages.length > 0) ? (_jsx("div", { className: "flex justify-center py-1", children: _jsx("span", { className: "text-[var(--text-tertiary)] text-xs", children: "Loading older\u2026" }) })) : null, displayMessageRows.map((row, index) => {
+    return (_jsxs("div", { className: cx("lemma-assistant-experience", "flex h-full min-h-0 flex-col gap-3 font-sans antialiased", showConversationList && "lg:grid lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-3"), children: [showConversationList ? (_jsxs("aside", { className: "lemma-assistant-experience-sidebar hidden min-h-0 overflow-hidden rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] shadow-[var(--shadow-lg)] lg:flex lg:flex-col", children: [_jsx("div", { className: "lemma-assistant-experience-sidebar-header border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3", children: _jsxs("div", { className: "lemma-assistant-experience-sidebar-header-row flex items-center justify-between gap-3", children: [_jsxs("div", { className: "lemma-assistant-experience-sidebar-copy", children: [_jsx("div", { className: "lemma-assistant-experience-sidebar-title text-[13px] font-semibold text-[var(--text-primary)]", children: "Conversations" }), _jsxs("div", { className: "lemma-assistant-experience-sidebar-meta mt-1 text-[11px] text-[var(--text-tertiary)]", children: [controller.conversations.length, " total"] })] }), _jsx("button", { type: "button", onClick: controller.clearMessages, className: "lemma-assistant-experience-sidebar-new rounded-full border border-[var(--border-default)] bg-[var(--bg-surface)] px-3 py-1.5 text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)]", children: "New" })] }) }), _jsx("div", { className: "lemma-assistant-experience-sidebar-items min-h-0 flex-1 overflow-y-auto p-3 space-y-2", children: controller.conversations.map((conversation) => {
+                            const isActive = conversation.id === controller.activeConversationId;
+                            return (_jsxs("button", { type: "button", onClick: () => controller.selectConversation(conversation.id), className: cx("lemma-assistant-experience-sidebar-item", "w-full rounded-xl border px-3 py-2.5 text-left transition-colors", isActive
+                                    ? "lemma-assistant-experience-sidebar-item-active border-[color:color-mix(in_srgb,_var(--brand-primary)_44%,_var(--border-default))] bg-[color:color-mix(in_srgb,_var(--brand-glow)_42%,_var(--bg-surface))]"
+                                    : "border-[var(--border-default)] bg-[var(--bg-surface)] hover:bg-[var(--bg-subtle)]"), children: [_jsx("div", { className: "lemma-assistant-experience-sidebar-item-title text-[12px] font-medium text-[var(--text-primary)]", children: renderConversationLabel({ conversation, isActive }) }), _jsx("div", { className: "lemma-assistant-experience-sidebar-item-status mt-1 text-[10px] uppercase tracking-[0.08em] text-[var(--text-tertiary)]", children: (conversation.status || "waiting").toLowerCase() })] }, conversation.id));
+                        }) })] })) : null, _jsxs("div", { className: "lemma-assistant-experience-main flex h-full min-h-0 flex-col gap-3", children: [_jsxs("div", { className: "lemma-assistant-experience-card flex min-h-0 flex-1 flex-col overflow-hidden rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] shadow-[var(--shadow-lg)]", children: [_jsxs("div", { className: "lemma-assistant-experience-header flex items-center justify-between border-b border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] px-4 py-3", children: [_jsxs("div", { className: "lemma-assistant-experience-header-copy flex items-center gap-2.5", children: [_jsx("div", { className: "lemma-assistant-experience-header-badge h-7 w-7 rounded-full bg-[linear-gradient(135deg,var(--brand-primary),var(--brand-secondary))] flex items-center justify-center shadow-[var(--shadow-xs)]", children: _jsx("span", { className: "text-[var(--text-on-brand)] text-xs", children: "\u2728" }) }), _jsxs("div", { className: "lemma-assistant-experience-header-titles", children: [_jsx("h3", { className: "lemma-assistant-experience-header-title font-semibold text-[var(--text-primary)] text-[13px] leading-tight", children: title }), _jsx("p", { className: "lemma-assistant-experience-header-subtitle text-[11px] text-[var(--text-tertiary)]", children: subtitle })] })] }), _jsxs("div", { className: "lemma-assistant-experience-header-controls flex items-center gap-1", children: [_jsxs("select", { value: controller.conversationModel || "", onChange: (event) => { void handleModelChange(event.target.value || null); }, disabled: isConversationBusy || isUpdatingModel, className: "lemma-assistant-experience-model-picker h-8 rounded-full border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] px-3 text-[11px] text-[var(--text-secondary)]", children: [_jsx("option", { value: "", children: "Auto" }), availableModels.map((availableModel) => (_jsx("option", { value: availableModel, children: availableModel }, availableModel)))] }), _jsx("button", { type: "button", onClick: controller.clearMessages, title: "New conversation", className: "lemma-assistant-experience-new inline-flex h-8 w-8 items-center justify-center rounded-full text-[var(--text-tertiary)] hover:bg-[var(--bg-subtle)] hover:text-[var(--text-secondary)]", children: "\u21BA" })] })] }), _jsxs(AssistantMessageViewport, { className: "lemma-assistant-experience-viewport min-h-[180px]", ref: messagesContainerRef, onScroll: updatePinnedState, children: [controller.messages.length === 0 && !isConversationBusy ? (emptyState || _jsx(EmptyState, { onSendMessage: (message) => { void controller.sendMessage(message); } })) : null, (controller.isLoadingMessages && controller.messages.length === 0) ? (_jsx("div", { className: "lemma-assistant-experience-loading flex justify-center py-6", children: _jsx("span", { className: "lemma-assistant-experience-loading-text text-[var(--text-tertiary)] text-sm", children: "Loading\u2026" }) })) : null, (controller.isLoadingOlderMessages && controller.messages.length > 0) ? (_jsx("div", { className: "lemma-assistant-experience-loading-older flex justify-center py-1", children: _jsx("span", { className: "lemma-assistant-experience-loading-older-text text-[var(--text-tertiary)] text-xs", children: "Loading older\u2026" }) })) : null, displayMessageRows.map((row, index) => {
                                         const previousRow = index > 0 ? displayMessageRows[index - 1] : null;
                                         const showAssistantHeader = row.message.role !== "assistant"
                                             ? false
                                             : previousRow?.message.role !== "assistant";
                                         const includesLastRawMessage = row.sourceIndexes.includes(controller.messages.length - 1);
                                         return (_jsx(MessageGroup, { message: row.message, onNavigateResource: onNavigateResource, onWidgetSendPrompt: handleWidgetSendPrompt, conversationId: controller.activeConversationId, isStreaming: isConversationBusy && includesLastRawMessage && row.message.role === "assistant", showAssistantHeader: showAssistantHeader, renderMessageContent: renderMessageContent, renderPresentedFile: renderPresentedFile, renderToolInvocation: renderToolInvocation }, row.id || index));
-                                    }), isConversationBusy && controller.messages.length > 0 && !activeToolBanner && !lastMessageHasContent ? (_jsx(ThinkingIndicator, {})) : null, controller.error ? (_jsx("div", { className: "bg-[color:color-mix(in_srgb,_var(--state-error)_12%,_transparent)] border border-[color:color-mix(in_srgb,_var(--state-error)_48%,_var(--border-subtle))] rounded-lg p-3 text-xs text-[var(--state-error)] flex items-start gap-2.5", children: _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "Something went wrong" }), _jsx("p", { className: "text-[var(--state-error)] mt-1", children: controller.error })] }) })) : null, (controller.messages.length > 0 || isConversationBusy || !!controller.error) ? (_jsx("div", { "aria-hidden": "true", className: "h-14 shrink-0" })) : null] })] }), _jsx(AssistantComposer, { floating: planSummary ? (isPlanHidden ? (_jsxs("button", { type: "button", onClick: () => setIsPlanHidden(false), className: "inline-flex items-center gap-2 rounded-lg border border-[var(--border-default)] bg-[var(--bg-surface)] px-3 py-1.5 text-[11px] font-medium text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-subtle)] hover:text-[var(--text-primary)]", children: ["Show plan (", planSummary.completedCount, "/", planSummary.steps.length, ")"] })) : (_jsx(PlanSummaryStrip, { plan: planSummary, onHide: () => setIsPlanHidden(true) }))) : undefined, status: isConversationBusy && activeToolBanner ? (_jsx(AssistantStatusPill, { label: activeToolBanner.summary, subtle: true })) : undefined, pendingFiles: controller.pendingFiles.length > 0 ? (_jsx(_Fragment, { children: controller.pendingFiles.map((file) => {
-                                const fileKey = `${file.name}:${file.size}:${file.lastModified}`;
-                                return (_jsx("div", { children: renderPendingFile({
-                                        file,
-                                        remove: () => controller.removePendingFile(fileKey),
-                                    }) }, fileKey));
-                            }) })) : undefined, children: activeAskQuestion && effectiveAskOverlayState && pendingAskUserInput ? (_jsx(AssistantAskOverlay, { questionNumber: effectiveAskOverlayState.currentQuestionIndex + 1, totalQuestions: pendingAskUserInput.questions.length, question: activeAskQuestion.question, options: activeAskQuestion.options, selectedOptions: activeAskAnswers, canContinue: canContinueAsk, continueLabel: effectiveAskOverlayState.currentQuestionIndex >= pendingAskUserInput.questions.length - 1 ? "Use answers" : "Continue", onSelectOption: updateAskAnswer, onContinue: activeAskQuestion.type !== "single_select" || pendingAskUserInput.questions.length > 1 ? continueAskQuestions : undefined, onSkip: () => dismissAskOverlay(effectiveAskOverlayState.toolCallId), mode: activeAskQuestion.type })) : (_jsxs("div", { className: "relative flex items-end gap-2", children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: (event) => { void handleUploadSelection(event.target.files); } }), _jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), disabled: isConversationBusy || controller.isUploadingFiles, className: cx("mb-1.5 ml-1 flex h-10 w-10 items-center justify-center rounded-full border border-[color:color-mix(in_srgb,_var(--border-default)_78%,_transparent)] transition-colors", isConversationBusy || controller.isUploadingFiles
-                                        ? "bg-[var(--bg-subtle)] text-[var(--text-tertiary)]"
-                                        : "bg-[color:color-mix(in_srgb,_var(--bg-surface)_78%,_white)] text-[var(--text-secondary)] hover:bg-[var(--bg-subtle)] hover:text-[var(--text-primary)]"), title: "Upload files", children: controller.isUploadingFiles ? "..." : "+" }), _jsx("textarea", { ref: inputRef, value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, className: "min-h-[52px] max-h-[220px] flex-1 resize-none border-0 bg-transparent px-3 py-2.5 text-[14px] leading-6 text-[var(--text-primary)] placeholder:text-[var(--text-tertiary)] focus:outline-none focus:ring-0", rows: 1, disabled: isConversationBusy }), _jsx("div", { className: "pb-1.5 pr-1.5", children: _jsx("button", { onClick: isConversationBusy ? controller.stop : () => { void handleSubmit(); }, disabled: !isConversationBusy && !draft.trim(), className: cx("flex h-10 w-10 items-center justify-center rounded-full transition-all duration-200", isConversationBusy
-                                            ? "bg-[var(--text-primary)] text-[var(--text-inverse)] hover:scale-105 hover:bg-[color:color-mix(in_srgb,_var(--text-primary)_80%,_transparent)]"
-                                            : draft.trim()
-                                                ? "bg-[var(--brand-primary)] text-[var(--text-on-brand)] shadow-[var(--shadow-xs)] hover:bg-[color:color-mix(in_srgb,_var(--brand-primary)_88%,_var(--text-primary))]"
-                                                : "bg-[var(--bg-subtle)] text-[var(--text-tertiary)]"), title: isConversationBusy ? "Stop generating" : "Send message", children: isConversationBusy ? "[]" : "->" }) })] })) })] })] }));
+                                    }), isConversationBusy && controller.messages.length > 0 && !activeToolBanner && !lastMessageHasContent ? (_jsx(ThinkingIndicator, {})) : null, controller.error ? (_jsx("div", { className: "lemma-assistant-experience-error bg-[color:color-mix(in_srgb,_var(--state-error)_12%,_transparent)] border border-[color:color-mix(in_srgb,_var(--state-error)_48%,_var(--border-subtle))] rounded-lg p-3 text-xs text-[var(--state-error)] flex items-start gap-2.5", children: _jsxs("div", { children: [_jsx("p", { className: "font-medium", children: "Something went wrong" }), _jsx("p", { className: "text-[var(--state-error)] mt-1", children: controller.error })] }) })) : null, (controller.messages.length > 0 || isConversationBusy || !!controller.error) ? (_jsx("div", { "aria-hidden": "true", className: "h-14 shrink-0" })) : null] })] }), _jsxs("div", { className: "lemma-assistant-experience-composer relative rounded-2xl border border-[color:color-mix(in_srgb,_var(--border-default)_80%,_transparent)] bg-[var(--bg-surface)] p-2 shadow-[var(--shadow-md)]", children: [planSummary ? (_jsx("div", { className: "lemma-assistant-experience-plan absolute bottom-[calc(100%+8px)] left-0 right-0 z-20", children: isPlanHidden ? (_jsxs("button", { type: "button", onClick: () => setIsPlanHidden(false), className: "inline-flex items-center gap-2 rounded-lg border border-[var(--border-default)] bg-[var(--bg-surface)] px-3 py-1.5 text-[11px] font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-subtle)] transition-colors", children: ["Show plan (", planSummary.completedCount, "/", planSummary.steps.length, ")"] })) : (_jsx(PlanSummaryStrip, { plan: planSummary, onHide: () => setIsPlanHidden(true) })) })) : null, isConversationBusy && activeToolBanner ? (_jsx("div", { className: "lemma-assistant-experience-status px-2 pb-1", children: _jsx("div", { className: "lemma-assistant-experience-status-pill inline-flex max-w-full items-center gap-1.5 text-[11px] text-[var(--text-tertiary)] animate-in fade-in duration-200", children: _jsx("span", { className: "truncate", children: activeToolBanner.summary }) }) })) : null, activeAskQuestion && effectiveAskOverlayState && pendingAskUserInput ? (_jsx(AssistantAskOverlay, { questionNumber: effectiveAskOverlayState.currentQuestionIndex + 1, totalQuestions: pendingAskUserInput.questions.length, question: activeAskQuestion.question, options: activeAskQuestion.options, selectedOptions: activeAskAnswers, canContinue: canContinueAsk, continueLabel: effectiveAskOverlayState.currentQuestionIndex >= pendingAskUserInput.questions.length - 1 ? "Use answers" : "Continue", onSelectOption: updateAskAnswer, onContinue: activeAskQuestion.type !== "single_select" || pendingAskUserInput.questions.length > 1 ? continueAskQuestions : undefined, onSkip: () => dismissAskOverlay(effectiveAskOverlayState.toolCallId), mode: activeAskQuestion.type })) : (_jsxs("div", { className: "lemma-assistant-experience-composer-body space-y-1.5", children: [controller.pendingFiles.length > 0 ? (_jsx("div", { className: "lemma-assistant-experience-pending flex flex-wrap items-center gap-1.5 px-1", children: controller.pendingFiles.map((file) => {
+                                            const fileKey = `${file.name}:${file.size}:${file.lastModified}`;
+                                            return (_jsx("div", { children: renderPendingFile({
+                                                    file,
+                                                    remove: () => controller.removePendingFile(fileKey),
+                                                }) }, fileKey));
+                                        }) })) : null, _jsxs("div", { className: "lemma-assistant-experience-input-row relative flex items-end gap-2", children: [_jsx("input", { ref: fileInputRef, type: "file", multiple: true, className: "lemma-assistant-experience-file-input hidden", onChange: (event) => { void handleUploadSelection(event.target.files); } }), _jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), disabled: isConversationBusy || controller.isUploadingFiles, className: cx("lemma-assistant-experience-upload", "mb-1.5 ml-1 h-9 w-9 rounded-full flex items-center justify-center transition-colors", isConversationBusy || controller.isUploadingFiles
+                                                    ? "bg-[var(--bg-subtle)] text-[var(--text-tertiary)]"
+                                                    : "bg-[var(--bg-subtle)] text-[var(--text-secondary)] hover:bg-[var(--bg-canvas)] hover:text-[var(--text-primary)]"), title: "Upload files", children: controller.isUploadingFiles ? "…" : "＋" }), _jsx("textarea", { ref: inputRef, value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, className: "lemma-assistant-experience-textarea flex-1 resize-none border-0 bg-transparent px-3 py-2.5 text-[14px] text-[var(--text-primary)] leading-6 focus:ring-0 focus:outline-none placeholder:text-[var(--text-tertiary)] min-h-[48px] max-h-[220px]", rows: 1, disabled: isConversationBusy }), _jsx("div", { className: "lemma-assistant-experience-send-wrap pb-1.5 pr-1.5", children: _jsx("button", { onClick: isConversationBusy ? controller.stop : () => { void handleSubmit(); }, disabled: !isConversationBusy && !draft.trim(), className: cx("lemma-assistant-experience-send", "h-9 w-9 rounded-full flex items-center justify-center transition-all duration-200", isConversationBusy
+                                                        ? "bg-[var(--text-primary)] text-[var(--text-inverse)] hover:bg-[color:color-mix(in_srgb,_var(--text-primary)_80%,_transparent)] hover:scale-105"
+                                                        : draft.trim()
+                                                            ? "bg-[var(--brand-primary)] text-[var(--text-on-brand)] shadow-[var(--shadow-xs)] hover:bg-[color:color-mix(in_srgb,_var(--brand-primary)_88%,_var(--text-primary))]"
+                                                            : "bg-[var(--bg-subtle)] text-[var(--text-tertiary)]"), title: isConversationBusy ? "Stop generating" : "Send message", children: isConversationBusy ? "■" : "→" }) })] })] }))] })] })] }));
 }

package/dist/react/components/assistant-types.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode } from "react";
+import type { ReactNode } from "react";
 import type { AssistantRenderableMessage, AssistantToolInvocation } from "../useAssistantController.js";
 export interface AssistantConversationListItem {
     id: string;
@@ -61,8 +61,6 @@ export interface AssistantExperienceCustomizationProps {
     subtitle?: ReactNode;
     placeholder?: string;
     emptyState?: ReactNode;
-    className?: string;
-    style?: CSSProperties;
     draft?: string;
     onDraftChange?: (value: string) => void;
     showConversationList?: boolean;

package/dist/react/index.d.ts

@@ -13,8 +13,8 @@ export type { UseAssistantRuntimeOptions, UseAssistantRuntimeResult, } from "./u
 export { useAssistantController } from "./useAssistantController.js";
 export type { AssistantAction, AssistantConversationScope, AssistantMessagePart, AssistantRenderableMessage, AssistantToolInvocation, UseAssistantControllerOptions, UseAssistantControllerResult, } from "./useAssistantController.js";
 export type { AssistantConversationRenderArgs, AssistantControllerView, AssistantExperienceCustomizationProps, AssistantMessageRenderArgs, AssistantPendingFileRenderArgs, AssistantPresentedFileRenderArgs, AssistantToolRenderArgs, } from "./components/assistant-types.js";
-export { AssistantAskOverlay, AssistantComposer, AssistantConversationList, AssistantHeader, AssistantMessageViewport, AssistantModelPicker, AssistantPendingFileChip, AssistantShellLayout, AssistantStatusPill, assistantThemeStyles, withAssistantThemeStyles, } from "./components/AssistantChrome.js";
-export type { AssistantAskOverlayProps, AssistantComposerProps, AssistantConversationListProps, AssistantHeaderProps, AssistantMessageViewportProps, AssistantModelPickerProps, AssistantPendingFileChipProps, AssistantShellLayoutProps, AssistantStatusPillProps, } from "./components/AssistantChrome.js";
+export { AssistantAskOverlay, AssistantComposer, AssistantConversationList, AssistantHeader, AssistantMessageViewport, AssistantModelPicker, AssistantPendingFileChip, AssistantShellLayout, AssistantStatusPill, AssistantThemeScope, } from "./components/AssistantChrome.js";
+export type { AssistantAskOverlayProps, AssistantComposerProps, AssistantConversationListProps, AssistantHeaderProps, AssistantMessageViewportProps, AssistantModelPickerProps, AssistantPendingFileChipProps, AssistantShellLayoutProps, AssistantStatusPillProps, AssistantThemeScopeProps, } from "./components/AssistantChrome.js";
 export { AssistantExperienceView } from "./components/AssistantExperience.js";
 export type { ActiveToolBanner, AskUserInputQuestion, AssistantExperienceViewProps, DisplayMessageRow, PendingAskUserInput, PlanStepState, PlanSummaryState, } from "./components/AssistantExperience.js";
 export { AssistantEmbedded } from "./components/AssistantEmbedded.js";

package/dist/react/index.js

@@ -5,7 +5,7 @@ export { useAssistantRun } from "./useAssistantRun.js";
 export { useAssistantSession } from "./useAssistantSession.js";
 export { useAssistantRuntime } from "./useAssistantRuntime.js";
 export { useAssistantController } from "./useAssistantController.js";
-export { AssistantAskOverlay, AssistantComposer, AssistantConversationList, AssistantHeader, AssistantMessageViewport, AssistantModelPicker, AssistantPendingFileChip, AssistantShellLayout, AssistantStatusPill, assistantThemeStyles, withAssistantThemeStyles, } from "./components/AssistantChrome.js";
+export { AssistantAskOverlay, AssistantComposer, AssistantConversationList, AssistantHeader, AssistantMessageViewport, AssistantModelPicker, AssistantPendingFileChip, AssistantShellLayout, AssistantStatusPill, AssistantThemeScope, } from "./components/AssistantChrome.js";
 export { AssistantExperienceView } from "./components/AssistantExperience.js";
 export { AssistantEmbedded } from "./components/AssistantEmbedded.js";
 export { buildDisplayMessageRows, dedupToolInvocations, EmptyState, findPendingAskUserInput, formatAskUserInputAnswers, getActiveToolBanner, extractPresentFilePathsFromInvocation, latestPlanSummary, MessageGroup, PlanSummaryStrip, ThinkingIndicator, } from "./components/AssistantExperience.js";

package/dist/react/styles.css

@@ -0,0 +1,448 @@
+.lemma-assistant-theme {
+  --bg-canvas: #f6f2ea;
+  --bg-surface: #fffdf9;
+  --bg-subtle: #f1ebde;
+  --border-default: #ddd2bb;
+  --border-subtle: #ebe2d0;
+  --text-primary: #241f16;
+  --text-secondary: #5c5344;
+  --text-tertiary: #8a7f6f;
+  --text-inverse: #fffdf9;
+  --text-on-brand: #fffdf9;
+  --brand-primary: #202418;
+  --brand-secondary: #6e8c56;
+  --brand-accent: #c78a2c;
+  --brand-glow: #efe3c7;
+  --state-success: #3e7a3c;
+  --state-error: #b44d36;
+  --state-info: #2f6fb2;
+  --state-warning: #c78a2c;
+  --shadow-xs: 0 1px 2px rgba(36, 31, 22, 0.08);
+  --shadow-sm: 0 8px 24px rgba(36, 31, 22, 0.08);
+  --shadow-md: 0 18px 36px rgba(36, 31, 22, 0.1);
+  --shadow-lg: 0 24px 48px rgba(36, 31, 22, 0.14);
+  color: var(--text-primary);
+  font-family:
+    "Inter",
+    "Segoe UI",
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    sans-serif;
+}
+
+.lemma-assistant-theme,
+.lemma-assistant-theme * {
+  box-sizing: border-box;
+}
+
+.lemma-assistant-theme button,
+.lemma-assistant-theme input,
+.lemma-assistant-theme select,
+.lemma-assistant-theme textarea {
+  font: inherit;
+}
+
+.lemma-assistant-theme a {
+  color: inherit;
+}
+
+.lemma-assistant-theme textarea::placeholder,
+.lemma-assistant-theme input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.lemma-assistant-shell,
+.lemma-assistant-experience {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  min-height: 0;
+  height: 100%;
+}
+
+.lemma-assistant-shell-main,
+.lemma-assistant-experience-main {
+  min-width: 0;
+  min-height: 0;
+}
+
+.lemma-assistant-shell-sidebar,
+.lemma-assistant-experience-sidebar {
+  display: none;
+}
+
+@media (min-width: 1024px) {
+  .lemma-assistant-shell:has(.lemma-assistant-shell-sidebar) {
+    display: grid;
+    grid-template-columns: 280px minmax(0, 1fr);
+    align-items: stretch;
+  }
+
+  .lemma-assistant-shell-sidebar,
+  .lemma-assistant-experience-sidebar {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .lemma-assistant-experience:has(.lemma-assistant-experience-sidebar) {
+    display: grid;
+    grid-template-columns: 280px minmax(0, 1fr);
+    align-items: stretch;
+  }
+}
+
+.lemma-assistant-header,
+.lemma-assistant-experience-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.lemma-assistant-header-copy,
+.lemma-assistant-experience-header-copy {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.lemma-assistant-header-titles,
+.lemma-assistant-experience-header-titles,
+.lemma-assistant-conversation-list-copy,
+.lemma-assistant-experience-sidebar-copy {
+  min-width: 0;
+}
+
+.lemma-assistant-header-title,
+.lemma-assistant-header-subtitle,
+.lemma-assistant-experience-header-title,
+.lemma-assistant-experience-header-subtitle {
+  margin: 0;
+}
+
+.lemma-assistant-header-controls,
+.lemma-assistant-experience-header-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.lemma-assistant-conversation-list,
+.lemma-assistant-experience-sidebar,
+.lemma-assistant-experience-card,
+.lemma-assistant-composer,
+.lemma-assistant-experience-composer {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-default);
+  border-radius: 20px;
+  box-shadow: var(--shadow-lg);
+}
+
+.lemma-assistant-conversation-list-header,
+.lemma-assistant-experience-sidebar-header {
+  border-bottom: 1px solid var(--border-default);
+}
+
+.lemma-assistant-conversation-list-header-row,
+.lemma-assistant-experience-sidebar-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.lemma-assistant-conversation-list-items,
+.lemma-assistant-experience-sidebar-items {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.lemma-assistant-conversation-list-item,
+.lemma-assistant-experience-sidebar-item {
+  display: block;
+  width: 100%;
+  border-radius: 16px;
+}
+
+.lemma-assistant-conversation-list-item-title,
+.lemma-assistant-experience-sidebar-item-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.lemma-assistant-model-picker,
+.lemma-assistant-experience-model-picker {
+  appearance: none;
+  min-width: 132px;
+}
+
+.lemma-assistant-viewport,
+.lemma-assistant-experience-viewport {
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.lemma-assistant-viewport-inner {
+  width: 100%;
+  max-width: 80rem;
+  margin: 0 auto;
+}
+
+.lemma-assistant-composer,
+.lemma-assistant-experience-composer {
+  position: relative;
+  padding: 8px;
+  box-shadow: var(--shadow-md);
+}
+
+.lemma-assistant-composer-floating,
+.lemma-assistant-experience-plan {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(100% + 8px);
+  z-index: 20;
+}
+
+.lemma-assistant-composer-status-rail {
+  min-height: 34px;
+}
+
+.lemma-assistant-composer-status,
+.lemma-assistant-experience-status {
+  min-height: 26px;
+}
+
+.lemma-assistant-composer-pending,
+.lemma-assistant-experience-pending {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.lemma-assistant-pending-file-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+}
+
+.lemma-assistant-pending-file-chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.lemma-assistant-pending-file-chip-remove {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.lemma-assistant-status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.lemma-assistant-status-pill-dot {
+  position: relative;
+}
+
+.lemma-assistant-status-pill-dot-ping {
+  animation: lemma-assistant-ping 1.4s ease-out infinite;
+}
+
+.lemma-assistant-ask-overlay-header,
+.lemma-assistant-ask-overlay-actions,
+.lemma-assistant-experience-input-row {
+  display: flex;
+}
+
+.lemma-assistant-ask-overlay-header {
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.lemma-assistant-ask-overlay-options {
+  overflow-y: auto;
+}
+
+.lemma-assistant-ask-overlay-option {
+  display: block;
+  width: 100%;
+}
+
+.lemma-assistant-ask-overlay-option-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.lemma-assistant-plan-strip-header,
+.lemma-assistant-plan-strip-summary,
+.lemma-assistant-thinking-label,
+.lemma-assistant-widget-card-header,
+.lemma-assistant-message-header,
+.lemma-assistant-tool-rollup-toggle {
+  display: flex;
+  align-items: center;
+}
+
+.lemma-assistant-plan-strip-header,
+.lemma-assistant-widget-card-header {
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.lemma-assistant-plan-strip-steps,
+.lemma-assistant-message-body,
+.lemma-assistant-presented-files,
+.lemma-assistant-tool-rollup,
+.lemma-assistant-tool-rollup-details,
+.lemma-assistant-widget-card,
+.lemma-assistant-reasoning,
+.lemma-assistant-empty-state {
+  min-width: 0;
+}
+
+.lemma-assistant-message {
+  max-width: 78ch;
+}
+
+.lemma-assistant-message-user {
+  display: flex;
+  justify-content: flex-end;
+  max-width: none;
+}
+
+.lemma-assistant-message-user-bubble {
+  max-width: 72ch;
+}
+
+.lemma-assistant-message-text {
+  line-height: 1.65;
+}
+
+.lemma-assistant-tool-rollup-toggle,
+.lemma-assistant-message-header,
+.lemma-assistant-thinking-label,
+.lemma-assistant-reasoning-summary {
+  gap: 6px;
+}
+
+.lemma-assistant-tool-rollup-details,
+.lemma-assistant-reasoning-body {
+  border-left: 1px solid var(--border-default);
+}
+
+.lemma-assistant-tool-rollup-thinking,
+.lemma-assistant-widget-card-frame,
+.lemma-assistant-presented-file > *:first-child {
+  border-radius: 12px;
+}
+
+.lemma-assistant-widget-card-frame {
+  width: 100%;
+}
+
+.lemma-assistant-empty-state {
+  padding: 20px 8px;
+  text-align: center;
+}
+
+.lemma-assistant-empty-state-hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.lemma-assistant-empty-state-suggestions {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 10px;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+@media (min-width: 640px) {
+  .lemma-assistant-empty-state-suggestions {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.lemma-assistant-empty-state-suggestion {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.lemma-assistant-experience-main {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+}
+
+.lemma-assistant-experience-card {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.lemma-assistant-experience-composer-body,
+.lemma-assistant-composer-body {
+  min-width: 0;
+}
+
+.lemma-assistant-experience-input-row {
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.lemma-assistant-experience-textarea {
+  width: 100%;
+  resize: none;
+}
+
+.lemma-assistant-experience-upload,
+.lemma-assistant-experience-send,
+.lemma-assistant-experience-new,
+.lemma-assistant-conversation-list-new {
+  cursor: pointer;
+}
+
+.lemma-assistant-experience-upload:disabled,
+.lemma-assistant-experience-send:disabled,
+.lemma-assistant-model-picker:disabled {
+  cursor: default;
+}
+
+@keyframes lemma-assistant-ping {
+  0% {
+    opacity: 0.55;
+    transform: scale(0.8);
+  }
+
+  70% {
+    opacity: 0;
+    transform: scale(1.8);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1.8);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lemma-sdk",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "Official TypeScript SDK for Lemma pod-scoped APIs",
   "type": "module",
   "main": "dist/index.js",
@@ -29,6 +29,7 @@
       "types": "./dist/react/index.d.ts",
       "default": "./dist/react/index.js"
     },
+    "./react/styles.css": "./dist/react/styles.css",
     "./browser-bundle": "./dist/browser/lemma-client.js"
   },
   "unpkg": "dist/browser/lemma-client.js",
@@ -37,7 +38,7 @@
   ],
   "scripts": {
     "generate:client": "./scripts/generate_openapi_client.sh",
-    "build": "npm run clean && tsc -p tsconfig.json && npm run build:bundle",
+    "build": "npm run clean && tsc -p tsconfig.json && node ./scripts/copy_react_styles.mjs && npm run build:bundle",
     "build:bundle": "tsc -p tsconfig.bundle.json && node ./scripts/build_browser_bundle.mjs",
     "clean": "rm -rf dist",
     "prepublishOnly": "npm run build",