@classytic/pos-ui 0.1.0

package/dist/dashboard/components/cart/CustomerSection.js

@@ -0,0 +1,127 @@
+"use client";
+
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Loader2, ScanLine, UserSearch, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { getReceiptLocale } from "@classytic/commerce-sdk/client";
+import { Input } from "@/components/ui/input";
+
+//#region src/dashboard/components/cart/CustomerSection.tsx
+function CustomerSection({ selected, name, phone, membershipCardId, membershipStatus, tierName, tierColor, tierTextColor, onNameChange, onPhoneChange, onMembershipChange, onMembershipLookup, onClear, onOpenLookup }) {
+	const membershipBadge = membershipStatus === "found" ? "Member found" : membershipStatus === "not_found" ? "Not found" : membershipStatus === "searching" ? "Searching..." : "";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-sm font-medium",
+				children: "Customer"
+			}), selected && /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size: "sm",
+				className: "h-7 px-2",
+				onClick: onClear,
+				children: [/* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5 mr-1" }), "Clear"]
+			})]
+		}), selected ? /* @__PURE__ */ jsxs("div", {
+			className: "rounded-lg border bg-muted/30 p-3",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+						className: "text-sm font-semibold",
+						children: selected.displayName || selected.fullName || "Customer"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-xs text-muted-foreground",
+						children: selected.contact?.phone
+					})] }), (tierName || selected.revenueTier) && /* @__PURE__ */ jsx(Badge, {
+						variant: "secondary",
+						className: "capitalize",
+						style: tierColor ? {
+							backgroundColor: tierColor,
+							color: tierTextColor || "#111827",
+							borderColor: "transparent"
+						} : void 0,
+						children: tierName || selected.revenueTier
+					})]
+				}),
+				selected.stats?.orders?.total != null && /* @__PURE__ */ jsxs("p", {
+					className: "text-xs text-muted-foreground mt-2",
+					children: ["Orders: ", selected.stats.orders.total]
+				}),
+				selected.membership?.cardId && /* @__PURE__ */ jsxs("p", {
+					className: "text-xs text-muted-foreground mt-1",
+					children: [
+						"Card: ",
+						selected.membership.cardId,
+						selected.membership?.tier ? ` • ${selected.membership.tier}` : ""
+					]
+				})
+			]
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				className: "w-full h-10 justify-between",
+				onClick: onOpenLookup,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm text-muted-foreground",
+					children: "Find customer"
+				}), /* @__PURE__ */ jsx(UserSearch, { className: "h-4 w-4 text-muted-foreground" })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "relative flex-1",
+						children: [/* @__PURE__ */ jsx(ScanLine, {
+							className: "pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground",
+							"aria-hidden": true
+						}), /* @__PURE__ */ jsx(Input, {
+							"aria-label": "Scan loyalty card",
+							placeholder: "Scan card or type ID",
+							className: "pl-8",
+							value: membershipCardId,
+							disabled: membershipStatus === "searching",
+							onChange: (e) => onMembershipChange(e.target.value),
+							onKeyDown: (e) => {
+								if (e.key === "Enter") {
+									e.preventDefault();
+									onMembershipLookup();
+								}
+							}
+						})]
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						onClick: onMembershipLookup,
+						disabled: membershipStatus === "searching" || !membershipCardId.trim(),
+						children: membershipStatus === "searching" ? /* @__PURE__ */ jsx(Loader2, {
+							className: "h-4 w-4 animate-spin",
+							"aria-label": "Looking up card"
+						}) : "Lookup"
+					})]
+				}), membershipBadge && /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted-foreground",
+					children: membershipBadge
+				})]
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				placeholder: "Customer name (optional)",
+				value: name,
+				onChange: (e) => onNameChange(e.target.value)
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				placeholder: `Phone (${getReceiptLocale().phonePlaceholder})`,
+				inputMode: "numeric",
+				value: phone,
+				onChange: (e) => onPhoneChange(e.target.value)
+			})
+		] })]
+	});
+}
+
+//#endregion
+export { CustomerSection };

