@rogieking/figui3 8.9.49 → 8.10.0

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

@@ -32,9 +32,9 @@ Registered tags:
 
 | Tag | Role |
 |---|---|
-| `fig-select` | Trigger + popup listbox |
+| `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`) |
+| `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 |
 
@@ -42,7 +42,7 @@ Registered tags:
 
 - `fig-dropdown` (core): native `<select>`.
 - `fig-select` (this skill): custom listbox. Use this for Figma-style menus.
-- `propskit-select` (lab): labeled `fig-field` wrapping `fig-select` (falls back if select is not registered).
+- `propskit-select` (lab): labeled horizontal surface that always renders `fig-select`; this editor bundle is required to register and style it.
 
 Author options as React children, or pass `options`. Do not `stopPropagation` on option click. `optionhover` is a native listener.
 

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

@@ -29,7 +29,7 @@ Data-driven (no authored options):
 />
 ```
 
-- Attrs: `value`, `label`, `options` (comma / newline / JSON), `variant` (`ghost`), `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`), `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"`.
@@ -63,7 +63,7 @@ Data-driven (no authored options):
 </fig-select-option>
 ```
 
-- Attrs: `value` (falls back to trimmed `textContent`), `label` (closed-trigger text when content is rich), `selected`, `disabled`
+- 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-fill-picker`

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

@@ -8,6 +8,7 @@ Observed: `value`, `disabled`, `selected`, `label`.
 
 - `value` falls back to trimmed `textContent` if the attr is omitted
 - `label` is the closed-trigger string when option content is rich
+- `subtle` uses the secondary hover/focus fill
 - `role="option"`, `aria-selected`, `aria-disabled`
 
 ## `fig-select-options`
@@ -22,6 +23,8 @@ Observed: `value`, `disabled`, `selected`, `label`.
 
 `value`, `disabled`, `label`, `options`, `position`, `offset`, `closedby`, `open`, `variant`
 
+- `subtle` applies the secondary hover/focus fill to every option
+
 Position enum:
 
 - `bottom left`, `bottom right`, `top left`, `top right`, `bottom center`, `top center`

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

