@fayz-ai/pos 0.26.1 → 0.27.0

package/dist/index.js

@@ -4969,6 +4969,9 @@ function lateness(p, now) {
 var GHOST_MS = 300;
 var TOUCH_HOLD_MS = 280;
 var DRAG_SLOP_PX = 6;
+var MAX_TILT_DEG = 9;
+var TILT_PER_SPEED = 6;
+var SETTLE_MS = 260;
 function DeliveryBoard({ orders, activeId, onSelect, now, channelsConnected, historyOpen, onToggleHistory, loading, stepOf, onMove, onRefuse, waiting }) {
   const seen = useRef({});
   const [ghosts, setGhosts] = useState([]);
@@ -4993,6 +4996,39 @@ function DeliveryBoard({ orders, activeId, onSelect, now, channelsConnected, his
   const [drag, setDrag] = useState(null);
   const dragging = useRef(false);
   const swallowClick = useRef(false);
+  const ghostRef = useRef(null);
+  const anchor = useRef({ x0: 0, y0: 0, left: 0, top: 0 });
+  const motion = useRef({ x: 0, y: 0, lastX: 0, lastT: 0, vx: 0, tilt: 0, spin: 0, raf: 0 });
+  const [settling, setSettling] = useState(false);
+  const settleTimer = useRef(void 0);
+  const calm = () => typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+  const paint = (scale = 1.04) => {
+    const el = ghostRef.current;
+    if (!el) return;
+    const m = motion.current;
+    const a = anchor.current;
+    el.style.transform = `translate3d(${m.x - a.x0}px, ${m.y - a.y0}px, 0) rotate(${m.tilt.toFixed(2)}deg) scale(${scale})`;
+  };
+  const step = (t) => {
+    const m = motion.current;
+    const dt = Math.min(64, Math.max(1, t - (m.lastT || t - 16)));
+    m.vx += ((m.x - m.lastX) / dt - m.vx) * 0.3;
+    m.lastX = m.x;
+    m.lastT = t;
+    const lean = calm() ? 0 : Math.max(-MAX_TILT_DEG, Math.min(MAX_TILT_DEG, m.vx * TILT_PER_SPEED));
+    m.spin = (m.spin + (lean - m.tilt) * 0.16) * 0.78;
+    m.tilt += m.spin;
+    paint();
+    m.raf = requestAnimationFrame(step);
+  };
+  const stopMotion = () => {
+    if (motion.current.raf) cancelAnimationFrame(motion.current.raf);
+    motion.current.raf = 0;
+  };
+  useEffect(() => () => {
+    stopMotion();
+    window.clearTimeout(settleTimer.current);
+  }, []);
   useEffect(() => {
     if (!drag) return;
     const hold = (e) => {
@@ -5015,29 +5051,68 @@ function DeliveryBoard({ orders, activeId, onSelect, now, channelsConnected, his
       p.el.setPointerCapture(p.pointerId);
     } catch {
     }
+    window.clearTimeout(settleTimer.current);
+    setSettling(false);
+    anchor.current = { x0: p.x, y0: p.y, left: r.left, top: r.top };
+    motion.current = { x, y, lastX: x, lastT: 0, vx: 0, tilt: 0, spin: 0, raf: 0 };
     setDrag({ id: p.id, x0: p.x, y0: p.y, x, y, left: r.left, top: r.top, width: r.width, over: columnAt(x, y) });
+    stopMotion();
+    motion.current.raf = requestAnimationFrame(step);
   };
-  const release = () => {
+  const endGesture = () => {
     const p = press.current;
     if (p?.timer) window.clearTimeout(p.timer);
     press.current = null;
     dragging.current = false;
+  };
+  const release = () => {
+    endGesture();
+    stopMotion();
+    window.clearTimeout(settleTimer.current);
+    setSettling(false);
     setDrag(null);
   };
+  const settle = (to) => {
+    stopMotion();
+    const el = ghostRef.current;
+    if (!el || calm()) {
+      release();
+      return;
+    }
+    const a = anchor.current;
+    const dx = to ? to.left - a.left : 0;
+    const dy = to ? to.top - a.top : 0;
+    setSettling(true);
+    requestAnimationFrame(() => {
+      el.style.transform = `translate3d(${dx}px, ${dy}px, 0) rotate(0deg) scale(1)`;
+      if (to) el.style.opacity = "0";
+    });
+    window.clearTimeout(settleTimer.current);
+    settleTimer.current = window.setTimeout(release, SETTLE_MS);
+  };
+  const slotOf = (column) => {
+    const col = document.querySelector(`[data-col="${column.replace(/["\\]/g, "\\$&")}"]`);
+    if (!col) return null;
+    const r = col.getBoundingClientRect();
+    const head = col.firstElementChild;
+    const headH = head ? head.getBoundingClientRect().height : 0;
+    return { left: r.left + 8, top: r.top + headH + 8 };
+  };
   const drop = (o, target) => {
     const from = columnOfOrder(o);
-    if (!target || target === from) return;
-    const step = stepOf(o);
-    const stepColumn = step.next ? deliveryColumnOf(step.next)?.name : void 0;
-    if (step.next && stepColumn === target) {
+    if (!target || target === from) return false;
+    const next = stepOf(o);
+    const stepColumn = next.next ? deliveryColumnOf(next.next)?.name : void 0;
+    if (next.next && stepColumn === target) {
       haptic("tap");
-      onMove(o, step.next);
-      return;
+      onMove(o, next.next);
+      return true;
     }
     haptic("warn");
     const order = DELIVERY_COLUMNS.map((c) => c.name);
-    const text = step.held ? "Quem leva este pedido \xE9 o entregador do canal: Em rota e Entregue v\xEAm dele, n\xE3o da loja." : !step.next ? "Este pedido n\xE3o tem pr\xF3xima etapa." : order.indexOf(target) < order.indexOf(from ?? "") ? "O pedido s\xF3 anda para frente." : `Uma etapa por vez: a pr\xF3xima \xE9 \xAB${stepColumn}\xBB.`;
+    const text = next.held ? "Quem leva este pedido \xE9 o entregador do canal: Em rota e Entregue v\xEAm dele, n\xE3o da loja." : !next.next ? "Este pedido n\xE3o tem pr\xF3xima etapa." : order.indexOf(target) < order.indexOf(from ?? "") ? "O pedido s\xF3 anda para frente." : `Uma etapa por vez: a pr\xF3xima \xE9 \xAB${stepColumn}\xBB.`;
     onRefuse?.(text);
+    return false;
   };
   const dragHandlers = (o) => !canDrag ? {} : {
     onPointerDown: (e) => {
@@ -5066,16 +5141,24 @@ function DeliveryBoard({ orders, activeId, onSelect, now, channelsConnected, his
         if (travel < DRAG_SLOP_PX) return;
         begin(e.clientX, e.clientY);
       }
-      setDrag((d) => d && { ...d, x: e.clientX, y: e.clientY, over: columnAt(e.clientX, e.clientY) });
+      motion.current.x = e.clientX;
+      motion.current.y = e.clientY;
+      const over = columnAt(e.clientX, e.clientY);
+      setDrag((d) => d && d.over !== over ? { ...d, over } : d);
     },
     onPointerUp: (e) => {
       const p = press.current;
       if (!p || p.pointerId !== e.pointerId) return;
       const was = dragging.current;
-      release();
-      if (!was) return;
+      if (!was) {
+        release();
+        return;
+      }
+      endGesture();
       swallowClick.current = true;
-      drop(o, columnAt(e.clientX, e.clientY));
+      const target = columnAt(e.clientX, e.clientY);
+      const moved = drop(o, target);
+      settle(moved && target ? slotOf(target) : null);
     },
     onPointerCancel: () => {
       release();
@@ -5203,14 +5286,17 @@ function DeliveryBoard({ orders, activeId, onSelect, now, channelsConnected, his
       drag && dragged && /* @__PURE__ */ jsxs(
         "span",
         {
+          ref: ghostRef,
           className: "pos-card pos-card--drag",
+          "data-settling": settling || void 0,
           "aria-hidden": true,
           style: {
             position: "fixed",
             left: drag.left,
             top: drag.top,
             width: drag.width,
-            transform: `translate(${drag.x - drag.x0}px, ${drag.y - drag.y0}px)`
+            // Painted every frame by the motion loop; this is only the first frame.
+            transform: "translate3d(0, 0, 0) scale(1.04)"
           },
           children: [
             /* @__PURE__ */ jsxs("span", { className: "pos-card__top", children: [