@a4ui/core 0.20.0 → 0.21.0

package/dist/elements.css

@@ -229,6 +229,21 @@ body {
   animation: list-row-in 0.35s both ease-out;
 }
 
+/* Aurora — slow ambient drift for the blurred backdrop blobs (opt-in via
+   <Aurora animated>). Held still under reduced motion by the global rule below. */
+@keyframes aurora-drift {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(3%, -3%, 0) scale(1.08);
+  }
+}
+.aurora-drift {
+  animation: aurora-drift 18s ease-in-out infinite;
+}
+
 /* Table row enter/exit fade. */
 .row-enter-active,
 .row-exit-active {
@@ -1351,7 +1366,7 @@ video {
   transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .2s ease;
 }
 [data-theme='light'] .card {
-  background: hsl(var(--card) / 0.72);
+  background: hsl(var(--card) / 0.6);
   border: 1px solid hsl(var(--border));
 }
 .card.glow-edge::before {
@@ -1504,9 +1519,15 @@ html.calm .tile-glass {
 .-bottom-6 {
   bottom: -1.5rem;
 }
+.-left-40 {
+  left: -10rem;
+}
 .-right-1 {
   right: -0.25rem;
 }
+.-right-32 {
+  right: -8rem;
+}
 .-right-9 {
   right: -2.25rem;
 }
@@ -1519,6 +1540,9 @@ html.calm .tile-glass {
 .-top-3 {
   top: -0.75rem;
 }
+.-top-32 {
+  top: -8rem;
+}
 .bottom-0 {
   bottom: 0px;
 }
@@ -1531,9 +1555,15 @@ html.calm .tile-glass {
 .bottom-6 {
   bottom: 1.5rem;
 }
+.bottom-\[-10\%\] {
+  bottom: -10%;
+}
 .left-0 {
   left: 0px;
 }
+.left-1\/3 {
+  left: 33.333333%;
+}
 .left-2 {
   left: 0.5rem;
 }
@@ -1567,6 +1597,9 @@ html.calm .tile-glass {
 .top-1\/2 {
   top: 50%;
 }
+.top-1\/4 {
+  top: 25%;
+}
 .top-2 {
   top: 0.5rem;
 }
@@ -1582,6 +1615,9 @@ html.calm .tile-glass {
 .isolate {
   isolation: isolate;
 }
+.-z-10 {
+  z-index: -10;
+}
 .z-0 {
   z-index: 0;
 }
@@ -1782,6 +1818,15 @@ html.calm .tile-glass {
 .h-\[1em\] {
   height: 1em;
 }
+.h-\[36rem\] {
+  height: 36rem;
+}
+.h-\[38rem\] {
+  height: 38rem;
+}
+.h-\[40rem\] {
+  height: 40rem;
+}
 .h-\[65vh\] {
   height: 65vh;
 }
@@ -1911,6 +1956,15 @@ html.calm .tile-glass {
 .w-\[18px\] {
   width: 18px;
 }
+.w-\[36rem\] {
+  width: 36rem;
+}
+.w-\[38rem\] {
+  width: 38rem;
+}
+.w-\[40rem\] {
+  width: 40rem;
+}
 .w-fit {
   width: fit-content;
 }
@@ -2956,6 +3010,10 @@ html.calm .tile-glass {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.blur-3xl {
+  --tw-blur: blur(64px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .blur-lg {
   --tw-blur: blur(16px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

package/dist/full.css

@@ -229,6 +229,21 @@ body {
   animation: list-row-in 0.35s both ease-out;
 }
 
+/* Aurora — slow ambient drift for the blurred backdrop blobs (opt-in via
+   <Aurora animated>). Held still under reduced motion by the global rule below. */
+@keyframes aurora-drift {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(3%, -3%, 0) scale(1.08);
+  }
+}
+.aurora-drift {
+  animation: aurora-drift 18s ease-in-out infinite;
+}
+
 /* Table row enter/exit fade. */
 .row-enter-active,
 .row-exit-active {
@@ -1351,7 +1366,7 @@ video {
   transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .2s ease;
 }
 [data-theme='light'] .card {
-  background: hsl(var(--card) / 0.72);
+  background: hsl(var(--card) / 0.6);
   border: 1px solid hsl(var(--border));
 }
 .card.glow-edge::before {
@@ -1504,9 +1519,15 @@ html.calm .tile-glass {
 .-bottom-6 {
   bottom: -1.5rem;
 }
+.-left-40 {
+  left: -10rem;
+}
 .-right-1 {
   right: -0.25rem;
 }
+.-right-32 {
+  right: -8rem;
+}
 .-right-9 {
   right: -2.25rem;
 }
@@ -1519,6 +1540,9 @@ html.calm .tile-glass {
 .-top-3 {
   top: -0.75rem;
 }
+.-top-32 {
+  top: -8rem;
+}
 .bottom-0 {
   bottom: 0px;
 }
@@ -1531,9 +1555,15 @@ html.calm .tile-glass {
 .bottom-6 {
   bottom: 1.5rem;
 }
+.bottom-\[-10\%\] {
+  bottom: -10%;
+}
 .left-0 {
   left: 0px;
 }
+.left-1\/3 {
+  left: 33.333333%;
+}
 .left-2 {
   left: 0.5rem;
 }
@@ -1567,6 +1597,9 @@ html.calm .tile-glass {
 .top-1\/2 {
   top: 50%;
 }
+.top-1\/4 {
+  top: 25%;
+}
 .top-2 {
   top: 0.5rem;
 }
@@ -1582,6 +1615,9 @@ html.calm .tile-glass {
 .isolate {
   isolation: isolate;
 }
+.-z-10 {
+  z-index: -10;
+}
 .z-0 {
   z-index: 0;
 }
@@ -1782,6 +1818,15 @@ html.calm .tile-glass {
 .h-\[1em\] {
   height: 1em;
 }
+.h-\[36rem\] {
+  height: 36rem;
+}
+.h-\[38rem\] {
+  height: 38rem;
+}
+.h-\[40rem\] {
+  height: 40rem;
+}
 .h-\[65vh\] {
   height: 65vh;
 }
@@ -1911,6 +1956,15 @@ html.calm .tile-glass {
 .w-\[18px\] {
   width: 18px;
 }
+.w-\[36rem\] {
+  width: 36rem;
+}
+.w-\[38rem\] {
+  width: 38rem;
+}
+.w-\[40rem\] {
+  width: 40rem;
+}
 .w-fit {
   width: fit-content;
 }
@@ -2956,6 +3010,10 @@ html.calm .tile-glass {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.blur-3xl {
+  --tw-blur: blur(64px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .blur-lg {
   --tw-blur: blur(16px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export declare const A4UI_VERSION = "0.20.0";
+export declare const A4UI_VERSION = "0.21.0";
 export { cn } from './lib/cn';
 export { useTheme, toggleTheme, setTheme, storedTheme, applyTheme, toggled, type Theme } from './lib/theme';
 export { useEffects, isCalm, setEffects } from './lib/effects';
@@ -116,6 +116,7 @@ export { GradientText, type GradientTextProps } from './ui/GradientText';
 export { flyToCart, type FlyToCartOptions } from './lib/flyToCart';
 export { AppShell } from './layout/AppShell';
 export { SpaceBackground } from './layout/SpaceBackground';
+export { Aurora, type AuroraProps } from './layout/Aurora';
 export { ThemedScenery, type ThemedSceneryProps } from './layout/ThemedScenery';
 export { SnowScenery } from './layout/SnowScenery';
 export { ChristmasBackground } from './layout/ChristmasBackground';