@strands.gg/accui 1.4.1 → 1.5.0

package/dist/strands-auth-ui.cjs.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
-const useStrandsConfig = require("./useStrandsConfig-DW4ez8t4.cjs");
-const useStrandsAuth = require("./useStrandsAuth-zR8fRWme.cjs");
+const useStrandsConfig = require("./useStrandsConfig-CtmQtE7Y.cjs");
+const useStrandsAuth = require("./useStrandsAuth-CVR23cd8.cjs");
 const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
   __name: "UiAlert",
   props: {
@@ -1884,17 +1884,18 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
       img.onload = () => {
         originalImage.value = img;
         isResetting.value = true;
-        const scale = Math.min(
+        const scale = Math.max(
           cropRadius.value * 2 / img.width,
           cropRadius.value * 2 / img.height
         );
-        const initialZoom = scale;
+        const initialZoom = scale * 1.2;
         minZoom.value = scale;
         const scaledWidth = img.width * initialZoom;
         const scaledHeight = img.height * initialZoom;
         imagePos.x = (canvasSize.value - scaledWidth) / 2;
         imagePos.y = (canvasSize.value - scaledHeight) / 2;
         zoom.value = initialZoom;
+        constrainImagePosition();
         vue.nextTick(() => {
           isResetting.value = false;
         });
@@ -1911,6 +1912,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
       const scaledHeight = img.height * zoom.value;
       imagePos.x = (canvasSize.value - scaledWidth) / 2;
       imagePos.y = (canvasSize.value - scaledHeight) / 2;
+      constrainImagePosition();
     };
     const updateCanvas = () => {
       if (!originalImage.value || !canvas2.value) return;
@@ -1960,12 +1962,29 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
       document.addEventListener("mousemove", handleDrag);
       document.addEventListener("mouseup", stopDrag);
     };
+    const constrainImagePosition = () => {
+      if (!originalImage.value) return;
+      const img = originalImage.value;
+      const scaledWidth = img.width * zoom.value;
+      const scaledHeight = img.height * zoom.value;
+      const circleLeft = canvasSize.value / 2 - cropRadius.value;
+      const circleTop = canvasSize.value / 2 - cropRadius.value;
+      const circleRight = canvasSize.value / 2 + cropRadius.value;
+      const circleBottom = canvasSize.value / 2 + cropRadius.value;
+      const maxX = circleRight - scaledWidth;
+      const minX = circleLeft;
+      const maxY = circleBottom - scaledHeight;
+      const minY = circleTop;
+      imagePos.x = Math.min(minX, Math.max(maxX, imagePos.x));
+      imagePos.y = Math.min(minY, Math.max(maxY, imagePos.y));
+    };
     const handleDrag = (event) => {
       if (!isDragging.value) return;
       const deltaX = event.clientX - dragStart.x;
       const deltaY = event.clientY - dragStart.y;
       imagePos.x = dragStart.imageX + deltaX;
       imagePos.y = dragStart.imageY + deltaY;
+      constrainImagePosition();
       updateCanvas();
     };
     const stopDrag = () => {
@@ -1988,6 +2007,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
         imagePos.x = imageCenterX - newWidth / 2;
         imagePos.y = imageCenterY - newHeight / 2;
         zoom.value = newZoom;
+        constrainImagePosition();
         updateCanvas();
       }
     };
@@ -1995,16 +2015,17 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
       if (!originalImage.value) return;
       const img = originalImage.value;
       isResetting.value = true;
-      const scale = Math.min(
+      const scale = Math.max(
         cropRadius.value * 2 / img.width,
         cropRadius.value * 2 / img.height
       );
-      const targetZoom = scale;
+      const targetZoom = scale * 1.2;
       const scaledWidth = img.width * targetZoom;
       const scaledHeight = img.height * targetZoom;
       imagePos.x = (canvasSize.value - scaledWidth) / 2;
       imagePos.y = (canvasSize.value - scaledHeight) / 2;
       zoom.value = targetZoom;
+      constrainImagePosition();
       vue.nextTick(() => {
         isResetting.value = false;
       });
@@ -2078,7 +2099,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
         processFile(file);
       }
     }, { immediate: true });
