samcan 0.0.2 → 0.1.0

package/dist/engine/index.cjs

@@ -0,0 +1,3752 @@
+var import_node_module = require("node:module");
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// engine/index.ts
+var exports_engine = {};
+__export(exports_engine, {
+  zoom_engine: () => zoom_engine,
+  zoom_at_engine: () => zoom_at_engine,
+  world_to_screen_engine: () => world_to_screen_engine,
+  visible_bounds_world_engine: () => visible_bounds_world_engine,
+  set_document_engine: () => set_document_engine,
+  set_camera_engine: () => set_camera_engine,
+  set_background_image_engine: () => set_background_image_engine,
+  set_background_engine: () => set_background_engine,
+  screen_to_world_engine: () => screen_to_world_engine,
+  resize_engine: () => resize_engine,
+  render_engine_with_overlay: () => render_engine_with_overlay,
+  render_engine: () => render_engine,
+  pan_engine: () => pan_engine,
+  dispose_engine: () => dispose_engine,
+  create_engine: () => create_engine
+});
+module.exports = __toCommonJS(exports_engine);
+
+// camera/camera.ts
+function create_camera(x = 0, y = 0, zoom = 1, rotation = 0) {
+  return [x, y, zoom, rotation];
+}
+function clone_camera(c) {
+  return [c[0], c[1], c[2], c[3]];
+}
+function copy_camera(c, out) {
+  out[0] = c[0];
+  out[1] = c[1];
+  out[2] = c[2];
+  out[3] = c[3];
+  return out;
+}
+function set_camera(x, y, zoom, rotation, out) {
+  out[0] = x;
+  out[1] = y;
+  out[2] = zoom;
+  out[3] = rotation;
+  return out;
+}
+function x_of_camera(c) {
+  return c[0];
+}
+function y_of_camera(c) {
+  return c[1];
+}
+function zoom_of_camera(c) {
+  return c[2];
+}
+function rotation_of_camera(c) {
+  return c[3];
+}
+function position_of_camera(c, out) {
+  out[0] = c[0];
+  out[1] = c[1];
+  return out;
+}
+function pan_camera(c, dx, dy, out) {
+  out[0] = c[0] + dx;
+  out[1] = c[1] + dy;
+  out[2] = c[2];
+  out[3] = c[3];
+  return out;
+}
+function zoom_camera(c, factor, out) {
+  out[0] = c[0];
+  out[1] = c[1];
+  out[2] = c[2] * factor;
+  out[3] = c[3];
+  return out;
+}
+function zoom_at_camera(c, factor, anchor, out) {
+  const world_dx = anchor.world_x - c[0];
+  const world_dy = anchor.world_y - c[1];
+  const new_zoom = c[2] * factor;
+  const new_world_x = anchor.world_x - world_dx / factor;
+  const new_world_y = anchor.world_y - world_dy / factor;
+  out[0] = new_world_x;
+  out[1] = new_world_y;
+  out[2] = new_zoom;
+  out[3] = c[3];
+  return out;
+}
+function rotate_camera(c, angle, out) {
+  out[0] = c[0];
+  out[1] = c[1];
+  out[2] = c[2];
+  out[3] = c[3] + angle;
+  return out;
+}
+function clamp_camera(c, limits, out) {
+  const clamped_zoom = Math.max(limits.min_zoom, Math.min(limits.max_zoom, c[2]));
+  const clamped_x = Math.max(limits.min_x, Math.min(limits.max_x, c[0]));
+  const clamped_y = Math.max(limits.min_y, Math.min(limits.max_y, c[1]));
+  out[0] = clamped_x;
+  out[1] = clamped_y;
+  out[2] = clamped_zoom;
+  out[3] = c[3];
+  return out;
+}
+function lerp_camera(a, b, t, out) {
+  const clamped_t = Math.max(0, Math.min(1, t));
+  out[0] = a[0] + clamped_t * (b[0] - a[0]);
+  out[1] = a[1] + clamped_t * (b[1] - a[1]);
+  out[2] = a[2] + clamped_t * (b[2] - a[2]);
+  let rotation_diff = b[3] - a[3];
+  while (rotation_diff > Math.PI) {
+    rotation_diff = rotation_diff - 2 * Math.PI;
+  }
+  while (rotation_diff < -Math.PI) {
+    rotation_diff = rotation_diff + 2 * Math.PI;
+  }
+  out[3] = a[3] + clamped_t * rotation_diff;
+  return out;
+}
+function smooth_damp_camera(current, target, velocity, smooth_time, delta_time, out) {
+  const omega = 2 / Math.max(0.0001, smooth_time);
+  const x = omega * delta_time;
+  const exp = 1 / (1 + x + 0.48 * x * x + 0.235 * x * x * x);
+  const delta_x = current[0] - target[0];
+  const delta_y = current[1] - target[1];
+  const delta_zoom = current[2] - target[2];
+  let rotation_diff = target[3] - current[3];
+  while (rotation_diff > Math.PI) {
+    rotation_diff = rotation_diff - 2 * Math.PI;
+  }
+  while (rotation_diff < -Math.PI) {
+    rotation_diff = rotation_diff + 2 * Math.PI;
+  }
+  const delta_rotation = -rotation_diff;
+  const temp_x = (velocity[0] + omega * delta_x) * delta_time;
+  const temp_y = (velocity[1] + omega * delta_y) * delta_time;
+  const temp_zoom = (velocity[2] + omega * delta_zoom) * delta_time;
+  const temp_rotation = (velocity[3] + omega * delta_rotation) * delta_time;
+  const new_velocity_x = (velocity[0] - omega * temp_x) * exp;
+  const new_velocity_y = (velocity[1] - omega * temp_y) * exp;
+  const new_velocity_zoom = (velocity[2] - omega * temp_zoom) * exp;
+  const new_velocity_rotation = (velocity[3] - omega * temp_rotation) * exp;
+  velocity[0] = new_velocity_x;
+  velocity[1] = new_velocity_y;
+  velocity[2] = new_velocity_zoom;
+  velocity[3] = new_velocity_rotation;
+  const result_x = target[0] + (delta_x + temp_x) * exp;
+  const result_y = target[1] + (delta_y + temp_y) * exp;
+  const result_zoom = target[2] + (delta_zoom + temp_zoom) * exp;
+  const result_rotation = target[3] + (delta_rotation + temp_rotation) * exp;
+  out[0] = result_x;
+  out[1] = result_y;
+  out[2] = result_zoom;
+  out[3] = result_rotation;
+  return out;
+}
+function equals_camera(c1, c2, epsilon = 0.0001) {
+  return Math.abs(c1[0] - c2[0]) < epsilon && Math.abs(c1[1] - c2[1]) < epsilon && Math.abs(c1[2] - c2[2]) < epsilon && Math.abs(c1[3] - c2[3]) < epsilon;
+}
+function is_identity_camera(c) {
+  return c[0] === 0 && c[1] === 0 && c[2] === 1 && c[3] === 0;
+}
+
+// document/layer.ts
+function create_layer(id, name, visible = true, locked = false, opacity = 1) {
+  return {
+    id,
+    name,
+    visible,
+    locked,
+    opacity: Math.max(0, Math.min(1, opacity)),
+    element_ids: []
+  };
+}
+function clone_layer(l) {
+  return {
+    id: l.id,
+    name: l.name,
+    visible: l.visible,
+    locked: l.locked,
+    opacity: l.opacity,
+    element_ids: [...l.element_ids]
+  };
+}
+function id_of_layer(l) {
+  return l.id;
+}
+function name_of_layer(l) {
+  return l.name;
+}
+function is_visible_layer(l) {
+  return l.visible;
+}
+function is_locked_layer(l) {
+  return l.locked;
+}
+function opacity_of_layer(l) {
+  return l.opacity;
+}
+function element_ids_of_layer(l) {
+  return l.element_ids;
+}
+function element_count_of_layer(l) {
+  return l.element_ids.length;
+}
+function update_layer_name(l, name) {
+  return {
+    ...l,
+    name
+  };
+}
+function update_layer_visibility(l, visible) {
+  return {
+    ...l,
+    visible
+  };
+}
+function update_layer_locked(l, locked) {
+  return {
+    ...l,
+    locked
+  };
+}
+function update_layer_opacity(l, opacity) {
+  return {
+    ...l,
+    opacity: Math.max(0, Math.min(1, opacity))
+  };
+}
+function add_element_id_to_layer(l, element_id) {
+  if (l.element_ids.includes(element_id)) {
+    return l;
+  }
+  return {
+    ...l,
+    element_ids: [...l.element_ids, element_id]
+  };
+}
+function remove_element_id_from_layer(l, element_id) {
+  const index = l.element_ids.indexOf(element_id);
+  if (index === -1) {
+    return l;
+  }
+  const new_ids = [...l.element_ids];
+  new_ids.splice(index, 1);
+  return {
+    ...l,
+    element_ids: new_ids
+  };
+}
+function has_element_id_in_layer(l, element_id) {
+  return l.element_ids.includes(element_id);
+}
+function reorder_element_ids_in_layer(l, element_ids) {
+  const existing_set = new Set(l.element_ids);
+  const filtered_ids = element_ids.filter((id) => existing_set.has(id));
+  const new_ids_set = new Set(filtered_ids);
+  const remaining_ids = l.element_ids.filter((id) => !new_ids_set.has(id));
+  return {
+    ...l,
+    element_ids: [...remaining_ids, ...filtered_ids]
+  };
+}
+function equals_layer(a, b) {
+  if (a.id !== b.id || a.name !== b.name) {
+    return false;
+  }
+  if (a.visible !== b.visible || a.locked !== b.locked) {
+    return false;
+  }
+  if (a.opacity !== b.opacity) {
+    return false;
+  }
+  if (a.element_ids.length !== b.element_ids.length) {
+    return false;
+  }
+  for (let i = 0;i < a.element_ids.length; i = i + 1) {
+    if (a.element_ids[i] !== b.element_ids[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+// document/document.ts
+function create_document(id, active_layer_id) {
+  return {
+    id,
+    elements: new Map,
+    layers: [],
+    active_layer_id,
+    assets: new Map,
+    bounds: [0, 0, 0, 0],
+    element_count: 0
+  };
+}
+function clone_document(doc) {
+  const new_elements = new Map;
+  for (const [id, el] of doc.elements) {
+    new_elements.set(id, el);
+  }
+  return {
+    id: doc.id,
+    elements: new_elements,
+    layers: doc.layers.map((l) => ({ ...l, element_ids: [...l.element_ids] })),
+    active_layer_id: doc.active_layer_id,
+    assets: new Map(doc.assets),
+    bounds: [doc.bounds[0], doc.bounds[1], doc.bounds[2], doc.bounds[3]],
+    element_count: doc.element_count
+  };
+}
+function id_of_document(doc) {
+  return doc.id;
+}
+function elements_map_of_document(doc) {
+  return doc.elements;
+}
+function layers_of_document(doc) {
+  return doc.layers;
+}
+function active_layer_id_of_document(doc) {
+  return doc.active_layer_id;
+}
+function assets_of_document(doc) {
+  return doc.assets;
+}
+function bounds_of_document(doc) {
+  return [doc.bounds[0], doc.bounds[1], doc.bounds[2], doc.bounds[3]];
+}
+function element_count_of_document(doc) {
+  return doc.element_count;
+}
+function get_element_by_id_document(doc, element_id) {
+  return doc.elements.get(element_id) || null;
+}
+function get_layer_by_id_document(doc, layer_id) {
+  for (let i = 0;i < doc.layers.length; i = i + 1) {
+    const layer = doc.layers[i];
+    if (layer && layer.id === layer_id) {
+      return layer;
+    }
+  }
+  return null;
+}
+function add_element_document(doc, el) {
+  const layer = get_layer_by_id_document(doc, el.layer_id);
+  if (layer === null) {
+    return doc;
+  }
+  const new_elements = new Map(doc.elements);
+  new_elements.set(el.id, el);
+  const new_layers = doc.layers.map((l) => {
+    if (l.id === el.layer_id) {
+      return add_element_id_to_layer(l, el.id);
+    }
+    return l;
+  });
+  const new_bounds = calculate_bounds_document_internal(new_elements);
+  return {
+    id: doc.id,
+    elements: new_elements,
+    layers: new_layers,
+    active_layer_id: doc.active_layer_id,
+    assets: doc.assets,
+    bounds: new_bounds,
+    element_count: new_elements.size
+  };
+}
+function remove_element_document(doc, element_id) {
+  const el = doc.elements.get(element_id);
+  if (el === undefined) {
+    return doc;
+  }
+  const new_elements = new Map(doc.elements);
+  new_elements.delete(element_id);
+  const new_layers = doc.layers.map((l) => {
+    if (l.id === el.layer_id) {
+      return remove_element_id_from_layer(l, element_id);
+    }
+    return l;
+  });
+  const new_bounds = calculate_bounds_document_internal(new_elements);
+  return {
+    id: doc.id,
+    elements: new_elements,
+    layers: new_layers,
+    active_layer_id: doc.active_layer_id,
+    assets: doc.assets,
+    bounds: new_bounds,
+    element_count: new_elements.size
+  };
+}
+function update_element_document(doc, element_id, new_element) {
+  if (!doc.elements.has(element_id)) {
+    return doc;
+  }
+  const old_element = doc.elements.get(element_id);
+  if (old_element === undefined) {
+    return doc;
+  }
+  const new_elements = new Map(doc.elements);
+  new_elements.set(element_id, new_element);
+  let new_layers = doc.layers;
+  if (old_element.layer_id !== new_element.layer_id) {
+    new_layers = doc.layers.map((l) => {
+      if (l.id === old_element.layer_id) {
+        return remove_element_id_from_layer(l, element_id);
+      }
+      if (l.id === new_element.layer_id) {
+        return add_element_id_to_layer(l, element_id);
+      }
+      return l;
+    });
+  }
+  const new_bounds = calculate_bounds_document_internal(new_elements);
+  return {
+    id: doc.id,
+    elements: new_elements,
+    layers: new_layers,
+    active_layer_id: doc.active_layer_id,
+    assets: doc.assets,
+    bounds: new_bounds,
+    element_count: new_elements.size
+  };
+}
+function add_layer_document(doc, layer) {
+  const existing = get_layer_by_id_document(doc, layer.id);
+  if (existing !== null) {
+    return doc;
+  }
+  return {
+    id: doc.id,
+    elements: doc.elements,
+    layers: [...doc.layers, layer],
+    active_layer_id: doc.active_layer_id,
+    assets: doc.assets,
+    bounds: doc.bounds,
+    element_count: doc.element_count
+  };
+}
+function remove_layer_document(doc, layer_id) {
+  const layer = get_layer_by_id_document(doc, layer_id);
+  if (layer === null) {
+    return doc;
+  }
+  const new_elements = new Map(doc.elements);
+  for (const element_id of layer.element_ids) {
+    new_elements.delete(element_id);
+  }
+  const new_layers = doc.layers.filter((l) => l.id !== layer_id);
+  let new_active_layer_id = doc.active_layer_id;
+  if (doc.active_layer_id === layer_id) {
+    if (new_layers.length > 0) {
+      const first_layer = new_layers[0];
+      if (first_layer !== undefined) {
+        new_active_layer_id = first_layer.id;
+      } else {
+        new_active_layer_id = "";
+      }
+    } else {
+      new_active_layer_id = "";
+    }
+  }
+  const new_bounds = calculate_bounds_document_internal(new_elements);
+  return {
+    id: doc.id,
+    elements: new_elements,
+    layers: new_layers,
+    active_layer_id: new_active_layer_id,
+    assets: doc.assets,
+    bounds: new_bounds,
+    element_count: new_elements.size
+  };
+}
+function reorder_layers_document(doc, layer_ids) {
+  const id_set = new Set(layer_ids);
+  const existing_ids = doc.layers.map((l) => l.id);
+  const missing_ids = existing_ids.filter((id) => !id_set.has(id));
+  const ordered_layers = [];
+  const layer_map = new Map(doc.layers.map((l) => [l.id, l]));
+  for (const id of layer_ids) {
+    const layer = layer_map.get(id);
+    if (layer) {
+      ordered_layers.push(layer);
+    }
+  }
+  for (const id of missing_ids) {
+    const layer = layer_map.get(id);
+    if (layer) {
+      ordered_layers.push(layer);
+    }
+  }
+  return {
+    id: doc.id,
+    elements: doc.elements,
+    layers: ordered_layers,
+    active_layer_id: doc.active_layer_id,
+    assets: doc.assets,
+    bounds: doc.bounds,
+    element_count: doc.element_count
+  };
+}
+function set_active_layer_document(doc, layer_id) {
+  const layer = get_layer_by_id_document(doc, layer_id);
+  if (layer === null) {
+    return doc;
+  }
+  return {
+    id: doc.id,
+    elements: doc.elements,
+    layers: doc.layers,
+    active_layer_id: layer_id,
+    assets: doc.assets,
+    bounds: doc.bounds,
+    element_count: doc.element_count
+  };
+}
+function get_elements_in_layer_document(doc, layer_id) {
+  const layer = get_layer_by_id_document(doc, layer_id);
+  if (layer === null) {
+    return [];
+  }
+  const elements = [];
+  for (const element_id of layer.element_ids) {
+    const el = doc.elements.get(element_id);
+    if (el !== undefined) {
+      elements.push(el);
+    }
+  }
+  return elements;
+}
+function get_all_elements_document(doc) {
+  return Array.from(doc.elements.values());
+}
+function calculate_bounds_document_internal(elements) {
+  if (elements.size === 0) {
+    return [0, 0, 0, 0];
+  }
+  let min_x = Infinity;
+  let min_y = Infinity;
+  let max_x = -Infinity;
+  let max_y = -Infinity;
+  for (const el of elements.values()) {
+    const bounds = el.bounds;
+    min_x = Math.min(min_x, bounds[0]);
+    min_y = Math.min(min_y, bounds[1]);
+    max_x = Math.max(max_x, bounds[0] + bounds[2]);
+    max_y = Math.max(max_y, bounds[1] + bounds[3]);
+  }
+  if (min_x === Infinity) {
+    return [0, 0, 0, 0];
+  }
+  return [min_x, min_y, max_x - min_x, max_y - min_y];
+}
+function recalculate_bounds_document(doc) {
+  const new_bounds = calculate_bounds_document_internal(doc.elements);
+  return {
+    id: doc.id,
+    elements: doc.elements,
+    layers: doc.layers,
+    active_layer_id: doc.active_layer_id,
+    assets: doc.assets,
+    bounds: new_bounds,
+    element_count: doc.element_count
+  };
+}
+function clear_document(doc) {
+  return {
+    id: doc.id,
+    elements: new Map,
+    layers: doc.layers.map((l) => ({ ...l, element_ids: [] })),
+    active_layer_id: doc.active_layer_id,
+    assets: doc.assets,
+    bounds: [0, 0, 0, 0],
+    element_count: 0
+  };
+}
+function add_image_asset_document(doc, asset) {
+  const assets = new Map(doc.assets);
+  assets.set(asset.id, { ...asset });
+  return {
+    ...doc,
+    assets
+  };
+}
+function get_image_asset_document(doc, asset_id) {
+  return doc.assets.get(asset_id) ?? null;
+}
+function remove_image_asset_document(doc, asset_id) {
+  if (!doc.assets.has(asset_id))
+    return doc;
+  const assets = new Map(doc.assets);
+  assets.delete(asset_id);
+  return {
+    ...doc,
+    assets
+  };
+}
+
+// math/rectangle.ts
+function create_rectangle(x = 0, y = 0, width = 0, height = 0) {
+  return [x, y, width, height];
+}
+function clone_rectangle(r) {
+  return [r[0], r[1], r[2], r[3]];
+}
+function from_center_rectangle(center, width, height, out) {
+  out[0] = center[0] - width / 2;
+  out[1] = center[1] - height / 2;
+  out[2] = width;
+  out[3] = height;
+  return out;
+}
+function top_of_rectangle(r) {
+  return r[1] + r[3];
+}
+function left_of_rectangle(r) {
+  return r[0];
+}
+function right_of_rectangle(r) {
+  return r[0] + r[2];
+}
+function bottom_of_rectangle(r) {
+  return r[1];
+}
+function center_of_rectangle(r, out) {
+  out[0] = r[0] + r[2] / 2;
+  out[1] = r[1] + r[3] / 2;
+  return out;
+}
+function width_of_rectangle(r) {
+  return r[2];
+}
+function height_of_rectangle(r) {
+  return r[3];
+}
+function area_of_rectangle(r) {
+  return r[2] * r[3];
+}
+function set_rectangle(x, y, width, height, out) {
+  out[0] = x;
+  out[1] = y;
+  out[2] = width;
+  out[3] = height;
+  return out;
+}
+function translate_rectangle(r, dx, dy, out) {
+  out[0] = r[0] + dx;
+  out[1] = r[1] + dy;
+  out[2] = r[2];
+  out[3] = r[3];
+  return out;
+}
+function scale_rectangle(r, scale, out) {
+  out[0] = r[0] * scale;
+  out[1] = r[1] * scale;
+  out[2] = r[2] * scale;
+  out[3] = r[3] * scale;
+  return out;
+}
+function contains_point_rectangle(r, x, y) {
+  return x >= r[0] && x <= r[0] + r[2] && y >= r[1] && y <= r[1] + r[3];
+}
+function contains_rectangle(r1, r2) {
+  return r2[0] >= r1[0] && r2[1] >= r1[1] && r2[0] + r2[2] <= r1[0] + r1[2] && r2[1] + r2[3] <= r1[1] + r1[3];
+}
+function intersects_rectangle(r1, r2) {
+  return r1[0] < r2[0] + r2[2] && r1[0] + r1[2] > r2[0] && r1[1] < r2[1] + r2[3] && r1[1] + r1[3] > r2[1];
+}
+function intersection_rectangle(r1, r2, out) {
+  const x1 = Math.max(r1[0], r2[0]);
+  const y1 = Math.max(r1[1], r2[1]);
+  const x2 = Math.min(r1[0] + r1[2], r2[0] + r2[2]);
+  const y2 = Math.min(r1[1] + r1[3], r2[1] + r2[3]);
+  if (x2 <= x1 || y2 <= y1) {
+    return null;
+  }
+  out[0] = x1;
+  out[1] = y1;
+  out[2] = x2 - x1;
+  out[3] = y2 - y1;
+  return out;
+}
+function union_rectangle(r1, r2, out) {
+  const x1 = Math.min(r1[0], r2[0]);
+  const y1 = Math.min(r1[1], r2[1]);
+  const x2 = Math.max(r1[0] + r1[2], r2[0] + r2[2]);
+  const y2 = Math.max(r1[1] + r1[3], r2[1] + r2[3]);
+  out[0] = x1;
+  out[1] = y1;
+  out[2] = x2 - x1;
+  out[3] = y2 - y1;
+  return out;
+}
+function expand_rectangle(r, amount, out) {
+  out[0] = r[0] - amount;
+  out[1] = r[1] - amount;
+  out[2] = r[2] + amount * 2;
+  out[3] = r[3] + amount * 2;
+  return out;
+}
+function is_empty_rectangle(r) {
+  return r[2] <= 0 || r[3] <= 0;
+}
+function equals_rectangle(r1, r2) {
+  return r1[0] === r2[0] && r1[1] === r2[1] && r1[2] === r2[2] && r1[3] === r2[3];
+}
+
+// math/transform.ts
+function create_transform(a = 1, b = 0, c = 0, d = 1, tx = 0, ty = 0) {
+  return [a, b, c, d, tx, ty];
+}
+function clone_transform(t) {
+  return [t[0], t[1], t[2], t[3], t[4], t[5]];
+}
+function set_transform(a, b, c, d, tx, ty, out) {
+  out[0] = a;
+  out[1] = b;
+  out[2] = c;
+  out[3] = d;
+  out[4] = tx;
+  out[5] = ty;
+  return out;
+}
+function copy_transform(t, out) {
+  out[0] = t[0];
+  out[1] = t[1];
+  out[2] = t[2];
+  out[3] = t[3];
+  out[4] = t[4];
+  out[5] = t[5];
+  return out;
+}
+function identity_transform() {
+  return [1, 0, 0, 1, 0, 0];
+}
+function set_identity_transform(out) {
+  out[0] = 1;
+  out[1] = 0;
+  out[2] = 0;
+  out[3] = 1;
+  out[4] = 0;
+  out[5] = 0;
+  return out;
+}
+function translate_transform(x, y) {
+  return [1, 0, 0, 1, x, y];
+}
+function scale_transform(sx, sy = sx) {
+  return [sx, 0, 0, sy, 0, 0];
+}
+function rotate_transform(angle) {
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+  return [cos, sin, -sin, cos, 0, 0];
+}
+function from_trs_transform(translation, rotation, scale) {
+  const cos = Math.cos(rotation);
+  const sin = Math.sin(rotation);
+  return [
+    cos * scale[0],
+    sin * scale[0],
+    -sin * scale[1],
+    cos * scale[1],
+    translation[0],
+    translation[1]
+  ];
+}
+function multiply_transform(t1, t2, out) {
+  out[0] = t1[0] * t2[0] + t1[2] * t2[1];
+  out[1] = t1[1] * t2[0] + t1[3] * t2[1];
+  out[2] = t1[0] * t2[2] + t1[2] * t2[3];
+  out[3] = t1[1] * t2[2] + t1[3] * t2[3];
+  out[4] = t1[0] * t2[4] + t1[2] * t2[5] + t1[4];
+  out[5] = t1[1] * t2[4] + t1[3] * t2[5] + t1[5];
+  return out;
+}
+function determinant_transform(t) {
+  return t[0] * t[3] - t[1] * t[2];
+}
+function invert_transform(t, out) {
+  const det = determinant_transform(t);
+  if (Math.abs(det) < 0.0000000001) {
+    return null;
+  }
+  const inverse_det = 1 / det;
+  out[0] = t[3] * inverse_det;
+  out[1] = -t[1] * inverse_det;
+  out[2] = -t[2] * inverse_det;
+  out[3] = t[0] * inverse_det;
+  out[4] = (t[2] * t[5] - t[3] * t[4]) * inverse_det;
+  out[5] = (t[1] * t[4] - t[0] * t[5]) * inverse_det;
+  return out;
+}
+function transform_point_transform(t, point, out) {
+  out[0] = t[0] * point[0] + t[2] * point[1] + t[4];
+  out[1] = t[1] * point[0] + t[3] * point[1] + t[5];
+  return out;
+}
+function transform_vector_transform(t, vector, out) {
+  out[0] = t[0] * vector[0] + t[2] * vector[1];
+  out[1] = t[1] * vector[0] + t[3] * vector[1];
+  return out;
+}
+function append_translation_transform(t, x, y, out) {
+  const translation = translate_transform(x, y);
+  return multiply_transform(t, translation, out);
+}
+function append_rotation_transform(t, angle, out) {
+  const rotation = rotate_transform(angle);
+  return multiply_transform(t, rotation, out);
+}
+function append_scale_transform(t, sx, sy = sx, out) {
+  const scale = scale_transform(sx, sy);
+  return multiply_transform(t, scale, out);
+}
+function prepend_translation_transform(x, y, t, out) {
+  const translation = translate_transform(x, y);
+  return multiply_transform(translation, t, out);
+}
+function prepend_rotation_transform(angle, t, out) {
+  const rotation = rotate_transform(angle);
+  return multiply_transform(rotation, t, out);
+}
+function prepend_scale_transform(sx, sy = sx, t, out) {
+  const scale = scale_transform(sx, sy);
+  return multiply_transform(scale, t, out);
+}
+function equals_transform(t1, t2, epsilon = 0.0001) {
+  return Math.abs(t1[0] - t2[0]) < epsilon && Math.abs(t1[1] - t2[1]) < epsilon && Math.abs(t1[2] - t2[2]) < epsilon && Math.abs(t1[3] - t2[3]) < epsilon && Math.abs(t1[4] - t2[4]) < epsilon && Math.abs(t1[5] - t2[5]) < epsilon;
+}
+function is_identity_transform(t, epsilon = 0.0001) {
+  const identity = identity_transform();
+  return equals_transform(t, identity, epsilon);
+}
+
+// renderer/path.ts
+var path_move = 0;
+var path_line = 1;
+var path_cubic = 2;
+var path_close = 3;
+function create_path() {
+  return {
+    commands: [],
+    bounds: create_rectangle(0, 0, 0, 0)
+  };
+}
+function clone_path(p) {
+  return {
+    commands: [...p.commands],
+    bounds: [...p.bounds]
+  };
+}
+function move_to_path(p, x, y) {
+  const new_commands = [...p.commands, [path_move, x, y]];
+  return {
+    commands: new_commands,
+    bounds: calculate_bounds_of_path(new_commands)
+  };
+}
+function line_to_path(p, x, y) {
+  const new_commands = [...p.commands, [path_line, x, y]];
+  return {
+    commands: new_commands,
+    bounds: calculate_bounds_of_path(new_commands)
+  };
+}
+function cubic_to_path(p, c1x, c1y, c2x, c2y, x, y) {
+  const new_commands = [...p.commands, [path_cubic, c1x, c1y, c2x, c2y, x, y]];
+  return {
+    commands: new_commands,
+    bounds: calculate_bounds_of_path(new_commands)
+  };
+}
+function close_path(p) {
+  const new_commands = [...p.commands, [path_close]];
+  return {
+    commands: new_commands,
+    bounds: p.bounds
+  };
+}
+function bounds_of_path(p) {
+  return p.bounds;
+}
+function is_empty_path(p) {
+  return p.commands.length === 0;
+}
+function command_count_of_path(p) {
+  return p.commands.length;
+}
+function transform_path(p, t, out) {
+  const transformed_commands = [];
+  for (let i = 0;i < p.commands.length; i = i + 1) {
+    const cmd = p.commands[i];
+    if (cmd !== undefined) {
+      transformed_commands.push(transform_command(cmd, t));
+    }
+  }
+  const result = {
+    commands: transformed_commands,
+    bounds: calculate_bounds_of_path(transformed_commands)
+  };
+  Object.assign(out, result);
+  return out;
+}
+function hash_of_path(p) {
+  let hash = 0;
+  for (let i = 0;i < p.commands.length; i = i + 1) {
+    const cmd = p.commands[i];
+    if (cmd !== undefined) {
+      hash = hash * 31 + hash_command(cmd);
+    }
+  }
+  return hash;
+}
+function from_rectangle_path(r) {
+  const commands = [
+    [path_move, r[0], r[1]],
+    [path_line, r[0] + r[2], r[1]],
+    [path_line, r[0] + r[2], r[1] + r[3]],
+    [path_line, r[0], r[1] + r[3]],
+    [path_close]
+  ];
+  return {
+    commands,
+    bounds: [...r]
+  };
+}
+function from_circle_path(c, segments) {
+  const commands = [];
+  const cx = c[0];
+  const cy = c[1];
+  const r = c[2];
+  if (segments < 3) {
+    return create_path();
+  }
+  const kappa = 4 / 3 * Math.tan(Math.PI / (2 * segments));
+  for (let i = 0;i < segments; i = i + 1) {
+    const angle1 = 2 * Math.PI * i / segments;
+    const angle2 = 2 * Math.PI * (i + 1) / segments;
+    const x1 = cx + r * Math.cos(angle1);
+    const y1 = cy + r * Math.sin(angle1);
+    const x2 = cx + r * Math.cos(angle2);
+    const y2 = cy + r * Math.sin(angle2);
+    const cos1 = Math.cos(angle1);
+    const sin1 = Math.sin(angle1);
+    const cos2 = Math.cos(angle2);
+    const sin2 = Math.sin(angle2);
+    const c1x = x1 - r * kappa * sin1;
+    const c1y = y1 + r * kappa * cos1;
+    const c2x = x2 + r * kappa * sin2;
+    const c2y = y2 - r * kappa * cos2;
+    if (i === 0) {
+      commands.push([path_move, x1, y1]);
+    }
+    commands.push([path_cubic, c1x, c1y, c2x, c2y, x2, y2]);
+  }
+  commands.push([path_close]);
+  const bounds = create_rectangle(cx - r, cy - r, r * 2, r * 2);
+  return {
+    commands,
+    bounds
+  };
+}
+function from_polyline_path(points, closed) {
+  if (points.length === 0) {
+    return create_path();
+  }
+  const commands = [];
+  const first_point = points[0];
+  if (first_point !== undefined) {
+    commands.push([path_move, first_point[0], first_point[1]]);
+  }
+  for (let i = 1;i < points.length; i = i + 1) {
+    const point = points[i];
+    if (point !== undefined) {
+      commands.push([path_line, point[0], point[1]]);
+    }
+  }
+  if (closed && points.length > 2) {
+    commands.push([path_close]);
+  }
+  return {
+    commands,
+    bounds: calculate_bounds_of_path(commands)
+  };
+}
+function calculate_bounds_of_path(commands) {
+  if (commands.length === 0) {
+    return create_rectangle(0, 0, 0, 0);
+  }
+  let min_x = Infinity;
+  let min_y = Infinity;
+  let max_x = -Infinity;
+  let max_y = -Infinity;
+  for (let i = 0;i < commands.length; i = i + 1) {
+    const cmd = commands[i];
+    if (cmd === undefined) {
+      continue;
+    }
+    const type = cmd[0];
+    if (type === path_move || type === path_line) {
+      const cmd_move_line = cmd;
+      const x = cmd_move_line[1];
+      const y = cmd_move_line[2];
+      min_x = Math.min(min_x, x);
+      min_y = Math.min(min_y, y);
+      max_x = Math.max(max_x, x);
+      max_y = Math.max(max_y, y);
+    } else if (type === path_cubic) {
+      const cmd_cubic = cmd;
+      const c1x = cmd_cubic[1];
+      const c1y = cmd_cubic[2];
+      const c2x = cmd_cubic[3];
+      const c2y = cmd_cubic[4];
+      const x = cmd_cubic[5];
+      const y = cmd_cubic[6];
+      min_x = Math.min(min_x, c1x, c2x, x);
+      min_y = Math.min(min_y, c1y, c2y, y);
+      max_x = Math.max(max_x, c1x, c2x, x);
+      max_y = Math.max(max_y, c1y, c2y, y);
+    }
+  }
+  if (min_x === Infinity) {
+    return create_rectangle(0, 0, 0, 0);
+  }
+  return create_rectangle(min_x, min_y, max_x - min_x, max_y - min_y);
+}
+function transform_command(cmd, t) {
+  const type = cmd[0];
+  if (type === path_move || type === path_line) {
+    const cmd_move_line = cmd;
+    const p1 = [cmd_move_line[1], cmd_move_line[2]];
+    const out1 = [0, 0];
+    transform_point_transform(t, p1, out1);
+    return [type, out1[0], out1[1]];
+  } else if (type === path_cubic) {
+    const cmd_cubic = cmd;
+    const p1 = [cmd_cubic[1], cmd_cubic[2]];
+    const p2 = [cmd_cubic[3], cmd_cubic[4]];
+    const p3 = [cmd_cubic[5], cmd_cubic[6]];
+    const out1 = [0, 0];
+    const out2 = [0, 0];
+    const out3 = [0, 0];
+    transform_point_transform(t, p1, out1);
+    transform_point_transform(t, p2, out2);
+    transform_point_transform(t, p3, out3);
+    return [path_cubic, out1[0], out1[1], out2[0], out2[1], out3[0], out3[1]];
+  } else {
+    return cmd;
+  }
+}
+function hash_command(cmd) {
+  const type = cmd[0];
+  let hash = type * 31;
+  if (type === path_move || type === path_line) {
+    const cmd_move_line = cmd;
+    hash = hash * 31 + Math.floor(cmd_move_line[1] * 1000);
+    hash = hash * 31 + Math.floor(cmd_move_line[2] * 1000);
+  } else if (type === path_cubic) {
+    const cmd_cubic = cmd;
+    hash = hash * 31 + Math.floor(cmd_cubic[1] * 1000);
+    hash = hash * 31 + Math.floor(cmd_cubic[2] * 1000);
+    hash = hash * 31 + Math.floor(cmd_cubic[3] * 1000);
+    hash = hash * 31 + Math.floor(cmd_cubic[4] * 1000);
+    hash = hash * 31 + Math.floor(cmd_cubic[5] * 1000);
+    hash = hash * 31 + Math.floor(cmd_cubic[6] * 1000);
+  }
+  return hash;
+}
+
+// renderer/canvas/paths.ts
+function get_or_create_path2d_canvas(state, p) {
+  const hash = hash_of_path(p);
+  const cached = state.path_cache.get(hash);
+  if (cached !== undefined && paths_equal(cached.path_commands, p.commands)) {
+    state.cache_access_counter = state.cache_access_counter + 1;
+    cached.last_used = state.cache_access_counter;
+    return cached.path2d;
+  }
+  const path2d = build_path2d_canvas(p);
+  if (state.path_cache.size >= state.cache_max_size) {
+    evict_lru_canvas(state);
+  }
+  state.cache_access_counter = state.cache_access_counter + 1;
+  state.path_cache.set(hash, {
+    path2d,
+    last_used: state.cache_access_counter,
+    path_commands: p.commands
+  });
+  return path2d;
+}
+function paths_equal(a, b) {
+  if (a.length !== b.length) {
+    return false;
+  }
+  for (let i = 0;i < a.length; i = i + 1) {
+    const cmd_a = a[i];
+    const cmd_b = b[i];
+    if (cmd_a === undefined || cmd_b === undefined) {
+      return false;
+    }
+    if (cmd_a.length !== cmd_b.length) {
+      return false;
+    }
+    for (let j = 0;j < cmd_a.length; j = j + 1) {
+      if (cmd_a[j] !== cmd_b[j]) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+function build_path2d_canvas(p) {
+  const path2d = new Path2D;
+  for (let i = 0;i < p.commands.length; i = i + 1) {
+    const cmd = p.commands[i];
+    if (cmd === undefined) {
+      continue;
+    }
+    const type = cmd[0];
+    if (type === path_move) {
+      path2d.moveTo(cmd[1], cmd[2]);
+    } else if (type === path_line) {
+      path2d.lineTo(cmd[1], cmd[2]);
+    } else if (type === path_cubic) {
+      path2d.bezierCurveTo(cmd[1], cmd[2], cmd[3], cmd[4], cmd[5], cmd[6]);
+    } else if (type === path_close) {
+      path2d.closePath();
+    }
+  }
+  return path2d;
+}
+function evict_lru_canvas(state) {
+  let oldest_key = null;
+  let oldest_access = Infinity;
+  for (const [key, entry] of state.path_cache) {
+    if (entry.last_used < oldest_access) {
+      oldest_access = entry.last_used;
+      oldest_key = key;
+    }
+  }
+  if (oldest_key !== null) {
+    state.path_cache.delete(oldest_key);
+  }
+}
+
+// math/color.ts
+function create_color(r = 0, g = 0, b = 0, a = 1) {
+  return [
+    Math.max(0, Math.min(1, r)),
+    Math.max(0, Math.min(1, g)),
+    Math.max(0, Math.min(1, b)),
+    Math.max(0, Math.min(1, a))
+  ];
+}
+function clone_color(c) {
+  return [c[0], c[1], c[2], c[3]];
+}
+function set_color(r, g, b, a = 1, out) {
+  out[0] = Math.max(0, Math.min(1, r));
+  out[1] = Math.max(0, Math.min(1, g));
+  out[2] = Math.max(0, Math.min(1, b));
+  out[3] = Math.max(0, Math.min(1, a));
+  return out;
+}
+function copy_color(c, out) {
+  out[0] = c[0];
+  out[1] = c[1];
+  out[2] = c[2];
+  out[3] = c[3];
+  return out;
+}
+function from_rgb_color(r, g, b, a = 255) {
+  return create_color(r / 255, g / 255, b / 255, a / 255);
+}
+function from_hex_color(hex) {
+  const cleaned = hex.replace("#", "");
+  const r = parseInt(cleaned.substring(0, 2), 16) / 255;
+  const g = parseInt(cleaned.substring(2, 4), 16) / 255;
+  const b = parseInt(cleaned.substring(4, 6), 16) / 255;
+  const a = cleaned.length === 8 ? parseInt(cleaned.substring(6, 8), 16) / 255 : 1;
+  return create_color(r, g, b, a);
+}
+function to_rgba_string_color(c) {
+  return `rgba(${Math.round(c[0] * 255)}, ${Math.round(c[1] * 255)}, ${Math.round(c[2] * 255)}, ${c[3]})`;
+}
+function to_hex_string_color(c) {
+  const r = Math.round(c[0] * 255).toString(16).padStart(2, "0");
+  const g = Math.round(c[1] * 255).toString(16).padStart(2, "0");
+  const b = Math.round(c[2] * 255).toString(16).padStart(2, "0");
+  const a = Math.round(c[3] * 255).toString(16).padStart(2, "0");
+  return c[3] === 1 ? `#${r}${g}${b}` : `#${r}${g}${b}${a}`;
+}
+function lerp_color(c1, c2, t, out) {
+  out[0] = c1[0] + (c2[0] - c1[0]) * t;
+  out[1] = c1[1] + (c2[1] - c1[1]) * t;
+  out[2] = c1[2] + (c2[2] - c1[2]) * t;
+  out[3] = c1[3] + (c2[3] - c1[3]) * t;
+  return out;
+}
+function equals_color(c1, c2, epsilon = 0.0001) {
+  return Math.abs(c1[0] - c2[0]) < epsilon && Math.abs(c1[1] - c2[1]) < epsilon && Math.abs(c1[2] - c2[2]) < epsilon && Math.abs(c1[3] - c2[3]) < epsilon;
+}
+function white_color() {
+  return [1, 1, 1, 1];
+}
+function black_color() {
+  return [0, 0, 0, 1];
+}
+function transparent_color() {
+  return [0, 0, 0, 0];
+}
+
+// renderer/style.ts
+var line_cap_butt = 0;
+var line_cap_round = 1;
+var line_cap_square = 2;
+var line_join_miter = 0;
+var line_join_round = 1;
+var line_join_bevel = 2;
+function create_draw_style() {
+  return {
+    fill: null,
+    stroke: null,
+    stroke_width: 1,
+    line_cap: line_cap_round,
+    line_join: line_join_round,
+    miter_limit: 10,
+    alpha: 1
+  };
+}
+function clone_draw_style(s) {
+  return {
+    fill: s.fill,
+    stroke: s.stroke,
+    stroke_width: s.stroke_width,
+    line_cap: s.line_cap,
+    line_join: s.line_join,
+    miter_limit: s.miter_limit,
+    alpha: s.alpha
+  };
+}
+function copy_draw_style(s, out) {
+  const mutable_out = out;
+  mutable_out.fill = s.fill;
+  mutable_out.stroke = s.stroke;
+  mutable_out.stroke_width = s.stroke_width;
+  mutable_out.line_cap = s.line_cap;
+  mutable_out.line_join = s.line_join;
+  mutable_out.miter_limit = s.miter_limit;
+  mutable_out.alpha = s.alpha;
+  return out;
+}
+function set_draw_style(fill, stroke, stroke_width, line_cap, line_join, miter_limit, alpha, out) {
+  const mutable_out = out;
+  mutable_out.fill = fill;
+  mutable_out.stroke = stroke;
+  mutable_out.stroke_width = stroke_width;
+  mutable_out.line_cap = line_cap;
+  mutable_out.line_join = line_join;
+  mutable_out.miter_limit = miter_limit;
+  mutable_out.alpha = alpha;
+  return out;
+}
+function with_fill_draw_style(s, fill, out) {
+  const mutable_out = out;
+  mutable_out.fill = fill;
+  mutable_out.stroke = s.stroke;
+  mutable_out.stroke_width = s.stroke_width;
+  mutable_out.line_cap = s.line_cap;
+  mutable_out.line_join = s.line_join;
+  mutable_out.miter_limit = s.miter_limit;
+  mutable_out.alpha = s.alpha;
+  return out;
+}
+function with_stroke_draw_style(s, stroke, stroke_width, out) {
+  const mutable_out = out;
+  mutable_out.fill = s.fill;
+  mutable_out.stroke = stroke;
+  mutable_out.stroke_width = stroke_width;
+  mutable_out.line_cap = s.line_cap;
+  mutable_out.line_join = s.line_join;
+  mutable_out.miter_limit = s.miter_limit;
+  mutable_out.alpha = s.alpha;
+  return out;
+}
+function with_alpha_draw_style(s, alpha, out) {
+  const mutable_out = out;
+  mutable_out.fill = s.fill;
+  mutable_out.stroke = s.stroke;
+  mutable_out.stroke_width = s.stroke_width;
+  mutable_out.line_cap = s.line_cap;
+  mutable_out.line_join = s.line_join;
+  mutable_out.miter_limit = s.miter_limit;
+  mutable_out.alpha = alpha;
+  return out;
+}
+function with_line_cap_draw_style(s, line_cap, out) {
+  const mutable_out = out;
+  mutable_out.fill = s.fill;
+  mutable_out.stroke = s.stroke;
+  mutable_out.stroke_width = s.stroke_width;
+  mutable_out.line_cap = line_cap;
+  mutable_out.line_join = s.line_join;
+  mutable_out.miter_limit = s.miter_limit;
+  mutable_out.alpha = s.alpha;
+  return out;
+}
+function with_line_join_draw_style(s, line_join, miter_limit, out) {
+  const mutable_out = out;
+  mutable_out.fill = s.fill;
+  mutable_out.stroke = s.stroke;
+  mutable_out.stroke_width = s.stroke_width;
+  mutable_out.line_cap = s.line_cap;
+  mutable_out.line_join = line_join;
+  mutable_out.miter_limit = miter_limit;
+  mutable_out.alpha = s.alpha;
+  return out;
+}
+function equals_draw_style(a, b) {
+  const fill_equal = a.fill === null && b.fill === null || a.fill !== null && b.fill !== null && equals_color(a.fill, b.fill);
+  const stroke_equal = a.stroke === null && b.stroke === null || a.stroke !== null && b.stroke !== null && equals_color(a.stroke, b.stroke);
+  return fill_equal && stroke_equal && a.stroke_width === b.stroke_width && a.line_cap === b.line_cap && a.line_join === b.line_join && a.miter_limit === b.miter_limit && a.alpha === b.alpha;
+}
+
+// renderer/canvas/draw.ts
+function draw_path_canvas(state, p, s) {
+  const path2d = get_or_create_path2d_canvas(state, p);
+  apply_style_canvas(state.ctx, s);
+  if (s.fill !== null) {
+    state.ctx.fill(path2d);
+  }
+  if (s.stroke !== null && s.stroke_width > 0) {
+    state.ctx.stroke(path2d);
+  }
+}
+function draw_rectangle_canvas(state, r, s) {
+  apply_style_canvas(state.ctx, s);
+  if (s.fill !== null) {
+    state.ctx.fillRect(r[0], r[1], r[2], r[3]);
+  }
+  if (s.stroke !== null && s.stroke_width > 0) {
+    state.ctx.strokeRect(r[0], r[1], r[2], r[3]);
+  }
+}
+function draw_circle_canvas(state, c, s) {
+  state.ctx.beginPath();
+  state.ctx.arc(c[0], c[1], c[2], 0, Math.PI * 2);
+  apply_style_canvas(state.ctx, s);
+  if (s.fill !== null) {
+    state.ctx.fill();
+  }
+  if (s.stroke !== null && s.stroke_width > 0) {
+    state.ctx.stroke();
+  }
+}
+function draw_line_canvas(state, a, b, s) {
+  state.ctx.beginPath();
+  state.ctx.moveTo(a[0], a[1]);
+  state.ctx.lineTo(b[0], b[1]);
+  apply_style_canvas(state.ctx, s);
+  state.ctx.stroke();
+}
+function draw_polyline_canvas(state, points, s) {
+  if (points.length < 2) {
+    return;
+  }
+  state.ctx.beginPath();
+  const first = points[0];
+  if (first !== undefined) {
+    state.ctx.moveTo(first[0], first[1]);
+  }
+  for (let i = 1;i < points.length; i = i + 1) {
+    const point = points[i];
+    if (point !== undefined) {
+      state.ctx.lineTo(point[0], point[1]);
+    }
+  }
+  apply_style_canvas(state.ctx, s);
+  state.ctx.stroke();
+}
+function draw_image_canvas(state, image, r, opacity, _version) {
+  const old_alpha = state.ctx.globalAlpha;
+  state.ctx.globalAlpha = opacity;
+  state.ctx.drawImage(image, r[0], r[1], r[2], r[3]);
+  state.ctx.globalAlpha = old_alpha;
+}
+function apply_style_canvas(ctx, s) {
+  ctx.globalAlpha = s.alpha;
+  if (s.fill !== null) {
+    ctx.fillStyle = to_rgba_string_color(s.fill);
+  }
+  if (s.stroke !== null) {
+    ctx.strokeStyle = to_rgba_string_color(s.stroke);
+  }
+  ctx.lineWidth = s.stroke_width;
+  ctx.lineCap = line_cap_to_string_canvas(s.line_cap);
+  ctx.lineJoin = line_join_to_string_canvas(s.line_join);
+  ctx.miterLimit = s.miter_limit;
+}
+function line_cap_to_string_canvas(cap) {
+  if (cap === line_cap_round) {
+    return "round";
+  } else if (cap === line_cap_square) {
+    return "square";
+  } else {
+    return "butt";
+  }
+}
+function line_join_to_string_canvas(join) {
+  if (join === line_join_round) {
+    return "round";
+  } else if (join === line_join_bevel) {
+    return "bevel";
+  } else {
+    return "miter";
+  }
+}
+
+// renderer/canvas/lifecycle.ts
+function begin_frame_canvas(state) {
+  state.ctx.setTransform(state.current_pixel_ratio, 0, 0, state.current_pixel_ratio, 0, 0);
+}
+function end_frame_canvas(_state) {}
+function set_transform_canvas(state, t) {
+  const pr = state.current_pixel_ratio;
+  state.ctx.setTransform(t[0] * pr, t[1] * pr, t[2] * pr, t[3] * pr, t[4] * pr, t[5] * pr);
+}
+function reset_transform_canvas(state) {
+  state.ctx.setTransform(state.current_pixel_ratio, 0, 0, state.current_pixel_ratio, 0, 0);
+}
+function save_canvas(state) {
+  state.ctx.save();
+}
+function restore_canvas(state) {
+  state.ctx.restore();
+}
+function clip_rectangle_canvas(state, r) {
+  state.ctx.save();
+  state.ctx.beginPath();
+  state.ctx.rect(r[0], r[1], r[2], r[3]);
+  state.ctx.clip();
+}
+function clear_canvas(state, c) {
+  state.ctx.save();
+  state.ctx.resetTransform();
+  state.ctx.fillStyle = to_rgba_string_color(c);
+  state.ctx.fillRect(0, 0, state.current_width * state.current_pixel_ratio, state.current_height * state.current_pixel_ratio);
+  state.ctx.restore();
+}
+function resize_canvas(state, canvas, width, height, pixel_ratio) {
+  state.current_width = width;
+  state.current_height = height;
+  state.current_pixel_ratio = pixel_ratio;
+  canvas.width = width * pixel_ratio;
+  canvas.height = height * pixel_ratio;
+  canvas.style.width = width + "px";
+  canvas.style.height = height + "px";
+  state.ctx.setTransform(pixel_ratio, 0, 0, pixel_ratio, 0, 0);
+}
+function dispose_canvas(state) {
+  state.path_cache.clear();
+}
+
+// renderer/canvas/index.ts
+function create_renderer_canvas(canvas, config) {
+  const ctx = canvas.getContext("2d");
+  if (ctx === null) {
+    return null;
+  }
+  const state = {
+    ctx,
+    path_cache: new Map,
+    cache_access_counter: 0,
+    cache_max_size: config.path_cache_size,
+    current_width: canvas.width,
+    current_height: canvas.height,
+    current_pixel_ratio: 1
+  };
+  return {
+    kind: renderer_kind_canvas,
+    get width() {
+      return state.current_width;
+    },
+    get height() {
+      return state.current_height;
+    },
+    get pixel_ratio() {
+      return state.current_pixel_ratio;
+    },
+    begin_frame: () => begin_frame_canvas(state),
+    end_frame: () => end_frame_canvas(state),
+    set_transform: (t) => set_transform_canvas(state, t),
+    reset_transform: () => reset_transform_canvas(state),
+    save: () => save_canvas(state),
+    restore: () => restore_canvas(state),
+    draw_path: (p, s) => draw_path_canvas(state, p, s),
+    draw_rectangle: (r, s) => draw_rectangle_canvas(state, r, s),
+    draw_circle: (c, s) => draw_circle_canvas(state, c, s),
+    draw_line: (a, b, s) => draw_line_canvas(state, a, b, s),
+    draw_polyline: (points, s) => draw_polyline_canvas(state, points, s),
+    draw_image: (image, r, opacity, version) => draw_image_canvas(state, image, r, opacity, version),
+    clip_rectangle: (r) => clip_rectangle_canvas(state, r),
+    clear: (c) => clear_canvas(state, c),
+    resize: (width, height, pixel_ratio) => resize_canvas(state, canvas, width, height, pixel_ratio),
+    dispose: () => dispose_canvas(state)
+  };
+}
+// renderer/webgl/lifecycle.ts
+function begin_frame_webgl(state) {
+  state.vertex_count = 0;
+  state.index_count = 0;
+  state.scissor_enabled = false;
+  state.gl.disable(state.gl.SCISSOR_TEST);
+}
+function end_frame_webgl(state) {
+  if (state.index_count > 0) {
+    flush_webgl(state);
+  }
+}
+function flush_webgl(state) {
+  if (state.index_count === 0) {
+    return;
+  }
+  const gl = state.gl;
+  gl.useProgram(state.program);
+  gl.uniformMatrix3fv(state.program_locations.transform, false, state.current_transform);
+  gl.uniform2f(state.program_locations.resolution, state.width, state.height);
+  gl.bindBuffer(gl.ARRAY_BUFFER, state.position_buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, state.vertices.subarray(0, state.vertex_count * 2), gl.DYNAMIC_DRAW);
+  gl.enableVertexAttribArray(state.program_locations.position);
+  gl.vertexAttribPointer(state.program_locations.position, 2, gl.FLOAT, false, 0, 0);
+  gl.bindBuffer(gl.ARRAY_BUFFER, state.color_buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, state.colors.subarray(0, state.vertex_count * 4), gl.DYNAMIC_DRAW);
+  gl.enableVertexAttribArray(state.program_locations.color);
+  gl.vertexAttribPointer(state.program_locations.color, 4, gl.FLOAT, false, 0, 0);
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, state.index_buffer);
+  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, state.indices.subarray(0, state.index_count), gl.DYNAMIC_DRAW);
+  gl.drawElements(gl.TRIANGLES, state.index_count, gl.UNSIGNED_SHORT, 0);
+  state.vertex_count = 0;
+  state.index_count = 0;
+}
+function clip_rectangle_webgl(state, r) {
+  if (state.index_count > 0) {
+    flush_webgl(state);
+  }
+  state.scissor_enabled = true;
+  state.gl.enable(state.gl.SCISSOR_TEST);
+  state.gl.scissor(Math.floor(r[0] * state.pixel_ratio), Math.floor((state.height - r[1] - r[3]) * state.pixel_ratio), Math.ceil(r[2] * state.pixel_ratio), Math.ceil(r[3] * state.pixel_ratio));
+}
+function clear_webgl(state, c) {
+  if (state.index_count > 0) {
+    flush_webgl(state);
+  }
+  state.gl.clearColor(c[0], c[1], c[2], c[3]);
+  state.gl.clear(state.gl.COLOR_BUFFER_BIT);
+}
+function resize_webgl(state, width, height, pixel_ratio) {
+  state.width = width;
+  state.height = height;
+  state.pixel_ratio = pixel_ratio;
+  state.canvas.width = width * pixel_ratio;
+  state.canvas.height = height * pixel_ratio;
+  state.canvas.style.width = width + "px";
+  state.canvas.style.height = height + "px";
+  state.gl.viewport(0, 0, state.canvas.width, state.canvas.height);
+}
+function dispose_webgl(state) {
+  state.fill_cache.clear();
+  state.stroke_cache.clear();
+  for (const texture of state.texture_cache.values()) {
+    state.gl.deleteTexture(texture.texture);
+  }
+  state.texture_cache.clear();
+  state.gl.deleteBuffer(state.position_buffer);
+  state.gl.deleteBuffer(state.color_buffer);
+  state.gl.deleteBuffer(state.texcoord_buffer);
+  state.gl.deleteBuffer(state.index_buffer);
+  state.gl.deleteProgram(state.program);
+  state.gl.deleteProgram(state.texture_program);
+}
+
+// renderer/webgl/batches.ts
+function draw_cached_triangles_webgl(state, cached, color, alpha) {
+  if (cached.index_count === 0) {
+    return;
+  }
+  const added_vertices = new Int32Array(cached.vertex_count);
+  for (let i = 0;i < cached.vertex_count; i = i + 1) {
+    added_vertices[i] = -1;
+  }
+  for (let tri = 0;tri < cached.index_count; tri = tri + 3) {
+    const i0 = cached.indices[tri];
+    const i1 = cached.indices[tri + 1];
+    const i2 = cached.indices[tri + 2];
+    if (i0 === undefined || i1 === undefined || i2 === undefined) {
+      continue;
+    }
+    if (state.vertex_count + 3 > state.max_vertices || state.index_count + 3 > state.max_indices) {
+      flush_webgl(state);
+      for (let i = 0;i < cached.vertex_count; i = i + 1) {
+        added_vertices[i] = -1;
+      }
+    }
+    write_triangle_webgl(state, cached.vertices, added_vertices, [i0, i1, i2], color, alpha);
+    const v0 = added_vertices[i0];
+    const v1 = added_vertices[i1];
+    const v2 = added_vertices[i2];
+    if (v0 !== -1 && v0 !== undefined && v1 !== -1 && v1 !== undefined && v2 !== -1 && v2 !== undefined) {
+      state.indices[state.index_count] = v0;
+      state.indices[state.index_count + 1] = v1;
+      state.indices[state.index_count + 2] = v2;
+      state.index_count = state.index_count + 3;
+    }
+  }
+}
+function write_triangle_webgl(state, vertices, added_vertices, indices, color, alpha) {
+  for (let i = 0;i < indices.length; i = i + 1) {
+    const idx = indices[i];
+    if (idx === undefined || added_vertices[idx] !== -1) {
+      continue;
+    }
+    const vx = vertices[idx * 2];
+    const vy = vertices[idx * 2 + 1];
+    if (vx !== undefined && vy !== undefined) {
+      state.vertices[state.vertex_count * 2] = vx;
+      state.vertices[state.vertex_count * 2 + 1] = vy;
+      state.colors[state.vertex_count * 4] = color[0];
+      state.colors[state.vertex_count * 4 + 1] = color[1];
+      state.colors[state.vertex_count * 4 + 2] = color[2];
+      state.colors[state.vertex_count * 4 + 3] = color[3] * alpha;
+      added_vertices[idx] = state.vertex_count;
+      state.vertex_count = state.vertex_count + 1;
+    }
+  }
+}
+
+// renderer/webgl/triangles.ts
+function triangulate_polygon_earcut(vertices) {
+  if (vertices.length < 6) {
+    return [];
+  }
+  const n = vertices.length / 2;
+  if (n === 3) {
+    return [0, 1, 2];
+  }
+  let head = null;
+  let last = null;
+  for (let i = 0;i < n; i = i + 1) {
+    const x = vertices[i * 2];
+    const y = vertices[i * 2 + 1];
+    if (x !== undefined && y !== undefined) {
+      const node = { i, x, y, prev: last, next: null };
+      if (last !== null) {
+        last.next = node;
+      } else {
+        head = node;
+      }
+      last = node;
+    }
+  }
+  if (head !== null && last !== null) {
+    head.prev = last;
+    last.next = head;
+  }
+  const indices = [];
+  let ear = head;
+  let count = n * 2;
+  while (count > 0 && ear !== null && ear.next !== ear.prev) {
+    count = count - 1;
+    const prev = ear.prev;
+    const next = ear.next;
+    if (prev !== null && next !== null && is_ear(prev, ear, next)) {
+      indices.push(prev.i, ear.i, next.i);
+      if (prev.next === next) {
+        break;
+      }
+      prev.next = next;
+      next.prev = prev;
+      ear = next;
+    } else {
+      ear = next;
+    }
+  }
+  return indices;
+}
+function is_ear(a, b, c) {
+  const area = (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
+  if (area >= 0) {
+    return false;
+  }
+  let p = c.next;
+  while (p !== null && p !== a) {
+    if (point_in_triangle(a.x, a.y, b.x, b.y, c.x, c.y, p.x, p.y)) {
+      return false;
+    }
+    p = p.next;
+  }
+  return true;
+}
+function point_in_triangle(ax, ay, bx, by, cx, cy, px, py) {
+  const denom = (by - cy) * (ax - cx) + (cx - bx) * (ay - cy);
+  if (denom === 0) {
+    return false;
+  }
+  const a = ((by - cy) * (px - cx) + (cx - bx) * (py - cy)) / denom;
+  const b = ((cy - ay) * (px - cx) + (ax - cx) * (py - cy)) / denom;
+  const c = 1 - a - b;
+  return a >= 0 && b >= 0 && c >= 0;
+}
+
+// renderer/webgl/fills.ts
+function cache_path_fill_webgl(p) {
+  const fill_vertices = [];
+  const fill_colors = [];
+  const fill_indices = [];
+  let current_x = 0;
+  let current_y = 0;
+  let start_x = 0;
+  let start_y = 0;
+  for (let i = 0;i < p.commands.length; i = i + 1) {
+    const cmd = p.commands[i];
+    if (cmd === undefined) {
+      continue;
+    }
+    const type = cmd[0];
+    if (type === path_move) {
+      current_x = cmd[1];
+      current_y = cmd[2];
+      start_x = current_x;
+      start_y = current_y;
+    } else if (type === path_line) {
+      fill_vertices.push(current_x, current_y);
+      current_x = cmd[1];
+      current_y = cmd[2];
+    } else if (type === path_cubic) {
+      const steps = 8;
+      let prev_x = current_x;
+      let prev_y = current_y;
+      for (let step = 1;step <= steps; step = step + 1) {
+        const t = step / steps;
+        const inv_t = 1 - t;
+        const t2 = t * t;
+        const inv_t2 = inv_t * inv_t;
+        const t3 = t2 * t;
+        const inv_t3 = inv_t2 * inv_t;
+        const x = inv_t3 * current_x + 3 * inv_t2 * t * cmd[1] + 3 * inv_t * t2 * cmd[3] + t3 * cmd[5];
+        const y = inv_t3 * current_y + 3 * inv_t2 * t * cmd[2] + 3 * inv_t * t2 * cmd[4] + t3 * cmd[6];
+        fill_vertices.push(prev_x, prev_y);
+        prev_x = x;
+        prev_y = y;
+      }
+      current_x = cmd[5];
+      current_y = cmd[6];
+    } else if (type === path_close) {
+      if (current_x !== start_x || current_y !== start_y) {
+        fill_vertices.push(current_x, current_y);
+      }
+      fill_vertices.push(start_x, start_y);
+    }
+  }
+  if (fill_vertices.length > 0 && (current_x !== start_x || current_y !== start_y)) {
+    fill_vertices.push(start_x, start_y);
+  }
+  const fill_tris = triangulate_polygon_earcut(fill_vertices);
+  for (let i = 0;i < fill_tris.length; i = i + 1) {
+    const tri_index = fill_tris[i];
+    if (tri_index !== undefined) {
+      fill_indices.push(tri_index);
+    }
+  }
+  for (let i = 0;i < fill_vertices.length / 2; i = i + 1) {
+    fill_colors.push(1, 1, 1, 1);
+  }
+  return {
+    vertices: new Float32Array(fill_vertices),
+    colors: new Float32Array(fill_colors),
+    indices: new Uint16Array(fill_indices),
+    vertex_count: fill_vertices.length / 2,
+    index_count: fill_indices.length,
+    path_commands: p.commands
+  };
+}
+function draw_cached_path_fill_webgl(state, cached, color, alpha) {
+  draw_cached_triangles_webgl(state, cached, color, alpha);
+}
+
+// renderer/webgl/strokes.ts
+function cache_path_stroke_webgl(p, stroke_width) {
+  const stroke_vertices = [];
+  const stroke_colors = [];
+  const stroke_indices = [];
+  let current_x = 0;
+  let current_y = 0;
+  let start_x = 0;
+  let start_y = 0;
+  let vertex_offset = 0;
+  for (let i = 0;i < p.commands.length; i = i + 1) {
+    const cmd = p.commands[i];
+    if (cmd === undefined) {
+      continue;
+    }
+    const type = cmd[0];
+    if (type === path_move) {
+      current_x = cmd[1];
+      current_y = cmd[2];
+      start_x = current_x;
+      start_y = current_y;
+    } else if (type === path_line) {
+      add_segment_webgl(stroke_vertices, stroke_indices, vertex_offset, current_x, current_y, cmd[1], cmd[2], stroke_width / 2);
+      vertex_offset = vertex_offset + 4;
+      current_x = cmd[1];
+      current_y = cmd[2];
+    } else if (type === path_cubic) {
+      const steps = 8;
+      let prev_x = current_x;
+      let prev_y = current_y;
+      for (let step = 1;step <= steps; step = step + 1) {
+        const t = step / steps;
+        const inv_t = 1 - t;
+        const t2 = t * t;
+        const inv_t2 = inv_t * inv_t;
+        const t3 = t2 * t;
+        const inv_t3 = inv_t2 * inv_t;
+        const x = inv_t3 * current_x + 3 * inv_t2 * t * cmd[1] + 3 * inv_t * t2 * cmd[3] + t3 * cmd[5];
+        const y = inv_t3 * current_y + 3 * inv_t2 * t * cmd[2] + 3 * inv_t * t2 * cmd[4] + t3 * cmd[6];
+        add_segment_webgl(stroke_vertices, stroke_indices, vertex_offset, prev_x, prev_y, x, y, stroke_width / 2);
+        vertex_offset = vertex_offset + 4;
+        prev_x = x;
+        prev_y = y;
+      }
+      current_x = cmd[5];
+      current_y = cmd[6];
+    } else if (type === path_close) {
+      if (current_x !== start_x || current_y !== start_y) {
+        add_segment_webgl(stroke_vertices, stroke_indices, vertex_offset, current_x, current_y, start_x, start_y, stroke_width / 2);
+        vertex_offset = vertex_offset + 4;
+      }
+    }
+  }
+  for (let i = 0;i < stroke_vertices.length / 2; i = i + 1) {
+    stroke_colors.push(1, 1, 1, 1);
+  }
+  return {
+    vertices: new Float32Array(stroke_vertices),
+    colors: new Float32Array(stroke_colors),
+    indices: new Uint16Array(stroke_indices),
+    vertex_count: stroke_vertices.length / 2,
+    index_count: stroke_indices.length,
+    stroke_width,
+    path_commands: p.commands
+  };
+}
+function draw_cached_path_stroke_webgl(state, cached, color, alpha) {
+  draw_cached_triangles_webgl(state, cached, color, alpha);
+}
+function add_segment_webgl(vertices, indices, base_index, x1, y1, x2, y2, half_width) {
+  add_line_vertices(vertices, x1, y1, x2, y2, half_width);
+  indices.push(base_index, base_index + 1, base_index + 2, base_index + 1, base_index + 3, base_index + 2);
+}
+function add_line_vertices(vertices, x1, y1, x2, y2, half_width) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const len = Math.sqrt(dx * dx + dy * dy);
+  if (len === 0) {
+    vertices.push(x1 - half_width, y1 - half_width, x1 + half_width, y1 - half_width, x1 - half_width, y1 + half_width, x1 + half_width, y1 + half_width);
+    return;
+  }
+  const nx = -dy / len * half_width;
+  const ny = dx / len * half_width;
+  vertices.push(x1 + nx, y1 + ny, x2 + nx, y2 + ny, x1 - nx, y1 - ny, x2 - nx, y2 - ny);
+}
+
+// renderer/webgl/paths.ts
+function draw_path_webgl(state, p, s) {
+  if (s.fill !== null) {
+    const hash = hash_of_path(p);
+    let fill_cached = state.fill_cache.get(hash);
+    if (fill_cached === undefined || !paths_equal2(fill_cached.path_commands, p.commands)) {
+      fill_cached = cache_path_fill_webgl(p);
+      update_cache_webgl(state.fill_cache, state.cache_max_size, hash, fill_cached);
+    }
+    draw_cached_path_fill_webgl(state, fill_cached, s.fill, s.alpha);
+  }
+  if (s.stroke !== null && s.stroke_width > 0) {
+    const hash = hash_of_path(p) * 31 + s.stroke_width;
+    let stroke_cached = state.stroke_cache.get(hash);
+    if (stroke_cached === undefined || stroke_cached.stroke_width !== s.stroke_width || !paths_equal2(stroke_cached.path_commands, p.commands)) {
+      stroke_cached = cache_path_stroke_webgl(p, s.stroke_width);
+      update_cache_webgl(state.stroke_cache, state.cache_max_size, hash, stroke_cached);
+    }
+    draw_cached_path_stroke_webgl(state, stroke_cached, s.stroke, s.alpha);
+  }
+}
+function update_cache_webgl(cache, max_size, key, value) {
+  if (cache.size >= max_size) {
+    const first_key = cache.keys().next().value;
+    if (first_key !== undefined) {
+      cache.delete(first_key);
+    }
+  }
+  cache.set(key, value);
+}
+function paths_equal2(a, b) {
+  if (a.length !== b.length) {
+    return false;
+  }
+  for (let i = 0;i < a.length; i = i + 1) {
+    const cmd_a = a[i];
+    const cmd_b = b[i];
+    if (cmd_a === undefined || cmd_b === undefined) {
+      return false;
+    }
+    if (cmd_a.length !== cmd_b.length) {
+      return false;
+    }
+    for (let j = 0;j < cmd_a.length; j = j + 1) {
+      if (cmd_a[j] !== cmd_b[j]) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+
+// renderer/webgl/shaders.ts
+var vertex_shader_source = `
+  attribute vec2 a_position;
+  attribute vec4 a_color;
+  uniform mat3 u_transform;
+  uniform vec2 u_resolution;
+  varying vec4 v_color;
+  
+  void main() {
+    vec2 position = (u_transform * vec3(a_position, 1.0)).xy;
+    vec2 clip_space = ((position / u_resolution) * 2.0) - 1.0;
+    gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0.0, 1.0);
+    v_color = a_color;
+  }
+`;
+var fragment_shader_source = `
+  precision mediump float;
+  varying vec4 v_color;
+  
+  void main() {
+    gl_FragColor = v_color;
+  }
+`;
+var texture_vertex_shader_source = `
+  attribute vec2 a_position;
+  attribute vec2 a_texcoord;
+  uniform mat3 u_transform;
+  uniform vec2 u_resolution;
+  varying vec2 v_texcoord;
+  
+  void main() {
+    vec2 position = (u_transform * vec3(a_position, 1.0)).xy;
+    vec2 clip_space = ((position / u_resolution) * 2.0) - 1.0;
+    gl_Position = vec4(clip_space * vec2(1.0, -1.0), 0.0, 1.0);
+    v_texcoord = a_texcoord;
+  }
+`;
+var texture_fragment_shader_source = `
+  precision mediump float;
+  uniform sampler2D u_image;
+  uniform float u_alpha;
+  varying vec2 v_texcoord;
+  
+  void main() {
+    gl_FragColor = texture2D(u_image, v_texcoord);
+    gl_FragColor.a *= u_alpha;
+  }
+`;
+function create_color_program_webgl(gl) {
+  const program = create_shader_program(gl, vertex_shader_source, fragment_shader_source);
+  if (program === null) {
+    return null;
+  }
+  const position = gl.getAttribLocation(program, "a_position");
+  const color = gl.getAttribLocation(program, "a_color");
+  const transform = gl.getUniformLocation(program, "u_transform");
+  const resolution = gl.getUniformLocation(program, "u_resolution");
+  if (position < 0 || color < 0 || transform === null || resolution === null) {
+    gl.deleteProgram(program);
+    return null;
+  }
+  return {
+    program,
+    locations: { position, color, transform, resolution }
+  };
+}
+function create_texture_program_webgl(gl) {
+  const program = create_shader_program(gl, texture_vertex_shader_source, texture_fragment_shader_source);
+  if (program === null) {
+    return null;
+  }
+  const position = gl.getAttribLocation(program, "a_position");
+  const texcoord = gl.getAttribLocation(program, "a_texcoord");
+  const transform = gl.getUniformLocation(program, "u_transform");
+  const resolution = gl.getUniformLocation(program, "u_resolution");
+  const alpha = gl.getUniformLocation(program, "u_alpha");
+  const sampler = gl.getUniformLocation(program, "u_image");
+  if (position < 0 || texcoord < 0 || transform === null || resolution === null || alpha === null || sampler === null) {
+    gl.deleteProgram(program);
+    return null;
+  }
+  return {
+    program,
+    locations: { position, texcoord, transform, resolution, alpha, sampler }
+  };
+}
+function create_shader_program(gl, vertex_source, fragment_source) {
+  const vertex_shader = compile_shader(gl, vertex_source, gl.VERTEX_SHADER);
+  const fragment_shader = compile_shader(gl, fragment_source, gl.FRAGMENT_SHADER);
+  if (vertex_shader === null || fragment_shader === null) {
+    return null;
+  }
+  const program = gl.createProgram();
+  if (program === null) {
+    return null;
+  }
+  gl.attachShader(program, vertex_shader);
+  gl.attachShader(program, fragment_shader);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    gl.deleteProgram(program);
+    return null;
+  }
+  return program;
+}
+function compile_shader(gl, source, type) {
+  const shader = gl.createShader(type);
+  if (shader === null) {
+    return null;
+  }
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+}
+
+// renderer/webgl/shapes.ts
+function draw_rectangle_webgl(state, r, s) {
+  const x = r[0];
+  const y = r[1];
+  const w = r[2];
+  const h = r[3];
+  if (s.fill !== null) {
+    add_quad_webgl(state, x, y, x + w, y, x + w, y + h, x, y + h, s.fill, s.alpha);
+  }
+  if (s.stroke !== null && s.stroke_width > 0) {
+    const sw = s.stroke_width;
+    add_quad_webgl(state, x - sw, y - sw, x + w + sw, y - sw, x + w + sw, y, x - sw, y, s.stroke, s.alpha);
+    add_quad_webgl(state, x + w, y, x + w + sw, y, x + w + sw, y + h, x + w, y + h, s.stroke, s.alpha);
+    add_quad_webgl(state, x - sw, y + h, x + w + sw, y + h, x + w + sw, y + h + sw, x - sw, y + h + sw, s.stroke, s.alpha);
+    add_quad_webgl(state, x - sw, y, x, y, x, y + h, x - sw, y + h, s.stroke, s.alpha);
+  }
+}
+function draw_circle_webgl(state, c, s) {
+  const cx = c[0];
+  const cy = c[1];
+  const r = c[2];
+  const segments = 32;
+  if (s.fill !== null) {
+    const base_vertex = state.vertex_count;
+    write_vertex_webgl(state, cx, cy, s.fill, s.alpha);
+    for (let i = 0;i <= segments; i = i + 1) {
+      const angle = i / segments * Math.PI * 2;
+      write_vertex_webgl(state, cx + Math.cos(angle) * r, cy + Math.sin(angle) * r, s.fill, s.alpha);
+    }
+    for (let i = 0;i < segments; i = i + 1) {
+      state.indices[state.index_count] = base_vertex;
+      state.indices[state.index_count + 1] = base_vertex + i + 1;
+      state.indices[state.index_count + 2] = base_vertex + i + 2;
+      state.index_count = state.index_count + 3;
+    }
+  }
+  if (s.stroke !== null && s.stroke_width > 0 && r > 0) {
+    const outer_r = r + s.stroke_width;
+    const base_vertex = state.vertex_count;
+    for (let i = 0;i <= segments; i = i + 1) {
+      const angle = i / segments * Math.PI * 2;
+      const cos = Math.cos(angle);
+      const sin = Math.sin(angle);
+      write_vertex_webgl(state, cx + cos * r, cy + sin * r, s.stroke, s.alpha);
+      write_vertex_webgl(state, cx + cos * outer_r, cy + sin * outer_r, s.stroke, s.alpha);
+    }
+    for (let i = 0;i < segments; i = i + 1) {
+      const base = base_vertex + i * 2;
+      state.indices[state.index_count] = base;
+      state.indices[state.index_count + 1] = base + 1;
+      state.indices[state.index_count + 2] = base + 2;
+      state.indices[state.index_count + 3] = base + 1;
+      state.indices[state.index_count + 4] = base + 3;
+      state.indices[state.index_count + 5] = base + 2;
+      state.index_count = state.index_count + 6;
+    }
+  }
+}
+function draw_line_webgl(state, a, b, s) {
+  if (s.stroke === null || s.stroke_width <= 0) {
+    return;
+  }
+  const dx = b[0] - a[0];
+  const dy = b[1] - a[1];
+  const len = Math.sqrt(dx * dx + dy * dy);
+  if (len === 0) {
+    return;
+  }
+  const width = s.stroke_width / 2;
+  const nx = -dy / len * width;
+  const ny = dx / len * width;
+  add_quad_webgl(state, a[0] + nx, a[1] + ny, b[0] + nx, b[1] + ny, b[0] - nx, b[1] - ny, a[0] - nx, a[1] - ny, s.stroke, s.alpha);
+}
+function draw_polyline_webgl(state, points, s) {
+  if (points.length < 2 || s.stroke === null || s.stroke_width <= 0) {
+    return;
+  }
+  for (let i = 0;i < points.length - 1; i = i + 1) {
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    if (p1 !== undefined && p2 !== undefined) {
+      draw_line_webgl(state, p1, p2, s);
+    }
+  }
+}
+function add_quad_webgl(state, x1, y1, x2, y2, x3, y3, x4, y4, color, alpha) {
+  if (state.vertex_count + 4 > state.max_vertices || state.index_count + 6 > state.max_indices) {
+    flush_webgl(state);
+  }
+  const base = state.vertex_count;
+  write_vertex_webgl(state, x1, y1, color, alpha);
+  write_vertex_webgl(state, x2, y2, color, alpha);
+  write_vertex_webgl(state, x3, y3, color, alpha);
+  write_vertex_webgl(state, x4, y4, color, alpha);
+  state.indices[state.index_count] = base;
+  state.indices[state.index_count + 1] = base + 1;
+  state.indices[state.index_count + 2] = base + 2;
+  state.indices[state.index_count + 3] = base + 1;
+  state.indices[state.index_count + 4] = base + 3;
+  state.indices[state.index_count + 5] = base + 2;
+  state.index_count = state.index_count + 6;
+}
+function write_vertex_webgl(state, x, y, color, alpha) {
+  state.vertices[state.vertex_count * 2] = x;
+  state.vertices[state.vertex_count * 2 + 1] = y;
+  state.colors[state.vertex_count * 4] = color[0];
+  state.colors[state.vertex_count * 4 + 1] = color[1];
+  state.colors[state.vertex_count * 4 + 2] = color[2];
+  state.colors[state.vertex_count * 4 + 3] = color[3] * alpha;
+  state.vertex_count = state.vertex_count + 1;
+}
+
+// renderer/webgl/textures.ts
+function draw_image_webgl(state, image, r, opacity, version) {
+  const texture = sync_texture_webgl(state, image, version);
+  if (texture === null) {
+    return;
+  }
+  if (state.index_count > 0) {
+    flush_webgl(state);
+  }
+  const gl = state.gl;
+  gl.useProgram(state.texture_program);
+  gl.uniformMatrix3fv(state.texture_locations.transform, false, state.current_transform);
+  gl.uniform2f(state.texture_locations.resolution, state.width, state.height);
+  gl.uniform1f(state.texture_locations.alpha, opacity);
+  const x = r[0];
+  const y = r[1];
+  const w = r[2];
+  const h = r[3];
+  const positions = new Float32Array([x, y, x + w, y, x, y + h, x, y + h, x + w, y, x + w, y + h]);
+  const texcoords = new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]);
+  gl.bindBuffer(gl.ARRAY_BUFFER, state.position_buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.DYNAMIC_DRAW);
+  gl.enableVertexAttribArray(state.texture_locations.position);
+  gl.vertexAttribPointer(state.texture_locations.position, 2, gl.FLOAT, false, 0, 0);
+  gl.bindBuffer(gl.ARRAY_BUFFER, state.texcoord_buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, texcoords, gl.DYNAMIC_DRAW);
+  gl.enableVertexAttribArray(state.texture_locations.texcoord);
+  gl.vertexAttribPointer(state.texture_locations.texcoord, 2, gl.FLOAT, false, 0, 0);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, texture.texture);
+  gl.uniform1i(state.texture_locations.sampler, 0);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+}
+function sync_texture_webgl(state, image, version) {
+  if (!is_image_ready_webgl(image)) {
+    return null;
+  }
+  const gl = state.gl;
+  const width = image instanceof HTMLImageElement ? image.naturalWidth : image.width;
+  const height = image instanceof HTMLImageElement ? image.naturalHeight : image.height;
+  const refresh_canvas_each_draw = image instanceof HTMLCanvasElement && version === undefined;
+  const source_key = image_source_key_webgl(image);
+  let texture = state.texture_cache.get(image);
+  if (texture === undefined) {
+    const created = gl.createTexture();
+    if (created === null) {
+      return null;
+    }
+    texture = {
+      texture: created,
+      width,
+      height,
+      version: version ?? null,
+      source_key
+    };
+    state.texture_cache.set(image, texture);
+    gl.bindTexture(gl.TEXTURE_2D, created);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+    return texture;
+  }
+  const size_changed = texture.width !== width || texture.height !== height;
+  const version_changed = version !== undefined && texture.version !== version;
+  const source_changed = texture.source_key !== source_key;
+  if (size_changed || refresh_canvas_each_draw || version_changed || source_changed) {
+    gl.bindTexture(gl.TEXTURE_2D, texture.texture);
+    if (size_changed) {
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+    } else {
+      gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, image);
+    }
+    texture.width = width;
+    texture.height = height;
+    texture.source_key = source_key;
+  }
+  if (version !== undefined) {
+    texture.version = version;
+  }
+  return texture;
+}
+function is_image_ready_webgl(image) {
+  if (image instanceof HTMLImageElement) {
+    return image.complete && image.naturalWidth > 0 && image.naturalHeight > 0;
+  }
+  return image.width > 0 && image.height > 0;
+}
+function image_source_key_webgl(image) {
+  if (image instanceof HTMLImageElement) {
+    return image.currentSrc || image.src || null;
+  }
+  if (typeof ImageBitmap !== "undefined" && image instanceof ImageBitmap) {
+    return `bitmap:${image.width}x${image.height}`;
+  }
+  return null;
+}
+
+// renderer/webgl/transforms.ts
+function set_transform_webgl(state, t) {
+  state.current_transform[0] = t[0];
+  state.current_transform[1] = t[2];
+  state.current_transform[2] = t[4];
+  state.current_transform[3] = t[1];
+  state.current_transform[4] = t[3];
+  state.current_transform[5] = t[5];
+  state.current_transform[6] = 0;
+  state.current_transform[7] = 0;
+  state.current_transform[8] = 1;
+}
+function reset_transform_webgl(state) {
+  state.current_transform[0] = 1;
+  state.current_transform[1] = 0;
+  state.current_transform[2] = 0;
+  state.current_transform[3] = 0;
+  state.current_transform[4] = 1;
+  state.current_transform[5] = 0;
+  state.current_transform[6] = 0;
+  state.current_transform[7] = 0;
+  state.current_transform[8] = 1;
+}
+function save_webgl(state) {
+  const copy = new Float32Array(9);
+  copy.set(state.current_transform);
+  state.transform_stack.push(copy);
+}
+function restore_webgl(state) {
+  const previous = state.transform_stack.pop();
+  if (previous !== undefined) {
+    state.current_transform.set(previous);
+  }
+}
+
+// renderer/webgl/index.ts
+function create_renderer_webgl(canvas, config) {
+  const gl = canvas.getContext("webgl", { alpha: true, antialias: true });
+  if (gl === null) {
+    return null;
+  }
+  const color_program = create_color_program_webgl(gl);
+  const texture_program = create_texture_program_webgl(gl);
+  if (color_program === null || texture_program === null) {
+    if (color_program !== null) {
+      gl.deleteProgram(color_program.program);
+    }
+    if (texture_program !== null) {
+      gl.deleteProgram(texture_program.program);
+    }
+    return null;
+  }
+  const max_vertices = 65536;
+  const max_indices = max_vertices * 3;
+  const state = {
+    gl,
+    canvas,
+    program: color_program.program,
+    texture_program: texture_program.program,
+    program_locations: color_program.locations,
+    texture_locations: texture_program.locations,
+    position_buffer: gl.createBuffer(),
+    color_buffer: gl.createBuffer(),
+    texcoord_buffer: gl.createBuffer(),
+    index_buffer: gl.createBuffer(),
+    vertices: new Float32Array(max_vertices * 2),
+    colors: new Float32Array(max_vertices * 4),
+    indices: new Uint16Array(max_indices),
+    vertex_count: 0,
+    index_count: 0,
+    max_vertices,
+    max_indices,
+    current_transform: new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]),
+    transform_stack: [],
+    fill_cache: new Map,
+    stroke_cache: new Map,
+    texture_cache: new Map,
+    cache_max_size: config.path_cache_size,
+    width: canvas.width,
+    height: canvas.height,
+    pixel_ratio: 1,
+    scissor_enabled: false
+  };
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  return {
+    kind: renderer_kind_webgl,
+    get width() {
+      return state.width;
+    },
+    get height() {
+      return state.height;
+    },
+    get pixel_ratio() {
+      return state.pixel_ratio;
+    },
+    begin_frame: () => begin_frame_webgl(state),
+    end_frame: () => end_frame_webgl(state),
+    set_transform: (t) => set_transform_webgl(state, t),
+    reset_transform: () => reset_transform_webgl(state),
+    save: () => save_webgl(state),
+    restore: () => restore_webgl(state),
+    draw_path: (p, s) => draw_path_webgl(state, p, s),
+    draw_rectangle: (r, s) => draw_rectangle_webgl(state, r, s),
+    draw_circle: (c, s) => draw_circle_webgl(state, c, s),
+    draw_line: (a, b, s) => draw_line_webgl(state, a, b, s),
+    draw_polyline: (points, s) => draw_polyline_webgl(state, points, s),
+    draw_image: (image, r, opacity, version) => draw_image_webgl(state, image, r, opacity, version),
+    clip_rectangle: (r) => clip_rectangle_webgl(state, r),
+    clear: (c) => clear_webgl(state, c),
+    resize: (width, height, pixel_ratio) => resize_webgl(state, width, height, pixel_ratio),
+    dispose: () => dispose_webgl(state)
+  };
+}
+// renderer/renderer.ts
+var renderer_kind_canvas = 0;
+var renderer_kind_webgl = 1;
+function create_renderer_config() {
+  return {
+    prefer_webgl: false,
+    path_cache_size: 1024
+  };
+}
+function create_renderer(canvas, config) {
+  if (config.prefer_webgl) {
+    const webgl_renderer = create_renderer_webgl(canvas, config);
+    if (webgl_renderer !== null) {
+      return webgl_renderer;
+    }
+  }
+  return create_renderer_canvas(canvas, config);
+}
+
+// engine/shared.ts
+var default_background = [1, 1, 1, 1];
+var default_element_fill = [0.95, 0.97, 1, 1];
+var default_element_stroke = [0.18, 0.22, 0.31, 1];
+var min_zoom_engine = 0.0001;
+var max_zoom_engine = 1e6;
+var scratch_camera = [0, 0, 1, 0];
+var scratch_frustum = [0, 0, 0, 0, 0, 0];
+var scratch_transform = [1, 0, 0, 1, 0, 0];
+var scratch_world = [0, 0];
+var scratch_screen = [0, 0];
+
+// camera/projection.ts
+function world_to_screen_camera(c, v, world_pos, out) {
+  const dx = world_pos[0] - c[0];
+  const dy = world_pos[1] - c[1];
+  const cos_r = Math.cos(c[3]);
+  const sin_r = Math.sin(c[3]);
+  const rotated_x = dx * cos_r - dy * sin_r;
+  const rotated_y = dx * sin_r + dy * cos_r;
+  const screen_x = rotated_x * c[2] + v[0] / 2;
+  const screen_y = rotated_y * c[2] + v[1] / 2;
+  out[0] = screen_x;
+  out[1] = screen_y;
+  return out;
+}
+function screen_to_world_camera(c, v, screen_pos, out) {
+  if (c[2] <= 0) {
+    out[0] = c[0];
+    out[1] = c[1];
+    return out;
+  }
+  const dx = screen_pos[0] - v[0] / 2;
+  const dy = screen_pos[1] - v[1] / 2;
+  const cos_r = Math.cos(-c[3]);
+  const sin_r = Math.sin(-c[3]);
+  const scaled_x = dx / c[2];
+  const scaled_y = dy / c[2];
+  const rotated_x = scaled_x * cos_r - scaled_y * sin_r;
+  const rotated_y = scaled_x * sin_r + scaled_y * cos_r;
+  out[0] = rotated_x + c[0];
+  out[1] = rotated_y + c[1];
+  return out;
+}
+function view_transform_camera(c, out) {
+  const cos_r = Math.cos(c[3]);
+  const sin_r = Math.sin(c[3]);
+  out[0] = cos_r * c[2];
+  out[1] = sin_r * c[2];
+  out[2] = -sin_r * c[2];
+  out[3] = cos_r * c[2];
+  out[4] = -c[0] * cos_r * c[2] + c[1] * sin_r * c[2];
+  out[5] = -c[0] * sin_r * c[2] - c[1] * cos_r * c[2];
+  return out;
+}
+function inverse_view_transform_camera(c, out) {
+  const cos_r = Math.cos(c[3]);
+  const sin_r = Math.sin(c[3]);
+  const safe_zoom = c[2] <= 0 ? 0.0001 : c[2];
+  const inverse_zoom = 1 / safe_zoom;
+  out[0] = cos_r * inverse_zoom;
+  out[1] = -sin_r * inverse_zoom;
+  out[2] = sin_r * inverse_zoom;
+  out[3] = cos_r * inverse_zoom;
+  out[4] = c[0];
+  out[5] = c[1];
+  return out;
+}
+function camera_frustum(c, v, out) {
+  if (c[2] <= 0) {
+    out[0] = c[0];
+    out[1] = c[0];
+    out[2] = c[1];
+    out[3] = c[1];
+    out[4] = 0;
+    out[5] = Number.MAX_VALUE;
+    return out;
+  }
+  const half_width = v[0] / (2 * c[2]);
+  const half_height = v[1] / (2 * c[2]);
+  if (c[3] === 0) {
+    out[0] = c[0] - half_width;
+    out[1] = c[0] + half_width;
+    out[2] = c[1] + half_height;
+    out[3] = c[1] - half_height;
+    out[4] = 0;
+    out[5] = Number.MAX_VALUE;
+    return out;
+  }
+  const cos_r = Math.abs(Math.cos(c[3]));
+  const sin_r = Math.abs(Math.sin(c[3]));
+  const x_extent = half_width * cos_r + half_height * sin_r;
+  const y_extent = half_width * sin_r + half_height * cos_r;
+  out[0] = c[0] - x_extent;
+  out[1] = c[0] + x_extent;
+  out[2] = c[1] + y_extent;
+  out[3] = c[1] - y_extent;
+  out[4] = 0;
+  out[5] = Number.MAX_VALUE;
+  return out;
+}
+function fit_camera_to_bounds(bounds, v, margin = 0.1, out) {
+  const bounds_width = bounds[2];
+  const bounds_height = bounds[3];
+  if (bounds_width <= 0 || bounds_height <= 0) {
+    out[0] = bounds[0];
+    out[1] = bounds[1];
+    out[2] = 1;
+    out[3] = 0;
+    return out;
+  }
+  const viewport_width = v[0] * (1 - margin * 2);
+  const viewport_height = v[1] * (1 - margin * 2);
+  if (viewport_width <= 0 || viewport_height <= 0) {
+    out[0] = bounds[0] + bounds_width / 2;
+    out[1] = bounds[1] + bounds_height / 2;
+    out[2] = 1;
+    out[3] = 0;
+    return out;
+  }
+  const zoom_x = viewport_width / bounds_width;
+  const zoom_y = viewport_height / bounds_height;
+  const zoom = Math.min(zoom_x, zoom_y);
+  const center_x = bounds[0] + bounds_width / 2;
+  const center_y = bounds[1] + bounds_height / 2;
+  out[0] = center_x;
+  out[1] = center_y;
+  out[2] = zoom;
+  out[3] = 0;
+  return out;
+}
+function contains_point_camera_frustum(c, v, world_x, world_y) {
+  const dx = world_x - c[0];
+  const dy = world_y - c[1];
+  const cos_r = Math.cos(-c[3]);
+  const sin_r = Math.sin(-c[3]);
+  const rotated_x = dx * cos_r - dy * sin_r;
+  const rotated_y = dx * sin_r + dy * cos_r;
+  const scaled_x = rotated_x * c[2];
+  const scaled_y = rotated_y * c[2];
+  const half_width = v[0] / 2;
+  const half_height = v[1] / 2;
+  return scaled_x >= -half_width && scaled_x <= half_width && scaled_y >= -half_height && scaled_y <= half_height;
+}
+function width_of_camera_world(c, v) {
+  const safe_zoom = c[2] <= 0 ? 0.0001 : c[2];
+  return v[0] / safe_zoom;
+}
+function height_of_camera_world(c, v) {
+  const safe_zoom = c[2] <= 0 ? 0.0001 : c[2];
+  return v[1] / safe_zoom;
+}
+function pixel_size_of_camera(c) {
+  const safe_zoom = c[2] <= 0 ? 0.0001 : c[2];
+  return 1 / safe_zoom;
+}
+function pixel_ratio_of_viewport(v) {
+  return v[2];
+}
+function device_width_of_viewport(v) {
+  return v[0] * v[2];
+}
+function device_height_of_viewport(v) {
+  return v[1] * v[2];
+}
+function world_to_device_camera(c, v, world_pos, out) {
+  world_to_screen_camera(c, v, world_pos, out);
+  out[0] = out[0] * v[2];
+  out[1] = out[1] * v[2];
+  return out;
+}
+function device_to_world_camera(c, v, device_pos, out) {
+  const screen_pos = [device_pos[0] / v[2], device_pos[1] / v[2]];
+  return screen_to_world_camera(c, v, screen_pos, out);
+}
+
+// engine/camera.ts
+function set_camera_engine(state, x, y, zoom, rotation = 0) {
+  set_camera(sanitize_number_engine(x, state.camera[0]), sanitize_number_engine(y, state.camera[1]), sanitize_zoom_engine(zoom, state.camera[2]), sanitize_number_engine(rotation, state.camera[3]), state.camera);
+  return state;
+}
+function pan_engine(state, dx, dy) {
+  pan_camera(state.camera, dx, dy, scratch_camera);
+  copy_camera_into_engine(state, scratch_camera);
+  return state;
+}
+function zoom_engine(state, factor) {
+  zoom_camera(state.camera, factor, scratch_camera);
+  copy_camera_into_engine(state, scratch_camera);
+  return state;
+}
+function zoom_at_engine(state, factor, screen_x, screen_y) {
+  scratch_screen[0] = screen_x;
+  scratch_screen[1] = screen_y;
+  screen_to_world_camera(state.camera, state.viewport, scratch_screen, scratch_world);
+  zoom_at_camera(state.camera, factor, {
+    screen_x,
+    screen_y,
+    world_x: scratch_world[0],
+    world_y: scratch_world[1]
+  }, scratch_camera);
+  copy_camera_into_engine(state, scratch_camera);
+  return state;
+}
+function resize_engine(state, width, height, pixel_ratio = Math.max(1, globalThis.devicePixelRatio || 1)) {
+  const safe_width = Math.max(1, width);
+  const safe_height = Math.max(1, height);
+  const safe_pixel_ratio = Math.max(1, pixel_ratio);
+  state.viewport[0] = safe_width;
+  state.viewport[1] = safe_height;
+  state.viewport[2] = safe_pixel_ratio;
+  state.renderer.resize(safe_width, safe_height, safe_pixel_ratio);
+  return state;
+}
+function world_to_screen_engine(state, world, out) {
+  return world_to_screen_camera(state.camera, state.viewport, world, out);
+}
+function screen_to_world_engine(state, screen, out) {
+  return screen_to_world_camera(state.camera, state.viewport, screen, out);
+}
+function visible_bounds_world_engine(state) {
+  camera_frustum(state.camera, state.viewport, scratch_frustum);
+  return [
+    scratch_frustum[0],
+    scratch_frustum[3],
+    scratch_frustum[1] - scratch_frustum[0],
+    scratch_frustum[2] - scratch_frustum[3]
+  ];
+}
+function camera_to_screen_transform_engine(c, v, out) {
+  const cos_r = Math.cos(c[3]);
+  const sin_r = Math.sin(c[3]);
+  const zoom = c[2];
+  out[0] = cos_r * zoom;
+  out[1] = sin_r * zoom;
+  out[2] = -sin_r * zoom;
+  out[3] = cos_r * zoom;
+  out[4] = v[0] / 2 - c[0] * cos_r * zoom + c[1] * sin_r * zoom;
+  out[5] = v[1] / 2 - c[0] * sin_r * zoom - c[1] * cos_r * zoom;
+  return out;
+}
+function sanitize_number_engine(value, fallback) {
+  if (Number.isFinite(value)) {
+    return value;
+  }
+  return Number.isFinite(fallback) ? fallback : 0;
+}
+function sanitize_zoom_engine(value, fallback) {
+  const safe_value = Number.isFinite(value) ? value : fallback;
+  if (!Number.isFinite(safe_value) || safe_value <= 0) {
+    return 1;
+  }
+  return Math.min(max_zoom_engine, Math.max(min_zoom_engine, safe_value));
+}
+function copy_camera_into_engine(state, value) {
+  state.camera[0] = sanitize_number_engine(value[0], state.camera[0]);
+  state.camera[1] = sanitize_number_engine(value[1], state.camera[1]);
+  state.camera[2] = sanitize_zoom_engine(value[2], state.camera[2]);
+  state.camera[3] = sanitize_number_engine(value[3], state.camera[3]);
+}
+
+// engine/create.ts
+function create_engine(canvas, options = {}) {
+  const defaults = create_renderer_config();
+  const renderer_config = {
+    prefer_webgl: options.prefer_webgl ?? defaults.prefer_webgl,
+    path_cache_size: options.path_cache_size ?? defaults.path_cache_size
+  };
+  const render_backend = create_renderer(canvas, renderer_config);
+  if (render_backend === null) {
+    return null;
+  }
+  const initial_width = Math.max(1, canvas.clientWidth || canvas.width || 1);
+  const initial_height = Math.max(1, canvas.clientHeight || canvas.height || 1);
+  const initial_pixel_ratio = Math.max(1, globalThis.devicePixelRatio || 1);
+  const initial_viewport = [initial_width, initial_height, initial_pixel_ratio];
+  render_backend.resize(initial_width, initial_height, initial_pixel_ratio);
+  let doc = options.document;
+  if (doc === undefined) {
+    const created = create_document("doc_0", "layer_0");
+    doc = add_layer_document(created, create_layer("layer_0", "Layer 1"));
+  }
+  const initial_camera = create_camera(0, 0, 1, 0);
+  if (options.camera !== undefined) {
+    initial_camera[0] = sanitize_number_engine(options.camera[0], 0);
+    initial_camera[1] = sanitize_number_engine(options.camera[1], 0);
+    initial_camera[2] = sanitize_zoom_engine(options.camera[2], 1);
+    initial_camera[3] = sanitize_number_engine(options.camera[3], 0);
+  }
+  return {
+    renderer: render_backend,
+    document: doc,
+    camera: initial_camera,
+    viewport: [initial_viewport[0], initial_viewport[1], initial_viewport[2]],
+    background: options.background ? [options.background[0], options.background[1], options.background[2], options.background[3]] : [
+      default_background[0],
+      default_background[1],
+      default_background[2],
+      default_background[3]
+    ],
+    background_image: options.background_image ?? null
+  };
+}
+function dispose_engine(state) {
+  state.renderer.dispose();
+}
+function set_document_engine(state, doc) {
+  state.document = doc;
+  return state;
+}
+function set_background_engine(state, value) {
+  state.background[0] = value[0];
+  state.background[1] = value[1];
+  state.background[2] = value[2];
+  state.background[3] = value[3];
+  return state;
+}
+function set_background_image_engine(state, value) {
+  state.background_image = value;
+  return state;
+}
+// document/element.ts
+var element_type_stroke = 0;
+var element_type_shape = 1;
+var element_type_image = 2;
+var element_type_text = 3;
+var shape_type_rectangle = 0;
+var shape_type_ellipse = 1;
+var shape_type_line = 2;
+var shape_type_arrow = 3;
+var shape_type_frame = 4;
+var text_align_left = 0;
+var text_align_center = 1;
+var text_align_right = 2;
+function create_stroke_element(id, bounds, z_index, layer_id, points, pressure, color, width, group_id = null) {
+  return {
+    type: element_type_stroke,
+    id,
+    bounds: [bounds[0], bounds[1], bounds[2], bounds[3]],
+    z_index,
+    layer_id,
+    group_id,
+    points: points.map((p) => [p[0], p[1]]),
+    pressure: pressure === null ? null : [...pressure],
+    color: [color[0], color[1], color[2], color[3]],
+    width,
+    simplified_points: null,
+    spline: null
+  };
+}
+function create_shape_element(id, bounds, z_index, layer_id, shape_type, fill_color, stroke_color, stroke_width, start_point, end_point, group_id = null) {
+  return {
+    type: element_type_shape,
+    id,
+    bounds: [bounds[0], bounds[1], bounds[2], bounds[3]],
+    z_index,
+    layer_id,
+    group_id,
+    shape_type,
+    fill_color: fill_color === null ? null : [fill_color[0], fill_color[1], fill_color[2], fill_color[3]],
+    stroke_color: stroke_color === null ? null : [stroke_color[0], stroke_color[1], stroke_color[2], stroke_color[3]],
+    stroke_width,
+    start_point: start_point === null ? null : [start_point[0], start_point[1]],
+    end_point: end_point === null ? null : [end_point[0], end_point[1]]
+  };
+}
+function create_image_element(id, bounds, z_index, layer_id, src, original_width, original_height, opacity, group_id = null, asset_id = null) {
+  return {
+    type: element_type_image,
+    id,
+    bounds: [bounds[0], bounds[1], bounds[2], bounds[3]],
+    z_index,
+    layer_id,
+    group_id,
+    asset_id,
+    src,
+    original_width,
+    original_height,
+    opacity,
+    loaded: false,
+    load_error: false,
+    bitmap: null
+  };
+}
+function create_text_element(id, bounds, z_index, layer_id, content, font_family, font_size, color, align, group_id = null) {
+  return {
+    type: element_type_text,
+    id,
+    bounds: [bounds[0], bounds[1], bounds[2], bounds[3]],
+    z_index,
+    layer_id,
+    group_id,
+    content,
+    font_family,
+    font_size,
+    color: [color[0], color[1], color[2], color[3]],
+    align
+  };
+}
+function clone_element(el) {
+  if (el.type === element_type_stroke) {
+    const stroke = el;
+    return create_stroke_element(stroke.id, stroke.bounds, stroke.z_index, stroke.layer_id, stroke.points, stroke.pressure, stroke.color, stroke.width, stroke.group_id);
+  } else if (el.type === element_type_shape) {
+    const shape = el;
+    return create_shape_element(shape.id, shape.bounds, shape.z_index, shape.layer_id, shape.shape_type, shape.fill_color, shape.stroke_color, shape.stroke_width, shape.start_point, shape.end_point, shape.group_id);
+  } else if (el.type === element_type_image) {
+    const image = el;
+    const cloned = create_image_element(image.id, image.bounds, image.z_index, image.layer_id, image.src, image.original_width, image.original_height, image.opacity, image.group_id, image.asset_id);
+    cloned.loaded = image.loaded;
+    cloned.load_error = image.load_error;
+    cloned.bitmap = image.bitmap;
+    return cloned;
+  } else {
+    const text = el;
+    return create_text_element(text.id, text.bounds, text.z_index, text.layer_id, text.content, text.font_family, text.font_size, text.color, text.align, text.group_id);
+  }
+}
+function id_of_element(el) {
+  return el.id;
+}
+function bounds_of_element(el) {
+  return [el.bounds[0], el.bounds[1], el.bounds[2], el.bounds[3]];
+}
+function z_index_of_element(el) {
+  return el.z_index;
+}
+function layer_id_of_element(el) {
+  return el.layer_id;
+}
+function type_of_element(el) {
+  return el.type;
+}
+function update_element_bounds(el, bounds) {
+  const cloned = clone_element(el);
+  const mutable = cloned;
+  mutable.bounds = [bounds[0], bounds[1], bounds[2], bounds[3]];
+  return cloned;
+}
+function update_element_z_index(el, z_index) {
+  const cloned = clone_element(el);
+  const mutable = cloned;
+  mutable.z_index = z_index;
+  return cloned;
+}
+function update_element_layer_id(el, layer_id) {
+  const cloned = clone_element(el);
+  const mutable = cloned;
+  mutable.layer_id = layer_id;
+  return cloned;
+}
+function update_stroke_points(el, points) {
+  return {
+    ...el,
+    points: points.map((p) => [p[0], p[1]]),
+    simplified_points: null,
+    spline: null
+  };
+}
+function update_stroke_simplified_points(el, simplified) {
+  return {
+    ...el,
+    simplified_points: simplified === null ? null : simplified.map((p) => [p[0], p[1]])
+  };
+}
+function update_stroke_spline(el, spline_data) {
+  return {
+    ...el,
+    spline: spline_data
+  };
+}
+function update_image_loaded(el, loaded, bitmap, load_error = false) {
+  return {
+    ...el,
+    loaded,
+    load_error,
+    bitmap
+  };
+}
+function update_image_asset_id(el, asset_id) {
+  return {
+    ...el,
+    asset_id
+  };
+}
+function update_text_content(el, content) {
+  return {
+    ...el,
+    content
+  };
+}
+function equals_element_identity(a, b) {
+  if (a.type !== b.type || a.id !== b.id) {
+    return false;
+  }
+  if (a.z_index !== b.z_index || a.layer_id !== b.layer_id) {
+    return false;
+  }
+  if (a.group_id !== b.group_id) {
+    return false;
+  }
+  if (a.bounds[0] !== b.bounds[0] || a.bounds[1] !== b.bounds[1] || a.bounds[2] !== b.bounds[2] || a.bounds[3] !== b.bounds[3]) {
+    return false;
+  }
+  return true;
+}
+
+// math/quadtree.ts
+function create_quadtree_point(x, y, data = null) {
+  return [x, y, data];
+}
+function x_of_quadtree_point(point) {
+  return point[0];
+}
+function y_of_quadtree_point(point) {
+  return point[1];
+}
+function data_of_quadtree_point(point) {
+  return point[2];
+}
+function create_quadtree_node(boundary, capacity = 4, depth = 0) {
+  return {
+    boundary: [boundary[0], boundary[1], boundary[2], boundary[3]],
+    points: [],
+    children: null,
+    capacity: Math.max(1, capacity),
+    depth: Math.max(0, depth)
+  };
+}
+function create_quadtree(boundary, capacity = 4, max_depth = 8) {
+  const normalized_capacity = Math.max(1, capacity);
+  const normalized_max_depth = Math.max(1, max_depth);
+  return {
+    root: create_quadtree_node(boundary, normalized_capacity, 0),
+    capacity: normalized_capacity,
+    max_depth: normalized_max_depth
+  };
+}
+function is_leaf_quadtree_node(node) {
+  return node.children === null;
+}
+function point_count_quadtree_node(node) {
+  if (is_leaf_quadtree_node(node)) {
+    return node.points.length;
+  }
+  let total = 0;
+  if (node.children !== null) {
+    for (let i = 0;i < 4; i = i + 1) {
+      const child = node.children[i];
+      if (child) {
+        total = total + point_count_quadtree_node(child);
+      }
+    }
+  }
+  return total;
+}
+function subdivide_quadtree_node(node, max_depth) {
+  if (node.children !== null) {
+    return node;
+  }
+  const boundary = node.boundary;
+  const half_width = boundary[2] / 2;
+  const half_height = boundary[3] / 2;
+  const x = boundary[0];
+  const y = boundary[1];
+  const next_depth = node.depth + 1;
+  const new_children = [
+    create_quadtree_node(create_rectangle(x, y, half_width, half_height), node.capacity, next_depth),
+    create_quadtree_node(create_rectangle(x + half_width, y, half_width, half_height), node.capacity, next_depth),
+    create_quadtree_node(create_rectangle(x, y + half_height, half_width, half_height), node.capacity, next_depth),
+    create_quadtree_node(create_rectangle(x + half_width, y + half_height, half_width, half_height), node.capacity, next_depth)
+  ];
+  let updated_children = [...new_children];
+  for (let i = 0;i < node.points.length; i = i + 1) {
+    const point = node.points[i];
+    if (point) {
+      for (let j = 0;j < 4; j = j + 1) {
+        const child = updated_children[j];
+        if (child) {
+          const child_result = insert_quadtree_node(child, point, max_depth);
+          if (child_result !== null) {
+            updated_children[j] = child_result;
+            break;
+          }
+        }
+      }
+    }
+  }
+  return {
+    boundary: node.boundary,
+    points: [],
+    children: updated_children,
+    capacity: node.capacity,
+    depth: node.depth
+  };
+}
+function insert_quadtree_node(node, point, max_depth) {
+  if (!contains_point_rectangle(node.boundary, point[0], point[1])) {
+    return null;
+  }
+  if (is_leaf_quadtree_node(node)) {
+    if (node.points.length < node.capacity || node.depth >= max_depth) {
+      const new_points = [...node.points, [point[0], point[1], point[2]]];
+      return {
+        boundary: node.boundary,
+        points: new_points,
+        children: null,
+        capacity: node.capacity,
+        depth: node.depth
+      };
+    }
+    const subdivided = subdivide_quadtree_node(node, max_depth);
+    return insert_quadtree_node(subdivided, point, max_depth);
+  }
+  if (node.children !== null && node.children.length === 4) {
+    const new_children = [...node.children];
+    for (let i = 0;i < 4; i = i + 1) {
+      const child = node.children[i];
+      if (child) {
+        const child_result = insert_quadtree_node(child, point, max_depth);
+        if (child_result !== null) {
+          new_children[i] = child_result;
+          return {
+            boundary: node.boundary,
+            points: node.points,
+            children: new_children,
+            capacity: node.capacity,
+            depth: node.depth
+          };
+        }
+      }
+    }
+  }
+  return null;
+}
+function insert_quadtree(tree, point) {
+  const new_root = insert_quadtree_node(tree.root, point, tree.max_depth);
+  if (new_root !== null) {
+    return {
+      root: new_root,
+      capacity: tree.capacity,
+      max_depth: tree.max_depth
+    };
+  }
+  return tree;
+}
+function query_range_quadtree_node(node, range, out_results) {
+  if (!intersects_rectangle(node.boundary, range)) {
+    return out_results;
+  }
+  if (is_leaf_quadtree_node(node)) {
+    for (let i = 0;i < node.points.length; i = i + 1) {
+      const point = node.points[i];
+      if (point && contains_point_rectangle(range, point[0], point[1])) {
+        out_results.push([point[0], point[1], point[2]]);
+      }
+    }
+    return out_results;
+  }
+  if (node.children !== null && node.children.length === 4) {
+    for (let i = 0;i < 4; i = i + 1) {
+      const child = node.children[i];
+      if (child) {
+        query_range_quadtree_node(child, range, out_results);
+      }
+    }
+  }
+  return out_results;
+}
+function query_range_quadtree(tree, range, out_results) {
+  return query_range_quadtree_node(tree.root, range, out_results);
+}
+function query_radius_quadtree_node(node, center_x, center_y, radius, out_results) {
+  const radius_squared = radius * radius;
+  const query_bounds = create_rectangle(center_x - radius, center_y - radius, radius * 2, radius * 2);
+  const candidates = [];
+  query_range_quadtree_node(node, query_bounds, candidates);
+  for (let i = 0;i < candidates.length; i = i + 1) {
+    const point = candidates[i];
+    if (point) {
+      const dx = point[0] - center_x;
+      const dy = point[1] - center_y;
+      const distance_squared = dx * dx + dy * dy;
+      if (distance_squared <= radius_squared) {
+        out_results.push([point[0], point[1], point[2]]);
+      }
+    }
+  }
+  return out_results;
+}
+function query_radius_quadtree(tree, center_x, center_y, radius, out_results) {
+  return query_radius_quadtree_node(tree.root, center_x, center_y, radius, out_results);
+}
+function find_nearest_quadtree(tree, x, y, max_distance = Number.POSITIVE_INFINITY) {
+  return find_nearest_quadtree_node(tree.root, x, y, max_distance);
+}
+function find_nearest_quadtree_node(node, x, y, max_distance = Number.POSITIVE_INFINITY) {
+  let best_point = null;
+  let best_distance_squared = max_distance * max_distance;
+  function search_node_recursive(search_node) {
+    if (is_leaf_quadtree_node(search_node)) {
+      for (let i = 0;i < search_node.points.length; i = i + 1) {
+        const point = search_node.points[i];
+        if (point) {
+          const dx = point[0] - x;
+          const dy = point[1] - y;
+          const distance_squared = dx * dx + dy * dy;
+          if (distance_squared < best_distance_squared) {
+            best_distance_squared = distance_squared;
+            best_point = [point[0], point[1], point[2]];
+          }
+        }
+      }
+    } else if (search_node.children !== null && search_node.children.length === 4) {
+      const child_distances = [];
+      for (let i = 0;i < 4; i = i + 1) {
+        const child = search_node.children[i];
+        if (child) {
+          const boundary = child.boundary;
+          const closest_x = Math.max(boundary[0], Math.min(x, boundary[0] + boundary[2]));
+          const closest_y = Math.max(boundary[1], Math.min(y, boundary[1] + boundary[3]));
+          const dx = x - closest_x;
+          const dy = y - closest_y;
+          const distance = dx * dx + dy * dy;
+          if (distance < best_distance_squared) {
+            child_distances.push({ node: child, distance });
+          }
+        }
+      }
+      child_distances.sort((a, b) => a.distance - b.distance);
+      for (let i = 0;i < child_distances.length; i = i + 1) {
+        const child_info = child_distances[i];
+        if (child_info && child_info.distance < best_distance_squared) {
+          search_node_recursive(child_info.node);
+        }
+      }
+    }
+  }
+  search_node_recursive(node);
+  return best_point;
+}
+function remove_quadtree_node(node, point) {
+  if (!contains_point_rectangle(node.boundary, point[0], point[1])) {
+    return node;
+  }
+  if (is_leaf_quadtree_node(node)) {
+    const new_points = [];
+    let removed = false;
+    for (let i = 0;i < node.points.length; i = i + 1) {
+      const existing = node.points[i];
+      if (existing && existing[0] === point[0] && existing[1] === point[1] && !removed) {
+        removed = true;
+      } else if (existing) {
+        new_points.push([existing[0], existing[1], existing[2]]);
+      }
+    }
+    return {
+      boundary: node.boundary,
+      points: new_points,
+      children: null,
+      capacity: node.capacity,
+      depth: node.depth
+    };
+  }
+  if (node.children !== null && node.children.length === 4) {
+    const new_children = [...node.children];
+    let changed = false;
+    for (let i = 0;i < 4; i = i + 1) {
+      const child = node.children[i];
+      if (child) {
+        const new_child = remove_quadtree_node(child, point);
+        if (new_child !== child) {
+          new_children[i] = new_child;
+          changed = true;
+        }
+      }
+    }
+    if (changed) {
+      let total_points = 0;
+      for (let i = 0;i < 4; i = i + 1) {
+        const child = new_children[i];
+        if (child) {
+          total_points = total_points + point_count_quadtree_node(child);
+        }
+      }
+      if (total_points <= node.capacity) {
+        const all_points = [];
+        collect_all_points_quadtree_node({ ...node, children: new_children }, all_points);
+        return {
+          boundary: node.boundary,
+          points: all_points,
+          children: null,
+          capacity: node.capacity,
+          depth: node.depth
+        };
+      }
+      return {
+        boundary: node.boundary,
+        points: node.points,
+        children: new_children,
+        capacity: node.capacity,
+        depth: node.depth
+      };
+    }
+  }
+  return node;
+}
+function remove_quadtree(tree, point) {
+  const new_root = remove_quadtree_node(tree.root, point);
+  return {
+    root: new_root,
+    capacity: tree.capacity,
+    max_depth: tree.max_depth
+  };
+}
+function collect_all_points_quadtree_node(node, out_points) {
+  if (is_leaf_quadtree_node(node)) {
+    for (let i = 0;i < node.points.length; i = i + 1) {
+      const point = node.points[i];
+      if (point) {
+        out_points.push([point[0], point[1], point[2]]);
+      }
+    }
+  } else if (node.children !== null && node.children.length === 4) {
+    for (let i = 0;i < 4; i = i + 1) {
+      const child = node.children[i];
+      if (child) {
+        collect_all_points_quadtree_node(child, out_points);
+      }
+    }
+  }
+  return out_points;
+}
+function clear_quadtree(tree) {
+  return {
+    root: create_quadtree_node(tree.root.boundary, tree.capacity, 0),
+    capacity: tree.capacity,
+    max_depth: tree.max_depth
+  };
+}
+function point_count_quadtree(tree) {
+  return point_count_quadtree_node(tree.root);
+}
+function depth_of_quadtree_node(node) {
+  if (is_leaf_quadtree_node(node)) {
+    return node.depth;
+  }
+  let max_depth = node.depth;
+  if (node.children !== null && node.children.length === 4) {
+    for (let i = 0;i < 4; i = i + 1) {
+      const child = node.children[i];
+      if (child) {
+        const child_depth = depth_of_quadtree_node(child);
+        if (child_depth > max_depth) {
+          max_depth = child_depth;
+        }
+      }
+    }
+  }
+  return max_depth;
+}
+function depth_of_quadtree(tree) {
+  return depth_of_quadtree_node(tree.root);
+}
+function is_empty_quadtree(tree) {
+  return point_count_quadtree(tree) === 0;
+}
+function bounds_of_quadtree(tree, out_bounds) {
+  out_bounds[0] = tree.root.boundary[0];
+  out_bounds[1] = tree.root.boundary[1];
+  out_bounds[2] = tree.root.boundary[2];
+  out_bounds[3] = tree.root.boundary[3];
+  return out_bounds;
+}
+function find_k_nearest_quadtree(tree, x, y, k, max_distance, out_results) {
+  if (point_count_quadtree(tree) <= k * 2) {
+    const all_points = [];
+    collect_all_points_quadtree_node(tree.root, all_points);
+    const distances2 = [];
+    for (let i = 0;i < all_points.length; i = i + 1) {
+      const point = all_points[i];
+      if (point) {
+        const dx = point[0] - x;
+        const dy = point[1] - y;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        if (distance <= max_distance) {
+          distances2.push({ point, distance });
+        }
+      }
+    }
+    distances2.sort((a, b) => a.distance - b.distance);
+    const limit2 = Math.min(k, distances2.length);
+    for (let i = 0;i < limit2; i = i + 1) {
+      const item = distances2[i];
+      if (item && item.point) {
+        out_results.push([item.point[0], item.point[1], item.point[2]]);
+      }
+    }
+    return out_results;
+  }
+  let current_radius = 100;
+  const bounds = [0, 0, 0, 0];
+  bounds_of_quadtree(tree, bounds);
+  const max_possible_radius = Math.sqrt(bounds[2] * bounds[2] + bounds[3] * bounds[3]);
+  while (current_radius <= max_possible_radius) {
+    const candidates = [];
+    query_radius_quadtree(tree, x, y, Math.min(current_radius, max_distance), candidates);
+    if (candidates.length >= k) {
+      const distances2 = [];
+      for (let i = 0;i < candidates.length; i = i + 1) {
+        const point = candidates[i];
+        if (point) {
+          const dx = point[0] - x;
+          const dy = point[1] - y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+          if (distance <= max_distance) {
+            distances2.push({ point, distance });
+          }
+        }
+      }
+      distances2.sort((a, b) => a.distance - b.distance);
+      const limit2 = Math.min(k, distances2.length);
+      for (let i = 0;i < limit2; i = i + 1) {
+        const item = distances2[i];
+        if (item && item.point) {
+          out_results.push([item.point[0], item.point[1], item.point[2]]);
+        }
+      }
+      return out_results;
+    }
+    current_radius = current_radius * 2;
+  }
+  const final_candidates = [];
+  query_radius_quadtree(tree, x, y, max_distance, final_candidates);
+  const distances = [];
+  for (let i = 0;i < final_candidates.length; i = i + 1) {
+    const point = final_candidates[i];
+    if (point) {
+      const dx = point[0] - x;
+      const dy = point[1] - y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      distances.push({ point, distance });
+    }
+  }
+  distances.sort((a, b) => a.distance - b.distance);
+  const limit = Math.min(k, distances.length);
+  for (let i = 0;i < limit; i = i + 1) {
+    const item = distances[i];
+    if (item && item.point) {
+      out_results.push([item.point[0], item.point[1], item.point[2]]);
+    }
+  }
+  return out_results;
+}
+function detect_collisions_quadtree(tree, point, radius, out_collisions) {
+  return query_radius_quadtree(tree, point[0], point[1], radius, out_collisions);
+}
+function detect_collisions_rectangle_quadtree(tree, rect, out_collisions) {
+  return query_range_quadtree(tree, rect, out_collisions);
+}
+
+// document/query.ts
+function elements_in_bounds_document(doc, bounds) {
+  const results = [];
+  for (const el of doc.elements.values()) {
+    const el_bounds = el.bounds;
+    if (el_bounds[0] < bounds[0] + bounds[2] && el_bounds[0] + el_bounds[2] > bounds[0] && el_bounds[1] < bounds[1] + bounds[3] && el_bounds[1] + el_bounds[3] > bounds[1]) {
+      results.push(el);
+    }
+  }
+  return results;
+}
+
+// engine/elements.ts
+var loaded_images_engine = new Map;
+var text_bitmap_cache_engine = new Map;
+var text_bitmap_cache_limit_engine = 128;
+function render_element_engine(drawer, el, asset_src = null) {
+  if (el.type === element_type_stroke) {
+    render_stroke_element_engine(drawer, el);
+    return;
+  }
+  if (el.type === element_type_shape) {
+    render_shape_element_engine(drawer, el);
+    return;
+  }
+  if (el.type === element_type_image) {
+    render_image_element_engine(drawer, el, asset_src);
+    return;
+  }
+  if (el.type === element_type_text) {
+    render_text_element_engine(drawer, el);
+  }
+}
+function render_stroke_element_engine(drawer, el) {
+  const style = {
+    fill: null,
+    stroke: el.color,
+    stroke_width: el.width,
+    line_cap: 1,
+    line_join: 1,
+    miter_limit: 10,
+    alpha: el.color[3]
+  };
+  const points = el.simplified_points && el.simplified_points.length > 1 ? el.simplified_points : el.points;
+  if (points.length === 1) {
+    const p = points[0];
+    if (p !== undefined) {
+      drawer.draw_circle([p[0], p[1], Math.max(0.5, el.width * 0.5)], style);
+    }
+    return;
+  }
+  if (points.length > 1) {
+    drawer.draw_polyline(points, style);
+  }
+}
+function render_shape_element_engine(drawer, el) {
+  const style = {
+    fill: el.fill_color,
+    stroke: el.stroke_color,
+    stroke_width: el.stroke_width,
+    line_cap: 1,
+    line_join: 1,
+    miter_limit: 10,
+    alpha: 1
+  };
+  if (el.shape_type === shape_type_rectangle) {
+    drawer.draw_rectangle(el.bounds, style);
+    return;
+  }
+  if (el.shape_type === shape_type_frame) {
+    const header_height = Math.max(20, Math.min(36, el.bounds[3] * 0.18));
+    const header_style = {
+      fill: style.stroke,
+      stroke: style.stroke,
+      stroke_width: Math.max(1, style.stroke_width),
+      line_cap: style.line_cap,
+      line_join: style.line_join,
+      miter_limit: style.miter_limit,
+      alpha: 0.12
+    };
+    const outline_style = {
+      ...style,
+      fill: null,
+      alpha: 1
+    };
+    drawer.draw_rectangle(el.bounds, outline_style);
+    drawer.draw_rectangle([el.bounds[0], el.bounds[1], el.bounds[2], header_height], header_style);
+    return;
+  }
+  if (el.shape_type === shape_type_ellipse) {
+    const cx = el.bounds[0] + el.bounds[2] / 2;
+    const cy = el.bounds[1] + el.bounds[3] / 2;
+    const rx = Math.max(0.5, Math.abs(el.bounds[2]) / 2);
+    const ry = Math.max(0.5, Math.abs(el.bounds[3]) / 2);
+    const segments = 40;
+    const points = [];
+    for (let i = 0;i <= segments; i = i + 1) {
+      const t = i / segments * Math.PI * 2;
+      points.push([cx + Math.cos(t) * rx, cy + Math.sin(t) * ry]);
+    }
+    drawer.draw_polyline(points, style);
+    return;
+  }
+  if (el.shape_type === shape_type_line || el.shape_type === shape_type_arrow) {
+    const from = el.start_point ?? [el.bounds[0], el.bounds[1]];
+    const to = el.end_point ?? [el.bounds[0] + el.bounds[2], el.bounds[1] + el.bounds[3]];
+    drawer.draw_line(from, to, style);
+    if (el.shape_type === shape_type_arrow) {
+      draw_arrowhead_engine(drawer, from, to, style);
+    }
+  }
+}
+function render_image_element_engine(drawer, el, asset_src) {
+  const image = resolve_image_source_engine(el, asset_src);
+  const opacity = Math.max(0, Math.min(1, el.opacity));
+  if (image.status === "loaded" && image.source !== null) {
+    drawer.draw_image(image.source, fit_image_bounds_engine(el.bounds, image.source), opacity);
+    return;
+  }
+  const style = {
+    fill: default_element_fill,
+    stroke: default_element_stroke,
+    stroke_width: 1,
+    line_cap: 1,
+    line_join: 1,
+    miter_limit: 10,
+    alpha: opacity
+  };
+  drawer.draw_rectangle(el.bounds, style);
+  if (image.status === "error") {
+    const mark_style = {
+      fill: null,
+      stroke: default_element_stroke,
+      stroke_width: 1.5,
+      line_cap: 1,
+      line_join: 1,
+      miter_limit: 10,
+      alpha: opacity
+    };
+    const inset = Math.max(8, Math.min(el.bounds[2], el.bounds[3]) * 0.12);
+    const x0 = el.bounds[0] + inset;
+    const y0 = el.bounds[1] + inset;
+    const x1 = el.bounds[0] + el.bounds[2] - inset;
+    const y1 = el.bounds[1] + el.bounds[3] - inset;
+    drawer.draw_line([x0, y0], [x1, y1], mark_style);
+    drawer.draw_line([x1, y0], [x0, y1], mark_style);
+  }
+}
+function render_text_element_engine(drawer, el) {
+  const key = [
+    el.content,
+    el.font_family,
+    el.font_size,
+    el.color.join(","),
+    el.align,
+    Math.max(1, Math.round(el.bounds[2])),
+    Math.max(1, Math.round(el.bounds[3])),
+    Math.max(1, Math.round(drawer.pixel_ratio))
+  ].join("|");
+  let bitmap = text_bitmap_cache_engine.get(key);
+  if (bitmap === undefined) {
+    bitmap = rasterize_text_engine(el, Math.max(1, Math.round(drawer.pixel_ratio)));
+    text_bitmap_cache_engine.set(key, bitmap);
+    trim_text_bitmap_cache_engine();
+  }
+  drawer.draw_image(bitmap, el.bounds, 1);
+}
+function resolve_image_source_engine(el, asset_src) {
+  if (el.bitmap !== null) {
+    return { status: "loaded", source: el.bitmap };
+  }
+  const src = (asset_src ?? el.src).trim();
+  if (src.length === 0 || typeof Image === "undefined") {
+    return { status: "empty", source: null };
+  }
+  let cached = loaded_images_engine.get(src);
+  if (cached === undefined) {
+    const image = new Image;
+    cached = { image, status: "loading" };
+    loaded_images_engine.set(src, cached);
+    image.onload = () => {
+      const current = loaded_images_engine.get(src);
+      if (current !== undefined)
+        current.status = "loaded";
+    };
+    image.onerror = () => {
+      const current = loaded_images_engine.get(src);
+      if (current !== undefined)
+        current.status = "error";
+    };
+    image.src = src;
+    return { status: "loading", source: null };
+  }
+  if (cached.status === "loaded") {
+    return { status: "loaded", source: cached.image };
+  }
+  return { status: cached.status, source: null };
+}
+function fit_image_bounds_engine(bounds, source) {
+  const source_w = source instanceof HTMLImageElement ? source.naturalWidth : source.width;
+  const source_h = source instanceof HTMLImageElement ? source.naturalHeight : source.height;
+  const x = bounds[0];
+  const y = bounds[1];
+  const w = Math.max(1, bounds[2]);
+  const h = Math.max(1, bounds[3]);
+  if (source_w <= 0 || source_h <= 0) {
+    return [x, y, w, h];
+  }
+  const scale = Math.min(w / source_w, h / source_h);
+  const draw_w = source_w * scale;
+  const draw_h = source_h * scale;
+  const draw_x = x + (w - draw_w) * 0.5;
+  const draw_y = y + (h - draw_h) * 0.5;
+  return [draw_x, draw_y, draw_w, draw_h];
+}
+function draw_arrowhead_engine(drawer, from, to, style) {
+  const dx = to[0] - from[0];
+  const dy = to[1] - from[1];
+  const len = Math.hypot(dx, dy);
+  if (len < 0.0001)
+    return;
+  const ux = dx / len;
+  const uy = dy / len;
+  const size = Math.max(8, style.stroke_width * 5);
+  const wing_angle = Math.PI / 7;
+  const cos = Math.cos(wing_angle);
+  const sin = Math.sin(wing_angle);
+  const lx = to[0] - (ux * cos - uy * sin) * size;
+  const ly = to[1] - (uy * cos + ux * sin) * size;
+  const rx = to[0] - (ux * cos + uy * sin) * size;
+  const ry = to[1] - (uy * cos - ux * sin) * size;
+  drawer.draw_line(to, [lx, ly], style);
+  drawer.draw_line(to, [rx, ry], style);
+}
+function rasterize_text_engine(el, scale) {
+  const canvas = document.createElement("canvas");
+  const width = Math.max(1, Math.ceil(el.bounds[2] * scale));
+  const height = Math.max(1, Math.ceil(el.bounds[3] * scale));
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (ctx === null)
+    return canvas;
+  const font_size = Math.max(1, el.font_size);
+  const line_height = font_size * 1.3;
+  const padding = Math.max(4, Math.round(font_size * 0.35));
+  const max_text_width = Math.max(1, el.bounds[2] - padding * 2);
+  ctx.scale(scale, scale);
+  ctx.font = `${font_size}px ${el.font_family}`;
+  ctx.textBaseline = "top";
+  ctx.fillStyle = to_rgba_string_color(el.color);
+  const lines = wrap_text_lines_engine(ctx, el.content, max_text_width);
+  const base_x = el.bounds[0];
+  const base_y = el.bounds[1];
+  const text_top = base_y + padding;
+  const text_bottom = base_y + el.bounds[3] - padding;
+  let y = text_top;
+  for (let i = 0;i < lines.length; i = i + 1) {
+    const line = lines[i];
+    if (line === undefined)
+      continue;
+    if (y + line_height > text_bottom + 0.5)
+      break;
+    const line_width = ctx.measureText(line).width;
+    let x = base_x + padding;
+    if (el.align === text_align_center) {
+      x = base_x + el.bounds[2] * 0.5 - line_width * 0.5;
+    } else if (el.align === text_align_right) {
+      x = base_x + el.bounds[2] - padding - line_width;
+    }
+    ctx.fillText(line, x - base_x, y - base_y);
+    y = y + line_height;
+  }
+  return canvas;
+}
+function wrap_text_lines_engine(ctx, content, max_width) {
+  const normalized = content.length > 0 ? content : "";
+  const paragraphs = normalized.split(/\r?\n/);
+  const lines = [];
+  for (let i = 0;i < paragraphs.length; i = i + 1) {
+    const paragraph = paragraphs[i];
+    if (paragraph === undefined)
+      continue;
+    if (paragraph.length === 0) {
+      lines.push("");
+      continue;
+    }
+    const words = paragraph.split(/(\s+)/).filter((word) => word.length > 0);
+    let current = "";
+    for (let j = 0;j < words.length; j = j + 1) {
+      const word = words[j];
+      if (word === undefined)
+        continue;
+      const candidate = current.length === 0 ? word : `${current}${word}`;
+      if (ctx.measureText(candidate).width <= max_width || current.length === 0) {
+        current = candidate;
+      } else {
+        lines.push(current.trimEnd());
+        current = word.trimStart();
+      }
+    }
+    lines.push(current.length > 0 ? current : "");
+  }
+  return lines;
+}
+function trim_text_bitmap_cache_engine() {
+  if (text_bitmap_cache_engine.size <= text_bitmap_cache_limit_engine) {
+    return;
+  }
+  const remove_count = Math.ceil(text_bitmap_cache_engine.size / 3);
+  let removed = 0;
+  for (const key of text_bitmap_cache_engine.keys()) {
+    text_bitmap_cache_engine.delete(key);
+    removed = removed + 1;
+    if (removed >= remove_count)
+      return;
+  }
+}
+
+// engine/render.ts
+function render_engine(state) {
+  render_engine_with_overlay(state, null);
+}
+function render_engine_with_overlay(state, overlay) {
+  const view_bounds = visible_bounds_world_engine(state);
+  const visible_elements = elements_in_bounds_document(state.document, view_bounds);
+  const layer_info = build_layer_render_info_map_engine(state.document);
+  const renderable_elements = [];
+  for (let i = 0;i < visible_elements.length; i = i + 1) {
+    const el = visible_elements[i];
+    if (el === undefined) {
+      continue;
+    }
+    const info = layer_info.get(el.layer_id);
+    if (info === undefined || info.visible) {
+      renderable_elements.push(el);
+    }
+  }
+  renderable_elements.sort((a, b) => {
+    const a_order = layer_info.get(a.layer_id)?.order ?? Number.MAX_SAFE_INTEGER;
+    const b_order = layer_info.get(b.layer_id)?.order ?? Number.MAX_SAFE_INTEGER;
+    if (a_order !== b_order) {
+      return a_order - b_order;
+    }
+    return a.z_index - b.z_index;
+  });
+  state.renderer.begin_frame();
+  state.renderer.clear(state.background);
+  camera_to_screen_transform_engine(state.camera, state.viewport, scratch_transform);
+  state.renderer.set_transform(scratch_transform);
+  if (state.background_image !== null) {
+    state.renderer.draw_image(state.background_image, [0, 0, state.background_image.width, state.background_image.height], 1);
+  }
+  for (let i = 0;i < renderable_elements.length; i = i + 1) {
+    const el = renderable_elements[i];
+    if (el !== undefined) {
+      const asset_src = el.type === element_type_image && el.asset_id !== null ? state.document.assets.get(el.asset_id)?.src ?? null : null;
+      render_element_engine(state.renderer, el, asset_src);
+    }
+  }
+  if (overlay !== null) {
+    overlay(state.renderer);
+  }
+  state.renderer.end_frame();
+}
+function build_layer_render_info_map_engine(doc) {
+  const map = new Map;
+  for (let i = 0;i < doc.layers.length; i = i + 1) {
+    const layer = doc.layers[i];
+    if (layer !== undefined) {
+      map.set(layer.id, { order: i, visible: layer.visible });
+    }
+  }
+  return map;
+}