@strands.gg/accui 1.4.1 → 1.5.0

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

@@ -1,7 +1,7 @@
 import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, toDisplayString, renderSlot, createTextVNode, normalizeStyle, useSlots, ref, createBlock, resolveDynamicComponent, mergeProps, withCtx, onMounted, nextTick, toRefs, watch, Fragment, renderList, reactive, withModifiers, createStaticVNode, withDirectives, vModelText, createVNode, Teleport, createSlots, onBeforeUnmount, withKeys, Transition, h } from "vue";
-import { u as useStrandsConfig, p as provideStrandsConfig } from "./useStrandsConfig-COEj6nFc.js";
-import { s } from "./useStrandsConfig-COEj6nFc.js";
-import { u as useStrandsAuth } from "./useStrandsAuth-SdmBCyFS.js";
+import { u as useStrandsConfig, p as provideStrandsConfig } from "./useStrandsConfig-Bdk-g0jS.js";
+import { s } from "./useStrandsConfig-Bdk-g0jS.js";
+import { u as useStrandsAuth } from "./useStrandsAuth-if4J5WT8.js";
 const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "UiAlert",
   props: {
@@ -1883,17 +1883,18 @@ const _sfc_main$n = /* @__PURE__ */ 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();
         nextTick(() => {
           isResetting.value = false;
         });
@@ -1910,6 +1911,7 @@ const _sfc_main$n = /* @__PURE__ */ 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;
@@ -1959,12 +1961,29 @@ const _sfc_main$n = /* @__PURE__ */ 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 = () => {
@@ -1987,6 +2006,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         imagePos.x = imageCenterX - newWidth / 2;
         imagePos.y = imageCenterY - newHeight / 2;
         zoom.value = newZoom;
+        constrainImagePosition();
         updateCanvas();
       }
     };
@@ -1994,16 +2014,17 @@ const _sfc_main$n = /* @__PURE__ */ 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();
       nextTick(() => {
         isResetting.value = false;
       });
@@ -2077,7 +2098,7 @@ const _sfc_main$n = /* @__PURE__ */ 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__;
   }
