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

[j15z]

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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
docs	Ready	Preview	Sep 14, 2026 8:15pm UTC

[j15z]

Superseded by #7825.