@carlonicora/nextjs-jsonapi 3.4.2 → 3.5.0

package/dist/features/tokenusage/index.js

@@ -26,7 +26,7 @@
 
 
 
-var _chunkKT4CTWCVjs = require('../../chunk-KT4CTWCV.js');
+var _chunkLKFWEYVSjs = require('../../chunk-LKFWEYVS.js');
 require('../../chunk-X2MQ3WHX.js');
 
 
@@ -70,7 +70,7 @@ function TokenUsageAdminFilterBar({ granularity, companyId, metric, companies, o
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-wrap items-center gap-2", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkKT4CTWCVjs.DateRangeSelector,
+      _chunkLKFWEYVSjs.DateRangeSelector,
       {
         onDateChange: (range) => {
           if (!_optionalChain([range, 'optionalAccess', _ => _.from]) || !_optionalChain([range, 'optionalAccess', _2 => _2.to])) return;
@@ -105,16 +105,16 @@ function TokenUsageAdminFilterBar({ granularity, companyId, metric, companies, o
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkKT4CTWCVjs.Select,
+      _chunkLKFWEYVSjs.Select,
       {
         items: companyItems,
         value: _nullishCoalesce(companyId, () => ( ALL_COMPANIES)),
         onValueChange: (value) => onChange({ companyId: !value || value === ALL_COMPANIES ? void 0 : value }),
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.SelectTrigger, { className: "w-56", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.SelectValue, { placeholder: t("token_usage.admin.all_companies") }) }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.SelectContent, { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.SelectItem, { value: ALL_COMPANIES, children: t("token_usage.admin.all_companies") }),
-            companies.map((company) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.SelectItem, { value: company.id, children: company.label }, company.id))
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.SelectTrigger, { className: "w-56", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.SelectValue, { placeholder: t("token_usage.admin.all_companies") }) }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.SelectContent, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.SelectItem, { value: ALL_COMPANIES, children: t("token_usage.admin.all_companies") }),
+            companies.map((company) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.SelectItem, { value: company.id, children: company.label }, company.id))
           ] })
         ]
       }
