@hadoku/task-ui-components 4.23.6 → 4.23.7

package/dist/components/AvatarBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBuilder.d.ts","sourceRoot":"","sources":["../../src/components/AvatarBuilder.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,KAA4D,MAAM,OAAO,CAAA;AAqQhF,MAAM,WAAW,kBAAkB;IACjC,kDAAkD;IAClD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,EAAE,kBAAkB,qBAoUzD"}
+{"version":3,"file":"AvatarBuilder.d.ts","sourceRoot":"","sources":["../../src/components/AvatarBuilder.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,KAA4D,MAAM,OAAO,CAAA;AAqUhF,MAAM,WAAW,kBAAkB;IACjC,kDAAkD;IAClD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CACpB;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,EAAE,kBAAkB,qBAsUzD"}

package/dist/components/AvatarBuilder.js

@@ -107,6 +107,8 @@ const S = {
   tabs: {
     display: "flex",
     gap: 2,
+    cursor: "grab",
+    touchAction: "pan-x",
     borderBottom: "1px solid var(--color-border)",
     overflowX: "auto",
     scrollbarWidth: "none"
@@ -209,6 +211,59 @@ function withLoadout(s, loadout) {
     avatar: { ...s.avatar, cosmetics: wornCosmetics(loadout) }
   };
 }
+function useDragScroll() {
+  const [el, setEl] = useState(null);
+  useEffect(() => {
+    if (!el) return;
+    let start = null;
+    let dragged = false;
+    const down = (e) => {
+      if (e.button !== 0) return;
+      start = { x: e.clientX, left: el.scrollLeft };
+      dragged = false;
+    };
+    const move = (e) => {
+      if (!start) return;
+      const dx = e.clientX - start.x;
+      if (!dragged && Math.abs(dx) > 4) {
+        dragged = true;
+        el.setPointerCapture(e.pointerId);
+        el.style.cursor = "grabbing";
+      }
+      if (dragged) el.scrollLeft = start.left - dx;
+    };
+    const up = () => {
+      start = null;
+      el.style.cursor = "";
+    };
+    const click = (e) => {
+      if (!dragged) return;
+      e.preventDefault();
+      e.stopPropagation();
+      dragged = false;
+    };
+    const wheel = (e) => {
+      if (el.scrollWidth <= el.clientWidth || Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
+      e.preventDefault();
+      el.scrollLeft += e.deltaY;
+    };
+    el.addEventListener("pointerdown", down);
+    el.addEventListener("pointermove", move);
+    el.addEventListener("pointerup", up);
+    el.addEventListener("pointercancel", up);
+    el.addEventListener("click", click, true);
+    el.addEventListener("wheel", wheel, { passive: false });
+    return () => {
+      el.removeEventListener("pointerdown", down);
+      el.removeEventListener("pointermove", move);
+      el.removeEventListener("pointerup", up);
+      el.removeEventListener("pointercancel", up);
+      el.removeEventListener("click", click, true);
+      el.removeEventListener("wheel", wheel);
+    };
+  }, [el]);
+  return setEl;
+}
 function AvatarBuilder({ name }) {
   const [settings, setSettings] = useState(null);
   const [sets, setSets] = useState(null);
@@ -220,6 +275,7 @@ function AvatarBuilder({ name }) {
   const [replay, setReplay] = useState(0);
   const narrow = useNarrow();
   const root = useRef(null);
+  const tabStrip = useDragScroll();
   const seq = useRef(0);
   useEffect(() => ensureCosmeticsStyles(), []);
   useEffect(() => {
@@ -436,7 +492,7 @@ function AvatarBuilder({ name }) {
           placement
         ] }),
         /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx("div", { style: S.tabs, role: "tablist", "aria-label": "Avatar", children: tabs.map((t) => {
+          /* @__PURE__ */ jsx("div", { ref: tabStrip, 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",
@@ -445,9 +501,10 @@ function AvatarBuilder({ name }) {
                 role: "tab",
                 "aria-selected": tab === t,
                 style: { ...S.tab, ...tab === t ? S.tabOn : {} },
-                onClick: () => {
+                onClick: (e) => {
                   setTab(t);
                   setTryOn(null);
+                  e.currentTarget.scrollIntoView({ block: "nearest", inline: "nearest" });
                 },
                 children: [
                   tabLabel(t),

package/dist/components/AvatarBuilder.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarBuilder.js","sources":["../../src/components/AvatarBuilder.tsx"],"sourcesContent":["/**\n * AvatarBuilder — the body of AvatarDialog: the person's avatar and what they\n * wear with it, with a live preview.\n *\n * Layout (operator's pick, 2026-11-01): a preview column on the left (the\n * avatar large, with the name, and a chat line as others see it), and on the\n * right tabs for the Picture (AvatarPicker) and each cosmetic slot. Narrow\n * screens stack the two.\n *\n * Cosmetics (`@wolffm/prefs-client/cosmetics`, bundled at build like the avatar\n * client): earned items equip on click; items not yet earned show how to earn\n * them and can be tried on in the preview, which saves nothing. An overlay\n * image can be placed: drag it on the big preview, turn it with the top handle,\n * resize it with the corner handle, or use the sliders. Every move goes through\n * `fitPlacement`, the same function prefs-api runs before it stores one, so the\n * preview never shows a spot the server would refuse.\n *\n * Styles are inline for the reason AvatarPicker's are: apps compile this\n * package's CSS at their own build. Tokens only; the cosmetics' own colours come\n * from the person's character colour (and, for overlay images, the art).\n */\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Icon } from '@wolffm/themes'\nimport type { AvatarSettings, LoadoutUpdate } from '@wolffm/prefs-client/avatar'\nimport {\n  COSMETICS,\n  COSMETICS_BY_ID,\n  COSMETIC_SLOTS,\n  PLACEMENT_DEFAULT,\n  PLACEMENT_LIMITS,\n  avatarHtml,\n  cleanLoadout,\n  ensureCosmeticsStyles,\n  fitPlacement,\n  messageHtml,\n  nameHtml,\n  placementTransform,\n  wornCosmetics,\n  type AvatarCosmetics,\n  type CosmeticSlot,\n  type Loadout,\n  type OverlayArt,\n  type Placement\n} from '@wolffm/prefs-client/cosmetics'\nimport { AvatarPicker } from './AvatarPicker'\nimport { AVATAR_EVENT } from '../lib/avatarEvent'\nimport {\n  avatarClient,\n  avatarErrorText,\n  fetchCharacters,\n  portraitUrl,\n  type CharacterSet\n} from '../lib/avatarData'\n\ntype Tab = 'picture' | CosmeticSlot\n\nconst SLOT_LABEL: Record<CosmeticSlot, string> = {\n  effect: 'Effect',\n  gradient: 'Gradient',\n  font: 'Font',\n  overlay: 'Overlay',\n  message: 'Message'\n}\n\nconst SLIDERS = [\n  ['x', 'Left/right', '%'],\n  ['y', 'Up/down', '%'],\n  ['r', 'Rotate', '°'],\n  ['s', 'Size', '%']\n] as const\n\nconst S = {\n  body: { display: 'grid', gap: 16, alignItems: 'start' },\n  side: { display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 },\n  stage: {\n    position: 'relative',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    gap: 12,\n    padding: '48px 12px 18px',\n    borderRadius: 10,\n    background: 'var(--color-bg-alt)',\n    border: '1px solid var(--color-border)',\n    touchAction: 'none',\n    userSelect: 'none'\n  },\n  tryOn: {\n    position: 'absolute',\n    left: 8,\n    right: 8,\n    top: 8,\n    display: 'flex',\n    alignItems: 'center',\n    gap: 6,\n    padding: '4px 8px',\n    borderRadius: 6,\n    background: 'var(--color-primary-bg)',\n    color: 'var(--color-on-primary-bg)',\n    fontSize: '0.72rem'\n  },\n  linkBtn: {\n    border: 0,\n    background: 'none',\n    color: 'inherit',\n    textDecoration: 'underline',\n    cursor: 'pointer',\n    fontSize: 'inherit',\n    padding: 0,\n    flex: 'none'\n  },\n  chat: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 10,\n    padding: 12,\n    borderRadius: 10,\n    background: 'var(--color-bg)',\n    border: '1px solid var(--color-border)'\n  },\n  chatHead: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    fontSize: '0.72rem',\n    color: 'var(--color-text-muted)'\n  },\n  msg: { display: 'flex', gap: 10, alignItems: 'flex-start' },\n  who: { minHeight: 22, display: 'flex', alignItems: 'center' },\n  line: { fontSize: '0.85rem', marginTop: 2 },\n  place: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 8,\n    padding: 12,\n    borderRadius: 10,\n    border: '1px solid var(--color-border)'\n  },\n  placeHead: { display: 'flex', flexDirection: 'column', gap: 2, fontSize: '0.8rem' },\n  hint: { fontSize: '0.72rem', color: 'var(--color-text-muted)' },\n  slider: {\n    display: 'grid',\n    gridTemplateColumns: '64px 1fr 40px',\n    alignItems: 'center',\n    gap: 6,\n    fontSize: '0.75rem',\n    color: 'var(--color-text-muted)'\n  },\n  out: { textAlign: 'right', color: 'var(--color-text)', fontVariantNumeric: 'tabular-nums' },\n  toggles: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: 10,\n    alignItems: 'center',\n    fontSize: '0.75rem',\n    color: 'var(--color-text-muted)'\n  },\n  tabs: {\n    display: 'flex',\n    gap: 2,\n    borderBottom: '1px solid var(--color-border)',\n    overflowX: 'auto',\n    scrollbarWidth: 'none'\n  },\n  tab: {\n    flex: 'none',\n    padding: '7px 11px',\n    borderBottomWidth: 2,\n    borderBottomStyle: 'solid',\n    borderBottomColor: 'transparent',\n    borderTop: 0,\n    borderLeft: 0,\n    borderRight: 0,\n    background: 'none',\n    cursor: 'pointer',\n    fontSize: '0.82rem',\n    fontWeight: 500,\n    color: 'var(--color-text-muted)'\n  },\n  tabOn: { color: 'var(--color-text)', borderBottomColor: 'var(--color-primary)' },\n  count: { fontSize: '0.68rem', marginLeft: 4, opacity: 0.8, fontVariantNumeric: 'tabular-nums' },\n  pane: { display: 'flex', flexDirection: 'column', gap: 10, paddingTop: 10 },\n  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(112px, 1fr))', gap: 8 },\n  tile: {\n    position: 'relative',\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 5,\n    padding: 6,\n    borderRadius: 8,\n    border: '1px solid var(--color-border)',\n    background: 'var(--color-bg)',\n    color: 'var(--color-text)',\n    cursor: 'pointer',\n    textAlign: 'left',\n    font: 'inherit'\n  },\n  tileOn: {\n    borderColor: 'var(--color-primary)',\n    boxShadow: 'inset 0 0 0 1px var(--color-primary)'\n  },\n  tileTrying: { borderStyle: 'dashed', borderColor: 'var(--color-primary)' },\n  tilePv: {\n    height: 58,\n    borderRadius: 6,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    background: 'var(--color-bg-alt)',\n    overflow: 'hidden',\n    padding: '0 8px',\n    fontSize: '0.8rem'\n  },\n  tileName: { fontSize: '0.8rem', fontWeight: 500, display: 'flex', alignItems: 'center', gap: 5 },\n  tileEarn: { fontSize: '0.7rem', lineHeight: 1.3, color: 'var(--color-text-muted)' },\n  foot: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    gap: 8,\n    flexWrap: 'wrap',\n    fontSize: '0.75rem',\n    color: 'var(--color-text-muted)'\n  }\n} satisfies Record<string, React.CSSProperties>\n\n/**\n * Trusted HTML from the cosmetics renderer, which escapes every string it is\n * given. Memoised on the string and the style: React re-sets innerHTML on every\n * render even when the string is the same, and replacing the nodes under the\n * pointer between mousedown and mouseup swallows the click.\n */\nconst Html = React.memo(\n  function Html({ html, style }: { html: string; style?: React.CSSProperties }) {\n    return <span style={style} dangerouslySetInnerHTML={{ __html: html }} />\n  },\n  (a, b) => a.html === b.html && JSON.stringify(a.style) === JSON.stringify(b.style)\n)\n\n/**\n * Play a tile's message reveal again. A finished reveal holds no animation (it\n * fills backwards only), so its markup is re-set. This runs synchronously in\n * mouseenter, before any press, so it cannot split a click; the memo above keeps\n * React from touching it afterwards.\n */\nfunction replayPreview(tile: HTMLElement) {\n  const pv = tile.firstElementChild\n  if (!pv) return\n  const markup = pv.innerHTML\n  pv.innerHTML = markup\n}\n\nfunction useNarrow(): boolean {\n  const query = '(max-width: 640px)'\n  const [narrow, setNarrow] = useState(() => window.matchMedia(query).matches)\n  useEffect(() => {\n    const mq = window.matchMedia(query)\n    const on = () => setNarrow(mq.matches)\n    mq.addEventListener('change', on)\n    return () => mq.removeEventListener('change', on)\n  }, [])\n  return narrow\n}\n\n/** Move every drawing of one overlay in `root` to `p`, without re-rendering (smooth while dragging). */\nfunction applyPlacement(root: HTMLElement | null, id: string, p: Placement) {\n  root?.querySelectorAll<HTMLElement>(`.hc-art[data-hc-art=\"${id}\"]`).forEach(ol => {\n    ol.style.zIndex = p.back ? '0' : '3'\n    const adj = ol.firstElementChild as HTMLElement | null\n    if (adj) adj.style.transform = placementTransform(p)\n  })\n}\n\n/** Settings with a new loadout, and what is worn recomputed from it. */\nfunction withLoadout(s: AvatarSettings, loadout: Loadout): AvatarSettings {\n  return {\n    ...s,\n    cosmetics: { ...s.cosmetics, loadout },\n    avatar: { ...s.avatar, cosmetics: wornCosmetics(loadout) }\n  }\n}\n\nexport interface AvatarBuilderProps {\n  /** The person's display name, for the preview. */\n  name: string | null\n}\n\nexport function AvatarBuilder({ name }: AvatarBuilderProps) {\n  const [settings, setSettings] = useState<AvatarSettings | null>(null)\n  const [sets, setSets] = useState<CharacterSet[] | null>(null)\n  const [busy, setBusy] = useState(false)\n  const [error, setError] = useState<string | null>(null)\n  const [tab, setTab] = useState<Tab>('picture')\n  const [tryOn, setTryOn] = useState<{ slot: CosmeticSlot; id: string } | null>(null)\n  const [showLocked, setShowLocked] = useState(true)\n  const [replay, setReplay] = useState(0)\n  const narrow = useNarrow()\n  const root = useRef<HTMLDivElement>(null)\n  // Only the newest cosmetics request may set state: equips sent quickly in a\n  // row can answer out of order.\n  const seq = useRef(0)\n\n  useEffect(() => ensureCosmeticsStyles(), [])\n\n  useEffect(() => {\n    let live = true\n    avatarClient\n      .get()\n      .then(s => live && setSettings(s))\n      .catch((err: unknown) => live && setError(avatarErrorText(err)))\n    fetchCharacters()\n      .then(s => live && setSets(s))\n      .catch((err: unknown) => live && setError(avatarErrorText(err)))\n    return () => {\n      live = false\n    }\n  }, [])\n\n  const announce = (next: AvatarSettings) =>\n    // The page under the popout (a watchparty room, a game) re-reads the avatar\n    // from this instead of waiting for its next join.\n    window.dispatchEvent(new window.CustomEvent<AvatarSettings>(AVATAR_EVENT, { detail: next }))\n\n  const run = useCallback(async (work: () => Promise<AvatarSettings>) => {\n    setBusy(true)\n    setError(null)\n    try {\n      const next = await work()\n      setSettings(next)\n      announce(next)\n    } catch (err) {\n      setError(avatarErrorText(err))\n    } finally {\n      setBusy(false)\n    }\n  }, [])\n\n  /** Save a cosmetics change, showing `optimistic` at once. A failure re-reads the truth. */\n  const wear = useCallback(\n    async (update: LoadoutUpdate, optimistic: (s: AvatarSettings) => AvatarSettings) => {\n      const mine = ++seq.current\n      setError(null)\n      setSettings(s => (s ? optimistic(s) : s))\n      try {\n        const next = await avatarClient.setCosmetics(update)\n        if (mine !== seq.current) return\n        setSettings(next)\n        announce(next)\n      } catch (err) {\n        if (mine !== seq.current) return\n        setError(avatarErrorText(err))\n        avatarClient\n          .get()\n          .then(s => mine === seq.current && setSettings(s))\n          .catch((e: unknown) => setError(avatarErrorText(e)))\n      }\n    },\n    []\n  )\n\n  const owned = useMemo(() => new Set(settings?.cosmetics.owned ?? []), [settings])\n  const loadout = settings?.cosmetics.loadout\n  const equippedOverlay = loadout?.equipped.overlay ?? null\n  const art: OverlayArt | undefined = equippedOverlay\n    ? COSMETICS_BY_ID.get(equippedOverlay)?.art\n    : undefined\n  const editing = tab === 'overlay' && !tryOn && !!art && !!equippedOverlay\n\n  // The placement being edited, live; saved a beat after the last change.\n  const [live, setLive] = useState<Placement>(PLACEMENT_DEFAULT)\n  const saveTimer = useRef<ReturnType<typeof setTimeout>>(undefined)\n  const dragging = useRef(false)\n  useEffect(() => {\n    if (dragging.current || !equippedOverlay) return\n    setLive(loadout?.placement[equippedOverlay] ?? PLACEMENT_DEFAULT)\n  }, [equippedOverlay, loadout])\n  useEffect(() => () => clearTimeout(saveTimer.current), [])\n\n  const place = useCallback(\n    (raw: Partial<Placement>, save: 'later' | 'now' | 'no') => {\n      if (!art || !equippedOverlay) return\n      const p = fitPlacement(art, raw)\n      setLive(p)\n      applyPlacement(root.current, equippedOverlay, p)\n      clearTimeout(saveTimer.current)\n      if (save === 'no') return\n      const commit = () =>\n        void wear({ placement: { [equippedOverlay]: p } }, s =>\n          withLoadout(s, {\n            ...s.cosmetics.loadout,\n            placement: { ...s.cosmetics.loadout.placement, [equippedOverlay]: p }\n          })\n        )\n      if (save === 'now') commit()\n      else saveTimer.current = setTimeout(commit, 400)\n    },\n    [art, equippedOverlay, wear]\n  )\n\n  if (!settings) {\n    return (\n      <span className=\"settings-popout__hint\" role={error ? 'alert' : undefined}>\n        {error ?? '…'}\n      </span>\n    )\n  }\n\n  const characters = new Map((sets ?? []).flatMap(s => s.characters).map(c => [c.id, c]))\n  const character = settings.sprite ? characters.get(settings.sprite) : undefined\n  const picture = settings.avatar.url ?? (character ? portraitUrl(character) : null)\n  // Every name cosmetic derives its colours from the character's.\n  const colour: React.CSSProperties =\n    character && /^#[0-9a-f]{6}$/i.test(character.color)\n      ? ({ '--hc-base': character.color } as React.CSSProperties)\n      : {}\n  const displayName = name || 'You'\n\n  const worn: AvatarCosmetics = { ...(settings.avatar.cosmetics ?? {}) }\n  if (tryOn) {\n    worn[tryOn.slot] = tryOn.id\n    if (tryOn.slot === 'overlay') delete worn.placement\n  }\n\n  const equip = (slot: CosmeticSlot, id: string | null) => {\n    setTryOn(null)\n    void wear({ equip: { [slot]: id } }, s => {\n      const l = s.cosmetics.loadout\n      return withLoadout(s, cleanLoadout({ ...l, equipped: { ...l.equipped, [slot]: id } }, owned))\n    })\n  }\n\n  const stage = (\n    <Stage\n      html={\n        avatarHtml({ src: picture, size: 112, worn }) + nameHtml(displayName, worn, { large: true })\n      }\n      editing={editing}\n      overlayId={equippedOverlay}\n      live={live}\n      onPlace={place}\n      dragging={dragging}\n      style={colour}\n      banner={\n        tryOn && (\n          <div style={S.tryOn}>\n            <Icon name=\"lock\" size={12} />\n            <span style={{ flex: 1, minWidth: 0 }}>\n              Trying on {COSMETICS_BY_ID.get(tryOn.id)?.label} ·{' '}\n              {COSMETICS_BY_ID.get(tryOn.id)?.earn}\n            </span>\n            <button type=\"button\" style={S.linkBtn} onClick={() => setTryOn(null)}>\n              Take off\n            </button>\n          </div>\n        )\n      }\n    />\n  )\n\n  const chat = (\n    <div style={S.chat}>\n      <div style={S.chatHead}>\n        <span>In chat</span>\n        <button\n          type=\"button\"\n          className=\"settings-popout__btn\"\n          onClick={() => setReplay(n => n + 1)}\n        >\n          Replay\n        </button>\n      </div>\n      <div style={S.msg}>\n        <Html html={avatarHtml({ src: picture, size: 36, worn })} style={colour} />\n        <div style={{ minWidth: 0, ...colour }}>\n          <div style={S.who}>\n            <Html html={nameHtml(displayName, worn)} />\n          </div>\n          <div style={S.line}>\n            <Html key={replay} html={messageHtml('gg, that last hand was brutal', worn)} />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n\n  const placement = editing && art && (\n    <div style={S.place} role=\"group\" aria-label=\"Placement\">\n      <div style={S.placeHead}>\n        <strong>Placement</strong>\n        <span style={S.hint}>\n          Drag it on the avatar. The top handle turns it, the corner resizes it.\n        </span>\n      </div>\n      {SLIDERS.map(([k, label, unit]) => (\n        <label key={k} style={S.slider}>\n          <span>{label}</span>\n          <input\n            type=\"range\"\n            min={PLACEMENT_LIMITS[k][0]}\n            max={PLACEMENT_LIMITS[k][1]}\n            value={live[k]}\n            onChange={e => place({ ...live, [k]: Number(e.currentTarget.value) }, 'later')}\n            style={{ width: '100%', accentColor: 'var(--color-primary)' }}\n          />\n          <output style={S.out}>\n            {live[k]}\n            {unit}\n          </output>\n        </label>\n      ))}\n      <div style={S.toggles}>\n        <label>\n          <input\n            type=\"checkbox\"\n            checked={live.flip}\n            onChange={e => place({ ...live, flip: e.currentTarget.checked }, 'now')}\n          />{' '}\n          Mirror\n        </label>\n        <label>\n          <input\n            type=\"checkbox\"\n            checked={live.back}\n            onChange={e => place({ ...live, back: e.currentTarget.checked }, 'now')}\n          />{' '}\n          Behind\n        </label>\n        <button\n          type=\"button\"\n          className=\"settings-popout__btn\"\n          onClick={() => place(PLACEMENT_DEFAULT, 'now')}\n        >\n          Reset\n        </button>\n      </div>\n    </div>\n  )\n\n  const tabs: Tab[] = ['picture', ...COSMETIC_SLOTS]\n  const tabLabel = (t: Tab) => (t === 'picture' ? 'Picture' : SLOT_LABEL[t])\n\n  return (\n    <div\n      ref={root}\n      style={{ ...S.body, gridTemplateColumns: narrow ? 'minmax(0, 1fr)' : '240px minmax(0, 1fr)' }}\n    >\n      <div style={S.side}>\n        {stage}\n        {chat}\n        {placement}\n      </div>\n      <div style={{ minWidth: 0 }}>\n        <div style={S.tabs} role=\"tablist\" aria-label=\"Avatar\">\n          {tabs.map(t => {\n            const items = t === 'picture' ? [] : COSMETICS.filter(i => i.slot === t)\n            return (\n              <button\n                key={t}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={tab === t}\n                style={{ ...S.tab, ...(tab === t ? S.tabOn : {}) }}\n                onClick={() => {\n                  setTab(t)\n                  setTryOn(null)\n                }}\n              >\n                {tabLabel(t)}\n                {t !== 'picture' && (\n                  <span style={S.count}>\n                    {items.filter(i => owned.has(i.id)).length}/{items.length}\n                  </span>\n                )}\n              </button>\n            )\n          })}\n        </div>\n        <div style={S.pane} role=\"tabpanel\" aria-label={tabLabel(tab)}>\n          {tab === 'picture' ? (\n            <AvatarPicker settings={settings} sets={sets} busy={busy} run={run} />\n          ) : (\n            <SlotGrid\n              slot={tab}\n              owned={owned}\n              equipped={loadout?.equipped[tab] ?? null}\n              tryOn={tryOn}\n              showLocked={showLocked}\n              onShowLocked={setShowLocked}\n              preview={id => {\n                const only: AvatarCosmetics = { [tab]: id ?? undefined }\n                if (tab === 'overlay') return avatarHtml({ src: picture, size: 40, worn: only })\n                if (tab === 'message') return messageHtml('gg, rematch?', only, { keep: true })\n                // A name tile shows the item on top of what is worn in the other name slots.\n                return nameHtml(displayName, { ...worn, [tab]: id ?? undefined })\n              }}\n              colour={colour}\n              onEquip={id => equip(tab, id)}\n              onTry={id =>\n                setTryOn(t => (t?.slot === tab && t.id === id ? null : { slot: tab, id }))\n              }\n            />\n          )}\n          {error && (\n            <span className=\"settings-popout__error\" role=\"alert\">\n              {error}\n            </span>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n\ninterface StageProps {\n  html: string\n  editing: boolean\n  overlayId: string | null\n  live: Placement\n  onPlace: (p: Partial<Placement>, save: 'later' | 'now' | 'no') => void\n  dragging: React.MutableRefObject<boolean>\n  style: React.CSSProperties\n  banner: React.ReactNode\n}\n\n/** The big preview, and the placement handles drawn on its overlay while editing. */\nfunction Stage({ html, editing, overlayId, live, onPlace, dragging, style, banner }: StageProps) {\n  const box = useRef<HTMLDivElement>(null)\n  const drag = useRef<{\n    mode: string\n    p0: Placement\n    x0: number\n    y0: number\n    cx: number\n    cy: number\n    a0: number\n    d0: number\n    size: number\n    last: Placement\n  } | null>(null)\n\n  // The handles live inside the overlay's placement box, so they turn and\n  // scale with it. Re-added whenever the preview is redrawn.\n  useEffect(() => {\n    const adj = box.current?.querySelector('.hc-art .hc-adj')\n    if (!editing || !adj) return\n    const gz = document.createElement('span')\n    gz.dataset.g = 'move'\n    gz.setAttribute('aria-hidden', 'true')\n    gz.style.cssText =\n      'position:absolute;inset:-3px;border:1.5px dashed var(--color-primary);border-radius:6px;pointer-events:auto;cursor:move'\n    const handle = (g: string, css: string) => {\n      const h = document.createElement('i')\n      h.dataset.g = g\n      h.style.cssText = `position:absolute;pointer-events:auto;${css}`\n      gz.appendChild(h)\n    }\n    handle(\n      'rot',\n      'left:50%;top:-20px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--color-primary);cursor:grab'\n    )\n    handle(\n      'scale',\n      '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'\n    )\n    adj.appendChild(gz)\n    return () => gz.remove()\n  }, [html, editing])\n\n  const down = (e: React.PointerEvent) => {\n    const g = (e.target as HTMLElement).closest<HTMLElement>('[data-g]')\n    const adj = g?.closest('.hc-adj')\n    const avatar = box.current?.querySelector('.hc-av')\n    if (!g || !adj || !avatar || !editing || !overlayId) return\n    e.preventDefault()\n    g.setPointerCapture(e.pointerId)\n    const r = adj.getBoundingClientRect()\n    const cx = r.left + r.width / 2\n    const cy = r.top + r.height / 2\n    const size = avatar.getBoundingClientRect().width\n    dragging.current = true\n    drag.current = {\n      mode: g.dataset.g ?? 'move',\n      p0: live,\n      x0: e.clientX,\n      y0: e.clientY,\n      cx,\n      cy,\n      a0: Math.atan2(e.clientY - cy, e.clientX - cx),\n      d0: Math.hypot(e.clientX - cx, e.clientY - cy) || 1,\n      size,\n      last: live\n    }\n  }\n  const move = (e: React.PointerEvent) => {\n    const d = drag.current\n    if (!d) return\n    let next: Partial<Placement> = d.p0\n    if (d.mode === 'move') {\n      next = {\n        ...d.p0,\n        x: d.p0.x + ((e.clientX - d.x0) / d.size) * 100,\n        y: d.p0.y + ((e.clientY - d.y0) / d.size) * 100\n      }\n    } else if (d.mode === 'rot') {\n      const a = Math.atan2(e.clientY - d.cy, e.clientX - d.cx)\n      next = { ...d.p0, r: d.p0.r + ((a - d.a0) * 180) / Math.PI }\n    } else {\n      next = { ...d.p0, s: (d.p0.s * Math.hypot(e.clientX - d.cx, e.clientY - d.cy)) / d.d0 }\n    }\n    d.last = next as Placement\n    onPlace(next, 'no')\n  }\n  const up = () => {\n    const d = drag.current\n    if (!d) return\n    drag.current = null\n    dragging.current = false\n    onPlace(d.last, 'now')\n  }\n\n  return (\n    <div\n      ref={box}\n      role=\"group\"\n      aria-label=\"Preview\"\n      style={{ ...S.stage, ...style }}\n      onPointerDown={down}\n      onPointerMove={move}\n      onPointerUp={up}\n      onPointerCancel={up}\n    >\n      {banner}\n      <Html html={html} style={{ display: 'contents' }} />\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n\ninterface SlotGridProps {\n  slot: CosmeticSlot\n  owned: ReadonlySet<string>\n  equipped: string | null\n  tryOn: { slot: CosmeticSlot; id: string } | null\n  showLocked: boolean\n  onShowLocked: (on: boolean) => void\n  preview: (id: string | null) => string\n  colour: React.CSSProperties\n  onEquip: (id: string | null) => void\n  onTry: (id: string) => void\n}\n\n/** One slot's items: None, then everything, earned or not. */\nfunction SlotGrid({\n  slot,\n  owned,\n  equipped,\n  tryOn,\n  showLocked,\n  onShowLocked,\n  preview,\n  colour,\n  onEquip,\n  onTry\n}: SlotGridProps) {\n  const items = COSMETICS.filter(i => i.slot === slot)\n  const locked = items.filter(i => !owned.has(i.id))\n  const shown = showLocked ? items : items.filter(i => owned.has(i.id))\n\n  return (\n    <>\n      <div style={S.grid}>\n        <button\n          type=\"button\"\n          aria-pressed={equipped === null}\n          style={{ ...S.tile, ...(equipped === null ? S.tileOn : {}) }}\n          onClick={() => onEquip(null)}\n        >\n          <Html html={preview(null)} style={{ ...S.tilePv, ...colour }} />\n          <span style={S.tileName}>None</span>\n        </button>\n        {shown.map(item => {\n          const own = owned.has(item.id)\n          const on = equipped === item.id\n          const trying = tryOn?.slot === slot && tryOn.id === item.id\n          return (\n            <button\n              key={item.id}\n              type=\"button\"\n              aria-pressed={own ? on : trying}\n              aria-label={own ? item.label : `${item.label}, locked. ${item.earn}. Try it on.`}\n              style={{\n                ...S.tile,\n                ...(on ? S.tileOn : {}),\n                ...(trying ? S.tileTrying : {})\n              }}\n              onClick={() => (own ? onEquip(item.id) : onTry(item.id))}\n              // A message reveal plays once; hovering its tile plays it again.\n              onMouseEnter={e => slot === 'message' && replayPreview(e.currentTarget)}\n            >\n              <Html\n                html={preview(item.id)}\n                style={{ ...S.tilePv, ...colour, opacity: own ? 1 : 0.55 }}\n              />\n              <span style={{ ...S.tileName, color: own ? undefined : 'var(--color-text-muted)' }}>\n                {!own && <Icon name=\"lock\" size={12} />}\n                {item.label}\n              </span>\n              {!own && <span style={S.tileEarn}>{item.earn}</span>}\n            </button>\n          )\n        })}\n      </div>\n      <div style={S.foot}>\n        <span>\n          {locked.length\n            ? `${locked.length} still to earn. Pick one to try it on.`\n            : 'You have earned all of these.'}\n        </span>\n        {locked.length > 0 && (\n          <label>\n            <input\n              type=\"checkbox\"\n              checked={showLocked}\n              onChange={e => onShowLocked(e.currentTarget.checked)}\n            />{' '}\n            Show locked\n          </label>\n        )}\n      </div>\n    </>\n  )\n}\n"],"names":["Html","live"],"mappings":";;;;;;;AAwDA,MAAM,aAA2C;AAAA,EAC/C,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AACX;AAEA,MAAM,UAAU;AAAA,EACd,CAAC,KAAK,cAAc,GAAG;AAAA,EACvB,CAAC,KAAK,WAAW,GAAG;AAAA,EACpB,CAAC,KAAK,UAAU,GAAG;AAAA,EACnB,CAAC,KAAK,QAAQ,GAAG;AACnB;AAEA,MAAM,IAAI;AAAA,EACR,MAAM,EAAE,SAAS,QAAQ,KAAK,IAAI,YAAY,QAAA;AAAA,EAC9C,MAAM,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,IAAI,UAAU,EAAA;AAAA,EACrE,OAAO;AAAA,IACL,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,SAAS;AAAA,IACT,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,YAAY;AAAA,EAAA;AAAA,EAEd,OAAO;AAAA,IACL,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,SAAS;AAAA,IACT,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,UAAU;AAAA,EAAA;AAAA,EAEZ,SAAS;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,SAAS;AAAA,IACT,MAAM;AAAA,EAAA;AAAA,EAER,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK;AAAA,IACL,SAAS;AAAA,IACT,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,QAAQ;AAAA,EAAA;AAAA,EAEV,UAAU;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAAA,EAET,KAAK,EAAE,SAAS,QAAQ,KAAK,IAAI,YAAY,aAAA;AAAA,EAC7C,KAAK,EAAE,WAAW,IAAI,SAAS,QAAQ,YAAY,SAAA;AAAA,EACnD,MAAM,EAAE,UAAU,WAAW,WAAW,EAAA;AAAA,EACxC,OAAO;AAAA,IACL,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK;AAAA,IACL,SAAS;AAAA,IACT,cAAc;AAAA,IACd,QAAQ;AAAA,EAAA;AAAA,EAEV,WAAW,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,GAAG,UAAU,SAAA;AAAA,EACzE,MAAM,EAAE,UAAU,WAAW,OAAO,0BAAA;AAAA,EACpC,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,qBAAqB;AAAA,IACrB,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAAA,EAET,KAAK,EAAE,WAAW,SAAS,OAAO,qBAAqB,oBAAoB,eAAA;AAAA,EAC3E,SAAS;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,IACV,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAAA,EAET,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,KAAK;AAAA,IACL,cAAc;AAAA,IACd,WAAW;AAAA,IACX,gBAAgB;AAAA,EAAA;AAAA,EAElB,KAAK;AAAA,IACH,MAAM;AAAA,IACN,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,EAAA;AAAA,EAET,OAAO,EAAE,OAAO,qBAAqB,mBAAmB,uBAAA;AAAA,EACxD,OAAO,EAAE,UAAU,WAAW,YAAY,GAAG,SAAS,KAAK,oBAAoB,eAAA;AAAA,EAC/E,MAAM,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,IAAI,YAAY,GAAA;AAAA,EACvE,MAAM,EAAE,SAAS,QAAQ,qBAAqB,yCAAyC,KAAK,EAAA;AAAA,EAC5F,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,KAAK;AAAA,IACL,SAAS;AAAA,IACT,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,MAAM;AAAA,EAAA;AAAA,EAER,QAAQ;AAAA,IACN,aAAa;AAAA,IACb,WAAW;AAAA,EAAA;AAAA,EAEb,YAAY,EAAE,aAAa,UAAU,aAAa,uBAAA;AAAA,EAClD,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU,EAAE,UAAU,UAAU,YAAY,KAAK,SAAS,QAAQ,YAAY,UAAU,KAAK,EAAA;AAAA,EAC7F,UAAU,EAAE,UAAU,UAAU,YAAY,KAAK,OAAO,0BAAA;AAAA,EACxD,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAEX;AAQA,MAAM,OAAO,MAAM;AAAA,EACjB,SAASA,MAAK,EAAE,MAAM,SAAwD;AAC5E,+BAAQ,QAAA,EAAK,OAAc,yBAAyB,EAAE,QAAQ,QAAQ;AAAA,EACxE;AAAA,EACA,CAAC,GAAG,MAAM,EAAE,SAAS,EAAE,QAAQ,KAAK,UAAU,EAAE,KAAK,MAAM,KAAK,UAAU,EAAE,KAAK;AACnF;AAQA,SAAS,cAAc,MAAmB;AACxC,QAAM,KAAK,KAAK;AAChB,MAAI,CAAC,GAAI;AACT,QAAM,SAAS,GAAG;AAClB,KAAG,YAAY;AACjB;AAEA,SAAS,YAAqB;AAC5B,QAAM,QAAQ;AACd,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,MAAM,OAAO,WAAW,KAAK,EAAE,OAAO;AAC3E,YAAU,MAAM;AACd,UAAM,KAAK,OAAO,WAAW,KAAK;AAClC,UAAM,KAAK,MAAM,UAAU,GAAG,OAAO;AACrC,OAAG,iBAAiB,UAAU,EAAE;AAChC,WAAO,MAAM,GAAG,oBAAoB,UAAU,EAAE;AAAA,EAClD,GAAG,CAAA,CAAE;AACL,SAAO;AACT;AAGA,SAAS,eAAe,MAA0B,IAAY,GAAc;AAC1E,QAAM,iBAA8B,wBAAwB,EAAE,IAAI,EAAE,QAAQ,CAAA,OAAM;AAChF,OAAG,MAAM,SAAS,EAAE,OAAO,MAAM;AACjC,UAAM,MAAM,GAAG;AACf,QAAI,IAAK,KAAI,MAAM,YAAY,mBAAmB,CAAC;AAAA,EACrD,CAAC;AACH;AAGA,SAAS,YAAY,GAAmB,SAAkC;AACxE,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW,EAAE,GAAG,EAAE,WAAW,QAAA;AAAA,IAC7B,QAAQ,EAAE,GAAG,EAAE,QAAQ,WAAW,cAAc,OAAO,EAAA;AAAA,EAAE;AAE7D;AAOO,SAAS,cAAc,EAAE,QAA4B;AAC1D,QAAM,CAAC,UAAU,WAAW,IAAI,SAAgC,IAAI;AACpE,QAAM,CAAC,MAAM,OAAO,IAAI,SAAgC,IAAI;AAC5D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,CAAC,KAAK,MAAM,IAAI,SAAc,SAAS;AAC7C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAoD,IAAI;AAClF,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,IAAI;AACjD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,CAAC;AACtC,QAAM,SAAS,UAAA;AACf,QAAM,OAAO,OAAuB,IAAI;AAGxC,QAAM,MAAM,OAAO,CAAC;AAEpB,YAAU,MAAM,sBAAA,GAAyB,EAAE;AAE3C,YAAU,MAAM;AACd,QAAIC,QAAO;AACX,iBACG,MACA,KAAK,CAAA,MAAKA,SAAQ,YAAY,CAAC,CAAC,EAChC,MAAM,CAAC,QAAiBA,SAAQ,SAAS,gBAAgB,GAAG,CAAC,CAAC;AACjE,oBAAA,EACG,KAAK,CAAA,MAAKA,SAAQ,QAAQ,CAAC,CAAC,EAC5B,MAAM,CAAC,QAAiBA,SAAQ,SAAS,gBAAgB,GAAG,CAAC,CAAC;AACjE,WAAO,MAAM;AACXA,cAAO;AAAA,IACT;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,WAAW,CAAC;AAAA;AAAA;AAAA,IAGhB,OAAO,cAAc,IAAI,OAAO,YAA4B,cAAc,EAAE,QAAQ,MAAM,CAAC;AAAA;AAE7F,QAAM,MAAM,YAAY,OAAO,SAAwC;AACrE,YAAQ,IAAI;AACZ,aAAS,IAAI;AACb,QAAI;AACF,YAAM,OAAO,MAAM,KAAA;AACnB,kBAAY,IAAI;AAChB,eAAS,IAAI;AAAA,IACf,SAAS,KAAK;AACZ,eAAS,gBAAgB,GAAG,CAAC;AAAA,IAC/B,UAAA;AACE,cAAQ,KAAK;AAAA,IACf;AAAA,EACF,GAAG,CAAA,CAAE;AAGL,QAAM,OAAO;AAAA,IACX,OAAO,QAAuB,eAAsD;AAClF,YAAM,OAAO,EAAE,IAAI;AACnB,eAAS,IAAI;AACb,kBAAY,CAAA,MAAM,IAAI,WAAW,CAAC,IAAI,CAAE;AACxC,UAAI;AACF,cAAM,OAAO,MAAM,aAAa,aAAa,MAAM;AACnD,YAAI,SAAS,IAAI,QAAS;AAC1B,oBAAY,IAAI;AAChB,iBAAS,IAAI;AAAA,MACf,SAAS,KAAK;AACZ,YAAI,SAAS,IAAI,QAAS;AAC1B,iBAAS,gBAAgB,GAAG,CAAC;AAC7B,qBACG,MACA,KAAK,OAAK,SAAS,IAAI,WAAW,YAAY,CAAC,CAAC,EAChD,MAAM,CAAC,MAAe,SAAS,gBAAgB,CAAC,CAAC,CAAC;AAAA,MACvD;AAAA,IACF;AAAA,IACA,CAAA;AAAA,EAAC;AAGH,QAAM,QAAQ,QAAQ,MAAM,IAAI,IAAI,UAAU,UAAU,SAAS,CAAA,CAAE,GAAG,CAAC,QAAQ,CAAC;AAChF,QAAM,UAAU,UAAU,UAAU;AACpC,QAAM,kBAAkB,SAAS,SAAS,WAAW;AACrD,QAAM,MAA8B,kBAChC,gBAAgB,IAAI,eAAe,GAAG,MACtC;AACJ,QAAM,UAAU,QAAQ,aAAa,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC;AAG1D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAoB,iBAAiB;AAC7D,QAAM,YAAY,OAAsC,MAAS;AACjE,QAAM,WAAW,OAAO,KAAK;AAC7B,YAAU,MAAM;AACd,QAAI,SAAS,WAAW,CAAC,gBAAiB;AAC1C,YAAQ,SAAS,UAAU,eAAe,KAAK,iBAAiB;AAAA,EAClE,GAAG,CAAC,iBAAiB,OAAO,CAAC;AAC7B,YAAU,MAAM,MAAM,aAAa,UAAU,OAAO,GAAG,CAAA,CAAE;AAEzD,QAAM,QAAQ;AAAA,IACZ,CAAC,KAAyB,SAAiC;AACzD,UAAI,CAAC,OAAO,CAAC,gBAAiB;AAC9B,YAAM,IAAI,aAAa,KAAK,GAAG;AAC/B,cAAQ,CAAC;AACT,qBAAe,KAAK,SAAS,iBAAiB,CAAC;AAC/C,mBAAa,UAAU,OAAO;AAC9B,UAAI,SAAS,KAAM;AACnB,YAAM,SAAS,MACb,KAAK;AAAA,QAAK,EAAE,WAAW,EAAE,CAAC,eAAe,GAAG,IAAE;AAAA,QAAK,CAAA,MACjD,YAAY,GAAG;AAAA,UACb,GAAG,EAAE,UAAU;AAAA,UACf,WAAW,EAAE,GAAG,EAAE,UAAU,QAAQ,WAAW,CAAC,eAAe,GAAG,EAAA;AAAA,QAAE,CACrE;AAAA,MAAA;AAEL,UAAI,SAAS,MAAO,QAAA;AAAA,UACf,WAAU,UAAU,WAAW,QAAQ,GAAG;AAAA,IACjD;AAAA,IACA,CAAC,KAAK,iBAAiB,IAAI;AAAA,EAAA;AAG7B,MAAI,CAAC,UAAU;AACb,WACE,oBAAC,UAAK,WAAU,yBAAwB,MAAM,QAAQ,UAAU,QAC7D,UAAA,SAAS,IAAA,CACZ;AAAA,EAEJ;AAEA,QAAM,aAAa,IAAI,KAAK,QAAQ,IAAI,QAAQ,CAAA,MAAK,EAAE,UAAU,EAAE,IAAI,CAAA,MAAK,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;AACtF,QAAM,YAAY,SAAS,SAAS,WAAW,IAAI,SAAS,MAAM,IAAI;AACtE,QAAM,UAAU,SAAS,OAAO,QAAQ,YAAY,YAAY,SAAS,IAAI;AAE7E,QAAM,SACJ,aAAa,kBAAkB,KAAK,UAAU,KAAK,IAC9C,EAAE,aAAa,UAAU,MAAA,IAC1B,CAAA;AACN,QAAM,cAAc,QAAQ;AAE5B,QAAM,OAAwB,EAAE,GAAI,SAAS,OAAO,aAAa,CAAA,EAAC;AAClE,MAAI,OAAO;AACT,SAAK,MAAM,IAAI,IAAI,MAAM;AACzB,QAAI,MAAM,SAAS,UAAW,QAAO,KAAK;AAAA,EAC5C;AAEA,QAAM,QAAQ,CAAC,MAAoB,OAAsB;AACvD,aAAS,IAAI;AACb,SAAK,KAAK,EAAE,OAAO,EAAE,CAAC,IAAI,GAAG,GAAA,EAAG,GAAK,CAAA,MAAK;AACxC,YAAM,IAAI,EAAE,UAAU;AACtB,aAAO,YAAY,GAAG,aAAa,EAAE,GAAG,GAAG,UAAU,EAAE,GAAG,EAAE,UAAU,CAAC,IAAI,GAAG,KAAG,GAAK,KAAK,CAAC;AAAA,IAC9F,CAAC;AAAA,EACH;AAEA,QAAM,QACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MACE,WAAW,EAAE,KAAK,SAAS,MAAM,KAAK,KAAA,CAAM,IAAI,SAAS,aAAa,MAAM,EAAE,OAAO,MAAM;AAAA,MAE7F;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,OAAO;AAAA,MACP,QACE,SACE,qBAAC,OAAA,EAAI,OAAO,EAAE,OACZ,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAK,MAAK,QAAO,MAAM,IAAI;AAAA,QAC5B,qBAAC,UAAK,OAAO,EAAE,MAAM,GAAG,UAAU,KAAK,UAAA;AAAA,UAAA;AAAA,UAC1B,gBAAgB,IAAI,MAAM,EAAE,GAAG;AAAA,UAAM;AAAA,UAAG;AAAA,UAClD,gBAAgB,IAAI,MAAM,EAAE,GAAG;AAAA,QAAA,GAClC;AAAA,QACA,oBAAC,UAAA,EAAO,MAAK,UAAS,OAAO,EAAE,SAAS,SAAS,MAAM,SAAS,IAAI,GAAG,UAAA,WAAA,CAEvE;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAMR,QAAM,OACJ,qBAAC,OAAA,EAAI,OAAO,EAAE,MACZ,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,OAAO,EAAE,UACZ,UAAA;AAAA,MAAA,oBAAC,UAAK,UAAA,UAAA,CAAO;AAAA,MACb;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM,UAAU,CAAA,MAAK,IAAI,CAAC;AAAA,UACpC,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED,GACF;AAAA,IACA,qBAAC,OAAA,EAAI,OAAO,EAAE,KACZ,UAAA;AAAA,MAAA,oBAAC,MAAA,EAAK,MAAM,WAAW,EAAE,KAAK,SAAS,MAAM,IAAI,KAAA,CAAM,GAAG,OAAO,OAAA,CAAQ;AAAA,MACzE,qBAAC,SAAI,OAAO,EAAE,UAAU,GAAG,GAAG,UAC5B,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,OAAO,EAAE,KACZ,UAAA,oBAAC,MAAA,EAAK,MAAM,SAAS,aAAa,IAAI,EAAA,CAAG,GAC3C;AAAA,QACA,oBAAC,OAAA,EAAI,OAAO,EAAE,MACZ,UAAA,oBAAC,MAAA,EAAkB,MAAM,YAAY,iCAAiC,IAAI,EAAA,GAA/D,MAAkE,EAAA,CAC/E;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAGF,QAAM,YAAY,WAAW,OAC3B,qBAAC,OAAA,EAAI,OAAO,EAAE,OAAO,MAAK,SAAQ,cAAW,aAC3C,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,OAAO,EAAE,WACZ,UAAA;AAAA,MAAA,oBAAC,YAAO,UAAA,YAAA,CAAS;AAAA,MACjB,oBAAC,QAAA,EAAK,OAAO,EAAE,MAAM,UAAA,yEAAA,CAErB;AAAA,IAAA,GACF;AAAA,IACC,QAAQ,IAAI,CAAC,CAAC,GAAG,OAAO,IAAI,MAC3B,qBAAC,SAAA,EAAc,OAAO,EAAE,QACtB,UAAA;AAAA,MAAA,oBAAC,UAAM,UAAA,MAAA,CAAM;AAAA,MACb;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,KAAK,iBAAiB,CAAC,EAAE,CAAC;AAAA,UAC1B,KAAK,iBAAiB,CAAC,EAAE,CAAC;AAAA,UAC1B,OAAO,KAAK,CAAC;AAAA,UACb,UAAU,CAAA,MAAK,MAAM,EAAE,GAAG,MAAM,CAAC,CAAC,GAAG,OAAO,EAAE,cAAc,KAAK,EAAA,GAAK,OAAO;AAAA,UAC7E,OAAO,EAAE,OAAO,QAAQ,aAAa,uBAAA;AAAA,QAAuB;AAAA,MAAA;AAAA,MAE9D,qBAAC,UAAA,EAAO,OAAO,EAAE,KACd,UAAA;AAAA,QAAA,KAAK,CAAC;AAAA,QACN;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,EAAA,GAbU,CAcZ,CACD;AAAA,IACD,qBAAC,OAAA,EAAI,OAAO,EAAE,SACZ,UAAA;AAAA,MAAA,qBAAC,SAAA,EACC,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,KAAK;AAAA,YACd,UAAU,CAAA,MAAK,MAAM,EAAE,GAAG,MAAM,MAAM,EAAE,cAAc,QAAA,GAAW,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QACrE;AAAA,QAAI;AAAA,MAAA,GAET;AAAA,2BACC,SAAA,EACC,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,KAAK;AAAA,YACd,UAAU,CAAA,MAAK,MAAM,EAAE,GAAG,MAAM,MAAM,EAAE,cAAc,QAAA,GAAW,KAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QACrE;AAAA,QAAI;AAAA,MAAA,GAET;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM,MAAM,mBAAmB,KAAK;AAAA,UAC9C,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED,EAAA,CACF;AAAA,EAAA,GACF;AAGF,QAAM,OAAc,CAAC,WAAW,GAAG,cAAc;AACjD,QAAM,WAAW,CAAC,MAAY,MAAM,YAAY,YAAY,WAAW,CAAC;AAExE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,SAAS,mBAAmB,uBAAA;AAAA,MAErE,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,OAAO,EAAE,MACX,UAAA;AAAA,UAAA;AAAA,UACA;AAAA,UACA;AAAA,QAAA,GACH;AAAA,6BACC,OAAA,EAAI,OAAO,EAAE,UAAU,KACtB,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,OAAO,EAAE,MAAM,MAAK,WAAU,cAAW,UAC3C,UAAA,KAAK,IAAI,CAAA,MAAK;AACb,kBAAM,QAAQ,MAAM,YAAY,KAAK,UAAU,OAAO,CAAA,MAAK,EAAE,SAAS,CAAC;AACvE,mBACE;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,iBAAe,QAAQ;AAAA,gBACvB,OAAO,EAAE,GAAG,EAAE,KAAK,GAAI,QAAQ,IAAI,EAAE,QAAQ,GAAC;AAAA,gBAC9C,SAAS,MAAM;AACb,yBAAO,CAAC;AACR,2BAAS,IAAI;AAAA,gBACf;AAAA,gBAEC,UAAA;AAAA,kBAAA,SAAS,CAAC;AAAA,kBACV,MAAM,aACL,qBAAC,QAAA,EAAK,OAAO,EAAE,OACZ,UAAA;AAAA,oBAAA,MAAM,OAAO,CAAA,MAAK,MAAM,IAAI,EAAE,EAAE,CAAC,EAAE;AAAA,oBAAO;AAAA,oBAAE,MAAM;AAAA,kBAAA,EAAA,CACrD;AAAA,gBAAA;AAAA,cAAA;AAAA,cAdG;AAAA,YAAA;AAAA,UAkBX,CAAC,EAAA,CACH;AAAA,UACA,qBAAC,OAAA,EAAI,OAAO,EAAE,MAAM,MAAK,YAAW,cAAY,SAAS,GAAG,GACzD,UAAA;AAAA,YAAA,QAAQ,YACP,oBAAC,cAAA,EAAa,UAAoB,MAAY,MAAY,KAAU,IAEpE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN;AAAA,gBACA,UAAU,SAAS,SAAS,GAAG,KAAK;AAAA,gBACpC;AAAA,gBACA;AAAA,gBACA,cAAc;AAAA,gBACd,SAAS,CAAA,OAAM;AACb,wBAAM,OAAwB,EAAE,CAAC,GAAG,GAAG,MAAM,OAAA;AAC7C,sBAAI,QAAQ,UAAW,QAAO,WAAW,EAAE,KAAK,SAAS,MAAM,IAAI,MAAM,KAAA,CAAM;AAC/E,sBAAI,QAAQ,UAAW,QAAO,YAAY,gBAAgB,MAAM,EAAE,MAAM,MAAM;AAE9E,yBAAO,SAAS,aAAa,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,QAAW;AAAA,gBAClE;AAAA,gBACA;AAAA,gBACA,SAAS,CAAA,OAAM,MAAM,KAAK,EAAE;AAAA,gBAC5B,OAAO,CAAA,OACL,SAAS,CAAA,MAAM,GAAG,SAAS,OAAO,EAAE,OAAO,KAAK,OAAO,EAAE,MAAM,KAAK,IAAK;AAAA,cAAA;AAAA,YAAA;AAAA,YAI9E,SACC,oBAAC,QAAA,EAAK,WAAU,0BAAyB,MAAK,SAC3C,UAAA,MAAA,CACH;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAgBA,SAAS,MAAM,EAAE,MAAM,SAAS,WAAW,MAAM,SAAS,UAAU,OAAO,UAAsB;AAC/F,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,OAAO,OAWH,IAAI;AAId,YAAU,MAAM;AACd,UAAM,MAAM,IAAI,SAAS,cAAc,iBAAiB;AACxD,QAAI,CAAC,WAAW,CAAC,IAAK;AACtB,UAAM,KAAK,SAAS,cAAc,MAAM;AACxC,OAAG,QAAQ,IAAI;AACf,OAAG,aAAa,eAAe,MAAM;AACrC,OAAG,MAAM,UACP;AACF,UAAM,SAAS,CAAC,GAAW,QAAgB;AACzC,YAAM,IAAI,SAAS,cAAc,GAAG;AACpC,QAAE,QAAQ,IAAI;AACd,QAAE,MAAM,UAAU,yCAAyC,GAAG;AAC9D,SAAG,YAAY,CAAC;AAAA,IAClB;AACA;AAAA,MACE;AAAA,MACA;AAAA,IAAA;AAEF;AAAA,MACE;AAAA,MACA;AAAA,IAAA;AAEF,QAAI,YAAY,EAAE;AAClB,WAAO,MAAM,GAAG,OAAA;AAAA,EAClB,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,QAAM,OAAO,CAAC,MAA0B;AACtC,UAAM,IAAK,EAAE,OAAuB,QAAqB,UAAU;AACnE,UAAM,MAAM,GAAG,QAAQ,SAAS;AAChC,UAAM,SAAS,IAAI,SAAS,cAAc,QAAQ;AAClD,QAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,WAAW,CAAC,UAAW;AACrD,MAAE,eAAA;AACF,MAAE,kBAAkB,EAAE,SAAS;AAC/B,UAAM,IAAI,IAAI,sBAAA;AACd,UAAM,KAAK,EAAE,OAAO,EAAE,QAAQ;AAC9B,UAAM,KAAK,EAAE,MAAM,EAAE,SAAS;AAC9B,UAAM,OAAO,OAAO,sBAAA,EAAwB;AAC5C,aAAS,UAAU;AACnB,SAAK,UAAU;AAAA,MACb,MAAM,EAAE,QAAQ,KAAK;AAAA,MACrB,IAAI;AAAA,MACJ,IAAI,EAAE;AAAA,MACN,IAAI,EAAE;AAAA,MACN;AAAA,MACA;AAAA,MACA,IAAI,KAAK,MAAM,EAAE,UAAU,IAAI,EAAE,UAAU,EAAE;AAAA,MAC7C,IAAI,KAAK,MAAM,EAAE,UAAU,IAAI,EAAE,UAAU,EAAE,KAAK;AAAA,MAClD;AAAA,MACA,MAAM;AAAA,IAAA;AAAA,EAEV;AACA,QAAM,OAAO,CAAC,MAA0B;AACtC,UAAM,IAAI,KAAK;AACf,QAAI,CAAC,EAAG;AACR,QAAI,OAA2B,EAAE;AACjC,QAAI,EAAE,SAAS,QAAQ;AACrB,aAAO;AAAA,QACL,GAAG,EAAE;AAAA,QACL,GAAG,EAAE,GAAG,KAAM,EAAE,UAAU,EAAE,MAAM,EAAE,OAAQ;AAAA,QAC5C,GAAG,EAAE,GAAG,KAAM,EAAE,UAAU,EAAE,MAAM,EAAE,OAAQ;AAAA,MAAA;AAAA,IAEhD,WAAW,EAAE,SAAS,OAAO;AAC3B,YAAM,IAAI,KAAK,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE;AACvD,aAAO,EAAE,GAAG,EAAE,IAAI,GAAG,EAAE,GAAG,KAAM,IAAI,EAAE,MAAM,MAAO,KAAK,GAAA;AAAA,IAC1D,OAAO;AACL,aAAO,EAAE,GAAG,EAAE,IAAI,GAAI,EAAE,GAAG,IAAI,KAAK,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,IAAK,EAAE,GAAA;AAAA,IACrF;AACA,MAAE,OAAO;AACT,YAAQ,MAAM,IAAI;AAAA,EACpB;AACA,QAAM,KAAK,MAAM;AACf,UAAM,IAAI,KAAK;AACf,QAAI,CAAC,EAAG;AACR,SAAK,UAAU;AACf,aAAS,UAAU;AACnB,YAAQ,EAAE,MAAM,KAAK;AAAA,EACvB;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,cAAW;AAAA,MACX,OAAO,EAAE,GAAG,EAAE,OAAO,GAAG,MAAA;AAAA,MACxB,eAAe;AAAA,MACf,eAAe;AAAA,MACf,aAAa;AAAA,MACb,iBAAiB;AAAA,MAEhB,UAAA;AAAA,QAAA;AAAA,4BACA,MAAA,EAAK,MAAY,OAAO,EAAE,SAAS,aAAW,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxD;AAkBA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAkB;AAChB,QAAM,QAAQ,UAAU,OAAO,CAAA,MAAK,EAAE,SAAS,IAAI;AACnD,QAAM,SAAS,MAAM,OAAO,CAAA,MAAK,CAAC,MAAM,IAAI,EAAE,EAAE,CAAC;AACjD,QAAM,QAAQ,aAAa,QAAQ,MAAM,OAAO,OAAK,MAAM,IAAI,EAAE,EAAE,CAAC;AAEpE,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,OAAO,EAAE,MACZ,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,gBAAc,aAAa;AAAA,UAC3B,OAAO,EAAE,GAAG,EAAE,MAAM,GAAI,aAAa,OAAO,EAAE,SAAS,GAAC;AAAA,UACxD,SAAS,MAAM,QAAQ,IAAI;AAAA,UAE3B,UAAA;AAAA,YAAA,oBAAC,MAAA,EAAK,MAAM,QAAQ,IAAI,GAAG,OAAO,EAAE,GAAG,EAAE,QAAQ,GAAG,OAAA,EAAO,CAAG;AAAA,YAC9D,oBAAC,QAAA,EAAK,OAAO,EAAE,UAAU,UAAA,OAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAE9B,MAAM,IAAI,CAAA,SAAQ;AACjB,cAAM,MAAM,MAAM,IAAI,KAAK,EAAE;AAC7B,cAAM,KAAK,aAAa,KAAK;AAC7B,cAAM,SAAS,OAAO,SAAS,QAAQ,MAAM,OAAO,KAAK;AACzD,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,gBAAc,MAAM,KAAK;AAAA,YACzB,cAAY,MAAM,KAAK,QAAQ,GAAG,KAAK,KAAK,aAAa,KAAK,IAAI;AAAA,YAClE,OAAO;AAAA,cACL,GAAG,EAAE;AAAA,cACL,GAAI,KAAK,EAAE,SAAS,CAAA;AAAA,cACpB,GAAI,SAAS,EAAE,aAAa,CAAA;AAAA,YAAC;AAAA,YAE/B,SAAS,MAAO,MAAM,QAAQ,KAAK,EAAE,IAAI,MAAM,KAAK,EAAE;AAAA,YAEtD,cAAc,CAAA,MAAK,SAAS,aAAa,cAAc,EAAE,aAAa;AAAA,YAEtE,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAM,QAAQ,KAAK,EAAE;AAAA,kBACrB,OAAO,EAAE,GAAG,EAAE,QAAQ,GAAG,QAAQ,SAAS,MAAM,IAAI,KAAA;AAAA,gBAAK;AAAA,cAAA;AAAA,cAE3D,qBAAC,QAAA,EAAK,OAAO,EAAE,GAAG,EAAE,UAAU,OAAO,MAAM,SAAY,0BAAA,GACpD,UAAA;AAAA,gBAAA,CAAC,OAAO,oBAAC,MAAA,EAAK,MAAK,QAAO,MAAM,IAAI;AAAA,gBACpC,KAAK;AAAA,cAAA,GACR;AAAA,cACC,CAAC,OAAO,oBAAC,QAAA,EAAK,OAAO,EAAE,UAAW,eAAK,KAAA,CAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UArBxC,KAAK;AAAA,QAAA;AAAA,MAwBhB,CAAC;AAAA,IAAA,GACH;AAAA,IACA,qBAAC,OAAA,EAAI,OAAO,EAAE,MACZ,UAAA;AAAA,MAAA,oBAAC,UACE,UAAA,OAAO,SACJ,GAAG,OAAO,MAAM,2CAChB,gCAAA,CACN;AAAA,MACC,OAAO,SAAS,KACf,qBAAC,SAAA,EACC,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,UAAU,CAAA,MAAK,aAAa,EAAE,cAAc,OAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAClD;AAAA,QAAI;AAAA,MAAA,EAAA,CAET;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"AvatarBuilder.js","sources":["../../src/components/AvatarBuilder.tsx"],"sourcesContent":["/**\n * AvatarBuilder — the body of AvatarDialog: the person's avatar and what they\n * wear with it, with a live preview.\n *\n * Layout (operator's pick, 2026-11-01): a preview column on the left (the\n * avatar large, with the name, and a chat line as others see it), and on the\n * right tabs for the Picture (AvatarPicker) and each cosmetic slot. Narrow\n * screens stack the two.\n *\n * Cosmetics (`@wolffm/prefs-client/cosmetics`, bundled at build like the avatar\n * client): earned items equip on click; items not yet earned show how to earn\n * them and can be tried on in the preview, which saves nothing. An overlay\n * image can be placed: drag it on the big preview, turn it with the top handle,\n * resize it with the corner handle, or use the sliders. Every move goes through\n * `fitPlacement`, the same function prefs-api runs before it stores one, so the\n * preview never shows a spot the server would refuse.\n *\n * Styles are inline for the reason AvatarPicker's are: apps compile this\n * package's CSS at their own build. Tokens only; the cosmetics' own colours come\n * from the person's character colour (and, for overlay images, the art).\n */\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Icon } from '@wolffm/themes'\nimport type { AvatarSettings, LoadoutUpdate } from '@wolffm/prefs-client/avatar'\nimport {\n  COSMETICS,\n  COSMETICS_BY_ID,\n  COSMETIC_SLOTS,\n  PLACEMENT_DEFAULT,\n  PLACEMENT_LIMITS,\n  avatarHtml,\n  cleanLoadout,\n  ensureCosmeticsStyles,\n  fitPlacement,\n  messageHtml,\n  nameHtml,\n  placementTransform,\n  wornCosmetics,\n  type AvatarCosmetics,\n  type CosmeticSlot,\n  type Loadout,\n  type OverlayArt,\n  type Placement\n} from '@wolffm/prefs-client/cosmetics'\nimport { AvatarPicker } from './AvatarPicker'\nimport { AVATAR_EVENT } from '../lib/avatarEvent'\nimport {\n  avatarClient,\n  avatarErrorText,\n  fetchCharacters,\n  portraitUrl,\n  type CharacterSet\n} from '../lib/avatarData'\n\ntype Tab = 'picture' | CosmeticSlot\n\nconst SLOT_LABEL: Record<CosmeticSlot, string> = {\n  effect: 'Effect',\n  gradient: 'Gradient',\n  font: 'Font',\n  overlay: 'Overlay',\n  message: 'Message'\n}\n\nconst SLIDERS = [\n  ['x', 'Left/right', '%'],\n  ['y', 'Up/down', '%'],\n  ['r', 'Rotate', '°'],\n  ['s', 'Size', '%']\n] as const\n\nconst S = {\n  body: { display: 'grid', gap: 16, alignItems: 'start' },\n  side: { display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 },\n  stage: {\n    position: 'relative',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    gap: 12,\n    padding: '48px 12px 18px',\n    borderRadius: 10,\n    background: 'var(--color-bg-alt)',\n    border: '1px solid var(--color-border)',\n    touchAction: 'none',\n    userSelect: 'none'\n  },\n  tryOn: {\n    position: 'absolute',\n    left: 8,\n    right: 8,\n    top: 8,\n    display: 'flex',\n    alignItems: 'center',\n    gap: 6,\n    padding: '4px 8px',\n    borderRadius: 6,\n    background: 'var(--color-primary-bg)',\n    color: 'var(--color-on-primary-bg)',\n    fontSize: '0.72rem'\n  },\n  linkBtn: {\n    border: 0,\n    background: 'none',\n    color: 'inherit',\n    textDecoration: 'underline',\n    cursor: 'pointer',\n    fontSize: 'inherit',\n    padding: 0,\n    flex: 'none'\n  },\n  chat: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 10,\n    padding: 12,\n    borderRadius: 10,\n    background: 'var(--color-bg)',\n    border: '1px solid var(--color-border)'\n  },\n  chatHead: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    fontSize: '0.72rem',\n    color: 'var(--color-text-muted)'\n  },\n  msg: { display: 'flex', gap: 10, alignItems: 'flex-start' },\n  who: { minHeight: 22, display: 'flex', alignItems: 'center' },\n  line: { fontSize: '0.85rem', marginTop: 2 },\n  place: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 8,\n    padding: 12,\n    borderRadius: 10,\n    border: '1px solid var(--color-border)'\n  },\n  placeHead: { display: 'flex', flexDirection: 'column', gap: 2, fontSize: '0.8rem' },\n  hint: { fontSize: '0.72rem', color: 'var(--color-text-muted)' },\n  slider: {\n    display: 'grid',\n    gridTemplateColumns: '64px 1fr 40px',\n    alignItems: 'center',\n    gap: 6,\n    fontSize: '0.75rem',\n    color: 'var(--color-text-muted)'\n  },\n  out: { textAlign: 'right', color: 'var(--color-text)', fontVariantNumeric: 'tabular-nums' },\n  toggles: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    gap: 10,\n    alignItems: 'center',\n    fontSize: '0.75rem',\n    color: 'var(--color-text-muted)'\n  },\n  tabs: {\n    display: 'flex',\n    gap: 2,\n    cursor: 'grab',\n    touchAction: 'pan-x',\n    borderBottom: '1px solid var(--color-border)',\n    overflowX: 'auto',\n    scrollbarWidth: 'none'\n  },\n  tab: {\n    flex: 'none',\n    padding: '7px 11px',\n    borderBottomWidth: 2,\n    borderBottomStyle: 'solid',\n    borderBottomColor: 'transparent',\n    borderTop: 0,\n    borderLeft: 0,\n    borderRight: 0,\n    background: 'none',\n    cursor: 'pointer',\n    fontSize: '0.82rem',\n    fontWeight: 500,\n    color: 'var(--color-text-muted)'\n  },\n  tabOn: { color: 'var(--color-text)', borderBottomColor: 'var(--color-primary)' },\n  count: { fontSize: '0.68rem', marginLeft: 4, opacity: 0.8, fontVariantNumeric: 'tabular-nums' },\n  pane: { display: 'flex', flexDirection: 'column', gap: 10, paddingTop: 10 },\n  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(112px, 1fr))', gap: 8 },\n  tile: {\n    position: 'relative',\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 5,\n    padding: 6,\n    borderRadius: 8,\n    border: '1px solid var(--color-border)',\n    background: 'var(--color-bg)',\n    color: 'var(--color-text)',\n    cursor: 'pointer',\n    textAlign: 'left',\n    font: 'inherit'\n  },\n  tileOn: {\n    borderColor: 'var(--color-primary)',\n    boxShadow: 'inset 0 0 0 1px var(--color-primary)'\n  },\n  tileTrying: { borderStyle: 'dashed', borderColor: 'var(--color-primary)' },\n  tilePv: {\n    height: 58,\n    borderRadius: 6,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    background: 'var(--color-bg-alt)',\n    overflow: 'hidden',\n    padding: '0 8px',\n    fontSize: '0.8rem'\n  },\n  tileName: { fontSize: '0.8rem', fontWeight: 500, display: 'flex', alignItems: 'center', gap: 5 },\n  tileEarn: { fontSize: '0.7rem', lineHeight: 1.3, color: 'var(--color-text-muted)' },\n  foot: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    gap: 8,\n    flexWrap: 'wrap',\n    fontSize: '0.75rem',\n    color: 'var(--color-text-muted)'\n  }\n} satisfies Record<string, React.CSSProperties>\n\n/**\n * Trusted HTML from the cosmetics renderer, which escapes every string it is\n * given. Memoised on the string and the style: React re-sets innerHTML on every\n * render even when the string is the same, and replacing the nodes under the\n * pointer between mousedown and mouseup swallows the click.\n */\nconst Html = React.memo(\n  function Html({ html, style }: { html: string; style?: React.CSSProperties }) {\n    return <span style={style} dangerouslySetInnerHTML={{ __html: html }} />\n  },\n  (a, b) => a.html === b.html && JSON.stringify(a.style) === JSON.stringify(b.style)\n)\n\n/**\n * Play a tile's message reveal again. A finished reveal holds no animation (it\n * fills backwards only), so its markup is re-set. This runs synchronously in\n * mouseenter, before any press, so it cannot split a click; the memo above keeps\n * React from touching it afterwards.\n */\nfunction replayPreview(tile: HTMLElement) {\n  const pv = tile.firstElementChild\n  if (!pv) return\n  const markup = pv.innerHTML\n  pv.innerHTML = markup\n}\n\nfunction useNarrow(): boolean {\n  const query = '(max-width: 640px)'\n  const [narrow, setNarrow] = useState(() => window.matchMedia(query).matches)\n  useEffect(() => {\n    const mq = window.matchMedia(query)\n    const on = () => setNarrow(mq.matches)\n    mq.addEventListener('change', on)\n    return () => mq.removeEventListener('change', on)\n  }, [])\n  return narrow\n}\n\n/** Move every drawing of one overlay in `root` to `p`, without re-rendering (smooth while dragging). */\nfunction applyPlacement(root: HTMLElement | null, id: string, p: Placement) {\n  root?.querySelectorAll<HTMLElement>(`.hc-art[data-hc-art=\"${id}\"]`).forEach(ol => {\n    ol.style.zIndex = p.back ? '0' : '3'\n    const adj = ol.firstElementChild as HTMLElement | null\n    if (adj) adj.style.transform = placementTransform(p)\n  })\n}\n\n/** Settings with a new loadout, and what is worn recomputed from it. */\nfunction withLoadout(s: AvatarSettings, loadout: Loadout): AvatarSettings {\n  return {\n    ...s,\n    cosmetics: { ...s.cosmetics, loadout },\n    avatar: { ...s.avatar, cosmetics: wornCosmetics(loadout) }\n  }\n}\n\n/**\n * A row that overflows sideways scrolls by dragging it (the operator's ask: the\n * tab strip is wider than its column and hides its scrollbar) and by the\n * mouse wheel. A drag of more than a few pixels is not a click.\n */\nfunction useDragScroll<T extends HTMLElement>() {\n  // A callback ref, not useRef: the row appears only once the settings load,\n  // after the first render, and the listeners must attach when it does.\n  const [el, setEl] = useState<T | null>(null)\n  useEffect(() => {\n    if (!el) return\n    let start: { x: number; left: number } | null = null\n    let dragged = false\n    const down = (e: PointerEvent) => {\n      if (e.button !== 0) return\n      start = { x: e.clientX, left: el.scrollLeft }\n      dragged = false\n    }\n    const move = (e: PointerEvent) => {\n      if (!start) return\n      const dx = e.clientX - start.x\n      if (!dragged && Math.abs(dx) > 4) {\n        dragged = true\n        el.setPointerCapture(e.pointerId)\n        el.style.cursor = 'grabbing'\n      }\n      if (dragged) el.scrollLeft = start.left - dx\n    }\n    const up = () => {\n      start = null\n      el.style.cursor = ''\n    }\n    // The click that ends a drag is not a tab choice.\n    const click = (e: MouseEvent) => {\n      if (!dragged) return\n      e.preventDefault()\n      e.stopPropagation()\n      dragged = false\n    }\n    const wheel = (e: globalThis.WheelEvent) => {\n      if (el.scrollWidth <= el.clientWidth || Math.abs(e.deltaX) > Math.abs(e.deltaY)) return\n      e.preventDefault()\n      el.scrollLeft += e.deltaY\n    }\n    el.addEventListener('pointerdown', down)\n    el.addEventListener('pointermove', move)\n    el.addEventListener('pointerup', up)\n    el.addEventListener('pointercancel', up)\n    el.addEventListener('click', click, true)\n    el.addEventListener('wheel', wheel, { passive: false })\n    return () => {\n      el.removeEventListener('pointerdown', down)\n      el.removeEventListener('pointermove', move)\n      el.removeEventListener('pointerup', up)\n      el.removeEventListener('pointercancel', up)\n      el.removeEventListener('click', click, true)\n      el.removeEventListener('wheel', wheel)\n    }\n  }, [el])\n  return setEl\n}\n\nexport interface AvatarBuilderProps {\n  /** The person's display name, for the preview. */\n  name: string | null\n}\n\nexport function AvatarBuilder({ name }: AvatarBuilderProps) {\n  const [settings, setSettings] = useState<AvatarSettings | null>(null)\n  const [sets, setSets] = useState<CharacterSet[] | null>(null)\n  const [busy, setBusy] = useState(false)\n  const [error, setError] = useState<string | null>(null)\n  const [tab, setTab] = useState<Tab>('picture')\n  const [tryOn, setTryOn] = useState<{ slot: CosmeticSlot; id: string } | null>(null)\n  const [showLocked, setShowLocked] = useState(true)\n  const [replay, setReplay] = useState(0)\n  const narrow = useNarrow()\n  const root = useRef<HTMLDivElement>(null)\n  const tabStrip = useDragScroll<HTMLDivElement>()\n  // Only the newest cosmetics request may set state: equips sent quickly in a\n  // row can answer out of order.\n  const seq = useRef(0)\n\n  useEffect(() => ensureCosmeticsStyles(), [])\n\n  useEffect(() => {\n    let live = true\n    avatarClient\n      .get()\n      .then(s => live && setSettings(s))\n      .catch((err: unknown) => live && setError(avatarErrorText(err)))\n    fetchCharacters()\n      .then(s => live && setSets(s))\n      .catch((err: unknown) => live && setError(avatarErrorText(err)))\n    return () => {\n      live = false\n    }\n  }, [])\n\n  const announce = (next: AvatarSettings) =>\n    // The page under the popout (a watchparty room, a game) re-reads the avatar\n    // from this instead of waiting for its next join.\n    window.dispatchEvent(new window.CustomEvent<AvatarSettings>(AVATAR_EVENT, { detail: next }))\n\n  const run = useCallback(async (work: () => Promise<AvatarSettings>) => {\n    setBusy(true)\n    setError(null)\n    try {\n      const next = await work()\n      setSettings(next)\n      announce(next)\n    } catch (err) {\n      setError(avatarErrorText(err))\n    } finally {\n      setBusy(false)\n    }\n  }, [])\n\n  /** Save a cosmetics change, showing `optimistic` at once. A failure re-reads the truth. */\n  const wear = useCallback(\n    async (update: LoadoutUpdate, optimistic: (s: AvatarSettings) => AvatarSettings) => {\n      const mine = ++seq.current\n      setError(null)\n      setSettings(s => (s ? optimistic(s) : s))\n      try {\n        const next = await avatarClient.setCosmetics(update)\n        if (mine !== seq.current) return\n        setSettings(next)\n        announce(next)\n      } catch (err) {\n        if (mine !== seq.current) return\n        setError(avatarErrorText(err))\n        avatarClient\n          .get()\n          .then(s => mine === seq.current && setSettings(s))\n          .catch((e: unknown) => setError(avatarErrorText(e)))\n      }\n    },\n    []\n  )\n\n  const owned = useMemo(() => new Set(settings?.cosmetics.owned ?? []), [settings])\n  const loadout = settings?.cosmetics.loadout\n  const equippedOverlay = loadout?.equipped.overlay ?? null\n  const art: OverlayArt | undefined = equippedOverlay\n    ? COSMETICS_BY_ID.get(equippedOverlay)?.art\n    : undefined\n  const editing = tab === 'overlay' && !tryOn && !!art && !!equippedOverlay\n\n  // The placement being edited, live; saved a beat after the last change.\n  const [live, setLive] = useState<Placement>(PLACEMENT_DEFAULT)\n  const saveTimer = useRef<ReturnType<typeof setTimeout>>(undefined)\n  const dragging = useRef(false)\n  useEffect(() => {\n    if (dragging.current || !equippedOverlay) return\n    setLive(loadout?.placement[equippedOverlay] ?? PLACEMENT_DEFAULT)\n  }, [equippedOverlay, loadout])\n  useEffect(() => () => clearTimeout(saveTimer.current), [])\n\n  const place = useCallback(\n    (raw: Partial<Placement>, save: 'later' | 'now' | 'no') => {\n      if (!art || !equippedOverlay) return\n      const p = fitPlacement(art, raw)\n      setLive(p)\n      applyPlacement(root.current, equippedOverlay, p)\n      clearTimeout(saveTimer.current)\n      if (save === 'no') return\n      const commit = () =>\n        void wear({ placement: { [equippedOverlay]: p } }, s =>\n          withLoadout(s, {\n            ...s.cosmetics.loadout,\n            placement: { ...s.cosmetics.loadout.placement, [equippedOverlay]: p }\n          })\n        )\n      if (save === 'now') commit()\n      else saveTimer.current = setTimeout(commit, 400)\n    },\n    [art, equippedOverlay, wear]\n  )\n\n  if (!settings) {\n    return (\n      <span className=\"settings-popout__hint\" role={error ? 'alert' : undefined}>\n        {error ?? '…'}\n      </span>\n    )\n  }\n\n  const characters = new Map((sets ?? []).flatMap(s => s.characters).map(c => [c.id, c]))\n  const character = settings.sprite ? characters.get(settings.sprite) : undefined\n  const picture = settings.avatar.url ?? (character ? portraitUrl(character) : null)\n  // Every name cosmetic derives its colours from the character's.\n  const colour: React.CSSProperties =\n    character && /^#[0-9a-f]{6}$/i.test(character.color)\n      ? ({ '--hc-base': character.color } as React.CSSProperties)\n      : {}\n  const displayName = name || 'You'\n\n  const worn: AvatarCosmetics = { ...(settings.avatar.cosmetics ?? {}) }\n  if (tryOn) {\n    worn[tryOn.slot] = tryOn.id\n    if (tryOn.slot === 'overlay') delete worn.placement\n  }\n\n  const equip = (slot: CosmeticSlot, id: string | null) => {\n    setTryOn(null)\n    void wear({ equip: { [slot]: id } }, s => {\n      const l = s.cosmetics.loadout\n      return withLoadout(s, cleanLoadout({ ...l, equipped: { ...l.equipped, [slot]: id } }, owned))\n    })\n  }\n\n  const stage = (\n    <Stage\n      html={\n        avatarHtml({ src: picture, size: 112, worn }) + nameHtml(displayName, worn, { large: true })\n      }\n      editing={editing}\n      overlayId={equippedOverlay}\n      live={live}\n      onPlace={place}\n      dragging={dragging}\n      style={colour}\n      banner={\n        tryOn && (\n          <div style={S.tryOn}>\n            <Icon name=\"lock\" size={12} />\n            <span style={{ flex: 1, minWidth: 0 }}>\n              Trying on {COSMETICS_BY_ID.get(tryOn.id)?.label} ·{' '}\n              {COSMETICS_BY_ID.get(tryOn.id)?.earn}\n            </span>\n            <button type=\"button\" style={S.linkBtn} onClick={() => setTryOn(null)}>\n              Take off\n            </button>\n          </div>\n        )\n      }\n    />\n  )\n\n  const chat = (\n    <div style={S.chat}>\n      <div style={S.chatHead}>\n        <span>In chat</span>\n        <button\n          type=\"button\"\n          className=\"settings-popout__btn\"\n          onClick={() => setReplay(n => n + 1)}\n        >\n          Replay\n        </button>\n      </div>\n      <div style={S.msg}>\n        <Html html={avatarHtml({ src: picture, size: 36, worn })} style={colour} />\n        <div style={{ minWidth: 0, ...colour }}>\n          <div style={S.who}>\n            <Html html={nameHtml(displayName, worn)} />\n          </div>\n          <div style={S.line}>\n            <Html key={replay} html={messageHtml('gg, that last hand was brutal', worn)} />\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n\n  const placement = editing && art && (\n    <div style={S.place} role=\"group\" aria-label=\"Placement\">\n      <div style={S.placeHead}>\n        <strong>Placement</strong>\n        <span style={S.hint}>\n          Drag it on the avatar. The top handle turns it, the corner resizes it.\n        </span>\n      </div>\n      {SLIDERS.map(([k, label, unit]) => (\n        <label key={k} style={S.slider}>\n          <span>{label}</span>\n          <input\n            type=\"range\"\n            min={PLACEMENT_LIMITS[k][0]}\n            max={PLACEMENT_LIMITS[k][1]}\n            value={live[k]}\n            onChange={e => place({ ...live, [k]: Number(e.currentTarget.value) }, 'later')}\n            style={{ width: '100%', accentColor: 'var(--color-primary)' }}\n          />\n          <output style={S.out}>\n            {live[k]}\n            {unit}\n          </output>\n        </label>\n      ))}\n      <div style={S.toggles}>\n        <label>\n          <input\n            type=\"checkbox\"\n            checked={live.flip}\n            onChange={e => place({ ...live, flip: e.currentTarget.checked }, 'now')}\n          />{' '}\n          Mirror\n        </label>\n        <label>\n          <input\n            type=\"checkbox\"\n            checked={live.back}\n            onChange={e => place({ ...live, back: e.currentTarget.checked }, 'now')}\n          />{' '}\n          Behind\n        </label>\n        <button\n          type=\"button\"\n          className=\"settings-popout__btn\"\n          onClick={() => place(PLACEMENT_DEFAULT, 'now')}\n        >\n          Reset\n        </button>\n      </div>\n    </div>\n  )\n\n  const tabs: Tab[] = ['picture', ...COSMETIC_SLOTS]\n  const tabLabel = (t: Tab) => (t === 'picture' ? 'Picture' : SLOT_LABEL[t])\n\n  return (\n    <div\n      ref={root}\n      style={{ ...S.body, gridTemplateColumns: narrow ? 'minmax(0, 1fr)' : '240px minmax(0, 1fr)' }}\n    >\n      <div style={S.side}>\n        {stage}\n        {chat}\n        {placement}\n      </div>\n      <div style={{ minWidth: 0 }}>\n        <div ref={tabStrip} style={S.tabs} role=\"tablist\" aria-label=\"Avatar\">\n          {tabs.map(t => {\n            const items = t === 'picture' ? [] : COSMETICS.filter(i => i.slot === t)\n            return (\n              <button\n                key={t}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={tab === t}\n                style={{ ...S.tab, ...(tab === t ? S.tabOn : {}) }}\n                onClick={e => {\n                  setTab(t)\n                  setTryOn(null)\n                  e.currentTarget.scrollIntoView({ block: 'nearest', inline: 'nearest' })\n                }}\n              >\n                {tabLabel(t)}\n                {t !== 'picture' && (\n                  <span style={S.count}>\n                    {items.filter(i => owned.has(i.id)).length}/{items.length}\n                  </span>\n                )}\n              </button>\n            )\n          })}\n        </div>\n        <div style={S.pane} role=\"tabpanel\" aria-label={tabLabel(tab)}>\n          {tab === 'picture' ? (\n            <AvatarPicker settings={settings} sets={sets} busy={busy} run={run} />\n          ) : (\n            <SlotGrid\n              slot={tab}\n              owned={owned}\n              equipped={loadout?.equipped[tab] ?? null}\n              tryOn={tryOn}\n              showLocked={showLocked}\n              onShowLocked={setShowLocked}\n              preview={id => {\n                const only: AvatarCosmetics = { [tab]: id ?? undefined }\n                if (tab === 'overlay') return avatarHtml({ src: picture, size: 40, worn: only })\n                if (tab === 'message') return messageHtml('gg, rematch?', only, { keep: true })\n                // A name tile shows the item on top of what is worn in the other name slots.\n                return nameHtml(displayName, { ...worn, [tab]: id ?? undefined })\n              }}\n              colour={colour}\n              onEquip={id => equip(tab, id)}\n              onTry={id =>\n                setTryOn(t => (t?.slot === tab && t.id === id ? null : { slot: tab, id }))\n              }\n            />\n          )}\n          {error && (\n            <span className=\"settings-popout__error\" role=\"alert\">\n              {error}\n            </span>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n\ninterface StageProps {\n  html: string\n  editing: boolean\n  overlayId: string | null\n  live: Placement\n  onPlace: (p: Partial<Placement>, save: 'later' | 'now' | 'no') => void\n  dragging: React.MutableRefObject<boolean>\n  style: React.CSSProperties\n  banner: React.ReactNode\n}\n\n/** The big preview, and the placement handles drawn on its overlay while editing. */\nfunction Stage({ html, editing, overlayId, live, onPlace, dragging, style, banner }: StageProps) {\n  const box = useRef<HTMLDivElement>(null)\n  const drag = useRef<{\n    mode: string\n    p0: Placement\n    x0: number\n    y0: number\n    cx: number\n    cy: number\n    a0: number\n    d0: number\n    size: number\n    last: Placement\n  } | null>(null)\n\n  // The handles live inside the overlay's placement box, so they turn and\n  // scale with it. Re-added whenever the preview is redrawn.\n  useEffect(() => {\n    const adj = box.current?.querySelector('.hc-art .hc-adj')\n    if (!editing || !adj) return\n    const gz = document.createElement('span')\n    gz.dataset.g = 'move'\n    gz.setAttribute('aria-hidden', 'true')\n    gz.style.cssText =\n      'position:absolute;inset:-3px;border:1.5px dashed var(--color-primary);border-radius:6px;pointer-events:auto;cursor:move'\n    const handle = (g: string, css: string) => {\n      const h = document.createElement('i')\n      h.dataset.g = g\n      h.style.cssText = `position:absolute;pointer-events:auto;${css}`\n      gz.appendChild(h)\n    }\n    handle(\n      'rot',\n      'left:50%;top:-20px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--color-primary);cursor:grab'\n    )\n    handle(\n      'scale',\n      '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'\n    )\n    adj.appendChild(gz)\n    return () => gz.remove()\n  }, [html, editing])\n\n  const down = (e: React.PointerEvent) => {\n    const g = (e.target as HTMLElement).closest<HTMLElement>('[data-g]')\n    const adj = g?.closest('.hc-adj')\n    const avatar = box.current?.querySelector('.hc-av')\n    if (!g || !adj || !avatar || !editing || !overlayId) return\n    e.preventDefault()\n    g.setPointerCapture(e.pointerId)\n    const r = adj.getBoundingClientRect()\n    const cx = r.left + r.width / 2\n    const cy = r.top + r.height / 2\n    const size = avatar.getBoundingClientRect().width\n    dragging.current = true\n    drag.current = {\n      mode: g.dataset.g ?? 'move',\n      p0: live,\n      x0: e.clientX,\n      y0: e.clientY,\n      cx,\n      cy,\n      a0: Math.atan2(e.clientY - cy, e.clientX - cx),\n      d0: Math.hypot(e.clientX - cx, e.clientY - cy) || 1,\n      size,\n      last: live\n    }\n  }\n  const move = (e: React.PointerEvent) => {\n    const d = drag.current\n    if (!d) return\n    let next: Partial<Placement> = d.p0\n    if (d.mode === 'move') {\n      next = {\n        ...d.p0,\n        x: d.p0.x + ((e.clientX - d.x0) / d.size) * 100,\n        y: d.p0.y + ((e.clientY - d.y0) / d.size) * 100\n      }\n    } else if (d.mode === 'rot') {\n      const a = Math.atan2(e.clientY - d.cy, e.clientX - d.cx)\n      next = { ...d.p0, r: d.p0.r + ((a - d.a0) * 180) / Math.PI }\n    } else {\n      next = { ...d.p0, s: (d.p0.s * Math.hypot(e.clientX - d.cx, e.clientY - d.cy)) / d.d0 }\n    }\n    d.last = next as Placement\n    onPlace(next, 'no')\n  }\n  const up = () => {\n    const d = drag.current\n    if (!d) return\n    drag.current = null\n    dragging.current = false\n    onPlace(d.last, 'now')\n  }\n\n  return (\n    <div\n      ref={box}\n      role=\"group\"\n      aria-label=\"Preview\"\n      style={{ ...S.stage, ...style }}\n      onPointerDown={down}\n      onPointerMove={move}\n      onPointerUp={up}\n      onPointerCancel={up}\n    >\n      {banner}\n      <Html html={html} style={{ display: 'contents' }} />\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n\ninterface SlotGridProps {\n  slot: CosmeticSlot\n  owned: ReadonlySet<string>\n  equipped: string | null\n  tryOn: { slot: CosmeticSlot; id: string } | null\n  showLocked: boolean\n  onShowLocked: (on: boolean) => void\n  preview: (id: string | null) => string\n  colour: React.CSSProperties\n  onEquip: (id: string | null) => void\n  onTry: (id: string) => void\n}\n\n/** One slot's items: None, then everything, earned or not. */\nfunction SlotGrid({\n  slot,\n  owned,\n  equipped,\n  tryOn,\n  showLocked,\n  onShowLocked,\n  preview,\n  colour,\n  onEquip,\n  onTry\n}: SlotGridProps) {\n  const items = COSMETICS.filter(i => i.slot === slot)\n  const locked = items.filter(i => !owned.has(i.id))\n  const shown = showLocked ? items : items.filter(i => owned.has(i.id))\n\n  return (\n    <>\n      <div style={S.grid}>\n        <button\n          type=\"button\"\n          aria-pressed={equipped === null}\n          style={{ ...S.tile, ...(equipped === null ? S.tileOn : {}) }}\n          onClick={() => onEquip(null)}\n        >\n          <Html html={preview(null)} style={{ ...S.tilePv, ...colour }} />\n          <span style={S.tileName}>None</span>\n        </button>\n        {shown.map(item => {\n          const own = owned.has(item.id)\n          const on = equipped === item.id\n          const trying = tryOn?.slot === slot && tryOn.id === item.id\n          return (\n            <button\n              key={item.id}\n              type=\"button\"\n              aria-pressed={own ? on : trying}\n              aria-label={own ? item.label : `${item.label}, locked. ${item.earn}. Try it on.`}\n              style={{\n                ...S.tile,\n                ...(on ? S.tileOn : {}),\n                ...(trying ? S.tileTrying : {})\n              }}\n              onClick={() => (own ? onEquip(item.id) : onTry(item.id))}\n              // A message reveal plays once; hovering its tile plays it again.\n              onMouseEnter={e => slot === 'message' && replayPreview(e.currentTarget)}\n            >\n              <Html\n                html={preview(item.id)}\n                style={{ ...S.tilePv, ...colour, opacity: own ? 1 : 0.55 }}\n              />\n              <span style={{ ...S.tileName, color: own ? undefined : 'var(--color-text-muted)' }}>\n                {!own && <Icon name=\"lock\" size={12} />}\n                {item.label}\n              </span>\n              {!own && <span style={S.tileEarn}>{item.earn}</span>}\n            </button>\n          )\n        })}\n      </div>\n      <div style={S.foot}>\n        <span>\n          {locked.length\n            ? `${locked.length} still to earn. Pick one to try it on.`\n            : 'You have earned all of these.'}\n        </span>\n        {locked.length > 0 && (\n          <label>\n            <input\n              type=\"checkbox\"\n              checked={showLocked}\n              onChange={e => onShowLocked(e.currentTarget.checked)}\n            />{' '}\n            Show locked\n          </label>\n        )}\n      </div>\n    </>\n  )\n}\n"],"names":["Html","live"],"mappings":"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"}

package/dist/components/AvatarPicker.d.ts

@@ -7,19 +7,13 @@
  * protocol cannot drift from the callback page).
  *
  * Everything happens in place: picking, uploading and removing are requests
- * from here, and linking Discord or Steam signs in through a popup
- * (`linkInPopup`), so the page under the popout never navigates and a game
- * keeps running.
+ * from here. Linking Discord or Steam lives in the popout's Account tab
+ * (LinkedAccounts); a linked account's picture is a choice here.
  *
  * AvatarBuilder owns the settings and the character table and loads them only
  * when the dialog opens; this component draws them and sends changes through
  * `run`, which applies the answer everywhere in the dialog.
  *
- * COMPLIANCE (Steam Web API terms; Discord developer terms), carried over from
- * hadoku.me/account: nothing is fetched from a provider until the person reads
- * what is read and kept and presses Continue; Steam attribution and a privacy
- * link sit under the controls; no provider logos, and no implied endorsement.
- *
  * Styles are inline for the reason PASSKEY_DOT's are (ConnectedSettings.tsx):
  * apps compile app-header.css at their own build, so a new rule there reaches
  * an app only when it rebuilds.

package/dist/components/AvatarPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarPicker.d.ts","sourceRoot":"","sources":["../../src/components/AvatarPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,KAA8B,MAAM,OAAO,CAAA;AAClD,OAAO,EACL,KAAK,cAAc,EAGpB,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAA6B,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAA;AA4FhF,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,cAAc,CAAA;IACxB,IAAI,EAAE,YAAY,EAAE,GAAG,IAAI,CAAA;IAC3B,IAAI,EAAE,OAAO,CAAA;IACb,0EAA0E;IAC1E,GAAG,EAAE,CAAC,IAAI,EAAE,MAAM,OAAO,CAAC,cAAc,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CAC5D;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,iBAAiB,qBAuN5E"}
+{"version":3,"file":"AvatarPicker.d.ts","sourceRoot":"","sources":["../../src/components/AvatarPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,KAA8B,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,KAAK,cAAc,EAAqB,MAAM,6BAA6B,CAAA;AACpF,OAAO,EAA6B,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAsEhF,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,cAAc,CAAA;IACxB,IAAI,EAAE,YAAY,EAAE,GAAG,IAAI,CAAA;IAC3B,IAAI,EAAE,OAAO,CAAA;IACb,0EAA0E;IAC1E,GAAG,EAAE,CAAC,IAAI,EAAE,MAAM,OAAO,CAAC,cAAc,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CAC5D;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,iBAAiB,qBAkJ5E"}

package/dist/components/AvatarPicker.js

@@ -7,26 +7,6 @@ const LABEL = {
   steam: "Steam",
   upload: "Upload"
 };
-const CONSENT = {
-  discord: {
-    points: [
-      'Discord asks you to share your basic profile ("identify").',
-      "Kept: your Discord user ID and the address of your profile picture, refreshed while linked.",
-      "Not kept: your username, email, servers or any token.",
-      "Unlink deletes both."
-    ],
-    go: "Continue to Discord"
-  },
-  steam: {
-    points: [
-      "You sign in on steamcommunity.com; your password never reaches hadoku.me.",
-      "Your public Steam profile picture is then read through the Steam Web API, now and periodically while linked.",
-      "Kept: your Steam ID and the address of that picture.",
-      "Unlink deletes both and stops the reads."
-    ],
-    go: "Continue to Steam"
-  }
-};
 const S = {
   stack: { display: "flex", flexDirection: "column", gap: 10, width: "100%" },
   img: { width: "100%", height: "100%", objectFit: "cover", display: "block" },
@@ -67,8 +47,7 @@ const S = {
     cursor: "pointer"
   },
   line: { display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" },
-  grow: { flex: 1, minWidth: 0 },
-  list: { margin: 0, paddingLeft: 18, fontSize: "0.75rem", lineHeight: 1.45 }
+  grow: { flex: 1, minWidth: 0 }
 };
 function Picture({ src, style }) {
   const [failed, setFailed] = useState(false);
@@ -86,7 +65,6 @@ function Picture({ src, style }) {
 }
 function AvatarPicker({ settings, sets, busy, run }) {
   const [setIdx, setSetIdx] = useState(0);
-  const [consent, setConsent] = useState(null);
   useEffect(() => {
     const at = sets?.findIndex((s) => s.characters.some((c) => c.id === settings.sprite)) ?? -1;
     if (at > 0) setSetIdx(at);
@@ -110,13 +88,6 @@ function AvatarPicker({ settings, sets, busy, run }) {
   };
   const shown = settings.avatar;
   const current = sets?.[setIdx];
-  const link = (provider) => {
-    setConsent(null);
-    run(async () => {
-      const next = await avatarClient.linkInPopup(provider);
-      return next.linked[provider]?.avatarUrl ? avatarClient.choose(provider) : next;
-    }).catch(reportErr);
-  };
   return /* @__PURE__ */ jsxs("div", { style: S.stack, children: [
     settings.choice && settings.choice !== shown.source && /* @__PURE__ */ jsxs("span", { className: "settings-popout__hint", children: [
       LABEL[settings.choice],
@@ -129,7 +100,7 @@ function AvatarPicker({ settings, sets, busy, run }) {
         role: "radio",
         "aria-checked": shown.source === src,
         disabled: busy || !available[src],
-        title: available[src] ? void 0 : "Link or upload one first",
+        title: available[src] ? void 0 : src === "upload" ? "Upload a picture below first" : `Link ${LABEL[src]} under Settings › Account first`,
         style: {
           ...S.source,
           ...shown.source === src ? S.sourceOn : {},
@@ -177,53 +148,6 @@ function AvatarPicker({ settings, sets, busy, run }) {
         c.id
       )) })
     ] }) : /* @__PURE__ */ jsx("span", { className: "settings-popout__hint", children: "…" })),
-    ["discord", "steam"].map((p) => {
-      const linked = settings.linked[p];
-      return /* @__PURE__ */ jsxs("div", { style: S.line, children: [
-        /* @__PURE__ */ jsxs("span", { className: "settings-popout__label", style: S.grow, children: [
-          LABEL[p],
-          !settings.providers[p] ? " · not available yet" : linked ? linked.avatarUrl ? " · linked" : " · linked, no picture" : ""
-        ] }),
-        settings.providers[p] && !linked && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "settings-popout__btn",
-            disabled: busy,
-            onClick: () => setConsent(consent === p ? null : p),
-            children: "Link"
-          }
-        ),
-        linked && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "settings-popout__btn",
-            disabled: busy,
-            onClick: () => {
-              run(() => avatarClient.unlink(p)).catch(reportErr);
-            },
-            children: "Unlink"
-          }
-        )
-      ] }, p);
-    }),
-    consent && /* @__PURE__ */ jsxs("div", { style: S.stack, children: [
-      /* @__PURE__ */ jsx("ul", { style: S.list, children: CONSENT[consent].points.map((t) => /* @__PURE__ */ jsx("li", { children: t }, t)) }),
-      /* @__PURE__ */ jsxs("span", { style: S.line, children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "settings-popout__btn settings-popout__btn--primary",
-            disabled: busy,
-            onClick: () => link(consent),
-            children: CONSENT[consent].go
-          }
-        ),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "settings-popout__btn", onClick: () => setConsent(null), children: "Cancel" })
-      ] })
-    ] }),
     /* @__PURE__ */ jsxs("div", { style: S.line, children: [
       /* @__PURE__ */ jsx("span", { className: "settings-popout__label", style: S.grow, children: "Upload" }),
       /* @__PURE__ */ jsxs("label", { className: "settings-popout__btn", style: { opacity: busy ? 0.5 : 1 }, children: [

package/dist/components/AvatarPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarPicker.js","sources":["../../src/components/AvatarPicker.tsx"],"sourcesContent":["/**\n * AvatarPicker — the Picture tab of AvatarBuilder (inside AvatarDialog, opened\n * from ConnectedSettings): the picture people see (character, Discord, Steam or\n * an upload) and the character games use as the piece. One resolved avatar per\n * person, stored in hadoku_site's prefs-api and rendered by every app\n * (`@wolffm/prefs-client/avatar`, bundled into this package at build so the link\n * protocol cannot drift from the callback page).\n *\n * Everything happens in place: picking, uploading and removing are requests\n * from here, and linking Discord or Steam signs in through a popup\n * (`linkInPopup`), so the page under the popout never navigates and a game\n * keeps running.\n *\n * AvatarBuilder owns the settings and the character table and loads them only\n * when the dialog opens; this component draws them and sends changes through\n * `run`, which applies the answer everywhere in the dialog.\n *\n * COMPLIANCE (Steam Web API terms; Discord developer terms), carried over from\n * hadoku.me/account: nothing is fetched from a provider until the person reads\n * what is read and kept and presses Continue; Steam attribution and a privacy\n * link sit under the controls; no provider logos, and no implied endorsement.\n *\n * Styles are inline for the reason PASSKEY_DOT's are (ConnectedSettings.tsx):\n * apps compile app-header.css at their own build, so a new rule there reaches\n * an app only when it rebuilds.\n */\nimport React, { useEffect, useState } from 'react'\nimport {\n  type AvatarSettings,\n  type AvatarSource,\n  type LinkProvider\n} from '@wolffm/prefs-client/avatar'\nimport { avatarClient, portraitUrl, type CharacterSet } from '../lib/avatarData'\n\nconst LABEL: Record<AvatarSource, string> = {\n  sprite: 'Character',\n  discord: 'Discord',\n  steam: 'Steam',\n  upload: 'Upload'\n}\n\nconst CONSENT: Record<LinkProvider, { points: string[]; go: string }> = {\n  discord: {\n    points: [\n      'Discord asks you to share your basic profile (\"identify\").',\n      'Kept: your Discord user ID and the address of your profile picture, refreshed while linked.',\n      'Not kept: your username, email, servers or any token.',\n      'Unlink deletes both.'\n    ],\n    go: 'Continue to Discord'\n  },\n  steam: {\n    points: [\n      'You sign in on steamcommunity.com; your password never reaches hadoku.me.',\n      'Your public Steam profile picture is then read through the Steam Web API, now and periodically while linked.',\n      'Kept: your Steam ID and the address of that picture.',\n      'Unlink deletes both and stops the reads.'\n    ],\n    go: 'Continue to Steam'\n  }\n}\n\nconst S = {\n  stack: { display: 'flex', flexDirection: 'column', gap: 10, width: '100%' },\n  img: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' },\n  sources: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 },\n  source: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    gap: 4,\n    padding: 6,\n    borderRadius: 8,\n    border: '1px solid var(--color-border)',\n    background: 'var(--color-bg)',\n    color: 'var(--color-text)',\n    fontSize: '0.72rem',\n    cursor: 'pointer'\n  },\n  sourceOn: {\n    borderColor: 'var(--color-primary)',\n    boxShadow: 'inset 0 0 0 1px var(--color-primary)'\n  },\n  thumb: {\n    width: 32,\n    height: 32,\n    borderRadius: '50%',\n    overflow: 'hidden',\n    background: 'var(--color-bg-alt)'\n  },\n  sets: { display: 'flex', gap: 4, flexWrap: 'wrap' },\n  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(64px, 1fr))', gap: 6 },\n  cell: {\n    padding: 0,\n    aspectRatio: '1',\n    borderRadius: 6,\n    overflow: 'hidden',\n    border: '2px solid transparent',\n    background: 'var(--color-bg-alt)',\n    cursor: 'pointer'\n  },\n  line: { display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' },\n  grow: { flex: 1, minWidth: 0 },\n  list: { margin: 0, paddingLeft: 18, fontSize: '0.75rem', lineHeight: 1.45 }\n} satisfies Record<string, React.CSSProperties>\n\nfunction Picture({ src, style }: { src: string | null; style: React.CSSProperties }) {\n  const [failed, setFailed] = useState(false)\n  useEffect(() => setFailed(false), [src])\n  return (\n    <span style={style}>\n      {src && !failed && (\n        <img\n          src={src}\n          alt=\"\"\n          referrerPolicy=\"no-referrer\"\n          style={S.img}\n          onError={() => setFailed(true)}\n        />\n      )}\n    </span>\n  )\n}\n\nexport interface AvatarPickerProps {\n  settings: AvatarSettings\n  sets: CharacterSet[] | null\n  busy: boolean\n  /** Send a change; the builder applies the answer and reports failures. */\n  run: (work: () => Promise<AvatarSettings>) => Promise<void>\n}\n\nexport function AvatarPicker({ settings, sets, busy, run }: AvatarPickerProps) {\n  const [setIdx, setSetIdx] = useState(0)\n  const [consent, setConsent] = useState<LinkProvider | null>(null)\n  // Open on the set holding the person's character.\n  useEffect(() => {\n    const at = sets?.findIndex(s => s.characters.some(c => c.id === settings.sprite)) ?? -1\n    if (at > 0) setSetIdx(at)\n    // Only when the table arrives: afterwards the person moves between sets.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [sets])\n\n  const characters = new Map((sets ?? []).flatMap(s => s.characters).map(c => [c.id, c]))\n  const spriteSrc = (id: string | null | undefined) => {\n    const c = id ? characters.get(id) : undefined\n    return c ? portraitUrl(c) : null\n  }\n\n  const available: Record<AvatarSource, boolean> = {\n    sprite: true,\n    discord: Boolean(settings.linked.discord?.avatarUrl),\n    steam: Boolean(settings.linked.steam?.avatarUrl),\n    upload: settings.upload !== null\n  }\n  const thumbOf: Record<AvatarSource, string | null> = {\n    sprite: spriteSrc(settings.sprite),\n    discord: settings.linked.discord?.avatarUrl ?? null,\n    steam: settings.linked.steam?.avatarUrl ?? null,\n    upload: settings.upload?.url ?? null\n  }\n  const shown = settings.avatar\n  const current = sets?.[setIdx]\n\n  // Must stay synchronous up to linkInPopup: the popup opens before its first\n  // await, inside this click, which is what popup blockers allow.\n  const link = (provider: LinkProvider) => {\n    setConsent(null)\n    run(async () => {\n      const next = await avatarClient.linkInPopup(provider)\n      // Linking is choosing, when the account came back with a picture.\n      return next.linked[provider]?.avatarUrl ? avatarClient.choose(provider) : next\n    }).catch(reportErr)\n  }\n\n  return (\n    <div style={S.stack}>\n      {settings.choice && settings.choice !== shown.source && (\n        <span className=\"settings-popout__hint\">\n          {LABEL[settings.choice]} is unavailable, so your character shows instead.\n        </span>\n      )}\n\n      <div style={S.sources} role=\"radiogroup\" aria-label=\"Picture\">\n        {(Object.keys(LABEL) as AvatarSource[]).map(src => (\n          <button\n            key={src}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={shown.source === src}\n            disabled={busy || !available[src]}\n            title={available[src] ? undefined : 'Link or upload one first'}\n            style={{\n              ...S.source,\n              ...(shown.source === src ? S.sourceOn : {}),\n              opacity: available[src] ? 1 : 0.5\n            }}\n            onClick={() => {\n              run(() => avatarClient.choose(src)).catch(reportErr)\n            }}\n          >\n            <Picture src={thumbOf[src]} style={S.thumb} />\n            {LABEL[src]}\n          </button>\n        ))}\n      </div>\n\n      {shown.source === 'sprite' &&\n        (sets ? (\n          <>\n            {sets.length > 1 && (\n              <div style={S.sets}>\n                {sets.map((s, i) => (\n                  <button\n                    key={s.id}\n                    type=\"button\"\n                    className={`settings-popout__btn${i === setIdx ? ' settings-popout__btn--primary' : ''}`}\n                    onClick={() => setSetIdx(i)}\n                  >\n                    {s.id}\n                  </button>\n                ))}\n              </div>\n            )}\n            <div style={S.grid} role=\"radiogroup\" aria-label=\"Character\">\n              {current?.characters.map(c => (\n                <button\n                  key={c.id}\n                  type=\"button\"\n                  role=\"radio\"\n                  aria-checked={settings.sprite === c.id}\n                  aria-label={c.name}\n                  title={c.name}\n                  disabled={busy}\n                  style={{\n                    ...S.cell,\n                    borderColor: settings.sprite === c.id ? c.color : 'transparent'\n                  }}\n                  onClick={() => {\n                    run(() => avatarClient.update({ sprite: c.id })).catch(reportErr)\n                  }}\n                >\n                  <img src={portraitUrl(c)} alt=\"\" style={S.img} />\n                </button>\n              ))}\n            </div>\n          </>\n        ) : (\n          <span className=\"settings-popout__hint\">…</span>\n        ))}\n\n      {(['discord', 'steam'] as const).map(p => {\n        const linked = settings.linked[p]\n        return (\n          <div key={p} style={S.line}>\n            <span className=\"settings-popout__label\" style={S.grow}>\n              {LABEL[p]}\n              {!settings.providers[p]\n                ? ' · not available yet'\n                : linked\n                  ? linked.avatarUrl\n                    ? ' · linked'\n                    : ' · linked, no picture'\n                  : ''}\n            </span>\n            {settings.providers[p] && !linked && (\n              <button\n                type=\"button\"\n                className=\"settings-popout__btn\"\n                disabled={busy}\n                onClick={() => setConsent(consent === p ? null : p)}\n              >\n                Link\n              </button>\n            )}\n            {linked && (\n              <button\n                type=\"button\"\n                className=\"settings-popout__btn\"\n                disabled={busy}\n                onClick={() => {\n                  run(() => avatarClient.unlink(p)).catch(reportErr)\n                }}\n              >\n                Unlink\n              </button>\n            )}\n          </div>\n        )\n      })}\n\n      {consent && (\n        <div style={S.stack}>\n          <ul style={S.list}>\n            {CONSENT[consent].points.map(t => (\n              <li key={t}>{t}</li>\n            ))}\n          </ul>\n          <span style={S.line}>\n            <button\n              type=\"button\"\n              className=\"settings-popout__btn settings-popout__btn--primary\"\n              disabled={busy}\n              onClick={() => link(consent)}\n            >\n              {CONSENT[consent].go}\n            </button>\n            <button type=\"button\" className=\"settings-popout__btn\" onClick={() => setConsent(null)}>\n              Cancel\n            </button>\n          </span>\n        </div>\n      )}\n\n      <div style={S.line}>\n        <span className=\"settings-popout__label\" style={S.grow}>\n          Upload\n        </span>\n        <label className=\"settings-popout__btn\" style={{ opacity: busy ? 0.5 : 1 }}>\n          {settings.upload ? 'Replace' : 'Choose image'}\n          <input\n            type=\"file\"\n            accept={settings.limits.acceptedTypes.join(',')}\n            hidden\n            disabled={busy}\n            onChange={e => {\n              const file = e.currentTarget.files?.[0]\n              e.currentTarget.value = ''\n              if (file) run(() => avatarClient.upload(file)).catch(reportErr)\n            }}\n          />\n        </label>\n        {settings.upload && (\n          <button\n            type=\"button\"\n            className=\"settings-popout__btn\"\n            disabled={busy}\n            onClick={() => {\n              run(() => avatarClient.removeUpload()).catch(reportErr)\n            }}\n          >\n            Remove\n          </button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nfunction reportErr(err: unknown) {\n  console.error('[AvatarPicker] action failed', (err as Error)?.message ?? err)\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AvatarPicker.js","sources":["../../src/components/AvatarPicker.tsx"],"sourcesContent":["/**\n * AvatarPicker — the Picture tab of AvatarBuilder (inside AvatarDialog, opened\n * from ConnectedSettings): the picture people see (character, Discord, Steam or\n * an upload) and the character games use as the piece. One resolved avatar per\n * person, stored in hadoku_site's prefs-api and rendered by every app\n * (`@wolffm/prefs-client/avatar`, bundled into this package at build so the link\n * protocol cannot drift from the callback page).\n *\n * Everything happens in place: picking, uploading and removing are requests\n * from here. Linking Discord or Steam lives in the popout's Account tab\n * (LinkedAccounts); a linked account's picture is a choice here.\n *\n * AvatarBuilder owns the settings and the character table and loads them only\n * when the dialog opens; this component draws them and sends changes through\n * `run`, which applies the answer everywhere in the dialog.\n *\n * Styles are inline for the reason PASSKEY_DOT's are (ConnectedSettings.tsx):\n * apps compile app-header.css at their own build, so a new rule there reaches\n * an app only when it rebuilds.\n */\nimport React, { useEffect, useState } from 'react'\nimport { type AvatarSettings, type AvatarSource } from '@wolffm/prefs-client/avatar'\nimport { avatarClient, portraitUrl, type CharacterSet } from '../lib/avatarData'\n\nconst LABEL: Record<AvatarSource, string> = {\n  sprite: 'Character',\n  discord: 'Discord',\n  steam: 'Steam',\n  upload: 'Upload'\n}\n\nconst S = {\n  stack: { display: 'flex', flexDirection: 'column', gap: 10, width: '100%' },\n  img: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' },\n  sources: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 },\n  source: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    gap: 4,\n    padding: 6,\n    borderRadius: 8,\n    border: '1px solid var(--color-border)',\n    background: 'var(--color-bg)',\n    color: 'var(--color-text)',\n    fontSize: '0.72rem',\n    cursor: 'pointer'\n  },\n  sourceOn: {\n    borderColor: 'var(--color-primary)',\n    boxShadow: 'inset 0 0 0 1px var(--color-primary)'\n  },\n  thumb: {\n    width: 32,\n    height: 32,\n    borderRadius: '50%',\n    overflow: 'hidden',\n    background: 'var(--color-bg-alt)'\n  },\n  sets: { display: 'flex', gap: 4, flexWrap: 'wrap' },\n  grid: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(64px, 1fr))', gap: 6 },\n  cell: {\n    padding: 0,\n    aspectRatio: '1',\n    borderRadius: 6,\n    overflow: 'hidden',\n    border: '2px solid transparent',\n    background: 'var(--color-bg-alt)',\n    cursor: 'pointer'\n  },\n  line: { display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' },\n  grow: { flex: 1, minWidth: 0 }\n} satisfies Record<string, React.CSSProperties>\n\nfunction Picture({ src, style }: { src: string | null; style: React.CSSProperties }) {\n  const [failed, setFailed] = useState(false)\n  useEffect(() => setFailed(false), [src])\n  return (\n    <span style={style}>\n      {src && !failed && (\n        <img\n          src={src}\n          alt=\"\"\n          referrerPolicy=\"no-referrer\"\n          style={S.img}\n          onError={() => setFailed(true)}\n        />\n      )}\n    </span>\n  )\n}\n\nexport interface AvatarPickerProps {\n  settings: AvatarSettings\n  sets: CharacterSet[] | null\n  busy: boolean\n  /** Send a change; the builder applies the answer and reports failures. */\n  run: (work: () => Promise<AvatarSettings>) => Promise<void>\n}\n\nexport function AvatarPicker({ settings, sets, busy, run }: AvatarPickerProps) {\n  const [setIdx, setSetIdx] = useState(0)\n  // Open on the set holding the person's character.\n  useEffect(() => {\n    const at = sets?.findIndex(s => s.characters.some(c => c.id === settings.sprite)) ?? -1\n    if (at > 0) setSetIdx(at)\n    // Only when the table arrives: afterwards the person moves between sets.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [sets])\n\n  const characters = new Map((sets ?? []).flatMap(s => s.characters).map(c => [c.id, c]))\n  const spriteSrc = (id: string | null | undefined) => {\n    const c = id ? characters.get(id) : undefined\n    return c ? portraitUrl(c) : null\n  }\n\n  const available: Record<AvatarSource, boolean> = {\n    sprite: true,\n    discord: Boolean(settings.linked.discord?.avatarUrl),\n    steam: Boolean(settings.linked.steam?.avatarUrl),\n    upload: settings.upload !== null\n  }\n  const thumbOf: Record<AvatarSource, string | null> = {\n    sprite: spriteSrc(settings.sprite),\n    discord: settings.linked.discord?.avatarUrl ?? null,\n    steam: settings.linked.steam?.avatarUrl ?? null,\n    upload: settings.upload?.url ?? null\n  }\n  const shown = settings.avatar\n  const current = sets?.[setIdx]\n\n  return (\n    <div style={S.stack}>\n      {settings.choice && settings.choice !== shown.source && (\n        <span className=\"settings-popout__hint\">\n          {LABEL[settings.choice]} is unavailable, so your character shows instead.\n        </span>\n      )}\n\n      <div style={S.sources} role=\"radiogroup\" aria-label=\"Picture\">\n        {(Object.keys(LABEL) as AvatarSource[]).map(src => (\n          <button\n            key={src}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={shown.source === src}\n            disabled={busy || !available[src]}\n            title={\n              available[src]\n                ? undefined\n                : src === 'upload'\n                  ? 'Upload a picture below first'\n                  : `Link ${LABEL[src]} under Settings › Account first`\n            }\n            style={{\n              ...S.source,\n              ...(shown.source === src ? S.sourceOn : {}),\n              opacity: available[src] ? 1 : 0.5\n            }}\n            onClick={() => {\n              run(() => avatarClient.choose(src)).catch(reportErr)\n            }}\n          >\n            <Picture src={thumbOf[src]} style={S.thumb} />\n            {LABEL[src]}\n          </button>\n        ))}\n      </div>\n\n      {shown.source === 'sprite' &&\n        (sets ? (\n          <>\n            {sets.length > 1 && (\n              <div style={S.sets}>\n                {sets.map((s, i) => (\n                  <button\n                    key={s.id}\n                    type=\"button\"\n                    className={`settings-popout__btn${i === setIdx ? ' settings-popout__btn--primary' : ''}`}\n                    onClick={() => setSetIdx(i)}\n                  >\n                    {s.id}\n                  </button>\n                ))}\n              </div>\n            )}\n            <div style={S.grid} role=\"radiogroup\" aria-label=\"Character\">\n              {current?.characters.map(c => (\n                <button\n                  key={c.id}\n                  type=\"button\"\n                  role=\"radio\"\n                  aria-checked={settings.sprite === c.id}\n                  aria-label={c.name}\n                  title={c.name}\n                  disabled={busy}\n                  style={{\n                    ...S.cell,\n                    borderColor: settings.sprite === c.id ? c.color : 'transparent'\n                  }}\n                  onClick={() => {\n                    run(() => avatarClient.update({ sprite: c.id })).catch(reportErr)\n                  }}\n                >\n                  <img src={portraitUrl(c)} alt=\"\" style={S.img} />\n                </button>\n              ))}\n            </div>\n          </>\n        ) : (\n          <span className=\"settings-popout__hint\">…</span>\n        ))}\n\n      <div style={S.line}>\n        <span className=\"settings-popout__label\" style={S.grow}>\n          Upload\n        </span>\n        <label className=\"settings-popout__btn\" style={{ opacity: busy ? 0.5 : 1 }}>\n          {settings.upload ? 'Replace' : 'Choose image'}\n          <input\n            type=\"file\"\n            accept={settings.limits.acceptedTypes.join(',')}\n            hidden\n            disabled={busy}\n            onChange={e => {\n              const file = e.currentTarget.files?.[0]\n              e.currentTarget.value = ''\n              if (file) run(() => avatarClient.upload(file)).catch(reportErr)\n            }}\n          />\n        </label>\n        {settings.upload && (\n          <button\n            type=\"button\"\n            className=\"settings-popout__btn\"\n            disabled={busy}\n            onClick={() => {\n              run(() => avatarClient.removeUpload()).catch(reportErr)\n            }}\n          >\n            Remove\n          </button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nfunction reportErr(err: unknown) {\n  console.error('[AvatarPicker] action failed', (err as Error)?.message ?? err)\n}\n"],"names":[],"mappings":"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"}

package/dist/components/ConnectedSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectedSettings.d.ts","sourceRoot":"","sources":["../../src/components/ConnectedSettings.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,KAA0D,MAAM,OAAO,CAAA;AAU9E,OAAO,EAWL,KAAK,IAAI,EACV,MAAM,uBAAuB,CAAA;AAC9B,OAAO,mBAAmB,CAAA;AAE1B,MAAM,WAAW,sBAAsB;IACrC;;;;;;+EAM2E;IAC3E,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,mEAAmE;IACnE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C;;;;;4EAKwE;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;6EAEyE;IACzE,OAAO,CAAC,EAAE,cAAc,EAAE,CAAA;CAC3B;AAED,sDAAsD;AACtD,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;CAC9B;AAmID,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,QAAQ,EACR,OAAO,EACR,EAAE,sBAAsB,qBA6yBxB"}
+{"version":3,"file":"ConnectedSettings.d.ts","sourceRoot":"","sources":["../../src/components/ConnectedSettings.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,KAA0D,MAAM,OAAO,CAAA;AAW9E,OAAO,EAWL,KAAK,IAAI,EACV,MAAM,uBAAuB,CAAA;AAC9B,OAAO,mBAAmB,CAAA;AAE1B,MAAM,WAAW,sBAAsB;IACrC;;;;;;+EAM2E;IAC3E,QAAQ,CAAC,EAAE,IAAI,CAAA;IACf,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,mEAAmE;IACnE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC5C;;;;;4EAKwE;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;6EAEyE;IACzE,OAAO,CAAC,EAAE,cAAc,EAAE,CAAA;CAC3B;AAED,sDAAsD;AACtD,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;CAC9B;AAmID,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,QAAQ,EACR,OAAO,EACR,EAAE,sBAAsB,qBAq0BxB"}

package/dist/components/ConnectedSettings.js

@@ -3,6 +3,7 @@ import React, { useState, useRef, useId, useCallback, useEffect } from "react";
 import { useSettingsTab } from "@wolffm/themes";
 import { SettingsIcon } from "./ThemeIcons.js";
 import { AvatarDialog } from "./AvatarDialog.js";
+import { LinkedAccounts } from "./LinkedAccounts.js";
 import { passkeysSupported, prefetchSettings, setDisplayName, loadSignIn, switchKeyHref, loadSignInClient, passkeyHref, setContentLevel, deleteOwnAccount } from "../lib/settingsClient.js";
 /* empty css                */
 const ServiceAccess = React.lazy(
@@ -145,6 +146,7 @@ function ConnectedSettings({
   const passkeyCtl = useRef(null);
   const cancelPasskey = useCallback((reason) => passkeyCtl.current?.abort(reason), []);
   const [avatarOpen, setAvatarOpen] = useState(false);
+  const [linksOpen, setLinksOpen] = useState(false);
   const avatarBtn = useRef(null);
   const [serviceGrants, setServiceGrants] = useState(0);
   const [serviceOpen, setServiceOpen] = useState(false);
@@ -671,6 +673,22 @@ function ConnectedSettings({
                 ) }),
                 passkeyError && /* @__PURE__ */ jsx("span", { className: "settings-popout__error", role: "alert", children: passkeyError })
               ] }),
+              !resolving && userType !== "public" && /* @__PURE__ */ jsxs("section", { className: "settings-popout__row settings-popout__row--stack", children: [
+                /* @__PURE__ */ jsxs("span", { className: "settings-popout__inline", children: [
+                  /* @__PURE__ */ jsx("span", { className: "settings-popout__label settings-popout__label--grow", children: "Linked accounts" }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "settings-popout__btn",
+                      "aria-expanded": linksOpen,
+                      onClick: () => setLinksOpen((v) => !v),
+                      children: linksOpen ? "Done" : "Open"
+                    }
+                  )
+                ] }),
+                linksOpen && /* @__PURE__ */ jsx(LinkedAccounts, {})
+              ] }),
               !resolving && userType === "member" && /* @__PURE__ */ jsxs("section", { className: "settings-popout__row settings-popout__row--stack", children: [
                 /* @__PURE__ */ jsxs("span", { className: "settings-popout__inline", children: [
                   /* @__PURE__ */ jsx("span", { className: "settings-popout__label settings-popout__label--grow", children: "Account" }),