@absolutejs/commerce 0.2.1-beta.0 → 0.4.0-beta.0

package/dist/client/cartStore.d.ts

@@ -3,6 +3,8 @@ export type CartStore<T> = {
     write(items: T[]): void;
     add(item: T): void;
     clear(): void;
+    subscribe(listener: () => void): () => void;
+    getSnapshot(): T[];
 };
 /**
  * Create a cart store for a localStorage key. Pass `normalize` to migrate or

package/dist/client/index.js

@@ -1,10 +1,9 @@
 // src/client/cartStore.ts
+var EMPTY = [];
 var createCartStore = (key, normalize) => {
-  const read = () => {
-    if (typeof window === "undefined")
-      return [];
+  const eventName = `commerce-cart:${key}`;
+  const parse = (raw) => {
     try {
-      const raw = window.localStorage.getItem(key);
       const parsed = raw ? JSON.parse(raw) : [];
       if (normalize)
         return normalize(parsed);
@@ -13,10 +12,32 @@ var createCartStore = (key, normalize) => {
       return [];
     }
   };
+  const read = () => {
+    if (typeof window === "undefined")
+      return [];
+    return parse(window.localStorage.getItem(key));
+  };
+  let lastRaw = null;
+  let cache = EMPTY;
+  const getSnapshot = () => {
+    if (typeof window === "undefined")
+      return EMPTY;
+    const raw = window.localStorage.getItem(key) ?? "";
+    if (raw !== lastRaw) {
+      lastRaw = raw;
+      cache = parse(raw);
+    }
+    return cache;
+  };
+  const announce = () => {
+    if (typeof window !== "undefined")
+      window.dispatchEvent(new Event(eventName));
+  };
   const write = (items) => {
     if (typeof window === "undefined")
       return;
     window.localStorage.setItem(key, JSON.stringify(items));
+    announce();
   };
   return {
     add(item) {
@@ -26,8 +47,26 @@ var createCartStore = (key, normalize) => {
       if (typeof window === "undefined")
         return;
       window.localStorage.removeItem(key);
+      announce();
     },
+    getSnapshot,
     read,
+    subscribe(listener) {
+      if (typeof window === "undefined")
+        return () => {
+          return;
+        };
+      const onStorage = (event) => {
+        if (event.key === key)
+          listener();
+      };
+      window.addEventListener(eventName, listener);
+      window.addEventListener("storage", onStorage);
+      return () => {
+        window.removeEventListener(eventName, listener);
+        window.removeEventListener("storage", onStorage);
+      };
+    },
     write
   };
 };

package/dist/core/email.d.ts

@@ -0,0 +1,51 @@
+export type EmailMessage = {
+    to: string;
+    subject: string;
+    html: string;
+};
+export type EmailProvider = {
+    send(message: EmailMessage): Promise<void>;
+};
+export type EmailTheme = {
+    brandName: string;
+    tagline?: string;
+    footerNote?: string;
+    colors: {
+        ink: string;
+        accent: string;
+        gold: string;
+        paper: string;
+        card: string;
+        muted: string;
+        hairline: string;
+    };
+};
+export declare const DEFAULT_EMAIL_THEME: EmailTheme;
+/** A short, human order reference derived from a session id. */
+export declare const orderNumber: (sessionId: string) => string;
+/** Format a minor-unit amount for display (null → em dash). */
+export declare const formatMoneyCents: (cents: number | null, currency?: string | null) => string;
+/** A carrier tracking URL, or '' for an unknown carrier. */
+export declare const carrierTrackingUrl: (carrier: string, trackingNumber: string) => string;
+/** A branded call-to-action button (inline-styled for email clients). */
+export declare const emailButton: (theme: EmailTheme, href: string, label: string) => string;
+export type EmailLineItem = {
+    label: string;
+    amountCents: number;
+};
+export type LineItemsOptions = {
+    currency?: string | null;
+    totalCents?: number | null;
+    totalLabel?: string;
+};
+/** A line-items table with an optional total row. */
+export declare const emailLineItems: (theme: EmailTheme, items: EmailLineItem[], options?: LineItemsOptions) => string;
+export type RenderEmailArgs = {
+    preheader: string;
+    heading: string;
+    intro: string;
+    /** Pre-built inner HTML (line tables, buttons, paragraphs). */
+    inner?: string;
+};
+/** Wrap content in the branded, responsive email shell. */
+export declare const renderEmail: (theme: EmailTheme, { preheader, heading, intro, inner }: RenderEmailArgs) => string;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './core/cart';
 export * from './core/discounts';
