@fayz-ai/pos 0.20.0 → 0.20.1

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 { useState, useRef, useCallback, useEffect, useMemo, useReducer } from 'react';
-import { Pencil, Receipt, AlertTriangle, ChefHat, ChevronLeft, QrCode, CreditCard, Banknote, Trash2, Minus, Plus, Bike, Package, CheckCheck, Clock, MapPin, ShieldCheck, Keyboard, X, CalendarClock, Users, Phone, Check, UserRound, User, Delete, UtensilsCrossed, Info, Search, LayoutGrid, ClipboardList, Utensils, CheckCircle2, CookingPot, CircleDashed } from 'lucide-react';
+import { ChevronDown, Pencil, Receipt, ChefHat, AlertTriangle, ChevronLeft, QrCode, CreditCard, Banknote, Trash2, Minus, Plus, Bike, Package, CheckCheck, Clock, MapPin, ShieldCheck, Keyboard, X, CalendarClock, Users, Phone, Check, UserRound, User, Delete, UtensilsCrossed, Info, LayoutGrid, ClipboardList, ChevronUp, MoreHorizontal, Search, Utensils, CheckCircle2, CookingPot } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/keyboard/index.ts
@@ -232,6 +232,28 @@ function elapsed(openedAt, now = Date.now()) {
   if (minutes < 0 || !Number.isFinite(minutes)) return void 0;
   return minutes < 60 ? `${minutes}min` : `${Math.floor(minutes / 60)}h${String(minutes % 60).padStart(2, "0")}`;
 }