package/dist/dashboard/components/cart/DiscountSection.js

@@ -0,0 +1,50 @@
+"use client";
+
+import { cn } from "../../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Lock, ShieldCheck, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+
+//#region src/dashboard/components/cart/DiscountSection.tsx
+function DiscountSection({ value, onChange, isAuthorized, authorizedByName, onRequestAuth, onClearAuth }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-sm font-medium",
+				children: "Discount"
+			}), isAuthorized && authorizedByName && /* @__PURE__ */ jsxs(Badge, {
+				variant: "outline",
+				className: "text-xs gap-1 text-green-600 border-green-200 bg-green-50",
+				children: [
+					/* @__PURE__ */ jsx(ShieldCheck, { className: "h-3 w-3" }),
+					authorizedByName,
+					onClearAuth && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onClearAuth,
+						className: "ml-1 hover:text-red-500 transition-colors",
+						"aria-label": "Clear authorization",
+						children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+					})
+				]
+			})]
+		}), isAuthorized ? /* @__PURE__ */ jsx(Input, {
+			placeholder: "Discount (BDT)",
+			inputMode: "numeric",
+			value,
+			onChange: (e) => onChange(e.target.value)
+		}) : /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "outline",
+			className: cn("w-full justify-start text-muted-foreground font-normal h-10", "hover:border-amber-300 hover:bg-amber-50/50"),
+			onClick: onRequestAuth,
+			children: [/* @__PURE__ */ jsx(Lock, { className: "h-4 w-4 mr-2 text-amber-500" }), "Manager authorization required"]
+		})]
+	});
+}
+
+//#endregion
+export { DiscountSection };

package/dist/dashboard/components/cart/PointsRedemptionSection.js

@@ -0,0 +1,58 @@
+"use client";
+
+import { formatBdt } from "../../../lib/money.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+//#region src/dashboard/components/cart/PointsRedemptionSection.tsx
+function PointsRedemptionSection({ enabled, pointsBalance, minRedeemPoints, maxRedeemPoints, pointsPerBdt, estimatedDiscount, error, value, onChange, onUseMax }) {
+	if (!enabled) return null;
+	const helperText = maxRedeemPoints > 0 ? `Up to ${maxRedeemPoints} pts (${formatBdt(maxRedeemPoints / pointsPerBdt)})` : "Not eligible for redemption";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-sm font-medium",
+					children: "Redeem Points"
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "text-xs text-muted-foreground",
+					children: [
+						"Balance: ",
+						pointsBalance,
+						" pts"
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Input, {
+					placeholder: `Min ${minRedeemPoints} pts`,
+					inputMode: "numeric",
+					value,
+					onChange: (e) => onChange(e.target.value),
+					disabled: maxRedeemPoints <= 0
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					onClick: onUseMax,
+					disabled: maxRedeemPoints <= 0,
+					children: "Use Max"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between text-xs text-muted-foreground",
+				children: [/* @__PURE__ */ jsx("span", { children: helperText }), estimatedDiscount > 0 && /* @__PURE__ */ jsxs("span", { children: ["-", formatBdt(estimatedDiscount)] })]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-destructive",
+				children: error
+			})
+		]
+	});
+}
+
+//#endregion
+export { PointsRedemptionSection };

package/dist/hardware/context.d.ts

@@ -0,0 +1,15 @@
+import { PosHardware } from "./ports.js";
+import { useBarcodeScan } from "@classytic/fluid/client/hooks";
+
+//#region src/hardware/context.d.ts
+interface HardwareProviderProps {
+  hardware: PosHardware;
+  children: React.ReactNode;
+}
+declare function HardwareProvider({
+  hardware,
+  children
+}: HardwareProviderProps): import("react").JSX.Element;
+declare function useHardware(): PosHardware;
+//#endregion
+export { HardwareProvider, HardwareProviderProps, useBarcodeScan, useHardware };

package/dist/hardware/context.js

