@almadar/ui 5.110.0 → 5.112.0

package/dist/lib/drawable/three/index.js

@@ -1,7 +1,7 @@
-import React6, { forwardRef, useRef, useState, useEffect, useMemo, useImperativeHandle, useCallback, createContext, useContext, Component, useReducer } from 'react';
+import React3, { forwardRef, useRef, useState, useEffect, useMemo, useImperativeHandle, useCallback, createContext, useContext, Component, useReducer } from 'react';
 import { EventBusContext, useTraitScope } from '@almadar/ui/providers';
 import { createLogger } from '@almadar/logger';
-import { Canvas, useThree, useFrame, useLoader } from '@react-three/fiber';
+import { Canvas, useThree, useFrame } from '@react-three/fiber';
 import * as THREE9 from 'three';
 import { Vector3, QuadraticBezierCurve3, MathUtils, Quaternion } from 'three';
 import { Grid, OrbitControls, Billboard, Text, Stars, Sparkles, Html, RoundedBox } from '@react-three/drei';
@@ -505,6 +505,54 @@ function FollowCamera3D({
   });
   return null;
 }
+
+// lib/atlasSlice.ts
+var atlasCache = /* @__PURE__ */ new Map();
+function isTilesheet(a) {
+  return typeof a.tileWidth === "number";
+}
+function getAtlas(url, onReady) {
+  if (atlasCache.has(url)) return atlasCache.get(url) ?? void 0;
+  atlasCache.set(url, void 0);
+  fetch(url).then((r) => r.json()).then((json) => {
+    atlasCache.set(url, json);
+    onReady();
+  }).catch(() => {
+    atlasCache.set(url, null);
+  });
+  return void 0;
+}
+function subRectFor(atlas, sprite) {
+  if (isTilesheet(atlas)) {
+    let col;
+    let row;
+    if (sprite.includes(",")) {
+      const [c, r] = sprite.split(",").map((n) => Number(n.trim()));
+      col = c;
+      row = r;
+    } else {
+      const i = Number(sprite);
+      if (!Number.isFinite(i)) return null;
+      col = i % atlas.columns;
+      row = Math.floor(i / atlas.columns);
+    }
+    if (!Number.isFinite(col) || !Number.isFinite(row) || col < 0 || row < 0 || col >= atlas.columns || row >= atlas.rows) return null;
+    const margin = atlas.margin ?? 0;
+    const spacing = atlas.spacing ?? 0;
+    return {
+      sx: margin + col * (atlas.tileWidth + spacing),
+      sy: margin + row * (atlas.tileHeight + spacing),
+      sw: atlas.tileWidth,
+      sh: atlas.tileHeight
+    };
+  }
+  const st = atlas.subTextures[sprite];
+  if (!st) return null;
+  return { sx: st.x, sy: st.y, sw: st.width, sh: st.height };
+}
+function isAtlasAsset(asset) {
+  return !!asset && typeof asset.atlas === "string" && typeof asset.sprite === "string";
+}
 var log3 = createLogger("almadar:ui:game:model-loader");
 var gltfCache = /* @__PURE__ */ new Map();
 function loadGltfCached(url, assetRoot) {
@@ -706,22 +754,113 @@ function ModelLoader({
     }
   );
 }
