@rogieking/figui3 8.9.44 → 8.9.46

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

@@ -0,0 +1,371 @@
+# FigUI3 lab components (`fig-lab.js`)
+
+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.
+
+Handlers below assume `onInput` / `onChange` from the React contract.
+
+## Shared propskit
+
+Full-surface `fig-field` wrappers. 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`).
+
+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.
+
+```tsx
+const rowRef = useRef<HTMLElement>(null);
+rowRef.current?.resetToDefault();
+```
+
+## Propskit
+
+### `propskit-switch`
+
+```tsx
+<propskit-switch
+  label="Visible"
+  checked={on ? "true" : undefined}
+  default="true"
+  onInput={onInput}
+/>
+```
+
+- Inner: `fig-switch`. `checked` / `default` boolean.
+
+### `propskit-color`
+
+```tsx
+<propskit-color
+  label="Fill"
+  value="#0D99FF"
+  alpha="true"
+  onInput={onInput}
+  onChange={onChange}
+/>
+```
+
+- Inner: `fig-fill-picker` + `fig-swatch`. Clicking the field opens the picker anchored to the host. Focus ring on the field, not the swatch.
+
+### `propskit-fill`
+
+```tsx
+<propskit-fill
+  label="Fill"
+  value='{"type":"solid","color":"#0D99FF"}'
+  onInput={onInput}
+  onChange={onChange}
+>
+  <div slot="mode-shader" label="Shader">
+    Shader UI
+  </div>
+</propskit-fill>
+```
+
+- Same chrome as color. Value may be fill JSON or a bare video URL. Forwards `mode-*` slots.
+
+### `propskit-gradient`
+
+```tsx
+<propskit-gradient
+  label="Gradient"
+  value={gradientJson}
+  edit="picker"
+  onInput={onInput}
+/>
+```
+
+- Inner: `fig-input-gradient`. Default `edit="picker"`. `mode="handle|tip"` for inline edit. Clicking the field opens the picker anchored to the host.
+
+### `propskit-select`
+
+```tsx
+<propskit-select
+  label="Blend"
+  value="multiply"
+  options="Normal,Multiply,Screen"
+  onChange={onChange}
+/>
+```
+
+Rich options (requires editor):
+
+```tsx
+<propskit-select label="Space" value="oklab" onChange={onChange}>
+  <fig-select-options slot="panel">
+    <fig-select-option value="srgb" label="Classic">
+      Classic
+    </fig-select-option>
+  </fig-select-options>
+</propskit-select>
+```
+
+- Inner: `fig-select` when registered; otherwise a fallback. Authored `fig-select-options slot="panel"` wins. Options stay in light DOM.
+
+### `propskit-text`
+
+```tsx
+<propskit-text
+  label="Name"
+  value={name}
+  onInput={onInput}
+  onChange={onChange}
+/>
+```
+
+- Inner: `fig-input-text`. `type`, `readonly`.
+
+### `propskit-number`
+
+```tsx
+<propskit-number
+  label="Size"
+  value="16"
+  min="0"
+  max="100"
+  step="1"
+  units="px"
+  steppers="true"
+  onInput={onInput}
+/>
+```
+
+- Inner: `fig-input-number`.
+
+### `propskit-slider`
+
+```tsx
+<propskit-slider
+  label="Opacity"
+  direction="horizontal"
+  type="opacity"
+  value="100"
+  default="100"
+  min="0"
+  max="100"
+  units="%"
+  onInput={onInput}
+  onChange={onChange}
+/>
+```
+
+- Inner: `fig-slider`. `type` range/hue/delta/stepper/opacity; `elastic` default true. Forward `min` / `max` / `step` / `value`.
+
+### `propskit-wheel`
+
+```tsx
+<propskit-wheel
+  label="Duration"
+  value="1.5"
+  units="seconds"
+  onInput={onInput}
+/>
+```
+
+- 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.
+
+### `propskit-position`
+
+```tsx
+<propskit-position label="Position" x="50" y="50" units="percent" onInput={onInput} />
+```
+
+- Two numbers. Attrs: `x`, `y`, `units`.
+
+### `propskit-color-point`
+
+```tsx
+<propskit-color-point
+  label="Stop"
+  value={json}
+  collapsible
+  open
+  onInput={onInput}
+/>
+```
+
+- Color + position JSON. `collapsible` / `open` default true (string booleans).
+
+### `propskit-point-radius`
+
+```tsx
+<propskit-point-radius label="Spot" value='{"x":50,"y":50,"radius":60}' onInput={onInput} />
+```
+
+### `propskit-point-radius-angle`
+
+```tsx
+<propskit-point-radius-angle
+  label="Light"
+  value='{"x":50,"y":50,"radius":60,"angle":45}'
+  onInput={onInput}
+/>
+```
+
+### `propskit-point-point`
+
+```tsx
+<propskit-point-point
+  label="Line"
+  value='{"x":10,"y":10,"x2":90,"y2":90}'
+  onInput={onInput}
+/>
+```
+
+### `propskit-group`
+
+```tsx
+<propskit-group name="Appearance" open show-reset>
+  <propskit-slider label="Opacity" value="100" min="0" max="100" />
+</propskit-group>
+```
+
+- Attrs: `name`, `open`, `show-reset`, `size`. Children are React nodes.
+
+### `propskit-oscillator`
+
+```tsx
+<propskit-oscillator
+  label="Wave"
+  value={wavesJson}
+  edit
+  onInput={onInput}
+/>
+```
+
+- JSON `waves`. Attrs: `edit`, `precision`, `aspect-ratio`, `disabled`.
+
+## Spatial
+
+### `fig-canvas-control`
+
+```tsx
+<div style={{ position: "relative", aspectRatio: "1", width: "100%" }}>
+  <fig-canvas-control
+    type="point-radius-angle"
+    name="Position"
+    value='{"x":50,"y":50,"radius":60,"angle":45}'
+    snapping="modifier"
+    onInput={onInput}
+    onChange={onChange}
+  />
+</div>
+```
+
+- Parent must be positioned. Types: `point`, `color`, `point-radius`, `point-radius-angle`, `point-point`.
+- Attrs: `type`, `value` (JSON string), `color`, `name`, `tooltips`, `disabled`, `drag-surface`, `snapping` (`false` | `modifier` | `true`)
+- React: JSON `value` as a string attr; do not remount during drag.
+
+### `fig-input-angle`
+
+```tsx
+<fig-input-angle
+  value={String(deg)}
+  text="true"
+  units="°"
+  onInput={onInput}
+/>
+```
+
+- Attrs: `value`, `precision`, `text`, `min`, `max`, `units`, `dial` (default true), `rotations`, `disabled`
+
+### `fig-input-wheel`
+
+```tsx
+<fig-input-wheel value="50" min="0" max="100" step="1" onInput={onInput} />
+```
+
+- Standalone SVG tick + handle. Attrs: `value` (default `0`), `step` (default `1`), `min`, `max`, `spin` (default true), `disabled`. No `units` / `text` / `label` / reset — use `propskit-wheel` for those.
+- Methods: `focus()`, `spinTo(value)`, `beginScrub()`, `updateScrub()`, `endScrub()`.
+
+### `fig-reorder`
+
+```tsx
+<fig-reorder axis="vertical" handle=".drag">
+  {items.map((item) => (
+    <div key={item.id} className="row">
+      <button className="drag" type="button" aria-label="Reorder" />
+      {item.label}
+    </div>
+  ))}
+</fig-reorder>
+```
+
+Listen for `reorder` on a ref (`onReorder` is not a React-mapped event):
+
+```tsx
+useEffect(() => {
+  const el = ref.current;
+  if (!el) return;
+  const handler = (event: Event) => {
+    const { oldIndex, newIndex, item } = (event as CustomEvent).detail;
+    onReorder({ oldIndex, newIndex, item });
+  };
+  el.addEventListener("reorder", handler);
+  return () => el.removeEventListener("reorder", handler);
+}, [onReorder]);
+```
+
+- `display: contents`. Reorders **direct children**. `axis` `vertical` | `horizontal`. Omit `handle` to drag whole rows; set it when rows contain sliders/handles.
+- Event `reorder`: `{ oldIndex, newIndex, item }`. Nested drag is ignored for sliders, handles, canvas, and most propskit spatial controls.
+
+## AI composer
+
+Layout shells. Wire behavior yourself. Children are React nodes.
+
+### `fig-ai-prompt`
+
+```tsx
+<fig-ai-prompt>
+  <fig-input-text multiline placeholder="Describe a change" />
+  <fig-footer>
+    <fig-button>Send</fig-button>
+  </fig-footer>
+</fig-ai-prompt>
+```
+
+### `fig-ai-context`
+
+```tsx
+<fig-ai-context>
+  <fig-attachments>{attachments}</fig-attachments>
+</fig-ai-context>
+```
+
+Open area above the prompt for attachments/status.
+
+### `fig-chat-message`
+
+```tsx
+<fig-chat-message from="user">
+  Create a settings panel.
+  <fig-attachments aria-label="Message attachments">
+    <fig-attachment
+      value="settings"
+      name="settings.png"
+      src={src}
+      removable="false"
+    />
+  </fig-attachments>
+  <fig-avatar name="Rogie King" />
+</fig-chat-message>
+<fig-chat-message from="agent">
+  <fig-shimmer>
+    <span>Thinking…</span>
+  </fig-shimmer>
+</fig-chat-message>
+```
+
+- Attrs: `from` (`user` | `agent`)
+
+### `fig-attachments` / `fig-attachment`
+
+```tsx
+<fig-attachments>
+  <fig-attachment src={src} name="file.png" value="file" />
+</fig-attachments>
+```
+
+- Attachment attrs: `src`, `name`, `value`, `removable` (default true), `disabled`
+- Events: `remove` — listen natively if React does not map it.

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

@@ -1,6 +1,6 @@
 # FigUI3 lab API reference
 
-Playground: `/propskit/lab#{id}`. Rules: `playground/src/lib/attributeRules.ts`.
+React recipes: [components.md](components.md).
 
 ## Propskit reset
 
