@krizaka/ui 3.41.1 → 3.43.0

package/dist/flock.js

@@ -1,14 +1,232 @@
 "use client";
 import {
-  Mascot
-} from "./chunk-M4DBVG43.js";
+  Mascot,
+  PARCEL
+} from "./chunk-MHUUNC5W.js";
 import {
   cn
 } from "./chunk-WU4VLSEA.js";
 
 // src/flock/flock.tsx
+import * as React2 from "react";
+
+// src/flock/scenes.tsx
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+var side = (s, i, j) => s.birds[j].x >= s.birds[i].x ? 1 : -1;
+var towards = (s, i, j) => side(s, i, j) > 0 ? "right" : "left";
+function neighbourOf(s, i) {
+  const at = s.order.indexOf(i);
+  const near = [s.order[at - 1], s.order[at + 1]].filter((n) => n !== void 0);
+  if (!near.length) return null;
+  return near.reduce((a, b) => Math.abs(s.birds[a].x - s.birds[i].x) <= Math.abs(s.birds[b].x - s.birds[i].x) ? a : b);
+}
+var BOOK_MS = 4800;
+var LOG_MS = 3800;
+var GLINT_MS = 3400;
+var SAY_MS = 1500;
+async function read(s, i) {
+  const j = neighbourOf(s, i);
+  s.look(i, "left");
+  s.show(i, "book", BOOK_MS);
+  await s.wait(BOOK_MS * 0.45);
+  if (j !== null && s.random() < 0.5) {
+    s.look(j, towards(s, j, i));
+    await s.wait(1100);
+    s.rest(j);
+  }
+  await s.wait(BOOK_MS * 0.5);
+  s.rest(i);
+}
+async function chat(s, i) {
+  const j = neighbourOf(s, i);
+  s.look(i, j === null ? "up" : towards(s, i, j));
+  s.say(i, "\u2026", SAY_MS);
+  await s.wait(SAY_MS * 0.6);
+  if (j === null) {
+    await s.wait(SAY_MS * 0.6);
+    s.rest(i);
+    return;
+  }
+  s.look(j, towards(s, j, i));
+  await s.wait(SAY_MS * 0.7);
+  s.say(j, s.random() < 0.5 ? "!" : "?", SAY_MS);
+  s.poke(j);
+  await s.wait(SAY_MS * 0.5);
+  s.poke(i);
+  await s.wait(SAY_MS * 0.7);
+  s.rest(i, j);
+}
+async function bow(s, i) {
+  const j = neighbourOf(s, i);
+  const dir = j === null ? 1 : side(s, i, j);
+  const step = `${(s.birds[i].size * 0.14 * dir).toFixed(2)}cqw`;
+  const lean = `rotate(${dir * 11}deg)`;
+  const at = (x, r) => `translateX(${x}) ${r}`;
+  const run = s.move(
+    i,
+    [
+      { transform: at("0cqw", "rotate(0deg)"), easing: "ease-in-out" },
+      { transform: at(step, "rotate(0deg)"), offset: 0.22, easing: "ease-in-out" },
+      { transform: at(step, lean), offset: 0.42, easing: "ease-in-out" },
+      { transform: at(step, lean), offset: 0.6, easing: "ease-in-out" },
+      { transform: at(step, "rotate(0deg)"), offset: 0.74, easing: "ease-in-out" },
+      { transform: at("0cqw", "rotate(0deg)") }
+    ],
+    3800
+  );
+  if (j !== null) {
+    await s.wait(1700);
+    s.look(j, towards(s, j, i));
+    await s.wait(1200);
+    s.poke(j);
+    await s.wait(500);
+    s.rest(j);
+  }
+  await run;
+}
+async function tap(s, i) {
+  s.show(i, "log", LOG_MS, s.birds[i].x > 50 ? 1 : -1);
+  await s.wait(LOG_MS * 0.3);
+  for (let n = 0; n < 3; n++) {
+    s.poke(i, 420);
+    await s.wait(520);
+  }
+  await s.wait(LOG_MS * 0.3);
+}
+async function shine(s, i) {
+  const dir = s.birds[i].x > 50 ? -1 : 1;
+  const to = dir > 0 ? "right" : "left";
+  s.show(i, "glint", GLINT_MS, dir);
+  await s.wait(GLINT_MS * 0.28);
+  s.look(i, to);
+  await s.wait(GLINT_MS * 0.3);
+  s.poke(i);
+  await s.wait(GLINT_MS * 0.25);
+  s.look(i, "up");
+  await s.wait(GLINT_MS * 0.2);
+  s.rest(i);
+}
+async function build(s, i) {
+  for (let n = 0; n < 4; n++) {
+    s.poke(i, 300);
+    await s.wait(380);
+  }
+}
+async function scan(s, i) {
+  for (const to of ["left", "up", "right"]) {
+    s.look(i, to);
+    await s.wait(1100);
+  }
+  s.rest(i);
+}
+async function receive(s, i, from) {
+  const bird = s.birds[i].bird;
+  s.look(i, towards(s, i, from));
+  s.show(i, "gift", 2400);
+  await s.wait(350);
+  if (bird === "crane") await bow(s, i);
+  else if (bird === "magpie") {
+    s.poke(i);
+    await s.wait(700);
+    s.show(i, "glint", GLINT_MS * 0.6, side(s, i, from));
+    await s.wait(1200);
+  } else if (bird === "beaver" || bird === "duck") {
+    s.poke(i, 420);
+    await s.wait(520);
+    s.poke(i, 420);
+    await s.wait(900);
+  } else if (bird === "owl") {
+    s.say(i, "?", SAY_MS);
+    await s.wait(900);
+    s.poke(i);
+    await s.wait(700);
+  } else {
+    s.say(i, "!", SAY_MS);
+    s.poke(i);
+    await s.wait(1500);
+  }
+}
+var BEATS = [
+  { id: "read", bird: "owl", run: read },
+  { id: "chat", bird: "flamingo", run: chat },
+  { id: "chat", bird: "lovebird", run: chat },
+  { id: "bow", bird: "crane", run: bow },
+  { id: "tap", bird: "beaver", run: tap },
+  { id: "shine", bird: "magpie", run: shine },
+  { id: "build", bird: "duck", run: build },
+  { id: "scan", bird: "falcon", run: scan }
+];
+var PAPER = "var(--kz-surface-1)";
+var INK = "var(--kz-text-primary)";
+var LINE = "var(--kz-border-strong, currentColor)";
+function lifeFrames(from, to) {
+  return [
+    { opacity: 0, transform: from, offset: 0 },
+    { opacity: 1, transform: "none", offset: 0.14 },
+    { opacity: 1, transform: "none", offset: 0.84 },
+    { opacity: 0, transform: to, offset: 1 }
+  ];
+}
+var LEAF = [
+  { transform: "scaleX(1)", offset: 0 },
+  { transform: "scaleX(1)", offset: 0.25 },
+  { transform: "scaleX(-1)", offset: 0.38 },
+  { transform: "scaleX(1)", offset: 0.39 },
+  { transform: "scaleX(1)", offset: 0.62 },
+  { transform: "scaleX(-1)", offset: 0.75 },
+  { transform: "scaleX(-1)", offset: 1 }
+];
+function Prop({ shown, size }) {
+  const ref = React.useRef(null);
+  const leaf = React.useRef(null);
+  const dir = shown.side ?? 1;
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof el.animate !== "function") return;
+    const from = {
+      say: ["translateY(30%) scale(.5)", "translateY(-12%) scale(.9)"],
+      book: ["translateY(40%) scale(.8)", "translateY(20%) scale(.9)"],
+      log: [`translateX(${190 * dir}%)`, `translateX(${190 * dir}%)`],
+      glint: ["scale(.2) rotate(-60deg)", `translate(${-90 * dir}%, -170%) scale(.2) rotate(60deg)`],
+      gift: ["translateY(40%) scale(.3)", "translateY(-30%) scale(1.4)"]
+    };
+    const [a, b] = from[shown.kind];
+    const animations = [el.animate(lifeFrames(a, b), { duration: shown.ms, fill: "both", easing: "ease-out" })];
+    if (shown.kind === "book" && leaf.current) animations.push(leaf.current.animate(LEAF, { duration: shown.ms, fill: "both", easing: "ease-in-out" }));
+    if (shown.kind === "glint") animations.push(el.firstElementChild.animate([{ transform: "scale(1)" }, { transform: "scale(1.35)" }, { transform: "scale(1)" }], { duration: 700, iterations: Math.ceil(shown.ms / 700), easing: "ease-in-out" }));
+    return () => animations.forEach((x) => x.cancel());
+  }, [shown, dir]);
+  const unit = (n) => `calc(${size}cqw * ${n})`;
+  const base = { position: "absolute", pointerEvents: "none", opacity: 0 };
+  if (shown.kind === "say")
+    return /* @__PURE__ */ jsxs("div", { ref, "data-flock-prop": "say", style: { ...base, left: "58%", top: "-6%", width: unit(0.34), height: unit(0.24), transformOrigin: "20% 100%" }, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: { position: "absolute", inset: 0, display: "grid", placeItems: "center", background: PAPER, border: `1.5px solid ${LINE}`, borderRadius: "999px", color: INK, font: `600 ${unit(0.17)}/1 var(--font-mono, ui-monospace, monospace)` },
+          children: shown.mark ?? "\u2026"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { style: { position: "absolute", left: "14%", bottom: "-12%", width: unit(0.07), height: unit(0.07), background: PAPER, borderRight: `1.5px solid ${LINE}`, borderBottom: `1.5px solid ${LINE}`, transform: "rotate(45deg)" } })
+    ] });
+  if (shown.kind === "book")
+    return /* @__PURE__ */ jsxs("div", { ref, "data-flock-prop": "book", style: { ...base, left: "17%", bottom: "-2%", width: "66%", height: unit(0.2), transformOrigin: "50% 100%" }, children: [
+      [0, 1].map((n) => /* @__PURE__ */ jsx("span", { style: { position: "absolute", top: 0, bottom: 0, [n ? "right" : "left"]: 0, width: "50%", background: `repeating-linear-gradient(${PAPER} 0 18%, ${LINE} 18% 24%)`, border: `1.5px solid ${LINE}`, borderRadius: n ? "0 3px 3px 0" : "3px 0 0 3px" } }, n)),
+      /* @__PURE__ */ jsx("div", { ref: leaf, style: { position: "absolute", top: 0, bottom: 0, left: "50%", width: "50%", transformOrigin: "0 50%", background: PAPER, border: `1.5px solid ${LINE}`, borderRadius: "0 3px 3px 0" } })
+    ] });
+  if (shown.kind === "log")
+    return /* @__PURE__ */ jsx("div", { ref, "data-flock-prop": "log", style: { ...base, left: "22%", bottom: "-3%", width: "56%", height: unit(0.17), background: PARCEL[2], borderRadius: "999px", boxShadow: `inset -${unit(0.04)} 0 0 ${PARCEL[1]}` }, children: /* @__PURE__ */ jsx("span", { style: { position: "absolute", left: 0, top: 0, bottom: 0, aspectRatio: "1", borderRadius: "50%", background: `radial-gradient(${PARCEL[0]} 0 25%, ${PARCEL[1]} 26% 55%, ${PARCEL[2]} 56%)`, border: `1px solid ${PARCEL[2]}` } }) });
+  if (shown.kind === "glint")
+    return /* @__PURE__ */ jsx("div", { ref, "data-flock-prop": "glint", style: { ...base, [dir > 0 ? "left" : "right"]: "94%", bottom: "2%", width: unit(0.2), height: unit(0.2) }, children: /* @__PURE__ */ jsx("span", { style: { position: "absolute", inset: 0, background: PARCEL[0], clipPath: "polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%)" } }) });
+  return /* @__PURE__ */ jsxs("div", { ref, "data-flock-prop": "gift", style: { ...base, left: "58%", top: "2%", width: unit(0.26), height: unit(0.22), background: PARCEL[0], border: `1.5px solid ${PARCEL[2]}`, borderRadius: 2 }, children: [
+    /* @__PURE__ */ jsx("span", { style: { position: "absolute", left: "44%", top: 0, bottom: 0, width: "12%", background: PARCEL[2] } }),
+    /* @__PURE__ */ jsx("span", { style: { position: "absolute", top: "42%", left: 0, right: 0, height: "16%", background: PARCEL[2] } })
+  ] });
+}
+
+// src/flock/flock.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var GLANCE_HOLD_MS = [1500, 2400];
 var GLANCE_EVERY_MS = [4200, 9e3];
 var COURIER_FIRST_MS = 9e3;