-    const __returned__ = { props, emit, fileInput, canvas: canvas2, previewCanvas, imageData, originalImage, canvasSize, previewSize, cropRadius, imagePos, zoom, minZoom, maxZoom, isDragging, isResetting, dragStart, triggerFileUpload, handleFileSelect, handleDrop, processFile, loadImage, centerImage, updateCanvas, updatePreview, startDrag, handleDrag, stopDrag, handleWheel, resetImage, cropAndUpload, clearImage };
+    const __returned__ = { props, emit, fileInput, canvas: canvas2, previewCanvas, imageData, originalImage, canvasSize, previewSize, cropRadius, imagePos, zoom, minZoom, maxZoom, isDragging, isResetting, dragStart, triggerFileUpload, handleFileSelect, handleDrop, processFile, loadImage, centerImage, updateCanvas, updatePreview, startDrag, constrainImagePosition, handleDrag, stopDrag, handleWheel, resetImage, cropAndUpload, clearImage };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
@@ -2119,7 +2140,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
         }, ["prevent"]))
       },
       [
-        _cache[5] || (_cache[5] = vue.createStaticVNode('<div class="upload-content"><svg class="w-12 h-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><h3 class="text-lg font-semibold text-gray-900 mb-1">Upload your photo</h3><p class="text-sm text-gray-500 mb-4">Drag and drop or click to browse</p><div class="flex gap-2 justify-center text-xs text-gray-400"><span class="px-2 py-1 bg-gray-100 rounded">JPG</span><span class="px-2 py-1 bg-gray-100 rounded">PNG</span><span class="px-2 py-1 bg-gray-100 rounded">GIF</span></div></div>', 1)),
+        _cache[6] || (_cache[6] = vue.createStaticVNode('<div class="upload-content"><svg class="w-12 h-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><h3 class="text-lg font-semibold text-gray-900 mb-1">Upload your photo</h3><p class="text-sm text-gray-500 mb-4">Drag and drop or click to browse</p><div class="flex gap-2 justify-center text-xs text-gray-400"><span class="px-2 py-1 bg-gray-100 rounded">JPG</span><span class="px-2 py-1 bg-gray-100 rounded">PNG</span><span class="px-2 py-1 bg-gray-100 rounded">GIF</span></div></div>', 1)),
         vue.createElementVNode(
           "input",
           {
@@ -2201,10 +2222,11 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
                 vue.createElementVNode("button", {
                   onClick: _cache[2] || (_cache[2] = ($event) => {
                     $setup.zoom = Math.max($setup.minZoom, $setup.zoom - 0.1);
+                    $setup.constrainImagePosition();
                     $setup.updateCanvas();
                   }),
                   class: "zoom-button"
-                }, _cache[6] || (_cache[6] = [
+                }, _cache[7] || (_cache[7] = [
                   vue.createElementVNode(
                     "svg",
                     {
@@ -2232,7 +2254,10 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
                   max: $setup.maxZoom,
                   step: 0.01,
                   class: "zoom-slider",
-                  onInput: $setup.updateCanvas
+                  onInput: _cache[4] || (_cache[4] = ($event) => {
+                    $setup.constrainImagePosition();
+                    $setup.updateCanvas();
+                  })
                 }, null, 40, _hoisted_15$a), [
                   [
                     vue.vModelText,
@@ -2242,12 +2267,13 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
                   ]
                 ]),
                 vue.createElementVNode("button", {
-                  onClick: _cache[4] || (_cache[4] = ($event) => {
+                  onClick: _cache[5] || (_cache[5] = ($event) => {
                     $setup.zoom = Math.min($setup.maxZoom, $setup.zoom + 0.1);
+                    $setup.constrainImagePosition();
                     $setup.updateCanvas();
                   }),
                   class: "zoom-button"
-                }, _cache[7] || (_cache[7] = [
+                }, _cache[8] || (_cache[8] = [
                   vue.createElementVNode(
                     "svg",
                     {
@@ -2289,7 +2315,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           vue.createCommentVNode(" Preview "),
           vue.createElementVNode("div", _hoisted_18$7, [
-            _cache[8] || (_cache[8] = vue.createElementVNode(
+            _cache[9] || (_cache[9] = vue.createElementVNode(
               "h3",
               { class: "text-sm font-medium text-gray-700 mb-3" },
               "Preview",
@@ -2304,7 +2330,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
                 class: "preview-canvas"
               }, null, 8, _hoisted_20$6)
             ]),
-            _cache[9] || (_cache[9] = vue.createElementVNode(
+            _cache[10] || (_cache[10] = vue.createElementVNode(
               "p",
               { class: "text-xs text-gray-500 mt-3 text-center" },
               [
@@ -12441,7 +12467,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const emit = __emit;
     const { getSupportEmail, getUrl } = useStrandsConfig.useStrandsConfig(props.config);
-    const { fetchProfile, updateProfile, changeEmail, currentUser: authUser, currentSession, isAuthenticated, refreshToken, signOut } = useStrandsAuth.useStrandsAuth();
+    const { fetchProfile, updateProfile, changeEmail, changeUsername, getUsernameCooldown, checkUsernameAvailability, currentUser: authUser, currentSession, isAuthenticated, refreshToken, signOut } = useStrandsAuth.useStrandsAuth();
     const { activeMfaDevices, fetchMfaDevices } = useStrandsMfa();
     const internalUser = vue.ref(null);
     const fetchingProfile = vue.ref(false);
@@ -12462,6 +12488,8 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     const showPasswordChange = vue.ref(false);
     const showEmailChange = vue.ref(false);
     const emailChangeLoading = vue.ref(false);
+    const showUsernameChange = vue.ref(false);
+    const usernameChangeLoading = vue.ref(false);
     const showMfaModal = vue.ref(false);
     const showSettingsModal = vue.ref(false);
     const showAvatarEditor = vue.ref(false);
@@ -12469,6 +12497,16 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     const successMessage = vue.ref("");
     const errorMessage = vue.ref("");
     const activeSessions = vue.ref([]);
+    const usernameChangeData = vue.reactive({
+      canChange: true,
+      cooldownEnd: null,
+      daysRemaining: 0
+    });
+    const usernameAvailability = vue.reactive({
+      available: false,
+      message: "",
+      checking: false
+    });
     const avatarFileInput = vue.ref();
     const form = vue.reactive({
       firstName: "",
@@ -12488,6 +12526,12 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
       new: "",
       confirm: ""
     });
+    const usernameForm = vue.reactive({
+      username: "",
+      errors: {
+        username: ""
+      }
+    });
     const errors = vue.reactive({
       firstName: "",
       lastName: "",
@@ -12504,6 +12548,10 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     const isEmailChangeFormValid = vue.computed(() => {
       return emailChangeForm.newEmail && emailChangeForm.password && emailChangeForm.newEmail !== currentUser.value?.email && emailChangeForm.newEmail.includes("@");
     });
+    const isUsernameChangeFormValid = vue.computed(() => {
+      const usernameRegex = /^[a-zA-Z0-9_-]{3,30}$/;
+      return usernameForm.username && usernameRegex.test(usernameForm.username) && usernameForm.username !== currentUser.value?.username && !usernameAvailability.checking;
+    });
     const passwordLastUpdated = vue.computed(() => {
       const user = currentUser.value;
       if (!user) return "Never";
@@ -12724,6 +12772,86 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
         emailChangeLoading.value = false;
       }
     };
+    const handleToggleUsernameChange = async () => {
+      if (!showUsernameChange.value) {
+        usernameChangeLoading.value = true;
+        try {
+          const cooldownData = await getUsernameCooldown();
+          usernameChangeData.canChange = cooldownData.can_change;
+          usernameChangeData.cooldownEnd = cooldownData.cooldown_end ? new Date(cooldownData.cooldown_end) : null;
+          usernameChangeData.daysRemaining = cooldownData.days_remaining || 0;
+          if (usernameChangeData.canChange) {
+            showUsernameChange.value = true;
+            usernameForm.username = currentUser.value?.username || "";
+          } else {
+            errorMessage.value = `You can change your username again in ${usernameChangeData.daysRemaining} days`;
+          }
+        } catch (err) {
+          errorMessage.value = "Failed to check username cooldown";
+          showUsernameChange.value = true;
+        } finally {
+          usernameChangeLoading.value = false;
+        }
+      } else {
+        showUsernameChange.value = false;
+        usernameForm.username = "";
+        usernameForm.errors.username = "";
+        usernameAvailability.available = false;
+        usernameAvailability.message = "";
+      }
+    };
+    const handleUsernameChange = async () => {
+      if (!isUsernameChangeFormValid.value) {
+        const usernameRegex = /^[a-zA-Z0-9_-]{3,30}$/;
+        if (!usernameRegex.test(usernameForm.username)) {
+          usernameForm.errors.username = "Username must be 3-30 characters and contain only letters, numbers, hyphens, and underscores";
+          return;
+        }
+        usernameAvailability.checking = true;
+        usernameAvailability.message = "Checking availability...";
+        try {
+          const result = await checkUsernameAvailability(usernameForm.username);
+          usernameAvailability.available = result.available;
+          usernameAvailability.message = result.message;
+          if (!result.available) {
+            usernameForm.errors.username = "Username is not available";
+            return;
+          }
+        } catch (err) {
+          usernameForm.errors.username = "Failed to check username availability";
+          return;
+        } finally {
+          usernameAvailability.checking = false;
+        }
+      }
+      clearMessages();
+      usernameChangeLoading.value = true;
+      try {
+        const result = await changeUsername(usernameForm.username);
+        successMessage.value = result.message || "Username updated successfully";
+        showUsernameChange.value = false;
+        usernameForm.username = "";
+        usernameForm.errors.username = "";
+        usernameAvailability.available = false;
+        usernameAvailability.message = "";
+        if (currentUser.value) {
+          emit("profile-updated", currentUser.value);
+        }
+      } catch (err) {
+        const error = err instanceof Error ? err.message : "Failed to update username";
+        if (error.includes("taken")) {
+          usernameForm.errors.username = "Username is already taken";
+        } else if (error.includes("cooldown") || error.includes("30 days")) {
+          errorMessage.value = error;
+          showUsernameChange.value = false;
+        } else {
+          usernameForm.errors.username = error;
+        }
+        emit("error", error);
+      } finally {
+        usernameChangeLoading.value = false;
+      }
+    };
     const triggerAvatarUpload = () => {
       if (uploading.value) return;
       avatarFileInput.value?.click();
@@ -12901,7 +13029,19 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
         signingOut.value = false;
       }
     };
-    const __returned__ = { props, emit, getSupportEmail, getUrl, fetchProfile, updateProfile, changeEmail, authUser, currentSession, isAuthenticated, refreshToken, signOut, activeMfaDevices, fetchMfaDevices, internalUser, fetchingProfile, currentUser, loading: loading2, uploading, signingOut, showPasswordChange, showEmailChange, emailChangeLoading, showMfaModal, showSettingsModal, showAvatarEditor, selectedImageFile, successMessage, errorMessage, activeSessions, avatarFileInput, form, emailChangeForm, passwordForm, errors, hasChanges, isPasswordFormValid, isEmailChangeFormValid, passwordLastUpdated, deviceTypeCounts, mfaDeviceChips, getXpForLevel, getLevelFromXp, userLevel, currentExp, expToNextLevel, progressPercentage, totalCircumference, progressLength, progressGapLength, getInitials: getInitials2, fetchUserProfile, clearMessages, handleUpdateProfile, handlePasswordChange, handleEmailChange, triggerAvatarUpload, handleAvatarFileSelect, handleAvatarUpload, handleAvatarError, handleAvatarEditorClose, uploadAvatar, handleMfaUpdated, handleSettingsUpdated, handleCancel, handleSignOut, get StrandsUiButton() {
+    vue.onMounted(async () => {
+      if (currentUser.value && isAuthenticated.value) {
+        try {
+          const cooldownData = await getUsernameCooldown();
+          usernameChangeData.canChange = cooldownData.can_change;
+          usernameChangeData.cooldownEnd = cooldownData.cooldown_end ? new Date(cooldownData.cooldown_end) : null;
+          usernameChangeData.daysRemaining = cooldownData.days_remaining || 0;
+        } catch (err) {
+          console.error("Failed to fetch username cooldown:", err);
+        }
+      }
+    });
+    const __returned__ = { props, emit, getSupportEmail, getUrl, fetchProfile, updateProfile, changeEmail, changeUsername, getUsernameCooldown, checkUsernameAvailability, authUser, currentSession, isAuthenticated, refreshToken, signOut, activeMfaDevices, fetchMfaDevices, internalUser, fetchingProfile, currentUser, loading: loading2, uploading, signingOut, showPasswordChange, showEmailChange, emailChangeLoading, showUsernameChange, usernameChangeLoading, showMfaModal, showSettingsModal, showAvatarEditor, selectedImageFile, successMessage, errorMessage, activeSessions, usernameChangeData, usernameAvailability, avatarFileInput, form, emailChangeForm, passwordForm, usernameForm, errors, hasChanges, isPasswordFormValid, isEmailChangeFormValid, isUsernameChangeFormValid, passwordLastUpdated, deviceTypeCounts, mfaDeviceChips, getXpForLevel, getLevelFromXp, userLevel, currentExp, expToNextLevel, progressPercentage, totalCircumference, progressLength, progressGapLength, getInitials: getInitials2, fetchUserProfile, clearMessages, handleUpdateProfile, handlePasswordChange, handleEmailChange, handleToggleUsernameChange, handleUsernameChange, triggerAvatarUpload, handleAvatarFileSelect, handleAvatarUpload, handleAvatarError, handleAvatarEditorClose, uploadAvatar, handleMfaUpdated, handleSettingsUpdated, handleCancel, handleSignOut, get StrandsUiButton() {
       return StrandsUiButton;
     }, get StrandsUiInput() {
       return StrandsUiInput;
@@ -12949,58 +13089,69 @@ const _hoisted_16$1 = {
   key: 0,
   class: "space-y-3 overflow-hidden"
 };
-const _hoisted_17$1 = { class: "space-y-3 md:space-y-4" };
-const _hoisted_18$1 = { class: "space-y-4 p-4 bg-gray-50 rounded-xl" };
-const _hoisted_19$1 = { class: "flex items-center justify-between gap-2" };
-const _hoisted_20$1 = { class: "text-sm text-gray-600" };
+const _hoisted_17$1 = { class: "space-y-4 p-4 bg-gray-50 rounded-xl" };
+const _hoisted_18$1 = { class: "flex items-center justify-between gap-2" };
+const _hoisted_19$1 = { class: "text-sm text-gray-600" };
+const _hoisted_20$1 = {
+  key: 0,
+  class: "text-red-600 ml-2"
+};
 const _hoisted_21 = {
   key: 0,
   class: "space-y-3 overflow-hidden"
 };
-const _hoisted_22 = { class: "p-4 bg-gray-50 rounded-xl" };
-const _hoisted_23 = { class: "flex items-start justify-between gap-4" };
-const _hoisted_24 = { class: "flex-1" };
-const _hoisted_25 = { class: "text-sm text-gray-600 mt-1" };
+const _hoisted_22 = { class: "space-y-3 md:space-y-4" };
+const _hoisted_23 = { class: "space-y-4 p-4 bg-gray-50 rounded-xl" };
+const _hoisted_24 = { class: "flex items-center justify-between gap-2" };
+const _hoisted_25 = { class: "text-sm text-gray-600" };
 const _hoisted_26 = {
   key: 0,
-  class: "flex flex-wrap gap-2 mt-3"
+  class: "space-y-3 overflow-hidden"
 };
-const _hoisted_27 = { class: "ml-1" };
-const _hoisted_28 = { class: "p-4 bg-gray-50 rounded-xl" };
-const _hoisted_29 = { class: "flex items-center justify-between gap-2" };
-const _hoisted_30 = { class: "text-sm text-gray-600" };
+const _hoisted_27 = { class: "p-4 bg-gray-50 rounded-xl" };
+const _hoisted_28 = { class: "flex items-start justify-between gap-4" };
+const _hoisted_29 = { class: "flex-1" };
+const _hoisted_30 = { class: "text-sm text-gray-600 mt-1" };
 const _hoisted_31 = {
+  key: 0,
+  class: "flex flex-wrap gap-2 mt-3"
+};
+const _hoisted_32 = { class: "ml-1" };
+const _hoisted_33 = { class: "p-4 bg-gray-50 rounded-xl" };
+const _hoisted_34 = { class: "flex items-center justify-between gap-2" };
+const _hoisted_35 = { class: "text-sm text-gray-600" };
+const _hoisted_36 = {
   key: 0,
   class: "flex flex-col sm:flex-row gap-3 pt-6 border-t border-gray-200 animate-slide-up"
 };
-const _hoisted_32 = {
+const _hoisted_37 = {
   key: 0,
   class: "mt-6 animate-fade-in"
 };
-const _hoisted_33 = { class: "alert-success" };
-const _hoisted_34 = { class: "flex items-start gap-3" };
-const _hoisted_35 = { class: "font-medium" };
-const _hoisted_36 = {
+const _hoisted_38 = { class: "alert-success" };
+const _hoisted_39 = { class: "flex items-start gap-3" };
+const _hoisted_40 = { class: "font-medium" };
+const _hoisted_41 = {
   key: 1,
   class: "mt-6 animate-fade-in"
 };
-const _hoisted_37 = { class: "alert-error" };
-const _hoisted_38 = { class: "flex items-start gap-3" };
-const _hoisted_39 = { class: "font-medium" };
-const _hoisted_40 = { class: "flex gap-4 items-stretch" };
-const _hoisted_41 = { key: 0 };
-const _hoisted_42 = { class: "text-gray-400 text-sm" };
-const _hoisted_43 = {
+const _hoisted_42 = { class: "alert-error" };
+const _hoisted_43 = { class: "flex items-start gap-3" };
+const _hoisted_44 = { class: "font-medium" };
+const _hoisted_45 = { class: "flex gap-4 items-stretch" };
+const _hoisted_46 = { key: 0 };
+const _hoisted_47 = { class: "text-gray-400 text-sm" };
+const _hoisted_48 = {
   key: 1,
   class: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
 };
-const _hoisted_44 = { class: "bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto" };
-const _hoisted_45 = { class: "p-6" };
+const _hoisted_49 = { class: "bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-y-auto" };
+const _hoisted_50 = { class: "p-6" };
 function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
     vue.createElementVNode("div", _hoisted_2$4, [
       vue.createCommentVNode(" Header "),
-      _cache[29] || (_cache[29] = vue.createElementVNode(
+      _cache[31] || (_cache[31] = vue.createElementVNode(
         "div",
         { class: "text-center mb-6" },
         [
@@ -13049,7 +13200,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 key: 0,
                 size: 24,
                 variant: "dark"
-              })) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_10$1, _cache[14] || (_cache[14] = [
+              })) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_10$1, _cache[15] || (_cache[15] = [
                 vue.createElementVNode(
                   "path",
                   {
@@ -13104,7 +13255,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
           vue.createElementVNode("div", _hoisted_11$1, [
             vue.createCommentVNode(" Personal Information "),
             vue.createElementVNode("div", _hoisted_12$1, [
-              _cache[16] || (_cache[16] = vue.createElementVNode(
+              _cache[18] || (_cache[18] = vue.createElementVNode(
                 "h3",
                 { class: "text-lg font-semibold text-gray-900 mb-3 md:mb-4" },
                 "Personal Information",
@@ -13137,7 +13288,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
               vue.createElementVNode("div", _hoisted_13$1, [
                 vue.createElementVNode("div", _hoisted_14$1, [
                   vue.createElementVNode("div", null, [
-                    _cache[15] || (_cache[15] = vue.createElementVNode(
+                    _cache[16] || (_cache[16] = vue.createElementVNode(
                       "h4",
                       { class: "font-medium text-gray-900" },
                       "Email Address",
@@ -13208,11 +13359,97 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                   _: 1
                   /* STABLE */
                 })
+              ]),
+              vue.createCommentVNode(" Username Change Section "),
+              vue.createElementVNode("div", _hoisted_17$1, [
+                vue.createElementVNode("div", _hoisted_18$1, [
+                  vue.createElementVNode("div", null, [
+                    _cache[17] || (_cache[17] = vue.createElementVNode(
+                      "h4",
+                      { class: "font-medium text-gray-900" },
+                      "Username",
+                      -1
+                      /* CACHED */
+                    )),
+                    vue.createElementVNode("p", _hoisted_19$1, [
+                      vue.createTextVNode(
+                        vue.toDisplayString($setup.currentUser?.username || "No username set") + " ",
+                        1
+                        /* TEXT */
+                      ),
+                      $setup.usernameChangeData.cooldownEnd ? (vue.openBlock(), vue.createElementBlock(
+                        "span",
+                        _hoisted_20$1,
+                        " (Can change in " + vue.toDisplayString($setup.usernameChangeData.daysRemaining) + " days) ",
+                        1
+                        /* TEXT */
+                      )) : vue.createCommentVNode("v-if", true)
+                    ])
+                  ]),
+                  vue.createVNode($setup["StrandsUiButton"], {
+                    variant: "secondary",
+                    size: "sm",
+                    disabled: !$setup.usernameChangeData.canChange || $setup.usernameChangeLoading,
+                    onClick: $setup.handleToggleUsernameChange
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(
+                        vue.toDisplayString($setup.showUsernameChange ? "Cancel" : $setup.currentUser?.username ? "Change" : "Set Username"),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["disabled"])
+                ]),
+                vue.createVNode(vue.Transition, { name: "expand" }, {
+                  default: vue.withCtx(() => [
+                    $setup.showUsernameChange ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_21, [
+                      vue.createVNode($setup["StrandsUiInput"], {
+                        modelValue: $setup.usernameForm.username,
+                        "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => $setup.usernameForm.username = $event),
+                        type: "text",
+                        placeholder: "Enter username (3-30 characters)",
+                        autocomplete: "username",
+                        error: $setup.usernameForm.errors.username
+                      }, null, 8, ["modelValue", "error"]),
+                      $setup.usernameAvailability.message ? (vue.openBlock(), vue.createElementBlock(
+                        "div",
+                        {
+                          key: 0,
+                          class: vue.normalizeClass(["text-xs", $setup.usernameAvailability.available ? "text-green-600" : "text-red-600"])
+                        },
+                        vue.toDisplayString($setup.usernameAvailability.message),
+                        3
+                        /* TEXT, CLASS */
+                      )) : vue.createCommentVNode("v-if", true),
+                      vue.createVNode($setup["StrandsUiButton"], {
+                        variant: "primary",
+                        size: "sm",
+                        onClick: $setup.handleUsernameChange,
+                        disabled: !$setup.isUsernameChangeFormValid || $setup.usernameChangeLoading
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createTextVNode(
+                            vue.toDisplayString($setup.usernameChangeLoading ? "Updating..." : "Update Username"),
+                            1
+                            /* TEXT */
+                          )
+                        ]),
+                        _: 1
+                        /* STABLE */
+                      }, 8, ["disabled"])
+                    ])) : vue.createCommentVNode("v-if", true)
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
               ])
             ]),
             vue.createCommentVNode(" Security Settings "),
-            vue.createElementVNode("div", _hoisted_17$1, [
-              _cache[22] || (_cache[22] = vue.createElementVNode(
+            vue.createElementVNode("div", _hoisted_22, [
+              _cache[24] || (_cache[24] = vue.createElementVNode(
                 "h3",
                 { class: "text-lg font-semibold text-gray-900 mb-3 md:mb-4" },
                 "Security Settings",
@@ -13220,10 +13457,10 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 /* CACHED */
               )),
               vue.createCommentVNode(" Password Change "),
-              vue.createElementVNode("div", _hoisted_18$1, [
-                vue.createElementVNode("div", _hoisted_19$1, [
+              vue.createElementVNode("div", _hoisted_23, [
+                vue.createElementVNode("div", _hoisted_24, [
                   vue.createElementVNode("div", null, [
-                    _cache[17] || (_cache[17] = vue.createElementVNode(
+                    _cache[19] || (_cache[19] = vue.createElementVNode(
                       "h4",
                       { class: "font-medium text-gray-900" },
                       "Password",
@@ -13232,7 +13469,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     )),
                     vue.createElementVNode(
                       "p",
-                      _hoisted_20$1,
+                      _hoisted_25,
                       "Last updated " + vue.toDisplayString($setup.passwordLastUpdated),
                       1
                       /* TEXT */
@@ -13241,7 +13478,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                   vue.createVNode($setup["StrandsUiButton"], {
                     variant: "secondary",
                     size: "sm",
-                    onClick: _cache[5] || (_cache[5] = ($event) => $setup.showPasswordChange = !$setup.showPasswordChange)
+                    onClick: _cache[6] || (_cache[6] = ($event) => $setup.showPasswordChange = !$setup.showPasswordChange)
                   }, {
                     default: vue.withCtx(() => [
                       vue.createTextVNode(
@@ -13256,24 +13493,24 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 ]),
                 vue.createVNode(vue.Transition, { name: "expand" }, {
                   default: vue.withCtx(() => [
-                    $setup.showPasswordChange ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_21, [
+                    $setup.showPasswordChange ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_26, [
                       vue.createVNode($setup["StrandsUiInput"], {
                         modelValue: $setup.passwordForm.current,
-                        "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => $setup.passwordForm.current = $event),
+                        "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => $setup.passwordForm.current = $event),
                         type: "password",
                         placeholder: "Current password",
                         autocomplete: "current-password"
                       }, null, 8, ["modelValue"]),
                       vue.createVNode($setup["StrandsUiInput"], {
                         modelValue: $setup.passwordForm.new,
-                        "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => $setup.passwordForm.new = $event),
+                        "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => $setup.passwordForm.new = $event),
                         type: "password",
                         placeholder: "New password",
                         autocomplete: "new-password"
                       }, null, 8, ["modelValue"]),
                       vue.createVNode($setup["StrandsUiInput"], {
                         modelValue: $setup.passwordForm.confirm,
-                        "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => $setup.passwordForm.confirm = $event),
+                        "onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => $setup.passwordForm.confirm = $event),
                         type: "password",
                         placeholder: "Confirm new password",
                         autocomplete: "new-password"
@@ -13284,7 +13521,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                         onClick: $setup.handlePasswordChange,
                         disabled: !$setup.isPasswordFormValid
                       }, {
-                        default: vue.withCtx(() => _cache[18] || (_cache[18] = [
+                        default: vue.withCtx(() => _cache[20] || (_cache[20] = [
                           vue.createTextVNode(
                             " Update Password ",
                             -1
@@ -13292,7 +13529,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                           )
                         ])),
                         _: 1,
-                        __: [18]
+                        __: [20]
                       }, 8, ["disabled"])
                     ])) : vue.createCommentVNode("v-if", true)
                   ]),
@@ -13301,10 +13538,10 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 })
               ]),
               vue.createCommentVNode(" Two-Factor Authentication "),
-              vue.createElementVNode("div", _hoisted_22, [
-                vue.createElementVNode("div", _hoisted_23, [
-                  vue.createElementVNode("div", _hoisted_24, [
-                    _cache[19] || (_cache[19] = vue.createElementVNode(
+              vue.createElementVNode("div", _hoisted_27, [
+                vue.createElementVNode("div", _hoisted_28, [
+                  vue.createElementVNode("div", _hoisted_29, [
+                    _cache[21] || (_cache[21] = vue.createElementVNode(
                       "h4",
                       { class: "font-medium text-gray-900" },
                       "Two-Factor Authentication",
@@ -13313,13 +13550,13 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     )),
                     vue.createElementVNode(
                       "p",
-                      _hoisted_25,
+                      _hoisted_30,
                       vue.toDisplayString($setup.currentUser?.mfaEnabled ? "Enabled" : "Add extra security to your account"),
                       1
                       /* TEXT */
                     ),
                     vue.createCommentVNode(" Device Type Chips "),
-                    $setup.mfaDeviceChips.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_26, [
+                    $setup.mfaDeviceChips.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_31, [
                       (vue.openBlock(true), vue.createElementBlock(
                         vue.Fragment,
                         null,
@@ -13347,7 +13584,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                               ),
                               vue.createElementVNode(
                                 "span",
-                                _hoisted_27,
+                                _hoisted_32,
                                 vue.toDisplayString(chip.label),
                                 1
                                 /* TEXT */
@@ -13365,7 +13602,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                   vue.createVNode($setup["StrandsUiButton"], {
                     variant: $setup.currentUser?.mfaEnabled ? "secondary" : "primary",
                     size: "sm",
-                    onClick: _cache[9] || (_cache[9] = ($event) => $setup.showMfaModal = true),
+                    onClick: _cache[10] || (_cache[10] = ($event) => $setup.showMfaModal = true),
                     class: "flex-shrink-0"
                   }, {
                     default: vue.withCtx(() => [
@@ -13381,10 +13618,10 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 ])
               ]),
               vue.createCommentVNode(" Active Sessions "),
-              vue.createElementVNode("div", _hoisted_28, [
-                vue.createElementVNode("div", _hoisted_29, [
+              vue.createElementVNode("div", _hoisted_33, [
+                vue.createElementVNode("div", _hoisted_34, [
                   vue.createElementVNode("div", null, [
-                    _cache[20] || (_cache[20] = vue.createElementVNode(
+                    _cache[22] || (_cache[22] = vue.createElementVNode(
                       "h4",
                       { class: "font-medium text-gray-900" },
                       "Active Sessions",
@@ -13393,7 +13630,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     )),
                     vue.createElementVNode(
                       "p",
-                      _hoisted_30,
+                      _hoisted_35,
                       vue.toDisplayString($setup.activeSessions.length) + " active device(s)",
                       1
                       /* TEXT */
@@ -13402,10 +13639,10 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                   vue.createVNode($setup["StrandsUiButton"], {
                     variant: "secondary",
                     size: "sm",
-                    onClick: _cache[10] || (_cache[10] = ($event) => _ctx.$emit("manage-sessions")),
+                    onClick: _cache[11] || (_cache[11] = ($event) => _ctx.$emit("manage-sessions")),
                     disabled: ""
                   }, {
-                    default: vue.withCtx(() => _cache[21] || (_cache[21] = [
+                    default: vue.withCtx(() => _cache[23] || (_cache[23] = [
                       vue.createTextVNode(
                         " Coming Soon ",
                         -1
@@ -13413,14 +13650,14 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                       )
                     ])),
                     _: 1,
-                    __: [21]
+                    __: [23]
                   })
                 ])
               ])
             ])
           ]),
           vue.createCommentVNode(" Action Buttons - Only show when changes are made "),
-          $setup.hasChanges ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_31, [
+          $setup.hasChanges ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_36, [
             vue.createVNode($setup["StrandsUiButton"], {
               type: "submit",
               variant: "primary",
@@ -13442,7 +13679,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
               onClick: $setup.handleCancel,
               disabled: $setup.loading
             }, {
-              default: vue.withCtx(() => _cache[23] || (_cache[23] = [
+              default: vue.withCtx(() => _cache[25] || (_cache[25] = [
                 vue.createTextVNode(
                   " Cancel ",
                   -1
@@ -13450,7 +13687,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 )
               ])),
               _: 1,
-              __: [23]
+              __: [25]
             }, 8, ["disabled"])
           ])) : vue.createCommentVNode("v-if", true)
         ],
@@ -13458,10 +13695,10 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
         /* NEED_HYDRATION */
       ),
       vue.createCommentVNode(" Success/Error Messages "),
-      $setup.successMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_32, [
-        vue.createElementVNode("div", _hoisted_33, [
-          vue.createElementVNode("div", _hoisted_34, [
-            _cache[24] || (_cache[24] = vue.createElementVNode(
+      $setup.successMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_37, [
+        vue.createElementVNode("div", _hoisted_38, [
+          vue.createElementVNode("div", _hoisted_39, [
+            _cache[26] || (_cache[26] = vue.createElementVNode(
               "svg",
               {
                 class: "w-4 h-4 mt-0.5 flex-shrink-0",
@@ -13480,7 +13717,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             )),
             vue.createElementVNode(
               "p",
-              _hoisted_35,
+              _hoisted_40,
               vue.toDisplayString($setup.successMessage),
               1
               /* TEXT */
@@ -13488,10 +13725,10 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         ])
       ])) : vue.createCommentVNode("v-if", true),
-      $setup.errorMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_36, [
-        vue.createElementVNode("div", _hoisted_37, [
-          vue.createElementVNode("div", _hoisted_38, [
-            _cache[25] || (_cache[25] = vue.createElementVNode(
+      $setup.errorMessage ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_41, [
+        vue.createElementVNode("div", _hoisted_42, [
+          vue.createElementVNode("div", _hoisted_43, [
+            _cache[27] || (_cache[27] = vue.createElementVNode(
               "svg",
               {
                 class: "w-4 h-4 mt-0.5 flex-shrink-0",
@@ -13510,7 +13747,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             )),
             vue.createElementVNode(
               "p",
-              _hoisted_39,
+              _hoisted_44,
               vue.toDisplayString($setup.errorMessage),
               1
               /* TEXT */
@@ -13523,7 +13760,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
         config: $setup.props.config
       }, {
         default: vue.withCtx(() => [
-          vue.createElementVNode("div", _hoisted_40, [
+          vue.createElementVNode("div", _hoisted_45, [
             vue.createCommentVNode(" Sign Out button "),
             vue.createVNode($setup["StrandsUiButton"], {
               variant: "secondary",
@@ -13545,10 +13782,10 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             vue.createCommentVNode(" Settings button "),
             vue.createVNode($setup["StrandsUiButton"], {
               variant: "secondary",
-              onClick: _cache[11] || (_cache[11] = ($event) => $setup.showSettingsModal = true),
+              onClick: _cache[12] || (_cache[12] = ($event) => $setup.showSettingsModal = true),
               class: "w-full sm:w-auto"
             }, {
-              default: vue.withCtx(() => _cache[26] || (_cache[26] = [
+              default: vue.withCtx(() => _cache[28] || (_cache[28] = [
                 vue.createElementVNode(
                   "svg",
                   {
@@ -13576,13 +13813,13 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 )
               ])),
               _: 1,
-              __: [26]
+              __: [28]
             })
           ]),
           vue.createCommentVNode(" Need help "),
-          $setup.getSupportEmail() ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_41, [
-            vue.createElementVNode("p", _hoisted_42, [
-              _cache[28] || (_cache[28] = vue.createTextVNode(
+          $setup.getSupportEmail() ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_46, [
+            vue.createElementVNode("p", _hoisted_47, [
+              _cache[30] || (_cache[30] = vue.createTextVNode(
                 " Need help? ",
                 -1
                 /* CACHED */
@@ -13591,7 +13828,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 variant: "primary",
                 href: `mailto:${$setup.getSupportEmail()}`
               }, {
-                default: vue.withCtx(() => _cache[27] || (_cache[27] = [
+                default: vue.withCtx(() => _cache[29] || (_cache[29] = [
                   vue.createTextVNode(
                     " Contact Support ",
                     -1
@@ -13599,7 +13836,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                   )
                 ])),
                 _: 1,
-                __: [27]
+                __: [29]
               }, 8, ["href"])
             ])
           ])) : vue.createCommentVNode("v-if", true)
@@ -13611,21 +13848,21 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     vue.createCommentVNode(" MFA Management Modal "),
     vue.createVNode($setup["StrandsMfaModal"], {
       show: $setup.showMfaModal,
-      onClose: _cache[12] || (_cache[12] = ($event) => $setup.showMfaModal = false),
+      onClose: _cache[13] || (_cache[13] = ($event) => $setup.showMfaModal = false),
       onMfaUpdated: $setup.handleMfaUpdated
     }, null, 8, ["show"]),
     vue.createCommentVNode(" Settings Modal "),
     $setup.showSettingsModal ? (vue.openBlock(), vue.createBlock($setup["StrandsSettingsModal"], {
       key: 0,
-      onClose: _cache[13] || (_cache[13] = ($event) => $setup.showSettingsModal = false),
+      onClose: _cache[14] || (_cache[14] = ($event) => $setup.showSettingsModal = false),
       onSettingsUpdated: $setup.handleSettingsUpdated
     })) : vue.createCommentVNode("v-if", true),
     vue.createCommentVNode(" Avatar Editor Modal "),
-    $setup.showAvatarEditor ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_43, [
-      vue.createElementVNode("div", _hoisted_44, [
-        vue.createElementVNode("div", _hoisted_45, [
+    $setup.showAvatarEditor ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_48, [
+      vue.createElementVNode("div", _hoisted_49, [
+        vue.createElementVNode("div", _hoisted_50, [
           vue.createElementVNode("div", { class: "flex items-center justify-between mb-6" }, [
-            _cache[31] || (_cache[31] = vue.createElementVNode(
+            _cache[33] || (_cache[33] = vue.createElementVNode(
               "h2",
               { class: "text-xl font-bold text-gray-900" },
               "Edit Avatar",
@@ -13635,7 +13872,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             vue.createElementVNode("button", {
               onClick: $setup.handleAvatarEditorClose,
               class: "text-gray-400 hover:text-gray-600 transition-colors"
-            }, _cache[30] || (_cache[30] = [
+            }, _cache[32] || (_cache[32] = [
               vue.createElementVNode(
                 "svg",
                 {