@classytic/pos-ui 0.1.0

package/dist/shell/pos-shell.js

@@ -0,0 +1,132 @@
+"use client";
+
+import { PosAuthProvider, usePosAuth } from "../runtime/auth-port.js";
+import { PosRuntimeProvider } from "../runtime/config.js";
+import { PosBranchProvider } from "../runtime/branch-port.js";
+import { createWebHardware } from "../hardware/web-adapter.js";
+import { HardwareProvider } from "../hardware/context.js";
+import { PosProvider, usePosContext } from "../state/pos-context.js";
+import { PosTopBar } from "../components/PosTopBar.js";
+import { ProductScreen } from "../screens/ProductScreen.js";
+import { PaymentScreen } from "../screens/PaymentScreen.js";
+import { ReceiptScreen } from "../screens/ReceiptScreen.js";
+import { ShiftOpenScreen } from "../screens/ShiftOpenScreen.js";
+import { ShiftCloseScreen } from "../screens/ShiftCloseScreen.js";
+import { OrderHistoryDrawer } from "../screens/OrderHistoryDrawer.js";
+import { PrinterSettingsDialog } from "../components/PrinterSettingsDialog.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useKeyboardShortcut, useWakeLock } from "@classytic/fluid/client/hooks";
+import { DensityProvider, HotkeyHelpDialog, HotkeyRegistryProvider } from "@classytic/fluid/client/core";
+import { usePosCurrentShift } from "@classytic/commerce-sdk/sales";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/shell/pos-shell.tsx
+/**
+* PosShell — Top-level POS orchestrator.
+*
+* Renders the active screen based on the state machine.
+* Mounts all DI providers (auth / branch / runtime / hardware) so a host
+* needs a single import to stand up the register. Wraps everything in
+* PosProvider for shared context.
+*
+* Screen flow: idle (shift open) → products → payment → receipt → products
+*/
+function PosScreenRouter() {
+	const { state, dispatch } = usePosContext();
+	const sessionUser = usePosAuth().useSessionUser();
+	const { shift: activeShift } = usePosCurrentShift();
+	const userName = sessionUser?.name || "Cashier";
+	const [historyOpen, setHistoryOpen] = useState(false);
+	const [helpOpen, setHelpOpen] = useState(false);
+	const [printerSettingsOpen, setPrinterSettingsOpen] = useState(false);
+	useWakeLock({ enabled: state.shiftOpen });
+	useEffect(() => {
+		if (state.screen === "idle" && activeShift?.state === "open" && !state.shiftOpen) dispatch({ type: "OPEN_SHIFT" });
+	}, [
+		state.screen,
+		state.shiftOpen,
+		activeShift,
+		dispatch
+	]);
+	useKeyboardShortcut("f2", () => {
+		if (state.screen === "receipt") dispatch({ type: "NEW_SALE" });
+	}, {
+		description: "New sale (after receipt)",
+		category: "Sale"
+	});
+	useKeyboardShortcut("escape", () => {
+		dispatch({ type: "GO_BACK" });
+	}, {
+		disableInInputs: false,
+		description: "Back / cancel current step",
+		category: "Navigation"
+	});
+	useKeyboardShortcut("f9", () => {
+		if (state.shiftOpen) setHistoryOpen(true);
+	}, {
+		description: "Open order history",
+		category: "Navigation"
+	});
+	useKeyboardShortcut("shift+/", () => setHelpOpen(true), {
+		description: "Show keyboard shortcuts",
+		category: "Help"
+	});
+	const handleNewSale = useCallback(() => {
+		if (state.screen === "receipt") dispatch({ type: "NEW_SALE" });
+	}, [state.screen, dispatch]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col h-screen",
+		children: [
+			state.screen !== "idle" && /* @__PURE__ */ jsx(PosTopBar, {
+				userName,
+				onNewSale: state.screen === "products" ? handleNewSale : void 0,
+				onOpenHistory: () => setHistoryOpen(true),
+				onOpenHelp: () => setHelpOpen(true),
+				onOpenPrinterSettings: () => setPrinterSettingsOpen(true)
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex-1 min-h-0",
+				children: [
+					state.screen === "idle" && /* @__PURE__ */ jsx(ShiftOpenScreen, {}),
+					state.screen === "products" && /* @__PURE__ */ jsx(ProductScreen, {}),
+					state.screen === "payment" && /* @__PURE__ */ jsx(PaymentScreen, {}),
+					state.screen === "receipt" && /* @__PURE__ */ jsx(ReceiptScreen, {}),
+					state.screen === "closing" && /* @__PURE__ */ jsx(ShiftCloseScreen, {})
+				]
+			}),
+			/* @__PURE__ */ jsx(OrderHistoryDrawer, {
+				open: historyOpen,
+				onOpenChange: setHistoryOpen
+			}),
+			/* @__PURE__ */ jsx(HotkeyHelpDialog, {
+				open: helpOpen,
+				onOpenChange: setHelpOpen
+			}),
+			/* @__PURE__ */ jsx(PrinterSettingsDialog, {
+				open: printerSettingsOpen,
+				onOpenChange: setPrinterSettingsOpen
+			})
+		]
+	});
+}
+function PosShell({ auth, branch, runtime, hardware }) {
+	return /* @__PURE__ */ jsx(PosAuthProvider, {
+		auth,
+		children: /* @__PURE__ */ jsx(PosBranchProvider, {
+			branch,
+			children: /* @__PURE__ */ jsx(PosRuntimeProvider, {
+				runtime,
+				children: /* @__PURE__ */ jsx(DensityProvider, {
+					density: "auto",
+					children: /* @__PURE__ */ jsx(HotkeyRegistryProvider, { children: /* @__PURE__ */ jsx(HardwareProvider, {
+						hardware: useMemo(() => hardware ?? createWebHardware(), [hardware]),
+						children: /* @__PURE__ */ jsx(PosProvider, { children: /* @__PURE__ */ jsx(PosScreenRouter, {}) })
+					}) })
+				})
+			})
+		})
+	});
+}
+
+//#endregion
+export { PosShell };

