@strands.gg/accui 2.10.0 → 2.10.1

package/dist/index.es.js

@@ -8,7 +8,7 @@ const _hoisted_2$M = {
   class: "ui-app-loading-overlay"
 };
 const _hoisted_3$J = { class: "ui-app-loading-content" };
-const _hoisted_4$G = {
+const _hoisted_4$H = {
   key: 0,
   class: "ui-app-loading-message"
 };
@@ -67,7 +67,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
           isGlobalLoading.value ? (openBlock(), createElementBlock("div", _hoisted_2$M, [
             createElementVNode("div", _hoisted_3$J, [
               _cache[1] || (_cache[1] = createElementVNode("div", { class: "ui-app-loading-spinner" }, null, -1)),
-              _ctx.loadingMessage ? (openBlock(), createElementBlock("p", _hoisted_4$G, toDisplayString(_ctx.loadingMessage), 1)) : createCommentVNode("", true)
+              _ctx.loadingMessage ? (openBlock(), createElementBlock("p", _hoisted_4$H, toDisplayString(_ctx.loadingMessage), 1)) : createCommentVNode("", true)
             ])
           ])) : createCommentVNode("", true)
         ]))
@@ -86,14 +86,14 @@ const UiApp = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["__scopeId", "data-v-f
 const _hoisted_1$T = { class: "accui-component-scope" };
 const _hoisted_2$L = { class: "alert-content" };
 const _hoisted_3$I = { class: "alert-icon-container" };
-const _hoisted_4$F = {
+const _hoisted_4$G = {
   class: "alert-main-icon",
   fill: "currentColor",
   viewBox: "0 0 20 20",
   "aria-hidden": "true"
 };
-const _hoisted_5$A = ["d"];
-const _hoisted_6$u = { class: "alert-text-container" };
+const _hoisted_5$B = ["d"];
+const _hoisted_6$v = { class: "alert-text-container" };
 const _hoisted_7$s = {
   key: 0,
   class: "alert-dismiss-container"
@@ -141,15 +141,15 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
         }, [
           createElementVNode("div", _hoisted_2$L, [
             createElementVNode("div", _hoisted_3$I, [
-              (openBlock(), createElementBlock("svg", _hoisted_4$F, [
+              (openBlock(), createElementBlock("svg", _hoisted_4$G, [
                 createElementVNode("path", {
                   "fill-rule": "evenodd",
                   d: iconPath.value,
                   "clip-rule": "evenodd"
-                }, null, 8, _hoisted_5$A)
+                }, null, 8, _hoisted_5$B)
               ]))
             ]),
-            createElementVNode("div", _hoisted_6$u, [
+            createElementVNode("div", _hoisted_6$v, [
               _ctx.title ? (openBlock(), createElementBlock("h3", {
                 key: 0,
                 class: normalizeClass(titleClasses.value)
@@ -196,9 +196,9 @@ const _hoisted_1$S = {
 };
 const _hoisted_2$K = ["width", "height"];
 const _hoisted_3$H = ["d"];
-const _hoisted_4$E = ["stroke-width"];
-const _hoisted_5$z = ["stroke-width"];
-const _hoisted_6$t = ["width", "height"];
+const _hoisted_4$F = ["stroke-width"];
+const _hoisted_5$A = ["stroke-width"];
+const _hoisted_6$u = ["width", "height"];
 const _hoisted_7$r = {
   key: 3,
   class: "loader-text"
@@ -257,7 +257,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
               "stroke-width": _ctx.weight,
               "stroke-linecap": "round",
               "stroke-linejoin": "round"
-            }, null, 8, _hoisted_4$E),
+            }, null, 8, _hoisted_4$F),
             createElementVNode("use", {
               href: "#logo-path",
               fill: "none",
@@ -266,7 +266,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               class: "loader-animated-path"
-            }, null, 8, _hoisted_5$z)
+            }, null, 8, _hoisted_5$A)
           ], 8, _hoisted_2$K))
         ])) : _ctx.variant === "circle" ? (openBlock(), createElementBlock("div", {
           key: 1,
@@ -288,7 +288,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
               "stroke-linecap": "round",
               class: "loader-circle-path"
             }, null, -1)
-          ])], 8, _hoisted_6$t))
+          ])], 8, _hoisted_6$u))
         ], 4)) : _ctx.variant === "bar" ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "loader-bar",
@@ -316,7 +316,7 @@ const _hoisted_3$G = {
   key: 0,
   class: "leading-icon"
 };
-const _hoisted_4$D = {
+const _hoisted_4$E = {
   key: 1,
   class: "trailing-icon"
 };
@@ -380,7 +380,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
           ])) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "icon", {}, void 0, true),
           renderSlot(_ctx.$slots, "default", {}, void 0, true),
-          hasTrailingIconSlot.value ? (openBlock(), createElementBlock("span", _hoisted_4$D, [
+          hasTrailingIconSlot.value ? (openBlock(), createElementBlock("span", _hoisted_4$E, [
             renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
           ])) : createCommentVNode("", true)
         ], 64))
@@ -795,8 +795,20 @@ const _hoisted_1$O = {
   key: 0,
   class: "ui-card-header"
 };
