@carlonicora/nextjs-jsonapi 2.0.1 → 2.0.2

package/dist/features/tokenusage/index.js

@@ -26,7 +26,7 @@
 
 
 
-var _chunkR666YQGQjs = require('../../chunk-R666YQGQ.js');
+var _chunkQS5Y6ZBFjs = require('../../chunk-QS5Y6ZBF.js');
 require('../../chunk-UXJAS6C5.js');
 
 
@@ -64,7 +64,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, 
-      _chunkR666YQGQjs.DateRangeSelector,
+      _chunkQS5Y6ZBFjs.DateRangeSelector,
       {
         onDateChange: (range) => {
           if (!_optionalChain([range, 'optionalAccess', _ => _.from]) || !_optionalChain([range, 'optionalAccess', _2 => _2.to])) return;
@@ -99,16 +99,16 @@ function TokenUsageAdminFilterBar({ granularity, companyId, metric, companies, o
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkR666YQGQjs.Select,
+      _chunkQS5Y6ZBFjs.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, _chunkR666YQGQjs.SelectTrigger, { className: "w-56", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.SelectValue, { placeholder: t("token_usage.admin.all_companies") }) }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.SelectContent, { children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.SelectItem, { value: ALL_COMPANIES, children: t("token_usage.admin.all_companies") }),
-            companies.map((company) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.SelectItem, { value: company.id, children: company.label }, company.id))
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.SelectTrigger, { className: "w-56", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.SelectValue, { placeholder: t("token_usage.admin.all_companies") }) }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkQS5Y6ZBFjs.SelectContent, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.SelectItem, { value: ALL_COMPANIES, children: t("token_usage.admin.all_companies") }),
+            companies.map((company) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.SelectItem, { value: company.id, children: company.label }, company.id))
           ] })
         ]
       }
