@almadar/shell-web 1.0.0 → 1.2.0

package/dist/chunk-4T3P43NS.js

@@ -1,1133 +0,0 @@
-import { resolveThemeColor, parseComputedColor } from './chunk-UXLE3IPR.js';
-import { updateAssetStatus } from './chunk-ILZ7ORX7.js';
-import { useTheme, useThemeScope } from './chunk-4YXBKHHM.js';
-import { createContext, useContext, useState, useLayoutEffect, useEffect } from 'react';
-import { createLogger } from '@almadar/logger';
-import { DIAGRAM_TONES, kernelEvaluator, DIAGRAM_TONE_COLOR_KEYS, DIAGRAM_TEXT_SIZES } from '@almadar/core';
-
-// src/lib/drawable/contract.ts
-function isValidScenePos(pos) {
-  return Number.isFinite(pos?.x) && Number.isFinite(pos?.y);
-}
-function spriteAssetState(node) {
-  if (!isValidScenePos(node.position)) return "invalid-position";
-  return typeof node.asset?.url === "string" && node.asset.url.length > 0 ? "ready" : "asset-unset";
-}
-var SPRITE_FALLBACK_FILL = "#9b8f7f";
-var SPRITE_FALLBACK_STROKE = "#5e564b";
-function spriteRect(projector, node, natural) {
-  const tw = projector.tileWidth;
-  const fallbackW = projector.worldPixelDirect ? natural?.w ?? 0 : tw;
-  const fallbackH = projector.worldPixelDirect ? natural?.h ?? 0 : tw;
-  const w = node.width !== void 0 ? node.width * tw : fallbackW;
-  const h = node.height !== void 0 ? node.height * tw : fallbackH;
-  const anchor = node.anchor ?? "top-left";
-  const p = projector.anchorPoint(node.position, anchor);
-  return {
-    x: anchor === "top-left" ? p.x : p.x - w / 2,
-    y: anchor === "ground" ? p.y - h : anchor === "center" ? p.y - h / 2 : p.y,
-    w,
-    h
-  };
-}
-var DrawableRegistryContext = createContext(null);
-var NUMERIC_TRACKS = [
-  "offsetX",
-  "offsetY",
-  "rotate",
-  "opacity",
-  "radiusX",
-  "radiusY",
-  "width",
-  "height",
-  "strokeWidth",
-  "strokeDashOffset",
-  "blur"
-];
-function isAnimatedShape(node) {
-  return Boolean(node.animation && node.animation.durationMs > 0 && node.animation.keyframes.length > 0);
-}
-var lerp = (a, b, k) => a + (b - a) * k;
-function applyShapeAnimation(node, timeMs) {
-  const anim = node.animation;
-  if (!anim || !(anim.durationMs > 0) || anim.keyframes.length === 0) return node;
-  const frames = [...anim.keyframes].sort((a, b) => a.at - b.at);
-  const cycle = timeMs / anim.durationMs;
-  const t = anim.loop === false ? Math.min(cycle, 1) : cycle - Math.floor(cycle);
-  const out = { ...node };
-  const trackValue = (key) => {
-    const defined = frames.filter((f) => f[key] !== void 0);
-    if (defined.length === 0) return void 0;
-    let prev;
-    let next;
-    for (const f of defined) {
-      if (f.at <= t) prev = f;
-      else if (!next) next = f;
-    }
-    if (!prev) return defined[0][key];
-    if (!next) return prev[key];
-    const span = next.at - prev.at;
-    const k = span > 0 ? (t - prev.at) / span : 1;
-    const a = prev[key];
-    const b = next[key];
-    if (typeof a === "number" && typeof b === "number") return lerp(a, b, k);
-    return a;
-  };
-  for (const key of NUMERIC_TRACKS) {
-    const v = trackValue(key);
-    if (v !== void 0) out[key] = v;
-  }
-  const fill = trackValue("fill");
-  if (fill !== void 0) out.fill = fill;
-  const stroke = trackValue("stroke");
-  if (stroke !== void 0) out.stroke = stroke;
-  const shadowFrames = frames.filter((f) => f.shadow !== void 0);
-  if (shadowFrames.length > 0) {
-    const sh = trackValue("shadow");
-    if (sh !== void 0) {
-      let prevSh;
-      let nextSh;
-      for (const f of shadowFrames) {
-        if (f.at <= t) prevSh = f;
-        else if (!nextSh) nextSh = f;
-      }
-      if (prevSh?.shadow && nextSh?.shadow) {
-        const span = nextSh.at - prevSh.at;
-        const k = span > 0 ? (t - prevSh.at) / span : 1;
-        out.shadow = { color: prevSh.shadow.color, blur: lerp(prevSh.shadow.blur, nextSh.shadow.blur, k) };
-      } else {
-        out.shadow = sh;
-      }
-    }
-  }
-  return out;
-}
-function gradientStyle(g, ox, oy, scale) {
-  if (g.kind === "linear") {
-    if (!g.from || !g.to) return void 0;
-    return {
-      kind: "linear",
-      x1: ox + g.from.x * scale,
-      y1: oy + g.from.y * scale,
-      x2: ox + g.to.x * scale,
-      y2: oy + g.to.y * scale,
-      stops: g.stops
-    };
-  }
-  if (g.kind === "conic") {
-    if (!g.center) return void 0;
-    return {
-      kind: "conic",
-      cx: ox + g.center.x * scale,
-      cy: oy + g.center.y * scale,
-      angle: g.angle ?? 0,
-      stops: g.stops
-    };
-  }
-  if (!g.center || g.radius === void 0) return void 0;
-  return {
-    kind: "radial",
-    cx: ox + g.center.x * scale,
-    cy: oy + g.center.y * scale,
-    r: g.radius * scale,
-    stops: g.stops
-  };
-}
-function patternStyle(p, unit) {
-  if (p.kind === "image") {
-    if (!p.url) return void 0;
-    return { kind: "image", url: p.url, scale: (p.scale ?? 1) / unit };
-  }
-  return { kind: "noise", scale: (p.scale ?? 2) / unit, alpha: p.alpha, color: p.color };
-}
-var paintShape = (painter, rawNode, dctx) => {
-  const node = dctx.time > 0 ? applyShapeAnimation(rawNode, dctx.time) : rawNode;
-  if (!isValidScenePos(node.position)) return;
-  painter.save();
-  if (node.opacity !== void 0 && node.opacity !== 1) painter.setAlpha(node.opacity);
-  const origin = dctx.projector.project(node.position);
-  const tileWidth = dctx.projector.tileWidth;
-  const groupScale = dctx.groupScale ?? 1;
-  const strokePx = (node.strokeWidth ?? 1) / groupScale;
-  if (node.blendMode) painter.setBlend(node.blendMode);
-  if (node.strokeDash && node.strokeDash.length > 0) {
-    painter.setLineDash(
-      node.strokeDash.map((v) => v / groupScale),
-      (node.strokeDashOffset ?? 0) / groupScale
-    );
-  }
-  if (node.blur !== void 0 && node.blur > 0) painter.setBlur(node.blur / groupScale);
-  if (node.rotate) {
-    const pivot = node.pivot ?? { x: 0.5, y: 0.5 };
-    const px = origin.x + pivot.x * tileWidth;
-    const py = origin.y + pivot.y * tileWidth;
-    painter.translate(px, py);
-    painter.rotate(node.rotate);
-    painter.translate(-px, -py);
-  }
-  if (node.shadow) painter.setShadow({ color: node.shadow.color, blur: node.shadow.blur * tileWidth * groupScale });
-  const fill = node.fill === "none" ? void 0 : node.fill;
-  const stroke = node.stroke === "none" ? void 0 : node.stroke;
-  const pxFill = node.gradient ? gradientStyle(node.gradient, origin.x, origin.y, tileWidth) ?? fill : fill;
-  const pxStroke = node.strokeGradient ? gradientStyle(node.strokeGradient, origin.x, origin.y, tileWidth) ?? stroke : stroke;
-  const patFill = node.fillPattern ? patternStyle(node.fillPattern, groupScale) : void 0;
-  switch (node.shape) {
-    case "cell": {
-      const pts = dctx.projector.cellPath(node.position);
-      if (pxFill) painter.fillPoly(pts, pxFill);
-      if (patFill) painter.fillPoly(pts, patFill);
-      if (pxStroke) painter.strokePoly(pts, pxStroke, strokePx, true);
-      break;
-    }
-    case "rect": {
-      const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "top-left");
-      const tw = dctx.projector.tileWidth;
-      const x = p.x + (node.offsetX ?? 0) * tw;
-      const y = p.y + (node.offsetY ?? 0) * tw;
-      const w = (node.width ?? 0) * tw;
-      const h = (node.height ?? 0) * tw;
-      if (pxFill) painter.fillRect(x, y, w, h, pxFill);
-      if (patFill) painter.fillRect(x, y, w, h, patFill);
-      if (pxStroke) painter.strokeRect(x, y, w, h, pxStroke, strokePx);
-      break;
-    }
-    case "ellipse": {
-      const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "ground");
-      const tw = dctx.projector.tileWidth;
-      const cx = p.x + (node.offsetX ?? 0) * tw;
-      const cy = p.y + (node.offsetY ?? 0) * tw;
-      const rx = (node.radiusX ?? 0) * tw;
-      const ry = (node.radiusY ?? node.radiusX ?? 0) * tw;
-      if (pxFill) painter.fillEllipse(cx, cy, rx, ry, pxFill);
-      if (patFill) painter.fillEllipse(cx, cy, rx, ry, patFill);
-      if (pxStroke) painter.strokeEllipse(cx, cy, rx, ry, pxStroke, strokePx);
-      break;
-    }
-    case "poly": {
-      const pts = (node.points ?? []).map((pt) => ({
-        x: origin.x + ((node.offsetX ?? 0) + pt.x) * tileWidth,
-        y: origin.y + ((node.offsetY ?? 0) + pt.y) * tileWidth
-      }));
-      if (pxFill) painter.fillPoly(pts, pxFill);
-      if (patFill) painter.fillPoly(pts, patFill);
-      if (pxStroke) painter.strokePoly(pts, pxStroke, strokePx, true);
-      break;
-    }
-    case "path": {
-      if (!node.d) break;
-      painter.translate(origin.x + (node.offsetX ?? 0) * tileWidth, origin.y + (node.offsetY ?? 0) * tileWidth);
-      painter.scale(tileWidth, tileWidth);
-      if (node.strokeDash && node.strokeDash.length > 0) {
-        painter.setLineDash(
-          node.strokeDash.map((v) => v / (groupScale * tileWidth)),
-          (node.strokeDashOffset ?? 0) / (groupScale * tileWidth)
-        );
-      }
-      if (node.blur !== void 0 && node.blur > 0) painter.setBlur(node.blur / (groupScale * tileWidth));
-      const localFill = node.gradient ? gradientStyle(node.gradient, 0, 0, 1) ?? fill : fill;
-      const localStroke = node.strokeGradient ? gradientStyle(node.strokeGradient, 0, 0, 1) ?? stroke : stroke;
-      const localPat = node.fillPattern ? patternStyle(node.fillPattern, groupScale * tileWidth) : void 0;
-      if (localFill) painter.fillPath(node.d, localFill);
-      if (localPat) painter.fillPath(node.d, localPat);
-      if (localStroke) painter.strokePath(node.d, localStroke, strokePx / tileWidth);
-      break;
-    }
-  }
-  painter.restore();
-};
-function DrawShape(props) {
-  const register = useContext(DrawableRegistryContext);
-  if (register) {
-    const { opacity, ...rest } = props;
-    const node = {
-      ...rest,
-      type: "draw-shape",
-      ...opacity !== void 0 && opacity > 0 ? { opacity } : {}
-    };
-    register(node);
-  }
-  return null;
-}
-function isAnimatedGroup(node) {
-  return Boolean(node.animation && node.animation.durationMs > 0 && node.animation.keyframes.length > 0);
-}
-function DrawGroup(props) {
-  const register = useContext(DrawableRegistryContext);
-  if (register) register({ ...props, type: "draw-group" });
-  return null;
-}
-
-// src/lib/imageCache.ts
-var RETRY_AFTER_MS = 5e3;
-var cache = /* @__PURE__ */ new Map();
-function startLoad(url, onReady, existing) {
-  const img = new Image();
-  img.crossOrigin = "anonymous";
-  const entry = existing ?? { img, status: "pending" };
-  entry.img = img;
-  if (onReady) entry.onReady = onReady;
-  img.onload = () => {
-    entry.status = "loaded";
-    updateAssetStatus(url, "loaded");
-    entry.onReady?.();
-  };
-  img.onerror = () => {
-    entry.status = "failed";
-    entry.failedAt = Date.now();
-    updateAssetStatus(url, "failed");
-    entry.onReady?.();
-  };
-  img.src = url;
-  return entry;
-}
-function getOrLoadImage(url, onReady) {
-  if (!url || typeof window === "undefined") return null;
-  const existing = cache.get(url);
-  if (existing) {
-    if (existing.status === "loaded") return existing.img;
-    if (existing.status === "pending" && onReady) existing.onReady = onReady;
-    if (existing.status === "failed" && Date.now() - (existing.failedAt ?? 0) >= RETRY_AFTER_MS) {
-      existing.failedAt = Date.now();
-      startLoad(url, onReady, existing);
-    }
-    return null;
-  }
-  const entry = startLoad(url, onReady);
-  cache.set(url, entry);
-  updateAssetStatus(url, "pending");
-  return null;
-}
-function getImageStatus(url) {
-  return cache.get(url)?.status;
-}
-function computeWorldMatrices(bones, pose) {
-  return JSON.parse(kernelEvaluator().skinWorldMatrices(JSON.stringify(bones), JSON.stringify(pose)));
-}
-function skinVertices(mesh, bindWorld, curWorld) {
-  return JSON.parse(kernelEvaluator().skinVertices(JSON.stringify(mesh), JSON.stringify(bindWorld), JSON.stringify(curWorld)));
-}
-function triangleAffine(src, dst) {
-  return JSON.parse(kernelEvaluator().skinTriangleAffine(JSON.stringify(src), JSON.stringify(dst)));
-}
-var meshCache = /* @__PURE__ */ new Map();
-function isRigBundle(json) {
-  return json.mesh !== void 0 || json.bones !== void 0;
-}
-function getRigBundle(url, onReady) {
-  if (meshCache.has(url)) return meshCache.get(url) ?? void 0;
-  meshCache.set(url, void 0);
-  fetch(url).then((r) => {
-    if (!r.ok) throw new Error(`rigbundle fetch failed: HTTP ${r.status}`);
-    return r.json();
-  }).then((json) => {
-    const ok = isRigBundle(json) || Array.isArray(json.vertices);
-    if (!ok) throw new Error("rigbundle payload is neither a SkinMesh nor a rigbundle");
-    meshCache.set(url, json);
-    onReady();
-  }).catch(() => {
-    meshCache.set(url, null);
-    onReady();
-  });
-  return void 0;
-}
-function skinMeshFailed(url) {
-  return meshCache.get(url) === null;
-}
-function vertexBounds(points) {
-  return JSON.parse(kernelEvaluator().skinVertexBounds(JSON.stringify(points)));
-}
-
-// src/components/game/atoms/DrawSkinnedMesh.tsx
-var skinnedLog = createLogger("almadar:ui:draw-skinned-mesh");
-var loggedMissing = /* @__PURE__ */ new Set();
-function warnMissingOnce(reason, node) {
-  const key = `${reason}:${node.asset.url}:${String(node.meshUrl)}`;
-  if (loggedMissing.has(key)) return;
-  loggedMissing.add(key);
-  skinnedLog.warn("draw-skinned-mesh unresolvable \u2014 painting fallback", { reason, url: node.asset.url, meshUrl: node.meshUrl });
-}
-var WEIGHT_PALETTE = Array.from({ length: 10 }, (_, i) => `hsl(${i * 36 % 360}, 70%, 55%)`);
-function dominantBone(v) {
-  let best = -1;
-  let bestW = 0;
-  for (const { bone, w } of v.weights) {
-    if (w > bestW) {
-      bestW = w;
-      best = bone;
-    }
-  }
-  return best;
-}
-function resolveSkinPose(node, clip) {
-  const effectiveClip = clip ?? node.clip;
-  if (effectiveClip && node.frame !== void 0 && effectiveClip.frames.length > 0) {
-    return effectiveClip.frames[node.frame % effectiveClip.frames.length];
-  }
-  return node.pose ?? {};
-}
-function resolveRig(node, dctx) {
-  const fetched = node.meshUrl ? getRigBundle(node.meshUrl, dctx.invalidate) : void 0;
-  if (node.meshUrl && fetched === void 0) return void 0;
-  const rb = fetched && isRigBundle(fetched) ? fetched : void 0;
-  const mesh = node.mesh ?? rb?.mesh ?? (!rb ? fetched : void 0);
-  if (!mesh) return void 0;
-  const bones = node.bones.length > 0 ? node.bones : rb?.bones ?? [];
-  if (bones.length === 0) return void 0;
-  const clip = node.clip ?? (node.clipName ? rb?.clips?.[node.clipName] : void 0);
-  return { mesh, bones, clip };
-}
-var pixelUVByMesh = /* @__PURE__ */ new WeakMap();
-function meshHasPixelUVs(mesh) {
-  const cached = pixelUVByMesh.get(mesh);
-  if (cached !== void 0) return cached;
-  let pixel = false;
-  for (const v of mesh.vertices) {
-    if (v.u < 0 || v.u > 1 || v.v < 0 || v.v > 1) {
-      pixel = true;
-      break;
-    }
-  }
-  pixelUVByMesh.set(mesh, pixel);
-  return pixel;
-}
-function paintMeshPass(painter, node, bones, mesh, tex, dctx, pose, opacity) {
-  const bindWorld = computeWorldMatrices(bones, {});
-  const curWorld = computeWorldMatrices(bones, pose);
-  const skinned = skinVertices(mesh, bindWorld, curWorld);
-  const origin = dctx.projector.project(node.position);
-  const tw = dctx.projector.tileWidth;
-  painter.save();
-  if (opacity !== 1) painter.setAlpha(opacity);
-  for (const [i0, i1, i2] of mesh.triangles) {
-    const v0 = mesh.vertices[i0];
-    const v1 = mesh.vertices[i1];
-    const v2 = mesh.vertices[i2];
-    const p0 = skinned[i0];
-    const p1 = skinned[i1];
-    const p2 = skinned[i2];
-    if (!v0 || !v1 || !v2 || !p0 || !p1 || !p2) continue;
-    const dst = [
-      [origin.x + p0[0] * tw, origin.y + p0[1] * tw],
-      [origin.x + p1[0] * tw, origin.y + p1[1] * tw],
-      [origin.x + p2[0] * tw, origin.y + p2[1] * tw]
-    ];
-    if (node.weightsOverlay || !tex) {
-      if (!node.weightsOverlay) continue;
-      const bone = dominantBone(v0);
-      painter.fillPoly(
-        dst.map(([x, y]) => ({ x, y })),
-        WEIGHT_PALETTE[(bone % WEIGHT_PALETTE.length + WEIGHT_PALETTE.length) % WEIGHT_PALETTE.length]
-      );
-      continue;
-    }
-    const pixelUV = meshHasPixelUVs(mesh);
-    const uv = pixelUV ? [[v0.u, v0.v], [v1.u, v1.v], [v2.u, v2.v]] : [
-      [v0.u * tex.width, v0.v * tex.height],
-      [v1.u * tex.width, v1.v * tex.height],
-      [v2.u * tex.width, v2.v * tex.height]
-    ];
-    const affine = triangleAffine(uv, dst);
-    if (!affine) continue;
-    painter.save();
-    painter.clipPath(`M ${dst[0][0]} ${dst[0][1]} L ${dst[1][0]} ${dst[1][1]} L ${dst[2][0]} ${dst[2][1]} Z`);
-    painter.blitTransformed(tex, { x: 0, y: 0, w: tex.width, h: tex.height }, affine);
-    painter.restore();
-  }
-  painter.restore();
-}
-var paintSkinnedMesh = (painter, node, dctx) => {
-  if (!isValidScenePos(node.position)) return;
-  const rig = resolveRig(node, dctx);
-  if (!rig) {
-    if (node.meshUrl && skinMeshFailed(node.meshUrl)) warnMissingOnce("mesh-failed", node);
-    else if (!node.mesh && !node.meshUrl) warnMissingOnce("mesh-missing", node);
-    return;
-  }
-  const tex = node.weightsOverlay ? null : painter.resolveTexture(node.asset.url);
-  if (!node.weightsOverlay && !tex) {
-    if (getImageStatus(node.asset.url) === "failed") warnMissingOnce("texture-failed", node);
-    return;
-  }
-  if (node.ghost && rig.clip && rig.clip.frames.length > 0) {
-    paintMeshPass(painter, node, rig.bones, rig.mesh, tex, dctx, rig.clip.frames[node.ghost.frame % rig.clip.frames.length], node.ghost.opacity);
-  }
-  paintMeshPass(painter, node, rig.bones, rig.mesh, tex, dctx, resolveSkinPose(node, rig.clip), node.opacity ?? 1);
-};
-function DrawSkinnedMesh(props) {
-  const register = useContext(DrawableRegistryContext);
-  if (register) register({ ...props, type: "draw-skinned-mesh" });
-  return null;
-}
-var MESH_SEGMENTS_DEFAULT = 24;
-function polyhedronBounds(vertices) {
-  if (!vertices || vertices.length < 3) return null;
-  const min = [Infinity, Infinity, Infinity];
-  const max = [-Infinity, -Infinity, -Infinity];
-  for (const v of vertices) {
-    if (v.length < 3 || !v.every((c) => Number.isFinite(c))) return null;
-    for (let axis = 0; axis < 3; axis++) {
-      min[axis] = Math.min(min[axis], v[axis]);
-      max[axis] = Math.max(max[axis], v[axis]);
-    }
-  }
-  return { min, max };
-}
-function clampSegments(segments) {
-  const s = segments ?? MESH_SEGMENTS_DEFAULT;
-  return Math.min(64, Math.max(3, Math.round(s)));
-}
-function isAnimatedMesh(node) {
-  return Boolean(node.animation && node.animation.durationMs > 0 && node.animation.keyframes.length > 0);
-}
-var lerp2 = (a, b, k) => a + (b - a) * k;
-var NUMERIC_TRACKS2 = [
-  "offsetX",
-  "offsetY",
-  "offsetZ",
-  "rotateX",
-  "rotateY",
-  "rotateZ",
-  "scale",
-  "opacity",
-  "emissiveIntensity"
-];
-function applyMeshAnimation(node, timeMs) {
-  const anim = node.animation;
-  if (!anim || !(anim.durationMs > 0) || anim.keyframes.length === 0) return null;
-  const frames = [...anim.keyframes].sort((a, b) => a.at - b.at);
-  const cycle = timeMs / anim.durationMs;
-  const t = anim.loop === false ? Math.min(cycle, 1) : cycle - Math.floor(cycle);
-  const trackValue = (key) => {
-    const defined = frames.filter((f) => f[key] !== void 0);
-    if (defined.length === 0) return void 0;
-    let prev;
-    let next;
-    for (const f of defined) {
-      if (f.at <= t) prev = f;
-      else if (!next) next = f;
-    }
-    if (!prev) return defined[0][key];
-    if (!next) return prev[key];
-    const span = next.at - prev.at;
-    const k = span > 0 ? (t - prev.at) / span : 1;
-    const a = prev[key];
-    const b = next[key];
-    if (typeof a === "number" && typeof b === "number") return lerp2(a, b, k);
-    return a;
-  };
-  const num = {};
-  for (const key of NUMERIC_TRACKS2) {
-    const v = trackValue(key);
-    if (v !== void 0) num[key] = v;
-  }
-  return {
-    offset: [num.offsetX ?? 0, num.offsetY ?? 0, num.offsetZ ?? 0],
-    rotate: [num.rotateX ?? 0, num.rotateY ?? 0, num.rotateZ ?? 0],
-    scale: num.scale ?? 1,
-    opacity: num.opacity,
-    emissiveIntensity: num.emissiveIntensity,
-    color: trackValue("color"),
-    emissive: trackValue("emissive")
-  };
-}
-function DrawMesh(props) {
-  const register = useContext(DrawableRegistryContext);
-  if (register) register({ ...props, type: "draw-mesh" });
-  return null;
-}
-var DEFAULT_TICK_MS = 500;
-var DEFAULT_TEXT_COLOR = "#ffe066";
-var DEFAULT_FONT_FAMILY = "system-ui, sans-serif";
-function expandFxLayer(node, epochNowMs, dim, tileWidth, fontFamily) {
-  const layer = {
-    ...node,
-    tickMs: node.tickMs ?? DEFAULT_TICK_MS,
-    textColor: node.textColor ?? DEFAULT_TEXT_COLOR,
-    fontFamily: fontFamily ?? DEFAULT_FONT_FAMILY
-  };
-  return JSON.parse(kernelEvaluator().expandFxLayer(JSON.stringify(layer), epochNowMs, dim, tileWidth));
-}
-function DrawFxLayer(_props) {
-  return null;
-}
-var log = createLogger("almadar:ui:canvas-theme");
-var toneVar = (tone) => `--color-${DIAGRAM_TONE_COLOR_KEYS[tone]}`;
-var SERIES_TONES = ["series-1", "series-2", "series-3", "series-4", "series-5", "series-6", "series-7", "series-8"];
-var TONE_SET = new Set(DIAGRAM_TONES);
-function isDiagramTone(value) {
-  return TONE_SET.has(value);
-}
-function colorCss(c) {
-  return c.a >= 1 ? c.css : `rgba(${c.r}, ${c.g}, ${c.b}, ${c.a})`;
-}
-function oneOf(value, allowed, fallback, name) {
-  const hit = allowed.find((a) => a === value);
-  if (hit !== void 0) return hit;
-  if (value !== "") log.warn("invalid-theme-keyword", { var: name, value, allowed });
-  return fallback;
-}
-var PLAIN_LENGTH = /^(-?[\d.]+)(px)?$/;
-var ScopeReader = class {
-  constructor(scope) {
-    this.scope = scope;
-    this.style = getComputedStyle(scope);
-    const doc = scope.ownerDocument;
-    this.probe = doc.createElement("span");
-    this.probe.style.position = "absolute";
-    this.probe.style.visibility = "hidden";
-    this.probe.style.pointerEvents = "none";
-    scope.appendChild(this.probe);
-  }
-  scope;
-  style;
-  probe;
-  dispose() {
-    this.probe.remove();
-  }
-  raw(name) {
-    return this.style.getPropertyValue(name).trim();
-  }
-  /** A length var in px: a plain value parses directly, a derived one (`calc`, `var`) through the probe. */
-  length(name, fallback) {
-    const raw = this.raw(name);
-    const plain = PLAIN_LENGTH.exec(raw);
-    if (plain) return Number(plain[1]);
-    if (raw === "") return fallback;
-    this.probe.style.width = `var(${name})`;
-    const computed = PLAIN_LENGTH.exec(getComputedStyle(this.probe).width.trim());
-    this.probe.style.width = "";
-    if (computed) return Number(computed[1]);
-    log.warn("unresolvable-theme-length", { var: name, raw });
-    return fallback;
-  }
-  number(name, fallback) {
-    const raw = this.raw(name);
-    if (raw === "") return fallback;
-    const n = Number(raw);
-    if (Number.isFinite(n)) return n;
-    log.warn("unresolvable-theme-number", { var: name, raw });
-    return fallback;
-  }
-  /** A duration var in ms (`250ms`, `0.25s`, or a `var()` alias resolved through the probe). */
-  durationMs(name, fallback) {
-    const parse = (v) => {
-      const m = /^([\d.]+)(ms|s)$/.exec(v.trim());
-      return m ? Number(m[1]) * (m[2] === "s" ? 1e3 : 1) : null;
-    };
-    const raw = this.raw(name);
-    const direct = parse(raw);
-    if (direct !== null) return direct;
-    if (raw === "") return fallback;
-    this.probe.style.transitionDuration = `var(${name})`;
-    const computed = parse(getComputedStyle(this.probe).transitionDuration.split(",")[0] ?? "");
-    this.probe.style.transitionDuration = "";
-    return computed ?? fallback;
-  }
-  color(name) {
-    const raw = this.raw(name);
-    return parseComputedColor(raw) ?? resolveThemeColor(`var(${name})`, this.scope);
-  }
-  shadow(name) {
-    const raw = this.raw(name);
-    if (raw === "" || raw === "none") return null;
-    this.probe.style.boxShadow = `var(${name})`;
-    const computed = getComputedStyle(this.probe).boxShadow.trim() || raw;
-    this.probe.style.boxShadow = "";
-    const colorMatch = /(rgba?\([^)]*\)|#[0-9a-f]{3,8}|oklch\([^)]*\))/i.exec(computed);
-    const lengths = computed.replace(colorMatch?.[0] ?? "", "").trim().split(/\s+/).map((t) => PLAIN_LENGTH.exec(t)).filter((m) => m !== null).map((m) => Number(m[1]));
-    if (lengths.length < 2) return null;
-    const color = colorMatch ? parseComputedColor(colorMatch[0]) : null;
-    return { offsetX: lengths[0], offsetY: lengths[1], blur: lengths[2] ?? 0, color: color ? colorCss(color) : "rgba(0, 0, 0, 0.25)" };
-  }
-  family(name, fallback) {
-    return this.raw(name) || fallback;
-  }
-};
-function dashList(raw, fallback) {
-  if (raw === "") return fallback;
-  const parts = raw.split(/[\s,]+/).map(Number);
-  return parts.every((n) => Number.isFinite(n) && n >= 0) ? parts : fallback;
-}
-function prefersReducedMotion(scope) {
-  const view = scope.ownerDocument.defaultView;
-  return typeof view?.matchMedia === "function" && view.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function resolveCanvasTheme(scope) {
-  const r = new ScopeReader(scope);
-  try {
-    const tones = {};
-    for (const tone of DIAGRAM_TONES) {
-      const c = r.color(toneVar(tone));
-      tones[tone] = c ? colorCss(c) : "currentColor";
-    }
-    const surface = (name) => {
-      const c = r.color(name);
-      return c ? colorCss(c) : "transparent";
-    };
-    const ground = r.color("--surface-diagram");
-    const text = {};
-    const TEXT_FALLBACK = { xs: 12, sm: 14, base: 16, lg: 18, xl: 20, "2xl": 24 };
-    for (const size of DIAGRAM_TEXT_SIZES) text[size] = r.length(`--text-${size}`, TEXT_FALLBACK[size]);
-    const body = r.family("--font-family-body", r.family("--font-family", "system-ui, sans-serif"));
-    return {
-      ground: ground ? colorCss(ground) : "transparent",
-      surfaces: {
-        muted: surface("--color-muted"),
-        card: surface("--color-card"),
-        onPrimary: surface("--color-primary-foreground")
-      },
-      tones,
-      series: SERIES_TONES.map((t) => tones[t]),
-      strokes: {
-        thin: r.length("--diagram-stroke-thin", 1),
-        normal: r.length("--diagram-stroke-normal", 1.5),
-        bold: r.length("--diagram-stroke-bold", 3)
-      },
-      lineCap: oneOf(r.raw("--diagram-line-cap"), ["butt", "round", "square"], "round", "--diagram-line-cap"),
-      lineJoin: oneOf(r.raw("--diagram-line-join"), ["miter", "round", "bevel"], "round", "--diagram-line-join"),
-      dash: dashList(r.raw("--diagram-dash"), [6, 4]),
-      dot: dashList(r.raw("--diagram-dot"), [1, 4]),
-      fillStyle: oneOf(r.raw("--diagram-fill-style"), ["solid", "tint", "outline", "hatch"], "tint", "--diagram-fill-style"),
-      fillOpacity: r.number("--diagram-fill-opacity", 0.18),
-      roughness: r.number("--diagram-roughness", 0),
-      glow: r.number("--diagram-glow", 0),
-      shadow: r.shadow("--diagram-shadow"),
-      marker: oneOf(r.raw("--diagram-marker"), ["triangle", "open", "line", "dot"], "triangle", "--diagram-marker"),
-      faces: {
-        body,
-        display: r.family("--font-family-display", body),
-        mono: r.family("--font-family-mono", "ui-monospace, monospace")
-      },
-      label: {
-        font: oneOf(r.raw("--diagram-label-font"), ["body", "display", "mono"], "body", "--diagram-label-font"),
-        size: oneOf(r.raw("--diagram-label-size"), DIAGRAM_TEXT_SIZES, "sm", "--diagram-label-size"),
-        weight: r.raw("--diagram-label-weight") || "500",
-        uppercase: oneOf(r.raw("--diagram-label-case"), ["none", "uppercase"], "none", "--diagram-label-case") === "uppercase"
-      },
-      text,
-      corner: r.length("--diagram-corner", 4),
-      motion: {
-        enabled: r.raw("--motion-enable") !== "off" && !prefersReducedMotion(scope),
-        fastMs: r.durationMs("--duration-fast", 150),
-        normalMs: r.durationMs("--duration-normal", 250),
-        slowMs: r.durationMs("--duration-slow", 400),
-        easing: r.raw("--easing-standard") || "ease"
-      },
-      scene: {
-        roughness: r.number("--material-roughness", 0.6),
-        metalness: r.number("--material-metalness", 0),
-        flat: r.number("--material-flat", 0) >= 1,
-        outline: r.number("--material-outline", 0),
-        ambient: r.number("--light-ambient", 0.55),
-        key: r.number("--light-key", 1),
-        keyColor: (() => {
-          const c = r.color("--light-key-color");
-          return c ? colorCss(c) : "#ffffff";
-        })(),
-        fog: r.number("--scene-fog", 0)
-      }
-    };
-  } finally {
-    r.dispose();
-  }
-}
-function withSeries(theme, series, scope) {
-  if (!theme || !series || series.length === 0 || !scope) return theme;
-  const colors = series.map((c, i) => markColor(theme, c, scope, SERIES_TONES[i % SERIES_TONES.length]));
-  const tones = { ...theme.tones };
-  SERIES_TONES.forEach((tone, i) => {
-    tones[tone] = colors[i % colors.length];
-  });
-  return { ...theme, tones, series: SERIES_TONES.map((t) => tones[t]) };
-}
-function markColor(theme, value, scope, fallback) {
-  if (value === void 0 || value === "") return theme.tones[fallback];
-  if (isDiagramTone(value)) return theme.tones[value];
-  if (value.startsWith("var(") || value.startsWith("color-mix(")) {
-    const resolved = resolveThemeColor(value, scope);
-    return resolved ? colorCss(resolved) : theme.tones[fallback];
-  }
-  return value;
-}
-function markStrokeWidth(theme, literal, role, fallback = "normal") {
-  return literal ?? theme.strokes[role ?? fallback];
-}
-function labelFont(theme, roles, literalPx, literalFamily) {
-  const px = literalPx ?? theme.text[roles.textSize ?? theme.label.size];
-  const family = literalFamily ?? theme.faces[roles.font ?? theme.label.font];
-  return { font: `${theme.label.weight} ${px}px ${family}`, px };
-}
-function labelText(theme, text, textCase = "theme") {
-  return theme.label.uppercase && textCase === "theme" ? text.toUpperCase() : text;
-}
-function fillLabel(ctx, theme, text, x, y) {
-  if (!text) return;
-  ctx.save();
-  ctx.strokeStyle = theme.ground;
-  ctx.lineWidth = Math.max(2, theme.text.xs * 0.3);
-  ctx.lineJoin = "round";
-  ctx.strokeText(text, x, y);
-  ctx.restore();
-  ctx.fillText(text, x, y);
-}
-function outlineStroke(stroke, fill, style, fillTone) {
-  return outlineCarriesFill(fill, style, fillTone) && fill !== void 0 ? fill : stroke;
-}
-function outlineCarriesFill(fill, style, fillTone) {
-  return style === "outline" && fill !== void 0 && fillTone !== "fill";
-}
-function applyLineCharacter(ctx, theme, strokeColor) {
-  ctx.lineCap = theme.lineCap;
-  ctx.lineJoin = theme.lineJoin;
-  if (theme.glow > 0) {
-    ctx.shadowColor = strokeColor;
-    ctx.shadowBlur = theme.glow;
-    ctx.shadowOffsetX = 0;
-    ctx.shadowOffsetY = 0;
-  }
-}
-function markDash(theme, dash) {
-  if (dash === "dashed") return theme.dash;
-  if (dash === "dotted") return theme.dot;
-  return [];
-}
-function wobble(x, y, k) {
-  const s = Math.sin(x * 12.9898 + y * 78.233 + k * 37.719) * 43758.5453;
-  return (s - Math.floor(s)) * 2 - 1;
-}
-function tracePolyline(ctx, theme, points, closed) {
-  ctx.beginPath();
-  if (points.length === 0) return;
-  const amp = theme.roughness;
-  const pts = closed ? [...points, points[0]] : [...points];
-  ctx.moveTo(pts[0].x + amp * wobble(pts[0].x, pts[0].y, 0), pts[0].y + amp * wobble(pts[0].y, pts[0].x, 1));
-  for (let i = 1; i < pts.length; i++) {
-    const a = pts[i - 1];
-    const b = pts[i];
-    if (amp === 0) {
-      ctx.lineTo(b.x, b.y);
-      continue;
-    }
-    const steps = Math.max(1, Math.round(Math.hypot(b.x - a.x, b.y - a.y) / 24));
-    for (let s = 1; s <= steps; s++) {
-      const t = s / steps;
-      const x = a.x + (b.x - a.x) * t;
-      const y = a.y + (b.y - a.y) * t;
-      ctx.lineTo(x + amp * wobble(x, y, 2), y + amp * wobble(y, x, 3));
-    }
-  }
-  if (closed) ctx.closePath();
-}
-function arcPoints(cx, cy, rx, ry, startRad = 0, endRad = Math.PI * 2) {
-  const steps = Math.max(12, Math.round(Math.abs(endRad - startRad) * Math.max(rx, ry) / 8));
-  const out = [];
-  for (let i = 0; i <= steps; i++) {
-    const t = startRad + (endRad - startRad) * i / steps;
-    out.push({ x: cx + rx * Math.cos(t), y: cy + ry * Math.sin(t) });
-  }
-  return out;
-}
-function fillMark(ctx, theme, color, style = theme.fillStyle) {
-  if (style === "outline") return;
-  ctx.save();
-  ctx.shadowBlur = 0;
-  ctx.shadowColor = "transparent";
-  if (theme.shadow) {
-    ctx.shadowColor = theme.shadow.color;
-    ctx.shadowOffsetX = theme.shadow.offsetX;
-    ctx.shadowOffsetY = theme.shadow.offsetY;
-    ctx.shadowBlur = theme.shadow.blur;
-  }
-  if (style === "hatch") {
-    ctx.clip();
-    const span = ctx.canvas.width + ctx.canvas.height;
-    ctx.strokeStyle = color;
-    ctx.lineWidth = theme.strokes.thin;
-    ctx.setLineDash([]);
-    ctx.beginPath();
-    for (let d = -span; d < span; d += 6) {
-      ctx.moveTo(d, 0);
-      ctx.lineTo(d + span, span);
-    }
-    ctx.stroke();
-  } else {
-    ctx.globalAlpha *= style === "tint" ? theme.fillOpacity : 1;
-    ctx.fillStyle = color;
-    ctx.fill();
-  }
-  ctx.restore();
-}
-function drawMarker(ctx, theme, x1, y1, x2, y2, color, width) {
-  const size = Math.max(8, width * 4);
-  const angle = Math.atan2(y2 - y1, x2 - x1);
-  const left = { x: x2 - size * Math.cos(angle - Math.PI / 6), y: y2 - size * Math.sin(angle - Math.PI / 6) };
-  const right = { x: x2 - size * Math.cos(angle + Math.PI / 6), y: y2 - size * Math.sin(angle + Math.PI / 6) };
-  ctx.save();
-  ctx.strokeStyle = color;
-  ctx.fillStyle = color;
-  ctx.lineWidth = width;
-  ctx.setLineDash([]);
-  switch (theme.marker) {
-    case "triangle": {
-      ctx.beginPath();
-      ctx.moveTo(x2, y2);
-      ctx.lineTo(left.x, left.y);
-      ctx.lineTo(right.x, right.y);
-      ctx.closePath();
-      ctx.fill();
-      break;
-    }
-    case "open":
-    case "line": {
-      ctx.beginPath();
-      ctx.moveTo(left.x, left.y);
-      ctx.lineTo(x2, y2);
-      ctx.lineTo(right.x, right.y);
-      if (theme.marker === "open") ctx.stroke();
-      else {
-        ctx.moveTo(x2 - size * 0.5 * Math.cos(angle + Math.PI / 2), y2 - size * 0.5 * Math.sin(angle + Math.PI / 2));
-        ctx.lineTo(x2 + size * 0.5 * Math.cos(angle + Math.PI / 2), y2 + size * 0.5 * Math.sin(angle + Math.PI / 2));
-        ctx.stroke();
-      }
-      break;
-    }
-    case "dot": {
-      ctx.beginPath();
-      ctx.arc(x2, y2, Math.max(2.5, width * 1.5), 0, Math.PI * 2);
-      ctx.fill();
-      break;
-    }
-  }
-  ctx.restore();
-}
-function useCanvasTheme(scopeRef, scopePresent = true) {
-  const { appliedTheme } = useTheme();
-  const scopeKey = JSON.stringify(useThemeScope());
-  const [state, setState] = useState({ theme: null, version: 0 });
-  useLayoutEffect(() => {
-    const scope = scopeRef.current;
-    if (!scope) return;
-    const theme = resolveCanvasTheme(scope);
-    setState((prev) => ({ theme, version: prev.version + 1 }));
-  }, [appliedTheme, scopeKey, scopeRef, scopePresent]);
-  return state;
-}
-
-// src/lib/drawable/themeDrawables.ts
-function opt(value, resolve) {
-  return value === void 0 ? void 0 : resolve(value);
-}
-function themeShape(node, resolve) {
-  return {
-    ...node,
-    ...node.fill !== void 0 ? { fill: resolve(node.fill) } : {},
-    ...node.stroke !== void 0 ? { stroke: resolve(node.stroke) } : {},
-    ...node.gradient ? { gradient: { ...node.gradient, stops: node.gradient.stops.map((s) => ({ ...s, color: resolve(s.color) })) } } : {},
-    ...node.fillPattern?.color !== void 0 ? { fillPattern: { ...node.fillPattern, color: resolve(node.fillPattern.color) } } : {},
-    ...node.shadow ? { shadow: { ...node.shadow, color: resolve(node.shadow.color) } } : {},
-    ...node.animation ? {
-      animation: {
-        ...node.animation,
-        keyframes: node.animation.keyframes.map((k) => ({
-          ...k,
-          ...k.fill !== void 0 ? { fill: resolve(k.fill) } : {},
-          ...k.stroke !== void 0 ? { stroke: resolve(k.stroke) } : {}
-        }))
-      }
-    } : {}
-  };
-}
-function themeText(node, resolve) {
-  return { ...node, color: resolve(node.color) };
-}
-function themeMaterial(material, resolve) {
-  if (!material) return material;
-  return {
-    ...material,
-    ...material.color !== void 0 ? { color: resolve(material.color) } : {},
-    ...material.emissive !== void 0 ? { emissive: resolve(material.emissive) } : {}
-  };
-}
-function resolveDrawableColors(nodes, resolve) {
-  return nodes.map((node) => {
-    switch (node.type) {
-      case "draw-shape":
-        return themeShape(node, resolve);
-      case "draw-text":
-        return themeText(node, resolve);
-      case "draw-group":
-        return { ...node, items: resolveDrawableColors(node.items, resolve) };
-      case "draw-shape-layer":
-        return { ...node, items: node.items.map((item) => themeShape(item, resolve)) };
-      case "draw-text-layer":
-        return { ...node, items: node.items.map((item) => themeText(item, resolve)) };
-      case "draw-fx-layer":
-        return {
-          ...node,
-          ...node.textColor !== void 0 ? { textColor: resolve(node.textColor) } : {},
-          ...node.presets ? {
-            presets: node.presets.map((p) => ({
-              ...p,
-              ...p.color !== void 0 ? { color: resolve(p.color) } : {},
-              ...p.color2 !== void 0 ? { color2: resolve(p.color2) } : {}
-            }))
-          } : {}
-        };
-      case "draw-mesh":
-        return {
-          ...node,
-          material: themeMaterial(node.material, resolve),
-          ...node.outline ? { outline: { ...node.outline, ...node.outline.color !== void 0 ? { color: resolve(node.outline.color) } : {} } } : {},
-          ...node.animation ? {
-            animation: {
-              ...node.animation,
-              keyframes: node.animation.keyframes.map((k) => ({
-                ...k,
-                ...k.color !== void 0 ? { color: resolve(k.color) } : {},
-                ...k.emissive !== void 0 ? { emissive: opt(k.emissive, resolve) } : {}
-              }))
-            }
-          } : {}
-        };
-      default:
-        return node;
-    }
-  });
-}
-function applySceneMaterials(nodes, theme) {
-  return nodes.map((node) => {
-    if (node.type === "draw-group") return { ...node, items: applySceneMaterials(node.items, theme) };
-    if (node.type !== "draw-mesh") return node;
-    const m = node.material ?? {};
-    const pbr = (m.kind ?? "standard") === "standard" || m.kind === "physical";
-    return {
-      ...node,
-      material: {
-        ...m,
-        ...pbr && m.roughness === void 0 ? { roughness: theme.scene.roughness } : {},
-        ...pbr && m.metalness === void 0 ? { metalness: theme.scene.metalness } : {},
-        ...m.flatShading === void 0 && theme.scene.flat ? { flatShading: true } : {}
-      },
-      ...node.outline === void 0 && theme.scene.outline > 0 ? { outline: { color: theme.tones.ink, width: theme.scene.outline * 0.02 } } : {}
-    };
-  });
-}
-
-// src/lib/drawable/hitTest.ts
-function shapeDrawnItem(n) {
-  if (n.shape !== "rect") return { pos: n.position, id: n.id };
-  return { pos: n.position, id: n.id, anchor: n.anchor, width: n.width, height: n.height, rotation: n.rotate };
-}
-function skinnedMeshDrawnItem(n) {
-  const mesh = n.mesh;
-  if (!mesh || n.bones.length === 0) return { pos: n.position, id: n.id };
-  const bindWorld = computeWorldMatrices(n.bones, {});
-  const curWorld = computeWorldMatrices(n.bones, resolveSkinPose(n));
-  const bounds = vertexBounds(skinVertices(mesh, bindWorld, curWorld));
-  if (!bounds) return { pos: n.position, id: n.id };
-  return {
-    pos: { ...n.position, x: n.position.x + bounds.minX, y: n.position.y + bounds.minY },
-    id: n.id,
-    anchor: "top-left",
-    width: bounds.maxX - bounds.minX,
-    height: bounds.maxY - bounds.minY
-  };
-}
-function collectDrawnItems(nodes) {
-  const out = [];
-  for (const n of nodes) {
-    switch (n.type) {
-      case "draw-sprite":
-        if (isValidScenePos(n.position)) out.push({ pos: n.position, id: n.id, anchor: n.anchor, width: n.width, height: n.height, rotation: n.rotation });
-        break;
-      case "draw-shape":
-        if (isValidScenePos(n.position)) out.push(shapeDrawnItem(n));
-        break;
-      case "draw-skinned-mesh":
-        if (isValidScenePos(n.position)) out.push(skinnedMeshDrawnItem(n));
-        break;
-      case "draw-text":
-      case "draw-group":
-      case "draw-mesh":
-        if (isValidScenePos(n.position)) out.push({ pos: n.position, id: n.id });
-        break;
-      case "draw-sprite-layer":
-        for (const it of n.items) {
-          if (isValidScenePos(it.position)) out.push({ pos: it.position, id: it.id, anchor: it.anchor, width: it.width, height: it.height, rotation: it.rotation });
-        }
-        break;
-      case "draw-shape-layer":
-        for (const it of n.items) {
-          if (isValidScenePos(it.position)) out.push(shapeDrawnItem(it));
-        }
-        break;
-      case "draw-text-layer":
-        for (const it of n.items) {
-          if (isValidScenePos(it.position)) out.push({ pos: it.position, id: it.id });
-        }
-        break;
-    }
-  }
-  return out;
-}
-function buildHitIndex(items) {
-  const m = /* @__PURE__ */ new Map();
-  for (const it of items) {
-    if (it.id !== void 0) m.set(`${it.pos.x},${it.pos.y}`, it.id);
-  }
-  return m;
-}
-function withPreviewPosition(nodes, id, pos) {
-  return nodes.map((n) => {
-    if (n.type === "draw-sprite-layer" || n.type === "draw-shape-layer" || n.type === "draw-text-layer") {
-      if (!n.items.some((it) => it.id === id)) return n;
-      return { ...n, items: n.items.map((it) => it.id === id ? { ...it, position: pos } : it) };
-    }
-    if (n.type === "draw-group") {
-      if (!Array.isArray(n.items)) return n;
-      return { ...n, items: withPreviewPosition(n.items, id, pos) };
-    }
-    if (n.id === id && "position" in n) {
-      return { ...n, position: pos };
-    }
-    return n;
-  });
-}
-function hitTestSprites(items, projector, point) {
-  for (let i = items.length - 1; i >= 0; i--) {
-    const it = items[i];
-    if (it.id === void 0) continue;
-    const r = spriteRect(projector, { position: it.pos, anchor: it.anchor, width: it.width, height: it.height });
-    const test = it.rotation ? rotatePoint(point, { x: r.x + r.w / 2, y: r.y + r.h / 2 }, -it.rotation) : point;
-    if (test.x >= r.x && test.x <= r.x + r.w && test.y >= r.y && test.y <= r.y + r.h) return it.id;
-  }
-  return void 0;
-}
-function rotatePoint(p, center, radians) {
-  const cos = Math.cos(radians);
-  const sin = Math.sin(radians);
-  const dx = p.x - center.x;
-  const dy = p.y - center.y;
-  return { x: center.x + dx * cos - dy * sin, y: center.y + dx * sin + dy * cos };
-}
-function useOnScreen(ref, margin = "200px") {
-  const [intersecting, setIntersecting] = useState(true);
-  const [pageVisible, setPageVisible] = useState(true);
-  useEffect(() => {
-    const el = ref.current;
-    if (!el || typeof IntersectionObserver === "undefined") return;
-    const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting), { rootMargin: margin });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [ref, margin]);
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-    const update = () => setPageVisible(document.visibilityState !== "hidden");
-    update();
-    document.addEventListener("visibilitychange", update);
-    return () => document.removeEventListener("visibilitychange", update);
-  }, []);
-  return intersecting && pageVisible;
-}
-
-export { DrawFxLayer, DrawGroup, DrawMesh, DrawShape, DrawSkinnedMesh, DrawableRegistryContext, SPRITE_FALLBACK_FILL, SPRITE_FALLBACK_STROKE, applyLineCharacter, applyMeshAnimation, applySceneMaterials, applyShapeAnimation, arcPoints, buildHitIndex, clampSegments, collectDrawnItems, drawMarker, expandFxLayer, fillLabel, fillMark, getImageStatus, getOrLoadImage, hitTestSprites, isAnimatedGroup, isAnimatedMesh, isAnimatedShape, isValidScenePos, labelFont, labelText, markColor, markDash, markStrokeWidth, outlineCarriesFill, outlineStroke, paintShape, paintSkinnedMesh, polyhedronBounds, resolveDrawableColors, spriteAssetState, spriteRect, tracePolyline, useCanvasTheme, useOnScreen, withPreviewPosition, withSeries };