@sudobility/consumables_pages 0.0.42 → 0.0.43

package/dist/CreditBalanceBadge.d.ts

@@ -1,9 +1,4 @@
-/**
- * @fileoverview Inline credit balance badge component for topbar integration.
- * 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.js';
+import { CreditBalanceBadgeProps } from './types';
 /**
  * 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.

package/dist/CreditStorePage.d.ts

@@ -1,9 +1,4 @@
-/**
- * @fileoverview Credit store page component displaying the user's balance and
- * a responsive grid of purchasable credit packages. Purely presentational --
- * all data and callbacks are passed via props.
- */
-import type { CreditStorePageProps } from './types.js';
+import { CreditStorePageProps } from './types';
 /**
  * Renders a credit store with balance display, purchase packages grid,
  * loading/error states, and a login prompt for unauthenticated users.

package/dist/PurchaseHistoryPage.d.ts

@@ -1,8 +1,4 @@
-/**
- * @fileoverview Purchase history page component with responsive table (desktop)
- * and card (mobile) layouts. Supports load-more pagination.
- */
-import type { PurchaseHistoryPageProps } from './types.js';
+import { PurchaseHistoryPageProps } from './types';
 /**
  * Renders a paginated list of purchase records.
  * Desktop: table with date, credits, source, and amount columns.

package/dist/UsageHistoryPage.d.ts

@@ -1,8 +1,4 @@
-/**
- * @fileoverview Usage history page component with responsive table (desktop)
- * and card (mobile) layouts. Supports load-more pagination.
- */
-import type { UsageHistoryPageProps } from './types.js';
+import { UsageHistoryPageProps } from './types';
 /**
  * Renders a paginated list of usage records.
  * Desktop: table with date, description and (optionally) credits columns.

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-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 { 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 type { ConsumableSource } from '@sudobility/types';

package/dist/index.js

@@ -1,4 +1,638 @@
-export { CreditStorePage } from './CreditStorePage.js';
-export { PurchaseHistoryPage } from './PurchaseHistoryPage.js';
-export { UsageHistoryPage } from './UsageHistoryPage.js';
-export { CreditBalanceBadge } from './CreditBalanceBadge.js';
+import { jsx as e, jsxs as d, Fragment as p } from "react/jsx-runtime";
+const k = {
+  button: {
+    // Primary button - main brand actions
+    primary: {
+      base: "bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white border-transparent",
+      dark: "dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800 dark:text-white",
+      focus: "focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-blue-400",
+      disabled: "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-blue-600"
+    },
+    // Secondary button - alternative actions
+    secondary: {
+      base: "bg-gray-100 hover:bg-gray-200 active:bg-gray-300 text-gray-900 border-transparent",
+      dark: "dark:bg-gray-800 dark:hover:bg-gray-700 dark:active:bg-gray-600 dark:text-gray-50",
+      focus: "focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2",
+      disabled: "disabled:opacity-50 disabled:cursor-not-allowed"
+    },
+    // Outline button - secondary emphasis
+    outline: {
+      base: "bg-transparent hover:bg-gray-50 active:bg-gray-100 text-gray-900 border-gray-300",
+      dark: "dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-50 dark:border-gray-600",
+      focus: "focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
+      disabled: "disabled:opacity-50 disabled:cursor-not-allowed"
+    },
+    // Ghost button - minimal emphasis
+    ghost: {
+      base: "bg-transparent hover:bg-gray-100 active:bg-gray-200 text-gray-700 border-transparent",
+      dark: "dark:bg-transparent dark:hover:bg-gray-800 dark:active:bg-gray-700 dark:text-gray-300",
+      focus: "focus-visible:ring-2 focus-visible:ring-gray-500 focus-visible:ring-offset-2",
+      disabled: "disabled:opacity-50 disabled:cursor-not-allowed"
+    },
+    // Destructive button - dangerous actions
+    destructive: {
+      base: "bg-red-600 hover:bg-red-700 active:bg-red-800 text-white border-transparent",
+      dark: "dark:bg-red-600 dark:hover:bg-red-700 dark:active:bg-red-800 dark:text-white",
+      focus: "focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2",
+      disabled: "disabled:opacity-50 disabled:cursor-not-allowed"
+    },
+    // Success button - positive actions
+    success: {
+      base: "bg-green-600 hover:bg-green-700 active:bg-green-800 text-white border-transparent",
+      dark: "dark:bg-green-600 dark:hover:bg-green-700 dark:active:bg-green-800 dark:text-white",
+      focus: "focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2",
+      disabled: "disabled:opacity-50 disabled:cursor-not-allowed"
+    },
+    // Link button - text-like appearance
+    link: {
+      base: "bg-transparent hover:bg-transparent active:bg-transparent text-blue-600 border-transparent underline-offset-4 hover:underline",
+      dark: "dark:text-blue-400",
+      focus: "focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
+      disabled: "disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline"
+    },
+    // Gradient variants for special emphasis
+    gradient: {
+      primary: "bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white border-transparent shadow-lg hover:shadow-xl",
+      secondary: "bg-gradient-to-r from-gray-100 to-gray-200 hover:from-gray-200 hover:to-gray-300 text-gray-900 border-transparent",
+      success: "bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white border-transparent"
+    }
+  },
+  card: {
+    // Default card styling
+    default: {
+      base: "bg-white border-gray-200",
+      dark: "dark:bg-gray-800 dark:border-gray-700",
+      hover: "hover:shadow-md transition-shadow duration-200"
+    },
+    // Elevated card with shadow
+    elevated: {
+      base: "bg-white shadow-sm border-gray-200",
+      dark: "dark:bg-gray-800 dark:border-gray-700",
+      hover: "hover:shadow-lg transition-shadow duration-200"
+    },
+    // Interactive card that can be clicked
+    interactive: {
+      base: "bg-white border-gray-200 cursor-pointer",
+      dark: "dark:bg-gray-800 dark:border-gray-700",
+      hover: "hover:bg-gray-50 hover:shadow-md dark:hover:bg-gray-700 transition-all duration-200",
+      focus: "focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+    },
+    // Success state card
+    success: {
+      base: "bg-green-50 border-green-200",
+      dark: "dark:bg-green-900/20 dark:border-green-800",
+      text: "text-green-800 dark:text-green-200"
+    },
+    // Warning state card
+    warning: {
+      base: "bg-orange-50 border-orange-200",
+      dark: "dark:bg-orange-900/20 dark:border-orange-800",
+      text: "text-orange-800 dark:text-orange-200"
+    },
+    // Attention state card
+    attention: {
+      base: "bg-amber-50 border-amber-200",
+      dark: "dark:bg-amber-900/20 dark:border-amber-800",
+      text: "text-amber-800 dark:text-amber-200"
+    },
+    // Error state card
+    error: {
+      base: "bg-red-50 border-red-200",
+      dark: "dark:bg-red-900/20 dark:border-red-800",
+      text: "text-red-800 dark:text-red-200"
+    }
+  },
+  badge: {
+    // Default badge
+    default: {
+      base: "bg-gray-100 text-gray-800",
+      dark: "dark:bg-gray-800 dark:text-gray-300"
+    },
+    // Primary badge
+    primary: {
+      base: "bg-blue-100 text-blue-800",
+      dark: "dark:bg-blue-900/30 dark:text-blue-300"
+    },
+    // Success badge
+    success: {
+      base: "bg-green-100 text-green-800",
+      dark: "dark:bg-green-900/30 dark:text-green-300"
+    },
+    // Warning badge
+    warning: {
+      base: "bg-orange-100 text-orange-800",
+      dark: "dark:bg-orange-900/30 dark:text-orange-300"
+    },
+    // Attention badge
+    attention: {
+      base: "bg-amber-100 text-amber-800",
+      dark: "dark:bg-amber-900/30 dark:text-amber-300"
+    },
+    // Error badge
+    error: {
+      base: "bg-red-100 text-red-800",
+      dark: "dark:bg-red-900/30 dark:text-red-300"
+    },
+    // Web3 specific badges
+    ethereum: {
+      base: "bg-blue-100 text-blue-800",
+      dark: "dark:bg-blue-900/30 dark:text-blue-300"
+    },
+    solana: {
+      base: "bg-purple-100 text-purple-800",
+      dark: "dark:bg-purple-900/30 dark:text-purple-300"
+    },
+    polygon: {
+      base: "bg-purple-50 text-purple-800",
+      dark: "dark:bg-purple-900/20 dark:text-purple-300"
+    },
+    bitcoin: {
+      base: "bg-orange-100 text-orange-800",
+      dark: "dark:bg-orange-900/30 dark:text-orange-300"
+    },
+    binance: {
+      base: "bg-amber-100 text-amber-800",
+      dark: "dark:bg-amber-900/30 dark:text-amber-300"
+    },
+    cardano: {
+      base: "bg-blue-50 text-blue-900",
+      dark: "dark:bg-blue-900/20 dark:text-blue-200"
+    },
+    avalanche: {
+      base: "bg-red-100 text-red-800",
+      dark: "dark:bg-red-900/30 dark:text-red-300"
+    },
+    arbitrum: {
+      base: "bg-gray-100 text-gray-800",
+      dark: "dark:bg-gray-800/50 dark:text-gray-300"
+    },
+    optimism: {
+      base: "bg-red-50 text-red-900",
+      dark: "dark:bg-red-900/20 dark:text-red-200"
+    }
+  },
+  alert: {
+    // Info alert
+    info: {
+      base: "bg-blue-50 border-blue-200 text-blue-800",
+      dark: "dark:bg-blue-900/20 dark:border-blue-800 dark:text-blue-200",
+      icon: "text-blue-600 dark:text-blue-400"
+    },
+    // Success alert
+    success: {
+      base: "bg-green-50 border-green-200 text-green-800",
+      dark: "dark:bg-green-900/20 dark:border-green-800 dark:text-green-200",
+      icon: "text-green-600 dark:text-green-400"
+    },
+    // Warning alert
+    warning: {
+      base: "bg-orange-50 border-orange-200 text-orange-800",
+      dark: "dark:bg-orange-900/20 dark:border-orange-800 dark:text-orange-200",
+      icon: "text-orange-600 dark:text-orange-400"
+    },
+    // Attention alert
+    attention: {
+      base: "bg-amber-50 border-amber-200 text-amber-800",
+      dark: "dark:bg-amber-900/20 dark:border-amber-800 dark:text-amber-200",
+      icon: "text-amber-600 dark:text-amber-400"
+    },
+    // Error alert
+    error: {
+      base: "bg-red-50 border-red-200 text-red-800",
+      dark: "dark:bg-red-900/20 dark:border-red-800 dark:text-red-200",
+      icon: "text-red-600 dark:text-red-400"
+    }
+  }
+}, v = {
+  get button() {
+    return k.button;
+  },
+  get card() {
+    return k.card;
+  },
+  get badge() {
+    return k.badge;
+  },
+  get alert() {
+    return k.alert;
+  }
+}, t = {
+  // Component-specific colors (use for components)
+  component: v
+}, r = (n, l) => l, i = {
+  // Border utilities (theme-aware getter)
+  get border() {
+    return {
+      default: r("border-border", "border-gray-200 dark:border-gray-700"),
+      subtle: r("border-border/50", "border-gray-100 dark:border-gray-800"),
+      radius: "rounded-lg",
+      radiusSm: "rounded-md",
+      radiusLg: "rounded-xl",
+      radiusFull: "rounded-full"
+    };
+  },
+  // Typography utilities (theme-aware getter; legacy fallback when no theme)
+  get text() {
+    return {
+      // Headings
+      h1: `text-3xl sm:text-4xl lg:text-5xl font-bold ${r("text-foreground", "text-gray-900 dark:text-white")} leading-tight tracking-tight`,
+      h2: `text-2xl sm:text-3xl lg:text-4xl font-bold ${r("text-foreground", "text-gray-900 dark:text-white")} leading-tight tracking-tight`,
+      h3: `text-xl sm:text-2xl font-semibold ${r("text-foreground", "text-gray-900 dark:text-white")} leading-tight tracking-tight`,
+      h4: `text-lg sm:text-xl font-semibold ${r("text-foreground", "text-gray-900 dark:text-white")} leading-tight tracking-tight`,
+      h5: `text-base sm:text-lg font-semibold ${r("text-foreground", "text-gray-900 dark:text-white")} leading-tight tracking-tight`,
+      h6: `text-base font-semibold ${r("text-foreground", "text-gray-900 dark:text-white")} leading-tight tracking-tight`,
+      // Display headings
+      display: `text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold ${r("text-foreground", "text-gray-900 dark:text-white")} leading-none tracking-tight`,
+      hero: `text-6xl sm:text-7xl md:text-8xl lg:text-9xl font-black ${r("text-foreground", "text-gray-900 dark:text-white")} leading-none tracking-tight`,
+      // Body text
+      body: `text-base font-normal ${r("text-foreground", "text-gray-700 dark:text-gray-300")} leading-relaxed`,
+      bodyLarge: `text-lg font-normal ${r("text-foreground", "text-gray-700 dark:text-gray-300")} leading-relaxed`,
+      bodySmall: `text-sm font-normal ${r("text-muted-foreground", "text-gray-600 dark:text-gray-400")} leading-relaxed`,
+      // Lead text (introductory paragraphs)
+      lead: `text-xl font-normal ${r("text-foreground", "text-gray-700 dark:text-gray-300")} leading-relaxed`,
+      leadLarge: `text-2xl font-normal ${r("text-foreground", "text-gray-700 dark:text-gray-300")} leading-relaxed`,
+      // Specialized text
+      caption: `text-sm font-normal ${r("text-muted-foreground", "text-gray-500 dark:text-gray-500")} leading-normal`,
+      label: `text-sm font-medium ${r("text-foreground", "text-gray-700 dark:text-gray-300")}`,
+      helper: `text-sm font-normal ${r("text-muted-foreground", "text-gray-500 dark:text-gray-500")}`,
+      // Links
+      link: `${r("text-primary hover:text-primary/80 decoration-primary", "text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 decoration-blue-600 dark:decoration-blue-400")} underline underline-offset-2 transition-colors duration-150`,
+      linkSubtle: `${r("text-primary hover:text-primary/80", "text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300")} no-underline hover:underline hover:underline-offset-2 transition-all duration-150`,
+      linkMuted: `${r("text-muted-foreground hover:text-foreground decoration-border", "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 decoration-gray-400 hover:decoration-gray-600")} underline underline-offset-2 transition-colors duration-150`,
+      // Code text
+      code: `font-mono text-sm font-medium ${r("bg-muted text-foreground", "text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800")} px-1.5 py-0.5 rounded`,
+      codeBlock: `font-mono text-sm font-normal ${r("bg-muted text-foreground", "text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800")} p-4 rounded-lg overflow-x-auto leading-relaxed`,
+      // Status text
+      success: `${r("text-success", "text-green-700 dark:text-green-300")} font-medium`,
+      warning: `${r("text-warning", "text-orange-700 dark:text-orange-300")} font-medium`,
+      attention: `${r("text-warning", "text-amber-700 dark:text-amber-300")} font-medium`,
+      error: `${r("text-destructive", "text-red-700 dark:text-red-300")} font-medium`,
+      info: `${r("text-info", "text-blue-700 dark:text-blue-300")} font-medium`,
+      // Emphasis variants
+      emphasis: `font-medium ${r("text-foreground", "text-gray-900 dark:text-gray-100")}`,
+      strong: `font-semibold ${r("text-foreground", "text-gray-900 dark:text-gray-100")}`,
+      muted: r("text-muted-foreground", "text-gray-500 dark:text-gray-500"),
+      // Uppercase labels
+      uppercase: `text-xs font-semibold ${r("text-muted-foreground", "text-gray-500 dark:text-gray-500")} uppercase tracking-wider`
+    };
+  }
+};
+function y() {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: "flex justify-center py-12",
+      role: "status",
+      "aria-label": "Loading",
+      "aria-busy": "true",
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: `animate-spin rounded-full h-8 w-8 border-b-2 ${t.component.alert.info.icon.replace(/text-/g, "border-")}`
+        }
+      )
+    }
+  );
+}
+function N({
+  isAuthenticated: n,
+  balance: l,
+  packages: g,
+  isLoading: c,
+  isPurchasing: u,
+  error: o,
+  onPurchase: x,
+  onLoginClick: f,
+  labels: b,
+  formatters: a,
+  className: h
+}) {
+  return /* @__PURE__ */ d("div", { className: h, children: [
+    /* @__PURE__ */ e("h1", { className: "text-2xl font-bold mb-6 text-foreground", children: b.title }),
+    n && l !== null && /* @__PURE__ */ d(
+      "div",
+      {
+        className: `mb-8 p-4 rounded-lg border ${t.component.alert.info.base} ${t.component.alert.info.dark}`,
+        children: [
+          /* @__PURE__ */ e(
+            "p",
+            {
+              className: `text-sm font-medium ${t.component.alert.info.icon}`,
+              children: b.currentBalanceLabel
+            }
+          ),
+          /* @__PURE__ */ e("p", { className: "text-3xl font-bold", children: a.formatCredits(l) })
+        ]
+      }
+    ),
+    o && /* @__PURE__ */ d(
+      "div",
+      {
+        className: `mb-6 p-4 rounded-lg border ${t.component.alert.error.base} ${t.component.alert.error.dark}`,
+        role: "alert",
+        children: [
+          /* @__PURE__ */ e("p", { className: "text-sm font-medium", children: b.errorTitle }),
+          /* @__PURE__ */ e("p", { className: `text-sm ${t.component.alert.error.icon}`, children: o })
+        ]
+      }
+    ),
+    !n && /* @__PURE__ */ d(
+      "div",
+      {
+        className: `mb-6 p-4 rounded-lg border ${t.component.alert.warning.base} ${t.component.alert.warning.dark}`,
+        children: [
+          /* @__PURE__ */ e("p", { className: "text-sm", children: b.loginRequired }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: f,
+              className: `mt-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors ${t.component.button.primary.base} ${t.component.button.primary.dark}`,
+              children: b.loginButton ?? "Log in"
+            }
+          )
+        ]
+      }
+    ),
+    c && /* @__PURE__ */ e(y, {}),
+    !c && g.length === 0 && /* @__PURE__ */ e("p", { className: `${i.text.muted} text-center py-8`, children: b.noProducts }),
+    !c && g.length > 0 && /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: g.map((m) => /* @__PURE__ */ e(
+      "div",
+      {
+        className: `p-6 rounded-xl border shadow-sm hover:shadow-md transition-shadow ${t.component.card.default.base} ${t.component.card.default.dark}`,
+        children: /* @__PURE__ */ d("div", { className: "text-center", children: [
+          /* @__PURE__ */ e("p", { className: "text-3xl font-bold text-foreground", children: a.formatCredits(m.credits) }),
+          a.getPackageDescription && /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground mt-1", children: a.getPackageDescription(m.packageId) }),
+          /* @__PURE__ */ e(
+            "p",
+            {
+              className: `text-xl font-semibold mt-3 ${t.component.alert.info.icon}`,
+              children: m.priceString
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => x(m.packageId),
+              disabled: u || !n,
+              className: `mt-4 w-full px-4 py-2.5 font-medium rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 ${t.component.button.primary.base} ${t.component.button.primary.dark}`,
+              children: u ? b.purchasingButton : b.purchaseButton
+            }
+          )
+        ] })
+      },
+      m.packageId
+    )) })
+  ] });
+}
+function w({
+  purchases: n,
+  isLoading: l,
+  error: g,
+  onLoadMore: c,
+  hasMore: u,
+  labels: o,
+  formatters: x,
+  className: f,
+  emptyStateComponent: b
+}) {
+  return /* @__PURE__ */ d("div", { className: f, children: [
+    /* @__PURE__ */ e("h1", { className: "text-2xl font-bold mb-6 text-foreground", children: o.title }),
+    g && /* @__PURE__ */ e(
+      "div",
+      {
+        className: `mb-4 p-3 rounded-lg border ${t.component.alert.error.base} ${t.component.alert.error.dark}`,
+        role: "alert",
+        children: /* @__PURE__ */ e("p", { className: `text-sm ${t.component.alert.error.icon}`, children: g })
+      }
+    ),
+    l && /* @__PURE__ */ e(y, {}),
+    !l && n.length === 0 && /* @__PURE__ */ e(p, { children: b ?? /* @__PURE__ */ e("p", { className: `${i.text.muted} text-center py-8`, children: o.noRecords }) }),
+    !l && n.length > 0 && /* @__PURE__ */ d(p, { children: [
+      /* @__PURE__ */ e("div", { className: "hidden sm:block overflow-x-auto", children: /* @__PURE__ */ d("table", { className: "w-full text-sm", "aria-label": o.title, children: [
+        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ d("tr", { className: `border-b ${i.border.default}`, children: [
+          /* @__PURE__ */ e(
+            "th",
+            {
+              className: `text-left py-3 px-4 font-medium ${i.text.muted}`,
+              children: o.columnDate
+            }
+          ),
+          /* @__PURE__ */ e(
+            "th",
+            {
+              className: `text-right py-3 px-4 font-medium ${i.text.muted}`,
+              children: o.columnCredits
+            }
+          ),
+          /* @__PURE__ */ e(
+            "th",
+            {
+              className: `text-left py-3 px-4 font-medium ${i.text.muted}`,
+              children: o.columnSource
+            }
+          ),
+          /* @__PURE__ */ e(
+            "th",
+            {
+              className: `text-right py-3 px-4 font-medium ${i.text.muted}`,
+              children: o.columnAmount
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ e("tbody", { children: n.map((a) => /* @__PURE__ */ d(
+          "tr",
+          {
+            className: `border-b ${i.border.subtle} hover:bg-accent`,
+            children: [
+              /* @__PURE__ */ e("td", { className: "py-3 px-4 text-foreground", children: x.formatDate(a.created_at) }),
+              /* @__PURE__ */ d("td", { className: "py-3 px-4 text-right font-medium text-success", children: [
+                "+",
+                a.credits
+              ] }),
+              /* @__PURE__ */ e("td", { className: "py-3 px-4 text-muted-foreground", children: x.formatSource(
+                a.source
+              ) }),
+              /* @__PURE__ */ e("td", { className: "py-3 px-4 text-right text-muted-foreground", children: a.price_cents != null && a.currency ? x.formatAmount(
+                a.price_cents,
+                a.currency
+              ) : "-" })
+            ]
+          },
+          a.id
+        )) })
+      ] }) }),
+      /* @__PURE__ */ e("div", { className: "sm:hidden space-y-3", children: n.map((a) => /* @__PURE__ */ e(
+        "div",
+        {
+          className: `p-4 rounded-lg border ${t.component.card.default.base} ${t.component.card.default.dark}`,
+          children: /* @__PURE__ */ d("div", { className: "flex justify-between items-start", children: [
+            /* @__PURE__ */ d("div", { children: [
+              /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: x.formatDate(a.created_at) }),
+              /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: x.formatSource(
+                a.source
+              ) })
+            ] }),
+            /* @__PURE__ */ d("div", { className: "text-right", children: [
+              /* @__PURE__ */ d("p", { className: "font-medium text-success", children: [
+                "+",
+                a.credits
+              ] }),
+              a.price_cents != null && a.currency && /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: x.formatAmount(
+                a.price_cents,
+                a.currency
+              ) })
+            ] })
+          ] })
+        },
+        a.id
+      )) }),
+      u && c && /* @__PURE__ */ e("div", { className: "mt-4 text-center", children: /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: c,
+          className: `px-4 py-2 text-sm font-medium ${i.text.link}`,
+          children: o.loadMore
+        }
+      ) })
+    ] })
+  ] });
+}
+function C({
+  usages: n,
+  isLoading: l,
+  error: g,
+  onLoadMore: c,
+  hasMore: u,
+  labels: o,
+  formatters: x,
+  className: f,
+  emptyStateComponent: b
+}) {
+  const a = (s) => s.reference || s.filename || "-", h = (s) => s.credits ?? 1, m = o.columnCredits !== void 0;
+  return /* @__PURE__ */ d("div", { className: f, children: [
+    /* @__PURE__ */ e("h1", { className: "text-2xl font-bold mb-6 text-foreground", children: o.title }),
+    g && /* @__PURE__ */ e(
+      "div",
+      {
+        className: `mb-4 p-3 rounded-lg border ${t.component.alert.error.base} ${t.component.alert.error.dark}`,
+        role: "alert",
+        children: /* @__PURE__ */ e("p", { className: `text-sm ${t.component.alert.error.icon}`, children: g })
+      }
+    ),
+    l && /* @__PURE__ */ e(y, {}),
+    !l && n.length === 0 && /* @__PURE__ */ e(p, { children: b ?? /* @__PURE__ */ e("p", { className: `${i.text.muted} text-center py-8`, children: o.noRecords }) }),
+    !l && n.length > 0 && /* @__PURE__ */ d(p, { children: [
+      /* @__PURE__ */ e("div", { className: "hidden sm:block overflow-x-auto", children: /* @__PURE__ */ d("table", { className: "w-full text-sm", "aria-label": o.title, children: [
+        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ d("tr", { className: `border-b ${i.border.default}`, children: [
+          /* @__PURE__ */ e(
+            "th",
+            {
+              className: `text-left py-3 px-4 font-medium ${i.text.muted}`,
+              children: o.columnDate
+            }
+          ),
+          /* @__PURE__ */ e(
+            "th",
+            {
+              className: `text-left py-3 px-4 font-medium ${i.text.muted}`,
+              children: o.columnFilename
+            }
+          ),
+          m && /* @__PURE__ */ e(
+            "th",
+            {
+              className: `text-right py-3 px-4 font-medium ${i.text.muted}`,
+              children: o.columnCredits
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ e("tbody", { children: n.map((s) => /* @__PURE__ */ d(
+          "tr",
+          {
+            className: `border-b ${i.border.subtle} hover:bg-accent`,
+            children: [
+              /* @__PURE__ */ e("td", { className: "py-3 px-4 text-foreground", children: x.formatDate(s.created_at) }),
+              /* @__PURE__ */ e("td", { className: "py-3 px-4 text-muted-foreground", children: a(s) }),
+              m && /* @__PURE__ */ e("td", { className: "py-3 px-4 text-right text-foreground tabular-nums", children: h(s) })
+            ]
+          },
+          s.id
+        )) })
+      ] }) }),
+      /* @__PURE__ */ e("div", { className: "sm:hidden space-y-3", children: n.map((s) => /* @__PURE__ */ d(
+        "div",
+        {
+          className: `p-4 rounded-lg border ${t.component.card.default.base} ${t.component.card.default.dark}`,
+          children: [
+            /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: x.formatDate(s.created_at) }),
+            /* @__PURE__ */ e("p", { className: "text-sm text-foreground font-medium", children: a(s) }),
+            m && /* @__PURE__ */ d("p", { className: "text-sm text-muted-foreground", children: [
+              o.columnCredits,
+              ": ",
+              h(s)
+            ] })
+          ]
+        },
+        s.id
+      )) }),
+      u && c && /* @__PURE__ */ e("div", { className: "mt-4 text-center", children: /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: c,
+          className: `px-4 py-2 text-sm font-medium ${i.text.link}`,
+          children: o.loadMore
+        }
+      ) })
+    ] })
+  ] });
+}
+function S({
+  balance: n,
+  isLoading: l,
+  onClick: g,
+  className: c
+}) {
+  return l ? /* @__PURE__ */ e(
+    "span",
+    {
+      className: `inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium ${i.text.muted} ${c || ""}`,
+      role: "status",
+      "aria-label": "Loading balance",
+      "aria-busy": "true",
+      children: /* @__PURE__ */ e("span", { className: "animate-pulse", children: "..." })
+    }
+  ) : n === null ? null : /* @__PURE__ */ d(
+    g ? "button" : "span",
+    {
+      onClick: g,
+      "aria-label": g ? `Credit balance: ${n}` : void 0,
+      className: `inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${n > 0 ? `${t.component.badge.primary.base} ${t.component.badge.primary.dark}` : `${t.component.badge.error.base} ${t.component.badge.error.dark}`} ${g ? "cursor-pointer hover:opacity-80" : ""} ${c || ""}`,
+      children: [
+        /* @__PURE__ */ e(
+          "svg",
+          {
+            className: "w-3.5 h-3.5",
+            fill: "currentColor",
+            viewBox: "0 0 20 20",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ e(
+              "path",
+              {
+                fillRule: "evenodd",
+                d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z",
+                clipRule: "evenodd"
+              }
+            )
+          }
+        ),
+        n
+      ]
+    }
+  );
+}
+export {
+  S as CreditBalanceBadge,
+  N as CreditStorePage,
+  w as PurchaseHistoryPage,
+  C as UsageHistoryPage
+};

package/dist/types.d.ts

@@ -1,12 +1,6 @@
-/**
- * @fileoverview Type definitions for all consumables page components.
- * Defines Labels, Formatters, and Props interfaces for CreditStorePage,
- * PurchaseHistoryPage, UsageHistoryPage, and CreditBalanceBadge.
- * All user-facing strings are defined via Labels for i18n support.
- */
-import type { CreditPackage } from '@sudobility/consumables_client';
-import type { ConsumablePurchaseRecord, ConsumableSource, ConsumableUsageRecord } from '@sudobility/types';
-import type { ReactNode } from 'react';
+import { CreditPackage } from '@sudobility/consumables_client';
+import { ConsumablePurchaseRecord, ConsumableSource, ConsumableUsageRecord } from '@sudobility/types';
+import { ReactNode } from 'react';
 /** Localizable label strings for the CreditStorePage component. */
 export interface CreditStorePageLabels {
     title: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/consumables_pages",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "description": "Web UI components for consumable credits (credit store, purchase history, usage history)",
   "type": "module",
   "main": "./dist/index.js",
@@ -17,7 +17,7 @@
     "CLAUDE.md"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
+    "build": "tsc && vite build",
     "dev": "tsc --watch",
     "clean": "rm -rf dist",
     "typecheck": "bunx tsc --noEmit",
@@ -46,6 +46,7 @@
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-react": "^5.1.4",
+    "ajv": "^8.17.1",
     "eslint": "^9.0.0",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.0",

package/dist/CreditBalanceBadge.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @fileoverview Inline credit balance badge component for topbar integration.
- * 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 { colors, ui } from '@sudobility/design';
-/**
- * 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 function CreditBalanceBadge({ balance, isLoading, onClick, className, }) {
-    if (isLoading) {
-        return (_jsx("span", { className: `inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium ${ui.text.muted} ${className || ''}`, role: 'status', "aria-label": 'Loading balance', "aria-busy": 'true', children: _jsx("span", { className: 'animate-pulse', children: "..." }) }));
-    }
-    if (balance === null)
-        return null;
-    const Wrapper = onClick ? 'button' : 'span';
-    return (_jsxs(Wrapper, { onClick: onClick, "aria-label": onClick ? `Credit balance: ${balance}` : undefined, className: `inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${balance > 0
-            ? `${colors.component.badge.primary.base} ${colors.component.badge.primary.dark}`
-            : `${colors.component.badge.error.base} ${colors.component.badge.error.dark}`} ${onClick ? 'cursor-pointer hover:opacity-80' : ''} ${className || ''}`, children: [_jsx("svg", { className: 'w-3.5 h-3.5', fill: 'currentColor', viewBox: '0 0 20 20', "aria-hidden": 'true', children: _jsx("path", { fillRule: 'evenodd', d: 'M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z', clipRule: 'evenodd' }) }), balance] }));
-}

package/dist/CreditStorePage.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @fileoverview Credit store page component displaying the user's balance and
- * a responsive grid of purchasable credit packages. Purely presentational --
- * all data and callbacks are passed via props.
- */
-import { colors, ui } from '@sudobility/design';
-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.
- * @param props - See {@link CreditStorePageProps} for full prop documentation.
- */
-export function CreditStorePage({ isAuthenticated, balance, packages, isLoading, isPurchasing, error, onPurchase, onLoginClick, labels, formatters, className, }) {
-    return (_jsxs("div", { className: className, children: [_jsx("h1", { className: 'text-2xl font-bold mb-6 text-foreground', children: labels.title }), isAuthenticated && balance !== null && (_jsxs("div", { className: `mb-8 p-4 rounded-lg border ${colors.component.alert.info.base} ${colors.component.alert.info.dark}`, children: [_jsx("p", { className: `text-sm font-medium ${colors.component.alert.info.icon}`, children: labels.currentBalanceLabel }), _jsx("p", { className: 'text-3xl font-bold', children: formatters.formatCredits(balance) })] })), error && (_jsxs("div", { className: `mb-6 p-4 rounded-lg border ${colors.component.alert.error.base} ${colors.component.alert.error.dark}`, role: 'alert', children: [_jsx("p", { className: 'text-sm font-medium', children: labels.errorTitle }), _jsx("p", { className: `text-sm ${colors.component.alert.error.icon}`, children: error })] })), !isAuthenticated && (_jsxs("div", { className: `mb-6 p-4 rounded-lg border ${colors.component.alert.warning.base} ${colors.component.alert.warning.dark}`, children: [_jsx("p", { className: 'text-sm', children: labels.loginRequired }), _jsx("button", { onClick: onLoginClick, className: `mt-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors ${colors.component.button.primary.base} ${colors.component.button.primary.dark}`, children: labels.loginButton ?? 'Log in' })] })), isLoading && _jsx(LoadingSpinner, {}), !isLoading && packages.length === 0 && (_jsx("p", { className: `${ui.text.muted} text-center py-8`, children: labels.noProducts })), !isLoading && packages.length > 0 && (_jsx("div", { className: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4', children: packages.map(pkg => (_jsx("div", { className: `p-6 rounded-xl border shadow-sm hover:shadow-md transition-shadow ${colors.component.card.default.base} ${colors.component.card.default.dark}`, children: _jsxs("div", { className: 'text-center', children: [_jsx("p", { className: 'text-3xl font-bold text-foreground', children: formatters.formatCredits(pkg.credits) }), formatters.getPackageDescription && (_jsx("p", { className: 'text-sm text-muted-foreground mt-1', children: formatters.getPackageDescription(pkg.packageId) })), _jsx("p", { className: `text-xl font-semibold mt-3 ${colors.component.alert.info.icon}`, children: pkg.priceString }), _jsx("button", { onClick: () => onPurchase(pkg.packageId), disabled: isPurchasing || !isAuthenticated, className: `mt-4 w-full px-4 py-2.5 font-medium rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 ${colors.component.button.primary.base} ${colors.component.button.primary.dark}`, children: isPurchasing
-                                    ? labels.purchasingButton
-                                    : labels.purchaseButton })] }) }, pkg.packageId))) }))] }));
-}

package/dist/LoadingSpinner.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @fileoverview Shared internal loading spinner component used across all page
- * components. Extracted to reduce markup duplication and centralize accessibility
- * attributes.
- */
-import { colors } from '@sudobility/design';
-/**
- * Renders a centered spinning loading indicator with appropriate ARIA attributes.
- * Internal component -- not exported from the package barrel.
- */
-export function LoadingSpinner() {
-    return (_jsx("div", { className: 'flex justify-center py-12', role: 'status', "aria-label": 'Loading', "aria-busy": 'true', children: _jsx("div", { className: `animate-spin rounded-full h-8 w-8 border-b-2 ${colors.component.alert.info.icon.replace(/text-/g, 'border-')}` }) }));
-}

package/dist/PurchaseHistoryPage.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @fileoverview Purchase history page component with responsive table (desktop)
- * and card (mobile) layouts. Supports load-more pagination.
- */
-import { colors, ui } from '@sudobility/design';
-import { LoadingSpinner } from './LoadingSpinner.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 function PurchaseHistoryPage({ purchases, 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 && purchases.length === 0 && (_jsx(_Fragment, { children: emptyStateComponent ?? (_jsx("p", { className: `${ui.text.muted} text-center py-8`, children: labels.noRecords })) })), !isLoading && purchases.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-right py-3 px-4 font-medium ${ui.text.muted}`, children: labels.columnCredits }), _jsx("th", { className: `text-left py-3 px-4 font-medium ${ui.text.muted}`, children: labels.columnSource }), _jsx("th", { className: `text-right py-3 px-4 font-medium ${ui.text.muted}`, children: labels.columnAmount })] }) }), _jsx("tbody", { children: purchases.map(purchase => (_jsxs("tr", { className: `border-b ${ui.border.subtle} hover:bg-accent`, children: [_jsx("td", { className: 'py-3 px-4 text-foreground', children: formatters.formatDate(purchase.created_at) }), _jsxs("td", { className: 'py-3 px-4 text-right font-medium text-success', children: ["+", purchase.credits] }), _jsx("td", { className: 'py-3 px-4 text-muted-foreground', children: formatters.formatSource(purchase.source) }), _jsx("td", { className: 'py-3 px-4 text-right text-muted-foreground', children: purchase.price_cents != null && purchase.currency
-                                                    ? formatters.formatAmount(purchase.price_cents, purchase.currency)
-                                                    : '-' })] }, purchase.id))) })] }) }), _jsx("div", { className: 'sm:hidden space-y-3', children: purchases.map(purchase => (_jsx("div", { className: `p-4 rounded-lg border ${colors.component.card.default.base} ${colors.component.card.default.dark}`, children: _jsxs("div", { className: 'flex justify-between items-start', children: [_jsxs("div", { children: [_jsx("p", { className: 'text-sm text-muted-foreground', children: formatters.formatDate(purchase.created_at) }), _jsx("p", { className: 'text-sm text-muted-foreground', children: formatters.formatSource(purchase.source) })] }), _jsxs("div", { className: 'text-right', children: [_jsxs("p", { className: 'font-medium text-success', children: ["+", purchase.credits] }), purchase.price_cents != null && purchase.currency && (_jsx("p", { className: 'text-sm text-muted-foreground', children: formatters.formatAmount(purchase.price_cents, purchase.currency) }))] })] }) }, purchase.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/UsageHistoryPage.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @fileoverview Usage history page component with responsive table (desktop)
- * and card (mobile) layouts. Supports load-more pagination.
- */
-import { colors, ui } from '@sudobility/design';
-import { LoadingSpinner } from './LoadingSpinner.js';
-/**
- * Renders a paginated list of usage records.
- * 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, }) {
-    // 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.js

@@ -1,7 +0,0 @@
-/**
- * @fileoverview Type definitions for all consumables page components.
- * Defines Labels, Formatters, and Props interfaces for CreditStorePage,
- * PurchaseHistoryPage, UsageHistoryPage, and CreditBalanceBadge.
- * All user-facing strings are defined via Labels for i18n support.
- */
-export {};