@blakesteve/roster 5.3.0 → 5.5.0

package/dist/components/organisms/Dialog/Dialog.js

@@ -1,14 +1,14 @@
 "use client";
-import { jsxs as t, Fragment as h, jsx as r } from "react/jsx-runtime";
-import { useState as k, useLayoutEffect as c, useRef as w, Fragment as d } from "react";
-import { FontAwesomeIcon as N } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
-import { faXmark as _ } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
+import { jsxs as t, Fragment as k, jsx as r } from "react/jsx-runtime";
+import { useState as w, useLayoutEffect as c, useRef as N, Fragment as d } from "react";
+import { FontAwesomeIcon as _ } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
+import { faXmark as F } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
 import { cva as a } from "../../../node_modules/class-variance-authority/dist/index.js";
 import { cn as s } from "../../../lib/utils.js";
-import { lockPage as F } from "../../../internal/page-inert.js";
-import { Dialog as T, DialogBackdrop as j, DialogPanel as z, DialogTitle as D } from "../../../node_modules/@headlessui/react/dist/components/dialog/dialog.js";
+import { lockPage as T } from "../../../internal/page-inert.js";
+import { Dialog as j, DialogBackdrop as z, DialogPanel as D, DialogTitle as V } from "../../../node_modules/@headlessui/react/dist/components/dialog/dialog.js";
 import { TransitionChild as m } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
