@rogieking/figui3 11.4.2 → 11.6.0

package/.cursor/skills/fig-editor/SKILL.md

@@ -2,18 +2,18 @@
 name: fig-editor
 description: >-
   Guides FigUI3 editor bundle (`fig-editor.js` / `fig-editor.css`): fig-select,
-  fig-select-options, fig-select-option, fig-fill-picker, fig-palette-editor,
-  fig-reorder, and fig-interpolation-swatch,
+  fig-select-options, fig-select-option, fig-property, fig-input-point,
+  fig-fill-picker, fig-palette-editor, fig-gradient-editor, fig-reorder, and fig-interpolation-swatch,
   including React JSX usage. Use when building custom selects, grouped option lists,
-  sticky separators, ghost selects, fill picker dialogs, reorderable lists, or
-  interpolation swatches.
+  sticky separators, ghost selects, composable property rows, fill picker dialogs,
+  reorderable lists, or interpolation swatches.
   Requires fig.js.
 user-invocable: false
 ---
 
 # FigUI3 editor (`fig-editor.js`)
 
-Custom select and full fill-picker. Not in core `fig.js`.
+Custom selects, property rows, point inputs, and full fill editing. Not in core `fig.js`.
 
 React: [../figui3/react.md](../figui3/react.md). Per-tag JSX: [components.md](components.md). Attrs: [reference.md](reference.md).
 
@@ -37,7 +37,10 @@ Registered tags:
 | `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-property` | Composable property row with leading, input, and trailing slots |
+| `fig-input-point` | Paired X/Y numeric point input |
 | `fig-palette-editor` | Ordered palette editor |
+| `fig-gradient-editor` | Full gradient editor with reorderable stops |
 | `fig-reorder` | Pointer- and keyboard-reorderable direct-child list |
 | `fig-interpolation-swatch` | Gradient interpolation preview swatch |
 
@@ -55,7 +58,7 @@ Do not use `picker` or `picker-anchor` on `fig-input-color`. Forward picker chro
 
 ## Maintainer notes
 
-- Implementation: `fig-editor.js`, styles: `fig-editor.css`
+- Implementation: `fig-editor.js` / `fig-editor.css`; property row: `fig-property.js` / `fig-property.css` (imported by the editor bundle)
 - 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)

package/.cursor/skills/fig-editor/components.md

@@ -66,6 +66,91 @@ Data-driven (no authored options):
 - Attrs: `value` (falls back to trimmed `textContent`), `label` (closed-trigger text when content is rich), `selected`, `disabled`, `subtle` (secondary hover/focus fill)
 - `role="option"`, `aria-selected`, `aria-disabled`
 
+## `fig-input-point`
+
+```tsx
+<fig-input-point
+  x={String(point.x)}
+  y={String(point.y)}
+  units="%"
+  full
+  onInput={onInput}
+  onChange={onChange}
+/>
+```
+
+- Attrs: `x`, `y`, `units` (forwarded to both number inputs), `full`
+- Renders two equally sized `fig-input-number` controls in a `fig-input-combo`.
+- Events: `input` while editing and `change` on commit, with `{ x, y }`.
+
+## `fig-property`
+
+Default playground example (`/figui3#property/default`):
+
+```html
+<fig-property label="Size">
+  <fig-input-number
+    slot="input"
+    value="16"
+    units="px"
+    steppers="true"
+    full
+  ></fig-input-number>
+</fig-property>
+```
+
+Generated accessories:
+
+```html
+<fig-property
+  label="Color"
+  leading="drag"
+  trailing="remove"
+  show-leading="hover"
+  show-trailing
+>
+  <fig-input-color slot="input" value="#0D99FF" text="true" full></fig-input-color>
+</fig-property>
+```
+
+Authored trailing accessory (`/figui3#property/custom-accessory`):
+
+```html
+<fig-property label="Opacity" show-trailing>
+  <fig-slider slot="input" value="75" min="0" max="100" units="%" text="true" full></fig-slider>
+  <fig-button slot="trailing" variant="ghost" icon aria-label="Reset opacity">
+    <fig-icon name="reset"></fig-icon>
+  </fig-button>
+</fig-property>
+```
+
+- Attrs: `label`, `leading` (`drag` | `chevron`), `trailing` (`remove` | `add` | `bind`), `show-leading`, `show-trailing`
+- Slots: `input` (one direct primary control), `label`, `leading`, `trailing`
+- Authored label markup overrides the `label` attribute.
+- Authored accessory slots override generated shortcuts.
+- Omitted or `"hover"` show attributes use hover visibility; `"false"` never shows the slot; an empty/present attribute always shows it.
+- Generated trailing controls emit bubbling, composed `remove`, `add`, or `bind` events with the slotted control in `detail.input`.
+- Child input events bubble unchanged.
+
+## `fig-popup-easing`
+
+Reusable easing dialog with an internal
+`<fig-easing-curve aspect-ratio="4/3">`.
+
+```html
+<fig-button id="easing-trigger">Edit easing</fig-button>
+<dialog
+  is="fig-popup-easing"
+  anchor="#easing-trigger"
+  value="0.42, 0, 0.58, 1"
+  open
+></dialog>
+```
+
+- Attrs: `value`, `mode`, `precision`, `edit`, `presets`, `text`, plus inherited `fig-popup` attributes.
+- Events: bubbling `input` / `change` forwarded from the easing curve.
+- Create it as `<dialog is="fig-popup-easing">`, not `<fig-popup-easing>`.
+
 ## `fig-palette-editor`
 
 Reusable ordered palette editor used by `fig-input-palette edit="picker"`.
