@fayz-ai/pos 0.27.6 → 0.27.8

package/dist/index.js

@@ -1,7 +1,7 @@
 import { haptic, createKeymap, directionOf, moveFocus } from '@fayz-ai/core/interaction';
 export { comboOf, createKeymap, haptic, setHapticsEnabled } from '@fayz-ai/core/interaction';
-import { forwardRef, memo, useState, useRef, useCallback, useEffect, useMemo, useReducer, Fragment as Fragment$1 } from 'react';
-import { UserPlus, X, Check, Phone, User, Receipt, RotateCcw, FileCheck, FileWarning, ChevronDown, Pencil, ChevronLeft, ChevronRight, Plus, ChevronUp, ChefHat, AlertTriangle, Printer, Percent, QrCode, CreditCard, Banknote, Trash2, Clock, Minus, Bike, History, PackageCheck, CheckCheck, Package, Loader2, MapPin, ShieldCheck, Keyboard, CalendarClock, Users, UserRound, Search, Utensils, BellRing, UserX, UserCheck, Delete, UtensilsCrossed, Info, ClipboardList, LayoutGrid, ShoppingBag, ConciergeBell, Map as Map$1, Settings2, Square, Circle, PenLine, MoreHorizontal, Store, Tag, Star, Ticket, Ban, ArrowLeftRight, Gift, UserMinus, CheckCircle2, Crosshair, Unlink, MousePointerClick, PencilRuler, RefreshCw, MapPinOff, Eye, EyeOff, Undo2, TriangleAlert, ArrowRight, Pizza, Wheat, Sandwich, IceCreamCone, CakeSlice, Coffee, Croissant, CupSoda, Salad, Beef, Wine, GlassWater, Soup, Fish, Wrench, CalendarCheck } from 'lucide-react';
+import { forwardRef, memo, useRef, useState, useCallback, useLayoutEffect, useEffect, useMemo, useReducer, useDeferredValue, Fragment as Fragment$1 } from 'react';
+import { Minus, Plus, Search, Pizza, Wheat, Sandwich, IceCreamCone, CakeSlice, Coffee, Croissant, CupSoda, Salad, Beef, Utensils, Wine, GlassWater, Soup, Fish, UserPlus, X, Check, Phone, User, Receipt, RotateCcw, FileCheck, FileWarning, ChevronDown, Pencil, ChevronLeft, ChevronRight, ChevronUp, ChefHat, AlertTriangle, Printer, Percent, QrCode, CreditCard, Banknote, Trash2, Clock, Bike, History, PackageCheck, CheckCheck, Package, Loader2, MapPin, ShieldCheck, Keyboard, CalendarClock, Users, UserRound, BellRing, UserX, UserCheck, Delete, UtensilsCrossed, Info, ClipboardList, LayoutGrid, ShoppingBag, ConciergeBell, Map as Map$1, Settings2, Square, Circle, PenLine, MoreHorizontal, Store, Tag, Star, Ticket, Ban, ArrowLeftRight, Gift, UserMinus, CheckCircle2, Crosshair, Unlink, MousePointerClick, PencilRuler, RefreshCw, MapPinOff, Eye, EyeOff, Undo2, TriangleAlert, ArrowRight, Wrench, CalendarCheck } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { describeError, channelOfOrder } from '@fayz-ai/core';
 import { createPortal } from 'react-dom';
@@ -981,8 +981,15 @@ function asksInstallments(transactionType, accountKind, typeName) {
 }
 
 // src/screen/money.ts
