@hanzo/ui 5.3.39 → 5.3.41

package/dist/src/billing/components/animated-card.js

@@ -1,161 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function detectNetwork(digits) {
-    if (digits.startsWith('4'))
-        return 'visa';
-    if (/^5[1-5]/.test(digits) || /^2[2-7]/.test(digits))
-        return 'mastercard';
-    if (/^3[47]/.test(digits))
-        return 'amex';
-    if (/^6(?:011|5)/.test(digits))
-        return 'discover';
-    return 'unknown';
-}
-// ── SVG logos (inline, no external deps) ─────────────────────────────────
-function VisaLogo() {
-    return (_jsx("svg", { viewBox: "0 0 60 20", width: "60", height: "20", "aria-label": "Visa", children: _jsx("text", { x: "0", y: "16", fontFamily: "Arial Black, sans-serif", fontWeight: "900", fontSize: "18", fill: "white", letterSpacing: "-1", children: "VISA" }) }));
-}
-function MastercardLogo() {
-    return (_jsxs("svg", { viewBox: "0 0 48 30", width: "48", height: "30", "aria-label": "Mastercard", children: [_jsx("circle", { cx: "15", cy: "15", r: "14", fill: "#eb001b", opacity: "0.9" }), _jsx("circle", { cx: "33", cy: "15", r: "14", fill: "#f79e1b", opacity: "0.9" }), _jsx("path", { d: "M24 4.8a14 14 0 0 1 0 20.4A14 14 0 0 1 24 4.8z", fill: "#ff5f00", opacity: "0.9" })] }));
-}
-function AmexLogo() {
-    return (_jsxs("svg", { viewBox: "0 0 70 20", width: "70", height: "20", "aria-label": "American Express", children: [_jsx("text", { x: "0", y: "15", fontFamily: "Arial, sans-serif", fontWeight: "700", fontSize: "13", fill: "white", letterSpacing: "0.5", children: "AMERICAN" }), _jsx("text", { x: "0", y: "28", fontFamily: "Arial, sans-serif", fontWeight: "700", fontSize: "13", fill: "white", letterSpacing: "0.5", children: "EXPRESS" })] }));
-}
-function DiscoverLogo() {
-    return (_jsxs("svg", { viewBox: "0 0 80 22", width: "80", height: "22", "aria-label": "Discover", children: [_jsx("text", { x: "0", y: "16", fontFamily: "Arial, sans-serif", fontWeight: "700", fontSize: "14", fill: "white", children: "DISCOVER" }), _jsx("circle", { cx: "72", cy: "11", r: "9", fill: "#f76f20" })] }));
-}
-function NetworkLogo({ network }) {
-    if (network === 'visa')
-        return _jsx(VisaLogo, {});
-    if (network === 'mastercard')
-        return _jsx(MastercardLogo, {});
-    if (network === 'amex')
-        return _jsx(AmexLogo, {});
-    if (network === 'discover')
-        return _jsx(DiscoverLogo, {});
-    return null;
-}
-// ── Chip SVG ──────────────────────────────────────────────────────────────
-function ChipIcon() {
-    return (_jsxs("svg", { width: "44", height: "34", viewBox: "0 0 44 34", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "0.5", y: "0.5", width: "43", height: "33", rx: "5.5", fill: "#c8a951", stroke: "#b8993e" }), _jsx("rect", { x: "14", y: "0.5", width: "16", height: "33", fill: "#b8993e", opacity: "0.5" }), _jsx("rect", { x: "0.5", y: "11", width: "43", height: "12", fill: "#b8993e", opacity: "0.5" }), _jsx("rect", { x: "14", y: "11", width: "16", height: "12", fill: "#c8a951", opacity: "0.8" }), _jsx("line", { x1: "14", y1: "0.5", x2: "14", y2: "33.5", stroke: "#a08030", strokeWidth: "0.5" }), _jsx("line", { x1: "30", y1: "0.5", x2: "30", y2: "33.5", stroke: "#a08030", strokeWidth: "0.5" }), _jsx("line", { x1: "0.5", y1: "11", x2: "43.5", y2: "11", stroke: "#a08030", strokeWidth: "0.5" }), _jsx("line", { x1: "0.5", y1: "23", x2: "43.5", y2: "23", stroke: "#a08030", strokeWidth: "0.5" })] }));
-}
-// ── Number masking ────────────────────────────────────────────────────────
-function maskNumber(digits, network) {
-    const len = network === 'amex' ? 15 : 16;
-    const padded = digits.padEnd(len, '\u2022');
-    if (network === 'amex') {
-        // 4-6-5 format
-        return `${padded.slice(0, 4)} ${padded.slice(4, 10)} ${padded.slice(10, 15)}`;
-    }
-    // 4-4-4-4 format, mask all but last 4
-    const groups = [
-        padded.slice(0, 4),
-        padded.slice(4, 8),
-        padded.slice(8, 12),
-        padded.slice(12, 16),
-    ];
-    return groups
-        .map((g, i) => (i < 3 ? g.replace(/\d/g, '\u2022') : g))
-        .join('  ');
-}
-// ── Animated card ─────────────────────────────────────────────────────────
-export function AnimatedCard({ number, name, expiry, cvv, cvvFocused }) {
-    const digits = number.replace(/\D/g, '');
-    const network = detectNetwork(digits);
-    const maskedNum = maskNumber(digits, network);
-    const displayName = name.trim() || 'YOUR NAME';
-    const displayExpiry = expiry || 'MM/YY';
-    const displayCvv = cvv ? cvv.replace(/./g, '\u2022') : '\u2022\u2022\u2022';
-    // Card dimensions: standard 85.6mm x 53.98mm ratio
-    const cardStyle = {
-        perspective: '1000px',
-        width: '340px',
-        height: '215px',
-    };
-    const innerStyle = {
-        position: 'relative',
-        width: '100%',
-        height: '100%',
-        transformStyle: 'preserve-3d',
-        transition: 'transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
-        transform: cvvFocused ? 'rotateY(180deg)' : 'rotateY(0deg)',
-    };
-    const faceBase = {
-        position: 'absolute',
-        inset: 0,
-        backfaceVisibility: 'hidden',
-        WebkitBackfaceVisibility: 'hidden',
-        borderRadius: '16px',
-        overflow: 'hidden',
-    };
-    const frontStyle = {
-        ...faceBase,
-        background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%)',
-        boxShadow: '0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08)',
-    };
-    const backStyle = {
-        ...faceBase,
-        background: 'linear-gradient(135deg, #12121f 0%, #1a1a2e 100%)',
-        boxShadow: '0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08)',
-        transform: 'rotateY(180deg)',
-    };
-    return (_jsx("div", { style: cardStyle, role: "img", "aria-label": "Payment card preview", children: _jsxs("div", { style: innerStyle, children: [_jsxs("div", { style: frontStyle, children: [_jsx("div", { style: {
-                                position: 'absolute', inset: 0,
-                                background: 'linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%)',
-                                pointerEvents: 'none',
-                            } }), _jsxs("div", { style: { position: 'absolute', top: '22px', left: '22px', right: '22px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx(ChipIcon, {}), _jsx(NetworkLogo, { network: network })] }), _jsx("div", { style: {
-                                position: 'absolute',
-                                top: '50%',
-                                left: '22px',
-                                right: '22px',
-                                transform: 'translateY(-50%)',
-                                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
-                                fontSize: '18px',
-                                fontWeight: '600',
-                                letterSpacing: '0.18em',
-                                color: 'rgba(255,255,255,0.92)',
-                                textShadow: '0 1px 3px rgba(0,0,0,0.4)',
-                            }, children: maskedNum }), _jsxs("div", { style: {
-                                position: 'absolute',
-                                bottom: '22px',
-                                left: '22px',
-                                right: '22px',
-                                display: 'flex',
-                                alignItems: 'flex-end',
-                                justifyContent: 'space-between',
-                            }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontSize: '9px', color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '3px' }, children: "Card holder" }), _jsx("div", { style: { fontSize: '13px', fontWeight: '600', color: 'rgba(255,255,255,0.9)', textTransform: 'uppercase', letterSpacing: '0.05em', maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: displayName })] }), _jsxs("div", { style: { textAlign: 'right' }, children: [_jsx("div", { style: { fontSize: '9px', color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '3px' }, children: "Expires" }), _jsx("div", { style: { fontFamily: 'ui-monospace, monospace', fontSize: '13px', fontWeight: '600', color: 'rgba(255,255,255,0.9)' }, children: displayExpiry })] })] })] }), _jsxs("div", { style: backStyle, children: [_jsx("div", { style: {
-                                position: 'absolute',
-                                top: '40px',
-                                left: 0,
-                                right: 0,
-                                height: '46px',
-                                background: 'linear-gradient(180deg, #1a1a1a 0%, #111 50%, #1a1a1a 100%)',
-                            } }), _jsxs("div", { style: {
-                                position: 'absolute',
-                                top: '108px',
-                                left: '22px',
-                                right: '22px',
-                                display: 'flex',
-                                alignItems: 'center',
-                                gap: '12px',
-                            }, children: [_jsx("div", { style: {
-                                        flex: 1,
-                                        height: '40px',
-                                        background: 'repeating-linear-gradient(90deg, #e8e0d0 0px, #e8e0d0 8px, #d4cabb 8px, #d4cabb 10px)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        paddingLeft: '8px',
-                                    }, children: _jsx("span", { style: { fontFamily: 'cursive, serif', fontSize: '12px', color: '#555', opacity: 0.6 }, children: "Authorized signature" }) }), _jsxs("div", { style: {
-                                        width: '60px',
-                                        height: '40px',
-                                        background: 'white',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        boxShadow: cvvFocused ? '0 0 0 2px #6366f1, 0 0 12px rgba(99,102,241,0.4)' : 'none',
-                                        transition: 'box-shadow 0.3s ease',
-                                    }, children: [_jsx("span", { style: { fontSize: '9px', color: '#888', marginBottom: '2px' }, children: "CVV" }), _jsx("span", { style: { fontFamily: 'ui-monospace, monospace', fontSize: '14px', fontWeight: '700', color: '#111', letterSpacing: '0.1em' }, children: displayCvv })] })] }), _jsx("div", { style: { position: 'absolute', bottom: '18px', right: '22px', opacity: 0.7 }, children: _jsx(NetworkLogo, { network: network }) })] })] }) }));
-}

