@ai-matrx/design-system 0.86.348 → 0.86.350

package/dist/settings.js

@@ -13,10 +13,10 @@ import {
   CommandInput,
   CommandItem,
   CommandList
-} from "./chunk-MIJMP4WI.js";
+} from "./chunk-YRF22M5S.js";
 import {
   Tile
-} from "./chunk-6CDAHINE.js";
+} from "./chunk-UTADJKVR.js";
 import {
   Drawer,
   DrawerContent,
@@ -47,7 +47,7 @@ import {
   SearchField,
   Switch,
   Tabs
-} from "./chunk-XTP6HOB6.js";
+} from "./chunk-6XNYYROM.js";
 import "./chunk-BD77DHUO.js";
 import "./chunk-BKCJUFD3.js";
 import "./chunk-PIQJULQB.js";

package/dist/swipe-deck.cjs

@@ -251,6 +251,15 @@ function CopyIcon(props) {
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
   ] });
 }
+function ListChecksIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...lucideProps("list-checks", props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m3 17 2 2 4-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m3 7 2 2 4-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M13 6h8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M13 12h8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M13 18h8" })
+  ] });
+}
 
 // src/swipe-deck/chrome.tsx
 var React2 = __toESM(require("react"), 1);
@@ -436,7 +445,7 @@ function EdgeButtons({ keyMap, suggested, refs, onAnswer, suggestionLabel, disab
     );
   }) });
 }
