@rogieking/figui3 8.9.18 → 8.9.20

package/fig-editor.css

@@ -174,8 +174,10 @@ fig-fill-picker {
       display: block;
     }
   }
-  fig-preview{
-    overflow: visible;
+  .fig-fill-picker-tab:is([data-tab="solid"], [data-tab="gradient"]) {
+    fig-preview {
+      overflow: visible;
+    }
   }
 
   .fig-fill-picker-color-area {

package/fig-editor.js

@@ -1668,6 +1668,8 @@ class FigFillPicker extends HTMLElement {
     opacity: 1,
   };
   #webcamPosterStream = null;
+  #webcamSnapshotting = false;
+  #webcamImageCapture = null;
 
   // Custom mode slots and data
   #customSlots = {};
@@ -1779,8 +1781,13 @@ class FigFillPicker extends HTMLElement {
 
   #applyParsedWebcam(parsed) {
     if (parsed.webcam && typeof parsed.webcam === "object") {
-      const { stream: _ignored, ...rest } = parsed.webcam;
+      const { stream: _ignored, snapshot, ...rest } = parsed.webcam;
       Object.assign(this.#webcam, rest);
+      // Host writes can arrive as `{ snapshot: null }` while a live frame is
+      // in flight — keep the captured still so the closed swatch can paint it.
+      if (typeof snapshot === "string" && snapshot) {
+        this.#webcam.snapshot = snapshot;
+      }
       return;
     }
     if (parsed.type === "webcam" && parsed.image) {
@@ -1822,12 +1829,96 @@ class FigFillPicker extends HTMLElement {
     return this.#webcam.snapshot;
   }
 
+  #webcamFrameIsBlank(ctx, width, height) {
+    if (typeof ctx.getImageData !== "function") return false;
+    let data;
+    try {
+      data = ctx.getImageData(0, 0, width, height).data;
+    } catch {
+      return false;
+    }
+    const step = Math.max(1, Math.floor((width * height) / 256));
+    let max = 0;
+    let lit = 0;
+    let samples = 0;
+    for (let i = 0; i < data.length; i += step * 4) {
+      const peak = Math.max(data[i], data[i + 1], data[i + 2]);
+      max = Math.max(max, peak);
+      samples += 1;
+      if (peak > 24) lit += 1;
+    }
+    if (!samples) return true;
+    // Built-in cams often emit near-black boot frames with a bit of noise.
+    return max <= 40 || lit / samples < 0.04;
+  }
+
+  async #webcamFrameSources(video) {
+    const sources = [];
+    const track = this.#webcam.stream?.getVideoTracks?.()?.[0];
+    if (track && typeof ImageCapture === "function") {
+      try {
+        if (this.#webcamImageCapture?.track !== track) {
+          this.#webcamImageCapture = new ImageCapture(track);
+        }
+        sources.push(await this.#webcamImageCapture.grabFrame());
+      } catch {
+        this.#webcamImageCapture = null;
+      }
+    }
+    if (typeof createImageBitmap === "function") {
+      try {
+        sources.push(await createImageBitmap(video));
+      } catch {
+        /* video not readable yet */
+      }
+    }
+    sources.push(video);
+    return sources.filter(Boolean);
+  }
+
+  async #paintWebcamFrame(ctx, video, width, height) {
+    const sources = await this.#webcamFrameSources(video);
+    for (const source of sources) {
+      try {
+        ctx.drawImage(source, 0, 0, width, height);
+      } catch {
+        continue;
+      } finally {
+        source.close?.();
+      }
+      if (!this.#webcamFrameIsBlank(ctx, width, height)) return true;
+    }
+    return false;
+  }
+
+  #waitForNextVideoFrame(video) {
+    return new Promise((resolve) => {
+      if (typeof video.requestVideoFrameCallback === "function") {
+        const timer = setTimeout(() => resolve(false), 400);
+        video.requestVideoFrameCallback(() => {
+          clearTimeout(timer);
+          resolve(true);
+        });
+        return;
+      }
+      setTimeout(() => resolve(false), 200);
+    });
+  }
+
   async #snapshotWebcamVideo(video) {
     if (!video?.videoWidth || !video.videoHeight) return null;
     const canvas = document.createElement("canvas");
     canvas.width = video.videoWidth;
     canvas.height = video.videoHeight;
-    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
+    if (!ctx) return null;
+    const painted = await this.#paintWebcamFrame(
+      ctx,
+      video,
+      canvas.width,
+      canvas.height,
+    );
+    if (!painted) return null;
     const blob = await new Promise((resolve) =>
       canvas.toBlob(resolve, "image/png"),
     );
@@ -1842,14 +1933,34 @@ class FigFillPicker extends HTMLElement {
       this.#updateSwatch();
       return;
     }
-    this.#webcamPosterStream = stream;
-    this.#snapshotWebcamVideo(video).then((url) => {
+    if (this.#webcamSnapshotting) return;
+    this.#webcamSnapshotting = true;
+
+    const finish = (url) => {
+      this.#webcamSnapshotting = false;
       if (!url || this.#fillType !== "webcam" || this.#webcam.stream !== stream) {
         return;
       }
+      this.#webcamPosterStream = stream;
       this.#updateSwatch();
       this.#emitInput();
-    });
+    };
+
+    const attempt = async () => {
+      const url = await this.#snapshotWebcamVideo(video);
+      if (url) {
+        finish(url);
+        return;
+      }
+      if (this.#fillType !== "webcam" || this.#webcam.stream !== stream) {
+        this.#webcamSnapshotting = false;
+        return;
+      }
+      await this.#waitForNextVideoFrame(video);
+      return attempt();
+    };
+
+    attempt();
   }
 
   #scheduleFrame(callback) {
