@divinci-ai/robot-avatar 0.1.0

package/dist/scene/useRobotSignals.js

@@ -0,0 +1,101 @@
+/**
+ * Shared interaction signals for the rigged robot. One window-listener setup,
+ * one mutable ref every body part reads from. Provides:
+ *  - lookX/lookY: where his attention should go — the cursor when it's moving,
+ *    the focused input when you're typing, otherwise the user (screen center).
+ *  - keystroke reactions + idle fidgets, each with a fresh random seed/style so
+ *    the motion never loops identically.
+ */
+import { useEffect, useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+export const BASE_BODY_YAW = 0.08;
+export function useRobotSignals(speakerTarget) {
+    const sig = useRef({
+        lookX: 0,
+        lookY: 0,
+        reactUntil: 0,
+        reactSeed: 0,
+        fidgetUntil: 0,
+        fidgetSeed: 0,
+        reduced: false,
+    });
+    const mouse = useRef({ x: 0, y: 0, at: -10 });
+    const focus = useRef({ x: 0, y: 0, active: false });
+    const nextFidget = useRef(5);
+    useEffect(() => {
+        const norm = (px, py) => [
+            (px / window.innerWidth) * 2 - 1,
+            (py / window.innerHeight) * 2 - 1,
+        ];
+        const onMove = (e) => {
+            const [x, y] = norm(e.clientX, e.clientY);
+            mouse.current = { x, y, at: performance.now() / 1000 };
+        };
+        const onKey = () => {
+            sig.current.reactUntil = performance.now() / 1000 + 0.5 + Math.random() * 0.3;
+            sig.current.reactSeed = Math.random();
+        };
+        const onFocusIn = (e) => {
+            const el = e.target;
+            if (el && typeof el.getBoundingClientRect === "function") {
+                const tag = el.tagName;
+                if (tag === "INPUT" || tag === "TEXTAREA" || el.isContentEditable) {
+                    const r = el.getBoundingClientRect();
+                    const [x, y] = norm(r.left + r.width / 2, r.top + r.height / 2);
+                    focus.current = { x, y, active: true };
+                }
+            }
+        };
+        const onFocusOut = () => {
+            focus.current.active = false;
+        };
+        // ── prefers-reduced-motion (live) ────────────────────────────────
+        const mq = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+        sig.current.reduced = mq?.matches ?? false;
+        const onReduceChange = (e) => {
+            sig.current.reduced = e.matches;
+        };
+        mq?.addEventListener?.("change", onReduceChange);
+        window.addEventListener("mousemove", onMove, { passive: true });
+        window.addEventListener("keydown", onKey);
+        window.addEventListener("focusin", onFocusIn);
+        window.addEventListener("focusout", onFocusOut);
+        return () => {
+            mq?.removeEventListener?.("change", onReduceChange);
+            window.removeEventListener("mousemove", onMove);
+            window.removeEventListener("keydown", onKey);
+            window.removeEventListener("focusin", onFocusIn);
+            window.removeEventListener("focusout", onFocusOut);
+        };
+    }, []);
+    useFrame(() => {
+        const t = performance.now() / 1000;
+        const s = sig.current;
+        let tx = 0;
+        let ty = 0;
+        // The injected speaker target loses to a moving cursor (the user always
+        // wins the robot's attention) and is ignored under reduced motion.
+        const sp = s.reduced || !speakerTarget ? null : speakerTarget();
+        if (t - mouse.current.at < 2.5) {
+            tx = mouse.current.x;
+            ty = mouse.current.y;
+        }
+        else if (sp) {
+            tx = sp[0];
+            ty = sp[1];
+        }
+        else if (focus.current.active) {
+            tx = focus.current.x;
+            ty = focus.current.y;
+        }
+        s.lookX += (tx - s.lookX) * 0.08;
+        s.lookY += (ty - s.lookY) * 0.08;
+        if (!s.reduced && t > nextFidget.current && t > s.reactUntil) {
+            s.fidgetUntil = t + 1.4 + Math.random() * 0.8;
+            s.fidgetSeed = Math.random();
+            nextFidget.current = t + 6 + Math.random() * 8;
+        }
+    });
+    return sig;
+}
+//# sourceMappingURL=useRobotSignals.js.map

package/dist/scene/useRobotSignals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRobotSignals.js","sourceRoot":"","sources":["../../src/scene/useRobotSignals.ts"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Shared types for the RobotHero component.
+ *
+ * Kept in a standalone module (no React/three imports) so the light
+ * wrapper can import them without pulling three.js into the main bundle.
+ */
+export type AvatarState = "idle" | "thinking" | "happy" | "wave";
+export interface RobotAvatarColors {
+    body: string;
+    trim: string;
+    heart: string;
+    eye: string;
+    shadow: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB"}

package/dist/types.js

@@ -0,0 +1,8 @@
+/**
+ * Shared types for the RobotHero component.
+ *
+ * Kept in a standalone module (no React/three imports) so the light
+ * wrapper can import them without pulling three.js into the main bundle.
+ */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG"}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@divinci-ai/robot-avatar",
+  "version": "0.1.0",
+  "description": "The Divinci robot mascot — procedural react-three-fiber avatar shared by the SDK docs hero, the web app, the Divinci Agent panel, and the Chrome extension.",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./scene": {
+      "types": "./dist/scene/index.d.ts",
+      "default": "./dist/scene/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "@react-three/drei": ">=9.114.0",
+    "@react-three/fiber": ">=8.17.0",
+    "react": ">=18.3.0",
+    "three": ">=0.169.0"
+  },
+  "devDependencies": {
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.6.1",
+    "@types/react": "^19.2.17",
+    "@types/three": "^0.185.0",
+    "react": "^19.2.7",
+    "three": "^0.185.0",
+    "typescript": "^5.5.0",
+    "vitest": "^3.2.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run --passWithNoTests"
+  }
+}