@@ -0,0 +1,33 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import { useBarcodeScan } from "@classytic/fluid/client/hooks";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/hardware/context.tsx
+/**
+* Hardware Provider — supplies the active `PosHardware` adapter to the
+* POS React tree. The browser POS wraps with `createWebHardware()`; a
+* future Tauri shell wraps with `createTauriHardware()`. Same hooks
+* downstream — no consumer code changes between hosts.
+*
+* Barcode scanning is handled by fluid's `useBarcodeScan` hook (re-exported
+* here for convenience). The hardware port `BarcodeScanner` exists for
+* native shells (Tauri / React Native) that use platform APIs instead of
+* keystroke-burst detection.
+*/
+const HardwareContext = createContext(null);
+function HardwareProvider({ hardware, children }) {
+	return /* @__PURE__ */ jsx(HardwareContext.Provider, {
+		value: hardware,
+		children
+	});
+}
+function useHardware() {
+	const ctx = useContext(HardwareContext);
+	if (!ctx) throw new Error("useHardware must be used inside <HardwareProvider>");
+	return ctx;
+}
+
+//#endregion
+export { HardwareProvider, useBarcodeScan, useHardware };

package/dist/hardware/index.d.ts

@@ -0,0 +1,7 @@
+import { BarcodeScanner, CashDrawer, PaymentTerminal, PosHardware, ReceiptLine, ReceiptPayload, ReceiptPayment, ReceiptPrinter, ScanEvent, TerminalChargeInput, TerminalChargeResult } from "./ports.js";
+import { RECEIPT_DOM_ID, createWebHardware } from "./web-adapter.js";
+import { createTauriHardware, isTauri } from "./tauri-adapter.js";
+import { HardwareProvider, useBarcodeScan, useHardware } from "./context.js";
+import { PrinterAvailability, usePrinterAvailability } from "./use-printer-availability.js";
+import { PrinterConfig, readPrinterConfig, usePrinterConfig } from "./use-printer-config.js";
+export { type BarcodeScanner, type CashDrawer, HardwareProvider, type PaymentTerminal, type PosHardware, type PrinterAvailability, type PrinterConfig, RECEIPT_DOM_ID, type ReceiptLine, type ReceiptPayload, type ReceiptPayment, type ReceiptPrinter, type ScanEvent, type TerminalChargeInput, type TerminalChargeResult, createTauriHardware, createWebHardware, isTauri, readPrinterConfig, useBarcodeScan, useHardware, usePrinterAvailability, usePrinterConfig };

package/dist/hardware/index.js

@@ -0,0 +1,7 @@
+import { readPrinterConfig, usePrinterConfig } from "./use-printer-config.js";
+import { createTauriHardware, isTauri } from "./tauri-adapter.js";
+import { RECEIPT_DOM_ID, createWebHardware } from "./web-adapter.js";
+import { HardwareProvider, useBarcodeScan, useHardware } from "./context.js";
+import { usePrinterAvailability } from "./use-printer-availability.js";
+
+export { HardwareProvider, RECEIPT_DOM_ID, createTauriHardware, createWebHardware, isTauri, readPrinterConfig, useBarcodeScan, useHardware, usePrinterAvailability, usePrinterConfig };

package/dist/hardware/ports.d.ts

