merge hyperminimal redesign

Author: Dhawal Ranka

mesh/e2e/authenticated-shell.spec.ts

@@ -273,6 +273,14 @@ async function installAuthenticatedMatrixMock(page: Page): Promise<void> {
           }
         case 'matrix_typing_users':
           return []
+        case 'matrix_room_pins':
+          return {
+            roomId: String(args.roomId),
+            eventIds: [],
+            messages: [],
+            unavailableEventIds: [],
+            canManage: true,
+          }
         case 'matrix_mark_read':
         case 'matrix_set_typing':
         case 'matrix_save_composer_draft':
@@ -423,14 +431,38 @@ test.describe('authenticated desktop shell', () => {
 
     const context = page.getByRole('complementary', { name: 'Room context for general' })
     await expect(context).toBeVisible()
-    await expect(context.getByRole('tab', { name: 'Ledger' })).toHaveAttribute('aria-selected', 'true')
+    const peopleTab = context.getByRole('tab', { name: 'People' })
+    const ledgerTab = context.getByRole('tab', { name: 'Ledger' })
+    const filesTab = context.getByRole('tab', { name: 'Files' })
+    const pinsTab = context.getByRole('tab', { name: 'Pins' })
+    await expect(ledgerTab).toHaveAttribute('aria-selected', 'true')
+    await expect(ledgerTab).toHaveAttribute('tabindex', '0')
+    await expect(peopleTab).toHaveAttribute('tabindex', '-1')
+    await expect(filesTab).toHaveAttribute('tabindex', '-1')
+    await expect(pinsTab).toHaveAttribute('tabindex', '-1')
     await expect(context.getByText('Protected end to end')).toBeVisible()
     await expect(context.getByText('1 need review')).toBeVisible()
     await expect(context.getByText('Ready', { exact: true })).toBeVisible()
 
-    await context.getByRole('tab', { name: 'Pins' }).click()
+    await ledgerTab.focus()
+    await page.keyboard.press('ArrowRight')
+    await expect(filesTab).toBeFocused()
+    await expect(filesTab).toHaveAttribute('aria-selected', 'true')
+    await expect(context.getByRole('tabpanel')).toHaveAttribute(
+      'aria-labelledby',
+      await filesTab.getAttribute('id') ?? '',
+    )
+    await page.keyboard.press('End')
+    await expect(pinsTab).toBeFocused()
+    await expect(pinsTab).toHaveAttribute('aria-selected', 'true')
     await expect(context.getByText('Nothing pinned yet')).toBeVisible()
-    await context.getByRole('tab', { name: 'Files' }).click()
+    await page.keyboard.press('Home')
+    await expect(peopleTab).toBeFocused()
+    await expect(peopleTab).toHaveAttribute('aria-selected', 'true')
+    await page.keyboard.press('ArrowLeft')
+    await expect(pinsTab).toBeFocused()
+    await page.keyboard.press('ArrowLeft')
+    await expect(filesTab).toBeFocused()
     await expect(context.getByText('No files shared yet')).toBeVisible()
 
     await context.getByRole('button', { name: 'Close room context' }).click()
@@ -473,6 +505,27 @@ test.describe('authenticated desktop shell', () => {
     })
   })
 
