@rogieking/figui3 8.11.0 → 9.0.0

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

@@ -2,129 +2,6 @@
 
 React recipes: [components.md](components.md).
 
-## Propskit reset
-
-- `default` attr stores the reset value
-- `resetToDefault()` on the host
-- Context menu item `reset-default`
-- Slider: double-click also resets
-- Equality helpers treat booleans and JSON objects
-
-## Propskit switch variants
-
-`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 surfaces and events
-
-Surface controls do not compose `fig-field`. Most are horizontal; spatial,
-curve, and image controls use vertical layouts. 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` extend the shared PropsKit envelope with
-  `label`; `value` remains the stable option value
-- `isDefault` uses structural equality; `resetToDefault()` restores `default`
-
-## `propskit-image`
-
-Observed: `options`, `value`, `default`, `label`, `aria-label`, `disabled`.
-
-Renders a label and permanent ghost upload button above a conditional
-`fig-chooser`. The chooser always uses `layout="grid"` and `columns="2"`;
-each `fig-choice` contains a square, cover-fit `fig-image` and an
-attachment-style remove control.
-
-- `options`: optional JSON string array of image URLs
-- `.options`: normalized, de-duplicated URL array
-- `.value`, `defaultValue`, and event `detail.value`: selected URL string
-- First option is the fallback when `value` is omitted or does not match
-- Selecting one or more image files appends object URLs and selects the first
-  new image; applications own durable upload and URL replacement
-- Removing a choice reflects the reduced `options` array and revokes an object
-  URL when needed; removing the selected choice falls back to the first option
-  and emits `input` and `change`
-- Delete and Backspace remove the focused choice
-- `input` and `change` use the shared PropsKit envelope
-- Supports `variant="minimal"`, `isDefault`, `resetToDefault()`, and focus
-  delegation
-
-## `propskit-select`
-
-Observed: `label`, `aria-label`, `options`, `value`.
-
-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-editable-select`
-
-Observed: `options`, `value`, `default`, `aria-label`, `disabled`.
-
-Renders a label-free, always-subtle, content-width `fig-select` on the left,
-with default-size secondary edit and add buttons on the right inside one
-full-row PropsKit surface. The row uses the standard PropsKit padding,
-background, border, color, hover, and focus variables.
-
-- `options` accepts comma, newline, or JSON values supported by `fig-select`
-- `.options` returns normalized `{ value, label }[]` entries
-- Clicking the host opens the select except when edit or add is clicked
-- The options menu is positioned and sized to the full PropsKit row
-- Add creates an `item-{index}` value using its zero-based array index with the
-  label `"New item"`, selects it, and opens rename mode
-- Edit replaces the select with a default-size, full-width `fig-input-text`;
-  checkmark, Enter, or moving focus outside the input commits, while Escape
-  cancels
-- Each menu option has an appended ghost trash action; Delete or Backspace
-  removes the focused option
-- Edit/save, add, and trash icon buttons include descriptive tooltips
-- At one remaining item, the select and trash action are disabled; add and edit
-  remain available
-- Renaming updates the reflected options JSON while preserving the option value
-- `input`, `change`, and `optionhover` use the shared PropsKit envelope
-- Supports `defaultValue`, `isDefault`, `editing`, `resetToDefault()`, disabled
-  state propagation, and focus delegation
-
-## `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), `steppers`, `disabled`.
-
-Inner `fig-slider` still needs `min` / `max` / `step` / `value` as forwarded attrs.
-
 ## `fig-input-wheel`
 
 Standalone interactive SVG tick + handle scrubber in the lab bundle.
@@ -141,74 +18,6 @@ Standalone interactive SVG tick + handle scrubber in the lab bundle.
 <fig-input-wheel value="1.5" step="0.25"></fig-input-wheel>
 ```
 
-## `propskit-wheel`
-
-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
@@ -218,10 +27,6 @@ interactive descendant.
 {"x":10,"y":10,"x2":90,"y2":90}
 ```
 
-Color-point combines a color payload with `x`/`y`.
-
-Collapsible point groups: `collapsible` and `open` default true (string booleans).
-
 ## `fig-canvas-control`
 
 Observed: `type`, `value`, `color`, `name`, `tooltips`, `disabled`, `drag-surface`, `snapping`.
@@ -242,7 +47,7 @@ Observed: `axis`, `handle`, `disabled`.
 
 Event `reorder`: `{ oldIndex, newIndex, item }`.
 