package/dist/state/pos-context.js

@@ -0,0 +1,33 @@
+"use client";
+
+import { INITIAL_POS_STATE, posReducer } from "./pos-state.js";
+import { createContext, useContext, useReducer } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/state/pos-context.tsx
+/**
+* POS Context — Provides screen state, dispatch, and session info
+* to all POS screens without prop drilling.
+*
+* Wrap PosShell with <PosProvider> so any screen can:
+*   const { screen, dispatch } = usePosContext();
+*/
+const PosContext = createContext(null);
+function PosProvider({ children }) {
+	const [state, dispatch] = useReducer(posReducer, INITIAL_POS_STATE);
+	return /* @__PURE__ */ jsx(PosContext, {
+		value: {
+			state,
+			dispatch
+		},
+		children
+	});
+}
+function usePosContext() {
+	const ctx = useContext(PosContext);
+	if (!ctx) throw new Error("usePosContext must be used within <PosProvider>");
+	return ctx;
+}
+
+//#endregion
+export { PosProvider, usePosContext };

package/dist/state/pos-state.js

@@ -0,0 +1,70 @@
+//#region src/state/pos-state.ts
+const INITIAL_POS_STATE = {
+	screen: "idle",
+	lastReceipt: null,
+	lastCashReceived: null,
+	shiftOpen: false
+};
+function posReducer(state, action) {
+	switch (action.type) {
+		case "OPEN_SHIFT":
+			if (state.screen !== "idle") return state;
+			return {
+				...state,
+				screen: "products",
+				shiftOpen: true
+			};
+		case "GO_TO_PAYMENT":
+			if (state.screen !== "products") return state;
+			return {
+				...state,
+				screen: "payment"
+			};
+		case "GO_BACK":
+			if (state.screen === "payment") return {
+				...state,
+				screen: "products"
+			};
+			if (state.screen === "receipt") return {
+				...state,
+				screen: "products",
+				lastReceipt: null,
+				lastCashReceived: null
+			};
+			return state;
+		case "COMPLETE_SALE":
+			if (state.screen !== "payment") return state;
+			return {
+				...state,
+				screen: "receipt",
+				lastReceipt: action.receipt
+			};
+		case "NEW_SALE":
+			if (state.screen !== "receipt") return state;
+			return {
+				...state,
+				screen: "products",
+				lastReceipt: null,
+				lastCashReceived: null
+			};
+		case "CLOSE_SHIFT":
+			if (!state.shiftOpen) return state;
+			return {
+				...state,
+				screen: "closing"
+			};
+		case "CONFIRM_CLOSE":
+			if (state.screen !== "closing") return state;
+			return { ...INITIAL_POS_STATE };
+		case "CANCEL_CLOSE":
+			if (state.screen !== "closing") return state;
+			return {
+				...state,
+				screen: "products"
+			};
+		default: return state;
+	}
+}
+
+//#endregion
+export { INITIAL_POS_STATE, posReducer };

