@sudobility/consumables_pages 0.0.40 → 0.0.41

package/dist/CreditBalanceBadge.d.ts

@@ -9,4 +9,4 @@ import type { CreditBalanceBadgeProps } from './types.js';
  * 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

@@ -9,4 +9,4 @@ import type { CreditStorePageProps } from './types.js';
  * 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/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

@@ -9,4 +9,4 @@ import type { PurchaseHistoryPageProps } from './types.js';
  * 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/UsageHistoryPage.d.ts

@@ -5,8 +5,8 @@
 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

@@ -7,10 +7,17 @@ import { colors, ui } from '@sudobility/design';
 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/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.40",
+  "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"
   },