@blakesteve/roster 5.7.0 → 5.8.0

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

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