@traky-app/ui 1.6.8 → 1.6.9

package/README.md

@@ -23,4 +23,4 @@ Publicación: `pnpm release:ui` (sync + tests) y luego release GitHub tag `vX.Y.
 
 Guía completa: [REGISTRY.md](../../REGISTRY.md) en la raíz del monorepo.
 
-**Versión actual del paquete:** `1.6.8` (`FileManager` + chat `realtimeStatus` / `featureEnabled` / `embedded`).
+**Versión actual del paquete:** `1.6.9` (`cobe` 2.0.1, FileManager, chat).

package/RELEASE.md

@@ -1,6 +1,12 @@
 # Release `@traky-app/ui`
 
-## 1.6.8 (pendiente de publicar)
+## 1.6.9 (pendiente de publicar)
+
+- `cobe` 2.0.1: Globe usa `globe.update()` por frame (ya no `onRender`).
+- `WorldGlobe`: globo listo para la página web (`@traky-app/ui/world-globe`).
+- Registro `globe.json` y `world-globe.json` regenerados (`pnpm registry:sync`).
+
+## 1.6.8
 
 - `FileManager`: galería CRUD de imágenes/PDF con `uploadFile` / `deleteFile` inyectados.
 - Libs: `file-items`, `file-manager-utils`.
@@ -17,11 +23,11 @@
 
 1. `pnpm registry:sync && pnpm --filter @traky-app/ui test`
 2. Confirma `version` en `package.json` (debe coincidir con el tag).
-3. **GitHub (recomendado):** tag `v1.6.8` + release publicado → workflow `publish.yml`.
+3. **GitHub (recomendado):** tag `v1.6.9` + release publicado → workflow `publish.yml`.
 4. **Manual:** `cd packages/ui && npm publish --access public` (token / 2FA).
 
 Después en **app-traky**:
 
 ```bash
-pnpm add @traky-app/ui@1.6.8 --save-exact
+pnpm add @traky-app/ui@1.6.9 --save-exact
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@traky-app/ui",
-  "version": "1.6.8",
+  "version": "1.6.9",
   "description": "Componentes Traky UI para importar desde @traky-app/ui, más el registro copy-paste.",
   "license": "MIT",
   "type": "module",
@@ -66,7 +66,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "cobe": "^0.6.5",
+    "cobe": "^2.0.1",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.5.0",
     "maplibre-gl": "^6.9.1",

