@a4ui/core 0.24.3 → 0.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/README.md +11 -11
  2. package/dist/elements.css +96 -0
  3. package/dist/full.css +96 -0
  4. package/dist/index.d.ts +12 -1
  5. package/dist/index.js +3072 -2624
  6. package/dist/lib/createOptimistic.d.ts +17 -0
  7. package/dist/lib/viewTransition.d.ts +8 -0
  8. package/dist/ui/ArtifactPanel.d.ts +29 -0
  9. package/dist/ui/ChatThread.d.ts +24 -0
  10. package/dist/ui/Citation.d.ts +44 -0
  11. package/dist/ui/FloatingToolbar.d.ts +26 -0
  12. package/dist/ui/InlineSelect.d.ts +33 -0
  13. package/dist/ui/Message.d.ts +28 -0
  14. package/dist/ui/PageTransition.d.ts +25 -0
  15. package/dist/ui/PromptComposer.d.ts +34 -0
  16. package/dist/ui/StreamingText.d.ts +26 -0
  17. package/package.json +1 -1
  18. package/src/index.ts +14 -1
  19. package/src/lib/createOptimistic.ts +43 -0
  20. package/src/lib/viewTransition.ts +32 -0
  21. package/src/ui/ArtifactPanel.tsx +88 -0
  22. package/src/ui/ChatThread.tsx +59 -0
  23. package/src/ui/Citation.tsx +97 -0
  24. package/src/ui/FloatingToolbar.tsx +75 -0
  25. package/src/ui/InlineSelect.tsx +101 -0
  26. package/src/ui/Message.tsx +69 -0
  27. package/src/ui/PageTransition.tsx +90 -0
  28. package/src/ui/PromptComposer.tsx +138 -0
  29. package/src/ui/StreamingText.tsx +98 -0
package/README.md CHANGED
@@ -186,17 +186,17 @@ mode switch — a theme recolors underneath either mode.
186
186
  **[docs site](https://a4ui.pages.dev/)** or `src/index.ts` for the
187
187
  full list):
188
188
 
189
- | Category | Representative components |
190
- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
191
- | Forms | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput` |
192
- | Overlays | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard` |
193
- | Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `SpecSheet`, `RatingsSummary`, `LogoWall`, `CalendarHeatmap` |
194
- | Navigation | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation` |
195
- | Feedback | `Alert`, `AnnouncementBar`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter` |
196
- | Layout | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup` |
197
- | Commerce | `ProductCard`, `ProductGrid`, `PriceTag`, `PriceBlock`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup`, `FacetSidebar`, `ConditionScale` |
198
- | Charts | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted) |
199
- | Motion | `ScrambleText`, `TextReveal`, `Typewriter`, `GradientText`, `HoldToConfirm`, `LoadingDots`, `FillText`, `Curtain`, `Parallax`, `ScrollProgress`, `Ripple`, `Magnetic`, `TiltCard`, `Spotlight`, `NotificationStack`, `MultiStateBadge`, `NowPlaying`, `Expandable`, `flyToCart` |
189
+ | Category | Representative components |
190
+ | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
191
+ | Forms | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput`, `PromptComposer`, `InlineSelect` |
192
+ | Overlays | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard` |
193
+ | Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `SpecSheet`, `RatingsSummary`, `LogoWall`, `ChatThread`, `Message`, `Citation`, `CalendarHeatmap` |
194
+ | Navigation | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation` |
195
+ | Feedback | `Alert`, `AnnouncementBar`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter` |
196
+ | Layout | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`, `FloatingToolbar`, `ArtifactPanel` |
197
+ | Commerce | `ProductCard`, `ProductGrid`, `PriceTag`, `PriceBlock`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup`, `FacetSidebar`, `ConditionScale` |
198
+ | Charts | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted) |
199
+ | Motion | `ScrambleText`, `TextReveal`, `Typewriter`, `GradientText`, `HoldToConfirm`, `LoadingDots`, `FillText`, `Curtain`, `Parallax`, `ScrollProgress`, `Ripple`, `Magnetic`, `TiltCard`, `Spotlight`, `NotificationStack`, `MultiStateBadge`, `NowPlaying`, `Expandable`, `StreamingText`, `PageTransition`, `flyToCart` |
200
200
 
