@hanzo/commerce 7.3.10 → 7.5.1

package/dist/client.js

@@ -0,0 +1,188 @@
+/**
+ * @hanzo/commerce/client
+ *
+ * TypeScript client for the Hanzo Commerce API.
+ * Handles billing, subscriptions, payments, usage, plans — all commerce operations.
+ *
+ * @example
+ * ```ts
+ * import { Commerce } from '@hanzo/commerce'
+ *
+ * const commerce = new Commerce({
+ *   commerceUrl: 'https://commerce.hanzo.ai',
+ *   token: iamAccessToken,
+ * })
+ *
+ * // Balance
+ * const balance = await commerce.getBalance('hanzo/alice')
+ *
+ * // Usage
+ * await commerce.addUsageRecord({ user: 'hanzo/alice', amount: 150, model: 'claude-opus-4-6' })
+ *
+ * // Subscribe
+ * await commerce.subscribe({ planId: 'growth', userId: 'hanzo/alice' })
+ *
+ * // Charge
+ * await commerce.charge(orderId)
+ * ```
+ */
+// ---------------------------------------------------------------------------
+// Client
+// ---------------------------------------------------------------------------
+const DEFAULT_TIMEOUT_MS = 10000;
+export class Commerce {
+    constructor(config) {
+        this.baseUrl = config.commerceUrl.replace(/\/+$/, '');
+        this.token = config.token;
+    }
+    /** Update the auth token (e.g. after IAM token refresh). */
+    setToken(token) {
+        this.token = token;
+    }
+    async request(path, opts) {
+        const url = new URL(path, this.baseUrl);
+        if (opts?.params) {
+            for (const [k, v] of Object.entries(opts.params)) {
+                url.searchParams.set(k, v);
+            }
+        }
+        const controller = new AbortController();
+        const timer = setTimeout(() => controller.abort(), DEFAULT_TIMEOUT_MS);
+        const headers = { Accept: 'application/json' };
+        const authToken = opts?.token ?? this.token;
+        if (authToken)
+            headers.Authorization = `Bearer ${authToken}`;
+        if (opts?.body)
+            headers['Content-Type'] = 'application/json';
+        try {
+            const res = await fetch(url.toString(), {
+                method: opts?.method ?? 'GET',
+                headers,
+                body: opts?.body ? JSON.stringify(opts.body) : undefined,
+                signal: controller.signal,
+            });
+            if (!res.ok) {
+                const text = await res.text().catch(() => '');
+                throw new CommerceApiError(res.status, `${res.statusText}: ${text}`.trim());
+            }
+            return (await res.json());
+        }
+        finally {
+            clearTimeout(timer);
+        }
+    }
+    // -----------------------------------------------------------------------
+    // Balance
+    // -----------------------------------------------------------------------
+    async getBalance(user, currency = 'usd', token) {
+        return this.request('/api/v1/billing/balance', {
+            params: { user, currency }, token,
+        });
+    }
+    async getAllBalances(user, token) {
+        return this.request('/api/v1/billing/balance/all', {
+            params: { user }, token,
+        });
+    }
+    // -----------------------------------------------------------------------
+    // Usage
+    // -----------------------------------------------------------------------
+    async addUsageRecord(record, token) {
+        return this.request('/api/v1/billing/usage', {
+            method: 'POST', body: record, token,
+        });
+    }
+    async getUsageRecords(user, currency = 'usd', token) {
+        return this.request('/api/v1/billing/usage', {
+            params: { user, currency }, token,
+        });
+    }
+    // -----------------------------------------------------------------------
+    // Deposits / Credits
+    // -----------------------------------------------------------------------
+    async addDeposit(params, token) {
+        return this.request('/api/v1/billing/deposit', {
+            method: 'POST', body: params, token,
+        });
+    }
+    async grantStarterCredit(user, token) {
+        return this.request('/api/v1/billing/credit', {
+            method: 'POST', body: { user }, token,
+        });
+    }
+    // -----------------------------------------------------------------------
+    // Subscriptions
+    // -----------------------------------------------------------------------
+    async subscribe(params, token) {
+        return this.request('/api/v1/subscribe', {
+            method: 'POST', body: params, token,
+        });
+    }
+    async getSubscription(subscriptionId, token) {
+        try {
+            return await this.request(`/api/v1/subscribe/${subscriptionId}`, { token });
+        }
+        catch {
+            return null;
+        }
+    }
+    async updateSubscription(subscriptionId, update, token) {
+        return this.request(`/api/v1/subscribe/${subscriptionId}`, {
+            method: 'PATCH', body: update, token,
+        });
+    }
+    async cancelSubscription(subscriptionId, token) {
+        await this.request(`/api/v1/subscribe/${subscriptionId}`, {
+            method: 'DELETE', token,
+        });
+    }
+    // -----------------------------------------------------------------------
+    // Checkout / Payments
+    // -----------------------------------------------------------------------
+    async authorize(orderId, token) {
+        return this.request(`/api/v1/authorize/${orderId}`, { method: 'POST', token });
+    }
+    async capture(orderId, token) {
+        return this.request(`/api/v1/capture/${orderId}`, { method: 'POST', token });
+    }
+    async charge(orderId, token) {
+        return this.request(`/api/v1/charge/${orderId}`, { method: 'POST', token });
+    }
+    async refund(paymentId, token) {
+        return this.request(`/api/v1/refund/${paymentId}`, { method: 'POST', token });
+    }
+    /**
+     * Issue a billing refund (correction deposit) for an overcharge.
+     * Creates a deposit tagged "refund" linked to the original transaction.
+     */
+    async billingRefund(params, token) {
+        return this.request('/api/v1/billing/refund', {
+            method: 'POST', body: params, token,
+        });
+    }
+    // -----------------------------------------------------------------------
+    // Plans
+    // -----------------------------------------------------------------------
+    async getPlans(token) {
+        return this.request('/api/v1/plan', { token });
+    }
+    async getPlan(planId, token) {
+        try {
+            return await this.request(`/api/v1/plan/${planId}`, { token });
+        }
+        catch {
+            return null;
+        }
+    }
+}
+// ---------------------------------------------------------------------------
+// Error
+// ---------------------------------------------------------------------------
+export class CommerceApiError extends Error {
+    constructor(status, message) {
+        super(message);
+        this.name = 'CommerceApiError';
+        this.status = status;
+    }
+}
+//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.js","sourceRoot":"","sources":["../client.ts"],"names":[],"mappings":"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"}

