fix(editor): use compact mode switches across input controls

Draft
J1
2mo ago
+454-141

Summary

Replaces the ⇄ arrow toggle with a compact two-choice IconSwitch wherever an input flips between two modes, so the active mode is visible directly instead of implied by the arrow's tint. This restores #7527, which was reverted in #7550, with smaller geometry that keeps the existing label-to-input spacing.

Where it applies:

  • Canonical subblocks: Selector / Variable, through a shared CanonicalModeToggle
  • Start block file inputs: File uploader / JSON, still hidden when the uploader can't represent the value
  • Variables block boolean assignments: Selector / Variable
  • Knowledge connector fields: Selector / Manual input

IconSwitch is a new emcn component: two 16px inset squares in a 1px-padded frame with concentric corner radii. It is built on native radios, so keyboard navigation and mutual exclusion come from the browser, and each option's label shows as a tooltip.

On connector fields the switch sits in ChipModalField's titleActions slot (added on staging in #7761), outside the <label>, so clicking the field title doesn't change the mode. It is disabled during submission, and its accessible name uses the admin-mode title when one applies. The decorative HTTP method icon is unchanged.

Related: #7527, #7550

Type of Change

  • Bug fix
  • New feature
  • Breaking change
  • Documentation
  • Other: ___________

Testing

  • 106 tests pass across 7 files covering IconSwitch, ChipModal, the connector config fields and hook, subblocks, and Start file inputs.
  • New tests cover switching connector modes while keeping each mode's stored values, inert title clicks, and disabled switches during submission.
  • apps/sim and packages/emcn type checks pass. Biome and bun run check:api-validation pass.
  • Rebased onto staging on 2026-09-14. The connector field now uses staging's titleActions slot instead of adding a separate titleAdornment prop.
  • Browser visual review is still pending, so this stays a draft.

Reviewers: please check the switch's alignment in the connector modal's title row, which now uses staging's flex-wrap gap-2 layout.

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Screenshots/Videos

Pending visual review.

🤖 Generated with Claude Code