@rogieking/figui3 9.0.1 → 9.0.3

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

@@ -9,7 +9,7 @@ Install `fig-editor.css` + `fig-editor.js` (pulls in `fig.js` and `fig-lab.js`).
 Figma-style listbox. Prefer this over core `fig-dropdown`.
 
 ```tsx
-<fig-select value={align} label="Align" full onChange={onChange}>
+<fig-select value={align} label="Align" size="large" full onChange={onChange}>
   <fig-select-options>
     <fig-select-option value="left">Left</fig-select-option>
     <fig-select-option value="center">Center</fig-select-option>
@@ -29,7 +29,7 @@ Data-driven (no authored options):
 />
 ```
 
-- Attrs: `value`, `label`, `options` (comma / newline / JSON), `variant` (`ghost`), `subtle` (applies the secondary hover/focus fill to every option), `full`, `disabled`, `position` (`bottom left` default, also `bottom right`, `top left`, `top right`, `bottom center`, `top center`), `offset`, `closedby`, `open`
+- Attrs: `value`, `label`, `options` (comma / newline / JSON), `variant` (`ghost`), `size` (`large`, 32px trigger), `subtle` (applies the secondary hover/focus fill to every option), `full`, `disabled`, `position` (`bottom left` default, also `bottom right`, `top left`, `top right`, `bottom center`, `top center`), `offset`, `closedby`, `open`
 - Events: `input` / `change` on commit; `optionhover` with the option value in `detail` (does not change selection). Use a native listener for `optionhover`.
 - Do not `stopPropagation` on option click — React light-DOM handlers must run.
 - Internal popup uses `popover="manual"` so the list works inside `fig-popup variant="popover"`.

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

@@ -21,9 +21,10 @@ Observed: `value`, `disabled`, `selected`, `label`.
 
 ## `fig-select` observed
 
-`value`, `disabled`, `label`, `options`, `position`, `offset`, `closedby`, `open`, `variant`
+`value`, `disabled`, `label`, `options`, `position`, `offset`, `closedby`, `open`, `variant`, `size`
 
 - `subtle` applies the secondary hover/focus fill to every option
+- `size="large"` sets a 32px trigger
 
 Position enum:
 

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

