@rogieking/figui3 11.1.5 → 11.2.0

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

@@ -2,9 +2,11 @@
 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, and fig-interpolation-swatch,
+  fig-select-options, fig-select-option, fig-fill-picker, fig-palette-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, or interpolation swatches.
+  sticky separators, ghost selects, fill picker dialogs, reorderable lists, or
+  interpolation swatches.
   Requires fig.js.
 user-invocable: false
 ---
@@ -25,7 +27,7 @@ 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.
+`fig-editor.js` imports `fig.js`. Still import `fig-editor.css`.
 
 Registered tags:
 
@@ -35,6 +37,8 @@ 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-palette-editor` | Ordered palette editor |
+| `fig-reorder` | Pointer- and keyboard-reorderable direct-child list |
 | `fig-interpolation-swatch` | Gradient interpolation preview swatch |
 
 

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

@@ -2,7 +2,7 @@
 
 React contract: [../figui3/react.md](../figui3/react.md). Attrs: [reference.md](reference.md).
 
-Install `fig-editor.css` + `fig-editor.js` (pulls in `fig.js` and `fig-lab.js`). Still import `fig-editor.css`. Import `fig-lab.css` if lab visuals are needed.
+Install `fig-editor.css` + `fig-editor.js` (pulls in `fig.js`). Still import `fig-editor.css`.
 
 ## `fig-select`
 
@@ -66,6 +66,57 @@ 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-palette-editor`
+
+Reusable ordered palette editor used by `fig-input-palette edit="picker"`.
+
+```tsx
+<fig-palette-editor
+  value='["#94BD00","#83AD00","#1A632A","#003905"]'
+  onInput={onInput}
+  onChange={onChange}
+/>
+```
+
+- Attrs: `value`, `min`, `max`, `fixed`, `disabled`
+- `max` is unbounded when omitted.
+- Events: `input` / `change` with the normalized ordered color array in `detail`
+- Uses `fig-reorder` for pointer and keyboard reordering.
+
+## `fig-reorder`
+
+```tsx
+<fig-reorder axis="vertical" handle=".drag">
+  {items.map((item) => (
+    <div key={item.id} className="row">
+      <button className="drag" type="button" aria-label="Reorder" />
+      {item.label}
+    </div>
+  ))}
+</fig-reorder>
+```
+
+Listen for `reorder` on a ref (`onReorder` is not a React-mapped event):
+
+```tsx
+useEffect(() => {
+  const el = ref.current;
+  if (!el) return;
+  const handler = (event: Event) => {
+    const { oldIndex, newIndex, item } = (event as CustomEvent).detail;
+    onReorder({ oldIndex, newIndex, item });
+  };
+  el.addEventListener("reorder", handler);
+  return () => el.removeEventListener("reorder", handler);
+}, [onReorder]);
+```
+
+- `display: contents`. Reorders direct children.
+- Attrs: `axis` (`vertical` | `horizontal`), `handle`, `items`, `indicator` (`default` | `ring`), `disabled`.
+- `items` limits which direct children reorder; `refresh()` forces a re-sync.
+- Event `reorder`: `{ oldIndex, newIndex, item }`.
+- With fewer than two matching items, list semantics remain but drag and keyboard affordances stay inactive.
+
 ## `fig-fill-picker`
 
 Full fill editor. Core `fig-input-color` / `fig-input-fill` auto-open it when this tag is registered.

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

@@ -35,6 +35,24 @@ Position: omit to overlay the selected option on the trigger. Set to place the m
 
 Events: `input`, `change`, `optionhover`, `optionfocus`.
 
+## Reorder
+
+`fig-reorder` observes `axis`, `handle`, `items`, `indicator`, and `disabled`.
+
+- `items`: selector for reorderable direct children; non-matching children remain in place.
+- `indicator`: `default` or `ring`.
+- `refresh()`: force child/selector synchronization.
+- Event `reorder`: `{ oldIndex, newIndex, item }`; indices count matching items.
+- Nested drag controls are ignored unless an explicit `handle` is configured.
+
+## Palette editor
+
+`fig-palette-editor` observes `value`, `min`, `max`, `fixed`, and `disabled`. An omitted `max` allows unlimited colors.
+
+- `value`: JSON array of hex strings or `{ color, alpha }` objects, or comma-separated hex
+- `value` property and `input` / `change` event `detail`: normalized ordered `{ color, alpha }[]`
+- Rows are direct `fig-reorder` items and support pointer or keyboard reordering.
+
 ## Fill picker modes
 
 Built-in: `solid`, `gradient`, `image`, `video`, `webcam`.

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

