# Reusing Membrane’s mapping UI

**Recommendation:** use Membrane’s React controls inside the Halosight mapping workspace. Restyle the standard controls; build a small custom If / Then / Otherwise editor where the interaction needs to change.

## Keep from Membrane

- **Field and value picking:** ComboBox supports schema variables, tokens, supplied options, and asynchronous option factories. Search labels can include the field name and API name. [ComboBox](https://docs.getmembrane.com/docs/ways-to-use-membrane/sdk/react/combobox)
- **Schema-aware values and formulas:** DataInput accepts a schema, variables schema, value, and change callback. Use it for standard value editors, nested values, and less common formulas. [DataInput](https://docs.getmembrane.com/docs/ways-to-use-membrane/sdk/react/data-input)
- **Visual foundation:** restyle documented component parts with our spacing, typography, borders, focus states, and light/dark colors. Their React UI supports CSS overrides. [Styling](https://docs.getmembrane.com/docs/ways-to-use-membrane/sdk/react/ui-components)
- **Formula format:** preserve native expressions and nesting. Conditional branches, AND/OR, text composition, and JSONata already exist in Membrane’s expression system. [Formulas](https://docs.getmembrane.com/docs/references/formulas)

## Customize in Halosight

- **Workspace:** Import / Export / Both, compact mapping rows, AI suggestions, import-only custom-field creation, preview, and one final Review / Apply.
- **Closing an editor:** keep local edits as they happen. A chevron or Escape collapses it; Undo/Revert is separate. Collapsing never applies a remote configuration.
- **Conditions:** keep If, Then, and Otherwise visible. Show Match all (AND) / Match any (OR). Edit the field, operator, and comparison value in place.
- **Nested output:** expand a text or formula editor beneath Then or Otherwise. Reuse field/value controls without replacing the parent condition.
- **Search:** open directly at the edited value, search names and API names, preserve keyboard focus, and close only the chooser after selection.

## What styling alone cannot fix

- The published React package **0.29.2** has internal conditional components, but its root exports do not expose the formula-component replacement provider. Avoid relying on private deep imports.
- Its exported FilterInput uses an internal condition renderer with explicit AND handling, but no explicit OR editing branch. It is not a complete replacement for the proposed AND/OR editor.
- Therefore, use a custom conditional layout that reads/writes native Membrane expressions, with supported controls inside it. Reusing the existing full conditional editor would need a supported vendor extension point for this degree of layout change.
- These findings come from the [published package](https://www.npmjs.com/package/@membranehq/react/v/0.29.2), checked October 28, 2026. The relevant public exports, FilterInput, Condition, and Case components were inspected. This is an implementation recommendation, not a completed integration.

## Small implementation check before committing

- Confirm a round trip of existing formulas, including unsupported GUI expressions that must remain intact.
- Test one import and one export row with nested text inside a condition, AND/OR, JSONata, collapse/reopen, and a sample result.
- Reproduce the reported search issue before calling it fixed. Check typing, arrow keys, Enter/Escape, no results, stale asynchronous responses, and nested popovers. Membrane documents FloatingPortalBoundary for floating controls inside custom dialogs. [Portal guidance](https://docs.getmembrane.com/docs/ways-to-use-membrane/sdk/react/portal-boundary)
- Align package versions deliberately: this checkout currently uses JavaScript SDK **0.15.4**; the React package reviewed depends on SDK **0.29.2**. Validate compatibility before adding/upgrading packages.
- Keep SDK resource hooks behind the existing application data boundary. The reviewed React package brings its own SWR dependency, while this app’s hook convention excludes SWR; choose component-only usage or explicitly resolve that convention during implementation.

The clickable v4 prototype demonstrates the proposed interaction with synthetic data. It does not embed the Membrane SDK or save to a CRM.