@titan-design/react-ui 0.9.3 → 0.11.0

package/src/components/custom/charts/live-rep-growth.ts

@@ -0,0 +1,91 @@
+// The newest-rep grow-from-bottom entrance, shared by SetBarChart (hero / dual / ROM)
+// and VelocityStrip's framed + bare expanded charts. Promoted out of VelocityStrip so
+// every value-height bar family animates the live rep identically instead of re-rolling
+// the hook.
+import { useEffect, useState } from 'react'
+import { Animated, Easing } from 'react-native'
+
+const ANIMATION_EASING = Easing.bezier(0.22, 1, 0.36, 1)
+
+/**
+ * Growth-factor overshoot for a new-peak bar: it grows past its full height then
+ * settles back to 1 (a small bounce), rather than the plain 0→1 grow every other
+ * bar gets. Modest (12%) since it stretches actual bar HEIGHT, not a uniform scale
+ * — a large overshoot here reads as a much bigger jump than the same factor did
+ * against the old whole-bar scale pop.
+ */
+const PEAK_OVERSHOOT = 1.12
+
+function getReducedMotionPreference(): boolean {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
+/** Track the OS "reduce motion" preference; falls back to `false` (jsdom/SSR). */
+export function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(getReducedMotionPreference)
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const handler = () => setReduced(mq.matches)
+    handler()
+    mq.addEventListener?.('change', handler)
+    return () => mq.removeEventListener?.('change', handler)
+  }, [])
+  return reduced
+}
+
+/**
+ * The newest-rep entrance shared by SetBarChart and the framed / bare `expanded` charts:
+ * the bar GROWS UP FROM THE BASELINE (0 → full height), reading as though it's tracking
+ * the rep as it lands. A new set peak overshoots past full height then settles (a small
+ * bounce) instead of the plain grow. Honors reduced motion (jumps straight to full
+ * height, no animation). Returns a 0→1(+overshoot) growth-factor `Animated.Value`;
+ * callers interpolate it against their own target height. Inert while `active` is
+ * false or no live rep is present.
+ */
+export function useLiveRepGrowth(
+  active: boolean,
+  liveRepIndex: number | undefined,
+  liveVelocity: number | undefined,
+  isNewPeak: boolean
+): Animated.Value {
+  const prefersReducedMotion = usePrefersReducedMotion()
+  const [liveGrowth] = useState(() => new Animated.Value(1))
+  useEffect(() => {
+    if (!active || liveRepIndex == null || liveVelocity == null) return
+    if (prefersReducedMotion) {
+      liveGrowth.setValue(1)
+      return
+    }
+    liveGrowth.setValue(0)
+    if (isNewPeak) {
+      Animated.sequence([
+        Animated.timing(liveGrowth, {
+          toValue: PEAK_OVERSHOOT,
+          duration: 220,
+          easing: Easing.out(Easing.quad),
+          useNativeDriver: false,
+        }),
+        Animated.spring(liveGrowth, {
+          toValue: 1,
+          friction: 5,
+          tension: 140,
+          useNativeDriver: false,
+        }),
+      ]).start()
+    } else {
+      // Plain entrance: a clean ease-out grow with no overshoot (ANIMATION_EASING has
+      // no control point above y=1) — it reads as tracking the rep, not bouncing.
+      Animated.timing(liveGrowth, {
+        toValue: 1,
+        duration: 300,
+        easing: ANIMATION_EASING,
+        useNativeDriver: false,
+      }).start()
+    }
+  }, [active, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveGrowth])
+  return liveGrowth
+}
+
+export { ANIMATION_EASING }

package/src/components/custom/index.ts

@@ -9,6 +9,7 @@ export * from './TimerReadout'
 export * from './CircularTimer'
 export * from './Metric'
 export * from './Workout'
+export * from './Fatigue'
 export * from './Treemap'
 export * from './Scatter'
 export * from './Gauge'

package/src/components/ui/surface/Surface.stories.tsx

@@ -15,9 +15,13 @@ const meta: Meta<typeof Surface> = {
     },
     level: {
       control: 'select',
-      options: ['background', 'base', 'elevated', 'raised', 'overlay'],
+      options: ['inset', 'background', 'base', 'elevated', 'raised', 'overlay'],
       description: 'Named charcoal plane (flat background from a semantic token)',
     },
