fix: rename the diagram title through frappe-ui, so the blue focus ring goes

[bvnaik05]

Split back out of #397 at review request — "#396 is the one-line fix it started as". Closes #396.

Summary

• The rename box was a hand-rolled <input> carrying its own border, padding and focus:border classes, so the browser's default focus ring sat on top of them. That ring was the reported symptom. frappe-ui's TextInput already applies focus:ring-0 as part of the control's chrome, so adopting it removes the ring rather than papering over it — and the box now matches every other input in the app instead of approximating one.
• The display state was a hand-rolled <button> for the same reason, and becomes a ghost Button with the pencil affordance moving into its #suffix slot.

Two details the swap forces

The ref changes what it points at. It now holds the TextInput component rather than a DOM node, so startEditing focuses through its exposed el (TextInput.vue does defineExpose({ el: inputRef })). A bare ref.focus() would fail silently and leave the box looking editable but unfocused and unselected — which is why there's a test pinning it.

The title keeps its type. 14px/600 is the toolbar title style in design/README.md, and Button's own size classes stop at the regular weight, so the label carries text-base-semibold. shrink overrides Button's shrink-0 so a long title still ellipsises inside its column instead of pushing the actions cluster off the bar.

Enter / blur still commit and Escape still cancels — TextInput forwards listeners onto the inner input, and the test pins all three.

Test plan

• yarn vitest run src/components/toolbar src/frappe-ui-tokens.test.js — 107 tests pass, including 4 new
• yarn build succeeds
• Manual browser check: click the title, confirm no blue ring, confirm the text is focused and selected, confirm Enter / Escape / click-away behave

🤖 Generated with Claude Code

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[vibhavkatre]

Verified the two claims the swap rests on, against beta.19 source — a source-scanning test can pin that @blur="commit" is written, but not that the listener reaches anything:

• The listeners do reach the input. TextInput sets inheritAttrs: false and re-binds attrsWithoutClassStyle onto the inner <input>, so onBlur lands on the control itself. This mattered: blur does not bubble, so had the attrs stayed on the wrapper, commit-on-click-away would have silently stopped working.
• defineExpose({ el: inputRef }) is there, so input.value?.el?.focus() is the correct reach.

text-base-semibold is a real utility, and it is the right one. I built the branch and read it out of the emitted CSS: font-size:14px; font-weight:600. That matches design/README.md:100 ("Toolbar title | 14px / 600") exactly. Worth checking rather than assuming, given the dead-token-class family that #287 cleaned up — a class with no generated utility renders nothing and looks like a styling opinion rather than a bug.

Also confirmed Button wraps its default slot in a truncate span (Button.vue:270), so a long title still ellipsises with min-w-0 shrink — the claim in the description holds.

One thing to expect visually: the title gets smaller. It was text-lg font-medium (18px/500) and is now 14px/600. That is a correction toward the design spec rather than a side effect, but it is a visible change beyond "the blue ring is gone", so don't be surprised by it.

Merged: verified alongside #420, #397 and #423 — 1043 tests, build and lint green on all four combined.