U+1F5BC FRAME WITH PICTURE requires appending a U+FE0F VARIATION SELECTOR-16 so that its emoji representation is forced. This causes terminal emulators to not reserve space for the next character. A hack consisting in using a U+00A0 NO-BREAK SPACE afterwards works, but copying the output and pasting it elsewhere will cause a double space.
Replacing U+1F5BC FRAME WITH PICTURE with another emoji that doesn't have a textual representation like U+1F3A8 ARTIST PALETTE solves this.
Instead of making a new call to the Penpot API to retrieve page components, retrieve them from the Penpot file already downloaded.
Midway, it fixes some Penpot API types from arrays to records.
As observed in fa873130, current classname PoC tranformation is prone to name clashing errors because it replaces everything not matching `/[a-zA-Z_-|0-9]/g` with underscores. However, as names from typography assets coming from Penpot can hold these values (and often they will, because designers consider emoji useful specially in asset names), the tranformation needed a more thorough algorhythm to avoid clashing errors.
This implementation follows the CSS specification and browser behaviours, which allow more than those characters in class names (including non-ASCII Unicode characters, and even escaped ASCII characters that CSS uses in its syntax), to output valid CSS class nameswith a minimum surface of clashing possibilities.
Since any transformation will decrease the entropy because CSS syntax is a subset of Unicode, there are inevitable clash zones, though. Those zones are reduced to two easily observable cases: duplicated names with explicit underscores instead of spaces, and duplicated names with surrounding whitespace; e.g. "My typography", "My_typography", " My typography" or "My typography " will clash if any pair of those ever happen together.
BREAKING CHANGE: class names generation is no longer case insensitive.