@@ -27,33 +27,42 @@ import "@rogieking/figui3/fig-lab.css";
 import "@rogieking/figui3/fig-lab.js";
 ```
 
-`propskit-select` prefers `fig-select` (import `fig-editor.js` + `fig-editor.css`). Without editor, it falls back.
+`propskit-select` and `propskit-palette` render `fig-select`; import `fig-editor.js` + `fig-editor.css` to register and style them.
 
 `fig-editor.js` already imports `fig-lab.js`; lab **CSS** is still required for lab visuals.
 
 ## Shared propskit
 
-- `label`, `direction` (`horizontal` default), `size` (`""` | `small`; `large` remains an alias for the default), `disabled`
-- `variant="minimal"` — removes vertical row padding and reveals the field background on hover
+- Plain labeled component surfaces; joystick, origin, easing, and spring use a
+  vertical label-above-control layout
+- `label` (omitted renders `"Label"`; `label=""` hides it), `disabled`
+- Optional `name` reflects to the host and appears in event details only when non-empty
 - `default` — reset target (may differ from initial `value`)
 - Right-click **Reset** menu; `resetToDefault()` on a ref
 - `propskit-slider` also double-click resets
 - Forward remaining attrs to the inner control except where a component note says otherwise
-- Rows are large by default; `propskit-group size="small"` applies compact sizing to children without an authored size
+- `input` / `change`: `{ control, value, name? }`, dispatched from the outer host; `event.target.value === event.detail.value`. Select `optionhover` uses the same envelope
+- Switch values are boolean; numeric number/slider/wheel values are finite numbers or `null`; structured and serialized values exactly match the host `.value`
+- Shared style variables use `--propskit-{padding-block,padding-inline,background,border,color,hover-background,hover-border,hover-color,label-inline-size,input-inline-size}`; use a tag prefix such as `--propskit-select-background` for one control
 
 ## Control choice
 
 | Intent | Use |
 |---|---|
-| Labeled boolean | `propskit-switch` |
+| Labeled boolean | `propskit-switch` (`fig-switch` by default; `variant="segmented-control"` for Off/On choices) |
 | Labeled continuous number | `propskit-slider` |
 | Standalone scrubbable number | `fig-input-wheel` |
 | Labeled scrubbable number or time | `propskit-wheel` |
 | Labeled exact number | `propskit-number` |
 | Labeled text | `propskit-text` |
 | Labeled discrete list | `propskit-select` (not `fig-dropdown`) |
+| Labeled palette choice | `propskit-palette` |
 | Labeled color / fill / gradient | `propskit-color` / `propskit-fill` / `propskit-gradient` |
 | X/Y | `propskit-position` |
+| Interactive X/Y plane | `propskit-joystick` |
+| Transform origin | `propskit-origin` |
+| Cubic-bezier easing | `propskit-easing` |
+| Spring motion | `propskit-spring` |
 | Spatial on a canvas | `fig-canvas-control` |
 | Angle | `fig-input-angle` |
 | Section of props | `propskit-group` or core `fig-group` |

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

@@ -2,17 +2,21 @@
 
 Experimental. APIs may change. React contract: [../figui3/react.md](../figui3/react.md). Attrs: [reference.md](reference.md).
 
-Install `fig-lab.css` + `fig-lab.js`. `propskit-select` prefers `fig-select` — also import `fig-editor.js` + `fig-editor.css` for rich menus. `fig-editor.js` already imports `fig-lab.js`; lab **CSS** is still required.
+Install `fig-lab.css` + `fig-lab.js`. `propskit-select` and `propskit-palette` use `fig-select`, so also import `fig-editor.js` + `fig-editor.css`. `fig-editor.js` already imports `fig-lab.js`; lab **CSS** is still required.
 
 Handlers below assume `onInput` / `onChange` from the React contract.
 
 ## Shared propskit
 
-Full-surface `fig-field` wrappers. Prefer these over hand-rolled label+control rows.
+Plain horizontal component surfaces. Prefer these over hand-rolled label+control rows.
 
-Shared attrs: `label`, `direction` (`horizontal` default), `size` (`""` | `small`; `large` is an alias for default), `disabled`, `variant="minimal"` (no vertical padding; field background on hover), `default` (reset target, may differ from initial `value`).
+Shared attrs: `label` (omitted renders `"Label"`; `label=""` hides it), optional `name`, `disabled`, `default` (reset target, may differ from initial `value`).
 
-Right-click **Reset**; `resetToDefault()` on a ref. `propskit-slider` also double-click resets. Remaining attrs forward to the inner control. Rows are large by default; `propskit-group size="small"` applies compact sizing to children without an authored size.
+Right-click **Reset**; `resetToDefault()` on a ref. `propskit-slider` also double-click resets. Remaining attrs forward to the inner control.
+
+`input` and `change` dispatch from the outer host with `{ control, value, name? }`; `event.target.value` matches `detail.value`. `optionhover` uses the same envelope. Numeric number/slider/wheel values are finite numbers or `null`.
+
+Shared CSS variables: `--propskit-padding-block`, `--propskit-padding-inline`, `--propskit-background`, `--propskit-border`, `--propskit-color`, `--propskit-hover-background`, `--propskit-hover-border`, `--propskit-hover-color`, `--propskit-label-inline-size`, and `--propskit-input-inline-size`. Prefix the control name for one row, for example `--propskit-select-background`.
 
 ```tsx
 const rowRef = useRef<HTMLElement>(null);
@@ -26,13 +30,14 @@ rowRef.current?.resetToDefault();
 ```tsx
 <propskit-switch
   label="Visible"
+  variant="switch"
   checked={on ? "true" : undefined}
   default="true"
   onInput={onInput}
 />
 ```
 
-- Inner: `fig-switch`. `checked` / `default` boolean.
+- Inner: `fig-switch` by default. `variant="segmented-control"` renders the Off/On `fig-segmented-control`. The full surface toggles either control. `checked`, `default`, `.value`, and event values are boolean.
 
 ### `propskit-color`
 
@@ -46,7 +51,7 @@ rowRef.current?.resetToDefault();
 />
 ```
 
-- Inner: `fig-fill-picker` + `fig-swatch`. Clicking the field opens the picker anchored to the host. Focus ring on the field, not the swatch.
+- Inner: `fig-fill-picker` + `fig-swatch`. Clicking the surface opens the picker anchored to the host. Focus ring on the surface, not the swatch.
 
 ### `propskit-fill`
 
@@ -76,7 +81,22 @@ rowRef.current?.resetToDefault();
 />
 ```
 