+    pressed: {
+      control: 'boolean',
+      description: 'Sunken well: one ramp step DOWN from the parent level + inner-shadow recess',
+    },
     theme: {
       control: 'select',
       options: ['light', 'dark'],
@@ -99,6 +103,62 @@ export const NamedPlanes: Story = {
   ),
 }
 
+// The pressed (sunken well) model: a `<Surface pressed>` renders ONE ramp step
+// DOWN from its parent's level — the symmetric twin of a raised surface stepping
+// up — plus an inner-shadow recess. It's RELATIVE: the same `pressed` well reads
+// as a consistent recess on every host plane (base → background, raised →
+// elevated, overlay → raised), not a single fixed black hole. It clamps at the
+// `inset` floor so a well in `background` bottoms out at the ramp's pit.
+function WellCard({ level }: { level: SurfaceLevel }) {
+  return (
+    <Surface level={level} style={{ padding: 16, gap: 12, flex: 1, borderRadius: 14 }}>
+      <Eyebrow>HOST · LEVEL = {level.toUpperCase()}</Eyebrow>
+      <Surface pressed style={{ padding: 16, gap: 4 }}>
+        <Eyebrow>PRESSED WELL</Eyebrow>
+        <OnSurfaceBody title="Sunken panel" sub="one step down + inner recess" />
+      </Surface>
+    </Surface>
+  )
+}
+
+export const PressedWells: Story = {
+  render: () => (
+    <Surface level="background" style={{ flexDirection: 'row', gap: 16, padding: 24 }}>
+      {(['base', 'raised', 'overlay'] as SurfaceLevel[]).map((level) => (
+        <WellCard key={level} level={level} />
+      ))}
+    </Surface>
+  ),
+}
+
+// Clamp + nesting — a well in `background` bottoms out at the inset floor
+// (#13100D), and pressing again inside it stays at the floor (no underflow),
+// while a well in a lighter plane still steps down normally.
+export const PressedClampAndNesting: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 16, padding: 24 }}>
+      <Surface level="background" style={{ padding: 16, gap: 12, flex: 1, borderRadius: 14 }}>
+        <Eyebrow>HOST · LEVEL = BACKGROUND</Eyebrow>
+        <Surface pressed style={{ padding: 16, gap: 10 }}>
+          <Eyebrow>PRESSED → INSET FLOOR</Eyebrow>
+          <Surface pressed style={{ padding: 12 }}>
+            <Eyebrow>PRESSED AGAIN → CLAMPED</Eyebrow>
+          </Surface>
+        </Surface>
+      </Surface>
+      <Surface level="raised" style={{ padding: 16, gap: 12, flex: 1, borderRadius: 14 }}>
+        <Eyebrow>HOST · LEVEL = RAISED</Eyebrow>
+        <Surface pressed style={{ padding: 16, gap: 10 }}>
+          <Eyebrow>PRESSED → ELEVATED</Eyebrow>
+          <Surface pressed style={{ padding: 12 }}>
+            <Eyebrow>PRESSED AGAIN → BASE</Eyebrow>
+          </Surface>
+        </Surface>
+      </Surface>
+    </View>
+  ),
+}
+
 // On-surface colour context: descendant text reads its colour from the Surface
 // via `useOnSurfaceColor` — no hard-coded hex, so it never renders black when the
 // tree mounts as raw RN in the standalone wall SPA.
@@ -138,3 +198,137 @@ export const LightTheme: Story = {
     </View>
   ),
 }
