Context
PR #176 adds visible selected-node chrome for React Native Web and keeps Studio AppBar actions horizontal.
Native Studio selection itself is already implemented and was executed successfully on Android through the validated Surface → ZORA → Studio interaction-policy architecture:
- stationary Edit taps select the intended Runtime node;
- deepest-node and exactly-once selection work;
- movement, scrolling and drag do not create unintended selection;
- nested scrolling remains functional;
- Edit preserves authored layout, identity and private state;
- Preview restores authored behavior;
- unsupported native indicators are root-owned, layout-neutral and non-intercepting.
This issue is not about repairing native selection. It tracks the remaining visual authoring feature: rendering the same selected-node outline around supported Runtime nodes on iOS and Android.
Refs #156, #167, #175 and PR #176.
Problem
Studio knows the selected Runtime node ID on native, but the root selection overlay does not yet have a production geometry source for the actual rendered host of supported ZORA built-ins.
The layout-neutral per-node interaction recorder must not be used as the geometry source because it intentionally does not own the authored component's layout box. The current Studio provider helper can measure an authored native root when a component explicitly attaches it, but installed ZORA built-ins do not currently expose or consume that provider contract.
Consequently:
native stationary selection works
native selectedNodeId works
native AppBar contextual actions work
native selected-node outline missing for supported built-ins
Goal
Render clear, theme-aware, layout-neutral selected-node chrome for supported Runtime leaf, container and screen-root nodes on iOS and Android, using the same canonical Studio selection state and root-owned overlay as web.
Architecture requirements
- preserve the validated native stationary-selection and interaction-policy architecture;
- preserve dependency direction Surface → ZORA → Studio;
- do not make ZORA depend on Studio;
- do not add Studio-specific contracts to ZORA or Surface;
- do not mutate manifests or authored Runtime props merely to display selection;
- do not clone rendered components;
- do not introduce focusable or semantic per-node wrappers;
- do not add layout-changing native containers;
- do not use private React Native or Fabric internals;
- do not approximate child geometry with the full screen or an unrelated ancestor;
- keep selected chrome root-owned and
pointerEvents="none";
- keep unsupported-node indication visually distinct;
- keep Preview free of selected and unsupported authoring chrome;
- keep Runtime scrolling, nested scrolling, drag cancellation, identity and private state unchanged.
The implementation must establish a neutral host-measurement boundary owned by the appropriate lower-level package or by a Studio-owned renderer strategy without reversing package dependencies. Any Runtime public API change requires an explicit architecture decision and coordinated owning-package issue before implementation.
Required native behavior
In Edit mode, selected chrome must work for:
- a supported ZORA leaf such as Input or Text;
- a supported container such as Card, Panel, Stack or equivalent;
- a screen root selected through Select parent;
- nested supported nodes where the deepest selected node receives the outline;
- nodes inside normal and nested ScrollViews;
- responsive/flex/percentage/absolute layouts;
- geometry changes caused by content, disclosure, resize, orientation or layout updates;
- navigation and selection reconciliation.
The outline must:
- use Studio/ZORA theme semantics rather than a hard-coded product color;
- match the actual authored host rectangle within a documented tolerance;
- remain outside authored layout;
- never intercept input;
- move after scroll and layout changes;
- disappear immediately on Clear selection, invalid selection, navigation or Preview.
Validation
Android
Execute against a real generated Expo SDK 54 app on an emulator or device using released/linked production packages.
Prove:
- supported leaf, container and screen-root geometry;
- exact selected overlay alignment before and after scroll;
- nested-scroll movement and final settled geometry;
- responsive/layout updates;
- Select parent and Clear selection;
- navigation cleanup;
- Preview suppression;
- no pointer interception;
- no layout, identity, private-state, interaction-policy or scrolling regression;
- no native crash or ReactNativeJS error.
iOS
Execute the same scenarios on a simulator or device. If execution is unavailable, report the concrete blocker and do not claim full cross-platform completion.
Tests
Add executable tests for the real provider/host lifecycle rather than only manually registering fake measurement objects. Cover:
- actual Runtime rendering of a supported built-in through the production integration boundary;
- non-zero native host measurement;
- leaf, container and root projection into the root overlay;
- scroll/layout refresh;
- Clear, navigation and Preview cleanup;
- pointerEvents="none";
- coexistence with unsupported indicators;
- no duplicate measurement registrations or leaks.
Acceptance criteria
- Existing Android stationary selection remains green.
- A supported native ZORA leaf receives visible selected chrome.
- A supported native container receives correctly bounded selected chrome.
- Select parent can outline the screen root.
- The outline follows normal and nested scrolling.
- The outline follows layout and responsive changes.
- Clear, navigation and Preview remove stale chrome immediately.
- Unsupported indicators remain distinct and functional.
- The overlay does not alter layout, semantics or input handling.
- Android integration executes successfully.
- iOS integration executes successfully, or the issue remains open with the exact blocker documented.
- Package dependency direction remains valid and no Studio dependency is introduced into ZORA or Surface.
Scope relationship
PR #176 and #175 may complete web selected-node chrome independently. This issue remains the canonical follow-up for native selected-node chrome and must not be closed based only on web tests, geometry helper unit tests or manually registered fake native views.
Context
PR #176 adds visible selected-node chrome for React Native Web and keeps Studio AppBar actions horizontal.
Native Studio selection itself is already implemented and was executed successfully on Android through the validated Surface → ZORA → Studio interaction-policy architecture:
This issue is not about repairing native selection. It tracks the remaining visual authoring feature: rendering the same selected-node outline around supported Runtime nodes on iOS and Android.
Refs #156, #167, #175 and PR #176.
Problem
Studio knows the selected Runtime node ID on native, but the root selection overlay does not yet have a production geometry source for the actual rendered host of supported ZORA built-ins.
The layout-neutral per-node interaction recorder must not be used as the geometry source because it intentionally does not own the authored component's layout box. The current Studio provider helper can measure an authored native root when a component explicitly attaches it, but installed ZORA built-ins do not currently expose or consume that provider contract.
Consequently:
Goal
Render clear, theme-aware, layout-neutral selected-node chrome for supported Runtime leaf, container and screen-root nodes on iOS and Android, using the same canonical Studio selection state and root-owned overlay as web.
Architecture requirements
pointerEvents="none";The implementation must establish a neutral host-measurement boundary owned by the appropriate lower-level package or by a Studio-owned renderer strategy without reversing package dependencies. Any Runtime public API change requires an explicit architecture decision and coordinated owning-package issue before implementation.
Required native behavior
In Edit mode, selected chrome must work for:
The outline must:
Validation
Android
Execute against a real generated Expo SDK 54 app on an emulator or device using released/linked production packages.
Prove:
iOS
Execute the same scenarios on a simulator or device. If execution is unavailable, report the concrete blocker and do not claim full cross-platform completion.
Tests
Add executable tests for the real provider/host lifecycle rather than only manually registering fake measurement objects. Cover:
Acceptance criteria
Scope relationship
PR #176 and #175 may complete web selected-node chrome independently. This issue remains the canonical follow-up for native selected-node chrome and must not be closed based only on web tests, geometry helper unit tests or manually registered fake native views.