-function CornerButton({ corner, label, shortcut, onClick, disabled, children }) {
+function CornerButton({ corner, label, shortcut, onClick, disabled, pressed, children }) {
   return (
     // ui-exception: the deck's four corner targets sit in its own frame geometry
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -449,6 +458,7 @@ function CornerButton({ corner, label, shortcut, onClick, disabled, children })
         title: shortcut ? `${label} (${shortcut})` : label,
         "aria-keyshortcuts": shortcut,
         disabled,
+        "aria-pressed": pressed,
         onClick,
         children
       }
@@ -965,17 +975,17 @@ function useDeckController({ items, binding, initialState, onChange }) {
   const stateRef = React3.useRef(state);
   stateRef.current = state;
   const send = React3.useCallback(
-    (ops, onRefused) => {
+    (ops, onRefused, transient = false) => {
       if (!binding) {
         setLocal((s) => applyOps(s, ops));
         return;
       }
       const id = ++seq.current;
-      setPending((list2) => [...list2, { id, ops, settledAt: null }]);
+      setPending((list2) => [...list2, { id, ops, settledAt: null, ...transient ? { transient } : {} }]);
       binding.apply(ops).then(
         () => {
           setWriteError(null);
-          setPending((list2) => list2.map((p) => p.id === id ? { ...p, settledAt: Date.now() } : p));
+          setPending((list2) => transient ? list2.filter((p) => p.id !== id) : list2.map((p) => p.id === id ? { ...p, settledAt: Date.now() } : p));
         },
         (err) => {
           setPending((list2) => list2.filter((p) => p.id !== id));
@@ -990,7 +1000,7 @@ function useDeckController({ items, binding, initialState, onChange }) {
     (change) => {
       touched.current = true;
       setHistory((h) => [...h, change]);
-      send(change.ops, () => setHistory((h) => h.filter((c) => c !== change)));
+      send(change.ops, () => setHistory((h) => h.filter((c) => c !== change)), change.transient);
       onChangeRef.current?.(applyOps(stateRef.current, change.ops), change, false);
     },
     [send]
@@ -1002,7 +1012,7 @@ function useDeckController({ items, binding, initialState, onChange }) {
     if (!last) return null;
     touched.current = true;
     setHistory((h) => h.slice(0, -1));
-    send(last.inverse, () => setHistory((h) => [...h, last]));
+    send(last.inverse, () => setHistory((h) => [...h, last]), last.transient);
     onChangeRef.current?.(applyOps(stateRef.current, last.inverse), last, true);
     return last;
   }, [send]);
@@ -1193,6 +1203,8 @@ var DEFAULT_SWIPE_DECK_LABELS = {
   allDone: "All done",
   answeredOf: "{answered} of {total} answered",
   yourAnswers: "Your answers",
+  answered: "Answered",
+  backToCards: "Back to cards",
   change: "Change",
   rightAnswer: "Right answer",
   right: "Right",
@@ -1773,9 +1785,13 @@ function SwipeDeck(props) {
   const [bubble, setBubble] = React6.useState(null);
   const [toast, setToast] = React6.useState(null);
   const [said, setSaid] = React6.useState("");
-  const cardItem = step.kind === "card" ? step.item : null;
+  const [reviewing, setReviewing] = React6.useState(false);
+  const reviewingRef = React6.useRef(false);
+  reviewingRef.current = reviewing;
+  const cardItem = step.kind === "card" && !reviewing ? step.item : null;
   const cardKey = cardItem ? keyFor(rules, cardItem) : deckKey;
   const cardMore = React6.useMemo(() => cardItem ? moreFor(rules, cardItem) : [], [cardItem, rules]);
+  const cardMoreShown = React6.useMemo(() => cardMore.filter((a) => !a.hidden), [cardMore]);
   const suggestedDir = cardItem ? directionOf(cardKey, cardItem.suggested) : null;
   const [cardDetail, setCardDetail] = React6.useState(null);
   const detailNow = cardItem ? cardDetail?.id === cardItem.id ? cardDetail.detail : state.details?.[cardItem.id] ?? null : null;
@@ -1818,7 +1834,8 @@ function SwipeDeck(props) {
     await flyOut(layerRef.current, dir ?? "down", speed);
     const now = stateRef.current;
     const rides = answerDetail(cardItem, detail === void 0 ? detailRef.current : detail);
-    const change = answerChange(now, cardItem, answer.id, rules, items, dir, rides);
+    const made = answerChange(now, cardItem, answer.id, rules, items, dir, rides);
+    const change = answer.requeue && props.binding ? { ...made, transient: true } : made;
     enterFrom.current = null;
     setCardDetail(null);
     setLocked(null);
@@ -1963,6 +1980,13 @@ function SwipeDeck(props) {
   const afterTour = React6.useRef(null);
   const runKeyRef = React6.useRef(() => false);
   runKeyRef.current = (key, target) => {
+    if (reviewingRef.current) {
+      if (key === "Escape") {
+        setReviewing(false);
+        return true;
+      }
+      if (key !== "z" && key !== "Z" && key !== "Backspace") return false;
+    }
     const dir = KEYS[key];
     const shortcut = !dir && key.length === 1 ? shortcutRef.current(key) : null;
     if ((dir || shortcut) && lockedRef.current) return false;
@@ -2004,7 +2028,7 @@ function SwipeDeck(props) {
       const a2 = cardKey[d];
       if (a2?.shortcut?.toLowerCase() === k) return { answer: a2, dir: d };
     }
-    const a = cardMore.find((x) => x.shortcut?.toLowerCase() === k);
+    const a = cardMoreShown.find((x) => x.shortcut?.toLowerCase() === k);
     return a ? { answer: a, dir: null } : null;
   };
   const exitRef = React6.useRef({ kind: props.exitKind, onExit: props.onExit });
@@ -2020,6 +2044,11 @@ function SwipeDeck(props) {
       if (layout === "inline" && !(root && (root.contains(active ?? null) || root.matches(":hover")))) return;
       const t = e.target instanceof Element ? e.target : null;
       if (t?.closest("input, textarea, select, [contenteditable='true']")) return;
+      if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey && (e.key === "z" || e.key === "Z") && !e.repeat) {
+        e.preventDefault();
+        undoRef.current();
+        return;
+      }
       if (e.altKey || e.ctrlKey || e.metaKey) return;
       if (e.repeat) {
         if (KEYS[e.key] || e.key === "z" || e.key === "Z" || e.key === "Backspace") e.preventDefault();
@@ -2176,7 +2205,7 @@ function SwipeDeck(props) {
     wasAtEnd.current = atEnd;
   }, [atEnd, result, onComplete, labels]);
   const copy = async () => {
-    const text2 = props.copyText ? props.copyText({ item: cardItem, state, result }) : cardItem ? itemCopyText(cardItem, state, cardKey, labels, conflict, cardMore) : deckCopyText(result, rules);
+    const text2 = props.copyText ? props.copyText({ item: cardItem, state, result }) : cardItem ? itemCopyText(cardItem, state, cardKey, labels, conflict, cardMoreShown) : deckCopyText(result, rules);
     const ok = await (0, import_clipboard.copyText)(text2);
     flash(ok ? labels.copied : labels.copyFailed);
   };
@@ -2230,11 +2259,41 @@ function SwipeDeck(props) {
             },
             children: [
               props.onExpand ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CornerButton, { corner: "tl", label: labels.expand, onClick: props.onExpand, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Maximize2Icon, {}) }) : props.onExit ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CornerButton, { corner: "tl", label: props.exitKind === "collapse" ? labels.collapse : labels.exit, ...props.exitKind === "collapse" ? { shortcut: "Escape" } : {}, onClick: props.onExit, children: props.exitKind === "collapse" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Minimize2Icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(XIcon, {}) }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CornerButton, { corner: "tr", label: labels.help, shortcut: "?", onClick: () => void tour(), disabled: !cardItem, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CircleHelpIcon, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(CornerButton, { corner: "tr", label: labels.answered, onClick: () => setReviewing((v) => !v), disabled: !ready || !items.length || step.kind === "end", pressed: reviewing, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ListChecksIcon, {}),
+                result.answered ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "matrx-sd-corner-count", children: result.answered }) : null
+              ] }),
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CornerButton, { corner: "bl", label: labels.undo, shortcut: "Z", onClick: undo, disabled: !controller.canUndo, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Undo2Icon, {}) }),
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CornerButton, { corner: "br", label: labels.copy, onClick: () => void copy(), disabled: !ready || !items.length, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CopyIcon, {}) }),
               cardItem ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EdgeButtons, { keyMap: cardKey, suggested: suggestedDir, refs: edgeRefs, onAnswer: (d) => act(d), suggestionLabel: labels.suggestion }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "matrx-sd-stage", children: !ready ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "matrx-sd-layer", "data-state": controller.status, children: controller.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorBox, { className: "matrx-sd-message", message: controller.readError ?? "", operation: "Read the deck", origin: "design-system/SwipeDeck" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Loader2Icon, { className: "matrx-spin matrx-sd-spinner" }) }) : items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EmptyView, { title: props.empty?.title ?? labels.emptyTitle, line: props.empty?.line, action: props.empty?.action, layerRef }, "empty") : step.kind === "card" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "matrx-sd-stage", children: !ready ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "matrx-sd-layer", "data-state": controller.status, children: controller.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorBox, { className: "matrx-sd-message", message: controller.readError ?? "", operation: "Read the deck", origin: "design-system/SwipeDeck" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Loader2Icon, { className: "matrx-spin matrx-sd-spinner" }) }) : items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(EmptyView, { title: props.empty?.title ?? labels.emptyTitle, line: props.empty?.line, action: props.empty?.action, layerRef }, "empty") : reviewing && step.kind !== "end" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                EndView,
