your-ai-workflow-firebase-os 2.0.2 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "your-ai-workflow-firebase-os",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Your AI Firebase — a complete Firebase-powered admin app in one React component.",
   "type": "module",
   "main": "dist/your-ai-workflow-firebase-os.cjs.js",

package/src/index.css

@@ -299,6 +299,26 @@ body:has(.prompt-card) {
     box-shadow: 0 8px 30px var(--glow-color, var(--primary-glow));
   }
 
+  /* What a panel actually changes between two of its states — and nothing
+     else. `transition: all` above had the browser weigh every property on
+     every style change of every panel, and a panel is most of the admin
+     (twenty-six on the Pages screen); worse, a height or a padding set by
+     an animation from JavaScript was half-transitioned again by CSS on top,
+     which is the lag between a press and the page catching up. */
+  .glass-panel {
+    transition-property: border-color, box-shadow, background-color, color, opacity, transform, translate, scale;
+  }
+
+  /* A panel inside an admin section blurs nothing — the panel round it has
+     already blurred everything behind both — so its blur costs a surface
+     per frame and shows nothing for it. Every row on the Pages, Forms and
+     Theme screens is one; scoped to the app's own sections (SectionCard) so
+     a card a page of the owner's lays over a picture keeps its blur. */
+  .fbos-section .glass-panel {
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
   /* Floating surfaces — dropdowns, popovers, menus.
      .glass-panel is deliberately near-transparent (--panel-bg is 5% in dark):
      it sits ON the page background and is meant to let it through. A dropdown
@@ -503,7 +523,7 @@ body:has(.prompt-card) {
     background: var(--button-bg);
     color: var(--button-fg);
     border-radius: var(--btn-radius, 0.75rem) !important;
-    transition: all 0.4s ease;
+    transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
   }
 
   .btn-primary:hover {
@@ -518,7 +538,18 @@ body:has(.prompt-card) {
     box-shadow: inset 0 0 0 1px var(--btn-sec-border);
     color: var(--btn-sec-text);
     border-radius: var(--btn-radius, 0.75rem) !important;
-    transition: all 0.4s ease;
+    transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
+  }
+
+  /* <Button> lifts and presses through framer-motion, a frame at a time. A
+     CSS transition on transform eased every one of those frames again, 0.4s
+     behind: the rubbery hover, the press that landed late — on every button
+     of every page. The button's colours still ease; its movement is the
+     animation's alone. */
+  .fbos-motion,
+  .fbos-motion.btn-primary,
+  .fbos-motion.btn-secondary {
+    transition-property: background-color, color, box-shadow, border-color, opacity;
   }
 
   .btn-secondary:hover {
@@ -927,3 +958,92 @@ body:has(.prompt-card) {
     animation: none;
   }
 }
+
+/* ── Arriving (a row added, a screen's first frame) ────────────────────────
+   A thing that has just been put on screen eases in where it lands instead
+   of popping: a short fade, and for a row a small settle down into its place.
+   Plain CSS, so it costs a page nothing while a list of them is being drawn,
+   and the app's own timing, so it reads as the same motion as everything
+   else here. */
+@keyframes fbos-row-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes fbos-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.fbos-row-in {
+  animation: fbos-row-in 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.fbos-fade-in {
+  animation: fbos-fade-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fbos-row-in,
+  .fbos-fade-in {
+    animation: none;
+  }
+}
+
+/* The two soft orbs behind every screen (App.tsx, BgDecor), breathing on
+   the compositor. They were driven from JavaScript, a style written to each
+   of them every frame for as long as the app was open, for every visitor. */
+@keyframes fbos-orb-1 {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.6;
+  }
+
+  50% {
+    transform: scale(1.1);
+    opacity: 1;
+  }
+}
+
+@keyframes fbos-orb-2 {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+
+  50% {
+    transform: scale(1.2);
+    opacity: 0.9;
+  }
+}
+
+.fbos-orb-1 {
+  animation: fbos-orb-1 12s ease-in-out infinite;
+  will-change: transform, opacity;
+}
+
+.fbos-orb-2 {
+  animation: fbos-orb-2 18s ease-in-out 2s infinite;
+  will-change: transform, opacity;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fbos-orb-1,
+  .fbos-orb-2 {
+    animation: none;
+  }
+}