+var CrossOriginTextureLoader = class extends THREE9.TextureLoader {
+  constructor() {
+    super();
+    this.crossOrigin = "anonymous";
+  }
+};
+function useBillboardTexture(url) {
+  const [state, setState] = React3.useState({
+    texture: null,
+    error: false
+  });
+  React3.useEffect(() => {
+    let active = true;
+    const loader = new CrossOriginTextureLoader();
+    loader.load(
+      url,
+      (texture) => {
+        if (!active) return;
+        texture.colorSpace = THREE9.SRGBColorSpace;
+        setState({ texture, error: false });
+      },
+      void 0,
+      () => {
+        if (!active) return;
+        setState({ texture: null, error: true });
+      }
+    );
+    return () => {
+      active = false;
+    };
+  }, [url]);
+  return state;
+}
+function useAtlasFrame(asset) {
+  const [tick, setTick] = React3.useState(0);
+  React3.useEffect(() => {
+    if (!isAtlasAsset(asset)) return;
+    getAtlas(asset.atlas, () => setTick((t) => t + 1));
+  }, [asset, tick]);
+  return React3.useMemo(() => {
+    if (!isAtlasAsset(asset)) return { frame: null, ready: true };
+    const atlas = getAtlas(asset.atlas, () => setTick((t) => t + 1));
+    if (!atlas) {
+      return { frame: null, ready: false };
+    }
+    const r = subRectFor(atlas, asset.sprite);
+    if (!r) return { frame: null, ready: true };
+    return { frame: { x: r.sx, y: r.sy, w: r.sw, h: r.sh }, ready: true };
+  }, [asset, tick]);
+}
 function SpriteBillboard({ node, world }) {
-  const texture = useLoader(THREE9.TextureLoader, node.asset.url);
-  const img = texture.image;
-  const imgW = img?.width || 1;
-  const imgH = img?.height || 1;
-  if (node.frame) {
-    texture.repeat.set(node.frame.w / imgW, node.frame.h / imgH);
-    texture.offset.set(node.frame.x / imgW, 1 - (node.frame.y + node.frame.h) / imgH);
-    texture.magFilter = texture.minFilter = THREE9.NearestFilter;
-    texture.needsUpdate = true;
+  const { texture, error: textureError } = useBillboardTexture(node.asset.url);
+  const { frame: atlasFrame, ready: atlasReady } = useAtlasFrame(node.asset);
+  const frame = node.frame ?? atlasFrame;
+  const anchor = node.anchor ?? "top-left";
+  const size = React3.useMemo(() => {
+    const img = texture?.image;
+    const imgW = img?.width || 1;
+    const imgH = img?.height || 1;
+    const aspect = frame ? frame.w / frame.h : imgW / imgH;
+    if (anchor === "top-left") {
+      const width2 = node.width ?? 1;
+      const height2 = node.height ?? 1;
+      return { width: width2, height: height2, imgW, imgH };
+    }
+    const height = node.height ?? 1;
+    const width = node.width ?? height * aspect;
+    return { width, height, imgW, imgH };
+  }, [texture, frame, node.height, node.width, anchor]);
+  const groundGeometry = React3.useMemo(() => {
+    if (anchor !== "top-left" || !texture || !atlasReady) return null;
+    const g = new THREE9.PlaneGeometry(size.width, size.height);
+    g.rotateX(-Math.PI / 2);
+    return g;
+  }, [anchor, texture, atlasReady, size.width, size.height]);
+  if (!texture || !atlasReady) {
+    if (anchor === "top-left") {
+      return /* @__PURE__ */ jsx("group", { position: [world[0] + size.width / 2, 0.02, world[2] + size.height / 2], children: /* @__PURE__ */ jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], children: [
+        /* @__PURE__ */ jsx("planeGeometry", { args: [size.width, size.height] }),
+        /* @__PURE__ */ jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE9.DoubleSide })
+      ] }) });
+    }
+    return /* @__PURE__ */ jsx("group", { position: [world[0], world[1] + size.height / 2, world[2]], children: /* @__PURE__ */ jsxs("mesh", { children: [
+      /* @__PURE__ */ jsx("planeGeometry", { args: [size.width, size.height] }),
+      /* @__PURE__ */ jsx("meshBasicMaterial", { color: textureError ? 16729156 : 8947848, transparent: true, opacity: 0.6, side: THREE9.DoubleSide })
+    ] }) });
+  }
+  texture.magFilter = texture.minFilter = THREE9.NearestFilter;
+  texture.needsUpdate = true;
+  if (frame) {
+    texture.repeat.set(frame.w / size.imgW, frame.h / size.imgH);
+    texture.offset.set(frame.x / size.imgW, 1 - (frame.y + frame.h) / size.imgH);
+  }
+  if (anchor === "top-left") {
+    return /* @__PURE__ */ jsx("group", { position: [world[0] + size.width / 2, 0.01, world[2] + size.height / 2], children: /* @__PURE__ */ jsx("mesh", { geometry: groundGeometry ?? void 0, children: /* @__PURE__ */ jsx(
+      "meshBasicMaterial",
+      {
+        map: texture,
+        transparent: true,
+        alphaTest: 0.1,
+        side: THREE9.DoubleSide,
+        opacity: node.opacity ?? 1
+      }
+    ) }) });
   }
