@elabs-ai/components-ai 4.2.0 → 5.1.0

package/src/_chat-shell-rail.tsx

@@ -4,7 +4,9 @@ import { FileText, Sparkles } from "lucide-react";
 export function ContextPanelRail() {
   return (
     <div className="flex h-full flex-col bg-surface">
-      <div className="flex h-12 items-center border-b px-4 text-body font-semibold">Context</div>
+      <div className="flex h-header items-center border-b px-4 text-body font-semibold">
+        Context
+      </div>
       <div className="space-y-2 p-3 text-body">
         <div className="flex items-center gap-2 rounded-md border bg-card p-2">
           <FileText className="size-4 text-muted-foreground" /> Deploy log — wk 23

package/src/_flow-boundary.tsx

@@ -47,7 +47,7 @@ import type { CanvasProps } from "./canvas";
 import type { ControlsProps } from "./controls";
 import type { NodeProps } from "./node";
 import type { PanelProps } from "./panel";
-import type { ToolbarProps } from "./toolbar";
+import type { NodeToolbarProps } from "./toolbar";
 
 const deleteKeyCode = ["Backspace", "Delete"];
 
@@ -247,7 +247,7 @@ export const Panel = ({ className, ...props }: PanelProps) => (
   />
 );
 
-export const Toolbar = ({ className, ...props }: ToolbarProps) => (
+export const Toolbar = ({ className, ...props }: NodeToolbarProps) => (
   <NodeToolbar
     className={cn("flex items-center gap-1 rounded-sm border bg-background p-1.5", className)}
     position={Position.Bottom}

package/src/_persona-rive.tsx

@@ -40,8 +40,7 @@ import type { RiveParameters } from "@rive-app/react-webgl2";
 // below to `undefined`, and the guard turns that into the render-phase throw
 // `LazyEngineBoundary` (see `persona.tsx`) already catches.
 import * as RiveModule from "@rive-app/react-webgl2";
-import type { ReactNode } from "react";
-import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import type { AssertAssignable } from "./_lazy-boundary-conformance";
 import type { PersonaRiveEventCallback } from "./persona";
@@ -132,39 +131,6 @@ const useTheme = (enabled: boolean) => {
   return theme;
 };
 
-interface PersonaWithModelProps {
-  rive: ReturnType<typeof useRive>["rive"];
-  source: PersonaSource;
-  children: ReactNode;
-}
-
-const PersonaWithModel = memo(({ rive, source, children }: PersonaWithModelProps) => {
-  const theme = useTheme(source.dynamicColor);
-  const viewModel = useViewModel(rive, { useDefault: true });
-  const viewModelInstance = useViewModelInstance(viewModel, {
-    rive,
-    useDefault: true,
-  });
-  const viewModelInstanceColor = useViewModelInstanceColor("color", viewModelInstance);
-
-  useEffect(() => {
-    if (!(viewModelInstanceColor && source.dynamicColor)) {
-      return;
-    }
-
-    const [r, g, b] = theme === "dark" ? [255, 255, 255] : [0, 0, 0];
-    viewModelInstanceColor.setRgb(r, g, b);
-  }, [viewModelInstanceColor, theme, source.dynamicColor]);
-
-  return children;
-});
-
-PersonaWithModel.displayName = "PersonaWithModel";
-
-const PersonaWithoutModel = memo(({ children }: { children: ReactNode }) => children);
-
-PersonaWithoutModel.displayName = "PersonaWithoutModel";
-
 export interface PersonaRiveProps {
   className?: string;
   onLoad?: PersonaRiveEventCallback;
@@ -268,13 +234,33 @@ const PersonaRive = ({
     }
   }, [state, listeningInput, thinkingInput, speakingInput, asleepInput]);
 
-  const Wrapper = source.hasModel ? PersonaWithModel : PersonaWithoutModel;
+  // The view-model hooks run here rather than in a child that takes `rive` as
+  // a prop. React 19.2's development build logs each re-render's changed props
+  // to the browser's performance track by walking every object prop a few
+  // levels deep. That walk never finished on a loaded Rive instance: handing
+  // one to a component as a prop froze the tab until it ran out of memory, in
+  // development builds only. Keep the instance out of props. Each hook accepts
+  // `null`, which is how a source without a view model opts out.
+  const modelRive = source.hasModel ? rive : null;
+  const dynamicColor = source.hasModel && source.dynamicColor;
+  const theme = useTheme(dynamicColor);
+  const viewModel = useViewModel(modelRive, { useDefault: true });
+  const viewModelInstance = useViewModelInstance(viewModel, {
+    rive: modelRive,
+    useDefault: true,
+  });
+  const viewModelInstanceColor = useViewModelInstanceColor("color", viewModelInstance);
 
-  return (
-    <Wrapper rive={rive} source={source}>
-      <RiveComponent className={cn("size-16 shrink-0", className)} />
-    </Wrapper>
-  );
+  useEffect(() => {
+    if (!(viewModelInstanceColor && dynamicColor)) {
+      return;
+    }
+
+    const [r, g, b] = theme === "dark" ? [255, 255, 255] : [0, 0, 0];
+    viewModelInstanceColor.setRgb(r, g, b);
+  }, [viewModelInstanceColor, theme, dynamicColor]);
+
+  return <RiveComponent className={cn("size-16 shrink-0", className)} />;
 };
 
 export default PersonaRive;