u

src/panels/EditablePanelTile.jsx

@@ -25,6 +25,7 @@ function valuesEqual(a, b) {
  *
  * @prop {any} [value] - The saved value shown in read mode and used as the baseline for dirty detection.
  * @prop {ReactNode} [title] - Overline label shown above the body.
+ * @prop {function} [titleContent] - Optional title render function receiving `{ editing, draft, onChange }`.
  * @prop {ReactNode} [display] - Node rendered while not editing.
  * @prop {ReactNode | function} [edit] - Node rendered while editing, or a render function receiving `{ draft, onChange, inputRef }`.
  * @prop {(draft) => Promise<void>} [onSave] - Async save handler. The tile exits edit mode only after this resolves; if it rejects, the error is surfaced via `onError` and shown inline.
@@ -142,15 +143,24 @@ class EditablePanelTileBase extends Component {
   };
 
   renderTitle() {
-    const { title, onSave } = this.props;
-    if (!title) return null;
+    const { title, titleContent, onSave } = this.props;
+    const { editing, draft } = this.state;
+    const content =
+      typeof titleContent === 'function'
+        ? titleContent({
+            editing,
+            draft,
+            onChange: this.handleDraftChange,
+          })
+        : title;
+    if (!content) return null;
     return (
       <Typography
         variant="h6"
         color="text.secondary"
         sx={{ display: 'block', pr: onSave ? 9 : 0 }}
       >
-        {title}
+        {content}
       </Typography>
     );
   }