-- Inner: `fig-input-gradient`. Default `edit="picker"`. `mode="handle|tip"` for inline edit. Clicking the field opens the picker anchored to the host.
+- Inner: `fig-input-gradient`. Default `edit="picker"`. `mode="handle|tip"` for inline edit. Clicking the surface opens the picker anchored to the host.
+
+### `propskit-palette`
+
+```tsx
+<propskit-palette
+  label="Palette"
+  options='[["#0D99FF","#14AE5C"],[{"color":"#FFCD29","alpha":0.5},"#F24822"]]'
+  onInput={onInput}
+  onChange={onChange}
+/>
+```
+
+- Inner: `fig-select` with fixed, disabled `fig-input-palette` previews. Requires the editor bundle.
+- `options` is an array of palette arrays. Public and event values are typed `{ color, alpha }[]`; omission of `value` selects the first palette.
+- Supports `optionhover`, typed `defaultValue`, `isDefault`, and `resetToDefault()`.
 
 ### `propskit-select`
 
@@ -101,7 +121,7 @@ Rich options (requires editor):
 </propskit-select>
 ```
 
-- Inner: `fig-select` when registered; otherwise a fallback. Authored `fig-select-options slot="panel"` wins. Options stay in light DOM.
+- Inner: always `fig-select`; editor registration is required. Authored `fig-select-options slot="panel"` wins. Options stay in light DOM.
 
 ### `propskit-text`
 
@@ -114,7 +134,10 @@ Rich options (requires editor):
 />
 ```
 
-- Inner: `fig-input-text`. `type`, `readonly`.
+- Inner: `fig-input-text` with `multiline` and `autoresize` enabled by default.
+  It starts at one line and grows through four lines. Use `"false"` to disable
+  either default. The inner control is always `type="text"`; the host `type`
+  attribute is not forwarded. `readonly` is forwarded.
 
 ### `propskit-number`
 
@@ -138,7 +161,6 @@ Rich options (requires editor):
 ```tsx
 <propskit-slider
   label="Opacity"
-  direction="horizontal"
   type="opacity"
   value="100"
   default="100"
@@ -163,7 +185,7 @@ Rich options (requires editor):
 />
 ```
 
-- Inner: `fig-input-wheel` + optional `fig-input-number`. Attrs: `label`, `text`, `spin`, `elastic` (row stretch, default true), `precision`, `units`, `default`, `size`, `variant`. Units stay on the wrapper; effective step is applied to the wheel. `spin="false"` updates value without moving ticks.
+- Inner: `fig-input-wheel` + optional `fig-input-number`. Attrs: `label`, `text`, `spin`, `elastic` (row stretch, default true), `precision`, `units`, `default`. Units stay on the wrapper; effective step is applied to the wheel. `spin="false"` updates value without moving ticks.
 
 ### `propskit-position`
 
@@ -173,6 +195,62 @@ Rich options (requires editor):
 
 - Two numbers. Attrs: `x`, `y`, `units`.
 
+### `propskit-joystick`
+
+```tsx
+<propskit-joystick
+  label="Position"
+  value='{"x":35,"y":65}'
+  default='{"x":50,"y":50}'
+  axis-labels="X Y"
+  onInput={onInput}
+  onChange={onChange}
+/>
+```
+
+- Inner: `fig-joystick` with forced `fields="true"` and `aspect-ratio="1 / 1"`.
+- `.value`, `defaultValue`, and event values are typed `{ x, y }` percentage objects.
+
+### `propskit-origin`
+
+```tsx
+<propskit-origin
+  label="Transform origin"
+  value='{"x":50,"y":50}'
+  default='{"x":50,"y":50}'
+  onInput={onInput}
+/>
+```
+
+- Inner: `fig-origin-grid` with forced `fields="true"` and `aspect-ratio="1 / 1"`.
+- `.value`, `defaultValue`, and event values are typed `{ x, y }` percentage objects.
+
+### `propskit-easing`
+
+```tsx
+<propskit-easing
+  label="Easing"
+  value='{"x1":0.42,"y1":0,"x2":0.58,"y2":1}'
+  onChange={onChange}
+/>
+```
+
+- Inner: `fig-easing-curve` constrained to bezier mode.
+- Typed value: `{ x1, y1, x2, y2 }`.
+
+### `propskit-spring`
+
+```tsx
+<propskit-spring
+  label="Spring"
+  value='{"stiffness":200,"damping":15,"mass":1}'
+  onChange={onChange}
+/>
+```
+
+- Inner: `fig-easing-curve` constrained to spring mode.
+- Typed value: `{ stiffness, damping, mass }`.
+
 ### `propskit-color-point`
 
 ```tsx
@@ -221,7 +299,7 @@ Rich options (requires editor):
 </propskit-group>
 ```
 
-- Attrs: `name`, `open`, `show-reset`, `size`. Children are React nodes.
+- Attrs: `name`, `open`, `show-reset`. Children are React nodes.
 
 ### `propskit-oscillator`
 

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

