@elabs-ai/components-ai 4.1.0 → 4.2.0

package/README.md

@@ -115,7 +115,7 @@ it regardless of what your app's manifest says. A hoisting layout
 additionally makes `import("mermaid")` resolve, so the runtime capability-gap
 panel never renders for you; skipping the peer still means you never have to
 declare `mermaid` yourself, and a genuinely unresolved engine still fails
-actionably rather than crashing. `pnpm optional-peers:check` (issue #94)
+actionably rather than crashing. `pnpm check --rule optional-peer-transitives` (issue #94)
 tracks this as a defeated optional peer and will fail the day it is fixed
 upstream.
 
@@ -178,6 +178,6 @@ Heavy engines load on demand rather than riding in your entry chunk:
   `preloadMermaid()` to warm it early on a surface you know renders diagrams.
 - **The Rive WebGL2 runtime** loads only when a `Persona` mounts.
 
-Both are enforced by `pnpm heavy-deps:check`. See ADR 0019. The remaining eager
+Both are enforced by `pnpm check --rule eager-heavy-deps`. See ADR 0019. The remaining eager
 engines (React Flow, xterm, media-chrome) are tracked in that gate's baseline
 (the React Flow canvas set is a separate, intentional surface — see ADR 0018).

package/dist/index.d.ts

@@ -702,7 +702,7 @@ interface TokenizedCode {
     fg: string;
     bg: string;
 }
-declare const highlightCode: (code: string, language: BundledLanguage, callback?: (result: TokenizedCode) => void, el?: Element | null) => TokenizedCode | null;
+declare const highlightCode: (code: string, language: BundledLanguage, callback?: (result: TokenizedCode) => void, el?: Element | null, skipCache?: boolean) => TokenizedCode | null;
 declare const CodeBlockContainer: ({ className, language, style, ...props }: HTMLAttributes<HTMLDivElement> & {
     language: string;
 }) => react.JSX.Element;
@@ -710,11 +710,12 @@ declare const CodeBlockHeader: ({ children, className, ...props }: HTMLAttribute
 declare const CodeBlockTitle: ({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
 declare const CodeBlockFilename: ({ children, className, ...props }: HTMLAttributes<HTMLSpanElement>) => react.JSX.Element;
 declare const CodeBlockActions: ({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
-declare const CodeBlockContent: ({ code, language, showLineNumbers, wrap, }: {
+declare const CodeBlockContent: ({ code, language, showLineNumbers, wrap, isStreaming, }: {
     code: string;
     language: BundledLanguage;
     showLineNumbers?: boolean;
     wrap?: boolean;
+    isStreaming?: boolean;
 }) => react.JSX.Element;
 declare const CodeBlock: ({ code, language, showLineNumbers, wrap, isStreaming, className, children, ...props }: CodeBlockProps) => react.JSX.Element;
 type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
@@ -766,7 +767,7 @@ type CommitCopyButtonProps = ComponentProps<typeof Button> & {
     onError?: (error: Error) => void;
     timeout?: number;
 };
-declare const CommitCopyButton: ({ hash, onCopy, onError, timeout, children, className, ...props }: CommitCopyButtonProps) => react.JSX.Element;
+declare const CommitCopyButton: ({ hash, onCopy, onError, timeout, children, className, "aria-label": ariaLabel, ...props }: CommitCopyButtonProps) => react.JSX.Element;
 type CommitContentProps = ComponentProps<typeof CollapsibleContent>;
 declare const CommitContent: ({ className, children, ...props }: CommitContentProps) => react.JSX.Element;
 type CommitFilesProps = HTMLAttributes<HTMLDivElement>;
@@ -1490,8 +1491,19 @@ declare const Connection: ConnectionLineComponent;
 type ControlsProps = ComponentProps<typeof Controls$1>;
 declare const Controls: (props: ControlsProps) => react.JSX.Element;
 
-type ConversationProps = ComponentProps<typeof StickToBottom>;
-declare const Conversation: ({ className, ...props }: ConversationProps) => react.JSX.Element;
+type ConversationProps = ComponentProps<typeof StickToBottom> & {
+    /**
+     * The assistant response is still arriving (loading-states.md
+     * `isStreaming`). `role="log"` otherwise announces every incoming token to
+     * assistive tech as it streams in — deafening. While `true`, `aria-live`
+     * is suppressed (`"off"`) and `aria-busy` is set; once streaming ends,
+     * `aria-live` returns to `"polite"` so the settled content is what
+     * actually gets announced.
+     * @default false
+     */
+    isStreaming?: boolean;
+};
+declare const Conversation: ({ className, isStreaming, ...props }: ConversationProps) => react.JSX.Element;
 type ConversationContentProps = ComponentProps<typeof StickToBottom.Content>;
 declare const ConversationContent: ({ className, scrollClassName, ...props }: ConversationContentProps) => react.JSX.Element;
 type ConversationEmptyStateProps = ComponentProps<"div"> & {
@@ -1590,7 +1602,7 @@ type EnvironmentVariableCopyButtonProps = ComponentProps<typeof Button> & {
     timeout?: number;
     copyFormat?: "name" | "value" | "export";
 };
-declare const EnvironmentVariableCopyButton: ({ onCopy, onError, timeout, copyFormat, children, className, ...props }: EnvironmentVariableCopyButtonProps) => react.JSX.Element;
+declare const EnvironmentVariableCopyButton: ({ onCopy, onError, timeout, copyFormat, children, className, "aria-label": ariaLabel, ...props }: EnvironmentVariableCopyButtonProps) => react.JSX.Element;
 type EnvironmentVariableRequiredProps = ComponentProps<typeof Badge>;
 declare const EnvironmentVariableRequired: ({ className, children, ...props }: EnvironmentVariableRequiredProps) => react.JSX.Element;
 
@@ -2239,7 +2251,7 @@ type MessageBranchProps = HTMLAttributes<HTMLDivElement> & {
 };
 declare const MessageBranch: ({ branch: branchProp, defaultBranch, onBranchChange, className, ...props }: MessageBranchProps) => react.JSX.Element;
 type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
-declare const MessageBranchContent: ({ children, ...props }: MessageBranchContentProps) => react.JSX.Element[];
+declare const MessageBranchContent: ({ children, id, ...props }: MessageBranchContentProps) => react.JSX.Element[];
 type MessageBranchSelectorProps = ComponentProps<typeof ButtonGroup>;
 declare const MessageBranchSelector: ({ className, ...props }: MessageBranchSelectorProps) => react.JSX.Element | null;
 type MessageBranchPreviousProps = ComponentProps<typeof Button>;
@@ -3386,6 +3398,8 @@ interface MessageFormProviderProps {
     /** In-flight submit: controls disabled, the submit button shows a spinner. */
     submitting?: boolean;
     /** The spec is still streaming in (renders a skeleton when no fields yet). */
+    isStreaming?: boolean;
+    /** @deprecated Use `isStreaming`. */
     streaming?: boolean;
     children: ReactNode;
 }
@@ -3393,7 +3407,7 @@ interface MessageFormProviderProps {
  * Lifts the form values. Controlled (pass `values`) or uncontrolled.
  * Derives `isControlled = values !== undefined` and never flips modes.
  */
-declare function MessageFormProvider({ spec, values: valuesProp, onChange, onSubmit, disabled, submitted, submitting, streaming, children, }: MessageFormProviderProps): react.JSX.Element;
+declare function MessageFormProvider({ spec, values: valuesProp, onChange, onSubmit, disabled, submitted, submitting, isStreaming, streaming, children, }: MessageFormProviderProps): react.JSX.Element;
 interface MessageFormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /** The field's `name` (its key in the spec + values). */
     name: string;
@@ -3455,6 +3469,8 @@ interface MessageFormProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSubmi
     /** In-flight submit: controls disabled, spinner on submit. */
     submitting?: boolean;
     /** The spec is still streaming (renders a skeleton when no fields yet). */
+    isStreaming?: boolean;
+    /** @deprecated Use `isStreaming`. */
     streaming?: boolean;
 }
 /**
@@ -3497,11 +3513,11 @@ declare const columnSpecSchema: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     key: string;
     label?: string | undefined;
-    format?: "number" | "text" | "percent" | "currency" | "date" | "badge" | undefined;
+    format?: "number" | "text" | "percent" | "currency" | "badge" | "date" | undefined;
 }, {
     key: string;
     label?: string | undefined;
-    format?: "number" | "text" | "percent" | "currency" | "date" | "badge" | undefined;
+    format?: "number" | "text" | "percent" | "currency" | "badge" | "date" | undefined;
 }>;
 type ColumnSpec = z.infer<typeof columnSpecSchema>;
 /** A single row: an object keyed by column `key`. */
@@ -3524,11 +3540,11 @@ declare const tableSpecSchema: z.ZodObject<{
     }, "strip", z.ZodTypeAny, {
         key: string;
         label?: string | undefined;
-        format?: "number" | "text" | "percent" | "currency" | "date" | "badge" | undefined;
+        format?: "number" | "text" | "percent" | "currency" | "badge" | "date" | undefined;
     }, {
         key: string;
         label?: string | undefined;
-        format?: "number" | "text" | "percent" | "currency" | "date" | "badge" | undefined;
+        format?: "number" | "text" | "percent" | "currency" | "badge" | "date" | undefined;
     }>, "many">;
     /** Row objects keyed by column `key`. */
     rows: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
@@ -3538,7 +3554,7 @@ declare const tableSpecSchema: z.ZodObject<{
     columns: {
         key: string;
         label?: string | undefined;
-        format?: "number" | "text" | "percent" | "currency" | "date" | "badge" | undefined;
+        format?: "number" | "text" | "percent" | "currency" | "badge" | "date" | undefined;
     }[];
     rows: Record<string, unknown>[];
     title?: string | undefined;
@@ -3547,7 +3563,7 @@ declare const tableSpecSchema: z.ZodObject<{
     columns: {
         key: string;
         label?: string | undefined;
-        format?: "number" | "text" | "percent" | "currency" | "date" | "badge" | undefined;
+        format?: "number" | "text" | "percent" | "currency" | "badge" | "date" | undefined;
     }[];
     rows: Record<string, unknown>[];
     title?: string | undefined;
@@ -3627,6 +3643,8 @@ interface MessageTableProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"
     /** Per-cell render override for custom composition. */
     renderCell?: RenderCell;
     /** The spec is still streaming (columns-but-no-rows shows skeleton rows). */
+    isStreaming?: boolean;
+    /** @deprecated Use `isStreaming`. */
     streaming?: boolean;
 }
 /**
@@ -4443,7 +4461,7 @@ type StackTraceCopyButtonProps = ComponentProps<typeof Button> & {
     onError?: (error: Error) => void;
     timeout?: number;
 };
-declare const StackTraceCopyButton: react.MemoExoticComponent<({ onCopy, onError, timeout, className, children, ...props }: StackTraceCopyButtonProps) => react.JSX.Element>;
+declare const StackTraceCopyButton: react.MemoExoticComponent<({ onCopy, onError, timeout, className, children, "aria-label": ariaLabel, ...props }: StackTraceCopyButtonProps) => react.JSX.Element>;
 type StackTraceExpandButtonProps = ComponentProps<"div">;
 declare const StackTraceExpandButton: react.MemoExoticComponent<({ className, ...props }: StackTraceExpandButtonProps) => react.JSX.Element>;
 type StackTraceContentProps = ComponentProps<typeof CollapsibleContent> & {
@@ -4937,8 +4955,17 @@ type WebPreviewBodyProps = Omit<ComponentProps<"iframe">, "loading"> & {
      * @default false
      */
     loading?: boolean | ReactNode;
+    /**
+     * Adds `allow-same-origin` to the iframe sandbox. **Opt-in, off by
+     * default**: combined with `allow-scripts`, a same-origin previewed page
+     * can script its way out of the sandbox restrictions entirely (its own
+     * `<iframe>` reads as unsandboxed once it shares the origin). Only enable
+     * this for content you trust to be same-origin-safe.
+     * @default false
+     */
+    allowSameOrigin?: boolean;
 };
-declare const WebPreviewBody: ({ className, loading, src, ...props }: WebPreviewBodyProps) => react.JSX.Element;
+declare const WebPreviewBody: ({ className, loading, src, allowSameOrigin, ...props }: WebPreviewBodyProps) => react.JSX.Element;
 type WebPreviewConsoleProps = ComponentProps<"div"> & {
     logs?: {
         level: "log" | "warn" | "error";