@@ -137,7 +137,7 @@ function Segmented({
       children: options.map((option) => {
         const selected = option.value === value;
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkKT4CTWCVjs.Button,
+          _chunkLKFWEYVSjs.Button,
           {
             type: "button",
             size: "sm",
@@ -219,7 +219,7 @@ var TokenUsageAdminProvider = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void
   pageUrl = TOKEN_USAGE_ADMIN_PAGE_URL
 }) => {
   const t = _nextintl.useTranslations.call(void 0, );
-  const generateUrl = _chunkKT4CTWCVjs.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkLKFWEYVSjs.usePageUrlGenerator.call(void 0, );
   const [filters, setFilterState] = _react.useState.call(void 0, () => {
     const range = defaultRange();
     return {
@@ -337,7 +337,7 @@ var TokenUsageAdminProvider = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void
       error
     ]
   );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.SharedProvider, { value: { breadcrumbs: breadcrumb(), title: title() }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageAdminContext.Provider, { value: contextValue, children }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.SharedProvider, { value: { breadcrumbs: breadcrumb(), title: title() }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageAdminContext.Provider, { value: contextValue, children }) });
 }, "TokenUsageAdminProvider");
 var useTokenUsageAdmin = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, () => {
   const ctx = _react.useContext.call(void 0, TokenUsageAdminContext);
@@ -497,7 +497,7 @@ function LeadTile({
   previousLabel,
   decimal
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.Card, { "data-testid": testId, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.CardContent, { className: "grid gap-1", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.Card, { "data-testid": testId, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.CardContent, { className: "grid gap-1", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: label }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-primary text-xl font-semibold tabular-nums", children: value }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-center gap-1", children: [
@@ -514,7 +514,7 @@ function SupportingTile({
   delta,
   decimal
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.Card, { "data-testid": testId, size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.CardContent, { className: "grid gap-1", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.Card, { "data-testid": testId, size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.CardContent, { className: "grid gap-1", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: label }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm font-medium tabular-nums", children: value }),
@@ -611,8 +611,8 @@ function TokenUsageBreakdownTable({ rows, metric }) {
     // The package's <Table> wraps itself in an `overflow-x-clip` container, which
     // would swallow the overflow before this scroller ever saw it — hence the
     // child override. Wide metric tables must scroll, never widen the page.
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.Table, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.TableHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.TableRow, { children: columns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.TableHead, { className: _chunk6T6QB6K2js.cn.call(void 0, column.numeric && "text-end"), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.Table, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.TableHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.TableRow, { children: columns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.TableHead, { className: _chunk6T6QB6K2js.cn.call(void 0, column.numeric && "text-end"), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         "button",
         {
           type: "button",
@@ -627,20 +627,20 @@ function TokenUsageBreakdownTable({ rows, metric }) {
           ]
         }
       ) }, column.key)) }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.TableBody, { children: sortedRows.map((row) => {
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.TableBody, { children: sortedRows.map((row) => {
         const value = metricValue(row, metric);
         const share = total > 0 ? value / total * 100 : 0;
-        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.TableRow, { "data-testid": `breakdown-row-${row.id}`, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.TableCell, { className: "text-xs", children: row.id === "other" ? t("token_usage.admin.other") : row.label }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.TableCell, { className: "text-muted-foreground text-xs", children: _nullishCoalesce(row.sublabel, () => ( "")) }),
-          showActiveUsers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.TableCell, { className: "text-end text-xs tabular-nums", children: row.activeUsers === void 0 ? "" : decimal(row.activeUsers, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.TableCell, { className: "text-end text-xs tabular-nums", children: decimal(row.calls, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.TableCell, { className: "text-end text-xs tabular-nums", children: decimal(row.tokensIn, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.TableCell, { className: "text-end text-xs tabular-nums", children: decimal(row.tokensOut, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.TableCell, { className: "text-end text-xs tabular-nums", children: percent(cacheHitPercentage(row.cached, row.tokensIn)) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.TableCell, { className: "text-end text-xs tabular-nums", children: formatValue(row.cost, "cost") }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.TableCell, { className: "text-end text-xs tabular-nums", children: formatValue(row.credits, "credits") }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.TableCell, { className: "text-end text-xs tabular-nums", children: percent(share) })
+        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.TableRow, { "data-testid": `breakdown-row-${row.id}`, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.TableCell, { className: "text-xs", children: row.id === "other" ? t("token_usage.admin.other") : row.label }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.TableCell, { className: "text-muted-foreground text-xs", children: _nullishCoalesce(row.sublabel, () => ( "")) }),
+          showActiveUsers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.TableCell, { className: "text-end text-xs tabular-nums", children: row.activeUsers === void 0 ? "" : decimal(row.activeUsers, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.TableCell, { className: "text-end text-xs tabular-nums", children: decimal(row.calls, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.TableCell, { className: "text-end text-xs tabular-nums", children: decimal(row.tokensIn, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.TableCell, { className: "text-end text-xs tabular-nums", children: decimal(row.tokensOut, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.TableCell, { className: "text-end text-xs tabular-nums", children: percent(cacheHitPercentage(row.cached, row.tokensIn)) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.TableCell, { className: "text-end text-xs tabular-nums", children: formatValue(row.cost, "cost") }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.TableCell, { className: "text-end text-xs tabular-nums", children: formatValue(row.credits, "credits") }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.TableCell, { className: "text-end text-xs tabular-nums", children: percent(share) })
         ] }, row.id);
       }) })
     ] }) })
@@ -838,7 +838,7 @@ function TokenUsageTimelineChart({ rows, metric, stackBy, className }) {
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className, dir: "ltr", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", "data-testid": "timeline-data", children: JSON.stringify(chartData) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", "data-testid": "timeline-series", children: JSON.stringify(seriesKeys) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.ChartContainer, { config: chartConfig, className: "aspect-auto h-72 w-full", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _recharts.BarChart, { accessibilityLayer: true, data: chartData, margin: { top: 8, right: 8, bottom: 0, left: 0 }, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.ChartContainer, { config: chartConfig, className: "aspect-auto h-72 w-full", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _recharts.BarChart, { accessibilityLayer: true, data: chartData, margin: { top: 8, right: 8, bottom: 0, left: 0 }, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _recharts.CartesianGrid, { vertical: false }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _recharts.XAxis,
@@ -862,10 +862,10 @@ function TokenUsageTimelineChart({ rows, metric, stackBy, className }) {
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkKT4CTWCVjs.ChartTooltip,
+          _chunkLKFWEYVSjs.ChartTooltip,
           {
             content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkKT4CTWCVjs.ChartTooltipContent,
+              _chunkLKFWEYVSjs.ChartTooltipContent,
               {
                 labelFormatter: (value) => bucketDate(String(value), granularity),
                 valueFormatter: (value) => formatValue(Number(value), metric),
@@ -874,7 +874,7 @@ function TokenUsageTimelineChart({ rows, metric, stackBy, className }) {
             )
           }
         ),
-        seriesKeys.length >= 2 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.ChartLegend, { content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.ChartLegendContent, {}) }) : null,
+        seriesKeys.length >= 2 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.ChartLegend, { content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.ChartLegendContent, {}) }) : null,
         seriesKeys.map((series, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _recharts.Bar,
           {
@@ -926,19 +926,19 @@ function TokenUsageAdminContainer() {
     [t]
   );
   if (error) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.Card, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-destructive text-xs/relaxed", children: error }) }) }) }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.Card, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-destructive text-xs/relaxed", children: error }) }) }) }) });
   }
-  if (isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.RoundPageContainer, { fullWidth: true, forceHeader: true });
+  if (isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.RoundPageContainer, { fullWidth: true, forceHeader: true });
   const emptyLabel = t("token_usage.admin.no_data");
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-col gap-4 p-4", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-col gap-4 p-4", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageAdminTiles, { summary, metric: filters.metric, singleCustomerMode: hidePlatform }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.Card, { children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.CardHeader, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardTitle, { children: t("token_usage.admin.usage_over_time") }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardAction, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.Card, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.CardHeader, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardTitle, { children: t("token_usage.admin.usage_over_time") }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardAction, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: t("token_usage.admin.stack_by") }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            _chunkKT4CTWCVjs.Select,
+            _chunkLKFWEYVSjs.Select,
             {
               items: stackByItems,
               value: filters.stackBy,
@@ -946,29 +946,29 @@ function TokenUsageAdminContainer() {
                 if (value) setFilters({ stackBy: value });
               },
               children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.SelectTrigger, { size: "sm", className: "w-36", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.SelectValue, {}) }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.SelectContent, { children: STACK_BY_VALUES.map((value) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.SelectItem, { value, children: stackByItems[value] }, value)) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.SelectTrigger, { size: "sm", className: "w-36", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.SelectValue, {}) }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.SelectContent, { children: STACK_BY_VALUES.map((value) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.SelectItem, { value, children: stackByItems[value] }, value)) })
               ]
             }
           )
         ] }) })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageTimelineChart, { rows: timeline, metric: filters.metric, stackBy: filters.stackBy }) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageTimelineChart, { rows: timeline, metric: filters.metric, stackBy: filters.stackBy }) })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid gap-4 md:grid-cols-2", children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardTitle, { children: t("token_usage.admin.by_company") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byCompany, metric: filters.metric, emptyLabel }) })
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardTitle, { children: t("token_usage.admin.by_company") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byCompany, metric: filters.metric, emptyLabel }) })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardTitle, { children: t("token_usage.admin.by_user") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byUser, metric: filters.metric, emptyLabel }) })
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardTitle, { children: t("token_usage.admin.by_user") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byUser, metric: filters.metric, emptyLabel }) })
       ] })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk6T6QB6K2js.cn.call(void 0, "grid gap-4", !hidePlatform && "md:grid-cols-2"), children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardTitle, { children: t("token_usage.admin.customer_by_operation") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardTitle, { children: t("token_usage.admin.customer_by_operation") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           TokenUsageRankedBar,
           {
             rows: byCustomerOperation,
@@ -978,9 +978,9 @@ function TokenUsageAdminContainer() {
           }
         ) })
       ] }),
