From 0ef4b562aa75cadaffb6909cac954637719bea5c Mon Sep 17 00:00:00 2001
From: Dave Hillier <dave.hillier1@gmail.com>
Date: Thu, 24 Sep 2026 07:42:56 +0100
Subject: [PATCH 1/2] Finish the last item of #154 and of #166

#154 asked for no <style> blocks in TSX. Replot.tsx's remained, because every
pass over it was deferred while that file was being restructured. The stylesheet
and the element that carries it now live in plotStyles.ts, as the legend
stylesheets already do, and both render paths take the same element rather than
each writing their own.

#166 asked for the @ts-expect-error on tree.ts's import of maybeTreeAnchor to
go: the runtime export was simply missing from transforms/tree.d.ts, so it is
declared there instead of suppressed.

Neither changes what is rendered: 1818 tests pass with no snapshot movement.

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 src/marks/tree.ts          |  1 -
 src/react/Replot.tsx       | 23 ++---------------------
 src/react/plotStyles.ts    | 35 +++++++++++++++++++++++++++++++++++
 src/react/renderStatic.tsx |  4 ++--
 src/transforms/tree.d.ts   | 12 ++++++++++++
 5 files changed, 51 insertions(+), 24 deletions(-)
 create mode 100644 src/react/plotStyles.ts

diff --git a/src/marks/tree.ts b/src/marks/tree.ts
index 84b7b748..2851bc5e 100644
--- a/src/marks/tree.ts
+++ b/src/marks/tree.ts
@@ -3,7 +3,6 @@ import type {CompoundMark, Data, MarkOptions} from "../mark.js";
 import {marks} from "../mark.js";
 import {isNoneish, keyword} from "../options.js";
 import type {TreeTransformOptions} from "../transforms/tree.js";
-// @ts-expect-error — runtime export missing from transforms/tree.d.ts
 import {maybeTreeAnchor, treeLink, treeNode} from "../transforms/tree.js";
 import type {DotOptions} from "./dot.js";
 import {dot} from "./dot.js";
diff --git a/src/react/Replot.tsx b/src/react/Replot.tsx
index 67002fa2..0aefde62 100644
--- a/src/react/Replot.tsx
+++ b/src/react/Replot.tsx
@@ -27,6 +27,7 @@ import {buildAutoLegends, LegendDisplay, resolveLegendElement} from "./legends/L
 import {createClipRegistry, registerClips, type ClipRegistry} from "./clip.js";
 import {domToJsx, isDomNode, parseStyleString} from "./domToJsx.js";
 import {datumIndexOf} from "./perDatum.js";
+import {plotStyleSheetElement} from "./plotStyles.js";
 import {hasRenderTransform, renderTransformJSX} from "./renderTransform.js";
 import {FigureLayout} from "./FigureLayout.js";
 import {warningIndicatorElement} from "./warningIndicator.js";
