fig-editor

# FigUI3 editor (`fig-editor.js`) Custom select and full fill-picker. Not in core `fig.js`. React: [../figui3/react.md](../figui3/react.md). Per-tag JSX: [components.md](components.md). Attrs: [reference.md](reference.md). ## Install ```js import "@rogieking/figui3/fig.css"; import "@rogieking/figui3/fig.js"; import "@rogieking/figui3/fig-editor.css"; import "@rogieking/figui3/fig-editor.js"; ``` `fig-editor.js` imports `fig.js` and `fig-lab.js`. Still import `fig-editor.css`. Import `fig-lab.css` if lab visuals are needed. Registered tags: | Tag | Role | |---|---| | `fig-select` | Trigger + popup listbox (`subtle` applies to all options) | | `fig-select-options` | Scrollable panel (`slot="panel"`), overflow chevrons | | `fig-select-option` | Option (`value`, `label`, `selected`, `disabled`, `subtle`) | | `fig-fill-picker` | Full fill editor dialog (solid, gradient, image, video, webcam, custom modes) | | `fig-interpolation-swatch` | Gradient interpolation preview swatch | - `fig-dropdown` (core): native `<select>`. - `fig-select` (this skill): custom listbox. Use this for Figma-style menus. Author options as React children, or pass `options`. Set `menu-anchor` to a selector or assign an element to `menuAnchor` when the menu should align against another element. Do not `stopPropagation` on option click. `optionhover` and `optionfocus` are native preview listeners. ## Fill picker Core `fig-input-color` / `fig-input-fill` auto-open the picker when registered. Custom modes: `slot="mode-<name>"` on `fig-input-fill`, or React `modeready` → mount into `e.detail.container` (do not reparent). Do not use `picker` or `picker-anchor` on `fig-input-color`. Forward picker chrome with `picker-*`. ## Maintainer notes - Implementation: `fig-editor.js`, styles: `fig-editor.css` - Do not move fill-picker or select into `fig.js` - Nested overlay positioning: keep `popover="manual"` on the select popup - Tests: `tests/figui/component-contracts.spec.ts` (ghost variant, sticky separator vs overflow-start)