+var formatters = /* @__PURE__ */ new Map();
 function formatCents(cents, currency = "BRL", locale = "pt-BR") {
-  return new Intl.NumberFormat(locale, { style: "currency", currency }).format(cents / 100);
+  const key = `${locale}|${currency}`;
+  let f = formatters.get(key);
+  if (!f) {
+    f = new Intl.NumberFormat(locale, { style: "currency", currency });
+    formatters.set(key, f);
+  }
+  return f.format(cents / 100);
 }
 function splitEvenly(totalCents, ways) {
   if (ways <= 0) throw new Error("splitEvenly: ways must be positive");
@@ -2770,6 +2777,39 @@ function categoryIcon(label) {
   for (const [palavra, Icone] of POR_PALAVRA) if (nome.includes(palavra)) return Icone;
   return Utensils;
 }
+
+// src/screen/catalogWindow.ts
+var CATALOG_OVERSCAN_PX = 480;
+var CATALOG_FIRST_PASS = 36;
+function visibleRows(sections, cols, stride, viewTop, viewBottom) {
+  const c = Math.max(1, cols);
+  return sections.map(({ top, count }) => {
+    const rows = Math.ceil(count / c);
+    if (rows === 0 || stride <= 0) return [0, rows];
+    const first = clamp(Math.floor((viewTop - top) / stride), 0, rows);
+    const end = clamp(Math.ceil((viewBottom - top) / stride), first, rows);
+    return [first, end];
+  });
+}
+function firstPassRows(counts, cols, budget = CATALOG_FIRST_PASS) {
+  const c = Math.max(1, cols);
+  let left = budget;
+  return counts.map((count) => {
+    const rows = Math.ceil(count / c);
+    const take = clamp(Math.ceil(left / c), 0, rows);
+    left -= take * c;
+    return [0, take];
+  });
+}
+function spacerHeight(rows, stride, gap) {
+  return rows > 0 ? rows * stride - gap : 0;
+}
+function sameRows(a, b) {
+  return a.length === b.length && a.every((r, i) => r[0] === b[i][0] && r[1] === b[i][1]);
+}
+function clamp(n, lo, hi) {
+  return Math.min(hi, Math.max(lo, n));
+}
 var STATUS = {
   free: { label: "Livre", Icon: CheckCircle2 },
   occupied: { label: "Ocupada", Icon: Utensils },
@@ -3180,7 +3220,8 @@ function seatOffsets(seats, w, h) {
   place(perSide, (i) => ({ x: w + 4, y: step(perSide, h, i) }));
   return out;
 }
-function CatalogView({
+var CatalogView = memo(CatalogViewImpl, (a, b) => !!a.hidden && !!b.hidden);
+function CatalogViewImpl({
   categories,
   items,
   activeCategoryId,
@@ -3192,7 +3233,8 @@ function CatalogView({
   query,
   menuLabel,
   onRefreshMenu,
-  menuRefreshing
+  menuRefreshing,
+  hidden
 }) {
   const searching = menuSearchActive(query);
   const shown = items.filter(
@@ -3205,155 +3247,251 @@ function CatalogView({
   }
   const orfaos = shown.filter((i) => !categories.some((c) => c.id === i.categoryId));
   if (orfaos.length > 0) secoes.push([void 0, orfaos]);
-  return /* @__PURE__ */ jsxs("div", { className: "pos-scroll", style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }, children: [
-    !searching && /* @__PURE__ */ jsx("div", { className: "pos-cats", children: categories.map((c, index) => /* @__PURE__ */ jsxs(
-      PosButton,
-      {
-        className: "pos-cat",
-        style: {
-          background: `var(--pos-tone-${c.tone})`,
-          ["--pos-stagger"]: `${Math.min(index, 11) * 20}ms`
-        },
-        "aria-pressed": c.id === activeCategoryId,
-        onClick: () => {
-          haptic("tap");
-          onCategoryChange(c.id);
-        },
-        children: [
-          /* @__PURE__ */ jsxs("span", { children: [
-            /* @__PURE__ */ jsx("span", { className: "pos-cat__name", children: c.label }),
-            c.itemCount != null && /* @__PURE__ */ jsxs("span", { className: "pos-cat__n pos-num", style: { display: "block" }, children: [
-              c.itemCount,
-              " itens"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "pos-cat__icon", children: c.icon ?? /* @__PURE__ */ jsx(CategoryIcon, { label: c.label }) })
-        ]
-      },
-      c.id
-    )) }),
-    !searching && /* @__PURE__ */ jsx("hr", { className: "pos-cats-rule" }),
-    onRefreshMenu && /* @__PURE__ */ jsxs("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      gap: "0.5rem",
-      padding: "0 0.75rem 0.375rem",
-      fontSize: 11,
-      opacity: 0.55
-    }, children: [
-      /* @__PURE__ */ jsx("span", { children: menuLabel }),
-      /* @__PURE__ */ jsx(
-        PosButton,
-        {
-          type: "button",
-          className: "fz-tap",
-          onClick: () => {
-            haptic("tap");
-            onRefreshMenu();
-          },
-          disabled: menuRefreshing,
-          style: {
-            background: "transparent",
-            border: 0,
-            padding: "0.125rem 0.25rem",
-            color: "inherit",
-            font: "inherit",
-            textDecoration: "underline",
-            cursor: menuRefreshing ? "default" : "pointer"
+  const scrollRef = useRef(null);
+  const gridRefs = useRef([]);
+  gridRefs.current.length = secoes.length;
+  const countsRef = useRef([]);
+  countsRef.current = secoes.map(([, itens]) => itens.length);
+  const [win, setWin] = useState({ kind: "first" });
+  const measure = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el || el.style.display === "none") return;
+    if (el.clientHeight === 0) {
+      setWin((w) => w.kind === "all" ? w : { kind: "all" });
+      return;
+    }
+    const grids = gridRefs.current;
+    const g0 = grids.find(Boolean);
+    if (!g0) return;
+    const cs = getComputedStyle(g0);
+    const cols2 = Math.max(1, cs.gridTemplateColumns.split(" ").filter(Boolean).length);
+    const gap2 = parseFloat(cs.rowGap) || 0;
+    const padTop = parseFloat(cs.paddingTop) || 0;
+    const card = el.querySelector(".pos-items > .pos-item");
+    const stride2 = (card?.offsetHeight || 128) + gap2;
+    const base = el.getBoundingClientRect().top - el.scrollTop;
+    const boxes = countsRef.current.map((count, i) => ({
+      top: (grids[i]?.getBoundingClientRect().top ?? 0) - base + padTop,
+      count
+    }));
+    const rows = visibleRows(
+      boxes,
+      cols2,
+      stride2,
+      el.scrollTop - CATALOG_OVERSCAN_PX,
+      el.scrollTop + el.clientHeight + CATALOG_OVERSCAN_PX
+    );
+    setWin((w) => w.kind === "rows" && w.cols === cols2 && w.stride === stride2 && w.gap === gap2 && sameRows(w.rows, rows) ? w : { kind: "rows", cols: cols2, stride: stride2, gap: gap2, rows });
+  }, []);
+  const shape = countsRef.current.join(",");
+  const wasHidden = useRef(hidden);
+  useLayoutEffect(() => {
+    if (wasHidden.current && !hidden && scrollRef.current) scrollRef.current.scrollTop = 0;
+    wasHidden.current = hidden;
+  }, [hidden]);
+  const geometry = win.kind === "rows" ? `${win.cols}|${win.stride}|${win.gap}` : win.kind;
+  useLayoutEffect(() => {
+    if (!hidden) measure();
+  }, [measure, hidden, shape, activeCategoryId, query, geometry]);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    let frame = 0;
+    const onScroll = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        measure();
+      });
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    const ro = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(onScroll);
+    ro?.observe(el);
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+      ro?.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, [measure]);
+  const dealRef = useRef({ key: "", at: 0 });
+  const dealKey = `${hidden ? 1 : 0}|${activeCategoryId ?? ""}|${query}`;
+  if (dealRef.current.key !== dealKey) dealRef.current = { key: dealKey, at: Date.now() };
+  const late = win.kind === "rows" && Date.now() - dealRef.current.at > 400;
+  const ranges = win.kind === "rows" ? win.rows.length === secoes.length ? win.rows : firstPassRows(countsRef.current, win.cols) : win.kind === "first" ? firstPassRows(countsRef.current, 4) : void 0;
+  const cols = win.kind === "rows" ? win.cols : 4;
+  const stride = win.kind === "rows" ? win.stride : 128 + 12;
+  const gap = win.kind === "rows" ? win.gap : 12;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: scrollRef,
+      className: "pos-scroll",
+      style: { flex: 1, minHeight: 0, display: hidden ? "none" : "flex", flexDirection: "column" },
+      children: [
+        !searching && /* @__PURE__ */ jsx("div", { className: "pos-cats", children: categories.map((c, index) => /* @__PURE__ */ jsxs(
+          PosButton,
+          {
+            className: "pos-cat",
+            style: {
+              background: `var(--pos-tone-${c.tone})`,
+              ["--pos-stagger"]: `${Math.min(index, 11) * 20}ms`
+            },
+            "aria-pressed": c.id === activeCategoryId,
+            onClick: () => {
+              haptic("tap");
+              onCategoryChange(c.id);
+            },
+            children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsx("span", { className: "pos-cat__name", children: c.label }),
+                c.itemCount != null && /* @__PURE__ */ jsxs("span", { className: "pos-cat__n pos-num", style: { display: "block" }, children: [
+                  c.itemCount,
+                  " itens"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "pos-cat__icon", children: c.icon ?? /* @__PURE__ */ jsx(CategoryIcon, { label: c.label }) })
+            ]
           },
-          children: "Atualizar"
-        }
-      )
-    ] }),
-    shown.length === 0 ? (
-      /* A FRASE SEGUE A CAUSA. Sem busca, `query` é vazio e o título saía
-         «Nada encontrado para “”» — aspas vazias sobre uma busca que
-         ninguém fez. Ver `catalogEmpty.ts`. */
-      (() => {
-        const v = catalogEmpty(query);
-        return /* @__PURE__ */ jsx(EmptyState, { title: v.title, hint: v.hint });
-      })()
-    ) : (
-      /* UMA SEÇÃO POR CATEGORIA, com o nome acima da grade — é assim que o
-                 V1 desenha o cardápio, e a razão aparece com "Todas": dezenove
-                 categorias numa grade plana são duzentos e cinquenta cartões sem
-                 nenhuma divisa, e achar "Coca Cola" vira rolagem cega.
-      
-                 A ORDEM É A DO CARDÁPIO, não a alfabética — o V1 é explícito: é o
-                 `menu_order` das categorias, a mesma ordem das fichas coloridas do
-                 topo. Ordenar por nome faria a faixa de cima e a lista de baixo
-                 discordarem, e é a faixa que o operador usa para se orientar.
-      
-                 Com uma categoria escolhida sobra uma seção só, e o rótulo continua
-                 pagando o espaço: ele confirma onde se está depois de rolar. */
-      secoes.map(([cat, itens]) => /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "pos-sect", children: cat?.label ?? "Sem categoria" }),
-        /* @__PURE__ */ jsx("div", { className: "pos-items", children: itens.map((item, index) => {
-          const quantity = quantities[item.id] ?? 0;
-          const category = categories.find((c) => c.id === item.categoryId);
-          const filled = quantity > 0;
-          return /* @__PURE__ */ jsxs(
-            ItemCard,
+          c.id
+        )) }),
+        !searching && /* @__PURE__ */ jsx("hr", { className: "pos-cats-rule" }),
+        onRefreshMenu && /* @__PURE__ */ jsxs("div", { style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          gap: "0.5rem",
+          padding: "0 0.75rem 0.375rem",
+          fontSize: 11,
+          opacity: 0.55
+        }, children: [
+          /* @__PURE__ */ jsx("span", { children: menuLabel }),
+          /* @__PURE__ */ jsx(
+            PosButton,
             {
-              quantity,
-              filled,
-              onQuickAdd: () => {
+              type: "button",
+              className: "fz-tap",
+              onClick: () => {
                 haptic("tap");
-                onAdd(item);
+                onRefreshMenu();
               },
-              label: item.name,
-              delayMs: Math.min(index, 11) * 24,
-              tone: category?.tone,
-              children: [
-                /* @__PURE__ */ jsxs("span", { className: "pos-item__top", children: [
-                  item.imageUrl ? /* @__PURE__ */ jsx("span", { className: "pos-item__img", children: /* @__PURE__ */ jsx("img", { src: item.imageUrl, alt: "", loading: "lazy", decoding: "async" }) }) : null,
-                  /* @__PURE__ */ jsxs("span", { className: "pos-item__id", children: [
-                    item.route && /* @__PURE__ */ jsx("span", { className: "pos-item__route", children: item.route }),
-                    /* @__PURE__ */ jsx("span", { className: "pos-item__name", children: item.name }),
-                    /* @__PURE__ */ jsxs("span", { className: "pos-item__price pos-num", children: [
-                      formatCents(item.priceCents),
-                      item.code && ` \xB7 ${item.code}`
-                    ] })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx("span", { className: "pos-item__foot", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs("span", { className: "pos-step", children: [
-                  /* @__PURE__ */ jsx(
-                    PosButton,
-                    {
-                      className: "pos-step__b",
-                      onClick: () => {
-                        haptic("tap");
-                        onRemove(item);
-                      },
-                      disabled: (pending?.[item.id] ?? 0) === 0,
-                      title: quantity > 0 && (pending?.[item.id] ?? 0) === 0 ? "J\xE1 foi para a cozinha \u2014 use Cancelamento" : void 0,
-                      "aria-label": `Tirar um ${item.name}`,
-                      children: /* @__PURE__ */ jsx(Minus, { size: 16, strokeWidth: 2.6, "aria-hidden": true })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { className: "pos-step__n", "data-zero": quantity === 0 ? "" : void 0, children: quantity }),
-                  /* @__PURE__ */ jsx(
-                    PosButton,
+              disabled: menuRefreshing,
+              style: {
+                background: "transparent",
+                border: 0,
+                padding: "0.125rem 0.25rem",
+                color: "inherit",
+                font: "inherit",
+                textDecoration: "underline",
+                cursor: menuRefreshing ? "default" : "pointer"
+              },
+              children: "Atualizar"
+            }
+          )
+        ] }),
+        shown.length === 0 ? (
+          /* A FRASE SEGUE A CAUSA. Sem busca, `query` é vazio e o título saía
+             «Nada encontrado para “”» — aspas vazias sobre uma busca que
+             ninguém fez. Ver `catalogEmpty.ts`. */
+          (() => {
+            const v = catalogEmpty(query);
+            return /* @__PURE__ */ jsx(EmptyState, { title: v.title, hint: v.hint });
+          })()
+        ) : (
+          /* UMA SEÇÃO POR CATEGORIA, com o nome acima da grade — é assim que o
+                     V1 desenha o cardápio, e a razão aparece com "Todas": dezenove
+                     categorias numa grade plana são duzentos e cinquenta cartões sem
+                     nenhuma divisa, e achar "Coca Cola" vira rolagem cega.
+          
+                     A ORDEM É A DO CARDÁPIO, não a alfabética — o V1 é explícito: é o
+                     `menu_order` das categorias, a mesma ordem das fichas coloridas do
+                     topo. Ordenar por nome faria a faixa de cima e a lista de baixo
+                     discordarem, e é a faixa que o operador usa para se orientar.
+          
+                     Com uma categoria escolhida sobra uma seção só, e o rótulo continua
+                     pagando o espaço: ele confirma onde se está depois de rolar. */
+          secoes.map(([cat, itens], sectionIndex) => {
+            const rows = Math.ceil(itens.length / cols);
+            const [first, end] = ranges?.[sectionIndex] ?? [0, rows];
+            const windowed = ranges ? itens.slice(first * cols, end * cols) : itens;
+            const before = ranges ? first : 0;
+            const after = ranges ? rows - Math.max(end, first) : 0;
+            return /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "pos-sect", children: cat?.label ?? "Sem categoria" }),
+              /* @__PURE__ */ jsxs("div", { className: "pos-items", ref: (n) => {
+                gridRefs.current[sectionIndex] = n;
+              }, children: [
+                windowed.length === 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "pos-items__gap", style: { height: spacerHeight(rows, stride, gap) } }) : before > 0 && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "pos-items__gap", style: { height: spacerHeight(before, stride, gap) } }),
+                windowed.map((item, index) => {
+                  const quantity = quantities[item.id] ?? 0;
+                  const category = categories.find((c) => c.id === item.categoryId);
+                  const filled = quantity > 0;
+                  return /* @__PURE__ */ jsxs(
+                    ItemCard,
                     {
-                      className: "pos-step__b",
-                      onClick: () => {
+                      quantity,
+                      filled,
+                      onQuickAdd: () => {
                         haptic("tap");
                         onAdd(item);
                       },
-                      "aria-label": `Mais um ${item.name}`,
-                      children: /* @__PURE__ */ jsx(Plus, { size: 16, strokeWidth: 2.6, "aria-hidden": true })
-                    }
-                  )
-                ] }) })
-              ]
-            },
-            item.id
-          );
-        }) })
-      ] }, cat?.id ?? "__sem"))
-    )
-  ] });
+                      label: item.name,
+                      delayMs: Math.min(index, 11) * 24,
+                      late,
+                      tone: category?.tone,
+                      children: [
+                        /* @__PURE__ */ jsxs("span", { className: "pos-item__top", children: [
+                          item.imageUrl ? /* @__PURE__ */ jsx("span", { className: "pos-item__img", children: /* @__PURE__ */ jsx("img", { src: item.imageUrl, alt: "", loading: "lazy", decoding: "async" }) }) : null,
+                          /* @__PURE__ */ jsxs("span", { className: "pos-item__id", children: [
+                            item.route && /* @__PURE__ */ jsx("span", { className: "pos-item__route", children: item.route }),
+                            /* @__PURE__ */ jsx("span", { className: "pos-item__name", children: item.name }),
+                            /* @__PURE__ */ jsxs("span", { className: "pos-item__price pos-num", children: [
+                              formatCents(item.priceCents),
+                              item.code && ` \xB7 ${item.code}`
+                            ] })
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsx("span", { className: "pos-item__foot", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs("span", { className: "pos-step", children: [
+                          /* @__PURE__ */ jsx(
+                            PosButton,
+                            {
+                              className: "pos-step__b",
+                              onClick: () => {
+                                haptic("tap");
+                                onRemove(item);
+                              },
+                              disabled: (pending?.[item.id] ?? 0) === 0,
+                              title: quantity > 0 && (pending?.[item.id] ?? 0) === 0 ? "J\xE1 foi para a cozinha \u2014 use Cancelamento" : void 0,
+                              "aria-label": `Tirar um ${item.name}`,
+                              children: /* @__PURE__ */ jsx(Minus, { size: 16, strokeWidth: 2.6, "aria-hidden": true })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("span", { className: "pos-step__n", "data-zero": quantity === 0 ? "" : void 0, children: quantity }),
+                          /* @__PURE__ */ jsx(
+                            PosButton,
+                            {
+                              className: "pos-step__b",
+                              onClick: () => {
+                                haptic("tap");
+                                onAdd(item);
+                              },
+                              "aria-label": `Mais um ${item.name}`,
+                              children: /* @__PURE__ */ jsx(Plus, { size: 16, strokeWidth: 2.6, "aria-hidden": true })
+                            }
+                          )
+                        ] }) })
+                      ]
+                    },
+                    item.id
+                  );
+                }),
+                windowed.length > 0 && after > 0 && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "pos-items__gap", style: { height: spacerHeight(after, stride, gap) } })
+              ] })
+            ] }, cat?.id ?? "__sem");
+          })
+        )
+      ]
+    }
+  );
 }
 function ShiftView({ positions, staff }) {
   const open = positions.filter((p) => p.status !== "free");
@@ -3378,7 +3516,7 @@ function Stat({ label, value }) {
     /* @__PURE__ */ jsx("div", { className: "pos-t-display pos-num", children: value })
   ] });
 }
