clip-pal 0.1.0

package/dist/index.js

@@ -0,0 +1,1132 @@
+"use client";
+
+// src/types.ts
+var PAL_GESTURES = {
+  lean: 4e3,
+  // steps up close and stays there while the line is read
+  look: 3200,
+  // glances left and right, with a beat on each side
+  knock: 3400,
+  // walks up, points a finger and taps on the glass
+  kick: 4200,
+  // a ball rolls in, he boots it away
+  crack: 3e3,
+  // thumps the screen hard enough to crack it
+  dance: 3e3,
+  // sways with the leg kicking out
+  wave: 2400,
+  // waves with his leg
+  hop: 2200,
+  // a decaying bounce on the spot
+  spin: 1400,
+  // one pirouette
+  nod: 1600,
+  // yes
+  shake: 1600,
+  // no
+  bow: 2200,
+  // a bow from the foot, held a moment
+  backflip: 1600,
+  // crouch, one full turn in the air, land
+  shiver: 1400,
+  // a quick shudder with the eyes squeezed shut
+  doze: 3200
+  // eyes close, he droops, then jolts awake
+};
+var PAL_POSES = [
+  "unbend",
+  "curl",
+  "heart",
+  "question",
+  "exclaim",
+  "key"
+];
+var PAL_POSE_IN_MS = 900;
+var PAL_POSE_OUT_MS = 700;
+var PAL_EMOTES = [
+  ...Object.keys(PAL_GESTURES),
+  ...PAL_POSES
+];
+function isPose(emote) {
+  return PAL_POSES.includes(emote);
+}
+var PAL_SHAPES = {
+  /** the everyday Gem clip — the default */
+  gem: {
+    body: "M15 62 L15 14 C15 7 19 3 25 3 C31 3 35 7 35 14 L35 50 C35 55 32 58 28 58 C24 58 21 55 21 50 L21 20",
+    leg: "M15 63 C15 70 20 73 27 73 C34 73 41 69 41 61 L41 54",
+    hip: [15, 63],
+    eyes: [
+      { cx: 22, cy: 12, r: 2.4 },
+      { cx: 30, cy: 12, r: 2.4 }
+    ]
+  },
+  /** rounder, chubbier loops */
+  round: {
+    body: "M13 60 L13 18 C13 8 18 3 25 3 C32 3 37 8 37 18 L37 48 C37 55 33 59 28 59 C23 59 20 55 20 49 L20 24",
+    leg: "M13 61 C13 70 19 74 27 74 C35 74 42 69 42 61 L42 55",
+    hip: [13, 61],
+    eyes: [
+      { cx: 21, cy: 13, r: 2.7 },
+      { cx: 29, cy: 13, r: 2.7 }
+    ]
+  },
+  /** a boxy office clip with squared corners */
+  square: {
+    body: "M14 62 L14 8 C14 5 15 4 18 4 C28 4 32 4 32 4 L36 4 C36 20 36 40 36 54 C36 58 34 59 30 59 C22 59 20 58 20 54 L20 18",
+    leg: "M14 63 C14 72 18 74 26 74 C34 74 42 72 42 64 L42 56",
+    hip: [14, 63],
+    eyes: [
+      { cx: 21, cy: 12, r: 2.4 },
+      { cx: 29, cy: 12, r: 2.4 }
+    ]
+  },
+  /** stretched tall and thin */
+  long: {
+    body: "M17 64 L17 12 C17 6 20 2 25 2 C30 2 33 6 33 12 L33 52 C33 56 31 59 28 59 C25 59 23 56 23 52 L23 18",
+    leg: "M17 65 C17 71 21 74 27 74 C33 74 39 70 39 63 L39 56",
+    hip: [17, 65],
+    eyes: [
+      { cx: 22.5, cy: 10, r: 2 },
+      { cx: 27.5, cy: 10, r: 2 }
+    ]
+  }
+};
+function resolveShape(shape) {
+  if (!shape) return PAL_SHAPES.gem;
+  if (typeof shape === "string") return PAL_SHAPES[shape] ?? PAL_SHAPES.gem;
+  return shape;
+}
+var commands = (d) => d.replace(/[^MLCQSTAHVZmlcqstahvz]/g, "");
+function isMorphable(shape) {
+  return commands(shape.body) === commands(PAL_SHAPES.gem.body) && commands(shape.leg) === commands(PAL_SHAPES.gem.leg);
+}
+function gestureMs(gesture, tempo = 1) {
+  return Math.round(PAL_GESTURES[gesture] * tempo);
+}
+function palVars(colors, motion) {
+  const v = {};
+  if (colors?.wire) v["--pal-wire"] = colors.wire;
+  if (colors?.face) v["--pal-face"] = colors.face;
+  if (colors?.ink) v["--pal-ink"] = colors.ink;
+  if (colors?.bubbleBg) v["--pal-bubble-bg"] = colors.bubbleBg;
+  if (colors?.bubbleBorder) v["--pal-bubble-border"] = colors.bubbleBorder;
+  if (colors?.bubbleText) v["--pal-bubble-text"] = colors.bubbleText;
+  if (colors?.bubbleDot) v["--pal-bubble-dot"] = colors.bubbleDot;
+  if (motion?.tempo !== void 0) v["--pal-tempo"] = String(motion.tempo);
+  if (motion?.stepMs !== void 0) v["--pal-step"] = `${motion.stepMs}ms`;
+  if (motion?.swayMs !== void 0) v["--pal-sway"] = `${motion.swayMs}ms`;
+  if (motion?.swayDeg !== void 0) v["--pal-sway-deg"] = `${motion.swayDeg}deg`;
+  if (motion?.blinkMs !== void 0) v["--pal-blink"] = `${motion.blinkMs}ms`;
+  if (motion?.floatMs !== void 0) v["--pal-float"] = `${motion.floatMs}ms`;
+  if (motion?.floatPx !== void 0) v["--pal-float-px"] = `${motion.floatPx}px`;
+  return v;
+}
+
+// src/PalSvg.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var wire = { stroke: "var(--pal-wire, #d9a441)" };
+var face = { fill: "var(--pal-face, #f2ede0)" };
+var faceLine = { stroke: "var(--pal-face, #f2ede0)" };
+var ink = { fill: "var(--pal-ink, #131f1a)" };
+var inkLine = { stroke: "var(--pal-ink, #131f1a)" };
+var warned = false;
+function PalSvg({
+  width = 88,
+  height,
+  walking = false,
+  emote = null,
+  emoteOut = false,
+  shape,
+  strokeWidth = 5,
+  eyes = "dots",
+  colors,
+  motion,
+  className,
+  style
+}) {
+  const h = height ?? Math.round(width * 80 / 50);
+  const sh = resolveShape(shape);
+  if (!warned && !isMorphable(sh)) {
+    warned = true;
+    console.warn(
+      "[clip-pal] custom shape does not keep the M L C C L C C L / M C C L command sequence \u2014 the morphing poses will cut instead of tween."
+    );
+  }
+  const classes = [
+    "pal",
+    walking ? "pal-walking" : "",
+    emote ? `pal-em-${emote}${emoteOut ? "-out" : ""}` : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  const vars = palVars(colors, motion);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width,
+      height: h,
+      viewBox: "0 0 50 80",
+      preserveAspectRatio: height ? "none" : void 0,
+      fill: "none",
+      "aria-hidden": true,
+      className: classes,
+      style: { ...vars, ...style },
+      children: [
+        /* @__PURE__ */ jsx(
+          "g",
+          {
+            className: "pal-crack",
+            style: faceLine,
+            strokeWidth: "1.3",
+            strokeLinecap: "round",
+            fill: "none",
+            children: /* @__PURE__ */ jsx("path", { d: "M42 30 L48.5 30.0 M42 30 L48.5 22.2 M42 30 L42.0 19.0 M42 30 L34.2 22.2 M42 30 L31.0 30.0 M42 30 L34.2 37.8 M42 30 L42.0 41.0 M42 30 L48.5 37.8 M46.5 30.0 L45.2 26.8 L42.0 25.5 L38.8 26.8 L37.5 30.0 L38.8 33.2 L42.0 34.5 L45.2 33.2 Z M48.5 30.0 L48.0 24.0 L42.0 21.5 L36.0 24.0 L33.5 30.0 L36.0 36.0 L42.0 38.5 L48.0 36.0 Z" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "g",
+          {
+            style: wire,
+            strokeWidth,
+            fill: "none",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx("path", { className: "pal-body", d: sh.body }),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "pal-leg",
+                  d: sh.leg,
+                  style: { transformOrigin: `${sh.hip[0]}px ${sh.hip[1]}px` }
+                }
+              )
+            ]
+          }
+        ),
+        eyes === "dots" && sh.eyes.map((e, i) => /* @__PURE__ */ jsx("circle", { className: "pal-eye", cx: e.cx, cy: e.cy, r: e.r, style: face }, i)),
+        /* @__PURE__ */ jsxs("g", { className: "pal-tap", style: faceLine, fill: "none", strokeLinecap: "round", children: [
+          /* @__PURE__ */ jsx("circle", { cx: "45", cy: "45", r: "3.8", strokeWidth: "1.9" }),
+          /* @__PURE__ */ jsx("circle", { cx: "45", cy: "45", r: "6.2", strokeWidth: "1.3" })
+        ] }),
+        /* @__PURE__ */ jsxs("g", { className: "pal-ball", children: [
+          /* @__PURE__ */ jsx("circle", { cx: "42", cy: "71", r: "6.6", style: face }),
+          /* @__PURE__ */ jsx("path", { d: "M42 68 L44.8 70 L43.7 73.4 L40.3 73.4 L39.2 70 Z", style: ink }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M42 68 L42 64.4 M44.8 70 L48.3 68.9 M43.7 73.4 L45.9 76.3 M40.3 73.4 L38.1 76.3 M39.2 70 L35.7 68.9",
+              style: inkLine,
+              strokeWidth: "1",
+              fill: "none"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("g", { className: "pal-zzz", style: face, children: [
+          /* @__PURE__ */ jsx("circle", { className: "pal-zzz-1", cx: "39", cy: "16", r: "1.6" }),
+          /* @__PURE__ */ jsx("circle", { className: "pal-zzz-2", cx: "43", cy: "11", r: "2.2" }),
+          /* @__PURE__ */ jsx("circle", { className: "pal-zzz-3", cx: "46.5", cy: "5.5", r: "2.7" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/PalCompanion.tsx
+import {
+  forwardRef,
+  useEffect as useEffect2,
+  useImperativeHandle,
+  useRef as useRef2,
+  useState
+} from "react";
+
+// src/Bubble.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Bubble({
+  side,
+  hidden,
+  typing,
+  line,
+  box,
+  contentStyle,
+  contentRef,
+  tailInset = 10
+}) {
+  const tailStyle = side === "left" ? { right: tailInset } : side === "right" ? { left: tailInset } : void 0;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: `clip-pal-bubble is-${side} ${hidden ? "pal-bubble-hide" : "pal-say"}`,
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: "clip-pal-bubble-box",
+            style: box ? { width: box.w, height: box.h } : void 0,
+            children: /* @__PURE__ */ jsx2("div", { ref: contentRef, className: "clip-pal-bubble-content", style: contentStyle, children: typing ? /* @__PURE__ */ jsxs2("span", { className: "clip-pal-dots", children: [
+              /* @__PURE__ */ jsx2("span", { className: "clip-pal-dot" }),
+              /* @__PURE__ */ jsx2("span", { className: "clip-pal-dot" }),
+              /* @__PURE__ */ jsx2("span", { className: "clip-pal-dot" })
+            ] }) : /* @__PURE__ */ jsx2("span", { className: "pal-line-in", children: line }) })
+          }
+        ),
+        /* @__PURE__ */ jsx2("span", { className: "clip-pal-tail", style: tailStyle })
+      ]
+    }
+  );
+}
+
+// src/hover.ts
+import { useEffect, useRef } from "react";
+var HOVER_ATTR = "data-pal-say";
+var HOVER_EMOTE_ATTR = "data-pal-emote";
+function useHoverSay(enabled, cooldownMs, onSay) {
+  const cb = useRef(onSay);
+  cb.current = onSay;
+  useEffect(() => {
+    if (!enabled) return;
+    let last = 0;
+    let lastEl = null;
+    const over = (e) => {
+      const t = e.target;
+      if (!(t instanceof Element)) return;
+      const el = t.closest(`[${HOVER_ATTR}]`);
+      if (!el) {
+        lastEl = null;
+        return;
+      }
+      if (el === lastEl) return;
+      const now = performance.now();
+      if (now - last < cooldownMs) return;
+      const text = el.getAttribute(HOVER_ATTR);
+      if (!text) return;
+      last = now;
+      lastEl = el;
+      const raw = el.getAttribute(HOVER_EMOTE_ATTR);
+      const emote = raw && PAL_EMOTES.includes(raw) ? raw : null;
+      cb.current({ text, emote, el });
+    };
+    document.addEventListener("pointerover", over, { passive: true });
+    return () => document.removeEventListener("pointerover", over);
+  }, [enabled, cooldownMs]);
+}
+
+// src/PalCompanion.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var PalCompanion = forwardRef(
+  function PalCompanion2({
+    lines,
+    width = 90,
+    height,
+    showMs = 1e4,
+    gapMs = 2e4,
+    firstMs = 1500,
+    typingMs = 850,
+    emoteDelayMs = 500,
+    bubbleMaxWidth = "15rem",
+    random = true,
+    speak = true,
+    emotes = true,
+    hover = true,
+    hoverCooldownMs = 1200,
+    float = true,
+    sway = true,
+    visibleThreshold = 0.4,
+    shape,
+    strokeWidth,
+    eyes,
+    colors,
+    motion,
+    onSpeak,
+    className,
+    style
+  }, ref) {
+    const rootRef = useRef2(null);
+    const [line, setLine] = useState(lines[0]?.[0] ?? "");
+    const [shown, setShown] = useState(false);
+    const [typing, setTyping] = useState(true);
+    const [emote, setEmote] = useState(
+      null
+    );
+    const pose = useRef2(null);
+    const [turn, setTurn] = useState(0);
+    const lastLine = useRef2(-1);
+    const onScreen = useRef2(false);
+    const p = useRef2({
+      lines,
+      random,
+      speak,
+      emotes,
+      typingMs,
+      emoteDelayMs,
+      tempo: motion?.tempo ?? 1,
+      onSpeak,
+      showMs,
+      gapMs
+    });
+    p.current = {
+      lines,
+      random,
+      speak,
+      emotes,
+      typingMs,
+      emoteDelayMs,
+      tempo: motion?.tempo ?? 1,
+      onSpeak,
+      showMs,
+      gapMs
+    };
+    const timers = useRef2({});
+    const reduced = useRef2(false);
+    const allowed = (name) => {
+      const e = p.current.emotes;
+      if (!name || e === false) return null;
+      if (e === true) return name;
+      return e.includes(name) ? name : null;
+    };
+    const unfold = () => {
+      const t = timers.current;
+      if (pose.current) {
+        setEmote({ name: pose.current, out: true });
+        pose.current = null;
+        t.emoteEnd = setTimeout(() => setEmote(null), PAL_POSE_OUT_MS);
+      } else {
+        setEmote(null);
+      }
+    };
+    const sayNow = (text, acts) => {
+      const t = timers.current;
+      clearTimeout(t.type);
+      clearTimeout(t.emote);
+      clearTimeout(t.emoteEnd);
+      if (p.current.speak) {
+        setLine(text);
+        setTyping(!reduced.current);
+        setTurn((n) => n + 1);
+        setShown(true);
+        if (!reduced.current) {
+          t.type = setTimeout(() => setTyping(false), p.current.typingMs);
+        }
+      }
+      p.current.onSpeak?.(text, acts);
+      const name = reduced.current ? null : allowed(acts);
+      const begin = () => {
+        if (!name) return;
+        setEmote({ name, out: false });
+        if (isPose(name)) {
+          pose.current = name;
+        } else {
+          t.emoteEnd = setTimeout(() => setEmote(null), gestureMs(name, p.current.tempo));
+        }
+      };
+      if (pose.current) {
+        unfold();
+        t.emote = setTimeout(begin, PAL_POSE_OUT_MS);
+      } else {
+        setEmote(null);
+        t.emote = setTimeout(begin, p.current.emoteDelayMs);
+      }
+    };
+    const hushNow = () => {
+      const t = timers.current;
+      clearTimeout(t.type);
+      clearTimeout(t.emote);
+      clearTimeout(t.emoteEnd);
+      setShown(false);
+      unfold();
+    };
+    const schedule = (delay) => {
+      const t = timers.current;
+      clearTimeout(t.phase);
+      t.phase = setTimeout(cycle, delay);
+    };
+    const cycle = () => {
+      if (!onScreen.current) return;
+      const all = p.current.lines;
+      if (all.length === 0) return;
+      let i;
+      if (p.current.random) {
+        i = Math.floor(Math.random() * all.length);
+        if (all.length > 1 && i === lastLine.current) i = (i + 1) % all.length;
+      } else {
+        i = (lastLine.current + 1) % all.length;
+      }
+      lastLine.current = i;
+      const [text, acts] = all[i];
+      sayNow(text, acts);
+      const t = timers.current;
+      clearTimeout(t.phase);
+      t.phase = setTimeout(() => {
+        hushNow();
+        schedule(p.current.gapMs);
+      }, p.current.showMs);
+    };
+    const interrupt = (text, acts) => {
+      sayNow(text, acts);
+      const t = timers.current;
+      clearTimeout(t.phase);
+      t.phase = setTimeout(() => {
+        hushNow();
+        schedule(p.current.gapMs);
+      }, p.current.showMs);
+    };
+    useImperativeHandle(ref, () => ({
+      say: (text, e = null) => interrupt(text, e),
+      emote: (name) => {
+        const t = timers.current;
+        clearTimeout(t.emote);
+        clearTimeout(t.emoteEnd);
+        const n = allowed(name);
+        if (!n) return;
+        const go = () => {
+          setEmote({ name: n, out: false });
+          if (isPose(n)) pose.current = n;
+          else t.emoteEnd = setTimeout(() => setEmote(null), gestureMs(n, p.current.tempo));
+        };
+        if (pose.current) {
+          unfold();
+          t.emote = setTimeout(go, PAL_POSE_OUT_MS);
+        } else {
+          setEmote(null);
+          requestAnimationFrame(go);
+        }
+      },
+      hush: () => {
+        hushNow();
+        schedule(p.current.gapMs);
+      }
+    }));
+    useHoverSay(hover, hoverCooldownMs, ({ text, emote: e }) => {
+      if (!onScreen.current) return;
+      interrupt(text, e);
+    });
+    useEffect2(() => {
+      const el = rootRef.current;
+      if (!el) return;
+      reduced.current = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            if (onScreen.current) return;
+            onScreen.current = true;
+            schedule(firstMs);
+          } else {
+            onScreen.current = false;
+            clearTimeout(timers.current.phase);
+            hushNow();
+          }
+        },
+        { threshold: visibleThreshold }
+      );
+      observer.observe(el);
+      return () => {
+        observer.disconnect();
+        onScreen.current = false;
+        const t = timers.current;
+        clearTimeout(t.phase);
+        clearTimeout(t.type);
+        clearTimeout(t.emote);
+        clearTimeout(t.emoteEnd);
+      };
+    }, [firstMs, visibleThreshold]);
+    const vars = palVars(colors, motion);
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        ref: rootRef,
+        className: `clip-pal-companion${className ? ` ${className}` : ""}`,
+        style: { ...vars, ...style },
+        children: [
+          speak && /* @__PURE__ */ jsx3("div", { className: "clip-pal-companion-bubble", children: /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3(
+            Bubble,
+            {
+              side: "center",
+              hidden: !shown,
+              typing,
+              line,
+              contentStyle: { maxWidth: bubbleMaxWidth }
+            }
+          ) }, turn) }),
+          /* @__PURE__ */ jsx3("div", { className: float ? "pal-float" : void 0, children: /* @__PURE__ */ jsx3("div", { className: sway ? "pal-idle" : void 0, children: /* @__PURE__ */ jsx3(
+            PalSvg,
+            {
+              width,
+              height,
+              emote: emote?.name ?? null,
+              emoteOut: emote?.out ?? false,
+              shape,
+              strokeWidth,
+              eyes
+            }
+          ) }) })
+        ]
+      }
+    );
+  }
+);
+var PalCompanion_default = PalCompanion;
+
+// src/ScrollPal.tsx
+import {
+  forwardRef as forwardRef2,
+  useEffect as useEffect3,
+  useImperativeHandle as useImperativeHandle2,
+  useLayoutEffect,
+  useRef as useRef3,
+  useState as useState2
+} from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var ScrollPal = forwardRef2(function ScrollPal2({
+  stops,
+  idleLines,
+  idle: idleOn = true,
+  idleAfterMs = 12e3,
+  idleWanderMs = 2e4,
+  minViewport = 1600,
+  contentWidth,
+  contentVar = "--content-w",
+  minWidth = 46,
+  maxWidth = 92,
+  gap = 12,
+  edge = 8,
+  side = "auto",
+  offsetY = 0,
+  yLimitPad = 150,
+  zIndex = 40,
+  speed = 480,
+  speedY = 540,
+  ease: easeRate = 6.32,
+  leanMax = 9,
+  walkThreshold = 27,
+  retargetMs = 330,
+  typingMs = 850,
+  emoteDelayMs = 500,
+  bubbleMaxWidth = 260,
+  bubbleMinWidth = 150,
+  random = true,
+  speak = true,
+  emotes = true,
+  hover = true,
+  hoverCooldownMs = 1200,
+  draggable = true,
+  shape,
+  strokeWidth,
+  eyes,
+  colors,
+  motion,
+  onArrive,
+  onLeave,
+  onSpeak,
+  onIdle,
+  className,
+  style
+}, ref) {
+  const wrapRef = useRef3(null);
+  const palRef = useRef3(null);
+  const [line, setLine] = useState2(stops[0]?.lines[0]?.[0] ?? "");
+  const [leftGutter, setLeftGutter] = useState2(true);
+  const [bubbleOn, setBubbleOn] = useState2(true);
+  const [typing, setTyping] = useState2(true);
+  const [arrivalId, setArrivalId] = useState2(0);
+  const [walking, setWalking] = useState2(false);
+  const [emote, setEmote] = useState2(
+    null
+  );
+  const pose = useRef3(null);
+  const [palW, setPalW] = useState2(88);
+  const [bubbleW, setBubbleW] = useState2(240);
+  const [bubSize, setBubSize] = useState2(null);
+  const contentRef = useRef3(null);
+  const target = useRef3({ x: 40, y: 0 });
+  const cur = useRef3({ x: 40, y: 0, lean: 0, facing: 1 });
+  const palWRef = useRef3(88);
+  const nearRef = useRef3(stops[0] ?? { id: "", lines: [] });
+  const idle = useRef3(false);
+  const dragging = useRef3(false);
+  const dropped = useRef3(false);
+  const grab = useRef3({ x: 0, y: 0 });
+  const [grabbed, setGrabbed] = useState2(false);
+  const [roomy, setRoomy] = useState2(false);
+  const [wide, setWide] = useState2(false);
+  const lineIdx = useRef3({});
+  const isWalkingRef = useRef3(false);
+  const p = useRef3({
+    stops,
+    idleLines,
+    random,
+    speak,
+    emotes,
+    tempo: motion?.tempo ?? 1,
+    typingMs,
+    emoteDelayMs,
+    bubbleMaxWidth,
+    bubbleMinWidth,
+    onArrive,
+    onLeave,
+    onSpeak,
+    onIdle
+  });
+  p.current = {
+    stops,
+    idleLines,
+    random,
+    speak,
+    emotes,
+    tempo: motion?.tempo ?? 1,
+    typingMs,
+    emoteDelayMs,
+    bubbleMaxWidth,
+    bubbleMinWidth,
+    onArrive,
+    onLeave,
+    onSpeak,
+    onIdle
+  };
+  const timers = useRef3({});
+  const allowed = (name) => {
+    const e = p.current.emotes;
+    if (!name || e === false) return null;
+    if (e === true) return name;
+    return e.includes(name) ? name : null;
+  };
+  const sayNow = (text, acts) => {
+    const t = timers.current;
+    clearTimeout(t.type);
+    clearTimeout(t.emote);
+    clearTimeout(t.emoteEnd);
+    if (p.current.speak) {
+      setLine(text);
+      setBubbleOn(true);
+      setTyping(true);
+      setBubSize(null);
+      setArrivalId((n) => n + 1);
+      t.type = setTimeout(() => setTyping(false), p.current.typingMs);
+    }
+    p.current.onSpeak?.(text, acts);
+    const name = allowed(acts);
+    const begin = () => {
+      if (!name) return;
+      setEmote({ name, out: false });
+      if (isPose(name)) {
+        pose.current = name;
+      } else {
+        t.emoteEnd = setTimeout(() => setEmote(null), gestureMs(name, p.current.tempo));
+      }
+    };
+    if (pose.current) {
+      setEmote({ name: pose.current, out: true });
+      pose.current = null;
+      t.emote = setTimeout(begin, PAL_POSE_OUT_MS);
+    } else {
+      setEmote(null);
+      t.emote = setTimeout(begin, p.current.emoteDelayMs);
+    }
+  };
+  const hushNow = () => {
+    const t = timers.current;
+    clearTimeout(t.type);
+    clearTimeout(t.emote);
+    clearTimeout(t.emoteEnd);
+    if (pose.current) {
+      setEmote({ name: pose.current, out: true });
+      pose.current = null;
+      t.emoteEnd = setTimeout(() => setEmote(null), PAL_POSE_OUT_MS);
+    } else {
+      setEmote(null);
+    }
+    setBubbleOn(false);
+  };
+  useImperativeHandle2(ref, () => ({
+    say: (text, e = null) => sayNow(text, e),
+    emote: (name) => {
+      const t = timers.current;
+      clearTimeout(t.emote);
+      clearTimeout(t.emoteEnd);
+      const n = allowed(name);
+      if (!n) return;
+      if (pose.current) {
+        setEmote({ name: pose.current, out: true });
+        pose.current = null;
+        t.emote = setTimeout(() => {
+          setEmote({ name: n, out: false });
+          if (isPose(n)) pose.current = n;
+          else t.emoteEnd = setTimeout(() => setEmote(null), gestureMs(n, p.current.tempo));
+        }, PAL_POSE_OUT_MS);
+        return;
+      }
+      setEmote(null);
+      requestAnimationFrame(() => {
+        setEmote({ name: n, out: false });
+        if (isPose(n)) pose.current = n;
+        else t.emoteEnd = setTimeout(() => setEmote(null), gestureMs(n, p.current.tempo));
+      });
+    },
+    hush: hushNow,
+    current: () => nearRef.current.id
+  }));
+  useHoverSay(hover && wide && roomy, hoverCooldownMs, ({ text, emote: e }) => {
+    if (isWalkingRef.current || dragging.current) return;
+    sayNow(text, e);
+  });
+  useLayoutEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    setBubSize({ w: el.offsetWidth + 2, h: el.offsetHeight + 2 });
+  }, [typing, line, bubbleW, palW, arrivalId]);
+  useEffect3(() => {
+    const mq = window.matchMedia(`(min-width: ${minViewport}px)`);
+    const onMq = () => setWide(mq.matches);
+    onMq();
+    mq.addEventListener("change", onMq);
+    return () => mq.removeEventListener("change", onMq);
+  }, [minViewport]);
+  useEffect3(() => {
+    if (!wide) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    if (p.current.stops.length === 0) return;
+    const contentW = () => {
+      if (typeof contentWidth === "number") return contentWidth;
+      if (typeof contentWidth === "function") return contentWidth();
+      const root = getComputedStyle(document.documentElement);
+      const raw = root.getPropertyValue(contentVar).trim();
+      const n = parseFloat(raw);
+      if (!Number.isFinite(n)) return 72 * parseFloat(root.fontSize);
+      return raw.endsWith("px") ? n : n * parseFloat(root.fontSize);
+    };
+    const gutter = () => Math.max(0, (window.innerWidth - contentW()) / 2);
+    const sizePal = () => {
+      const room = gutter() - gap - edge;
+      setRoomy(room >= minWidth);
+      const w = Math.max(minWidth, Math.min(maxWidth, Math.floor(room)));
+      if (w !== palWRef.current) {
+        palWRef.current = w;
+        setPalW(w);
+      }
+    };
+    const parkLeft = () => Math.max(edge, gutter() - gap - palWRef.current);
+    const parkRight = () => Math.min(
+      window.innerWidth - edge - palWRef.current,
+      window.innerWidth - gutter() + gap
+    );
+    const fitBubble = (x, onLeft) => {
+      const pw = palWRef.current;
+      const space = onLeft ? x + pw - edge : window.innerWidth - x - pw - edge;
+      const { bubbleMinWidth: lo, bubbleMaxWidth: hi } = p.current;
+      setBubbleW(Math.round(Math.max(lo, Math.min(hi, space))));
+    };
+    const computeTarget = () => {
+      sizePal();
+      const all = p.current.stops;
+      const h = window.innerHeight;
+      const vc = h / 2;
+      let near = null;
+      let fallback = all[0];
+      let bestD = Infinity;
+      for (const s of all) {
+        const el = document.getElementById(s.id);
+        if (!el) continue;
+        const r = el.getBoundingClientRect();
+        if (vc >= r.top && vc <= r.bottom) {
+          near = s;
+          break;
+        }
+        const d = Math.min(Math.abs(r.top - vc), Math.abs(r.bottom - vc));
+        if (d < bestD) {
+          bestD = d;
+          fallback = s;
+        }
+      }
+      if (near === null) near = fallback;
+      const atBottom = h + window.scrollY >= document.documentElement.scrollHeight - 2;
+      if (atBottom) near = all[all.length - 1];
+      const pw = palWRef.current;
+      const a = document.getElementById(near.anchor)?.getBoundingClientRect();
+      const place = side === "left" ? "gutter-left" : side === "right" ? "gutter-right" : near.place;
+      let x;
+      if (place === "gutter-left") x = parkLeft();
+      else if (place === "gutter-right") x = parkRight();
+      else if (a) x = Math.min(window.innerWidth - edge - pw, a.right + (near.gap ?? 26));
+      else x = parkLeft();
+      const yCenter = a ? a.top + a.height / 2 : vc;
+      const yLimit = h / 2 - yLimitPad;
+      const y = Math.max(-yLimit, Math.min(yLimit, yCenter - vc + offsetY));
+      target.current = { x, y };
+      nearRef.current = near;
+      const onLeft = place === "gutter-left";
+      setLeftGutter(onLeft);
+      fitBubble(x, onLeft);
+    };
+    let idleTimer;
+    const wanderSpot = () => {
+      sizePal();
+      const onLeftNow = cur.current.x < window.innerWidth / 2;
+      const x = onLeftNow ? parkRight() : parkLeft();
+      const yLimit = window.innerHeight / 2 - yLimitPad - 30;
+      target.current = {
+        x,
+        y: Math.round((Math.random() * 2 - 1) * Math.max(0, yLimit))
+      };
+      const left = !onLeftNow;
+      setLeftGutter(left);
+      fitBubble(x, left);
+      nearRef.current = { id: "idle", lines: p.current.idleLines ?? [] };
+    };
+    const idleTick = () => {
+      if (!idle.current) return;
+      wanderSpot();
+      idleTimer = setTimeout(idleTick, idleWanderMs);
+    };
+    const enterIdle = () => {
+      if (idle.current || !idleOn || !p.current.idleLines?.length) return;
+      idle.current = true;
+      p.current.onIdle?.();
+      wanderSpot();
+      idleTimer = setTimeout(idleTick, idleWanderMs);
+    };
+    const exitIdle = () => {
+      if (!idle.current) return;
+      idle.current = false;
+      computeTarget();
+    };
+    const activity = () => {
+      clearTimeout(idleTimer);
+      exitIdle();
+      idleTimer = setTimeout(enterIdle, idleAfterMs);
+    };
+    let raf = 0;
+    let wasWalking = false;
+    let shownStop = null;
+    let last = performance.now();
+    let lastRetarget = 0;
+    const loop = (now) => {
+      const c = cur.current;
+      const dt = Math.min(0.05, Math.max(1e-3, (now - last) / 1e3));
+      last = now;
+      if (dragging.current) {
+        target.current.x = c.x;
+        target.current.y = c.y;
+        if (wrapRef.current) {
+          wrapRef.current.style.transform = `translate(${c.x}px, calc(-50% + ${c.y}px))`;
+        }
+        raf = requestAnimationFrame(loop);
+        return;
+      }
+      if (now - lastRetarget > retargetMs) {
+        lastRetarget = now;
+        if (!idle.current && !dropped.current) computeTarget();
+      }
+      const ease = 1 - Math.exp(-easeRate * dt);
+      const dx = target.current.x - c.x;
+      let vx = dx * ease / dt;
+      if (vx > speed) vx = speed;
+      if (vx < -speed) vx = -speed;
+      if (Math.abs(dx) > 0.4) c.x += vx * dt;
+      let vy = (target.current.y - c.y) * ease / dt;
+      if (vy > speedY) vy = speedY;
+      if (vy < -speedY) vy = -speedY;
+      c.y += vy * dt;
+      const leanTarget = Math.max(-leanMax, Math.min(leanMax, vx / speed * leanMax * 1.42));
+      c.lean += (leanTarget - c.lean) * (1 - Math.exp(-(easeRate * 1.21) * dt));
+      if (Math.abs(vx) > walkThreshold * 1.33) c.facing = vx > 0 ? 1 : -1;
+      const isWalking = Math.abs(vx) > walkThreshold;
+      isWalkingRef.current = isWalking;
+      if (isWalking !== wasWalking) {
+        wasWalking = isWalking;
+        setWalking(isWalking);
+        if (isWalking) {
+          hushNow();
+          if (shownStop) p.current.onLeave?.(shownStop);
+          shownStop = null;
+        }
+      }
+      if (!isWalking && shownStop !== nearRef.current.id) {
+        const s = nearRef.current;
+        shownStop = s.id;
+        p.current.onArrive?.(s.id);
+        if (s.lines.length > 0) {
+          const prev = lineIdx.current[s.id];
+          let i;
+          if (p.current.random) {
+            i = Math.floor(Math.random() * s.lines.length);
+            if (s.lines.length > 1 && i === prev) i = (i + 1) % s.lines.length;
+          } else {
+            i = prev === void 0 ? 0 : (prev + 1) % s.lines.length;
+          }
+          lineIdx.current[s.id] = i;
+          const [text, acts] = s.lines[i];
+          sayNow(text, acts);
+        }
+      }
+      if (wrapRef.current) {
+        wrapRef.current.style.transform = `translate(${c.x}px, calc(-50% + ${c.y}px))`;
+      }
+      if (palRef.current) {
+        palRef.current.style.transform = `rotate(${c.lean}deg) scaleX(${c.facing})`;
+      }
+      raf = requestAnimationFrame(loop);
+    };
+    computeTarget();
+    cur.current.x = target.current.x;
+    cur.current.y = target.current.y;
+    raf = requestAnimationFrame(loop);
+    const onScroll = () => {
+      activity();
+      dropped.current = false;
+      computeTarget();
+    };
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", computeTarget);
+    window.addEventListener("mousemove", activity, { passive: true });
+    window.addEventListener("keydown", activity);
+    window.addEventListener("pointerdown", activity, { passive: true });
+    window.addEventListener("touchstart", activity, { passive: true });
+    window.addEventListener("wheel", activity, { passive: true });
+    idleTimer = setTimeout(enterIdle, idleAfterMs);
+    return () => {
+      cancelAnimationFrame(raf);
+      const t = timers.current;
+      clearTimeout(t.type);
+      clearTimeout(idleTimer);
+      clearTimeout(t.emote);
+      clearTimeout(t.emoteEnd);
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", computeTarget);
+      window.removeEventListener("mousemove", activity);
+      window.removeEventListener("keydown", activity);
+      window.removeEventListener("pointerdown", activity);
+      window.removeEventListener("touchstart", activity);
+      window.removeEventListener("wheel", activity);
+    };
+  }, [
+    wide,
+    contentWidth,
+    contentVar,
+    minWidth,
+    maxWidth,
+    gap,
+    edge,
+    side,
+    offsetY,
+    yLimitPad,
+    speed,
+    speedY,
+    easeRate,
+    leanMax,
+    walkThreshold,
+    retargetMs,
+    idleOn,
+    idleAfterMs,
+    idleWanderMs
+  ]);
+  const onPointerDown = (e) => {
+    if (!draggable) return;
+    e.preventDefault();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    grab.current = {
+      x: e.clientX - cur.current.x,
+      y: e.clientY - (window.innerHeight / 2 + cur.current.y)
+    };
+    dragging.current = true;
+    dropped.current = true;
+    setGrabbed(true);
+  };
+  const onPointerMove = (e) => {
+    if (!dragging.current) return;
+    cur.current.x = e.clientX - grab.current.x;
+    cur.current.y = e.clientY - grab.current.y - window.innerHeight / 2;
+  };
+  const endDrag = (e) => {
+    if (!dragging.current) return;
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+    dragging.current = false;
+    setGrabbed(false);
+  };
+  const bubbleSide = leftGutter ? "left" : "right";
+  const vars = palVars(colors, motion);
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref: wrapRef,
+      className: `clip-pal-scroll${className ? ` ${className}` : ""}`,
+      "data-on": wide && roomy ? "" : void 0,
+      style: { ...vars, transform: "translate(40px, -50%)", zIndex, ...style },
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsxs4("div", { className: "clip-pal-anchor", children: [
+        speak && /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: "clip-pal-bubble-wrap",
+            style: leftGutter ? { right: 0 } : { left: 0 },
+            children: /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
+              Bubble,
+              {
+                side: bubbleSide,
+                hidden: !bubbleOn,
+                typing,
+                line,
+                box: bubSize,
+                contentRef,
+                contentStyle: {
+                  maxWidth: bubbleW,
+                  // never narrower than the pal — keeps the tail well inside
+                  // the bubble even with just the typing dots
+                  minWidth: palW + 8
+                },
+                tailInset: Math.max(10, palW / 2 - 7)
+              }
+            ) }, arrivalId)
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            ref: palRef,
+            onPointerDown,
+            onPointerMove,
+            onPointerUp: endDrag,
+            onPointerCancel: endDrag,
+            className: `clip-pal-grab${grabbed ? " is-grabbed" : ""}`,
+            style: draggable ? void 0 : { cursor: "default" },
+            children: /* @__PURE__ */ jsx4("div", { className: walking ? "pal-walk" : "pal-idle", children: /* @__PURE__ */ jsx4(
+              PalSvg,
+              {
+                width: palW,
+                walking,
+                emote: emote?.name ?? null,
+                emoteOut: emote?.out ?? false,
+                shape,
+                strokeWidth,
+                eyes
+              }
+            ) })
+          }
+        )
+      ] })
+    }
+  );
+});
+var ScrollPal_default = ScrollPal;
+export {
+  Bubble,
+  HOVER_ATTR,
+  HOVER_EMOTE_ATTR,
+  PAL_EMOTES,
+  PAL_GESTURES,
+  PAL_POSES,
+  PAL_POSE_IN_MS,
+  PAL_POSE_OUT_MS,
+  PAL_SHAPES,
+  PalCompanion_default as PalCompanion,
+  PalSvg,
+  ScrollPal_default as ScrollPal,
+  gestureMs,
+  isMorphable,
+  isPose,
+  palVars,
+  resolveShape,
+  useHoverSay
+};
+//# sourceMappingURL=index.js.map