package/dist/src/billing/components/billing-settings.d.ts

@@ -1,26 +0,0 @@
-import type { SpendAlert, BillingAccountMember, BillingRole, BusinessProfile, TaxSettings, ComplianceItem, SubscriptionDiscount, DiscountCode } from '../types';
-type SubTab = 'alerts' | 'team' | 'business' | 'tax' | 'support' | 'promotions';
-export interface BillingSettingsProps {
-    spendAlerts: SpendAlert[];
-    onCreateSpendAlert?: (title: string, threshold: number) => Promise<void>;
-    onUpdateSpendAlert?: (id: string, title: string, threshold: number) => Promise<void>;
-    onDeleteSpendAlert?: (id: string) => Promise<void>;
-    accountMembers: BillingAccountMember[];
-    userRole: BillingRole;
-    onInviteMember?: (email: string, role: BillingRole) => Promise<void>;
-    onChangeMemberRole?: (memberId: string, role: BillingRole) => Promise<void>;
-    onRemoveMember?: (memberId: string) => Promise<void>;
-    businessProfile: BusinessProfile;
-    onSaveBusinessProfile?: (profile: BusinessProfile) => Promise<void>;
-    taxSettings: TaxSettings;
-    complianceItems: ComplianceItem[];
-    onToggleAutomaticTax?: (enabled: boolean) => Promise<void>;
-    currentSupportTier?: string;
-    onSubscribeSupport?: (tierId: string) => Promise<void>;
-    discount?: SubscriptionDiscount | null;
-    onApplyDiscount?: (code: string) => Promise<DiscountCode | null>;
-    defaultSubTab?: SubTab;
-}
-export declare function BillingSettings(props: BillingSettingsProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=billing-settings.d.ts.map

package/dist/src/billing/components/billing-settings.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"billing-settings.d.ts","sourceRoot":"","sources":["../../../../src/billing/components/billing-settings.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,UAAU,EACV,oBAAoB,EACpB,WAAW,EACX,eAAe,EACf,WAAW,EACX,cAAc,EACd,oBAAoB,EACpB,YAAY,EACb,MAAM,UAAU,CAAA;AAEjB,KAAK,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,GAAG,SAAS,GAAG,YAAY,CAAA;AAE/E,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,UAAU,EAAE,CAAA;IACzB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACxE,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACpF,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAClD,cAAc,EAAE,oBAAoB,EAAE,CAAA;IACtC,QAAQ,EAAE,WAAW,CAAA;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACpE,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC3E,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACpD,eAAe,EAAE,eAAe,CAAA;IAChC,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACnE,WAAW,EAAE,WAAW,CAAA;IACxB,eAAe,EAAE,cAAc,EAAE,CAAA;IACjC,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC1D,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACtD,QAAQ,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAA;IACtC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC,CAAA;IAChE,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAWD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAyD1D"}

package/dist/src/billing/components/billing-settings.js

@@ -1,23 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { SpendAlertsPanel } from './spend-alerts';
-import { AccountMembers } from './account-members';
-import { BusinessProfilePanel } from './business-profile-panel';
-import { TaxCompliancePanel } from './tax-compliance-panel';
-import { SupportTiersPanel } from './support-tiers-panel';
-import { PromotionsPanel } from './promotions-panel';
-const subTabs = [
-    { id: 'alerts', label: 'Spend Alerts' },
-    { id: 'team', label: 'Team' },
-    { id: 'business', label: 'Business Info' },
-    { id: 'tax', label: 'Tax & Compliance' },
-    { id: 'support', label: 'Support' },
-    { id: 'promotions', label: 'Promotions' },
-];
-export function BillingSettings(props) {
-    const [active, setActive] = useState(props.defaultSubTab ?? 'alerts');
-    return (_jsxs("div", { children: [_jsx("div", { className: "mb-6 flex flex-wrap gap-1 rounded-xl bg-bg-card p-1 border border-border", children: subTabs.map(t => (_jsx("button", { type: "button", onClick: () => setActive(t.id), className: `rounded-lg px-3 py-2 text-sm font-medium transition ${active === t.id
-                        ? 'bg-bg-elevated text-text'
-                        : 'text-text-muted hover:text-text-secondary'}`, children: t.label }, t.id))) }), active === 'alerts' && (_jsx(SpendAlertsPanel, { alerts: props.spendAlerts, onCreateAlert: props.onCreateSpendAlert, onUpdateAlert: props.onUpdateSpendAlert, onDeleteAlert: props.onDeleteSpendAlert })), active === 'team' && (_jsx(AccountMembers, { members: props.accountMembers, userRole: props.userRole, onInvite: props.onInviteMember, onChangeRole: props.onChangeMemberRole, onRemove: props.onRemoveMember })), active === 'business' && (_jsx(BusinessProfilePanel, { profile: props.businessProfile, onSave: props.onSaveBusinessProfile })), active === 'tax' && (_jsx(TaxCompliancePanel, { taxSettings: props.taxSettings, complianceItems: props.complianceItems, onToggleAutomaticTax: props.onToggleAutomaticTax })), active === 'support' && (_jsx(SupportTiersPanel, { currentTier: props.currentSupportTier, onSubscribe: props.onSubscribeSupport })), active === 'promotions' && (_jsx(PromotionsPanel, { discount: props.discount ?? null, onApplyDiscount: props.onApplyDiscount }))] }));
-}

package/dist/src/billing/components/billing-workspace.d.ts

@@ -1,28 +0,0 @@
-import type { BillingMetric, BusinessProfile, ComplianceItem, Invoice, PaymentMethod, Subscription, SubscriptionHistory, SubscriptionPlan, TaxSettings, RetentionOffer } from '../types';
-type WorkspaceTab = 'overview' | 'payment' | 'invoices' | 'business' | 'compliance';
-export interface BillingWorkspaceProps {
-    subscription: Subscription;
-    plans: SubscriptionPlan[];
-    usageMetrics?: BillingMetric[];
-    retentionOffers?: RetentionOffer[];
-    subscriptionHistory?: SubscriptionHistory[];
-    paymentMethods?: PaymentMethod[];
-    invoices?: Invoice[];
-    businessProfile: BusinessProfile;
-    taxSettings: TaxSettings;
-    complianceItems: ComplianceItem[];
-    defaultTab?: WorkspaceTab;
-    onUpgrade?: (planId: string) => Promise<void>;
-    onDowngrade?: (planId: string) => Promise<void>;
-    onCancel?: (reason: string, feedback?: string) => Promise<void>;
-    onAcceptOffer?: (offerId: string) => Promise<void>;
-    onAddPaymentMethod?: (method: PaymentMethod) => Promise<void>;
-    onRemovePaymentMethod?: (id: string) => Promise<void>;
-    onSetDefaultPaymentMethod?: (id: string) => Promise<void>;
-    onDownloadInvoice?: (invoice: Invoice) => Promise<void>;
-    onSaveBusinessProfile?: (profile: BusinessProfile) => Promise<void>;
-    onToggleAutomaticTax?: (enabled: boolean) => Promise<void>;
-}
-export declare function BillingWorkspace(props: BillingWorkspaceProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=billing-workspace.d.ts.map

package/dist/src/billing/components/billing-workspace.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"billing-workspace.d.ts","sourceRoot":"","sources":["../../../../src/billing/components/billing-workspace.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,cAAc,EACd,OAAO,EACP,aAAa,EACb,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,WAAW,EACX,cAAc,EACf,MAAM,UAAU,CAAA;AAEjB,KAAK,YAAY,GACb,UAAU,GACV,SAAS,GACT,UAAU,GACV,UAAU,GACV,YAAY,CAAA;AAEhB,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,YAAY,CAAA;IAC1B,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,YAAY,CAAC,EAAE,aAAa,EAAE,CAAA;IAC9B,eAAe,CAAC,EAAE,cAAc,EAAE,CAAA;IAClC,mBAAmB,CAAC,EAAE,mBAAmB,EAAE,CAAA;IAC3C,cAAc,CAAC,EAAE,aAAa,EAAE,CAAA;IAChC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAA;IACpB,eAAe,EAAE,eAAe,CAAA;IAChC,WAAW,EAAE,WAAW,CAAA;IACxB,eAAe,EAAE,cAAc,EAAE,CAAA;IACjC,UAAU,CAAC,EAAE,YAAY,CAAA;IAEzB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC7C,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/D,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAElD,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC7D,qBAAqB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACrD,yBAAyB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAEzD,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACvD,qBAAqB,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACnE,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CAC3D;AAUD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAiG5D"}

package/dist/src/billing/components/billing-workspace.js

@@ -1,22 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { InvoiceManager } from './invoice-manager';
-import { PaymentMethodManager } from './payment-manager';
-import { SubscriptionPortal } from './subscription-portal';
-import { BusinessProfilePanel } from './business-profile-panel';
-import { TaxCompliancePanel } from './tax-compliance-panel';
-const tabs = [
-    { id: 'overview', label: 'Overview' },
-    { id: 'payment', label: 'Payment methods' },
-    { id: 'invoices', label: 'Invoices' },
-    { id: 'business', label: 'Business info' },
-    { id: 'compliance', label: 'Tax & compliance' },
-];
-export function BillingWorkspace(props) {
-    const { subscription, plans, usageMetrics, retentionOffers, subscriptionHistory, paymentMethods, invoices, businessProfile, taxSettings, complianceItems, defaultTab = 'overview', onUpgrade, onDowngrade, onCancel, onAcceptOffer, onAddPaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, onDownloadInvoice, onSaveBusinessProfile, onToggleAutomaticTax, } = props;
-    const [activeTab, setActiveTab] = React.useState(defaultTab);
-    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "overflow-hidden rounded-2xl border border-zinc-200 bg-gradient-to-b from-zinc-50 to-white", children: [_jsxs("div", { className: "border-b border-zinc-200 px-4 py-4", children: [_jsx("h2", { className: "text-2xl font-semibold text-zinc-900", children: "Billing workspace" }), _jsx("p", { className: "text-sm text-zinc-500", children: "Run subscription, invoicing, payment, business profile, and compliance operations from one surface." })] }), _jsx("div", { className: "flex flex-wrap gap-2 p-3", children: tabs.map((tab) => (_jsx("button", { type: "button", onClick: () => setActiveTab(tab.id), className: `rounded-lg px-3 py-1.5 text-sm transition ${activeTab === tab.id
-                                ? 'bg-zinc-900 text-white'
-                                : 'text-zinc-600 hover:bg-zinc-100'}`, children: tab.label }, tab.id))) })] }), activeTab === 'overview' ? (_jsx(SubscriptionPortal, { subscription: subscription, availablePlans: plans, usageMetrics: usageMetrics, retentionOffers: retentionOffers, subscriptionHistory: subscriptionHistory, onUpgrade: onUpgrade, onDowngrade: onDowngrade, onCancel: onCancel, onAcceptOffer: onAcceptOffer })) : null, activeTab === 'payment' ? (_jsx(PaymentMethodManager, { paymentMethods: paymentMethods, onAdd: onAddPaymentMethod, onRemove: onRemovePaymentMethod, onSetDefault: onSetDefaultPaymentMethod })) : null, activeTab === 'invoices' ? (_jsx(InvoiceManager, { invoices: invoices, onDownload: onDownloadInvoice })) : null, activeTab === 'business' ? (_jsx(BusinessProfilePanel, { profile: businessProfile, onSave: onSaveBusinessProfile })) : null, activeTab === 'compliance' ? (_jsx(TaxCompliancePanel, { taxSettings: taxSettings, complianceItems: complianceItems, onToggleAutomaticTax: onToggleAutomaticTax })) : null] }));
-}