package/src/blend.ts

@@ -0,0 +1,16 @@
+/**
+ * Tiny hex-color blend used by consumers to derive the robot's palette from a
+ * theme (web client) or brand constants (docs hero). Lives in the light entry
+ * so wrappers can compute colors without touching three.js.
+ */
+
+/** Blend two hex colors; t=0 → a, t=1 → b. */
+export function blendHex(a: string, b: string, t: number): string {
+  const m = a.replace("#", "").trim();
+  const n = b.replace("#", "").trim();
+  if (m.length < 6 || n.length < 6) return a;
+  const ra = [parseInt(m.slice(0, 2), 16), parseInt(m.slice(2, 4), 16), parseInt(m.slice(4, 6), 16)];
+  const rb = [parseInt(n.slice(0, 2), 16), parseInt(n.slice(2, 4), 16), parseInt(n.slice(4, 6), 16)];
+  const mix = ra.map((v, i) => Math.round(v + (rb[i] - v) * t));
+  return "#" + mix.map((v) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, "0")).join("");
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+/**
+ * @divinci-ai/robot-avatar — light entry (NO three.js).
+ *
+ * Import this from main bundles; lazy-import "@divinci-ai/robot-avatar/scene"
+ * for the WebGL chunk:
+ *
+ *   const RobotScene = lazy(() =>
+ *     import("@divinci-ai/robot-avatar/scene").then((m) => ({ default: m.RobotScene }))
+ *   );
+ */
+
+export type { AvatarState, RobotAvatarColors } from "./types.js";
+export { blendHex } from "./blend.js";
+export { useRenderGate, type RenderGate, type RenderGateOptions } from "./render-gate.js";

package/src/render-gate.ts