201
201
  Domain-specific sets ship as **subpath entries** so the base package stays lean —
202
202
  e.g. commerce and chart components import from their own paths:
package/dist/elements.css CHANGED
@@ -1561,6 +1561,9 @@ html.calm .tile-glass {
1561
1561
  .left-0 {
1562
1562
  left: 0px;
1563
1563
  }
1564
+ .left-1\/2 {
1565
+ left: 50%;
1566
+ }
1564
1567
  .left-1\/3 {
1565
1568
  left: 33.333333%;
1566
1569
  }
@@ -1609,6 +1612,9 @@ html.calm .tile-glass {
1609
1612
  .top-3\.5 {
1610
1613
  top: 0.875rem;
1611
1614
  }
1615
+ .top-4 {
1616
+ top: 1rem;
1617
+ }
1612
1618
  .top-\[14vh\] {
1613
1619
  top: 14vh;
1614
1620
  }
@@ -1815,6 +1821,9 @@ html.calm .tile-glass {
1815
1821
  .h-9 {
1816
1822
  height: 2.25rem;
1817
1823
  }
1824
+ .h-\[1\.1em\] {
1825
+ height: 1.1em;
1826
+ }
1818
1827
  .h-\[12\.5\%\] {
1819
1828
  height: 12.5%;
1820
1829
  }
@@ -1875,12 +1884,18 @@ html.calm .tile-glass {
1875
1884
  .max-h-\[85vh\] {
1876
1885
  max-height: 85vh;
1877
1886
  }
1887
+ .min-h-0 {
1888
+ min-height: 0px;
1889
+ }
1878
1890
  .min-h-4 {
1879
1891
  min-height: 1rem;
1880
1892
  }
1881
1893
  .min-h-9 {
1882
1894
  min-height: 2.25rem;
1883
1895
  }
1896
+ .min-h-\[24px\] {
1897
+ min-height: 24px;
1898
+ }
1884
1899
  .min-h-\[80px\] {
1885
1900
  min-height: 80px;
1886
1901
  }
@@ -2013,6 +2028,9 @@ html.calm .tile-glass {
2013
2028
  .min-w-56 {
2014
2029
  min-width: 14rem;
2015
2030
  }
2031
+ .min-w-\[1\.1em\] {
2032
+ min-width: 1.1em;
2033
+ }
2016
2034
  .min-w-\[1\.5rem\] {
2017
2035
  min-width: 1.5rem;
2018
2036
  }
@@ -2040,6 +2058,9 @@ html.calm .tile-glass {
2040
2058
  .max-w-7xl {
2041
2059
  max-width: 80rem;
2042
2060
  }
2061
+ .max-w-\[12rem\] {
2062
+ max-width: 12rem;
2063
+ }
2043
2064
  .max-w-\[520px\] {
2044
2065
  max-width: 520px;
2045
2066
  }
@@ -2109,6 +2130,16 @@ html.calm .tile-glass {
2109
2130
  --tw-rotate: 90deg;
2110
2131
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2111
2132
  }
2133
+ .scale-100 {
2134
+ --tw-scale-x: 1;
2135
+ --tw-scale-y: 1;
2136
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2137
+ }
2138
+ .scale-95 {
2139
+ --tw-scale-x: .95;
2140
+ --tw-scale-y: .95;
2141
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2142
+ }
2112
2143
  .scale-\[1\.03\] {
2113
2144
  --tw-scale-x: 1.03;
2114
2145
  --tw-scale-y: 1.03;
@@ -2176,6 +2207,9 @@ html.calm .tile-glass {
2176
2207
  .select-none {
2177
2208
  user-select: none;
2178
2209
  }
2210
+ .resize-none {
2211
+ resize: none;
2212
+ }
2179
2213
  .resize-y {
2180
2214
  resize: vertical;
2181
2215
  }
@@ -2345,6 +2379,9 @@ html.calm .tile-glass {
2345
2379
  .whitespace-nowrap {
2346
2380
  white-space: nowrap;
2347
2381
  }
2382
+ .whitespace-pre-wrap {
2383
+ white-space: pre-wrap;
2384
+ }
2348
2385
  .break-words {
2349
2386
  overflow-wrap: break-word;
2350
2387
  }
@@ -2624,6 +2661,9 @@ html.calm .tile-glass {
2624
2661
  .p-0 {
2625
2662
  padding: 0px;
2626
2663
  }
2664
+ .p-0\.5 {
2665
+ padding: 0.125rem;
2666
+ }
2627
2667
  .p-1 {
2628
2668
  padding: 0.25rem;
2629
2669
  }
@@ -2788,6 +2828,9 @@ html.calm .tile-glass {
2788
2828
  .align-middle {
2789
2829
  vertical-align: middle;
2790
2830
  }
2831
+ .align-super {
2832
+ vertical-align: super;
2833
+ }
2791
2834
  .font-mono {
2792
2835
  font-family: "IBM Plex Mono", ui-monospace, monospace;
2793
2836
  }
@@ -2807,6 +2850,9 @@ html.calm .tile-glass {
2807
2850
  font-size: 3rem;
2808
2851
  line-height: 1;
2809
2852
  }
2853
+ .text-\[0\.65rem\] {
2854
+ font-size: 0.65rem;
2855
+ }
2810
2856
  .text-\[10px\] {
2811
2857
  font-size: 10px;
2812
2858
  }
@@ -2863,6 +2909,9 @@ html.calm .tile-glass {
2863
2909
  .capitalize {
2864
2910
  text-transform: capitalize;
2865
2911
  }
2912
+ .italic {
2913
+ font-style: italic;
2914
+ }
2866
2915
  .tabular-nums {
2867
2916
  --tw-numeric-spacing: tabular-nums;
2868
2917
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
@@ -2870,6 +2919,9 @@ html.calm .tile-glass {
2870
2919
  .leading-none {
2871
2920
  line-height: 1;
2872
2921
  }
2922
+ .leading-relaxed {
2923
+ line-height: 1.625;
2924
+ }
2873
2925
  .leading-tight {
2874
2926
  line-height: 1.25;
2875
2927
  }
@@ -2940,6 +2992,9 @@ html.calm .tile-glass {
2940
2992
  .text-muted-foreground\/60 {
2941
2993
  color: hsl(var(--muted-foreground) / 0.6);
2942
2994
  }
2995
+ .text-muted-foreground\/70 {
2996
+ color: hsl(var(--muted-foreground) / 0.7);
2997
+ }
2943
2998
  .text-primary {
2944
2999
  --tw-text-opacity: 1;
2945
3000
  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
@@ -2972,9 +3027,15 @@ html.calm .tile-glass {
2972
3027
  --tw-text-opacity: 1;
2973
3028
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
2974
3029
  }
3030
+ .underline {
3031
+ text-decoration-line: underline;
3032
+ }
2975
3033
  .line-through {
2976
3034
  text-decoration-line: line-through;
2977
3035
  }
3036
+ .decoration-border {
3037
+ text-decoration-color: hsl(var(--border) / 1);
3038
+ }
2978
3039
  .underline-offset-2 {
2979
3040
  text-underline-offset: 2px;
2980
3041
  }
@@ -3130,11 +3191,21 @@ html.calm .tile-glass {
3130
3191
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3131
3192
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3132
3193
  }
3194
+ .backdrop-blur-md {
3195
+ --tw-backdrop-blur: blur(12px);
3196
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3197
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3198
+ }
3133
3199
  .backdrop-blur-sm {
3134
3200
  --tw-backdrop-blur: blur(4px);
3135
3201
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3136
3202
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3137
3203
  }
3204
+ .backdrop-blur-xl {
3205
+ --tw-backdrop-blur: blur(24px);
3206
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3207
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3208
+ }
3138
3209
  .backdrop-filter {
3139
3210
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3140
3211
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -3169,11 +3240,21 @@ html.calm .tile-glass {
3169
3240
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3170
3241
  transition-duration: 150ms;
3171
3242
  }
3243
+ .transition-\[opacity\2c transform\] {
3244
+ transition-property: opacity,transform;
3245
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3246
+ transition-duration: 150ms;
3247
+ }
3172
3248
  .transition-\[transform\2c opacity\] {
3173
3249
  transition-property: transform,opacity;
3174
3250
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3175
3251
  transition-duration: 150ms;
3176
3252
  }
3253
+ .transition-\[width\] {
3254
+ transition-property: width;
3255
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3256
+ transition-duration: 150ms;
3257
+ }
3177
3258
  .transition-all {
3178
3259
  transition-property: all;
3179
3260
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3288,6 +3369,10 @@ html.calm .tile-glass {
3288
3369
  .hover\:bg-accent\/90:hover {
3289
3370
  background-color: hsl(var(--accent) / 0.9);
3290
3371
  }
3372
+ .hover\:bg-background:hover {
3373
+ --tw-bg-opacity: 1;
3374
+ background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
3375
+ }
3291
3376
  .hover\:bg-muted:hover {
3292
3377
  --tw-bg-opacity: 1;
3293
3378
  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
@@ -3298,6 +3383,9 @@ html.calm .tile-glass {
3298
3383
  .hover\:bg-muted\/70:hover {
3299
3384
  background-color: hsl(var(--muted) / 0.7);
3300
3385
  }
3386
+ .hover\:bg-primary\/15:hover {
3387
+ background-color: hsl(var(--primary) / 0.15);
3388
+ }
3301
3389
  .hover\:bg-primary\/5:hover {
3302
3390
  background-color: hsl(var(--primary) / 0.05);
3303
3391
  }
@@ -3311,6 +3399,10 @@ html.calm .tile-glass {
3311
3399
  --tw-text-opacity: 1;
3312
3400
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
3313
3401
  }
3402
+ .hover\:text-primary:hover {
3403
+ --tw-text-opacity: 1;
3404
+ color: hsl(var(--primary) / var(--tw-text-opacity, 1));
3405
+ }
3314
3406
  .hover\:underline:hover {
3315
3407
  text-decoration-line: underline;
3316
3408
  }
@@ -3491,6 +3583,10 @@ html.calm .tile-glass {
3491
3583
  }
3492
3584
  @media (prefers-reduced-motion: reduce) {
3493
3585
 
3586
+ .motion-reduce\:animate-none {
3587
+ animation: none;
3588
+ }
3589
+
3494
3590
  .motion-reduce\:transition-none {
3495
3591
  transition-property: none;
3496
3592
  }
package/dist/full.css CHANGED
@@ -1561,6 +1561,9 @@ html.calm .tile-glass {
1561
1561
  .left-0 {
1562
1562
  left: 0px;
1563
1563
  }
1564
+ .left-1\/2 {
1565
+ left: 50%;
1566
+ }
1564
1567
  .left-1\/3 {
1565
1568
  left: 33.333333%;
1566
1569
  }
@@ -1609,6 +1612,9 @@ html.calm .tile-glass {
1609
1612
  .top-3\.5 {
1610
1613
  top: 0.875rem;
1611
1614
  }
1615
+ .top-4 {
1616
+ top: 1rem;
1617
+ }
1612
1618
  .top-\[14vh\] {
1613
1619
  top: 14vh;
1614
1620
  }
@@ -1815,6 +1821,9 @@ html.calm .tile-glass {
1815
1821
  .h-9 {
1816
1822
  height: 2.25rem;
1817
1823
  }
1824
+ .h-\[1\.1em\] {
1825
+ height: 1.1em;
1826
+ }
1818
1827
  .h-\[12\.5\%\] {
1819
1828
  height: 12.5%;
1820
1829
  }
@@ -1875,12 +1884,18 @@ html.calm .tile-glass {
1875
1884
  .max-h-\[85vh\] {
1876
1885
  max-height: 85vh;
1877
1886
  }
1887
+ .min-h-0 {
1888
+ min-height: 0px;
1889
+ }
1878
1890
  .min-h-4 {
1879
1891
  min-height: 1rem;
1880
1892
  }
1881
1893
  .min-h-9 {
1882
1894
  min-height: 2.25rem;
1883
1895
  }
1896
+ .min-h-\[24px\] {
1897
+ min-height: 24px;
1898
+ }
1884
1899
  .min-h-\[80px\] {
1885
1900
  min-height: 80px;
1886
1901
  }
@@ -2013,6 +2028,9 @@ html.calm .tile-glass {
2013
2028
  .min-w-56 {
2014
2029
  min-width: 14rem;
2015
2030
  }
2031
+ .min-w-\[1\.1em\] {
2032
+ min-width: 1.1em;
2033
+ }
2016
2034
  .min-w-\[1\.5rem\] {
2017
2035
  min-width: 1.5rem;
2018
2036
  }
@@ -2040,6 +2058,9 @@ html.calm .tile-glass {
2040
2058
  .max-w-7xl {
2041
2059
  max-width: 80rem;
2042
2060
  }
2061
+ .max-w-\[12rem\] {
2062
+ max-width: 12rem;
2063
+ }
2043
2064
  .max-w-\[520px\] {
2044
2065
  max-width: 520px;
2045
2066
  }
@@ -2109,6 +2130,16 @@ html.calm .tile-glass {
2109
2130
  --tw-rotate: 90deg;
2110
2131
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2111
2132
  }
2133
+ .scale-100 {
2134
+ --tw-scale-x: 1;
2135
+ --tw-scale-y: 1;
2136
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2137
+ }
2138
+ .scale-95 {
2139
+ --tw-scale-x: .95;
2140
+ --tw-scale-y: .95;
2141
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2142
+ }
2112
2143
  .scale-\[1\.03\] {
2113
2144
  --tw-scale-x: 1.03;
2114
2145
  --tw-scale-y: 1.03;
@@ -2176,6 +2207,9 @@ html.calm .tile-glass {
2176
2207
  .select-none {
2177
2208
  user-select: none;
2178
2209
  }
2210
+ .resize-none {
2211
+ resize: none;
2212
+ }
2179
2213
  .resize-y {
2180
2214
  resize: vertical;
2181
2215
  }
@@ -2345,6 +2379,9 @@ html.calm .tile-glass {
2345
2379
  .whitespace-nowrap {
2346
2380
  white-space: nowrap;
2347
2381
  }
2382
+ .whitespace-pre-wrap {
2383
+ white-space: pre-wrap;
2384
+ }
2348
2385
  .break-words {
2349
2386
  overflow-wrap: break-word;
2350
2387
  }
@@ -2624,6 +2661,9 @@ html.calm .tile-glass {
2624
2661
  .p-0 {
2625
2662
  padding: 0px;
2626
2663
  }
2664
+ .p-0\.5 {
2665
+ padding: 0.125rem;
2666
+ }
2627
2667
  .p-1 {
2628
2668
  padding: 0.25rem;
2629
2669
  }
@@ -2788,6 +2828,9 @@ html.calm .tile-glass {
2788
2828
  .align-middle {
2789
2829
  vertical-align: middle;
2790
2830
  }
2831
+ .align-super {
2832
+ vertical-align: super;
2833
+ }
2791
2834
  .font-mono {
2792
2835
  font-family: "IBM Plex Mono", ui-monospace, monospace;
2793
2836
  }
@@ -2807,6 +2850,9 @@ html.calm .tile-glass {
2807
2850
  font-size: 3rem;
2808
2851
  line-height: 1;
2809
2852
  }
2853
+ .text-\[0\.65rem\] {
2854
+ font-size: 0.65rem;
2855
+ }
2810
2856
  .text-\[10px\] {
2811
2857
  font-size: 10px;
2812
2858
  }
@@ -2863,6 +2909,9 @@ html.calm .tile-glass {
2863
2909
  .capitalize {
2864
2910
  text-transform: capitalize;
2865
2911
  }
2912
+ .italic {
2913
+ font-style: italic;
2914
+ }
2866
2915
  .tabular-nums {
2867
2916
  --tw-numeric-spacing: tabular-nums;
2868
2917
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
@@ -2870,6 +2919,9 @@ html.calm .tile-glass {
2870
2919
  .leading-none {
2871
2920
  line-height: 1;
2872
2921
  }
2922
+ .leading-relaxed {
2923
+ line-height: 1.625;
2924
+ }
2873
2925
  .leading-tight {
2874
2926
  line-height: 1.25;
2875
2927
  }
@@ -2940,6 +2992,9 @@ html.calm .tile-glass {
2940
2992
  .text-muted-foreground\/60 {
2941
2993
  color: hsl(var(--muted-foreground) / 0.6);
2942
2994
  }
2995
+ .text-muted-foreground\/70 {
2996
+ color: hsl(var(--muted-foreground) / 0.7);
2997
+ }
2943
2998
  .text-primary {
2944
2999
  --tw-text-opacity: 1;
2945
3000
  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
@@ -2972,9 +3027,15 @@ html.calm .tile-glass {
2972
3027
  --tw-text-opacity: 1;
2973
3028
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
2974
3029
  }
3030
+ .underline {
3031
+ text-decoration-line: underline;
3032
+ }
2975
3033
  .line-through {
2976
3034
  text-decoration-line: line-through;
2977
3035
  }
3036
+ .decoration-border {
3037
+ text-decoration-color: hsl(var(--border) / 1);
3038
+ }
2978
3039
  .underline-offset-2 {
2979
3040
  text-underline-offset: 2px;
2980
3041
  }
@@ -3130,11 +3191,21 @@ html.calm .tile-glass {
3130
3191
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3131
3192
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3132
3193
  }
3194
+ .backdrop-blur-md {
3195
+ --tw-backdrop-blur: blur(12px);
3196
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3197
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3198
+ }
3133
3199
  .backdrop-blur-sm {
3134
3200
  --tw-backdrop-blur: blur(4px);
3135
3201
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3136
3202
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3137
3203
  }
3204
+ .backdrop-blur-xl {
3205
+ --tw-backdrop-blur: blur(24px);
3206
+ -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3207
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3208
+ }
3138
3209
  .backdrop-filter {
3139
3210
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3140
3211
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -3169,11 +3240,21 @@ html.calm .tile-glass {
3169
3240
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3170
3241
  transition-duration: 150ms;
3171
3242
  }
3243
+ .transition-\[opacity\2c transform\] {
3244
+ transition-property: opacity,transform;
3245
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3246
+ transition-duration: 150ms;
3247
+ }
3172
3248
  .transition-\[transform\2c opacity\] {
3173
3249
  transition-property: transform,opacity;
3174
3250
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3175
3251
  transition-duration: 150ms;
3176
3252
  }
3253
+ .transition-\[width\] {
3254
+ transition-property: width;
3255
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3256
+ transition-duration: 150ms;
3257
+ }
3177
3258
  .transition-all {
3178
3259
  transition-property: all;
3179
3260
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3288,6 +3369,10 @@ html.calm .tile-glass {
3288
3369
  .hover\:bg-accent\/90:hover {
3289
3370
  background-color: hsl(var(--accent) / 0.9);
3290
3371
  }
3372
+ .hover\:bg-background:hover {
3373
+ --tw-bg-opacity: 1;
3374
+ background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
3375
+ }
3291
3376
  .hover\:bg-muted:hover {
3292
3377
  --tw-bg-opacity: 1;
3293
3378
  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
@@ -3298,6 +3383,9 @@ html.calm .tile-glass {
3298
3383
  .hover\:bg-muted\/70:hover {
3299
3384
  background-color: hsl(var(--muted) / 0.7);
3300
3385
  }
3386
+ .hover\:bg-primary\/15:hover {
3387
+ background-color: hsl(var(--primary) / 0.15);
3388
+ }
3301
3389
  .hover\:bg-primary\/5:hover {
3302
3390
  background-color: hsl(var(--primary) / 0.05);
3303
3391
  }
@@ -3311,6 +3399,10 @@ html.calm .tile-glass {
3311
3399
  --tw-text-opacity: 1;
3312
3400
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
3313
3401
  }
3402
+ .hover\:text-primary:hover {
3403
+ --tw-text-opacity: 1;
3404
+ color: hsl(var(--primary) / var(--tw-text-opacity, 1));
3405
+ }
3314
3406
  .hover\:underline:hover {
3315
3407
  text-decoration-line: underline;
3316
3408
  }
@@ -3491,6 +3583,10 @@ html.calm .tile-glass {
3491
3583
  }
3492
3584
  @media (prefers-reduced-motion: reduce) {
3493
3585
 
3586
+ .motion-reduce\:animate-none {
3587
+ animation: none;
3588
+ }
3589
+
3494
3590
  .motion-reduce\:transition-none {
3495
3591
  transition-property: none;
3496
3592
  }
package/dist/index.d.ts CHANGED
@@ -1,10 +1,12 @@
1
- export declare const A4UI_VERSION = "0.24.3";
1
+ export declare const A4UI_VERSION = "0.25.0";
2
2
  export { cn } from './lib/cn';
3
3
  export { useTheme, toggleTheme, setTheme, storedTheme, applyTheme, toggled, type Theme } from './lib/theme';
4
4
  export { useEffects, isCalm, setEffects } from './lib/effects';
5
5
  export { prefersReducedMotion, motionReduced, useMotionForced, setMotionForced, createCountUp, animateIn, revealOnScroll, animate, inView, scroll, stagger, spring, } from './lib/motion';
6
6
  export { useMediaQuery } from './lib/media';
7
7
  export { remeasureAfterLayout } from './lib/virtual';
8
+ export { createOptimistic } from './lib/createOptimistic';
9
+ export { startViewTransition } from './lib/viewTransition';
8
10
  export { Accordion, type AccordionItem } from './ui/Accordion';
9
11
  export { Badge, type BadgeTone } from './ui/Badge';
10
12
  export { Button, type ButtonVariant } from './ui/Button';
@@ -99,6 +101,15 @@ export { CalendarHeatmap, type HeatmapValue, type CalendarHeatmapProps } from '.
99
101
  export { Portal, type PortalProps } from './ui/Portal';
100
102
  export { Sortable, type SortableProps } from './ui/Sortable';
101
103
  export { Clock, type ClockProps } from './ui/Clock';
104
+ export { ChatThread, type ChatThreadProps } from './ui/ChatThread';
105
+ export { Message, type MessageProps, type ChatRole } from './ui/Message';
106
+ export { StreamingText, type StreamingTextProps } from './ui/StreamingText';
107
+ export { Citation, type CitationProps, SourceList, type SourceListProps } from './ui/Citation';
108
+ export { PromptComposer, type PromptComposerProps } from './ui/PromptComposer';
109
+ export { ArtifactPanel, type ArtifactPanelProps } from './ui/ArtifactPanel';
110
+ export { FloatingToolbar, type FloatingToolbarProps } from './ui/FloatingToolbar';
111
+ export { PageTransition, type PageTransitionProps } from './ui/PageTransition';
112
+ export { InlineSelect, type InlineSelectProps, type InlineSelectOption } from './ui/InlineSelect';
102
113
  export { ScrambleText, type ScrambleTextProps } from './ui/ScrambleText';
103
114
  export { TextReveal, type TextRevealProps } from './ui/TextReveal';
104
115
  export { HoldToConfirm, type HoldToConfirmProps } from './ui/HoldToConfirm';