@@ -0,0 +1,116 @@
+//#region src/hardware/ports.d.ts
+/**
+ * POS Hardware Abstraction Layer — port interfaces.
+ *
+ * Four ports cover the register-floor hardware surface. Each is a small,
+ * promise-returning contract so any adapter (browser stub, local print
+ * agent, Tauri native, React Native module, EMV terminal SDK) can plug in.
+ *
+ * Domain-specific (cart shape, order shape) so fluid stays generic.
+ * Adapters live next to the ports; hosts wire them via `HardwareProvider`.
+ */
+interface ReceiptLine {
+  name: string;
+  variant?: string;
+  qty: number;
+  unitPrice: number;
+  total: number;
+  taxRate?: number;
+  taxAmount?: number;
+}
+interface ReceiptPayment {
+  method: string;
+  amount: number;
+  reference?: string;
+}
+interface ReceiptPayload {
+  branch: {
+    name: string;
+    address?: string;
+    bin?: string;
+    phone?: string;
+  };
+  shift: {
+    id: string;
+    cashierId: string;
+    cashierName: string;
+  };
+  order: {
+    number: string;
+    placedAt: Date;
+    lines: ReceiptLine[];
+    subtotal: number;
+    tax: number;
+    discount?: number;
+    deliveryFee?: number;
+    grandTotal: number;
+    currency: string;
+  };
+  payments: ReceiptPayment[];
+  changeDue?: number;
+  customer?: {
+    name?: string;
+    phone?: string;
+    loyaltyId?: string;
+  };
+  qrCodeUrl?: string;
+  notes?: string;
+}
+interface ReceiptPrinter {
+  /** Print a structured receipt. Adapter handles ESC/POS encoding or browser print. */
+  print(payload: ReceiptPayload): Promise<void>;
+  /** Whether this adapter can talk to a printer right now (false for browser without agent). */
+  isAvailable(): Promise<boolean>;
+}
+interface CashDrawer {
+  /** Pulse the kick signal. Most adapters drive this through the printer's RJ11. */
+  open(): Promise<void>;
+  isAvailable(): Promise<boolean>;
+}
+interface ScanEvent {
+  /** Decoded code value (UPC / EAN / CODE128 etc. — the scanner does the decoding). */
+  code: string;
+  /** Raw keystrokes captured (for debugging). */
+  raw: string;
+  scannedAt: Date;
+}
+interface BarcodeScanner {
+  /** Subscribe to scan events. Returns an unsubscribe function. */
+  onScan(handler: (event: ScanEvent) => void): () => void;
+  isAvailable(): Promise<boolean>;
+}
+interface TerminalChargeInput {
+  amountMinor: number;
+  currency: string;
+  orderRef: string;
+}
+interface TerminalChargeResult {
+  /** Provider-issued reference (auth code, payment id, etc.). */
+  ref: string;
+  /** Provider name (`stripe-terminal`, `verifone`, `dbbl-pos`, etc.). */
+  provider: string;
+  /** Optional last-4 / brand for receipt display — never PAN. */
+  cardBrand?: string;
+  cardLast4?: string;
+}
+interface PaymentTerminal {
+  charge(input: TerminalChargeInput): Promise<TerminalChargeResult>;
+  refund(input: {
+    amountMinor: number;
+    currency: string;
+    originalRef: string;
+  }): Promise<{
+    ref: string;
+  }>;
+  /** Cancel an in-progress prompt on the terminal (cashier hits ESC). */
+  cancel(): Promise<void>;
+  isAvailable(): Promise<boolean>;
+}
+interface PosHardware {
+  printer: ReceiptPrinter;
+  drawer: CashDrawer;
+  scanner: BarcodeScanner;
+  terminal: PaymentTerminal;
+}
+//#endregion
+export { BarcodeScanner, CashDrawer, PaymentTerminal, PosHardware, ReceiptLine, ReceiptPayload, ReceiptPayment, ReceiptPrinter, ScanEvent, TerminalChargeInput, TerminalChargeResult };

package/dist/hardware/tauri-adapter.d.ts

@@ -0,0 +1,7 @@
+import { PosHardware } from "./ports.js";
+
+//#region src/hardware/tauri-adapter.d.ts
+declare function isTauri(): boolean;
+declare function createTauriHardware(): PosHardware;
+//#endregion
+export { createTauriHardware, isTauri };

package/dist/hardware/tauri-adapter.js