@@ -131,7 +131,7 @@ function Segmented({
       children: options.map((option) => {
         const selected = option.value === value;
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkR666YQGQjs.Button,
+          _chunkQS5Y6ZBFjs.Button,
           {
             type: "button",
             size: "sm",
@@ -212,7 +212,7 @@ var TokenUsageAdminProvider = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void
   topN = DEFAULT_TOP_N
 }) => {
   const t = _nextintl.useTranslations.call(void 0, );
-  const generateUrl = _chunkR666YQGQjs.usePageUrlGenerator.call(void 0, );
+  const generateUrl = _chunkQS5Y6ZBFjs.usePageUrlGenerator.call(void 0, );
   const [filters, setFilterState] = _react.useState.call(void 0, () => {
     const range = defaultRange();
     return {
@@ -330,7 +330,7 @@ var TokenUsageAdminProvider = /* @__PURE__ */ _chunk7QVYU63Ejs.__name.call(void
       error
     ]
   );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.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, _chunkQS5Y6ZBFjs.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);
@@ -458,7 +458,7 @@ function LeadTile({
   delta,
   previousLabel
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.Card, { "data-testid": testId, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.CardContent, { className: "grid gap-1", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.Card, { "data-testid": testId, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkQS5Y6ZBFjs.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: [
@@ -474,7 +474,7 @@ function SupportingTile({
   value,
   delta
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.Card, { "data-testid": testId, size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.CardContent, { className: "grid gap-1", children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.Card, { "data-testid": testId, size: "sm", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkQS5Y6ZBFjs.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 }),
@@ -566,8 +566,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, _chunkR666YQGQjs.Table, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableRow, { children: columns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableHead, { className: _chunkDS4IBFWAjs.cn.call(void 0, column.numeric && "text-right"), 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, _chunkQS5Y6ZBFjs.Table, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.TableHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.TableRow, { children: columns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.TableHead, { className: _chunkDS4IBFWAjs.cn.call(void 0, column.numeric && "text-right"), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         "button",
         {
           type: "button",
@@ -582,20 +582,20 @@ function TokenUsageBreakdownTable({ rows, metric }) {
           ]
         }
       ) }, column.key)) }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableBody, { children: sortedRows.map((row) => {
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.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, _chunkR666YQGQjs.TableRow, { "data-testid": `breakdown-row-${row.id}`, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-xs", children: row.id === "other" ? t("token_usage.admin.other") : row.label }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-muted-foreground text-xs", children: _nullishCoalesce(row.sublabel, () => ( "")) }),
-          showActiveUsers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-right text-xs tabular-nums", children: row.activeUsers === void 0 ? "" : formatDecimal(row.activeUsers, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.calls, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.tokensIn, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.tokensOut, 0) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatPercent(cacheHitPercentage(row.cached, row.tokensIn)) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatMetricValue(row.cost, "cost") }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatMetricValue(row.credits, "credits") }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatPercent(share) })
+        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkQS5Y6ZBFjs.TableRow, { "data-testid": `breakdown-row-${row.id}`, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.TableCell, { className: "text-xs", children: row.id === "other" ? t("token_usage.admin.other") : row.label }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.TableCell, { className: "text-muted-foreground text-xs", children: _nullishCoalesce(row.sublabel, () => ( "")) }),
+          showActiveUsers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.TableCell, { className: "text-right text-xs tabular-nums", children: row.activeUsers === void 0 ? "" : formatDecimal(row.activeUsers, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.calls, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.tokensIn, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatDecimal(row.tokensOut, 0) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatPercent(cacheHitPercentage(row.cached, row.tokensIn)) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatMetricValue(row.cost, "cost") }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatMetricValue(row.credits, "credits") }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.TableCell, { className: "text-right text-xs tabular-nums", children: formatPercent(share) })
         ] }, row.id);
       }) })
     ] }) })
@@ -789,7 +789,7 @@ function TokenUsageTimelineChart({ rows, metric, stackBy, className }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className, 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, _chunkR666YQGQjs.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, _chunkQS5Y6ZBFjs.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,
@@ -813,17 +813,17 @@ function TokenUsageTimelineChart({ rows, metric, stackBy, className }) {
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkR666YQGQjs.ChartTooltip,
+        _chunkQS5Y6ZBFjs.ChartTooltip,
         {
           content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkR666YQGQjs.ChartTooltipContent,
+            _chunkQS5Y6ZBFjs.ChartTooltipContent,
             {
               labelFormatter: (value) => formatBucket.format(/* @__PURE__ */ new Date(`${String(value)}T00:00:00.000Z`))
             }
           )
         }
       ),
-      seriesKeys.length >= 2 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.ChartLegend, { content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.ChartLegendContent, {}) }) : null,
+      seriesKeys.length >= 2 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.ChartLegend, { content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.ChartLegendContent, {}) }) : null,
       seriesKeys.map((series, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _recharts.Bar,
         {
@@ -869,19 +869,19 @@ function TokenUsageAdminContainer() {
     [t]
   );
   if (error) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.Card, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-destructive text-xs/relaxed", children: error }) }) }) }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.RoundPageContainer, { fullWidth: true, forceHeader: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.Card, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.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, _chunkR666YQGQjs.RoundPageContainer, { fullWidth: true, forceHeader: true });
+  if (isLoading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.RoundPageContainer, { fullWidth: true, forceHeader: true });
   const emptyLabel = t("token_usage.admin.no_data");
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.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, _chunkQS5Y6ZBFjs.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 }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.Card, { children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.CardHeader, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardTitle, { children: t("token_usage.admin.usage_over_time") }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardAction, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkQS5Y6ZBFjs.Card, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkQS5Y6ZBFjs.CardHeader, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.CardTitle, { children: t("token_usage.admin.usage_over_time") }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.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, 
-            _chunkR666YQGQjs.Select,
+            _chunkQS5Y6ZBFjs.Select,
             {
               items: stackByItems,
               value: filters.stackBy,
@@ -889,29 +889,29 @@ function TokenUsageAdminContainer() {
                 if (value) setFilters({ stackBy: value });
               },
               children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.SelectTrigger, { size: "sm", className: "w-36", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.SelectValue, {}) }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.SelectContent, { children: STACK_BY_VALUES.map((value) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.SelectItem, { value, children: stackByItems[value] }, value)) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.SelectTrigger, { size: "sm", className: "w-36", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.SelectValue, {}) }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.SelectContent, { children: STACK_BY_VALUES.map((value) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.SelectItem, { value, children: stackByItems[value] }, value)) })
               ]
             }
           )
         ] }) })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageTimelineChart, { rows: timeline, metric: filters.metric, stackBy: filters.stackBy }) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.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, _chunkR666YQGQjs.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardTitle, { children: t("token_usage.admin.by_company") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byCompany, metric: filters.metric, emptyLabel }) })
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkQS5Y6ZBFjs.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.CardTitle, { children: t("token_usage.admin.by_company") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byCompany, metric: filters.metric, emptyLabel }) })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardTitle, { children: t("token_usage.admin.by_user") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byUser, metric: filters.metric, emptyLabel }) })
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkQS5Y6ZBFjs.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.CardTitle, { children: t("token_usage.admin.by_user") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageRankedBar, { rows: byUser, metric: filters.metric, emptyLabel }) })
       ] })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkDS4IBFWAjs.cn.call(void 0, "grid gap-4", !singleCustomerMode && "md:grid-cols-2"), children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardTitle, { children: t("token_usage.admin.customer_by_operation") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkQS5Y6ZBFjs.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.CardTitle, { children: t("token_usage.admin.customer_by_operation") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           TokenUsageRankedBar,
           {
             rows: byCustomerOperation,
@@ -921,9 +921,9 @@ function TokenUsageAdminContainer() {
           }
         ) })
       ] }),