@@ -17,26 +235,32 @@ var FLIGHT_MS = 2600;
 var HAND_OVER_MS = 1300;
 var LOOK_BACK_MS = 1600;
 var between = (random, [lo, hi], tempo = 1) => (lo + random() * (hi - lo)) / tempo;
+var SCENE_EVERY_MS = [2600, 5200];
+var SCENE_PAUSE_MS = [8e3, 12e3];
 var GREET_STEP_MS = 110;
 var POKE_MS = 700;
 function useMayMove() {
-  const [may, setMay] = React.useState(false);
-  React.useEffect(() => {
+  const [may, setMay] = React2.useState(false);
+  React2.useEffect(() => {
     const query = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const update = () => setMay(!query.matches && document.visibilityState !== "hidden");
+    const settled = () => document.documentElement.getAttribute("data-motion") !== "settling";
+    const update = () => setMay(!query.matches && document.visibilityState !== "hidden" && settled());
     update();
     query.addEventListener("change", update);
     document.addEventListener("visibilitychange", update);
+    const watch = typeof MutationObserver === "undefined" ? null : new MutationObserver(update);
+    watch?.observe(document.documentElement, { attributes: true, attributeFilter: ["data-motion"] });
     return () => {
       query.removeEventListener("change", update);
       document.removeEventListener("visibilitychange", update);
+      watch?.disconnect();
     };
   }, []);
   return may;
 }
 function useOnScreen(ref) {
-  const [on, setOn] = React.useState(false);
-  React.useEffect(() => {
+  const [on, setOn] = React2.useState(false);
+  React2.useEffect(() => {
     const el = ref.current;
     if (!el || typeof IntersectionObserver === "undefined") return;
     const observer = new IntersectionObserver(([entry]) => setOn(Boolean(entry?.isIntersecting)), { threshold: 0.1 });
@@ -45,19 +269,61 @@ function useOnScreen(ref) {
   }, [ref]);
   return on;
 }
-function Flock({ birds, ratio = 16 / 9, tone = "brand", glance = true, courier = true, react = true, random = Math.random, tempo = 1, active = null, greet = false, className, style, ...props }) {
-  const stage = React.useRef(null);
-  const bodies = React.useRef([]);
+function Flock({ birds, ratio = 16 / 9, tone = "brand", glance = true, courier = true, react = true, scenes = false, random = Math.random, tempo = 1, active = null, greet = false, className, style, ...props }) {
+  const stage = React2.useRef(null);
+  const bodies = React2.useRef([]);
   const may = useMayMove();
   const onScreen = useOnScreen(stage);
   const running = may && onScreen;
-  const [looks, setLooks] = React.useState({});
-  const [flying, setFlying] = React.useState(null);
-  const [poked, setPoked] = React.useState({});
-  const order = React.useMemo(() => birds.map((_, i) => i).sort((a, b) => birds[a].x - birds[b].x), [birds]);
-  const look = (index, to) => setLooks((l) => l[index] === to ? l : { ...l, [index]: to });
-  const rest = (...indexes) => setLooks((l) => Object.fromEntries(Object.entries(l).filter(([k]) => !indexes.includes(Number(k)))));
-  React.useEffect(() => {
+  const [looks, setLooks] = React2.useState({});
+  const [flying, setFlying] = React2.useState(null);
+  const [poked, setPoked] = React2.useState({});
+  const [shown, setShown] = React2.useState([]);
+  const [empty, setEmpty] = React2.useState({});
+  const held = React2.useRef(/* @__PURE__ */ new Set());
+  const busy = React2.useRef(null);
+  const ids = React2.useRef(0);
+  const order = React2.useMemo(() => birds.map((_, i) => i).sort((a, b) => birds[a].x - birds[b].x), [birds]);
+  const look = React2.useCallback((index, to) => setLooks((l) => l[index] === to ? l : { ...l, [index]: to }), []);
+  const rest = React2.useCallback((...indexes) => setLooks((l) => Object.fromEntries(Object.entries(l).filter(([k]) => !indexes.includes(Number(k))))), []);
+  const stageFor = React2.useCallback((run) => {
+    const later = (fn, ms) => {
+      const t = setTimeout(() => {
+        run.timers.delete(t);
+        fn();
+      }, ms);
+      run.timers.add(t);
+    };
+    const poke = (index, ms = POKE_MS) => {
+      setPoked((p) => ({ ...p, [index]: true }));
+      later(() => setPoked((p) => ({ ...p, [index]: false })), ms);
+    };
+    const show = (index, kind, ms, side2, mark) => {
+      const item = { id: ++ids.current, at: index, kind, ms, side: side2, mark };
+      setShown((all) => [...all, item]);
+      later(() => setShown((all) => all.filter((x) => x.id !== item.id)), ms);
+    };
+    return {
+      birds,
+      order,
+      random,
+      look,
+      rest,
+      poke,
+      show,
+      say: (index, mark, ms) => show(index, "say", ms, void 0, mark),
+      wait: (ms) => new Promise((resolve) => later(resolve, ms)),
+      move: async (index, keyframes, ms) => {
+        const el = bodies.current[index];
+        if (!el || typeof el.animate !== "function") return;
+        const animation = el.animate(keyframes, { duration: ms });
+        run.anims.add(animation);
+        await animation.finished.catch(() => void 0);
+        run.anims.delete(animation);
+      }
+    };
+  }, [birds, order, random, look, rest]);
+  React2.useEffect(() => {
     if (!running || !glance || order.length < 2) return;
     let timer;
     let back;
@@ -65,6 +331,7 @@ function Flock({ birds, ratio = 16 / 9, tone = "brand", glance = true, courier =
       timer = setTimeout(() => {
         const at = Math.floor(random() * (order.length - 1));
         const [a, b] = [order[at], order[at + 1]];
+        if (held.current.has(a) || held.current.has(b)) return next();
         look(a, "right");
         look(b, "left");
         back = setTimeout(() => {
@@ -78,23 +345,28 @@ function Flock({ birds, ratio = 16 / 9, tone = "brand", glance = true, courier =
       clearTimeout(timer);
       clearTimeout(back);
     };
-  }, [running, glance, order, random, tempo]);
-  React.useEffect(() => {
+  }, [running, glance, order, random, tempo, look, rest]);
+  React2.useEffect(() => {
     const pigeon = birds.findIndex((b) => b.bird === "pigeon");
     if (!running || !courier || pigeon < 0 || birds.length < 2) return;
     let alive = true;
+    const heldNow = held.current;
     let timer;
     let animation;
+    const run = { timers: /* @__PURE__ */ new Set(), anims: /* @__PURE__ */ new Set() };
+    const from = birds[pigeon];
+    const target = birds.reduce((far, b, i) => i !== pigeon && Math.abs(b.x - from.x) > Math.abs(birds[far].x - from.x) ? i : far, pigeon === 0 ? 1 : 0);
     const wait = (ms) => new Promise((resolve) => timer = setTimeout(resolve, ms));
     const trip = async () => {
+      while (alive && scenes && busy.current === "scene") await wait(400);
+      if (!alive) return;
+      busy.current = "trip";
       const el = bodies.current[pigeon];
       const box = stage.current?.getBoundingClientRect();
       if (!el || !box || typeof el.animate !== "function") return;
-      const from = birds[pigeon];
-      const target = birds.reduce((far, b, i) => i !== pigeon && Math.abs(b.x - from.x) > Math.abs(birds[far].x - from.x) ? i : far, pigeon === 0 ? 1 : 0);
       const to = birds[target];
-      const side = to.x > from.x ? 1 : -1;
-      const dx = (to.x - from.x) / 100 * box.width - side * (to.size / 100) * box.width * 0.55;
+      const side2 = to.x > from.x ? 1 : -1;
+      const dx = (to.x - from.x) / 100 * box.width - side2 * (to.size / 100) * box.width * 0.55;
       const lift = from.size / 100 * box.width * 0.35;
       const fly = async (fromX, toX) => {
         setFlying({ index: pigeon, bank: Math.sign(toX - fromX) });
@@ -109,21 +381,35 @@ function Flock({ birds, ratio = 16 / 9, tone = "brand", glance = true, courier =
         await animation.finished.catch(() => void 0);
         setFlying(null);
       };
-      look(target, side > 0 ? "left" : "right");
+      look(target, side2 > 0 ? "left" : "right");
+      held.current.add(target);
       await fly(0, dx);
       if (!alive) return;
       setPoked((p) => ({ ...p, [pigeon]: true }));
-      await wait(HAND_OVER_MS);
+      if (scenes) {
+        setEmpty((e) => ({ ...e, [pigeon]: true }));
+        const reaction = receive(stageFor(run), target, pigeon);
+        await wait(HAND_OVER_MS);
+        if (!alive) return;
+        setPoked((p) => ({ ...p, [pigeon]: false }));
+        await reaction;
+      } else {
+        await wait(HAND_OVER_MS);
+        if (!alive) return;
+        setPoked((p) => ({ ...p, [pigeon]: false }));
+      }
       if (!alive) return;
-      setPoked((p) => ({ ...p, [pigeon]: false }));
       look(target, "up");
       await fly(dx, 0);
       animation?.cancel();
+      setEmpty((e) => ({ ...e, [pigeon]: false }));
       rest(target);
     };
     const schedule = (ms) => {
       timer = setTimeout(async () => {
         await trip();
+        busy.current = null;
+        held.current.delete(target);
         if (alive) schedule(between(random, COURIER_EVERY_MS, tempo));
       }, ms);
     };
@@ -132,11 +418,56 @@ function Flock({ birds, ratio = 16 / 9, tone = "brand", glance = true, courier =
       alive = false;
       clearTimeout(timer);
       animation?.cancel();
+      run.timers.forEach(clearTimeout);
+      run.anims.forEach((a) => a.cancel());
+      if (scenes) {
+        setShown([]);
+        setEmpty({});
+        heldNow.clear();
+        busy.current = null;
+      }
       setFlying(null);
     };
-  }, [running, courier, birds, random, tempo]);
-  const greeted = React.useRef(false);
-  React.useEffect(() => {
+  }, [running, courier, birds, random, tempo, scenes, stageFor, look, rest]);
+  React2.useEffect(() => {
+    if (!running || !scenes || birds.length < 1) return;
+    let alive = true;
+    const heldNow = held.current;
+    const run = { timers: /* @__PURE__ */ new Set(), anims: /* @__PURE__ */ new Set() };
+    const st = stageFor(run);
+    const beats = BEATS.flatMap((beat) => birds.flatMap((b, i) => b.bird === beat.bird ? [{ beat, index: i }] : []));
+    if (!beats.length) return;
+    let last = -1;
+    const next = async () => {
+      const long = random() < 0.2;
+      await st.wait(between(random, long ? SCENE_PAUSE_MS : SCENE_EVERY_MS, tempo));
+      while (alive && busy.current === "trip") await st.wait(600);
+      if (!alive) return;
+      const pool = beats.filter((x) => x.index !== last);
+      const pick = (pool.length ? pool : beats)[Math.floor(random() * (pool.length ? pool.length : beats.length))];
+      last = pick.index;
+      busy.current = "scene";
+      const near = neighbourOf(st, pick.index);
+      held.current.add(pick.index);
+      if (near !== null) held.current.add(near);
+      await pick.beat.run(st, pick.index);
+      held.current.delete(pick.index);
+      if (near !== null) held.current.delete(near);
+      if (busy.current === "scene") busy.current = null;
+      if (alive) void next();
+    };
+    void next();
+    return () => {
+      alive = false;
+      run.timers.forEach(clearTimeout);
+      run.anims.forEach((a) => a.cancel());
+      setShown([]);
+      heldNow.clear();
+      busy.current = null;
+    };
+  }, [running, scenes, birds, random, tempo, stageFor]);
+  const greeted = React2.useRef(false);
+  React2.useEffect(() => {
     if (!running || !greet || greeted.current) return;
     greeted.current = true;
     const timers = [];
@@ -146,7 +477,7 @@ function Flock({ birds, ratio = 16 / 9, tone = "brand", glance = true, courier =
     });
     return () => timers.forEach(clearTimeout);
   }, [running, greet, order]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     const index = active ? birds.findIndex((b) => b.bird === active) : -1;
     if (!running || index < 0) return;
     const start = setTimeout(() => {
@@ -160,7 +491,7 @@ function Flock({ birds, ratio = 16 / 9, tone = "brand", glance = true, courier =
       setPoked((p) => ({ ...p, [index]: false }));
       rest(index);
     };
-  }, [active, running, birds]);
+  }, [active, running, birds, look, rest]);
   const hover = (index, event) => {
     if (!running || !react || event.pointerType !== "mouse") return;
     look(index, "up");
@@ -169,7 +500,7 @@ function Flock({ birds, ratio = 16 / 9, tone = "brand", glance = true, courier =
     if (!react) return;
     rest(index);
   };
-  const tap = (index) => {
+  const tap2 = (index) => {
     if (!running || !react) return;
     look(index, "up");
     setPoked((p) => ({ ...p, [index]: true }));
@@ -178,17 +509,18 @@ function Flock({ birds, ratio = 16 / 9, tone = "brand", glance = true, courier =
       rest(index);
     }, LOOK_BACK_MS);
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       ref: stage,
       "aria-hidden": true,
       "data-flock": "",
       "data-running": running ? "" : void 0,
+      "data-motion-scope": "",
       className: cn("relative w-full", className),
       style: { aspectRatio: String(ratio), containerType: "inline-size", ...style },
       ...props,
-      children: birds.map((b, i) => /* @__PURE__ */ jsx(
+      children: birds.map((b, i) => /* @__PURE__ */ jsxs2(
         "div",
         {
           ref: (el) => {
@@ -199,21 +531,25 @@ function Flock({ birds, ratio = 16 / 9, tone = "brand", glance = true, courier =
           style: { left: `${b.x - b.size / 2}%`, width: `${b.size}%`, top: `calc(${b.y}% - ${b.size * 0.9}cqw)`, aspectRatio: "1", pointerEvents: react ? "auto" : "none" },
           onPointerEnter: (event) => hover(i, event),
           onPointerLeave: () => leave(i),
-          onPointerDown: () => tap(i),
-          children: /* @__PURE__ */ jsx(
-            Mascot,
-            {
-              bird: b.bird,
-              tone,
-              life: true,
-              look: looks[i],
-              flying: flying?.index === i,
-              bank: flying?.index === i ? flying.bank : 0,
-              poked: poked[i],
-              size: 120,
-              style: { width: "100%", height: "100%", display: "block", overflow: "visible" }
-            }
-          )
+          onPointerDown: () => tap2(i),
+          children: [
+            /* @__PURE__ */ jsx2(
+              Mascot,
+              {
+                bird: b.bird,
+                tone,
+                life: true,
+                look: looks[i],
+                flying: flying?.index === i,
+                bank: flying?.index === i ? flying.bank : 0,
+                poked: poked[i],
+                carrying: !empty[i],
+                size: 120,
+                style: { width: "100%", height: "100%", display: "block", overflow: "visible" }
+              }
+            ),
+            shown.filter((x) => x.at === i).map((x) => /* @__PURE__ */ jsx2(Prop, { shown: x, size: b.size }, x.id))
+          ]
         },
         `${b.bird}-${i}`
       ))