-  const aspect = node.frame ? node.frame.w / node.frame.h : imgW / imgH;
-  const height = node.height ?? 1;
-  const width = node.width ?? height * aspect;
-  return /* @__PURE__ */ jsx(Billboard, { position: [world[0], world[1] + height / 2, world[2]], children: /* @__PURE__ */ jsxs("mesh", { children: [
-    /* @__PURE__ */ jsx("planeGeometry", { args: [width, height] }),
+  return /* @__PURE__ */ jsx(Billboard, { position: [world[0], world[1] + size.height / 2, world[2]], children: /* @__PURE__ */ jsxs("mesh", { children: [
+    /* @__PURE__ */ jsx("planeGeometry", { args: [size.width, size.height] }),
     /* @__PURE__ */ jsx(
       "meshBasicMaterial",
       {
@@ -2508,7 +2647,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React6.forwardRef(
+var Box = React3.forwardRef(
   ({
     padding,
     paddingX,
@@ -2573,7 +2712,7 @@ var Box = React6.forwardRef(
       onPointerDown?.(e);
     }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
     const isClickable = action || onClick;
-    return React6.createElement(
+    return React3.createElement(
       Component2,
       {
         ref,
@@ -2694,7 +2833,7 @@ var Typography = ({
 }) => {
   const variant = variantProp ?? (level ? `h${level}` : "body1");
   const Component2 = as || defaultElements[variant];
-  return React6.createElement(
+  return React3.createElement(
     Component2,
     {
       id,
@@ -2767,7 +2906,7 @@ var Stack = ({
   };
   const isHorizontal = direction === "horizontal";
   const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
-  return React6.createElement(
+  return React3.createElement(
     Component2,
     {
       className: cn(
@@ -5062,7 +5201,7 @@ var Avl3DViewer = ({
   const handleTraitClick = useCallback((name) => {
     dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: { x: 0, y: 0 } });
   }, []);
-  const [highlightedTrait, setHighlightedTrait] = React6.useState(null);
+  const [highlightedTrait, setHighlightedTrait] = React3.useState(null);
   const handleTransitionClick = useCallback((index) => {
     dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: { x: 0, y: 0 } });
   }, []);
@@ -5149,7 +5288,7 @@ var Avl3DViewer = ({
             gap: "xs",
             align: "center",
             className: "absolute top-2 left-2 z-10 bg-surface/80 backdrop-blur rounded-md px-3 py-1.5",
-            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
+            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React3.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", className: "mx-1", children: "/" }),
               i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsx(
                 Box,

package/dist/lib/index.cjs

@@ -737,6 +737,13 @@ function bindCanvasCapture(captureFn) {
     window.__orbitalVerification.captureFrame = captureFn;
   }
 }
+function bindLastDrawables(getDrawables) {
+  if (typeof window === "undefined") return;
+  exposeOnWindow();
+  if (window.__orbitalVerification) {
+    window.__orbitalVerification.getLastDrawables = getDrawables;
+  }
+}
 function updateAssetStatus(url, status) {
   if (typeof window === "undefined") return;
   exposeOnWindow();
@@ -1818,6 +1825,7 @@ exports.apiClient = apiClient;
 exports.arrowheadPath = arrowheadPath;
 exports.bindCanvasCapture = bindCanvasCapture;
 exports.bindEventBus = bindEventBus;
+exports.bindLastDrawables = bindLastDrawables;
 exports.bindTraitStateGetter = bindTraitStateGetter;
 exports.brainIconPath = brainIconPath;
 exports.clearDebugEvents = clearDebugEvents;