@@ -2,7 +2,7 @@
 name: fig-lab
 description: >-
   Guides FigUI3 experimental Lab components: fig-canvas-control,
-  fig-input-audio, fig-input-wheel, fig-reorder, and AI composer components,
+  fig-input-audio, fig-input-wheel, and AI composer components,
   including React JSX usage. APIs are unstable.
 user-invocable: false
 ---
@@ -22,4 +22,4 @@ import "@rogieking/figui3/fig-lab.css";
 import "@rogieking/figui3/fig-lab.js";
 ```
 
-Use Lab for audio and wheel inputs, canvas handles, reorder behavior, and AI composition surfaces. Keep Lab out of `fig.js`.
+Use Lab for audio and wheel inputs, canvas handles, and AI composition surfaces. Keep Lab out of `fig.js`.

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

@@ -54,38 +54,6 @@ Handlers below assume `onInput` / `onChange` from the React contract.
 
 - Methods: `focus()`, `spinTo(value)`, `beginScrub()`, `updateScrub()`, `endScrub()`.
 
-### `fig-reorder`
-
-```tsx
-<fig-reorder axis="vertical" handle=".drag">
-  {items.map((item) => (
-    <div key={item.id} className="row">
-      <button className="drag" type="button" aria-label="Reorder" />
-      {item.label}
-    </div>
-  ))}
-</fig-reorder>
-```
-
-Listen for `reorder` on a ref (`onReorder` is not a React-mapped event):
-
-```tsx
-useEffect(() => {
-  const el = ref.current;
-  if (!el) return;
-  const handler = (event: Event) => {
-    const { oldIndex, newIndex, item } = (event as CustomEvent).detail;
-    onReorder({ oldIndex, newIndex, item });
-  };
-  el.addEventListener("reorder", handler);
-  return () => el.removeEventListener("reorder", handler);
-}, [onReorder]);
-```
-
-- `display: contents`. Reorders **direct children**. `axis` `vertical` | `horizontal`. `items` selector limits which children reorder (e.g. `items=".row"` to skip headers); `indicator="default|ring"` controls the drop indicator style; `refresh()` re-syncs. Omit `handle` to drag whole rows; set it when rows contain sliders/handles.
-- With fewer than two matching items, children keep `role="listitem"` but drag cursors, handles, focus, and move labels stay inactive until another item is added.
-- Event `reorder`: `{ oldIndex, newIndex, item }` (indices among matching items). Nested drag is ignored for sliders, handles, and canvas controls.
-
 ## AI composer
 
 Layout shells. Wire behavior yourself. Children are React nodes.

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

@@ -53,20 +53,6 @@ Parent must be `position: relative` (or similar) so the control can fill it. Wra
 
 Types: `point`, `color`, `point-radius`, `point-radius-angle`, `point-point`.
 
-## `fig-reorder`
-
-Observed: `axis`, `handle`, `items`, `indicator`, `disabled`.
-
-`items`: CSS selector for which direct children are reorderable (default: all). Non-matching children stay in place and get `role="none"` unless they have a role. Class/attribute changes on children re-sync automatically; call `refresh()` to force it.
-
-`indicator`: Drop indicator style, either `default` or `ring`.
-
-With fewer than two matching items, matching children retain `role="listitem"` but remain non-draggable and receive no generated focus or move label.
-
-Event `reorder`: `{ oldIndex, newIndex, item }`. Indices count matching items, not DOM positions.
-
-Nested drag is ignored for sliders, handles, and canvas controls so inner gestures still work. If a row is still stolen, set `handle` to a drag-affordance selector.
-
 ## AI shells
 
 `fig-ai-prompt`, `fig-ai-context`, `fig-chat-message` are empty custom elements (presentation CSS only).

package/.cursor/skills/figui3/SKILL.md

@@ -27,10 +27,10 @@ import "@rogieking/figui3/fig.js";
 | Bundle | CSS + JS | Components |
 |---|---|---|
 | **Core** (this skill) | `fig.css` + `fig.js` | All `fig-*` in [components.md](components.md) |
-| **Editor** | `fig-editor.css` + `fig-editor.js` | `fig-select*`, `fig-fill-picker`, `fig-interpolation-swatch` |
+| **Editor** | `fig-editor.css` + `fig-editor.js` | `fig-select*`, `fig-fill-picker`, `fig-palette-editor`, `fig-reorder`, `fig-interpolation-swatch` |
 | **Layer** | `fig-layer.css` + `fig-layer.js` | `fig-layer` |
 
-`fig-editor.js` also imports `fig.js` and `fig-lab.js`. Lab CSS is still separate. `fig-layer` is **not** registered by `fig-editor.js`. Toast is core; layer is `fig-layer.js`.
+`fig-editor.js` also imports `fig.js`. Lab remains a separate JS/CSS bundle. `fig-layer` is **not** registered by `fig-editor.js`. Toast is core; layer is `fig-layer.js`.
 
 ## Principles
 

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

@@ -263,7 +263,23 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 />
 ```
 
