revas 1.0.3 → 2.0.0

package/dist/revas.cjs

@@ -0,0 +1,1881 @@
+'use strict';
+
+var React6 = require('react');
+var bezier = require('bezier-easing');
+var ReactReconciler = require('react-reconciler');
+var constants = require('react-reconciler/constants');
+var Yoga = require('yoga-layout');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
+var bezier__default = /*#__PURE__*/_interopDefault(bezier);
+var ReactReconciler__default = /*#__PURE__*/_interopDefault(ReactReconciler);
+var Yoga__default = /*#__PURE__*/_interopDefault(Yoga);
+
+// src/revas/components/View.ts
+function View(props) {
+  return React6__namespace.createElement("View", props);
+}
+
+// src/revas/core/utils.ts
+function noop() {
+}
+var EMPTY_OBJECT = Object.freeze({});
+var EMPTY_ARRAY = Object.freeze([]);
+function flatten(array) {
+  const flattend = [];
+  (function flat(array2) {
+    array2.forEach(function(el) {
+      if (Array.isArray(el)) {
+        flat(el);
+      } else {
+        flattend.push(el);
+      }
+    });
+  })(array);
+  return flattend;
+}
+var now = typeof performance === "object" && typeof performance.now === "function" ? () => performance.now() : () => Date.now();
+function observeAnimatedValue(value, observer, defaultValue) {
+  if (value === void 0) {
+    return defaultValue;
+  }
+  if (value && value.getValue) {
+    return value.getValue(observer);
+  }
+  return value;
+}
+function applyAnimated(style, callback) {
+  if (style.animated) {
+    for (const key in style) {
+      style[key] = observeAnimatedValue(style[key], callback);
+    }
+  }
+  return style;
+}
+function getMergedStyleFromNode(node, callback) {
+  const {
+    props: { style = EMPTY_ARRAY }
+  } = node;
+  return applyAnimated(Object.assign({}, ...flatten([style])), callback);
+}
+function getFrameFromNode(node) {
+  const { frame } = node;
+  return frame;
+}
+function sortByZIndexAscending(a, b) {
+  const styleA = getMergedStyleFromNode(a);
+  const styleB = getMergedStyleFromNode(b);
+  return (styleA.zIndex || 0) - (styleB.zIndex || 0);
+}
+function clamp(n, min, max) {
+  return Math.min(Math.max(n, min), max);
+}
+var ASTRAL_RANGE = /\ud83c[\udffb-\udfff](?=\ud83c[\udffb-\udfff])|(?:[^\ud800-\udfff][\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]?|[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\ud800-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?)*/g;
+var WORD_RANGE = /\w+|\ud83c[\udffb-\udfff](?=\ud83c[\udffb-\udfff])|(?:[^\ud800-\udfff][\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]?|[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\ud800-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?)*/g;
+function getChars(str) {
+  return str.match(ASTRAL_RANGE) || EMPTY_ARRAY;
+}
+function getWords(str) {
+  return str.match(WORD_RANGE) || EMPTY_ARRAY;
+}
+function setShadow(canvas, color, x = 0, y = 0, blur = 0) {
+  if (color && (x || y || blur)) {
+    const { context: ctx } = canvas;
+    const { shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY } = ctx;
+    ctx.shadowBlur = blur;
+    ctx.shadowColor = color;
+    ctx.shadowOffsetX = x;
+    ctx.shadowOffsetY = y;
+    return function resetShadow() {
+      ctx.shadowBlur = shadowBlur;
+      ctx.shadowColor = shadowColor;
+      ctx.shadowOffsetX = shadowOffsetX;
+      ctx.shadowOffsetY = shadowOffsetY;
+    };
+  }
+  return noop;
+}
+function pushOpacity(canvas, opacity) {
+  if (opacity !== null && opacity < 1 && opacity >= 0) {
+    const cachedOpacity = canvas.context.globalAlpha || 1;
+    canvas.context.globalAlpha = cachedOpacity * opacity;
+    return function popOpacity() {
+      canvas.context.globalAlpha = cachedOpacity;
+    };
+  }
+  return noop;
+}
+var adapter = {
+  createImage: () => new Image()
+};
+
+// src/revas/components/common/drawText.ts
+var DEFAULT_MEASURE = [[], 0];
+function measureLines(canvas, chars, boxWidth, numberOfLines) {
+  const lines = [];
+  let width = 0;
+  let text = "";
+  let cursor = -1;
+  function pushLine(charWidth = 0, char = "", force = false) {
+    if (force || text) {
+      lines.push({ width, text });
+    }
+    if (cursor < chars.length && numberOfLines > 0 && lines.length >= numberOfLines) {
+      const lastLine = lines[lines.length - 1];
+      lastLine.text = `${lastLine.text.slice(0, -2)}...`;
+      lastLine.width = canvas.context.measureText(lastLine.text).width;
+      cursor = chars.length + 1;
+    } else {
+      width = charWidth;
+      text = char.trim();
+    }
+  }
+  while (cursor++ <= chars.length) {
+    if (chars.length > cursor) {
+      const char = chars[cursor];
+      if (char === "\n") {
+        pushLine(0, "", true);
+      } else {
+        const charWidth = canvas.context.measureText(char).width;
+        if (charWidth + width > boxWidth) {
+          pushLine(charWidth, char);
+        } else {
+          width += charWidth;
+          text += char;
+        }
+      }
+    } else {
+      pushLine();
+    }
+  }
+  return lines;
+}
+function splitContent(content, wordBreak) {
+  switch (wordBreak) {
+    case "break-all":
+      return getChars(content);
+    case "keep-all":
+      return [content];
+    default:
+      return getWords(content);
+  }
+}
+function applyTextStyle(canvas, options) {
+  const { fontStyle, fontWeight, fontSize, fontFamily, textBaseline, color } = options.textStyle;
+  canvas.context.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+  canvas.context.fillStyle = color;
+  canvas.context.textBaseline = textBaseline;
+}
+function measureText(canvas, options) {
+  const lines = measureLines(
+    canvas,
+    splitContent(options.content, options.textStyle.wordBreak),
+    options.frame.width,
+    options.numberOfLines
+  );
+  return [lines, options.textStyle.lineHeight * lines.length];
+}
+function drawText(canvas, options, lines) {
+  const { textStyle: style, frame } = options;
+  const resetShadow = setShadow(
+    canvas,
+    style.textShadowColor,
+    style.textShadowOffsetX,
+    style.textShadowOffsetY,
+    style.textShadowBlur
+  );
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    let { x } = frame;
+    switch (style.textAlign) {
+      case "center":
+        x = x + frame.width / 2 - line.width / 2;
+        break;
+      case "right":
+        x = x + frame.width - line.width;
+        break;
+    }
+    canvas.context.fillText(line.text, x, style.lineHeight * (i + 0.5) + frame.y);
+  }
+  resetShadow();
+}
+
+// src/revas/components/Text.ts
+var Text = class extends React6__namespace.Component {
+  state = { height: 0 };
+  _measured = DEFAULT_MEASURE;
+  _drawed;
+  drawText = (canvas, node) => {
+    const content = getTextFromNode(node);
+    if (content) {
+      const options = {
+        numberOfLines: node.props.numberOfLines || 0,
+        textStyle: getTextStyleFromNode(node),
+        frame: getFrameFromNode(node),
+        content
+      };
+      applyTextStyle(canvas, options);
+      if (textPropsChanged(options, this._drawed)) {
+        this._measured = measureText(canvas, options);
+        this._drawed = options;
+      }
+      const [lines, height] = this._measured;
+      drawText(canvas, options, lines);
+      if (height !== this.state.height) {
+        Promise.resolve().then(() => {
+          if (this._drawed) {
+            this.setState({ height });
+          }
+        });
+      }
+    }
+  };
+  render() {
+    const { children, numberOfLines, ...others } = this.props;
+    return React6__namespace.createElement(
+      "View",
+      others,
+      React6__namespace.createElement("Text", {
+        content: children,
+        customDrawer: this.drawText,
+        textStyle: others.style,
+        style: this.state,
+        numberOfLines,
+        $ready: Boolean(this._drawed)
+      })
+    );
+  }
+};
+var TEXT_STYLES_LIST = [
+  "fontStyle",
+  "fontWeight",
+  "fontSize",
+  "fontFamily",
+  "textBaseline",
+  "wordBreak",
+  "lineHeight"
+];
+var DEFAULT_TEXTSTYLE = {
+  fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue'",
+  fontWeight: "normal",
+  fontSize: 14,
+  color: "#000",
+  fontStyle: "normal",
+  textBaseline: "middle"
+};
+function textStyleChanged(left, right) {
+  for (let i = 0; i < TEXT_STYLES_LIST.length; i++) {
+    const item = TEXT_STYLES_LIST[i];
+    if (left[item] !== right[item]) {
+      return true;
+    }
+  }
+  return false;
+}
+function textPropsChanged(left, right) {
+  if (!right) {
+    return true;
+  }
+  if (left.content !== right.content) {
+    return true;
+  }
+  if (left.numberOfLines !== right.numberOfLines) {
+    return true;
+  }
+  if (left.frame.width !== right.frame.width) {
+    return true;
+  }
+  return textStyleChanged(left.textStyle, right.textStyle);
+}
+function getTextFromNode(node) {
+  const frame = getFrameFromNode(node);
+  if (frame.width > 0) {
+    const { content } = node.props;
+    if (typeof content === "string") {
+      return content;
+    } else if (Array.isArray(content)) {
+      return content.join("");
+    }
+  }
+  return "";
+}
+function getTextStyleFromNode(node) {
+  const style = Object.assign({}, DEFAULT_TEXTSTYLE, ...flatten([node.props.textStyle]));
+  style.lineHeight = style.lineHeight || style.fontSize * 1.1;
+  return applyAnimated(style);
+}
+
+// src/revas/components/common/imageLoader.ts
+var CachedImage = class {
+  constructor(src) {
+    this.src = src;
+    if (!this.image) {
+      throw new Error("Revas: createImage must be initialized");
+    }
+    this.image.onload = this.onload;
+    this.image.onerror = this.onerror;
+    this.image.src = src;
+  }
+  image = adapter.createImage();
+  targets = [];
+  _ready = false;
+  get empty() {
+    return this.targets.length === 0;
+  }
+  onload = () => {
+    this._ready = true;
+    this.targets.forEach((target) => target(this.image));
+  };
+  onerror = () => {
+  };
+  add(target) {
+    if (this.targets.indexOf(target) < 0) {
+      this.targets.push(target);
+      if (this._ready) {
+        target(this.image);
+      }
+    }
+  }
+  remove(target) {
+    const index = this.targets.indexOf(target);
+    this.targets.splice(index, 1);
+  }
+};
+var cache = /* @__PURE__ */ new Map();
+function get(src, target) {
+  if (!cache.has(src)) {
+    cache.set(src, new CachedImage(src));
+  }
+  const cached = cache.get(src);
+  target && cached.add(target);
+  return cached.image;
+}
+function remove(src, target) {
+  if (cache.has(src)) {
+    const cached = cache.get(src);
+    cached.remove(target);
+    if (cached.empty) {
+      cache.delete(src);
+    }
+  }
+}
+
+// src/revas/components/common/drawImage.ts
+function drawImage(canvas, node, flags) {
+  const image = get(node.props.src);
+  if (image.height <= 0) {
+    return;
+  }
+  const frame = getFrameFromNode(node);
+  const { width, height, x, y } = frame;
+  if (width <= 0 || height <= 0) {
+    return;
+  }
+  const style = getMergedStyleFromNode(node);
+  const actualSize = {
+    width: image.width,
+    height: image.height
+  };
+  const focusPoint = style.focusPoint || {
+    x: actualSize.width * 0.5,
+    y: actualSize.height * 0.5
+  };
+  const hasClip = flags.hasRadius && !flags.hasClip;
+  if (hasClip) {
+    canvas.context.save();
+    canvas.context.clip();
+  }
+  if (style.resizeMode === "contain") {
+    const scale = Math.min(width / actualSize.width, height / actualSize.height) || 1;
+    const scaledSize = {
+      width: actualSize.width * scale,
+      height: actualSize.height * scale
+    };
+    const sw = Math.round(actualSize.width);
+    const sh = Math.round(actualSize.height);
+    const dw = Math.round(scaledSize.width);
+    const dh = Math.round(scaledSize.height);
+    const dx = Math.round((width - scaledSize.width) / 2 + x);
+    const dy = Math.round((height - scaledSize.height) / 2 + y);
+    canvas.context.drawImage(image, 0, 0, sw, sh, dx, dy, dw, dh);
+  } else {
+    const scale = Math.max(width / actualSize.width, height / actualSize.height) || 1;
+    const scaledSize = {
+      width: actualSize.width * scale,
+      height: actualSize.height * scale
+    };
+    const sx = Math.round(clamp(width * 0.5 - focusPoint.x * scale, width - scaledSize.width, 0)) * (-1 / scale);
+    const sy = Math.round(clamp(height * 0.5 - focusPoint.y * scale, height - scaledSize.height, 0)) * (-1 / scale);
+    const sw = Math.round(actualSize.width - sx * 2);
+    const sh = Math.round(actualSize.height - sy * 2);
+    const dw = Math.round(width);
+    const dh = Math.round(height);
+    const dx = Math.round(x);
+    const dy = Math.round(y);
+    canvas.context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
+  }
+  if (hasClip) {
+    canvas.context.restore();
+  }
+}
+
+// src/revas/components/Image.ts
+var DEFAULT_STYLE = { path: true };
+function ImageView(props) {
+  const { src, style } = props;
+  const [ready, setReady] = React6__namespace.useState(false);
+  React6__namespace.useEffect(() => {
+    if (src) {
+      const onReady = () => setReady(true);
+      get(src, onReady);
+      return () => remove(src, onReady);
+    }
+  }, [src]);
+  return React6__namespace.createElement("Image", {
+    customDrawer: ready ? drawImage : void 0,
+    ...props,
+    style: [DEFAULT_STYLE, style],
+    $ready: ready
+  });
+}
+var AnimatedNode = class {
+  interpolate(inRange, outRange, ease2 = Easing.linear) {
+    return new AnimatedInterpolate(this, inRange, outRange, ease2);
+  }
+};
+var AnimatedValue = class extends AnimatedNode {
+  constructor(_value) {
+    super();
+    this._value = _value;
+  }
+  // TODO: tempor
+  _observer;
+  setValue(value) {
+    this._value = value;
+    if (this._observer) {
+      const observer = this._observer;
+      this._observer = void 0;
+      observer();
+    }
+  }
+  getValue(observer) {
+    if (observer) {
+      this._observer = observer;
+    }
+    return this._value;
+  }
+};
+var AnimatedInterpolate = class extends AnimatedNode {
+  constructor(source, inRange, outRange, ease2) {
+    super();
+    this.source = source;
+    this.inRange = inRange;
+    this.outRange = outRange;
+    this.ease = ease2;
+  }
+  // TODO: Check inRange is asc
+  getValue(observer) {
+    const value = this.source.getValue(observer);
+    const len = this.inRange.length;
+    let i = 1;
+    for (; i < len; i++) {
+      const x1 = this.inRange[i];
+      if (value < x1 || i === len - 1) {
+        const x0 = this.inRange[i - 1];
+        const y0 = this.outRange[i - 1];
+        const y1 = this.outRange[i];
+        const percent = (value - x0) / (x1 - x0);
+        const result = (y1 - y0) * this.ease(percent) + y0;
+        return result;
+      }
+    }
+    return 0;
+  }
+};
+var AnimatedTiming = class {
+  constructor(value, config) {
+    this.value = value;
+    this.config = config;
+  }
+  _startTime = 0;
+  _startValue = 0;
+  _onEnd;
+  _next = 0;
+  get _ease() {
+    return this.config.ease || Easing.linear;
+  }
+  start(onEnd) {
+    this._startTime = Date.now();
+    this._startValue = this.value.getValue();
+    this._onEnd = onEnd;
+    this._next = requestAnimationFrame(this._loop);
+    return this;
+  }
+  stop() {
+    cancelAnimationFrame(this._next);
+    return this;
+  }
+  promise() {
+    return new Promise((resolve) => this._onEnd = resolve);
+  }
+  _loop = () => {
+    const duration = Date.now() - this._startTime;
+    if (duration < this.config.duration) {
+      const percent = duration / this.config.duration;
+      const inc = this._ease(percent) * (this.config.to - this._startValue);
+      this.value.setValue(this._startValue + inc);
+      this._next = requestAnimationFrame(this._loop);
+    } else {
+      this.value.setValue(this.config.to);
+      this._onEnd && requestAnimationFrame(this._onEnd);
+    }
+  };
+};
+function timing(value, config) {
+  return new AnimatedTiming(value, config);
+}
+var ease;
+function getEase() {
+  if (!ease) {
+    ease = bezier__default.default(0.42, 0, 1, 1);
+  }
+  return ease;
+}
+var Easing = {
+  linear(t) {
+    return t;
+  },
+  ease(t) {
+    return getEase()(t);
+  },
+  /**
+   * Runs an easing function forwards.
+   */
+  in(easing = getEase()) {
+    return easing;
+  },
+  /**
+   * Runs an easing function backwards.
+   */
+  out(easing = getEase()) {
+    return (t) => 1 - easing(1 - t);
+  },
+  /**
+   * Makes any easing function symmetrical. The easing function will run
+   * forwards for half of the duration, then backwards for the rest of the
+   * duration.
+   */
+  inOut(easing = getEase()) {
+    return (t) => {
+      if (t < 0.5) {
+        return easing(t * 2) / 2;
+      }
+      return 1 - easing((1 - t) * 2) / 2;
+    };
+  },
+  bounce(t) {
+    if (t < 1 / 2.75) {
+      return 7.5625 * t * t;
+    }
+    if (t < 2 / 2.75) {
+      const t22 = t - 1.5 / 2.75;
+      return 7.5625 * t22 * t22 + 0.75;
+    }
+    if (t < 2.5 / 2.75) {
+      const t22 = t - 2.25 / 2.75;
+      return 7.5625 * t22 * t22 + 0.9375;
+    }
+    const t2 = t - 2.625 / 2.75;
+    return 7.5625 * t2 * t2 + 0.984375;
+  },
+  elastic(bounciness = 1) {
+    const p = bounciness * Math.PI;
+    return (t) => 1 - Math.pow(Math.cos(t * Math.PI / 2), 3) * Math.cos(t * p);
+  }
+};
+
+// src/revas/components/Touchable.ts
+var Touchable = class extends React6__namespace.Component {
+  static defaultProps = {
+    activeOpacity: 0.7
+  };
+  _style = {
+    opacity: new AnimatedValue(1),
+    animated: true
+  };
+  _start;
+  _tid = "";
+  _onTouchStart = (e) => {
+    this._tid = Object.keys(e.touches)[0];
+    this._start = e.touches[this._tid];
+    this._style.opacity.setValue(this.props.activeOpacity);
+    this.props.onPressIn && this.props.onPressIn();
+  };
+  _onTouchEnd = (e) => {
+    if (this._start && e.touches[this._tid]) {
+      if (Math.abs(this._start.x - e.touches[this._tid].x) < 3 && Math.abs(this._start.y - e.touches[this._tid].y) < 3) {
+        this.props.onPress && this.props.onPress();
+      }
+    }
+    this._style.opacity.setValue(1);
+    this.props.onPressOut && this.props.onPressOut();
+  };
+  render() {
+    return React6__namespace.createElement("Touchable", {
+      onTouchStart: this._onTouchStart,
+      onTouchEnd: this._onTouchEnd,
+      ...this.props,
+      style: [
+        this.props.style,
+        this._style
+      ]
+    });
+  }
+};
+
+// src/revas/components/common/Scroller.ts
+var Handler = class {
+  offset = 0;
+  velocity = 0;
+  max = -1;
+  paging = 0;
+  _last = -1;
+  capture(value) {
+    if (this._last < 0) {
+      this._last = value;
+    }
+  }
+  onMove(value, duration) {
+    if (this._last >= 0 && duration > 0) {
+      const move = this._last - value;
+      this.velocity = move / duration;
+      this._last = value;
+      this.change(move);
+    }
+  }
+  onEnd() {
+    if (this._last >= 0) {
+      this._last = -1;
+    }
+  }
+  afterEnd(duration) {
+    if (this._last < 0) {
+      const absv = Math.abs(this.velocity);
+      if (this.paging > 0 && absv <= 0.5 && this.offset < this.max) {
+        const distance = Math.round(this.offset / this.paging + this.velocity) * this.paging - this.offset;
+        this.velocity = clamp(distance / 2e3 + friction(this.velocity, duration, 0.01), -0.5, 0.5);
+        if (Math.abs(distance) > 0.5 || absv > 0.05) {
+          const move = this.velocity * duration;
+          this.change(move);
+          return true;
+        } else {
+          this.change(distance);
+        }
+      } else if (absv > 0.05) {
+        this.velocity = friction(this.velocity, duration, 2e-3);
+        const move = this.velocity * duration;
+        this.change(move);
+        return true;
+      } else {
+        this.velocity = 0;
+      }
+    }
+    return false;
+  }
+  change(move) {
+    const _offset = clamp(this.offset + move, 0, this.max > 0 ? this.max : 0);
+    if (_offset !== this.offset) {
+      this.offset = _offset;
+    } else if (this._last < 0) {
+      this.velocity = 0;
+    }
+  }
+};
+var Scroller = class {
+  constructor(listener) {
+    this.listener = listener;
+  }
+  _timestamp = 0;
+  _x = new Handler();
+  _y = new Handler();
+  _tid = "";
+  _timer;
+  horizontal = false;
+  set maxX(value) {
+    this._x.max = value;
+  }
+  get maxX() {
+    return this._x.max;
+  }
+  set maxY(value) {
+    this._y.max = value;
+  }
+  get maxY() {
+    return this._y.max;
+  }
+  set pagingX(value) {
+    this._x.paging = value;
+  }
+  set pagingY(value) {
+    this._y.paging = value;
+  }
+  _sign(e) {
+    e.scroll = { ...e.scroll, x: true, y: true };
+    const stopPropagation = e.scroll.stopPropagation || noop;
+    if (this.horizontal) {
+      if (this._x.velocity > 0) {
+        e.scroll.y = false;
+        stopPropagation();
+      }
+      if (this._x.offset > 0 && this._x.offset < this._x.max) {
+        e.scroll.x = false;
+      }
+    } else {
+      if (this._y.velocity > 0) {
+        e.scroll.x = false;
+        stopPropagation();
+      }
+      if (this._y.offset > 0 && this._y.offset < this._y.max) {
+        e.scroll.y = false;
+      }
+    }
+    e.stopPropagation = () => {
+      this.touchEnd();
+      stopPropagation();
+    };
+  }
+  _check(e) {
+    if (this.horizontal && e.scroll && e.scroll.x === false) {
+      return this.touchEnd();
+    }
+    if (!this.horizontal && e.scroll && e.scroll.y === false) {
+      return this.touchEnd();
+    }
+    return true;
+  }
+  touchStart = (e) => {
+    if (!this._tid) {
+      this._tid = Object.keys(e.touches)[0];
+      this._timestamp = e.timestamp;
+      const { x, y } = e.touches[this._tid];
+      this.horizontal ? this._x.capture(x) : this._y.capture(y);
+      this.emit("start");
+    }
+  };
+  touchMove = (e) => {
+    if (this._tid && e.touches[this._tid] && this._check(e)) {
+      const { x, y } = e.touches[this._tid];
+      const duration = e.timestamp - this._timestamp;
+      this._timestamp = e.timestamp;
+      this.horizontal ? this._x.onMove(x, duration) : this._y.onMove(y, duration);
+      this.emit("scroll");
+      this._sign(e);
+    }
+  };
+  touchEnd = () => {
+    if (this._tid) {
+      this._tid = "";
+      this._timestamp = Date.now();
+      this._x.onEnd();
+      this._y.onEnd();
+      this._timer = requestAnimationFrame(this.afterEnd);
+    }
+  };
+  afterEnd = () => {
+    const timestamp = Date.now();
+    const duration = timestamp - this._timestamp;
+    this._timestamp = timestamp;
+    if (this.horizontal ? this._x.afterEnd(duration) : this._y.afterEnd(duration)) {
+      this.emit("scroll");
+      this._timer = requestAnimationFrame(this.afterEnd);
+    } else {
+      this.emit("end");
+    }
+  };
+  emit(type) {
+    this.listener({
+      type,
+      x: this._x.offset,
+      vx: this._x.velocity,
+      y: this._y.offset,
+      vy: this._y.velocity,
+      timestamp: this._timestamp,
+      tid: this._tid
+    });
+  }
+  cancel() {
+    cancelAnimationFrame(this._timer);
+    this._tid = "";
+    this._timestamp = Date.now();
+    this._x.onEnd();
+    this._y.onEnd();
+  }
+};
+function friction(v, duration, factor) {
+  return v - Math.min(duration * factor, 1) * v;
+}
+
+// src/revas/components/ScrollView.ts
+var ScrollView = class extends React6__namespace.Component {
+  _height = -1;
+  _contentHeight = -1;
+  _width = -1;
+  _contentWidth = -1;
+  _innerStyle = {
+    translateX: new AnimatedValue(0),
+    translateY: new AnimatedValue(0),
+    position: "absolute",
+    animated: true
+  };
+  _offset = { x: 0, y: 0 };
+  _scroller = new Scroller((e) => {
+    const { x = 0, y = 0 } = this._offset;
+    this.props.horizontal ? this._innerStyle.translateX.setValue(x - e.x) : this._innerStyle.translateY.setValue(y - e.y);
+    switch (e.type) {
+      case "scroll":
+        return this.props.onScroll && this.props.onScroll(e);
+      case "start":
+        return this.props.onScrollStart && this.props.onScrollStart(e);
+      case "end":
+        return this.props.onScrollEnd && this.props.onScrollEnd(e);
+    }
+  });
+  componentWillUnmount() {
+    this._scroller.cancel();
+  }
+  _onLayout = (frame) => {
+    if (this._width !== frame.width || this._height !== frame.height) {
+      this._height = frame.height;
+      this._width = frame.width;
+      this._checkLayout();
+      if (this.props.paging) {
+        if (this.props.horizontal) {
+          this._scroller.pagingX = this.props.paging === true ? frame.width : this.props.paging;
+        } else {
+          this._scroller.pagingY = this.props.paging === true ? frame.height : this.props.paging;
+        }
+      }
+    }
+    this.props.onLayout && this.props.onLayout(frame);
+  };
+  _onContentLayout = (frame) => {
+    const { x = 0, y = 0 } = this._offset;
+    const width = frame.width + x;
+    const height = frame.height + y;
+    if (this._contentWidth !== width || this._contentHeight !== height) {
+      this._contentHeight = height;
+      this._contentWidth = width;
+      this._checkLayout();
+    }
+  };
+  _checkLayout = () => {
+    const maxX = this._contentWidth - this._width;
+    const maxY = this._contentHeight - this._height;
+    if (maxX > 0 && maxX !== this._scroller.maxX || maxY > 0 && maxY !== this._scroller.maxY) {
+      this._scroller.maxX = maxX;
+      this._scroller.maxY = maxY;
+      this._scroller.emit("none");
+    }
+  };
+  render() {
+    const { children, horizontal, offset, ...others } = this.props;
+    this._scroller.horizontal = horizontal;
+    if (offset) {
+      this._offset = offset;
+      this._scroller.emit("none");
+    }
+    return React6__namespace.createElement(
+      "Scrollable",
+      { ...others, onLayout: this._onLayout },
+      React6__namespace.createElement("ScrollContent", {
+        onTouchStart: this._scroller.touchStart,
+        onTouchMove: this._scroller.touchMove,
+        onTouchEnd: this._scroller.touchEnd,
+        onLayout: this._onContentLayout,
+        style: [
+          this._innerStyle,
+          {
+            flexDirection: horizontal ? "row" : "column",
+            [horizontal ? "height" : "width"]: "100%"
+          }
+        ],
+        children
+      })
+    );
+  }
+};
+var ListView = class extends React6__namespace.Component {
+  state = {
+    start: 0,
+    end: 1
+  };
+  _height = 0;
+  componentDidMount() {
+    this.checkVisible(0);
+  }
+  checkVisible = (y) => {
+    if (this._height > 0) {
+      const { itemHeight } = this.props;
+      const { start: _start, end: _end } = this.state;
+      const start = Math.max(0, Math.floor((y - 10) / itemHeight));
+      const end = Math.floor((y + this._height + 10) / itemHeight);
+      if (start !== _start || end !== _end) {
+        this.setState({ start, end });
+      }
+    }
+  };
+  _onScroll = (e) => {
+    this.checkVisible(e.y);
+    this.props.onScroll && this.props.onScroll(e);
+  };
+  _onLayout = (frame) => {
+    if (this._height !== frame.height) {
+      this._height = frame.height;
+    }
+  };
+  renderItem = (item, i) => {
+    const { data, renderItem } = this.props;
+    const index = i + this.state.start;
+    return React6__namespace.createElement(React6__namespace.Fragment, { key: index }, renderItem(item, index, data));
+  };
+  render() {
+    const { data, itemHeight } = this.props;
+    const { start, end } = this.state;
+    return React6__namespace.createElement(
+      ScrollView,
+      {
+        ...this.props,
+        onScroll: this._onScroll,
+        onLayout: this._onLayout,
+        offset: { y: start * itemHeight }
+      },
+      data.slice(start, end + 1).map(this.renderItem)
+    );
+  }
+};
+var DEFAULT_STYLE2 = { path: true };
+function LinearGradient(props) {
+  return React6__namespace.createElement("LinearGradient", {
+    ...props,
+    style: [DEFAULT_STYLE2, props.style],
+    customDrawer: drawGradient
+  });
+}
+function drawGradient(canvas, node) {
+  const { colors } = node.props;
+  if (colors && colors.length > 0) {
+    const { start = { x: 0, y: 0 }, end = { x: 1, y: 0 } } = node.props;
+    const frame = getFrameFromNode(node);
+    const grad = canvas.context.createLinearGradient(
+      start.x * frame.width + frame.x,
+      start.y * frame.height + frame.y,
+      end.x * frame.width + frame.x,
+      end.y * frame.height + frame.y
+    );
+    for (let i = 0; i < colors.length; i++) {
+      grad.addColorStop(i / (colors.length - 1), colors[i]);
+    }
+    canvas.context.fillStyle = grad;
+    canvas.context.fill();
+  }
+}
+
+// src/revas/core/Node.ts
+var Frame = class {
+  constructor(x = 0, y = 0, width = 0, height = 0) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+};
+var Node = class {
+  constructor(type, props) {
+    this.type = type;
+    this.props = props;
+  }
+  children = [];
+  frame = new Frame();
+  parent;
+  get $ready() {
+    if (this.props.$ready === false) {
+      return false;
+    }
+    for (let i = 0; i < this.children.length; i++) {
+      const child = this.children[i];
+      if (child.$ready === false) {
+        return false;
+      }
+    }
+    return true;
+  }
+};
+
+// src/revas/core/reconciler.ts
+var isDev = process.env.NODE_ENV !== "production";
+var currentUpdatePriority = constants.DefaultEventPriority;
+function checkAndRemove(parent, child) {
+  const index = parent.children.indexOf(child);
+  if (index >= 0) {
+    parent.children.splice(index, 1);
+  }
+}
+function appendChild(parent, child) {
+  checkAndRemove(parent, child);
+  parent.children.push(child);
+  child.parent = parent;
+}
+var RevasReconciler = ReactReconciler__default.default({
+  supportsMutation: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  isPrimaryRenderer: false,
+  // Timing
+  now,
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+  supportsMicrotasks: true,
+  scheduleMicrotask: typeof queueMicrotask === "function" ? queueMicrotask : setTimeout,
+  // Update priority (required for React 19)
+  getCurrentEventPriority: () => constants.DefaultEventPriority,
+  setCurrentUpdatePriority: (priority) => {
+    currentUpdatePriority = priority;
+  },
+  getCurrentUpdatePriority: () => currentUpdatePriority,
+  resolveUpdatePriority: () => currentUpdatePriority || constants.DefaultEventPriority,
+  // Suspense commit control (required for React 19)
+  maySuspendCommit: () => false,
+  preloadInstance: () => true,
+  startSuspendingCommit: noop,
+  suspendInstance: noop,
+  waitForCommitToBeReady: () => null,
+  // Transitions (required for React 19)
+  NotPendingTransition: null,
+  HostTransitionContext: {
+    $$typeof: /* @__PURE__ */ Symbol.for("react.context"),
+    _currentValue: null,
+    _currentValue2: null
+  },
+  resetFormInstance: noop,
+  // Event tracking (required for React 19)
+  trackSchedulerEvent: noop,
+  resolveEventType: () => null,
+  resolveEventTimeStamp: () => -1.1,
+  shouldAttemptEagerTransition: () => false,
+  // Instance creation
+  createInstance(type, props) {
+    return new Node(type, props);
+  },
+  createTextInstance() {
+    throw new Error("Revas: string cannot be child out of <Text/>");
+  },
+  // Tree operations
+  appendChild,
+  appendInitialChild: appendChild,
+  appendChildToContainer(container, instance) {
+    if (instance.type !== "Root") {
+      throw new Error(`wrong root instance type: ${instance.type}`);
+    }
+    container.setRoot(instance);
+  },
+  removeChild(parent, child) {
+    checkAndRemove(parent, child);
+    child.parent = void 0;
+  },
+  removeChildFromContainer(container) {
+    container.setRoot();
+  },
+  insertBefore(parent, child, before) {
+    checkAndRemove(parent, child);
+    const beforeIndex = parent.children.indexOf(before);
+    parent.children.splice(beforeIndex, 0, child);
+    child.parent = parent;
+  },
+  insertInContainerBefore() {
+    throw new Error("shouldn't be here: insertInContainerBefore");
+  },
+  clearContainer() {
+  },
+  // Finalization
+  finalizeInitialChildren() {
+    return false;
+  },
+  // Public instance
+  getPublicInstance(instance) {
+    return instance;
+  },
+  // Updates
+  prepareUpdate() {
+    return true;
+  },
+  commitUpdate(instance, _updatePayload, _type, oldProps, newProps) {
+    const mergedProps = { ...oldProps };
+    for (const key in newProps) {
+      if (newProps[key] !== void 0) {
+        mergedProps[key] = newProps[key];
+      }
+    }
+    instance.props = mergedProps;
+  },
+  commitMount: noop,
+  // Commit phase
+  prepareForCommit() {
+    return null;
+  },
+  resetAfterCommit(container) {
+    container.draw(true);
+  },
+  resetTextContent: noop,
+  // Context
+  getRootHostContext() {
+    return {};
+  },
+  getChildHostContext(parentHostContext) {
+    return parentHostContext;
+  },
+  shouldSetTextContent() {
+    return false;
+  },
+  // Visibility (required for React 19 Offscreen)
+  hideInstance: noop,
+  hideTextInstance: noop,
+  unhideInstance: noop,
+  unhideTextInstance: noop,
+  // Required stubs for React 19
+  getInstanceFromNode() {
+    return null;
+  },
+  beforeActiveInstanceBlur: noop,
+  afterActiveInstanceBlur: noop,
+  preparePortalMount: noop,
+  prepareScopeUpdate: noop,
+  getInstanceFromScope() {
+    return null;
+  },
+  detachDeletedInstance: noop
+});
+RevasReconciler.injectIntoDevTools({
+  bundleType: isDev ? 1 : 0,
+  version: React6.version,
+  rendererPackageName: "revas",
+  findHostInstanceByFiber: RevasReconciler.findHostInstance
+});
+var reconciler_default = RevasReconciler;
+var AppContext = React6.createContext({
+  clientWidth: 0,
+  clientHeight: 0,
+  deviceRatio: 1
+});
+function withContext(comp) {
+  comp.contextType = AppContext;
+  return comp;
+}
+function Root(props) {
+  return React6.createElement(AppContext.Provider, { value: props }, React6.createElement("Root", props));
+}
+function funcName(key) {
+  return `set${key[0].toUpperCase()}${key.substr(1)}`;
+}
+function checkAndRun(yoga, key, ...values) {
+  if (yoga[key]) {
+    yoga[key](...values);
+  } else {
+    throw new Error(`Revas: No Such Style Func - ${key}`);
+  }
+}
+function parseValue(func, value) {
+  if (typeof value === "number") {
+    return [func, value];
+  } else if (value === "auto") {
+    return [`${func}Auto`];
+  } else if (value.endsWith("%")) {
+    return [`${func}Percent`, Number(value.slice(0, -1))];
+  } else {
+    throw new Error(`Revas: No Such Style Value - ${value}`);
+  }
+}
+function parseEnum(func, enums, value) {
+  if (enums[value] !== void 0) {
+    return [func, enums[value]];
+  } else {
+    throw new Error(`Revas: No Such Style Value - ${value}`);
+  }
+}
+function parseEdge(func, edge, value) {
+  if (typeof value === "number") {
+    return [func, edge, value];
+  } else if (value === "auto") {
+    return [`${func}Auto`, edge];
+  } else if (value.endsWith("%")) {
+    return [`${func}Percent`, edge, Number(value.slice(0, -1))];
+  } else {
+    throw new Error(`Revas: No Such Style Value - ${value}`);
+  }
+}
+var ALIGN_ENUM = {
+  auto: Yoga.Align.Auto,
+  baseline: Yoga.Align.Baseline,
+  center: Yoga.Align.Center,
+  "flex-end": Yoga.Align.FlexEnd,
+  "flex-start": Yoga.Align.FlexStart,
+  "space-around": Yoga.Align.SpaceAround,
+  "space-between": Yoga.Align.SpaceBetween,
+  stretch: Yoga.Align.Stretch
+};
+var STYLE_MAP = {};
+var AVAILABLE = {
+  VALUE: [
+    "flex",
+    "width",
+    "height",
+    "minWidth",
+    "maxWidth",
+    "minHeight",
+    "maxHeight",
+    "flexGrow",
+    "flexShrink",
+    "aspectRatio"
+  ],
+  ENUM: [
+    {
+      key: "justifyContent",
+      enum: {
+        center: Yoga.Justify.Center,
+        "flex-end": Yoga.Justify.FlexEnd,
+        "flex-start": Yoga.Justify.FlexStart,
+        "space-around": Yoga.Justify.SpaceAround,
+        "space-between": Yoga.Justify.SpaceBetween,
+        "space-evenly": Yoga.Justify.SpaceEvenly
+      }
+    },
+    { key: "alignItems", enum: ALIGN_ENUM },
+    { key: "alignSelf", enum: ALIGN_ENUM },
+    { key: "alignContent", enum: ALIGN_ENUM },
+    {
+      key: "flexWrap",
+      enum: {
+        "no-wrap": Yoga.Wrap.NoWrap,
+        wrap: Yoga.Wrap.Wrap,
+        "wrap-reverse": Yoga.Wrap.WrapReverse
+      }
+    },
+    {
+      key: "flexDirection",
+      enum: {
+        column: Yoga.FlexDirection.Column,
+        "column-reverse": Yoga.FlexDirection.ColumnReverse,
+        row: Yoga.FlexDirection.Row,
+        "row-reverse": Yoga.FlexDirection.RowReverse
+      }
+    },
+    {
+      key: "position",
+      remap: "positionType",
+      enum: {
+        relative: Yoga.PositionType.Relative,
+        absolute: Yoga.PositionType.Absolute,
+        static: Yoga.PositionType.Static
+      }
+    }
+  ],
+  EDGE: [
+    { key: "padding", remap: "padding", edge: Yoga.Edge.All },
+    { key: "paddingLeft", remap: "padding", edge: Yoga.Edge.Left },
+    { key: "paddingRight", remap: "padding", edge: Yoga.Edge.Right },
+    { key: "paddingTop", remap: "padding", edge: Yoga.Edge.Top },
+    { key: "paddingBottom", remap: "padding", edge: Yoga.Edge.Bottom },
+    { key: "left", remap: "position", edge: Yoga.Edge.Left },
+    { key: "right", remap: "position", edge: Yoga.Edge.Right },
+    { key: "top", remap: "position", edge: Yoga.Edge.Top },
+    { key: "bottom", remap: "position", edge: Yoga.Edge.Bottom },
+    { key: "margin", remap: "margin", edge: Yoga.Edge.All },
+    { key: "marginLeft", remap: "margin", edge: Yoga.Edge.Left },
+    { key: "marginRight", remap: "margin", edge: Yoga.Edge.Right },
+    { key: "marginTop", remap: "margin", edge: Yoga.Edge.Top },
+    { key: "marginBottom", remap: "margin", edge: Yoga.Edge.Bottom },
+    { key: "borderWidth", remap: "border", edge: Yoga.Edge.All },
+    { key: "borderLeftWidth", remap: "border", edge: Yoga.Edge.Left },
+    { key: "borderRightWidth", remap: "border", edge: Yoga.Edge.Right },
+    { key: "borderTopWidth", remap: "border", edge: Yoga.Edge.Top },
+    { key: "borderBottomWidth", remap: "border", edge: Yoga.Edge.Bottom }
+  ]
+};
+AVAILABLE.VALUE.forEach((key) => {
+  const func = funcName(key);
+  STYLE_MAP[key] = (value) => parseValue(func, value);
+});
+AVAILABLE.ENUM.forEach((item) => {
+  const func = funcName(item.remap || item.key);
+  const enums = item.enum;
+  STYLE_MAP[item.key] = (value) => parseEnum(func, enums, value);
+});
+AVAILABLE.EDGE.forEach((item) => {
+  const func = funcName(item.remap);
+  const { edge } = item;
+  STYLE_MAP[item.key] = (value) => parseEdge(func, edge, value);
+});
+var cache2 = /* @__PURE__ */ new WeakMap();
+function _apply(yoga, style) {
+  if (style) {
+    if (!cache2.has(style)) {
+      const _styles = [];
+      for (const key in style) {
+        const func = STYLE_MAP[key];
+        func && _styles.push(func(style[key]));
+      }
+      cache2.set(style, _styles);
+    }
+    const styles = cache2.get(style);
+    for (let i = 0; i < styles.length; i++) {
+      checkAndRun(yoga, ...styles[i]);
+    }
+  }
+}
+function apply(yoga, style) {
+  if (style) {
+    flatten([style]).forEach((s) => _apply(yoga, s));
+  }
+}
+
+// src/revas/core/yoga-layout/index.ts
+function _updateLayout(node) {
+  const yoga = Yoga__default.default.Node.create();
+  const children = [];
+  apply(yoga, node.props.style);
+  for (let i = 0; i < node.children.length; i++) {
+    const child = node.children[i];
+    const [f, y] = _updateLayout(child);
+    const index = children.push(f);
+    yoga.insertChild(y, index - 1);
+  }
+  function process2(x = 0, y = 0) {
+    const layout = yoga.getComputedLayout();
+    node.frame = new Frame(x + layout.left, y + layout.top, layout.width, layout.height);
+    node.props.onLayout && node.props.onLayout(node.frame);
+    for (let i = 0; i < children.length; i++) {
+      children[i](node.frame.x, node.frame.y);
+    }
+    yoga.free();
+  }
+  return [process2, yoga];
+}
+function updateLayout(root) {
+  const [process2, yoga] = _updateLayout(root);
+  const { clientWidth, clientHeight, RTL } = root.props;
+  yoga.calculateLayout(clientWidth, clientHeight, RTL ? Yoga.Direction.RTL : Yoga.Direction.LTR);
+  return process2;
+}
+
+// src/revas/core/offscreen.ts
+var MAX_SIZE = 30;
+var cache3 = /* @__PURE__ */ new Map();
+var ids = [];
+function getCache(id) {
+  return cache3.get(id);
+}
+function createCache(style, w, h, id) {
+  if (ids.length >= MAX_SIZE) {
+    const expiredId = ids.shift();
+    const { canvas } = cache3.get(expiredId);
+    const cached = {
+      canvas: adapter.resetOffscreenCanvas(canvas, w, h),
+      id,
+      style
+    };
+    cache3.delete(expiredId);
+    cache3.set(cached.id, cached);
+    ids.push(cached.id);
+    return cached;
+  } else {
+    const cached = {
+      canvas: adapter.createOffscreenCanvas(w, h),
+      id,
+      style
+    };
+    cache3.set(cached.id, cached);
+    ids.push(cached.id);
+    return cached;
+  }
+}
+var idCache = /* @__PURE__ */ new WeakMap();
+var __ID = 0;
+function autoCacheId(node) {
+  if (idCache.has(node)) {
+    return idCache.get(node);
+  } else {
+    const id = `$$auto_id-${__ID++}`;
+    idCache.set(node, id);
+    return id;
+  }
+}
+function clearCache() {
+  cache3.clear();
+  ids.length = 0;
+}
+
+// src/revas/core/draw.ts
+function getRadius(style) {
+  return {
+    tl: style.borderTopLeftRadius || style.borderRadius || 0,
+    tr: style.borderTopRightRadius || style.borderRadius || 0,
+    bl: style.borderBottomLeftRadius || style.borderRadius || 0,
+    br: style.borderBottomRightRadius || style.borderRadius || 0
+  };
+}
+function drawNode(canvas, node, container) {
+  const style = getMergedStyleFromNode(node, container.draw);
+  const frame = getFrameFromNode(node);
+  if (style.opacity <= 0) {
+    return;
+  }
+  const hasTransform = style.translateX || style.translateY || style.rotate || style.scaleX || style.scaleY || style.scale;
+  const hasClip = style.overflow === "hidden";
+  if (hasClip) {
+    canvas.context.save();
+  } else if (hasTransform) {
+    canvas.transform.save();
+  }
+  const popOpacity = pushOpacity(canvas, style.opacity);
+  if (style.translateX || style.translateY) {
+    canvas.transform.translate(style.translateX || 0, style.translateY || 0);
+  }
+  if (style.rotate || style.scaleX || style.scaleY || style.scale) {
+    const originX = frame.x + frame.width / 2;
+    const originY = frame.y + frame.height / 2;
+    canvas.transform.translate(originX, originY);
+    if (style.rotate) {
+      canvas.transform.rotate(style.rotate);
+    }
+    if (style.scaleX || style.scaleY || style.scale) {
+      canvas.transform.scale(style.scaleX || style.scale, style.scaleY || style.scale);
+    }
+    canvas.transform.translate(-originX, -originY);
+  }
+  if (node.props.cache && adapter.createOffscreenCanvas && frame.height > 0 && frame.width > 0) {
+    drawCache(canvas, node, container, style, frame, hasClip);
+  } else {
+    drawContent(canvas, node, container, style, frame, hasClip);
+  }
+  popOpacity();
+  if (hasClip) {
+    canvas.context.restore();
+  } else if (hasTransform) {
+    canvas.transform.restore();
+  }
+}
+function drawCache(canvas, node, container, style, frame, hasClip) {
+  const cachedId = node.props.cache === true ? autoCacheId(node) : node.props.cache;
+  let cached = getCache(cachedId);
+  const { shadowBlur = 0, shadowOffsetX = 0, shadowOffsetY = 0 } = cached ? cached.style : style;
+  const spread = shadowBlur * 2;
+  const x = frame.x + shadowOffsetX - shadowBlur;
+  const y = frame.y + shadowOffsetY - shadowBlur;
+  const w = frame.width + spread;
+  const h = frame.height + spread;
+  if (!cached) {
+    if (!node.$ready && !node.props.forceCache) {
+      return drawContent(canvas, node, container, style, frame, hasClip);
+    }
+    cached = createCache(style, w, h, cachedId);
+    cached.canvas.transform.translate(-x, -y);
+    drawContent(cached.canvas, node, container, style, frame, hasClip);
+    cached.canvas.transform.translate(x, y);
+  }
+  canvas.context.drawImage(cached.canvas.element, x, y, w, h);
+}
+function drawContent(canvas, node, container, style, frame, hasClip) {
+  const hasBG = style.backgroundColor && style.backgroundColor !== "transparent";
+  const hasBorder = style.borderColor && style.borderWidth > 0;
+  const hasRadius = style.borderRadius || style.borderTopLeftRadius || style.borderTopRightRadius || style.borderBottomLeftRadius || style.borderBottomRightRadius;
+  const useFrame = hasBG || hasBorder || hasClip || style.path;
+  const usePath = hasRadius || hasClip || style.path;
+  if (useFrame) {
+    const { context: ctx } = canvas;
+    if (usePath) {
+      ctx.beginPath();
+      if (hasRadius) {
+        const radius = getRadius(style);
+        ctx.moveTo(frame.x + radius.tl, frame.y);
+        ctx.arcTo(frame.x + frame.width, frame.y, frame.x + frame.width, frame.y + frame.height, radius.tr);
+        ctx.arcTo(frame.x + frame.width, frame.y + frame.height, frame.x, frame.y + frame.height, radius.br);
+        ctx.arcTo(frame.x, frame.y + frame.height, frame.x, frame.y, radius.bl);
+        ctx.arcTo(frame.x, frame.y, frame.x + frame.width, frame.y, radius.tl);
+      } else {
+        ctx.rect(frame.x, frame.y, frame.width, frame.height);
+      }
+      ctx.closePath();
+      if (hasClip) {
+        ctx.clip();
+      }
+    }
+    if (hasBG || hasBorder) {
+      const resetShadow = setShadow(
+        canvas,
+        style.shadowColor,
+        style.shadowOffsetX,
+        style.shadowOffsetY,
+        style.shadowBlur
+      );
+      if (hasBG) {
+        ctx.fillStyle = style.backgroundColor;
+        if (usePath) {
+          ctx.fill();
+        } else {
+          ctx.fillRect(frame.x, frame.y, frame.width, frame.height);
+        }
+      }
+      if (hasBorder) {
+        ctx.lineWidth = style.borderWidth;
+        ctx.strokeStyle = style.borderColor;
+        if (usePath) {
+          ctx.stroke();
+        } else {
+          ctx.strokeRect(frame.x, frame.y, frame.width, frame.height);
+        }
+      }
+      resetShadow();
+    }
+  }
+  if (node.props.customDrawer) {
+    node.props.customDrawer(canvas, node, { hasRadius, hasClip });
+  }
+  node.children.slice().sort(sortByZIndexAscending).forEach(function drawChild(child) {
+    drawNode(canvas, child, container);
+  });
+}
+
+// src/revas/core/touch.ts
+function scaled(x, c, s = 1) {
+  if (!s && s === 1) return x;
+  return ((s - 1) * c + x) / s;
+}
+function findNodeByPoint(node, x, y) {
+  if (node.props.pointerEvents === "none") return;
+  const children = node.children.slice().sort(sortByZIndexAscending).reverse();
+  const style = getMergedStyleFromNode(node);
+  const frame = getFrameFromNode(node);
+  const scaleX = style.scaleX || style.scale;
+  const scaleY = style.scaleY || style.scale;
+  const originX = frame.width / 2 + frame.x;
+  const originY = frame.height / 2 + frame.y;
+  x -= style.translateX || 0;
+  y -= style.translateY || 0;
+  x = scaled(x, originX, scaleX);
+  y = scaled(y, originY, scaleY);
+  if (frame.x < x && frame.y < y && x <= frame.x + frame.width && y <= frame.y + frame.height) {
+    for (let i = 0; i < children.length; i++) {
+      const target = findNodeByPoint(children[i], x, y);
+      if (target) return target;
+    }
+    if (node.props.pointerEvents === "box-none") return;
+    return node;
+  }
+}
+var eventNodeHolder = {};
+function getNodeByTouch(root, type, touch) {
+  if (type === "touchstart") {
+    const target = findNodeByPoint(root, touch.x, touch.y);
+    eventNodeHolder[touch.identifier] = target || root;
+    return eventNodeHolder[touch.identifier];
+  } else if (type === "touchmove") {
+    return eventNodeHolder[touch.identifier] || root;
+  } else if (type === "touchend") {
+    const target = eventNodeHolder[touch.identifier];
+    delete eventNodeHolder[touch.identifier];
+    return target || root;
+  }
+  return root;
+}
+var LISTENER_MAP = {
+  touchstart: "onTouchStart",
+  touchmove: "onTouchMove",
+  touchend: "onTouchEnd"
+};
+function emitTouch(node, e) {
+  const funcName2 = LISTENER_MAP[e.type];
+  if (funcName2) {
+    while (node) {
+      if (node.props[funcName2] && node.props.pointerEvents !== "box-none" && node.props[funcName2](e) === false) return;
+      node = node.parent;
+    }
+  }
+}
+
+// src/revas/core/Container.ts
+var Container = class {
+  _ready = true;
+  // Now always ready since Yoga is sync
+  _next = false;
+  _reflow = false;
+  _root;
+  get canvas() {
+    return this._root?.props.canvas;
+  }
+  get width() {
+    return this._root?.props.clientWidth || 0;
+  }
+  get height() {
+    return this._root?.props.clientHeight || 0;
+  }
+  get scale() {
+    return this._root?.props.deviceRatio || 1;
+  }
+  setRoot(root) {
+    this._root = root;
+  }
+  handleTouch = (evt) => {
+    const { _root } = this;
+    if (_root) {
+      const emitted = /* @__PURE__ */ new WeakSet();
+      Object.values(evt.touches).forEach((touch) => {
+        const node = getNodeByTouch(_root, evt.type, touch);
+        if (node.parent && !emitted.has(node)) {
+          emitted.add(node);
+          emitTouch(node, evt);
+        }
+      });
+    }
+  };
+  draw = (reflow = false) => {
+    this._reflow = this._reflow || reflow;
+    if (!this._ready) {
+      this._next = true;
+      return;
+    }
+    this._ready = false;
+    const { _root, canvas } = this;
+    if (canvas) {
+      if (this._reflow) {
+        updateLayout(_root)();
+        this._reflow = false;
+      }
+      canvas.context.clearRect(0, 0, this.width, this.height);
+      drawNode(canvas, _root, this);
+      requestAnimationFrame(this.ready);
+    }
+  };
+  ready = () => {
+    this._ready = true;
+    if (this._next) {
+      this._next = false;
+      this.draw();
+    }
+  };
+};
+
+// src/revas/core/Canvas.ts
+var RevasCanvas = class {
+  transform;
+  constructor(context) {
+    this.transform = new Transform(context);
+  }
+  get context() {
+    return this.transform.context;
+  }
+  get element() {
+    return this.context.canvas;
+  }
+};
+var Transform = class {
+  constructor(context) {
+    this.context = context;
+    this._canGetTransform = Boolean(context.getTransform);
+  }
+  _stack = [];
+  _canGetTransform = false;
+  save() {
+    if (this._canGetTransform) {
+      this._stack.push(this.context.getTransform());
+    } else {
+      this.context.save();
+    }
+  }
+  restore() {
+    if (this._canGetTransform) {
+      if (this._stack.length > 0) {
+        this.context.setTransform(this._stack.pop());
+      }
+    } else {
+      this.context.restore();
+    }
+  }
+  translate(x, y) {
+    this.context.translate(x, y);
+  }
+  rotate(rad) {
+    this.context.rotate(rad);
+  }
+  scale(sx, sy) {
+    this.context.scale(sx, sy);
+  }
+};
+function getNodePosition(node) {
+  let top = 0;
+  let left = 0;
+  while (node) {
+    top += node.offsetTop;
+    left += node.offsetLeft;
+    node = node.offsetParent;
+  }
+  return [top, left];
+}
+function createRevasTouchEvent(e) {
+  e.preventDefault();
+  e.stopPropagation();
+  const touches = {};
+  const type = e.type === "touchcancel" ? "touchend" : e.type;
+  Object.keys(e.changedTouches).forEach((key) => {
+    const touch = e.changedTouches[key];
+    if (touch && touch.target) {
+      const [offsetTop, offsetLeft] = getNodePosition(touch.target);
+      touches[touch.identifier] = {
+        identifier: touch.identifier,
+        x: touch.clientX - offsetLeft,
+        y: touch.clientY - offsetTop
+      };
+    }
+  });
+  return { type, touches, timestamp: e.timeStamp || Date.now() };
+}
+function createCanvas(parent, scale) {
+  const canvas = document.createElement("canvas");
+  canvas.setAttribute("style", "width: 100%; height: 100%;");
+  parent.appendChild(canvas);
+  canvas.width = canvas.clientWidth * scale;
+  canvas.height = canvas.clientHeight * scale;
+  return canvas;
+}
+function createRoot(app, dom, canvas) {
+  return React6.createElement(
+    Root,
+    {
+      clientWidth: dom.clientWidth,
+      clientHeight: dom.clientHeight,
+      deviceRatio: window.devicePixelRatio,
+      canvas
+    },
+    app
+  );
+}
+function initTouch(dom, handler) {
+  dom.addEventListener("touchstart", handler, false);
+  dom.addEventListener("touchmove", handler, false);
+  dom.addEventListener("touchend", handler, false);
+  dom.addEventListener("touchcancel", handler, false);
+  return () => {
+    dom.removeEventListener("touchstart", handler, false);
+    dom.removeEventListener("touchmove", handler, false);
+    dom.removeEventListener("touchend", handler, false);
+    dom.removeEventListener("touchcancel", handler, false);
+  };
+}
+function render(app, parent, parentComponent, callback = noop) {
+  const scale = window.devicePixelRatio;
+  const dom = createCanvas(parent, scale);
+  const canvas = new RevasCanvas(dom.getContext("2d"));
+  const container = new Container();
+  const destroyTouch = initTouch(dom, (e) => container.handleTouch(createRevasTouchEvent(e)));
+  const fiber = reconciler_default.createContainer(
+    container,
+    0,
+    // tag: LegacyRoot = 0, ConcurrentRoot = 1
+    null,
+    // hydrationCallbacks
+    false,
+    // isStrictMode
+    null,
+    // concurrentUpdatesByDefaultOverride
+    "",
+    // identifierPrefix
+    console.error,
+    // onUncaughtError
+    console.error,
+    // onCaughtError
+    console.error,
+    // onRecoverableError
+    null
+    // transitionCallbacks
+  );
+  canvas.transform.scale(scale, scale);
+  reconciler_default.updateContainer(createRoot(app, dom, canvas), fiber, parentComponent, callback);
+  return {
+    get $() {
+      return dom;
+    },
+    update(next = app, callback2 = noop) {
+      dom.width = dom.clientWidth * scale;
+      dom.height = dom.clientHeight * scale;
+      clearCache();
+      canvas.transform.scale(scale, scale);
+      reconciler_default.updateContainer(createRoot(next, dom, canvas), fiber, parentComponent, callback2);
+    },
+    unmount(callback2 = noop) {
+      reconciler_default.updateContainer(null, fiber, null, callback2);
+      destroyTouch();
+      clearCache();
+      dom.remove();
+    }
+  };
+}
+
+exports.AnimatedInterpolate = AnimatedInterpolate;
+exports.AnimatedNode = AnimatedNode;
+exports.AnimatedTiming = AnimatedTiming;
+exports.AnimatedValue = AnimatedValue;
+exports.AppContext = AppContext;
+exports.Container = Container;
+exports.EMPTY_ARRAY = EMPTY_ARRAY;
+exports.EMPTY_OBJECT = EMPTY_OBJECT;
+exports.Easing = Easing;
+exports.Frame = Frame;
+exports.Image = ImageView;
+exports.LinearGradient = LinearGradient;
+exports.ListView = ListView;
+exports.Node = Node;
+exports.RevasCanvas = RevasCanvas;
+exports.Root = Root;
+exports.ScrollView = ScrollView;
+exports.Text = Text;
+exports.Touchable = Touchable;
+exports.Transform = Transform;
+exports.View = View;
+exports.adapter = adapter;
+exports.applyAnimated = applyAnimated;
+exports.clamp = clamp;
+exports.flatten = flatten;
+exports.getChars = getChars;
+exports.getFrameFromNode = getFrameFromNode;
+exports.getMergedStyleFromNode = getMergedStyleFromNode;
+exports.getWords = getWords;
+exports.noop = noop;
+exports.now = now;
+exports.pushOpacity = pushOpacity;
+exports.render = render;
+exports.renderer = reconciler_default;
+exports.setShadow = setShadow;
+exports.sortByZIndexAscending = sortByZIndexAscending;
+exports.timing = timing;
+exports.withContext = withContext;
+//# sourceMappingURL=revas.cjs.map
+//# sourceMappingURL=revas.cjs.map