feat: Widget Configurator Revamp

[Danziger]

Summary

This PR takes over #7261 and further refines the widget configurator.

It includes the following breaking changes for the widget SDKs (lib and react):

• Dynamic height: the SDK sets --dynamicHeight instead of iframe.style.height. Use iframeStyle.height: 'var(--dynamicHeight)' for auto-resize. A fixed height (e.g. 640px) will not grow or shrink with content.
• Sizing moved to iframeStyle: top-level width, height, and maxHeight are deprecated (still supported with warnings). With neither those nor iframeStyle, the iframe no longer defaults to 450×640.
• Theme styling: palette keys boxShadow, widgetPadding, and widgetBorderRadius are removed. Use iframeStyle, bodyWrapperStyle, or cardStyle instead.

Features:

• It's now possible to select different SDK versions. The option can be found in the Advanced section. However, note that right now the different options in the configurator will NOT be disabled based on the selected SDK's capability. That, if needed, could be addressed later.
• Added smoother draggable sidebar resizing. Note the width of the sidebar content is capped. This way you can use the resizing to make the preview area super narrow for testing, while keeping the sidebar width usable.
• Added richer help tooltips and better empty/select states.
• Simplified and improved theme picker (Light/Dark, no auto except for initial load) that's NOT synced with the app theme.
• All data is now persisted in localStorage, not just the palettes. There's a button at the bottom of the sidebar to reset it.
• Improved auto-resizing for the widget/iframe:
  • The SDK will no longer modify the iframe style to set its height. Instead, if will set a CSS variable. Using it or not is the integrator's prerogative.
  • Add a new option to disable/hide scrollbars inside the app. This is useful when the integrator allows the iframe's height to grow unconstrained. Otherwise, in OSs that have fixed-width scrollbars (like Windows), every time the content grows and the iframe needs to be resized, the scrollbars will be visible while the transition is taking place, and because they take horizontal space, the whole content will shift momentarily.
• The additional styling fields (e.g. width, background, border radius, shadow, etc.) have been removed. Instead, under the Layout section, 3 different JSON fields have been added where the integrator can inject custom style properties (no selectors) in 3 different elements within the app. A few presets buttons are offered as well, which simply pre-populate these JSON fields with some values the integrator can further modify.
• Add dedicated field for appCode and highlight that in the code snippet preview as well.
• Automatically set baseUrl based on widget configurator env, and offer some presets/shortcuts for local, dev and prod.
• Add a visual environment indicator in the sidebar header.
• Add spinner to indicate when the widget is loading.
• The reload button now has a dedicated state to indicate the widget is being updated but not re-mounted.

Fixes (all from original PR):

• replaced best-effort iframe resize behavior with a more robust ResizeObserver + window.resize flow.
• fixed the resize loop / runaway height growth bug.
• removed the extra iframe height threshold that was causing phantom bottom space.
• removed widget-mode shell spacing issues that caused “paper inside paper” gaps:
  • no forced widget min-height
  • no widget-mode top margin spacer
  • no extra widget-mode flex growth
• disabled Jotai devtools in injected widget mode so dev-only UI no longer affects measured height

Architecture / Performance:

• Reorganized the sidebar into accordion sections, now optimized for better form performance (only the expanded accordion's content is rendered, and only 1 accordion can be expanded at a time). It also syncs the expanded accordion with the URL hash.
• Most imputs fields are implemented building on top of either BaseTextInput or SelectInput, to remove code duplication and enforce consistent look and feel and behaviour among them.
• Form values/state management is done with a global onChange handler in most cases, no need to define individual change handlers for each input field.

Looks:

• Adopted Explorer's theme/palette and de-MaterialUI-zes the app in terms of looks.
• Regines the changes in the original prototype PR to make better use of the space available in the sidebar.
• Larger code preview panel.
• Tightened control typography to feel less oversized.
• Added branded configurator header using the shared CoW logo + Feixen styling.

Form improvements:

• Inputs components have been implemented in a reusable way. Now, all text (text, number) select/dropdown-based (single, multi, color picker) inputs look and behaveve consistently.
• Added better multi-line auto-formatted JSON fields.
• Replaced many verbose yes/no radio groups with compact switches.

I've moved any additional potential improvements/changes/ideas to https://linear.app/cowswap/issue/FE-153/widget-future-improvements to avoid blocking this PR.

Light:

Dark:

Video:

Video.Project.4.mp4

To Test

1. Open the widget configurator with pnpm start:widget

• Only Basics is expanded by default
• The sidebar sections are grouped and ordered more clearly
• Binary settings render as switches instead of large radio pairs
• The drawer can be resized smoothly by dragging
• The hide/open drawer buttons look aligned and sized correctly
• Tooltips open cleanly and are not clipped by the drawer

2. Check header and general styling

• The configurator header shows the shared CoW icon + CoW Widget
• The header text uses the Feixen styling and matches the icon color in both light and dark mode
• Form labels, placeholders, and option labels feel smaller / tighter (1.4rem) and more consistent
• Theme select shows icons for Auto / Light / Dark in both the field and dropdown

3. Check the Appearance section

• More Colors / Reset Colors to Default layout looks correct
• Widget shadow supports Default, None, and Custom
• Widget padding supports Default and Custom
• iFrame width, iFrame background color, and iFrame border radius controls are visible and understandable
• Widget corner radius updates the inner widget card styling
• The live preview reflects appearance changes correctly

4. Check preview / embed behavior

• Generated embed code includes the new supported iFrame / widget appearance params where applicable
• The preview matches the selected appearance settings
• Locale / theme / widget hooks empty states are vertically aligned
• Widget hooks no longer shows overlapping label / placeholder text

5. Check widget sizing / autosize behavior

• The widget no longer grows indefinitely in the configurator
• The iframe no longer shows the previous phantom bottom gap / extra whitespace
• Widget mode no longer shows the old shell spacing / padding gap around the card
• Changing appearance params still produces a correctly sized iframe
• Embedded widget height follows content changes without stale sizing or clipping

6. Merge conflicts with https://github.com/cowprotocol/cowswap/pull/7581/changes were resolved in dbecc9d, so that PR should be retested here.

Background

• Original PR: [DRAFT] feat(widget-configurator): enhance configurator with new controls and… #7261 (branch is the same).
• @fairlighteth's review on Slack: https://nomevlabs.slack.com/archives/C0361CDG8GP/p1780395953819719

[Danziger]

What are the 2 versions of the sdk on each option?

The versions of the react sdk and lib, respectively. I'm pushing a change to make it explicit:

[Danziger]

@fairlighteth regarding your comments:

1. Updated here to use the same tokens as Explorer: 87839fa. If it's still too low, I suggest you open a PR after this one instead to adjust those values, affecting both Widget Configurator and Explorer at the same time.
2. See comment here: feat: Widget Configurator Revamp #7604 (comment)
3. Updated in 35eba61, default is now off.
4. Yes, this is the same issue @shoom3301 reported ("It doesn't open modals in full width").

• For older SDKs, it should be fixed by d4ef9f3
• For the current SDK (changed in this PR but not published), I'm not sure you can test it. We might need to merge it and then open another PR so that the changes become the "Latest" version.

[shoom3301]

Works great!