@ai-matrx/design-system 0.86.349 → 0.86.351

package/dist/swipe-deck.css

@@ -547,6 +547,20 @@
   .matrx-sd .matrx-sd-review-change { opacity: 1; }
 }
 .matrx-sd-end-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
+/* the answered list, mid-deck: no mark, its title and the way back */
+.matrx-sd .matrx-sd-review-back {
+  margin: 0; height: 40px; padding: 0 18px; border: 0; border-radius: 20px;
+  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
+  font: inherit; font-size: 15px; font-weight: 600;
+}
+@media (hover: hover) { .matrx-sd .matrx-sd-review-back:hover { filter: brightness(1.06); } }
+.matrx-sd .matrx-sd-corner { position: relative; }
+.matrx-sd .matrx-sd-corner[aria-pressed="true"] { color: var(--sd-fg); background: var(--sd-pill); }
+.matrx-sd-corner-count {
+  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
+  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
+  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
+}
 /* Nothing to answer: three outline cards, fanned, and the words under them. */
 .matrx-sd-empty { align-items: center; text-align: center; margin: auto; }
 .matrx-sd-empty .matrx-sd-end-hero { font-size: clamp(28px, min(7vw, 9cqh), 56px); }

package/dist/swipe-deck.d.cts

@@ -22,6 +22,17 @@ interface DeckAnswer {
     /** Stable id: what results, callbacks and connections carry. */
     readonly id: string;
     readonly label: string;
+    /**
+     * Offered only through the card's own controls (`renderCardActions` / `renderCardBody` call
+     * `answer(id)`), never drawn as a button: an answer that needs a choice first ("Related ▸ Partner").
+     */
+    readonly hidden?: boolean;
+    /**
+     * "Skip for now": in a bound deck the connection moves the card to the back of the line and keeps no
+     * answer (it comes back once the rest are answered); undo brings it back to the front. In a deck with no
+     * connection it is kept like any other answer.
+     */
+    readonly requeue?: boolean;
     readonly tone: DeckTone;
     /** Higher is better. Decides which answer wins when categories disagree (default by direction). */
     readonly rank?: number;
@@ -289,6 +300,11 @@ interface DeckChange {
     readonly ops: readonly DeckOp[];
     readonly inverse: readonly DeckOp[];
     readonly from: DeckDirection | null;
+    /**
+     * The connection acts on it but never keeps it as an answer (a `requeue` answer: the card goes to the
+     * back of the line): once the connection resolves, the deck stops drawing it, so the card is unanswered.
+     */
+    readonly transient?: boolean;
 }
 declare function applyOp(state: DeckState, op: DeckOp): DeckState;
 declare function applyOps(state: DeckState, ops: readonly DeckOp[]): DeckState;
@@ -437,6 +453,10 @@ interface SwipeDeckLabels {
     readonly filterAnswers: string;
     /** The empty screen (no items). */
     readonly emptyTitle: string;
+    /** The corner that opens every answer so far, and that list's title. */
+    readonly answered: string;
+    /** Leave the answered list for the card in focus. */
+    readonly backToCards: string;
 }
 declare const DEFAULT_SWIPE_DECK_LABELS: SwipeDeckLabels;
 

package/dist/swipe-deck.d.ts

@@ -22,6 +22,17 @@ interface DeckAnswer {
     /** Stable id: what results, callbacks and connections carry. */
     readonly id: string;
     readonly label: string;
+    /**
+     * Offered only through the card's own controls (`renderCardActions` / `renderCardBody` call
+     * `answer(id)`), never drawn as a button: an answer that needs a choice first ("Related ▸ Partner").
+     */
+    readonly hidden?: boolean;
+    /**
+     * "Skip for now": in a bound deck the connection moves the card to the back of the line and keeps no
+     * answer (it comes back once the rest are answered); undo brings it back to the front. In a deck with no
+     * connection it is kept like any other answer.
+     */
+    readonly requeue?: boolean;
     readonly tone: DeckTone;
     /** Higher is better. Decides which answer wins when categories disagree (default by direction). */
     readonly rank?: number;
@@ -289,6 +300,11 @@ interface DeckChange {
     readonly ops: readonly DeckOp[];
     readonly inverse: readonly DeckOp[];
     readonly from: DeckDirection | null;
+    /**
+     * The connection acts on it but never keeps it as an answer (a `requeue` answer: the card goes to the
+     * back of the line): once the connection resolves, the deck stops drawing it, so the card is unanswered.
+     */
+    readonly transient?: boolean;
 }
 declare function applyOp(state: DeckState, op: DeckOp): DeckState;
 declare function applyOps(state: DeckState, ops: readonly DeckOp[]): DeckState;
@@ -437,6 +453,10 @@ interface SwipeDeckLabels {
     readonly filterAnswers: string;
     /** The empty screen (no items). */
     readonly emptyTitle: string;
+    /** The corner that opens every answer so far, and that list's title. */
+    readonly answered: string;
+    /** Leave the answered list for the card in focus. */
+    readonly backToCards: string;
 }
 declare const DEFAULT_SWIPE_DECK_LABELS: SwipeDeckLabels;
 

package/dist/swipe-deck.js

@@ -15,6 +15,7 @@ import {
   CircleHelpIcon,
   CopyIcon,
   EraserIcon,
+  ListChecksIcon,
   Loader2Icon,
   Maximize2Icon,
   Minimize2Icon,
@@ -213,7 +214,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__ */ jsx(
@@ -226,6 +227,7 @@ function CornerButton({ corner, label, shortcut, onClick, disabled, children })
         title: shortcut ? `${label} (${shortcut})` : label,
         "aria-keyshortcuts": shortcut,
         disabled,
+        "aria-pressed": pressed,
         onClick,
         children
       }
@@ -742,17 +744,17 @@ function useDeckController({ items, binding, initialState, onChange }) {
   const stateRef = React2.useRef(state);
   stateRef.current = state;
   const send = React2.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));
@@ -767,7 +769,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]
@@ -779,7 +781,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]);
@@ -970,6 +972,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",
@@ -1423,9 +1427,13 @@ function SwipeDeck(props) {
   const [bubble, setBubble] = React4.useState(null);
   const [toast, setToast] = React4.useState(null);
   const [said, setSaid] = React4.useState("");
-  const cardItem = step.kind === "card" ? step.item : null;
+  const [reviewing, setReviewing] = React4.useState(false);
+  const reviewingRef = React4.useRef(false);
+  reviewingRef.current = reviewing;
+  const cardItem = step.kind === "card" && !reviewing ? step.item : null;
   const cardKey = cardItem ? keyFor(rules, cardItem) : deckKey;
   const cardMore = React4.useMemo(() => cardItem ? moreFor(rules, cardItem) : [], [cardItem, rules]);
+  const cardMoreShown = React4.useMemo(() => cardMore.filter((a) => !a.hidden), [cardMore]);
   const suggestedDir = cardItem ? directionOf(cardKey, cardItem.suggested) : null;
   const [cardDetail, setCardDetail] = React4.useState(null);
   const detailNow = cardItem ? cardDetail?.id === cardItem.id ? cardDetail.detail : state.details?.[cardItem.id] ?? null : null;
@@ -1468,7 +1476,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);
@@ -1613,6 +1622,13 @@ function SwipeDeck(props) {
   const afterTour = React4.useRef(null);
   const runKeyRef = React4.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;
@@ -1654,7 +1670,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 = React4.useRef({ kind: props.exitKind, onExit: props.onExit });
@@ -1670,6 +1686,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();
@@ -1826,7 +1847,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 copyToClipboard(text2);
     flash(ok ? labels.copied : labels.copyFailed);
   };