@@ -14,6 +14,8 @@ Playground: `/propskit/lab#{id}`. Rules: `playground/src/lib/attributeRules.ts`.
 
 `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 sizes
+
 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
@@ -29,7 +31,7 @@ Options attr: JSON array, comma, or newline. Authored `fig-select-options slot="
 
 ## `propskit-slider`
 
-Playground 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), `size`, `steppers`, `disabled`.
 
 Inner `fig-slider` still needs `min` / `max` / `step` / `value` as forwarded attrs.
 
@@ -75,7 +77,7 @@ Collapsible point groups: `collapsible` and `open` default true (string booleans
 
 Observed: `type`, `value`, `color`, `name`, `tooltips`, `disabled`, `drag-surface`, `snapping`.
 
-Parent must be `position: relative` (or similar) so the control can fill it. Playground wraps in an aspect-ratio box.
+Parent must be `position: relative` (or similar) so the control can fill it. Wrap in an aspect-ratio box.
 
 Types: `point`, `color`, `point-radius`, `point-radius-angle`, `point-point`.
 

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

@@ -1,11 +1,11 @@
 ---
 name: figui3
 description: >-
-  Guides FigUI3 core (`fig.js` / `fig.css`) web components for Figma-style plugin UIs.
-  Use when adding, using, or debugging fig-* elements from the core bundle—buttons,
-  fields, overlays, menus, sliders, color/fill inputs, media, dialogs, popups, toasts—or
-  when working in the /figui3 playground. Not for fig-select or fig-fill-picker
-  (fig-editor), propskit-* / AI / canvas / angle / wheel / reorder (fig-lab), or fig-layer.
+  Guides FigUI3 core (`fig.js` / `fig.css`) web components for Figma-style plugin UIs,
+  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
 ---
 
@@ -13,19 +13,13 @@ user-invocable: false
 
 Zero-dependency web components for Figma UI3 plugin and widget UIs.
 
-Canonical examples live in the **playground**, not `index.html`.
+Public API: `README.md`. React: [react.md](react.md). Per-tag JSX: [components.md](components.md). Attrs: [reference.md](reference.md).
 
-- Live: https://rog.ie/figui3/
-- Local: `npm run dev:playground` → `/figui3`
-- Sections: `playground/src/data/figui3Sections.ts`
-- Attribute inspector: `playground/src/lib/attributeRules.ts`
-- Public API: `README.md`
-
-Related skills: `fig-editor` (`fig-select`, `fig-fill-picker`), `fig-lab` (`propskit-*`, AI, canvas), `propkit` (`/propskit` field composition).
+Related skills: `fig-editor` (`fig-select`, `fig-fill-picker`), `fig-lab` (`propskit-*`, AI, canvas), `propkit` (property-row composition).
 
 ## Bundles
 
-Always import CSS with JS. Register before first render.
+Always import CSS with JS. Register before first render. In React, see [react.md](react.md).
 
 ```js
 import "@rogieking/figui3/fig.css";
@@ -34,14 +28,12 @@ import "@rogieking/figui3/fig.js";
 
 | Bundle | CSS + JS | Components |
 |---|---|---|
-| **Core** (this skill) | `fig.css` + `fig.js` | All `fig-*` below |
+| **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`.
-
-Playground “Full editor” toggle reveals `#select`, `#fill-picker`, `#layer`, and `#toast`. That grouping is UI-only: toast is core; layer is `fig-layer.js`.
+`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`.
 
 ## Principles
 
@@ -49,25 +41,7 @@ Playground “Full editor” toggle reveals `#select`, `#fill-picker`, `#layer`,
 2. Use design tokens (`--figma-color-*`, `--radius-*`, `--spacer-*`). Do not hardcode Figma colors.
 3. Emit `input` while interacting and `change` on commit. Do not fire `input` from programmatic attribute writes.
 4. Preserve a11y: labels, keyboard, ARIA, disabled. See the `a11y` skill.
-5. Keep components framework-agnostic. No React internals.
-
-## React + Vite
-
-```tsx
-import "@rogieking/figui3/fig.css";
-
-const bootstrap = async () => {
-  await import("@rogieking/figui3/fig.js");
-  createRoot(document.getElementById("app")!).render(<App />);
-};
-bootstrap();
-```
-
-- Use DOM attrs (`text="true"`). Read values from `e.target` / `e.detail`.
-- On `fig-*` and `<dialog is="fig-...">`, use `class` not `className`.
-- Prefer refs + `addEventListener` for `input`/`change`.
-
-Color picker modes: `fig-fill-picker` is optional editor. Do not use `picker` / `picker-anchor` on `fig-input-color`. `picker-*` attrs forward to the picker only when it is registered. See `fig-editor`.
+5. Keep components framework-agnostic. No React internals in `fig.js`.
 
 ## Overlay rules
 
@@ -76,34 +50,28 @@ Color picker modes: `fig-fill-picker` is optional editor. Do not use `picker` /
 - `<dialog is="fig-toast">` — call `showToast()`. `theme`, `duration`, `live`, `dismiss`, `icon`.
 - `fig-menu` and `fig-select` use `popover="manual"` so lists escape filter-containing popups to the top layer. Nested menus inside popovers must keep that. `fig-menu` slots items (does not relocate them); triggers get `slot="trigger"`.
 
-```html
+```tsx
 <dialog is="fig-dialog" drag handle="fig-header">
   <fig-header>
     Title
     <fig-button variant="ghost" icon close-dialog aria-label="Close">
-      <fig-icon name="close"></fig-icon>
+      <fig-icon name="close" />
     </fig-button>
   </fig-header>
   <fig-content>Body</fig-content>
 </dialog>
-
-<dialog is="fig-popup" anchor="#trigger" position="bottom left" offset="8 8">
-  Popup content
-</dialog>
 ```
 
 ## Field composition
 
-Default property row:
-
-```html
+```tsx
 <fig-field direction="horizontal">
   <label>Opacity</label>
-  <fig-slider value="75" min="0" max="100" text="true" units="%" full></fig-slider>
+  <fig-slider value="75" min="0" max="100" text="true" units="%" full />
 </fig-field>
 ```
 
-Labeled property wrappers (`propskit-*`) are lab. For `/propskit` playground patterns, use the `propkit` skill.
+Labeled property wrappers (`propskit-*`) are lab. See the `propkit` and `fig-lab` skills.
 
 ## Select vs dropdown
 
@@ -115,100 +83,23 @@ Labeled property wrappers (`propskit-*`) are lab. For `/propskit` playground pat
 
 Prefer `fig-select` for Figma-style menus. Use `fig-dropdown` only for a native select.
 
-## Core catalog
-
-Playground hashes: `/figui3#{id}`. Full attrs: [reference.md](reference.md).
-
-### Buttons and inputs
-
-| Tag | Playground | Notes |
-|---|---|---|
-| `fig-button` | `#button` | `variant`: secondary, ghost, link, destructive*, overlay, input. `type`: button, toggle, submit, select, upload. `size`, `icon`, `selected` |
-| `fig-dropdown` | `#dropdown` | Native select. Options as `<option>` / `<optgroup>`. `variant="ghost"` |
-| `fig-combo-input` | `#combo-input` | Text + suggestions (`options`) |
-| `fig-input-text` | `#text-input` | `multiline` for textarea |
-| `fig-input-number` | `#number-input` | `min`, `max`, `step`, `units`, `precision` |
-| `fig-input-file` | `#file-input` | `accepts`, `multiple`, button `variant` |
-| `fig-checkbox` / `fig-radio` / `fig-switch` | `#checkbox` `#radio` `#switch` | Switch supports `indeterminate` |
-| `fig-slider` | `#slider` | `type`: range, opacity, hue, stepper, delta. `text`, `units`, `transform`, `variant="classic"` |
-| `fig-options` | (propkit `#options`) | Option list helper; same option string formats as select |
-
-### Color and fill (no picker dialog)
-
-| Tag | Playground | Notes |
-|---|---|---|
-| `fig-input-color` | (propkit `#color`) | Solid color. `text`, `alpha`. Auto-detects `fig-fill-picker` |
-| `fig-input-fill` | `#fill-input` | Solid/gradient/image/video/webcam/custom JSON `value`. Custom `mode-*` slots forward to the inner picker and use image-style chrome. Same `webcam` / `video.poster` shape as the picker. `webcam-mode`, `default-video`, `picker-*` forwarded if picker registered |
-| `fig-input-palette` | (propkit `#palette`) | Multi-color. `fixed`, `open` |
-| `fig-input-gradient` | (propkit `#gradient`) | Stops. `edit`, `mode="handle\|tip"` |
-| `fig-swatch` | `#swatch` | `size`, `selected`, `alpha` |
-| `fig-color-tip` | `#color-tip` | `control="color\|add\|remove"` |
-| `fig-chit` | — | Alias-style color chip |
-
-### Layout and chrome
-
-| Tag | Playground | Notes |
-|---|---|---|
-| `fig-field` | `#field` | `direction="horizontal\|vertical"`, `label` |
-| `fig-group` | (containers) | `name`, `collapsible`, `open`, `compact` |
-| `fig-header` / `fig-footer` / `fig-content` | (containers) | Header: `borderless`, `compact`. Footer: `sticky` |
-| `fig-tabs` / `fig-tab` | `#tabs` | Roving tabs. `content="#id"` for panels |
-| `fig-segmented-control` / `fig-segment` | `#segmented-control` | Radio-group pattern |
-| `fig-chooser` / `fig-choice` | `#chooser` | Listbox. Omit `value` to select first; `value=""` means none. |
-| `fig-separator` / `fig-menu-separator` | `#separator` | Optional `label`, `sticky`, `borderless` |
-| `fig-menu` / `fig-menu-item` | `#menu` | `fig-menu-trigger`, `trigger="contextmenu"`, `position`, `offset`. Item also works in `fig-popup` (sticky separators, nested row menus). |
-| `fig-icon` | `#icon` | Token mask (`name`, `size="small"`, `color`) |
-| `fig-avatar` | `#avatar` | `src` / `name`, `size="large"` |
-| `fig-truncate` | `#truncate` | `position="right\|left\|middle"`, `tooltip`, `tail` |
-
-### Overlays
-
-| Tag | Playground | Notes |
-|---|---|---|
-| `dialog is="fig-dialog"` | `#dialog` | `modal`, `drag`, `resizable`, `autoresize`, `handle`, `closedby`, `position` |
-| `dialog is="fig-popup"` | `#popup` | `anchor`, `position`, `offset`, `viewport-margin`, `variant`, `theme` |
-| `dialog is="fig-toast"` | `#toast` | `showToast()`. `theme`, `duration`, `live`, `dismiss`, `icon` |
-| `fig-tooltip` | `#tooltip` | `text`, `action="hover\|click\|manual"`, `delay`, `theme` |
-
-### Media
-
-| Tag | Playground | Notes |
-|---|---|---|
-| `fig-preview` | (propkit `#preview`) | `aspect-ratio`, `fit`, `full`, `checkerboard` |
-| `fig-media` / `fig-image` / `fig-video` | `#media` `#image` `#video` | Upload via `upload`. Video controls below preview |
-| `fig-card` | `#card` | Media + label + selection |
-| `fig-media-controls` | `#media-controls` | Play/pause chrome |
-| `fig-input-file` | `#file-input` | File picker button |
-
-### Specialized
-
-| Tag | Playground | Notes |
-|---|---|---|
-| `fig-easing-curve` | (propkit `#easing`) | Bezier/spring |
-| `fig-3d-rotate` | (containers) | Cube rotate |
-| `fig-origin-grid` | (propkit) | Transform origin |
-| `fig-joystick` | (propkit `#joystick`) | 2D position |
-| `fig-handle` | `#handle` | `type="default\|minimal\|color\|canvas"`, `drag`, `drag-snapping` |
-| `fig-spinner` / `fig-shimmer` / `fig-skeleton` | `#spinner` `#shimmer` | Loading |
-
-`fig-input-angle` and `fig-input-wheel` are **lab**, not core.
-
 ## Events
 
 ```txt
-fig-slider          input/change → e.target.value
+fig-slider          input/change → e.currentTarget.value
 fig-input-color     input/change → detail { color, alpha, opacity } plus legacy value/hex/rgba
 fig-input-fill      input/change → fill payload in e.detail
 fig-menu            change → detail { value }
 fig-dialog/popup    native dialog close plus FigUI3 positioning attrs
 ```
 
+`fig-input-angle` and `fig-input-wheel` are **lab**, not core.
+
 ## Maintainer workflow
 
 1. Read `fig.js` + `components.css` before editing.
-2. Mirror playground examples in `figui3Sections.ts` and `attributeRules.ts`.
-3. Update `README.md` + `CHANGELOG.md` for public API changes.
-4. `bun build` for dist. Never kill `npm run dev:playground`.
-5. Tests: `npm run test:components` (Playwright). Do not start a second playground if one is running.
+2. Update `README.md` + `CHANGELOG.md` for public API changes.
+3. `bun build` for dist.
+4. Tests: `npm run test:components` (Playwright).
 
-Primary files: `fig.js`, `components.css`, `base.css`, `README.md`, `playground/src/data/figui3Sections.ts`.
+Primary files: `fig.js`, `components.css`, `base.css`, `README.md`.