ecopages 0.1.101 → 0.1.103

package/css/view-transitions.css

@@ -0,0 +1,217 @@
+/**
+ * Default View Transition CSS for EcoPages
+ *
+ * Import this file in your CSS:
+ * @import 'ecopages/css/view-transitions.css';
+ *
+ * Works with both @ecopages/browser-router and @ecopages/react-router.
+ */
+
+/* Disable root animation to prevent full page flash during transitions */
+::view-transition-old(root),
+::view-transition-new(root) {
+	animation: none;
+}
+
+/* Shared element transitions animate position/size smoothly */
+::view-transition-group(*) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Prevent transitioning elements from affecting layout of non-transitioning elements */
+::view-transition-image-pair(*) {
+	isolation: isolate;
+}
+
+/* Respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+	::view-transition-group(*),
+	::view-transition-old(*),
+	::view-transition-new(*) {
+		animation: none !important;
+	}
+}
+
+@keyframes eco-fade-out {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes eco-fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+/* Slide transition for elements with view-transition-name: eco-slide */
+::view-transition-image-pair(eco-slide) {
+	isolation: isolate;
+}
+
+::view-transition-old(eco-slide),
+::view-transition-new(eco-slide) {
+	animation-duration: 180ms;
+	animation-timing-function: ease-out;
+	mix-blend-mode: normal;
+}
+
+::view-transition-old(eco-slide) {
+	animation-name: eco-slide-out;
+}
+
+::view-transition-new(eco-slide) {
+	animation-name: eco-slide-in;
+}
+
+@keyframes eco-slide-out {
+	from {
+		opacity: 1;
+		transform: translateX(0);
+	}
+	to {
+		opacity: 0;
+		transform: translateX(-30px);
+	}
+}
+
+@keyframes eco-slide-in {
+	from {
+		opacity: 0;
+		transform: translateX(30px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+/* Persistent elements should not animate */
+[data-eco-persist] {
+	view-transition-name: none;
+}
+
+/* Declarative transition attributes */
+[data-eco-transition='slide'] {
+	view-transition-name: eco-slide;
+}
+[data-eco-transition='fade'] {
+	view-transition-name: eco-fade;
+}
+[data-eco-transition='zoom'] {
+	view-transition-name: eco-zoom;
+}
+[data-eco-transition='slide-up'] {
+	view-transition-name: eco-slide-up;
+}
+[data-eco-transition='slide-down'] {
+	view-transition-name: eco-slide-down;
+}
+
+/* FADE */
+::view-transition-old(eco-fade) {
+	animation: eco-fade-out 180ms ease-out both;
+}
+::view-transition-new(eco-fade) {
+	animation: eco-fade-in 180ms ease-out both;
+}
+
+/* ZOOM */
+::view-transition-image-pair(eco-zoom) {
+	isolation: isolate;
+}
+::view-transition-old(eco-zoom) {
+	animation: eco-zoom-out 180ms ease-in both;
+}
+::view-transition-new(eco-zoom) {
+	animation: eco-zoom-in 180ms ease-out both;
+}
+@keyframes eco-zoom-out {
+	from {
+		opacity: 1;
+		transform: scale(1);
+	}
+	to {
+		opacity: 0;
+		transform: scale(0.9);
+	}
+}
+@keyframes eco-zoom-in {
+	from {
+		opacity: 0;
+		transform: scale(0.9);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+/* SLIDE UP */
+::view-transition-image-pair(eco-slide-up) {
+	isolation: isolate;
+}
+::view-transition-old(eco-slide-up) {
+	animation: eco-slide-up-out 180ms ease-in both;
+}
+::view-transition-new(eco-slide-up) {
+	animation: eco-slide-up-in 180ms ease-out both;
+}
+@keyframes eco-slide-up-out {
+	from {
+		opacity: 1;
+		transform: translateY(0);
+	}
+	to {
+		opacity: 0;
+		transform: translateY(-30px);
+	}
+}
+@keyframes eco-slide-up-in {
+	from {
+		opacity: 0;
+		transform: translateY(30px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+/* SLIDE DOWN */
+::view-transition-image-pair(eco-slide-down) {
+	isolation: isolate;
+}
+::view-transition-old(eco-slide-down) {
+	animation: eco-slide-down-out 180ms ease-in both;
+}
+::view-transition-new(eco-slide-down) {
+	animation: eco-slide-down-in 180ms ease-out both;
+}
+@keyframes eco-slide-down-out {
+	from {
+		opacity: 1;
+		transform: translateY(0);
+	}
+	to {
+		opacity: 0;
+		transform: translateY(30px);
+	}
+}
+@keyframes eco-slide-down-in {
+	from {
+		opacity: 0;
+		transform: translateY(-30px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecopages",
-  "version": "0.1.101",
+  "version": "0.1.103",
   "description": "CLI utilities for Ecopages",
   "type": "module",
   "license": "MIT",
@@ -30,6 +30,7 @@
   },
   "files": [
     "bin/",
+    "css/",
     "README.md"
   ],
   "dependencies": {