[Web][W1.2] Implement layout, typography, surface, and feedback primitives

Objective

Implement the non-interactive primitive layer using only the approved semantic tokens.

Components

Box/Stack/Inline/Grid, Text/Heading, Surface/Card/Divider, Icon/Image/Avatar, Spinner/Progress/Skeleton, Badge and visually hidden content. Keep the public API minimal and compatible with React Native Web; platform-specific behavior must be explicit.

Acceptance criteria

• Each primitive has typed props, examples, accessibility notes and supported responsive behavior.
• RTL, text scaling, long content, overflow, loading and reduced-motion cases are covered.
• SSR output hydrates without mismatch.
• No application-domain semantics or ad-hoc colors/spacing are embedded.
• Unit, browser, accessibility and screenshot tests pass.

Parent: #7

Required visual evidence

The draft PR must provide a runnable component-gallery route plus before/after screenshots at 390×844, 768×1024, and 1440×900. Cover light, dark, high-contrast, default, hover, focus-visible, disabled, loading, empty, error, and overflow states applicable to the component. Playwright must exercise keyboard interaction and capture deterministic screenshots. A reviewer other than the implementing agent must approve intentional baseline changes; screenshot generation or a passing pixel threshold is not visual approval.

Tembo execution contract

automation:
  eligible: true
  executor_profile: tembo
  readiness: blocked
  primary_repository: TinyChain-Inc/client
  base_branch: main
  writable_scope:
    - web/src/ui/primitives/**
    - web/src/ui/gallery/**
    - web/tests/**
  prerequisites:
    - "#76"
  concurrency_group: ui-foundation-primitives
  required_commands:
    - "cd web && npm ci"
    - "cd web && npm run test:all"
  external_actions: none
  draft_pr_only: true
  completion_authority: human
  visual_validation:
    required: true
    browsers: [chromium]
    viewports: [mobile, tablet, desktop]
    evidence: [component-gallery-url, screenshot-bundle, playwright-report]
    baseline_update_requires: human-visual-approval
    failure_policy: never-auto-accept-diff
  budget:
    size: large
    max_revisions: 3
    max_wall_minutes: 120

Start with prerequisite #76, then inspect web/src/ui/primitives/, web/src/ui/gallery/, and web/tests/**. Run cd web && npm ci followed by cd web && npm run test:all to understand the existing checks. Done means the listed primitives, examples, accessibility and responsive coverage, gallery route, Playwright report, and required screenshot evidence satisfy the acceptance criteria.