package/dist/components/Icons.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    shoppingCart: any;
+    menu: any;
+    chevronLeft: any;
+    chevronRight: any;
+    spinner: any;
+    check: any;
+    plus: any;
+    minus: any;
+    chevronDown: any;
+    chevronsLeft: any;
+    chevronsRight: any;
+    placeholder: any;
+    trash: any;
+    search: any;
+    barcode: any;
+};
+export default _default;

package/dist/components/Icons.js

@@ -0,0 +1,19 @@
+import { ShoppingCart, Menu, ChevronLeft, ChevronRight, Loader2, Check, Plus, Minus, ChevronDown, ChevronsLeft, ChevronsRight, Image, Trash2, Search, Barcode } from "lucide-react";
+export default {
+    shoppingCart: ShoppingCart,
+    menu: Menu,
+    chevronLeft: ChevronLeft,
+    chevronRight: ChevronRight,
+    spinner: Loader2,
+    check: Check,
+    plus: Plus,
+    minus: Minus,
+    chevronDown: ChevronDown,
+    chevronsLeft: ChevronsLeft,
+    chevronsRight: ChevronsRight,
+    placeholder: Image,
+    trash: Trash2,
+    search: Search,
+    barcode: Barcode
+};
+//# sourceMappingURL=Icons.js.map