@@ -31,13 +31,13 @@ Handlers below assume `onInput` / `onChange` / `onClick` from [react.md](react.m
 ### `fig-dropdown`
 
 ```tsx
-<fig-dropdown value={value} variant="ghost" full onChange={onChange}>
+<fig-dropdown value={value} variant="ghost" size="large" full onChange={onChange}>
   <option value="left">Left</option>
   <option value="center">Center</option>
 </fig-dropdown>
 ```
 
-- Attrs: `value`, `type` (`select` | `dropdown`), `variant` (`ghost`), `full`, `disabled`
+- Attrs: `value`, `type` (`select` | `dropdown`), `variant` (`ghost`), `size` (`large`), `full`, `disabled`
 - Events: `input` / `change` → `currentTarget.value`
 - Prefer `fig-select` (editor) for Figma-style menus.
 

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

@@ -25,7 +25,7 @@ Public API: `README.md`. React recipes: [components.md](components.md).
 
 ## `fig-dropdown`
 
-- `value`, `type="select|dropdown"`, `variant="ghost"`, `full`, `disabled`
+- `value`, `type="select|dropdown"`, `variant="ghost"`, `size="large"` (32px), `full`, `disabled`
 - Children: native `<option>` / `<optgroup>`
 
 ## `fig-slider`

package/README.md

@@ -190,10 +190,11 @@ Minimal example:
 | `type` | string | `"select"` | `"select"` or `"dropdown"` |
 | `label` | string | — | Accessible label for the generated native `<select>` |
 | `variant` | string | — | `"ghost"` for a borderless control with secondary hover fill |
+| `size` | string | — | `"large"` for a 32px-tall control |
 | `disabled` | boolean | `false` | Disabled state |
 
 ```html
-<fig-dropdown value="2">
+<fig-dropdown value="2" size="large">
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
 </fig-dropdown>
@@ -215,6 +216,7 @@ Custom listbox select with overflow chevrons, grouped options, and sticky separa
 | `label` | string | — | Closed-state / accessible label |
 | `options` | string | — | Comma, newline, or JSON options if no authored `fig-select-option` children |
 | `variant` | string | — | `"ghost"` for a borderless control with secondary hover fill |
+| `size` | string | — | `"large"` for a 32px-tall trigger |
 | `subtle` | boolean | `false` | Use the secondary hover/focus fill for every option |
 | `full` | boolean | `false` | Stretch to available width |
 | `position` | string | `"bottom left"` | Popup position |
@@ -223,7 +225,7 @@ Custom listbox select with overflow chevrons, grouped options, and sticky separa
 Author options in `<fig-select-options>`, or pass `options`. Add `subtle` to one `<fig-select-option>` for the secondary hover/focus fill, or to `<fig-select>` to apply it to every option. Use `label` on `<fig-select-option>` when the option content is rich. `fig-separator` with `sticky` pins group labels while scrolling.
 
 ```html
-<fig-select value="center" label="Align">
+<fig-select value="center" label="Align" size="large">
   <fig-select-options>
     <fig-select-option value="left">Left</fig-select-option>
     <fig-select-option value="center">Center</fig-select-option>
@@ -829,11 +831,41 @@ An interactive bezier or spring easing curve editor with a preset dropdown and m
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
-| `value` | string | — | Bezier: `"0.42, 0, 0.58, 1"` or Spring: `"spring(200, 15, 1)"` |
+| `value` | string | — | Bezier/spring shorthand or a serialized easing object |
 | `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 |
+| `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 |
+
+The `value` property also accepts a structured object. Structured values require a `type` unless the `mode` attribute supplies it. If both are present, they must agree.
+
+```js
+curve.value = {
+  type: "spring",
+  mass: 1,
+  stiffness: 200,
+  damping: 12,
+  initialVelocity: 0,
+};
+
+curve.spring; // A cloned { mass, stiffness, damping, initialVelocity } object
+curve.value;  // "spring(200, 12, 1)"
+```
+
+The same data can be supplied declaratively. With `mode="spring"`, `type` is optional:
+
+```html
+<fig-easing-curve
+  mode="spring"
+  value='{"mass":1,"stiffness":200,"damping":12,"initialVelocity":0}'
+></fig-easing-curve>
+```
+
+Bezier objects use `{ type: "bezier", x1, y1, x2, y2 }`. Spring shorthand accepts an optional fourth initial-velocity value: `spring(stiffness, damping, mass, initialVelocity)`.
+
+In spring mode, the compact number input edits normalized bounce from `0` (critically damped) to `1` (undamped). Bounce is converted to the equivalent damping value in the structured spring configuration.
 
 **Static:** `FigEasingCurve.PRESETS` — built-in preset array. `FigEasingCurve.curveIcon(value)` — SVG icon helper.
 
@@ -841,12 +873,13 @@ An interactive bezier or spring easing curve editor with a preset dropdown and m
 
 | Event | Detail |
 |---|---|
-| `input` | `{ mode, value, cssValue, preset }` — while dragging |
-| `change` | `{ mode, value, cssValue, preset }` — on release |
+| `input` | `{ mode, value, cssValue, preset, spring? }` — while dragging |
+| `change` | `{ mode, value, cssValue, preset, spring? }` — on release |
 
 ```html
 <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>
+<fig-easing-curve value="0.42, 0, 0.58, 1" presets="false" text="false"></fig-easing-curve>
 ```
 
 Editable bezier and spring handles are keyboard operable. Bezier handles keep tab order aligned with the visual handle order.

package/components.css

@@ -686,7 +686,7 @@ input[type="text"][list] {
   
 
   &:not([multiple]) {
-    height: var(--spacer-4);
+    height: var(--fig-dropdown-height, var(--spacer-4));
     padding: 0 var(--spacer-4) 0 var(--spacer-2);
     background: calc(100% - var(--spacer-1)) 50% / 1rem no-repeat
     var(--icon-16-chevron);
@@ -1924,8 +1924,9 @@ fig-easing-curve {
 
   width: 100%;
   .fig-easing-curve-svg {
+    display: block;
     width: 100%;
-    aspect-ratio: var(--aspect-ratio);
+    height: 100%;
     overflow: visible;
   }
   .fig-easing-curve-svg-container {
@@ -3457,6 +3458,10 @@ fig-input-palette {
 }
 
 fig-dropdown {
+  &[size="large"] {
+    --fig-dropdown-height: var(--spacer-5);
+  }
+
   &[full]:not([full="false"]) {
     display: flex;
     width: 100%;