@@ -0,0 +1,102 @@
+/**
+ * useRenderGate — shared "should the robot render right now?" gate.
+ *
+ * Returns `active: false` when any of these hold:
+ *  - the container is scrolled out of the viewport (IntersectionObserver)
+ *  - the tab is hidden (visibilitychange)
+ *  - the user has been idle for `idleMs` (optional; pass 0/undefined to skip)
+ *
+ * Consumers feed `active` into RobotScene's `paused` prop, which sets the R3F
+ * frameloop to "never" — the WebGL context stays alive but stops burning
+ * GPU/battery. This generalizes the SDK docs hero's gate controller so the web
+ * app / agent panel / extension iframe get the same behavior for free.
+ *
+ * Lives in the light entry: React-only, no three.js.
+ */
+
+import { useEffect, useState } from "react";
+
+export interface RenderGateOptions {
+  /** Pause after this many ms without pointer/key/scroll activity. 0 = never. */
+  idleMs?: number;
+  /** IntersectionObserver threshold for "visible" (default 0.05). */
+  threshold?: number;
+}
+
+export interface RenderGate<T extends HTMLElement> {
+  /**
+   * Attach to the element wrapping the canvas. A callback ref (not a ref
+   * object) so the type is identical under react 18 and 19 typings.
+   */
+  ref: (node: T | null) => void;
+  /** True when the robot should animate. */
+  active: boolean;
+}
+
+export function useRenderGate<T extends HTMLElement = HTMLDivElement>(
+  options: RenderGateOptions = {}
+): RenderGate<T> {
+  const { idleMs = 0, threshold = 0.05 } = options;
+  const [node, setNode] = useState<T | null>(null);
+  const [active, setActive] = useState(true);
+
+  useEffect(() => {
+    let visible = true;
+    let shown = !document.hidden;
+    let idle = false;
+    let idleTimer: number | undefined;
+
+    const recompute = (): void => {
+      setActive(visible && shown && !idle);
+    };
+
+    const bumpIdle = (): void => {
+      if (!idleMs) return;
+      if (idle) {
+        idle = false;
+        recompute();
+      }
+      window.clearTimeout(idleTimer);
+      idleTimer = window.setTimeout(() => {
+        idle = true;
+        recompute();
+      }, idleMs);
+    };
+
+    let io: IntersectionObserver | undefined;
+    if (node && typeof IntersectionObserver !== "undefined") {
+      io = new IntersectionObserver(
+        (entries) => {
+          visible = entries.some((e) => e.isIntersecting);
+          recompute();
+        },
+        { threshold }
+      );
+      io.observe(node);
+    }
+
+    const onVisibility = (): void => {
+      shown = !document.hidden;
+      recompute();
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+
+    const activityEvents = ["pointermove", "pointerdown", "keydown", "wheel", "touchstart", "scroll"] as const;
+    if (idleMs) {
+      activityEvents.forEach((ev) => window.addEventListener(ev, bumpIdle, { passive: true }));
+      bumpIdle();
+    }
+
+    recompute();
+    return () => {
+      io?.disconnect();
+      document.removeEventListener("visibilitychange", onVisibility);
+      if (idleMs) {
+        activityEvents.forEach((ev) => window.removeEventListener(ev, bumpIdle));
+        window.clearTimeout(idleTimer);
+      }
+    };
+  }, [node, idleMs, threshold]);
+
+  return { ref: setNode, active };
+}

package/src/scene/AnimatedHeart.tsx

@@ -0,0 +1,95 @@
+/**
+ * AnimatedHeart — the Divinci heart rendered in code (not baked into the GLB)
+ * so it can be alive: it slowly phases through brand colors, is slightly
+ * transparent, and gently pulses.
+ */
+
+import React, { useMemo, useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import type { MutableRefObject } from "react";
+import type { RobotSignals } from "./useRobotSignals.js";
+
+export interface AnimatedHeartProps {
+  position?: [number, number, number];
+  scale?: number;
+  cycleSeconds?: number;
+  opacity?: number;
+  stretchY?: number;
+  sig?: MutableRefObject<RobotSignals>;
+}
+
+function makeHeartGeometry(): THREE.ExtrudeGeometry {
+  const s = new THREE.Shape();
+  s.moveTo(0, 0.3);
+  s.bezierCurveTo(0, 0.3, -0.2, 0, -0.5, 0);
+  s.bezierCurveTo(-0.95, 0, -0.95, 0.5, -0.95, 0.5);
+  s.bezierCurveTo(-0.95, 0.78, -0.6, 1.05, 0, 1.35);
+  s.bezierCurveTo(0.6, 1.05, 0.95, 0.78, 0.95, 0.5);
+  s.bezierCurveTo(0.95, 0.5, 0.95, 0, 0.5, 0);
+  s.bezierCurveTo(0.2, 0, 0, 0.3, 0, 0.3);
+  const geo = new THREE.ExtrudeGeometry(s, {
+    depth: 0.55,
+    bevelEnabled: true,
+    bevelThickness: 0.14,
+    bevelSize: 0.14,
+    bevelSegments: 5,
+    curveSegments: 28,
+  });
+  geo.center();
+  geo.rotateZ(Math.PI);
+  return geo;
+}
+
+export function AnimatedHeart({
+  position = [0, 0.2, 0.45],
+  scale = 0.5,
+  cycleSeconds = 6,
+  opacity = 0.8,
+  stretchY = 1,
+  sig,
+}: AnimatedHeartProps): React.ReactElement {
+  const geometry = useMemo(makeHeartGeometry, []);
+  const mesh = useRef<THREE.Mesh>(null);
+  const material = useRef<THREE.MeshStandardMaterial>(null);
+  const color = useMemo(() => new THREE.Color(), []);
+
+  useFrame(() => {
+    const t = performance.now() / 1000;
+    const s = sig?.current;
+    const reduced = s?.reduced ?? false;
+    // Reduced motion: hold a static mid-cycle color, no hue drift / pulse / bob.
+    const phase = reduced ? 0 : Math.sin((t * 2 * Math.PI) / cycleSeconds);
+    const hue = (0.89 + 0.11 * phase) % 1;
+    color.setHSL(hue, 0.7, 0.56);
+    if (material.current) {
+      material.current.color.copy(color);
+      material.current.emissive.copy(color);
+    }
+    if (mesh.current) {
+      if (reduced) {
+        mesh.current.scale.set(scale, scale * stretchY, scale);
+        mesh.current.position.y = position[1];
+      } else {
+        const reacting = s ? t < s.reactUntil : false;
+        const pulse = 1 + (reacting ? 0.2 : 0.05) * Math.sin(t * (reacting ? 9 : 2.4));
+        mesh.current.scale.set(scale * pulse, scale * stretchY * pulse, scale * pulse);
+        mesh.current.position.y = position[1] + (reacting ? Math.abs(Math.sin(t * 9)) * 0.06 : 0);
+      }
+    }
+  });
+
+  return (
+    <mesh ref={mesh} geometry={geometry} position={position} scale={scale}>
+      <meshStandardMaterial
+        ref={material}
+        transparent
+        opacity={opacity}
+        roughness={0.2}
+        metalness={0.0}
+        emissiveIntensity={0.35}
+        depthWrite={false}
+      />
+    </mesh>
+  );
+}