Finish the last item of #154 and of #166

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" ||

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";

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} />

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));
+}

src/react/renderStatic.tsx

@@ -1,11 +1,11 @@
+import {plotStyleSheetElement} from "./plotStyles.js";
 import {cloneElement, createElement as h, Fragment, isValidElement, type ReactElement, type ReactNode} from "react";
 import {
   renderMarksWith,
   isPointerConsumer,
   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
   );

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;
+};