@@ -10,28 +10,65 @@ React recipes: [components.md](components.md).
 - Slider: double-click also resets
 - Equality helpers treat booleans and JSON objects
 
-## Propskit variants
+## Propskit switch variants
 
-`variant="minimal"` is available on switch, color, fill, gradient, select, text, number, slider, position, and wheel controls. It removes vertical host padding, keeps the inner field transparent at rest, and restores the secondary field background on hover.
+`propskit-switch` accepts `variant="switch|segmented-control"`.
+`switch` is the default and renders `fig-switch`; `segmented-control` renders
+explicit Off/On choices. The full surface toggles either variant. Its `.value`
+and `input` / `change` event values are boolean.
 
-## Propskit sizes
+## Propskit surfaces and events
 
-PropsKit rows are large by default; explicit `size="large"` remains supported.
-`propskit-group size="small"` applies `size="small"` to nested controls that do
-not define their own size and removes generated sizes when the group returns to
-the default size.
+Surface controls are horizontal and do not compose `fig-field`. Omitted `label`
+renders `"Label"` and `label=""` hides the visible label. Optional non-empty
+`name` reflects on the host.
+
+`input` and `change` dispatch from the outer host with
+`{ control, value, name? }`; `event.target.value` equals `detail.value`.
+`propskit-select` and `propskit-palette` use the same envelope for
+`optionhover`. Switch values are boolean. Number, slider, and wheel values are
+finite numbers or `null`. Structured and serialized values are exactly the
+host's public `.value`.
+
+Shared style variables use the suffixes `padding-block`, `padding-inline`,
+`background`, `border`, `color`, `hover-background`, `hover-border`,
+`hover-color`, `label-inline-size`, and `input-inline-size` under the
+`--propskit-*` prefix. A per-control prefix, such as
+`--propskit-select-background`, overrides the shared value.
+
+## `propskit-palette`
+
+Observed: `label`, `aria-label`, `options`, `value`, `disabled`.
+
+Always renders `fig-select` with fixed, disabled `fig-input-palette` previews.
+Import `fig-editor.js` and `fig-editor.css`.
+
+- `options`: JSON array of palette arrays
+- Palette entries: color strings or `{ "color": string, "alpha": number }`
+- `.value`, `defaultValue`, and event `detail.value`: typed `{ color, alpha }[]`
+- First option is the fallback when `value` is omitted or does not match
+- `input`, `change`, and `optionhover` use the shared PropsKit envelope
+- `isDefault` uses structural equality; `resetToDefault()` restores `default`
 
 ## `propskit-select`
 
-Observed: `label`, `direction`, `aria-label`, `options`, `value`.
+Observed: `label`, `aria-label`, `options`, `value`.
 
-Uses `fig-select` when `fig-select`, `fig-select-options`, and `fig-select-option` are registered; otherwise a fallback control.
+Always renders `fig-select`. Import `fig-editor.js` and `fig-editor.css`; delayed registration upgrades the authored element.
 
 Options attr: JSON array, comma, or newline. Authored `fig-select-options slot="panel"` wins for rich menus.
 
+## `propskit-text`
+
+Composes `fig-input-text` with `multiline` and `autoresize` enabled by default.
+The textarea starts at one line, grows with its content, and scrolls after four
+lines. Set `multiline="false"` or `autoresize="false"` to disable either
+default. The inner control is always `type="text"`; a host `type` attribute is
+ignored rather than forwarded.
+
 ## `propskit-slider`
 
-Attrs: `type` (`range`, `hue`, `delta`, `stepper`, `opacity`), `color`, `label`, `default`, `units`, `elastic` (default true), `size`, `steppers`, `disabled`.
+Attrs: `type` (`range`, `hue`, `delta`, `stepper`, `opacity`), `color`, `label`, `default`, `units`, `elastic` (default true), `steppers`, `disabled`.
 
 Inner `fig-slider` still needs `min` / `max` / `step` / `value` as forwarded attrs.
 
@@ -53,13 +90,72 @@ Standalone interactive SVG tick + handle scrubber in the lab bundle.
 
 ## `propskit-wheel`
 