-      !hidePlatform && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardTitle, { children: t("token_usage.admin.platform_by_operation") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      !hidePlatform && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardTitle, { children: t("token_usage.admin.platform_by_operation") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           TokenUsageRankedBar,
           {
             rows: byOperation,
@@ -991,9 +991,9 @@ function TokenUsageAdminContainer() {
         ) })
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.Card, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardTitle, { children: t("token_usage.admin.detail") }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageBreakdownTable, { rows: byCompany, metric: filters.metric }) })
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.Card, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardTitle, { children: t("token_usage.admin.detail") }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageBreakdownTable, { rows: byCompany, metric: filters.metric }) })
     ] })
   ] }) });
 }
@@ -1114,7 +1114,7 @@ var TOKEN_USAGE_REPORT_I18N_KEYS = [
 
 function TokenUsageReportFilterBar({ onChange }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex flex-wrap items-center gap-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkKT4CTWCVjs.DateRangeSelector,
+    _chunkLKFWEYVSjs.DateRangeSelector,
     {
       onDateChange: (range) => {
         if (!_optionalChain([range, 'optionalAccess', _10 => _10.from]) || !_optionalChain([range, 'optionalAccess', _11 => _11.to])) return;
@@ -1147,7 +1147,7 @@ var TokenUsageReportProvider = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void
   pageUrl = TOKEN_USAGE_REPORT_PAGE_URL
 }) => {
   const t = _nextintl.useTranslations.call(void 0, );
-  const generateUrl = _chunkKT4CTWCVjs.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkLKFWEYVSjs.usePageUrlGenerator.call(void 0, );
   const [filters, setFilterState] = _react.useState.call(void 0, () => {
     const range = defaultRange2();
     return { from: _nullishCoalesce(initialFrom, () => ( range.from)), to: _nullishCoalesce(initialTo, () => ( range.to)) };
@@ -1211,7 +1211,7 @@ var TokenUsageReportProvider = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void
     () => ({ summary, timeline, byOperation, byTarget, targetPanelTitleKey, filters, setFilters, isLoading, error }),
     [summary, timeline, byOperation, byTarget, targetPanelTitleKey, filters, setFilters, isLoading, error]
   );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.SharedProvider, { value: { breadcrumbs: breadcrumb(), title: title() }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageReportContext.Provider, { value: contextValue, children }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.SharedProvider, { value: { breadcrumbs: breadcrumb(), title: title() }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageReportContext.Provider, { value: contextValue, children }) });
 }, "TokenUsageReportProvider");
 var useTokenUsageReport = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, () => {
   const ctx = _react.useContext.call(void 0, TokenUsageReportContext);
@@ -1239,7 +1239,7 @@ function TokenUsageReportTiles({ summary, metric, balances }) {
   const monthlyColor = monthlyPercentage > 75 ? "text-success" : monthlyPercentage >= 5 ? "text-warning" : "text-destructive";
   const whole = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void 0, (value) => decimal(Math.max(0, Math.floor(value)), 0), "whole");
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid gap-3", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.Card, { "data-testid": "tile-used", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.CardContent, { className: "grid gap-1", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.Card, { "data-testid": "tile-used", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.CardContent, { className: "grid gap-1", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: t("token_usage.report.used_in_period") }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-primary text-xl font-semibold tabular-nums", children: formatValue(metricValue(current, metric), metric) }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-center gap-1", children: [
@@ -1255,7 +1255,7 @@ function TokenUsageReportTiles({ summary, metric, balances }) {
       ] })
     ] }) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid gap-3 sm:grid-cols-3", children: [
