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

package/dist/directives.js

@@ -107,11 +107,13 @@ function sameValue(a, b) {
   if (typeof a === "object" || typeof b === "object") return safeJson(a) === safeJson(b);
   return false;
 }
-function itemChanges(item, current) {
+function itemChanges(item, current, options = {}) {
   const out = [];
+  const titleColumn = options.titleColumn ?? null;
   for (const [key, raw] of Object.entries(item)) {
     if (NOT_A_CHANGE.has(key)) continue;
-    const change = { key, label: fieldLabel(key), ...describeValue(raw) };
+    const label = key === titleColumn ? "Title" : fieldLabel(key);
+    const change = { key, label, ...describeValue(raw) };
     if (current && Object.prototype.hasOwnProperty.call(current, key)) {
       change.before = describeValue(current[key]);
       change.same = sameValue(current[key], raw);
@@ -121,6 +123,30 @@ function itemChanges(item, current) {
   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
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function Svg({ children, ...props }) {
@@ -378,10 +404,23 @@ function ApplyDirectiveButton({
         children: [
           /* @__PURE__ */ jsxs2("span", { className: "inline-flex min-w-0 items-start gap-1", children: [
             bad ? /* @__PURE__ */ jsx3(AlertIcon, { className: "mt-px h-3.5 w-3.5 shrink-0" }) : /* @__PURE__ */ jsx3(CheckCircleIcon, { className: "mt-px h-3.5 w-3.5 shrink-0" }),
-            /* @__PURE__ */ jsxs2("span", { className: "min-w-0", children: [
-              state.message ?? `Applied ${state.applied}`,
-              bad && !state.message ? ` \xB7 ${state.failed} failed` : ""
-            ] })
+            bad ? /* @__PURE__ */ jsx3(
+              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__ */ jsx3("span", { className: "min-w-0", children: state.message ?? `Applied ${state.applied}` })
           ] }),
           state.copies > 1 ? /* @__PURE__ */ jsx3(
             "span",
@@ -458,10 +497,64 @@ function ApplyDirectiveButton({
         ]
       }
     ),
-    state.status === "error" ? /* @__PURE__ */ jsxs2("span", { className: "inline-flex max-w-sm items-start gap-1 text-xs text-destructive", children: [
-      /* @__PURE__ */ jsx3(AlertIcon, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
-      /* @__PURE__ */ jsx3("span", { children: state.message })
-    ] }) : null
+    state.status === "error" ? /* @__PURE__ */ jsxs2(
+      "span",
+      {
+        className: "inline-flex max-w-sm items-start gap-1 text-xs text-destructive",
+        "data-apply-state": "error",
+        children: [
+          /* @__PURE__ */ jsx3(AlertIcon, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+          /* @__PURE__ */ jsx3(
+            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] = useState(false);
+  const detail = raw?.trim() ?? "";
+  return /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 flex-col gap-0.5", "data-apply-failure": true, children: [
+    /* @__PURE__ */ jsxs2("span", { className: "min-w-0", children: [
+      words.what,
+      " ",
+      words.next,
+      detail ? /* @__PURE__ */ jsx3(
+        "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__ */ jsx3(
+      "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
   ] });
 }
 
@@ -616,7 +709,7 @@ function TargetRow({
     isUpdate ? host.readRecord : void 0,
     isUpdate ? { noun: directive.noun, id: recordId } : null
   );
-  const changes = isUpdate ? itemChanges(item, current.values) : [];
+  const changes = isUpdate ? itemChanges(item, current.values, { titleColumn: nounTitleColumn(directive.noun, host.nouns) }) : [];
   const name = host.renderRecord ? host.renderRecord({ noun: directive.noun, id: recordId, fallback, context: "row" }) : /* @__PURE__ */ jsx4("span", { className: "truncate font-medium text-foreground", children: fallback });
   return /* @__PURE__ */ jsxs3("div", { className: "py-1 text-xs", "data-directive-target": recordId, children: [
     /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 items-center gap-2", children: [
@@ -788,7 +881,9 @@ export {
   DirectiveScopeProvider,
   SideEffectDirectiveCard,
   TARGETING_CLASSES,
+  defaultFailureWords,
   describeChangeValue,
+  failureWords,
   fieldLabel,
   getDirectiveRenderer,
   itemChanges,