@@ -935,26 +936,6 @@ function WarningIndicator({computed, serverRender}: {computed: any; serverRender
 // other. The shell is what the two renderers have in common; what differs is
 // how the marks inside it are rendered, which is what each path still owns.
 //
-// The stylesheet, which is the plot's only forced CSS: it makes the svg scale
-// with its container and stops text being collapsed, all through :where() so
-// the selectors carry no specificity a user's own rules have to fight. The
-// class name is the plot's (meant to be unique per plot); upstream writes the
-// same two rules in style.js, with a comment that changing them means changing
-// defaultClassName there too.
-export function plotStyleSheet(className: string): string {
-  return `:where(.${className}) {
-  --plot-background: white;
-  display: block;
-  height: auto;
-  height: intrinsic;
-  max-width: 100%;
-}
-:where(.${className} text),
-:where(.${className} tspan) {
-  white-space: pre;
-}`;
-}
-
 // The shell's attributes, in the order they are written to the element — the
 // order React writes them in for the JSX path, and the order the markup
 // serializes in on both. `style` is deliberately NOT here: the JSX path passes
@@ -1013,7 +994,7 @@ function PlotSvg({
   registerClips(computed, clipReg);
   const inner = (
     <>
-      <style>{plotStyleSheet(computed.className)}</style>
+      {plotStyleSheetElement(computed.className)}
       {clipReg.defs}
       {renderMarks(computed, clipReg, getHandlers)}
       <WarningIndicator computed={computed} serverRender={serverRender} />
diff --git a/src/react/plotStyles.ts b/src/react/plotStyles.ts
new file mode 100644
index 00000000..43bd347c
--- /dev/null
+++ b/src/react/plotStyles.ts
@@ -0,0 +1,35 @@
+// The plot's own stylesheet. The CSS lives here rather than inline in a .tsx
+// component: a <style> block written in a .tsx file is against the project's
+// rules, and both render paths need the same element — this file's callers are
+// Replot.tsx's <PlotSvg> and renderStatic.tsx's buildStaticPlotSvg.
+//
+// The rules are the plot's only forced CSS: they make the svg scale with its
+// container and stop text being collapsed, all through :where() so the
+// selectors carry no specificity a user's rules have to fight. The class name is
+// the plot's (meant to be unique per plot); upstream writes the same two rules
+// in style.js, with a comment that changing them means changing defaultClassName
+// there too.
+//
+// The string is always built from a controlled className (maybeClassName) and
+// constant CSS, never from user input.
+import {createElement, type ReactElement} from "react";
+
+/** The plot's stylesheet, as CSS text. */
+export function plotStyleSheet(className: string): string {
+  return `:where(.${className}) {
+  --plot-background: white;
+  display: block;
+  height: auto;
+  height: intrinsic;
+  max-width: 100%;
+}
+:where(.${className} text),
+:where(.${className} tspan) {
+  white-space: pre;
+}`;
+}
+
+/** Wraps the plot's stylesheet in the <style> element both paths render. */
+export function plotStyleSheetElement(className: string): ReactElement {
+  return createElement("style", null, plotStyleSheet(className));
+}
diff --git a/src/react/renderStatic.tsx b/src/react/renderStatic.tsx
index b1e34cf0..284d85c9 100644
--- a/src/react/renderStatic.tsx
+++ b/src/react/renderStatic.tsx
@@ -1,3 +1,4 @@
+import {plotStyleSheetElement} from "./plotStyles.js";
 import {cloneElement, createElement as h, Fragment, isValidElement, type ReactElement, type ReactNode} from "react";
 import {
   renderMarksWith,
@@ -5,7 +6,6 @@ import {
   defaultPointerEventsNone,
   promoteFacetChild,
   plainIndex,
-  plotStyleSheet,
   plotSvgAttributes,
   pointerIndex,
   type FacetCell
@@ -47,7 +47,7 @@ export function buildStaticPlotSvg(computed: any, classNameProp?: string): React
   return h(
     "svg",
     plotSvgAttributes(computed, classNameProp),
-    h("style", null, plotStyleSheet(computed.className)),
+    plotStyleSheetElement(computed.className),
     ...clipReg.defs,
     ...marks
   );
diff --git a/src/transforms/tree.d.ts b/src/transforms/tree.d.ts
index 3e8814dd..bf9791ce 100644
--- a/src/transforms/tree.d.ts
+++ b/src/transforms/tree.d.ts
@@ -114,3 +114,15 @@ export function treeNode<T>(options?: T & TreeTransformOptions): Transformed<T>;
  * passed two node arguments, the child and the parent.
  */
 export function treeLink<T>(options?: T & TreeTransformOptions): Transformed<T>;
+
+/**
+ * The layout a tree mark anchors against: *left* (default) or *right*. Each
+ * carries the **frameAnchor** the mark defaults to, the **dx** its labels are
+ * offset by, and the **position** that maps a laid-out node onto the *x* and *y*
+ * channel arrays.
+ */
+export function maybeTreeAnchor(anchor?: "left" | "right"): {
+  frameAnchor: "left" | "right";
+  dx: number;
+  position: (point: {x: number; y: number}, i: number, X: number[], Y: number[]) => void;
+};

From 9bed9e2bd028b7cfcc267d177f5cd157f7b12963 Mon Sep 17 00:00:00 2001
From: Dave Hillier <dave.hillier1@gmail.com>
Date: Thu, 24 Sep 2026 07:48:40 +0100
Subject: [PATCH 2/2] Keep maybeTreeAnchor off the documented API surface

Declaring it in transforms/tree.d.ts made the API-data generator look for a
docs anchor for it and fail the docs build, which is what CI caught. The
generator already has a list of internal exports it skips; this belongs on it,
next to the other maybe* helpers.

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 docs/data/api.data.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/data/api.data.ts b/docs/data/api.data.ts
index 9a493914..f273ba25 100644
--- a/docs/data/api.data.ts
+++ b/docs/data/api.data.ts
@@ -36,6 +36,7 @@ function isInternalMethod(name: string): boolean {
     name === "maybeGroup" ||
     name === "maybeStackX" ||
     name === "maybeStackY" ||
+    name === "maybeTreeAnchor" ||
     name === "normalizeScale" ||
     name === "outerDimensions" ||
     name === "ox" ||