package/dist/components/Icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icons.js","sourceRoot":"","sources":["../../components/Icons.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,OAAO,EACP,KAAK,EACL,IAAI,EACJ,KAAK,EACL,WAAW,EACX,YAAY,EACZ,aAAa,EACb,KAAK,EACL,MAAM,EACN,MAAM,EACN,OAAO,EACR,MAAM,cAAc,CAAA;AAErB,eAAe;IACb,YAAY,EAAE,YAAY;IAC1B,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,YAAY;IAC1B,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,KAAK;IACZ,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,YAAY;IAC1B,aAAa,EAAE,aAAa;IAC5B,WAAW,EAAE,KAAK;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,OAAO;CACjB,CAAA"}

package/dist/components/Icons.jsx

@@ -0,0 +1,19 @@
+import { ShoppingCart, Menu, ChevronLeft, ChevronRight, Loader2, Check, Plus, Minus, ChevronDown, ChevronsLeft, ChevronsRight, Image, Trash2, Search, Barcode } from "lucide-react";
+export default {
+    shoppingCart: ShoppingCart,
+    menu: Menu,
+    chevronLeft: ChevronLeft,
+    chevronRight: ChevronRight,
+    spinner: Loader2,
+    check: Check,
+    plus: Plus,
+    minus: Minus,
+    chevronDown: ChevronDown,
+    chevronsLeft: ChevronsLeft,
+    chevronsRight: ChevronsRight,
+    placeholder: Image,
+    trash: Trash2,
+    search: Search,
+    barcode: Barcode
+};
+//# sourceMappingURL=Icons.jsx.map

package/dist/components/Icons.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icons.jsx","sourceRoot":"","sources":["../../components/Icons.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,OAAO,EACP,KAAK,EACL,IAAI,EACJ,KAAK,EACL,WAAW,EACX,YAAY,EACZ,aAAa,EACb,KAAK,EACL,MAAM,EACN,MAAM,EACN,OAAO,EACR,MAAM,cAAc,CAAA;AAErB,eAAe;IACb,YAAY,EAAE,YAAY;IAC1B,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,YAAY;IAC1B,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,KAAK;IACZ,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,YAAY;IAC1B,aAAa,EAAE,aAAa;IAC5B,WAAW,EAAE,KAAK;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,OAAO;CACjB,CAAA"}

package/dist/components/add-to-cart-widget.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { LineItem } from '../types';
+declare const AddToCartWidget: React.FC<{
+    item: LineItem;
+    disabled?: boolean;
+    className?: string;
+    buttonClx?: string;
+    variant?: 'minimal' | 'primary' | 'primary-smaller' | 'outline';
+    onQuantityChanged?: (sku: string, oldV: number, newV: number) => void;
+}>;
+export default AddToCartWidget;