package/dist/src/billing/components/business-profile-panel.d.ts

@@ -1,7 +0,0 @@
-import type { BusinessProfile } from '../types';
-export interface BusinessProfilePanelProps {
-    profile: BusinessProfile;
-    onSave?: (profile: BusinessProfile) => Promise<void>;
-}
-export declare function BusinessProfilePanel(props: BusinessProfilePanelProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=business-profile-panel.d.ts.map

package/dist/src/billing/components/business-profile-panel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"business-profile-panel.d.ts","sourceRoot":"","sources":["../../../../src/billing/components/business-profile-panel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE/C,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,eAAe,CAAA;IACxB,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CACrD;AAID,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CAgLpE"}

package/dist/src/billing/components/business-profile-panel.js

@@ -1,45 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-const INPUT_CLASS = 'w-full rounded-lg border border-border bg-bg-input px-3 py-2 text-sm text-text outline-none transition focus:border-brand';
-export function BusinessProfilePanel(props) {
-    const { profile, onSave } = props;
-    const [draft, setDraft] = React.useState(profile);
-    const [saving, setSaving] = React.useState(false);
-    React.useEffect(() => {
-        setDraft(profile);
-    }, [profile]);
-    const hasFinanceAndLegal = (draft.contacts || []).some((contact) => contact.role === 'finance' || contact.role === 'legal');
-    const handleSave = React.useCallback(async () => {
-        if (!onSave)
-            return;
-        setSaving(true);
-        try {
-            await onSave(draft);
-        }
-        finally {
-            setSaving(false);
-        }
-    }, [draft, onSave]);
-    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-border bg-bg-card", children: [_jsxs("div", { className: "border-b border-border p-4", children: [_jsx("h3", { className: "text-lg font-semibold text-text", children: "Business profile" }), _jsx("p", { className: "text-sm text-text-muted", children: "Keep your legal and support details accurate for invoices, tax, and compliance workflows." })] }), _jsxs("div", { className: "grid gap-4 p-4 md:grid-cols-2", children: [_jsxs("label", { className: "space-y-1 text-sm", children: [_jsx("span", { className: "font-medium text-text-secondary", children: "Legal name" }), _jsx("input", { value: draft.legalName, onChange: (e) => setDraft((prev) => ({ ...prev, legalName: e.target.value })), className: INPUT_CLASS })] }), _jsxs("label", { className: "space-y-1 text-sm", children: [_jsx("span", { className: "font-medium text-text-secondary", children: "Display name" }), _jsx("input", { value: draft.displayName, onChange: (e) => setDraft((prev) => ({ ...prev, displayName: e.target.value })), className: INPUT_CLASS })] }), _jsxs("label", { className: "space-y-1 text-sm", children: [_jsx("span", { className: "font-medium text-text-secondary", children: "Website" }), _jsx("input", { value: draft.website || '', onChange: (e) => setDraft((prev) => ({ ...prev, website: e.target.value })), className: INPUT_CLASS })] }), _jsxs("label", { className: "space-y-1 text-sm", children: [_jsx("span", { className: "font-medium text-text-secondary", children: "Support email" }), _jsx("input", { value: draft.supportEmail || '', onChange: (e) => setDraft((prev) => ({ ...prev, supportEmail: e.target.value })), className: INPUT_CLASS })] }), _jsxs("label", { className: "space-y-1 text-sm", children: [_jsx("span", { className: "font-medium text-text-secondary", children: "Statement descriptor" }), _jsx("input", { value: draft.statementDescriptor || '', onChange: (e) => setDraft((prev) => ({ ...prev, statementDescriptor: e.target.value })), className: INPUT_CLASS })] }), _jsxs("label", { className: "space-y-1 text-sm", children: [_jsx("span", { className: "font-medium text-text-secondary", children: "Tax ID" }), _jsx("input", { value: draft.taxId || '', onChange: (e) => setDraft((prev) => ({ ...prev, taxId: e.target.value })), className: INPUT_CLASS })] })] }), _jsxs("div", { className: "border-t border-border bg-bg-elevated p-4", children: [_jsx("p", { className: "mb-2 text-sm font-medium text-text-secondary", children: "Registered address" }), _jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [_jsx("input", { value: draft.registeredAddress.line1, onChange: (e) => setDraft((prev) => ({
-                                        ...prev,
-                                        registeredAddress: { ...prev.registeredAddress, line1: e.target.value },
-                                    })), placeholder: "Line 1", className: `${INPUT_CLASS} text-sm` }), _jsx("input", { value: draft.registeredAddress.line2 || '', onChange: (e) => setDraft((prev) => ({
-                                        ...prev,
-                                        registeredAddress: { ...prev.registeredAddress, line2: e.target.value },
-                                    })), placeholder: "Line 2", className: `${INPUT_CLASS} text-sm` }), _jsx("input", { value: draft.registeredAddress.city, onChange: (e) => setDraft((prev) => ({
-                                        ...prev,
-                                        registeredAddress: { ...prev.registeredAddress, city: e.target.value },
-                                    })), placeholder: "City", className: `${INPUT_CLASS} text-sm` }), _jsx("input", { value: draft.registeredAddress.state || '', onChange: (e) => setDraft((prev) => ({
-                                        ...prev,
-                                        registeredAddress: { ...prev.registeredAddress, state: e.target.value },
-                                    })), placeholder: "State/Province", className: `${INPUT_CLASS} text-sm` }), _jsx("input", { value: draft.registeredAddress.zip, onChange: (e) => setDraft((prev) => ({
-                                        ...prev,
-                                        registeredAddress: { ...prev.registeredAddress, zip: e.target.value },
-                                    })), placeholder: "Postal code", className: `${INPUT_CLASS} text-sm` }), _jsx("input", { value: draft.registeredAddress.country, onChange: (e) => setDraft((prev) => ({
-                                        ...prev,
-                                        registeredAddress: { ...prev.registeredAddress, country: e.target.value },
-                                    })), placeholder: "Country", className: `${INPUT_CLASS} text-sm` })] })] }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-t border-border p-4", children: [_jsx("p", { className: "text-xs text-text-muted", children: hasFinanceAndLegal
-                                ? 'Finance and legal contacts are configured.'
-                                : 'Tip: add at least one finance or legal contact for smooth audits.' }), _jsx("button", { type: "button", onClick: handleSave, disabled: !onSave || saving, className: "rounded-lg bg-text px-3 py-2 text-sm font-medium text-bg transition hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60", children: saving ? 'Saving\u2026' : 'Save profile' })] })] }) }));
-}

