@ai-matrx/content-ir-react 0.20.0 → 0.20.2

package/dist/react.cjs

@@ -667,7 +667,7 @@ function ApplyDirectiveButton({
               type: "button",
               disabled: askingAgain,
               onClick: () => void handleApply(!bad),
-              className: "inline-flex items-center gap-1 rounded px-1 py-0.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50",
+              className: "inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded px-1 py-0.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50",
               "data-apply-action": bad ? "retry" : "run-again",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RotateCcwIcon, { className: "h-3 w-3" }),
@@ -707,8 +707,8 @@ function ApplyDirectiveButton({
   }
   const destructive = directive.directiveClass === "delete";
   const muted = nothingToChange && view.status === "idle";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
-    muted ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-xs text-muted-foreground", "data-apply-nothing": "", children: "Nothing to change" }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex min-w-0 flex-wrap items-center justify-end gap-x-2 gap-y-1", children: [
+    muted ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "min-w-0 text-xs text-muted-foreground", "data-apply-nothing": "", children: "Nothing to change" }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "button",
       {
@@ -717,7 +717,7 @@ function ApplyDirectiveButton({
         disabled: view.status === "applying" || view.status === "asking" || items.length === 0,
         "data-apply-tone": muted ? "muted" : destructive ? "destructive" : "default",
         title: muted ? "It sets no fields, so applying it changes nothing." : void 0,
-        className: `inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium disabled:opacity-50 ${muted ? "border-border/60 bg-background text-muted-foreground hover:bg-accent" : destructive ? "border-destructive/50 bg-background text-destructive hover:bg-destructive/10" : "border-border bg-background hover:bg-accent"}`,
+        className: `inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-md border px-2 py-1 text-xs font-medium disabled:opacity-50 ${muted ? "border-border/60 bg-background text-muted-foreground hover:bg-accent" : destructive ? "border-destructive/50 bg-background text-destructive hover:bg-destructive/10" : "border-border bg-background hover:bg-accent"}`,
         children: [
           view.status === "applying" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LoaderIcon, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PlayIcon, { className: "h-3.5 w-3.5" }),
           view.status === "applying" ? `Applying${itemCount ? ` ${itemCount} ${itemCount === 1 ? "item" : "items"}` : ""}\u2026${elapsed ? ` ${elapsed}s` : ""}` : label
@@ -768,7 +768,7 @@ function FailureNotice({
           type: "button",
           onClick: () => setOpen((v) => !v),
           "aria-expanded": open,
-          className: "ml-1 underline underline-offset-2 hover:no-underline",
+          className: "ml-1 whitespace-nowrap underline underline-offset-2 hover:no-underline",
           "data-apply-failure-details-toggle": true,
           children: open ? "Hide details" : "Details"
         }
@@ -1000,7 +1000,12 @@ function TargetRow({
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "py-1 text-xs", "data-directive-target": recordId, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex min-w-0 flex-1 items-center gap-1 px-1", children: name }),
-      host.renderCopy?.({ label: fallback, value: item, size: "xs" })
+      host.renderCopy?.({
+        label: `this ${(0, import_content_ir5.nounLabel)(directive.noun, host.nouns).toLowerCase()}`,
+        value: item,
+        size: "xs",
+        record: { noun: directive.noun, id: recordId }
+      })
     ] }),
     isUpdate ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DirectiveChangeList, { changes, className: "mt-0.5 px-1" }) : null
   ] });
@@ -1028,7 +1033,7 @@ function SideEffectDirectiveCard({ directive }) {
         " ",
         total === 1 ? "item" : "items"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ml-auto flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ml-auto flex min-w-0 flex-wrap items-center justify-end gap-1", children: [
         host.renderCopy?.({ label: display.title, value: directive.shell, size: "icon" }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ApplyDirectiveButton,
@@ -1050,7 +1055,7 @@ function SideEffectDirectiveCard({ directive }) {
       {
         type: "button",
         onClick: () => setExpanded((v) => !v),
-        className: "mt-0.5 inline-flex items-center gap-1 rounded px-1 py-0.5 text-[11px] text-muted-foreground hover:text-foreground",
+        className: "mt-0.5 inline-flex items-center gap-1 whitespace-nowrap rounded px-1 py-0.5 text-[11px] text-muted-foreground hover:text-foreground",
         children: [
           expanded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronDownIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronRightIcon, { className: "h-3 w-3" }),
           expanded ? "Show less" : `Show ${hidden} more`