package/dist/components/add-to-cart-widget.js

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef } from 'react';
+import { reaction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { Button, buttonVariants } from '@hanzo/ui/primitives';
+import { cn } from '@hanzo/ui/util';
+import Icons from './Icons';
+import { sendFBEvent, sendGAEvent } from '../util/analytics';
+const AddToCartWidget = observer(({ item, variant = 'primary', disabled = false, className = '', buttonClx = '', onQuantityChanged }) => {
+    const reactionDisposer = useRef(undefined);
+    useEffect(() => {
+        if (onQuantityChanged) {
+            reactionDisposer.current = reaction(() => (item.quantity), (quantity, previous) => {
+                onQuantityChanged(item.sku, quantity, previous);
+            });
+        }
+        return () => {
+            if (reactionDisposer.current) {
+                reactionDisposer.current();
+            }
+        };
+    }, []);
+    const ROUNDED_VAL = 'lg';
+    // no need to safelist, since its used widely
+    const ROUNDED_CLX = ` rounded-${ROUNDED_VAL} `;
+    const ghost = variant === 'minimal';
+    const outline = variant === 'outline';
+    const primary = variant === 'primary';
+    const priSmaller = variant === 'primary-smaller';
+    let iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 ' : (priSmaller ? 'h-4 w-6 px-0.5 opacity-70' : 'h-5 w-7 px-1 opacity-70 ');
+    iconClx += ghost ? 'group-hover:text-foreground' : 'group-hover:opacity-100';
+    let digitClx = ghost ? 'px-2 md:px-0.5 ' : 'sm:px-2 font-semibold ';
+    digitClx += (ghost || outline) ? 'text-foreground ' : 'text-primary-fg ';
+    if (disabled) {
+        return (_jsx("div", { className: cn('flex flex-row items-stretch' + ROUNDED_CLX + (!(primary || priSmaller) ? 'bg-transparent' : 'bg-primary'), className), children: _jsx("div", { className: 'text-sm flex items-center cursor-default ' + digitClx, children: item.quantity }) }));
+    }
+    const inc = (event) => {
+        item.increment();
+        event.stopPropagation(); // in case we're part of a larger selection UI
+        sendGAEvent('add_to_cart', {
+            items: [{
+                    item_id: item.sku,
+                    item_name: item.title,
+                    item_category: item.familyId,
+                    price: item.price,
+                    quantity: item.quantity
+                }],
+            value: item.price,
+            currency: 'USD',
+        });
+        sendFBEvent('AddToCart', {
+            content_ids: [item.sku],
+            contents: [{
+                    id: item.sku,
+                    quantity: item.quantity
+                }],
+            content_name: item.title,
+            value: item.price,
+            currency: 'USD',
+        });
+    };
+    const dec = (event) => {
+        item.decrement();
+        event.stopPropagation(); // in case we're part of a larger selection UI
+        sendGAEvent('remove_from_cart', {
+            items: [{
+                    item_id: item.sku,
+                    item_name: item.title,
+                    item_category: item.familyId,
+                    price: item.price,
+                    quantity: item.quantity
+                }],
+            value: item.price,
+            currency: 'USD',
+        });
+    };
+    return (item.isInCart ? (_jsxs("div", { className: cn('flex flex-row items-stretch justify-between ', 
+        // should match 'xs' and 'default' button heights
+        (ghost || priSmaller ? 'h-8' : 'h-9'), ROUNDED_CLX, (primary || priSmaller ? 'bg-primary' : 'bg-transparent'), (outline ? 'border border-muted' : ''), className), children: [_jsx(Button, { "aria-label": 'Remove a ' + item.title + ' from the cart', size: ghost || priSmaller ? 'xs' : 'default', variant: primary || priSmaller ? 'primary' : 'ghost', rounded: ghost ? 'full' : ROUNDED_VAL, className: cn('lg:min-w-0 lg:px-2 grow justify-start group', (ghost || priSmaller ? 'px-1' : 'px-2'), (outline ? 'hover:bg-transparent' : ''), buttonClx, 'h-auto self-stretch' // must be smaller than normal
+                ), onClick: dec, children: (item.quantity > 1) ? (_jsx(Icons.minus, { className: iconClx, "aria-hidden": 'true' })) : (_jsx(Icons.trash, { className: iconClx, "aria-hidden": 'true' })) }, 'left'), _jsxs("div", { className: cn('grow-0 shrink-0 flex items-center cursor-default xs:px-2', priSmaller || ghost ? 'text-xs' : 'text-sm', digitClx), children: [item.quantity, ghost ? '' : ' in Bag'] }), _jsx(Button, { "aria-label": 'Add another ' + item.title + ' to the cart', size: ghost || priSmaller ? 'xs' : 'default', variant: primary || priSmaller ? 'primary' : 'ghost', rounded: ghost ? 'full' : ROUNDED_VAL, className: cn('lg:min-w-0 lg:px-2 grow justify-end group', (ghost || priSmaller ? 'px-1' : 'px-2'), (outline ? 'hover:bg-transparent' : ''), buttonClx, 'h-auto self-stretch' // must be smaller than normal
+                ), onClick: inc, children: _jsx(Icons.plus, { className: iconClx, "aria-hidden": 'true' }) }, 'right')] })) : (_jsxs(Button, { "aria-label": 'Add a ' + item.title + ' to cart', size: ghost || priSmaller ? 'xs' : 'default', variant: ghost ? 'ghost' : (primary || priSmaller ? 'primary' : 'outline'), rounded: ROUNDED_VAL, className: cn(buttonClx, className), onClick: inc, children: [_jsx("span", { className: 'm1-1', children: "Add" }), _jsx(Icons.plus, { className: 'h-5 w-5 ml-1', "aria-hidden": 'true' })] })));
+});
+export default AddToCartWidget;
+//# sourceMappingURL=add-to-cart-widget.js.map

package/dist/components/add-to-cart-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-to-cart-widget.js","sourceRoot":"","sources":["../../components/add-to-cart-widget.tsx"],"names":[],"mappings":"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"}

package/dist/components/add-to-cart-widget.jsx

@@ -0,0 +1,99 @@
+'use client';
+import React, { useEffect, useRef } from 'react';
+import { reaction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { Button, buttonVariants } from '@hanzo/ui/primitives';
+import { cn } from '@hanzo/ui/util';
+import Icons from './Icons';
+import { sendFBEvent, sendGAEvent } from '../util/analytics';
+const AddToCartWidget = observer(({ item, variant = 'primary', disabled = false, className = '', buttonClx = '', onQuantityChanged }) => {
+    const reactionDisposer = useRef(undefined);
+    useEffect(() => {
+        if (onQuantityChanged) {
+            reactionDisposer.current = reaction(() => (item.quantity), (quantity, previous) => {
+                onQuantityChanged(item.sku, quantity, previous);
+            });
+        }
+        return () => {
+            if (reactionDisposer.current) {
+                reactionDisposer.current();
+            }
+        };
+    }, []);
+    const ROUNDED_VAL = 'lg';
+    // no need to safelist, since its used widely
+    const ROUNDED_CLX = ` rounded-${ROUNDED_VAL} `;
+    const ghost = variant === 'minimal';
+    const outline = variant === 'outline';
+    const primary = variant === 'primary';
+    const priSmaller = variant === 'primary-smaller';
+    let iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 ' : (priSmaller ? 'h-4 w-6 px-0.5 opacity-70' : 'h-5 w-7 px-1 opacity-70 ');
+    iconClx += ghost ? 'group-hover:text-foreground' : 'group-hover:opacity-100';
+    let digitClx = ghost ? 'px-2 md:px-0.5 ' : 'sm:px-2 font-semibold ';
+    digitClx += (ghost || outline) ? 'text-foreground ' : 'text-primary-fg ';
+    if (disabled) {
+        return (<div className={cn('flex flex-row items-stretch' + ROUNDED_CLX + (!(primary || priSmaller) ? 'bg-transparent' : 'bg-primary'), className)}>
+        <div className={'text-sm flex items-center cursor-default ' + digitClx}>{item.quantity}</div>
+      </div>);
+    }
+    const inc = (event) => {
+        item.increment();
+        event.stopPropagation(); // in case we're part of a larger selection UI
+        sendGAEvent('add_to_cart', {
+            items: [{
+                    item_id: item.sku,
+                    item_name: item.title,
+                    item_category: item.familyId,
+                    price: item.price,
+                    quantity: item.quantity
+                }],
+            value: item.price,
+            currency: 'USD',
+        });
+        sendFBEvent('AddToCart', {
+            content_ids: [item.sku],
+            contents: [{
+                    id: item.sku,
+                    quantity: item.quantity
+                }],
+            content_name: item.title,
+            value: item.price,
+            currency: 'USD',
+        });
+    };
+    const dec = (event) => {
+        item.decrement();
+        event.stopPropagation(); // in case we're part of a larger selection UI
+        sendGAEvent('remove_from_cart', {
+            items: [{
+                    item_id: item.sku,
+                    item_name: item.title,
+                    item_category: item.familyId,
+                    price: item.price,
+                    quantity: item.quantity
+                }],
+            value: item.price,
+            currency: 'USD',
+        });
+    };
+    return (item.isInCart ? (<div className={cn('flex flex-row items-stretch justify-between ', 
+        // should match 'xs' and 'default' button heights
+        (ghost || priSmaller ? 'h-8' : 'h-9'), ROUNDED_CLX, (primary || priSmaller ? 'bg-primary' : 'bg-transparent'), (outline ? 'border border-muted' : ''), className)}>
+      <Button aria-label={'Remove a ' + item.title + ' from the cart'} size={ghost || priSmaller ? 'xs' : 'default'} variant={primary || priSmaller ? 'primary' : 'ghost'} rounded={ghost ? 'full' : ROUNDED_VAL} className={cn('lg:min-w-0 lg:px-2 grow justify-start group', (ghost || priSmaller ? 'px-1' : 'px-2'), (outline ? 'hover:bg-transparent' : ''), buttonClx, 'h-auto self-stretch' // must be smaller than normal
+        )} key='left' onClick={dec}>
+      {(item.quantity > 1) ? (<Icons.minus className={iconClx} aria-hidden='true'/>) : (<Icons.trash className={iconClx} aria-hidden='true'/>)}
+      </Button>
+        <div className={cn('grow-0 shrink-0 flex items-center cursor-default xs:px-2', priSmaller || ghost ? 'text-xs' : 'text-sm', digitClx)}>
+          {item.quantity}{ghost ? '' : ' in Bag'}
+        </div>
+      <Button aria-label={'Add another ' + item.title + ' to the cart'} size={ghost || priSmaller ? 'xs' : 'default'} variant={primary || priSmaller ? 'primary' : 'ghost'} rounded={ghost ? 'full' : ROUNDED_VAL} className={cn('lg:min-w-0 lg:px-2 grow justify-end group', (ghost || priSmaller ? 'px-1' : 'px-2'), (outline ? 'hover:bg-transparent' : ''), buttonClx, 'h-auto self-stretch' // must be smaller than normal
+        )} onClick={inc} key='right'>
+        <Icons.plus className={iconClx} aria-hidden='true'/>
+      </Button>
+    </div>) : (<Button aria-label={'Add a ' + item.title + ' to cart'} size={ghost || priSmaller ? 'xs' : 'default'} variant={ghost ? 'ghost' : (primary || priSmaller ? 'primary' : 'outline')} rounded={ROUNDED_VAL} className={cn(buttonClx, className)} onClick={inc}>
+      <span className='m1-1'>Add</span>
+      <Icons.plus className='h-5 w-5 ml-1' aria-hidden='true'/>
+    </Button>));
+});
+export default AddToCartWidget;
+//# sourceMappingURL=add-to-cart-widget.jsx.map

package/dist/components/add-to-cart-widget.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-to-cart-widget.jsx","sourceRoot":"","sources":["../../components/add-to-cart-widget.tsx"],"names":[],"mappings":"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"}

package/dist/components/buy/buy-card.d.ts

@@ -0,0 +1,30 @@
+import React, { type ComponentType } from 'react';
+import type { ItemSelectorProps, ItemSelectorCompProps } from '../../types';
+declare const BuyCard: React.FC<{
+    skuPath: string;
+    /** For any selectors that show a list of choices,
+     * starting with 'scrollAfter' elements,
+     * the list will scroll, and the card will
+     * have 'scrollHeightClx' applied to it to define and fix the height.
+     * This is most like something like '80vh'
+     * defaults are '5' and 'h-[70vh]'
+     * */
+    scrollAfter?: number;
+    scrollHeightClx?: string;
+    clx?: string;
+    famWidgetClx?: string;
+    addWidgetClx?: string;
+    selector: ComponentType<ItemSelectorProps>;
+    selectorProps?: ItemSelectorCompProps;
+    /** Show all items from all sibling families
+     * If skuPath defines a Family, the first of it's items will
+     * be selected. The facet widget will just select a the first
+     * item in the chosen Family without changings the overall set
+     * of choices. */
+    allVariants?: boolean;
+    familyTabAs?: 'image' | 'label' | 'image-and-label';
+    showItemMedia?: boolean;
+    onQuantityChanged?: (sku: string, oldV: number, newV: number) => void;
+    mobile?: boolean;
+}>;
+export default BuyCard;

package/dist/components/buy/buy-card.js

@@ -0,0 +1,109 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useRef, useEffect } from 'react';
+import { reaction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { cn } from '@hanzo/ui/util';
+import { ApplyTypography, MediaStack } from '@hanzo/ui/primitives';
+import { useCommerce } from '../../service/context';
+import * as pathUtils from '../../service/path-utils';
+import { getFacetValuesMutator, ObsStringMutator } from '../../util';
+import NodeTabs from '../node-tabs';
+import AddToCartWidget from '../add-to-cart-widget';
+const BuyCard = observer(({ skuPath, scrollAfter = 5, scrollHeightClx = 'h-[80vh]', clx = '', famWidgetClx = '', addWidgetClx = '', selector: Selector, selectorProps = {
+    clx: '',
+    soleItemClx: '',
+    itemClx: '',
+    ext: {}
+}, familyTabAs = 'image-and-label', showItemMedia = true, allVariants = false, mobile = false, onQuantityChanged, }) => {
+    const cmmc = useCommerce();
+    const inst = useRef(undefined);
+    useEffect(() => {
+        let requestedFamily = cmmc.getFamilyById(skuPath);
+        let requestedNode = requestedFamily ? undefined : cmmc.getNodeAtPath(skuPath);
+        let initialFamily = undefined;
+        const { paths, level } = pathUtils.getSelectedPaths(skuPath);
+        if (level === 0) {
+            throw new Error('BuyCard.useEffect(): must specify at least at least one Level in skuPath!');
+        }
+        if (requestedFamily) {
+            if (allVariants && level >= 2) {
+                // select all siblings of requestedFamily.
+                // ie, go one level back
+                delete paths[level];
+                initialFamily = requestedFamily;
+                requestedFamily = undefined;
+                requestedNode = cmmc.getNodeAtPath(pathUtils.getParentPath(skuPath));
+            }
+        }
+        else {
+            // select siblings paths
+            if (allVariants) {
+                paths[level + 1] = [...requestedNode.subNodes.map((node) => (node.skuToken))];
+            }
+            // Actually select the the first fam at the fam level, 
+            else {
+                paths[level + 1] = [requestedNode.subNodes[0].skuToken];
+            }
+        }
+        const selectedFams = cmmc.selectPaths(paths);
+        initialFamily = initialFamily ? initialFamily : (requestedFamily ? requestedFamily : selectedFams[0]);
+        cmmc.setCurrentItem(initialFamily.products[0].sku);
+        const currentFamTokenMutator = new ObsStringMutator(pathUtils.lastToken(initialFamily.id));
+        inst.current = {
+            level,
+            requestedFamily,
+            requestedNode,
+            currentFamTokenMutator,
+            disposers: []
+        };
+        if (!allVariants) {
+            inst.current?.disposers.push(reaction(() => {
+                const fams = cmmc.selectedFamilies;
+                return (fams.length > 0) ? fams[0].id : undefined;
+            }, (famId) => {
+                if (famId && famId !== cmmc.currentItem?.familyId) {
+                    const fam = cmmc.getFamilyById(famId);
+                    if (fam) {
+                        cmmc.setCurrentItem(fam.products[0].sku);
+                    }
+                }
+            }));
+        }
+        return () => {
+            inst.current?.disposers.forEach((d) => { d(); });
+        };
+    }, []);
+    const setFamilyPath = (pathValue) => {
+        if (inst.current?.currentFamTokenMutator.get() !== pathValue) {
+            inst.current?.currentFamTokenMutator.set(pathValue);
+        }
+        const found = cmmc.selectedItems.find((item) => (item.familyId.endsWith(pathValue)));
+        if (found) {
+            cmmc.setCurrentItem(found.sku);
+        }
+    };
+    const selectSku = (sku) => {
+        cmmc.setCurrentItem(sku);
+        const pathValue = pathUtils.lastToken(cmmc.currentItem.familyId);
+        if (pathValue !== inst.current?.currentFamTokenMutator.get()) {
+            inst.current?.currentFamTokenMutator.set(pathValue);
+        }
+    };
+    const famTitle = inst.current?.requestedFamily ? inst.current.requestedFamily.title : cmmc.selectedFamilies[0].title;
+    const itemsToShow = (!cmmc.hasSelection) ? undefined :
+        allVariants ? cmmc.selectedItems : cmmc.selectedFamilies[0].products;
+    const TitleArea = ({ title, byline, clx = '' }) => (_jsxs(ApplyTypography, { className: clx, children: [_jsx("h3", { children: title }), byline && (_jsx("h6", { children: byline }))] }));
+    const scroll = !!(itemsToShow && itemsToShow.length > scrollAfter);
+    return (_jsxs("div", { className: cn('px-4 md:px-6 pt-3 pb-4 flex flex-col items-center min-h-[60vh]', clx, scroll ? scrollHeightClx : 'h-auto'), children: [inst.current?.requestedNode && (_jsxs(_Fragment, { children: [_jsxs(ApplyTypography, { className: 'mb-2 ' + (scroll ? 'shrink-0' : ''), children: [_jsx("h3", { children: inst.current.requestedNode.label }), inst.current.requestedNode.subNodesLabel && (_jsx("h6", { className: '!text-center font-bold text-muted mt-3', children: inst.current.requestedNode.subNodesLabel }))] }), _jsx(NodeTabs, { className: cn('grid gap-0 align-stretch justify-normal ' + `grid-cols-${inst.current.requestedNode.subNodes.length}`, 'border-b-2 rounded-lg border-level-3 mb-4 -mr-2 -ml-2 max-w-[460px] h-10', // height is needed for iPhone bug
+                        (scroll ? 'shrink-0' : ''), famWidgetClx), mobile: mobile, mutator: allVariants ?
+                            {
+                                get: () => (inst.current.currentFamTokenMutator.get()),
+                                set: setFamilyPath
+                            }
+                            :
+                                getFacetValuesMutator(inst.current.level + 1, cmmc), itemClx: 'flex-col h-auto gap-0 py-1 px-3', buttonClx: 'h-full ' +
+                            '!border-level-3', levelNodes: inst.current.requestedNode.subNodes, show: familyTabAs })] })), !inst.current?.requestedNode && famTitle && (_jsx(TitleArea, { title: famTitle, clx: '' })), (cmmc.currentItem && showItemMedia) && (_jsx(MediaStack, { media: cmmc.currentItem, constrainTo: { w: 200, h: 200 }, clx: (scroll ? 'shrink-0' : '') })), itemsToShow && (_jsx(Selector, { items: itemsToShow, selectedItemRef: cmmc, selectSku: selectSku, ...selectorProps, scrollable: scroll })), (cmmc.currentItem) && (_jsx(AddToCartWidget, { item: cmmc.currentItem, onQuantityChanged: onQuantityChanged, className: cn('min-w-[160px] mx-auto mt-4', (scroll ? 'shrink-0' : ''), addWidgetClx) }))] }));
+});
+export default BuyCard;
+//# sourceMappingURL=buy-card.js.map