@springbrand/message-panel 0.1.3-alpha.9 → 0.2.0-alpha.37

package/springbrand-pet/index.tsx

@@ -0,0 +1,569 @@
+/**
+ * SpringBrand desktop pet for the message-panel package.
+ *
+ * The framework-free animation engine in ./bot is adapted from bloub by
+ * Jérémy Perret under the MIT License; see LICENSE.bloub. This file is the
+ * isolated React adapter and SpringBrand desktop-pet behavior.
+ */
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type PointerEvent as ReactPointerEvent,
+} from "react";
+
+import { NOTIF_BLUE } from "./bot/decor";
+import { BotEngine, type BotFrame, type Look } from "./bot/engine";
+import {
+  DEFAULT_EXPRESSION,
+  EXPRESSION_BY_ID,
+  type ExpressionId,
+} from "./bot/expressions";
+import { clamp, easings } from "./bot/math";
+import { DEMI_VIEWBOX, RAYON } from "./bot/repere";
+import {
+  SHAPE_BY_ID,
+  mixHex,
+} from "./bot/skins";
+import { STATE_BY_ID, type StateId } from "./bot/states";
+
+type Interest = {
+  label: string;
+  symbol: string;
+  state: StateId;
+};
+
+const INTERESTS: readonly Interest[] = [
+  { label: "Observing", symbol: "◌", state: "idle" },
+  { label: "Thinking up an idea", symbol: "✦", state: "thinking" },
+  { label: "Just blinking", symbol: "⌁", state: "wink" },
+  { label: "Found something new", symbol: "?", state: "wide" },
+  { label: "Staying alert", symbol: "!", state: "alert" },
+  { label: "New message", symbol: "•", state: "notify" },
+  { label: "A sudden thought", symbol: "!", state: "exclaim" },
+  { label: "Taking a break", symbol: "z", state: "sleep" },
+  { label: "Hatching an idea", symbol: "○", state: "egg" },
+  { label: "Organizing things", symbol: "⬡", state: "hexagon" },
+  { label: "Making something fun", symbol: "▶", state: "play" },
+  { label: "Listening to music", symbol: "♪", state: "orbit" },
+  { label: "Burst of inspiration", symbol: "✺", state: "burst" },
+  { label: "Out exploring", symbol: "↗", state: "comet" },
+  { label: "Spinning around", symbol: "∞", state: "swirl" },
+] as const;
+
+const EXPRESSIONS: readonly ExpressionId[] = [
+  "surpris",
+  "heureux",
+  "hilare",
+  "excite",
+  "fier",
+  "blase",
+] as const;
+
+const PAPER = "#f9f9f9";
+const YAW_MAX = 16;
+const PITCH_MAX = 13;
+const PITCH = 10;
+const TURN = 26;
+const SPIN = 360;
+const TURN_TIME = 1.1;
+
+function lookTarget({
+  nx,
+  ny,
+  tour,
+  pointer,
+}: {
+  nx: number;
+  ny: number;
+  tour: number;
+  pointer: boolean;
+}): Look {
+  return {
+    yaw: -TURN + nx * YAW_MAX,
+    pitch: PITCH - ny * PITCH_MAX,
+    mix: tour,
+    spin: SPIN * (1 - tour),
+    wander: pointer ? 0 : 1,
+  };
+}
+
+function chooseDifferent(current: number, length: number): number {
+  if (length < 2) return current;
+  return (current + 1 + Math.floor(Math.random() * (length - 1))) % length;
+}
+
+export function constrainPetDrag(
+  delta: { x: number; y: number },
+  rect: { left: number; top: number; right: number; bottom: number },
+  viewport: { width: number; height: number },
+  margin = 8,
+): { x: number; y: number } {
+  return {
+    x: clamp(delta.x, margin - rect.left, viewport.width - margin - rect.right),
+    y: clamp(delta.y, margin - rect.top, viewport.height - margin - rect.bottom),
+  };
+}
+
+const stateNames = [...STATE_BY_ID.keys()];
+if (stateNames.length !== 15 || new Set(stateNames).size !== stateNames.length) {
+  throw new Error("SpringBrand pet requires the complete 15-state bloub catalogue");
+}
+
+export type SpringBrandPetProps = {
+  ariaLabel?: string;
+  className?: string;
+  size?: number;
+  style?: CSSProperties;
+};
+
+/**
+ * Desktop-only pet with the complete bloub state engine, a SpringBrand skin,
+ * pointer-following eyes, and randomized interests. Click to change interest.
+ */
+export function SpringBrandPet({
+  ariaLabel = "SpringBrand pet",
+  className,
+  size = 144,
+  style,
+}: SpringBrandPetProps) {
+  const rawId = useId();
+  const id = useMemo(() => rawId.replace(/:/g, ""), [rawId]);
+  const host = useRef<HTMLButtonElement | null>(null);
+  const pointer = useRef<{ x: number; y: number } | null>(null);
+  const aiming = useRef(false);
+  const turnSince = useRef(0);
+  const interestIndex = useRef(0);
+  const changedAt = useRef(0);
+  const engine = useRef<BotEngine | null>(null);
+  const drag = useRef<{
+    pointerId: number;
+    startX: number;
+    startY: number;
+    originX: number;
+    originY: number;
+    rect: { left: number; top: number; right: number; bottom: number };
+  } | null>(null);
+  const dragged = useRef(false);
+
+  if (!engine.current) {
+    engine.current = new BotEngine(
+      RAYON,
+      "idle",
+      SHAPE_BY_ID.get("springbrand")?.radii ?? null,
+      EXPRESSION_BY_ID.get(DEFAULT_EXPRESSION) ?? null,
+    );
+  }
+
+  const [interest, setInterest] = useState(INTERESTS[0]!);
+  const [view, setView] = useState<{ frame: BotFrame; now: number }>(() => ({
+    frame: engine.current!.sample(0),
+    now: 0,
+  }));
+  const [desktop, setDesktop] = useState(false);
+  const [reducedMotion, setReducedMotion] = useState(false);
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+
+  const renderAt = useCallback((now: number) => {
+    const currentEngine = engine.current!;
+    const definition = STATE_BY_ID.get(currentEngine.state);
+    const box = host.current?.getBoundingClientRect();
+
+    if (definition?.baseFace && box?.width && box.height) {
+      if (!aiming.current) turnSince.current = now;
+      const halfWidth = Math.max(1, window.innerWidth / 2);
+      const halfHeight = Math.max(1, window.innerHeight / 2);
+      currentEngine.setLook(
+        lookTarget({
+          nx: pointer.current
+            ? clamp(
+                (pointer.current.x - (box.left + box.width / 2)) / halfWidth,
+                -1,
+                1,
+              )
+            : 0,
+          ny: pointer.current
+            ? clamp(
+                (pointer.current.y - (box.top + box.height / 2)) / halfHeight,
+                -1,
+                1,
+              )
+            : 0,
+          tour: easings.easeOutQuint(clamp((now - turnSince.current) / TURN_TIME)),
+          pointer: pointer.current !== null,
+        }),
+        now,
+      );
+      aiming.current = true;
+    } else if (aiming.current) {
+      currentEngine.setLook(null, now, TURN_TIME);
+      aiming.current = false;
+    }
+
+    setView({ frame: currentEngine.sample(now), now });
+  }, []);
+
+  const changeInterest = useCallback(() => {
+    const next = chooseDifferent(interestIndex.current, INTERESTS.length);
+    const now = performance.now() / 1000;
+    const nextInterest = INTERESTS[next]!;
+    const nextExpression = EXPRESSIONS[Math.floor(Math.random() * EXPRESSIONS.length)]!;
+    interestIndex.current = next;
+    changedAt.current = now;
+    engine.current!.setExpression(EXPRESSION_BY_ID.get(nextExpression) ?? null, now);
+    engine.current!.setState(nextInterest.state, now);
+    setInterest(nextInterest);
+    renderAt(now);
+  }, [renderAt]);
+
+  useEffect(() => {
+    const desktopQuery = window.matchMedia("(min-width: 768px)");
+    const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const sync = () => {
+      setDesktop(desktopQuery.matches);
+      setReducedMotion(motionQuery.matches);
+    };
+    sync();
+    desktopQuery.addEventListener("change", sync);
+    motionQuery.addEventListener("change", sync);
+    return () => {
+      desktopQuery.removeEventListener("change", sync);
+      motionQuery.removeEventListener("change", sync);
+    };
+  }, []);
+
+  useEffect(() => {
+    const onPointerMove = (event: PointerEvent) => {
+      if (event.pointerType === "touch") return;
+      pointer.current = { x: event.clientX, y: event.clientY };
+      if (reducedMotion) renderAt(performance.now() / 1000);
+    };
+    const onPointerLeave = () => {
+      pointer.current = null;
+      if (reducedMotion) renderAt(performance.now() / 1000);
+    };
+    window.addEventListener("pointermove", onPointerMove, { passive: true });
+    document.addEventListener("pointerleave", onPointerLeave);
+    return () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      document.removeEventListener("pointerleave", onPointerLeave);
+    };
+  }, [reducedMotion, renderAt]);
+
+  useEffect(() => {
+    const now = performance.now() / 1000;
+    changedAt.current = now;
+    engine.current!.reset("idle", now);
+    renderAt(now);
+    if (reducedMotion) return;
+
+    let animationFrame = 0;
+    const tick = (milliseconds: number) => {
+      renderAt(milliseconds / 1000);
+      animationFrame = requestAnimationFrame(tick);
+    };
+    animationFrame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(animationFrame);
+  }, [reducedMotion, renderAt]);
+
+  useEffect(() => {
+    if (reducedMotion) return;
+    const duration = STATE_BY_ID.get(interest.state)?.duration ?? 2;
+    const timer = window.setTimeout(
+      changeInterest,
+      duration * 1000 + 2_000 + Math.random() * 3_000,
+    );
+    return () => window.clearTimeout(timer);
+  }, [changeInterest, interest, reducedMotion]);
+
+  const bubbleAge = view.now - changedAt.current;
+  const bubbleOpacity = reducedMotion
+    ? 1
+    : clamp(bubbleAge / 0.2) * clamp((3.1 - bubbleAge) / 0.5);
+  const frame = view.frame;
+  const maskId = `${id}-mask`;
+  const bodyGradientId = `${id}-body`;
+
+  const beginDrag = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    if (event.button !== 0) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    drag.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      originX: offset.x,
+      originY: offset.y,
+      rect,
+    };
+    dragged.current = false;
+  };
+
+  const moveDrag = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    const session = drag.current;
+    if (!session || session.pointerId !== event.pointerId) return;
+    const delta = {
+      x: event.clientX - session.startX,
+      y: event.clientY - session.startY,
+    };
+    if (!dragged.current && Math.hypot(delta.x, delta.y) < 4) return;
+    dragged.current = true;
+    const next = constrainPetDrag(delta, session.rect, {
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+    setOffset({ x: session.originX + next.x, y: session.originY + next.y });
+  };
+
+  const endDrag = (event: ReactPointerEvent<HTMLButtonElement>) => {
+    if (drag.current?.pointerId !== event.pointerId) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    drag.current = null;
+  };
+
+  if (!desktop) return null;
+
+  const renderDots = (key: string) =>
+    frame.dots.map((dot, index) => {
+      const fill =
+        dot.color ??
+        (dot.depth === undefined
+          ? `url(#${bodyGradientId})`
+          : mixHex(PAPER, "#ff8b2c", dot.depth));
+      if (dot.d) {
+        return (
+          <path
+            key={`${key}-${index}`}
+            d={dot.d}
+            transform={`translate(${dot.x} ${dot.y}) rotate(${dot.rot ?? 0}) scale(${RAYON})`}
+            fill={fill}
+            opacity={dot.opacity}
+          />
+        );
+      }
+      return (
+        <circle
+          key={`${key}-${index}`}
+          cx={dot.x}
+          cy={dot.y}
+          r={dot.r}
+          fill={fill}
+          opacity={dot.opacity}
+        />
+      );
+    });
+
+  return (
+    <button
+      ref={host}
+      type="button"
+      onClick={() => {
+        if (dragged.current) {
+          dragged.current = false;
+          return;
+        }
+        changeInterest();
+      }}
+      onPointerDown={beginDrag}
+      onPointerMove={moveDrag}
+      onPointerUp={endDrag}
+      onPointerCancel={endDrag}
+      aria-label={`${ariaLabel}: ${interest.label}. Drag to move or click to change interest.`}
+      className={className}
+      style={{
+        position: "fixed",
+        right: "max(20px, env(safe-area-inset-right))",
+        bottom: "max(18px, env(safe-area-inset-bottom))",
+        zIndex: 60,
+        width: size,
+        height: size,
+        margin: 0,
+        padding: 0,
+        border: 0,
+        borderRadius: "50%",
+        background: "transparent",
+        cursor: drag.current ? "grabbing" : "grab",
+        color: "inherit",
+        filter: "drop-shadow(0 16px 20px rgba(98, 47, 0, 0.22))",
+        WebkitTapHighlightColor: "transparent",
+        ...style,
+        transform: `translate3d(${offset.x}px, ${offset.y}px, 0)`,
+        touchAction: "none",
+        userSelect: "none",
+      }}
+    >
+      <span
+        aria-hidden="true"
+        style={{
+          position: "absolute",
+          right: size * 0.58,
+          bottom: size * 0.82,
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          width: "max-content",
+          maxWidth: 150,
+          padding: "7px 10px",
+          border: "1px solid rgba(255, 153, 56, 0.25)",
+          borderRadius: 14,
+          background:
+            "color-mix(in srgb, var(--background, white) 88%, transparent)",
+          boxShadow: "0 8px 24px rgba(43, 25, 8, 0.12)",
+          color: "var(--foreground, #24180f)",
+          fontSize: 12,
+          lineHeight: "16px",
+          whiteSpace: "nowrap",
+          opacity: bubbleOpacity,
+          transform: `translateY(${(1 - bubbleOpacity) * 6}px)`,
+          pointerEvents: "none",
+          backdropFilter: "blur(10px)",
+        }}
+      >
+        <span style={{ color: "#ff7a00", fontWeight: 700 }}>
+          {interest.symbol}
+        </span>
+        {interest.label}
+      </span>
+
+      <svg
+        width={size}
+        height={size}
+        viewBox={`${-DEMI_VIEWBOX} ${-DEMI_VIEWBOX} ${DEMI_VIEWBOX * 2} ${DEMI_VIEWBOX * 2}`}
+        aria-hidden="true"
+        style={{ display: "block", overflow: "visible" }}
+      >
+        <defs>
+          <linearGradient
+            id={bodyGradientId}
+            x1={-RAYON}
+            y1={-RAYON}
+            x2={RAYON}
+            y2={RAYON}
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#ffd078" />
+            <stop offset="0.56" stopColor="#ff9938" />
+            <stop offset="1" stopColor="#ff6b1a" />
+          </linearGradient>
+
+          <mask
+            id={maskId}
+            maskUnits="userSpaceOnUse"
+            x={-DEMI_VIEWBOX}
+            y={-DEMI_VIEWBOX}
+            width={DEMI_VIEWBOX * 2}
+            height={DEMI_VIEWBOX * 2}
+          >
+            <path d={frame.bodyPath} fill="white" />
+            {frame.eyes.map((eye, index) => (
+              <path
+                key={`eye-${index}`}
+                d={eye.d}
+                transform={eye.matrix}
+                opacity={eye.alpha}
+                fill="black"
+              />
+            ))}
+            {frame.notch && (
+              <circle
+                cx={frame.notch.x}
+                cy={frame.notch.y}
+                r={frame.notch.r}
+                fill="black"
+              />
+            )}
+          </mask>
+
+          {frame.arcs.map((arc) => (
+            <linearGradient
+              key={`gradient-${arc.id}`}
+              id={`${id}-${arc.id}`}
+              gradientUnits="userSpaceOnUse"
+              x1={arc.grad.x1}
+              y1={arc.grad.y1}
+              x2={arc.grad.x2}
+              y2={arc.grad.y2}
+            >
+              {arc.grad.stops.map((color, index) => (
+                <stop
+                  key={`${arc.id}-stop-${index}`}
+                  offset={index / (arc.grad.stops.length - 1)}
+                  stopColor={color}
+                />
+              ))}
+            </linearGradient>
+          ))}
+        </defs>
+
+        <g fill="none" strokeLinecap="round">
+          {frame.arcs.map((arc) => (
+            <path
+              key={`back-${arc.id}`}
+              d={arc.back}
+              stroke={`url(#${id}-${arc.id})`}
+              strokeWidth={arc.width}
+              opacity={arc.opacity}
+            />
+          ))}
+        </g>
+
+        {frame.dotsBehind && <g>{renderDots("behind")}</g>}
+
+        <g opacity={frame.bodyAlpha}>
+          <path d={frame.bodyPath} fill="var(--background, #f9f9f9)" />
+          <g mask={`url(#${maskId})`}>
+            <rect
+              x={-DEMI_VIEWBOX}
+              y={-DEMI_VIEWBOX}
+              width={DEMI_VIEWBOX * 2}
+              height={DEMI_VIEWBOX * 2}
+              fill={`url(#${bodyGradientId})`}
+            />
+            <ellipse
+              cx={-34}
+              cy={-52}
+              rx={62}
+              ry={34}
+              fill="white"
+              opacity={0.13}
+              transform="rotate(-24)"
+            />
+          </g>
+        </g>
+
+        {!frame.dotsBehind && <g>{renderDots("front")}</g>}
+
+        {frame.notif && (
+          <circle
+            cx={frame.notif.x}
+            cy={frame.notif.y}
+            r={frame.notif.r}
+            fill={NOTIF_BLUE}
+          />
+        )}
+
+        <g fill="none" strokeLinecap="round">
+          {frame.arcs.map((arc) => (
+            <path
+              key={`front-${arc.id}`}
+              d={arc.front}
+              stroke={`url(#${id}-${arc.id})`}
+              strokeWidth={arc.width}
+              opacity={arc.opacity}
+            />
+          ))}
+        </g>
+      </svg>
+    </button>
+  );
+}
+
+export { EXPRESSIONS as SPRINGBRAND_PET_EXPRESSIONS } from "./bot/expressions";
+export { SHAPES as SPRINGBRAND_PET_SHAPES } from "./bot/skins";
+export { STATES as SPRINGBRAND_PET_STATES } from "./bot/states";

package/springbrand-pet/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -0,0 +1 @@
+{"version":"4.1.10","results":[[":bot/cycles.test.ts",{"duration":44.62495899999999,"failed":false}],[":bot/skins.test.ts",{"duration":3091.3955,"failed":false}],[":bot/engine.test.ts",{"duration":77.19429199999999,"failed":false}],[":bot/shape.test.ts",{"duration":8.478082999999998,"failed":false}],[":bot/expressions.test.ts",{"duration":6.141874999999999,"failed":false}],[":bot/face.test.ts",{"duration":2.4124999999999943,"failed":false}],[":drag.test.ts",{"duration":1.4348750000000052,"failed":false}]]}

package/springbrand-pet/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  root: import.meta.dirname,
+  test: {
+    environment: "node",
+    include: ["bot/*.test.ts", "*.test.ts"],
+  },
+});