Bundled distribution for Figma plugin embedded contexts #4

When using figui3 in a Figma plugin, the standard import method doesn't work due to Figma's embedded iframe architecture. This requires workarounds that could be eliminated with a bundled distribution.

Environment

• figui3 version: 1.9.1
• Context: Figma plugin (embedded iframe via figma.showUI())

The Problem

1. CSS @import fails in embedded contexts

fig.css uses @import statements:

@import url("base.css");
@import url("components.css");

When the HTML is embedded as a string in Figma plugins, these imports fail because the referenced files aren't accessible from the embedded context.

Current workaround: Manually read and concatenate CSS files in the build process:

const figui3BaseCSS = fs.readFileSync('./node_modules/@rogieking/figui3/base.css', 'utf8');
const figui3ComponentsCSS = fs.readFileSync('./node_modules/@rogieking/figui3/components.css', 'utf8');
const combinedCSS = `${figui3BaseCSS}\n\n${figui3ComponentsCSS}`;

// Inject into HTML before embedding
html = html.replace('<head>', `<head>\n<style>${combinedCSS}</style>`);

2. <fig-tabs> doesn't manage content panels

The documented usage suggests tabs manage their content:

<fig-tabs>
  <fig-tab label="Tab 1">Content 1</fig-tab>
  <fig-tab label="Tab 2">Content 2</fig-tab>
</fig-tabs>

However, in practice I needed to implement manual tab switching with separate content panels and custom JavaScript.

3. <fig-radio> requires accessing internal elements

To get the selected value from a fig-radio group, I had to reach into the internal input element:

const selectedRadio = document.querySelector('fig-radio[name="my-group"] input:checked');
const value = selectedRadio?.value;

Feature Request

Would it be possible to provide:

1. A pre-bundled CSS file (fig.bundle.css) that doesn't use @import
2. A pre-bundled IIFE JS file (fig.iife.js) optimized for Figma plugins
3. Tab content management built into <fig-tabs> component
4. Cleaner value access for form components like <fig-radio>

Thanks for the great library! The Figma UI3 styling is excellent.