@rogieking/figui3 8.9.22 → 8.9.23

package/fig-editor.js

@@ -4475,7 +4475,7 @@ class FigFillPicker extends HTMLElement {
   #applyDefaultVideo({ emit = true } = {}) {
     if (this.#video.url) {
       this.#video.missing = false;
-      if (!this.#video.poster) this.#captureVideoPoster(this.#video.url, { emit });
+      if (!this.#video.poster) this.#captureVideoPoster(this.#video.url);
       return;
     }
     const fallback = this.getAttribute("default-video");
@@ -4489,14 +4489,15 @@ class FigFillPicker extends HTMLElement {
       ".fig-fill-picker-video-preview",
     );
     if (preview) this.#updateVideoPreviewStyle(preview);
-    this.#captureVideoPoster(fallback, { emit });
+    this.#captureVideoPoster(fallback);
+    if (emit) this.#emitInput();
   }
 
-  #ensureVideoPoster({ emit = true } = {}) {
+  #ensureVideoPoster() {
     if (this.#fillType !== "video") return;
     const src = this.#video.url;
     if (!src || this.#video.poster) return;
-    this.#captureVideoPoster(src, { emit });
+    this.#captureVideoPoster(src);
   }
 
   async #videoFrameBitmap(video) {
@@ -4550,7 +4551,7 @@ class FigFillPicker extends HTMLElement {
       : new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", 0.85));
   }
 
-  async #captureVideoPoster(src, { emit = true } = {}) {
+  async #captureVideoPoster(src, { emit = false } = {}) {
     if (!src || this.#videoPosterCapturing === src) return;
     this.#videoPosterCapturing = src;
     const video = document.createElement("video");

package/fig.js

@@ -10648,8 +10648,17 @@ class FigInputGradient extends HTMLElement {
       .join(", ");
     const interp = gradientInterpolationClause(gradient);
     const interpolation = interp ? ` ${interp}` : "";
-    // Compact swatch always previews L→R, regardless of linear angle /
-    // radial / angular type (stop handles also use this axis when editing).
+    if (this.#editMode === "picker") {
+      switch (gradient.type) {
+        case "radial":
+          return `radial-gradient(circle at ${gradient.centerX}% ${gradient.centerY}%${interpolation}, ${stops})`;
+        case "angular":
+          return `conic-gradient(from ${gradient.angle}deg${interpolation}, ${stops})`;
+        default:
+          return `linear-gradient(${gradient.angle}deg${interpolation}, ${stops})`;
+      }
+    }
+    // Inline editor swatch previews L→R so stop handles share that axis.
     return `linear-gradient(to right${interpolation}, ${stops})`;
   }
 
@@ -10761,6 +10770,11 @@ class FigInputGradient extends HTMLElement {
         ...this.#gradient,
         ...detail.gradient,
       });
+      if (this.#editMode === "picker" && typeof detail.css === "string" && detail.css) {
+        this.#swatch?.setAttribute("background", detail.css);
+        this.#syncSwatchSize();
+        return;
+      }
       this.#syncSwatch();
     };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "8.9.22",
+  "version": "8.9.23",
   "description": "A lightweight web components library for building Figma plugin and widget UIs with native look and feel",
   "author": "Rogie King",
   "license": "MIT",