@aglyn/plugins-commerce 1.0.0-beta.229 → 1.0.0-beta.231

package/src/lib/components/console/pos-page.component.js

@@ -19,22 +19,27 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import * as Aglyn from "@aglyn/aglyn";
 import * as CommerceModel from "../../model/index.js";
 import { PRODUCT_LIST_BASE, PRODUCT_LIST_QUERY } from "../../constants/product-list-query.js";
-import { escapeHtml } from "../../utils/escape-html.js";
 import { NextPageTitle } from "@aglyn/shared-ui-next/contexts/next-page-title-provider";
 import { useSnackbar } from "@aglyn/shared-ui-snackstack";
-import { ListQueryNotices } from "@aglyn/shared-ui-jsx/components/list-query-notices.component";
 import { planListQuery } from "@aglyn/shared-ui-jsx/const/list-query-plan";
 import { nameSearchNormalizers } from "@aglyn/aglyn/app-utils/name-search";
-import { Alert, Box, Button, Card, CardActionArea, Chip, Dialog, DialogActions, DialogContent, DialogTitle, MenuItem, Stack, TextField, Typography } from "@mui/material";
-import { QRCodeSVG } from "qrcode.react";
+import { Badge, Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Drawer, MenuItem, Stack, TextField, Typography, useMediaQuery, useTheme } from "@mui/material";
 import { collection, getDocs, limit, query, where } from "firebase/firestore";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useFirestore, useUser } from "@aglyn/tenant-feature-instance";
 import { useFirestoreCollection } from "@aglyn/tenant-feature-instance";
 import { listQueryConstraints } from "@aglyn/tenant-feature-instance/hooks/use-list-query";
 import { useOrgPlan } from "@aglyn/tenant-feature-instance";
