packing-bingo 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -126,7 +126,7 @@ function bingoLines(size, free = false) {
 // src/messages.ts
 var ja = {
   title: "\u6301\u3061\u3082\u306E\u30D3\u30F3\u30B4",
-  tag: "\u4FEE\u5B66\u65C5\u884C",
+  tag: "",
   subtitle: "",
   packed: "\u305D\u308D\u3063\u305F",
   bingo: "BINGO",
@@ -134,6 +134,7 @@ var ja = {
   combo: (n) => `${n} COMBO`,
   comboPop: (n) => `${n} COMBO!`,
   reset: "\u30EA\u30BB\u30C3\u30C8",
+  shuffle: "\u{1F500} \u30B7\u30E3\u30C3\u30D5\u30EB",
   soundOn: "\u{1F50A} \u97F3\u3042\u308A",
   soundOff: "\u{1F507} \u97F3\u306A\u3057",
   stamp: "OK",
@@ -147,7 +148,7 @@ var ja = {
   bannerMulti: (n) => `\u4E00\u6C17\u306B ${n} \u30E9\u30A4\u30F3\uFF01`,
   statusStart: () => "",
   statusLines: (lines, left) => `\u30D3\u30F3\u30B4 ${lines} \u30E9\u30A4\u30F3\uFF01 \u306E\u3053\u308A ${left} \u3053`,
-  statusReach: (labels) => `\u30EA\u30FC\u30C1\uFF01 \u3042\u3068${labels.slice(0, 2).map((l) => `\u300C${l}\u300D`).join("\u304B")}${labels.length > 2 ? "\u306A\u3069" : ""}\u3067\u30D3\u30F3\u30B4`,
+  statusReach: () => "",
   statusDone: "\u{1F389} \u30D1\u30FC\u30D5\u30A7\u30AF\u30C8\uFF01\u5FD8\u308C\u7269\u30BC\u30ED\u3067\u51FA\u767A\u3067\u304D\u307E\u3059",
   perfectTag: "\u{1F3C6} PERFECT",
   perfectStamp: "\u6E96\u5099\n\u5B8C\u4E86",
@@ -166,7 +167,7 @@ var ja = {
 };
 var en = {
   title: "Packing Bingo",
-  tag: "School trip",
+  tag: "",
   subtitle: "",
   packed: "PACKED",
   bingo: "BINGO",
@@ -174,6 +175,7 @@ var en = {
   combo: (n) => `${n} COMBO`,
   comboPop: (n) => `${n} COMBO!`,
   reset: "Reset",
+  shuffle: "\u{1F500} Shuffle",
   soundOn: "\u{1F50A} Sound on",
   soundOff: "\u{1F507} Muted",
   stamp: "OK",
@@ -187,7 +189,7 @@ var en = {
   bannerMulti: (n) => `${n} lines at once!`,
   statusStart: () => "",
   statusLines: (lines, left) => `${lines} bingo line${lines === 1 ? "" : "s"}! ${left} to go`,
-  statusReach: (labels) => `Reach! Pack ${labels.slice(0, 2).join(" or ")}${labels.length > 2 ? " (or more)" : ""} for a bingo`,
+  statusReach: () => "",
   statusDone: "\u{1F389} Perfect! Nothing left behind.",
   perfectTag: "\u{1F3C6} PERFECT",
   perfectStamp: "ALL\nSET",
@@ -293,6 +295,11 @@ function createSound(isMuted) {
     },
     tick: () => tone(1760, 0, 0.03, "square", 0.03),
     note: (k, at = 0) => tone(step(k), at, 0.12, "square", 0.05),
+    shuffle() {
+      for (let i = 0; i < 7; i++) noise(i * 0.042, 0.05, 0.16, 1600 + i * 260);
+      tone(hz(7), 0.34, 0.12, "triangle", 0.14);
+      tone(hz(12), 0.42, 0.2, "triangle", 0.14);
+    },
     close() {
       if (ac) void ac.close().catch(() => {
       });
@@ -320,7 +327,6 @@ function itemsKey(items) {
 }
 
 // src/styles.ts
-var FONT_URL = "https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=M+PLUS+Rounded+1c:wght@500;800&display=swap";
 var CSS = `
 .pkb{--pk-sun:var(--pkb-sun,#FFD54F);--pk-ink:var(--pkb-ink,#2A1F14);--pk-paper:var(--pkb-paper,#FFFDF6);--pk-red:var(--pkb-red,#E8473B);--pk-mint:var(--pkb-mint,#BDEBD2);--pk-display:"Dela Gothic One",var(--pkb-font-fallback,sans-serif);--pk-body:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",var(--pkb-font-fallback,sans-serif);--pk-n:4;--pk-s:1;--pk-d:1;container-type:inline-size;isolation:isolate;width:100%}
 .pkb,.pkb *{box-sizing:border-box;margin:0;padding:0}
@@ -332,6 +338,7 @@ var CSS = `
 .pkb-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 16px;margin-bottom:18px}
 .pkb-tags{display:flex;gap:8px;align-items:center}
 .pkb-kicker{display:inline-block;background:var(--pk-ink);color:var(--pk-sun);font-weight:800;font-size:11px;letter-spacing:.14em;padding:4px 10px;border-radius:999px}
+.pkb-kicker:empty{display:none}
 .pkb-kicker.pkb-gold{color:#fff;background:linear-gradient(90deg,#E8473B,#FF9F1C,#1FA971,#2F6FED,#E8473B);background-size:200% 100%;animation:pkb-rb 2s linear infinite}
 @keyframes pkb-rb{to{background-position:-200% 0}}
 .pkb button{font-family:var(--pk-body)}
@@ -388,8 +395,13 @@ var CSS = `
 .pkb-lines .pkb-o{stroke:var(--pk-ink);stroke-width:calc(6px*var(--pk-d))}
 .pkb-lines .pkb-draw line{animation:pkb-draw .45s ease-out .3s both}
 @keyframes pkb-draw{from{stroke-dashoffset:1}}
-.pkb-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px;font-weight:800;font-size:13px;word-break:auto-phrase}
-.pkb-reset{appearance:none;flex:none;border:2px solid var(--pk-ink);background:transparent;border-radius:999px;padding:5px 12px;font-weight:800;font-size:12px;line-height:1.4;color:var(--pk-ink);cursor:pointer}
+.pkb-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 10px;margin-top:18px;font-weight:800;font-size:13px;word-break:auto-phrase}
+.pkb-foot>span{flex:1 1 14em}
+.pkb-foot>span:empty{flex-basis:0}
+.pkb-acts{display:flex;gap:8px;flex:none;margin-left:auto}
+.pkb-reset,.pkb-shuf{appearance:none;flex:none;border:2px solid var(--pk-ink);background:transparent;border-radius:999px;padding:5px 12px;font-weight:800;font-size:12px;line-height:1.4;color:var(--pk-ink);cursor:pointer}
+.pkb-shuf{background:var(--pk-paper);box-shadow:2px 2px 0 var(--pk-ink)}
+.pkb-shuf:active{transform:translate(2px,2px);box-shadow:none}
 .pkb-flash{position:absolute;inset:0;z-index:7;background:#fff;opacity:0;pointer-events:none}
 .pkb-flash.pkb-go{animation:pkb-flash .4s ease-out}
 @keyframes pkb-flash{0%{opacity:.8}100%{opacity:0}}
@@ -437,6 +449,7 @@ var CONFETTI = ["#E8473B", "#2F6FED", "#1FA971", "#FFFDF6", "#2A1F14", "#FF9F1C"
 var COMBO_COLORS = ["#FF9F1C", "#1FA971", "#2F6FED", "#9B5DE5", "#E8473B"];
 var COMBO_MS = 2500;
 var MUTE_KEY = "packing-bingo-muted";
+var ORDER_PREFIX = "packing-bingo-order:";
 var esc = (s) => s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
 function readStore(key) {
   try {
@@ -451,29 +464,25 @@ function writeStore(key, value) {
   } catch {
   }
 }
-function ensureAssets(fonts) {
-  if (!document.getElementById("pkb-styles")) {
-    const s = document.createElement("style");
-    s.id = "pkb-styles";
-    s.textContent = CSS;
-    document.head.appendChild(s);
-  }
-  if (fonts && !document.getElementById("pkb-fonts")) {
-    const l = document.createElement("link");
-    l.id = "pkb-fonts";
-    l.rel = "stylesheet";
-    l.href = FONT_URL;
-    document.head.appendChild(l);
-  }
+var glintDelay = (c, n) => `${+((Math.floor(c / n) + c % n) * 0.36 / Math.max(1, n - 1)).toFixed(3)}s`;
+var lineKey = (l) => l.slice().sort((a, b) => a - b).join(",");
+var FLY_MS = 560;
+function ensureStyles() {
+  if (document.getElementById("pkb-styles")) return;
+  const s = document.createElement("style");
+  s.id = "pkb-styles";
+  s.textContent = CSS;
+  document.head.appendChild(s);
 }
-function template(L, M, demo) {
+function template(L, M, { demo, shuffle, vibrate }) {
   const n = L.size;
+  const input = vibrate ? `<input type="checkbox" switch role="checkbox">` : `<input type="checkbox">`;
   const tiles = Array.from({ length: n * n }, (_, c) => {
-    const gd = `--pkb-gd:${+((Math.floor(c / n) + c % n) * 0.36 / Math.max(1, n - 1)).toFixed(3)}s`;
+    const gd = `--pkb-gd:${glintDelay(c, n)}`;
     if (c === L.center)
       return `<div class="pkb-tile pkb-free pkb-on" style="${gd}"><span class="pkb-stamp">${esc(M.free)}</span></div>`;
     const it = L.items[L.itemCell.indexOf(c)];
-    return `<label class="pkb-tile" data-reach="${esc(M.reachBadge)}" style="${gd}"><input type="checkbox"><span class="pkb-emo" aria-hidden="true">${esc(it.emoji)}</span><span class="pkb-lbl">${esc(it.label).replace(/・/g, "\u30FB<wbr>")}</span><span class="pkb-stamp" aria-hidden="true">${esc(M.stamp)}</span></label>`;
+    return `<label class="pkb-tile" data-reach="${esc(M.reachBadge)}" style="${gd}">${input}<span class="pkb-emo" aria-hidden="true">${esc(it.emoji)}</span><span class="pkb-lbl">${esc(it.label).replace(/・/g, "\u30FB<wbr>")}</span><span class="pkb-stamp" aria-hidden="true">${esc(M.stamp)}</span></label>`;
   }).join("");
   const scale = `--pk-n:${n};--pk-s:${+Math.min(1.35, 4 / n).toFixed(3)};--pk-d:${+Math.min(1, 4 / n).toFixed(3)}`;
   const demoBar = demo ? `<div class="pkb-demo"><span>${esc(M.demoLabel)}</span><button type="button" data-r="dB">${esc(M.demoBingo)}</button><button type="button" data-r="dP">${esc(M.demoPerfect)}</button><button type="button" data-r="dR">${esc(M.demoRestore)}</button></div>` : "";
@@ -488,7 +497,7 @@ function template(L, M, demo) {
 <div class="pkb-combo" data-r="combo"><b data-r="cmbN"></b><span class="pkb-bar"><i data-r="cbar"></i></span></div></div></div>
 <div class="pkb-gw"><div class="pkb-grid">${tiles}</div><svg class="pkb-lines" aria-hidden="true"></svg>
 <div class="pkb-banner" data-r="banner" aria-hidden="true"><b data-r="bT"></b><span data-r="bS"></span></div></div>
-<div class="pkb-foot"><span data-r="msg" aria-live="polite"></span><button type="button" class="pkb-reset" data-r="reset">${esc(M.reset)}</button></div>
+<div class="pkb-foot"><span data-r="msg" aria-live="polite"></span><div class="pkb-acts">${shuffle ? `<button type="button" class="pkb-shuf" data-r="shuf">${esc(M.shuffle)}</button>` : ""}<button type="button" class="pkb-reset" data-r="reset">${esc(M.reset)}</button></div></div>
 <div class="pkb-flash" data-r="flash"></div>
 <div class="pkb-perfect" data-r="perfect"><div class="pkb-card" role="dialog" aria-label="${esc(M.perfectTitle)}">
 <div class="pkb-medal">${esc(M.perfectStamp)}</div><h3 class="pkb-ptitle">${esc(M.perfectTitle)}</h3><p class="pkb-pbody" data-r="pbody">${esc(perfectText(M, L.items.length))}</p>
@@ -499,12 +508,22 @@ function template(L, M, demo) {
 var perfectText = (M, total) => typeof M.perfectBody === "function" ? M.perfectBody(total) : M.perfectBody;
 function createPackingBingo(container, options = {}) {
   const L = resolveLayout(options);
-  const { items, lines, cellLines } = L;
+  const { items, cellLines } = L;
   const n = L.size, N = items.length;
   const normalize = (v) => Array.from({ length: N }, (_, i) => !!v?.[i]);
+  const identity = () => Array.from({ length: N }, (_, s) => s);
+  const isIdentity = (o) => o.every((v, s) => v === s);
+  const validOrder = (o) => Array.isArray(o) && o.length === N && o.every((v) => Number.isInteger(v) && v >= 0 && v < N) && new Set(o).size === N;
+  let order = identity();
+  const slotOf = identity();
+  let lines = L.lines;
   const demoCells = [...cellLines[0], ...cellLines[2 * n].slice(1, -1)];
-  const demoItems = new Set(L.itemCell.flatMap((c, i) => demoCells.includes(c) ? [i] : []));
-  const demoStart = () => Array.from({ length: N }, (_, i) => demoItems.has(i));
+  const demoSlots = L.itemCell.flatMap((c, s) => demoCells.includes(c) ? [s] : []);
+  const demoStart = () => {
+    const on = normalize(void 0);
+    demoSlots.forEach((s) => on[order[s]] = true);
+    return on;
+  };
   const far = (c) => Math.floor(c / n) + c % n;
   const dScale = Math.min(1, 4 / n);
   const M = { ...ja, ...options.messages };
@@ -513,7 +532,9 @@ function createPackingBingo(container, options = {}) {
   if (options.subtitle != null) M.subtitle = options.subtitle;
   const controlled = !!options.controlled;
   const storageKey = resolveStorageKey(options);
+  const orderKey = storageKey && ORDER_PREFIX + storageKey;
   const demo = !!options.demo;
+  const vibrate = options.vibrate !== false;
   const calm = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
   let dead = false;
   const timers = /* @__PURE__ */ new Set();
@@ -526,8 +547,8 @@ function createPackingBingo(container, options = {}) {
   };
   const wait = (ms) => new Promise((r) => window.setTimeout(r, ms));
   let gen = 0;
-  ensureAssets(options.fonts !== false);
-  container.innerHTML = template(L, M, demo);
+  ensureStyles();
+  container.innerHTML = template(L, M, { demo, shuffle: options.shuffle !== false, vibrate });
   const $ = (r) => {
     const el = container.querySelector(`[data-r="${r}"]`);
     if (!el) throw new Error(`[packing-bingo] internal: missing element "${r}"`);
@@ -704,6 +725,7 @@ function createPackingBingo(container, options = {}) {
     r.addEventListener("animationend", () => r.remove());
   };
   const buzz = (pattern) => {
+    if (!vibrate) return;
     const ua = navigator.userActivation;
     if (ua && !ua.hasBeenActive) return;
     try {
@@ -762,7 +784,12 @@ function createPackingBingo(container, options = {}) {
   const ctr = (t) => {
     return { x: t.offsetLeft + t.offsetWidth / 2, y: t.offsetTop + t.offsetHeight / 2 };
   };
+  let landing = 0;
   function drawLines(fresh = []) {
+    if (landing) {
+      svg.innerHTML = "";
+      return;
+    }
     svg.setAttribute("viewBox", `0 0 ${gw.clientWidth} ${gw.clientHeight}`);
     svg.innerHTML = cur.map((k) => {
       const a = ctr(cellTiles[cellLines[k][0]]), b = ctr(cellTiles[cellLines[k][n - 1]]);
@@ -777,6 +804,7 @@ function createPackingBingo(container, options = {}) {
       combo = 0;
       $("combo").classList.remove("pkb-on");
       sfx.off();
+      buzz(8);
       return;
     }
     const now = performance.now();
@@ -799,7 +827,7 @@ function createPackingBingo(container, options = {}) {
       $("cmbN").textContent = M.combo(combo);
       replay($("combo"), "pkb-on");
     }
-    buzz(12);
+    buzz(18);
   }
   $("cbar").addEventListener("animationend", () => {
     $("combo").classList.remove("pkb-on");
@@ -893,10 +921,11 @@ function createPackingBingo(container, options = {}) {
     $("combo").classList.remove("pkb-on");
     perfectEl.classList.remove("pkb-show");
   }
+  const completeLines = () => lines.flatMap((l, k) => l.every((i) => checked[i]) ? [k] : []);
   function render(src, quiet) {
     const events = [];
     const on = checked, c = on.filter(Boolean).length;
-    cur = lines.flatMap((l, k) => l.every((i) => on[i]) ? [k] : []);
+    cur = completeLines();
     const fresh = cur.filter((k) => !prevLines.has(k));
     if ([...prevLines].some((k) => !cur.includes(k))) {
       cancelFx();
@@ -910,7 +939,7 @@ function createPackingBingo(container, options = {}) {
     }
     tiles.forEach((t, i) => {
       t.classList.toggle("pkb-on", on[i]);
-      t.classList.toggle("pkb-line", hit.has(L.itemCell[i]));
+      t.classList.toggle("pkb-line", hit.has(L.itemCell[slotOf[i]]));
       t.classList.toggle("pkb-reach", reach.has(i));
     });
     freeTile?.classList.toggle("pkb-line", hit.has(L.center));
@@ -928,8 +957,8 @@ function createPackingBingo(container, options = {}) {
     lastN = cur.length;
     drawLines(fresh);
     if (src !== null) tapFx(src, on[src]);
-    const newL = fresh.filter((k) => !gotL.has(k));
-    newL.forEach((k) => gotL.add(k));
+    const newL = fresh.map((k) => lineKey(lines[k])).filter((key) => !gotL.has(key));
+    newL.forEach((key) => gotL.add(key));
     const linePts = 100 * newL.length * newL.length;
     score += linePts;
     if (quiet) {
@@ -974,8 +1003,9 @@ function createPackingBingo(container, options = {}) {
     got.clear();
     gotL.clear();
     checked.forEach((v, i) => v && got.add(i));
-    lines.forEach((l, k) => l.every((i) => checked[i]) && gotL.add(k));
-    prevLines = new Set(gotL);
+    const done = completeLines();
+    done.forEach((k) => gotL.add(lineKey(lines[k])));
+    prevLines = new Set(done);
     prevReach = /* @__PURE__ */ new Set();
     prevAll = checked.every(Boolean);
     gotP = prevAll;
@@ -998,6 +1028,77 @@ function createPackingBingo(container, options = {}) {
     options.onChange?.(checked.slice());
     flush(events);
   }
+  function place(next) {
+    order = next;
+    order.forEach((i, s) => {
+      slotOf[i] = s;
+      cellTiles[L.itemCell[s]] = tiles[i];
+    });
+    lines = L.lines.map((l) => l.map((s) => order[s]));
+    const focused = document.activeElement;
+    cellTiles.forEach((t, c) => {
+      t.style.setProperty("--pkb-gd", glintDelay(c, n));
+      grid.appendChild(t);
+    });
+    if (focused instanceof HTMLElement && grid.contains(focused) && document.activeElement !== focused)
+      focused.focus({ preventScroll: true });
+  }
+  const saveOrder = () => {
+    if (!orderKey) return;
+    writeStore(orderKey, JSON.stringify(order));
+  };
+  let flights = [];
+  function arrange(next) {
+    if (!checked.every(Boolean)) cancelFx();
+    const from = calm ? null : tiles.map((t) => t.getBoundingClientRect());
+    flights.forEach((a) => a.cancel());
+    flights = [];
+    place(next);
+    lines.forEach((l) => {
+      if (l.every((i) => got.has(i))) gotL.add(lineKey(l));
+    });
+    const done = completeLines();
+    done.forEach((k) => gotL.add(lineKey(lines[k])));
+    prevLines = new Set(done);
+    render(null, true);
+    saveOrder();
+    if (!from || typeof Element.prototype.animate !== "function") return;
+    tiles.forEach((t, i) => {
+      const a = from[i], b = t.getBoundingClientRect();
+      const dx = a.left - b.left, dy = a.top - b.top;
+      if (Math.abs(dx) + Math.abs(dy) < 1) return;
+      flights.push(
+        t.animate([{ transform: `translate(${dx}px,${dy}px)` }, { transform: "none" }], {
+          duration: FLY_MS - 140,
+          delay: Math.random() * 140,
+          easing: "cubic-bezier(.3,1.25,.5,1)",
+          fill: "backwards"
+        })
+      );
+    });
+    clearTimeout(landing);
+    landing = window.setTimeout(() => {
+      landing = 0;
+      flights = [];
+      if (!dead) drawLines(cur);
+    }, FLY_MS);
+    svg.innerHTML = "";
+  }
+  function shuffleCard() {
+    let next = order.slice();
+    do {
+      for (let s = N - 1; s > 0; s--) {
+        const r = Math.floor(Math.random() * (s + 1));
+        [next[s], next[r]] = [next[r], next[s]];
+      }
+    } while (next.every((v, s) => v === order[s]));
+    arrange(next);
+    sfx.shuffle();
+    buzz([10, 40, 10, 40, 10, 40, 24]);
+  }
+  const unshuffle = () => {
+    if (!isIdentity(order)) arrange(identity());
+  };
   grid.addEventListener("change", (e) => {
     const i = ins.indexOf(e.target);
     if (i < 0) return;
@@ -1005,7 +1106,11 @@ function createPackingBingo(container, options = {}) {
     next[i] = !next[i];
     request(next, i);
   });
-  $("reset").addEventListener("click", () => request(normalize(void 0), null, { reset: true }));
+  container.querySelector('[data-r="shuf"]')?.addEventListener("click", shuffleCard);
+  $("reset").addEventListener("click", () => {
+    unshuffle();
+    request(normalize(void 0), null, { reset: true });
+  });
   $("close").addEventListener("click", () => perfectEl.classList.remove("pkb-show"));
   perfectEl.addEventListener("click", (e) => {
     if (e.target === perfectEl) perfectEl.classList.remove("pkb-show");
@@ -1044,9 +1149,21 @@ function createPackingBingo(container, options = {}) {
       void run(miss.map((i, k) => k < miss.length - 1 ? { i, delay: 170, quiet: true } : { i, delay: 450 }));
     });
     $("dR").addEventListener("click", () => {
-      if (!busy) request(demoStart(), null, { reset: true });
+      if (busy) return;
+      unshuffle();
+      request(demoStart(), null, { reset: true });
     });
   }
+  let startOrder = null;
+  if (orderKey) {
+    try {
+      const saved = JSON.parse(readStore(orderKey) ?? "null");
+      if (validOrder(saved)) startOrder = saved;
+    } catch {
+    }
+  }
+  if (!startOrder && validOrder(options.defaultOrder)) startOrder = options.defaultOrder.slice();
+  if (startOrder && !isIdentity(startOrder)) place(startOrder);
   let initial = null;
   if (storageKey) {
     try {
@@ -1078,19 +1195,35 @@ function createPackingBingo(container, options = {}) {
       flush(apply(n2, changed[0], false));
     },
     reset() {
-      if (!dead) request(normalize(void 0), null, { reset: true });
+      if (dead) return;
+      unshuffle();
+      request(normalize(void 0), null, { reset: true });
+    },
+    shuffle() {
+      if (!dead) shuffleCard();
     },
     refresh() {
       if (!dead) render(null, true);
     },
     getState() {
-      return { checked: checked.slice(), lines: cur.slice(), score, maxCombo, complete: checked.every(Boolean), size: n, free: L.free };
+      return {
+        checked: checked.slice(),
+        lines: cur.slice(),
+        score,
+        maxCombo,
+        complete: checked.every(Boolean),
+        size: n,
+        free: L.free,
+        order: order.slice()
+      };
     },
     destroy() {
       if (dead) return;
       dead = true;
       timers.forEach((id) => clearTimeout(id));
       timers.clear();
+      clearTimeout(landing);
+      flights.forEach((a) => a.cancel());
       cancelAnimationFrame(raf);
       cancelAnimationFrame(tw);
       ro?.disconnect();
@@ -1103,7 +1236,7 @@ function createPackingBingo(container, options = {}) {
 // src/react.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var PackingBingo = (0, import_react.forwardRef)(function PackingBingo2(props, ref) {
-  const { checked, defaultChecked, className, style, onChange, onBingo, onPerfect, messages, ...config } = props;
+  const { checked, defaultChecked, defaultOrder, className, style, onChange, onBingo, onPerfect, messages, fonts: _fonts, ...config } = props;
   const host = (0, import_react.useRef)(null);
   const inst = (0, import_react.useRef)(null);
   const callbacks = (0, import_react.useRef)({ onChange, onBingo, onPerfect });
@@ -1115,6 +1248,7 @@ var PackingBingo = (0, import_react.forwardRef)(function PackingBingo2(props, re
   const storageKey = resolveStorageKey({ ...config, controlled });
   const latestKey = (0, import_react.useRef)(storageKey);
   if (controlled) latest.current = checked;
+  const latestOrder = (0, import_react.useRef)(defaultOrder);
   const messageShape = messages ? Object.fromEntries(Object.entries(messages).map(([k, v]) => [k, typeof v === "function" ? "\u0192" : v])) : null;
   const key = JSON.stringify({ ...config, messageShape, controlled });
   (0, import_react.useEffect)(() => {
@@ -1130,6 +1264,7 @@ var PackingBingo = (0, import_react.forwardRef)(function PackingBingo2(props, re
       messages: liveMessages,
       controlled,
       defaultChecked: controlled || latestKey.current === storageKey ? latest.current : defaultChecked,
+      defaultOrder: latestKey.current === storageKey ? latestOrder.current : defaultOrder,
       onChange: (next) => {
         if (!controlled) latest.current = next;
         callbacks.current.onChange?.(next);
@@ -1139,7 +1274,9 @@ var PackingBingo = (0, import_react.forwardRef)(function PackingBingo2(props, re
     });
     inst.current = instance;
     return () => {
-      if (!controlled) latest.current = instance.getState().checked;
+      const state = instance.getState();
+      if (!controlled) latest.current = state.checked;
+      latestOrder.current = state.order;
       latestKey.current = storageKey;
       instance.destroy();
       if (inst.current === instance) inst.current = null;
@@ -1155,6 +1292,7 @@ var PackingBingo = (0, import_react.forwardRef)(function PackingBingo2(props, re
     ref,
     () => ({
       reset: () => inst.current?.reset(),
+      shuffle: () => inst.current?.shuffle(),
       setChecked: (next) => inst.current?.setChecked(next, { animate: true }),
       getState: () => inst.current?.getState() ?? null
     }),

package/dist/index.d.cts

@@ -12,8 +12,10 @@ interface PackingBingoProps extends Omit<PackingBingoOptions, "controlled" | "de
     style?: CSSProperties;
 }
 interface PackingBingoHandle {
-    /** Clear the card and score (calls onChange). */
+    /** Clear the card and score (calls onChange), and put the items back in their own squares. */
     reset(): void;
+    /** Move the items to random squares, as the 🔀 button does. Checks stay with their items. */
+    shuffle(): void;
     /** Set the card. A one-item change plays like a tap; bigger jumps apply quietly. */
     setChecked(checked: readonly boolean[]): void;
     getState(): PackingBingoState | null;

package/dist/index.d.ts

@@ -12,8 +12,10 @@ interface PackingBingoProps extends Omit<PackingBingoOptions, "controlled" | "de
     style?: CSSProperties;
 }
 interface PackingBingoHandle {
-    /** Clear the card and score (calls onChange). */
+    /** Clear the card and score (calls onChange), and put the items back in their own squares. */
     reset(): void;
+    /** Move the items to random squares, as the 🔀 button does. Checks stay with their items. */
+    shuffle(): void;
     /** Set the card. A one-item change plays like a tap; bigger jumps apply quietly. */
     setChecked(checked: readonly boolean[]): void;
     getState(): PackingBingoState | null;

package/dist/index.js

@@ -7,13 +7,13 @@ import {
   en,
   ja,
   resolveStorageKey
-} from "./chunk-Z34GMJW2.js";
+} from "./chunk-BAA2CFUA.js";
 
 // src/react.tsx
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 var PackingBingo = forwardRef(function PackingBingo2(props, ref) {
-  const { checked, defaultChecked, className, style, onChange, onBingo, onPerfect, messages, ...config } = props;
+  const { checked, defaultChecked, defaultOrder, className, style, onChange, onBingo, onPerfect, messages, fonts: _fonts, ...config } = props;
   const host = useRef(null);
   const inst = useRef(null);
   const callbacks = useRef({ onChange, onBingo, onPerfect });
@@ -25,6 +25,7 @@ var PackingBingo = forwardRef(function PackingBingo2(props, ref) {
   const storageKey = resolveStorageKey({ ...config, controlled });
   const latestKey = useRef(storageKey);
   if (controlled) latest.current = checked;
+  const latestOrder = useRef(defaultOrder);
   const messageShape = messages ? Object.fromEntries(Object.entries(messages).map(([k, v]) => [k, typeof v === "function" ? "\u0192" : v])) : null;
   const key = JSON.stringify({ ...config, messageShape, controlled });
   useEffect(() => {
@@ -40,6 +41,7 @@ var PackingBingo = forwardRef(function PackingBingo2(props, ref) {
       messages: liveMessages,
       controlled,
       defaultChecked: controlled || latestKey.current === storageKey ? latest.current : defaultChecked,
+      defaultOrder: latestKey.current === storageKey ? latestOrder.current : defaultOrder,
       onChange: (next) => {
         if (!controlled) latest.current = next;
         callbacks.current.onChange?.(next);
@@ -49,7 +51,9 @@ var PackingBingo = forwardRef(function PackingBingo2(props, ref) {
     });
     inst.current = instance;
     return () => {
-      if (!controlled) latest.current = instance.getState().checked;
+      const state = instance.getState();
+      if (!controlled) latest.current = state.checked;
+      latestOrder.current = state.order;
       latestKey.current = storageKey;
       instance.destroy();
       if (inst.current === instance) inst.current = null;
@@ -65,6 +69,7 @@ var PackingBingo = forwardRef(function PackingBingo2(props, ref) {
     ref,
     () => ({
       reset: () => inst.current?.reset(),
+      shuffle: () => inst.current?.shuffle(),
       setChecked: (next) => inst.current?.setChecked(next, { animate: true }),
       getState: () => inst.current?.getState() ?? null
     }),