Progress point

src/hooks/use-layout.ts

@@ -13,6 +13,7 @@ export const LayoutContext = createContext<Layout>({
 	width: 0,
 	height: 0,
 });
+LayoutContext.displayName = 'LayoutContext';
 
 export function useLayout() {
 	return useContext(LayoutContext);

src/hooks/use-parent.ts

@@ -2,6 +2,7 @@ import { createContext, useContext } from 'react';
 import type { Root } from '../root.js';
 
 export const ParentContext = createContext<Root | null>(null);
+ParentContext.displayName = 'ParentContext';
 
 export function useParent() {
 	const parent = useContext(ParentContext);

src/index.tsx

@@ -51,7 +51,6 @@ export {
 };
 export type { _Canvas as CanvasRef };
 
-export const Arc = factory<_Arc, ArcProps>('Arc');
 export const Canvas = factory<_Canvas, CanvasProps>('Canvas');
 export const Image = factory<_Image, ImageProps>('Image');
 export const Path = factory<_Path, PathProps>('Path');
@@ -63,6 +62,20 @@ export type TextProps = Omit<_TextProps, 'value'> & {
 };
 export const Text = factory<_Text, TextProps>('Text');
 
+//export const Arc = factory<_Arc, ArcProps>('Arc');
+export const Arc = forwardRef<_Arc, ArcProps>((props, ref) => {
+	const layout = useAdjustedLayout(props);
+	const radius = props.radius ?? Math.min(layout.width, layout.height) / 2;
+	return createElement('Arc', {
+		...props,
+		x: layout.x,
+		y: layout.y,
+		radius,
+		ref,
+	});
+});
+Arc.displayName = 'Arc';
+
 export type CircleProps = Omit<
 	ArcProps,
 	'startAngle' | 'endAngle' | 'counterclockwise'