@blakesteve/roster 5.3.0 → 5.4.0

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

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

package/dist/components/organisms/ModerationQueue/QueueEditDialog.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../Dialog/Dialog.cjs");function d({open:s,title:i,description:t,busy:r,onCancel:l,onAfterClose:n,children:o,submitButton:u,cancelButton:a}){return e.jsx(c.Dialog,{isOpen:s,onClose:r?()=>{}:l,title:i,description:t,size:"lg",onAfterClose:n,children:e.jsxs("div",{className:"rst:flex rst:flex-col rst:gap-6",children:[o,e.jsxs("div",{className:"rst:flex rst:flex-wrap rst:justify-end rst:gap-2",children:[a,u]})]})})}exports.QueueEditDialog=d;

package/dist/components/organisms/ModerationQueue/QueueEditDialog.d.ts

@@ -0,0 +1,8 @@
+import { QueueSurfaceProps } from './queue-actions';
+/**
+ * Shows a queue's edit step in a Dialog, for a form with more than a field or
+ * two. Pass it as the edit's `surface`. A separate export, so a queue that
+ * never edits in a Dialog never ships one.
+ */
+declare function QueueEditDialog({ open, title, description, busy, onCancel, onAfterClose, children, submitButton, cancelButton, }: QueueSurfaceProps): import("react/jsx-runtime").JSX.Element;
+export { QueueEditDialog };

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

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as f, jsxs as e } from "react/jsx-runtime";
+import { Dialog as d } from "../Dialog/Dialog.js";
+function m({
+  open: s,
+  title: r,
+  description: i,
+  busy: l,
+  onCancel: t,
+  onAfterClose: o,
+  children: n,
+  submitButton: a,
+  cancelButton: c
+}) {
+  return /* @__PURE__ */ f(
+    d,
+    {
+      isOpen: s,
+      onClose: l ? () => {
+      } : t,
+      title: r,
+      description: i,
+      size: "lg",
+      onAfterClose: o,
+      children: /* @__PURE__ */ e("div", { className: "rst:flex rst:flex-col rst:gap-6", children: [
+        n,
+        /* @__PURE__ */ e("div", { className: "rst:flex rst:flex-wrap rst:justify-end rst:gap-2", children: [
+          c,
+          a
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  m as QueueEditDialog
+};

package/dist/components/organisms/ModerationQueue/QueueEditSheet.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),S=require("../Sheet/Sheet.cjs");function l({open:e,title:t,description:u,busy:i,onCancel:n,onAfterClose:o,children:r,submitButton:s}){return c.jsx(S.Sheet,{isOpen:e,onClose:i?()=>{}:n,title:t,description:u,actions:s,onAfterClose:o,children:r})}exports.QueueEditSheet=l;

package/dist/components/organisms/ModerationQueue/QueueEditSheet.d.ts

@@ -0,0 +1,12 @@
+import { QueueSurfaceProps } from './queue-actions';
+/**
+ * Shows a queue's edit step in a Sheet, for a long form that wants the room
+ * on a phone. Pass it as the edit's `surface`. A separate export, so a queue
+ * that never edits in a Sheet never ships one.
+ *
+ * The submit button goes in the Sheet's header, where its actions sit, and
+ * Cancel is the Sheet's own close button, so there's one way out rather than
+ * two side by side.
+ */
+declare function QueueEditSheet({ open, title, description, busy, onCancel, onAfterClose, children, submitButton, }: QueueSurfaceProps): import("react/jsx-runtime").JSX.Element;
+export { QueueEditSheet };

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

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import { Sheet as p } from "../Sheet/Sheet.js";
+function h({
+  open: e,
+  title: t,
+  description: o,
+  busy: i,
+  onCancel: n,
+  onAfterClose: r,
+  children: s,
+  submitButton: u
+}) {
+  return /* @__PURE__ */ m(
+    p,
+    {
+      isOpen: e,
+      onClose: i ? () => {
+      } : n,
+      title: t,
+      description: o,
+      actions: u,
+      onAfterClose: r,
+      children: s
+    }
+  );
+}
+export {
+  h as QueueEditSheet
+};

package/dist/components/organisms/ModerationQueue/queue-actions.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function e(t){return t}exports.editAction=e;

package/dist/components/organisms/ModerationQueue/queue-actions.d.ts

@@ -0,0 +1,157 @@
+import { ComponentType, ReactNode } from 'react';
+/**
+ * What an action's `run` may resolve with. Nothing, for the usual case; or a
+ * sentence that replaces the default announcement, for an outcome that isn't
+ * the decision itself, such as another reviewer having decided first.
+ */
+export type QueueRunResult = void | {
+    announce: string;
+};
+export type QueueTone = "primary" | "success" | "danger" | "neutral";
+export type QueueHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+interface QueueActionBase<T> {
+    /** Unique among the queue's actions. */
+    id: string;
+    /** The button's words, and the submit button's in its step: "Approve". */
+    label: string;
+    /** What the live region says when it lands: "Approved". Defaults to `label`. */
+    done?: string;
+    tone?: QueueTone;
+    /** Leave the action off this item, for instance no Edit on a kind that can't be edited. */
+    hidden?: (item: T) => boolean;
+}
+export interface QueueReason {
+    /** The chosen option's `value`, when the step offers options. */
+    value?: string;
+    /** The note, when the step takes one. Trimmed; absent when empty. */
+    note?: string;
+}
+export interface QueueReasonStep {
+    /** The question the step asks, and its accessible name. */
+    prompt: string;
+    /** A short list, shown as radios. */
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    /** An option must be picked before submitting. */
+    required?: boolean;
+    /** Whether a free-text note is offered, and whether it's required. */
+    note?: "none" | "optional" | "required";
+    /** The note field's label. */
+    noteLabel?: string;
+}
+/**
+ * Every action that isn't an edit: one click, or a step that asks first.
+ *
+ *   - Neither `confirm` nor `reason`: the button runs the action.
+ *   - `confirm`: asks in place, "Remove this post?", with the action and
+ *     Cancel.
+ *   - `reason`: asks why in place (options, a note, or both), and hands the
+ *     answer to `run`. Takes precedence over `confirm`; its submit button is
+ *     the confirmation.
+ *
+ * One type rather than three, so an action written as an object literal gets
+ * its parameters typed: TypeScript can't tell three shapes apart by whether
+ * an object property is present, and would leave `run` untyped.
+ */
+export interface QueuePlainAction<T> extends QueueActionBase<T> {
+    confirm?: {
+        prompt: string;
+    };
+    reason?: QueueReasonStep;
+    edit?: undefined;
+    /** `reason` is set when the action has a reason step. */
+    run: (item: T, input: {
+        reason?: QueueReason;
+    }) => Promise<QueueRunResult>;
+}
+/** What an edit step's form is handed. Controlled: the draft lives in the queue. */
+export interface QueueFormProps<T, D> {
+    item: T;
+    value: D;
+    onChange: (next: D) => void;
+}
+/**
+ * What a surface (a Dialog, a Sheet) is handed to show an edit step. The queue
+ * renders the form, its validation message and both buttons; a surface only
+ * places them.
+ */
+export interface QueueSurfaceProps {
+    open: boolean;
+    title: string;
+    description?: string;
+    /** A decision is in flight: the surface shouldn't close on its own. */
+    busy: boolean;
+    /** Escape, the close button, the backdrop. */
+    onCancel: () => void;
+    /** Once the surface has finished closing. */
+    onAfterClose: () => void;
+    /** The app's form, the validation message and any error. */
+    children: ReactNode;
+    submitButton: ReactNode;
+    cancelButton: ReactNode;
+}
+export type QueueSurface = ComponentType<QueueSurfaceProps>;
+export interface QueueEdit<T, D> {
+    title: string;
+    description?: string;
+    /** "Approve with edits", "Publish". */
+    submitLabel: string;
+    /** Inline, in the item, by default. Or `QueueEditDialog`, `QueueEditSheet`. */
+    surface?: QueueSurface;
+    /** The draft the form starts from, made each time the step opens. */
+    initial: (item: T) => D;
+    Form: ComponentType<QueueFormProps<T, D>>;
+    /** A message means the draft can't be submitted yet, and says why. */
+    validate?: (value: D, item: T) => string | undefined;
+}
+export interface QueueEditAction<T, D> extends QueueActionBase<T> {
+    edit: QueueEdit<T, D>;
+    confirm?: undefined;
+    reason?: undefined;
+    run: (item: T, input: {
+        draft: D;
+    }) => Promise<QueueRunResult>;
+}
+declare const typedEdit: unique symbol;
+/**
+ * An edit action whose draft type was checked: made by `editAction` (or the
+ * `edit` an `actions` function is handed), and the only edit action `actions`
+ * accepts.
+ *
+ * Opaque on purpose. It names what a queue shows, the step's title and
+ * buttons, and hides what touches the draft: inside a list of mixed actions a
+ * draft could only be typed `any`, so `initial`, `Form`, `validate` and `run`
+ * are reachable only where `editAction` checked them against one another. A
+ * literal `{ edit: … }`, or a spread of a checked action with a new
+ * `initial`, doesn't compile.
+ */
+export interface QueueCheckedEditAction<T> extends QueueActionBase<T> {
+    readonly edit: Pick<QueueEdit<T, never>, "title" | "description" | "submitLabel" | "surface">;
+    readonly [typedEdit]: true;
+    confirm?: undefined;
+    reason?: undefined;
+}
+export type QueueAction<T> = QueuePlainAction<T> | QueueCheckedEditAction<T>;
+/**
+ * What a function passed as `actions` is handed: the same `editAction`, bound
+ * to the queue's item type. Inside JSX that's the form to use, because the
+ * queue's item type isn't known yet when a free-standing `editAction(…)` in
+ * an array is checked, and its parameters would come out `unknown`.
+ */
+export interface QueueActionKit<T> {
+    edit: <D>(action: QueueEditAction<T, D>) => QueueCheckedEditAction<T>;
+}
+/**
+ * Makes an edit action, with its draft type checked end to end: `initial`
+ * says what a draft is, and the form, `validate` and `run` all get that type.
+ *
+ *   editAction({ edit: { initial: (s) => ({ body: s.body }), … },
+ *                run: (s, { draft }) => save(s.id, draft.body) })
+ *
+ * The other kinds of action are plain objects; this one goes through a
+ * function because TypeScript can only infer the draft's type from a call.
+ */
+export declare function editAction<T, D>(action: QueueEditAction<T, D>): QueueCheckedEditAction<T>;
+export {};