package/dist/src/billing/components/card-form.d.ts

@@ -1,18 +0,0 @@
-export interface CardFormProps {
-    /** Called with tokenization result when card is saved */
-    onSuccess: (result: {
-        token: string;
-        brand: string;
-        last4: string;
-        expiryMonth: string;
-        expiryYear: string;
-        provider: string;
-    }) => Promise<void>;
-    /** Base URL for commerce API, e.g. https://api.hanzo.ai/api/v1 */
-    apiBaseUrl?: string;
-    /** Auth token for API calls */
-    authToken?: string;
-    disabled?: boolean;
-}
-export declare function CardForm({ onSuccess, apiBaseUrl, authToken, disabled }: CardFormProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=card-form.d.ts.map

package/dist/src/billing/components/card-form.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"card-form.d.ts","sourceRoot":"","sources":["../../../../src/billing/components/card-form.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,aAAa;IAC5B,yDAAyD;IACzD,SAAS,EAAE,CAAC,MAAM,EAAE;QAClB,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,EAAE,MAAM,CAAA;QACb,WAAW,EAAE,MAAM,CAAA;QACnB,UAAU,EAAE,MAAM,CAAA;QAClB,QAAQ,EAAE,MAAM,CAAA;KACjB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACnB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAyDD,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,aAAa,2CAmMrF"}

package/dist/src/billing/components/card-form.js

@@ -1,139 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-// -- Card number formatting --
-function formatCardNumber(value) {
-    const digits = value.replace(/\D/g, '').slice(0, 16);
-    return digits.replace(/(.{4})/g, '$1 ').trim();
-}
-function formatExpiry(value) {
-    const digits = value.replace(/\D/g, '').slice(0, 4);
-    if (digits.length >= 3)
-        return digits.slice(0, 2) + '/' + digits.slice(2);
-    return digits;
-}
-function detectBrand(digits) {
-    if (digits.startsWith('4'))
-        return 'visa';
-    if (/^5[1-5]/.test(digits) || /^2[2-7]/.test(digits))
-        return 'mastercard';
-    if (/^3[47]/.test(digits))
-        return 'amex';
-    if (/^6(?:011|5)/.test(digits))
-        return 'discover';
-    return '';
-}
-// -- Shared input style --
-const inputStyle = {
-    width: '100%',
-    background: 'rgba(255,255,255,0.04)',
-    border: '1px solid rgba(255,255,255,0.10)',
-    borderRadius: '8px',
-    padding: '10px 12px',
-    color: '#fafafa',
-    fontSize: '14px',
-    fontFamily: 'ui-sans-serif, system-ui, sans-serif',
-    outline: 'none',
-    transition: 'border-color 0.2s',
-    boxSizing: 'border-box',
-};
-const inputFocusStyle = {
-    borderColor: 'rgba(255,255,255,0.35)',
-};
-const labelStyle = {
-    display: 'block',
-    fontSize: '12px',
-    fontWeight: 500,
-    color: 'rgba(255,255,255,0.5)',
-    marginBottom: '4px',
-    textTransform: 'uppercase',
-    letterSpacing: '0.05em',
-};
-// -- Component --
-const COMMERCE_API = process.env.NEXT_PUBLIC_COMMERCE_API ?? 'https://api.hanzo.ai/api/v1';
-export function CardForm({ onSuccess, apiBaseUrl, authToken, disabled }) {
-    const [number, setNumber] = React.useState('');
-    const [name, setName] = React.useState('');
-    const [expiry, setExpiry] = React.useState('');
-    const [cvc, setCvc] = React.useState('');
-    const [zip, setZip] = React.useState('');
-    const [error, setError] = React.useState(null);
-    const [loading, setLoading] = React.useState(false);
-    const [focusedField, setFocusedField] = React.useState(null);
-    const rawNumber = number.replace(/\D/g, '');
-    const brand = detectBrand(rawNumber);
-    const cvcLength = brand === 'amex' ? 4 : 3;
-    const handleSubmit = React.useCallback(async (e) => {
-        e.preventDefault();
-        setError(null);
-        if (rawNumber.length < 13) {
-            setError('Invalid card number');
-            return;
-        }
-        if (!expiry.includes('/')) {
-            setError('Invalid expiry (MM/YY)');
-            return;
-        }
-        const [mm, yy] = expiry.split('/');
-        if (!mm || !yy || mm.length !== 2 || yy.length !== 2) {
-            setError('Invalid expiry');
-            return;
-        }
-        if (cvc.length < 3) {
-            setError('Invalid CVC');
-            return;
-        }
-        if (!name.trim()) {
-            setError('Cardholder name is required');
-            return;
-        }
-        setLoading(true);
-        try {
-            const base = apiBaseUrl ?? COMMERCE_API;
-            const headers = { 'Content-Type': 'application/json' };
-            if (authToken)
-                headers['Authorization'] = `Bearer ${authToken}`;
-            const res = await fetch(`${base}/billing/card/tokenize`, {
-                method: 'POST',
-                headers,
-                body: JSON.stringify({
-                    number: rawNumber,
-                    expiry_month: mm,
-                    expiry_year: `20${yy}`,
-                    cvc,
-                    name: name.trim(),
-                    zip: zip.trim(),
-                }),
-            });
-            if (!res.ok) {
-                const data = await res.json().catch(() => ({}));
-                throw new Error(data.error ?? `Tokenization failed (${res.status})`);
-            }
-            const data = await res.json();
-            await onSuccess(data);
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : 'Card processing error');
-        }
-        finally {
-            setLoading(false);
-        }
-    }, [rawNumber, expiry, cvc, name, zip, apiBaseUrl, authToken, onSuccess]);
-    const fieldStyle = (field) => ({
-        ...inputStyle,
-        ...(focusedField === field ? inputFocusStyle : {}),
-    });
-    const canSubmit = !disabled && !loading && rawNumber.length >= 13 && !!expiry && !!cvc && !!name.trim();
-    return (_jsxs("form", { onSubmit: handleSubmit, style: { display: 'flex', flexDirection: 'column', gap: '12px' }, children: [_jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Card number" }), _jsxs("div", { style: { position: 'relative' }, children: [_jsx("input", { type: "text", inputMode: "numeric", autoComplete: "cc-number", placeholder: "1234 5678 9012 3456", value: number, onChange: e => setNumber(formatCardNumber(e.target.value)), onFocus: () => setFocusedField('number'), onBlur: () => setFocusedField(null), style: { ...fieldStyle('number'), paddingRight: brand ? '44px' : '12px' }, disabled: disabled || loading, maxLength: 19 }), brand && (_jsx("span", { style: { position: 'absolute', right: '12px', top: '50%', transform: 'translateY(-50%)', fontSize: '11px', fontWeight: 600, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase' }, children: brand }))] })] }), _jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Cardholder name" }), _jsx("input", { type: "text", autoComplete: "cc-name", placeholder: "Jane Smith", value: name, onChange: e => setName(e.target.value), onFocus: () => setFocusedField('name'), onBlur: () => setFocusedField(null), style: fieldStyle('name'), disabled: disabled || loading })] }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px' }, children: [_jsxs("div", { children: [_jsx("label", { style: labelStyle, children: "Expiry" }), _jsx("input", { type: "text", inputMode: "numeric", autoComplete: "cc-exp", placeholder: "MM/YY", value: expiry, onChange: e => setExpiry(formatExpiry(e.target.value)), onFocus: () => setFocusedField('expiry'), onBlur: () => setFocusedField(null), style: fieldStyle('expiry'), disabled: disabled || loading, maxLength: 5 })] }), _jsxs("div", { children: [_jsx("label", { style: labelStyle, children: brand === 'amex' ? 'CID (4 digits)' : 'CVC' }), _jsx("input", { type: "password", inputMode: "numeric", autoComplete: "cc-csc", placeholder: brand === 'amex' ? '1234' : '123', value: cvc, onChange: e => setCvc(e.target.value.replace(/\D/g, '').slice(0, cvcLength)), onFocus: () => setFocusedField('cvc'), onBlur: () => setFocusedField(null), style: fieldStyle('cvc'), disabled: disabled || loading, maxLength: cvcLength })] })] }), _jsxs("div", { children: [_jsxs("label", { style: labelStyle, children: ["ZIP / Postal code", ' ', _jsx("span", { style: { color: 'rgba(255,255,255,0.25)' }, children: "(optional)" })] }), _jsx("input", { type: "text", autoComplete: "postal-code", placeholder: "10001", value: zip, onChange: e => setZip(e.target.value.slice(0, 10)), onFocus: () => setFocusedField('zip'), onBlur: () => setFocusedField(null), style: fieldStyle('zip'), disabled: disabled || loading })] }), error && (_jsx("p", { style: { margin: 0, fontSize: '13px', color: '#f87171' }, children: error })), _jsx("button", { type: "submit", disabled: !canSubmit, style: {
-                    width: '100%',
-                    borderRadius: '8px',
-                    border: 'none',
-                    backgroundColor: canSubmit ? 'rgb(250,250,250)' : 'rgba(250,250,250,0.3)',
-                    color: canSubmit ? 'rgb(9,9,11)' : 'rgba(9,9,11,0.5)',
-                    padding: '10px 16px',
-                    fontSize: '14px',
-                    fontWeight: 500,
-                    cursor: canSubmit ? 'pointer' : 'not-allowed',
-                    transition: 'opacity 0.15s',
-                }, children: loading ? 'Processing...' : 'Save card' }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '6px', fontSize: '11px', color: 'rgba(255,255,255,0.3)' }, children: [_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2" }), _jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] }), "Encrypted \u00B7 PCI-compliant \u00B7 Powered by Hanzo Commerce"] })] }));
-}

