@sudobility/consumables_pages 0.0.39 → 0.0.41

package/dist/CreditBalanceBadge.d.ts

@@ -3,10 +3,10 @@
  * Displays a pill-shaped badge with a coin icon and the current balance.
  * Renders as a button when onClick is provided, otherwise as a span.
  */
-import type { CreditBalanceBadgeProps } from './types';
+import type { CreditBalanceBadgeProps } from './types.js';
 /**
  * Renders a small inline badge showing the user's credit balance.
  * Blue when balance > 0, red when balance is 0. Returns null when balance is null.
  * @param props - See {@link CreditBalanceBadgeProps} for full prop documentation.
  */
-export declare function CreditBalanceBadge({ balance, isLoading, onClick, className, }: CreditBalanceBadgeProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function CreditBalanceBadge({ balance, isLoading, onClick, className, }: CreditBalanceBadgeProps): import("react").JSX.Element | null;

package/dist/CreditStorePage.d.ts

@@ -3,10 +3,10 @@
  * a responsive grid of purchasable credit packages. Purely presentational --
  * all data and callbacks are passed via props.
  */
-import type { CreditStorePageProps } from './types';
+import type { CreditStorePageProps } from './types.js';
 /**
  * Renders a credit store with balance display, purchase packages grid,
  * loading/error states, and a login prompt for unauthenticated users.
  * @param props - See {@link CreditStorePageProps} for full prop documentation.
  */
-export declare function CreditStorePage({ isAuthenticated, balance, packages, isLoading, isPurchasing, error, onPurchase, onLoginClick, labels, formatters, className, }: CreditStorePageProps): import("react/jsx-runtime").JSX.Element;
+export declare function CreditStorePage({ isAuthenticated, balance, packages, isLoading, isPurchasing, error, onPurchase, onLoginClick, labels, formatters, className, }: CreditStorePageProps): import("react").JSX.Element;

package/dist/CreditStorePage.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * all data and callbacks are passed via props.
  */
 import { colors, ui } from '@sudobility/design';
-import { LoadingSpinner } from './LoadingSpinner';
+import { LoadingSpinner } from './LoadingSpinner.js';
 /**
  * Renders a credit store with balance display, purchase packages grid,
  * loading/error states, and a login prompt for unauthenticated users.

package/dist/LoadingSpinner.d.ts

@@ -7,4 +7,4 @@
  * Renders a centered spinning loading indicator with appropriate ARIA attributes.
  * Internal component -- not exported from the package barrel.
  */
-export declare function LoadingSpinner(): import("react/jsx-runtime").JSX.Element;
+export declare function LoadingSpinner(): import("react").JSX.Element;

package/dist/PurchaseHistoryPage.d.ts

@@ -2,11 +2,11 @@
  * @fileoverview Purchase history page component with responsive table (desktop)
  * and card (mobile) layouts. Supports load-more pagination.
  */
-import type { PurchaseHistoryPageProps } from './types';
+import type { PurchaseHistoryPageProps } from './types.js';
 /**
  * Renders a paginated list of purchase records.
  * Desktop: table with date, credits, source, and amount columns.
  * Mobile: compact card layout.
  * @param props - See {@link PurchaseHistoryPageProps} for full prop documentation.
  */
-export declare function PurchaseHistoryPage({ purchases, isLoading, error, onLoadMore, hasMore, labels, formatters, className, emptyStateComponent, }: PurchaseHistoryPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function PurchaseHistoryPage({ purchases, isLoading, error, onLoadMore, hasMore, labels, formatters, className, emptyStateComponent, }: PurchaseHistoryPageProps): import("react").JSX.Element;

package/dist/PurchaseHistoryPage.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * and card (mobile) layouts. Supports load-more pagination.
  */
 import { colors, ui } from '@sudobility/design';
-import { LoadingSpinner } from './LoadingSpinner';
+import { LoadingSpinner } from './LoadingSpinner.js';
 /**
  * Renders a paginated list of purchase records.
  * Desktop: table with date, credits, source, and amount columns.

package/dist/UsageHistoryPage.d.ts

@@ -2,11 +2,11 @@
  * @fileoverview Usage history page component with responsive table (desktop)
  * and card (mobile) layouts. Supports load-more pagination.
  */
-import type { UsageHistoryPageProps } from './types';
+import type { UsageHistoryPageProps } from './types.js';
 /**
  * Renders a paginated list of usage records.
- * Desktop: table with date and filename columns.
+ * Desktop: table with date, description and (optionally) credits columns.
  * Mobile: compact card layout.
  * @param props - See {@link UsageHistoryPageProps} for full prop documentation.
  */
-export declare function UsageHistoryPage({ usages, isLoading, error, onLoadMore, hasMore, labels, formatters, className, emptyStateComponent, }: UsageHistoryPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function UsageHistoryPage({ usages, isLoading, error, onLoadMore, hasMore, labels, formatters, className, emptyStateComponent, }: UsageHistoryPageProps): import("react").JSX.Element;

package/dist/UsageHistoryPage.js

@@ -4,13 +4,20 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * and card (mobile) layouts. Supports load-more pagination.
  */
 import { colors, ui } from '@sudobility/design';
-import { LoadingSpinner } from './LoadingSpinner';
+import { LoadingSpinner } from './LoadingSpinner.js';
 /**
  * Renders a paginated list of usage records.
- * Desktop: table with date and filename columns.
+ * Desktop: table with date, description and (optionally) credits columns.
  * Mobile: compact card layout.
  * @param props - See {@link UsageHistoryPageProps} for full prop documentation.
  */
 export function UsageHistoryPage({ usages, isLoading, error, onLoadMore, hasMore, labels, formatters, className, emptyStateComponent, }) {
-    return (_jsxs("div", { className: className, children: [_jsx("h1", { className: 'text-2xl font-bold mb-6 text-foreground', children: labels.title }), error && (_jsx("div", { className: `mb-4 p-3 rounded-lg border ${colors.component.alert.error.base} ${colors.component.alert.error.dark}`, role: 'alert', children: _jsx("p", { className: `text-sm ${colors.component.alert.error.icon}`, children: error }) })), isLoading && _jsx(LoadingSpinner, {}), !isLoading && usages.length === 0 && (_jsx(_Fragment, { children: emptyStateComponent ?? (_jsx("p", { className: `${ui.text.muted} text-center py-8`, children: labels.noRecords })) })), !isLoading && usages.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: 'hidden sm:block overflow-x-auto', children: _jsxs("table", { className: 'w-full text-sm', "aria-label": labels.title, children: [_jsx("thead", { children: _jsxs("tr", { className: `border-b ${ui.border.default}`, children: [_jsx("th", { className: `text-left py-3 px-4 font-medium ${ui.text.muted}`, children: labels.columnDate }), _jsx("th", { className: `text-left py-3 px-4 font-medium ${ui.text.muted}`, children: labels.columnFilename })] }) }), _jsx("tbody", { children: usages.map(usage => (_jsxs("tr", { className: `border-b ${ui.border.subtle} hover:bg-accent`, children: [_jsx("td", { className: 'py-3 px-4 text-foreground', children: formatters.formatDate(usage.created_at) }), _jsx("td", { className: 'py-3 px-4 text-muted-foreground', children: usage.filename || '-' })] }, usage.id))) })] }) }), _jsx("div", { className: 'sm:hidden space-y-3', children: usages.map(usage => (_jsxs("div", { className: `p-4 rounded-lg border ${colors.component.card.default.base} ${colors.component.card.default.dark}`, children: [_jsx("p", { className: 'text-sm text-muted-foreground', children: formatters.formatDate(usage.created_at) }), _jsx("p", { className: 'text-sm text-foreground font-medium', children: usage.filename || '-' })] }, usage.id))) }), hasMore && onLoadMore && (_jsx("div", { className: 'mt-4 text-center', children: _jsx("button", { onClick: onLoadMore, className: `px-4 py-2 text-sm font-medium ${ui.text.link}`, children: labels.loadMore }) }))] }))] }));
+    // Whichever the product sets. A file-based product fills `filename`; one that
+    // spends credits on something else fills `reference`.
+    const describe = (usage) => usage.reference || usage.filename || '-';
+    // Absent means one, never zero: rows written before variable amounts existed
+    // spent exactly one credit.
+    const spent = (usage) => usage.credits ?? 1;
+    const showCredits = labels.columnCredits !== undefined;
+    return (_jsxs("div", { className: className, children: [_jsx("h1", { className: 'text-2xl font-bold mb-6 text-foreground', children: labels.title }), error && (_jsx("div", { className: `mb-4 p-3 rounded-lg border ${colors.component.alert.error.base} ${colors.component.alert.error.dark}`, role: 'alert', children: _jsx("p", { className: `text-sm ${colors.component.alert.error.icon}`, children: error }) })), isLoading && _jsx(LoadingSpinner, {}), !isLoading && usages.length === 0 && (_jsx(_Fragment, { children: emptyStateComponent ?? (_jsx("p", { className: `${ui.text.muted} text-center py-8`, children: labels.noRecords })) })), !isLoading && usages.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: 'hidden sm:block overflow-x-auto', children: _jsxs("table", { className: 'w-full text-sm', "aria-label": labels.title, children: [_jsx("thead", { children: _jsxs("tr", { className: `border-b ${ui.border.default}`, children: [_jsx("th", { className: `text-left py-3 px-4 font-medium ${ui.text.muted}`, children: labels.columnDate }), _jsx("th", { className: `text-left py-3 px-4 font-medium ${ui.text.muted}`, children: labels.columnFilename }), showCredits && (_jsx("th", { className: `text-right py-3 px-4 font-medium ${ui.text.muted}`, children: labels.columnCredits }))] }) }), _jsx("tbody", { children: usages.map(usage => (_jsxs("tr", { className: `border-b ${ui.border.subtle} hover:bg-accent`, children: [_jsx("td", { className: 'py-3 px-4 text-foreground', children: formatters.formatDate(usage.created_at) }), _jsx("td", { className: 'py-3 px-4 text-muted-foreground', children: describe(usage) }), showCredits && (_jsx("td", { className: 'py-3 px-4 text-right text-foreground tabular-nums', children: spent(usage) }))] }, usage.id))) })] }) }), _jsx("div", { className: 'sm:hidden space-y-3', children: usages.map(usage => (_jsxs("div", { className: `p-4 rounded-lg border ${colors.component.card.default.base} ${colors.component.card.default.dark}`, children: [_jsx("p", { className: 'text-sm text-muted-foreground', children: formatters.formatDate(usage.created_at) }), _jsx("p", { className: 'text-sm text-foreground font-medium', children: describe(usage) }), showCredits && (_jsxs("p", { className: 'text-sm text-muted-foreground', children: [labels.columnCredits, ": ", spent(usage)] }))] }, usage.id))) }), hasMore && onLoadMore && (_jsx("div", { className: 'mt-4 text-center', children: _jsx("button", { onClick: onLoadMore, className: `px-4 py-2 text-sm font-medium ${ui.text.link}`, children: labels.loadMore }) }))] }))] }));
 }

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-export { CreditStorePage } from './CreditStorePage';
-export { PurchaseHistoryPage } from './PurchaseHistoryPage';
-export { UsageHistoryPage } from './UsageHistoryPage';
-export { CreditBalanceBadge } from './CreditBalanceBadge';
-export type { CreditStorePageProps, CreditStorePageLabels, CreditStorePageFormatters, PurchaseHistoryPageProps, PurchaseHistoryPageLabels, PurchaseHistoryPageFormatters, UsageHistoryPageProps, UsageHistoryPageLabels, UsageHistoryPageFormatters, CreditBalanceBadgeProps, } from './types';
+export { CreditStorePage } from './CreditStorePage.js';
+export { PurchaseHistoryPage } from './PurchaseHistoryPage.js';
+export { UsageHistoryPage } from './UsageHistoryPage.js';
+export { CreditBalanceBadge } from './CreditBalanceBadge.js';
+export type { CreditStorePageProps, CreditStorePageLabels, CreditStorePageFormatters, PurchaseHistoryPageProps, PurchaseHistoryPageLabels, PurchaseHistoryPageFormatters, UsageHistoryPageProps, UsageHistoryPageLabels, UsageHistoryPageFormatters, CreditBalanceBadgeProps, } from './types.js';
 export type { ConsumableSource } from '@sudobility/types';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { CreditStorePage } from './CreditStorePage';
