@rogieking/figui3 8.9.15 → 8.9.17

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

@@ -136,20 +136,24 @@ Playground: `#fill-picker` — `all-modes`, `solid`, `gradient`, `image`, `video
 | `alpha` | `"true"` default; hide alpha with `"false"` |
 | `mode` | Lock modes: `solid`, `gradient`, `image`, `video`, `webcam`, comma-separated, plus custom names |
 | `disabled` | Presence |
+| `webcam-mode` | `live` (default) or `snapshot`. Webcam tab starts the camera. Capture writes a still and switches to Image |
+| `default-video` | Sample clip URL when Video has no file |
 
-Events: `input` / `change` with fill payload in `detail`.
+Events: `input` / `change` with fill payload in `detail`. `webcamstream` with `{ stream, deviceId }`. Live camera is `webcamStream` / `releaseWebcam()`, never JSON.
 
 Value shapes:
 
 ```txt
 solid   { type, colorSpace, color, alpha, hsv }
 gradient { type, colorSpace, gradient, css }
-image   { type, colorSpace, image }
-video   { type, colorSpace, video }
-webcam  { type, colorSpace, image: { url: snapshot, scaleMode, scale } }
+image   { type, colorSpace, image: { url, scaleMode, scale } }          // scaleMode includes tile
+video   { type, colorSpace, video: { url, poster, scaleMode, scale, opacity } }  // fill | fit | crop
+webcam  { type, colorSpace, webcam: { live, snapshot, deviceId, scaleMode, scale, opacity } }
 custom  { type: <modeName>, ...payload }
 ```
 
+Legacy `{ type: "webcam", image: { url } }` still parses as `webcam.snapshot` for one release. `fig-input-fill` uses the same `webcam` / `video.poster` shapes.
+
 `fig-input-color` expects solid data (`detail.color`, optional `detail.alpha`). Keep legacy `value` / `hex` / `rgba` on color input events.
 
 Do not use `picker` or `picker-anchor` on `fig-input-color`. Forward picker chrome with `picker-*` (e.g. `picker-dialog-position`).

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

@@ -138,7 +138,7 @@ Playground hashes: `/figui3#{id}`. Full attrs: [reference.md](reference.md).
 | 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 JSON `value`. `picker-*` forwarded if picker registered |
+| `fig-input-fill` | `#fill-input` | Solid/gradient/image/video/webcam JSON `value`. 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` |
@@ -154,7 +154,7 @@ Playground hashes: `/figui3#{id}`. Full attrs: [reference.md](reference.md).
 | `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` | (containers) | Listbox selection |
+| `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`) |

package/README.md

@@ -939,7 +939,7 @@ Supported interpolation spaces: `srgb`, `srgb-linear`, `display-p3`, `oklab`, `o
 
 `<fig-input-fill>` — [demo](https://rog.ie/figui3/#fill-input)
 
-A comprehensive fill input supporting solid, gradient, image, and video fills. Without the optional picker, it renders a passive preview.
+A comprehensive fill input supporting solid, gradient, image, video, and webcam fills. Without the optional picker, it renders a passive preview.
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
@@ -947,16 +947,21 @@ A comprehensive fill input supporting solid, gradient, image, and video fills. W
 | `disabled` | boolean | `false` | Disabled state |
 | `mode` | string | — | Lock to a fill mode |
 | `alpha` | boolean | `true` | Show alpha controls |
+| `webcam-mode` | string | `live` | Forwarded to the picker: `live` or `snapshot` |
+| `default-video` | string | — | Forwarded sample clip URL when Video has no file |
 | `picker-*` | string | — | Forwarded to `<fig-fill-picker>` when the optional picker is registered |
 
 Add `aria-label` to name the generated picker, hex field, and opacity field as one fill control group.
 
+Solid `alpha` is 0–1 (canonical). `opacity` 0–100 is also emitted for compatibility. Gradient values include `css`. Webcam JSON is `{ type, webcam }` — never a live `MediaStream`. Read `webcamStream` or listen for `webcamstream`. Video swatches use `video.poster`, not the mp4 URL.
+
 **Events:**
 
 | Event | Detail |
 |---|---|
-| `input` | `{ type, color?, gradient?, image?, video?, css }` |
-| `change` | `{ type, color?, gradient?, image?, video?, css }` |
+| `input` | `{ type, color?, gradient?, image?, video?, webcam?, css }` |
+| `change` | `{ type, color?, gradient?, image?, video?, webcam?, css }` |
+| `webcamstream` | `{ stream, deviceId }` |
 
 ```html
 <fig-input-fill value='{"type":"solid","color":"#FF5733","opacity":100}'></fig-input-fill>
@@ -976,13 +981,18 @@ Optional full fill picker dialog supporting solid, gradient, image, video, and w
 | `disabled` | boolean | `false` | Disabled state |
 | `alpha` | boolean | `true` | Show alpha controls |
 | `mode` | string | — | Lock to mode: `"solid"`, `"gradient"`, `"image"`, `"video"`, `"webcam"` |
+| `webcam-mode` | string | `live` | `live` keeps the camera after close; Capture always writes an image still |
+| `default-video` | string | — | Sample clip URL when Video is selected with no file |
+
+Webcam JSON is `{ type: "webcam", webcam: { live, snapshot, deviceId, scaleMode, scale, opacity } }`. The live `MediaStream` is `webcamStream` / `webcamstream`, not `value`. Closing the dialog does not stop a live camera; call `releaseWebcam()` or disconnect the element. Capture in `live` mode only updates `webcam.snapshot`. Video JSON includes `poster`; the swatch paints that, never `url(file.mp4)`.
 
 **Events:**
 
 | Event | Detail |
 |---|---|
-| `input` | `{ type, gradient?, color?, css }` |
-| `change` | `{ type, gradient?, color?, css }` |
+| `input` | `{ type, gradient?, color?, image?, video?, webcam?, css }` |
+| `change` | `{ type, gradient?, color?, image?, video?, webcam?, css }` |
+| `webcamstream` | `{ stream, deviceId }` |
 
 ```html
 <fig-fill-picker value='{"type":"solid","color":"#FF5733"}'>
@@ -1053,7 +1063,7 @@ When app code rebuilds a chooser by setting `fig-chooser.innerHTML`, the chooser
 
 | Attribute | Type | Default | Description |
 |---|---|---|---|
-| `value` | string | — | Selected choice value |
+| `value` | string | — | Selected choice value. Omit to select the first choice; `value=""` means none. |
 | `choice-element` | string | `"fig-choice"` | CSS selector for child choices |
 | `layout` | string | `"vertical"` | `"vertical"`, `"horizontal"`, `"grid"` |
 | `columns` | number | `2` | Grid column count when `layout="grid"` |

package/components.css

@@ -5312,7 +5312,9 @@ fig-choice {
       content: "";
       position: absolute;
       inset: 0;
-      border-radius: var(--fig-choice-border-radius);
+      border-radius: calc(
+        var(--fig-choice-border-radius) + var(--fig-choice-selection-ring-width)
+      );
       pointer-events: none;
       z-index: 1;
       box-shadow: inset 0 0 0 calc(var(--fig-choice-selection-ring-width)*2) var(--figma-color-bg);