@zyncat/ui 0.11.0 → 0.12.0

package/src/components/composites/toast/Toast.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import './toast.css';
+
 import {
   useEffect,
   useLayoutEffect,
@@ -8,26 +9,28 @@ import {
   useState,
   useSyncExternalStore,
   type CSSProperties,
-  type FocusEvent as ReactFocusEvent,
-  type KeyboardEvent as ReactKeyboardEvent,
-  type PointerEvent as ReactPointerEvent,
   type HTMLAttributes,
   type ReactElement,
+  type FocusEvent as ReactFocusEvent,
+  type KeyboardEvent as ReactKeyboardEvent,
   type ReactNode,
+  type PointerEvent as ReactPointerEvent,
   type RefObject,
 } from 'react';
 import { createPortal } from 'react-dom';
+
+import type { DataAttributes } from '../../../dom-props';
 import { animate, startDrag, type Layer, type Playback } from '../../../engine';
-import { Presence } from '../../../motion/presence';
 import { Motion } from '../../../motion/element';
+import { Presence } from '../../../motion/presence';
+import { popOut } from '../../../motion/presets';
 import { UIMotion } from '../../../tokens/motion-tokens';
 import { fireGlint } from '../../internal/glass/glint';
-import { tokenPx } from '../../internal/utils/token-px';
 import { Icon, type IconName } from '../../internal/icon/Icon';
-import { Button } from '../../primitives/button/Button';
-import { UIToast, DEFAULT_TOASTER_CONFIG, type ToastRecord, type ToastTone, type ToasterConfig } from './toast-store';
-import type { DataAttributes } from '../../../dom-props';
 import { cx } from '../../internal/utils/cx';
+import { tokenPx } from '../../internal/utils/token-px';
+import { Button } from '../../primitives/button/Button';
+import { DEFAULT_TOASTER_CONFIG, UIToast, type ToasterConfig, type ToastRecord, type ToastTone } from './toast-store';
 
 const SM = UIMotion;
 const store = UIToast;
@@ -35,6 +38,7 @@ const store = UIToast;
 const COLLAPSE_GRACE = 140;
 const SWIPE_X = 64;
 const SWIPE_V = 480;
+const SWIPE_FLING_X = 420;
 
 let GAP = 0;
 function stackGap() {
@@ -50,34 +54,25 @@ const TONE_ICON: Partial<Record<ToastTone, IconName>> = {
 };
 
 function useToneGesture(tone: ToastTone, ref: RefObject<HTMLElement>) {
-  const prevTone = useRef<ToastTone | null>(null);
   useEffect(() => {
-    const prev = prevTone.current;
-    prevTone.current = tone;
-    if (tone === prev) return;
     if (tone === 'success') return fireGlint(ref.current);
     if (tone === 'danger' && ref.current) {
-      const shake = ref.current.firstElementChild as HTMLElement | null;
-      if (!shake) return;
-      const fall = animate(shake, {
+      const fall = animate(ref.current, {
         x: [0, -7, 5, -2, 0],
-        timing: { duration: SM.dur.slow, ease: SM.ease.standard, delay: SM.dur.base },
+        timing: { duration: SM.dur.slow, ease: SM.ease.standard, delay: SM.dur.base, fill: 'none' },
+        composite: 'add',
       });
-      fall.finished.then(() => fall.stop());
       return () => fall.stop();
     }
   }, [tone]);
 }
 
-function useReplay<T extends HTMLElement>(token: unknown, build: () => Layer[]) {
-  const ref = useRef<T>(null);
-  const latest = useRef(build);
-  latest.current = build;
-  useLayoutEffect(() => {
-    if (ref.current) animate(ref.current, ...latest.current());
-  }, [token]);
-  return ref;
-}
+const GLYPH_POP: Layer[] = [
+  { scale: [0.5, 1], timing: SM.t.settle },
+  { opacity: [0, 1], timing: SM.t.enter },
+];
+const TEXT_FADE: Layer[] = [{ opacity: [0, 1], timing: SM.t.enter }];
+const COUNT_POP: Layer[] = [{ scale: [0.6, 1], timing: SM.t.settle }];
 
 function ToastItem({
   t,
@@ -101,6 +96,8 @@ function ToastItem({
   const ref = useRef<HTMLLIElement>(null);
   const settled = useRef(false);
   const swipeBack = useRef<Playback | null>(null);
+  const swipeX = useRef(0);
+  const restY = useRef(0);
   useToneGesture(t.tone, ref);
 
   useLayoutEffect(() => {
@@ -114,10 +111,11 @@ function ToastItem({
     el.style.pointerEvents = hidden ? 'none' : 'auto';
     const y = isTop ? offset : -offset;
     const scale = 1 - depth * 0.05;
+    restY.current = y;
     if (settled.current) {
       animate(
         el,
-        { y: [y], scale: [scale], height: [frameHeight ?? 'auto'], timing: SM.t.settle },
+        { x: [swipeX.current], y: [y], scale: [scale], height: [frameHeight ?? 'auto'], timing: SM.t.settle },
         { opacity: [hidden ? 0 : 1], timing: SM.t.enter },
       );
       return;
@@ -125,28 +123,36 @@ function ToastItem({
     settled.current = true;
     animate(
       el,
-      { y: [isTop ? -24 : 24, y], scale: [0.97, scale], timing: SM.t.settle },
+      { y: [isTop ? -SM.dist.lg : SM.dist.lg, y], scale: [SM.scale.floating, scale], timing: SM.t.settle },
       { opacity: [0, hidden ? 0 : 1], timing: SM.t.enter },
     );
   }, [offset, depth, hidden, frameHeight, isTop]);
 
   const onPointerDown = (e: ReactPointerEvent) => {
-    const inner = ref.current?.firstElementChild as HTMLElement | null;
-    if (!t.dismissible || e.button !== 0 || !inner) return;
+    const el = ref.current;
+    if (!t.dismissible || e.button !== 0 || !el) return;
     swipeBack.current?.stop();
+    swipeBack.current = null;
+    const place = (x: number) => {
+      swipeX.current = x;
+      animate(el, { x: [x], y: [restY.current], timing: { duration: 0 } });
+    };
+    place(swipeX.current);
     startDrag(e, {
       onMove: (info) => {
         const dx = info.offset.x;
-        inner.style.translate = `${dx > 0 ? dx * 0.9 : dx * 0.04}px 0px`;
+        place(dx > 0 ? dx * 0.9 : dx * 0.04);
       },
       onEnd: (info) => {
         if (info.offset.x > SWIPE_X || info.velocity.x > SWIPE_V) {
-          animate(inner, { x: [420], timing: SM.t.exit }).finished.then(() => store.dismiss(t.id));
+          swipeX.current = SWIPE_FLING_X;
+          animate(el, { x: [SWIPE_FLING_X], y: [restY.current], timing: SM.t.exit }).finished.then(() =>
+            store.dismiss(t.id),
+          );
           return;
         }
-        const back = animate(inner, { x: [0], timing: SM.t.settle });
-        swipeBack.current = back;
-        back.finished.then(() => back.stop());
+        swipeX.current = 0;
+        swipeBack.current = animate(el, { x: [0], y: [restY.current], timing: SM.t.settle });
       },
     });
   };
@@ -155,7 +161,7 @@ function ToastItem({
     <Motion
       as="li"
       ref={ref}
-      exit={{ opacity: [0], scale: [0.96], timing: SM.t.exit }}
+      exit={popOut(SM.scale.floating, SM.t.exit)}
       className="toast glass"
       data-tone={t.tone}
       data-behind={behind ? '' : undefined}
@@ -172,27 +178,18 @@ function ToastItem({
 }
 
 function ToastBody({ t }: { t: ToastRecord }) {
-  const glyphRef = useReplay<HTMLSpanElement>(t.tone, () => [
-    { scale: [0.5, 1], timing: SM.t.settle },
-    { opacity: [0, 1], timing: SM.t.enter },
-  ]);
-  const textRef = useReplay<HTMLDivElement>(String(t.message) + '-' + String(t.description), () => [
-    { opacity: [0, 1], timing: SM.t.enter },
-  ]);
-  const countRef = useReplay<HTMLSpanElement>(t.count, () => [{ scale: [0.6, 1], timing: SM.t.settle }]);
-
   return (
     <div className="toast__inner">
       {(t.tone !== 'default' || isFinite(t.duration)) && (
         <span className="toast__icon">
           {t.tone !== 'default' && (
-            <span ref={glyphRef} className="toast__icon-glyph">
+            <Motion as="span" className="toast__icon-glyph" animate={GLYPH_POP} deps={[t.tone]}>
               {t.tone === 'loading' ? (
                 <span className="toast__spinner" aria-hidden="true"></span>
               ) : (
                 <Icon name={TONE_ICON[t.tone] || 'info'} weight="fill" />
               )}
-            </span>
+            </Motion>
           )}
           {isFinite(t.duration) && (
             <svg key={'ring-' + t.timerKey} className="toast__ring" viewBox="0 0 36 36" aria-hidden="true">
@@ -209,14 +206,14 @@ function ToastBody({ t }: { t: ToastRecord }) {
           )}
         </span>
       )}
-      <div ref={textRef} className="toast__text">
+      <Motion className="toast__text" animate={TEXT_FADE} deps={[String(t.message) + '-' + String(t.description)]}>
         <p className="toast__message">{t.message}</p>
         {t.description != null && <p className="toast__desc">{t.description}</p>}
-      </div>
+      </Motion>
       {t.count > 1 && (
-        <span ref={countRef} className="toast__count">
+        <Motion as="span" className="toast__count" animate={COUNT_POP} deps={[t.count]}>
           ×{t.count}
-        </span>
+        </Motion>
       )}
       {t.action && (
         <Button

package/src/components/composites/toast/Toast.usage.md

@@ -0,0 +1,23 @@
+# Toast - @zyncat/ui/toast
+
+Group: overlays
+Docs: https://ui.zyncat.app/toast
+
+Imperative transient notifications: mount <Toaster /> once at the app root, then call toast() from anywhere.
+
+Without a mounted <Toaster />, toast() no-ops. <Toaster /> props: position ('bottom-right'
+default), duration, visibleToasts, gap, offset, expand. The callable surface: toast(msg) -
+toast.success/error/warning/info(msg, { description, action }) - toast.promise(p, { loading,
+success, error }) - toast.loading - toast.dismiss().
+
+```tsx
+import { toast, Toaster } from '@zyncat/ui/toast';
+
+// once at the root: <Toaster position="bottom-right" />
+toast.success('Changes saved', { description: 'Synced to the cloud' });
+toast.promise(save(), {
+  loading: 'Saving...',
+  success: (v) => `Saved - ${v.count}`,
+  error: (e) => `Failed - ${e.message}`,
+});
+```

package/src/components/composites/toast/toast-store.usage.md

@@ -0,0 +1,16 @@
+# toast-store - @zyncat/ui/toast-store
+
+Group: overlays
+Docs: https://ui.zyncat.app/toast
+
+The headless store behind Toast: subscribe to the toast queue and drive it without rendering <Toaster />.
+
+Reach for it only when building a custom toast surface; for notifications in an app, import
+toast() and <Toaster /> from @zyncat/ui/toast instead. Exposes the snapshot (toasts, paused,
+expanded), the store subscription, and the record shape each toast carries.
+
+```tsx
+import { toast } from '@zyncat/ui/toast-store';
+
+toast.success('Changes saved');
+```