-- Attrs: `value`, `fixed`, `open`, `disabled`
+- Attrs: `value`, `edit` (`true` | `false` | `picker`), `fixed`, `open`, `disabled`, `min`, `max`
+- `edit="true"` keeps the inline expandable editor, `edit="false"` renders a compact preview, and `edit="picker"` opens `fig-palette-editor` from the editor bundle.
+
+### `fig-palette-editor`
+
+```tsx
+<fig-palette-editor
+  value='["#0D99FF","#14AE5C"]'
+  onInput={onInput}
+  onChange={onChange}
+/>
+```
+
+- Editor-bundle component for reusable palette editing with drag and keyboard reordering.
+- Attrs: `value`, `fixed`, `disabled`, `min`, `max`
+- `max` is unbounded when omitted.
+- Events: `input` / `change` with the normalized ordered color array in `detail`
 
 ### `fig-input-gradient`
 

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

@@ -80,6 +80,7 @@ type FigTag =
   | "fig-input-gradient"
   | "fig-input-number"
   | "fig-input-palette"
+  | "fig-palette-editor"
   | "fig-input-text"
   | "fig-input-wheel"
   | "fig-interpolation-swatch"

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 All notable changes to this project will be documented in this file.
 
+## [11.2.0]
+
+### Added
+
+- Added the reusable `fig-palette-editor` with color editing, add/remove controls, and pointer or keyboard reordering.
+- Added palette editor and reorder examples, controls, typings, tests, and documentation.
+
+### Changed
+
+- Added inline, preview, and popup picker modes to `fig-input-palette`.
+- Moved `fig-reorder` from the Lab bundle to the Editor bundle and expanded its item, handle, indicator, and accessibility behavior.
+- Updated labelless `fig-field` layouts to support flexible groups of controls.
+- Refined palette and gradient editor structure and spacing with standard fields, headers, and stacks.
+
+### Fixed
+
+- Kept reorder indicators visible inside popovers, modal dialogs, and fullscreen elements.
+- Allowed color tips to inherit the active light or dark theme.
+
+## [11.1.6]
+
+### Fixed
+
+- Corrected labeled separator alignment and padding in `fig-select`.
+
 ## [11.1.5]
 
 ### Fixed

package/README.md

