@nice2dev/ui-graphics 1.3.14 → 1.3.16

package/dist/esm/animation/AnimationEditor.js

@@ -1,113 +1,303 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { NiceTextInput, NiceSlider, NiceButton, NiceTextArea, NiceSelect, NiceColorPicker } from '@nice2dev/ui';
-import { NiceIcon } from '@nice2dev/ui-core';
-import { useState, useEffect } from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import NiceAnimatedPerson from './AnimatedPerson.js';
-import { DEFAULT_CHARACTER, VARIANTS } from './characterTypes.js';
-
-const STORAGE_KEY = 'nice2dev.animation-editor.character';
-/* ---------- helpers ---------- */
+import { jsxs, jsx } from "react/jsx-runtime";
+import { NiceTextInput, NiceSlider, NiceButton, NiceTextArea, NiceSelect, NiceColorPicker } from "@nice2dev/ui";
+import { NiceIcon } from "@nice2dev/ui-core";
+import { useState, useEffect } from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import NiceAnimatedPerson from "./AnimatedPerson.js";
+import { DEFAULT_CHARACTER, VARIANTS } from "./characterTypes.js";
+const STORAGE_KEY = "nice2dev.animation-editor.character";
 function clampPalette(colors) {
-    const c = (colors || []).slice(0, 3);
-    if (c.length === 0) {
-        c.push('var(--anim-default-black, #000000)');
-    }
-    while (c.length < 3) {
-        c.push(c[c.length - 1]);
-    }
-    return c;
+  const c = (colors || []).slice(0, 3);
+  if (c.length === 0) {
+    c.push("var(--anim-default-black, #000000)");
+  }
+  while (c.length < 3) {
+    c.push(c[c.length - 1]);
+  }
+  return c;
 }
 function ColorInputs({ value, onChange }) {
-    var _a;
-    const base = clampPalette(value);
-    const count = Math.min(3, Math.max(1, (_a = value === null || value === void 0 ? void 0 : value.length) !== null && _a !== void 0 ? _a : 1));
-    const view = base.slice(0, count);
-    return (jsxs("div", { className: "ntd-ae-color-inputs", children: [jsx("div", { className: "ntd-ae-colors", children: view.map((col, i) => (jsxs("label", { className: "ntd-ae-color-label", children: ["C", i + 1, jsx(NiceColorPicker, { value: col, onChange: (color) => {
-                                const next = [...view];
-                                next[i] = color;
-                                onChange(next);
-                            } })] }, i))) }), jsxs("div", { className: "ntd-ae-color-btns", children: [jsx(NiceButton, { variant: "ghost", size: "sm", disabled: count <= 1, onClick: () => onChange(view.slice(0, Math.max(1, count - 1))), children: "-" }), jsx(NiceButton, { variant: "ghost", size: "sm", disabled: count >= 3, onClick: () => onChange([...view, view[view.length - 1] || 'var(--anim-default-black, #000000)']), children: "+" })] })] }));
+  const base = clampPalette(value);
+  const count = Math.min(3, Math.max(1, value?.length ?? 1));
+  const view = base.slice(0, count);
+  return /* @__PURE__ */ jsxs("div", { className: "ntd-ae-color-inputs", children: [
+    /* @__PURE__ */ jsx("div", { className: "ntd-ae-colors", children: view.map((col, i) => /* @__PURE__ */ jsxs("label", { className: "ntd-ae-color-label", children: [
+      "C",
+      i + 1,
+      /* @__PURE__ */ jsx(
+        NiceColorPicker,
+        {
+          value: col,
+          onChange: (color) => {
+            const next = [...view];
+            next[i] = color;
+            onChange(next);
+          }
+        }
+      )
+    ] }, i)) }),
+    /* @__PURE__ */ jsxs("div", { className: "ntd-ae-color-btns", children: [
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          variant: "ghost",
+          size: "sm",
+          disabled: count <= 1,
+          onClick: () => onChange(view.slice(0, Math.max(1, count - 1))),
+          children: "-"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NiceButton,
+        {
+          variant: "ghost",
+          size: "sm",
+          disabled: count >= 3,
+          onClick: () => onChange([...view, view[view.length - 1] || "var(--anim-default-black, #000000)"]),
+          children: "+"
+        }
+      )
+    ] })
+  ] });
 }
 function Row({ title, children }) {
-    return (jsxs("div", { className: "ntd-ae-row", children: [jsx("div", { className: "ntd-ae-row-title", children: title }), jsx("div", { className: "ntd-ae-row-content", children: children })] }));
+  return /* @__PURE__ */ jsxs("div", { className: "ntd-ae-row", children: [
+    /* @__PURE__ */ jsx("div", { className: "ntd-ae-row-title", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "ntd-ae-row-content", children })
+  ] });
 }
