@a4ui/core 0.4.0 → 0.4.2

package/dist/layout/ThemedScenery.d.ts

@@ -8,9 +8,11 @@ export interface ThemedSceneryProps {
 }
 /**
  * A lightweight, theme-tinted backdrop for non-`space` themes: the same
- * token-driven nebula as {@link SpaceBackground} plus slowly floating motif
- * glyphs you pass in. Mount it as {@link AppShell}'s `background` (fixed z-0
- * layer behind all content). Motion is skipped under `motionReduced()`.
+ * token-driven nebula as {@link SpaceBackground} plus floating motif glyphs you
+ * pass in, cursor glow, magnetic buttons, card edge-glow, and motifs that streak
+ * across (ambiently and on a background click). Mount it as {@link AppShell}'s
+ * `background` (fixed z-0 layer behind all content). Motion is skipped under
+ * `motionReduced()`.
  *
  * @example
  * ```tsx

package/dist/layout/sceneEffects.d.ts

@@ -0,0 +1 @@
+export declare function bindPointerFx(root: HTMLElement): () => void;

package/dist/styles.css

@@ -576,6 +576,7 @@ body {
 #scenery .themed-sky {
   position: absolute;
   inset: 0;
+  animation: sceneryPulse 16s ease-in-out infinite;
   background:
     radial-gradient(1200px 700px at 82% -8%, hsl(var(--primary) / 0.34), transparent 60%),
     radial-gradient(900px 600px at 8% 12%, hsl(var(--accent) / 0.28), transparent 60%),
@@ -606,8 +607,19 @@ body {
     transform: translateY(-16px) rotate(calc(var(--r, 0deg) + 5deg));
   }
 }
+/* Subtle nebula "breathing" so the themed backdrop isn't static. */
+@keyframes sceneryPulse {
+  0%,
+  100% {
+    filter: brightness(1);
+  }
+  50% {
+    filter: brightness(1.06);
+  }
+}
 @media (prefers-reduced-motion: reduce) {
-  html:not(.force-motion) #scenery .motif {
+  html:not(.force-motion) #scenery .motif,
+  html:not(.force-motion) #scenery .themed-sky {
     animation: none !important;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",

package/preset.js

@@ -45,7 +45,7 @@ const glass = plugin(({ addComponents }) => {
       borderRadius: 'inherit',
       padding: '1px',
       background:
-        'radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), hsl(199 89% 65% / .9), hsl(217 91% 60% / .25) 45%, transparent 70%)',
+        'radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), hsl(var(--primary) / .9), hsl(var(--accent) / .25) 45%, transparent 70%)',
       WebkitMask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
       WebkitMaskComposite: 'xor',
       maskComposite: 'exclude',
@@ -57,11 +57,11 @@ const glass = plugin(({ addComponents }) => {
     '@media (prefers-reduced-motion: reduce)': {
       '.card.glow-edge::before': { display: 'none' },
     },
-    // Light theme: the cyan glow is faint on white — thicker + more vivid.
+    // Light theme: the glow is faint on white — thicker + more vivid.
     "[data-theme='light'] .card.glow-edge::before": {
       padding: '1.5px',
       background:
-        'radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), hsl(199 98% 48% / 1), hsl(275 90% 58% / 0.55) 42%, transparent 72%)',
+        'radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), hsl(var(--primary) / 1), hsl(var(--accent) / 0.55) 42%, transparent 72%)',
     },
 
     // ---- Floating overlay glass (menus, modals, drawers, toasts) ----