@effing/canvas 0.1.0

package/dist/index.js

@@ -0,0 +1,2070 @@
+// src/index.ts
+import { createCanvas as _createCanvas } from "@napi-rs/canvas";
+import {
+  Canvas,
+  GlobalFonts as GlobalFonts2,
+  loadImage as loadImage4,
+  Image
+} from "@napi-rs/canvas";
+
+// src/lottie.ts
+import { LottieAnimation } from "@napi-rs/canvas";
+function loadLottie(data, options) {
+  const jsonString = typeof data === "string" ? data : data.toString("utf-8");
+  return LottieAnimation.loadFromData(jsonString, {
+    resourcePath: options?.resourcePath
+  });
+}
+function renderLottieFrame(ctx, animation, frame) {
+  animation.seekFrame(frame);
+  animation.render(ctx);
+}
+
+// src/jsx/draw/index.ts
+import { loadImage as loadImage3 } from "@napi-rs/canvas";
+
+// src/jsx/language.ts
+function isEmoji(char) {
+  const cp = char.codePointAt(0);
+  if (cp === void 0) return false;
+  if (cp >= 128512 && cp <= 128591) return true;
+  if (cp >= 127744 && cp <= 128511) return true;
+  if (cp >= 128640 && cp <= 128767) return true;
+  if (cp >= 129280 && cp <= 129535) return true;
+  if (cp >= 9728 && cp <= 9983) return true;
+  if (cp >= 9984 && cp <= 10175) return true;
+  if (cp >= 11088 && cp <= 11093) return true;
+  if (cp >= 8205 && cp <= 8205) return true;
+  if (cp >= 65024 && cp <= 65039) return true;
+  if (cp >= 129536 && cp <= 129647) return true;
+  if (cp >= 129648 && cp <= 129791) return true;
+  if (cp >= 8986 && cp <= 9203) return true;
+  if (cp >= 9193 && cp <= 9210) return true;
+  if (cp >= 9642 && cp <= 9726) return true;
+  if (cp >= 10548 && cp <= 10549) return true;
+  if (cp >= 11013 && cp <= 11015) return true;
+  if (cp >= 12336 && cp <= 12336) return true;
+  if (cp >= 12349 && cp <= 12349) return true;
+  if (cp >= 12951 && cp <= 12953) return true;
+  return false;
+}
+
+// src/jsx/text/linebreak.ts
+import LineBreaker from "linebreak";
+function findBreakOpportunities(text) {
+  const breaker = new LineBreaker(text);
+  const opportunities = [];
+  let bk = breaker.nextBreak();
+  while (bk) {
+    opportunities.push({
+      position: bk.position,
+      required: bk.required ?? false
+    });
+    bk = breaker.nextBreak();
+  }
+  return opportunities;
+}
+
+// src/jsx/text/measure.ts
+import { createCanvas } from "@napi-rs/canvas";
+var scratchCtx = null;
+function getScratchCtx() {
+  if (!scratchCtx) {
+    scratchCtx = createCanvas(1, 1).getContext("2d");
+  }
+  return scratchCtx;
+}
+function setFont(ctx, fontSize, fontFamily, fontWeight = 400, fontStyle = "normal") {
+  ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+}
+function measureText(text, fontSize, fontFamily, fontWeight = 400, fontStyle = "normal", ctx) {
+  const c = ctx ?? getScratchCtx();
+  setFont(c, fontSize, fontFamily, fontWeight, fontStyle);
+  const m = c.measureText(text);
+  const ascent = m.fontBoundingBoxAscent ?? m.actualBoundingBoxAscent ?? fontSize * 0.8;
+  const descent = m.fontBoundingBoxDescent ?? m.actualBoundingBoxDescent ?? fontSize * 0.2;
+  return {
+    width: m.width,
+    ascent,
+    descent,
+    height: ascent + descent
+  };
+}
+function measureWord(word, fontSize, fontFamily, fontWeight = 400, fontStyle = "normal", ctx, letterSpacing = 0) {
+  const base = measureText(
+    word,
+    fontSize,
+    fontFamily,
+    fontWeight,
+    fontStyle,
+    ctx
+  ).width;
+  if (letterSpacing === 0 || word.length === 0) return base;
+  return base + letterSpacing * word.length;
+}
+
+// src/jsx/text/index.ts
+function emojiAwareMeasureWord(word, fontSize, fontFamily, fontWeight, fontStyle, ctx, letterSpacing = 0) {
+  const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+  let totalWidth = 0;
+  let textBuffer = "";
+  for (const { segment } of segmenter.segment(word)) {
+    let isEmojiSegment = false;
+    for (const char of segment) {
+      if (isEmoji(char)) {
+        isEmojiSegment = true;
+        break;
+      }
+    }
+    if (isEmojiSegment) {
+      if (textBuffer) {
+        totalWidth += measureWord(
+          textBuffer,
+          fontSize,
+          fontFamily,
+          fontWeight,
+          fontStyle,
+          ctx,
+          letterSpacing
+        );
+        textBuffer = "";
+      }
+      totalWidth += fontSize;
+    } else {
+      textBuffer += segment;
+    }
+  }
+  if (textBuffer) {
+    totalWidth += measureWord(
+      textBuffer,
+      fontSize,
+      fontFamily,
+      fontWeight,
+      fontStyle,
+      ctx,
+      letterSpacing
+    );
+  }
+  return totalWidth;
+}
+function layoutText(text, style, maxWidth, ctx, emojiEnabled) {
+  const fontSize = style.fontSize ?? 16;
+  const fontFamily = style.fontFamily ?? "sans-serif";
+  const fontWeight = style.fontWeight ?? 400;
+  const fontStyle = style.fontStyle ?? "normal";
+  const color = style.color ?? "black";
+  const textAlign = style.textAlign ?? "left";
+  const refMetrics = measureText(
+    "M",
+    fontSize,
+    fontFamily,
+    fontWeight,
+    fontStyle,
+    ctx
+  );
+  const lineHeightPx = resolveLineHeight(
+    style.lineHeight,
+    fontSize,
+    refMetrics
+  );
+  const letterSpacing = typeof style.letterSpacing === "number" ? style.letterSpacing : 0;
+  const whiteSpace = style.whiteSpace ?? "normal";
+  const wordBreak = style.wordBreak ?? "normal";
+  const textOverflow = style.textOverflow ?? "clip";
+  const textDecoration = style.textDecoration;
+  const measure = emojiEnabled ? (word, ls) => emojiAwareMeasureWord(
+    word,
+    fontSize,
+    fontFamily,
+    fontWeight,
+    fontStyle,
+    ctx,
+    ls ?? letterSpacing
+  ) : (word, ls) => measureWord(
+    word,
+    fontSize,
+    fontFamily,
+    fontWeight,
+    fontStyle,
+    ctx,
+    ls ?? letterSpacing
+  );
+  let processedText = text;
+  if (style.textTransform === "uppercase") {
+    processedText = text.toUpperCase();
+  } else if (style.textTransform === "lowercase") {
+    processedText = text.toLowerCase();
+  } else if (style.textTransform === "capitalize") {
+    processedText = text.replace(/\b\w/g, (c) => c.toUpperCase());
+  }
+  const noWrap = whiteSpace === "nowrap" || whiteSpace === "pre";
+  const preserveWhitespace = whiteSpace === "pre" || whiteSpace === "pre-wrap";
+  const paragraphs = preserveWhitespace ? processedText.split("\n") : processedText.split("\n");
+  const lines = [];
+  for (const paragraph of paragraphs) {
+    if (noWrap) {
+      lines.push(paragraph);
+      continue;
+    }
+    const wrapped = wrapText(
+      paragraph,
+      maxWidth,
+      fontSize,
+      fontFamily,
+      fontWeight,
+      fontStyle,
+      letterSpacing,
+      wordBreak,
+      ctx,
+      measure
+    );
+    lines.push(...wrapped);
+  }
+  if (textOverflow === "ellipsis" && noWrap && lines.length === 1) {
+    const line = lines[0];
+    const lineWidth = measure(line);
+    if (lineWidth > maxWidth) {
+      lines[0] = truncateWithEllipsis(
+        line,
+        maxWidth,
+        fontSize,
+        fontFamily,
+        fontWeight,
+        fontStyle,
+        ctx,
+        letterSpacing
+      );
+    }
+  }
+  const segments = [];
+  let totalHeight = 0;
+  let maxLineWidth = 0;
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const lineWidth = measure(line);
+    let x = 0;
+    if (textAlign === "center") {
+      x = (maxWidth - lineWidth) / 2;
+    } else if (textAlign === "right") {
+      x = maxWidth - lineWidth;
+    }
+    const metrics = measureText(
+      line || "M",
+      fontSize,
+      fontFamily,
+      fontWeight,
+      fontStyle,
+      ctx
+    );
+    segments.push({
+      text: line,
+      x,
+      y: totalHeight + (lineHeightPx + metrics.ascent - metrics.descent) / 2,
+      width: lineWidth,
+      height: lineHeightPx,
+      fontSize,
+      fontFamily,
+      fontWeight,
+      fontStyle,
+      color,
+      ascent: metrics.ascent,
+      textDecoration,
+      letterSpacing,
+      lineIndex: i
+    });
+    totalHeight += lineHeightPx;
+    maxLineWidth = Math.max(maxLineWidth, lineWidth);
+  }
+  return {
+    segments,
+    width: maxLineWidth,
+    height: totalHeight
+  };
+}
+function resolveLineHeight(lineHeight, fontSize, metrics) {
+  if (lineHeight === void 0 || lineHeight === "normal") {
+    return metrics ? metrics.ascent + metrics.descent : fontSize * 1.2;
+  }
+  if (typeof lineHeight === "number") {
+    return lineHeight > 5 ? lineHeight : lineHeight * fontSize;
+  }
+  const parsed = parseFloat(String(lineHeight));
+  return isNaN(parsed) ? fontSize * 1.2 : parsed;
+}
+function wrapText(text, maxWidth, fontSize, fontFamily, fontWeight, fontStyle, letterSpacing, wordBreak, ctx, measureFn) {
+  if (!text) return [""];
+  const mw = measureFn ?? ((word) => measureWord(
+    word,
+    fontSize,
+    fontFamily,
+    fontWeight,
+    fontStyle,
+    ctx,
+    letterSpacing
+  ));
+  const breakOpps = findBreakOpportunities(text);
+  const lines = [];
+  let lineStart = 0;
+  let lastBreak = 0;
+  for (const opp of breakOpps) {
+    const segment = text.slice(lineStart, opp.position);
+    const segWidth = mw(segment);
+    if (segWidth > maxWidth && lastBreak > lineStart) {
+      const line = text.slice(lineStart, lastBreak).replace(/\s+$/, "");
+      lines.push(line);
+      lineStart = lastBreak;
+    } else if (segWidth > maxWidth && wordBreak === "break-all") {
+      const broken = forceBreakWord(
+        text,
+        lineStart,
+        opp.position,
+        maxWidth,
+        fontSize,
+        fontFamily,
+        fontWeight,
+        fontStyle,
+        ctx,
+        letterSpacing,
+        measureFn
+      );
+      lines.push(...broken.lines);
+      lineStart = broken.endPos;
+    }
+    if (opp.required) {
+      const line = text.slice(lineStart, opp.position).replace(/\s+$/, "");
+      lines.push(line);
+      lineStart = opp.position;
+    }
+    lastBreak = opp.position;
+  }
+  if (lineStart < text.length) {
+    const remaining = text.slice(lineStart).replace(/\s+$/, "");
+    if (remaining) {
+      const remWidth = mw(remaining);
+      if (remWidth > maxWidth && wordBreak === "break-all") {
+        const broken = forceBreakWord(
+          text,
+          lineStart,
+          text.length,
+          maxWidth,
+          fontSize,
+          fontFamily,
+          fontWeight,
+          fontStyle,
+          ctx,
+          letterSpacing,
+          measureFn
+        );
+        lines.push(...broken.lines);
+      } else {
+        lines.push(remaining);
+      }
+    }
+  }
+  return lines.length > 0 ? lines : [""];
+}
+function forceBreakWord(text, start, end, maxWidth, fontSize, fontFamily, fontWeight, fontStyle, ctx, letterSpacing = 0, measureFn) {
+  const mw = measureFn ?? ((word) => measureWord(
+    word,
+    fontSize,
+    fontFamily,
+    fontWeight,
+    fontStyle,
+    ctx,
+    letterSpacing
+  ));
+  const lines = [];
+  let pos = start;
+  while (pos < end) {
+    let breakPos = pos + 1;
+    while (breakPos < end) {
+      const chunk = text.slice(pos, breakPos + 1);
+      const w = mw(chunk);
+      if (w > maxWidth) break;
+      breakPos++;
+    }
+    const line = text.slice(pos, breakPos);
+    if (line.trim()) lines.push(line);
+    pos = breakPos;
+  }
+  return { lines, endPos: end };
+}
+function truncateWithEllipsis(text, maxWidth, fontSize, fontFamily, fontWeight, fontStyle, ctx, letterSpacing = 0) {
+  const ellipsis = "\u2026";
+  const ellipsisWidth = measureWord(
+    ellipsis,
+    fontSize,
+    fontFamily,
+    fontWeight,
+    fontStyle,
+    ctx,
+    letterSpacing
+  );
+  const availWidth = maxWidth - ellipsisWidth;
+  for (let i = text.length - 1; i > 0; i--) {
+    const truncated = text.slice(0, i);
+    const w = measureWord(
+      truncated,
+      fontSize,
+      fontFamily,
+      fontWeight,
+      fontStyle,
+      ctx,
+      letterSpacing
+    );
+    if (w <= availWidth) {
+      return truncated + ellipsis;
+    }
+  }
+  return ellipsis;
+}
+function createTextMeasureFunc(text, style, ctx, emojiEnabled) {
+  const measureStyle = { ...style, textOverflow: "clip" };
+  return (width, _widthMode, _height, _heightMode) => {
+    const maxWidth = width > 0 ? width : Infinity;
+    const result = layoutText(text, measureStyle, maxWidth, ctx, emojiEnabled);
+    const wrapped = result.segments.length > 1;
+    const reportedWidth = wrapped ? Math.min(maxWidth, width > 0 ? width : result.width) : result.width;
+    return { width: Math.min(reportedWidth, maxWidth), height: result.height };
+  };
+}
+
+// src/jsx/draw/clip.ts
+function applyClip(ctx, x, y, width, height, borderRadius) {
+  ctx.beginPath();
+  if (borderRadius && hasRadius(borderRadius)) {
+    const { topLeft, topRight, bottomRight, bottomLeft } = borderRadius;
+    roundedRect(
+      ctx,
+      x,
+      y,
+      width,
+      height,
+      topLeft,
+      topRight,
+      bottomRight,
+      bottomLeft
+    );
+  } else {
+    ctx.rect(x, y, width, height);
+  }
+  ctx.clip();
+}
+function roundedRect(ctx, x, y, w, h, tl, tr, br, bl) {
+  const maxR = Math.min(w, h) / 2;
+  tl = Math.min(tl, maxR);
+  tr = Math.min(tr, maxR);
+  br = Math.min(br, maxR);
+  bl = Math.min(bl, maxR);
+  ctx.moveTo(x + tl, y);
+  ctx.lineTo(x + w - tr, y);
+  if (tr > 0) ctx.arcTo(x + w, y, x + w, y + tr, tr);
+  ctx.lineTo(x + w, y + h - br);
+  if (br > 0) ctx.arcTo(x + w, y + h, x + w - br, y + h, br);
+  ctx.lineTo(x + bl, y + h);
+  if (bl > 0) ctx.arcTo(x, y + h, x, y + h - bl, bl);
+  ctx.lineTo(x, y + tl);
+  if (tl > 0) ctx.arcTo(x, y, x + tl, y, tl);
+  ctx.closePath();
+}
+function hasRadius(r) {
+  return r.topLeft > 0 || r.topRight > 0 || r.bottomRight > 0 || r.bottomLeft > 0;
+}
+
+// src/jsx/draw/gradient.ts
+function createGradientFromCSS(ctx, cssGradient, x, y, width, height) {
+  const trimmed = cssGradient.trim();
+  if (trimmed.startsWith("linear-gradient")) {
+    return parseLinearGradient(ctx, trimmed, x, y, width, height);
+  }
+  if (trimmed.startsWith("radial-gradient")) {
+    return parseRadialGradient(ctx, trimmed, x, y, width, height);
+  }
+  return null;
+}
+function parseLinearGradient(ctx, css, x, y, width, height) {
+  const match = css.match(/linear-gradient\((.*)\)/s);
+  if (!match) return null;
+  const content = match[1].trim();
+  const parts = splitGradientArgs(content);
+  let angle = 180;
+  let colorStartIdx = 0;
+  const first = parts[0]?.trim();
+  if (first) {
+    if (first.startsWith("to ")) {
+      angle = directionToAngle(first);
+      colorStartIdx = 1;
+    } else if (first.endsWith("deg")) {
+      angle = parseFloat(first);
+      colorStartIdx = 1;
+    } else if (first.endsWith("turn")) {
+      angle = parseFloat(first) * 360;
+      colorStartIdx = 1;
+    }
+  }
+  const rad = (angle - 90) * Math.PI / 180;
+  const cx = x + width / 2;
+  const cy = y + height / 2;
+  const halfDiag = Math.abs(width * Math.cos(rad)) / 2 + Math.abs(height * Math.sin(rad)) / 2;
+  const x0 = cx - halfDiag * Math.cos(rad);
+  const y0 = cy - halfDiag * Math.sin(rad);
+  const x1 = cx + halfDiag * Math.cos(rad);
+  const y1 = cy + halfDiag * Math.sin(rad);
+  const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+  const stops = parts.slice(colorStartIdx);
+  addColorStops(gradient, stops);
+  return gradient;
+}
+function parseRadialGradient(ctx, css, x, y, width, height) {
+  const match = css.match(/radial-gradient\((.*)\)/s);
+  if (!match) return null;
+  const content = match[1].trim();
+  const parts = splitGradientArgs(content);
+  const cx = x + width / 2;
+  const cy = y + height / 2;
+  const radius = Math.max(width, height) / 2;
+  const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius);
+  let colorStartIdx = 0;
+  const first = parts[0]?.trim() ?? "";
+  if (first.startsWith("circle") || first.startsWith("ellipse") || first.startsWith("closest") || first.startsWith("farthest")) {
+    colorStartIdx = 1;
+  }
+  addColorStops(gradient, parts.slice(colorStartIdx));
+  return gradient;
+}
+function addColorStops(gradient, stops) {
+  if (stops.length === 0) return;
+  for (let i = 0; i < stops.length; i++) {
+    const stop = stops[i].trim();
+    const percentMatch = stop.match(/^(.+?)\s+(\d+(?:\.\d+)?%?)$/);
+    if (percentMatch) {
+      const color = percentMatch[1];
+      const pos = percentMatch[2];
+      const offset = pos.endsWith("%") ? parseFloat(pos) / 100 : parseFloat(pos);
+      gradient.addColorStop(Math.max(0, Math.min(1, offset)), color);
+    } else {
+      const offset = stops.length === 1 ? 0.5 : i / (stops.length - 1);
+      gradient.addColorStop(offset, stop);
+    }
+  }
+}
+function directionToAngle(dir) {
+  const map = {
+    "to top": 0,
+    "to right": 90,
+    "to bottom": 180,
+    "to left": 270,
+    "to top right": 45,
+    "to top left": 315,
+    "to bottom right": 135,
+    "to bottom left": 225
+  };
+  return map[dir] ?? 180;
+}
+function splitGradientArgs(content) {
+  const parts = [];
+  let current = "";
+  let parenDepth = 0;
+  for (const char of content) {
+    if (char === "(") parenDepth++;
+    if (char === ")") parenDepth--;
+    if (char === "," && parenDepth === 0) {
+      parts.push(current);
+      current = "";
+    } else {
+      current += char;
+    }
+  }
+  if (current.trim()) parts.push(current);
+  return parts;
+}
+
+// src/jsx/draw/image.ts
+import { loadImage } from "@napi-rs/canvas";
+
+// src/jsx/draw/object-fit.ts
+function computeCover(imgW, imgH, boxX, boxY, boxW, boxH) {
+  const imgRatio = imgW / imgH;
+  const boxRatio = boxW / boxH;
+  let sx, sy, sw, sh;
+  if (imgRatio > boxRatio) {
+    sh = imgH;
+    sw = imgH * boxRatio;
+    sx = (imgW - sw) / 2;
+    sy = 0;
+  } else {
+    sw = imgW;
+    sh = imgW / boxRatio;
+    sx = 0;
+    sy = (imgH - sh) / 2;
+  }
+  return { sx, sy, sw, sh, dx: boxX, dy: boxY, dw: boxW, dh: boxH };
+}
+function computeContain(imgW, imgH, boxX, boxY, boxW, boxH) {
+  const imgRatio = imgW / imgH;
+  const boxRatio = boxW / boxH;
+  let dw, dh;
+  if (imgRatio > boxRatio) {
+    dw = boxW;
+    dh = boxW / imgRatio;
+  } else {
+    dh = boxH;
+    dw = boxH * imgRatio;
+  }
+  const dx = boxX + (boxW - dw) / 2;
+  const dy = boxY + (boxH - dh) / 2;
+  return { sx: 0, sy: 0, sw: imgW, sh: imgH, dx, dy, dw, dh };
+}
+
+// src/jsx/draw/image.ts
+async function drawImage(ctx, src, x, y, width, height, style) {
+  const image = await loadImage(src);
+  const objectFit = style?.objectFit ?? "fill";
+  if (objectFit === "fill") {
+    ctx.drawImage(image, x, y, width, height);
+    return;
+  }
+  const imgW = image.width;
+  const imgH = image.height;
+  if (objectFit === "contain") {
+    const r = computeContain(imgW, imgH, x, y, width, height);
+    ctx.drawImage(image, r.dx, r.dy, r.dw, r.dh);
+  } else if (objectFit === "cover") {
+    const r = computeCover(imgW, imgH, x, y, width, height);
+    ctx.drawImage(image, r.sx, r.sy, r.sw, r.sh, r.dx, r.dy, r.dw, r.dh);
+  } else if (objectFit === "none") {
+    const dx = x + (width - imgW) / 2;
+    const dy = y + (height - imgH) / 2;
+    ctx.drawImage(image, dx, dy);
+  } else if (objectFit === "scale-down") {
+    if (imgW <= width && imgH <= height) {
+      const dx = x + (width - imgW) / 2;
+      const dy = y + (height - imgH) / 2;
+      ctx.drawImage(image, dx, dy);
+    } else {
+      const r = computeContain(imgW, imgH, x, y, width, height);
+      ctx.drawImage(image, r.dx, r.dy, r.dw, r.dh);
+    }
+  }
+}
+
+// src/jsx/draw/rect.ts
+function drawRect(ctx, x, y, width, height, style) {
+  const borderRadius = getBorderRadius(style);
+  const hasRoundedCorners = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
+  if (style.boxShadow) {
+    drawBoxShadow(ctx, x, y, width, height, style.boxShadow, borderRadius);
+  }
+  if (style.backgroundColor) {
+    ctx.fillStyle = style.backgroundColor;
+    if (hasRoundedCorners) {
+      ctx.beginPath();
+      roundedRect(
+        ctx,
+        x,
+        y,
+        width,
+        height,
+        borderRadius.topLeft,
+        borderRadius.topRight,
+        borderRadius.bottomRight,
+        borderRadius.bottomLeft
+      );
+      ctx.fill();
+    } else {
+      ctx.fillRect(x, y, width, height);
+    }
+  }
+  drawBorders(ctx, x, y, width, height, style, borderRadius);
+}
+function getBorderRadius(style) {
+  return {
+    topLeft: toNumber(style.borderTopLeftRadius),
+    topRight: toNumber(style.borderTopRightRadius),
+    bottomRight: toNumber(style.borderBottomRightRadius),
+    bottomLeft: toNumber(style.borderBottomLeftRadius)
+  };
+}
+function getBorderRadiusFromStyle(style) {
+  return getBorderRadius(style);
+}
+function drawBorders(ctx, x, y, width, height, style, borderRadius) {
+  const hasRoundedCorners = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
+  const tw = toNumber(style.borderTopWidth);
+  const rw = toNumber(style.borderRightWidth);
+  const bw = toNumber(style.borderBottomWidth);
+  const lw = toNumber(style.borderLeftWidth);
+  if (tw === 0 && rw === 0 && bw === 0 && lw === 0) return;
+  const allSameWidth = tw === rw && rw === bw && bw === lw && tw > 0;
+  const tc = style.borderTopColor ?? "black";
+  const rc = style.borderRightColor ?? "black";
+  const bc = style.borderBottomColor ?? "black";
+  const lc = style.borderLeftColor ?? "black";
+  const allSameColor = tc === rc && rc === bc && bc === lc;
+  if (allSameWidth && allSameColor) {
+    ctx.strokeStyle = tc;
+    ctx.lineWidth = tw;
+    if (hasRoundedCorners) {
+      ctx.beginPath();
+      const half = tw / 2;
+      roundedRect(
+        ctx,
+        x + half,
+        y + half,
+        width - tw,
+        height - tw,
+        Math.max(0, borderRadius.topLeft - half),
+        Math.max(0, borderRadius.topRight - half),
+        Math.max(0, borderRadius.bottomRight - half),
+        Math.max(0, borderRadius.bottomLeft - half)
+      );
+      ctx.stroke();
+    } else {
+      ctx.strokeRect(x + tw / 2, y + tw / 2, width - tw, height - tw);
+    }
+    return;
+  }
+  if (tw > 0) {
+    ctx.strokeStyle = tc;
+    ctx.lineWidth = tw;
+    ctx.beginPath();
+    ctx.moveTo(x, y + tw / 2);
+    ctx.lineTo(x + width, y + tw / 2);
+    ctx.stroke();
+  }
+  if (rw > 0) {
+    ctx.strokeStyle = rc;
+    ctx.lineWidth = rw;
+    ctx.beginPath();
+    ctx.moveTo(x + width - rw / 2, y);
+    ctx.lineTo(x + width - rw / 2, y + height);
+    ctx.stroke();
+  }
+  if (bw > 0) {
+    ctx.strokeStyle = bc;
+    ctx.lineWidth = bw;
+    ctx.beginPath();
+    ctx.moveTo(x, y + height - bw / 2);
+    ctx.lineTo(x + width, y + height - bw / 2);
+    ctx.stroke();
+  }
+  if (lw > 0) {
+    ctx.strokeStyle = lc;
+    ctx.lineWidth = lw;
+    ctx.beginPath();
+    ctx.moveTo(x + lw / 2, y);
+    ctx.lineTo(x + lw / 2, y + height);
+    ctx.stroke();
+  }
+}
+function drawBoxShadow(ctx, x, y, width, height, boxShadow, borderRadius) {
+  const parts = boxShadow.match(
+    /(-?\d+(?:\.\d+)?)\s*(?:px)?\s+(-?\d+(?:\.\d+)?)\s*(?:px)?\s+(-?\d+(?:\.\d+)?)\s*(?:px)?(?:\s+(-?\d+(?:\.\d+)?)\s*(?:px)?)?\s+(.*)/
+  );
+  if (!parts) return;
+  const offsetX = parseFloat(parts[1]);
+  const offsetY = parseFloat(parts[2]);
+  const blur = parseFloat(parts[3]);
+  const color = parts[5].trim();
+  const radii = [
+    borderRadius.topLeft,
+    borderRadius.topRight,
+    borderRadius.bottomRight,
+    borderRadius.bottomLeft
+  ];
+  const margin = blur * 2 + Math.abs(offsetX) + Math.abs(offsetY);
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(x - margin, y - margin, width + margin * 2, height + margin * 2);
+  ctx.roundRect(x, y, width, height, radii);
+  ctx.clip("evenodd");
+  ctx.filter = `blur(${blur / 2}px)`;
+  ctx.translate(offsetX, offsetY);
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.roundRect(x, y, width, height, radii);
+  ctx.fill();
+  ctx.restore();
+}
+function toNumber(v) {
+  if (typeof v === "number") return v;
+  if (v === void 0 || v === null) return 0;
+  const n = parseFloat(String(v));
+  return isNaN(n) ? 0 : n;
+}
+
+// src/jsx/draw/svg.ts
+import { Path2D } from "@napi-rs/canvas";
+function drawSvgContainer(ctx, node, x, y, width, height) {
+  ctx.save();
+  ctx.translate(x, y);
+  const viewBox = node.props.viewBox;
+  if (viewBox) {
+    const parts = viewBox.split(/[\s,]+/).map(Number);
+    if (parts.length === 4) {
+      const [vbX, vbY, vbW, vbH] = parts;
+      const scaleX = width / vbW;
+      const scaleY = height / vbH;
+      ctx.scale(scaleX, scaleY);
+      ctx.translate(-vbX, -vbY);
+    }
+  }
+  const inheritedFill = node.props.fill ?? "black";
+  const children = node.props.children;
+  if (children != null) {
+    const childArray = Array.isArray(children) ? children : [children];
+    for (const child of childArray) {
+      if (child != null && typeof child === "object") {
+        drawSvgChild(ctx, child, inheritedFill);
+      }
+    }
+  }
+  ctx.restore();
+}
+function drawSvgChild(ctx, child, inheritedFill) {
+  const { type, props } = child;
+  switch (type) {
+    case "path":
+      drawPath(ctx, props, inheritedFill);
+      break;
+    case "circle":
+      drawCircle(ctx, props, inheritedFill);
+      break;
+    case "rect":
+      drawSvgRect(ctx, props, inheritedFill);
+      break;
+    case "line":
+      drawLine(ctx, props);
+      break;
+    case "ellipse":
+      drawEllipse(ctx, props, inheritedFill);
+      break;
+    case "polygon":
+      drawPolygon(ctx, props, inheritedFill);
+      break;
+    case "polyline":
+      drawPolyline(ctx, props, inheritedFill);
+      break;
+    case "g":
+      drawGroup(ctx, child, inheritedFill);
+      break;
+  }
+}
+function drawPath(ctx, props, inheritedFill) {
+  const d = props.d;
+  if (!d) return;
+  const path = new Path2D(d);
+  applyFillAndStroke(ctx, props, path, inheritedFill);
+}
+function drawCircle(ctx, props, inheritedFill) {
+  const cx = Number(props.cx ?? 0);
+  const cy = Number(props.cy ?? 0);
+  const r = Number(props.r ?? 0);
+  if (r <= 0) return;
+  const path = new Path2D();
+  path.arc(cx, cy, r, 0, Math.PI * 2);
+  applyFillAndStroke(ctx, props, path, inheritedFill);
+}
+function drawSvgRect(ctx, props, inheritedFill) {
+  const rx = Number(props.x ?? 0);
+  const ry = Number(props.y ?? 0);
+  const w = Number(props.width ?? 0);
+  const h = Number(props.height ?? 0);
+  if (w <= 0 || h <= 0) return;
+  const path = new Path2D();
+  path.rect(rx, ry, w, h);
+  applyFillAndStroke(ctx, props, path, inheritedFill);
+}
+function drawLine(ctx, props) {
+  const x1 = Number(props.x1 ?? 0);
+  const y1 = Number(props.y1 ?? 0);
+  const x2 = Number(props.x2 ?? 0);
+  const y2 = Number(props.y2 ?? 0);
+  const path = new Path2D();
+  path.moveTo(x1, y1);
+  path.lineTo(x2, y2);
+  applyStroke(ctx, props, path);
+}
+function drawEllipse(ctx, props, inheritedFill) {
+  const cx = Number(props.cx ?? 0);
+  const cy = Number(props.cy ?? 0);
+  const rx = Number(props.rx ?? 0);
+  const ry = Number(props.ry ?? 0);
+  if (rx <= 0 || ry <= 0) return;
+  const path = new Path2D();
+  path.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+  applyFillAndStroke(ctx, props, path, inheritedFill);
+}
+function drawPolygon(ctx, props, inheritedFill) {
+  const points = parsePoints(props.points);
+  if (points.length < 2) return;
+  const path = new Path2D();
+  path.moveTo(points[0][0], points[0][1]);
+  for (let i = 1; i < points.length; i++) {
+    path.lineTo(points[i][0], points[i][1]);
+  }
+  path.closePath();
+  applyFillAndStroke(ctx, props, path, inheritedFill);
+}
+function drawPolyline(ctx, props, inheritedFill) {
+  const points = parsePoints(props.points);
+  if (points.length < 2) return;
+  const path = new Path2D();
+  path.moveTo(points[0][0], points[0][1]);
+  for (let i = 1; i < points.length; i++) {
+    path.lineTo(points[i][0], points[i][1]);
+  }
+  applyFillAndStroke(ctx, props, path, inheritedFill);
+}
+function drawGroup(ctx, node, inheritedFill) {
+  const children = node.children ?? node.props.children;
+  if (children == null) return;
+  const groupFill = node.props.fill ?? inheritedFill;
+  const childArray = Array.isArray(children) ? children : [children];
+  for (const child of childArray) {
+    if (child != null && typeof child === "object") {
+      drawSvgChild(ctx, child, groupFill);
+    }
+  }
+}
+function parsePoints(value) {
+  if (!value) return [];
+  const nums = value.trim().split(/[\s,]+/).map(Number);
+  const result = [];
+  for (let i = 0; i + 1 < nums.length; i += 2) {
+    result.push([nums[i], nums[i + 1]]);
+  }
+  return result;
+}
+function applyFillAndStroke(ctx, props, path, inheritedFill) {
+  const fill = props.fill ?? inheritedFill;
+  if (fill !== "none") {
+    ctx.fillStyle = fill;
+    ctx.fill(path);
+  }
+  applyStroke(ctx, props, path);
+}
+function applyStroke(ctx, props, path) {
+  const stroke = props.stroke;
+  if (!stroke || stroke === "none") return;
+  ctx.strokeStyle = stroke;
+  ctx.lineWidth = Number(props.strokeWidth ?? 1);
+  ctx.lineCap = props.strokeLinecap ?? "butt";
+  ctx.lineJoin = props.strokeLinejoin ?? "miter";
+  ctx.stroke(path);
+}
+
+// src/jsx/draw/text.ts
+import { loadImage as loadImage2 } from "@napi-rs/canvas";
+
+// src/jsx/emoji.ts
+var emojiApis = {
+  twemoji: (code) => `https://cdnjs.cloudflare.com/ajax/libs/twemoji/16.0.1/svg/${code.toLowerCase()}.svg`,
+  openmoji: "https://cdn.jsdelivr.net/npm/@svgmoji/openmoji@2.0.0/svg/",
+  blobmoji: "https://cdn.jsdelivr.net/npm/@svgmoji/blob@2.0.0/svg/",
+  noto: "https://cdn.jsdelivr.net/gh/svgmoji/svgmoji/packages/svgmoji__noto/svg/",
+  fluent: (code) => `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${code.toLowerCase()}_color.svg`,
+  fluentFlat: (code) => `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${code.toLowerCase()}_flat.svg`
+};
+var U200D = String.fromCharCode(8205);
+var UFE0Fg = /\uFE0F/g;
+function getEmojiCode(char) {
+  return toCodePoint(char.indexOf(U200D) < 0 ? char.replace(UFE0Fg, "") : char);
+}
+function toCodePoint(unicodeSurrogates) {
+  const r = [];
+  let c = 0, p = 0, i = 0;
+  while (i < unicodeSurrogates.length) {
+    c = unicodeSurrogates.charCodeAt(i++);
+    if (p) {
+      r.push((65536 + (p - 55296 << 10) + (c - 56320)).toString(16));
+      p = 0;
+    } else if (55296 <= c && c <= 56319) {
+      p = c;
+    } else {
+      r.push(c.toString(16));
+    }
+  }
+  return r.join("-");
+}
+var emojiCache = {};
+async function loadEmoji(type, code) {
+  const key = type + ":" + code;
+  if (key in emojiCache) return emojiCache[key];
+  const api = emojiApis[type];
+  if (typeof api === "function") {
+    return emojiCache[key] = fetch(api(code)).then((r) => r.text());
+  }
+  return emojiCache[key] = fetch(`${api}${code.toUpperCase()}.svg`).then(
+    (r) => r.text()
+  );
+}
+
+// src/jsx/text/emoji-split.ts
+function splitTextIntoRuns(text, measureText2, emojiSize) {
+  const runs = [];
+  const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+  let currentText = "";
+  let currentX = 0;
+  let textStartX = 0;
+  for (const { segment } of segmenter.segment(text)) {
+    if (isEmojiGrapheme(segment)) {
+      if (currentText) {
+        const textWidth = measureText2(currentText);
+        runs.push({
+          kind: "text",
+          text: currentText,
+          x: textStartX,
+          width: textWidth
+        });
+        currentX = textStartX + textWidth;
+        currentText = "";
+      }
+      runs.push({
+        kind: "emoji",
+        char: segment,
+        x: currentX,
+        width: emojiSize
+      });
+      currentX += emojiSize;
+      textStartX = currentX;
+    } else {
+      if (!currentText) textStartX = currentX;
+      currentText += segment;
+    }
+  }
+  if (currentText) {
+    const textWidth = measureText2(currentText);
+    runs.push({
+      kind: "text",
+      text: currentText,
+      x: textStartX,
+      width: textWidth
+    });
+  }
+  return runs;
+}
+function isEmojiGrapheme(grapheme) {
+  for (const char of grapheme) {
+    if (isEmoji(char)) return true;
+  }
+  return false;
+}
+
+// src/jsx/draw/text.ts
+var emojiImageCache = /* @__PURE__ */ new Map();
+function loadEmojiImage(style, char) {
+  const code = getEmojiCode(char);
+  const key = style + ":" + code;
+  let cached = emojiImageCache.get(key);
+  if (!cached) {
+    cached = loadEmoji(style, code).then((svgText) => {
+      if (!svgText || !svgText.includes("<svg")) return null;
+      const dataUri = "data:image/svg+xml;base64," + Buffer.from(svgText).toString("base64");
+      return loadImage2(dataUri);
+    }).catch(() => null);
+    emojiImageCache.set(key, cached);
+  }
+  return cached;
+}
+async function drawText(ctx, segments, offsetX, offsetY, textShadow, emojiStyle) {
+  for (const seg of segments) {
+    if (!seg.text) continue;
+    setFont(ctx, seg.fontSize, seg.fontFamily, seg.fontWeight, seg.fontStyle);
+    ctx.fillStyle = seg.color;
+    const x = offsetX + seg.x;
+    const y = offsetY + seg.y;
+    if (emojiStyle) {
+      await drawSegmentWithEmoji(ctx, seg, x, y, textShadow, emojiStyle);
+    } else if (seg.letterSpacing && seg.letterSpacing !== 0) {
+      drawTextWithLetterSpacing(ctx, seg.text, x, y, seg.letterSpacing);
+    } else {
+      if (textShadow) {
+        drawTextShadow(ctx, seg.text, x, y, textShadow);
+      }
+      ctx.fillText(seg.text, x, y);
+    }
+    if (seg.textDecoration) {
+      drawTextDecoration(ctx, seg, offsetX, offsetY);
+    }
+  }
+}
+async function drawSegmentWithEmoji(ctx, seg, x, y, textShadow, emojiStyle) {
+  const runs = splitTextIntoRuns(
+    seg.text,
+    (text) => {
+      setFont(ctx, seg.fontSize, seg.fontFamily, seg.fontWeight, seg.fontStyle);
+      return ctx.measureText(text).width;
+    },
+    seg.fontSize
+  );
+  for (const run of runs) {
+    if (run.kind === "text") {
+      if (textShadow) {
+        drawTextShadow(ctx, run.text, x + run.x, y, textShadow);
+      }
+      ctx.fillText(run.text, x + run.x, y);
+    } else {
+      const img = await loadEmojiImage(emojiStyle, run.char);
+      if (img) {
+        const emojiSize = seg.fontSize;
+        const emojiY = y - seg.ascent + (seg.height - seg.fontSize) / 2;
+        ctx.drawImage(img, x + run.x, emojiY, emojiSize, emojiSize);
+      } else {
+        ctx.fillText(run.char, x + run.x, y);
+      }
+    }
+  }
+}
+function drawTextWithLetterSpacing(ctx, text, x, y, letterSpacing) {
+  let currentX = x;
+  for (const char of text) {
+    ctx.fillText(char, currentX, y);
+    const metrics = ctx.measureText(char);
+    currentX += metrics.width + letterSpacing;
+  }
+}
+function drawTextShadow(ctx, text, x, y, shadow) {
+  const parts = shadow.match(
+    /(-?\d+(?:\.\d+)?)\s*px?\s+(-?\d+(?:\.\d+)?)\s*px?\s+(-?\d+(?:\.\d+)?)\s*px?\s+(.*)/
+  );
+  if (!parts) return;
+  ctx.save();
+  ctx.shadowOffsetX = parseFloat(parts[1]);
+  ctx.shadowOffsetY = parseFloat(parts[2]);
+  ctx.shadowBlur = parseFloat(parts[3]);
+  ctx.shadowColor = parts[4].trim();
+  ctx.fillText(text, x, y);
+  ctx.restore();
+}
+function drawTextDecoration(ctx, seg, offsetX, offsetY) {
+  const decoration = seg.textDecoration;
+  if (!decoration || decoration === "none") return;
+  ctx.strokeStyle = seg.color;
+  ctx.lineWidth = Math.max(1, seg.fontSize * 0.1);
+  const x = offsetX + seg.x;
+  const baseY = offsetY + seg.y;
+  if (decoration.includes("underline")) {
+    const y = baseY + seg.ascent * 0.1;
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + seg.width, y);
+    ctx.stroke();
+  }
+  if (decoration.includes("line-through")) {
+    const y = baseY - seg.fontSize * 0.3;
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + seg.width, y);
+    ctx.stroke();
+  }
+  if (decoration.includes("overline")) {
+    const y = baseY - seg.fontSize * 0.85;
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + seg.width, y);
+    ctx.stroke();
+  }
+}
+
+// src/jsx/draw/index.ts
+async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
+  const x = parentX + node.x;
+  const y = parentY + node.y;
+  const { width, height, style } = node;
+  if (style.display === "none") return;
+  const opacity = style.opacity ?? 1;
+  if (opacity <= 0) return;
+  ctx.save();
+  if (opacity < 1) {
+    ctx.globalAlpha *= opacity;
+  }
+  if (style.filter) {
+    ctx.filter = style.filter;
+  }
+  if (style.transform) {
+    applyTransform(
+      ctx,
+      style.transform,
+      x,
+      y,
+      width,
+      height,
+      style.transformOrigin
+    );
+  }
+  const isClipped = style.overflow === "hidden" || style.overflowX === "hidden" || style.overflowY === "hidden";
+  if (isClipped) {
+    const borderRadius = getBorderRadiusFromStyle(style);
+    applyClip(ctx, x, y, width, height, borderRadius);
+  }
+  if (style.backgroundColor || style.borderTopWidth || style.borderRightWidth || style.borderBottomWidth || style.borderLeftWidth || style.boxShadow) {
+    drawRect(ctx, x, y, width, height, style);
+  }
+  if (style.backgroundImage) {
+    const gradient = createGradientFromCSS(
+      ctx,
+      style.backgroundImage,
+      x,
+      y,
+      width,
+      height
+    );
+    if (gradient) {
+      ctx.fillStyle = gradient;
+      const borderRadius = getBorderRadiusFromStyle(style);
+      if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
+        ctx.beginPath();
+        roundedRect(
+          ctx,
+          x,
+          y,
+          width,
+          height,
+          borderRadius.topLeft,
+          borderRadius.topRight,
+          borderRadius.bottomRight,
+          borderRadius.bottomLeft
+        );
+        ctx.fill();
+      } else {
+        ctx.fillRect(x, y, width, height);
+      }
+    } else {
+      const urlMatch = style.backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+      if (urlMatch) {
+        const borderRadius = getBorderRadiusFromStyle(style);
+        const hasRadius2 = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
+        if (hasRadius2) {
+          applyClip(ctx, x, y, width, height, borderRadius);
+        }
+        const image = await loadImage3(urlMatch[1]);
+        const bgSize = style.backgroundSize;
+        if (bgSize === "cover") {
+          const r = computeCover(
+            image.width,
+            image.height,
+            x,
+            y,
+            width,
+            height
+          );
+          ctx.drawImage(image, r.sx, r.sy, r.sw, r.sh, r.dx, r.dy, r.dw, r.dh);
+        } else {
+          let tileW, tileH;
+          if (bgSize === "contain") {
+            const r = computeContain(
+              image.width,
+              image.height,
+              0,
+              0,
+              width,
+              height
+            );
+            tileW = r.dw;
+            tileH = r.dh;
+          } else if (bgSize === "100% 100%") {
+            tileW = width;
+            tileH = height;
+          } else {
+            tileW = image.width;
+            tileH = image.height;
+          }
+          for (let ty = y; ty < y + height; ty += tileH) {
+            for (let tx = x; tx < x + width; tx += tileW) {
+              ctx.drawImage(image, tx, ty, tileW, tileH);
+            }
+          }
+        }
+      }
+    }
+  }
+  if (debug) {
+    ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
+    ctx.lineWidth = 1;
+    ctx.strokeRect(x, y, width, height);
+  }
+  if (node.textContent !== void 0 && node.textContent !== "") {
+    const paddingTop = toNumber2(style.paddingTop);
+    const paddingLeft = toNumber2(style.paddingLeft);
+    const paddingRight = toNumber2(style.paddingRight);
+    const borderTopW = toNumber2(style.borderTopWidth);
+    const borderLeftW = toNumber2(style.borderLeftWidth);
+    const borderRightW = toNumber2(style.borderRightWidth);
+    const contentX = x + paddingLeft + borderLeftW;
+    const contentY = y + paddingTop + borderTopW;
+    const contentWidth = width - paddingLeft - paddingRight - borderLeftW - borderRightW;
+    const textLayout = layoutText(
+      node.textContent,
+      style,
+      contentWidth,
+      ctx,
+      !!emojiStyle
+    );
+    await drawText(
+      ctx,
+      textLayout.segments,
+      contentX,
+      contentY,
+      style.textShadow,
+      emojiStyle
+    );
+  }
+  if (node.type === "img" && node.props.src) {
+    const paddingTop = toNumber2(style.paddingTop);
+    const paddingLeft = toNumber2(style.paddingLeft);
+    const paddingRight = toNumber2(style.paddingRight);
+    const paddingBottom = toNumber2(style.paddingBottom);
+    const imgX = x + paddingLeft;
+    const imgY = y + paddingTop;
+    const imgW = width - paddingLeft - paddingRight;
+    const imgH = height - paddingTop - paddingBottom;
+    if (!isClipped) {
+      const borderRadius = getBorderRadiusFromStyle(style);
+      if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
+        applyClip(ctx, imgX, imgY, imgW, imgH, borderRadius);
+      }
+    }
+    await drawImage(
+      ctx,
+      node.props.src,
+      imgX,
+      imgY,
+      imgW,
+      imgH,
+      style
+    );
+  }
+  if (node.type === "svg") {
+    drawSvgContainer(ctx, node, x, y, width, height);
+  } else {
+    for (const child of node.children) {
+      await drawNode(ctx, child, x, y, debug, emojiStyle);
+    }
+  }
+  ctx.restore();
+}
+function applyTransform(ctx, transform, x, y, width, height, transformOrigin) {
+  let ox = x + width / 2;
+  let oy = y + height / 2;
+  if (transformOrigin) {
+    const parts = transformOrigin.split(/\s+/);
+    ox = resolveOrigin(parts[0], x, width);
+    oy = resolveOrigin(parts[1], y, height);
+  }
+  ctx.translate(ox, oy);
+  const funcs = transform.matchAll(/(\w+)\(([^)]+)\)/g);
+  for (const [, name, args] of funcs) {
+    const values = args.split(",").map((s) => s.trim());
+    switch (name) {
+      case "translate":
+      case "translateX":
+      case "translateY": {
+        const tx = name === "translateY" ? 0 : parseFloat(values[0]);
+        const ty = name === "translateX" ? 0 : parseFloat(values[name === "translate" ? 1 : 0] ?? "0");
+        ctx.translate(tx, ty);
+        break;
+      }
+      case "scale":
+      case "scaleX":
+      case "scaleY": {
+        const sx = name === "scaleY" ? 1 : parseFloat(values[0]);
+        const sy = name === "scaleX" ? 1 : parseFloat(values[name === "scale" ? 1 : 0] ?? String(sx));
+        ctx.scale(sx, sy);
+        break;
+      }
+      case "rotate": {
+        const angle = parseAngle(values[0]);
+        ctx.rotate(angle);
+        break;
+      }
+      case "skewX": {
+        const angle = parseAngle(values[0]);
+        ctx.transform(1, 0, Math.tan(angle), 1, 0, 0);
+        break;
+      }
+      case "skewY": {
+        const angle = parseAngle(values[0]);
+        ctx.transform(1, Math.tan(angle), 0, 1, 0, 0);
+        break;
+      }
+    }
+  }
+  ctx.translate(-ox, -oy);
+}
+function resolveOrigin(value, base, size) {
+  if (!value) return base + size / 2;
+  if (value === "left" || value === "top") return base;
+  if (value === "right" || value === "bottom") return base + size;
+  if (value === "center") return base + size / 2;
+  if (value.endsWith("%")) return base + parseFloat(value) / 100 * size;
+  return base + parseFloat(value);
+}
+function parseAngle(value) {
+  if (value.endsWith("deg")) return parseFloat(value) * Math.PI / 180;
+  if (value.endsWith("rad")) return parseFloat(value);
+  if (value.endsWith("turn")) return parseFloat(value) * 2 * Math.PI;
+  return parseFloat(value);
+}
+function toNumber2(v) {
+  if (typeof v === "number") return v;
+  if (v === void 0 || v === null) return 0;
+  const n = parseFloat(String(v));
+  return isNaN(n) ? 0 : n;
+}
+
+// src/jsx/font.ts
+import { GlobalFonts } from "@napi-rs/canvas";
+var registeredFonts = /* @__PURE__ */ new Set();
+function registerFont(font) {
+  const key = `${font.name}:${font.weight}:${font.style}`;
+  if (registeredFonts.has(key)) return;
+  const buffer = Buffer.isBuffer(font.data) ? font.data : Buffer.from(font.data);
+  GlobalFonts.register(buffer, font.name);
+  registeredFonts.add(key);
+}
+function registerFontFromPath(path, nameAlias) {
+  GlobalFonts.registerFromPath(path, nameAlias ?? "");
+}
+function registeredFamilies() {
+  return GlobalFonts.families.map((f) => f.family);
+}
+function ensureFontsRegistered(fonts) {
+  for (const font of fonts) {
+    registerFont(font);
+  }
+}
+
+// src/jsx/style/expand.ts
+var SIDES = ["Top", "Right", "Bottom", "Left"];
+function parseSides(value) {
+  const parts = value.toString().split(/\s+/).filter(Boolean);
+  switch (parts.length) {
+    case 1:
+      return [parts[0], parts[0], parts[0], parts[0]];
+    case 2:
+      return [parts[0], parts[1], parts[0], parts[1]];
+    case 3:
+      return [parts[0], parts[1], parts[2], parts[1]];
+    default:
+      return [parts[0], parts[1], parts[2], parts[3]];
+  }
+}
+function parseValue(v) {
+  if (v === void 0 || v === null) return void 0;
+  const s = String(v);
+  if (s === "auto") return "auto";
+  const n = parseFloat(s);
+  if (!isNaN(n)) return n;
+  return s;
+}
+function expandStyle(raw) {
+  const style = { ...raw };
+  if (style.margin !== void 0) {
+    const sides = parseSides(String(style.margin));
+    for (let i = 0; i < 4; i++) {
+      const key = `margin${SIDES[i]}`;
+      if (style[key] === void 0) style[key] = parseValue(sides[i]);
+    }
+    delete style.margin;
+  }
+  if (style.padding !== void 0) {
+    const sides = parseSides(String(style.padding));
+    for (let i = 0; i < 4; i++) {
+      const key = `padding${SIDES[i]}`;
+      if (style[key] === void 0) style[key] = parseValue(sides[i]);
+    }
+    delete style.padding;
+  }
+  if (style.borderRadius !== void 0) {
+    const sides = parseSides(String(style.borderRadius));
+    const corners = [
+      "borderTopLeftRadius",
+      "borderTopRightRadius",
+      "borderBottomRightRadius",
+      "borderBottomLeftRadius"
+    ];
+    for (let i = 0; i < 4; i++) {
+      if (style[corners[i]] === void 0)
+        style[corners[i]] = parseValue(sides[i]);
+    }
+    delete style.borderRadius;
+  }
+  if (style.borderWidth !== void 0) {
+    const sides = parseSides(String(style.borderWidth));
+    for (let i = 0; i < 4; i++) {
+      const key = `border${SIDES[i]}Width`;
+      if (style[key] === void 0) style[key] = parseValue(sides[i]);
+    }
+    delete style.borderWidth;
+  }
+  if (style.borderColor !== void 0) {
+    const val = style.borderColor;
+    for (const side of SIDES) {
+      const key = `border${side}Color`;
+      if (style[key] === void 0) style[key] = val;
+    }
+    delete style.borderColor;
+  }
+  if (style.borderStyle !== void 0) {
+    const val = style.borderStyle;
+    for (const side of SIDES) {
+      const key = `border${side}Style`;
+      if (style[key] === void 0) style[key] = val;
+    }
+    delete style.borderStyle;
+  }
+  if (style.border !== void 0) {
+    const parts = String(style.border).split(/\s+/);
+    const width = parseValue(parts[0]);
+    const borderStyle = parts[1] ?? "solid";
+    const color = parts[2] ?? "black";
+    for (const side of SIDES) {
+      if (style[`border${side}Width`] === void 0)
+        style[`border${side}Width`] = width;
+      if (style[`border${side}Style`] === void 0)
+        style[`border${side}Style`] = borderStyle;
+      if (style[`border${side}Color`] === void 0)
+        style[`border${side}Color`] = color;
+    }
+    delete style.border;
+  }
+  if (style.flex !== void 0) {
+    const val = String(style.flex);
+    const parts = val.split(/\s+/);
+    if (parts.length === 1) {
+      const n = parseFloat(parts[0]);
+      if (!isNaN(n)) {
+        if (style.flexGrow === void 0) style.flexGrow = n;
+        if (style.flexShrink === void 0) style.flexShrink = 1;
+        if (style.flexBasis === void 0) style.flexBasis = 0;
+      }
+    } else if (parts.length === 2) {
+      if (style.flexGrow === void 0) style.flexGrow = parseFloat(parts[0]);
+      if (style.flexShrink === void 0)
+        style.flexShrink = parseFloat(parts[1]);
+    } else if (parts.length >= 3) {
+      if (style.flexGrow === void 0) style.flexGrow = parseFloat(parts[0]);
+      if (style.flexShrink === void 0)
+        style.flexShrink = parseFloat(parts[1]);
+      if (style.flexBasis === void 0) style.flexBasis = parseValue(parts[2]);
+    }
+    delete style.flex;
+  }
+  if (style.gap !== void 0) {
+    const sides = parseSides(String(style.gap));
+    if (style.rowGap === void 0) style.rowGap = parseValue(sides[0]);
+    if (style.columnGap === void 0) style.columnGap = parseValue(sides[1]);
+    delete style.gap;
+  }
+  if (style.background !== void 0) {
+    const bg = String(style.background);
+    if (bg.includes("gradient(") || bg.includes("url(")) {
+      if (style.backgroundImage === void 0) style.backgroundImage = bg;
+    } else {
+      if (style.backgroundColor === void 0) style.backgroundColor = bg;
+    }
+    delete style.background;
+  }
+  if (style.overflow !== void 0) {
+    if (style.overflowX === void 0) style.overflowX = style.overflow;
+    if (style.overflowY === void 0) style.overflowY = style.overflow;
+  }
+  if (typeof style.fontFamily === "string") {
+    style.fontFamily = style.fontFamily.split(",").map((s) => s.trim().replace(/^['"]|['"]$/g, "")).filter(Boolean).join(", ");
+  }
+  return style;
+}
+
+// src/jsx/style/compute.ts
+var DEFAULT_STYLE = {
+  display: "flex",
+  flexDirection: "row",
+  flexWrap: "nowrap",
+  flexGrow: 0,
+  flexShrink: 0,
+  alignItems: "stretch",
+  justifyContent: "flex-start",
+  position: "relative",
+  fontSize: 16,
+  fontWeight: 400,
+  fontStyle: "normal",
+  color: "black",
+  lineHeight: "normal",
+  textAlign: "left",
+  whiteSpace: "normal",
+  wordBreak: "normal",
+  textOverflow: "clip",
+  opacity: 1,
+  overflow: "visible"
+};
+var INHERITABLE_PROPS = [
+  "color",
+  "fontSize",
+  "fontFamily",
+  "fontWeight",
+  "fontStyle",
+  "textAlign",
+  "textTransform",
+  "textDecoration",
+  "lineHeight",
+  "letterSpacing",
+  "whiteSpace",
+  "wordBreak",
+  "textOverflow"
+];
+function resolveStyle(rawStyle, parentStyle) {
+  const style = { ...rawStyle };
+  for (const prop of INHERITABLE_PROPS) {
+    if (style[prop] === void 0 && parentStyle[prop] !== void 0) {
+      style[prop] = parentStyle[prop];
+    }
+  }
+  if (typeof style.fontSize === "string") {
+    const parsed = parseFloat(style.fontSize);
+    style.fontSize = isNaN(parsed) ? parentStyle.fontSize : parsed;
+  }
+  if (typeof style.lineHeight === "string") {
+    const str = style.lineHeight;
+    if (str.endsWith("%")) {
+      style.lineHeight = parseFloat(str) / 100;
+    } else {
+      const parsed = parseFloat(str);
+      if (!isNaN(parsed)) {
+        style.lineHeight = parsed;
+      }
+    }
+  }
+  if (typeof style.letterSpacing === "string") {
+    const parsed = parseFloat(style.letterSpacing);
+    if (!isNaN(parsed)) {
+      style.letterSpacing = parsed;
+    }
+  }
+  return style;
+}
+
+// src/jsx/yoga.ts
+import Yoga, {
+  Align,
+  Display,
+  Edge,
+  FlexDirection,
+  Gutter,
+  Justify,
+  Overflow,
+  PositionType,
+  Wrap
+} from "yoga-layout";
+function createYogaNode() {
+  return Yoga.Node.create();
+}
+function freeYogaNode(node) {
+  node.freeRecursive();
+}
+
+// src/jsx/style/properties.ts
+function applyStylesToYoga(node, style) {
+  if (style.display === "none") {
+    node.setDisplay(Display.None);
+  } else {
+    node.setDisplay(Display.Flex);
+  }
+  {
+    const map = {
+      row: FlexDirection.Row,
+      "row-reverse": FlexDirection.RowReverse,
+      column: FlexDirection.Column,
+      "column-reverse": FlexDirection.ColumnReverse
+    };
+    node.setFlexDirection(
+      map[style.flexDirection ?? "row"] ?? FlexDirection.Row
+    );
+  }
+  if (style.justifyContent) {
+    const map = {
+      "flex-start": Justify.FlexStart,
+      "flex-end": Justify.FlexEnd,
+      center: Justify.Center,
+      "space-between": Justify.SpaceBetween,
+      "space-around": Justify.SpaceAround,
+      "space-evenly": Justify.SpaceEvenly
+    };
+    const jc = map[style.justifyContent];
+    if (jc !== void 0) node.setJustifyContent(jc);
+  }
+  if (style.alignItems) {
+    const map = {
+      "flex-start": Align.FlexStart,
+      "flex-end": Align.FlexEnd,
+      center: Align.Center,
+      stretch: Align.Stretch,
+      baseline: Align.Baseline
+    };
+    const ai = map[style.alignItems];
+    if (ai !== void 0) node.setAlignItems(ai);
+  }
+  if (style.alignSelf) {
+    const map = {
+      auto: Align.Auto,
+      "flex-start": Align.FlexStart,
+      "flex-end": Align.FlexEnd,
+      center: Align.Center,
+      stretch: Align.Stretch,
+      baseline: Align.Baseline
+    };
+    const as_ = map[style.alignSelf];
+    if (as_ !== void 0) node.setAlignSelf(as_);
+  }
+  if (style.alignContent) {
+    const map = {
+      "flex-start": Align.FlexStart,
+      "flex-end": Align.FlexEnd,
+      center: Align.Center,
+      stretch: Align.Stretch,
+      "space-between": Align.SpaceBetween,
+      "space-around": Align.SpaceAround
+    };
+    const ac = map[style.alignContent];
+    if (ac !== void 0) node.setAlignContent(ac);
+  }
+  if (style.flexWrap) {
+    const map = {
+      nowrap: Wrap.NoWrap,
+      wrap: Wrap.Wrap,
+      "wrap-reverse": Wrap.WrapReverse
+    };
+    const fw = map[style.flexWrap];
+    if (fw !== void 0) node.setFlexWrap(fw);
+  }
+  if (style.flexGrow !== void 0) node.setFlexGrow(style.flexGrow);
+  node.setFlexShrink(style.flexShrink ?? 0);
+  if (style.flexBasis !== void 0) {
+    if (typeof style.flexBasis === "number") {
+      node.setFlexBasis(style.flexBasis);
+    } else if (String(style.flexBasis).endsWith("%")) {
+      node.setFlexBasis(String(style.flexBasis));
+    } else if (style.flexBasis === "auto") {
+      node.setFlexBasis("auto");
+    } else {
+      const n = parseFloat(String(style.flexBasis));
+      if (!isNaN(n)) node.setFlexBasis(n);
+    }
+  }
+  applyDimension(node, "setWidth", style.width);
+  applyDimension(node, "setHeight", style.height);
+  applyDimension(node, "setMinWidth", style.minWidth);
+  applyDimension(node, "setMinHeight", style.minHeight);
+  applyDimension(node, "setMaxWidth", style.maxWidth);
+  applyDimension(node, "setMaxHeight", style.maxHeight);
+  if (style.position === "absolute") {
+    node.setPositionType(PositionType.Absolute);
+  } else {
+    node.setPositionType(PositionType.Relative);
+  }
+  applyEdgeValue(node, "setPosition", Edge.Top, style.top);
+  applyEdgeValue(node, "setPosition", Edge.Right, style.right);
+  applyEdgeValue(node, "setPosition", Edge.Bottom, style.bottom);
+  applyEdgeValue(node, "setPosition", Edge.Left, style.left);
+  applyEdgeValue(node, "setMargin", Edge.Top, style.marginTop);
+  applyEdgeValue(node, "setMargin", Edge.Right, style.marginRight);
+  applyEdgeValue(node, "setMargin", Edge.Bottom, style.marginBottom);
+  applyEdgeValue(node, "setMargin", Edge.Left, style.marginLeft);
+  applyEdgeValue(node, "setPadding", Edge.Top, style.paddingTop);
+  applyEdgeValue(node, "setPadding", Edge.Right, style.paddingRight);
+  applyEdgeValue(node, "setPadding", Edge.Bottom, style.paddingBottom);
+  applyEdgeValue(node, "setPadding", Edge.Left, style.paddingLeft);
+  if (style.borderTopWidth !== void 0)
+    node.setBorder(Edge.Top, style.borderTopWidth);
+  if (style.borderRightWidth !== void 0)
+    node.setBorder(Edge.Right, style.borderRightWidth);
+  if (style.borderBottomWidth !== void 0)
+    node.setBorder(Edge.Bottom, style.borderBottomWidth);
+  if (style.borderLeftWidth !== void 0)
+    node.setBorder(Edge.Left, style.borderLeftWidth);
+  if (style.rowGap !== void 0) node.setGap(Gutter.Row, style.rowGap);
+  if (style.columnGap !== void 0)
+    node.setGap(Gutter.Column, style.columnGap);
+  if (style.overflow === "hidden" || style.overflowX === "hidden" || style.overflowY === "hidden") {
+    node.setOverflow(Overflow.Hidden);
+  } else {
+    node.setOverflow(Overflow.Visible);
+  }
+}
+function applyDimension(node, setter, value) {
+  if (value === void 0) return;
+  if (value === "auto") {
+    if (setter === "setWidth" || setter === "setHeight") {
+      node[setter]("auto");
+    }
+    return;
+  }
+  if (typeof value === "number") {
+    node[setter](value);
+    return;
+  }
+  const s = String(value);
+  if (s.endsWith("%")) {
+    node[setter](s);
+  } else {
+    const n = parseFloat(s);
+    if (!isNaN(n)) node[setter](n);
+  }
+}
+function applyEdgeValue(node, setter, edge, value) {
+  if (value === void 0) return;
+  if (value === "auto" && setter === "setMargin") {
+    node.setMargin(edge, "auto");
+    return;
+  }
+  if (typeof value === "number") {
+    node[setter](edge, value);
+    return;
+  }
+  const s = String(value);
+  if (s.endsWith("%")) {
+    node[setter](edge, s);
+  } else {
+    const n = parseFloat(s);
+    if (!isNaN(n)) node[setter](edge, n);
+  }
+}
+
+// src/jsx/layout.ts
+function buildLayoutTree(element, containerWidth, containerHeight, ctx, emojiEnabled) {
+  const rootYogaNode = createYogaNode();
+  const rootNode = buildNode(
+    element,
+    DEFAULT_STYLE,
+    rootYogaNode,
+    ctx,
+    emojiEnabled
+  );
+  rootYogaNode.setWidth(containerWidth);
+  rootYogaNode.setHeight(containerHeight);
+  rootYogaNode.calculateLayout(containerWidth, containerHeight);
+  const layoutTree = extractLayout(rootNode, rootYogaNode);
+  freeYogaNode(rootYogaNode);
+  return layoutTree;
+}
+function buildNode(element, parentStyle, yogaNode, ctx, emojiEnabled) {
+  if (element === null || element === void 0 || typeof element === "boolean") {
+    return {
+      type: "empty",
+      style: parentStyle,
+      children: [],
+      props: {},
+      yogaNode
+    };
+  }
+  if (typeof element === "string" || typeof element === "number") {
+    const text = String(element);
+    const style2 = resolveStyle(void 0, parentStyle);
+    const measureFunc = createTextMeasureFunc(text, style2, ctx, emojiEnabled);
+    yogaNode.setMeasureFunc(measureFunc);
+    return {
+      type: "text",
+      style: style2,
+      children: [],
+      textContent: text,
+      props: {},
+      yogaNode
+    };
+  }
+  if (Array.isArray(element)) {
+    const style2 = resolveStyle(void 0, parentStyle);
+    const children2 = [];
+    for (let i = 0; i < element.length; i++) {
+      const child = element[i];
+      if (child === null || child === void 0 || typeof child === "boolean")
+        continue;
+      const childYogaNode = createYogaNode();
+      yogaNode.insertChild(childYogaNode, children2.length);
+      children2.push(buildNode(child, style2, childYogaNode, ctx, emojiEnabled));
+    }
+    return {
+      type: "div",
+      style: style2,
+      children: children2,
+      props: {},
+      yogaNode
+    };
+  }
+  const el = element;
+  const type = el.type;
+  if (typeof type === "function") {
+    const rendered = type(
+      el.props ?? {}
+    );
+    return buildNode(rendered, parentStyle, yogaNode, ctx, emojiEnabled);
+  }
+  const props = el.props ?? {};
+  const rawStyle = props.style ?? {};
+  const expanded = expandStyle(rawStyle);
+  const style = resolveStyle(expanded, parentStyle);
+  const tagName = String(type);
+  if (tagName === "svg") {
+    if (props.width != null && style.width === void 0)
+      style.width = Number(props.width);
+    if (props.height != null && style.height === void 0)
+      style.height = Number(props.height);
+    const viewBox = props.viewBox;
+    if (viewBox) {
+      const parts = viewBox.split(/[\s,]+/).map(Number);
+      if (parts.length === 4) {
+        const [, , vbW, vbH] = parts;
+        if (vbW > 0 && vbH > 0) {
+          const w = typeof style.width === "number" ? style.width : void 0;
+          const h = typeof style.height === "number" ? style.height : void 0;
+          if (w !== void 0 && h === void 0) {
+            style.height = w * (vbH / vbW);
+          } else if (h !== void 0 && w === void 0) {
+            style.width = h * (vbW / vbH);
+          } else if (w === void 0 && h === void 0) {
+            style.width = vbW;
+            style.height = vbH;
+          }
+        }
+      }
+    }
+  }
+  applyStylesToYoga(yogaNode, style);
+  if (tagName === "svg") {
+    return {
+      type: tagName,
+      style,
+      children: [],
+      props,
+      yogaNode
+    };
+  }
+  const textContent = extractTextContent(props.children);
+  if (textContent !== void 0 && !hasElementChildren(props.children)) {
+    const childStyle = resolveStyle(void 0, style);
+    const childYogaNode = createYogaNode();
+    const measureFunc = createTextMeasureFunc(
+      textContent,
+      childStyle,
+      ctx,
+      emojiEnabled
+    );
+    childYogaNode.setMeasureFunc(measureFunc);
+    yogaNode.insertChild(childYogaNode, 0);
+    return {
+      type: tagName,
+      style,
+      children: [
+        {
+          type: "text",
+          style: childStyle,
+          children: [],
+          textContent,
+          props: {},
+          yogaNode: childYogaNode
+        }
+      ],
+      props,
+      yogaNode
+    };
+  }
+  const children = [];
+  const rawChildren = props.children;
+  if (rawChildren !== void 0 && rawChildren !== null) {
+    const childArray = Array.isArray(rawChildren) ? rawChildren : [rawChildren];
+    for (const child of childArray) {
+      if (child === null || child === void 0 || typeof child === "boolean")
+        continue;
+      const childYogaNode = createYogaNode();
+      yogaNode.insertChild(childYogaNode, children.length);
+      children.push(buildNode(child, style, childYogaNode, ctx, emojiEnabled));
+    }
+  }
+  return {
+    type: tagName,
+    style,
+    children,
+    props,
+    yogaNode
+  };
+}
+function extractLayout(node, yogaNode) {
+  const layout = yogaNode.getComputedLayout();
+  return {
+    type: node.type,
+    style: node.style,
+    children: node.children.map((child, i) => {
+      const childYoga = yogaNode.getChild(i);
+      return extractLayout(child, childYoga);
+    }),
+    textContent: node.textContent,
+    props: node.props,
+    x: layout.left,
+    y: layout.top,
+    width: layout.width,
+    height: layout.height
+  };
+}
+function extractTextContent(children) {
+  if (children === void 0 || children === null) return void 0;
+  if (typeof children === "string") return children;
+  if (typeof children === "number") return String(children);
+  if (Array.isArray(children)) {
+    const parts = [];
+    for (const child of children) {
+      if (typeof child === "string") {
+        parts.push(child);
+      } else if (typeof child === "number") {
+        parts.push(String(child));
+      } else if (child !== null && child !== void 0 && typeof child !== "boolean") {
+        return void 0;
+      }
+    }
+    return parts.join("");
+  }
+  return void 0;
+}
+function hasElementChildren(children) {
+  if (children === void 0 || children === null || typeof children === "boolean")
+    return false;
+  if (typeof children === "string" || typeof children === "number")
+    return false;
+  if (Array.isArray(children)) {
+    return children.some(
+      (child) => child !== null && child !== void 0 && typeof child !== "boolean" && typeof child !== "string" && typeof child !== "number"
+    );
+  }
+  return typeof children === "object";
+}
+
+// src/jsx/index.ts
+async function renderReactElement(ctx, element, options) {
+  ensureFontsRegistered(options.fonts);
+  const width = ctx.canvas.width;
+  const height = ctx.canvas.height;
+  const emojiStyle = options.emoji === "none" ? void 0 : options.emoji ?? "twemoji";
+  const layoutTree = buildLayoutTree(element, width, height, ctx, !!emojiStyle);
+  await drawNode(ctx, layoutTree, 0, 0, options.debug ?? false, emojiStyle);
+}
+
+// src/index.ts
+function createCanvas2(width, height) {
+  const canvas = _createCanvas(width, height);
+  const origEncode = canvas.encode.bind(canvas);
+  canvas.encode = (async (...args) => Buffer.from(await origEncode(...args)));
+  return canvas;
+}
+export {
+  Canvas,
+  GlobalFonts2 as GlobalFonts,
+  Image,
+  LottieAnimation,
+  createCanvas2 as createCanvas,
+  loadImage4 as loadImage,
+  loadLottie,
+  registerFont,
+  registerFontFromPath,
+  registeredFamilies,
+  renderLottieFrame,
+  renderReactElement
+};
+//# sourceMappingURL=index.js.map