-function FeatureEditor({ title, feature, variants, onChange, }) {
-    const options = variants.map((v) => ({ value: v, label: v }));
-    return (jsxs(Row, { title: title, children: [jsx(NiceSelect, { className: "ntd-ae-select", value: feature.variant, onChange: (val) => onChange({ ...feature, variant: val }), options: options }), jsx(ColorInputs, { value: feature.colors, onChange: (colors) => onChange({ ...feature, colors }) })] }));
+function FeatureEditor({
+  title,
+  feature,
+  variants,
+  onChange
+}) {
+  const options = variants.map((v) => ({ value: v, label: v }));
+  return /* @__PURE__ */ jsxs(Row, { title, children: [
+    /* @__PURE__ */ jsx(
+      NiceSelect,
+      {
+        className: "ntd-ae-select",
+        value: feature.variant,
+        onChange: (val) => onChange({ ...feature, variant: val }),
+        options
+      }
+    ),
+    /* @__PURE__ */ jsx(ColorInputs, { value: feature.colors, onChange: (colors) => onChange({ ...feature, colors }) })
+  ] });
 }
-/* ---------- component ---------- */
-function NiceAnimationEditor({ initialConfig, onChange, storageKey = STORAGE_KEY, onNotify, showJsonPanel = true, showPreview = true, className, style, }) {
-    var _a, _b;
-    const { t } = useNiceTranslation();
-    const [json, setJson] = useState('');
-    const [cfg, setCfg] = useState(() => {
-        if (initialConfig) {
-            return initialConfig;
-        }
-        if (storageKey) {
-            try {
-                const saved = localStorage.getItem(storageKey);
-                return saved ? JSON.parse(saved) : DEFAULT_CHARACTER;
-            }
-            catch (_a) {
-                return DEFAULT_CHARACTER;
-            }
-        }
+function NiceAnimationEditor({
+  initialConfig,
+  onChange,
+  storageKey = STORAGE_KEY,
+  onNotify,
+  showJsonPanel = true,
+  showPreview = true,
+  className,
+  style
+}) {
+  const { t } = useNiceTranslation();
+  const [json, setJson] = useState("");
+  const [cfg, setCfg] = useState(() => {
+    if (initialConfig) {
+      return initialConfig;
+    }
+    if (storageKey) {
+      try {
+        const saved = localStorage.getItem(storageKey);
+        return saved ? JSON.parse(saved) : DEFAULT_CHARACTER;
+      } catch {
         return DEFAULT_CHARACTER;
+      }
+    }
+    return DEFAULT_CHARACTER;
+  });
+  useEffect(() => {
+    setJson(JSON.stringify(cfg, null, 2));
+    if (storageKey) {
+      try {
+        localStorage.setItem(storageKey, JSON.stringify(cfg));
+      } catch {
+      }
+    }
+    onChange?.(cfg);
+  }, [cfg, storageKey, onChange]);
+  const applyJson = () => {
+    try {
+      const parsed = JSON.parse(json);
+      setCfg(parsed);
+      onNotify?.(t("characterEditor.jsonApplied", "JSON applied"), "success");
+    } catch {
+      onNotify?.(t("characterEditor.invalidJson", "Invalid JSON"), "error");
+    }
+  };
+  const downloadJson = () => {
+    const blob = new Blob([JSON.stringify(cfg, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${cfg.name || "character"}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  const randomizeColors = () => {
+    const rand = () => `#${Math.floor(Math.random() * 16777215).toString(16).padStart(6, "0")}`;
+    const paint = (f) => ({ ...f, colors: [rand(), rand(), rand()] });
+    setCfg({
+      ...cfg,
+      face: paint(cfg.face),
+      hair: paint(cfg.hair),
+      eyes: paint(cfg.eyes),
+      nose: paint(cfg.nose),
+      mouth: paint(cfg.mouth),
+      outfit: paint(cfg.outfit),
+      headwear: paint(cfg.headwear),
+      prop: paint(cfg.prop)
     });
-    useEffect(() => {
-        setJson(JSON.stringify(cfg, null, 2));
-        if (storageKey) {
-            try {
-                localStorage.setItem(storageKey, JSON.stringify(cfg));
-            }
-            catch (_a) {
-                /* ignore */
-            }
+  };
+  const updateFeature = (key, val) => {
+    setCfg((prev) => ({ ...prev, [key]: val }));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `ntd-animation-editor ${className ?? ""}`, style, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ntd-ae-controls", children: [
+      /* @__PURE__ */ jsx(Row, { title: t("characterEditor.name", "Name"), children: /* @__PURE__ */ jsx(
+        NiceTextInput,
+        {
+          className: "ntd-ae-input",
+          value: cfg.name || "",
+          onChange: (val) => setCfg({ ...cfg, name: val }),
+          placeholder: t("characterEditor.namePlaceholder", "Character name")
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(Row, { title: t("characters.size", "Size"), children: [
+        /* @__PURE__ */ jsx(
+          NiceSlider,
+          {
+            min: 140,
+            max: 300,
+            value: cfg.size ?? 180,
+            onChange: (val) => setCfg({ ...cfg, size: val })
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "ntd-ae-size-value", children: [
+          cfg.size ?? 180,
+          "px"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        FeatureEditor,
+        {
+          title: t("characters.faceShape", "Face"),
+          feature: cfg.face,
+          variants: VARIANTS.face,
+          onChange: (v) => updateFeature("face", v)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FeatureEditor,
+        {
+          title: t("characters.hairstyle", "Hair"),
+          feature: cfg.hair,
+          variants: VARIANTS.hair,
+          onChange: (v) => updateFeature("hair", v)
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange(cfg);
-    }, [cfg, storageKey, onChange]);
-    const applyJson = () => {
-        try {
-            const parsed = JSON.parse(json);
-            setCfg(parsed);
-            onNotify === null || onNotify === void 0 ? void 0 : onNotify(t('characterEditor.jsonApplied', 'JSON applied'), 'success');
+      ),
+      /* @__PURE__ */ jsx(
+        FeatureEditor,
+        {
+          title: t("characters.eyes", "Eyes"),
+          feature: cfg.eyes,
+          variants: VARIANTS.eyes,
+          onChange: (v) => updateFeature("eyes", v)
         }
-        catch (_a) {
-            onNotify === null || onNotify === void 0 ? void 0 : onNotify(t('characterEditor.invalidJson', 'Invalid JSON'), 'error');
+      ),
+      /* @__PURE__ */ jsx(
+        FeatureEditor,
+        {
+          title: t("characters.nose", "Nose"),
+          feature: cfg.nose,
+          variants: VARIANTS.nose,
+          onChange: (v) => updateFeature("nose", v)
         }
-    };
-    const downloadJson = () => {
-        const blob = new Blob([JSON.stringify(cfg, null, 2)], { type: 'application/json' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = `${cfg.name || 'character'}.json`;
-        a.click();
-        URL.revokeObjectURL(url);
-    };
-    const randomizeColors = () => {
-        const rand = () => `#${Math.floor(Math.random() * 0xffffff)
-            .toString(16)
-            .padStart(6, '0')}`;
-        const paint = (f) => ({ ...f, colors: [rand(), rand(), rand()] });
-        setCfg({
-            ...cfg,
-            face: paint(cfg.face),
-            hair: paint(cfg.hair),
-            eyes: paint(cfg.eyes),
-            nose: paint(cfg.nose),
-            mouth: paint(cfg.mouth),
-            outfit: paint(cfg.outfit),
-            headwear: paint(cfg.headwear),
-            prop: paint(cfg.prop),
-        });
-    };
-    const updateFeature = (key, val) => {
-        setCfg((prev) => ({ ...prev, [key]: val }));
-    };
-    return (jsxs("div", { className: `ntd-animation-editor ${className !== null && className !== void 0 ? className : ''}`, style: style, children: [jsxs("div", { className: "ntd-ae-controls", children: [jsx(Row, { title: t('characterEditor.name', 'Name'), children: jsx(NiceTextInput, { className: "ntd-ae-input", value: cfg.name || '', onChange: (val) => setCfg({ ...cfg, name: val }), placeholder: t('characterEditor.namePlaceholder', 'Character name') }) }), jsxs(Row, { title: t('characters.size', 'Size'), children: [jsx(NiceSlider, { min: 140, max: 300, value: (_a = cfg.size) !== null && _a !== void 0 ? _a : 180, onChange: (val) => setCfg({ ...cfg, size: val }) }), jsxs("span", { className: "ntd-ae-size-value", children: [(_b = cfg.size) !== null && _b !== void 0 ? _b : 180, "px"] })] }), jsx(FeatureEditor, { title: t('characters.faceShape', 'Face'), feature: cfg.face, variants: VARIANTS.face, onChange: (v) => updateFeature('face', v) }), jsx(FeatureEditor, { title: t('characters.hairstyle', 'Hair'), feature: cfg.hair, variants: VARIANTS.hair, onChange: (v) => updateFeature('hair', v) }), jsx(FeatureEditor, { title: t('characters.eyes', 'Eyes'), feature: cfg.eyes, variants: VARIANTS.eyes, onChange: (v) => updateFeature('eyes', v) }), jsx(FeatureEditor, { title: t('characters.nose', 'Nose'), feature: cfg.nose, variants: VARIANTS.nose, onChange: (v) => updateFeature('nose', v) }), jsx(FeatureEditor, { title: t('characters.mouth', 'Mouth'), feature: cfg.mouth, variants: VARIANTS.mouth, onChange: (v) => updateFeature('mouth', v) }), jsx(FeatureEditor, { title: t('characters.clothing', 'Outfit'), feature: cfg.outfit, variants: VARIANTS.outfit, onChange: (v) => updateFeature('outfit', v) }), jsx(FeatureEditor, { title: t('characters.headwear', 'Headwear'), feature: cfg.headwear, variants: VARIANTS.headwear, onChange: (v) => updateFeature('headwear', v) }), jsx(FeatureEditor, { title: t('characters.prop', 'Prop'), feature: cfg.prop, variants: VARIANTS.prop, onChange: (v) => updateFeature('prop', v) }), jsxs("div", { className: "ntd-ae-action-row", children: [jsxs(NiceButton, { className: "ntd-ae-btn", variant: "ghost", onClick: randomizeColors, children: [jsx(NiceIcon, { name: "shuffle", size: 14 }), ' ', t('characterEditor.randomizeColors', 'Randomize colors')] }), jsxs(NiceButton, { className: "ntd-ae-btn", variant: "ghost", onClick: downloadJson, children: [jsx(NiceIcon, { name: "download", size: 14 }), " ", t('characters.downloadJson', 'Download JSON')] })] }), showJsonPanel && (jsxs("div", { className: "ntd-ae-json-panel", children: [jsx("div", { className: "ntd-ae-json-label", children: t('characterEditor.jsonSection', 'JSON') }), jsx(NiceTextArea, { className: "ntd-ae-textarea", value: json, onChange: (val) => setJson(val) }), jsxs("div", { className: "ntd-ae-json-actions", children: [jsx(NiceButton, { className: "ntd-ae-btn", variant: "primary", onClick: applyJson, children: t('characterEditor.applyJson', 'Apply JSON') }), jsx(NiceButton, { className: "ntd-ae-btn", variant: "ghost", onClick: () => navigator.clipboard.writeText(JSON.stringify(cfg, null, 2)), children: t('characterEditor.copyToClipboard', 'Copy') })] })] }))] }), showPreview && (jsxs("div", { className: "ntd-ae-preview", children: [jsx("div", { className: "ntd-ae-preview-label", children: t('characterEditor.preview', 'Preview') }), jsx(NiceAnimatedPerson, { character: cfg, score: 10, startPose: "idle" })] }))] }));
+      ),
+      /* @__PURE__ */ jsx(
+        FeatureEditor,
+        {
+          title: t("characters.mouth", "Mouth"),
+          feature: cfg.mouth,
+          variants: VARIANTS.mouth,
+          onChange: (v) => updateFeature("mouth", v)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FeatureEditor,
+        {
+          title: t("characters.clothing", "Outfit"),
+          feature: cfg.outfit,
+          variants: VARIANTS.outfit,
+          onChange: (v) => updateFeature("outfit", v)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FeatureEditor,
+        {
+          title: t("characters.headwear", "Headwear"),
+          feature: cfg.headwear,
+          variants: VARIANTS.headwear,
+          onChange: (v) => updateFeature("headwear", v)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FeatureEditor,
+        {
+          title: t("characters.prop", "Prop"),
+          feature: cfg.prop,
+          variants: VARIANTS.prop,
+          onChange: (v) => updateFeature("prop", v)
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "ntd-ae-action-row", children: [
+        /* @__PURE__ */ jsxs(NiceButton, { className: "ntd-ae-btn", variant: "ghost", onClick: randomizeColors, children: [
+          /* @__PURE__ */ jsx(NiceIcon, { name: "shuffle", size: 14 }),
+          " ",
+          t("characterEditor.randomizeColors", "Randomize colors")
+        ] }),
+        /* @__PURE__ */ jsxs(NiceButton, { className: "ntd-ae-btn", variant: "ghost", onClick: downloadJson, children: [
+          /* @__PURE__ */ jsx(NiceIcon, { name: "download", size: 14 }),
+          " ",
+          t("characters.downloadJson", "Download JSON")
+        ] })
+      ] }),
+      showJsonPanel && /* @__PURE__ */ jsxs("div", { className: "ntd-ae-json-panel", children: [
+        /* @__PURE__ */ jsx("div", { className: "ntd-ae-json-label", children: t("characterEditor.jsonSection", "JSON") }),
+        /* @__PURE__ */ jsx(
+          NiceTextArea,
+          {
+            className: "ntd-ae-textarea",
+            value: json,
+            onChange: (val) => setJson(val)
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "ntd-ae-json-actions", children: [
+          /* @__PURE__ */ jsx(NiceButton, { className: "ntd-ae-btn", variant: "primary", onClick: applyJson, children: t("characterEditor.applyJson", "Apply JSON") }),
+          /* @__PURE__ */ jsx(
+            NiceButton,
+            {
+              className: "ntd-ae-btn",
+              variant: "ghost",
+              onClick: () => navigator.clipboard.writeText(JSON.stringify(cfg, null, 2)),
+              children: t("characterEditor.copyToClipboard", "Copy")
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    showPreview && /* @__PURE__ */ jsxs("div", { className: "ntd-ae-preview", children: [
+      /* @__PURE__ */ jsx("div", { className: "ntd-ae-preview-label", children: t("characterEditor.preview", "Preview") }),
+      /* @__PURE__ */ jsx(NiceAnimatedPerson, { character: cfg, score: 10, startPose: "idle" })
+    ] })
+  ] });
 }
-
-export { NiceAnimationEditor };
+export {
+  NiceAnimationEditor
+};

package/dist/esm/animation/Audience.js

@@ -1,65 +1,89 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { NiceButton } from '@nice2dev/ui';
-import React from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import NiceAnimatedPerson from './AnimatedPerson.js';
-import { DEFAULT_CHARACTER } from './characterTypes.js';
-import { runRounds, seq } from './choreoDSL.js';
-
-const rnd = () => `#${Math.floor(Math.random() * 0xffffff)
-    .toString(16)
-    .padStart(6, '0')}`;
+import { jsxs, jsx } from "react/jsx-runtime";
+import { NiceButton } from "@nice2dev/ui";
+import React from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import NiceAnimatedPerson from "./AnimatedPerson.js";
+import { DEFAULT_CHARACTER } from "./characterTypes.js";
+import { runRounds, seq } from "./choreoDSL.js";
+const rnd = () => `#${Math.floor(Math.random() * 16777215).toString(16).padStart(6, "0")}`;
 function recolor(f, n) {
-    const colors = new Array(Math.max(1, Math.min(3, n))).fill(0).map(rnd);
-    return { ...f, colors };
+  const colors = new Array(Math.max(1, Math.min(3, n))).fill(0).map(rnd);
+  return { ...f, colors };
 }
 function makeAudience(n) {
-    const arr = [];
-    for (let i = 0; i < n; i++) {
-        arr.push({
-            ...DEFAULT_CHARACTER,
-            name: `Fan ${i + 1}`,
-            size: 150 + Math.round(Math.random() * 40) - 20,
-            outfit: recolor(DEFAULT_CHARACTER.outfit, 3),
-            hair: recolor(DEFAULT_CHARACTER.hair, 2),
-            headwear: Math.random() < 0.3
-                ? recolor(DEFAULT_CHARACTER.headwear, 2)
-                : { variant: 'none', colors: ['var(--anim-stroke, #111)'] },
-            prop: Math.random() < 0.25
-                ? { variant: 'star', colors: [rnd(), rnd(), 'var(--anim-stroke, #111)'] }
-                : { variant: 'none', colors: ['var(--anim-stroke, #111)'] },
-        });
-    }
-    return arr;
+  const arr = [];
+  for (let i = 0; i < n; i++) {
+    arr.push({
+      ...DEFAULT_CHARACTER,
+      name: `Fan ${i + 1}`,
+      size: 150 + Math.round(Math.random() * 40) - 20,
+      outfit: recolor(DEFAULT_CHARACTER.outfit, 3),
+      hair: recolor(DEFAULT_CHARACTER.hair, 2),
+      headwear: Math.random() < 0.3 ? recolor(DEFAULT_CHARACTER.headwear, 2) : { variant: "none", colors: ["var(--anim-stroke, #111)"] },
+      prop: Math.random() < 0.25 ? { variant: "star", colors: [rnd(), rnd(), "var(--anim-stroke, #111)"] } : { variant: "none", colors: ["var(--anim-stroke, #111)"] }
+    });
+  }
+  return arr;
 }
-/** Grid of animated audience members with wave/cheer actions. */
 const NiceAudience = ({ count = 36, columns = 12 }) => {
-    const { t } = useNiceTranslation();
-    const people = React.useMemo(() => makeAudience(count), [count]);
-    const refs = React.useRef([]);
-    refs.current = [];
-    const actors = () => refs.current.filter(Boolean);
-    const cheer = async () => {
-        const a = actors();
-        if (!a.length) {
-            return;
-        }
-        await runRounds(a, [seq().jump(250).celebrate(500), seq().waveHand(600), seq().danceB(450)], 60);
-    };
-    const wave = async () => {
-        const a = actors();
-        if (!a.length) {
-            return;
-        }
-        await Promise.all(new Array(Math.ceil(a.length / columns))
-            .fill(0)
-            .map((_, row) => runRounds(a.slice(row * columns, row * columns + columns), [seq().waveHand(500)], 120 * row)));
-    };
-    return (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [jsx("div", { style: {
-                    display: 'grid',
-                    gap: 8,
-                    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-                }, children: people.map((c, i) => (jsx(NiceAnimatedPerson, { character: c, score: 10, startPose: "idle", onReady: (fx) => (refs.current[i] = fx) }, i))) }), jsxs("div", { style: { display: 'flex', gap: 8 }, children: [jsx(NiceButton, { variant: "ghost", size: "sm", onClick: wave, children: t('audience.wave', 'Wave') }), jsx(NiceButton, { variant: "ghost", size: "sm", onClick: cheer, children: t('audience.cheer', 'Cheer') })] })] }));
+  const { t } = useNiceTranslation();
+  const people = React.useMemo(() => makeAudience(count), [count]);
+  const refs = React.useRef([]);
+  refs.current = [];
+  const actors = () => refs.current.filter(Boolean);
+  const cheer = async () => {
+    const a = actors();
+    if (!a.length) {
+      return;
+    }
+    await runRounds(
+      a,
+      [seq().jump(250).celebrate(500), seq().waveHand(600), seq().danceB(450)],
+      60
+    );
+  };
+  const wave = async () => {
+    const a = actors();
+    if (!a.length) {
+      return;
+    }
+    await Promise.all(
+      new Array(Math.ceil(a.length / columns)).fill(0).map(
+        (_, row) => runRounds(
+          a.slice(row * columns, row * columns + columns),
+          [seq().waveHand(500)],
+          120 * row
+        )
+      )
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gap: 8,
+          gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+        },
+        children: people.map((c, i) => /* @__PURE__ */ jsx(
+          NiceAnimatedPerson,
+          {
+            character: c,
+            score: 10,
+            startPose: "idle",
+            onReady: (fx) => refs.current[i] = fx
+          },
+          i
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+      /* @__PURE__ */ jsx(NiceButton, { variant: "ghost", size: "sm", onClick: wave, children: t("audience.wave", "Wave") }),
+      /* @__PURE__ */ jsx(NiceButton, { variant: "ghost", size: "sm", onClick: cheer, children: t("audience.cheer", "Cheer") })
+    ] })
+  ] });
+};
+export {
+  NiceAudience as default
 };
-
-export { NiceAudience as default };