a2ui-react 0.4.0 → 0.5.0

package/README.md

@@ -20,32 +20,19 @@ yarn add a2ui-react
 
 ## Setup
 
-### 1. Configure Tailwind v4 (Critical)
-
-Add the `@source` directive to your CSS so Tailwind scans the component classes:
+Add the theme import and `@source` directive to your main CSS file:
 
 ```css
-@import 'tailwindcss';
-@source "../node_modules/a2ui-react/dist";
-```
-
-Without this, Tailwind v4 won't scan node_modules and components render unstyled.
-
-### 2. Import Theme CSS
+/* Import the a2ui-react theme (includes Tailwind and all theme variables) */
+@import 'a2ui-react/theme.css';
 
-Import the theme CSS in your app entry point:
-
-```tsx
-import 'a2ui-react/theme.css'
+/* Tell Tailwind to scan the package for class usage */
+@source "../node_modules/a2ui-react/dist";
 ```
 
-> **Vite users**: If the import doesn't resolve, copy the CSS locally:
-> ```bash
-> cp node_modules/a2ui-react/dist/theme.css src/a2ui-theme.css
-> ```
-> Then import `'./a2ui-theme.css'` instead.
-
-Or if using your own Tailwind setup, ensure your CSS includes the [shadcn/ui theme variables](https://ui.shadcn.com/docs/theming).
+Both lines are required:
+- `theme.css` provides Tailwind, shadcn/ui theme variables, and alert color tokens
+- `@source` ensures Tailwind includes the component classes (v4 doesn't scan node_modules by default)
 
 ## Quick Start
 
@@ -243,14 +230,7 @@ The `id` must be present both in the update wrapper AND inside the component obj
 
 ### a2ui-go Compatibility
 
-If using [a2ui-go](https://github.com/burka/a2ui-go) as your backend, you'll need to transform messages:
-
-| a2ui-go format | a2ui-react format |
-|----------------|-------------------|
-| `surfaceUpdate.components` | `surfaceUpdate.updates` |
-| `{"id":"x", "Text":{...}}` | `{"id":"x", "component":{"type":"Text",...}}` |
-| `text` field | `content` field |
-| `usageHint` field | `style` field |
+Works out of the box with [a2ui-go](https://github.com/burka/a2ui-go) - both use the A2UI v0.9 message format.
 
 ## License
 

package/dist/index.js

@@ -696,8 +696,13 @@ function A2UISurface({
   const surface = useSurface(surfaceId);
   const [loading, setLoading] = React7.useState(false);
   const [error, setError] = React7.useState(null);
+  const processedMessagesRef = React7.useRef(null);
   React7.useEffect(() => {
     if (messages) {
+      if (messages === processedMessagesRef.current) {
+        return;
+      }
+      processedMessagesRef.current = messages;
       try {
         for (const message of messages) {
           processMessage(message, store);
@@ -4771,14 +4776,14 @@ var TextScrambleRenderer = {
   type: "TextScramble",
   render: ({ component }) => {
     const [displayText, setDisplayText] = React7.useState(component.content);
-    const [isAnimating, setIsAnimating] = React7.useState(false);
+    const isAnimatingRef = React7.useRef(false);
     const prefersReducedMotion = useReducedMotion();
     const speed = component.speed || 30;
     const characters = component.characters || defaultCharacters;
     const trigger = component.trigger || "mount";
-    const scramble = () => {
-      if (prefersReducedMotion || isAnimating) return;
-      setIsAnimating(true);
+    const scramble = React7.useCallback(() => {
+      if (prefersReducedMotion || isAnimatingRef.current) return;
+      isAnimatingRef.current = true;
       const target = component.content;
       const length = target.length;
       let iteration = 0;
@@ -4797,10 +4802,10 @@ var TextScrambleRenderer = {
         if (iteration >= maxIterations) {
           clearInterval(interval);
           setDisplayText(target);
-          setIsAnimating(false);
+          isAnimatingRef.current = false;
         }
       }, speed);
-    };
+    }, [component.content, characters, speed, prefersReducedMotion]);
     React7.useEffect(() => {
       if (trigger === "mount") {
         scramble();