@@ -83,6 +168,63 @@ Reusable ordered palette editor used by `fig-input-palette edit="picker"`.
 - Events: `input` / `change` with the normalized ordered color array in `detail`
 - Uses `fig-reorder` for pointer and keyboard reordering.
 
+## `fig-gradient-editor`
+
+Reusable full gradient editor used by the Gradient tab in `fig-fill-picker`.
+
+```tsx
+<fig-gradient-editor
+  value='{"type":"linear","angle":90,"stops":[{"position":0,"color":"#0D99FF","opacity":100},{"position":100,"color":"#9747FF","opacity":100}]}'
+  onInput={onInput}
+  onChange={onChange}
+/>
+```
+
+- Attrs: `value`, `color-space` (`srgb` | `display-p3`), `disabled`.
+- Property: `value` is the normalized gradient config; `cssValue` is the rendered CSS gradient.
+- Property: `pickerAnchor` accepts an element used to anchor nested stop color pickers.
+- Events: `input` / `change` with `{ type: "gradient", gradient, css }`.
+- Includes type, flip/rotate, stop bar, add/remove, and pointer/keyboard reorder controls.
+
+## `fig-popup-gradient`
+
+Reusable popup containing one `fig-gradient-editor`. It is the picker opened by
+`fig-input-gradient edit="picker"`.
+
+```html
+<fig-button id="gradient-trigger">Edit gradient</fig-button>
+<dialog
+  is="fig-popup-gradient"
+  anchor="#gradient-trigger"
+  value='{"type":"linear","angle":90,"stops":[{"position":0,"color":"#0D99FF","opacity":100},{"position":100,"color":"#9747FF","opacity":100}]}'
+  open
+></dialog>
+```
+
+- Attrs: `value`, `color-space`, `disabled`, plus inherited `fig-popup` attributes.
+- Events: bubbling `input` / `change` with `{ type: "gradient", gradient, css }`.
+- Create it as `<dialog is="fig-popup-gradient">`.
+
+## `fig-popup-palette`
+
+Reusable palette dialog used by `fig-input-palette edit="picker"`. It extends
+`fig-popup` and owns its `fig-palette-editor`.
+
+```html
+<fig-button id="palette-trigger">Edit palette</fig-button>
+<dialog
+  is="fig-popup-palette"
+  anchor="#palette-trigger"
+  value='["#94BD00","#83AD00","#1A632A","#003905"]'
+  open
+></dialog>
+```
+
+- Attrs: `value`, `min`, `max`, `fixed`, `disabled`, plus inherited `fig-popup` attributes.
+- Property: `value` returns the normalized `{ color, alpha }[]`.
+- Events: bubbling `input` / `change` with the normalized color array in `detail`.
+- Create it as `<dialog is="fig-popup-palette">`, not `<fig-popup-palette>`.
+
 ## `fig-reorder`
 
 ```tsx

package/.cursor/skills/fig-editor/reference.md

@@ -35,6 +35,40 @@ Position: omit to overlay the selected option on the trigger. Set to place the m
 
 Events: `input`, `change`, `optionhover`, `optionfocus`.
 
+## Input point
+
+`fig-input-point` observes `x`, `y`, and `units`.
+
+- Missing or invalid coordinates resolve to `0`.
+- The generated X/Y `fig-input-number` controls stay synchronized with the host attributes.
+- `units` is forwarded to both generated number inputs and removed from both when omitted.
+- `input` and `change` events provide numeric `{ x, y }` in `detail`.
+- `full` makes the host fill its parent.
+
+## Property
+
+`fig-property` observes `label`, `leading`, `trailing`, `show-leading`, and `show-trailing`.
+
+- Direct slots: `input`, `label`, `leading`, `trailing`
+- Authored `slot="label"` markup takes precedence over the `label` attribute.
+- `leading`: `drag` or `chevron`
+- `trailing`: `remove`, `add`, or `bind`
+- `show-leading` / `show-trailing`: omitted or `hover` reveals on hover, `false` hides, and an empty attribute always shows
+- Authored accessory slots override generated shortcuts.
+- `input` returns the direct `slot="input"` element.
+- Generated labels associate to the input with `aria-labelledby` unless it already has an accessible name.
+- Generated trailing events bubble across shadow roots with `detail: { input }`.
+- Child control events are not normalized or re-emitted.
+
+## Easing popup
+
+`dialog[is="fig-popup-easing"]` extends `fig-popup` and owns a
+`fig-easing-curve` with `aspect-ratio="4/3"`.
+
+- Observes and forwards `value`, `mode`, `precision`, `edit`, `presets`, and `text`.
+- Forwards bubbling `input` / `change` events and reflects the current easing value.
+- Defaults: `position="bottom left"`, `offset="0 8"`, `viewport-margin="8"`, and `popover="manual"`.
+
 ## Reorder
 
 `fig-reorder` observes `axis`, `handle`, `items`, `indicator`, and `disabled`.
@@ -53,6 +87,34 @@ Events: `input`, `change`, `optionhover`, `optionfocus`.
 - `value` property and `input` / `change` event `detail`: normalized ordered `{ color, alpha }[]`
 - Rows are direct `fig-reorder` items and support pointer or keyboard reordering.
 
+## Gradient editor
+
+`fig-gradient-editor` observes `value`, `color-space`, and `disabled`.
+
+- `value` accepts a gradient config or `{ type: "gradient", gradient }` and returns a normalized gradient config.
+- `cssValue` returns the current CSS gradient.
+- `pickerAnchor` anchors nested stop color pickers.
+- Bubbling `input` / `change` detail is `{ type: "gradient", gradient, css }`.
+- Interpolation remains locked to sRGB to match the fill picker’s current behavior.
+
+## Gradient popup
+
+`dialog[is="fig-popup-gradient"]` extends `fig-popup`, owns a
+`fig-gradient-editor`, and observes `value`, `color-space`, and `disabled`.
+
+- Defaults: `position="bottom left"`, `offset="0 8"`, `viewport-margin="8"`, and `popover="manual"`.
+- Bubbling `input` / `change` detail is `{ type: "gradient", gradient, css }`.
+
+## Palette popup
+
+`dialog[is="fig-popup-palette"]` extends `fig-popup`, owns a
+`fig-palette-editor`, and observes `value`, `min`, `max`, `fixed`, and
+`disabled` in addition to inherited popup attributes.
+
+- `value` property and bubbling `input` / `change` detail are normalized `{ color, alpha }[]`.
+- Defaults: `position="bottom left"`, `offset="0 8"`, `viewport-margin="8"`, and `popover="manual"`.
+- Import through `fig-editor.js`; create it with `document.createElement("dialog", { is: "fig-popup-palette" })` or matching HTML.
+
 ## Fill picker modes
 
 Built-in: `solid`, `gradient`, `image`, `video`, `webcam`.

package/.cursor/skills/figui3/components.md

@@ -170,7 +170,7 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 
 - Attrs: `preview`, `label`, `accepts`, `multiple`, `disabled`, `variant` (forwards `fig-button` variants; defaults to `property`)
 - Blank or omitted `label` defaults to `Upload audio`, `Upload image`, or `Upload file` based on the known file type. An explicit label overrides it.
-- `preview` renders supported image extensions in a full-width checkerboard `fig-image` at `4/3`, or turns known audio files into play/pause buttons with a waveform and filename tooltip.
+- For known audio files, `preview` shows the audio icon and filename at rest, reveals play and waveform controls on hover/focus, and keeps pause plus waveform visible while playing.
 - `accepts` controls the native chooser filter; file icons and previews are detected independently.
 - Events: `change` / `input` with files on the host
 
@@ -321,6 +321,7 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 ```
 
 - Attrs: `value`, `edit`, `mode` (`handle` | `tip`), `disabled`