+function FloorSkeleton({ count = 8 }) {
+  return /* @__PURE__ */ jsx("div", { className: "pos-floor pos-scroll", "aria-busy": "true", "aria-label": "Carregando as mesas", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxs("div", { className: "pos-tbl pos-skel", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("span", { className: "pos-skel__b", style: { width: "46%", height: 21 } }),
+    /* @__PURE__ */ jsx("span", { className: "pos-skel__b", style: { width: "58%", height: 22 } }),
+    /* @__PURE__ */ jsx("span", { className: "pos-skel__b", style: { width: "34%", height: 12, marginTop: "auto" } })
+  ] }, i)) });
+}
+function CatalogSkeleton({ categories = 6, items = 6 }) {
+  return /* @__PURE__ */ jsxs("div", { className: "pos-scroll", style: { flex: 1, minHeight: 0 }, "aria-busy": "true", "aria-label": "Carregando o card\xE1pio", children: [
+    /* @__PURE__ */ jsx("div", { className: "pos-cats", children: Array.from({ length: categories }, (_, i) => /* @__PURE__ */ jsx("div", { className: "pos-cat pos-skel", "aria-hidden": true, children: /* @__PURE__ */ jsx("span", { className: "pos-skel__b", style: { width: "70%", height: 13 } }) }, i)) }),
+    /* @__PURE__ */ jsx("div", { className: "pos-items", children: Array.from({ length: items }, (_, i) => /* @__PURE__ */ jsxs("div", { className: "pos-item pos-skel", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsxs("span", { className: "pos-item__top", children: [
+        /* @__PURE__ */ jsx("span", { className: "pos-skel__b", style: { width: 52, height: 52, flex: "none" } }),
+        /* @__PURE__ */ jsxs("span", { className: "pos-item__id", children: [
+          /* @__PURE__ */ jsx("span", { className: "pos-skel__b", style: { width: "80%", height: 14 } }),
+          /* @__PURE__ */ jsx("span", { className: "pos-skel__b", style: { width: "45%", height: 12 } })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "pos-skel__b", style: { width: "100%", height: 34, marginTop: "auto" } })
+    ] }, i)) })
+  ] });
+}
 function EmptyState({ title, hint, Icon = Search, action }) {
   return /* @__PURE__ */ jsxs("div", { className: "pos-empty", children: [
     /* @__PURE__ */ jsx("span", { className: "pos-empty__icon", children: /* @__PURE__ */ jsx(Icon, { size: 20, strokeWidth: 2, "aria-hidden": true }) }),
@@ -243,11 +265,11 @@ function EmptyState({ title, hint, Icon = Search, action }) {
     }, children: action.label })
   ] });
 }
-function FloorView({ positions, config, activeId, onSelect, now, picking }) {
+function FloorView({ positions, config, activeId, onSelect, now, picking, layout }) {
   if (positions.length === 0) {
     return /* @__PURE__ */ jsx(EmptyState, { title: "Nenhuma mesa nesta \xE1rea", hint: "Escolha outra \xE1rea acima.", Icon: Utensils });
   }
-  return config.layout === "plan" ? /* @__PURE__ */ jsx(PlanFloor, { positions, config, activeId, onSelect, picking }) : /* @__PURE__ */ jsx(GridFloor, { positions, activeId, onSelect, now, picking });
+  return layout === "plan" ? /* @__PURE__ */ jsx(PlanFloor, { positions, config, activeId, onSelect, picking }) : /* @__PURE__ */ jsx(GridFloor, { positions, activeId, onSelect, now, picking });
 }
 function GridFloor({ positions, activeId, onSelect, now, picking }) {
   return /* @__PURE__ */ jsx("div", { className: "pos-floor pos-scroll", "data-picking": picking, children: positions.map((p, index) => {
@@ -449,11 +471,16 @@ function CatalogView({
           delayMs: Math.min(index, 11) * 24,
           tone: category?.tone,
           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__ */ 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(
@@ -546,7 +573,36 @@ var PAY_ICON = {
   "cart\xE3o": CreditCard,
   pix: QrCode
 };
+function useSheetDrag(onDismiss) {
+  const [offset, setOffset] = useState(0);
+  const [dragging, setDragging] = useState(false);
+  const startRef = useRef(0);
+  if (!onDismiss) return { offset: 0, dragging: false, handlers: {} };
+  return {
+    offset,
+    dragging,
+    handlers: {
+      onPointerDown: (e) => {
+        startRef.current = e.clientY;
+        setDragging(true);
+        e.currentTarget.setPointerCapture(e.pointerId);
+      },
+      onPointerMove: (e) => {
+        if (!dragging) return;
+        setOffset(Math.max(0, e.clientY - startRef.current));
+      },
+      onPointerUp: (e) => {
+        setDragging(false);
+        const el = e.currentTarget.closest(".pos-aside");
+        const height = el?.getBoundingClientRect().height ?? window.innerHeight;
+        if (offset > height / 3) onDismiss();
+        setOffset(0);
+      }
+    }
+  };
+}
 function TicketRail({
+  onCollapse,
   ticket,
   totals,
   vocabulary,
@@ -573,6 +629,7 @@ function TicketRail({
   onFire,
   fireShortcut
 }) {
+  const drag = useSheetDrag(onCollapse);
   const [tab, setTab] = useState("order");
   const [paid, setPaid] = useState(false);
   const [stage, setStage] = useState("order");
@@ -588,12 +645,40 @@ function TicketRail({
       className: "pos-aside",
       ref: containerRef,
       "data-open": open ?? true,
+      "data-dragging": drag.dragging || void 0,
+      style: drag.offset ? { transform: `translateY(${drag.offset}px)` } : void 0,
       "aria-label": vocabulary.ticket,
       children: [
+        onCollapse && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pos-aside__grab",
+            role: "button",
+            tabIndex: 0,
+            "aria-label": "Arraste para baixo para minimizar a comanda",
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onCollapse();
+              }
+            },
+            ...drag.handlers
+          }
+        ),
         /* @__PURE__ */ jsxs("header", { className: "pos-tkt", children: [
           /* @__PURE__ */ jsxs("div", { className: "pos-tkt__row", children: [
             /* @__PURE__ */ jsx("span", { className: "pos-t-xl", children: ticket.positionLabel ?? "Balc\xE3o" }),
             status && /* @__PURE__ */ jsx(StatusBadge, { status }),
+            onCollapse && /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "pos-tkt__collapse",
+                onClick: onCollapse,
+                "aria-label": "Fechar a comanda",
+                title: "Fechar a comanda",
+                children: /* @__PURE__ */ jsx(ChevronDown, { size: 18, strokeWidth: 2.4 })
+              }
+            ),
             onEditIdentity && /* @__PURE__ */ jsx(
               "button",
               {
@@ -705,10 +790,6 @@ function TicketRail({
              and offering it as the big button is how a bill gets paid for food
              the kitchen never heard about. */
           /* @__PURE__ */ jsx("div", { className: "pos-cta pos-cta--stack", children: pendingCount > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs("p", { className: "pos-hint", children: [
-              /* @__PURE__ */ jsx(AlertTriangle, { size: 14, strokeWidth: 2.4, "aria-hidden": true }),
-              pendingCount === 1 ? "1 item marcado ainda n\xE3o foi para a cozinha" : `${pendingCount} itens marcados ainda n\xE3o foram para a cozinha`
-            ] }),
             /* @__PURE__ */ jsxs(
               "button",
               {
@@ -728,11 +809,17 @@ function TicketRail({
             /* @__PURE__ */ jsxs(
               "button",
               {
-                className: "pos-btn pos-btn--ghost pos-btn--wide",
+                className: "pos-btn pos-btn--ghost pos-btn--wide pos-btn--warn",
                 onClick: () => setStage("checkout"),
                 children: [
-                  "Fechar mesmo assim \xB7 ",
-                  formatCents(totals.totalCents)
+                  /* @__PURE__ */ jsxs("span", { className: "pos-btn__l1", children: [
+                    "Fechar mesmo assim \xB7 ",
+                    formatCents(totals.totalCents)
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { className: "pos-btn__l2", children: [
+                    /* @__PURE__ */ jsx(AlertTriangle, { size: 12, strokeWidth: 2.4, "aria-hidden": true }),
+                    pendingCount === 1 ? "1 item n\xE3o foi para a cozinha" : `${pendingCount} itens n\xE3o foram para a cozinha`
+                  ] })
                 ]
               }
             )
@@ -896,7 +983,7 @@ var STATE_LABEL = {
 function StateIcon({ state }) {
   if (state === "fired") return /* @__PURE__ */ jsx(CookingPot, { size: 15, strokeWidth: 2.2, "aria-hidden": true });
   if (state === "delivered") return /* @__PURE__ */ jsx(UtensilsCrossed, { size: 15, strokeWidth: 2.2, "aria-hidden": true });
-  return /* @__PURE__ */ jsx(CircleDashed, { size: 15, strokeWidth: 2.2, "aria-hidden": true });
+  return null;
 }
 function clock(iso) {
   return new Date(iso).toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
@@ -1512,13 +1599,14 @@ function OpenTableSheet({
   position,
   vocabulary,
   staff,
+  operator,
   defaultSeats,
   seatingName,
   onCancel,
   onConfirm
 }) {
   const [guests, setGuests] = useState(defaultSeats ?? position.seats ?? 2);
-  const [attendantId, setAttendantId] = useState(staff[0]?.id);
+  const [attendantId, setAttendantId] = useState(operator?.id ?? staff[0]?.id);
   useEffect(() => {
     function onKey(event) {
       if (event.key === "Escape") {
@@ -1595,7 +1683,11 @@ function OpenTableSheet({
           guests,
           " pessoas."
         ] }),
-        staff.length > 0 && /* @__PURE__ */ jsxs("section", { className: "pos-mgroup", children: [
+        operator && /* @__PURE__ */ jsxs("p", { className: "pos-sheet__who", children: [
+          "Abrindo no nome de ",
+          /* @__PURE__ */ jsx("strong", { children: operator.name })
+        ] }),
+        !operator && staff.length > 0 && /* @__PURE__ */ jsxs("section", { className: "pos-mgroup", children: [
           /* @__PURE__ */ jsx("div", { className: "pos-mgroup__head", children: /* @__PURE__ */ jsx("span", { className: "pos-t-xs", children: "Atendente" }) }),
           /* @__PURE__ */ jsx("div", { className: "pos-mgroup__opts", children: staff.map((s) => /* @__PURE__ */ jsxs(
             "button",
@@ -1934,6 +2026,26 @@ var MENU_ICON = {
   shift: Banknote,
   reservations: CalendarClock
 };
+function useMedia(query) {
+  const [matches, setMatches] = useState(
+    () => typeof window !== "undefined" && window.matchMedia(query).matches
+  );
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia(query);
+    const on = () => setMatches(mq.matches);
+    setMatches(mq.matches);
+    mq.addEventListener("change", on);
+    return () => mq.removeEventListener("change", on);
+  }, [query]);
+  return matches;
+}
+function usePhone() {
+  return useMedia("(max-width: 640px)");
+}
+function useWideRail() {
+  return useMedia("(min-width: 1181px)");
+}
 var lineSeq = 0;
 var nextLineId = () => `line-${++lineSeq}`;
 function PosScreen({
@@ -1946,6 +2058,7 @@ function PosScreen({
   terminalName,
   operatorName,
   connection = "online",
+  operatorId,
   onAction,
   onOpenPosition,
   onFire,
@@ -1958,7 +2071,10 @@ function PosScreen({
   brandMark,
   brandName,
   className,
+  style,
   railTop,
+  unitSwitcher,
+  loading = false,
   now = Date.now()
 }) {
   const [book, dispatchBook] = useReducer(bookReducer, void 0, () => {
@@ -2146,8 +2262,13 @@ function PosScreen({
       text: seating ? `${seating.name} na ${config.vocabulary.position} ${p.label}` : `${config.vocabulary.position} ${p.label} aberta`,
       tone: "ok"
     });
+    const catalog = config.menus.find((m) => m.view === "catalog");
+    if (catalog) {
+      setMenuId(catalog.id);
+      requestAnimationFrame(() => commandRef.current?.focus());
+    }
     onOpenPosition?.(p.id, guests, attendantId);
-  }, [openingPosition, staff, now, seating, onOpenPosition, config.vocabulary.position]);
+  }, [openingPosition, staff, now, seating, onOpenPosition, config.vocabulary.position, config.menus]);
   const runAction = useCallback((actionId) => {
     if (actionId === "fire") {
       const at = new Date(now).toISOString();
@@ -2245,323 +2366,488 @@ function PosScreen({
     seatingRef.current = seating;
   }, [seating]);
   const openCount = livePositions.filter((p) => p.status !== "free").length;
-  return /* @__PURE__ */ jsxs("div", { className: className ? `pos ${className}` : "pos", children: [
-    /* @__PURE__ */ jsxs("div", { className: "pos-body", children: [
-      /* @__PURE__ */ jsxs("nav", { className: "pos-rail", "aria-label": "Navega\xE7\xE3o principal", children: [
-        /* @__PURE__ */ jsxs("div", { className: "pos-brand", children: [
-          /* @__PURE__ */ jsx("span", { className: "pos-brand__mark", children: brandMark ?? config.name.slice(0, 1) }),
-          /* @__PURE__ */ jsx("span", { className: "pos-brand__name", children: brandName ?? config.name })
-        ] }),
-        /* @__PURE__ */ jsxs("label", { className: "pos-field", children: [
-          /* @__PURE__ */ jsx("span", { className: "pos-field__icon", children: /* @__PURE__ */ jsx(Search, { size: 17, strokeWidth: 2.2, "aria-hidden": true }) }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: commandRef,
-              value: query,
-              onChange: (e) => {
-                setQuery(e.target.value);
-                const cat = config.menus.find((m) => m.view === "catalog");
-                if (e.target.value && cat && menu?.view !== "catalog") setMenuId(cat.id);
-              },
-              placeholder: "Buscar",
-              "aria-label": "Buscar item por c\xF3digo ou nome"
-            }
-          ),
-          query ? /* @__PURE__ */ jsx(
+  const TABS_ON_PHONE = 3;
+  const [moreOpen, setMoreOpen] = useState(false);
+  const pendingCount = ticket.lines.filter((l) => (l.state ?? "pending") === "pending").length;
+  const [floorLayout, setFloorLayout] = useState("grid");
+  const isPhone = usePhone();
+  const wideRail = useWideRail();
+  const phoneTabs = config.menus.slice(0, TABS_ON_PHONE);
+  const overflowTabs = config.menus.slice(TABS_ON_PHONE);
+  const searchField = /* @__PURE__ */ jsxs("label", { className: "pos-field", children: [
+    /* @__PURE__ */ jsx("span", { className: "pos-field__icon", children: /* @__PURE__ */ jsx(Search, { size: 17, strokeWidth: 2.2, "aria-hidden": true }) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: commandRef,
+        value: query,
+        onChange: (e) => {
+          setQuery(e.target.value);
+          const cat = config.menus.find((m) => m.view === "catalog");
+          if (e.target.value && cat && menu?.view !== "catalog") setMenuId(cat.id);
+        },
+        placeholder: "Buscar",
+        "aria-label": "Buscar item por c\xF3digo ou nome"
+      }
+    ),
+    query ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "pos-field__clear",
+        onClick: () => {
+          setQuery("");
+          commandRef.current?.focus();
+        },
+        "aria-label": "Limpar busca",
+        children: /* @__PURE__ */ jsx(X, { size: 14, strokeWidth: 2.6 })
+      }
+    ) : (
+      // Esc is the way back to this field from anywhere; saying so
+      // costs one chip and saves the operator from hunting for it.
+      /* @__PURE__ */ jsx("kbd", { className: "pos-field__hint", "aria-hidden": true, children: "Esc" })
+    )
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: className ? `pos ${className}` : "pos",
+      style,
+      "data-cart-open": railOpen || void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "pos-body", children: [
+          /* @__PURE__ */ jsxs("nav", { className: "pos-rail", "aria-label": "Navega\xE7\xE3o principal", children: [
+            /* @__PURE__ */ jsxs("div", { className: "pos-brand", children: [
+              /* @__PURE__ */ jsx("span", { className: "pos-brand__mark", children: brandMark ?? config.name.slice(0, 1) }),
+              /* @__PURE__ */ jsx("span", { className: "pos-brand__name", children: brandName ?? config.name })
+            ] }),
+            railTop && /* @__PURE__ */ jsx("div", { className: "pos-rail__top", children: railTop }),
+            wideRail && /* @__PURE__ */ jsx("div", { className: "pos-rail__search", children: searchField }),
+            /* @__PURE__ */ jsx("div", { className: "pos-rail__label pos-t-xs", children: "Opera\xE7\xE3o" }),
+            /* @__PURE__ */ jsx("div", { className: "pos-nav", children: config.menus.map((m) => {
+              const Icon = MENU_ICON[m.view] ?? ClipboardList;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: "pos-nav__item",
+                  "aria-current": m.id === menu?.id ? "page" : void 0,
+                  onClick: () => setMenuId(m.id),
+                  title: m.label,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "pos-nav__icon", children: /* @__PURE__ */ jsx(Icon, { size: 19, strokeWidth: 2.1, "aria-hidden": true }) }),
+                    /* @__PURE__ */ jsx("span", { className: "pos-nav__text", children: m.label }),
+                    m.badge != null && m.badge > 0 && /* @__PURE__ */ jsx("span", { className: "pos-nav__count pos-num", children: m.badge })
+                  ]
+                },
+                m.id
+              );
+            }) }),
+            /* @__PURE__ */ jsxs("div", { className: "pos-user", "data-state": connection, children: [
+              /* @__PURE__ */ jsx("span", { className: "pos-user__av", children: (operatorName ?? config.name).slice(0, 1) }),
+              /* @__PURE__ */ jsxs("span", { className: "pos-user__txt", children: [
+                /* @__PURE__ */ jsxs("span", { className: terminalName ? "pos-user__name" : "pos-user__name pos-user__name--dotted", children: [
+                  !terminalName && /* @__PURE__ */ jsx("span", { className: "pos-user__dot", "aria-hidden": true }),
+                  operatorName ?? config.name
+                ] }),
+                terminalName && /* @__PURE__ */ jsxs("span", { className: "pos-user__meta", children: [
+                  /* @__PURE__ */ jsx("span", { className: "pos-user__dot", "aria-hidden": true }),
+                  terminalName
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "pos-user__act",
+                  onClick: () => setShowKeys(true),
+                  "aria-label": "Atalhos",
+                  title: "Atalhos (F1)",
+                  children: /* @__PURE__ */ jsx(Keyboard, { size: 15, strokeWidth: 2.2, "aria-hidden": true })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("main", { className: "pos-main", ref: mainRef, children: [
+            /* @__PURE__ */ jsxs("div", { className: "pos-head", children: [
+              /* @__PURE__ */ jsxs("div", { className: "pos-head__where", children: [
+                /* @__PURE__ */ jsx("span", { className: "pos-head__title", children: menu?.label }),
+                unitSwitcher
+              ] }),
+              !wideRail && searchField,
+              /* @__PURE__ */ jsxs("span", { className: "pos-head__views", children: [
+                menu?.view === "floor" && !isPhone && /* @__PURE__ */ jsx("span", { className: "pos-seg", role: "group", "aria-label": "Como ver as mesas", children: [["grid", "Grade"], ["plan", "Planta"]].map(([value, label]) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "pos-seg__btn",
+                    "aria-pressed": floorLayout === value,
+                    onClick: () => {
+                      haptic("tap");
+                      setFloorLayout(value);
+                    },
+                    children: label
+                  },
+                  value
+                )) }),
+                menu?.view === "floor" && (config.positions.zones ?? []).length > 0 && /* @__PURE__ */ jsx("span", { className: "pos-seg", role: "group", "aria-label": "\xC1reas", children: config.positions.zones.map((z) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    className: "pos-seg__btn",
+                    "aria-pressed": z.id === activeZoneId,
+                    onClick: () => setActiveZoneId(z.id),
+                    children: z.label
+                  },
+                  z.id
+                )) })
+              ] })
+            ] }),
+            menu?.view === "floor" && loading && /* @__PURE__ */ jsx(FloorSkeleton, {}),
+            menu?.view === "floor" && !loading && /* @__PURE__ */ jsx(
+              FloorView,
+              {
+                layout: isPhone ? "grid" : floorLayout,
+                positions: zonePositions,
+                config: config.positions,
+                activeId: activePositionId,
+                onSelect: selectPosition,
+                now,
+                picking: seating != null
+              }
+            ),
+            menu?.view === "catalog" && loading && /* @__PURE__ */ jsx(CatalogSkeleton, {}),
+            menu?.view === "catalog" && !loading && /* @__PURE__ */ jsx(
+              CatalogView,
+              {
+                categories,
+                items,
+                activeCategoryId,
+                onCategoryChange: (id) => {
+                  setActiveCategoryId(id);
+                  setQuery("");
+                },
+                quantities,
+                onAdd: addItem,
+                onRemove: removeItem,
+                query
+              }
+            ),
+            menu?.view === "list" && /* @__PURE__ */ jsx(
+              DeliveryBoard,
+              {
+                orders: livePositions.filter((p) => p.kind === "delivery"),
+                activeId: activePositionId,
+                onSelect: selectPosition,
+                now
+              }
+            ),
+            menu?.view === "reservations" && /* @__PURE__ */ jsx(
+              ReservationsView,
+              {
+                reservations: reservations.map((r) => ({
+                  ...r,
+                  ...bookings[r.id] ? { status: bookings[r.id] } : {},
+                  ...seatedAt[r.id] ? { positionId: seatedAt[r.id] } : {}
+                })),
+                positions: livePositions,
+                now,
+                onOpenPosition: (id) => {
+                  const p = livePositions.find((x) => x.id === id);
+                  if (p) selectPosition(p);
+                },
+                onMarkArrived: (id) => setBookings((prev) => ({ ...prev, [id]: "arrived" })),
+                onSeat: (reservation) => {
+                  setSeating(reservation);
+                  const floor = config.menus.find((m) => m.view === "floor");
+                  if (floor) setMenuId(floor.id);
+                }
+              }
+            ),
+            menu?.view === "shift" && /* @__PURE__ */ jsx(ShiftView, { positions: livePositions, staff }),
+            /* @__PURE__ */ jsx(
+              Dock,
+              {
+                positions: livePositions.filter((p) => p.status !== "free" && p.kind !== "delivery"),
+                activeId: activePositionId,
+                onSelect: selectPosition,
+                now,
+                openCount,
+                seating,
+                onCancelSeating: () => setSeating(void 0)
+              }
+            ),
+            /* @__PURE__ */ jsx(Notice, { notice, onDone: () => setNotice(void 0) })
+          ] }),
+          ticket.lines.length > 0 && !railOpen && /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
-              className: "pos-field__clear",
+              className: "pos-cartbar",
               onClick: () => {
-                setQuery("");
-                commandRef.current?.focus();
+                haptic("tap");
+                setRailOpen(true);
               },
-              "aria-label": "Limpar busca",
-              children: /* @__PURE__ */ jsx(X, { size: 14, strokeWidth: 2.6 })
-            }
-          ) : (
-            // Esc is the way back to this field from anywhere; saying so
-            // costs one chip and saves the operator from hunting for it.
-            /* @__PURE__ */ jsx("kbd", { className: "pos-field__hint", "aria-hidden": true, children: "Esc" })
-          )
-        ] }),
-        railTop && /* @__PURE__ */ jsx("div", { className: "pos-rail__top", children: railTop }),
-        /* @__PURE__ */ jsx("div", { className: "pos-rail__label pos-t-xs", children: "Opera\xE7\xE3o" }),
-        /* @__PURE__ */ jsx("div", { className: "pos-nav", children: config.menus.map((m) => {
-          const Icon = MENU_ICON[m.view] ?? ClipboardList;
-          return /* @__PURE__ */ jsxs(
-            "button",
-            {
-              className: "pos-nav__item",
-              "aria-current": m.id === menu?.id ? "page" : void 0,
-              onClick: () => setMenuId(m.id),
-              title: m.label,
+              "aria-expanded": false,
               children: [
-                /* @__PURE__ */ jsx("span", { className: "pos-nav__icon", children: /* @__PURE__ */ jsx(Icon, { size: 19, strokeWidth: 2.1, "aria-hidden": true }) }),
-                /* @__PURE__ */ jsx("span", { className: "pos-nav__text", children: m.label }),
-                m.badge != null && m.badge > 0 && /* @__PURE__ */ jsx("span", { className: "pos-nav__count pos-num", children: m.badge })
+                /* @__PURE__ */ jsxs("span", { className: "pos-cartbar__id", children: [
+                  /* @__PURE__ */ jsx("span", { className: "pos-cartbar__where", children: activePosition?.label ?? config.vocabulary.ticket }),
+                  /* @__PURE__ */ jsxs("span", { className: "pos-cartbar__meta", children: [
+                    ticket.lines.length,
+                    " ",
+                    ticket.lines.length === 1 ? "item" : "itens",
+                    pendingCount > 0 && ` \xB7 ${pendingCount} a enviar`
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "pos-cartbar__total pos-num", children: formatCents(totals.totalCents) }),
+                /* @__PURE__ */ jsx(ChevronUp, { size: 18, strokeWidth: 2.4, "aria-hidden": true })
               ]
-            },
-            m.id
-          );
-        }) }),
-        /* @__PURE__ */ jsxs("div", { className: "pos-user", "data-state": connection, children: [
-          /* @__PURE__ */ jsx("span", { className: "pos-user__av", children: (operatorName ?? config.name).slice(0, 1) }),
-          /* @__PURE__ */ jsxs("span", { className: "pos-user__txt", children: [
-            /* @__PURE__ */ jsxs("span", { className: terminalName ? "pos-user__name" : "pos-user__name pos-user__name--dotted", children: [
-              !terminalName && /* @__PURE__ */ jsx("span", { className: "pos-user__dot", "aria-hidden": true }),
-              operatorName ?? config.name
-            ] }),
-            terminalName && /* @__PURE__ */ jsxs("span", { className: "pos-user__meta", children: [
-              /* @__PURE__ */ jsx("span", { className: "pos-user__dot", "aria-hidden": true }),
-              terminalName
+            }
+          ),
+          /* @__PURE__ */ jsxs("nav", { className: "pos-navbar", "aria-label": "Vis\xF5es do PDV", children: [
+            phoneTabs.map((m) => {
+              const Icon = MENU_ICON[m.view] ?? ClipboardList;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "pos-navbar__item",
+                  "aria-current": m.id === menu?.id ? "page" : void 0,
+                  onClick: () => {
+                    haptic("tap");
+                    setMenuId(m.id);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { className: "pos-navbar__icon", children: [
+                      /* @__PURE__ */ jsx(Icon, { size: 20, strokeWidth: 2.1, "aria-hidden": true }),
+                      m.badge != null && m.badge > 0 && /* @__PURE__ */ jsx("span", { className: "pos-navbar__count pos-num", children: m.badge })
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { className: "pos-navbar__text", children: m.label })
+                  ]
+                },
+                m.id
+              );
+            }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "pos-navbar__item",
+                "aria-expanded": moreOpen,
+                onClick: () => {
+                  haptic("tap");
+                  setMoreOpen(true);
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "pos-navbar__icon", children: /* @__PURE__ */ jsx(MoreHorizontal, { size: 20, strokeWidth: 2.1, "aria-hidden": true }) }),
+                  /* @__PURE__ */ jsx("span", { className: "pos-navbar__text", children: "Mais" })
+                ]
+              }
+            )
+          ] }),
+          moreOpen && /* @__PURE__ */ jsxs("div", { className: "pos-more", role: "dialog", "aria-label": "Mais op\xE7\xF5es", children: [
+            /* @__PURE__ */ jsx("button", { className: "pos-more__scrim", "aria-label": "Fechar menu", onClick: () => setMoreOpen(false) }),
+            /* @__PURE__ */ jsxs("div", { className: "pos-more__panel", children: [
+              /* @__PURE__ */ jsxs("div", { className: "pos-more__head", children: [
+                /* @__PURE__ */ jsx("span", { className: "pos-brand__mark", children: brandMark ?? config.name.slice(0, 1) }),
+                /* @__PURE__ */ jsx("span", { className: "pos-brand__name", children: brandName ?? config.name }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "pos-more__close",
+                    "aria-label": "Fechar menu",
+                    onClick: () => setMoreOpen(false),
+                    children: /* @__PURE__ */ jsx(X, { size: 18, strokeWidth: 2.4 })
+                  }
+                )
+              ] }),
+              railTop && /* @__PURE__ */ jsx("div", { className: "pos-more__top", children: railTop }),
+              overflowTabs.length > 0 && /* @__PURE__ */ jsx("div", { className: "pos-more__nav", children: overflowTabs.map((m) => {
+                const Icon = MENU_ICON[m.view] ?? ClipboardList;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "pos-nav__item",
+                    "aria-current": m.id === menu?.id ? "page" : void 0,
+                    onClick: () => {
+                      haptic("tap");
+                      setMenuId(m.id);
+                      setMoreOpen(false);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "pos-nav__icon", children: /* @__PURE__ */ jsx(Icon, { size: 19, strokeWidth: 2.1, "aria-hidden": true }) }),
+                      /* @__PURE__ */ jsx("span", { className: "pos-nav__text", children: m.label }),
+                      m.badge != null && m.badge > 0 && /* @__PURE__ */ jsx("span", { className: "pos-nav__count pos-num", children: m.badge })
+                    ]
+                  },
+                  m.id
+                );
+              }) }),
+              unitSwitcher && /* @__PURE__ */ jsx("div", { className: "pos-more__unit", children: unitSwitcher }),
+              /* @__PURE__ */ jsxs("div", { className: "pos-more__foot", children: [
+                /* @__PURE__ */ jsx("span", { className: "pos-user__av", children: (operatorName ?? config.name).slice(0, 1) }),
+                /* @__PURE__ */ jsx("span", { className: "pos-user__txt", children: operatorName ?? config.name })
+              ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx(
-            "button",
+          activePosition?.kind === "delivery" ? /* @__PURE__ */ jsx(
+            DispatchRail,
             {
-              className: "pos-user__act",
-              onClick: () => setShowKeys(true),
-              "aria-label": "Atalhos",
-              title: "Atalhos (F1)",
-              children: /* @__PURE__ */ jsx(Keyboard, { size: 15, strokeWidth: 2.2, "aria-hidden": true })
+              containerRef: asideRef,
+              order: activePosition,
+              ticket,
+              totals,
+              now,
+              open: railOpen,
+              onAdvance: (to) => {
+                setDispatched((prev) => ({ ...prev, [activePosition.id]: to }));
+                void onDispatch?.(activePosition.id, to);
+              },
+              onCancel: () => handleAction("cancel_order")
             }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("main", { className: "pos-main", ref: mainRef, children: [
-        /* @__PURE__ */ jsxs("div", { className: "pos-head", children: [
-          /* @__PURE__ */ jsx("span", { className: "pos-head__title", children: menu?.label }),
-          menu?.view === "floor" && (config.positions.zones ?? []).length > 0 && /* @__PURE__ */ jsx("span", { className: "pos-seg", role: "group", "aria-label": "\xC1reas", children: config.positions.zones.map((z) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "pos-seg__btn",
-              "aria-pressed": z.id === activeZoneId,
-              onClick: () => setActiveZoneId(z.id),
-              children: z.label
-            },
-            z.id
-          )) })
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            railOpen && /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "pos-sheet-scrim",
+                "aria-label": "Minimizar a comanda",
+                onClick: () => setRailOpen(false)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TicketRail,
+              {
+                containerRef: asideRef,
+                onCollapse: () => setRailOpen(false),
+                ticket: {
+                  ...ticket,
+                  positionLabel: activePosition?.label,
+                  attendantName: activePosition?.attendantName,
+                  seatedAt: ticket.seatedAt ?? activePosition?.openedAt
+                },
+                totals,
+                vocabulary: config.vocabulary,
+                paymentMethods: config.paymentMethods,
+                selectedPaymentId: paymentId,
+                onSelectPayment: setPaymentId,
+                onChangeQuantity: (lineId, delta) => dispatch({ type: "change_quantity", lineId, delta }),
+                selectedLineId,
+                onSelectLine: setSelectedLineId,
+                onClose: () => handleAction("close_bill"),
+                onFire: () => handleAction("fire"),
+                fireShortcut: config.actions.find((a) => a.id === "fire")?.shortcut,
+                closeShortcut: config.actions.find((a) => a.id === "close_bill")?.shortcut,
+                onBrowseCatalog: () => {
+                  const cat = config.menus.find((m) => m.view === "catalog");
+                  if (cat) setMenuId(cat.id);
+                  setRailOpen(false);
+                  commandRef.current?.focus();
+                },
+                alias: activePositionId ? named[activePositionId]?.alias : void 0,
+                customerPhone: activePositionId ? named[activePositionId]?.phone : void 0,
+                onEditIdentity: activePosition ? () => setNaming(activePosition) : void 0,
+                onEditLine: (lineId) => {
+                  const line = ticket.lines.find((l) => l.id === lineId);
+                  const item = line && items.find((i) => i.id === line.itemId);
+                  if (line && item) setEditing({ item, line });
+                },
+                guests: activePosition?.seats,
+                status: activePosition?.status,
+                zoneLabel: config.positions.zones?.find((z) => z.id === activePosition?.zoneId)?.label,
+                request: activePosition?.request,
+                now,
+                open: railOpen
+              }
+            )
+          ] })
         ] }),
-        menu?.view === "floor" && /* @__PURE__ */ jsx(
-          FloorView,
+        showKeys && /* @__PURE__ */ jsx(ShortcutsOverlay, { actions: config.actions, onClose: () => setShowKeys(false) }),
+        pinFor && /* @__PURE__ */ jsx(
+          PinSheet,
           {
-            positions: zonePositions,
-            config: config.positions,
-            activeId: activePositionId,
-            onSelect: selectPosition,
-            now,
-            picking: seating != null
+            actionLabel: pinFor.label,
+            onCancel: () => setPinFor(void 0),
+            onVerify: (pin) => verifyPin(pin, pinFor.id),
+            onGranted: (by) => {
+              const id = pinFor.id;
+              setPinFor(void 0);
+              onAuthorised?.(id, by);
+              runAction(id);
+            }
           }
         ),
-        menu?.view === "catalog" && /* @__PURE__ */ jsx(
-          CatalogView,
+        splitting && /* @__PURE__ */ jsx(
+          SplitSheet,
           {
-            categories,
-            items,
-            activeCategoryId,
-            onCategoryChange: (id) => {
-              setActiveCategoryId(id);
-              setQuery("");
-            },
-            quantities,
-            onAdd: addItem,
-            onRemove: removeItem,
-            query
+            ticket,
+            totals,
+            guests: activePosition?.seats,
+            onCancel: () => setSplitting(false),
+            onConfirm: () => setSplitting(false)
           }
         ),
-        menu?.view === "list" && /* @__PURE__ */ jsx(
-          DeliveryBoard,
+        openingPosition && /* @__PURE__ */ jsx(
+          OpenTableSheet,
           {
-            orders: livePositions.filter((p) => p.kind === "delivery"),
-            activeId: activePositionId,
-            onSelect: selectPosition,
-            now
+            position: openingPosition,
+            vocabulary: config.vocabulary,
+            staff,
+            operator: operatorId ? { id: operatorId, name: operatorName ?? operatorId } : void 0,
+            defaultSeats: seating?.party,
+            seatingName: seating?.name,
+            onCancel: () => {
+              setOpeningPosition(void 0);
+              setSeating(void 0);
+            },
+            onConfirm: confirmOpen
           }
         ),
-        menu?.view === "reservations" && /* @__PURE__ */ jsx(
-          ReservationsView,
+        naming && /* @__PURE__ */ jsx(
+          IdentitySheet,
           {
-            reservations: reservations.map((r) => ({
-              ...r,
-              ...bookings[r.id] ? { status: bookings[r.id] } : {},
-              ...seatedAt[r.id] ? { positionId: seatedAt[r.id] } : {}
-            })),
-            positions: livePositions,
-            now,
-            onOpenPosition: (id) => {
-              const p = livePositions.find((x) => x.id === id);
-              if (p) selectPosition(p);
+            position: {
+              ...naming,
+              alias: named[naming.id]?.alias ?? naming.alias,
+              customerPhone: named[naming.id]?.phone ?? naming.customerPhone
             },
-            onMarkArrived: (id) => setBookings((prev) => ({ ...prev, [id]: "arrived" })),
-            onSeat: (reservation) => {
-              setSeating(reservation);
-              const floor = config.menus.find((m) => m.view === "floor");
-              if (floor) setMenuId(floor.id);
+            onCancel: () => setNaming(void 0),
+            onSave: (alias, phone) => {
+              setNamed((prev) => ({ ...prev, [naming.id]: { alias, phone } }));
+              setNaming(void 0);
             }
           }
         ),
-        menu?.view === "shift" && /* @__PURE__ */ jsx(ShiftView, { positions: livePositions, staff }),
-        /* @__PURE__ */ jsx(
-          Dock,
+        editing && /* @__PURE__ */ jsx(
+          ModifierSheet,
           {
-            positions: livePositions.filter((p) => p.status !== "free" && p.kind !== "delivery"),
-            activeId: activePositionId,
-            onSelect: selectPosition,
-            now,
-            openCount,
-            seating,
-            onCancelSeating: () => setSeating(void 0)
+            item: editing.item,
+            mode: "edit",
+            initial: { modifiers: editing.line.modifiers, note: editing.line.note },
+            onCancel: () => setEditing(void 0),
+            onConfirm: (modifiers, note) => {
+              dispatch({
+                type: "edit_line",
+                lineId: editing.line.id,
+                modifiers,
+                note,
+                basePriceCents: editing.line.basePriceCents ?? editing.item.priceCents
+              });
+              setEditing(void 0);
+            }
           }
         ),
-        /* @__PURE__ */ jsx(Notice, { notice, onDone: () => setNotice(void 0) })
-      ] }),
-      activePosition?.kind === "delivery" ? /* @__PURE__ */ jsx(
-        DispatchRail,
-        {
-          containerRef: asideRef,
-          order: activePosition,
-          ticket,
-          totals,
-          now,
-          open: railOpen,
-          onAdvance: (to) => {
-            setDispatched((prev) => ({ ...prev, [activePosition.id]: to }));
-            void onDispatch?.(activePosition.id, to);
-          },
-          onCancel: () => handleAction("cancel_order")
-        }
-      ) : /* @__PURE__ */ jsx(
-        TicketRail,
-        {
-          containerRef: asideRef,
-          ticket: {
-            ...ticket,
-            positionLabel: activePosition?.label,
-            attendantName: activePosition?.attendantName,
-            seatedAt: ticket.seatedAt ?? activePosition?.openedAt
-          },
-          totals,
-          vocabulary: config.vocabulary,
-          paymentMethods: config.paymentMethods,
-          selectedPaymentId: paymentId,
-          onSelectPayment: setPaymentId,
-          onChangeQuantity: (lineId, delta) => dispatch({ type: "change_quantity", lineId, delta }),
-          selectedLineId,
-          onSelectLine: setSelectedLineId,
-          onClose: () => handleAction("close_bill"),
-          onFire: () => handleAction("fire"),
-          fireShortcut: config.actions.find((a) => a.id === "fire")?.shortcut,
-          closeShortcut: config.actions.find((a) => a.id === "close_bill")?.shortcut,
-          onBrowseCatalog: () => {
-            const cat = config.menus.find((m) => m.view === "catalog");
-            if (cat) setMenuId(cat.id);
-            commandRef.current?.focus();
-          },
-          alias: activePositionId ? named[activePositionId]?.alias : void 0,
-          customerPhone: activePositionId ? named[activePositionId]?.phone : void 0,
-          onEditIdentity: activePosition ? () => setNaming(activePosition) : void 0,
-          onEditLine: (lineId) => {
-            const line = ticket.lines.find((l) => l.id === lineId);
-            const item = line && items.find((i) => i.id === line.itemId);
-            if (line && item) setEditing({ item, line });
-          },
-          guests: activePosition?.seats,
-          status: activePosition?.status,
-          zoneLabel: config.positions.zones?.find((z) => z.id === activePosition?.zoneId)?.label,
-          request: activePosition?.request,
-          now,
-          open: railOpen
-        }
-      )
-    ] }),
-    showKeys && /* @__PURE__ */ jsx(ShortcutsOverlay, { actions: config.actions, onClose: () => setShowKeys(false) }),
-    pinFor && /* @__PURE__ */ jsx(
-      PinSheet,
-      {
-        actionLabel: pinFor.label,
-        onCancel: () => setPinFor(void 0),
-        onVerify: (pin) => verifyPin(pin, pinFor.id),
-        onGranted: (by) => {
-          const id = pinFor.id;
-          setPinFor(void 0);
-          onAuthorised?.(id, by);
-          runAction(id);
-        }
-      }
-    ),
-    splitting && /* @__PURE__ */ jsx(
-      SplitSheet,
-      {
-        ticket,
-        totals,
-        guests: activePosition?.seats,
-        onCancel: () => setSplitting(false),
-        onConfirm: () => setSplitting(false)
-      }
-    ),
-    openingPosition && /* @__PURE__ */ jsx(
-      OpenTableSheet,
-      {
-        position: openingPosition,
-        vocabulary: config.vocabulary,
-        staff,
-        defaultSeats: seating?.party,
-        seatingName: seating?.name,
-        onCancel: () => {
-          setOpeningPosition(void 0);
-          setSeating(void 0);
-        },
-        onConfirm: confirmOpen
-      }
-    ),
-    naming && /* @__PURE__ */ jsx(
-      IdentitySheet,
-      {
-        position: {
-          ...naming,
-          alias: named[naming.id]?.alias ?? naming.alias,
-          customerPhone: named[naming.id]?.phone ?? naming.customerPhone
-        },
-        onCancel: () => setNaming(void 0),
-        onSave: (alias, phone) => {
-          setNamed((prev) => ({ ...prev, [naming.id]: { alias, phone } }));
-          setNaming(void 0);
-        }
-      }
-    ),
-    editing && /* @__PURE__ */ jsx(
-      ModifierSheet,
-      {
-        item: editing.item,
-        mode: "edit",
-        initial: { modifiers: editing.line.modifiers, note: editing.line.note },
-        onCancel: () => setEditing(void 0),
-        onConfirm: (modifiers, note) => {
-          dispatch({
-            type: "edit_line",
-            lineId: editing.line.id,
-            modifiers,
-            note,
-            basePriceCents: editing.line.basePriceCents ?? editing.item.priceCents
-          });
-          setEditing(void 0);
-        }
-      }
-    ),
-    pendingItem && /* @__PURE__ */ jsx(
-      ModifierSheet,
-      {
-        item: pendingItem,
-        onCancel: () => setPendingItem(void 0),
-        onConfirm: (modifiers, note) => {
-          ring(pendingItem, modifiers, note || void 0);
-          setPendingItem(void 0);
-        }
-      }
-    )
-  ] });
+        pendingItem && /* @__PURE__ */ jsx(
+          ModifierSheet,
+          {
+            item: pendingItem,
+            onCancel: () => setPendingItem(void 0),
+            onConfirm: (modifiers, note) => {
+              ring(pendingItem, modifiers, note || void 0);
+              setPendingItem(void 0);
+            }
+          }
+        )
+      ]
+    }
+  );
 }
 function Dock({ positions, activeId, onSelect, now, openCount, seating, onCancelSeating }) {
   const activeRef = useRef(null);