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

package/dist/index.cjs

@@ -50,6 +50,7 @@ __export(index_exports, {
   IR_PROVISIONAL_KEY: () => IR_PROVISIONAL_KEY,
   IR_ROUTE_KEY: () => IR_ROUTE_KEY,
   KindInstanceRender: () => KindInstanceRender,
+  NO_TITLE_WORD: () => NO_TITLE_WORD,
   NodeOutcomeView: () => NodeOutcomeView,
   ProvisionalKindBoundary: () => ProvisionalKindBoundary,
   ProvisionalKindFrame: () => ProvisionalKindFrame,
@@ -73,6 +74,7 @@ __export(index_exports, {
   isProvisionalBlock: () => isProvisionalBlock,
   isRecordValue: () => isRecordValue,
   itemChanges: () => itemChanges,
+  itemOwnName: () => itemOwnName,
   itemRecordId: () => itemRecordId,
   kindIsRoutable: () => kindIsRoutable,
   kindServerDataFromStoredValue: () => kindServerDataFromStoredValue,
@@ -830,21 +832,21 @@ function useContentIrKindVersion(kind, sources) {
 
 // react/KindInstanceRender.tsx
 var import_react7 = require("react");
-var import_content_ir9 = require("@ai-matrx/content-ir");
+var import_content_ir10 = require("@ai-matrx/content-ir");
 
 // directives/DirectiveRender.tsx
-var import_content_ir8 = require("@ai-matrx/content-ir");
+var import_content_ir9 = require("@ai-matrx/content-ir");
 
 // directives/DirectiveFallbackCard.tsx
-var import_content_ir4 = require("@ai-matrx/content-ir");
+var import_content_ir5 = require("@ai-matrx/content-ir");
 
 // directives/ApplyDirectiveButton.tsx
 var import_react5 = require("react");
-var import_content_ir3 = require("@ai-matrx/content-ir");
+var import_content_ir4 = require("@ai-matrx/content-ir");
 
 // directives/item-changes.ts
-var import_uuid = require("@ai-matrx/kit/uuid");
 var import_text_case = require("@ai-matrx/kit/text-case");
+var import_content_ir3 = require("@ai-matrx/content-ir");
 var TARGETING_CLASSES = /* @__PURE__ */ new Set(["update", "delete"]);
 var NOT_A_CHANGE = /* @__PURE__ */ new Set(["__kind", "id"]);
 var CHANGE_VALUE_MAX = 280;
@@ -860,10 +862,14 @@ function fieldLabel(key) {
 function directiveFieldLabel(key, titleColumn) {
   return titleColumn && key === titleColumn ? "Title" : fieldLabel(key);
 }
+function itemOwnName(item, titleColumn) {
+  const probe = (0, import_content_ir3.itemTitle)(item, titleColumn, 0, 2);
+  return probe === "Item 1 of 2" ? null : probe;
+}
+var NO_TITLE_WORD = "No title";
 var EMPTY_VALUE_WORD = "None";
-function recordFallbackName(nounLabel3, id) {
-  const short = (0, import_uuid.isUuidShape)(id) ? id.slice(0, 8) : id.length > 12 ? `${id.slice(0, 12)}\u2026` : id;
-  return `${nounLabel3} ${short}`;
+function recordFallbackName(nounLabel3) {
+  return nounLabel3.trim() || "Record";
 }
 function describeChangeValue(value, word) {
   return describeValue(value, word);
@@ -1185,7 +1191,7 @@ function ApplyDirectiveButton({
   (0, import_react5.useEffect)(() => {
     currentIdentity.current = identity;
   }, [identity]);
-  const nounText = (0, import_content_ir3.nounLabel)(directive.noun, host.nouns);
+  const nounText = (0, import_content_ir4.nounLabel)(directive.noun, host.nouns);
   const shellKey = readsLedger ? JSON.stringify([directive.slug, items, conversationId ?? null]) : "";
   const read = host.applyState;
   const report = host.reportError;
@@ -1365,7 +1371,7 @@ function ApplyDirectiveButton({
           ) : null,
           records.map((record) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "inline-flex min-w-0 items-center", children: host.renderRecord?.({
             ...record,
-            fallback: recordFallbackName(label2, record.id),
+            fallback: recordFallbackName(label2),
             context: "applied",
             trashed
           }) }, `${record.noun}:${record.id}`)),
@@ -1413,6 +1419,14 @@ function ApplyDirectiveButton({
       }
     );
   }
+  const warm = () => {
+    const read2 = host.readRecord;
+    if (!read2 || !TARGETING_CLASSES.has(directive.directiveClass)) return;
+    for (const item of items) {
+      const id = itemRecordId(item);
+      if (id) void read2({ noun: directive.noun, id }).catch(() => null);
+    }
+  };
   const destructive = directive.directiveClass === "delete";
   const muted = nothingToChange && view.status === "idle";
   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: [
@@ -1422,6 +1436,8 @@ function ApplyDirectiveButton({
       {
         type: "button",
         onClick: () => void handleApply(),
+        onPointerEnter: warm,
+        onFocus: warm,
         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,
@@ -1498,7 +1514,7 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 function DirectiveFallbackCard({ directive, reason }) {
   const host = useDirectiveHost();
   const count = directive.items.length;
-  const display = (0, import_content_ir4.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
+  const display = (0, import_content_ir5.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "my-3 inline-flex flex-wrap items-center gap-2 rounded-md border border-border bg-muted px-2.5 py-1 text-sm", children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BoxesIcon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-foreground", children: display.title }),
@@ -1521,7 +1537,7 @@ function DirectiveFallbackCard({ directive, reason }) {
 }
 
 // directives/DirectiveProvisionalCard.tsx
-var import_content_ir5 = require("@ai-matrx/content-ir");
+var import_content_ir6 = require("@ai-matrx/content-ir");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var COMPLETE_SLUG_RE = /^\{\s*"__kind"\s*:\s*"([^"]+)"/;
 function provisionalDirectiveSlug(content) {
@@ -1531,8 +1547,8 @@ function provisionalDirectiveSlug(content) {
 function DirectiveProvisionalCard({ content, streaming, className }) {
   const host = useDirectiveHost();
   const slug = provisionalDirectiveSlug(content);
-  const known = slug ? (0, import_content_ir5.parseDirectiveSlug)(slug) : null;
-  const display = known ? (0, import_content_ir5.directiveDisplay)(known.directiveClass, known.noun, host.nouns) : null;
+  const known = slug ? (0, import_content_ir6.parseDirectiveSlug)(slug) : null;
+  const display = known ? (0, import_content_ir6.directiveDisplay)(known.directiveClass, known.noun, host.nouns) : null;
   const Icon = known ? classIcon(known.directiveClass, known.noun) : BoxesIcon;
   const title = display?.title ?? "Structured action";
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
@@ -1561,14 +1577,14 @@ function DirectiveProvisionalCard({ content, streaming, className }) {
 }
 
 // directives/registry.ts
-var import_content_ir6 = require("@ai-matrx/content-ir");
+var import_content_ir7 = require("@ai-matrx/content-ir");
 var REGISTRY_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.content-ir-react.directive-renderers");
 var registry = globalThis[REGISTRY_SLOT] ??= {
   bySlug: /* @__PURE__ */ new Map(),
   byClass: /* @__PURE__ */ new Map()
 };
 function registerDirectiveRenderer(directiveClass, renderer, noun) {
-  if (noun) registry.bySlug.set((0, import_content_ir6.buildDirectiveSlug)(directiveClass, noun), renderer);
+  if (noun) registry.bySlug.set((0, import_content_ir7.buildDirectiveSlug)(directiveClass, noun), renderer);
   else registry.byClass.set(directiveClass, renderer);
 }
 function getDirectiveRenderer(directive) {
@@ -1581,7 +1597,7 @@ function resetDirectiveRenderers() {
 
 // directives/SideEffectDirectiveCard.tsx
 var import_react6 = require("react");
-var import_content_ir7 = require("@ai-matrx/content-ir");
+var import_content_ir8 = require("@ai-matrx/content-ir");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function directiveValueWord(host, noun) {
   const valueLabel = host.valueLabel;
@@ -1604,20 +1620,28 @@ function ItemRow({
   if (recordId) {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TargetRow, { directive, item, recordId, index, phase });
   }
-  const titleColumn = (0, import_content_ir7.nounTitleColumn)(directive.noun, host.nouns);
-  const title = (0, import_content_ir7.itemTitle)(item, titleColumn, index, total);
-  const subtitle = (0, import_content_ir7.itemSubtitle)(item);
+  const titleColumn = (0, import_content_ir8.nounTitleColumn)(directive.noun, host.nouns);
+  const ownName = itemOwnName(item, titleColumn);
+  const title = ownName ?? NO_TITLE_WORD;
+  const subtitle = (0, import_content_ir8.itemSubtitle)(item);
   const valueWord = directiveValueWord(host, directive.noun);
-  const facts = (0, import_content_ir7.itemFacts)(titleColumn ? omitKey(item, titleColumn) : item).map((fact) => ({
+  const facts = (0, import_content_ir8.itemFacts)(titleColumn ? omitKey(item, titleColumn) : item).map((fact) => ({
     ...fact,
     label: directiveFieldLabel(fact.key, titleColumn),
     value: valueWord?.(fact.key, fact.value) ?? fact.value
   }));
   const kind = host.itemKind?.(directive.slug) ?? null;
-  const display = (0, import_content_ir7.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
+  const display = (0, import_content_ir8.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
   const openItem = host.openItem;
   const body = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "min-w-0 shrink-0 truncate font-medium text-foreground", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "span",
+      {
+        className: `min-w-0 shrink-0 truncate font-medium ${ownName ? "text-foreground" : "italic text-muted-foreground"}`,
+        "data-item-untitled": ownName ? void 0 : "",
+        children: title
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hidden min-w-0 flex-1 items-baseline gap-2 overflow-hidden sm:flex", children: facts.map((fact) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "truncate text-[11px] text-muted-foreground", "data-item-fact": fact.key, children: [
       fact.label,
       " ",
@@ -1633,7 +1657,7 @@ function ItemRow({
         type: "button",
         onClick: () => openItem({
           // Stamped so the panel's kind pipeline types it from its own first key.
-          item: (0, import_content_ir7.asKindInstance)(item, kind) ?? item,
+          item: (0, import_content_ir8.asKindInstance)(item, kind) ?? item,
           itemKind: kind,
           title,
           subtitle: `${display.title} \xB7 item ${index + 1} of ${total}`,
@@ -1646,7 +1670,12 @@ function ItemRow({
         children: body
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex min-w-0 flex-1 items-center gap-2 px-1 py-0.5", children: body }),
-    host.renderCopy?.({ label: title, value: item, kind, size: "xs" })
+    host.renderCopy?.({
+      label: ownName ?? `this ${(0, import_content_ir8.nounLabel)(directive.noun, host.nouns)}`,
+      value: item,
+      kind,
+      size: "xs"
+    })
   ] });
 }
 function DirectiveChangeList({
@@ -1700,7 +1729,7 @@ function TargetRow({
   phase
 }) {
   const host = useDirectiveHost();
-  const fallback = recordFallbackName((0, import_content_ir7.nounLabel)(directive.noun, host.nouns), recordId);
+  const fallback = recordFallbackName((0, import_content_ir8.nounLabel)(directive.noun, host.nouns));
   const isUpdate = directive.directiveClass === "update";
   const readsLive = isUpdate && phase.phase === "open";
   const live = useRecordValues(
@@ -1709,7 +1738,7 @@ function TargetRow({
   );
   const compareTo = phase.phase === "applied" ? phase.before?.[index] ?? null : readsLive ? live.values : null;
   const changes = isUpdate ? itemChanges(item, compareTo, {
-    titleColumn: (0, import_content_ir7.nounTitleColumn)(directive.noun, host.nouns),
+    titleColumn: (0, import_content_ir8.nounTitleColumn)(directive.noun, host.nouns),
     valueWord: directiveValueWord(host, directive.noun)
   }) : [];
   const name = host.renderRecord ? host.renderRecord({ noun: directive.noun, id: recordId, fallback, context: "row" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate font-medium text-foreground", children: fallback });
@@ -1717,7 +1746,7 @@ function TargetRow({
     /* @__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: `this ${(0, import_content_ir7.nounLabel)(directive.noun, host.nouns).toLowerCase()}`,
+        label: `this ${(0, import_content_ir8.nounLabel)(directive.noun, host.nouns).toLowerCase()}`,
         value: item,
         size: "xs",
         record: { noun: directive.noun, id: recordId }
@@ -1731,7 +1760,7 @@ function SideEffectDirectiveCard({ directive }) {
   const [expanded, setExpanded] = (0, import_react6.useState)(false);
   const items = directive.items;
   const total = items.length;
-  const display = (0, import_content_ir7.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
+  const display = (0, import_content_ir8.directiveDisplay)(directive.directiveClass, directive.noun, host.nouns);
   const Icon = classIcon(directive.directiveClass, directive.noun);
   const [phase, setPhase] = (0, import_react6.useState)(
     () => readsApplyLedger(host, directive) ? { phase: "pending" } : { phase: "open" }
@@ -1797,13 +1826,13 @@ function DirectiveRender({ conversationId, ...props }) {
 }
 function DirectiveRenderInner({ content, className, streaming }) {
   const host = useDirectiveHost();
-  const directive = (0, import_content_ir8.tryDecodeDirectiveContent)(content, (message) => {
+  const directive = (0, import_content_ir9.tryDecodeDirectiveContent)(content, (message) => {
     const line = `[kind-directives] ${message}`;
     if (host.reportError) host.reportError(line);
     else console.error(line);
   });
   if (!directive) {
-    if (typeof content === "string" && (0, import_content_ir8.looksLikeDirectiveHead)(content) && !isWholeJson(content)) {
+    if (typeof content === "string" && (0, import_content_ir9.looksLikeDirectiveHead)(content) && !isWholeJson(content)) {
       return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DirectiveProvisionalCard, { content, streaming: streaming !== false, className });
     }
     const raw = typeof content === "string" ? content : JSON.stringify(content, null, 2);
@@ -1827,14 +1856,14 @@ function isRecordValue(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function kindIsRoutable(kind, host) {
-  if ((0, import_content_ir9.isReservedDirectiveSlug)(kind)) return true;
+  if ((0, import_content_ir10.isReservedDirectiveSlug)(kind)) return true;
   if (host.kinds.getDefinition(kind)?.legacyBlockType) return true;
   const resolution = host.components.resolve(kind, host.platform, "output");
   if (!resolution?.isActive) return false;
   return resolution.componentKey !== GENERIC_STRUCTURED_COMPONENT_KEY;
 }
 function KindInstanceRender(props) {
-  if ((0, import_content_ir9.isReservedDirectiveSlug)(props.kind)) {
+  if ((0, import_content_ir10.isReservedDirectiveSlug)(props.kind)) {
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       DirectiveRender,
       {
@@ -1889,7 +1918,7 @@ function KindInstanceRenderInner({
     content: JSON.stringify(value, null, 2),
     language: "json",
     metadata: {
-      [import_content_ir9.IR_ENVELOPE_KEY]: (0, import_content_ir9.envelopeFromCompleteValue)(value, kind)
+      [import_content_ir10.IR_ENVELOPE_KEY]: (0, import_content_ir10.envelopeFromCompleteValue)(value, kind)
     }
   } : null;
   const frameClass = variant === "bare" ? void 0 : "rounded-md border border-border bg-card p-3";
@@ -1944,12 +1973,12 @@ function ProvisionalKindFrame({ children }) {
 
 // react/GenericStructuredView.tsx
 var import_react9 = require("react");
-var import_content_ir10 = require("@ai-matrx/content-ir");
+var import_content_ir11 = require("@ai-matrx/content-ir");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function readStructuredValue(content, metadata) {
-  const envelope = (0, import_content_ir10.readEnvelope)(metadata);
+  const envelope = (0, import_content_ir11.readEnvelope)(metadata);
   if (envelope) {
-    return { value: (0, import_content_ir10.reconstructRegionValue)(envelope), recovered: true };
+    return { value: (0, import_content_ir11.reconstructRegionValue)(envelope), recovered: true };
   }
   try {
     return { value: JSON.parse(content), recovered: true };
@@ -1964,10 +1993,10 @@ function GenericStructuredView({
   className
 }) {
   const host = useContentIrHost();
-  const envelope = (0, import_content_ir10.readEnvelope)(metadata);
+  const envelope = (0, import_content_ir11.readEnvelope)(metadata);
   const status = envelope?.root.status ?? "complete";
   const { value, recovered } = readStructuredValue(content, metadata);
-  const kind = envelope?.root.kind ?? (typeof value === "object" && value !== null && !Array.isArray(value) ? (0, import_content_ir10.readObjectKind)(value) : null) ?? "";
+  const kind = envelope?.root.kind ?? (typeof value === "object" && value !== null && !Array.isArray(value) ? (0, import_content_ir11.readObjectKind)(value) : null) ?? "";
   const marker = readIrRouteMarker(metadata);
   const note = marker?.reason === "inactive" ? "a custom view is registered but held inactive" : marker?.reason === "broken-instance" ? "this instance did not match the shape's schema" : marker?.reason === "unregistered" ? "this shape isn't registered on this platform" : "no custom view yet";
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: className ? `my-2 min-w-0 ${className}` : "my-2 min-w-0", children: [
@@ -1981,7 +2010,7 @@ function GenericStructuredView({
 }
 
 // react/RuntimeWrapperViews.tsx
-var import_content_ir11 = require("@ai-matrx/content-ir");
+var import_content_ir12 = require("@ai-matrx/content-ir");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function isRecord2(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
@@ -2003,7 +2032,7 @@ function DelegatedOutput({
   if (!isRecord2(output)) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: host.renderValue({ value: output }) });
   }
-  const kind = (0, import_content_ir11.readObjectKind)(output) ?? declaredKind;
+  const kind = (0, import_content_ir12.readObjectKind)(output) ?? declaredKind;
   if (!kind) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: fallback?.(output) ?? host.renderValue({ value: output }) });
   }
@@ -2021,7 +2050,7 @@ function DelegatedOutput({
 function NodeOutcomeView({ serverData, fallback }) {
   const wrapper = readWrapperFrom(
     serverData,
-    import_content_ir11.readNodeOutcomeValue
+    import_content_ir12.readNodeOutcomeValue
   );
   if (!wrapper) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -2036,7 +2065,7 @@ function NodeOutcomeView({ serverData, fallback }) {
 function RunResultView({ serverData, fallback }) {
   const wrapper = readWrapperFrom(
     serverData,
-    import_content_ir11.readRunResultValue
+    import_content_ir12.readRunResultValue
   );
   if (!wrapper) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-2", children: wrapper.outputs.length > 0 ? wrapper.outputs.map((outcome) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(