@rogieking/figui3 4.15.10 → 5.1.0

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

@@ -70,9 +70,9 @@ export default defineConfig({
 
 ### React + color picker modes (`fig-input-color` / `fig-fill-picker`)
 
-- `fig-input-color` supports custom mode workflows only through `picker="figma"` (internally uses `fig-fill-picker`).
-- The `mode` attribute on `fig-input-color` is pass-through to inner `fig-fill-picker`; mode logic lives in `fig-fill-picker`.
-- `picker-*` attrs on `fig-input-color` are forwarded to `fig-fill-picker` (except `picker-anchor`, which is handled separately).
+- `fig-fill-picker` is optional. Import `fig-editor.js` and `fig-editor.css` when full picker behavior is needed.
+- Do not use `picker` or `picker-anchor` on `fig-input-color`; components auto-detect `fig-fill-picker` at interaction time.
+- `picker-*` attrs on `fig-input-color` are forwarded to `fig-fill-picker` only when the optional picker is registered.
   - Example: `picker-dialog-position`, `picker-experimental`, etc.
 - For React custom modes, use `fig-fill-picker` + slot API:
   - Add a child with `slot="mode-<name>"` (and optional `label`).
@@ -87,9 +87,6 @@ export default defineConfig({
 - Preserve value shape expectations:
   - `fig-input-color` expects solid color data (`detail.color`, optional `detail.alpha`) from the picker.
   - `fig-fill-picker` custom modes use JSON with `type` set to mode name and remaining data in payload.
-- Keep `picker-anchor` behavior explicit in React:
-  - `picker-anchor="self"` anchors to the color input element itself.
-  - Selector values anchor to another DOM element (resolved via `document.querySelector`).
 
 ## Experimental Attribute Guidance
 
@@ -100,8 +97,8 @@ export default defineConfig({
   - `fig-input-color` and `fig-input-fill` forward experimental-related picker settings into internal `fig-fill-picker` usage.
   - Avoid adding hidden implicit defaults that enable experimental behavior globally.
 - Backward-compat rule:
-  - Do not reintroduce `variant="neue"` for dropdown experimental behavior.
-  - Keep `variant="neue"` handling only where it is still intentionally supported (for example slider visuals).
+  - Do not reintroduce the old `neue` variant name for dropdown experimental behavior.
+  - Use `variant="classic"` only when a slider needs the previous visual style.
 - Documentation rule: any new experimental token must be documented with activation syntax, intended scope, and fallback behavior in demos + README + changelog.
 
 ## Critical Rules

package/.cursor/skills/propkit/SKILL.md

@@ -107,11 +107,11 @@ bootstrap();
 - Use `type="hue"` only for hue selection workflows.
 - Use `type="stepper"` for discrete snap points (include a `datalist` with valid stops).
 - Use `type="delta"` for offset/relative adjustments around a neutral point (typically include `default`, and often symmetric min/max).
-- Prefer `text="true"` for precision-critical properties; omit it for compact/simplified rows.
+- Text input is shown by default; use `text="false"` only for compact/simplified rows.
 - Use `transform` when internal value scale differs from UI display (example: internal `0..1`, display `0..100%`).
 - Variants:
   - Default variant for most property panels.
-  - `variant="neue"` for a compact, visually quieter style.
+  - `variant="classic"` only when the previous slider appearance is needed.
 - Always set explicit `min`, `max`, and `step` (and `units` where applicable) to keep behavior predictable.
 
 ### Control Selection Heuristics
@@ -175,7 +175,7 @@ Use a horizontal fig-field, with a fig-slider, min=0 max=100 text=true units=%.
 </fig-field>
 <fig-field direction="horizontal">
   <label>Hue</label>
-  <fig-slider type="hue" value="180" text="true" variant="neue" full></fig-slider>
+  <fig-slider type="hue" value="180" text="true" full></fig-slider>
 </fig-field>
 <fig-field direction="horizontal">
   <label>Offset</label>

package/README.md

@@ -32,6 +32,13 @@ import "@rogieking/figui3/fig.css";
 import "@rogieking/figui3/fig.js";
 ```
 
+Opt into the full Figma-style fill picker when you need it:
+
+```js
+import "@rogieking/figui3/fig-editor.css";
+import "@rogieking/figui3/fig-editor.js";
+```
+
 Or use a CDN:
 
 ```html
@@ -44,7 +51,7 @@ Minimal example:
 ```html
 <fig-field direction="horizontal">
   <label>Color</label>
-  <fig-input-color value="#FF5733" text="true" alpha="true"></fig-input-color>
+  <fig-input-color value="#FF5733" text="true"></fig-input-color>
 </fig-field>
 <fig-button variant="primary">Save</fig-button>
 ```
@@ -237,21 +244,21 @@ Minimal example:
 | `max` | number | `100` | Maximum |
 | `step` | number | `1` | Step increment |
 | `default` | number | — | Default/reset value (shown as marker) |
-| `text` | boolean | `false` | Show text input |
+| `text` | boolean | `true` | Show text input; set `text="false"` to hide |
 | `placeholder` | string | `"##"` | Text input placeholder |
 | `units` | string | — | Unit label (e.g. `"%"`, `"px"`) |
 | `transform` | number | — | Display value multiplier |
 | `color` | string | — | Track color (opacity type) |
-| `variant` | string | — | Visual variant (e.g. `"neue"`) |
+| `variant` | string | — | Use `"classic"` to opt into the previous slider appearance |
 | `precision` | number | — | Decimal places for output |
 | `disabled` | boolean | `false` | Disabled state |
 
 **Events:** `input` (continuous), `change` (on release).
 
 ```html
-<fig-slider min="0" max="100" value="50" text="true" units="%"></fig-slider>
-<fig-slider type="hue" value="180"></fig-slider>
-<fig-slider type="opacity" value="75" color="#FF5733" text="true" units="%"></fig-slider>
+<fig-slider min="0" max="100" value="50" units="%"></fig-slider>
+<fig-slider type="hue" value="180" text="false"></fig-slider>
+<fig-slider type="opacity" value="75" color="#FF5733" units="%"></fig-slider>
 ```
 
 ---
@@ -271,7 +278,7 @@ Wraps a `<fig-field>` and `<fig-slider>` into a single labeled control. All slid
 **Events:** `input`, `change` — forwarded from the inner slider.
 
 ```html
-<fig-field-slider label="Opacity" min="0" max="100" value="75" text="true" units="%"></fig-field-slider>
+<fig-field-slider label="Opacity" min="0" max="100" value="75" units="%"></fig-field-slider>
 ```
 
 ---
@@ -378,7 +385,7 @@ A color/gradient/image swatch element with checkerboard background for alpha.
 
 `<fig-color-tip>` — [demo](https://rog.ie/figui3/#color-tip)
 
-A compact solid-color swatch that wraps `<fig-fill-picker>`. Used inside gradient handles and other controls.
+A compact solid-color swatch. Uses `<fig-fill-picker>` when the optional picker is registered, otherwise falls back to the native color input.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
@@ -412,10 +419,10 @@ A compact solid-color swatch that wraps `<fig-fill-picker>`. Used inside gradien
 |---|---|---|---|
 | `value` | string | — | Hex color (e.g. `"#FF5733"` or `"#FF573380"`) |
 | `text` | boolean | `false` | Show hex text input |
-| `alpha` | boolean | `false` | Show alpha slider |
-| `picker` | string | `"native"` | `"native"`, `"figma"`, `"false"` |
+| `alpha` | boolean | `true` | Show alpha slider; set `alpha="false"` to hide opacity controls |
 | `mode` | string | — | Color mode (`"hex"`, `"rgb"`, `"hsl"`) |
 | `experimental` | string | — | Feature flags |
+| `picker-*` | string | — | Forwarded to `<fig-fill-picker>` when the optional picker is registered |
 | `disabled` | boolean | `false` | Disabled state |
 
 **Events:**
@@ -426,10 +433,11 @@ A compact solid-color swatch that wraps `<fig-fill-picker>`. Used inside gradien
 | `change` | `{ color, alpha, hsv: { h, s, v, a } }` |
 
 ```html
-<fig-input-color value="#FF5733" text="true" alpha="true"></fig-input-color>
-<fig-input-color value="#FF5733" text="true" alpha="true" picker="figma"></fig-input-color>
+<fig-input-color value="#FF5733" text="true"></fig-input-color>
 ```
 
+When `fig-editor.js` is imported, swatch activation opens `<fig-fill-picker>`. Without it, the native color input is used.
+
 ---
 
 #### Input Palette
@@ -465,15 +473,15 @@ An editable palette of solid colors, each rendered as a `<fig-input-color>` swat
 
 `<fig-input-gradient>`
 
-A gradient editor with draggable stops. Opens `<fig-fill-picker>` locked to gradient mode.
+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.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `value` | string | — | JSON gradient fill data |
+| `edit` | boolean/string | `true` | `true`, `false`, or `"picker"` |
 | `disabled` | boolean | `false` | Disabled state |
 | `experimental` | string | — | Picker feature flags |
 | `picker-*` | string | — | Passthrough picker attributes |
-| `picker-anchor` | string | `"self"` | Anchor selector or `"self"` |
 
 Supported interpolation spaces: `srgb`, `srgb-linear`, `display-p3`, `oklab`, `oklch` (with `hueInterpolation`: `shorter`, `longer`, `increasing`, `decreasing`).
 
@@ -496,7 +504,7 @@ Supported interpolation spaces: `srgb`, `srgb-linear`, `display-p3`, `oklab`, `o
 
 `<fig-input-fill>` — [demo](https://rog.ie/figui3/#fill-input)
 
-A comprehensive fill input supporting solid, gradient, image, and video fills.
+A comprehensive fill input supporting solid, gradient, image, and video fills. Without the optional picker, it renders a passive preview.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
@@ -505,6 +513,7 @@ A comprehensive fill input supporting solid, gradient, image, and video fills.
 | `mode` | string | — | Lock to a fill mode |
 | `experimental` | string | — | Feature flags |
 | `alpha` | boolean | `true` | Show alpha controls |
+| `picker-*` | string | — | Forwarded to `<fig-fill-picker>` when the optional picker is registered |
 
 **Events:**
 
@@ -523,7 +532,7 @@ A comprehensive fill input supporting solid, gradient, image, and video fills.
 
 `<fig-fill-picker>` — [demo](https://rog.ie/figui3/#fill-picker)
 
-Full fill picker dialog supporting solid, gradient, image, video, and webcam. Wraps a trigger element (e.g. `<fig-chit>`).
+Optional full fill picker dialog supporting solid, gradient, image, video, and webcam. Import `fig-editor.js` and `fig-editor.css` to register and style it.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
@@ -693,14 +702,14 @@ A transform-origin grid control with a draggable handle and optional X/Y percent
 
 `<fig-easing-curve>`
 
-An interactive bezier or spring easing curve editor with draggable control points and an optional preset dropdown.
+An interactive bezier or spring easing curve editor with a preset dropdown and manual value input.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
 | `value` | string | — | Bezier: `"0.42, 0, 0.58, 1"` or Spring: `"spring(200, 15, 1)"` |
 | `precision` | number | `2` | Decimal places |
 | `aspect-ratio` | string | — | Editor aspect ratio |
-| `dropdown` | boolean | `false` | Show preset dropdown |
+| `edit` | boolean | `true` | Show the editor and custom bezier/spring options; set to `"false"` for preset-only |
 
 **Static:** `FigEasingCurve.PRESETS` — built-in preset array. `FigEasingCurve.curveIcon(value)` — SVG icon helper.
 
@@ -712,8 +721,8 @@ An interactive bezier or spring easing curve editor with draggable control point
 | `change` | `{ mode, value, cssValue, preset }` — on release |
 
 ```html
-<fig-easing-curve value="0.42, 0, 0.58, 1" dropdown="true"></fig-easing-curve>
-<fig-easing-curve value="spring(200, 15, 1)"></fig-easing-curve>
+<fig-easing-curve value="0.42, 0, 0.58, 1"></fig-easing-curve>
+<fig-easing-curve value="spring(200, 15, 1)" edit="false"></fig-easing-curve>
 ```
 
 ---
@@ -765,8 +774,8 @@ A draggable handle element. Positioned on a `drag-surface` container with axis c
 | `drag-surface` | string | — | CSS selector for drag container (defaults to parent) |
 | `drag-axes` | string | `"xy"` | Constrain axes: `"x"`, `"y"`, `"xy"` |
 | `drag-snapping` | string | — | Snapping behavior |
-| `type` | string | — | `"color"` for color handle with direct solid color picker |
-| `color-tip` | boolean | `false` | For `type="color"`, use the compact `fig-color-tip` interaction instead of opening the picker directly |
+| `type` | string | — | `"color"` for a color handle with direct picker activation |
+| `color-tip` | boolean | `false` | For `type="color"`, use the compact `fig-color-tip` interaction instead of direct activation |
 | `control` | string | — | `"add"` or `"remove"` delegated to color tip |
 | `hit-area` | string | — | Expanded interaction zone (unitless px). `"8"`, `"8 12"` (v h), or `"8 circle"` |
 | `hit-area-mode` | string | `"handle"` | `"handle"` proxies to handle drag/select; `"delegate"` emits `hitareadown` event |
@@ -856,7 +865,7 @@ A form field wrapper with flexible layout. Automatically links `<label>` to the
 ```html
 <fig-field direction="horizontal" columns="thirds">
   <label>Opacity</label>
-  <fig-slider value="50" text="true" units="%"></fig-slider>
+  <fig-slider value="50" units="%"></fig-slider>
 </fig-field>
 ```
 
@@ -1007,6 +1016,7 @@ A thin styled layer for arbitrary visual content. Use it for generated previews,
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
+| `fit` | string | `contain` | Object fit for direct media children |
 | `full` | boolean | `false` | Stretch to the available width |
 | `checkerboard` | boolean | `false` | Show checkerboard behind transparent content |
 
@@ -1238,7 +1248,7 @@ function ColorPicker({ value, onChange }) {
     if (ref.current) ref.current.setAttribute('value', value);
   }, [value]);
 
-  return <fig-input-color ref={ref} text="true" alpha="true" picker="figma" />;
+  return <fig-input-color ref={ref} text="true" alpha="true" />;
 }
 ```
 
@@ -1298,10 +1308,12 @@ npm run build:css      # Build minified CSS only
 
 | Source | Minified | Tool |
 |---|---|---|
-| `fig.js` (416 KB) | `dist/fig.js` (228 KB) | Bun `--minify` |
-| `fig.css` (133 KB) | `dist/fig.css` (102 KB) | lightningcss `--minify --nesting --bundle` |
-| `base.css` (1.9 KB) | `dist/base.css` (1.5 KB) | lightningcss |
-| `components.css` (131 KB) | `dist/components.css` (100 KB) | lightningcss |
+| `fig.js` (413 KB) | `dist/fig.js` (223 KB) | Bun `--minify` |
+| `fig-editor.js` (67 KB) | `dist/fig-editor.js` (37 KB) | Bun `--minify` |
+| `fig.css` | `dist/fig.css` (102 KB) | lightningcss `--minify --nesting --bundle` |
+| `components.css` (130 KB) | `dist/components.css` (100 KB) | lightningcss |
+| `fig-editor.css` (6 KB) | `dist/fig-editor.css` (4 KB) | lightningcss |
+| `base.css` (2 KB) | `dist/base.css` (2 KB) | lightningcss |
 
 Default imports resolve to minified `dist/` files. Unminified source is available via `@rogieking/figui3/src/*`: