@sudobility/consumables_pages 0.0.7 → 0.0.9

package/CLAUDE.md

@@ -3,36 +3,109 @@
 Web-only UI components for consumable credits system.
 
 **npm**: `@sudobility/consumables_pages` (public)
+**Version**: 0.0.7
+**License**: BUSL-1.1
 
 ## Tech Stack
 
-- **Language**: TypeScript (strict mode, JSX)
+- **Language**: TypeScript 5.9.3 (strict mode, JSX)
 - **Runtime**: Bun
-- **Build**: TypeScript compiler (ESM)
+- **Package Manager**: Bun (never npm/yarn/pnpm)
+- **Build**: TypeScript compiler via `tsconfig.build.json` (ESM only)
+- **Test**: Vitest 4.x with jsdom environment, React Testing Library
 - **Styling**: Tailwind CSS classes (consumer provides Tailwind)
+- **JSX**: react-jsx (React 18/19)
 
-## Components
-
-- **CreditStorePage** — Balance display + grid of credit packages with buy buttons
-- **PurchaseHistoryPage** — Table of purchase records (responsive: table on desktop, cards on mobile)
-- **UsageHistoryPage** — Table of usage records (responsive)
-- **CreditBalanceBadge** — Small inline badge for topbar integration
+## Project Structure
 
-All components are props-driven with labels/formatters for i18n support.
+```
+src/
+├── index.ts                   # Barrel exports (components + types)
+├── types.ts                   # All prop/label/formatter interfaces
+├── CreditStorePage.tsx        # Balance display + grid of credit packages with buy buttons
+├── PurchaseHistoryPage.tsx    # Responsive table/cards of purchase records
+├── UsageHistoryPage.tsx       # Responsive table/cards of usage records
+├── CreditBalanceBadge.tsx     # Small inline badge for topbar integration
+└── __tests__/
+    ├── setup.ts                      # Vitest setup (jsdom config)
+    ├── CreditBalanceBadge.test.tsx
+    ├── CreditStorePage.test.tsx
+    ├── PurchaseHistoryPage.test.tsx
+    └── UsageHistoryPage.test.tsx
+```
 
 ## Commands
 
 ```bash
-bun run build        # Build ESM
-bun run dev          # Watch mode
-bun run typecheck    # TypeScript check
-bun test             # Run tests
+bun run build        # Build ESM via tsc -p tsconfig.build.json
+bun run dev          # Watch mode (tsc --watch)
+bun run clean        # Remove dist/
+bun run typecheck    # TypeScript check (bunx tsc --noEmit)
+bun test             # Run tests (vitest run)
+bun run test:watch   # Watch tests
+bun run lint         # ESLint
+bun run lint:fix     # ESLint with auto-fix
+bun run format       # Prettier format
 ```
 
+## Components
+
+### CreditStorePage
+- Balance display panel (blue box) when authenticated
+- Error display, login prompt for unauthenticated users
+- Loading spinner
+- Responsive grid of credit packages (1 col -> 2 col sm -> 3 col lg)
+- Buy buttons with purchasing state
+- Props: `CreditStorePageProps` (isAuthenticated, balance, packages, labels, formatters, callbacks)
+
+### PurchaseHistoryPage
+- Desktop: `<table>` with columns (date, credits, source, amount)
+- Mobile: card layout (sm:hidden / hidden sm:block pattern)
+- "Load more" pagination button
+- Props: `PurchaseHistoryPageProps` (purchases, labels, formatters, onLoadMore, hasMore)
+
+### UsageHistoryPage
+- Desktop: `<table>` with columns (date, filename)
+- Mobile: card layout
+- "Load more" pagination button
+- Props: `UsageHistoryPageProps` (usages, labels, formatters, onLoadMore, hasMore)
+
+### CreditBalanceBadge
+- Inline pill badge showing credit count with coin SVG icon
+- Blue when balance > 0, red when balance is 0
+- Optional `onClick` makes it a `<button>` instead of `<span>`
+- Loading state shows animated "..."
+- Returns `null` when balance is null and not loading
+
+## Dependencies
+
+### Peer Dependencies
+- `@sudobility/consumables_client` ^0.0.6 -- TypeScript types only (CreditPackage)
+- `@sudobility/types` ^1.9.53 -- shared types (ConsumablePurchaseRecord, ConsumableUsageRecord)
+- `react` ^18.0.0 || ^19.0.0
+- `react-dom` ^18.0.0 || ^19.0.0
+
+### Dev Dependencies
+- TypeScript ~5.9.3, Vitest ^4.0.4, @testing-library/react ^16.x, @testing-library/jest-dom ^6.x
+- jsdom ^28.x, Vite ^7.x, ESLint ^9.x, Prettier ^3.x
+
+## Build Configuration
+
+- **tsconfig.json**: Used for type checking (`noEmit: true`), includes `allowImportingTsExtensions`
+- **tsconfig.build.json**: Extends tsconfig.json, sets `noEmit: false`, `allowImportingTsExtensions: false`, `rootDir: ./src`
+- **vitest.config.ts**: jsdom environment, globals enabled, setup file at `./src/__tests__/setup.ts`
+
+## Type Architecture
+
+All component prop types are defined in `src/types.ts`:
+- **Labels interfaces** (`CreditStorePageLabels`, etc.) -- all user-facing strings for i18n
+- **Formatters interfaces** (`CreditStorePageFormatters`, etc.) -- functions for formatting credits, dates, amounts, sources
+- **Props interfaces** (`CreditStorePageProps`, etc.) -- combine data, labels, formatters, and callbacks
+
 ## Related Projects
 