package/dist/utils/customer-display.js

@@ -0,0 +1,35 @@
+//#region src/utils/customer-display.ts
+/**
+* Best display name for a customer card. Falls back through:
+*   1. Backend virtual `fullName`
+*   2. Backend virtual `displayName`
+*   3. Composed from structured `name.given` + `name.family`
+*   4. Email local-part (before @)
+*   5. Literal "Customer"
+*/
+function customerDisplayName(c) {
+	if (!c) return "Customer";
+	const v = (c.fullName ?? c.displayName ?? "").trim();
+	if (v) return v;
+	const composed = `${(c.name?.given ?? "").trim()} ${(c.name?.family ?? "").trim()}`.trim();
+	if (composed) return composed;
+	const email = c.contact?.email ?? "";
+	const local = email.includes("@") ? email.split("@")[0]?.trim() : "";
+	if (local) return local;
+	return "Customer";
+}
+/**
+* Returns the customer's phone for display, or `null` if the value is
+* a server-side placeholder like `pending_<userId>` (auto-generated when
+* a user record exists without a real phone). Pre-release records used
+* `pending_` prefix to satisfy the unique index without surfacing junk.
+*/
+function customerDisplayPhone(c) {
+	const raw = c?.contact?.phone?.trim();
+	if (!raw) return null;
+	if (raw.startsWith("pending_")) return null;
+	return raw;
+}
+
+//#endregion
+export { customerDisplayName, customerDisplayPhone };

package/dist/utils/pos-helpers.js

