@jiujue/react-canvas-fiber 1.1.1

package/dist/index.js

@@ -0,0 +1,1443 @@
+import { useRef, useMemo, useCallback, useLayoutEffect, createElement } from 'react';
+import { FlexDirection, Align, Direction, loadYoga, MeasureMode, Edge, Justify, Wrap, PositionType, Gutter } from 'yoga-layout/load';
+import Reconciler from 'react-reconciler';
+import { DefaultEventPriority, LegacyRoot } from 'react-reconciler/constants';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Canvas.tsx
+
+// src/runtime/nodes.ts
+var nextDebugId = 1;
+function createRootNode() {
+  return {
+    type: "Root",
+    debugId: nextDebugId++,
+    parent: null,
+    children: [],
+    props: {},
+    layout: { x: 0, y: 0, width: 0, height: 0 },
+    yogaNode: null,
+    scrollLeft: 0,
+    scrollTop: 0,
+    scrollContentWidth: 0,
+    scrollContentHeight: 0,
+    scrollbarDrag: null
+  };
+}
+function createNode(type, props) {
+  return {
+    type,
+    debugId: nextDebugId++,
+    parent: null,
+    children: [],
+    props,
+    layout: { x: 0, y: 0, width: 0, height: 0 },
+    yogaNode: null,
+    scrollLeft: 0,
+    scrollTop: 0,
+    scrollContentWidth: 0,
+    scrollContentHeight: 0,
+    scrollbarDrag: null
+  };
+}
+
+// src/render/drawTree.ts
+function resolveInheritedTextStyle(node, defaults) {
+  const own = node.props?.style ?? {};
+  let fontSize = own.fontSize;
+  let fontFamily = own.fontFamily;
+  let fontWeight = own.fontWeight;
+  let lineHeight = own.lineHeight;
+  let current = node.parent;
+  while (current && (fontSize == null || fontFamily == null || fontWeight == null || lineHeight == null)) {
+    const s = current.props?.style ?? {};
+    if (fontSize == null && typeof s.fontSize === "number") fontSize = s.fontSize;
+    if (fontFamily == null && typeof s.fontFamily === "string") fontFamily = s.fontFamily;
+    if (fontWeight == null && (typeof s.fontWeight === "number" || typeof s.fontWeight === "string"))
+      fontWeight = s.fontWeight;
+    if (lineHeight == null && typeof s.lineHeight === "number") lineHeight = s.lineHeight;
+    current = current.parent;
+  }
+  const resolvedFontSize = fontSize ?? defaults?.fontSize ?? 16;
+  const resolvedFontFamily = fontFamily ?? defaults?.fontFamily ?? "system-ui";
+  const resolvedFontWeight = fontWeight ?? defaults?.fontWeight ?? 400;
+  const resolvedLineHeight = lineHeight ?? defaults?.lineHeight ?? Math.round(resolvedFontSize * 1.2);
+  return {
+    fontSize: resolvedFontSize,
+    fontFamily: resolvedFontFamily,
+    fontWeight: resolvedFontWeight,
+    lineHeight: resolvedLineHeight,
+    font: `${resolvedFontWeight} ${resolvedFontSize}px ${resolvedFontFamily}`
+  };
+}
+function drawRoundedRect(ctx, x, y, w, h, r) {
+  const radius = Math.max(0, Math.min(r, Math.min(w, h) / 2));
+  ctx.beginPath();
+  ctx.moveTo(x + radius, y);
+  ctx.arcTo(x + w, y, x + w, y + h, radius);
+  ctx.arcTo(x + w, y + h, x, y + h, radius);
+  ctx.arcTo(x, y + h, x, y, radius);
+  ctx.arcTo(x, y, x + w, y, radius);
+  ctx.closePath();
+}
+function drawNode(state, node, offsetX, offsetY) {
+  const { ctx } = state;
+  const x = offsetX + node.layout.x;
+  const y = offsetY + node.layout.y;
+  const w = node.layout.width;
+  const h = node.layout.height;
+  if (node.type === "View") {
+    const background = node.props.background;
+    const scrollX = !!node.props?.scrollX;
+    const scrollY = !!node.props?.scrollY;
+    const scrollLeft = scrollX ? node.scrollLeft ?? 0 : 0;
+    const scrollTop = scrollY ? node.scrollTop ?? 0 : 0;
+    const scrollbarX = scrollX ? node.props?.scrollbarX !== false : false;
+    const scrollbarY = scrollY ? node.props?.scrollbarY !== false : false;
+    const scrollbarWidth = node.props?.scrollbarWidth ?? 10;
+    const scrollbarInset = node.props?.scrollbarInset ?? 6;
+    const scrollbarTrackColor = node.props?.scrollbarTrackColor ?? "rgba(255,255,255,0.12)";
+    const scrollbarThumbColor = node.props?.scrollbarThumbColor ?? "rgba(255,255,255,0.35)";
+    const contentWidth = node.scrollContentWidth ?? 0;
+    const contentHeight = node.scrollContentHeight ?? 0;
+    const maxScrollLeft = Math.max(0, contentWidth - w);
+    const maxScrollTop = Math.max(0, contentHeight - h);
+    if (background) {
+      const radius = node.props.borderRadius ?? 0;
+      ctx.save();
+      ctx.fillStyle = background;
+      drawRoundedRect(ctx, x, y, w, h, radius);
+      ctx.fill();
+      ctx.restore();
+    }
+    if (scrollX || scrollY) {
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(x, y, w, h);
+      ctx.clip();
+      for (const child of node.children) {
+        drawNode(state, child, x - scrollLeft, y - scrollTop);
+      }
+      ctx.restore();
+      const corner = scrollbarInset + scrollbarWidth;
+      if (scrollbarY && maxScrollTop > 0) {
+        const trackX = x + w - scrollbarInset - scrollbarWidth;
+        const trackY = y + scrollbarInset;
+        const trackH = Math.max(
+          0,
+          h - scrollbarInset * 2 - (scrollbarX && maxScrollLeft > 0 ? corner : 0)
+        );
+        const minThumbH = 16;
+        const thumbH = contentHeight > 0 ? Math.max(minThumbH, Math.min(trackH, trackH * h / contentHeight)) : trackH;
+        const travel = Math.max(0, trackH - thumbH);
+        const thumbY = travel > 0 ? trackY + scrollTop / maxScrollTop * travel : trackY;
+        const radius = Math.min(6, scrollbarWidth / 2);
+        ctx.save();
+        ctx.fillStyle = scrollbarTrackColor;
+        drawRoundedRect(ctx, trackX, trackY, scrollbarWidth, trackH, radius);
+        ctx.fill();
+        ctx.fillStyle = scrollbarThumbColor;
+        drawRoundedRect(ctx, trackX, thumbY, scrollbarWidth, thumbH, radius);
+        ctx.fill();
+        ctx.restore();
+      }
+      if (scrollbarX && maxScrollLeft > 0) {
+        const trackX = x + scrollbarInset;
+        const trackY = y + h - scrollbarInset - scrollbarWidth;
+        const trackW = Math.max(
+          0,
+          w - scrollbarInset * 2 - (scrollbarY && maxScrollTop > 0 ? corner : 0)
+        );
+        const minThumbW = 16;
+        const thumbW = contentWidth > 0 ? Math.max(minThumbW, Math.min(trackW, trackW * w / contentWidth)) : trackW;
+        const travel = Math.max(0, trackW - thumbW);
+        const thumbX = travel > 0 ? trackX + scrollLeft / maxScrollLeft * travel : trackX;
+        const radius = Math.min(6, scrollbarWidth / 2);
+        ctx.save();
+        ctx.fillStyle = scrollbarTrackColor;
+        drawRoundedRect(ctx, trackX, trackY, trackW, scrollbarWidth, radius);
+        ctx.fill();
+        ctx.fillStyle = scrollbarThumbColor;
+        drawRoundedRect(ctx, thumbX, trackY, thumbW, scrollbarWidth, radius);
+        ctx.fill();
+        ctx.restore();
+      }
+      return;
+    }
+  }
+  if (node.type === "Rect") {
+    const fill = node.props.fill ?? "#ffffff";
+    const stroke = node.props.stroke;
+    const lineWidth = node.props.lineWidth ?? 1;
+    const radius = node.props.borderRadius ?? 0;
+    ctx.save();
+    drawRoundedRect(ctx, x, y, w, h, radius);
+    if (fill) {
+      ctx.fillStyle = fill;
+      ctx.fill();
+    }
+    if (stroke) {
+      ctx.strokeStyle = stroke;
+      ctx.lineWidth = lineWidth;
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+  if (node.type === "Text") {
+    const text = node.props.text;
+    const color = node.props.color ?? "#ffffff";
+    const { font, lineHeight } = resolveInheritedTextStyle(node, state.defaults);
+    ctx.save();
+    ctx.font = font;
+    ctx.fillStyle = color;
+    ctx.textBaseline = "top";
+    const lines = String(text).split("\n");
+    for (let i = 0; i < lines.length; i += 1) {
+      ctx.fillText(lines[i], x, y + i * lineHeight);
+    }
+    ctx.restore();
+  }
+  for (const child of node.children) {
+    drawNode(state, child, x, y);
+  }
+}
+function drawTree(root, ctx, dpr, clearColor, defaults) {
+  const w = ctx.canvas.width;
+  const h = ctx.canvas.height;
+  ctx.save();
+  if (clearColor) {
+    ctx.fillStyle = clearColor;
+    ctx.fillRect(0, 0, w, h);
+  } else {
+    ctx.clearRect(0, 0, w, h);
+  }
+  ctx.restore();
+  ctx.save();
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  const state = { ctx, defaults };
+  for (const child of root.children) {
+    drawNode(state, child, 0, 0);
+  }
+  ctx.restore();
+}
+
+// src/utils/style.ts
+function normalizeInsets(style) {
+  const paddingHorizontal = style?.paddingHorizontal ?? style?.padding ?? 0;
+  const paddingVertical = style?.paddingVertical ?? style?.padding ?? 0;
+  const marginHorizontal = style?.marginHorizontal ?? style?.margin ?? 0;
+  const marginVertical = style?.marginVertical ?? style?.margin ?? 0;
+  return {
+    paddingTop: style?.paddingTop ?? paddingVertical,
+    paddingRight: style?.paddingRight ?? paddingHorizontal,
+    paddingBottom: style?.paddingBottom ?? paddingVertical,
+    paddingLeft: style?.paddingLeft ?? paddingHorizontal,
+    marginTop: style?.marginTop ?? marginVertical,
+    marginRight: style?.marginRight ?? marginHorizontal,
+    marginBottom: style?.marginBottom ?? marginVertical,
+    marginLeft: style?.marginLeft ?? marginHorizontal
+  };
+}
+
+// src/layout/layoutTree.ts
+var layoutEnginePromise = null;
+function getLayoutEngine() {
+  if (!layoutEnginePromise) {
+    layoutEnginePromise = (async () => {
+      const yoga = await loadYoga();
+      return { yoga };
+    })();
+  }
+  return layoutEnginePromise;
+}
+function applyYogaStyle(node, style) {
+  const s = style ?? {};
+  if (typeof s.width === "number") node.setWidth(s.width);
+  if (typeof s.height === "number") node.setHeight(s.height);
+  if (typeof s.minWidth === "number") node.setMinWidth(s.minWidth);
+  if (typeof s.minHeight === "number") node.setMinHeight(s.minHeight);
+  if (typeof s.maxWidth === "number") node.setMaxWidth(s.maxWidth);
+  if (typeof s.maxHeight === "number") node.setMaxHeight(s.maxHeight);
+  const insets = normalizeInsets(s);
+  node.setPadding(Edge.Top, insets.paddingTop);
+  node.setPadding(Edge.Right, insets.paddingRight);
+  node.setPadding(Edge.Bottom, insets.paddingBottom);
+  node.setPadding(Edge.Left, insets.paddingLeft);
+  node.setMargin(Edge.Top, insets.marginTop);
+  node.setMargin(Edge.Right, insets.marginRight);
+  node.setMargin(Edge.Bottom, insets.marginBottom);
+  node.setMargin(Edge.Left, insets.marginLeft);
+  if (typeof s.flexGrow === "number") node.setFlexGrow(s.flexGrow);
+  if (typeof s.flexShrink === "number") node.setFlexShrink(s.flexShrink);
+  if (typeof s.flexBasis === "number") node.setFlexBasis(s.flexBasis);
+  if (s.flexDirection === "row") node.setFlexDirection(FlexDirection.Row);
+  if (s.flexDirection === "column") node.setFlexDirection(FlexDirection.Column);
+  if (s.justifyContent === "flex-start") node.setJustifyContent(Justify.FlexStart);
+  if (s.justifyContent === "center") node.setJustifyContent(Justify.Center);
+  if (s.justifyContent === "flex-end") node.setJustifyContent(Justify.FlexEnd);
+  if (s.justifyContent === "space-between") node.setJustifyContent(Justify.SpaceBetween);
+  if (s.justifyContent === "space-around") node.setJustifyContent(Justify.SpaceAround);
+  if (s.alignItems === "stretch") node.setAlignItems(Align.Stretch);
+  if (s.alignItems === "flex-start") node.setAlignItems(Align.FlexStart);
+  if (s.alignItems === "center") node.setAlignItems(Align.Center);
+  if (s.alignItems === "flex-end") node.setAlignItems(Align.FlexEnd);
+  if (s.alignContent === "stretch") node.setAlignContent(Align.Stretch);
+  if (s.alignContent === "flex-start") node.setAlignContent(Align.FlexStart);
+  if (s.alignContent === "center") node.setAlignContent(Align.Center);
+  if (s.alignContent === "flex-end") node.setAlignContent(Align.FlexEnd);
+  if (s.alignContent === "space-between") node.setAlignContent(Align.SpaceBetween);
+  if (s.alignContent === "space-around") node.setAlignContent(Align.SpaceAround);
+  if (s.flexWrap === "no-wrap") node.setFlexWrap(Wrap.NoWrap);
+  if (s.flexWrap === "wrap") node.setFlexWrap(Wrap.Wrap);
+  if (s.position === "absolute") node.setPositionType(PositionType.Absolute);
+  if (s.position === "relative") node.setPositionType(PositionType.Relative);
+  if (typeof s.top === "number") node.setPosition(Edge.Top, s.top);
+  if (typeof s.right === "number") node.setPosition(Edge.Right, s.right);
+  if (typeof s.bottom === "number") node.setPosition(Edge.Bottom, s.bottom);
+  if (typeof s.left === "number") node.setPosition(Edge.Left, s.left);
+  if (typeof s.gap === "number") {
+    node.setGap(Gutter.All, s.gap);
+  }
+}
+function resolveInheritedTextStyle2(textNode, defaults) {
+  const own = textNode.props.style ?? {};
+  let fontSize = own.fontSize;
+  let fontFamily = own.fontFamily;
+  let fontWeight = own.fontWeight;
+  let lineHeight = own.lineHeight;
+  let current = textNode.parent;
+  while (current && (fontSize == null || fontFamily == null || fontWeight == null || lineHeight == null)) {
+    const s = current.props?.style ?? {};
+    if (fontSize == null && typeof s.fontSize === "number") fontSize = s.fontSize;
+    if (fontFamily == null && typeof s.fontFamily === "string") fontFamily = s.fontFamily;
+    if (fontWeight == null && (typeof s.fontWeight === "number" || typeof s.fontWeight === "string"))
+      fontWeight = s.fontWeight;
+    if (lineHeight == null && typeof s.lineHeight === "number") lineHeight = s.lineHeight;
+    current = current.parent;
+  }
+  const resolvedFontSize = fontSize ?? defaults?.fontSize ?? 16;
+  const resolvedFontFamily = fontFamily ?? defaults?.fontFamily ?? "system-ui";
+  const resolvedFontWeight = fontWeight ?? defaults?.fontWeight ?? 400;
+  const resolvedLineHeight = lineHeight ?? defaults?.lineHeight ?? Math.round(resolvedFontSize * 1.2);
+  return {
+    fontSize: resolvedFontSize,
+    fontFamily: resolvedFontFamily,
+    fontWeight: resolvedFontWeight,
+    lineHeight: resolvedLineHeight,
+    font: `${resolvedFontWeight} ${resolvedFontSize}px ${resolvedFontFamily}`
+  };
+}
+function ensureYogaNode(engine, node, measureText, defaults) {
+  if (node.yogaNode) return;
+  const yogaNode = engine.yoga.Node.create();
+  node.yogaNode = yogaNode;
+  if (node.type === "Text") {
+    const textNode = node;
+    yogaNode.setMeasureFunc(
+      (width, widthMode, _height, _heightMode) => {
+        const { font, fontSize, lineHeight } = resolveInheritedTextStyle2(textNode, defaults);
+        const maxWidth = widthMode === MeasureMode.Undefined ? textNode.props.maxWidth : width;
+        const measured = measureText?.(textNode.props.text, font, maxWidth);
+        const w = measured?.width ?? Math.min(
+          textNode.props.text.length * fontSize,
+          maxWidth ?? textNode.props.text.length * fontSize
+        );
+        const lines = measured?.height ? Math.max(1, Math.round(measured.height / lineHeight)) : 1;
+        return { width: w, height: lines * lineHeight };
+      }
+    );
+  }
+}
+function syncYogaTree(engine, rootYoga, root, measureText, defaults) {
+  const detachAll = (yogaNode) => {
+    const count = yogaNode.getChildCount();
+    for (let i = count - 1; i >= 0; i -= 1) {
+      yogaNode.removeChild(yogaNode.getChild(i));
+    }
+  };
+  const clearLinks = (parent) => {
+    if (parent.yogaNode) detachAll(parent.yogaNode);
+    for (const child of parent.children ?? []) clearLinks(child);
+  };
+  clearLinks(root);
+  detachAll(rootYoga);
+  const visit = (parentYoga, parent) => {
+    for (let i = 0; i < parent.children.length; i += 1) {
+      const child = parent.children[i];
+      ensureYogaNode(engine, child, measureText, defaults);
+      const style = child.props?.style;
+      applyYogaStyle(child.yogaNode, style);
+      const currentParent = child.yogaNode.getParent?.();
+      if (currentParent && currentParent !== parentYoga) {
+        currentParent.removeChild(child.yogaNode);
+      }
+      parentYoga.insertChild(child.yogaNode, parentYoga.getChildCount());
+      if (child.children.length) {
+        visit(child.yogaNode, child);
+      }
+    }
+  };
+  visit(rootYoga, root);
+}
+function readComputedLayout(node) {
+  if (!node.yogaNode) return;
+  const layout = node.yogaNode.getComputedLayout();
+  node.layout = {
+    x: layout.left,
+    y: layout.top,
+    width: layout.width,
+    height: layout.height
+  };
+}
+async function layoutTree(root, width, height, measureText, defaults) {
+  const engine = await getLayoutEngine();
+  if (!root.yogaNode) {
+    root.yogaNode = engine.yoga.Node.create();
+    root.yogaNode.setWidth(width);
+    root.yogaNode.setHeight(height);
+  } else {
+    root.yogaNode.setWidth(width);
+    root.yogaNode.setHeight(height);
+  }
+  root.yogaNode.setFlexDirection(FlexDirection.Column);
+  root.yogaNode.setAlignItems(Align.Stretch);
+  syncYogaTree(engine, root.yogaNode, root, measureText, defaults);
+  root.yogaNode.calculateLayout(width, height, Direction.LTR);
+  const computeContentWidth = (node) => {
+    let maxRight = 0;
+    for (const child of node.children) {
+      maxRight = Math.max(maxRight, child.layout.x + child.layout.width);
+    }
+    return maxRight;
+  };
+  const computeContentHeight = (node) => {
+    let maxBottom = 0;
+    for (const child of node.children) {
+      maxBottom = Math.max(maxBottom, child.layout.y + child.layout.height);
+    }
+    return maxBottom;
+  };
+  const clampScrollTop = (node) => {
+    if (node.type !== "View") return;
+    if (!node.props?.scrollY) return;
+    const viewportH = node.layout.height;
+    const contentH = node.scrollContentHeight ?? 0;
+    const maxScrollTop = Math.max(0, contentH - viewportH);
+    if (typeof node.scrollTop !== "number") node.scrollTop = 0;
+    node.scrollTop = Math.max(0, Math.min(node.scrollTop, maxScrollTop));
+  };
+  const clampScrollLeft = (node) => {
+    if (node.type !== "View") return;
+    if (!node.props?.scrollX) return;
+    const viewportW = node.layout.width;
+    const contentW = node.scrollContentWidth ?? 0;
+    const maxScrollLeft = Math.max(0, contentW - viewportW);
+    if (typeof node.scrollLeft !== "number") node.scrollLeft = 0;
+    node.scrollLeft = Math.max(0, Math.min(node.scrollLeft, maxScrollLeft));
+  };
+  const walk = (parent) => {
+    for (const child of parent.children) {
+      readComputedLayout(child);
+      if (child.children.length) walk(child);
+      if (child.type === "View" && (child.props?.scrollY || child.props?.scrollX)) {
+        if (child.props?.scrollY) {
+          child.scrollContentHeight = computeContentHeight(child);
+          clampScrollTop(child);
+        }
+        if (child.props?.scrollX) {
+          child.scrollContentWidth = computeContentWidth(child);
+          clampScrollLeft(child);
+        }
+      }
+    }
+  };
+  walk(root);
+}
+function freeYogaSubtree(node) {
+  if (node.yogaNode) {
+    const parent = node.yogaNode.getParent?.();
+    if (parent) {
+      parent.removeChild(node.yogaNode);
+    }
+    node.yogaNode.freeRecursive();
+  }
+  const clearRefs = (target) => {
+    target.yogaNode = null;
+    for (const child of target.children) clearRefs(child);
+  };
+  clearRefs(node);
+}
+var hostConfig = {
+  now: Date.now,
+  supportsMutation: true,
+  isPrimaryRenderer: false,
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+  supportsMicrotasks: true,
+  scheduleMicrotask: typeof queueMicrotask === "function" ? queueMicrotask : (cb) => void Promise.resolve().then(cb),
+  getCurrentEventPriority() {
+    return DefaultEventPriority;
+  },
+  getRootHostContext() {
+    return null;
+  },
+  getChildHostContext() {
+    return null;
+  },
+  shouldSetTextContent() {
+    return false;
+  },
+  createInstance(type, props) {
+    return createNode(type, props);
+  },
+  createTextInstance() {
+    throw new Error('Text instances are not supported. Use <Text text="..."/>.');
+  },
+  appendInitialChild(parent, child) {
+    hostConfig.appendChild(parent, child);
+  },
+  appendChild(parent, child) {
+    child.parent = parent;
+    parent.children.push(child);
+  },
+  appendChildToContainer(container, child) {
+    child.parent = null;
+    container.root.children.push(child);
+    container.invalidate();
+  },
+  insertBefore(parent, child, beforeChild) {
+    child.parent = parent;
+    const idx = parent.children.indexOf(beforeChild);
+    if (idx >= 0) parent.children.splice(idx, 0, child);
+    else parent.children.push(child);
+  },
+  insertInContainerBefore(container, child, beforeChild) {
+    child.parent = null;
+    const idx = container.root.children.indexOf(beforeChild);
+    if (idx >= 0) container.root.children.splice(idx, 0, child);
+    else container.root.children.push(child);
+    container.invalidate();
+  },
+  removeChild(parent, child) {
+    const idx = parent.children.indexOf(child);
+    if (idx >= 0) parent.children.splice(idx, 1);
+    child.parent = null;
+    freeYogaSubtree(child);
+  },
+  removeChildFromContainer(container, child) {
+    const idx = container.root.children.indexOf(child);
+    if (idx >= 0) container.root.children.splice(idx, 1);
+    child.parent = null;
+    freeYogaSubtree(child);
+    container.invalidate();
+  },
+  finalizeInitialChildren() {
+    return false;
+  },
+  prepareUpdate(_instance, _type, _oldProps, newProps) {
+    return newProps;
+  },
+  commitUpdate(instance, updatePayload) {
+    instance.props = updatePayload;
+  },
+  commitTextUpdate() {
+  },
+  resetTextContent() {
+  },
+  prepareForCommit() {
+    return null;
+  },
+  resetAfterCommit(container) {
+    container.invalidate();
+    container.notifyCommit?.();
+  },
+  clearContainer(container) {
+    container.root.children = [];
+    container.invalidate();
+    return false;
+  },
+  getPublicInstance(instance) {
+    return instance;
+  },
+  hideInstance() {
+  },
+  unhideInstance() {
+  },
+  hideTextInstance() {
+  },
+  unhideTextInstance() {
+  },
+  detachDeletedInstance() {
+  }
+};
+var CanvasReconciler = Reconciler(hostConfig);
+function createReconcilerRoot(container) {
+  const root = CanvasReconciler.createContainer(
+    container,
+    LegacyRoot,
+    null,
+    false,
+    null,
+    "",
+    console.error,
+    null
+  );
+  return {
+    render(element) {
+      CanvasReconciler.updateContainer(element, root, null, () => {
+      });
+    },
+    unmount() {
+      CanvasReconciler.updateContainer(null, root, null, () => {
+      });
+    }
+  };
+}
+
+// src/runtime/root.ts
+function createCanvasRoot(canvas, options) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("CanvasRenderingContext2D is not available");
+  const rootNode = createRootNode();
+  const commitSubscribers = /* @__PURE__ */ new Set();
+  const notifyCommit = () => {
+    for (const cb of commitSubscribers) cb();
+  };
+  let hoverId = null;
+  let selectedId = null;
+  const toCanvasPoint = (clientX, clientY) => {
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = rect.width ? options.width / rect.width : 1;
+    const scaleY = rect.height ? options.height / rect.height : 1;
+    const x = (clientX - rect.left) * scaleX;
+    const y = (clientY - rect.top) * scaleY;
+    return { x, y };
+  };
+  const findNodeById = (id) => {
+    const walk = (node) => {
+      if (node.debugId === id) return node;
+      for (const child of node.children) {
+        const hit = walk(child);
+        if (hit) return hit;
+      }
+      return null;
+    };
+    for (const child of rootNode.children) {
+      const hit = walk(child);
+      if (hit) return hit;
+    }
+    return null;
+  };
+  const getAbsoluteRect = (node) => {
+    const path = [];
+    let current = node;
+    while (current) {
+      path.push(current);
+      current = current.parent;
+    }
+    let absLeft = 0;
+    let absTop = 0;
+    for (let i = path.length - 1; i >= 0; i -= 1) {
+      const n = path[i];
+      absLeft += n.layout.x;
+      absTop += n.layout.y;
+      const hasNext = i > 0;
+      if (hasNext && n.type === "View" && n.props?.scrollX) absLeft -= n.scrollLeft ?? 0;
+      if (hasNext && n.type === "View" && n.props?.scrollY) absTop -= n.scrollTop ?? 0;
+    }
+    return { x: absLeft, y: absTop, width: node.layout.width, height: node.layout.height };
+  };
+  const getScrollClipRects = (node) => {
+    const rects = [];
+    let current = node.parent;
+    while (current) {
+      if (current.type === "View") {
+        const scrollX = !!current.props?.scrollX;
+        const scrollY = !!current.props?.scrollY;
+        if (scrollX || scrollY) rects.push(getAbsoluteRect(current));
+      }
+      current = current.parent;
+    }
+    return rects.reverse();
+  };
+  const serializeValue = (value, depth, seen) => {
+    if (depth > 6) return "[MaxDepth]";
+    if (value == null) return value;
+    const t = typeof value;
+    if (t === "string" || t === "number" || t === "boolean") return value;
+    if (t === "bigint") return String(value);
+    if (t === "symbol") return String(value);
+    if (t === "function") return "[Function]";
+    if (t !== "object") return String(value);
+    if (seen.has(value)) return "[Circular]";
+    seen.add(value);
+    if (Array.isArray(value)) {
+      const next = [];
+      const len = Math.min(value.length, 50);
+      for (let i = 0; i < len; i += 1) next.push(serializeValue(value[i], depth + 1, seen));
+      if (value.length > len) next.push(`[+${value.length - len}]`);
+      return next;
+    }
+    const out = {};
+    const keys = Object.keys(value).slice(0, 80);
+    for (const k of keys) out[k] = serializeValue(value[k], depth + 1, seen);
+    const allKeys = Object.keys(value);
+    if (allKeys.length > keys.length) out.__moreKeys = allKeys.length - keys.length;
+    return out;
+  };
+  let frameId = null;
+  let dirty = true;
+  const measureText = (text, font, maxWidth) => {
+    ctx.save();
+    ctx.font = font;
+    const metrics = ctx.measureText(text);
+    ctx.restore();
+    const width = typeof maxWidth === "number" ? Math.min(metrics.width, maxWidth) : metrics.width;
+    const height = Math.ceil(
+      metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent || 0
+    );
+    return { width, height: Math.max(1, height) };
+  };
+  const invalidate = () => {
+    dirty = true;
+    if (frameId != null) return;
+    frameId = requestAnimationFrame(async () => {
+      frameId = null;
+      if (!dirty) return;
+      dirty = false;
+      await layoutTree(rootNode, options.width, options.height, measureText, options);
+      drawTree(rootNode, ctx, options.dpr, options.clearColor, options);
+      const overlayHover = typeof hoverId === "number" ? findNodeById(hoverId) : null;
+      const overlaySelected = typeof selectedId === "number" ? findNodeById(selectedId) : null;
+      if (overlayHover || overlaySelected) {
+        ctx.save();
+        ctx.setTransform(options.dpr, 0, 0, options.dpr, 0, 0);
+        if (overlayHover && (!overlaySelected || overlayHover.debugId !== overlaySelected.debugId)) {
+          const r = getAbsoluteRect(overlayHover);
+          ctx.save();
+          for (const clip of getScrollClipRects(overlayHover)) {
+            ctx.beginPath();
+            ctx.rect(clip.x, clip.y, clip.width, clip.height);
+            ctx.clip();
+          }
+          ctx.fillStyle = "rgba(59,130,246,0.12)";
+          ctx.strokeStyle = "rgba(59,130,246,0.9)";
+          ctx.lineWidth = 1;
+          ctx.fillRect(r.x, r.y, r.width, r.height);
+          ctx.strokeRect(r.x + 0.5, r.y + 0.5, Math.max(0, r.width - 1), Math.max(0, r.height - 1));
+          ctx.restore();
+        }
+        if (overlaySelected) {
+          const r = getAbsoluteRect(overlaySelected);
+          ctx.save();
+          for (const clip of getScrollClipRects(overlaySelected)) {
+            ctx.beginPath();
+            ctx.rect(clip.x, clip.y, clip.width, clip.height);
+            ctx.clip();
+          }
+          ctx.fillStyle = "rgba(16,185,129,0.12)";
+          ctx.strokeStyle = "rgba(16,185,129,0.95)";
+          ctx.lineWidth = 2;
+          ctx.fillRect(r.x, r.y, r.width, r.height);
+          ctx.strokeRect(r.x + 1, r.y + 1, Math.max(0, r.width - 2), Math.max(0, r.height - 2));
+          ctx.restore();
+        }
+        ctx.restore();
+      }
+    });
+  };
+  const getScrollbarMetricsY = (view, left, top) => {
+    if (view.type !== "View") return null;
+    if (!view.props?.scrollY) return null;
+    if (view.props?.scrollbarY === false) return null;
+    const w = view.layout.width;
+    const h = view.layout.height;
+    const contentHeight = view.scrollContentHeight ?? 0;
+    const maxScrollTop = Math.max(0, contentHeight - h);
+    if (maxScrollTop <= 0) return null;
+    const scrollbarWidth = view.props?.scrollbarWidth ?? 10;
+    const scrollbarInset = view.props?.scrollbarInset ?? 6;
+    const corner = scrollbarInset + scrollbarWidth;
+    const contentWidth = view.scrollContentWidth ?? 0;
+    const maxScrollLeft = Math.max(0, contentWidth - w);
+    const hasScrollX = !!view.props?.scrollX && view.props?.scrollbarX !== false && maxScrollLeft > 0;
+    const trackX = left + w - scrollbarInset - scrollbarWidth;
+    const trackY = top + scrollbarInset;
+    const trackH = Math.max(0, h - scrollbarInset * 2 - (hasScrollX ? corner : 0));
+    if (trackH <= 0) return null;
+    const minThumbH = 16;
+    const thumbH = contentHeight > 0 ? Math.max(minThumbH, Math.min(trackH, trackH * h / contentHeight)) : trackH;
+    const travel = Math.max(0, trackH - thumbH);
+    const scrollTop = view.scrollTop ?? 0;
+    const thumbY = travel > 0 ? trackY + scrollTop / maxScrollTop * travel : trackY;
+    return { maxScrollTop, trackX, trackY, trackH, thumbY, thumbH };
+  };
+  const getScrollbarMetricsX = (view, left, top) => {
+    if (view.type !== "View") return null;
+    if (!view.props?.scrollX) return null;
+    if (view.props?.scrollbarX === false) return null;
+    const w = view.layout.width;
+    const h = view.layout.height;
+    const contentWidth = view.scrollContentWidth ?? 0;
+    const maxScrollLeft = Math.max(0, contentWidth - w);
+    if (maxScrollLeft <= 0) return null;
+    const scrollbarWidth = view.props?.scrollbarWidth ?? 10;
+    const scrollbarInset = view.props?.scrollbarInset ?? 6;
+    const corner = scrollbarInset + scrollbarWidth;
+    const contentHeight = view.scrollContentHeight ?? 0;
+    const maxScrollTop = Math.max(0, contentHeight - h);
+    const hasScrollY = !!view.props?.scrollY && view.props?.scrollbarY !== false && maxScrollTop > 0;
+    const trackX = left + scrollbarInset;
+    const trackY = top + h - scrollbarInset - scrollbarWidth;
+    const trackW = Math.max(0, w - scrollbarInset * 2 - (hasScrollY ? corner : 0));
+    if (trackW <= 0) return null;
+    const minThumbW = 16;
+    const thumbW = contentWidth > 0 ? Math.max(minThumbW, Math.min(trackW, trackW * w / contentWidth)) : trackW;
+    const travel = Math.max(0, trackW - thumbW);
+    const scrollLeft = view.scrollLeft ?? 0;
+    const thumbX = travel > 0 ? trackX + scrollLeft / maxScrollLeft * travel : trackX;
+    return { maxScrollLeft, trackX, trackY, trackW, thumbX, thumbW };
+  };
+  const hitTestNode = (node, x, y, offsetX, offsetY) => {
+    if (node.props?.pointerEvents === "none") return null;
+    const left = offsetX + node.layout.x;
+    const top = offsetY + node.layout.y;
+    const right = left + node.layout.width;
+    const bottom = top + node.layout.height;
+    if (x < left || x > right || y < top || y > bottom) return null;
+    const childOffsetX = node.type === "View" && node.props?.scrollX ? left - (node.scrollLeft ?? 0) : left;
+    const childOffsetY = node.type === "View" && node.props?.scrollY ? top - (node.scrollTop ?? 0) : top;
+    for (let i = node.children.length - 1; i >= 0; i -= 1) {
+      const child = node.children[i];
+      const hit = hitTestNode(child, x, y, childOffsetX, childOffsetY);
+      if (hit) return hit;
+    }
+    return node;
+  };
+  const hitTestScrollbarThumbNode = (node, x, y, offsetX, offsetY) => {
+    if (node.props?.pointerEvents === "none") return null;
+    const left = offsetX + node.layout.x;
+    const top = offsetY + node.layout.y;
+    const right = left + node.layout.width;
+    const bottom = top + node.layout.height;
+    if (x < left || x > right || y < top || y > bottom) return null;
+    const metricsY = getScrollbarMetricsY(node, left, top);
+    if (metricsY) {
+      const { trackX, thumbY, thumbH } = metricsY;
+      const thumbLeft = trackX;
+      const thumbRight = trackX + (node.props?.scrollbarWidth ?? 10);
+      const thumbTop = thumbY;
+      const thumbBottom = thumbY + thumbH;
+      if (x >= thumbLeft && x <= thumbRight && y >= thumbTop && y <= thumbBottom) {
+        return { view: node, axis: "y" };
+      }
+    }
+    const metricsX = getScrollbarMetricsX(node, left, top);
+    if (metricsX) {
+      const { trackY, thumbX, thumbW } = metricsX;
+      const thumbLeft = thumbX;
+      const thumbRight = thumbX + thumbW;
+      const thumbTop = trackY;
+      const thumbBottom = trackY + (node.props?.scrollbarWidth ?? 10);
+      if (x >= thumbLeft && x <= thumbRight && y >= thumbTop && y <= thumbBottom) {
+        return { view: node, axis: "x" };
+      }
+    }
+    const childOffsetX = node.type === "View" && node.props?.scrollX ? left - (node.scrollLeft ?? 0) : left;
+    const childOffsetY = node.type === "View" && node.props?.scrollY ? top - (node.scrollTop ?? 0) : top;
+    for (let i = node.children.length - 1; i >= 0; i -= 1) {
+      const child = node.children[i];
+      const hit = hitTestScrollbarThumbNode(child, x, y, childOffsetX, childOffsetY);
+      if (hit) return hit;
+    }
+    return null;
+  };
+  const hitTestScrollbarThumb = (x, y) => {
+    for (let i = rootNode.children.length - 1; i >= 0; i -= 1) {
+      const child = rootNode.children[i];
+      const hit = hitTestScrollbarThumbNode(child, x, y, 0, 0);
+      if (hit) return hit;
+    }
+    return null;
+  };
+  const hitTest = (x, y) => {
+    for (let i = rootNode.children.length - 1; i >= 0; i -= 1) {
+      const child = rootNode.children[i];
+      const hit = hitTestNode(child, x, y, 0, 0);
+      if (hit) return hit;
+    }
+    return null;
+  };
+  const buildPath = (target) => {
+    const path = [];
+    let current = target;
+    while (current) {
+      path.push(current);
+      current = current.parent;
+    }
+    return path;
+  };
+  const pointerCapture = /* @__PURE__ */ new Map();
+  const pointerDownTarget = /* @__PURE__ */ new Map();
+  const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+  const applyScrollY = (node, delta) => {
+    if (node.type !== "View") return false;
+    if (!node.props?.scrollY) return false;
+    const contentHeight = node.scrollContentHeight ?? 0;
+    const maxScrollTop = Math.max(0, contentHeight - node.layout.height);
+    if (maxScrollTop <= 0) return false;
+    const current = node.scrollTop ?? 0;
+    const next = clamp(current + delta, 0, maxScrollTop);
+    if (next === current) return false;
+    node.scrollTop = next;
+    const onScroll = node.props?.onScroll;
+    if (typeof onScroll === "function") onScroll(next);
+    return true;
+  };
+  const applyScrollX = (node, delta) => {
+    if (node.type !== "View") return false;
+    if (!node.props?.scrollX) return false;
+    const contentWidth = node.scrollContentWidth ?? 0;
+    const maxScrollLeft = Math.max(0, contentWidth - node.layout.width);
+    if (maxScrollLeft <= 0) return false;
+    const current = node.scrollLeft ?? 0;
+    const next = clamp(current + delta, 0, maxScrollLeft);
+    if (next === current) return false;
+    node.scrollLeft = next;
+    const onScrollX = node.props?.onScrollX;
+    if (typeof onScrollX === "function") onScrollX(next);
+    return true;
+  };
+  const dispatchOnPath = (eventType, path, init, target) => {
+    const baseName = eventType === "pointerdown" ? "onPointerDown" : eventType === "pointermove" ? "onPointerMove" : eventType === "pointerup" ? "onPointerUp" : eventType === "pointercancel" ? "onPointerCancel" : "onClick";
+    let propagationStopped = false;
+    let defaultPrevented = false;
+    const eventObject = {
+      type: eventType,
+      ...init,
+      target,
+      currentTarget: null,
+      defaultPrevented,
+      stopPropagation() {
+        propagationStopped = true;
+      },
+      preventDefault() {
+        defaultPrevented = true;
+        eventObject.defaultPrevented = true;
+      }
+    };
+    for (let i = path.length - 1; i >= 0; i -= 1) {
+      if (propagationStopped) break;
+      const currentTarget = path[i];
+      const handler = currentTarget.props?.[`${baseName}Capture`];
+      if (typeof handler === "function") {
+        eventObject.currentTarget = currentTarget;
+        handler(eventObject);
+      }
+    }
+    for (let i = 0; i < path.length; i += 1) {
+      if (propagationStopped) break;
+      const currentTarget = path[i];
+      const handler = currentTarget.props?.[baseName];
+      if (typeof handler === "function") {
+        eventObject.currentTarget = currentTarget;
+        handler(eventObject);
+      }
+    }
+    return { defaultPrevented };
+  };
+  const dispatchPointerEvent = (eventType, init) => {
+    const { pointerId } = init;
+    const capturedForScroll = pointerCapture.get(pointerId);
+    if (capturedForScroll && capturedForScroll.type === "View" && capturedForScroll.scrollbarDrag && capturedForScroll.scrollbarDrag.pointerId === pointerId) {
+      if (eventType === "pointermove") {
+        const drag = capturedForScroll.scrollbarDrag;
+        const path = buildPath(capturedForScroll);
+        let absLeft = 0;
+        let absTop = 0;
+        for (let i = path.length - 1; i >= 0; i -= 1) {
+          const n = path[i];
+          absLeft += n.layout.x;
+          absTop += n.layout.y;
+          const hasNext = i > 0;
+          if (hasNext && n.type === "View" && n.props?.scrollX)
+            absLeft -= n.scrollLeft ?? 0;
+          if (hasNext && n.type === "View" && n.props?.scrollY) absTop -= n.scrollTop ?? 0;
+        }
+        if (drag.axis === "y") {
+          const metrics2 = getScrollbarMetricsY(capturedForScroll, absLeft, absTop);
+          if (!metrics2) return { defaultPrevented: true };
+          const travel2 = Math.max(0, metrics2.trackH - metrics2.thumbH);
+          if (travel2 <= 0) return { defaultPrevented: true };
+          const deltaThumb2 = init.y - drag.startPointer;
+          const nextScrollTop = drag.startScroll + deltaThumb2 * (metrics2.maxScrollTop / travel2);
+          const clamped2 = Math.max(0, Math.min(nextScrollTop, metrics2.maxScrollTop));
+          capturedForScroll.scrollTop = clamped2;
+          const onScroll = capturedForScroll.props?.onScroll;
+          if (typeof onScroll === "function") onScroll(clamped2);
+          invalidate();
+          return { defaultPrevented: true };
+        }
+        const metrics = getScrollbarMetricsX(capturedForScroll, absLeft, absTop);
+        if (!metrics) return { defaultPrevented: true };
+        const travel = Math.max(0, metrics.trackW - metrics.thumbW);
+        if (travel <= 0) return { defaultPrevented: true };
+        const deltaThumb = init.x - drag.startPointer;
+        const nextScrollLeft = drag.startScroll + deltaThumb * (metrics.maxScrollLeft / travel);
+        const clamped = Math.max(0, Math.min(nextScrollLeft, metrics.maxScrollLeft));
+        capturedForScroll.scrollLeft = clamped;
+        const onScrollX = capturedForScroll.props?.onScrollX;
+        if (typeof onScrollX === "function") onScrollX(clamped);
+        invalidate();
+        return { defaultPrevented: true };
+      }
+      if (eventType === "pointerup" || eventType === "pointercancel") {
+        capturedForScroll.scrollbarDrag = null;
+        pointerCapture.delete(pointerId);
+        pointerDownTarget.delete(pointerId);
+        invalidate();
+        return { defaultPrevented: true };
+      }
+    }
+    if (eventType === "pointerdown") {
+      const scrollbarTarget = hitTestScrollbarThumb(init.x, init.y);
+      if (scrollbarTarget && scrollbarTarget.view.type === "View") {
+        scrollbarTarget.view.scrollbarDrag = {
+          axis: scrollbarTarget.axis,
+          pointerId,
+          startPointer: scrollbarTarget.axis === "y" ? init.y : init.x,
+          startScroll: scrollbarTarget.axis === "y" ? scrollbarTarget.view.scrollTop ?? 0 : scrollbarTarget.view.scrollLeft ?? 0
+        };
+        pointerCapture.set(pointerId, scrollbarTarget.view);
+        return { defaultPrevented: true };
+      }
+      const target2 = hitTest(init.x, init.y);
+      if (!target2) return { defaultPrevented: false };
+      pointerCapture.set(pointerId, target2);
+      pointerDownTarget.set(pointerId, target2);
+      return dispatchOnPath(eventType, buildPath(target2), init, target2);
+    }
+    if (eventType === "pointermove") {
+      const captured = pointerCapture.get(pointerId);
+      const target2 = captured ?? hitTest(init.x, init.y);
+      if (!target2) return { defaultPrevented: false };
+      return dispatchOnPath(eventType, buildPath(target2), init, target2);
+    }
+    if (eventType === "pointerup") {
+      const captured = pointerCapture.get(pointerId);
+      const target2 = captured ?? hitTest(init.x, init.y);
+      if (!target2) return { defaultPrevented: false };
+      const res = dispatchOnPath(eventType, buildPath(target2), init, target2);
+      const downTarget = pointerDownTarget.get(pointerId);
+      pointerCapture.delete(pointerId);
+      pointerDownTarget.delete(pointerId);
+      if (downTarget && downTarget === target2 && init.button === 0) {
+        const clickRes = dispatchOnPath("click", buildPath(target2), init, target2);
+        return { defaultPrevented: res.defaultPrevented || clickRes.defaultPrevented };
+      }
+      return res;
+    }
+    if (eventType === "pointercancel") {
+      const captured = pointerCapture.get(pointerId);
+      const target2 = captured ?? hitTest(init.x, init.y);
+      if (!target2) return { defaultPrevented: false };
+      const res = dispatchOnPath(eventType, buildPath(target2), init, target2);
+      pointerCapture.delete(pointerId);
+      pointerDownTarget.delete(pointerId);
+      return res;
+    }
+    const target = hitTest(init.x, init.y);
+    if (!target) return { defaultPrevented: false };
+    return dispatchOnPath(eventType, buildPath(target), init, target);
+  };
+  const dispatchWheelEvent = (init) => {
+    const target = hitTest(init.x, init.y);
+    if (!target) return { defaultPrevented: false };
+    const path = buildPath(target);
+    let remainingX = init.deltaX;
+    let remainingY = init.deltaY;
+    let defaultPrevented = false;
+    for (let i = 0; i < path.length; i += 1) {
+      const node = path[i];
+      if (remainingY !== 0) {
+        const applied = applyScrollY(node, remainingY);
+        if (applied) {
+          remainingY = 0;
+          defaultPrevented = true;
+        }
+      }
+      if (remainingX !== 0) {
+        const applied = applyScrollX(node, remainingX);
+        if (applied) {
+          remainingX = 0;
+          defaultPrevented = true;
+        }
+      }
+      if (remainingX === 0 && remainingY === 0) break;
+    }
+    if (defaultPrevented) invalidate();
+    return { defaultPrevented };
+  };
+  const container = { root: rootNode, invalidate, notifyCommit };
+  const reconcilerRoot = createReconcilerRoot(container);
+  invalidate();
+  const __devtools = {
+    rootId: rootNode.debugId,
+    getSnapshot() {
+      const nodesById = {};
+      const walk = (node, parentId) => {
+        nodesById[node.debugId] = {
+          id: node.debugId,
+          type: node.type,
+          parentId,
+          childrenIds: node.children.map((c) => c.debugId),
+          layout: node.layout
+        };
+        for (const child of node.children) walk(child, node.debugId);
+      };
+      for (const child of rootNode.children) walk(child, null);
+      return {
+        rootId: rootNode.debugId,
+        rootChildrenIds: rootNode.children.map((c) => c.debugId),
+        nodesById
+      };
+    },
+    getNode(id) {
+      const node = findNodeById(id);
+      if (!node) return null;
+      return {
+        id: node.debugId,
+        type: node.type,
+        parentId: node.parent ? node.parent.debugId : null,
+        childrenIds: node.children.map((c) => c.debugId),
+        layout: node.layout
+      };
+    },
+    getNodeProps(id) {
+      const node = findNodeById(id);
+      if (!node) return null;
+      return serializeValue(node.props, 0, /* @__PURE__ */ new WeakSet());
+    },
+    hitTestCanvas(x, y) {
+      const node = hitTest(x, y);
+      return node ? node.debugId : null;
+    },
+    hitTestClient(clientX, clientY) {
+      const { x, y } = toCanvasPoint(clientX, clientY);
+      const node = hitTest(x, y);
+      return node ? node.debugId : null;
+    },
+    setHighlight(next) {
+      if ("hoverId" in next) hoverId = next.hoverId ?? null;
+      if ("selectedId" in next) selectedId = next.selectedId ?? null;
+      invalidate();
+    },
+    subscribe(cb) {
+      commitSubscribers.add(cb);
+      return () => {
+        commitSubscribers.delete(cb);
+      };
+    }
+  };
+  const registryRootInstanceId = (() => {
+    if (typeof window === "undefined") return null;
+    const w = window;
+    const key = "__REACT_CANVAS_FIBER_DEVTOOLS__";
+    if (!w[key]) {
+      w[key] = {
+        version: 1,
+        nextRootInstanceId: 1,
+        roots: /* @__PURE__ */ new Map(),
+        picker: {
+          enabled: false,
+          rootInstanceId: null,
+          hoverId: null,
+          selectedId: null
+        },
+        pickerCleanup: null,
+        listRoots() {
+          const res = [];
+          for (const r of this.roots.values()) {
+            const rect = r.canvas.getBoundingClientRect();
+            res.push({
+              id: r.id,
+              rect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height },
+              options: r.options,
+              revision: r.revision
+            });
+          }
+          return res;
+        },
+        getRootDevtools(id) {
+          return this.roots.get(id)?.devtools ?? null;
+        },
+        getSnapshot(rootInstanceId2) {
+          return this.getRootDevtools(rootInstanceId2)?.getSnapshot?.() ?? null;
+        },
+        getNodeProps(rootInstanceId2, nodeId) {
+          return this.getRootDevtools(rootInstanceId2)?.getNodeProps?.(nodeId) ?? null;
+        },
+        setHighlight(rootInstanceId2, next) {
+          this.getRootDevtools(rootInstanceId2)?.setHighlight?.(next);
+        },
+        startPicker(rootInstanceId2) {
+          this.stopPicker();
+          const handle = this.roots.get(rootInstanceId2);
+          if (!handle) return false;
+          this.picker.enabled = true;
+          this.picker.rootInstanceId = rootInstanceId2;
+          this.picker.hoverId = null;
+          this.picker.selectedId = null;
+          const onMove = (e) => {
+            if (!this.picker.enabled) return;
+            if (e.target !== handle.canvas) {
+              if (this.picker.hoverId != null) {
+                this.picker.hoverId = null;
+                handle.devtools.setHighlight({ hoverId: null });
+              }
+              return;
+            }
+            const id = handle.devtools.hitTestClient(e.clientX, e.clientY);
+            if (id !== this.picker.hoverId) {
+              this.picker.hoverId = id;
+              handle.devtools.setHighlight({ hoverId: id, selectedId: this.picker.selectedId });
+            }
+          };
+          const onDown = (e) => {
+            if (!this.picker.enabled) return;
+            if (e.target !== handle.canvas) return;
+            if (e.button !== 0) return;
+            const id = handle.devtools.hitTestClient(e.clientX, e.clientY);
+            this.picker.selectedId = id;
+            handle.devtools.setHighlight({ hoverId: null, selectedId: id });
+            e.preventDefault();
+            e.stopPropagation();
+            this.stopPicker();
+          };
+          const onKeyDown = (e) => {
+            if (e.key !== "Escape") return;
+            this.stopPicker();
+          };
+          window.addEventListener("pointermove", onMove, true);
+          window.addEventListener("pointerdown", onDown, true);
+          window.addEventListener("keydown", onKeyDown, true);
+          this.pickerCleanup = () => {
+            window.removeEventListener("pointermove", onMove, true);
+            window.removeEventListener("pointerdown", onDown, true);
+            window.removeEventListener("keydown", onKeyDown, true);
+            handle.devtools.setHighlight({ hoverId: null });
+          };
+          return true;
+        },
+        stopPicker() {
+          if (!this.picker.enabled) return;
+          this.picker.enabled = false;
+          this.picker.rootInstanceId = null;
+          this.picker.hoverId = null;
+          this.picker.selectedId = null;
+          this.pickerCleanup?.();
+          this.pickerCleanup = null;
+        },
+        getPickerState() {
+          return { ...this.picker };
+        },
+        unregisterRoot(id) {
+          const handle = this.roots.get(id);
+          if (!handle) return;
+          if (this.picker.rootInstanceId === id) this.stopPicker();
+          handle.unsubscribe?.();
+          this.roots.delete(id);
+        }
+      };
+    }
+    const registry = w[key];
+    const rootInstanceId = registry.nextRootInstanceId++;
+    const entry = {
+      id: rootInstanceId,
+      canvas,
+      options: { width: options.width, height: options.height, dpr: options.dpr },
+      devtools: __devtools,
+      revision: 0,
+      unsubscribe: null
+    };
+    entry.unsubscribe = __devtools.subscribe(() => {
+      entry.revision += 1;
+    });
+    registry.roots.set(rootInstanceId, entry);
+    return rootInstanceId;
+  })();
+  return {
+    render(element) {
+      reconcilerRoot.render(element);
+    },
+    unmount() {
+      reconcilerRoot.unmount();
+      if (typeof window !== "undefined" && registryRootInstanceId != null) {
+        const w = window;
+        w.__REACT_CANVAS_FIBER_DEVTOOLS__?.unregisterRoot?.(registryRootInstanceId);
+      }
+    },
+    dispatchPointerEvent,
+    dispatchWheelEvent,
+    __devtools
+  };
+}
+function Canvas(props) {
+  const canvasRef = useRef(null);
+  const rootRef = useRef(null);
+  const dpr = props.dpr ?? 1;
+  const canvasStyle = useMemo(
+    () => ({
+      width: props.width,
+      height: props.height,
+      display: "block",
+      touchAction: "none",
+      ...props.style
+    }),
+    [props.width, props.height, props.style]
+  );
+  const dispatchPointer = useCallback(
+    (type, e) => {
+      const canvas = canvasRef.current;
+      const root = rootRef.current;
+      if (!canvas || !root) return;
+      const rect = canvas.getBoundingClientRect();
+      const scaleX = rect.width ? props.width / rect.width : 1;
+      const scaleY = rect.height ? props.height / rect.height : 1;
+      const x = (e.clientX - rect.left) * scaleX;
+      const y = (e.clientY - rect.top) * scaleY;
+      const res = root.dispatchPointerEvent(type, {
+        x,
+        y,
+        pointerId: e.pointerId ?? 0,
+        button: e.button ?? 0,
+        buttons: e.buttons ?? 0,
+        altKey: !!e.altKey,
+        ctrlKey: !!e.ctrlKey,
+        shiftKey: !!e.shiftKey,
+        metaKey: !!e.metaKey
+      });
+      if (res?.defaultPrevented && typeof e.preventDefault === "function") {
+        e.preventDefault();
+      }
+    },
+    [props.width, props.height]
+  );
+  const handleWheel = useCallback(
+    (e) => {
+      const canvas = canvasRef.current;
+      const root = rootRef.current;
+      if (!canvas || !root) return;
+      const rect = canvas.getBoundingClientRect();
+      const scaleX = rect.width ? props.width / rect.width : 1;
+      const scaleY = rect.height ? props.height / rect.height : 1;
+      let deltaX = e.deltaX ?? 0;
+      let deltaY = e.deltaY ?? 0;
+      if (e.deltaMode === 1) {
+        deltaX *= 16;
+        deltaY *= 16;
+      } else if (e.deltaMode === 2) {
+        deltaX *= props.width;
+        deltaY *= props.height;
+      }
+      const x = (e.clientX - rect.left) * scaleX;
+      const y = (e.clientY - rect.top) * scaleY;
+      const payload = {
+        x,
+        y,
+        deltaX: deltaX * scaleX,
+        deltaY: deltaY * scaleY,
+        altKey: !!e.altKey,
+        ctrlKey: !!e.ctrlKey,
+        shiftKey: !!e.shiftKey,
+        metaKey: !!e.metaKey
+      };
+      const res = root.dispatchWheelEvent(payload);
+      if (res?.defaultPrevented && typeof e.preventDefault === "function") {
+        e.preventDefault();
+      }
+    },
+    [props.width, props.height]
+  );
+  const handlePointerDown = useCallback(
+    (e) => {
+      const canvas = canvasRef.current;
+      if (canvas && typeof canvas.setPointerCapture === "function") {
+        try {
+          canvas.setPointerCapture(e.pointerId);
+        } catch (err) {
+        }
+      }
+      dispatchPointer("pointerdown", e);
+    },
+    [dispatchPointer]
+  );
+  useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const listener = (e) => {
+      handleWheel(e);
+    };
+    canvas.addEventListener("wheel", listener, { passive: false });
+    return () => {
+      canvas.removeEventListener("wheel", listener);
+    };
+  }, [handleWheel]);
+  useLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    rootRef.current = createCanvasRoot(canvas, {
+      width: props.width,
+      height: props.height,
+      dpr,
+      clearColor: props.clearColor,
+      fontFamily: props.fontFamily,
+      fontSize: props.fontSize,
+      fontWeight: props.fontWeight,
+      lineHeight: props.lineHeight
+    });
+    return () => {
+      rootRef.current?.unmount();
+      rootRef.current = null;
+    };
+  }, [
+    props.width,
+    props.height,
+    props.clearColor,
+    props.fontFamily,
+    props.fontSize,
+    props.fontWeight,
+    props.lineHeight,
+    dpr
+  ]);
+  useLayoutEffect(() => {
+    rootRef.current?.render(props.children ?? null);
+  }, [props.children]);
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      style: canvasStyle,
+      width: Math.floor(props.width * dpr),
+      height: Math.floor(props.height * dpr),
+      onPointerDown: handlePointerDown,
+      onPointerMove: (e) => dispatchPointer("pointermove", e),
+      onPointerUp: (e) => dispatchPointer("pointerup", e),
+      onPointerCancel: (e) => dispatchPointer("pointercancel", e)
+    }
+  );
+}
+function View(props) {
+  return createElement("View", props);
+}
+function Rect(props) {
+  return createElement("Rect", props);
+}
+function Text(props) {
+  return createElement("Text", props);
+}
+
+export { Canvas, Rect, Text, View };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map