+                {
+                  result,
+                  rules,
+                  labels,
+                  groupLabels: props.groupLabels,
+                  layerRef,
+                  enterFrom,
+                  review: {
+                    onBack: () => setReviewing(false),
+                    onHelp: () => {
+                      setReviewing(false);
+                      void tour();
+                    }
+                  },
+                  onChange: (item) => {
+                    enterFrom.current = null;
+                    const now = stateRef.current;
+                    const ops = [{ kind: "answer", itemId: item.id, answer: null }];
+                    if (item.group && now.picks[item.group] === item.id) ops.push({ kind: "pick", group: item.group, itemId: null });
+                    controller.commit(makeChange(now, ops, items));
+                    setReviewing(false);
+                    setSaid(`${labels.change}: ${item.text}`);
+                  }
+                },
+                "review"
+              ) : step.kind === "card" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 CardView,
                 {
                   item: step.item,
@@ -2243,7 +2302,7 @@ function SwipeDeck(props) {
                   conflict,
                   labels,
                   suggestedDir,
-                  more: cardMore,
+                  more: cardMoreShown,
                   detail: detailNow,
                   onDetail: (d) => setCardDetail({ id: step.item.id, detail: d }),
                   body: cardContext && props.renderCardBody ? props.renderCardBody(cardContext) : null,
@@ -2587,7 +2646,7 @@ function groupOf(entry, graded) {
   if (graded && entry.right !== null) return entry.right ? "right" : "wrong";
   return entry.answer.label;
 }
-function EndView({ result, rules, labels, groupLabels, layerRef, enterFrom, actions, onChange, children }) {
+function EndView({ result, rules, labels, groupLabels, layerRef, enterFrom, actions, onChange, children, review }) {
   const layer = React6.useRef(null);
   React6.useLayoutEffect(() => {
     layerRef.current = layer.current;
@@ -2607,11 +2666,11 @@ function EndView({ result, rules, labels, groupLabels, layerRef, enterFrom, acti
   const answered = result.entries.filter((e) => e.answer);
   const shown = filter ? answered.filter((e) => groupOf(e, graded) === filter) : answered;
   const pct = score && score.graded ? score.right / score.graded : 1;
-  const kicker = first ? groupLabels?.[first[0]] ?? first[0] : score ? labels.score : null;
-  const headline = first ? first[1].text : score ? `${score.right} / ${score.graded}` : labels.allDone;
+  const kicker = review ? null : first ? groupLabels?.[first[0]] ?? first[0] : score ? labels.score : null;
+  const headline = review ? labels.answered : first ? first[1].text : score ? `${score.right} / ${score.graded}` : labels.allDone;
   const sub = labels.answeredOf.replace("{answered}", String(result.answered)).replace("{total}", String(result.total));
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: layer, className: "matrx-sd-layer matrx-sd-endlayer", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "matrx-sd-end", "data-graded": graded ? "" : void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { className: "matrx-sd-mark", viewBox: "0 0 72 72", "aria-hidden": "true", "data-tone": score ? pct >= 0.5 ? "success" : "warning" : "success", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: layer, className: "matrx-sd-layer matrx-sd-endlayer", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "matrx-sd-end", "data-graded": graded ? "" : void 0, "data-review": review ? "" : void 0, children: [
+    review ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { className: "matrx-sd-mark", viewBox: "0 0 72 72", "aria-hidden": "true", "data-tone": score ? pct >= 0.5 ? "success" : "warning" : "success", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { className: "matrx-sd-mark-track", cx: "36", cy: "36", r: "32" }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { className: "matrx-sd-mark-ring", cx: "36", cy: "36", r: "32", pathLength: 100, style: { strokeDasharray: `${Math.round(pct * 100)} 100` } }),
       !score || pct === 1 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { className: "matrx-sd-mark-check", d: "M23 37.5l9 9 17-19", pathLength: 100 }) : null
@@ -2619,11 +2678,11 @@ function EndView({ result, rules, labels, groupLabels, layerRef, enterFrom, acti
     kicker ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "matrx-sd-kicker", children: kicker }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { className: "matrx-sd-end-hero", children: headline }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "matrx-sd-end-sub", children: sub }),
-    score && first ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "matrx-sd-endline", children: [
+    score && first && !review ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "matrx-sd-endline", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "matrx-sd-label", children: labels.score }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "matrx-sd-value", children: `${score.right} / ${score.graded}` })
     ] }) : null,
-    rest.map(([group, item]) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "matrx-sd-endline", children: [
+    (review ? [] : rest).map(([group, item]) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "matrx-sd-endline", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "matrx-sd-label", children: groupLabels?.[group] ?? group }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "matrx-sd-value", children: item.text })
     ] }, group)),