@@ -0,0 +1,77 @@
+import { readPrinterConfig } from "./use-printer-config.js";
+
+//#region src/hardware/tauri-adapter.ts
+function isTauri() {
+	if (typeof window === "undefined") return false;
+	const g = window;
+	return Boolean(g.__TAURI__?.core || g.__TAURI_INTERNALS__);
+}
+function getInvoke() {
+	const core = window.__TAURI__?.core;
+	if (!core) throw new Error("[pos/hardware] Tauri invoke unavailable — not running inside cashier-tauri shell");
+	return core.invoke.bind(core);
+}
+var TauriReceiptPrinter = class {
+	async print(payload) {
+		await getInvoke()("printer_print", {
+			payload,
+			config: readPrinterConfig() ?? void 0
+		});
+	}
+	async isAvailable() {
+		try {
+			return await getInvoke()("printer_is_available", { config: readPrinterConfig() ?? void 0 });
+		} catch {
+			return false;
+		}
+	}
+};
+var TauriCashDrawer = class {
+	async open() {
+		await getInvoke()("drawer_open", { config: readPrinterConfig() ?? void 0 });
+	}
+	async isAvailable() {
+		try {
+			return await getInvoke()("drawer_is_available", { config: readPrinterConfig() ?? void 0 });
+		} catch {
+			return false;
+		}
+	}
+};
+var TauriBarcodeScannerStub = class {
+	onScan() {
+		return () => {};
+	}
+	async isAvailable() {
+		return true;
+	}
+};
+var TauriPaymentTerminal = class {
+	async charge(input) {
+		return getInvoke()("terminal_charge", { input });
+	}
+	async refund(input) {
+		return getInvoke()("terminal_refund", { input });
+	}
+	async cancel() {
+		await getInvoke()("terminal_cancel");
+	}
+	async isAvailable() {
+		try {
+			return await getInvoke()("terminal_is_available");
+		} catch {
+			return false;
+		}
+	}
+};
+function createTauriHardware() {
+	return {
+		printer: new TauriReceiptPrinter(),
+		drawer: new TauriCashDrawer(),
+		scanner: new TauriBarcodeScannerStub(),
+		terminal: new TauriPaymentTerminal()
+	};
+}
+
+//#endregion
+export { createTauriHardware, isTauri };

package/dist/hardware/use-printer-availability.d.ts

@@ -0,0 +1,12 @@
+//#region src/hardware/use-printer-availability.d.ts
+interface PrinterAvailability {
+  /** `true` if the port reports a reachable printer. Defaults to `true`
+   *  while the first probe is in flight so the initial render of a
+   *  print button isn't briefly disabled-then-enabled (visual flicker). */
+  available: boolean;
+  /** `true` while the first probe is in flight. */
+  checking: boolean;
+}
+declare function usePrinterAvailability(): PrinterAvailability;
+//#endregion
+export { PrinterAvailability, usePrinterAvailability };

package/dist/hardware/use-printer-availability.js

