Changeset 0.37.2 (#214)

Co-authored-by: gobha <jasafpro@gmail.com>
Co-committed-by: gobha <jasafpro@gmail.com>

src/js/sw/primitives/avatar.js

@@ -0,0 +1,35 @@
+/**
+ * Avatar primitive — circle avatar with letter fallback
+ * Sizes: sm (24px), md (32px), lg (48px)
+ */
+const { html } = window;
+const { useState } = hooks;
+
+function initials(name) {
+    if (!name) return '?';
+    const parts = name.trim().split(/\s+/);
+    return parts.length > 1
+        ? (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+        : name.slice(0, 2).toUpperCase();
+}
+
+export function Avatar({ src, name = '', size = 'md' }) {
+    const [failed, setFailed] = useState(false);
+
+    if (src && !failed) {
+        return html`
+            <img
+                class="sw-avatar sw-avatar--${size}"
+                src=${src}
+                alt=${name}
+                onError=${() => setFailed(true)}
+            />
+        `;
+    }
+    return html`
+        <span class="sw-avatar sw-avatar--${size} sw-avatar--fallback"
+              aria-label=${name || 'Avatar'}>
+            ${initials(name)}
+        </span>
+    `;
+}