+- `edit="picker"` opens `dialog[is="fig-popup-gradient"]` when `fig-editor.js` is loaded.
 
 ### `fig-swatch`
 
@@ -358,6 +359,7 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 ```
 
 - Attrs: `direction` (`horizontal` | `vertical`), `label`, `columns`
+- Slots: `leading` for an accessory before the label; `trailing` for an end action.
 - Put control attrs on the control, not the field.
 
 ### `fig-stack`
@@ -712,6 +714,10 @@ toastRef.current?.showToast();
 Set `mode="bezier"` or `mode="spring"` to constrain the editor and preset list
 to one curve type.
 
+With `edit="false"`, the compact preset control opens `fig-popup-easing` when
+`fig-editor.js` is loaded; without the editor bundle it retains the preset
+dropdown fallback.
+
 ### `fig-3d-rotate`
 
 ```tsx

package/.cursor/skills/figui3/react.md

@@ -80,8 +80,11 @@ type FigTag =
   | "fig-input-fill"
   | "fig-input-gradient"
   | "fig-input-number"
+  | "fig-input-point"
   | "fig-input-palette"
   | "fig-palette-editor"
+  | "fig-gradient-editor"
+  | "fig-property"
   | "fig-input-text"
   | "fig-input-wheel"
   | "fig-interpolation-swatch"