package/registry/traky/json/globe.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "ui/globe.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useMemo, useRef } from \"react\"\nimport createGlobe, { type COBEOptions } from \"cobe\"\nimport { useMotionValue, useSpring } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst MOVEMENT_DAMPING = 1400\nconst MARKER_HOLD_MS = 2200\nconst MARKER_TRANSITION_MS = 1800\n\nfunction easeInOutCubic(t: number): number {\n  return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2\n}\n\nfunction lerp(a: number, b: number, t: number): number {\n  return a + (b - a) * t\n}\n\nfunction lerpAngle(a: number, b: number, t: number): number {\n  let diff = b - a\n  while (diff > Math.PI) diff -= 2 * Math.PI\n  while (diff < -Math.PI) diff += 2 * Math.PI\n  return a + diff * t\n}\n\nconst GLOBE_CONFIG: COBEOptions = {\n  width: 800,\n  height: 800,\n  onRender: () => {},\n  devicePixelRatio: 2,\n  phi: 0,\n  theta: 0.3,\n  dark: 0,\n  diffuse: 0.4,\n  mapSamples: 16000,\n  mapBrightness: 1.2,\n  baseColor: [1, 1, 1],\n  markerColor: [251 / 255, 100 / 255, 21 / 255],\n  glowColor: [1, 1, 1],\n  markers: [\n    { location: [14.5995, 120.9842], size: 0.03 },\n    { location: [19.076, 72.8777], size: 0.1 },\n    { location: [23.8103, 90.4125], size: 0.05 },\n    { location: [30.0444, 31.2357], size: 0.07 },\n    { location: [39.9042, 116.4074], size: 0.08 },\n    { location: [-23.5505, -46.6333], size: 0.1 },\n    { location: [19.4326, -99.1332], size: 0.1 },\n    { location: [40.7128, -74.006], size: 0.1 },\n    { location: [34.6937, 135.5022], size: 0.05 },\n    { location: [41.0082, 28.9784], size: 0.06 },\n  ],\n}\n\nexport function Globe({\n  className,\n  config = GLOBE_CONFIG,\n  autoRotate = true,\n  interactive = true,\n  panBetweenMarkers = false,\n  cycleMarkers = false,\n  markerHoldMs = MARKER_HOLD_MS,\n  markerTransitionMs = MARKER_TRANSITION_MS,\n}: {\n  className?: string\n  config?: COBEOptions\n  autoRotate?: boolean\n  interactive?: boolean\n  /** @deprecated Usa cycleMarkers */\n  panBetweenMarkers?: boolean\n  /** Centra cada marker uno por uno con pausa y transición suave. */\n  cycleMarkers?: boolean\n  markerHoldMs?: number\n  markerTransitionMs?: number\n}) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const phiRef = useRef(config.phi ?? 0)\n  const widthRef = useRef(0)\n  const pointerInteracting = useRef<number | null>(null)\n  const pointerInteractionMovement = useRef(0)\n\n  const shouldCycleMarkers = cycleMarkers || panBetweenMarkers\n\n  const fixedTheta = config.theta ?? 0.22\n\n  const markerViews = useMemo((): Array<{ phi: number }> | null => {\n    if (!shouldCycleMarkers || !config.markers?.length) return null\n    return config.markers.map((marker) => ({\n      phi: Math.PI - ((marker.location[1] * Math.PI) / 180 - Math.PI / 2),\n    }))\n  }, [shouldCycleMarkers, config.markers])\n\n  const markerPhiRange = useMemo((): [number, number] | null => {\n    if (!panBetweenMarkers || cycleMarkers || !config.markers?.length) return null\n    const phis = config.markers.map(\n      (marker) => Math.PI - ((marker.location[1] * Math.PI) / 180 - Math.PI / 2),\n    )\n    return [Math.min(...phis), Math.max(...phis)]\n  }, [panBetweenMarkers, cycleMarkers, config.markers])\n\n  const r = useMotionValue(0)\n  const rs = useSpring(r, {\n    mass: 1,\n    damping: 30,\n    stiffness: 100,\n  })\n\n  const updatePointerInteraction = (value: number | null) => {\n    if (!interactive) return\n    pointerInteracting.current = value\n    if (canvasRef.current) {\n      canvasRef.current.style.cursor = value !== null ? \"grabbing\" : \"grab\"\n    }\n  }\n\n  const updateMovement = (clientX: number) => {\n    if (!interactive) return\n    if (pointerInteracting.current !== null) {\n      const delta = clientX - pointerInteracting.current\n      pointerInteractionMovement.current = delta\n      r.set(r.get() + delta / MOVEMENT_DAMPING)\n    }\n  }\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n\n    const onResize = () => {\n      widthRef.current = canvas.offsetWidth\n    }\n\n    onResize()\n    window.addEventListener(\"resize\", onResize)\n\n    const resizeObserver = new ResizeObserver(onResize)\n    resizeObserver.observe(canvas)\n\n    const globe = createGlobe(canvas, {\n      ...config,\n      width: widthRef.current * 2,\n      height: widthRef.current * 2,\n      onRender: (state) => {\n        if (shouldCycleMarkers && markerViews && markerViews.length > 0) {\n          const segment = markerHoldMs + markerTransitionMs\n          const total = markerViews.length * segment\n          const elapsed = Date.now() % total\n          const index = Math.floor(elapsed / segment)\n          const local = elapsed % segment\n          const from = markerViews[index % markerViews.length]\n          const to = markerViews[(index + 1) % markerViews.length]\n\n          if (local < markerHoldMs) {\n            state.phi = from.phi\n          } else {\n            const t = easeInOutCubic((local - markerHoldMs) / markerTransitionMs)\n            state.phi = lerpAngle(from.phi, to.phi, t)\n          }\n          state.theta = fixedTheta\n        } else if (panBetweenMarkers && markerPhiRange) {\n          const [phiMin, phiMax] = markerPhiRange\n          const t = Date.now() / 5200\n          state.phi = phiMin + ((Math.sin(t) + 1) / 2) * (phiMax - phiMin)\n        } else if (autoRotate && !pointerInteracting.current) {\n          phiRef.current += 0.005\n          state.phi = interactive ? phiRef.current + rs.get() : (config.phi ?? 0)\n        } else {\n          state.phi = interactive ? phiRef.current + rs.get() : (config.phi ?? 0)\n        }\n\n        state.theta = shouldCycleMarkers ? fixedTheta : (config.theta ?? state.theta)\n        state.scale = config.scale ?? 1\n        state.width = widthRef.current * 2\n        state.height = widthRef.current * 2\n      },\n    })\n\n    setTimeout(() => {\n      canvas.style.opacity = \"1\"\n    }, 0)\n\n    return () => {\n      globe.destroy()\n      window.removeEventListener(\"resize\", onResize)\n      resizeObserver.disconnect()\n    }\n  }, [\n    rs,\n    config,\n    autoRotate,\n    interactive,\n    panBetweenMarkers,\n    cycleMarkers,\n    shouldCycleMarkers,\n    markerViews,\n    markerPhiRange,\n    markerHoldMs,\n    markerTransitionMs,\n  ])\n\n  return (\n    <div\n      className={cn(\n        \"absolute inset-0 mx-auto aspect-square w-full max-w-150\",\n        className\n      )}\n    >\n      <canvas\n        className={cn(\n          \"size-full opacity-0 transition-opacity duration-500 contain-[layout_paint_size]\",\n          interactive ? \"cursor-grab\" : \"cursor-default\",\n        )}\n        ref={canvasRef}\n        onPointerDown={\n          interactive\n            ? (e) => {\n                pointerInteracting.current = e.clientX\n                updatePointerInteraction(e.clientX)\n              }\n            : undefined\n        }\n        onPointerUp={interactive ? () => updatePointerInteraction(null) : undefined}\n        onPointerOut={interactive ? () => updatePointerInteraction(null) : undefined}\n        onMouseMove={interactive ? (e) => updateMovement(e.clientX) : undefined}\n        onTouchMove={\n          interactive\n            ? (e) => e.touches[0] && updateMovement(e.touches[0].clientX)\n            : undefined\n        }\n      />\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useMemo, useRef } from \"react\"\nimport createGlobe, { type COBEOptions } from \"cobe\"\nimport { useMotionValue, useSpring } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst MOVEMENT_DAMPING = 1400\nconst MARKER_HOLD_MS = 2200\nconst MARKER_TRANSITION_MS = 1800\n\nfunction easeInOutCubic(t: number): number {\n  return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2\n}\n\nfunction lerp(a: number, b: number, t: number): number {\n  return a + (b - a) * t\n}\n\nfunction lerpAngle(a: number, b: number, t: number): number {\n  let diff = b - a\n  while (diff > Math.PI) diff -= 2 * Math.PI\n  while (diff < -Math.PI) diff += 2 * Math.PI\n  return a + diff * t\n}\n\nconst GLOBE_CONFIG: COBEOptions = {\n  width: 800,\n  height: 800,\n  devicePixelRatio: 2,\n  phi: 0,\n  theta: 0.3,\n  dark: 0,\n  diffuse: 0.4,\n  mapSamples: 16000,\n  mapBrightness: 1.2,\n  baseColor: [1, 1, 1],\n  markerColor: [251 / 255, 100 / 255, 21 / 255],\n  glowColor: [1, 1, 1],\n  markers: [\n    { location: [14.5995, 120.9842], size: 0.03 },\n    { location: [19.076, 72.8777], size: 0.1 },\n    { location: [23.8103, 90.4125], size: 0.05 },\n    { location: [30.0444, 31.2357], size: 0.07 },\n    { location: [39.9042, 116.4074], size: 0.08 },\n    { location: [-23.5505, -46.6333], size: 0.1 },\n    { location: [19.4326, -99.1332], size: 0.1 },\n    { location: [40.7128, -74.006], size: 0.1 },\n    { location: [34.6937, 135.5022], size: 0.05 },\n    { location: [41.0082, 28.9784], size: 0.06 },\n  ],\n}\n\nexport function Globe({\n  className,\n  config = GLOBE_CONFIG,\n  autoRotate = true,\n  interactive = true,\n  panBetweenMarkers = false,\n  cycleMarkers = false,\n  centerMarkerLatitude = false,\n  playing = true,\n  markerHoldMs = MARKER_HOLD_MS,\n  markerTransitionMs = MARKER_TRANSITION_MS,\n}: {\n  className?: string\n  config?: COBEOptions\n  autoRotate?: boolean\n  interactive?: boolean\n  /** @deprecated Usa cycleMarkers */\n  panBetweenMarkers?: boolean\n  /** Centra cada marker uno por uno con pausa y transición suave. */\n  cycleMarkers?: boolean\n  /** Inclina el globo para dejar la latitud de cada marker en el centro. */\n  centerMarkerLatitude?: boolean\n  /** Si es false, el globo se queda en el fotograma actual y no avanza el tour. */\n  playing?: boolean\n  markerHoldMs?: number\n  markerTransitionMs?: number\n}) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const playingRef = useRef(playing)\n  playingRef.current = playing\n  const phiRef = useRef(config.phi ?? 0)\n  const widthRef = useRef(0)\n  const pointerInteracting = useRef<number | null>(null)\n  const pointerInteractionMovement = useRef(0)\n\n  const shouldCycleMarkers = cycleMarkers || panBetweenMarkers\n\n  const fixedTheta = config.theta ?? 0.22\n\n  const markerViews = useMemo((): Array<{ phi: number; theta: number }> | null => {\n    if (!shouldCycleMarkers || !config.markers?.length) return null\n    return config.markers.map((marker) => ({\n      phi: Math.PI - ((marker.location[1] * Math.PI) / 180 - Math.PI / 2),\n      theta: centerMarkerLatitude\n        ? (marker.location[0] * Math.PI) / 180\n        : fixedTheta,\n    }))\n  }, [shouldCycleMarkers, centerMarkerLatitude, fixedTheta, config.markers])\n\n  const markerPhiRange = useMemo((): [number, number] | null => {\n    if (!panBetweenMarkers || cycleMarkers || !config.markers?.length) return null\n    const phis = config.markers.map(\n      (marker) => Math.PI - ((marker.location[1] * Math.PI) / 180 - Math.PI / 2),\n    )\n    return [Math.min(...phis), Math.max(...phis)]\n  }, [panBetweenMarkers, cycleMarkers, config.markers])\n\n  const r = useMotionValue(0)\n  const rs = useSpring(r, {\n    mass: 1,\n    damping: 30,\n    stiffness: 100,\n  })\n\n  const updatePointerInteraction = (value: number | null) => {\n    if (!interactive) return\n    pointerInteracting.current = value\n    if (canvasRef.current) {\n      canvasRef.current.style.cursor = value !== null ? \"grabbing\" : \"grab\"\n    }\n  }\n\n  const updateMovement = (clientX: number) => {\n    if (!interactive) return\n    if (pointerInteracting.current !== null) {\n      const delta = clientX - pointerInteracting.current\n      pointerInteractionMovement.current = delta\n      r.set(r.get() + delta / MOVEMENT_DAMPING)\n    }\n  }\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n\n    const host = canvas.parentElement\n    const onResize = () => {\n      widthRef.current = canvas.offsetWidth\n    }\n\n    onResize()\n    window.addEventListener(\"resize\", onResize)\n\n    const resizeObserver = new ResizeObserver(onResize)\n    resizeObserver.observe(canvas)\n\n    const globe = createGlobe(canvas, {\n      ...config,\n      devicePixelRatio: config.devicePixelRatio ?? 2,\n      width: widthRef.current,\n      height: widthRef.current,\n    })\n\n    let frame = 0\n    let elapsedMs = 0\n    let lastNow = 0\n    const render = () => {\n      const now = Date.now()\n      if (playingRef.current) {\n        if (lastNow !== 0) elapsedMs += now - lastNow\n        lastNow = now\n      } else {\n        lastNow = 0\n      }\n\n      const cssSize = widthRef.current\n      let phi = interactive ? phiRef.current + rs.get() : (config.phi ?? 0)\n      let theta = config.theta ?? 0.3\n\n      if (shouldCycleMarkers && markerViews && markerViews.length > 0) {\n        const segment = markerHoldMs + markerTransitionMs\n        const elapsed = elapsedMs\n        const index = Math.floor(elapsed / segment) % markerViews.length\n        const local = elapsed % segment\n        const from = markerViews[index % markerViews.length]\n        const to = markerViews[(index + 1) % markerViews.length]\n        if (from && to) {\n          if (local < markerHoldMs) {\n            phi = from.phi\n            theta = from.theta\n          } else {\n            const t = easeInOutCubic((local - markerHoldMs) / markerTransitionMs)\n            phi = lerpAngle(from.phi, to.phi, t)\n            theta = lerp(from.theta, to.theta, t)\n          }\n        }\n      } else if (panBetweenMarkers && markerPhiRange) {\n        const [phiMin, phiMax] = markerPhiRange\n        const t = Date.now() / 5200\n        phi = phiMin + ((Math.sin(t) + 1) / 2) * (phiMax - phiMin)\n      } else if (autoRotate && playingRef.current && !pointerInteracting.current) {\n        phiRef.current += 0.005\n        phi = interactive ? phiRef.current + rs.get() : (config.phi ?? 0)\n      }\n\n      globe.update({\n        phi,\n        theta,\n        scale: config.scale ?? 1,\n        width: cssSize,\n        height: cssSize,\n      })\n      frame = requestAnimationFrame(render)\n    }\n    frame = requestAnimationFrame(render)\n\n    setTimeout(() => {\n      canvas.style.opacity = \"1\"\n    }, 0)\n\n    return () => {\n      cancelAnimationFrame(frame)\n      globe.destroy()\n      const wrapper = canvas.parentElement\n      if (wrapper && host && wrapper !== host) {\n        host.insertBefore(canvas, wrapper)\n        wrapper.remove()\n      }\n      window.removeEventListener(\"resize\", onResize)\n      resizeObserver.disconnect()\n    }\n  }, [\n    rs,\n    config,\n    autoRotate,\n    interactive,\n    panBetweenMarkers,\n    cycleMarkers,\n    centerMarkerLatitude,\n    shouldCycleMarkers,\n    markerViews,\n    markerPhiRange,\n    markerHoldMs,\n    markerTransitionMs,\n  ])\n\n  return (\n    <div\n      className={cn(\n        \"absolute inset-0 mx-auto aspect-square w-full max-w-150\",\n        className\n      )}\n    >\n      <canvas\n        className={cn(\n          \"size-full opacity-0 transition-opacity duration-500 contain-[layout_paint_size]\",\n          interactive ? \"cursor-grab\" : \"cursor-default\",\n        )}\n        ref={canvasRef}\n        onPointerDown={\n          interactive\n            ? (e) => {\n                pointerInteracting.current = e.clientX\n                updatePointerInteraction(e.clientX)\n              }\n            : undefined\n        }\n        onPointerUp={interactive ? () => updatePointerInteraction(null) : undefined}\n        onPointerOut={interactive ? () => updatePointerInteraction(null) : undefined}\n        onMouseMove={interactive ? (e) => updateMovement(e.clientX) : undefined}\n        onTouchMove={\n          interactive\n            ? (e) => e.touches[0] && updateMovement(e.touches[0].clientX)\n            : undefined\n        }\n      />\n    </div>\n  )\n}\n",
       "type": "registry:ui",
       "target": ""
     }