+  test('hands Security focus back to the persistent User Settings trigger', async ({ page }) => {
+    await openAuthenticatedShell(page)
+
+    const settingsButton = page.getByRole('button', { name: 'User settings' })
+    await settingsButton.click()
+    const settingsDialog = page.getByRole('dialog', { name: 'User Settings' })
+    await expect(settingsDialog).toBeVisible()
+
+    await settingsDialog.getByRole('button', { name: 'Open your devices' }).click()
+    const securityDialog = page.getByRole('dialog', { name: 'Your devices' })
+    await expect(settingsDialog).toHaveCount(0)
+    await expect(securityDialog).toBeVisible()
+    await expect(page.getByRole('dialog')).toHaveCount(1)
+
+    await page.keyboard.press('Escape')
+
+    await expect(securityDialog).toHaveCount(0)
+    await expect(settingsButton).toBeFocused()
+    expect(await page.evaluate(() => document.activeElement === document.body)).toBe(false)
+  })
+
   test('opens community management as an accessible sheet and restores focus', async ({ page }) => {
     await openAuthenticatedShell(page)
 
@@ -567,16 +620,42 @@ test.describe('authenticated desktop shell', () => {
 })
 
 test.describe('authenticated narrow shell', () => {
-  test.use({ viewport: { width: 390, height: 844 } })
+  test.use({ viewport: { width: 390, height: 844 }, hasTouch: true })
 
   test('@a11y has no automated WCAG A/AA violations with navigation open', async ({ page }) => {
     await openAuthenticatedShell(page)
     await page.getByRole('button', { name: 'Open room navigation' }).click()
     await expect(page.getByRole('button', { name: 'Close room navigation' })).toBeVisible()
+    const navigationDrawer = page.locator('#mesh-context-sidebar')
+    await expect(navigationDrawer).toHaveAttribute('aria-modal', 'true')
+    expect(await navigationDrawer.evaluate((drawer) => drawer.contains(document.activeElement))).toBe(true)
+    for (let index = 0; index < 10; index += 1) await page.keyboard.press('Tab')
+    expect(await navigationDrawer.evaluate((drawer) => drawer.contains(document.activeElement))).toBe(true)
 
     await expectNoWcagViolations(page, 'Authenticated narrow shell with room navigation')
   })
 
+  test('closes room navigation with Escape and restores its trigger', async ({ page }) => {
+    await openAuthenticatedShell(page)
+    const drawerButton = page.getByRole('button', { name: 'Open room navigation' })
+    await drawerButton.click()
+    await expect(page.locator('#mesh-context-sidebar')).toHaveAttribute('data-open', 'true')
+
+    await page.keyboard.press('Escape')
+
+    await expect(page.locator('#mesh-context-sidebar')).toHaveAttribute('data-open', 'false')
+    await expect(drawerButton).toBeFocused()
+  })
+
+  test('keeps message actions reachable on touch-only layouts', async ({ page }) => {
+    await openAuthenticatedShell(page)
+    const actions = page.locator('.mesh-message-actions').first()
+
+    await expect(actions).toHaveCSS('opacity', '1')
+    await expect(actions).toHaveCSS('pointer-events', 'auto')
+    await expect(actions.getByRole('button', { name: /React to message/ })).toBeVisible()
+  })
+
   test('opens the room drawer, changes rooms, and sends a message without overflow', async ({ page }) => {
     await openAuthenticatedShell(page)
 
@@ -617,7 +696,20 @@ test.describe('authenticated narrow shell', () => {
     const context = page.getByRole('complementary', { name: 'Room context for general' })
     await expect(context).toBeVisible()
     await expect(page.locator('.mesh-room-context-backdrop')).toBeVisible()
-    await context.getByRole('tab', { name: 'Ledger' }).click()
+    expect(await context.evaluate((panel) => panel.contains(document.activeElement))).toBe(true)
+    for (let index = 0; index < 8; index += 1) await page.keyboard.press('Tab')
+    expect(await context.evaluate((panel) => panel.contains(document.activeElement))).toBe(true)
+    const ledgerTab = context.getByRole('tab', { name: 'Ledger' })
+    const peopleTab = context.getByRole('tab', { name: 'People' })
+    const pinsTab = context.getByRole('tab', { name: 'Pins' })
+    await ledgerTab.focus()
+    await page.keyboard.press('ArrowLeft')
+    await expect(peopleTab).toBeFocused()
+    await page.keyboard.press('ArrowLeft')
+    await expect(pinsTab).toBeFocused()
+    await page.keyboard.press('Home')
+    await expect(peopleTab).toBeFocused()
+    await ledgerTab.click()
     await expect(context.getByText('Protected end to end')).toBeVisible()
     await expectNoWcagViolations(page, 'Authenticated narrow room context drawer')
 
@@ -643,6 +735,28 @@ test.describe('authenticated narrow shell', () => {
     await expect(dialog).toHaveCount(0)
   })
 
+  test('hands narrow Security focus back to the persistent User Settings trigger', async ({ page }) => {
+    await openAuthenticatedShell(page)
+
+    await page.getByRole('button', { name: 'Open room navigation' }).click()
+    const settingsButton = page.getByRole('button', { name: 'User settings' })
+    await settingsButton.click()
+    const settingsDialog = page.getByRole('dialog', { name: 'User Settings' })
+    await expect(settingsDialog).toBeVisible()
+
+    await settingsDialog.getByRole('button', { name: 'Open your devices' }).click()
+    const securityDialog = page.getByRole('dialog', { name: 'Your devices' })
+    await expect(settingsDialog).toHaveCount(0)
+    await expect(securityDialog).toBeVisible()
+    await expect(page.getByRole('dialog')).toHaveCount(1)
+
+    await page.keyboard.press('Escape')
+
+    await expect(securityDialog).toHaveCount(0)
+    await expect(settingsButton).toBeFocused()
+    expect(await page.evaluate(() => document.activeElement === document.body)).toBe(false)
+  })
+
   test('fits community management to the viewport and restores its drawer trigger', async ({ page }) => {
     await openAuthenticatedShell(page)
 

mesh/e2e/design-system.spec.ts

@@ -3,6 +3,23 @@ import { expectNoWcagViolations } from './helpers/accessibility'
 
 const runtimeErrors = new WeakMap<Page, string[]>()
 
+function relativeLuminance(hex: string): number {
+  const channels = [1, 3, 5].map((index) => Number.parseInt(hex.slice(index, index + 2), 16) / 255)
+  const [red, green, blue] = channels.map((channel) =>
+    channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4,
+  )
+  return (0.2126 * red) + (0.7152 * green) + (0.0722 * blue)
+}
+
+function contrastRatio(foreground: string, background: string): number {
+  const foregroundLuminance = relativeLuminance(foreground)
+  const backgroundLuminance = relativeLuminance(background)
+  return (
+    (Math.max(foregroundLuminance, backgroundLuminance) + 0.05)
+    / (Math.min(foregroundLuminance, backgroundLuminance) + 0.05)
+  )
+}
+
 async function sampleAmbientMotion(page: Page): Promise<string[]> {
   const probe = page.locator('[data-ambient-motion-probe]')
   await expect(probe).toBeAttached()
@@ -56,6 +73,46 @@ test('renders every supported theme and exposes keyboard-operable primitives', a
   await expect(page.getByRole('tabpanel').getByText('Detail content')).toBeVisible()
 })
 
+test('keeps semantic foregrounds and focus indicators contrast-safe in light theme', async ({ page }) => {
+  const lightTheme = page.locator('section[data-theme="light"]')
+  const tokens = await lightTheme.evaluate((element) => {
+    const styles = getComputedStyle(element)
+    const value = (name: string) => styles.getPropertyValue(name).trim()
+    return {
+      canvas: value('--surface-canvas'),
+      accent: value('--content-accent'),
+      link: value('--content-link'),
+      focus: value('--border-focus'),
+      success: value('--status-success'),
+      warning: value('--status-warning'),
+      avatar: value('--avatar-sand'),
+      onAvatar: value('--content-on-avatar'),
+    }
+  })
+
+  expect(contrastRatio(tokens.accent, tokens.canvas)).toBeGreaterThanOrEqual(4.5)
+  expect(contrastRatio(tokens.link, tokens.canvas)).toBeGreaterThanOrEqual(4.5)
+  expect(contrastRatio(tokens.success, tokens.canvas)).toBeGreaterThanOrEqual(4.5)
+  expect(contrastRatio(tokens.warning, tokens.canvas)).toBeGreaterThanOrEqual(4.5)
+  expect(contrastRatio(tokens.focus, tokens.canvas)).toBeGreaterThanOrEqual(3)
+  expect(contrastRatio(tokens.onAvatar, tokens.avatar)).toBeGreaterThanOrEqual(4.5)
+})
+
+test('renders the command palette as one compact surface', async ({ page }) => {
+  await page.getByRole('button', { name: /Commands/ }).click()
+
+  const dialog = page.getByRole('dialog', { name: 'Command palette' })
+  const input = dialog.getByRole('combobox', { name: 'Command palette' })
+  const listbox = dialog.getByRole('listbox')
+  await expect(dialog).toBeVisible()
+  await expect(input).toBeFocused()
+  await expect(listbox).toBeVisible()
+  await expect(dialog).toHaveCSS('padding', '0px')
+  await expect(input).toHaveCSS('border-top-width', '0px')
+  await expect(listbox).toHaveCSS('position', 'static')
+  await expect(listbox).toHaveCSS('box-shadow', 'none')
+})
+
 test('runs ambient motion when the operating system allows it', async ({ page }) => {
   await page.emulateMedia({ reducedMotion: 'no-preference' })
   await page.reload()

mesh/e2e/matrix-messaging.spec.ts

@@ -456,8 +456,15 @@ test.describe('Matrix direct messaging and encrypted attachments', () => {
     await expect(page.getByText('Message backup')).toBeVisible()
 
     await page.getByRole('button', { name: 'Review devices and backup' }).click()
-    await expect(page.getByRole('dialog', { name: 'Your devices' })).toBeVisible()
+    const securityDialog = page.getByRole('dialog', { name: 'Your devices' })
+    await expect(securityDialog).toBeVisible()
+    await expect(page.getByRole('dialog')).toHaveCount(1)
     await expect(page.getByText('Message backup is ready')).toBeVisible()
+
+    await page.keyboard.press('Escape')
+    await expect(securityDialog).toHaveCount(0)
+    await expect(trustSummary).toBeFocused()
+    expect(await page.evaluate(() => document.activeElement === document.body)).toBe(false)
   })
 
   test('sends DM text through the dedicated Matrix direct-message command', async ({ page }) => {

mesh/e2e/onboarding-accessibility.spec.ts

@@ -36,12 +36,29 @@ test('@a11y has no automated WCAG A/AA violations on account creation', async ({
 
 test('@a11y has no automated WCAG A/AA violations on sign in', async ({ page }) => {
   await page.getByRole('button', { name: 'Sign in', exact: true }).click()
-  await expect(page.getByRole('heading', { name: 'Sign in somewhere else' })).toBeVisible()
+  const signInHeading = page.getByRole('heading', { name: 'Sign in somewhere else' })
+  await expect(signInHeading).toBeVisible()
   await waitForAccountScreenMotion(page)
+  await expect(signInHeading).toBeFocused()
 
   await expectNoWcagViolations(page, 'Sign In screen')
 })
 
+test('keeps the primary account actions visible at a compact desktop height', async ({ page }) => {
+  await page.setViewportSize({ width: 1280, height: 720 })
+
+  const createAccount = page.getByRole('button', { name: 'Create account' })
+  const signIn = page.getByRole('button', { name: 'Sign in', exact: true })
+  await expect(createAccount).toBeVisible()
+  await expect(signIn).toBeVisible()
+
+  const createBounds = await createAccount.boundingBox()
+  const signInBounds = await signIn.boundingBox()
+  expect((createBounds?.y ?? 720) + (createBounds?.height ?? 0)).toBeLessThanOrEqual(720)
+  expect((signInBounds?.y ?? 720) + (signInBounds?.height ?? 0)).toBeLessThanOrEqual(720)
+  expect(await page.locator('main').evaluate((element) => element.scrollHeight <= element.clientHeight)).toBe(true)
+})
+
 test('keeps trust context and account setup usable in a narrow window', async ({ page }) => {
   await page.setViewportSize({ width: 390, height: 844 })
 
@@ -57,3 +74,20 @@ test('keeps trust context and account setup usable in a narrow window', async ({
   expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(390)
   await expectNoWcagViolations(page, 'Narrow account setup')
 })
+
+test('keeps the onboarding masthead compact at tablet widths', async ({ page }) => {
+  await page.setViewportSize({ width: 768, height: 1024 })
+  await page.reload()
+
+  const shell = page.locator('[data-onboarding-shell]')
+  const masthead = shell.locator('aside')
+  await expect(shell).toBeVisible()
+  await expect(masthead).toBeVisible()
+
+  const dimensions = await masthead.evaluate((element) => ({
+    width: element.getBoundingClientRect().width,
+    height: element.getBoundingClientRect().height,
+  }))
+  expect(dimensions.width).toBeLessThanOrEqual(768)
+  expect(dimensions.height).toBeLessThan(240)
+})

mesh/scripts/check-design-tokens.mjs

@@ -69,6 +69,10 @@ const visualPatterns = [
     kind: 'box-shadow focus ring',
     expression: /\bfocus(?:-visible)?:ring(?:-[^\s'"]+)?/gi,
   },
+  {
+    kind: 'stock elevation class',
+    expression: /\bshadow-(?:sm|md|lg|xl|2xl)\b/gi,
+  },
 ]
 
 function visualViolations(source) {
@@ -95,11 +99,11 @@ function undersizedControlTokens(source) {
 
 // Keep self-tests here so weakening either detector cannot silently pass.
 const detectorFixture = "colors: { bad: '#fff', worse: 'rgb(1 2 3)', alsoBad: 'oklch(50% 0.1 240)' }"
-const componentFixture = 'bg-[#fff] text-[11px] border-white/10 bg-yellow-500/10 font-bold text-xl var(--ref-neutral-1) oklch(50% 0.1 240) focus-visible:ring-2'
+const componentFixture = 'bg-[#fff] text-[11px] border-white/10 bg-yellow-500/10 font-bold text-xl var(--ref-neutral-1) oklch(50% 0.1 240) focus-visible:ring-2 shadow-lg'
 const densityFixture = '--density-control-sm: 28px; --density-control-md: 32px;'
 if (
   literalColorViolations(detectorFixture).length !== 3
-  || visualViolations(componentFixture).length !== 10
+  || visualViolations(componentFixture).length !== 11
   || undersizedControlTokens(densityFixture).length !== 1
 ) {
   throw new Error('Design-token checker self-test failed')
@@ -120,25 +124,25 @@ for (const match of rootBlock.matchAll(/^\s*(--[\w-]+)\s*:\s*([^;]+);/gm)) {
 }
 
 const expectedReferenceColors = new Map([
-  ['--ref-neutral-1', '#101013'],
-  ['--ref-neutral-2', '#17181c'],
-  ['--ref-neutral-3', '#202127'],
-  ['--ref-neutral-4', '#27292f'],
-  ['--ref-neutral-5', '#2e3037'],
-  ['--ref-neutral-6', '#373941'],
-  ['--ref-neutral-7', '#454751'],
-  ['--ref-neutral-8', '#5d606b'],
-  ['--ref-neutral-9', '#6b6e79'],
-  ['--ref-neutral-10', '#797b86'],
-  ['--ref-neutral-11', '#b2b4bb'],
-  ['--ref-neutral-12', '#edeef2'],
-  ['--ref-accent-9', '#c19f66'],
-  ['--ref-accent-10', '#cfaf79'],
-  ['--ref-accent-11', '#e3c697'],
-  ['--ref-green-11', '#57bd72'],
-  ['--ref-red-11', '#ed756e'],
-  ['--ref-amber-11', '#edb345'],
-  ['--ref-blue-11', '#52b5f4'],
+  ['--ref-neutral-1', '#101113'],
+  ['--ref-neutral-2', '#1b1c1f'],
+  ['--ref-neutral-3', '#202125'],
+  ['--ref-neutral-4', '#27292e'],
+  ['--ref-neutral-5', '#2e3036'],
+  ['--ref-neutral-6', '#383a40'],
+  ['--ref-neutral-7', '#4a4d54'],
+  ['--ref-neutral-8', '#5a5e65'],
+  ['--ref-neutral-9', '#71757c'],
+  ['--ref-neutral-10', '#9fa3aa'],
+  ['--ref-neutral-11', '#c6c8cc'],
+  ['--ref-neutral-12', '#f0f1f2'],
+  ['--ref-accent-9', '#d4c0a1'],
+  ['--ref-accent-10', '#e3d4bb'],
+  ['--ref-accent-11', '#f1e8db'],
+  ['--ref-green-11', '#3dbe72'],
+  ['--ref-red-11', '#f06a73'],
+  ['--ref-amber-11', '#f0b232'],
+  ['--ref-blue-11', '#6fafff'],
 ])
 
 for (const [name, expected] of expectedReferenceColors) {

mesh/src/App.tsx

@@ -314,7 +314,7 @@ export default function App() {
 
   if (isLoading && !showOnboarding) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-bg-primary">
+      <div className="flex min-h-screen items-center justify-center bg-surface-canvas">
         <div className="flex flex-col items-center gap-3">
           <Spinner size={24} />
           <p className="text-sm text-muted">Loading...</p>