+export * from './core/email';
 export * from './core/money';
 export * from './core/orders';
 export * from './core/payment';

package/dist/index.js

@@ -26,6 +26,78 @@ var formatPrice = (value, currency = "USD") => {
   const code = currency.toUpperCase();
   return code === "USD" ? `$${value.toFixed(2)}` : `${value.toFixed(2)} ${code}`;
 };
+
+// src/core/email.ts
+var DEFAULT_EMAIL_THEME = {
+  brandName: "AbsoluteJS Commerce",
+  colors: {
+    accent: "#1f6f5c",
+    card: "#fffdf8",
+    gold: "#b5862f",
+    hairline: "#e6ddcb",
+    ink: "#1a1712",
+    muted: "#7a7264",
+    paper: "#efece4"
+  },
+  footerNote: "Questions? Just reply to this email."
+};
+var orderNumber = (sessionId) => `#${sessionId.slice(-8).toUpperCase()}`;
+var formatMoneyCents = (cents, currency = "usd") => {
+  if (cents === null)
+    return "\u2014";
+  const code = (currency ?? "usd").toUpperCase();
+  const value = fromCents(cents).toFixed(2);
+  return code === "USD" ? `$${value}` : `${value} ${code}`;
+};
+var carrierTrackingUrl = (carrier, trackingNumber) => {
+  const slug = carrier.toLowerCase();
+  if (slug.includes("usps"))
+    return `https://tools.usps.com/go/TrackConfirmAction?tLabels=${trackingNumber}`;
+  if (slug.includes("ups"))
+    return `https://www.ups.com/track?tracknum=${trackingNumber}`;
+  if (slug.includes("fedex"))
+    return `https://www.fedex.com/fedextrack/?trknbr=${trackingNumber}`;
+  return "";
+};
+var emailButton = (theme, href, label) => `<a href="${href}" style="display:inline-block;background:${theme.colors.accent};color:#ffffff;text-decoration:none;font-weight:700;font-size:14px;padding:12px 22px;border-radius:6px;">${label}</a>`;
+var emailLineItems = (theme, items, options = {}) => {
+  const { colors } = theme;
+  const rows = items.map((item) => `<tr>
+					<td style="padding:8px 0;border-bottom:1px solid ${colors.hairline};font-size:14px;color:${colors.ink};">${item.label}</td>
+					<td style="padding:8px 0;border-bottom:1px solid ${colors.hairline};text-align:right;font-family:monospace;font-size:14px;color:${colors.ink};">${formatMoneyCents(item.amountCents, options.currency)}</td>
+				</tr>`).join("");
+  const total = options.totalCents === undefined ? "" : `<tr>
+				<td style="padding:12px 0 0;font-weight:700;font-size:15px;color:${colors.ink};">${options.totalLabel ?? "Total"}</td>
+				<td style="padding:12px 0 0;text-align:right;font-weight:700;font-family:monospace;font-size:15px;color:${colors.ink};">${formatMoneyCents(options.totalCents, options.currency)}</td>
+			</tr>`;
+  return `<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;margin:18px 0;">${rows}${total}</table>`;
+};
+var renderEmail = (theme, { preheader, heading, intro, inner = "" }) => {
+  const { colors } = theme;
+  const tagline = theme.tagline ? ` \xB7 ${theme.tagline}` : "";
+  const footer = theme.footerNote ?? "";
+  return `
+<div style="display:none;max-height:0;overflow:hidden;opacity:0;">${preheader}</div>
+<div style="margin:0;padding:24px 12px;background:${colors.paper};font-family:'Helvetica Neue',Arial,sans-serif;">
+	<table width="100%" cellpadding="0" cellspacing="0"><tr><td align="center">
+		<table width="560" cellpadding="0" cellspacing="0" style="max-width:560px;width:100%;background:${colors.card};border:1.5px solid ${colors.ink};">
+			<tr><td style="height:6px;background:${colors.accent};font-size:0;line-height:0;">&nbsp;</td></tr>
+			<tr><td style="padding:24px 28px 4px;">
+				<span style="font-family:'Courier New',monospace;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:${colors.gold};font-weight:700;">${theme.brandName}</span>
+			</td></tr>
+			<tr><td style="padding:8px 28px 28px;">
+				<h1 style="margin:0 0 10px;font-size:26px;line-height:1.15;color:${colors.accent};">${heading}</h1>
+				<p style="margin:0 0 4px;font-size:15px;line-height:1.55;color:${colors.ink};">${intro}</p>
+				${inner}
+			</td></tr>
+			<tr><td style="padding:18px 28px;border-top:1px solid ${colors.hairline};font-family:'Courier New',monospace;font-size:11px;line-height:1.6;color:${colors.muted};">
+				${theme.brandName}${tagline}<br/>
+				${footer}
+			</td></tr>
+		</table>
+	</td></tr></table>
+</div>`;
+};
 // src/core/orders.ts
 var clampPercent = (percent) => Math.min(100, Math.max(0, percent));
 var depositCents = (totalCents, percent) => percent > 0 ? Math.round(totalCents * clampPercent(percent) / 100) : 0;
