Give Avatar initials, person-mark, and load-error fallbacks so missing photos still look like the design-system atom.

Co-authored-by: Cursor <cursoragent@cursor.com>

stories/asset/Avatar.stories.js

@@ -1,4 +1,9 @@
 import Avatar from "../../app/components/asset/Avatar";
+import {
+  AVATAR_SHAPE_OPTIONS,
+  AVATAR_SIZE_OPTIONS,
+  AVATAR_VARIANT_OPTIONS,
+} from "../../lib/propNormalization";
 
 export default {
   title: "Components/Asset/Avatar",
@@ -8,7 +13,7 @@ export default {
     docs: {
       description: {
         component:
-          "Rounded profile image primitive; stacks with **`AvatarContainer`**. Fuller DS-driven Avatar behavior is **[CR-58](https://linear.app/community-rule/issue/CR-58)**.",
+          "Rounded profile image with initials or a person mark when the image is missing or fails to load. Stack with **AvatarContainer**.",
       },
     },
   },
@@ -21,11 +26,25 @@ export default {
       control: { type: "text" },
       description: "Alt text for accessibility",
     },
+    initials: {
+      control: { type: "text" },
+      description: "Fallback initials when the image is missing or errors",
+    },
     size: {
       control: { type: "select" },
-      options: ["small", "medium", "large", "xlarge"],
+      options: [...AVATAR_SIZE_OPTIONS],
       description: "The size of the avatar",
     },
+    shape: {
+      control: { type: "select" },
+      options: [...AVATAR_SHAPE_OPTIONS],
+      description: "Circle (default) or rounded square",
+    },
+    variant: {
+      control: { type: "select" },
+      options: [...AVATAR_VARIANT_OPTIONS],
+      description: "Fallback chrome: filled cream or outlined yellow",
+    },
     className: {
       control: { type: "text" },
       description: "Additional CSS classes",
@@ -66,6 +85,60 @@ export const Sizes = {
   },
 };
 
+export const InitialsFallback = {
+  args: {
+    alt: "Ada Lovelace",
+    initials: "Ada Lovelace",
+    size: "large",
+  },
+};
+
+export const PersonMarkFallback = {
+  args: {
+    alt: "Community member",
+    size: "large",
+  },
+};
+
+export const OutlinedFallback = {
+  args: {
+    alt: "Ada Lovelace",
+    initials: "AL",
+    size: "large",
+    variant: "outlined",
+  },
+};
+
+export const RoundedSquare = {
+  args: {
+    alt: "Organization",
+    initials: "CR",
+    size: "large",
+    shape: "rounded-square",
+  },
+};
+
+export const BrokenImage = {
+  args: {
+    src: "assets/marketing/missing-avatar.png",
+    alt: "Ada Lovelace",
+    initials: "Ada Lovelace",
+    size: "large",
+  },
+};
+
+export const Clickable = {
+  args: {
+    alt: "Ada Lovelace",
+    initials: "AL",
+    size: "large",
+    onClick: () => {},
+  },
+  argTypes: {
+    onClick: { action: "clicked" },
+  },
+};
+
 export const DifferentAvatars = {
   args: {
     size: "large",