-      balances && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.Card, { "data-testid": "tile-monthly", size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.CardContent, { className: "grid gap-1", children: [
+      balances && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.Card, { "data-testid": "tile-monthly", size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.CardContent, { className: "grid gap-1", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: t("token_usage.report.monthly_left") }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-baseline gap-1", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-testid": "tile-monthly-value", className: _chunk6T6QB6K2js.cn.call(void 0, "text-sm font-medium tabular-nums", monthlyColor), children: whole(balances.availableMonthlyCredits) }),
@@ -1265,11 +1265,11 @@ function TokenUsageReportTiles({ summary, metric, balances }) {
           ] })
         ] })
       ] }) }),
-      balances && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.Card, { "data-testid": "tile-extra", size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.CardContent, { className: "grid gap-1", children: [
+      balances && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.Card, { "data-testid": "tile-extra", size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.CardContent, { className: "grid gap-1", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: t("token_usage.report.extra_credits") }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm font-medium tabular-nums", children: whole(balances.availableExtraCredits) })
       ] }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.Card, { "data-testid": "tile-calls", size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.CardContent, { className: "grid gap-1", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.Card, { "data-testid": "tile-calls", size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.CardContent, { className: "grid gap-1", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-muted-foreground text-xs", children: t("token_usage.report.calls") }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm font-medium tabular-nums", children: decimal(current.calls, 0) })
       ] }) })