-const _hoisted_2$I = { class: "ui-card-content" };
+const _hoisted_2$I = {
+  key: 0,
+  class: "ui-card-title-wrapper"
+};
 const _hoisted_3$F = {
+  key: 0,
+  class: "ui-card-title"
+};
+const _hoisted_4$D = {
+  key: 0,
+  class: "ui-card-subtitle"
+};
+const _hoisted_5$z = { class: "ui-card-content" };
+const _hoisted_6$t = {
   key: 1,
   class: "ui-card-footer"
 };
@@ -809,7 +821,9 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     variant: { default: "default" },
     padding: { default: "md" },
     shadow: { default: "sm" },
-    color: { default: "default" }
+    color: { default: "default" },
+    title: {},
+    subtitle: {}
   },
   setup(__props) {
     const attrs = useAttrs();
@@ -823,20 +837,30 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
           unref(attrs)["class"]
         ]])
       }, [
-        _ctx.$slots["header"] ? (openBlock(), createElementBlock("div", _hoisted_1$O, [
-          renderSlot(_ctx.$slots, "header", {}, void 0, true)
+        _ctx.$slots["header"] || _ctx.title || _ctx.subtitle ? (openBlock(), createElementBlock("div", _hoisted_1$O, [
+          renderSlot(_ctx.$slots, "header", {}, () => [
+            _ctx.title || _ctx.$slots["title"] || _ctx.subtitle || _ctx.$slots["subtitle"] ? (openBlock(), createElementBlock("div", _hoisted_2$I, [
+              _ctx.title || _ctx.$slots["title"] ? renderSlot(_ctx.$slots, "title", { key: 0 }, () => [
+                _ctx.title ? (openBlock(), createElementBlock("h2", _hoisted_3$F, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true)
+              ], true) : createCommentVNode("", true),
+              _ctx.subtitle || _ctx.$slots["subtitle"] ? renderSlot(_ctx.$slots, "subtitle", { key: 1 }, () => [
+                _ctx.subtitle ? (openBlock(), createElementBlock("p", _hoisted_4$D, toDisplayString(_ctx.subtitle), 1)) : createCommentVNode("", true)
+              ], true) : createCommentVNode("", true)
+            ])) : createCommentVNode("", true),
+            renderSlot(_ctx.$slots, "actions", {}, void 0, true)
+          ], true)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$I, [
+        createElementVNode("div", _hoisted_5$z, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]),
-        _ctx.$slots["footer"] ? (openBlock(), createElementBlock("div", _hoisted_3$F, [
+        _ctx.$slots["footer"] ? (openBlock(), createElementBlock("div", _hoisted_6$t, [
           renderSlot(_ctx.$slots, "footer", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
-const StrandsUiCard = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-261f3012"]]);
+const StrandsUiCard = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-cc3144c9"]]);
 /**
  * @license lucide-vue-next v0.542.0 - ISC
  *
@@ -2596,6 +2620,13 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
+    const isDevToolsOpen = () => {
+      try {
+        return window.outerHeight - window.innerHeight > 160 || window.outerWidth - window.innerWidth > 160;
+      } catch {
+        return false;
+      }
+    };
     const props = __props;
     const emit = __emit;
     const slots = useSlots();
@@ -2622,195 +2653,226 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     let currentTabIndex = -1;
     let isAnimating = false;
     const calculateUnderlineDimensions = (tabElement, containerElement) => {
-      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;
+      if (isDevToolsOpen()) {
         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
+          width: 100,
+          left: 0,
+          height: 3,
+          top: 0
         };
-      } else {
-        const tabLeft = tabRect.left - containerRect.left;
-        const tabWidth = tabRect.width;
-        if (props.underlineWidth === "full") {
+      }
+      try {
+        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: tabWidth - 30,
-            // Fixed 15px margin on each side for horizontal tabs
-            left: tabLeft + 15,
+            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") {
+            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;
+          return {
+            width: underlineWidth,
+            left: tabLeft + offset,
             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;
+      } catch (error) {
+        console.warn("Tab dimension calculation failed, using fallback values:", error);
         return {
-          width: underlineWidth,
-          left: tabLeft + offset,
-          height: underlineThickness,
-          top: containerHeight - actualPadding - underlineThickness / 2
-          // Position near bottom of container
+          width: 100,
+          left: 0,
+          height: 3,
+          top: 0
         };
       }
     };
     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);
-      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) {
+      try {
+        const newTabRect = newTab.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        let newTabPos, newTabSize;
         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"
-          };
+          newTabPos = newTabRect.top - containerRect.top;
+          newTabSize = newTabRect.height;
         } 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"
-          };
+          newTabPos = newTabRect.left - containerRect.left;
+          newTabSize = newTabRect.width;
         }
-        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"
-          };
+        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;
-      }
-      requestAnimationFrame(() => {
-        if (props.orientation === "vertical") {
+        const currentTab = tabButtons.value[currentTabIndex];
+        calculateUnderlineDimensions(currentTab, container);
+        currentTab.getBoundingClientRect();
+        const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (prefersReducedMotion) {
           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`,
+            width: `${newDimensions.width || 0}px`,
+            left: `${newDimensions.left || 0}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(() => {
+          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;
-        }, 200);
-      });
+          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}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;
+      }
     };
     let resizeTimeout = null;
     const handleResize = () => {
@@ -2876,6 +2938,10 @@ 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);
@@ -2895,6 +2961,9 @@ 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);
@@ -2971,7 +3040,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiTabs = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-edff91a5"]]);
+const StrandsUiTabs = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-8e8f1aec"]]);
 const _hoisted_1$I = {
   key: 0,
   class: "ui-divider-text"

package/package.json

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