@pablozaiden/webapp 1.2.0 → 1.3.1

package/src/web/styles.css

@@ -38,6 +38,10 @@
   --wapp-safe-area-right: env(safe-area-inset-right, 0px);
   --wapp-mobile-bottom-clearance: max(var(--wapp-safe-area-bottom), 0.75rem);
   --wapp-viewport-height: 100vh;
+  --wapp-motion-fast: 350ms;
+  --wapp-motion-normal: 350ms;
+  --wapp-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --wapp-motion-distance: 0.25rem;
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
@@ -638,6 +642,7 @@ textarea::placeholder {
 }
 
 .wapp-main-content {
+  view-transition-name: wapp-main-content;
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -648,6 +653,132 @@ textarea::placeholder {
   scroll-padding-bottom: var(--wapp-mobile-bottom-clearance);
 }
 
+.wapp-route-view,
+.wapp-route-fade {
+  min-width: 0;
+}
+
+.wapp-route-view {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  flex-direction: column;
+}
+
+.wapp-route-view,
+.wapp-route-fade {
+  animation: wapp-fade-in var(--wapp-motion-normal) var(--wapp-motion-ease) both;
+}
+
+.wapp-native-route-transitions .wapp-route-view {
+  animation: none;
+}
+
+::view-transition-old(wapp-main-content) {
+  animation: wapp-view-transition-old var(--wapp-motion-normal) var(--wapp-motion-ease) both;
+}
+
+::view-transition-new(wapp-main-content) {
+  animation: wapp-view-transition-new var(--wapp-motion-normal) var(--wapp-motion-ease) both;
+}
+
+@keyframes wapp-view-transition-old {
+  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));
+  }
+}
+
+.wapp-motion-enter {
+  animation: wapp-fade-in var(--wapp-motion-fast) var(--wapp-motion-ease) both;
+}
+
+.wapp-motion-exit {
+  animation: wapp-fade-out var(--wapp-motion-fast) var(--wapp-motion-ease) both;
+  pointer-events: none;
+}
+
+@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));
+  }
+}
+
+.wapp-streaming-text-chunk {
+  animation: wapp-streaming-text-enter var(--wapp-motion-fast) var(--wapp-motion-ease) both;
+}
+
+@keyframes wapp-streaming-text-enter {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.wapp-collapsible {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--wapp-motion-normal) var(--wapp-motion-ease), opacity var(--wapp-motion-normal) var(--wapp-motion-ease);
+}
+
+.wapp-collapsible-inner {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.wapp-collapsible-enter {
+  grid-template-rows: 0fr;
+  opacity: 0;
+}
+
+.wapp-collapsible-idle {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+
+.wapp-collapsible-exit {
+  grid-template-rows: 0fr;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.wapp-async-state {
+  animation: wapp-fade-in var(--wapp-motion-fast) var(--wapp-motion-ease) both;
+}
+
+.wapp-async-state-refreshing {
+  color: var(--wapp-muted);
+  font-size: 0.75rem;
+}
+
 .wapp-page {
   width: 100%;
   min-width: 0;
@@ -1208,6 +1339,77 @@ textarea::placeholder {
   box-shadow: 0 16px 36px rgb(15 23 42 / 0.18);
 }
 
+.wapp-floating-panel {
+  z-index: 1000;
+  transform-origin: top left;
+}
+
+.wapp-floating-panel.wapp-motion-enter {
+  animation-name: wapp-floating-panel-enter;
+}
+
+.wapp-floating-panel.wapp-motion-exit {
+  animation-name: wapp-floating-panel-exit;
+}
+
+@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);
+  }
+}
+
 :root.dark .wapp-action-menu {
   border-color: #334155;
   background: #262626;
@@ -1684,7 +1886,7 @@ textarea::placeholder {
   padding: 0.75rem;
   box-shadow: 0 8px 24px rgb(0 0 0 / 0.14);
   pointer-events: auto;
-  animation: wapp-toast-enter 160ms ease-out;
+  animation: wapp-toast-enter var(--wapp-motion-fast) var(--wapp-motion-ease) both;
 }
 
 .wapp-toast-success {
@@ -1754,9 +1956,30 @@ textarea::placeholder {
   }
 }
 
+.wapp-toast.wapp-motion-enter {
+  animation-name: wapp-toast-enter;
+}
+
+.wapp-toast.wapp-motion-exit {
+  animation-name: wapp-toast-exit;
+  pointer-events: none;
+}
+
+@keyframes wapp-toast-exit {
+  to {
+    opacity: 0;
+    transform: translateY(0.25rem);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .wapp-toast {
-    animation: none;
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
   }
 }
 
@@ -1841,6 +2064,76 @@ textarea::placeholder {
   box-shadow: none;
 }
 
+.wapp-tabs {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.25rem;
+  border-bottom: 1px solid var(--wapp-border-soft);
+}
+
+.wapp-tab {
+  position: relative;
+  border: 0;
+  background: transparent;
+  color: var(--wapp-muted);
+  cursor: pointer;
+  padding: 0.625rem 0.75rem;
+  transition: color 120ms ease;
+}
+
+.wapp-tab::after {
+  position: absolute;
+  right: 0.75rem;
+  bottom: -1px;
+  left: 0.75rem;
+  height: 2px;
+  background: var(--wapp-primary);
+  content: "";
+  opacity: 0;
+  transform: scaleX(0.35);
+  transition: opacity 120ms ease, transform 160ms var(--wapp-motion-ease);
+}
+
+.wapp-tab:hover,
+.wapp-tab.active {
+  color: var(--wapp-text);
+}
+
+.wapp-tab.active::after {
+  opacity: 1;
+  transform: scaleX(1);
+}
+
+.wapp-tab:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.wapp-tab:focus-visible {
+  outline: 2px solid var(--wapp-primary);
+  outline-offset: -2px;
+}
+
+.wapp-tab-panels {
+  position: relative;
+  min-width: 0;
+}
+
+.wapp-tab-panel {
+  min-width: 0;
+}
+
+.wapp-tab-panel.wapp-motion-exit {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  width: 100%;
+}
+
+.wapp-animated-list-contents {
+  display: contents;
+}
+
 .wapp-list {
   margin-top: 0.75rem;
   border: 1px solid var(--wapp-border-soft);
@@ -1932,6 +2225,12 @@ textarea::placeholder {
   background: var(--wapp-overlay-bg);
   backdrop-filter: var(--wapp-overlay-blur);
   z-index: 50;
+  animation: wapp-fade-in var(--wapp-motion-fast) var(--wapp-motion-ease) both;
+}
+
+.wapp-mobile-backdrop.wapp-motion-exit {
+  animation-name: wapp-fade-out;
+  pointer-events: none;
 }
 
 .wapp-dialog-backdrop {
@@ -1940,6 +2239,17 @@ textarea::placeholder {
   z-index: 80;
   background: rgb(0 0 0 / 0.58);
   backdrop-filter: blur(10px);
+  animation: wapp-fade-in var(--wapp-motion-fast) var(--wapp-motion-ease) both;
+}
+
+.wapp-confirm-dialog-backdrop {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: max(0.75rem, var(--wapp-safe-area-top)) max(0.75rem, var(--wapp-safe-area-right)) max(0.75rem, var(--wapp-safe-area-bottom)) max(0.75rem, var(--wapp-safe-area-left));
 }
 
 .wapp-dialog {
@@ -1955,6 +2265,77 @@ 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);
+  }
+}
+
+@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-confirm-dialog-backdrop > .wapp-confirm-dialog {
+  position: relative;
+  top: auto;
+  left: auto;
+  width: min(28rem, 100%);
+  max-width: 100%;
+  max-height: calc(var(--wapp-viewport-height) - 1.5rem - var(--wapp-safe-area-top) - var(--wapp-safe-area-bottom));
+  transform: none;
+  display: flex;
+  flex-direction: column;
+  animation-name: wapp-confirm-dialog-enter;
+}
+
+.wapp-confirm-dialog-backdrop > .wapp-confirm-dialog.wapp-motion-exit {
+  animation-name: wapp-confirm-dialog-exit;
+}
+
+@keyframes wapp-confirm-dialog-enter {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes wapp-confirm-dialog-exit {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(0.5rem) scale(0.98);
+  }
 }
 
 .wapp-dialog-title {
@@ -2002,6 +2383,13 @@ textarea::placeholder {
   padding: 1.25rem 1.5rem;
 }
 
+.wapp-confirm-dialog .wapp-dialog-body {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
 .wapp-dialog-body p {
   margin: 0;
   color: color-mix(in srgb, var(--wapp-text), var(--wapp-muted) 28%);
@@ -2015,6 +2403,17 @@ textarea::placeholder {
   padding: 1rem 1.5rem;
 }
 
+@media (max-width: 639px) {
+  .wapp-confirm-dialog .wapp-dialog-actions {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+
+  .wapp-confirm-dialog .wapp-dialog-actions .wapp-button {
+    width: 100%;
+  }
+}
+
 .wapp-modal-layer {
   position: fixed;
   inset: 0;
@@ -2026,6 +2425,13 @@ textarea::placeholder {
   overflow-x: hidden;
   overflow-y: auto;
   padding: 0.5rem;
+  animation: wapp-fade-in var(--wapp-motion-fast) var(--wapp-motion-ease) both;
+}
+
+.wapp-modal-layer.wapp-motion-exit,
+.wapp-dialog-backdrop.wapp-motion-exit {
+  animation: wapp-fade-out var(--wapp-motion-fast) var(--wapp-motion-ease) both;
+  pointer-events: none;
 }
 
 .wapp-modal-overlay {
@@ -2048,6 +2454,7 @@ 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;
 }
 
 .wapp-modal-sm {
@@ -2205,10 +2612,18 @@ textarea::placeholder {
   transform: translateX(0);
 }
 
+:root[data-wapp-mobile] .wapp-shell:not(.sidebar-open) .wapp-sidebar {
+  pointer-events: none;
+}
+
 :root[data-wapp-mobile] .wapp-shell.sidebar-open .wapp-mobile-backdrop {
   display: block;
 }
 
+:root[data-wapp-mobile] .wapp-mobile-backdrop.wapp-motion-exit {
+  display: block;
+}
+
 :root[data-wapp-mobile] .wapp-main-header {
   padding: 0.875rem 1rem;
 }

package/src/web/toast.tsx

@@ -1,5 +1,6 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { createPortal } from "react-dom";
+import { MOTION_FAST_MS, usePresence } from "./motion";
 
 export type ToastVariant = "success" | "error" | "warning" | "info";
 export type ToastId = string;
@@ -67,31 +68,77 @@ function normalizeDuration(duration: number | undefined): number {
   return duration;
 }
 
+function ToastItem({
+  toast,
+  present,
+  onDismiss,
+  onExitComplete,
+}: {
+  toast: Toast;
+  present: boolean;
+  onDismiss: (id: ToastId) => void;
+  onExitComplete: (id: ToastId) => void;
+}) {
+  const presence = usePresence(present, { duration: MOTION_FAST_MS });
+
+  useEffect(() => {
+    if (!present && !presence.mounted) {
+      onExitComplete(toast.id);
+    }
+  }, [onExitComplete, presence.mounted, present, toast.id]);
+
+  if (!presence.mounted) {
+    return null;
+  }
+
+  const isError = toast.variant === "error";
+  return (
+    <div
+      className={`wapp-toast wapp-toast-${toast.variant} wapp-motion-${presence.state}`}
+      data-toast-variant={toast.variant}
+      role={isError ? "alert" : "status"}
+      aria-live={isError ? "assertive" : "polite"}
+      aria-atomic="true"
+      aria-hidden={present ? undefined : true}
+    >
+      <span className="wapp-toast-message">{toast.message}</span>
+      <button type="button" className="wapp-toast-dismiss" aria-label="Dismiss notification" onClick={() => onDismiss(toast.id)}>
+        ×
+      </button>
+    </div>
+  );
+}
+
 function ToastViewport({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: ToastId) => void }) {
-  if (toasts.length === 0) {
+  const [renderedToasts, setRenderedToasts] = useState<Toast[]>(toasts);
+  const activeIds = useMemo(() => new Set(toasts.map((toast) => toast.id)), [toasts]);
+
+  useEffect(() => {
+    setRenderedToasts((current) => {
+      const exiting = current.filter((toast) => !activeIds.has(toast.id));
+      return [...toasts, ...exiting];
+    });
+  }, [activeIds, toasts]);
+
+  const removeExited = useCallback((id: ToastId) => {
+    setRenderedToasts((current) => current.filter((toast) => toast.id !== id));
+  }, []);
+
+  if (renderedToasts.length === 0) {
     return null;
   }
 
   return createPortal(
-    <div className="wapp-toast-viewport" role="region" aria-label="Notifications">
-      {toasts.map((toast) => {
-        const isError = toast.variant === "error";
-        return (
-          <div
-            key={toast.id}
-            className={`wapp-toast wapp-toast-${toast.variant}`}
-            data-toast-variant={toast.variant}
-            role={isError ? "alert" : "status"}
-            aria-live={isError ? "assertive" : "polite"}
-            aria-atomic="true"
-          >
-            <span className="wapp-toast-message">{toast.message}</span>
-            <button type="button" className="wapp-toast-dismiss" aria-label="Dismiss notification" onClick={() => onDismiss(toast.id)}>
-              ×
-            </button>
-          </div>
-        );
-      })}
+    <div className="wapp-toast-viewport" role="region" aria-label="Notifications" aria-hidden={toasts.length === 0 ? true : undefined}>
+      {renderedToasts.map((toast) => (
+        <ToastItem
+          key={toast.id}
+          toast={toast}
+          present={activeIds.has(toast.id)}
+          onDismiss={onDismiss}
+          onExitComplete={removeExited}
+        />
+      ))}
     </div>,
     document.body,
   );