@@ -1311,21 +1311,21 @@ function TokenUsageReportContainer({ balances = null }) {
   const t = _nextintl.useTranslations.call(void 0, );
   const { summary, timeline, byOperation, byTarget, isLoading, error, targetPanelTitleKey } = useTokenUsageReport();
   if (error) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.Card, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-destructive text-xs/relaxed", children: error }) }) }) }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.Card, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-destructive text-xs/relaxed", children: error }) }) }) }) });
   }
-  if (isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.RoundPageContainer, { fullWidth: true, forceHeader: true });
+  if (isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.RoundPageContainer, { fullWidth: true, forceHeader: true });
   const emptyLabel = t("token_usage.report.no_data");
   const targetTitle = targetPanelTitleKey && byTarget.length > 0 ? t(targetPanelTitleKey) : void 0;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-col gap-4 p-4", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-col gap-4 p-4", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageReportTiles, { summary, metric: "credits", balances }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.Card, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardTitle, { children: t("token_usage.report.usage_over_time") }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageTimelineChart, { rows: timeline, metric: "credits", stackBy: "type" }) })
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.Card, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardTitle, { children: t("token_usage.report.usage_over_time") }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageTimelineChart, { rows: timeline, metric: "credits", stackBy: "type" }) })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk6T6QB6K2js.cn.call(void 0, "grid gap-4", targetTitle && "md:grid-cols-2"), children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardTitle, { children: t("token_usage.report.by_operation") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardTitle, { children: t("token_usage.report.by_operation") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           TokenUsageRankedBar,
           {
             rows: byOperation,
@@ -1335,9 +1335,9 @@ function TokenUsageReportContainer({ balances = null }) {
           }
         ) })
       ] }),
-      targetTitle && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkKT4CTWCVjs.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardTitle, { children: targetTitle }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKT4CTWCVjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byTarget, metric: "credits", emptyLabel }) })
+      targetTitle && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLKFWEYVSjs.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardTitle, { children: targetTitle }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLKFWEYVSjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byTarget, metric: "credits", emptyLabel }) })
       ] })
     ] })
   ] }) });

package/dist/features/tokenusage/index.mjs

