feat(app-shell): a Studio item header keeps the item name readable; chips, tools and labels give way first - #29765

domain:ui#4 · zhuangjianguo · session_01QsR2jR7ZFkpqmm4U8S1f9y

Requested by Steedos · project thread

Fixes #29693

Clause-②: no
Metadata-protocol: none

维护者速读

• 改了什么:Studio 条目标题行在窄栏(约 1024 px 窗口、右侧面板打开)不再把条目名挤没。标题至少保留前 12 个字符(名称更短则整名);先让芯片和五个条目工具收进 ⋯ 菜单,再让「自定义」、流程开关、设计/运行按钮只留图标;轨道上的定制标记改为单个图标。
• 为什么改:实测 main 上 Interfaces 报表、对象切片和流程三个条目标题宽度为 0 px,⋯ 按钮落在右侧面板下面点不到;流程轨道选中的定制行只剩「已定制（ObjectStack Showcase）」。
• 风险与回滚:只动 app-shell 前端展示,无元数据与接口变化;没传 foldMenu 的标题行行为不变。回滚即 revert 本 PR。
• 先看:StudioItemHeader.tsx(折叠测量 useTitleRowFold 与菜单内容 StudioItemHeaderFoldedItems)、StudioItemTools.tsx(工具交出菜单形态)、StudioDesignSurface.tsx(三个标题行的 foldMenu)。
• 两分钟验证:浏览器窗口 1024 px,打开 Studio 界面支柱里一个已定制且有草稿的报表(右侧属性面板打开):标题显示完整名称,⋯ 可点开,菜单顶部依次是芯片、层次/引用关系/历史/审计日志/源码。
• 需要你做的:无,席位落地。

What changes

The item header's title row (StudioItemHeader) now keeps the item's name readable, measured on the header's own row, never the viewport:

• The readable width is the width of the title's first twelve visible characters (a text range over the title, the reader-only kind suffix excluded), capped at the whole name.
• Stage 1. When the room the row leaves the title is below that width, the identity chips (api-name chip and the pillar's chips: kind, override, pair) and the five item tools leave the row. They read at the top of the ⋯ menu: the chips as one menu entry whose choice keeps the menu open, then the tools as menu items with the same test ids as the buttons, opening the same sheets. StudioItemTools hands its menu form to the header through useStudioItemHeaderFold.
• Stage 2. If the title is still short, labelled actions show their icon alone: the Customize button, the flow ledger switch and definition switch, and the Interfaces Design/Run buttons. The label stays in the DOM as the accessible name (STUDIO_FOLD_LABEL, a group-data variant of sr-only keyed on the actions slot's data-fold attribute). Customize keeps the first slot of the actions.
• Last. Only then is the title cut, with its whole text in its tooltip as before (objectui#12897). The ⋯ trigger stays inside the row in every stage.
• Giving back. Each stage records the room it freed and is undone only once the title would keep its readable width without that room, so a stage never undoes itself the moment it is taken.
• Where folded things go is the pillar's call (foldMenu): 'pillar' for Interfaces and Automations, whose own ⋯ menus mount StudioItemHeaderFoldedItems; an object for the Data header (and for an Interfaces or flow item while its own menu is not drawn), where the header draws a ⋯ of its own while something is folded. A header without foldMenu (Access, the permission matrix) is unchanged.
• Rail mark. RailCustomizationMark draws CustomizationMark with compact: the glyph alone (violet pencil-ruler for customized, emerald plus for added), the text as its accessible name and the first line of its tooltip. The All metadata lists keep the text mark.

Files beyond the claim's first surface (StudioCustomizeControls.tsx, FlowLedgerSwitch.tsx, StudioItemTools.tsx, FlowItemMoreMenu.tsx) are covered by the seat's amendment record 6593712299.

For the cards that build on this header

• Studio: name where a customization is saved on the surface that made it, and stop listing the .custom pair as its own landing card #29691 (the "saved to" sentence): it goes on its own line directly under the title row and above the tab row, as a new optional slot of StudioItemHeader rendered between the title-row div and the nav tab row. Keep it out of the title row: the fold measures the title row's boxes only, so a line under it costs the title nothing.
• Studio: put Restore package original on the override mark, where the customization is named #29692 (Restore on the override chip, as a popover): when the row folds, the override chip is inside the single menu entry studio-item-header-folded-chips, which keeps the menu open when chosen, so a popover trigger on the chip still works from there. Restore package original also stays a ⋯ menu item in both the Interfaces and flow menus.

Tests

• StudioItemHeader.titleRowFold-12897.test.tsx (shared stubbed-geometry harness), two new describes: stage 1 at 330 px, the menu's contents and a tool firing its action, following the row both ways, a 470 px CONTROL that stays folded, a 632 px CONTROL with nothing folded, and a CONTROL header without foldMenu; then the order: stage 1 alone at 560 px, stage 2 at 420 px, the title cut last at 300 px with the ⋯ still there, unfolding in reverse, icon-only Customize and ledger switch keeping their labels as accessible names and firing the same handlers, and the chips as one menu entry.
• StudioDesignSurface.itemTools-28239.test.tsx: the real StudioItemTools folded into the header's ⋯; each of Layers, References, History, Audit and Source opens its sheet from the menu and reads the same door as its button.
• StudioDesignSurface.oneSurface-28572.test.tsx: the Interfaces rail's customized and added marks are glyph-only with their text as accessible name and tooltip lead.

Acceptance notes

• At 1024 px with the right panel open the Data object header did not need to fold: "Account (Success Overlay)" shows 13 characters beside its tools, above the 12-character floor, so the tools stay in the row.
• The Access set header has no foldMenu: it has no chips or tools to fold, and its name was whole before and after.

Verification

Live, on the showcase app (objectstack dev --seed-admin --fresh) with the Console on Vite, Chromium at 1024 x 768, zh-CN, right panel open. The report and the flow were customized, published, and edited again, so each header carries its kind chip, override chip, draft status, the five tools and ⋯. Before = this branch with the nine changed source files swapped back to origin/main; after = this branch.

Before, the three folding rows were wider than the row (scroll widths 643, 558 and 631 px for a 436 px row). After, the ⋯ menus list the folded chips entry, then Layers, References, History, Audit, Source, then the pillar's own items. The flow rail's selected customized row reads "Project Budget …" with the glyph mark. Screenshots and the raw readings are with the seat.

Generated by Claude Code