@rogieking/figui3 8.11.0 → 9.0.0

package/README.md

@@ -58,7 +58,7 @@ import "@rogieking/figui3/fig-editor.css";
 import "@rogieking/figui3/fig-editor.js";
 ```
 
-Opt into experimental Lab and PropsKit components after the core imports:
+Opt into experimental Lab components after the core imports:
 
 ```js
 import "@rogieking/figui3/fig-lab.css";
@@ -76,7 +76,6 @@ Agent skills ship in `.cursor/skills/` (included in the npm package):
 
 - `figui3` — core `fig.js` components
 - `fig-editor` — `fig-select` and `fig-fill-picker`
-- `fig-lab` — experimental `propskit-*`, canvas, AI, angle, wheel, reorder
 - `propkit` — `/propskit` property-row composition
 
 Minimal example:
@@ -103,32 +102,10 @@ Minimal example:
 | [Radio](#radio) | `<fig-radio>` | Radio button |
 | [Switch](#switch) | `<fig-switch>` | Toggle switch |
 | [Slider](#slider) | `<fig-slider>` | Range, hue, opacity, delta, stepper |
-| [Propskit Slider](#propskit-slider) | `<propskit-slider>` | Labeled slider surface |
 | [Input Wheel](#input-wheel) | `<fig-input-wheel>` | Standalone SVG tick-and-handle numeric scrubber |
-| [Propskit Wheel](#propskit-wheel) | `<propskit-wheel>` | Labeled input wheel with optional number field |
-| [Propskit Color](#propskit-color) | `<propskit-color>` | Full-surface labeled color control |
-| [Propskit Fill](#propskit-fill) | `<propskit-fill>` | Full-surface labeled fill control |
-| [Propskit Gradient](#propskit-gradient) | `<propskit-gradient>` | Full-surface labeled gradient control |
-| [Propskit Palette](#propskit-palette) | `<propskit-palette>` | Labeled palette selector |
-| [Propskit Image](#propskit-image) | `<propskit-image>` | Labeled image chooser with upload |
-| [Propskit Number](#propskit-number) | `<propskit-number>` | Full-surface labeled number control |
-| [Propskit Position](#propskit-position) | `<propskit-position>` | Compact X/Y control |
-| [Propskit Joystick](#propskit-joystick) | `<propskit-joystick>` | Labeled two-axis joystick |
-| [Propskit Origin](#propskit-origin) | `<propskit-origin>` | Labeled transform-origin grid |
-| [Propskit Easing](#propskit-easing) | `<propskit-easing>` | Labeled cubic-bezier editor |
-| [Propskit Spring](#propskit-spring) | `<propskit-spring>` | Labeled spring editor |
-| [Propskit Color Point](#propskit-color-point) | `<propskit-color-point>` | Collapsible color and position group |
-| [Propskit Point Point](#propskit-point-point) | `<propskit-point-point>` | Collapsible start and end position group |
-| [Propskit Point Radius](#propskit-point-radius) | `<propskit-point-radius>` | Collapsible position and radius group |
-| [Propskit Point Radius Angle](#propskit-point-radius-angle) | `<propskit-point-radius-angle>` | Collapsible position, radius, and angle group |
-| [Propskit Select](#propskit-select) | `<propskit-select>` | Full-surface labeled select control |
-| [Propskit Editable Select](#propskit-editable-select) | `<propskit-editable-select>` | Addable and renameable select control |
-| [Propskit Switch](#propskit-switch) | `<propskit-switch>` | Full-surface labeled switch control |
-| [Propskit Text](#propskit-text) | `<propskit-text>` | Full-surface labeled text control |
 | [Text Input](#text-input) | `<fig-input-text>` | Styled text/textarea input |
 | [Number Input](#number-input) | `<fig-input-number>` | Numeric input with units |
 | [Input Angle](#input-angle) | `<fig-input-angle>` | Angle/rotation dial and text input |
-| [Propskit Oscillator](#propskit-oscillator) | `<propskit-oscillator>` | Waveform oscillator editor |
 | [Swatch](#swatch) | `<fig-swatch>` | Color/gradient/image swatch |
 | [Color Tip](#color-tip) | `<fig-color-tip>` | Compact color tip with picker |
 | [Color Input](#color-input) | `<fig-input-color>` | Color picker with hex/alpha |
@@ -369,329 +346,6 @@ For `type="range"`, omitting `value` follows native range behavior and starts at
 
 ---
 
-#### Propskit Number
-
-`<propskit-number>`
-
-Uses a plain horizontal surface with `<fig-input-number>`. Number attributes are forwarded to the inner input.
-
-All PropsKit inputs expose `defaultValue`, `isDefault`, and `resetToDefault()`. A
-`propskit-group` uses this shared contract to track its `dirty` state and reset
-each nested input to its own current `default`.
-
-Surface labels default to `"Label"` when omitted; `label=""` removes the visible
-label. PropsKit `input` and `change` events dispatch from the outer control with
-`detail: { control, value, name? }`, and `event.target.value` is the same typed
-value. `name` is included only when a non-empty `name` attribute is authored.
-Switch values are boolean. Number, slider, and wheel values are finite numbers
-or `null`; structured and
-serialized controls expose their exact public `.value`. Select `optionhover`
-uses the same envelope. `openchange` and group `reset` keep their semantic
-details.
-
-Shared surface variables are `--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`. Override one component with the matching prefix,
-such as `--propskit-select-background` or
-`--propskit-number-input-inline-size`.
-
-Nested subfields use `--propskit-bg-subfield` and
-`--propskit-color-border-subfield`. Secondary `fig-button` controls inside any
-PropsKit component use the same borderless subfield background, including
-hover and disabled states.
-
-| Attribute | Type | Default | Description |
-|---|---|---|---|
-| `label` | string | `"Label"` | Field label text; use an empty value to hide it |
-| `name` | string | — | Optional event payload name |
-| `default` | number/string | initial `value` | Right-click reset target |
-| `disabled` | boolean | `false` | Disable interaction |
-| *number attrs* | — | — | All `<fig-input-number>` attributes are forwarded |
-
-**Events:** `input`, `change` — shared PropsKit envelope with `value: number | null`.
-
-Right-click and choose **Reset**, or call `resetToDefault()`, to restore `default` (falling back to the initial value).
-
-```html
-<propskit-number label="Width" value="24" min="0" max="100" units="px"></propskit-number>
-```
-
----
-
-#### Propskit Color
-
-`<propskit-color>`
-
-Uses a plain horizontal surface with a solid `fig-fill-picker` swatch. Clicking the surface opens the color picker. There is no hex/opacity text field.
-
-**Attributes:** `label`, `value`, `default`, `alpha`, `disabled`
-
-**Events:** `input`, `change` — shared PropsKit envelope; `value` is the public color string.
-
-Right-click and choose **Reset**, or call `resetToDefault()`, to restore `default` or the initial color.
-
-```html
-<propskit-color label="Background" value="#0D99FF" alpha="true"></propskit-color>
-```
-
----
-
-#### Propskit Fill
-
-`<propskit-fill>`
-
-Uses a plain horizontal surface with a `fig-fill-picker` swatch, sharing chrome with `propskit-color`. Clicking the surface opens the fill picker for solid, gradient, image, video, webcam, and custom modes. There is no hex/opacity text field.
-
-**Attributes:** `label`, `value` (fill JSON), `default`, `mode`, `alpha`, `webcam-mode`, `default-video`, `disabled`
-
-**Events:** `input`, `change` — shared PropsKit envelope; `value` is the host's serialized fill value.
-
-Right-click and choose **Reset**, or call `resetToDefault()`, to restore `default` or the initial fill. Slot `mode-*` children onto the host to add custom picker tabs.
-
-```html
-<propskit-fill
-  label="Fill"
-  value='{"type":"solid","color":"#0D99FF","alpha":1}'
-></propskit-fill>
-```
-
----
-
-#### Propskit Gradient
-
-`<propskit-gradient>`
-
-Uses a plain horizontal surface with `<fig-input-gradient>`. Defaults to `edit="picker"` — click the surface to open the fill picker.
-
-| Attribute | Type | Default | Description |
-|---|---|---|---|
-| `label` | string | `"Label"` | Field label text; use an empty value to hide it |
-| `value` | JSON string | default gradient | Canonical `{ "type": "gradient", "gradient": { ... } }` data |
-| `default` | JSON string | initial `value` | Right-click and group reset target |
-| `edit` | boolean/string | `"picker"` | `true` (inline stops), `false`, or `"picker"` |
-| `mode` | string | `"handle"` | `"handle"` or `"tip"` stop presentation |
-| `disabled` | boolean | `false` | Disabled state |
-
-**Events:** `input`, `change` — shared PropsKit envelope; `value` is the host's serialized gradient value.
-
-**Methods and state:** `defaultValue`, `isDefault`, and `resetToDefault()`. JSON defaults use structural equality, so object key order does not affect dirty state.
-
-Click the field to open the fill picker. With `edit="true"`, the first stop receives focus; Arrow keys move the selected stop, Shift+Arrow moves by 5%, Tab cycles stops, and Delete/Backspace removes a stop while preserving the two-stop minimum.
-
-```html
-<propskit-gradient
-  label="Fill"
-  value='{"type":"gradient","gradient":{"type":"linear","angle":90,"interpolationSpace":"srgb","hueInterpolation":"shorter","stops":[{"position":0,"color":"#0D99FF","opacity":100},{"position":100,"color":"#9747FF","opacity":100}]}}'
-  default='{"type":"gradient","gradient":{"type":"linear","angle":90,"interpolationSpace":"srgb","hueInterpolation":"shorter","stops":[{"position":0,"color":"#0D99FF","opacity":100},{"position":100,"color":"#9747FF","opacity":100}]}}'
-></propskit-gradient>
-```
-
----
-
-#### Propskit Palette
-
-`<propskit-palette>`
-
-Uses a plain horizontal surface with a selection-only `<fig-input-palette>` preview inside `<fig-select>`. Import `fig-editor.js` and `fig-editor.css`. Clicking anywhere on the surface opens the palette menu.
-
-`options` is a JSON array of palettes. Each palette accepts color strings or `{ "color", "alpha" }` objects. The first palette is selected when `value` is omitted.
-
-**Attributes:** `label`, `name`, `value` (palette JSON), `default` (palette JSON), `options`, `disabled`
-
-**Events:** `input`, `change`, `optionhover` — shared PropsKit envelope with a typed `Array<{ color, alpha }>` value. `optionhover` does not change the selection.
-
-**Methods and state:** `defaultValue`, `isDefault`, and `resetToDefault()`.
-
-```html
-<propskit-palette
-  label="Palette"
-  options='[["#0D99FF","#14AE5C"],[{"color":"#FFCD29","alpha":0.5},"#F24822"]]'
-></propskit-palette>
-```
-
----
-
-#### Propskit Image
-
-`<propskit-image>`
-
-A vertical PropsKit surface with a label and permanent ghost upload button in
-the header. When images exist, it renders a two-column `fig-chooser`; every
-choice contains a square, cover-fit `fig-image` and an attachment-style remove
-control.
-
-`options` is an optional JSON array of image URLs. `.options` returns the
-normalized URL array, while `.value`, `defaultValue`, and event values are the
-selected URL string. An omitted or unmatched value falls back to the first
-image.
-
-Selecting files appends browser object URLs to `options` and selects the first
-new image. The component previews local files; applications remain responsible
-for uploading and replacing object URLs with durable URLs. Removing an image
-updates the reflected `options` array and revokes its object URL when needed.
-Removing the selected image falls back to the first remaining image and emits
-`input` and `change`; focused choices also support Delete and Backspace.
-
-**Attributes:** `label`, `name`, `value`, `default`, `options`, `disabled`,
-`variant="minimal"`
-
-**Events:** `input`, `change` — shared PropsKit envelope with the selected URL.
-
-**Methods and state:** `defaultValue`, `isDefault`, `resetToDefault()`, and
-focus delegation to the current choice or upload input.
-
-```html
-<propskit-image
-  label="Image"
-  name="image"
-  options='["/images/one.webp","/images/two.webp"]'
-  default="/images/one.webp"
-></propskit-image>
-```
-
----
-
-#### Propskit Switch
-
-`<propskit-switch>`
-
-Uses a plain horizontal surface with `<fig-switch>` by default. The entire
-surface toggles the switch. Set `variant="segmented-control"` to render an
-Off/On `<fig-segmented-control>` instead.
-
-**Attributes:** `label`, `checked`, `default`, `disabled`, `name`, `value`, `variant` (`switch` | `segmented-control`)
-
-**Events:** `input`, `change` — shared PropsKit envelope with the public boolean value.
-
-Right-click and choose **Reset**, or call `resetToDefault()`, to restore the default checked state.
-
-```html
-<propskit-switch label="Visible" checked></propskit-switch>
-```
-
----
-
-#### Propskit Select
-
-`<propskit-select>`
-
-Uses a plain horizontal surface and always composes `<fig-select>`. Import `fig-editor.js` and `fig-editor.css`; delayed registration upgrades the authored select. Options can come from the `options` attribute (same formats as `fig-options`: comma-separated, newline-delimited, or a JSON array), or from an authored `<fig-select-options>` child for rich option content.
-
-**Attributes:** `label`, `value`, `default`, `options`, `disabled`
-
-**Events:** `input`, `change`, `optionhover` — shared PropsKit envelope. `optionhover` uses the hovered option as `detail.value` without changing the selection.
-
-Right-click and choose **Reset**, or call `resetToDefault()`, to restore `default` or the initial selection.
-
-```html
-<propskit-select label="Alignment" value="Center" options="Left,Center,Right"></propskit-select>
-```
-
-```html
-<propskit-select label="Interpolation" value="srgb">
-  <fig-select-options slot="panel">
-    <fig-select-option value="srgb" label="Classic — sRGB Linear">
-      <div><h3>Classic</h3><span>sRGB Linear</span></div>
-    </fig-select-option>
-  </fig-select-options>
-</propskit-select>
-```
-
----
-
-#### Propskit Editable Select
-
-`<propskit-editable-select>`
-
-A compact, label-free, subtle `fig-select` aligned to the left at its intrinsic
-width inside one full-row PropsKit surface. Default-size secondary edit and add
-buttons sit on the right within the same row.
-Clicking anywhere on the host opens the select, except the edit and add actions.
-The options menu spans and aligns to the full PropsKit row.
-Edit replaces the select with a default-size, full-width `fig-input-text`; the
-checkmark, Enter, or moving focus outside the input saves, while Escape cancels.
-Add creates a choice with an `item-{index}` value using its zero-based array
-index and a `"New item"` label, selects it, and immediately
-opens rename mode. Every menu
-option includes an appended ghost trash action. Delete removes the item;
-keyboard users can press Delete or Backspace while its option is focused.
-Edit/save, add, and delete icon buttons include descriptive tooltips.
-
-`options` accepts the same comma, newline, and JSON formats as `fig-select`.
-`.options` returns normalized `{ value, label }[]` entries. Add, rename, and
-delete mutations reflect this normalized JSON back to `options`. Renaming
-changes only the label, preserving the stable selected value. Deleting the
-selected item falls forward to the next option, then backward at the end. With
-one item remaining, the select and trash action are disabled so the final item
-cannot be deleted; edit and add remain available.
-
-**Attributes:** `name`, `value`, `default`, `options`, `aria-label`, `disabled`
-
-**Events:** `input`, `change`, `optionhover` — the shared PropsKit envelope is
-extended to `{ control, name?, value, label }`. `value` is the stable option
-value and `label` is its current display label. Add, delete, and successful
-rename actions emit `input` and `change`.
-
-**Methods and state:** `.options`, `defaultValue`, `isDefault`, `editing`,
-`resetToDefault()`, and focus delegation.
-
-```html
-<propskit-editable-select
-  aria-label="Layer style"
-  name="style"
-  value="primary"
-  options='[{"value":"primary","label":"Primary"},{"value":"secondary","label":"Secondary"}]'
-></propskit-editable-select>
-```
-
----
-
-#### Propskit Text
-
-`<propskit-text>`
-
-Uses a plain horizontal surface with `<fig-input-text type="text">`. The inner input defaults to `multiline` and `autoresize`, starts at one line, and grows to a maximum of four lines. Set either attribute to `"false"` to disable that behavior. Other text input attributes and adornment slots are forwarded to the inner control; `type` is not forwarded.
-
-**Attributes:** `label`, `value`, `default`, `placeholder`, `disabled`, `readonly`, `multiline`, `autoresize`
-
-**Events:** `input`, `change` — shared PropsKit envelope with the public string value.
-
-Right-click and choose **Reset**, or call `resetToDefault()`, to restore `default` or the initial text.
-
-```html
-<propskit-text label="Name" value="Layer 1" placeholder="Enter a name"></propskit-text>
-```
-
----
-
-#### Propskit Slider
-
-`<propskit-slider>`
-
-Uses a plain horizontal surface with `<fig-slider>`. Slider attributes except host-only PropsKit attributes are forwarded to the inner slider.
-
-| Attribute | Type | Default | Description |
-|---|---|---|---|
-| `label` | string | `"Label"` | Field label text; use an empty value to hide it |
-| `name` | string | — | Optional event payload name |
-| `default` | number/string | initial `value` | Double-click and right-click reset target |
-| `disabled` | boolean | `false` | Disable interaction |
-| *slider attrs* | — | — | All `<fig-slider>` attributes except host-only PropsKit attributes are forwarded |
-
-**Events:** `input`, `change` — shared PropsKit envelope with `value: number | null`.
-
-Double-click or right-click and choose **Reset** to restore `default`, falling back to the initial value.
-
-**Methods:** `resetToDefault()` triggers the same reset behavior.
-
-```html
-<propskit-slider label="Opacity" min="0" max="100" value="75" units="%"></propskit-slider>
-```
-
----
-
 #### Input Wheel
 
 `<fig-input-wheel>`
@@ -719,267 +373,6 @@ The `value`, `min`, `max`, and `step` properties mirror their attributes. `aria-
 
 ---
 
-#### Propskit Wheel
-
-`<propskit-wheel>`
-
-A labeled numeric scrubber that composes `<fig-input-wheel>` with an optional `<fig-input-number>`. The host provides row chrome and reset behavior; there is no `fig-field` or `fig-slider`.
-
-Omitted `label` renders `"Label"`; `label=""` removes the visible label. Units are omitted by default and arbitrary values such as `px` pass through unchanged. Units remain wrapper and number-field behavior: time aliases receive time-focused defaults, and the effective step is applied to the child wheel without setting a child `units` attribute.
-
-| Attribute | Type | Default | Description |
-|---|---|---|---|
-| `label` | string | `"Label"` | Empty removes the visible label |
-| `name` | string | — | Optional event payload name |
-| `units` | string | — | Optional arbitrary units. `seconds` / `milliseconds` normalize to `s` / `ms` |
-| `value` | number | `0` | Numeric value in `units`. Unbounded unless `min`/`max` are set |
-| `min` | number | — | Inclusive lower bound. Omit for no minimum |
-| `max` | number | — | Inclusive upper bound. Omit for no maximum |
-| `step` | number | `1`; `0.1` (`s`) / `100` (`ms`) | Drag, keyboard, and mouse wheel increment |
-| `precision` | number | `0`; `2` (`s`) / `0` (`ms`) | Displayed decimal places on the optional number field |
-| `elastic` | boolean/string | `true` | Stretch the composed row past the wheel edges; set `"false"` to disable row stretch. The handle still pulls |
-| `spin` | boolean/string | `true` | Keep wheel ticks synchronized to `value`; set `"false"` to update only the value and number field |
-| `text` | boolean/string | `true` | Include the editable `fig-input-number`; set `"false"` for only `fig-input-wheel` |
-| `default` | number/string | initial `value` | Right-click reset target |
-| `disabled` | boolean | `false` | Disable wheel and number |
-
-**Events:** `input` while dragging or typing; `change` on commit. Both use the shared PropsKit envelope with `value: number | null`. Dragging moves by `step` on every `input`; hold Shift to scrub at `10× step`. `precision` only formats the displayed number. Arrow keys on the focused wheel move by `step`; Shift+arrow moves by `10× step`.
-
-```html
-<propskit-wheel label="Duration" value="1.5" default="0" units="seconds"></propskit-wheel>
-<propskit-wheel label="Delay" value="240" default="0" min="0" max="1000" units="ms"></propskit-wheel>
-<propskit-wheel label="Frames" value="12" text="false"></propskit-wheel>
-<propskit-wheel label="Amount" value="12" spin="false"></propskit-wheel>
-```
-
----
-
-#### Propskit Position
-
-`<propskit-position>`
-
-A compact X/Y field with optional percentage units.
-
-| Attribute | Type | Default | Description |
-|---|---|---|---|
-| `x` | number | `50` | Horizontal value |
-| `y` | number | `50` | Vertical value |
-| `default` | JSON string | initial `{ x, y }` | Right-click and group reset target |
-| `label` | string | `"Label"` | Field label; empty removes the visible label |
-| `units` | string | — | `"percent"` shows `%`; omit for no units |
-| `disabled` | boolean | `false` | Disable both number inputs |
-
-**Properties and methods:** `x`, `y`, and `value` expose the current coordinates; `defaultValue` returns the normalized reset object; `isDefault` compares both coordinates; `resetToDefault()` restores both values.
-
-**Events:** `input` and `change` use the shared PropsKit envelope with the public `{ x, y, units }` value.
-
-```html
-<propskit-position
-  label="Position"
-  x="50"
-  y="50"
-  units="percent"
-  default='{"x":50,"y":50}'
-></propskit-position>
-```
-
----
-
-#### Propskit Joystick
-
-`<propskit-joystick>`
-
-A vertical PropsKit surface with a label above a square `fig-joystick` and its X/Y percentage fields.
-
-| Attribute | Type | Default | Description |
-|---|---|---|---|
-| `value` | JSON string | `{"x":50,"y":50}` | Current percentage coordinates |
-| `default` | JSON string | initial value | Right-click and group reset target |
-| `label` | string | `"Label"` | Field label; empty removes the visible label |
-| `axis-labels` | string | — | One, two, or four labels forwarded to the joystick |
-| `coordinates` | string | `"screen"` | `"screen"` or `"math"` coordinate mode |
-| `precision` | number | `3` | X/Y field display precision |
-| `disabled` | boolean | `false` | Disable the joystick and both fields |
-
-The inner joystick always uses `fields="true"` and `aspect-ratio="1 / 1"`. The `.value`, `defaultValue`, and event values are typed `{ x, y }` percentage objects. `isDefault` compares both axes and `resetToDefault()` restores the reset value.
-
-```html
-<propskit-joystick
-  label="Position"
-  value='{"x":35,"y":65}'
-  default='{"x":50,"y":50}'
-  axis-labels="X Y"
-></propskit-joystick>
-```
-
----
-
-#### Propskit Origin
-
-`<propskit-origin>`
-
-A vertical PropsKit surface with a label above a square `fig-origin-grid` and its X/Y percentage fields. The inner grid always uses `fields="true"` and `aspect-ratio="1 / 1"`.
-
-Its `.value`, `defaultValue`, and event values are typed `{ x, y }` objects. The `value` and `default` attributes serialize that shape as JSON. `precision` and `drag` pass through to the grid.
-
-```html
-<propskit-origin
-  label="Transform origin"
-  value='{"x":50,"y":50}'
-  default='{"x":50,"y":50}'
-></propskit-origin>
-```
-
----
-
-#### Propskit Easing
-
-`<propskit-easing>`
-
-A vertical PropsKit surface around `fig-easing-curve`, constrained to cubic-bezier presets. Its typed value is `{ x1, y1, x2, y2 }`; `value` and `default` serialize that shape as JSON.
-
-```html
-<propskit-easing
-  label="Easing"
-  value='{"x1":0.42,"y1":0,"x2":0.58,"y2":1}'
-  default='{"x1":0.42,"y1":0,"x2":0.58,"y2":1}'
-></propskit-easing>
-```
-
----
-
-#### Propskit Spring
-
-`<propskit-spring>`
-
-A vertical PropsKit surface around `fig-easing-curve`, constrained to spring presets. Its typed value is `{ stiffness, damping, mass }`; `value` and `default` serialize that shape as JSON.
-
-```html
-<propskit-spring
-  label="Spring"
-  value='{"stiffness":200,"damping":15,"mass":1}'
-  default='{"stiffness":200,"damping":15,"mass":1}'
-></propskit-spring>
-```
-
-Both curve controls forward `precision` and `edit`, support `disabled` and `variant="minimal"`, expose `isDefault`, and implement `resetToDefault()`. Their `input` and `change` events use the shared PropsKit envelope.
-
----
-
-#### Propskit Color Point
-
-`<propskit-color-point>`
-
-A compact `<fig-group>` wrapper that combines `<propskit-color>` and `<propskit-position>`. The group is collapsible and open by default.
-
-| Attribute | Type | Default | Description |
-|---|---|---|---|
-| `label` | string | — | Passed to the internal `fig-group` as `name` |
-| `value` | JSON string | `{"x":50,"y":50,"color":"#D9D9D9"}` | Current color-point value |
-| `collapsible` | boolean | `true` | Passed to the internal `fig-group` |
-| `open` | boolean | `true` | Passed to the internal `fig-group` |
-| `disabled` | boolean | `false` | Disable both internal controls |
-
-The internal group always has `compact`. `value` uses the same `{ x, y, color }` shape as `<fig-canvas-control type="color">`.
-
-**Events:** `input` and `change` use the shared PropsKit envelope with the public color-point value. `openchange` mirrors the internal group's expanded state.
-
-```html
-<propskit-color-point
-  label="Light"
-  value='{"x":50,"y":50,"color":"#FF00BF"}'
-></propskit-color-point>
-```
-
----
-
-#### Propskit Point Radius
-
-`<propskit-point-radius>`
-
-A compact `<fig-group>` wrapper that combines `<propskit-position>` and `<propskit-number>` for point-radius values. The group is collapsible and open by default.
-
-| Attribute | Type | Default | Description |
-|---|---|---|---|
-| `label` | string | — | Passed to the internal `fig-group` as `name` |
-| `value` | JSON string | `{"x":50,"y":50,"radius":0}` | Current point-radius value |
-| `collapsible` | boolean | `true` | Passed to the internal `fig-group` |
-| `open` | boolean | `true` | Passed to the internal `fig-group` |
-| `units` | string | — | `"percent"` passes percentage units to position and radius; omit for no units |
-| `disabled` | boolean | `false` | Disable both internal controls |
-
-The internal group always has `compact`. `value` uses the same `{ x, y, radius }` shape as `<fig-canvas-control type="point-radius">`. Numeric radius values use pixels; percentage strings preserve `%`.
-
-**Events:** `input` and `change` use the shared PropsKit envelope with the public point-radius value. `openchange` mirrors the internal group's expanded state.
-
-```html
-<propskit-point-radius
-  label="Blur"
-  units="percent"
-  value='{"x":50,"y":50,"radius":"25%"}'
-></propskit-point-radius>
-```
-
----
-
-#### Propskit Point Radius Angle
-
-`<propskit-point-radius-angle>`
-
-A compact `<fig-group>` wrapper combining `<propskit-position>` with radius and angle `<propskit-number>` controls. The group is collapsible and open by default.
-
-| Attribute | Type | Default | Description |
-|---|---|---|---|
-| `label` | string | — | Passed to the internal `fig-group` as `name` |
-| `value` | JSON string | `{"x":50,"y":50,"radius":0,"angle":0}` | Current point-radius-angle value |
-| `collapsible` | boolean | `true` | Passed to the internal `fig-group` |
-| `open` | boolean | `true` | Passed to the internal `fig-group` |
-| `units` | string | — | `"percent"` passes percentage units to position and radius; omit for no units |
-| `disabled` | boolean | `false` | Disable every internal control |
-
-The internal group always has `compact`. `value` uses the same `{ x, y, radius, angle }` shape as `<fig-canvas-control type="point-radius-angle">`. Numeric radius values use pixels; percentage strings preserve `%`. Angles are degrees.
-
-**Events:** `input` and `change` use the shared PropsKit envelope with the public point-radius-angle value. `openchange` mirrors the internal group's expanded state.
-
-```html
-<propskit-point-radius-angle
-  label="Gradient"
-  units="percent"
-  value='{"x":50,"y":50,"radius":"25%","angle":45}'
-></propskit-point-radius-angle>
-```
-
----
-
-#### Propskit Point Point
-
-`<propskit-point-point>`
-
-A compact `<fig-group>` wrapper combining start and end `<propskit-position>` controls. The group is collapsible and open by default.
-
-| Attribute | Type | Default | Description |
-|---|---|---|---|
-| `label` | string | — | Passed to the internal `fig-group` as `name` |
-| `value` | JSON string | `{"x":50,"y":50,"x2":75,"y2":75}` | Current point-point value |
-| `collapsible` | boolean | `true` | Passed to the internal `fig-group` |
-| `open` | boolean | `true` | Passed to the internal `fig-group` |
-| `units` | string | — | `"percent"` passes percentage units to both positions; omit for no units |
-| `disabled` | boolean | `false` | Disable both position controls |
-
-The internal group always has `compact`. `value` uses the same `{ x, y, x2, y2 }` shape as `<fig-canvas-control type="point-point">`.
-
-**Events:** `input` and `change` use the shared PropsKit envelope with the public point-point value. `openchange` mirrors the internal group's expanded state.
-
-```html
-<propskit-point-point
-  label="Gradient"
-  units="percent"
-  value='{"x":25,"y":25,"x2":75,"y2":75}'
-></propskit-point-point>
-```
-
----
-
 #### Text Input
 
 `<fig-input-text>` — [demo](https://rog.ie/figui3/#text-input)
@@ -1058,43 +451,6 @@ Angle/rotation input with circular dial, optional text input, multi-unit support
 
 ---
 
-#### Propskit Oscillator
-
-`<propskit-oscillator>`
-
-Waveform oscillator input with composable wave functions, live SVG waveform preview, draggable parameter handles, and direct numeric controls.
-
-| Attribute | Type | Default | Description |
-|---|---|---|---|
-| `value` | JSON string | — | `{"waves":[{"type":"sine","frequency":1,"amplitude":1,"phase":0,"offset":0}]}` |
-| `name` | string | — | Optional event payload name |
-| `default` | JSON string | initial `value` | Right-click reset target |
-| `precision` | number | `2` | Decimal places |
-| `aspect-ratio` | string | `"2 / 1"` | Editor aspect ratio |
-| `edit` | boolean | `true` | Show editor and number fields; set to `"false"` for preview only |
-| `disabled` | boolean | `false` | Disable interaction |
-
-Supported `type` values: `"sine"`, `"square"`, `"sawtooth"`, `"triangle"`.
-
-**Properties:** `value` returns a normalized JSON string. `data` returns `{ waves }`. Single-wave JSON values are still accepted and normalized into `waves`.
-
-Right-click and choose **Reset**, or call `resetToDefault()`, to restore the oscillator value.
-
-**Events:**
-
-| Event | Detail |
-|---|---|
-| `input` | Shared PropsKit `{ control, value, name? }` envelope while dragging or editing |
-| `change` | Shared PropsKit `{ control, value, name? }` envelope on release or committed edit |
-
-```html
-<propskit-oscillator
-  value='{"waves":[{"type":"sine","frequency":1,"amplitude":1,"phase":0,"offset":0},{"type":"triangle","frequency":2,"amplitude":0.5,"phase":0,"offset":0}]}'
-></propskit-oscillator>
-```
-
----
-
 ### Color & Fill
 
 #### Swatch