+
+// ===========================================================================
+// The Surface WORK — composition, context inheritance, and the real wall lockup.
+// The stories above exercise the primitive in isolation; these show it doing the
+// job it was built for (TD-05.12): stacking planes, propagating the on-surface
+// colour context, and backing the migrated shell / rail / stage.
+// ===========================================================================
+
+/** An all-caps eyebrow whose colour resolves on whatever Surface encloses it. */
+function Eyebrow({ children }: { children: string }) {
+  return (
+    <Text
+      style={{
+        color: useOnSurfaceColor('tertiary'),
+        fontSize: 10,
+        fontWeight: '700',
+        letterSpacing: 1,
+      }}
+    >
+      {children}
+    </Text>
+  )
+}
+
+/** Primary + secondary body text, both on-surface — no hard-coded hex. */
+function OnSurfaceBody({ title, sub }: { title: string; sub: string }) {
+  return (
+    <View style={{ gap: 2 }}>
+      <Text style={{ color: useOnSurfaceColor('primary'), fontSize: 14, fontWeight: '600' }}>
+        {title}
+      </Text>
+      <Text style={{ color: useOnSurfaceColor('secondary'), fontSize: 12 }}>{sub}</Text>
+    </View>
+  )
+}
+
+// Nesting + context inheritance — the core mechanic. Each Surface publishes its
+// level; the planes read darkest → lightest as they nest (background < base <
+// elevated < raised). The labels call `useOnSurfaceColor` and stay legible on
+// every plane WITHOUT a hard-coded hex — on-surface text resolves from the mode,
+// so one set of roles reads correctly across all the dark planes.
+export const NestedPlanes: Story = {
+  render: () => (
+    <Surface level="background" style={{ padding: 20, gap: 14 }}>
+      <Eyebrow>LEVEL = BACKGROUND</Eyebrow>
+      <Surface level="base" style={{ padding: 16, gap: 14, borderRadius: 14 }}>
+        <Eyebrow>LEVEL = BASE</Eyebrow>
+        <Surface level="elevated" style={{ padding: 16, gap: 14, borderRadius: 12 }}>
+          <Eyebrow>LEVEL = ELEVATED</Eyebrow>
+          <Surface level="raised" style={{ padding: 16, gap: 6, borderRadius: 10 }}>
+            <Eyebrow>LEVEL = RAISED</Eyebrow>
+            <OnSurfaceBody title="On-surface text" sub="resolves from the enclosing Surface" />
+          </Surface>
+        </Surface>
+      </Surface>
+    </Surface>
+  ),
+}
+
+// Theme inheritance — a Surface seeds the mode; the nested Surfaces and text with
+// NO explicit `theme` inherit it. The SAME subtree renders on both grounds and
+// stays legible, because on-surface colours resolve from the inherited mode
+// rather than a fixed hex. (A numeric `elevation` Surface inherits mode too.)
+function InheritingCard() {
+  return (
+    <Surface level="base" style={{ padding: 14, gap: 10, borderRadius: 12 }}>
+      <OnSurfaceBody title="Inherited mode" sub="no theme prop on this card" />
+      <Surface level="raised" style={{ padding: 12, borderRadius: 8 }}>
+        <Eyebrow>NESTED · STILL INHERITS</Eyebrow>
+      </Surface>
+    </Surface>
+  )
+}
+
+export const ThemeInheritance: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 16, padding: 24 }}>
+      <Surface theme="dark" level="background" style={{ padding: 16, gap: 10, flex: 1 }}>
+        <Eyebrow>THEME = DARK (SEEDS CONTEXT)</Eyebrow>
+        <InheritingCard />
+      </Surface>
+      <Surface theme="light" level="background" style={{ padding: 16, gap: 10, flex: 1 }}>
+        <Eyebrow>THEME = LIGHT (SEEDS CONTEXT)</Eyebrow>
+        <InheritingCard />
+      </Surface>
+    </View>
+  ),
+}
+
+// The wall lockup, as migrated (DashboardShell / SessionRail / stage). The shell
+// is a `background` plane; the page a `base` plane; the session rail an
+// `elevated` inset; the live stage a `raised` panel. Every eyebrow/label reads
+// on-surface — this composition is what replaced the inline `getSemanticColors`
+// text patches the standalone wall SPA used to carry.
+function RailRow({ name, sets }: { name: string; sets: string }) {
+  return (
+    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+      <Text style={{ color: useOnSurfaceColor('primary'), fontSize: 13 }}>{name}</Text>
+      <Text style={{ color: useOnSurfaceColor('tertiary'), fontSize: 13 }}>{sets}</Text>
+    </View>
+  )
+}
+
+export const WallLockup: Story = {
+  render: () => (
+    <Surface level="background" style={{ flexDirection: 'row', height: 320, padding: 12, gap: 12 }}>
+      {/* left nav — flush to the shell edge, on the same background plane */}
+      <View style={{ width: 56, alignItems: 'center', paddingTop: 10 }}>
+        <Eyebrow>NAV</Eyebrow>
+      </View>
+      {/* page — a base plane holding the rail + stage */}
+      <Surface
+        level="base"
+        style={{ flex: 1, flexDirection: 'row', padding: 12, gap: 12, borderRadius: 14 }}
+      >
+        {/* session rail — an elevated inset */}
+        <Surface level="elevated" style={{ width: 150, padding: 12, gap: 10, borderRadius: 12 }}>
+          <Eyebrow>SESSION</Eyebrow>
+          <RailRow name="Bench" sets="3/3" />
+          <RailRow name="Cable Row" sets="1/3" />
+          <RailRow name="Curl" sets="0/3" />
+        </Surface>
+        {/* live stage — a raised panel */}
+        <Surface
+          level="raised"
+          style={{ flex: 1, padding: 16, gap: 6, justifyContent: 'center', borderRadius: 12 }}
+        >
+          <Eyebrow>LIVE</Eyebrow>
+          <OnSurfaceBody title="Seated Cable Row" sub="set 2 · 8 reps · 0.42 m/s" />
+        </Surface>
+      </Surface>
+    </Surface>
+  ),
+}

