SnappPay UI Kit

this extension makes migrating to the new SnappPay UI Kit and working with its tokens easier.

It provides two main features:

Migration command: updates old props and maps old tokens to the new tokens.
Inline assistance: hover and autocomplete support that shows token values (for example, md → 16px) while editing.

Features

Migrate props and tokens
- Run the command "SnappPay: Migrate to New UI Kit" to automatically replace old props and map old tokens to their new counterparts.
  
  Example: change _margin='lg' to _m='md'
Hover and autocomplete token values
- When you hover over a token usage (e.g. _m='md') the extension shows the resolved value (e.g. 16px).
- Autocomplete for tokens shows available token names and their values while you type.

SnappPay: Migrate to New UI Kit
- Default keybinding: Cmd+Alt+S (macOS) / Ctrl+Alt+S (Windows/Linux)
- If you want to change the shortcut, rebind the command kit.migrateTokens in VS Code keyboard shortcuts settings.

This extension activates for the following file extensions by default:

It runs on demand when you invoke the migration command or when you edit/hover in supported files.

This extension requires the @snppay/ui package to be installed in the project so token mappings and lookups work correctly.

Open a project that uses the old SnappPay UI Kit props/tokens.
Run the command palette (Cmd+Shift+P) and choose "SnappPay: Migrate to New UI Kit" or press the keybinding Cmd+Alt+S.

Important: the migration command runs only on the currently opened editor tab (the active file). It does not scan or modify other files across the project.
Review the replacements and changes applied by the migration tool.
While editing, hover over token names to see their resolved values and use autocomplete to pick tokens with clear names and values.

Migration example

Before: _margin="lg"

After: _m="md"
Hover example

Hovering over md shows: md — 16px (a small tooltip with the token name and value)