a2ui-react 0.3.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.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 };