@fonsecabarreto/genesis-gl-react 0.1.33 → 0.1.34

package/dist/chunk-5SN3UL2T.js

@@ -0,0 +1,825 @@
+import {
+  useCameraControls,
+  useGenesisGL,
+  useRenderer,
+  useWorldToScreen
+} from "./chunk-7AGC27WM.js";
+
+// src/components/GenesisGLCanvas.tsx
+import React, { useRef, useCallback, useEffect } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ResetButton({ onClick }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      title: "Reset camera",
+      style: {
+        position: "absolute",
+        top: 12,
+        left: 12,
+        width: 32,
+        height: 32,
+        borderRadius: 8,
+        border: "1px solid rgba(255,255,255,0.1)",
+        background: "rgba(8,8,14,0.6)",
+        backdropFilter: "blur(8px)",
+        color: "rgba(255,255,255,0.6)",
+        fontSize: 15,
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        lineHeight: 1,
+        padding: 0,
+        transition: "background 0.15s, color 0.15s",
+        zIndex: 10
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = "rgba(255,255,255,0.12)";
+        e.currentTarget.style.color = "#fff";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "rgba(8,8,14,0.6)";
+        e.currentTarget.style.color = "rgba(255,255,255,0.6)";
+      },
+      children: "\u2298"
+    }
+  );
+}
+function CanvasInner({
+  setRef,
+  style,
+  className,
+  onDoubleClick
+}) {
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: setRef,
+      onDoubleClick,
+      style: { display: "block", width: "100%", height: "100%", ...style },
+      className
+    }
+  );
+}
+function GenesisGLCanvasInner({
+  context,
+  setRef,
+  initialYaw,
+  initialPitch,
+  initialZoom,
+  background,
+  style,
+  className,
+  onFrame
+}) {
+  const { reset, setYaw, setPitch, setZoom } = useCameraControls(context);
+  const contextRef = useRef(context);
+  contextRef.current = context;
+  const onFrameRef = useRef(onFrame);
+  onFrameRef.current = onFrame;
+  const stableOnFrame = useCallback((time) => {
+    const { renderer, scene } = contextRef.current;
+    if (renderer && scene) {
+      renderer.render(scene);
+      onFrameRef.current?.(time);
+    }
+  }, []);
+  useEffect(() => {
+    if (context.renderer && background) {
+      context.renderer.clearColor = background;
+    }
+  }, [context.renderer, background]);
+  useRenderer({ renderer: context.renderer, onFrame: stableOnFrame });
+  const handleReset = useCallback(() => {
+    if (initialYaw !== void 0) setYaw(initialYaw);
+    else reset();
+    if (initialPitch !== void 0) setPitch(initialPitch);
+    if (initialZoom !== void 0) setZoom(initialZoom);
+  }, [reset, setYaw, setPitch, setZoom, initialYaw, initialPitch, initialZoom]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ResetButton, { onClick: handleReset }),
+    /* @__PURE__ */ jsx(
+      CanvasInner,
+      {
+        setRef,
+        style,
+        className,
+        onDoubleClick: handleReset
+      }
+    )
+  ] });
+}
+var GenesisGLCanvas = React.forwardRef(
+  ({
+    onReady,
+    onFrame,
+    width,
+    height,
+    initialYaw,
+    initialPitch,
+    initialZoom,
+    background,
+    style,
+    className
+  }, ref) => {
+    const canvasRef = useRef(null);
+    const setRef = useCallback(
+      (el) => {
+        canvasRef.current = el;
+        if (typeof ref === "function") ref(el);
+        else if (ref) ref.current = el;
+      },
+      [ref]
+    );
+    const genesisContext = useGenesisGL({
+      canvasRef,
+      width,
+      height,
+      initialYaw,
+      initialPitch,
+      initialZoom,
+      onReady
+    });
+    if (!genesisContext.renderer) {
+      return /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: setRef,
+          style: { display: "block", width: "100%", height: "100%", ...style },
+          className
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      GenesisGLCanvasInner,
+      {
+        context: genesisContext,
+        setRef,
+        initialYaw,
+        initialPitch,
+        initialZoom,
+        background,
+        style,
+        className,
+        onFrame
+      }
+    );
+  }
+);
+GenesisGLCanvas.displayName = "GenesisGLCanvas";
+
+// src/components/ViewportGizmo.tsx
+import { useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var FACES = [
+  { label: "+X", dir: [1, 0, 0], color: "#ff5370" },
+  { label: "-X", dir: [-1, 0, 0], color: "#ff5370", dim: true },
+  { label: "+Y", dir: [0, 1, 0], color: "#c3e88d" },
+  { label: "-Y", dir: [0, -1, 0], color: "#c3e88d", dim: true },
+  { label: "+Z", dir: [0, 0, 1], color: "#82aaff" },
+  { label: "-Z", dir: [0, 0, -1], color: "#82aaff", dim: true }
+];
+var SNAP_PITCH = {
+  "+Y": Math.PI / 2 - 0.01,
+  "-Y": -(Math.PI / 2 - 0.01)
+};
+function project(dir, yaw, pitch, radius) {
+  const [dx, dy, dz] = dir;
+  const cosY = Math.cos(-yaw);
+  const sinY = Math.sin(-yaw);
+  const rx = dx * cosY + dz * sinY;
+  const ry = dy;
+  const rz = -dx * sinY + dz * cosY;
+  const cosP = Math.cos(-pitch);
+  const sinP = Math.sin(-pitch);
+  const fx = rx;
+  const fy = ry * cosP - rz * sinP;
+  const fz = ry * sinP + rz * cosP;
+  return { x: fx * radius, y: -fy * radius, z: fz };
+}
+var DRAG_SENSITIVITY = 8e-3;
+function ViewportGizmo({
+  context,
+  size = 96,
+  position = "top-right",
+  style
+}) {
+  const { camera, setYaw, setPitch, rotate } = useCameraControls(context);
+  const dragging = useRef2(false);
+  const lastPos = useRef2({ x: 0, y: 0 });
+  const containerRef = useRef2(null);
+  const onMouseDown = useCallback2((e) => {
+    if (e.button !== 0) return;
+    dragging.current = true;
+    lastPos.current = { x: e.clientX, y: e.clientY };
+    e.stopPropagation();
+    e.preventDefault();
+  }, []);
+  useEffect2(() => {
+    const onMove = (e) => {
+      if (!dragging.current) return;
+      const dx = e.clientX - lastPos.current.x;
+      const dy = e.clientY - lastPos.current.y;
+      lastPos.current = { x: e.clientX, y: e.clientY };
+      rotate(-dx * DRAG_SENSITIVITY, -dy * DRAG_SENSITIVITY);
+    };
+    const onUp = () => {
+      dragging.current = false;
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+  }, [rotate]);
+  const snapTo = useCallback2((face) => {
+    const [dx, , dz] = face.dir;
+    const targetYaw = Math.atan2(dx, dz);
+    const targetPitch = SNAP_PITCH[face.label] ?? 0;
+    setYaw(targetYaw);
+    setPitch(targetPitch);
+  }, [setYaw, setPitch]);
+  const half = size / 2;
+  const dotRadius = size * 0.14;
+  const orbitRadius = half * 0.62;
+  const projected = FACES.map((face) => ({
+    ...face,
+    ...project(face.dir, camera.yaw, camera.pitch, orbitRadius)
+  })).sort((a, b) => a.z - b.z);
+  const posStyle = position === "top-right" ? { top: 12, right: 12 } : position === "top-left" ? { top: 12, left: 12 } : position === "bottom-right" ? { bottom: 12, right: 12 } : { bottom: 12, left: 12 };
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: containerRef,
+      onMouseDown,
+      style: {
+        position: "absolute",
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        background: "rgba(8,8,14,0.55)",
+        border: "1px solid rgba(255,255,255,0.07)",
+        backdropFilter: "blur(8px)",
+        cursor: dragging.current ? "grabbing" : "grab",
+        userSelect: "none",
+        ...posStyle,
+        ...style
+      },
+      children: /* @__PURE__ */ jsxs2(
+        "svg",
+        {
+          width: size,
+          height: size,
+          viewBox: `${-half} ${-half} ${size} ${size}`,
+          style: { overflow: "visible", display: "block" },
+          children: [
+            ["x", "y", "z"].map((axis) => {
+              const pos = projected.find((f) => f.label === `+${axis.toUpperCase()}`);
+              const neg = projected.find((f) => f.label === `-${axis.toUpperCase()}`);
+              if (!pos || !neg) return null;
+              return /* @__PURE__ */ jsx2(
+                "line",
+                {
+                  x1: neg.x,
+                  y1: neg.y,
+                  x2: pos.x,
+                  y2: pos.y,
+                  stroke: pos.color,
+                  strokeWidth: 1.5,
+                  strokeOpacity: 0.35
+                },
+                axis
+              );
+            }),
+            projected.map((face) => {
+              const isFront = face.z >= 0;
+              const opacity = isFront ? 1 : 0.28;
+              const r = isFront ? dotRadius : dotRadius * 0.75;
+              return /* @__PURE__ */ jsxs2(
+                "g",
+                {
+                  style: { cursor: "pointer" },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    snapTo(face);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx2(
+                      "circle",
+                      {
+                        cx: face.x,
+                        cy: face.y,
+                        r,
+                        fill: face.color,
+                        fillOpacity: opacity * (face.dim ? 0.6 : 1),
+                        stroke: face.color,
+                        strokeWidth: isFront ? 1.5 : 0.5,
+                        strokeOpacity: opacity * 0.6
+                      }
+                    ),
+                    isFront && /* @__PURE__ */ jsx2(
+                      "text",
+                      {
+                        x: face.x,
+                        y: face.y,
+                        textAnchor: "middle",
+                        dominantBaseline: "central",
+                        fontSize: r * 0.75,
+                        fontWeight: 700,
+                        fontFamily: "system-ui, monospace",
+                        fill: "#fff",
+                        fillOpacity: 0.9,
+                        style: { pointerEvents: "none" },
+                        children: face.label
+                      }
+                    )
+                  ]
+                },
+                face.label
+              );
+            })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/OrbitArrows.tsx
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DRAG_SENSITIVITY2 = 8e-3;
+var ARC_GAP = 0.18;
+function sampleArc(cx, cy, cz, radius, segments, plane, angleOffset = 0) {
+  const pts = [];
+  const total = Math.PI * 2 * (1 - ARC_GAP);
+  for (let i = 0; i <= segments; i++) {
+    const t = angleOffset + i / segments * total;
+    const cos = Math.cos(t);
+    const sin = Math.sin(t);
+    if (plane === "xz") pts.push([cx + cos * radius, cy, cz + sin * radius]);
+    else if (plane === "yz") pts.push([cx, cy + cos * radius, cz + sin * radius]);
+    else pts.push([cx + cos * radius, cy + sin * radius, cz]);
+  }
+  return pts;
+}
+function arrowHead(tip, prev, size) {
+  const dx = tip.x - prev.x;
+  const dy = tip.y - prev.y;
+  const len = Math.sqrt(dx * dx + dy * dy) || 1;
+  const ux = dx / len;
+  const uy = dy / len;
+  const px = -uy;
+  const py = ux;
+  const base = { x: tip.x - ux * size, y: tip.y - uy * size };
+  return [
+    `${tip.x},${tip.y}`,
+    `${base.x + px * size * 0.45},${base.y + py * size * 0.45}`,
+    `${base.x - px * size * 0.45},${base.y - py * size * 0.45}`
+  ].join(" ");
+}
+var ARCS = [
+  { plane: "xz", color: "#c3e88d", dragAxis: [-1, 0], angleOffset: Math.PI * 0.6 },
+  { plane: "yz", color: "#82aaff", dragAxis: [0, -1], angleOffset: Math.PI * 0.1 }
+];
+function OrbitArrows({
+  context,
+  center = [0, 0, 0],
+  radius = 1.2,
+  segments = 48,
+  style
+}) {
+  const { rotate } = useCameraControls(context);
+  const { project: project2 } = useWorldToScreen(context);
+  const dragging = useRef3(null);
+  const rotateRef = useRef3(rotate);
+  rotateRef.current = rotate;
+  useEffect3(() => {
+    const onMove = (e) => {
+      if (!dragging.current) return;
+      const dx = e.clientX - dragging.current.lastX;
+      const dy = e.clientY - dragging.current.lastY;
+      dragging.current.lastX = e.clientX;
+      dragging.current.lastY = e.clientY;
+      const arc = ARCS[dragging.current.arcIndex];
+      rotateRef.current(
+        dx * DRAG_SENSITIVITY2 * arc.dragAxis[0],
+        dy * DRAG_SENSITIVITY2 * arc.dragAxis[1]
+      );
+    };
+    const onUp = () => {
+      dragging.current = null;
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+  }, []);
+  const onArcMouseDown = useCallback3((arcIndex, e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    dragging.current = { arcIndex, lastX: e.clientX, lastY: e.clientY };
+  }, []);
+  if (!context?.viewport) return null;
+  const canvas = context.viewport.getCanvas();
+  const W = canvas.clientWidth;
+  const H = canvas.clientHeight;
+  const [cx, cy, cz] = center;
+  return /* @__PURE__ */ jsx3(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        overflow: "visible",
+        ...style
+      },
+      viewBox: `0 0 ${W} ${H}`,
+      children: ARCS.map((arc, i) => {
+        const worldPts = sampleArc(cx, cy, cz, radius, segments, arc.plane, arc.angleOffset);
+        const screenPts = worldPts.map((p) => project2(p[0], p[1], p[2]));
+        if (screenPts.some((p) => !p.visible)) return null;
+        const polyline = screenPts.map((p) => `${p.x},${p.y}`).join(" ");
+        const tip = screenPts[screenPts.length - 1];
+        const prev = screenPts[screenPts.length - 4];
+        const arrowSize = 10;
+        const arrowPoly = arrowHead(tip, prev, arrowSize);
+        return /* @__PURE__ */ jsxs3("g", { style: { pointerEvents: "auto", cursor: "grab" }, children: [
+          /* @__PURE__ */ jsx3(
+            "polyline",
+            {
+              points: polyline,
+              fill: "none",
+              stroke: "transparent",
+              strokeWidth: 14,
+              onMouseDown: (e) => onArcMouseDown(i, e),
+              style: { cursor: "grab" }
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "polyline",
+            {
+              points: polyline,
+              fill: "none",
+              stroke: arc.color,
+              strokeWidth: 2.5,
+              strokeOpacity: 0.75,
+              strokeLinecap: "round",
+              style: { pointerEvents: "none" }
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "polygon",
+            {
+              points: arrowPoly,
+              fill: arc.color,
+              fillOpacity: 0.9,
+              style: { pointerEvents: "none" }
+            }
+          )
+        ] }, i);
+      })
+    }
+  );
+}
+
+// src/components/RotationControls.tsx
+import { useState } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var STEP = 0.05;
+function IconBtn({
+  children,
+  title,
+  onClick,
+  color
+}) {
+  const [active, setActive] = useState(false);
+  const [hover, setHover] = useState(false);
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      title,
+      onClick,
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => {
+        setHover(false);
+        setActive(false);
+      },
+      onMouseDown: () => setActive(true),
+      onMouseUp: () => setActive(false),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "22px",
+        height: "22px",
+        border: `1px solid ${hover ? color + "88" : color + "33"}`,
+        borderRadius: "5px",
+        background: active ? color + "30" : hover ? color + "18" : color + "0c",
+        color: hover ? color : color + "aa",
+        cursor: "pointer",
+        fontSize: "11px",
+        fontWeight: 700,
+        lineHeight: 1,
+        padding: 0,
+        transition: "all 0.12s",
+        transform: active ? "scale(0.88)" : "scale(1)",
+        flexShrink: 0
+      },
+      children
+    }
+  );
+}
+function AxisPill({
+  label,
+  color,
+  value,
+  onDec,
+  onInc,
+  onReset
+}) {
+  const deg = (value * 180 / Math.PI).toFixed(1);
+  const normalized = (value % (Math.PI * 2) + Math.PI * 2) % (Math.PI * 2);
+  const pct = normalized / (Math.PI * 2) * 100;
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "5px",
+        background: color + "0a",
+        border: `1px solid ${color}22`,
+        borderRadius: "8px",
+        padding: "5px 7px",
+        flex: 1,
+        minWidth: 0
+      },
+      children: [
+        /* @__PURE__ */ jsxs4("div", { style: { position: "relative", width: "18px", height: "18px", flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsxs4("svg", { width: "18", height: "18", viewBox: "0 0 18 18", children: [
+            /* @__PURE__ */ jsx4("circle", { cx: "9", cy: "9", r: "7", fill: "none", stroke: color + "22", strokeWidth: "2" }),
+            /* @__PURE__ */ jsx4(
+              "circle",
+              {
+                cx: "9",
+                cy: "9",
+                r: "7",
+                fill: "none",
+                stroke: color,
+                strokeWidth: "2",
+                strokeDasharray: `${pct / 100 * 44} 44`,
+                strokeLinecap: "round",
+                transform: "rotate(-90 9 9)",
+                style: { transition: "stroke-dasharray 0.1s ease" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx4(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: "7px",
+                fontWeight: 800,
+                color,
+                letterSpacing: "-0.02em"
+              },
+              children: label
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs4(
+          "span",
+          {
+            style: {
+              fontSize: "10px",
+              color: color + "cc",
+              fontVariantNumeric: "tabular-nums",
+              width: "36px",
+              textAlign: "right",
+              flexShrink: 0
+            },
+            children: [
+              deg,
+              "\xB0"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "3px", marginLeft: "2px" }, children: [
+          /* @__PURE__ */ jsx4(IconBtn, { color, title: `\u2212${label}`, onClick: onDec, children: "\u2212" }),
+          /* @__PURE__ */ jsx4(IconBtn, { color, title: `+${label}`, onClick: onInc, children: "+" }),
+          /* @__PURE__ */ jsx4(IconBtn, { color: color + "88", title: "Reset", onClick: onReset, children: "\u21BA" })
+        ] })
+      ]
+    }
+  );
+}
+function RotationControls({ context, style }) {
+  const { camera, rotate, setYaw, setPitch, reset } = useCameraControls(context);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "6px",
+        background: "rgba(8,8,12,0.78)",
+        border: "1px solid rgba(255,255,255,0.07)",
+        borderRadius: "12px",
+        padding: "6px 8px",
+        backdropFilter: "blur(16px)",
+        boxShadow: "0 4px 24px rgba(0,0,0,0.5)",
+        fontFamily: '"Inter", system-ui, monospace',
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            title: context ? "Camera ready" : "Waiting for context\u2026",
+            style: {
+              width: "6px",
+              height: "6px",
+              borderRadius: "50%",
+              background: context ? "#c3e88d" : "#555",
+              boxShadow: context ? "0 0 6px #c3e88daa" : "none",
+              flexShrink: 0,
+              transition: "all 0.3s"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          AxisPill,
+          {
+            label: "Yaw",
+            color: "#ff5370",
+            value: camera.yaw,
+            onDec: () => rotate(-STEP, 0),
+            onInc: () => rotate(STEP, 0),
+            onReset: () => setYaw(0)
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          AxisPill,
+          {
+            label: "Pitch",
+            color: "#82aaff",
+            value: camera.pitch,
+            onDec: () => rotate(0, -STEP),
+            onInc: () => rotate(0, STEP),
+            onReset: () => setPitch(0)
+          }
+        ),
+        /* @__PURE__ */ jsx4(IconBtn, { color: "#ffffff", title: "Reset all", onClick: reset, children: "\u2298" })
+      ]
+    }
+  );
+}
+
+// src/components/FaceLabel.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function transformLocalToWorld(m, x, y, z) {
+  return {
+    x: m[0] * x + m[4] * y + m[8] * z + m[12],
+    y: m[1] * x + m[5] * y + m[9] * z + m[13],
+    z: m[2] * x + m[6] * y + m[10] * z + m[14]
+  };
+}
+function cross(ax, ay, az, bx, by, bz) {
+  return {
+    x: ay * bz - az * by,
+    y: az * bx - ax * bz,
+    z: ax * by - ay * bx
+  };
+}
+function solveHomography(w, h, p) {
+  const [p0, p1, p2, p3] = p;
+  const sx = [0, w, w, 0];
+  const sy = [0, 0, h, h];
+  const dx = [p0.x, p1.x, p2.x, p3.x];
+  const dy = [p0.y, p1.y, p2.y, p3.y];
+  const M = [];
+  for (let i = 0; i < 4; i++) {
+    M.push([sx[i], sy[i], 1, 0, 0, 0, -dx[i] * sx[i], -dx[i] * sy[i], dx[i]]);
+    M.push([0, 0, 0, sx[i], sy[i], 1, -dy[i] * sx[i], -dy[i] * sy[i], dy[i]]);
+  }
+  const n = 8;
+  for (let col = 0; col < n; col++) {
+    let maxRow = col;
+    for (let row = col + 1; row < n; row++) {
+      if (Math.abs(M[row][col]) > Math.abs(M[maxRow][col])) maxRow = row;
+    }
+    [M[col], M[maxRow]] = [M[maxRow], M[col]];
+    if (Math.abs(M[col][col]) < 1e-10) return null;
+    const pivot = M[col][col];
+    for (let k = col; k <= n; k++) M[col][k] /= pivot;
+    for (let row = 0; row < n; row++) {
+      if (row === col) continue;
+      const f = M[row][col];
+      for (let k = col; k <= n; k++) M[row][k] -= f * M[col][k];
+    }
+  }
+  return M.map((row) => row[n]);
+}
+function buildMatrix3d(w, h, p) {
+  const hv = solveHomography(w, h, p);
+  if (!hv) return "none";
+  const [h00, h01, h02, h10, h11, h12, h20, h21] = hv;
+  return `matrix3d(${h00},${h10},0,${h20},${h01},${h11},0,${h21},0,0,1,0,${h02},${h12},0,1)`;
+}
+function FaceSkin({
+  context,
+  model,
+  corners,
+  children,
+  style,
+  className,
+  surfaceWidth = 300,
+  surfaceHeight = 200
+}) {
+  const { project: project2 } = useWorldToScreen(context);
+  if (!model || !context) return null;
+  const mm = model.getModelMatrix();
+  const worldPts = corners.map(
+    ([lx, ly, lz]) => transformLocalToWorld(mm, lx, ly, lz)
+  );
+  const e1x = worldPts[1].x - worldPts[0].x;
+  const e1y = worldPts[1].y - worldPts[0].y;
+  const e1z = worldPts[1].z - worldPts[0].z;
+  const e2x = worldPts[3].x - worldPts[0].x;
+  const e2y = worldPts[3].y - worldPts[0].y;
+  const e2z = worldPts[3].z - worldPts[0].z;
+  const normal = cross(e1x, e1y, e1z, e2x, e2y, e2z);
+  const camera = context.viewport.camera;
+  const radius = Math.sqrt(
+    (camera.position[0] - camera.target[0]) ** 2 + (camera.position[1] - camera.target[1]) ** 2 + (camera.position[2] - camera.target[2]) ** 2
+  );
+  const eyeX = camera.target[0] + radius * Math.cos(camera.pitch) * Math.sin(camera.yaw);
+  const eyeY = camera.target[1] + radius * Math.sin(camera.pitch);
+  const eyeZ = camera.target[2] + radius * Math.cos(camera.pitch) * Math.cos(camera.yaw);
+  const toCamera = {
+    x: eyeX - worldPts[0].x,
+    y: eyeY - worldPts[0].y,
+    z: eyeZ - worldPts[0].z
+  };
+  const dot = normal.x * toCamera.x + normal.y * toCamera.y + normal.z * toCamera.z;
+  if (dot <= 0) return null;
+  const screenPts = worldPts.map((w) => project2(w.x, w.y, w.z));
+  if (screenPts.some((pt) => !pt.visible)) return null;
+  const [s0, s1, s2, s3] = screenPts;
+  const signedArea = (s1.x - s0.x) * (s2.y - s0.y) - (s2.x - s0.x) * (s1.y - s0.y);
+  const remapped = signedArea > 0 ? [s2, s3, s0, s1] : [s3, s2, s1, s0];
+  const matrix = buildMatrix3d(surfaceWidth, surfaceHeight, remapped);
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ jsx5(
+        "div",
+        {
+          className,
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: surfaceWidth,
+            height: surfaceHeight,
+            transformOrigin: "0 0",
+            transform: matrix,
+            overflow: "hidden",
+            pointerEvents: "auto",
+            ...style
+          },
+          children
+        }
+      )
+    }
+  );
+}
+
+export {
+  GenesisGLCanvas,
+  ViewportGizmo,
+  OrbitArrows,
+  RotationControls,
+  FaceSkin
+};
+//# sourceMappingURL=chunk-5SN3UL2T.js.map