@rogieking/figui3 2.0.3 → 2.0.5

package/fig.js

@@ -5,6 +5,25 @@
 function figUniqueId() {
   return Date.now().toString(36) + Math.random().toString(36).substring(2);
 }
+
+/**
+ * Gets the highest z-index currently in use on the page
+ * @returns {number} The highest z-index found, minimum of 1000
+ */
+function figGetHighestZIndex() {
+  let highest = 1000; // Baseline minimum
+
+  // Check all elements with inline z-index or computed z-index
+  const elements = document.querySelectorAll("*");
+  for (const el of elements) {
+    const zIndex = parseInt(getComputedStyle(el).zIndex, 10);
+    if (!isNaN(zIndex) && zIndex > highest) {
+      highest = zIndex;
+    }
+  }
+
+  return highest;
+}
 /**
  * Checks if the browser supports the native popover API
  * @returns {boolean} True if popover is supported
@@ -326,7 +345,15 @@ class FigTooltip extends HTMLElement {
     this.popup.style.pointerEvents = "none";
     this.popup.append(content);
     content.innerText = this.getAttribute("text");
-    document.body.append(this.popup);
+    
+    // If tooltip is inside a dialog, append to dialog to stay in top layer
+    const parentDialog = this.closest("dialog");
+    if (parentDialog && parentDialog.open) {
+      parentDialog.append(this.popup);
+    } else {
+      document.body.append(this.popup);
+    }
+    
     const text = content.childNodes[0];
     if (text) {
       const range = document.createRange();
@@ -451,7 +478,7 @@ class FigTooltip extends HTMLElement {
     this.popup.style.visibility = "visible";
     this.popup.style.display = "block";
     this.popup.style.pointerEvents = "all";
-    this.popup.style.zIndex = parseInt(new Date().getTime() / 1000);
+    this.popup.style.zIndex = figGetHighestZIndex() + 1;
 
     this.isOpen = true;
   }
@@ -2695,6 +2722,9 @@ class FigChit extends HTMLElement {
     this.#src = value;
     this.setAttribute("src", value);
   }
+  focus() {
+    this.input?.focus();
+  }
   attributeChangedCallback(name, oldValue, newValue) {
     switch (name) {
       case "src":
@@ -3173,6 +3203,10 @@ class FigInputJoystick extends HTMLElement {
   #handleKeyUp(e) {
     if (e.key === "Shift") this.isShiftHeld = false;
   }
+  focus() {
+    const container = this.querySelector(".fig-input-joystick-plane-container");
+    container?.focus();
+  }
   static get observedAttributes() {
     return ["value", "precision", "transform", "text", "coordinates"];
   }
@@ -3444,6 +3478,10 @@ class FigInputAngle extends HTMLElement {
     if (e.key === "Shift") this.isShiftHeld = false;
   }
 
+  focus() {
+    this.plane?.focus();
+  }
+
   static get observedAttributes() {
     return ["value", "precision", "text"];
   }
@@ -3484,3 +3522,135 @@ class FigInputAngle extends HTMLElement {
   }
 }
 customElements.define("fig-input-angle", FigInputAngle);
+
+// FigShimmer
+class FigShimmer extends HTMLElement {
+  connectedCallback() {
+    const duration = this.getAttribute("duration");
+    if (duration) {
+      this.style.setProperty("--shimmer-duration", duration);
+    }
+  }
+
+  static get observedAttributes() {
+    return ["duration", "playing"];
+  }
+
+  get playing() {
+    return this.getAttribute("playing") !== "false";
+  }
+
+  set playing(value) {
+    if (value) {
+      this.removeAttribute("playing"); // Default is playing
+    } else {
+      this.setAttribute("playing", "false");
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "duration") {
+      this.style.setProperty("--shimmer-duration", newValue || "1.5s");
+    }
+    // playing is handled purely by CSS attribute selectors
+  }
+}
+customElements.define("fig-shimmer", FigShimmer);
+
+// FigLayer
+class FigLayer extends HTMLElement {
+  static get observedAttributes() {
+    return ["open", "visible"];
+  }
+
+  connectedCallback() {
+    // Add click listener for chevron toggle
+    this.addEventListener("click", this.#handleClick.bind(this));
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("click", this.#handleClick.bind(this));
+  }
+
+  #handleClick(e) {
+    // Toggle when clicking on the row (but not on actions or interactive elements)
+    const row = e.target.closest(".fig-layer-row");
+    if (row && row.parentElement === this) {
+      // Don't toggle if clicking on actions or buttons
+      if (e.target.closest(".fig-layer-actions") || e.target.closest("fig-button")) {
+        return;
+      }
+      e.stopPropagation();
+      this.open = !this.open;
+    }
+  }
+
+  get open() {
+    const attr = this.getAttribute("open");
+    return attr !== null && attr !== "false";
+  }
+
+  set open(value) {
+    const oldValue = this.open;
+    if (value) {
+      this.setAttribute("open", "true");
+    } else {
+      this.setAttribute("open", "false");
+    }
+    if (oldValue !== value) {
+      this.dispatchEvent(
+        new CustomEvent("openchange", {
+          detail: { open: value },
+          bubbles: true,
+        })
+      );
+    }
+  }
+
+  get visible() {
+    const attr = this.getAttribute("visible");
+    return attr !== "false";
+  }
+
+  set visible(value) {
+    const oldValue = this.visible;
+    if (value) {
+      this.setAttribute("visible", "true");
+    } else {
+      this.setAttribute("visible", "false");
+    }
+    if (oldValue !== value) {
+      this.dispatchEvent(
+        new CustomEvent("visibilitychange", {
+          detail: { visible: value },
+          bubbles: true,
+        })
+      );
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+
+    if (name === "open") {
+      const isOpen = newValue !== null && newValue !== "false";
+      this.dispatchEvent(
+        new CustomEvent("openchange", {
+          detail: { open: isOpen },
+          bubbles: true,
+        })
+      );
+    }
+
+    if (name === "visible") {
+      const isVisible = newValue !== "false";
+      this.dispatchEvent(
+        new CustomEvent("visibilitychange", {
+          detail: { visible: isVisible },
+          bubbles: true,
+        })
+      );
+    }
+  }
+}
+customElements.define("fig-layer", FigLayer);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rogieking/figui3",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "module": "index.ts",
   "type": "module",
   "devDependencies": {