-Nested drag is ignored for sliders, handles, canvas controls, and most propskit spatial controls so inner gestures still work. If a row is still stolen, set `handle` to a drag-affordance selector.
+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
 

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

@@ -5,7 +5,6 @@ description: >-
   including React JSX usage. Use when adding, using, or debugging fig-* elements from
   the core bundle—buttons, fields, overlays, menus, sliders, color/fill inputs, media,
   dialogs, popups, toasts. Not for fig-select or fig-fill-picker (fig-editor),
-  propskit-* / AI / canvas / angle / wheel / reorder (fig-lab), or fig-layer.
 user-invocable: false
 ---
 
@@ -15,7 +14,6 @@ Zero-dependency web components for Figma UI3 plugin and widget UIs.
 
 Public API: `README.md`. React: [react.md](react.md). Per-tag JSX: [components.md](components.md). Attrs: [reference.md](reference.md).
 
-Related skills: `fig-editor` (`fig-select`, `fig-fill-picker`), `fig-lab` (`propskit-*`, AI, canvas), `propkit` (property-row composition).
 
 ## Bundles
 
@@ -30,7 +28,6 @@ import "@rogieking/figui3/fig.js";
 |---|---|---|
 | **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` |
-| **Lab** (unstable) | `fig-lab.css` + `fig-lab.js` | `propskit-*`, `fig-ai-*`, `fig-canvas-control`, `fig-input-angle`, `fig-input-wheel`, `fig-reorder` |
 | **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`.
@@ -71,7 +68,6 @@ import "@rogieking/figui3/fig.js";
 </fig-field>
 ```
 
-Labeled property wrappers (`propskit-*`) are lab. See the `propkit` and `fig-lab` skills.
 
 ## Select vs dropdown
 
@@ -79,7 +75,6 @@ Labeled property wrappers (`propskit-*`) are lab. See the `propkit` and `fig-lab
 |---|---|---|
 | `fig-dropdown` | core | Native `<select>` wrapper. `type="select\|dropdown"`, `variant="ghost"` |
 | `fig-select` | editor | Custom listbox: groups, overflow chevrons, sticky separators, rich options |
-| `propskit-select` | lab | Full-surface labeled field around `fig-select` |
 
 Prefer `fig-select` for Figma-style menus. Use `fig-dropdown` only for a native select.
 

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

@@ -112,28 +112,6 @@ type FigTag =
   | "fig-tooltip"
   | "fig-truncate"
   | "fig-video"
