@ai-matrx/content-ir-react 0.16.1 → 0.17.0

package/dist/react.cjs

@@ -210,6 +210,30 @@ function itemChanges(item, current, options = {}) {
   return out;
 }
 
+// directives/failure-words.ts
+var PAST = {
+  create: "created",
+  update: "updated",
+  delete: "deleted"
+};
+function defaultFailureWords(failure) {
+  const verbed = PAST[failure.directiveClass] ?? "applied";
+  const noun = failure.nounLabel.trim().toLowerCase() || "item";
+  if (failure.failed && failure.total && failure.total > 1) {
+    return {
+      what: `${failure.failed} of ${failure.total} weren't ${verbed}.`,
+      next: "Retry to try those again."
+    };
+  }
+  return {
+    what: `The ${noun} wasn't ${verbed}.`,
+    next: "Try again in a moment."
+  };
+}
+function failureWords(failure, explain) {
+  return explain?.(failure) ?? defaultFailureWords(failure);
+}
+
 // directives/icons.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function Svg({ children, ...props }) {
@@ -467,10 +491,23 @@ function ApplyDirectiveButton({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "inline-flex min-w-0 items-start gap-1", children: [
             bad ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AlertIcon, { className: "mt-px h-3.5 w-3.5 shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckCircleIcon, { className: "mt-px h-3.5 w-3.5 shrink-0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "min-w-0", children: [
-              state.message ?? `Applied ${state.applied}`,
-              bad && !state.message ? ` \xB7 ${state.failed} failed` : ""
-            ] })
+            bad ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              FailureNotice,
+              {
+                words: failureWords(
+                  {
+                    raw: state.message ?? `${state.failed} failed`,
+                    directiveClass: directive.directiveClass,
+                    noun: directive.noun,
+                    nounLabel: nounText,
+                    failed: state.failed,
+                    total: state.applied + state.failed
+                  },
+                  host.explainFailure
+                ),
+                raw: state.message
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0", children: state.message ?? `Applied ${state.applied}` })
           ] }),
           state.copies > 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "span",
@@ -547,10 +584,64 @@ function ApplyDirectiveButton({
         ]
       }
     ),
-    state.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "inline-flex max-w-sm items-start gap-1 text-xs text-destructive", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AlertIcon, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: state.message })
-    ] }) : null
+    state.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "span",
+      {
+        className: "inline-flex max-w-sm items-start gap-1 text-xs text-destructive",
+        "data-apply-state": "error",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AlertIcon, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            FailureNotice,
+            {
+              words: failureWords(
+                {
+                  raw: state.message,
+                  directiveClass: directive.directiveClass,
+                  noun: directive.noun,
+                  nounLabel: nounText
+                },
+                host.explainFailure
+              ),
+              raw: state.message
+            }
+          )
+        ]
+      }
+    ) : null
+  ] });
+}
+function FailureNotice({
+  words,
+  raw
+}) {
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const detail = raw?.trim() ?? "";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex min-w-0 flex-col gap-0.5", "data-apply-failure": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "min-w-0", children: [
+      words.what,
+      " ",
+      words.next,
+      detail ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setOpen((v) => !v),
+          "aria-expanded": open,
+          className: "ml-1 underline underline-offset-2 hover:no-underline",
+          "data-apply-failure-details-toggle": true,
+          children: open ? "Hide details" : "Details"
+        }
+      ) : null
+    ] }),
+    open && detail ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "span",
+      {
+        className: "block max-w-sm select-text break-words font-mono text-[11px] text-muted-foreground",
+        "data-apply-failure-details": true,
+        children: detail
+      }
+    ) : null
   ] });
 }