-import { authorizedFetch } from "@aglyn/shared-util-http/authorized-token";
-const usd = (cents)=>`$${(cents / 100).toFixed(2)}`;
+import { newAttemptKey, openPosSale, posRegisterContext, PosRequestError, usd } from "./pos/pos-api.js";
+import { PosCartPanel } from "./pos/pos-cart-panel.component.js";
+import { ScanAdornment } from "../../barcode/scan-button.component.js";
+import { useScannerWedge } from "../../barcode/scanner-wedge.js";
+import { PosCustomerLookup, PosLastReceipt, PosOperationsBar, usePosCashier, usePosOpsSettings } from "./pos-ops/register-ops.js";
+import { POS_QUICK_KEYS, POS_TOUCH_PX, PosProductGrid } from "./pos/pos-product-grid.component.js";
+import { PosItemDialog, posItemNeedsChoice } from "./pos/pos-item-dialog.component.js";
+import { PosReceiptPanel } from "./pos/pos-receipt-panel.component.js";
+import { PosTenderPanel } from "./pos/pos-tender-panel.component.js";
+import { posDisplayTipCents, usePosDisplay } from "./pos/use-pos-display.js";
 /** The till sells active products only; every read of the catalog asks it. */ const SELLABLE = {
     field: 'status',
     op: 'equals',
@@ -53,7 +58,7 @@ const usd = (cents)=>`$${(cents / 100).toFixed(2)}`;
  */ export function posProductPlan(options) {
     var _options_search;
     const typed = (_options_search = options.search) == null ? void 0 : _options_search.trim();
-    return planListQuery(PRODUCT_LIST_QUERY, {
+    const plan = planListQuery(POS_GRID_QUERY, {
         base: PRODUCT_LIST_BASE,
         clauses: [
             SELLABLE,
@@ -63,19 +68,68 @@ const usd = (cents)=>`$${(cents / 100).toFixed(2)}`;
                     op: 'contains',
                     value: options.code.value
                 }
+            ] : [],
+            ...options.categoryId ? [
+                {
+                    field: 'categoryIds',
+                    op: 'contains',
+                    value: options.categoryId
+                }
             ] : []
         ],
-        search: typed ? [
+        // A chip and a typed word are both array clauses, and Firestore takes
+        // one: with a chip on, the word narrows by name prefix instead.
+        search: typed && !options.categoryId ? [
             typed
         ] : []
     }, nameSearchNormalizers);
+    // The Quick keys chip (AGL-3607) is a boolean equality the list planner
+    // does not model, added beside the scope and status it composes with —
+    // `deletedAt ==, status ==, posQuickKey ==, nameLower ASC` is declared in
+    // the index file. A typed word searches the whole catalog instead: a
+    // cashier who types is looking past the quick keys.
+    if (options.quickKeys && !typed && !options.code) {
+        return _extends({}, plan, {
+            filters: [
+                ...plan.filters,
+                {
+                    path: 'posQuickKey',
+                    op: '==',
+                    value: true
+                }
+            ]
+        });
+    }
+    return plan;
 }
 /**
- * POS register (AGL-312): touch-first full-screen sale surface —
- * product grid with search/barcode (keyboard-wedge scanners type into
- * the search box and press Enter), a register cart with a whole-sale
- * discount, and cash / QR-card / reservation-folio settlement through
- * the server-priced pos-order API. Receipts print via the browser.
+ * The grid's query: the products hub's, plus the category a chip picks
+ * (AGL-3607). `categoryIds CONTAINS, nameLower ASC` is a composite the
+ * storefront catalog already declares.
+ */ export const POS_GRID_QUERY = _extends({}, PRODUCT_LIST_QUERY, {
+    fields: [
+        ...PRODUCT_LIST_QUERY.fields,
+        {
+            column: 'categoryIds',
+            kind: 'exact',
+            path: 'categoryIds',
+            tokensPath: 'categoryIds',
+            operators: [
+                'contains'
+            ]
+        }
+    ]
+});
+/**
+ * POS register (AGL-312, AGL-3607): a tablet-first sale surface — the
+ * product grid with search, scan and category chips, the basket, and a
+ * tender panel that takes one or more payments against an open sale (cash,
+ * card reader, a native Tap to Pay bridge, a typed card, the QR link, gift
+ * cards and room charges) until the balance is zero. A paired customer
+ * display mirrors the basket and takes the tip and the receipt (AGL-3608).
+ *
+ * On a wide screen (900px and up) the grid and the register sit side by
+ * side; below that the register is a bottom sheet behind a sticky total bar.
  */ /*
  * `managePos` is NOT read here. The nav item in `plugin.ts` declares it and
  * the shell refuses the route before this component is constructed, so a
@@ -85,31 +139,76 @@ const usd = (cents)=>`$${(cents / 100).toFixed(2)}`;
  * Re-adding a check off the `permissions` prop would be a second answer to a
  * settled question, and a laxer one: a prop absent because the map has not
  * landed reads as permitted here, while the shell holds the route on that
- * same condition rather than guessing. `server/pos-order.ts` remains the
- * enforcement point for the sale itself.
- */ export function PosConsolePage({ hostId }) {
-    var _ref;
-    var _usableRegisters_;
+ * same condition rather than guessing. The server routes remain the
+ * enforcement point for every sale and every payment.
+ */ /** Where a register device remembers the category chip it was left on. */ const POS_CATEGORY_KEY = 'aglyn.pos.category';
+/** The basket line an item-sheet choice makes: label and estimate from the product. */ export function registerLineFor(product, choice) {
+    var _variant_options, _variant_options1;
+    const { variant, modifiers, quantity } = choice;
+    const resolved = CommerceModel.resolveLineModifiers(product, modifiers);
+    const picked = resolved.ok ? resolved.modifiers : [];
+    const label = CommerceModel.lineLabelWithModifiers(Object.keys((_variant_options = variant.options) != null ? _variant_options : {}).length ? Object.values((_variant_options1 = variant.options) != null ? _variant_options1 : {}).join(' / ') : undefined, picked);
+    return _extends({
+        productId: product.$id
+    }, variant.id !== 'default' ? {
+        variantId: variant.id
+    } : {}, {
+        name: product.name
+    }, label ? {
+        variantLabel: label
+    } : {}, {
+        unitAmountCents: Math.round(Number(variant.priceUsd) * 100) + (resolved.ok ? resolved.extraCents : 0),
+        quantity
+    }, modifiers.length ? {
+        modifiers
+    } : {});
+}
+/** Same product, variant and choices: the lines that merge into one. */ function lineKey(line) {
+    var _line_variantId;
+    return `${line.productId}:${(_line_variantId = line.variantId) != null ? _line_variantId : ''}:${CommerceModel.modifierSelectionKey(line.modifiers)}`;
+}
+export function PosConsolePage({ hostId }) {
+    var _ref, _ref1, _ref2, _ref3, _ref4;
+    var _usableRegisters_find, _usableRegisters_;
     const firestore = useFirestore();
     const { data: user } = useUser();
     const { enqueueSnackbar } = useSnackbar();
+    const theme = useTheme();
+    const wide = useMediaQuery(theme.breakpoints.up('md'));
     const [search, setSearch] = useState('');
-    const gridPlan = useMemo(()=>posProductPlan({
-            search
+    // The chip a register opens on is remembered per device: a counter that
+    // rings from its quick keys reopens on them.
+    const [categoryId, setCategoryIdState] = useState(()=>{
+        try {
+            var _window_localStorage_getItem;
+            return (_window_localStorage_getItem = window.localStorage.getItem(POS_CATEGORY_KEY)) != null ? _window_localStorage_getItem : '';
+        } catch (unused) {
+            return '';
+        }
+    });
+    const setCategoryId = useCallback((id)=>{
+        setCategoryIdState(id);
+        try {
+            window.localStorage.setItem(POS_CATEGORY_KEY, id);
+        } catch (unused) {
+        // Storage blocked: the chip still works for this visit.
+        }
+    }, []);
+    const gridPlan = useMemo(()=>categoryId === POS_QUICK_KEYS ? posProductPlan({
+            search,
+            quickKeys: true
+        }) : posProductPlan({
+            search,
+            categoryId
         }), [
-        search
+        search,
+        categoryId
     ]);
     const { data: productDocs } = useFirestoreCollection(/*
      * The till's grid, narrowed by the QUERY rather than by the rows it
-     * happened to fetch (AGL-2501, AGL-2292, AGL-3321).
-     *
-     * `limit(500)` with no `orderBy` was document-id order over
-     * `createResourceUid()` — an arbitrary five hundred, filtered afterwards
-     * for status, deletion and the typed search. All three are the query's
-     * now (`posProductPlan`), so the window is the first five hundred
-     * SELLABLE products by name and a typed name reaches the whole catalog.
-     * The scan does not come through here at all — see `handleSearchEnter`,
-     * which is a lookup rather than a filter.
+     * happened to fetch (AGL-2501, AGL-2292, AGL-3321): the first five
+     * hundred SELLABLE products by name, and a typed name reaches the whole
+     * catalog. The scan does not come through here — see `handleSearchEnter`.
      */ ()=>query(collection(firestore, 'hosts', hostId, 'products'), ...listQueryConstraints(gridPlan), limit(POS_GRID_CEILING)), [
         firestore,
         hostId,
@@ -117,6 +216,12 @@ const usd = (cents)=>`$${(cents / 100).toFixed(2)}`;
     ], {
         idField: '$id'
     });
+    const { data: categoryDocs } = useFirestoreCollection(()=>query(collection(firestore, 'hosts', hostId, 'productCategories'), limit(30)), [
+        firestore,
+        hostId
+    ], {
+        idField: '$id'
+    });
     const { data: locationDocs } = useFirestoreCollection(()=>query(collection(firestore, 'hosts', hostId, 'locations'), limit(25)), [
         firestore,
         hostId
@@ -136,24 +241,13 @@ const usd = (cents)=>`$${(cents / 100).toFixed(2)}`;
         var _a_name, _b_name;
         return String((_a_name = a.name) != null ? _a_name : '').localeCompare(String((_b_name = b.name) != null ? _b_name : ''));
     });
-    // Only registers within the plan cap can transact (pos-order.ts enforces
-    // this at sale time by creation rank, AGL-482) — offer only those.
-    //
-    // Not until the org doc has arrived (AGL-1064): an absent org resolves to
-    // the free tier's `posRegisters: 0`, which empties this list and tells a
-    // paying seller their registers exceed a plan nobody has read yet.
-    // Per SITE (AGL-1775): the plan's cap plus the register seats the org has
-    // allocated to this host out of the purchased pool. `checkQuota` on the
-    // org-level `posRegisters` no longer carries the pool and would hide
-    // registers this site is paying for.
+    // Only registers within the plan cap can transact (AGL-482), and not until
+    // the org doc has arrived (AGL-1064). Per SITE (AGL-1775).
     const registerCap = Aglyn.checkHostRegisterQuota(org, hostId, registers.length).limit;
     const withinCap = CommerceModel.registersWithinCap(registers, registerCap);
     const usableRegisters = planReady ? registers.filter((r)=>withinCap.has(r.$id)) : [];
     /*
-   * The stays a sale can be charged to, asked for BY STATUS (AGL-3321). This
-   * read the first hundred reservations in document-id order and kept the
-   * checked-in ones, so a guest in the house was missing from the folio
-   * picker whenever a hundred other bookings sorted before theirs.
+   * The stays a sale can be charged to, asked for BY STATUS (AGL-3321).
    */ const { data: reservationDocs } = useFirestoreCollection(()=>query(collection(firestore, 'hosts', hostId, 'reservations'), where('status', '==', 'checked_in'), limit(100)), [
         firestore,
         hostId
@@ -163,13 +257,11 @@ const usd = (cents)=>`$${(cents / 100).toFixed(2)}`;
     const openStays = reservationDocs != null ? reservationDocs : [];
     const [lines, setLines] = useState([]);
     const [discountPct, setDiscountPct] = useState(0);
-    const [customerEmail, setCustomerEmail] = useState('');
+    // The customer the lookup attached (AGL-3609); their email is the sale's.
+    const [customer, setCustomer] = useState(null);
+    const customerEmail = (_ref = customer == null ? void 0 : customer.email) != null ? _ref : '';
     const [locationId, setLocationId] = useState('');
-    // Register (AGL-472): a sale must run through a named register so the
-    // `posRegisters` cap is meaningful and takings are attributable.
     const [registerId, setRegisterId] = useState('');
-    // Default to the first register once they load; if that register pins a
-    // location, adopt it (the cashier can still override below).
     useEffect(()=>{
         if (registerId || usableRegisters.length === 0) return;
         const first = usableRegisters[0];
@@ -179,88 +271,70 @@ const usd = (cents)=>`$${(cents / 100).toFixed(2)}`;
         usableRegisters,
         registerId
     ]);
-    // `paying` routes the settlement DIALOGS — nothing else. It is deliberately
-    // not the tender `settle` acts on (AGL-1682): it used to be both, and the
-    // Card button had to `setPaying('link')` and call `settle()` in one handler,
-    // where `settle` still closed over the pre-click `null` and returned at its
-    // own guard. Card has no dialog of its own — the QR dialog is gated on
-    // `cardUrl` — so the card path sets nothing here at all.
-    const [paying, setPaying] = useState(null);
-    const [cashReceived, setCashReceived] = useState('');
-    const [folioReservation, setFolioReservation] = useState('');
-    const [cardUrl, setCardUrl] = useState('');
-    const [busy, setBusy] = useState(false);
-    // Re-entrancy guard for `settle`, deliberately a ref and not `busy`. `busy`
-    // is for RENDERING (it disables the settle buttons); a second tap arriving
-    // before React has re-rendered would read the pre-click `false` out of the
-    // handler's closure exactly the way `paying` was read above. The ref is
-    // written and read synchronously, so it holds whatever the scheduler does.
-    // It is no longer the last line of defence — the server dedupes on the
-    // attempt key below (AGL-1691) — but it is still the cheap one, and it stops
-    // the redundant round trip rather than merely making it harmless.
-    const inFlight = useRef(false);
+    const registerName = String((_ref1 = (_usableRegisters_find = usableRegisters.find((register)=>register.$id === registerId)) == null ? void 0 : _usableRegisters_find.name) != null ? _ref1 : '');
+    // Who is ringing (AGL-3609): a PIN-switched cashier, and the idle lock.
+    const opsSettings = usePosOpsSettings(hostId);
+    const cashier = usePosCashier({
+        hostId,
+        registerId,
+        autoLockMinutes: opsSettings.autoLockMinutes
+    });
+    // The last completed sale, whose receipt can still be printed (AGL-3609).
+    const [lastReceipt, setLastReceipt] = useState(null);
+    const [context, setContext] = useState(null);
+    // Keyed on the uid, not the user object: a session refresh hands back a
+    // new object for the same person, and re-reading the context on every one
+    // would re-render the register in a loop.
+    const userRef = useRef(user);
+    userRef.current = user;
+    const uid = (_ref2 = user == null ? void 0 : user.uid) != null ? _ref2 : '';
+    useEffect(()=>{
+        const signedIn = userRef.current;
+        if (!signedIn) return;
+        let active = true;
+        posRegisterContext(signedIn, hostId).then((answer)=>{
+            // Only a whole answer: a register that half-knows its tenders would
+            // offer one the server then refuses.
+            if (active && (answer == null ? void 0 : answer.settings) && (answer == null ? void 0 : answer.terminal)) setContext(answer);
+        }).catch(()=>undefined);
+        return ()=>{
+            active = false;
+        };
+    }, [
+        uid,
+        hostId
+    ]);
+    /** The open sale, once the basket has been priced and payment started. */ const [sale, setSale] = useState(null);
+    const [saleLines, setSaleLines] = useState([]);
+    const [opening, setOpening] = useState(false);
+    const [sheetOpen, setSheetOpen] = useState(false);
+    const [pairing, setPairing] = useState(null);
+    const display = usePosDisplay(user, hostId, registerId);
     /**
-   * Idempotency key for ONE settlement attempt (AGL-1691).
-   *
-   * The guards above are all client-side and none of them survives a reload, a
-   * lost response, or a retry. `/api/commerce/pos-order` now dedupes on this
-   * key, but only if the key is right, and the key is the whole design:
-   *
-   * - Minted lazily on the first settle of a basket, NOT per `settle()` call.
-   *   Per-call would defeat the point — two taps would mint two keys and the
-   *   server would see two distinct sales.
-   * - Retired whenever the register's contents change (the effect below),
-   *   which covers the sale completing and clearing the lines. So a cashier
-   *   ringing the same coffee twice gets a NEW key and a real second order —
-   *   de-duplicating that would be a worse bug than the one being fixed.
+   * One key per basket (AGL-1691): minted on the first Charge and retired
+   * whenever the basket changes, so a retried Charge finds the same sale and
+   * ringing the same coffee twice is two sales.
    */ const attemptKey = useRef('');
     useEffect(()=>{
-        // A different basket is a different attempt. Also fires when `settle`
-        // clears the lines, which is what retires a spent key.
         attemptKey.current = '';
     }, [
         lines,
         discountPct
     ]);
-    const [lastReceipt, setLastReceipt] = useState(null);
-    const products = useMemo(()=>// Status, deletion and the search are all the query's (`posProductPlan`).
-        [
+    const products = useMemo(()=>[
             ...productDocs != null ? productDocs : []
         ].map((product)=>_extends({}, CommerceModel.liftLegacyProduct(product), {
                 $id: product.$id
             })), [
         productDocs
     ]);
-    /*
-   * The grid is what the query returned. Re-filtering it by the same text
-   * would narrow it AGAIN and more strictly: the server matches a word prefix
-   * ("cof" finds "Coffee"), the old compare wanted the whole typed string as a
-   * substring, so "flat white" was sent as "flat" and then hidden again by a
-   * row that never contained "flat white". Rows found, then dropped.
-   */ const visible = products;
     const productsById = useMemo(()=>new Map(products.map((product)=>[
                 product.$id,
                 product
             ])), [
         products
     ]);
-    /**
-   * WHAT THE COUNT SAYS, at the line the cashier is looking at (AGL-2357).
-   *
-   * The register ignored `oversellPolicy` entirely — `pos-order.ts` had no
-   * `canPurchase` call — so a merchant who chose "deny" in the product editor
-   * silently got "backorder" at the counter. That silence is the defect.
-   *
-   * WARNS, NEVER BLOCKS (the decision on AGL-2357). Nothing here touches
-   * `disabled` on the settle buttons, and nothing gates `settle`: a till is the
-   * wrong place for a stale number to stop a real sale, because the cashier is
-   * holding the goods. Honouring the policy behind a manager override is the
-   * post-launch shape (AGL-2372).
-   *
-   * Indexed alongside `lines` rather than keyed, because the line list is
-   * rendered by index and two lines of the same product/variant cannot exist —
-   * `addProduct` merges them into one quantity.
-   */ const shortfalls = useMemo(()=>lines.map((line)=>{
+    /** AGL-2357: warns, never blocks. */ const shortfalls = useMemo(()=>lines.map((line)=>{
             var _line_variantId;
             var _product_variants_, _product_variants;
             const product = productsById.get(line.productId);
@@ -272,60 +346,76 @@ const usd = (cents)=>`$${(cents / 100).toFixed(2)}`;
     ]);
     const itemsCents = lines.reduce((sum, line)=>sum + line.unitAmountCents * line.quantity, 0);
     const discountCents = Math.round(itemsCents * discountPct / 100);
-    const dueCents = itemsCents - discountCents;
-    const addProduct = useCallback((product, variant)=>{
-        const pick = variant != null ? variant : product.variants[0];
+    const estimateCents = itemsCents - discountCents;
+    const units = lines.reduce((sum, line)=>sum + line.quantity, 0);
+    const notify = useCallback((message, variant)=>{
+        enqueueSnackbar(message, {
+            variant,
+            persist: false,
+            allowDuplicate: true
+        });
+    }, [
+        enqueueSnackbar
+    ]);
+    /**
+   * Adds a line, or more of an identical one: the same product, variant and
+   * modifiers merge, so two oat lattes are one line of two and an oat latte
+   * beside a whole-milk one stays two lines.
+   */ const addProduct = useCallback((product, variant, modifiers = [], quantity = 1)=>{
+        const next = registerLineFor(product, {
+            variant: variant != null ? variant : product.variants[0],
+            modifiers,
+            quantity
+        });
         setLines((prev)=>{
-            var _pick_options, _pick_options1;
-            const key = `${product.$id}:${pick.id}`;
-            const existing = prev.find((line)=>{
-                var _line_variantId;
-                return `${line.productId}:${(_line_variantId = line.variantId) != null ? _line_variantId : pick.id}` === key;
-            });
+            const existing = prev.find((line)=>lineKey(line) === lineKey(next));
             if (existing) {
                 return prev.map((line)=>line === existing ? _extends({}, line, {
-                        quantity: line.quantity + 1
+                        quantity: Math.min(99, line.quantity + next.quantity)
                     }) : line);
             }
             return [
                 ...prev,
-                _extends({
-                    productId: product.$id
-                }, pick.id !== 'default' ? {
-                    variantId: pick.id
-                } : {}, {
-                    name: product.name
-                }, Object.keys((_pick_options = pick.options) != null ? _pick_options : {}).length ? {
-                    variantLabel: Object.values((_pick_options1 = pick.options) != null ? _pick_options1 : {}).join(' / ')
-                } : {}, {
-                    unitAmountCents: Math.round(Number(pick.priceUsd) * 100),
-                    quantity: 1
-                })
+                next
             ];
         });
     }, []);
+    /** The item sheet: a product to add, or a basket line to change. */ const [itemSheet, setItemSheet] = useState(null);
+    // Every product rung up this sale, so a line can be reopened after the
+    // grid has moved on to another category or search.
+    const productCache = useRef(new Map());
+    const tapProduct = useCallback((product, variant)=>{
+        productCache.current.set(product.$id, product);
+        if (posItemNeedsChoice(product) && !(variant && CommerceModel.productModifierGroups(product).length === 0)) {
+            setItemSheet(_extends({
+                product
+            }, variant ? {
+                initial: {
+                    variantId: variant.id,
+                    quantity: 1
+                }
+            } : {}));
+            return;
+        }
+        addProduct(product, variant);
+    }, [
+        addProduct
+    ]);
+    const basketCounts = useMemo(()=>{
+        var _counts_get;
+        const counts = new Map();
+        for (const line of lines)counts.set(line.productId, ((_counts_get = counts.get(line.productId)) != null ? _counts_get : 0) + line.quantity);
+        return counts;
+    }, [
+        lines
+    ]);
     /**
-   * The barcode wedge: a scanner types the code and presses Enter.
-   *
-   * A LOOKUP against the whole catalog, not a scan of the rows on screen
-   * (AGL-2501). It used to walk `products` — the grid's `limit(500)` window —
-   * so a shop whose catalog was larger than that had items whose barcode
-   * simply did nothing when scanned. At a till, holding the goods, with a
-   * customer waiting.
-   *
-   * `barcodes` and `skus` are top-level arrays the write path flattens out of
-   * `variants`, because Firestore cannot query a field inside an array of
-   * objects. Barcode is tried first: it is what the scanner produced, and a
-   * SKU that happens to equal another product's barcode should not win over
-   * the code actually scanned.
-   *
-   * ⚠️ A MISS NOW SAYS SO. The old loop returned silently, so an unknown code
-   * and a code outside the window were indistinguishable from a scanner that
-   * had not fired — the cashier's only signal was that nothing happened.
-   */ const handleSearchEnter = useCallback(async ()=>{
+   * The barcode wedge: a LOOKUP against the whole catalog (AGL-2501),
+   * barcode first, and a miss says so.
+   */ const lookupCode = useCallback(async (scanned)=>{
         var _product_variants_find;
-        const needle = search.trim().toLowerCase();
-        if (!needle) return;
+        const needle = scanned.trim().toLowerCase();
+        if (!needle || sale) return;
         const lookup = async (field)=>{
             const found = await getDocs(query(collection(firestore, 'hosts', hostId, 'products'), ...listQueryConstraints(posProductPlan({
                 code: {
@@ -341,17 +431,9 @@ const usd = (cents)=>`$${(cents / 100).toFixed(2)}`;
             hit = (_ref = await lookup('barcodes')) != null ? _ref : await lookup('skus');
         } catch (error) {
             console.error(error);
-            return void enqueueSnackbar('Could not reach the catalog — try again', {
-                variant: 'warning',
-                persist: false
-            });
-        }
-        if (!hit) {
-            return void enqueueSnackbar(`No product matches “${search.trim()}”`, {
-                variant: 'warning',
-                persist: false
-            });
+            return void notify('Could not reach the catalog — try again', 'warning');
         }
+        if (!hit) return void notify(`No product matches “${scanned.trim()}”`, 'warning');
         const product = _extends({}, CommerceModel.liftLegacyProduct(hit.data()), {
             $id: hit.id
         });
@@ -359,140 +441,385 @@ const usd = (cents)=>`$${(cents / 100).toFixed(2)}`;
             var _item_barcode, _item_sku;
             return ((_item_barcode = item.barcode) == null ? void 0 : _item_barcode.trim().toLowerCase()) === needle || ((_item_sku = item.sku) == null ? void 0 : _item_sku.trim().toLowerCase()) === needle;
         })) != null ? _product_variants_find : product.variants[0];
-        addProduct(product, variant);
+        // A scanned variant is the variant; a product with modifiers still asks
+        // for them, with that variant already picked.
+        tapProduct(product, variant);
         setSearch('');
     }, [
-        search,
+        sale,
         firestore,
         hostId,
-        addProduct,
-        enqueueSnackbar
+        tapProduct,
+        notify
     ]);
-    /**
-   * Take payment. The tender is an ARGUMENT, never read back out of state
-   * (AGL-1682) — every caller already knows which button was pressed, and the
-   * one caller that had to announce it through `setPaying` first could not
-   * then observe its own write.
-   */ const settle = useCallback(async (tender)=>{
-        if (inFlight.current || lines.length === 0) return;
-        if (!registerId) {
-            return void enqueueSnackbar('Select a register before taking payment', {
-                variant: 'warning',
-                persist: false
-            });
-        }
-        inFlight.current = true;
-        setBusy(true);
-        // Reuse the key across retries of this basket; mint one if this is the
-        // first attempt (AGL-1691). `randomUUID` needs a secure context, which the
-        // console always is, but fall back rather than throw on a settle.
-        if (!attemptKey.current) {
-            var _ref;
-            var _globalThis_crypto_randomUUID, _globalThis_crypto;
-            attemptKey.current = (_ref = (_globalThis_crypto = globalThis.crypto) == null ? void 0 : (_globalThis_crypto_randomUUID = _globalThis_crypto.randomUUID) == null ? void 0 : _globalThis_crypto_randomUUID.call(_globalThis_crypto)) != null ? _ref : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
-        }
+    const handleSearchEnter = useCallback(()=>lookupCode(search), [
+        lookupCode,
+        search
+    ]);
+    // A scanner fired while focus is on a product or a button (AGL-3619), and
+    // the camera; neither while a sale is taking payment or an item is open.
+    useScannerWedge((code)=>void lookupCode(code), !sale && !itemSheet);
+    const scanAdornment = useMemo(()=>/*#__PURE__*/ _jsx(ScanAdornment, {
+            label: "Scan a barcode with the camera",
+            onScan: (code)=>void lookupCode(code)
+        }), [
+        lookupCode
+    ]);
+    /** Prices the basket on the server and opens the sale for payment. */ // A ref, not `opening`: two taps inside one React batch both read the
+    // pre-click state, and only a ref is written before the second reads it
+    // (the AGL-1682 lesson).
+    const chargeInFlight = useRef(false);
+    const charge = useCallback(async ()=>{
+        if (chargeInFlight.current || lines.length === 0 || !user) return;
+        if (!registerId) return void notify('Select a register before taking payment', 'warning');
+        if (!attemptKey.current) attemptKey.current = newAttemptKey();
+        chargeInFlight.current = true;
+        setOpening(true);
         try {
-            var _ref1, _payload_changeCents;
-            var _payload_totals;
-            const response = await authorizedFetch(user, '/api/commerce/pos-order', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Idempotency-Key': attemptKey.current
-                },
-                body: JSON.stringify({
-                    hostId,
-                    lines,
-                    discountPct,
-                    payment: tender,
-                    registerId,
-                    customerEmail: customerEmail || undefined,
-                    locationId: locationId || undefined,
-                    cashReceivedCents: Math.round(Number(cashReceived) * 100) || 0,
-                    reservationId: tender === 'folio' ? folioReservation : undefined
-                })
-            });
-            const payload = await response.json();
-            if (!response.ok) {
-                var _ref2;
-                return void enqueueSnackbar((_ref2 = payload == null ? void 0 : payload.error) != null ? _ref2 : 'Sale failed', {
-                    variant: 'error',
-                    allowDuplicate: true
-                });
-            }
-            if (tender === 'link' && payload.url) {
-                setCardUrl(payload.url);
-                return;
-            }
-            setLastReceipt({
+            const opened = await openPosSale(user, attemptKey.current, _extends({
+                hostId,
+                registerId,
                 lines,
-                totalCents: (_ref1 = (_payload_totals = payload.totals) == null ? void 0 : _payload_totals.totalCents) != null ? _ref1 : dueCents,
-                changeCents: (_payload_changeCents = payload.changeCents) != null ? _payload_changeCents : 0
-            });
-            setLines([]);
-            setDiscountPct(0);
-            setCustomerEmail('');
-            setCashReceived('');
-            setPaying(null);
-            enqueueSnackbar(payload.changeCents > 0 ? `Paid — change ${usd(payload.changeCents)}` : 'Paid', {
-                variant: 'success',
-                persist: false
+                discountPct
+            }, customerEmail ? {
+                customerEmail
+            } : {}, customer ? {
+                customer
+            } : {}, cashier.assertion ? {
+                cashierAssertion: cashier.assertion
+            } : {}, locationId ? {
+                locationId
+            } : {}));
+            setSaleLines(lines);
+            setSale({
+                orderId: opened.orderId,
+                status: 'pending',
+                totalCents: opened.totals.totalCents,
+                paidCents: 0,
+                dueCents: opened.totals.totalCents,
+                tenderableCents: opened.totals.totalCents,
+                tipCents: 0,
+                payments: []
             });
+            setSheetOpen(true);
+        } catch (error) {
+            notify(error instanceof PosRequestError ? error.message : 'Sale failed', 'error');
         } finally{
-            inFlight.current = false;
-            setBusy(false);
+            chargeInFlight.current = false;
+            setOpening(false);
         }
     }, [
         lines,
-        registerId,
         user,
+        registerId,
         hostId,
         discountPct,
         customerEmail,
+        customer,
+        cashier.assertion,
         locationId,
-        cashReceived,
-        folioReservation,
-        dueCents,
-        enqueueSnackbar
+        notify
     ]);
-    /**
-   * Close the card QR dialog. Clears the cart, because by the time this dialog
-   * exists the order is already on the server awaiting the webhook — leaving
-   * the lines behind meant a backdrop click or Escape dropped the cashier back
-   * on a full register that would mint a SECOND pending order and a SECOND
-   * Checkout session for the same basket on the next tap (AGL-1682). `Done`
-   * always did this; `onClose` did not, and only `onClose` can fire by
-   * accident.
-   */ const closeCardDialog = useCallback(()=>{
-        setCardUrl('');
+    const resetSale = useCallback(()=>{
+        if ((sale == null ? void 0 : sale.status) === 'paid') setLastReceipt({
+            orderId: sale.orderId
+        });
+        setSale(null);
+        setSaleLines([]);
         setLines([]);
-        setPaying(null);
-    }, []);
-    const printReceipt = useCallback(()=>{
-        if (!lastReceipt) return;
-        const win = window.open('', '_blank', 'width=320,height=600');
-        if (!win) return;
-        // ESCAPED (AGL-2283), the same construction as the packing slip: a
-        // `document.write` into an `about:blank` popup that inherits the console's
-        // origin. These names are merchant-authored rather than shopper-typed, so
-        // the reach is a merchant's own session — still not a reason to build
-        // markup out of unescaped product text.
-        win.document.write(`<pre style="font-family:monospace;font-size:12px">` + lastReceipt.lines.map((line)=>`${escapeHtml(line.quantity)}x ${escapeHtml(line.name)}${line.variantLabel ? ` (${escapeHtml(line.variantLabel)})` : ''}` + `  ${usd(line.unitAmountCents * line.quantity)}`).join('\n') + `\n\nTOTAL  ${usd(lastReceipt.totalCents)}` + (lastReceipt.changeCents ? `\nCHANGE ${usd(lastReceipt.changeCents)}` : '') + `\n${new Date().toLocaleString()}` + `</pre>`);
-        win.document.close();
-        // Print from HERE, not from a `<script>` written into the receipt
-        // (AGL-523). `window.open('')` yields an about:blank document that
-        // INHERITS the opener's CSP, so an injected inline script has no nonce and
-        // `strict-dynamic` means `'self'` will not save it either. Under the
-        // enforcing policy that script is blocked, the receipt window opens, and
-        // the print dialog never appears — a silent break of the one action the
-        // window exists for.
-        //
-        // This call is in the opener, whose script Next has already nonced.
-        win.focus();
-        win.print();
+        setDiscountPct(0);
+        setCustomer(null);
+        setSheetOpen(false);
     }, [
-        lastReceipt
+        sale
     ]);
+    // The customer display mirrors the basket while nothing else is on it.
+    const mirrored = sale ? saleLines : lines;
+    // Whether the display was last left showing a basket. A paid sale leaves it
+    // on the thank-you the server wrote, which an empty new basket must not
+    // cut short with the idle screen; the next item added takes it over.
+    // True at first, so a register that opens empty clears whatever a previous
+    // session left on the screen.
+    const displayShowsBasket = useRef(true);
+    // The tip picked for the payment about to be taken; the ledger has it only
+    // once that payment is recorded. Gone with the sale.
+    const [pendingTipCents, setPendingTipCents] = useState(0);
+    useEffect(()=>{
+        if (!sale || sale.status === 'paid') setPendingTipCents(0);
+    }, [
+        sale
+    ]);
+    useEffect(()=>{
+        if ((sale == null ? void 0 : sale.status) === 'paid') displayShowsBasket.current = false;
+    }, [
+        sale == null ? void 0 : sale.status
+    ]);
+    useEffect(()=>{
+        if (!display.connected || display.asking) return;
+        if (sale == null ? void 0 : sale.payments.some((payment)=>payment.status === 'pending' && payment.method === 'card_present')) {
+            return;
+        }
+        if ((sale == null ? void 0 : sale.status) === 'paid') return;
+        if (!mirrored.length && !displayShowsBasket.current) return;
+        const timer = setTimeout(()=>{
+            displayShowsBasket.current = mirrored.length > 0;
+            void display.show(mirrored.length ? {
+                mode: 'cart',
+                cart: _extends({
+                    lines: mirrored.map((line)=>_extends({
+                            name: line.name
+                        }, line.variantLabel ? {
+                            variantLabel: line.variantLabel
+                        } : {}, {
+                            quantity: line.quantity,
+                            amountCents: line.unitAmountCents * line.quantity
+                        })),
+                    itemsCents,
+                    discountCents,
+                    taxCents: sale ? Math.max(0, sale.totalCents - estimateCents) : 0,
+                    totalCents: sale ? sale.totalCents : estimateCents
+                }, sale ? {
+                    paidCents: sale.paidCents,
+                    dueCents: sale.dueCents,
+                    tipCents: posDisplayTipCents(sale, pendingTipCents)
+                } : {})
+            } : {
+                mode: 'idle'
+            });
+        }, 400);
+        return ()=>clearTimeout(timer);
+    }, [
+        display,
+        mirrored,
+        sale,
+        itemsCents,
+        discountCents,
+        estimateCents,
+        pendingTipCents
+    ]);
+    const registerPicker = !planReady ? /*#__PURE__*/ _jsx(Typography, {
+        variant: "body2",
+        color: "text.secondary",
+        children: 'Checking your plan…'
+    }) : usableRegisters.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+        variant: "body2",
+        color: "warning.main",
+        children: registers.length > 0 ? 'Your registers exceed your plan — remove extras or upgrade in Billing to take payments.' : 'No POS register yet. Add one under Commerce → Settings → POS registers before taking payments.'
+    }) : usableRegisters.length > 1 ? /*#__PURE__*/ _jsx(TextField, {
+        label: "Register",
+        value: registerId,
+        onChange: (event)=>setRegisterId(event.target.value),
+        size: "small",
+        select: true,
+        disabled: Boolean(sale),
+        children: usableRegisters.map((register)=>/*#__PURE__*/ _jsx(MenuItem, {
+                value: register.$id,
+                children: register.name
+            }, register.$id))
+    }) : /*#__PURE__*/ _jsx(Typography, {
+        variant: "body2",
+        color: "text.secondary",
+        children: (_usableRegisters_ = usableRegisters[0]) == null ? void 0 : _usableRegisters_.name
+    });
+    /**
+   * On a narrow screen the register's bar owns the bottom edge, so it moves
+   * the console's floating launchers clear of itself through the shell's
+   * `--aglyn-dock-inset-bottom` seam; a launcher left in the corner sat on
+   * top of Charge.
+   */ const bottomBarRef = useRef(null);
+    useEffect(()=>{
+        const node = bottomBarRef.current;
+        if (wide || !node) return undefined;
+        const root = document.documentElement;
+        const property = '--aglyn-dock-inset-bottom';
+        const publish = ()=>{
+            root.style.setProperty(property, `${Math.round(node.getBoundingClientRect().height) + 20}px`);
+        };
+        publish();
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(publish);
+        observer == null ? void 0 : observer.observe(node);
+        return ()=>{
+            observer == null ? void 0 : observer.disconnect();
+            root.style.removeProperty(property);
+        };
+    }, [
+        wide
+    ]);
+    const registerPanel = /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1.5,
+        sx: {
+            minHeight: 0,
+            flex: 1
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h6",
+                        sx: {
+                            flex: 1
+                        },
+                        children: 'Register'
+                    }),
+                    registerId ? /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        onClick: async ()=>{
+                            try {
+                                setPairing(await display.pairingCode());
+                            } catch (error) {
+                                notify(error instanceof PosRequestError ? error.message : 'Could not make a code', 'error');
+                            }
+                        },
+                        children: display.connected ? 'Display connected' : 'Pair display'
+                    }) : null
+                ]
+            }),
+            registerPicker,
+            ((_ref3 = locationDocs == null ? void 0 : locationDocs.length) != null ? _ref3 : 0) > 1 ? /*#__PURE__*/ _jsx(TextField, {
+                label: "Location",
+                value: locationId,
+                onChange: (event)=>setLocationId(event.target.value),
+                size: "small",
+                select: true,
+                disabled: Boolean(sale),
+                children: (locationDocs != null ? locationDocs : []).map((location)=>/*#__PURE__*/ _jsx(MenuItem, {
+                        value: location.$id,
+                        children: location.name
+                    }, location.$id))
+            }) : null,
+            registerId ? /*#__PURE__*/ _jsx(PosOperationsBar, _extends({
+                hostId: hostId,
+                registerId: registerId
+            }, registerName ? {
+                registerName
+            } : {}, {
+                cashier: cashier,
+                onExchange: (returned)=>{
+                    var _returned_name;
+                    return setCustomer(returned.email || returned.name ? {
+                        kind: 'none',
+                        id: '',
+                        name: (_returned_name = returned.name) != null ? _returned_name : '',
+                        email: returned.email,
+                        phone: null
+                    } : null);
+                }
+            })) : null,
+            /*#__PURE__*/ _jsx(PosCartPanel, {
+                lines: sale ? saleLines : lines,
+                shortfalls: sale ? [] : shortfalls,
+                onQuantity: (index, quantity)=>setLines((prev)=>quantity <= 0 ? prev.filter((_line, at)=>at !== index) : prev.map((line, at)=>at === index ? _extends({}, line, {
+                                quantity: Math.min(99, quantity)
+                            }) : line)),
+                onRemove: (index)=>setLines((prev)=>prev.filter((_line, at)=>at !== index)),
+                onEdit: (index)=>{
+                    var _productCache_current_get;
+                    const line = lines[index];
+                    const product = line ? (_productCache_current_get = productCache.current.get(line.productId)) != null ? _productCache_current_get : productsById.get(line.productId) : undefined;
+                    if (!line || !product) return;
+                    setItemSheet({
+                        product,
+                        editIndex: index,
+                        initial: _extends({}, line.variantId ? {
+                            variantId: line.variantId
+                        } : {}, line.modifiers ? {
+                            modifiers: line.modifiers
+                        } : {}, {
+                            quantity: line.quantity
+                        })
+                    });
+                },
+                discountPct: discountPct,
+                onDiscountPct: setDiscountPct,
+                customer: sale ? null : /*#__PURE__*/ _jsx(PosCustomerLookup, {
+                    hostId: hostId,
+                    value: customer,
+                    onChange: setCustomer
+                }),
+                locked: Boolean(sale)
+            }),
+            sale && user ? sale.status === 'paid' ? /*#__PURE__*/ _jsx(PosReceiptPanel, _extends({
+                user: user,
+                hostId: hostId,
+                sale: sale,
+                context: context,
+                display: display,
+                onNewSale: resetSale,
+                registerId: registerId
+            }, registerName ? {
+                registerName
+            } : {}, cashier.cashier ? {
+                cashierName: cashier.cashier.name
+            } : {}, {
+                notify: notify
+            })) : /*#__PURE__*/ _jsx(PosTenderPanel, _extends({
+                user: user,
+                hostId: hostId,
+                registerId: registerId,
+                sale: sale,
+                context: context,
+                stays: openStays,
+                display: display,
+                onSale: setSale,
+                onVoided: ()=>{
+                    setSale(null);
+                    setSaleLines([]);
+                },
+                onTipChange: setPendingTipCents
+            }, cashier.assertion ? {
+                cashierAssertion: cashier.assertion
+            } : {}, {
+                notify: notify
+            })) : /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            display: 'flex',
+                            justifyContent: 'space-between'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "h6",
+                                children: 'Due'
+                            }),
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "h6",
+                                children: usd(estimateCents)
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        color: "text.secondary",
+                        children: 'Tax is added when you charge.'
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        size: "large",
+                        disabled: opening || lines.length === 0 || !registerId,
+                        onClick: ()=>void charge(),
+                        sx: {
+                            minHeight: 56
+                        },
+                        children: opening ? 'Pricing…' : `Charge ${usd(estimateCents)}`
+                    }),
+                    lastReceipt ? /*#__PURE__*/ _jsx(PosLastReceipt, _extends({
+                        hostId: hostId,
+                        orderId: lastReceipt.orderId
+                    }, registerName ? {
+                        registerName
+                    } : {}, cashier.cashier ? {
+                        cashierName: cashier.cashier.name
+                    } : {})) : null
+                ]
+            })
+        ]
+    });
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(NextPageTitle, {
@@ -501,407 +828,156 @@ const usd = (cents)=>`$${(cents / 100).toFixed(2)}`;
             /*#__PURE__*/ _jsxs(Box, {
                 sx: {
                     display: 'flex',
-                    height: '100vh',
+                    height: '100dvh',
                     overflow: 'hidden'
                 },
                 children: [
-                    /*#__PURE__*/ _jsxs(Box, {
+                    /*#__PURE__*/ _jsx(Box, {
                         sx: {
                             flex: 1,
                             p: 2,
-                            overflowY: 'auto'
+                            overflowY: 'auto',
+                            pb: wide ? 2 : 12
                         },
-                        children: [
-                            /*#__PURE__*/ _jsx(TextField, {
-                                placeholder: "Search or scan barcode…",
-                                value: search,
-                                onChange: (event)=>setSearch(event.target.value),
-                                onKeyDown: (event)=>{
-                                    if (event.key === 'Enter') void handleSearchEnter();
-                                },
-                                size: "small",
-                                fullWidth: true,
-                                autoFocus: true,
-                                sx: {
-                                    mb: 2
-                                }
+                        children: /*#__PURE__*/ _jsx(PosProductGrid, {
+                            search: search,
+                            onSearch: setSearch,
+                            onSearchEnter: ()=>void handleSearchEnter(),
+                            scanAdornment: scanAdornment,
+                            categories: (categoryDocs != null ? categoryDocs : []).map((category)=>{
+                                var _category_name;
+                                return {
+                                    $id: category.$id,
+                                    name: String((_category_name = category.name) != null ? _category_name : 'Category')
+                                };
                             }),
-                            /*#__PURE__*/ _jsx(Box, {
-                                sx: {
-                                    mb: gridPlan.notices.length ? 2 : 0
-                                },
-                                children: /*#__PURE__*/ _jsx(ListQueryNotices, {
-                                    refused: [],
-                                    notices: gridPlan.notices
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Box, {
-                                sx: {
-                                    display: 'grid',
-                                    gap: 1.5,
-                                    gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))'
-                                },
-                                children: visible.map((product)=>{
-                                    var _ref;
-                                    var _product_variants_;
-                                    return /*#__PURE__*/ _jsxs(Card, {
-                                        variant: "outlined",
-                                        children: [
-                                            /*#__PURE__*/ _jsxs(CardActionArea, {
-                                                onClick: ()=>addProduct(product),
-                                                sx: {
-                                                    p: 1.5,
-                                                    minHeight: 88
-                                                },
-                                                children: [
-                                                    /*#__PURE__*/ _jsx(Typography, {
-                                                        variant: "body2",
-                                                        sx: {
-                                                            fontWeight: 600
-                                                        },
-                                                        noWrap: true,
-                                                        children: product.name
-                                                    }),
-                                                    /*#__PURE__*/ _jsxs(Typography, {
-                                                        variant: "caption",
-                                                        color: "text.secondary",
-                                                        children: [
-                                                            `$${(_ref = (_product_variants_ = product.variants[0]) == null ? void 0 : _product_variants_.priceUsd) != null ? _ref : 0}`,
-                                                            product.variants.length > 1 ? ` · ${product.variants.length} variants` : ''
-                                                        ]
-                                                    })
-                                                ]
-                                            }),
-                                            product.variants.length > 1 ? /*#__PURE__*/ _jsx(Box, {
-                                                sx: {
-                                                    display: 'flex',
-                                                    flexWrap: 'wrap',
-                                                    gap: 0.5,
-                                                    p: 0.5
-                                                },
-                                                children: product.variants.slice(0, 6).map((variant)=>{
-                                                    var _variant_options;
-                                                    return /*#__PURE__*/ _jsx(Chip, {
-                                                        label: Object.values((_variant_options = variant.options) != null ? _variant_options : {}).join('/') || 'Default',
-                                                        size: "small",
-                                                        onClick: ()=>addProduct(product, variant)
-                                                    }, variant.id);
-                                                })
-                                            }) : null
-                                        ]
-                                    }, product.$id);
-                                })
-                            })
-                        ]
+                            categoryId: categoryId,
+                            onCategory: setCategoryId,
+                            notices: gridPlan.notices,
+                            hostId: hostId,
+                            products: products,
+                            basketCounts: basketCounts,
+                            onTap: (product)=>{
+                                if (sale) return void notify('Finish or void the open sale first', 'info');
+                                tapProduct(product);
+                            }
+                        })
                     }),
-                    /*#__PURE__*/ _jsxs(Box, {
+                    wide ? /*#__PURE__*/ _jsx(Box, {
                         sx: {
-                            width: 380,
+                            width: {
+                                md: 400,
+                                lg: 440
+                            },
                             borderLeft: 1,
                             borderColor: 'divider',
                             display: 'flex',
                             flexDirection: 'column',
                             p: 2,
-                            gap: 1
+                            overflowY: 'auto'
+                        },
+                        children: registerPanel
+                    }) : null
+                ]
+            }),
+            !wide ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsxs(Box, {
+                        ref: bottomBarRef,
+                        sx: {
+                            position: 'fixed',
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            p: 1.5,
+                            bgcolor: 'background.paper',
+                            borderTop: 1,
+                            borderColor: 'divider',
+                            display: 'flex',
+                            gap: 1,
+                            alignItems: 'center',
+                            zIndex: theme.zIndex.appBar
                         },
                         children: [
+                            /*#__PURE__*/ _jsx(Badge, {
+                                badgeContent: units,
+                                color: "primary",
+                                children: /*#__PURE__*/ _jsx(Button, {
+                                    variant: "outlined",
+                                    onClick: ()=>setSheetOpen(true),
+                                    sx: {
+                                        minHeight: POS_TOUCH_PX
+                                    },
+                                    children: sale ? 'Payment' : 'Cart'
+                                })
+                            }),
                             /*#__PURE__*/ _jsx(Typography, {
                                 variant: "h6",
-                                children: 'Register'
-                            }),
-                            !planReady ? /*#__PURE__*/ _jsx(Typography, {
-                                variant: "body2",
-                                color: "text.secondary",
-                                children: 'Checking your plan…'
-                            }) : usableRegisters.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
-                                variant: "body2",
-                                color: "warning.main",
-                                children: registers.length > 0 ? 'Your registers exceed your plan — remove extras or ' + 'upgrade in Billing to take payments.' : 'No POS register yet. Add one under Commerce → Settings → ' + 'POS registers before taking payments.'
-                            }) : usableRegisters.length > 1 ? /*#__PURE__*/ _jsx(TextField, {
-                                label: "Register",
-                                value: registerId,
-                                onChange: (event)=>setRegisterId(event.target.value),
-                                size: "small",
-                                select: true,
-                                children: usableRegisters.map((register)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                        value: register.$id,
-                                        children: register.name
-                                    }, register.$id))
-                            }) : /*#__PURE__*/ _jsx(Typography, {
-                                variant: "body2",
-                                color: "text.secondary",
-                                children: (_usableRegisters_ = usableRegisters[0]) == null ? void 0 : _usableRegisters_.name
-                            }),
-                            ((_ref = locationDocs == null ? void 0 : locationDocs.length) != null ? _ref : 0) > 1 ? /*#__PURE__*/ _jsx(TextField, {
-                                label: "Location",
-                                value: locationId,
-                                onChange: (event)=>setLocationId(event.target.value),
-                                size: "small",
-                                select: true,
-                                children: (locationDocs != null ? locationDocs : []).map((location)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                        value: location.$id,
-                                        children: location.name
-                                    }, location.$id))
-                            }) : null,
-                            /*#__PURE__*/ _jsx(Box, {
                                 sx: {
                                     flex: 1,
-                                    overflowY: 'auto'
+                                    textAlign: 'right'
                                 },
-                                children: lines.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
-                                    variant: "body2",
-                                    color: "text.secondary",
-                                    children: 'Tap products to add them.'
-                                }) : lines.map((line, index)=>{
-                                    var _shortfalls_index;
-                                    return /*#__PURE__*/ _jsxs(Box, {
-                                        sx: {
-                                            py: 0.5
-                                        },
-                                        children: [
-                                            /*#__PURE__*/ _jsxs(Stack, {
-                                                direction: "row",
-                                                spacing: 1,
-                                                sx: {
-                                                    alignItems: 'center'
-                                                },
-                                                children: [
-                                                    /*#__PURE__*/ _jsxs(Typography, {
-                                                        variant: "body2",
-                                                        sx: {
-                                                            flex: 1
-                                                        },
-                                                        noWrap: true,
-                                                        children: [
-                                                            `${line.quantity}× ${line.name}`,
-                                                            line.variantLabel ? ` (${line.variantLabel})` : ''
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ _jsx(Typography, {
-                                                        variant: "body2",
-                                                        children: usd(line.unitAmountCents * line.quantity)
-                                                    }),
-                                                    /*#__PURE__*/ _jsx(Button, {
-                                                        size: "small",
-                                                        color: "error",
-                                                        onClick: ()=>setLines((prev)=>prev.filter((_item, itemIndex)=>itemIndex !== index)),
-                                                        children: '✕'
-                                                    })
-                                                ]
-                                            }),
-                                            shortfalls[index] ? // AGL-2357: said, not enforced. The cashier reads it and
-                                            // rings the sale through — the settle buttons below are
-                                            // untouched by this.
-                                            /*#__PURE__*/ _jsx(Typography, {
-                                                variant: "caption",
-                                                color: "warning.main",
-                                                children: `Only ${(_shortfalls_index = shortfalls[index]) == null ? void 0 : _shortfalls_index.available} in stock — selling ${line.quantity}`
-                                            }) : null
-                                        ]
-                                    }, index);
-                                })
-                            }),
-                            /*#__PURE__*/ _jsxs(Stack, {
-                                direction: "row",
-                                spacing: 1,
-                                children: [
-                                    /*#__PURE__*/ _jsx(TextField, {
-                                        label: "Discount %",
-                                        value: discountPct || '',
-                                        onChange: (event)=>setDiscountPct(Math.min(100, Math.max(0, Number(event.target.value) || 0))),
-                                        size: "small",
-                                        sx: {
-                                            width: 110
-                                        },
-                                        slotProps: {
-                                            htmlInput: {
-                                                inputMode: 'numeric'
-                                            }
-                                        }
-                                    }),
-                                    /*#__PURE__*/ _jsx(TextField, {
-                                        label: "Customer email",
-                                        value: customerEmail,
-                                        onChange: (event)=>setCustomerEmail(event.target.value),
-                                        size: "small",
-                                        sx: {
-                                            flex: 1
-                                        }
-                                    })
-                                ]
+                                children: usd(sale ? sale.dueCents : estimateCents)
                             }),
-                            /*#__PURE__*/ _jsxs(Box, {
+                            !sale ? /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                disabled: opening || lines.length === 0 || !registerId,
+                                onClick: ()=>void charge(),
                                 sx: {
-                                    display: 'flex',
-                                    justifyContent: 'space-between'
+                                    minHeight: POS_TOUCH_PX
                                 },
-                                children: [
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "h6",
-                                        children: 'Due'
-                                    }),
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "h6",
-                                        children: usd(dueCents)
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsxs(Stack, {
-                                direction: "row",
-                                spacing: 1,
-                                children: [
-                                    /*#__PURE__*/ _jsx(Button, {
-                                        variant: "contained",
-                                        color: "primary",
-                                        disabled: lines.length === 0,
-                                        onClick: ()=>setPaying('cash'),
-                                        sx: {
-                                            flex: 1
-                                        },
-                                        children: 'Cash'
-                                    }),
-                                    /*#__PURE__*/ _jsx(Button, {
-                                        variant: "contained",
-                                        disabled: busy || lines.length === 0,
-                                        onClick: ()=>void settle('link'),
-                                        sx: {
-                                            flex: 1
-                                        },
-                                        children: 'Card (QR)'
-                                    }),
-                                    /*#__PURE__*/ _jsx(Button, {
-                                        variant: "outlined",
-                                        disabled: lines.length === 0 || openStays.length === 0,
-                                        onClick: ()=>setPaying('folio'),
-                                        sx: {
-                                            flex: 1
-                                        },
-                                        children: 'Room'
-                                    })
-                                ]
-                            }),
-                            lastReceipt ? /*#__PURE__*/ _jsx(Button, {
-                                size: "small",
-                                onClick: printReceipt,
-                                children: 'Print last receipt'
+                                children: 'Charge'
                             }) : null
                         ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsxs(Dialog, {
-                open: paying === 'cash',
-                onClose: ()=>setPaying(null),
-                maxWidth: "xs",
-                fullWidth: true,
-                children: [
-                    /*#__PURE__*/ _jsx(DialogTitle, {
-                        children: `Cash — due ${usd(dueCents)}`
                     }),
-                    /*#__PURE__*/ _jsxs(DialogContent, {
-                        sx: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 2
-                        },
-                        children: [
-                            /*#__PURE__*/ _jsx(TextField, {
-                                label: "Cash received ($)",
-                                value: cashReceived,
-                                onChange: (event)=>setCashReceived(event.target.value.replace(/[^0-9.]/g, '')),
-                                size: "small",
-                                autoFocus: true,
+                    /*#__PURE__*/ _jsx(Drawer, {
+                        anchor: "bottom",
+                        open: sheetOpen,
+                        onClose: ()=>setSheetOpen(false),
+                        slotProps: {
+                            paper: {
                                 sx: {
-                                    mt: 1
-                                },
-                                slotProps: {
-                                    htmlInput: {
-                                        inputMode: 'decimal'
-                                    }
+                                    maxHeight: '90dvh',
+                                    p: 2,
+                                    borderTopLeftRadius: 16,
+                                    borderTopRightRadius: 16
                                 }
-                            }),
-                            Number(cashReceived) * 100 >= dueCents && cashReceived ? /*#__PURE__*/ _jsx(Alert, {
-                                severity: "success",
-                                children: `Change: ${usd(Math.round(Number(cashReceived) * 100) - dueCents)}`
-                            }) : null
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsxs(DialogActions, {
-                        children: [
-                            /*#__PURE__*/ _jsx(Button, {
-                                onClick: ()=>setPaying(null),
-                                children: 'Cancel'
-                            }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                variant: "contained",
-                                color: "primary",
-                                disabled: busy || Math.round(Number(cashReceived) * 100) < dueCents,
-                                // `onClick={settle}` would hand MUI's click event to `tender`.
-                                onClick: ()=>void settle('cash'),
-                                children: 'Complete sale'
-                            })
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsxs(Dialog, {
-                open: paying === 'folio',
-                onClose: ()=>setPaying(null),
-                maxWidth: "xs",
-                fullWidth: true,
-                children: [
-                    /*#__PURE__*/ _jsx(DialogTitle, {
-                        children: `Charge to room — ${usd(dueCents)}`
-                    }),
-                    /*#__PURE__*/ _jsx(DialogContent, {
-                        sx: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 2
+                            }
                         },
-                        children: /*#__PURE__*/ _jsx(TextField, {
-                            label: "Checked-in stay",
-                            value: folioReservation,
-                            onChange: (event)=>setFolioReservation(event.target.value),
-                            size: "small",
-                            select: true,
-                            sx: {
-                                mt: 1
-                            },
-                            children: openStays.map((stay)=>{
-                                var _ref, _stay_guestName;
-                                return /*#__PURE__*/ _jsx(MenuItem, {
-                                    value: stay.$id,
-                                    children: (_ref = (_stay_guestName = stay.guestName) != null ? _stay_guestName : stay.guestEmail) != null ? _ref : stay.$id
-                                }, stay.$id);
-                            })
-                        })
-                    }),
-                    /*#__PURE__*/ _jsxs(DialogActions, {
-                        children: [
-                            /*#__PURE__*/ _jsx(Button, {
-                                onClick: ()=>setPaying(null),
-                                children: 'Cancel'
-                            }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                variant: "contained",
-                                color: "primary",
-                                disabled: busy || !folioReservation,
-                                onClick: ()=>void settle('folio'),
-                                children: 'Charge folio'
-                            })
-                        ]
+                        children: registerPanel
                     })
                 ]
-            }),
+            }) : null,
+            /*#__PURE__*/ _jsx(PosItemDialog, _extends({
+                product: (_ref4 = itemSheet == null ? void 0 : itemSheet.product) != null ? _ref4 : null,
+                initial: itemSheet == null ? void 0 : itemSheet.initial,
+                onClose: ()=>setItemSheet(null),
+                onConfirm: (choice)=>{
+                    const sheet = itemSheet;
+                    setItemSheet(null);
+                    if (!sheet) return;
+                    if (sheet.editIndex === undefined) {
+                        addProduct(sheet.product, choice.variant, choice.modifiers, choice.quantity);
+                        return;
+                    }
+                    const at = sheet.editIndex;
+                    setLines((prev)=>prev.map((line, index)=>index === at ? registerLineFor(sheet.product, choice) : line));
+                }
+            }, (itemSheet == null ? void 0 : itemSheet.editIndex) !== undefined ? {
+                onRemove: ()=>{
+                    const at = itemSheet.editIndex;
+                    setItemSheet(null);
+                    setLines((prev)=>prev.filter((_line, index)=>index !== at));
+                }
+            } : {})),
             /*#__PURE__*/ _jsxs(Dialog, {
-                open: Boolean(cardUrl),
-                onClose: closeCardDialog,
+                open: Boolean(pairing),
+                onClose: ()=>setPairing(null),
                 maxWidth: "xs",
                 fullWidth: true,
                 children: [
                     /*#__PURE__*/ _jsx(DialogTitle, {
-                        children: 'Customer pays by card'
+                        children: 'Pair a customer display'
                     }),
                     /*#__PURE__*/ _jsxs(DialogContent, {
                         sx: {
@@ -916,33 +992,29 @@ const usd = (cents)=>`$${(cents / 100).toFixed(2)}`;
                                 sx: {
                                     mt: 1
                                 },
-                                children: 'Show this QR (or open the link on the customer display); the ' + 'order completes automatically once paid. Stripe Terminal ' + 'readers can replace this step later.'
+                                children: 'On the tablet facing your customer, open this address and enter the code. ' + 'The code works once and expires in 10 minutes.'
                             }),
-                            /*#__PURE__*/ _jsx(Box, {
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "body1",
                                 sx: {
-                                    display: 'flex',
-                                    justifyContent: 'center'
+                                    wordBreak: 'break-all'
                                 },
-                                children: /*#__PURE__*/ _jsx(QRCodeSVG, {
-                                    value: cardUrl,
-                                    size: 256,
-                                    level: "L",
-                                    marginSize: 4,
-                                    title: "Payment QR",
-                                    role: "img"
-                                })
+                                children: `${typeof window === 'undefined' ? '' : window.location.origin}/kiosk/commerce/pos-display`
                             }),
-                            /*#__PURE__*/ _jsx(Button, {
-                                size: "small",
-                                href: cardUrl,
-                                target: "_blank",
-                                children: 'Open payment page'
+                            /*#__PURE__*/ _jsx(Typography, {
+                                variant: "h3",
+                                component: "p",
+                                sx: {
+                                    textAlign: 'center',
+                                    letterSpacing: 8
+                                },
+                                children: pairing == null ? void 0 : pairing.code
                             })
                         ]
                     }),
                     /*#__PURE__*/ _jsx(DialogActions, {
                         children: /*#__PURE__*/ _jsx(Button, {
-                            onClick: closeCardDialog,
+                            onClick: ()=>setPairing(null),
                             children: 'Done'
                         })
                     })