-function ItemCard({ quantity, filled, delayMs, tone, onQuickAdd, label, children }) {
+function ItemCard({ quantity, filled, delayMs, late, tone, onQuickAdd, label, children }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3387,6 +3525,7 @@ function ItemCard({ quantity, filled, delayMs, tone, onQuickAdd, label, children
       tabIndex: 0,
       "aria-label": `${label}, adicionar \xE0 comanda`,
       "data-filled": filled,
+      "data-late": late || void 0,
       onClick: onQuickAdd,
       onKeyDown: (e) => {
         if (e.key === "Enter" || e.key === " ") {
@@ -8760,6 +8899,10 @@ function PosScreen({
   const positionsDoSalao = query.trim() && !plantaNaTela ? positionsDoFiltro.filter((p) => tableMatches({ label: p.label, name: p.customerName }, query)) : positionsDoFiltro;
   const wideRail = useWideRail();
   const headHasContent = menu?.view === "floor" || !wideRail;
+  const onCatalog = menu?.view === "catalog";
+  const catalogShown = useDeferredValue(onCatalog);
+  const [catalogKept, setCatalogKept] = useState(false);
+  if (catalogShown && !catalogKept) setCatalogKept(true);
   const visibleMenus = config.menus.filter((m) => !m.hidden);
   const phoneOrder = [...visibleMenus].sort((a, b) => {
     const peso = (m) => m.id === "delivery" ? 1 : m.id === "retirada" ? 2 : 0;
@@ -9095,10 +9238,11 @@ function PosScreen({
                 onToggleTableInZone: pracaNaFicha && onTogglaMesaNaPraca ? (tableId, how) => onTogglaMesaNaPraca(pracaNaFicha, tableId, how) : void 0
               }
             ),
-            menu?.view === "catalog" && loading && /* @__PURE__ */ jsx(CatalogSkeleton, {}),
-            menu?.view === "catalog" && !loading && /* @__PURE__ */ jsx(
+            onCatalog && (loading || !catalogShown) && /* @__PURE__ */ jsx(CatalogSkeleton, {}),
+            !loading && catalogKept && /* @__PURE__ */ jsx(
               CatalogView,
               {
+                hidden: !(onCatalog && catalogShown),
                 categories,
                 items,
                 activeCategoryId,
@@ -9690,12 +9834,26 @@ function Dock({ positions, activeId, onSelect, now, onDiscard, paidByPosition })
   useEffect(() => {
     const el = activeRef.current;
     if (!el) return;
-    const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    el.scrollIntoView?.({
-      behavior: still ? "auto" : "smooth",
-      block: "nearest",
-      inline: "nearest"
+    const go = () => {
+      const still = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      el.scrollIntoView?.({
+        behavior: still ? "auto" : "smooth",
+        block: "nearest",
+        inline: "nearest"
+      });
+    };
+    if (document.visibilityState !== "visible") {
+      go();
+      return;
+    }
+    let timer = 0;
+    const frame = requestAnimationFrame(() => {
+      timer = window.setTimeout(go, 0);
     });
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(timer);
+    };
   }, [activeId]);
   if (positions.length === 0) return null;
   const rotulo = `${positions.length} comanda${positions.length === 1 ? "" : "s"} aberta${positions.length === 1 ? "" : "s"}`;
@@ -9874,7 +10032,7 @@ function DiscountSheet({
   const [raw, setRaw] = useState("");
   const [reasonId, setReasonId] = useState("");
   const [authorizerId, setAuthorizerId] = useState("");
-  const [memo2, setMemo] = useState("");
+  const [memo3, setMemo] = useState("");
   const comAbatimento = useMemo(
     () => ticket.lines.filter((l) => (l.discountCents ?? 0) > 0),
     [ticket.lines]
@@ -9888,7 +10046,7 @@ function DiscountSheet({
   const reason = reasons.find((r) => r.id === reasonId);
   const authorizer = authorizers.find((a) => a.id === authorizerId);
   const percentEquivalente = base > 0 ? cents / base * 100 : 0;
-  const impedimento = picked.size === 0 ? "Escolha ao menos um item." : value <= 0 ? "Informe o desconto." : mode === "percent" && value > 100 ? "Percentual n\xE3o pode ser maior que 100%." : cents > base ? "O desconto \xE9 maior que o valor dos itens escolhidos." : !authorizerId ? "Selecione o usu\xE1rio autorizador." : !reasonId && !memo2.trim() ? "Selecione um motivo ou informe no memorando." : capRefusal(percentEquivalente, {
+  const impedimento = picked.size === 0 ? "Escolha ao menos um item." : value <= 0 ? "Informe o desconto." : mode === "percent" && value > 100 ? "Percentual n\xE3o pode ser maior que 100%." : cents > base ? "O desconto \xE9 maior que o valor dos itens escolhidos." : !authorizerId ? "Selecione o usu\xE1rio autorizador." : !reasonId && !memo3.trim() ? "Selecione um motivo ou informe no memorando." : capRefusal(percentEquivalente, {
     reasonMax: reason?.maxPercent,
     authorizerMax: authorizer?.maxPercent,
     authorizerName: authorizer?.name
@@ -10074,7 +10232,7 @@ function DiscountSheet({
           "textarea",
           {
             className: "pos-dsc__memo",
-            value: memo2,
+            value: memo3,
             onChange: (e) => setMemo(e.target.value),
             placeholder: "Memorando",
             rows: 2,
@@ -10096,7 +10254,7 @@ function DiscountSheet({
             value,
             authorizerId: authorizerId || void 0,
             reasonId: reasonId || void 0,
-            memo: memo2.trim() || void 0
+            memo: memo3.trim() || void 0
           }),
           children: [
             /* @__PURE__ */ jsx(Tag, { size: 17, strokeWidth: 2.2, "aria-hidden": true }),
@@ -10566,7 +10724,7 @@ function CancelSheet({ ticket, party = [], reasons, error, onCancel, onConfirm }
   const [qty, setQty] = useState({});
   const [tudo, setTudo] = useState(false);
   const [reasonId, setReasonId] = useState("");
-  const [memo2, setMemo] = useState("");
+  const [memo3, setMemo] = useState("");
   const escolhidas = tudo ? enviados.map((l) => ({ lineId: l.id, quantity: l.quantity })) : enviados.map((l) => ({ lineId: l.id, quantity: qty[l.id] ?? 0 })).filter((x) => x.quantity > 0);
   const totalCents = escolhidas.reduce((sum, x) => {
     const linha = enviados.find((l) => l.id === x.lineId);
@@ -10577,7 +10735,7 @@ function CancelSheet({ ticket, party = [], reasons, error, onCancel, onConfirm }
     [enviados, party]
   );
   const temGente = grupos.length > 1 || grupos.length === 1 && grupos[0].guestId !== null;
-  const impedimento = enviados.length === 0 ? "Nenhum item enviado para cancelar." : escolhidas.length === 0 ? "Escolha quantas unidades cancelar." : !reasonId && !memo2.trim() ? "Selecione um motivo ou informe no memorando." : void 0;
+  const impedimento = enviados.length === 0 ? "Nenhum item enviado para cancelar." : escolhidas.length === 0 ? "Escolha quantas unidades cancelar." : !reasonId && !memo3.trim() ? "Selecione um motivo ou informe no memorando." : void 0;
   const linhaDoItem = (l) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "pos-svc__guest", children: [
     /* @__PURE__ */ jsxs("span", { className: "pos-dsc__name", children: [
       /* @__PURE__ */ jsxs("span", { className: "pos-dsc__n", children: [
@@ -10654,7 +10812,7 @@ function CancelSheet({ ticket, party = [], reasons, error, onCancel, onConfirm }
           "textarea",
           {
             className: "pos-dsc__memo",
-            value: memo2,
+            value: memo3,
             onChange: (e) => setMemo(e.target.value),
             placeholder: "Memorando",
             rows: 2,
@@ -10680,7 +10838,7 @@ function CancelSheet({ ticket, party = [], reasons, error, onCancel, onConfirm }
           onClick: () => onConfirm({
             quantities: escolhidas,
             reasonId: reasonId || void 0,
-            memo: memo2.trim() || void 0
+            memo: memo3.trim() || void 0
           }),
           children: "Cancelar itens"
         }