-const V = /* @__PURE__ */ a(
+const L = /* @__PURE__ */ a(
   "rst:relative rst:w-full rst:transform rst:overflow-hidden rst:rounded-2xl rst:p-6 rst:text-left rst:align-middle rst:elevation-overlay rst:transition-all rst:border",
   {
     variants: {
@@ -77,9 +77,9 @@ const V = /* @__PURE__ */ a(
       status: "default"
     }
   }
-), C = /* @__PURE__ */ a("rst:text-xl rst:font-bold rst:leading-6 rst:text-inherit"), L = /* @__PURE__ */ a("rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75"), P = /* @__PURE__ */ a(
+), C = /* @__PURE__ */ a("rst:text-xl rst:font-bold rst:leading-6 rst:text-inherit"), P = /* @__PURE__ */ a("rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75"), R = /* @__PURE__ */ a(
   "rst:inline-flex rst:size-11 rst:shrink-0 rst:items-center rst:justify-center rst:-m-3 rst:cursor-pointer rst:rounded-md rst:bg-transparent rst:text-inherit rst:opacity-50 rst:hover:opacity-100 rst:focus:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background rst:transition-opacity"
-), X = ({
+), $ = ({
   isOpen: f,
   onClose: o,
   title: p,
@@ -88,20 +88,21 @@ const V = /* @__PURE__ */ a(
   variant: n,
   status: g,
   children: v,
-  className: u
+  className: u,
+  onAfterClose: x
 }) => {
-  const [x, y] = k(!1);
+  const [y, h] = w(!1);
   c(() => {
-    y(!0);
+    h(!0);
   }, []);
-  const e = f && x, l = w(null);
+  const e = f && y, l = N(null);
   return c(() => {
     if (e)
-      return F(l.current);
-  }, [e]), /* @__PURE__ */ t(h, { children: [
+      return T(l.current);
+  }, [e]), /* @__PURE__ */ t(k, { children: [
     e && /* @__PURE__ */ r("span", { ref: l, hidden: !0 }),
     /* @__PURE__ */ t(
-      T,
+      j,
       {
         open: e,
         as: "div",
@@ -119,7 +120,7 @@ const V = /* @__PURE__ */ a(
               leaveFrom: "rst:opacity-100",
               leaveTo: "rst:opacity-0",
               children: /* @__PURE__ */ r(
-                j,
+                z,
                 {
                   className: s(
                     "rst:fixed rst:inset-0 rst:transition-opacity",
@@ -139,27 +140,28 @@ const V = /* @__PURE__ */ a(
               leave: "rst:ease-in rst:duration-200",
               leaveFrom: "rst:opacity-100 rst:scale-100",
               leaveTo: "rst:opacity-0 rst:scale-95",
+              afterLeave: x,
               children: /* @__PURE__ */ t(
-                z,
+                D,
                 {
                   className: s(
-                    V({ size: b, variant: n, status: g }),
+                    L({ size: b, variant: n, status: g }),
                     u
                   ),
                   children: [
                     /* @__PURE__ */ t("div", { className: "rst:flex rst:items-start rst:justify-between", children: [
                       /* @__PURE__ */ t("div", { children: [
-                        /* @__PURE__ */ r(D, { as: "h2", className: s(C()), children: p }),
-                        i && /* @__PURE__ */ r("p", { className: s(L()), children: i })
+                        /* @__PURE__ */ r(V, { as: "h2", className: s(C()), children: p }),
+                        i && /* @__PURE__ */ r("p", { className: s(P()), children: i })
                       ] }),
                       /* @__PURE__ */ r("div", { className: "rst:ml-4 rst:flex rst:shrink-0", children: /* @__PURE__ */ r(
                         "button",
                         {
                           type: "button",
                           onClick: o,
-                          className: s(P()),
+                          className: s(R()),
                           "aria-label": "Close dialog",
-                          children: /* @__PURE__ */ r(N, { icon: _, className: "rst:h-5 rst:w-5" })
+                          children: /* @__PURE__ */ r(_, { icon: F, className: "rst:h-5 rst:w-5" })
                         }
                       ) })
                     ] }),
@@ -175,5 +177,5 @@ const V = /* @__PURE__ */ a(
   ] });
 };
 export {
-  X as Dialog
+  $ as Dialog
 };

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

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

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

@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+import { QueueAction, QueueActionKit, QueueCheckedEditAction, QueueHeadingLevel } from './queue-actions';
+export interface ModerationQueueProps<T> {
+    /** The queue's heading, and the list's accessible name. */
+    label: string;
+    /** Keep the heading for assistive technology only, when the page already titles the queue. */
+    hideLabel?: boolean;
+    /** The queue heading's level. `2` by default. */
+    headingLevel?: QueueHeadingLevel;
+    /** Each item's heading level. One below `headingLevel` by default. */
+    itemHeadingLevel?: QueueHeadingLevel;
+    /** What's waiting. Remove an item once its decision lands; the queue notices. */
+    items: readonly T[];
+    getKey: (item: T) => string;
+    /** The item's heading, and what announcements call it: "Recipe from Dana". */
+    itemLabel: (item: T) => string;
+    /** Beside the heading: badges, a time, who sent it. */
+    renderMeta?: (item: T) => ReactNode;
+    /** The item's body: its text, its previews, links out. */
+    renderContent: (item: T) => ReactNode;
+    /**
+     * What a reviewer can decide. A list, or a function returning one: the
+     * function form is handed `edit`, which types an edit action's draft, and
+     * is the one to use inline in JSX.
+     *
+     *   actions={(a) => [
+     *     { id: "approve", label: "Approve", run: (r) => approve(r.id) },
+     *     a.edit({ id: "edit", label: "Edit", edit: { initial: (r) => ({ … }), … },
+     *              run: (r, { draft }) => save(r.id, draft) }),
+     *   ]}
+     */
+    actions: readonly QueueAction<T>[] | ((kit: QueueActionKit<T>) => readonly QueueAction<T>[]);
+    /** `"loading"` before the first answer, `"error"` when the queue itself can't load. */
+    status?: "ready" | "loading" | "error";
+    /** The whole-queue error, shown with a Retry when `onRetry` is passed. */
+    error?: ReactNode;
+    onRetry?: () => void;
+    empty?: {
+        title: string;
+        description?: string;
+    };
+    density?: "comfortable" | "compact";
+    /** After the list: "Load more", if the app pages. */
+    footer?: ReactNode;
+    className?: string;
+}
+/**
+ * A queue of things waiting for a decision: submissions to approve, reports to
+ * resolve, claims to check before they publish.
+ *
+ * The app owns the data and every request; this owns the layout, the states,
+ * the steps and the keyboard. It never fetches. An action's `run` is the only
+ * path from a decision to the network, and the app says whether the item has
+ * left by removing it from `items`.
+ *
+ * What it promises, each pinned in ModerationQueue.checks.stories.tsx:
+ *   - Only the clicked action is busy, and it keeps focus while it is. That
+ *     item's other actions wait; every other item stays live.
+ *   - A decision that lands and removes the item is announced with how many
+ *     are left, and focus moves to the next item, the previous one, or the
+ *     empty state. Never to the page.
+ *   - A decision that fails leaves the item where it was, says why, and leaves
+ *     focus on the button that tried. A step stays open with its draft.
+ *   - Confirm, reason and edit steps open in place (an edit may open in a
+ *     Dialog or Sheet instead), take focus, and give it back on Escape.
+ *   - An item that disappears for any other reason, with its step open,
+ *     closes the step without deciding and is announced once as decided
+ *     elsewhere. Focus moves only if it was inside the item.
+ *   - Several outcomes in one render are said in one sentence.
+ */
+declare function ModerationQueue<T>({ label, hideLabel, headingLevel, itemHeadingLevel, items, getKey, itemLabel, renderMeta, renderContent, actions: actionsProp, status, error, onRetry, empty, density, footer, className, }: ModerationQueueProps<T>): import("react/jsx-runtime").JSX.Element;
+export type { QueueCheckedEditAction };
+export { ModerationQueue };

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

@@ -0,0 +1,428 @@
+"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 = {
+  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;
+}
+function re({
+  busy: o = !1,
+  blocked: u = !1,
+  onClick: m,
+  children: q,
+  className: b,
+  ...S
+}) {
+  return /* @__PURE__ */ c(
+    ye,
+    {
+      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();
+          return;
+        }
+        m?.(g);
+      },
+      children: q
+    }
+  );
+}
+function ft({
+  label: o,
+  hideLabel: u = !1,
+  headingLevel: m = 2,
+  itemHeadingLevel: q,
+  items: b,
+  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
+}) {
+  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 }));
+    }, 0));
+  }, []);
+  ee(
+    () => () => {
+      R.current && clearTimeout(R.current);
+    },
+    []
+  );
+  const [Re, Te] = C(0), W = p(null), k = _((e) => {
+    W.current = e, Te((t) => t + 1);
+  }, []), de = _((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]`);
+    }
+  }, []);
+  ee(() => {
+    const e = W.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);
+  }, A = (e) => {
+    if (J.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) => {
+    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" };
+  };
+  ee(() => {
+    const e = fe.current;
+    fe.current = N;
+    const t = new Set(N), r = U.current;
+    U.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" });
+      else {
+        const F = A(n);
+        f && v(n, null), l && F && k(l);
+      }
+    }
+    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);
+        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);
+        else {
+          const f = A(n);
+          v(n, null), f && k(i);
+        }
+      else !l && A(n) && k(i);
+    }
+    s.length && ue(`${s.join(" ")}${d ? ` ${Xe(N.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));
+    try {
+      const a = await i(d, s);
+      U.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 }));
+    } finally {
+      ie((a) => E(a, e));
+    }
+  }, Me = (e, t) => {
+    const r = S(e), s = I(t);
+    if (!t.confirm && !t.reason && !s) {
+      O(r, e, t, {});
+      return;
+    }
+    M((d) => E(d, r)), v(r, {
+      key: r,
+      label: g(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) => {
+    const t = h.current[e];
+    if (!t || w.current[e]) return;
+    const r = { kind: "trigger", key: e, actionId: t.action.id };
+    t.surface ? L(t, r) : (v(e, null), k(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,
+      {
+        ...ve[r.tone ?? "neutral"],
+        busy: n,
+        blocked: !!i,
+        "aria-describedby": i ? a : 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: [
+      r.reason && /* @__PURE__ */ c(
+        et,
+        {
+          id: `${B}-step-${t}`,
+          step: r.reason,
+          value: e.reason,
+          disabled: n,
+          onChange: (Z) => v(e.key, { ...h.current[e.key], reason: Z })
+        }
+      ),
+      s && /* @__PURE__ */ c(
+        s.edit.Form,
+        {
+          item: d,
+          value: e.draft,
+          onChange: (Z) => v(e.key, { ...h.current[e.key], draft: Z })
+        }
+      ),
+      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 })
+    ] });
+    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(
+      "div",
+      {
+        role: "group",
+        "aria-labelledby": n,
+        tabIndex: -1,
+        "data-queue-step": "",
+        onKeyDown: (l) => {
+          l.key === "Escape" && (l.stopPropagation(), X(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 }),
+          d,
+          /* @__PURE__ */ y("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,
+      {
+        ...ve[s.tone ?? "neutral"],
+        "data-queue-action": s.id,
+        busy: r === s.id,
+        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(
+    "section",
+    {
+      ref: $,
+      "aria-labelledby": Y,
+      onBlur: Ee,
+      className: D("rst:font-ui rst:flex rst:flex-col rst:gap-4", Ne),
+      children: [
+        /* @__PURE__ */ c(
+          Oe,
+          {
+            id: Y,
+            className: D(
+              "rst:text-lg rst:font-semibold rst:text-[var(--roster-control-text)]",
+              u && "rst:sr-only"
+            ),
+            children: o
+          }
+        ),
+        /* @__PURE__ */ y(
+          "div",
+          {
+            role: "status",
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            className: "rst:sr-only",
+            "data-queue-live": "",
+            "data-queue-live-n": Q.n,
+            children: [
+              Q.text,
+              Q.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,
+          {
+            title: oe.title,
+            description: oe.description,
+            headingLevel: pe,
+            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": Y,
+              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];
+                return /* @__PURE__ */ c("li", { children: /* @__PURE__ */ c(
+                  "article",
+                  {
+                    "data-queue-item": r,
+                    tabIndex: -1,
+                    "aria-labelledby": s,
+                    onFocus: Fe(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) }),
+                        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)
+                    ] }) })
+                  }
+                ) }, r);
+              })
+            }
+          )
+        ),
+        $e,
+        he && x && P && z && /* @__PURE__ */ c(
+          he,
+          {
+            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 })
+          }
+        )
+      ]
+    }
+  );
+}
+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 _e(o) {
+  const u = o.note?.trim();
+  return { ...o.value ? { value: o.value } : {}, ...u ? { note: u } : {} };
+}
+function et({
+  id: o,
+  step: u,
+  value: m,
+  disabled: q,
+  onChange: b
+}) {
+  const S = u.note ?? "optional";
+  return /* @__PURE__ */ y(xe, { children: [
+    u.options && u.options.length > 0 && /* @__PURE__ */ c(
+      Je,
+      {
+        label: u.required ? "Reason" : "Reason (optional)",
+        options: u.options,
+        value: m.value ?? "",
+        onChange: (g) => b({ ...m, value: g }),
+        disabled: q
+      }
+    ),
+    S !== "none" && /* @__PURE__ */ c(
+      Ge,
+      {
+        id: `${o}-note`,
+        label: u.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 };