-  | "propskit-color"
-  | "propskit-color-point"
-  | "propskit-fill"
-  | "propskit-gradient"
-  | "propskit-group"
-  | "propskit-easing"
-  | "propskit-image"
-  | "propskit-number"
-  | "propskit-oscillator"
-  | "propskit-point-point"
-  | "propskit-point-radius"
-  | "propskit-point-radius-angle"
-  | "propskit-position"
-  | "propskit-joystick"
-  | "propskit-origin"
-  | "propskit-editable-select"
-  | "propskit-select"
-  | "propskit-slider"
-  | "propskit-spring"
-  | "propskit-switch"
-  | "propskit-text"
-  | "propskit-wheel";
 
 declare module "react" {
   namespace JSX {
@@ -150,7 +128,6 @@ declare module "react" {
 
 ## Host JSX
 
-Render the custom elements as tags. Children are React nodes (`key` on lists). `className` works on `fig-*`, `propskit-*`, and `<dialog is="fig-…">`.
 
 ```tsx
 <fig-field direction="horizontal">
@@ -208,7 +185,7 @@ function readValue(event: Event) {
 
 Native `addEventListener` only when React does not map the event: dialog `close` / `cancel`, delegated host clicks, imperative APIs.
 
-Common events: `input`, `change`, `loaded`, `optionhover`, `reorder`, `remove`, `modeready`, `webcamstream`, `close`.
+Common events: `input`, `change`, `loaded`, `optionhover`, `optionschange`, `reorder`, `remove`, `modeready`, `webcamstream`, `close`.
 
 ## Customized built-ins
 

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

@@ -4,7 +4,6 @@ Public API: `README.md`. React recipes: [components.md](components.md).
 
 ## Option string formats
 
-Shared by `fig-dropdown`/`fig-options`/`fig-select`/`propskit-select` `options`:
 
 - Comma-separated: `Left,Center,Right`
 - Newline-delimited

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

@@ -2,100 +2,27 @@
 name: propkit
 description: >-
   Guides Figma-style property panel composition using fig-field rows and FigUI3
-  controls, including React JSX. Use when building labeled property panels or
-  choosing between raw fig-* rows and propskit-* wrappers (fig-lab).
+  controls, including React JSX.
 user-invocable: false
 ---
 
 # PropKit
 
-Patterns for Figma property panels. Two layers:
+Compose property panels from horizontal `fig-field` rows and core `fig-*` controls.
 
-| Surface | What to use |
-|---|---|
-| **Core rows** | Horizontal `fig-field` + core `fig-*` |
-| **Lab wrappers** | `propskit-*` (see `fig-lab` skill) |
-
-Core tags: `figui3` skill + [../figui3/components.md](../figui3/components.md). React: [../figui3/react.md](../figui3/react.md). Select/fill picker: `fig-editor`. Labeled wrappers: `fig-lab`.
+Core tags: `figui3` skill + [../figui3/components.md](../figui3/components.md). React: [../figui3/react.md](../figui3/react.md). Select/fill picker: `fig-editor`.
 
 ## Principles
 
 1. Default to horizontal `fig-field` rows.
-2. One concise label per control.
-3. For new labeled property controls in lab, prefer `propskit-*` over duplicating field chrome.
-4. Compose from `fig-*` unless the row needs lab wrappers.
-5. Panel width ~240px. Keep density tight.
-
-## Field composition
+2. Use one concise label per control.
+3. Put control attributes on the control, not the field.
+4. Use `full` when the control should stretch.
+5. Wire `input` for live updates and `change` for commits.
 
 ```tsx
 <fig-field direction="horizontal">
   <label>Opacity</label>
-  <fig-slider
-    value={String(opacity)}
-    min="0"
-    max="100"
-    text="true"
-    units="%"
-    full
-    onInput={onInput}
-    onChange={onChange}
-  />
+  <fig-slider value="100" min="0" max="100" units="%" text="true" full />
 </fig-field>
 ```
-
-- Put control attrs on the control, not a wrapper.
-- Use `full` when the control should stretch.
-- Do not mix unrelated controls in one row unless grouped on purpose.
-- Add `fig-editor` when using `fig-select` / fill picker. Add `fig-lab` when using `propskit-*`.
-
-## Control heuristics
-
-| Intent | Core | Lab wrapper |
-|---|---|---|
-| Boolean | `fig-switch` | `propskit-switch` |
-| Continuous number | `fig-slider` | `propskit-slider` |
-| Exact number | `fig-input-number` | `propskit-number` |
-| Text | `fig-input-text` | `propskit-text` |
-| Small discrete set (2–5) | `fig-segmented-control` | — |
-| Larger / rich list | `fig-select` (editor) | `propskit-select` |
-| Addable / renameable / removable list | `fig-select` + action buttons | `propskit-editable-select` |
-| Native select only | `fig-dropdown` | — |
-| Color | `fig-input-color` `text="true"` | `propskit-color` (fill-picker swatch) |
-| Fill | `fig-input-fill` | `propskit-fill` (fill-picker swatch) |
-| Gradient | `fig-input-gradient` | `propskit-gradient` |
-| Image | `fig-image` `upload` | `propskit-image` |
-| Easing | `fig-easing-curve` | — |
-| Angle | `fig-input-angle` (**lab**) | — |
-| X/Y | `fig-joystick` or two numbers | `propskit-position` |
-
-Do not use dropdown/slider for pure on/off. Do not use `fig-dropdown` for Figma-style property selects when `fig-select` is available.
-
-Secondary `fig-button` controls nested in PropsKit use the same borderless
-`--propskit-bg-subfield` treatment as ghost subfield selects. This treatment
-persists on hover and while disabled.
-
-## Slider rules
-
-- Default `type="range"`. Always set `min`, `max`, `step`.
-- `opacity`: set `color`, usually `units="%"`
-- `hue`: hue workflows only
-- `stepper`: include a datalist of stops
-- `delta`: include `default`, often symmetric min/max
-- Text field on by default; `text="false"` for compact rows
-- `transform` when internal scale ≠ display scale
-- `variant="classic"` only when the old look is required
-
-Prompt style: imperative, include direction, tag, and behavior-critical attrs.
-
-```txt
-Use a horizontal fig-field, with a fig-slider, min=0 max=100 text=true units=%. With a label of Opacity.
-```
-
-## Workflow
-
-1. Identify intent (boolean, discrete, continuous, color/fill, media, motion).
-2. Pick core vs lab wrapper.
-3. Compose the row; set defaults explicitly.
-4. Wire `onInput` (live) and `onChange` (commit).
-5. Verify keyboard.