From 8db9d308288ce99dddcd27e67166001e1984cb7f Mon Sep 17 00:00:00 2001
From: Dmitriy Petrov <floplopru@gmail.com>
Date: Sun, 12 Jul 2026 00:28:34 +0300
Subject: [PATCH] Refine rule editor exit animations and bump Harbor versions

---
 src/shared/versions.js                |  4 ++--
 src/web/styles.css                    | 15 ++++++++-------
 test/web/rule-editor-contract.test.js |  2 ++
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/shared/versions.js b/src/shared/versions.js
index ae938ba..9f09f5f 100644
--- a/src/shared/versions.js
+++ b/src/shared/versions.js
@@ -1,6 +1,6 @@
 export const HARBOR_VERSIONS = Object.freeze({
-  macClient: '0.6.12',
-  gatewayClient: '0.6.11',
+  macClient: '0.6.13',
+  gatewayClient: '0.6.12',
   gatewayBackend: '0.6.0',
 });
 
diff --git a/src/web/styles.css b/src/web/styles.css
index 765839b..cb9dea9 100644
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -956,7 +956,7 @@ p {
 
 .client-local-rule.is-removing {
   pointer-events: none;
-  animation: client-local-rule-leave 760ms cubic-bezier(0.7, 0, 0.84, 0) both;
+  animation: client-local-rule-leave 820ms cubic-bezier(0.7, 0, 0.84, 0) both;
 }
 
 .client-delete-strike {
@@ -996,7 +996,7 @@ p {
 }
 
 .client-deletable-row.is-removing > .client-delete-strike {
-  animation: client-delete-strike 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation: client-delete-strike 820ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
 .client-deletable-row.is-removing > :not(.client-delete-strike) {
@@ -1341,14 +1341,15 @@ p {
 }
 
 @keyframes client-local-rule-leave {
-  0%, 48% { opacity: 1; filter: blur(0); }
-  100% { opacity: 0; filter: blur(8px); }
+  0%, 52% { opacity: 1; filter: blur(0); transform: translateX(0); }
+  100% { opacity: 0; filter: blur(8px); transform: translateX(28px); }
 }
 
 @keyframes client-delete-strike {
-  0% { opacity: 1; transform: scaleX(0); }
-  38%, 58% { opacity: 1; transform: scaleX(1); }
-  100% { opacity: 0; transform: scaleX(1); }
+  0% { opacity: 1; transform: scaleX(0); transform-origin: left center; }
+  42%, 52% { opacity: 1; transform: scaleX(1); transform-origin: left center; }
+  53% { opacity: 1; transform: scaleX(1); transform-origin: right center; }
+  100% { opacity: 0; transform: scaleX(0); transform-origin: right center; }
 }
 
 @keyframes client-local-rules-notice {
diff --git a/test/web/rule-editor-contract.test.js b/test/web/rule-editor-contract.test.js
index 7f2fab5..d0b3534 100644
--- a/test/web/rule-editor-contract.test.js
+++ b/test/web/rule-editor-contract.test.js
@@ -31,6 +31,8 @@ test('rule editor add latency stays constant and dirty exits are guarded', () =>
   assert.match(styles, /\.client-delete-strike::before[\s\S]*20% 8%[\s\S]*filter: blur\(3px\)/);
   assert.doesNotMatch(styles, /client-local-rule > button:last-child/);
   assert.match(styles, /@keyframes client-delete-strike[\s\S]*scaleX\(0\)[\s\S]*scaleX\(1\)/);
+  assert.match(styles, /53%[\s\S]*transform-origin: right center[\s\S]*100%[\s\S]*scaleX\(0\)/);
+  assert.match(styles, /@keyframes client-local-rule-leave[\s\S]*translateX\(28px\)/);
   assert.match(styles, /\.client-local-rule:has\(\.client-rule-type\.is-open\)[\s\S]*z-index: 5/);
 });