package/dist/src/billing/components/cost-explorer.d.ts

@@ -1,7 +0,0 @@
-import type { UsageSummary } from '../types';
-export interface CostExplorerProps {
-    usage: UsageSummary | null;
-    usageLoading: boolean;
-}
-export declare function CostExplorer({ usage, usageLoading }: CostExplorerProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=cost-explorer.d.ts.map

package/dist/src/billing/components/cost-explorer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cost-explorer.d.ts","sourceRoot":"","sources":["../../../../src/billing/components/cost-explorer.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAe,MAAM,UAAU,CAAA;AAEzD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAA;IAC1B,YAAY,EAAE,OAAO,CAAA;CACtB;AA2BD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,iBAAiB,2CA6LtE"}

package/dist/src/billing/components/cost-explorer.js

@@ -1,73 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useMemo } from 'react';
-function fmt(amount, currency = 'usd') {
-    return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount);
-}
-const meterLabels = {
-    ai: 'LLM / Chat',
-    api_calls: 'API Requests',
-    storage: 'Storage',
-    gpu: 'GPU Compute',
-    network: 'Network',
-    network_egress: 'Egress',
-};
-const meterColors = {
-    ai: 'bg-violet-500',
-    api_calls: 'bg-indigo-500',
-    storage: 'bg-blue-500',
-    gpu: 'bg-amber-500',
-    network: 'bg-emerald-500',
-    network_egress: 'bg-teal-500',
-};
-export function CostExplorer({ usage, usageLoading }) {
-    const [timeRange, setTimeRange] = useState('30d');
-    const [productFilter, setProductFilter] = useState('all');
-    const [sortKey, setSortKey] = useState('cost');
-    const [sortAsc, setSortAsc] = useState(false);
-    const records = usage?.records ?? [];
-    const totalCost = usage?.totalCost ?? 0;
-    const currency = usage?.currency ?? 'usd';
-    // Available product types from records
-    const productTypes = useMemo(() => {
-        const types = new Set(records.map(r => r.meterId));
-        return Array.from(types);
-    }, [records]);
-    // Filtered + sorted records
-    const filtered = useMemo(() => {
-        let list = productFilter === 'all' ? records : records.filter(r => r.meterId === productFilter);
-        list = [...list].sort((a, b) => {
-            let cmp = 0;
-            if (sortKey === 'cost')
-                cmp = a.cost - b.cost;
-            else if (sortKey === 'usage')
-                cmp = a.current - b.current;
-            else
-                cmp = a.label.localeCompare(b.label);
-            return sortAsc ? cmp : -cmp;
-        });
-        return list;
-    }, [records, productFilter, sortKey, sortAsc]);
-    // Top 5 drivers by cost
-    const topDrivers = useMemo(() => [...records].sort((a, b) => b.cost - a.cost).slice(0, 5), [records]);
-    const handleSort = (key) => {
-        if (sortKey === key)
-            setSortAsc(!sortAsc);
-        else {
-            setSortKey(key);
-            setSortAsc(false);
-        }
-    };
-    const sortIndicator = (key) => sortKey === key ? (sortAsc ? ' \u2191' : ' \u2193') : '';
-    if (usageLoading) {
-        return (_jsx("div", { className: "flex items-center justify-center py-16", children: _jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-text-dim border-t-brand" }) }));
-    }
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3 rounded-xl border border-border bg-bg-card p-4", children: [_jsx("div", { className: "flex gap-1 rounded-lg bg-bg p-0.5", children: ['7d', '30d', '90d'].map(t => (_jsx("button", { type: "button", onClick: () => setTimeRange(t), className: `rounded-md px-3 py-1.5 text-xs font-medium transition ${timeRange === t ? 'bg-bg-elevated text-text' : 'text-text-muted hover:text-text'}`, children: t }, t))) }), _jsxs("select", { value: productFilter, onChange: e => setProductFilter(e.target.value), className: "rounded-lg border border-border bg-bg-input px-3 py-1.5 text-xs text-text outline-none", children: [_jsx("option", { value: "all", children: "All products" }), productTypes.map(t => (_jsx("option", { value: t, children: meterLabels[t] ?? t }, t)))] }), _jsx("select", { disabled: true, className: "rounded-lg border border-border bg-bg-input px-3 py-1.5 text-xs text-text-dim opacity-50 cursor-not-allowed", children: _jsx("option", { children: "Model (coming soon)" }) }), _jsx("select", { disabled: true, className: "rounded-lg border border-border bg-bg-input px-3 py-1.5 text-xs text-text-dim opacity-50 cursor-not-allowed", children: _jsx("option", { children: "Project (coming soon)" }) })] }), _jsxs("div", { className: "rounded-xl border border-border bg-bg-card p-6", children: [_jsxs("div", { className: "flex items-end justify-between mb-4", children: [_jsxs("div", { children: [_jsxs("p", { className: "text-xs uppercase tracking-wide text-text-dim", children: ["Total Cost (", timeRange, ")"] }), _jsx("p", { className: "text-3xl font-bold text-text mt-1", children: fmt(totalCost, currency) })] }), usage?.period && (_jsxs("p", { className: "text-xs text-text-muted", children: [new Date(usage.period.start).toLocaleDateString(), " ", '\u2014', " ", new Date(usage.period.end).toLocaleDateString()] }))] }), _jsx("div", { className: "flex items-center justify-center h-32 rounded-lg bg-bg border border-dashed border-border", children: _jsxs("p", { className: "text-xs text-text-dim", children: ["Cost trend chart ", '\u2014', " coming soon"] }) })] }), topDrivers.length > 0 && (_jsxs("div", { children: [_jsx("h3", { className: "text-xs font-medium uppercase tracking-wide text-text-dim mb-3", children: "Top Drivers" }), _jsx("div", { className: "space-y-2", children: topDrivers.map(rec => {
-                            const pct = totalCost > 0 ? (rec.cost / totalCost) * 100 : 0;
-                            const color = meterColors[rec.meterId] ?? 'bg-gray-500';
-                            return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "w-24 shrink-0 text-xs text-text-muted truncate", children: meterLabels[rec.meterId] ?? rec.label }), _jsx("div", { className: "flex-1 h-4 rounded bg-bg-elevated overflow-hidden", children: _jsx("div", { className: `h-full rounded ${color} transition-all`, style: { width: `${pct}%` } }) }), _jsx("span", { className: "w-20 shrink-0 text-right text-xs font-medium text-text", children: fmt(rec.cost) }), _jsxs("span", { className: "w-12 shrink-0 text-right text-[11px] text-text-muted", children: [pct.toFixed(1), "%"] })] }, rec.meterId));
-                        }) })] })), _jsx("div", { className: "rounded-xl border border-border overflow-hidden", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-bg-elevated text-xs uppercase tracking-wide text-text-muted", children: [_jsxs("th", { className: "px-4 py-3 text-left cursor-pointer select-none", onClick: () => handleSort('label'), children: ["Product", sortIndicator('label')] }), _jsx("th", { className: "px-4 py-3 text-left", children: "Meter" }), _jsxs("th", { className: "px-4 py-3 text-right cursor-pointer select-none", onClick: () => handleSort('usage'), children: ["Usage", sortIndicator('usage')] }), _jsxs("th", { className: "px-4 py-3 text-right cursor-pointer select-none", onClick: () => handleSort('cost'), children: ["Cost", sortIndicator('cost')] }), _jsx("th", { className: "px-4 py-3 text-right", children: "% of Total" })] }) }), _jsx("tbody", { className: "divide-y divide-border", children: filtered.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: 5, className: "px-4 py-8 text-center text-text-muted text-sm", children: "No usage data for this period." }) })) : (filtered.map(rec => {
-                                const pct = totalCost > 0 ? (rec.cost / totalCost) * 100 : 0;
-                                return (_jsxs("tr", { className: "hover:bg-bg-card transition-colors", children: [_jsx("td", { className: "px-4 py-3 text-text font-medium", children: meterLabels[rec.meterId] ?? rec.label }), _jsx("td", { className: "px-4 py-3 text-text-muted", children: rec.meterId }), _jsxs("td", { className: "px-4 py-3 text-right text-text", children: [rec.current.toLocaleString(), " ", rec.unit, rec.limit ? _jsxs("span", { className: "text-text-dim", children: [" / ", rec.limit.toLocaleString()] }) : null] }), _jsx("td", { className: "px-4 py-3 text-right text-text font-medium", children: fmt(rec.cost) }), _jsxs("td", { className: "px-4 py-3 text-right text-text-muted", children: [pct.toFixed(1), "%"] })] }, rec.meterId));
-                            })) }), filtered.length > 0 && (_jsx("tfoot", { children: _jsxs("tr", { className: "bg-bg-elevated font-medium", children: [_jsx("td", { colSpan: 3, className: "px-4 py-3 text-xs uppercase tracking-wide text-text-muted", children: "Total" }), _jsx("td", { className: "px-4 py-3 text-right text-text", children: fmt(totalCost, currency) }), _jsx("td", { className: "px-4 py-3 text-right text-text-muted", children: "100%" })] }) }))] }) })] }));
-}