@hadoku/task-ui-components 4.23.5 → 4.23.6

package/dist/components/AvatarBuilder.js

@@ -0,0 +1,674 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { Icon } from "@wolffm/themes";
+import { ensureCosmeticsStyles, COSMETICS_BY_ID, PLACEMENT_DEFAULT, fitPlacement, avatarHtml, nameHtml, messageHtml, PLACEMENT_LIMITS, COSMETIC_SLOTS, COSMETICS, placementTransform, cleanLoadout, wornCosmetics } from "../vendor/wolffm/prefs-client/cosmetics.js";
+import { AvatarPicker } from "./AvatarPicker.js";
+import { AVATAR_EVENT } from "../lib/avatarEvent.js";
+import { avatarClient, avatarErrorText, fetchCharacters, portraitUrl } from "../lib/avatarData.js";
+const SLOT_LABEL = {
+  effect: "Effect",
+  gradient: "Gradient",
+  font: "Font",
+  overlay: "Overlay",
+  message: "Message"
+};
+const SLIDERS = [
+  ["x", "Left/right", "%"],
+  ["y", "Up/down", "%"],
+  ["r", "Rotate", "°"],
+  ["s", "Size", "%"]
+];
+const S = {
+  body: { display: "grid", gap: 16, alignItems: "start" },
+  side: { display: "flex", flexDirection: "column", gap: 12, minWidth: 0 },
+  stage: {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: 12,
+    padding: "48px 12px 18px",
+    borderRadius: 10,
+    background: "var(--color-bg-alt)",
+    border: "1px solid var(--color-border)",
+    touchAction: "none",
+    userSelect: "none"
+  },
+  tryOn: {
+    position: "absolute",
+    left: 8,
+    right: 8,
+    top: 8,
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    padding: "4px 8px",
+    borderRadius: 6,
+    background: "var(--color-primary-bg)",
+    color: "var(--color-on-primary-bg)",
+    fontSize: "0.72rem"
+  },
+  linkBtn: {
+    border: 0,
+    background: "none",
+    color: "inherit",
+    textDecoration: "underline",
+    cursor: "pointer",
+    fontSize: "inherit",
+    padding: 0,
+    flex: "none"
+  },
+  chat: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 10,
+    padding: 12,
+    borderRadius: 10,
+    background: "var(--color-bg)",
+    border: "1px solid var(--color-border)"
+  },
+  chatHead: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    fontSize: "0.72rem",
+    color: "var(--color-text-muted)"
+  },
+  msg: { display: "flex", gap: 10, alignItems: "flex-start" },
+  who: { minHeight: 22, display: "flex", alignItems: "center" },
+  line: { fontSize: "0.85rem", marginTop: 2 },
+  place: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    padding: 12,
+    borderRadius: 10,
+    border: "1px solid var(--color-border)"
+  },
+  placeHead: { display: "flex", flexDirection: "column", gap: 2, fontSize: "0.8rem" },
+  hint: { fontSize: "0.72rem", color: "var(--color-text-muted)" },
+  slider: {
+    display: "grid",
+    gridTemplateColumns: "64px 1fr 40px",
+    alignItems: "center",
+    gap: 6,
+    fontSize: "0.75rem",
+    color: "var(--color-text-muted)"
+  },
+  out: { textAlign: "right", color: "var(--color-text)", fontVariantNumeric: "tabular-nums" },
+  toggles: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 10,
+    alignItems: "center",
+    fontSize: "0.75rem",
+    color: "var(--color-text-muted)"
+  },
+  tabs: {
+    display: "flex",
+    gap: 2,
+    borderBottom: "1px solid var(--color-border)",
+    overflowX: "auto",
+    scrollbarWidth: "none"
+  },
+  tab: {
+    flex: "none",
+    padding: "7px 11px",
+    borderBottomWidth: 2,
+    borderBottomStyle: "solid",
+    borderBottomColor: "transparent",
+    borderTop: 0,
+    borderLeft: 0,
+    borderRight: 0,
+    background: "none",
+    cursor: "pointer",
+    fontSize: "0.82rem",
+    fontWeight: 500,
+    color: "var(--color-text-muted)"
+  },
+  tabOn: { color: "var(--color-text)", borderBottomColor: "var(--color-primary)" },
+  count: { fontSize: "0.68rem", marginLeft: 4, opacity: 0.8, fontVariantNumeric: "tabular-nums" },
+  pane: { display: "flex", flexDirection: "column", gap: 10, paddingTop: 10 },
+  grid: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(112px, 1fr))", gap: 8 },
+  tile: {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    gap: 5,
+    padding: 6,
+    borderRadius: 8,
+    border: "1px solid var(--color-border)",
+    background: "var(--color-bg)",
+    color: "var(--color-text)",
+    cursor: "pointer",
+    textAlign: "left",
+    font: "inherit"
+  },
+  tileOn: {
+    borderColor: "var(--color-primary)",
+    boxShadow: "inset 0 0 0 1px var(--color-primary)"
+  },
+  tileTrying: { borderStyle: "dashed", borderColor: "var(--color-primary)" },
+  tilePv: {
+    height: 58,
+    borderRadius: 6,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "var(--color-bg-alt)",
+    overflow: "hidden",
+    padding: "0 8px",
+    fontSize: "0.8rem"
+  },
+  tileName: { fontSize: "0.8rem", fontWeight: 500, display: "flex", alignItems: "center", gap: 5 },
+  tileEarn: { fontSize: "0.7rem", lineHeight: 1.3, color: "var(--color-text-muted)" },
+  foot: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: 8,
+    flexWrap: "wrap",
+    fontSize: "0.75rem",
+    color: "var(--color-text-muted)"
+  }
+};
+const Html = React.memo(
+  function Html2({ html, style }) {
+    return /* @__PURE__ */ jsx("span", { style, dangerouslySetInnerHTML: { __html: html } });
+  },
+  (a, b) => a.html === b.html && JSON.stringify(a.style) === JSON.stringify(b.style)
+);
+function replayPreview(tile) {
+  const pv = tile.firstElementChild;
+  if (!pv) return;
+  const markup = pv.innerHTML;
+  pv.innerHTML = markup;
+}
+function useNarrow() {
+  const query = "(max-width: 640px)";
+  const [narrow, setNarrow] = useState(() => window.matchMedia(query).matches);
+  useEffect(() => {
+    const mq = window.matchMedia(query);
+    const on = () => setNarrow(mq.matches);
+    mq.addEventListener("change", on);
+    return () => mq.removeEventListener("change", on);
+  }, []);
+  return narrow;
+}
+function applyPlacement(root, id, p) {
+  root?.querySelectorAll(`.hc-art[data-hc-art="${id}"]`).forEach((ol) => {
+    ol.style.zIndex = p.back ? "0" : "3";
+    const adj = ol.firstElementChild;
+    if (adj) adj.style.transform = placementTransform(p);
+  });
+}
+function withLoadout(s, loadout) {
+  return {
+    ...s,
+    cosmetics: { ...s.cosmetics, loadout },
+    avatar: { ...s.avatar, cosmetics: wornCosmetics(loadout) }
+  };
+}
+function AvatarBuilder({ name }) {
+  const [settings, setSettings] = useState(null);
+  const [sets, setSets] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const [tab, setTab] = useState("picture");
+  const [tryOn, setTryOn] = useState(null);
+  const [showLocked, setShowLocked] = useState(true);
+  const [replay, setReplay] = useState(0);
+  const narrow = useNarrow();
+  const root = useRef(null);
+  const seq = useRef(0);
+  useEffect(() => ensureCosmeticsStyles(), []);
+  useEffect(() => {
+    let live2 = true;
+    avatarClient.get().then((s) => live2 && setSettings(s)).catch((err) => live2 && setError(avatarErrorText(err)));
+    fetchCharacters().then((s) => live2 && setSets(s)).catch((err) => live2 && setError(avatarErrorText(err)));
+    return () => {
+      live2 = false;
+    };
+  }, []);
+  const announce = (next) => (
+    // The page under the popout (a watchparty room, a game) re-reads the avatar
+    // from this instead of waiting for its next join.
+    window.dispatchEvent(new window.CustomEvent(AVATAR_EVENT, { detail: next }))
+  );
+  const run = useCallback(async (work) => {
+    setBusy(true);
+    setError(null);
+    try {
+      const next = await work();
+      setSettings(next);
+      announce(next);
+    } catch (err) {
+      setError(avatarErrorText(err));
+    } finally {
+      setBusy(false);
+    }
+  }, []);
+  const wear = useCallback(
+    async (update, optimistic) => {
+      const mine = ++seq.current;
+      setError(null);
+      setSettings((s) => s ? optimistic(s) : s);
+      try {
+        const next = await avatarClient.setCosmetics(update);
+        if (mine !== seq.current) return;
+        setSettings(next);
+        announce(next);
+      } catch (err) {
+        if (mine !== seq.current) return;
+        setError(avatarErrorText(err));
+        avatarClient.get().then((s) => mine === seq.current && setSettings(s)).catch((e) => setError(avatarErrorText(e)));
+      }
+    },
+    []
+  );
+  const owned = useMemo(() => new Set(settings?.cosmetics.owned ?? []), [settings]);
+  const loadout = settings?.cosmetics.loadout;
+  const equippedOverlay = loadout?.equipped.overlay ?? null;
+  const art = equippedOverlay ? COSMETICS_BY_ID.get(equippedOverlay)?.art : void 0;
+  const editing = tab === "overlay" && !tryOn && !!art && !!equippedOverlay;
+  const [live, setLive] = useState(PLACEMENT_DEFAULT);
+  const saveTimer = useRef(void 0);
+  const dragging = useRef(false);
+  useEffect(() => {
+    if (dragging.current || !equippedOverlay) return;
+    setLive(loadout?.placement[equippedOverlay] ?? PLACEMENT_DEFAULT);
+  }, [equippedOverlay, loadout]);
+  useEffect(() => () => clearTimeout(saveTimer.current), []);
+  const place = useCallback(
+    (raw, save) => {
+      if (!art || !equippedOverlay) return;
+      const p = fitPlacement(art, raw);
+      setLive(p);
+      applyPlacement(root.current, equippedOverlay, p);
+      clearTimeout(saveTimer.current);
+      if (save === "no") return;
+      const commit = () => void wear(
+        { placement: { [equippedOverlay]: p } },
+        (s) => withLoadout(s, {
+          ...s.cosmetics.loadout,
+          placement: { ...s.cosmetics.loadout.placement, [equippedOverlay]: p }
+        })
+      );
+      if (save === "now") commit();
+      else saveTimer.current = setTimeout(commit, 400);
+    },
+    [art, equippedOverlay, wear]
+  );
+  if (!settings) {
+    return /* @__PURE__ */ jsx("span", { className: "settings-popout__hint", role: error ? "alert" : void 0, children: error ?? "…" });
+  }
+  const characters = new Map((sets ?? []).flatMap((s) => s.characters).map((c) => [c.id, c]));
+  const character = settings.sprite ? characters.get(settings.sprite) : void 0;
+  const picture = settings.avatar.url ?? (character ? portraitUrl(character) : null);
+  const colour = character && /^#[0-9a-f]{6}$/i.test(character.color) ? { "--hc-base": character.color } : {};
+  const displayName = name || "You";
+  const worn = { ...settings.avatar.cosmetics ?? {} };
+  if (tryOn) {
+    worn[tryOn.slot] = tryOn.id;
+    if (tryOn.slot === "overlay") delete worn.placement;
+  }
+  const equip = (slot, id) => {
+    setTryOn(null);
+    void wear({ equip: { [slot]: id } }, (s) => {
+      const l = s.cosmetics.loadout;
+      return withLoadout(s, cleanLoadout({ ...l, equipped: { ...l.equipped, [slot]: id } }, owned));
+    });
+  };
+  const stage = /* @__PURE__ */ jsx(
+    Stage,
+    {
+      html: avatarHtml({ src: picture, size: 112, worn }) + nameHtml(displayName, worn, { large: true }),
+      editing,
+      overlayId: equippedOverlay,
+      live,
+      onPlace: place,
+      dragging,
+      style: colour,
+      banner: tryOn && /* @__PURE__ */ jsxs("div", { style: S.tryOn, children: [
+        /* @__PURE__ */ jsx(Icon, { name: "lock", size: 12 }),
+        /* @__PURE__ */ jsxs("span", { style: { flex: 1, minWidth: 0 }, children: [
+          "Trying on ",
+          COSMETICS_BY_ID.get(tryOn.id)?.label,
+          " ·",
+          " ",
+          COSMETICS_BY_ID.get(tryOn.id)?.earn
+        ] }),
+        /* @__PURE__ */ jsx("button", { type: "button", style: S.linkBtn, onClick: () => setTryOn(null), children: "Take off" })
+      ] })
+    }
+  );
+  const chat = /* @__PURE__ */ jsxs("div", { style: S.chat, children: [
+    /* @__PURE__ */ jsxs("div", { style: S.chatHead, children: [
+      /* @__PURE__ */ jsx("span", { children: "In chat" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "settings-popout__btn",
+          onClick: () => setReplay((n) => n + 1),
+          children: "Replay"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: S.msg, children: [
+      /* @__PURE__ */ jsx(Html, { html: avatarHtml({ src: picture, size: 36, worn }), style: colour }),
+      /* @__PURE__ */ jsxs("div", { style: { minWidth: 0, ...colour }, children: [
+        /* @__PURE__ */ jsx("div", { style: S.who, children: /* @__PURE__ */ jsx(Html, { html: nameHtml(displayName, worn) }) }),
+        /* @__PURE__ */ jsx("div", { style: S.line, children: /* @__PURE__ */ jsx(Html, { html: messageHtml("gg, that last hand was brutal", worn) }, replay) })
+      ] })
+    ] })
+  ] });
+  const placement = editing && art && /* @__PURE__ */ jsxs("div", { style: S.place, role: "group", "aria-label": "Placement", children: [
+    /* @__PURE__ */ jsxs("div", { style: S.placeHead, children: [
+      /* @__PURE__ */ jsx("strong", { children: "Placement" }),
+      /* @__PURE__ */ jsx("span", { style: S.hint, children: "Drag it on the avatar. The top handle turns it, the corner resizes it." })
+    ] }),
+    SLIDERS.map(([k, label, unit]) => /* @__PURE__ */ jsxs("label", { style: S.slider, children: [
+      /* @__PURE__ */ jsx("span", { children: label }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: PLACEMENT_LIMITS[k][0],
+          max: PLACEMENT_LIMITS[k][1],
+          value: live[k],
+          onChange: (e) => place({ ...live, [k]: Number(e.currentTarget.value) }, "later"),
+          style: { width: "100%", accentColor: "var(--color-primary)" }
+        }
+      ),
+      /* @__PURE__ */ jsxs("output", { style: S.out, children: [
+        live[k],
+        unit
+      ] })
+    ] }, k)),
+    /* @__PURE__ */ jsxs("div", { style: S.toggles, children: [
+      /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: live.flip,
+            onChange: (e) => place({ ...live, flip: e.currentTarget.checked }, "now")
+          }
+        ),
+        " ",
+        "Mirror"
+      ] }),
+      /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: live.back,
+            onChange: (e) => place({ ...live, back: e.currentTarget.checked }, "now")
+          }
+        ),
+        " ",
+        "Behind"
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "settings-popout__btn",
+          onClick: () => place(PLACEMENT_DEFAULT, "now"),
+          children: "Reset"
+        }
+      )
+    ] })
+  ] });
+  const tabs = ["picture", ...COSMETIC_SLOTS];
+  const tabLabel = (t) => t === "picture" ? "Picture" : SLOT_LABEL[t];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: root,
+      style: { ...S.body, gridTemplateColumns: narrow ? "minmax(0, 1fr)" : "240px minmax(0, 1fr)" },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: S.side, children: [
+          stage,
+          chat,
+          placement
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx("div", { style: S.tabs, role: "tablist", "aria-label": "Avatar", children: tabs.map((t) => {
+            const items = t === "picture" ? [] : COSMETICS.filter((i) => i.slot === t);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                "aria-selected": tab === t,
+                style: { ...S.tab, ...tab === t ? S.tabOn : {} },
+                onClick: () => {
+                  setTab(t);
+                  setTryOn(null);
+                },
+                children: [
+                  tabLabel(t),
+                  t !== "picture" && /* @__PURE__ */ jsxs("span", { style: S.count, children: [
+                    items.filter((i) => owned.has(i.id)).length,
+                    "/",
+                    items.length
+                  ] })
+                ]
+              },
+              t
+            );
+          }) }),
+          /* @__PURE__ */ jsxs("div", { style: S.pane, role: "tabpanel", "aria-label": tabLabel(tab), children: [
+            tab === "picture" ? /* @__PURE__ */ jsx(AvatarPicker, { settings, sets, busy, run }) : /* @__PURE__ */ jsx(
+              SlotGrid,
+              {
+                slot: tab,
+                owned,
+                equipped: loadout?.equipped[tab] ?? null,
+                tryOn,
+                showLocked,
+                onShowLocked: setShowLocked,
+                preview: (id) => {
+                  const only = { [tab]: id ?? void 0 };
+                  if (tab === "overlay") return avatarHtml({ src: picture, size: 40, worn: only });
+                  if (tab === "message") return messageHtml("gg, rematch?", only, { keep: true });
+                  return nameHtml(displayName, { ...worn, [tab]: id ?? void 0 });
+                },
+                colour,
+                onEquip: (id) => equip(tab, id),
+                onTry: (id) => setTryOn((t) => t?.slot === tab && t.id === id ? null : { slot: tab, id })
+              }
+            ),
+            error && /* @__PURE__ */ jsx("span", { className: "settings-popout__error", role: "alert", children: error })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function Stage({ html, editing, overlayId, live, onPlace, dragging, style, banner }) {
+  const box = useRef(null);
+  const drag = useRef(null);
+  useEffect(() => {
+    const adj = box.current?.querySelector(".hc-art .hc-adj");
+    if (!editing || !adj) return;
+    const gz = document.createElement("span");
+    gz.dataset.g = "move";
+    gz.setAttribute("aria-hidden", "true");
+    gz.style.cssText = "position:absolute;inset:-3px;border:1.5px dashed var(--color-primary);border-radius:6px;pointer-events:auto;cursor:move";
+    const handle = (g, css) => {
+      const h = document.createElement("i");
+      h.dataset.g = g;
+      h.style.cssText = `position:absolute;pointer-events:auto;${css}`;
+      gz.appendChild(h);
+    };
+    handle(
+      "rot",
+      "left:50%;top:-20px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--color-primary);cursor:grab"
+    );
+    handle(
+      "scale",
+      "right:-7px;bottom:-7px;width:12px;height:12px;border-radius:3px;background:var(--color-bg-card);border:2px solid var(--color-primary);cursor:nwse-resize"
+    );
+    adj.appendChild(gz);
+    return () => gz.remove();
+  }, [html, editing]);
+  const down = (e) => {
+    const g = e.target.closest("[data-g]");
+    const adj = g?.closest(".hc-adj");
+    const avatar = box.current?.querySelector(".hc-av");
+    if (!g || !adj || !avatar || !editing || !overlayId) return;
+    e.preventDefault();
+    g.setPointerCapture(e.pointerId);
+    const r = adj.getBoundingClientRect();
+    const cx = r.left + r.width / 2;
+    const cy = r.top + r.height / 2;
+    const size = avatar.getBoundingClientRect().width;
+    dragging.current = true;
+    drag.current = {
+      mode: g.dataset.g ?? "move",
+      p0: live,
+      x0: e.clientX,
+      y0: e.clientY,
+      cx,
+      cy,
+      a0: Math.atan2(e.clientY - cy, e.clientX - cx),
+      d0: Math.hypot(e.clientX - cx, e.clientY - cy) || 1,
+      size,
+      last: live
+    };
+  };
+  const move = (e) => {
+    const d = drag.current;
+    if (!d) return;
+    let next = d.p0;
+    if (d.mode === "move") {
+      next = {
+        ...d.p0,
+        x: d.p0.x + (e.clientX - d.x0) / d.size * 100,
+        y: d.p0.y + (e.clientY - d.y0) / d.size * 100
+      };
+    } else if (d.mode === "rot") {
+      const a = Math.atan2(e.clientY - d.cy, e.clientX - d.cx);
+      next = { ...d.p0, r: d.p0.r + (a - d.a0) * 180 / Math.PI };
+    } else {
+      next = { ...d.p0, s: d.p0.s * Math.hypot(e.clientX - d.cx, e.clientY - d.cy) / d.d0 };
+    }
+    d.last = next;
+    onPlace(next, "no");
+  };
+  const up = () => {
+    const d = drag.current;
+    if (!d) return;
+    drag.current = null;
+    dragging.current = false;
+    onPlace(d.last, "now");
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: box,
+      role: "group",
+      "aria-label": "Preview",
+      style: { ...S.stage, ...style },
+      onPointerDown: down,
+      onPointerMove: move,
+      onPointerUp: up,
+      onPointerCancel: up,
+      children: [
+        banner,
+        /* @__PURE__ */ jsx(Html, { html, style: { display: "contents" } })
+      ]
+    }
+  );
+}
+function SlotGrid({
+  slot,
+  owned,
+  equipped,
+  tryOn,
+  showLocked,
+  onShowLocked,
+  preview,
+  colour,
+  onEquip,
+  onTry
+}) {
+  const items = COSMETICS.filter((i) => i.slot === slot);
+  const locked = items.filter((i) => !owned.has(i.id));
+  const shown = showLocked ? items : items.filter((i) => owned.has(i.id));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { style: S.grid, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": equipped === null,
+          style: { ...S.tile, ...equipped === null ? S.tileOn : {} },
+          onClick: () => onEquip(null),
+          children: [
+            /* @__PURE__ */ jsx(Html, { html: preview(null), style: { ...S.tilePv, ...colour } }),
+            /* @__PURE__ */ jsx("span", { style: S.tileName, children: "None" })
+          ]
+        }
+      ),
+      shown.map((item) => {
+        const own = owned.has(item.id);
+        const on = equipped === item.id;
+        const trying = tryOn?.slot === slot && tryOn.id === item.id;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": own ? on : trying,
+            "aria-label": own ? item.label : `${item.label}, locked. ${item.earn}. Try it on.`,
+            style: {
+              ...S.tile,
+              ...on ? S.tileOn : {},
+              ...trying ? S.tileTrying : {}
+            },
+            onClick: () => own ? onEquip(item.id) : onTry(item.id),
+            onMouseEnter: (e) => slot === "message" && replayPreview(e.currentTarget),
+            children: [
+              /* @__PURE__ */ jsx(
+                Html,
+                {
+                  html: preview(item.id),
+                  style: { ...S.tilePv, ...colour, opacity: own ? 1 : 0.55 }
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { style: { ...S.tileName, color: own ? void 0 : "var(--color-text-muted)" }, children: [
+                !own && /* @__PURE__ */ jsx(Icon, { name: "lock", size: 12 }),
+                item.label
+              ] }),
+              !own && /* @__PURE__ */ jsx("span", { style: S.tileEarn, children: item.earn })
+            ]
+          },
+          item.id
+        );
+      })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: S.foot, children: [
+      /* @__PURE__ */ jsx("span", { children: locked.length ? `${locked.length} still to earn. Pick one to try it on.` : "You have earned all of these." }),
+      locked.length > 0 && /* @__PURE__ */ jsxs("label", { children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: showLocked,
+            onChange: (e) => onShowLocked(e.currentTarget.checked)
+          }
+        ),
+        " ",
+        "Show locked"
+      ] })
+    ] })
+  ] });
+}
+export {
+  AvatarBuilder
+};
+//# sourceMappingURL=AvatarBuilder.js.map