@@ -112,6 +112,8 @@ Minimal example:
 | [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 |
+| [Palette Editor](#palette-editor) | `<fig-palette-editor>` | Reusable reorderable palette editor |
+| [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 |
 | [Fill Picker](#fill-picker) | `<fig-fill-picker>` | Full fill picker dialog |
@@ -622,6 +624,7 @@ An editable palette of solid colors, each rendered as a `<fig-input-color>` swat
 | `max` | number | `8` | Maximum (add button hidden at max) |
 | `open` | boolean | `false` | Expanded rows with text inputs per color |
 | `fixed` | boolean | `false` | Lock palette length — no add or remove (`fixed` or `fixed="true"`) |
+| `edit` | `"true"` \| `"false"` \| `"picker"` | `"true"` | Inline editor, compact preview, or popup palette editor |
 
 **Events:**
 
@@ -632,10 +635,36 @@ An editable palette of solid colors, each rendered as a `<fig-input-color>` swat
 
 ```html
 <fig-input-palette value='["#FF0000","#00FF00","#0000FF"]'></fig-input-palette>
-<fig-input-palette value='[{"color":"#FF0000","alpha":0.5},{"color":"#00FF00","alpha":1}]' open></fig-input-palette>
+<fig-input-palette edit="false" value='["#FF0000","#00FF00","#0000FF"]'></fig-input-palette>
+<fig-input-palette edit="picker" value='[{"color":"#FF0000","alpha":0.5},{"color":"#00FF00","alpha":1}]'></fig-input-palette>
 ```
 
-The collapsed palette is a single tab stop. Enter or Space expands it, and focus styling uses the shared focus outline tokens on the visible swatch row.
+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`.
+
+#### Palette Editor
+
+`<fig-palette-editor>`
+
+A reusable editor-bundle component for ordered color arrays. It uses `<fig-reorder>` for pointer and keyboard reordering and emits normalized color arrays from `input` and `change`. It supports `value`, `min`, `max`, `fixed`, and `disabled`; omit `max` for an unlimited number of colors.
+
+```html
+<fig-palette-editor value='["#94BD00","#83AD00","#1A632A","#003905"]'></fig-palette-editor>
+```
+
+#### Reorder
+
+`<fig-reorder>`
+
+An editor-bundle wrapper for reordering direct children with pointer or keyboard controls. Use `handle` for rows containing interactive controls, and `items` to limit which direct children participate.
+
+```html
+<fig-reorder axis="vertical" handle=".drag-handle">
+  <div><button class="drag-handle" aria-label="Reorder">Move</button>First</div>
+  <div><button class="drag-handle" aria-label="Reorder">Move</button>Second</div>
+</fig-reorder>
+```
+
+Attributes: `axis`, `handle`, `items`, `indicator`, and `disabled`. The bubbling `reorder` event includes `{ oldIndex, newIndex, item }`.
 
 ---
 

package/components.css

@@ -4682,7 +4682,15 @@ fig-input-palette {
     outline: var(--figma-focus-outline);
     outline-offset: var(--figma-focus-outline-offset);
   }
-  &[open]:not([open="false"]):not([edit="false"]) {
+  &:is([edit="false"], [edit="picker"]) {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0;
+
+    > .palette-colors-inline {
+      grid-column: 1 / -1;
+    }
+  }
+  &[open]:not([open="false"]):not([edit="false"]):not([edit="picker"]) {
     grid-template-areas:
     "inline    button"
     "expanded  expanded";
@@ -4853,24 +4861,19 @@ fig-field {
     transform: rotate(0deg);
   }
 
-  /* labelless fields can have a few inputs */
+  /* Labelless fields support any number of controls between the side padding. */
   &:not([direction="vertical"]):not(:has(> label)) {
-    grid-template-columns:
-      var(--fig-field-left-padding) minmax(0, var(--fig-field-label-ratio))
-      var(--spacer-2)
-      minmax(0, var(--fig-field-input-ratio)) var(--fig-field-right-padding);
-    grid-template-areas: "chevron input1 gap input2 pad";
-
-    & > *:first-child {
-      grid-area: input1;
-    }
+    display: flex;
+    gap: var(--fig-field-gap);
+    padding-inline: var(--fig-field-left-padding) var(--fig-field-right-padding);
 
-    & > *:last-child {
-      grid-area: input2;
+    &:has(fig-button[icon]:not([icon="false"])[variant="ghost"]) {
+      padding-inline: var(--fig-field-left-padding) calc(var(--fig-field-right-padding) * 0.5);
     }
 
-    & > *:only-child {
-      grid-column: input1 / -2;
+    & > *:not(fig-button):not(.fig-field-chevron) {
+      flex: 1 1 0;
+      min-width: 0;
     }
   }
 
@@ -7033,7 +7036,6 @@ fig-color-tip {
   overflow: visible;
   position: relative;
   color: var(--figma-color-text);
-  color-scheme: light only;
   width: var(--size);
   height: var(--size);
   aspect-ratio: 1 / 1;
@@ -7294,6 +7296,7 @@ fig-select-options > :is(fig-separator, fig-menu-separator):has(> label):first-c
 fig-select-options > [data-fig-select-nav="start"] + :is(fig-separator, fig-menu-separator):has(> label) {
   --fig-separator-color: transparent;
   --fig-separator-margin-block: 0;
+  --fig-separator-padding-inline: 0 var(--spacer-3,0.75rem);
 }
 
 fig-menu > [slot="trigger"] + :is(fig-separator, fig-menu-separator):has(> label) {