@alivecss/aliveui 1.2.0 → 1.3.1

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 (14) hide show
  1. package/dist/cli.js +44 -13
  2. package/dist/index.js +44 -13
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +44 -13
  5. package/dist/index.mjs.map +1 -1
  6. package/dist/runtime.js +74 -0
  7. package/dist/runtime.js.map +1 -1
  8. package/dist/runtime.mjs +74 -0
  9. package/dist/runtime.mjs.map +1 -1
  10. package/dist/vite.js +44 -13
  11. package/dist/vite.js.map +1 -1
  12. package/dist/vite.mjs +44 -13
  13. package/dist/vite.mjs.map +1 -1
  14. package/package.json +1 -1
package/dist/cli.js CHANGED
@@ -2650,14 +2650,14 @@ video {
2650
2650
  gap: 10px;
2651
2651
  padding: 12px 18px;
2652
2652
  border-radius: 14px;
2653
- background: rgba(255,255,255,0.08);
2653
+ background: var(--alive-toast-bg, rgba(255,255,255,0.08));
2654
2654
  backdrop-filter: blur(16px);
2655
2655
  -webkit-backdrop-filter: blur(16px);
2656
- border: 1px solid rgba(255,255,255,0.12);
2656
+ border: 1px solid var(--alive-toast-border, rgba(255,255,255,0.12));
2657
2657
  box-shadow: 0 8px 32px rgba(0,0,0,0.24), 0 1px 0 rgba(255,255,255,0.06) inset;
2658
2658
  font-size: 0.875rem;
2659
2659
  font-weight: 500;
2660
- color: #fff;
2660
+ color: var(--alive-toast-color, #fff);
2661
2661
  animation: alive-toast-loop 5s cubic-bezier(0.22, 1, 0.36, 1) infinite both;
2662
2662
  }
2663
2663
  .alive-toast-icon {
@@ -2669,7 +2669,8 @@ video {
2669
2669
  justify-content: center;
2670
2670
  flex-shrink: 0;
2671
2671
  font-size: 14px;
2672
- background: rgba(255,255,255,0.1);
2672
+ background: var(--alive-toast-icon-bg, rgba(255,255,255,0.1));
2673
+ color: var(--alive-toast-icon-color, currentColor);
2673
2674
  }
2674
2675
  .alive-toast-title { font-weight: 600; font-size: 0.875rem; }
2675
2676
  .alive-toast-body { font-size: 0.8125rem; opacity: 0.65; margin-top: 1px; }
@@ -2703,7 +2704,7 @@ video {
2703
2704
  .alive-typewriter {
2704
2705
  display: inline-block;
2705
2706
  white-space: nowrap;
2706
- border-right: 2px solid currentColor;
2707
+ border-right: 2px solid var(--alive-typewriter-cursor, currentColor);
2707
2708
  animation:
2708
2709
  alive-type-in 2s steps(40, end) both,
2709
2710
  alive-blink 0.8s step-end infinite;
@@ -2902,7 +2903,7 @@ video {
2902
2903
  position: absolute;
2903
2904
  inset: -24px;
2904
2905
  border-radius: inherit;
2905
- background: radial-gradient(ellipse at center, rgba(99,102,241,0.25) 0%, rgba(99,102,241,0.08) 50%, transparent 70%);
2906
+ background: radial-gradient(ellipse at center, var(--alive-spotlight-color, rgba(99,102,241,0.25)) 0%, var(--alive-spotlight-color-mid, rgba(99,102,241,0.08)) 50%, transparent 70%);
2906
2907
  animation: alive-spotlight-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
2907
2908
  pointer-events: none;
2908
2909
  z-index: -1;
@@ -2912,8 +2913,8 @@ video {
2912
2913
  position: absolute;
2913
2914
  inset: -4px;
2914
2915
  border-radius: inherit;
2915
- border: 1px solid rgba(99,102,241,0.4);
2916
- box-shadow: 0 0 24px rgba(99,102,241,0.3), 0 0 48px rgba(99,102,241,0.15);
2916
+ border: 1px solid var(--alive-spotlight-ring-color, rgba(99,102,241,0.4));
2917
+ box-shadow: 0 0 24px var(--alive-spotlight-glow, rgba(99,102,241,0.3)), 0 0 48px var(--alive-spotlight-glow-far, rgba(99,102,241,0.15));
2917
2918
  animation: alive-spotlight-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
2918
2919
  pointer-events: none;
2919
2920
  }
@@ -2939,6 +2940,9 @@ video {
2939
2940
  font-size: 0.75rem;
2940
2941
  font-weight: 600;
2941
2942
  letter-spacing: 0.02em;
2943
+ background: var(--alive-badge-bg, transparent);
2944
+ color: var(--alive-badge-color, inherit);
2945
+ border: 1px solid var(--alive-badge-border, transparent);
2942
2946
  animation: alive-badge-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
2943
2947
  }
2944
2948
  .alive-badge-pulse .alive-badge-dot {
@@ -2947,6 +2951,7 @@ video {
2947
2951
  height: 8px;
2948
2952
  border-radius: 50%;
2949
2953
  flex-shrink: 0;
2954
+ background: var(--alive-badge-dot, currentColor);
2950
2955
  }
2951
2956
  .alive-badge-pulse .alive-badge-dot::before {
2952
2957
  content: '';
@@ -3163,8 +3168,8 @@ video {
3163
3168
  gap: 8px;
3164
3169
  padding: 20px 24px;
3165
3170
  border-radius: 14px;
3166
- background: rgba(255,255,255,0.04);
3167
- border: 1px solid rgba(255,255,255,0.08);
3171
+ background: var(--alive-metric-bg, rgba(255,255,255,0.04));
3172
+ border: 1px solid var(--alive-metric-border, rgba(255,255,255,0.08));
3168
3173
  animation: alive-metric-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
3169
3174
  min-width: 160px;
3170
3175
  }
@@ -3173,14 +3178,14 @@ video {
3173
3178
  font-weight: 500;
3174
3179
  text-transform: uppercase;
3175
3180
  letter-spacing: 0.07em;
3176
- color: rgba(255,255,255,0.4);
3181
+ color: var(--alive-metric-label-color, rgba(255,255,255,0.4));
3177
3182
  }
3178
3183
  .alive-metric-card-value {
3179
3184
  font-size: 2.25rem;
3180
3185
  font-weight: 800;
3181
3186
  letter-spacing: -0.04em;
3182
3187
  line-height: 1;
3183
- color: #fff;
3188
+ color: var(--alive-metric-value-color, #fff);
3184
3189
  }
3185
3190
  .alive-metric-card-change {
3186
3191
  display: inline-flex;
@@ -3204,7 +3209,7 @@ video {
3204
3209
  .alive-metric-card-bar-fill {
3205
3210
  height: 100%;
3206
3211
  border-radius: 2px;
3207
- background: linear-gradient(90deg, #6366f1, #8b5cf6, #6366f1);
3212
+ background: linear-gradient(90deg, var(--alive-metric-accent, #6366f1), var(--alive-metric-accent-2, #8b5cf6), var(--alive-metric-accent, #6366f1));
3208
3213
  background-size: 200% auto;
3209
3214
  transform-origin: left;
3210
3215
  animation:
@@ -4538,6 +4543,32 @@ video {
4538
4543
  .alive-meteor:nth-child(2) { top: 25%; left: 30%; animation-delay: 0.8s; animation-duration: 1.8s; width: 40px; }
4539
4544
  .alive-meteor:nth-child(3) { top: 5%; left: 60%; animation-delay: 1.5s; animation-duration: 2.5s; }
4540
4545
  .alive-meteor:nth-child(4) { top: 40%; left: 75%; animation-delay: 0.4s; animation-duration: 1.6s; width: 80px; }
4546
+
4547
+ /* \u2500\u2500 Scene Sequencer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
4548
+ Pair with [data-alive-sequence] + [data-alive-scene] attributes.
4549
+ The runtime (./runtime) drives is-active and transition classes.
4550
+ See: data-alive-duration, data-alive-transition, data-alive-loop.
4551
+ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
4552
+ [data-alive-sequence] {
4553
+ position: relative;
4554
+ overflow: hidden;
4555
+ }
4556
+ [data-alive-scene] {
4557
+ position: absolute;
4558
+ inset: 0;
4559
+ opacity: 0;
4560
+ pointer-events: none;
4561
+ }
4562
+ [data-alive-scene].is-active {
4563
+ opacity: 1;
4564
+ pointer-events: auto;
4565
+ z-index: 1;
4566
+ }
4567
+ /* Outgoing scene (has a -out class) must stay visible during the transition */
4568
+ [data-alive-scene][class*="-out"] {
4569
+ opacity: 1;
4570
+ z-index: 2;
4571
+ }
4541
4572
  `;
4542
4573
  }
4543
4574
 
package/dist/index.js CHANGED
@@ -2658,14 +2658,14 @@ video {
2658
2658
  gap: 10px;
2659
2659
  padding: 12px 18px;
2660
2660
  border-radius: 14px;
2661
- background: rgba(255,255,255,0.08);
2661
+ background: var(--alive-toast-bg, rgba(255,255,255,0.08));
2662
2662
  backdrop-filter: blur(16px);
2663
2663
  -webkit-backdrop-filter: blur(16px);
2664
- border: 1px solid rgba(255,255,255,0.12);
2664
+ border: 1px solid var(--alive-toast-border, rgba(255,255,255,0.12));
2665
2665
  box-shadow: 0 8px 32px rgba(0,0,0,0.24), 0 1px 0 rgba(255,255,255,0.06) inset;
2666
2666
  font-size: 0.875rem;
2667
2667
  font-weight: 500;
2668
- color: #fff;
2668
+ color: var(--alive-toast-color, #fff);
2669
2669
  animation: alive-toast-loop 5s cubic-bezier(0.22, 1, 0.36, 1) infinite both;
2670
2670
  }
2671
2671
  .alive-toast-icon {
@@ -2677,7 +2677,8 @@ video {
2677
2677
  justify-content: center;
2678
2678
  flex-shrink: 0;
2679
2679
  font-size: 14px;
2680
- background: rgba(255,255,255,0.1);
2680
+ background: var(--alive-toast-icon-bg, rgba(255,255,255,0.1));
2681
+ color: var(--alive-toast-icon-color, currentColor);
2681
2682
  }
2682
2683
  .alive-toast-title { font-weight: 600; font-size: 0.875rem; }
2683
2684
  .alive-toast-body { font-size: 0.8125rem; opacity: 0.65; margin-top: 1px; }
@@ -2711,7 +2712,7 @@ video {
2711
2712
  .alive-typewriter {
2712
2713
  display: inline-block;
2713
2714
  white-space: nowrap;
2714
- border-right: 2px solid currentColor;
2715
+ border-right: 2px solid var(--alive-typewriter-cursor, currentColor);
2715
2716
  animation:
2716
2717
  alive-type-in 2s steps(40, end) both,
2717
2718
  alive-blink 0.8s step-end infinite;
@@ -2910,7 +2911,7 @@ video {
2910
2911
  position: absolute;
2911
2912
  inset: -24px;
2912
2913
  border-radius: inherit;
2913
- background: radial-gradient(ellipse at center, rgba(99,102,241,0.25) 0%, rgba(99,102,241,0.08) 50%, transparent 70%);
2914
+ background: radial-gradient(ellipse at center, var(--alive-spotlight-color, rgba(99,102,241,0.25)) 0%, var(--alive-spotlight-color-mid, rgba(99,102,241,0.08)) 50%, transparent 70%);
2914
2915
  animation: alive-spotlight-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
2915
2916
  pointer-events: none;
2916
2917
  z-index: -1;
@@ -2920,8 +2921,8 @@ video {
2920
2921
  position: absolute;
2921
2922
  inset: -4px;
2922
2923
  border-radius: inherit;
2923
- border: 1px solid rgba(99,102,241,0.4);
2924
- box-shadow: 0 0 24px rgba(99,102,241,0.3), 0 0 48px rgba(99,102,241,0.15);
2924
+ border: 1px solid var(--alive-spotlight-ring-color, rgba(99,102,241,0.4));
2925
+ box-shadow: 0 0 24px var(--alive-spotlight-glow, rgba(99,102,241,0.3)), 0 0 48px var(--alive-spotlight-glow-far, rgba(99,102,241,0.15));
2925
2926
  animation: alive-spotlight-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
2926
2927
  pointer-events: none;
2927
2928
  }
@@ -2947,6 +2948,9 @@ video {
2947
2948
  font-size: 0.75rem;
2948
2949
  font-weight: 600;
2949
2950
  letter-spacing: 0.02em;
2951
+ background: var(--alive-badge-bg, transparent);
2952
+ color: var(--alive-badge-color, inherit);
2953
+ border: 1px solid var(--alive-badge-border, transparent);
2950
2954
  animation: alive-badge-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
2951
2955
  }
2952
2956
  .alive-badge-pulse .alive-badge-dot {
@@ -2955,6 +2959,7 @@ video {
2955
2959
  height: 8px;
2956
2960
  border-radius: 50%;
2957
2961
  flex-shrink: 0;
2962
+ background: var(--alive-badge-dot, currentColor);
2958
2963
  }
2959
2964
  .alive-badge-pulse .alive-badge-dot::before {
2960
2965
  content: '';
@@ -3171,8 +3176,8 @@ video {
3171
3176
  gap: 8px;
3172
3177
  padding: 20px 24px;
3173
3178
  border-radius: 14px;
3174
- background: rgba(255,255,255,0.04);
3175
- border: 1px solid rgba(255,255,255,0.08);
3179
+ background: var(--alive-metric-bg, rgba(255,255,255,0.04));
3180
+ border: 1px solid var(--alive-metric-border, rgba(255,255,255,0.08));
3176
3181
  animation: alive-metric-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
3177
3182
  min-width: 160px;
3178
3183
  }
@@ -3181,14 +3186,14 @@ video {
3181
3186
  font-weight: 500;
3182
3187
  text-transform: uppercase;
3183
3188
  letter-spacing: 0.07em;
3184
- color: rgba(255,255,255,0.4);
3189
+ color: var(--alive-metric-label-color, rgba(255,255,255,0.4));
3185
3190
  }
3186
3191
  .alive-metric-card-value {
3187
3192
  font-size: 2.25rem;
3188
3193
  font-weight: 800;
3189
3194
  letter-spacing: -0.04em;
3190
3195
  line-height: 1;
3191
- color: #fff;
3196
+ color: var(--alive-metric-value-color, #fff);
3192
3197
  }
3193
3198
  .alive-metric-card-change {
3194
3199
  display: inline-flex;
@@ -3212,7 +3217,7 @@ video {
3212
3217
  .alive-metric-card-bar-fill {
3213
3218
  height: 100%;
3214
3219
  border-radius: 2px;
3215
- background: linear-gradient(90deg, #6366f1, #8b5cf6, #6366f1);
3220
+ background: linear-gradient(90deg, var(--alive-metric-accent, #6366f1), var(--alive-metric-accent-2, #8b5cf6), var(--alive-metric-accent, #6366f1));
3216
3221
  background-size: 200% auto;
3217
3222
  transform-origin: left;
3218
3223
  animation:
@@ -4546,6 +4551,32 @@ video {
4546
4551
  .alive-meteor:nth-child(2) { top: 25%; left: 30%; animation-delay: 0.8s; animation-duration: 1.8s; width: 40px; }
4547
4552
  .alive-meteor:nth-child(3) { top: 5%; left: 60%; animation-delay: 1.5s; animation-duration: 2.5s; }
4548
4553
  .alive-meteor:nth-child(4) { top: 40%; left: 75%; animation-delay: 0.4s; animation-duration: 1.6s; width: 80px; }
4554
+
4555
+ /* \u2500\u2500 Scene Sequencer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
4556
+ Pair with [data-alive-sequence] + [data-alive-scene] attributes.
4557
+ The runtime (./runtime) drives is-active and transition classes.
4558
+ See: data-alive-duration, data-alive-transition, data-alive-loop.
4559
+ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
4560
+ [data-alive-sequence] {
4561
+ position: relative;
4562
+ overflow: hidden;
4563
+ }
4564
+ [data-alive-scene] {
4565
+ position: absolute;
4566
+ inset: 0;
4567
+ opacity: 0;
4568
+ pointer-events: none;
4569
+ }
4570
+ [data-alive-scene].is-active {
4571
+ opacity: 1;
4572
+ pointer-events: auto;
4573
+ z-index: 1;
4574
+ }
4575
+ /* Outgoing scene (has a -out class) must stay visible during the transition */
4576
+ [data-alive-scene][class*="-out"] {
4577
+ opacity: 1;
4578
+ z-index: 2;
4579
+ }
4549
4580
  `;
4550
4581
  }
4551
4582