fix(app-shell): the Studio read-only link at a tab row's end folds to its icon instead of being cut to "Rea" (objectui#12707)

[objectstack-fleet]

Fixes #12707
Clause-②: no

What changed

Target 1: the read-only chip in a tab row. Measured on main 80863ad at 1024 px (HotCRM, Automations, Enroll Members in Campaign): the flow's tab row is 436 px wide and the full "Read-only · Customize with an overlay" link is 254 px, so the row's scrollWidth is 636 and only 54 px of the link shows, which is the icon and "Rea". The link was never squeezed; it overflowed the row's sideways scroll.

• StudioItemHeader now tells the children of its tab row which row they sit in, through a React context; no prop was added.
• useStudioTabRowFold, in the same file, measures that row: the tabs' right edge, plus the gap and the slot's padding, plus the chip's full width, against the row's own clientWidth. It re-measures on every render and from a ResizeObserver, never by viewport or breakpoint. The chip unfolds as soon as the row has room again.
• StudioReadOnlyLink (internal) uses the hook. Folded, it is a 28 px glyph-only chip: its text stays in the DOM as sr-only, so its accessible name is the same in both forms, its title (the existing pillar sentence) stays its tooltip, and its href is unchanged. data-testid="studio-readonly-link" and the package chip's studio-pkg-readonly are untouched. No i18n key was added.
• One rule, one place: both tab-row placements fold through it. Automations is the flow tab row. Access is the permission-set tab row, through PermissionMatrixEditor's chrome.chips; that file is unchanged. The placements in the Data and Interfaces title rows are not in a tab row and never fold; there the link is whole and the title truncates first.
• The tab labels keep whitespace-nowrap shrink-0, and the row keeps its sideways scroll and edge fades (objectui#12611).

Target 2: the Unpublished draft chip in Data and Interfaces. Measured first, as the ruling asks: in a writable package with a draft object, at a 560 px header row the chip is 122 px, reads "Unpublished draft" whole, and sits inside the row. objectui#12611 already covers it, so nothing changed there; a CONTROL test pins it.

Deviations

• The accessible name in both forms is the link's own existing label (engine.studio.pkg.readonlyLink). The tooltip is the placement's existing title (engine.studio.pkg.readonlyHint on Automations). No new key; the name does not change between forms.
• New export useStudioTabRowFold from StudioItemHeader.tsx, a module the package entry does not re-export.

Screenshots (HotCRM, read-only under objectstack dev)

DOM read at capture:

• Automations, Enroll Members in Campaign, 1024 px, light: the link is folded, its visible text is the layers glyph only, and its accessible name is "Read-only · Customize with an overlay". Title: "Read-only package — switch to or create a writable package to edit." Row 436 px, scrollWidth 436, link 28 px, inside the row. Tabs: Canvas · Variables · Runs · Problems 1 · Debug, all whole, one line. https://github.com/objectstack-ai/objectui/blob/6012be82d1f938b683d7f7faaff15990f77d5baa/docs/design/findings/12707/automations-enroll-1024-light.png?raw=true
• The same at 1024 px, dark: same readings. https://github.com/objectstack-ai/objectui/blob/6012be82d1f938b683d7f7faaff15990f77d5baa/docs/design/findings/12707/automations-enroll-1024-dark.png?raw=true
• The same at 1280 px, light: the link is whole and its rendered text is "Read-only · Customize with an overlay". Row 692 px, link 254 px, inside the row. Tabs as above, whole. https://github.com/objectstack-ai/objectui/blob/6012be82d1f938b683d7f7faaff15990f77d5baa/docs/design/findings/12707/automations-enroll-1280-light.png?raw=true
• Data, Account object, 1024 px, light: the link sits in the title row, whole, with rendered text "Read-only · Customize with an overlay". The visible tabs are Records · Form · Advanced (the Data tab row's own fold), whole. https://github.com/objectstack-ai/objectui/blob/6012be82d1f938b683d7f7faaff15990f77d5baa/docs/design/findings/12707/data-object-1024-light.png?raw=true
• Target 2 measurement, a writable package's draft object at a 560 px row, light: the status chip's rendered text is "Unpublished draft" (122 px, inside the row). https://github.com/objectstack-ai/objectui/blob/6012be82d1f938b683d7f7faaff15990f77d5baa/docs/design/findings/12707/data-draft-object-row560-light.png?raw=true

Test evidence (head 78306de; this PR's head 9dc644c is the same tree as one commit)

• StudioDesignSurface.readOnlyChipFold-12707.test.tsx, 7 passed. It runs the real AutomationsPillar with a flow open, read-only. At 800 px the link is whole. At 560 px it is glyph-only, with the accessible name, the title and the same href. It folds and unfolds as the row resizes. The tab labels stay nowrap and the row still scrolls. CONTROLs: the chip in a title row never folds; the Unpublished draft chip keeps its Studio at 1024 px: the read-only app chip, the flow item header and the Access tabs truncate or wrap #12611 fold.
• Ablations, each red and then restored with an empty git diff HEAD: the fold never fires (3 failed); the label is never sr-only (1 failed); nowrap removed from the tab token (1 failed); the tab-row context removed (3 failed).
• pnpm --filter @object-ui/app-shell test, in full: exit 0, Test Files 1484 passed and 1 skipped, Tests 13945 passed and 9 skipped.
• pnpm --filter @object-ui/app-shell type-check: exit 0. build: exit 0. eslint on the touched files: exit 0, 0 errors.
• pnpm check:i18n-keys, pnpm check:i18n-drift, node scripts/check-changeset-presence.mjs, pnpm check:new-line-citations: all exit 0.

Acceptance notes

• Not in this PR: the Data title row's title truncates to "Service T…" at a 560 px row when the object's api name is long, while the api-name chip stays whole (see the last screenshot). This is reported to the seat; Studio flow item header at 1024 px: the Read-only chip folds before it is cut to "Rea" #12707 does not cover it.

---

Generated by Claude Code

🤖 Generated with Claude Code

https://claude.ai/code/session_01Umh5XoHZFaBP7A8Kc2g2Jc

[objectstack-fleet]

席位核对 — ACCEPT · objectui#12707 · head 9dc644c · 2026-10-16T20:59Z

Seat domain:ui#4, session session_01SJn1GEkrbbBQkhGC26wEDw. Checked against GitHub and the diff, not against the report (relayed on the card, 6224567677). The seat opened this PR from the dev's drafts (degraded channel), and the body is the dev's verbatim, apart from the test-evidence heading, which now names this head.

Checklist

• Form:

  • Draft → main, assignee os-sales.
  • The first line is Fixes #12707, and the second is Clause-②: no, as the claim declares (amended claim 6224546508, branch only).
  • The head 9dc644c is one commit with the model-free trailer pair. git diff 78306de 9dc644c is empty: the same tree the dev tested, re-committed because the original branch's three commits carried a trailer naming the model and the queue's squash keeps co-author trailers. The original branch and the evidence branch are untouched.
  • git merge-tree against current main 4857cd2 is clean. That main carries objectui#12688's rail labels (PR fix(app-shell): the Studio Interfaces rail draws the server's localized nav labels (objectui#12688) #12766) in the same file, in another region. 4 files, +377 / −5, no PNG.

• Rulings, as bound:

  • The chip in a tab row folds to its icon when the row cannot hold it. Folded, it is a 28 px glyph chip. Its text stays in the DOM as sr-only, so the accessible name carries the word, and its title stays the tooltip. The tab labels keep whitespace-nowrap shrink-0, and the row keeps its sideways scroll (objectui#12611).
  • The fold is measured from the row's own width: useStudioTabRowFold measures the tabs' right edge, the gap, the slot padding and the chip's full width against the row's clientWidth, on every render and from a ResizeObserver. No breakpoint.
  • One rule, one place: the tab row hands its children a context (no prop), and the one hook decides. Both tab-row placements fold through it: Automations' flow tab row, and Access's permission-set tab row through PermissionMatrixEditor's chrome.chips, whose file is untouched. The Data and Interfaces placements sit in the title row and never fold.
  • No new prop on an exported component, no new i18n key. useStudioTabRowFold is a new export of StudioItemHeader.tsx, which @object-ui/app-shell's entry does not re-export (index.ts exports only from StudioDesignSurface.js, studio-canvas-preview.js, BuilderLanding.js and studioScope.js in that folder). StudioReadOnlyLink stays internal.
  • What the chip does is unchanged: the same href, the same data-testid="studio-readonly-link", and the package chip's studio-pkg-readonly is untouched.
  • Target 2 (the Unpublished draft chip) was measured first and already holds: 122 px, whole and inside a 560 px row. Nothing changed there; a CONTROL pins it.

• Mechanism assumptions: all three held. One correction: the link was not squeezed; it overflowed the row's sideways scroll (row 436 px, link 254 px, scrollWidth 636), which is why it read "Rea".

• Screenshots, read by the seat (never-merged claude/issue-12707-evidence at 6012be8), HotCRM read-only:

  • Automations › Enroll Members in Campaign, 1024 px, light and dark: Canvas · Variables · Runs · Problems 1 · Debug, all whole, and the chip folded to its layers icon at the row's end;
  • the same at 1280 px, light: "Read-only · Customize with an overlay" whole beside the tabs, and the meta slot back;
  • Data › Account, 1024 px, light: the link whole in the title row;
  • a writable package's draft object at a 560 px row: the Unpublished draft chip whole.

  Sent to the maintainer at 2026-10-16T20:59Z.

• Tests:

  • New StudioDesignSurface.readOnlyChipFold-12707.test.tsx (7 cases) on the real AutomationsPillar: whole at 800 px; at 560 px glyph-only, with the accessible name, the title and the same href; it folds and unfolds as the row resizes; the tabs stay nowrap and the row scrolls. CONTROLs: the chip in a title row never folds, and the Unpublished draft chip keeps its objectui#12611 fold.
  • Four ablations, each red, each restored to an empty git diff HEAD.
  • 8 neighbour pin files, 53 tests passed.
  • pnpm --filter @object-ui/app-shell test in full on the tested tree: 1,484 files, 13,945 tests passed, 0 failed.
  • type-check, build (dist completeness), eslint on touched files (0 errors; one new react-refresh/only-export-components warning on the exported hook, dev hot reload only), the i18n checks, line citations and changeset presence: all exit 0.

• Changeset: @object-ui/app-shell, user-facing prose.

• Contract faces: none. Clause-②: no holds, and no contract review is owed.

• CI: running at this record. Landing waits for green.

Rulings

1. The folded chip's accessible name (open question 1): A, as built. The name is the link's existing label, engine.studio.pkg.readonlyLink ("Read-only · Customize with an overlay"), in both forms, and the tooltip is the placement's existing sentence. The ruling's intent was that the word reaches the tooltip and the accessible name without a new key, and it does. A form-dependent aria-label would change the name between forms and drop where the link goes.
2. The Access placement outside the claimed file surface: accepted. It folds through the shared context with no edit to PermissionMatrixEditor.tsx, which is the "one rule, one place" the ruling asked for.
3. The contract conflict: as dispatched. The relay is refused from the dev's container, so the seat opened the PR and relayed the report.
4. Out of scope, filed: a long api-name chip takes the Data title's room ("Service T…" at about 100 px against objectui#12611's 200 px floor). It is Studio item header: a long api-name chip takes the title's room, so a Data item's title is cut to "Service T…" (about 100 px) against objectui#12611's 200 px floor #12791, for triage.

Implemented-by: cloud session session_01Umh5XoHZFaBP7A8Kc2g2Jc, branch claude/issue-12707-studio-readonly-chip-fold-v2
Reviewed-by: seat domain:ui#4, session_01SJn1GEkrbbBQkhGC26wEDw

---

Generated by Claude Code

[github-actions]

✅ Console Performance Budget

Metric	Value	Budget
Eager closure (gzip, 74 chunks)	3128.4 KB	3744.1 KB
Main entry chunk (gzip)	75.6 KB	350 KB
Entry file	index-nm_4mtox.js	—
Status	PASS	—

The eager closure is every chunk the entry reaches through static imports — what the browser fetches and parses before the app renders. The entry chunk on its own is a small fraction of it.

---

📦 Bundle Size Report

Package	Size	Gzipped
app-shell (consoleActionDispatch.js)	0.20KB	0.19KB
app-shell (index.js)	21.42KB	7.85KB
app-shell (runtime-config.js)	22.59KB	7.89KB
app-shell (types.js)	0.01KB	0.04KB
app-shell (urlParams.js)	10.11KB	3.87KB
auth (ActiveOrganizationStorage.js)	27.95KB	10.04KB
auth (AuthContext.js)	0.31KB	0.24KB
auth (AuthGuard.js)	2.07KB	1.00KB
auth (AuthProvider.js)	41.15KB	10.86KB
auth (AuthShell.js)	3.49KB	1.40KB
auth (ForgotPasswordForm.js)	12.21KB	3.45KB
auth (LoginForm.js)	20.67KB	6.12KB
auth (PreviewBanner.js)	0.90KB	0.50KB
auth (RegisterForm.js)	6.72KB	2.24KB
auth (SocialSignInButtons.js)	9.74KB	3.94KB
auth (UserMenu.js)	3.39KB	1.21KB
auth (auth-gate-events.js)	1.62KB	0.83KB
auth (authStyles.js)	5.27KB	1.86KB
auth (createAuthClient.js)	41.19KB	11.12KB
auth (createAuthenticatedFetch.js)	8.54KB	3.46KB
auth (index.js)	3.63KB	1.64KB
auth (invitation-status.js)	1.22KB	0.70KB
auth (org-roles.js)	6.66KB	2.78KB
auth (phone-identifier.js)	1.11KB	0.66KB
auth (types.js)	0.59KB	0.35KB
auth (useAuth.js)	5.30KB	1.02KB
auth (useWorkspaceAdminStatus.js)	11.08KB	4.58KB
collaboration (CommentThread.js)	27.26KB	8.03KB
collaboration (LiveCursors.js)	3.17KB	1.27KB
collaboration (PresenceAvatars.js)	6.28KB	2.60KB
collaboration (PresenceProvider.js)	2.79KB	1.13KB
collaboration (commentAuthorship.js)	1.39KB	0.78KB
collaboration (index.js)	1.93KB	0.85KB
collaboration (useCollaborationTranslation.js)	6.50KB	2.52KB
collaboration (useCommentSearch.js)	1.98KB	0.88KB
collaboration (useConflictResolution.js)	7.75KB	1.86KB
collaboration (useMentionNotifications.js)	1.81KB	0.68KB
collaboration (usePresence.js)	6.33KB	1.84KB
collaboration (useRealtimeSubscription.js)	7.91KB	2.01KB
components (index.js)	602.20KB	145.57KB
core (index.js)	10.18KB	4.04KB
create-plugin (index.js)	27.94KB	9.51KB
data-objectstack (index.js)	248.96KB	69.45KB
fields (index.js)	291.36KB	74.46KB
i18n (LocalizationContext.js)	2.92KB	1.42KB
i18n (builtinAggregateLabels.js)	0.86KB	0.49KB
i18n (currency.js)	2.59KB	1.22KB
i18n (fallbackInterpolation.js)	6.25KB	2.77KB
i18n (i18n.js)	8.87KB	3.64KB
i18n (index.js)	5.52KB	2.39KB
i18n (pickLocalized.js)	9.86KB	3.95KB
i18n (provider.js)	39.35KB	12.88KB
i18n (translateFn.js)	0.20KB	0.18KB
i18n (useDisplayLocale.js)	3.52KB	1.76KB
i18n (useObjectLabel.js)	36.87KB	9.88KB
i18n (useSafeTranslation.js)	7.14KB	2.92KB
layout (index.js)	40.67KB	11.85KB
mobile (MobileProvider.js)	0.92KB	0.49KB
mobile (ResponsiveContainer.js)	0.94KB	0.38KB
mobile (breakpoints.js)	1.51KB	0.70KB
mobile (createOfflineDataSource.js)	5.61KB	1.75KB
mobile (index.js)	1.99KB	0.87KB
mobile (offlineQueue.js)	3.91KB	1.35KB
mobile (pwa.js)	0.97KB	0.49KB
mobile (serviceWorker.js)	1.48KB	0.62KB
mobile (serviceWorkerSource.js)	3.41KB	1.48KB
mobile (useBreakpoint.js)	1.54KB	0.65KB
mobile (useGesture.js)	6.96KB	1.98KB
mobile (useOfflineSync.js)	1.99KB	0.72KB
mobile (usePullToRefresh.js)	6.62KB	2.45KB
mobile (useResponsive.js)	0.72KB	0.42KB
mobile (useSpecGesture.js)	5.52KB	2.10KB
mobile (useTouchTarget.js)	1.01KB	0.54KB
permissions (MePermissionsProvider.js)	15.35KB	5.51KB
permissions (PermissionContext.js)	0.31KB	0.25KB
permissions (PermissionGuard.js)	0.89KB	0.45KB
permissions (PermissionProvider.js)	6.82KB	2.38KB
permissions (discardProofCache.js)	1.04KB	0.55KB
permissions (evaluator.js)	8.33KB	3.07KB
permissions (index.js)	0.93KB	0.41KB
permissions (store.js)	0.91KB	0.42KB
permissions (useFieldPermissions.js)	1.28KB	0.53KB
permissions (usePermissions.js)	4.83KB	2.27KB
plugin-ai (index.js)	16.04KB	3.92KB
plugin-calendar (index.js)	54.94KB	16.05KB
plugin-charts (index.js)	84.97KB	23.36KB
plugin-chatbot (index.js)	201.89KB	48.13KB
plugin-dashboard (index.js)	146.23KB	39.59KB
plugin-designer (index.js)	233.95KB	50.08KB
plugin-detail (index.js)	263.88KB	69.75KB
plugin-editor (index.js)	2.23KB	1.05KB
plugin-form (index.js)	180.28KB	46.60KB
plugin-gantt (index.js)	178.36KB	45.08KB
plugin-grid (index.js)	270.84KB	75.07KB
plugin-kanban (index.js)	59.42KB	18.48KB
plugin-list (index.js)	132.61KB	34.08KB
plugin-map (index.js)	27.07KB	8.96KB
plugin-markdown (index.js)	13.88KB	4.80KB
plugin-report (index.js)	46.66KB	13.13KB
plugin-timeline (index.js)	39.21KB	11.85KB
plugin-tree (index.js)	15.07KB	5.33KB
plugin-view (index.js)	94.68KB	24.36KB
providers (DataSourceProvider.js)	0.75KB	0.39KB
providers (MetadataProvider.js)	1.37KB	0.59KB
providers (ThemeProvider.js)	1.90KB	0.85KB
providers (UploadProvider.js)	12.07KB	3.68KB
providers (index.js)	0.45KB	0.23KB
providers (types.js)	0.01KB	0.04KB
react-runtime (index.js)	5.62KB	2.34KB
react (LazyPluginLoader.js)	4.47KB	1.63KB
react (SchemaRenderer.js)	120.23KB	39.46KB
react (data-invalidation.js)	5.05KB	2.08KB
react (index.js)	4.50KB	2.06KB
react (schema-input.js)	4.31KB	2.07KB
react (spec-input.js)	0.20KB	0.18KB
sdui-parser (body-dialect.js)	4.50KB	1.99KB
sdui-parser (codegen.js)	9.45KB	3.76KB
sdui-parser (dashboard-widget-options.js)	3.07KB	1.30KB
sdui-parser (index.js)	7.30KB	3.12KB
sdui-parser (input-type.js)	2.84KB	1.40KB
sdui-parser (parse.js)	25.28KB	7.81KB
sdui-parser (provenance.js)	3.84KB	1.90KB
sdui-parser (types.js)	0.29KB	0.24KB
sdui-parser (validate.js)	23.87KB	7.83KB
types (ai.js)	4.39KB	2.17KB
types (api-types.js)	0.20KB	0.18KB
types (app.js)	4.12KB	1.61KB
types (authoring-nodes.js)	0.20KB	0.19KB
types (base.js)	0.20KB	0.18KB
types (blocks.js)	0.20KB	0.18KB
types (cloud.js)	0.20KB	0.18KB
types (complex.js)	4.44KB	2.07KB
types (crud.js)	0.20KB	0.18KB
types (dashboard-filter-alias.js)	6.23KB	2.74KB
types (dashboard-widget-layout.js)	2.06KB	0.96KB
types (data-display.js)	3.75KB	1.85KB
types (data-protocol.js)	0.20KB	0.19KB
types (data.js)	0.20KB	0.18KB
types (designer.js)	1.85KB	0.85KB
types (disclosure.js)	0.20KB	0.18KB
types (error-code.js)	1.54KB	0.88KB
types (expression.js)	0.20KB	0.18KB
types (feedback.js)	0.20KB	0.18KB
types (field-types.js)	1.13KB	0.65KB
types (form.js)	0.20KB	0.18KB
types (http-inflight.js)	8.87KB	3.73KB
types (http-retry.js)	4.32KB	2.02KB
types (icon-key-migration.js)	4.26KB	1.63KB
types (index.js)	5.78KB	2.70KB
types (layout.js)	0.20KB	0.18KB
types (managed-by.js)	0.19KB	0.18KB
types (mobile.js)	5.00KB	2.39KB
types (navigation.js)	0.20KB	0.18KB
types (node-slots.js)	7.18KB	2.34KB
types (objectql.js)	0.20KB	0.18KB
types (overlay.js)	0.20KB	0.18KB
types (permissions.js)	2.52KB	1.31KB
types (plugin-scope.js)	0.20KB	0.18KB
types (record-approval-decision.js)	0.20KB	0.20KB
types (record-components.js)	0.20KB	0.19KB
types (record-panels.js)	0.20KB	0.19KB
types (record-semantics.js)	1.28KB	0.67KB
types (registry.js)	0.20KB	0.18KB
types (reports.js)	0.20KB	0.18KB
types (select-option.js)	0.20KB	0.19KB
types (spec-report.js)	4.99KB	1.96KB
types (spec-ui-namespace.js)	0.20KB	0.19KB
types (strict-authoring-face.js)	19.93KB	7.26KB
types (system-fields.js)	3.33KB	1.54KB
types (theme.js)	6.28KB	2.87KB
types (ui-action.js)	8.48KB	3.50KB
types (views.js)	0.20KB	0.18KB
types (widget.js)	0.20KB	0.18KB

Size Limits

• ✅ Core packages should be < 50KB gzipped
• ✅ Component packages should be < 100KB gzipped
• ⚠️ Plugin packages should be < 150KB gzipped

[objectstack-fleet]

Landing · head 9dc644c · 2026-10-16T21:10Z

• Head unchanged since the ACCEPT: 9dc644c.
• Checks on 9dc644c: 36 runs, 33 green and 3 expected skips, none red. That includes Live E2E (informational), Build & E2E, all 16 test shards, Type Check, Lint, Changeset Bump Policy and Bundle Analysis at 3,128.4 KB against the 3,744.1 KB ceiling.
• Merge state: clean against main 94b2489. The five commits since the ACCEPT's 4857cd2 (objectui#12672, date / datetime list filters still draw the native input: the platform picker must be reachable from FilterBuilder and plugin-view FilterUI without a cycle (half 2 of objectui#12664) #12743, print page: the record approval strip ("Recall approval", the approval status badge, "Approvals — 0 of 1") prints on paper — DetailView does not read the print context #12751, Record page inline edit of a datetime field drops its time: InlineFieldInput edits it through a date-only control and saves local midnight (the last inline editor still on the native date input) #12759, metadata designer: a report's or dataset's Name drops every underscore while it is typed (qavrf_rev reads qavrfrev), so a namespaced report or dataset cannot be named by typing #12746) touch nothing under views/studio-design/.
• Commit message: the head's one commit carries only the model-free trailer pair, so the squash adds no model name to main.
• Contract review: none owed. Clause-②: no; nothing new on the @object-ui/app-shell entry.
• Action: mark it ready for review and enable auto-merge through the merge queue. Fixes #12707 closes the card on merge.

---

Generated by Claude Code