package/registry/traky/json/world-globe.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "world-globe",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "cobe"
+  ],
+  "registryDependencies": [
+    "globe"
+  ],
+  "files": [
+    {
+      "path": "ui/world-globe.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useMemo, useRef, useState, type CSSProperties } from \"react\"\nimport type { COBEOptions } from \"cobe\"\n\nimport { useTheme } from \"@/components/theme-provider\"\nimport { cn } from \"@/lib/utils\"\nimport { Globe } from \"@/components/ui/globe\"\n\n/** Tour: Norteamérica → Suramérica → Europa → África → Asia → Oceanía. */\nconst MARKERS = [\n  { id: \"cascade\", location: [49.2827, -123.1207] as [number, number], label: \"Cascade LLC\" },\n  { id: \"logistic\", location: [41.8781, -87.6298] as [number, number], label: \"Logistic LLC\" },\n  { id: \"alianza\", location: [19.4326, -99.1332] as [number, number], label: \"Alianza SA\" },\n  { id: \"bolivar\", location: [4.711, -74.0721] as [number, number], label: \"Bolívar SAS\" },\n  { id: \"minerva\", location: [-23.5505, -46.6333] as [number, number], label: \"Minerva SA\" },\n  { id: \"cordillera\", location: [-33.4489, -70.6693] as [number, number], label: \"Cordillera SA\" },\n  { id: \"iberica\", location: [40.4168, -3.7038] as [number, number], label: \"Ibérica SA\" },\n  { id: \"avrora\", location: [55.7558, 37.6173] as [number, number], label: \"Avrora LLC\" },\n  { id: \"meridian\", location: [6.5244, 3.3792] as [number, number], label: \"Meridian Ltd\" },\n  { id: \"savanna\", location: [-26.2041, 28.0473] as [number, number], label: \"Savanna SA\" },\n  { id: \"deccan\", location: [19.076, 72.8777] as [number, number], label: \"Deccan Ltd\" },\n  { id: \"straits\", location: [1.3521, 103.8198] as [number, number], label: \"Straits Ltd\" },\n  { id: \"huayun\", location: [31.2304, 121.4737] as [number, number], label: \"华运 Ltd\" },\n  { id: \"harbour\", location: [-33.8688, 151.2093] as [number, number], label: \"Harbour Ltd\" },\n]\n\nconst ARCS = [\n  {\n    id: \"alianza-logistic\",\n    from: [19.4326, -99.1332] as [number, number],\n    to: [41.8781, -87.6298] as [number, number],\n    unit: \"AWB\",\n    fromValue: 120,\n    toValue: 240,\n    duration: 28000,\n  },\n  {\n    id: \"iberica-avrora\",\n    from: [40.4168, -3.7038] as [number, number],\n    to: [55.7558, 37.6173] as [number, number],\n    unit: \"BL\",\n    fromValue: 100,\n    toValue: 220,\n    duration: 32000,\n  },\n  {\n    id: \"meridian-savanna\",\n    from: [6.5244, 3.3792] as [number, number],\n    to: [-26.2041, 28.0473] as [number, number],\n    unit: \"WR\",\n    fromValue: 160,\n    toValue: 280,\n    duration: 36000,\n  },\n  {\n    id: \"avrora-huayun\",\n    from: [55.7558, 37.6173] as [number, number],\n    to: [31.2304, 121.4737] as [number, number],\n    unit: \"MAWB\",\n    fromValue: 140,\n    toValue: 260,\n    duration: 30000,\n  },\n  {\n    id: \"harbour-huayun\",\n    from: [-33.8688, 151.2093] as [number, number],\n    to: [31.2304, 121.4737] as [number, number],\n    unit: \"AWB\",\n    fromValue: 110,\n    toValue: 230,\n    duration: 34000,\n  },\n  {\n    id: \"avrora-cascade\",\n    from: [55.7558, 37.6173] as [number, number],\n    to: [49.2827, -123.1207] as [number, number],\n    unit: \"BL\",\n    fromValue: 130,\n    toValue: 250,\n    duration: 31000,\n  },\n  {\n    id: \"bolivar-minerva\",\n    from: [4.711, -74.0721] as [number, number],\n    to: [-23.5505, -46.6333] as [number, number],\n    unit: \"WR\",\n    fromValue: 150,\n    toValue: 270,\n    duration: 33000,\n  },\n  {\n    id: \"deccan-straits\",\n    from: [19.076, 72.8777] as [number, number],\n    to: [1.3521, 103.8198] as [number, number],\n    unit: \"AWB\",\n    fromValue: 170,\n    toValue: 260,\n    duration: 29000,\n  },\n]\n\n/** Azul oscuro de marca #000b27. Misma línea en tema claro y oscuro. */\nconst ARC_COLOR: [number, number, number] = [0, 0.043, 0.153]\n\nconst WORLD_GLOBE_CONFIG: COBEOptions = {\n  width: 800,\n  height: 800,\n  devicePixelRatio: 2,\n  phi: 0,\n  theta: 0.2,\n  dark: 0,\n  diffuse: 1.5,\n  mapSamples: 16000,\n  mapBrightness: 10,\n  baseColor: [1, 1, 1],\n  markerColor: [0.647, 0.867, 0.392],\n  glowColor: [0.94, 0.93, 0.91],\n  markerElevation: 0.01,\n  opacity: 1,\n  markers: MARKERS.map((marker) => ({\n    location: marker.location,\n    size: 0.025,\n    id: marker.id,\n  })),\n  arcs: ARCS.map((arc) => ({\n    from: arc.from,\n    to: arc.to,\n    id: arc.id,\n  })),\n  arcColor: ARC_COLOR,\n  arcWidth: 0.5,\n  arcHeight: 0.25,\n}\n\nconst GLOW_LIGHT: [number, number, number] = [0.97, 0.97, 0.98]\nconst GLOW_DARK: [number, number, number] = [0.07, 0.075, 0.08]\n\nfunction anchoredStyle(anchor: string, visible: string): CSSProperties {\n  return {\n    positionAnchor: anchor,\n    bottom: \"anchor(top)\",\n    left: \"anchor(center)\",\n    translate: \"-50% 0\",\n    marginBottom: 8,\n    opacity: `var(${visible}, 0)`,\n    filter: `blur(var(${visible}, 10px))`,\n    transition: \"opacity 0.8s, filter 0.8s\",\n  }\n}\n\nfunction glowForTheme(theme: string): [number, number, number] {\n  if (theme === \"dark\") return GLOW_DARK\n  if (theme === \"light\") return GLOW_LIGHT\n  if (typeof document !== \"undefined\" && document.documentElement.classList.contains(\"dark\")) {\n    return GLOW_DARK\n  }\n  return GLOW_LIGHT\n}\n\n/** Globo listo para la página web. No edita empresas ni envíos. */\nexport function WorldGlobe({ className }: { className?: string }) {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const playingRef = useRef(false)\n  const [playing, setPlaying] = useState(false)\n  const { theme } = useTheme()\n  const glowColor = glowForTheme(theme)\n  const config = useMemo(\n    () => ({ ...WORLD_GLOBE_CONFIG, glowColor }),\n    [glowColor],\n  )\n  const [lanes, setLanes] = useState(() =>\n    ARCS.map((arc) => ({\n      id: arc.id,\n      unit: arc.unit,\n      value: arc.fromValue,\n    })),\n  )\n\n  useEffect(() => {\n    const node = rootRef.current\n    if (!node) return\n\n    let onScreen = false\n    const sync = () => {\n      const next = onScreen && document.visibilityState === \"visible\"\n      playingRef.current = next\n      setPlaying(next)\n    }\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        onScreen = entry?.isIntersecting ?? false\n        sync()\n      },\n      { threshold: 0.35 },\n    )\n    observer.observe(node)\n    document.addEventListener(\"visibilitychange\", sync)\n    return () => {\n      observer.disconnect()\n      document.removeEventListener(\"visibilitychange\", sync)\n    }\n  }, [])\n\n  useEffect(() => {\n    let frame = 0\n    let elapsedMs = 0\n    let lastNow = 0\n    const shown = ARCS.map((arc) => arc.fromValue)\n\n    const tick = (now: number) => {\n      if (playingRef.current) {\n        if (lastNow !== 0) elapsedMs += now - lastNow\n        lastNow = now\n      } else {\n        lastNow = 0\n      }\n\n      let changed = false\n      const next = ARCS.map((arc, index) => {\n        const elapsed = elapsedMs / arc.duration\n        const ping = elapsed % 2\n        const t = ping < 1 ? ping : 2 - ping\n        const eased = t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2\n        const value = Math.round(arc.fromValue + (arc.toValue - arc.fromValue) * eased)\n        if (value !== shown[index]) {\n          shown[index] = value\n          changed = true\n        }\n        return value\n      })\n      if (changed) {\n        setLanes((current) =>\n          current.map((item, index) => ({ ...item, value: next[index] ?? item.value })),\n        )\n      }\n      frame = requestAnimationFrame(tick)\n    }\n\n    frame = requestAnimationFrame(tick)\n    return () => cancelAnimationFrame(frame)\n  }, [])\n\n  return (\n    <div\n      ref={rootRef}\n      className={cn(\n        \"relative mx-auto aspect-square w-full max-w-lg bg-background\",\n        className,\n      )}\n    >\n      <Globe\n        config={config}\n        autoRotate={false}\n        interactive={false}\n        cycleMarkers\n        centerMarkerLatitude\n        playing={playing}\n        markerHoldMs={2400}\n        markerTransitionMs={1800}\n        className=\"max-w-full\"\n      />\n      {MARKERS.map((marker) => (\n        <div\n          key={marker.id}\n          className=\"pointer-events-none absolute z-10 w-max max-w-36 rounded-sm bg-primary px-1.5 py-px font-mono text-[10px] tracking-normal text-[#000b27]\"\n          style={anchoredStyle(`--cobe-${marker.id}`, `--cobe-visible-${marker.id}`)}\n        >\n          <span className=\"block truncate\">{marker.label}</span>\n          <span className=\"absolute top-full left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-primary\" />\n        </div>\n      ))}\n      {lanes.map((item) => (\n        <div\n          key={item.id}\n          className=\"pointer-events-none absolute z-10 rounded bg-black px-2 py-[3px] font-mono text-[0.5rem] whitespace-nowrap text-white\"\n          style={{\n            positionAnchor: `--cobe-arc-${item.id}`,\n            bottom: \"anchor(top)\",\n            left: \"anchor(center)\",\n            translate: \"-50% 0\",\n            opacity: `var(--cobe-visible-arc-${item.id}, 0)`,\n            filter: `blur(calc((1 - var(--cobe-visible-arc-${item.id}, 0)) * 8px))`,\n            transition: \"opacity 0.3s, filter 0.3s\",\n          }}\n        >\n          {item.value} {item.unit}/s\n        </div>\n      ))}\n    </div>\n  )\n}\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/registry.json

@@ -773,6 +773,16 @@
         }
       ]
     },