@@ -56,19 +128,26 @@ export {
   toProductionStage,
   toCents,
   roundMoney,
+  renderEmail,
   quantityDiscount,
   prevStage,
+  orderNumber,
   nextStage,
   nextQuantityBreak,
   lineTotal,
   isDiscountValid,
   fromCents,
   formatPrice,
+  formatMoneyCents,
+  emailLineItems,
+  emailButton,
   discountAmountCents,
   depositCents,
   cartSubtotal,
   cartSetupTotal,
   cartCount,
+  carrierTrackingUrl,
   PRODUCTION_STAGES,
+  DEFAULT_EMAIL_THEME,
   DEFAULT_APPAREL_PARCEL
 };

package/dist/react/index.d.ts

@@ -0,0 +1,8 @@
+import type { CartStore } from '../client/cartStore';
+/** Live cart items for a store — re-renders on add/clear and cross-tab changes. */
+export declare const useCart: <T>(store: CartStore<T>) => T[];
+/**
+ * Live derived value over the cart (e.g. item count, subtotal). `select` runs
+ * on the current items each render.
+ */
+export declare const useCartValue: <T, V>(store: CartStore<T>, select: (items: T[]) => V) => V;

package/dist/react/index.js

@@ -0,0 +1,10 @@
+// @bun
+// src/react/index.ts
+import { useSyncExternalStore } from "react";
+var EMPTY = [];
+var useCart = (store) => useSyncExternalStore(store.subscribe, store.getSnapshot, () => EMPTY);
+var useCartValue = (store, select) => select(useCart(store));
+export {
+  useCartValue,
+  useCart
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@absolutejs/commerce",
-	"version": "0.2.1-beta.0",
+	"version": "0.4.0-beta.0",
 	"description": "Provider-agnostic commerce primitives (cart, orders, fulfillment, shipping) for AbsoluteJS",
 	"repository": {
 		"type": "git",
@@ -28,6 +28,11 @@
 			"import": "./dist/client/index.js",
 			"types": "./dist/client/index.d.ts"
 		},
+		"./react": {
+			"browser": "./dist/react/index.js",
+			"import": "./dist/react/index.js",
+			"types": "./dist/react/index.d.ts"
+		},
 		"./drizzle": {
 			"import": "./dist/drizzle/index.js",
 			"types": "./dist/drizzle/index.d.ts",
@@ -37,22 +42,28 @@
 	"license": "BSL-1.1",
 	"author": "Alex Kahn",
 	"scripts": {
-		"build": "rm -rf dist && bun build ./src/index.ts ./src/drizzle/index.ts --outdir dist --target bun --external drizzle-orm && bun build ./src/client/index.ts --outdir dist/client --target browser --format esm && tsc --emitDeclarationOnly --project tsconfig.json",
+		"build": "rm -rf dist && bun build ./src/index.ts ./src/drizzle/index.ts ./src/react/index.ts --outdir dist --target bun --external drizzle-orm --external react && bun build ./src/client/index.ts --outdir dist/client --target browser --format esm && tsc --emitDeclarationOnly --project tsconfig.json",
 		"format": "prettier --write \"./**/*.{js,ts,json,md}\"",
 		"release": "bun run build && bun publish --tag beta",
 		"typecheck": "tsc --noEmit"
 	},
 	"peerDependencies": {
-		"drizzle-orm": ">=0.30.0"
+		"drizzle-orm": ">=0.30.0",
+		"react": ">=18.0.0"
 	},
 	"peerDependenciesMeta": {
 		"drizzle-orm": {
 			"optional": true
+		},
+		"react": {
+			"optional": true
 		}
 	},
 	"devDependencies": {
 		"@types/bun": "1.3.9",
+		"@types/react": "^19.0.0",
 		"drizzle-orm": "^0.44.0",
+		"react": "^19.0.0",
 		"typescript": "^5.9.3"
 	}
 }