Build an inline slug editor with Tailwind CSS: a read-only display of the workspace URL (app.example.com/<slug>) with an edit pencil that swaps it into an input in place, live validation (lowercase, hyphens, 3–32 chars, not reserved) with inline error text and a green check when valid, and save/cancel actions appearing only in edit mode. Check availability with a debounced request showing a spinner then a taken/available badge, block save while taken or invalid, and revert to the display state on Escape or blur-cancel.
提示词保持英文原文——直接粘贴进 Claude、Cursor、v0 或任何 AI 编程工具即可使用。