@pablozaiden/webapp 1.3.0 → 1.3.2

package/README.md

@@ -34,7 +34,8 @@ The web export includes `Presence`, `Collapsible`, `AsyncState`, `AnimatedList`,
 `Tabs`, `TabPanels`, and `TabPanel`. Use stable React keys with `AnimatedList`;
 it preserves removed keyed children for the exit duration and marks them
 inaccessible while they leave. The primitives honor
-`prefers-reduced-motion` and skip visual movement when it is enabled.
+`prefers-reduced-motion`; transient appearance animations use opacity-only
+fades, while structural primitives such as `Collapsible` animate their layout.
 
 ```tsx
 <AnimatedList>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pablozaiden/webapp",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Opinionated Bun + React webapp framework for single-server apps",
   "license": "MIT",
   "type": "module",

package/src/web/app-shell.tsx

@@ -143,7 +143,17 @@ export function AppShell({
             tabIndex={0}
             aria-label="Close sidebar"
             aria-hidden={state === "exit" ? true : undefined}
-            onClick={closeSidebar}
+            onPointerDown={(event) => {
+              if (event.button === 0) {
+                event.preventDefault();
+                closeSidebar();
+              }
+            }}
+            onClick={(event) => {
+              if (event.detail === 0) {
+                closeSidebar();
+              }
+            }}
             onKeyDown={(event) => {
               if (event.key === "Enter" || event.key === " ") {
                 event.preventDefault();

package/src/web/styles.css

@@ -683,16 +683,22 @@ textarea::placeholder {
 }
 
 @keyframes wapp-view-transition-old {
+  from {
+    opacity: 1;
+  }
+
   to {
     opacity: 0;
-    transform: translateY(calc(var(--wapp-motion-distance) * -1));
   }
 }
 
 @keyframes wapp-view-transition-new {
   from {
     opacity: 0;
-    transform: translateY(var(--wapp-motion-distance));
+  }
+
+  to {
+    opacity: 1;
   }
 }
 
@@ -708,24 +714,20 @@ textarea::placeholder {
 @keyframes wapp-fade-in {
   from {
     opacity: 0;
-    transform: translateY(var(--wapp-motion-distance));
   }
 
   to {
     opacity: 1;
-    transform: translateY(0);
   }
 }
 
 @keyframes wapp-fade-out {
   from {
     opacity: 1;
-    transform: translateY(0);
   }
 
   to {
     opacity: 0;
-    transform: translateY(calc(var(--wapp-motion-distance) * -1));
   }
 }
 
@@ -1341,7 +1343,6 @@ textarea::placeholder {
 
 .wapp-floating-panel {
   z-index: 1000;
-  transform-origin: top left;
 }
 
 .wapp-floating-panel.wapp-motion-enter {
@@ -1355,58 +1356,48 @@ textarea::placeholder {
 @keyframes wapp-floating-panel-enter {
   from {
     opacity: 0;
-    transform: translateY(0.25rem) scale(0.98);
   }
 
   to {
     opacity: 1;
-    transform: translateY(0) scale(1);
   }
 }
 
 @keyframes wapp-floating-panel-exit {
   from {
     opacity: 1;
-    transform: translateY(0) scale(1);
   }
 
   to {
     opacity: 0;
-    transform: translateY(0.25rem) scale(0.98);
   }
 }
 
 .wapp-action-menu.wapp-motion-enter {
-  transform-origin: top right;
   animation-name: wapp-menu-enter;
 }
 
 .wapp-action-menu.wapp-motion-exit {
-  transform-origin: top right;
   animation-name: wapp-menu-exit;
 }
 
 @keyframes wapp-menu-enter {
   from {
     opacity: 0;
-    transform: translateY(-0.25rem) scale(0.98);
   }
 
   to {
     opacity: 1;
-    transform: translateY(0) scale(1);
   }
 }
 
 @keyframes wapp-menu-exit {
   from {
     opacity: 1;
-    transform: translateY(0) scale(1);
   }
 
   to {
     opacity: 0;
-    transform: translateY(-0.25rem) scale(0.98);
   }
 }
 
@@ -1947,12 +1938,10 @@ textarea::placeholder {
 @keyframes wapp-toast-enter {
   from {
     opacity: 0;
-    transform: translateY(0.5rem);
   }
 
   to {
     opacity: 1;
-    transform: translateY(0);
   }
 }
 
@@ -1966,9 +1955,12 @@ textarea::placeholder {
 }
 
 @keyframes wapp-toast-exit {
+  from {
+    opacity: 1;
+  }
+
   to {
     opacity: 0;
-    transform: translateY(0.25rem);
   }
 }
 
@@ -2255,36 +2247,11 @@ textarea::placeholder {
   background: var(--wapp-surface);
   padding: 0;
   box-shadow: 0 24px 55px rgb(0 0 0 / 0.38);
-  animation: wapp-dialog-enter var(--wapp-motion-fast) var(--wapp-motion-ease) both;
-}
-
-.wapp-dialog.wapp-motion-exit,
-.wapp-modal.wapp-motion-exit {
-  animation-name: wapp-dialog-exit;
-}
-
-@keyframes wapp-dialog-enter {
-  from {
-    opacity: 0;
-    transform: translate(-50%, calc(-50% + 0.5rem)) scale(0.98);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
+  animation: wapp-fade-in var(--wapp-motion-fast) var(--wapp-motion-ease) both;
 }
 
-@keyframes wapp-dialog-exit {
-  from {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-
-  to {
-    opacity: 0;
-    transform: translate(-50%, calc(-50% + 0.5rem)) scale(0.98);
-  }
+.wapp-dialog.wapp-motion-exit {
+  animation-name: wapp-fade-out;
 }
 
 .wapp-dialog-title {
@@ -2385,7 +2352,11 @@ textarea::placeholder {
   background: var(--wapp-surface);
   box-shadow: 0 24px 55px rgb(0 0 0 / 0.38);
   outline: none;
-  animation: wapp-dialog-enter var(--wapp-motion-fast) var(--wapp-motion-ease) both;
+  animation: wapp-fade-in var(--wapp-motion-fast) var(--wapp-motion-ease) both;
+}
+
+.wapp-modal.wapp-motion-exit {
+  animation-name: wapp-fade-out;
 }
 
 .wapp-modal-sm {