Enhance ImageField (#152)

AGENTS.md

@@ -186,7 +186,7 @@ const sizeMap: Record<SAILSize, string> = {
 
 ## Validation
 
-Run `npm run build` to catch TypeScript errors before considering work complete.
+Run `pnpm run build` to catch TypeScript errors before considering work complete.
 
 ## Resources
 

package.json

@@ -47,6 +47,7 @@
     "generate:css": "tsx scripts/generate-css.ts",
     "build:theme": "tsx scripts/generate-theme.ts",
     "token-server": "tsx scripts/token-server.ts",
+    "typecheck": "tsc --noEmit",
     "lint": "eslint .",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",

scripts/README.md

@@ -60,7 +60,7 @@ Lightweight Playwright scripts for checking pages without the MCP server overhea
 Install Playwright (if not already installed):
 
 ```bash
-npm install -D playwright
+pnpm install -D playwright
 npx playwright install chromium
 ```
 
@@ -70,13 +70,13 @@ npx playwright install chromium
 
 ```bash
 # Check default (http://localhost:5173)
-npm run check-page
+pnpm run check-page
 
 # Check specific URL
-npm run check-page http://localhost:5173/customerdashboard
+pnpm run check-page http://localhost:5173/customerdashboard
 
 # Check with custom screenshot name
-npm run check-page http://localhost:5173/publications screenshots/publications.png
+pnpm run check-page http://localhost:5173/publications screenshots/publications.png
 ```
 
 **Output:** 
@@ -88,10 +88,10 @@ npm run check-page http://localhost:5173/publications screenshots/publications.p
 
 ```bash
 # Full check with all diagnostics
-npm run check-page:full
+pnpm run check-page:full
 
 # Full check specific URL
-npm run check-page:full http://localhost:5173/patterns/taskdashboard
+pnpm run check-page:full http://localhost:5173/patterns/taskdashboard
 ```
 
 **Output:**
@@ -214,7 +214,7 @@ Runs axe-core against every story in a running Storybook instance to find access
 
 ```bash
 # Requires Storybook running (default: http://localhost:6006)
-npm run a11y-audit
+pnpm run a11y-audit
 
 # Or specify a custom URL
 node scripts/a11y-audit.cjs http://localhost:9009

scripts/visual-check.cjs

@@ -4,9 +4,9 @@
  * Usage:
  *   node scripts/visual-check.js '{"url": "http://localhost:5173", "checks": {...}}'
  * 
- * Or use npm scripts:
- *   npm run check-page
- *   npm run check-page:full
+ * Or use pnpm scripts:
+ *   pnpm run check-page
+ *   pnpm run check-page:full
  */
 
 const { chromium } = require('playwright');

src/components/Image/Image.stories.tsx

@@ -127,3 +127,102 @@ export const UserDefaultIconFallback: Story = {
     size: 'SMALL',
   },
 }
+
+// --- Issue #113: Custom background colors for avatar fallback ---
+
+export const UserInitialsWithColors: Story = {
+  name: 'Avatar with SAIL Color Backgrounds',
+  args: {
+    label: 'Team Members',
+    images: [
+      { imageType: 'user' as const, user: { name: 'Jane Doe', initials: 'JD' }, backgroundColor: 'ACCENT' },
+      { imageType: 'user' as const, user: { name: 'Bob Johnson', initials: 'BJ' }, backgroundColor: 'POSITIVE' },
+      { imageType: 'user' as const, user: { name: 'Alice Williams', initials: 'AW' }, backgroundColor: 'NEGATIVE' },
+      { imageType: 'user' as const, user: { name: 'Tom Chen', initials: 'TC' }, backgroundColor: 'TEAL_200' },
+      { imageType: 'user' as const, user: { name: 'Sarah Park', initials: 'SP' }, backgroundColor: 'PURPLE_200' },
+      { imageType: 'user' as const, user: { name: 'Mike Lee', initials: 'ML' }, backgroundColor: '#E8A87C' },
+    ],
+    style: 'AVATAR',
+    size: 'TINY',
+  },
+}
+
+// --- Issue #121: WebImage support ---
+
+export const WebImage: Story = {
+  name: 'Web Image (External URL)',
+  args: {
+    label: 'External Images',
+    instructions: 'Images loaded from external URLs using a!webImage()',
+    images: [
+      {
+        source: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400&h=300&fit=crop',
+        altText: 'Mountain landscape',
+        caption: 'Beautiful mountain view',
+      },
+      {
+        source: 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=400&h=300&fit=crop',
+        altText: 'Nature scene',
+        caption: 'Peaceful nature',
+      },
+    ],
+    size: 'MEDIUM_PLUS',
+  },
+}
+
+export const WebImageAvatar: Story = {
+  name: 'Web Image as Avatar',
+  args: {
+    labelPosition: 'COLLAPSED',
+    images: [
+      {
+        source: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop&crop=face',
+        altText: 'User avatar from web',
+      },
+    ],
+    style: 'AVATAR',
+    size: 'SMALL_PLUS',
+  },
+}
+
+// --- Issue #126: Shape/borderRadius prop ---
+
+export const ShapeSquared: Story = {
+  name: 'Shape: SQUARED',
+  args: {
+    label: 'Squared Images',
+    images: [
+      { document: 'images/case-management-studio.webp', altText: 'Case management' },
+      { document: 'images/process-modeler.webp', altText: 'Process modeler' },
+    ],
+    size: 'MEDIUM',
+    shape: 'SQUARED',
+  },
+}
+
+export const ShapeRounded: Story = {
+  name: 'Shape: ROUNDED',
+  args: {
+    label: 'Rounded Images',
+    images: [
+      { document: 'images/case-management-studio.webp', altText: 'Case management' },
+      { document: 'images/process-modeler.webp', altText: 'Process modeler' },
+    ],
+    size: 'MEDIUM',
+    shape: 'ROUNDED',
+  },
+}
+
+export const ShapeCircle: Story = {
+  name: 'Shape: CIRCLE',
+  args: {
+    label: 'Circle Images',
+    instructions: 'Circular crop without using avatar style',
+    images: [
+      { document: 'images/case-management-studio.webp', altText: 'Case management' },
+      { document: 'images/process-modeler.webp', altText: 'Process modeler' },
+    ],
+    size: 'SMALL_PLUS',
+    shape: 'CIRCLE',
+  },
+}