@strands.gg/accui 2.10.4 → 2.10.6

package/dist/index.es.js

@@ -862,7 +862,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiCard = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-d53b5273"]]);
+const StrandsUiCard = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-49be5a80"]]);
 /**
  * @license lucide-vue-next v0.542.0 - ISC
  *
@@ -2622,26 +2622,6 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
-    let lastCalculationTime = 0;
-    let calculationInProgress = false;
-    const isSafeToCalculate = () => {
-      if (calculationInProgress) {
-        return false;
-      }
-      const now = Date.now();
-      const timeSinceLastCalc = now - lastCalculationTime;
-      if (timeSinceLastCalc < 16) {
-        return false;
-      }
-      return true;
-    };
-    const startCalculation = () => {
-      calculationInProgress = true;
-      lastCalculationTime = Date.now();
-    };
-    const endCalculation = () => {
-      calculationInProgress = false;
-    };
     const props = __props;
     const emit = __emit;
     const slots = useSlots();
@@ -2668,248 +2648,195 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     let currentTabIndex = -1;
     let isAnimating = false;
     const calculateUnderlineDimensions = (tabElement, containerElement) => {
-      if (!tabElement || !containerElement) {
-        return {
-          width: 0,
-          left: 0,
-          height: 0,
-          top: 0
-        };
-      }
-      if (!isSafeToCalculate()) {
+      const tabRect = tabElement.getBoundingClientRect();
+      const containerRect = containerElement.getBoundingClientRect();
+      const computedStyle = getComputedStyle(containerElement);
+      const underlineThickness = parseFloat(computedStyle.getPropertyValue("--underline-thickness") || "5");
+      let actualPadding = 5;
+      if (props.size === "sm") {
+        actualPadding = 4;
+      } else if (props.size === "lg") {
+        actualPadding = 6;
+      }
+      const containerHeight = containerRect.height;
+      if (props.orientation === "vertical") {
+        const tabTop = tabRect.top - containerRect.top;
+        const tabHeight = tabRect.height;
         return {
-          width: 0,
-          left: 0,
-          height: 0,
-          top: 0
+          height: tabHeight - actualPadding * 4,
+          // More padding for shorter underline
+          top: tabTop + actualPadding * 2,
+          // Better centering with more offset
+          width: underlineThickness,
+          // Use dynamic thickness
+          left: actualPadding - underlineThickness / 2
+          // Position at container left edge
         };
-      }
-      startCalculation();
-      try {
-        const tabRect = tabElement.getBoundingClientRect();
-        const containerRect = containerElement.getBoundingClientRect();
-        if (!tabRect || !containerRect || tabRect.width === 0 || containerRect.width === 0) {
-          endCalculation();
-          return {
-            width: 0,
-            left: 0,
-            height: 0,
-            top: 0
-          };
-        }
-        const computedStyle = getComputedStyle(containerElement);
-        const underlineThickness = parseFloat(computedStyle.getPropertyValue("--underline-thickness") || "5");
-        let actualPadding = 5;
-        if (props.size === "sm") {
-          actualPadding = 4;
-        } else if (props.size === "lg") {
-          actualPadding = 6;
-        }
-        const containerHeight = containerRect.height;
-        if (props.orientation === "vertical") {
-          const tabTop = tabRect.top - containerRect.top;
-          const tabHeight = tabRect.height;
-          endCalculation();
-          return {
-            height: tabHeight - actualPadding * 4,
-            // More padding for shorter underline
-            top: tabTop + actualPadding * 2,
-            // Better centering with more offset
-            width: underlineThickness,
-            // Use dynamic thickness
-            left: actualPadding - underlineThickness / 2
-            // Position at container left edge
-          };
-        } else {
-          const tabLeft = tabRect.left - containerRect.left;
-          const tabWidth = tabRect.width;
-          if (props.underlineWidth === "full") {
-            endCalculation();
-            return {
-              width: tabWidth - 30,
-              // Fixed 15px margin on each side for horizontal tabs
-              left: tabLeft + 15,
-              height: underlineThickness,
-              top: containerHeight - actualPadding - underlineThickness / 2
-              // Position near bottom of container
-            };
-          }
-          let underlineWidth;
-          if (props.underlineWidth.endsWith("%")) {
-            const percentage = parseFloat(props.underlineWidth) / 100;
-            underlineWidth = tabWidth * percentage;
-          } else if (props.underlineWidth.endsWith("px")) {
-            underlineWidth = parseFloat(props.underlineWidth);
-          } else if (props.underlineWidth.endsWith("rem")) {
-            const remValue = parseFloat(props.underlineWidth);
-            const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-            underlineWidth = remValue * fontSize;
-          } else {
-            underlineWidth = parseFloat(props.underlineWidth) || tabWidth;
-          }
-          const offset = (tabWidth - underlineWidth) / 2;
-          endCalculation();
+      } else {
+        const tabLeft = tabRect.left - containerRect.left;
+        const tabWidth = tabRect.width;
+        if (props.underlineWidth === "full") {
           return {
-            width: underlineWidth,
-            left: tabLeft + offset,
+            width: tabWidth - 30,
+            // Fixed 15px margin on each side for horizontal tabs
+            left: tabLeft + 15,
             height: underlineThickness,
             top: containerHeight - actualPadding - underlineThickness / 2
             // Position near bottom of container
           };
         }
-      } catch (error) {
-        endCalculation();
-        console.warn("Tab dimension calculation failed, using fallback values:", error);
+        let underlineWidth;
+        if (props.underlineWidth.endsWith("%")) {
+          const percentage = parseFloat(props.underlineWidth) / 100;
+          underlineWidth = tabWidth * percentage;
+        } else if (props.underlineWidth.endsWith("px")) {
+          underlineWidth = parseFloat(props.underlineWidth);
+        } else if (props.underlineWidth.endsWith("rem")) {
+          const remValue = parseFloat(props.underlineWidth);
+          const fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+          underlineWidth = remValue * fontSize;
+        } else {
+          underlineWidth = parseFloat(props.underlineWidth) || tabWidth;
+        }
+        const offset = (tabWidth - underlineWidth) / 2;
         return {
-          width: 0,
-          left: 0,
-          height: 0,
-          top: 0
+          width: underlineWidth,
+          left: tabLeft + offset,
+          height: underlineThickness,
+          top: containerHeight - actualPadding - underlineThickness / 2
+          // Position near bottom of container
         };
       }
     };
     const handleTabClick = async (value, index) => {
       if (isAnimating) return;
       emit("update:modelValue", value);
-      if (isDevToolsOpen()) {
-        currentTabIndex = index;
-        return;
-      }
       await nextTick();
       animateUnderlineStretch(index);
     };
     const animateUnderlineStretch = async (newIndex) => {
-      if (isDevToolsOpen()) {
-        currentTabIndex = newIndex;
-        return;
-      }
       if (!tabButtons.value[newIndex] || newIndex === currentTabIndex) return;
       isAnimating = true;
       const newTab = tabButtons.value[newIndex];
       const container = newTab.parentElement;
       if (!container) return;
       const newDimensions = calculateUnderlineDimensions(newTab, container);
-      try {
-        const newTabRect = newTab.getBoundingClientRect();
-        const containerRect = container.getBoundingClientRect();
-        let newTabPos, newTabSize;
+      const newTabRect = newTab.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      let newTabPos, newTabSize;
+      if (props.orientation === "vertical") {
+        newTabPos = newTabRect.top - containerRect.top;
+        newTabSize = newTabRect.height;
+      } else {
+        newTabPos = newTabRect.left - containerRect.left;
+        newTabSize = newTabRect.width;
+      }
+      if (currentTabIndex === -1) {
         if (props.orientation === "vertical") {
-          newTabPos = newTabRect.top - containerRect.top;
-          newTabSize = newTabRect.height;
+          underlineStyle.value = {
+            height: `${newDimensions.height}px`,
+            top: `${newDimensions.top}px`,
+            width: `${newDimensions.width}px`,
+            left: `${newDimensions.left}px`,
+            opacity: "1"
+          };
+          backgroundStyle.value = {
+            height: `${newTabSize}px`,
+            top: `${newTabPos}px`,
+            width: `${newTabRect.width}px`,
+            left: "0",
+            opacity: "1"
+          };
         } else {
-          newTabPos = newTabRect.left - containerRect.left;
-          newTabSize = newTabRect.width;
+          underlineStyle.value = {
+            width: `${newDimensions.width}px`,
+            left: `${newDimensions.left}px`,
+            height: `${newDimensions.height}px`,
+            top: `${newDimensions.top}px`,
+            opacity: "1"
+          };
+          backgroundStyle.value = {
+            width: `${newTabSize}px`,
+            left: `${newTabPos}px`,
+            height: "100%",
+            top: "0",
+            opacity: "1"
+          };
         }
-        if (currentTabIndex === -1) {
-          if (props.orientation === "vertical") {
-            underlineStyle.value = {
-              height: `${newDimensions.height}px`,
-              top: `${newDimensions.top}px`,
-              width: `${newDimensions.width}px`,
-              left: `${newDimensions.left}px`,
-              opacity: "1"
-            };
-            backgroundStyle.value = {
-              height: `${newTabSize}px`,
-              top: `${newTabPos}px`,
-              width: `${newTabRect.width}px`,
-              left: "0",
-              opacity: "1"
-            };
-          } else {
-            underlineStyle.value = {
-              width: `${newDimensions.width}px`,
-              left: `${newDimensions.left}px`,
-              height: `${newDimensions.height}px`,
-              top: `${newDimensions.top}px`,
-              opacity: "1"
-            };
-            backgroundStyle.value = {
-              width: `${newTabSize}px`,
-              left: `${newTabPos}px`,
-              height: "100%",
-              top: "0",
-              opacity: "1"
-            };
-          }
-          currentTabIndex = newIndex;
-          isAnimating = false;
-          return;
+        currentTabIndex = newIndex;
+        isAnimating = false;
+        return;
+      }
+      const currentTab = tabButtons.value[currentTabIndex];
+      calculateUnderlineDimensions(currentTab, container);
+      currentTab.getBoundingClientRect();
+      const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (prefersReducedMotion) {
+        underlineStyle.value = {
+          width: `${newDimensions.width || 0}px`,
+          left: `${newDimensions.left || 0}px`,
+          height: `${newDimensions.height || 7}px`,
+          top: `${newDimensions.top}px`,
+          opacity: "1"
+        };
+        if (props.orientation === "vertical") {
+          backgroundStyle.value = {
+            height: `${newTabSize}px`,
+            top: `${newTabPos}px`,
+            width: "100%",
+            left: "0",
+            opacity: "1"
+          };
+        } else {
+          backgroundStyle.value = {
+            width: `${newTabSize}px`,
+            left: `${newTabPos}px`,
+            height: "100%",
+            top: "0",
+            opacity: "1"
+          };
         }
-        const currentTab = tabButtons.value[currentTabIndex];
-        calculateUnderlineDimensions(currentTab, container);
-        currentTab.getBoundingClientRect();
-        const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-        if (prefersReducedMotion) {
+        currentTabIndex = newIndex;
+        isAnimating = false;
+        return;
+      }
+      requestAnimationFrame(() => {
+        if (props.orientation === "vertical") {
+          underlineStyle.value = {
+            height: `${newDimensions.height}px`,
+            top: `${newDimensions.top}px`,
+            width: `${newDimensions.width || 7}px`,
+            left: `${newDimensions.left}px`,
+            opacity: "1"
+          };
+          backgroundStyle.value = {
+            height: `${newTabSize}px`,
+            top: `${newTabPos}px`,
+            width: "100%",
+            left: "0",
+            opacity: "1"
+          };
+        } else {
           underlineStyle.value = {
-            width: `${newDimensions.width || 0}px`,
-            left: `${newDimensions.left || 0}px`,
+            width: `${newDimensions.width}px`,
+            left: `${newDimensions.left}px`,
             height: `${newDimensions.height || 7}px`,
             top: `${newDimensions.top}px`,
             opacity: "1"
           };
-          if (props.orientation === "vertical") {
-            backgroundStyle.value = {
-              height: `${newTabSize}px`,
-              top: `${newTabPos}px`,
-              width: "100%",
-              left: "0",
-              opacity: "1"
-            };
-          } else {
-            backgroundStyle.value = {
-              width: `${newTabSize}px`,
-              left: `${newTabPos}px`,
-              height: "100%",
-              top: "0",
-              opacity: "1"
-            };
-          }
-          currentTabIndex = newIndex;
-          isAnimating = false;
-          return;
+          backgroundStyle.value = {
+            width: `${newTabSize}px`,
+            left: `${newTabPos}px`,
+            height: "100%",
+            top: "0",
+            opacity: "1"
+          };
         }
-        requestAnimationFrame(() => {
-          if (props.orientation === "vertical") {
-            underlineStyle.value = {
-              height: `${newDimensions.height}px`,
-              top: `${newDimensions.top}px`,
-              width: `${newDimensions.width || 7}px`,
-              left: `${newDimensions.left}px`,
-              opacity: "1"
-            };
-            backgroundStyle.value = {
-              height: `${newTabSize}px`,
-              top: `${newTabPos}px`,
-              width: "100%",
-              left: "0",
-              opacity: "1"
-            };
-          } else {
-            underlineStyle.value = {
-              width: `${newDimensions.width}px`,
-              left: `${newDimensions.left}px`,
-              height: `${newDimensions.height || 7}px`,
-              top: `${newDimensions.top}px`,
-              opacity: "1"
-            };
-            backgroundStyle.value = {
-              width: `${newTabSize}px`,
-              left: `${newTabPos}px`,
-              height: "100%",
-              top: "0",
-              opacity: "1"
-            };
-          }
-          currentTabIndex = newIndex;
-          setTimeout(() => {
-            isAnimating = false;
-          }, 200);
-        });
-      } catch (error) {
-        console.warn("Tab animation calculation failed:", error);
-        isAnimating = false;
-      }
+        currentTabIndex = newIndex;
+        setTimeout(() => {
+          isAnimating = false;
+        }, 200);
+      });
     };
     let resizeTimeout = null;
     const handleResize = () => {
@@ -2975,10 +2902,6 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     };
     onMounted(async () => {
       await nextTick();
-      if (isDevToolsOpen()) {
-        enableTransitions.value = true;
-        return;
-      }
       const activeIndex = props.tabs.findIndex((tab) => tab.value === props.modelValue);
       if (activeIndex !== -1) {
         animateUnderlineStretch(activeIndex);
@@ -2998,9 +2921,6 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     const { modelValue } = toRefs(props);
     watch(modelValue, async () => {
       await nextTick();
-      if (isDevToolsOpen()) {
-        return;
-      }
       const activeIndex = props.tabs.findIndex((tab) => tab.value === props.modelValue);
       if (activeIndex !== -1) {
         animateUnderlineStretch(activeIndex);
@@ -3077,7 +2997,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiTabs = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-473634b2"]]);
+const StrandsUiTabs = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-edff91a5"]]);
 const _hoisted_1$I = {
   key: 0,
   class: "ui-divider-text"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strands.gg/accui",
-  "version": "2.10.4",
+  "version": "2.10.6",
   "description": "Strands Authentication UI Components",
   "type": "module",
   "main": "./dist/index.cjs.js",