@rogieking/figui3 8.4.0 → 8.5.0

package/fig-lab.css

@@ -76,6 +76,34 @@ fig-ai-prompt {
   }
 }
 
+fig-ai-context {
+  --fig-ai-context-margin-inline: var(--spacer-3);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacer-2);
+  box-sizing: border-box;
+  width: calc(
+    100% - var(--fig-ai-context-margin-inline) -
+      var(--fig-ai-context-margin-inline)
+  );
+  margin-inline: var(--fig-ai-context-margin-inline);
+  padding: var(--spacer-2) var(--spacer-2-5);
+  padding-bottom: var(--spacer-4);
+  border: 1px solid var(--figma-color-border);
+  border-bottom: none;
+  border-radius: var(--radius-large) var(--radius-large) 0 0;
+  color: var(--figma-color-text);
+
+  &>fig-attachments{
+    margin-inline: calc(-1 * var(--spacer-1));
+  }
+}
+
+fig-ai-context:has(+ fig-ai-prompt) {
+  margin-bottom: calc(-1 * var(--spacer-3));
+}
+
 fig-attachments {
   display: flex;
   flex-wrap: wrap;

package/fig-lab.js

@@ -241,6 +241,10 @@ function figLabUniqueId(prefix = "fig-lab") {
 class FigAiPrompt extends HTMLElement {}
 figLabDefineElement("fig-ai-prompt", FigAiPrompt);
 
+/* Presentation-only open container for attachments and status rows above a prompt. */
+class FigAiContext extends HTMLElement {}
+figLabDefineElement("fig-ai-context", FigAiContext);
+
 /* Presentation-only message surface for AI conversations. */
 class FigChatMessage extends HTMLElement {}
 figLabDefineElement("fig-chat-message", FigChatMessage);

package/fig.js

@@ -8741,7 +8741,15 @@ class FigInputFill extends HTMLElement {
           })
           .join(", ");
         const interpolation = gradientInterpolationClause(this.#gradient);
-        return `linear-gradient(${this.#gradient.angle}deg${interpolation ? ` ${interpolation}` : ""}, ${stops})`;
+        const interpolationSuffix = interpolation ? ` ${interpolation}` : "";
+        switch (this.#gradient.type) {
+          case "radial":
+            return `radial-gradient(circle${interpolationSuffix}, ${stops})`;
+          case "angular":
+            return `conic-gradient(from ${this.#gradient.angle}deg${interpolationSuffix}, ${stops})`;
+          default:
+            return `linear-gradient(${this.#gradient.angle}deg${interpolationSuffix}, ${stops})`;
+        }
       }
       case "image":
         return this.#image.url ? `url(${this.#image.url})` : "#D9D9D9";

package/package.json

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