clip-pal 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1162 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Bubble: () => Bubble,
+  HOVER_ATTR: () => HOVER_ATTR,
+  HOVER_EMOTE_ATTR: () => HOVER_EMOTE_ATTR,
+  PAL_EMOTES: () => PAL_EMOTES,
+  PAL_GESTURES: () => PAL_GESTURES,
+  PAL_POSES: () => PAL_POSES,
+  PAL_POSE_IN_MS: () => PAL_POSE_IN_MS,
+  PAL_POSE_OUT_MS: () => PAL_POSE_OUT_MS,
+  PAL_SHAPES: () => PAL_SHAPES,
+  PalCompanion: () => PalCompanion_default,
+  PalSvg: () => PalSvg,
+  ScrollPal: () => ScrollPal_default,
+  gestureMs: () => gestureMs,
+  isMorphable: () => isMorphable,
+  isPose: () => isPose,
+  palVars: () => palVars,
+  resolveShape: () => resolveShape,
+  useHoverSay: () => useHoverSay
+});
+module.exports = __toCommonJS(src_exports);
+
+// 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
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+          "g",
+          {
+            className: "pal-crack",
+            style: faceLine,
+            strokeWidth: "1.3",
+            strokeLinecap: "round",
+            fill: "none",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
+          "g",
+          {
+            style: wire,
+            strokeWidth,
+            fill: "none",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: "pal-body", d: sh.body }),
+              /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("circle", { className: "pal-eye", cx: e.cx, cy: e.cy, r: e.r, style: face }, i)),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: "pal-tap", style: faceLine, fill: "none", strokeLinecap: "round", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "45", cy: "45", r: "3.8", strokeWidth: "1.9" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "45", cy: "45", r: "6.2", strokeWidth: "1.3" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: "pal-ball", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "42", cy: "71", r: "6.6", style: face }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M42 68 L44.8 70 L43.7 73.4 L40.3 73.4 L39.2 70 Z", style: ink }),
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("g", { className: "pal-zzz", style: face, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "pal-zzz-1", cx: "39", cy: "16", r: "1.6" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "pal-zzz-2", cx: "43", cy: "11", r: "2.2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "pal-zzz-3", cx: "46.5", cy: "5.5", r: "2.7" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/PalCompanion.tsx
+var import_react2 = require("react");
+
+// src/Bubble.tsx
+var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: `clip-pal-bubble is-${side} ${hidden ? "pal-bubble-hide" : "pal-say"}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            className: "clip-pal-bubble-box",
+            style: box ? { width: box.w, height: box.h } : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: contentRef, className: "clip-pal-bubble-content", style: contentStyle, children: typing ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "clip-pal-dots", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "clip-pal-dot" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "clip-pal-dot" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "clip-pal-dot" })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "pal-line-in", children: line }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "clip-pal-tail", style: tailStyle })
+      ]
+    }
+  );
+}
+
+// src/hover.ts
+var import_react = require("react");
+var HOVER_ATTR = "data-pal-say";
+var HOVER_EMOTE_ATTR = "data-pal-emote";
+function useHoverSay(enabled, cooldownMs, onSay) {
+  const cb = (0, import_react.useRef)(onSay);
+  cb.current = onSay;
+  (0, import_react.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
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var PalCompanion = (0, import_react2.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 = (0, import_react2.useRef)(null);
+    const [line, setLine] = (0, import_react2.useState)(lines[0]?.[0] ?? "");
+    const [shown, setShown] = (0, import_react2.useState)(false);
+    const [typing, setTyping] = (0, import_react2.useState)(true);
+    const [emote, setEmote] = (0, import_react2.useState)(
+      null
+    );
+    const pose = (0, import_react2.useRef)(null);
+    const [turn, setTurn] = (0, import_react2.useState)(0);
+    const lastLine = (0, import_react2.useRef)(-1);
+    const onScreen = (0, import_react2.useRef)(false);
+    const p = (0, import_react2.useRef)({
+      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 = (0, import_react2.useRef)({});
+    const reduced = (0, import_react2.useRef)(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);
+    };
+    (0, import_react2.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);
+    });
+    (0, import_react2.useEffect)(() => {
+      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__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        ref: rootRef,
+        className: `clip-pal-companion${className ? ` ${className}` : ""}`,
+        style: { ...vars, ...style },
+        children: [
+          speak && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "clip-pal-companion-bubble", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            Bubble,
+            {
+              side: "center",
+              hidden: !shown,
+              typing,
+              line,
+              contentStyle: { maxWidth: bubbleMaxWidth }
+            }
+          ) }, turn) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: float ? "pal-float" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: sway ? "pal-idle" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            PalSvg,
+            {
+              width,
+              height,
+              emote: emote?.name ?? null,
+              emoteOut: emote?.out ?? false,
+              shape,
+              strokeWidth,
+              eyes
+            }
+          ) }) })
+        ]
+      }
+    );
+  }
+);
+var PalCompanion_default = PalCompanion;
+
+// src/ScrollPal.tsx
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ScrollPal = (0, import_react3.forwardRef)(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 = (0, import_react3.useRef)(null);
+  const palRef = (0, import_react3.useRef)(null);
+  const [line, setLine] = (0, import_react3.useState)(stops[0]?.lines[0]?.[0] ?? "");
+  const [leftGutter, setLeftGutter] = (0, import_react3.useState)(true);
+  const [bubbleOn, setBubbleOn] = (0, import_react3.useState)(true);
+  const [typing, setTyping] = (0, import_react3.useState)(true);
+  const [arrivalId, setArrivalId] = (0, import_react3.useState)(0);
+  const [walking, setWalking] = (0, import_react3.useState)(false);
+  const [emote, setEmote] = (0, import_react3.useState)(
+    null
+  );
+  const pose = (0, import_react3.useRef)(null);
+  const [palW, setPalW] = (0, import_react3.useState)(88);
+  const [bubbleW, setBubbleW] = (0, import_react3.useState)(240);
+  const [bubSize, setBubSize] = (0, import_react3.useState)(null);
+  const contentRef = (0, import_react3.useRef)(null);
+  const target = (0, import_react3.useRef)({ x: 40, y: 0 });
+  const cur = (0, import_react3.useRef)({ x: 40, y: 0, lean: 0, facing: 1 });
+  const palWRef = (0, import_react3.useRef)(88);
+  const nearRef = (0, import_react3.useRef)(stops[0] ?? { id: "", lines: [] });
+  const idle = (0, import_react3.useRef)(false);
+  const dragging = (0, import_react3.useRef)(false);
+  const dropped = (0, import_react3.useRef)(false);
+  const grab = (0, import_react3.useRef)({ x: 0, y: 0 });
+  const [grabbed, setGrabbed] = (0, import_react3.useState)(false);
+  const [roomy, setRoomy] = (0, import_react3.useState)(false);
+  const [wide, setWide] = (0, import_react3.useState)(false);
+  const lineIdx = (0, import_react3.useRef)({});
+  const isWalkingRef = (0, import_react3.useRef)(false);
+  const p = (0, import_react3.useRef)({
+    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 = (0, import_react3.useRef)({});
+  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);
+  };
+  (0, import_react3.useImperativeHandle)(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);
+  });
+  (0, import_react3.useLayoutEffect)(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    setBubSize({ w: el.offsetWidth + 2, h: el.offsetHeight + 2 });
+  }, [typing, line, bubbleW, palW, arrivalId]);
+  (0, import_react3.useEffect)(() => {
+    const mq = window.matchMedia(`(min-width: ${minViewport}px)`);
+    const onMq = () => setWide(mq.matches);
+    onMq();
+    mq.addEventListener("change", onMq);
+    return () => mq.removeEventListener("change", onMq);
+  }, [minViewport]);
+  (0, import_react3.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime4.jsx)(
+    "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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "clip-pal-anchor", children: [
+        speak && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            className: "clip-pal-bubble-wrap",
+            style: leftGutter ? { right: 0 } : { left: 0 },
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              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__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            ref: palRef,
+            onPointerDown,
+            onPointerMove,
+            onPointerUp: endDrag,
+            onPointerCancel: endDrag,
+            className: `clip-pal-grab${grabbed ? " is-grabbed" : ""}`,
+            style: draggable ? void 0 : { cursor: "default" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: walking ? "pal-walk" : "pal-idle", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              PalSvg,
+              {
+                width: palW,
+                walking,
+                emote: emote?.name ?? null,
+                emoteOut: emote?.out ?? false,
+                shape,
+                strokeWidth,
+                eyes
+              }
+            ) })
+          }
+        )
+      ] })
+    }
+  );
+});
+var ScrollPal_default = ScrollPal;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Bubble,
+  HOVER_ATTR,
+  HOVER_EMOTE_ATTR,
+  PAL_EMOTES,
+  PAL_GESTURES,
+  PAL_POSES,
+  PAL_POSE_IN_MS,
+  PAL_POSE_OUT_MS,
+  PAL_SHAPES,
+  PalCompanion,
+  PalSvg,
+  ScrollPal,
+  gestureMs,
+  isMorphable,
+  isPose,
+  palVars,
+  resolveShape,
+  useHoverSay
+});
+//# sourceMappingURL=index.cjs.map