@@ -2078,9 +2189,13 @@ class FigFillPicker extends HTMLElement {
           bg = "";
         }
         break;
-      default:
-        const slot = this.#customSlots[this.#fillType];
-        bg = slot?.element?.getAttribute("swatch-background") || "#D9D9D9";
+      default: {
+        const slot =
+          this.#customSlots[this.#fillType]?.element ||
+          this.querySelector(`[slot="mode-${this.#fillType}"]`);
+        bg = slot?.getAttribute("swatch-background") || "";
+        break;
+      }
     }
 
     this.#swatch.setAttribute("background", bg);
@@ -2198,6 +2313,8 @@ class FigFillPicker extends HTMLElement {
       this.#webcam.stream = null;
     }
     this.#webcamPosterStream = null;
+    this.#webcamSnapshotting = false;
+    this.#webcamImageCapture = null;
     const video = this.#dialog?.querySelector(
       ".fig-fill-picker-webcam-video",
     );
@@ -4520,11 +4637,16 @@ class FigFillPicker extends HTMLElement {
     };
     video.addEventListener("loadedmetadata", updateFrameReadiness);
     video.addEventListener("canplay", updateFrameReadiness);
+    video.addEventListener("playing", updateFrameReadiness);
 
     const attachPreview = (stream) => {
       this.#webcam.stream = stream;
       video.srcObject = stream;
+      video.muted = true;
+      video.playsInline = true;
       video.style.display = "block";
+      const play = video.play?.();
+      if (play?.catch) play.catch(() => {});
       updateFrameReadiness();
     };
 
@@ -4573,11 +4695,16 @@ class FigFillPicker extends HTMLElement {
         existing?.getTracks?.().filter((track) => track.readyState !== "ended") ??
         [];
       if (existing && liveTracks.length) {
-        const currentId = this.#webcam.deviceId;
-        if (!requested || !currentId || requested === currentId) {
+        const liveId =
+          existing.getVideoTracks?.()?.[0]?.getSettings?.()?.deviceId ||
+          this.#webcam.deviceId ||
+          null;
+        // Reuse the live stream only when it is already the requested device.
+        // An unknown liveId is not a match — otherwise the camera select cannot switch.
+        if (!requested || requested === liveId) {
           attachPreview(existing);
           this.#emitWebcamStream();
-          populateCameras(null, requested || currentId);
+          populateCameras(null, requested || liveId);
           return;
         }
       }
@@ -4638,8 +4765,7 @@ class FigFillPicker extends HTMLElement {
     cameraSelect.addEventListener("change", (e) => {
       const next =
         typeof e.detail === "string" ? e.detail : e.target?.value;
-      if (!next) return;
-      this.#webcam.deviceId = next;
+      if (!next || next === this.#webcam.deviceId) return;
       startWebcam(next);
     });
 

package/fig-lab.css

@@ -349,6 +349,7 @@ fig-content:has(> propskit-group[name]:last-child) {
 :is(
   propskit-switch,
   propskit-color,
+  propskit-fill,
   propskit-gradient,
   propskit-select,
   propskit-text,
@@ -372,6 +373,7 @@ fig-content:has(> propskit-group[name]:last-child) {
 :is(
   propskit-switch,
   propskit-color,
+  propskit-fill,
   propskit-gradient,
   propskit-text,
   propskit-number,
@@ -472,7 +474,8 @@ propskit-switch {
   }
 }
 
-propskit-color {
+propskit-color,
+propskit-fill {
   --propskit-color-height: 1.5rem;
   --propskit-color-vertical-padding: var(--spacer-1);
   --propskit-color-horizontal-padding: var(--spacer-3);
@@ -551,16 +554,14 @@ propskit-color {
       width: 33%;
       min-width: 0;
       margin-left: auto;
+      overflow: hidden;
+      contain: paint;
       --width: 100%;
       --height: var(--propskit-color-height);
       --size: var(--propskit-color-height);
       --border-radius: var(--radius-medium);
       height: var(--propskit-color-height);
       border-radius: var(--radius-medium);
-
-      &:hover {
-        outline: none !important;
-      }
     }
   }
 }
@@ -652,8 +653,22 @@ propskit-gradient {
       min-width: 0;
       margin-left: auto;
       border-radius: var(--radius-medium);
+    }
+  }
+}
 
-      &:hover {
+:is(propskit-color, propskit-fill, propskit-gradient) {
+  fig-field:not([direction="vertical"]) {
+    outline: none;
+
+    &:focus-within {
+      outline: var(--figma-focus-outline);
+      outline-offset: var(--figma-focus-outline-offset);
+    }
+
+    :is(fig-swatch, fig-input-gradient, fig-input-fill, fig-fill-picker) {
+      &:is(:hover, :focus, :focus-visible, :focus-within),
+      &.has-popup-open {
         outline: none !important;
       }
     }
@@ -1341,6 +1356,7 @@ propskit-slider {
 :is(
   propskit-switch,
   propskit-color,
+  propskit-fill,
   propskit-gradient,
   propskit-select,
   propskit-text,
@@ -1365,6 +1381,7 @@ propskit-slider {
 :is(
   propskit-switch,
   propskit-color,
+  propskit-fill,
   propskit-gradient,
   propskit-select,
   propskit-text,