@codehz/draw-call 0.1.1 → 0.1.2

package/{canvas-BYrCq8eS.d.mts → canvas.d.cts}

@@ -101,6 +101,13 @@ interface ComputedLayout {
   contentWidth: number;
   contentHeight: number;
 }
+interface LayoutNode {
+  element: Element;
+  layout: ComputedLayout;
+  children: LayoutNode[];
+  lines?: string[];
+  lineOffsets?: number[];
+}
 interface LayoutConstraints {
   minWidth: number;
   maxWidth: number;
@@ -109,7 +116,7 @@ interface LayoutConstraints {
 }
 //#endregion
 //#region src/types/components.d.ts
-type ElementType = "box" | "text" | "image" | "shape" | "stack";
+type ElementType = "box" | "text" | "image" | "svg" | "stack";
 interface ElementBase {
   type: ElementType;
 }
@@ -141,7 +148,7 @@ interface TextElement extends ElementBase, TextProps {
   type: "text";
 }
 interface ImageProps extends LayoutProps {
-  src: string | ImageBitmap | CanvasImageSource;
+  src: ImageBitmap | CanvasImageSource;
   fit?: "contain" | "cover" | "fill" | "none" | "scale-down";
   position?: {
     x?: "left" | "center" | "right" | number;
@@ -154,50 +161,112 @@ interface ImageProps extends LayoutProps {
 interface ImageElement extends ElementBase, ImageProps {
   type: "image";
 }
-type ShapeType = "rect" | "circle" | "ellipse" | "line" | "polygon" | "path";
-interface ShapeProps extends LayoutProps {
-  shape: ShapeType;
-  fill?: Color;
+interface SvgStyleProps {
+  fill?: Color | "none";
   stroke?: StrokeProps;
+  opacity?: number;
+}
+interface SvgTransformProps {
+  transform?: {
+    translate?: [number, number];
+    rotate?: number | [number, number, number];
+    scale?: number | [number, number];
+    skewX?: number;
+    skewY?: number;
+    matrix?: [number, number, number, number, number, number];
+  };
+}
+interface SvgRectChild extends SvgStyleProps, SvgTransformProps {
+  type: "rect";
+  x?: number;
+  y?: number;
+  width: number;
+  height: number;
+  rx?: number;
+  ry?: number;
+}
+interface SvgCircleChild extends SvgStyleProps, SvgTransformProps {
+  type: "circle";
+  cx: number;
+  cy: number;
+  r: number;
+}
+interface SvgEllipseChild extends SvgStyleProps, SvgTransformProps {
+  type: "ellipse";
+  cx: number;
+  cy: number;
+  rx: number;
+  ry: number;
+}
+interface SvgLineChild extends SvgStyleProps, SvgTransformProps {
+  type: "line";
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+interface SvgPolylineChild extends SvgStyleProps, SvgTransformProps {
+  type: "polyline";
+  points: [number, number][];
+}
+interface SvgPolygonChild extends SvgStyleProps, SvgTransformProps {
+  type: "polygon";
+  points: [number, number][];
+}
+interface SvgPathChild extends SvgStyleProps, SvgTransformProps {
+  type: "path";
+  d: string;
+}
+interface SvgTextChild extends SvgStyleProps, SvgTransformProps {
+  type: "text";
+  x?: number;
+  y?: number;
+  content: string;
+  font?: FontProps;
+  textAnchor?: "start" | "middle" | "end";
+  dominantBaseline?: "auto" | "middle" | "hanging";
+}
+interface SvgGroupChild extends SvgStyleProps, SvgTransformProps {
+  type: "g";
+  children: SvgChild[];
+}
+type SvgChild = SvgRectChild | SvgCircleChild | SvgEllipseChild | SvgLineChild | SvgPolylineChild | SvgPolygonChild | SvgPathChild | SvgTextChild | SvgGroupChild;
+type SvgAlign = "none" | "xMinYMin" | "xMidYMin" | "xMaxYMin" | "xMinYMid" | "xMidYMid" | "xMaxYMid" | "xMinYMax" | "xMidYMax" | "xMaxYMax";
+interface SvgProps extends LayoutProps {
+  viewBox?: {
+    x?: number;
+    y?: number;
+    width: number;
+    height: number;
+  };
+  preserveAspectRatio?: {
+    align?: SvgAlign;
+    meetOrSlice?: "meet" | "slice";
+  };
+  children: SvgChild[];
+  background?: Color;
   shadow?: Shadow;
-  points?: [number, number][];
-  path?: string;
 }
-interface ShapeElement extends ElementBase, ShapeProps {
-  type: "shape";
+interface SvgElement extends ElementBase, SvgProps {
+  type: "svg";
 }
-interface StackProps extends ContainerLayoutProps {
+type StackAlign = "start" | "end" | "center";
+interface StackProps extends LayoutProps {
   children: Element[];
   background?: Color;
   border?: Border;
   shadow?: Shadow;
   opacity?: number;
   clip?: boolean;
+  /** 水平对齐方式（默认 start） */
+  align?: StackAlign;
+  /** 垂直对齐方式（默认 start） */
+  justify?: StackAlign;
 }
 interface StackElement extends ElementBase, StackProps {
   type: "stack";
 }
-type Element = BoxElement | TextElement | ImageElement | ShapeElement | StackElement;
-//#endregion
-//#region src/layout/measure.d.ts
-interface MeasureContext {
-  measureText(text: string, font: FontProps): {
-    width: number;
-    height: number;
-    offset: number;
-  };
-}
-declare function createCanvasMeasureContext(ctx: CanvasRenderingContext2D): MeasureContext;
-//#endregion
-//#region src/layout/engine.d.ts
-interface LayoutNode {
-  element: Element;
-  layout: ComputedLayout;
-  children: LayoutNode[];
-  lines?: string[];
-  lineOffsets?: number[];
-}
-declare function computeLayout(element: Element, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
+type Element = BoxElement | TextElement | ImageElement | SvgElement | StackElement;
 //#endregion
 //#region src/canvas.d.ts
 interface CanvasOptions {
@@ -218,11 +287,12 @@ interface DrawCallCanvas {
   readonly width: number;
   readonly height: number;
   readonly pixelRatio: number;
+  readonly canvas: HTMLCanvasElement;
   render(element: Element): LayoutNode;
   clear(): void;
   getContext(): CanvasRenderingContext2D;
   toDataURL(type?: string, quality?: number): string;
-  toBuffer(type?: "image/png" | "image/jpeg"): Promise<Buffer>;
+  toBuffer(type?: "image/png" | "image/jpeg"): Buffer;
 }
 /**
  * 创建适用于浏览器环境的 Canvas
@@ -231,4 +301,4 @@ interface DrawCallCanvas {
  */
 declare function createCanvas(options: CanvasOptions): DrawCallCanvas;
 //#endregion
-export { Shadow as A, Bounds as C, GradientDescriptor as D, FontProps as E, radialGradient as F, Spacing as M, StrokeProps as N, LinearGradientDescriptor as O, linearGradient as P, Border as S, ColorStop as T, AlignSelf as _, LayoutNode as a, JustifyContent as b, createCanvasMeasureContext as c, Element as d, StackElement as f, AlignItems as g, TextProps as h, createCanvas as i, Size as j, RadialGradientDescriptor as k, BoxElement as l, TextElement as m, DrawCallCanvas as n, computeLayout as o, StackProps as p, LayoutSize as r, MeasureContext as s, CanvasOptions as t, BoxProps as u, ContainerLayoutProps as v, Color as w, LayoutProps as x, FlexDirection as y };
+export { AlignItems as A, Color as B, SvgProps as C, SvgTransformProps as D, SvgTextChild as E, LayoutConstraints as F, RadialGradientDescriptor as G, FontProps as H, LayoutNode as I, Spacing as J, Shadow as K, LayoutProps as L, ContainerLayoutProps as M, FlexDirection as N, TextElement as O, JustifyContent as P, Border as R, SvgPolylineChild as S, SvgStyleProps as T, GradientDescriptor as U, ColorStop as V, LinearGradientDescriptor as W, linearGradient as X, StrokeProps as Y, radialGradient as Z, SvgEllipseChild as _, BoxElement as a, SvgPathChild as b, ImageElement as c, StackElement as d, StackProps as f, SvgElement as g, SvgCircleChild as h, createCanvas as i, AlignSelf as j, TextProps as k, ImageProps as l, SvgChild as m, DrawCallCanvas as n, BoxProps as o, SvgAlign as p, Size as q, LayoutSize as r, Element as s, CanvasOptions as t, StackAlign as u, SvgGroupChild as v, SvgRectChild as w, SvgPolygonChild as x, SvgLineChild as y, Bounds as z };

package/{canvas-CkpP3RNK.d.cts → canvas.d.mts}

@@ -101,6 +101,13 @@ interface ComputedLayout {
   contentWidth: number;
   contentHeight: number;
 }
+interface LayoutNode {
+  element: Element;
+  layout: ComputedLayout;
+  children: LayoutNode[];
+  lines?: string[];
+  lineOffsets?: number[];
+}
 interface LayoutConstraints {
   minWidth: number;
   maxWidth: number;
@@ -109,7 +116,7 @@ interface LayoutConstraints {
 }
 //#endregion
 //#region src/types/components.d.ts
-type ElementType = "box" | "text" | "image" | "shape" | "stack";
+type ElementType = "box" | "text" | "image" | "svg" | "stack";
 interface ElementBase {
   type: ElementType;
 }
@@ -141,7 +148,7 @@ interface TextElement extends ElementBase, TextProps {
   type: "text";
 }
 interface ImageProps extends LayoutProps {
-  src: string | ImageBitmap | CanvasImageSource;
+  src: ImageBitmap | CanvasImageSource;
   fit?: "contain" | "cover" | "fill" | "none" | "scale-down";
   position?: {
     x?: "left" | "center" | "right" | number;
@@ -154,50 +161,112 @@ interface ImageProps extends LayoutProps {
 interface ImageElement extends ElementBase, ImageProps {
   type: "image";
 }
-type ShapeType = "rect" | "circle" | "ellipse" | "line" | "polygon" | "path";
-interface ShapeProps extends LayoutProps {
-  shape: ShapeType;
-  fill?: Color;
+interface SvgStyleProps {
+  fill?: Color | "none";
   stroke?: StrokeProps;
+  opacity?: number;
+}
+interface SvgTransformProps {
+  transform?: {
+    translate?: [number, number];
+    rotate?: number | [number, number, number];
+    scale?: number | [number, number];
+    skewX?: number;
+    skewY?: number;
+    matrix?: [number, number, number, number, number, number];
+  };
+}
+interface SvgRectChild extends SvgStyleProps, SvgTransformProps {
+  type: "rect";
+  x?: number;
+  y?: number;
+  width: number;
+  height: number;
+  rx?: number;
+  ry?: number;
+}
+interface SvgCircleChild extends SvgStyleProps, SvgTransformProps {
+  type: "circle";
+  cx: number;
+  cy: number;
+  r: number;
+}
+interface SvgEllipseChild extends SvgStyleProps, SvgTransformProps {
+  type: "ellipse";
+  cx: number;
+  cy: number;
+  rx: number;
+  ry: number;
+}
+interface SvgLineChild extends SvgStyleProps, SvgTransformProps {
+  type: "line";
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+interface SvgPolylineChild extends SvgStyleProps, SvgTransformProps {
+  type: "polyline";
+  points: [number, number][];
+}
+interface SvgPolygonChild extends SvgStyleProps, SvgTransformProps {
+  type: "polygon";
+  points: [number, number][];
+}
+interface SvgPathChild extends SvgStyleProps, SvgTransformProps {
+  type: "path";
+  d: string;
+}
+interface SvgTextChild extends SvgStyleProps, SvgTransformProps {
+  type: "text";
+  x?: number;
+  y?: number;
+  content: string;
+  font?: FontProps;
+  textAnchor?: "start" | "middle" | "end";
+  dominantBaseline?: "auto" | "middle" | "hanging";
+}
+interface SvgGroupChild extends SvgStyleProps, SvgTransformProps {
+  type: "g";
+  children: SvgChild[];
+}
+type SvgChild = SvgRectChild | SvgCircleChild | SvgEllipseChild | SvgLineChild | SvgPolylineChild | SvgPolygonChild | SvgPathChild | SvgTextChild | SvgGroupChild;
+type SvgAlign = "none" | "xMinYMin" | "xMidYMin" | "xMaxYMin" | "xMinYMid" | "xMidYMid" | "xMaxYMid" | "xMinYMax" | "xMidYMax" | "xMaxYMax";
+interface SvgProps extends LayoutProps {
+  viewBox?: {
+    x?: number;
+    y?: number;
+    width: number;
+    height: number;
+  };
+  preserveAspectRatio?: {
+    align?: SvgAlign;
+    meetOrSlice?: "meet" | "slice";
+  };
+  children: SvgChild[];
+  background?: Color;
   shadow?: Shadow;
-  points?: [number, number][];
-  path?: string;
 }
-interface ShapeElement extends ElementBase, ShapeProps {
-  type: "shape";
+interface SvgElement extends ElementBase, SvgProps {
+  type: "svg";
 }
-interface StackProps extends ContainerLayoutProps {
+type StackAlign = "start" | "end" | "center";
+interface StackProps extends LayoutProps {
   children: Element[];
   background?: Color;
   border?: Border;
   shadow?: Shadow;
   opacity?: number;
   clip?: boolean;
+  /** 水平对齐方式（默认 start） */
+  align?: StackAlign;
+  /** 垂直对齐方式（默认 start） */
+  justify?: StackAlign;
 }
 interface StackElement extends ElementBase, StackProps {
   type: "stack";
 }
-type Element = BoxElement | TextElement | ImageElement | ShapeElement | StackElement;
-//#endregion
-//#region src/layout/measure.d.ts
-interface MeasureContext {
-  measureText(text: string, font: FontProps): {
-    width: number;
-    height: number;
-    offset: number;
-  };
-}
-declare function createCanvasMeasureContext(ctx: CanvasRenderingContext2D): MeasureContext;
-//#endregion
-//#region src/layout/engine.d.ts
-interface LayoutNode {
-  element: Element;
-  layout: ComputedLayout;
-  children: LayoutNode[];
-  lines?: string[];
-  lineOffsets?: number[];
-}
-declare function computeLayout(element: Element, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
+type Element = BoxElement | TextElement | ImageElement | SvgElement | StackElement;
 //#endregion
 //#region src/canvas.d.ts
 interface CanvasOptions {
@@ -218,11 +287,12 @@ interface DrawCallCanvas {
   readonly width: number;
   readonly height: number;
   readonly pixelRatio: number;
+  readonly canvas: HTMLCanvasElement;
   render(element: Element): LayoutNode;
   clear(): void;
   getContext(): CanvasRenderingContext2D;
   toDataURL(type?: string, quality?: number): string;
-  toBuffer(type?: "image/png" | "image/jpeg"): Promise<Buffer>;
+  toBuffer(type?: "image/png" | "image/jpeg"): Buffer;
 }
 /**
  * 创建适用于浏览器环境的 Canvas
@@ -231,4 +301,4 @@ interface DrawCallCanvas {
  */
 declare function createCanvas(options: CanvasOptions): DrawCallCanvas;
 //#endregion
-export { Shadow as A, Bounds as C, GradientDescriptor as D, FontProps as E, radialGradient as F, Spacing as M, StrokeProps as N, LinearGradientDescriptor as O, linearGradient as P, Border as S, ColorStop as T, AlignSelf as _, LayoutNode as a, JustifyContent as b, createCanvasMeasureContext as c, Element as d, StackElement as f, AlignItems as g, TextProps as h, createCanvas as i, Size as j, RadialGradientDescriptor as k, BoxElement as l, TextElement as m, DrawCallCanvas as n, computeLayout as o, StackProps as p, LayoutSize as r, MeasureContext as s, CanvasOptions as t, BoxProps as u, ContainerLayoutProps as v, Color as w, LayoutProps as x, FlexDirection as y };
+export { AlignItems as A, Color as B, SvgProps as C, SvgTransformProps as D, SvgTextChild as E, LayoutConstraints as F, RadialGradientDescriptor as G, FontProps as H, LayoutNode as I, Spacing as J, Shadow as K, LayoutProps as L, ContainerLayoutProps as M, FlexDirection as N, TextElement as O, JustifyContent as P, Border as R, SvgPolylineChild as S, SvgStyleProps as T, GradientDescriptor as U, ColorStop as V, LinearGradientDescriptor as W, linearGradient as X, StrokeProps as Y, radialGradient as Z, SvgEllipseChild as _, BoxElement as a, SvgPathChild as b, ImageElement as c, StackElement as d, StackProps as f, SvgElement as g, SvgCircleChild as h, createCanvas as i, AlignSelf as j, TextProps as k, ImageProps as l, SvgChild as m, DrawCallCanvas as n, BoxProps as o, SvgAlign as p, Size as q, LayoutSize as r, Element as s, CanvasOptions as t, StackAlign as u, SvgGroupChild as v, SvgRectChild as w, SvgPolygonChild as x, SvgLineChild as y, Bounds as z };

package/index.cjs

@@ -1,4 +1,4 @@
-const require_engine = require('./engine-OyKoV7Gn.cjs');
+const require_render = require('./render.cjs');
 
 //#region src/canvas.ts
 /**
@@ -19,19 +19,20 @@ function createCanvas(options) {
 	const ctx = canvas.getContext("2d");
 	if (!ctx) throw new Error("Failed to get 2d context");
 	if (pixelRatio !== 1) ctx.scale(pixelRatio, pixelRatio);
-	const measureCtx = require_engine.createCanvasMeasureContext(ctx);
+	const measureCtx = require_render.createCanvasMeasureContext(ctx);
 	return {
 		width,
 		height,
 		pixelRatio,
+		canvas,
 		render(element) {
-			const layoutTree = require_engine.computeLayout(element, measureCtx, {
+			const layoutTree = require_render.computeLayout(element, measureCtx, {
 				minWidth: 0,
 				maxWidth: width,
 				minHeight: 0,
 				maxHeight: height
 			});
-			require_engine.renderNode(ctx, layoutTree);
+			require_render.renderNode(ctx, layoutTree);
 			return layoutTree;
 		},
 		clear() {
@@ -44,7 +45,7 @@ function createCanvas(options) {
 			if ("toDataURL" in canvas && typeof canvas.toDataURL === "function") return canvas.toDataURL(type, quality);
 			throw new Error("toDataURL not supported");
 		},
-		async toBuffer(type = "image/png") {
+		toBuffer(type = "image/png") {
 			if ("toBuffer" in canvas && typeof canvas.toBuffer === "function") return canvas.toBuffer(type);
 			throw new Error("toBuffer not supported in this environment");
 		}
@@ -60,6 +61,15 @@ function Box(props) {
 	};
 }
 
+//#endregion
+//#region src/components/Image.ts
+function Image(props) {
+	return {
+		type: "image",
+		...props
+	};
+}
+
 //#endregion
 //#region src/components/Stack.ts
 function Stack(props) {
@@ -69,6 +79,53 @@ function Stack(props) {
 	};
 }
 
+//#endregion
+//#region src/components/Svg.ts
+function Svg(props) {
+	return {
+		type: "svg",
+		...props
+	};
+}
+const svg = {
+	rect: (props) => ({
+		type: "rect",
+		...props
+	}),
+	circle: (props) => ({
+		type: "circle",
+		...props
+	}),
+	ellipse: (props) => ({
+		type: "ellipse",
+		...props
+	}),
+	line: (props) => ({
+		type: "line",
+		...props
+	}),
+	polyline: (props) => ({
+		type: "polyline",
+		...props
+	}),
+	polygon: (props) => ({
+		type: "polygon",
+		...props
+	}),
+	path: (props) => ({
+		type: "path",
+		...props
+	}),
+	text: (props) => ({
+		type: "text",
+		...props
+	}),
+	g: (props) => ({
+		type: "g",
+		...props
+	})
+};
+
 //#endregion
 //#region src/components/Text.ts
 function Text(props) {
@@ -80,10 +137,13 @@ function Text(props) {
 
 //#endregion
 exports.Box = Box;
+exports.Image = Image;
 exports.Stack = Stack;
+exports.Svg = Svg;
 exports.Text = Text;
-exports.computeLayout = require_engine.computeLayout;
+exports.computeLayout = require_render.computeLayout;
 exports.createCanvas = createCanvas;
-exports.createCanvasMeasureContext = require_engine.createCanvasMeasureContext;
-exports.linearGradient = require_engine.linearGradient;
-exports.radialGradient = require_engine.radialGradient;
+exports.createCanvasMeasureContext = require_render.createCanvasMeasureContext;
+exports.linearGradient = require_render.linearGradient;
+exports.radialGradient = require_render.radialGradient;
+exports.svg = svg;

package/index.d.cts

@@ -1,12 +1,42 @@
-import { A as Shadow, C as Bounds, D as GradientDescriptor, E as FontProps, F as radialGradient, M as Spacing, N as StrokeProps, O as LinearGradientDescriptor, P as linearGradient, S as Border, T as ColorStop, _ as AlignSelf, a as LayoutNode, b as JustifyContent, c as createCanvasMeasureContext, d as Element, f as StackElement, g as AlignItems, h as TextProps, i as createCanvas, j as Size, k as RadialGradientDescriptor, l as BoxElement, m as TextElement, n as DrawCallCanvas, o as computeLayout, p as StackProps, r as LayoutSize, s as MeasureContext, t as CanvasOptions, u as BoxProps, v as ContainerLayoutProps, w as Color, x as LayoutProps, y as FlexDirection } from "./canvas-CkpP3RNK.cjs";
+import { A as AlignItems, B as Color, C as SvgProps, D as SvgTransformProps, E as SvgTextChild, F as LayoutConstraints, G as RadialGradientDescriptor, H as FontProps, I as LayoutNode, J as Spacing, K as Shadow, L as LayoutProps, M as ContainerLayoutProps, N as FlexDirection, O as TextElement, P as JustifyContent, R as Border, S as SvgPolylineChild, T as SvgStyleProps, U as GradientDescriptor, V as ColorStop, W as LinearGradientDescriptor, X as linearGradient, Y as StrokeProps, Z as radialGradient, _ as SvgEllipseChild, a as BoxElement, b as SvgPathChild, c as ImageElement, d as StackElement, f as StackProps, g as SvgElement, h as SvgCircleChild, i as createCanvas, j as AlignSelf, k as TextProps, l as ImageProps, m as SvgChild, n as DrawCallCanvas, o as BoxProps, p as SvgAlign, q as Size, r as LayoutSize, s as Element, t as CanvasOptions, u as StackAlign, v as SvgGroupChild, w as SvgRectChild, x as SvgPolygonChild, y as SvgLineChild, z as Bounds } from "./canvas.cjs";
 
 //#region src/components/Box.d.ts
 declare function Box(props: BoxProps): BoxElement;
 //#endregion
+//#region src/components/Image.d.ts
+declare function Image(props: ImageProps): ImageElement;
+//#endregion
 //#region src/components/Stack.d.ts
 declare function Stack(props: StackProps): StackElement;
 //#endregion
+//#region src/components/Svg.d.ts
+declare function Svg(props: SvgProps): SvgElement;
+declare const svg: {
+  rect: (props: Omit<SvgRectChild, "type">) => SvgRectChild;
+  circle: (props: Omit<SvgCircleChild, "type">) => SvgCircleChild;
+  ellipse: (props: Omit<SvgEllipseChild, "type">) => SvgEllipseChild;
+  line: (props: Omit<SvgLineChild, "type">) => SvgLineChild;
+  polyline: (props: Omit<SvgPolylineChild, "type">) => SvgPolylineChild;
+  polygon: (props: Omit<SvgPolygonChild, "type">) => SvgPolygonChild;
+  path: (props: Omit<SvgPathChild, "type">) => SvgPathChild;
+  text: (props: Omit<SvgTextChild, "type">) => SvgTextChild;
+  g: (props: Omit<SvgGroupChild, "type">) => SvgGroupChild;
+};
+//#endregion
 //#region src/components/Text.d.ts
 declare function Text(props: TextProps): TextElement;
 //#endregion
-export { type AlignItems, type AlignSelf, type Border, type Bounds, Box, type BoxElement, type BoxProps, type CanvasOptions, type Color, type ColorStop, type ContainerLayoutProps, type DrawCallCanvas, type Element, type FlexDirection, type FontProps, type GradientDescriptor, type JustifyContent, type LayoutNode, type LayoutProps, type LayoutSize, type LinearGradientDescriptor, type MeasureContext, type RadialGradientDescriptor, type Shadow, type Size, type Spacing, Stack, type StackElement, type StackProps, type StrokeProps, Text, type TextElement, type TextProps, computeLayout, createCanvas, createCanvasMeasureContext, linearGradient, radialGradient };
+//#region src/layout/utils/measure.d.ts
+interface MeasureContext {
+  measureText(text: string, font: FontProps): {
+    width: number;
+    height: number;
+    offset: number;
+  };
+}
+declare function createCanvasMeasureContext(ctx: CanvasRenderingContext2D): MeasureContext;
+//#endregion
+//#region src/layout/engine.d.ts
+declare function computeLayout(element: Element, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
+//#endregion
+export { type AlignItems, type AlignSelf, type Border, type Bounds, Box, type BoxElement, type BoxProps, type CanvasOptions, type Color, type ColorStop, type ContainerLayoutProps, type DrawCallCanvas, type Element, type FlexDirection, type FontProps, type GradientDescriptor, Image, type JustifyContent, type LayoutNode, type LayoutProps, type LayoutSize, type LinearGradientDescriptor, type MeasureContext, type RadialGradientDescriptor, type Shadow, type Size, type Spacing, Stack, type StackAlign, type StackElement, type StackProps, type StrokeProps, Svg, type SvgAlign, type SvgChild, type SvgCircleChild, type SvgElement, type SvgEllipseChild, type SvgGroupChild, type SvgLineChild, type SvgPathChild, type SvgPolygonChild, type SvgPolylineChild, type SvgProps, type SvgRectChild, type SvgStyleProps, type SvgTextChild, type SvgTransformProps, Text, type TextElement, type TextProps, computeLayout, createCanvas, createCanvasMeasureContext, linearGradient, radialGradient, svg };

package/index.d.mts

@@ -1,12 +1,42 @@
-import { A as Shadow, C as Bounds, D as GradientDescriptor, E as FontProps, F as radialGradient, M as Spacing, N as StrokeProps, O as LinearGradientDescriptor, P as linearGradient, S as Border, T as ColorStop, _ as AlignSelf, a as LayoutNode, b as JustifyContent, c as createCanvasMeasureContext, d as Element, f as StackElement, g as AlignItems, h as TextProps, i as createCanvas, j as Size, k as RadialGradientDescriptor, l as BoxElement, m as TextElement, n as DrawCallCanvas, o as computeLayout, p as StackProps, r as LayoutSize, s as MeasureContext, t as CanvasOptions, u as BoxProps, v as ContainerLayoutProps, w as Color, x as LayoutProps, y as FlexDirection } from "./canvas-BYrCq8eS.mjs";
+import { A as AlignItems, B as Color, C as SvgProps, D as SvgTransformProps, E as SvgTextChild, F as LayoutConstraints, G as RadialGradientDescriptor, H as FontProps, I as LayoutNode, J as Spacing, K as Shadow, L as LayoutProps, M as ContainerLayoutProps, N as FlexDirection, O as TextElement, P as JustifyContent, R as Border, S as SvgPolylineChild, T as SvgStyleProps, U as GradientDescriptor, V as ColorStop, W as LinearGradientDescriptor, X as linearGradient, Y as StrokeProps, Z as radialGradient, _ as SvgEllipseChild, a as BoxElement, b as SvgPathChild, c as ImageElement, d as StackElement, f as StackProps, g as SvgElement, h as SvgCircleChild, i as createCanvas, j as AlignSelf, k as TextProps, l as ImageProps, m as SvgChild, n as DrawCallCanvas, o as BoxProps, p as SvgAlign, q as Size, r as LayoutSize, s as Element, t as CanvasOptions, u as StackAlign, v as SvgGroupChild, w as SvgRectChild, x as SvgPolygonChild, y as SvgLineChild, z as Bounds } from "./canvas.mjs";
 
 //#region src/components/Box.d.ts
 declare function Box(props: BoxProps): BoxElement;
 //#endregion
+//#region src/components/Image.d.ts
+declare function Image(props: ImageProps): ImageElement;
+//#endregion
 //#region src/components/Stack.d.ts
 declare function Stack(props: StackProps): StackElement;
 //#endregion
+//#region src/components/Svg.d.ts
+declare function Svg(props: SvgProps): SvgElement;
+declare const svg: {
+  rect: (props: Omit<SvgRectChild, "type">) => SvgRectChild;
+  circle: (props: Omit<SvgCircleChild, "type">) => SvgCircleChild;
+  ellipse: (props: Omit<SvgEllipseChild, "type">) => SvgEllipseChild;
+  line: (props: Omit<SvgLineChild, "type">) => SvgLineChild;
+  polyline: (props: Omit<SvgPolylineChild, "type">) => SvgPolylineChild;
+  polygon: (props: Omit<SvgPolygonChild, "type">) => SvgPolygonChild;
+  path: (props: Omit<SvgPathChild, "type">) => SvgPathChild;
+  text: (props: Omit<SvgTextChild, "type">) => SvgTextChild;
+  g: (props: Omit<SvgGroupChild, "type">) => SvgGroupChild;
+};
+//#endregion
 //#region src/components/Text.d.ts
 declare function Text(props: TextProps): TextElement;
 //#endregion
-export { type AlignItems, type AlignSelf, type Border, type Bounds, Box, type BoxElement, type BoxProps, type CanvasOptions, type Color, type ColorStop, type ContainerLayoutProps, type DrawCallCanvas, type Element, type FlexDirection, type FontProps, type GradientDescriptor, type JustifyContent, type LayoutNode, type LayoutProps, type LayoutSize, type LinearGradientDescriptor, type MeasureContext, type RadialGradientDescriptor, type Shadow, type Size, type Spacing, Stack, type StackElement, type StackProps, type StrokeProps, Text, type TextElement, type TextProps, computeLayout, createCanvas, createCanvasMeasureContext, linearGradient, radialGradient };
+//#region src/layout/utils/measure.d.ts
+interface MeasureContext {
+  measureText(text: string, font: FontProps): {
+    width: number;
+    height: number;
+    offset: number;
+  };
+}
+declare function createCanvasMeasureContext(ctx: CanvasRenderingContext2D): MeasureContext;
+//#endregion
+//#region src/layout/engine.d.ts
+declare function computeLayout(element: Element, ctx: MeasureContext, constraints: LayoutConstraints, x?: number, y?: number): LayoutNode;
+//#endregion
+export { type AlignItems, type AlignSelf, type Border, type Bounds, Box, type BoxElement, type BoxProps, type CanvasOptions, type Color, type ColorStop, type ContainerLayoutProps, type DrawCallCanvas, type Element, type FlexDirection, type FontProps, type GradientDescriptor, Image, type JustifyContent, type LayoutNode, type LayoutProps, type LayoutSize, type LinearGradientDescriptor, type MeasureContext, type RadialGradientDescriptor, type Shadow, type Size, type Spacing, Stack, type StackAlign, type StackElement, type StackProps, type StrokeProps, Svg, type SvgAlign, type SvgChild, type SvgCircleChild, type SvgElement, type SvgEllipseChild, type SvgGroupChild, type SvgLineChild, type SvgPathChild, type SvgPolygonChild, type SvgPolylineChild, type SvgProps, type SvgRectChild, type SvgStyleProps, type SvgTextChild, type SvgTransformProps, Text, type TextElement, type TextProps, computeLayout, createCanvas, createCanvasMeasureContext, linearGradient, radialGradient, svg };