@octanejs/visx 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/visx",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -123,15 +123,15 @@
     "mitt": "^2.1.0",
     "reduce-css-calc": "^1.3.0",
     "svg-path-properties": "2.0.2",
-    "@octanejs/floating-ui": "0.1.9"
+    "@octanejs/floating-ui": "0.1.10"
   },
   "peerDependencies": {
-    "octane": "0.1.10"
+    "octane": "0.1.11"
   },
   "devDependencies": {
     "@juggle/resize-observer": "^3.4.0",
     "@react-spring/web": "^10.0.0",
-    "@tsrx/react": "^0.2.37",
+    "@tsrx/react": "^0.2.44",
     "@visx/chord": "4.0.0",
     "@visx/annotation": "4.0.0",
     "@visx/brush": "4.0.0",
@@ -149,7 +149,7 @@
     "react-dom": "^19.2.0",
     "typescript": "^5.9.3",
     "vitest": "^4.1.9",
-    "octane": "0.1.10"
+    "octane": "0.1.11"
   },
   "scripts": {
     "compile:check": "node scripts/check-tsrx-compile.mjs",

package/src/a11y/components/ChartA11yAnnouncer.tsrx

@@ -1,4 +1,5 @@
-import type { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties } from 'react';
+import type { OctaneNode } from 'octane';
 
 import { VISUALLY_HIDDEN_STYLE } from '../utils/table';
 
@@ -6,8 +7,8 @@ export type ChartA11yLivePoliteness = 'polite' | 'assertive';
 
 export type ChartA11yAnnouncerProps = {
 	id?: string;
-	message?: ReactNode;
-	children?: ReactNode;
+	message?: OctaneNode;
+	children?: OctaneNode;
 	politeness?: ChartA11yLivePoliteness;
 	atomic?: boolean;
 	visible?: boolean;

package/src/a11y/components/ChartA11yAnnouncer.tsrx.d.ts

@@ -1,10 +1,11 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties } from 'react';
+import type { OctaneNode } from 'octane';
 export type ChartA11yLivePoliteness = 'polite' | 'assertive';
 export type ChartA11yAnnouncerProps = {
     id?: string;
-    message?: ReactNode;
-    children?: ReactNode;
+    message?: OctaneNode;
+    children?: OctaneNode;
     politeness?: ChartA11yLivePoliteness;
     atomic?: boolean;
     visible?: boolean;

package/src/annotation/components/Annotation.tsrx

@@ -1,11 +1,11 @@
 import { useMemo } from 'octane';
-import type { ReactNode } from 'react';
+import type { OctaneNode } from 'octane';
 import AnnotationContext from '../context/AnnotationContext.tsrx';
 import type { AnnotationContextType } from '../types';
 
 export type AnnotationProps = Pick<AnnotationContextType, 'x' | 'y' | 'dx' | 'dy'> & {
 		/** Annotation children (Subject, Label, Connector) */
-		children: ReactNode;
+		children: OctaneNode;
 	};
 
 export default function Annotation({ x, y, dx, dy, children }: AnnotationProps) {

package/src/annotation/components/Annotation.tsrx.d.ts

@@ -1,8 +1,8 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode } from 'react';
+import type { OctaneNode } from 'octane';
 import type { AnnotationContextType } from '../types';
 export type AnnotationProps = Pick<AnnotationContextType, 'x' | 'y' | 'dx' | 'dy'> & {
     /** Annotation children (Subject, Label, Connector) */
-    children: ReactNode;
+    children: OctaneNode;
 };
 export default function Annotation({ x, y, dx, dy, children }: AnnotationProps): import("react").JSX.Element;

package/src/annotation/components/EditableAnnotation.tsrx

@@ -1,6 +1,7 @@
 /* eslint-disable react/jsx-handler-names */
 import { useCallback, useRef } from 'octane';
-import type { SVGProps, ReactNode, MouseEvent, TouchEvent } from 'react';
+import type { SVGProps, MouseEvent, TouchEvent } from 'react';
+import type { OctaneNode } from 'octane';
 import type { UseDrag, HandlerArgs as DragHandlerArgs } from '@octanejs/visx/drag';
 import { useDrag } from '@octanejs/visx/drag';
 import type { AnnotationContextType } from '../types';
@@ -12,7 +13,7 @@ export type EditableAnnotationProps = Pick<AnnotationContextType, 'x' | 'y' | 'd
 		/** Height of the possible drag canvas (e.g., SVG container). */
 		height: number;
 		/** Annotation children (Subject, Label, Connector) */
-		children: ReactNode;
+		children: OctaneNode;
 		/** Whether the Label position (dx, dy) is editable. */
 		canEditLabel?: boolean;
 		/** Whether the Subject position (x, y) is editable. */

package/src/annotation/components/EditableAnnotation.tsrx.d.ts

@@ -1,5 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { SVGProps, ReactNode, MouseEvent, TouchEvent } from 'react';
+import type { SVGProps, MouseEvent, TouchEvent } from 'react';
+import type { OctaneNode } from 'octane';
 import type { AnnotationContextType } from '../types';
 export type EditableAnnotationProps = Pick<AnnotationContextType, 'x' | 'y' | 'dx' | 'dy'> & {
     /** Width of the possible drag canvas (e.g., SVG container). */
@@ -7,7 +8,7 @@ export type EditableAnnotationProps = Pick<AnnotationContextType, 'x' | 'y' | 'd
     /** Height of the possible drag canvas (e.g., SVG container). */
     height: number;
     /** Annotation children (Subject, Label, Connector) */
-    children: ReactNode;
+    children: OctaneNode;
     /** Whether the Label position (dx, dy) is editable. */
     canEditLabel?: boolean;
     /** Whether the Subject position (x, y) is editable. */

package/src/annotation/components/HtmlLabel.tsrx

@@ -1,5 +1,6 @@
 import { useContext, useMemo } from 'octane';
-import type { ReactNode, CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
+import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import { Group } from '@octanejs/visx/group';
 import AnnotationContext from '../context/AnnotationContext.tsrx';
@@ -18,7 +19,7 @@ export type HtmlLabelProps =
 	| 'x'
 	| 'y'> & {
 		/** Pass in a custom element as the label to style as you like. Renders inside a <foreignObject>, be aware that most non-browser SVG renderers will not render HTML <foreignObject>s. See: https://github.com/airbnb/visx/issues/1173#issuecomment-1014380545.  */
-		children?: ReactNode;
+		children?: OctaneNode;
 		/** Optional styles to apply to the HTML container. */
 		containerStyle?: CSSProperties;
 	};

package/src/annotation/components/HtmlLabel.tsrx.d.ts

@@ -1,9 +1,10 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode, CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
+import type { OctaneNode } from 'octane';
 import type { LabelProps } from './Label.tsrx';
 export type HtmlLabelProps = Pick<LabelProps, 'anchorLineStroke' | 'className' | 'horizontalAnchor' | 'resizeObserverPolyfill' | 'showAnchorLine' | 'verticalAnchor' | 'x' | 'y'> & {
     /** Pass in a custom element as the label to style as you like. Renders inside a <foreignObject>, be aware that most non-browser SVG renderers will not render HTML <foreignObject>s. See: https://github.com/airbnb/visx/issues/1173#issuecomment-1014380545.  */
-    children?: ReactNode;
+    children?: OctaneNode;
     /** Optional styles to apply to the HTML container. */
     containerStyle?: CSSProperties;
 };

package/src/axis/types.ts

@@ -1,6 +1,7 @@
 import type { D3Scale, NumberLike, ScaleInput, ValueOf } from '@octanejs/visx/scale';
 import type { TextProps } from '@octanejs/visx/text';
-import type { ReactNode, Ref, SVGProps } from 'react';
+import type { Ref, SVGProps } from 'react';
+import type { OctaneNode } from 'octane';
 import type Orientation from './constants/orientation';
 
 // In order to plot values on an axis, output of the scale must be number.
@@ -82,9 +83,9 @@ export type CommonProps<Scale extends AxisScale> = {
 	/** The class name applied to each tick group. */
 	tickClassName?: string;
 	/** Override the component used to render tick labels (instead of <Text /> from @octanejs/visx/text). */
-	tickComponent?: (tickRendererProps: TickRendererProps) => ReactNode;
+	tickComponent?: (tickRendererProps: TickRendererProps) => OctaneNode;
 	/** Override the component used to render all tick lines and labels. */
-	ticksComponent?: (tickRendererProps: TicksRendererProps<Scale>) => ReactNode;
+	ticksComponent?: (tickRendererProps: TicksRendererProps<Scale>) => OctaneNode;
 	/** A [d3 formatter](https://github.com/d3/d3-scale/blob/master/README.md#continuous_tickFormat) for the tick text. */
 	tickFormat?: TickFormatter<ScaleInput<Scale>>;
 	/** Either an object with the props for all tick labels or a function that returns props for a given tick label. */
@@ -141,5 +142,5 @@ export type SharedAxisProps<Scale extends AxisScale> = CommonProps<Scale> & {
 	/** A top pixel offset applied to the entire axis. */
 	top?: number;
 	/** For more control over rendering or to add event handlers to datum, pass a function as children. */
-	children?: (renderProps: AxisRendererProps<Scale>) => ReactNode;
+	children?: (renderProps: AxisRendererProps<Scale>) => OctaneNode;
 };

package/src/brush/BaseBrush.tsrx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'octane';
-import type { PointerEvent, SVGProps, ReactNode } from 'react';
+import type { PointerEvent, SVGProps } from 'react';
+import type { OctaneNode } from 'octane';
 import { Group } from '@octanejs/visx/group';
 import type { HandlerArgs as DragArgs } from '@octanejs/visx/drag';
 import { Drag } from '@octanejs/visx/drag';
@@ -48,7 +49,7 @@ export type BaseBrushProps = {
 	disableDraggingOverlay?: boolean;
 	resetOnEnd?: boolean;
 	useWindowMoveEvents?: boolean;
-	renderBrushHandle?: (props: BrushHandleRenderProps) => ReactNode;
+	renderBrushHandle?: (props: BrushHandleRenderProps) => OctaneNode;
 };
 
 export type BaseBrushState = BrushShape & {

package/src/brush/BaseBrush.tsrx.d.ts

@@ -1,5 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { PointerEvent, SVGProps, ReactNode } from 'react';
+import type { PointerEvent, SVGProps } from 'react';
+import type { OctaneNode } from 'octane';
 import type { BrushHandleRenderProps } from './BrushHandle.tsrx';
 import type { MarginShape, BrushShape, ResizeTriggerAreas, PartialBrushStartEnd, BrushingType, BrushPageOffset } from './types';
 type PointerHandlerEvent = PointerEvent<SVGRectElement>;
@@ -26,7 +27,7 @@ export type BaseBrushProps = {
     disableDraggingOverlay?: boolean;
     resetOnEnd?: boolean;
     useWindowMoveEvents?: boolean;
-    renderBrushHandle?: (props: BrushHandleRenderProps) => ReactNode;
+    renderBrushHandle?: (props: BrushHandleRenderProps) => OctaneNode;
 };
 export type BaseBrushState = BrushShape & {
     activeHandle: ResizeTriggerAreas | null;

package/src/brush/Brush.tsrx

@@ -1,4 +1,5 @@
-import type { ReactNode, SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import type { OctaneNode } from 'octane';
 import BaseBrush from './BaseBrush.tsrx';
 import type { BaseBrushProps, BaseBrushState } from './BaseBrush.tsrx';
 import type { BrushHandleRenderProps } from './BrushHandle.tsrx';
@@ -72,7 +73,7 @@ export type BrushProps = {
 	/** Prevent drag end on mouse leaving from brush stage. */
 	useWindowMoveEvents?: boolean;
 	/** Render function for custom brush handles. */
-	renderBrushHandle?: (props: BrushHandleRenderProps) => ReactNode;
+	renderBrushHandle?: (props: BrushHandleRenderProps) => OctaneNode;
 };
 
 export default function Brush({

package/src/brush/Brush.tsrx.d.ts

@@ -1,5 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode, SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import type { OctaneNode } from 'octane';
 import type { BaseBrushProps } from './BaseBrush.tsrx';
 import type { BrushHandleRenderProps } from './BrushHandle.tsrx';
 import type { Bounds, PartialBrushStartEnd, MarginShape, ResizeTriggerAreas, Scale } from './types';
@@ -51,6 +52,6 @@ export type BrushProps = {
     /** Prevent drag end on mouse leaving from brush stage. */
     useWindowMoveEvents?: boolean;
     /** Render function for custom brush handles. */
-    renderBrushHandle?: (props: BrushHandleRenderProps) => ReactNode;
+    renderBrushHandle?: (props: BrushHandleRenderProps) => OctaneNode;
 };
 export default function Brush({ xScale, yScale, height, width, onChange, onBrushStart, onBrushEnd, onMouseMove, onMouseLeave, onClick, margin, brushDirection, initialBrushPosition, resizeTriggerAreas, brushRegion, yAxisOrientation, xAxisOrientation, disableDraggingSelection, disableDraggingOverlay, resetOnEnd, handleSize, selectedBoxStyle, useWindowMoveEvents, renderBrushHandle, }: BrushProps): import("react").JSX.Element | null;

package/src/brush/BrushHandle.tsrx

@@ -1,5 +1,5 @@
 /* eslint react/jsx-handler-names: 0 */
-import type { ReactNode } from 'react';
+import type { OctaneNode } from 'octane';
 import type { HandlerArgs as DragArgs } from '@octanejs/visx/drag';
 import { Drag } from '@octanejs/visx/drag';
 import type { BaseBrushState as BrushState, UpdateBrush } from './BaseBrush.tsrx';
@@ -25,7 +25,7 @@ export type BrushHandleProps = {
 	isControlled?: boolean;
 	isDragInProgress?: boolean;
 	onBrushHandleChange?: (type?: BrushingType, options?: BrushPageOffset) => void;
-	renderBrushHandle?: (props: BrushHandleRenderProps) => ReactNode;
+	renderBrushHandle?: (props: BrushHandleRenderProps) => OctaneNode;
 };
 
 export type BrushHandleRenderProps = HandleProps & {

package/src/brush/BrushHandle.tsrx.d.ts

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode } from 'react';
+import type { OctaneNode } from 'octane';
 import type { HandlerArgs as DragArgs } from '@octanejs/visx/drag';
 import type { BaseBrushState as BrushState, UpdateBrush } from './BaseBrush.tsrx';
 import type { BrushPageOffset, BrushingType, ResizeTriggerAreas } from './types';
@@ -21,7 +21,7 @@ export type BrushHandleProps = {
     isControlled?: boolean;
     isDragInProgress?: boolean;
     onBrushHandleChange?: (type?: BrushingType, options?: BrushPageOffset) => void;
-    renderBrushHandle?: (props: BrushHandleRenderProps) => ReactNode;
+    renderBrushHandle?: (props: BrushHandleRenderProps) => OctaneNode;
 };
 export type BrushHandleRenderProps = HandleProps & {
     /** if brush extent is not active this prop is set to false */

package/src/brush/utils.ts

@@ -1,5 +1,4 @@
 import type { MouseTouchOrPointerEvent } from '@octanejs/visx/drag';
-import type { PointerEvent } from 'react';
 import type { Bounds, Point, Scale } from './types';
 
 export function normalizeBrushStartEnd(start: Point, end: Point, extent: Bounds): void {

package/src/chord/Chord.tsrx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { OctaneNode } from 'octane';
 import type { Chords } from 'd3-chord';
 import { chord as d3chord } from 'd3-chord';
 
@@ -16,7 +16,7 @@ export type ChordProps = {
 	/** Comparator used to sort the chords by their combined flow; this only affects the `z-order` of the chords. */
 	sortChords?: DefaultSortComporator | null;
 	/** Child render function, passed the configured chords. */
-	children: (chords: { chords: Chords }) => ReactNode;
+	children: (chords: { chords: Chords }) => OctaneNode;
 };
 
 export default function Chord({

package/src/chord/Chord.tsrx.d.ts

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode } from 'react';
+import type { OctaneNode } from 'octane';
 import type { Chords } from 'd3-chord';
 type DefaultSortComporator = (a: number, b: number) => number;
 export type ChordProps = {
@@ -16,7 +16,7 @@ export type ChordProps = {
     /** Child render function, passed the configured chords. */
     children: (chords: {
         chords: Chords;
-    }) => ReactNode;
+    }) => OctaneNode;
 };
 export default function Chord({ matrix, padAngle, sortGroups, sortSubgroups, sortChords, children, }: ChordProps): import("react").JSX.Element;
 export {};

package/src/clip-path/clip-paths/ClipPath.tsrx

@@ -1,11 +1,12 @@
-import type { SVGProps, ReactNode } from 'react';
+import type { SVGProps } from 'react';
+import type { OctaneNode } from 'octane';
 import useStableId from '../../kernel/ids/useStableId.tsrx';
 
 export type ClipPathProps = {
 	/** Unique id for the clipPath. */
 	id?: string;
 	/** clipPath children. */
-	children?: ReactNode;
+	children?: OctaneNode;
 };
 
 /** Handles rendering of <defs> and <clipPath> elements for you, with any children you want. */

package/src/clip-path/clip-paths/ClipPath.tsrx.d.ts

@@ -1,10 +1,11 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { SVGProps, ReactNode } from 'react';
+import type { SVGProps } from 'react';
+import type { OctaneNode } from 'octane';
 export type ClipPathProps = {
     /** Unique id for the clipPath. */
     id?: string;
     /** clipPath children. */
-    children?: ReactNode;
+    children?: OctaneNode;
 };
 /** Handles rendering of <defs> and <clipPath> elements for you, with any children you want. */
 export default function ClipPath({ id, children, ...restProps }: ClipPathProps & Omit<SVGProps<SVGClipPathElement>, keyof ClipPathProps>): import("react").JSX.Element;

package/src/delaunay/components/Polygon.tsrx

@@ -1,4 +1,5 @@
-import type { ReactNode, SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 
 export type PolygonProps = {
@@ -9,7 +10,7 @@ export type PolygonProps = {
 	}: {
 		path: string;
 		polygon: [number, number][];
-	}) => ReactNode;
+	}) => OctaneNode;
 	/** className to apply to path element. */
 	className?: string;
 	/** Array of coordinate arrays for the polygon (e.g., [[x,y], [x1,y1], ...]), used to generate polygon path. */

package/src/delaunay/components/Polygon.tsrx.d.ts

@@ -1,11 +1,12 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode, SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import type { OctaneNode } from 'octane';
 export type PolygonProps = {
     /** Override render function which is provided polygon and generated path. */
     children?: ({ path, polygon, }: {
         path: string;
         polygon: [number, number][];
-    }) => ReactNode;
+    }) => OctaneNode;
     /** className to apply to path element. */
     className?: string;
     /** Array of coordinate arrays for the polygon (e.g., [[x,y], [x1,y1], ...]), used to generate polygon path. */

package/src/drag/Drag.tsrx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-handler-names */
-import type { ReactNode } from 'react';
+import type { OctaneNode } from 'octane';
 import type { UseDrag, UseDragOptions, HandlerArgs as HandlerArgsType } from './useDrag.tsrx';
 import useDrag from './useDrag.tsrx';
 
@@ -7,7 +7,7 @@ export type HandlerArgs = HandlerArgsType;
 
 export type DragProps = UseDragOptions & {
 		/** Children render function which is passed the state of dragging and callbacks for drag start/end/move. */
-		children: (args: UseDrag) => ReactNode;
+		children: (args: UseDrag) => OctaneNode;
 		/** Width of the drag container. */
 		width: number;
 		/** Height of the drag container. */

package/src/drag/Drag.tsrx.d.ts

@@ -1,10 +1,10 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode } from 'react';
+import type { OctaneNode } from 'octane';
 import type { UseDrag, UseDragOptions, HandlerArgs as HandlerArgsType } from './useDrag.tsrx';
 export type HandlerArgs = HandlerArgsType;
 export type DragProps = UseDragOptions & {
     /** Children render function which is passed the state of dragging and callbacks for drag start/end/move. */
-    children: (args: UseDrag) => ReactNode;
+    children: (args: UseDrag) => OctaneNode;
     /** Width of the drag container. */
     width: number;
     /** Height of the drag container. */

package/src/drag/useDrag.tsrx

@@ -1,4 +1,3 @@
-import type { MouseEvent, TouchEvent, PointerEvent } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'octane';
 import { Point, subtractPoints, sumPoints } from '@octanejs/visx/point';
 import { localPoint } from '@octanejs/visx/event';
@@ -6,6 +5,8 @@ import useStateWithCallback from './util/useStateWithCallback.tsrx';
 import restrictPoint from './util/restrictPoint';
 import useSamplesAlongPath from './util/useSamplesAlongPath.tsrx';
 
+// Native DOM events — octane delivers native, delegated events (no synthetic
+// layer), so the drag handlers accept the platform types directly.
 export type MouseTouchOrPointerEvent = MouseEvent | TouchEvent | PointerEvent;
 
 export type HandlerArgs = DragState & {
@@ -129,8 +130,6 @@ export default function useDrag(
 	const restrictToPathSamples = useSamplesAlongPath(restrictToPath);
 
 	const handleDragStart = useCallback((event: MouseTouchOrPointerEvent) => {
-		event.persist?.();
-
 		setDragStateWithCallback((currState) => {
 			// eslint-disable-next-line no-shadow
 			const { x = 0, y = 0, dx, dy } = currState;
@@ -165,8 +164,6 @@ export default function useDrag(
 	]);
 
 	const handleDragMove = useCallback((event: MouseTouchOrPointerEvent) => {
-		event.persist?.();
-
 		setDragStateWithCallback((currState) => {
 			if (!currState.isDragging) return currState;
 			// eslint-disable-next-line no-shadow
@@ -194,8 +191,6 @@ export default function useDrag(
 	]);
 
 	const handleDragEnd = useCallback((event: MouseTouchOrPointerEvent) => {
-		event.persist?.();
-
 		setDragStateWithCallback(
 			(currState) => ({ ...currState, isDragging: false }),
 			onDragEnd &&

package/src/drag/useDrag.tsrx.d.ts

@@ -1,5 +1,4 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { MouseEvent, TouchEvent, PointerEvent } from 'react';
 export type MouseTouchOrPointerEvent = MouseEvent | TouchEvent | PointerEvent;
 export type HandlerArgs = DragState & {
     /** Drag event. */

package/src/geo/graticule/Graticule.tsrx

@@ -1,4 +1,5 @@
-import type { ReactNode, SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import type { OctaneNode } from 'octane';
 import { Group } from '@octanejs/visx/group';
 import type { GeoGraticuleGenerator } from 'd3-geo';
 import { geoGraticule } from 'd3-geo';
@@ -38,7 +39,7 @@ export type GraticuleProps = {
 		graticule,
 	}: {
 		graticule: GeoGraticuleGenerator;
-	}) => ReactNode;
+	}) => OctaneNode;
 	/** Sets the major and minor extents of the graticule generator, which defaults to ⟨⟨-180°, -80° - ε⟩, ⟨180°, 80° + ε⟩⟩. */
 	extent?: [[number, number], [number, number]];
 	/** Sets the major extent of the graticule generator, which defaults to ⟨⟨-180°, -90° + ε⟩, ⟨180°, 90° - ε⟩⟩. */

package/src/geo/graticule/Graticule.tsrx.d.ts

@@ -1,5 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode, SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import type { OctaneNode } from 'octane';
 import type { GeoGraticuleGenerator } from 'd3-geo';
 import type { LineString, MultiLineString, Polygon } from 'geojson';
 export type GraticuleProps = {
@@ -33,7 +34,7 @@ export type GraticuleProps = {
     /** Override render function, which is passed the configured graticule generator. */
     children?: ({ graticule, }: {
         graticule: GeoGraticuleGenerator;
-    }) => ReactNode;
+    }) => OctaneNode;
     /** Sets the major and minor extents of the graticule generator, which defaults to ⟨⟨-180°, -80° - ε⟩, ⟨180°, 80° + ε⟩⟩. */
     extent?: [[number, number], [number, number]];
     /** Sets the major extent of the graticule generator, which defaults to ⟨⟨-180°, -90° + ε⟩, ⟨180°, 90° - ε⟩⟩. */

package/src/geo/projections/Projection.tsrx

@@ -1,4 +1,5 @@
-import type { ReactNode, SVGProps, Ref } from 'react';
+import type { SVGProps, Ref } from 'react';
+import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import { Group } from '@octanejs/visx/group';
 import type { GeoPath, GeoProjection, ExtendedFeature } from 'd3-geo';
@@ -38,7 +39,7 @@ export type ProjectionProps<Datum extends GeoPermissibleObjects = GeoPermissible
 	/** Preset projection name, or custom projection function which returns a GeoProjection. */
 	projection?: ProjectionShape;
 	/** Hook to render above features, passed the configured projectionFunc. */
-	projectionFunc?: (projection: GeoProjection) => ReactNode;
+	projectionFunc?: (projection: GeoProjection) => OctaneNode;
 	/** Sets the projection’s clipping circle radius to the specified angle in degree. */
 	clipAngle?: number;
 	/**
@@ -73,7 +74,7 @@ export type ProjectionProps<Datum extends GeoPermissibleObjects = GeoPermissible
 	/** Convenience prop for props.fitExtent where the top-left corner of the extent is [0, 0]. */
 	fitSize?: [[number, number], ExtendedFeature]; // ExtendedFeature | ExtendedFeatureCollection | GeoGeometryObjects
 	/** Hook to render anything at the centroid of a feature. */
-	centroid?: (centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNode;
+	centroid?: (centroid: [number, number], feature: ParsedFeature<Datum>) => OctaneNode;
 	/** className to apply to feature path elements.  */
 	className?: string;
 	/** Override render function which is passed path data and a copy of the constructed projection.  */
@@ -81,7 +82,7 @@ export type ProjectionProps<Datum extends GeoPermissibleObjects = GeoPermissible
 		path: GeoPath<unknown, GeoPermissibleObjects>;
 		features: ParsedFeature<Datum>[];
 		projection: GeoProjection;
-	}) => ReactNode;
+	}) => OctaneNode;
 	/** Function invoked for each feature which returns a Ref to the projection path element for that feature. */
 	innerRef?: (feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>;
 	/** If specified, renders a Graticule with the specified props. Specify `graticule.foreground = true` to be rendered on top of features. */

package/src/geo/projections/Projection.tsrx.d.ts

@@ -1,5 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode, SVGProps, Ref } from 'react';
+import type { SVGProps, Ref } from 'react';
+import type { OctaneNode } from 'octane';
 import type { GeoPath, GeoProjection, ExtendedFeature } from 'd3-geo';
 import type { GraticuleProps } from '../graticule/Graticule.tsrx';
 import type { GeoPermissibleObjects, Projection as ProjectionShape } from '../types';
@@ -9,7 +10,7 @@ export type ProjectionProps<Datum extends GeoPermissibleObjects = GeoPermissible
     /** Preset projection name, or custom projection function which returns a GeoProjection. */
     projection?: ProjectionShape;
     /** Hook to render above features, passed the configured projectionFunc. */
-    projectionFunc?: (projection: GeoProjection) => ReactNode;
+    projectionFunc?: (projection: GeoProjection) => OctaneNode;
     /** Sets the projection’s clipping circle radius to the specified angle in degree. */
     clipAngle?: number;
     /**
@@ -44,7 +45,7 @@ export type ProjectionProps<Datum extends GeoPermissibleObjects = GeoPermissible
     /** Convenience prop for props.fitExtent where the top-left corner of the extent is [0, 0]. */
     fitSize?: [[number, number], ExtendedFeature];
     /** Hook to render anything at the centroid of a feature. */
-    centroid?: (centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNode;
+    centroid?: (centroid: [number, number], feature: ParsedFeature<Datum>) => OctaneNode;
     /** className to apply to feature path elements.  */
     className?: string;
     /** Override render function which is passed path data and a copy of the constructed projection.  */
@@ -52,7 +53,7 @@ export type ProjectionProps<Datum extends GeoPermissibleObjects = GeoPermissible
         path: GeoPath<unknown, GeoPermissibleObjects>;
         features: ParsedFeature<Datum>[];
         projection: GeoProjection;
-    }) => ReactNode;
+    }) => OctaneNode;
     /** Function invoked for each feature which returns a Ref to the projection path element for that feature. */
     innerRef?: (feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>;
     /** If specified, renders a Graticule with the specified props. Specify `graticule.foreground = true` to be rendered on top of features. */

package/src/glyph/glyphs/Glyph.tsrx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import { Group } from '@octanejs/visx/group';
 
@@ -10,7 +10,7 @@ export type GlyphProps = {
 	/** classname to apply to glyph g element container. */
 	className?: string;
 	/** Children to render. */
-	children?: ReactNode;
+	children?: OctaneNode;
 };
 
 export default function Glyph({ top = 0, left = 0, className, children }: GlyphProps) {

package/src/glyph/glyphs/Glyph.tsrx.d.ts

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactNode } from 'react';
+import type { OctaneNode } from 'octane';
 export type GlyphProps = {
     /** Top offset to apply to glyph g element container. */
     top?: number;
@@ -8,6 +8,6 @@ export type GlyphProps = {
     /** classname to apply to glyph g element container. */
     className?: string;
     /** Children to render. */
-    children?: ReactNode;
+    children?: OctaneNode;
 };
 export default function Glyph({ top, left, className, children }: GlyphProps): import("react").JSX.Element;

package/src/glyph/glyphs/GlyphCircle.tsrx

@@ -1,4 +1,5 @@
-import type { ReactNode, SVGProps } from 'react';
+import type { SVGProps } from 'react';
+import type { OctaneNode } from 'octane';
 import cx from 'classnames';
 import type { Symbol } from 'd3-shape';
 import { symbol, symbolCircle } from 'd3-shape';
@@ -10,7 +11,7 @@ export type GlyphCircleProps<Datum> = {
 		path,
 	}: {
 		path: Symbol<unknown, Datum>;
-	}) => ReactNode;
+	}) => OctaneNode;
 	/** classname to apply to glyph path element. */
 	className?: string;
 	/** Top offset to apply to glyph g element container. */