@carlonicora/nextjs-jsonapi 3.3.8 → 3.4.0

package/dist/features/tokenusage/index.mjs

@@ -26,7 +26,7 @@ import {
   TableHeader,
   TableRow,
   usePageUrlGenerator
-} from "../../chunk-CFZW6GU4.mjs";
+} from "../../chunk-G5LSXG5K.mjs";
 import "../../chunk-RZDY4CIF.mjs";
 import {
   AbstractService,
@@ -612,7 +612,7 @@ function TokenUsageBreakdownTable({ rows, metric }) {
     // would swallow the overflow before this scroller ever saw it — hence the
     // child override. Wide metric tables must scroll, never widen the page.
     /* @__PURE__ */ jsx4("div", { className: "overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible", children: /* @__PURE__ */ jsxs3(Table, { children: [
-      /* @__PURE__ */ jsx4(TableHeader, { children: /* @__PURE__ */ jsx4(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx4(TableHead, { className: cn(column.numeric && "text-right"), children: /* @__PURE__ */ jsxs3(
+      /* @__PURE__ */ jsx4(TableHeader, { children: /* @__PURE__ */ jsx4(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx4(TableHead, { className: cn(column.numeric && "text-end"), children: /* @__PURE__ */ jsxs3(
         "button",
         {
           type: "button",
@@ -633,14 +633,14 @@ function TokenUsageBreakdownTable({ rows, metric }) {
         return /* @__PURE__ */ jsxs3(TableRow, { "data-testid": `breakdown-row-${row.id}`, children: [
           /* @__PURE__ */ jsx4(TableCell, { className: "text-xs", children: row.id === "other" ? t("token_usage.admin.other") : row.label }),
           /* @__PURE__ */ jsx4(TableCell, { className: "text-muted-foreground text-xs", children: row.sublabel ?? "" }),
-          showActiveUsers && /* @__PURE__ */ jsx4(TableCell, { className: "text-right text-xs tabular-nums", children: row.activeUsers === void 0 ? "" : decimal(row.activeUsers, 0) }),
-          /* @__PURE__ */ jsx4(TableCell, { className: "text-right text-xs tabular-nums", children: decimal(row.calls, 0) }),
-          /* @__PURE__ */ jsx4(TableCell, { className: "text-right text-xs tabular-nums", children: decimal(row.tokensIn, 0) }),
-          /* @__PURE__ */ jsx4(TableCell, { className: "text-right text-xs tabular-nums", children: decimal(row.tokensOut, 0) }),
-          /* @__PURE__ */ jsx4(TableCell, { className: "text-right text-xs tabular-nums", children: percent(cacheHitPercentage(row.cached, row.tokensIn)) }),
-          /* @__PURE__ */ jsx4(TableCell, { className: "text-right text-xs tabular-nums", children: formatValue(row.cost, "cost") }),
-          /* @__PURE__ */ jsx4(TableCell, { className: "text-right text-xs tabular-nums", children: formatValue(row.credits, "credits") }),
-          /* @__PURE__ */ jsx4(TableCell, { className: "text-right text-xs tabular-nums", children: percent(share) })
+          showActiveUsers && /* @__PURE__ */ jsx4(TableCell, { className: "text-end text-xs tabular-nums", children: row.activeUsers === void 0 ? "" : decimal(row.activeUsers, 0) }),
+          /* @__PURE__ */ jsx4(TableCell, { className: "text-end text-xs tabular-nums", children: decimal(row.calls, 0) }),
+          /* @__PURE__ */ jsx4(TableCell, { className: "text-end text-xs tabular-nums", children: decimal(row.tokensIn, 0) }),
+          /* @__PURE__ */ jsx4(TableCell, { className: "text-end text-xs tabular-nums", children: decimal(row.tokensOut, 0) }),
+          /* @__PURE__ */ jsx4(TableCell, { className: "text-end text-xs tabular-nums", children: percent(cacheHitPercentage(row.cached, row.tokensIn)) }),
+          /* @__PURE__ */ jsx4(TableCell, { className: "text-end text-xs tabular-nums", children: formatValue(row.cost, "cost") }),
+          /* @__PURE__ */ jsx4(TableCell, { className: "text-end text-xs tabular-nums", children: formatValue(row.credits, "credits") }),
+          /* @__PURE__ */ jsx4(TableCell, { className: "text-end text-xs tabular-nums", children: percent(share) })
         ] }, row.id);
       }) })
     ] }) })
@@ -724,7 +724,7 @@ function TokenUsageRankedBar({ rows, metric, emptyLabel, labelsAreOperationTypes
     return /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-x-3 gap-y-0.5 py-0.5", children: [
       /* @__PURE__ */ jsxs4("div", { className: "grid min-w-0 gap-0.5", children: [
         /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground truncate text-xs", children: renderLabel(row) }),
-        /* @__PURE__ */ jsx5("div", { className: "bg-muted h-2 w-full overflow-hidden rounded-r-[4px]", children: /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx5("div", { className: "bg-muted h-2 w-full overflow-hidden rounded-r-[4px]", dir: "ltr", children: /* @__PURE__ */ jsx5(
           "div",
           {
             "data-testid": `ranked-fill-${row.id}`,
@@ -734,12 +734,12 @@ function TokenUsageRankedBar({ rows, metric, emptyLabel, labelsAreOperationTypes
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsx5("span", { "data-testid": `ranked-value-${row.id}`, className: "text-right text-xs tabular-nums", children: formatValue(value, metric) }),
+      /* @__PURE__ */ jsx5("span", { "data-testid": `ranked-value-${row.id}`, className: "text-end text-xs tabular-nums", children: formatValue(value, metric) }),
       /* @__PURE__ */ jsx5(
         "span",
         {
           "data-testid": `ranked-share-${row.id}`,
-          className: "text-muted-foreground w-16 text-right text-xs tabular-nums",
+          className: "text-muted-foreground w-16 text-end text-xs tabular-nums",
           children: percent(share)
         }
       )
@@ -830,61 +830,67 @@ function TokenUsageTimelineChart({ rows, metric, stackBy, className }) {
   }
   const granularity = inferGranularity(chartData.map((entry) => entry.bucket));
   const seriesColorFor = /* @__PURE__ */ __name((series, index) => series === OTHER_SERIES ? OTHER_COLOR : seriesColor(index, mode), "seriesColorFor");
-  return /* @__PURE__ */ jsxs5("div", { className, children: [
-    /* @__PURE__ */ jsx6("span", { className: "sr-only", "data-testid": "timeline-data", children: JSON.stringify(chartData) }),
-    /* @__PURE__ */ jsx6("span", { className: "sr-only", "data-testid": "timeline-series", children: JSON.stringify(seriesKeys) }),
-    /* @__PURE__ */ jsx6(ChartContainer, { config: chartConfig, className: "aspect-auto h-72 w-full", children: /* @__PURE__ */ jsxs5(BarChart, { accessibilityLayer: true, data: chartData, margin: { top: 8, right: 8, bottom: 0, left: 0 }, children: [
-      /* @__PURE__ */ jsx6(CartesianGrid, { vertical: false }),
-      /* @__PURE__ */ jsx6(
-        XAxis,
-        {
-          dataKey: "bucket",
-          tickLine: false,
-          axisLine: false,
-          tickMargin: 8,
-          minTickGap: 16,
-          tickFormatter: (value) => bucketDate(value, granularity)
-        }
-      ),
-      /* @__PURE__ */ jsx6(
-        YAxis,
-        {
-          tickLine: false,
-          axisLine: false,
-          tickMargin: 8,
-          width: 48,
-          tickFormatter: (value) => compact(value)
-        }
-      ),
-      /* @__PURE__ */ jsx6(
-        ChartTooltip,
-        {
-          content: /* @__PURE__ */ jsx6(
-            ChartTooltipContent,
-            {
-              labelFormatter: (value) => bucketDate(String(value), granularity),
-              valueFormatter: (value) => formatValue(Number(value), metric),
-              hideZeroValues: true
-            }
-          )
-        }
-      ),
-      seriesKeys.length >= 2 ? /* @__PURE__ */ jsx6(ChartLegend, { content: /* @__PURE__ */ jsx6(ChartLegendContent, {}) }) : null,
-      seriesKeys.map((series, index) => /* @__PURE__ */ jsx6(
-        Bar,
-        {
-          dataKey: series,
-          stackId: "usage",
-          maxBarSize: 28,
-          fill: seriesColorFor(series, index),
-          stroke: "var(--background)",
-          strokeWidth: 2,
-          radius: index === seriesKeys.length - 1 ? [4, 4, 0, 0] : 0
-        },
-        series
-      ))
-    ] }) })
-  ] });
+  return (
+    // The chart is a coordinate system, not prose: recharts lays the axes and the
+    // stacked bars out left-to-right, so the whole chart stays an LTR island even
+    // under dir="rtl". Only the labels inside it are translated.
+    // rtl-ok: deliberate LTR island (chart)
+    /* @__PURE__ */ jsxs5("div", { className, dir: "ltr", children: [
+      /* @__PURE__ */ jsx6("span", { className: "sr-only", "data-testid": "timeline-data", children: JSON.stringify(chartData) }),
+      /* @__PURE__ */ jsx6("span", { className: "sr-only", "data-testid": "timeline-series", children: JSON.stringify(seriesKeys) }),
+      /* @__PURE__ */ jsx6(ChartContainer, { config: chartConfig, className: "aspect-auto h-72 w-full", children: /* @__PURE__ */ jsxs5(BarChart, { accessibilityLayer: true, data: chartData, margin: { top: 8, right: 8, bottom: 0, left: 0 }, children: [
+        /* @__PURE__ */ jsx6(CartesianGrid, { vertical: false }),
+        /* @__PURE__ */ jsx6(
+          XAxis,
+          {
+            dataKey: "bucket",
+            tickLine: false,
+            axisLine: false,
+            tickMargin: 8,
+            minTickGap: 16,
+            tickFormatter: (value) => bucketDate(value, granularity)
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          YAxis,
+          {
+            tickLine: false,
+            axisLine: false,
+            tickMargin: 8,
+            width: 48,
+            tickFormatter: (value) => compact(value)
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          ChartTooltip,
+          {
+            content: /* @__PURE__ */ jsx6(
+              ChartTooltipContent,
+              {
+                labelFormatter: (value) => bucketDate(String(value), granularity),
+                valueFormatter: (value) => formatValue(Number(value), metric),
+                hideZeroValues: true
+              }
+            )
+          }
+        ),
+        seriesKeys.length >= 2 ? /* @__PURE__ */ jsx6(ChartLegend, { content: /* @__PURE__ */ jsx6(ChartLegendContent, {}) }) : null,
+        seriesKeys.map((series, index) => /* @__PURE__ */ jsx6(
+          Bar,
+          {
+            dataKey: series,
+            stackId: "usage",
+            maxBarSize: 28,
+            fill: seriesColorFor(series, index),
+            stroke: "var(--background)",
+            strokeWidth: 2,
+            radius: index === seriesKeys.length - 1 ? [4, 4, 0, 0] : 0
+          },
+          series
+        ))
+      ] }) })
+    ] })
+  );
 }
 __name(TokenUsageTimelineChart, "TokenUsageTimelineChart");