@@ -26,7 +26,7 @@ import {
   TableHeader,
   TableRow,
   usePageUrlGenerator
-} from "../../chunk-G5LSXG5K.mjs";
+} from "../../chunk-3LF5PPRY.mjs";
 import "../../chunk-RZDY4CIF.mjs";
 import {
   AbstractService,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "3.4.2",
+  "version": "3.5.0",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",

package/src/components/containers/RoundPageContainer.tsx

@@ -93,6 +93,24 @@ type RoundPageContainerProps = {
    * navigation — an "info" icon actively misdescribes a conversation list.
    */
   detailsIcon?: ReactNode;
+  /**
+   * Which element scrolls the page.
+   * - `"document"` (default) — the shell's height only FLOORS at the viewport
+   *   and grows with its content, so the document itself is the scroller. That
+   *   is what restores the iOS rubber-band, and with it pull-to-refresh, in an
+   *   installed PWA.
+   * - `"fixed"` — the pre-existing viewport-bound shell: the document cannot
+   *   scroll and every overflow is owned by an inner pane. Required by pages
+   *   whose content is itself viewport-bound — a map or canvas sized `h-full`,
+   *   a kanban board on `100svh`, or any `fillHeight` tab — since those resolve
+   *   to zero (or overflow the viewport) without a definite height above them.
+   *
+   * The mode is published as `data-scroll-mode` on `<html>` so an app's global
+   * stylesheet can scope root-level rules (`overflow: hidden`,
+   * `overscroll-behavior-y: none`) to fixed pages only. Applying those
+   * unscoped is what suppressed the document scroll and the bounce everywhere.
+   */
+  scroll?: "document" | "fixed";
 };
 
 // Rail trigger class: override the horizontal TabsTrigger defaults for a
@@ -124,6 +142,7 @@ export function RoundPageContainer({
   defaultDetailsOpen = false,
   detailsTitle,
   detailsIcon,
+  scroll = "document",
 }: RoundPageContainerProps) {
   const headerChildren = useHeaderChildren();
   const headerLeftContent = useHeaderLeftContent();
@@ -148,6 +167,34 @@ export function RoundPageContainer({
     setMounted(true);
   }, []);
 
+  // Publish the mode for the app stylesheet. Deliberately NO cleanup: on a
+  // client navigation the next page's container mounts before this one
+  // unmounts, so resetting the attribute here would stomp the incoming page's
+  // mode. Only one container renders per page, so the last write always
+  // describes the page on screen.
+  useEffect(() => {
+    document.documentElement.dataset.scrollMode = scroll;
+  }, [scroll]);
+
+  const isFixed = scroll === "fixed";
+
+  // `scroll="fixed"` reproduces the previous classes exactly — that mode is the
+  // old behaviour under a name. In document mode every clip and inner scroller
+  // between the shell and the content is dropped so the document is the only
+  // scroller; leaving a single `overflow-hidden` in that chain silently
+  // truncates the page instead of letting it grow.
+  const shellHeight = isFixed
+    ? `h-[calc(100svh-var(--app-header-h,3rem))]`
+    : `min-h-[calc(100svh-var(--app-header-h,3rem))]`;
+  const clip = isFixed ? `overflow-hidden` : ``;
+  const scrollY = isFixed ? `overflow-y-auto` : ``;
+  // The bar is an in-flow sibling of the content (see MobileNavigationBar's own
+  // note). In document mode the column is taller than the viewport, so in-flow
+  // means it only appears once the user reaches the very bottom — `sticky`
+  // pins it to the viewport's bottom edge while keeping it in flow, so it still
+  // settles under the card at the end of the page rather than floating over it.
+  const mobileBarClass = isFixed ? `` : `sticky bottom-0 z-30`;
+
   // Scope the persisted preference PER MODULE. A single global cookie meant
   // collapsing an informational aside on one page silently collapsed a primary
   // navigation panel on another — so a page declaring `defaultDetailsOpen`
@@ -228,7 +275,8 @@ export function RoundPageContainer({
         <main
           data-testid={testId}
           className={cn(
-            "flex h-[calc(100svh-var(--app-header-h,3rem))] w-full flex-col",
+            "flex w-full flex-col",
+            shellHeight,
             // Deliberately NO bottom safe-area inset, here or in
             // MobileNavigationBar. iOS still reports 34px of bottom inset
             // (measured in an installed PWA), but nothing is drawn in that strip
@@ -247,7 +295,7 @@ export function RoundPageContainer({
           <div className={cn("bg-background flex min-h-0 w-full flex-1", isMobile ? "" : "rounded-lg border p-0")}>
             <div className="flex w-full flex-col" />
           </div>
-          <MobileNavigationBar />
+          <MobileNavigationBar className={mobileBarClass} />
         </main>
       </>
     );
@@ -271,7 +319,8 @@ export function RoundPageContainer({
       <main
         data-testid={testId}
         className={cn(
-          `flex h-[calc(100svh-var(--app-header-h,3rem))] w-full flex-col`,
+          `flex w-full flex-col`,
+          shellHeight,
           // Deliberately NO bottom safe-area inset, here or in
           // MobileNavigationBar. iOS still reports 34px of bottom inset
           // (measured in an installed PWA), but nothing is drawn in that strip
@@ -300,7 +349,7 @@ export function RoundPageContainer({
                 fullWidth={fullWidth}
               />
             )}
-            <div className="flex h-full w-full overflow-hidden">
+            <div className={cn(`flex w-full`, isFixed && `h-full`, clip)}>
               {layout === "rail" && tabs ? (
                 // Rail layout: the vertical-tab navigation is a flush-left
                 // sidebar of the card and the content fills the full remaining
@@ -318,12 +367,15 @@ export function RoundPageContainer({
                   // the shadcn root's default `data-[orientation=horizontal]:flex-col`
                   // to keep the rail and content side by side.
                   orientation="horizontal"
-                  className="flex h-full min-w-0 grow overflow-hidden data-[orientation=horizontal]:flex-row"
+                  className={cn(`flex min-w-0 grow data-[orientation=horizontal]:flex-row`, isFixed && `h-full`, clip)}
                 >
                   {/* Flush-left section rail — md and up */}
                   <aside
                     data-testid="round-page-rail"
-                    className="hidden shrink-0 border-e p-4 md:flex md:w-56 md:flex-col md:overflow-y-auto"
+                    className={cn(
+                      `hidden shrink-0 border-e p-4 md:flex md:w-56 md:flex-col`,
+                      isFixed && `md:overflow-y-auto`,
+                    )}
                   >
                     {/* `w-full` is load-bearing: TabsList's base variant carries
                         `w-fit`, which shrinks the rail list to its widest label.
@@ -359,7 +411,7 @@ export function RoundPageContainer({
                   </aside>
 
                   {/* Content — full width, fills the remaining space */}
-                  <div className="flex min-w-0 grow flex-col overflow-hidden">
+                  <div className={cn(`flex min-w-0 grow flex-col`, clip)}>
                     {/* Section Select — below md */}
                     <div data-testid="round-page-rail-select" className="p-2 md:hidden">
                       <Select
@@ -392,10 +444,7 @@ export function RoundPageContainer({
                       </Select>
                     </div>
                     <div
-                      className={cn(
-                        `min-w-0 grow`,
-                        activeFillHeight ? `flex flex-col overflow-hidden` : `overflow-y-auto p-4`,
-                      )}
+                      className={cn(`min-w-0 grow`, activeFillHeight ? cn(`flex flex-col`, clip) : cn(scrollY, `p-4`))}
                     >
                       {/* Centre and constrain rail content (like the non-rail
                           layout). Fill-height tabs keep the full width. */}
@@ -424,7 +473,7 @@ export function RoundPageContainer({
                   className={cn(
                     `grow`,
                     isMobile ? `p-2` : `p-4`,
-                    activeFillHeight ? `flex flex-col overflow-hidden` : `overflow-y-auto`,
+                    activeFillHeight ? cn(`flex flex-col`, clip) : scrollY,
                     fullWidth && `p-0`,
                   )}
                 >
@@ -479,7 +528,7 @@ export function RoundPageContainer({
                             className={cn(
                               `flex w-full `,
                               isMobile ? `` : `px-4`,
-                              activeFillHeight ? `flex-1 min-h-0` : `overflow-y-auto`,
+                              activeFillHeight ? `flex-1 min-h-0` : scrollY,
                             )}
                           >
                             {tabs.map((tab) => (
@@ -551,7 +600,7 @@ export function RoundPageContainer({
               </div>
             ))}
         </div>
-        <MobileNavigationBar />
+        <MobileNavigationBar className={mobileBarClass} />
       </main>
     </>
   );

package/src/components/navigations/MobileNavigationBar.tsx

@@ -41,8 +41,15 @@ function SlotContent({ item }: { item: MobileNavigationItem }) {
  *
  * Rendered as an in-flow flex sibling of the page content (NOT position:fixed),
  * so the content column shrinks to fit and can never be hidden behind the bar.
+ *
+ * `className` exists for the one thing that in-flow placement cannot cover: a
+ * document-scrolled shell (RoundPageContainer's `scroll="document"`), where the
+ * column is taller than the viewport and an in-flow bar is only reachable at
+ * the very bottom of the page. That caller passes `sticky bottom-0`, which pins
+ * the bar without taking it out of flow — so the guarantee above still holds at
+ * the end of the page.
  */
-export function MobileNavigationBar() {
+export function MobileNavigationBar({ className }: { className?: string } = {}) {
   const items = useMobileNavigationItems();
   const isMobile = useIsMobile();
   const pathname = usePathname();
@@ -63,7 +70,7 @@ export function MobileNavigationBar() {
     <nav
       aria-label="Primary"
       data-testid="mobile-navigation-bar"
-      className="bg-sidebar flex w-full shrink-0 flex-row items-stretch rounded-lg border"
+      className={cn("bg-sidebar flex w-full shrink-0 flex-row items-stretch rounded-lg border", className)}
     >
       {items.map((item) => {
         const active = item.href ? isActiveHref(pathname, item.href) : false;