package/.cursor/skills/figui3/reference.md

@@ -64,6 +64,8 @@ Public API: `README.md`. React recipes: [components.md](components.md).
 
 - `direction="horizontal|vertical"`
 - `label` or a child `<label>`
+- `slot="leading"` places an accessory before the label
+- `slot="trailing"` places an end action in the input area
 
 ## `fig-toolbelt`
 

package/CHANGELOG.md

@@ -2,6 +2,43 @@
 
 All notable changes to this project will be documented in this file.
 
+## [11.6.0]
+
+### Added
+
+- Added reusable `fig-gradient-editor`, `fig-popup-gradient`, `fig-popup-palette`, and `fig-popup-easing` editor components.
+- Added package source files, playground examples, tests, manifests, typings, and skill documentation for the new editor components.
+
+### Changed
+
+- Rebuilt the fill picker’s gradient tab with `fig-gradient-editor`.
+- Routed gradient, palette, and compact easing picker modes through their dedicated reusable popups.
+- Refined audio file previews to show the filename at rest, waveform controls on hover, and persistent playback state with focus styling.
+
+### Fixed
+
+- Kept gradient and easing popup values, trigger previews, and selected preset labels synchronized while editing.
+
+## [11.5.0]
+
+### Added
+
+- Added the composable `fig-property` editor row with generated leading/trailing accessories, visibility controls, accessible labels, and action events.
+- Added `fig-input-point` for paired X/Y numeric values.
+- Added standalone `fig-property.js` and `fig-property.css` package exports and editor skill guidance.
+
+### Changed
+
+- Rebuilt palette editor rows and fill-picker gradient stop rows with `fig-property`.
+- Expanded playground editor controls, property examples, event output, and direct hash loading.
+- Updated easing preset artwork to use `fig-icon` prepend content and added the drag-handle icon token.
+- Refined `fig-field` leading/trailing slot handling and property-row hover layout.
+
+### Fixed
+
+- Kept hover-only trailing property actions from reserving space or shifting the input.
+- Made generated property actions bubble across shadow roots with their slotted input in event detail.
+
 ## [11.4.2]
 
 ### Changed

package/README.md

