@abraca/nuxt 2.0.4 → 2.0.6

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "2.0.4",
+  "version": "2.0.6",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/aware/AAvatar.d.vue.ts

@@ -15,12 +15,16 @@ type __VLS_Props = {
      *  the consumer can opt into the look without affecting other call
      *  sites (e.g. show on the local user's own avatar but not on peers). */
     useStatusAsAvatar?: boolean;
+    /** Free-form icon override. Takes precedence over `useStatusAsAvatar`.
+     *  Accepts a Lucide icon name (`smile`) or a full Iconify name (`i-lucide-smile`). */
+    icon?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     follow: (user: AwarenessUser) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onFollow?: ((user: AwarenessUser) => any) | undefined;
 }>, {
+    icon: string;
     size: "2xs" | "xs" | "sm" | "md" | "lg";
     showStatus: boolean;
     showTooltip: boolean;

package/dist/runtime/components/aware/AAvatar.vue

@@ -10,7 +10,8 @@ const props = defineProps({
   showTooltip: { type: Boolean, required: false, default: true },
   showPopover: { type: Boolean, required: false, default: false },
   currentDocId: { type: String, required: false },
-  useStatusAsAvatar: { type: Boolean, required: false, default: false }
+  useStatusAsAvatar: { type: Boolean, required: false, default: false },
+  icon: { type: String, required: false, default: "" }
 });
 const emit = defineEmits(["follow"]);
 const appConfig = useAppConfig();
@@ -22,7 +23,14 @@ const statusIcon = computed(
   () => statusIconRaw.value ? statusIconRaw.value.startsWith("i-") ? statusIconRaw.value : `i-lucide-${statusIconRaw.value}` : ""
 );
 const statusText = computed(() => props.user.user?.statusText ?? "");
-const showStatusAsAvatar = computed(() => props.useStatusAsAvatar && !!statusIcon.value);
+const explicitIcon = computed(
+  () => props.icon ? props.icon.startsWith("i-") ? props.icon : `i-lucide-${props.icon}` : ""
+);
+const avatarIcon = computed(() => {
+  if (explicitIcon.value) return explicitIcon.value;
+  if (props.useStatusAsAvatar && statusIcon.value) return statusIcon.value;
+  return void 0;
+});
 const avatarStyle = computed(
   () => color.value ? avatarBorderStyle(color.value, neutral.value) : ""
 );
@@ -77,6 +85,7 @@ const popoverOpen = ref(false);
           :alt="name"
           :size="size"
           :style="avatarStyle"
+          :icon="avatarIcon"
         />
       </UChip>
       <UAvatar
@@ -84,6 +93,7 @@ const popoverOpen = ref(false);
         :alt="name"
         :size="size"
         :style="avatarStyle"
+        :icon="avatarIcon"
       />
     </UTooltip>
     <UAvatar
@@ -91,6 +101,7 @@ const popoverOpen = ref(false);
       :alt="name"
       :size="size"
       :style="avatarStyle"
+      :icon="avatarIcon"
     />
 
     <template #content>
@@ -100,6 +111,7 @@ const popoverOpen = ref(false);
             :alt="name"
             size="md"
             :style="avatarStyle"
+            :icon="avatarIcon"
           />
           <div class="flex-1 min-w-0">
             <p class="text-sm font-semibold text-default truncate">
@@ -151,7 +163,7 @@ const popoverOpen = ref(false);
         :alt="name"
         :size="size"
         :style="avatarStyle"
-        :icon="showStatusAsAvatar ? statusIcon : void 0"
+        :icon="avatarIcon"
       />
     </UChip>
     <UAvatar
@@ -174,7 +186,7 @@ const popoverOpen = ref(false);
         :alt="name"
         :size="size"
         :style="avatarStyle"
-        :icon="showStatusAsAvatar ? statusIcon : void 0"
+        :icon="avatarIcon"
       />
     </UChip>
     <UAvatar
@@ -182,6 +194,7 @@ const popoverOpen = ref(false);
       :alt="name"
       :size="size"
       :style="avatarStyle"
+      :icon="avatarIcon"
     />
   </template>
 </template>

package/dist/runtime/components/aware/AAvatar.vue.d.ts

@@ -15,12 +15,16 @@ type __VLS_Props = {
      *  the consumer can opt into the look without affecting other call
      *  sites (e.g. show on the local user's own avatar but not on peers). */
     useStatusAsAvatar?: boolean;
+    /** Free-form icon override. Takes precedence over `useStatusAsAvatar`.
+     *  Accepts a Lucide icon name (`smile`) or a full Iconify name (`i-lucide-smile`). */
+    icon?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     follow: (user: AwarenessUser) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onFollow?: ((user: AwarenessUser) => any) | undefined;
 }>, {
+    icon: string;
     size: "2xs" | "xs" | "sm" | "md" | "lg";
     showStatus: boolean;
     showTooltip: boolean;

package/dist/runtime/components/aware/AInputMenu.vue

@@ -30,6 +30,12 @@ const enableLive = computed(() => props.live || props.total);
 const attrs = useAttrs();
 const { hoverers, focusers, pressers, isPressed, handlers } = useAAField(() => props.fieldKey);
 const synced = useAAFieldValue(() => props.fieldKey);
+const syncedModel = computed({
+  get: () => synced.value,
+  set: (v) => {
+    synced.value = v;
+  }
+});
 const liveOpen = useAAUIState(() => `${props.fieldKey}:open`, { defaultValue: false });
 const liveQuery = useAAUIState(() => `${props.fieldKey}:query`, { defaultValue: "" });
 const hasExternalModel = computed(() => "modelValue" in attrs || "onUpdate:modelValue" in attrs);
@@ -81,7 +87,7 @@ const eventHandlers = computed(() => enableAwareness.value ? handlers : {});
   >
     <UInputMenu
       v-if="enableSync && !hasExternalModel && enableLive && !hasExternalOpen"
-      v-model="synced"
+      v-model="syncedModel"
       v-model:open="localOpen"
       v-model:search-term="localQuery"
       v-bind="attrs"
@@ -94,7 +100,7 @@ const eventHandlers = computed(() => enableAwareness.value ? handlers : {});
     </UInputMenu>
     <UInputMenu
       v-else-if="enableSync && !hasExternalModel"
-      v-model="synced"
+      v-model="syncedModel"
       v-bind="attrs"
     >
       <template #item="{ item }">

package/dist/runtime/components/aware/AMedia.d.vue.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     awareness: boolean;
     tag: "video" | "audio";
     live: boolean;
-    controls: boolean;
     total: boolean;
+    controls: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/aware/AMedia.vue.d.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     awareness: boolean;
     tag: "video" | "audio";
     live: boolean;
-    controls: boolean;
     total: boolean;
+    controls: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/aware/ASelectMenu.vue

@@ -30,6 +30,12 @@ const enableLive = computed(() => props.live || props.total);
 const attrs = useAttrs();
 const { hoverers, focusers, pressers, isPressed, handlers } = useAAField(() => props.fieldKey);
 const synced = useAAFieldValue(() => props.fieldKey);
+const syncedModel = computed({
+  get: () => synced.value,
+  set: (v) => {
+    synced.value = v;
+  }
+});
 const liveOpen = useAAUIState(() => `${props.fieldKey}:open`, { defaultValue: false });
 const liveQuery = useAAUIState(() => `${props.fieldKey}:query`, { defaultValue: "" });
 const hasExternalModel = computed(() => "modelValue" in attrs || "onUpdate:modelValue" in attrs);
@@ -82,7 +88,7 @@ const eventHandlers = computed(() => enableAwareness.value ? handlers : {});
   >
     <USelectMenu
       v-if="enableSync && !hasExternalModel && enableLive && !hasExternalOpen"
-      v-model="synced"
+      v-model="syncedModel"
       v-model:open="localOpen"
       v-model:search-term="localQuery"
       v-bind="attrs"
@@ -95,7 +101,7 @@ const eventHandlers = computed(() => enableAwareness.value ? handlers : {});
     </USelectMenu>
     <USelectMenu
       v-else-if="enableSync && !hasExternalModel"
-      v-model="synced"
+      v-model="syncedModel"
       v-bind="attrs"
     >
       <template #item="{ item }">

package/dist/runtime/components/docs/ADocsSearch.d.vue.ts

@@ -238,8 +238,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
     transition: boolean;
     autofocus: boolean;
     loading: boolean;
-    colorMode: boolean;
     overlay: boolean;
+    colorMode: boolean;
     dismissible: boolean;
     fullscreen: boolean;
     modal: boolean;

package/dist/runtime/components/docs/ADocsSearch.vue.d.ts

@@ -238,8 +238,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
     transition: boolean;
     autofocus: boolean;
     loading: boolean;
-    colorMode: boolean;
     overlay: boolean;
+    colorMode: boolean;
     dismissible: boolean;
     fullscreen: boolean;
     modal: boolean;

package/dist/runtime/components/renderers/AMapRenderer.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed, watch, shallowRef, onMounted, onBeforeUnmount, onUnmounted, defineAsyncComponent } from "vue";
-import { useRuntimeConfig, useColorMode } from "#imports";
+import { useRuntimeConfig, useColorMode, useAppConfig } from "#imports";
+import { avatarBorderStyle } from "../../utils/avatarStyle";
 import { useAbracadabra } from "../../composables/useAbracadabra";
 import { useRendererBase } from "../../composables/useRendererBase";
 import { useNodePanel } from "../../composables/useNodePanel";
@@ -144,6 +145,8 @@ const mapReady = ref(false);
 const mapFadedIn = ref(false);
 const colorMode = useColorMode();
 const isDark = computed(() => colorMode.value === "dark");
+const mapAppConfig = useAppConfig();
+const mapNeutralColor = computed(() => mapAppConfig.ui?.colors?.neutral ?? "zinc");
 const activeMode = ref("pan");
 const showLabels = ref(true);
 const popupProvider = shallowRef(null);
@@ -360,7 +363,15 @@ function createPresenceEl(name, colorHex) {
   const el = document.createElement("div");
   el.className = "presence-marker";
   const initials = name.split(" ").map((w) => w[0] ?? "").join("").substring(0, 2).toUpperCase();
-  el.innerHTML = `<div class="presence-avatar" style="background:${colorHex}">${initials}</div><div class="presence-label">${name}</div>`;
+  const avatar = document.createElement("div");
+  avatar.className = "presence-avatar";
+  avatar.style.cssText = avatarBorderStyle(colorHex, mapNeutralColor.value);
+  avatar.textContent = initials;
+  const label = document.createElement("div");
+  label.className = "presence-label";
+  label.textContent = name;
+  el.appendChild(avatar);
+  el.appendChild(label);
   return el;
 }
 function tickPresenceMarkers() {
@@ -1620,5 +1631,5 @@ defineExpose({ connectedUsers });
 </style>
 
 <style>
-.mapboxgl-map{height:100%!important;width:100%!important}.collab-marker-container{align-items:center;cursor:pointer;display:flex;flex-direction:column}.collab-marker-pin{align-items:center;border-radius:50%;display:flex;height:28px;justify-content:center;transition:transform .2s ease;width:28px;z-index:30}.collab-marker-pin:hover{transform:scale(1.15)}.collab-marker-label{background:rgba(0,0,0,.5);border-radius:3px;color:#fff;font-size:11px;font-weight:700;margin-top:3px;padding:1px 5px;pointer-events:none;text-shadow:0 1px 4px rgba(0,0,0,.7);white-space:nowrap}.collab-line-point{border:2px solid #fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:grab;height:10px;width:10px}.collab-line-point:hover{height:14px;width:14px}.presence-marker{align-items:center;display:flex;flex-direction:column;gap:2px;pointer-events:none}.presence-avatar{align-items:center;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.4);color:#fff;display:flex;font-size:.65rem;font-weight:700;height:1.75rem;justify-content:center;width:1.75rem}.presence-label{color:#fff;font-size:.6rem;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.8);white-space:nowrap}.map-cursor-el{left:0;pointer-events:none;position:absolute;top:0;will-change:transform;z-index:50}.map-cursor-name{font-size:.6rem;font-weight:600;left:14px;top:8px}.map-cursor-name,.measure-label-el{border-radius:3px;color:#000;padding:1px 5px;position:absolute;white-space:nowrap}.measure-label-el{background:rgba(250,204,21,.92);box-shadow:0 1px 4px rgba(0,0,0,.3);font-size:.62rem;font-weight:700;left:0;pointer-events:none;top:0;transform:translate(-50%,calc(-100% - 5px));z-index:35}@keyframes ping-ring{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(3)}}.map-ping-root{height:12px;left:0;pointer-events:none;position:absolute;top:0;transform:translate(-50%,-50%);width:12px;z-index:45}.map-ping-ring{animation:ping-ring 1.5s ease-out forwards;border:3px solid var(--ping-color);border-radius:50%;inset:-16px;position:absolute}.map-ping-dot{background:var(--ping-color);border:2px solid #fff;border-radius:50%;height:12px;left:0;position:absolute;top:0;width:12px}
+.mapboxgl-map{height:100%!important;width:100%!important}.collab-marker-container{align-items:center;cursor:pointer;display:flex;flex-direction:column}.collab-marker-pin{align-items:center;border-radius:50%;display:flex;height:28px;justify-content:center;transition:transform .2s ease;width:28px;z-index:30}.collab-marker-pin:hover{transform:scale(1.15)}.collab-marker-label{background:rgba(0,0,0,.5);border-radius:3px;color:#fff;font-size:11px;font-weight:700;margin-top:3px;padding:1px 5px;pointer-events:none;text-shadow:0 1px 4px rgba(0,0,0,.7);white-space:nowrap}.collab-line-point{border:2px solid #fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.4);cursor:grab;height:10px;width:10px}.collab-line-point:hover{height:14px;width:14px}.presence-marker{align-items:center;display:flex;flex-direction:column;gap:2px;pointer-events:none}.presence-avatar{align-items:center;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.4);display:flex;font-size:.65rem;font-weight:700;height:1.75rem;justify-content:center;width:1.75rem}.presence-label{color:#fff;font-size:.6rem;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.8);white-space:nowrap}.map-cursor-el{left:0;pointer-events:none;position:absolute;top:0;will-change:transform;z-index:50}.map-cursor-name{font-size:.6rem;font-weight:600;left:14px;top:8px}.map-cursor-name,.measure-label-el{border-radius:3px;color:#000;padding:1px 5px;position:absolute;white-space:nowrap}.measure-label-el{background:rgba(250,204,21,.92);box-shadow:0 1px 4px rgba(0,0,0,.3);font-size:.62rem;font-weight:700;left:0;pointer-events:none;top:0;transform:translate(-50%,calc(-100% - 5px));z-index:35}@keyframes ping-ring{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(3)}}.map-ping-root{height:12px;left:0;pointer-events:none;position:absolute;top:0;transform:translate(-50%,-50%);width:12px;z-index:45}.map-ping-ring{animation:ping-ring 1.5s ease-out forwards;border:3px solid var(--ping-color);border-radius:50%;inset:-16px;position:absolute}.map-ping-dot{background:var(--ping-color);border:2px solid #fff;border-radius:50%;height:12px;left:0;position:absolute;top:0;width:12px}
 </style>

package/dist/runtime/components/renderers/media/MediaPlaylist.d.vue.ts

@@ -1,8 +1,3 @@
-/**
- * Track list grouped by parent label.
- * Shows equalizer animation for current track, remote listener avatars.
- * Ported from cou-sh/app/components/doc/media/MediaPlaylist.vue
- */
 import type { MediaTrack, MediaGroup } from '../../../composables/useMediaExtractor.js';
 type __VLS_Props = {
     groups: MediaGroup[];

package/dist/runtime/components/renderers/media/MediaPlaylist.vue

@@ -1,10 +1,15 @@
 <script setup>
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { avatarBorderStyle } from "../../../utils/avatarStyle";
 const props = defineProps({
   groups: { type: Array, required: true },
   currentTrackId: { type: [String, null], required: true },
   remoteListeners: { type: Array, required: true }
 });
 const emit = defineEmits(["playTrack", "openTrack"]);
+const appConfig = useAppConfig();
+const neutral = computed(() => appConfig.ui?.colors?.neutral ?? "zinc");
 function formatDuration(seconds) {
   if (!seconds || !Number.isFinite(seconds)) return "";
   const m = Math.floor(seconds / 60);
@@ -89,15 +94,14 @@ function trackSubtitle(track) {
           v-if="listenersForTrack(track.id).length"
           class="flex -space-x-1.5 shrink-0 ml-1"
         >
-          <span
+          <UAvatar
             v-for="listener in listenersForTrack(track.id).slice(0, 3)"
             :key="listener.clientId"
-            class="size-5 rounded-full flex items-center justify-center text-[9px] font-medium text-white ring-1 ring-(--ui-bg)"
-            :style="{ backgroundColor: listener.color }"
+            :alt="listener.name"
+            size="2xs"
             :title="listener.name"
-          >
-            {{ listener.name?.charAt(0)?.toUpperCase() ?? "?" }}
-          </span>
+            :style="avatarBorderStyle(listener.color, neutral)"
+          />
           <span
             v-if="listenersForTrack(track.id).length > 3"
             class="size-5 rounded-full flex items-center justify-center text-[9px] font-medium text-(--ui-text-dimmed) bg-(--ui-bg-accented) ring-1 ring-(--ui-bg)"

package/dist/runtime/components/renderers/media/MediaPlaylist.vue.d.ts

@@ -1,8 +1,3 @@
-/**
- * Track list grouped by parent label.
- * Shows equalizer animation for current track, remote listener avatars.
- * Ported from cou-sh/app/components/doc/media/MediaPlaylist.vue
- */
 import type { MediaTrack, MediaGroup } from '../../../composables/useMediaExtractor.js';
 type __VLS_Props = {
     groups: MediaGroup[];

package/dist/runtime/components/renderers/media/MediaSyncBar.d.vue.ts

@@ -1,7 +1,3 @@
-/**
- * Sync session bar — join/leave coordinated listening.
- * Ported from cou-sh/app/components/doc/media/MediaSyncBar.vue
- */
 type __VLS_Props = {
     isSynced: boolean;
     syncedUsers: Array<{

package/dist/runtime/components/renderers/media/MediaSyncBar.vue

@@ -1,9 +1,14 @@
 <script setup>
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { avatarBorderStyle } from "../../../utils/avatarStyle";
 defineProps({
   isSynced: { type: Boolean, required: true },
   syncedUsers: { type: Array, required: true }
 });
 const emit = defineEmits(["joinSync", "leaveSync"]);
+const appConfig = useAppConfig();
+const neutral = computed(() => appConfig.ui?.colors?.neutral ?? "zinc");
 </script>
 
 <template>
@@ -28,15 +33,14 @@ const emit = defineEmits(["joinSync", "leaveSync"]);
       v-if="syncedUsers.length > 0"
       class="flex -space-x-1.5 shrink-0 mr-2"
     >
-      <span
+      <UAvatar
         v-for="user in syncedUsers.slice(0, 5)"
         :key="user.clientId"
-        class="size-5 rounded-full flex items-center justify-center text-[9px] font-medium text-white ring-1 ring-(--ui-bg)"
-        :style="{ backgroundColor: user.color }"
+        :alt="user.name"
+        size="2xs"
         :title="user.name"
-      >
-        {{ user.name?.charAt(0)?.toUpperCase() ?? "?" }}
-      </span>
+        :style="avatarBorderStyle(user.color, neutral)"
+      />
       <span
         v-if="syncedUsers.length > 5"
         class="size-5 rounded-full flex items-center justify-center text-[9px] font-medium text-(--ui-text-dimmed) bg-(--ui-bg-accented) ring-1 ring-(--ui-bg)"

package/dist/runtime/components/renderers/media/MediaSyncBar.vue.d.ts

@@ -1,7 +1,3 @@
-/**
- * Sync session bar — join/leave coordinated listening.
- * Ported from cou-sh/app/components/doc/media/MediaSyncBar.vue
- */
 type __VLS_Props = {
     isSynced: boolean;
     syncedUsers: Array<{

package/dist/runtime/components/shell/AUserMenu.d.vue.ts

@@ -12,13 +12,13 @@ type __VLS_Props = {
     extraItems?: DropdownMenuItem[][];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    logout: () => any;
     "open-settings": () => any;
     "open-account": () => any;
+    logout: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onLogout?: (() => any) | undefined;
     "onOpen-settings"?: (() => any) | undefined;
     "onOpen-account"?: (() => any) | undefined;
+    onLogout?: (() => any) | undefined;
 }>, {
     color: string;
     collapsed: boolean;

package/dist/runtime/components/shell/AUserMenu.vue.d.ts

@@ -12,13 +12,13 @@ type __VLS_Props = {
     extraItems?: DropdownMenuItem[][];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    logout: () => any;
     "open-settings": () => any;
     "open-account": () => any;
+    logout: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onLogout?: (() => any) | undefined;
     "onOpen-settings"?: (() => any) | undefined;
     "onOpen-account"?: (() => any) | undefined;
+    onLogout?: (() => any) | undefined;
 }>, {
     color: string;
     collapsed: boolean;

package/dist/runtime/utils/avatarStyle.d.ts

@@ -1,10 +1,12 @@
 /**
- * Split-border avatar: inner filled with primaryColor, border = left half primary / right half neutral.
+ * Identity avatar style: neutral background fill, primary foreground (text + icons),
+ * split conic border (left half primary, right half neutral) as the identity signal,
+ * subtle drop shadow on text/icons for legibility on the neutral fill.
  *
  * CSS rules:
  * - Colors cannot appear in non-final background layers; use linear-gradient(c,c) as a solid-color image instead.
  * - UAvatar has overflow:hidden which clips border-area backgrounds; override with overflow:visible.
- *   Border-radius still clips the background shape, and text initials don't need overflow clipping.
+ * - `color` cascades to UAvatar's text fallback and to nested UIcon glyphs (UIcon uses currentColor).
  */
 export declare function avatarBorderStyle(primaryColor: string, neutralColorName: string): string;
 /**

package/dist/runtime/utils/avatarStyle.js

@@ -2,7 +2,9 @@ export function avatarBorderStyle(primaryColor, neutralColorName) {
   const neutral = `var(--color-${neutralColorName}-400, #888)`;
   return [
     "border: 2px solid transparent",
-    `background: linear-gradient(${primaryColor}, ${primaryColor}) padding-box, conic-gradient(${primaryColor} 180deg, ${neutral} 180deg) border-box`,
+    `background: linear-gradient(${neutral}, ${neutral}) padding-box, conic-gradient(${primaryColor} 180deg, ${neutral} 180deg) border-box`,
+    `color: ${primaryColor} !important`,
+    "text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35)",
     "overflow: visible"
   ].join("; ");
 }
@@ -11,7 +13,9 @@ export function avatarStyleFromName(primaryColorName, neutralColorName) {
   const neutral = `var(--color-${neutralColorName}-400, #888)`;
   return [
     "border: 2px solid transparent",
-    `background: linear-gradient(${primary}, ${primary}) padding-box, conic-gradient(${primary} 180deg, ${neutral} 180deg) border-box`,
+    `background: linear-gradient(${neutral}, ${neutral}) padding-box, conic-gradient(${primary} 180deg, ${neutral} 180deg) border-box`,
+    `color: ${primary} !important`,
+    "text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35)",
     "overflow: visible"
   ].join("; ");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abraca/nuxt",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "First-class Nuxt module for the Abracadabra CRDT collaboration platform",
   "repository": "abracadabra/abracadabra-nuxt",
   "license": "MIT",
@@ -96,7 +96,7 @@
     }
   },
   "devDependencies": {
-    "@abraca/dabra": "^2.0.4",
+    "@abraca/dabra": "^2.0.5",
     "@iconify-json/lucide": "^1.2.105",
     "@noble/ed25519": "^3.1.0",
     "@noble/hashes": "^2.2.0",
@@ -122,7 +122,7 @@
     "tslib": "^2.8.1",
     "typescript": "~6.0.3",
     "vitest": "^4.1.5",
-    "vue": "^3.5.33",
+    "vue": "^3.5.34",
     "vue-tsc": "^3.2.8",
     "ws": "^8.20.0",
     "yjs": "^13.6.30"