@@ -2118,7 +2139,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
         }, ["prevent"]))
       },
       [
-        _cache[5] || (_cache[5] = 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] = 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)),
         createElementVNode(
           "input",
           {
@@ -2200,10 +2221,11 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
                 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] = [
                   createElementVNode(
                     "svg",
                     {
@@ -2231,7 +2253,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), [
                   [
                     vModelText,
@@ -2241,12 +2266,13 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
                   ]
                 ]),
                 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] = [
                   createElementVNode(
                     "svg",
                     {
@@ -2288,7 +2314,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           createCommentVNode(" Preview "),
           createElementVNode("div", _hoisted_18$7, [
-            _cache[8] || (_cache[8] = createElementVNode(
+            _cache[9] || (_cache[9] = createElementVNode(
               "h3",
               { class: "text-sm font-medium text-gray-700 mb-3" },
               "Preview",
@@ -2303,7 +2329,7 @@ function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
                 class: "preview-canvas"
               }, null, 8, _hoisted_20$6)
             ]),
-            _cache[9] || (_cache[9] = createElementVNode(
+            _cache[10] || (_cache[10] = createElementVNode(
               "p",
               { class: "text-xs text-gray-500 mt-3 text-center" },
               [
@@ -12440,7 +12466,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const { getSupportEmail, getUrl } = useStrandsConfig(props.config);
-    const { fetchProfile, updateProfile, changeEmail, currentUser: authUser, currentSession, isAuthenticated, refreshToken, signOut } = useStrandsAuth();
+    const { fetchProfile, updateProfile, changeEmail, changeUsername, getUsernameCooldown, checkUsernameAvailability, currentUser: authUser, currentSession, isAuthenticated, refreshToken, signOut } = useStrandsAuth();
     const { activeMfaDevices, fetchMfaDevices } = useStrandsMfa();
     const internalUser = ref(null);
     const fetchingProfile = ref(false);
@@ -12461,6 +12487,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const showPasswordChange = ref(false);
     const showEmailChange = ref(false);
     const emailChangeLoading = ref(false);
+    const showUsernameChange = ref(false);
+    const usernameChangeLoading = ref(false);
     const showMfaModal = ref(false);
     const showSettingsModal = ref(false);
     const showAvatarEditor = ref(false);
@@ -12468,6 +12496,16 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const successMessage = ref("");
     const errorMessage = ref("");
     const activeSessions = ref([]);
+    const usernameChangeData = reactive({
+      canChange: true,
+      cooldownEnd: null,
+      daysRemaining: 0
+    });
+    const usernameAvailability = reactive({
+      available: false,
+      message: "",
+      checking: false
+    });
     const avatarFileInput = ref();
     const form = reactive({
       firstName: "",
@@ -12487,6 +12525,12 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       new: "",
       confirm: ""
     });
+    const usernameForm = reactive({
+      username: "",
+      errors: {
+        username: ""
+      }
+    });
     const errors = reactive({
       firstName: "",
       lastName: "",
@@ -12503,6 +12547,10 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const isEmailChangeFormValid = computed(() => {
       return emailChangeForm.newEmail && emailChangeForm.password && emailChangeForm.newEmail !== currentUser.value?.email && emailChangeForm.newEmail.includes("@");
     });
+    const isUsernameChangeFormValid = 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 = computed(() => {
       const user = currentUser.value;
       if (!user) return "Never";
@@ -12723,6 +12771,86 @@ const _sfc_main$7 = /* @__PURE__ */ 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();
@@ -12900,7 +13028,19 @@ const _sfc_main$7 = /* @__PURE__ */ 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() {
+    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;
@@ -12948,58 +13088,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 openBlock(), createElementBlock("div", _hoisted_1$5, [
     createElementVNode("div", _hoisted_2$4, [
       createCommentVNode(" Header "),
-      _cache[29] || (_cache[29] = createElementVNode(
+      _cache[31] || (_cache[31] = createElementVNode(
         "div",
         { class: "text-center mb-6" },
         [
@@ -13048,7 +13199,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 key: 0,
                 size: 24,
                 variant: "dark"
-              })) : (openBlock(), createElementBlock("svg", _hoisted_10$1, _cache[14] || (_cache[14] = [
+              })) : (openBlock(), createElementBlock("svg", _hoisted_10$1, _cache[15] || (_cache[15] = [
                 createElementVNode(
                   "path",
                   {
@@ -13103,7 +13254,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
           createElementVNode("div", _hoisted_11$1, [
             createCommentVNode(" Personal Information "),
             createElementVNode("div", _hoisted_12$1, [
-              _cache[16] || (_cache[16] = createElementVNode(
+              _cache[18] || (_cache[18] = createElementVNode(
                 "h3",
                 { class: "text-lg font-semibold text-gray-900 mb-3 md:mb-4" },
                 "Personal Information",
@@ -13136,7 +13287,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
               createElementVNode("div", _hoisted_13$1, [
                 createElementVNode("div", _hoisted_14$1, [
                   createElementVNode("div", null, [
-                    _cache[15] || (_cache[15] = createElementVNode(
+                    _cache[16] || (_cache[16] = createElementVNode(
                       "h4",
                       { class: "font-medium text-gray-900" },
                       "Email Address",
@@ -13207,11 +13358,97 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                   _: 1
                   /* STABLE */
                 })
+              ]),
+              createCommentVNode(" Username Change Section "),
+              createElementVNode("div", _hoisted_17$1, [
+                createElementVNode("div", _hoisted_18$1, [
+                  createElementVNode("div", null, [
+                    _cache[17] || (_cache[17] = createElementVNode(
+                      "h4",
+                      { class: "font-medium text-gray-900" },
+                      "Username",
+                      -1
+                      /* CACHED */
+                    )),
+                    createElementVNode("p", _hoisted_19$1, [
+                      createTextVNode(
+                        toDisplayString($setup.currentUser?.username || "No username set") + " ",
+                        1
+                        /* TEXT */
+                      ),
+                      $setup.usernameChangeData.cooldownEnd ? (openBlock(), createElementBlock(
+                        "span",
+                        _hoisted_20$1,
+                        " (Can change in " + toDisplayString($setup.usernameChangeData.daysRemaining) + " days) ",
+                        1
+                        /* TEXT */
+                      )) : createCommentVNode("v-if", true)
+                    ])
+                  ]),
+                  createVNode($setup["StrandsUiButton"], {
+                    variant: "secondary",
+                    size: "sm",
+                    disabled: !$setup.usernameChangeData.canChange || $setup.usernameChangeLoading,
+                    onClick: $setup.handleToggleUsernameChange
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(
+                        toDisplayString($setup.showUsernameChange ? "Cancel" : $setup.currentUser?.username ? "Change" : "Set Username"),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["disabled"])
+                ]),
+                createVNode(Transition, { name: "expand" }, {
+                  default: withCtx(() => [
+                    $setup.showUsernameChange ? (openBlock(), createElementBlock("div", _hoisted_21, [
+                      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 ? (openBlock(), createElementBlock(
+                        "div",
+                        {
+                          key: 0,
+                          class: normalizeClass(["text-xs", $setup.usernameAvailability.available ? "text-green-600" : "text-red-600"])
+                        },
+                        toDisplayString($setup.usernameAvailability.message),
+                        3
+                        /* TEXT, CLASS */
+                      )) : createCommentVNode("v-if", true),
+                      createVNode($setup["StrandsUiButton"], {
+                        variant: "primary",
+                        size: "sm",
+                        onClick: $setup.handleUsernameChange,
+                        disabled: !$setup.isUsernameChangeFormValid || $setup.usernameChangeLoading
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode(
+                            toDisplayString($setup.usernameChangeLoading ? "Updating..." : "Update Username"),
+                            1
+                            /* TEXT */
+                          )
+                        ]),
+                        _: 1
+                        /* STABLE */
+                      }, 8, ["disabled"])
+                    ])) : createCommentVNode("v-if", true)
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
               ])
             ]),
             createCommentVNode(" Security Settings "),
-            createElementVNode("div", _hoisted_17$1, [
-              _cache[22] || (_cache[22] = createElementVNode(
+            createElementVNode("div", _hoisted_22, [
+              _cache[24] || (_cache[24] = createElementVNode(
                 "h3",
                 { class: "text-lg font-semibold text-gray-900 mb-3 md:mb-4" },
                 "Security Settings",
@@ -13219,10 +13456,10 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 /* CACHED */
               )),
               createCommentVNode(" Password Change "),
-              createElementVNode("div", _hoisted_18$1, [
-                createElementVNode("div", _hoisted_19$1, [
+              createElementVNode("div", _hoisted_23, [
+                createElementVNode("div", _hoisted_24, [
                   createElementVNode("div", null, [
-                    _cache[17] || (_cache[17] = createElementVNode(
+                    _cache[19] || (_cache[19] = createElementVNode(
                       "h4",
                       { class: "font-medium text-gray-900" },
                       "Password",
@@ -13231,7 +13468,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     )),
                     createElementVNode(
                       "p",
-                      _hoisted_20$1,
+                      _hoisted_25,
                       "Last updated " + toDisplayString($setup.passwordLastUpdated),
                       1
                       /* TEXT */
@@ -13240,7 +13477,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                   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: withCtx(() => [
                       createTextVNode(
@@ -13255,24 +13492,24 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 ]),
                 createVNode(Transition, { name: "expand" }, {
                   default: withCtx(() => [
-                    $setup.showPasswordChange ? (openBlock(), createElementBlock("div", _hoisted_21, [
+                    $setup.showPasswordChange ? (openBlock(), createElementBlock("div", _hoisted_26, [
                       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"]),
                       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"]),
                       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"
@@ -13283,7 +13520,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                         onClick: $setup.handlePasswordChange,
                         disabled: !$setup.isPasswordFormValid
                       }, {
-                        default: withCtx(() => _cache[18] || (_cache[18] = [
+                        default: withCtx(() => _cache[20] || (_cache[20] = [
                           createTextVNode(
                             " Update Password ",
                             -1
@@ -13291,7 +13528,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                           )
                         ])),
                         _: 1,
-                        __: [18]
+                        __: [20]
                       }, 8, ["disabled"])
                     ])) : createCommentVNode("v-if", true)
                   ]),
@@ -13300,10 +13537,10 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 })
               ]),
               createCommentVNode(" Two-Factor Authentication "),
-              createElementVNode("div", _hoisted_22, [
-                createElementVNode("div", _hoisted_23, [
-                  createElementVNode("div", _hoisted_24, [
-                    _cache[19] || (_cache[19] = createElementVNode(
+              createElementVNode("div", _hoisted_27, [
+                createElementVNode("div", _hoisted_28, [
+                  createElementVNode("div", _hoisted_29, [
+                    _cache[21] || (_cache[21] = createElementVNode(
                       "h4",
                       { class: "font-medium text-gray-900" },
                       "Two-Factor Authentication",
@@ -13312,13 +13549,13 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     )),
                     createElementVNode(
                       "p",
-                      _hoisted_25,
+                      _hoisted_30,
                       toDisplayString($setup.currentUser?.mfaEnabled ? "Enabled" : "Add extra security to your account"),
                       1
                       /* TEXT */
                     ),
                     createCommentVNode(" Device Type Chips "),
-                    $setup.mfaDeviceChips.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_26, [
+                    $setup.mfaDeviceChips.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_31, [
                       (openBlock(true), createElementBlock(
                         Fragment,
                         null,
@@ -13346,7 +13583,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                               ),
                               createElementVNode(
                                 "span",
-                                _hoisted_27,
+                                _hoisted_32,
                                 toDisplayString(chip.label),
                                 1
                                 /* TEXT */
@@ -13364,7 +13601,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                   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: withCtx(() => [
@@ -13380,10 +13617,10 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 ])
               ]),
               createCommentVNode(" Active Sessions "),
-              createElementVNode("div", _hoisted_28, [
-                createElementVNode("div", _hoisted_29, [
+              createElementVNode("div", _hoisted_33, [
+                createElementVNode("div", _hoisted_34, [
                   createElementVNode("div", null, [
-                    _cache[20] || (_cache[20] = createElementVNode(
+                    _cache[22] || (_cache[22] = createElementVNode(
                       "h4",
                       { class: "font-medium text-gray-900" },
                       "Active Sessions",
@@ -13392,7 +13629,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                     )),
                     createElementVNode(
                       "p",
-                      _hoisted_30,
+                      _hoisted_35,
                       toDisplayString($setup.activeSessions.length) + " active device(s)",
                       1
                       /* TEXT */
@@ -13401,10 +13638,10 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                   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: withCtx(() => _cache[21] || (_cache[21] = [
+                    default: withCtx(() => _cache[23] || (_cache[23] = [
                       createTextVNode(
                         " Coming Soon ",
                         -1
@@ -13412,14 +13649,14 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                       )
                     ])),
                     _: 1,
-                    __: [21]
+                    __: [23]
                   })
                 ])
               ])
             ])
           ]),
           createCommentVNode(" Action Buttons - Only show when changes are made "),
-          $setup.hasChanges ? (openBlock(), createElementBlock("div", _hoisted_31, [
+          $setup.hasChanges ? (openBlock(), createElementBlock("div", _hoisted_36, [
             createVNode($setup["StrandsUiButton"], {
               type: "submit",
               variant: "primary",
@@ -13441,7 +13678,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
               onClick: $setup.handleCancel,
               disabled: $setup.loading
             }, {
-              default: withCtx(() => _cache[23] || (_cache[23] = [
+              default: withCtx(() => _cache[25] || (_cache[25] = [
                 createTextVNode(
                   " Cancel ",
                   -1
@@ -13449,7 +13686,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 )
               ])),
               _: 1,
-              __: [23]
+              __: [25]
             }, 8, ["disabled"])
           ])) : createCommentVNode("v-if", true)
         ],
@@ -13457,10 +13694,10 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
         /* NEED_HYDRATION */
       ),
       createCommentVNode(" Success/Error Messages "),
-      $setup.successMessage ? (openBlock(), createElementBlock("div", _hoisted_32, [
-        createElementVNode("div", _hoisted_33, [
-          createElementVNode("div", _hoisted_34, [
-            _cache[24] || (_cache[24] = createElementVNode(
+      $setup.successMessage ? (openBlock(), createElementBlock("div", _hoisted_37, [
+        createElementVNode("div", _hoisted_38, [
+          createElementVNode("div", _hoisted_39, [
+            _cache[26] || (_cache[26] = createElementVNode(
               "svg",
               {
                 class: "w-4 h-4 mt-0.5 flex-shrink-0",
@@ -13479,7 +13716,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             )),
             createElementVNode(
               "p",
-              _hoisted_35,
+              _hoisted_40,
               toDisplayString($setup.successMessage),
               1
               /* TEXT */
@@ -13487,10 +13724,10 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         ])
       ])) : createCommentVNode("v-if", true),
-      $setup.errorMessage ? (openBlock(), createElementBlock("div", _hoisted_36, [
-        createElementVNode("div", _hoisted_37, [
-          createElementVNode("div", _hoisted_38, [
-            _cache[25] || (_cache[25] = createElementVNode(
+      $setup.errorMessage ? (openBlock(), createElementBlock("div", _hoisted_41, [
+        createElementVNode("div", _hoisted_42, [
+          createElementVNode("div", _hoisted_43, [
+            _cache[27] || (_cache[27] = createElementVNode(
               "svg",
               {
                 class: "w-4 h-4 mt-0.5 flex-shrink-0",
@@ -13509,7 +13746,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             )),
             createElementVNode(
               "p",
-              _hoisted_39,
+              _hoisted_44,
               toDisplayString($setup.errorMessage),
               1
               /* TEXT */
@@ -13522,7 +13759,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
         config: $setup.props.config
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_40, [
+          createElementVNode("div", _hoisted_45, [
             createCommentVNode(" Sign Out button "),
             createVNode($setup["StrandsUiButton"], {
               variant: "secondary",
@@ -13544,10 +13781,10 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             createCommentVNode(" Settings button "),
             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: withCtx(() => _cache[26] || (_cache[26] = [
+              default: withCtx(() => _cache[28] || (_cache[28] = [
                 createElementVNode(
                   "svg",
                   {
@@ -13575,13 +13812,13 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 )
               ])),
               _: 1,
-              __: [26]
+              __: [28]
             })
           ]),
           createCommentVNode(" Need help "),
-          $setup.getSupportEmail() ? (openBlock(), createElementBlock("div", _hoisted_41, [
-            createElementVNode("p", _hoisted_42, [
-              _cache[28] || (_cache[28] = createTextVNode(
+          $setup.getSupportEmail() ? (openBlock(), createElementBlock("div", _hoisted_46, [
+            createElementVNode("p", _hoisted_47, [
+              _cache[30] || (_cache[30] = createTextVNode(
                 " Need help? ",
                 -1
                 /* CACHED */
@@ -13590,7 +13827,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                 variant: "primary",
                 href: `mailto:${$setup.getSupportEmail()}`
               }, {
-                default: withCtx(() => _cache[27] || (_cache[27] = [
+                default: withCtx(() => _cache[29] || (_cache[29] = [
                   createTextVNode(
                     " Contact Support ",
                     -1
@@ -13598,7 +13835,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
                   )
                 ])),
                 _: 1,
-                __: [27]
+                __: [29]
               }, 8, ["href"])
             ])
           ])) : createCommentVNode("v-if", true)
@@ -13610,21 +13847,21 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     createCommentVNode(" MFA Management Modal "),
     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"]),
     createCommentVNode(" Settings Modal "),
     $setup.showSettingsModal ? (openBlock(), 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
     })) : createCommentVNode("v-if", true),
     createCommentVNode(" Avatar Editor Modal "),
-    $setup.showAvatarEditor ? (openBlock(), createElementBlock("div", _hoisted_43, [
-      createElementVNode("div", _hoisted_44, [
-        createElementVNode("div", _hoisted_45, [
+    $setup.showAvatarEditor ? (openBlock(), createElementBlock("div", _hoisted_48, [
+      createElementVNode("div", _hoisted_49, [
+        createElementVNode("div", _hoisted_50, [
           createElementVNode("div", { class: "flex items-center justify-between mb-6" }, [
-            _cache[31] || (_cache[31] = createElementVNode(
+            _cache[33] || (_cache[33] = createElementVNode(
               "h2",
               { class: "text-xl font-bold text-gray-900" },
               "Edit Avatar",
@@ -13634,7 +13871,7 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
             createElementVNode("button", {
               onClick: $setup.handleAvatarEditorClose,
               class: "text-gray-400 hover:text-gray-600 transition-colors"
-            }, _cache[30] || (_cache[30] = [
+            }, _cache[32] || (_cache[32] = [
               createElementVNode(
                 "svg",
                 {