-Composes `fig-input-wheel` with an optional `fig-input-number`. It retains `label`, `text`, `spin`, `precision`, `units`, `default`/reset, `size`, and `variant`. `elastic` defaults to true and controls stretching of the composed row; the child wheel's handle pull remains active when row stretching is disabled. Set `spin="false"` to update the value and number field while leaving wheel ticks stationary. Units and time aliases are wrapper/number-field behavior: normalized `s` defaults to step `0.1` and precision `2`, normalized `ms` defaults to step `100` and precision `0`, and other units default to step `1` and precision `0`. The wrapper applies the effective step and unit-aware `aria-valuetext` to the child wheel, but never sets child `units`.
+Composes `fig-input-wheel` with an optional `fig-input-number`. It retains `label`, `text`, `spin`, `precision`, `units`, and `default`/reset. `elastic` defaults to true and controls stretching of the composed row; the child wheel's handle pull remains active when row stretching is disabled. Set `spin="false"` to update the value and number field while leaving wheel ticks stationary. Units and time aliases are wrapper/number-field behavior: normalized `s` defaults to step `0.1` and precision `2`, normalized `ms` defaults to step `100` and precision `0`, and other units default to step `1` and precision `0`. The wrapper applies the effective step and unit-aware `aria-valuetext` to the child wheel, but never sets child `units`.
 
 ```html
 <propskit-wheel label="Duration" value="1.5" units="seconds"></propskit-wheel>
 <propskit-wheel label="Frames" value="12" text="false"></propskit-wheel>
 ```
 
+## `propskit-joystick`
+
+Composes a PropsKit label above `fig-joystick`. The plane always uses
+`aspect-ratio="1 / 1"` and the X/Y fields are always enabled.
+
+- Observed: `value`, `default`, `label`, `aria-label`, `axis-labels`,
+  `coordinates`, `precision`, `disabled`
+- `value` and `default`: serialized `{ "x": number, "y": number }` percentages
+- `.value`, `defaultValue`, and event `detail.value`: typed `{ x, y }`
+- `input` and `change` use the shared PropsKit envelope
+- `isDefault` compares both axes; `resetToDefault()` restores `default`
+
+```html
+<propskit-joystick
+  label="Position"
+  value='{"x":35,"y":65}'
+  default='{"x":50,"y":50}'
+  axis-labels="X Y"
+></propskit-joystick>
+```
+
+## `propskit-origin`
+
+Composes a PropsKit label above `fig-origin-grid`. The grid always uses
+`aspect-ratio="1 / 1"` and its X/Y fields are always enabled.
+
+- Observed: `value`, `default`, `label`, `aria-label`, `precision`, `drag`,
+  `disabled`
+- `value` and `default`: serialized `{ "x": number, "y": number }` percentages
+- `.value`, `defaultValue`, and event `detail.value`: typed `{ x, y }`
+- `input` and `change` use the shared PropsKit envelope
+
+## `propskit-easing`
+
+Composes a PropsKit label above `fig-easing-curve`, constrained to bezier mode.
+
+- Observed: `value`, `default`, `label`, `aria-label`, `precision`, `edit`,
+  `disabled`
+- `value` and `default`: serialized `{ "x1", "y1", "x2", "y2" }` objects
+- `.value`, `defaultValue`, and event `detail.value`: typed
+  `{ x1, y1, x2, y2 }`
+- X coordinates are clamped to `0–1`; Y coordinates may overshoot
+
+## `propskit-spring`
+
+Composes a PropsKit label above `fig-easing-curve`, constrained to spring mode.
+
+- Observed: `value`, `default`, `label`, `aria-label`, `precision`, `edit`,
+  `disabled`
+- `value` and `default`: serialized `{ "stiffness", "damping", "mass" }`
+  objects
+- `.value`, `defaultValue`, and event `detail.value`: typed
+  `{ stiffness, damping, mass }`
+- Spring values must be positive
+
+All three controls force a square primitive, support `variant="minimal"`,
+participate in PropsKit group reset, and delegate focus to their first
+interactive descendant.
+
 ## Point JSON shapes
 
 ```json

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

@@ -562,6 +562,9 @@ toastRef.current?.showToast();
 <fig-easing-curve value="ease-in-out" onInput={onInput} onChange={onChange} />
 ```
 
+Set `mode="bezier"` or `mode="spring"` to constrain the editor and preset list
+to one curve type.
+
 ### `fig-3d-rotate`
 
 ```tsx

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

@@ -117,14 +117,18 @@ type FigTag =
   | "propskit-fill"
   | "propskit-gradient"
   | "propskit-group"
+  | "propskit-easing"
   | "propskit-number"
   | "propskit-oscillator"
   | "propskit-point-point"
   | "propskit-point-radius"
   | "propskit-point-radius-angle"
   | "propskit-position"
+  | "propskit-joystick"
+  | "propskit-origin"
   | "propskit-select"
   | "propskit-slider"
+  | "propskit-spring"
   | "propskit-switch"
   | "propskit-text"
   | "propskit-wheel";