feat: add avatar change with crop from profile page

Add ability to change avatar directly from profile page when viewing
own profile. Includes custom crop component with drag-to-position,
zoom slider, pinch-to-zoom, and keyboard accessibility.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

src/components/molecules/grain-avatar-crop.js

···
+import { LitElement, html, css } from 'lit';
+import '../atoms/grain-button.js';
+import '../atoms/grain-icon.js';
+import '../atoms/grain-spinner.js';
+
+// Constants
+const DEFAULT_CROP_SIZE = 280;
+const MAX_ZOOM = 3;
+const OUTPUT_SIZE = 1000;
+const WHEEL_ZOOM_DELTA = 0.1;
+const KEY_PAN_DELTA = 10;
+
+/**
+ * Avatar crop modal - allows user to position and zoom an image within a square frame
+ *
+ * @fires crop - When user confirms crop, detail contains { dataUrl: string }
+ * @fires cancel - When user cancels
+ * @fires error - When image fails to load
+ */
+export class GrainAvatarCrop extends LitElement {
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    imageUrl: { type: String, attribute: 'image-url' },
+    _scale: { state: true },
+    _translateX: { state: true },
+    _translateY: { state: true },
+    _isDragging: { state: true },
+    _cropSize: { state: true },
+    _loading: { state: true },
+    _ready: { state: true }
+  };
+
+  static styles = css`
+    :host {
+      display: none;
+    }
+    :host([open]) {
+      display: block;
+    }
+    .overlay {
+      position: fixed;
+      top: 48px;
+      bottom: calc(48px + env(safe-area-inset-bottom, 0px));
+      left: 50%;
+      transform: translateX(-50%);
+      width: 100%;
+      max-width: var(--feed-max-width);
+      background: var(--color-bg-primary);
+      border-top: 1px solid var(--color-border);
+      border-bottom: 1px solid var(--color-border);
+      z-index: 1000;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+    .header {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--space-md);
+      color: var(--color-text-primary);
+    }
+    .header h2 {
+      margin: 0;
+      font-size: var(--font-size-md);
+      font-weight: var(--font-weight-semibold);
+    }
+    .header-button {
+      background: none;
+      border: none;
+      color: var(--color-text-primary);
+      padding: 8px;
+      cursor: pointer;
+      font-size: var(--font-size-md);
+    }
+    .header-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .crop-area {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      overflow: hidden;
+      touch-action: none;
+      width: 100%;
+      max-width: 400px;
+      padding: var(--space-md);
+      outline: none;
+    }
+    .image-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+    }
+    .crop-image {
+      max-width: 100%;
+      max-height: 400px;
+      user-select: none;
+      -webkit-user-drag: none;
+    }
+    .mask {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .mask-square {
+      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
+      border: 2px solid rgba(255, 255, 255, 0.3);
+    }
+    .controls {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: var(--space-md);
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-md);
+    }
+    .zoom-control {
+      display: flex;
+      align-items: center;
+      gap: var(--space-md);
+      padding: 0 var(--space-md);
+    }
+    .zoom-control grain-icon {
+      color: var(--color-text-secondary);
+      opacity: 0.7;
+    }
+    .zoom-slider {
+      flex: 1;
+      -webkit-appearance: none;
+      appearance: none;
+      height: 4px;
+      background: rgba(255, 255, 255, 0.3);
+      border-radius: 2px;
+      outline: none;
+    }
+    .zoom-slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 20px;
+      height: 20px;
+      background: white;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+    .zoom-slider::-moz-range-thumb {
+      width: 20px;
+      height: 20px;
+      background: white;
+      border-radius: 50%;
+      cursor: pointer;
+      border: none;
+    }
+    .loading-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 200px;
+    }
+  `;
+
+  // Track load operations to handle race conditions
+  #loadId = 0;
+  #pinchStartDistance = 0;
+  #pinchStartScale = 1;
+
+  constructor() {
+    super();
+    this.open = false;
+    this.imageUrl = '';
+    this._scale = 1;
+    this._translateX = 0;
+    this._translateY = 0;
+    this._isDragging = false;
+    this._dragStart = { x: 0, y: 0 };
+    this._lastTranslate = { x: 0, y: 0 };
+    this._imageSize = { width: 0, height: 0 };
+    this._displayedSize = { width: 0, height: 0 };
+    this._minScale = 1;
+    this._cropSize = DEFAULT_CROP_SIZE;
+    this._loading = false;
+    this._ready = false;
+  }
+
+  updated(changedProps) {
+    if (changedProps.has('imageUrl') && this.imageUrl) {
+      this.#loadImage();
+    }
+    if (changedProps.has('open') && this.open) {
+      this.#reset();
+      // Focus crop area for keyboard navigation
+      requestAnimationFrame(() => {
+        this.shadowRoot.querySelector('.crop-area')?.focus();
+      });
+    }
+  }
+
+  #reset() {
+    this._scale = 1;
+    this._translateX = 0;
+    this._translateY = 0;
+    this._ready = false;
+    if (this.imageUrl) {
+      this.#loadImage();
+    }
+  }
+
+  async #loadImage() {
+    // Increment load ID to handle race conditions
+    const currentLoadId = ++this.#loadId;
+
+    this._loading = true;
+    this._ready = false;
+
+    try {
+      const img = new Image();
+      img.src = this.imageUrl;
+      await img.decode();
+
+      // Check if this load is still current (not stale)
+      if (currentLoadId !== this.#loadId) return;
+
+      this._imageSize = { width: img.naturalWidth, height: img.naturalHeight };
+
+      // Start at scale 1
+      this._minScale = 1;
+      this._scale = 1;
+      this._translateX = 0;
+      this._translateY = 0;
+
+      // Image loaded successfully
+      this._loading = false;
+
+      // Wait for render then get displayed image size
+      await this.updateComplete;
+
+      // Wait for layout to complete (double RAF for reliable dimensions)
+      await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+
+      // Check again after async operation
+      if (currentLoadId !== this.#loadId) return;
+
+      const displayedImg = this.shadowRoot.querySelector('.crop-image');
+      if (displayedImg && displayedImg.offsetWidth > 0) {
+        this._displayedSize = {
+          width: displayedImg.offsetWidth,
+          height: displayedImg.offsetHeight
+        };
+        // Crop size is the smaller of default or the smallest image dimension
+        const minDimension = Math.min(this._displayedSize.width, this._displayedSize.height);
+        this._cropSize = Math.min(DEFAULT_CROP_SIZE, minDimension);
+        this._ready = true;
+      }
+    } catch (err) {
+      console.error('Failed to load image:', err);
+      if (currentLoadId === this.#loadId) {
+        this._loading = false;
+        this.dispatchEvent(new CustomEvent('error', {
+          detail: { message: 'Failed to load image' },
+          bubbles: true,
+          composed: true
+        }));
+      }
+    }
+  }
+
+  #handlePointerDown(e) {
+    if (e.target.tagName === 'INPUT') return;
+
+    // Prevent default to avoid text selection and other browser behaviors
+    e.preventDefault();
+
+    this._isDragging = true;
+    this._dragStart = { x: e.clientX, y: e.clientY };
+    this._lastTranslate = { x: this._translateX, y: this._translateY };
+
+    // Capture pointer on the crop-area element for reliable drag tracking
+    const cropArea = this.shadowRoot.querySelector('.crop-area');
+    cropArea?.setPointerCapture?.(e.pointerId);
+  }
+
+  #handlePointerMove(e) {
+    if (!this._isDragging) return;
+
+    // Prevent scrolling while dragging
+    e.preventDefault();
+
+    const dx = e.clientX - this._dragStart.x;
+    const dy = e.clientY - this._dragStart.y;
+
+    this._translateX = this.#clampTranslateX(this._lastTranslate.x + dx);
+    this._translateY = this.#clampTranslateY(this._lastTranslate.y + dy);
+  }
+
+  #handlePointerUp() {
+    this._isDragging = false;
+  }
+
+  #handleTouchStart(e) {
+    if (e.touches.length === 2) {
+      // Pinch start - prevent default to avoid browser zoom
+      e.preventDefault();
+      const dx = e.touches[0].clientX - e.touches[1].clientX;
+      const dy = e.touches[0].clientY - e.touches[1].clientY;
+      this.#pinchStartDistance = Math.hypot(dx, dy);
+      this.#pinchStartScale = this._scale;
+    }
+    // Single touch is handled by pointer events
+  }
+
+  #handleTouchMove(e) {
+    if (e.touches.length === 2 && this.#pinchStartDistance > 0) {
+      e.preventDefault();
+      const dx = e.touches[0].clientX - e.touches[1].clientX;
+      const dy = e.touches[0].clientY - e.touches[1].clientY;
+      const distance = Math.hypot(dx, dy);
+      const scaleFactor = distance / this.#pinchStartDistance;
+      const newScale = Math.max(this._minScale, Math.min(MAX_ZOOM, this.#pinchStartScale * scaleFactor));
+      this._scale = newScale;
+
+      this._translateX = this.#clampTranslateX(this._translateX);
+      this._translateY = this.#clampTranslateY(this._translateY);
+    }
+  }
+
+  #handleTouchEnd() {
+    this.#pinchStartDistance = 0;
+  }
+
+  #clampTranslateX(x) {
+    // Allow free movement if image size not yet calculated
+    if (!this._displayedSize.width || !this._cropSize) return x;
+    const scaledWidth = this._displayedSize.width * this._scale;
+    const maxOffset = Math.max(0, (scaledWidth - this._cropSize) / 2);
+    return Math.max(-maxOffset, Math.min(maxOffset, x));
+  }
+
+  #clampTranslateY(y) {
+    // Allow free movement if image size not yet calculated
+    if (!this._displayedSize.height || !this._cropSize) return y;
+    const scaledHeight = this._displayedSize.height * this._scale;
+    const maxOffset = Math.max(0, (scaledHeight - this._cropSize) / 2);
+    return Math.max(-maxOffset, Math.min(maxOffset, y));
+  }
+
+  #handleZoom(e) {
+    const newScale = parseFloat(e.target.value);
+    this._scale = newScale;
+
+    // Re-clamp translation after scale change
+    this._translateX = this.#clampTranslateX(this._translateX);
+    this._translateY = this.#clampTranslateY(this._translateY);
+  }
+
+  #handleWheel(e) {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -WHEEL_ZOOM_DELTA : WHEEL_ZOOM_DELTA;
+    const newScale = Math.max(this._minScale, Math.min(MAX_ZOOM, this._scale + delta));
+    this._scale = newScale;
+
+    this._translateX = this.#clampTranslateX(this._translateX);
+    this._translateY = this.#clampTranslateY(this._translateY);
+  }
+
+  #handleKeyDown(e) {
+    switch (e.key) {
+      case 'Escape':
+        e.preventDefault();
+        this.#handleCancel();
+        break;
+      case 'Enter':
+        e.preventDefault();
+        this.#handleConfirm();
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        this._translateX = this.#clampTranslateX(this._translateX + KEY_PAN_DELTA);
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        this._translateX = this.#clampTranslateX(this._translateX - KEY_PAN_DELTA);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        this._translateY = this.#clampTranslateY(this._translateY + KEY_PAN_DELTA);
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        this._translateY = this.#clampTranslateY(this._translateY - KEY_PAN_DELTA);
+        break;
+      case '+':
+      case '=':
+        e.preventDefault();
+        this._scale = Math.min(MAX_ZOOM, this._scale + WHEEL_ZOOM_DELTA);
+        this._translateX = this.#clampTranslateX(this._translateX);
+        this._translateY = this.#clampTranslateY(this._translateY);
+        break;
+      case '-':
+      case '_':
+        e.preventDefault();
+        this._scale = Math.max(this._minScale, this._scale - WHEEL_ZOOM_DELTA);
+        this._translateX = this.#clampTranslateX(this._translateX);
+        this._translateY = this.#clampTranslateY(this._translateY);
+        break;
+    }
+  }
+
+  #handleCancel() {
+    this.dispatchEvent(new CustomEvent('cancel', { bubbles: true, composed: true }));
+  }
+
+  async #handleConfirm() {
+    // Guard against calling before image is ready
+    if (!this._ready || !this._displayedSize.width || !this._displayedSize.height) {
+      console.error('Image not fully loaded');
+      return;
+    }
+
+    const canvas = document.createElement('canvas');
+    canvas.width = OUTPUT_SIZE;
+    canvas.height = OUTPUT_SIZE;
+    const ctx = canvas.getContext('2d');
+
+    const img = this.shadowRoot.querySelector('.crop-image');
+
+    // Calculate the ratio between natural and displayed size
+    const scaleRatioX = this._imageSize.width / this._displayedSize.width;
+    const scaleRatioY = this._imageSize.height / this._displayedSize.height;
+
+    // The visible crop area in displayed coordinates
+    const displayedCropWidth = this._cropSize / this._scale;
+    const displayedCropHeight = this._cropSize / this._scale;
+
+    // Center of displayed image adjusted by translation
+    const displayedCenterX = this._displayedSize.width / 2 - this._translateX / this._scale;
+    const displayedCenterY = this._displayedSize.height / 2 - this._translateY / this._scale;
+
+    // Convert to natural image coordinates
+    const sx = (displayedCenterX - displayedCropWidth / 2) * scaleRatioX;
+    const sy = (displayedCenterY - displayedCropHeight / 2) * scaleRatioY;
+    const sw = displayedCropWidth * scaleRatioX;
+    const sh = displayedCropHeight * scaleRatioY;
+
+    ctx.drawImage(img, sx, sy, sw, sh, 0, 0, OUTPUT_SIZE, OUTPUT_SIZE);
+
+    const dataUrl = canvas.toDataURL('image/jpeg', 0.9);
+
+    this.dispatchEvent(new CustomEvent('crop', {
+      detail: { dataUrl },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  render() {
+    if (!this.open) return null;
+
+    return html`
+      <div class="overlay">
+        <div class="header">
+          <button class="header-button" @click=${this.#handleCancel}>Cancel</button>
+          <h2>Move and Scale</h2>
+          <button
+            class="header-button"
+            @click=${this.#handleConfirm}
+            ?disabled=${!this._ready}
+          >Done</button>
+        </div>
+
+        ${this._loading ? html`
+          <div class="loading-container">
+            <grain-spinner></grain-spinner>
+          </div>
+        ` : html`
+          <div
+            class="crop-area"
+            tabindex="0"
+            @pointerdown=${this.#handlePointerDown}
+            @pointermove=${this.#handlePointerMove}
+            @pointerup=${this.#handlePointerUp}
+            @pointercancel=${this.#handlePointerUp}
+            @touchstart=${this.#handleTouchStart}
+            @touchmove=${this.#handleTouchMove}
+            @touchend=${this.#handleTouchEnd}
+            @wheel=${this.#handleWheel}
+            @keydown=${this.#handleKeyDown}
+          >
+            <div class="image-container">
+              <img
+                class="crop-image"
+                src=${this.imageUrl}
+                style="transform: translate(${this._translateX}px, ${this._translateY}px) scale(${this._scale})"
+                draggable="false"
+                alt="Image to crop"
+              />
+              <div class="mask">
+                <div class="mask-square" style="width: ${this._cropSize}px; height: ${this._cropSize}px;"></div>
+              </div>
+            </div>
+          </div>
+
+          <div class="controls">
+            <div class="zoom-control">
+              <grain-icon name="image" size="16"></grain-icon>
+              <input
+                type="range"
+                class="zoom-slider"
+                min=${this._minScale}
+                max=${MAX_ZOOM}
+                step="0.01"
+                .value=${String(this._scale)}
+                @input=${this.#handleZoom}
+                aria-label="Zoom level"
+                aria-valuemin=${this._minScale}
+                aria-valuemax=${MAX_ZOOM}
+                aria-valuenow=${this._scale}
+              />
+              <grain-icon name="image" size="24"></grain-icon>
+            </div>
+          </div>
+        `}
+      </div>
+    `;
+  }
+}
+
+customElements.define('grain-avatar-crop', GrainAvatarCrop);

src/components/organisms/grain-profile-header.js

···
 import { auth } from '../../services/auth.js';
 import { share } from '../../services/share.js';
 import { mutations } from '../../services/mutations.js';
+import { readFileAsDataURL, resizeImage } from '../../utils/image-resize.js';
 import '../atoms/grain-avatar.js';
 import '../atoms/grain-icon.js';
+import '../atoms/grain-spinner.js';
 import '../atoms/grain-toast.js';
 import '../molecules/grain-profile-stats.js';
 
···
   static properties = {
     profile: { type: Object },
     _user: { state: true },
-    _followLoading: { state: true }
+    _followLoading: { state: true },
+    _avatarUploading: { state: true }
   };
 
   static styles = css`
···
       padding: 0;
       cursor: pointer;
     }
+    .avatar-wrapper {
+      position: relative;
+    }
+    .avatar-overlay {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: var(--color-bg-primary);
+      border: 2px solid var(--color-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-text-primary);
+    }
+    .avatar-spinner {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+    }
+    input[type="file"] {
+      display: none;
+    }
     .menu-button {
       background: none;
       border: none;
···
     super();
     this._user = auth.user;
     this._followLoading = false;
+    this._avatarUploading = false;
   }
 
   connectedCallback() {
···
     } else if (action === 'share') {
       const result = await share(window.location.href);
       if (result.success && result.method === 'clipboard') {
-        this.shadowRoot.querySelector('grain-toast').show('Link copied');
+        this.shadowRoot.querySelector('grain-toast')?.show('Link copied');
       }
     }
   }
 
   #handleAvatarClick() {
-    this.dispatchEvent(new CustomEvent('avatar-click', {
-      bubbles: true,
-      composed: true
-    }));
+    if (this.#isOwnProfile) {
+      this.shadowRoot.querySelector('#avatar-input').click();
+    } else {
+      this.dispatchEvent(new CustomEvent('avatar-click', {
+        bubbles: true,
+        composed: true
+      }));
+    }
+  }
+
+  async #handleAvatarFileChange(e) {
+    const input = e.target;
+    const file = input.files?.[0];
+    if (!file) return;
+
+    // Reset input immediately so same file can be selected again
+    input.value = '';
+
+    try {
+      const dataUrl = await readFileAsDataURL(file);
+      const resized = await resizeImage(dataUrl, {
+        width: 2000,
+        height: 2000,
+        maxSize: 900000
+      });
+      // Emit event for parent to show crop modal
+      this.dispatchEvent(new CustomEvent('avatar-crop-start', {
+        detail: { imageUrl: resized.dataUrl },
+        bubbles: true,
+        composed: true
+      }));
+    } catch (err) {
+      console.error('Failed to process image:', err);
+      this.shadowRoot.querySelector('grain-toast')?.show('Failed to process image');
+    }
+  }
+
+  async uploadCroppedAvatar(dataUrl) {
+    this._avatarUploading = true;
+
+    try {
+      await mutations.updateAvatar(dataUrl, this.profile);
+      this.shadowRoot.querySelector('grain-toast')?.show('Avatar updated');
+      this.dispatchEvent(new CustomEvent('avatar-updated', {
+        bubbles: true,
+        composed: true
+      }));
+    } catch (err) {
+      console.error('Failed to update avatar:', err);
+      this.shadowRoot.querySelector('grain-toast')?.show('Failed to update avatar');
+    } finally {
+      this._avatarUploading = false;
+    }
   }
 
   async #handleFollowClick() {
···
       };
     } catch (err) {
       console.error('Failed to toggle follow:', err);
-      this.shadowRoot.querySelector('grain-toast').show('Failed to update');
+      this.shadowRoot.querySelector('grain-toast')?.show('Failed to update');
     } finally {
       this._followLoading = false;
     }
···
     return html`
       <div class="top-row">
         <button class="avatar-button" @click=${this.#handleAvatarClick}>
-          <grain-avatar
-            src=${avatarUrl || ''}
-            alt=${handle || ''}
-            size="lg"
-          ></grain-avatar>
+          <div class="avatar-wrapper">
+            <grain-avatar
+              src=${avatarUrl || ''}
+              alt=${handle || ''}
+              size="lg"
+            ></grain-avatar>
+            ${this.#isOwnProfile ? html`
+              <div class="avatar-overlay">
+                <grain-icon name="camera" size="14"></grain-icon>
+              </div>
+            ` : ''}
+            ${this._avatarUploading ? html`
+              <div class="avatar-spinner">
+                <grain-spinner size="24"></grain-spinner>
+              </div>
+            ` : ''}
+          </div>
         </button>
         <div class="right-column">
           <div class="handle-row">
···
           ${this.profile.viewerIsFollowing ? 'Following' : 'Follow'}
         </button>
       ` : ''}
+
+      <input
+        type="file"
+        id="avatar-input"
+        accept="image/png,image/jpeg"
+        @change=${this.#handleAvatarFileChange}
+      />
 
       <grain-toast></grain-toast>
     `;

src/components/pages/grain-profile.js

···
 import '../organisms/grain-profile-header.js';
 import '../organisms/grain-gallery-grid.js';
 import '../molecules/grain-pull-to-refresh.js';
+import '../molecules/grain-avatar-crop.js';
 import '../atoms/grain-spinner.js';
 import '../organisms/grain-action-dialog.js';
 
···
     _error: { state: true },
     _menuOpen: { state: true },
     _menuActions: { state: true },
-    _showAvatarFullscreen: { state: true }
+    _showAvatarFullscreen: { state: true },
+    _showAvatarCrop: { state: true },
+    _cropImageUrl: { state: true }
   };
 
   static styles = css`
···
     this._menuOpen = false;
     this._menuActions = [];
     this._showAvatarFullscreen = false;
+    this._showAvatarCrop = false;
+    this._cropImageUrl = null;
   }
 
   #handleMenuOpen(e) {
···
     this._showAvatarFullscreen = false;
   }
 
+  #handleAvatarCropStart(e) {
+    this._cropImageUrl = e.detail.imageUrl;
+    this._showAvatarCrop = true;
+  }
+
+  #handleCropCancel() {
+    this._showAvatarCrop = false;
+    this._cropImageUrl = null;
+  }
+
+  async #handleCrop(e) {
+    this._showAvatarCrop = false;
+    this._cropImageUrl = null;
+    // Call the profile header's upload method
+    const header = this.shadowRoot.querySelector('grain-profile-header');
+    await header?.uploadCroppedAvatar(e.detail.dataUrl);
+  }
+
   connectedCallback() {
     super.connectedCallback();
     // Check cache first to avoid flash
···
               .profile=${this._profile}
               @menu-open=${this.#handleMenuOpen}
               @avatar-click=${this.#handleAvatarClick}
+              @avatar-crop-start=${this.#handleAvatarCropStart}
+              @avatar-updated=${this.#handleRefresh}
             ></grain-profile-header>
 
             ${this._profile.galleries.length > 0 ? html`
···
         @action=${this.#handleMenuAction}
         @close=${this.#handleMenuClose}
       ></grain-action-dialog>
+
+      <grain-avatar-crop
+        ?open=${this._showAvatarCrop}
+        image-url=${this._cropImageUrl || ''}
+        @crop=${this.#handleCrop}
+        @cancel=${this.#handleCropCancel}
+      ></grain-avatar-crop>
     `;
   }
 }

src/services/grain-api.js

···
               actorHandle
               displayName
               description
+              createdAt
               avatar { url(preset: "avatar") }
               socialGrainGraphFollowByDid {
                 totalCount
···
       handle: profile?.actorHandle || handle,
       displayName: profile?.displayName || '',
       description: profile?.description || '',
+      createdAt: profile?.createdAt || null,
       avatarUrl: profile?.avatar?.url || '',
       did: profile?.did || '',
       galleryCount: galleriesConnection?.totalCount || 0,

src/services/mutations.js

···
       }
     `, { rkey });
   }
+
+  async uploadBlob(base64Data, mimeType = 'image/jpeg') {
+    const client = auth.getClient();
+    const result = await client.mutate(`
+      mutation UploadBlob($data: String!, $mimeType: String!) {
+        uploadBlob(data: $data, mimeType: $mimeType) {
+          ref
+          mimeType
+          size
+        }
+      }
+    `, { data: base64Data, mimeType });
+
+    return result.uploadBlob;
+  }
+
+  async updateAvatar(dataUrl, profile) {
+    const client = auth.getClient();
+
+    // Upload the blob (already resized by crop component)
+    const base64Data = dataUrl.split(',')[1];
+    const blob = await this.uploadBlob(base64Data, 'image/jpeg');
+
+    if (!blob) {
+      throw new Error('Failed to upload avatar');
+    }
+
+    // Build input with all profile fields (update requires full object)
+    const input = {
+      displayName: profile.displayName || null,
+      description: profile.description || null,
+      createdAt: profile.createdAt || new Date().toISOString(),
+      avatar: {
+        $type: 'blob',
+        ref: { $link: blob.ref },
+        mimeType: blob.mimeType,
+        size: blob.size
+      }
+    };
+
+    // Update profile
+    await client.mutate(`
+      mutation UpdateProfile($rkey: String!, $input: SocialGrainActorProfileInput!) {
+        updateSocialGrainActorProfile(rkey: $rkey, input: $input) {
+          uri
+        }
+      }
+    `, { rkey: 'self', input });
+
+    // Refresh user data
+    await auth.refreshUser();
+  }
 }
 
 export const mutations = new MutationsService();