@rogieking/figui3 8.9.20 → 8.9.22

package/fig-editor.js

@@ -29,6 +29,18 @@ function figEditorCssUrl(url) {
   return `url("${String(url).replace(/\\/g, "\\\\").replace(/"/g, '\\"')}")`;
 }
 
+function figEditorLooksLikeVideoUrl(raw) {
+  const text = String(raw ?? "").trim();
+  if (!text || text.startsWith("{") || text.startsWith("#")) return false;
+  if (text.startsWith("data:video/")) return true;
+  try {
+    const path = new URL(text, "https://fig.local").pathname;
+    return /\.(mp4|webm|mov|m4v|ogv)$/i.test(path);
+  } catch {
+    return /\.(mp4|webm|mov|m4v|ogv)(?:[?#]|$)/i.test(text);
+  }
+}
+
 function figEditorCreateIcon(name, options = {}) {
   const icon = document.createElement("fig-icon");
   if (name) icon.setAttribute("name", name);
@@ -1692,6 +1704,7 @@ class FigFillPicker extends HTMLElement {
   #boundTriggerKeydown = null;
   #rafIds = new Set();
   #ownedBlobUrls = new Set();
+  #videoPosterCapturing = null;
 
   constructor() {
     super();
@@ -1721,6 +1734,7 @@ class FigFillPicker extends HTMLElement {
       this.#setupTrigger();
       this.#parseValue();
       this.#updateSwatch();
+      this.#ensureVideoPoster();
     });
   }
 
@@ -2117,8 +2131,12 @@ class FigFillPicker extends HTMLElement {
       }
       if (parsed.image) this.#image = { ...this.#image, ...parsed.image };
       if (parsed.video) {
+        const prevUrl = this.#video.url;
         this.#video = { ...this.#video, ...parsed.video };
         this.#video.missing = !this.#video.url;
+        if (this.#video.url !== prevUrl && parsed.video.poster == null) {
+          this.#revokeVideoPoster();
+        }
       }
       this.#applyParsedWebcam(parsed);
 
@@ -2128,10 +2146,17 @@ class FigFillPicker extends HTMLElement {
         this.#customData[parsed.type] = rest;
       }
     } catch (e) {
-      // If not JSON, treat as hex color
       if (valueAttr.startsWith("#")) {
         this.#fillType = "solid";
         this.#color = this.#hexToHSV(valueAttr);
+        return;
+      }
+      if (figEditorLooksLikeVideoUrl(valueAttr)) {
+        const prevUrl = this.#video.url;
+        this.#fillType = "video";
+        this.#video.url = valueAttr.trim();
+        this.#video.missing = false;
+        if (this.#video.url !== prevUrl) this.#revokeVideoPoster();
       }
     }
   }
@@ -2228,6 +2253,8 @@ class FigFillPicker extends HTMLElement {
     if (this.#isDisabled()) return;
     if (!this.#dialog) {
       this.#createDialog();
+    } else {
+      this.#dialog.anchor = this.anchorElement || this.#trigger;
     }
 
     this.#valueAtOpen = JSON.stringify(this.value);
@@ -4427,7 +4454,6 @@ class FigFillPicker extends HTMLElement {
       "aspect-ratio": "1/1",
       fit: "cover",
       checkerboard: "true",
-      autoplay: "true",
       controls: true,
       muted: "true",
       loop: "true",
@@ -4466,8 +4492,67 @@ class FigFillPicker extends HTMLElement {
     this.#captureVideoPoster(fallback, { emit });
   }
 
+  #ensureVideoPoster({ emit = true } = {}) {
+    if (this.#fillType !== "video") return;
+    const src = this.#video.url;
+    if (!src || this.#video.poster) return;
+    this.#captureVideoPoster(src, { emit });
+  }
+
+  async #videoFrameBitmap(video) {
+    if (typeof video.requestVideoFrameCallback === "function") {
+      await Promise.race([
+        new Promise((resolve) => video.requestVideoFrameCallback(() => resolve())),
+        new Promise((resolve) => setTimeout(resolve, 80)),
+      ]);
+    } else {
+      try {
+        await video.play();
+        video.pause();
+      } catch {
+        /* use the current decoded frame */
+      }
+    }
+    if (typeof createImageBitmap === "function") {
+      try {
+        return await createImageBitmap(video);
+      } catch {
+        /* tainted or undecoded — fall back to drawImage(video) */
+      }
+    }
+    return null;
+  }
+
+  async #blobFromVideoFrame(video) {
+    const bitmap = await this.#videoFrameBitmap(video);
+    const width = bitmap?.width || video.videoWidth;
+    const height = bitmap?.height || video.videoHeight;
+    if (!width || !height) {
+      bitmap?.close?.();
+      return null;
+    }
+    const canvas =
+      typeof OffscreenCanvas === "function"
+        ? new OffscreenCanvas(width, height)
+        : Object.assign(document.createElement("canvas"), { width, height });
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      bitmap?.close?.();
+      return null;
+    }
+    try {
+      ctx.drawImage(bitmap || video, 0, 0, width, height);
+    } finally {
+      bitmap?.close?.();
+    }
+    return canvas.convertToBlob
+      ? canvas.convertToBlob({ type: "image/jpeg", quality: 0.85 })
+      : new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", 0.85));
+  }
+
   async #captureVideoPoster(src, { emit = true } = {}) {
-    if (!src) return;
+    if (!src || this.#videoPosterCapturing === src) return;
+    this.#videoPosterCapturing = src;
     const video = document.createElement("video");
     video.muted = true;
     video.playsInline = true;
@@ -4481,14 +4566,8 @@ class FigFillPicker extends HTMLElement {
         video.src = src;
       });
       if (!video.videoWidth || !video.videoHeight) return;
-      const canvas = document.createElement("canvas");
-      canvas.width = video.videoWidth;
-      canvas.height = video.videoHeight;
-      canvas.getContext("2d").drawImage(video, 0, 0);
-      const blob = await new Promise((resolve) =>
-        canvas.toBlob(resolve, "image/jpeg", 0.85),
-      );
-      if (!blob) return;
+      const blob = await this.#blobFromVideoFrame(video);
+      if (!blob || this.#video.url !== src) return;
       this.#revokeVideoPoster();
       this.#video.poster = URL.createObjectURL(blob);
       this.#ownedBlobUrls.add(this.#video.poster);
@@ -4496,6 +4575,10 @@ class FigFillPicker extends HTMLElement {
       if (emit) this.#emitInput();
     } catch {
       // Cross-origin or decode failures leave the swatch empty until a poster exists.
+    } finally {
+      video.removeAttribute("src");
+      video.load();
+      if (this.#videoPosterCapturing === src) this.#videoPosterCapturing = null;
     }
   }
 
@@ -4521,7 +4604,6 @@ class FigFillPicker extends HTMLElement {
       this.#video.url = src;
       this.#video.missing = false;
       this.#updateVideoPreviewStyle(preview);
-      preview.play?.();
       this.#captureVideoPoster(src);
       this.#updateSwatch();
       this.#emitInput();
@@ -5184,6 +5266,7 @@ class FigFillPicker extends HTMLElement {
       case "value":
         this.#parseValue();
         this.#updateSwatch();
+        this.#ensureVideoPoster();
         if (this.#dialog?.open && !this.#isDraggingColor) {
           this.#refreshDialogUI();
           this.#lastChangeValue = JSON.stringify(this.value);

package/fig-lab.css

@@ -658,20 +658,41 @@ propskit-gradient {
 }
 
 :is(propskit-color, propskit-fill, propskit-gradient) {
+  outline: none;
+
   fig-field:not([direction="vertical"]) {
     outline: none;
+  }
 
-    &:focus-within {
-      outline: var(--figma-focus-outline);
-      outline-offset: var(--figma-focus-outline-offset);
+  &:focus-within fig-field:not([direction="vertical"]),
+  &.has-popup-open fig-field:not([direction="vertical"]) {
+    outline: var(--figma-focus-outline);
+    outline-offset: var(--figma-focus-outline-offset);
+  }
+
+  /* Same split as fig-input-gradient: chrome outlines, inner focus does not. */
+  :is(fig-swatch, fig-chit, fig-input-gradient, fig-input-fill, fig-fill-picker) {
+    --selected: 0 !important;
+
+    &:hover,
+    &:focus,
+    &:active {
+      outline: 0 !important;
     }
 
-    :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;
-      }
+    &:focus-within:not(:focus) {
+      outline: 0 !important;
     }
+
+    &:focus-within:not(:focus) :is(input, fig-swatch, fig-chit) {
+      outline: 0 !important;
+      outline-offset: 0 !important;
+    }
+  }
+
+  input[type="color"]:is(:focus, :focus-visible) {
+    outline: 0 !important;
+    outline-offset: 0 !important;
   }
 }
 

package/fig-lab.js

@@ -728,6 +728,25 @@ function figLabCssUrl(url) {
   return `url("${String(url).replace(/\\/g, "\\\\").replace(/"/g, '\\"')}")`;
 }
 
+function figLabLooksLikeVideoUrl(raw) {
+  const text = String(raw ?? "").trim();
+  if (!text || text.startsWith("{") || text.startsWith("#")) return false;
+  if (text.startsWith("data:video/")) return true;
+  try {
+    const path = new URL(text, "https://fig.local").pathname;
+    return /\.(mp4|webm|mov|m4v|ogv)$/i.test(path);
+  } catch {
+    return /\.(mp4|webm|mov|m4v|ogv)(?:[?#]|$)/i.test(text);
+  }
+}
+
+function figLabVideoFillFromUrl(url) {
+  return {
+    type: "video",
+    video: { url, scaleMode: "fill", scale: 50 },
+  };
+}
+
 function figLabParseFillValue(raw) {
   if (raw && typeof raw === "object") return raw;
   const text = String(raw ?? "").trim();
@@ -742,6 +761,7 @@ function figLabParseFillValue(raw) {
     const { color, alpha } = figLabParseSolidColor(text);
     return { type: "solid", color, alpha };
   }
+  if (figLabLooksLikeVideoUrl(text)) return figLabVideoFillFromUrl(text);
   return { type: "solid", color: "#D9D9D9", alpha: 1 };
 }
 
@@ -922,6 +942,7 @@ class PropskitColor extends HTMLElement {
     const label = customLabel || document.createElement("label");
     const picker = document.createElement("fig-fill-picker");
     const swatch = document.createElement("fig-swatch");
+    picker.anchorElement = this;
     picker.append(swatch);
     swatch.setAttribute("tabindex", "0");
     for (const node of initialChildren) {
@@ -1278,6 +1299,7 @@ class PropskitFill extends HTMLElement {
     const label = customLabel || document.createElement("label");
     const picker = document.createElement("fig-fill-picker");
     const swatch = document.createElement("fig-swatch");
+    picker.anchorElement = this;
     picker.append(swatch);
     swatch.setAttribute("tabindex", "0");
     for (const node of initialChildren) {
@@ -1646,6 +1668,7 @@ class PropskitGradient extends HTMLElement {
     const field = document.createElement("fig-field");
     const label = customLabel || document.createElement("label");
     const input = document.createElement("fig-input-gradient");
+    input.anchorElement = this;
 
     field.append(label, input);
     this.#field = field;

package/fig.js

@@ -8684,6 +8684,18 @@ function figCssUrl(url) {
   return `url("${String(url).replace(/\\/g, "\\\\").replace(/"/g, '\\"')}")`;
 }
 
+function figLooksLikeVideoUrl(raw) {
+  const text = String(raw ?? "").trim();
+  if (!text || text.startsWith("{") || text.startsWith("#")) return false;
+  if (text.startsWith("data:video/")) return true;
+  try {
+    const path = new URL(text, "https://fig.local").pathname;
+    return /\.(mp4|webm|mov|m4v|ogv)$/i.test(path);
+  } catch {
+    return /\.(mp4|webm|mov|m4v|ogv)(?:[?#]|$)/i.test(text);
+  }
+}
+
 function figHexToRGB(hex) {
   const h = hex.replace(/^#/, "");
   return {
@@ -9077,7 +9089,6 @@ class FigInputFill extends HTMLElement {
         }
       }
     } catch (e) {
-      // If not JSON, treat as hex color
       if (valueAttr.startsWith("#")) {
         this.#fillType = "solid";
         this.#solid.color = valueAttr.slice(0, 7);
@@ -9085,6 +9096,12 @@ class FigInputFill extends HTMLElement {
           const alphaHex = valueAttr.slice(7, 9);
           this.#solid.alpha = parseInt(alphaHex, 16) / 255;
         }
+        return;
+      }
+      if (figLooksLikeVideoUrl(valueAttr)) {
+        this.#fillType = "video";
+        this.#video.url = valueAttr.trim();
+        this.#video.missing = false;
       }
     }
   }
@@ -10363,6 +10380,7 @@ class FigInputGradient extends HTMLElement {
   #colorObserver = null;
   #repositionRAF = null;
   #pickerDefinitionPromise = null;
+  anchorElement = null;
   #gradient = {
     type: "linear",
     angle: 90,
@@ -10733,7 +10751,7 @@ class FigInputGradient extends HTMLElement {
   #setupPickerEvents() {
     const picker = this.querySelector("fig-fill-picker");
     if (!picker) return;
-    picker.anchorElement = this;
+    picker.anchorElement = this.anchorElement || this;
 
     const syncFromPicker = (e) => {
       e.stopPropagation();

package/package.json

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