@blakesteve/roster 5.11.0 → 5.13.0

package/dist/components/organisms/ModerationQueue/ModerationQueue.js

@@ -1,25 +1,26 @@
 "use client";
-import { jsxs as q, jsx as c, Fragment as Se } from "react/jsx-runtime";
-import { useId as Qe, useRef as g, useState as I, useCallback as te, useLayoutEffect as re } from "react";
-import { cn as K } from "../../../lib/utils.js";
+import { jsxs as q, jsx as i, Fragment as qe } from "react/jsx-runtime";
+import { useId as Qe, useRef as g, useState as R, useCallback as re, useLayoutEffect as ne } from "react";
+import { cn as j } from "../../../lib/utils.js";
 import { withLabels as Ge } from "../../../lib/labels.js";
-import { Button as ke } from "../../atoms/Button/Button.js";
+import { Button as $e } from "../../atoms/Button/Button.js";
 import { Card as We } from "../../atoms/Card/Card.js";
 import { Spinner as Je } from "../../atoms/Spinner/Spinner.js";
 import { Textarea as Ue } from "../../atoms/Textarea/Textarea.js";
-import { Alert as ne } from "../../molecules/Alert/Alert.js";
+import { Alert as oe } from "../../molecules/Alert/Alert.js";
 import { EmptyState as Ve } from "../../molecules/EmptyState/EmptyState.js";
 import { RadioGroup as Xe } from "../../molecules/RadioGroup/RadioGroup.js";
 import { editAction as Ye } from "./queue-actions.js";