@@ -0,0 +1,50 @@
+"use client";
+
+import { useHardware } from "./context.js";
+import { useEffect, useState } from "react";
+
+//#region src/hardware/use-printer-availability.ts
+/**
+* usePrinterAvailability — reflects the printer port's `isAvailable()`
+* state into the React tree so consumers can disable / annotate the
+* print button when no hardware is reachable.
+*
+*   - Browser host: `WebReceiptPrinter.isAvailable()` returns `true`
+*     whenever a `window` exists — browser users can always print to
+*     whatever printer the OS has configured. Button stays enabled.
+*   - Tauri host: probes the configured network printer over TCP with
+*     a 500ms timeout. Returns `false` when `POS_PRINTER_HOST` isn't
+*     set or the printer doesn't answer. Button greys out, cashier
+*     gets a clear hint.
+*
+* Intentionally NOT a polling hook — printers don't appear/disappear
+* during a sale, so one check per consumer mount is enough. If a shop
+* needs live status (e.g. printer-out-of-paper light on the dashboard),
+* extend with `refetchInterval` later.
+*/
+function usePrinterAvailability() {
+	const { printer } = useHardware();
+	const [available, setAvailable] = useState(true);
+	const [checking, setChecking] = useState(true);
+	useEffect(() => {
+		let cancelled = false;
+		setChecking(true);
+		printer.isAvailable().then((ok) => {
+			if (!cancelled) setAvailable(ok);
+		}).catch(() => {
+			if (!cancelled) setAvailable(false);
+		}).finally(() => {
+			if (!cancelled) setChecking(false);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [printer]);
+	return {
+		available,
+		checking
+	};
+}
+
+//#endregion
+export { usePrinterAvailability };

package/dist/hardware/use-printer-config.d.ts

@@ -0,0 +1,16 @@
+//#region src/hardware/use-printer-config.d.ts
+/** Same shape as Rust's `PrinterConfig` — see cashier-tauri transport.rs. */
+interface PrinterConfig {
+  host: string;
+  port?: number;
+  timeoutMs?: number;
+}
+/** Synchronous read — used by the Tauri adapter on each invoke call. */
+declare function readPrinterConfig(): PrinterConfig | null;
+declare function usePrinterConfig(): {
+  config: PrinterConfig;
+  setConfig: (next: PrinterConfig) => void;
+  clearConfig: () => void;
+};
+//#endregion
+export { PrinterConfig, readPrinterConfig, usePrinterConfig };

package/dist/hardware/use-printer-config.js

@@ -0,0 +1,62 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+//#region src/hardware/use-printer-config.ts
+/**
+* usePrinterConfig — localStorage-backed runtime printer config.
+*
+* Persists the cashier's printer host/port/timeout in the browser's
+* localStorage. The Tauri adapter reads the same key synchronously
+* inside its `invoke` calls (see `tauri-adapter.ts:readPrinterConfig`)
+* so the cashier can change the printer IP from the settings dialog
+* without restarting the app.
+*
+* Browser users (no Tauri) still benefit from the dialog — it's a
+* no-op for them because `window.print()` is what runs on the web
+* adapter path. The dialog is hidden when Tauri isn't detected.
+*/
+const STORAGE_KEY = "pos:printer:config";
+const EMPTY = { host: "" };
+/** Synchronous read — used by the Tauri adapter on each invoke call. */
+function readPrinterConfig() {
+	if (typeof window === "undefined") return null;
+	try {
+		const raw = window.localStorage.getItem(STORAGE_KEY);
+		if (!raw) return null;
+		const parsed = JSON.parse(raw);
+		if (typeof parsed.host !== "string" || parsed.host.trim().length === 0) return null;
+		return parsed;
+	} catch {
+		return null;
+	}
+}
+function usePrinterConfig() {
+	const [config, setConfigState] = useState(EMPTY);
+	useEffect(() => {
+		const stored = readPrinterConfig();
+		if (stored) setConfigState(stored);
+		const onStorage = (e) => {
+			if (e.key !== STORAGE_KEY) return;
+			setConfigState(readPrinterConfig() ?? EMPTY);
+		};
+		window.addEventListener("storage", onStorage);
+		return () => window.removeEventListener("storage", onStorage);
+	}, []);
+	const setConfig = useCallback((next) => {
+		setConfigState(next);
+		if (typeof window === "undefined") return;
+		if (next.host.trim().length === 0) window.localStorage.removeItem(STORAGE_KEY);
+		else window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+	}, []);
+	return {
+		config,
+		setConfig,
+		clearConfig: useCallback(() => {
+			setConfig(EMPTY);
+		}, [setConfig])
+	};
+}
+
+//#endregion
+export { readPrinterConfig, usePrinterConfig };

package/dist/hardware/web-adapter.d.ts

@@ -0,0 +1,15 @@
+import { PosHardware } from "./ports.js";
+
+//#region src/hardware/web-adapter.d.ts
+/** DOM id of the rendered receipt — used by `printDocument` for print isolation. */
+declare const RECEIPT_DOM_ID = "pos-receipt";
+/**
+ * Auto-detects the host: returns native Tauri adapters when the React
+ * tree is running inside the `cashier-tauri` webview, otherwise returns
+ * the browser stubs. Consumers stay agnostic — `<HardwareProvider>` in
+ * `pos-shell.tsx` calls this once at mount and the same React tree
+ * works on both surfaces with no per-component branching.
+ */
+declare function createWebHardware(): PosHardware;
+//#endregion
+export { RECEIPT_DOM_ID, createWebHardware };