@@ -108,13 +108,18 @@ Minimal example:
 | [Input Wheel](#input-wheel) | `<fig-input-wheel>` | Standalone SVG tick-and-handle numeric scrubber |
 | [Text Input](#text-input) | `<fig-input-text>` | Styled text/textarea input |
 | [Number Input](#number-input) | `<fig-input-number>` | Numeric input with units |
+| [Input Point](#input-point) | `<fig-input-point>` | Paired X/Y numeric input |
 | [File Input](#file-input) | `<fig-input-file>` | File upload with image previews and audio playback waveforms |
 | [Angle](#angle) | `<fig-angle>` | Instrument-style angle/rotation dial |
 | [Swatch](#swatch) | `<fig-swatch>` | Color/gradient/image swatch |
 | [Color Tip](#color-tip) | `<fig-color-tip>` | Compact color tip with picker |
 | [Color Input](#color-input) | `<fig-input-color>` | Color picker with hex/alpha |
 | [Input Palette](#input-palette) | `<fig-input-palette>` | Editable multi-color palette |
+| [Property](#property) | `<fig-property>` | Composable editor property row |
 | [Palette Editor](#palette-editor) | `<fig-palette-editor>` | Reusable reorderable palette editor |
+| [Gradient Editor](#gradient-editor) | `<fig-gradient-editor>` | Full gradient editor with reorderable stops |
+| [Gradient Popup](#gradient-popup) | `<dialog is="fig-popup-gradient">` | Reusable full gradient editor popup |
+| [Palette Popup](#palette-popup) | `<dialog is="fig-popup-palette">` | Reusable palette editor popup |
 | [Reorder](#reorder) | `<fig-reorder>` | Pointer- and keyboard-reorderable list |
 | [Gradient Input](#gradient-input) | `<fig-input-gradient>` | Gradient editor with stops |
 | [Fill Input](#fill-input) | `<fig-input-fill>` | Solid, gradient, image, video fill |
@@ -128,6 +133,7 @@ Minimal example:
 | [Joystick](#joystick) | `<fig-joystick>` | 2D position input |
 | [Origin Grid](#origin-grid) | `<fig-origin-grid>` | Transform-origin grid |
 | [Easing Curve](#easing-curve) | `<fig-easing-curve>` | Bezier/spring curve editor |
+| [Easing Popup](#easing-popup) | `<dialog is="fig-popup-easing">` | Reusable easing editor popup |
 | [3D Rotate](#3d-rotate) | `<fig-3d-rotate>` | 3D cube rotation control |
 | [Handle](#handle) | `<fig-handle>` | Draggable handle on a surface |
 | [Canvas Control](#canvas-control) | `<fig-canvas-control>` | Point with optional radius, angle, or second point |
@@ -510,6 +516,27 @@ The `value`, `min`, `max`, and `step` properties mirror their attributes. `aria-
 
 ---
 
+#### Input Point
+
+`<fig-input-point>` — [demo](https://rog.ie/figui3/#input-point)
+
+An editor-bundle point control that renders two equally sized `<fig-input-number>` controls inside `<fig-input-combo>`. User edits reflect to the `x` and `y` attributes, and `units` is forwarded to both fields. Its `input` and `change` events provide numeric `{ x, y }` in `detail`.
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `x` | number | `0` | Horizontal coordinate |
+| `y` | number | `0` | Vertical coordinate |
+| `units` | string | — | Unit string forwarded to both number inputs |
+| `full` | boolean | `false` | Fill the parent width |
+
+```html
+<fig-input-point x="24" y="16" units="%"></fig-input-point>
+```
+
+Requires `fig-editor.js` and `fig-editor.css`.
+
+---
+
 #### File Input
 
 `<fig-input-file>` — [demo](https://rog.ie/figui3/#file-input)
@@ -523,7 +550,7 @@ The `value`, `min`, `max`, and `step` properties mirror their attributes. `aria-
 | `disabled` | boolean | `false` | Disabled state |
 | `variant` | string | `"property"` | Internal button variant |
 
-Known image and audio files use media-specific icons; unmatched files retain the upload icon. A present or `"true"` `preview` uses the compact image swatch, audio waveform playback, or video icon. `preview="large"` renders known images and videos as upload-enabled `fig-image` or `fig-video` previews; audio and other formats retain their compact preview behavior. `preview="false"` disables previews. Image preview supports `.png`, `.jpg`, `.jpeg`, `.gif`, `.webp`, `.svg`, and `.avif`; audio playback supports `.mp3`, `.wav`, `.aac`, `.m4a`, `.ogg`, and `.flac`; video detection supports common formats including `.mp4`, `.webm`, `.mov`, `.m4v`, `.avi`, `.mkv`, `.ogv`, `.mpeg`, `.mpg`, and `.3gp`.
+Known image and audio files use media-specific icons; unmatched files retain the upload icon. A present or `"true"` `preview` uses the compact image swatch, audio playback preview, or video icon. Audio previews show the audio icon and filename at rest, reveal play and waveform controls on hover or focus, and keep the pause control and waveform visible while playing. `preview="large"` renders known images and videos as upload-enabled `fig-image` or `fig-video` previews; audio and other formats retain their compact preview behavior. `preview="false"` disables previews. Image preview supports `.png`, `.jpg`, `.jpeg`, `.gif`, `.webp`, `.svg`, and `.avif`; audio playback supports `.mp3`, `.wav`, `.aac`, `.m4a`, `.ogg`, and `.flac`; video detection supports common formats including `.mp4`, `.webm`, `.mov`, `.m4v`, `.avi`, `.mkv`, `.ogv`, `.mpeg`, `.mpg`, and `.3gp`.
 
 ```html
 <fig-input-file accepts="image/*"></fig-input-file>
@@ -684,6 +711,20 @@ An editable palette of solid colors, each rendered as a `<fig-input-color>` swat
 
 The editable palette is a single tab stop. Enter or Space expands inline mode or opens picker mode. `edit="false"` renders only the compact preview. Picker mode requires `fig-editor.js`.
 
+#### Property
+
+`<fig-property>`
+
+An editor-bundle property row. Supply one control in `slot="input"` and optionally author `slot="label"`, `slot="leading"`, or `slot="trailing"` content. Authored label markup takes precedence over the `label` attribute. The `leading="drag|chevron"` and `trailing="remove|add|bind"` attributes generate common accessories; authored slot content takes precedence. Leading and trailing content appears on hover or focus by default. Set `show-leading="false"` or `show-trailing="false"` to hide it, or add an empty `show-leading` or `show-trailing` attribute to always show it. Generated trailing actions emit bubbling, composed events named `remove`, `add`, or `bind` with the slotted control in `detail.input`. Input events bubble directly from the supplied control.
+
+```html
+<fig-property label="Size" leading="drag" trailing="remove">
+  <fig-input-number slot="input" value="16" units="px" full></fig-input-number>
+</fig-property>
+```
+
+Import `fig-property.js` and `fig-property.css` directly, or use the `fig-editor` bundle, which includes both.
+
 #### Palette Editor
 
 `<fig-palette-editor>`
@@ -694,6 +735,61 @@ A reusable editor-bundle component for ordered color arrays. It uses `<fig-reord
 <fig-palette-editor value='["#94BD00","#83AD00","#1A632A","#003905"]'></fig-palette-editor>
 ```
 
+#### Gradient Editor
+
+`<fig-gradient-editor>`
+
+A reusable editor-bundle component for gradient type, direction, stop handles,
+and reorderable stop rows. It supports `value`, `color-space`, and `disabled`;
+its `value` property is the normalized gradient config. Bubbling `input` and
+`change` events include `{ type, gradient, css }`.
+
+```html
+<fig-gradient-editor
+  value='{"type":"linear","angle":90,"stops":[{"position":0,"color":"#0D99FF","opacity":100},{"position":100,"color":"#9747FF","opacity":100}]}'
+></fig-gradient-editor>
+```
+
+`fig-fill-picker` uses this component for its Gradient tab.
+
+#### Gradient Popup
+
+`<dialog is="fig-popup-gradient">`
+
+A reusable `fig-popup` subclass that owns a `<fig-gradient-editor>`. It
+supports `value`, `color-space`, and `disabled`, plus inherited popup
+positioning. Its bubbling `input` and `change` events include
+`{ type, gradient, css }`.
+
+```html
+<fig-button id="gradient-trigger">Edit gradient</fig-button>
+<dialog
+  is="fig-popup-gradient"
+  anchor="#gradient-trigger"
+  value='{"type":"linear","angle":90,"stops":[{"position":0,"color":"#0D99FF","opacity":100},{"position":100,"color":"#9747FF","opacity":100}]}'
+  open
+></dialog>
+```
+
+#### Palette Popup
+
+`<dialog is="fig-popup-palette">`
+
+A reusable `fig-popup` subclass that owns a `<fig-palette-editor>`. It supports
+`value`, `min`, `max`, `fixed`, and `disabled`, plus the standard popup
+positioning attributes. Its `value` property and bubbling `input` / `change`
+events use normalized `{ color, alpha }[]` values.
+
+```html
+<fig-button id="palette-trigger">Edit palette</fig-button>
+<dialog
+  is="fig-popup-palette"
+  anchor="#palette-trigger"
+  value='["#94BD00","#83AD00","#1A632A","#003905"]'
+  open
+></dialog>
+```
+
 #### Reorder
 
 `<fig-reorder>`
@@ -715,7 +811,7 @@ Attributes: `axis`, `handle`, `items`, `indicator`, and `disabled`. The bubbling
 
 `<fig-input-gradient>`
 
-A gradient editor with draggable stops. With `edit="picker"` and the optional picker registered, it opens `<fig-fill-picker>` locked to gradient mode; otherwise it falls back to inline stop editing.
+A gradient editor with draggable stops. With `edit="picker"` and the editor bundle registered, it opens the reusable `dialog[is="fig-popup-gradient"]`; otherwise it renders the gradient swatch without opening a picker.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
@@ -1021,7 +1117,7 @@ An interactive bezier or spring easing curve editor with a preset dropdown and m
 | `mode` | string | — | Optional `"bezier"` or `"spring"` constraint; filters presets and rejects the other value type |
 | `precision` | number | `2` | Decimal places |
 | `aspect-ratio` | string | — | Editor aspect ratio |
-| `edit` | boolean | `true` | Show the editor and custom bezier/spring options; set to `"false"` for preset-only |
+| `edit` | boolean | `true` | Show the inline editor; `"false"` uses the compact preset control and opens `fig-popup-easing` when `fig-editor.js` is loaded |
 | `presets` | boolean | `true` | Show the preset selector; set to `"false"` to hide it |
 | `text` | boolean | `true` | Show the bezier value or normalized spring bounce input; set to `"false"` to hide it |
 
@@ -1070,6 +1166,24 @@ In spring mode, the compact number input edits normalized bounce from `0` (criti
 
 Editable bezier and spring handles are keyboard operable. Bezier handles keep tab order aligned with the visual handle order.
 
+#### Easing Popup
+
+`<dialog is="fig-popup-easing">`
+
+A reusable `fig-popup` subclass containing a
+`<fig-easing-curve aspect-ratio="4/3">`. Easing attributes and events are
+forwarded through the popup.
+
+```html
+<fig-button id="easing-trigger">Edit easing</fig-button>
+<dialog
+  is="fig-popup-easing"
+  anchor="#easing-trigger"
+  value="0.42, 0, 0.58, 1"
+  open
+></dialog>
+```
+
 ---
 
 #### 3D Rotate
@@ -1290,6 +1404,8 @@ Adjacent `fig-field` children in a horizontal stack share compact gutters.
 
 A form field wrapper with flexible layout. Automatically links `<label>` to the first `fig-*` child for accessibility.
 
+Use `slot="leading"` for an accessory before the label, such as a disclosure or drag handle. Use `slot="trailing"` for an action at the end of the input area, such as reset or remove.
+
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `direction` | string | `"column"` | `"column"`, `"row"`, `"horizontal"` |
@@ -1298,8 +1414,12 @@ A form field wrapper with flexible layout. Automatically links `<label>` to the
 
 ```html
 <fig-field direction="horizontal" columns="thirds">
+  <fig-icon slot="leading" name="drag-handle" size="small"></fig-icon>
   <label>Opacity</label>
   <fig-slider value="50" units="%"></fig-slider>
+  <fig-button slot="trailing" variant="ghost" icon aria-label="Reset">
+    <fig-icon name="reset"></fig-icon>
+  </fig-button>
 </fig-field>
 ```