-export { PurchaseHistoryPage } from './PurchaseHistoryPage';
-export { UsageHistoryPage } from './UsageHistoryPage';
-export { CreditBalanceBadge } from './CreditBalanceBadge';
+export { CreditStorePage } from './CreditStorePage.js';
+export { PurchaseHistoryPage } from './PurchaseHistoryPage.js';
+export { UsageHistoryPage } from './UsageHistoryPage.js';
+export { CreditBalanceBadge } from './CreditBalanceBadge.js';

package/dist/types.d.ts

@@ -73,6 +73,13 @@ export interface UsageHistoryPageLabels {
     title: string;
     columnDate: string;
     columnFilename: string;
+    /**
+     * Header for the credits-spent column.
+     *
+     * Opt-in: the column is rendered only when this is set, so a product that
+     * spends exactly one credit per use gains no empty column on upgrade.
+     */
+    columnCredits?: string;
     noRecords: string;
     loadMore: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/consumables_pages",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "description": "Web UI components for consumable credits (credit store, purchase history, usage history)",
   "type": "module",
   "main": "./dist/index.js",
@@ -31,7 +31,7 @@
   },
   "peerDependencies": {
     "@sudobility/consumables_client": "^0.0.18",
-    "@sudobility/types": "^1.9.64",
+    "@sudobility/types": "1.9.65",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },