@agent-native/toolkit 0.217.0 → 0.218.0

package/src/app/chat/agentkit-chat/rail.ts

@@ -1,5 +1,16 @@
 export {
   useChatThreads,
+  useChatThreadList,
+  notifyChatThreadsUpdated,
+  type ChatThreadListRow,
+  type ChatThreadAccessBasis,
+  type ChatThreadOwnership,
+  type ChatThreadVisibility,
+  type ChatThreadListRefreshOutcome,
+  type ChatThreadScope,
+  type UseChatThreadsOptions,
+  type UseChatThreadListOptions,
+  type UseChatThreadListResult,
   type ChatThreadSummary,
 } from "@agent-native/core/client/agent-chat";
 export {

package/src/app/chat/chat/index.ts

@@ -54,6 +54,7 @@ export type {
   AgentChatSurfaceKind,
 } from "./surface-types.js";
 export type { AgentChatTranscriptLayout } from "../../agentkit/react/transcript-layout.js";
+export type { AgentChatDataChartLayout } from "../../agentkit/react/data-chart-layout.js";
 export type { AgentChatWorkedForRowLayout } from "../../agentkit/react/transcript-layout.js";
 export type {
   MultiTabAssistantChatProps,
@@ -222,6 +223,15 @@ export {
 } from "@agent-native/core/client/agent-chat";
 export {
   useChatThreads,
+  useChatThreadList,
+  notifyChatThreadsUpdated,
+  type ChatThreadListRow,
+  type ChatThreadAccessBasis,
+  type ChatThreadOwnership,
+  type ChatThreadVisibility,
+  type ChatThreadListRefreshOutcome,
+  type UseChatThreadListOptions,
+  type UseChatThreadListResult,
   type ChatThreadScope,
   type ChatThreadSnapshot,
   type ChatThreadSummary,

package/src/app/chat/chat/surface-types.ts

@@ -27,6 +27,7 @@ import type { ExportedMessageRepository } from "@assistant-ui/react";
 import type * as React from "react";
 
 import type { AgentKitWorkedForSummaryRenderProps } from "../../agentkit/react/context.js";
+import type { AgentChatDataChartLayout } from "../../agentkit/react/data-chart-layout.js";
 import type { AgentMessageContentOrderResolver } from "../../agentkit/react/message-content-order.js";
 import type {
   AgentChatTranscriptLayout,
@@ -244,6 +245,8 @@ export interface AssistantChatProps {
   emptyStateFooter?: React.ReactNode;
   /** Optional transcript geometry. Omitted values keep the shared defaults. */
   transcriptLayout?: AgentChatTranscriptLayout;
+  /** Optional sizing and typography for built-in chat data charts. */
+  dataChartLayout?: AgentChatDataChartLayout;
   /** Optional elapsed-work row geometry. Omitted values keep the shared defaults. */
   workedForRowLayout?: AgentChatWorkedForRowLayout;
   /** Optional duration text for the shared completed-work row. */

package/src/app/chat/chat/tool-call-display.spec.tsx

@@ -352,6 +352,35 @@ describe("ToolCallDisplay native renderers", () => {
     expect(container.textContent).not.toContain("Ada");
   });
 
+  it("passes the app chart layout to regular tool renderers", () => {
+    const layout = { maxWidth: 760, labelFontSize: 14 };
+    registerToolRenderer({
+      id: "app.chart-layout",
+      match: "app-chart-layout",
+      Component: ({ context }) => (
+        <div data-chart-layout-width={context.dataChartLayout?.maxWidth} />
+      ),
+    });
+
+    act(() => {
+      root.render(
+        <ToolCallDisplay
+          toolName="app-chart-layout"
+          args={{}}
+          result="ready"
+          isRunning={false}
+          dataChartLayout={layout}
+        />,
+      );
+    });
+
+    expect(
+      container
+        .querySelector("[data-chart-layout-width]")
+        ?.getAttribute("data-chart-layout-width"),
+    ).toBe("760");
+  });
+
   it("renders table-only data insight payloads without a chart", async () => {
     await act(async () => {
       root.render(

package/src/app/chat/chat/tool-call-display.tsx

@@ -47,6 +47,7 @@ import React, {
   useRef,
 } from "react";
 
+import type { AgentChatDataChartLayout } from "../../agentkit/react/data-chart-layout.js";
 import {
   workedForRowChevronStyle,
   workedForRowSummaryStyle,
@@ -647,6 +648,7 @@ export function ToolCallDisplay({
   isLatestRunning = isRunning,
   isActiveTail,
   workedForRowLayout,
+  dataChartLayout,
   formatWorkedForDuration,
 }: {
   toolName: string;
@@ -670,6 +672,7 @@ export function ToolCallDisplay({
   repeatCount?: number;
   isActiveTail?: boolean;
   workedForRowLayout?: AgentChatWorkedForRowLayout;
+  dataChartLayout?: AgentChatDataChartLayout;
   formatWorkedForDuration?: (durationMs: number) => string;
   /** @deprecated Use isActiveTail. */
   isLatestRunning?: boolean;
@@ -758,6 +761,7 @@ export function ToolCallDisplay({
       repeatCount={repeatCount}
       context={builderContext}
       workedForRowLayout={workedForRowLayout}
+      dataChartLayout={dataChartLayout}
       formatWorkedForDuration={formatWorkedForDuration}
     />,
   );
@@ -782,6 +786,7 @@ function ToolCallDisplayGeneric({
   repeatCount,
   context,
   workedForRowLayout,
+  dataChartLayout,
   formatWorkedForDuration,
 }: {
   toolName: string;
@@ -805,6 +810,7 @@ function ToolCallDisplayGeneric({
   repeatCount?: number;
   context?: string;
   workedForRowLayout?: AgentChatWorkedForRowLayout;
+  dataChartLayout?: AgentChatDataChartLayout;
   formatWorkedForDuration?: (durationMs: number) => string;
 }) {
   const t = useT();
@@ -919,6 +925,7 @@ function ToolCallDisplayGeneric({
     resultJson: parsedResult,
     isRunning,
     isActiveTail,
+    dataChartLayout,
     ...(typeof toolCallId === "string"
       ? { widgetId: `${toolCallId}:chat-ui` }
       : {}),

package/src/app/chat/chat/tool-render-registry.tsx

@@ -1,6 +1,8 @@
 import type { ActionChatUIConfig } from "@agent-native/core/action-ui";
 import type { ComponentType } from "react";
 
+import type { AgentChatDataChartLayout } from "../../agentkit/react/data-chart-layout.js";
+
 export interface ToolRendererContext {
   toolName: string;
   args: Record<string, unknown>;
@@ -15,6 +17,7 @@ export interface ToolRendererContext {
   isRunning: boolean;
   isActiveTail?: boolean;
   chatUI?: ActionChatUIConfig;
+  dataChartLayout?: AgentChatDataChartLayout;
 }
 
 export interface ToolRendererProps {

package/src/app/chat/chat/widgets/DataChartRenderer.spec.tsx

@@ -59,6 +59,302 @@ describe("DataChartRenderer theme colors", () => {
     expect(markup).toContain('stroke="hsl(var(--chart-grid, var(--border)))"');
   });
 
+  it("applies app chart sizing, plot insets, typography, and integer tick labels", () => {
+    const markup = renderToStaticMarkup(
+      <DataChartRenderer
+        chart={{
+          type: "line",
+          xKey: "day",
+          series: [{ key: "value", label: "Value" }],
+          data: [
+            { day: "First", value: 0 },
+            { day: "Last", value: 1 },
+          ],
+          valueAxisTickInterval: 0.1,
+        }}
+        layout={{
+          plotInsets: { top: 6, right: 8, bottom: 29 },
+          labelFontFamily: "IBM Plex Sans",
+          labelFontSize: 14,
+          labelTone: "foreground",
+        }}
+      />,
+    );
+
+    expect(markup).toContain('font-family="IBM Plex Sans"');
+    expect(markup).toContain('font-size="14"');
+    expect(markup).toMatch(
+      /<text[^>]*fill="hsl\(var\(--foreground\)\)"[^>]*>First<\/text>/,
+    );
+    expect(markup).toMatch(/<line x1="[^"]+" x2="632" y1="6" y2="6"/);
+    expect(markup).toMatch(/<line x1="[^"]+" x2="632" y1="331" y2="331"/);
+    expect(markup).toContain(">1</text>");
+    expect(markup).not.toContain(">1.0</text>");
+  });
+
+  it("preserves one-decimal ticks without an app layout override", () => {
+    const markup = renderToStaticMarkup(
+      <DataChartRenderer
+        chart={{
+          type: "line",
+          xKey: "day",
+          series: [{ key: "value", label: "Value" }],
+          data: [
+            { day: "First", value: 0 },
+            { day: "Last", value: 1 },
+          ],
+          valueAxisTickInterval: 0.1,
+        }}
+      />,
+    );
+
+    expect(markup).toContain(">0.0</text>");
+    expect(markup).toContain(">1.0</text>");
+  });
+
+  it("keeps positive value labels outside horizontal bars with a right inset", () => {
+    const markup = renderToStaticMarkup(
+      <DataChartRenderer
+        chart={{
+          type: "bar",
+          layout: "horizontal",
+          xKey: "day",
+          series: [{ key: "value", label: "Value" }],
+          data: [{ day: "Monday", value: 3 }],
+          showValueLabels: true,
+          valueAxisTickInterval: 0.2,
+        }}
+        layout={{ plotInsets: { right: 8 } }}
+      />,
+    );
+
+    const plotRightEdge = Number(
+      markup.match(/<line x1="[\d.]+" x2="([\d.]+)" y1="14" y2="326"/)?.[1],
+    );
+    expect(plotRightEdge).toBeLessThanOrEqual(632);
+    expect(markup).toContain('fill="hsl(var(--muted-foreground))"');
+    const maximumBarValueLabel = markup.match(
+      /<text[^>]*x="([\d.]+)" y="[^"]+" fill="hsl\(var\(--muted-foreground\)\)" font-size="11" font-weight="400" text-anchor="start">3<\/text>/,
+    );
+    expect(maximumBarValueLabel).not.toBeNull();
+    expect(Number(maximumBarValueLabel?.[1])).toBeGreaterThan(plotRightEdge);
+    expect(Number(maximumBarValueLabel?.[1]) + 8).toBeLessThanOrEqual(640);
+  });
+
+  it("rejects inset combinations that leave no positive plot area", () => {
+    const renderWithInsets = (plotInsets: { right?: number; top?: number }) =>
+      renderToStaticMarkup(
+        <DataChartRenderer
+          chart={{
+            type: "line",
+            xKey: "day",
+            series: [{ key: "value", label: "Value" }],
+            data: [{ day: "Monday", value: 1 }],
+          }}
+          layout={{ plotInsets }}
+        />,
+      );
+
+    expect(() => renderWithInsets({ right: 600 })).toThrow(
+      "positive chart plot area",
+    );
+    expect(() => renderWithInsets({ top: 400 })).toThrow(
+      "positive chart plot area",
+    );
+  });
+
+  it("keeps a vertical bar chart's final category label inside the SVG", () => {
+    const markup = renderToStaticMarkup(
+      <DataChartRenderer
+        chart={{
+          type: "bar",
+          xKey: "day",
+          series: [{ key: "value", label: "Value" }],
+          data: Array.from({ length: 10 }, (_, index) => ({
+            day: index === 9 ? "Last category label" : `Day ${index}`,
+            value: index,
+          })),
+        }}
+        layout={{ plotInsets: { right: 8 } }}
+      />,
+    );
+    const finalCategory = markup.match(
+      /<text[^>]*x="([\d.]+)" y="348"[^>]*text-anchor="end">Last category\.\.\.<\/text>/,
+    );
+
+    expect(finalCategory).not.toBeNull();
+    expect(Number(finalCategory?.[1])).toBeLessThanOrEqual(632);
+  });
+
+  it("keeps a long first category label inside the SVG", () => {
+    const markup = renderToStaticMarkup(
+      <DataChartRenderer
+        chart={{
+          type: "line",
+          xKey: "day",
+          series: [{ key: "value", label: "Value" }],
+          data: [
+            { day: "First category label", value: 0 },
+            { day: "Last", value: 1 },
+          ],
+        }}
+      />,
+    );
+
+    expect(markup).toMatch(
+      /<text[^>]*x="46" y="348"[^>]*text-anchor="start">First categor\.\.\.<\/text>/,
+    );
+  });
+
+  it("keeps top vertical-bar value labels above the bar at a zero inset", () => {
+    const markup = renderToStaticMarkup(
+      <DataChartRenderer
+        chart={{
+          type: "bar",
+          xKey: "day",
+          series: [{ key: "value", label: "Value" }],
+          data: [{ day: "Monday", value: 1 }],
+          showValueLabels: true,
+        }}
+        layout={{ plotInsets: { top: 0 } }}
+      />,
+    );
+    const valueLabel = markup.match(
+      /<text(?=[^>]*data-value-label="true")(?=[^>]*>1<\/text>)[^>]*y="([\d.]+)"[^>]*>/,
+    );
+    const bar = markup.match(/<rect[^>]*y="([\d.]+)"/);
+
+    expect(valueLabel).not.toBeNull();
+    expect(Number(valueLabel?.[1])).toBeGreaterThanOrEqual(11);
+    expect(bar).not.toBeNull();
+    expect(Number(bar?.[1]) - Number(valueLabel?.[1])).toBeGreaterThanOrEqual(
+      5,
+    );
+  });
+
+  it("keeps final vertical-bar value labels inside the SVG at a small right inset", () => {
+    const markup = renderToStaticMarkup(
+      <DataChartRenderer
+        chart={{
+          type: "bar",
+          xKey: "day",
+          series: [{ key: "value", label: "Value" }],
+          data: Array.from({ length: 60 }, (_, index) => ({
+            day: `Day ${index}`,
+            value: index === 59 ? 1_234_567 : 0,
+          })),
+          showValueLabels: true,
+        }}
+        layout={{ plotInsets: { right: 8 } }}
+      />,
+    );
+    const valueLabels = Array.from(
+      markup.matchAll(
+        /<text(?=[^>]*data-value-label="true")([^>]*)>([^<]+)<\/text>/g,
+      ),
+    );
+    const finalValueLabel = valueLabels.at(-1);
+    const finalLabelX = Number(
+      finalValueLabel?.[1].match(/\bx="([\d.]+)"/)?.[1],
+    );
+    const finalLabelWidth =
+      Array.from(finalValueLabel?.[2] ?? "").length * 11 * 0.65;
+
+    expect(finalValueLabel).toBeDefined();
+    expect(finalLabelX + finalLabelWidth / 2).toBeLessThanOrEqual(640);
+  });
+
+  it("preserves the top value-axis label when the configured top inset is zero", () => {
+    const markup = renderToStaticMarkup(
+      <DataChartRenderer
+        chart={{
+          type: "line",
+          xKey: "day",
+          series: [{ key: "value", label: "Value" }],
+          data: [
+            { day: "Monday", value: 0 },
+            { day: "Tuesday", value: 1 },
+          ],
+          valueAxisTickInterval: 0.5,
+        }}
+        layout={{ labelFontSize: 12, plotInsets: { top: 0 } }}
+      />,
+    );
+    const topTick = markup.match(
+      /<text(?=[^>]*data-value-axis-tick="true")[^>]*y="([\d.]+)"[^>]*>1<\/text>/,
+    );
+
+    expect(topTick).not.toBeNull();
+    expect(Number(topTick?.[1])).toBeGreaterThanOrEqual(12);
+  });
+
+  it("keeps horizontal axis tick labels inside the chart at zero edge insets", () => {
+    const markup = renderToStaticMarkup(
+      <DataChartRenderer
+        chart={{
+          type: "bar",
+          layout: "horizontal",
+          xKey: "day",
+          series: [{ key: "value", label: "Value" }],
+          data: [{ day: "Monday", value: 3 }],
+          valueAxisTickInterval: 1,
+          xAxisTitle: "Value",
+        }}
+        layout={{ plotInsets: { right: 0, bottom: 0 } }}
+      />,
+    );
+    const finalTick = Array.from(
+      markup.matchAll(
+        /<text[^>]*x="([\d.]+)" y="([\d.]+)"[^>]*>([^<]+)<\/text>/g,
+      ),
+    )
+      .filter((match) => match[3] === "3")
+      .slice(-1)[0];
+
+    expect(finalTick).toBeDefined();
+    expect(Number(finalTick?.[1])).toBeLessThan(640);
+    expect(Number(finalTick?.[1]) + 4).toBeLessThanOrEqual(640);
+    expect(Number(finalTick?.[2])).toBeLessThan(340);
+  });
+
+  it("keeps vertical axis ticks and category labels clear at a zero bottom inset", () => {
+    const markup = renderToStaticMarkup(
+      <DataChartRenderer
+        chart={{
+          type: "line",
+          xKey: "day",
+          series: [{ key: "value", label: "Value" }],
+          data: [
+            { day: "Monday", value: 0 },
+            { day: "Tuesday", value: 1 },
+          ],
+          valueAxisTickInterval: 0.5,
+        }}
+        layout={{ labelFontSize: 12, plotInsets: { bottom: 0 } }}
+      />,
+    );
+    const minimumTick = markup.match(
+      /<text(?=[^>]*data-value-axis-tick="true")(?=[^>]*>0<\/text>)[^>]*y="([\d.]+)"/,
+    );
+    const categoryLabel = markup.match(
+      /<text[^>]*y="([\d.]+)"[^>]*>Tuesday<\/text>/,
+    );
+    const plotBaseline = Math.max(
+      ...Array.from(
+        markup.matchAll(/<line[^>]*y1="([\d.]+)" y2="([\d.]+)"/g),
+        (match) =>
+          match[1] === match[2] ? Number(match[1]) : Number.NEGATIVE_INFINITY,
+      ),
+    );
+
+    expect(minimumTick).not.toBeNull();
+    expect(Number(minimumTick?.[1]) + 3).toBeLessThanOrEqual(360);
+    expect(categoryLabel).not.toBeNull();
+    expect(Number(categoryLabel?.[1]) - plotBaseline).toBeGreaterThanOrEqual(
+      12,
+    );
+  });
+
   it("uses the requested chart content height", () => {
     const markup = renderToStaticMarkup(
       <DataChartRenderer chart={{ ...chart, contentHeight: 400 }} />,
@@ -217,7 +513,7 @@ describe("DataChartRenderer theme colors", () => {
     expect(numericLabels.at(-1)).toBe("99");
     const tickLabelPositions = Array.from(
       markup.matchAll(
-        /<text x="([\d.]+)"[^>]*text-anchor="middle">\d+<\/text>/g,
+        /<text[^>]*x="([\d.]+)"[^>]*text-anchor="middle">\d+<\/text>/g,
       ),
       (match) => Number(match[1]),
     );
@@ -290,7 +586,7 @@ describe("DataChartRenderer theme colors", () => {
     );
     const valueTickLabels = Array.from(
       markup.matchAll(
-        /<text x="([\d.]+)" y="340"[^>]*text-anchor="middle">([^<]+)<\/text>/g,
+        /<text[^>]*x="([\d.]+)" y="340"[^>]*text-anchor="middle">([^<]+)<\/text>/g,
       ),
       (match) => ({ x: Number(match[1]), label: match[2] ?? "" }),
     );
@@ -321,7 +617,7 @@ describe("DataChartRenderer theme colors", () => {
     );
     const valueTickLabels = Array.from(
       markup.matchAll(
-        /<text x="([\d.]+)" y="340"[^>]*text-anchor="middle">([^<]+)<\/text>/g,
+        /<text[^>]*x="([\d.]+)" y="340"[^>]*text-anchor="middle">([^<]+)<\/text>/g,
       ),
       (match) => ({ x: Number(match[1]), label: match[2] ?? "" }),
     );
@@ -344,7 +640,7 @@ describe("DataChartRenderer theme colors", () => {
     );
     const valueTickLabels = Array.from(
       markup.matchAll(
-        /<text x="([\d.]+)" y="340"[^>]*text-anchor="middle">([^<]+)<\/text>/g,
+        /<text[^>]*x="([\d.]+)" y="340"[^>]*text-anchor="middle">([^<]+)<\/text>/g,
       ),
       (match) => ({ x: Number(match[1]), label: match[2] ?? "" }),
     );
@@ -379,7 +675,7 @@ describe("DataChartRenderer theme colors", () => {
     );
     const valueLabels = Array.from(
       markup.matchAll(
-        /<text x="([\d.-]+)" y="([\d.]+)"[^>]*font-size="24"[^>]*text-anchor="(start|end)">([^<]+)<\/text>/g,
+        /<text[^>]*x="([\d.-]+)" y="([\d.]+)"[^>]*font-size="24"[^>]*text-anchor="(start|end)">([^<]+)<\/text>/g,
       ),
       (match) => ({
         x: Number(match[1]),
@@ -426,7 +722,9 @@ describe("DataChartRenderer theme colors", () => {
       />,
     );
     const tickLabels = Array.from(
-      markup.matchAll(/<text[^>]*text-anchor="end">([^<]+)<\/text>/g),
+      markup.matchAll(
+        /<text(?=[^>]*data-value-axis-tick="true")[^>]*>([^<]+)<\/text>/g,
+      ),
       (match) => match[1],
     );
 
@@ -454,7 +752,9 @@ describe("DataChartRenderer theme colors", () => {
       />,
     );
     const tickLabels = Array.from(
-      markup.matchAll(/<text[^>]*text-anchor="end">([^<]+)<\/text>/g),
+      markup.matchAll(
+        /<text(?=[^>]*data-value-axis-tick="true")[^>]*>([^<]+)<\/text>/g,
+      ),
       (match) => match[1],
     );
 
@@ -466,6 +766,40 @@ describe("DataChartRenderer theme colors", () => {
     ]);
   });
 
+  it("keeps integer data labels compact while axis ticks retain interval precision", () => {
+    const markup = renderToStaticMarkup(
+      <DataChartRenderer
+        chart={{
+          type: "line",
+          xKey: "day",
+          series: [{ key: "value", label: "Value" }],
+          data: [
+            { day: "Monday", value: 0 },
+            { day: "Tuesday", value: 7 },
+          ],
+          showValueLabels: true,
+          valueAxisTickInterval: 0.5,
+        }}
+      />,
+    );
+    const axisLabels = Array.from(
+      markup.matchAll(
+        /<text(?=[^>]*data-value-axis-tick="true")[^>]*>([^<]+)<\/text>/g,
+      ),
+      (match) => match[1],
+    );
+    const valueLabels = Array.from(
+      markup.matchAll(
+        /<text(?=[^>]*data-value-label="true")[^>]*>([^<]+)<\/text>/g,
+      ),
+      (match) => match[1],
+    );
+
+    expect(axisLabels).toContain("7.0");
+    expect(valueLabels).toContain("7");
+    expect(valueLabels).not.toContain("7.0");
+  });
+
   it("compacts wide vertical ticks while keeping them clear of the axis title", () => {
     const markup = renderToStaticMarkup(
       <DataChartRenderer
@@ -484,7 +818,7 @@ describe("DataChartRenderer theme colors", () => {
     );
     const tickLabels = Array.from(
       markup.matchAll(
-        /<text x="([\d.]+)" y="([\d.]+)"[^>]*text-anchor="end">([^<]+)<\/text>/g,
+        /<text[^>]*x="([\d.]+)" y="([\d.]+)"[^>]*text-anchor="end">([^<]+)<\/text>/g,
       ),
       (match) => ({
         x: Number(match[1]),
@@ -503,7 +837,7 @@ describe("DataChartRenderer theme colors", () => {
       Number(plotBounds?.[2]) - Number(plotBounds?.[1]),
     ).toBeGreaterThanOrEqual(32);
     const title = markup.match(
-      /<text x="([\d.]+)" y="[\d.]+" transform="rotate\(-90 [\d.]+ [\d.]+\)"[^>]*font-size="([\d.]+)"[^>]*>Revenue<\/text>/,
+      /<text[^>]*x="([\d.]+)" y="[\d.]+" transform="rotate\(-90 [\d.]+ [\d.]+\)"[^>]*font-size="([\d.]+)"[^>]*>Revenue<\/text>/,
     );
     expect(title).not.toBeNull();
     const titleRight = Number(title?.[1]) + Number(title?.[2]) / 2;
@@ -563,7 +897,7 @@ describe("DataChartRenderer theme colors", () => {
     );
     const horizontalLabels = Array.from(
       horizontalMarkup.matchAll(
-        /<text x="([\d.]+)" y="340"[^>]*text-anchor="middle">([^<]+)<\/text>/g,
+        /<text[^>]*x="([\d.]+)" y="340"[^>]*text-anchor="middle">([^<]+)<\/text>/g,
       ),
       (match) => ({ x: Number(match[1]), label: match[2] ?? "" }),
     );
@@ -602,7 +936,7 @@ describe("DataChartRenderer theme colors", () => {
     );
     const verticalLabels = Array.from(
       verticalMarkup.matchAll(
-        /<text x="[\d.]+" y="([\d.]+)"[^>]*text-anchor="end">([^<]+)<\/text>/g,
+        /<text[^>]*x="[\d.]+" y="([\d.]+)"[^>]*text-anchor="end">([^<]+)<\/text>/g,
       ),
       (match) => ({ y: Number(match[1]), label: match[2] ?? "" }),
     ).sort((first, second) => first.y - second.y);
@@ -619,6 +953,32 @@ describe("DataChartRenderer theme colors", () => {
     ).toBe(true);
   });
 
+  it("keeps line value labels inside the canvas with no bottom inset", () => {
+    const markup = renderToStaticMarkup(
+      <DataChartRenderer
+        chart={{
+          type: "line",
+          xKey: "day",
+          series: [{ key: "value", label: "Value" }],
+          data: [
+            { day: "First", value: 0 },
+            { day: "Last", value: 1 },
+          ],
+          showValueLabels: true,
+        }}
+        layout={{ plotInsets: { bottom: 0 } }}
+      />,
+    );
+    const minimumValueLabelY = Array.from(
+      markup.matchAll(
+        /<text(?=[^>]*data-value-label="true")(?=[^>]*>0<\/text>)[^>]*y="([\d.]+)"[^>]*>/g,
+      ),
+      (match) => Number(match[1]),
+    ).filter((y) => y < 360);
+
+    expect(minimumValueLabelY.some((y) => y <= 356)).toBe(true);
+  });
+
   it("reserves room for custom decimal value-axis labels", () => {
     const markup = renderToStaticMarkup(
       <DataChartRenderer
@@ -632,7 +992,7 @@ describe("DataChartRenderer theme colors", () => {
       />,
     );
     const tickLabels = Array.from(
-      markup.matchAll(/<text x="([\d.]+)"[^>]*>(0\.000[123])<\/text>/g),
+      markup.matchAll(/<text[^>]*x="([\d.]+)"[^>]*>(0\.000[123])<\/text>/g),
       (match) => ({ x: Number(match[1]), label: match[2] }),
     );
 
@@ -752,10 +1112,10 @@ describe("DataChartRenderer theme colors", () => {
       />,
     );
     const categoryLabel = markup.match(
-      /<text x="([\d.]+)" y="[^"]+" fill="hsl\(var\(--muted-foreground\)\)" font-size="10" text-anchor="end">A very long c\.\.\.<\/text>/,
+      /<text[^>]*x="([\d.]+)" y="[^"]+" fill="hsl\(var\(--muted-foreground\)\)" font-size="10" text-anchor="end">A very long c\.\.\.<\/text>/,
     );
     const largestValueLabel = markup.match(
-      /<text x="([\d.]+)" y="[^"]+" fill="hsl\(var\(--muted-foreground\)\)" font-size="11" font-weight="400" text-anchor="start">123,456<\/text>/,
+      /<text[^>]*x="([\d.]+)" y="[^"]+" fill="hsl\(var\(--muted-foreground\)\)" font-size="11" font-weight="400" text-anchor="start">123,456<\/text>/,
     );
 
     expect(categoryLabel).not.toBeNull();
@@ -779,10 +1139,10 @@ describe("DataChartRenderer theme colors", () => {
     );
     const negativeBarX = markup.match(/<rect x="([\d.]+)"/);
     const negativeBarLabel = markup.match(
-      /<text x="([\d.]+)"[^>]*text-anchor="end">-123,456<\/text>/,
+      /<text[^>]*x="([\d.]+)"[^>]*text-anchor="end">-123,456<\/text>/,
     );
     const categoryLabel = markup.match(
-      /<text x="([\d.]+)" y="[^"]+" fill="hsl\(var\(--muted-foreground\)\)" font-size="11" text-anchor="end">Monday<\/text>/,
+      /<text[^>]*x="([\d.]+)" y="[^"]+" fill="hsl\(var\(--muted-foreground\)\)" font-size="11" text-anchor="end">Monday<\/text>/,
     );
 
     expect(negativeBarX).not.toBeNull();
@@ -839,7 +1199,7 @@ describe("DataChartRenderer theme colors", () => {
         />,
       );
       const finalValueLabel = markup.match(
-        /<text x="([\d.]+)" y="[\d.]+" fill="hsl\(var\(--muted-foreground\)\)" font-size="11" font-weight="400" text-anchor="end">123,456,789<\/text>/,
+        /<text[^>]*x="([\d.]+)" y="[\d.]+" fill="hsl\(var\(--muted-foreground\)\)" font-size="11" font-weight="400" text-anchor="end">123,456,789<\/text>/,
       );
 
       expect(finalValueLabel).not.toBeNull();