@rogieking/figui3 8.9.16 → 8.9.18

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`).
@@ -174,7 +178,7 @@ Child `slot="mode-<name>"` plus `<name>` in `mode`. Custom content must dispatch
 
 ## `fig-interpolation-swatch`
 
-Preview for gradient interpolation (linear or polar hue arc). Playground attrs: `size="small|large"`. Used inside the fill picker gradient UI; can be used standalone with a gradient `value`.
+Preview for gradient interpolation (linear or polar hue arc). Playground attrs: `size="small|large"`. Can be used standalone with a gradient `value`. The fill picker interpolation row is hidden for now and locks to `srgb`.
 
 ## Maintainer notes
 

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` |

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"}'>

package/components.css

@@ -1495,7 +1495,8 @@ input[type="color"] {
   }
   &::before {
     content: "";
-    background: var(--swatch-background);
+    background-color: transparent;
+    background-image: var(--swatch-background);
     background-size: var(--swatch-bg-size);
     background-position: var(--swatch-bg-position);
     background-repeat: no-repeat;
@@ -1780,6 +1781,18 @@ fig-media-controls {
   gap: var(--spacer-1);
   width: 100%;
 
+  /* display:contents on fig-tooltip drops the play button out of this flex
+     row until hover/reflow. Keep a real box so the control is always visible. */
+  > fig-tooltip {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+  }
+
+  fig-icon {
+    contain: none;
+  }
+
   &[overlay]:not([overlay="false"]) {
     border-radius: var(--radius-medium);
     background-color: var(--figma-color-bg);
@@ -4891,7 +4904,9 @@ fig-skeleton {
 
 .fig-mask-icon,
 fig-icon {
-  contain: strict;
+  /* size only — paint containment skips mask-image when `name` / `--icon` updates
+     until a sibling hover (e.g. fig-preview) forces a repaint. */
+  contain: size;
   --size: var(--spacer-4);
   --icon: var(--icon-24-add);