-      !singleCustomerMode && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.Card, { children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardTitle, { children: t("token_usage.admin.platform_by_operation") }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      !singleCustomerMode && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkQS5Y6ZBFjs.Card, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.CardTitle, { children: t("token_usage.admin.platform_by_operation") }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           TokenUsageRankedBar,
           {
             rows: byOperation,
@@ -934,9 +934,9 @@ function TokenUsageAdminContainer() {
         ) })
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkR666YQGQjs.Card, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardTitle, { children: t("token_usage.admin.detail") }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR666YQGQjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageBreakdownTable, { rows: byCompany, metric: filters.metric }) })
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkQS5Y6ZBFjs.Card, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.CardHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.CardTitle, { children: t("token_usage.admin.detail") }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkQS5Y6ZBFjs.CardContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TokenUsageBreakdownTable, { rows: byCompany, metric: filters.metric }) })
     ] })
   ] }) });
 }

package/dist/features/tokenusage/index.mjs

@@ -26,7 +26,7 @@ import {
   TableHeader,
   TableRow,
   usePageUrlGenerator
-} from "../../chunk-RVGBVVRD.mjs";
+} from "../../chunk-TESVH5PV.mjs";
 import "../../chunk-HN5ED7OF.mjs";
 import {
   AbstractService,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "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

@@ -510,7 +510,20 @@ export function RoundPageContainer({
                   // `flex-col` + a separate scroll body below: the header must stay
                   // put while the panel content scrolls. Scrolling on this element
                   // (as it did before) would carry the header away with the content.
-                  "flex h-full shrink-0 flex-col overflow-hidden transition-all duration-300 ease-in-out",
+                  //
+                  // `relative` is load-bearing: the panel content mounts Base UI
+                  // dialog headers marked `sr-only`, which are `position: absolute`
+                  // with no offsets. Without a positioned ancestor their containing
+                  // block is the initial containing block, so when the panel is
+                  // collapsed (`w-0`) their static position lands a few px past the
+                  // viewport's right edge and adds to the DOCUMENT's scroll area —
+                  // `overflow-hidden` here cannot clip them, because it only clips
+                  // descendants whose containing block is inside this element. That
+                  // produced a page-wide horizontal scrollbar, which in turn stole
+                  // 15px of height and made every `100vh`/`100svh` box overflow
+                  // vertically too. Making this the containing block lets
+                  // `overflow-hidden` clip them again.
+                  "relative flex h-full shrink-0 flex-col overflow-hidden transition-all duration-300 ease-in-out",
                   showDetails ? "w-96 border-l opacity-100" : "ml-0 w-0 border-l-0 opacity-0",
                 )}
               >

package/src/shadcnui/ui/command.tsx

@@ -21,9 +21,22 @@ function Command({ className, ...props }: React.ComponentProps<typeof CommandPri
   );
 }
 
+/**
+ * `title` / `description` render a visually hidden header **inside** the popup, for command
+ * dialogs whose own content carries no `DialogTitle`. Omit both when `children` already render
+ * a `DialogTitle` — Base UI keeps a single `titleElementId` per dialog
+ * (`store.useSyncedValueWithCleanup('titleElementId', id)`), so two mounted titles fight over
+ * the popup's `aria-labelledby` and unmount order decides which one wins.
+ *
+ * The header must stay inside `DialogContent`. Rendered as a sibling of it (as shadcn upstream
+ * does) it is NOT portalled: it lands inline in the page, and because `sr-only` is
+ * `position: absolute` with no offsets and usually no positioned ancestor, its static position
+ * can fall outside the viewport and grow the DOCUMENT's scroll area — a stray page-wide
+ * scrollbar with no visible cause. See the `relative` note in RoundPageContainer.
+ */
 function CommandDialog({
-  title = "Command Palette",
-  description = "Search for a command to run...",
+  title,
+  description,
   children,
   className,
   showCloseButton = false,
@@ -37,11 +50,13 @@ function CommandDialog({
 }) {
   return (
     <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
       <DialogContent className={cn("rounded-xl! p-0 overflow-hidden p-0", className)} showCloseButton={showCloseButton}>
+        {(title || description) && (
+          <DialogHeader className="sr-only">
+            {title && <DialogTitle>{title}</DialogTitle>}
+            {description && <DialogDescription>{description}</DialogDescription>}
+          </DialogHeader>
+        )}
         {children}
       </DialogContent>
     </Dialog>