-const Ze = {
+import { useKeyFocus as Ze } from "../../../internal/key-focus.js";
+const _e = {
   loading: (n) => `Loading ${n}`,
   loadFailed: "The queue couldn't load.",
   retry: "Retry",
   busy: "loading",
   cancel: "Cancel",
   decide: (n) => `Decide: ${n}`,
-  decided: (n, a) => `${n}: ${a}.`,
-  failed: (n, a, f) => `${n} didn't go through for ${a}. ${f}`,
+  decided: (n, c) => `${n}: ${c}.`,
+  failed: (n, c, f) => `${n} didn't go through for ${c}. ${f}`,
   unknownError: "Something went wrong.",
   decidedElsewhere: (n) => `${n} was decided elsewhere.`,
   left: (n) => n === 0 ? "None left." : `${n} left.`,
@@ -29,86 +30,89 @@ const Ze = {
   reasonOptional: "Reason (optional)",
   note: "Note",
   noteOptional: "Note (optional)"
-}, ye = {
+}, Se = {
   primary: { colorScheme: "primary", variant: "solid" },
   success: { colorScheme: "success", variant: "solid" },
   danger: { colorScheme: "error", variant: "soft" },
   neutral: { colorScheme: "neutral", variant: "outline" }
-}, _e = { edit: Ye }, R = (n) => n.edit ? n : null, et = (n) => Math.min(6, Math.max(1, n)), tt = (n, a) => n instanceof Error && n.message ? n.message : a;
-function O(n, a) {
+}, et = { edit: Ye }, B = (n) => n.edit ? n : null, tt = (n) => Math.min(6, Math.max(1, n)), rt = (n, c) => n instanceof Error && n.message ? n.message : c;
+function O(n, c) {
   const f = { ...n };
-  return delete f[a], f;
+  return delete f[c], f;
 }
-function oe({
+function se({
   busy: n = !1,
-  blocked: a = !1,
-  onClick: f,
+  blocked: c = !1,
+  onBlockedPress: f,
+  onClick: v,
   children: y,
   className: x,
   ...S
 }) {
-  return /* @__PURE__ */ c(
-    ke,
+  const $ = /* @__PURE__ */ i(
+    $e,
     {
       size: "lg",
       ...S,
       isLoading: n,
-      "aria-disabled": a || void 0,
-      className: K(a && !n && "rst:cursor-not-allowed rst:opacity-50", x),
-      onClick: (b) => {
-        if (a) {
-          b.preventDefault();
+      "aria-disabled": c || void 0,
+      className: j(c && !n && "rst:cursor-not-allowed rst:opacity-50", x),
+      onClick: (M) => {
+        if (c) {
+          M.preventDefault();
           return;
         }
-        f?.(b);
+        v?.(M);
       },
       children: y
     }
   );
+  return f ? /* @__PURE__ */ i("span", { style: { display: "contents" }, onClickCapture: () => c && !n && f(), children: $ }) : $;
 }
-function ht({
+function vt({
   label: n,
-  hideLabel: a = !1,
+  hideLabel: c = !1,
   headingLevel: f = 2,
-  itemHeadingLevel: y,
-  items: x,
-  getKey: S,
-  itemLabel: b,
-  renderMeta: B,
-  renderContent: qe,
-  actions: Q,
-  status: se = "ready",
-  error: $e,
+  itemHeadingLevel: v,
+  items: y,
+  getKey: x,
+  itemLabel: S,
+  renderMeta: $,
+  renderContent: M,
+  actions: G,
+  status: ie = "ready",
+  error: Ne,
   onRetry: ce,
-  empty: ie = { title: "Nothing waiting" },
-  density: ae = "comfortable",
-  footer: Ne,
-  labels: we,
-  className: Ce
+  empty: ae = { title: "Nothing waiting" },
+  density: le = "comfortable",
+  footer: we,
+  labels: Ce,
+  className: Ie
 }) {
-  const p = Ge(Ze, we), Ie = typeof Q == "function" ? Q(_e) : Q, E = Qe(), N = g(null), w = x.map(S), j = g(/* @__PURE__ */ new Map());
-  j.current = new Map(x.map((e, t) => [w[t], e]));
-  const [G, Re] = I({}), C = g({}), le = (e) => {
-    C.current = e(C.current), Re(C.current);
-  }, [ue, M] = I({}), [de, Be] = I({}), h = g({}), v = (e, t) => {
-    h.current = t ? { ...h.current, [e]: t } : O(h.current, e), Be(h.current);
-  }, [W, Ee] = I({ text: "", n: 0 }), J = g([]), T = g(null), fe = te((e) => {
-    J.current.push(e), !T.current && (T.current = setTimeout(() => {
-      T.current = null;
-      const t = J.current.join(" ");
-      J.current = [], Ee((r) => ({ text: t, n: r.n + 1 }));
+  Ze();
+  const p = Ge(_e, Ce), Re = typeof G == "function" ? G(et) : G, E = Qe(), w = g(null), C = y.map(x), A = g(/* @__PURE__ */ new Map());
+  A.current = new Map(y.map((e, t) => [C[t], e]));
+  const [W, Be] = R({}), I = g({}), ue = (e) => {
+    I.current = e(I.current), Be(I.current);
+  }, [de, P] = R({}), [fe, Ee] = R({}), h = g({}), b = (e, t) => {
+    h.current = t ? { ...h.current, [e]: t } : O(h.current, e), Ee(h.current);
+  }, [J, Fe] = R({ text: "", n: 0 }), U = g([]), F = g(null), me = re((e) => {
+    U.current.push(e), !F.current && (F.current = setTimeout(() => {
+      F.current = null;
+      const t = U.current.join(" ");
+      U.current = [], Fe((r) => ({ text: t, n: r.n + 1 }));
     }, 0));
   }, []);
-  re(
+  ne(
     () => () => {
-      T.current && clearTimeout(T.current);
+      F.current && clearTimeout(F.current);
     },
     []
   );
-  const [Te, Fe] = I(0), U = g(null), $ = te((e) => {
-    U.current = e, Fe((t) => t + 1);
-  }, []), me = te((e) => {
-    const t = N.current;
+  const [Te, Le] = R(0), V = g(null), N = re((e) => {
+    V.current = e, Le((t) => t + 1);
+  }, []), pe = re((e) => {
+    const t = w.current;
     if (!t) return null;
     const r = "key" in e ? CSS.escape(e.key) : "";
     switch (e.kind) {
@@ -122,148 +126,167 @@ function ht({
         return t.querySelector(`[data-queue-item="${r}"] [data-queue-step]`);
     }
   }, []);
-  re(() => {
-    const e = U.current;
+  ne(() => {
+    const e = V.current;
     if (!e) return;
-    U.current = null, (me(e) ?? N.current?.querySelector("[data-queue-item]") ?? N.current?.querySelector("[data-queue-empty]"))?.focus();
-  }, [Te, me]);
-  const V = g(null), Le = (e) => () => {
-    V.current = e;
-  }, Oe = (e) => {
-    e.relatedTarget && !N.current?.contains(e.relatedTarget) && (V.current = null);
-  }, A = (e) => {
-    if (V.current !== e) return !1;
+    V.current = null, (pe(e) ?? w.current?.querySelector("[data-queue-item]") ?? w.current?.querySelector("[data-queue-empty]"))?.focus();
+  }, [Te, pe]);
+  const X = g(null), Oe = (e) => () => {
+    X.current = e;
+  }, je = (e) => {
+    e.relatedTarget && !w.current?.contains(e.relatedTarget) && (X.current = null);
+  }, K = (e) => {
+    if (X.current !== e) return !1;
     const t = document.activeElement;
-    return !t || t === document.body ? !0 : N.current?.contains(t) ? !!t.closest(`[data-queue-item="${CSS.escape(e)}"]`) : !1;
-  }, F = g(null), P = (e, t) => {
-    F.current = t, v(e.key, { ...e, open: !1 });
-  }, pe = g(w), X = g(/* @__PURE__ */ new Map()), [, je] = I(0), Y = g(/* @__PURE__ */ new Set()), ge = (e, t, r) => {
-    const s = t.indexOf(e), d = t.slice(s + 1).find((i) => r.has(i));
+    return !t || t === document.body ? !0 : w.current?.contains(t) ? !!t.closest(`[data-queue-item="${CSS.escape(e)}"]`) : !1;
+  }, T = g(null), z = (e, t) => {
+    T.current = t, b(e.key, { ...e, open: !1 });
+  }, ge = g(C), Y = g(/* @__PURE__ */ new Map()), [, Me] = R(0), Z = g(/* @__PURE__ */ new Set()), he = (e, t, r) => {
+    const s = t.indexOf(e), d = t.slice(s + 1).find((a) => r.has(a));
     if (d) return { kind: "item", key: d };
-    const o = t.slice(0, s).reverse().find((i) => r.has(i));
+    const o = t.slice(0, s).reverse().find((a) => r.has(a));
     return o ? { kind: "item", key: o } : { kind: "empty" };
   };
-  re(() => {
-    const e = pe.current;
-    pe.current = w;
-    const t = new Set(w), r = X.current;
-    X.current = /* @__PURE__ */ new Map();
+  ne(() => {
+    const e = ge.current;
+    ge.current = C;
+    const t = new Set(C), r = Y.current;
+    Y.current = /* @__PURE__ */ new Map();
     const s = [];
     let d = !1;
-    for (const [o, i] of r) {
+    for (const [o, a] of r) {
       const l = t.has(o);
-      s.push(i.announce ?? i.sentence), l || (d = !0), Y.current.delete(o);
-      const u = l ? { kind: "trigger", key: o, actionId: i.actionId } : e.includes(o) ? ge(o, e, t) : null, m = h.current[o];
+      s.push(a.announce ?? a.sentence), l || (d = !0), Z.current.delete(o);
+      const u = l ? { kind: "trigger", key: o, actionId: a.actionId } : e.includes(o) ? he(o, e, t) : null, m = h.current[o];
       if (m?.surface)
-        P(m, u ?? { kind: "empty" });
+        z(m, u ?? { kind: "empty" });
       else {
-        const L = A(o);
-        m && v(o, null), u && L && $(u);
+        const L = K(o);
+        m && b(o, null), u && L && N(u);
       }
     }
-    for (const o of e.filter((i) => !t.has(i))) {
+    for (const o of e.filter((a) => !t.has(a))) {
       if (r.has(o)) continue;
-      M((m) => o in m ? O(m, o) : m);
-      const i = ge(o, e, t), l = F.current;
-      if (l && "key" in l && l.key === o && (F.current = i), C.current[o]) {
-        Y.current.add(o), A(o) && $(i);
+      P((m) => o in m ? O(m, o) : m);
+      const a = he(o, e, t), l = T.current;
+      if (l && "key" in l && l.key === o && (T.current = a), I.current[o]) {
+        Z.current.add(o), K(o) && N(a);
         continue;
       }
       const u = h.current[o];
       if (u && !(u.surface && !u.open))
-        if (s.push(p.decidedElsewhere(u.label)), d = !0, u.surface) P(u, i);
+        if (s.push(p.decidedElsewhere(u.label)), d = !0, u.surface) z(u, a);
         else {
-          const m = A(o);
-          v(o, null), m && $(i);
+          const m = K(o);
+          b(o, null), m && N(a);
         }
-      else !u && A(o) && $(i);
+      else !u && K(o) && N(a);
     }
-    s.length && fe(`${s.join(" ")}${d ? ` ${p.left(w.length)}` : ""}`);
+    s.length && me(`${s.join(" ")}${d ? ` ${p.left(C.length)}` : ""}`);
   });
-  const z = async (e, t, r, s) => {
-    const d = j.current.get(e) ?? t, o = b(d), i = r.edit ? R(r).run : r.run;
-    le((l) => ({ ...l, [e]: r.id })), M((l) => O(l, e));
+  const D = async (e, t, r, s) => {
+    const d = A.current.get(e) ?? t, o = S(d), a = r.edit ? B(r).run : r.run;
+    ue((l) => ({ ...l, [e]: r.id })), P((l) => O(l, e));
     try {
-      const l = await i(d, s);
-      X.current.set(e, {
+      const l = await a(d, s);
+      Y.current.set(e, {
         actionId: r.id,
         sentence: p.decided(r.done ?? r.label, o),
         announce: l ? l.announce : void 0
-      }), je((u) => u + 1);
+      }), Me((u) => u + 1);
     } catch (l) {
-      const u = tt(l, p.unknownError);
-      fe(p.failed(r.label, o, u));
+      const u = rt(l, p.unknownError);
+      me(p.failed(r.label, o, u));
       const m = h.current[e];
-      Y.current.delete(e) ? m?.surface ? P(m, { kind: "empty" }) : m && v(e, null) : m ? v(e, { ...m, error: u }) : M((L) => ({ ...L, [e]: u }));
+      Z.current.delete(e) ? m?.surface ? z(m, { kind: "empty" }) : m && b(e, null) : m ? b(e, { ...m, error: u }) : P((L) => ({ ...L, [e]: u }));
     } finally {
-      le((l) => O(l, e));
+      ue((l) => O(l, e));
     }
-  }, Me = (e, t) => {
-    const r = S(e), s = R(t);
+  }, Ae = (e, t) => {
+    const r = x(e), s = B(t);
     if (!t.confirm && !t.reason && !s) {
-      z(r, e, t, {});
+      D(r, e, t, {});
       return;
     }
-    M((d) => O(d, r)), v(r, {
+    P((d) => O(d, r)), b(r, {
       key: r,
-      label: b(e),
+      label: S(e),
       item: e,
       action: t,
       draft: s ? s.edit.initial(e) : void 0,
       reason: {},
       surface: !!s?.edit.surface,
       open: !0
-    }), s?.edit.surface || $({ kind: "step", key: r });
-  }, Z = (e) => {
+    }), s?.edit.surface || N({ kind: "step", key: r });
+  }, _ = (e) => {
     const t = h.current[e];
-    if (!t || C.current[e]) return;
+    if (!t || I.current[e]) return;
     const r = { kind: "trigger", key: e, actionId: t.action.id };
-    t.surface ? P(t, r) : (v(e, null), $(r));
-  }, Ae = (e) => {
+    t.surface ? z(t, r) : (b(e, null), N(r));
+  }, be = (e) => {
     const t = h.current[e];
-    !t || C.current[e] || xe(t, j.current.get(e) ?? t.item, p) || (t.action.edit ? z(e, t.item, t.action, { draft: t.draft }) : t.action.reason ? z(e, t.item, t.action, { reason: rt(t.reason) }) : z(e, t.item, t.action, {}));
+    if (!(!t || I.current[e])) {
+      if (ke(t, A.current.get(e) ?? t.item, p)) {
+        t.tried || b(e, { ...t, tried: !0 });
+        return;
+      }
+      t.action.edit ? D(e, t.item, t.action, { draft: t.draft }) : t.action.reason ? D(e, t.item, t.action, { reason: nt(t.reason) }) : D(e, t.item, t.action, {});
+    }
   }, Pe = (e) => {
-    const t = F.current;
-    F.current = null, v(e, null), t && $(t);
-  }, ze = `h${f}`, he = y ?? et(f + 1), De = `h${he}`, _ = `${E}-label`, be = (e, t) => {
-    const { action: r } = e, s = R(r), d = j.current.get(e.key) ?? e.item, o = !!G[e.key], i = xe(e, d, p), l = `${E}-step-${t}-message`, u = /* @__PURE__ */ c(
-      oe,
+    const t = T.current;
+    T.current = null, b(e, null), t && N(t);
+  }, Ke = `h${f}`, ve = v ?? tt(f + 1), ze = `h${ve}`, ee = `${E}-label`, ye = (e, t) => {
+    const { action: r } = e, s = B(r), d = A.current.get(e.key) ?? e.item, o = !!W[e.key], a = ke(e, d, p), l = `${E}-step-${t}-message`, u = /* @__PURE__ */ i(
+      se,
       {
-        ...ye[r.tone ?? "neutral"],
+        ...Se[r.tone ?? "neutral"],
         busy: o,
         loadingLabel: p.busy,
-        blocked: !!i,
-        "aria-describedby": i ? l : void 0,
-        onClick: () => Ae(e.key),
+        blocked: !!a,
+        onBlockedPress: () => be(e.key),
+        "aria-describedby": a ? l : void 0,
+        onClick: () => be(e.key),
         "data-queue-submit": "",
         children: s ? s.edit.submitLabel : r.label
       }
-    ), m = /* @__PURE__ */ c(oe, { variant: "ghost", colorScheme: "neutral", blocked: o, onClick: () => Z(e.key), children: p.cancel }), L = /* @__PURE__ */ q(Se, { children: [
-      r.reason && /* @__PURE__ */ c(
-        nt,
+    ), m = /* @__PURE__ */ i(se, { variant: "ghost", colorScheme: "neutral", blocked: o, onClick: () => _(e.key), children: p.cancel }), L = /* @__PURE__ */ q(qe, { children: [
+      r.reason && /* @__PURE__ */ i(
+        ot,
         {
           id: `${E}-step-${t}`,
           step: r.reason,
           labels: p,
           value: e.reason,
           disabled: o,
-          onChange: (ee) => v(e.key, { ...h.current[e.key], reason: ee })
+          onChange: (te) => b(e.key, { ...h.current[e.key], reason: te })
         }
       ),
-      s && /* @__PURE__ */ c(
+      s && /* @__PURE__ */ i(
         s.edit.Form,
         {
           item: d,
           value: e.draft,
-          onChange: (ee) => v(e.key, { ...h.current[e.key], draft: ee })
+          onChange: (te) => b(e.key, { ...h.current[e.key], draft: te })
         }
       ),
-      i && /* @__PURE__ */ c("p", { id: l, className: "rst:text-sm rst:text-error-600 rst:dark:text-error-400", "data-queue-validation": "", children: i }),
-      e.error && /* @__PURE__ */ c(ne, { colorScheme: "error", role: "group", "aria-live": "off", children: e.error })
+      a && /* @__PURE__ */ i(
+        "p",
+        {
+          id: l,
+          className: j(
+            "rst:text-sm",
+            e.tried ? "rst:text-error-600 rst:dark:text-error-400" : "rst:text-gray-500 rst:dark:text-gray-400"
+          ),
+          "data-queue-validation": "",
+          "data-tried": e.tried ? "" : void 0,
+          children: a
+        }
+      ),
+      e.error && /* @__PURE__ */ i(oe, { colorScheme: "error", role: "group", "aria-live": "off", children: e.error })
     ] });
     return { submitButton: u, cancelButton: m, fields: L };
-  }, He = (e, t) => {
-    const { submitButton: r, cancelButton: s, fields: d } = be(e, t), o = `${E}-step-${t}-prompt`, i = R(e.action), l = e.action.reason?.prompt ?? e.action.confirm?.prompt ?? i?.edit.title;
+  }, De = (e, t) => {
+    const { submitButton: r, cancelButton: s, fields: d } = ye(e, t), o = `${E}-step-${t}-prompt`, a = B(e.action), l = e.action.reason?.prompt ?? e.action.confirm?.prompt ?? a?.edit.title;
     return /* @__PURE__ */ q(
       "div",
       {
@@ -272,12 +295,12 @@ function ht({
         tabIndex: -1,
         "data-queue-step": "",
         onKeyDown: (u) => {
-          u.key === "Escape" && (u.stopPropagation(), Z(e.key));
+          u.key === "Escape" && (u.stopPropagation(), _(e.key));
         },
         className: "rst:flex rst:flex-col rst:gap-3 rst:rounded-lg rst:border rst:border-[var(--roster-card-border)] rst:p-4 rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring",
         children: [
-          /* @__PURE__ */ c("p", { id: o, className: "rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)]", children: l }),
-          i?.edit.description && /* @__PURE__ */ c("p", { className: "rst:text-sm rst:text-gray-600 rst:dark:text-gray-300", children: i.edit.description }),
+          /* @__PURE__ */ i("p", { id: o, className: "rst:text-sm rst:font-medium rst:text-[var(--roster-control-text)]", children: l }),
+          a?.edit.description && /* @__PURE__ */ i("p", { className: "rst:text-sm rst:text-gray-600 rst:dark:text-gray-300", children: a.edit.description }),
           d,
           /* @__PURE__ */ q("div", { className: "rst:flex rst:flex-wrap rst:gap-2", children: [
             r,
@@ -286,37 +309,37 @@ function ht({
         ]
       }
     );
-  }, Ke = (e, t) => {
-    const r = G[t];
-    return /* @__PURE__ */ c("div", { role: "group", "aria-label": p.decide(b(e)), className: "rst:flex rst:flex-wrap rst:gap-2", children: Ie.filter((s) => !s.hidden?.(e)).map((s) => /* @__PURE__ */ c(
-      oe,
+  }, He = (e, t) => {
+    const r = W[t];
+    return /* @__PURE__ */ i("div", { role: "group", "aria-label": p.decide(S(e)), className: "rst:flex rst:flex-wrap rst:gap-2", children: Re.filter((s) => !s.hidden?.(e)).map((s) => /* @__PURE__ */ i(
+      se,
       {
-        ...ye[s.tone ?? "neutral"],
+        ...Se[s.tone ?? "neutral"],
         "data-queue-action": s.id,
         busy: r === s.id,
         loadingLabel: p.busy,
         blocked: !!r && r !== s.id,
-        onClick: () => Me(e, s),
+        onClick: () => Ae(e, s),
         children: s.label
       },
       s.id
     )) });
-  }, k = Object.values(de).find((e) => e.surface) ?? null, D = k ? R(k.action) : null, ve = D?.edit.surface, H = k ? be(k, -1) : null;
+  }, k = Object.values(fe).find((e) => e.surface) ?? null, H = k ? B(k.action) : null, xe = H?.edit.surface, Q = k ? ye(k, -1) : null;
   return /* @__PURE__ */ q(
     "section",
     {
-      ref: N,
-      "aria-labelledby": _,
-      onBlur: Oe,
-      className: K("rst:font-ui rst:flex rst:flex-col rst:gap-4", Ce),
+      ref: w,
+      "aria-labelledby": ee,
+      onBlur: je,
+      className: j("rst:font-ui rst:flex rst:flex-col rst:gap-4", Ie),
       children: [
-        /* @__PURE__ */ c(
-          ze,
+        /* @__PURE__ */ i(
+          Ke,
           {
-            id: _,
-            className: K(
+            id: ee,
+            className: j(
               "rst:text-lg rst:font-semibold rst:text-[var(--roster-control-text)]",
-              a && "rst:sr-only"
+              c && "rst:sr-only"
             ),
             children: n
           }
@@ -329,22 +352,22 @@ function ht({
             "aria-atomic": "true",
             className: "rst:sr-only",
             "data-queue-live": "",
-            "data-queue-live-n": W.n,
+            "data-queue-live-n": J.n,
             children: [
-              W.text,
-              W.n % 2 ? " " : ""
+              J.text,
+              J.n % 2 ? " " : ""
             ]
           }
         ),
-        se === "loading" ? /* @__PURE__ */ c("div", { className: "rst:flex rst:justify-center rst:py-12", "aria-busy": "true", children: /* @__PURE__ */ c(Je, { size: "lg", label: p.loading(n) }) }) : se === "error" ? /* @__PURE__ */ c(ne, { colorScheme: "error", children: /* @__PURE__ */ q("div", { className: "rst:flex rst:flex-col rst:items-start rst:gap-3", children: [
-          /* @__PURE__ */ c("div", { children: $e ?? p.loadFailed }),
-          ce && /* @__PURE__ */ c(ke, { size: "lg", variant: "outline", colorScheme: "neutral", onClick: ce, children: p.retry })
-        ] }) }) : x.length === 0 ? /* @__PURE__ */ c(
+        ie === "loading" ? /* @__PURE__ */ i("div", { className: "rst:flex rst:justify-center rst:py-12", "aria-busy": "true", children: /* @__PURE__ */ i(Je, { size: "lg", label: p.loading(n) }) }) : ie === "error" ? /* @__PURE__ */ i(oe, { colorScheme: "error", children: /* @__PURE__ */ q("div", { className: "rst:flex rst:flex-col rst:items-start rst:gap-3", children: [
+          /* @__PURE__ */ i("div", { children: Ne ?? p.loadFailed }),
+          ce && /* @__PURE__ */ i($e, { size: "lg", variant: "outline", colorScheme: "neutral", onClick: ce, children: p.retry })
+        ] }) }) : y.length === 0 ? /* @__PURE__ */ i(
           Ve,
           {
-            title: ie.title,
-            description: ie.description,
-            headingLevel: he,
+            title: ae.title,
+            description: ae.description,
+            headingLevel: ve,
             tabIndex: -1,
             "data-queue-empty": "",
             className: "rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring"
@@ -352,30 +375,30 @@ function ht({
         ) : (
           /* `role="list"` is restated because Safari drops a list's role once
              its markers are styled away. */
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ i(
             "ul",
             {
               role: "list",
-              "aria-labelledby": _,
+              "aria-labelledby": ee,
               className: "rst:m-0 rst:flex rst:list-none rst:flex-col rst:gap-3 rst:p-0",
-              children: x.map((e, t) => {
-                const r = w[t], s = `${E}-item-${t}`, d = B?.(e), o = de[r];
-                return /* @__PURE__ */ c("li", { children: /* @__PURE__ */ c(
+              children: y.map((e, t) => {
+                const r = C[t], s = `${E}-item-${t}`, d = $?.(e), o = fe[r];
+                return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
                   "article",
                   {
                     "data-queue-item": r,
                     tabIndex: -1,
                     "aria-labelledby": s,
-                    onFocus: Le(r),
+                    onFocus: Oe(r),
                     className: "rst:rounded-xl rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",
-                    children: /* @__PURE__ */ c(We, { padding: ae === "compact" ? "sm" : "md", children: /* @__PURE__ */ q("div", { className: K("rst:flex rst:flex-col", ae === "compact" ? "rst:gap-3" : "rst:gap-4"), children: [
+                    children: /* @__PURE__ */ i(We, { padding: le === "compact" ? "sm" : "md", children: /* @__PURE__ */ q("div", { className: j("rst:flex rst:flex-col", le === "compact" ? "rst:gap-3" : "rst:gap-4"), children: [
                       /* @__PURE__ */ q("div", { className: "rst:flex rst:flex-wrap rst:items-baseline rst:gap-x-3 rst:gap-y-1", children: [
-                        /* @__PURE__ */ c(De, { id: s, className: "rst:text-base rst:font-semibold", children: b(e) }),
-                        d && /* @__PURE__ */ c("div", { className: "rst:flex rst:flex-wrap rst:items-center rst:gap-2 rst:text-sm rst:text-gray-600 rst:dark:text-gray-300", children: d })
+                        /* @__PURE__ */ i(ze, { id: s, className: "rst:text-base rst:font-semibold", children: S(e) }),
+                        d && /* @__PURE__ */ i("div", { className: "rst:flex rst:flex-wrap rst:items-center rst:gap-2 rst:text-sm rst:text-gray-600 rst:dark:text-gray-300", children: d })
                       ] }),
-                      /* @__PURE__ */ c("div", { className: "rst:min-w-0", children: qe(e) }),
-                      ue[r] && /* @__PURE__ */ c(ne, { colorScheme: "error", role: "group", "aria-live": "off", children: ue[r] }),
-                      o && !o.surface ? He(o, t) : Ke(e, r)
+                      /* @__PURE__ */ i("div", { className: "rst:min-w-0", children: M(e) }),
+                      de[r] && /* @__PURE__ */ i(oe, { colorScheme: "error", role: "group", "aria-live": "off", children: de[r] }),
+                      o && !o.surface ? De(o, t) : He(e, r)
                     ] }) })
                   }
                 ) }, r);
@@ -383,71 +406,71 @@ function ht({
             }
           )
         ),
-        Ne,
-        ve && k && D && H && /* @__PURE__ */ c(
-          ve,
+        we,
+        xe && k && H && Q && /* @__PURE__ */ i(
+          xe,
           {
             open: k.open,
-            title: D.edit.title,
-            description: D.edit.description,
-            busy: !!G[k.key],
-            onCancel: () => Z(k.key),
+            title: H.edit.title,
+            description: H.edit.description,
+            busy: !!W[k.key],
+            onCancel: () => _(k.key),
             onAfterClose: () => Pe(k.key),
-            submitButton: H.submitButton,
-            cancelButton: H.cancelButton,
+            submitButton: Q.submitButton,
+            cancelButton: Q.cancelButton,
             closeLabel: p.close,
-            children: /* @__PURE__ */ c("div", { className: "rst:flex rst:flex-col rst:gap-4", children: H.fields })
+            children: /* @__PURE__ */ i("div", { className: "rst:flex rst:flex-col rst:gap-4", children: Q.fields })
           }
         )
       ]
     }
   );
 }
-function xe(n, a, f) {
-  const y = R(n.action);
-  if (y) return y.edit.validate?.(n.draft, a);
+function ke(n, c, f) {
+  const v = B(n.action);
+  if (v) return v.edit.validate?.(n.draft, c);
   if (n.action.reason) {
     if (n.action.reason.required && n.action.reason.options?.length && !n.reason.value) return f.pickReason;
     if (n.action.reason.note === "required" && !n.reason.note?.trim()) return f.addNote;
   }
 }
-function rt(n) {
-  const a = n.note?.trim();
-  return { ...n.value ? { value: n.value } : {}, ...a ? { note: a } : {} };
+function nt(n) {
+  const c = n.note?.trim();
+  return { ...n.value ? { value: n.value } : {}, ...c ? { note: c } : {} };
 }
-function nt({
+function ot({
   id: n,
-  step: a,
+  step: c,
   value: f,
-  disabled: y,
-  onChange: x,
-  labels: S
+  disabled: v,
+  onChange: y,
+  labels: x
 }) {
-  const b = a.note ?? "optional";
-  return /* @__PURE__ */ q(Se, { children: [
-    a.options && a.options.length > 0 && /* @__PURE__ */ c(
+  const S = c.note ?? "optional";
+  return /* @__PURE__ */ q(qe, { children: [
+    c.options && c.options.length > 0 && /* @__PURE__ */ i(
       Xe,
       {
-        label: a.required ? S.reason : S.reasonOptional,
-        options: a.options,
+        label: c.required ? x.reason : x.reasonOptional,
+        options: c.options,
         value: f.value ?? "",
-        onChange: (B) => x({ ...f, value: B }),
-        disabled: y
+        onChange: ($) => y({ ...f, value: $ }),
+        disabled: v
       }
     ),
-    b !== "none" && /* @__PURE__ */ c(
+    S !== "none" && /* @__PURE__ */ i(
       Ue,
       {
         id: `${n}-note`,
-        label: a.noteLabel ?? (b === "required" ? S.note : S.noteOptional),
+        label: c.noteLabel ?? (S === "required" ? x.note : x.noteOptional),
         rows: 3,
         value: f.note ?? "",
-        onChange: (B) => x({ ...f, note: B.target.value }),
-        disabled: y
+        onChange: ($) => y({ ...f, note: $.target.value }),
+        disabled: v
       }
     )
   ] });
 }
 export {
-  ht as ModerationQueue
+  vt as ModerationQueue
 };