+    {
+      "name": "world-globe",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "json/world-globe.json",
+          "type": "registry:file"
+        }
+      ]
+    },
     {
       "name": "lib-utils",
       "type": "registry:lib",

package/registry/traky/ui/globe.tsx

@@ -28,7 +28,6 @@ function lerpAngle(a: number, b: number, t: number): number {
 const GLOBE_CONFIG: COBEOptions = {
   width: 800,
   height: 800,
-  onRender: () => {},
   devicePixelRatio: 2,
   phi: 0,
   theta: 0.3,
@@ -60,6 +59,8 @@ export function Globe({
   interactive = true,
   panBetweenMarkers = false,
   cycleMarkers = false,
+  centerMarkerLatitude = false,
+  playing = true,
   markerHoldMs = MARKER_HOLD_MS,
   markerTransitionMs = MARKER_TRANSITION_MS,
 }: {
@@ -71,10 +72,16 @@ export function Globe({
   panBetweenMarkers?: boolean
   /** Centra cada marker uno por uno con pausa y transición suave. */
   cycleMarkers?: boolean
+  /** Inclina el globo para dejar la latitud de cada marker en el centro. */
+  centerMarkerLatitude?: boolean
+  /** Si es false, el globo se queda en el fotograma actual y no avanza el tour. */
+  playing?: boolean
   markerHoldMs?: number
   markerTransitionMs?: number
 }) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
+  const playingRef = useRef(playing)
+  playingRef.current = playing
   const phiRef = useRef(config.phi ?? 0)
   const widthRef = useRef(0)
   const pointerInteracting = useRef<number | null>(null)
@@ -84,12 +91,15 @@ export function Globe({
 
   const fixedTheta = config.theta ?? 0.22
 
-  const markerViews = useMemo((): Array<{ phi: number }> | null => {
+  const markerViews = useMemo((): Array<{ phi: number; theta: number }> | null => {
     if (!shouldCycleMarkers || !config.markers?.length) return null
     return config.markers.map((marker) => ({
       phi: Math.PI - ((marker.location[1] * Math.PI) / 180 - Math.PI / 2),
+      theta: centerMarkerLatitude
+        ? (marker.location[0] * Math.PI) / 180
+        : fixedTheta,
     }))
-  }, [shouldCycleMarkers, config.markers])
+  }, [shouldCycleMarkers, centerMarkerLatitude, fixedTheta, config.markers])
 
   const markerPhiRange = useMemo((): [number, number] | null => {
     if (!panBetweenMarkers || cycleMarkers || !config.markers?.length) return null
@@ -127,6 +137,7 @@ export function Globe({
     const canvas = canvasRef.current
     if (!canvas) return
 
+    const host = canvas.parentElement
     const onResize = () => {
       widthRef.current = canvas.offsetWidth
     }
@@ -139,49 +150,76 @@ export function Globe({
 
     const globe = createGlobe(canvas, {
       ...config,
-      width: widthRef.current * 2,
-      height: widthRef.current * 2,
-      onRender: (state) => {
-        if (shouldCycleMarkers && markerViews && markerViews.length > 0) {
-          const segment = markerHoldMs + markerTransitionMs
-          const total = markerViews.length * segment
-          const elapsed = Date.now() % total
-          const index = Math.floor(elapsed / segment)
-          const local = elapsed % segment
-          const from = markerViews[index % markerViews.length]
-          const to = markerViews[(index + 1) % markerViews.length]
+      devicePixelRatio: config.devicePixelRatio ?? 2,
+      width: widthRef.current,
+      height: widthRef.current,
+    })
+
+    let frame = 0
+    let elapsedMs = 0
+    let lastNow = 0
+    const render = () => {
+      const now = Date.now()
+      if (playingRef.current) {
+        if (lastNow !== 0) elapsedMs += now - lastNow
+        lastNow = now
+      } else {
+        lastNow = 0
+      }
+
+      const cssSize = widthRef.current
+      let phi = interactive ? phiRef.current + rs.get() : (config.phi ?? 0)
+      let theta = config.theta ?? 0.3
 
+      if (shouldCycleMarkers && markerViews && markerViews.length > 0) {
+        const segment = markerHoldMs + markerTransitionMs
+        const elapsed = elapsedMs
+        const index = Math.floor(elapsed / segment) % markerViews.length
+        const local = elapsed % segment
+        const from = markerViews[index % markerViews.length]
+        const to = markerViews[(index + 1) % markerViews.length]
+        if (from && to) {
           if (local < markerHoldMs) {
-            state.phi = from.phi
+            phi = from.phi
+            theta = from.theta
           } else {
             const t = easeInOutCubic((local - markerHoldMs) / markerTransitionMs)
-            state.phi = lerpAngle(from.phi, to.phi, t)
+            phi = lerpAngle(from.phi, to.phi, t)
+            theta = lerp(from.theta, to.theta, t)
           }
-          state.theta = fixedTheta
-        } else if (panBetweenMarkers && markerPhiRange) {
-          const [phiMin, phiMax] = markerPhiRange
-          const t = Date.now() / 5200
-          state.phi = phiMin + ((Math.sin(t) + 1) / 2) * (phiMax - phiMin)
-        } else if (autoRotate && !pointerInteracting.current) {
-          phiRef.current += 0.005
-          state.phi = interactive ? phiRef.current + rs.get() : (config.phi ?? 0)
-        } else {
-          state.phi = interactive ? phiRef.current + rs.get() : (config.phi ?? 0)
         }
+      } else if (panBetweenMarkers && markerPhiRange) {
+        const [phiMin, phiMax] = markerPhiRange
+        const t = Date.now() / 5200
+        phi = phiMin + ((Math.sin(t) + 1) / 2) * (phiMax - phiMin)
+      } else if (autoRotate && playingRef.current && !pointerInteracting.current) {
+        phiRef.current += 0.005
+        phi = interactive ? phiRef.current + rs.get() : (config.phi ?? 0)
+      }
 
-        state.theta = shouldCycleMarkers ? fixedTheta : (config.theta ?? state.theta)
-        state.scale = config.scale ?? 1
-        state.width = widthRef.current * 2
-        state.height = widthRef.current * 2
-      },
-    })
+      globe.update({
+        phi,
+        theta,
+        scale: config.scale ?? 1,
+        width: cssSize,
+        height: cssSize,
+      })
+      frame = requestAnimationFrame(render)
+    }
+    frame = requestAnimationFrame(render)
 
     setTimeout(() => {
       canvas.style.opacity = "1"
     }, 0)
 
     return () => {
+      cancelAnimationFrame(frame)
       globe.destroy()
+      const wrapper = canvas.parentElement
+      if (wrapper && host && wrapper !== host) {
+        host.insertBefore(canvas, wrapper)
+        wrapper.remove()
+      }
       window.removeEventListener("resize", onResize)
       resizeObserver.disconnect()
     }
@@ -192,6 +230,7 @@ export function Globe({
     interactive,
     panBetweenMarkers,
     cycleMarkers,
+    centerMarkerLatitude,
     shouldCycleMarkers,
     markerViews,
     markerPhiRange,

package/registry/traky/ui/world-globe.tsx

@@ -0,0 +1,292 @@
+"use client"
+
+import { useEffect, useMemo, useRef, useState, type CSSProperties } from "react"
+import type { COBEOptions } from "cobe"
+
+import { useTheme } from "@/components/theme-provider"
+import { cn } from "@/lib/utils"
+import { Globe } from "@/components/ui/globe"
+
+/** Tour: Norteamérica → Suramérica → Europa → África → Asia → Oceanía. */
+const MARKERS = [
+  { id: "cascade", location: [49.2827, -123.1207] as [number, number], label: "Cascade LLC" },
+  { id: "logistic", location: [41.8781, -87.6298] as [number, number], label: "Logistic LLC" },
+  { id: "alianza", location: [19.4326, -99.1332] as [number, number], label: "Alianza SA" },
+  { id: "bolivar", location: [4.711, -74.0721] as [number, number], label: "Bolívar SAS" },
+  { id: "minerva", location: [-23.5505, -46.6333] as [number, number], label: "Minerva SA" },
+  { id: "cordillera", location: [-33.4489, -70.6693] as [number, number], label: "Cordillera SA" },
+  { id: "iberica", location: [40.4168, -3.7038] as [number, number], label: "Ibérica SA" },
+  { id: "avrora", location: [55.7558, 37.6173] as [number, number], label: "Avrora LLC" },
+  { id: "meridian", location: [6.5244, 3.3792] as [number, number], label: "Meridian Ltd" },
+  { id: "savanna", location: [-26.2041, 28.0473] as [number, number], label: "Savanna SA" },
+  { id: "deccan", location: [19.076, 72.8777] as [number, number], label: "Deccan Ltd" },
+  { id: "straits", location: [1.3521, 103.8198] as [number, number], label: "Straits Ltd" },
+  { id: "huayun", location: [31.2304, 121.4737] as [number, number], label: "华运 Ltd" },
+  { id: "harbour", location: [-33.8688, 151.2093] as [number, number], label: "Harbour Ltd" },
+]
+
+const ARCS = [
+  {
+    id: "alianza-logistic",
+    from: [19.4326, -99.1332] as [number, number],
+    to: [41.8781, -87.6298] as [number, number],
+    unit: "AWB",
+    fromValue: 120,
+    toValue: 240,
+    duration: 28000,
+  },
+  {
+    id: "iberica-avrora",
+    from: [40.4168, -3.7038] as [number, number],
+    to: [55.7558, 37.6173] as [number, number],
+    unit: "BL",
+    fromValue: 100,
+    toValue: 220,
+    duration: 32000,
+  },
+  {
+    id: "meridian-savanna",
+    from: [6.5244, 3.3792] as [number, number],
+    to: [-26.2041, 28.0473] as [number, number],
+    unit: "WR",
+    fromValue: 160,
+    toValue: 280,
+    duration: 36000,
+  },
+  {
+    id: "avrora-huayun",
+    from: [55.7558, 37.6173] as [number, number],
+    to: [31.2304, 121.4737] as [number, number],
+    unit: "MAWB",
+    fromValue: 140,
+    toValue: 260,
+    duration: 30000,
+  },
+  {
+    id: "harbour-huayun",
+    from: [-33.8688, 151.2093] as [number, number],
+    to: [31.2304, 121.4737] as [number, number],
+    unit: "AWB",
+    fromValue: 110,
+    toValue: 230,
+    duration: 34000,
+  },
+  {
+    id: "avrora-cascade",
+    from: [55.7558, 37.6173] as [number, number],
+    to: [49.2827, -123.1207] as [number, number],
+    unit: "BL",
+    fromValue: 130,
+    toValue: 250,
+    duration: 31000,
+  },
+  {
+    id: "bolivar-minerva",
+    from: [4.711, -74.0721] as [number, number],
+    to: [-23.5505, -46.6333] as [number, number],
+    unit: "WR",
+    fromValue: 150,
+    toValue: 270,
+    duration: 33000,
+  },
+  {
+    id: "deccan-straits",
+    from: [19.076, 72.8777] as [number, number],
+    to: [1.3521, 103.8198] as [number, number],
+    unit: "AWB",
+    fromValue: 170,
+    toValue: 260,
+    duration: 29000,
+  },
+]
+
+/** Azul oscuro de marca #000b27. Misma línea en tema claro y oscuro. */
+const ARC_COLOR: [number, number, number] = [0, 0.043, 0.153]
+
+const WORLD_GLOBE_CONFIG: COBEOptions = {
+  width: 800,
+  height: 800,
+  devicePixelRatio: 2,
+  phi: 0,
+  theta: 0.2,
+  dark: 0,
+  diffuse: 1.5,
+  mapSamples: 16000,
+  mapBrightness: 10,
+  baseColor: [1, 1, 1],
+  markerColor: [0.647, 0.867, 0.392],
+  glowColor: [0.94, 0.93, 0.91],
+  markerElevation: 0.01,
+  opacity: 1,
+  markers: MARKERS.map((marker) => ({
+    location: marker.location,
+    size: 0.025,
+    id: marker.id,
+  })),
+  arcs: ARCS.map((arc) => ({
+    from: arc.from,
+    to: arc.to,
+    id: arc.id,
+  })),
+  arcColor: ARC_COLOR,
+  arcWidth: 0.5,
+  arcHeight: 0.25,
+}
+
+const GLOW_LIGHT: [number, number, number] = [0.97, 0.97, 0.98]
+const GLOW_DARK: [number, number, number] = [0.07, 0.075, 0.08]
+
+function anchoredStyle(anchor: string, visible: string): CSSProperties {
+  return {
+    positionAnchor: anchor,
+    bottom: "anchor(top)",
+    left: "anchor(center)",
+    translate: "-50% 0",
+    marginBottom: 8,
+    opacity: `var(${visible}, 0)`,
+    filter: `blur(var(${visible}, 10px))`,
+    transition: "opacity 0.8s, filter 0.8s",
+  }
+}
+
+function glowForTheme(theme: string): [number, number, number] {
+  if (theme === "dark") return GLOW_DARK
+  if (theme === "light") return GLOW_LIGHT
+  if (typeof document !== "undefined" && document.documentElement.classList.contains("dark")) {
+    return GLOW_DARK
+  }
+  return GLOW_LIGHT
+}
+
+/** Globo listo para la página web. No edita empresas ni envíos. */
+export function WorldGlobe({ className }: { className?: string }) {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const playingRef = useRef(false)
+  const [playing, setPlaying] = useState(false)
+  const { theme } = useTheme()
+  const glowColor = glowForTheme(theme)
+  const config = useMemo(
+    () => ({ ...WORLD_GLOBE_CONFIG, glowColor }),
+    [glowColor],
+  )
+  const [lanes, setLanes] = useState(() =>
+    ARCS.map((arc) => ({
+      id: arc.id,
+      unit: arc.unit,
+      value: arc.fromValue,
+    })),
+  )
+
+  useEffect(() => {
+    const node = rootRef.current
+    if (!node) return
+
+    let onScreen = false
+    const sync = () => {
+      const next = onScreen && document.visibilityState === "visible"
+      playingRef.current = next
+      setPlaying(next)
+    }
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        onScreen = entry?.isIntersecting ?? false
+        sync()
+      },
+      { threshold: 0.35 },
+    )
+    observer.observe(node)
+    document.addEventListener("visibilitychange", sync)
+    return () => {
+      observer.disconnect()
+      document.removeEventListener("visibilitychange", sync)
+    }
+  }, [])
+
+  useEffect(() => {
+    let frame = 0
+    let elapsedMs = 0
+    let lastNow = 0
+    const shown = ARCS.map((arc) => arc.fromValue)
+
+    const tick = (now: number) => {
+      if (playingRef.current) {
+        if (lastNow !== 0) elapsedMs += now - lastNow
+        lastNow = now
+      } else {
+        lastNow = 0
+      }
+
+      let changed = false
+      const next = ARCS.map((arc, index) => {
+        const elapsed = elapsedMs / arc.duration
+        const ping = elapsed % 2
+        const t = ping < 1 ? ping : 2 - ping
+        const eased = t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2
+        const value = Math.round(arc.fromValue + (arc.toValue - arc.fromValue) * eased)
+        if (value !== shown[index]) {
+          shown[index] = value
+          changed = true
+        }
+        return value
+      })
+      if (changed) {
+        setLanes((current) =>
+          current.map((item, index) => ({ ...item, value: next[index] ?? item.value })),
+        )
+      }
+      frame = requestAnimationFrame(tick)
+    }
+
+    frame = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(frame)
+  }, [])
+
+  return (
+    <div
+      ref={rootRef}
+      className={cn(
+        "relative mx-auto aspect-square w-full max-w-lg bg-background",
+        className,
+      )}
+    >
+      <Globe
+        config={config}
+        autoRotate={false}
+        interactive={false}
+        cycleMarkers
+        centerMarkerLatitude
+        playing={playing}
+        markerHoldMs={2400}
+        markerTransitionMs={1800}
+        className="max-w-full"
+      />
+      {MARKERS.map((marker) => (
+        <div
+          key={marker.id}
+          className="pointer-events-none absolute z-10 w-max max-w-36 rounded-sm bg-primary px-1.5 py-px font-mono text-[10px] tracking-normal text-[#000b27]"
+          style={anchoredStyle(`--cobe-${marker.id}`, `--cobe-visible-${marker.id}`)}
+        >
+          <span className="block truncate">{marker.label}</span>
+          <span className="absolute top-full left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-primary" />
+        </div>
+      ))}
+      {lanes.map((item) => (
+        <div
+          key={item.id}
+          className="pointer-events-none absolute z-10 rounded bg-black px-2 py-[3px] font-mono text-[0.5rem] whitespace-nowrap text-white"
+          style={{
+            positionAnchor: `--cobe-arc-${item.id}`,
+            bottom: "anchor(top)",
+            left: "anchor(center)",
+            translate: "-50% 0",
+            opacity: `var(--cobe-visible-arc-${item.id}, 0)`,
+            filter: `blur(calc((1 - var(--cobe-visible-arc-${item.id}, 0)) * 8px))`,
+            transition: "opacity 0.3s, filter 0.3s",
+          }}
+        >
+          {item.value} {item.unit}/s
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/ui/globe.tsx

@@ -28,7 +28,6 @@ function lerpAngle(a: number, b: number, t: number): number {
 const GLOBE_CONFIG: COBEOptions = {
   width: 800,
   height: 800,
-  onRender: () => {},
   devicePixelRatio: 2,
   phi: 0,
   theta: 0.3,
@@ -60,6 +59,8 @@ export function Globe({
   interactive = true,
   panBetweenMarkers = false,
   cycleMarkers = false,
+  centerMarkerLatitude = false,
+  playing = true,
   markerHoldMs = MARKER_HOLD_MS,
   markerTransitionMs = MARKER_TRANSITION_MS,
 }: {
@@ -71,10 +72,16 @@ export function Globe({
   panBetweenMarkers?: boolean
   /** Centra cada marker uno por uno con pausa y transición suave. */
   cycleMarkers?: boolean
+  /** Inclina el globo para dejar la latitud de cada marker en el centro. */
+  centerMarkerLatitude?: boolean
+  /** Si es false, el globo se queda en el fotograma actual y no avanza el tour. */
+  playing?: boolean
   markerHoldMs?: number
   markerTransitionMs?: number
 }) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
+  const playingRef = useRef(playing)
+  playingRef.current = playing
   const phiRef = useRef(config.phi ?? 0)
   const widthRef = useRef(0)
   const pointerInteracting = useRef<number | null>(null)
@@ -84,12 +91,15 @@ export function Globe({
 
   const fixedTheta = config.theta ?? 0.22
 
-  const markerViews = useMemo((): Array<{ phi: number }> | null => {
+  const markerViews = useMemo((): Array<{ phi: number; theta: number }> | null => {
     if (!shouldCycleMarkers || !config.markers?.length) return null
     return config.markers.map((marker) => ({
       phi: Math.PI - ((marker.location[1] * Math.PI) / 180 - Math.PI / 2),
+      theta: centerMarkerLatitude
+        ? (marker.location[0] * Math.PI) / 180
+        : fixedTheta,
     }))
-  }, [shouldCycleMarkers, config.markers])
+  }, [shouldCycleMarkers, centerMarkerLatitude, fixedTheta, config.markers])
 
   const markerPhiRange = useMemo((): [number, number] | null => {
     if (!panBetweenMarkers || cycleMarkers || !config.markers?.length) return null
@@ -127,6 +137,7 @@ export function Globe({
     const canvas = canvasRef.current
     if (!canvas) return
 
+    const host = canvas.parentElement
     const onResize = () => {
       widthRef.current = canvas.offsetWidth
     }
@@ -139,49 +150,76 @@ export function Globe({
 
     const globe = createGlobe(canvas, {
       ...config,
-      width: widthRef.current * 2,
-      height: widthRef.current * 2,
-      onRender: (state) => {
-        if (shouldCycleMarkers && markerViews && markerViews.length > 0) {
-          const segment = markerHoldMs + markerTransitionMs
-          const total = markerViews.length * segment
-          const elapsed = Date.now() % total
-          const index = Math.floor(elapsed / segment)
-          const local = elapsed % segment
-          const from = markerViews[index % markerViews.length]
-          const to = markerViews[(index + 1) % markerViews.length]
+      devicePixelRatio: config.devicePixelRatio ?? 2,
+      width: widthRef.current,
+      height: widthRef.current,
+    })
+
+    let frame = 0
+    let elapsedMs = 0
+    let lastNow = 0
+    const render = () => {
+      const now = Date.now()
+      if (playingRef.current) {
+        if (lastNow !== 0) elapsedMs += now - lastNow
+        lastNow = now
+      } else {
+        lastNow = 0
+      }
+
+      const cssSize = widthRef.current
+      let phi = interactive ? phiRef.current + rs.get() : (config.phi ?? 0)
+      let theta = config.theta ?? 0.3
 
+      if (shouldCycleMarkers && markerViews && markerViews.length > 0) {
+        const segment = markerHoldMs + markerTransitionMs
+        const elapsed = elapsedMs
+        const index = Math.floor(elapsed / segment) % markerViews.length
+        const local = elapsed % segment
+        const from = markerViews[index % markerViews.length]
+        const to = markerViews[(index + 1) % markerViews.length]
+        if (from && to) {
           if (local < markerHoldMs) {
-            state.phi = from.phi
+            phi = from.phi
+            theta = from.theta
           } else {
             const t = easeInOutCubic((local - markerHoldMs) / markerTransitionMs)
-            state.phi = lerpAngle(from.phi, to.phi, t)
+            phi = lerpAngle(from.phi, to.phi, t)
+            theta = lerp(from.theta, to.theta, t)
           }
-          state.theta = fixedTheta
-        } else if (panBetweenMarkers && markerPhiRange) {
-          const [phiMin, phiMax] = markerPhiRange
-          const t = Date.now() / 5200
-          state.phi = phiMin + ((Math.sin(t) + 1) / 2) * (phiMax - phiMin)
-        } else if (autoRotate && !pointerInteracting.current) {
-          phiRef.current += 0.005
-          state.phi = interactive ? phiRef.current + rs.get() : (config.phi ?? 0)
-        } else {
-          state.phi = interactive ? phiRef.current + rs.get() : (config.phi ?? 0)
         }
+      } else if (panBetweenMarkers && markerPhiRange) {
+        const [phiMin, phiMax] = markerPhiRange
+        const t = Date.now() / 5200
+        phi = phiMin + ((Math.sin(t) + 1) / 2) * (phiMax - phiMin)
+      } else if (autoRotate && playingRef.current && !pointerInteracting.current) {
+        phiRef.current += 0.005
+        phi = interactive ? phiRef.current + rs.get() : (config.phi ?? 0)
+      }
 
-        state.theta = shouldCycleMarkers ? fixedTheta : (config.theta ?? state.theta)
-        state.scale = config.scale ?? 1
-        state.width = widthRef.current * 2
-        state.height = widthRef.current * 2
-      },
-    })
+      globe.update({
+        phi,
+        theta,
+        scale: config.scale ?? 1,
+        width: cssSize,
+        height: cssSize,
+      })
+      frame = requestAnimationFrame(render)
+    }
+    frame = requestAnimationFrame(render)
 
     setTimeout(() => {
       canvas.style.opacity = "1"
     }, 0)
 
     return () => {
+      cancelAnimationFrame(frame)
       globe.destroy()
+      const wrapper = canvas.parentElement
+      if (wrapper && host && wrapper !== host) {
+        host.insertBefore(canvas, wrapper)
+        wrapper.remove()
+      }
       window.removeEventListener("resize", onResize)
       resizeObserver.disconnect()
     }
@@ -192,6 +230,7 @@ export function Globe({
     interactive,
     panBetweenMarkers,
     cycleMarkers,
+    centerMarkerLatitude,
     shouldCycleMarkers,
     markerViews,
     markerPhiRange,

package/src/ui/world-globe.tsx

@@ -0,0 +1,292 @@
+"use client"
+
+import { useEffect, useMemo, useRef, useState, type CSSProperties } from "react"
+import type { COBEOptions } from "cobe"
+
+import { useTheme } from "../hooks/use-document-theme"
+import { cn } from "../lib/utils"
+import { Globe } from "./globe"
+
+/** Tour: Norteamérica → Suramérica → Europa → África → Asia → Oceanía. */
+const MARKERS = [
+  { id: "cascade", location: [49.2827, -123.1207] as [number, number], label: "Cascade LLC" },
+  { id: "logistic", location: [41.8781, -87.6298] as [number, number], label: "Logistic LLC" },
+  { id: "alianza", location: [19.4326, -99.1332] as [number, number], label: "Alianza SA" },
+  { id: "bolivar", location: [4.711, -74.0721] as [number, number], label: "Bolívar SAS" },
+  { id: "minerva", location: [-23.5505, -46.6333] as [number, number], label: "Minerva SA" },
+  { id: "cordillera", location: [-33.4489, -70.6693] as [number, number], label: "Cordillera SA" },
+  { id: "iberica", location: [40.4168, -3.7038] as [number, number], label: "Ibérica SA" },
+  { id: "avrora", location: [55.7558, 37.6173] as [number, number], label: "Avrora LLC" },
+  { id: "meridian", location: [6.5244, 3.3792] as [number, number], label: "Meridian Ltd" },
+  { id: "savanna", location: [-26.2041, 28.0473] as [number, number], label: "Savanna SA" },
+  { id: "deccan", location: [19.076, 72.8777] as [number, number], label: "Deccan Ltd" },
+  { id: "straits", location: [1.3521, 103.8198] as [number, number], label: "Straits Ltd" },
+  { id: "huayun", location: [31.2304, 121.4737] as [number, number], label: "华运 Ltd" },
+  { id: "harbour", location: [-33.8688, 151.2093] as [number, number], label: "Harbour Ltd" },
+]
+
+const ARCS = [
+  {
+    id: "alianza-logistic",
+    from: [19.4326, -99.1332] as [number, number],
+    to: [41.8781, -87.6298] as [number, number],
+    unit: "AWB",
+    fromValue: 120,
+    toValue: 240,
+    duration: 28000,
+  },
+  {
+    id: "iberica-avrora",
+    from: [40.4168, -3.7038] as [number, number],
+    to: [55.7558, 37.6173] as [number, number],
+    unit: "BL",
+    fromValue: 100,
+    toValue: 220,
+    duration: 32000,
+  },
+  {
+    id: "meridian-savanna",
+    from: [6.5244, 3.3792] as [number, number],
+    to: [-26.2041, 28.0473] as [number, number],
+    unit: "WR",
+    fromValue: 160,
+    toValue: 280,
+    duration: 36000,
+  },
+  {
+    id: "avrora-huayun",
+    from: [55.7558, 37.6173] as [number, number],
+    to: [31.2304, 121.4737] as [number, number],
+    unit: "MAWB",
+    fromValue: 140,
+    toValue: 260,
+    duration: 30000,
+  },
+  {
+    id: "harbour-huayun",
+    from: [-33.8688, 151.2093] as [number, number],
+    to: [31.2304, 121.4737] as [number, number],
+    unit: "AWB",
+    fromValue: 110,
+    toValue: 230,
+    duration: 34000,
+  },
+  {
+    id: "avrora-cascade",
+    from: [55.7558, 37.6173] as [number, number],
+    to: [49.2827, -123.1207] as [number, number],
+    unit: "BL",
+    fromValue: 130,
+    toValue: 250,
+    duration: 31000,
+  },
+  {
+    id: "bolivar-minerva",
+    from: [4.711, -74.0721] as [number, number],
+    to: [-23.5505, -46.6333] as [number, number],
+    unit: "WR",
+    fromValue: 150,
+    toValue: 270,
+    duration: 33000,
+  },
+  {
+    id: "deccan-straits",
+    from: [19.076, 72.8777] as [number, number],
+    to: [1.3521, 103.8198] as [number, number],
+    unit: "AWB",
+    fromValue: 170,
+    toValue: 260,
+    duration: 29000,
+  },
+]
+
+/** Azul oscuro de marca #000b27. Misma línea en tema claro y oscuro. */
+const ARC_COLOR: [number, number, number] = [0, 0.043, 0.153]
+
+const WORLD_GLOBE_CONFIG: COBEOptions = {
+  width: 800,
+  height: 800,
+  devicePixelRatio: 2,
+  phi: 0,
+  theta: 0.2,
+  dark: 0,
+  diffuse: 1.5,
+  mapSamples: 16000,
+  mapBrightness: 10,
+  baseColor: [1, 1, 1],
+  markerColor: [0.647, 0.867, 0.392],
+  glowColor: [0.94, 0.93, 0.91],
+  markerElevation: 0.01,
+  opacity: 1,
+  markers: MARKERS.map((marker) => ({
+    location: marker.location,
+    size: 0.025,
+    id: marker.id,
+  })),
+  arcs: ARCS.map((arc) => ({
+    from: arc.from,
+    to: arc.to,
+    id: arc.id,
+  })),
+  arcColor: ARC_COLOR,
+  arcWidth: 0.5,
+  arcHeight: 0.25,
+}
+
+const GLOW_LIGHT: [number, number, number] = [0.97, 0.97, 0.98]
+const GLOW_DARK: [number, number, number] = [0.07, 0.075, 0.08]
+
+function anchoredStyle(anchor: string, visible: string): CSSProperties {
+  return {
+    positionAnchor: anchor,
+    bottom: "anchor(top)",
+    left: "anchor(center)",
+    translate: "-50% 0",
+    marginBottom: 8,
+    opacity: `var(${visible}, 0)`,
+    filter: `blur(var(${visible}, 10px))`,
+    transition: "opacity 0.8s, filter 0.8s",
+  }
+}
+
+function glowForTheme(theme: string): [number, number, number] {
+  if (theme === "dark") return GLOW_DARK
+  if (theme === "light") return GLOW_LIGHT
+  if (typeof document !== "undefined" && document.documentElement.classList.contains("dark")) {
+    return GLOW_DARK
+  }
+  return GLOW_LIGHT
+}
+
+/** Globo listo para la página web. No edita empresas ni envíos. */
+export function WorldGlobe({ className }: { className?: string }) {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const playingRef = useRef(false)
+  const [playing, setPlaying] = useState(false)
+  const { theme } = useTheme()
+  const glowColor = glowForTheme(theme)
+  const config = useMemo(
+    () => ({ ...WORLD_GLOBE_CONFIG, glowColor }),
+    [glowColor],
+  )
+  const [lanes, setLanes] = useState(() =>
+    ARCS.map((arc) => ({
+      id: arc.id,
+      unit: arc.unit,
+      value: arc.fromValue,
+    })),
+  )
+
+  useEffect(() => {
+    const node = rootRef.current
+    if (!node) return
+
+    let onScreen = false
+    const sync = () => {
+      const next = onScreen && document.visibilityState === "visible"
+      playingRef.current = next
+      setPlaying(next)
+    }
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        onScreen = entry?.isIntersecting ?? false
+        sync()
+      },
+      { threshold: 0.35 },
+    )
+    observer.observe(node)
+    document.addEventListener("visibilitychange", sync)
+    return () => {
+      observer.disconnect()
+      document.removeEventListener("visibilitychange", sync)
+    }
+  }, [])
+
+  useEffect(() => {
+    let frame = 0
+    let elapsedMs = 0
+    let lastNow = 0
+    const shown = ARCS.map((arc) => arc.fromValue)
+
+    const tick = (now: number) => {
+      if (playingRef.current) {
+        if (lastNow !== 0) elapsedMs += now - lastNow
+        lastNow = now
+      } else {
+        lastNow = 0
+      }
+
+      let changed = false
+      const next = ARCS.map((arc, index) => {
+        const elapsed = elapsedMs / arc.duration
+        const ping = elapsed % 2
+        const t = ping < 1 ? ping : 2 - ping
+        const eased = t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2
+        const value = Math.round(arc.fromValue + (arc.toValue - arc.fromValue) * eased)
+        if (value !== shown[index]) {
+          shown[index] = value
+          changed = true
+        }
+        return value
+      })
+      if (changed) {
+        setLanes((current) =>
+          current.map((item, index) => ({ ...item, value: next[index] ?? item.value })),
+        )
+      }
+      frame = requestAnimationFrame(tick)
+    }
+
+    frame = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(frame)
+  }, [])
+
+  return (
+    <div
+      ref={rootRef}
+      className={cn(
+        "relative mx-auto aspect-square w-full max-w-lg bg-background",
+        className,
+      )}
+    >
+      <Globe
+        config={config}
+        autoRotate={false}
+        interactive={false}
+        cycleMarkers
+        centerMarkerLatitude
+        playing={playing}
+        markerHoldMs={2400}
+        markerTransitionMs={1800}
+        className="max-w-full"
+      />
+      {MARKERS.map((marker) => (
+        <div
+          key={marker.id}
+          className="pointer-events-none absolute z-10 w-max max-w-36 rounded-sm bg-primary px-1.5 py-px font-mono text-[10px] tracking-normal text-[#000b27]"
+          style={anchoredStyle(`--cobe-${marker.id}`, `--cobe-visible-${marker.id}`)}
+        >
+          <span className="block truncate">{marker.label}</span>
+          <span className="absolute top-full left-1/2 -translate-x-1/2 border-[5px] border-transparent border-t-primary" />
+        </div>
+      ))}
+      {lanes.map((item) => (
+        <div
+          key={item.id}
+          className="pointer-events-none absolute z-10 rounded bg-black px-2 py-[3px] font-mono text-[0.5rem] whitespace-nowrap text-white"
+          style={{
+            positionAnchor: `--cobe-arc-${item.id}`,
+            bottom: "anchor(top)",
+            left: "anchor(center)",
+            translate: "-50% 0",
+            opacity: `var(--cobe-visible-arc-${item.id}, 0)`,
+            filter: `blur(calc((1 - var(--cobe-visible-arc-${item.id}, 0)) * 8px))`,
+            transition: "opacity 0.3s, filter 0.3s",
+          }}
+        >
+          {item.value} {item.unit}/s
+        </div>
+      ))}
+    </div>
+  )
+}