@rogieking/figui3 6.29.1 → 6.30.0

package/fig-lab.css

@@ -63,6 +63,12 @@ fig-ai-prompt {
     }
   }
 
+  & > fig-attachments {
+    box-sizing: border-box;
+    width: auto;
+    margin: var(--spacer-2) var(--spacer-3) 0;
+  }
+
   & > fig-footer {
     justify-content: space-between;
     border: none;
@@ -70,6 +76,81 @@ fig-ai-prompt {
   }
 }
 
+fig-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--spacer-2);
+  width: 100%;
+  min-width: 0;
+}
+
+fig-attachment {
+  --fig-attachment-size: 2.5rem;
+
+  position: relative;
+  display: block;
+  flex: 0 0 var(--fig-attachment-size);
+  width: var(--fig-attachment-size);
+  min-width: 0;
+
+  fig-image {
+    display: flex;
+    width: 100%;
+  }
+
+  .fig-attachment-fallback {
+    position: absolute;
+    inset: 0;
+    display: none;
+    place-items: center;
+    border-radius: var(--radius-medium);
+    background: var(--figma-color-bg-secondary);
+    box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
+    color: var(--figma-color-text-secondary);
+    font-size: var(--body-medium-fontSize);
+    font-weight: 500;
+    line-height: 1;
+    pointer-events: none;
+  }
+
+  &[data-fallback] {
+    .fig-attachment-fallback {
+      display: grid;
+    }
+  }
+
+  .fig-attachment-remove {
+    --spacer-2: 0px;
+    --spacer-4: 1.25rem;
+
+    position: absolute;
+    z-index: 3;
+    top: var(--spacer-1);
+    right: var(--spacer-1);
+    width: 1.25rem;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &:hover .fig-attachment-remove,
+  &:focus-within .fig-attachment-remove {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &[disabled]:not([disabled="false"]) {
+    opacity: 0.5;
+
+    .fig-attachment-remove {
+      pointer-events: none;
+    }
+  }
+}
+
 fig-chat-message {
   display: block;
   box-sizing: border-box;

package/fig-lab.js

@@ -193,6 +193,205 @@ figLabDefineElement("fig-ai-prompt", FigAiPrompt);
 class FigChatMessage extends HTMLElement {}
 figLabDefineElement("fig-chat-message", FigChatMessage);
 
+/**
+ * A removable image attachment for compact prompt surfaces.
+ *
+ * @attr {string} src - Image preview URL.
+ * @attr {string} name - Attachment name used for the tooltip and image alt text.
+ * @attr {string} value - Optional application-owned attachment identifier.
+ * @attr {boolean|string} removable - "false" hides the remove button.
+ * @attr {boolean|string} disabled - Disables removal.
+ * @fires remove - Cancelable request for the owning application to remove the attachment.
+ */
+class FigAttachment extends HTMLElement {
+  #tooltip = null;
+  #image = null;
+  #fallback = null;
+  #removeTooltip = null;
+  #removeButton = null;
+  #mediaImage = null;
+  #boundHandleRemove = this.#handleRemove.bind(this);
+  #boundHandleImageLoad = this.#handleImageLoad.bind(this);
+  #boundHandleImageError = this.#handleImageError.bind(this);
+
+  static get observedAttributes() {
+    return ["src", "name", "value", "removable", "disabled"];
+  }
+
+  connectedCallback() {
+    if (!this.#image) this.#initialize();
+    this.#removeButton.removeEventListener("click", this.#boundHandleRemove);
+    this.#removeButton.addEventListener("click", this.#boundHandleRemove);
+    this.#bindMediaImage();
+    this.#sync();
+  }
+
+  disconnectedCallback() {
+    this.#removeButton?.removeEventListener("click", this.#boundHandleRemove);
+    this.#unbindMediaImage();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue || !this.#image) return;
+    this.#sync();
+  }
+
+  #initialize() {
+    this.#tooltip = document.createElement("fig-tooltip");
+    this.#tooltip.className = "fig-attachment-tooltip";
+
+    this.#image = document.createElement("fig-image");
+    this.#image.setAttribute("aspect-ratio", "1/1");
+    this.#image.setAttribute("fit", "cover");
+    this.#image.setAttribute("full", "");
+
+    this.#fallback = document.createElement("span");
+    this.#fallback.className = "fig-attachment-fallback";
+    this.#fallback.setAttribute("aria-hidden", "true");
+
+    this.#removeTooltip = document.createElement("fig-tooltip");
+    this.#removeTooltip.className = "fig-attachment-remove-tooltip";
+    this.#removeTooltip.setAttribute("text", "Remove attachment");
+
+    this.#removeButton = document.createElement("fig-button");
+    this.#removeButton.className = "fig-attachment-remove";
+    this.#removeButton.setAttribute("variant", "overlay");
+    this.#removeButton.setAttribute("size", "small");
+    this.#removeButton.setAttribute("icon", "");
+    const closeIcon = document.createElement("fig-icon");
+    closeIcon.setAttribute("name", "close");
+    closeIcon.setAttribute("size", "small");
+    this.#removeButton.append(closeIcon);
+    this.#removeTooltip.append(this.#removeButton);
+
+    this.#image.append(this.#fallback);
+    this.#tooltip.append(this.#image);
+    this.replaceChildren(this.#tooltip, this.#removeTooltip);
+
+    this.#removeButton.addEventListener("click", this.#boundHandleRemove);
+    this.#bindMediaImage();
+  }
+
+  #bindMediaImage() {
+    const mediaImage = this.#image?.mediaEl;
+    if (!mediaImage || mediaImage === this.#mediaImage) return;
+    this.#unbindMediaImage();
+    this.#mediaImage = mediaImage;
+    this.#mediaImage.addEventListener("load", this.#boundHandleImageLoad);
+    this.#mediaImage.addEventListener("error", this.#boundHandleImageError);
+  }
+
+  #unbindMediaImage() {
+    if (!this.#mediaImage) return;
+    this.#mediaImage.removeEventListener("load", this.#boundHandleImageLoad);
+    this.#mediaImage.removeEventListener("error", this.#boundHandleImageError);
+    this.#mediaImage = null;
+  }
+
+  #sync() {
+    const src = this.getAttribute("src") || "";
+    const name = this.getAttribute("name") || "Attachment";
+    const removable =
+      !this.hasAttribute("removable") || figLabBooleanAttribute(this, "removable");
+    const disabled = figLabBooleanAttribute(this, "disabled");
+
+    this.#tooltip.setAttribute("text", name);
+    this.#image.setAttribute("alt", name);
+    if (src) {
+      this.#image.setAttribute("src", src);
+    } else {
+      this.#image.removeAttribute("src");
+    }
+    this.#bindMediaImage();
+
+    this.#fallback.textContent = this.#fallbackLabel(name);
+    this.#removeButton.hidden = !removable;
+    this.#removeButton.toggleAttribute("disabled", disabled);
+    this.#removeButton.setAttribute("aria-label", `Remove ${name}`);
+    this.toggleAttribute("data-fallback", !src);
+    if (disabled) {
+      this.setAttribute("aria-disabled", "true");
+    } else {
+      this.removeAttribute("aria-disabled");
+    }
+  }
+
+  #fallbackLabel(name) {
+    const baseName = name.split(/[\\/]/).pop() || "";
+    const dotIndex = baseName.lastIndexOf(".");
+    const extension =
+      dotIndex > 0 && dotIndex < baseName.length - 1
+        ? baseName.slice(dotIndex + 1).toUpperCase()
+        : "FILE";
+    return extension.slice(0, 4);
+  }
+
+  #handleImageLoad() {
+    if (this.getAttribute("src")) this.removeAttribute("data-fallback");
+  }
+
+  #handleImageError() {
+    this.setAttribute("data-fallback", "");
+  }
+
+  #handleRemove(event) {
+    event.stopPropagation();
+    if (
+      figLabBooleanAttribute(this, "disabled") ||
+      (this.hasAttribute("removable") &&
+        !figLabBooleanAttribute(this, "removable"))
+    ) {
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("remove", {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail: {
+          value: this.getAttribute("value"),
+          name: this.getAttribute("name") || "",
+          src: this.getAttribute("src") || "",
+          attachment: this,
+        },
+      }),
+    );
+  }
+}
+figLabDefineElement("fig-attachment", FigAttachment);
+
+/* Wrapping presentation container for one or more attachments. */
+class FigAttachments extends HTMLElement {
+  #observer = null;
+
+  connectedCallback() {
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "list");
+      this.setAttribute("data-generated-role", "");
+    }
+    this.#syncItems();
+    if (!this.#observer) {
+      this.#observer = new MutationObserver(() => this.#syncItems());
+      this.#observer.observe(this, { childList: true });
+    }
+  }
+
+  disconnectedCallback() {
+    this.#observer?.disconnect();
+    this.#observer = null;
+  }
+
+  #syncItems() {
+    for (const attachment of this.querySelectorAll(":scope > fig-attachment")) {
+      if (!attachment.hasAttribute("role")) {
+        attachment.setAttribute("role", "listitem");
+        attachment.setAttribute("data-generated-role", "");
+      }
+    }
+  }
+}
+figLabDefineElement("fig-attachments", FigAttachments);
+
 /* Field + Switch wrapper */
 class PropskitSwitch extends HTMLElement {
   #field = null;

package/package.json

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