a2ui-react 0.2.1 → 0.4.0

package/README.md

@@ -20,12 +20,31 @@ yarn add a2ui-react
 
 ## Setup
 
-Import the default theme CSS in your app entry point:
+### 1. Configure Tailwind v4 (Critical)
+
+Add the `@source` directive to your CSS so Tailwind scans the component classes:
+
+```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 theme CSS in your app entry point:
 
 ```tsx
 import 'a2ui-react/theme.css'
 ```
 
+> **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).
 
 ## Quick Start
@@ -193,7 +212,45 @@ function App() {
 ## Requirements
 
 - React 18.0.0+ or React 19.0.0+
-- Tailwind CSS (for styling)
+- Tailwind CSS v4 (for styling)
+
+## Important Notes
+
+### Component ID Format
+
+The `id` must be present both in the update wrapper AND inside the component object:
+
+```tsx
+// ✅ Correct
+{
+  id: 'greeting',
+  component: {
+    type: 'Text',
+    id: 'greeting',  // Required inside component
+    content: 'Hello!'
+  }
+}
+
+// ❌ Won't work - missing id inside component
+{
+  id: 'greeting',
+  component: {
+    type: 'Text',
+    content: 'Hello!'
+  }
+}
+```
+
+### 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 |
 
 ## License
 

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { AlertComponent, MainComponent, NavComponent, SectionComponent, AsideComponent, HeaderComponent, FooterComponent, ArticleComponent, LiveRegionComponent, ProgressComponent, SkipLinkComponent, BubbleBackgroundComponent, FireworksBackgroundComponent, GravityStarsBackgroundComponent, HexagonBackgroundComponent, HoleBackgroundComponent, StarsBackgroundComponent, CopyButtonComponent, FlipButtonComponent, GlowButtonComponent, IconButtonComponent, LiquidButtonComponent, MagneticButtonComponent, RippleButtonComponent, ShimmerButtonComponent, ThemeTogglerButtonComponent, CursorComponent, ButtonComponent, CardComponent, CheckboxComponent, ModalComponent, SelectComponent, TabsComponent, TextComponent, AreaChartComponent, BarChartComponent, ChartDataItem, LineChartComponent, PieChartComponent } from 'a2ui-react-core';
+import { AlertComponent, MainComponent, NavComponent, SectionComponent, AsideComponent, HeaderComponent, FooterComponent, ArticleComponent, LiveRegionComponent, ProgressComponent, SkipLinkComponent, BubbleBackgroundComponent, FireworksBackgroundComponent, GravityStarsBackgroundComponent, HexagonBackgroundComponent, HoleBackgroundComponent, StarsBackgroundComponent, CopyButtonComponent, FlipButtonComponent, GlowButtonComponent, IconButtonComponent, LiquidButtonComponent, MagneticButtonComponent, RippleButtonComponent, ShimmerButtonComponent, ThemeTogglerButtonComponent, CursorComponent, ButtonComponent, CardComponent, CheckboxComponent, ModalComponent, SelectComponent, TabsComponent, TextComponent, AreaChartComponent, BarChartComponent, ChartDataItem, LineChartComponent, PieChartComponent, ListComponent, StepperComponent, AudioPlayerComponent, DividerComponent, IconComponent, ImageComponent, MarkdownComponent, SkeletonComponent, SpinnerComponent, ToastComponent, VideoComponent } from 'a2ui-react-core';
 export { A2UIComponent, A2UIMessage, A2UIStore, Alignment, BaseComponent, BeginRenderingMessage, ButtonComponent, CardComponent, CheckboxComponent, ColumnComponent, ComponentCatalog, ComponentNode, ComponentUpdate, DataModelUpdateMessage, DataValue, DateTimeInputComponent, DeleteSurfaceMessage, Distribution, DividerComponent, ErrorCallback, IconComponent, ImageComponent, InputType, ListComponent, MessageCallback, MessageParseError, ModalComponent, MultipleChoiceComponent, Orientation, RowComponent, SelectComponent, SelectOption, SliderComponent, StoreSnapshot, StreamParser, Surface, SurfaceUpdateMessage, TabItem, TabsComponent, TextComponent, TextFieldComponent, TextStyle, buildMessages, c, createStore, createStreamParser, getDataByPath, isBeginRenderingMessage, isDataModelUpdateMessage, isDeleteSurfaceMessage, isSurfaceUpdateMessage, parseJSONL, parseMessage, setDataByPath } from 'a2ui-react-core';
 import * as a2ui_react_react from 'a2ui-react-react';
 import { A2UIRenderer, DataAccessor } from 'a2ui-react-react';
@@ -440,6 +440,36 @@ declare const LineChartRenderer: A2UIRenderer<LineChartComponent>;
 
 declare const PieChartRenderer: A2UIRenderer<PieChartComponent>;
 
+declare const CardRenderer: A2UIRenderer<CardComponent>;
+
+declare const ListRenderer: A2UIRenderer<ListComponent>;
+
+declare const ModalRenderer: A2UIRenderer<ModalComponent>;
+
+declare const StepperRenderer: A2UIRenderer<StepperComponent>;
+
+declare const TabsRenderer: A2UIRenderer<TabsComponent>;
+
+declare const AudioPlayerRenderer: A2UIRenderer<AudioPlayerComponent>;
+
+declare const DividerRenderer: A2UIRenderer<DividerComponent>;
+
+declare const IconRenderer: A2UIRenderer<IconComponent>;
+
+declare const ImageRenderer: A2UIRenderer<ImageComponent>;
+
+declare const MarkdownRenderer: A2UIRenderer<MarkdownComponent>;
+
+declare const SkeletonRenderer: A2UIRenderer<SkeletonComponent>;
+
+declare const SpinnerRenderer: A2UIRenderer<SpinnerComponent>;
+
+declare const TextRenderer: A2UIRenderer<TextComponent>;
+
+declare const ToastRenderer: A2UIRenderer<ToastComponent>;
+
+declare const VideoRenderer: A2UIRenderer<VideoComponent>;
+
 /**
  * Renderer registry type for shadcn components
  */
@@ -538,4 +568,4 @@ declare function createCompleteRegistry(): a2ui_react_react.ComponentRegistry;
  */
 declare const version = "0.1.0";
 
-export { AlertRenderer, AnimatedAccordionRenderer, AnimatedAvatarGroupRenderer, AnimatedButtonOverride, AnimatedCardOverride, AnimatedCardRenderer, AnimatedCheckboxOverride, AnimatedDialogRenderer, AnimatedModalOverride, AnimatedSelectOverride, AnimatedTabsOverride, AnimatedTabsRenderer, AnimatedTextOverride, AnimatedTooltipRenderer, AreaChartRenderer, ArticleRenderer, AsideRenderer, AuroraBackgroundRenderer, BarChartRenderer, BlurRevealTextRenderer, BubbleBackgroundRenderer, Button, type ButtonProps, Checkbox, CopyButtonRenderer, CountUpRenderer, CursorRenderer, DEFAULT_CHART_COLORS, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type Dimensions, FireworksBackgroundRenderer, FlipButtonRenderer, FlipCardRenderer, FooterRenderer, GlowButtonRenderer, GradientBackgroundRenderer, GradientTextRenderer, GravityStarsBackgroundRenderer, HeaderRenderer, HexagonBackgroundRenderer, HoleBackgroundRenderer, IconButtonRenderer, Input, type InputProps, Label, LineChartRenderer, LiquidButtonRenderer, LiveRegionRenderer, MagneticButtonRenderer, MainRenderer, MorphingIconRenderer, NavRenderer, ParticlesBackgroundRenderer, PieChartRenderer, ProgressRenderer, type RendererRegistry, RippleButtonRenderer, SectionRenderer, ShimmerButtonRenderer, SkipLinkRenderer, SpotlightRenderer, StarsBackgroundRenderer, Tabs, TabsContent, TabsList, TabsTrigger, TextScrambleRenderer, Textarea, type TextareaProps, ThemeTogglerButtonRenderer, TypewriterTextRenderer, a11yRenderers, allAnimatedRenderers, allRenderers, animatedOverrides, animatedRenderers, buildChartConfig, buttonVariants, chartRenderers, cn, createAccessibleRegistry, createAnimatedRegistry, createCompleteRegistry, createFullyAnimatedRegistry, createShadcnRegistry, getChartColor, getChartData, shadcnRenderers, transformToRechartsData, useContainerDimensions, useReducedMotion, version };
+export { AlertRenderer, AnimatedAccordionRenderer, AnimatedAvatarGroupRenderer, AnimatedButtonOverride, AnimatedCardOverride, AnimatedCardRenderer, AnimatedCheckboxOverride, AnimatedDialogRenderer, AnimatedModalOverride, AnimatedSelectOverride, AnimatedTabsOverride, AnimatedTabsRenderer, AnimatedTextOverride, AnimatedTooltipRenderer, AreaChartRenderer, ArticleRenderer, AsideRenderer, AudioPlayerRenderer, AuroraBackgroundRenderer, BarChartRenderer, BlurRevealTextRenderer, BubbleBackgroundRenderer, Button, type ButtonProps, CardRenderer, Checkbox, CopyButtonRenderer, CountUpRenderer, CursorRenderer, DEFAULT_CHART_COLORS, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type Dimensions, DividerRenderer, FireworksBackgroundRenderer, FlipButtonRenderer, FlipCardRenderer, FooterRenderer, GlowButtonRenderer, GradientBackgroundRenderer, GradientTextRenderer, GravityStarsBackgroundRenderer, HeaderRenderer, HexagonBackgroundRenderer, HoleBackgroundRenderer, IconButtonRenderer, IconRenderer, ImageRenderer, Input, type InputProps, Label, LineChartRenderer, LiquidButtonRenderer, ListRenderer, LiveRegionRenderer, MagneticButtonRenderer, MainRenderer, MarkdownRenderer, ModalRenderer, MorphingIconRenderer, NavRenderer, ParticlesBackgroundRenderer, PieChartRenderer, ProgressRenderer, type RendererRegistry, RippleButtonRenderer, SectionRenderer, ShimmerButtonRenderer, SkeletonRenderer, SkipLinkRenderer, SpinnerRenderer, SpotlightRenderer, StarsBackgroundRenderer, StepperRenderer, Tabs, TabsContent, TabsList, TabsRenderer, TabsTrigger, TextRenderer, TextScrambleRenderer, Textarea, type TextareaProps, ThemeTogglerButtonRenderer, ToastRenderer, TypewriterTextRenderer, VideoRenderer, a11yRenderers, allAnimatedRenderers, allRenderers, animatedOverrides, animatedRenderers, buildChartConfig, buttonVariants, chartRenderers, cn, createAccessibleRegistry, createAnimatedRegistry, createCompleteRegistry, createFullyAnimatedRegistry, createShadcnRegistry, getChartColor, getChartData, shadcnRenderers, transformToRechartsData, useContainerDimensions, useReducedMotion, version };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AlertComponent, MainComponent, NavComponent, SectionComponent, AsideComponent, HeaderComponent, FooterComponent, ArticleComponent, LiveRegionComponent, ProgressComponent, SkipLinkComponent, BubbleBackgroundComponent, FireworksBackgroundComponent, GravityStarsBackgroundComponent, HexagonBackgroundComponent, HoleBackgroundComponent, StarsBackgroundComponent, CopyButtonComponent, FlipButtonComponent, GlowButtonComponent, IconButtonComponent, LiquidButtonComponent, MagneticButtonComponent, RippleButtonComponent, ShimmerButtonComponent, ThemeTogglerButtonComponent, CursorComponent, ButtonComponent, CardComponent, CheckboxComponent, ModalComponent, SelectComponent, TabsComponent, TextComponent, AreaChartComponent, BarChartComponent, ChartDataItem, LineChartComponent, PieChartComponent } from 'a2ui-react-core';
+import { AlertComponent, MainComponent, NavComponent, SectionComponent, AsideComponent, HeaderComponent, FooterComponent, ArticleComponent, LiveRegionComponent, ProgressComponent, SkipLinkComponent, BubbleBackgroundComponent, FireworksBackgroundComponent, GravityStarsBackgroundComponent, HexagonBackgroundComponent, HoleBackgroundComponent, StarsBackgroundComponent, CopyButtonComponent, FlipButtonComponent, GlowButtonComponent, IconButtonComponent, LiquidButtonComponent, MagneticButtonComponent, RippleButtonComponent, ShimmerButtonComponent, ThemeTogglerButtonComponent, CursorComponent, ButtonComponent, CardComponent, CheckboxComponent, ModalComponent, SelectComponent, TabsComponent, TextComponent, AreaChartComponent, BarChartComponent, ChartDataItem, LineChartComponent, PieChartComponent, ListComponent, StepperComponent, AudioPlayerComponent, DividerComponent, IconComponent, ImageComponent, MarkdownComponent, SkeletonComponent, SpinnerComponent, ToastComponent, VideoComponent } from 'a2ui-react-core';
 export { A2UIComponent, A2UIMessage, A2UIStore, Alignment, BaseComponent, BeginRenderingMessage, ButtonComponent, CardComponent, CheckboxComponent, ColumnComponent, ComponentCatalog, ComponentNode, ComponentUpdate, DataModelUpdateMessage, DataValue, DateTimeInputComponent, DeleteSurfaceMessage, Distribution, DividerComponent, ErrorCallback, IconComponent, ImageComponent, InputType, ListComponent, MessageCallback, MessageParseError, ModalComponent, MultipleChoiceComponent, Orientation, RowComponent, SelectComponent, SelectOption, SliderComponent, StoreSnapshot, StreamParser, Surface, SurfaceUpdateMessage, TabItem, TabsComponent, TextComponent, TextFieldComponent, TextStyle, buildMessages, c, createStore, createStreamParser, getDataByPath, isBeginRenderingMessage, isDataModelUpdateMessage, isDeleteSurfaceMessage, isSurfaceUpdateMessage, parseJSONL, parseMessage, setDataByPath } from 'a2ui-react-core';
 import * as a2ui_react_react from 'a2ui-react-react';
 import { A2UIRenderer, DataAccessor } from 'a2ui-react-react';
@@ -440,6 +440,36 @@ declare const LineChartRenderer: A2UIRenderer<LineChartComponent>;
 
 declare const PieChartRenderer: A2UIRenderer<PieChartComponent>;
 
+declare const CardRenderer: A2UIRenderer<CardComponent>;
+
+declare const ListRenderer: A2UIRenderer<ListComponent>;
+
+declare const ModalRenderer: A2UIRenderer<ModalComponent>;
+
+declare const StepperRenderer: A2UIRenderer<StepperComponent>;
+
+declare const TabsRenderer: A2UIRenderer<TabsComponent>;
+
+declare const AudioPlayerRenderer: A2UIRenderer<AudioPlayerComponent>;
+
+declare const DividerRenderer: A2UIRenderer<DividerComponent>;
+
+declare const IconRenderer: A2UIRenderer<IconComponent>;
+
+declare const ImageRenderer: A2UIRenderer<ImageComponent>;
+
+declare const MarkdownRenderer: A2UIRenderer<MarkdownComponent>;
+
+declare const SkeletonRenderer: A2UIRenderer<SkeletonComponent>;
+
+declare const SpinnerRenderer: A2UIRenderer<SpinnerComponent>;
+
+declare const TextRenderer: A2UIRenderer<TextComponent>;
+
+declare const ToastRenderer: A2UIRenderer<ToastComponent>;
+
+declare const VideoRenderer: A2UIRenderer<VideoComponent>;
+
 /**
  * Renderer registry type for shadcn components
  */
@@ -538,4 +568,4 @@ declare function createCompleteRegistry(): a2ui_react_react.ComponentRegistry;
  */
 declare const version = "0.1.0";
 
-export { AlertRenderer, AnimatedAccordionRenderer, AnimatedAvatarGroupRenderer, AnimatedButtonOverride, AnimatedCardOverride, AnimatedCardRenderer, AnimatedCheckboxOverride, AnimatedDialogRenderer, AnimatedModalOverride, AnimatedSelectOverride, AnimatedTabsOverride, AnimatedTabsRenderer, AnimatedTextOverride, AnimatedTooltipRenderer, AreaChartRenderer, ArticleRenderer, AsideRenderer, AuroraBackgroundRenderer, BarChartRenderer, BlurRevealTextRenderer, BubbleBackgroundRenderer, Button, type ButtonProps, Checkbox, CopyButtonRenderer, CountUpRenderer, CursorRenderer, DEFAULT_CHART_COLORS, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type Dimensions, FireworksBackgroundRenderer, FlipButtonRenderer, FlipCardRenderer, FooterRenderer, GlowButtonRenderer, GradientBackgroundRenderer, GradientTextRenderer, GravityStarsBackgroundRenderer, HeaderRenderer, HexagonBackgroundRenderer, HoleBackgroundRenderer, IconButtonRenderer, Input, type InputProps, Label, LineChartRenderer, LiquidButtonRenderer, LiveRegionRenderer, MagneticButtonRenderer, MainRenderer, MorphingIconRenderer, NavRenderer, ParticlesBackgroundRenderer, PieChartRenderer, ProgressRenderer, type RendererRegistry, RippleButtonRenderer, SectionRenderer, ShimmerButtonRenderer, SkipLinkRenderer, SpotlightRenderer, StarsBackgroundRenderer, Tabs, TabsContent, TabsList, TabsTrigger, TextScrambleRenderer, Textarea, type TextareaProps, ThemeTogglerButtonRenderer, TypewriterTextRenderer, a11yRenderers, allAnimatedRenderers, allRenderers, animatedOverrides, animatedRenderers, buildChartConfig, buttonVariants, chartRenderers, cn, createAccessibleRegistry, createAnimatedRegistry, createCompleteRegistry, createFullyAnimatedRegistry, createShadcnRegistry, getChartColor, getChartData, shadcnRenderers, transformToRechartsData, useContainerDimensions, useReducedMotion, version };
+export { AlertRenderer, AnimatedAccordionRenderer, AnimatedAvatarGroupRenderer, AnimatedButtonOverride, AnimatedCardOverride, AnimatedCardRenderer, AnimatedCheckboxOverride, AnimatedDialogRenderer, AnimatedModalOverride, AnimatedSelectOverride, AnimatedTabsOverride, AnimatedTabsRenderer, AnimatedTextOverride, AnimatedTooltipRenderer, AreaChartRenderer, ArticleRenderer, AsideRenderer, AudioPlayerRenderer, AuroraBackgroundRenderer, BarChartRenderer, BlurRevealTextRenderer, BubbleBackgroundRenderer, Button, type ButtonProps, CardRenderer, Checkbox, CopyButtonRenderer, CountUpRenderer, CursorRenderer, DEFAULT_CHART_COLORS, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type Dimensions, DividerRenderer, FireworksBackgroundRenderer, FlipButtonRenderer, FlipCardRenderer, FooterRenderer, GlowButtonRenderer, GradientBackgroundRenderer, GradientTextRenderer, GravityStarsBackgroundRenderer, HeaderRenderer, HexagonBackgroundRenderer, HoleBackgroundRenderer, IconButtonRenderer, IconRenderer, ImageRenderer, Input, type InputProps, Label, LineChartRenderer, LiquidButtonRenderer, ListRenderer, LiveRegionRenderer, MagneticButtonRenderer, MainRenderer, MarkdownRenderer, ModalRenderer, MorphingIconRenderer, NavRenderer, ParticlesBackgroundRenderer, PieChartRenderer, ProgressRenderer, type RendererRegistry, RippleButtonRenderer, SectionRenderer, ShimmerButtonRenderer, SkeletonRenderer, SkipLinkRenderer, SpinnerRenderer, SpotlightRenderer, StarsBackgroundRenderer, StepperRenderer, Tabs, TabsContent, TabsList, TabsRenderer, TabsTrigger, TextRenderer, TextScrambleRenderer, Textarea, type TextareaProps, ThemeTogglerButtonRenderer, ToastRenderer, TypewriterTextRenderer, VideoRenderer, a11yRenderers, allAnimatedRenderers, allRenderers, animatedOverrides, animatedRenderers, buildChartConfig, buttonVariants, chartRenderers, cn, createAccessibleRegistry, createAnimatedRegistry, createCompleteRegistry, createFullyAnimatedRegistry, createShadcnRegistry, getChartColor, getChartData, shadcnRenderers, transformToRechartsData, useContainerDimensions, useReducedMotion, version };