Studio inspector aside: one 300 px panel shape (kind eyebrow, title, api name, close; sectioned body; "Edits save as drafts" footer) for field, column, flow-node, nav-item and widget properties #12449

Source

Epic #12446, decisions 1 and 3. Measured on objectui main a2225f91: the right-hand panels differ per pillar — the Automations aside is w-72 with a sticky 13 px "Configuration" header; the Interfaces inspector is a tab ("Properties") beside "Canvas" with a w-9 icon strip; the Data column inspector and field properties open in their own shapes; empty states are centered sentences with a cursor glyph.

Target

One shared aside shell (StudioInspector.tsx) that every pillar mounts at the right of its content body:

• Width 300 px, white, left border, full height of the content body; collapsible by a header toggle button (panel-right glyph, aria-pressed) that each item header row shows at its right.
• Header, 14 px top / 12 px bottom padding, bottom border: an 11 px uppercase eyebrow naming the kind ("Field", "Column", "Node · Decision", "Nav item · Page", "Widget · Metric"), the title at 15 px / 600, the api name or id as 11 px mono muted, and a 28 px close button at the right.
• Body, 16 px padding, 14 px gaps: labelled rows (12 px / 500 labels, 32 px inputs, 36 by 20 px switches), 1 px dividers, 11 px uppercase section eyebrows.
• Footer, pinned to the bottom, 12 px muted: "Edits save as drafts. Publish the package to apply them." (one new i18n key; the read-only package renders the read-only card's sentence instead).
• Empty state: the eyebrow reads the kind the pillar selects ("Node", "Widget"), the body shows one 13 px muted sentence ("Click a node on the canvas to configure it.").

The Interfaces "Canvas / Properties" tab pair becomes Canvas as the only content tab plus this aside; on rows narrower than 1000 px the aside folds into the existing sheet (the objectui#11795 narrow-row behavior, AutomationsPillar.narrowRow-11795.test.tsx) for every pillar, not only Automations.

File surface

New packages/app-shell/src/views/studio-design/StudioInspector.tsx; StudioDesignSurface.tsx (the Automations aside, the Interfaces inspector and its w-9 strip, the Data column/field inspector mounts, StudioNavItemInspector header), ObjectListViewInspector.tsx (header only), packages/app-shell/src/views/metadata-admin/i18n.ts (the footer sentence).

Acceptance

1. All four pillars mount the aside at 300 px with the header's eyebrow / title / close at identical y offsets (screenshot of four side by side).
2. The fold-to-sheet behavior works in all four pillars below 1000 px, pinned by extending the narrow-row test to one more pillar.
3. StudioDesignSurface.navItemInspector, navItemInspectorLabel-11196, navItemInspectorLabelMaps-11148, canvasMode, interfacePolish, DataPillar.inspectorBelongsToView-11781, ObjectListViewInspector.* stay green or are updated for the moved header, each ablated once.
4. Before/after screenshots, light and dark.

Constraints

• Tailwind utilities and theme tokens only; no inline style.
• Existing data-testids and i18n keys stay.
• Gates: pnpm --filter @object-ui/app-shell test, lint, build.
• Depended on by the Data, Form, Automations, Interfaces and Access cards; lands with or right after the rail card.

Parent: #12446