@@ -0,0 +1,242 @@
+import { Paisa } from "../lib/money.js";
+import { isValidPhone } from "@classytic/commerce-sdk/client";
+
+//#region src/utils/pos-helpers.ts
+/** Brand a paisa value read out of an unknown response. The number is
+*  expected to already be in paisa (be-prod canonical unit); this helper
+*  just re-asserts the brand after a `typeof` guard. */
+const paisaOr0 = (v) => Paisa(typeof v === "number" ? v : 0);
+/**
+* Parse cash received input to number
+*/
+function parseCashReceived(value) {
+	const n = Number(value);
+	return Number.isFinite(n) ? n : 0;
+}
+/**
+* Parse input to positive number (min 0)
+*/
+function parsePositiveNumber(value) {
+	const n = Number(value);
+	if (!Number.isFinite(n)) return 0;
+	return n > 0 ? n : 0;
+}
+/**
+* Calculate cart totals
+*/
+function calculateCartTotals(items, discountInput) {
+	const subtotal = items.reduce((sum, item) => sum + item.lineTotal, 0);
+	const rawDiscount = parsePositiveNumber(discountInput);
+	const discount = subtotal <= 0 ? 0 : Math.min(rawDiscount, subtotal);
+	return {
+		subtotal,
+		discount,
+		total: Math.max(0, subtotal - discount),
+		itemCount: items.length
+	};
+}
+function validateRedemption(pointsToRedeem, customerPoints, orderTotal, membershipConfig) {
+	if (!membershipConfig?.enabled) return {
+		valid: false,
+		error: "Membership program disabled"
+	};
+	const config = membershipConfig?.redemption;
+	if (!config?.enabled) return {
+		valid: false,
+		error: "Points redemption not enabled"
+	};
+	if (pointsToRedeem < (config.minRedeemPoints ?? 0)) return {
+		valid: false,
+		error: `Minimum ${config.minRedeemPoints} points required`
+	};
+	if (pointsToRedeem > customerPoints) return {
+		valid: false,
+		error: `Insufficient points. Available: ${customerPoints}`
+	};
+	if (orderTotal < (config.minOrderAmount ?? 0)) return {
+		valid: false,
+		error: `Minimum order of ৳${config.minOrderAmount} required`
+	};
+	const maxDiscount = Math.floor(orderTotal * (config.maxRedeemPercent ?? 100) / 100);
+	const requestedDiscount = Math.floor(pointsToRedeem / (config.pointsPerBdt ?? 1));
+	let actualDiscount = requestedDiscount;
+	let actualPoints = pointsToRedeem;
+	if (requestedDiscount > maxDiscount) {
+		actualDiscount = maxDiscount;
+		actualPoints = maxDiscount * (config.pointsPerBdt ?? 1);
+	}
+	return {
+		valid: true,
+		discountAmount: actualDiscount,
+		pointsToRedeem: actualPoints,
+		maxAllowedPoints: maxDiscount * (config.pointsPerBdt ?? 1)
+	};
+}
+function calculateOrderTotals({ items, manualDiscountInput, membershipConfig, customer, pointsToRedeemInput }) {
+	const subtotal = items.reduce((sum, item) => sum + item.lineTotal, 0);
+	const manualDiscount = Math.min(parsePositiveNumber(manualDiscountInput), subtotal);
+	const tierName = customer?.membership?.tier || null;
+	const customerPoints = customer?.membership?.points?.current || 0;
+	const tierDiscount = 0;
+	const preliminaryTotal = Math.max(0, subtotal - manualDiscount);
+	const requestedPoints = Math.floor(parsePositiveNumber(pointsToRedeemInput));
+	let redemptionDiscount = 0;
+	let actualPointsRedeemed = 0;
+	let redemptionError = null;
+	let maxAllowedPoints = 0;
+	if (requestedPoints > 0) {
+		const result = validateRedemption(requestedPoints, customerPoints, preliminaryTotal, membershipConfig);
+		if (result.valid) {
+			redemptionDiscount = result.discountAmount ?? 0;
+			actualPointsRedeemed = result.pointsToRedeem ?? 0;
+			maxAllowedPoints = result.maxAllowedPoints ?? 0;
+		} else redemptionError = result.error ?? "Redemption not available";
+	}
+	if (!maxAllowedPoints && membershipConfig?.enabled && membershipConfig?.redemption?.enabled) maxAllowedPoints = Math.floor(preliminaryTotal * (membershipConfig.redemption.maxRedeemPercent ?? 100) / 100) * (membershipConfig.redemption.pointsPerBdt ?? 1);
+	const total = Math.max(0, preliminaryTotal - redemptionDiscount);
+	return {
+		subtotal,
+		manualDiscount,
+		tierDiscount,
+		redemptionDiscount,
+		totalDiscount: manualDiscount + tierDiscount + redemptionDiscount,
+		total,
+		pointsToEarn: 0,
+		pointsRedeemed: actualPointsRedeemed,
+		redemptionError,
+		maxAllowedPoints,
+		tierName
+	};
+}
+/**
+* Calculate change amount for cash payment
+*/
+function calculateChange(cashReceived, total) {
+	return Math.max(0, cashReceived - total);
+}
+/**
+* Calculate amount due for cash payment
+*/
+function calculateAmountDue(cashReceived, total) {
+	return Math.max(0, total - cashReceived);
+}
+/**
+* Validate a customer phone against the deployment's configured pattern
+* (country-agnostic — `configureSDK({ receipt: { phonePattern } })`; defaults
+* to Bangladesh). Kept the `BD` name for call-site compatibility; the check is
+* now locale-driven, not hardcoded.
+*/
+function isValidBDPhone(phone) {
+	return isValidPhone(phone);
+}
+/**
+* Check if a search string looks like a phone number. `exact` uses the
+* deployment's phone pattern (locale-driven); `likely` is a loose digit-run
+* heuristic that stays country-neutral.
+*/
+function isPhoneSearch(query) {
+	const trimmed = query.trim();
+	return {
+		exact: isValidPhone(trimmed),
+		likely: /^\d{4,}$/.test(trimmed)
+	};
+}
+/** Read paisa from a Money struct `{ amount, currency }` returned by the
+*  order kernel. Falls back to a bare number for legacy shapes. */
+const moneyAmount = (m) => {
+	if (m && typeof m === "object" && "amount" in m && typeof m.amount === "number") return Paisa(m.amount);
+	return paisaOr0(m);
+};
+/**
+* Transform a POS order response to receipt format.
+*
+* The order kernel (`@classytic/order`) returns:
+*   - `order.totals.{ subtotal, discount, tax, shipping, grandTotal }` — each is `Money = { amount, currency }`
+*   - `order.lines[]` — each line has `quantity`, `snapshot.{ sku, name, variantLabel }`,
+*      `unitPrice/lineTotal/unitTax: Money`
+*   - `order.customerSnapshot.{ name, phone? }` (no email for walk-in)
+*   - `order.paymentState.totalCharged: Money` (after capture)
+*   - POS-specific fields (membership, VAT) live in `order.metadata.pos`
+*
+* The wire format inside Money structs is integer paisa for BDT.
+*/
+/**
+* The order's server-authored timestamp for the receipt. Never falls back to
+* the register's clock — a fabricated time on a fiscal document is worse
+* than a visibly blank one. Missing `createdAt` is logged as data corruption.
+*/
+function resolveOrderDate(order) {
+	const raw = order.createdAt || order.placedAt;
+	if (!raw) {
+		console.error("[pos-ui] order missing createdAt/placedAt — receipt date left blank", order._id ?? order.orderNumber);
+		return "";
+	}
+	return String(raw);
+}
+function transformOrderToReceipt(orderResponse, branchInfo) {
+	if (!orderResponse || typeof orderResponse !== "object") return null;
+	const response = orderResponse;
+	const order = response.data ?? response;
+	if (!order._id && !order.orderNumber) return null;
+	const totals = order.totals ?? {};
+	const customerSnap = order.customerSnapshot ?? {};
+	const lines = order.lines ?? [];
+	const paymentState = order.paymentState ?? {};
+	const meta = order.metadata ?? {};
+	const membership = meta.membership ?? {};
+	const vat = meta.vat ?? {};
+	const primaryPayment = (meta.payments ?? [])[0];
+	const itemVatAmount = (line) => {
+		return Paisa(Number(moneyAmount(line.unitTax)) * (typeof line.quantity === "number" ? line.quantity : 1));
+	};
+	return {
+		orderId: String(order._id || ""),
+		orderNumber: String(order.orderNumber || order._id || "").slice(-8).toUpperCase(),
+		invoiceNumber: order.invoiceNumber ? String(order.invoiceNumber) : void 0,
+		date: resolveOrderDate(order),
+		branch: branchInfo,
+		cashier: order.cashierName ? String(order.cashierName) : void 0,
+		customer: {
+			name: customerSnap.name ? String(customerSnap.name) : void 0,
+			phone: customerSnap.phone ? String(customerSnap.phone) : null
+		},
+		membership: membership.cardId ? {
+			cardId: String(membership.cardId),
+			tier: membership.tier ? String(membership.tier) : void 0,
+			pointsEarned: typeof membership.pointsEarned === "number" ? membership.pointsEarned : void 0,
+			tierDiscount: paisaOr0(membership.tierDiscountApplied)
+		} : void 0,
+		items: lines.map((line) => {
+			const snap = line.snapshot ?? {};
+			return {
+				name: String(snap.name || line.productName || "Item"),
+				variant: snap.variantLabel ? String(snap.variantLabel) : snap.sku ? String(snap.sku) : void 0,
+				quantity: typeof line.quantity === "number" ? line.quantity : 1,
+				unitPrice: moneyAmount(line.unitPrice),
+				total: moneyAmount(line.lineTotal),
+				vatRate: typeof line.taxRate === "number" ? line.taxRate : 0,
+				vatAmount: itemVatAmount(line)
+			};
+		}),
+		subtotal: moneyAmount(totals.subtotal),
+		discount: moneyAmount(totals.discount),
+		deliveryCharge: moneyAmount(totals.shipping),
+		vat: {
+			applicable: !!vat.applicable,
+			rate: typeof vat.rate === "number" ? vat.rate : 0,
+			amount: moneyAmount(totals.tax),
+			taxableAmount: paisaOr0(vat.taxableAmount),
+			sellerBin: vat.sellerBin ? String(vat.sellerBin) : void 0,
+			pricesIncludeVat: typeof vat.pricesIncludeVat === "boolean" ? vat.pricesIncludeVat : true
+		},
+		total: moneyAmount(totals.grandTotal),
+		payment: {
+			method: primaryPayment?.method ?? "cash",
+			...primaryPayment?.reference ? { reference: primaryPayment.reference } : {},
+			amount: moneyAmount(paymentState.totalCharged) || moneyAmount(totals.grandTotal)
+		}
+	};
+}
+
+//#endregion
+export { calculateAmountDue, calculateCartTotals, calculateChange, calculateOrderTotals, isPhoneSearch, isValidBDPhone, parseCashReceived, parsePositiveNumber, transformOrderToReceipt, validateRedemption };

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@classytic/pos-ui",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "description": "Point-of-sale register UI — a self-contained, full-screen state-machine app (shift → products → payment → receipt → close) with a hardware DI port (printer/drawer/scanner/terminal). Multi-surface: web, Tauri desktop, React Native. Frontend sibling of the @classytic/pos kernel. Independent of the dashboard stack (no erp-shell).",
+  "files": [
+    "dist",
+    "styles.css",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist"
+  },
+  "peerDependencies": {
+    "@classytic/commerce-sdk": ">=0.9.0",
+    "@classytic/fluid": ">=1.7.0",
+    "@classytic/primitives": ">=0.9.0",
+    "@tanstack/react-query": ">=5.0.0",
+    "clsx": ">=2.0.0",
+    "lucide-react": ">=1.0.0",
+    "next": ">=14.0.0",
+    "react": ">=19.0.0",
+    "sonner": ">=2.0.0",
+    "tailwind-merge": ">=2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@classytic/commerce-sdk": {
+      "optional": true
+    },
+    "@classytic/fluid": {
+      "optional": true
+    },
+    "@classytic/primitives": {
+      "optional": true
+    },
+    "@tanstack/react-query": {
+      "optional": true
+    },
+    "clsx": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "sonner": {
+      "optional": true
+    },
+    "tailwind-merge": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.101.2",
+    "@types/node": "^26.1.0",
+    "@types/react": "^19.2.17",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.23.0",
+    "next": "^16.2.9",
+    "publint": "^0.3.21",
+    "react": "^19.2.7",
+    "react-hook-form": "^7.80.0",
+    "rimraf": "^6.1.3",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tsdown": "^0.22.3",
+    "typescript": "^6.0.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "exports": {
+    "./hardware": "./dist/hardware/index.js",
+    "./runtime": "./dist/runtime/index.js",
+    "./shell": "./dist/shell/index.js",
+    "./package.json": "./package.json"
+  },
+  "inlinedDependencies": {
+    "react-hook-form": "7.80.0"
+  }
+}

package/styles.css

@@ -0,0 +1,19 @@
+/**
+ * @classytic/pos-ui - Tailwind CSS Integration
+ *
+ * Import this file in your app's global CSS so Tailwind discovers the
+ * utility classes used inside the compiled POS components. Without it,
+ * classes that appear ONLY in pos-ui (e.g. the `flex-[65]` / `flex-[35]`
+ * product/cart split, `flex-[50]` payment columns) are never generated in
+ * the host's CSS bundle and the register layout collapses.
+ *
+ * Mirrors the fluid convention (`@classytic/fluid/styles.css`).
+ *
+ * Usage (in app/globals.css or similar, AFTER `@import "tailwindcss"`):
+ *   @import "@classytic/pos-ui/styles.css";
+ */
+
+/* Scan the compiled JS for Tailwind classes. pos-ui builds to `.js`
+ * (see package.json exports), so match that — not `.mjs`. Type defs are
+ * skipped by the extension filter. */
+@source "./dist/**/*.js";