@@ -1880,11 +1901,41 @@ function SwipeDeck(props) {
             },
             children: [
               props.onExpand ? /* @__PURE__ */ jsx3(CornerButton, { corner: "tl", label: labels.expand, onClick: props.onExpand, children: /* @__PURE__ */ jsx3(Maximize2Icon, {}) }) : props.onExit ? /* @__PURE__ */ jsx3(CornerButton, { corner: "tl", label: props.exitKind === "collapse" ? labels.collapse : labels.exit, ...props.exitKind === "collapse" ? { shortcut: "Escape" } : {}, onClick: props.onExit, children: props.exitKind === "collapse" ? /* @__PURE__ */ jsx3(Minimize2Icon, {}) : /* @__PURE__ */ jsx3(XIcon, {}) }) : null,
-              /* @__PURE__ */ jsx3(CornerButton, { corner: "tr", label: labels.help, shortcut: "?", onClick: () => void tour(), disabled: !cardItem, children: /* @__PURE__ */ jsx3(CircleHelpIcon, {}) }),
+              /* @__PURE__ */ jsxs3(CornerButton, { corner: "tr", label: labels.answered, onClick: () => setReviewing((v) => !v), disabled: !ready || !items.length || step.kind === "end", pressed: reviewing, children: [
+                /* @__PURE__ */ jsx3(ListChecksIcon, {}),
+                result.answered ? /* @__PURE__ */ jsx3("span", { className: "matrx-sd-corner-count", children: result.answered }) : null
+              ] }),
               /* @__PURE__ */ jsx3(CornerButton, { corner: "bl", label: labels.undo, shortcut: "Z", onClick: undo, disabled: !controller.canUndo, children: /* @__PURE__ */ jsx3(Undo2Icon, {}) }),
               /* @__PURE__ */ jsx3(CornerButton, { corner: "br", label: labels.copy, onClick: () => void copy(), disabled: !ready || !items.length, children: /* @__PURE__ */ jsx3(CopyIcon, {}) }),
               cardItem ? /* @__PURE__ */ jsx3(EdgeButtons, { keyMap: cardKey, suggested: suggestedDir, refs: edgeRefs, onAnswer: (d) => act(d), suggestionLabel: labels.suggestion }) : null,
-              /* @__PURE__ */ jsx3("div", { className: "matrx-sd-stage", children: !ready ? /* @__PURE__ */ jsx3("div", { className: "matrx-sd-layer", "data-state": controller.status, children: controller.status === "error" ? /* @__PURE__ */ jsx3(ErrorBox, { className: "matrx-sd-message", message: controller.readError ?? "", operation: "Read the deck", origin: "design-system/SwipeDeck" }) : /* @__PURE__ */ jsx3(Loader2Icon, { className: "matrx-spin matrx-sd-spinner" }) }) : items.length === 0 ? /* @__PURE__ */ jsx3(EmptyView, { title: props.empty?.title ?? labels.emptyTitle, line: props.empty?.line, action: props.empty?.action, layerRef }, "empty") : step.kind === "card" ? /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx3("div", { className: "matrx-sd-stage", children: !ready ? /* @__PURE__ */ jsx3("div", { className: "matrx-sd-layer", "data-state": controller.status, children: controller.status === "error" ? /* @__PURE__ */ jsx3(ErrorBox, { className: "matrx-sd-message", message: controller.readError ?? "", operation: "Read the deck", origin: "design-system/SwipeDeck" }) : /* @__PURE__ */ jsx3(Loader2Icon, { className: "matrx-spin matrx-sd-spinner" }) }) : items.length === 0 ? /* @__PURE__ */ jsx3(EmptyView, { title: props.empty?.title ?? labels.emptyTitle, line: props.empty?.line, action: props.empty?.action, layerRef }, "empty") : reviewing && step.kind !== "end" ? /* @__PURE__ */ jsx3(
+                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__ */ jsx3(
                 CardView,
                 {
                   item: step.item,
@@ -1893,7 +1944,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,
@@ -2237,7 +2288,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 = React4.useRef(null);
   React4.useLayoutEffect(() => {
     layerRef.current = layer.current;
@@ -2257,11 +2308,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__ */ jsx3("div", { ref: layer, className: "matrx-sd-layer matrx-sd-endlayer", children: /* @__PURE__ */ jsxs3("div", { className: "matrx-sd-end", "data-graded": graded ? "" : void 0, children: [
-    /* @__PURE__ */ jsxs3("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__ */ jsx3("div", { ref: layer, className: "matrx-sd-layer matrx-sd-endlayer", children: /* @__PURE__ */ jsxs3("div", { className: "matrx-sd-end", "data-graded": graded ? "" : void 0, "data-review": review ? "" : void 0, children: [
+    review ? null : /* @__PURE__ */ jsxs3("svg", { className: "matrx-sd-mark", viewBox: "0 0 72 72", "aria-hidden": "true", "data-tone": score ? pct >= 0.5 ? "success" : "warning" : "success", children: [
       /* @__PURE__ */ jsx3("circle", { className: "matrx-sd-mark-track", cx: "36", cy: "36", r: "32" }),
       /* @__PURE__ */ jsx3("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__ */ jsx3("path", { className: "matrx-sd-mark-check", d: "M23 37.5l9 9 17-19", pathLength: 100 }) : null
@@ -2269,11 +2320,11 @@ function EndView({ result, rules, labels, groupLabels, layerRef, enterFrom, acti
     kicker ? /* @__PURE__ */ jsx3("div", { className: "matrx-sd-kicker", children: kicker }) : null,
     /* @__PURE__ */ jsx3("h2", { className: "matrx-sd-end-hero", children: headline }),
     /* @__PURE__ */ jsx3("div", { className: "matrx-sd-end-sub", children: sub }),
-    score && first ? /* @__PURE__ */ jsxs3("div", { className: "matrx-sd-endline", children: [
+    score && first && !review ? /* @__PURE__ */ jsxs3("div", { className: "matrx-sd-endline", children: [
       /* @__PURE__ */ jsx3("div", { className: "matrx-sd-label", children: labels.score }),
       /* @__PURE__ */ jsx3("div", { className: "matrx-sd-value", children: `${score.right} / ${score.graded}` })
     ] }) : null,
-    rest.map(([group, item]) => /* @__PURE__ */ jsxs3("div", { className: "matrx-sd-endline", children: [
+    (review ? [] : rest).map(([group, item]) => /* @__PURE__ */ jsxs3("div", { className: "matrx-sd-endline", children: [
       /* @__PURE__ */ jsx3("div", { className: "matrx-sd-label", children: groupLabels?.[group] ?? group }),
       /* @__PURE__ */ jsx3("div", { className: "matrx-sd-value", children: item.text })
     ] }, group)),
@@ -2310,6 +2361,8 @@ function EndView({ result, rules, labels, groupLabels, layerRef, enterFrom, acti
     ] }) : null,
     shown.length ? /* @__PURE__ */ jsx3("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__ */ jsx3("li", { children: /* @__PURE__ */ jsxs3(
         "button",
@@ -2318,14 +2371,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__ */ jsxs3("span", { className: "matrx-sd-review-text", children: [
               e.item.kicker ? /* @__PURE__ */ jsx3("span", { className: "matrx-sd-label", children: e.item.kicker }) : null,
-              /* @__PURE__ */ jsx3("span", { className: "matrx-sd-review-item", children: e.item.text }),
+              /* @__PURE__ */ jsx3("span", { className: "matrx-sd-review-item", children: said }),
               e.right === false && rightWords ? /* @__PURE__ */ jsxs3("span", { className: "matrx-sd-review-right", children: [
                 labels.rightAnswer,
                 ": ",
@@ -2334,14 +2387,23 @@ function EndView({ result, rules, labels, groupLabels, layerRef, enterFrom, acti
             ] }),
             /* @__PURE__ */ jsxs3("span", { className: "matrx-sd-review-answer", "data-tone": e.right === null ? e.answer?.tone : e.right ? "success" : "destructive", children: [
               e.right === true ? /* @__PURE__ */ jsx3(CheckIcon, {}) : e.right === false ? /* @__PURE__ */ jsx3(XIcon, {}) : null,
-              /* @__PURE__ */ jsx3("span", { children: e.answer?.label })
+              /* @__PURE__ */ jsx3("span", { children: answerWords })
             ] }),
             /* @__PURE__ */ jsx3(PencilIcon, { className: "matrx-sd-review-change", "aria-hidden": "true" })
           ]
         }
       ) }, e.item.id);
     }) }) : null,
-    actions ? /* @__PURE__ */ jsx3("div", { className: "matrx-sd-end-actions", children: actions }) : null
+    review ? /* @__PURE__ */ jsxs3("div", { className: "matrx-sd-end-actions", children: [
+      /* @__PURE__ */ jsx3("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__ */ jsxs3("button", { type: "button", className: "matrx-sd-legend-chip", onClick: review.onHelp, children: [
+          /* @__PURE__ */ jsx3(CircleHelpIcon, { "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx3("span", { children: labels.help })
+        ] })
+      ) : null
+    ] }) : actions ? /* @__PURE__ */ jsx3("div", { className: "matrx-sd-end-actions", children: actions }) : null
   ] }) });
 }
 function EmptyView({ title, line, action, layerRef }) {