@forgeroute/ui 0.2.0 → 0.3.0

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@forgeroute/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "peerDependencies": {
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",
-    "@angular/forms": ">=22.0.0"
+    "@angular/forms": ">=22.0.0",
+    "@angular/router": ">=22.0.0",
+    "@angular/platform-browser": ">=22.0.0"
   },
   "peerDependenciesMeta": {
     "@angular/forms": {

package/src/_animations.scss

@@ -0,0 +1,94 @@
+/* ═══ Alive Animations ═══ */
+/* Global utility classes for page-load entrance animations */
+/* Use --i CSS variable for stagger delay: [style.--i]="$index" */
+
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; }
+}
+
+@keyframes rowFadeUp {
+  from { opacity: 0; transform: translateY(6px); }
+}
+
+@keyframes dotPulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: .5; transform: scale(1.3); }
+}
+
+@keyframes cardBreathe {
+  0%, 100% { box-shadow: 0 0 0 rgba(59,130,246,0); border-color: #e2e8f0; }
+  50% { box-shadow: 0 4px 24px rgba(59,130,246,.08); border-color: #93c5fd; }
+}
+
+// ── Table rows ──
+// Applied automatically by ui-data-table (rows and cards).
+// The stagger is capped at 8 steps (240ms) so a 50-row page never starts its last row ~1.5s late.
+.alive-row {
+  animation: rowFadeUp .3s ease backwards;
+  animation-delay: calc(min(var(--i, 0), 8) * 30ms);
+}
+
+// ── Page/toolbar header ──
+.alive-header {
+  animation: fadeUp .3s ease both;
+}
+
+// ── Detail page cards ──
+.alive-card {
+  animation: fadeUp .4s ease both;
+  animation-delay: calc(var(--i, 0) * 80ms);
+}
+
+// Auto-stagger for card containers
+.alive-cards > * {
+  animation: fadeUp .4s ease both;
+  @for $n from 1 through 12 {
+    &:nth-child(#{$n}) { animation-delay: #{($n - 1) * 80}ms; }
+  }
+}
+
+// ── Snapshot / KPI metrics ──
+.alive-metric {
+  animation: fadeUp .35s ease both;
+  animation-delay: calc(var(--i, 0) * 50ms);
+}
+
+// ── Breathing card border ──
+.alive-breathe {
+  animation: cardBreathe 4s ease-in-out infinite;
+}
+
+// ── Status dots ──
+.alive-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  animation: dotPulse 2.5s ease-in-out infinite;
+
+  &.dot-success { background: #22c55e; }
+  &.dot-warning { background: #f59e0b; }
+  &.dot-danger  { background: #ef4444; }
+  &.dot-info    { background: #3b82f6; }
+}
+
+// ── Badge entrance ──
+.alive-badge {
+  animation: fadeUp .25s ease both;
+}
+
+// ── Generic stagger ──
+.alive-stagger {
+  animation: fadeUp .35s ease both;
+  animation-delay: calc(var(--i, 0) * 60ms);
+}
+
+// ── Accessibility ──
+@media (prefers-reduced-motion: reduce) {
+  .alive-row, .alive-card, .alive-header, .alive-metric,
+  .alive-breathe, .alive-dot, .alive-badge, .alive-stagger,
+  .alive-cards > * {
+    animation: none !important;
+  }
+}