package/src/components/ui/surface/Surface.test.tsx

@@ -6,9 +6,12 @@ import { Surface } from './Surface'
 import {
   onSurfaceColors,
   surfaceBackground,
+  pressedLevel,
   useOnSurfaceColor,
+  useSurface,
   useSurfaceMode,
 } from './SurfaceContext'
+import { getPressedRecessShadow } from '../../../theme/elevation'
 
 // A descendant probe that renders the on-surface colour + mode it resolves from
 // context, so tests can assert what a nested consumer would actually paint.
@@ -70,8 +73,9 @@ describe('Surface (card model)', () => {
 
   it('paints the default flat dark card surface', () => {
     render(<Surface testID="s" />)
-    // elevation 0 → base surface (surface-elevated, charcoal 600) with no lightening.
-    expect(screen.getByTestId('s')).toHaveStyle({ backgroundColor: '#191919' })
+    // elevation 0 → base surface (surface-elevated) with no lightening.
+    // TD-surface-tokens S-3 re-space: was #2A2827.
+    expect(screen.getByTestId('s')).toHaveStyle({ backgroundColor: '#2C2A28' })
   })
 
   describe('accessibility', () => {
@@ -89,11 +93,11 @@ describe('Surface (card model)', () => {
 
 describe('Surface (named plane)', () => {
   it.each([
-    ['background', '#101010'],
-    ['base', '#161616'],
-    ['elevated', '#191919'],
-    ['raised', '#1C1C1C'],
-  ] as const)('maps level %s to the charcoal token %s', (level, hex) => {
+    ['background', '#1C1916'],
+    ['base', '#252321'],
+    ['elevated', '#2C2A28'],
+    ['raised', '#31302F'],
+  ] as const)('maps level %s to the surface-ramp token %s', (level, hex) => {
     render(<Surface level={level} testID="s" />)
     expect(screen.getByTestId('s')).toHaveStyle({ backgroundColor: hex })
   })
@@ -109,6 +113,137 @@ describe('Surface (named plane)', () => {
   })
 })
 
+// A descendant probe that reports the surface LEVEL it resolves from context,
+// so tests can assert what a nested Surface publishes to its children.
+function LevelProbe({ label = 'lvl' }) {
+  const { level } = useSurface()
+  return <Text testID={label}>{level}</Text>
+}
+
+// CIELAB L* (perceptual lightness) — same calc as surface.contract.test, so the
+// "darker" assertions measure the metric the ramp was designed against.
+function lstar(hex: string): number {
+  const h = hex.replace('#', '')
+  const lin = [0, 2, 4]
+    .map((i) => parseInt(h.slice(i, i + 2), 16) / 255)
+    .map((c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4))
+  const y = 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2]
+  return y <= 0.008856 ? y * 903.3 : 116 * Math.cbrt(y) - 16
+}
+
+describe('Surface (pressed well)', () => {
+  it.each([
+    // TD-surface-tokens S-3 re-space: top steps widened (elevated #2C2A28,
+    // raised #31302F, overlay #373635); base/background unchanged.
+    ['overlay', '#373635', '#31302F'], // → raised
+    ['raised', '#31302F', '#2C2A28'], // → elevated
+    ['elevated', '#2C2A28', '#252321'], // → base
+    ['base', '#252321', '#1C1916'], // → background
+  ] as const)(
+    'in a %s parent renders one ramp step down (%s → %s), darker than its parent',
+    (parent, parentHex, pressedHex) => {
+      render(
+        <Surface level={parent}>
+          <Surface pressed testID="well" />
+        </Surface>
+      )
+      expect(screen.getByTestId('well')).toHaveStyle({ backgroundColor: pressedHex })
+      expect(lstar(pressedHex)).toBeLessThan(lstar(parentHex))
+    }
+  )
+
+  it('with no enclosing Surface (default base) presses to the background plane', () => {
+    render(<Surface pressed testID="well" />)
+    expect(screen.getByTestId('well')).toHaveStyle({ backgroundColor: '#1C1916' })
+  })
+
+  it('clamps at the inset floor: pressed directly in background does not underflow', () => {
+    render(
+      <Surface level="background">
+        <Surface pressed testID="well" />
+      </Surface>
+    )
+    // background (#1C1916) steps down to the inset floor (#13100D), the pit.
+    expect(screen.getByTestId('well')).toHaveStyle({ backgroundColor: '#13100D' })
+  })
+
+  it('does not step below the floor: pressed within a floor-pressed well stays at inset', () => {
+    render(
+      <Surface level="background">
+        <Surface pressed>
+          <Surface pressed testID="deeper" />
+        </Surface>
+      </Surface>
+    )
+    expect(screen.getByTestId('deeper')).toHaveStyle({ backgroundColor: '#13100D' })
+  })
+
+  it('publishes the stepped-down level to descendants so a nested press steps again', () => {
+    render(
+      <Surface level="raised">
+        <Surface pressed>
+          <LevelProbe label="lvl" />
+        </Surface>
+      </Surface>
+    )
+    // raised → elevated; descendants read the well's own level.
+    expect(screen.getByTestId('lvl')).toHaveTextContent('elevated')
+  })
+
+  it('adds an inner-shadow recess composed with the darker fill (web path)', () => {
+    render(
+      <Surface level="base">
+        <Surface pressed testID="well" />
+      </Surface>
+    )
+    const boxShadow = screen.getByTestId('well').style.boxShadow
+    expect(boxShadow).toContain('inset')
+  })
+
+  it('reads recessed via the darker fill alone when the shadow path is absent (no-shadow/native)', () => {
+    // The recess is carried by BOTH fill + shadow; strip the shadow and the fill
+    // still darkens one ramp step, so a pressed surface never becomes invisible.
+    render(
+      <Surface level="base">
+        <Surface pressed testID="well" style={{ boxShadow: undefined }} />
+      </Surface>
+    )
+    expect(screen.getByTestId('well')).toHaveStyle({ backgroundColor: '#1C1916' })
+    expect(lstar('#1C1916')).toBeLessThan(lstar('#252321'))
+  })
+
+  it('rounds the well by default and honours an explicit rounded override', () => {
+    render(
+      <Surface level="base">
+        <Surface pressed testID="rounded" />
+        <Surface pressed rounded={false} testID="flat" />
+      </Surface>
+    )
+    expect(screen.getByTestId('rounded')).toBeInTheDocument()
+    expect(screen.getByTestId('flat')).toBeInTheDocument()
+  })
+})
+
+describe('pressedLevel helper', () => {
+  it.each([
+    ['overlay', 'raised'],
+    ['raised', 'elevated'],
+    ['elevated', 'base'],
+    ['base', 'background'],
+    ['background', 'inset'],
+    ['inset', 'inset'],
+  ] as const)('steps %s down to %s (clamped at inset)', (parent, expected) => {
+    expect(pressedLevel(parent)).toBe(expected)
+  })
+})
+
+describe('getPressedRecessShadow', () => {
+  it('returns an inset recess tuned to the fill colour on the web path', () => {
+    const style = getPressedRecessShadow('#1C1916', 'dark') as { boxShadow?: string }
+    expect(style.boxShadow).toContain('inset')
+  })
+})
+
 describe('Surface on-surface colour context', () => {
   it('gives descendants literal-hex dark text colours', () => {
     render(
@@ -152,11 +287,15 @@ describe('Surface on-surface colour context', () => {
 
 describe('surface colour helpers', () => {
   it('surfaceBackground returns literal hex per level + mode', () => {
-    expect(surfaceBackground('elevated', 'dark')).toBe('#191919')
-    expect(surfaceBackground('background', 'dark')).toBe('#101010')
+    expect(surfaceBackground('elevated', 'dark')).toBe('#2C2A28')
+    expect(surfaceBackground('background', 'dark')).toBe('#1C1916')
     expect(surfaceBackground('base', 'light')).toBe('#FFFFFF')
   })
 
+  it('resolves the inset floor from the surfaceRampDark.inset primitive (no token yet)', () => {
+    expect(surfaceBackground('inset', 'dark')).toBe('#13100D')
+  })
+
   it('onSurfaceColors returns the neutral text ramp as literal hex', () => {
     expect(onSurfaceColors('dark')).toEqual({
       primary: '#F3F4F6',

package/src/components/ui/surface/Surface.tsx

@@ -1,11 +1,12 @@
 import React, { useMemo } from 'react'
-import { View, type ViewProps } from 'react-native'
+import { View, type ViewProps, type ViewStyle } from 'react-native'
 import { cn } from '../../../utils/cn'
 import { type ThemeMode } from '../../../theme/tokens/semantic'
 import {
   type ElevationLevel,
   getElevationSurface,
   getElevationShadow,
+  getPressedRecessShadow,
   getBaseSurfaceColor,
   type GlowIntensity,
   getGlowShadow,
@@ -13,6 +14,7 @@ import {
 import {
   SurfaceContext,
   surfaceBackground,
+  pressedLevel,
   useSurface,
   type SurfaceContextValue,
   type SurfaceLevel,
@@ -32,6 +34,14 @@ export interface SurfaceProps extends ViewProps {
    * plane reads full-bleed. Composable with `elevation`'s glow.
    */
   level?: SurfaceLevel
+  /**
+   * Sunken "well": render ONE ramp step DOWN from the parent surface's level —
+   * the symmetric twin of a raised surface stepping up — and add an inner-shadow
+   * recess so the surface reads pressed (darker fill + inset shadow). Relative to
+   * the enclosing Surface's level (not this surface's own `level`), and clamped
+   * at the ramp's `inset` floor so it never underflows. One level of depth only.
+   */
+  pressed?: boolean
   glowColor?: string
   glowIntensity?: GlowIntensity
   /**
@@ -59,6 +69,7 @@ export interface SurfaceProps extends ViewProps {
 export function Surface({
   elevation = 0,
   level,
+  pressed = false,
   glowColor,
   glowIntensity,
   theme,
@@ -72,18 +83,35 @@ export function Surface({
   const mode = theme ?? inherited.mode
   const isPlane = level != null
 
+  // Three grounded ways to own a background, in precedence order:
+  //  - pressed: a well ONE ramp step DOWN from the parent level (relative),
+  //    with an inner-shadow recess — clamps at the `inset` floor.
+  //  - level (named plane): a flat charcoal plane straight from a token.
+  //  - elevation (numeric): the raised-card model — lighten-from-base + shadow.
   const baseColor = getBaseSurfaceColor(mode)
-  const backgroundColor = isPlane
-    ? surfaceBackground(level, mode)
-    : getElevationSurface(baseColor, elevation, mode)
-  // Planes own a flat full-bleed background; the card model keeps its depth shadow.
-  const shadowStyle = isPlane ? {} : getElevationShadow(baseColor, elevation, mode)
+  const resolvedLevel = pressed ? pressedLevel(inherited.level) : (level ?? inherited.level)
+
+  let backgroundColor: string
+  let shadowStyle: ViewStyle
+  if (pressed) {
+    backgroundColor = surfaceBackground(resolvedLevel, mode)
+    shadowStyle = getPressedRecessShadow(backgroundColor, mode)
+  } else if (isPlane) {
+    backgroundColor = surfaceBackground(level, mode)
+    // Planes own a flat full-bleed background — no depth shadow.
+    shadowStyle = {}
+  } else {
+    backgroundColor = getElevationSurface(baseColor, elevation, mode)
+    shadowStyle = getElevationShadow(baseColor, elevation, mode)
+  }
+
   const glowStyle = glowColor ? getGlowShadow(glowColor, glowIntensity) : {}
-  const applyRounded = rounded ?? !isPlane
+  // A pressed well and the card model round by default; a flat plane doesn't.
+  const applyRounded = rounded ?? (pressed || !isPlane)
 
   const value = useMemo<SurfaceContextValue>(
-    () => ({ mode, level: level ?? inherited.level }),
-    [mode, level, inherited.level]
+    () => ({ mode, level: resolvedLevel }),
+    [mode, resolvedLevel]
   )
 
   return (