Sheet, ErrorBanner, Skeleton and EmptyState (#36)

Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com>
Co-committed-by: dev_agent <dev_agent@cubecraftlabs.com>

web/src/ui/Skeleton.test.tsx

@@ -0,0 +1,36 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { animationKeyframes, declaredStyle, reducedMotionStyle } from '../test/cssRules.ts'
+import { Skeleton } from './Skeleton.tsx'
+
+function skeleton(container: HTMLElement) {
+  return container.firstElementChild as HTMLElement
+}
+
+describe('Skeleton', () => {
+  it('is a hidden pill in --color-surface', () => {
+    const { container } = render(<Skeleton />)
+    const element = skeleton(container)
+    expect(element).toHaveAttribute('aria-hidden', 'true')
+    const style = declaredStyle(element)
+    expect(style.borderRadius).toBe('var(--radius-pill)')
+    expect(style.background).toBe('var(--color-surface)')
+  })
+
+  it('pulses its opacity over 1.2 s', () => {
+    const { container } = render(<Skeleton />)
+    expect(declaredStyle(skeleton(container)).animation.split(' ').slice(1)).toEqual(['1.2s', 'ease-in-out', 'infinite'])
+    expect(animationKeyframes(skeleton(container)).findRule('50%')?.style.opacity).toBe('0.45')
+  })
+
+  it('does not pulse under reduced motion', () => {
+    const { container } = render(<Skeleton />)
+    expect(reducedMotionStyle(skeleton(container)).animation).toBe('none')
+  })
+
+  it('merges a caller className and forwards style', () => {
+    const { container } = render(<Skeleton className="line" style={{ width: '60%' }} />)
+    expect(skeleton(container)).toHaveClass('line')
+    expect(skeleton(container).style.width).toBe('60%')
+  })
+})