-- **consumables_client** (`@sudobility/consumables_client`) — Peer dependency that provides hooks (`useBalance`, `usePurchaseCredits`, etc.) and data types. This package does NOT call those hooks internally; the consuming app calls them and passes data as props.
-- **@sudobility/types** — Shared type definitions used across the consumables ecosystem.
+- **consumables_client** (`@sudobility/consumables_client`) -- Peer dependency that provides hooks (`useBalance`, `usePurchaseCredits`, etc.) and data types. This package does NOT call those hooks internally; the consuming app calls them and passes data as props.
+- **@sudobility/types** -- Shared type definitions used across the consumables ecosystem.
 
 Dependency direction: `consumables_pages` depends on `consumables_client` (peer dep for types only, not runtime calls)
 
@@ -40,8 +113,9 @@ Dependency direction: `consumables_pages` depends on `consumables_client` (peer
 
 - **Props-driven components (no internal state)**: Components receive all data and callbacks via props. They do not call hooks, manage state, or fetch data. This makes them pure presentational components.
 - **Customizable labels and formatters for i18n**: All user-facing text is passed in via `labels` props, and numeric/date formatting uses `formatter` props. Never hardcode user-visible strings inside components.
-- **Responsive design with Tailwind sm/lg breakpoints**: Components use Tailwind's `sm:` and `lg:` prefixes for responsive layouts (e.g., cards on mobile, tables on desktop). Follow this pattern for any new components.
+- **Responsive design with Tailwind sm breakpoint**: Components use `hidden sm:block` for desktop tables and `sm:hidden` for mobile cards. CreditStorePage uses `sm:grid-cols-2 lg:grid-cols-3` for its grid.
 - **No direct CSS**: All styling uses Tailwind utility classes. Do not introduce CSS files, CSS modules, or styled-components.
+- **Conditional wrapper element**: CreditBalanceBadge uses `const Wrapper = onClick ? "button" : "span"` for semantic HTML.
 
 ## Gotchas
 
@@ -49,6 +123,8 @@ Dependency direction: `consumables_pages` depends on `consumables_client` (peer
 - **Components are purely presentational**: No hooks are called inside components. The parent app is responsible for calling `useBalance()`, `usePurchaseCredits()`, etc. from `consumables_client` and passing the results as props. Breaking this pattern creates tight coupling.
 - **No internal state**: Components derive everything from props. If you need loading states or error states, they must be passed in as props, not managed internally with `useState`.
 - **Peer dependency on consumables_client**: The package depends on `consumables_client` for TypeScript types (e.g., `CreditPackage`, `CreditBalance`), but it never imports runtime code from it. The peer dependency ensures type compatibility.
+- **Hardcoded "Log in" button text**: The login button in `CreditStorePage` has hardcoded text `"Log in"` rather than using the labels prop. This is the only non-i18n string in the components.
+- **`tsconfig.json` has `noEmit: true`**: The main tsconfig is for checking only. Building requires `tsconfig.build.json` (via `bun run build`).
 
 ## Testing
 

package/dist/CreditBalanceBadge.d.ts

@@ -1,2 +1,12 @@
+/**
+ * @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";
+/**
+ * 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;

package/dist/CreditBalanceBadge.js

@@ -1,4 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 text-gray-400 ${className || ""}`, children: _jsx("span", { className: "animate-pulse", children: "..." }) }));

package/dist/CreditStorePage.d.ts

@@ -1,2 +1,12 @@
+/**
+ * @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";
+/**
+ * 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;

package/dist/CreditStorePage.js

@@ -1,4 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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", children: labels.title }), isAuthenticated && balance !== null && (_jsxs("div", { className: "mb-8 p-4 bg-blue-50 rounded-lg border border-blue-200", children: [_jsx("p", { className: "text-sm text-blue-600 font-medium", children: labels.currentBalanceLabel }), _jsx("p", { className: "text-3xl font-bold text-blue-900", children: formatters.formatCredits(balance) })] })), error && (_jsxs("div", { className: "mb-6 p-4 bg-red-50 rounded-lg border border-red-200", children: [_jsx("p", { className: "text-sm font-medium text-red-800", children: labels.errorTitle }), _jsx("p", { className: "text-sm text-red-600", children: error })] })), !isAuthenticated && (_jsxs("div", { className: "mb-6 p-4 bg-yellow-50 rounded-lg border border-yellow-200", children: [_jsx("p", { className: "text-sm text-yellow-800", children: labels.loginRequired }), _jsx("button", { onClick: onLoginClick, className: "mt-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700", children: "Log in" })] })), isLoading && (_jsx("div", { className: "flex justify-center py-12", children: _jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }) })), !isLoading && packages.length === 0 && (_jsx("p", { className: "text-gray-500 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 bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-shadow", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-3xl font-bold text-gray-900", children: formatters.formatCredits(pkg.credits) }), formatters.getPackageDescription && (_jsx("p", { className: "text-sm text-gray-500 mt-1", children: formatters.getPackageDescription(pkg.packageId) })), _jsx("p", { className: "text-xl font-semibold text-blue-600 mt-3", children: pkg.priceString }), _jsx("button", { onClick: () => onPurchase(pkg.packageId), disabled: isPurchasing || !isAuthenticated, className: "mt-4 w-full px-4 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: isPurchasing
                                     ? labels.purchasingButton

package/dist/PurchaseHistoryPage.d.ts

@@ -1,2 +1,12 @@
+/**
+ * @fileoverview Purchase history page component with responsive table (desktop)
+ * and card (mobile) layouts. Supports load-more pagination.
+ */
 import type { PurchaseHistoryPageProps } from "./types";
+/**
+ * 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, }: PurchaseHistoryPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/PurchaseHistoryPage.js

@@ -1,4 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * 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, }) {
     return (_jsxs("div", { className: className, children: [_jsx("h1", { className: "text-2xl font-bold mb-6", children: labels.title }), error && (_jsx("div", { className: "mb-4 p-3 bg-red-50 rounded-lg border border-red-200", children: _jsx("p", { className: "text-sm text-red-600", children: error }) })), isLoading && (_jsx("div", { className: "flex justify-center py-12", children: _jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }) })), !isLoading && purchases.length === 0 && (_jsx("p", { className: "text-gray-500 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", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-gray-200", children: [_jsx("th", { className: "text-left py-3 px-4 font-medium text-gray-500", children: labels.columnDate }), _jsx("th", { className: "text-right py-3 px-4 font-medium text-gray-500", children: labels.columnCredits }), _jsx("th", { className: "text-left py-3 px-4 font-medium text-gray-500", children: labels.columnSource }), _jsx("th", { className: "text-right py-3 px-4 font-medium text-gray-500", children: labels.columnAmount })] }) }), _jsx("tbody", { children: purchases.map((purchase) => (_jsxs("tr", { className: "border-b border-gray-100 hover:bg-gray-50", children: [_jsx("td", { className: "py-3 px-4 text-gray-700", children: formatters.formatDate(purchase.created_at) }), _jsxs("td", { className: "py-3 px-4 text-right font-medium text-green-600", children: ["+", purchase.credits] }), _jsx("td", { className: "py-3 px-4 text-gray-600", children: formatters.formatSource(purchase.source) }), _jsx("td", { className: "py-3 px-4 text-right text-gray-600", children: purchase.price_cents != null && purchase.currency
                                                     ? formatters.formatAmount(purchase.price_cents, purchase.currency)

package/dist/UsageHistoryPage.d.ts

@@ -1,2 +1,12 @@
+/**
+ * @fileoverview Usage history page component with responsive table (desktop)
+ * and card (mobile) layouts. Supports load-more pagination.
+ */
 import type { UsageHistoryPageProps } from "./types";
+/**
+ * Renders a paginated list of usage records.
+ * Desktop: table with date and filename 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, }: UsageHistoryPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/UsageHistoryPage.js

@@ -1,4 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Renders a paginated list of usage records.
+ * Desktop: table with date and filename 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, }) {
     return (_jsxs("div", { className: className, children: [_jsx("h1", { className: "text-2xl font-bold mb-6", children: labels.title }), error && (_jsx("div", { className: "mb-4 p-3 bg-red-50 rounded-lg border border-red-200", children: _jsx("p", { className: "text-sm text-red-600", children: error }) })), isLoading && (_jsx("div", { className: "flex justify-center py-12", children: _jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }) })), !isLoading && usages.length === 0 && (_jsx("p", { className: "text-gray-500 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", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-gray-200", children: [_jsx("th", { className: "text-left py-3 px-4 font-medium text-gray-500", children: labels.columnDate }), _jsx("th", { className: "text-left py-3 px-4 font-medium text-gray-500", children: labels.columnFilename })] }) }), _jsx("tbody", { children: usages.map((usage) => (_jsxs("tr", { className: "border-b border-gray-100 hover:bg-gray-50", children: [_jsx("td", { className: "py-3 px-4 text-gray-700", children: formatters.formatDate(usage.created_at) }), _jsx("td", { className: "py-3 px-4 text-gray-600", children: usage.filename || "-" })] }, usage.id))) })] }) }), _jsx("div", { className: "sm:hidden space-y-3", children: usages.map((usage) => (_jsxs("div", { className: "p-4 bg-white rounded-lg border border-gray-200", children: [_jsx("p", { className: "text-sm text-gray-500", children: formatters.formatDate(usage.created_at) }), _jsx("p", { className: "text-sm text-gray-700 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 text-blue-600 hover:text-blue-800 font-medium", children: labels.loadMore }) }))] }))] }));
 }

package/dist/types.d.ts

@@ -1,5 +1,12 @@
+/**
+ * @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, ConsumableUsageRecord } from "@sudobility/types";
+/** Localizable label strings for the CreditStorePage component. */
 export interface CreditStorePageLabels {
     title: string;
     currentBalanceLabel: string;
@@ -10,10 +17,12 @@ export interface CreditStorePageLabels {
     errorTitle: string;
     loginRequired: string;
 }
+/** Formatting functions for the CreditStorePage component. */
 export interface CreditStorePageFormatters {
     formatCredits: (count: number) => string;
     getPackageDescription?: (packageId: string) => string;
 }
+/** Props for the CreditStorePage component. */
 export interface CreditStorePageProps {
     isAuthenticated: boolean;
     balance: number | null;
@@ -27,6 +36,7 @@ export interface CreditStorePageProps {
     formatters: CreditStorePageFormatters;
     className?: string;
 }
+/** Localizable label strings for the PurchaseHistoryPage component. */
 export interface PurchaseHistoryPageLabels {
     title: string;
     columnDate: string;
@@ -37,11 +47,13 @@ export interface PurchaseHistoryPageLabels {
     noRecords: string;
     loadMore: string;
 }
+/** Formatting functions for the PurchaseHistoryPage component. */
 export interface PurchaseHistoryPageFormatters {
     formatDate: (dateStr: string) => string;
     formatAmount: (cents: number, currency: string) => string;
     formatSource: (source: string) => string;
 }
+/** Props for the PurchaseHistoryPage component. */
 export interface PurchaseHistoryPageProps {
     purchases: ConsumablePurchaseRecord[];
     isLoading: boolean;
@@ -52,6 +64,7 @@ export interface PurchaseHistoryPageProps {
     formatters: PurchaseHistoryPageFormatters;
     className?: string;
 }
+/** Localizable label strings for the UsageHistoryPage component. */
 export interface UsageHistoryPageLabels {
     title: string;
     columnDate: string;
@@ -59,9 +72,11 @@ export interface UsageHistoryPageLabels {
     noRecords: string;
     loadMore: string;
 }
+/** Formatting functions for the UsageHistoryPage component. */
 export interface UsageHistoryPageFormatters {
     formatDate: (dateStr: string) => string;
 }
+/** Props for the UsageHistoryPage component. */
 export interface UsageHistoryPageProps {
     usages: ConsumableUsageRecord[];
     isLoading: boolean;
@@ -72,6 +87,7 @@ export interface UsageHistoryPageProps {
     formatters: UsageHistoryPageFormatters;
     className?: string;
 }
+/** Props for the CreditBalanceBadge component. */
 export interface CreditBalanceBadgeProps {
     balance: number | null;
     isLoading: boolean;

package/dist/types.js

@@ -1 +1,7 @@
+/**
+ * @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 {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/consumables_pages",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "Web UI components for consumable credits (credit store, purchase history, usage history)",
   "type": "module",
   "main": "./dist/index.js",
@@ -29,13 +29,13 @@
     "prepublishOnly": "bun run build"
   },
   "peerDependencies": {
-    "@sudobility/consumables_client": "^0.0.6",
-    "@sudobility/types": "^1.9.53",
+    "@sudobility/consumables_client": "^0.0.8",
+    "@sudobility/types": "^1.9.54",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@sudobility/consumables_client": "^0.0.6",
+    "@sudobility/consumables_client": "^0.0.8",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/bun": "^1.2.8",