@@ -2660,6 +2719,8 @@ function EndView({ result, rules, labels, groupLabels, layerRef, enterFrom, acti
     ] }) : null,
     shown.length ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "matrx-sd-review", "aria-label": labels.yourAnswers, children: shown.map((e) => {
       const rightIds = e.item.correct === void 0 ? [] : typeof e.item.correct === "string" ? [e.item.correct] : e.item.correct;
+      const said = typeof e.detail?.value === "string" && e.detail.value.trim() ? e.detail.value : e.item.text;
+      const answerWords = typeof e.detail?.label === "string" && e.detail.label ? e.detail.label : e.answer?.label;
       const rightWords = rightIds.map((id) => findAnswer(rules, e.item, id)?.label).filter(Boolean).join(", ");
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "button",
@@ -2668,14 +2729,14 @@ function EndView({ result, rules, labels, groupLabels, layerRef, enterFrom, acti
           className: "matrx-sd-review-row",
           onClick: () => onChange(e.item),
           "aria-label": [
-            `${labels.change}: ${e.item.text}`,
-            [e.answer?.label, e.right === true ? labels.right : e.right === false ? labels.wrong : null].filter(Boolean).join(", "),
+            `${labels.change}: ${said}`,
+            [answerWords, e.right === true ? labels.right : e.right === false ? labels.wrong : null].filter(Boolean).join(", "),
             e.right === false && rightWords ? `${labels.rightAnswer}: ${rightWords}` : null
           ].filter(Boolean).join(". "),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "matrx-sd-review-text", children: [
               e.item.kicker ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "matrx-sd-label", children: e.item.kicker }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "matrx-sd-review-item", children: e.item.text }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "matrx-sd-review-item", children: said }),
               e.right === false && rightWords ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "matrx-sd-review-right", children: [
                 labels.rightAnswer,
                 ": ",
@@ -2684,14 +2745,23 @@ function EndView({ result, rules, labels, groupLabels, layerRef, enterFrom, acti
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "matrx-sd-review-answer", "data-tone": e.right === null ? e.answer?.tone : e.right ? "success" : "destructive", children: [
               e.right === true ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon, {}) : e.right === false ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(XIcon, {}) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: e.answer?.label })
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: answerWords })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PencilIcon, { className: "matrx-sd-review-change", "aria-hidden": "true" })
           ]
         }
       ) }, e.item.id);
     }) }) : null,
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "matrx-sd-end-actions", children: actions }) : null
+    review ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "matrx-sd-end-actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "matrx-sd-review-back", onClick: review.onBack, autoFocus: true, children: labels.backToCards }),
+      review.onHelp ? (
+        // ui-exception: the walkthrough, from the answered list (the corner it had now opens this list)
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", className: "matrx-sd-legend-chip", onClick: review.onHelp, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CircleHelpIcon, { "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: labels.help })
+        ] })
+      ) : null
+    ] }) : actions ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "matrx-sd-end-actions", children: actions }) : null
   ] }) });
 }
 function EmptyView({ title, line, action, layerRef }) {